✨ feat(icon): add Icon spin prop and ActionIcon loading state

.changelogrc.js

@@ -1 +1 @@
-module.exports = require('@lobehub/lint/dist/commitlint');
+module.exports = require('@lobehub/lint/dist/changelog');

.eslintignore

@@ -1,16 +1,28 @@
-/lambda/mock/**
-/scripts
-/config
-/example
+# Eslintignore for LobeHub
+################################################################
+
+# dependencies
+node_modules
+
+# ci
+.coverage
+
+# test
+jest*
 _test_
 __test__
 
-/node_modules
-**/node_modules
+# umi
+.umi
+.umi-production
+.umi-test
+.dumi/tmp*
 
-jest*
-/es
-/lib
-/docs
-/dist
-**/dist
+# production
+dist
+es
+lib
+logs
+
+# misc
+# add other ignore file below

.gitignore

@@ -1,44 +1,43 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Gitignore for LobeHub
+################################################################
 
-# dependencies
-**/node_modules
-# roadhog-api-doc ignore
-/src/utils/request-temp.js
-_roadhog-api-doc
-
-# production
-**/dist
-/.vscode
-/es
-/lib
-
-# misc
+# general
 .DS_Store
-storybook-static
-npm-debug.log*
-yarn-error.log
-
-/coverage
 .idea
-package-lock.json
-*bak
 .vscode
-
-# visual studio code
 .history
+.temp
+.env.local
+venv
+temp
+tmp
+
+# dependencies
+node_modules
 *.log
-functions/*
-lambda/mock/index.js
-.temp/**
+*.lock
+package-lock.json
+
+# ci
+.coverage
+.eslintcache
+.stylelintcache
+
+# production
+dist
+es
+lib
+logs
+test-output
 
 # umi
+.umi
+.umi-production
+.umi-test
 .dumi/tmp*
 
-# screenshot
-screenshot
-.firebase
-example/.temp/*
-.eslintcache
-techUI*
+# husky
 .husky/prepare-commit-msg
-server
+
+# misc
+# add other ignore file below

.npmrc

@@ -1,10 +1,11 @@
 lockfile=false
 resolution-mode=highest
 public-hoist-pattern[]=*@umijs/lint*
-public-hoist-pattern[]=*remark*
-public-hoist-pattern[]=*eslint*
-public-hoist-pattern[]=*stylelint*
-public-hoist-pattern[]=*prettier*
+public-hoist-pattern[]=*changelog*
 public-hoist-pattern[]=*commitlint*
+public-hoist-pattern[]=*eslint*
 public-hoist-pattern[]=*postcss*
-public-hoist-pattern[]=*semantic-release*
+public-hoist-pattern[]=*prettier*
+public-hoist-pattern[]=*remark*
+public-hoist-pattern[]=*semantic-release*
+public-hoist-pattern[]=*stylelint*

.prettierignore

@@ -1,20 +1,57 @@
-**/*.svg
-.umi
-.umi-production
-.idea
-.husky
-/dist
-.dockerignore
+# Prettierignore for LobeHub
+################################################################
+
+# general
 .DS_Store
-.eslintignore
-*.png
-*.toml
-docker
 .editorconfig
-Dockerfile*
-.gitignore
-.prettierignore
+.idea
+.vscode
+.history
+.temp
+.env.local
+.husky
+.npmrc
+venv
+temp
+tmp
 LICENSE
-.eslintcache
+
+# dependencies
+node_modules
+*.log
 *.lock
-yarn-error.log
+package-lock.json
+
+# ci
+.coverage
+.eslintcache
+.stylelintcache
+test-output
+
+# production
+dist
+es
+lib
+logs
+
+# umi
+.umi
+.umi-production
+.umi-test
+.dumi/tmp*
+
+# ignore files
+.*ignore
+
+# docker
+docker
+Dockerfile*
+
+# image
+*.webp
+*.gif
+*.png
+*.jpg
+
+# misc
+# add other ignore file below

packages/dumi-theme-lobehub/src/types/index.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { type HTMLAttributes } from 'react';
 
 export * from './apiHeader';
 export * from './config';
@@ -23,24 +23,12 @@ export interface AnchorItem {
   title: string;
 }
 
-export type DivProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
->;
+export type DivProps = HTMLAttributes<HTMLDivElement>;
 
-export type SvgProps = React.DetailedHTMLProps<React.HTMLAttributes<SVGSVGElement>, SVGSVGElement>;
+export type SvgProps = HTMLAttributes<SVGSVGElement>;
 
-export type ImgProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLImageElement>,
-  HTMLImageElement
->;
+export type ImgProps = HTMLAttributes<HTMLImageElement>;
 
-export type InputProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
->;
+export type InputProps = HTMLAttributes<HTMLInputElement>;
 
-export type TextAreaProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLTextAreaElement>,
-  HTMLTextAreaElement
->;
+export type TextAreaProps = HTMLAttributes<HTMLTextAreaElement>;

src/ActionIcon/demos/index.tsx

@@ -37,6 +37,7 @@ export default () => {
           ],
         },
         spotlight: false,
+        loading: false,
       }),
     },
     { store },

src/ActionIcon/index.tsx

@@ -1,4 +1,4 @@
-import { LucideIcon } from 'lucide-react';
+import { Loader2, LucideIcon } from 'lucide-react';
 import { memo } from 'react';
 
 import { Icon, Spotlight, Tooltip, TooltipProps } from '@/index';
@@ -38,7 +38,11 @@ export interface ActionIconProps extends DivProps {
    * @description The icon element to be rendered
    * @type LucideIcon
    */
-  icon: LucideIcon;
+  icon?: LucideIcon;
+  /**
+   * @description Set the loading status of ActionIcon
+   */
+  loading?: boolean;
   /**
    * @description Handle click action
    */
@@ -49,12 +53,12 @@ export interface ActionIconProps extends DivProps {
    * @default "top"
    */
   placement?: TooltipProps['placement'];
+
   /**
    * @description Size of the icon
    * @default 'normal'
    */
   size?: ActionIconSize;
-
   /**
    * @description Whether add spotlight background
    * @default false
@@ -79,6 +83,8 @@ const ActionIcon = memo<ActionIconProps>(
     arrow = false,
     spotlight,
     onClick,
+    children,
+    loading,
     ...props
   }) => {
     const { styles, cx } = useStyles({ active: Boolean(active), glass: Boolean(glass) });
@@ -108,15 +114,24 @@ const ActionIcon = memo<ActionIconProps>(
         break;
     }
 
+    const content = (
+      <>
+        {icon && <Icon icon={icon} size={size === 'site' ? 'normal' : size} />}
+        {children}
+      </>
+    );
+
+    const spin = <Icon icon={Loader2} size={size === 'site' ? 'normal' : size} spin />;
+
     const actionIconBlock = (
       <div
         className={cx(styles.block, className)}
-        onClick={onClick}
+        onClick={loading ? undefined : onClick}
         style={{ width: blockSize, height: blockSize, borderRadius, ...style }}
         {...props}
       >
         {spotlight && <Spotlight />}
-        <Icon icon={icon} size={size === 'site' ? 'normal' : size} />
+        {loading ? spin : content}
       </div>
     );
 

src/Icon/demos/index.tsx

@@ -13,6 +13,7 @@ export default () => {
         value: LucideIcon.Settings,
         options: LucideIcon,
       },
+      spin: false,
     },
     { store },
   );

src/Icon/index.tsx

@@ -1,7 +1,9 @@
 import { LucideIcon } from 'lucide-react';
-import { FC, memo } from 'react';
+import { memo } from 'react';
 
-import { SvgProps } from '@/types';
+import { DivProps } from '@/types';
+
+import { useStyles } from './style';
 
 export type IconSize =
   | 'large'
@@ -12,7 +14,7 @@ export type IconSize =
       strokeWidth?: number;
     };
 
-export interface IconProps extends SvgProps {
+export interface IconProps extends DivProps {
   /**
    * @description The icon element to be rendered
    * @type LucideIcon
@@ -23,12 +25,19 @@ export interface IconProps extends SvgProps {
    * @default 'normal'
    */
   size?: IconSize;
+  /**
+   * @description Rotate icon with animation
+   * @default false
+   */
+  spin?: boolean;
 }
 
-const Icon: FC<IconProps> = ({ icon, size, ...props }) => {
+const Icon = memo<IconProps>(({ icon, size, style, className, spin, ...props }) => {
+  const { styles, cx } = useStyles();
+  const SvgIcon = icon;
+
   let fontSize: number | string;
   let strokeWidth: number;
-  const SvgIcon = icon;
 
   switch (size) {
     case 'large':
@@ -55,7 +64,15 @@ const Icon: FC<IconProps> = ({ icon, size, ...props }) => {
       break;
   }
 
-  return <SvgIcon size={fontSize} strokeWidth={strokeWidth} {...props} />;
-};
+  return (
+    <div
+      className={cx(spin && styles.spin, className)}
+      style={{ width: fontSize, height: fontSize, ...style }}
+      {...props}
+    >
+      <SvgIcon size={fontSize} strokeWidth={strokeWidth} />
+    </div>
+  );
+});
 
-export default memo(Icon);
+export default Icon;