lucid-ui
Version:
A UI component library from Xandr.
174 lines • 8.11 kB
JavaScript
"use strict";
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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.IconSelect = void 0;
var lodash_1 = __importStar(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("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 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 .".concat(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["".concat(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["".concat(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({}, (0, lodash_1.omit)(passThroughs, [
'className',
'children',
'items',
'kind',
'onSelect',
'isDisabled',
].concat(['initialState', 'callbackId'])), { 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_".concat(index), className: cx('&-Item', childItem.className, (_a = {},
_a["".concat(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: "`IconSelect` allows you to pair icons together to form a related cluster. Any props not explicitly called out are spread on to the root component.",
categories: ['controls', 'selectors'],
};
exports.IconSelect.propTypes = {
/**
Appended to the component-specific class names set on the root element.
Value is run through the \`classnames\` library.
*/
className: string,
/**
Added to the end of the IconSelect group.
*/
children: node,
/**
Items in the IconSelect group. Each item should have an id.
*/
items: arrayOf(shape({
id: string.isRequired,
icon: node,
label: node,
isSelected: bool,
isPartial: bool,
tabIndex: number,
isDisabled: bool,
className: string,
})).isRequired,
/**
Defines the type of IconSelect box. A 'single' select will create a radio
input type Item. A 'multiple' select will create a checkbox input type.
*/
kind: oneOf(['single', 'multiple']),
/**
A function that is called with the id of the Item in the IconSelect group
is clicked. Signature: \`(id, { event }) => {}\`
*/
onSelect: func,
/**
Disabled all IconSelect Items.
*/
isDisabled: bool,
};
exports.default = exports.IconSelect;
//# sourceMappingURL=IconSelect.js.map