@uiw/react-color-editable-input
Version:
Color Editable Input
123 lines (122 loc) • 4.59 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["prefixCls", "placement", "label", "value", "className", "style", "labelStyle", "inputStyle", "onChange", "onBlur", "renderInput"];
var validHex = function validHex(hex) {
return /^#?([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
};
var getNumberValue = function getNumberValue(value) {
return Number(String(value).replace(/%/g, ''));
};
var EditableInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
var _props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'w-color-editable-input' : _props$prefixCls,
_props$placement = props.placement,
placement = _props$placement === void 0 ? 'bottom' : _props$placement,
label = props.label,
initValue = props.value,
className = props.className,
style = props.style,
labelStyle = props.labelStyle,
inputStyle = props.inputStyle,
onChange = props.onChange,
onBlur = props.onBlur,
renderInput = props.renderInput,
other = (0, _objectWithoutProperties2["default"])(props, _excluded);
var _useState = (0, _react.useState)(initValue),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
value = _useState2[0],
setValue = _useState2[1];
var isFocus = (0, _react.useRef)(false);
(0, _react.useEffect)(function () {
if (props.value !== value) {
if (!isFocus.current) {
setValue(props.value);
}
}
}, [props.value]);
function handleChange(evn, valInit) {
var value = (valInit || evn.target.value).trim().replace(/^#/, '');
if (validHex(value)) {
onChange && onChange(evn, value);
}
var val = getNumberValue(value);
if (!isNaN(val)) {
onChange && onChange(evn, val);
}
setValue(value);
}
function handleBlur(evn) {
isFocus.current = false;
setValue(props.value);
onBlur && onBlur(evn);
}
var placementStyle = {};
if (placement === 'bottom') {
placementStyle['flexDirection'] = 'column';
}
if (placement === 'top') {
placementStyle['flexDirection'] = 'column-reverse';
}
if (placement === 'left') {
placementStyle['flexDirection'] = 'row-reverse';
}
var wrapperStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
'--editable-input-label-color': 'rgb(153, 153, 153)',
'--editable-input-box-shadow': 'rgb(204 204 204) 0px 0px 0px 1px inset',
'--editable-input-color': '#666',
position: 'relative',
alignItems: 'center',
display: 'flex',
fontSize: 11
}, placementStyle), style);
var editableStyle = (0, _objectSpread2["default"])({
width: '100%',
paddingTop: 2,
paddingBottom: 2,
paddingLeft: 3,
paddingRight: 3,
fontSize: 11,
background: 'transparent',
boxSizing: 'border-box',
border: 'none',
color: 'var(--editable-input-color)',
boxShadow: 'var(--editable-input-box-shadow)'
}, inputStyle);
var inputProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
value: value,
onChange: handleChange,
onBlur: handleBlur,
autoComplete: 'off',
onFocus: function onFocus() {
return isFocus.current = true;
}
}, other), {}, {
style: editableStyle
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: [prefixCls, className || ''].filter(Boolean).join(' '),
style: wrapperStyle,
children: [renderInput ? renderInput(inputProps, ref) : /*#__PURE__*/(0, _jsxRuntime.jsx)("input", (0, _objectSpread2["default"])({
ref: ref
}, inputProps)), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
style: (0, _objectSpread2["default"])({
color: 'var(--editable-input-label-color)',
textTransform: 'capitalize'
}, labelStyle),
children: label
})]
});
});
EditableInput.displayName = 'EditableInput';
var _default = exports["default"] = EditableInput;
module.exports = exports.default;