react-life-design
Version:
Life Design UI components
47 lines • 2.32 kB
JavaScript
;
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ColorPicker_styled_1 = require("./ColorPicker.styled");
var RecommendedColors_1 = require("./RecommendedColors");
exports.default = React.memo(function (_a) {
var onChange = _a.onChange, defaultColor = _a.defaultColor;
var _b = __read(React.useState(defaultColor || '#00002D'), 2), selectedColor = _b[0], setSelectedColor = _b[1];
var _c = __read(React.useState(selectedColor), 2), inputColor = _c[0], setInputColor = _c[1];
var _d = __read(React.useState(RecommendedColors_1.default), 1), recommendedColor = _d[0];
var setColor = function (color) {
setSelectedColor(color);
setInputColor(color);
onChange(color);
};
var changeColor = function (_a) {
var target = _a.target;
var value = target.value;
var isValidHex = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value);
setInputColor(value);
if (isValidHex) {
setColor(value);
}
};
return (React.createElement(ColorPicker_styled_1.ColorPicker, null,
React.createElement(ColorPicker_styled_1.BoxColor, { color: selectedColor }, selectedColor),
React.createElement(ColorPicker_styled_1.GridColors, null, recommendedColor.map(function (color) { return (React.createElement(ColorPicker_styled_1.ColumnColor, { color: color.hex, key: color.id, onClick: function () { return setColor(color.hex); } }, color.hex === selectedColor && React.createElement(ColorPicker_styled_1.Check, null))); })),
React.createElement(ColorPicker_styled_1.InputColor, null,
React.createElement("input", { className: 'input', type: 'text', maxLength: 7, value: inputColor, onChange: changeColor }))));
});
//# sourceMappingURL=ColorPicker.js.map