@hsu-react/ui 0.0.1

package/lib/components/FilePreview/_components/PdfPreview/index.module.less

@@ -0,0 +1,191 @@
+.PdfPreview {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+  padding: 0px 1rem;
+
+  background-color: rgba(0, 0, 0, 0.45);
+
+  z-index: 1200;
+
+  &.full {
+    .pdf {
+      position: absolute;
+      left: 0px;
+      top: 0px;
+
+      width: 100%;
+      max-width: 100%;
+      height: 100%;
+      max-height: 100%;
+
+      margin-top: 0;
+    }
+
+    .toolContainer {
+      opacity: 0;
+
+      transition: opacity 0.3s;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .close {
+    position: absolute;
+    right: 32px;
+    top: 32px;
+    z-index: 999;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 45px;
+    height: 45px;
+
+    border-radius: 50%;
+
+    background-color: rgba(0, 0, 0, 0.1);
+
+    color: #fff;
+    font-size: 20px;
+
+    cursor: pointer;
+
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .pdf {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 20px;
+
+    width: 100%;
+    max-width: 1300px;
+    height: 90%;
+    max-height: fit-content;
+
+    margin-top: -3%;
+
+    border-radius: 4px;
+
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #aaa;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    .loading {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 100%;
+      height: 100%;
+    }
+
+    > div {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .toolContainer {
+    position: absolute;
+    bottom: 1%;
+    left: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+  }
+
+  .pdfTool {
+    display: flex;
+    align-items: center;
+    column-gap: 20px;
+
+    padding: 5px 10px;
+
+    background-color: #fff;
+
+    border-radius: 4px;
+
+    box-shadow: 0 4px 15px 0 rgba(0, 73, 164, 0.11);
+
+    .toolItem {
+      display: flex;
+      align-items: center;
+      column-gap: 5px;
+
+      .toolItemItem {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        width: 32px;
+        height: 32px;
+
+        font-size: 24px;
+
+        border-radius: 4px;
+
+        transition: background-color 0.3s, color 0.3s;
+
+        cursor: pointer;
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.1);
+        }
+
+        &.disabled {
+          opacity: 0.5;
+
+          cursor: not-allowed;
+
+          &:hover {
+            background-color: transparent;
+          }
+        }
+      }
+
+      .page {
+        display: flex;
+        column-gap: 2px;
+
+        font-size: 22px;
+        line-height: 32px;
+        user-select: none;
+
+        cursor: default;
+      }
+    }
+  }
+}
+

package/lib/components/FilePreview/_components/TextPreview/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface TextPreviewProps {
+    text?: string;
+    onClose?: () => void;
+    className?: string;
+}
+declare const TextPreview: React.FC<TextPreviewProps>;
+export default TextPreview;

package/lib/components/FilePreview/_components/TextPreview/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Icon = _interopRequireDefault(require("../../../Icon"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _indexModule = _interopRequireDefault(require("../BasePreview/index.module.less"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TextPreview = ({
+  text,
+  onClose,
+  className
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(_indexModule.default.BasePreview, className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _indexModule.default.close,
+      onClick: () => onClose?.(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        icon: "ant-design:close-outlined"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _indexModule.default.text,
+      children: text?.split("\n")?.map((p, idx) => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: p
+        }, idx);
+      })
+    })]
+  });
+};
+var _default = exports.default = TextPreview;

package/lib/components/FilePreview/_components/VideoPreview/index.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface VideoPreviewProps {
+    fileUrl?: string;
+    onClose?: () => void;
+    className?: string;
+}
+declare const VideoPreview: React.FC<VideoPreviewProps>;
+export default VideoPreview;

package/lib/components/FilePreview/_components/VideoPreview/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Icon = _interopRequireDefault(require("../../../Icon"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _indexModule = _interopRequireDefault(require("../BasePreview/index.module.less"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const VideoPreview = ({
+  fileUrl,
+  onClose,
+  className
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(_indexModule.default.BasePreview, className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _indexModule.default.close,
+      onClick: () => onClose?.(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        icon: "ant-design:close-outlined"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
+      className: _indexModule.default.video,
+      controls: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("source", {
+        src: fileUrl,
+        type: "video/mp4"
+      })
+    })]
+  });
+};
+var _default = exports.default = VideoPreview;

package/lib/components/FilePreview/_components/XlsxPreview/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { WorkBook } from "xlsx";
+interface XlsxPreviewProps {
+    xlsxData?: WorkBook;
+    onClose?: () => void;
+    className?: string;
+}
+declare const XlsxPreview: React.FC<XlsxPreviewProps>;
+export default XlsxPreview;

package/lib/components/FilePreview/_components/XlsxPreview/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Icon = _interopRequireDefault(require("../../../Icon"));
+var _Spreadsheet = _interopRequireDefault(require("../../../Spreadsheet"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _indexModule = _interopRequireDefault(require("../BasePreview/index.module.less"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const XlsxPreview = ({
+  xlsxData,
+  onClose,
+  className
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(_indexModule.default.BasePreview, className),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _indexModule.default.close,
+      onClick: () => onClose?.(),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        icon: "ant-design:close-outlined"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _indexModule.default.text,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spreadsheet.default, {
+        data: xlsxData,
+        xOptions: {
+          showToolbar: false,
+          showContextmenu: false,
+          showBottomTool: false,
+          mode: "read"
+        }
+      })
+    })]
+  });
+};
+var _default = exports.default = XlsxPreview;

package/lib/components/FilePreview/_hooks/index.d.ts

@@ -0,0 +1 @@
+export { useXlsxData } from "./useXlsxData";

package/lib/components/FilePreview/_hooks/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useXlsxData", {
+  enumerable: true,
+  get: function () {
+    return _useXlsxData.useXlsxData;
+  }
+});
+var _useXlsxData = require("./useXlsxData");

package/lib/components/FilePreview/_hooks/useXlsxData.d.ts

@@ -0,0 +1,10 @@
+import { WorkBook } from "xlsx";
+interface UseXlsxDataProps {
+    fileType?: string;
+    fileUrl?: string;
+}
+/**
+ * 加载并解析 xlsx 文件
+ */
+export declare function useXlsxData({ fileType, fileUrl }: UseXlsxDataProps): WorkBook | undefined;
+export {};

package/lib/components/FilePreview/_hooks/useXlsxData.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useXlsxData = useXlsxData;
+var _react = require("react");
+var _xlsx = require("xlsx");
+/**
+ * 加载并解析 xlsx 文件
+ */
+function useXlsxData({
+  fileType,
+  fileUrl
+}) {
+  const [xlsxData, setXlsxData] = (0, _react.useState)(undefined);
+  (0, _react.useEffect)(() => {
+    if (fileType === "xlsx" && fileUrl) {
+      fetch(fileUrl).then(res => res.arrayBuffer()).then(buffer => {
+        const workbook = (0, _xlsx.read)(buffer);
+        setXlsxData(workbook);
+      });
+    }
+  }, [fileType, fileUrl]);
+  return xlsxData;
+}

package/lib/components/FilePreview/_utils/index.d.ts

@@ -0,0 +1,2 @@
+export { FilePreviewTypeArr } from "./types";
+export type { FilePreviewType } from "./types";

package/lib/components/FilePreview/_utils/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FilePreviewTypeArr", {
+  enumerable: true,
+  get: function () {
+    return _types.FilePreviewTypeArr;
+  }
+});
+var _types = require("./types");

package/lib/components/FilePreview/_utils/types.d.ts

@@ -0,0 +1,2 @@
+export type FilePreviewType = "mp4" | "pdf" | "jpg" | "jpeg" | "png" | "gif" | "txt" | "md" | "xlsx" | string;
+export declare const FilePreviewTypeArr: string[];

package/lib/components/FilePreview/_utils/types.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FilePreviewTypeArr = void 0;
+const FilePreviewTypeArr = exports.FilePreviewTypeArr = ["mp4", "pdf", "jpg", "jpeg", "png", "gif", "txt", "md", "xlsx"];

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { FilePreviewType, FilePreviewTypeArr } from "./_utils";
+export type { FilePreviewType };
+export { FilePreviewTypeArr };
+interface FilePreviewProps {
+    fileUrl?: string;
+    fileType?: FilePreviewType;
+    fileName?: string;
+    open?: boolean;
+    onClose?: () => void;
+    text?: string;
+    className?: string;
+    pagination?: boolean;
+}
+declare const FilePreview: React.FC<FilePreviewProps>;
+export default FilePreview;

package/lib/components/FilePreview/index.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FilePreviewTypeArr", {
+  enumerable: true,
+  get: function () {
+    return _utils.FilePreviewTypeArr;
+  }
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PdfPreview = _interopRequireDefault(require("./_components/PdfPreview"));
+var _VideoPreview = _interopRequireDefault(require("./_components/VideoPreview"));
+var _TextPreview = _interopRequireDefault(require("./_components/TextPreview"));
+var _MarkdownPreview = _interopRequireDefault(require("./_components/MarkdownPreview"));
+var _ImagePreview = _interopRequireDefault(require("./_components/ImagePreview"));
+var _XlsxPreview = _interopRequireDefault(require("./_components/XlsxPreview"));
+var _hooks = require("./_hooks");
+var _utils = require("./_utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const FilePreview = props => {
+  const {
+    fileUrl,
+    fileType,
+    open,
+    onClose,
+    text,
+    className,
+    pagination
+  } = props;
+  const xlsxData = (0, _hooks.useXlsxData)({
+    fileType,
+    fileUrl
+  });
+  if (!open) {
+    return null;
+  }
+  switch (fileType) {
+    case "mp4":
+      {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPreview.default, {
+          fileUrl: fileUrl,
+          onClose: onClose,
+          className: className
+        });
+      }
+    case "pdf":
+      {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PdfPreview.default, {
+          fileUrl: fileUrl,
+          open: open,
+          onClose: onClose,
+          className: className,
+          pagination: pagination
+        });
+      }
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif":
+      {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImagePreview.default, {
+          fileUrl: fileUrl,
+          onClose: onClose,
+          className: className
+        });
+      }
+    case "txt":
+      {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextPreview.default, {
+          text: text,
+          onClose: onClose,
+          className: className
+        });
+      }
+    case "md":
+      {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkdownPreview.default, {
+          text: text,
+          onClose: onClose,
+          className: className
+        });
+      }
+    case "xlsx":
+      {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_XlsxPreview.default, {
+          xlsxData: xlsxData,
+          onClose: onClose,
+          className: className
+        });
+      }
+    default:
+      {
+        return null;
+      }
+  }
+};
+var _default = exports.default = FilePreview;

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

@@ -0,0 +1,89 @@
+.FilePreview {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+  padding: 0px 1rem;
+
+  background-color: rgba(0, 0, 0, 0.45);
+
+  z-index: 1200;
+
+  .close {
+    position: absolute;
+    right: 32px;
+    top: 32px;
+    z-index: 999;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 45px;
+    height: 45px;
+
+    border-radius: 50%;
+
+    background-color: rgba(0, 0, 0, 0.1);
+
+    color: #fff;
+    font-size: 20px;
+
+    cursor: pointer;
+
+    transition: background-color 0.3s;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .video {
+    width: 100%;
+    max-width: 1300px;
+    max-height: 90%;
+  }
+
+  .ppt {
+    width: 100%;
+    max-width: 1300px;
+    height: 90%;
+    max-height: fit-content;
+
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+
+    width: 100%;
+    max-width: 1300px;
+    height: 90%;
+    max-height: fit-content;
+    padding: 20px;
+
+    border-radius: 4px;
+
+    background-color: #fff;
+
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: #fff;
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import React, { CSSProperties } from "react";
+interface VarCSSProperties {
+    [key: string]: string | number;
+}
+type FlexFillCSSProperties = VarCSSProperties & CSSProperties;
+interface FProps {
+    width?: string;
+    className?: string;
+    style?: FlexFillCSSProperties;
+}
+declare const FlexFill: React.FC<FProps>;
+export default FlexFill;

package/lib/components/FlexFill/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const FlexFill = props => {
+  const {
+    width,
+    className,
+    style
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]?.map(item => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          display: "inline-block",
+          width: width ?? "100%",
+          height: "0.1px",
+          ...style
+        },
+        className: className
+      }, item);
+    })
+  });
+};
+var _default = exports.default = FlexFill;

package/lib/components/Form/DrawerForm/index.d.ts

@@ -0,0 +1,18 @@
+import { ButtonProps } from "../../Button";
+import { DrawerProps, FormInstance } from "antd";
+import { FormItemProps } from "../../FormItem";
+import React from "react";
+import { ItemContainerProps } from "../../FormItem/ItemContainer";
+export type ExtraFormItem = React.ReactElement<ItemContainerProps>;
+export interface DrawerFormProps extends Omit<DrawerProps, "onClose"> {
+    formItems?: FormItemProps[];
+    extraFormItems?: ExtraFormItem[];
+    externalForm?: FormInstance;
+    value?: Record<string, unknown>;
+    hasPermi?: string[];
+    buttonGroup?: ButtonProps[];
+    onClose?: () => void;
+    reset?: boolean;
+}
+declare const DrawerForm: React.FC<DrawerFormProps>;
+export default DrawerForm;