@zgfe/business-lib 1.0.0-beta.6 → 1.0.3

package/es/eventSelector/listPanel.js

@@ -0,0 +1,197 @@
+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 _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 { Skeleton } from 'antd';
+import _ from 'lodash';
+import React, { useContext, useEffect, useState } from 'react';
+import InfiniteScroll from 'react-infinite-scroll-component';
+import { classPrefix } from '.';
+import { BizGlobalDataContext } from '..';
+import BizSearchInput from '../searchInput';
+import EventListOption from './option';
+
+var EventListPanel = function EventListPanel(props) {
+  var showOverview = props.showOverview;
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
+  var _useContext = useContext(BizGlobalDataContext),
+      eventGroupList = _useContext.eventGroupList;
+
+  var _useState3 = useState(eventGroupList),
+      _useState4 = _slicedToArray(_useState3, 2),
+      groupList = _useState4[0],
+      setGroupList = _useState4[1];
+
+  var _useState5 = useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentGroup = _useState6[0],
+      setCurrentGroup = _useState6[1];
+
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      searchEventList = _useState8[0],
+      setSearchEventList = _useState8[1];
+
+  var _useState9 = useState([]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      showList = _useState10[0],
+      setShowList = _useState10[1];
+
+  var _useState11 = useState(),
+      _useState12 = _slicedToArray(_useState11, 2),
+      currentValue = _useState12[0],
+      setCurrentValue = _useState12[1];
+
+  var overviewData = {
+    id: -100,
+    name: '事件概览',
+    attrList: [],
+    isOverview: true
+  };
+  useEffect(function () {
+    var group = {
+      id: 0,
+      eventList: function () {
+        var list = [];
+        eventGroupList === null || eventGroupList === void 0 ? void 0 : eventGroupList.forEach(function (group) {
+          list = list.concat(group.eventList);
+        });
+        return list;
+      }(),
+      name: '所有分组'
+    };
+    setGroupList(function (list) {
+      return [group].concat(_toConsumableArray(list));
+    });
+    setCurrentGroup(group);
+  }, []);
+  useEffect(function () {
+    setCurrentValue(props.value);
+  }, [props.value]);
+  useEffect(function () {
+    var list = [];
+    currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.eventList.forEach(function (event) {
+      if (searchValue && !new RegExp(searchValue, 'i').test(event.alias || event.name)) return;
+      list.push(event);
+    });
+    if (showOverview) list.unshift(overviewData);
+    setSearchEventList(function () {
+      return list;
+    });
+    setShowList(function () {
+      return list.slice(0, 10);
+    });
+  }, [searchValue, currentGroup, showOverview]);
+
+  var loadMoreData = function loadMoreData() {
+    var moreData = searchEventList.slice(showList.length, showList.length + 10);
+    setShowList(function (list) {
+      return [].concat(_toConsumableArray(list), _toConsumableArray(moreData));
+    });
+  };
+
+  function onClickEvent(e) {
+    var resVal = _.cloneDeep(currentValue) || {};
+    resVal.event = e;
+    setCurrentValue(resVal);
+    if (props.onChange) props.onChange(resVal);
+  }
+
+  function onClickGroup(g) {
+    var resVal = _.cloneDeep(currentValue) || {};
+    resVal.group = g;
+    resVal.event = searchEventList[0];
+    setCurrentValue(resVal);
+    if (props.onChange) props.onChange(resVal);
+  }
+
+  function onHoverGroup(g) {
+    setCurrentGroup(g);
+  }
+
+  function onMouseLeaveGroup() {
+    setCurrentGroup(currentValue === null || currentValue === void 0 ? void 0 : currentValue.group);
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-list-panel")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-left")
+  }, groupList === null || groupList === void 0 ? void 0 : groupList.map(function (group) {
+    var _currentValue$group;
+
+    if (!group.eventList.length) return;
+    return /*#__PURE__*/React.createElement(EventListOption, {
+      showCount: true,
+      count: group.eventList.length,
+      label: group.name || '未分组',
+      key: group.id || 'overview',
+      checked: (currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$group = currentValue.group) === null || _currentValue$group === void 0 ? void 0 : _currentValue$group.id) === group.id,
+      data: group,
+      onClick: onClickGroup,
+      onMouseOver: onHoverGroup,
+      onMouseLeave: onMouseLeaveGroup
+    });
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-right")
+  }, /*#__PURE__*/React.createElement(BizSearchInput, {
+    className: "".concat(classPrefix, "-search"),
+    onChange: function onChange(val) {
+      return setSearchValue(val);
+    },
+    placeholder: "\u641C\u7D22\u4E8B\u4EF6"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-list")
+  }, /*#__PURE__*/React.createElement(InfiniteScroll, {
+    dataLength: (showList === null || showList === void 0 ? void 0 : showList.length) || 0,
+    next: loadMoreData,
+    hasMore: (showList === null || showList === void 0 ? void 0 : showList.length) < searchEventList.length,
+    loader: /*#__PURE__*/React.createElement(Skeleton, {
+      paragraph: {
+        rows: 1
+      },
+      active: true
+    }),
+    scrollableTarget: "scrollableDiv"
+  }, showList === null || showList === void 0 ? void 0 : showList.map(function (e) {
+    var _currentValue$event;
+
+    return /*#__PURE__*/React.createElement(EventListOption, {
+      label: e.alias || e.name,
+      key: "".concat(currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.id, "-").concat(e.id),
+      checked: (currentValue === null || currentValue === void 0 ? void 0 : (_currentValue$event = currentValue.event) === null || _currentValue$event === void 0 ? void 0 : _currentValue$event.id) === e.id,
+      highlight: {
+        enable: true,
+        text: searchValue
+      },
+      data: e,
+      onClick: onClickEvent
+    });
+  })))));
+};
+
+EventListPanel.defaultProps = {
+  showOverview: true
+};
+export default EventListPanel;

package/es/eventSelector/option.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare const EventListOption: React.FC<{
+    showCount?: boolean;
+    count?: number;
+    label?: string;
+    checked?: boolean;
+    highlight?: {
+        enable: boolean;
+        text: string;
+        color?: string;
+    };
+    data?: any;
+    onClick?: (data: any) => void;
+    onMouseOver?: (data: any) => void;
+    onMouseLeave?: (data: any) => void;
+}>;
+export default EventListOption;

package/es/eventSelector/option.js

@@ -0,0 +1,54 @@
+import { Badge } from 'antd';
+import React from 'react';
+import { classPrefix } from '.';
+import { util } from '../utils';
+
+var EventListOption = function EventListOption(props) {
+  var showCount = props.showCount,
+      count = props.count,
+      label = props.label,
+      checked = props.checked,
+      highlight = props.highlight,
+      onClick = props.onClick,
+      data = props.data;
+
+  var _onClick = function _onClick() {
+    if (onClick) onClick(data);
+  };
+
+  function onMouseOver() {
+    if (props.onMouseOver) props.onMouseOver(data);
+  }
+
+  function onMouseLeave() {
+    if (props.onMouseLeave) props.onMouseLeave(data);
+  }
+
+  function getLabel(label) {
+    if (!highlight || !highlight.enable || !highlight.text) return label;
+    var text = highlight.text;
+    if (text.length === label.length) return /*#__PURE__*/React.createElement("span", {
+      className: "".concat(classPrefix, "-highlight")
+    }, label);
+    return util.setHighLight(label, highlight.text, function (text, key) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "".concat(classPrefix, "-highlight"),
+        key: key
+      }, text);
+    });
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-option ").concat(checked ? 'active' : ''),
+    onClick: _onClick,
+    onMouseOver: onMouseOver,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-option-label"),
+    title: label
+  }, getLabel(label || '')), showCount && /*#__PURE__*/React.createElement(Badge, {
+    count: count
+  }));
+};
+
+export default EventListOption;

package/es/eventSelector/styles/index.less

@@ -0,0 +1,77 @@
+@import '../../assets/styles/inner.less';
+
+.biz-event-select {
+  &-handle {
+    .__select-handle();
+  }
+
+  &-list-panel {
+    display: flex;
+    flex-direction: row;
+    width: 477px;
+    max-height: 400px;
+    .__select-panel();
+  }
+
+  &-left {
+    flex: none;
+    width: 192px;
+    padding: 8px;
+    overflow-y: auto;
+    border-right: 1px solid @border-color-base;
+  }
+
+  &-right {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: 8px;
+  }
+
+  &-search {
+    flex: none;
+    margin-bottom: @margin-sm;
+    &.ant-input-affix-wrapper {
+      border-radius: @border-radius-normal;
+    }
+  }
+
+  &-list {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  &-option {
+    .__select-option();
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &:hover,
+    &.active {
+      .ant-badge-count {
+        color: #fff;
+        background: @primary-color;
+      }
+    }
+
+    &-label {
+      flex: 1;
+      max-width: 220px;
+      .__default-overflow();
+    }
+
+    .ant-badge {
+      flex: none;
+    }
+
+    .ant-badge-count {
+      color: @text-color;
+      background: none;
+    }
+
+    &:not(.active, :hover) .biz-event-select-highlight {
+      color: @primary-color;
+    }
+  }
+}

package/es/eventSelector/types.d.ts

@@ -0,0 +1,31 @@
+import { AnalysisEvent, EventGroup } from '../attributeSelector/types';
+export declare namespace EventSelectTypes {
+    interface Value {
+        group?: EventGroup;
+        event?: AnalysisEvent;
+    }
+    interface SimpleValue {
+        group?: {
+            id: number;
+        };
+        event?: {
+            id: number;
+            name?: string;
+        };
+    }
+    interface Props {
+        defaultValue?: Value | SimpleValue;
+        value?: Value | SimpleValue;
+        groupId?: number;
+        alias?: string;
+        placeholder?: string;
+        showAllEvent?: boolean;
+        onChange?: (val: Value) => void;
+        onVisibleChange?: (visible: boolean) => void;
+    }
+    interface DropdownProps {
+        value?: Value;
+        showOverview?: boolean;
+        onChange?: (value: Value) => void;
+    }
+}

package/es/eventSelector/types.js

@@ -0,0 +1 @@
+export {};

package/es/index.d.ts

@@ -1,24 +1,27 @@
 /// <reference path="../typings.d.ts" />
-/// <reference types="react" />
 import BizAnalysisLayout from './AnalysisLayout';
 import BizUserGroup from './userGroup';
-import BizUserCluster from './userGroup/userCluster';
 import BizTargetSelector from './targetSelector';
-import BizEventSelector from './eventSelector';
+import BizEventSelector from './eventSelector/index';
 import BizAttributeSelector from './attributeSelector';
-import BizGroupSelect from './attributeSelector/group';
-import BizMultipleSelector from './multipleSelector';
 import BizTargetCondition from './targetConditionGroup';
-import BizTargetConditionGroup from './targetConditionGroup/group';
-import BizConditionGroup from './targetConditionGroup/components/conditionGroup';
+import BizConditionItem from './attrConditions';
+import BizConditionGroup from './attrConditions/group';
 import BizDatePicker from './datePicker';
-import BizGlobalAttributes from './globalAttributes';
 import BizSelect from './select';
 import BizDialog from './dialog';
 import BizChart from './chart';
 import BizTable from './table';
 import IconFont from './components/iconFont';
 import { util, ajax } from './utils';
-import { GlobalContextProps } from './utils/type';
-declare const BizGlobalDataContext: import("react").Context<GlobalContextProps>;
-export { BizSelect, BizDialog, BizChart, BizTable, BizAnalysisLayout, BizUserGroup, BizUserCluster, IconFont, BizTargetSelector, BizEventSelector, BizGroupSelect, BizAttributeSelector, BizGlobalDataContext, BizMultipleSelector, BizTargetCondition, BizTargetConditionGroup, BizDatePicker, BizConditionGroup, BizGlobalAttributes, ajax, util, };
+import theme from './assets/theme';
+import convertAttributeData from './attributeSelector/util';
+import BizGlobalDataContext from './context';
+import BizUserCondition from './userCondition';
+import BizSearchInput from './searchInput';
+export { BizSearchInput, BizSelect, BizDialog, BizChart, BizTable, BizAnalysisLayout, BizUserGroup, IconFont, BizTargetSelector, BizEventSelector, BizAttributeSelector, BizGlobalDataContext, BizTargetCondition, BizDatePicker, BizConditionItem, BizConditionGroup, BizUserCondition, ajax, util, theme, convertAttributeData, };
+export type { UserGroupTypes } from './userGroup/types';
+export type { BizSelectTypes } from './select/types';
+export type { AttributeSelect } from './attributeSelector/types';
+export type { AttrConditionTypes } from './attrConditions/types';
+export type { TargetConditionTypes } from './targetConditionGroup/types';

package/es/index.js

@@ -1,23 +1,21 @@
-/// <reference path="../typings.d.ts" />
 import BizAnalysisLayout from './AnalysisLayout';
 import BizUserGroup from './userGroup';
-import BizUserCluster from './userGroup/userCluster';
 import BizTargetSelector from './targetSelector';
-import BizEventSelector from './eventSelector';
+import BizEventSelector from './eventSelector/index';
 import BizAttributeSelector from './attributeSelector';
-import { createContext } from 'react';
-import BizGroupSelect from './attributeSelector/group';
-import BizMultipleSelector from './multipleSelector';
 import BizTargetCondition from './targetConditionGroup';
-import BizTargetConditionGroup from './targetConditionGroup/group';
-import BizConditionGroup from './targetConditionGroup/components/conditionGroup';
+import BizConditionItem from './attrConditions';
+import BizConditionGroup from './attrConditions/group';
 import BizDatePicker from './datePicker';
-import BizGlobalAttributes from './globalAttributes';
 import BizSelect from './select';
 import BizDialog from './dialog';
 import BizChart from './chart';
 import BizTable from './table';
 import IconFont from './components/iconFont';
 import { util, ajax } from './utils';
-var BizGlobalDataContext = /*#__PURE__*/createContext({});
-export { BizSelect, BizDialog, BizChart, BizTable, BizAnalysisLayout, BizUserGroup, BizUserCluster, IconFont, BizTargetSelector, BizEventSelector, BizGroupSelect, BizAttributeSelector, BizGlobalDataContext, BizMultipleSelector, BizTargetCondition, BizTargetConditionGroup, BizDatePicker, BizConditionGroup, BizGlobalAttributes, ajax, util };
+import theme from './assets/theme';
+import convertAttributeData from './attributeSelector/util';
+import BizGlobalDataContext from './context';
+import BizUserCondition from './userCondition';
+import BizSearchInput from './searchInput';
+export { BizSearchInput, BizSelect, BizDialog, BizChart, BizTable, BizAnalysisLayout, BizUserGroup, IconFont, BizTargetSelector, BizEventSelector, BizAttributeSelector, BizGlobalDataContext, BizTargetCondition, BizDatePicker, BizConditionItem, BizConditionGroup, BizUserCondition, ajax, util, theme, convertAttributeData };

package/es/searchInput/demo/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BizSearchInput } from '@zgfe/business-lib';
+export default (function () {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BizSearchInput, null));
+});

package/es/searchInput/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const BizSearchInput: React.FC<{
+    value?: string;
+    className?: string;
+    onChange?: (val: string) => void;
+    placeholder?: string;
+}>;
+export default BizSearchInput;

package/es/searchInput/index.js

@@ -0,0 +1,31 @@
+import { Input } from 'antd';
+import React from 'react';
+import { IconFont } from '..';
+
+var BizSearchInput = function BizSearchInput(props) {
+  var value = props.value,
+      placeholder = props.placeholder,
+      className = props.className;
+
+  function onChange(e) {
+    if (props.onChange) props.onChange(e.target.value);
+  }
+
+  return /*#__PURE__*/React.createElement(Input, {
+    className: className,
+    value: value,
+    prefix: /*#__PURE__*/React.createElement(IconFont, {
+      type: 'icon-sousuo'
+    }),
+    allowClear: {
+      clearIcon: /*#__PURE__*/React.createElement(IconFont, {
+        type: 'icon-qingchu'
+      })
+    },
+    placeholder: placeholder || '请输入',
+    autoFocus: true,
+    onChange: onChange
+  });
+};
+
+export default BizSearchInput;

package/es/{globalAttributes/demo/index.js → select/demo/group.js}

@@ -11,40 +11,58 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useState } from 'react';
-import { BizGlobalAttributes } from '@zgfe/business-lib';
-import eventData from './data/event';
-import envData from './data/env';
-import userData from './data/user';
-var attrsData = {
-  operator: 'and',
-  attrs: [{
-    attrId: 5461056,
-    attrName: '支付方式',
-    operator: 'equal',
-    params: ['白条'],
-    attrType: 'cont-string',
-    category: 'custom'
-  }]
-};
-var attrOption = {
-  event: eventData,
-  user: userData,
-  env: envData
-};
+import { BizSelect, IconFont } from '@zgfe/business-lib';
+import { Button } from 'antd';
+var option = Array(10).fill(1).map(function (group, i) {
+  return {
+    name: "\u5206\u7EC4".concat(i),
+    children: [{
+      value: i * 10 + i,
+      name: "option".concat(i * 10 + i).concat(group),
+      icon: /*#__PURE__*/React.createElement(IconFont, {
+        type: "icon-shijianshuxing1"
+      })
+    }, {
+      value: i * 10 + i + 1,
+      name: "option".concat(i * 10 + i + 1),
+      icon: /*#__PURE__*/React.createElement(IconFont, {
+        type: "icon-shijianshuxing1"
+      })
+    }]
+  };
+});
 export default (function () {
-  var _useState = useState(),
+  var _useState = useState({
+    value: 11,
+    name: 'option1'
+  }),
       _useState2 = _slicedToArray(_useState, 2),
-      globalAttrs = _useState2[0],
-      setGlobalAttrs = _useState2[1];
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var onChange = function onChange(data) {
+    setValue(data);
+  };
 
-  var handleChange = function handleChange(data) {
-    setGlobalAttrs(function () {
-      return JSON.stringify(data);
-    });
+  var handleClick = function handleClick(value) {
+    console.log('clik>>', value);
   };
 
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BizGlobalAttributes, {
-    options: attrOption,
-    onChange: handleChange
-  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, "\u5168\u5C40\u5C5E\u6027\uFF1A ", globalAttrs));
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BizSelect, {
+    options: option,
+    type: "group",
+    value: value,
+    overlayWidth: 284,
+    labelField: "name",
+    keyField: "value",
+    enableSearch: true,
+    onChange: onChange,
+    extra: function extra(data) {
+      return /*#__PURE__*/React.createElement(Button, {
+        onClick: function onClick() {
+          return handleClick(data);
+        }
+      }, "del");
+    }
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "\u5DF2\u9009\u62E9\uFF1A ", JSON.stringify(value)));
 });