Merge pull request #207 from tabler/form-shorthand-props

Form components, features and fixes

example/src/FormElementsPage.react.js

@@ -141,15 +141,15 @@ function FormElements() {
               <Form.Group label="Input Group">
                 <Form.InputGroup>
                   <Form.Input placeholder="Search for..." />
-                  <Form.InputGroup append>
+                  <Form.InputGroupAppend>
                     <Button
                       RootComponent="a"
                       color="primary"
                       href="http://www.google.com"
                     >
                       Go!
                     </Button>
-                  </Form.InputGroup>
+                  </Form.InputGroupAppend>
                 </Form.InputGroup>
               </Form.Group>
             </ComponentDemo>

src/components/Button/Button.react.js

@@ -24,6 +24,7 @@ type PropsForAll = {|
   +to?: string,
   +isOption?: boolean,
   +rootRef?: (?HTMLElement) => void,
+  +onClick?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
 |};
 
 type DefaultButtonComponent = {|
@@ -70,6 +71,8 @@ const Button = (props: Props): React.Node => {
     isDropdownToggle,
     isOption,
     rootRef,
+    to,
+    onClick,
   } = props;
 
   const classes = cn(
@@ -148,8 +151,6 @@ const Button = (props: Props): React.Node => {
       </a>
     );
   } else {
-    const { onClick, to } = props;
-
     const Component: React.ElementType = props.RootComponent;
 
     return (
@@ -163,4 +164,6 @@ const Button = (props: Props): React.Node => {
 Button.List = ButtonList;
 Button.Dropdown = ButtonDropdown;
 
+Button.displayName = "Button";
+
 export default Button;

src/components/Form/Form.examples.md

@@ -1 +1,7 @@
 
+```jsx
+<Form onSubmit={(event) => console.log(event.target.name + 'clicked')}>
+  <Form.Input name='username' label='Username' placeholder='Enter Username' />
+  <Button type='submit' value='Submit' />
+</Form>
+```

src/components/Form/Form.react.js

@@ -29,7 +29,7 @@ import FormInputGroupPrepend from "./FormInputGroupPrepend.react";
 import FormMaskedInput from "./FormMaskedInput.react";
 import FormDatePicker from "./FormDatePicker.react";
 
-type Props = {|
+export type Props = {|
   +children?: React.Node,
   +className?: string,
   +action?: string,

src/components/Form/FormCheckbox.react.js

@@ -6,6 +6,9 @@ import Form from "./";
 
 export type Props = {|
   +className?: string,
+  /**
+   * Wrap the checkbox with a label
+   */
   +label?: string,
   +value?: string | number | boolean,
   +name?: string,
@@ -33,23 +36,30 @@ function FormCheckbox({
     { "custom-control-inline": isInline },
     className
   );
-  return (
+  const inputComponent = (
+    <Form.Input
+      type="checkbox"
+      name={name}
+      value={value}
+      checked={checked}
+      className={classes}
+      disabled={disabled}
+      readOnly={readOnly}
+      onChange={onChange}
+    />
+  );
+
+  return label ? (
     <label className={classes}>
-      <Form.Input
-        type="checkbox"
-        name={name}
-        value={value}
-        checked={checked}
-        className={classes}
-        disabled={disabled}
-        readOnly={readOnly}
-        onChange={onChange}
-      />
+      {inputComponent}
       <span className="custom-control-label">{label}</span>
     </label>
+  ) : (
+    inputComponent
   );
 }
 
 FormCheckbox.displayName = "Form.Checkbox";
 
+/** @component */
 export default FormCheckbox;

src/components/Form/FormGroup.react.js

@@ -3,21 +3,27 @@
 import * as React from "react";
 import cn from "classnames";
 import FormLabel from "./FormLabel.react";
+import FormInput from "./FormInput.react";
+import type { Props as InputProps } from "./FormInput.react";
 
 type Props = {|
   +children?: React.Node,
   +className?: string,
   +label?: React.Node,
   +isRequired?: boolean,
+  +inputProps?: InputProps,
 |};
 
 function FormGroup({
   className,
   children,
   label,
   isRequired,
+  inputProps,
 }: Props): React.Node {
   const classes = cn("form-group", className);
+  const inputComponent =
+    inputProps && React.createElement(FormInput, inputProps);
   return (
     <div className={classes}>
       {!label ? null : typeof label === "string" ? (
@@ -28,7 +34,7 @@ function FormGroup({
       ) : (
         label
       )}
-      {children}
+      {inputComponent || children}
     </div>
   );
 }

src/components/Form/FormInput.examples.md

@@ -1,13 +1,39 @@
-### Icon input
+```jsx
+<Form.Input name='username' placeholder='Username' />
+```
+
+#### Input Label
+Render an input wrapped in a Form.Group with a Label
+
+```jsx
+<Form.Input label='username' placeholder='Username' />
+```
+
+is the same as
+
+```jsx
+<Form.Group>
+  <Form.Label>Username</Form.Label>
+  <Form.Input placeholder="Username" />
+</Form.Group>
+```
+
+#### Input Icons
+
+```jsx
+<Form.Group label="Input Icon">
+  <Form.Input icon="user" placeholder="Username" />
+</Form.Group>
+```
+
+#### Append the Icon
 
 ```jsx
 <Form.Group label="Input Icon">
   <Form.Input
     icon="search"
     placeholder="Search for..."
     position="append"
-    className={"mb-3"}
   />
-  <Form.Input icon="user" placeholder="Username" />
 </Form.Group>
 ```

src/components/Form/FormInput.react.js

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { Icon } from "../";
 import cn from "classnames";
+import FormGroup from "./FormGroup.react";
 
 type FormStyle = {|
   +className?: string,
@@ -30,8 +31,15 @@ export type Props = {|
   +placeholder?: string,
   +type?: "checkbox" | "radio" | "text" | "email" | "password",
   +value?: string | number | boolean,
+  /**
+   * Wraps the input in Form.Group and adds a label
+   */
+  +label?: string,
 |};
 
+/**
+ * A an input field
+ */
 function FormInput(props: Props): React.Node {
   const {
     className,
@@ -50,6 +58,7 @@ function FormInput(props: Props): React.Node {
     onBlur,
     disabled,
     readOnly,
+    label,
   } = props;
   const type = props.type || "text";
 
@@ -79,7 +88,7 @@ function FormInput(props: Props): React.Node {
     onBlur,
   };
 
-  return !icon ? (
+  const contents = !icon ? (
     <React.Fragment>
       {type === "checkbox" || type === "radio" ? (
         <input {...allInputProps} checked={checked} />
@@ -106,6 +115,8 @@ function FormInput(props: Props): React.Node {
       {feedback && <span className="invalid-feedback">{feedback}</span>}
     </React.Fragment>
   );
+
+  return label ? <FormGroup label={label}>{contents}</FormGroup> : contents;
 }
 
 FormInput.displayName = "Form.Input";

src/components/Form/FormInputGroup.examples.md

@@ -0,0 +1,20 @@
+```jsx
+<Form.InputGroup append={<Button
+        RootComponent="a"
+        color="primary"
+        href="http://www.google.com"
+    >Go!
+    </Button>}>
+    <Form.Input placeholder="Search for..." />
+</Form.InputGroup>
+```
+
+```jsx
+<Form.InputGroup inputProps={{placeholder: "Search for..."}} append={<Button
+        RootComponent="a"
+        color="primary"
+        href="http://www.google.com"
+    >Go!
+    </Button>} />
+```
+

src/components/Form/FormInputGroup.react.js

@@ -2,32 +2,46 @@
 
 import * as React from "react";
 import cn from "classnames";
+import Form from "./Form.react";
+import FormInputGroupAppend from "./FormInputGroupAppend.react";
+import FormInputGroupPrepend from "./FormInputGroupPrepend.react";
+import type { Props as InputProps } from "./FormInput.react";
 
 type Props = {|
   +children?: React.Node,
   +className?: string,
-  +append?: boolean,
-  +prepend?: boolean,
+  +append?: React.Node,
+  +prepend?: React.Node,
   +RootComponent?: React.ElementType,
+  +inputProps?: InputProps,
 |};
 
-function FormInputGroup({
-  className,
-  children,
-  append,
-  prepend,
-  RootComponent,
-}: Props): React.Node {
+function FormInputGroup(props: Props): React.Node {
+  const { className, append, prepend, RootComponent, inputProps } = props;
   const classes = cn(
     {
-      "input-group": !append && !prepend,
-      "input-group-append": append,
-      "input-group-prepend": prepend,
+      "input-group": true,
     },
     className
   );
   const Component = RootComponent || "div";
-  return <Component className={classes}>{children}</Component>;
+  const children = inputProps ? <Form.Input {...inputProps} /> : props.children;
+
+  if (prepend === true) {
+    return <FormInputGroupPrepend>{children}</FormInputGroupPrepend>;
+  }
+
+  if (append === true) {
+    return <FormInputGroupAppend>{children}</FormInputGroupAppend>;
+  }
+
+  return (
+    <Component className={classes}>
+      {prepend && <FormInputGroupPrepend>{prepend}</FormInputGroupPrepend>}
+      {children}
+      {append && <FormInputGroupAppend>{append}</FormInputGroupAppend>}
+    </Component>
+  );
 }
 
 FormInputGroup.displayName = "Form.InputGroup";

src/components/Form/FormInputGroupAppend.examples.md

@@ -0,0 +1,14 @@
+```jsx
+<Form.InputGroup>
+    <Form.Input placeholder="Search for..." />
+    <Form.InputGroupAppend>
+    <Button
+        RootComponent="a"
+        color="primary"
+        href="http://www.google.com"
+    >
+        Go!
+    </Button>
+    </Form.InputGroupAppend>
+</Form.InputGroup>
+```

src/components/Form/FormInputGroupAppend.react.js

@@ -2,20 +2,15 @@
 
 import * as React from "react";
 import cn from "classnames";
-import FormInputGroup from "./FormInputGroup.react";
 
 type Props = {|
   +children?: React.Node,
   +className?: string,
 |};
 
 function FormInputGroupAppend({ className, children }: Props): React.Node {
-  const classes = cn(className);
-  return (
-    <FormInputGroup RootComponent="span" className={classes} append>
-      <span className="input-group-text">{children}</span>
-    </FormInputGroup>
-  );
+  const classes = cn("input-group-append", className);
+  return <span className={classes}>{children}</span>;
 }
 
 FormInputGroupAppend.displayName = "Form.InputGroupAppend";

src/components/Form/FormInputGroupPrepend.examples.md

@@ -0,0 +1,14 @@
+```jsx
+<Form.InputGroup>
+    <Form.InputGroupPrepend>
+    <Button
+        RootComponent="a"
+        color="primary"
+        href="http://www.google.com"
+    >
+        Go!
+    </Button>
+    </Form.InputGroupPrepend>
+    <Form.Input placeholder="Search for..." />
+</Form.InputGroup>
+```