linkmore-design 1.0.66 → 1.0.69

package/lib/LmTable/Table.js

@@ -13,12 +13,12 @@ require("antd/es/config-provider/style");
 
 var _configProvider = _interopRequireDefault(require("antd/es/config-provider"));
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -39,11 +39,15 @@ var _reactResizable = require("react-resizable");
 
 var _reactSortableHoc = require("react-sortable-hoc");
 
-var _empty = _interopRequireDefault(require("./assets/empty.png"));
+var _DndContainer = _interopRequireDefault(require("./components/DndContainer"));
+
+var _sortableBoxCol = _interopRequireDefault(require("./components/sortableBoxCol"));
+
+var _sortableItemCol = _interopRequireDefault(require("./components/sortableItemCol"));
 
 var _resetConfig = _interopRequireDefault(require("./resetConfig"));
 
-var _excluded = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "emptyProps"],
+var _excluded = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "sortOpen", "colSortOpen", "resizeable", "customCheck", "components", "rowSelection", "columnsState", "onChange", "filterChange", "tableRowType", "size", "emptyProps"],
     _excluded2 = ["className", "style"],
     _excluded3 = ["onResize", "width", "onResizeStop"];
 var Summary = _proTable.default.Summary; // const DragHandle = SortableHandle(() => <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />);
@@ -53,7 +57,7 @@ var DragHandle = (0, _reactSortableHoc.SortableHandle)(function () {
   return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.IconFont, {
     type: "lmweb-icon-m-receipt1",
     style: {
-      cursor: 'grab',
+      cursor: 'move',
       fontSize: '16px'
     }
   });
@@ -83,6 +87,8 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       virtual = _props$virtual === void 0 ? false : _props$virtual,
       _props$sortOpen = props.sortOpen,
       sortOpen = _props$sortOpen === void 0 ? false : _props$sortOpen,
+      _props$colSortOpen = props.colSortOpen,
+      colSortOpen = _props$colSortOpen === void 0 ? false : _props$colSortOpen,
       _props$resizeable = props.resizeable,
       resizeable = _props$resizeable === void 0 ? false : _props$resizeable,
       customCheck = props.customCheck,
@@ -97,7 +103,6 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       size = _props$size === void 0 ? 'default' : _props$size,
       emptyProps = props.emptyProps,
       resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  console.log(emptyProps, '--emptyProps');
   var _resetProps$rowKey = resetProps.rowKey,
       rowKey = _resetProps$rowKey === void 0 ? 'id' : _resetProps$rowKey;
 
@@ -141,9 +146,25 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       var newData = (0, _sortable.arrayMove)(dataSource, oldIndex, newIndex).filter(function (el) {
         return !!el;
       }); // setDataSource([...newData])
+
+      onChange === null || onChange === void 0 ? void 0 : onChange(newData);
     }
   };
 
+  var onColSortEnd = function onColSortEnd(active, over) {
+    var oldIndex = columns.findIndex(function (item) {
+      return item.dataIndex === active;
+    });
+    var newIndex = columns.findIndex(function (item) {
+      return item.dataIndex === over;
+    });
+    filterChange === null || filterChange === void 0 ? void 0 : filterChange((0, _sortable.arrayMove)(columns, oldIndex, newIndex).map(function (item, index) {
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        order: index
+      });
+    }));
+  };
+
   var DraggableContainer = function DraggableContainer(props) {
     return /*#__PURE__*/_react.default.createElement(SortContainer, (0, _extends2.default)({
       useDragHandle: true,
@@ -163,31 +184,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return /*#__PURE__*/_react.default.createElement(SortableItem, (0, _extends2.default)({
       index: index
     }, restProps));
-  }; // 原宽度，先宽度，序号
-  // const handleResize = (sc, size, index) => {
-  //   // const preCountW = sumBy(useColumns, 'width') + 36
-  //   // const curCountW = preCountW - sc + size
-  //   // const scale =
-  //   //   curCountW > preCountW
-  //   //     ? subtract(preCountW, size) / subtract(preCountW, sc)
-  //   //     : subtract(autoSize.width, size) / subtract(autoSize.width, sc)
-  //   // const nValue = useColumns.map((v, idx) => {
-  //   //   const w = curCountW < autoSize.width ? scale * v.width : v.width
-  //   //   return {
-  //   //     ...v,
-  //   //     width: idx === index ? size : w,
-  //   //   }
-  //   // })
-  //   // setColumns([...nValue])
-  //   console.log(sc, size, index, 666)
-  //   const nextColumns = [...useColumns]
-  //   nextColumns[index] = {
-  //     ...nextColumns[index],
-  //     width: size.width,
-  //   }
-  //   setColumns(nextColumns)
-  // }
-
+  };
 
   var handleResize = function handleResize(index) {
     return function (e, _ref2) {
@@ -286,7 +283,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       tableAlertRender: false,
       checkConfig: checkConfig,
       // components: vComponents,
-      scroll: resetProps.autoSizer || resetProps.scroll ? Object.assign((0, _objectSpread2.default)({
+      scroll: resetProps.autoSizer || resetProps.scroll ? (0, _objectSpread2.default)((0, _objectSpread2.default)({
         y: autoSize.height
       }, resetProps.scroll), resizeable ? {
         x: '100%'
@@ -439,13 +436,23 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
   var onTableChange = function onTableChange(pagination, filters, sorter, extra) {
     var resultColumns = useColumns.map(function (item) {
-      var obj = (0, _objectSpread2.default)({}, item);
-      obj['filteredValue'] = filters[obj.dataIndex] || []; // if (filters[obj.dataIndex]) {
+      var obj = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        sortOrder: false
+      });
+      obj.filteredValue = filters[obj.dataIndex] || []; // if (filters[obj.dataIndex]) {
       //   obj['filteredValue'] = filters[obj.dataIndex]
       // }
 
-      if ((sorter === null || sorter === void 0 ? void 0 : sorter.field) === obj.dataIndex) {
-        obj['sortOrder'] = sorter.order;
+      if (Array.isArray(sorter)) {
+        var checkSort = sorter.find(function (s) {
+          return s.field === obj.dataIndex;
+        });
+
+        if (checkSort) {
+          obj.sortOrder = checkSort.order;
+        }
+      } else if ((sorter === null || sorter === void 0 ? void 0 : sorter.field) === obj.dataIndex) {
+        obj.sortOrder = sorter.order;
       }
 
       return obj;
@@ -484,33 +491,53 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }, /*#__PURE__*/_react.default.createElement("th", restProps));
   };
 
+  var colDraggableContainer = (0, _react.useCallback)(function (_ref4) {
+    var props = (0, _extends2.default)({}, _ref4);
+    return /*#__PURE__*/_react.default.createElement("tr", null, _react.default.Children.map(props.children, function (child) {
+      var _child$props, _child$props$column;
+
+      if (child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : (_child$props$column = _child$props.column) === null || _child$props$column === void 0 ? void 0 : _child$props$column.fixed) {
+        return child;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_sortableItemCol.default, {
+        id: child.key
+      }, child);
+    }));
+  }, [columns]);
   var tableComponents = (0, _react.useMemo)(function () {
     var obj = {};
 
     if (sortOpen) {
-      obj['body'] = {
+      obj.body = {
         wrapper: DraggableContainer,
         row: DraggableBodyRow
       };
     }
 
     if (resizeable) {
-      obj['header'] = {
+      obj.header = {
         cell: ResizableTitle
       };
     }
 
+    if (colSortOpen) {
+      obj.header = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, obj.header), {}, {
+        row: colDraggableContainer
+      });
+    }
+
     if (components) {
       var _components$body = components.body,
           body = _components$body === void 0 ? {} : _components$body,
           _components$header = components.header,
           header = _components$header === void 0 ? {} : _components$header;
-      obj['body'] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, obj['body']), body);
-      obj['header'] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, obj['header']), header);
+      obj.body = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, obj.body), body);
+      obj.header = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, obj.header), header);
     }
 
     return obj;
-  }, [sortOpen, resizeable, components]);
+  }, [sortOpen, resizeable, components, colSortOpen]);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       height: '100%',
@@ -522,6 +549,12 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     } : emptyProps ? function () {
       return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Empty, emptyProps, (emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.footer) || null);
     } : customizeRenderEmpty
+  }, colSortOpen ? /*#__PURE__*/_react.default.createElement(_DndContainer.default, {
+    move: onColSortEnd
+  }, /*#__PURE__*/_react.default.createElement(_sortableBoxCol.default, {
+    items: columns.reduce(function (acc, item) {
+      return [].concat((0, _toConsumableArray2.default)(acc), [item.dataIndex]);
+    }, [])
   }, /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
     loading: loading,
     dataSource: dataSource,
@@ -531,6 +564,15 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     summary: function summary(pageData) {
       return _summary && _summary(pageData, resultColumns);
     }
+  })))) : /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
+    loading: loading,
+    dataSource: dataSource,
+    components: tableComponents,
+    onChange: onTableChange,
+    tableClassName: (0, _classnames.default)('lm_protable', resizeable && 'lm_resizeable'),
+    summary: function summary(pageData) {
+      return _summary && _summary(pageData, resultColumns);
+    }
   }))), !!customCheck && /*#__PURE__*/_react.default.createElement("div", {
     className: "lm_customCheck"
   }, customCheck));
@@ -606,11 +648,11 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     var value = props.summary ? 48 : 0;
 
-    var _ref4 = ((_tableWarpRef$current = tableWarpRef.current) === null || _tableWarpRef$current === void 0 ? void 0 : _tableWarpRef$current.getBoundingClientRect()) || {},
-        _ref4$width = _ref4.width,
-        width = _ref4$width === void 0 ? '100%' : _ref4$width,
-        _ref4$height = _ref4.height,
-        height = _ref4$height === void 0 ? '100%' : _ref4$height;
+    var _ref5 = ((_tableWarpRef$current = tableWarpRef.current) === null || _tableWarpRef$current === void 0 ? void 0 : _tableWarpRef$current.getBoundingClientRect()) || {},
+        _ref5$width = _ref5.width,
+        width = _ref5$width === void 0 ? '100%' : _ref5$width,
+        _ref5$height = _ref5.height,
+        height = _ref5$height === void 0 ? '100%' : _ref5$height;
 
     setTableSize({
       width: width,

package/lib/LmTable/autosize.js

@@ -48,7 +48,6 @@ var AutoSizer = /*#__PURE__*/function (_React$Component) {
     _this._detectElementResize = void 0;
 
     _this._onResize = function () {
-      console.log(11);
       var _this$props = _this.props,
           disableHeight = _this$props.disableHeight,
           disableWidth = _this$props.disableWidth,
@@ -109,8 +108,6 @@ var AutoSizer = /*#__PURE__*/function (_React$Component) {
 
         this._detectElementResize.addResizeListener(this._parentNode, this.handleResize);
 
-        console.log(3);
-
         this._onResize();
       }
     }

package/lib/LmTable/components/DndContainer.d.ts

@@ -0,0 +1,5 @@
+declare const DndContainer: ({ children, move }: {
+    children: any;
+    move: any;
+}) => JSX.Element;
+export default DndContainer;

package/lib/LmTable/components/DndContainer.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@dnd-kit/core");
+
+var _modifiers = require("@dnd-kit/modifiers");
+
+var _sortable = require("@dnd-kit/sortable");
+
+var _react = _interopRequireDefault(require("react"));
+
+// 可拖拽容器
+var DndContainer = function DndContainer(_ref) {
+  var children = _ref.children,
+      move = _ref.move;
+  var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
+    coordinateGetter: _sortable.sortableKeyboardCoordinates
+  })); // 拖拽结束
+
+  var handleDragEnd = function handleDragEnd(event) {
+    var active = event.active,
+        over = event.over; // 未移入时触发
+
+    if (!(over === null || over === void 0 ? void 0 : over.id)) {
+      return;
+    } // 移入时触发更新数据
+
+
+    if (active.id !== over.id) {
+      move(active.id, over.id);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    sensors: sensors,
+    collisionDetection: _core.closestCenter,
+    onDragEnd: handleDragEnd,
+    modifiers: [_modifiers.restrictToParentElement]
+  }, children);
+};
+
+var _default = DndContainer;
+exports.default = _default;

package/lib/LmTable/components/sortableBoxCol.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _sortable = require("@dnd-kit/sortable");
+
+var SortableBox = function SortableBox(_ref) {
+  var items = _ref.items,
+      children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
+    items: items,
+    strategy: _sortable.horizontalListSortingStrategy
+  }, children);
+};
+
+var _default = SortableBox;
+exports.default = _default;

package/lib/LmTable/components/sortableItemCol.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = SortableItem;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _sortable = require("@dnd-kit/sortable");
+
+var _utilities = require("@dnd-kit/utilities");
+
+var _excluded = ["children"];
+var Item = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({}, props, {
+    ref: ref
+  }), children);
+});
+
+function SortableItem(props) {
+  var _useSortable = (0, _sortable.useSortable)({
+    id: props.id
+  }),
+      attributes = _useSortable.attributes,
+      listeners = _useSortable.listeners,
+      setNodeRef = _useSortable.setNodeRef,
+      transform = _useSortable.transform,
+      transition = _useSortable.transition;
+
+  var style = {
+    position: 'relative',
+    transform: _utilities.CSS.Translate.toString(transform),
+    transition: transition,
+    padding: '8px',
+    touchAction: 'none',
+    height: '40px',
+    cursor: 'move'
+  };
+  return /*#__PURE__*/_react.default.createElement(Item, (0, _extends2.default)({
+    ref: setNodeRef,
+    style: style
+  }, attributes, listeners, props));
+}

package/lib/LmTable/style/index.css

@@ -81,6 +81,9 @@
 .ant-notification-notice .ant-notification-notice-description {
   font-size: 12px;
 }
+.ant-collapse {
+  font-size: 12px;
+}
 @font-face {
   font-family: 'iconfont';
   /* Project id 2966019 */
@@ -503,6 +506,9 @@ html {
 .card_cell_content:hover .card_cell_body .card_cell_checkbox {
   opacity: 1;
 }
+p {
+  margin-bottom: 0;
+}
 .z_container {
   position: relative;
   display: flex;

package/lib/LmUpload/LmUpload.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Pick<{
+    [x: string]: any;
+    ossConfig: any;
+}, string | number> & React.RefAttributes<unknown>>;
+export default _default;

package/lib/LmUpload/LmUpload.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _UploadRoot = _interopRequireDefault(require("./wrapper/UploadRoot"));
+
+var __rest = void 0 && (void 0).__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;
+};
+
+var LmUpload = function LmUpload(_a, ref) {
+  var _ossConfig = _a.ossConfig,
+      resetProps = __rest(_a, ["ossConfig"]);
+
+  var defaultRef = (0, _react.useRef)(null); // 仅在初始化触发一次
+
+  var initConfig = (0, _react.useMemo)(function () {
+    return {
+      // 文件配置单独存储
+      fileConfig: {
+        size: 10,
+        type: ['jpg', 'jpeg', 'png'],
+        maxCount: 99
+      },
+      // 初始化
+      components: {
+        itemRender: null,
+        wrapper: null // 结构定义
+        // 包装结构体: 上传, 列表
+        // wrapper: (upload, fileList) => (
+        //   <>
+        //     {upload}
+        //     {fileList}
+        //   </>
+        // ),
+
+      }
+    };
+  }, []);
+  var defaultProps = {
+    uid: 'uid',
+    fileList: [],
+    type: ['jpg', 'jpeg', 'png'],
+    accept: '',
+    fileSize: 10,
+    listType: 'card',
+    size: 100,
+    disabled: false,
+    maxCount: null,
+    children: null,
+    defaultFileList: [],
+    itemRender: null,
+    onRemove: function onRemove() {
+      return true;
+    },
+    enabledOss: false,
+    // oss配置
+    ossConfig: function ossConfig() {
+      return Object.assign({
+        dir: '/BizFile/4595/Supplier/',
+        region: 'oss-cn-hangzhou',
+        accessKeyId: '',
+        accessKeySecret: '',
+        stsToken: '',
+        bucket: 'linkmore-scm-test',
+        shortlink: 'https://linkmore-scm-test.oss-cn-hangzhou.aliyuncs.com'
+      }, typeof _ossConfig === 'function' ? _ossConfig() : _ossConfig);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_UploadRoot.default, Object.assign({
+    ref: ref || defaultRef
+  }, initConfig, defaultProps, resetProps));
+};
+
+var _default = /*#__PURE__*/(0, _react.forwardRef)(LmUpload);
+
+exports.default = _default;

package/lib/LmUpload/UploadList/ItemPicture.d.ts

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

package/lib/LmUpload/UploadList/ItemPicture.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _linkmoreDesign = require("linkmore-design");
+
+// 图片列表项
+var PictureItem = function PictureItem(_ref) {
+  var file = _ref.file,
+      instance = _ref.instance;
+  var remove = instance.remove;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "lm_upload_item lm_upload_item_picture"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "picture_left"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "lm_upload_item_thumb"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: file.url,
+    alt: ""
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "lm_upload_item_name"
+  }, file.fileName)), /*#__PURE__*/React.createElement("div", {
+    className: "picture_right lm_upload_item_action"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "action_delete",
+    onClick: function onClick() {
+      return remove(file);
+    }
+  }, /*#__PURE__*/React.createElement(_linkmoreDesign.IconFont, {
+    type: "lmweb-delete"
+  }))));
+};
+
+var _default = PictureItem;
+exports.default = _default;

package/lib/LmUpload/UploadList/ItemPictureCard.d.ts

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