linkmore-design 1.0.63 → 1.0.67

package/es/LmUpload/UploadList/ItemPictureCard.js

@@ -0,0 +1,69 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useMemo, useState } from 'react';
+import cn from 'classnames';
+import { IconFont, Image } from 'linkmore-design'; // 图片列表项
+
+var PictureItem = function PictureItem(_ref) {
+  var file = _ref.file,
+      instance = _ref.instance;
+  var size = instance.size;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isError = _useState2[0],
+      setIsError = _useState2[1]; // 重置尺寸大小
+
+
+  var resetSize = useMemo(function () {
+    var width = size - 16;
+    var padding = size > 60 ? 8 : 4;
+    var fontSize = size > 60 ? 16 : 14;
+    return {
+      width: width,
+      padding: padding,
+      fontSize: fontSize
+    };
+  }, [size]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn('lm_upload_item', 'lm_upload_item_card', isError && 'error'),
+    style: {
+      height: size,
+      width: size
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'lm_upload_item_thumb'
+  }, isError ? /*#__PURE__*/React.createElement("div", {
+    className: 'lm_upload_item_error'
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lmweb-image"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: 'lm_upload_item_name'
+  }, file.fileName)) : /*#__PURE__*/React.createElement(Image, {
+    width: resetSize.width,
+    height: resetSize.width,
+    src: file.url,
+    onError: function onError() {
+      return setIsError(true);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: 'lm_upload_item_mask'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'lm_upload_item_action'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'action_preview'
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lmweb-eye",
+    style: {
+      fontSize: size > 48 ? 16 : 12
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: 'action_delete'
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lmweb-delete",
+    style: {
+      fontSize: size > 48 ? 16 : 12
+    }
+  })))));
+};
+
+export default PictureItem;

package/es/LmUpload/UploadList/ItemText.d.ts

@@ -0,0 +1,4 @@
+declare const TextItem: ({ file }: {
+    file: any;
+}) => JSX.Element;
+export default TextItem;

package/es/LmUpload/UploadList/ItemText.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IconFont } from 'linkmore-design';
+
+var TextItem = function TextItem(_ref) {
+  var file = _ref.file;
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'lm_upload_item lm_upload_item_text'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'text_left'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'prefix'
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lmweb-attachment"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: 'lm_upload_item_name'
+  }, file.fileName)), /*#__PURE__*/React.createElement("div", {
+    className: 'text_right lm_upload_item_text_action'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'action_delete'
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lmweb-delete"
+  }))));
+};
+
+export default TextItem;

package/es/LmUpload/UploadList/RenderItem.d.ts

@@ -0,0 +1,6 @@
+export interface RenderCellProps<T = any> {
+    type?: string;
+    instance: any;
+}
+declare const RenderCell: (props: RenderCellProps) => any;
+export default RenderCell;

package/es/LmUpload/UploadList/RenderItem.js

@@ -0,0 +1,31 @@
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import TextItem from './ItemText';
+import PictureItem from './ItemPicture';
+import PictureCardItem from './ItemPictureCard';
+import { render } from '../utils';
+
+var RenderCell = function RenderCell(props) {
+  var type = props.type,
+      resetProsp = __rest(props, ["type"]);
+
+  var types = {
+    'text': TextItem,
+    'picture': PictureItem,
+    'card': PictureCardItem
+  };
+  return render(types[type] || PictureItem, resetProsp);
+};
+
+export default RenderCell;

package/es/LmUpload/UploadList/index.d.ts

@@ -0,0 +1,4 @@
+declare const LmUploadList: ({ instance }: {
+    instance: any;
+}) => any;
+export default LmUploadList;

package/es/LmUpload/UploadList/index.js

@@ -0,0 +1,21 @@
+import { render } from '../utils';
+import RenderItem from './RenderItem';
+
+var LmUploadList = function LmUploadList(_ref) {
+  var instance = _ref.instance;
+  var state = instance.state,
+      itemRender = instance.itemRender,
+      listType = instance.listType;
+  var fileList = state.fileList;
+  return fileList.map(function (file, idx) {
+    return render(itemRender || RenderItem, {
+      type: listType,
+      key: idx,
+      file: file,
+      fileList: fileList,
+      instance: instance
+    });
+  });
+};
+
+export default LmUploadList;

package/es/LmUpload/body/UploadCore.d.ts

@@ -0,0 +1,4 @@
+declare const UploadCore: ({ instance }: {
+    instance: any;
+}) => JSX.Element;
+export default UploadCore;

package/es/LmUpload/body/UploadCore.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import UploadPicture from './UploadPicture'; // 上传核心
+// 渲染上传区域样式, 仅用于触发上传事件
+// type: 'card' 图片 | 'drag' 拖拽
+
+var UploadCore = function UploadCore(_ref) {
+  var instance = _ref.instance;
+  var inputRef = React.useRef(null);
+  var accept = instance.accept,
+      children = instance.children,
+      beforeUpload = instance.beforeUpload; // 点击事件触发文件上传
+
+  var handleClick = function handleClick() {
+    var _a;
+
+    (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+  };
+
+  var inputConfig = {
+    type: "file",
+    accept: accept,
+    title: '',
+    onChange: function onChange(e) {
+      var _a;
+
+      beforeUpload === null || beforeUpload === void 0 ? void 0 : beforeUpload(e);
+
+      if ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) {
+        inputRef.current.value = '';
+      }
+    },
+    style: {
+      display: 'none'
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: handleClick,
+    className: "lm_upload_core"
+  }, children || /*#__PURE__*/React.createElement(UploadPicture, {
+    instance: instance
+  }), /*#__PURE__*/React.createElement("input", Object.assign({
+    ref: inputRef
+  }, inputConfig)));
+};
+
+export default UploadCore;

package/es/LmUpload/body/UploadDrag.d.ts

@@ -0,0 +1,4 @@
+declare const uploadDrag: ({ instance }: {
+    instance: any;
+}) => JSX.Element;
+export default uploadDrag;

package/es/LmUpload/body/UploadDrag.js

@@ -0,0 +1,10 @@
+import * as React from 'react'; // 预设拖拽上传样式
+
+var uploadDrag = function uploadDrag(_ref) {
+  var instance = _ref.instance;
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'lm_upload_item'
+  }, "drag");
+};
+
+export default uploadDrag;

package/es/LmUpload/body/UploadPicture.d.ts

@@ -0,0 +1,4 @@
+declare const uploadPicture: ({ instance }: {
+    instance: any;
+}) => JSX.Element;
+export default uploadPicture;

package/es/LmUpload/body/UploadPicture.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { IconFont } from 'linkmore-design'; // 预设卡片上传样式
+
+var uploadPicture = function uploadPicture(_ref) {
+  var instance = _ref.instance;
+  var size = instance.size;
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'lm_upload_core_picture',
+    style: {
+      height: size,
+      width: size
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'lm_upload_core_picture_action'
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'action_plus'
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lmweb-plus",
+    style: {
+      fontSize: size > 48 ? 16 : 12
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: 'tip'
+  }, "\u4E0A\u4F20")));
+};
+
+export default uploadPicture;

package/es/LmUpload/components/card.d.ts

@@ -0,0 +1,2 @@
+declare const Card: () => JSX.Element;
+export default Card;

package/es/LmUpload/components/card.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+var Card = function Card() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'lm_upload_card_box'
+  });
+};
+
+export default Card;

package/es/LmUpload/fns/index.d.ts

@@ -0,0 +1,13 @@
+declare const useCoreOptions: ({ state, dispatch, props }: {
+    state: any;
+    dispatch: any;
+    props: any;
+}) => {
+    CoreMethods: {
+        beforeUpload: (e: any) => false | import("../../message").MessageType;
+    };
+    RefMethods: {
+        getState: () => any;
+    };
+};
+export default useCoreOptions;

package/es/LmUpload/fns/index.js

@@ -0,0 +1,74 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { message } from 'linkmore-design';
+
+var useCoreOptions = function useCoreOptions(_ref) {
+  var state = _ref.state,
+      dispatch = _ref.dispatch,
+      props = _ref.props;
+  var value = props.value,
+      onChange = props.onChange,
+      size = props.size,
+      type = props.type,
+      fileSize = props.fileSize,
+      fileUpload = props.fileUpload;
+
+  var uploadOnChange = function uploadOnChange(file) {
+    var fileList = [file].concat(_toConsumableArray(state.fileList));
+    console.log('fileList', fileList);
+    dispatch({
+      type: 'changeFileList',
+      fileList: fileList
+    }); // 上传事件：抛出 file: 文件  filelist: 文件列表 event: 上传进度信息
+
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      file: file,
+      fileList: fileList,
+      event: event
+    });
+  }; // 上传前的检测
+
+
+  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('、');
+        return message.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) {
+        return message.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: uploadOnChange,
+        isImg: true
+      });
+    }
+
+    ;
+    return false;
+  };
+
+  var CoreMethods = {
+    beforeUpload: beforeUpload
+  };
+  var RefMethods = {
+    getState: function getState() {
+      return state;
+    }
+  };
+  return {
+    CoreMethods: CoreMethods,
+    RefMethods: RefMethods
+  };
+};
+
+export default useCoreOptions;

package/es/LmUpload/index.d.ts

@@ -0,0 +1,2 @@
+import LmUpload from './LmUpload';
+export default LmUpload;

package/es/LmUpload/index.js

@@ -0,0 +1,2 @@
+import LmUpload from './LmUpload';
+export default LmUpload;

package/es/LmUpload/style/index.css

@@ -0,0 +1,188 @@
+.lm_upload_wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.lm_upload_wrapper .lm_upload_core {
+  display: inline-flex;
+  vertical-align: middle;
+}
+.lm_upload_wrapper .lm_upload_core .lm_upload_core_picture {
+  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border: 1px solid var(--color-15);
+  background-color: var(--color-2);
+  transition: all 0.3s;
+  cursor: pointer;
+}
+.lm_upload_wrapper .lm_upload_core .lm_upload_core_picture:hover {
+  border-color: var(--primary-color);
+}
+.lm_upload_wrapper .lm_upload_core .lm_upload_core_picture .lm_upload_core_picture_action {
+  text-align: center;
+}
+.lm_upload_wrapper .lm_upload_core .lm_upload_core_picture .lm_upload_core_picture_action .action_plus {
+  color: var(--color-85);
+}
+.lm_upload_wrapper .lm_upload_core .lm_upload_core_picture .lm_upload_core_picture_action .tip {
+  color: var(--color-45);
+  margin-top: var(--gap);
+}
+.lm_upload_wrapper .lm_upload_item {
+  vertical-align: middle;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_text {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap);
+  width: 100%;
+  height: 22px;
+  padding: 0 6px;
+  transition: 0.3s;
+  cursor: pointer;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_text:hover {
+  background-color: var(--color-2);
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_left {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_left .prefix {
+  font-size: 14px;
+  color: var(--color-45);
+  transition: 0.3s;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_left .lm_upload_item_name {
+  flex: 1;
+  font-size: 14px;
+  color: var(--primary-color);
+  transition: 0.3s;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_right {
+  display: inline-flex;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_right .action_delete {
+  width: 24px;
+  text-align: center;
+  color: var(--color-45);
+  transition: 0.3s;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_right .action_delete .anticon {
+  font-size: 14px;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_text .text_right .action_delete:hover {
+  color: var(--primary-color);
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border: 1px solid var(--color-15);
+  border-radius: 2px;
+  padding: var(--gap);
+  transition: all 0.3s;
+  cursor: pointer;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_thumb {
+  width: 100%;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_thumb img {
+  object-fit: contain;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_error .anticon {
+  font-size: 34px;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_error .lm_upload_item_name {
+  font-size: 12px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin-top: 8px;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_mask {
+  position: absolute;
+  inset: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: 0.3s;
+  z-index: 1;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card .lm_upload_item_mask .lm_upload_item_action {
+  display: flex;
+  align-items: center;
+  gap: var(--gap);
+  color: #fff;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card:hover .lm_upload_item_mask {
+  opacity: 1;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card.error {
+  border-color: var(--error-color);
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card.error .lm_upload_item_mask {
+  display: none;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_card.error .lm_upload_item_error {
+  color: var(--error-color);
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gap);
+  width: 100%;
+  border: 1px solid var(--color-15);
+  border-radius: 2px;
+  padding: var(--gap);
+  transition: 0.3s;
+  cursor: pointer;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture:hover {
+  border-color: var(--primary-color);
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_left {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap);
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_left .lm_upload_item_thumb {
+  width: 48px;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_left .lm_upload_item_thumb img {
+  width: 100%;
+  max-height: 80px;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_left .lm_upload_item_name {
+  flex: 1;
+  font-size: 14px;
+  color: var(--primary-color);
+  transition: 0.3s;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_right {
+  display: flex;
+  align-items: center;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_right .action_delete {
+  width: 24px;
+  text-align: center;
+  color: var(--color-45);
+  transition: 0.3s;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_right .action_delete .anticon {
+  font-size: 14px;
+}
+.lm_upload_wrapper .lm_upload_item.lm_upload_item_picture .picture_right .action_delete:hover {
+  color: var(--primary-color);
+}

package/es/LmUpload/style/index.js

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

package/es/LmUpload/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function isClassComponent(component: any): any;
+export declare function isExoticComponent(component: any): boolean;
+export declare function isReactComponent(component: any): any;
+export declare const render: (Comp: any, props: any) => any;

package/es/LmUpload/utils.js

@@ -0,0 +1,20 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import React from "react"; // 检查是否类组件
+
+export function isClassComponent(component) {
+  return typeof component === 'function' && function () {
+    var proto = Object.getPrototypeOf(component);
+    return proto.prototype && proto.prototype.isReactComponent;
+  }();
+} // 检查是否自定义组件
+
+export function isExoticComponent(component) {
+  return _typeof(component) === 'object' && _typeof(component.$$typeof) === 'symbol' && ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description);
+} // 检查是否React组件
+
+export function isReactComponent(component) {
+  return isClassComponent(component) || typeof component === 'function' || isExoticComponent(component);
+}
+export var render = function render(Comp, props) {
+  return !Comp ? null : isReactComponent(Comp) ? /*#__PURE__*/React.createElement(Comp, Object.assign({}, props)) : Comp;
+};

package/es/LmUpload/view/index.d.ts

@@ -0,0 +1,4 @@
+declare const LmUploadView: ({ instance }: {
+    instance: any;
+}) => JSX.Element;
+export default LmUploadView;

package/es/LmUpload/view/index.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+var LmUploadView = function LmUploadView(_ref) {
+  var instance = _ref.instance;
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'lm_upload_view'
+  }, "view");
+};
+
+export default LmUploadView;

package/es/LmUpload/wrapper/Upload.d.ts

@@ -0,0 +1,4 @@
+declare const LmUpload: ({ instance }: {
+    instance: any;
+}) => JSX.Element;
+export default LmUpload;

package/es/LmUpload/wrapper/Upload.js

@@ -0,0 +1,12 @@
+// 上传组件组合
+import * as React from 'react';
+import UploadCore from '../body/UploadCore';
+
+var LmUpload = function LmUpload(_ref) {
+  var instance = _ref.instance;
+  return /*#__PURE__*/React.createElement(UploadCore, {
+    instance: instance
+  });
+};
+
+export default LmUpload;

package/es/LmUpload/wrapper/UploadContainer.d.ts

@@ -0,0 +1,4 @@
+declare const LmUploadContainer: ({ instance }: {
+    instance: any;
+}) => JSX.Element;
+export default LmUploadContainer;

package/es/LmUpload/wrapper/UploadContainer.js

@@ -0,0 +1,12 @@
+// 上传组件主体区域
+import * as React from 'react';
+import LmUpload from './Upload';
+
+var LmUploadContainer = function LmUploadContainer(_ref) {
+  var instance = _ref.instance;
+  return /*#__PURE__*/React.createElement(LmUpload, {
+    instance: instance
+  });
+};
+
+export default LmUploadContainer;

package/es/LmUpload/wrapper/UploadRoot.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+export default _default;