lucid-ui
Version:
A UI component library from Xandr.
121 lines • 5.74 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 });
exports.Tag = void 0;
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("prop-types"));
var lodash_1 = __importDefault(require("lodash"));
var style_helpers_1 = require("../../util/style-helpers");
var CloseIcon_1 = __importDefault(require("../Icon/CloseIcon/CloseIcon"));
var component_types_1 = require("../../util/component-types");
var cx = style_helpers_1.lucidClassNames.bind('&-Tag');
var bool = prop_types_1.default.bool, func = prop_types_1.default.func, node = prop_types_1.default.node, string = prop_types_1.default.string, oneOf = prop_types_1.default.oneOf;
/** TODO: Remove the nonPassThroughs when the component is converted to a functional component */
var nonPassThroughs = ['callbackId', 'initialState'];
var defaultProps = {
isTop: false,
hasLightBackground: true,
isRemovable: false,
kind: 'default',
onRemove: lodash_1.default.noop,
};
var Tag = function (props) {
var isTop = props.isTop, hasLightBackground = props.hasLightBackground, isRemovable = props.isRemovable, kind = props.kind, onRemove = props.onRemove, children = props.children, className = props.className, passThroughs = __rest(props, ["isTop", "hasLightBackground", "isRemovable", "kind", "onRemove", "children", "className"]);
var handleRemove = function (_a) {
var event = _a.event;
onRemove({ props: props, event: event });
};
var subTags = (0, component_types_1.filterTypes)(children, exports.Tag);
var otherChildren = (0, component_types_1.rejectTypes)(children, exports.Tag);
var hasOtherChildren = !lodash_1.default.isEmpty(otherChildren);
var isLeaf = lodash_1.default.isEmpty(subTags);
return (react_1.default.createElement("div", __assign({}, lodash_1.default.omit(passThroughs, nonPassThroughs), { className: cx('&', {
'&-is-top': isTop,
'&-is-leaf': isLeaf,
'&-is-removable': isRemovable,
'&-has-light-background': hasLightBackground,
'&-default': kind === 'default',
'&-primary': kind === 'primary',
'&-success': kind === 'success',
'&-warning': kind === 'warning',
'&-danger': kind === 'danger',
'&-info': kind === 'info',
}, className) }),
hasOtherChildren && (react_1.default.createElement("span", { className: cx('&-other-children') },
otherChildren,
isRemovable && (react_1.default.createElement(CloseIcon_1.default, { onClick: handleRemove, className: cx('&-remove-button'), size: 7, isClickable: true })))),
subTags));
};
exports.Tag = Tag;
exports.Tag.defaultProps = defaultProps;
exports.Tag.displayName = 'Tag';
exports.Tag.peek = {
description: "`Tag` is a visualization for selected settings.",
notes: {
overview: "\n\t\t\t\t\tA visualization for items. Tags can be removable and can be nested into groups.\n\t\t\t\t\t",
intendedUse: "\n\t\t\t\t\tTags are typically used to display filter selections. Tags can be interactive or display-only. They can also be grouped into a parent container.\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t**Styling notes**\n\t\t\t\t\t\n\t\t\t\t\t- The default style is not interactive, it does not have a `CloseIcon`.\n\t\t\t\t\t- Use `isRemovable='true'` for interactive tags.\n\t\t\t\t\t- Styling is optimized for 40 or fewer characters.\n\t\t\t\t\t",
technicalRecommendations: "\n\t\t\t\t\tNone\n\t\t\t",
},
categories: ['communication'],
};
exports.Tag.propTypes = {
/**
Set this prop if you're using three levels of tags so it can be styled
appropriately. This is required because we aren't able to know if your
Tags have grand children efficiently.
*/
isTop: bool,
/**
Use the light background when your tags are on a white page background.
Use a dark background when your tags need to be placed on a darker
background (e.g. in a page header).
*/
hasLightBackground: bool,
/**
Shows or hides the little "x" for a given tag.
*/
isRemovable: bool,
/**
Style variations of the \`Tag\`.
*/
kind: oneOf(['primary', 'success', 'warning', 'danger', 'info', 'default']),
/**
Called when the user clicks to remove a tag. Signature:
\`({props, event}) => {}\`
*/
onRemove: func,
/**
Can contain elements or nested \`Tag\` components.
*/
children: node,
/**
Appended to the component-specific class names set on the root element.
*/
className: string,
};
exports.default = exports.Tag;
//# sourceMappingURL=Tag.js.map