nice-ui
Version:
React design system, components, and utilities
31 lines (30 loc) • 2.25 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CommandArgColor = void 0;
const React = require("react");
const react_colorful_1 = require("react-colorful");
const Typeahead_1 = require("../../../../2-inline-block/Typeahead");
const BasicTooltip_1 = require("../../../../4-card/BasicTooltip");
const Iconista_1 = require("../../../../icons/Iconista");
const CommandPaletteItem_1 = require("../../CommandPaletteItem");
const CommandArg_1 = require("../CommandArg");
const Parameter_1 = require("./Parameter");
const icon = (React.createElement(BasicTooltip_1.BasicTooltip, { renderTooltip: () => 'string' },
React.createElement(Iconista_1.Iconista, { set: "elastic", icon: "string", width: 16, height: 16 })));
const CommandArgColor = ({ title, label, actionLabel, value, placeholder, readonly, onChange, onSubmit, onClick, onTabBack, onDeleteBefore, }) => {
const inputRef = React.useRef(null);
const active = !readonly;
const handleMouseUp = () => {
const input = inputRef.current;
if (!input)
return;
input.focus();
};
return (React.createElement(CommandArg_1.CommandArg, { title: title, right: React.createElement("span", { style: { fontSize: '1.1em' } },
React.createElement(Parameter_1.Parameter, { value: value, label: label, active: active })), active: active, onClick: onClick }, !readonly && (React.createElement(React.Fragment, null,
React.createElement(CommandPaletteItem_1.CommandPaletteItem, { selected: true, icon: icon, actionLabel: actionLabel || 'Submit' },
React.createElement(Typeahead_1.Typeahead, { autoFocus: true, value: value, placeholder: placeholder, onChange: onChange, onEnter: onSubmit, onTab: onSubmit, onTabBack: onTabBack, onDeleteBefore: onDeleteBefore, onInput: (input) => (inputRef.current = input) })),
React.createElement("div", { style: { padding: '16px 24px 0', display: 'flex', justifyContent: 'center' } },
React.createElement(react_colorful_1.HexColorPicker, { style: { width: '100%', maxWidth: 480, height: 180 }, color: value, onChange: onChange, onTouchEnd: handleMouseUp, onMouseUp: handleMouseUp }))))));
};
exports.CommandArgColor = CommandArgColor;