@navinc/base-react-components
Version:
Nav's Pattern Library
62 lines • 3.41 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 react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const icons_1 = require("./icons");
const utils_1 = require("@navinc/utils");
const no_style_button_1 = require("./no-style-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)];
};
// Icon used to use Suspense to lazy load icons. It was removed to fix storybook using TS. Since then, we've started
// exporting icons/index.ts's iconList from src/index.ts (this is used in nav-blocks), which eliminates the benefit of
// lazy loading until we setup tree-shaking
const BaseIcon = (_a) => {
var { name, size = '24' } = _a, props = __rest(_a, ["name", "size"]);
const IconComponent = icons_1.iconsMap[name];
return IconComponent ? ((0, jsx_runtime_1.jsx)(IconComponent, Object.assign({ width: size, height: size, viewBox: "0 0 24 24", "data-testid": `icon:${name}` }, props))) : null;
};
exports.Icon = (0, styled_components_1.default)(BaseIcon).withConfig({ displayName: "brc-sc-Icon", componentId: "brc-sc-88ll9i" }) ``;
const NoStyleOrOutlineButton = (0, styled_components_1.default)(no_style_button_1.NoStyleButton).withConfig({ displayName: "brc-sc-NoStyleOrOutlineButton", componentId: "brc-sc-smf4to" }) `
cursor: inherit;
outline: inherit;
`;
/** Pass all event handler props to a wrapper button to avoid rerendering the icon and causing flicker */
const InteractiveIconInternal = (props) => {
(0, react_1.useEffect)(() => (0, utils_1.deprecationWarning)(true, `The \`InteractiveIcon\` component from Base React Component is deprecated and support will be removed in a future version. Please use \`IconButton\` instead.`), []);
const [handlers, nonHandlers] = partitionHandlerProps(props);
return ((0, jsx_runtime_1.jsx)(NoStyleOrOutlineButton, Object.assign({}, handlers, { children: (0, jsx_runtime_1.jsx)(BaseIcon, Object.assign({}, nonHandlers)) })));
};
exports.InteractiveIcon = (0, styled_components_1.default)(InteractiveIconInternal).withConfig({ displayName: "brc-sc-InteractiveIcon", componentId: "brc-sc-o7wmj4" }) ``;
//# sourceMappingURL=icon.js.map