linkmore-design 1.0.3

package/es/EnlargeImg/index.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/modal/style");
+
+var _modal = _interopRequireDefault(require("antd/es/modal"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var EnlargeImg = function EnlargeImg(props) {
+  var useProps = (0, _objectSpread2.default)({}, props);
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      imgUrl = _useState2[0],
+      setImgUrl = _useState2[1]; // 图片路径
+
+
+  var _useState3 = (0, _react.useState)(200),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      imgWidth = _useState4[0],
+      setImgWidth = _useState4[1]; // 原始图片宽度 默认200PX
+  // eslint-disable-next-line no-unused-vars
+
+
+  var _useState5 = (0, _react.useState)(300),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      bigImgWidth = _useState6[0],
+      setBigImgWidth = _useState6[1]; // 放大后图片宽度 默认300PX
+
+
+  var _useState7 = (0, _react.useState)('图片预览'),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      imgTitle = _useState8[0],
+      setImgTitle = _useState8[1]; // 图片放大标题名称 默认为 '图片预览'
+
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      bigImgState = _useState10[0],
+      setBigImgState = _useState10[1]; // 图片路径
+
+
+  (0, _react.useEffect)(function () {
+    setImgUrl(useProps.src); // 设置图片路径
+
+    useProps.title ? setImgTitle(useProps.title) : null; // 设置图片名称
+
+    useProps.openWidth ? setBigImgWidth(useProps.openWidth) : null; // 设置图片名称
+
+    useProps.width ? setImgWidth(typeof useProps.width === 'number' ? "".concat(useProps.width, "px") : useProps.width) : null; // 设置图片宽度
+  }, []);
+
+  var enlargeImg = function enlargeImg() {
+    setBigImgState(true);
+  };
+
+  var handleCancel = function handleCancel() {
+    setBigImgState(false);
+  };
+
+  var BigImg = function BigImg() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_modal.default, {
+      keyboard: true,
+      title: imgTitle,
+      visible: bigImgState,
+      onCancel: handleCancel,
+      footer: false,
+      bodyStyle: {
+        padding: 0
+      } // width={bigImgWidth}
+      ,
+      maskClosable: true,
+      centered: true
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: imgUrl,
+      alt: "null",
+      style: {
+        width: '100%'
+      }
+    })));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_enlargeimg_warp",
+    onClick: enlargeImg
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    style: {
+      width: "".concat(imgWidth)
+    },
+    src: imgUrl,
+    alt: "null"
+  })), bigImgState ? /*#__PURE__*/_react.default.createElement(BigImg, null) : null);
+};
+
+var _default = EnlargeImg;
+exports.default = _default;

package/es/EnlargeImg/style/index.js

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

package/es/EnlargeImg/style/style.css

@@ -0,0 +1,4 @@
+.lm_enlargeimg_warp {
+  display: 'inline-block';
+  cursor: 'pointer';
+}

package/es/Filter/Popover.js

@@ -0,0 +1,199 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/popover/style");
+
+var _popover = _interopRequireDefault(require("antd/es/popover"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+require("antd/es/button/style");
+
+var _button = _interopRequireDefault(require("antd/es/button"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icons = require("@ant-design/icons");
+
+var _components = require("./components");
+
+var _popContext = _interopRequireDefault(require("./popContext"));
+
+// 单个组件的下拉框
+var Index = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var item = props.item,
+      content = props.content,
+      children = props.children,
+      config = props.config,
+      getChange = props.getChange;
+  var toggle = item.toggle,
+      title = item.title,
+      type = item.type,
+      field = item.field,
+      data = item.data;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useVisible = _useState2[0],
+      setVisible = _useState2[1]; // 控制弹出层显隐
+
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      useValue = _useState4[0],
+      setValue = _useState4[1]; // 选中的值
+
+
+  var _useState5 = (0, _react.useState)(field),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      useKey = _useState6[0],
+      setKey = _useState6[1];
+
+  var singleRef = ref || (0, _react.useRef)(null);
+
+  var handleClick = function handleClick(visible) {
+    setVisible(visible);
+  }; // 数字
+
+
+  var showTitle = function showTitle() {
+    if (toggle) return null;
+    if (!useValue && typeof useValue !== 'number') return null;
+
+    if (Array.isArray(useValue)) {
+      if (type === 'date') return true;
+      return useValue.length > 0 ? "(".concat(useValue === null || useValue === void 0 ? void 0 : useValue.length, ")") : null;
+    }
+
+    return true;
+  }; // 文字
+
+
+  var showLabel = function showLabel() {
+    if (toggle) return title;
+
+    if (useValue || typeof useValue === 'number') {
+      switch (type) {
+        case 'select':
+          return data.find(function (v) {
+            return v.value === useValue;
+          }).label;
+
+        case 'tree':
+          return useValue.title;
+
+        case 'date':
+          return Array.isArray(useValue) ? "".concat(useValue[0], " \u81F3 ").concat(useValue[1]) : useValue;
+
+        case 'input':
+          return useValue;
+
+        default:
+          break;
+      }
+    }
+
+    return title;
+  }; // 选中时触发
+
+
+  var onChange = function onChange(v, obj, mode) {
+    type !== 'checkbox' ? setVisible(false) : '';
+
+    if (toggle) {
+      getChange === null || getChange === void 0 ? void 0 : getChange(v);
+      return;
+    }
+
+    setValue(v);
+    var params = {
+      field: field,
+      value: v,
+      mapItem: obj
+    };
+    getChange === null || getChange === void 0 ? void 0 : getChange(params, mode);
+  };
+
+  var contentDom = function contentDom() {
+    switch (type) {
+      case 'input':
+        return /*#__PURE__*/_react.default.createElement(_components.Input, {
+          key: useKey
+        });
+
+      case 'select':
+        return /*#__PURE__*/_react.default.createElement(_components.Select, {
+          key: useKey
+        });
+
+      case 'checkbox':
+        return /*#__PURE__*/_react.default.createElement(_components.Checkbox, {
+          key: useKey,
+          ref: singleRef
+        });
+
+      case 'tree':
+        return /*#__PURE__*/_react.default.createElement(_components.Tree, {
+          key: useKey
+        });
+
+      case 'date':
+        return /*#__PURE__*/_react.default.createElement(_components.DatePicker, {
+          key: useKey
+        });
+
+      default:
+        return /*#__PURE__*/_react.default.createElement(_components.Select, null);
+    }
+  }; // 清空筛选项
+
+
+  var handleClear = function handleClear(e) {
+    e === null || e === void 0 ? void 0 : e.stopPropagation();
+    var nKey = field + Date.now();
+    setKey(nKey); // 重新渲染
+
+    var v = type === 'checkbox' ? [] : '';
+    onChange(v, 'and', '');
+  }; // const clearTag = (value) => {
+  //   setKey(Date.now()); // 重新渲染
+  //   setDefaultValue(value);
+  //   // getChange({ field, value });
+  // };
+  // React.useImperativeHandle(ref, () => ({
+  //   clearTag,
+  // }));
+
+
+  return /*#__PURE__*/_react.default.createElement(_popContext.default.Provider, {
+    value: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      onChange: onChange
+    })
+  }, /*#__PURE__*/_react.default.createElement(_popover.default, (0, _extends2.default)({
+    placement: "bottomLeft",
+    overlayClassName: "list-popover",
+    trigger: "click",
+    visible: useVisible,
+    onVisibleChange: handleClick,
+    content: content ? content(onChange) : contentDom
+  }, config), children || /*#__PURE__*/_react.default.createElement(_button.default, {
+    type: "link",
+    className: (!!showTitle() || useVisible) && 'btn_active'
+  }, showLabel(), " ", showTitle(), showTitle() !== null ? /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
+    onClick: handleClear
+  }) : useVisible ? /*#__PURE__*/_react.default.createElement(_icons.UpOutlined, null) : /*#__PURE__*/_react.default.createElement(_icons.DownOutlined, null))));
+});
+var _default = Index;
+exports.default = _default;

package/es/Filter/baseFilter/Popover.js

@@ -0,0 +1,214 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/popover/style");
+
+var _popover = _interopRequireDefault(require("antd/es/popover"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+require("antd/es/button/style");
+
+var _button = _interopRequireDefault(require("antd/es/button"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _IconFont = _interopRequireDefault(require("../../IconFont"));
+
+var _icons = require("@ant-design/icons");
+
+var _components = require("../components");
+
+var _context = _interopRequireDefault(require("../context"));
+
+var _popContext = _interopRequireDefault(require("../popContext"));
+
+// 单个组件的下拉框
+var Index = function Index(props) {
+  var item = props.item,
+      content = props.content,
+      children = props.children,
+      config = props.config,
+      getChange = props.getChange;
+  var toggle = item.toggle,
+      title = item.title,
+      type = item.type,
+      field = item.field,
+      data = item.data;
+
+  var _useContext = (0, _react.useContext)(_context.default),
+      state = _useContext.state;
+
+  var checkValue = state.checkValue; // 清除筛选多选状态： 暂时的解决方案，后续要更改
+
+  var _useState = (0, _react.useState)(field),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      useKey = _useState2[0],
+      setKey = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      useVisible = _useState4[0],
+      setVisible = _useState4[1]; // 控制弹出层显隐
+  // 选中的值
+
+
+  var useValue = (0, _react.useMemo)(function () {
+    return checkValue[field];
+  }, [checkValue]);
+
+  var handleClick = function handleClick(visible) {
+    setVisible(visible);
+  }; // 数字
+
+
+  var showTitle = function showTitle() {
+    if (toggle) return null;
+    if (!useValue && typeof useValue !== 'number') return null;
+
+    if (Array.isArray(useValue)) {
+      if (type === 'date') return true;
+      return useValue.length > 0 ? "(".concat(useValue === null || useValue === void 0 ? void 0 : useValue.length, ")") : null;
+    }
+
+    return true;
+  }; // 显示值
+
+
+  var showValue = function showValue() {
+    var _data$find, _data$find2;
+
+    var result = showTitle();
+    console.log(useValue, 'useValue');
+
+    if (result) {
+      if (useValue || typeof useValue === 'number') {
+        switch (type) {
+          case 'select':
+            return ((_data$find = data.find(function (v) {
+              return v.value === useValue;
+            })) === null || _data$find === void 0 ? void 0 : _data$find.label) || '';
+
+          case 'checkbox':
+            return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ((_data$find2 = data.find(function (v) {
+              return v.value === useValue[0];
+            })) === null || _data$find2 === void 0 ? void 0 : _data$find2.label) || '', (useValue === null || useValue === void 0 ? void 0 : useValue.length) > 1 ? "\u3001+".concat((useValue === null || useValue === void 0 ? void 0 : useValue.length) - 1, "...") : null);
+
+          case 'tree':
+            return useValue.title;
+
+          case 'date':
+            return Array.isArray(useValue) ? "".concat(useValue[0], " \u81F3 ").concat(useValue[1]) : useValue;
+
+          case 'input':
+            return useValue;
+
+          default:
+            break;
+        }
+      }
+    }
+
+    return null;
+  }; // 文字
+
+
+  var showLabel = function showLabel() {
+    return "".concat(title, "\uFF1A");
+  }; // 选中时触发
+
+
+  var onChange = function onChange(v, obj, mode) {
+    type !== 'checkbox' ? setVisible(false) : '';
+
+    if (toggle) {
+      getChange === null || getChange === void 0 ? void 0 : getChange(v);
+      return;
+    }
+
+    var params = {
+      field: field,
+      value: v,
+      mapItem: obj
+    };
+    getChange === null || getChange === void 0 ? void 0 : getChange(params, mode);
+  };
+
+  var contentDom = function contentDom() {
+    switch (type) {
+      case 'input':
+        return /*#__PURE__*/_react.default.createElement(_components.Input, null);
+
+      case 'select':
+        return /*#__PURE__*/_react.default.createElement(_components.Select, null);
+
+      case 'checkbox':
+        return /*#__PURE__*/_react.default.createElement(_components.Checkbox, {
+          key: useKey
+        });
+
+      case 'tree':
+        return /*#__PURE__*/_react.default.createElement(_components.Tree, null);
+
+      case 'date':
+        return /*#__PURE__*/_react.default.createElement(_components.DatePicker, null);
+
+      default:
+        return /*#__PURE__*/_react.default.createElement(_components.Select, null);
+    }
+  }; // 清空筛选项
+
+
+  var handleClear = function handleClear(e) {
+    e === null || e === void 0 ? void 0 : e.stopPropagation();
+
+    if (type === 'checkbox') {
+      var nKey = field + Date.now();
+      setKey(nKey); // 重新渲染
+    }
+
+    var v = type === 'checkbox' ? [] : '';
+    onChange(v, (0, _objectSpread2.default)({}, item), 'and');
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_popContext.default.Provider, {
+    value: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      onChange: onChange
+    })
+  }, /*#__PURE__*/_react.default.createElement(_popover.default, (0, _extends2.default)({
+    placement: "bottomLeft",
+    overlayClassName: "list-popover",
+    trigger: "click",
+    visible: useVisible,
+    onVisibleChange: handleClick,
+    content: content ? content(onChange) : contentDom
+  }, config), children || /*#__PURE__*/_react.default.createElement(_button.default, {
+    type: "link",
+    className: !!showTitle() || useVisible ? 'btn btn_active' : 'btn btn_not_active'
+  }, showLabel(), /*#__PURE__*/_react.default.createElement("span", {
+    className: "btn_value"
+  }, showValue()), showTitle() !== null ? /*#__PURE__*/_react.default.createElement(_IconFont.default, {
+    className: "btn_icon_close",
+    type: "lmweb-close-circle-fill",
+    onClick: handleClear
+  }) : useVisible ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "label_text"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "\u5168\u90E8"), /*#__PURE__*/_react.default.createElement(_icons.UpOutlined, null)) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "label_text"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "\u5168\u90E8"), /*#__PURE__*/_react.default.createElement(_icons.DownOutlined, null)))));
+};
+
+var _default = Index;
+exports.default = _default;

package/es/Filter/baseFilter/ToggleFilter.js

@@ -0,0 +1,112 @@
+"use strict";
+
+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/esm/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icons = require("@ant-design/icons");
+
+var _Popover = _interopRequireDefault(require("../Popover"));
+
+var _context = _interopRequireDefault(require("../context"));
+
+var ToggleFilter = function ToggleFilter(_ref) {
+  var useList = _ref.useList,
+      setList = _ref.setList;
+
+  var _useContext = (0, _react.useContext)(_context.default),
+      state = _useContext.state,
+      dispatch = _useContext.dispatch,
+      getChange = _useContext.getChange; // 触发筛选
+
+
+  var searchEvent = function searchEvent(value, field) {
+    var checkValue = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, state.checkValue), {}, (0, _defineProperty2.default)({}, field, value));
+    dispatch({
+      type: 'changeCheckValue',
+      checkValue: checkValue
+    });
+    getChange === null || getChange === void 0 ? void 0 : getChange(checkValue);
+  }; // 搜索条件展示
+
+
+  var resetList = function resetList(value) {
+    console.log('value', value);
+    var fixed = !value.fixed;
+    var nValue = useList.map(function (v) {
+      var obj = fixed ? useList.find(function (o) {
+        return o.field === v.field;
+      }) : v;
+
+      if (v.field === value.field) {
+        return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, obj), {}, {
+          fixed: fixed
+        });
+      }
+
+      return v;
+    });
+    searchEvent(value.type === 'checkbox' ? [] : '', value.field);
+    setList(nValue);
+  }; // 置顶
+
+
+  var handleTop = function handleTop(e, item) {
+    e.stopPropagation();
+
+    if (!item.fixed) {
+      resetList(item);
+    } else {
+      var nValue = useList.filter(function (v) {
+        return v.field !== item.field;
+      });
+      setList([item].concat((0, _toConsumableArray2.default)(nValue)));
+    }
+  };
+
+  var more = (0, _react.useMemo)(function () {
+    return {
+      toggle: true,
+      // 是否更多筛选
+      type: 'select',
+      params: {},
+      title: '更多筛选',
+      field: '',
+      data: useList.sort(function (a, b) {
+        return !!b.fixed - !!a.fixed;
+      }),
+      renderItem: function renderItem(item, i) {
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, item.title), /*#__PURE__*/_react.default.createElement("div", {
+          className: "item_other"
+        }, !!i && /*#__PURE__*/_react.default.createElement("span", {
+          className: "item_top item_icon",
+          onClick: function onClick(e) {
+            return handleTop(e, item);
+          }
+        }, item.fixed ? /*#__PURE__*/_react.default.createElement(_icons.VerticalAlignTopOutlined, null) : /*#__PURE__*/_react.default.createElement(_icons.PushpinOutlined, null)), item.fixed ? /*#__PURE__*/_react.default.createElement("span", {
+          className: "item_fixed item_icon"
+        }, /*#__PURE__*/_react.default.createElement(_icons.PushpinOutlined, null)) : null));
+      }
+    };
+  }, [useList]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Popover.default, {
+    item: more,
+    getChange: resetList
+  }));
+};
+
+var _default = ToggleFilter;
+exports.default = _default;