├── .babelrc
├── .eslintrc
├── .gitignore
├── .storybook
    ├── addons.js
    └── config.js
├── .travis.yml
├── LICENSE
├── README.md
├── doc
    └── screenshot.png
├── package-lock.json
├── package.json
├── src
    ├── components
    │   ├── ColorPicker.js
    │   └── PickerDialog.js
    ├── index.d.ts
    ├── index.js
    └── transformers.js
└── stories
    └── index.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |     "presets": ["@babel/preset-env", "@babel/preset-react"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | 
 2 | {
 3 |   "parser": "babel-eslint",
 4 |   "extends": [
 5 |     "standard",
 6 |     "standard-react",
 7 |     "plugin:react/recommended"
 8 |   ]
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | lib
2 | public
3 | node_modules
4 | .npm
5 | yarn.lock
6 | 


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


--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
1 | import { configure } from '@storybook/react'
2 | 
3 | function loadStories () {
4 |   require('../stories/index.js')
5 | }
6 | 
7 | configure(loadStories, module)
8 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | node_js:
4 |   - "10"
5 |   - "9"
6 | script:
7 |   - npm test
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Loic Mahieu
 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 | # `<ColorPicker>` for material-ui
 2 | 
 3 | ![`<ColorPicker>` example](./doc/screenshot.png)
 4 | 
 5 | ColorPicker based on [`<TextField />`](http://www.material-ui.com/#/components/text-field) and `<ChromePicker />` from [`react-color`](https://github.com/casesandberg/react-color/) and its [redux-form](https://redux-form.com) field component.
 6 | 
 7 | ## Demo
 8 | 
 9 | [https://material-ui-color-picker.now.sh/](https://material-ui-color-picker.now.sh/)
10 | 
11 | ## Installation
12 | 
13 | For material-ui (v1):
14 | 
15 | ```sh
16 | npm install --save material-ui-color-picker
17 | ```
18 | 
19 | ## Usage
20 | 
21 | ```js
22 | import React from 'react'
23 | import ColorPicker from 'material-ui-color-picker'
24 | 
25 | <ColorPicker
26 |   name='color'
27 |   defaultValue='#000'
28 |   // value={this.state.color} - for controlled component
29 |   onChange={color => console.log(color)}
30 | 
31 | />
32 | ```
33 | [Redux-form](https://redux-form.com) field
34 | ```js
35 | import React, { Component } from 'react';
36 | import { reduxForm, Field } from 'redux-form';
37 | import { ColorPickerField } from 'material-ui-color-picker';
38 | 
39 | ...
40 | <Field
41 |   name="color"
42 |   component={ColorPickerField}
43 | />
44 | ...
45 | 
46 | ```
47 | 
48 | There is not so much properties at this time. The was very quickly designed for my needs. Feel free to submit a PR with new features ;)
49 | 
50 | ## License
51 | 
52 | This library is licensed under the [MIT Licence](LICENSE), and sponsored by [iGLOO](https://igloo.be).
53 | 


--------------------------------------------------------------------------------
/doc/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/LoicMahieu/material-ui-color-picker/1f9165defebbdf3dd6926e79a808b148667686ba/doc/screenshot.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "material-ui-color-picker",
 3 |   "version": "3.5.1",
 4 |   "description": "<ColorInput> component for material-ui",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "test": "npm run lint",
 8 |     "lint": "eslint 'src/**/*.js'",
 9 |     "build": "NODE_ENV=production babel ./src -d lib --copy-files",
10 |     "storybook": "start-storybook -p 9001 -c .storybook",
11 |     "prepare": "NODE_ENV=production babel ./src -d lib",
12 |     "now-build": "build-storybook -c .storybook -o public"
13 |   },
14 |   "files": [
15 |     "LICENSE",
16 |     "*.md",
17 |     "lib",
18 |     "src"
19 |   ],
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "git+https://github.com/loicmahieu/material-ui-color-picker.git"
23 |   },
24 |   "keywords": [
25 |     "reactjs",
26 |     "react",
27 |     "color",
28 |     "picker",
29 |     "selector"
30 |   ],
31 |   "author": "Loic Mahieu",
32 |   "license": "MIT",
33 |   "bugs": {
34 |     "url": "https://github.com/loicmahieu/material-ui-color-picker/issues"
35 |   },
36 |   "homepage": "https://github.com/loicmahieu/material-ui-color-picker#readme",
37 |   "devDependencies": {
38 |     "@babel/cli": "^7.8.3",
39 |     "@babel/core": "^7.8.3",
40 |     "@babel/preset-env": "^7.8.3",
41 |     "@babel/preset-react": "^7.8.3",
42 |     "@babel/types": "^7.8.3",
43 |     "@material-ui/core": "^3.8.1",
44 |     "@storybook/addon-actions": "^5.3.3",
45 |     "@storybook/react": "^5.3.3",
46 |     "babel-eslint": "^10.0.3",
47 |     "babel-loader": "^8.0.6",
48 |     "eslint": "^6.8.0",
49 |     "eslint-config-standard": "^14.1.0",
50 |     "eslint-config-standard-react": "^9.2.0",
51 |     "eslint-plugin-import": "^2.20.0",
52 |     "eslint-plugin-node": "^11.0.0",
53 |     "eslint-plugin-promise": "^4.2.1",
54 |     "eslint-plugin-react": "^7.17.0",
55 |     "eslint-plugin-standard": "^4.0.1",
56 |     "react": "^16.12.0",
57 |     "react-dom": "^16.12.0"
58 |   },
59 |   "dependencies": {
60 |     "@material-ui/styles": "^4.8.2",
61 |     "prop-types": "^15.7.2",
62 |     "react-color": "^2.18.0",
63 |     "recompose": "^0.30.0"
64 |   },
65 |   "peerDependencies": {
66 |     "@material-ui/core": "^4.8.3",
67 |     "react": "^16.12.0"
68 |   },
69 |   "types": "src/index.d.ts"
70 | }
71 | 


--------------------------------------------------------------------------------
/src/components/ColorPicker.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import PropTypes from 'prop-types'
  3 | import compose from 'recompose/compose'
  4 | import withState from 'recompose/withState'
  5 | 
  6 | import TextField from '@material-ui/core/TextField'
  7 | 
  8 | import { DEFAULT_CONVERTER, converters } from '../transformers'
  9 | import PickerDialog from './PickerDialog'
 10 | 
 11 | const ColorPicker = ({
 12 |   // ColorPicker
 13 |   onChange,
 14 |   convert,
 15 | 
 16 |   // Text field
 17 |   name,
 18 |   id,
 19 |   hintText,
 20 |   placeholder,
 21 |   floatingLabelText,
 22 |   label,
 23 |   TextFieldProps,
 24 |   value,
 25 | 
 26 |   // State
 27 |   showPicker,
 28 |   setShowPicker,
 29 |   internalValue,
 30 |   setValue,
 31 | 
 32 |   ...custom
 33 | }) => (
 34 |   <>
 35 |     <TextField
 36 |       name={name}
 37 |       id={id}
 38 |       label={floatingLabelText || label}
 39 |       placeholder={hintText || placeholder}
 40 |       onClick={() => setShowPicker(true)}
 41 |       onChange={e => {
 42 |         setValue(e.target.value)
 43 |         onChange(e.target.value)
 44 |       }}
 45 |       InputProps={{ style: { color: value === undefined ? internalValue : value } }}
 46 |       {...TextFieldProps}
 47 |       {...custom}
 48 |     />
 49 |     {showPicker && (
 50 |       <PickerDialog
 51 |         value={value === undefined ? internalValue : value}
 52 |         onClick={() => {
 53 |           setShowPicker(false)
 54 |           onChange(value)
 55 |         }}
 56 |         onChange={c => {
 57 |           const newValue = converters[convert](c)
 58 |           setValue(newValue)
 59 |           onChange(newValue)
 60 |         }}
 61 |       />
 62 |     )}
 63 |   </>
 64 | )
 65 | 
 66 | ColorPicker.propTypes = {
 67 |   value: PropTypes.string,
 68 |   onChange: PropTypes.func,
 69 |   convert: PropTypes.oneOf(Object.keys(converters)),
 70 |   name: PropTypes.string,
 71 |   id: PropTypes.string,
 72 |   hintText: PropTypes.string,
 73 |   placeholder: PropTypes.string,
 74 |   label: PropTypes.string,
 75 |   floatingLabelText: PropTypes.string,
 76 |   TextFieldProps: PropTypes.shape(TextField.propTypes),
 77 |   showPicker: PropTypes.bool,
 78 |   setShowPicker: PropTypes.func,
 79 |   internalValue: PropTypes.string,
 80 |   setValue: PropTypes.func
 81 | }
 82 | 
 83 | ColorPicker.defaultProps = {
 84 |   convert: DEFAULT_CONVERTER
 85 | }
 86 | 
 87 | const makeColorPicker = compose(
 88 |   withState('showPicker', 'setShowPicker', false),
 89 |   withState('internalValue', 'setValue', ({ defaultValue }) => defaultValue)
 90 | )
 91 | 
 92 | const MakedColorPicker = makeColorPicker(ColorPicker)
 93 | 
 94 | const ColorPickerField = ({ input: { value, onChange, ...restInput }, meta: { touched, error }, ...restProps }) => (
 95 |   <MakedColorPicker
 96 |     value={value}
 97 |     onChange={onChange}
 98 |     errorText={touched && error}
 99 |     {...restInput}
100 |     {...restProps}
101 |   />
102 | )
103 | 
104 | ColorPickerField.propTypes = {
105 |   input: PropTypes.object,
106 |   meta: PropTypes.object
107 | }
108 | 
109 | export default MakedColorPicker
110 | 
111 | export {
112 |   ColorPickerField
113 | }
114 | 


--------------------------------------------------------------------------------
/src/components/PickerDialog.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import { ChromePicker } from 'react-color'
 4 | 
 5 | const PickerDialog = ({
 6 |   value,
 7 |   onClick,
 8 |   onChange
 9 | }) => (
10 |   <div style={{ position: 'relative' }}>
11 |     <div style={{ position: 'absolute', zIndex: '2' }}>
12 |       <div
13 |         style={{ position: 'fixed', top: '0px', right: '0px', bottom: '0px', left: '0px' }}
14 |         onClick={onClick}
15 |       />
16 |       <ChromePicker
17 |         color={value}
18 |         onChange={onChange}
19 |       />
20 |     </div>
21 |   </div>
22 | )
23 | 
24 | PickerDialog.propTypes = {
25 |   value: PropTypes.string,
26 |   onChange: PropTypes.func,
27 |   onClick: PropTypes.func
28 | }
29 | 
30 | export default PickerDialog
31 | 


--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
 1 | import { TextFieldProps } from "@material-ui/core/TextField";
 2 | import { converters } from "./transformers";
 3 | import { FC } from "react";
 4 | 
 5 | type props = {
 6 |   defaultValue?: string;
 7 |   onChange: (color: string) => void;
 8 |   convert?: keyof converters;
 9 |   hintText?: string;
10 |   floatingLabelText?: string;
11 |   showPicker?: boolean;
12 |   internalValue?: string;
13 |   setShowPicker?: (open: boolean) => void;
14 |   setValue?: (value: string) => void;
15 | } & Omit<TextFieldProps, "onChange">;
16 | 
17 | declare const ColorPicker: FC<props>;
18 | 
19 | export default ColorPicker;
20 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import ColorPicker from './components/ColorPicker'
2 | export default ColorPicker
3 | 


--------------------------------------------------------------------------------
/src/transformers.js:
--------------------------------------------------------------------------------
 1 | export const DEFAULT_CONVERTER = 'rgba_hex'
 2 | export const converters = {
 3 |   rgba: c => `rgba(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b}, ${c.rgb.a})`,
 4 |   rgb: c => `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`,
 5 |   hex: c => c.hex,
 6 | 
 7 |   rgba_rgb: c => c.rgb.a === 1 ? converters.rgb(c) : converters.rgba(c),
 8 |   rgba_hex: c => c.rgb.a === 1 ? converters.hex(c) : converters.rgba(c)
 9 | }
10 | 
11 | export default converters
12 | 


--------------------------------------------------------------------------------
/stories/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { storiesOf } from '@storybook/react'
 3 | import { action } from '@storybook/addon-actions'
 4 | import { ThemeProvider } from '@material-ui/styles'
 5 | 
 6 | import ColorPicker from '../src'
 7 | 
 8 | class Controlled extends React.Component {
 9 |   state = { value: '#fff' }
10 | 
11 |   handleChange = (value) => {
12 |     this.setState({ value })
13 |     action('changed')(value)
14 |   }
15 | 
16 |   render () {
17 |     return (
18 |       <ThemeProvider theme={{}}>
19 |         <ColorPicker
20 |           value={this.state.value}
21 |           onChange={this.handleChange}
22 |           floatingLabelText='Color picker'
23 |           variant='outlined'
24 |         />
25 |         <button onClick={() => this.handleChange('#00ff00')}>set #00ff00</button>
26 |       </ThemeProvider>
27 |     )
28 |   }
29 | }
30 | 
31 | storiesOf('ColorPicker', module)
32 |   .add('simple', () => (
33 |     <ThemeProvider theme={{}}>
34 |       <ColorPicker
35 |         defaultValue='#000000'
36 |         onChange={action('changed')}
37 |         floatingLabelText='Color picker'
38 |       />
39 |     </ThemeProvider>
40 |   ))
41 |   .add('controlled', () => (
42 |     <Controlled />
43 |   ))
44 | 


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