@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
140 lines • 7.57 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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 __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;
};
import React from "react";
import classNames from "classnames";
import { utils } from "../../common/index.js";
import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
import { ContextOverlay } from "../ContextOverlay/index.js";
import { FieldSet } from "../Form/index.js";
import { RadioButton } from "../RadioButton/RadioButton.js";
import { Spacing } from "../Separation/Spacing.js";
import { Tag, TagList } from "../Tag/index.js";
import { TextField } from "../TextField/index.js";
import { Tooltip } from "../Tooltip/Tooltip.js";
import { WhiteSpaceContainer } from "../Typography/index.js";
/**
* Color input field that provides resets from the configured color palette.
* Use `includeColorWeight` and `includePaletteGroup` to filter them.
*/
export var ColorField = function (_a) {
var _b, _c;
var _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.allowCustomColor, allowCustomColor = _e === void 0 ? false : _e, _f = _a.colorPresets, colorPresets = _f === void 0 ? listColorPalettePresets() : _f, defaultValue = _a.defaultValue, value = _a.value, onChange = _a.onChange, _g = _a.fullWidth, fullWidth = _g === void 0 ? false : _g, otherTextFieldProps = __rest(_a, ["className", "allowCustomColor", "colorPresets", "defaultValue", "value", "onChange", "fullWidth"]);
var ref = React.useRef(null);
var _h = __read(React.useState(defaultValue || value || "#000000"), 2), colorValue = _h[0], setColorValue = _h[1];
if (value && value !== colorValue) {
setColorValue(value);
}
var disableNativePicker = colorPresets.length > 0;
var disabled = (!disableNativePicker && !allowCustomColor) || otherTextFieldProps.disabled;
var forwardOnChange = function (forwardedEvent) {
setColorValue(forwardedEvent.target.value);
if (onChange) {
onChange(forwardedEvent);
}
};
var colorInput = (React.createElement(TextField, __assign({ inputRef: ref, className: classNames("".concat(eccgui, "-colorfield"), className, (_b = {},
_b["".concat(eccgui, "-colorfield--custom-picker")] = disableNativePicker,
_b["".concat(eccgui, "-colorfield--disabled")] = disabled,
_b)),
// 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
? function (e) {
forwardOnChange(e);
}
: undefined, style: __assign(__assign({}, otherTextFieldProps.style), (_c = {}, _c["--eccgui-colorfield-background"] = colorValue, _c)) })));
return disableNativePicker && !disabled ? (React.createElement(ContextOverlay, { fill: fullWidth, content: React.createElement(WhiteSpaceContainer, { paddingTop: "small", paddingRight: "small", paddingBottom: "small", paddingLeft: "small", className: "".concat(eccgui, "-colorfield__picker") },
allowCustomColor && (React.createElement(React.Fragment, null,
React.createElement(TextField, { type: "color", value: colorValue, onChange: function (e) {
forwardOnChange(e);
} }),
React.createElement(Spacing, { size: "small" }))),
React.createElement(FieldSet, null,
React.createElement(TagList, { className: "".concat(eccgui, "-colorfield__palette") }, colorPresets.map(function (color, idx) {
var _a;
return [
React.createElement(RadioButton, { key: idx, className: "".concat(eccgui, "-colorfield__palette__color"), hideIndicator: true, value: typeof color[1] === "string" ? color[1] : color[1].toString(), onChange: function (e) {
forwardOnChange(e);
} },
React.createElement(Tooltip, { content: color[0] },
React.createElement(Tag, { large: true, style: (_a = {}, _a["--eccgui-colorfield-palette-color"] = color[1], _a) }, color[1]))),
// Looks like we cannot force some type of line break in the tag list via CSS only
(idx + 1) % 8 === 0 && (React.createElement(React.Fragment, null,
React.createElement("br", { className: "".concat(eccgui, "-colorfield__palette-linebreak") }))),
];
})))) }, colorInput)) : (colorInput);
};
var 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.
*/
var listColorPalettePresets = function (colorPaletteSet) {
if (colorPaletteSet === void 0) { colorPaletteSet = defaultColorPaletteSet; }
return utils
.getEnabledColorPropertiesFromPalette(__assign(__assign({}, colorPaletteSet), { minimalColorDistance: 0 }))
.map(function (color) { return [
color[0].replace("".concat(eccgui, "-color-palette-"), ""),
color[1],
]; });
};
ColorField.listColorPalettePresets = listColorPalettePresets;
/**
* Simple helper function that provide simple access to color hash calculation.
*/
ColorField.calculateColorHashValue = function (text, options) {
if (options === void 0) { options = __assign(__assign({}, defaultColorPaletteSet), { allowCustomColor: false }); }
var hash = utils.textToColorHash({
text: text,
options: {
returnValidColorsDirectly: options.allowCustomColor,
enabledColors: utils.getEnabledColorsFromPalette({
includePaletteGroup: options.includePaletteGroup,
includeColorWeight: options.includeColorWeight,
minimalColorDistance: 0,
}),
},
});
return hash ? hash : undefined;
};
export default ColorField;
//# sourceMappingURL=ColorField.js.map