dinocollab-core 1.0.21 → 1.0.23

package/README.md

@@ -18,47 +18,6 @@ pnpm add @mui/material@5.17.1 @mui/icons-material@5.17.1 clipboard-copy@4.0.1 re
 pnpm add @types/jest@27.0.1 -D
 ```
 
-## 📦 Cài đặt
-
-DinoForm được đóng gói dưới dạng module nội bộ, bạn có thể import và sử dụng trực tiếp như sau:
-
-```ts
-import DinoForm from 'dino-core/DinoForm'
-```
-
-📌 Thiết lập alias trong `tsconfig.json` để gọn hơn:
-
-```json
-{
-  "paths": {
-    "@dino-core/*": ["<path to>/dino/*"]
-  }
-}
-```
-
-📌 Thiết lập cấu hình build:
-
-Tùy chọn 1: `config-overrides.js`
-
-```js
-addWebpackAlias({
-  'dino-core': path.resolve(__dirname, '<path to>/dino-core/react18')
-})
-```
-
-Tùy chọn 2: `webpack.config.js`
-
-```js
-{
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js', '.mjs'],
-    alias: {
-      'dino-core': path.resolve(__dirname, '<path to>/dino-core/react18'),
-    }
-  }
-}
-```
-
 ## 📦 Build npm - dinocollab-core
 
 ```

package/dist/filter-bar/create.filter-bar.js

@@ -1,2 +1,2 @@
-import{inherits as e,createClass as t,objectSpread2 as r,classCallCheck as l,callSuper as a,defineProperty as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,jsxs as o}from"react/jsx-runtime";import{styled as s,Box as f,ClickAwayListener as u,IconButton as d,InputBase as c}from"@mui/material";import h from"@mui/icons-material/FilterList";import{ButtonClear as p,FilterNotes as S}from"./ui.units.js";import m from"./base.js";import v from"./create.filtered.js";import g from"./create.filter-panel.js";function k(s){var k=g(s),w=v(s);return function(){function v(e){var t;return l(this,v),t=a(this,v,[e]),i(t,"defaultState",{keyword:"",panelState:{anchorEl:null}}),i(t,"filterStateStore",{filter:{}}),i(t,"setFilterState",(function(e){t.props.value||(t.filterStateStore=e),t.props.onChange&&t.props.onChange(e)})),i(t,"refFilterButton",null),i(t,"refSortButton",null),i(t,"refInput",null),i(t,"refBeforeInput",null),i(t,"renderTextField",(function(){return o(f,{component:"label",htmlFor:t.configs.id,sx:{flex:1,display:"flex",alignItems:"flex-end"},children:[n(f,{ref:function(e){return t.refBeforeInput=e},sx:{height:"100%"}}),n(c,{id:t.configs.id,placeholder:t.configs.placeholder,fullWidth:!0,autoComplete:"off",inputRef:function(e){return t.refInput=e},onChange:function(e){return t.setState({keyword:e.target.value})},value:t.state.keyword,onFocus:function(){return t.showPanel("searchInput")},onKeyDown:t.handleKeyDown})]})})),i(t,"handleKeyDown",(function(e){var r=e.keyCode;if(13===r){if(!t.state.keyword)return;var l,a=t.addQuickSearch(t.filterState,s.quickSearch,t.state.keyword);if(a.filterState.details="add",a.isChanged)null===(l=t.refInput)||void 0===l||l.blur(),t.setFilterState(a.filterState),t.setState(t.defaultState)}else if(27===r){var i;null===(i=t.refInput)||void 0===i||i.blur(),t.setState(t.defaultState)}})),i(t,"handleAdd",(function(e,r){var l,a={isChanged:!1,filterState:t.filterState};("field"===e&&r?a=t.patchFilterWithKey(t.filterState,r):"quickSearch"===e&&(a=t.addQuickSearch(t.filterState,s.quickSearch,t.state.keyword)),a.filterState.details="add",a.isChanged)&&(null===(l=t.refInput)||void 0===l||l.blur(),t.setFilterState(a.filterState),t.setState(t.defaultState))})),i(t,"handleRemove",(function(e,r){var l,a={isChanged:!1,filterState:t.filterState};("field"===e&&r?a=t.deleteFilterWithKey(t.filterState,r):"quickSearch"===e&&(a=t.removeQuickSearch(t.filterState)),a.filterState.details="remove",a.isChanged)&&(null===(l=t.refInput)||void 0===l||l.blur(),t.setFilterState(a.filterState),t.forceUpdate())})),i(t,"handleClear",(function(){t.setFilterState({filter:{},details:"remove"}),t.setState(t.defaultState)})),i(t,"showPanel",(function(e){var r=null;switch(e){case"searchInput":r=t.refBeforeInput;break;case"filterButton":r=t.refFilterButton}t.setState({panelState:{anchorEl:r,reason:e}})})),i(t,"closePanel",(function(){return t.setState({panelState:{anchorEl:null}})})),t.state=t.defaultState,t}return e(v,m),t(v,[{key:"filterState",get:function(){var e;return null!==(e=this.props.value)&&void 0!==e?e:this.filterStateStore}},{key:"configs",get:function(){var e,t,r,l;return{id:null!==(e=null!==(t=this.props.id)&&void 0!==t?t:s.id)&&void 0!==e?e:(new Date).getTime().toString(),placeholder:null!==(r=null!==(l=this.props.placeholder)&&void 0!==l?l:s.placeholder)&&void 0!==r?r:"Filter",notes:s.notes}}},{key:"render",value:function(){var e=this;return n(u,{onClickAway:this.closePanel,children:o(y,{children:[n(d,{ref:function(t){return e.refFilterButton=t},onClick:function(){return e.showPanel("filterButton")},children:n(h,{})}),o(C,{children:[n(w,{filterState:this.filterState,onRemove:this.handleRemove}),this.renderTextField()]}),n(p,{visibled:!this.isFilterEmpty(this.filterState),onClick:this.handleClear}),n(S,r({},this.configs.notes)),n(k,r(r({},this.state.panelState),{},{keyword:this.state.keyword,onSubmit:this.handleAdd,onClose:this.closePanel}))]})})}}])}()}var y=s(f)({display:"flex",gap:"8px",width:"100%",borderRadius:"6px",transition:"all linear 0.2s",padding:"2px",backgroundColor:"#fafafa","&:hover":{backgroundColor:"#ededed"}}),C=s(f)({flex:1,minHeight:"40px",display:"flex",flexWrap:"wrap",alignItems:"center",gap:"6px"});export{k as default};
+import{inherits as e,createClass as t,objectSpread2 as r,classCallCheck as l,callSuper as a,defineProperty as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,jsxs as o}from"react/jsx-runtime";import{styled as s,Box as f,ClickAwayListener as u,IconButton as d,InputBase as c}from"@mui/material";import h from"@mui/icons-material/FilterList";import{ButtonClear as p,FilterNotes as S}from"./ui.units.js";import m from"./base.js";import v from"./create.filtered.js";import g from"./create.filter-panel.js";function k(s){var k=g(s),w=v(s);return function(){function v(e){var t;return l(this,v),t=a(this,v,[e]),i(t,"defaultState",{keyword:"",panelState:{anchorEl:null}}),i(t,"filterStateStore",{filter:{}}),i(t,"setFilterState",(function(e){t.props.value||(t.filterStateStore=e),t.props.onChange&&t.props.onChange(e)})),i(t,"refFilterButton",null),i(t,"refSortButton",null),i(t,"refInput",null),i(t,"refBeforeInput",null),i(t,"renderTextField",(function(){return o(f,{component:"label",htmlFor:t.configs.id,sx:{flex:1,display:"flex",alignItems:"flex-end"},children:[n(f,{ref:function(e){return t.refBeforeInput=e},sx:{height:"100%"}}),n(c,{id:t.configs.id,placeholder:t.configs.placeholder,fullWidth:!0,autoComplete:"off",inputRef:function(e){return t.refInput=e},onChange:function(e){return t.setState({keyword:e.target.value})},value:t.state.keyword,onFocus:function(){return t.showPanel("searchInput")},onKeyDown:t.handleKeyDown})]})})),i(t,"handleKeyDown",(function(e){var r=e.keyCode;if(13===r){if(!t.state.keyword)return;var l,a=t.addQuickSearch(t.filterState,s.quickSearch,t.state.keyword);if(a.filterState.details="add",a.isChanged)null===(l=t.refInput)||void 0===l||l.blur(),t.setFilterState(a.filterState),t.setState(t.defaultState)}else if(27===r){var i;null===(i=t.refInput)||void 0===i||i.blur(),t.setState(t.defaultState)}})),i(t,"handleAdd",(function(e,r){var l,a={isChanged:!1,filterState:t.filterState};("field"===e&&r?a=t.patchFilterWithKey(t.filterState,r):"quickSearch"===e&&(a=t.addQuickSearch(t.filterState,s.quickSearch,t.state.keyword)),a.filterState.details="add",a.isChanged)&&(null===(l=t.refInput)||void 0===l||l.blur(),t.setFilterState(a.filterState),t.setState(t.defaultState))})),i(t,"handleRemove",(function(e,r){var l,a={isChanged:!1,filterState:t.filterState};("field"===e&&r?a=t.deleteFilterWithKey(t.filterState,r):"quickSearch"===e&&(a=t.removeQuickSearch(t.filterState)),a.filterState.details="remove",a.isChanged)&&(null===(l=t.refInput)||void 0===l||l.blur(),t.setFilterState(a.filterState),t.forceUpdate())})),i(t,"handleClear",(function(){t.setFilterState({filter:{},details:"remove"}),t.setState(t.defaultState)})),i(t,"showPanel",(function(e){var r=null;switch(e){case"searchInput":r=t.refBeforeInput;break;case"filterButton":r=t.refFilterButton}t.setState({panelState:{anchorEl:r,reason:e}})})),i(t,"closePanel",(function(){return t.setState({panelState:{anchorEl:null}})})),t.state=t.defaultState,t}return e(v,m),t(v,[{key:"filterState",get:function(){var e;return null!==(e=this.props.value)&&void 0!==e?e:this.filterStateStore}},{key:"configs",get:function(){var e,t,r,l;return{id:null!==(e=null!==(t=this.props.id)&&void 0!==t?t:s.id)&&void 0!==e?e:(new Date).getTime().toString(),placeholder:null!==(r=null!==(l=this.props.placeholder)&&void 0!==l?l:s.placeholder)&&void 0!==r?r:"Filter",notes:s.notes}}},{key:"render",value:function(){var e=this;return n(u,{onClickAway:this.closePanel,children:o(y,{children:[n(d,{ref:function(t){return e.refFilterButton=t},onClick:function(){return e.showPanel("filterButton")},children:n(h,{})}),o(C,{children:[n(w,{filterState:this.filterState,onRemove:this.handleRemove}),this.renderTextField()]}),n(p,{visibled:!this.isFilterEmpty(this.filterState),onClick:this.handleClear}),this.configs.notes&&n(S,r({},this.configs.notes)),n(k,r(r({},this.state.panelState),{},{keyword:this.state.keyword,onSubmit:this.handleAdd,onClose:this.closePanel}))]})})}}])}()}var y=s(f)({display:"flex",gap:"8px",width:"100%",borderRadius:"6px",transition:"all linear 0.2s",padding:"2px",backgroundColor:"#fafafa","&:hover":{backgroundColor:"#ededed"}}),C=s(f)({flex:1,minHeight:"40px",display:"flex",flexWrap:"wrap",alignItems:"center",gap:"6px"});export{k as default};
 //# sourceMappingURL=create.filter-bar.js.map

package/dist/filter-bar/create.filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.filter-bar.js","sources":["../../src/filter-bar/create.filter-bar.tsx"],"sourcesContent":["import React, { ComponentType } from 'react'\r\nimport { Box, ClickAwayListener, IconButton, InputBase, styled } from '@mui/material'\r\nimport FilterListIcon from '@mui/icons-material/FilterList'\r\nimport { ButtonClear, FilterNotes } from './ui.units'\r\nimport { IFilterReason, IFilterState, IFilterBarParams, IFilterBarProps, IFilterBarState, IFilterSubmitFunc } from './types'\r\nimport FilterBarBase, { IFilterChange } from './base'\r\nimport CreateFiltered from './create.filtered'\r\nimport CreateFilterPanel from './create.filter-panel'\r\n\r\nfunction CreateFilterBar<T>(params: IFilterBarParams<T>): ComponentType<IFilterBarProps<T>> {\r\n  const FilterPanelInstance = CreateFilterPanel<T>(params)\r\n  const FilteredInstance = CreateFiltered<T>(params)\r\n\r\n  class FilterBar extends FilterBarBase<IFilterBarProps<T>, IFilterBarState, T> {\r\n    defaultState: IFilterBarState = { keyword: '', panelState: { anchorEl: null } }\r\n    constructor(props: IFilterBarProps<T>) {\r\n      super(props)\r\n      this.state = this.defaultState\r\n    }\r\n\r\n    filterStateStore: IFilterState<T> = { filter: {} }\r\n    get filterState(): IFilterState<T> {\r\n      return this.props.value ?? this.filterStateStore\r\n    }\r\n\r\n    setFilterState = (filterState: IFilterState<T>) => {\r\n      if (!this.props.value) {\r\n        this.filterStateStore = filterState\r\n      }\r\n      this.props.onChange && this.props.onChange(filterState)\r\n    }\r\n\r\n    get configs() {\r\n      return {\r\n        id: this.props.id ?? params.id ?? new Date().getTime().toString(),\r\n        placeholder: this.props.placeholder ?? params.placeholder ?? 'Filter',\r\n        notes: params.notes\r\n      }\r\n    }\r\n\r\n    refFilterButton: HTMLButtonElement | null = null\r\n    refSortButton: HTMLButtonElement | null = null\r\n    render() {\r\n      return (\r\n        <ClickAwayListener onClickAway={this.closePanel}>\r\n          <Wrapper>\r\n            <IconButton ref={(ref) => (this.refFilterButton = ref)} onClick={() => this.showPanel('filterButton')}>\r\n              <FilterListIcon />\r\n            </IconButton>\r\n            <Content>\r\n              <FilteredInstance filterState={this.filterState} onRemove={this.handleRemove} />\r\n              {this.renderTextField()}\r\n            </Content>\r\n            <ButtonClear visibled={!this.isFilterEmpty(this.filterState)} onClick={this.handleClear} />\r\n            {/* <IconButton ref={(ref) => (this.refSortButton = ref)} onClick={() => this.showPanel('sortButton')}>\r\n              <SwapVertIcon />\r\n            </IconButton> */}\r\n            <FilterNotes {...this.configs.notes} />\r\n            <FilterPanelInstance {...this.state.panelState} keyword={this.state.keyword} onSubmit={this.handleAdd} onClose={this.closePanel} />\r\n          </Wrapper>\r\n        </ClickAwayListener>\r\n      )\r\n    }\r\n\r\n    refInput: HTMLInputElement | null = null\r\n    refBeforeInput: HTMLElement | null = null\r\n    renderTextField = () => (\r\n      <Box component='label' htmlFor={this.configs.id} sx={{ flex: 1, display: 'flex', alignItems: 'flex-end' }}>\r\n        <Box ref={(ref: HTMLElement) => (this.refBeforeInput = ref)} sx={{ height: '100%' }} />\r\n        <InputBase\r\n          id={this.configs.id}\r\n          placeholder={this.configs.placeholder}\r\n          fullWidth\r\n          autoComplete='off'\r\n          inputRef={(ref: HTMLInputElement) => (this.refInput = ref)}\r\n          onChange={(event) => this.setState({ keyword: event.target.value })}\r\n          value={this.state.keyword}\r\n          onFocus={() => this.showPanel('searchInput')}\r\n          onKeyDown={this.handleKeyDown}\r\n        />\r\n      </Box>\r\n    )\r\n\r\n    handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n      const keyCode: number = event.keyCode\r\n      if (keyCode === 13) {\r\n        if (!this.state.keyword) return\r\n        const temp = this.addQuickSearch(this.filterState, params.quickSearch, this.state.keyword)\r\n        temp.filterState.details = 'add'\r\n        if (!!temp.isChanged) {\r\n          this.refInput?.blur()\r\n          this.setFilterState(temp.filterState)\r\n          this.setState(this.defaultState)\r\n        }\r\n      } else if (keyCode === 27) {\r\n        this.refInput?.blur()\r\n        this.setState(this.defaultState)\r\n      }\r\n    }\r\n\r\n    handleAdd: IFilterSubmitFunc<T> = (mode, data) => {\r\n      let temp: IFilterChange<T> = { isChanged: false, filterState: this.filterState }\r\n      if (mode === 'field' && !!data) {\r\n        temp = this.patchFilterWithKey(this.filterState, data)\r\n      } else if (mode === 'quickSearch') {\r\n        temp = this.addQuickSearch(this.filterState, params.quickSearch, this.state.keyword)\r\n      }\r\n      temp.filterState.details = 'add'\r\n      if (!!temp.isChanged) {\r\n        this.refInput?.blur()\r\n        this.setFilterState(temp.filterState)\r\n        this.setState(this.defaultState)\r\n      }\r\n    }\r\n\r\n    handleRemove: IFilterSubmitFunc<T> = (mode, data) => {\r\n      let temp: IFilterChange<T> = { isChanged: false, filterState: this.filterState }\r\n      if (mode === 'field' && !!data) {\r\n        temp = this.deleteFilterWithKey(this.filterState, data)\r\n      } else if (mode === 'quickSearch') {\r\n        temp = this.removeQuickSearch(this.filterState)\r\n      }\r\n      temp.filterState.details = 'remove'\r\n      if (!!temp.isChanged) {\r\n        this.refInput?.blur()\r\n        this.setFilterState(temp.filterState)\r\n        this.forceUpdate()\r\n      }\r\n    }\r\n\r\n    handleClear = () => {\r\n      this.setFilterState({ filter: {}, details: 'remove' })\r\n      this.setState(this.defaultState)\r\n    }\r\n\r\n    showPanel = (reason: IFilterReason) => {\r\n      let anchorEl = null\r\n      switch (reason) {\r\n        case 'searchInput':\r\n          anchorEl = this.refBeforeInput\r\n          break\r\n        case 'filterButton':\r\n          anchorEl = this.refFilterButton\r\n          break\r\n        // case 'sortButton':\r\n        //   anchorEl = this.refSortButton\r\n        //   break\r\n        default:\r\n          break\r\n      }\r\n      this.setState({ panelState: { anchorEl, reason } })\r\n    }\r\n\r\n    closePanel = () => this.setState({ panelState: { anchorEl: null } })\r\n  }\r\n\r\n  return FilterBar\r\n}\r\n\r\nexport default CreateFilterBar\r\n\r\nconst Wrapper = styled(Box)({\r\n  display: 'flex',\r\n  gap: '8px',\r\n  width: '100%',\r\n  borderRadius: '6px',\r\n  transition: 'all linear 0.2s',\r\n  padding: '2px',\r\n  backgroundColor: '#fafafa',\r\n  '&:hover': { backgroundColor: '#ededed' }\r\n})\r\n\r\nconst Content = styled(Box)({\r\n  flex: 1,\r\n  minHeight: '40px',\r\n  display: 'flex',\r\n  flexWrap: 'wrap',\r\n  alignItems: 'center',\r\n  gap: '6px'\r\n})\r\n"],"names":["CreateFilterBar","params","FilterPanelInstance","CreateFilterPanel","FilteredInstance","CreateFiltered","FilterBar","props","_this","_classCallCheck","_callSuper","_defineProperty","keyword","panelState","anchorEl","filter","filterState","value","filterStateStore","onChange","_jsxs","Box","component","htmlFor","configs","id","sx","flex","display","alignItems","children","_jsx","ref","refBeforeInput","height","InputBase","placeholder","fullWidth","autoComplete","inputRef","refInput","event","setState","target","state","onFocus","showPanel","onKeyDown","handleKeyDown","keyCode","_this$refInput","temp","addQuickSearch","quickSearch","details","isChanged","blur","setFilterState","defaultState","_this$refInput2","mode","data","_this$refInput3","patchFilterWithKey","_this$refInput4","deleteFilterWithKey","removeQuickSearch","forceUpdate","reason","refFilterButton","_inherits","FilterBarBase","_createClass","key","get","_this$props$value","this","_ref2","_this$props$id","_ref3","_this$props$placehold","Date","getTime","toString","notes","_this2","ClickAwayListener","onClickAway","closePanel","Wrapper","IconButton","onClick","FilterListIcon","Content","onRemove","handleRemove","renderTextField","ButtonClear","visibled","isFilterEmpty","handleClear","FilterNotes","_objectSpread","onSubmit","handleAdd","onClose","styled","gap","width","borderRadius","transition","padding","backgroundColor","minHeight","flexWrap"],"mappings":"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"}
+{"version":3,"file":"create.filter-bar.js","sources":["../../src/filter-bar/create.filter-bar.tsx"],"sourcesContent":["import React, { ComponentType } from 'react'\r\nimport { Box, ClickAwayListener, IconButton, InputBase, styled } from '@mui/material'\r\nimport FilterListIcon from '@mui/icons-material/FilterList'\r\nimport { ButtonClear, FilterNotes } from './ui.units'\r\nimport { IFilterReason, IFilterState, IFilterBarParams, IFilterBarProps, IFilterBarState, IFilterSubmitFunc } from './types'\r\nimport FilterBarBase, { IFilterChange } from './base'\r\nimport CreateFiltered from './create.filtered'\r\nimport CreateFilterPanel from './create.filter-panel'\r\n\r\nfunction CreateFilterBar<T>(params: IFilterBarParams<T>): ComponentType<IFilterBarProps<T>> {\r\n  const FilterPanelInstance = CreateFilterPanel<T>(params)\r\n  const FilteredInstance = CreateFiltered<T>(params)\r\n\r\n  class FilterBar extends FilterBarBase<IFilterBarProps<T>, IFilterBarState, T> {\r\n    defaultState: IFilterBarState = { keyword: '', panelState: { anchorEl: null } }\r\n    constructor(props: IFilterBarProps<T>) {\r\n      super(props)\r\n      this.state = this.defaultState\r\n    }\r\n\r\n    filterStateStore: IFilterState<T> = { filter: {} }\r\n    get filterState(): IFilterState<T> {\r\n      return this.props.value ?? this.filterStateStore\r\n    }\r\n\r\n    setFilterState = (filterState: IFilterState<T>) => {\r\n      if (!this.props.value) {\r\n        this.filterStateStore = filterState\r\n      }\r\n      this.props.onChange && this.props.onChange(filterState)\r\n    }\r\n\r\n    get configs() {\r\n      return {\r\n        id: this.props.id ?? params.id ?? new Date().getTime().toString(),\r\n        placeholder: this.props.placeholder ?? params.placeholder ?? 'Filter',\r\n        notes: params.notes\r\n      }\r\n    }\r\n\r\n    refFilterButton: HTMLButtonElement | null = null\r\n    refSortButton: HTMLButtonElement | null = null\r\n    render() {\r\n      return (\r\n        <ClickAwayListener onClickAway={this.closePanel}>\r\n          <Wrapper>\r\n            <IconButton ref={(ref) => (this.refFilterButton = ref)} onClick={() => this.showPanel('filterButton')}>\r\n              <FilterListIcon />\r\n            </IconButton>\r\n            <Content>\r\n              <FilteredInstance filterState={this.filterState} onRemove={this.handleRemove} />\r\n              {this.renderTextField()}\r\n            </Content>\r\n            <ButtonClear visibled={!this.isFilterEmpty(this.filterState)} onClick={this.handleClear} />\r\n            {/* <IconButton ref={(ref) => (this.refSortButton = ref)} onClick={() => this.showPanel('sortButton')}>\r\n              <SwapVertIcon />\r\n            </IconButton> */}\r\n            {this.configs.notes && <FilterNotes {...this.configs.notes} />}\r\n            <FilterPanelInstance {...this.state.panelState} keyword={this.state.keyword} onSubmit={this.handleAdd} onClose={this.closePanel} />\r\n          </Wrapper>\r\n        </ClickAwayListener>\r\n      )\r\n    }\r\n\r\n    refInput: HTMLInputElement | null = null\r\n    refBeforeInput: HTMLElement | null = null\r\n    renderTextField = () => (\r\n      <Box component='label' htmlFor={this.configs.id} sx={{ flex: 1, display: 'flex', alignItems: 'flex-end' }}>\r\n        <Box ref={(ref: HTMLElement) => (this.refBeforeInput = ref)} sx={{ height: '100%' }} />\r\n        <InputBase\r\n          id={this.configs.id}\r\n          placeholder={this.configs.placeholder}\r\n          fullWidth\r\n          autoComplete='off'\r\n          inputRef={(ref: HTMLInputElement) => (this.refInput = ref)}\r\n          onChange={(event) => this.setState({ keyword: event.target.value })}\r\n          value={this.state.keyword}\r\n          onFocus={() => this.showPanel('searchInput')}\r\n          onKeyDown={this.handleKeyDown}\r\n        />\r\n      </Box>\r\n    )\r\n\r\n    handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n      const keyCode: number = event.keyCode\r\n      if (keyCode === 13) {\r\n        if (!this.state.keyword) return\r\n        const temp = this.addQuickSearch(this.filterState, params.quickSearch, this.state.keyword)\r\n        temp.filterState.details = 'add'\r\n        if (!!temp.isChanged) {\r\n          this.refInput?.blur()\r\n          this.setFilterState(temp.filterState)\r\n          this.setState(this.defaultState)\r\n        }\r\n      } else if (keyCode === 27) {\r\n        this.refInput?.blur()\r\n        this.setState(this.defaultState)\r\n      }\r\n    }\r\n\r\n    handleAdd: IFilterSubmitFunc<T> = (mode, data) => {\r\n      let temp: IFilterChange<T> = { isChanged: false, filterState: this.filterState }\r\n      if (mode === 'field' && !!data) {\r\n        temp = this.patchFilterWithKey(this.filterState, data)\r\n      } else if (mode === 'quickSearch') {\r\n        temp = this.addQuickSearch(this.filterState, params.quickSearch, this.state.keyword)\r\n      }\r\n      temp.filterState.details = 'add'\r\n      if (!!temp.isChanged) {\r\n        this.refInput?.blur()\r\n        this.setFilterState(temp.filterState)\r\n        this.setState(this.defaultState)\r\n      }\r\n    }\r\n\r\n    handleRemove: IFilterSubmitFunc<T> = (mode, data) => {\r\n      let temp: IFilterChange<T> = { isChanged: false, filterState: this.filterState }\r\n      if (mode === 'field' && !!data) {\r\n        temp = this.deleteFilterWithKey(this.filterState, data)\r\n      } else if (mode === 'quickSearch') {\r\n        temp = this.removeQuickSearch(this.filterState)\r\n      }\r\n      temp.filterState.details = 'remove'\r\n      if (!!temp.isChanged) {\r\n        this.refInput?.blur()\r\n        this.setFilterState(temp.filterState)\r\n        this.forceUpdate()\r\n      }\r\n    }\r\n\r\n    handleClear = () => {\r\n      this.setFilterState({ filter: {}, details: 'remove' })\r\n      this.setState(this.defaultState)\r\n    }\r\n\r\n    showPanel = (reason: IFilterReason) => {\r\n      let anchorEl = null\r\n      switch (reason) {\r\n        case 'searchInput':\r\n          anchorEl = this.refBeforeInput\r\n          break\r\n        case 'filterButton':\r\n          anchorEl = this.refFilterButton\r\n          break\r\n        // case 'sortButton':\r\n        //   anchorEl = this.refSortButton\r\n        //   break\r\n        default:\r\n          break\r\n      }\r\n      this.setState({ panelState: { anchorEl, reason } })\r\n    }\r\n\r\n    closePanel = () => this.setState({ panelState: { anchorEl: null } })\r\n  }\r\n\r\n  return FilterBar\r\n}\r\n\r\nexport default CreateFilterBar\r\n\r\nconst Wrapper = styled(Box)({\r\n  display: 'flex',\r\n  gap: '8px',\r\n  width: '100%',\r\n  borderRadius: '6px',\r\n  transition: 'all linear 0.2s',\r\n  padding: '2px',\r\n  backgroundColor: '#fafafa',\r\n  '&:hover': { backgroundColor: '#ededed' }\r\n})\r\n\r\nconst Content = styled(Box)({\r\n  flex: 1,\r\n  minHeight: '40px',\r\n  display: 'flex',\r\n  flexWrap: 'wrap',\r\n  alignItems: 'center',\r\n  gap: '6px'\r\n})\r\n"],"names":["CreateFilterBar","params","FilterPanelInstance","CreateFilterPanel","FilteredInstance","CreateFiltered","FilterBar","props","_this","_classCallCheck","_callSuper","_defineProperty","keyword","panelState","anchorEl","filter","filterState","value","filterStateStore","onChange","_jsxs","Box","component","htmlFor","configs","id","sx","flex","display","alignItems","children","_jsx","ref","refBeforeInput","height","InputBase","placeholder","fullWidth","autoComplete","inputRef","refInput","event","setState","target","state","onFocus","showPanel","onKeyDown","handleKeyDown","keyCode","_this$refInput","temp","addQuickSearch","quickSearch","details","isChanged","blur","setFilterState","defaultState","_this$refInput2","mode","data","_this$refInput3","patchFilterWithKey","_this$refInput4","deleteFilterWithKey","removeQuickSearch","forceUpdate","reason","refFilterButton","_inherits","FilterBarBase","_createClass","key","get","_this$props$value","this","_ref2","_this$props$id","_ref3","_this$props$placehold","Date","getTime","toString","notes","_this2","ClickAwayListener","onClickAway","closePanel","Wrapper","IconButton","onClick","FilterListIcon","Content","onRemove","handleRemove","renderTextField","ButtonClear","visibled","isFilterEmpty","handleClear","FilterNotes","_objectSpread","onSubmit","handleAdd","onClose","styled","gap","width","borderRadius","transition","padding","backgroundColor","minHeight","flexWrap"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinocollab-core",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",