Merge pull request #188 from oceanbase/dengfuping-icons

chore(icons): Update code format from @oceanbase/icons-svg
oceanbase · Oct 18, 2023 · 3104e82 · 3104e82
2 parents d182b21 + e43dc9e
commit 3104e82
Show file tree

Hide file tree

Showing 7 changed files with 260 additions and 311 deletions.
diff --git 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<Props>
-    extends React.ForwardRefExoticComponent<
-        Props & React.RefAttributes<HTMLSpanElement>
-    > {
-    getTwoToneColor: typeof getTwoToneColor;
-    setTwoToneColor: typeof setTwoToneColor;
+  extends React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLSpanElement>> {
+  getTwoToneColor: typeof getTwoToneColor;
+  setTwoToneColor: typeof setTwoToneColor;
 }
 
-const Icon = React.forwardRef<HTMLSpanElement, IconComponentProps>(
-    (props, ref) => {
-        const {
-            // affect outter <i>...</i>
-            className,
-
-            // affect inner <svg>...</svg>
-            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 (
-            <span
-                role="img"
-                aria-label={icon.name}
-                {...restProps}
-                ref={ref}
-                tabIndex={iconTabIndex}
-                onClick={onClick}
-                className={classString}
-            >
-                <ReactIcon
-                    icon={icon}
-                    primaryColor={primaryColor}
-                    secondaryColor={secondaryColor}
-                    style={svgStyle}
-                />
-            </span>
-        );
-    },
-) as IconBaseComponent<IconComponentProps>;
+const Icon = React.forwardRef<HTMLSpanElement, IconComponentProps>((props, ref) => {
+  const {
+    // affect outter <i>...</i>
+    className,
+
+    // affect inner <svg>...</svg>
+    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 (
+    <span
+      role="img"
+      aria-label={icon.name}
+      {...restProps}
+      ref={ref}
+      tabIndex={iconTabIndex}
+      onClick={onClick}
+      className={classString}
+    >
+      <ReactIcon
+        icon={icon}
+        primaryColor={primaryColor}
+        secondaryColor={secondaryColor}
+        style={svgStyle}
+      />
+    </span>
+  );
+}) as IconBaseComponent<IconComponentProps>;
 
 Icon.displayName = 'AntdIcon';
 Icon.getTwoToneColor = getTwoToneColor;

diff --git 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<HTMLSpanElement> {
   spin?: boolean;
@@ -19,113 +19,109 @@ export interface CustomIconComponentProps {
 
 export interface IconComponentProps extends IconBaseProps {
   viewBox?: string;
-  component?: React.ComponentType<
-    CustomIconComponentProps | React.SVGProps<SVGSVGElement>
-  >;
-  ariaLabel?: React.AriaAttributes["aria-label"];
+  component?: React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>;
+  ariaLabel?: React.AriaAttributes['aria-label'];
 }
 
-const Icon = React.forwardRef<HTMLSpanElement, IconComponentProps>(
-  (props, ref) => {
-    const {
-      // affect outter <i>...</i>
-      className,
+const Icon = React.forwardRef<HTMLSpanElement, IconComponentProps>((props, ref) => {
+  const {
+    // affect outter <i>...</i>
+    className,
 
-      // affect inner <svg>...</svg>
-      component: Component,
-      viewBox,
-      spin,
-      rotate,
+    // affect inner <svg>...</svg>
+    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 <Component {...innerSvgProps}>{children}</Component>;
-      }
+  // 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 (
-          <svg {...innerSvgProps} viewBox={viewBox}>
-            {children}
-          </svg>
-        );
+  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 <Component {...innerSvgProps}>{children}</Component>;
     }
 
-    return (
-      <span
-        role="img"
-        {...restProps}
-        ref={ref}
-        tabIndex={iconTabIndex}
-        onClick={onClick}
-        className={classString}
-      >
-        {renderInnerNode()}
-      </span>
-    );
+    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 (
+        <svg {...innerSvgProps} viewBox={viewBox}>
+          {children}
+        </svg>
+      );
+    }
+
+    return null;
+  };
+
+  let iconTabIndex = tabIndex;
+  if (iconTabIndex === undefined && onClick) {
+    iconTabIndex = -1;
   }
-);
 
-Icon.displayName = "AntdIcon";
+  return (
+    <span
+      role="img"
+      {...restProps}
+      ref={ref}
+      tabIndex={iconTabIndex}
+      onClick={onClick}
+      className={classString}
+    >
+      {renderInnerNode()}
+    </span>
+  );
+});
+
+Icon.displayName = 'AntdIcon';
 
 export default Icon;