@hsu-react/ui 0.0.1

package/lib/components/Upload/index.js

@@ -0,0 +1,211 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _hsuUtils = require("hsu-utils");
+var _indexModule = _interopRequireDefault(require("./index.module.less"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _FilePreview = _interopRequireDefault(require("../FilePreview"));
+var _hooks = require("./_hooks");
+var _utils = require("./_utils");
+var _UploadingItem = require("./_components/UploadingItem");
+var _UploadedItem = require("./_components/UploadedItem");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Upload = props => {
+  const {
+    disabled = false,
+    drop,
+    onChange,
+    fileList = [],
+    onUploading,
+    action,
+    chunkAction,
+    mergeChunkAction,
+    chunkNum = 3,
+    data,
+    sharding,
+    size,
+    accept = "",
+    onUploadingList,
+    rmFile,
+    onUploadSuccess,
+    className,
+    headers,
+    listProps,
+    listType,
+    en,
+    onDownload,
+    onPreview,
+    ...uploadConfig
+  } = props;
+  const {
+    fileList: _fileList,
+    setFileList,
+    onChange: handleFileListChange
+  } = (0, _hooks.useUploadFileList)({
+    fileList,
+    onChange,
+    rmFile
+  });
+  const {
+    uploadingList,
+    setUploadingList,
+    downloading,
+    setDownloading
+  } = (0, _hooks.useUploadOperations)({
+    onUploadingList
+  });
+  const {
+    file: previewFile,
+    open: previewOpen,
+    setFile: setPreviewFile
+  } = (0, _hooks.useUploadPreview)();
+
+  // 分片上传
+  const chunkCustomRequest = (0, _react.useCallback)(async options => {
+    const {
+      file: _file,
+      onSuccess,
+      onError,
+      onProgress
+    } = options;
+    if (typeof _file === "string" || !chunkAction || !mergeChunkAction) {
+      return;
+    }
+    const file = new File([_file], encodeURIComponent(_file.name), {
+      type: _file.type
+    });
+    file.uid = _file.uid;
+    await (0, _utils.chunkUpload)({
+      file,
+      chunkAction,
+      mergeChunkAction,
+      chunkNum,
+      data,
+      headers,
+      accept,
+      size,
+      en,
+      uploadingList,
+      setUploadingList,
+      onProgress,
+      onSuccess,
+      onError,
+      onUploadSuccess
+    });
+  }, [chunkAction, mergeChunkAction, chunkNum, data, headers, accept, size, en, uploadingList, setUploadingList, onUploadSuccess]);
+
+  // 普通上传
+  const customRequest = (0, _react.useCallback)(async options => {
+    const {
+      file: _file,
+      onSuccess,
+      onError,
+      onProgress
+    } = options;
+    if (typeof _file === "string" || !action) {
+      onError?.(new Error("没有上传地址"));
+      return;
+    }
+    const file = new File([_file], encodeURIComponent(_file.name), {
+      type: _file.type
+    });
+    file.uid = _file.uid;
+    await (0, _utils.normalUpload)({
+      file,
+      action,
+      data,
+      headers,
+      accept,
+      size,
+      en,
+      uploadingList,
+      setUploadingList,
+      onProgress,
+      onSuccess,
+      onError,
+      onUploadSuccess
+    });
+  }, [action, data, headers, accept, size, en, uploadingList, setUploadingList, onUploadSuccess]);
+  const handleChange = ({
+    file,
+    fileList: newFileList
+  }) => {
+    handleFileListChange({
+      file,
+      fileList: newFileList
+    });
+    const uploading = newFileList.filter(item => item.status === "uploading");
+    onUploading?.(uploading);
+  };
+  const handleRemove = (0, _react.useCallback)(file => {
+    if (uploadingList[file.uid]) {
+      uploadingList[file.uid]?.forEach(c => c());
+      delete uploadingList[file.uid];
+      setUploadingList((0, _hsuUtils.deepCopy)(uploadingList));
+    }
+    const filteredList = _fileList.filter(item => item.uid !== file.uid);
+    setFileList(filteredList);
+    onChange?.({
+      file,
+      fileList: filteredList
+    });
+  }, [uploadingList, setUploadingList, _fileList, setFileList, onChange]);
+  const Upload = drop ? _antd.Upload.Dragger : _antd.Upload;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Upload, {
+      disabled: disabled,
+      className: (0, _classnames.default)(_indexModule.default.Upload, className),
+      customRequest: sharding ? chunkCustomRequest : customRequest,
+      fileList: Array.isArray(_fileList) ? _fileList.filter(item => item.status !== "error") : undefined,
+      onChange: handleChange,
+      accept: accept,
+      onRemove: handleRemove,
+      listType: listType,
+      onDownload: onDownload,
+      onPreview: onPreview,
+      itemRender: listType === "picture-card" ? undefined : (_, file, __, {
+        remove
+      }) => {
+        if (file.status === "removed") {
+          return null;
+        }
+        if (file.status === "uploading") {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_UploadingItem.UploadingItem, {
+            file: file,
+            listProps: listProps,
+            en: en,
+            onRemove: remove
+          });
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_UploadedItem.UploadedItem, {
+          file: file,
+          listProps: listProps,
+          en: en,
+          disabled: disabled,
+          downloading: downloading,
+          setDownloading: setDownloading,
+          onPreview: onPreview,
+          onDownload: onDownload,
+          onRemove: remove,
+          onPreviewClick: info => {
+            setPreviewFile(info);
+          }
+        });
+      },
+      ...uploadConfig
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilePreview.default, {
+      ...previewFile,
+      open: previewOpen,
+      onClose: () => setPreviewFile({})
+    })]
+  });
+};
+var _default = exports.default = Upload;

package/lib/components/Upload/index.module.less

@@ -0,0 +1,74 @@
+.Upload {
+  display: inline-block;
+
+  width: 100%;
+  height: 100%;
+
+  span.ant-upload {
+    display: inline-flex;
+  }
+
+  .ant-upload-list {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+
+    width: 100%;
+
+    &.ant-upload-list-picture-card {
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 5px;
+    }
+
+    &::before,
+    &::after {
+      content: none !important;
+    }
+
+    .fileItem {
+      display: flex;
+      align-items: center;
+      column-gap: 5px;
+
+      width: 100%;
+
+      .uploading {
+        flex: 1;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        min-width: 0px;
+        margin-bottom: -5px;
+
+        &:not(.progress) {
+          margin-bottom: 0px;
+
+          .fileName {
+            margin-bottom: 0px;
+          }
+        }
+      }
+
+      .fileName {
+        flex: 1;
+
+        min-width: 0px;
+
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        margin-bottom: -12px;
+      }
+
+      &:not(.progress) {
+        .fileName {
+          margin-bottom: 0px;
+        }
+      }
+    }
+  }
+}

package/lib/config-provider/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { RequestImpl } from "../request";
+export interface ConfigProviderProps {
+    /** 当前用户权限码列表；传入后 usePermissions / hasPermi 据此校验。不传则默认全部放行 */
+    permissions?: string[] | null;
+    /** 注入 HTTP 请求实现，供 ImportForm 等智能组件使用 */
+    request?: Partial<RequestImpl>;
+    children?: React.ReactNode;
+}
+/**
+ * Hsu UI 全局配置：注入权限与请求实现。
+ *
+ * @example
+ * <ConfigProvider permissions={perms} request={{ get, post, del, put }}>
+ *   <App />
+ * </ConfigProvider>
+ */
+declare const ConfigProvider: React.FC<ConfigProviderProps>;
+export default ConfigProvider;

package/lib/config-provider/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _usePermissions = require("../hooks/usePermissions");
+var _request = require("../request");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * Hsu UI 全局配置：注入权限与请求实现。
+ *
+ * @example
+ * <ConfigProvider permissions={perms} request={{ get, post, del, put }}>
+ *   <App />
+ * </ConfigProvider>
+ */
+const ConfigProvider = ({
+  permissions = null,
+  request,
+  children
+}) => {
+  // 在渲染期同步注入，确保子组件首次交互即可拿到 request 实现
+  (0, _react.useMemo)(() => {
+    if (request) (0, _request.configureRequest)(request);
+  }, [request]);
+  const permissionsValue = (0, _react.useMemo)(() => ({
+    permissions
+  }), [permissions]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_usePermissions.PermissionsContent.Provider, {
+    value: permissionsValue,
+    children: children
+  });
+};
+var _default = exports.default = ConfigProvider;

package/lib/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { default as usePermissions, PermissionsContent } from "./usePermissions";
+export { default as useLabelWidth } from "./useLabelWidth";

package/lib/hooks/index.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PermissionsContent", {
+  enumerable: true,
+  get: function () {
+    return _usePermissions.PermissionsContent;
+  }
+});
+Object.defineProperty(exports, "useLabelWidth", {
+  enumerable: true,
+  get: function () {
+    return _useLabelWidth.default;
+  }
+});
+Object.defineProperty(exports, "usePermissions", {
+  enumerable: true,
+  get: function () {
+    return _usePermissions.default;
+  }
+});
+var _usePermissions = _interopRequireWildcard(require("./usePermissions"));
+var _useLabelWidth = _interopRequireDefault(require("./useLabelWidth"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/lib/hooks/useLabelWidth.d.ts

@@ -0,0 +1,14 @@
+import { FormItemProps } from "../components/FormItem";
+interface Font {
+    style?: string;
+    variant?: string;
+    weight?: string;
+    size?: number;
+    lineHeight?: number;
+    family?: string;
+}
+export default function useLabelWidth(formItem?: FormItemProps[], font?: Font, min?: boolean | number): [
+    number,
+    (formItem: FormItemProps[], font?: Font, min?: boolean | number) => number
+];
+export {};

package/lib/hooks/useLabelWidth.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useLabelWidth;
+var _hsuUtils = require("hsu-utils");
+var _react = require("react");
+const getLabelWidth = (formItem, font = {
+  size: 14
+}, min) => {
+  let _labelWitdh = 0;
+  if (formItem) {
+    _labelWitdh = formItem.reduce((prev, curr) => {
+      let _labelWidth = prev;
+      const _label = curr.label;
+      if (typeof _label === "string" && _label) {
+        const {
+          width
+        } = (0, _hsuUtils.get_string_size)(_label, font);
+        _labelWidth = width;
+        if (curr.colon !== false && (curr.required === true && curr.requiredPosition !== "after" || curr.required !== true)) {
+          const {
+            width
+          } = (0, _hsuUtils.get_string_size)(":", font);
+          _labelWidth += width + 10;
+        }
+        if (curr.required && curr.hideRequired !== true) {
+          const {
+            width
+          } = (0, _hsuUtils.get_string_size)("*", font);
+          _labelWidth += width + 4;
+        }
+        if (curr.tips && (!curr.tips?.icon || typeof curr.tips?.icon === "string")) {
+          _labelWidth += 22;
+        }
+        if (curr.layout === "vertical") {
+          _labelWidth = 0;
+        }
+      }
+      if (!!min && prev !== 0) {
+        if (typeof min === "number") {
+          return min;
+        }
+        return _labelWidth < prev ? _labelWidth : prev;
+      }
+      return _labelWidth > prev ? _labelWidth : prev;
+    }, typeof min === "number" ? min : 0);
+  }
+  return _labelWitdh;
+};
+function useLabelWidth(formItem = [], font = {
+  size: 14,
+  family: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'"
+}, min) {
+  const labelWidth = (0, _react.useMemo)(() => getLabelWidth(formItem, font, min), [formItem, font, min]);
+  return [labelWidth, getLabelWidth];
+}

package/lib/hooks/usePermissions.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const PermissionsContent: import("react").Context<{
+    permissions: string[] | null;
+}>;
+export default function usePermissions(hasPermi?: string[]): {
+    permissions: string[] | null;
+    permitted: boolean;
+    checkPermission: (permission: string[] | undefined) => boolean;
+};

package/lib/hooks/usePermissions.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PermissionsContent = void 0;
+exports.default = usePermissions;
+var _react = require("react");
+var _hsuUtils = require("hsu-utils");
+const PermissionsContent = exports.PermissionsContent = /*#__PURE__*/(0, _react.createContext)({
+  permissions: null
+});
+function usePermissions(hasPermi) {
+  const permissions = (0, _react.useContext)(PermissionsContent).permissions;
+  const checkPermission = (0, _react.useCallback)(hasPermi => {
+    // 如果hasPermi或permissions为空，则认为有权限
+    if (!hasPermi || !permissions) {
+      return true;
+    }
+
+    // 如果hasPermi或permissions为空数组，则认为没有权限
+    if (Array.isArray(hasPermi) && !hasPermi.length || Array.isArray(permissions) && !permissions.length) {
+      return false;
+    }
+
+    // 如果hasPermi和permissions都不为空数组，则判断hasPermi是否在permissions中
+    return (0, _hsuUtils.array_is_includes)(permissions, hasPermi);
+  }, [permissions]);
+  const permitted = (0, _react.useMemo)(() => {
+    return checkPermission(hasPermi);
+  }, [hasPermi, checkPermission]);
+  return {
+    permissions,
+    permitted,
+    checkPermission
+  };
+}

package/lib/index.d.ts

@@ -0,0 +1,73 @@
+export { default as ConfigProvider } from "./config-provider";
+export type { ConfigProviderProps } from "./config-provider";
+export { configureRequest, get, post, del, put, } from "./request";
+export type { RequestImpl, RequestConfig, ResType, ListRes, FileRes } from "./request";
+export { usePermissions, PermissionsContent, useLabelWidth } from "./hooks";
+export { getUUID, supportsHasSelector, isLegacyHasSelectorBrowser } from "./utils";
+export { default as Button } from "./components/Button";
+export * from "./components/Button";
+export { default as ChainGraph } from "./components/ChainGraph";
+export * from "./components/ChainGraph";
+export { default as Chart } from "./components/Chart";
+export * from "./components/Chart";
+export { default as Chat } from "./components/Chat";
+export * from "./components/Chat";
+export { default as Checkbox } from "./components/Checkbox";
+export * from "./components/Checkbox";
+export { default as CodeMirror } from "./components/CodeMirror";
+export * from "./components/CodeMirror";
+export { default as Copy } from "./components/Copy";
+export * from "./components/Copy";
+export { default as DatePicker } from "./components/DatePicker";
+export * from "./components/DatePicker";
+export { default as Descriptions } from "./components/Descriptions";
+export * from "./components/Descriptions";
+export { default as Editor } from "./components/Editor";
+export * from "./components/Editor";
+export { default as FileCol } from "./components/FileCol";
+export * from "./components/FileCol";
+export { default as FilePreview } from "./components/FilePreview";
+export * from "./components/FilePreview";
+export { default as FlexFill } from "./components/FlexFill";
+export * from "./components/FlexFill";
+export { default as Form } from "./components/Form";
+export * from "./components/Form";
+export { default as FormItem } from "./components/FormItem";
+export * from "./components/FormItem";
+export { default as Icon } from "./components/Icon";
+export * from "./components/Icon";
+export { default as Input } from "./components/Input";
+export * from "./components/Input";
+export { default as Markdown } from "./components/Markdown";
+export * from "./components/Markdown";
+export { default as Modal } from "./components/Modal";
+export * from "./components/Modal";
+export { default as Operate } from "./components/Operate";
+export * from "./components/Operate";
+export { default as Panel } from "./components/Panel";
+export * from "./components/Panel";
+export { default as Search } from "./components/Search";
+export * from "./components/Search";
+export { default as SecondConf } from "./components/SecondConf";
+export * from "./components/SecondConf";
+export { default as Select } from "./components/Select";
+export * from "./components/Select";
+export { default as Slider } from "./components/Slider";
+export * from "./components/Slider";
+export { default as Spreadsheet } from "./components/Spreadsheet";
+export * from "./components/Spreadsheet";
+export { default as Switch } from "./components/Switch";
+export * from "./components/Switch";
+export { default as TabBar } from "./components/TabBar";
+export * from "./components/TabBar";
+export { default as Table } from "./components/Table";
+export * from "./components/Table";
+export { default as Tags } from "./components/Tags";
+export * from "./components/Tags";
+export { default as TextEllipsis } from "./components/TextEllipsis";
+export * from "./components/TextEllipsis";
+export { default as Tree } from "./components/Tree";
+export * from "./components/Tree";
+export { default as Upload } from "./components/Upload";
+export * from "./components/Upload";
+export type { ColumnsType } from "./components/Table";