linkmore-design 1.1.2 → 1.1.4

package/lib/LmTable/chartUtil.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getBarOption = getBarOption;
+exports.getLineOption = getLineOption;
+exports.getPieOption = getPieOption;
+
+function getBarOption(cols, source) {
+  var xAxis = [];
+  var series = [];
+  cols.forEach(function (col) {
+    var _xAxis;
+
+    var arr = source.map(function (item) {
+      return item[col.dataIndex];
+    }); // 第一个非number类型作为x轴
+
+    if (col.etype !== 'number' && !((_xAxis = xAxis) === null || _xAxis === void 0 ? void 0 : _xAxis.length)) {
+      xAxis = arr;
+      return;
+    }
+
+    if (col.xAxis) {
+      xAxis = arr;
+      return;
+    }
+
+    if (col.etype === 'number') {
+      series.push({
+        data: arr,
+        type: 'bar',
+        name: col.title,
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        label: {
+          show: false,
+          position: 'center'
+        }
+      });
+    }
+  });
+  var option = {
+    xAxis: {
+      type: 'category',
+      data: xAxis
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: series
+  };
+  return option;
+}
+
+function getLineOption(cols, source) {
+  var xAxis = [];
+  var series = [];
+  cols.forEach(function (col) {
+    var _xAxis2;
+
+    var arr = source.map(function (item) {
+      return item[col.dataIndex];
+    }); // 第一个非number类型作为x轴
+
+    if (col.etype !== 'number' && !((_xAxis2 = xAxis) === null || _xAxis2 === void 0 ? void 0 : _xAxis2.length)) {
+      xAxis = arr;
+      return;
+    }
+
+    if (col.xAxis) {
+      xAxis = arr;
+      return;
+    }
+
+    if (col.etype === 'number') {
+      series.push({
+        data: arr,
+        type: 'line',
+        name: col.title,
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        label: {
+          show: false,
+          position: 'center'
+        }
+      });
+    }
+  });
+  var option = {
+    xAxis: {
+      type: 'category',
+      data: xAxis
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: series
+  };
+  return option;
+}
+
+function getPieOption(cols, source) {
+  var data = source.map(function (item) {
+    var temp = {};
+    cols.forEach(function (col) {
+      if (col.etype === 'number') {
+        temp.value = item[col.dataIndex];
+      } else {
+        temp.name = item[col.dataIndex];
+      }
+    });
+    return temp;
+  });
+  var option = {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      orient: 'vertical',
+      left: 'left'
+    },
+    series: [{
+      name: '饼图',
+      type: 'pie',
+      radius: '50%',
+      data: data,
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
+    }]
+  };
+  return option;
+}
+
+var _default = {
+  getBarOption: getBarOption
+};
+exports.default = _default;

package/lib/LmTable/components/customRenderEmpty.js

@@ -9,7 +9,14 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _ConfigProvider = _interopRequireDefault(require("../../ConfigProvider"));
+
+var ConfigContext = _ConfigProvider.default.ConfigContext;
+
 var CustomizeRenderEmpty = function CustomizeRenderEmpty() {
+  var _React$useContext = _react.default.useContext(ConfigContext),
+      locale = _React$useContext.locale;
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "lm_table_empty"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -18,7 +25,7 @@ var CustomizeRenderEmpty = function CustomizeRenderEmpty() {
       width: '130px',
       height: '80px'
     }
-  }), /*#__PURE__*/_react.default.createElement("span", null, "\u6682\u65E0\u6570\u636E"));
+  }), /*#__PURE__*/_react.default.createElement("span", null, (locale === null || locale === void 0 ? void 0 : locale.locale) === 'zh-cn' ? '暂无数据' : 'no Data'));
 };
 
 var _default = CustomizeRenderEmpty;

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

@@ -2,7 +2,7 @@ import type { ILMModalProps } from 'linkmore-design';
 import type { TableColumnProps } from 'antd';
 interface IProps extends ILMModalProps {
     data?: Record<string, unknown>[];
-    type: 'line' | 'pie' | 'column' | null;
+    type: 'line' | 'pie' | 'bar' | null;
     columns?: (TableColumnProps<any> & {
         etype: string;
     })[];

package/lib/LmTable/components/tableChartsModal.js

@@ -2,25 +2,53 @@
 
 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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _lodash = require("lodash");
-
 var _linkmoreDesign = require("linkmore-design");
 
-var _plots = require("@ant-design/plots");
+var echarts = _interopRequireWildcard(require("echarts/core"));
+
+var _charts = require("echarts/charts");
+
+var _components = require("echarts/components");
+
+var _features = require("echarts/features");
+
+var _renderers = require("echarts/renderers");
 
+var _chartUtil = require("../chartUtil");
+
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+// 引入柱状图图表，图表后缀都为 Chart
+// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+// 标签自动布局，全局过渡动画等特性
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+// 注册必须的组件
+echarts.use([_components.TitleComponent, _components.TooltipComponent, _components.GridComponent, _components.DatasetComponent, _components.TransformComponent, _charts.BarChart, _charts.LineChart, _charts.PieChart, _features.LabelLayout, _features.UniversalTransition, _renderers.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 = (0, _react.useRef)(null);
+  var chart;
   var type = props.type,
       onCancel = props.onCancel,
       data = props.data,
@@ -29,128 +57,48 @@ var TableChartsModal = function TableChartsModal(props) {
       rowKey = props.rowKey,
       deepDataSource = props.deepDataSource;
   console.log(data, columns, '---props---', rowKey);
-  var keyByCol = (0, _react.useMemo)(function () {
-    return (0, _lodash.keyBy)(columns, 'dataIndex');
-  }, [columns]);
   var resultData = (0, _react.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);
-
-      if (index >= minJ && index <= maxJ) {
-        return true;
-      }
-
-      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;
-      }
-
-      return false;
-    }).map(function (item) {
-      return (0, _lodash.pick)(item, [].concat((0, _toConsumableArray2.default)(rCol), [rowKey]));
-    });
-    return {
-      rDataSource: rDataSource,
-      rCol: rCol
-    };
-  }, [data, columns, selectInfo]);
-  var getTypeCol = (0, _react.useMemo)(function () {
-    return columns.filter(function (item) {
-      return item.etype === 'number';
-    }).map(function (item) {
-      return item.dataIndex;
-    });
-  }, [columns]);
-  var Field = (0, _react.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 = (0, _react.useMemo)(function () {
+    var cols = getSelectRange(columns, start.j, end.j);
+    var source = getSelectRange(deepDataSource || data, start.i, end.i);
+    var option;
+
+    if (type === 'bar') {
+      option = (0, _chartUtil.getBarOption)(cols, source);
+    }
+
+    if (type === 'line') {
+      option = (0, _chartUtil.getLineOption)(cols, source);
+    }
+
     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 = (0, _chartUtil.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]);
+  (0, _react.useEffect)(function () {
+    chart = echarts.init(chartRef.current);
+    chart.setOption(resultData.option);
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Modal, {
     visible: !!type,
     title: "\u667A\u80FD\u62A5\u8868",
     onOk: onCancel,
     onCancel: onCancel
-  }, type === 'column' && /*#__PURE__*/_react.default.createElement(_plots.Column, Object.assign({}, config)), type === 'line' && /*#__PURE__*/_react.default.createElement(_plots.Line, Object.assign({}, config)), type === 'pie' && /*#__PURE__*/_react.default.createElement(_plots.Pie, Object.assign({}, config)));
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'xiaoming',
+    ref: chartRef,
+    style: {
+      width: 500,
+      height: 400
+    }
+  }));
 };
 
 var _default = TableChartsModal;

package/lib/LmUpload/LmUpload.js

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

package/lib/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/lib/LmUpload/components/Crop.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _linkmoreDesign = require("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.default.createElement(_linkmoreDesign.CropImg, Object.assign({}, config));
+};
+
+var _default = /*#__PURE__*/_react.default.memo(Crop);
+
+exports.default = _default;

package/lib/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/lib/LmUpload/fns/index.js

@@ -58,6 +58,7 @@ var useCoreOptions = function useCoreOptions(_ref) {
       type = props.type,
       fileSize = props.fileSize,
       enabledOss = props.enabledOss,
+      enableCrop = props.enableCrop,
       ossConfig = props.ossConfig; // 获取当前的文件列表
 
   var getFileList = (0, _react.useCallback)(function () {
@@ -239,7 +240,74 @@ var useCoreOptions = function useCoreOptions(_ref) {
       value: getFileList(),
       onChange: uploadSuccess
     });
-  }, [props.fileUpload, getFileList, uploadSuccess]); // 上传前的检测
+  }, [props.fileUpload, getFileList, uploadSuccess]); // 上传文件
+
+  var uploadFile = (0, _react.useCallback)(function (file) {
+    enabledOss && uploadOss(file);
+    customUpload(file);
+  }, [enabledOss, uploadOss, customUpload]); // 检测完成 file
+
+  var checkOver = (0, _react.useCallback)(function (file) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+      var res, newFile;
+      return (0, _regeneratorRuntime2.default)().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 = (0, _react.useCallback)(function (e) {
     var files = e.target.files; // 循环文件检查是否存在不符合要求的文件
@@ -254,29 +322,36 @@ var useCoreOptions = function useCoreOptions(_ref) {
 
       if (item.size / 1024 / 1024 > fileSize) {
         return _linkmoreDesign.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 = (0, _react.useCallback)(function (file) {
-    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3() {
       var _a, _b, res, fileList;
 
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+      return (0, _regeneratorRuntime2.default)().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) {
@@ -294,10 +369,10 @@ var useCoreOptions = function useCoreOptions(_ref) {
 
             case 4:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2);
+      }, _callee3);
     }));
   }, [props.onRemove, getFileList, onChange, dispatch, uid]); // 点击文件链接或预览图标时的回调
 
@@ -316,6 +391,7 @@ var useCoreOptions = function useCoreOptions(_ref) {
     getIsMaxCount: getIsMaxCount,
     getFileFields: getFileFields,
     beforeUpload: beforeUpload,
+    checkOver: checkOver,
     getUploadStatus: getUploadStatus,
     remove: remove,
     preview: preview,
@@ -325,8 +401,8 @@ var useCoreOptions = function useCoreOptions(_ref) {
     getState: function getState() {
       return state;
     },
-    getFileList: getFileList // 获取文件列表
-
+    getFileList: getFileList,
+    uploadFile: uploadFile
   };
   return {
     CoreMethods: CoreMethods,

package/lib/LmUpload/wrapper/UploadWrapper.js

@@ -13,6 +13,8 @@ var _UploadContainer = _interopRequireDefault(require("./UploadContainer"));
 
 var _view = _interopRequireDefault(require("../view"));
 
+var _Crop = _interopRequireDefault(require("../components/Crop"));
+
 // 包裹上传组件区域： 拓展其他结构
 var LmUploadWrapper = function LmUploadWrapper(_ref) {
   var instance = _ref.instance;
@@ -22,6 +24,8 @@ var LmUploadWrapper = function LmUploadWrapper(_ref) {
     instance: instance
   }), /*#__PURE__*/_react.default.createElement(_view.default, {
     instance: instance
+  }), /*#__PURE__*/_react.default.createElement(_Crop.default, {
+    instance: instance
   }));
 };
 

package/lib/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;