@zgfe/modules-attribution 1.0.1-alpha.1 → 1.0.1-alpha.13

package/es/modules/home/demo/edit.js

@@ -11,144 +11,127 @@ import { requestConfig } from '../../../utils/ajaxConfig';
 import { Button } from 'antd';
 var defaultValue = {
   id: 1426,
-  name: '洞察',
+  name: '999',
   type: 0,
   enlarged: 0,
   panelId: 438,
   panelType: 'edit',
   data: {
-    appId: 1,
-    platform: 0,
-    windowType: 'day',
-    windowCnt: 1,
-    attributionType: 1,
-    otherEvent: 0,
-    time: {
-      unit: 'day',
-      relative: [7, 0],
-      begin: '2023-05-11',
-      end: '2023-05-18'
-    },
-    targetFilters: {
-      eventId: 35,
-      eventName: '目标事件名称',
-      indexType: 0,
-      filters: {
-        relation: 'and',
-        conditions: [{
-          attrId: 263,
-          propCategory: 'eventProp',
-          type: 1,
-          operator: 'equal',
-          values: ['事件属性1', '事件属性2'],
-          dimensionSub: 'event_attr',
-          label: '机身宽度',
-          attrName: '机身宽度'
-        }, {
-          attrId: 3,
-          propCategory: 'userProp',
-          type: 1,
-          operator: 'equal',
-          values: ['用户属性【名称1】', '用户属性【名称2】'],
-          dimensionSub: 'name',
-          label: '名称',
-          attrName: 'name',
-          category: 'fixed'
+    "app_id": 21,
+    "module": "attribution",
+    "targetFilters": {
+      "eventId": 6078,
+      "eventName": "埋点事件-11",
+      "filters": {
+        "relation": "and",
+        "conditions": [{
+          "attrId": 139498,
+          "propCategory": "eventProp",
+          "type": 2,
+          "operator": "gt",
+          "values": ["99"],
+          "dimensionSub": "event_attr",
+          "label": "商品总价",
+          "attrName": "商品总价"
         }, {
-          attrId: 0,
-          propCategory: 'envProp',
-          type: 1,
-          operator: 'equal',
-          values: ['触发环境1', '触发环境2'],
-          dimensionSub: 'utm_source',
-          label: 'utm_source',
-          attrName: 'utm_source',
-          category: 'fixed'
+          "attrId": 139372,
+          "propCategory": "eventProp",
+          "type": 1,
+          "operator": "equal",
+          "values": ["12"],
+          "dimensionSub": "event_attr",
+          "label": "机身宽度",
+          "attrName": "机身宽度"
         }]
       }
     },
-    sourceFilters: [{
-      eventId: 19,
-      eventName: '埋点事件-12',
-      propFilters: {
-        relation: 'and',
-        conditions: [{
-          propCategory: 'envProp',
-          type: 1,
-          attrId: 3,
-          attrName: 'name',
-          category: 'fixed'
+    "sourceFilters": [{
+      "eventId": 6090,
+      "eventName": "间隔事件-01",
+      "filters": {
+        "relation": "and",
+        "conditions": [{
+          "attrId": 139498,
+          "propCategory": "eventProp",
+          "type": 2,
+          "operator": "gt",
+          "values": ["11"],
+          "dimensionSub": "event_attr",
+          "label": "商品总价",
+          "attrName": "商品总价"
+        }, {
+          "attrId": 139488,
+          "propCategory": "eventProp",
+          "type": 2,
+          "operator": "gt",
+          "values": ["77"],
+          "dimensionSub": "event_attr",
+          "label": "商品单价",
+          "attrName": "商品单价"
         }]
       },
-      filters: {
-        relation: 'and',
-        conditions: [{
-          attrId: 263,
-          propCategory: 'eventProp',
-          type: 1,
-          operator: 'equal',
-          values: ['事件属性1', '事件属性2'],
-          dimensionSub: 'event_attr',
-          label: '机身宽度',
-          attrName: '机身宽度'
-        }, {
-          attrId: 3,
-          propCategory: 'userProp',
-          type: 1,
-          operator: 'equal',
-          values: ['用户属性【名称1】', '用户属性【名称2】'],
-          dimensionSub: 'name',
-          label: '名称',
-          attrName: 'name',
-          category: 'fixed'
+      "propfilters": {
+        "propCategory": "eventProp",
+        "type": 1,
+        "attrId": 139499
+      }
+    }, {
+      "eventId": 6088,
+      "eventName": "间隔事件-02",
+      "filters": {
+        "relation": "and",
+        "conditions": [{
+          "attrId": 139494,
+          "propCategory": "eventProp",
+          "type": 2,
+          "operator": "gt",
+          "values": ["22"],
+          "dimensionSub": "event_attr",
+          "label": "商品总价",
+          "attrName": "商品总价"
         }, {
-          attrId: 0,
-          propCategory: 'envProp',
-          type: 1,
-          operator: 'equal',
-          values: ['触发环境1', '触发环境2'],
-          dimensionSub: 'utm_source',
-          label: 'utm_source',
-          attrName: 'utm_source',
-          category: 'fixed'
+          "attrId": 139493,
+          "propCategory": "eventProp",
+          "type": 2,
+          "operator": "gt",
+          "values": ["33"],
+          "dimensionSub": "event_attr",
+          "label": "商品单价",
+          "attrName": "商品单价"
         }]
+      },
+      "propfilters": {
+        "propCategory": "eventProp",
+        "type": 1,
+        "attrId": 139490
       }
     }],
-    globalFilters: {
-      relation: 'and',
-      conditions: [{
-        attrId: 263,
-        propCategory: 'eventProp',
-        type: 1,
-        operator: 'equal',
-        values: ['事件属性1', '事件属性2'],
-        dimensionSub: 'event_attr',
-        label: '机身宽度',
-        attrName: '机身宽度'
-      }, {
-        attrId: 3,
-        propCategory: 'userProp',
-        type: 1,
-        operator: 'equal',
-        values: ['用户属性【名称1】', '用户属性【名称2】'],
-        dimensionSub: 'name',
-        label: '名称',
-        attrName: 'name',
-        category: 'fixed'
-      }, {
-        attrId: 0,
-        propCategory: 'envProp',
-        type: 1,
-        operator: 'equal',
-        values: ['触发环境1', '触发环境2'],
-        dimensionSub: 'utm_source',
-        label: 'utm_source',
-        attrName: 'utm_source',
-        category: 'fixed'
+    "globalFilters": {
+      "relation": "and",
+      "conditions": [{
+        "attrId": 139300,
+        "propCategory": "eventProp",
+        "type": 2,
+        "operator": "gt",
+        "values": ["87"],
+        "dimensionSub": "event_attr",
+        "label": "商品价格",
+        "attrName": "商品价格"
       }]
-    }
+    },
+    "attributionType": 3,
+    "otherEvent": true,
+    "windowCnt": 2,
+    "windowType": "hour",
+    "time": {
+      "unit": "day",
+      "relative": [14, 0],
+      "begin": "2023-05-17",
+      "end": "2023-05-31"
+    },
+    "chartType": "grid"
   },
-  chosen_data: ['所有用户,崩溃（人数）', '所有用户,查看商品（人数）', '所有用户,访问次数', '所有用户,购买商品（人数）', '所有用户,活跃用户', '所有用户,加购商品（人数）', '所有用户,平均使用时长（s）', '所有用户,评价商品（人数）', '所有用户,使用时长分布（访问次数）', '所有用户,使用时长分布（活跃用户）']
+  chosen_data: []
 };
 export default (function () {
   var _useState = useState(false),
@@ -177,7 +160,7 @@ export default (function () {
   };
   return /*#__PURE__*/React.createElement(DemoWrapper, {
     needMeta: true,
-    defaultApp: 3
+    defaultApp: 21
   }, isDetail ? /*#__PURE__*/React.createElement("div", null, JSON.stringify(detailParams), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
       return setIsDetail(false);

package/es/modules/home/demo/index.js

@@ -37,7 +37,7 @@ export default (function () {
   };
   return /*#__PURE__*/React.createElement(DemoWrapper, {
     needMeta: true,
-    defaultApp: 3
+    defaultApp: 21
   }, isDetail ? /*#__PURE__*/React.createElement("div", null, JSON.stringify(detailParams), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
       return setIsDetail(false);

package/es/modules/home/demo/scene.js

@@ -61,7 +61,7 @@ export default (function () {
   };
   return /*#__PURE__*/React.createElement(DemoWrapper, {
     needMeta: true,
-    defaultApp: 3
+    defaultApp: 21
   }, isDetail ? /*#__PURE__*/React.createElement("div", null, JSON.stringify(detailParams), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {
       return setIsDetail(false);

package/es/modules/home/index.js

@@ -7,22 +7,17 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Spin } from 'antd';
-import { BizGlobalDataContext } from '@zgfe/business-lib';
 import './styles/index.less';
 import { AttributableContext } from '../../types';
 import EditTitle from '../../components/title';
 import { getInitDate, initTarget } from '../../constants/initData';
-import { transferEventSearchData } from '../../utils/transfer';
 import InsightContent from '../content';
 var classPrefix = 'attribution-container';
 var AttributionHome = function AttributionHome(props) {
   var _props$defaultValue;
-  var _useContext = useContext(BizGlobalDataContext),
-    userPropList = _useContext.userPropList,
-    eventGroupList = _useContext.eventGroupList,
-    eventEnvList = _useContext.eventEnvList;
+  console.log('AttributionHome-props: ', props);
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     searchData = _useState2[0],
@@ -68,16 +63,9 @@ var AttributionHome = function AttributionHome(props) {
       if (!initData) {
         initSearch();
       } else {
-        if (initData.module && initData.module !== 'attribution') {
-          initData = transferEventSearchData(initData, userPropList, eventGroupList, eventEnvList);
-        }
-        if (!initData.userGroup || !initData.targets) {
-          setSearchData(function (data) {
-            return _objectSpread(_objectSpread({}, data), initData);
-          });
-        } else {
-          setSearchData(_objectSpread({}, initData));
-        }
+        setSearchData(_objectSpread(_objectSpread({}, initData), {}, {
+          targetFilters: [initData.targetFilters]
+        }));
       }
     }
     setTimeout(function () {

package/es/modules/searchPanel/components/attributableEvents.js

@@ -8,12 +8,16 @@ import React, { useEffect, useRef, useState, useContext } from 'react';
 import { BizAttributeSelector, BizAttrConditionGroup, BizEventSelector, IconFont } from '@zgfe/business-lib';
 import { AttributableContext } from '../../../types';
 import _ from 'lodash';
-import { Tooltip } from 'antd';
+import { Tooltip, message } from 'antd';
 var AttributableEvents = function AttributableEvents(props) {
   var value = props.value,
-    verify = props.verify,
+    setMincePropCount = props.setMincePropCount,
+    mincePropCount = props.mincePropCount,
+    attrSourceCount = props.attrSourceCount,
     setAttrSourceCount = props.setAttrSourceCount,
+    formData = props.formData,
     showOverview = props.showOverview,
+    eventIdList = props.eventIdList,
     onDelete = props.onDelete;
   var _useContext = useContext(AttributableContext),
     setButtonDisable = _useContext.setButtonDisable;
@@ -29,11 +33,14 @@ var AttributableEvents = function AttributableEvents(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     filters = _useState6[0],
     setFilters = _useState6[1];
+  useEffect(function () {
+    console.log('初始化-filters', filters);
+  }, [filters]);
   var _useState7 = useState(0),
     _useState8 = _slicedToArray(_useState7, 2),
     count = _useState8[0],
     setCount = _useState8[1];
-  var _useState9 = useState(true),
+  var _useState9 = useState(false),
     _useState10 = _slicedToArray(_useState9, 2),
     isAdd = _useState10[0],
     setIsAdd = _useState10[1];
@@ -46,33 +53,101 @@ var AttributableEvents = function AttributableEvents(props) {
     _useState14 = _slicedToArray(_useState13, 2),
     aloneAttr = _useState14[0],
     setAloneAttr = _useState14[1];
+  var bizEventSelectorDefaultValue;
+  if (value && value.eventId && value.eventId != -100) {
+    bizEventSelectorDefaultValue = {
+      event: {
+        id: value.eventId,
+        name: value.eventName
+      }
+    };
+  }
+  var _useState15 = useState(),
+    _useState16 = _slicedToArray(_useState15, 2),
+    bizAttributeSelectorValue = _useState16[0],
+    setBizAttributeSelectorValue = _useState16[1];
   useEffect(function () {
+    console.log('初始化-1236', value, mincePropCount);
     if (value) {
       var _value$filters;
+      setReasonData({
+        event: {
+          id: value.eventId,
+          name: value.eventName
+        }
+      });
       setFilters(value.filters);
+      setAloneAttr(value.propfilters);
+      if (eventIdList && eventIdList.length >= 0) {
+        setEventId(eventIdList[0]);
+      }
+      if (value.propfilters) {
+        setBizAttributeSelectorValue({
+          id: value.propfilters.attrId,
+          propCategory: value.propfilters.propCategory
+        });
+        setAttrSelectShow(true);
+      }
       if ((_value$filters = value.filters) === null || _value$filters === void 0 ? void 0 : _value$filters.conditions) {
         setCount(value.filters.conditions.length);
       }
     }
   }, []);
   useEffect(function () {
-    console.log('判断提交按钮是否可点击-123', count);
-    setAttrSourceCount(count);
+    console.log('判断提交按钮是否可点击-123', ReasonData, count);
+    if (ReasonData) {
+      handleCount('add', attrSourceCount, setAttrSourceCount, count);
+    }
     setTimeout(function () {
       onChangeHandle(ReasonData, filters, aloneAttr);
     }, 0);
   }, [count]);
+  var onEventDelete = function onEventDelete() {
+    if (formData && formData.sourceFilters.length <= 1) {
+      message.error('至少保留一个待归因事件');
+      return;
+    }
+    if (ReasonData) {
+      handleCount('delete', attrSourceCount, setAttrSourceCount);
+      handleCount('delete', mincePropCount, setMincePropCount);
+    }
+    onDelete();
+  };
+  var handleCount = function handleCount(type, _attrCount, _setAttrCount, count) {
+    if (ReasonData) {
+      var __attrCount = _.cloneDeep(_attrCount);
+      if (type === 'add' && count) {
+        __attrCount[ReasonData.event.id] = count;
+      } else {
+        delete __attrCount[ReasonData.event.id];
+      }
+      _setAttrCount(__attrCount);
+    }
+  };
   var onChangeFilters = function onChangeFilters(data) {
     console.log('归因事件-2', data);
     setFilters(data);
     onChangeHandle(ReasonData, data, aloneAttr);
   };
   var onAdd = function onAdd() {
-    if (ReasonData !== undefined) {
-      setIsAdd(true);
-      setTimeout(function () {
-        conditionRef.current.add();
-      }, 0);
+    if (ReasonData === undefined && bizEventSelectorDefaultValue === undefined) {
+      message.error('请先选择待归因事件');
+      return;
+    }
+    if (count >= 10) {
+      message.error('最多可添加10条属性筛选');
+      return;
+    }
+    setIsAdd(true);
+    setTimeout(function () {
+      conditionRef.current.add();
+    }, 0);
+  };
+  var onMinceProp = function onMinceProp() {
+    if (ReasonData !== undefined || bizEventSelectorDefaultValue !== undefined) {
+      setAttrSelectShow(true);
+      setButtonDisable(true);
+      handleCount('add', mincePropCount, setMincePropCount, 1);
     }
   };
   var onChangeReason = function onChangeReason(reason) {
@@ -85,6 +160,14 @@ var AttributableEvents = function AttributableEvents(props) {
   };
   var onChangeAttr = function onChangeAttr(attr) {
     console.log('归因事件-3', attr);
+    if (attr === undefined) {
+      handleCount('delete', mincePropCount, setMincePropCount);
+    } else {
+      setBizAttributeSelectorValue({
+        id: attr.id,
+        propCategory: attr.propCategory
+      });
+    }
     var _aloneAttr = attr === undefined ? undefined : {
       propCategory: attr.propCategory,
       type: attr.type,
@@ -96,6 +179,7 @@ var AttributableEvents = function AttributableEvents(props) {
     onChangeHandle(ReasonData, filters, _aloneAttr);
   };
   var onChangeHandle = function onChangeHandle(reason, filterData, aloneAttr) {
+    console.log('为啥呢？', reason, filterData, aloneAttr);
     if (props.onChange) {
       var _reason$event2;
       if (!reason || !reason.event || !((_reason$event2 = reason.event) === null || _reason$event2 === void 0 ? void 0 : _reason$event2.id)) return;
@@ -114,19 +198,19 @@ var AttributableEvents = function AttributableEvents(props) {
     className: "attributable-events-box"
   }, /*#__PURE__*/React.createElement("div", {
     className: "select-and-attr"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(verify && ReasonData === undefined ? 'verify-error' : '')
   }, /*#__PURE__*/React.createElement(BizEventSelector, {
     showBuiltInTarget: true,
     showAllEvent: showOverview,
     popupContainer: false,
     defaultSelectAble: false,
-    onChange: onChangeReason
-  })), attrSelectShow && /*#__PURE__*/React.createElement(BizAttributeSelector, {
+    onChange: onChangeReason,
+    defaultValue: bizEventSelectorDefaultValue
+  }), attrSelectShow && /*#__PURE__*/React.createElement(BizAttributeSelector, {
     enableEventProp: true,
     enableUserProp: true,
     enableEnvProp: true,
     eventIdList: [eventId],
+    value: bizAttributeSelectorValue,
     enableDelete: true,
     onChange: onChangeAttr,
     onDelete: function onDelete() {
@@ -137,24 +221,19 @@ var AttributableEvents = function AttributableEvents(props) {
     className: "button-box"
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "qingchu",
-    onClick: onDelete
+    onClick: onEventDelete
   }), /*#__PURE__*/React.createElement(Tooltip, {
     placement: "top",
     title: '添加属性细分'
   }, /*#__PURE__*/React.createElement(IconFont, {
-    className: "".concat(attrSelectShow || ReasonData === undefined ? 'disable' : ''),
+    className: "".concat(attrSelectShow || ReasonData === undefined && bizEventSelectorDefaultValue === undefined ? 'disable' : ''),
     type: "tianjia2",
-    onClick: function onClick() {
-      if (ReasonData !== undefined) {
-        setAttrSelectShow(true);
-        setButtonDisable(true);
-      }
-    }
+    onClick: onMinceProp
   })), /*#__PURE__*/React.createElement(Tooltip, {
     placement: "top",
     title: '添加属性筛选'
   }, /*#__PURE__*/React.createElement(IconFont, {
-    className: "".concat(count >= 10 || ReasonData === undefined ? 'disable' : ''),
+    className: "".concat(count >= 10 || ReasonData === undefined && bizEventSelectorDefaultValue === undefined ? 'disable' : ''),
     type: "shaixuan",
     onClick: function onClick() {
       return onAdd();

package/es/modules/searchPanel/components/targetEvent.js

@@ -10,9 +10,9 @@ import _ from 'lodash';
 import { Select, Tooltip, message } from 'antd';
 var TargetEvent = function TargetEvent(props) {
   var value = props.value,
-    verify = props.verify,
     setAttrTargetCount = props.setAttrTargetCount,
-    showOverview = props.showOverview;
+    showOverview = props.showOverview,
+    eventIdList = props.eventIdList;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     targetData = _useState2[0],
@@ -34,26 +34,40 @@ var TargetEvent = function TargetEvent(props) {
     _useState10 = _slicedToArray(_useState9, 2),
     eventId = _useState10[0],
     setEventId = _useState10[1];
+  var bizEventSelectorDefaultValue;
+  if (value && value.eventId && value.eventId != -100) {
+    bizEventSelectorDefaultValue = {
+      event: {
+        id: value.eventId,
+        name: value.eventName
+      }
+    };
+  }
   useEffect(function () {
     if (value) {
       var _value$filters;
-      console.log(123);
+      setTargetData({
+        event: {
+          id: value.eventId,
+          name: value.eventName
+        }
+      });
       setFilters(value.filters);
+      if (eventIdList && eventIdList.length >= 0) {
+        setEventId(eventIdList[0]);
+      }
       if ((_value$filters = value.filters) === null || _value$filters === void 0 ? void 0 : _value$filters.conditions) {
         setCount(value.filters.conditions.length);
       }
     }
   }, []);
-  useEffect(function () {
-    console.log('verify', verify);
-  }, [verify]);
   var onChangeFilters = function onChangeFilters(data) {
     console.log('归因事件-2', data);
     setFilters(data);
     onChangeHandle(targetData, data);
   };
   var onAdd = function onAdd() {
-    if (targetData === undefined) {
+    if (targetData === undefined && bizEventSelectorDefaultValue === undefined) {
       message.error('请先选择目标事件');
       return;
     }
@@ -102,15 +116,14 @@ var TargetEvent = function TargetEvent(props) {
     className: "target-events-box"
   }, /*#__PURE__*/React.createElement("div", {
     className: "selector-content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(verify && targetData === undefined ? 'verify-error' : '')
   }, /*#__PURE__*/React.createElement(BizEventSelector, {
     showBuiltInTarget: true,
     showAllEvent: showOverview,
     popupContainer: false,
     defaultSelectAble: false,
+    defaultValue: bizEventSelectorDefaultValue,
     onChange: onChangeTarget
-  })), /*#__PURE__*/React.createElement(Select, {
+  }), /*#__PURE__*/React.createElement(Select, {
     defaultValue: 1,
     style: {
       width: 88
@@ -129,14 +142,12 @@ var TargetEvent = function TargetEvent(props) {
     placement: "top",
     title: '添加属性筛选'
   }, /*#__PURE__*/React.createElement(IconFont, {
-    className: "".concat(count >= 5 || targetData === undefined ? 'disable' : ''),
+    className: "".concat(count >= 5 || targetData === undefined && bizEventSelectorDefaultValue === undefined ? 'disable' : ''),
     type: "shaixuan",
     onClick: function onClick() {
       return onAdd();
     }
-  }))), verify && targetData === undefined && /*#__PURE__*/React.createElement("div", {
-    className: "error-tips"
-  }, "\u8BF7\u9009\u62E9\u76EE\u6807\u4E8B\u4EF6"), /*#__PURE__*/React.createElement("div", null, (filters || isAdd) && /*#__PURE__*/React.createElement(BizAttrConditionGroup, {
+  }))), /*#__PURE__*/React.createElement("div", null, (filters || isAdd) && /*#__PURE__*/React.createElement(BizAttrConditionGroup, {
     ref: conditionRef,
     value: filters,
     enableEventProp: true,

package/es/modules/searchPanel/index.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 import { SearchPanelTypes } from './types';
 import './styles/index.less';
 export declare const classPrefix = "mi-left-form";
-declare const SearchPanel: React.FC<SearchPanelTypes.Props>;
+declare const SearchPanel: React.ForwardRefExoticComponent<SearchPanelTypes.Props & React.RefAttributes<any>>;
 export default SearchPanel;