@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
114 lines • 6.83 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorField = void 0;
const react_1 = __importDefault(require("react"));
const classnames_1 = __importDefault(require("classnames"));
const common_1 = require("../../common");
const constants_1 = require("../../configuration/constants");
const ContextOverlay_1 = require("../ContextOverlay");
const Form_1 = require("../Form");
const RadioButton_1 = require("../RadioButton/RadioButton");
const Spacing_1 = require("../Separation/Spacing");
const Tag_1 = require("../Tag");
const TextField_1 = require("../TextField");
const Tooltip_1 = require("../Tooltip/Tooltip");
const Typography_1 = require("../Typography");
/**
* Color input field that provides resets from the configured color palette.
* Use `includeColorWeight` and `includePaletteGroup` to filter them.
*/
const ColorField = (_a) => {
var { className = "", allowCustomColor = false, colorPresets = listColorPalettePresets(), defaultValue, value, onChange, fullWidth = false } = _a, otherTextFieldProps = __rest(_a, ["className", "allowCustomColor", "colorPresets", "defaultValue", "value", "onChange", "fullWidth"]);
const ref = react_1.default.useRef(null);
const [colorValue, setColorValue] = react_1.default.useState(defaultValue || value || "#000000");
if (value && value !== colorValue) {
setColorValue(value);
}
const disableNativePicker = colorPresets.length > 0;
const disabled = (!disableNativePicker && !allowCustomColor) || otherTextFieldProps.disabled;
const forwardOnChange = (forwardedEvent) => {
setColorValue(forwardedEvent.target.value);
if (onChange) {
onChange(forwardedEvent);
}
};
const colorInput = (react_1.default.createElement(TextField_1.TextField, Object.assign({ inputRef: ref, className: (0, classnames_1.default)(`${constants_1.CLASSPREFIX}-colorfield`, className, {
[`${constants_1.CLASSPREFIX}-colorfield--custom-picker`]: disableNativePicker,
[`${constants_1.CLASSPREFIX}-colorfield--disabled`]: disabled,
}),
// we cannot use `color` type for the custom picker because we do not have control over it then
type: !disableNativePicker ? "color" : "text", readOnly: disableNativePicker, disabled: disabled, value: colorValue, fullWidth: fullWidth }, otherTextFieldProps, { onChange: !disableNativePicker
? (e) => {
forwardOnChange(e);
}
: undefined, style: Object.assign(Object.assign({}, otherTextFieldProps.style), { [`--eccgui-colorfield-background`]: colorValue }) })));
return disableNativePicker && !disabled ? (react_1.default.createElement(ContextOverlay_1.ContextOverlay, { fill: fullWidth, content: react_1.default.createElement(Typography_1.WhiteSpaceContainer, { paddingTop: "small", paddingRight: "small", paddingBottom: "small", paddingLeft: "small", className: `${constants_1.CLASSPREFIX}-colorfield__picker` },
allowCustomColor && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(TextField_1.TextField, { type: "color", value: colorValue, onChange: (e) => {
forwardOnChange(e);
} }),
react_1.default.createElement(Spacing_1.Spacing, { size: "small" }))),
react_1.default.createElement(Form_1.FieldSet, null,
react_1.default.createElement(Tag_1.TagList, { className: `${constants_1.CLASSPREFIX}-colorfield__palette` }, colorPresets.map((color, idx) => [
react_1.default.createElement(RadioButton_1.RadioButton, { key: idx, className: `${constants_1.CLASSPREFIX}-colorfield__palette__color`, hideIndicator: true, value: typeof color[1] === "string" ? color[1] : color[1].toString(), onChange: (e) => {
forwardOnChange(e);
} },
react_1.default.createElement(Tooltip_1.Tooltip, { content: color[0] },
react_1.default.createElement(Tag_1.Tag, { large: true, style: { [`--eccgui-colorfield-palette-color`]: color[1] } }, color[1]))),
// Looks like we cannot force some type of line break in the tag list via CSS only
(idx + 1) % 8 === 0 && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("br", { className: `${constants_1.CLASSPREFIX}-colorfield__palette-linebreak` }))),
])))) }, colorInput)) : (colorInput);
};
exports.ColorField = ColorField;
const defaultColorPaletteSet = {
// on default, we only include color weights that can have enough contrasts to black/white
includeColorWeight: [100, 300, 700, 900],
// on default, we only include layout colors
includePaletteGroup: ["layout"],
};
/**
* Simple helper function to get a list of colors defined in the color palette.
*/
const listColorPalettePresets = (colorPaletteSet = defaultColorPaletteSet) => {
return common_1.utils
.getEnabledColorPropertiesFromPalette(Object.assign(Object.assign({}, colorPaletteSet), { minimalColorDistance: 0 }))
.map((color) => [
color[0].replace(`${constants_1.CLASSPREFIX}-color-palette-`, ""),
color[1],
]);
};
exports.ColorField.listColorPalettePresets = listColorPalettePresets;
/**
* Simple helper function that provide simple access to color hash calculation.
*/
exports.ColorField.calculateColorHashValue = (text, options = Object.assign(Object.assign({}, defaultColorPaletteSet), { allowCustomColor: false })) => {
const hash = common_1.utils.textToColorHash({
text,
options: {
returnValidColorsDirectly: options.allowCustomColor,
enabledColors: common_1.utils.getEnabledColorsFromPalette({
includePaletteGroup: options.includePaletteGroup,
includeColorWeight: options.includeColorWeight,
minimalColorDistance: 0,
}),
},
});
return hash ? hash : undefined;
};
exports.default = exports.ColorField;
//# sourceMappingURL=ColorField.js.map