@brizy/ui
Version:
React elements in Brizy style
33 lines (32 loc) • 1.61 kB
JavaScript
import React, { useCallback } from "react";
import { classNames } from "../classNamesFn";
import AntTag from "antd/lib/tag";
import { Icon } from "../Icon";
import { Close } from "../icons";
import { BRZ_PREFIX } from "../constants";
export const Tag = props => {
const { color = "gray", textColor = "white", children, onClick, onRemove, disabled, closable, status } = props;
const className = classNames()("tag", {
[`tag--${color}`]: color,
[`tag--text-${textColor}`]: textColor,
"tag--disabled": disabled,
"tag--removable": onRemove,
});
const _closable = typeof onRemove === "function" || closable;
const _onClick = useCallback(() => {
onClick === null || onClick === void 0 ? void 0 : onClick();
}, [onClick]);
// little hacks for Dispatch Events for Click because
// in and have stopPropagation()
const _onRemove = useCallback((e) => {
const target = e.target.closest(`.${BRZ_PREFIX}-tag`);
const event = new Event("click", {
bubbles: true,
cancelable: true,
});
target === null || target === void 0 ? void 0 : target.dispatchEvent(event);
onRemove === null || onRemove === void 0 ? void 0 : onRemove();
}, [onRemove]);
return (React.createElement(AntTag, { color: status, className: className, closable: _closable, onClick: _onClick, onClose: _onRemove, closeIcon: React.createElement(Icon, { size: "10px", source: Close, color: "dark" }), visible: true },
React.createElement("div", { className: `${BRZ_PREFIX}-tag__children` }, children)));
};