@wordpress/components
Version:
UI components for WordPress.
71 lines (67 loc) • 1.99 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.HexInput = void 0;
var _colord = require("colord");
var _i18n = require("@wordpress/i18n");
var _inputControl = require("../input-control");
var _text = require("../text");
var _colorsValues = require("../utils/colors-values");
var _inputPrefixWrapper = _interopRequireDefault(require("../input-control/input-prefix-wrapper"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const HexInput = ({
color,
onChange,
enableAlpha
}) => {
const handleChange = nextValue => {
if (!nextValue) {
return;
}
const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue;
onChange((0, _colord.colord)(hexValue));
};
const stateReducer = (state, action) => {
const nativeEvent = action.payload?.event?.nativeEvent;
if ('insertFromPaste' !== nativeEvent?.inputType) {
return {
...state
};
}
const value = state.value?.startsWith('#') ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase();
return {
...state,
value
};
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputControl.InputControl, {
prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputPrefixWrapper.default, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_text.Text, {
color: _colorsValues.COLORS.theme.accent,
lineHeight: 1,
children: "#"
})
}),
value: color.toHex().slice(1).toUpperCase(),
onChange: handleChange,
maxLength: enableAlpha ? 9 : 7,
label: (0, _i18n.__)('Hex color'),
hideLabelFromVision: true,
size: "__unstable-large",
__unstableStateReducer: stateReducer,
__unstableInputWidth: "9em"
});
};
exports.HexInput = HexInput;
//# sourceMappingURL=hex-input.js.map