@aloudata/aloudata-design 1.5.4 → 1.6.1

package/dist/Button/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["type", "size", "shape", "loading", "disabled", "icon", "className"];
+var _excluded = ["type", "size", "shape", "loading", "disabled", "icon", "className", "prefixCls"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -14,10 +14,11 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import { LoadingLine } from '@aloudata/icons-react';
 import { Button as AntdButton } from 'antd';
+import { useCompactItemContext } from 'antd/lib/space/Compact';
 import classNames from 'classnames';
 import React, { useContext } from 'react';
+import { ConfigContext } from "../ConfigProvider";
 import SizeContext from "../ConfigProvider/sizeContext";
-var iconPrefixCls = 'aldicon';
 var ICON_LARGE = 20;
 var ICON_MIDDLE = 16;
 var ICON_SMALL = 14;
@@ -73,7 +74,6 @@ export var setIcon = function setIcon(iconNode, size, loading) {
       fill: 'currentColor'
     }, iconNode.props);
 
-    p.className = classNames("".concat(iconPrefixCls, "-icon-left"), p.className, iconPrefixCls);
     p.size = getIconSize(size);
     return /*#__PURE__*/React.cloneElement(iconNode, p);
   }
@@ -82,7 +82,6 @@ export var setIcon = function setIcon(iconNode, size, loading) {
     return /*#__PURE__*/React.createElement(LoadingLine, {
       spin: true,
       size: getIconSize(size),
-      className: classNames("".concat(iconPrefixCls, "-icon-left"), iconPrefixCls),
       fill: "currentColor"
     });
   }
@@ -101,15 +100,27 @@ function Button(props) {
       disabled = props.disabled,
       icon = props.icon,
       className = props.className,
+      customizePrefixCls = props.prefixCls,
       rest = _objectWithoutProperties(props, _excluded);
 
   var contentSize = useContext(SizeContext);
-  var size = customSize || contentSize || 'middle';
+
+  var _React$useContext = React.useContext(ConfigContext),
+      getPrefixCls = _React$useContext.getPrefixCls,
+      direction = _React$useContext.direction;
+
+  var prefixCls = getPrefixCls('btn', customizePrefixCls); // ===================== Compact Item =====================
+
+  var _useCompactItemContex = useCompactItemContext(prefixCls, direction),
+      compactSize = _useCompactItemContex.compactSize,
+      compactItemClassnames = _useCompactItemContex.compactItemClassnames;
+
+  var size = compactSize || customSize || contentSize || 'middle';
   return /*#__PURE__*/React.createElement(AntdButton, _extends({}, rest, {
     disabled: loading ? true : disabled,
     icon: setIcon(icon, size, loading),
     type: getButtonType(type),
-    className: classNames(btnPrefix, "".concat(btnPrefix, "-").concat(type), className, getButtonSizeClass(size)),
+    className: classNames(btnPrefix, "".concat(btnPrefix, "-").concat(type), className, getButtonSizeClass(size), compactItemClassnames),
     danger: getDangerStatus(type),
     shape: getShape(shape)
   }), props.children);

package/dist/Button/style/index.less

@@ -1,7 +1,7 @@
 @import '../../style/index.less';
 @import './variables.less';
 
-.ald-btn.ant-btn {
+.ant-btn.ald-btn {
   &.ald-btn {
     // &-loading::before{
     //   // display: none !important;
@@ -20,6 +20,7 @@
       text-shadow: none;
       text-decoration: none;
 
+      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
       &:focus-visible {
         outline: none;
       }
@@ -236,139 +237,84 @@
       padding: 0;
       vertical-align: baseline;
     }
+  }
+
+  &-large {
+    min-width: auto;
+    height: @button-height-large;
+    padding: @button-border-padding-large;
+    font-size: @button-text-size-large;
+    line-height: 24px;
+    border-radius: @button-border-radius-large;
 
-    &-large {
-      min-width: auto;
+    &.ant-btn-icon-only {
+      min-width: @button-height-large;
       height: @button-height-large;
-      padding: @button-border-padding-large;
-      font-size: @button-text-size-large;
-      line-height: 24px;
       border-radius: @button-border-radius-large;
+    }
 
-      &.ant-btn-icon-only {
-        min-width: @button-height-large;
-        height: @button-height-large;
-        border-radius: @button-border-radius-large;
-      }
+    &.ant-btn-circle {
+      min-width: @button-height-large;
+      height: @button-height-large;
+      border-radius: 50%;
+    }
 
-      &.ant-btn-circle {
-        min-width: @button-height-large;
-        height: @button-height-large;
-        border-radius: 50%;
-      }
+    gap: @button-left-icon-margin-right-large;
 
-      // .aldicon-icon-left {
-      //   svg {
-      //     vertical-align: -4px;
-      //   }
-      // }
-
-      gap: @button-left-icon-margin-right-large;
-      // .aldicon-icon-left + span {
-      //   margin-left: @button-left-icon-margin-right-large;
-      // }
-      &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
-        min-width: @button-text-min-width-large;
-      }
+    &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
+      min-width: @button-text-min-width-large;
     }
+  }
 
-    &-middle {
-      min-width: auto;
+  &-middle {
+    min-width: auto;
+    height: @button-height-middle;
+    padding: @button-border-padding-middle;
+    font-size: @button-text-size-middle;
+    border-radius: @button-border-radius-middle;
+
+    &.ant-btn-icon-only {
+      min-width: @button-height-middle;
       height: @button-height-middle;
-      padding: @button-border-padding-middle;
-      font-size: @button-text-size-middle;
       border-radius: @button-border-radius-middle;
+    }
 
-      &.ant-btn-icon-only {
-        min-width: @button-height-middle;
-        height: @button-height-middle;
-        border-radius: @button-border-radius-middle;
-      }
+    &.ant-btn-circle {
+      min-width: @button-height-middle;
+      height: @button-height-middle;
+      border-radius: 50%;
+    }
 
-      &.ant-btn-circle {
-        min-width: @button-height-middle;
-        height: @button-height-middle;
-        border-radius: 50%;
-      }
+    gap: @button-left-icon-margin-right-middle;
 
-      // .aldicon-icon-left {
-      //   svg {
-      //     vertical-align: -3px;
-      //   }
-      // }
-
-      gap: @button-left-icon-margin-right-middle;
-      // .aldicon-icon-left + span {
-      //   margin-left: @button-left-icon-margin-right-middle;
-      // }
-      &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
-        min-width: @button-text-min-width-middle;
-      }
+    &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
+      min-width: @button-text-min-width-middle;
     }
+  }
 
-    &-small {
+  &-small {
+    height: @button-height-small;
+    padding: @button-border-padding-small;
+    font-size: @button-text-size-small;
+    line-height: 22px;
+    border-radius: @button-border-radius-small;
+
+    &.ant-btn-icon-only {
+      min-width: @button-height-small;
       height: @button-height-small;
-      padding: @button-border-padding-small;
-      font-size: @button-text-size-small;
-      line-height: 22px;
       border-radius: @button-border-radius-small;
+    }
 
-      &.ant-btn-icon-only {
-        min-width: @button-height-small;
-        height: @button-height-small;
-        border-radius: @button-border-radius-small;
-      }
+    &.ant-btn-circle {
+      min-width: @button-height-small;
+      height: @button-height-small;
+      border-radius: 50%;
+    }
 
-      &.ant-btn-circle {
-        min-width: @button-height-small;
-        height: @button-height-small;
-        border-radius: 50%;
-      }
+    gap: @button-left-icon-margin-right-small;
 
-      // .aldicon-icon-left {
-      //   svg {
-      //     vertical-align: -2px;
-      //   }
-      // }
-
-      gap: @button-left-icon-margin-right-small;
-      // .aldicon-icon-left + span {
-      //   margin-left: @button-left-icon-margin-right-small;
-      // }
-      &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
-        min-width: @button-text-min-width-small;
-      }
+    &:not(.ant-btn-circle):not(.ant-btn-icon-only):not(.ald-btn-link) {
+      min-width: @button-text-min-width-small;
     }
-
-    // &-mini {
-    //   height: @button-height-mini;
-    //   padding: @button-border-padding-mini;
-    //   font-size: @button-text-size-mini;
-    //   line-height: 22px;
-    //   border-radius: @button-border-radius-mini;
-
-    //   &.ant-btn-icon-only {
-    //     min-width: @button-height-mini;
-    //     height: @button-height-mini;
-    //     border-radius: @button-border-radius-mini;
-    //   }
-
-    //   &.ant-btn-circle {
-    //     min-width: @button-height-mini;
-    //     height: @button-height-mini;
-    //     border-radius: 50%;
-    //   }
-
-    //   .aldicon-icon-left {
-    //     svg {
-    //       vertical-align: -2px;
-    //     }
-    //   }
-
-    //   gap:@button-left-icon-margin-right-mini;
-    //   // .aldicon-icon-left + span {
-    //   //   margin-left: @button-left-icon-margin-right-mini;
-    //   // }
-    // }
   }
 }

package/dist/Button/style/variables.less

@@ -1,5 +1,4 @@
 @ald-prefix: ald;
-@ald-iconfont-css-prefix: aldicon;
 
 @button-padding: 0 12px;
 

package/dist/ColorPicker/style/index.less

@@ -50,8 +50,8 @@
   background: #fff;
   border: 1px solid #dbdbdb;
   box-sizing: border-box;
-  box-shadow: 0 4px 6px -2px rgb(16 24 40 / 3%),
-    0 12px 16px -4px rgb(16 24 40 / 8%);
+  box-shadow: 0 4px 6px -2px rgb(16 24 40 / 0.03),
+    0 12px 16px -4px rgb(16 24 40 / 0.08);
   border-radius: 2px;
   padding: 8px 7px;
 

package/dist/ConfigProvider/index.d.ts

@@ -4,7 +4,8 @@ import React from 'react';
 import { getUsersByIdsType, getUsersByKeywordsType } from './getUserList';
 import useGetUserList from './hooks/useGetUserList';
 import SizeContext from './sizeContext';
-export type { ConfigConsumer, ConfigConsumerProps, configConsumerProps, ConfigContext, CSPConfig, DirectionType, globalConfig, RenderEmptyHandler, } from 'antd/lib/config-provider/';
+export { ConfigContext } from 'antd/lib/config-provider';
+export type { ConfigConsumer, ConfigConsumerProps, configConsumerProps, CSPConfig, DirectionType, globalConfig, RenderEmptyHandler, } from 'antd/lib/config-provider/';
 interface AldCustomConfigProviderProps extends ConfigProviderProps {
     children?: React.ReactNode;
     getUsersByIds?: getUsersByIdsType;

package/dist/ConfigProvider/index.js

@@ -3,6 +3,7 @@ import React from 'react';
 import getUserListContext from "./getUserList";
 import useGetUserList from "./hooks/useGetUserList";
 import SizeContext from "./sizeContext";
+export { ConfigContext } from 'antd/lib/config-provider';
 
 var AldCustomConfigProvider = function AldCustomConfigProvider(props) {
   var children = props.children,

package/dist/DataPreviewTable/components/Body/SkeletonBody.js

@@ -35,10 +35,10 @@ function SkeletonBody(props) {
   }, [rows, row]);
   return /*#__PURE__*/React.createElement("div", {
     className: "ald-data-preview-table-body"
-  }, datasource.slice(startRowIndex, endRowIndex).map(function (x, rowIndex) {
+  }, datasource.slice(startRowIndex, endRowIndex + 1).map(function (x, rowIndex) {
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: rowIndex
-    }, row.slice(startIndex, endIndex).map(function (cell, index) {
+    }, row.slice(startIndex, endIndex + 1).map(function (cell, index) {
       var columnIndex = startIndex + index;
       var style = {
         height: CELL_HEIGHT,

package/dist/DataPreviewTable/components/Body/index.js

@@ -24,13 +24,14 @@ function Body(props) {
       startRowIndex = _props$rowRange[0],
       endRowIndex = _props$rowRange[1];
 
+  console.log(columnLayout, columns, 'columnLayout---body');
   return /*#__PURE__*/React.createElement("div", {
     className: "ald-data-preview-table-body"
   }, datasource.slice(startRowIndex, endRowIndex).map(function (row, rowIndex) {
     var currentRowIndex = startRowIndex + rowIndex;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: currentRowIndex
-    }, row.slice(startIndex, endIndex).map(function (cell, index) {
+    }, row.slice(startIndex, endIndex + 1).map(function (cell, index) {
       var columnIndex = startIndex + index;
       var style = {
         height: CELL_HEIGHT,

package/dist/DataPreviewTable/components/Header/index.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { IColumnLayout, PreviewColumn } from '../../interface';
 interface IHeader {
     columns: PreviewColumn[];
     columnLayout: IColumnLayout;
-    setWidth: React.Dispatch<React.SetStateAction<number[]>>;
+    setWidth: (columnId: string, width: number) => void;
     columnRange: [number, number];
 }
 export default function Header(props: IHeader): JSX.Element;

package/dist/DataPreviewTable/components/Header/index.js

@@ -1,34 +1,26 @@
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useCallback } from 'react';
+import React from 'react';
 import { HEADER_HEIGHT } from "../../constant";
 import DragBar from "../DragBar";
 export default function Header(props) {
   var columns = props.columns,
       columnLayout = props.columnLayout,
       setWidth = props.setWidth,
-      columnRange = props.columnRange;
-  var dragBarOnChange = useCallback(function (columnId, width) {
-    var index = columns.findIndex(function (item) {
-      return item.id === columnId;
-    });
-    setWidth(function (prev) {
-      var next = _toConsumableArray(prev);
+      _props$columnRange = _slicedToArray(props.columnRange, 2),
+      startIndex = _props$columnRange[0],
+      endIndex = _props$columnRange[1];
 
-      next[index] = width;
-      return next;
-    });
-  }, [columns, setWidth]);
   return /*#__PURE__*/React.createElement("div", {
     className: "ald-data-preview-header",
     style: {
@@ -36,7 +28,7 @@ export default function Header(props) {
       top: 0,
       left: 0
     }
-  }, columns.slice(columnRange[0], columnRange[1]).map(function (column) {
+  }, columns.slice(startIndex, endIndex + 1).map(function (column) {
     var _column$renderHeader;
 
     var innerCell = (_column$renderHeader = column.renderHeader) === null || _column$renderHeader === void 0 ? void 0 : _column$renderHeader.call(column, column);
@@ -62,7 +54,7 @@ export default function Header(props) {
     })), /*#__PURE__*/React.createElement(DragBar, {
       columnId: column.id,
       wrapWidth: columnLayout[column.id].width,
-      onChange: dragBarOnChange
+      onChange: setWidth
     }));
   }));
 }

package/dist/DataPreviewTable/hooks/useDirection.d.ts

@@ -1,28 +1,11 @@
 import { RefObject } from 'react';
 import { IColumnLayout, PreviewColumn } from '../interface';
-export interface IScrollData {
-    scrollLeft: number;
-    scrollTop: number;
-    direction: IScrollDirection;
-}
-export interface IScrollDirection {
-    horizontal: EScrollHorizontalDirection;
-    vertical: EScrollVerticalDirection;
-    current: EScrollHorizontalDirection | EScrollVerticalDirection | 'init';
-}
-export declare enum EScrollHorizontalDirection {
-    SCROLL_TO_LEFT = "toLeft",
-    SCROLL_TO_RIGHT = "toRight"
-}
-export declare enum EScrollVerticalDirection {
-    SCROLL_TO_TOP = "toTop",
-    SCROLL_TO_BOTTOM = "toBottom"
-}
 export default function useDirection(columns: PreviewColumn[], wrapRef: RefObject<HTMLDivElement>): {
-    setRange: (scrollTop: number, scrollLeft: number) => void;
     columnRange: [number, number];
     rowRange: [number, number];
-    setColumnsWidth: import("react").Dispatch<import("react").SetStateAction<number[]>>;
+    setColumnsWidth: (columnId: string, width: number) => void;
     columnLayout: IColumnLayout;
-    columnsWidth: number[];
+    contentWidth: number;
+    tableColumns: PreviewColumn[];
+    onScroll: () => void;
 };