@zgfe/modules-interval 1.0.0-interval.9 → 1.0.0

package/dist/esm/assets/business/iconfont.json

@@ -5,6 +5,55 @@
   "css_prefix_text": "",
   "description": "诸葛业务平台",
   "glyphs": [
+    {
+      "icon_id": "37343412",
+      "name": "盒须图",
+      "font_class": "hexutu",
+      "unicode": "e796",
+      "unicode_decimal": 59286
+    },
+    {
+      "icon_id": "37316029",
+      "name": "全屏展示",
+      "font_class": "quanpingzhanshi",
+      "unicode": "e6a3",
+      "unicode_decimal": 59043
+    },
+    {
+      "icon_id": "37316033",
+      "name": "流向图",
+      "font_class": "liuxiangtu",
+      "unicode": "e78f",
+      "unicode_decimal": 59279
+    },
+    {
+      "icon_id": "37316032",
+      "name": "旭日图",
+      "font_class": "xuritu",
+      "unicode": "e790",
+      "unicode_decimal": 59280
+    },
+    {
+      "icon_id": "37316031",
+      "name": "桑基图",
+      "font_class": "sangjitu",
+      "unicode": "e791",
+      "unicode_decimal": 59281
+    },
+    {
+      "icon_id": "37316030",
+      "name": "树形图",
+      "font_class": "shuxingtu",
+      "unicode": "e792",
+      "unicode_decimal": 59282
+    },
+    {
+      "icon_id": "37316028",
+      "name": "全屏收起",
+      "font_class": "quanpingshouqi",
+      "unicode": "e793",
+      "unicode_decimal": 59283
+    },
     {
       "icon_id": "36957204",
       "name": "对勾",
@@ -656,13 +705,6 @@
       "unicode": "e6a5",
       "unicode_decimal": 59045
     },
-    {
-      "icon_id": "31389407",
-      "name": "全屏展示",
-      "font_class": "quanpingzhanshi",
-      "unicode": "e6a3",
-      "unicode_decimal": 59043
-    },
     {
       "icon_id": "31360676",
       "name": "收藏",

package/dist/esm/components/common/index.js

@@ -1,21 +1,21 @@
 import React from 'react';
 import "./styles/index.less";
-var classPrefix = 'mi-common';
+import { BizLoading } from '@zgfe/business-lib';
+import { Empty } from 'antd';
+var classPrefix = 'mi-common-interval';
 
 // 加载按钮
 export var MiSpin = function MiSpin() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(classPrefix, "-loading-icon")
-  });
+  return /*#__PURE__*/React.createElement(BizLoading, {
+    className: "mi-common-interval-content"
+  }, /*#__PURE__*/React.createElement("div", null));
 };
 
 // 无数据状态
 export var MiNone = function MiNone(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-none-container")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(classPrefix, "-none")
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(classPrefix, "-none-text")
-  }, " ", props.label));
+  }, /*#__PURE__*/React.createElement(Empty, {
+    image: Empty.PRESENTED_IMAGE_SIMPLE
+  }));
 };

package/dist/esm/components/common/styles/index.less

@@ -1,6 +1,6 @@
 @import '~@zgfe/business-lib/es/assets/styles/inner.less';
 
-.mi-common {
+.mi-common-interval {
   &-loading-icon {
     z-index: 1000;
     display: inline-block;
@@ -11,17 +11,30 @@
   }
 
   &-none-text {
-    color: @text-color;
-    font-size: 16px;
+    color: #354354;
+    font-size: 14px;
   }
 
-  &-none {
-    width: 348px;
-    height: 132px;
-    background: url('../../../style/image/noData.png') no-repeat;
+  &-none-empty {
+    width: 88px;
+    height: 88px;
+    background-image: url('../../../style/image/empty.png');
+    background-repeat: no-repeat;
+    background-size: cover;
   }
 
   &-none-container {
-    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
 }
+.mi-common-interval-content {
+  width: 100%;
+  .ant-spin-text {
+    color: #ccc;
+  }
+}
+.ant-spin-nested-loading {
+  width: 100%;
+}

package/dist/esm/components/eventFilter/index.js

@@ -10,7 +10,7 @@ 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { Switch, Tooltip } from 'antd';
+import { Switch, Tooltip, message } from 'antd';
 import React, { useEffect, useRef, useState } from 'react';
 import { BizEventSelector, IconFont, BizAttrConditionGroup } from '@zgfe/business-lib';
 import "./styles/index.less";
@@ -72,6 +72,9 @@ var EventFilter = function EventFilter(props) {
       if (_data.filters) {
         setFilter(_data.filters);
       }
+      if (_data.relevancy) {
+        setRelevancy(true);
+      }
       if (_data.dimension) {
         setBizAttributeSelectorValue(_objectSpread(_objectSpread({}, _data.dimension), {}, {
           key: _data.dimension.propCategory === 'eventProp' ? _data.dimension.value : _data.dimension.propCategory + '-' + _data.dimension.value
@@ -82,11 +85,16 @@ var EventFilter = function EventFilter(props) {
 
   // 添加筛选
   var onAdd = function onAdd() {
+    if (!eventOverview) {
+      message.error('请先选择目标事件');
+      return;
+    }
     if (event.id === -1) {
       return;
     }
     // 最多可添加10条属性筛选
     if (count >= 10) {
+      message.error('最多可添加 10 条属性筛选');
       return;
     }
     setIsAdd(true);
@@ -97,12 +105,7 @@ var EventFilter = function EventFilter(props) {
 
   // 筛选条件改变
   var onChangeFilters = function onChangeFilters(data) {
-    if (data && data.conditions && data.conditions.length > 0) {
-      setFilter(data);
-    } else {
-      setFilter(undefined);
-      setIsAdd(false);
-    }
+    setFilter(data);
   };
   var onChangeEvent = function onChangeEvent(event) {
     if (event && event.event && event.event.id === null) {
@@ -151,25 +154,29 @@ var EventFilter = function EventFilter(props) {
     },
     onChange: onChangeEvent,
     placeholder: "\u8BF7\u9009\u62E9\u4E8B\u4EF6"
-  }), eventOverview && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+  }), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
     placement: "top",
-    title: '添加属性筛选'
+    title: !eventOverview ? '请先选择目标事件' : count < 10 ? '添加属性筛选' : '最多可添加 10 条属性筛选'
   }, /*#__PURE__*/React.createElement(IconFont, {
-    className: "".concat(count >= 10 || event.id === -1 ? 'disable' : ''),
+    className: "".concat(count >= 10 || event.id === -1 || !eventOverview ? 'disable' : ''),
     type: "shaixuan",
     onClick: function onClick() {
       return onAdd();
     }
-  }))), props !== null && props !== void 0 && props.relevancy && eventOverview ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Switch, {
+  }))), props !== null && props !== void 0 && props.relevancy ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: props.relevancyFl ? '请选择开始和结束事件' : ''
+  }, /*#__PURE__*/React.createElement(Switch, {
     size: "default",
     style: {
       marginLeft: 24
     },
-    checked: relevancy,
+    checked: relevancy && !props.relevancyFl,
+    disabled: props.relevancyFl,
     onChange: function onChange(checked) {
       return setRelevancy(checked);
     }
-  }), /*#__PURE__*/React.createElement("span", {
+  })), /*#__PURE__*/React.createElement("span", {
     className: "switch-title"
   }, "\u8BBE\u7F6E\u5173\u8054\u5C5E\u6027")) : ''), (filter || isAdd) && /*#__PURE__*/React.createElement("div", {
     className: "".concat(count > 0 ? 'attr-box-show' : '', " top")

package/dist/esm/components/eventFilter/styles/index.less

@@ -1,12 +1,9 @@
 .interval-box {
   > :nth-child(1) {
-    display: flex;
     display: flex;
     gap: 16px;
     align-items: center;
-    margin-bottom: 12px;
-    margin-bottom: 12px;
-
+    margin-bottom: 0 !important;
     .biz-event-select,
     .biz-attr-select {
       width: 208px;

package/dist/esm/components/eventFilter/types.d.ts

@@ -44,7 +44,9 @@ export interface ConditionsnProps {
  *  EventFilter组件
  */
 export interface EventFilterProps {
+    id?: string;
     value?: eventProps;
+    relevancyFl?: boolean;
     relevancy?: boolean;
     onChange?: (event: eventProps) => {};
 }

package/dist/esm/components/renderContent/index.js

@@ -8,7 +8,7 @@ import { Spin } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { MiNone, MiSpin } from '..';
 import "./styles/index.less";
-import EventChart from "../../modules/chart";
+import IntervalEventChart from "../../modules/chart";
 var classPrefix = 'render-content-interval';
 var ContentPanel = function ContentPanel(props) {
   var _eventData$appData, _eventData$appData$se;
@@ -41,15 +41,15 @@ var ContentPanel = function ContentPanel(props) {
     className: classPrefix
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-chart-container")
-  }, eventData && (_eventData$appData = eventData.appData) !== null && _eventData$appData !== void 0 && (_eventData$appData$se = _eventData$appData.series) !== null && _eventData$appData$se !== void 0 && _eventData$appData$se.length ? /*#__PURE__*/React.createElement(EventChart, {
-    type: "grid",
+  }, eventData && (_eventData$appData = eventData.appData) !== null && _eventData$appData !== void 0 && (_eventData$appData$se = _eventData$appData.series) !== null && _eventData$appData$se !== void 0 && _eventData$appData$se.length ? /*#__PURE__*/React.createElement(IntervalEventChart, {
+    type: "boxplot",
     dataSource: eventData,
     params: searchData,
     onChangeShow: onChangeShow
   }) : /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-MiNone")
   }, /*#__PURE__*/React.createElement(MiNone, {
-    label: "\u6682\u65E0\u6570\u636E"
+    label: !eventData ? '请选择条件进行查询' : '暂无数据'
   }))));
 };
 export default ContentPanel;

package/dist/esm/components/renderContent/styles/index.less

@@ -25,7 +25,7 @@
   }
 
   &-spin-container {
-    display: flex;
+    display: flex !important;
     align-items: center;
     justify-content: center;
     min-height: 300px;

package/dist/esm/components/searchPanel/index.js

@@ -16,7 +16,7 @@ import { chartTypeOptions, getInitDate } from "../../constants";
 import { EventContext } from "../../types";
 import "./styles/index.less";
 import { extractNames } from "../../utils/formData";
-var classPrefix = 'search-panel';
+var classPrefix = 'search-panel-interval';
 var SearchPanel = function SearchPanel(props) {
   var _useContext = useContext(EventContext),
     includeToday = _useContext.includeToday;
@@ -42,7 +42,6 @@ var SearchPanel = function SearchPanel(props) {
     _useState10 = _slicedToArray(_useState9, 2),
     displaySetupSliceList = _useState10[0],
     setDisplaySetupSliceList = _useState10[1];
-  // const [includeToday, setIncludeToday] = useState(false);
   // 查询维度
   var _useState11 = useState({
       analysisIndex: 'number'
@@ -108,6 +107,7 @@ var SearchPanel = function SearchPanel(props) {
   }, /*#__PURE__*/React.createElement(BizDatePicker, {
     dateTypeList: ['day', 'week', 'month'],
     value: time,
+    mode: "simple",
     includeToday: true,
     onChange: onChangeTime,
     selectRange: 365
@@ -115,6 +115,7 @@ var SearchPanel = function SearchPanel(props) {
     multiple: true,
     disable: displaySetupList.length === 0,
     onChange: onDimensionChange,
+    overlayClassName: "interval-select-overlay",
     className: "".concat(classPrefix, "-select"),
     placeholder: "\u8BF7\u9009\u62E9\u663E\u793A\u8BBE\u7F6E",
     enableSearch: true,

package/dist/esm/components/searchPanel/styles/index.less

@@ -1,10 +1,14 @@
-.search-panel {
+.search-panel-interval {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 32px;
   margin-bottom: 24px;
 
+  .biz-date-picker-wrap-list {
+    font-size: 14px;
+  }
+
   &-search-right {
     display: flex;
   }
@@ -21,38 +25,40 @@
   }
 }
 
-.biz-select-option.biz-select-option-multiple:hover:not(.disabled) {
-  color: var(--1, #021429);
-  background: var(--io-i-1, #e8efff);
-}
+.interval-select-overlay {
+  .biz-select-option.biz-select-option-multiple:hover:not(.disabled) {
+    color: var(--1, #021429);
+    background: var(--io-i-1, #e8efff);
+  }
 
-.biz-select-overlay {
-  padding: 0;
-}
+  .biz-select-overlay {
+    padding: 0;
+  }
 
-.biz-select-list-panel {
-  display: grid;
-  gap: 8px;
-}
+  .biz-select-list-panel {
+    display: grid;
+    gap: 8px;
+  }
 
-.biz-select-option {
-  padding: 0 16px;
-  border-radius: 0;
-}
+  .biz-select-option {
+    padding: 0 16px;
+    border-radius: 0;
+  }
 
-.biz-select-option.biz-select-option-multiple.active:not(.disabled) {
-  color: var(--1, #021429);
-}
+  .biz-select-option.biz-select-option-multiple.active:not(.disabled) {
+    color: var(--1, #021429);
+  }
 
-.biz-select-option.biz-select-option-multiple:hover:not(.disabled) .biz-select-checkbox {
-  color: #ccd0d4;
-}
+  .biz-select-option.biz-select-option-multiple:hover:not(.disabled) .biz-select-checkbox {
+    color: #ccd0d4;
+  }
 
-.biz-select-option.biz-select-option-multiple.active:hover:not(.disabled) .biz-select-checkbox {
-  color: #165dff;
-}
+  .biz-select-option.biz-select-option-multiple.active:hover:not(.disabled) .biz-select-checkbox {
+    color: #165dff;
+  }
 
-.biz-select-option.biz-select-option-multiple:active:not(.disabled) {
-  color: #165dff;
-  background: var(--io-i-1, #e8efff);
+  .biz-select-option.biz-select-option-multiple:active:not(.disabled) {
+    color: #165dff;
+    background: var(--io-i-1, #e8efff);
+  }
 }

package/dist/esm/components/table/styles/index.less

@@ -5,7 +5,17 @@
   .ant-table {
     border-radius: 8px;
   }
-
+  .ant-table-cell-with-append .ant-table-row-expand-icon {
+    left: 16px !important;
+    color: #9aa1a9;
+    border: 1px solid #9aa1a9;
+  }
+  .ant-table-row-expand-icon::before {
+    height: 1.4px !important;
+  }
+  .ant-table-row-expand-icon::after {
+    width: 1.4px !important;
+  }
   .ant-table-cell {
     height: 50px;
     padding: 0 16px !important;
@@ -31,26 +41,31 @@
     line-height: 50px;
     background: #fafafb;
     border: 1px solid var(--gray-6, #ecedf0);
+    border-bottom: none;
     border-radius: 8px 8px 0 0;
 
     > :nth-child(2) {
       display: flex;
       margin-top: 9px;
-
       div {
+        display: flex;
+        align-items: center;
         height: 32px;
         padding: 0 16px;
         line-height: 32px;
         background: #fff;
         border: 1px solid #f2f3f4;
+        border-radius: 4px;
         cursor: pointer;
-
         .xiazai1 {
           margin-right: 4px;
-          font-size: 18px !important;
-          vertical-align: -2px;
+          font-size: 16px !important;
         }
       }
+      div:hover {
+        color: #165dff;
+        border: 1px solid #165dff;
+      }
     }
   }
 

package/dist/esm/components/topBar/index.js

@@ -11,14 +11,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Button } from 'antd';
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { BizAddToPanel, BizAddToScene, BizGlobalDataContext } from '@zgfe/business-lib';
 import "./styles/index.less";
 import { EventContext } from "../../types";
 import { chartTypes, platformOption } from "../../constants/fields";
+import { appVersionType } from '@zgfe/business-lib/es/context';
 var classPrefix = 'modules-interval-topbar';
 var TopBar = function TopBar(props) {
-  var _props$eventData, _props$eventData$appD, _props$eventData$appD2;
   var _useContext = useContext(EventContext),
     panelId = _useContext.panelId,
     afterEditTarget = _useContext.afterEditTarget,
@@ -31,19 +31,23 @@ var TopBar = function TopBar(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     showScene = _useState4[0],
     setShowScene = _useState4[1];
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showLoading = _useState6[0],
+    setShowLoading = _useState6[1];
   var _useContext2 = useContext(BizGlobalDataContext),
     currentApp = _useContext2.currentApp;
   var searchData = props.searchData,
     platformChange = props.platformChange;
-  var _useState5 = useState((searchData === null || searchData === void 0 ? void 0 : searchData.platform) === undefined ? 0 : searchData.platform),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectPlatform = _useState6[0],
-    setselectPlatform = _useState6[1];
-  // 看板弹窗类型
-  var _useState7 = useState(),
+  var _useState7 = useState((searchData === null || searchData === void 0 ? void 0 : searchData.platform) === undefined ? 0 : searchData.platform),
     _useState8 = _slicedToArray(_useState7, 2),
-    panelType = _useState8[0],
-    setPanelType = _useState8[1];
+    selectPlatform = _useState8[0],
+    setselectPlatform = _useState8[1];
+  // 看板弹窗类型
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    panelType = _useState10[0],
+    setPanelType = _useState10[1];
 
   // 关闭弹窗
   var closeHandle = function closeHandle(type) {
@@ -54,7 +58,11 @@ var TopBar = function TopBar(props) {
       setShowScene(false);
     }
   };
-
+  useEffect(function () {
+    if (props.eventData !== undefined) {
+      setShowLoading(false);
+    }
+  }, [props.eventData]);
   // 保存
   var _onOk = function onOk(type, val) {
     // console.log('onOk', type, val);
@@ -66,15 +74,18 @@ var TopBar = function TopBar(props) {
   }, !panelId && /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-panel")
   }, /*#__PURE__*/React.createElement(Button, {
+    disabled: showLoading,
     onClick: function onClick() {
       setShowPanel(true);
     }
   }, "\u6DFB\u52A0\u5230\u770B\u677F"), showPanel && /*#__PURE__*/React.createElement(BizAddToPanel, {
     type: panelType,
-    params: _objectSpread({
-      app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
-      module: 'event'
-    }, searchData),
+    params: _objectSpread(_objectSpread({
+      appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+      module: 'interval'
+    }, searchData), {}, {
+      chartType: 'boxplot'
+    }),
     styleOptions: chartTypes,
     onCancel: function onCancel() {
       return closeHandle('panel');
@@ -85,24 +96,27 @@ var TopBar = function TopBar(props) {
   })), enableAddScene && /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-scene")
   }, /*#__PURE__*/React.createElement(Button, {
+    disabled: showLoading,
     onClick: function onClick() {
       setShowScene(true);
     }
   }, "\u6DFB\u52A0\u5E38\u7528\u573A\u666F"), showScene && /*#__PURE__*/React.createElement(BizAddToScene, {
-    params: _objectSpread({
-      app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
-      module: 'event'
-    }, searchData),
+    params: _objectSpread(_objectSpread({
+      appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+      module: 'interval'
+    }, searchData), {}, {
+      chartType: 'line'
+    }),
     onOk: function onOk(data) {
       return _onOk('scene', data);
     },
     onCancel: function onCancel() {
       return closeHandle('scene');
     }
-  })), (currentApp === null || currentApp === void 0 ? void 0 : currentApp.appVersion) === 2 ? /*#__PURE__*/React.createElement(Button, {
+  })), (currentApp === null || currentApp === void 0 ? void 0 : currentApp.appVersion) === appVersionType.CityCommercialBank ? /*#__PURE__*/React.createElement(Button, {
     className: "".concat(classPrefix, "-earlywarning"),
     type: "primary",
-    disabled: (props === null || props === void 0 ? void 0 : (_props$eventData = props.eventData) === null || _props$eventData === void 0 ? void 0 : (_props$eventData$appD = _props$eventData.appData) === null || _props$eventData$appD === void 0 ? void 0 : (_props$eventData$appD2 = _props$eventData$appD.series) === null || _props$eventData$appD2 === void 0 ? void 0 : _props$eventData$appD2.length) === 0,
+    disabled: showLoading,
     onClick: function onClick() {
       props.onUserDrill({
         appId: Number(currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId),

package/dist/esm/components/topBar/styles/index.less

@@ -21,6 +21,7 @@
     > div {
       position: relative;
       padding: 0 16px;
+      font-size: 14px;
       background: #fff;
       border: 1px solid #ecedf0;
       cursor: pointer;

package/dist/esm/components/topBar/types.d.ts

@@ -4,6 +4,7 @@ export interface TopBarProps {
      * @description   标题
      */
     searchData?: SearchValue;
+    loading?: boolean;
     eventData?: ResponseDataProps;
     onUserDrill: (data: UserDrillParamsProp, searchData: SearchValue) => void;
     platformChange: (data: number) => void;