@aloudata/aloudata-design 0.4.0-beta.6 → 0.4.0-beta.8

package/lib/InputNumber/type.d.ts

@@ -0,0 +1,161 @@
+/// <reference types="react" />
+import { InputNumberProps } from 'antd';
+export interface IInputNumberProps extends InputNumberProps {
+    /**
+     * @description   带标签的Input，设置后置标签
+     * @type  ReactNode
+     * @default    --
+     */
+    addonBefore?: React.ReactNode;
+    /**
+     * @description   带标签的Input，设置前置标签
+     * @type  ReactNode
+     * @default   --
+     */
+    addonAfter?: React.ReactNode;
+    /**
+     * @description  自动获取焦点
+     * @type boolean
+     * @default   false
+     */
+    autoFocus?: boolean;
+    /**
+     * @description   是否有边框
+     * @type  boolean
+     * @default    true
+     */
+    bordered?: boolean;
+    /**
+    * @description   是否显示增减按钮，也可以设置自定义箭头图标
+    * @type boolean
+      | {
+          upIcon?: React.ReactNode;
+          downIcon?: React.ReactNode;
+        };
+    * @default    -
+    */
+    controls?: boolean | {
+        upIcon?: React.ReactNode;
+        downIcon?: React.ReactNode;
+    };
+    /**
+     * @description   小数点
+     * @type  string
+     * @default    -
+     */
+    decimalSeparator?: string;
+    /**
+     * @description  初始值
+     * @type  number
+     * @default   -
+     */
+    defaultValue?: number;
+    /**
+     * @description  禁用
+     * @type  boolean
+     * @default    false
+     */
+    disabled?: boolean;
+    /**
+     * @description   制定输入框展示值的格式
+     * @type  (value: number | string | undefined, info: { userTyping: boolean; input: string }) => string
+     * @default   -
+     */
+    formatter?: (value: number | string | undefined, info: {
+        userTyping: boolean;
+        input: string;
+    }) => string;
+    /**
+     * @description   是否启用键盘快捷行为
+     * @type  boolean
+     * @default   true
+     */
+    keyboard?: boolean;
+    /**
+     * @description   最大值
+     * @type  number
+     * @default    Number.MAX_SAFE_INTEGER
+     */
+    max?: number;
+    /**
+     * @description   最小值
+     * @type  number
+     * @default    Number.MIN_SAFE_INTEGER
+     */
+    min?: number;
+    /**
+     * @description   指定从 formatter 里转换回数字的方式，和 formatter 搭配使用
+     * @type  (value: string) => number
+     * @default    -
+     */
+    parser?: (value: string | undefined) => number;
+    /**
+     * @description  数值精度，配置 formatter 时会以 formatter 为准
+     * @type number
+     * @default   -
+     */
+    precision?: number;
+    /**
+     * @description   只读
+     * @type  boolean
+     * @default    false
+     */
+    readonly?: boolean;
+    /**
+     * @description   设置校验状态
+     * @type  'warning' | 'error'
+     * @default    -
+     */
+    status?: 'warning' | 'error';
+    /**
+     * @description   带有前缀图标的input
+     * @type  ReactNode
+     * @default   -
+     */
+    prefix?: React.ReactNode;
+    /**
+     * @description   输入框大小
+     * @type 'small' | 'middle' | 'large'
+     * @default    -
+     */
+    size?: 'small' | 'middle' | 'large';
+    /**
+     * @description   每次改变步数，可以为小数
+     * @type  number | string
+     * @default    1
+     */
+    step?: number | string;
+    /**
+     * @description   字符值模式，开启后支持高精度小数。同时 onChange 将返回 string 类型
+     * @type  boolean
+     * @default    false
+     */
+    stringMode?: boolean;
+    /**
+     * @description   当前值
+     * @type  number
+     * @default   -
+     */
+    value?: number;
+    /**
+     * @description   变化回调
+     * @type   (value: number | string | null) => void
+     * @default    -
+     */
+    onChange?: (value: number | string | null) => void;
+    /**
+     * @description   按下回车的回调
+     * @type  (e: React.KeyboardEvent) => void
+     * @default    -
+     */
+    onPressEnter: (e: React.KeyboardEvent) => void;
+    /**
+     * @description   点击上下箭头的回调
+     * @type  (value: number|string, info: { offset: number|string, type: 'up' | 'down' }) => void
+     * @default    -
+     */
+    onStep: (value: number | string, info: {
+        offset: number | string;
+        type: 'up' | 'down';
+    }) => void;
+}

package/lib/InputNumber/type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/Steps/style/index.less

@@ -1,9 +1,7 @@
 @import '../../style/index.less';
 
-.ant-steps-item-icon {
-  width: 24px;
-  height: 24px;
-  margin: 6px 8px -2px 0;
+.ald-steps .ant-steps-item .ant-steps-item-container .ant-steps-item-icon {
+  margin: 6px 8px -2px 42px;
   font-size: 12px;
   line-height: 24px;
   text-align: center;
@@ -15,6 +13,10 @@
 .ant-steps.ald-steps {
   padding: 24px;
 
+  .ant-steps-item-container {
+    height: 49px;
+  }
+
   .ant-steps-item-content {
     display: flex;
     flex-direction: column;
@@ -34,12 +36,16 @@
   // 常规step
   .ant-steps-item {
     .ant-steps-item-tail {
+      display: flex;
+      align-items: flex-start;
+      height: 30px;
       margin-left: 50px;
       padding: 3.5px 7px;
 
       &::after {
         height: 2px;
         background-color: @NL90;
+        content: '';
       }
     }
 

package/lib/Table/Table.js

@@ -88,12 +88,12 @@ function Table(props, ref) {
       rowKey = props.rowKey,
       height = props.height;
 
-  var _useState = (0, _react.useState)(ZERO),
+  var _useState = (0, _react.useState)(undefined),
       _useState2 = _slicedToArray(_useState, 2),
       tableClientWidth = _useState2[0],
       setTableClientWidth = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(ZERO),
+  var _useState3 = (0, _react.useState)(undefined),
       _useState4 = _slicedToArray(_useState3, 2),
       tableClientHeight = _useState4[0],
       setTableClientHeight = _useState4[1];
@@ -102,7 +102,6 @@ function Table(props, ref) {
   var tableRef = (0, _react.useRef)(null);
   var tableHeadRef = (0, _react.useRef)(null);
   var tableBodyRef = (0, _react.useRef)(null);
-  var columnsRef = (0, _react.useRef)([]);
   var columnsWidthMapRef = (0, _react.useRef)();
   var columnsTotalWidthRef = (0, _react.useRef)(ZERO);
 
@@ -117,12 +116,7 @@ function Table(props, ref) {
   var _useTimeoutLock = (0, _useFrame.useTimeoutLock)(),
       _useTimeoutLock2 = _slicedToArray(_useTimeoutLock, 2),
       setScrollTarget = _useTimeoutLock2[0],
-      getScrollTarget = _useTimeoutLock2[1]; // 记录初始columns, 后续更改不响应
-
-
-  if (columns && columnsRef.current.length === ZERO) {
-    columnsRef.current = columns;
-  } // 初始化进入时 渲染表格容器宽度
+      getScrollTarget = _useTimeoutLock2[1]; // 初始化进入时 渲染表格容器宽度
 
 
   (0, _react.useEffect)(function () {
@@ -132,13 +126,17 @@ function Table(props, ref) {
   }, []); // 转换外部传入的columns
 
   var newColumns = (0, _react.useMemo)(function () {
-    var _getColumnsWidthMap = (0, _utils.getColumnsWidthMap)(columnsRef.current, tableClientWidth, columnsWidthMapRef.current),
+    if (!tableClientWidth) {
+      return [];
+    }
+
+    var _getColumnsWidthMap = (0, _utils.getColumnsWidthMap)(columns, tableClientWidth, columnsWidthMapRef.current),
         columnsWidthMap = _getColumnsWidthMap.columnsWidthMap,
         totalColumnWidth = _getColumnsWidthMap.totalColumnWidth;
 
     columnsWidthMapRef.current = columnsWidthMap;
     columnsTotalWidthRef.current = totalColumnWidth;
-    return columnsRef.current.map(function (column, index) {
+    return columns.map(function (column, index) {
       var _columnsWidthMapRef$c, _columnsWidthMapRef$c2;
 
       var key = index.toString(); // 不设置dataIndex同时进行排序 则报错
@@ -161,7 +159,7 @@ function Table(props, ref) {
         }
       });
     });
-  }, [sortable, tableClientWidth]); // 将rowId转为React Table支持的值
+  }, [columns, sortable, tableClientWidth]); // 将rowId转为React Table支持的值
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   var transformRowId = function transformRowId(row, relativeIndex, parent) {
@@ -187,7 +185,9 @@ function Table(props, ref) {
 
 
   var getTableInitSort = function getTableInitSort() {
-    if (!sortable || loadMore) {
+    var EMPTY_SIZE = 0;
+
+    if (!sortable || loadMore || newColumns.length === EMPTY_SIZE) {
       return [];
     }
 
@@ -243,7 +243,7 @@ function Table(props, ref) {
   var tableHeadNode = /*#__PURE__*/_react.default.createElement(_TableHead.default, {
     canResizeColumn: resizeColumn,
     headerGroups: headerGroups,
-    tableContentWidth: columnsTotalWidthRef.current,
+    // tableContentWidth={columnsTotalWidthRef.current}
     defaultSort: defaultSort,
     sortable: sortable,
     columns: newColumns,
@@ -304,6 +304,10 @@ function Table(props, ref) {
   }, []); // 内部滚动时 纵向的滚动
 
   var onBodyVerticalScroll = (0, _react.useCallback)(function (target) {
+    if (!tableClientHeight) {
+      return;
+    }
+
     var scrollHeight = target.scrollHeight,
         clientHeight = target.clientHeight,
         scrollTop = target.scrollTop;
@@ -357,6 +361,10 @@ function Table(props, ref) {
   }, [hasNextPage]); // 渲染有设置高度的表格
 
   var renderTableWithHeight = function renderTableWithHeight() {
+    if (!tableClientWidth || !tableClientHeight) {
+      return null;
+    }
+
     var renderNoHeightTableBody = function renderNoHeightTableBody() {
       if (loading && !rows.length) {
         return /*#__PURE__*/_react.default.createElement(_Loading.default, null);
@@ -387,21 +395,21 @@ function Table(props, ref) {
     }), renderNoHeightTableBody()));
   };
 
-  return /*#__PURE__*/_react.default.createElement(_rcResizeObserver.default, {
-    onResize: function onResize(_ref2) {
-      var clientWidth = _ref2.width,
-          clientHeight = _ref2.height;
-      setTableClientWidth(clientWidth);
-      setTableClientHeight(clientHeight);
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     key: tableKey,
     className: prefixCls,
     ref: tableRef,
     style: {
       height: !height ? 'unset' : height
     }
-  }, /*#__PURE__*/_react.default.createElement("div", Object.assign({}, getTableProps(), {
+  }, /*#__PURE__*/_react.default.createElement(_rcResizeObserver.default, {
+    onResize: function onResize(_ref2) {
+      var clientWidth = _ref2.width,
+          clientHeight = _ref2.height;
+      setTableClientWidth(clientWidth);
+      setTableClientHeight(clientHeight);
+    }
+  }, !tableClientWidth ? null : /*#__PURE__*/_react.default.createElement("div", Object.assign({}, getTableProps(), {
     className: (0, _classnames4.default)("".concat(prefixCls, "-table-wrap"), (_classnames3 = {}, _defineProperty(_classnames3, "".concat(prefixCls, "-init-loading"), data.length === ZERO && loading), _defineProperty(_classnames3, "".concat(prefixCls, "-empty"), data.length === ZERO && loading), _classnames3))
   }), height ? renderTableWithHeight() : renderTableWithoutHeight())));
 }

package/lib/Table/components/TableHead/index.d.ts

@@ -4,7 +4,6 @@ import { ISort, TSortOrder } from '../../interface';
 import { IWidthDetail } from '../../utils';
 interface ITableWithoutHeightProps<T extends object = {}> {
     headerGroups: HeaderGroup<T>[];
-    tableContentWidth: number;
     canResizeColumn?: boolean;
     defaultSort?: ISort<T>;
     sortable?: boolean;

package/lib/Table/components/TableHead/index.js

@@ -59,7 +59,6 @@ var ARRAY_FIRST_INDEX = 0;
 
 function TableHead(props) {
   var headerGroups = props.headerGroups,
-      tableContentWidth = props.tableContentWidth,
       canResizeColumn = props.canResizeColumn,
       defaultSort = props.defaultSort,
       _props$sortable = props.sortable,
@@ -251,7 +250,7 @@ function TableHead(props) {
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(prefixCls, "-thead"),
     style: {
-      width: tableContentWidth
+      width: columnsTotalWidthRef.current
     }
   }, headerGroups.map(function (headerGroup) {
     var _headerGroup$getHeade = headerGroup.getHeaderGroupProps(),

package/lib/Table/interface.d.ts

@@ -11,6 +11,7 @@ export interface IColumn<RecordType> {
     render?: (value: any, row: RecordType, index: number) => React.ReactNode;
     width?: number | string;
     minWidth?: number;
+    widthFlex?: boolean;
     sorter?: boolean | 'string' | 'number' | 'basic' | 'datetime' | 'alphanumeric';
     sortOrder?: TSortOrder;
     sortDirections?: Array<'ascend' | 'descend'>;

package/lib/Table/style/index.less

@@ -30,6 +30,7 @@
   }
 
   &-tableHeadScrollWrap {
+    display: flex;
     width: 100%;
     overflow-x: hidden;
   }
@@ -37,7 +38,7 @@
   &-cell {
     flex-grow: 1;
     height: unset;
-    color: @NL0;
+    color: inherit;
     text-align: left;
     word-break: break-all;
     border-bottom: 1px solid @NL95;

package/lib/Table/utils.js

@@ -12,7 +12,7 @@ exports.isPercentageWidth = isPercentageWidth;
 exports.isSpecificPxWidth = isSpecificPxWidth;
 var ZERO = 0;
 var NOT_SET = -1;
-var COLUMN_MIN_WIDTH = 72;
+var COLUMN_MIN_WIDTH = 80;
 var HUNDRED = 100; // TODO: 添加单侧
 
 function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
@@ -21,12 +21,19 @@ function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
   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 widthFlex = item.widthFlex;
+    var width = getWidthByColumnsWidth(clientWidth, item.width, widthFlex); // 首先判断是否是否是容器宽度的变化
+
+    var isSpecific;
 
-    var isSpecific = lastWidthMap ? (_lastWidthMap$get = lastWidthMap.get(key)) === null || _lastWidthMap$get === void 0 ? void 0 : _lastWidthMap$get.isSpecific : isSpecificWidth(item.width);
+    if (widthFlex) {
+      isSpecific = false;
+    } else {
+      var _lastWidthMap$get;
+
+      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;
@@ -52,7 +59,7 @@ function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
 
       return widthMap.set(item, {
         isSpecific: (_widthMap$get = widthMap.get(item)) === null || _widthMap$get === void 0 ? void 0 : _widthMap$get.isSpecific,
-        width: 72
+        width: COLUMN_MIN_WIDTH
       });
     });
   } // 设定宽度小于容器宽度时
@@ -84,8 +91,8 @@ function getColumnsWidthMap(columns, clientWidth, lastWidthMap) {
   };
 }
 
-function getWidthByColumnsWidth(clientWidth, width) {
-  if (width === undefined) {
+function getWidthByColumnsWidth(clientWidth, width, widthFlex) {
+  if (width === undefined || widthFlex) {
     return NOT_SET;
   }
 
@@ -138,7 +145,7 @@ function getValidScrollThreshold(height, clientHeight) {
 }
 
 function getPercentageValue(percentage, containerNum) {
-  var percent = Math.floor(Number(percentage.replace('%', '')) / HUNDRED);
+  var percent = Number(percentage.replace('%', '')) / HUNDRED;
   return getValidWidthByNumber(containerNum * percent);
 }
 

package/lib/Tabs/style/index.less

@@ -5,7 +5,7 @@
 @tabs-color: @NL30;
 @tabs-fontWeight: 400;
 //active
-@tabs-color-active: @B60;
+@tabs-color-active: @B30;
 @tabs-fontWeight-active: 600;
 
 //middle - default

package/lib/Tooltip/style/index.less

@@ -5,7 +5,7 @@
     padding: 6px 12px;
     line-height: 20px;
     background: @BG10;
-    border-radius: @border-radius-base;
+    border-radius: @ald-border-radius-base;
     box-shadow: none;
   }
 

package/lib/index.d.ts

@@ -55,18 +55,18 @@ export { default as Steps } from './Steps';
 export { default as Form } from './Form';
 export type { FormInstance, FormProps, FormItemProps } from './Form';
 export { default as Divider } from './Divider';
-export type { DividerProps } from './Divider';
+export type { IDividerProps as DividerProps } from './Divider';
 export { default as Drawer } from './Drawer';
 export type { DrawerProps } from './Drawer';
 export { default as Radio } from './Radio';
 export type { RadioProps, RadioGroupProps } from './Radio';
 export { default as Checkbox } from './Checkbox';
-export type { CheckboxProps, CheckboxOptionType } from './Checkbox';
+export type { ICheckboxProps as CheckboxProps, CheckboxOptionType } from './Checkbox';
 export { default as Modal } from './Modal';
 export type { ModalProps, ModalFuncProps } from './Modal';
 export { default as Popover } from './Popover';
 export type { PopoverProps } from './Popover';
-export type { InputNumberProps } from './InputNumber';
+export type { IInputNumberProps as InputNumberProps } from './InputNumber';
 export { default as InputNumber } from './InputNumber';
 export { default as Breadcrumb } from './Breadcrumb';
 export type { BreadcrumbProps, BreadcrumbItemProps } from './Breadcrumb';

package/lib/style/themes/default/scrollBar.less

@@ -1,13 +1,16 @@
-::-webkit-scrollbar-thumb {
-  background: @NL90;
-  background-clip: padding-box;
+&::-webkit-scrollbar {
+  width: 12px !important;
+  height: 12px !important;
+  opacity: 0.5;
+}
+
+&::-webkit-scrollbar-thumb {
+  background-color: rgba(152, 162, 179, 0.5);
   border: 3px solid transparent;
   border-radius: 6px;
+  background-clip: padding-box;
 }
 
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-  min-height: 12px;
+&::-webkit-scrollbar-track {
   background-color: transparent;
 }