linkmore-design 1.1.2 → 1.1.4

package/es/LmTable/components/tableChartsModal.js

@@ -1,11 +1,39 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import React, { useMemo } from 'react';
-import { pick, keyBy } from 'lodash';
-import { Modal } from 'linkmore-design';
-import { Column, Line, Pie } from '@ant-design/plots';
+import React, { useMemo, useRef, useEffect } from 'react';
+import { Modal } from 'linkmore-design'; // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+
+import * as echarts from 'echarts/core'; // 引入柱状图图表，图表后缀都为 Chart
+
+import { BarChart, LineChart, PieChart } from 'echarts/charts'; // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+
+import { TitleComponent, TooltipComponent, GridComponent, // 数据集组件
+DatasetComponent, // 内置数据转换器组件 (filter, sort)
+TransformComponent } from 'echarts/components'; // 标签自动布局，全局过渡动画等特性
+
+import { LabelLayout, UniversalTransition } from 'echarts/features'; // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+
+import { CanvasRenderer } from 'echarts/renderers';
+import { getBarOption, getLineOption, getPieOption } from '../chartUtil'; // 注册必须的组件
+
+echarts.use([TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, BarChart, LineChart, PieChart, LabelLayout, UniversalTransition, CanvasRenderer]);
+
+function getSelectRange(data, start, end) {
+  var max = Math.max(start, end);
+  var min = Math.min(start, end);
+  var result = data === null || data === void 0 ? void 0 : data.filter(function (item, index) {
+    if (index >= min && index <= max) {
+      return true;
+    }
+
+    return false;
+  });
+  return result;
+}
 /** i 是行  j 是列 */
 
+
 var TableChartsModal = function TableChartsModal(props) {
+  var chartRef = useRef(null);
+  var chart;
   var type = props.type,
       onCancel = props.onCancel,
       data = props.data,
@@ -14,128 +42,48 @@ var TableChartsModal = function TableChartsModal(props) {
       rowKey = props.rowKey,
       deepDataSource = props.deepDataSource;
   console.log(data, columns, '---props---', rowKey);
-  var keyByCol = useMemo(function () {
-    return keyBy(columns, 'dataIndex');
-  }, [columns]);
   var resultData = useMemo(function () {
-    var _a;
-
     var start = selectInfo.start,
         end = selectInfo.end;
-    var rCol = columns === null || columns === void 0 ? void 0 : columns.filter(function (item, index) {
-      var maxJ = Math.max(start.j, end.j);
-      var minJ = Math.min(start.j, end.j);
+    var cols = getSelectRange(columns, start.j, end.j);
+    var source = getSelectRange(deepDataSource || data, start.i, end.i);
+    var option;
 
-      if (index >= minJ && index <= maxJ) {
-        return true;
-      }
+    if (type === 'bar') {
+      option = getBarOption(cols, source);
+    }
 
-      return false;
-    }).map(function (item) {
-      return item.dataIndex;
-    });
-    var maxi = Math.max(start.i, end.i);
-    var mini = Math.min(start.i, end.i);
-    var rDataSource = (_a = deepDataSource || data) === null || _a === void 0 ? void 0 : _a.filter(function (item, index) {
-      if (index >= mini && index <= maxi) {
-        return true;
-      }
+    if (type === 'line') {
+      option = getLineOption(cols, source);
+    }
 
-      return false;
-    }).map(function (item) {
-      return pick(item, [].concat(_toConsumableArray(rCol), [rowKey]));
-    });
-    return {
-      rDataSource: rDataSource,
-      rCol: rCol
-    };
-  }, [data, columns, selectInfo]);
-  var getTypeCol = useMemo(function () {
-    return columns.filter(function (item) {
-      return item.etype === 'number';
-    }).map(function (item) {
-      return item.dataIndex;
-    });
-  }, [columns]);
-  var Field = useMemo(function () {
-    var rCol = resultData.rCol;
-    var xField = rCol.find(function (item) {
-      return !getTypeCol.includes(item);
-    });
-    var yField = getTypeCol === null || getTypeCol === void 0 ? void 0 : getTypeCol[0];
-    return {
-      xField: xField,
-      yField: yField
-    };
-  }, [resultData, getTypeCol]);
-  console.log(Field, '--Field--', resultData);
-  var config = useMemo(function () {
     if (type === 'pie') {
-      return {
-        appendPadding: 10,
-        data: resultData.rDataSource,
-        angleField: Field.yField,
-        colorField: Field.xField,
-        radius: 0.9,
-        label: {
-          type: 'inner',
-          offset: '-30%',
-          content: function content(_ref) {
-            var percent = _ref.percent;
-            return "".concat((percent * 100).toFixed(0), "%");
-          },
-          style: {
-            fontSize: 14,
-            textAlign: 'center'
-          }
-        },
-        interactions: [{
-          type: 'element-active'
-        }]
-      };
+      option = getPieOption(cols, source);
     }
 
     return {
-      data: resultData.rDataSource,
-      xField: rowKey,
-      yField: Field.yField,
-      label: {
-        position: 'middle',
-        style: {
-          fill: '#FFFFFF',
-          opacity: 0.6
-        }
-      },
-      tooltip: {
-        title: Field.xField,
-        formatter: function formatter(datum) {
-          var _a, _b;
-
-          return {
-            name: ((_a = keyByCol[Field.yField]) === null || _a === void 0 ? void 0 : _a.title) || ((_b = keyByCol[Field.yField]) === null || _b === void 0 ? void 0 : _b.dataIndex),
-            value: datum === null || datum === void 0 ? void 0 : datum[Field.yField]
-          };
-        }
-      },
-      xAxis: {
-        label: {
-          formatter: function formatter(text, item, index) {
-            var _a, _b;
-
-            return ((_b = (_a = resultData.rDataSource) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b[Field.xField]) || text;
-          },
-          autoHide: true,
-          autoRotate: false
-        }
-      }
+      source: source,
+      cols: cols,
+      option: option
     };
-  }, [Field, resultData, type]);
+  }, [data, columns, selectInfo]);
+  useEffect(function () {
+    chart = echarts.init(chartRef.current);
+    chart.setOption(resultData.option);
+  }, []);
   return /*#__PURE__*/React.createElement(Modal, {
     visible: !!type,
     title: "\u667A\u80FD\u62A5\u8868",
     onOk: onCancel,
     onCancel: onCancel
-  }, type === 'column' && /*#__PURE__*/React.createElement(Column, Object.assign({}, config)), type === 'line' && /*#__PURE__*/React.createElement(Line, Object.assign({}, config)), type === 'pie' && /*#__PURE__*/React.createElement(Pie, Object.assign({}, config)));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'xiaoming',
+    ref: chartRef,
+    style: {
+      width: 500,
+      height: 400
+    }
+  }));
 };
 
 export default TableChartsModal;

package/es/LmUpload/LmUpload.js

@@ -85,6 +85,7 @@ var LmUpload = function LmUpload(_a, ref) {
     maxCount: null,
     children: null,
     itemRender: null,
+    enabledCrop: false,
     enabledOss: false,
     // oss配置
     ossConfig: function ossConfig() {

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

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<({ instance }: {
+    instance: any;
+}) => JSX.Element>;
+export default _default;

package/es/LmUpload/components/Crop.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { CropImg } from 'linkmore-design';
+
+var Crop = function Crop(_ref) {
+  var instance = _ref.instance;
+  var enableCrop = instance.enableCrop,
+      state = instance.state,
+      cropConfig = instance.cropConfig,
+      checkOver = instance.checkOver;
+  if (!enableCrop) return null;
+  var config = Object.assign(Object.assign({}, cropConfig), {
+    file: state.cropFile,
+    onClose: function onClose(blob, oldFile) {
+      var newFile = new File([blob], oldFile.name, {
+        type: oldFile.type
+      });
+      checkOver(newFile);
+    }
+  });
+  return /*#__PURE__*/React.createElement(CropImg, Object.assign({}, config));
+};
+
+export default /*#__PURE__*/React.memo(Crop);

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

@@ -7,6 +7,7 @@ declare const useCoreOptions: ({ state, dispatch, props }: {
         getIsMaxCount: () => boolean;
         getFileFields: (fileParams: any) => {};
         beforeUpload: (e: any) => false | import("../../message").MessageType;
+        checkOver: (file: any) => Promise<void>;
         getUploadStatus: () => {
             uploading: boolean;
         };
@@ -17,6 +18,7 @@ declare const useCoreOptions: ({ state, dispatch, props }: {
     RefMethods: {
         getState: () => any;
         getFileList: () => any;
+        uploadFile: (file: any) => void;
     };
 };
 export default useCoreOptions;

package/es/LmUpload/fns/index.js

@@ -47,6 +47,7 @@ var useCoreOptions = function useCoreOptions(_ref) {
       type = props.type,
       fileSize = props.fileSize,
       enabledOss = props.enabledOss,
+      enableCrop = props.enableCrop,
       ossConfig = props.ossConfig; // 获取当前的文件列表
 
   var getFileList = useCallback(function () {
@@ -228,7 +229,74 @@ var useCoreOptions = function useCoreOptions(_ref) {
       value: getFileList(),
       onChange: uploadSuccess
     });
-  }, [props.fileUpload, getFileList, uploadSuccess]); // 上传前的检测
+  }, [props.fileUpload, getFileList, uploadSuccess]); // 上传文件
+
+  var uploadFile = useCallback(function (file) {
+    enabledOss && uploadOss(file);
+    customUpload(file);
+  }, [enabledOss, uploadOss, customUpload]); // 检测完成 file
+
+  var checkOver = useCallback(function (file) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var res, newFile;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (props === null || props === void 0 ? void 0 : props.beforeUpload) {
+                _context2.next = 3;
+                break;
+              }
+
+              uploadFile(file);
+              return _context2.abrupt("return");
+
+            case 3:
+              res = props.beforeUpload(file, getFileList()); // Promise
+
+              if (!(res === null || res === void 0 ? void 0 : res.then)) {
+                _context2.next = 16;
+                break;
+              }
+
+              _context2.prev = 5;
+              _context2.next = 8;
+              return res;
+
+            case 8:
+              newFile = _context2.sent;
+              uploadFile(newFile);
+              _context2.next = 15;
+              break;
+
+            case 12:
+              _context2.prev = 12;
+              _context2.t0 = _context2["catch"](5);
+              console.log('上传失败!');
+
+            case 15:
+              return _context2.abrupt("return");
+
+            case 16:
+              if (res) {
+                _context2.next = 18;
+                break;
+              }
+
+              return _context2.abrupt("return");
+
+            case 18:
+              // () => true
+              uploadFile(file);
+
+            case 19:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[5, 12]]);
+    }));
+  }, [props.beforeUpload, getFileList, uploadFile]); // 上传前的检测
 
   var beforeUpload = useCallback(function (e) {
     var files = e.target.files; // 循环文件检查是否存在不符合要求的文件
@@ -243,29 +311,36 @@ var useCoreOptions = function useCoreOptions(_ref) {
 
       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);
-      }
+      } // 可剪裁时单独处理文件
 
-      enabledOss && uploadOss(item); // 单个文件上传
 
-      customUpload(item);
+      if (enableCrop) {
+        dispatch({
+          type: 'changeCropFile',
+          cropFile: item
+        });
+      } else {
+        // 单个文件上传
+        checkOver(item);
+      }
     }
 
     return false;
-  }, [type, fileSize, uploadOss, customUpload]); // 删除事件
+  }, [type, fileSize, enableCrop, checkOver]); // 删除事件
 
   var remove = useCallback(function (file) {
-    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
       var _a, _b, res, fileList;
 
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
-              _context2.next = 2;
+              _context3.next = 2;
               return (_a = props.onRemove) === null || _a === void 0 ? void 0 : _a.call(props, file);
 
             case 2:
-              res = _context2.sent;
+              res = _context3.sent;
 
               if (res) {
                 fileList = (_b = getFileList()) === null || _b === void 0 ? void 0 : _b.filter(function (v) {
@@ -283,10 +358,10 @@ var useCoreOptions = function useCoreOptions(_ref) {
 
             case 4:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2);
+      }, _callee3);
     }));
   }, [props.onRemove, getFileList, onChange, dispatch, uid]); // 点击文件链接或预览图标时的回调
 
@@ -305,6 +380,7 @@ var useCoreOptions = function useCoreOptions(_ref) {
     getIsMaxCount: getIsMaxCount,
     getFileFields: getFileFields,
     beforeUpload: beforeUpload,
+    checkOver: checkOver,
     getUploadStatus: getUploadStatus,
     remove: remove,
     preview: preview,
@@ -314,8 +390,8 @@ var useCoreOptions = function useCoreOptions(_ref) {
     getState: function getState() {
       return state;
     },
-    getFileList: getFileList // 获取文件列表
-
+    getFileList: getFileList,
+    uploadFile: uploadFile
   };
   return {
     CoreMethods: CoreMethods,

package/es/LmUpload/wrapper/UploadWrapper.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import LmUploadContainer from './UploadContainer';
 import LmUploadView from '../view';
+import Crop from '../components/Crop';
 
 var LmUploadWrapper = function LmUploadWrapper(_ref) {
   var instance = _ref.instance;
@@ -11,6 +12,8 @@ var LmUploadWrapper = function LmUploadWrapper(_ref) {
     instance: instance
   }), /*#__PURE__*/React.createElement(LmUploadView, {
     instance: instance
+  }), /*#__PURE__*/React.createElement(Crop, {
+    instance: instance
   }));
 };
 

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

@@ -4,5 +4,6 @@ export declare const initialState: (props: any) => {
     process: number;
     status: string;
     fileList: any;
+    cropFile: any;
 };
 export default reducer;

package/es/LmUpload/wrapper/reducer.js

@@ -1,7 +1,8 @@
 // 状态管理操作
 export var reducer = function reducer(state, action) {
   var fileList = action.fileList,
-      percent = action.percent;
+      percent = action.percent,
+      cropFile = action.cropFile;
 
   switch (action.type) {
     case 'changeFileList':
@@ -14,6 +15,11 @@ export var reducer = function reducer(state, action) {
         percent: percent
       });
 
+    case 'changeCropFile':
+      return Object.assign(Object.assign({}, state), {
+        cropFile: cropFile
+      });
+
     default:
       throw new Error();
   }
@@ -26,7 +32,8 @@ export var initialState = function initialState(props) {
     upload: upload,
     process: 0,
     status: 'done',
-    fileList: defaultFileList // 用于非受控模式时的数据收集
+    fileList: defaultFileList,
+    cropFile: null // 需要裁剪的图片
 
   };
 };

package/es/Popover/index.d.ts

@@ -7,5 +7,5 @@ export interface PopoverProps extends AbstractTooltipProps {
     /** @private Used For Popconfirm. Safe to remove. */
     _overlay?: React.ReactNode;
 }
-declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<unknown>>;
+declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, keyof PopoverProps> & React.RefAttributes<unknown>>;
 export default Popover;

package/es/QuickMenu/style/index.css

@@ -521,10 +521,12 @@ p {
   width: 0;
   transition: all 0.1s;
   opacity: 0;
+  display: none;
 }
 .lm_quick_menu .lm_menu_list.show {
   opacity: 1;
   width: inherit;
+  display: block;
 }
 .lm_quick_menu .lm_menu_list::before {
   position: absolute;

package/es/QuickMenu/style/variables.css

@@ -10,10 +10,12 @@
   width: 0;
   transition: all 0.1s;
   opacity: 0;
+  display: none;
 }
 .lm_quick_menu .lm_menu_list.show {
   opacity: 1;
   width: inherit;
+  display: block;
 }
 .lm_quick_menu .lm_menu_list::before {
   position: absolute;

package/es/Tooltip/index.d.ts

@@ -40,5 +40,5 @@ export interface TooltipPropsWithTitle extends AbstractTooltipProps {
     overlay?: React.ReactNode | RenderFunction;
 }
 export declare type TooltipProps = TooltipPropsWithTitle | TooltipPropsWithOverlay;
-declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<unknown>>;
+declare const Tooltip: React.ForwardRefExoticComponent<(Pick<TooltipPropsWithOverlay, keyof TooltipPropsWithOverlay> | Pick<TooltipPropsWithTitle, keyof TooltipPropsWithTitle>) & React.RefAttributes<unknown>>;
 export default Tooltip;

package/es/Tree/utils/dropIndicator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const offset = 4;
 export default function dropIndicatorRender(props: {
     dropPosition: -1 | 0 | 1;

package/es/index.d.ts

@@ -120,3 +120,6 @@ export type { DescriptionsProps } from './Descriptions';
 export { default as FullScreen } from './FullScreen';
 export type { IFullScreenProps } from './FullScreen';
 export * from './LmImgList';
+export { default as LmImgList } from './LmImgList';
+export { default as CropImg } from './CropImg';
+export type { CropImgProps } from './CropImg';

package/es/index.js

@@ -79,4 +79,6 @@ export { default as Divider } from './Divider';
 export { default as Skeleton } from './Skeleton';
 export { default as Descriptions } from './Descriptions';
 export { default as FullScreen } from './FullScreen';
-export * from './LmImgList';
+export * from './LmImgList';
+export { default as LmImgList } from './LmImgList';
+export { default as CropImg } from './CropImg';

package/es/locale-provider/index.d.ts

@@ -54,8 +54,8 @@ export default class LocaleProvider extends React.Component<LocaleProviderProps,
     componentDidMount(): void;
     componentDidUpdate(prevProps: LocaleProviderProps): void;
     componentWillUnmount(): void;
-    getMemoizedContextValue: import("memoize-one").MemoizedFn<(localeValue: Locale) => Locale & {
+    getMemoizedContextValue: (localeValue: Locale) => Locale & {
         exist?: boolean;
-    }>;
+    };
     render(): JSX.Element;
 }