From 8493d5ac2442e53240c17f3662a201320c2aba70 Mon Sep 17 00:00:00 2001 From: dengfuping Date: Wed, 18 Oct 2023 10:03:00 +0800 Subject: [PATCH] chore(icons): Update code format from @oceanbase/icons-svg --- packages/icons/src/components/AntdIcon.tsx | 140 ++++++------- packages/icons/src/components/Icon.tsx | 188 +++++++++--------- packages/icons/src/components/IconBase.tsx | 49 ++--- packages/icons/src/components/IconFont.tsx | 127 ++++++------ .../src/components/twoTonePrimaryColor.ts | 20 +- packages/icons/src/components/utils.ts | 34 ++-- packages/icons/src/types.ts | 13 +- 7 files changed, 260 insertions(+), 311 deletions(-) diff --git a/packages/icons/src/components/AntdIcon.tsx b/packages/icons/src/components/AntdIcon.tsx index 2998316fb..50eab110a 100644 --- a/packages/icons/src/components/AntdIcon.tsx +++ b/packages/icons/src/components/AntdIcon.tsx @@ -5,19 +5,15 @@ import { IconDefinition } from '../types'; import { IconBaseProps } from './Icon'; import ReactIcon from './IconBase'; -import { - getTwoToneColor, - TwoToneColor, - setTwoToneColor, -} from './twoTonePrimaryColor'; +import { getTwoToneColor, TwoToneColor, setTwoToneColor } from './twoTonePrimaryColor'; import { normalizeTwoToneColors } from './utils'; export interface AntdIconProps extends IconBaseProps { - twoToneColor?: TwoToneColor; + twoToneColor?: TwoToneColor; } export interface IconComponentProps extends AntdIconProps { - icon: IconDefinition; + icon: IconDefinition; } // Initial setting @@ -26,76 +22,70 @@ setTwoToneColor('#1890ff'); // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34757#issuecomment-488848720 interface IconBaseComponent - extends React.ForwardRefExoticComponent< - Props & React.RefAttributes - > { - getTwoToneColor: typeof getTwoToneColor; - setTwoToneColor: typeof setTwoToneColor; + extends React.ForwardRefExoticComponent> { + getTwoToneColor: typeof getTwoToneColor; + setTwoToneColor: typeof setTwoToneColor; } -const Icon = React.forwardRef( - (props, ref) => { - const { - // affect outter ... - className, - - // affect inner ... - icon, - spin, - rotate, - - tabIndex, - onClick, - - // other - twoToneColor, - - ...restProps - } = props; - - const classString = classNames( - 'anticon', - { [`anticon-${icon.name}`]: Boolean(icon.name) }, - { 'anticon-spin': !!spin || icon.name === 'loading' }, - className, - ); - - let iconTabIndex = tabIndex; - if (iconTabIndex === undefined && onClick) { - iconTabIndex = -1; - } - - const svgStyle = rotate - ? { - msTransform: `rotate(${rotate}deg)`, - transform: `rotate(${rotate}deg)`, - } - : undefined; - - const [primaryColor, secondaryColor] = normalizeTwoToneColors( - twoToneColor, - ); - - return ( - - - - ); - }, -) as IconBaseComponent; +const Icon = React.forwardRef((props, ref) => { + const { + // affect outter ... + className, + + // affect inner ... + icon, + spin, + rotate, + + tabIndex, + onClick, + + // other + twoToneColor, + + ...restProps + } = props; + + const classString = classNames( + 'anticon', + { [`anticon-${icon.name}`]: Boolean(icon.name) }, + { 'anticon-spin': !!spin || icon.name === 'loading' }, + className + ); + + let iconTabIndex = tabIndex; + if (iconTabIndex === undefined && onClick) { + iconTabIndex = -1; + } + + const svgStyle = rotate + ? { + msTransform: `rotate(${rotate}deg)`, + transform: `rotate(${rotate}deg)`, + } + : undefined; + + const [primaryColor, secondaryColor] = normalizeTwoToneColors(twoToneColor); + + return ( + + + + ); +}) as IconBaseComponent; Icon.displayName = 'AntdIcon'; Icon.getTwoToneColor = getTwoToneColor; diff --git a/packages/icons/src/components/Icon.tsx b/packages/icons/src/components/Icon.tsx index d0db06693..393f3cc6d 100644 --- a/packages/icons/src/components/Icon.tsx +++ b/packages/icons/src/components/Icon.tsx @@ -1,7 +1,7 @@ -import * as React from "react"; -import classNames from "classnames"; +import * as React from 'react'; +import classNames from 'classnames'; -import { warning, svgBaseProps } from "./utils"; +import { warning, svgBaseProps } from './utils'; export interface IconBaseProps extends React.HTMLProps { spin?: boolean; @@ -19,113 +19,109 @@ export interface CustomIconComponentProps { export interface IconComponentProps extends IconBaseProps { viewBox?: string; - component?: React.ComponentType< - CustomIconComponentProps | React.SVGProps - >; - ariaLabel?: React.AriaAttributes["aria-label"]; + component?: React.ComponentType>; + ariaLabel?: React.AriaAttributes['aria-label']; } -const Icon = React.forwardRef( - (props, ref) => { - const { - // affect outter ... - className, +const Icon = React.forwardRef((props, ref) => { + const { + // affect outter ... + className, - // affect inner ... - component: Component, - viewBox, - spin, - rotate, + // affect inner ... + component: Component, + viewBox, + spin, + rotate, - tabIndex, - onClick, + tabIndex, + onClick, - // children - children, - ...restProps - } = props; + // children + children, + ...restProps + } = props; - if (!!Component || !!children) { - console.error("Should have `component` prop or `children`."); - } - // warning( - // Boolean(Component || children), - // 'Should have `component` prop or `children`.', - // ); - - // useInsertStyles(); - - const classString = classNames("anticon", className); - - const svgClassString = classNames({ - "anticon-spin": !!spin, - }); - - const svgStyle = rotate - ? { - msTransform: `rotate(${rotate}deg)`, - transform: `rotate(${rotate}deg)`, - } - : undefined; - - const innerSvgProps: CustomIconComponentProps = { - ...svgBaseProps, - className: svgClassString, - style: svgStyle, - viewBox, - }; - - if (!viewBox) { - delete innerSvgProps.viewBox; - } + if (!!Component || !!children) { + console.error('Should have `component` prop or `children`.'); + } + // warning( + // Boolean(Component || children), + // 'Should have `component` prop or `children`.', + // ); - // component > children - const renderInnerNode = () => { - if (Component) { - // @ts-ignore - return {children}; - } + // useInsertStyles(); + + const classString = classNames('anticon', className); + + const svgClassString = classNames({ + 'anticon-spin': !!spin, + }); - if (children) { - warning( - Boolean(viewBox) || - (React.Children.count(children) === 1 && - React.isValidElement(children) && - React.Children.only(children).type === "use"), - "Make sure that you provide correct `viewBox`" + - " prop (default `0 0 1024 1024`) to the icon." - ); - - return ( - - {children} - - ); + const svgStyle = rotate + ? { + msTransform: `rotate(${rotate}deg)`, + transform: `rotate(${rotate}deg)`, } + : undefined; - return null; - }; + const innerSvgProps: CustomIconComponentProps = { + ...svgBaseProps, + className: svgClassString, + style: svgStyle, + viewBox, + }; - let iconTabIndex = tabIndex; - if (iconTabIndex === undefined && onClick) { - iconTabIndex = -1; + if (!viewBox) { + delete innerSvgProps.viewBox; + } + + // component > children + const renderInnerNode = () => { + if (Component) { + // @ts-ignore + return {children}; } - return ( - - {renderInnerNode()} - - ); + if (children) { + warning( + Boolean(viewBox) || + (React.Children.count(children) === 1 && + React.isValidElement(children) && + React.Children.only(children).type === 'use'), + 'Make sure that you provide correct `viewBox`' + + ' prop (default `0 0 1024 1024`) to the icon.' + ); + + return ( + + {children} + + ); + } + + return null; + }; + + let iconTabIndex = tabIndex; + if (iconTabIndex === undefined && onClick) { + iconTabIndex = -1; } -); -Icon.displayName = "AntdIcon"; + return ( + + {renderInnerNode()} + + ); +}); + +Icon.displayName = 'AntdIcon'; export default Icon; diff --git a/packages/icons/src/components/IconBase.tsx b/packages/icons/src/components/IconBase.tsx index 35ff5d113..527087929 100644 --- a/packages/icons/src/components/IconBase.tsx +++ b/packages/icons/src/components/IconBase.tsx @@ -1,12 +1,12 @@ -import * as React from "react"; -import { AbstractNode, IconDefinition } from "../types"; +import * as React from 'react'; +import { AbstractNode, IconDefinition } from '../types'; import { generate, getSecondaryColor, isIconDefinition, warning, // useInsertStyles, -} from "./utils"; +} from './utils'; export interface IconProps { icon: IconDefinition; @@ -28,18 +28,14 @@ export interface TwoToneColorPalette extends TwoToneColorPaletteSetter { } const twoToneColorPalette: TwoToneColorPalette = { - primaryColor: "#333", - secondaryColor: "#E6E6E6", + primaryColor: '#333', + secondaryColor: '#E6E6E6', calculated: false, }; -function setTwoToneColors({ - primaryColor, - secondaryColor, -}: TwoToneColorPaletteSetter) { +function setTwoToneColors({ primaryColor, secondaryColor }: TwoToneColorPaletteSetter) { twoToneColorPalette.primaryColor = primaryColor; - twoToneColorPalette.secondaryColor = - secondaryColor || getSecondaryColor(primaryColor); + twoToneColorPalette.secondaryColor = secondaryColor || getSecondaryColor(primaryColor); twoToneColorPalette.calculated = !!secondaryColor; } @@ -54,16 +50,8 @@ interface IconBaseComponent

extends React.FC

{ setTwoToneColors: typeof setTwoToneColors; } -const IconBase: IconBaseComponent = (props) => { - const { - icon, - className, - onClick, - style, - primaryColor, - secondaryColor, - ...restProps - } = props; +const IconBase: IconBaseComponent = props => { + const { icon, className, onClick, style, primaryColor, secondaryColor, ...restProps } = props; let colors: TwoToneColorPalette = twoToneColorPalette; if (primaryColor) { @@ -75,17 +63,14 @@ const IconBase: IconBaseComponent = (props) => { // useInsertStyles(); - warning( - isIconDefinition(icon), - `icon should be icon definiton, but got ${icon}` - ); + warning(isIconDefinition(icon), `icon should be icon definiton, but got ${icon}`); if (!isIconDefinition(icon)) { return null; } let target = icon; - if (target && typeof target.icon === "function") { + if (target && typeof target.icon === 'function') { target = { ...target, icon: target.icon(colors.primaryColor, colors.secondaryColor), @@ -95,16 +80,16 @@ const IconBase: IconBaseComponent = (props) => { className, onClick, style, - "data-icon": target.name, - width: "1em", - height: "1em", - fill: "currentColor", - "aria-hidden": "true", + 'data-icon': target.name, + width: '1em', + height: '1em', + fill: 'currentColor', + 'aria-hidden': 'true', ...restProps, }); }; -IconBase.displayName = "IconReact"; +IconBase.displayName = 'IconReact'; IconBase.getTwoToneColors = getTwoToneColors; IconBase.setTwoToneColors = setTwoToneColors; diff --git a/packages/icons/src/components/IconFont.tsx b/packages/icons/src/components/IconFont.tsx index 4ca89cea5..df15deb6b 100644 --- a/packages/icons/src/components/IconFont.tsx +++ b/packages/icons/src/components/IconFont.tsx @@ -4,91 +4,80 @@ import Icon, { IconBaseProps } from './Icon'; const customCache = new Set(); export interface CustomIconOptions { - scriptUrl?: string | string[]; - extraCommonProps?: { [key: string]: any }; + scriptUrl?: string | string[]; + extraCommonProps?: { [key: string]: any }; } export interface IconFontProps extends IconBaseProps { - type: string; + type: string; } function isValidCustomScriptUrl(scriptUrl: string): boolean { - return Boolean( - typeof scriptUrl === 'string' && - scriptUrl.length && - !customCache.has(scriptUrl), - ); + return Boolean(typeof scriptUrl === 'string' && scriptUrl.length && !customCache.has(scriptUrl)); } -function createScriptUrlElements( - scriptUrls: string[], - index: number = 0, -): void { - const currentScriptUrl = scriptUrls[index]; - if (isValidCustomScriptUrl(currentScriptUrl)) { - const script = document.createElement('script'); - script.setAttribute('src', currentScriptUrl); - script.setAttribute('data-namespace', currentScriptUrl); - if (scriptUrls.length > index + 1) { - script.onload = () => { - createScriptUrlElements(scriptUrls, index + 1); - }; - script.onerror = () => { - createScriptUrlElements(scriptUrls, index + 1); - }; - } - customCache.add(currentScriptUrl); - document.body.appendChild(script); +function createScriptUrlElements(scriptUrls: string[], index: number = 0): void { + const currentScriptUrl = scriptUrls[index]; + if (isValidCustomScriptUrl(currentScriptUrl)) { + const script = document.createElement('script'); + script.setAttribute('src', currentScriptUrl); + script.setAttribute('data-namespace', currentScriptUrl); + if (scriptUrls.length > index + 1) { + script.onload = () => { + createScriptUrlElements(scriptUrls, index + 1); + }; + script.onerror = () => { + createScriptUrlElements(scriptUrls, index + 1); + }; } + customCache.add(currentScriptUrl); + document.body.appendChild(script); + } } -export default function create( - options: CustomIconOptions = {}, -): React.FC { - const { scriptUrl, extraCommonProps = {} } = options; +export default function create(options: CustomIconOptions = {}): React.FC { + const { scriptUrl, extraCommonProps = {} } = options; - /** - * DOM API required. - * Make sure in browser environment. - * The Custom Icon will create a