Feature/spin loading

packages/ui/counter/src/use-counter.ts

@@ -266,17 +266,17 @@ export const useCounter = ({
     }
   }, [
     prefixCls,
+    value,
     minProp,
     maxProp,
-    value,
     inputValue,
     tabIndex,
     autoFocus,
     disabled,
     onInputChange,
+    onInputFocus,
     onInputBlur,
     onInputKeyDown,
-    onInputFocus,
     onInputWheel,
   ])
 

packages/ui/hiui/package.json

@@ -92,6 +92,7 @@
     "@hi-ui/select": "^4.0.6",
     "@hi-ui/slider": "^4.0.5",
     "@hi-ui/space": "^4.0.6",
+    "@hi-ui/spinner": "^4.0.4",
     "@hi-ui/stepper": "^4.0.4",
     "@hi-ui/svg-icon": "^4.0.4",
     "@hi-ui/switch": "^4.0.4",

packages/ui/hiui/src/index.ts

@@ -151,7 +151,8 @@ export { default as Slider } from '@hi-ui/slider'
 export * from '@hi-ui/space'
 export { default as Space } from '@hi-ui/space'
 
-// export * from '@hi-ui/spinner'
+export * from '@hi-ui/spinner'
+export { default as Spinner } from '@hi-ui/spinner'
 
 export * from '@hi-ui/stepper'
 export { default as Stepper } from '@hi-ui/stepper'

packages/ui/loading/src/Loading.tsx

@@ -1,18 +1,10 @@
-import React, {
-  useState,
-  useEffect,
-  useImperativeHandle,
-  useCallback,
-  forwardRef,
-  useRef,
-} from 'react'
-import { debounce } from '@hi-ui/func-utils'
-import type { DebounceReturn } from '@hi-ui/func-utils'
+import React, { useImperativeHandle, forwardRef, ReactNode } from 'react'
 import { CSSTransition } from 'react-transition-group'
 import { cx, getPrefixCls } from '@hi-ui/classname'
 import { __DEV__ } from '@hi-ui/env'
 import { Portal } from '@hi-ui/portal'
 import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core'
+import { useLoading } from './use-loading'
 
 const _role = 'loading'
 export const _prefix = getPrefixCls('loading')
@@ -34,47 +26,12 @@ export const Loading = forwardRef<null, LoadingProps>(
       disabledPortal = false,
       innerRef,
       timeout = 300,
+      indicator,
       ...restProps
     },
     ref
   ) => {
-    const [internalVisible, setInternalVisible] = useState(false)
-
-    // Real trigger loading update
-    const updateLoadingStatus = useCallback(() => {
-      if (internalVisible === visible) return
-      setInternalVisible(visible)
-    }, [internalVisible, visible])
-
-    const prevDebouncedUpdateRef = useRef<null | DebounceReturn>(null)
-
-    const cancelWaitingLoading = () => {
-      prevDebouncedUpdateRef.current?.cancel()
-    }
-
-    const shouldDelay = visible && delay >= 0
-
-    const debouncedLoadingUpdater = useCallback(() => {
-      cancelWaitingLoading()
-
-      if (shouldDelay) {
-        const debouncedUpdateLoading = debounce(updateLoadingStatus, delay)
-        prevDebouncedUpdateRef.current = debouncedUpdateLoading
-
-        debouncedUpdateLoading()
-      } else {
-        updateLoadingStatus()
-        prevDebouncedUpdateRef.current = null
-      }
-    }, [delay, shouldDelay, updateLoadingStatus])
-
-    useEffect(() => {
-      debouncedLoadingUpdater()
-
-      return () => {
-        cancelWaitingLoading()
-      }
-    }, [debouncedLoadingUpdater])
+    const { internalVisible, setInternalVisible } = useLoading({ visible, delay })
 
     useImperativeHandle(innerRef, () => ({
       close: () => setInternalVisible(false),
@@ -98,10 +55,12 @@ export const Loading = forwardRef<null, LoadingProps>(
         <div ref={ref} role={role} className={cls} {...restProps}>
           <div className={`${prefixCls}__mask`} />
           <div className={`${prefixCls}__icon-wrapper`}>
-            <div className={`${prefixCls}__icon`}>
-              <div />
-              <div />
-            </div>
+            {indicator || (
+              <div className={`${prefixCls}__icon`}>
+                <div />
+                <div />
+              </div>
+            )}
           </div>
           {content ? <span className={`${prefixCls}__content`}>{content}</span> : null}
         </div>
@@ -173,6 +132,10 @@ export interface LoadingProps extends HiBaseHTMLProps<'div'> {
    * @private
    */
   part?: boolean
+  /**
+   * 自定义加载指示符
+   */
+  indicator?: ReactNode
 }
 
 if (__DEV__) {

packages/ui/loading/src/use-loading.ts

@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { debounce } from '@hi-ui/func-utils'
+import type { DebounceReturn } from '@hi-ui/func-utils'
+
+export const useLoading = ({ visible = true, delay = -1 }: UseLoadingProps) => {
+  const [internalVisible, setInternalVisible] = useState(false)
+
+  // Real trigger loading update
+  const updateLoadingStatus = useCallback(() => {
+    if (internalVisible === visible) return
+    setInternalVisible(visible)
+  }, [internalVisible, visible])
+
+  const prevDebouncedUpdateRef = useRef<null | DebounceReturn>(null)
+
+  const cancelWaitingLoading = () => {
+    prevDebouncedUpdateRef.current?.cancel()
+  }
+
+  const shouldDelay = visible && delay >= 0
+
+  const debouncedLoadingUpdater = useCallback(() => {
+    cancelWaitingLoading()
+
+    if (shouldDelay) {
+      const debouncedUpdateLoading = debounce(updateLoadingStatus, delay)
+      prevDebouncedUpdateRef.current = debouncedUpdateLoading
+
+      debouncedUpdateLoading()
+    } else {
+      updateLoadingStatus()
+      prevDebouncedUpdateRef.current = null
+    }
+  }, [delay, shouldDelay, updateLoadingStatus])
+
+  useEffect(() => {
+    debouncedLoadingUpdater()
+
+    return () => {
+      cancelWaitingLoading()
+    }
+  }, [debouncedLoadingUpdater])
+
+  return {
+    internalVisible,
+    setInternalVisible,
+  }
+}
+
+export interface UseLoadingProps {
+  visible?: boolean
+  delay?: number
+}
+
+export type useInputReturn = ReturnType<typeof useLoading>

packages/ui/loading/stories/index.stories.tsx

@@ -4,6 +4,7 @@ import Loading from '../src'
 export * from './basic.stories'
 export * from './duration.stories'
 export * from './visible.stories'
+export * from './indicator.stories'
 
 export default {
   title: 'FeedBack/Loading',

packages/ui/loading/stories/indicator.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import Spinner from '@hi-ui/spinner'
+import Loading from '../src'
+
+/**
+ * @title 设置加载指示符
+ */
+export const Indicator = () => {
+  return (
+    <>
+      <h1>Indicator</h1>
+      <div
+        className="loading-basic__wrap"
+        style={{ position: 'relative', width: 500, height: 300 }}
+      >
+        <Loading indicator={<Spinner size={30} />}>
+          <div
+            style={{
+              width: 500,
+              height: 300,
+              boxSizing: 'border-box',
+              background: '#f5f7fa',
+              padding: 20,
+              border: '20px solid #5f6a7a',
+            }}
+          />
+        </Loading>
+      </div>
+    </>
+  )
+}

packages/ui/spinner/src/Spinner.tsx

@@ -9,14 +9,11 @@ const SPINNER_PREFIX = getPrefixCls('spinner')
  * TODO: What is Spinner
  */
 export const Spinner = forwardRef<HTMLElement | null, SpinnerProps>(
-  (
-    { prefixCls = SPINNER_PREFIX, role = 'spinner', className, children, size = 14, ...rest },
-    ref
-  ) => {
+  ({ prefixCls = SPINNER_PREFIX, role = 'spinner', className, style, size = 14 }, ref) => {
     const cls = cx(prefixCls, className)
 
     return (
-      <i ref={ref} className={cls} {...rest} style={{ fontSize: size, ...rest.style }}>
+      <i ref={ref} role={role} className={cls} style={{ fontSize: size, ...style }}>
         <svg
           className={`${prefixCls}__icon`}
           viewBox="0 0 18 18"
@@ -39,7 +36,10 @@ export const Spinner = forwardRef<HTMLElement | null, SpinnerProps>(
 )
 
 export interface SpinnerProps extends HiBaseHTMLProps<'i'> {
-  size?: string
+  /**
+   * 自定义尺寸
+   */
+  size?: number
 }
 
 if (__DEV__) {

packages/ui/spinner/src/styles/spinner.scss

@@ -1,13 +1,13 @@
-@import '~@hi-ui/core-css/lib/index.scss';
+@import "~@hi-ui/core-css/lib/index.scss";
 
-$prefix: '#{$component-prefix}-spinner' !default;
+$prefix: "#{$component-prefix}-spinner" !default;
 
 .#{$prefix} {
   width: 1em;
   height: 1em;
   display: inline-block;
   cursor: default;
-  color: use-color-mode('primary');
+  color: use-color-mode("primary");
 
   svg.#{$prefix}__icon {
     @keyframes #{$component-prefix}-rotate {
@@ -16,8 +16,8 @@ $prefix: '#{$component-prefix}-spinner' !default;
       }
     }
 
-    width: 0.8rem;
-    height: 0.8rem;
+    width: 1em;
+    height: 1em;
     stroke: none;
     fill: currentColor;
     animation-name: #{$component-prefix}-rotate;

packages/ui/spinner/stories/basic.stories.tsx

@@ -9,7 +9,7 @@ export const Basic = () => {
     <>
       <h1>Basic</h1>
       <div className="spinner-basic__wrap">
-        <Spinner></Spinner>
+        <Spinner />
       </div>
     </>
   )

packages/ui/spinner/stories/index.stories.tsx

@@ -1,8 +1,11 @@
 import React from 'react'
+import Spinner from '../src'
 
 export * from './basic.stories'
+export * from './size.stories'
 
 export default {
-  title: 'Private（暂不对外）/Spinner',
+  title: 'FeedBack/Spinner',
+  component: Spinner,
   decorators: [(story: Function) => <div>{story()}</div>],
 }

packages/ui/spinner/stories/size.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import Space from '@hi-ui/space'
+import Spinner from '../src'
+
+/**
+ * @title 设置大小
+ */
+export const Size = () => {
+  return (
+    <>
+      <h1>Size</h1>
+      <div className="spinner-size__wrap">
+        <Space size={20}>
+          <Spinner size={12} />
+          <Spinner size={24} />
+          <Spinner size={36} />
+        </Space>
+      </div>
+    </>
+  )
+}