MichaelCereda · metaversedataman · Jan 19, 2019 · Jan 19, 2019 · Jan 19, 2019 · Jan 19, 2019
diff --git a/README.md b/README.md
@@ -1,3 +1,308 @@
+Quick View of Changes
+===============
+
+## New
+* Searchable Items
+* Use as Navigation
+* Trigger another function
+* Use as form field
+* Single and Multiple selection restriction
+* Custom styles and colors
+
+> You can skip this to details on the [usage of react-native-form-generator](https://github.com/emexrevolarter/react-native-form-generator/blob/master/README.md#react-native-form-generator) by the Designer, OR keep reading to discover the improved performance on this wonderful plugin.
+
+## Let's Go!
+We began by styling the fields. The fields done so far are: 
+1. Input Field (src/lib/InputComponent.js)
+    1. Input field: If label is set, the field is aligned in column, otherwise row. Attributes are: helpText, placeholder, label, labelStyle, containerStyle, inputStyle, iconLeft (with style attr), iconRight (with style attr).
+1. Link Field (src/lib/LinkComponent.js)
+    1. Display field: The field is always aligned in row. Attributes are: helpText, label, labelStyle, containerStyle, iconLeft (with style attr), iconRight (with style attr).
+1. Switch Field (src/lib/SwitchComponent.js)
+    1. Switch field: The field is always aligned in row. Attributes are: helpText, label, labelStyle, containerStyle, switchStyle, iconLeft (with style attr), iconRight (with style attr).
+1. Picker Field (src/lib/PickerComponent.android.js & src/fields/PickerField.android.js)
+    1. Picker field: Modified to include search function.
+        1. types: PickerField, PickerSectionField
+            If label is set, the field is aligned in column, otherwise row. Attributes are: helpText, placeholder, label, labelStyle, containerStyle, items, section (true |false), multiple (true | false), iconLeft (with style attr), iconRight (with style attr), nav (func to redirect to another page; use only when multiple is false), get (func to set selected array to a state), tagStyle (only for PickerField).
+
+Now, you can add custom style as you desire. Below are some screen captures of the performance by the pickers.
+
+### Single Picker
+Select single Item and nothing more than that. It comes with searchable items too. Do you wish to turn your Picker to Navigation? This is excellent for you. Just attach your navigation function, and boom, the User is off to the requested page immediately the Item is selected. More so, the key can be returned by same function for other purposes.
+
+![Single Picker: emexrevolarter](https://github.com/emexrevolarter/liked-files/blob/master/assets/gif/single-picker.gif)
+
+### Multiple Picker
+Select multiple Items, with the ability to remove selected Items you wish to exclude. It comes with searchable items too. Same goes here in terms of Navigation capabilities in Single Picker above.
+
+![Multiple Picker: emexrevolarter](https://github.com/emexrevolarter/liked-files/blob/master/assets/gif/multiple-picker.gif)
+
+### Single Picker (in form)
+Same as Single Picker, with the exception that this is a form element, since form returns its value. It is also searchable.
+
+![Single Picker in form: emexrevolarter](https://github.com/emexrevolarter/liked-files/blob/master/assets/gif/single-picker-in-form.gif)
+
+### Multiple Picker (in form)
+Same as Multiple Picker, with the exception that this is a form element, since form returns its value. It is also searchable.
+
+![Multiple Picker in form: emexrevolarter](https://github.com/emexrevolarter/liked-files/blob/master/assets/gif/multiple-picker-in-form.gif)
+
+> It is Note worthy, pay attention to the change in the structure of the object **items**; the key `find` was added.
+
+### e.g items for PickerField
+
+   `items={[
+    {  
+      name: "<Text>[icon] Fruits</Text>",
+      id: 'fruits',
+      find: 'Fruit'
+    }
+   ]}`
+
+
+### e.g section items for PickerSectionField
+
+   `items={[
+    {  
+      name: "<Text>[icon] Fruits</Text>",
+      find: 'Fruit',
+      id: 0,
+      children: [{
+          name: "<Text>[icon] Apple Fruits</Text>",
+          id: 10,
+          find: 'Apple'
+        },{
+          name: "<Text>[icon] Kiwi Fruits</Text>",
+          id: 16,
+          find: 'Kiwi'
+        }]
+    },
+   ]`
+
+# Usage Example Code
+Follow the link to view (or use) the included Component. Any other Component(s) used bu not included can easily be created by you.
+Note that this time,
+* only stand alone (single) has attribute: nav
+* stand alone's (single and multiple) have attributes: get, and multiple
+* form field (single and multiple) have attributes: section, and multiple
+
+> [Single Picker (stand alone)](https://github.com/emexrevolarter/liked-files/blob/master/components/ListComponent.js)
+
+    `<EmexSearchableList items={items}
+          nav={this.openPage} // use only when multiple is false
+          get={this.getList} // array
+          label='Simple Picker (can be multiple select too)'
+          multiple={false}
+          helpText='**ACTION: triggers function, e.g opens selected page'
+          containerStyle={{backgroundColor: '#ff0000', minHeight: 100, borderRadius: 3, paddingHorizontal: 5}}
+          labelStyle={{color: '#00ff00', paddingBottom: 10}}
+          tagStyle={{backgroundColor: '#8B0000'}}
+          iconLeft={
+            <IconSolid icon='amazon'
+              size={20}
+              style={
+                {color:"#61d062", width: SCREEN_X}
+              }
+            />
+          } /> `
+
+> [Multiple Picker (Stand alone)](https://github.com/emexrevolarter/liked-files/blob/master/components/ListComponent.js)
+
+    '
+    <EmexSectionSearchableList items={itemsSec}
+          //nav={this.openPage} // use only when multiple is false
+          get={this.getList} // array
+          label='Picker Sections (multiple select is active)'
+          multiple={true}
+          helpText='**ACTION: sets array of selected items'
+          containerStyle={[{backgroundColor: '#ff0000', minHeight: 50, borderRadius: 3}, AppStyles.boxShadow]}
+          labelStyle={[{color: '#00ff00'}]}
+          iconLeft={
+            <IconSolid icon='amazon'
+              size={20}
+              style={[
+                {color:"#61d062", width: SCREEN_X}
+              ]}
+            />
+          }
+         />
+    '
+
+> [Single Picker (in form)](https://github.com/emexrevolarter/liked-files/blob/master/components/FormExamComponent.js)
+
+    '<PickerField ref='unit'
+          section={false}
+          multiple={false}
+          label='Single select'
+
+
+          items = {[
+            {
+              id: 'Home',
+              find: 'Home',
+            name: <Text><IconSolid icon='home' size={15} style={[ {color:"#800000", width: SCREEN_X}]} /> Home</Text>,
+          }, {
+            id: 'About',
+            find: 'About',
+            name: <Text><IconSolid icon='user' size={15} style={[ {color:"#800000", width: SCREEN_X}]} /> About</Text>,
+          }, {
+            id: 'Settings',
+            find: 'Settings',
+            name: <Text><IconSolid icon='cog' size={15} style={[ {color:"#800000", width: SCREEN_X}]} /> Setting</Text>,
+          }, {
+            id: 'Form',
+            find: 'Form',
+            name: 'Form',
+          }, {
+            id: ' users',
+            find: 'Users',
+            name: 'Users',
+          }, {
+            id: ' editors',
+            find: 'Editors',
+            name: 'Editors',
+          }, {
+            id: ' premium',
+            find: 'Premium',
+            name: 'Premium',
+          }, {
+            id: ' accounts',
+            find: 'Accounts',
+            name: 'Accounts',
+          }, {
+            id: ' plugins',
+            find: 'Plugins',
+            name: 'Plugins',
+          }
+          ]}
+
+          helpText='Choose any Service'
+          containerStyle={[{backgroundColor: '#ff0000', minHeight: 100, borderRadius: 3, paddingHorizontal: 5}, AppStyles.boxShadow]}
+          labelStyle={[{color: '#00ff00', paddingBottom: 10}]}
+          tagStyle={{backgroundColor: '#f00'}}
+          iconLeft={
+            <IconSolid icon='cart-arrow-down'
+              size={20}
+              style={[
+                {color:"#61d062", width: SCREEN_X}
+              ]}
+            />
+          }
+          />'
+
+
+> [Multiple Picker (in form)](https://github.com/emexrevolarter/liked-files/blob/master/components/FormExamComponent.js)
+
+    '<PickerField ref='multiple'
+          section={true}
+          multiple={true}
+          label='Sectioned multiple select'
+          items = {[
+            {  
+              name: "Home of Fruits",
+              find: 'Fruit',
+              id: 0,
+              children: [{
+                  name: <Text><IconSolid icon='home' size={15} style={[ {color:"#800000", width: SCREEN_X}]} /> Home</Text>,
+                  id: ' Home',
+                  find: 'Home'
+                },{
+                  name: "Strawberry",
+                  id: ' Strawberry',
+                  find: 'Strawberry'
+                },{
+                  name: "Pineapple",
+                  id: ' Pineapple',
+                  find: 'Pineapple'
+                },{
+                  name: "Banana",
+                  id: ' Banana',
+                  find: 'Banana'
+                },{
+                  name: "Watermelon",
+                  id: ' Watermelon',
+                  find: 'Watermelon'
+                },{
+                  name: "Kiwi fruit",
+                  id: ' Kiwi',
+                  find: 'Kiwi'
+                }]
+            },
+            {
+              name: "Gems",
+              find: 'Gems',
+              id: 1,
+              children: [{
+                  name: "Quartz",
+                  id: ' Quartz',
+                  find: 'Quartz'
+                },{
+                  name: "Zircon",
+                  id: ' Zircon',
+                  find: 'Zircon'
+                },{
+                  name: "Sapphire",
+                  id: ' Sapphire',
+                  find: 'Sapphire'
+                },{
+                  name: "Topaz",
+                  id: ' Topaz',
+                  find: 'Topaz'
+                }]
+            },
+            {
+              name: "Plants",
+              find: 'Plants',
+              id: 2,
+              children: [{
+                  name: "Spinach",
+                  id: ' Spinach',
+                  find: 'Spinach'
+                },{
+                  name: "Yucca",
+                  id: ' Yucca',
+                  find: 'Yucca'
+                },{
+                  name: "Monsteria",
+                  id: ' Monsteria',
+                  find: 'Monsteria'
+                },{
+                  name: "Palm",
+                  id: ' Palm',
+                  find: 'Palm'
+                }]
+            },
+          ]}  
+          helpText='Choose any Fruit'
+          containerStyle={[{backgroundColor: '#ff0000', minHeight: 100, borderRadius: 3, paddingHorizontal: 5}, AppStyles.boxShadow]}
+          labelStyle={[{color: '#00ff00', paddingBottom: 10}]}
+          iconLeft={
+            <IconSolid icon='cart-plus'
+              size={20}
+              style={[
+                {color:"#61d062", width: SCREEN_X}
+              ]}
+            />
+          }
+          />'
+
+# Dependencies
+The two plugins that made all these possible are stated below. Include them in the node_modules of your App to replace the existing ones (if you have installed them; if not, install first, then replace).
+
+[react-native-multiple-select](packages/react-native-multiple-select)
+
+[react-native-sectioned-multi-select](packages/react-native-sectioned-multi-select)
+
+
+# More Benefits
+We thank you for reading this far. You view this great Activity Indicator created by us; all for free.
+
+![Activity Indicator by emexrevolarter](https://github.com/emexrevolarter/liked-files/blob/master/assets/gif/activity-indicator.gif)
+
+[Get this Awesome Indicator for FREE](https://github.com/emexrevolarter/liked-files/blob/master/components/IndicatorComponent.js)
+
+
+
+
 React Native Form Generator
 ================
 
@@ -277,7 +582,7 @@ All the props are passed down to the underlying TextInput Component
 | iconLeft | React component, shown on the left of the field, the component needs to have a prop size to allow the inputText to resize properly  |
 | iconRight | React component, shown on the right of the field, the component needs to have a prop size to allow the inputText to resize properly  |
 | validationFunction | Function or array of functions, used to pass custom validators to the component|
-| keyboardType | possible values: __undefined__, __email-address__|
+| keyboardType | possible values: __underfined__, __email-address__|
 
 | ref methods | Description |
 | --- | --- |

diff --git a/examples/FormView.js b/examples/FormView.js
@@ -17,8 +17,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
 
 import { Form,
   Separator,InputField, LinkField,
-  SwitchField, PickerField, DatePickerField,
-  TimePickerField, CountDownField
+  SwitchField, PickerField,DatePickerField,TimePickerField
 } from 'react-native-form-generator';
 
 class CustomModal extends React.Component{
@@ -197,9 +196,6 @@ export class FormView extends React.Component{
       prettyPrint={true}
       pickerWrapper={<CustomModal />}
       />
-        <CountDownField ref='countdown'
-                        label="CountDown"
-                        placeholder='11:00' />
         <DatePickerField ref='meeting'
           iconLeft={[<Icon style={{alignSelf:'center', marginLeft:10}} name='ios-flame' size={30} />,
                      <Icon style={{alignSelf:'center', marginLeft:10, color:'red'}} name='ios-flame' size={30} />

diff --git a/index.js b/index.js
@@ -8,13 +8,12 @@ import {SwitchField} from './src/fields/SwitchField';
 import {PickerField} from './src/fields/PickerField';
 import {DatePickerField} from './src/fields/DatePickerField';
 import {TimePickerField} from './src/fields/TimePickerField';
-import {CountDownField} from './src/fields/CountDownField';
 
 
 //import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
 export {
         Form,
         Separator, InputField, LinkField,
         SwitchField, PickerField, DatePickerField,
-        CountDownField, TimePickerField
+        TimePickerField
       }