@bigfishtv/cockpit/es5/components/input/ColorInput.js

'use strict';

exports.__esModule = true;
exports.default = undefined;

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 _class, _temp;

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactColor = require('react-color');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

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; }

/**
 * Displays a color block that can be clicked to modify color using 'react-color' color picker
 */
var Color = (_temp = _class = function (_Component) {
	_inherits(Color, _Component);

	function Color(props) {
		_classCallCheck(this, Color);

		var _this = _possibleConstructorReturn(this, _Component.call(this, props));

		_this.toggleDisplay = function () {
			_this.setState({ displayColorPicker: !_this.state.displayColorPicker });
		};

		_this.state = { displayColorPicker: false };
		return _this;
	}

	Color.prototype.render = function render() {
		var _this2 = this;

		var displayColorPicker = this.state.displayColorPicker;
		var _props = this.props,
		    size = _props.size,
		    value = _props.value,
		    style = _props.style,
		    disableAlpha = _props.disableAlpha,
		    transformValue = _props.transformValue,
		    componentProps = _props.componentProps;


		return _react2.default.createElement(
			'div',
			{
				className: (0, _classnames2.default)('color', size),
				style: _extends({}, style, { backgroundColor: value }),
				onClick: function onClick() {
					return !displayColorPicker && _this2.toggleDisplay();
				} },
			this.state.displayColorPicker && _react2.default.createElement(
				'div',
				{ className: 'color-picker-wrapper' },
				_react2.default.createElement('div', { className: 'color-picker-cover', onClick: this.toggleDisplay }),
				_react2.default.createElement(_reactColor.SketchPicker, _extends({}, componentProps, {
					disableAlpha: disableAlpha,
					color: value || 'rgba(255,255,255,0)',
					onChangeComplete: function onChangeComplete(value) {
						return _this2.props.onChange(transformValue(value));
					}
				}))
			)
		);
	};

	return Color;
}(_react.Component), _class.propTypes = {
	value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
	/** xsmall, small, medium, large, xlarge, appends to className. Default is medium */
	size: _propTypes2.default.string,
	/** Style to apply to wrapper div */
	style: _propTypes2.default.object,
	/** Show / hide alpha slider. Should typically be disabled when used as a Field input */
	disableAlpha: _propTypes2.default.bool,
	/** Reference to a different react-color component, is SketchPicker by default. */
	Component: _propTypes2.default.any,
	/** Transformation function that provides value to onChange. Returns HEX by default, options include: hex, hsl {h,s,l,a}, hsv {h,s,v,a}, rgb {r,g,b,a} */
	transformValue: _propTypes2.default.func,
	/** Returns value supplied by transformValue prop */
	onChange: _propTypes2.default.func,
	/** props to be spread over Component, e.g. presetColors[] */
	componentProps: _propTypes2.default.object
}, _class.defaultProps = {
	size: null,
	value: '#FFFFFF',
	style: {},
	disableAlpha: true,
	Component: _reactColor.SketchPicker,
	onChange: function onChange() {
		return console.warn('no onChange prop provided for Color');
	},
	transformValue: function transformValue(value) {
		return value.hex;
	},
	componentProps: {}
}, _temp);
exports.default = Color;