@navinc/base-react-components
Version:
Nav's Pattern Library
79 lines (78 loc) • 3.65 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InteractiveIcon = exports.Icon = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const icons_1 = require("./icons");
const button_1 = require("./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)];
};
const Icon = (_a) => {
var { name } = _a, props = __rest(_a, ["name"]);
const IconComponent = icons_1.iconsMap[name];
return IconComponent ? ((0, jsx_runtime_1.jsx)(IconComponent, Object.assign({ width: "24", height: "24", viewBox: "0 0 24 24", "data-testid": `icon:${name}` }, props))) : null;
};
exports.Icon = Icon;
const getInteractiveIconName = (name) => {
const nameArr = name.split('/');
return nameArr[nameArr.length - 1];
};
const StyleOverrideButton = (0, styled_components_1.default)(button_1.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 ((0, jsx_runtime_1.jsx)(StyleOverrideButton, Object.assign({}, handlers, { variation: variation, "data-testid": "interactive-icon", "aria-label": buttonAriaLabel || `${getInteractiveIconName(nonHandlers.name)} icon button` }, { children: (0, jsx_runtime_1.jsx)(exports.Icon, Object.assign({}, nonHandlers)) })));
};
exports.InteractiveIcon = (0, styled_components_1.default)(InteractiveIconInternal).withConfig({ displayName: "brc-sc-InteractiveIcon", componentId: "brc-sc-p8eqir" }) ``;
exports.default = (0, styled_components_1.default)(exports.Icon).withConfig({ componentId: "brc-sc-14pb1u5" }) ``;
//# sourceMappingURL=icon.js.map