@wangtaizong/components 1.0.7 → 1.1.0

package/es/Upload/index.js

@@ -0,0 +1,221 @@
+import { __rest, __assign, __awaiter, __generator } from 'tslib';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as antd from 'antd';
+import { Image } from 'antd';
+import { useState, useCallback, useMemo } from 'react';
+import CHRButton from '../Button/index.js';
+import CHRIcon from '../Icon/index.js';
+
+var CHRUpload = function CHRUpload(_a) {
+  var value = _a.value,
+    children = _a.children,
+    _b = _a.uploadType,
+    uploadType = _b === void 0 ? 'file' : _b,
+    url = _a.url,
+    token = _a.token,
+    _c = _a.maxCount,
+    maxCount = _c === void 0 ? 1 : _c,
+    limit = _a.limit,
+    acceptProp = _a.accept,
+    handleChange = _a.handleChange,
+    restProps = __rest(_a, ["value", "children", "uploadType", "url", "token", "maxCount", "limit", "accept", "handleChange"]);
+  var className = restProps.className;
+  var _d = useState(value || []),
+    fileList = _d[0],
+    setFileList = _d[1];
+  var _e = useState(false),
+    previewOpen = _e[0],
+    setPreviewOpen = _e[1];
+  var _f = useState(''),
+    previewImage = _f[0],
+    setPreviewImage = _f[1];
+  var getDefaultAccept = useCallback(function () {
+    if (uploadType === 'avatar') return 'image/*';
+    return undefined;
+  }, [uploadType]);
+  var getDefaultLimit = useCallback(function () {
+    if (uploadType === 'avatar') return 2;
+    if (uploadType === 'file') return 10;
+    return undefined;
+  }, [uploadType]);
+  var finalAccept = acceptProp !== null && acceptProp !== void 0 ? acceptProp : getDefaultAccept();
+  var finalLimit = limit !== null && limit !== void 0 ? limit : getDefaultLimit();
+  var beforeUpload = useCallback(function (file) {
+    if (finalLimit) {
+      var isLimit = file.size / 1024 / 1024 < finalLimit;
+      if (!isLimit) {
+        antd.message.error("\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 ".concat(finalLimit, "MB"));
+        return antd.Upload.LIST_IGNORE;
+      }
+    }
+    if (finalAccept) {
+      var acceptList = finalAccept.split(',').map(function (item) {
+        return item.trim();
+      });
+      var fileType_1 = file.type;
+      var fileName_1 = file.name;
+      var isAccept = acceptList.some(function (accept) {
+        if (accept.endsWith('/*')) {
+          var mainType = accept.replace('/*', '');
+          return fileType_1.startsWith(mainType + '/');
+        }
+        if (accept.startsWith('.')) {
+          return fileName_1.endsWith(accept);
+        }
+        return fileType_1 === accept;
+      });
+      if (!isAccept && acceptList.length > 0) {
+        antd.message.error("\u4E0D\u652F\u6301\u7684\u6587\u4EF6\u7C7B\u578B\uFF0C\u4EC5\u652F\u6301 ".concat(finalAccept));
+        return antd.Upload.LIST_IGNORE;
+      }
+    }
+    return true;
+  }, [finalLimit, finalAccept]);
+  var handleUploadChange = useCallback(function (info) {
+    var _a;
+    var file = info.file,
+      newFileList = info.fileList;
+    var fileUrl = file.url;
+    if (file.response) {
+      fileUrl = ((_a = file.response.file) === null || _a === void 0 ? void 0 : _a.url) || file.response.url;
+    }
+    // 1. 状态提示
+    if (file.status === 'done') {
+      antd.message.success("".concat(file.name, " \u4E0A\u4F20\u6210\u529F"));
+      file.url = fileUrl;
+    } else if (file.status === 'error') {
+      antd.message.error("".concat(file.name, " \u4E0A\u4F20\u5931\u8D25"));
+      file.status = 'error';
+    }
+    var finalFileList = maxCount ? newFileList.slice(-maxCount) : newFileList;
+    finalFileList = finalFileList.map(function (item) {
+      if (item.uid === file.uid) {
+        return __assign(__assign({}, item), {
+          url: fileUrl,
+          status: file.status
+        });
+      }
+      return item;
+    });
+    setFileList(finalFileList);
+    var simplifiedList = finalFileList.map(function (e) {
+      return {
+        uid: e.uid,
+        name: e.name,
+        url: e.url || '',
+        status: e.status
+      };
+    });
+    handleChange === null || handleChange === void 0 ? void 0 : handleChange(file, simplifiedList);
+  }, [maxCount, handleChange]);
+  var headers = useMemo(function () {
+    if (token) {
+      return {
+        Authorization: "Bearer ".concat(token)
+      };
+    }
+    return undefined;
+  }, [token]);
+  var getBase64 = function getBase64(file) {
+    return new Promise(function (resolve, reject) {
+      var reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = function () {
+        return resolve(reader.result);
+      };
+      reader.onerror = function (error) {
+        return reject(error);
+      };
+    });
+  };
+  var handlePreview = useCallback(function (file) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var _a;
+      return __generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            if (!(!file.url && !file.preview && file.originFileObj)) return [3 /*break*/, 2];
+            _a = file;
+            return [4 /*yield*/, getBase64(file.originFileObj)];
+          case 1:
+            _a.preview = _b.sent();
+            _b.label = 2;
+          case 2:
+            setPreviewImage(file.url || file.preview);
+            setPreviewOpen(true);
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, []);
+  var avatarUploadButton = jsxs("button", {
+    style: {
+      border: 0,
+      background: 'none'
+    },
+    type: "button",
+    children: [jsx(CHRIcon, {
+      icon: "PlusOutlined"
+    }), jsx("div", {
+      style: {
+        marginTop: 8
+      },
+      children: "\u4E0A\u4F20"
+    })]
+  });
+  var renderByType = function renderByType() {
+    if (uploadType === 'avatar') {
+      return jsxs(Fragment, {
+        children: [jsx(antd.Upload, __assign({
+          name: "file",
+          listType: "picture-card",
+          className: className,
+          action: url,
+          headers: headers,
+          accept: finalAccept,
+          fileList: fileList,
+          beforeUpload: beforeUpload,
+          onChange: handleUploadChange,
+          onPreview: handlePreview,
+          maxCount: 1
+        }, restProps, {
+          children: fileList.length >= 1 ? null : avatarUploadButton
+        })), previewImage && jsx(Image, {
+          style: {
+            display: 'none'
+          },
+          preview: {
+            open: previewOpen,
+            onOpenChange: function onOpenChange(visible) {
+              return setPreviewOpen(visible);
+            },
+            afterOpenChange: function afterOpenChange(visible) {
+              return !visible && setPreviewImage('');
+            }
+          },
+          src: previewImage
+        })]
+      });
+    }
+    return jsx(antd.Upload, __assign({
+      className: className,
+      action: url,
+      headers: headers,
+      accept: finalAccept,
+      beforeUpload: beforeUpload,
+      fileList: fileList,
+      onChange: handleUploadChange,
+      maxCount: maxCount,
+      multiple: maxCount > 1
+    }, restProps, {
+      children: children || jsxs(CHRButton, {
+        children: [jsx(CHRIcon, {
+          icon: "UploadOutlined"
+        }), "\u4E0A\u4F20\u6587\u4EF6"]
+      })
+    }));
+  };
+  return renderByType();
+};
+
+export { CHRUpload as default };

package/es/antd/index.js

@@ -0,0 +1,2 @@
+import * as antd from 'antd';
+export { antd as default };

package/es/index.js

@@ -0,0 +1,5 @@
+export { default as CHRButton } from './Button/index.js';
+export { default as CHRIcon } from './Icon/index.js';
+export { default as CHRUpload } from './Upload/index.js';
+import * as antd from 'antd';
+export { antd };

package/lib/Button/index.d.ts

@@ -0,0 +1,9 @@
+import React, { type FC, ReactNode } from 'react';
+interface CHRButtonProps {
+    children?: ReactNode;
+    title?: string;
+    defaultText?: string;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+}
+declare const CHRButton: FC<CHRButtonProps>;
+export default CHRButton;

package/lib/Button/index.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var antd = require('antd');
+
+var CHRButton = function CHRButton(_a) {
+  var children = _a.children,
+    title = _a.title,
+    _b = _a.defaultText,
+    defaultText = _b === void 0 ? '按钮' : _b,
+    onClick = _a.onClick,
+    restProps = tslib.__rest(_a, ["children", "title", "defaultText", "onClick"]);
+  var handleClick = function handleClick(e) {
+    console.log('CHRButton 内部点击处理');
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+  // 决定显示内容
+  var content;
+  content = children !== undefined ? children : title || defaultText;
+  return jsxRuntime.jsx(antd.Button, tslib.__assign({}, restProps, {
+    onClick: handleClick,
+    children: content
+  }));
+};
+
+exports.default = CHRButton;

package/lib/Icon/index.d.ts

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+interface ChrIconProps {
+    icon: string;
+    fontSize?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const CHRIcon: FC<ChrIconProps>;
+export default CHRIcon;

package/lib/Icon/index.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var Icons = require('@ant-design/icons');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var Icons__namespace = /*#__PURE__*/_interopNamespaceDefault(Icons);
+
+var CHRIcon = function CHRIcon(_a) {
+  var icon = _a.icon,
+    _b = _a.fontSize,
+    fontSize = _b === void 0 ? 20 : _b,
+    className = _a.className,
+    style = _a.style;
+  var IconComponent = Icons__namespace[icon];
+  if (!IconComponent) {
+    console.warn("Icon \"".concat(icon, "\" is not a valid icon component"));
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }
+  return jsxRuntime.jsx(IconComponent, {
+    className: className,
+    style: tslib.__assign({
+      fontSize: fontSize + 'px',
+      cursor: 'pointer'
+    }, style)
+  });
+};
+
+exports.default = CHRIcon;

package/lib/Upload/index.d.ts

@@ -0,0 +1,16 @@
+import type { UploadProps } from 'antd/es/upload';
+import type { UploadFile } from 'antd/es/upload/interface';
+import { ReactNode } from 'react';
+interface CHRUploadProps {
+    children?: ReactNode;
+    uploadType?: 'avatar' | 'file';
+    url?: string;
+    token?: string;
+    maxCount?: number;
+    limit?: number;
+    accept?: string;
+    handleChange?: (file: UploadFile, fileList: UploadFile[]) => void;
+    value: UploadFile[];
+}
+declare const CHRUpload: ({ value, children, uploadType, url, token, maxCount, limit, accept: acceptProp, handleChange, ...restProps }: CHRUploadProps & Omit<UploadProps, "onChange" | "fileList" | "action" | "headers" | "accept" | "maxCount">) => import("react/jsx-runtime").JSX.Element;
+export default CHRUpload;

package/lib/Upload/index.js

@@ -0,0 +1,243 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var antd = require('antd');
+var react = require('react');
+var index$1 = require('../Button/index.js');
+var index = require('../Icon/index.js');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var antd__namespace = /*#__PURE__*/_interopNamespaceDefault(antd);
+
+var CHRUpload = function CHRUpload(_a) {
+  var value = _a.value,
+    children = _a.children,
+    _b = _a.uploadType,
+    uploadType = _b === void 0 ? 'file' : _b,
+    url = _a.url,
+    token = _a.token,
+    _c = _a.maxCount,
+    maxCount = _c === void 0 ? 1 : _c,
+    limit = _a.limit,
+    acceptProp = _a.accept,
+    handleChange = _a.handleChange,
+    restProps = tslib.__rest(_a, ["value", "children", "uploadType", "url", "token", "maxCount", "limit", "accept", "handleChange"]);
+  var className = restProps.className;
+  var _d = react.useState(value || []),
+    fileList = _d[0],
+    setFileList = _d[1];
+  var _e = react.useState(false),
+    previewOpen = _e[0],
+    setPreviewOpen = _e[1];
+  var _f = react.useState(''),
+    previewImage = _f[0],
+    setPreviewImage = _f[1];
+  var getDefaultAccept = react.useCallback(function () {
+    if (uploadType === 'avatar') return 'image/*';
+    return undefined;
+  }, [uploadType]);
+  var getDefaultLimit = react.useCallback(function () {
+    if (uploadType === 'avatar') return 2;
+    if (uploadType === 'file') return 10;
+    return undefined;
+  }, [uploadType]);
+  var finalAccept = acceptProp !== null && acceptProp !== void 0 ? acceptProp : getDefaultAccept();
+  var finalLimit = limit !== null && limit !== void 0 ? limit : getDefaultLimit();
+  var beforeUpload = react.useCallback(function (file) {
+    if (finalLimit) {
+      var isLimit = file.size / 1024 / 1024 < finalLimit;
+      if (!isLimit) {
+        antd__namespace.message.error("\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 ".concat(finalLimit, "MB"));
+        return antd__namespace.Upload.LIST_IGNORE;
+      }
+    }
+    if (finalAccept) {
+      var acceptList = finalAccept.split(',').map(function (item) {
+        return item.trim();
+      });
+      var fileType_1 = file.type;
+      var fileName_1 = file.name;
+      var isAccept = acceptList.some(function (accept) {
+        if (accept.endsWith('/*')) {
+          var mainType = accept.replace('/*', '');
+          return fileType_1.startsWith(mainType + '/');
+        }
+        if (accept.startsWith('.')) {
+          return fileName_1.endsWith(accept);
+        }
+        return fileType_1 === accept;
+      });
+      if (!isAccept && acceptList.length > 0) {
+        antd__namespace.message.error("\u4E0D\u652F\u6301\u7684\u6587\u4EF6\u7C7B\u578B\uFF0C\u4EC5\u652F\u6301 ".concat(finalAccept));
+        return antd__namespace.Upload.LIST_IGNORE;
+      }
+    }
+    return true;
+  }, [finalLimit, finalAccept]);
+  var handleUploadChange = react.useCallback(function (info) {
+    var _a;
+    var file = info.file,
+      newFileList = info.fileList;
+    var fileUrl = file.url;
+    if (file.response) {
+      fileUrl = ((_a = file.response.file) === null || _a === void 0 ? void 0 : _a.url) || file.response.url;
+    }
+    // 1. 状态提示
+    if (file.status === 'done') {
+      antd__namespace.message.success("".concat(file.name, " \u4E0A\u4F20\u6210\u529F"));
+      file.url = fileUrl;
+    } else if (file.status === 'error') {
+      antd__namespace.message.error("".concat(file.name, " \u4E0A\u4F20\u5931\u8D25"));
+      file.status = 'error';
+    }
+    var finalFileList = maxCount ? newFileList.slice(-maxCount) : newFileList;
+    finalFileList = finalFileList.map(function (item) {
+      if (item.uid === file.uid) {
+        return tslib.__assign(tslib.__assign({}, item), {
+          url: fileUrl,
+          status: file.status
+        });
+      }
+      return item;
+    });
+    setFileList(finalFileList);
+    var simplifiedList = finalFileList.map(function (e) {
+      return {
+        uid: e.uid,
+        name: e.name,
+        url: e.url || '',
+        status: e.status
+      };
+    });
+    handleChange === null || handleChange === void 0 ? void 0 : handleChange(file, simplifiedList);
+  }, [maxCount, handleChange]);
+  var headers = react.useMemo(function () {
+    if (token) {
+      return {
+        Authorization: "Bearer ".concat(token)
+      };
+    }
+    return undefined;
+  }, [token]);
+  var getBase64 = function getBase64(file) {
+    return new Promise(function (resolve, reject) {
+      var reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = function () {
+        return resolve(reader.result);
+      };
+      reader.onerror = function (error) {
+        return reject(error);
+      };
+    });
+  };
+  var handlePreview = react.useCallback(function (file) {
+    return tslib.__awaiter(void 0, void 0, void 0, function () {
+      var _a;
+      return tslib.__generator(this, function (_b) {
+        switch (_b.label) {
+          case 0:
+            if (!(!file.url && !file.preview && file.originFileObj)) return [3 /*break*/, 2];
+            _a = file;
+            return [4 /*yield*/, getBase64(file.originFileObj)];
+          case 1:
+            _a.preview = _b.sent();
+            _b.label = 2;
+          case 2:
+            setPreviewImage(file.url || file.preview);
+            setPreviewOpen(true);
+            return [2 /*return*/];
+        }
+      });
+    });
+  }, []);
+  var avatarUploadButton = jsxRuntime.jsxs("button", {
+    style: {
+      border: 0,
+      background: 'none'
+    },
+    type: "button",
+    children: [jsxRuntime.jsx(index.default, {
+      icon: "PlusOutlined"
+    }), jsxRuntime.jsx("div", {
+      style: {
+        marginTop: 8
+      },
+      children: "\u4E0A\u4F20"
+    })]
+  });
+  var renderByType = function renderByType() {
+    if (uploadType === 'avatar') {
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(antd__namespace.Upload, tslib.__assign({
+          name: "file",
+          listType: "picture-card",
+          className: className,
+          action: url,
+          headers: headers,
+          accept: finalAccept,
+          fileList: fileList,
+          beforeUpload: beforeUpload,
+          onChange: handleUploadChange,
+          onPreview: handlePreview,
+          maxCount: 1
+        }, restProps, {
+          children: fileList.length >= 1 ? null : avatarUploadButton
+        })), previewImage && jsxRuntime.jsx(antd.Image, {
+          style: {
+            display: 'none'
+          },
+          preview: {
+            open: previewOpen,
+            onOpenChange: function onOpenChange(visible) {
+              return setPreviewOpen(visible);
+            },
+            afterOpenChange: function afterOpenChange(visible) {
+              return !visible && setPreviewImage('');
+            }
+          },
+          src: previewImage
+        })]
+      });
+    }
+    return jsxRuntime.jsx(antd__namespace.Upload, tslib.__assign({
+      className: className,
+      action: url,
+      headers: headers,
+      accept: finalAccept,
+      beforeUpload: beforeUpload,
+      fileList: fileList,
+      onChange: handleUploadChange,
+      maxCount: maxCount,
+      multiple: maxCount > 1
+    }, restProps, {
+      children: children || jsxRuntime.jsxs(index$1.default, {
+        children: [jsxRuntime.jsx(index.default, {
+          icon: "UploadOutlined"
+        }), "\u4E0A\u4F20\u6587\u4EF6"]
+      })
+    }));
+  };
+  return renderByType();
+};
+
+exports.default = CHRUpload;

package/lib/antd/index.d.ts

@@ -0,0 +1,2 @@
+import * as antd from 'antd';
+export default antd;

package/lib/antd/index.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var antd = require('antd');
+
+function _interopNamespaceDefault(e) {
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var antd__namespace = /*#__PURE__*/_interopNamespaceDefault(antd);
+
+
+
+exports.default = antd__namespace;

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+import CHRButton from './Button';
+import CHRIcon from './Icon';
+import CHRUpload from './Upload';
+import antd from './antd';
+export { CHRButton, CHRIcon, CHRUpload, antd };

package/lib/index.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var index = require('./Button/index.js');
+var index$1 = require('./Icon/index.js');
+var index$2 = require('./Upload/index.js');
+var antd = require('antd');
+
+function _interopNamespaceDefault(e) {
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var antd__namespace = /*#__PURE__*/_interopNamespaceDefault(antd);
+
+
+
+exports.CHRButton = index.default;
+exports.CHRIcon = index$1.default;
+exports.CHRUpload = index$2.default;
+exports.antd = antd__namespace;