linkmore-design 1.1.20 → 1.1.21

package/lib/UploadOss/style/index.css

@@ -0,0 +1,121 @@
+.lm_upload_btn {
+  display: inline-flex;
+}
+.lm_upload_btn .upload_body {
+  font-size: 12px;
+}
+.lm_upload_btn .upload_body .upload_diy {
+  position: relative;
+}
+.lm_upload_btn .upload_body .upload_diy .upload_input {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  opacity: 0;
+}
+.lm_upload_btn .upload_body .upload_diy:hover .upload_btn {
+  color: #1890fc;
+  border-color: #1890fc;
+}
+.lm_upload_btn .upload_body .upload_btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  height: 32px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  padding: 0 12px;
+  transition: 0.3s;
+}
+.lm_upload_btn .upload_body .upload_btn.small {
+  height: 24px;
+}
+.lm_upload_btn .upload_body .upload_btn .upload_btn_icon {
+  margin-right: 4px;
+}
+.lm_upload_img {
+  display: inline-flex;
+}
+.lm_upload_img .upload_body {
+  display: inline-flex;
+  flex-wrap: wrap;
+  font-size: 12px;
+  line-height: 1;
+}
+.lm_upload_img .upload_body .view_box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #d9d9d9;
+  padding: 8px;
+}
+.lm_upload_img .upload_body .view_box .view_item_thum {
+  position: relative;
+}
+.lm_upload_img .upload_body .view_box .view_item_thum::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: 0.3s;
+  z-index: 1;
+}
+.lm_upload_img .upload_body .view_box .view_item_thum img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.lm_upload_img .upload_body .view_box .view_item_thum .view_item_action {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  text-align: center;
+  opacity: 0;
+  z-index: 2;
+  color: #fff;
+}
+.lm_upload_img .upload_body .view_box .view_item_thum .view_item_action .view_item_action_icon {
+  display: flex;
+  justify-content: center;
+  margin: 8px 0;
+}
+.lm_upload_img .upload_body .view_box .view_item_thum .view_item_action .view_item_action_icon > div {
+  padding: 0 4px;
+  cursor: pointer;
+}
+.lm_upload_img .upload_body .view_box:hover .view_item_thum::before {
+  opacity: 1;
+}
+.lm_upload_img .upload_body .view_box:hover .view_item_thum .view_item_action {
+  opacity: 1;
+}
+.lm_upload_img .upload_body .upload_card_box {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border: 1px dashed #d9d9d9;
+  transition: all 0.3s;
+}
+.lm_upload_img .upload_body .upload_card_box .upload_input {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+.lm_upload_img .upload_body .upload_card_box:hover {
+  border-color: #1890fc;
+}

package/lib/UploadOss/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.css");

package/lib/UploadOss/style/variables.css

@@ -0,0 +1,121 @@
+.lm_upload_btn {
+  display: inline-flex;
+}
+.lm_upload_btn .upload_body {
+  font-size: 12px;
+}
+.lm_upload_btn .upload_body .upload_diy {
+  position: relative;
+}
+.lm_upload_btn .upload_body .upload_diy .upload_input {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  opacity: 0;
+}
+.lm_upload_btn .upload_body .upload_diy:hover .upload_btn {
+  color: #1890fc;
+  border-color: #1890fc;
+}
+.lm_upload_btn .upload_body .upload_btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  height: 32px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  padding: 0 12px;
+  transition: 0.3s;
+}
+.lm_upload_btn .upload_body .upload_btn.small {
+  height: 24px;
+}
+.lm_upload_btn .upload_body .upload_btn .upload_btn_icon {
+  margin-right: 4px;
+}
+.lm_upload_img {
+  display: inline-flex;
+}
+.lm_upload_img .upload_body {
+  display: inline-flex;
+  flex-wrap: wrap;
+  font-size: 12px;
+  line-height: 1;
+}
+.lm_upload_img .upload_body .view_box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #d9d9d9;
+  padding: 8px;
+}
+.lm_upload_img .upload_body .view_box .view_item_thum {
+  position: relative;
+}
+.lm_upload_img .upload_body .view_box .view_item_thum::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: 0.3s;
+  z-index: 1;
+}
+.lm_upload_img .upload_body .view_box .view_item_thum img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.lm_upload_img .upload_body .view_box .view_item_thum .view_item_action {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  text-align: center;
+  opacity: 0;
+  z-index: 2;
+  color: #fff;
+}
+.lm_upload_img .upload_body .view_box .view_item_thum .view_item_action .view_item_action_icon {
+  display: flex;
+  justify-content: center;
+  margin: 8px 0;
+}
+.lm_upload_img .upload_body .view_box .view_item_thum .view_item_action .view_item_action_icon > div {
+  padding: 0 4px;
+  cursor: pointer;
+}
+.lm_upload_img .upload_body .view_box:hover .view_item_thum::before {
+  opacity: 1;
+}
+.lm_upload_img .upload_body .view_box:hover .view_item_thum .view_item_action {
+  opacity: 1;
+}
+.lm_upload_img .upload_body .upload_card_box {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border: 1px dashed #d9d9d9;
+  transition: all 0.3s;
+}
+.lm_upload_img .upload_body .upload_card_box .upload_input {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+.lm_upload_img .upload_body .upload_card_box:hover {
+  border-color: #1890fc;
+}

package/lib/UploadOss/style/variables.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./variables.css");

package/lib/UploadOss/uploadBtn.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/spin/style");
+
+var _spin = _interopRequireDefault(require("antd/es/spin"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("antd/es/message/style");
+
+var _message2 = _interopRequireDefault(require("antd/es/message"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _IconFont = _interopRequireDefault(require("../IconFont"));
+
+var UploadBox = function UploadBox(props) {
+  var _props$value = props.value,
+      value = _props$value === void 0 ? [] : _props$value,
+      onChange = props.onChange,
+      _props$label = props.label,
+      label = _props$label === void 0 ? '上传文件' : _props$label,
+      _props$icon = props.icon,
+      icon = _props$icon === void 0 ? /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+    type: "lmweb-cloud-upload",
+    className: "upload_btn_icon"
+  }) : _props$icon,
+      _props$length = props.length,
+      length = _props$length === void 0 ? 10 : _props$length,
+      accept = props.accept,
+      _props$type = props.type,
+      type = _props$type === void 0 ? ['xls', 'xlsx', 'jpg', 'png'] : _props$type,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'small' : _props$size,
+      _props$fileSize = props.fileSize,
+      fileSize = _props$fileSize === void 0 ? 50 : _props$fileSize,
+      multiple = props.multiple,
+      children = props.children,
+      fileUpload = props.fileUpload,
+      isLoading = props.isLoading,
+      _props$valueType = props.valueType,
+      valueType = _props$valueType === void 0 ? 'object' : _props$valueType;
+  var fielRef = (0, _react.useRef)(null);
+
+  var clearInput = function clearInput() {
+    var _fielRef$current;
+
+    if ((_fielRef$current = fielRef.current) === null || _fielRef$current === void 0 ? void 0 : _fielRef$current.value) {
+      fielRef.current.value = '';
+    }
+  }; // 触发外部OnChange事件
+
+
+  var handleUpload = function handleUpload(file) {
+    var nValue = valueType === 'array' ? [].concat((0, _toConsumableArray2.default)(value), [file]) : file;
+    onChange === null || onChange === void 0 ? void 0 : onChange(nValue);
+    clearInput();
+  }; // 上传前置处理
+
+
+  var beforeUpload = function beforeUpload(e) {
+    var file = e.target.files;
+
+    if (length > 0 && file.length + value.length > length) {
+      return _message2.default.warning("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01\u6700\u591A\u53EA\u80FD\u4E0A\u4F20".concat(length, "\u4E2A\u6587\u4EF6"), 1.5);
+    } // 循环文件检查是否存在不符合要求的文件
+
+
+    for (var i = 0, len = file.length; i < len; i += 1) {
+      var item = file[i];
+
+      if (!type.includes(item.name.replace(/.*\./, '').toLowerCase())) {
+        var content = type.join('、');
+        clearInput();
+        return _message2.default.warning("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01\u4EC5\u652F\u6301".concat(content, "\u7684\u6587\u4EF6\u7C7B\u578B\uFF01"), 1.5);
+      }
+
+      if (item.size / 1024 / 1024 > fileSize) {
+        clearInput();
+        return _message2.default.warning("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01\u9644\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7".concat(fileSize, "M\uFF01"), 1.5);
+      } // 单个文件上传
+
+
+      fileUpload === null || fileUpload === void 0 ? void 0 : fileUpload({
+        file: item,
+        size: size,
+        value: value,
+        onChange: handleUpload
+      });
+    }
+
+    return false;
+  };
+
+  var config = {
+    type: 'file',
+    multiple: multiple,
+    accept: accept,
+    title: '',
+    className: 'upload_input',
+    onChange: beforeUpload
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_spin.default, {
+    spinning: isLoading,
+    size: "small"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "upload_diy"
+  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+    ref: fielRef
+  }, config)), children || /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('upload_btn', {
+      small: size === 'small'
+    })
+  }, icon, /*#__PURE__*/_react.default.createElement("div", {
+    className: "upload_btn_text"
+  }, label)))));
+};
+
+var Index = function Index(props) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_upload_btn"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "upload_body"
+  }, /*#__PURE__*/_react.default.createElement(UploadBox, props)));
+};
+
+var _default = Index;
+exports.default = _default;

package/lib/UploadOss/uploadImg.js

@@ -0,0 +1,282 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+require("antd/es/spin/style");
+
+var _spin = _interopRequireDefault(require("antd/es/spin"));
+
+require("antd/es/message/style");
+
+var _message2 = _interopRequireDefault(require("antd/es/message"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("antd/es/image/style");
+
+var _image = _interopRequireDefault(require("antd/es/image"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _IconFont = _interopRequireDefault(require("../IconFont"));
+
+var Context = /*#__PURE__*/(0, _react.createContext)(); // 视图展示
+
+var ViewImgItem = function ViewImgItem(props) {
+  var _useContext = (0, _react.useContext)(Context),
+      value = _useContext.value,
+      isCheckOss = _useContext.isCheckOss,
+      size = _useContext.size,
+      length = _useContext.length,
+      onChange = _useContext.onChange,
+      previewChildren = _useContext.previewChildren;
+
+  var externalUrl = props.externalUrl,
+      filePath = props.filePath,
+      realFileName = props.realFileName; // 是否开启OSS配置不同小图预览
+
+  var thumbUrl = isCheckOss ? "".concat(externalUrl, "/").concat(filePath).concat(realFileName, "?x-oss-process=image/resize,w_").concat(size) : "".concat(externalUrl, "/").concat(filePath, "T").concat(size).concat(realFileName); // 重置尺寸大小
+
+  var resetSize = (0, _react.useMemo)(function () {
+    var gap = size > 60 ? 18 : 10;
+    var width = size - gap;
+    var padding = size > 60 ? 8 : 4;
+    var fontSize = size > 60 ? 16 : 14;
+    return {
+      width: width,
+      padding: padding,
+      fontSize: fontSize
+    };
+  }, [size]); // 受控的大图预览
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1]; // 预览
+
+
+  var handlePreview = function handlePreview() {
+    return setVisible(true);
+  }; // 删除
+
+
+  var handleDelete = function handleDelete() {
+    var nValue = length > 1 ? value.filter(function (v) {
+      return v.realFileName !== realFileName;
+    }) : null;
+    onChange === null || onChange === void 0 ? void 0 : onChange(nValue);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "view_box",
+    style: {
+      padding: resetSize.padding
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "view_item_thum",
+    style: {
+      width: resetSize.width,
+      height: resetSize.width
+    }
+  }, /*#__PURE__*/_react.default.createElement(_image.default, {
+    width: resetSize.width,
+    height: resetSize.width,
+    src: thumbUrl,
+    preview: {
+      visible: visible,
+      src: "".concat(externalUrl, "/").concat(filePath).concat(realFileName),
+      onVisibleChange: function onVisibleChange(val) {
+        return setVisible(val);
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "view_item_action"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "view_item_action_icon",
+    style: {
+      fontSize: resetSize.fontSize
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "view_item_preview",
+    onClick: handlePreview
+  }, /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+    type: "lmweb-eye"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "view_item_delete",
+    onClick: handleDelete
+  }, /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+    type: "lmweb-delete"
+  }))), previewChildren && previewChildren(props)))));
+};
+
+var ViewImg = function ViewImg() {
+  var _useContext2 = (0, _react.useContext)(Context),
+      value = _useContext2.value;
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value === null || value === void 0 ? void 0 : value.map(function (v, idx) {
+    return /*#__PURE__*/_react.default.createElement(ViewImgItem, (0, _extends2.default)({
+      key: v.realFileName || idx
+    }, v));
+  }));
+};
+
+var UploadCard = function UploadCard() {
+  var _useContext3 = (0, _react.useContext)(Context),
+      _useContext3$value = _useContext3.value,
+      value = _useContext3$value === void 0 ? [] : _useContext3$value,
+      onChange = _useContext3.onChange,
+      size = _useContext3.size,
+      length = _useContext3.length,
+      _useContext3$label = _useContext3.label,
+      label = _useContext3$label === void 0 ? '上传图片' : _useContext3$label,
+      required = _useContext3.required,
+      accept = _useContext3.accept,
+      _useContext3$type = _useContext3.type,
+      type = _useContext3$type === void 0 ? ['jpg', 'jpeg', 'png'] : _useContext3$type,
+      _useContext3$fileSize = _useContext3.fileSize,
+      fileSize = _useContext3$fileSize === void 0 ? 10 : _useContext3$fileSize,
+      children = _useContext3.children,
+      fileUpload = _useContext3.fileUpload,
+      isLoading = _useContext3.isLoading,
+      _useContext3$valueTyp = _useContext3.valueType,
+      valueType = _useContext3$valueTyp === void 0 ? 'object' : _useContext3$valueTyp;
+
+  var fielRef = (0, _react.useRef)(null);
+
+  var clearInput = function clearInput() {
+    var _fielRef$current;
+
+    if ((_fielRef$current = fielRef.current) === null || _fielRef$current === void 0 ? void 0 : _fielRef$current.value) {
+      fielRef.current.value = null;
+    }
+  }; // 触发外部OnChange事件
+
+
+  var handleUpload = function handleUpload(file) {
+    var nValue = length > 1 || valueType === 'array' ? [].concat((0, _toConsumableArray2.default)(value), [file]) : file;
+    onChange === null || onChange === void 0 ? void 0 : onChange(nValue);
+    clearInput();
+  }; // 上传前置处理
+
+
+  var beforeUpload = function beforeUpload(e) {
+    var file = e.target.files; // 循环文件检查是否存在不符合要求的文件
+
+    for (var i = 0, len = file.length; i < len; i += 1) {
+      var item = file[i];
+
+      if (!type.includes(item.name.replace(/.*\./, '').toLowerCase())) {
+        var content = type.join('、');
+        clearInput();
+        return _message2.default.warning("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01\u4EC5\u652F\u6301".concat(content, "\u7684\u6587\u4EF6\u7C7B\u578B\uFF01"), 1.5);
+      }
+
+      if (item.size / 1024 / 1024 > fileSize) {
+        clearInput();
+        return _message2.default.warning("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01\u9644\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7".concat(fileSize, "M\uFF01"), 1.5);
+      } // 单个文件上传
+
+
+      fileUpload === null || fileUpload === void 0 ? void 0 : fileUpload({
+        file: item,
+        size: size,
+        value: value,
+        onChange: handleUpload,
+        isImg: true
+      });
+    }
+
+    return false;
+  }; // 未上传时的占位符
+
+
+  var UploadPlaceholder = function UploadPlaceholder() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+      type: "lmweb-plus",
+      style: {
+        fontSize: size > 48 ? 24 : 16
+      }
+    }), label && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginTop: 8
+      }
+    }, required && /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        color: '#FD4D4E'
+      }
+    }, "*"), label));
+  };
+
+  var config = {
+    type: 'file',
+    accept: accept,
+    title: '',
+    className: 'upload_input',
+    onChange: beforeUpload
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_spin.default, {
+    spinning: isLoading,
+    size: "small"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "upload_card_box",
+    style: {
+      height: size,
+      width: size
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "upload_card_action"
+  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+    ref: fielRef
+  }, config)), /*#__PURE__*/_react.default.createElement("div", null, children || /*#__PURE__*/_react.default.createElement(UploadPlaceholder, null))))));
+};
+
+var Index = function Index(props) {
+  var _props$value = props.value,
+      value = _props$value === void 0 ? [] : _props$value,
+      _props$length = props.length,
+      length = _props$length === void 0 ? 1 : _props$length,
+      _props$style = props.style,
+      style = _props$style === void 0 ? {
+    gap: 16
+  } : _props$style; // 默认参数
+
+  var defaultConfig = {
+    size: 104,
+    label: '上传图片',
+    type: ['jpg', 'jpeg', 'png'],
+    fileSize: 10
+  };
+
+  var Control = function Control() {
+    if (Array.isArray(value)) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ViewImg, null), value.length < length ? /*#__PURE__*/_react.default.createElement(UploadCard, null) : null);
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value && /*#__PURE__*/_react.default.createElement(ViewImgItem, value), value ? null : /*#__PURE__*/_react.default.createElement(UploadCard, null));
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_upload_img"
+  }, /*#__PURE__*/_react.default.createElement(Context.Provider, {
+    value: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultConfig), props)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "upload_body",
+    style: style
+  }, Control())));
+};
+
+var _default = Index;
+exports.default = _default;