lucid-ui/dist/cjs/components/Tag/Tag.js

A UI component library from AppNexus.

"use strict";
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.Tag = void 0;
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("react-peek/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;
var defaultProps = {
    isTop: false,
    hasLightBackground: true,
    isRemovable: false,
    onRemove: lodash_1.default.noop,
    kind: 'default',
};
var Tag = function (props) {
    var isTop = props.isTop, isRemovable = props.isRemovable, children = props.children, className = props.className, onRemove = props.onRemove, hasLightBackground = props.hasLightBackground, kind = props.kind, passThroughs = __rest(props, ["isTop", "isRemovable", "children", "className", "onRemove", "hasLightBackground", "kind"]);
    var handleRemove = function (_a) {
        var event = _a.event;
        onRemove({ props: props, event: event });
    };
    var subTags = component_types_1.filterTypes(children, exports.Tag);
    var otherChildren = 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({}, component_types_1.omitProps(passThroughs, undefined, __spreadArrays(lodash_1.default.keys(exports.Tag.propTypes), [
        'callbackId',
    ])), { 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: "\n\t\t\t`Tag` is a visualization for selected settings. \n\t\t\t\t",
    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 = {
    isTop: bool(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t\tSet this prop if you're using three levels of tags so it can be styled\n\t\tappropriately. This is required because we aren't able to know if your\n\t\tTags have grand children efficiently.\n\t"], ["\n\t\tSet this prop if you're using three levels of tags so it can be styled\n\t\tappropriately. This is required because we aren't able to know if your\n\t\tTags have grand children efficiently.\n\t"]))),
    hasLightBackground: bool(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t\tUse the light background when your tags are on a white page background.\n\t\tUse a dark background when your tags need to be placed on a darker\n\t\tbackground (e.g. in a page header).\n\t"], ["\n\t\tUse the light background when your tags are on a white page background.\n\t\tUse a dark background when your tags need to be placed on a darker\n\t\tbackground (e.g. in a page header).\n\t"]))),
    isRemovable: bool(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\t\tShows or hides the little \"x\" for a given tag.\n\t"], ["\n\t\tShows or hides the little \"x\" for a given tag.\n\t"]))),
    kind: oneOf(['primary', 'success', 'warning', 'danger', 'info', 'default'])(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\t\tStyle variations of the `Tag`.\n\t"], ["\n\t\tStyle variations of the \\`Tag\\`.\n\t"]))),
    onRemove: func(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n\t\tCalled when the user clicks to remove a tag.  Signature:\n\t\t`({props, event}) => {}`\n\t"], ["\n\t\tCalled when the user clicks to remove a tag.  Signature:\n\t\t\\`({props, event}) => {}\\`\n\t"]))),
    children: node(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n\t\tCan contain elements or nested `Tag` components.\n\t"], ["\n\t\tCan contain elements or nested \\`Tag\\` components.\n\t"]))),
    className: string(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n\t\tAppended to the component-specific class names set on the root element.\n\t"], ["\n\t\tAppended to the component-specific class names set on the root element.\n\t"]))),
};
exports.default = exports.Tag;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
//# sourceMappingURL=Tag.js.map