@navinc/base-react-components
Version:
Nav's Pattern Library
72 lines (71 loc) • 3.18 kB
JavaScript
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;
};
import { jsx as _jsx } from "react/jsx-runtime";
import styled from 'styled-components';
import { iconsMap } from './icons';
import { StyledButton } from './button';
const bifilter = (filter, arr) => {
const truthy = [];
const falsey = [];
arr.forEach((item) => {
if (filter(item)) {
truthy.push(item);
}
else {
falsey.push(item);
}
});
return [truthy, falsey];
};
const handlerRegExp = /^on[A-Z]/;
const partitionHandlerProps = (props) => {
const [handlers, nonHandlers] = bifilter(([propName]) => handlerRegExp.test(propName), Object.entries(props));
return [Object.fromEntries(handlers), Object.fromEntries(nonHandlers)];
};
export const Icon = (_a) => {
var { name } = _a, props = __rest(_a, ["name"]);
const IconComponent = iconsMap[name];
return IconComponent ? (_jsx(IconComponent, Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", "data-testid": `icon:${name}` }, props))) : null;
};
const getInteractiveIconName = (name) => {
const nameArr = name.split('/');
return nameArr[nameArr.length - 1];
};
const StyleOverrideButton = styled(StyledButton).withConfig({ displayName: "brc-sc-StyleOverrideButton", componentId: "brc-sc-1do7kxz" }) `
padding: 0;
height: ${({ variation }) => (variation === 'buttonLink' ? '24px' : '32px')};
width: ${({ variation }) => (variation === 'buttonLink' ? '24px' : '32px')};
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
border-radius: 50%;
border: none;
color: ${({ variation }) => variation === 'buttonLink' && 'inherit'};
&:hover,
&:hover:not([disabled]),
&:hover:active,
&:focus,
&:focus:active,
&:active {
color: ${({ variation }) => variation === 'buttonLink' && 'inherit'};
}
`;
/** Pass all event handler props to a wrapper button to avoid rerendering the icon and causing flicker */
const InteractiveIconInternal = (_a) => {
var { variation = 'buttonLink', buttonAriaLabel } = _a, props = __rest(_a, ["variation", "buttonAriaLabel"]);
const [handlers, nonHandlers] = partitionHandlerProps(props);
return (_jsx(StyleOverrideButton, Object.assign({}, handlers, { variation: variation, "data-testid": "interactive-icon", "aria-label": buttonAriaLabel || `${getInteractiveIconName(nonHandlers.name)} icon button` }, { children: _jsx(Icon, Object.assign({}, nonHandlers)) })));
};
export const InteractiveIcon = styled(InteractiveIconInternal).withConfig({ displayName: "brc-sc-InteractiveIcon", componentId: "brc-sc-p8eqir" }) ``;
export default styled(Icon).withConfig({ componentId: "brc-sc-14pb1u5" }) ``;
//# sourceMappingURL=icon.js.map