@aloudata/aloudata-design 1.3.0 → 1.4.0

package/dist/DataPreviewTable/components/Body/Error.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface IErrorProps {
+    contentWidth: number;
+    wrapWidth: number;
+    errorMsg?: string;
+}
+declare function ErrorBody(props: IErrorProps): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ErrorBody>;
+export default _default;

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

@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+
+function ErrorBody(props) {
+  var contentWidth = props.contentWidth,
+      wrapWidth = props.wrapWidth,
+      _props$errorMsg = props.errorMsg,
+      errorMsg = _props$errorMsg === void 0 ? '加载失败' : _props$errorMsg;
+  var width = contentWidth > wrapWidth ? wrapWidth : contentWidth;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ald-data-preview-table-error",
+    style: {
+      width: width
+    }
+  }, errorMsg);
+}
+
+export default /*#__PURE__*/memo(ErrorBody);

package/dist/DataPreviewTable/components/Body/SkeletonBody.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IColumnLayout, PreviewColumn } from '../../interface';
+interface IHeader {
+    columns: PreviewColumn[];
+    columnLayout: IColumnLayout;
+    columnRange: [number, number];
+    rowRange: [number, number];
+    rows: number;
+}
+declare function SkeletonBody(props: IHeader): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof SkeletonBody>;
+export default _default;

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

@@ -0,0 +1,63 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+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 _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 _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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { memo, useMemo } from 'react';
+import Skeleton from "../../../Skeleton";
+import { CELL_HEIGHT, HEADER_HEIGHT } from "../../constant";
+
+function SkeletonBody(props) {
+  var columns = props.columns,
+      columnLayout = props.columnLayout,
+      _props$columnRange = _slicedToArray(props.columnRange, 2),
+      startIndex = _props$columnRange[0],
+      endIndex = _props$columnRange[1],
+      _props$rowRange = _slicedToArray(props.rowRange, 2),
+      startRowIndex = _props$rowRange[0],
+      endRowIndex = _props$rowRange[1],
+      rows = props.rows;
+
+  var row = useMemo(function () {
+    var newArray = new Array(columns.length).fill(0);
+    return newArray;
+  }, [columns]);
+  var datasource = useMemo(function () {
+    var newArray = new Array(rows).fill(row);
+    return newArray;
+  }, [rows, row]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ald-data-preview-table-body"
+  }, datasource.slice(startRowIndex, endRowIndex).map(function (x, rowIndex) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: rowIndex
+    }, row.slice(startIndex, endIndex).map(function (cell, index) {
+      var columnIndex = startIndex + index;
+      var style = {
+        height: CELL_HEIGHT,
+        width: columnLayout[columns[columnIndex].id].width,
+        top: rowIndex * CELL_HEIGHT + HEADER_HEIGHT,
+        left: columnLayout[columns[columnIndex].id].left,
+        position: 'absolute',
+        textAlign: columns[columnIndex].align || 'left'
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        key: columnIndex,
+        style: style,
+        className: "ald-data-preview-body-skeleton-cell"
+      }, /*#__PURE__*/React.createElement(Skeleton, {
+        active: true,
+        paragraph: false
+      }));
+    }));
+  }));
+}
+
+export default /*#__PURE__*/memo(SkeletonBody);

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IColumnLayout, PreviewColumn, TValue } from '../../interface';
+interface IHeader {
+    columns: PreviewColumn[];
+    columnLayout: IColumnLayout;
+    columnRange: [number, number];
+    datasource: TValue[][];
+    rowRange: [number, number];
+}
+declare function Body(props: IHeader): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Body>;
+export default _default;

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

@@ -0,0 +1,52 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+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 _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 _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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { memo } from 'react';
+import { CELL_HEIGHT, HEADER_HEIGHT } from "../../constant";
+
+function Body(props) {
+  var columns = props.columns,
+      columnLayout = props.columnLayout,
+      datasource = props.datasource,
+      _props$columnRange = _slicedToArray(props.columnRange, 2),
+      startIndex = _props$columnRange[0],
+      endIndex = _props$columnRange[1],
+      _props$rowRange = _slicedToArray(props.rowRange, 2),
+      startRowIndex = _props$rowRange[0],
+      endRowIndex = _props$rowRange[1];
+
+  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) {
+      var columnIndex = startIndex + index;
+      var style = {
+        height: CELL_HEIGHT,
+        width: columnLayout[columns[columnIndex].id].width,
+        top: currentRowIndex * CELL_HEIGHT + HEADER_HEIGHT,
+        left: columnLayout[columns[columnIndex].id].left,
+        position: 'absolute',
+        textAlign: columns[columnIndex].align || 'left'
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        key: columnIndex,
+        style: style,
+        className: "ald-data-preview-body-cell"
+      }, cell);
+    }));
+  }));
+}
+
+export default /*#__PURE__*/memo(Body);

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

@@ -0,0 +1,8 @@
+import React from 'react';
+declare function DragBar(props: {
+    wrapWidth: number;
+    columnId: string;
+    onChange: (columnId: string, width: number) => void;
+}): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DragBar>;
+export default _default;

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

@@ -0,0 +1,93 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+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 _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 _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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import classNames from 'classnames';
+import React, { memo, useCallback, useRef, useState } from 'react';
+import { createPortal, flushSync } from 'react-dom';
+import { COLUMN_MIN_WIDTH } from "../../constant";
+
+function DragBar(props) {
+  var wrapWidth = props.wrapWidth,
+      columnId = props.columnId,
+      onChange = props.onChange;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      show = _useState2[0],
+      setShow = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      dragBarLeft = _useState4[0],
+      setDragBarLeft = _useState4[1];
+
+  var dragElRef = useRef(null);
+  var mouseDownRef = useRef({
+    down: false,
+    clientX: 0
+  });
+  var getBarLeft = useCallback(function (currentClientX) {
+    var startClientX = mouseDownRef.current.clientX;
+    var offset = startClientX - currentClientX;
+
+    if (offset >= wrapWidth - COLUMN_MIN_WIDTH) {
+      return wrapWidth - COLUMN_MIN_WIDTH;
+    } else {
+      return offset;
+    }
+  }, [wrapWidth]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dragElRef,
+    onMouseDown: function onMouseDown(event) {
+      mouseDownRef.current = {
+        clientX: event.clientX,
+        down: true
+      };
+      setShow(true);
+    },
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    },
+    style: {
+      right: dragBarLeft
+    },
+    className: classNames('ald-data-preview-header-drag-bar', _defineProperty({}, 'ald-data-preview-header-drag-bar-active', show))
+  }, show ? /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+    onMouseMove: function onMouseMove(event) {
+      var mouseDownState = mouseDownRef.current;
+      if (mouseDownState.down === false) return;
+      var currentClientX = event.clientX;
+      flushSync(function () {
+        setDragBarLeft(getBarLeft(currentClientX));
+      });
+    },
+    onMouseUp: function onMouseUp(event) {
+      mouseDownRef.current.down = false;
+      setShow(false);
+      var currentClientX = event.clientX;
+      onChange(columnId, wrapWidth - getBarLeft(currentClientX));
+      setDragBarLeft(0);
+    },
+    style: {
+      position: 'fixed',
+      left: 0,
+      top: 0,
+      zIndex: 1000,
+      width: '100vw',
+      height: '100vh'
+    }
+  }), document.body) : null);
+}
+
+export default /*#__PURE__*/memo(DragBar);

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IColumnLayout, PreviewColumn } from '../../interface';
+interface IHeader {
+    columns: PreviewColumn[];
+    columnLayout: IColumnLayout;
+    setWidth: React.Dispatch<React.SetStateAction<number[]>>;
+    columnRange: [number, number];
+}
+export default function Header(props: IHeader): JSX.Element;
+export {};

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

@@ -0,0 +1,68 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+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 _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 _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(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; }
+
+import React, { useCallback } 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);
+
+      next[index] = width;
+      return next;
+    });
+  }, [columns, setWidth]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ald-data-preview-header",
+    style: {
+      position: 'sticky',
+      top: 0,
+      left: 0
+    }
+  }, columns.slice(columnRange[0], columnRange[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);
+    var style = {
+      height: HEADER_HEIGHT,
+      width: columnLayout[column.id].width,
+      top: 0,
+      left: columnLayout[column.id].left,
+      position: 'absolute'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: "ald-data-preview-header-cell",
+      key: column.id,
+      style: style
+    }, innerCell ? innerCell : /*#__PURE__*/React.createElement("div", {
+      className: "ald-data-preview-header-default"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "ald-data-preview-header-left"
+    }, column.icon !== undefined ? column.icon : /*#__PURE__*/React.createElement("span", null)), /*#__PURE__*/React.createElement("div", {
+      className: "ald-data-preview-header-name"
+    }, column.name), /*#__PURE__*/React.createElement("div", {
+      className: "ald-data-preview-header-right"
+    })), /*#__PURE__*/React.createElement(DragBar, {
+      columnId: column.id,
+      wrapWidth: columnLayout[column.id].width,
+      onChange: dragBarOnChange
+    }));
+  }));
+}

package/dist/DataPreviewTable/constant.d.ts

@@ -0,0 +1,6 @@
+export declare const CELL_HEIGHT = 20;
+export declare const HEADER_HEIGHT = 28;
+export declare const DEFAULT_COLUMN_WIDTH = 100;
+export declare const PRE_RENDER_RANGE = 100;
+export declare const UNDEFINED_INDEX = -1;
+export declare const COLUMN_MIN_WIDTH = 50;

package/dist/DataPreviewTable/constant.js

@@ -0,0 +1,7 @@
+export var CELL_HEIGHT = 20;
+export var HEADER_HEIGHT = 28;
+export var DEFAULT_COLUMN_WIDTH = 100;
+export var PRE_RENDER_RANGE = 100; //预渲染范围
+
+export var UNDEFINED_INDEX = -1;
+export var COLUMN_MIN_WIDTH = 50;

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

@@ -0,0 +1,28 @@
+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[]>>;
+    columnLayout: IColumnLayout;
+    columnsWidth: number[];
+};