@hanwenbo/x-web-pro-components 0.0.1

package/lib/components/skeleton/index.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+export interface PageHeaderSkeletonProps {
+    active?: boolean;
+    className?: string;
+}
+export interface ListToolbarSkeletonProps {
+    active?: boolean;
+    className?: string;
+}
+export interface ListSkeletonItemProps {
+    active?: boolean;
+    className?: string;
+}
+export interface ListSkeletonProps {
+    active?: boolean;
+    itemCount?: number;
+    className?: string;
+}
+export interface ListPageSkeletonProps extends ListSkeletonProps {
+    pageHeader?: false;
+    statistic?: number | false;
+    actionButton?: React.ReactNode | false;
+    toolbar?: false;
+    list?: number | false;
+}
+export interface TableSkeletonProps {
+    active?: boolean;
+    rowCount?: number;
+    columnCount?: number;
+    className?: string;
+}
+export interface DescriptionsSkeletonProps {
+    active?: boolean;
+    column?: number;
+    className?: string;
+}
+export interface DescriptionsPageSkeletonProps extends DescriptionsSkeletonProps {
+    pageHeader?: false;
+    list?: false | number;
+}
+export interface ProSkeletonProps extends ListPageSkeletonProps, TableSkeletonProps, DescriptionsSkeletonProps {
+    type?: 'list' | 'result' | 'descriptions' | 'table' | 'pageHeader';
+    pageHeader?: false;
+    toolbar?: false;
+    statistic?: number | false;
+    actionButton?: React.ReactNode | false;
+    list?: number | false;
+}
+export declare const PageHeaderSkeleton: React.FC<PageHeaderSkeletonProps>;
+export declare const ListToolbarSkeleton: React.FC<ListToolbarSkeletonProps>;
+export declare const ListSkeletonItem: React.FC<ListSkeletonItemProps>;
+export declare const ListSkeleton: React.FC<ListSkeletonProps>;
+export declare const TableItemSkeleton: React.FC<TableSkeletonProps>;
+export declare const TableSkeleton: React.FC<TableSkeletonProps>;
+export declare const DescriptionsSkeleton: React.FC<DescriptionsSkeletonProps>;
+export declare const ProSkeleton: React.FC<ProSkeletonProps>;
+export declare const ListPageSkeleton: React.FC<ProSkeletonProps>;
+export declare const DescriptionsPageSkeleton: React.FC<ProSkeletonProps>;
+export declare const ResultPageSkeleton: React.FC<ProSkeletonProps>;
+export type { ListPageSkeletonProps as ProListPageSkeletonProps, DescriptionsPageSkeletonProps as ProDescriptionsPageSkeletonProps };
+export default ProSkeleton;

package/lib/components/skeleton/index.js

@@ -0,0 +1,394 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TableSkeleton = exports.TableItemSkeleton = exports.ResultPageSkeleton = exports.ProSkeleton = exports.PageHeaderSkeleton = exports.ListToolbarSkeleton = exports.ListSkeletonItem = exports.ListSkeleton = exports.ListPageSkeleton = exports.DescriptionsSkeleton = exports.DescriptionsPageSkeleton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _card = require("@hanwenbo/x-web-ui/card");
+var _skeleton = require("@hanwenbo/x-web-ui/skeleton");
+var _cn = require("@hanwenbo/x-web-ui/utils/cn");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var PageHeaderSkeleton = exports.PageHeaderSkeleton = function PageHeaderSkeleton(_ref) {
+  var _ref$active = _ref.active,
+    active = _ref$active === void 0 ? true : _ref$active,
+    className = _ref.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _cn.cn)('rounded-2xl border border-border bg-card p-5', className),
+    "data-pro-skeleton": "page-header",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.SkeletonTitle, {
+      animated: active,
+      width: "32%",
+      className: "mb-3"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.SkeletonParagraph, {
+      animated: active,
+      lineCount: 2
+    })]
+  });
+};
+var ListToolbarSkeleton = exports.ListToolbarSkeleton = function ListToolbarSkeleton(_ref2) {
+  var _ref2$active = _ref2.active,
+    active = _ref2$active === void 0 ? true : _ref2$active,
+    className = _ref2.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _cn.cn)('flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-border bg-card p-4', className),
+    "data-pro-skeleton": "list-toolbar",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.SkeletonTitle, {
+      animated: active,
+      width: 180,
+      className: "mb-0"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "flex items-center gap-3",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.SkeletonInput, {
+        animated: active,
+        width: 200
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+        animated: active,
+        width: 96,
+        height: 40,
+        borderRadius: 10
+      })]
+    })]
+  });
+};
+var ListSkeletonItem = exports.ListSkeletonItem = function ListSkeletonItem(_ref3) {
+  var _ref3$active = _ref3.active,
+    active = _ref3$active === void 0 ? true : _ref3$active,
+    className = _ref3.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _cn.cn)('rounded-2xl border border-border bg-card p-4', className),
+    "data-pro-skeleton": "list-item",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "flex items-start gap-4",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.SkeletonAvatar, {
+        animated: active,
+        size: 48
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "min-w-0 flex-1 space-y-3",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.SkeletonTitle, {
+          animated: active,
+          width: "28%",
+          className: "mb-0 block"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.SkeletonParagraph, {
+          animated: active,
+          lineCount: 2
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "flex items-center gap-2",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+            animated: active,
+            width: 72,
+            height: 28,
+            borderRadius: 999
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+            animated: active,
+            width: 72,
+            height: 28,
+            borderRadius: 999
+          })]
+        })]
+      })]
+    })
+  });
+};
+var ListSkeleton = exports.ListSkeleton = function ListSkeleton(_ref4) {
+  var _ref4$active = _ref4.active,
+    active = _ref4$active === void 0 ? true : _ref4$active,
+    _ref4$itemCount = _ref4.itemCount,
+    itemCount = _ref4$itemCount === void 0 ? 3 : _ref4$itemCount,
+    className = _ref4.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _cn.cn)('space-y-4', className),
+    "data-pro-skeleton": "list",
+    children: Array.from({
+      length: itemCount
+    }).map(function (_, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ListSkeletonItem, {
+        active: active
+      }, index);
+    })
+  });
+};
+var TableItemSkeleton = exports.TableItemSkeleton = function TableItemSkeleton(_ref5) {
+  var _ref5$active = _ref5.active,
+    active = _ref5$active === void 0 ? true : _ref5$active,
+    _ref5$rowCount = _ref5.rowCount,
+    rowCount = _ref5$rowCount === void 0 ? 5 : _ref5$rowCount,
+    _ref5$columnCount = _ref5.columnCount,
+    columnCount = _ref5$columnCount === void 0 ? 4 : _ref5$columnCount,
+    className = _ref5.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _cn.cn)('overflow-hidden rounded-2xl border border-border bg-card', className),
+    "data-pro-skeleton": "table",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "bg-muted/20 grid gap-3 border-b border-border px-4 py-3",
+      style: {
+        gridTemplateColumns: "repeat(".concat(columnCount, ", minmax(0, 1fr))")
+      },
+      children: Array.from({
+        length: columnCount
+      }).map(function (_, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+          animated: active,
+          height: 14,
+          width: "72%"
+        }, index);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "space-y-3 px-4 py-4",
+      children: Array.from({
+        length: rowCount
+      }).map(function (_, rowIndex) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "grid gap-3",
+          style: {
+            gridTemplateColumns: "repeat(".concat(columnCount, ", minmax(0, 1fr))")
+          },
+          children: Array.from({
+            length: columnCount
+          }).map(function (__, columnIndex) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+              animated: active,
+              height: 14,
+              width: columnIndex === columnCount - 1 ? '54%' : '88%'
+            }, columnIndex);
+          })
+        }, rowIndex);
+      })
+    })]
+  });
+};
+var TableSkeleton = exports.TableSkeleton = TableItemSkeleton;
+var DescriptionsSkeleton = exports.DescriptionsSkeleton = function DescriptionsSkeleton(_ref6) {
+  var _ref6$active = _ref6.active,
+    active = _ref6$active === void 0 ? true : _ref6$active,
+    _ref6$column = _ref6.column,
+    column = _ref6$column === void 0 ? 3 : _ref6$column,
+    className = _ref6.className;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _cn.cn)('grid gap-4', className),
+    style: {
+      gridTemplateColumns: "repeat(".concat(Math.max(1, column), ", minmax(0, 1fr))")
+    },
+    "data-pro-skeleton": "descriptions",
+    children: Array.from({
+      length: Math.max(column, 3)
+    }).map(function (_, index) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_card.Card, {
+        bodyClassName: "space-y-3",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+          animated: active,
+          height: 14,
+          width: "32%",
+          className: "block"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.SkeletonTitle, {
+          animated: active,
+          width: "56%",
+          className: "mb-0 block"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.SkeletonParagraph, {
+          animated: active,
+          lineCount: 2
+        })]
+      }, index);
+    })
+  });
+};
+var ResultPageSkeletonView = function ResultPageSkeletonView(_ref7) {
+  var _ref7$active = _ref7.active,
+    active = _ref7$active === void 0 ? true : _ref7$active,
+    className = _ref7.className,
+    _ref7$pageHeader = _ref7.pageHeader,
+    pageHeader = _ref7$pageHeader === void 0 ? true : _ref7$pageHeader;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_card.Card, {
+    className: (0, _cn.cn)('flex min-h-[320px] flex-col items-center justify-center gap-5', className),
+    "data-pro-skeleton": "result",
+    children: [pageHeader !== false ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "self-stretch",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.SkeletonTitle, {
+        animated: active,
+        width: "32%",
+        className: "mb-3"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+        animated: active,
+        width: 200,
+        height: 14
+      })]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+      animated: active,
+      width: 72,
+      height: 72,
+      borderRadius: 999
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "flex w-full max-w-[420px] flex-col items-center gap-3",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.SkeletonTitle, {
+        animated: active,
+        width: "44%",
+        className: "mb-0"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.SkeletonParagraph, {
+        animated: active,
+        lineCount: 2,
+        className: "w-full"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "flex items-center gap-3",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+        animated: active,
+        width: 108,
+        height: 40,
+        borderRadius: 10
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+        animated: active,
+        width: 108,
+        height: 40,
+        borderRadius: 10
+      })]
+    })]
+  });
+};
+var ProSkeleton = exports.ProSkeleton = function ProSkeleton(_ref8) {
+  var _ref8$type = _ref8.type,
+    type = _ref8$type === void 0 ? 'list' : _ref8$type,
+    _ref8$active = _ref8.active,
+    active = _ref8$active === void 0 ? true : _ref8$active,
+    _ref8$pageHeader = _ref8.pageHeader,
+    pageHeader = _ref8$pageHeader === void 0 ? true : _ref8$pageHeader,
+    _ref8$toolbar = _ref8.toolbar,
+    toolbar = _ref8$toolbar === void 0 ? true : _ref8$toolbar,
+    _ref8$itemCount = _ref8.itemCount,
+    itemCount = _ref8$itemCount === void 0 ? 5 : _ref8$itemCount,
+    _ref8$rowCount = _ref8.rowCount,
+    rowCount = _ref8$rowCount === void 0 ? 5 : _ref8$rowCount,
+    _ref8$columnCount = _ref8.columnCount,
+    columnCount = _ref8$columnCount === void 0 ? 4 : _ref8$columnCount,
+    _ref8$column = _ref8.column,
+    column = _ref8$column === void 0 ? 3 : _ref8$column,
+    _ref8$statistic = _ref8.statistic,
+    statistic = _ref8$statistic === void 0 ? false : _ref8$statistic,
+    actionButton = _ref8.actionButton,
+    className = _ref8.className,
+    list = _ref8.list;
+  var normalizeListCount = function normalizeListCount(size, fallback) {
+    if (size === false) {
+      return false;
+    }
+    if (typeof size === 'number' && Number.isFinite(size) && size >= 0) {
+      return size;
+    }
+    return fallback;
+  };
+  var listCount = normalizeListCount(list, itemCount);
+  if (type === 'result') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ResultPageSkeletonView, {
+      active: active,
+      className: className,
+      pageHeader: pageHeader
+    });
+  }
+  if (type === 'descriptions') {
+    var descriptionsListCount = normalizeListCount(list, 4);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _cn.cn)('space-y-4', className),
+      children: [pageHeader !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PageHeaderSkeleton, {
+        active: active
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(DescriptionsSkeleton, {
+        active: active,
+        column: column
+      }), descriptionsListCount !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)(TableSkeleton, {
+        active: active,
+        rowCount: descriptionsListCount
+      }) : null]
+    });
+  }
+  if (type === 'table') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _cn.cn)('space-y-4', className),
+      children: [pageHeader !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PageHeaderSkeleton, {
+        active: active
+      }) : null, toolbar !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ListToolbarSkeleton, {
+        active: active
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(TableSkeleton, {
+        active: active,
+        rowCount: rowCount,
+        columnCount: columnCount
+      })]
+    });
+  }
+  if (type === 'pageHeader') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(PageHeaderSkeleton, {
+      active: active,
+      className: className
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _cn.cn)('space-y-4', className),
+    children: [pageHeader !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PageHeaderSkeleton, {
+      active: active
+    }) : null, statistic !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3",
+      children: Array.from({
+        length: typeof statistic === 'number' ? statistic : 3
+      }).map(function (_, index) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_card.Card, {
+          bodyClassName: "space-y-3",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.SkeletonTitle, {
+            animated: active,
+            width: "24%",
+            className: "mb-0 block"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+            animated: active,
+            width: "60%",
+            height: 28,
+            className: "block"
+          })]
+        }, index);
+      })
+    }) : null, toolbar !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ListToolbarSkeleton, {
+      active: active
+    }) : null, actionButton !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "flex items-center justify-end",
+      children: actionButton || /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+        animated: active,
+        width: 96,
+        height: 40
+      })
+    }) : null, listCount !== false ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "grid gap-4 xl:grid-cols-[1.2fr_0.8fr]",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ListSkeleton, {
+        active: active,
+        itemCount: listCount
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "space-y-4",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.SkeletonImage, {
+          animated: active,
+          height: 180
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TableSkeleton, {
+          active: active,
+          rowCount: rowCount,
+          columnCount: columnCount
+        })]
+      })]
+    }) : null]
+  });
+};
+var ListPageSkeleton = exports.ListPageSkeleton = function ListPageSkeleton(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProSkeleton, _objectSpread(_objectSpread({}, props), {}, {
+    type: "list"
+  }));
+};
+var DescriptionsPageSkeleton = exports.DescriptionsPageSkeleton = function DescriptionsPageSkeleton(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProSkeleton, _objectSpread(_objectSpread({}, props), {}, {
+    type: "descriptions"
+  }));
+};
+var ResultPageSkeleton = exports.ResultPageSkeleton = function ResultPageSkeleton(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProSkeleton, _objectSpread(_objectSpread({}, props), {}, {
+    type: "result"
+  }));
+};
+var _default = exports.default = ProSkeleton;

package/lib/components/table/dragSortTable.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ProTableProps } from '../../types';
+export interface DragSortTableProps<RecordType extends Record<string, any> = Record<string, any>> extends Omit<ProTableProps<RecordType>, 'request'> {
+    dragSortKey?: string;
+    onDragSortEnd?: (beforeIndex: number, afterIndex: number, newDataSource: RecordType[]) => void;
+}
+export declare const DragSortTable: <RecordType extends Record<string, any> = Record<string, any>>({ rowKey, dataSource: controlledDataSource, columns, dragSortKey, onDataSourceChange, onDragSortEnd, headerTitle, toolBarRender, className, ...tableProps }: DragSortTableProps<RecordType>) => React.JSX.Element;
+export default DragSortTable;