dinocollab-core 1.1.9 → 1.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/data-view/create.active-filters-panel.js +1 -1
- package/dist/data-view/create.active-filters-panel.js.map +1 -1
- package/dist/data-view/create.data-view.js +1 -1
- package/dist/data-view/create.data-view.js.map +1 -1
- package/dist/data-view/create.pagination-bar.js +1 -1
- package/dist/data-view/create.pagination-bar.js.map +1 -1
- package/dist/types/data-view/create.data-view.d.ts +0 -1
- package/dist/types/data-view/create.pagination-bar.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e,inherits as t,createClass as i,classCallCheck as r,callSuper as a}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,Fragment as l,jsxs as o}from"react/jsx-runtime";import{Component as c,Fragment as s}from"react";import{styled as d,Box as u,Collapse as m,Typography as v,Chip as f}from"@mui/material";import{createFilterStore as p}from"./filter-store.js";import{ClearAllButton as h,mapSortConfigs as
|
|
1
|
+
import{defineProperty as e,inherits as t,createClass as i,classCallCheck as r,callSuper as a}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,Fragment as l,jsxs as o}from"react/jsx-runtime";import{Component as c,Fragment as s}from"react";import{styled as d,Box as u,Collapse as m,Typography as v,Chip as f}from"@mui/material";import{createFilterStore as p}from"./filter-store.js";import{ClearAllButton as h,mapSortConfigs as x}from"./ui.units.js";import{mapDataViewContext as C}from"./context.js";import{formatDatetime as g}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"react-router-dom";import"../utils/query-param.js";import{mapDateLogicText as S}from"./helpers.js";var b={root:"ActiveFiltersPanel-root",content:"ActiveFiltersPanel-content",item:"ActiveFiltersPanel-item",itemContent:"ActiveFiltersPanel-itemContent",itemChip:"ActiveFiltersPanel-itemChip",removeButton:"ActiveFiltersPanel-removeButton",overlay:"ActiveFiltersPanel-overlay"};function w(){return function(){function d(t){var i;return r(this,d),i=a(this,d,[t]),e(i,"handleAnimationExited",(function(){i.setState({isClosing:!0})})),e(i,"renderItems",(function(e){var t;return o(u,{className:b.item,children:[o(v,{variant:"caption",sx:{fontWeight:700},children:[e.label||(null===(t=e.field)||void 0===t?void 0:t.toString()),":"]}),e.items.map((function(t){return n(f,{clickable:!0,size:"small",label:t.label||t.value,className:b.itemChip,onDelete:function(){e.isQuickSearch?i.removeQuickSearch(t):e.field&&i.removeFilter(e.field,t)}},t.value)}))]})})),e(i,"renderFilters",(function(){var e,t=(null===(e=i.dataViewContext.filterState)||void 0===e?void 0:e.filter)||{},r=Object.keys(t);return 0===r.length?n(l,{}):r.map((function(e){var r,a=(null!==(r=t[e])&&void 0!==r?r:[]).reduce((function(e,t){var i,r,a,n,l=t.label||(null===(i=t.value)||void 0===i?void 0:i.toString());"date"===t.type&&t.dateLogic&&(l="".concat(S[t.dateLogic]," ").concat(g(null!==(a=null===(n=t.value)||void 0===n?void 0:n.toString())&&void 0!==a?a:"","style2")));return t.value&&e.push({value:null===(r=t.value)||void 0===r?void 0:r.toString(),label:l}),e}),[]);return n(s,{children:i.renderItems({field:e,label:e.toString(),items:a})},e.toString())}))})),e(i,"renderSort",(function(){var e,t,r=null===(e=i.dataViewContext.filterState)||void 0===e?void 0:e.sort;if(!r)return n(l,{});var a=null===(t=i.dataViewContext.filterBarConfigs.fields)||void 0===t?void 0:t[r.field],c=(null==a?void 0:a.label)||r.field.toString(),s=x[r.direction];return o(u,{className:b.item,children:[n(v,{variant:"caption",sx:{fontWeight:700},children:"Sort:"}),n(f,{clickable:!0,size:"small",label:o(u,{sx:{display:"flex",alignItems:"center",gap:.5},children:[n("span",{children:c}),s.icon]}),className:b.itemChip,onClick:i.toggleSortDirection,onDelete:function(){return i.removeSort()},title:"".concat(c," - ").concat(s.title)})]})})),e(i,"removeFilter",(function(e,t){var r=p(i.dataViewContext.filterState).removeFilterItem(e,t.value,{reason:"filter"});i.dataViewContext.onFilterStateChange(r.build())})),e(i,"removeQuickSearch",(function(e){var t=p(i.dataViewContext.filterState).removeQuickSearchItem(e.value,{reason:"quickSearch"});i.dataViewContext.onFilterStateChange(t.build())})),e(i,"removeSort",(function(){var e=p(i.dataViewContext.filterState).removeSort({reason:"sort"});i.dataViewContext.onFilterStateChange(e.build())})),e(i,"toggleSortDirection",(function(){var e=p(i.dataViewContext.filterState).toggleSortDirection({reason:"sort"});i.dataViewContext.onFilterStateChange(e.build())})),e(i,"handleClearAll",(function(){var e=i.dataViewContext.filterBarConfigs.defaultValue||{},t=p(i.dataViewContext.filterState,e).reset();i.dataViewContext.onFilterStateChange(t.build())})),i.state={data:null,isClosing:!1},i}return t(d,c),i(d,[{key:"render",value:function(){var e=this;return C((function(t){if(e.dataViewContext=t,!e.dataViewContext)return n(l,{});var i=e.dataViewContext.filterBarConfigs.defaultValue,r=p(e.dataViewContext.filterState,i).isEmpty();return n(m,{in:!r,timeout:300,unmountOnExit:!0,orientation:"vertical",onExited:e.handleAnimationExited,children:o(V,{className:b.root,children:[o(u,{className:b.content,children:[e.renderSort(),e.renderQuickSearch(),e.renderFilters(),!r&&n(h,{className:b.removeButton,onClick:e.handleClearAll})]}),e.props.loading&&n(u,{className:b.overlay})]})})}))}},{key:"renderQuickSearch",value:function(){var e,t=(null===(e=this.dataViewContext.filterState)||void 0===e?void 0:e.quickSearch)||[],i=(Array.isArray(t)?t:[t]).map((function(e){return{value:e}}));return i&&0!==i.length?this.renderItems({label:"Quick search",items:i,isQuickSearch:!0}):n(l,{})}}])}()}var V=d(u)(e(e(e(e(e({position:"relative"},".".concat(b.content),{display:"flex",alignItems:"center",flexWrap:"wrap",gap:"8px"}),".".concat(b.item),{display:"flex",flexWrap:"wrap",border:"dashed 1px var(--color-divider, rgba(145 160 170 / 20%))",borderRadius:"4px",alignItems:"center",padding:"6px 8px",gap:"8px"}),".".concat(b.itemContent),{display:"flex",flexWrap:"wrap",gap:"4px"}),".".concat(b.itemChip),{borderRadius:"4px"}),".".concat(b.overlay),{position:"absolute",top:0,left:0,width:"100%",height:"100%",backdropFilter:"blur(1px)"}));export{b as activeFiltersPanelClasses,w as default};
|
|
2
2
|
//# sourceMappingURL=create.active-filters-panel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.active-filters-panel.js","sources":["../../src/data-view/create.active-filters-panel.tsx"],"sourcesContent":["import React, { Component, ComponentType, Fragment } from 'react'\r\nimport { Box, Chip, Collapse, styled, Typography } from '@mui/material'\r\nimport { createFilterStore } from './filter-store'\r\nimport { ClearAllButton, mapSortConfigs } from './ui.units'\r\nimport { IDataViewContext, mapDataViewContext } from './context'\r\nimport { IFilterItem, IFilterMap, IFilterState, IItemBase } from './types'\r\nimport { formatDatetime } from '../utils'\r\nimport { mapDateLogicText } from './helpers'\r\n\r\nexport const activeFiltersPanelClasses = {\r\n root: 'ActiveFiltersPanel-root',\r\n content: 'ActiveFiltersPanel-content',\r\n item: 'ActiveFiltersPanel-item',\r\n itemContent: 'ActiveFiltersPanel-itemContent',\r\n itemChip: 'ActiveFiltersPanel-itemChip',\r\n removeButton: 'ActiveFiltersPanel-removeButton',\r\n overlay: 'ActiveFiltersPanel-overlay'\r\n}\r\n\r\ninterface IRenderItemsParams<T> {\r\n field?: keyof T\r\n label?: string\r\n items: IItemBase[]\r\n isQuickSearch?: boolean\r\n}\r\n\r\nexport interface IActiveFiltersPanelProps {\r\n loading?: boolean\r\n}\r\n\r\nexport interface IActiveFiltersPanelState<T> {\r\n data: IFilterState<T> | null\r\n isClosing: boolean\r\n}\r\n\r\nfunction createActiveFiltersPanel<T>(): ComponentType<IActiveFiltersPanelProps> {\r\n class ActiveFiltersPanel extends Component<IActiveFiltersPanelProps, IActiveFiltersPanelState<T>> {\r\n declare dataViewContext: IDataViewContext<T>\r\n\r\n constructor(props: IActiveFiltersPanelProps) {\r\n super(props)\r\n this.state = {\r\n data: null,\r\n isClosing: false\r\n }\r\n }\r\n\r\n // Handle animation completion\r\n private handleAnimationExited = () => {\r\n this.setState({ isClosing: true })\r\n }\r\n\r\n render() {\r\n return mapDataViewContext((context) => {\r\n this.dataViewContext = context\r\n if (!this.dataViewContext) return <></>\r\n const { defaultValue } = this.dataViewContext.filterBarConfigs\r\n const isEmpty = createFilterStore(this.dataViewContext.filterState, defaultValue).isEmpty()\r\n return (\r\n <Collapse in={!isEmpty} timeout={300} unmountOnExit orientation='vertical' onExited={this.handleAnimationExited}>\r\n <Wrap className={activeFiltersPanelClasses.root}>\r\n <Box className={activeFiltersPanelClasses.content}>\r\n {this.renderSort()}\r\n {this.renderQuickSearch()}\r\n {this.renderFilters()}\r\n {!isEmpty && <ClearAllButton className={activeFiltersPanelClasses.removeButton} onClick={this.handleClearAll} />}\r\n </Box>\r\n {this.props.loading && <Box className={activeFiltersPanelClasses.overlay} />}\r\n </Wrap>\r\n </Collapse>\r\n )\r\n })\r\n }\r\n\r\n renderItems = (p: IRenderItemsParams<T>) => (\r\n <Box className={activeFiltersPanelClasses.item}>\r\n <Typography variant='caption' sx={{ fontWeight: 700 }}>\r\n {p.label || p.field?.toString()}:\r\n </Typography>\r\n <Box className={activeFiltersPanelClasses.itemContent}>\r\n {p.items.map((item) => (\r\n <Chip\r\n key={item.value}\r\n clickable\r\n size='small'\r\n label={item.label || item.value}\r\n className={activeFiltersPanelClasses.itemChip}\r\n onDelete={() => {\r\n if (p.isQuickSearch) {\r\n this.removeQuickSearch(item)\r\n return\r\n }\r\n if (!p.field) return\r\n this.removeFilter(p.field, item)\r\n }}\r\n />\r\n ))}\r\n </Box>\r\n </Box>\r\n )\r\n\r\n renderQuickSearch() {\r\n const val = this.dataViewContext.filterState?.quickSearch || []\r\n const list = (Array.isArray(val) ? val : [val]).map((value) => ({ value }))\r\n if (!list || list.length === 0) return <></>\r\n return this.renderItems({ label: 'Quick search', items: list, isQuickSearch: true })\r\n }\r\n\r\n renderFilters = () => {\r\n const filter: IFilterMap<T> = this.dataViewContext.filterState?.filter || {}\r\n const keys = Object.keys(filter) as Array<keyof T>\r\n if (keys.length === 0) return <></>\r\n return keys.map((key) => {\r\n const filterItems = (filter[key] ?? []) as IFilterItem[]\r\n const items = filterItems.reduce<IItemBase[]>((acc, item) => {\r\n let label = item.label || item.value?.toString()\r\n if (item.type === 'date' && item.dateLogic) {\r\n label = `${mapDateLogicText[item.dateLogic]} ${formatDatetime(item.value?.toString() ?? '', 'style2')}`\r\n }\r\n if (!!item.value) acc.push({ value: item.value?.toString(), label })\r\n return acc\r\n }, [])\r\n return <Fragment key={key.toString()}>{this.renderItems({ field: key, label: key.toString(), items })}</Fragment>\r\n })\r\n }\r\n\r\n renderSort = () => {\r\n const sort = this.dataViewContext.filterState?.sort\r\n if (!sort) return <></>\r\n\r\n const fieldConfig = this.dataViewContext.filterBarConfigs.fields?.[sort.field]\r\n const fieldLabel = fieldConfig?.label || sort.field.toString()\r\n const sortConfig = mapSortConfigs[sort.direction]\r\n\r\n return (\r\n <Box className={activeFiltersPanelClasses.item}>\r\n <Typography variant='caption' sx={{ fontWeight: 700 }}>\r\n Sort:\r\n </Typography>\r\n <Box className={activeFiltersPanelClasses.itemContent}>\r\n <Chip\r\n clickable\r\n size='small'\r\n label={\r\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\r\n <span>{fieldLabel}</span>\r\n {sortConfig.icon}\r\n </Box>\r\n }\r\n className={activeFiltersPanelClasses.itemChip}\r\n onClick={this.toggleSortDirection}\r\n onDelete={() => this.removeSort()}\r\n title={`${fieldLabel} - ${sortConfig.title}`}\r\n />\r\n </Box>\r\n </Box>\r\n )\r\n }\r\n\r\n removeFilter = (field: keyof T, item: IItemBase) => {\r\n const store = createFilterStore(this.dataViewContext.filterState).removeFilterItem(field, item.value, { reason: 'filter' })\r\n this.dataViewContext.onFilterStateChange(store.build())\r\n }\r\n\r\n removeQuickSearch = (item: IItemBase) => {\r\n const store = createFilterStore(this.dataViewContext.filterState).removeQuickSearchItem(item.value, { reason: 'quickSearch' })\r\n this.dataViewContext.onFilterStateChange(store.build())\r\n }\r\n\r\n removeSort = () => {\r\n const store = createFilterStore(this.dataViewContext.filterState).removeSort({ reason: 'sort' })\r\n this.dataViewContext.onFilterStateChange(store.build())\r\n }\r\n\r\n toggleSortDirection = () => {\r\n const store = createFilterStore(this.dataViewContext.filterState).toggleSortDirection({ reason: 'sort' })\r\n this.dataViewContext.onFilterStateChange(store.build())\r\n }\r\n\r\n handleClearAll = () => {\r\n const fValue = this.dataViewContext.filterBarConfigs.defaultValue || {}\r\n // Trực tiếp clear data, logic đóng sẽ được xử lý tự động\r\n const store = createFilterStore(this.dataViewContext.filterState, fValue).reset()\r\n this.dataViewContext.onFilterStateChange(store.build())\r\n }\r\n }\r\n\r\n return ActiveFiltersPanel\r\n}\r\n\r\nexport default createActiveFiltersPanel\r\n\r\nconst Wrap = styled(Box)({\r\n position: 'relative',\r\n [`.${activeFiltersPanelClasses.content}`]: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n flexWrap: 'wrap',\r\n gap: '8px'\r\n },\r\n [`.${activeFiltersPanelClasses.item}`]: {\r\n display: 'flex',\r\n border: 'dashed 1px var(--color-divider, rgba(145 160 170 / 20%))',\r\n borderRadius: '4px',\r\n alignItems: 'center',\r\n padding: '6px 8px',\r\n gap: '8px'\r\n },\r\n [`.${activeFiltersPanelClasses.itemContent}`]: {\r\n display: 'flex',\r\n gap: '4px'\r\n },\r\n [`.${activeFiltersPanelClasses.itemChip}`]: {\r\n borderRadius: '4px'\r\n },\r\n [`.${activeFiltersPanelClasses.overlay}`]: {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n backdropFilter: 'blur(1px)'\r\n }\r\n})\r\n"],"names":["activeFiltersPanelClasses","root","content","item","itemContent","itemChip","removeButton","overlay","createActiveFiltersPanel","ActiveFiltersPanel","props","_this","_classCallCheck","_callSuper","_defineProperty","setState","isClosing","p","_p$field","_jsxs","Box","className","children","Typography","variant","sx","fontWeight","label","field","toString","_jsx","items","map","Chip","clickable","size","value","onDelete","isQuickSearch","removeQuickSearch","removeFilter","_this$dataViewContext","filter","dataViewContext","filterState","keys","Object","length","key","_filter$key","reduce","acc","_item$value","_item$value3","_item$value$toString","_item$value2","type","dateLogic","concat","mapDateLogicText","formatDatetime","push","Fragment","renderItems","_this$dataViewContext2","_this$dataViewContext3","sort","fieldConfig","filterBarConfigs","fields","fieldLabel","sortConfig","mapSortConfigs","direction","display","alignItems","gap","icon","onClick","toggleSortDirection","removeSort","title","store","createFilterStore","removeFilterItem","reason","onFilterStateChange","build","removeQuickSearchItem","fValue","defaultValue","reset","state","data","_inherits","Component","_createClass","_this2","this","mapDataViewContext","context","isEmpty","Collapse","in","timeout","unmountOnExit","orientation","onExited","handleAnimationExited","Wrap","renderSort","renderQuickSearch","renderFilters","ClearAllButton","handleClearAll","loading","_this$dataViewContext4","val","quickSearch","list","Array","isArray","styled","position","flexWrap","border","borderRadius","padding","top","left","width","height","backdropFilter"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.active-filters-panel.js","sources":["../../src/data-view/create.active-filters-panel.tsx"],"sourcesContent":["import React, { Component, ComponentType, Fragment } from 'react'\r\nimport { Box, Chip, Collapse, styled, Typography } from '@mui/material'\r\nimport { createFilterStore } from './filter-store'\r\nimport { ClearAllButton, mapSortConfigs } from './ui.units'\r\nimport { IDataViewContext, mapDataViewContext } from './context'\r\nimport { IFilterItem, IFilterMap, IFilterState, IItemBase } from './types'\r\nimport { formatDatetime } from '../utils'\r\nimport { mapDateLogicText } from './helpers'\r\n\r\nexport const activeFiltersPanelClasses = {\r\n root: 'ActiveFiltersPanel-root',\r\n content: 'ActiveFiltersPanel-content',\r\n item: 'ActiveFiltersPanel-item',\r\n itemContent: 'ActiveFiltersPanel-itemContent',\r\n itemChip: 'ActiveFiltersPanel-itemChip',\r\n removeButton: 'ActiveFiltersPanel-removeButton',\r\n overlay: 'ActiveFiltersPanel-overlay'\r\n}\r\n\r\ninterface IRenderItemsParams<T> {\r\n field?: keyof T\r\n label?: string\r\n items: IItemBase[]\r\n isQuickSearch?: boolean\r\n}\r\n\r\nexport interface IActiveFiltersPanelProps {\r\n loading?: boolean\r\n}\r\n\r\nexport interface IActiveFiltersPanelState<T> {\r\n data: IFilterState<T> | null\r\n isClosing: boolean\r\n}\r\n\r\nfunction createActiveFiltersPanel<T>(): ComponentType<IActiveFiltersPanelProps> {\r\n class ActiveFiltersPanel extends Component<IActiveFiltersPanelProps, IActiveFiltersPanelState<T>> {\r\n declare dataViewContext: IDataViewContext<T>\r\n\r\n constructor(props: IActiveFiltersPanelProps) {\r\n super(props)\r\n this.state = {\r\n data: null,\r\n isClosing: false\r\n }\r\n }\r\n\r\n // Handle animation completion\r\n private handleAnimationExited = () => {\r\n this.setState({ isClosing: true })\r\n }\r\n\r\n render() {\r\n return mapDataViewContext((context) => {\r\n this.dataViewContext = context\r\n if (!this.dataViewContext) return <></>\r\n const { defaultValue } = this.dataViewContext.filterBarConfigs\r\n const isEmpty = createFilterStore(this.dataViewContext.filterState, defaultValue).isEmpty()\r\n return (\r\n <Collapse in={!isEmpty} timeout={300} unmountOnExit orientation='vertical' onExited={this.handleAnimationExited}>\r\n <Wrap className={activeFiltersPanelClasses.root}>\r\n <Box className={activeFiltersPanelClasses.content}>\r\n {this.renderSort()}\r\n {this.renderQuickSearch()}\r\n {this.renderFilters()}\r\n {!isEmpty && <ClearAllButton className={activeFiltersPanelClasses.removeButton} onClick={this.handleClearAll} />}\r\n </Box>\r\n {this.props.loading && <Box className={activeFiltersPanelClasses.overlay} />}\r\n </Wrap>\r\n </Collapse>\r\n )\r\n })\r\n }\r\n\r\n renderItems = (p: IRenderItemsParams<T>) => (\r\n <Box className={activeFiltersPanelClasses.item}>\r\n <Typography variant='caption' sx={{ fontWeight: 700 }}>\r\n {p.label || p.field?.toString()}:\r\n </Typography>\r\n {/* <Box className={activeFiltersPanelClasses.itemContent}> */}\r\n {p.items.map((item) => (\r\n <Chip\r\n key={item.value}\r\n clickable\r\n size='small'\r\n label={item.label || item.value}\r\n className={activeFiltersPanelClasses.itemChip}\r\n onDelete={() => {\r\n if (p.isQuickSearch) {\r\n this.removeQuickSearch(item)\r\n return\r\n }\r\n if (!p.field) return\r\n this.removeFilter(p.field, item)\r\n }}\r\n />\r\n ))}\r\n {/* </Box> */}\r\n </Box>\r\n )\r\n\r\n renderQuickSearch() {\r\n const val = this.dataViewContext.filterState?.quickSearch || []\r\n const list = (Array.isArray(val) ? val : [val]).map((value) => ({ value }))\r\n if (!list || list.length === 0) return <></>\r\n return this.renderItems({ label: 'Quick search', items: list, isQuickSearch: true })\r\n }\r\n\r\n renderFilters = () => {\r\n const filter: IFilterMap<T> = this.dataViewContext.filterState?.filter || {}\r\n const keys = Object.keys(filter) as Array<keyof T>\r\n if (keys.length === 0) return <></>\r\n return keys.map((key) => {\r\n const filterItems = (filter[key] ?? []) as IFilterItem[]\r\n const items = filterItems.reduce<IItemBase[]>((acc, item) => {\r\n let label = item.label || item.value?.toString()\r\n if (item.type === 'date' && item.dateLogic) {\r\n label = `${mapDateLogicText[item.dateLogic]} ${formatDatetime(item.value?.toString() ?? '', 'style2')}`\r\n }\r\n if (!!item.value) acc.push({ value: item.value?.toString(), label })\r\n return acc\r\n }, [])\r\n return <Fragment key={key.toString()}>{this.renderItems({ field: key, label: key.toString(), items })}</Fragment>\r\n })\r\n }\r\n\r\n renderSort = () => {\r\n const sort = this.dataViewContext.filterState?.sort\r\n if (!sort) return <></>\r\n\r\n const fieldConfig = this.dataViewContext.filterBarConfigs.fields?.[sort.field]\r\n const fieldLabel = fieldConfig?.label || sort.field.toString()\r\n const sortConfig = mapSortConfigs[sort.direction]\r\n\r\n return (\r\n <Box className={activeFiltersPanelClasses.item}>\r\n <Typography variant='caption' sx={{ fontWeight: 700 }}>\r\n Sort:\r\n </Typography>\r\n {/* <Box className={activeFiltersPanelClasses.itemContent}> */}\r\n <Chip\r\n clickable\r\n size='small'\r\n label={\r\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\r\n <span>{fieldLabel}</span>\r\n {sortConfig.icon}\r\n </Box>\r\n }\r\n className={activeFiltersPanelClasses.itemChip}\r\n onClick={this.toggleSortDirection}\r\n onDelete={() => this.removeSort()}\r\n title={`${fieldLabel} - ${sortConfig.title}`}\r\n />\r\n {/* </Box> */}\r\n </Box>\r\n )\r\n }\r\n\r\n removeFilter = (field: keyof T, item: IItemBase) => {\r\n const store = createFilterStore(this.dataViewContext.filterState).removeFilterItem(field, item.value, { reason: 'filter' })\r\n this.dataViewContext.onFilterStateChange(store.build())\r\n }\r\n\r\n removeQuickSearch = (item: IItemBase) => {\r\n const store = createFilterStore(this.dataViewContext.filterState).removeQuickSearchItem(item.value, { reason: 'quickSearch' })\r\n this.dataViewContext.onFilterStateChange(store.build())\r\n }\r\n\r\n removeSort = () => {\r\n const store = createFilterStore(this.dataViewContext.filterState).removeSort({ reason: 'sort' })\r\n this.dataViewContext.onFilterStateChange(store.build())\r\n }\r\n\r\n toggleSortDirection = () => {\r\n const store = createFilterStore(this.dataViewContext.filterState).toggleSortDirection({ reason: 'sort' })\r\n this.dataViewContext.onFilterStateChange(store.build())\r\n }\r\n\r\n handleClearAll = () => {\r\n const fValue = this.dataViewContext.filterBarConfigs.defaultValue || {}\r\n // Trực tiếp clear data, logic đóng sẽ được xử lý tự động\r\n const store = createFilterStore(this.dataViewContext.filterState, fValue).reset()\r\n this.dataViewContext.onFilterStateChange(store.build())\r\n }\r\n }\r\n\r\n return ActiveFiltersPanel\r\n}\r\n\r\nexport default createActiveFiltersPanel\r\n\r\nconst Wrap = styled(Box)({\r\n position: 'relative',\r\n [`.${activeFiltersPanelClasses.content}`]: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n flexWrap: 'wrap',\r\n gap: '8px'\r\n },\r\n [`.${activeFiltersPanelClasses.item}`]: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n border: 'dashed 1px var(--color-divider, rgba(145 160 170 / 20%))',\r\n borderRadius: '4px',\r\n alignItems: 'center',\r\n padding: '6px 8px',\r\n gap: '8px'\r\n },\r\n [`.${activeFiltersPanelClasses.itemContent}`]: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n gap: '4px'\r\n },\r\n [`.${activeFiltersPanelClasses.itemChip}`]: {\r\n borderRadius: '4px'\r\n },\r\n [`.${activeFiltersPanelClasses.overlay}`]: {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n backdropFilter: 'blur(1px)'\r\n }\r\n})\r\n"],"names":["activeFiltersPanelClasses","root","content","item","itemContent","itemChip","removeButton","overlay","createActiveFiltersPanel","ActiveFiltersPanel","props","_this","_classCallCheck","_callSuper","_defineProperty","setState","isClosing","p","_p$field","_jsxs","Box","className","children","Typography","variant","sx","fontWeight","label","field","toString","items","map","_jsx","Chip","clickable","size","value","onDelete","isQuickSearch","removeQuickSearch","removeFilter","_this$dataViewContext","filter","dataViewContext","filterState","keys","Object","length","key","_filter$key","reduce","acc","_item$value","_item$value3","_item$value$toString","_item$value2","type","dateLogic","concat","mapDateLogicText","formatDatetime","push","Fragment","renderItems","_this$dataViewContext2","_this$dataViewContext3","sort","fieldConfig","filterBarConfigs","fields","fieldLabel","sortConfig","mapSortConfigs","direction","display","alignItems","gap","icon","onClick","toggleSortDirection","removeSort","title","store","createFilterStore","removeFilterItem","reason","onFilterStateChange","build","removeQuickSearchItem","fValue","defaultValue","reset","state","data","_inherits","Component","_createClass","_this2","this","mapDataViewContext","context","isEmpty","Collapse","in","timeout","unmountOnExit","orientation","onExited","handleAnimationExited","Wrap","renderSort","renderQuickSearch","renderFilters","ClearAllButton","handleClearAll","loading","_this$dataViewContext4","val","quickSearch","list","Array","isArray","styled","position","flexWrap","border","borderRadius","padding","top","left","width","height","backdropFilter"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as e,createClass as
|
|
1
|
+
import{inherits as e,createClass as i,objectSpread2 as t,classCallCheck as o,callSuper as n,defineProperty as l}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as r,jsx as a,Fragment as s}from"react/jsx-runtime";import{Component as d}from"react";import{styled as u,Box as v,Stack as f}from"@mui/material";import{SortButton as p}from"./ui.units.js";import{createViewMode as g}from"./create.view-mode.js";import{defaultViewMode as h,ViewModeButtons as c}from"./view-mode.units.js";import{getViewModeFromURL as C,syncViewModeToURL as m}from"./query-param-url.js";import{defaultFilterBarState as w,DataViewContext as S}from"./context.js";import{createFilterBar as y}from"./create.filter-bar.js";import M from"./scroll-tracking.js";import{createPaginationBar as B}from"./create.pagination-bar.js";import{createPopperPanel as P}from"./create.popper-panel.js";import b from"./create.active-filters-panel.js";function H(u){var H=y(),F=P(),V=b(),k=g(u.viewMode),I=B();return function(){function g(e){var i;return o(this,g),i=n(this,g,[e]),l(i,"mergeConfig",(function(e){var t,o,n,l,r=e.slots;i.configCache={filterBar:Object.assign({},u.filterBar,null==r?void 0:r.filterBarConfigs),viewMode:null==r?void 0:r.viewModeConfigs,paginationBar:Object.assign({},u.paginationBar,null==r?void 0:r.paginationBarConfigs),enablePaginationTop:null!==(t=null!==(o=null==r||null===(n=r.paginationBarConfigs)||void 0===n?void 0:n.enablePaginationTop)&&void 0!==o?o:null===(l=u.paginationBar)||void 0===l?void 0:l.enablePaginationTop)&&void 0!==t&&t}})),l(i,"configCache",{}),l(i,"refFilterButton",null),l(i,"refSortButton",null),l(i,"renderFooter",(function(){var e,o,n,l,r=(null===(e=i.props.slots)||void 0===e?void 0:e.footerProps)||{};return a(x,t(t({},r.wrapProps),{},{children:!1!==r.enablePagination&&a(I,t({count:null!==(o=null===(n=i.props.data)||void 0===n?void 0:n.totalItems)&&void 0!==o?o:0,defaultFilter:null===(l=i.internalConfig.filterBar)||void 0===l?void 0:l.defaultValue,filter:i.filterState,onChange:i.onFilterStateChangeHandler},i.internalConfig.paginationBar))}))})),l(i,"onViewModeChangeHandler",(function(e){i.setState({viewMode:e},(function(){var t,o;if(i.props.syncViewModeToURL){var n,l,r,a,s=null!==(n=null!==(l=null===(r=i.internalConfig.viewMode)||void 0===r?void 0:r.defaultValue)&&void 0!==l?l:null===(a=u.viewMode)||void 0===a?void 0:a.defaultValue)&&void 0!==n?n:h;m({viewMode:e,defaultViewMode:s})}null===(t=(o=i.props).onViewModeChange)||void 0===t||t.call(o,e)}))})),l(i,"onKeywordChangeHandler",(function(e){return i.setState({keyword:e})})),l(i,"onScrollChangeHandler",(function(e){return i.setState({scrolled:e.isScrolled})})),l(i,"onPopperPanelChangeHandler",(function(e,t){return i.setState({anchorEl:e,area:t})})),l(i,"onClearHandler",(function(){return i.setState(w)})),l(i,"onPanelCloseHandler",(function(){i.setState({anchorEl:null,area:void 0,keyword:""})})),l(i,"onFilterStateChangeHandler",(function(e){i.props.filter||i.setState(t(t({},w),{},{filterState:e})),i.props.onFilterChange&&i.props.onFilterChange(e),i.props.filter&&i.setState(w)})),i.mergeConfig(e),i.state=i.getDefaultState(e),i}return e(g,d),i(g,[{key:"getDefaultState",value:function(e){var i,o,n,l,r,a,s=null!==(i=null!==(o=null===(n=e.slots)||void 0===n||null===(n=n.viewModeConfigs)||void 0===n?void 0:n.defaultValue)&&void 0!==o?o:null===(l=u.viewMode)||void 0===l?void 0:l.defaultValue)&&void 0!==i?i:h,d=e.syncViewModeToURL?C({defaultViewMode:s}):s;return t(t({},w),{},{filterState:null!==(r=null===(a=this.internalConfig.filterBar)||void 0===a?void 0:a.defaultValue)&&void 0!==r?r:{},viewMode:d})}},{key:"filterState",get:function(){var e;return null!==(e=this.props.filter)&&void 0!==e?e:this.state.filterState}},{key:"viewMode",get:function(){var e;return null!==(e=this.props.viewMode)&&void 0!==e?e:this.state.viewMode}},{key:"internalConfig",get:function(){return this.configCache}},{key:"shouldComponentUpdate",value:function(e){var i,t,o,n,l=JSON.stringify(null===(i=e.slots)||void 0===i?void 0:i.filterBarConfigs)!==JSON.stringify(null===(t=this.props.slots)||void 0===t?void 0:t.filterBarConfigs),r=JSON.stringify(null===(o=e.slots)||void 0===o?void 0:o.viewModeConfigs)!==JSON.stringify(null===(n=this.props.slots)||void 0===n?void 0:n.viewModeConfigs);return(l||r)&&this.mergeConfig(e),!0}},{key:"render",value:function(){var e,i,o,n,l,d,u,g,h,C,m,w,y,B,P,b,x={keyword:this.state.keyword.trim(),filterBarConfigs:null!==(e=this.internalConfig.filterBar)&&void 0!==e?e:{},filterState:this.filterState,anchorEl:this.state.anchorEl,area:this.state.area,viewMode:this.state.viewMode,scrolled:this.state.scrolled,onFilterStateChange:this.onFilterStateChangeHandler,onKeywordChange:this.onKeywordChangeHandler,onPopperPanelChange:this.onPopperPanelChangeHandler,onPanelClose:this.onPanelCloseHandler,onClear:this.onClearHandler};return r(S.Provider,{value:x,children:[(null===(i=this.internalConfig.filterBar)||void 0===i?void 0:i.enableSticky)&&a(M,{onChange:this.onScrollChangeHandler}),null===(o=this.props.slots)||void 0===o||null===(o=o.filterSlots)||void 0===o?void 0:o.above,a(H,{slots:t(t({},null===(n=this.props.slots)||void 0===n?void 0:n.primaryInputSlots),{},{right:r(s,{children:[(null===(l=this.internalConfig.filterBar)||void 0===l?void 0:l.enableSort)&&a(p,{}),null===(d=this.props.slots)||void 0===d||null===(d=d.primaryInputSlots)||void 0===d?void 0:d.right]})}),children:a(F,{})}),null===(u=this.props.slots)||void 0===u||null===(u=u.filterSlots)||void 0===u?void 0:u.below,null===(g=this.props.slots)||void 0===g||null===(g=g.activeFiltersPanelSlots)||void 0===g?void 0:g.above,r(j,{children:[a(c,{value:this.state.viewMode,onChange:this.onViewModeChangeHandler}),null===(h=this.props.slots)||void 0===h||null===(h=h.activeFiltersPanelSlots)||void 0===h?void 0:h.left,r(f,{flexDirection:"row",sx:{flexWrap:"wrap",alignItems:"center",gap:1,flexGrow:1},children:[a(V,{loading:this.props.loading}),a(v,{sx:{display:"flex",alignItems:"center",gap:1,flexGrow:1,justifyContent:"end"},children:this.internalConfig.enablePaginationTop&&a(I,t({count:null!==(C=null===(m=this.props.data)||void 0===m?void 0:m.totalItems)&&void 0!==C?C:0,defaultFilter:null===(w=this.internalConfig.filterBar)||void 0===w?void 0:w.defaultValue,filter:this.filterState,onChange:this.onFilterStateChangeHandler},this.internalConfig.paginationBar))})]}),null===(y=this.props.slots)||void 0===y||null===(y=y.activeFiltersPanelSlots)||void 0===y?void 0:y.right]}),null===(B=this.props.slots)||void 0===B||null===(B=B.activeFiltersPanelSlots)||void 0===B?void 0:B.below,a(k,{data:null!==(P=null===(b=this.props.data)||void 0===b?void 0:b.items)&&void 0!==P?P:[],viewMode:this.viewMode,loading:this.props.loading,error:this.props.error,slots:this.internalConfig.viewMode}),this.renderFooter()]})}}])}()}var j=u(v)({display:"flex",alignItems:"center",flexWrap:"wrap",gap:"8px",marginBottom:"8px",minHeight:"var(--filter-bar-height, 40px)"}),x=u(v)({display:"flex",justifyContent:"flex-end",width:"100%"});export{H as default};
|
|
2
2
|
//# sourceMappingURL=create.data-view.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.data-view.js","sources":["../../src/data-view/create.data-view.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Box, BoxProps, styled } from '@mui/material'\r\nimport { SortButton } from './ui.units'\r\nimport { createViewMode } from './create.view-mode'\r\nimport { defaultViewMode, ViewModeButtons } from './view-mode.units'\r\nimport { getViewModeFromURL, syncViewModeToURL } from './query-param-url'\r\nimport { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types'\r\nimport { IFilterBarConfigs, IFilterState, IFilterStateChangeHandler, IPositionElement, IViewData } from './types'\r\nimport { defaultFilterBarState, DataViewContext, IDataViewState, IDataViewContext, OnPanelValueChange } from './context'\r\nimport createFilterBar, { IFilterBarSlots } from './create.filter-bar'\r\nimport ScrollTracking, { IScrollTrackingData } from './scroll-tracking'\r\nimport createPaginationBar, { IPaginationBarConfigs } from './create.pagination-bar'\r\nimport createPopperPanel from './create.popper-panel'\r\nimport createActiveFiltersPanel from './create.active-filters-panel'\r\n\r\nexport const filterBarClasses = {\r\n root: 'FilterBar-root',\r\n content: 'FilterBar-content',\r\n input: 'FilterBar-input',\r\n inputWrap: 'FilterBar-inputWrap',\r\n label: 'FilterBar-label',\r\n button: 'FilterBar-button',\r\n spacing: 'FilterBar-spacing',\r\n panel: 'FilterBar-panel',\r\n sticky: 'FilterBar-sticky',\r\n shadow: 'FilterBar-shadow'\r\n}\r\n\r\nexport interface IDataViewSlots<T extends IViewModeValidModel> {\r\n filterWrapProps?: BoxProps\r\n filterSlots?: IPositionElement\r\n activeFiltersPanelSlots?: IPositionElement\r\n primaryInputSlots?: IFilterBarSlots\r\n filterBarConfigs?: IFilterBarConfigs<T>\r\n viewModeConfigs?: IViewModeConfigs<T>\r\n paginationBarConfigs?: IPaginationBarConfigs\r\n footerProps?: {\r\n wrapProps?: BoxProps\r\n enablePagination?: boolean\r\n }\r\n}\r\n\r\nexport interface IDataViewProps<T extends IViewModeValidModel> {\r\n loading?: boolean\r\n error?: string\r\n data?: IViewData<T>\r\n filter?: IFilterState<T>\r\n onFilterChange?: (value: IFilterState<T>) => void\r\n viewMode?: EViewMode\r\n onViewModeChange?: (value: EViewMode) => void\r\n syncViewModeToURL?: boolean\r\n enablePaginationTop?: boolean\r\n slots?: IDataViewSlots<T>\r\n}\r\n\r\nexport interface IDataViewConfigs<T extends IViewModeValidModel> {\r\n filterBar?: IFilterBarConfigs<T>\r\n viewMode?: IViewModeConfigs<T>\r\n paginationBar?: IPaginationBarConfigs\r\n}\r\n\r\nfunction createDataView<T extends IViewModeValidModel>(configs: IDataViewConfigs<T>): ComponentType<IDataViewProps<T>> {\r\n const InputInstance = createFilterBar<T>()\r\n const PopperPanelInstance = createPopperPanel<T>()\r\n const ActiveFiltersPanelInstance = createActiveFiltersPanel<T>()\r\n const ViewModeInstance = createViewMode<T>(configs.viewMode)\r\n const PaginationBarInstance = createPaginationBar<T>()\r\n\r\n class DataView extends Component<IDataViewProps<T>, IDataViewState<T>> {\r\n constructor(props: IDataViewProps<T>) {\r\n super(props)\r\n this.mergeConfig(props)\r\n this.state = this.getDefaultState(props)\r\n }\r\n\r\n private getDefaultState(currentProps: IDataViewProps<T>): IDataViewState<T> {\r\n const defaultValue = currentProps.slots?.viewModeConfigs?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n const viewMode = currentProps.syncViewModeToURL ? getViewModeFromURL<T>({ defaultViewMode: defaultValue }) : defaultValue\r\n return {\r\n ...defaultFilterBarState,\r\n filterState: this.internalConfig.filterBar?.defaultValue ?? {},\r\n viewMode\r\n }\r\n }\r\n\r\n get filterState(): IFilterState<T> {\r\n return this.props.filter ?? this.state.filterState\r\n }\r\n\r\n get viewMode(): EViewMode | undefined {\r\n return this.props.viewMode ?? this.state.viewMode\r\n }\r\n\r\n private mergeConfig = (currentProps: IDataViewProps<T>) => {\r\n this.configCache = {\r\n filterBar: Object.assign({}, configs.filterBar, currentProps.slots?.filterBarConfigs),\r\n viewMode: currentProps.slots?.viewModeConfigs,\r\n paginationBar: Object.assign({}, configs.paginationBar, currentProps.slots?.paginationBarConfigs)\r\n }\r\n }\r\n\r\n private configCache: IDataViewConfigs<T> = {}\r\n get internalConfig() {\r\n return this.configCache\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IDataViewProps<T>>): boolean {\r\n const filterDiff = JSON.stringify(nextProps.slots?.filterBarConfigs) !== JSON.stringify(this.props.slots?.filterBarConfigs)\r\n const viewModeDiff = JSON.stringify(nextProps.slots?.viewModeConfigs) !== JSON.stringify(this.props.slots?.viewModeConfigs)\r\n if (filterDiff || viewModeDiff) this.mergeConfig(nextProps)\r\n return true\r\n }\r\n\r\n refFilterButton: HTMLButtonElement | null = null\r\n refSortButton: HTMLButtonElement | null = null\r\n render() {\r\n const mapContext: IDataViewContext<T> = {\r\n keyword: this.state.keyword.trim(),\r\n filterBarConfigs: this.internalConfig.filterBar ?? {},\r\n filterState: this.filterState,\r\n anchorEl: this.state.anchorEl,\r\n area: this.state.area,\r\n viewMode: this.state.viewMode,\r\n scrolled: this.state.scrolled,\r\n onFilterStateChange: this.onFilterStateChangeHandler,\r\n onKeywordChange: this.onKeywordChangeHandler,\r\n onPopperPanelChange: this.onPopperPanelChangeHandler,\r\n onPanelClose: this.onPanelCloseHandler,\r\n onClear: this.onClearHandler\r\n }\r\n return (\r\n <DataViewContext.Provider value={mapContext}>\r\n {this.internalConfig.filterBar?.enableSticky && <ScrollTracking onChange={this.onScrollChangeHandler} />}\r\n {this.props.slots?.filterSlots?.above}\r\n <InputInstance\r\n slots={{\r\n ...this.props.slots?.primaryInputSlots,\r\n right: (\r\n <>\r\n {this.internalConfig.filterBar?.enableSort && <SortButton />}\r\n {this.props.slots?.primaryInputSlots?.right}\r\n </>\r\n )\r\n }}\r\n >\r\n <PopperPanelInstance />\r\n </InputInstance>\r\n {this.props.slots?.filterSlots?.below}\r\n {this.props.slots?.activeFiltersPanelSlots?.above}\r\n <FilterBarPanel>\r\n <ViewModeButtons value={this.state.viewMode} onChange={this.onViewModeChangeHandler} />\r\n {this.props.slots?.activeFiltersPanelSlots?.left}\r\n <ActiveFiltersPanelInstance loading={this.props.loading} />\r\n <Box sx={{ flex: 1 }} />\r\n {this.props.enablePaginationTop && (\r\n <PaginationBarInstance\r\n count={this.props.data?.totalItems ?? 0}\r\n defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n filter={this.filterState}\r\n onChange={this.onFilterStateChangeHandler}\r\n {...this.internalConfig.paginationBar}\r\n />\r\n )}\r\n {this.props.slots?.activeFiltersPanelSlots?.right}\r\n </FilterBarPanel>\r\n {this.props.slots?.activeFiltersPanelSlots?.below}\r\n <ViewModeInstance\r\n data={this.props.data?.items ?? []}\r\n viewMode={this.viewMode}\r\n loading={this.props.loading}\r\n error={this.props.error}\r\n slots={this.internalConfig.viewMode}\r\n />\r\n {this.renderFooter()}\r\n </DataViewContext.Provider>\r\n )\r\n }\r\n\r\n renderFooter = () => {\r\n const temp = this.props.slots?.footerProps || {}\r\n return (\r\n <FooterWrap {...temp.wrapProps}>\r\n {temp.enablePagination !== false && (\r\n <PaginationBarInstance\r\n count={this.props.data?.totalItems ?? 0}\r\n defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n filter={this.filterState}\r\n onChange={this.onFilterStateChangeHandler}\r\n {...this.internalConfig.paginationBar}\r\n />\r\n )}\r\n </FooterWrap>\r\n )\r\n }\r\n\r\n onViewModeChangeHandler = (value: EViewMode) => {\r\n this.setState({ viewMode: value }, () => {\r\n if (this.props.syncViewModeToURL) {\r\n const dViewMode = this.internalConfig.viewMode?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n syncViewModeToURL({ viewMode: value, defaultViewMode: dViewMode })\r\n }\r\n this.props.onViewModeChange?.(value)\r\n })\r\n }\r\n\r\n onKeywordChangeHandler = (keyword: string) => this.setState({ keyword })\r\n\r\n onScrollChangeHandler = (data: IScrollTrackingData) => this.setState({ scrolled: data.isScrolled })\r\n\r\n onPopperPanelChangeHandler: OnPanelValueChange = (anchorEl, area) => this.setState({ anchorEl, area })\r\n\r\n onClearHandler = () => this.setState(defaultFilterBarState)\r\n\r\n onPanelCloseHandler = () => {\r\n this.setState({ anchorEl: null, area: undefined, keyword: '' })\r\n }\r\n\r\n onFilterStateChangeHandler: IFilterStateChangeHandler<T> = (filterState: IFilterState<T>) => {\r\n if (!this.props.filter) this.setState({ ...defaultFilterBarState, filterState })\r\n this.props.onFilterChange && this.props.onFilterChange(filterState)\r\n if (!!this.props.filter) this.setState(defaultFilterBarState)\r\n }\r\n }\r\n\r\n return DataView\r\n}\r\n\r\nexport default createDataView\r\n\r\nconst FilterBarPanel = styled(Box)({\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '8px',\r\n marginBottom: '8px',\r\n minHeight: 'var(--filter-bar-height, 40px)'\r\n})\r\n\r\nconst FooterWrap = styled(Box)({\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n width: '100%'\r\n})\r\n"],"names":["createDataView","configs","InputInstance","createFilterBar","PopperPanelInstance","createPopperPanel","ActiveFiltersPanelInstance","createActiveFiltersPanel","ViewModeInstance","createViewMode","viewMode","PaginationBarInstance","createPaginationBar","DataView","props","_this","_classCallCheck","_callSuper","_defineProperty","currentProps","_currentProps$slots","_currentProps$slots2","_currentProps$slots3","configCache","filterBar","Object","assign","slots","filterBarConfigs","viewModeConfigs","paginationBar","paginationBarConfigs","_this$props$slots","_this$props$data$tota","_this$props$data","_this$internalConfig$","temp","footerProps","_jsx","FooterWrap","_objectSpread","wrapProps","children","enablePagination","count","data","totalItems","defaultFilter","internalConfig","defaultValue","filter","filterState","onChange","onFilterStateChangeHandler","value","setState","_this$props$onViewMod","_this$props","syncViewModeToURL","_ref","_this$internalConfig$2","_this$internalConfig$3","_configs$viewMode","dViewMode","defaultViewMode","onViewModeChange","call","keyword","scrolled","isScrolled","anchorEl","area","defaultFilterBarState","undefined","onFilterChange","mergeConfig","state","getDefaultState","_inherits","Component","_createClass","key","_ref2","_currentProps$slots$v","_currentProps$slots4","_configs$viewMode2","_this$internalConfig$4","_this$internalConfig$5","getViewModeFromURL","this","get","_this$props$filter","_this$props$viewMode","nextProps","_nextProps$slots","_this$props$slots2","_nextProps$slots2","_this$props$slots3","filterDiff","JSON","stringify","viewModeDiff","_this$internalConfig$6","_this$internalConfig$7","_this$props$slots4","_this$props$slots5","_this$internalConfig$8","_this$props$slots6","_this$props$slots7","_this$props$slots8","_this$props$slots9","_this$props$data$tota2","_this$props$data2","_this$internalConfig$9","_this$props$slots0","_this$props$slots1","_this$props$data$item","_this$props$data3","mapContext","trim","onFilterStateChange","onKeywordChange","onKeywordChangeHandler","onPopperPanelChange","onPopperPanelChangeHandler","onPanelClose","onPanelCloseHandler","onClear","onClearHandler","_jsxs","DataViewContext","Provider","enableSticky","ScrollTracking","onScrollChangeHandler","filterSlots","above","primaryInputSlots","right","_Fragment","enableSort","SortButton","below","activeFiltersPanelSlots","FilterBarPanel","ViewModeButtons","onViewModeChangeHandler","left","loading","Box","sx","flex","enablePaginationTop","items","error","renderFooter","styled","display","alignItems","gap","marginBottom","minHeight","justifyContent","width"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.data-view.js","sources":["../../src/data-view/create.data-view.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Box, BoxProps, Stack, styled } from '@mui/material'\r\nimport { SortButton } from './ui.units'\r\nimport { createViewMode } from './create.view-mode'\r\nimport { defaultViewMode, ViewModeButtons } from './view-mode.units'\r\nimport { getViewModeFromURL, syncViewModeToURL } from './query-param-url'\r\nimport { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types'\r\nimport { IFilterBarConfigs, IFilterState, IFilterStateChangeHandler, IPositionElement, IViewData } from './types'\r\nimport { defaultFilterBarState, DataViewContext, IDataViewState, IDataViewContext, OnPanelValueChange } from './context'\r\nimport createFilterBar, { IFilterBarSlots } from './create.filter-bar'\r\nimport ScrollTracking, { IScrollTrackingData } from './scroll-tracking'\r\nimport createPaginationBar, { IPaginationBarConfigs } from './create.pagination-bar'\r\nimport createPopperPanel from './create.popper-panel'\r\nimport createActiveFiltersPanel from './create.active-filters-panel'\r\n\r\nexport const filterBarClasses = {\r\n root: 'FilterBar-root',\r\n content: 'FilterBar-content',\r\n input: 'FilterBar-input',\r\n inputWrap: 'FilterBar-inputWrap',\r\n label: 'FilterBar-label',\r\n button: 'FilterBar-button',\r\n spacing: 'FilterBar-spacing',\r\n panel: 'FilterBar-panel',\r\n sticky: 'FilterBar-sticky',\r\n shadow: 'FilterBar-shadow'\r\n}\r\n\r\nexport interface IDataViewSlots<T extends IViewModeValidModel> {\r\n filterWrapProps?: BoxProps\r\n filterSlots?: IPositionElement\r\n activeFiltersPanelSlots?: IPositionElement\r\n primaryInputSlots?: IFilterBarSlots\r\n filterBarConfigs?: IFilterBarConfigs<T>\r\n viewModeConfigs?: IViewModeConfigs<T>\r\n paginationBarConfigs?: IPaginationBarConfigs\r\n footerProps?: {\r\n wrapProps?: BoxProps\r\n enablePagination?: boolean\r\n }\r\n}\r\n\r\nexport interface IDataViewProps<T extends IViewModeValidModel> {\r\n loading?: boolean\r\n error?: string\r\n data?: IViewData<T>\r\n filter?: IFilterState<T>\r\n onFilterChange?: (value: IFilterState<T>) => void\r\n viewMode?: EViewMode\r\n onViewModeChange?: (value: EViewMode) => void\r\n syncViewModeToURL?: boolean\r\n slots?: IDataViewSlots<T>\r\n}\r\n\r\nexport interface IDataViewConfigs<T extends IViewModeValidModel> {\r\n filterBar?: IFilterBarConfigs<T>\r\n viewMode?: IViewModeConfigs<T>\r\n paginationBar?: IPaginationBarConfigs\r\n}\r\n\r\ninterface IInternalConfigs<T extends IViewModeValidModel> extends IDataViewConfigs<T> {\r\n enablePaginationTop?: boolean\r\n}\r\n\r\nfunction createDataView<T extends IViewModeValidModel>(configs: IDataViewConfigs<T>): ComponentType<IDataViewProps<T>> {\r\n const InputInstance = createFilterBar<T>()\r\n const PopperPanelInstance = createPopperPanel<T>()\r\n const ActiveFiltersPanelInstance = createActiveFiltersPanel<T>()\r\n const ViewModeInstance = createViewMode<T>(configs.viewMode)\r\n const PaginationBarInstance = createPaginationBar<T>()\r\n\r\n class DataView extends Component<IDataViewProps<T>, IDataViewState<T>> {\r\n constructor(props: IDataViewProps<T>) {\r\n super(props)\r\n this.mergeConfig(props)\r\n this.state = this.getDefaultState(props)\r\n }\r\n\r\n private getDefaultState(currentProps: IDataViewProps<T>): IDataViewState<T> {\r\n const defaultValue = currentProps.slots?.viewModeConfigs?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n const viewMode = currentProps.syncViewModeToURL ? getViewModeFromURL<T>({ defaultViewMode: defaultValue }) : defaultValue\r\n return {\r\n ...defaultFilterBarState,\r\n filterState: this.internalConfig.filterBar?.defaultValue ?? {},\r\n viewMode\r\n }\r\n }\r\n\r\n get filterState(): IFilterState<T> {\r\n return this.props.filter ?? this.state.filterState\r\n }\r\n\r\n get viewMode(): EViewMode | undefined {\r\n return this.props.viewMode ?? this.state.viewMode\r\n }\r\n\r\n private mergeConfig = (currentProps: IDataViewProps<T>) => {\r\n const { slots } = currentProps\r\n this.configCache = {\r\n filterBar: Object.assign({}, configs.filterBar, slots?.filterBarConfigs),\r\n viewMode: slots?.viewModeConfigs,\r\n paginationBar: Object.assign({}, configs.paginationBar, slots?.paginationBarConfigs),\r\n enablePaginationTop: slots?.paginationBarConfigs?.enablePaginationTop ?? configs.paginationBar?.enablePaginationTop ?? false\r\n }\r\n }\r\n\r\n private configCache: IInternalConfigs<T> = {}\r\n get internalConfig() {\r\n return this.configCache\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IDataViewProps<T>>): boolean {\r\n const filterDiff = JSON.stringify(nextProps.slots?.filterBarConfigs) !== JSON.stringify(this.props.slots?.filterBarConfigs)\r\n const viewModeDiff = JSON.stringify(nextProps.slots?.viewModeConfigs) !== JSON.stringify(this.props.slots?.viewModeConfigs)\r\n if (filterDiff || viewModeDiff) this.mergeConfig(nextProps)\r\n return true\r\n }\r\n\r\n refFilterButton: HTMLButtonElement | null = null\r\n refSortButton: HTMLButtonElement | null = null\r\n render() {\r\n const mapContext: IDataViewContext<T> = {\r\n keyword: this.state.keyword.trim(),\r\n filterBarConfigs: this.internalConfig.filterBar ?? {},\r\n filterState: this.filterState,\r\n anchorEl: this.state.anchorEl,\r\n area: this.state.area,\r\n viewMode: this.state.viewMode,\r\n scrolled: this.state.scrolled,\r\n onFilterStateChange: this.onFilterStateChangeHandler,\r\n onKeywordChange: this.onKeywordChangeHandler,\r\n onPopperPanelChange: this.onPopperPanelChangeHandler,\r\n onPanelClose: this.onPanelCloseHandler,\r\n onClear: this.onClearHandler\r\n }\r\n return (\r\n <DataViewContext.Provider value={mapContext}>\r\n {this.internalConfig.filterBar?.enableSticky && <ScrollTracking onChange={this.onScrollChangeHandler} />}\r\n {this.props.slots?.filterSlots?.above}\r\n <InputInstance\r\n slots={{\r\n ...this.props.slots?.primaryInputSlots,\r\n right: (\r\n <>\r\n {this.internalConfig.filterBar?.enableSort && <SortButton />}\r\n {this.props.slots?.primaryInputSlots?.right}\r\n </>\r\n )\r\n }}\r\n >\r\n <PopperPanelInstance />\r\n </InputInstance>\r\n {this.props.slots?.filterSlots?.below}\r\n {this.props.slots?.activeFiltersPanelSlots?.above}\r\n <FilterBarPanel>\r\n <ViewModeButtons value={this.state.viewMode} onChange={this.onViewModeChangeHandler} />\r\n {this.props.slots?.activeFiltersPanelSlots?.left}\r\n <Stack flexDirection={'row'} sx={{ flexWrap: 'wrap', alignItems: 'center', gap: 1, flexGrow: 1 }}>\r\n <ActiveFiltersPanelInstance loading={this.props.loading} />\r\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexGrow: 1, justifyContent: 'end' }}>\r\n {this.internalConfig.enablePaginationTop && (\r\n <PaginationBarInstance\r\n count={this.props.data?.totalItems ?? 0}\r\n defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n filter={this.filterState}\r\n onChange={this.onFilterStateChangeHandler}\r\n {...this.internalConfig.paginationBar}\r\n />\r\n )}\r\n </Box>\r\n </Stack>\r\n {this.props.slots?.activeFiltersPanelSlots?.right}\r\n </FilterBarPanel>\r\n {this.props.slots?.activeFiltersPanelSlots?.below}\r\n <ViewModeInstance\r\n data={this.props.data?.items ?? []}\r\n viewMode={this.viewMode}\r\n loading={this.props.loading}\r\n error={this.props.error}\r\n slots={this.internalConfig.viewMode}\r\n />\r\n {this.renderFooter()}\r\n </DataViewContext.Provider>\r\n )\r\n }\r\n\r\n renderFooter = () => {\r\n const temp = this.props.slots?.footerProps || {}\r\n return (\r\n <FooterWrap {...temp.wrapProps}>\r\n {temp.enablePagination !== false && (\r\n <PaginationBarInstance\r\n count={this.props.data?.totalItems ?? 0}\r\n defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n filter={this.filterState}\r\n onChange={this.onFilterStateChangeHandler}\r\n {...this.internalConfig.paginationBar}\r\n />\r\n )}\r\n </FooterWrap>\r\n )\r\n }\r\n\r\n onViewModeChangeHandler = (value: EViewMode) => {\r\n this.setState({ viewMode: value }, () => {\r\n if (this.props.syncViewModeToURL) {\r\n const dViewMode = this.internalConfig.viewMode?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n syncViewModeToURL({ viewMode: value, defaultViewMode: dViewMode })\r\n }\r\n this.props.onViewModeChange?.(value)\r\n })\r\n }\r\n\r\n onKeywordChangeHandler = (keyword: string) => this.setState({ keyword })\r\n\r\n onScrollChangeHandler = (data: IScrollTrackingData) => this.setState({ scrolled: data.isScrolled })\r\n\r\n onPopperPanelChangeHandler: OnPanelValueChange = (anchorEl, area) => this.setState({ anchorEl, area })\r\n\r\n onClearHandler = () => this.setState(defaultFilterBarState)\r\n\r\n onPanelCloseHandler = () => {\r\n this.setState({ anchorEl: null, area: undefined, keyword: '' })\r\n }\r\n\r\n onFilterStateChangeHandler: IFilterStateChangeHandler<T> = (filterState: IFilterState<T>) => {\r\n if (!this.props.filter) this.setState({ ...defaultFilterBarState, filterState })\r\n this.props.onFilterChange && this.props.onFilterChange(filterState)\r\n if (!!this.props.filter) this.setState(defaultFilterBarState)\r\n }\r\n }\r\n\r\n return DataView\r\n}\r\n\r\nexport default createDataView\r\n\r\nconst FilterBarPanel = styled(Box)({\r\n display: 'flex',\r\n alignItems: 'center',\r\n flexWrap: 'wrap',\r\n gap: '8px',\r\n marginBottom: '8px',\r\n minHeight: 'var(--filter-bar-height, 40px)'\r\n})\r\n\r\nconst FooterWrap = styled(Box)({\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n width: '100%'\r\n})\r\n"],"names":["createDataView","configs","InputInstance","createFilterBar","PopperPanelInstance","createPopperPanel","ActiveFiltersPanelInstance","createActiveFiltersPanel","ViewModeInstance","createViewMode","viewMode","PaginationBarInstance","createPaginationBar","DataView","props","_this","_classCallCheck","_callSuper","_defineProperty","currentProps","_ref","_slots$paginationBarC","_slots$paginationBarC2","_configs$paginationBa","slots","configCache","filterBar","Object","assign","filterBarConfigs","viewModeConfigs","paginationBar","paginationBarConfigs","enablePaginationTop","_this$props$slots","_this$props$data$tota","_this$props$data","_this$internalConfig$","temp","footerProps","_jsx","FooterWrap","_objectSpread","wrapProps","children","enablePagination","count","data","totalItems","defaultFilter","internalConfig","defaultValue","filter","filterState","onChange","onFilterStateChangeHandler","value","setState","_this$props$onViewMod","_this$props","syncViewModeToURL","_ref2","_this$internalConfig$2","_this$internalConfig$3","_configs$viewMode","dViewMode","defaultViewMode","onViewModeChange","call","keyword","scrolled","isScrolled","anchorEl","area","defaultFilterBarState","undefined","onFilterChange","mergeConfig","state","getDefaultState","_inherits","Component","_createClass","key","_ref3","_currentProps$slots$v","_currentProps$slots","_configs$viewMode2","_this$internalConfig$4","_this$internalConfig$5","getViewModeFromURL","this","get","_this$props$filter","_this$props$viewMode","nextProps","_nextProps$slots","_this$props$slots2","_nextProps$slots2","_this$props$slots3","filterDiff","JSON","stringify","viewModeDiff","_this$internalConfig$6","_this$internalConfig$7","_this$props$slots4","_this$props$slots5","_this$internalConfig$8","_this$props$slots6","_this$props$slots7","_this$props$slots8","_this$props$slots9","_this$props$data$tota2","_this$props$data2","_this$internalConfig$9","_this$props$slots0","_this$props$slots1","_this$props$data$item","_this$props$data3","mapContext","trim","onFilterStateChange","onKeywordChange","onKeywordChangeHandler","onPopperPanelChange","onPopperPanelChangeHandler","onPanelClose","onPanelCloseHandler","onClear","onClearHandler","_jsxs","DataViewContext","Provider","enableSticky","ScrollTracking","onScrollChangeHandler","filterSlots","above","primaryInputSlots","right","_Fragment","enableSort","SortButton","below","activeFiltersPanelSlots","FilterBarPanel","ViewModeButtons","onViewModeChangeHandler","left","Stack","flexDirection","sx","flexWrap","alignItems","gap","flexGrow","loading","Box","display","justifyContent","items","error","renderFooter","styled","marginBottom","minHeight","width"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectSpread2 as e,
|
|
1
|
+
import{objectSpread2 as e,defineProperty as a,inherits as n,createClass as t,classCallCheck as i,callSuper as r}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as o}from"react/jsx-runtime";import{Component as l}from"react";import{styled as s,TablePagination as p}from"@mui/material";import{createFilterStore as u}from"./filter-store.js";function g(){var e=function(){function e(){var n;i(this,e);for(var t=arguments.length,o=new Array(t),l=0;l<t;l++)o[l]=arguments[l];return n=r(this,e,[].concat(o)),a(n,"handleChangePage",(function(e,a){var t,i,r,o=u(null!==(t=n.props.filter)&&void 0!==t?t:{},n.defaultFilter),l={page:a,pageSize:n.pagination.pageSize};o.changePagination(l,{reason:"pagination"}),null===(i=(r=n.props).onChange)||void 0===i||i.call(r,o.build())})),a(n,"handleChangeRowsPerPage",(function(e){var a,t,i,r=parseInt(e.target.value,10),o=u(null!==(a=n.props.filter)&&void 0!==a?a:{},n.defaultFilter);o.changePagination({page:0,pageSize:r},{reason:"pagination"}),null===(t=(i=n.props).onChange)||void 0===t||t.call(i,o.build())})),n}return n(e,l),t(e,[{key:"defaultFilter",get:function(){return this.props.defaultFilter||{}}},{key:"defaultPagination",get:function(){var e;return(null===(e=this.defaultFilter)||void 0===e?void 0:e.pagination)||{page:0,pageSize:10}}},{key:"pagination",get:function(){var e;return(null===(e=this.props.filter)||void 0===e?void 0:e.pagination)||this.defaultPagination}},{key:"rowsPerPageOptions",get:function(){return this.props.rowsPerPageOptions||[10,25,50,100]}},{key:"render",value:function(){var e=this.pagination,a=e.page,n=e.pageSize;return o(c,{size:"small",page:a,count:this.props.count||0,onPageChange:this.handleChangePage,rowsPerPage:n,onRowsPerPageChange:this.handleChangeRowsPerPage,rowsPerPageOptions:this.rowsPerPageOptions,labelRowsPerPage:"Items per page",slotProps:{actions:{nextButton:{size:"small"},previousButton:{size:"small"}},select:{MenuProps:{disableScrollLock:this.props.disableScrollLock}}}})}}])}();return e}var c=s((function(a){return o(p,e({component:"div"},a))}))((function(e){var n=e.theme;return{"@media (min-width: 600px)":{".MuiToolbar-root":{minHeight:"48px"}},".MuiTablePagination-selectLabel":a({},n.breakpoints.down("sm"),{display:"none"})}}));export{g as createPaginationBar,g as default};
|
|
2
2
|
//# sourceMappingURL=create.pagination-bar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.pagination-bar.js","sources":["../../src/data-view/create.pagination-bar.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { styled, TablePagination, TablePaginationProps } from '@mui/material'\r\nimport { createFilterStore } from './filter-store'\r\nimport { IFilterState, IPagination } from './types'\r\n\r\nexport interface IPaginationBarConfigs {\r\n rowsPerPageOptions?: number[]\r\n disableScrollLock?: boolean\r\n}\r\n\r\nexport interface IPaginationBarProps<T> extends IPaginationBarConfigs {\r\n count?: number\r\n filter?: IFilterState<T>\r\n defaultFilter?: IFilterState<T>\r\n onChange?: (value: IFilterState<T>) => void\r\n}\r\n\r\nexport type IPaginationBarParams<T> = Pick<IPaginationBarProps<T>, 'defaultFilter' | 'rowsPerPageOptions'>\r\n\r\nexport function createPaginationBar<T>(): ComponentType<IPaginationBarProps<T>> {\r\n class PaginationBar extends Component<IPaginationBarProps<T>> {\r\n get defaultFilter(): IFilterState<T> {\r\n return this.props.defaultFilter || {}\r\n }\r\n\r\n get defaultPagination(): Required<IPagination> {\r\n return (this.defaultFilter?.pagination as any) || { page: 0, pageSize: 10 }\r\n }\r\n\r\n get pagination(): Required<IPagination> {\r\n return (this.props.filter?.pagination as any) || this.defaultPagination\r\n }\r\n\r\n get rowsPerPageOptions(): number[] {\r\n return this.props.rowsPerPageOptions || [10, 25, 50, 100]\r\n }\r\n\r\n handleChangePage = (_: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {\r\n const store = createFilterStore<T>(this.props.filter ?? {}, this.defaultFilter)\r\n const { pageSize } = this.pagination\r\n const obj: IPagination = { page: newPage, pageSize }\r\n store.changePagination(obj, { reason: 'pagination' })\r\n this.props.onChange?.(store.build())\r\n }\r\n\r\n handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n const newPageSize = parseInt(event.target.value, 10)\r\n const store = createFilterStore<T>(this.props.filter ?? {}, this.defaultFilter)\r\n store.changePagination({ page: 0, pageSize: newPageSize }, { reason: 'pagination' })\r\n this.props.onChange?.(store.build())\r\n }\r\n\r\n render() {\r\n const { page, pageSize } = this.pagination\r\n return (\r\n <TablePaginationCustom\r\n size='small'\r\n page={page}\r\n count={this.props.count || 0}\r\n onPageChange={this.handleChangePage}\r\n rowsPerPage={pageSize}\r\n onRowsPerPageChange={this.handleChangeRowsPerPage}\r\n rowsPerPageOptions={this.rowsPerPageOptions}\r\n labelRowsPerPage='Items per page'\r\n slotProps={{\r\n actions: { nextButton: { size: 'small' }, previousButton: { size: 'small' } },\r\n select: { MenuProps: { disableScrollLock: this.props.disableScrollLock } }\r\n }}\r\n />\r\n )\r\n }\r\n }\r\n return PaginationBar\r\n}\r\nexport default createPaginationBar\r\n\r\nconst TablePaginationCustom = styled((p: TablePaginationProps) => <TablePagination component='div' {...p} />)({\r\n '@media (min-width: 600px)': {\r\n '.MuiToolbar-root': {\r\n minHeight: '48px'\r\n }\r\n }\r\n})\r\n"],"names":["createPaginationBar","PaginationBar","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","_","newPage","_this$props$filter","_this$props$onChange","_this$props","store","createFilterStore","props","filter","defaultFilter","obj","page","pageSize","pagination","changePagination","reason","onChange","call","build","event","_this$props$filter2","_this$props$onChange2","_this$props2","newPageSize","parseInt","target","value","_inherits","Component","_createClass","key","get","_this$defaultFilter","_this$props$filter3","defaultPagination","rowsPerPageOptions","_this$pagination","_jsx","TablePaginationCustom","size","count","onPageChange","handleChangePage","rowsPerPage","onRowsPerPageChange","handleChangeRowsPerPage","labelRowsPerPage","slotProps","actions","nextButton","previousButton","select","MenuProps","disableScrollLock","styled","p","TablePagination","_objectSpread","component","minHeight"],"mappings":"
|
|
1
|
+
{"version":3,"file":"create.pagination-bar.js","sources":["../../src/data-view/create.pagination-bar.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { styled, TablePagination, TablePaginationProps } from '@mui/material'\r\nimport { createFilterStore } from './filter-store'\r\nimport { IFilterState, IPagination } from './types'\r\n\r\nexport interface IPaginationBarConfigs {\r\n rowsPerPageOptions?: number[]\r\n disableScrollLock?: boolean\r\n enablePaginationTop?: boolean\r\n}\r\n\r\nexport interface IPaginationBarProps<T> extends IPaginationBarConfigs {\r\n count?: number\r\n filter?: IFilterState<T>\r\n defaultFilter?: IFilterState<T>\r\n onChange?: (value: IFilterState<T>) => void\r\n}\r\n\r\nexport type IPaginationBarParams<T> = Pick<IPaginationBarProps<T>, 'defaultFilter' | 'rowsPerPageOptions'>\r\n\r\nexport function createPaginationBar<T>(): ComponentType<IPaginationBarProps<T>> {\r\n class PaginationBar extends Component<IPaginationBarProps<T>> {\r\n get defaultFilter(): IFilterState<T> {\r\n return this.props.defaultFilter || {}\r\n }\r\n\r\n get defaultPagination(): Required<IPagination> {\r\n return (this.defaultFilter?.pagination as any) || { page: 0, pageSize: 10 }\r\n }\r\n\r\n get pagination(): Required<IPagination> {\r\n return (this.props.filter?.pagination as any) || this.defaultPagination\r\n }\r\n\r\n get rowsPerPageOptions(): number[] {\r\n return this.props.rowsPerPageOptions || [10, 25, 50, 100]\r\n }\r\n\r\n handleChangePage = (_: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {\r\n const store = createFilterStore<T>(this.props.filter ?? {}, this.defaultFilter)\r\n const { pageSize } = this.pagination\r\n const obj: IPagination = { page: newPage, pageSize }\r\n store.changePagination(obj, { reason: 'pagination' })\r\n this.props.onChange?.(store.build())\r\n }\r\n\r\n handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\r\n const newPageSize = parseInt(event.target.value, 10)\r\n const store = createFilterStore<T>(this.props.filter ?? {}, this.defaultFilter)\r\n store.changePagination({ page: 0, pageSize: newPageSize }, { reason: 'pagination' })\r\n this.props.onChange?.(store.build())\r\n }\r\n\r\n render() {\r\n const { page, pageSize } = this.pagination\r\n return (\r\n <TablePaginationCustom\r\n size='small'\r\n page={page}\r\n count={this.props.count || 0}\r\n onPageChange={this.handleChangePage}\r\n rowsPerPage={pageSize}\r\n onRowsPerPageChange={this.handleChangeRowsPerPage}\r\n rowsPerPageOptions={this.rowsPerPageOptions}\r\n labelRowsPerPage='Items per page'\r\n slotProps={{\r\n actions: { nextButton: { size: 'small' }, previousButton: { size: 'small' } },\r\n select: { MenuProps: { disableScrollLock: this.props.disableScrollLock } }\r\n }}\r\n />\r\n )\r\n }\r\n }\r\n return PaginationBar\r\n}\r\nexport default createPaginationBar\r\n\r\nconst TablePaginationCustom = styled((p: TablePaginationProps) => <TablePagination component='div' {...p} />)(({ theme }) => ({\r\n '@media (min-width: 600px)': {\r\n '.MuiToolbar-root': {\r\n minHeight: '48px'\r\n },\r\n },\r\n '.MuiTablePagination-selectLabel': {\r\n [theme.breakpoints.down('sm')]: {\r\n display: 'none'\r\n }\r\n }\r\n}))\r\n"],"names":["createPaginationBar","PaginationBar","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","_","newPage","_this$props$filter","_this$props$onChange","_this$props","store","createFilterStore","props","filter","defaultFilter","obj","page","pageSize","pagination","changePagination","reason","onChange","call","build","event","_this$props$filter2","_this$props$onChange2","_this$props2","newPageSize","parseInt","target","value","_inherits","Component","_createClass","key","get","_this$defaultFilter","_this$props$filter3","defaultPagination","rowsPerPageOptions","_this$pagination","_jsx","TablePaginationCustom","size","count","onPageChange","handleChangePage","rowsPerPage","onRowsPerPageChange","handleChangeRowsPerPage","labelRowsPerPage","slotProps","actions","nextButton","previousButton","select","MenuProps","disableScrollLock","styled","p","TablePagination","_objectSpread","component","_ref","theme","minHeight","breakpoints","down","display"],"mappings":"oWAoBgBA,IAAmB,IAC3BC,aAAc,SAAAA,IAAA,IAAAC,EAAAC,OAAAF,GAAA,IAAA,IAAAG,EAAAC,UAAAC,OAAAC,EAAAC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAAF,EAAAE,GAAAJ,UAAAI,GA8BjB,OA9BiBP,EAAAQ,EAAAC,KAAAV,EAAAW,GAAAA,OAAAL,IAAAM,EAAAX,EAAA,oBAiBC,SAACY,EAA+CC,GAAmB,IAAAC,EAAAC,EAAAC,EAC9EC,EAAQC,UAAiBJ,EAAId,EAAKmB,MAAMC,cAAM,IAAAN,EAAAA,EAAI,CAAA,EAAId,EAAKqB,eAE3DC,EAAmB,CAAEC,KAAMV,EAASW,SADrBxB,EAAKyB,WAAlBD,UAERP,EAAMS,iBAAiBJ,EAAK,CAAEK,OAAQ,eACnBZ,QAAnBA,GAAAC,EAAAhB,EAAKmB,OAAMS,oBAAQb,GAAnBA,EAAAc,KAAAb,EAAsBC,EAAMa,YAC7BnB,EAAAX,EAEyB,2BAAA,SAAC+B,GAAoE,IAAAC,EAAAC,EAAAC,EACvFC,EAAcC,SAASL,EAAMM,OAAOC,MAAO,IAC3CrB,EAAQC,UAAiBc,EAAIhC,EAAKmB,MAAMC,cAAM,IAAAY,EAAAA,EAAI,CAAA,EAAIhC,EAAKqB,eACjEJ,EAAMS,iBAAiB,CAAEH,KAAM,EAAGC,SAAUW,GAAe,CAAER,OAAQ,eAClDM,QAAnBA,GAAAC,EAAAlC,EAAKmB,OAAMS,oBAAQK,GAAnBA,EAAAJ,KAAAK,EAAsBjB,EAAMa,YAC7B9B,CAAA,CAAA,OAAAuC,EAAAxC,EA9ByByC,GA8BzBC,EAAA1C,EAAA,CAAA,CAAA2C,IAAA,gBAAAC,IA7BD,WACE,OAAOlC,KAAKU,MAAME,eAAiB,CAAE,CACvC,GAAC,CAAAqB,IAAA,oBAAAC,IAED,WAAqB,IAAAC,EACnB,OAA0BA,QAAlBA,EAAAnC,KAAKY,qBAALuB,IAAkBA,OAAlBA,EAAAA,EAAoBnB,aAAsB,CAAEF,KAAM,EAAGC,SAAU,GACzE,GAAC,CAAAkB,IAAA,aAAAC,IAED,WAAc,IAAAE,EACZ,OAAyB,QAAjBA,EAAApC,KAAKU,MAAMC,cAAM,IAAAyB,OAAA,EAAjBA,EAAmBpB,aAAsBhB,KAAKqC,iBACxD,GAAC,CAAAJ,IAAA,qBAAAC,IAED,WACE,OAAOlC,KAAKU,MAAM4B,oBAAsB,CAAC,GAAI,GAAI,GAAI,IACvD,GAAC,CAAAL,IAAA,SAAAJ,MAiBD,WACE,IAAAU,EAA2BvC,KAAKgB,WAAxBF,EAAIyB,EAAJzB,KAAMC,EAAQwB,EAARxB,SACd,OACEyB,EAACC,EAAqB,CACpBC,KAAK,QACL5B,KAAMA,EACN6B,MAAO3C,KAAKU,MAAMiC,OAAS,EAC3BC,aAAc5C,KAAK6C,iBACnBC,YAAa/B,EACbgC,oBAAqB/C,KAAKgD,wBAC1BV,mBAAoBtC,KAAKsC,mBACzBW,iBAAiB,iBACjBC,UAAW,CACTC,QAAS,CAAEC,WAAY,CAAEV,KAAM,SAAWW,eAAgB,CAAEX,KAAM,UAClEY,OAAQ,CAAEC,UAAW,CAAEC,kBAAmBxD,KAAKU,MAAM8C,sBAI7D,IAAC,IAEH,OAAOlE,CACT,CAGA,IAAMmD,EAAwBgB,GAAO,SAACC,GAAuB,OAAKlB,EAACmB,EAAeC,EAAA,CAACC,UAAU,OAAUH,GAAK,GAA9ED,EAAgF,SAAAK,GAAA,IAAGC,EAAKD,EAALC,MAAK,MAAQ,CAC5H,4BAA6B,CAC3B,mBAAoB,CAClBC,UAAW,SAGf,kCAAiC9D,EAAA,GAC9B6D,EAAME,YAAYC,KAAK,MAAQ,CAC9BC,QAAS,SAGd"}
|
|
@@ -38,7 +38,6 @@ export interface IDataViewProps<T extends IViewModeValidModel> {
|
|
|
38
38
|
viewMode?: EViewMode;
|
|
39
39
|
onViewModeChange?: (value: EViewMode) => void;
|
|
40
40
|
syncViewModeToURL?: boolean;
|
|
41
|
-
enablePaginationTop?: boolean;
|
|
42
41
|
slots?: IDataViewSlots<T>;
|
|
43
42
|
}
|
|
44
43
|
export interface IDataViewConfigs<T extends IViewModeValidModel> {
|
|
@@ -3,6 +3,7 @@ import { IFilterState } from './types';
|
|
|
3
3
|
export interface IPaginationBarConfigs {
|
|
4
4
|
rowsPerPageOptions?: number[];
|
|
5
5
|
disableScrollLock?: boolean;
|
|
6
|
+
enablePaginationTop?: boolean;
|
|
6
7
|
}
|
|
7
8
|
export interface IPaginationBarProps<T> extends IPaginationBarConfigs {
|
|
8
9
|
count?: number;
|