feat(ui): add skeleton component

DevCloudFE · Aug 1, 2022 · 1dbb55b · 1dbb55b
1 parent 4efadf6
commit 1dbb55b
Show file tree

Hide file tree

Showing 29 changed files with 306 additions and 72 deletions.
diff --git a/packages/ui/src/components/avatar/Avatar.tsx b/packages/ui/src/components/avatar/Avatar.tsx
@@ -4,7 +4,7 @@ import { usePrefixConfig, useComponentConfig } from '../../hooks';
 import { registerComponentMate, getClassName } from '../../utils';
 
 export interface DAvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
-  dShape?: string | number;
+  dVariant?: 'circular' | 'square';
   dImg?: React.ImgHTMLAttributes<HTMLImageElement>;
   dIcon?: React.ReactNode;
   dText?: React.ReactNode;
@@ -14,7 +14,7 @@ export interface DAvatarProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DAvatar' });
 export function DAvatar(props: DAvatarProps): JSX.Element | null {
   const {
-    dShape = 'circular',
+    dVariant = 'circular',
     dImg,
     dIcon,
     dText,
@@ -46,15 +46,12 @@ export function DAvatar(props: DAvatarProps): JSX.Element | null {
   return (
     <div
       {...restProps}
-      className={getClassName(restProps.className, `${dPrefix}avatar`, `${dPrefix}avatar--${type}`, {
-        [`${dPrefix}avatar--${dShape}`]: dShape === 'circular' || dShape === 'square',
-      })}
+      className={getClassName(restProps.className, `${dPrefix}avatar`, `${dPrefix}avatar--${type}`, `${dPrefix}avatar--${dVariant}`)}
       style={{
         ...restProps.style,
         width: dSize,
         height: dSize,
         fontSize: type === 'icon' ? dSize / 2 : type === 'text' ? dSize * 0.45 : undefined,
-        borderRadius: dShape === 'circular' || dShape === 'square' ? undefined : dShape,
       }}
     >
       {type === 'img' ? (

diff --git a/packages/ui/src/components/avatar/demos/2.Shape.md b/packages/ui/src/components/avatar/demos/2.Shape.md
@@ -6,21 +6,16 @@ title:
 
 # en-US
 
-Set the shape via `dShape`.
+Set the shape via `dVariant`.
 
 # zh-Hant
 
-通过 `dShape` 设置形状。
+通过 `dVariant` 设置形状。
 
 ```tsx
 import { DAvatar } from '@react-devui/ui';
 
 export default function Demo() {
-  return (
-    <>
-      <DAvatar dText="U" dShape="square"></DAvatar>
-      <DAvatar dText="U" dShape={8}></DAvatar>
-    </>
-  );
+  return <DAvatar dText="U" dVariant="square"></DAvatar>;
 }
 ```
diff --git a/packages/ui/src/components/button/Button.tsx b/packages/ui/src/components/button/Button.tsx
@@ -14,7 +14,7 @@ export interface DButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
   dTheme?: 'primary' | 'success' | 'warning' | 'danger';
   dLoading?: boolean;
   dBlock?: boolean;
-  dShape?: 'circle' | 'round';
+  dVariant?: 'circle' | 'round';
   dSize?: DSize;
   dIcon?: React.ReactNode;
   dIconRight?: boolean;
@@ -28,7 +28,7 @@ function Button(props: DButtonProps, ref: React.ForwardedRef<HTMLButtonElement>)
     dTheme = 'primary',
     dLoading = false,
     dBlock = false,
-    dShape,
+    dVariant,
     dSize,
     dIcon,
     dIconRight = false,
@@ -58,7 +58,7 @@ function Button(props: DButtonProps, ref: React.ForwardedRef<HTMLButtonElement>)
         {...restProps}
         ref={ref}
         className={getClassName(restProps.className, `${dPrefix}button`, `${dPrefix}button--${dType}`, `t-${dTheme}`, {
-          [`${dPrefix}button--${dShape}`]: dShape,
+          [`${dPrefix}button--${dVariant}`]: dVariant,
           [`${dPrefix}button--${size}`]: size,
           [`${dPrefix}button--block`]: dBlock,
           [`${dPrefix}button--icon`]: !children,

diff --git a/packages/ui/src/components/button/demos/3.Icon.md b/packages/ui/src/components/button/demos/3.Icon.md
@@ -19,12 +19,12 @@ import { SearchOutlined } from '@react-devui/ui/icons';
 export default function Demo() {
   return (
     <>
-      <DButton dShape="circle" dIcon={<SearchOutlined />} />
-      <DButton dType="secondary" dShape="circle" dIcon={<SearchOutlined />} />
-      <DButton dType="outline" dShape="circle" dIcon={<SearchOutlined />} />
-      <DButton dType="dashed" dShape="circle" dIcon={<SearchOutlined />} />
-      <DButton dType="text" dShape="circle" dIcon={<SearchOutlined />} />
-      <DButton dType="link" dShape="circle" dIcon={<SearchOutlined />} />
+      <DButton dVariant="circle" dIcon={<SearchOutlined />} />
+      <DButton dType="secondary" dVariant="circle" dIcon={<SearchOutlined />} />
+      <DButton dType="outline" dVariant="circle" dIcon={<SearchOutlined />} />
+      <DButton dType="dashed" dVariant="circle" dIcon={<SearchOutlined />} />
+      <DButton dType="text" dVariant="circle" dIcon={<SearchOutlined />} />
+      <DButton dType="link" dVariant="circle" dIcon={<SearchOutlined />} />
       <br />
       <DButton dIcon={<SearchOutlined />}>Search</DButton>
       <DButton dIcon={<SearchOutlined />} dIconRight>

diff --git a/packages/ui/src/components/button/demos/5.Loading.md b/packages/ui/src/components/button/demos/5.Loading.md
@@ -43,7 +43,7 @@ export default function Demo() {
       <DButton dLoading={loadings[1]} onClick={() => handleClick(1)}>
         Click me!
       </DButton>
-      <DButton dLoading={loadings[2]} dShape="circle" dIcon={<SearchOutlined />} onClick={() => handleClick(2)} />
+      <DButton dLoading={loadings[2]} dVariant="circle" dIcon={<SearchOutlined />} onClick={() => handleClick(2)} />
       <br />
       <DButton dLoading={loadings[3]} dIcon={<SearchOutlined />} dIconRight onClick={() => handleClick(3)}>
         Click me!

diff --git a/packages/ui/src/components/button/demos/7.Size.md b/packages/ui/src/components/button/demos/7.Size.md
@@ -20,24 +20,24 @@ export default function Demo() {
   return (
     <>
       <DButton dSize="smaller" dIcon={<SearchOutlined />} />
-      <DButton dSize="smaller" dShape="circle" dIcon={<SearchOutlined />} />
-      <DButton dSize="smaller" dShape="round" dIcon={<SearchOutlined />} />
+      <DButton dSize="smaller" dVariant="circle" dIcon={<SearchOutlined />} />
+      <DButton dSize="smaller" dVariant="round" dIcon={<SearchOutlined />} />
       <DButton dSize="smaller">Button</DButton>
-      <DButton dSize="smaller" dShape="round">
+      <DButton dSize="smaller" dVariant="round">
         Button
       </DButton>
       <br />
       <DButton dIcon={<SearchOutlined />} />
-      <DButton dShape="circle" dIcon={<SearchOutlined />} />
-      <DButton dShape="round" dIcon={<SearchOutlined />} />
+      <DButton dVariant="circle" dIcon={<SearchOutlined />} />
+      <DButton dVariant="round" dIcon={<SearchOutlined />} />
       <DButton>Button</DButton>
-      <DButton dShape="round">Button</DButton>
+      <DButton dVariant="round">Button</DButton>
       <br />
       <DButton dSize="larger" dIcon={<SearchOutlined />} />
-      <DButton dSize="larger" dShape="circle" dIcon={<SearchOutlined />} />
-      <DButton dSize="larger" dShape="round" dIcon={<SearchOutlined />} />
+      <DButton dSize="larger" dVariant="circle" dIcon={<SearchOutlined />} />
+      <DButton dSize="larger" dVariant="round" dIcon={<SearchOutlined />} />
       <DButton dSize="larger">Button</DButton>
-      <DButton dSize="larger" dShape="round">
+      <DButton dSize="larger" dVariant="round">
         Button
       </DButton>
     </>

diff --git a/packages/ui/src/components/button/demos/8.Compose.md b/packages/ui/src/components/button/demos/8.Compose.md
@@ -78,7 +78,7 @@ export default function Demo() {
       </DCompose>
       <DCompose dSize={size} dVertical={vertical} dDisabled={disabled}>
         {['L', 'M', 'R'].map((text) => (
-          <DButton key={text} dType="secondary" dShape={text === 'M' ? undefined : 'round'}>
+          <DButton key={text} dType="secondary" dVariant={text === 'M' ? undefined : 'round'}>
             {text}
           </DButton>
         ))}

diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
@@ -97,6 +97,9 @@ export { DSelect } from './select';
 export type { DSeparatorProps } from './separator';
 export { DSeparator } from './separator';
 
+export type { DSkeletonProps } from './skeleton';
+export { DSkeleton } from './skeleton';
+
 export type { DSliderProps } from './slider';
 export { DSlider } from './slider';
 

diff --git a/packages/ui/src/components/loading/Loading.tsx b/packages/ui/src/components/loading/Loading.tsx
@@ -94,7 +94,7 @@ export function DLoading(props: DLoadingProps): JSX.Element | null {
               children
             ) : (
               <svg className={`${dPrefix}loading__spinner`} width="1em" height="1em" viewBox="0 0 50 50">
-                <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round"></circle>
+                <circle cx="25" cy="25" r="21" fill="none" stroke="currentColor" strokeWidth="4" strokeLinecap="round"></circle>
               </svg>
             )}
           </div>

diff --git a/packages/ui/src/components/loading/demos/3.Icon.md b/packages/ui/src/components/loading/demos/3.Icon.md
@@ -16,7 +16,6 @@ Custom loading icon.
 import { useState } from 'react';
 
 import { DLoading, DAlert, DSwitch } from '@react-devui/ui';
-import { LoadingOutlined } from '@react-devui/ui/icons';
 
 export default function Demo() {
   const [loading, setLoading] = useState(true);
@@ -30,11 +29,52 @@ export default function Demo() {
       <br />
       <div style={{ position: 'relative' }}>
         <DLoading dVisible={loading}>
-          <LoadingOutlined dSpin />
+          <div class="lds-facebook">
+            <div></div>
+            <div></div>
+            <div></div>
+          </div>
         </DLoading>
         <DAlert dTitle="I love DevUI so much!" dDescription="Detailed description and advice about DevUI." dType="info"></DAlert>
       </div>
     </>
   );
 }
 ```
+
+```scss
+.lds-facebook {
+  display: inline-flex;
+  gap: 0 6px;
+  align-items: center;
+}
+
+.lds-facebook div {
+  width: 8px;
+  background: var(--d-color-primary);
+  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+}
+
+.lds-facebook div:nth-child(1) {
+  animation-delay: -0.24s;
+}
+
+.lds-facebook div:nth-child(2) {
+  animation-delay: -0.12s;
+}
+
+.lds-facebook div:nth-child(3) {
+  animation-delay: 0;
+}
+
+@keyframes lds-facebook {
+  0% {
+    height: 56px;
+  }
+
+  50%,
+  100% {
+    height: 28px;
+  }
+}
+```
diff --git a/packages/ui/src/components/skeleton/README.md b/packages/ui/src/components/skeleton/README.md
@@ -0,0 +1,6 @@
+---
+group: Feedback
+title: Skeleton
+---
+
+## API
diff --git a/packages/ui/src/components/skeleton/README.zh-Hant.md b/packages/ui/src/components/skeleton/README.zh-Hant.md
@@ -0,0 +1,5 @@
+---
+title: 骨架屏
+---
+
+## API
diff --git a/packages/ui/src/components/skeleton/Skeleton.tsx b/packages/ui/src/components/skeleton/Skeleton.tsx
@@ -0,0 +1,31 @@
+import { usePrefixConfig, useComponentConfig } from '../../hooks';
+import { registerComponentMate, getClassName } from '../../utils';
+
+export interface DSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  dVariant?: 'text' | 'circular' | 'rect';
+}
+
+const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DSkeleton' });
+export function DSkeleton(props: DSkeletonProps): JSX.Element | null {
+  const {
+    children,
+    dVariant = 'text',
+
+    ...restProps
+  } = useComponentConfig(COMPONENT_NAME, props);
+
+  //#region Context
+  const dPrefix = usePrefixConfig();
+  //#endregion
+
+  return (
+    <div {...restProps} className={getClassName(restProps.className, `${dPrefix}skeleton`, `${dPrefix}skeleton--${dVariant}`)}>
+      {dVariant === 'text' && (
+        <div className={`${dPrefix}skeleton__placeholder`} aria-hidden>
+          t
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/skeleton/demos/1.Basic.md b/packages/ui/src/components/skeleton/demos/1.Basic.md
@@ -0,0 +1,31 @@
+---
+title:
+  en-US: Basic
+  zh-Hant: 基本
+---
+
+# en-US
+
+The simplest usage.
+
+# zh-Hant
+
+最简单的用法。
+
+```tsx
+import { useState } from 'react';
+
+import { DSkeleton } from '@react-devui/ui';
+
+export default function Demo() {
+  return (
+    <>
+      <DSkeleton></DSkeleton>
+      <br />
+      <DSkeleton dVariant="circular" style={{ width: 40, height: 40 }}></DSkeleton>
+      <br />
+      <DSkeleton dVariant="rect" style={{ width: '100%', height: 100 }}></DSkeleton>
+    </>
+  );
+}
+```
diff --git a/packages/ui/src/components/skeleton/demos/2.UseCases.md b/packages/ui/src/components/skeleton/demos/2.UseCases.md
@@ -0,0 +1,70 @@
+---
+title:
+  en-US: Common Use Cases
+  zh-Hant: 常见用例
+---
+
+# en-US
+
+This example shows common usage.
+
+# zh-Hant
+
+该例展示了常见的使用。
+
+```tsx
+import { useState } from 'react';
+
+import { DSkeleton, DSwitch, DCard, DCardContent, DAvatar } from '@react-devui/ui';
+import { UserOutlined } from '@react-devui/ui/icons';
+
+export default function Demo() {
+  const [loading, setLoading] = useState(true);
+
+  return (
+    <>
+      <DSwitch dModel={loading} onModelChange={setLoading}>
+        Loading
+      </DSwitch>
+      <br />
+      <br />
+      <DCard style={{ width: 300 }}>
+        <DCardContent>
+          {loading ? (
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0 8px' }}>
+              <DSkeleton dVariant="circular" style={{ width: 40, height: 40 }}></DSkeleton>
+              <DSkeleton style={{ flex: '1 0 0' }}></DSkeleton>
+            </div>
+          ) : (
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0 8px' }}>
+              <DAvatar dImg={{ src: '/assets/logo.svg', alt: 'logo' }}></DAvatar>
+              <span>DevUI</span>
+            </div>
+          )}
+        </DCardContent>
+        <div style={{ margin: '0 -1px' }}>
+          {loading ? (
+            <DSkeleton dVariant="rect" style={{ width: '100%', height: 150 }}></DSkeleton>
+          ) : (
+            <img
+              style={{ width: '100%', borderRadius: 'var(--d-border-radius) var(--d-border-radius) 0 0' }}
+              src="/assets/imgs/bg-1.png"
+              alt="bg-1"
+            />
+          )}
+        </div>
+        <DCardContent>
+          {loading ? (
+            <>
+              <DSkeleton style={{ marginBottom: 8 }}></DSkeleton>
+              <DSkeleton style={{ width: '60%' }}></DSkeleton>
+            </>
+          ) : (
+            <span>Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.</span>
+          )}
+        </DCardContent>
+      </DCard>
+    </>
+  );
+}
+```
diff --git a/packages/ui/src/components/skeleton/index.ts b/packages/ui/src/components/skeleton/index.ts
@@ -0,0 +1 @@
+export * from './Skeleton';