@re-flex/ui
Version:
Re-Flex ui library
52 lines (51 loc) • 3.16 kB
JavaScript
import ChipBase from "@re-flex/styled/Chip";
import { useTheme } from "@re-flex/styles";
import clsx from "clsx";
import React, { useCallback } from "react";
import ButtonBase from "../ButtonBase";
import IconButton from "../IconButton";
import Text from "../Typography";
const RiCloseLine = () => (React.createElement("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 24 24", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
React.createElement("g", null,
React.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }),
React.createElement("path", { d: "M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" }))));
const RiCheckLine = () => (React.createElement("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 24 24", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
React.createElement("g", null,
React.createElement("path", { fill: "none", d: "M0 0h24v24H0z" }),
React.createElement("path", { d: "M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z" }))));
const Chip = ({ label = "", className, icon, avatar, selectedIcon = React.createElement(RiCheckLine, null), deleteIcon: DeleteIcon = React.createElement(RiCloseLine, null), onClick, onDelete, size = "md", radius = 1, selected, ...rest }) => {
const theme = useTheme();
const onDeletable = useCallback((e) => {
if (typeof onDelete !== "function") {
return;
}
e.preventDefault();
e.stopPropagation();
onDelete(e);
}, [onDelete]);
const onClickable = useCallback((e) => {
if (typeof onClick !== "function") {
return;
}
e.preventDefault();
e.stopPropagation();
onClick(e);
}, [onClick]);
return (React.createElement(ChipBase, { label: label, component: ButtonBase, rippleEnable: typeof onClick === "function", borderRadius: radius * 8, size: size, selectable: typeof onClick === "function", removable: typeof onDelete === "function", className: clsx(className, {
["chip-clickable"]: typeof onClick === "function",
}), onClick: onClickable, onTouchEnd: onClickable, ...rest },
selected ? selectedIcon : icon || avatar,
React.createElement(Text, { variant: "caption", tag: "span", weight: "500", size: (typeof size === "string" ? theme.sizes[size] : 1.5) * 6, sx: {
mx: 1,
color: "var(--chip-color,var(--typography-color,currentcolor))",
}, className: `${theme.prefix}-chip-content-label` }, label),
onDelete && (React.createElement(IconButton, { className: `${theme.prefix}-chip-delete-action`, icon: DeleteIcon, onClick: onDeletable, onTouchEnd: onDeletable, size: size, sx: {
m: 0,
ml: -0.5,
width: 18,
height: 18,
fontSize: 20,
color: "var(--chip-color,var(--typography-color,currentcolor))",
} }))));
};
export default Chip;