├── .editorconfig
├── .gitignore
├── .npmignore
├── .npmrc
├── .storybook
    ├── addons.js
    └── config.js
├── LICENSE
├── README.md
├── docs
    ├── favicon.ico
    ├── iframe.html
    ├── index.html
    └── static
    │   ├── manager.35104b144a2585984051.bundle.js
    │   └── preview.8d9b32df9f0e3651dea3.bundle.js
├── package.json
├── react-selected.png
├── rollup.config.js
└── src
    ├── __stories__
        └── index.stories.js
    └── index.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | end_of_line = lf
 6 | charset = utf-8
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | 
10 | [*.yml]
11 | indent_style = space
12 | indent_size = 2
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | yarn.lock
3 | yarn-error.log
4 | lib/
5 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src/
2 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock=false
2 | 


--------------------------------------------------------------------------------
/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-actions/register';
2 | import '@storybook/addon-links/register';
3 | 


--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
 1 | import { configure } from '@storybook/react';
 2 | 
 3 | // automatically import all files ending in *.stories.js
 4 | const req = require.context('../src/__stories__', true, /.stories.js$/);
 5 | function loadStories() {
 6 |   req.keys().forEach((filename) => req(filename));
 7 | }
 8 | 
 9 | configure(loadStories, module);
10 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Jake Moxey
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Selected
  2 | 
  3 | > React component to build flexible and accessible radio buttons/elements. 
  4 | 
  5 | Listen to [Belinda Carlisle - Summer Rain](https://www.youtube.com/watch?v=wssIZOBV9i4) while reading these docs - it will increase comprehensibility by 120%. [This](https://youtu.be/R_TcZ-ATihY?t=5m10s) will increase it by 420%.
  6 | 
  7 | <p align="center"><img src="./react-selected.png" width="400px"></img></p>
  8 | 
  9 | ## Why should I use this?
 10 | 
 11 | React Selected has control over select logic and state meaning that you don't have to do much! It also has the ability to add WAI-ARIA compliant and other accessibility attributes to the selectable elements.
 12 | 
 13 | ## Install
 14 | 
 15 | `npm install react-selected`
 16 | 
 17 | ## Example
 18 | 
 19 | ```jsx
 20 | import Selected from 'react-selected';
 21 | 
 22 | <Selected defaultSelectedKey="cat">
 23 |   {({ getSelectableProps, selectedKey }) => (
 24 |     <Buttons>
 25 |       <Button color={selectedKey === 'dog' ? 'info' : null} {...getSelectableProps('dog')}>
 26 |         Dog
 27 |       </Button>
 28 |       <Button color={selectedKey === 'cat' ? 'info' : null} {...getSelectableProps('cat')}>
 29 |         Cat
 30 |       </Button>
 31 |       <Button color={selectedKey === 'mouse' ? 'info' : null} {...getSelectableProps('mouse')}>
 32 |         Mouse
 33 |       </Button>
 34 |     </Buttons>
 35 |   )}
 36 | </Selected>
 37 | ```
 38 | 
 39 | ### More examples
 40 | 
 41 | - [Storybook](https://jxom.github.io/react-selected/)
 42 | - [Storybook Stories](https://github.com/jxom/react-selected/blob/master/src/__stories__/index.stories.js)
 43 | 
 44 | ## Props
 45 | 
 46 | ### defaultSelectedKey
 47 | 
 48 | Type: `string`
 49 | 
 50 | The key of the component that should be selected by default.
 51 | 
 52 | ### onSelect
 53 | 
 54 | Type: `function({ key, value })`
 55 | 
 56 | Function to invoke when a component is selected.
 57 | 
 58 | ### selectedKey
 59 | 
 60 | Type: `string`
 61 | 
 62 | React Selected manages select logic and state internally, but if you wish to have your own, you can control the value of `selectedKey`.
 63 | 
 64 | ### Render props
 65 | 
 66 | #### getSelectableProps
 67 | 
 68 | Type: `function(key, value, props)` **(`key` is required)**
 69 | 
 70 | Returns the props to apply to the button element you render. 
 71 | Includes `aria-` attributes.
 72 | 
 73 | #### getElementSelectableProps
 74 | 
 75 | Type: `function(key, value, props)` **(`key` is required)**
 76 | 
 77 | Returns the props to apply to the element you render. Use this for any element other than a <code>&lt;button&gt;</code>. 
 78 | Includes <code>aria-</code> attributes.
 79 | 
 80 | #### select
 81 | 
 82 | Type: `function(key, value)`
 83 | 
 84 | Sets `selectedKey` to `key` and sets `selectedValue` to `value`.
 85 | 
 86 | #### selectedKey
 87 | 
 88 | Type: `string`
 89 | 
 90 | The key of the current selected component.
 91 | 
 92 | #### selectedValue
 93 | 
 94 | Type: `string`
 95 | 
 96 | The value of the current selected component.
 97 | 
 98 | ## Inspiration
 99 | 
100 | - [Downshift](https://github.com/paypal/downshift)
101 | - [React Toggled](https://github.com/kentcdodds/react-toggled)
102 | 
103 | ## License
104 | 
105 | MIT © [jxom](http://jxom.io)
106 | 


--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxom/react-selected/9cb92a94b6588afe7671fff9b29d2b2b2e5e3172/docs/favicon.ico


--------------------------------------------------------------------------------
/docs/iframe.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <meta content="IE=edge" http-equiv="X-UA-Compatible" />
 8 |     <base target="_parent">
 9 |     <script>
10 |         if (window.parent !== window) {
11 |             try {
12 |                 window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
13 |             } catch (error) {
14 |                 // The above line can throw if we do not have access to the parent frame -- i.e. cross origin
15 |             }
16 |         }
17 |     </script>
18 |     <title>Storybook</title>
19 |     
20 | </head>
21 | 
22 | <body>
23 |     <div id="root"></div>
24 |     <div id="error-display"></div>
25 | <script type="text/javascript" src="static/preview.8d9b32df9f0e3651dea3.bundle.js"></script></body>
26 | 
27 | </html>


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <meta name="storybook-version" content="3.4.6">
 7 |     <meta content="IE=edge" http-equiv="X-UA-Compatible" />
 8 |     <title>Storybook</title>
 9 |     <style>
10 |         /*
11 |           When resizing panels, the drag event breaks if the cursor
12 |           moves over the iframe. Add the 'dragging' class to the body
13 |           at drag start and remove it when the drag ends.
14 |          */
15 |         .dragging iframe {
16 |             pointer-events: none;
17 |         }
18 | 
19 |         /* Styling the fuzzy search box placeholders */
20 |         .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
21 |             color: #ddd;
22 |             font-size: 16px;
23 |         }
24 | 
25 |         .searchBox::-moz-placeholder { /* Firefox 19+ */
26 |             color: #ddd;
27 |             font-size: 16px;
28 |         }
29 | 
30 |         .searchBox:focus{
31 |             border-color: #EEE !important;
32 |         }
33 | 
34 |         .btn:hover{
35 |             background-color: #eee
36 |         }
37 |     </style>
38 |     
39 | 
40 | </head>
41 | <body style="margin: 0;">
42 |     <div id="root"></div>
43 | <script type="text/javascript" src="static/manager.35104b144a2585984051.bundle.js"></script></body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-selected",
 3 |   "version": "1.0.0",
 4 |   "description": "A react component to handle select state",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "build": "npm run clean && rollup -c rollup.config.js",
 8 |     "clean": "rimraf lib/",
 9 |     "develop": "rollup -c rollup.config.js -w",
10 |     "lint": "eslint src/",
11 |     "lint:fix": "eslint src/ --fix",
12 |     "test": "npm run lint",
13 |     "prepublish": "npm run lint && npm run build",
14 |     "storybook": "start-storybook -p 6006",
15 |     "build-storybook": "build-storybook -o docs/"
16 |   },
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+https://github.com/jxom/react-selected.git"
20 |   },
21 |   "keywords": [
22 |     "react"
23 |   ],
24 |   "author": "Jake Moxey",
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/jxom/react-selected/issues"
28 |   },
29 |   "homepage": "https://github.com/jxom/react-selected#readme",
30 |   "peerDependencies": {
31 |     "react": "^16.0.0"
32 |   },
33 |   "devDependencies": {
34 |     "@medipass/eslint-config-react-medipass": "8.3.0",
35 |     "@storybook/addon-actions": "^3.4.6",
36 |     "@storybook/addon-links": "^3.4.6",
37 |     "@storybook/addons": "^3.4.6",
38 |     "@storybook/react": "^3.4.6",
39 |     "babel-cli": "6.26.0",
40 |     "babel-core": "6.26.0",
41 |     "babel-eslint": "8.2.1",
42 |     "babel-plugin-external-helpers": "6.22.0",
43 |     "babel-plugin-transform-class-properties": "6.24.1",
44 |     "babel-plugin-transform-object-rest-spread": "6.26.0",
45 |     "babel-preset-env": "1.6.1",
46 |     "babel-preset-react": "6.24.1",
47 |     "bulma": "0.7.1",
48 |     "eslint": "4.16.0",
49 |     "eslint-config-react-app": "2.1.0",
50 |     "eslint-plugin-flowtype": "2.41.0",
51 |     "eslint-plugin-import": "2.12.0",
52 |     "eslint-plugin-jsx-a11y": "6.0.3",
53 |     "eslint-plugin-prettier": "2.5.0",
54 |     "eslint-plugin-react": "7.5.1",
55 |     "flow-bin": "0.72.0",
56 |     "prettier": "1.12.1",
57 |     "prop-types": "15.6.1",
58 |     "react": "16.4.0",
59 |     "react-dom": "16.4.0",
60 |     "rebul": "1.0.0-canary.15",
61 |     "rimraf": "2.6.2",
62 |     "rollup": "^0.54.1",
63 |     "rollup-plugin-babel": "^3.0.3",
64 |     "rollup-plugin-uglify": "3.0.0",
65 |     "uglify-es": "3.3.9"
66 |   },
67 |   "eslintConfig": {
68 |     "extends": [
69 |       "@medipass/react-medipass"
70 |     ]
71 |   },
72 |   "dependencies": {}
73 | }
74 | 


--------------------------------------------------------------------------------
/react-selected.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jxom/react-selected/9cb92a94b6588afe7671fff9b29d2b2b2e5e3172/react-selected.png


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import babel from 'rollup-plugin-babel';
 2 | import uglify from 'rollup-plugin-uglify';
 3 | import { minify } from 'uglify-es';
 4 | 
 5 | export default {
 6 |   input: `${__dirname}/src/index.js`,
 7 |   output: {
 8 |     name: 'Selected',
 9 |     file: `${__dirname}/lib/index.js`,
10 |     format: 'umd',
11 |     globals: {
12 |       react: 'React',
13 |       'prop-types': 'PropTypes'
14 |     }
15 |   },
16 |   external: ['react', 'prop-types'],
17 |   plugins: [
18 |     babel({
19 |       presets: [['env', { modules: false }], 'react'],
20 |       plugins: ['external-helpers', 'transform-class-properties', 'transform-object-rest-spread']
21 |     }),
22 |     uglify({}, minify)
23 |   ]
24 | };
25 | 


--------------------------------------------------------------------------------
/src/__stories__/index.stories.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { storiesOf } from '@storybook/react';
  3 | import Buttons from 'rebul/Button/Buttons';
  4 | import Button from 'rebul/Button';
  5 | import 'bulma/css/bulma.css';
  6 | 
  7 | import Selected from '../index';
  8 | 
  9 | storiesOf('Selected', module)
 10 |   .add('basic (with buttons)', () => (
 11 |     <Selected defaultSelectedKey="cat">
 12 |       {({ getSelectableProps, selectedKey }) => (
 13 |         <Buttons>
 14 |           <Button color={selectedKey === 'dog' ? 'info' : null} {...getSelectableProps('dog')}>
 15 |             Dog
 16 |           </Button>
 17 |           <Button color={selectedKey === 'cat' ? 'info' : null} {...getSelectableProps('cat')}>
 18 |             Cat
 19 |           </Button>
 20 |           <Button color={selectedKey === 'mouse' ? 'info' : null} {...getSelectableProps('mouse')}>
 21 |             Mouse
 22 |           </Button>
 23 |         </Buttons>
 24 |       )}
 25 |     </Selected>
 26 |   ))
 27 |   .add('basic (without buttons)', () => (
 28 |     <Selected defaultSelectedKey="cat">
 29 |       {({ getElementSelectableProps, selectedKey }) => (
 30 |         <Buttons>
 31 |           <a className={`button ${selectedKey === 'dog' ? 'is-info' : ''}`} {...getElementSelectableProps('dog')}>
 32 |             Dog
 33 |           </a>
 34 |           <a className={`button ${selectedKey === 'cat' ? 'is-info' : ''}`} {...getElementSelectableProps('cat')}>
 35 |             Cat
 36 |           </a>
 37 |           <a className={`button ${selectedKey === 'mouse' ? 'is-info' : ''}`} {...getElementSelectableProps('mouse')}>
 38 |             Mouse
 39 |           </a>
 40 |         </Buttons>
 41 |       )}
 42 |     </Selected>
 43 |   ))
 44 |   .add('with onSelect handler', () => (
 45 |     <Selected defaultSelectedKey="cat" onSelect={({ key }) => alert(key)}>
 46 |       {({ getSelectableProps, selectedKey }) => (
 47 |         <Buttons>
 48 |           <Button color={selectedKey === 'dog' ? 'info' : null} {...getSelectableProps('dog')}>
 49 |             Dog
 50 |           </Button>
 51 |           <Button color={selectedKey === 'cat' ? 'info' : null} {...getSelectableProps('cat')}>
 52 |             Cat
 53 |           </Button>
 54 |           <Button color={selectedKey === 'mouse' ? 'info' : null} {...getSelectableProps('mouse')}>
 55 |             Mouse
 56 |           </Button>
 57 |         </Buttons>
 58 |       )}
 59 |     </Selected>
 60 |   ))
 61 |   .add('with values', () => (
 62 |     <Selected
 63 |       defaultSelectedKey="cat"
 64 |       onSelect={({ key, value }) => alert(`key: ${key}, value: ${JSON.stringify(value)}`)}
 65 |     >
 66 |       {({ getSelectableProps, selectedKey }) => (
 67 |         <Buttons>
 68 |           <Button color={selectedKey === 'dog' ? 'info' : null} {...getSelectableProps('dog', { name: 'Brian' })}>
 69 |             Dog
 70 |           </Button>
 71 |           <Button color={selectedKey === 'cat' ? 'info' : null} {...getSelectableProps('cat', { name: 'Max' })}>
 72 |             Cat
 73 |           </Button>
 74 |           <Button color={selectedKey === 'mouse' ? 'info' : null} {...getSelectableProps('mouse', { name: 'Jake' })}>
 75 |             Mouse
 76 |           </Button>
 77 |         </Buttons>
 78 |       )}
 79 |     </Selected>
 80 |   ))
 81 |   .add('override default selectable props', () => (
 82 |     <Selected
 83 |       defaultSelectedKey="cat"
 84 |       onSelect={({ key, value }) => alert(`key: ${key}, value: ${JSON.stringify(value)}`)}
 85 |     >
 86 |       {({ getSelectableProps, selectedKey }) => (
 87 |         <Buttons>
 88 |           <Button
 89 |             color={selectedKey === 'dog' ? 'info' : null}
 90 |             {...getSelectableProps('dog', { name: 'Brian' }, { onClick: () => console.log('dog!') })}
 91 |           >
 92 |             Dog
 93 |           </Button>
 94 |           <Button
 95 |             color={selectedKey === 'cat' ? 'info' : null}
 96 |             {...getSelectableProps('cat', { name: 'Max' }, { onClick: () => console.log('dog!') })}
 97 |           >
 98 |             Cat
 99 |           </Button>
100 |           <Button
101 |             color={selectedKey === 'mouse' ? 'info' : null}
102 |             {...getSelectableProps('mouse', { name: 'Jake' }, { onClick: () => console.log('dog!') })}
103 |           >
104 |             Mouse
105 |           </Button>
106 |         </Buttons>
107 |       )}
108 |     </Selected>
109 |   ));
110 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | const ELEMENT_SELECT_TRIGGER_KEYS = ['Enter', ' ']; // Mimics <button> behaviour.
 5 | 
 6 | export default class Selected extends React.Component {
 7 |   static propTypes = {
 8 |     children: PropTypes.func.isRequired,
 9 |     defaultSelectedKey: PropTypes.string,
10 |     onSelect: PropTypes.func,
11 |     selectedKey: PropTypes.string
12 |   };
13 | 
14 |   static defaultProps = { defaultSelectedKey: null, onSelect: null, selectedKey: null };
15 | 
16 |   state = { selectedKey: this.props.selectedKey || this.props.defaultSelectedKey };
17 | 
18 |   componentDidUpdate = prevProps => {
19 |     const { selectedKey } = this.props;
20 |     if (prevProps.selectedKey !== selectedKey) {
21 |       this.setState({ selectedKey });
22 |     }
23 |   };
24 | 
25 |   getElementSelectableProps = (key, value, props = {}) =>
26 |     this.getSelectableProps(key, value, {
27 |       ...props,
28 |       'aria-pressed': this.state.selectedKey === key,
29 |       onKeyUp: e => {
30 |         props.onKeyUp && props.onKeyUp(e);
31 |         ELEMENT_SELECT_TRIGGER_KEYS.includes(e.key) && this.select(key, value);
32 |       },
33 |       role: 'button',
34 |       tabIndex: '0'
35 |     });
36 | 
37 |   getSelectableProps = (key, value, props = {}) => ({
38 |     ...props,
39 |     'aria-current': this.state.selectedKey === key,
40 |     onClick: e => {
41 |       props.onClick && props.onClick(e);
42 |       this.select(key, value);
43 |     }
44 |   });
45 | 
46 |   select = (key, value) => {
47 |     const { onSelect } = this.props;
48 |     this.setState({ selectedKey: key, selectedValue: value });
49 |     onSelect && onSelect({ key, value });
50 |   };
51 | 
52 |   render = () => {
53 |     const { children } = this.props;
54 |     const { selectedKey, selectedValue } = this.state;
55 |     return children({
56 |       getElementSelectableProps: this.getElementSelectableProps,
57 |       getSelectableProps: this.getSelectableProps,
58 |       select: this.select,
59 |       selectedKey,
60 |       selectedValue
61 |     });
62 |   };
63 | }
64 | 


--------------------------------------------------------------------------------