Merge pull request #1 from darianstlex/v1

Refactoring, tests, documentation, v1

Author: darianstlex

.npmignore

@@ -6,3 +6,6 @@ scripts
 .gitignore
 .idea
 webpack.config.js
+jest.config.js
+*.test.js
+__snapshots__

README.md

@@ -1,13 +1,9 @@
 > Single/Multi Select React Component
 
-Inspired by [React MultiSelect](https://github.com/Khan/react-multi-select)
-
 [Demo and Specimens](https://darianstlex.github.io/react-sm-select) Catalog
 
 ### Installation
 
-Install the react-sm-select npm package:
-
 ```code
 npm install react-sm-select
 ```
@@ -47,10 +43,12 @@ Can be used css overriding, see compiled css. Or use scss variables for general
 
 $SM-white: #fff;
 $SM-brightGrey: #ebf5ff;
+$SM-smoothGray: #f3f3f3;
 $SM-lightGrey: #cfd4d9;
 $SM-lightBlue: #1298d4;
 $SM-grey: #949ca6;
 $SM-darkBlue: #143154;
+$SM-shadowBlue: rgba(18,152,212,0.5);
 
 // General Colors
 $SM-backgroundColor: $SM-white;
@@ -60,6 +58,7 @@ $SM-borderColor: $SM-grey;
 $SM-textColor: $SM-darkBlue;
 
 // Value Colors
+$SM-headerSelectedColor: $SM-shadowBlue;
 $SM-valueColor: $SM-textColor;
 $SM-valuePlaceholderColor: $SM-mutedColor;
 
@@ -71,15 +70,18 @@ $SM-tagCloseColor: $SM-textColor;
 $SM-tagCloseBackgroundColor: $SM-lightGrey;
 
 // DropDown
-$SM-dropDownArrowColor: $SM-grey;
+$SM-dropDownArrowColor: $SM-mutedColor;
 $SM-dropDownActiveArrowColor: $SM-lightBlue;
 
 // Search Colors
+$SM-searchTextColor: $SM-textColor;
 $SM-searchPlaceholderColor: $SM-mutedColor;
+$SM-searchSelectedColor: $SM-shadowBlue;
 
 // Option Colors
 $SM-itemTextColor: $SM-textColor;
 $SM-itemBackgroundHoverColor: $SM-brightGrey;
+$SM-itemBackgroundFocusColor: $SM-smoothGray;
 $SM-dividerColor: $SM-lightGrey;
 $SM-selectAllColor: $SM-itemTextColor;
 
@@ -212,47 +214,47 @@ filterOptions(options, text) {
 
 ---
 
-- **`ArrowRenderer: function`** DropDown Arrow:
+- **`Arrow: function`** DropDown Arrow:
 
 ```code
-ArrowRenderer({options, value, expanded, hasFocus}) {
+Arrow({options, value, expanded, hasFocus, disabled}) {
   // options: array - see 'options' prop 
   // value: array - see 'value' property
   // expanded: boolean - expanded component status
   // hasFocus: boolean - hasFocus component status
+  // disabled: boolean - disabled component status
   
   return - component to render custom Arrow
 }
 ```
 
 
-- **`LoadingRenderer: function`** Loading Indicator:
+- **`Loading: function`** Loading Indicator:
 
 ```code
-LoadingRenderer() {
+Loading() {
   return - component to render custom Loading Indicator
 }
 ```
 
 
-- **`OptionRenderer: function`** Option:
+- **`Option: function`** Option:
 
 ```code
-OptionRenderer({option, checked, disabled, onClick}) {
+Option({checked, option, isSingle}) {
   // option: object - from options props: { value, label }  
   // checked: boolean - define if option is checked
-  // disabled: boolean - disable option if component is disabled
-  // onClick: function - notifies component about option click
+  // isSingle: boolean - single selection mode
   
   return - component to render custom Option
 }
 ```
 
 
-- **`TagRenderer: function`** Tag:
+- **`Tag: function`** Tag:
 
 ```code
-TagRenderer({label, index, removableTag, onTagRemove}) {
+Tag({label, index, removableTag, onTagRemove}) {
   // label: string - tag label
   // index: number - tag index in array used in removal 
   // removableTag: boolean - display/hide remove tag button
@@ -261,10 +263,10 @@ TagRenderer({label, index, removableTag, onTagRemove}) {
 ```
 
 
-- **`ValueRenderer: function`** Value:
+- **`Value: function`** Value:
 
 ```code
-ValueRenderer({value, options}) {
+Value({value, options}) {
   // options: array - see 'options' property
   // value: array - see 'value' property
   

catalog/index.js

@@ -4,7 +4,7 @@ import {Catalog, pageLoader, ReactSpecimen} from 'catalog';
 import {Controller} from './playground/controller';
 import logo from "./static/r-logo.svg";
 import {MultiSelect} from '../src';
-import {MultiselectWrapper} from './playground/multiselect-wrapper';
+import {MultiSelectWrapper} from './playground/multiselect-wrapper';
 import 'bulma/css/bulma.min.css';
 import 'bulma-switch/dist/css/bulma-switch.min.css';
 import './catalog.css';
@@ -89,7 +89,7 @@ const pages = [
     ]
   },
   {
-    imports: {MultiselectWrapper, Controller},
+    imports: {MultiSelectWrapper, Controller},
     title: 'PlayGround',
     path: 'playground/playground',
     content: markdownLoader('playground/playground'),

catalog/install.md

@@ -45,10 +45,12 @@ Can be used css overriding, see compiled css. Or use scss variables for general
 
 $SM-white: #fff;
 $SM-brightGrey: #ebf5ff;
+$SM-smoothGray: #f3f3f3;
 $SM-lightGrey: #cfd4d9;
 $SM-lightBlue: #1298d4;
 $SM-grey: #949ca6;
 $SM-darkBlue: #143154;
+$SM-shadowBlue: rgba(18,152,212,0.5);
 
 // General Colors
 $SM-backgroundColor: $SM-white;
@@ -58,6 +60,7 @@ $SM-borderColor: $SM-grey;
 $SM-textColor: $SM-darkBlue;
 
 // Value Colors
+$SM-headerSelectedColor: $SM-shadowBlue;
 $SM-valueColor: $SM-textColor;
 $SM-valuePlaceholderColor: $SM-mutedColor;
 
@@ -69,15 +72,18 @@ $SM-tagCloseColor: $SM-textColor;
 $SM-tagCloseBackgroundColor: $SM-lightGrey;
 
 // DropDown
-$SM-dropDownArrowColor: $SM-grey;
+$SM-dropDownArrowColor: $SM-mutedColor;
 $SM-dropDownActiveArrowColor: $SM-lightBlue;
 
 // Search Colors
+$SM-searchTextColor: $SM-textColor;
 $SM-searchPlaceholderColor: $SM-mutedColor;
+$SM-searchSelectedColor: $SM-shadowBlue;
 
 // Option Colors
 $SM-itemTextColor: $SM-textColor;
 $SM-itemBackgroundHoverColor: $SM-brightGrey;
+$SM-itemBackgroundFocusColor: $SM-smoothGray;
 $SM-dividerColor: $SM-lightGrey;
 $SM-selectAllColor: $SM-itemTextColor;
 

catalog/playground/multiselect-wrapper.js

@@ -2,7 +2,7 @@ import React, {Fragment} from 'react';
 import {Controller} from './controller';
 import {MultiSelect} from '../../src'
 
-export class MultiselectWrapper extends React.Component {
+export class MultiSelectWrapper extends React.Component {
 
   state = {
     mode: 'list',

catalog/playground/playground.md

@@ -3,5 +3,5 @@
 ```react
 noSource: true
 ---
-<MultiselectWrapper />
+<MultiSelectWrapper />
 ```

catalog/props.md

@@ -124,55 +124,55 @@ filterOptions(options, text) {
 
 ---
 
-- **`ArrowRenderer: function`** DropDown Arrow:
+- **`Arrow: function`** DropDown Arrow:
 
 ```code
 lang: js
 ---
-ArrowRenderer({options, value, expanded, hasFocus}) {
+Arrow({options, value, expanded, hasFocus, disabled}) {
   // options: array - see 'options' prop 
   // value: array - see 'value' property
   // expanded: boolean - expanded component status
   // hasFocus: boolean - hasFocus component status
+  // disabled: boolean - disabled component status
   
   return - component to render custom Arrow
 }
 ```
 
 
-- **`LoadingRenderer: function`** Loading Indicator:
+- **`Loading: function`** Loading Indicator:
 
 ```code
 lang: js
 ---
-LoadingRenderer() {
+Loading() {
   return - component to render custom Loading Indicator
 }
 ```
 
 
-- **`OptionRenderer: function`** Option:
+- **`Option: function`** Option:
 
 ```code
 lang: js
 ---
-OptionRenderer({option, checked, disabled, onClick}) {
+Option({checked, option, isSingle}) {
   // option: object - from options props: { value, label }  
   // checked: boolean - define if option is checked
-  // disabled: boolean - disable option if component is disabled
-  // onClick: function - notifies component about option click
+  // isSingle: boolean - single selection mode
   
   return - component to render custom Option
 }
 ```
 
 
-- **`TagRenderer: function`** Tag:
+- **`Tag: function`** Tag:
 
 ```code
 lang: js
 ---
-TagRenderer({label, index, removableTag, onTagRemove}) {
+Tag({label, index, removableTag, onTagRemove}) {
   // label: string - tag label
   // index: number - tag index in array used in removal 
   // removableTag: boolean - display/hide remove tag button
@@ -181,12 +181,12 @@ TagRenderer({label, index, removableTag, onTagRemove}) {
 ```
 
 
-- **`ValueRenderer: function`** Value:
+- **`Value: function`** Value:
 
 ```code
 lang: js
 ---
-ValueRenderer({value, options}) {
+Value({value, options}) {
   // options: array - see 'options' property
   // value: array - see 'value' property
   

catalog/spec/custom.md

@@ -11,14 +11,14 @@ state: {
  ],
 }
 ---
-const LoadingRenderer  = () => 'Loading ...';
+const Loading  = () => 'Loading ...';
 
 <MultiSelect
   isLoading
   options={state.options}
   value={state.value}
   onChange={value => setState({ value })}
-  LoadingRenderer={LoadingRenderer}
+  Loading={Loading}
 />
 ```
 
@@ -35,7 +35,7 @@ state: {
  ],
 }
 ---
-const ValueRenderer = ({value, options}) => {
+const Value = ({value, options}) => {
   if(!value.length) return 'Colors';
   return `Colors (${!!value.length && value.length === options.length ? 'All' : value.length})`;
 };
@@ -44,7 +44,7 @@ const ValueRenderer = ({value, options}) => {
   options={state.options}
   value={state.value}
   onChange={value => setState({ value })}
-  ValueRenderer={ValueRenderer}
+  Value={Value}
 />
 ```
 
@@ -62,15 +62,15 @@ state: {
  ],
 }
 ---
-const ArrowRenderer = ({expanded}) => {
+const Arrow = ({expanded}) => {
   return expanded ? String.fromCharCode(0x027F0) : String.fromCharCode(0x027F1);
 };
 
 <MultiSelect
   options={state.options}
   value={state.value}
   onChange={value => setState({ value })}
-  ArrowRenderer={ArrowRenderer}
+  Arrow={Arrow}
 />
 ```
 
@@ -87,25 +87,23 @@ state: {
  ],
 }
 ---
-const OptionRenderer = ({checked, option, disabled, onClick }) => (
-  <span className="SelectItem__renderer">
-    <input
+const Option = ({checked, option, isSingle}) => (
+  <div className="Option__renderer">
+    {!isSingle && <input
       type="checkbox"
-      onChange={onClick}
-      checked={checked}
+      defaultChecked={checked}
       tabIndex="-1"
-      disabled={disabled}
-    />
-    <span className="SelectItem__label">
+    />}
+    <span className="Option__label">
       {option.label}
     </span>
-  </span>
+  </div>
 );
 
 <MultiSelect
   options={state.options}
   value={state.value}
   onChange={value => setState({ value })}
-  OptionRenderer={OptionRenderer}
+  Option={Option}
 />
 ```