Add input with action example

Add Select example

Author: felixmosh

example/App.tsx

@@ -47,34 +47,14 @@ export default class App extends React.Component {
 
         <Container style={{ marginTop: 24 }}>
           <Menu pointing secondary>
-            <Menu.Item
-              name="Form"
-              active={selectedTab === 'Form'}
-              onClick={this.handleChangeTab}
-            />
-
-            <Menu.Item
-              name="Input"
-              active={selectedTab === 'Input'}
-              onClick={this.handleChangeTab}
-            />
-
-            <Menu.Item
-              name="Checkbox"
-              active={selectedTab === 'Checkbox'}
-              onClick={this.handleChangeTab}
-            />
-
-            <Menu.Item
-              name="RadioGroup"
-              active={selectedTab === 'RadioGroup'}
-              onClick={this.handleChangeTab}
-            />
-            <Menu.Item
-              name="Dropdown"
-              active={selectedTab === 'Dropdown'}
-              onClick={this.handleChangeTab}
-            />
+            {Object.keys(tabs).map((key) => (
+              <Menu.Item
+                name={key}
+                key={key}
+                active={selectedTab === key}
+                onClick={this.handleChangeTab}
+              />
+            ))}
           </Menu>
           {tabs[selectedTab]}
         </Container>

example/DropdownExamples.tsx

@@ -1,7 +1,7 @@
 import Formsy from 'formsy-react';
 import * as React from 'react';
 import { Button, Container, Label, Message, Segment } from 'semantic-ui-react';
-import { Dropdown } from '../src';
+import { Dropdown, Select } from '../src';
 
 const styles = {
   root: {
@@ -101,6 +101,22 @@ export default class CheckboxExamples extends React.Component {
       />
     );
 
+    const asSelect = (
+      <Select
+        name="as-select"
+        id="as-select"
+        options={options}
+        required
+        validationErrors={{
+          isDefaultRequiredValue: 'You need to select a product',
+        }}
+        errorLabel={errorLabel}
+        compact={true}
+        basic={true}
+        defaultValue={options[0].value}
+      />
+    );
+
     return (
       <Container style={styles.root}>
         <Formsy
@@ -109,15 +125,20 @@ export default class CheckboxExamples extends React.Component {
           ref={this.formRef}
         >
           <Segment>
-            <h5> Single-select </h5>
+            <h5>Single-select</h5>
             {dropdownSingle}
           </Segment>
 
           <Segment>
-            <h5> Single-select with default value </h5>
+            <h5>Single-select with default value</h5>
             {singleSelectWithDefaultValue}
           </Segment>
 
+          <Segment>
+            <h5>As Select</h5>
+            {asSelect}
+          </Segment>
+
           <Segment>
             <h5> Multi-select (Four selections minimum)</h5>
             {dropdownMultiple}

example/InputExamples.tsx

@@ -8,7 +8,7 @@ import {
   Divider,
   Message,
 } from 'semantic-ui-react';
-import { Input, Form } from '../src';
+import { Input, Select, Form } from '../src';
 
 const styles = {
   root: {
@@ -100,6 +100,28 @@ export default class InputExamples extends React.Component {
       />
     );
 
+    const inputWithAction = (
+      <Input
+        name="input-with-action"
+        placeholder="Customer name"
+        required={true}
+        action={
+          <Select
+            basic
+            compact
+            name="title"
+            as={({ children }) => <>{children}</>}
+            options={[
+              { text: 'Mr', value: 'Mr' },
+              { text: 'Ms', value: 'Ms' },
+            ]}
+            defaultValue="Mr"
+          />
+        }
+        actionPosition="left"
+      />
+    );
+
     return (
       <Container style={styles.root}>
         <Form onValidSubmit={this.onValidSubmit} ref={this.formRef}>
@@ -114,10 +136,15 @@ export default class InputExamples extends React.Component {
           </Segment>
 
           <Segment>
-            <h5> Input With Custorm Error Label </h5>
+            <h5> Input With Custom Error Label </h5>
             {inputWithCustomErrorLabel}
           </Segment>
 
+          <Segment>
+            <h5> Input With Action </h5>
+            {inputWithAction}
+          </Segment>
+
           <Segment>
             <h5> Input With Default Value </h5>
             {inputWithDefaultValue}