@wener/ui
Version:
55 lines (54 loc) • 3.31 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.antdAll = exports.dynamicLoadAll = exports.dynamicLoadManifest = exports.dynamicLoadWithSpin = void 0;
const react_1 = __importDefault(require("react"));
const addon_knobs_1 = require("@storybook/addon-knobs");
const DynamicIcon_1 = require("./DynamicIcon");
const react_lazyload_1 = __importDefault(require("react-lazyload"));
const styled_components_1 = __importDefault(require("styled-components"));
const antdIconsDynamicResolver_1 = require("./antdIconsDynamicResolver");
const antdIconsResolverTypes_1 = require("./antdIconsResolverTypes");
const iconsResolverTypes_1 = require("./iconsResolverTypes");
const iconsResolver_1 = require("./iconsResolver");
exports.default = {
title: 'icons/DynamicIcon',
component: DynamicIcon_1.DynamicIcon,
decorators: [(storyFn) => react_1.default.createElement("div", { style: { backgroundColor: 'white', padding: 100 } }, storyFn())],
};
DynamicIcon_1.DynamicIcon.resolvers.push(iconsResolver_1.iconsResolver, antdIconsDynamicResolver_1.antdIconsDynamicResolver);
exports.dynamicLoadWithSpin = () => react_1.default.createElement(DynamicIcon_1.DynamicIcon, { style: { fontSize: 32 }, type: 'BarcodePrintOutlined', spin: true });
exports.dynamicLoadManifest = () => {
return (react_1.default.createElement(DynamicIcon_1.DynamicIcon, { style: { fontSize: 32 }, type: addon_knobs_1.select('type', iconsResolverTypes_1.iconsResolverTypes, 'BarcodePrintOutlined'), spin: addon_knobs_1.boolean('spin', false) }));
};
const IconsContainer = styled_components_1.default.div `
display: grid;
grid-template-columns: repeat(4, 1fr);
figure {
display: flex;
align-items: center;
flex-flow: column;
figcaption {
font-size: 0.8rem;
color: grey;
}
}
`;
exports.dynamicLoadAll = () => {
const fontColor = addon_knobs_1.color('color', '#F4511E');
const fontSize = addon_knobs_1.number('size', 32, { range: true, max: 64, step: 1, min: 16 });
return (react_1.default.createElement(IconsContainer, { style: { color: fontColor } }, iconsResolverTypes_1.iconsResolverTypes.map((v) => (react_1.default.createElement("figure", { key: v },
react_1.default.createElement(DynamicIcon_1.DynamicIcon, { type: v, style: { fontSize } }),
react_1.default.createElement("figcaption", null, v))))));
};
exports.antdAll = () => {
const fontColor = addon_knobs_1.color('color', '#F4511E');
const fontSize = addon_knobs_1.number('size', 32, { range: true, max: 64, step: 1, min: 16 });
return (react_1.default.createElement(IconsContainer, { style: { color: fontColor } }, antdIconsResolverTypes_1.antdIconsResolverTypes.map((v) => (react_1.default.createElement("figure", { key: v },
react_1.default.createElement(react_lazyload_1.default, { overflow: true, height: 64, scrollContainer: document.querySelector('#root > div > div') || undefined },
react_1.default.createElement(DynamicIcon_1.DynamicIcon, { type: v, style: { fontSize } })),
react_1.default.createElement("figcaption", null, v))))));
};
//# sourceMappingURL=DynamicIcon.stories.js.map