Cleanup Form-Field

- avoid declaring components inside the body function of parent components https://dev.to/borasvm/react-create-component-inside-a-component-456b

ui/component/common/form-components/common.jsx

@@ -0,0 +1,52 @@
+// @flow
+import * as React from 'react';
+import Button from 'component/button';
+
+type CountInfoProps = {
+  charCount?: number,
+  textAreaMaxLength?: number,
+};
+
+export const CountInfo = (countInfoProps: CountInfoProps) => {
+  const { charCount, textAreaMaxLength } = countInfoProps;
+
+  // Ideally, the character count should (and can) be appended to the
+  // SimpleMDE's "options::status" bar. However, I couldn't figure out how
+  // to pass the current value to it's callback, nor query the current
+  // text length from the callback. So, we'll use our own widget.
+  const hasCharCount = charCount !== undefined && charCount >= 0;
+
+  return (
+    hasCharCount &&
+    textAreaMaxLength !== undefined && (
+      <span className="comment__char-count-mde">{`${charCount || '0'}/${textAreaMaxLength}`}</span>
+    )
+  );
+};
+
+type QuickActionProps = {
+  label?: string,
+  quickActionHandler?: (any) => any,
+};
+
+export const QuickAction = (quickActionProps: QuickActionProps) => {
+  const { label, quickActionHandler } = quickActionProps;
+
+  return label && quickActionHandler ? (
+    <div className="form-field__quick-action">
+      <Button button="link" onClick={quickActionHandler} label={label} />
+    </div>
+  ) : null;
+};
+
+type LabelProps = {
+  name: string,
+  label?: any,
+  errorMessage?: any,
+};
+
+export const Label = (labelProps: LabelProps) => {
+  const { name, label, errorMessage } = labelProps;
+
+  return <label htmlFor={name}>{errorMessage ? <span className="error__text">{errorMessage}</span> : label}</label>;
+};

ui/component/common/form-components/form-field.jsx

@@ -1,16 +1,18 @@
 // @flow
 import 'easymde/dist/easymde.min.css';
+
 import { FF_MAX_CHARS_DEFAULT } from 'constants/form-field';
 import { openEditorMenu, stopContextMenu } from 'util/context-menu';
 import { lazyImport } from 'util/lazyImport';
-import Button from 'component/button';
 import MarkdownPreview from 'component/common/markdown-preview';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
 import SimpleMDE from 'react-simplemde-editor';
-import type { ElementRef, Node } from 'react';
-import Drawer from '@mui/material/Drawer';
-import CommentSelectors from 'component/commentCreate/comment-selectors';
+import type { ElementRef } from 'react';
+import { InputSimple, BlockWrapWrapper } from './input-simple';
+import { InputSelect } from './input-select';
+import { CountInfo, QuickAction, Label } from './common';
+import { TextareaWrapper } from './slim-input-field';
 
 // prettier-ignore
 const TextareaWithSuggestions = lazyImport(() => import('component/textareaWithSuggestions' /* webpackChunkName: "suggestions" */));
@@ -29,7 +31,7 @@ type Props = {
   hideSuggestions?: boolean,
   inputButton?: React$Node,
   isLivestream?: boolean,
-  label?: string | Node,
+  label?: any,
   labelOnLeft: boolean,
   max?: number,
   min?: number,
@@ -124,56 +126,50 @@ export class FormField extends React.PureComponent<Props, State> {
 
     const errorMessage = typeof error === 'object' ? error.message : error;
 
-    // Ideally, the character count should (and can) be appended to the
-    // SimpleMDE's "options::status" bar. However, I couldn't figure out how
-    // to pass the current value to it's callback, nor query the current
-    // text length from the callback. So, we'll use our own widget.
-    const hasCharCount = charCount !== undefined && charCount >= 0;
-    const countInfo = hasCharCount && textAreaMaxLength !== undefined && (
-      <span className="comment__char-count-mde">{`${charCount || '0'}/${textAreaMaxLength}`}</span>
-    );
+    const wrapperProps = { type, helper };
+    const labelProps = { name, label };
+    const countInfoProps = { charCount, textAreaMaxLength };
+    const quickActionProps = { label: quickActionLabel, quickActionHandler };
+    const inputSimpleProps = { name, label, ...inputProps };
+    const inputSelectProps = { name, error, label, children, ...inputProps };
 
-    const Wrapper = blockWrap
-      ? ({ children: innerChildren }) => <fieldset-section class="radio">{innerChildren}</fieldset-section>
-      : ({ children: innerChildren }) => <span className="radio">{innerChildren}</span>;
-
-    const quickAction =
-      quickActionLabel && quickActionHandler ? (
-        <div className="form-field__quick-action">
-          <Button button="link" onClick={quickActionHandler} label={quickActionLabel} />
-        </div>
-      ) : null;
-
-    const inputSimple = (type: string) => (
-      <>
-        <input id={name} type={type} {...inputProps} />
-        <label htmlFor={name}>{label}</label>
-      </>
-    );
-
-    const inputSelect = (selectClass: string) => (
-      <fieldset-section class={selectClass}>
-        {(label || errorMessage) && (
-          <label htmlFor={name}>{errorMessage ? <span className="error__text">{errorMessage}</span> : label}</label>
-        )}
-        <select id={name} {...inputProps}>
-          {children}
-        </select>
-      </fieldset-section>
-    );
-
-    const input = () => {
     switch (type) {
       case 'radio':
-          return <Wrapper>{inputSimple('radio')}</Wrapper>;
+        return (
+          <FormFieldWrapper {...wrapperProps}>
+            <BlockWrapWrapper blockWrap={blockWrap}>
+              <InputSimple {...inputSimpleProps} type="radio" />
+            </BlockWrapWrapper>
+          </FormFieldWrapper>
+        );
       case 'checkbox':
-          return <div className="checkbox">{inputSimple('checkbox')}</div>;
+        return (
+          <FormFieldWrapper {...wrapperProps}>
+            <div className="checkbox">
+              <InputSimple {...inputSimpleProps} type="checkbox" />
+            </div>
+          </FormFieldWrapper>
+        );
       case 'range':
-          return <div>{inputSimple('range')}</div>;
+        return (
+          <FormFieldWrapper {...wrapperProps}>
+            <div className="range">
+              <InputSimple {...inputSimpleProps} type="range" />
+            </div>
+          </FormFieldWrapper>
+        );
       case 'select':
-          return inputSelect('');
+        return (
+          <FormFieldWrapper {...wrapperProps}>
+            <InputSelect {...inputSelectProps} />
+          </FormFieldWrapper>
+        );
       case 'select-tiny':
-          return inputSelect('select--slim');
+        return (
+          <FormFieldWrapper {...wrapperProps}>
+            <InputSelect {...inputSelectProps} className="select--slim" />
+          </FormFieldWrapper>
+        );
       case 'markdown':
         const handleEvents = { contextmenu: openEditorMenu };
 
@@ -232,14 +228,17 @@ export class FormField extends React.PureComponent<Props, State> {
         };
 
         return (
+          <FormFieldWrapper {...wrapperProps}>
             <div className="form-field--SimpleMDE" onContextMenu={stopContextMenu}>
               <fieldset-section>
                 <div className="form-field__two-column">
                   <div>
-                    <label htmlFor={name}>{label}</label>
+                    <Label {...labelProps} />
                   </div>
-                  {quickAction}
+
+                  <QuickAction {...quickActionProps} />
                 </div>
+
                 <SimpleMDE
                   {...inputProps}
                   id={name}
@@ -255,9 +254,11 @@ export class FormField extends React.PureComponent<Props, State> {
                     },
                   }}
                 />
-                {countInfo}
+
+                <CountInfo {...countInfoProps} />
               </fieldset-section>
             </div>
+          </FormFieldWrapper>
         );
       case 'textarea':
         const closeSelector =
@@ -266,6 +267,7 @@ export class FormField extends React.PureComponent<Props, State> {
             : () => {};
 
         return (
+          <FormFieldWrapper {...wrapperProps}>
             <fieldset-section>
               <TextareaWrapper
                 isDrawerOpen={Boolean(this.state.drawerOpen)}
@@ -277,11 +279,13 @@ export class FormField extends React.PureComponent<Props, State> {
                 slimInputButtonRef={slimInputButtonRef}
                 tipModalOpen={tipModalOpen}
               >
-                {(!slimInput || this.state.drawerOpen) && (label || quickAction) && (
+                {(!slimInput || this.state.drawerOpen) && label && (
                   <div className="form-field__two-column">
-                    <label htmlFor={name}>{label}</label>
-                    {quickAction}
-                    {countInfo}
+                    <Label {...labelProps} />
+
+                    <QuickAction {...quickActionProps} />
+
+                    <CountInfo {...countInfoProps} />
                   </div>
                 )}
 
@@ -328,94 +332,48 @@ export class FormField extends React.PureComponent<Props, State> {
                 )}
               </TextareaWrapper>
             </fieldset-section>
+          </FormFieldWrapper>
         );
       default:
-          const inputElement = <input type={type} id={name} {...inputProps} ref={this.input} />;
-          const inner = inputButton ? (
+        const inputElementProps = { type, name, ref: this.input, ...inputProps };
+
+        return (
+          <FormFieldWrapper {...wrapperProps}>
+            <fieldset-section>
+              {(label || errorMessage) && <Label {...labelProps} errorMessage={errorMessage} />}
+
+              {prefix && <label htmlFor={name}>{prefix}</label>}
+
+              {inputButton ? (
                 <input-submit>
-              {inputElement}
+                  <input {...inputElementProps} />
                   {inputButton}
                 </input-submit>
               ) : (
-            inputElement
-          );
-
-          return (
-            <fieldset-section>
-              {(label || errorMessage) && (
-                <label htmlFor={name}>
-                  {errorMessage ? <span className="error__text">{errorMessage}</span> : label}
-                </label>
+                <input {...inputElementProps} />
               )}
-              {prefix && <label htmlFor={name}>{prefix}</label>}
-              {inner}
             </fieldset-section>
+          </FormFieldWrapper>
         );
     }
-    };
-
-    return (
-      <>
-        {type && input()}
-        {helper && <div className="form-field__help">{helper}</div>}
-      </>
-    );
   }
 }
 
 export default FormField;
 
-type TextareaWrapperProps = {
-  slimInput?: boolean,
-  slimInputButtonRef?: any,
-  children: Node,
-  isDrawerOpen: boolean,
-  showSelectors?: boolean,
-  commentSelectorsProps?: any,
-  tipModalOpen?: boolean,
-  toggleDrawer: () => void,
-  closeSelector?: () => void,
+type WrapperProps = {
+  type?: string,
+  children?: any,
+  helper?: any,
 };
 
-function TextareaWrapper(wrapperProps: TextareaWrapperProps) {
-  const {
-    children,
-    slimInput,
-    slimInputButtonRef,
-    isDrawerOpen,
-    commentSelectorsProps,
-    showSelectors,
-    tipModalOpen,
-    toggleDrawer,
-    closeSelector,
-  } = wrapperProps;
+const FormFieldWrapper = (wrapperProps: WrapperProps) => {
+  const { type, children, helper } = wrapperProps;
 
-  function handleCloseAll() {
-    toggleDrawer();
-    if (closeSelector) closeSelector();
-  }
-
-  return slimInput ? (
-    !isDrawerOpen ? (
-      <div ref={slimInputButtonRef} role="button" onClick={toggleDrawer}>
-        {children}
-      </div>
-    ) : (
-      <Drawer
-        className="comment-create--drawer"
-        anchor="bottom"
-        open
-        onClose={handleCloseAll}
-        // The Modal tries to enforce focus when open and doesn't allow clicking or changing any
-        // other input boxes, so in this case it is disabled when trying to type in a custom tip
-        ModalProps={{ disableEnforceFocus: tipModalOpen }}
-      >
-        {children}
-
-        {showSelectors && <CommentSelectors closeSelector={closeSelector} {...commentSelectorsProps} />}
-      </Drawer>
-    )
-  ) : (
-    <>{children}</>
+  return (
+    <>
+      {type && children}
+      {helper && <div className="form-field__help">{helper}</div>}
+    </>
   );
-}
+};

ui/component/common/form-components/input-select.jsx

@@ -0,0 +1,25 @@
+// @flow
+import * as React from 'react';
+import { Label } from './common';
+
+type InputSelectProps = {
+  name: string,
+  className?: string,
+  label?: any,
+  errorMessage?: any,
+  children?: any,
+};
+
+export const InputSelect = (inputSelectProps: InputSelectProps) => {
+  const { name, className, errorMessage, label, children, ...inputProps } = inputSelectProps;
+
+  return (
+    <fieldset-section class={className || ''}>
+      {(label || errorMessage) && <Label name={name} label={label} errorMessage={errorMessage} />}
+
+      <select id={name} {...inputProps}>
+        {children}
+      </select>
+    </fieldset-section>
+  );
+};

ui/component/common/form-components/input-simple.jsx

@@ -0,0 +1,35 @@
+// @flow
+import * as React from 'react';
+import { Label } from './common';
+
+type InputSimpleProps = {
+  name: string,
+  type: string,
+  label?: any,
+};
+
+export const InputSimple = (inputSimpleProps: InputSimpleProps) => {
+  const { name, type, label, ...inputProps } = inputSimpleProps;
+
+  return (
+    <>
+      <input id={name} type={type} {...inputProps} />
+      <Label name={name} label={label} />
+    </>
+  );
+};
+
+type BlockWrapProps = {
+  blockWrap: boolean,
+  children?: any,
+};
+
+export const BlockWrapWrapper = (blockWrapProps: BlockWrapProps) => {
+  const { blockWrap, children } = blockWrapProps;
+
+  return blockWrap ? (
+    <fieldset-section class="radio">{children}</fieldset-section>
+  ) : (
+    <span className="radio">{children}</span>
+  );
+};

ui/component/common/form-components/slim-input-field.jsx

@@ -0,0 +1,59 @@
+// @flow
+import React from 'react';
+import Drawer from '@mui/material/Drawer';
+import CommentSelectors from 'component/commentCreate/comment-selectors';
+
+type TextareaWrapperProps = {
+  slimInput?: boolean,
+  slimInputButtonRef?: any,
+  children: any,
+  isDrawerOpen: boolean,
+  showSelectors?: boolean,
+  commentSelectorsProps?: any,
+  tipModalOpen?: boolean,
+  toggleDrawer: () => void,
+  closeSelector?: () => void,
+};
+
+export const TextareaWrapper = (wrapperProps: TextareaWrapperProps) => {
+  const {
+    children,
+    slimInput,
+    slimInputButtonRef,
+    isDrawerOpen,
+    commentSelectorsProps,
+    showSelectors,
+    tipModalOpen,
+    toggleDrawer,
+    closeSelector,
+  } = wrapperProps;
+
+  function handleCloseAll() {
+    toggleDrawer();
+    if (closeSelector) closeSelector();
+  }
+
+  return slimInput ? (
+    !isDrawerOpen ? (
+      <div ref={slimInputButtonRef} role="button" onClick={toggleDrawer}>
+        {children}
+      </div>
+    ) : (
+      <Drawer
+        className="comment-create--drawer"
+        anchor="bottom"
+        open
+        onClose={handleCloseAll}
+        // The Modal tries to enforce focus when open and doesn't allow clicking or changing any
+        // other input boxes, so in this case it is disabled when trying to type in a custom tip
+        ModalProps={{ disableEnforceFocus: tipModalOpen }}
+      >
+        {children}
+
+        {showSelectors && <CommentSelectors closeSelector={closeSelector} {...commentSelectorsProps} />}
+      </Drawer>
+    )
+  ) : (
+    children
+  );
+};