@power-xa/m-ui 0.0.1

package/dist/ProForm/controls/Upload/index.js

@@ -0,0 +1,383 @@
+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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 _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 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); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { Fragment, useCallback, useEffect, useRef, useState } from "react";
+import { chooseImage, chooseVideo, chooseMessageFile, uploadFile, previewImage } from "@tarojs/taro";
+import { Image, Text, View } from "@tarojs/components";
+import { clipFileUrl, getFileType, getUUID, Grid, Popup } from "../../..";
+import { useConfig } from "../../../ConfigProvider";
+import ProFormField from "../../Field";
+import { FileController } from "../../../services";
+import "./index.less";
+var ProFormUpload = function ProFormUpload(props) {
+  var _props$listType = props.listType,
+    listType = _props$listType === void 0 ? "list" : _props$listType,
+    disabled = props.disabled,
+    _props$value = props.value,
+    value = _props$value === void 0 ? [] : _props$value,
+    onChange = props.onChange;
+  var _useConfig = useConfig(),
+    src = _useConfig.src;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState("OSS"),
+    _useState4 = _slicedToArray(_useState3, 2),
+    method = _useState4[0],
+    setMethod = _useState4[1];
+  var _useState5 = useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    url = _useState6[0],
+    setUrl = _useState6[1];
+  var _useState7 = useState(value || []),
+    _useState8 = _slicedToArray(_useState7, 2),
+    fileList = _useState8[0],
+    setFileList = _useState8[1];
+  var fileRef = useRef([]);
+  useEffect(function () {
+    getUploadConfig();
+  }, []);
+  useEffect(function () {
+    if (fileList.filter(function (item) {
+      return item.percent === 0;
+    }).length) {
+      fileList.filter(function (item) {
+        return item.percent === 0;
+      }).forEach(function (item) {
+        upload(item.fullUri, item.fileName);
+      });
+    } else {
+      onChange === null || onChange === void 0 || onChange(fileList);
+    }
+  }, [fileList]);
+  useEffect(function () {
+    if (value && JSON.stringify(value) !== JSON.stringify(fileList)) {
+      setFileList(value === null || value === void 0 ? void 0 : value.map(function (item) {
+        return _objectSpread(_objectSpread({}, item), {}, {
+          percent: 100
+        });
+      }));
+    }
+  }, [value]);
+  var getUploadConfig = useCallback(function () {
+    FileController.getUploadConfig().then(function (result) {
+      if (result.code === 200) {
+        if (result.data.oss) {
+          setMethod("OSS");
+          setUrl(result.data.oss.endpoint.replace("http://", "https://".concat(result.data.oss.commonBucketName, ".")));
+          return false;
+        }
+      }
+    });
+  }, []);
+  var renderUploadButton = useCallback(function (method) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: "p-upload-button",
+      onTap: function onTap() {
+        setOpen(false);
+        if (method.value === "CAMERA") return takePhoto();
+        if (method.value === "ALBUM") return chooseImageAlbum();
+        if (method.value === "CAMERA-VIDEO") return takeVideo();
+        if (method.value === "ALBUM-VIDEO") return chooseVideoAlbum();
+        if (method.value === "FILE") return chooseFile();
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "icon"
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "iconfont ".concat(method.icon)
+    })), /*#__PURE__*/React.createElement(Text, {
+      className: "text"
+    }, method.label));
+  }, [url, fileList]);
+  var takePhoto = useCallback(function () {
+    chooseImage({
+      count: 1,
+      sourceType: ["camera"],
+      success: function success(result) {
+        if (result.tempFiles.length) {
+          fileRef.current = fileList.concat(result.tempFiles.map(function (item) {
+            return {
+              percent: 0,
+              fullUri: item.path,
+              fileType: getFileType({
+                name: item.path
+              })
+            };
+          }));
+          setFileList(fileRef.current);
+        }
+      }
+    });
+  }, [url, fileList]);
+  var chooseImageAlbum = useCallback(function () {
+    chooseImage({
+      count: 9,
+      sourceType: ["album"],
+      sizeType: ['original', 'compressed'],
+      success: function success(result) {
+        if (result.tempFiles.length) {
+          fileRef.current = fileList.concat(result.tempFiles.map(function (item) {
+            return {
+              percent: 0,
+              fullUri: item.path,
+              fileType: getFileType({
+                name: item.path
+              })
+            };
+          }));
+          setFileList(fileRef.current);
+        }
+      }
+    });
+  }, [url, fileList]);
+  var takeVideo = useCallback(function () {
+    chooseVideo({
+      sourceType: ["camera"],
+      success: function success(result) {
+        if (result.tempFilePath) {
+          fileRef.current = fileList.concat([{
+            fullUri: result.tempFilePath,
+            percent: 0,
+            fileType: getFileType({
+              name: result.tempFilePath
+            })
+          }]);
+          setFileList(fileRef.current);
+        }
+      }
+    });
+  }, [url, fileList]);
+  var chooseVideoAlbum = useCallback(function () {
+    chooseVideo({
+      sourceType: ["album"],
+      success: function success(result) {
+        if (result.tempFilePath) {
+          fileRef.current = fileList.concat([{
+            fullUri: result.tempFilePath,
+            percent: 0,
+            fileType: getFileType({
+              name: result.tempFilePath
+            })
+          }]);
+          setFileList(fileRef.current);
+        }
+      }
+    });
+  }, [url, fileList]);
+  var chooseFile = useCallback(function () {
+    chooseMessageFile({
+      count: 9,
+      success: function success(result) {
+        if (result.tempFiles.length) {
+          fileRef.current = fileList.concat(result.tempFiles.map(function (item) {
+            return {
+              fileName: item.name,
+              fullUri: item.path,
+              size: item.size,
+              percent: 0,
+              fileType: getFileType({
+                name: item.name
+              })
+            };
+          }));
+          setFileList(fileRef.current);
+        }
+      }
+    });
+  }, [url, fileList]);
+  var upload = useCallback(function (fileUrl, fileName) {
+    var ext = fileUrl.substring(fileUrl.lastIndexOf("."));
+    FileController.getOSSConfig(src === null || src === void 0 ? void 0 : src.oss, ext).then(function (result) {
+      var code = result.code,
+        data = result.data;
+      if (code === 200) {
+        var uploadTask = uploadFile({
+          url: url,
+          filePath: fileUrl,
+          name: "file",
+          formData: {
+            key: data.key,
+            policy: data.policy,
+            OSSAccessKeyId: data.accessId,
+            callback: data.callback,
+            Signature: data.signature,
+            Expires: data.expire
+          },
+          success: function success(result) {
+            var url = JSON.parse(result.data).url;
+            var size = JSON.parse(result.data).size;
+            var fileList = _toConsumableArray(fileRef.current);
+            var index = fileList.findIndex(function (item) {
+              return item.fullUri === fileUrl;
+            });
+            fileList[index] = _objectSpread(_objectSpread({}, fileList[index]), {}, {
+              fullUri: url,
+              size: size,
+              fileName: fileName || getUUID() + ext,
+              uri: clipFileUrl(url)
+            });
+            fileRef.current = fileList;
+            setFileList(fileList);
+          }
+        });
+        uploadTask.progress(function (result) {
+          var fileList = _toConsumableArray(fileRef.current);
+          var index = fileList.findIndex(function (item) {
+            return item.fullUri === fileUrl;
+          });
+          if (index > -1) {
+            fileList[index].percent = result.progress;
+            fileRef.current = fileList;
+            setFileList(_toConsumableArray(fileList));
+          }
+        });
+      }
+    });
+  }, [url, fileList]);
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ProFormField, _extends({}, props, {
+    layout: "vertical"
+  }), /*#__PURE__*/React.createElement(View, {
+    className: "p-pro-form-item-upload ".concat(listType)
+  }, !disabled && (listType === "card" ? /*#__PURE__*/React.createElement(View, {
+    className: "p-pro-form-item-upload-button",
+    onTap: function onTap() {
+      return setOpen(true);
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "iconfont icon-icon-psp-xinjian"
+  })) : /*#__PURE__*/React.createElement(View, {
+    className: "p-pro-form-item-upload-button",
+    onTap: function onTap() {
+      return setOpen(true);
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "iconfont icon-icon-psp-xinjian"
+  }), /*#__PURE__*/React.createElement(Text, {
+    className: "p-pro-form-item-upload-button-text"
+  }, "\u4E0A\u4F20\u9644\u4EF6"))), listType === "card" && fileList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: "p-pro-form-item-file",
+      key: "file-" + index,
+      onTap: function onTap() {
+        return previewImage({
+          urls: fileList.map(function (item) {
+            return item.fullUri;
+          }),
+          current: item.fullUri
+        });
+      }
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: item.fullUri,
+      className: "image",
+      mode: "aspectFill"
+    }), item.percent !== 100 && /*#__PURE__*/React.createElement(View, {
+      className: "image-mask",
+      style: {
+        height: item.percent + "%"
+      }
+    }), item.percent === 100 && !disabled && /*#__PURE__*/React.createElement(View, {
+      className: "iconfont icon-icon-psp-guanbi",
+      onTap: function onTap(e) {
+        e.stopPropagation();
+        fileList.splice(index, 1);
+        fileRef.current = fileList;
+        setFileList(_toConsumableArray(fileList));
+      }
+    }));
+  }), listType === "list" && fileList.map(function (item, index) {
+    var _item$fileType;
+    return /*#__PURE__*/React.createElement(View, {
+      className: "p-pro-form-item-file",
+      key: "file-" + index,
+      onTap: function onTap() {}
+    }, item.fileType === "Pic" && item.fullUri ? /*#__PURE__*/React.createElement(Image, {
+      src: item.fullUri,
+      className: "image",
+      mode: "aspectFill"
+    }) : /*#__PURE__*/React.createElement(Image, {
+      src: "".concat(src === null || src === void 0 ? void 0 : src.resource, "/images/document/icon/").concat((_item$fileType = item.fileType) === null || _item$fileType === void 0 ? void 0 : _item$fileType.toLowerCase(), ".svg"),
+      className: "image",
+      mode: "widthFix"
+    }), item.percent !== 100 && /*#__PURE__*/React.createElement(View, {
+      className: "image-mask",
+      style: {
+        width: item.percent + "%"
+      }
+    }), /*#__PURE__*/React.createElement(Text, {
+      className: "text"
+    }, item.fileName), item.percent === 100 && !disabled && /*#__PURE__*/React.createElement(View, {
+      className: "iconfont icon-icon-psp-guanbi",
+      onTap: function onTap(e) {
+        e.stopPropagation();
+        fileList.splice(index, 1);
+        fileRef.current = fileList;
+        setFileList(_toConsumableArray(fileList));
+      }
+    }));
+  }))), /*#__PURE__*/React.createElement(Popup, {
+    open: open,
+    onOpenChange: function onOpenChange(open) {
+      return setOpen(open);
+    },
+    rootClassName: "p-pro-form-item-upload-popup-container",
+    height: 20
+  }, function (_ref) {
+    var onOpenChange = _ref.onOpenChange;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(View, {
+      className: "p-pro-form-item-upload-popup-header"
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: "title"
+    }, "\u4E0A\u4F20\u6587\u4EF6"), /*#__PURE__*/React.createElement(View, {
+      className: "extra-content right"
+    }, /*#__PURE__*/React.createElement(View, {
+      className: "iconfont icon-icon-psp-guanbi",
+      onTap: onOpenChange
+    }))), /*#__PURE__*/React.createElement(View, {
+      className: "p-pro-form-item-upload-popup-content"
+    }, /*#__PURE__*/React.createElement(Grid, {
+      dataSource: [{
+        label: "拍照",
+        value: "CAMERA",
+        icon: "icon-icon-paizhaoshangchuan"
+      }, {
+        label: "拍摄",
+        value: "CAMERA-VIDEO",
+        icon: "icon-icon-paishe"
+      }, {
+        label: "相册",
+        value: "ALBUM",
+        icon: "icon-icon-xiangcexuanze"
+      }, {
+        label: "视频库",
+        value: "ALBUM-VIDEO",
+        icon: "icon-icon-shipinku"
+      }, {
+        label: "文件",
+        value: "FILE",
+        icon: "icon-icon-wenjianjiaxuanze"
+      }].filter(function (item) {
+        return listType === "card" ? ["CAMERA", "ALBUM"].includes(item.value) : item;
+      }),
+      renderItem: function renderItem(data) {
+        return listType === "card" ? ["CAMERA", "ALBUM"].includes(data.value) && renderUploadButton(data) : renderUploadButton(data);
+      },
+      column: 5
+    })));
+  }));
+};
+export default ProFormUpload;

package/dist/ProForm/controls/Upload/index.less

@@ -0,0 +1,174 @@
+@import "@power-xa/m-ui/dist/assets/less/mixins.less";
+
+.p-pro-form-item-upload {
+    &.card {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 20px;
+
+        .p-pro-form-item-upload-button {
+            width: 92px;
+            height: 92px;
+            background: #F5F6F7;
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .iconfont {
+                font-size: 28px;
+                color: #333437;
+            }
+        }
+
+        .p-pro-form-item-file {
+            width: 92px;
+            height: 92px;
+            position: relative;
+
+            .image {
+                width: 92px;
+                height: 92px;
+                border-radius: 20px;
+            }
+
+            .image-mask {
+                width: 100%;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                border-radius: 20px;
+                background: rgba(51, 52, 55, 0.70);
+            }
+
+            .iconfont {
+                padding: 4px;
+                border-radius: 50%;
+                background: #F6F7F9;
+                font-size: 18px;
+                color: #333437;
+                box-sizing: border-box;
+                position: absolute;
+                top: -14px;
+                right: -14px;
+                border: 4px solid #fff;
+            }
+        }
+    }
+
+    &.list {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+
+        .p-pro-form-item-upload-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #F5F6F7;
+            border-radius: 82px;
+            padding: 24px 0;
+            gap: 8px;
+
+            .iconfont {
+                font-size: 20px;
+                color: #333437;
+            }
+
+            .p-pro-form-item-upload-button-text {
+                .font(24, #333437)
+            }
+        }
+
+        .p-pro-form-item-file {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            padding: 20px 22px;
+            box-sizing: border-box;
+            background: #F5F6F7;
+            border-radius: 16px;
+            position: relative;
+
+            .image {
+                width: 40px;
+                height: 44px;
+                border-radius: 12px;
+            }
+
+            .image-mask {
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, .3);
+                border-radius: 16px;
+            }
+
+            .text {
+                .font(24, #666);
+                flex: 1;
+                width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+}
+
+.p-pro-form-item-upload-popup-container {
+    z-index: 9999;
+
+    .p-pro-form-item-upload-popup-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 34px 32px;
+        box-sizing: border-box;
+
+        .extra-content {
+            .iconfont {
+                font-size: 24px;
+                color: #333437;
+                padding: 8px 12px;
+                width: max-content;
+            }
+        }
+
+        .title {
+            .font(28, #333437)
+        }
+    }
+
+    .p-pro-form-item-upload-popup-content {
+
+        .p-upload-button {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+
+            .icon {
+                width: 96px;
+                height: 96px;
+                background: #F5F6F7;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 28px;
+
+                .iconfont {
+                    font-size: 48px;
+                    color: #333437;
+                }
+            }
+
+            .text {
+                .font(24, #333437)
+            }
+        }
+    }
+}

package/dist/ProForm/index.d.ts

@@ -0,0 +1,9 @@
+import OriginProForm from "./Form";
+import ProFormGroup from "./Group";
+import ProFormField from "./Field";
+type ProFormType = typeof OriginProForm & {
+    Group: typeof ProFormGroup;
+    Field: typeof ProFormField;
+};
+declare const ProForm: ProFormType;
+export default ProForm;

package/dist/ProForm/index.js

@@ -0,0 +1,5 @@
+import OriginProForm from "./Form";
+import ProFormGroup from "./Group";
+var ProForm = OriginProForm;
+ProForm.Group = ProFormGroup;
+export default ProForm;