@aloudata/aloudata-design 0.3.1 → 0.3.4

package/es/Table/style/index.less

@@ -1,14 +1,17 @@
 @import '../../style/index.less';
+@import '../../Empty/style/index.less';
+@import '../../message/style/index.less';
 
 @ald-iconfont-css-prefix: anticon;
-@table-row-height: 48px;
+@table-head-row-height: 48px;
+@table-body-row-height: 68px;
 
 .ald-table {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
   overflow: hidden;
+  user-select: none;
 
   &-page-loading {
     opacity: 0;
@@ -21,6 +24,16 @@
     overflow: hidden;
   }
 
+  &-inner-wrap {
+    width: 100%;
+    overflow-x: overlay;
+  }
+
+  &-tableHeadScrollWrap {
+    width: 100%;
+    overflow-x: hidden;
+  }
+
   &-cell {
     flex-grow: 1;
     height: unset;
@@ -35,8 +48,7 @@
   }
 
   &-row {
-    max-width: 100%;
-    height: 48px;
+    height: @table-head-row-height;
 
     &-ellipsis {
       .ald-table-cell {
@@ -48,8 +60,12 @@
   }
 
   &-thead {
+    flex: 1;
+    overflow: hidden;
+
     .ald-table-row {
-      height: 48px;
+      min-width: 9999px; // 防止拖动时的闪动
+      height: @table-head-row-height;
     }
 
     .ald-table-cell {
@@ -103,7 +119,7 @@
     }
 
     .ald-table-row {
-      height: 68px;
+      height: @table-body-row-height;
 
       .ald-table-cell {
         padding: 24px;
@@ -124,10 +140,18 @@
     }
   }
 
+  &-tbody&-tbody-innerScroll {
+    overflow: hidden;
+  }
+
+  &-row-list-wrap {
+    overflow: unset;
+  }
+
   &-loading {
-    height: 48px;
+    height: @table-body-row-height;
     color: @NL80;
-    line-height: @table-row-height;
+    line-height: @table-body-row-height;
     text-align: center;
 
     &-icon {
@@ -145,6 +169,7 @@
       align-items: center;
       justify-content: center;
       padding-top: 84px;
+      padding-bottom: 84px;
     }
   }
 
@@ -170,33 +195,11 @@
     }
   }
 
-  /* 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;

package/es/Table/utils.d.ts

@@ -0,0 +1,15 @@
+import { IColumn } from './interface';
+export interface IWidthDetail {
+    width: number;
+    isSpecific: boolean;
+}
+export declare function getColumnsWidthMap<T>(columns: IColumn<T>[], clientWidth: number, lastWidthMap?: Map<string, IWidthDetail>): {
+    columnsWidthMap: Map<string, IWidthDetail>;
+    totalColumnWidth: number;
+};
+export declare function isPercentageWidth(width: string): boolean;
+export declare function isSpecificPxWidth(width: string): boolean;
+export declare function getValidWidthByNumber(width: number): number;
+export declare function getValidScrollThreshold(height: string | number, clientHeight: number): number;
+export declare function getPercentageValue(percentage: string, containerNum: number): number;
+export declare function getPxValue(px: string): number;

package/es/Table/utils.js

@@ -0,0 +1,131 @@
+var ZERO = 0;
+var NOT_SET = -1;
+var COLUMN_MIN_WIDTH = 72;
+var HUNDRED = 100; // TODO: 添加单侧
+
+export function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
+  var settedTotalWidth = ZERO;
+  var unsetWidthIndex = [];
+  var widthMap = new Map();
+  var totalColumnWidth = ZERO;
+  columns.forEach(function (item, index) {
+    var _lastWidthMap$get;
+
+    var key = index.toString();
+    var width = getWidthByColumnsWidth(clientWidth, item.width); // 首先判断是否是否是容器宽度的变化
+
+    var isSpecific = lastWidthMap ? (_lastWidthMap$get = lastWidthMap.get(key)) === null || _lastWidthMap$get === void 0 ? void 0 : _lastWidthMap$get.isSpecific : isSpecificWidth(item.width);
+
+    if (lastWidthMap && isSpecific) {
+      var _lastWidthMap$get2;
+
+      width = (_lastWidthMap$get2 = lastWidthMap.get(key)) === null || _lastWidthMap$get2 === void 0 ? void 0 : _lastWidthMap$get2.width;
+    }
+
+    if (width === NOT_SET) {
+      unsetWidthIndex.push(key);
+    } else {
+      settedTotalWidth += width;
+    }
+
+    widthMap.set(key, {
+      width: width,
+      isSpecific: isSpecific
+    });
+  }); // 设定宽度大于容器宽度时
+
+  if (settedTotalWidth < clientWidth) {
+    unsetWidthIndex.map(function (item) {
+      var _widthMap$get;
+
+      return widthMap.set(item, {
+        isSpecific: (_widthMap$get = widthMap.get(item)) === null || _widthMap$get === void 0 ? void 0 : _widthMap$get.isSpecific,
+        width: 72
+      });
+    });
+  } // 设定宽度小于容器宽度时
+
+
+  if (unsetWidthIndex.length > ZERO) {
+    var leftWidth = clientWidth - settedTotalWidth;
+    var average = getValidWidthByNumber(leftWidth / unsetWidthIndex.length);
+    unsetWidthIndex.map(function (item) {
+      var _widthMap$get2;
+
+      return widthMap.set(item, {
+        isSpecific: (_widthMap$get2 = widthMap.get(item)) === null || _widthMap$get2 === void 0 ? void 0 : _widthMap$get2.isSpecific,
+        width: average
+      });
+    });
+  }
+
+  columns.forEach(function (item, index) {
+    var _widthMap$get3;
+
+    var key = index.toString();
+    var width = (_widthMap$get3 = widthMap.get(key)) === null || _widthMap$get3 === void 0 ? void 0 : _widthMap$get3.width;
+    totalColumnWidth += width;
+  });
+  return {
+    columnsWidthMap: widthMap,
+    totalColumnWidth: totalColumnWidth
+  };
+}
+
+function getWidthByColumnsWidth(clientWidth, width) {
+  if (width === undefined) {
+    return NOT_SET;
+  }
+
+  if (typeof width === 'number') {
+    return getValidWidthByNumber(width);
+  }
+
+  if (isPercentageWidth(width)) {
+    return getPercentageValue(width, clientWidth);
+  }
+
+  if (isSpecificPxWidth(width)) {
+    var specificNum = getPxValue(width);
+    return getValidWidthByNumber(specificNum);
+  }
+
+  return NOT_SET;
+}
+
+export function isPercentageWidth(width) {
+  return /[0-9]{1,}%$/.test(width);
+}
+export function isSpecificPxWidth(width) {
+  return /[0-9]{1,}(px)$/.test(width);
+}
+
+function isSpecificWidth(width) {
+  return typeof width === 'number' || !!(width && isSpecificPxWidth(width));
+}
+
+export function getValidWidthByNumber(width) {
+  return width < COLUMN_MIN_WIDTH ? COLUMN_MIN_WIDTH : width;
+}
+export function getValidScrollThreshold(height, clientHeight) {
+  var scrollThreshold = ZERO;
+
+  if (typeof height === 'string') {
+    if (isPercentageWidth(height)) {
+      scrollThreshold = getPercentageValue(height, clientHeight);
+    } else {
+      scrollThreshold = getPxValue(height);
+    }
+  } else {
+    scrollThreshold = height;
+  }
+
+  return scrollThreshold;
+}
+export function getPercentageValue(percentage, containerNum) {
+  var percent = Math.floor(Number(percentage.replace('%', '')) / HUNDRED);
+  return getValidWidthByNumber(containerNum * percent);
+}
+export function getPxValue(px) {
+  return Number(px.replace('px', ''));
+}

package/es/Tabs/index.js

@@ -1,3 +1,5 @@
+import "@aloudata/icons-react/styles/index.less";
+import _More from "@aloudata/icons-react/es/icons/More";
 import "antd/es/tabs/style";
 import _Tabs from "antd/es/tabs";
 var _excluded = ["size", "className", "popupClassName", "adaptHeight"];
@@ -14,8 +16,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React from 'react'; // import AntdTabs, { TabsProps } from 'antd/lib/tabs';
 
-import Icon from '../Icon';
-import Button from '../Button';
 import TabPane from './TabPane';
 import classNames from 'classnames';
 export default function Tabs(props) {
@@ -32,13 +32,11 @@ export default function Tabs(props) {
   }
 
   return /*#__PURE__*/React.createElement(_Tabs, Object.assign({
-    moreIcon: /*#__PURE__*/React.createElement(Button, {
-      size: "default",
-      type: "text",
-      icon: /*#__PURE__*/React.createElement(Icon, {
-        type: "more"
-      })
-    }),
+    moreIcon: /*#__PURE__*/React.createElement("div", {
+      className: "ald-tabs-moreIcon"
+    }, /*#__PURE__*/React.createElement(_More, {
+      color: "currentColor"
+    })),
     tabBarGutter: 24,
     popupClassName: classNames(popupClassName, 'ald-tabs-dropdown'),
     className: classNames('ald-tabs', className, {

package/es/Tabs/style/index.less

@@ -1,21 +1,22 @@
+/* stylelint-disable no-descending-specificity */
 @import '../../style/index.less';
 @import '../../Button/style/index.less';
 //status- default
-@Tabs-color: @NL30;
-@Tabs-fontWeight: 400;
+@tabs-color: @NL30;
+@tabs-fontWeight: 400;
 //active
-@Tabs-color-active: @B60;
-@Tabs-fontWeight-active: 600;
+@tabs-color-active: @B60;
+@tabs-fontWeight-active: 600;
 
 //middle - default
-@Tabs-fontSize: 14px;
-@Tabs-lineHeight: 20px;
-@Tabs-ink-link-bar-height: 2px;
+@tabs-font-size: 14px;
+@tabs-line-height: 20px;
+@tabs-ink-link-bar-height: 2px;
 //large
-@Tabs-fontSize-large: 16px;
-@Tabs-lineHeight-large: 24px;
-@Tabs-ink-link-bar-height-large: 3px;
-// @Tabs-
+@tabs-font-size-large: 16px;
+@tabs-line-height-large: 24px;
+@tabs-ink-link-bar-height-large: 3px;
+// @tabs-
 .ant-tabs.ald-tabs {
   &.ant-tabs {
     color: @NL30;
@@ -23,29 +24,29 @@
 
   .ant-tabs-tab {
     padding: 8px 0;
-    color: @Tabs-color;
-    font-weight: @Tabs-fontWeight;
-    font-size: @Tabs-fontSize;
-    line-height: @Tabs-lineHeight;
+    color: @tabs-color;
+    font-weight: @tabs-fontWeight;
+    font-size: @tabs-font-size;
+    line-height: @tabs-line-height;
 
     &:hover {
       color: inherit;
     }
 
     &.ant-tabs-tab-active {
-      font-weight: @Tabs-fontWeight-active;
+      font-weight: @tabs-fontWeight-active;
     }
   }
 
   .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-    color: @Tabs-color-active;
-    font-weight: @Tabs-fontWeight-active;
+    color: @tabs-color-active;
+    font-weight: @tabs-fontWeight-active;
     text-shadow: none;
   }
 
   .ant-tabs-ink-bar {
-    height: @Tabs-ink-link-bar-height;
-    background: @Tabs-color-active;
+    height: @tabs-ink-link-bar-height;
+    background: @tabs-color-active;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
   }
@@ -53,24 +54,55 @@
   /* large size */
   &.ant-tabs-large {
     .ant-tabs-tab {
-      font-size: @Tabs-fontSize-large;
-      line-height: @Tabs-lineHeight-large;
+      font-size: @tabs-font-size-large;
+      line-height: @tabs-line-height-large;
     }
 
     .ant-tabs-ink-bar {
-      height: @Tabs-ink-link-bar-height-large;
+      height: @tabs-ink-link-bar-height-large;
+    }
+
+    .ald-tabs-moreIcon {
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
     }
   }
 
   &.ald-tabs-default {
     .ant-tabs-tab {
-      font-size: @Tabs-fontSize;
-      line-height: @Tabs-lineHeight;
+      font-size: @tabs-font-size;
+      line-height: @tabs-line-height;
+    }
+
+    .ald-tabs-moreIcon {
+      width: 32px;
+      height: 32px;
+      border-radius: 6px;
     }
   }
 
   .ant-tabs-nav-more {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     margin: 0 !important;
+    padding: 2px;
+
+    .ald-tabs-moreIcon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: inherit;
+      font-size: inherit;
+    }
+
+    &.ant-tabs-dropdown-open {
+      .ald-tabs-moreIcon {
+        color: @B60;
+        background-color: @NL97;
+      }
+    }
   }
 
   /* body自适应高度 */

package/es/_utils/hooks/useId.d.ts

@@ -0,0 +1,4 @@
+/** Is client side and not jsdom */
+export declare const isBrowserClient: boolean;
+/** Get unique id for accessibility usage */
+export declare function getUUID(): number | string;

package/es/_utils/hooks/useId.js

@@ -0,0 +1,23 @@
+// @ts-nocheck
+import canUseDom from 'rc-util/lib/Dom/canUseDom';
+var uuid = 0;
+/** Is client side and not jsdom */
+// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+
+export var isBrowserClient = process.env.NODE_ENV !== 'test' && canUseDom();
+/** Get unique id for accessibility usage */
+
+export function getUUID() {
+  var retId; // Test never reach
+
+  /* istanbul ignore if */
+
+  if (isBrowserClient) {
+    retId = uuid;
+    uuid += 1;
+  } else {
+    retId = 'TEST_OR_SSR';
+  }
+
+  return retId;
+}

package/es/index.d.ts

@@ -1,13 +1,13 @@
 /// <reference path="../typings.d.ts" />
 export { default as Button } from './Button';
-export type { IButtonProps as ButtonProps, Size, ButtonType } from './Button';
+export type { IButtonProps as ButtonProps, 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 type { IInputProps as InputProps, InputRef, TextAreaRef } from './Input';
 export { default as Tabs } from './Tabs';
 export type { ITabsProps as TabsProps, TabsSize } from './Tabs';
 export { default as Tooltip } from './Tooltip';
@@ -20,6 +20,8 @@ export { default as Navigator } from './Navigator';
 export type { INavigatorProps as NavigatorProps, IMenuItem as NavigatorMenu, ISelectedMenuInfo as SelectedMenuInfo, } from './Navigator';
 export { default as Alert } from './Alert';
 export type { AlertProps } from './Alert';
+export { default as Card } from './Card';
+export type { CardProps } from './Card';
 export { default as Col } from './Col';
 export type { ColProps } from './Col';
 export type { TypographyProps } from './Typography';
@@ -44,9 +46,9 @@ export type { SpaceProps } from './Space';
 export { default as Space } from './Space';
 export type { SpinProps } from './Spin';
 export { default as Spin } from './Spin';
-export type { SwitchProps } from './Switch';
+export type { ISwitchProps as SwitchProps } from './Switch';
 export { default as Switch } from './Switch';
-export type { StepProps, StepsProps } from './Steps';
+export type { IStepProps as StepProps, IStepsProps as StepsProps } from './Steps';
 export { default as Steps } from './Steps';
 export { default as Form } from './Form';
 export type { FormInstance, FormProps, FormItemProps } from './Form';
@@ -55,7 +57,7 @@ export type { DividerProps } from './Divider';
 export { default as Drawer } from './Drawer';
 export type { DrawerProps } from './Drawer';
 export { default as Radio } from './Radio';
-export type { RadioProps, RadioChangeEvent, RadioGroupProps } from './Radio';
+export type { RadioProps, RadioGroupProps } from './Radio';
 export { default as Checkbox } from './Checkbox';
 export type { CheckboxProps, CheckboxOptionType } from './Checkbox';
 export { default as Modal } from './Modal';
@@ -71,3 +73,5 @@ export type { IEmptyProps as EmptyProps } from './Empty';
 export { default as Avatar } from './Avatar';
 export type { IAvatarProps as AvatarProps } from './Avatar';
 export { default as Icon } from './Icon';
+export type { PageHeaderProps } from './PageHeader';
+export { default as PageHeader } from './PageHeader';

package/es/index.js

@@ -9,6 +9,7 @@ export { default as Select } from './Select';
 export { default as Table } from './Table';
 export { default as Navigator } from './Navigator';
 export { default as Alert } from './Alert';
+export { default as Card } from './Card';
 export { default as Col } from './Col';
 export { default as Typography } from './Typography';
 export { default as Upload } from './Upload';
@@ -35,4 +36,5 @@ export { default as InputNumber } from './InputNumber';
 export { default as Breadcrumb } from './Breadcrumb';
 export { default as Empty } from './Empty';
 export { default as Avatar } from './Avatar';
-export { default as Icon } from './Icon';
+export { default as Icon } from './Icon';
+export { default as PageHeader } from './PageHeader';

package/es/locale/default.d.ts

@@ -0,0 +1,2 @@
+import defaultLocale from './zh_CN';
+export default defaultLocale;

package/es/locale/default.js

@@ -0,0 +1,2 @@
+import defaultLocale from './zh_CN';
+export default defaultLocale;

package/es/locale/en_US.d.ts

@@ -0,0 +1,3 @@
+import type { Locale } from '../locale-provider';
+declare const localeValues: Locale;
+export default localeValues;

package/es/locale/en_US.js

@@ -0,0 +1,132 @@
+/* eslint-disable no-template-curly-in-string */
+import Pagination from 'rc-pagination/lib/locale/en_US';
+import Calendar from 'antd/es/calendar/locale/en_US';
+import DatePicker from 'antd/es/date-picker/locale/en_US';
+import TimePicker from 'antd/es/time-picker/locale/en_US';
+var typeTemplate = '${label} is not a valid ${type}';
+var localeValues = {
+  locale: 'en',
+  Pagination: Pagination,
+  DatePicker: DatePicker,
+  TimePicker: TimePicker,
+  Calendar: Calendar,
+  global: {
+    placeholder: 'Please select'
+  },
+  Table: {
+    filterTitle: 'Filter menu',
+    filterConfirm: 'OK',
+    filterReset: 'Reset',
+    filterEmptyText: 'No filters',
+    filterCheckall: 'Select all items',
+    filterSearchPlaceholder: 'Search in filters',
+    emptyText: 'No data',
+    selectAll: 'Select current page',
+    selectInvert: 'Invert current page',
+    selectNone: 'Clear all data',
+    selectionAll: 'Select all data',
+    sortTitle: 'Sort',
+    expand: 'Expand row',
+    collapse: 'Collapse row',
+    triggerDesc: 'Click to sort descending',
+    triggerAsc: 'Click to sort ascending',
+    cancelSort: 'Click to cancel sorting'
+  },
+  Modal: {
+    okText: 'OK',
+    cancelText: 'Cancel',
+    justOkText: 'OK'
+  },
+  Popconfirm: {
+    okText: 'OK',
+    cancelText: 'Cancel'
+  },
+  Transfer: {
+    titles: ['', ''],
+    searchPlaceholder: 'Search here',
+    itemUnit: 'item',
+    itemsUnit: 'items',
+    remove: 'Remove',
+    selectCurrent: 'Select current page',
+    removeCurrent: 'Remove current page',
+    selectAll: 'Select all data',
+    removeAll: 'Remove all data',
+    selectInvert: 'Invert current page'
+  },
+  Upload: {
+    uploading: 'Uploading...',
+    removeFile: 'Remove file',
+    uploadError: 'Upload error',
+    previewFile: 'Preview file',
+    downloadFile: 'Download file'
+  },
+  Empty: {
+    description: 'No Data'
+  },
+  Icon: {
+    icon: 'icon'
+  },
+  Text: {
+    edit: 'Edit',
+    copy: 'Copy',
+    copied: 'Copied',
+    expand: 'Expand'
+  },
+  PageHeader: {
+    back: 'Back'
+  },
+  Form: {
+    optional: '(optional)',
+    defaultValidateMessages: {
+      default: 'Field validation error for ${label}',
+      required: 'Please enter ${label}',
+      enum: '${label} must be one of [${enum}]',
+      whitespace: '${label} cannot be a blank character',
+      date: {
+        format: '${label} date format is invalid',
+        parse: '${label} cannot be converted to a date',
+        invalid: '${label} is an invalid date'
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate
+      },
+      string: {
+        len: '${label} must be ${len} characters',
+        min: '${label} must be at least ${min} characters',
+        max: '${label} must be up to ${max} characters',
+        range: '${label} must be between ${min}-${max} characters'
+      },
+      number: {
+        len: '${label} must be equal to ${len}',
+        min: '${label} must be minimum ${min}',
+        max: '${label} must be maximum ${max}',
+        range: '${label} must be between ${min}-${max}'
+      },
+      array: {
+        len: 'Must be ${len} ${label}',
+        min: 'At least ${min} ${label}',
+        max: 'At most ${max} ${label}',
+        range: 'The amount of ${label} must be between ${min}-${max}'
+      },
+      pattern: {
+        mismatch: '${label} does not match the pattern ${pattern}'
+      }
+    }
+  },
+  Image: {
+    preview: 'Preview'
+  }
+};
+export default localeValues;