143 lines
3.7 KiB
JavaScript
143 lines
3.7 KiB
JavaScript
import { generate as generateColor } from '@ant-design/colors';
|
|
import { updateCSS } from "@rc-component/util/es/Dom/dynamicCSS";
|
|
import { getShadowRoot } from "@rc-component/util/es/Dom/shadow";
|
|
import { warningOnce } from "@rc-component/util/es/warning";
|
|
import React, { useContext, useEffect } from 'react';
|
|
import IconContext from "./components/Context";
|
|
function camelCase(input) {
|
|
return input.replace(/-(.)/g, (match, g) => g.toUpperCase());
|
|
}
|
|
export function warning(valid, message) {
|
|
warningOnce(valid, `[@ant-design/icons] ${message}`);
|
|
}
|
|
export function isIconDefinition(target) {
|
|
return typeof target === 'object' && typeof target.name === 'string' && typeof target.theme === 'string' && (typeof target.icon === 'object' || typeof target.icon === 'function');
|
|
}
|
|
export function normalizeAttrs(attrs = {}) {
|
|
return Object.keys(attrs).reduce((acc, key) => {
|
|
const val = attrs[key];
|
|
switch (key) {
|
|
case 'class':
|
|
acc.className = val;
|
|
delete acc.class;
|
|
break;
|
|
default:
|
|
delete acc[key];
|
|
acc[camelCase(key)] = val;
|
|
}
|
|
return acc;
|
|
}, {});
|
|
}
|
|
export function generate(node, key, rootProps) {
|
|
if (!rootProps) {
|
|
return /*#__PURE__*/React.createElement(node.tag, {
|
|
key,
|
|
...normalizeAttrs(node.attrs)
|
|
}, (node.children || []).map((child, index) => generate(child, `${key}-${node.tag}-${index}`)));
|
|
}
|
|
return /*#__PURE__*/React.createElement(node.tag, {
|
|
key,
|
|
...normalizeAttrs(node.attrs),
|
|
...rootProps
|
|
}, (node.children || []).map((child, index) => generate(child, `${key}-${node.tag}-${index}`)));
|
|
}
|
|
export function getSecondaryColor(primaryColor) {
|
|
// choose the second color
|
|
return generateColor(primaryColor)[0];
|
|
}
|
|
export function normalizeTwoToneColors(twoToneColor) {
|
|
if (!twoToneColor) {
|
|
return [];
|
|
}
|
|
return Array.isArray(twoToneColor) ? twoToneColor : [twoToneColor];
|
|
}
|
|
|
|
// These props make sure that the SVG behaviours like general text.
|
|
// Reference: https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
|
|
export const svgBaseProps = {
|
|
width: '1em',
|
|
height: '1em',
|
|
fill: 'currentColor',
|
|
'aria-hidden': 'true',
|
|
focusable: 'false'
|
|
};
|
|
export const iconStyles = `
|
|
.anticon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: inherit;
|
|
font-style: normal;
|
|
line-height: 0;
|
|
text-align: center;
|
|
text-transform: none;
|
|
vertical-align: -0.125em;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.anticon > * {
|
|
line-height: 1;
|
|
}
|
|
|
|
.anticon svg {
|
|
display: inline-block;
|
|
vertical-align: inherit;
|
|
}
|
|
|
|
.anticon::before {
|
|
display: none;
|
|
}
|
|
|
|
.anticon .anticon-icon {
|
|
display: block;
|
|
}
|
|
|
|
.anticon[tabindex] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.anticon-spin::before,
|
|
.anticon-spin {
|
|
display: inline-block;
|
|
-webkit-animation: loadingCircle 1s infinite linear;
|
|
animation: loadingCircle 1s infinite linear;
|
|
}
|
|
|
|
@-webkit-keyframes loadingCircle {
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes loadingCircle {
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
`;
|
|
export const useInsertStyles = eleRef => {
|
|
const {
|
|
csp,
|
|
prefixCls,
|
|
layer
|
|
} = useContext(IconContext);
|
|
let mergedStyleStr = iconStyles;
|
|
if (prefixCls) {
|
|
mergedStyleStr = mergedStyleStr.replace(/anticon/g, prefixCls);
|
|
}
|
|
if (layer) {
|
|
mergedStyleStr = `@layer ${layer} {\n${mergedStyleStr}\n}`;
|
|
}
|
|
useEffect(() => {
|
|
const ele = eleRef.current;
|
|
const shadowRoot = getShadowRoot(ele);
|
|
updateCSS(mergedStyleStr, '@ant-design-icons', {
|
|
prepend: !layer,
|
|
csp,
|
|
attachTo: shadowRoot
|
|
});
|
|
}, []);
|
|
}; |