linkmore-design 1.0.53 → 1.0.56

package/es/LmFilter/wrapper/FilterRoot.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FilterWrapper = _interopRequireDefault(require("./FilterWrapper"));
+
+var _filterFns = _interopRequireDefault(require("../filterFns"));
+
+// 根文件 => 参数聚合
+var reducer = function reducer(state, action) {
+  var basicFilter = action.basicFilter,
+      resize = action.resize,
+      rows = action.rows,
+      complexDrawer = action.complexDrawer,
+      valueDrawer = action.valueDrawer,
+      complexFilter = action.complexFilter;
+
+  switch (action.type) {
+    case 'changeBasicFilter':
+      // 基础筛选数据改变
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        basicFilter: basicFilter
+      });
+
+    case 'changeRows':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        rows: rows
+      });
+
+    case 'windowResize':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        resize: resize
+      });
+    // 高级筛选
+
+    case 'changeComplexFilter':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        complexFilter: complexFilter
+      });
+
+    case 'changeComplexDrawer':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        complexDrawer: complexDrawer
+      });
+
+    case 'changeValueDrawer':
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        valueDrawer: valueDrawer
+      });
+
+    case 'reset':
+      // 一键清空
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), {}, {
+        basicFilter: {}
+      });
+
+    default:
+      throw new Error();
+  }
+}; // const getRows = ({ fieldName, value }, arr) => {
+//   const findItem = arr.find(item => {
+//     return item.field === fieldName;
+//   })
+//   switch (findItem.type) {
+//     case 'input':
+//       return value;
+//     case 'select':
+//       return findItem.data.find(v => v.value === value);
+//     case 'checkbox':
+//       return findItem.data.find(v => [value].includes(v.value));
+//     default:
+//       break;
+//   }
+// };
+// 仅在初始化时触发一次
+
+
+var getInitialState = function getInitialState(_ref) {
+  var localization = _ref.localization;
+  var globalQuery = localization.globalQuery,
+      filterQuery = localization.filterQuery;
+  var basicFilter = {};
+  filterQuery.filter.forEach(function (item) {
+    basicFilter[item.fieldName] = item.value;
+  });
+  return {
+    basicFilter: basicFilter,
+    complexFilter: {},
+    complexDrawer: {
+      visible: false,
+      data: {}
+    },
+    valueDrawer: {
+      visible: false,
+      data: {}
+    }
+  };
+};
+
+var LmFilterRoot = function LmFilterRoot(props, ref) {
+  var initialState = (0, _react.useMemo)(function () {
+    return getInitialState(props);
+  }, []);
+
+  var _useReducer = (0, _react.useReducer)(reducer, initialState),
+      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1]; // 初始化配置
+
+
+  var configProps = (0, _react.useMemo)(function () {
+    var resetProps = (0, _extends2.default)({}, props);
+    return (0, _objectSpread2.default)({
+      dataSource: [],
+      // 数据源
+      enableSearch: true,
+      // 是否启用模糊查询
+      enableBaisc: true,
+      // 是否启用基础筛选
+      enableComplex: false,
+      // 是否启用高级筛选
+      enableCustom: false,
+      // 是否启用自定义筛选
+      size: 'middle',
+      // 尺寸
+      searchKey: 'search',
+      // 搜索的key值
+      placeholder: '请输入'
+    }, resetProps);
+  }, [props]); // 事件集合
+
+  var eventProps = (0, _react.useMemo)(function () {
+    return (0, _filterFns.default)({
+      state: state,
+      dispatch: dispatch,
+      props: props
+    });
+  }, [state, dispatch, props]); // 组件示例
+
+  var instance = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, configProps), eventProps), {}, {
+    state: state,
+    dispatch: dispatch
+  }); // 向外暴露出的方法
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return (0, _objectSpread2.default)({}, eventProps);
+  });
+  return /*#__PURE__*/_react.default.createElement(_FilterWrapper.default, {
+    instance: instance
+  });
+};
+
+var _default = /*#__PURE__*/(0, _react.forwardRef)(LmFilterRoot);
+
+exports.default = _default;

package/es/LmFilter/wrapper/FilterWrapper.js

@@ -0,0 +1,25 @@
+"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 _FilterContainer = _interopRequireDefault(require("./FilterContainer"));
+
+// 包裹过滤组件区域: 拓展其他结构
+var LmFilterWrapper = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var instance = _ref.instance;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_filter_wrapper"
+  }, /*#__PURE__*/_react.default.createElement(_FilterContainer.default, {
+    instance: instance
+  }));
+});
+
+var _default = LmFilterWrapper;
+exports.default = _default;

package/es/QuickMenu/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface IMenuData {
+    menuId: string;
+    title: string | React.ReactNode;
+}
+export interface IQuickMenuProps {
+    className?: string;
+    style?: React.CSSProperties;
+    top?: number;
+    menuData: IMenuData[];
+    warpElement: any;
+}
+declare const LMQuickMenu: React.FC<IQuickMenuProps>;
+export default LMQuickMenu;

package/es/QuickMenu/index.js

@@ -0,0 +1,169 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState, useRef } from 'react';
+import { IconFont, Button } from 'linkmore-design';
+import { useScroll } from 'ahooks';
+import classNames from 'classnames';
+import { getTargetElement } from '../_util/domTarget';
+var prefixCls = 'lm_quick_menu';
+
+var LMQuickMenu = function LMQuickMenu(props) {
+  var className = props.className,
+      _props$top = props.top,
+      top = _props$top === void 0 ? '104px' : _props$top,
+      _props$menuData = props.menuData,
+      menuData = _props$menuData === void 0 ? [] : _props$menuData,
+      warpElement = props.warpElement;
+  var idTopInfo = useRef({});
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hovering = _useState2[0],
+      setHovering = _useState2[1];
+
+  var menuTimeEventRef = useRef(null);
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      scrollOpenStatus = _useState4[0],
+      setScrollOpenStatus = _useState4[1];
+
+  var scrollTimeOut = useRef(null);
+  var scroll = useScroll(getTargetElement(warpElement || document), function () {
+    return scrollOpenStatus;
+  });
+
+  function clearActiveToc() {
+    [].forEach.call(document.querySelectorAll('.lm_menu_list li a'), function (node) {
+      node.className = '';
+    });
+  }
+
+  var updateActiveToc = function updateActiveToc(id) {
+    var currentNode = document.querySelectorAll(".lm_menu_list li a[data-id=\"".concat(id, "\"]"))[0];
+
+    if (currentNode) {
+      clearActiveToc();
+      currentNode.className = 'current';
+    }
+  };
+
+  var bindScroller = function bindScroller() {
+    var _a, _b, _c;
+
+    if (menuTimeEventRef.current) {
+      (_a = menuTimeEventRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+
+    if (!menuData.length) {
+      return;
+    } // eslint-disable-next-line global-require
+
+
+    require('intersection-observer'); // eslint-disable-next-line global-require
+
+
+    var scrollama = require('scrollama');
+
+    menuTimeEventRef.current = scrollama();
+    (_c = (_b = menuTimeEventRef.current) === null || _b === void 0 ? void 0 : _b.setup({
+      step: menuData.map(function (item) {
+        return document.getElementById("".concat(item.menuId));
+      }).filter(Boolean) // required
+      // offset: '10px',
+
+    })) === null || _c === void 0 ? void 0 : _c.onStepEnter(function (_ref) {
+      var element = _ref.element;
+      updateActiveToc(element.id);
+    });
+  };
+
+  function setKeysDom() {
+    menuData.forEach(function (item) {
+      var _a, _b;
+
+      var warpTop = ((_a = getTargetElement(warpElement || document)) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0;
+      idTopInfo.current["".concat(item.menuId)] = ((_b = document.getElementById("".concat(item.menuId))) === null || _b === void 0 ? void 0 : _b.offsetTop) - warpTop;
+    });
+  }
+
+  useEffect(function () {
+    if (scroll && !hovering) {
+      setHovering(true);
+    }
+
+    if (scrollTimeOut.current) {
+      clearTimeout(scrollTimeOut.current);
+    }
+
+    scrollTimeOut.current = setTimeout(function () {
+      setHovering(false);
+    }, 2000);
+  }, [scroll]);
+
+  var bindDom = function bindDom() {
+    if (!Object.keys(idTopInfo.current).length) {
+      setKeysDom();
+    }
+  };
+
+  var handleScroll = function handleScroll() {
+    setScrollOpenStatus(true);
+  };
+
+  var golink = function golink(id) {
+    var _a;
+
+    getTargetElement(warpElement || document).scrollTop = (_a = idTopInfo.current) === null || _a === void 0 ? void 0 : _a[id];
+  };
+
+  useEffect(function () {
+    var _a; // bindScroller();
+
+
+    setTimeout(function () {
+      bindDom();
+      bindScroller();
+    }, 200);
+    (_a = getTargetElement(warpElement || document)) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', handleScroll, {
+      once: true
+    });
+    return function () {
+      var _a;
+
+      (_a = getTargetElement(warpElement || document)) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(prefixCls),
+    onMouseEnter: function onMouseEnter() {
+      if (scrollTimeOut.current) {
+        clearTimeout(scrollTimeOut.current);
+      }
+
+      setHovering(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      setHovering(false);
+    },
+    style: {
+      top: top
+    }
+  }, !hovering && /*#__PURE__*/React.createElement(Button, {
+    icon: /*#__PURE__*/React.createElement(IconFont, {
+      type: 'lmweb-icon_m_open'
+    })
+  }), /*#__PURE__*/React.createElement("ul", {
+    className: classNames('lm_menu_list', hovering && 'show', className)
+  }, menuData.map(function (item) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: item.menuId,
+      onClick: function onClick() {
+        return golink(item.menuId);
+      }
+    }, /*#__PURE__*/React.createElement("a", {
+      "data-id": item.menuId
+    }, item.title));
+  })));
+};
+
+export default LMQuickMenu;