feat(ui): add table component

DevCloudFE · Aug 12, 2022 · 567057f · 567057f
1 parent cce0e71
commit 567057f
Show file tree

Hide file tree

Showing 114 changed files with 2,911 additions and 384 deletions.
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
@@ -34,7 +34,7 @@ jobs:
           cache: 'yarn'
       - run: yarn install --frozen-lockfile
       - run: yarn test:affected
-      - uses: codecov/codecov-action@v2
+      - uses: codecov/codecov-action@v3
   build:
     runs-on: ubuntu-latest
     strategy:

diff --git a/.stylelintrc b/.stylelintrc
@@ -13,7 +13,7 @@
       }
     ],
     "declaration-property-value-allowed-list": {
-      "/color/": ["/var/", "/\\$/", "currentColor", "transparent", "unset", "inherit"],
+      "/color/": ["/var/", "/\\$/", "currentcolor", "transparent", "unset", "inherit"],
       "font-size": ["/var/", "/\\$/", "/[0-9]+em$/", "unset", "inherit"],
       "border-radius": ["/var/", "/\\$/", "50%", "0", "inherit"]
     },

diff --git a/packages/site/src/app/components/route/component/DemoBox.tsx b/packages/site/src/app/components/route/component/DemoBox.tsx
@@ -109,11 +109,11 @@ ${'```'}
         </DTooltip>
         <DTooltip dTitle={copyCode ? t('Copied!') : t('Copy code')} afterVisibleChange={afterCopyTrige}>
           <div className="app-icon-button">
-            {copyCode ? <CheckOutlined dSize={18} /> : <SnippetsOutlined dSize={18} onClick={handleCopyClick} />}
+            {copyCode ? <CheckOutlined dSize={18} /> : <SnippetsOutlined onClick={handleCopyClick} dSize={18} />}
           </div>
         </DTooltip>
         <DTooltip dTitle={openCode ? t('Hide code') : t('Show code')}>
-          <DCustomIcon className="app-icon-button" viewBox="0 0 1024 1024" dSize={18} onClick={handleOpenClick}>
+          <DCustomIcon className="app-icon-button" viewBox="0 0 1024 1024" onClick={handleOpenClick} dSize={18}>
             {openCode ? (
               <path d="M1018.645 531.298c8.635-18.61 4.601-41.42-11.442-55.864l-205.108-184.68c-19.7-17.739-50.05-16.148-67.789 3.552-17.738 19.7-16.148 50.051 3.553 67.79l166.28 149.718-167.28 150.62c-19.7 17.738-21.291 48.088-3.553 67.789 17.739 19.7 48.089 21.291 67.79 3.553l205.107-184.68a47.805 47.805 0 0 0 12.442-17.798zM119.947 511.39l166.28-149.719c19.7-17.738 21.29-48.088 3.552-67.789-17.738-19.7-48.088-21.291-67.789-3.553L16.882 475.01C.84 489.456-3.194 512.264 5.44 530.874a47.805 47.805 0 0 0 12.442 17.798l205.108 184.68c19.7 17.739 50.05 16.148 67.79-3.552 17.738-19.7 16.147-50.051-3.553-67.79l-167.28-150.62zm529.545-377.146c24.911 9.066 37.755 36.61 28.688 61.522L436.03 861.068c-9.067 24.911-36.611 37.755-61.522 28.688-24.911-9.066-37.755-36.61-28.688-61.522l242.15-665.302c9.067-24.911 36.611-37.755 61.522-28.688z"></path>
             ) : (

diff --git a/packages/site/src/app/styles/_app.scss b/packages/site/src/app/styles/_app.scss
@@ -225,9 +225,9 @@ h3 {
         'Radio': 'radio',
         'Input': 'input',
         'Switch': 'switch',
-        'Time-picker': 'time-picker',
-        'Date-picker': 'date-picker',
-        'Auto-complete': 'input',
+        'TimePicker': 'time-picker',
+        'DatePicker': 'date-picker',
+        'AutoComplete': 'input',
         'Image': 'image'
       )
   {
@@ -313,6 +313,17 @@ h3 {
       min-width: 600px;
     }
   }
+
+  section[id^='Table'] {
+    .d-table {
+      min-width: 600px;
+    }
+
+    .d-pagination {
+      justify-content: flex-end;
+      margin-top: 20px;
+    }
+  }
 }
 
 .app-demo-col {

diff --git a/packages/site/src/index.html b/packages/site/src/index.html
@@ -13,5 +13,14 @@
   </head>
   <body>
     <div id="app-root"></div>
+    <script>
+      var _hmt = _hmt || [];
+      (function () {
+        var hm = document.createElement('script');
+        hm.src = 'https://hm.baidu.com/hm.js?0c8e27d8ae0d13fbef28c934b5464d5d';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(hm, s);
+      })();
+    </script>
   </body>
 </html>
diff --git a/packages/ui/src/components/_date-input/DateInput.tsx b/packages/ui/src/components/_date-input/DateInput.tsx
@@ -229,8 +229,6 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
         type="text"
         autoComplete="off"
         disabled={dDisabled}
-        dFormControl={dFormControl}
-        dFor={isLeft}
         onFocus={(e) => {
           inputProps?.onFocus?.(e);
 
@@ -245,6 +243,8 @@ function DateInput(props: DDateInputProps, ref: React.ForwardedRef<DDateInputRef
           inputProps?.onKeyDown?.(e);
           ksProps.ksOnKeyDown(e);
         }}
+        dFormControl={dFormControl}
+        dFor={isLeft}
       />
     );
   };

diff --git a/packages/ui/src/components/_popup/Popup.tsx b/packages/ui/src/components/_popup/Popup.tsx
@@ -55,6 +55,7 @@ export function DPopup(props: DPopupProps): JSX.Element | null {
 
   const dataRef = useRef<{
     clearTid?: () => void;
+    clearClickOut?: () => void;
   }>({});
 
   const asyncCapture = useAsync();
@@ -112,17 +113,15 @@ export function DPopup(props: DPopupProps): JSX.Element | null {
     }
   });
 
-  const clickOut = useRef(true);
   useEffect(() => {
     if (!dDisabled && dVisible && dTrigger === 'click') {
       const [asyncGroup, asyncId] = asyncCapture.createGroup();
 
-      asyncGroup.fromEvent(window, 'click').subscribe({
+      asyncGroup.fromEvent(window, 'click', { capture: true }).subscribe({
         next: () => {
-          if (clickOut.current) {
+          dataRef.current.clearClickOut = asyncGroup.requestAnimationFrame(() => {
             handleTrigger(false);
-          }
-          clickOut.current = true;
+          });
         },
       });
 
@@ -239,7 +238,7 @@ export function DPopup(props: DPopupProps): JSX.Element | null {
 
       case 'click':
         childProps.pOnClick = () => {
-          clickOut.current = false;
+          dataRef.current.clearClickOut?.();
           handleTrigger();
         };
         break;
@@ -264,7 +263,7 @@ export function DPopup(props: DPopupProps): JSX.Element | null {
 
       case 'click':
         popupProps.pOnClick = () => {
-          clickOut.current = false;
+          dataRef.current.clearClickOut?.();
         };
         break;
 

diff --git a/packages/ui/src/components/_selectbox/Selectbox.tsx b/packages/ui/src/components/_selectbox/Selectbox.tsx
@@ -236,7 +236,6 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
                   role="combobox"
                   aria-haspopup="listbox"
                   aria-expanded={dVisible}
-                  dFormControl={dFormControl}
                   onFocus={(e) => {
                     dInputProps?.onFocus?.(e);
                     fvOnFocus(e);
@@ -253,6 +252,7 @@ function Selectbox(props: DSelectboxProps, ref: React.ForwardedRef<DSelectboxRef
                     dInputProps?.onKeyDown?.(e);
                     fvOnKeyDown(e);
                   }}
+                  dFormControl={dFormControl}
                 />
               )}
             </DFocusVisible>

diff --git a/packages/ui/src/components/alert/Alert.tsx b/packages/ui/src/components/alert/Alert.tsx
@@ -2,8 +2,8 @@ import { useComponentConfig, useDValue, usePrefixConfig } from '../../hooks';
 import { checkNodeExist, getClassName, registerComponentMate } from '../../utils';
 import { TTANSITION_DURING_BASE } from '../../utils/global';
 import { DCollapseTransition } from '../_transition';
-import { DNotificationPanel } from '../notification/NotificationPanel';
-import { DToastPanel } from '../toast/ToastPanel';
+import { DPanel as DNotificationPanel } from '../notification/Panel';
+import { DPanel as DToastPanel } from '../toast/Panel';
 
 export interface DAlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   dVisible?: boolean;

diff --git a/packages/ui/src/components/anchor/Anchor.tsx b/packages/ui/src/components/anchor/Anchor.tsx
@@ -236,7 +236,7 @@ function Anchor<T extends DAnchorItem>(props: DAnchorProps<T>, ref: React.Forwar
 }
 
 export const DAnchor: {
-  <T extends DAnchorItem>(props: DAnchorProps<T> & { ref?: React.ForwardedRef<DAnchorRef> }): ReturnType<typeof Anchor>;
+  <T extends DAnchorItem>(props: DAnchorProps<T> & React.RefAttributes<DAnchorRef>): ReturnType<typeof Anchor>;
   DOT_INDICATOR: typeof DOT_INDICATOR;
   LINE_INDICATOR: typeof LINE_INDICATOR;
 } = React.forwardRef(Anchor) as any;

diff --git a/packages/ui/src/components/anchor/demos/2.Indicator.md b/packages/ui/src/components/anchor/demos/2.Indicator.md
@@ -8,10 +8,14 @@ title:
 
 Custom activity indicator.
 
+The `DOT_INDICATOR` and `LINE_INDICATOR` indicators are provided.
+
 # zh-Hant
 
 自定义活动指示器。
 
+提供了 `DOT_INDICATOR` 和 `LINE_INDICATOR` 指示器。
+
 ```tsx
 import { DAnchor } from '@react-devui/ui';
 

diff --git a/packages/ui/src/components/auto-complete/AutoComplete.tsx b/packages/ui/src/components/auto-complete/AutoComplete.tsx
@@ -380,10 +380,7 @@ function AutoComplete<T extends DAutoCompleteItem>(
                   <DVirtualScroll
                     {...vsPerformance}
                     ref={dVSRef}
-                    id={listId}
-                    className={`${dPrefix}auto-complete__list`}
-                    role="listbox"
-                    aria-activedescendant={isUndefined(focusItem) ? undefined : getItemId(focusItem.value)}
+                    dFillNode={<li></li>}
                     dItemRender={(item, index, { iARIA, iChildren }, parent) => {
                       const { value: itemValue, disabled: itemDisabled, children } = item;
 
@@ -439,13 +436,33 @@ function AutoComplete<T extends DAutoCompleteItem>(
                     dFocusItem={focusItem}
                     dSize={264}
                     dPadding={4}
-                    dEmptyRender={(item) => (
-                      <li className={`${dPrefix}auto-complete__empty`} style={{ paddingLeft: item ? 12 + 8 : undefined }}>
+                    dEmptyRender={() => (
+                      <li className={`${dPrefix}auto-complete__empty`} style={{ paddingLeft: 12 + 8 }}>
                         <div className={`${dPrefix}auto-complete__option-content`}>{t('No Data')}</div>
                       </li>
                     )}
                     onScrollEnd={onScrollBottom}
-                  />
+                  >
+                    {({ vsScrollRef, vsRender, vsOnScroll }) => (
+                      <ul
+                        ref={vsScrollRef}
+                        id={listId}
+                        className={`${dPrefix}auto-complete__list`}
+                        tabIndex={-1}
+                        role="listbox"
+                        aria-activedescendant={isUndefined(focusItem) ? undefined : getItemId(focusItem.value)}
+                        onScroll={vsOnScroll}
+                      >
+                        {dList.length === 0 ? (
+                          <li className={`${dPrefix}auto-complete__empty`}>
+                            <div className={`${dPrefix}auto-complete__option-content`}>{t('No Data')}</div>
+                          </li>
+                        ) : (
+                          vsRender
+                        )}
+                      </ul>
+                    )}
+                  </DVirtualScroll>
                 </div>
               );
             }}
@@ -457,5 +474,5 @@ function AutoComplete<T extends DAutoCompleteItem>(
 }
 
 export const DAutoComplete: <T extends DAutoCompleteItem>(
-  props: DAutoCompleteProps<T> & { ref?: React.ForwardedRef<DAutoCompleteRef> }
+  props: DAutoCompleteProps<T> & React.RefAttributes<DAutoCompleteRef>
 ) => ReturnType<typeof AutoComplete> = React.forwardRef(AutoComplete) as any;
diff --git a/packages/ui/src/components/auto-complete/demos/5.BigData.md b/packages/ui/src/components/auto-complete/demos/5.BigData.md
@@ -10,7 +10,7 @@ All uses of AutoComplete components support [Virtual Scroll](/components/Virtual
 
 # zh-Hant
 
-AutoComplete 组件所有用法均支持 [虚拟滚动](/components/VirtualScroll)！
+AutoComplete 组件所有用法均支持[虚拟滚动](/components/VirtualScroll)！
 
 ```tsx
 import { useState } from 'react';

diff --git a/packages/ui/src/components/card/demos/3.Media.md b/packages/ui/src/components/card/demos/3.Media.md
@@ -10,7 +10,7 @@ Example of a card using an image to reinforce the content.
 
 # zh-Hant
 
-该例使用图像来增强内容的卡片。
+该示例使用图像来增强内容的卡片。
 
 ```tsx
 import { DCard } from '@react-devui/ui';

diff --git a/packages/ui/src/components/cascader/Cascader.tsx b/packages/ui/src/components/cascader/Cascader.tsx
@@ -468,5 +468,5 @@ function Cascader<V extends DId, T extends DCascaderItem<V>>(
 }
 
 export const DCascader: <V extends DId, T extends DCascaderItem<V>>(
-  props: DCascaderProps<V, T> & { ref?: React.ForwardedRef<DCascaderRef> }
+  props: DCascaderProps<V, T> & React.RefAttributes<DCascaderRef>
 ) => ReturnType<typeof Cascader> = React.forwardRef(Cascader) as any;
diff --git a/packages/ui/src/components/cascader/List.tsx b/packages/ui/src/components/cascader/List.tsx
@@ -171,11 +171,7 @@ export function DList<ID extends DId, T extends DCascaderItem<ID>>(props: DListP
       <DVirtualScroll
         {...vsPerformance}
         ref={dVSRef}
-        id={dListId}
-        className={`${dPrefix}cascader__list`}
-        role="listbox"
-        aria-multiselectable={dMultiple}
-        aria-activedescendant={dRoot && !isUndefined(dFocusNode) ? dGetItemId(dFocusNode.id) : undefined}
+        dFillNode={<li></li>}
         dItemRender={(item, index, { iARIA }) => (
           <li
             {...iARIA}
@@ -200,14 +196,14 @@ export function DList<ID extends DId, T extends DCascaderItem<ID>>(props: DListP
             {dFocusVisible && item.id === dFocusNode?.id && <div className={`${dPrefix}focus-outline`}></div>}
             {dMultiple && (
               <DCheckbox
-                dModel={item.checked}
-                dDisabled={item.disabled}
-                dIndeterminate={item.indeterminate}
                 onClick={(e) => {
                   e.stopPropagation();
                   onFocusChange(item);
                   changeSelectByClick(item);
                 }}
+                dModel={item.checked}
+                dDisabled={item.disabled}
+                dIndeterminate={item.indeterminate}
               ></DCheckbox>
             )}
             <div className={`${dPrefix}cascader__option-content`}>{dCustomItem ? dCustomItem(item.origin) : item.origin.label}</div>
@@ -219,12 +215,28 @@ export function DList<ID extends DId, T extends DCascaderItem<ID>>(props: DListP
         dFocusItem={inFocusNode}
         dSize={264}
         dPadding={4}
-        dEmptyRender={() => (
-          <li className={`${dPrefix}cascader__empty`}>
-            <div className={`${dPrefix}cascader__option-content`}>{t('No Data')}</div>
-          </li>
+      >
+        {({ vsScrollRef, vsRender, vsOnScroll }) => (
+          <ul
+            ref={vsScrollRef}
+            id={dListId}
+            className={`${dPrefix}cascader__list`}
+            tabIndex={-1}
+            role="listbox"
+            aria-multiselectable={dMultiple}
+            aria-activedescendant={dRoot && !isUndefined(dFocusNode) ? dGetItemId(dFocusNode.id) : undefined}
+            onScroll={vsOnScroll}
+          >
+            {dNodes.length === 0 ? (
+              <li className={`${dPrefix}cascader__empty`}>
+                <div className={`${dPrefix}cascader__option-content`}>{t('No Data')}</div>
+              </li>
+            ) : (
+              vsRender
+            )}
+          </ul>
         )}
-      />
+      </DVirtualScroll>
       {inFocusNode && !inFocusNode.origin.loading && inFocusNode.children && (
         <DList {...props} dListId={undefined} dNodes={inFocusNode.children} dRoot={false}></DList>
       )}

diff --git a/packages/ui/src/components/cascader/SearchList.tsx b/packages/ui/src/components/cascader/SearchList.tsx
@@ -117,7 +117,7 @@ export function DSearchList<ID extends DId, T extends DCascaderItem<ID>>(props:
 
   const vsPerformance = useMemo<DVirtualScrollPerformance<DSearchItem<ID, T>>>(
     () => ({
-      dList: dList,
+      dList,
       dItemSize: 32,
       dItemKey: (item) => item.value,
       dFocusable: (item) => item[TREE_NODE_KEY].enabled,
@@ -129,11 +129,7 @@ export function DSearchList<ID extends DId, T extends DCascaderItem<ID>>(props:
     <DVirtualScroll
       {...vsPerformance}
       ref={dVSRef}
-      id={dListId}
-      className={`${dPrefix}cascader__list`}
-      role="listbox"
-      aria-multiselectable={dMultiple}
-      aria-activedescendant={isUndefined(dFocusItem) ? undefined : dGetItemId(dFocusItem.value)}
+      dFillNode={<li></li>}
       dItemRender={(item, index, { iARIA }) => {
         const node = item[TREE_NODE_KEY];
         let inSelected = node.checked;
@@ -175,11 +171,27 @@ export function DSearchList<ID extends DId, T extends DCascaderItem<ID>>(props:
       dFocusItem={dFocusItem}
       dSize={264}
       dPadding={4}
-      dEmptyRender={() => (
-        <li className={`${dPrefix}cascader__empty`}>
-          <div className={`${dPrefix}cascader__option-content`}>{t('No Data')}</div>
-        </li>
+    >
+      {({ vsScrollRef, vsRender, vsOnScroll }) => (
+        <ul
+          ref={vsScrollRef}
+          id={dListId}
+          className={`${dPrefix}cascader__list`}
+          tabIndex={-1}
+          role="listbox"
+          aria-multiselectable={dMultiple}
+          aria-activedescendant={isUndefined(dFocusItem) ? undefined : dGetItemId(dFocusItem.value)}
+          onScroll={vsOnScroll}
+        >
+          {dList.length === 0 ? (
+            <li className={`${dPrefix}cascader__empty`}>
+              <div className={`${dPrefix}cascader__option-content`}>{t('No Data')}</div>
+            </li>
+          ) : (
+            vsRender
+          )}
+        </ul>
       )}
-    />
+    </DVirtualScroll>
   );
 }