linkmore-design 1.0.60 → 1.0.64

package/es/LmEditTable/EditTable.js

@@ -1,7 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import "antd/es/form/style";
-import _Form from "antd/es/form";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 
@@ -55,13 +53,15 @@ var __rest = this && this.__rest || function (s, e) {
 import { PlusCircleOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import { arrayMove } from '@dnd-kit/sortable';
-import { Button, Checkbox, IconFont, Input, InputNumber, Radio, Select, Table, Switch, DatePicker } from 'linkmore-design';
+import { Button, Checkbox, IconFont, Input, InputNumber, Radio, Select, Table, Switch, DatePicker, Form } from 'linkmore-design';
 import { get, set } from 'lodash';
 import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, memo, useCallback } from 'react';
 import { produce } from 'immer';
 import DndContainer from './DndContainer';
 import SortableBox from './sortableBox';
+import SortableBoxCol from './sortableBoxCol';
 import SortableItem from './sortableItem';
+import ColSortableItem from './sortableItemCol';
 import DragHandle from './DragHandle';
 import UploadOss from '../UploadOss';
 var UploadBtn = UploadOss.UploadBtn;
@@ -71,11 +71,11 @@ var EditableRow = function EditableRow(_a) {
   var index = _a.index,
       props = __rest(_a, ["index"]);
 
-  var _Form$useForm = _Form.useForm(),
+  var _Form$useForm = Form.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
       form = _Form$useForm2[0];
 
-  return /*#__PURE__*/React.createElement(_Form, {
+  return /*#__PURE__*/React.createElement(Form, {
     form: form,
     component: false
   }, /*#__PURE__*/React.createElement(EditableContext.Provider, {
@@ -87,11 +87,11 @@ var EditableSortRow = function EditableSortRow(_a) {
   var index = _a.index,
       props = __rest(_a, ["index"]);
 
-  var _Form$useForm3 = _Form.useForm(),
+  var _Form$useForm3 = Form.useForm(),
       _Form$useForm4 = _slicedToArray(_Form$useForm3, 1),
       form = _Form$useForm4[0];
 
-  return /*#__PURE__*/React.createElement(_Form, {
+  return /*#__PURE__*/React.createElement(Form, {
     form: form,
     component: false
   }, /*#__PURE__*/React.createElement(EditableContext.Provider, {
@@ -180,8 +180,16 @@ var Opetate = function Opetate(_ref) {
   var record = _ref.record,
       rowKey = _ref.rowKey,
       handleAdd = _ref.handleAdd,
-      handleDelete = _ref.handleDelete;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      handleDelete = _ref.handleDelete,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? ['add', 'delete'] : _ref$options;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, options.includes('add') && /*#__PURE__*/React.createElement(Button, {
     type: "link",
     size: "small",
     icon: /*#__PURE__*/React.createElement(IconFont, {
@@ -193,7 +201,7 @@ var Opetate = function Opetate(_ref) {
     onClick: function onClick() {
       return handleDelete(record[rowKey]);
     }
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), options.includes('delete') && /*#__PURE__*/React.createElement(Button, {
     type: "link",
     size: "small",
     icon: /*#__PURE__*/React.createElement(IconFont, {
@@ -251,7 +259,8 @@ var EditableCell = function EditableCell(props) {
       clearProps = __rest(restProps, ["onMouseEnter", "onMouseLeave"]);
 
   var _col$componentProps = col.componentProps,
-      componentProps = _col$componentProps === void 0 ? {} : _col$componentProps; // const checkCellRef = useRef(null)
+      componentProps = _col$componentProps === void 0 ? {} : _col$componentProps,
+      dataIndex = col.dataIndex; // const checkCellRef = useRef(null)
   // const focusCapturedRef = useRef(false);
   // const curValue = useMemo(() => {
   //   return record?.dataIndex
@@ -282,35 +291,51 @@ var EditableCell = function EditableCell(props) {
 
             case 6:
               values = _context.t0;
-              console.log(Object.assign(Object.assign({
-                record: record
-              }, values), _defineProperty({}, rowKey, record === null || record === void 0 ? void 0 : record[rowKey])), 'vvvv');
-              console.time('testForEach');
-              handleSave(Object.assign(Object.assign(Object.assign({}, record), values), _defineProperty({}, rowKey, record === null || record === void 0 ? void 0 : record[rowKey])));
-              console.timeEnd('testForEach');
-              _context.next = 13;
+
+              // console.time('testForEach');
+
+              /** 如果属于中有唯一性，并且当前的值与唯一值不一致，则改变其他的 */
+              if (componentProps.isOnlyValue !== undefined && values[dataIndex] !== record[dataIndex] && ![undefined, null].includes(values[dataIndex])) {
+                handleSave(Object.assign(Object.assign(Object.assign({}, record), values), _defineProperty({}, rowKey, record === null || record === void 0 ? void 0 : record[rowKey])), {
+                  only: {
+                    key: dataIndex,
+                    value: componentProps.isOnlyValue
+                  }
+                });
+              } else {
+                handleSave(Object.assign(Object.assign(Object.assign({}, record), values), _defineProperty({}, rowKey, record === null || record === void 0 ? void 0 : record[rowKey])));
+              } // console.timeEnd('testForEach');
+
+
+              _context.next = 10;
               return form.validateFields();
 
-            case 13:
-              _context.next = 17;
+            case 10:
+              _context.next = 14;
               break;
 
-            case 15:
-              _context.prev = 15;
+            case 12:
+              _context.prev = 12;
               _context.t1 = _context["catch"](0);
 
-            case 17:
+            case 14:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 15]]);
+      }, _callee, null, [[0, 12]]);
     }));
   }; // 触发保存
 
 
   var handleFormItemChange = function handleFormItemChange(e) {
-    save === null || save === void 0 ? void 0 : save();
+    save === null || save === void 0 ? void 0 : save(); // const { dataIndex } = col
+    // if (componentProps.isOnlyValue !== undefined) {
+    //   console.log(777)
+    //   handleCopy?.(dataIndex, componentProps.isOnlyValue)
+    // } else {
+    //   save?.()
+    // }
   };
   /** 快捷刷子，把当前的所有列的值，刷成当前的选中的列 */
 
@@ -331,13 +356,13 @@ var EditableCell = function EditableCell(props) {
           // ref={checkCellRef}
           placeholder: "\u8BF7\u8F93\u5165"
         }, componentProps, {
-          addonBefore: componentProps.addonBefore ? /*#__PURE__*/React.createElement(_Form.Item, {
+          addonBefore: componentProps.addonBefore ? /*#__PURE__*/React.createElement(Form.Item, {
             name: [col.dataIndex, 'addonBeforeValue'],
             noStyle: true
           }, /*#__PURE__*/React.cloneElement(componentProps.addonBefore, {
             onChange: handleFormItemChange
           })) : null,
-          addonAfter: componentProps.addonAfter ? /*#__PURE__*/React.createElement(_Form.Item, {
+          addonAfter: componentProps.addonAfter ? /*#__PURE__*/React.createElement(Form.Item, {
             name: [col.dataIndex, 'addonAfterValue'],
             noStyle: true
           }, /*#__PURE__*/React.cloneElement(componentProps.addonAfter, {
@@ -458,7 +483,9 @@ var EditableCell = function EditableCell(props) {
     var childNode = children;
 
     if (isEdit && editable) {
-      childNode = /*#__PURE__*/React.createElement(_Form.Item, Object.assign({
+      childNode = /*#__PURE__*/React.createElement(Form.Item, Object.assign({
+        errorPlacement: "right",
+        valuePropName: editable === 'switch' ? 'checked' : 'value',
         style: {
           margin: 0
         }
@@ -467,7 +494,8 @@ var EditableCell = function EditableCell(props) {
       }), Control(editable));
 
       if (editable === 'input' && ((componentProps === null || componentProps === void 0 ? void 0 : componentProps.addonBefore) || (componentProps === null || componentProps === void 0 ? void 0 : componentProps.addonAfter))) {
-        childNode = /*#__PURE__*/React.createElement(_Form.Item, Object.assign({
+        childNode = /*#__PURE__*/React.createElement(Form.Item, Object.assign({
+          errorPlacement: "right",
           style: {
             margin: 0
           }
@@ -486,9 +514,17 @@ var EditableCell = function EditableCell(props) {
     var editable = col.editable,
         dataIndex = col.dataIndex;
 
-    if (isEdit && editable && record[dataIndex] || isHoverEdit && editable && record[dataIndex]) {
+    if (isEdit && editable) {
       form.setFieldsValue(_defineProperty({}, dataIndex, editable === 'date' ? moment(record[dataIndex]) : record[dataIndex]));
-    }
+    } // if (
+    //   (isEdit && editable && record[dataIndex]) ||
+    //   (isHoverEdit && editable && record[dataIndex])
+    // ) {
+    //   form.setFieldsValue({
+    //     [dataIndex]: editable === 'date' ? moment(record[dataIndex]) : record[dataIndex],
+    //   })
+    // }
+
   }, [record]); // const isOpenEdit = (isEdit && focusCapturedRef.current) || (isHoverEdit && focusCapturedRef.current);
   // const classNames = cx({
   //   'lm_base_editTable_cell': true,
@@ -539,9 +575,11 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
       useQuickOpetate = props.useQuickOpetate,
       rowSelection = props.rowSelection,
       sortOpen = props.sortOpen,
+      colSortOpen = props.colSortOpen,
+      filterChange = props.filterChange,
       _props$size = props.size,
       size = _props$size === void 0 ? 'small' : _props$size,
-      resetProps = __rest(props, ["value", "columns", "isEdit", "isAdd", "onChange", "rowKey", "rowHoverEdit", "isUseForm", "isHoverEdit", "useQuickOpetate", "rowSelection", "sortOpen", "size"]);
+      resetProps = __rest(props, ["value", "columns", "isEdit", "isAdd", "onChange", "rowKey", "rowHoverEdit", "isUseForm", "isHoverEdit", "useQuickOpetate", "rowSelection", "sortOpen", "colSortOpen", "filterChange", "size"]);
 
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
@@ -582,6 +620,22 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
     } else {
       setDataSource(arrayMove(cloneArr, oldIndex, newIndex));
     }
+  };
+
+  var onColSortEnd = function onColSortEnd(active, over) {
+    console.log(active, over, 2223);
+    var oldIndex = columns.findIndex(function (item) {
+      return item.dataIndex === active;
+    });
+    var newIndex = columns.findIndex(function (item) {
+      return item.dataIndex === over;
+    });
+    console.log(arrayMove(columns, oldIndex, newIndex), 222);
+    filterChange === null || filterChange === void 0 ? void 0 : filterChange(arrayMove(columns, oldIndex, newIndex).map(function (item, index) {
+      return Object.assign(Object.assign({}, item), {
+        order: index
+      });
+    }));
   }; // 删除
 
 
@@ -640,26 +694,36 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
     (_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.onChange) === null || _a === void 0 ? void 0 : _a.call(rowSelection, selectRows);
   };
 
-  var handleSave = function handleSave(row) {
+  var handleSave = function handleSave(row, options) {
     var res = produce(dataSourceRef.current, function (draft) {
-      var index = draft.findIndex(function (item) {
-        return row[_rowKey] === item[_rowKey];
-      });
+      if (options === null || options === void 0 ? void 0 : options.only) {
+        var _ref2 = options === null || options === void 0 ? void 0 : options.only,
+            key = _ref2.key,
+            value = _ref2.value;
+
+        draft.forEach(function (item, index) {
+          if (row[_rowKey] === item[_rowKey]) {
+            draft[index] = row;
+          } else {
+            draft[index][key] = value;
+          }
+        });
+      } else {
+        var index = draft.findIndex(function (item) {
+          return row[_rowKey] === item[_rowKey];
+        });
 
-      if (index !== -1) {
-        draft[index] = row;
+        if (index !== -1) {
+          draft[index] = row;
+        }
       }
     });
-    console.time('b');
-    console.log(res, 'rrrr');
 
     if (onChange) {
       onChange === null || onChange === void 0 ? void 0 : onChange(res);
     } else {
       setDataSource(res);
     }
-
-    console.timeEnd('b');
   };
 
   var reWriteOriginSource = function reWriteOriginSource(rowKey, rowValue, dataIndex, nextValue) {
@@ -759,7 +823,10 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
       dataIndex: 'lm_edit_opetate',
       width: 68,
       fixed: 'right',
-      editable: 'lm_edit_opetate'
+      editable: 'lm_edit_opetate',
+      componentProps: {
+        options: Array.isArray(useQuickOpetate) ? useQuickOpetate : ['add', 'delete']
+      }
     } : null]).filter(function (item) {
       return item;
     });
@@ -798,6 +865,12 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
 
           return record[dataIndex] === prevRecord[dataIndex] ? false : true;
         },
+        // render: (text: string, record: Record<string, any>, index: number) => {
+        //   const { editable, render } = record
+        //   if (!editable && render) {
+        //     return render?.(text, record ,index)
+        //   }
+        // },
         onCell: function onCell(record) {
           return {
             getLength: function getLength() {
@@ -825,6 +898,7 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
         }
       });
     });
+    console.log(res, '---res');
     return res;
   }, [columns, isAdd, sortOpen, useQuickOpetate, sortEditTable]);
   var DraggableContainer = useCallback(function (_a) {
@@ -838,10 +912,39 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
       items: (_b = dataSourceRef.current) === null || _b === void 0 ? void 0 : _b.map(function (item) {
         return item[_rowKey];
       })
-    }, /*#__PURE__*/React.createElement("tbody", Object.assign({}, props)))) // <tbody {...props} />
-    ;
+    }, /*#__PURE__*/React.createElement("tbody", Object.assign({}, props))));
   }, [sortEditTable]);
+  var colDraggableContainer = useCallback(function (_a) {
+    var props = __rest(_a, []);
+
+    return /*#__PURE__*/React.createElement("tr", null, React.Children.map(props.children, function (child) {
+      var _a, _b;
+
+      if ((_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.column) === null || _b === void 0 ? void 0 : _b.fixed) {
+        return child;
+      }
+
+      return /*#__PURE__*/React.createElement(ColSortableItem, {
+        id: child.key
+      }, child);
+    }));
+  }, [columns]);
   var config = useMemo(function () {
+    var component = {
+      body: Object.assign({
+        row: sortOpen ? EditableSortRow : EditableRow,
+        cell: EditableCell
+      }, sortOpen ? {
+        wrapper: DraggableContainer
+      } : {})
+    };
+
+    if (colSortOpen) {
+      component['header'] = {
+        row: colDraggableContainer
+      };
+    }
+
     return Object.assign({
       pagination: false,
       tableLayout: 'fixed',
@@ -851,17 +954,9 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
       rowKey: function rowKey(record) {
         return record[_rowKey] || record.index || Math.random();
       },
-      components: {
-        body: Object.assign({
-          row: sortOpen ? EditableSortRow : EditableRow,
-          cell: EditableCell // wrapper: DraggableContainer
-
-        }, sortOpen ? {
-          wrapper: DraggableContainer
-        } : {})
-      }
+      components: component
     }, resetProps);
-  }, [resultColumns, dataSource, sortOpen, size]);
+  }, [resultColumns, dataSource, sortOpen, colSortOpen, size]);
   useEffect(function () {
     setDataSource(defaultData === null || defaultData === void 0 ? void 0 : defaultData.map(function (v, idx) {
       return Object.assign(Object.assign({}, v), _defineProperty({}, _rowKey, v[_rowKey] || "v".concat(idx + 1)));
@@ -877,7 +972,48 @@ var EditTable = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   var isShowAddAction = useMemo(function () {
     return isEdit && isAdd || isHoverEdit && isAdd;
-  }, [isEdit, isAdd, isHoverEdit]); // @ts-ignore
+  }, [isEdit, isAdd, isHoverEdit]);
+
+  if (colSortOpen) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "lm_editTable_warpper"
+    }, /*#__PURE__*/React.createElement(DndContainer, {
+      move: onColSortEnd
+    }, /*#__PURE__*/React.createElement(SortableBoxCol, {
+      items: columns.reduce(function (acc, item) {
+        return [].concat(_toConsumableArray(acc), [item.dataIndex]);
+      }, [])
+    }, /*#__PURE__*/React.createElement(Table, Object.assign({}, config, {
+      size: size || 'small',
+      columns: resultColumns,
+      rowClassName: "editable-row",
+      bordered: true,
+      pagination: false,
+      // components={tableComponents}
+      rowSelection: !rowSelection ? undefined : {
+        fixed: true,
+        type: 'checkbox',
+        columnWidth: 36,
+        selectedRowKeys: localRowSelectList.map(function (v) {
+          return v[_rowKey];
+        }),
+        onChange: function onChange(selectedRowKeys, selectedRows) {
+          editTableRowChange(selectedRows);
+        }
+      },
+      dataSource: dataSource
+    })))), isShowAddAction && /*#__PURE__*/React.createElement(Button, {
+      className: "lm_editTable_add_bar",
+      type: "dashed",
+      onClick: handleAdd,
+      style: {
+        marginTop: 8
+      }
+    }, /*#__PURE__*/React.createElement(PlusCircleOutlined, {
+      className: "lmweb-plus"
+    }), "\u65B0\u589E"));
+  } // @ts-ignore
+
 
   return /*#__PURE__*/React.createElement("div", {
     className: "lm_editTable_warpper"

package/es/LmEditTable/sortableBoxCol.d.ts

@@ -0,0 +1,5 @@
+declare const SortableBox: ({ items, children }: {
+    items: any;
+    children: any;
+}) => JSX.Element;
+export default SortableBox;

package/es/LmEditTable/sortableBoxCol.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
+
+var SortableBox = function SortableBox(_ref) {
+  var items = _ref.items,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(SortableContext, {
+    items: items,
+    strategy: horizontalListSortingStrategy
+  }, children);
+};
+
+export default SortableBox;

package/es/LmEditTable/sortableItemCol.d.ts

@@ -0,0 +1 @@
+export default function SortableItem(props: any): JSX.Element;

package/es/LmEditTable/sortableItemCol.js

@@ -0,0 +1,48 @@
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import React, { forwardRef } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+var Item = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var children = _a.children,
+      props = __rest(_a, ["children"]);
+
+  return /*#__PURE__*/React.createElement("th", Object.assign({}, props, {
+    ref: ref
+  }), children);
+});
+export default function SortableItem(props) {
+  var _useSortable = useSortable({
+    id: props.id
+  }),
+      attributes = _useSortable.attributes,
+      listeners = _useSortable.listeners,
+      setNodeRef = _useSortable.setNodeRef,
+      transform = _useSortable.transform,
+      transition = _useSortable.transition;
+
+  var style = {
+    position: 'relative',
+    transform: CSS.Translate.toString(transform),
+    transition: transition,
+    padding: 0,
+    touchAction: 'none',
+    height: '40px',
+    cursor: 'move'
+  };
+  return /*#__PURE__*/React.createElement(Item, Object.assign({
+    ref: setNodeRef,
+    style: style
+  }, attributes, listeners, props));
+}

package/es/LmFilter/LmFilter.js

@@ -28,10 +28,28 @@ var LmFilter = function LmFilter(_ref, ref) {
       localization = _ref$localization === void 0 ? {} : _ref$localization,
       resetProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var defaultRef = (0, _react.useRef)(null);
-  return /*#__PURE__*/_react.default.createElement(_FilterRoot.default, (0, _extends2.default)({
-    ref: ref || defaultRef,
+  var defaultProps = {
+    dataSource: [],
+    // 数据源
+    enableSearch: true,
+    // 是否启用模糊查询
+    enableBaisc: true,
+    // 是否启用基础筛选
+    enableComplex: false,
+    // 是否启用高级筛选
+    enableCustom: false,
+    // 是否启用自定义筛选
+    size: 'middle',
+    // 尺寸
+    searchKey: 'search',
+    // 搜索的key值
+    placeholder: '请输入',
+    // 搜索占位符
     localization: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _localization.DefaultLocalization), localization)
-  }, resetProps));
+  };
+  return /*#__PURE__*/_react.default.createElement(_FilterRoot.default, (0, _extends2.default)({
+    ref: ref || defaultRef
+  }, defaultProps, resetProps));
 };
 
 var _default = /*#__PURE__*/(0, _react.forwardRef)(LmFilter);

package/es/LmFilter/baseFilter/fuzzySearch.js

@@ -29,7 +29,12 @@ var FuzzySearch = function FuzzySearch(_ref) {
   }, [state.basicFilter]);
 
   var onSearch = function onSearch(val) {
-    setFilterValue(val, searchKey);
+    var item = {
+      field: searchKey,
+      operator: 'contains',
+      fieldType: 'string'
+    };
+    setFilterValue(val, item);
   };
 
   (0, _react.useEffect)(function () {

package/es/LmFilter/baseFilter/index.js

@@ -17,9 +17,7 @@ var _components = _interopRequireDefault(require("../components"));
 var LmFilterBase = /*#__PURE__*/_react.default.memo(function (_ref) {
   var instance = _ref.instance;
   var dataSource = instance.dataSource;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "lm_filter_basic"
-  }, /*#__PURE__*/_react.default.createElement(_fuzzySearch.default, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_fuzzySearch.default, {
     instance: instance
   }), dataSource.map(function (v, index) {
     var isHidden = !v.show && typeof v.show === 'boolean';

package/es/LmFilter/clearFilter/index.js

@@ -14,13 +14,11 @@ var _linkmoreDesign = require("linkmore-design");
 var LmFilterClear = /*#__PURE__*/_react.default.memo(function (_ref) {
   var instance = _ref.instance;
   var state = instance.state,
-      dispatch = instance.dispatch;
+      dispatch = instance.dispatch,
+      onClearChange = instance.onClearChange;
 
   var handleClear = function handleClear() {
-    console.log('state', state);
-    dispatch({
-      type: 'reset'
-    });
+    onClearChange();
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {