diff --git a/lib/components/Color.js b/lib/components/Color.js index 14691184..a65ab061 100644 --- a/lib/components/Color.js +++ b/lib/components/Color.js @@ -38,9 +38,9 @@ var _photoshopPhotoshop = require('./photoshop/Photoshop'); var _photoshopPhotoshop2 = _interopRequireDefault(_photoshopPhotoshop); -var _sketch2Sketch = require('./sketch-2/Sketch'); +var _sketchSketch = require('./sketch/Sketch'); -var _sketch2Sketch2 = _interopRequireDefault(_sketch2Sketch); +var _sketchSketch2 = _interopRequireDefault(_sketchSketch); var _chromeChrome = require('./chrome/Chrome'); @@ -205,7 +205,7 @@ var ColorPicker = (function (_ReactCSS$Component) { if (this.props.custom) { Picker = this.props.custom; } else if (this.props.type === 'sketch') { - Picker = _sketch2Sketch2['default']; + Picker = _sketchSketch2['default']; } else if (this.props.type === 'photoshop') { Picker = _photoshopPhotoshop2['default']; } else if (this.props.type === 'chrome') { diff --git a/lib/components/SketchPicker.js b/lib/components/SketchPicker.js index 6fd34fb5..f626801d 100644 --- a/lib/components/SketchPicker.js +++ b/lib/components/SketchPicker.js @@ -34,9 +34,9 @@ var _helpersColor = require('../helpers/color'); var _helpersColor2 = _interopRequireDefault(_helpersColor); -var _sketch2Sketch = require('./sketch-2/Sketch'); +var _sketchSketch = require('./sketch/Sketch'); -var _sketch2Sketch2 = _interopRequireDefault(_sketch2Sketch); +var _sketchSketch2 = _interopRequireDefault(_sketchSketch); var ColorPicker = (function (_ReactCSS$Component) { _inherits(ColorPicker, _ReactCSS$Component); @@ -183,7 +183,7 @@ var ColorPicker = (function (_ReactCSS$Component) { _react2['default'].createElement( 'div', { style: this.styles().picker }, - _react2['default'].createElement(_sketch2Sketch2['default'], _extends({}, this.props, this.state, { onChange: this.handleChange, onAccept: this.handleAccept, onCancel: this.handleCancel })) + _react2['default'].createElement(_sketchSketch2['default'], _extends({}, this.props, this.state, { onChange: this.handleChange, onAccept: this.handleAccept, onCancel: this.handleCancel })) ), _react2['default'].createElement('div', { style: this.styles().cover, onClick: this.handleHide }) ); diff --git a/lib/components/sketch/Sketch.js b/lib/components/sketch/Sketch.js index daa5077c..9e4bc9b2 100644 --- a/lib/components/sketch/Sketch.js +++ b/lib/components/sketch/Sketch.js @@ -1,27 +1,36 @@ -'use strict'; +'use strict';Object.defineProperty(exports, '__esModule', { + value: true +}); var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); -var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; +var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } -var React = require('react'); -var ReactCSS = require('reactcss'); +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _reactcss = require('reactcss'); + +var _reactcss2 = _interopRequireDefault(_reactcss); -var _require = require('../common'); +var _common = require('../common'); -var Saturation = _require.Saturation; -var Hue = _require.Hue; -var Alpha = _require.Alpha; -var Checkboard = _require.Checkboard; +var _SketchFields = require('./SketchFields'); -var SketchFields = require('./SketchFields'); -var SketchPresetColors = require('./SketchPresetColors'); +var _SketchFields2 = _interopRequireDefault(_SketchFields); + +var _SketchPresetColors = require('./SketchPresetColors'); + +var _SketchPresetColors2 = _interopRequireDefault(_SketchPresetColors); var Sketch = (function (_ReactCSS$Component) { _inherits(Sketch, _ReactCSS$Component); @@ -40,7 +49,7 @@ var Sketch = (function (_ReactCSS$Component) { return { 'default': { picker: { - width: '200px', + width: this.props.width, padding: '10px 10px 0', boxSizing: 'initial', background: '#fff', @@ -110,57 +119,60 @@ var Sketch = (function (_ReactCSS$Component) { }, { key: 'render', value: function render() { - return React.createElement( + return _react2['default'].createElement( 'div', { style: this.styles().picker }, - React.createElement( + _react2['default'].createElement( 'div', { style: this.styles().saturation }, - React.createElement(Saturation, _extends({}, this.styles().Saturation, this.props, { onChange: this.handleChange })) + _react2['default'].createElement(_common.Saturation, _extends({}, this.styles().Saturation, this.props, { onChange: this.handleChange })) ), - React.createElement( + _react2['default'].createElement( 'div', { style: this.styles().controls, className: 'flexbox-fix' }, - React.createElement( + _react2['default'].createElement( 'div', { style: this.styles().sliders }, - React.createElement( + _react2['default'].createElement( 'div', { style: this.styles().hue }, - React.createElement(Hue, _extends({}, this.styles().Hue, this.props, { onChange: this.handleChange })) + _react2['default'].createElement(_common.Hue, _extends({}, this.styles().Hue, this.props, { onChange: this.handleChange })) ), - React.createElement( + _react2['default'].createElement( 'div', { style: this.styles().alpha }, - React.createElement(Alpha, _extends({}, this.styles().Alpha, this.props, { onChange: this.handleChange })) + _react2['default'].createElement(_common.Alpha, _extends({}, this.styles().Alpha, this.props, { onChange: this.handleChange })) ) ), - React.createElement( + _react2['default'].createElement( 'div', { style: this.styles().color }, - React.createElement('div', { style: this.styles().activeColor }), - React.createElement(Checkboard, null) + _react2['default'].createElement('div', { style: this.styles().activeColor }), + _react2['default'].createElement(_common.Checkboard, null) ) ), - React.createElement( + _react2['default'].createElement( 'div', { style: this.styles().fields }, - React.createElement(SketchFields, _extends({}, this.props, { onChange: this.handleChange })) + _react2['default'].createElement(_SketchFields2['default'], _extends({}, this.props, { onChange: this.handleChange })) ), - React.createElement( + _react2['default'].createElement( 'div', { style: this.styles().presets }, - React.createElement(SketchPresetColors, { colors: this.props.presetColors, onClick: this.handleChange }) + _react2['default'].createElement(_SketchPresetColors2['default'], { colors: this.props.presetColors, onClick: this.handleChange }) ) ); } }]); return Sketch; -})(ReactCSS.Component); +})(_reactcss2['default'].Component); + +exports.Sketch = Sketch; Sketch.defaultProps = { - presetColors: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'] + presetColors: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'], + width: 200 }; -module.exports = Sketch; \ No newline at end of file +exports['default'] = Sketch; \ No newline at end of file diff --git a/lib/components/sketch/SketchFields.js b/lib/components/sketch/SketchFields.js index cbb18bbb..5ebdba9b 100644 --- a/lib/components/sketch/SketchFields.js +++ b/lib/components/sketch/SketchFields.js @@ -1,22 +1,32 @@ -'use strict'; +'use strict';Object.defineProperty(exports, '__esModule', { + value: true +}); var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); -var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; +var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } -var React = require('react'); -var ReactCSS = require('reactcss'); -var color = require('../../helpers/color'); +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _reactcss = require('reactcss'); + +var _reactcss2 = _interopRequireDefault(_reactcss); + +var _helpersColor = require('../../helpers/color'); -var _require = require('../common'); +var _helpersColor2 = _interopRequireDefault(_helpersColor); -var EditableInput = _require.EditableInput; +var _common = require('../common'); var ShetchFields = (function (_ReactCSS$Component) { _inherits(ShetchFields, _ReactCSS$Component); @@ -72,7 +82,7 @@ var ShetchFields = (function (_ReactCSS$Component) { key: 'handleChange', value: function handleChange(data) { if (data.hex) { - color.isValidHex(data.hex) && this.props.onChange(data.hex); + _helpersColor2['default'].isValidHex(data.hex) && this.props.onChange(data.hex); } else if (data.r || data.g || data.b) { this.props.onChange({ r: data.r || this.props.rgb.r, @@ -99,39 +109,40 @@ var ShetchFields = (function (_ReactCSS$Component) { }, { key: 'render', value: function render() { - return React.createElement( + return _react2['default'].createElement( 'div', { style: this.styles().fields, className: 'flexbox-fix' }, - React.createElement( + _react2['default'].createElement( 'div', { style: this.styles().double }, - React.createElement(EditableInput, _extends({}, this.styles().Input, { label: 'hex', value: this.props.hex.replace('#', ''), onChange: this.handleChange })) + _react2['default'].createElement(_common.EditableInput, _extends({}, this.styles().Input, { label: 'hex', value: this.props.hex.replace('#', ''), onChange: this.handleChange })) ), - React.createElement( + _react2['default'].createElement( 'div', { style: this.styles().single }, - React.createElement(EditableInput, _extends({}, this.styles().Input, { label: 'r', value: this.props.rgb.r, onChange: this.handleChange, dragLabel: 'true', dragMax: '255' })) + _react2['default'].createElement(_common.EditableInput, _extends({}, this.styles().Input, { label: 'r', value: this.props.rgb.r, onChange: this.handleChange, dragLabel: 'true', dragMax: '255' })) ), - React.createElement( + _react2['default'].createElement( 'div', { style: this.styles().single }, - React.createElement(EditableInput, _extends({}, this.styles().Input, { label: 'g', value: this.props.rgb.g, onChange: this.handleChange, dragLabel: 'true', dragMax: '255' })) + _react2['default'].createElement(_common.EditableInput, _extends({}, this.styles().Input, { label: 'g', value: this.props.rgb.g, onChange: this.handleChange, dragLabel: 'true', dragMax: '255' })) ), - React.createElement( + _react2['default'].createElement( 'div', { style: this.styles().single }, - React.createElement(EditableInput, _extends({}, this.styles().Input, { label: 'b', value: this.props.rgb.b, onChange: this.handleChange, dragLabel: 'true', dragMax: '255' })) + _react2['default'].createElement(_common.EditableInput, _extends({}, this.styles().Input, { label: 'b', value: this.props.rgb.b, onChange: this.handleChange, dragLabel: 'true', dragMax: '255' })) ), - React.createElement( + _react2['default'].createElement( 'div', { style: this.styles().single }, - React.createElement(EditableInput, _extends({}, this.styles().Input, { label: 'a', value: Math.round(this.props.rgb.a * 100), onChange: this.handleChange, dragLabel: 'true', dragMax: '100' })) + _react2['default'].createElement(_common.EditableInput, _extends({}, this.styles().Input, { label: 'a', value: Math.round(this.props.rgb.a * 100), onChange: this.handleChange, dragLabel: 'true', dragMax: '100' })) ) ); } }]); return ShetchFields; -})(ReactCSS.Component); +})(_reactcss2['default'].Component); -module.exports = ShetchFields; \ No newline at end of file +exports.ShetchFields = ShetchFields; +exports['default'] = ShetchFields; \ No newline at end of file diff --git a/lib/components/sketch/SketchPresetColors.js b/lib/components/sketch/SketchPresetColors.js index c24c63af..0446762f 100644 --- a/lib/components/sketch/SketchPresetColors.js +++ b/lib/components/sketch/SketchPresetColors.js @@ -1,15 +1,24 @@ -'use strict'; +'use strict';Object.defineProperty(exports, '__esModule', { + value: true +}); var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); -var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; +var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } -var React = require('react'); -var ReactCSS = require('reactcss'); +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _reactcss = require('reactcss'); + +var _reactcss2 = _interopRequireDefault(_reactcss); var SketchPresetColors = (function (_ReactCSS$Component) { _inherits(SketchPresetColors, _ReactCSS$Component); @@ -76,21 +85,21 @@ var SketchPresetColors = (function (_ReactCSS$Component) { if (this.props.colors) { for (var i = 0; i < this.props.colors.length; i++) { var color = this.props.colors[i]; - colors.push(React.createElement( + colors.push(_react2['default'].createElement( 'div', - { key: color, style: this.styles().li, onClick: this.handleClick.bind(null, color) }, - React.createElement( + { key: color, style: this.styles().li, ref: color, onClick: this.handleClick.bind(null, color) }, + _react2['default'].createElement( 'div', { style: { background: color } }, ' ', - React.createElement('div', { style: this.styles().square }), + _react2['default'].createElement('div', { style: this.styles().square }), ' ' ) )); } } - return React.createElement( + return _react2['default'].createElement( 'div', { style: this.styles().colors }, colors @@ -99,6 +108,7 @@ var SketchPresetColors = (function (_ReactCSS$Component) { }]); return SketchPresetColors; -})(ReactCSS.Component); +})(_reactcss2['default'].Component); -module.exports = SketchPresetColors; \ No newline at end of file +exports.SketchPresetColors = SketchPresetColors; +exports['default'] = SketchPresetColors; \ No newline at end of file diff --git a/src/components/Color.js b/src/components/Color.js index 49e0d024..3496ed43 100644 --- a/src/components/Color.js +++ b/src/components/Color.js @@ -7,7 +7,7 @@ import _ from 'lodash'; import color from '../helpers/color'; import Photoshop from './photoshop/Photoshop'; -import Sketch from './sketch-2/Sketch'; +import Sketch from './sketch/Sketch'; import Chrome from './chrome/Chrome'; import Swatches from './swatches/Swatches'; import Slider from './slider/Slider'; diff --git a/src/components/SketchPicker.js b/src/components/SketchPicker.js index 00f5003a..7ae1e8a9 100644 --- a/src/components/SketchPicker.js +++ b/src/components/SketchPicker.js @@ -6,7 +6,7 @@ import merge from 'merge'; import _ from 'lodash'; import color from '../helpers/color'; -import Sketch from './sketch-2/Sketch'; +import Sketch from './sketch/Sketch'; class ColorPicker extends ReactCSS.Component { diff --git a/src/components/sketch-2/Sketch.js b/src/components/sketch/Sketch.js similarity index 100% rename from src/components/sketch-2/Sketch.js rename to src/components/sketch/Sketch.js diff --git a/src/components/sketch-2/SketchFields.js b/src/components/sketch/SketchFields.js similarity index 100% rename from src/components/sketch-2/SketchFields.js rename to src/components/sketch/SketchFields.js diff --git a/src/components/sketch-2/SketchPresetColors.js b/src/components/sketch/SketchPresetColors.js similarity index 100% rename from src/components/sketch-2/SketchPresetColors.js rename to src/components/sketch/SketchPresetColors.js diff --git a/test/sketch/Sketch.test.js b/test/sketch/Sketch.test.js index 91383ea8..0f10f16f 100644 --- a/test/sketch/Sketch.test.js +++ b/test/sketch/Sketch.test.js @@ -2,7 +2,7 @@ import { React, TestUtils, expect, chai, spies, defaultProps } from '../config'; -import SketchComponent from '../../src/components/sketch-2/Sketch'; +import SketchComponent from '../../src/components/sketch/Sketch'; let props; diff --git a/test/sketch/SketchFields.test.js b/test/sketch/SketchFields.test.js index 7d256b43..893a1c52 100644 --- a/test/sketch/SketchFields.test.js +++ b/test/sketch/SketchFields.test.js @@ -2,7 +2,7 @@ import { React, TestUtils, expect, chai, spies, defaultProps } from '../config'; -import SketchFieldsComponent from '../../src/components/sketch-2/SketchFields'; +import SketchFieldsComponent from '../../src/components/sketch/SketchFields'; let props; diff --git a/test/sketch/SketchPresets.test.js b/test/sketch/SketchPresets.test.js index 3f7a0e7f..5d2a1e99 100644 --- a/test/sketch/SketchPresets.test.js +++ b/test/sketch/SketchPresets.test.js @@ -2,7 +2,7 @@ import { React, TestUtils, expect, chai, spies, defaultProps } from '../config'; -import SketchPresetColorsComponent from '../../src/components/sketch-2/SketchPresetColors'; +import SketchPresetColorsComponent from '../../src/components/sketch/SketchPresetColors'; let props;