From e7b7ea23dbb45b1db6af2b7396f19bb8bf648915 Mon Sep 17 00:00:00 2001 From: wangxingkang Date: Fri, 25 Mar 2022 15:04:12 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(react):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/example.tsx | 8 ++- packages/react/package.json | 3 +- packages/react/src/components/Icon.tsx | 4 ++ packages/react/src/components/IconBase.tsx | 3 + packages/react/src/hooks/useInsertStyles.ts | 69 +++++++++++++++++++++ pnpm-lock.yaml | 7 +-- 6 files changed, 86 insertions(+), 8 deletions(-) create mode 100644 packages/react/src/hooks/useInsertStyles.ts diff --git a/docs/components/example.tsx b/docs/components/example.tsx index abf1d98..7994a21 100644 --- a/docs/components/example.tsx +++ b/docs/components/example.tsx @@ -1,7 +1,11 @@ -import { AccountBookFilled } from '@lotus-design/icons'; +import React from 'react'; +import { AccountBookFilled, AccountBookOutlined, } from '@lotus-design/icons'; export default () => { return ( - + <> + + + ) } diff --git a/packages/react/package.json b/packages/react/package.json index 4ca5a1c..0ee3216 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -22,7 +22,8 @@ "dependencies": { "@ant-design/colors": "^6.0.0", "@lotus-design/icons-svg": "^1.0.0", - "@pansy/classnames": "^1.0.1" + "@pansy/classnames": "^1.0.1", + "rc-util": "^5.19.3" }, "author": "", "license": "MIT" diff --git a/packages/react/src/components/Icon.tsx b/packages/react/src/components/Icon.tsx index 84eef67..82e8f32 100644 --- a/packages/react/src/components/Icon.tsx +++ b/packages/react/src/components/Icon.tsx @@ -4,6 +4,8 @@ import classNames from '@pansy/classnames'; import Context from './Context'; import { svgBaseProps } from '../utils'; +import { useInsertStyles } from '../hooks/useInsertStyles'; + export interface IconBaseProps extends React.HTMLProps { spin?: boolean; rotate?: number; @@ -42,6 +44,8 @@ const Icon = React.forwardRef(({ ...restProps }, ref) => { + useInsertStyles(); + const { prefixCls = 'lotus-icon' } = React.useContext(Context); const classString = classNames( diff --git a/packages/react/src/components/IconBase.tsx b/packages/react/src/components/IconBase.tsx index 1605933..170ee6e 100644 --- a/packages/react/src/components/IconBase.tsx +++ b/packages/react/src/components/IconBase.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { AbstractNode, IconDefinition } from '@lotus-design/icons-svg/lib/types'; +import { useInsertStyles } from '../hooks/useInsertStyles'; import { getSecondaryColor, isIconDefinition, generate, } from '../utils'; export interface IconProps extends Partial { @@ -56,6 +57,8 @@ const IconBase: IconBaseComponent = ({ secondaryColor, ...restProps }) => { + useInsertStyles(); + let colors: TwoToneColorPalette = twoToneColorPalette; if (primaryColor) { colors = { diff --git a/packages/react/src/hooks/useInsertStyles.ts b/packages/react/src/hooks/useInsertStyles.ts new file mode 100644 index 0000000..86a1bd9 --- /dev/null +++ b/packages/react/src/hooks/useInsertStyles.ts @@ -0,0 +1,69 @@ +import { useContext, useEffect } from 'react'; +import IconContext from '../components/Context'; +import { updateCSS } from 'rc-util/lib/Dom/dynamicCSS'; + + +export const useInsertStyles = (styleStr?: string) => { + const { csp, prefixCls = 'lotus-icon' } = useContext(IconContext); + + useEffect(() => { + updateCSS(styleStr ?? getIconStyles(prefixCls), 'lotus-design-icons', { + prepend: true, + csp, + }); + }, []); +}; + +function getIconStyles (prefixCls: string) { + return ` + .${prefixCls} { + display: inline-block; + 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; + } + + .${prefixCls} > * { + line-height: 1; + } + + .${prefixCls} svg { + display: inline-block; + } + + .${prefixCls}::before { + display: none; + } + + .${prefixCls}[tabindex] { + cursor: pointer; + } + + .${prefixCls}-spin::before, + .${prefixCls}-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); + } + } + ` +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8e7792f..1a89069 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -68,10 +68,12 @@ importers: '@ant-design/colors': ^6.0.0 '@lotus-design/icons-svg': ^1.0.0 '@pansy/classnames': ^1.0.1 + rc-util: ^5.19.3 dependencies: '@ant-design/colors': 6.0.0 '@lotus-design/icons-svg': link:../core '@pansy/classnames': 1.0.1 + rc-util: 5.19.3 packages: @@ -1403,7 +1405,6 @@ packages: engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.13.5 - dev: true /@babel/template/7.16.7: resolution: {integrity: sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==} @@ -8358,7 +8359,6 @@ packages: '@babel/runtime': 7.17.8 react-is: 16.13.1 shallowequal: 1.1.0 - dev: true /rc-virtual-list/3.4.4: resolution: {integrity: sha512-Zb2h0B+ZhA/aysZNEUkQYaqx0hd8hq7WMIUegII+1KfFjh99GtHZ4ZMWB+SlpdVadskKJZzUWWzIq5N1mE6AVg==} @@ -8398,7 +8398,6 @@ packages: /react-is/16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} - dev: true /react-refresh/0.10.0: resolution: {integrity: sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==} @@ -8589,7 +8588,6 @@ packages: /regenerator-runtime/0.13.5: resolution: {integrity: sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==} - dev: true /regenerator-runtime/0.13.9: resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==} @@ -9017,7 +9015,6 @@ packages: /shallowequal/1.1.0: resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==} - dev: true /shebang-command/1.2.0: resolution: {integrity: sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=}