@ztocwst/rc-pro-materials 0.1.25 → 0.1.27

package/es/components/z-templates-data-common/components/dim-target/index.js

@@ -0,0 +1,430 @@
+import _Checkbox from "antd/es/checkbox";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["checked"],
+  _excluded2 = ["checked"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import React, { useState, useEffect, useImperativeHandle, useContext } from 'react';
+import { ProButton, RcConfigContext } from '@ztocwst/rc-pro';
+import { getMaxWidth, saveDimTarget } from "../../data-common.helper";
+import useUpdateEffect from "./useUpdateEffect";
+import "./index.less";
+var DimsDefault = {
+  all: false,
+  indeterminate: false,
+  dimension: [],
+  dimensionSource: []
+};
+var TargetsDefault = {
+  all: false,
+  indeterminate: false,
+  index: [],
+  indexSource: []
+};
+var DimTarget = function DimTarget(_ref) {
+  var value = _ref.value,
+    dataSetName = _ref.dataSetName,
+    remember = _ref.remember,
+    buttons = _ref.buttons,
+    dimTargetRef = _ref.dimTargetRef,
+    onChange = _ref.onChange;
+  var rcProContext = useContext(RcConfigContext);
+  /** 维度 状态 */
+  var _useState = useState(_extends({}, DimsDefault, value === null || value === void 0 ? void 0 : value.dims)),
+    dims = _useState[0],
+    setDims = _useState[1];
+  /** 指标 状态 */
+  var _useState2 = useState(_extends({}, TargetsDefault, value === null || value === void 0 ? void 0 : value.targets)),
+    targets = _useState2[0],
+    setTargets = _useState2[1];
+  /** 维度、指标宽度 */
+  var _useState3 = useState(),
+    dimTargetWidth = _useState3[0],
+    setDimTargetWidth = _useState3[1];
+  /** 记住勾选 状态 */
+  var _useState4 = useState(value === null || value === void 0 ? void 0 : value.rememberCheck),
+    rememberCheck = _useState4[0],
+    setRememberCheck = _useState4[1];
+  var initial = function initial() {
+    var _value$dims, _value$targets;
+    var dimensionSource = (value === null || value === void 0 ? void 0 : (_value$dims = value.dims) === null || _value$dims === void 0 ? void 0 : _value$dims.dimensionSource) || [];
+    var indexSource = (value === null || value === void 0 ? void 0 : (_value$targets = value.targets) === null || _value$targets === void 0 ? void 0 : _value$targets.indexSource) || [];
+    var dimensionIndex = [];
+    for (var _iterator = _createForOfIteratorHelperLoose(dimensionSource), _step; !(_step = _iterator()).done;) {
+      var item = _step.value;
+      dimensionIndex.push(item.description);
+    }
+    for (var _iterator2 = _createForOfIteratorHelperLoose(indexSource), _step2; !(_step2 = _iterator2()).done;) {
+      var _item = _step2.value;
+      dimensionIndex.push(_item.name);
+    }
+    setDimTargetWidth(getMaxWidth(dimensionIndex));
+    setDims(_extends({}, DimsDefault, value === null || value === void 0 ? void 0 : value.dims));
+    setTargets(_extends({}, TargetsDefault, value === null || value === void 0 ? void 0 : value.targets));
+    setRememberCheck(value === null || value === void 0 ? void 0 : value.rememberCheck);
+  };
+  var getDimTargetValues = function getDimTargetValues() {
+    return {
+      dimension: dims.dimension,
+      dimensionSource: dims.dimensionSource,
+      index: targets.index,
+      indexSource: targets.indexSource
+    };
+  };
+
+  /** 向外暴露属性方法 */
+  useImperativeHandle(dimTargetRef, function () {
+    return {
+      getDimTargetValues: getDimTargetValues
+    };
+  });
+  useEffect(function () {
+    if (value) {
+      initial();
+    }
+  }, [value]);
+
+  /** 维度全选事件 */
+  var dimAllChange = function dimAllChange(event) {
+    var _event$target;
+    var all = event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.checked;
+    var dimension = all ? dims.dimensionSource.map(function (item) {
+      return item.alias || item.description;
+    }) : [];
+    setDims(_extends({}, dims, {
+      all: all,
+      indeterminate: false,
+      dimension: dimension
+    }));
+    var option = getDimTargetValues();
+    onChange === null || onChange === void 0 ? void 0 : onChange(_extends({}, option, {
+      dimension: dimension
+    }));
+  };
+
+  /** 对比数据源顺序排序 维度 */
+  var getDimSourceSort = function getDimSourceSort(dimensionCheck) {
+    var dimension = [];
+    for (var _iterator3 = _createForOfIteratorHelperLoose(dims === null || dims === void 0 ? void 0 : dims.dimensionSource), _step3; !(_step3 = _iterator3()).done;) {
+      var cur = _step3.value;
+      var description = cur.alias || cur.description;
+      if (dimensionCheck.includes(description)) {
+        dimension.push(description);
+      }
+    }
+    return dimension;
+  };
+
+  /** 对比数据源顺序排序 指标 */
+  var getIndexSourceSort = function getIndexSourceSort(indexCheck) {
+    var index = [];
+    for (var _iterator4 = _createForOfIteratorHelperLoose(targets === null || targets === void 0 ? void 0 : targets.indexSource), _step4; !(_step4 = _iterator4()).done;) {
+      var cur = _step4.value;
+      var name = cur.alias || cur.name;
+      if (indexCheck.includes(name)) {
+        index.push(name);
+      }
+    }
+    return index;
+  };
+
+  /** 维度事件 */
+  var dimCheckboxChange = function dimCheckboxChange(event) {
+    var _dims$dimensionSource, _find$dependencies;
+    var _event$target2 = event === null || event === void 0 ? void 0 : event.target,
+      checked = _event$target2.checked,
+      values = _objectWithoutPropertiesLoose(_event$target2, _excluded);
+    /** 当前项处理 */
+    var dimensionCheck = [].concat(dims.dimension);
+    var idx = dimensionCheck.indexOf(values.value);
+    if (checked && idx === -1) {
+      dimensionCheck.push(values.value);
+    }
+    if (!checked && idx > -1) {
+      dimensionCheck.splice(idx, 1);
+    }
+
+    /** 当前项关联关系处理 */
+    var find = dims === null || dims === void 0 ? void 0 : (_dims$dimensionSource = dims.dimensionSource) === null || _dims$dimensionSource === void 0 ? void 0 : _dims$dimensionSource.find(function (cur) {
+      return cur.alias === values.value || cur.description === values.value;
+    });
+    /** 处理关联的维度 */
+    if (find !== null && find !== void 0 && (_find$dependencies = find.dependencies) !== null && _find$dependencies !== void 0 && _find$dependencies.length) {
+      for (var _iterator5 = _createForOfIteratorHelperLoose(dims === null || dims === void 0 ? void 0 : dims.dimensionSource), _step5; !(_step5 = _iterator5()).done;) {
+        var _find$dependencies2;
+        var cur = _step5.value;
+        if (find !== null && find !== void 0 && (_find$dependencies2 = find.dependencies) !== null && _find$dependencies2 !== void 0 && _find$dependencies2.includes(cur.name)) {
+          var description = cur.alias || cur.description;
+          var idn = dimensionCheck.indexOf(description);
+          if (checked && idn === -1) {
+            dimensionCheck.push(description);
+          }
+          if (!checked && idn > -1) {
+            dimensionCheck.splice(idn, 1);
+          }
+        }
+      }
+    }
+    /** 处理关联的指标 */
+    // if (find?.name) {
+    //   const indexCheck = [];
+    //   for (const cur of targets.indexSource) {
+    //     if (cur?.dependencies?.includes(find.name)) {
+    //       indexCheck.push(cur.alias || cur.name);
+    //     }
+    //   }
+    //   if (indexCheck.length) {
+    //     const indexCache = [...targets.index];
+    //     for (const name of indexCheck) {
+    //       const id = indexCache.indexOf(name);
+    //       if (checked && id === -1) {
+    //         indexCache.push(name);
+    //       }
+    //       if (!checked && id > -1) {
+    //         indexCache.splice(id, 1);
+    //       }
+    //     }
+    //     const index = getIndexSourceSort(indexCache);
+    //     setTargets({
+    //       ...targets,
+    //       all: index.length === targets.indexSource.length,
+    //       indeterminate: !!index.length && index.length < targets.indexSource.length,
+    //       index,
+    //     });
+    //   }
+    // }
+
+    /** 收集的选中项，对比数据源顺序排序 */
+    var dimension = getDimSourceSort(dimensionCheck);
+    setDims(_extends({}, dims, {
+      all: dimension.length === dims.dimensionSource.length,
+      indeterminate: !!dimension.length && dimension.length < dims.dimensionSource.length,
+      dimension: dimension
+    }));
+    var option = getDimTargetValues();
+    onChange === null || onChange === void 0 ? void 0 : onChange(_extends({}, option, {
+      dimension: dimension
+    }));
+  };
+
+  /** 指标全选事件 */
+  var targetAllChange = function targetAllChange(event) {
+    var _event$target3;
+    var all = event === null || event === void 0 ? void 0 : (_event$target3 = event.target) === null || _event$target3 === void 0 ? void 0 : _event$target3.checked;
+    var index = all ? targets.indexSource.map(function (item) {
+      return item.alias || item.name;
+    }) : [];
+    setTargets(_extends({}, targets, {
+      all: all,
+      indeterminate: false,
+      index: index
+    }));
+    var option = getDimTargetValues();
+    onChange === null || onChange === void 0 ? void 0 : onChange(_extends({}, option, {
+      index: index
+    }));
+  };
+
+  /** 指标事件 */
+  var targetCheckboxChange = function targetCheckboxChange(event) {
+    var _targets$indexSource, _find$dependencies3;
+    var _event$target4 = event === null || event === void 0 ? void 0 : event.target,
+      checked = _event$target4.checked,
+      values = _objectWithoutPropertiesLoose(_event$target4, _excluded2);
+    /** 当前项处理 */
+    var indexCheck = [].concat(targets.index);
+    var idx = indexCheck.indexOf(values.value);
+    if (checked && idx === -1) {
+      indexCheck.push(values.value);
+    }
+    if (!checked && idx > -1) {
+      indexCheck.splice(idx, 1);
+    }
+
+    /** 收集的选中项，对比数据源顺序排序 */
+    var index = getIndexSourceSort(indexCheck);
+
+    /** 当前项关联关系处理 */
+    var find = targets === null || targets === void 0 ? void 0 : (_targets$indexSource = targets.indexSource) === null || _targets$indexSource === void 0 ? void 0 : _targets$indexSource.find(function (cur) {
+      return cur.alias === values.value || cur.name === values.value;
+    });
+    var dimension = [];
+    if (find !== null && find !== void 0 && (_find$dependencies3 = find.dependencies) !== null && _find$dependencies3 !== void 0 && _find$dependencies3.length) {
+      var dimensionCheck = [].concat(dims.dimension);
+      var _loop = function _loop() {
+        var name = _step6.value;
+        var dimFind = dims.dimensionSource.find(function (cur) {
+          return cur.name === name;
+        });
+        var description = (dimFind === null || dimFind === void 0 ? void 0 : dimFind.alias) || (dimFind === null || dimFind === void 0 ? void 0 : dimFind.description);
+        if (description) {
+          var id = dimensionCheck.indexOf(description);
+          if (checked && id === -1) {
+            dimensionCheck.push(description);
+          }
+          if (!checked && id > -1) {
+            dimensionCheck.splice(id, 1);
+          }
+        }
+      };
+      for (var _iterator6 = _createForOfIteratorHelperLoose(find === null || find === void 0 ? void 0 : find.dependencies), _step6; !(_step6 = _iterator6()).done;) {
+        _loop();
+      }
+      dimension = getDimSourceSort(dimensionCheck);
+      setDims(_extends({}, dims, {
+        all: dimension.length === dims.dimensionSource.length,
+        indeterminate: !!dimension.length && dimension.length < dims.dimensionSource.length,
+        dimension: dimension
+      }));
+    }
+    setTargets(_extends({}, targets, {
+      all: index.length === targets.indexSource.length,
+      indeterminate: !!index.length && index.length < targets.indexSource.length,
+      index: index
+    }));
+    var option = getDimTargetValues();
+    onChange === null || onChange === void 0 ? void 0 : onChange(_extends({}, option, {
+      dimension: dimension.length ? dimension : option.dimension,
+      index: index
+    }));
+  };
+  var saveDimensionTarget = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var _dims$dimension, dimension, _dims$dimensionSource2, dimensionSource, _targets$index, index, _targets$indexSource2, indexSource, customDimJson, customIndexJson, _iterator7, _step7, cur, _iterator8, _step8, _cur, data;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (dataSetName) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            _dims$dimension = dims.dimension, dimension = _dims$dimension === void 0 ? [] : _dims$dimension, _dims$dimensionSource2 = dims.dimensionSource, dimensionSource = _dims$dimensionSource2 === void 0 ? [] : _dims$dimensionSource2;
+            _targets$index = targets.index, index = _targets$index === void 0 ? [] : _targets$index, _targets$indexSource2 = targets.indexSource, indexSource = _targets$indexSource2 === void 0 ? [] : _targets$indexSource2;
+            /** 记住勾选保存的维度；别名容易易被修改，保存的是 description 属性 */
+            customDimJson = [];
+            /** 记住勾选保存的指标；别名容易易被修改，保存的是 name 属性 */
+            customIndexJson = [];
+            if (rememberCheck) {
+              for (_iterator7 = _createForOfIteratorHelperLoose(dimensionSource); !(_step7 = _iterator7()).done;) {
+                cur = _step7.value;
+                if (dimension.includes(cur.alias || cur.description)) {
+                  customDimJson.push(cur.description);
+                }
+              }
+              for (_iterator8 = _createForOfIteratorHelperLoose(indexSource); !(_step8 = _iterator8()).done;) {
+                _cur = _step8.value;
+                if (index.includes(_cur.alias || _cur.name)) {
+                  customIndexJson.push(_cur.name);
+                }
+              }
+            }
+            data = {
+              dataSetName: dataSetName,
+              customDimJson: customDimJson.length ? JSON.stringify(customDimJson) : '',
+              customIndexJson: customIndexJson.length ? JSON.stringify(customIndexJson) : ''
+            };
+            _context.prev = 8;
+            _context.next = 11;
+            return saveDimTarget(rcProContext, data);
+          case 11:
+            _context.next = 16;
+            break;
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](8);
+            console.error(_context.t0);
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[8, 13]]);
+    }));
+    return function saveDimensionTarget() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  useUpdateEffect(function () {
+    if (remember && rememberCheck) {
+      saveDimensionTarget();
+    }
+  }, [rememberCheck, dims.dimension, targets.index]);
+  var rememberCheckChange = function rememberCheckChange(event) {
+    var _event$target5;
+    var checked = event === null || event === void 0 ? void 0 : (_event$target5 = event.target) === null || _event$target5 === void 0 ? void 0 : _event$target5.checked;
+    setRememberCheck(checked);
+    if (!checked) {
+      saveDimensionTarget();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dim-target"
+  }, /*#__PURE__*/React.createElement("div", null, !dims.dimensionSource.length ? null : /*#__PURE__*/React.createElement("div", {
+    className: "dim-target-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dim-target-label"
+  }, dims.title), /*#__PURE__*/React.createElement("div", {
+    className: "dim-target-body"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Checkbox, {
+    checked: dims.all,
+    indeterminate: dims.indeterminate,
+    onChange: dimAllChange
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: dimTargetWidth
+    }
+  }, "\u5168\u9009"))), /*#__PURE__*/React.createElement(_Checkbox.Group, {
+    value: dims.dimension
+  }, dims.dimensionSource.map(function (cur) {
+    return /*#__PURE__*/React.createElement(_Checkbox, {
+      key: cur.alias || cur.description,
+      value: cur.alias || cur.description,
+      disabled: !cur.optional,
+      onChange: dimCheckboxChange
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: dimTargetWidth
+      }
+    }, cur.alias || cur.description));
+  })))), !targets.indexSource.length ? null : /*#__PURE__*/React.createElement("div", {
+    className: "dim-target-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dim-target-label"
+  }, targets.title), /*#__PURE__*/React.createElement("div", {
+    className: "dim-target-body"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Checkbox, {
+    checked: targets.all,
+    indeterminate: targets.indeterminate,
+    onChange: targetAllChange
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: dimTargetWidth
+    }
+  }, "\u5168\u9009"))), /*#__PURE__*/React.createElement(_Checkbox.Group, {
+    value: targets.index
+  }, targets.indexSource.map(function (cur) {
+    return /*#__PURE__*/React.createElement(_Checkbox, {
+      key: cur.alias || cur.name,
+      value: cur.alias || cur.name,
+      disabled: !cur.optional,
+      onChange: targetCheckboxChange
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: dimTargetWidth
+      }
+    }, cur.alias || cur.name));
+  }))))), dataSetName ? /*#__PURE__*/React.createElement("div", {
+    className: "dim-target-handle"
+  }, remember ? /*#__PURE__*/React.createElement(_Checkbox, {
+    checked: rememberCheck,
+    onChange: rememberCheckChange
+  }, " \u8BB0\u4F4F\u52FE\u9009") : null, buttons.length ? /*#__PURE__*/React.createElement(ProButton, {
+    items: buttons
+  }) : null) : null);
+};
+export default DimTarget;

package/es/components/z-templates-data-common/components/dim-target/index.less

@@ -0,0 +1,49 @@
+.dim-target {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0;
+
+  .ant-checkbox-wrapper + .ant-checkbox-wrapper {
+    margin-left: 0;
+  }
+
+  .dim-target-content {
+    display: flex;
+  }
+
+  .dim-target-label {
+    min-width: 80px;
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14px;
+    text-align: right;
+    padding-right: 6px;
+  }
+
+  .dim-target-body {
+    display: flex;
+  }
+
+  .ant-checkbox-wrapper {
+    margin-bottom: 16px;
+    white-space: nowrap;
+  }
+
+  .dim-target-handle {
+    position: relative;
+    width: 160px;
+    padding-left: 40px;
+  }
+
+  .dim-target-handle::before {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    display: inline-block;
+    width: 1px;
+    height: 110%;
+    background: #e5e5e5;
+    transform: translateY(-50%);
+    content: '';
+  }
+}

package/es/components/z-templates-data-common/components/dim-target/useUpdateEffect.d.ts

@@ -0,0 +1,8 @@
+import type { DependencyList, EffectCallback } from 'react';
+/**
+ * 依赖更改时生命周期
+ * @param effect 更新时做需要调用的函数
+ * @param deps 更新依赖
+ */
+declare const useUpdateEffect: (effect: EffectCallback, deps: DependencyList) => void;
+export default useUpdateEffect;

package/es/components/z-templates-data-common/components/dim-target/useUpdateEffect.js

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * 是否第一次
+ */
+var useFirstRender = function useFirstRender() {
+  var isFirst = useRef(true);
+  if (isFirst.current) {
+    isFirst.current = false;
+    return true;
+  }
+  return isFirst.current;
+};
+
+/**
+ * 依赖更改时生命周期
+ * @param effect 更新时做需要调用的函数
+ * @param deps 更新依赖
+ */
+var useUpdateEffect = function useUpdateEffect(effect, deps) {
+  var isFirst = useFirstRender();
+  useEffect(function () {
+    if (!isFirst) return effect();
+  }, deps);
+};
+export default useUpdateEffect;

package/es/components/z-templates-data-common/components/link-renderer/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { CheckboxValueType } from 'antd/es/checkbox/Group';
+import type { TypeChartSettingProps } from '../../data-common';
+import './index.less';
+export interface linkParamsType extends Pick<TypeChartSettingProps, 'dataSetName'> {
+    index?: number;
+    width?: number;
+    dimension?: CheckboxValueType[];
+    record?: Record<string, any>;
+}
+export interface linkStateType extends linkParamsType, Pick<TypeChartSettingProps, 'title' | 'autoLoad' | 'refreshRate'> {
+}
+declare const LinkRenderer: (props: Pick<TypeChartSettingProps, "onConfirm" | "formatter" | "chartRef" | "dimJson" | "linkPage"> & {
+    onBack?: () => void;
+}) => import("react").JSX.Element;
+export default LinkRenderer;