Breaking: return value instead of index

.eslintrc.js

@@ -0,0 +1,86 @@
+module.exports = {
+  "env": {
+    "node": true,
+    "browser": true,
+    "mocha": true,
+    "es6": true
+  },
+  "extends": "eslint:recommended",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "arrowFunctions": true,
+    "binaryLiterals": true,
+    "blockBindings": true,
+    "classes": true,
+    "defaultParams": true,
+    "destructuring": true,
+    "forOf": true,
+    "generators": true,
+    "modules": true,
+    "objectLiteralComputedProperties": true,
+    "objectLiteralDuplicateProperties": true,
+    "objectLiteralShorthandMethods": true,
+    "objectLiteralShorthandProperties": true,
+    "octalLiterals": true,
+    "sourceType": "module",
+    "spread": true,
+    "templateStrings": true,
+    "globalReturn": true, // React JSX support
+    "jsx": true
+  },
+  "plugins": ["react"],
+  "rules": {
+    "camelcase": 2,
+    "comma-dangle": 2,
+    "comma-style": [2, "last"],
+    "consistent-this": [2, "self"],
+    "curly": [2, "all"],
+    "eol-last": 2,
+    "eqeqeq": 2,
+    "func-names": 2,
+    "indent": [2, 2],
+    "max-len": [2, 120, 2], // 2 spaces per tab, max 120 chars per line
+    "new-cap": 2,
+    "no-array-constructor": 2,
+    "no-inner-declarations": [2, "both"],
+    "no-mixed-spaces-and-tabs": 2,
+    "no-new-object": 2,
+    "no-shadow-restricted-names": 2,
+    "no-trailing-spaces": [2, { "skipBlankLines": false }],
+    "no-underscore-dangle": 0, // dangling underscores are fine
+    "quotes": [2, "single", "avoid-escape"],
+    "quote-props": [2, "consistent-as-needed"],
+    "radix": 2,
+
+    "semi": [2, "always"],
+    "space-before-blocks": [2, "always"],
+    "space-infix-ops": 2,
+    "strict": [2, "global"],
+    "vars-on-top": 2,
+
+    "react/display-name": 1,
+    "react/forbid-prop-types": 1,
+    "jsx-quotes": 1,
+    "react/jsx-boolean-value": 1,
+    "react/jsx-closing-bracket-location": 1,
+    "react/jsx-curly-spacing": 1,
+    "react/jsx-max-props-per-line": 1,
+    "react/jsx-no-duplicate-props": 1,
+    "react/jsx-no-undef": 1,
+    "react/jsx-sort-props": 1,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1,
+    "react/jsx-wrap-multilines": 1,
+    "react/no-danger": 1,
+    "react/no-did-mount-set-state": 1,
+    "react/no-did-update-set-state": 1,
+    "react/no-direct-mutation-state": 1,
+    "react/no-multi-comp": 1,
+    "react/no-set-state": 1,
+    "react/no-unknown-property": 1,
+    "react/react-in-jsx-scope": 1,
+    "react/self-closing-comp": 1,
+    "react/sort-comp": 1,
+    "react/sort-prop-types": 1
+  }
+}

README.md

@@ -5,22 +5,34 @@
 [![Dependencies](https://david-dm.org/seeliang/react-range-selector.svg)](https://david-dm.org/seeliang/react-range-selector)
 
 # React two points range selector
-the [html5 input range](https://www.w3.org/wiki/HTML/Elements/input/range) only supports one point, and it's not easy to use for mobile. this npm pack is an alternative solution with input checkbox  
-[Demo](http://seeliang.github.io/react-range-selector/)
+the [html5 input range](https://www.w3.org/wiki/HTML/Elements/input/range) only supports one point, and it's not easy to use for mobile. this npm pack is an alternative solution with input checkbox
+
+## Demo 
+[Demo page](http://seeliang.github.io/react-range-selector/)
+
+* [use as a package](https://github.com/seeliang/react-range-selector/blob/master/demo/import-set/form.js)
+* [use as a plugin](https://github.com/seeliang/react-range-selector/blob/master/app.html#L35)
 
 ## Features
  * based on [BEM](https://css-tricks.com/bem-101/)
  * has "is-start " class, "in-range" and "is-end" class for special styling set
  * support initial selected range
  * support customize range
  * standalong react [plugin](https://cdn.rawgit.com/seeliang/react-range-selector/master/build/js/react-range-selector.js) with options set for your quick prototype, [check the Demo](http://seeliang.github.io/react-range-selector/)
- 
+
 
 ## License
 
 MIT licensed
 
 ## Release
+
+### 2.0
+* BREAKING: `rangeUpdate` return object [data](https://github.com/seeliang/react-range-selector/pull/57/files#diff-3d89a121d9489b4df1b85aa9fb02ef15R50) with `values`, `section`, `selectedIndex`
+* BREAKING: [move to flat css structure](https://github.com/seeliang/react-range-selector/pull/57/commits/e2ab48a341449d24b20f47b0e039881cd8196b2b)
+* FEAT: `initialFormState` to [generate initial state from data](https://github.com/seeliang/react-range-selector/pull/57/files#diff-3d89a121d9489b4df1b85aa9fb02ef15R32)
+* FEAT: `generatePropsWithData` [mapping data to RangerSelector](https://github.com/seeliang/react-range-selector/pull/57/files#diff-3d89a121d9489b4df1b85aa9fb02ef15R44)
+* CHORE: recover lint
 ### 1.3.0
 * add package feature 
 

__tests__/checkbox/__snapshots__/input-checkbox__test.js.snap

@@ -2,18 +2,18 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="range-selector__item-input is-in-range"
+  className="range-selector__item"
 >
   <input
     checked={true}
-    className="range-selector__item-input-checkbox"
+    className="range-selector__item-checkbox"
     id="checkboxName"
     onChange={[Function]}
     type="checkbox"
     value="checkboxName"
   />
   <label
-    className="range-selector__item-input-text"
+    className="range-selector__item-label is-in-range"
     htmlFor="checkboxName"
   >
     3

__tests__/helpers/generatePropsWIthData__test.js

@@ -0,0 +1,18 @@
+import {generatePropsWithData} from '../../src/helpers';
+
+it('should covert data to props with correct data', () => {
+  const selectors =
+    {
+      name: 'Frequency',
+      customiseRange: [2.5,3.4,4.2,6.3],
+      initialSelected: [0,2],
+      callback: {}
+    };
+  expect(generatePropsWithData(selectors)).toMatchObject(
+    {componentName: 'range-selector',
+      customiseRange: [2.5, 3.4, 4.2, 6.3],
+      initialSelected: [0, 2],
+      key: 'Frequency',
+      name: 'Frequency',
+      rangeUpdate: {}});
+});

__tests__/helpers/initialFromState__test.js

@@ -0,0 +1,26 @@
+import {initialFormState} from '../../src/helpers';
+
+it('should covert selectors to state with correct data', () => {
+  const selectors = [
+    {
+      name: 'Cores',
+      range: [3,8]
+    },
+    {
+      name: 'Frequency',
+      customiseRange: [2.5,3.4,4.2,6.3],
+      initialSelected: [0,2]
+    },
+    {
+      name: 'PCIE slots',
+      range: [1,4],
+      initialSelected: [0,1]
+    },
+    {
+      name: 'Ram size',
+      customiseRange: [2,4,6,8],
+      initialSelected: [2,3]
+    }
+  ];
+  expect(initialFormState(selectors)).toMatchObject({indexRange: {'Frequency': [0, 2], 'PCIE slots': [0, 1], 'Ram size': [2, 3]}, values: {'Frequency': [2.5, 3.4, 4.2], 'PCIE slots': [1, 2], 'Ram size': [6, 8]}});
+});

__tests__/helpers/mappingSelectedIndexToResult__test.js

@@ -0,0 +1,17 @@
+import {mappingSelectedIndexToResult} from '../../src/helpers';
+
+it('should covert range of two points to list with correct values', () => {
+  expect(mappingSelectedIndexToResult({list:[3,4,5,6], selectedIndex: [1,3]})).toMatchObject([4,5,6]);
+});
+
+it('should covert range of one points to list with correct range', () => {
+  expect(mappingSelectedIndexToResult({list:[3,4,5,6], selectedIndex: [1]})).toMatchObject([4]);
+});
+
+it('should throw if list is not an array', () => {
+  expect(() => {mappingSelectedIndexToResult({list: {}, selectedIndex: [1]});}).toThrow();
+});
+
+it('should throw if list is empty array', () => {
+  expect(() => {mappingSelectedIndexToResult({list: [], selectedIndex: [1]});}).toThrow();
+});

__tests__/helpers/rangeToList__test.js

@@ -0,0 +1,5 @@
+import {rangeToList} from '../../src/helpers';
+
+it('should covert range to list with correct range', () => {
+  expect(rangeToList([3,6])).toMatchObject([3,4,5,6]);
+});