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

package/es/targetSelector/demo/index.js

@@ -11,67 +11,33 @@ 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 { BizTargetSelector, BizEventSelector } from '@zgfe/business-lib';
-var cascadeOptions = [{
-  value: 1,
-  label: '整体',
-  children: [{
-    value: 'xihu',
-    label: 'West Lake'
-  }, {
-    value: 'xiasha',
-    label: 'Xia Sha'
-  }]
-}, {
-  value: 2,
-  label: '分组',
-  children: [{
-    value: 'xihu2',
-    label: 'West Lake2'
-  }, {
-    value: 'xiasha2',
-    label: 'Xia Sha2j'
-  }, {
-    value: 'xihu21',
-    label: 'West Lake2h'
-  }, {
-    value: 'xiasha21',
-    label: 'Xia Sha2'
-  }, {
-    value: 'xihu22',
-    label: 'West Lake2m'
-  }, {
-    value: 'xiasha22',
-    label: 'Xia Sha2n'
-  }, {
-    value: 'xihu27',
-    label: 'West Lake2b'
-  }, {
-    value: 'xiasha82',
-    label: 'Xia Sha2v'
-  }, {
-    value: 'xihu23',
-    label: 'West Lake2c'
-  }, {
-    value: 'xiasha23',
-    label: 'Xia Sha2z'
-  }, {
-    value: 'xihu24',
-    label: 'West Lake22x'
-  }, {
-    value: 'xiasha24',
-    label: 'Xia Sha2a'
-  }]
-}];
+import { BizTargetSelector, BizEventSelector, convertAttributeData, BizGlobalDataContext } from '@zgfe/business-lib';
+import eventData from '../../mock/event';
+import '@zgfe/business-lib/es/assets/styles/resetAntd.less';
 
 var EventDemo = function EventDemo() {
-  var _useState = useState({}),
+  var store = convertAttributeData({
+    eventList: eventData
+  });
+
+  var _useState = useState({
+    alias: '别名',
+    value: {
+      group: {
+        id: 4199
+      },
+      event: {
+        id: 24220583,
+        name: '菜单导航'
+      }
+    }
+  }),
       _useState2 = _slicedToArray(_useState, 2),
-      test = _useState2[0],
-      setTest = _useState2[1];
+      value = _useState2[0],
+      setValue = _useState2[1];
 
   var handleChange = function handleChange(value) {
-    setTest(value);
+    setValue(value);
   };
 
   var handleAdd = function handleAdd(data) {
@@ -82,24 +48,16 @@ var EventDemo = function EventDemo() {
     console.log('delete', data);
   };
 
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BizTargetSelector, {
-    defaultValue: {
-      alias: '别名',
-      option: 'xiasha2'
-    },
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BizGlobalDataContext.Provider, {
+    value: {
+      eventGroupList: store.eventGroupList
+    }
+  }, /*#__PURE__*/React.createElement(BizTargetSelector, {
+    defaultValue: value,
     onChange: handleChange,
     onAdd: handleAdd,
     onDelete: handleDelete
-  }, /*#__PURE__*/React.createElement(BizEventSelector, {
-    fieldNames: {
-      label: 'label',
-      value: 'value',
-      groupLabel: 'label',
-      groupValue: 'value',
-      children: 'children'
-    },
-    options: cascadeOptions
-  })), /*#__PURE__*/React.createElement("p", null, "\u5F53\u524D\u9009\u62E9\u7684\u6307\u6807\u4FE1\u606F\u662F\uFF1A", JSON.stringify(test)));
+  }, /*#__PURE__*/React.createElement(BizEventSelector, null))), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "\u5F53\u524D\u9009\u62E9\u7684\u6307\u6807\u4FE1\u606F\u662F\uFF1A", JSON.stringify(value)));
 };
 
 export default (function () {

package/es/targetSelector/editBox.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const BizEventNameEditBox: React.FC<{
+    defaultValue?: string;
+    disabled?: string;
+    onCancel: () => void;
+    onChange: (alias: string) => void;
+}>;
+export default BizEventNameEditBox;

package/es/targetSelector/{components/BizEventNameEditBox.js → editBox.js}

@@ -10,16 +10,15 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import { Input } from 'antd';
-import React, { useEffect, useRef, useState } from 'react';
+import { Button, Input, message } from 'antd';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { classPrefix } from '.';
+import IconFont from '../components/iconFont';
 
 var BizEventNameEditBox = function BizEventNameEditBox(props) {
-  var defaultValue = props.defaultValue,
-      onCancel = props.onCancel,
-      onChange = props.onChange;
   var inputRef = useRef(null);
 
-  var _useState = useState(defaultValue || ''),
+  var _useState = useState(props.defaultValue || ''),
       _useState2 = _slicedToArray(_useState, 2),
       alias = _useState2[0],
       setAlias = _useState2[1];
@@ -29,29 +28,55 @@ var BizEventNameEditBox = function BizEventNameEditBox(props) {
       cursor: 'end'
     });
   }, []);
+  var aliasStatus = useMemo(function () {
+    var reg = new RegExp("^[0-9A-Za-z\u4E00-\u9FA5]+$");
+    return reg.test(alias) || alias === '';
+  }, [alias]);
+
+  var onClick = function onClick() {
+    if (aliasStatus) {
+      if (props.disabled && props.disabled === alias) {
+        message.error('不能与事件名相同!');
+        return;
+      }
+
+      props.onChange && props.onChange(alias);
+    }
+  };
+
+  var onCancel = function onCancel() {
+    props.onCancel && props.onCancel();
+  };
+
+  var onChange = function onChange(e) {
+    setAlias(e.target.value);
+  };
+
   return /*#__PURE__*/React.createElement("div", {
-    className: "biz-edit-pop-modal"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "biz-search active"
+    className: "".concat(classPrefix, "-modal")
   }, /*#__PURE__*/React.createElement(Input, {
-    className: "biz-search-box",
     placeholder: "\u8F93\u5165\u522B\u540D",
     ref: inputRef,
     value: alias,
-    onChange: function onChange(e) {
-      setAlias(e.target.value);
-    }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "biz-modal-footer"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "biz-btn biz-btn-primary",
-    onClick: function onClick() {
-      onChange(alias);
-    }
-  }, "\u786E\u5B9A"), /*#__PURE__*/React.createElement("div", {
-    className: "biz-btn biz-btn-text",
-    onClick: onCancel
-  }, "\u53D6\u6D88")));
+    maxLength: 15,
+    allowClear: {
+      clearIcon: /*#__PURE__*/React.createElement(IconFont, {
+        className: "biz-icon",
+        type: 'icon-qingchu'
+      })
+    },
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-tip ").concat(!aliasStatus ? classPrefix + '-error' : '')
+  }, "\u8BF7\u8F93\u5165\u6570\u5B57\u3001\u5B57\u6BCD\u6216\u6C49\u5B57"), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-footer")
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: onCancel,
+    type: "text"
+  }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+    onClick: onClick,
+    type: "primary"
+  }, "\u786E\u5B9A")));
 };
 
 export default BizEventNameEditBox;

package/es/targetSelector/index.d.ts

@@ -1,56 +1,6 @@
-import React, { ReactNode } from 'react';
-import './index.less';
-interface ValueType {
-    alias?: string;
-    option?: object | string | number;
-    showAll?: boolean;
-}
-interface EventBoxProps {
-    /**
-     * @description     默认的选中项
-     * @default         -
-     */
-    defaultValue?: ValueType;
-    /**
-     * @description     指定选中项
-     * @default         -
-     */
-    value?: ValueType;
-    /**
-     * @description     内嵌组件
-     * @default         -
-     */
-    children?: ReactNode;
-    /**
-     * @describe 是否禁止筛选
-     * @default false
-     */
-    addDisable?: boolean;
-    /**
-     * @describe 是否禁止删除
-     * @default false
-     */
-    delDisable?: boolean;
-    /**
-     * @description 是否展示事件概览
-     * @default   true
-     */
-    showOverview?: boolean;
-    /**
-     * @description     添加筛选的回调
-     * @default         -
-     */
-    onAdd?: (value: string | number | object) => void;
-    /**
-     * @description     删除的回调
-     * @default         -
-     */
-    onDelete?: () => void;
-    /**
-     * @description     选择完成后的回调
-     * @default         -
-     */
-    onChange: (data: ValueType) => void;
-}
-declare const BizTargetSelector: React.FC<EventBoxProps>;
+import React from 'react';
+import './styles/index.less';
+import { TargetSelectTypes } from './types';
+export declare const classPrefix = "biz-target-select";
+declare const BizTargetSelector: React.FC<TargetSelectTypes.Props>;
 export default BizTargetSelector;

package/es/targetSelector/index.js

@@ -1,11 +1,3 @@
-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 _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 _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."); }
@@ -18,232 +10,129 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useEffect, useRef, useState } from 'react';
-import BizEventNameEditBox from './components/BizEventNameEditBox';
-import IconFont from '../components/iconFont';
-import { Dropdown, Menu, Tooltip } from 'antd';
-import './index.less';
+import React, { useEffect, useState } from 'react';
+import BizEventNameEditBox from './editBox';
+import { Dropdown } from 'antd';
+import './styles/index.less';
+import BizTargetOptionIcon from './optionIcon';
+import BizTargetOptionMenu from './optionMenu';
+export var classPrefix = 'biz-target-select';
 
 var BizTargetSelector = function BizTargetSelector(props) {
-  var _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? {} : _props$defaultValue,
-      _props$value = props.value,
-      value = _props$value === void 0 ? {} : _props$value,
-      _onChange = props.onChange,
-      onAdd = props.onAdd,
-      onDelete = props.onDelete,
-      _props$showOverview = props.showOverview,
-      showOverview = _props$showOverview === void 0 ? true : _props$showOverview,
-      children = props.children,
-      _props$addDisable = props.addDisable,
-      addDisable = _props$addDisable === void 0 ? false : _props$addDisable,
-      _props$delDisable = props.delDisable,
-      delDisable = _props$delDisable === void 0 ? false : _props$delDisable;
-
-  var _useState = useState(false),
+  var _targetData$event;
+
+  var enableAdd = props.enableAdd,
+      enableDelete = props.enableDelete;
+
+  var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
-      showEditModal = _useState2[0],
-      setShowEditModal = _useState2[1];
+      alias = _useState2[0],
+      setAlias = _useState2[1];
 
   var _useState3 = useState(),
       _useState4 = _slicedToArray(_useState3, 2),
-      defaultData = _useState4[0],
-      setDefaultData = _useState4[1];
+      targetData = _useState4[0],
+      setTargetData = _useState4[1];
 
-  var _useState5 = useState(''),
+  var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      alias = _useState6[0],
-      setAlias = _useState6[1];
-
-  var _useState7 = useState(showOverview),
-      _useState8 = _slicedToArray(_useState7, 2),
-      showAll = _useState8[0],
-      setShowAll = _useState8[1];
-
-  var editModalRef = useRef(null);
-  var editMenuRef = useRef(null); // 禁止删除，禁止筛选
-
-  var _useState9 = useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      noAdd = _useState10[0],
-      setNoAdd = _useState10[1];
-
-  var _useState11 = useState(false),
-      _useState12 = _slicedToArray(_useState11, 2),
-      noDelete = _useState12[0],
-      setNoDelete = _useState12[1]; // 更多操作
-
-
-  var menu = /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.Item, {
-    key: "1"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "biz-menu-item-edit",
-    ref: editMenuRef,
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-      setShowEditModal(true);
-    }
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    className: "ant-dropdown-menu-item-icon",
-    type: 'icon-bianji'
-  }), "\u7F16\u8F91\u522B\u540D")), /*#__PURE__*/React.createElement(Menu.Divider, null), /*#__PURE__*/React.createElement(Menu.Item, {
-    key: "2",
-    disabled: noAdd,
-    onClick: function onClick() {
-      return _onAdd();
-    },
-    icon: /*#__PURE__*/React.createElement(IconFont, {
-      className: "",
-      type: 'icon-shaixuan'
-    })
-  }, "\u6DFB\u52A0\u7B5B\u9009"), /*#__PURE__*/React.createElement(Menu.Item, {
-    key: "3",
-    disabled: noDelete,
-    onClick: function onClick() {
-      return _onDelete();
-    },
-    icon: /*#__PURE__*/React.createElement(IconFont, {
-      className: "",
-      type: 'icon-shanchu'
-    })
-  }, "\u5220\u9664\u6307\u6807"));
-
-  var _onAdd = function _onAdd() {
-    if (!defaultData) return;
-    onAdd && onAdd(defaultData);
-  };
-
-  var _onDelete = function _onDelete() {
-    onDelete && onDelete();
-  }; // 初始化
-
+      showEditModal = _useState6[0],
+      setShowEditModal = _useState6[1];
 
   useEffect(function () {
-    var handleClick = function handleClick(e) {
-      if (!editModalRef.current || !editModalRef.current.contains(e.target)) {
-        setShowEditModal(false);
-      }
-    };
-
-    document.addEventListener('click', handleClick, false);
-    return function () {
-      document.removeEventListener('click', handleClick, false);
-    };
+    if (!props.defaultValue) return;
+    setAlias(props.defaultValue.alias || '');
+    setTargetData(props.defaultValue.value);
   }, []);
   useEffect(function () {
-    setShowAll(function () {
-      return showOverview;
-    });
-  }, [showOverview]);
-  useEffect(function () {
-    var inValue = defaultValue.option || value.option;
-    var inAlias = defaultValue.alias || value.alias;
-
-    if (JSON.stringify(inValue) !== JSON.stringify(defaultData)) {
-      setDefaultData(function () {
-        if (_typeof(inValue) === 'object') {
-          return _objectSpread({}, inValue);
-        } else {
-          return inValue;
-        }
-      });
-    }
+    if (!props.value) return;
+    setAlias(props.value.alias || '');
+    setTargetData(props.value.value || undefined);
+  }, [props.value]);
 
-    if (inAlias !== alias) {
-      setAlias(function () {
-        return inAlias || '';
-      });
+  var onClickIcon = function onClickIcon(name) {
+    if (name === 'edit') {
+      setShowEditModal(true);
+    } else if (name === 'add') {
+      if (props.onAdd && enableAdd) {
+        props.onAdd({
+          alias: alias,
+          value: targetData
+        });
+      }
+    } else if (name === 'delete') {
+      if (props.onDelete && enableDelete) {
+        props.onDelete({
+          alias: alias,
+          value: targetData
+        });
+      }
     }
-  }, [defaultValue, value]);
-  useEffect(function () {
-    setNoAdd(function () {
-      return addDisable;
+  };
+
+  var onCancelEdit = function onCancelEdit() {
+    setShowEditModal(false);
+  };
+
+  var onChangeAlias = function onChangeAlias(value) {
+    setShowEditModal(false);
+    setAlias(value);
+    props.onChange && props.onChange({
+      alias: value,
+      value: targetData
     });
-  }, [addDisable]);
-  useEffect(function () {
-    setNoDelete(function () {
-      return delDisable;
+  };
+
+  var onChange = function onChange(value) {
+    setTargetData(value);
+    props.onChange && props.onChange({
+      alias: alias,
+      value: value
     });
-  }, [delDisable]);
+  };
+
   return /*#__PURE__*/React.createElement("div", {
-    className: "biz-select-cotainer biz-target-container",
-    tabIndex: 0
-  }, /*#__PURE__*/React.cloneElement(children, {
-    aliasName: alias,
-    defaultValue: defaultData,
-    showAll: showAll,
-    onChange: function onChange(data) {
-      _onChange && _onChange({
-        alias: alias,
-        option: data
-      });
-    }
+    className: classPrefix
+  }, /*#__PURE__*/React.cloneElement(props.children, {
+    alias: alias,
+    value: targetData,
+    onChange: onChange
   }), /*#__PURE__*/React.createElement("div", {
-    className: "biz-options"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "biz-option-icon ".concat(noAdd ? 'biz-disabled' : ''),
-    onClick: function onClick() {
-      if (!noAdd) {
-        _onAdd();
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: function title() {
-      return '添加筛选';
-    },
-    color: "#242541",
-    key: 'delete'
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    className: "",
-    type: 'icon-shaixuan'
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "biz-option-icon biz-option-icon-delete ".concat(noDelete ? 'biz-disabled' : ''),
-    onClick: function onClick() {
-      return !noDelete && _onDelete();
-    }
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: function title() {
-      return '删除';
-    },
-    color: "#242541",
-    key: 'delete'
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    className: "",
-    type: 'icon-qingchu'
-  }))), defaultData && /*#__PURE__*/React.createElement(Dropdown, {
-    overlay: menu,
-    overlayClassName: "large",
+    className: "".concat(classPrefix, "-option-list")
+  }, /*#__PURE__*/React.createElement(BizTargetOptionIcon, {
+    name: "add",
+    icon: "icon-shaixuan",
+    title: "\u6DFB\u52A0\u7B5B\u9009",
+    enabled: enableAdd,
+    onClick: onClickIcon
+  }), /*#__PURE__*/React.createElement(BizTargetOptionIcon, {
+    name: "delete",
+    icon: "icon-qingchu",
+    title: "\u5220\u9664",
+    enabled: enableDelete,
+    onClick: onClickIcon
+  }), targetData && /*#__PURE__*/React.createElement(Dropdown, {
+    overlay: /*#__PURE__*/React.createElement(BizTargetOptionMenu, {
+      onClick: onClickIcon,
+      enableAdd: enableAdd,
+      enableDelete: enableDelete
+    }),
     trigger: ['click']
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "biz-option-icon"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: function title() {
-      return '编辑别名、筛选、删除';
-    },
-    color: "#242541",
-    key: 'delete'
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: 'icon-gengduocaozuo1'
-  }))))), showEditModal && /*#__PURE__*/React.createElement("div", {
-    className: "biz-edit-modal",
-    ref: editModalRef
-  }, /*#__PURE__*/React.createElement(BizEventNameEditBox, {
+  }, /*#__PURE__*/React.createElement(BizTargetOptionIcon, {
+    name: "more",
+    icon: "icon-gengduocaozuo1",
+    title: "\u7F16\u8F91\u522B\u540D\u3001\u7B5B\u9009\u3001\u5220\u9664",
+    enabled: true
+  }))), showEditModal && /*#__PURE__*/React.createElement(BizEventNameEditBox, {
     defaultValue: alias,
-    onCancel: function onCancel() {
-      return setShowEditModal(false);
-    },
-    onChange: function onChange(value) {
-      setAlias(function () {
-        return value;
-      });
-      setShowEditModal(false);
-      _onChange && _onChange({
-        alias: value,
-        option: defaultData
-      });
-    }
-  })));
+    disabled: targetData === null || targetData === void 0 ? void 0 : (_targetData$event = targetData.event) === null || _targetData$event === void 0 ? void 0 : _targetData$event.name,
+    onCancel: onCancelEdit,
+    onChange: onChangeAlias
+  }));
 };
 
+BizTargetSelector.defaultProps = {
+  enableAdd: true,
+  enableDelete: true
+};
 export default BizTargetSelector;

package/es/targetSelector/optionIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const BizTargetOptionIcon: React.FC<{
+    enabled?: boolean;
+    title?: string;
+    name: string;
+    icon: string;
+    onClick?: (name: string) => void;
+}>;
+export default BizTargetOptionIcon;

package/es/targetSelector/optionIcon.js

@@ -0,0 +1,24 @@
+import { Tooltip } from 'antd';
+import React from 'react';
+import { classPrefix } from '.';
+import IconFont from '../components/iconFont';
+
+var BizTargetOptionIcon = function BizTargetOptionIcon(props) {
+  var enabled = props.enabled,
+      title = props.title;
+
+  var onClick = function onClick() {
+    if (props.onClick && enabled) props.onClick(props.name);
+  };
+
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: title,
+    key: props.name
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    className: "".concat(classPrefix, "-option-icon ").concat(enabled ? '' : 'disabled', " ").concat(props.name === 'delete' ? classPrefix + '-del-icon' : ''),
+    type: props.icon,
+    onClick: onClick
+  }));
+};
+
+export default BizTargetOptionIcon;