wix-style-react
Version:
wix-style-react
256 lines (255 loc) • 7.64 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _Input = _interopRequireDefault(require("../Input"));
var _Hash = require("./components/Hash");
var _ColorViewer = require("./components/ColorViewer");
var _hexHelpers = require("./hex-helpers");
var _Box = _interopRequireDefault(require("../Box"));
var _excluded = ["placeholder", "size"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ColorInput/ColorInput.js";
class ColorInput extends _react.default.Component {
constructor(props) {
super(props);
this._renderPrefix = () => {
var {
disabled,
size
} = this.props;
var {
active,
value
} = this.state;
var hash = /*#__PURE__*/_react.default.createElement(_Input.default.Affix, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_Hash.Hash, {
disabled: disabled,
size: size,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 9
}
}));
return active || value ? hash : undefined;
};
this._renderSuffix = () => {
var {
value,
active
} = this.state;
var {
size,
popoverPlacement,
popoverAppendTo,
disabled,
colorPickerChildren,
onAddColor,
addTooltipContent,
placeholder,
popoverProps
} = this.props;
return /*#__PURE__*/_react.default.createElement(_Box.default, {
verticalAlign: "middle",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_ColorViewer.ColorViewer, {
value: value,
active: active,
disabled: disabled,
size: size,
placement: popoverPlacement,
appendTo: popoverAppendTo,
onClick: this.click,
onChange: this._onPickerChange,
onCancel: this.cancel,
onConfirm: this.confirm,
onClickOutside: this.confirm,
children: colorPickerChildren,
onAddColor: onAddColor,
addTooltipContent: addTooltipContent,
placeholder: placeholder,
popoverProps: popoverProps,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 9
}
}));
};
this._onChange = evt => {
var {
onChange
} = this.props;
var value = (0, _hexHelpers.normalizeHexInput)(evt.target.value);
this.setState({
value
}, () => onChange(value));
};
this._onPickerChange = value => {
var {
onChange
} = this.props;
this.setState({
active: true,
value
}, () => onChange(value));
};
this._onFocus = () => this.setState({
active: true
});
this._keyDown = e => {
e.stopPropagation();
e.key === 'Enter' && this.confirm();
e.key === 'Escape' && this.cancel();
};
/**
* clicks the input element
* @returns {Void}
*/
this.click = () => {
this.input.focus();
this.setState({
active: true
});
};
/**
* sets the picked color
* @returns {Void}
*/
this.confirm = () => {
var {
onConfirm,
onChange
} = this.props;
var value = (0, _hexHelpers.validateHex)(this.state.value);
this.setState({
active: false,
value,
previous: value
}, () => {
onConfirm(value);
onChange(value);
});
};
/**
* sets the previous color
* @returns {Void}
*/
this.cancel = () => {
var {
onCancel,
onChange
} = this.props;
var {
previous
} = this.state;
this.setState({
active: false,
value: previous
}, () => {
onCancel(previous);
onChange(previous);
});
};
this.state = {
active: false,
previous: props.value,
value: ''
};
}
static getDerivedStateFromProps(props, state) {
if (!state.active && props.value !== state.value) {
return {
value: (0, _hexHelpers.normalizeHexInput)(props.value)
};
}
return {};
}
render() {
var _this$props = this.props,
{
placeholder,
size
} = _this$props,
rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
var {
active,
value
} = this.state;
return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, rest, {
ref: input => this.input = input,
placeholder: active ? '' : placeholder,
size: size,
onKeyDown: this._keyDown,
onChange: this._onChange,
onFocus: this._onFocus,
onInputClicked: this.click,
value: value.replace('#', ''),
prefix: this._renderPrefix(),
suffix: this._renderSuffix(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 176,
columnNumber: 7
}
}));
}
}
ColorInput.displayName = 'ColorInput';
ColorInput.propTypes = {
/** Defines placeholder text to display on an empty input */
placeholder: _propTypes.default.string,
/** Specifies whether the input should be disabled */
disabled: _propTypes.default.bool,
/** Specifies the status of a field */
status: _propTypes.default.oneOf(['error', 'warning', 'loading']),
/** Defines the message to display on status icon hover. If not given or empty, there will be no tooltip. */
statusMessage: _propTypes.default.node,
/** Controls input size */
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
/** Defines input value */
value: _propTypes.default.string.isRequired,
/** Returns confirmed value */
onConfirm: _propTypes.default.func,
/** Returns last confirmed value from `value` prop */
onCancel: _propTypes.default.func,
/** Returns changed value of input or color picker */
onChange: _propTypes.default.func,
/** Defines child items to render inside of a component. Accepts any kind of content. It receives the `changeColor` function to control <ColorInput/> value. */
colorPickerChildren: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
/** Defines a callback handler with color HEX string. Handler is called whenever the `Add Color` button is pressed. */
onAddColor: _propTypes.default.func,
/** Defines content to show in add button tooltip. Does not appear if `onAdd` is not passed. */
addTooltipContent: _propTypes.default.node,
/** Allows to pass popover props. See <Popover/> API for a full list. */
popoverProps: _propTypes.default.object
};
ColorInput.defaultProps = {
placeholder: '',
size: 'medium',
onChange: () => {},
onConfirm: () => {},
onCancel: () => {},
popoverProps: {},
value: ''
};
var _default = exports.default = ColorInput;
//# sourceMappingURL=ColorInput.js.map