@pisell/materials 1.0.482 → 1.0.484

package/es/components/dataSourceComponents/fields/TimePicker/WithMode.js

@@ -78,8 +78,8 @@ var TimePicker = function TimePicker(props) {
       value: normalizedValue === null || normalizedValue === void 0 ? void 0 : normalizedValue.format('HH:mm'),
       onChange: function onChange(timeString) {
         if (_onChange) {
-          var timeValue = dayjs("".concat(dayjs().format('YYYY-MM-DD'), " ").concat(timeString));
-          _onChange(timeValue, timeString);
+          var timeValue = timeString ? dayjs("".concat(dayjs().format('YYYY-MM-DD'), " ").concat(timeString)) : null;
+          _onChange(timeValue, timeString || '');
         }
       },
       timePickerProps: _objectSpread({

package/es/components/dataSourceComponents/fields/Upload/BaseUpload.js

@@ -1,6 +1,12 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var _excluded = ["renderMode", "maxSize", "minCount", "maxCount", "multiple", "presetType", "customType", "enablePresetType", "enableCustomType"];
+var _excluded = ["renderMode", "maxSize", "minCount", "maxCount", "multiple", "presetType", "customType", "enablePresetType", "enableCustomType", "allowPreview", "value"],
+  _excluded2 = ["cover"];
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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); }
@@ -16,18 +22,21 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
-import { message } from 'antd';
+import { message, Upload, Image } from 'antd';
 import { useDebounceFn } from 'ahooks';
+import { isString } from '@pisell/utils';
+import IconFont from "../../../iconfont";
 import useEngineContext from "../../../../hooks/useEngineContext";
 import { getText } from "../../../../locales";
 import PisellUpload from "../../../pisellUpload";
-import { getPointSuffix, checkFileCount } from "./utils";
+import { getPointSuffix, checkFileCount, getPresetTypes } from "./utils";
 import "./index.less";
 var BaseUpload = function BaseUpload(props) {
   var renderMode = props.renderMode,
-    maxSize = props.maxSize,
+    _props$maxSize = props.maxSize,
+    maxSize = _props$maxSize === void 0 ? 3 : _props$maxSize,
     minCount = props.minCount,
     maxCount = props.maxCount,
     multiple = props.multiple,
@@ -35,16 +44,53 @@ var BaseUpload = function BaseUpload(props) {
     customType = props.customType,
     enablePresetType = props.enablePresetType,
     enableCustomType = props.enableCustomType,
+    allowPreview = props.allowPreview,
+    value = props.value,
     restProps = _objectWithoutProperties(props, _excluded);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     fileList = _useState2[0],
     setFileList = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    previewImage = _useState4[0],
+    setPreviewImage = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    previewOpen = _useState6[0],
+    setPreviewOpen = _useState6[1];
   var _useEngineContext = useEngineContext(),
     appHelper = _useEngineContext.appHelper;
   var _appHelper$constants = appHelper === null || appHelper === void 0 ? void 0 : appHelper.constants,
     mediaUploadUrl = _appHelper$constants.mediaUploadUrl,
     getHeaders = _appHelper$constants.getHeaders;
+  useEffect(function () {
+    if (!value) {
+      setFileList([]);
+      return;
+    }
+    if (isString(value)) {
+      setFileList([{
+        uid: '-1',
+        name: value.split('/').pop() || 'file',
+        status: 'done',
+        url: value
+      }]);
+      return;
+    }
+    if (Array.isArray(value)) {
+      var newFileList = value.map(function (url, index) {
+        return {
+          uid: "-".concat(index + 1),
+          name: url.split('/').pop() || "file".concat(index + 1),
+          status: 'done',
+          url: url
+        };
+      });
+      setFileList(newFileList);
+      return;
+    }
+  }, [value]);
   var calcMaxCount = useMemo(function () {
     if (multiple) {
       return maxCount || 9;
@@ -56,46 +102,78 @@ var BaseUpload = function BaseUpload(props) {
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
+            if (!file.type.startsWith('video/')) {
+              _context.next = 2;
+              break;
+            }
             return _context.abrupt("return", new Promise(function (resolve) {
-              if (file.type.startsWith('image/')) {
-                var img = new Image();
-                img.src = URL.createObjectURL(file);
-                img.onload = function () {
-                  URL.revokeObjectURL(img.src);
-                  resolve({
-                    width: img.width,
-                    height: img.height
-                  });
-                };
-              } else if (file.type.startsWith('video/')) {
-                var video = document.createElement('video');
-                video.preload = 'metadata';
-                video.src = URL.createObjectURL(file);
-                video.onloadedmetadata = function () {
-                  URL.revokeObjectURL(video.src);
-                  resolve({
-                    width: video.videoWidth,
-                    height: video.videoHeight,
-                    duration: video.duration,
-                    bitrate: file.size / video.duration
-                  });
-                };
-              } else if (file.type.startsWith('audio/')) {
-                var audio = document.createElement('audio');
-                audio.preload = 'metadata';
-                audio.src = URL.createObjectURL(file);
-                audio.onloadedmetadata = function () {
-                  URL.revokeObjectURL(audio.src);
-                  resolve({
-                    duration: audio.duration,
-                    bitrate: file.size / audio.duration
-                  });
-                };
-              } else {
-                resolve({});
-              }
+              var video = document.createElement('video');
+              video.preload = 'metadata';
+              var canvas = document.createElement('canvas');
+              var hasMetadata = false;
+              var hasSeeked = false;
+              var tryResolve = function tryResolve() {
+                if (hasMetadata && hasSeeked) {
+                  var ctx = canvas.getContext('2d');
+                  ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                  canvas.toBlob(function (blob) {
+                    if (blob) {
+                      var cover = new File([blob], "".concat(file.name, "-cover.jpg"), {
+                        type: 'image/jpeg'
+                      });
+                      URL.revokeObjectURL(video.src);
+                      resolve({
+                        width: video.videoWidth,
+                        height: video.videoHeight,
+                        duration: video.duration,
+                        bitrate: file.size / video.duration,
+                        cover: cover
+                      });
+                    } else {
+                      URL.revokeObjectURL(video.src);
+                      resolve({
+                        width: video.videoWidth,
+                        height: video.videoHeight,
+                        duration: video.duration,
+                        bitrate: file.size / video.duration
+                      });
+                    }
+                  }, 'image/jpeg', 0.8);
+                }
+              };
+              video.onloadedmetadata = function () {
+                canvas.width = video.videoWidth;
+                canvas.height = video.videoHeight;
+                video.currentTime = 0;
+                hasMetadata = true;
+                tryResolve();
+              };
+              video.onseeked = function () {
+                hasSeeked = true;
+                tryResolve();
+              };
+              video.src = URL.createObjectURL(file);
+            }));
+          case 2:
+            if (!file.type.startsWith('audio/')) {
+              _context.next = 4;
+              break;
+            }
+            return _context.abrupt("return", new Promise(function (resolve) {
+              var audio = document.createElement('audio');
+              audio.preload = 'metadata';
+              audio.src = URL.createObjectURL(file);
+              audio.onloadedmetadata = function () {
+                URL.revokeObjectURL(audio.src);
+                resolve({
+                  duration: audio.duration,
+                  bitrate: file.size / audio.duration
+                });
+              };
             }));
-          case 1:
+          case 4:
+            return _context.abrupt("return", Promise.resolve(null));
+          case 5:
           case "end":
             return _context.stop();
         }
@@ -107,29 +185,18 @@ var BaseUpload = function BaseUpload(props) {
   }();
   var handleChange = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref2) {
-      var file, newFileList, metadata, _props$onChange, _file$response;
+      var file, newFileList, _props$onChange, _file$response, _file$response$data;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             file = _ref2.file, newFileList = _ref2.fileList;
             setFileList(newFileList);
-            if (!(file.status === 'uploading')) {
-              _context2.next = 7;
-              break;
-            }
-            _context2.next = 5;
-            return getMediaMetadata(file.originFileObj);
-          case 5:
-            metadata = _context2.sent;
-            file.metadata = metadata;
-          case 7:
             if (file.status === 'done') {
-              message.success("".concat(file.name, " \u4E0A\u4F20\u6210\u529F"));
-              (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, (_file$response = file.response) === null || _file$response === void 0 ? void 0 : _file$response.url);
+              (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, (_file$response = file.response) === null || _file$response === void 0 ? void 0 : (_file$response$data = _file$response.data) === null || _file$response$data === void 0 ? void 0 : _file$response$data.url);
             } else if (file.status === 'error') {
               message.error("".concat(file.name, " \u4E0A\u4F20\u5931\u8D25"));
             }
-          case 8:
+          case 3:
           case "end":
             return _context2.stop();
         }
@@ -156,23 +223,24 @@ var BaseUpload = function BaseUpload(props) {
   });
   var uploadButton = /*#__PURE__*/React.createElement("button", {
     className: "pisell-upload-button",
-    type: "button"
+    type: "button",
+    disabled: restProps.disabled
   }, /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("div", {
     className: "pisell-upload-text"
   }, getText('pisell-upload-button')));
   var accept = useMemo(function () {
     var types = [];
     if (enablePresetType) {
-      types = _toConsumableArray(presetType || []);
+      types = _toConsumableArray(getPresetTypes(presetType) || []);
     }
     if (enableCustomType) {
       types = [].concat(_toConsumableArray(types), _toConsumableArray(customType || []));
     }
-    return types.join(', ');
+    return types.join(',');
   }, [presetType, customType, enableCustomType, enablePresetType]);
   var beforeUpload = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(file, newFileList) {
-      var currentFileCount, pointSuffix, _checkFileCount, success, messageStr;
+      var currentFileCount, pointSuffix, _checkFileCount, success, messageStr, metadata, cover, restMetadata;
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
@@ -182,13 +250,14 @@ var BaseUpload = function BaseUpload(props) {
                 currentFileCount = index + 1;
               }
             });
+
             // 文件大小超出限制
-            if (!(file.size > calcMaxCount * 1024 * 1024)) {
+            if (!(file.size > maxSize * 1024 * 1024)) {
               _context3.next = 5;
               break;
             }
             sizeError.run(getText('pisell-upload-setting-size-error')(maxSize));
-            return _context3.abrupt("return", false);
+            return _context3.abrupt("return", Upload.LIST_IGNORE);
           case 5:
             pointSuffix = getPointSuffix(file.name); // 文件类型不符合
             if (!(accept !== '' && !(accept || '').includes(pointSuffix))) {
@@ -196,7 +265,7 @@ var BaseUpload = function BaseUpload(props) {
               break;
             }
             typeError.run(getText('pisell-upload-setting-type-error')(pointSuffix));
-            return _context3.abrupt("return", false);
+            return _context3.abrupt("return", Upload.LIST_IGNORE);
           case 9:
             // 文件个数超出限制
             _checkFileCount = checkFileCount({
@@ -210,21 +279,53 @@ var BaseUpload = function BaseUpload(props) {
               break;
             }
             countError.run(messageStr);
-            return _context3.abrupt("return", false);
+            return _context3.abrupt("return", Upload.LIST_IGNORE);
           case 13:
+            _context3.prev = 13;
+            _context3.next = 16;
+            return getMediaMetadata(file);
+          case 16:
+            metadata = _context3.sent;
+            if (metadata) {
+              cover = metadata.cover, restMetadata = _objectWithoutProperties(metadata, _excluded2);
+              file.metadata = restMetadata;
+              file.cover = cover;
+            }
+            _context3.next = 23;
+            break;
+          case 20:
+            _context3.prev = 20;
+            _context3.t0 = _context3["catch"](13);
+            console.error('获取媒体元数据失败:', _context3.t0);
+          case 23:
             return _context3.abrupt("return", file);
-          case 14:
+          case 24:
           case "end":
             return _context3.stop();
         }
-      }, _callee3);
+      }, _callee3, null, [[13, 20]]);
     }));
     return function beforeUpload(_x4, _x5) {
       return _ref4.apply(this, arguments);
     };
   }();
-  return /*#__PURE__*/React.createElement(PisellUpload, _extends({}, restProps, {
+  var handlePreview = function handlePreview(file) {
+    var _file$response2, _file$response2$data;
+    setPreviewImage(file.url || ((_file$response2 = file.response) === null || _file$response2 === void 0 ? void 0 : (_file$response2$data = _file$response2.data) === null || _file$response2$data === void 0 ? void 0 : _file$response2$data.url) || '');
+    setPreviewOpen(true);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PisellUpload, _extends({}, restProps, {
+    multiple: multiple,
+    showUploadList: {
+      showRemoveIcon: true,
+      showPreviewIcon: allowPreview
+    },
     uploadType: "custom",
+    iconRender: function iconRender() {
+      return /*#__PURE__*/React.createElement(IconFont, {
+        type: "pisell2-a-BlueFile1"
+      });
+    },
     listType: "picture-card",
     fileList: fileList,
     onChange: handleChange,
@@ -232,14 +333,36 @@ var BaseUpload = function BaseUpload(props) {
     method: "post",
     accept: accept,
     name: "file",
+    onPreview: handlePreview,
     data: function data(file) {
-      return {
-        group_id: 0,
-        metadata: file.metadata ? JSON.stringify(file.metadata) : undefined
-      };
+      var _file$metadata, _file$metadata2, _file$metadata3, _file$metadata4;
+      return _objectSpread(_objectSpread({
+        group_id: 0
+      }, file.metadata ? {
+        'metadata[width]': (_file$metadata = file.metadata) === null || _file$metadata === void 0 ? void 0 : _file$metadata.width,
+        'metadata[height]': (_file$metadata2 = file.metadata) === null || _file$metadata2 === void 0 ? void 0 : _file$metadata2.height,
+        'metadata[duration]': (_file$metadata3 = file.metadata) === null || _file$metadata3 === void 0 ? void 0 : _file$metadata3.duration,
+        'metadata[bitrate]': (_file$metadata4 = file.metadata) === null || _file$metadata4 === void 0 ? void 0 : _file$metadata4.bitrate
+      } : {}), file.cover ? {
+        cover: file.cover
+      } : {});
     },
-    headers: getHeaders(),
+    headers: getHeaders === null || getHeaders === void 0 ? void 0 : getHeaders(),
     beforeUpload: beforeUpload
-  }), fileList.length >= calcMaxCount ? null : uploadButton);
+  }), fileList.length >= calcMaxCount ? null : uploadButton), previewImage && /*#__PURE__*/React.createElement(Image, {
+    wrapperStyle: {
+      display: 'none'
+    },
+    preview: {
+      visible: previewOpen,
+      onVisibleChange: function onVisibleChange(visible) {
+        return setPreviewOpen(visible);
+      },
+      afterOpenChange: function afterOpenChange(visible) {
+        return !visible && setPreviewImage('');
+      }
+    },
+    src: previewImage
+  }));
 };
 export default BaseUpload;

package/es/components/dataSourceComponents/fields/Upload/ReadPretty.js

@@ -1,5 +1,8 @@
 import React from 'react';
+import { Image } from 'antd';
 var UploadReadPretty = function UploadReadPretty(props) {
-  return /*#__PURE__*/React.createElement("div", null, "UploadReadPretty");
+  return /*#__PURE__*/React.createElement(Image, {
+    src: props.value
+  });
 };
 export default UploadReadPretty;

package/es/components/dataSourceComponents/fields/Upload/index.less

@@ -1,8 +1,13 @@
 .pisell-upload-button {
   border: 0;
   background: none;
-  
+  cursor: inherit;
+
   .pisell-upload-text {
     margin-top: 8px;
   }
+
+  // &[disabled] {
+  //   opacity: 0.4;
+  // }
 }

package/es/components/dataSourceComponents/fields/Upload/type.d.ts

@@ -10,7 +10,7 @@ export interface UploadFile extends AntdUploadFile {
 }
 export interface UploadProps extends PisellUploadProps {
     renderMode?: 'read' | 'edit';
-    value?: string;
+    value?: string | string[];
     allowMediaLibrary?: boolean;
     allowLocalUpload?: boolean;
     allowPreview?: boolean;

package/es/components/dataSourceComponents/fields/Upload/utils.d.ts

@@ -1,5 +1,6 @@
 export declare const getSuffix: (name: string) => string | undefined;
 export declare const getPointSuffix: (name: string) => string;
+export declare const getPresetTypes: (presetTypes?: string[]) => string[];
 export declare const checkFileCount: ({ multiple, minCount, maxCount, valueLength, }: {
     multiple: boolean;
     minCount: number;