@aloudata/aloudata-design 0.2.0-beta.2 → 0.2.0-beta.20

package/es/Table/react-table-config.d.ts

@@ -0,0 +1,122 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import {
+  UseColumnOrderInstanceProps,
+  UseColumnOrderState,
+  UseExpandedHooks,
+  UseExpandedInstanceProps,
+  UseExpandedOptions,
+  UseExpandedRowProps,
+  UseExpandedState,
+  UseFiltersColumnOptions,
+  UseFiltersColumnProps,
+  UseFiltersInstanceProps,
+  UseFiltersOptions,
+  UseFiltersState,
+  UseGlobalFiltersColumnOptions,
+  UseGlobalFiltersInstanceProps,
+  UseGlobalFiltersOptions,
+  UseGlobalFiltersState,
+  UseGroupByCellProps,
+  UseGroupByColumnOptions,
+  UseGroupByColumnProps,
+  UseGroupByHooks,
+  UseGroupByInstanceProps,
+  UseGroupByOptions,
+  UseGroupByRowProps,
+  UseGroupByState,
+  UsePaginationInstanceProps,
+  UsePaginationOptions,
+  UsePaginationState,
+  UseResizeColumnsColumnOptions,
+  UseResizeColumnsColumnProps,
+  UseResizeColumnsOptions,
+  UseResizeColumnsState,
+  UseRowSelectHooks,
+  UseRowSelectInstanceProps,
+  UseRowSelectOptions,
+  UseRowSelectRowProps,
+  UseRowSelectState,
+  UseRowStateCellProps,
+  UseRowStateInstanceProps,
+  UseRowStateOptions,
+  UseRowStateRowProps,
+  UseRowStateState,
+  UseSortByColumnOptions,
+  UseSortByColumnProps,
+  UseSortByHooks,
+  UseSortByInstanceProps,
+  UseSortByOptions,
+  UseSortByState
+} from 'react-table';
+
+declare module 'react-table' {
+  // take this file as-is, or comment out the sections that don't apply to your plugin configuration
+
+  export interface TableOptions<D extends Record<string, unknown>>
+    extends UseExpandedOptions<D>,
+    UseFiltersOptions<D>,
+    UseGlobalFiltersOptions<D>,
+    UseGroupByOptions<D>,
+    UsePaginationOptions<D>,
+    UseResizeColumnsOptions<D>,
+    UseRowSelectOptions<D>,
+    UseRowStateOptions<D>,
+    UseSortByOptions<D>,
+    // note that having Record here allows you to add anything to the options, this matches the spirit of the
+    // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
+    // feature set, this is a safe default.
+    Record<string, unknown> {}
+
+  export interface Hooks<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseExpandedHooks<D>,
+    UseGroupByHooks<D>,
+    UseRowSelectHooks<D>,
+    UseSortByHooks<D> {}
+
+  export interface TableInstance<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseColumnOrderInstanceProps<D>,
+    UseExpandedInstanceProps<D>,
+    UseFiltersInstanceProps<D>,
+    UseGlobalFiltersInstanceProps<D>,
+    UseGroupByInstanceProps<D>,
+    UsePaginationInstanceProps<D>,
+    UseRowSelectInstanceProps<D>,
+    UseRowStateInstanceProps<D>,
+    UseSortByInstanceProps<D> {}
+
+  export interface TableState<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseColumnOrderState<D>,
+    UseExpandedState<D>,
+    UseFiltersState<D>,
+    UseGlobalFiltersState<D>,
+    UseGroupByState<D>,
+    UsePaginationState<D>,
+    UseResizeColumnsState<D>,
+    UseRowSelectState<D>,
+    UseRowStateState<D>,
+    UseSortByState<D> {}
+
+  export interface ColumnInterface<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseFiltersColumnOptions<D>,
+    UseGlobalFiltersColumnOptions<D>,
+    UseGroupByColumnOptions<D>,
+    UseResizeColumnsColumnOptions<D>,
+    UseSortByColumnOptions<D> {}
+
+  export interface ColumnInstance<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseFiltersColumnProps<D>,
+    UseGroupByColumnProps<D>,
+    UseResizeColumnsColumnProps<D>,
+    UseSortByColumnProps<D> {}
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  export interface Cell<D extends Record<string, unknown> = Record<string, unknown>, V = unknown>
+    extends UseGroupByCellProps<D>,
+    UseRowStateCellProps<D> {}
+
+  export interface Row<D extends Record<string, unknown> = Record<string, unknown>>
+    extends UseExpandedRowProps<D>,
+    UseGroupByRowProps<D>,
+    UseRowSelectRowProps<D>,
+    UseRowStateRowProps<D> {}
+}

package/es/Table/style/index.less

@@ -1,31 +1,86 @@
 @import '../../style/index.less';
 
-@ald-prefix:ant;
-@ald-iconfont-css-prefix:anticon;
-@table-row-height:40px;
-.@{ald-prefix}-blockTable {
+@ald-prefix: ant;
+@ald-iconfont-css-prefix: anticon;
+@table-row-height: 40px;
+
+.ant-block-table {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  &-page-loading {
+    opacity: 0;
+  }
+
+  &-table-wrap {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &-cell {
+    flex-grow: 1;
+    height: unset;
+    color: @NL0;
+    line-height: 16px;
+    text-align: left;
+    border-bottom: 1px solid @NL95;
+    word-break: break-all;
+    padding: 12px;
+
+    &-content {
+      flex: 1;
+    }
+  }
+
+  &-row {
+    max-width: 100%;
+    height: 40px;
+
+    &-ellipsis {
+      .ant-block-table-cell {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
   &-thead {
-    .@{ald-prefix}-blockTable-cell {
+    .ant-block-table-cell {
       position: relative;
       color: @NL50;
-      // border: 1px solid red;
 
-      .@{ald-prefix}-blockTable-dragBar {
-        display: inline-block;
-        background: blue;
-        width: 1px;
-        height: 12px;
+      &-sorting {
+        color: @B40;
+      }
+
+      .ant-block-table-bar {
         position: absolute;
         top: 50%;
-        left: 0;
-        transform: translateY(-50%);
+        right: -12px;
         z-index: 1;
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        transform: translateY(-50%);
         touch-action: none;
-        background-color: @NL95;
+
+        &::after {
+          display: block;
+          height: 100%;
+          width: 1px;
+          content: '';
+          background-color: @NL95;
+        }
       }
 
-      &:first-child {
-        .@{ald-prefix}-blockTable-dragBar {
+      &:last-child {
+        .ant-block-table-bar {
           display: none;
         }
       }
@@ -33,13 +88,16 @@
   }
 
   &-tbody {
+    flex: 1;
     overflow: hidden;
 
-    &-scroll {
-      overflow-y: scroll;
-      overflow-y: overlay;
+    .ant-empty {
+      padding-top: 80px;
+      display: flex;
+      justify-content: center;
     }
-    .@{ald-prefix}-blockTable-row {
+
+    .ant-block-table-row {
       &:hover {
         background-color: @NL97;
       }
@@ -51,61 +109,91 @@
           background-color: @BBG97;
         }
       }
-
-      &:last-of-type {
-        .@{ald-prefix}-blockTable-cell {
-          border-bottom: 1px solid transparent;
-        }
-      }
     }
   }
 
-  &-row {
-    max-width: 100%;
-  }
-
-  &-cell {
-    padding: 0 12px;
-    height: @table-row-height;
-    line-height: @table-row-height;
-    border-bottom: 1px solid @NL95;
-    text-align: left;
-    color: @NL0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    flex-grow: 1;
-  }
-
   &-loading {
-    text-align: center;
-    line-height: @table-row-height;
     color: @NL80;
+    line-height: @table-row-height;
+    text-align: center;
   }
 
   &-header {
     display: flex;
-    justify-content: space-between;
-    padding: 0 10px;
     align-items: center;
+    justify-content: space-between;
     margin-bottom: 24px;
 
     &-left {
+      color: @NL0;
       font-weight: 500;
       font-size: 14px;
-      color: @NL0;
     }
 
     &-right {
       display: flex;
-      height: 28px;
       align-items: center;
-      font-size: 14px;
+      justify-content: flex-end;
+      height: 28px;
       color: @NL0;
+      font-size: 14px;
     }
   }
 
-  &-list {
+  /* stylelint-disable-next-line selector-class-pattern */
+  &-list&-innerScroll {
+    height: 100%;
     overflow: overlay !important;
   }
+
+  // 当出现多行的时候 会顶出一个滚动条 通过复写三方库的样式覆盖
+  &-list&-canNotInnerScroll {
+    overflow: hidden !important;
+  }
+
+  &-list {
+    &::-webkit-scrollbar-thumb {
+      background: @NL90;
+      background-clip: padding-box;
+      border: 3px solid transparent;
+      border-radius: 6px;
+    }
+
+    &::-webkit-scrollbar {
+      width: 12px;
+      height: 12px;
+      min-height: 12px;
+      background-color: transparent;
+    }
+  }
+
+  &-sortIcon {
+    margin-top: -2px;
+    margin-left: 4px;
+  }
+
+  &-column-resizable {
+    overflow: overlay;
+
+    .ant-block-table-thead,
+    .ant-block-table-tbody {
+      .ant-block-table-row {
+        .ant-block-table {
+          &-cell {
+            flex: none;
+          }
+
+          &-thead {
+            &::-webkit-scrollbar {
+              display: none;
+            }
+          }
+
+          &-tbody {
+            overflow: initial;
+          }
+        }
+      }
+    }
+  }
 }

package/es/Tabs/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './style';
+export declare type TabsSize = 'default' | 'large';
 export interface ITabsProps {
     /**
      * @description 大小

package/es/Tabs/index.js

@@ -1,3 +1,5 @@
+import "antd/es/tabs/style";
+import _Tabs from "antd/es/tabs";
 var _excluded = ["size", "className", "adaptHeight"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -10,12 +12,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React from 'react';
-import AntdTabs from 'antd/lib/tabs';
+import React from 'react'; // import AntdTabs, { TabsProps } from 'antd/lib/tabs';
+
 import Icon from '../Icon';
 import TabPane from './TabPane';
 import classNames from 'classnames';
-import './style';
 export default function Tabs(props) {
   var size = props.size,
       className = props.className,
@@ -28,14 +29,15 @@ export default function Tabs(props) {
     tabsProps.size = size;
   }
 
-  return /*#__PURE__*/React.createElement(AntdTabs, _objectSpread({
+  return /*#__PURE__*/React.createElement(_Tabs, _objectSpread({
     moreIcon: /*#__PURE__*/React.createElement(Icon, {
       type: "more_vert",
       size: 18
     }),
     tabBarGutter: 24,
     className: classNames('ald-tabs', className, {
-      'ald-adapt-height': adaptHeight
+      'ald-adapt-height': adaptHeight,
+      'ald-tabs-default': size !== 'large'
     })
   }, tabsProps));
 }

package/es/Tabs/style/index.d.ts

@@ -1,2 +1,3 @@
+import 'antd/lib/tabs/style';
 import '../../style';
 import './index.less';

package/es/Tabs/style/index.js

@@ -1,2 +1,3 @@
+import 'antd/lib/tabs/style';
 import '../../style';
 import './index.less';

package/es/Tabs/style/index.less

@@ -1,6 +1,6 @@
 @import '../../style/index.less';
 
-.ald-tabs {
+.ant-tabs.ald-tabs {
   &.ant-tabs {
     color: @NL30;
   }
@@ -30,6 +30,13 @@
     }
   }
 
+  &.ald-tabs-default {
+    .ant-tabs-tab {
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+
   .ant-tabs-nav-more {
     margin: 0 !important;
   }

package/es/Tooltip/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './style';
 export declare type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
 export interface ITooltipProps {
     /**

package/es/Tooltip/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import AntdTooltip from 'antd/lib/tooltip';
 import classNames from 'classnames';
-import './style';
 export default function Tooltip(props) {
   var children = props.children,
       title = props.title,

package/es/index.d.ts

@@ -1,10 +1,20 @@
 /// <reference path="../typings.d.ts" />
 export { default as Button } from './Button';
+export type { IButtonProps as ButtonProps, Size, ButtonType } from './Button';
 export { default as Dropdown } from './Dropdown';
+export type { ActionType, IDropdownProps as DropdownProps, PlacementType } from './Dropdown';
+export { MenuClickEventHandler } from 'rc-menu/lib/interface';
 export { default as Menu } from './Menu';
+export type { IMenuProps as MenuProps } from './Menu';
 export { default as Input } from './Input';
+export type { IInputProps as InputProps, TSize, InputRef, TextAreaRef } from './Input';
 export { default as Tabs } from './Tabs';
+export type { ITabsProps as TabsProps, TabsSize } from './Tabs';
 export { default as Tooltip } from './Tooltip';
+export type { ITooltipProps as TooltipProps, ActionType as TooltipActionType } from './Tooltip';
 export { default as Select } from './Select';
+export type { ISelectProps as SelectProps, IOption } from './Select/interface';
 export { default as Table } from './Table';
+export type { ISort, TSortOrder, ITableProps, IColumn } from './Table/interface';
 export { default as Navigator } from './Navigator';
+export type { INavigatorProps as NavigatorProps, IMenuItem as NavigatorMenu } from './Navigator';

package/es/style/index.d.ts

@@ -1,2 +1,2 @@
-import 'antd/dist/antd.compact.css';
+import 'antd/lib/style/compact.less';
 import './index.less';

package/es/style/index.js

@@ -1,2 +1,2 @@
-import 'antd/dist/antd.compact.css';
+import 'antd/lib/style/compact.less';
 import './index.less';

package/es/style/themes/default/index.less

@@ -1,6 +1,6 @@
 @import './themeColor.module.less';
 @font-family:sans-serif,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol','Noto Color Emoji';
-@ald-prefix: 'ald';
+@ald-prefix: ant;
 
 
 // height rules

package/lib/Button/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './style';
 import type { ButtonProps as AntdButtonProps } from 'antd/lib/button';
 export declare type ButtonType = 'primary' | 'secondary' | 'danger' | 'text' | 'link';
 export declare type Size = 'small' | 'default' | 'large';

package/lib/Button/index.js

@@ -11,8 +11,6 @@ var _button = _interopRequireDefault(require("antd/es/button"));
 
 var _react = _interopRequireDefault(require("react"));
 
-require("./style");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _usePrefixCls = _interopRequireDefault(require("../_utils/hooks/usePrefixCls"));

package/lib/Button/style/index.less

@@ -2,9 +2,9 @@
 
 @ald-prefix:ant;
 @ald-iconfont-css-prefix:anticon;
-.@{ald-prefix}-btn {
 
-  &.@{ald-prefix}-btn {
+.ant-btn {
+  &.ant-btn {
     // &-loading::before{
     //   // display: none !important;
     // }
@@ -16,7 +16,7 @@
     &-link {
       font-size: 12px;
       height: @height-base;
-      padding: 0 12px;
+      padding: 0 11px;
       display: inline-flex;
       line-height: @height-base;
       align-items: center;
@@ -43,10 +43,11 @@
       box-shadow: none;
       border-radius: @border-radius-base;
       text-shadow: @text-shadow;
+
       &:hover,
       &:focus,
       &:active,
-      &.@{ald-prefix}-btn-loading {
+      &.ant-btn-loading {
         background-color: @B20;
         border-color: @B20;
         color: @ND0;
@@ -66,7 +67,8 @@
         }
       }
     }
-    &-dangerous.@{ald-prefix}-btn-primary {
+
+    &-dangerous.ant-btn-primary {
       background-color: @SC40;
       border-color: @SC40;
       color: @ND0;
@@ -78,9 +80,10 @@
         border-color: @SC20;
         color: @ND0;
       }
+
       &:focus,
       &:active,
-      &.@{ald-prefix}-btn-loading {
+      &.ant-btn-loading {
         background-color: @SC20;
         border-color: @SC20;
         color: @ND0;
@@ -112,7 +115,7 @@
       &:hover,
       &:focus,
       &:active,
-      &.@{ald-prefix}-btn-loading {
+      &.ant-btn-loading {
         background-color: @NL97;
         border-color: @NL90;
         color: @NL30;
@@ -140,10 +143,11 @@
       box-shadow: none;
       border-radius: @border-radius-base;
       text-shadow: @text-shadow;
+
       &:hover,
       &:focus,
       &:active,
-      &.@{ald-prefix}-btn-loading {
+      &.ant-btn-loading {
         background-color: @NL97;
         // border-color: @NL97;
         color: @NL30;
@@ -172,10 +176,11 @@
       box-shadow: none;
       border-radius: @border-radius-base;
       text-shadow: @text-shadow;
+
       &:hover,
       &:focus,
       &:active,
-      &.@{ald-prefix}-btn-loading {
+      &.ant-btn-loading {
         background-color: @BG100;
         border-color: @BG100;
         color: @B20;
@@ -202,7 +207,8 @@
       vertical-align: bottom;
       height: @height-base;
       width: @height-base;
-      &.@{ald-prefix}-btn-loading-icon {
+
+      &.ant-btn-loading-icon {
         vertical-align: baseline;
       }
       .@{ald-iconfont-css-prefix} {
@@ -225,12 +231,14 @@
       height: 32px;
       font-size: 14px;
       min-width: auto;
-      &.@{ald-prefix}-btn-icon-only {
+
+      &.ant-btn-icon-only {
         height: 32px;
         width: 32px;
         min-width: auto;
       }
-      &.@{ald-prefix}-btn-circle {
+
+      &.ant-btn-circle {
         width: 32px;
         height: 32px;
         border-radius: 50%;
@@ -240,12 +248,15 @@
     &-sm {
       height: 24px;
       border-radius: @border-radius-sm;
-      &.@{ald-prefix}-btn-icon-only {
+      line-height: 22px;
+
+      &.ant-btn-icon-only {
         height: 24px;
         width: 24px;
         border-radius: @border-radius-sm;
       }
-      &.@{ald-prefix}-btn-circle {
+
+      &.ant-btn-circle {
         width: 32px;
         height: 32px;
         border-radius: 50%;

package/lib/Dropdown/Button.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { ButtonType, Size } from '../Button';
-import './style';
+import '../Button/style';
 export declare type ActionType = 'hover' | 'click' | 'contextMenu';
 export interface IDropdownButton {
     /**

package/lib/Dropdown/Button.js

@@ -9,12 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
+require("../Button/style");
+
 var _index = _interopRequireDefault(require("./index"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-require("./style");
-
 var _excluded = ["children", "overlay", "placement", "trigger", "visible", "disabled", "onVisibleChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Dropdown/index.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import DropdownButton from './Button';
-import './style';
 export declare type ActionType = 'hover' | 'click' | 'contextMenu';
+export declare type PlacementType = 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight';
 export interface IDropdownProps {
     /**
      * @description 关闭后是否销毁Dropdown