@smart-react-components/ui
Version:
SRC UI includes React and Styled components.
141 lines (140 loc) • 9.66 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorPickerFormat = void 0;
const Div_1 = __importDefault(require("@smart-react-components/core/Element/Div"));
const element_props_1 = __importDefault(require("@smart-react-components/core/element-props"));
const change_events_1 = __importDefault(require("@smart-react-components/core/element-props/change-events"));
const focus_events_1 = __importDefault(require("@smart-react-components/core/element-props/focus-events"));
const intrinsic_styled_core_props_1 = __importDefault(require("@smart-react-components/core/element-props/intrinsic-styled-core-props"));
const keyboard_events_1 = __importDefault(require("@smart-react-components/core/element-props/keyboard-events"));
const color_1 = require("@smart-react-components/core/util/color");
const react_1 = __importDefault(require("react"));
const ColorPicker_1 = __importStar(require("../ColorPicker"));
const FormBlockLabel_1 = __importDefault(require("../components/Form/FormBlockLabel"));
const InputElement_1 = __importDefault(require("../components/Input/InputElement"));
const FixedBox_1 = __importDefault(require("../FixedBox"));
const useAddons_1 = __importDefault(require("../hooks/useAddons"));
const color_picker_1 = require("../util/color-picker");
const InputAddon_1 = __importDefault(require("./InputAddon"));
const useChangeEffect_1 = __importDefault(require("@smart-react-components/core/hooks/useChangeEffect"));
const props_1 = require("../util/props");
const InputWrapper_1 = __importDefault(require("../components/Input/InputWrapper"));
var ColorPicker_2 = require("../ColorPicker");
Object.defineProperty(exports, "ColorPickerFormat", { enumerable: true, get: function () { return ColorPicker_2.ColorPickerFormat; } });
const InputColorPicker = react_1.default.forwardRef((props, forwardRef) => {
var _a, _b, _c, _d, _e, _f;
const ref = react_1.default.useRef(null);
const [status, setStatus] = react_1.default.useState(() => false);
const { leftAddon, rightAddon } = (0, useAddons_1.default)({
Component: InputAddon_1.default,
leftAddon: props.leftAddon,
rightAddon: props.rightAddon,
props: {
cursorKey: 'selectBox',
hasBorder: props.hasBorder,
isDisabled: props.isDisabled,
isFocused: status,
isOutline: props.isOutline,
isSoft: props.isSoft,
palette: props.palette,
shape: props.shape,
size: props.size,
sizeSm: props.sizeSm,
sizeMd: props.sizeMd,
sizeLg: props.sizeLg,
sizeXl: props.sizeXl,
},
});
const updateInput = (value) => {
var _a;
const input = ((_a = forwardRef) !== null && _a !== void 0 ? _a : ref).current;
input.value = value ? (0, color_picker_1.colorToString)(value, props.format) : '';
};
const updateValue = (value) => props.setValue((0, color_picker_1.colorToString)((0, color_1.getColor)(value), props.format));
const handleChange = (e) => {
var _a;
const value = e.target.value;
if ((0, color_1.getColor)(value)) {
updateValue(value);
}
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, e);
};
const handleKeyDown = (e) => {
var _a;
if (e.key === 'Enter') {
updateValue(e.target.value);
}
(_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
};
const handleCancel = (e) => {
var _a;
(_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props, e);
if (!e.defaultPrevented) {
setStatus(false);
}
};
const handleDrag = (value) => {
var _a;
(_a = props.onDrag) === null || _a === void 0 ? void 0 : _a.call(props, value);
updateInput(value);
};
const handleSave = (e) => {
var _a;
(_a = props.onSave) === null || _a === void 0 ? void 0 : _a.call(props, e);
if (!e.defaultPrevented) {
setStatus(false);
}
};
(0, useChangeEffect_1.default)(() => {
updateInput(props.value ? (0, color_1.getColor)(props.value) : null);
}, [props.value]);
return (react_1.default.createElement(FormBlockLabel_1.default, Object.assign({}, (0, element_props_1.default)(props, [intrinsic_styled_core_props_1.default]), { cursorKey: "selectBox", formSize: props.size, formSizeSm: props.sizeSm, formSizeMd: props.sizeMd, formSizeLg: props.sizeLg, formSizeXl: props.sizeXl, isBlock: props.isBlock, isDisabled: props.isDisabled, palette: props.palette }),
props.label && react_1.default.createElement("span", null, props.label),
react_1.default.createElement(Div_1.default, { display: "flex", flex: "1 1 auto" },
((_a = leftAddon === null || leftAddon === void 0 ? void 0 : leftAddon.props) === null || _a === void 0 ? void 0 : _a.isSeparated) && leftAddon,
react_1.default.createElement(InputWrapper_1.default, { hasBorder: props.hasBorder, hasSeparatedLeftAddon: (_b = leftAddon === null || leftAddon === void 0 ? void 0 : leftAddon.props) === null || _b === void 0 ? void 0 : _b.isSeparated, hasSeparatedRightAddon: (_c = rightAddon === null || rightAddon === void 0 ? void 0 : rightAddon.props) === null || _c === void 0 ? void 0 : _c.isSeparated, isDisabled: props.isDisabled, isFocused: false, isOutline: props.isOutline, isSoft: props.isSoft, palette: props.palette, shape: props.shape },
(leftAddon && !((_d = leftAddon === null || leftAddon === void 0 ? void 0 : leftAddon.props) === null || _d === void 0 ? void 0 : _d.isSeparated)) && leftAddon,
react_1.default.createElement(FixedBox_1.default, { elementProps: Object.assign(Object.assign({}, (0, props_1.applyResponsiveStyledProp)(props, 'size', 'width', v => `$size.colorPicker.${v}.width`)), { background: '$color.dynamic.background', borderRadius: '$radius.colorPicker', boxShadow: '0 0 10px 1px {color.dynamic.shadow}', height: ['auto', true] }), maxWidth: -1, minWidth: -1, setStatus: setStatus, status: status },
react_1.default.createElement(InputElement_1.default, Object.assign({}, (!props.isDisabled && (0, element_props_1.default)(props, [change_events_1.default, focus_events_1.default, keyboard_events_1.default])), (!props.isDisabled && {
onChange: handleChange,
onKeyDown: handleKeyDown,
}), (props.isDisabled && { disabled: true }), (props.isReadOnly && { readOnly: true }), (props.isRequired && { required: true }), (typeof props.placeholder !== 'undefined' && { placeholder: props.placeholder }), { defaultValue: props.value ? (0, color_picker_1.convertColor)((0, color_1.getColor)(props.value), props.format) : '', hasLeftAddon: !!leftAddon, hasRightAddon: !!rightAddon, inputSize: props.size, inputSizeSm: props.sizeSm, inputSizeMd: props.sizeMd, inputSizeLg: props.sizeLg, inputSizeXl: props.sizeXl, isDisabled: props.isDisabled, isFocused: status, isOutline: props.isOutline, isSoft: props.isSoft, palette: props.palette, ref: forwardRef !== null && forwardRef !== void 0 ? forwardRef : ref })),
react_1.default.createElement(ColorPicker_1.default, { canAddColorToPalette: props.canAddColorToPalette, cancelLabel: props.cancelLabel, format: props.format, hasButtons: props.hasButtons, hasConsole: props.hasConsole, hasPalette: props.hasPalette, hasOpacityPicker: props.hasOpacityPicker, isDisabled: props.isDisabled, isOutline: props.isOutline, isSoft: props.isSoft, palette: props.palette, paletteColors: props.paletteColors, onCancel: handleCancel, onDrag: handleDrag, onSave: handleSave, saveLabel: props.saveLabel, setPaletteColors: props.setPaletteColors, setValue: props.setValue, value: props.value })),
(rightAddon && !((_e = rightAddon === null || rightAddon === void 0 ? void 0 : rightAddon.props) === null || _e === void 0 ? void 0 : _e.isSeparated)) && rightAddon),
((_f = rightAddon === null || rightAddon === void 0 ? void 0 : rightAddon.props) === null || _f === void 0 ? void 0 : _f.isSeparated) && rightAddon)));
});
InputColorPicker.defaultProps = {
format: ColorPicker_1.ColorPickerFormat.HEX,
hasBorder: true,
isOutline: true,
palette: 'primary',
shape: 'rectangle',
size: 'medium',
};
exports.default = InputColorPicker;