lucid-ui
Version:
A UI component library from AppNexus.
142 lines • 8.87 kB
JavaScript
;
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
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 __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconSelect = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("react-peek/prop-types"));
var Icon_1 = __importDefault(require("../Icon/Icon"));
var RadioButtonLabeled_1 = __importDefault(require("../RadioButtonLabeled/RadioButtonLabeled"));
var CheckboxLabeled_1 = __importDefault(require("../CheckboxLabeled/CheckboxLabeled"));
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var cx = style_helpers_1.lucidClassNames.bind('&-IconSelect');
var arrayOf = prop_types_1.default.arrayOf, bool = prop_types_1.default.bool, func = prop_types_1.default.func, node = prop_types_1.default.node, number = prop_types_1.default.number, oneOf = prop_types_1.default.oneOf, string = prop_types_1.default.string, shape = prop_types_1.default.shape;
var getFigureParent = function (domNode) {
if (domNode.classList.contains(cx('&-Item'))) {
return domNode;
}
if (domNode === document.body) {
throw new Error("domNode is not a child of ." + cx('&-Item'));
}
if (domNode.parentElement) {
return getFigureParent(domNode.parentElement);
}
return;
};
var defaultProps = {
kind: 'multiple',
isDisabled: false,
onSelect: lodash_1.default.noop,
};
var IconSelect = function (props) {
var className = props.className, children = props.children, kind = props.kind, items = props.items, isDisabled = props.isDisabled, onSelect = props.onSelect, passThroughs = __rest(props, ["className", "children", "kind", "items", "isDisabled", "onSelect"]);
var handleClick = function (event) {
if (!props.isDisabled) {
var domNode = getFigureParent(event.target);
if (domNode) {
var id = domNode.dataset.id;
domNode.focus();
if (!domNode.hasAttribute('disabled') && id) {
onSelect(id, { event: event, props: props });
}
}
}
};
var getChildIcon = function (icon) {
return icon ? (icon) : (react_1.default.createElement(Icon_1.default, null,
react_1.default.createElement("rect", { x: '0', y: '0', width: '16', height: '16' }),
react_1.default.createElement("rect", { x: '1', y: '1', width: '14', height: '14', fill: 'white' })));
};
var getInputComponent = function (item) {
var _a, _b;
var kind = props.kind, className = props.className, isDisabled = props.isDisabled;
var Label = item.label;
var singleSelect = lodash_1.default.isEqual(kind, 'single');
return singleSelect ? (react_1.default.createElement(RadioButtonLabeled_1.default, { Label: Label, className: cx('&-Item-radio', (_a = {},
_a[className + "-radio"] = className,
_a)), isDisabled: isDisabled || item.isDisabled, isSelected: item.isSelected })) : (react_1.default.createElement(CheckboxLabeled_1.default, { Label: Label, className: cx('&-Item-checkbox', (_b = {},
_b[className + "-checkbox"] = className,
_b)), isDisabled: isDisabled || item.isDisabled ? true : false, isIndeterminate: item.isPartial ? true : false, isSelected: item.isSelected ? true : false }));
};
return (react_1.default.createElement("span", __assign({}, component_types_1.omitProps(passThroughs, undefined, __spreadArrays(lodash_1.default.keys(exports.IconSelect.propTypes), [
'items',
])), { className: cx('&', className) }),
lodash_1.default.map(items, function (childItem, index) {
var _a;
var itemDisabled = isDisabled || childItem.isDisabled;
return (react_1.default.createElement("figure", { key: "iconselectitem_" + index, className: cx('&-Item', childItem.className, (_a = {},
_a[className + "-Item"] = className,
_a['&-Item-is-disabled'] = itemDisabled,
_a['&-Item-is-partial'] = childItem.isPartial,
_a['&-Item-is-selected'] = childItem.isSelected,
_a['&-Item-multi'] = kind === 'multiple',
_a['&-Item-single'] = kind === 'single',
_a)), "data-id": childItem.id, onClick: itemDisabled ? undefined : handleClick },
childItem.icon && getChildIcon(childItem.icon),
react_1.default.createElement("figcaption", { className: cx('&-Item-figcaption') }, getInputComponent(childItem))));
}),
children));
};
exports.IconSelect = IconSelect;
exports.IconSelect.displayName = 'IconSelect';
exports.IconSelect.defaultProps = defaultProps;
exports.IconSelect.peek = {
description: "\n\t\tIconSelect allow you to pair icons together to form a related cluster.\n\t\tAny props not explicitly called out are spread on to the root\n\t\tcomponent.\n\t",
categories: ['controls', 'selectors'],
};
exports.IconSelect.propTypes = {
className: string(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\tAppended to the component-specific class names set on the root element.\n\t\tValue is run through the `classnames` library.\n\t"], ["\n\t\tAppended to the component-specific class names set on the root element.\n\t\tValue is run through the \\`classnames\\` library.\n\t"]))),
children: node(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\tAdded to the end of the IconSelect group.\n\t"], ["\n\t\tAdded to the end of the IconSelect group.\n\t"]))),
items: arrayOf(shape({
id: string.isRequired,
icon: node,
label: node,
isSelected: bool,
isPartial: bool,
tabIndex: number,
isDisabled: bool,
className: string,
})).isRequired(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\tItems in the IconSelect group. Each item should have an id.\n\t"], ["\n\t\tItems in the IconSelect group. Each item should have an id.\n\t"]))),
kind: oneOf(['single', 'multiple'])(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\tDefines the type of IconSelect box. A 'single' select will create a radio\n\t\tinput type Item. A 'multiple' select will create a checkbox input type.\n\t"], ["\n\t\tDefines the type of IconSelect box. A 'single' select will create a radio\n\t\tinput type Item. A 'multiple' select will create a checkbox input type.\n\t"]))),
onSelect: func(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\tA function that is called with the id of the Item in the IconSelect group\n\t\tis clicked. Signature: `(id, { event }) => {}`\n\t"], ["\n\t\tA function that is called with the id of the Item in the IconSelect group\n\t\tis clicked. Signature: \\`(id, { event }) => {}\\`\n\t"]))),
isDisabled: bool(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\tDisabled all IconSelect Items.\n\t"], ["\n\t\tDisabled all IconSelect Items.\n\t"]))),
};
exports.default = exports.IconSelect;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
//# sourceMappingURL=IconSelect.js.map