lucid-ui
Version:
A UI component library from Xandr.
164 lines • 8.51 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 __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 });
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("prop-types"));
var MinusCircleIcon_1 = __importDefault(require("../Icon/MinusCircleIcon/MinusCircleIcon"));
var SuccessIcon_1 = __importDefault(require("../Icon/SuccessIcon/SuccessIcon"));
var CloseIcon_1 = __importDefault(require("../Icon/CloseIcon/CloseIcon"));
var InfoIcon_1 = __importDefault(require("../Icon/InfoIcon/InfoIcon"));
var WarningIcon_1 = __importDefault(require("../Icon/WarningIcon/WarningIcon"));
var style_helpers_1 = require("../../util/style-helpers");
var component_types_1 = require("../../util/component-types");
var createElement = react_1.default.createElement;
var bool = prop_types_1.default.bool, func = prop_types_1.default.func, string = prop_types_1.default.string, node = prop_types_1.default.node, oneOf = prop_types_1.default.oneOf;
var cx = style_helpers_1.lucidClassNames.bind('&-Selection');
/** SELECTION ICON */
function defaultIcon(kind, responsiveMode) {
return kind === 'default' ? null : kind === 'container' ? null : kind ===
'success' ? (react_1.default.createElement(SuccessIcon_1.default, { className: cx('&-Icon', "&-Icon-is-".concat(responsiveMode)) })) : kind === 'danger' ? (react_1.default.createElement(MinusCircleIcon_1.default, { className: cx('&-Icon', "&-Icon-is-".concat(responsiveMode)) })) : kind === 'info' ? (react_1.default.createElement(InfoIcon_1.default, { className: cx('&-Icon', "&-Icon-is-".concat(responsiveMode)) })) : kind === 'warning' ? (react_1.default.createElement(WarningIcon_1.default, { className: cx('&-Icon', "&-Icon-is-".concat(responsiveMode)) })) : null;
}
var SelectionIcon = function () { return null; };
SelectionIcon.peek = {
description: "\n Icon that is displayed within the Selection. Any of the lucid `*Icon` components should work.\n ",
};
SelectionIcon.displayName = 'Selection.Icon';
SelectionIcon.propName = 'Icon';
var SelectionLabel = function () { return null; };
SelectionLabel.peek = {
description: "`Label` for the `Selection`.",
};
SelectionLabel.displayName = 'Selection.Label';
SelectionLabel.propName = 'Label';
var defaultProps = {
isRemovable: true,
onRemove: lodash_1.default.noop,
hasBackground: false,
isBold: false,
kind: 'default',
responsiveMode: 'large',
};
var Selection = function (props) {
var className = props.className, isRemovable = props.isRemovable, children = props.children, hasBackground = props.hasBackground, isBold = props.isBold, isFilled = props.isFilled, isTop = props.isTop, kind = props.kind, onRemove = props.onRemove, responsiveMode = props.responsiveMode, passThroughs = __rest(props, ["className", "isRemovable", "children", "hasBackground", "isBold", "isFilled", "isTop", "kind", "onRemove", "responsiveMode"]);
var isSmall = responsiveMode === 'small';
var labelProps = lodash_1.default.get((0, component_types_1.getFirst)(props, Selection.Label), 'props', {});
var iconElement = (0, component_types_1.getFirst)(props, Selection.Icon);
var iconChildren = lodash_1.default.get(iconElement, 'props.children');
var icon = iconChildren
? createElement(iconChildren.type, __assign(__assign({}, iconChildren.props), { className: cx('&-Icon', iconChildren.props.className) }))
: defaultIcon(kind, responsiveMode);
return (react_1.default.createElement("div", __assign({}, lodash_1.default.omit(passThroughs, ['callbackId', 'Label']), { className: cx('&', "&-is-".concat(responsiveMode), kind && "&-".concat(kind), {
'&-has-background': hasBackground,
'&-is-bold': isBold,
'&-is-filled': isFilled,
'&-is-top': isTop,
'&-no-title': lodash_1.default.isEmpty(labelProps),
}, className) }),
icon,
react_1.default.createElement("div", { className: cx('&-content') },
react_1.default.createElement("div", { className: cx('&-label-container') },
react_1.default.createElement("span", __assign({}, labelProps, { className: cx('&-label', isSmall && '&-label-is-small') })),
isRemovable ? (react_1.default.createElement(CloseIcon_1.default, { isClickable: true, size: !isSmall ? 8 : 16, className: cx('&-close-button', isSmall && '&-close-button-is-small'), onClick: function (_a) {
var event = _a.event;
onRemove({ event: event, props: props });
} })) : null),
!lodash_1.default.isEmpty(children) && (react_1.default.createElement("div", { className: cx('&-children-container') }, lodash_1.default.map(react_1.default.Children.toArray(children), function (child, i) {
if (react_1.default.isValidElement(child) && child.type === Selection) {
return (react_1.default.createElement(Selection, __assign({ key: lodash_1.default.get((0, component_types_1.getFirst)(child.props, Selection.Label), ['props', 'children'], {}) + i }, child.props)));
}
return child;
}))))));
};
Selection.displayName = 'Selection';
Selection.Icon = SelectionIcon;
Selection.Label = SelectionLabel;
Selection.peek = {
description: "Used to indicate selections. `Selection` is very similar to `Tag` but is meant to be used in areas of the UI that have more space available to them.",
categories: ['communication'],
};
Selection.defaultProps = defaultProps;
Selection.propTypes = {
/**
Appended to the component-specific class names set on the root element.
*/
className: string,
/**
Applies an icon and styles for the kind of selection.
*/
kind: oneOf(['default', 'container', 'success', 'danger', 'info', 'warning']),
/**
Apply to the top of a nested sequence of Selection components.
Adds some spacing for a list of top level Selections with nested Selctions inside each.
*/
isTop: bool,
/**
Only applies to \`container\` Selection components.
Fills with a darker gray background.
Defaults to false.
*/
isFilled: bool,
/**
Shows or hides the little "x" for a given item.
*/
isRemovable: bool,
/**
Gives the selection a background. This is desirable when you only have
one level of nested selections.
*/
hasBackground: bool,
/**
Make the content text bold. This is desirable when you only have one
level of nested selections.
*/
isBold: bool,
/**
Called when the close button is clicked.
*/
onRemove: func,
/**
Label of the component.
*/
Label: node,
/**
Display a custom icon for the selection. Generally you shouldn't need
this prop since the \`kind\` prop will pick the correct icon for you.
*/
Icon: node,
/**
Arbitrary children.
*/
children: node,
/**
Adjusts the display of this component. This should typically be driven by
screen size. Currently \`small\` and \`large\` are explicitly handled by
this component.
*/
responsiveMode: oneOf(['small', 'medium', 'large']),
};
exports.default = Selection;
//# sourceMappingURL=Selection.js.map