@zgfe/business-lib 1.0.0-beta.1

package/es/attributeSelector/index.js

@@ -0,0 +1,578 @@
+var _excluded = ["children"];
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { Anchor, Input, Tooltip } from 'antd';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { BizGlobalDataContext, IconFont } from '..';
+import { util } from '../utils';
+import './index.less';
+var Link = Anchor.Link;
+
+var BizAttributeSelector = function BizAttributeSelector(props) {
+  var defaultValue = props.defaultValue,
+      value = props.value,
+      eventIds = props.eventIds,
+      _props$responseType = props.responseType,
+      responseType = _props$responseType === void 0 ? 'id' : _props$responseType,
+      _props$showDeleteIcon = props.showDeleteIcon,
+      showDeleteIcon = _props$showDeleteIcon === void 0 ? false : _props$showDeleteIcon,
+      _props$showUserProp = props.showUserProp,
+      showUserProp = _props$showUserProp === void 0 ? true : _props$showUserProp,
+      _props$showEventEnv = props.showEventEnv,
+      showEventEnv = _props$showEventEnv === void 0 ? true : _props$showEventEnv,
+      _props$showEventProp = props.showEventProp,
+      showEventProp = _props$showEventProp === void 0 ? true : _props$showEventProp,
+      options = props.options,
+      onDelete = props.onDelete,
+      onChange = props.onChange,
+      _props$index = props.index,
+      index = _props$index === void 0 ? 0 : _props$index,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? [] : _props$disabled,
+      _props$placeholder = props.placeholder,
+      placeholder = _props$placeholder === void 0 ? '请选择' : _props$placeholder,
+      children = props.children;
+
+  var _useContext = useContext(BizGlobalDataContext),
+      eventMeta = _useContext.eventMeta,
+      userProps = _useContext.userProps,
+      eventEnv = _useContext.eventEnv;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      attrOptions = _useState2[0],
+      setAttrOptions = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      primaryAttrOptions = _useState4[0],
+      setPrimaryAttrOptions = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      showDropdown = _useState6[0],
+      setShowDropdown = _useState6[1];
+
+  var attrsRef = useRef(null); // 锚点：{event:{id,children}, user:{id,children}}
+
+  var _useState7 = useState({}),
+      _useState8 = _slicedToArray(_useState7, 2),
+      anchorList = _useState8[0],
+      setAnchorList = _useState8[1]; // 动态id
+
+
+  var _useState9 = useState('list_1}'),
+      _useState10 = _slicedToArray(_useState9, 2),
+      listID = _useState10[0],
+      setListID = _useState10[1];
+
+  var _useState11 = useState('list_2'),
+      _useState12 = _slicedToArray(_useState11, 2),
+      allID = _useState12[0],
+      setAllID = _useState12[1]; // 搜索框是否是聚焦状态
+
+
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      focused = _useState14[0],
+      setFocused = _useState14[1]; // 搜索值
+
+
+  var _useState15 = useState(''),
+      _useState16 = _slicedToArray(_useState15, 2),
+      searchValue = _useState16[0],
+      setSearchValue = _useState16[1]; // 选中值
+
+
+  var _useState17 = useState({
+    value: ''
+  }),
+      _useState18 = _slicedToArray(_useState17, 2),
+      attrs = _useState18[0],
+      setAttrs = _useState18[1];
+
+  var _useState19 = useState(''),
+      _useState20 = _slicedToArray(_useState19, 2),
+      defaultAttrValue = _useState20[0],
+      setDefaultAttrValue = _useState20[1]; // 处理事件数据
+  // data: 所有事件（分组+属性） eventIds: 要提取属性的事件id
+
+
+  var formateEvent = function formateEvent(data, eventIds) {
+    var eventList = [];
+    var idMap = {};
+    var nameMap = {}; // 获取事件列表
+
+    data.forEach(function (group) {
+      var eList = group.eventList || [];
+      eList.forEach(function (event) {
+        event.event_attrs.forEach(function (prop) {
+          prop.id = prop.attr_id;
+          prop.name = prop.alias_name || prop.attr_name || '';
+          prop.value = prop.attr_name;
+          prop.dimensionId = [prop.dimension_sub, prop.value].join(','); // 增加属性细分唯一字段，区分同名自定义属性
+
+          prop.attrId = Math.random().toString();
+        });
+        var randomId = Math.random().toString(); // 事件（分组）添加锚点id
+
+        event.attrId = randomId;
+        if (!idMap[event.event_id]) eventList.push(event);
+        idMap[event.event_id] = event;
+        nameMap[event.event_name] = event;
+      });
+    }); // 取得要展示的所有数据event
+
+    var eventResult = [];
+    var anchorList = []; // 事件属性的定位id
+
+    var firstId = Math.random().toString(); // 如果没传eventid,就展示所有属性
+
+    var ids = [];
+
+    if (eventIds) {
+      if (typeof eventIds === 'number') {
+        ids = [JSON.stringify(eventIds)];
+      } else {
+        ids = eventIds.split(',');
+      }
+    }
+
+    if (ids.length > 0) {
+      ids.forEach(function (id) {
+        var event = idMap[id.trim()];
+
+        if (event) {
+          // 要展示的属性
+          var eventProps = event.event_attrs.filter(function (prop) {
+            return !prop.hidden;
+          });
+          var randomId = Math.random().toString(); // 添加锚点
+
+          anchorList.push({
+            attrId: event.attrId || randomId,
+            name: event.alias_name || event.event_name
+          });
+          eventResult.push({
+            attrId: event.attrId || randomId,
+            name: ids.length > 1 ? "\u4E8B\u4EF6[".concat(event.alias_name || event.event_name, "]\u5C5E\u6027") : '事件属性',
+            children: eventProps
+          });
+        }
+      });
+    }
+
+    if (eventResult.length <= 0) {
+      var _attrs = [];
+
+      var _iterator = _createForOfIteratorHelper(eventList),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _event = _step.value;
+
+          var eventProps = _event.event_attrs.filter(function (prop) {
+            return !prop.hidden;
+          });
+
+          _attrs = _attrs.concat(eventProps);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+
+      eventResult.push({
+        attrId: firstId,
+        name: '事件属性',
+        children: _toConsumableArray(_attrs)
+      });
+    } else {
+      firstId = eventResult[0].attrId || firstId;
+    }
+
+    var event = {
+      attrId: firstId,
+      name: '事件属性',
+      children: anchorList.length > 1 ? [].concat(anchorList) : []
+    };
+    return {
+      event: event,
+      eventResult: eventResult
+    };
+  };
+
+  var getOptions = function getOptions() {
+    // 所有属性 eventMeta, userProps, eventEnv
+    var attrsList = [],
+        anchors = {}; // 事件属性
+
+    if (showEventProp) {
+      var eventOptions = JSON.parse(JSON.stringify(options && options.event || eventMeta));
+
+      var _formateEvent = formateEvent(eventOptions, eventIds),
+          event = _formateEvent.event,
+          eventResult = _formateEvent.eventResult;
+
+      anchors = _objectSpread({
+        event: event
+      }, anchors);
+      attrsList = attrsList.concat(eventResult);
+    } // 如果展示用户属性
+
+
+    if (showUserProp) {
+      // 添加锚点
+      var attrId = Math.random().toString();
+      var user = {
+        attrId: attrId,
+        name: '用户属性'
+      };
+      var userOptions = JSON.parse(JSON.stringify(options && options.user || userProps)); // 添加属性
+
+      var userList = userOptions.map(function (prop) {
+        prop.name = prop.alias_name || prop.text;
+        prop.value = prop.name;
+        prop.custom = prop.category === 'custom';
+        prop.dimensionId = [prop.dimension_sub, prop.value].join(','); // 增加属性细分唯一字段，区分同名自定义属性
+
+        prop.attrId = Math.random().toString();
+        return prop;
+      });
+      anchors = _objectSpread(_objectSpread({}, anchors), {}, {
+        user: user
+      });
+      attrsList.push(_objectSpread(_objectSpread({}, user), {}, {
+        children: _toConsumableArray(userList)
+      }));
+    } // 如果展示环境属性
+
+
+    if (showEventEnv) {
+      var _attrId = Math.random().toString();
+
+      var env = {
+        attrId: _attrId,
+        name: '触发环境'
+      };
+      var envOptions = JSON.parse(JSON.stringify(options && options.env || eventEnv));
+      var envList = envOptions.map(function (prop) {
+        prop.value = prop.name;
+        prop.name = prop.text;
+        prop.dimensionId = [prop.dimension_sub, prop.value].join(','); // 增加属性细分唯一字段，区分同名自定义属性
+
+        prop.attrId = Math.random().toString();
+        return prop;
+      });
+      anchors = _objectSpread(_objectSpread({}, anchors), {}, {
+        env: env
+      });
+      attrsList.push(_objectSpread(_objectSpread({}, env), {}, {
+        children: _toConsumableArray(envList)
+      }));
+    }
+
+    setAnchorList(anchors);
+    setAttrOptions(function () {
+      return _toConsumableArray(attrsList);
+    });
+    setPrimaryAttrOptions(function () {
+      return _toConsumableArray(attrsList);
+    });
+  };
+
+  useEffect(function () {
+    setListID(function () {
+      var id = Math.random().toString();
+      return "list_".concat(id);
+    });
+    setAllID(function () {
+      var id = Math.random().toString();
+      return "list_".concat(id);
+    }); // 添加点击事件监听，隐藏下拉框
+
+    var handleClick = function handleClick(e) {
+      if (!attrsRef.current || !attrsRef.current.contains(e.target)) {
+        setShowDropdown(false);
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+    return function () {
+      document.removeEventListener('click', handleClick);
+    };
+  }, []);
+  useEffect(function () {
+    var intoValue = defaultValue || value;
+
+    if (intoValue) {
+      var defaultData;
+
+      if (_typeof(intoValue) === 'object') {
+        if (intoValue.attr_id) {
+          defaultData = intoValue.attr_name || '';
+        } else {
+          defaultData = intoValue.name || '';
+        }
+      } else {
+        defaultData = intoValue || '';
+      }
+
+      if (util.equal(defaultAttrValue, defaultData)) return;
+      setDefaultAttrValue(function () {
+        return defaultData || '';
+      });
+    }
+  }, [defaultValue, value]);
+  useEffect(function () {
+    getOptions();
+  }, [eventIds]); // 初始内容
+
+  useEffect(function () {
+    if (defaultAttrValue === '') return;
+
+    var _iterator2 = _createForOfIteratorHelper(primaryAttrOptions),
+        _step2;
+
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var attr = _step2.value;
+
+        var _iterator3 = _createForOfIteratorHelper(attr.children),
+            _step3;
+
+        try {
+          var _loop = function _loop() {
+            var data = _step3.value;
+
+            if (data.value === defaultAttrValue) {
+              setAttrs(function () {
+                return _objectSpread({}, data);
+              });
+              return "break";
+            }
+          };
+
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            var _ret = _loop();
+
+            if (_ret === "break") break;
+          }
+        } catch (err) {
+          _iterator3.e(err);
+        } finally {
+          _iterator3.f();
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+  }, [defaultAttrValue, primaryAttrOptions]); // 初始化搜索框
+
+  useEffect(function () {
+    setSearchValue(function () {
+      return '';
+    });
+  }, [showDropdown]);
+  useEffect(function () {
+    if (!showDropdown) return;
+    var searchOptions = [];
+
+    var _iterator4 = _createForOfIteratorHelper(primaryAttrOptions),
+        _step4;
+
+    try {
+      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+        var attr = _step4.value;
+
+        var _children = attr.children,
+            res = _objectWithoutProperties(attr, _excluded);
+
+        var child = _children.filter(function (item) {
+          return item.name && item.name.indexOf(searchValue) > -1;
+        });
+
+        searchOptions.push(_objectSpread(_objectSpread({}, res), {}, {
+          children: _toConsumableArray(child)
+        }));
+      }
+    } catch (err) {
+      _iterator4.e(err);
+    } finally {
+      _iterator4.f();
+    }
+
+    setAttrOptions(function () {
+      return [].concat(searchOptions);
+    });
+  }, [searchValue, primaryAttrOptions, showDropdown]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "biz-select-cotainer biz-select-hover",
+    ref: attrsRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "biz-select-content",
+    onClick: function onClick() {
+      setShowDropdown(function (status) {
+        return !status;
+      });
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "biz-input ".concat(children && 'biz-bg-gray')
+  }, attrs.name ? attrs.name : /*#__PURE__*/React.createElement("span", {
+    className: "biz-placeholder"
+  }, placeholder)), /*#__PURE__*/React.createElement(IconFont, {
+    className: "biz-select-zhankai",
+    type: 'icon-xiangxia'
+  })), showDeleteIcon && /*#__PURE__*/React.createElement("div", {
+    className: "biz-option-icon biz-option-icon-delete",
+    onClick: onDelete
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: function title() {
+      return '删除';
+    },
+    color: "#242541",
+    key: 'delete'
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    className: "biz-icon-delete",
+    type: 'icon-qingchu'
+  }))), /*#__PURE__*/React.createElement("br", null), children, showDropdown && (attrOptions.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "biz-select-nodata"
+  }, "\u6682\u65E0\u6570\u636E") : /*#__PURE__*/React.createElement("div", {
+    className: "biz-dropdown-container"
+  }, /*#__PURE__*/React.createElement(Input, {
+    className: "biz-search-box",
+    prefix: /*#__PURE__*/React.createElement(IconFont, {
+      className: "biz-icon",
+      type: 'icon-sousuo'
+    }),
+    value: searchValue,
+    allowClear: {
+      clearIcon: /*#__PURE__*/React.createElement(IconFont, {
+        className: "biz-icon",
+        type: 'icon-qingchu'
+      })
+    },
+    placeholder: "\u641C\u7D22\u57CB\u70B9\u4E8B\u4EF6",
+    onChange: function onChange(e) {
+      setSearchValue(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(Anchor, {
+    className: "biz-archon biz-archon-first",
+    affix: false,
+    onClick: function onClick(e) {
+      e.preventDefault();
+    },
+    getContainer: function getContainer() {
+      return document.getElementById(listID) || window;
+    }
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: "#".concat(allID),
+    title: '全部属性'
+  }), anchorList.event && /*#__PURE__*/React.createElement(Link, {
+    href: "#".concat(anchorList.event.attrId),
+    title: anchorList.event.name
+  }), anchorList.user && /*#__PURE__*/React.createElement(Link, {
+    href: "#".concat(anchorList.user.attrId),
+    title: anchorList.user.name
+  }), anchorList.env && /*#__PURE__*/React.createElement(Link, {
+    "data-type": 'event',
+    href: "#".concat(anchorList.env.attrId),
+    title: anchorList.env.name
+  })), /*#__PURE__*/React.createElement("div", {
+    id: listID,
+    className: "biz-select-list-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    id: allID,
+    style: {
+      width: '100%',
+      height: '5px'
+    }
+  }), attrOptions.map(function (item) {
+    var group = /*#__PURE__*/React.createElement("div", {
+      key: item.attrId,
+      id: item.attrId,
+      className: "biz-drop-option biz-drop-menu"
+    }, /*#__PURE__*/React.createElement("span", null, item.name), /*#__PURE__*/React.createElement("div", {
+      className: "biz-menu-split"
+    }));
+    var childList = item.children.map(function (child) {
+      var _item$name;
+
+      return /*#__PURE__*/React.createElement("div", {
+        key: child.attrId,
+        className: "biz-drop-option biz-drop-index boxBg\n                    ".concat(child.value === attrs.value && 'box-active', "\n                    ").concat(child.value && attrs.value !== child.value && disabled.indexOf(child.value) > -1 && 'box-disabled'),
+        onClick: function onClick(e) {
+          e.stopPropagation();
+
+          if (child.value && attrs.value !== child.value && disabled.indexOf(child.value) > -1) {
+            return;
+          }
+
+          setAttrs(function () {
+            return _objectSpread({}, child);
+          });
+          setShowDropdown(false);
+
+          if (onChange) {
+            var data = JSON.parse(JSON.stringify(child));
+            delete data.attrId;
+
+            if (responseType === 'id') {
+              onChange(data.value || '', data, index);
+            } else {
+              onChange(data, data.value || '', index);
+            }
+          }
+        }
+      }, /*#__PURE__*/React.createElement(IconFont, {
+        className: "biz-icon biz-icon-index",
+        type: "".concat(item.name && item.name.indexOf('用户') > -1 ? 'icon-yonghushuxing' : item.name && ((_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.indexOf('事件')) > -1 ? 'icon-shijianshuxing1' : 'icon-chufahuanjing')
+      }), /*#__PURE__*/React.createElement("span", {
+        dangerouslySetInnerHTML: {
+          __html: util.setHighLight(child.name || '', searchValue)
+        }
+      }));
+    });
+    childList.unshift(group);
+    return childList;
+  })))));
+};
+
+export default BizAttributeSelector;