@smart-react-components/ui/ColorPicker/index.js

SRC UI includes React and Styled components.

"use strict";
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 core_1 = require("@smart-react-components/core");
const element_props_1 = __importDefault(require("@smart-react-components/core/element-props"));
const intrinsic_styled_core_props_1 = __importDefault(require("@smart-react-components/core/element-props/intrinsic-styled-core-props"));
const useChangeEffect_1 = __importDefault(require("@smart-react-components/core/hooks/useChangeEffect"));
const color_1 = require("@smart-react-components/core/util/color");
const react_1 = __importDefault(require("react"));
const ButtonsSection_1 = __importDefault(require("../components/ColorPicker/ButtonsSection"));
const ColorPickerElement_1 = __importDefault(require("../components/ColorPicker/ColorPickerElement"));
const ConsoleSection_1 = __importDefault(require("../components/ColorPicker/ConsoleSection"));
const PaletteSection_1 = __importDefault(require("../components/ColorPicker/PaletteSection"));
const PickerSection_1 = __importDefault(require("../components/ColorPicker/PickerSection"));
const ColorPickerProps_1 = __importDefault(require("../context/ColorPickerProps"));
const color_picker_1 = require("../types/color-picker");
const color_picker_2 = require("../util/color-picker");
var color_picker_3 = require("../types/color-picker");
Object.defineProperty(exports, "ColorPickerFormat", { enumerable: true, get: function () { return color_picker_3.ColorPickerFormat; } });
const ColorPicker = props => {
    const consoleSection = react_1.default.useRef(null);
    const [value, setValue] = react_1.default.useState(() => props.value ? (0, color_1.getColor)(props.value) : null);
    const [initialValue, setInitialValue] = react_1.default.useState(() => props.value ? (0, color_1.getColor)(props.value) : null);
    const updateValue = (value) => props.setValue(value !== null
        ? (0, color_picker_2.colorToString)(typeof value === 'string' ? (0, color_1.getColor)(value) : value, props.format)
        : null);
    const handleDrag = (value) => {
        var _a, _b;
        (_a = props.onDrag) === null || _a === void 0 ? void 0 : _a.call(props, value);
        (_b = consoleSection.current) === null || _b === void 0 ? void 0 : _b.onDrag(value);
    };
    const handleCancel = (e) => {
        var _a;
        (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props, e);
        if (!e.defaultPrevented) {
            updateValue(initialValue);
        }
    };
    const handleSave = (e) => {
        var _a;
        (_a = props.onSave) === null || _a === void 0 ? void 0 : _a.call(props, e);
        if (!e.defaultPrevented) {
            setInitialValue(value);
        }
    };
    (0, useChangeEffect_1.default)(() => {
        const newValue = props.value ? (0, color_1.getColor)(props.value) : null;
        if (newValue !== value) {
            setValue(newValue);
        }
    }, [props.value]);
    return (react_1.default.createElement(ColorPickerProps_1.default.Provider, { value: {
            colorPickerSize: props.size,
            colorPickerSizeSm: props.sizeSm,
            colorPickerSizeMd: props.sizeMd,
            colorPickerSizeLg: props.sizeLg,
            colorPickerSizeXl: props.sizeXl,
            isDisabled: props.isDisabled,
            palette: props.palette,
            updateValue,
            value,
        } },
        react_1.default.createElement(ColorPickerElement_1.default, Object.assign({}, (0, element_props_1.default)(props, [intrinsic_styled_core_props_1.default]), { colorPickerSize: props.size, colorPickerSizeSm: props.sizeSm, colorPickerSizeMd: props.sizeMd, colorPickerSizeLg: props.sizeLg, colorPickerSizeXl: props.sizeXl, isOutline: props.isOutline, palette: props.palette }),
            react_1.default.createElement(PickerSection_1.default, { hasOpacityPicker: props.hasOpacityPicker, onDrag: handleDrag }),
            (props.hasConsole || props.hasButtons) && (react_1.default.createElement(core_1.Hr, { border: "none", background: "transparent", width: "100%" })),
            props.hasConsole && (react_1.default.createElement(ConsoleSection_1.default, { format: props.format, initialValue: initialValue, onRef: v => { consoleSection.current = v; }, palette: props.palette })),
            props.hasButtons && (react_1.default.createElement(ButtonsSection_1.default, { cancelLabel: props.cancelLabel, isSoft: props.isSoft, onCancel: handleCancel, onSave: handleSave, palette: props.palette, saveLabel: props.saveLabel })),
            props.hasPalette && (react_1.default.createElement(PaletteSection_1.default, { canAddColorToPalette: props.canAddColorToPalette, format: props.format, palette: props.palette, paletteColors: props.paletteColors, setPaletteColors: props.setPaletteColors })))));
};
ColorPicker.defaultProps = {
    format: color_picker_1.ColorPickerFormat.HEX,
    canAddColorToPalette: true,
    hasButtons: true,
    hasConsole: true,
    hasOpacityPicker: true,
    hasPalette: true,
    size: 'medium',
    palette: 'primary',
};
exports.default = ColorPicker;