dinocollab-core 1.1.9 → 1.1.11
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/data-view/view-mode.units.js +1 -1
- package/dist/data-view/view-mode.units.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 +66 -66
|
@@ -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":"g5BAgEA,SAASA,EAA8CC,GACrD,IAAMC,EAAgBC,IAChBC,EAAsBC,IACtBC,EAA6BC,IAC7BC,EAAmBC,EAAkBR,EAAQS,UAC7CC,EAAwBC,IAmK9B,kBAhKE,SAAAC,EAAYC,GAAwB,IAAAC,EAGM,OAHNC,OAAAH,GAClCE,EAAAE,EAAAJ,KAAAA,GAAMC,IAAMI,EAAAH,EAuBQ,eAAA,SAACI,GAAmC,IAAAC,EAAAC,EAAAC,EAAAC,EAChDC,EAAUL,EAAVK,MACRT,EAAKU,YAAc,CACjBC,UAAWC,OAAOC,OAAO,CAAE,EAAE3B,EAAQyB,UAAWF,eAAAA,EAAOK,kBACvDnB,SAAUc,aAAAA,EAAAA,EAAOM,gBACjBC,cAAeJ,OAAOC,OAAO,CAAE,EAAE3B,EAAQ8B,cAAeP,eAAAA,EAAOQ,sBAC/DC,4BAAmBb,EAAkDC,QAAlDA,EAAEG,iBAAKF,EAALE,EAAOQ,4BAAoB,IAAAV,OAAA,EAA3BA,EAA6BW,+BAAmBZ,EAAAA,EAAyB,QAAzBE,EAAItB,EAAQ8B,qBAAa,IAAAR,OAAA,EAArBA,EAAuBU,2BAAmB,IAAAb,GAAAA,MAEtHF,EAAAH,EAE0C,cAAA,IAAEG,EAAAH,EAAA,kBAYD,MAAIG,EAAAH,EAAA,gBACN,MAAIG,EAAAH,EAAA,gBAmE/B,WAAK,IAAAmB,EAAAC,EAAAC,EAAAC,EACZC,GAAuB,QAAhBJ,EAAAnB,EAAKD,MAAMU,aAAXU,IAAgBA,OAAhBA,EAAAA,EAAkBK,cAAe,CAAE,EAChD,OACEC,EAACC,EAAUC,EAAAA,EAAA,CAAA,EAAKJ,EAAKK,WAAS,GAAA,CAAAC,UACD,IAA1BN,EAAKO,kBACJL,EAAC7B,EAAqB+B,EAAA,CACpBI,cAAKX,UAAAC,EAAErB,EAAKD,MAAMiC,YAAI,IAAAX,OAAA,EAAfA,EAAiBY,kBAAU,IAAAb,EAAAA,EAAI,EACtCc,cAA4CZ,QAA/BA,EAAEtB,EAAKmC,eAAexB,iBAApBW,IAA6BA,OAA7BA,EAAAA,EAA+Bc,aAC9CC,OAAQrC,EAAKsC,YACbC,SAAUvC,EAAKwC,4BACXxC,EAAKmC,eAAenB,sBAKjCb,EAAAH,EAEyB,2BAAA,SAACyC,GACzBzC,EAAK0C,SAAS,CAAE/C,SAAU8C,IAAS,WAAK,IAAAE,EAAAC,EACtC,GAAI5C,EAAKD,MAAM8C,kBAAmB,CAAA,IAAAC,EAAAC,EAAAC,EAAAC,EAC1BC,EAAwF,QAA/EJ,EAA6C,QAA7CC,EAA+B,QAA/BC,EAAGhD,EAAKmC,eAAexC,gBAApBqD,IAA4BA,OAA5BA,EAAAA,EAA8BZ,oBAAY,IAAAW,EAAAA,EAAoBE,QAApBA,EAAI/D,EAAQS,gBAARsD,IAAgBA,OAAhBA,EAAAA,EAAkBb,oBAAYU,IAAAA,EAAAA,EAAIK,EAClGN,EAAkB,CAAElD,SAAU8C,EAAOU,gBAAiBD,GACvD,SACDP,GAAAC,EAAA5C,EAAKD,OAAMqD,wBAAgB,IAAAT,GAA3BA,EAAAU,KAAAT,EAA8BH,EAChC,OACDtC,EAAAH,EAEwB,0BAAA,SAACsD,GAAe,OAAKtD,EAAK0C,SAAS,CAAEY,QAAAA,GAAU,IAAAnD,EAAAH,EAEhD,yBAAA,SAACgC,GAAyB,OAAKhC,EAAK0C,SAAS,CAAEa,SAAUvB,EAAKwB,YAAa,IAAArD,EAAAH,EAAA,8BAElD,SAACyD,EAAUC,GAAI,OAAK1D,EAAK0C,SAAS,CAAEe,SAAAA,EAAUC,KAAAA,GAAO,IAAAvD,EAAAH,EAErF,kBAAA,WAAA,OAAMA,EAAK0C,SAASiB,EAAsB,IAAAxD,EAAAH,EAAA,uBAErC,WACpBA,EAAK0C,SAAS,CAAEe,SAAU,KAAMC,UAAME,EAAWN,QAAS,QAC3DnD,EAAAH,EAE0D,8BAAA,SAACsC,GACrDtC,EAAKD,MAAMsC,QAAQrC,EAAK0C,SAAQf,EAAAA,KAAMgC,GAAqB,CAAA,EAAA,CAAErB,YAAAA,KAClEtC,EAAKD,MAAM8D,gBAAkB7D,EAAKD,MAAM8D,eAAevB,GACjDtC,EAAKD,MAAMsC,QAAQrC,EAAK0C,SAASiB,MA1JvC3D,EAAK8D,YAAY/D,GACjBC,EAAK+D,MAAQ/D,EAAKgE,gBAAgBjE,GAAMC,CAC1C,CAAC,OAAAiE,EAAAnE,EALoBoE,GAKpBC,EAAArE,EAAA,CAAA,CAAAsE,IAAA,kBAAA3B,MAEO,SAAgBrC,GAA+B,IAAAiE,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAC/CtC,UAAYiC,EAAoD,QAApDC,EAAqBC,QAArBA,EAAGnE,EAAaK,iBAAK8D,GAAiBA,QAAjBA,EAAlBA,EAAoBxD,uBAApBwD,IAAmCA,OAAnCA,EAAAA,EAAqCnC,oBAAYkC,IAAAA,EAAAA,UAAAE,EAAItF,EAAQS,gBAAQ,IAAA6E,OAAA,EAAhBA,EAAkBpC,oBAAY,IAAAiC,EAAAA,EAAIlB,EACtGxD,EAAWS,EAAayC,kBAAoB8B,EAAsB,CAAExB,gBAAiBf,IAAkBA,EAC7G,OAAAT,EAAAA,EAAA,CAAA,EACKgC,GAAqB,CAAA,EAAA,CACxBrB,YAAwD,QAA7CmC,EAA+B,QAA/BC,EAAEE,KAAKzC,eAAexB,iBAApB+D,IAA6BA,OAA7BA,EAAAA,EAA+BtC,oBAAYqC,IAAAA,EAAAA,EAAI,CAAE,EAC9D9E,SAAAA,GAEJ,GAAC,CAAAyE,IAAA,cAAAS,IAED,WAAe,IAAAC,EACb,OAAwB,QAAxBA,EAAOF,KAAK7E,MAAMsC,cAAM,IAAAyC,EAAAA,EAAIF,KAAKb,MAAMzB,WACzC,GAAC,CAAA8B,IAAA,WAAAS,IAED,WAAY,IAAAE,EACV,OAA0B,QAA1BA,EAAOH,KAAK7E,MAAMJ,gBAAQ,IAAAoF,EAAAA,EAAIH,KAAKb,MAAMpE,QAC3C,GAAC,CAAAyE,IAAA,iBAAAS,IAaD,WACE,OAAOD,KAAKlE,WACd,GAAC,CAAA0D,IAAA,wBAAA3B,MAED,SAAsBuC,GAAsC,IAAAC,EAAAC,EAAAC,EAAAC,EACpDC,EAAaC,KAAKC,UAAyBN,QAAhBA,EAACD,EAAUvE,aAAVwE,IAAeA,OAAfA,EAAAA,EAAiBnE,oBAAsBwE,KAAKC,kBAASL,EAACN,KAAK7E,MAAMU,aAAK,IAAAyE,OAAA,EAAhBA,EAAkBpE,kBACpG0E,EAAeF,KAAKC,UAAyBJ,QAAhBA,EAACH,EAAUvE,aAAV0E,IAAeA,OAAfA,EAAAA,EAAiBpE,mBAAqBuE,KAAKC,kBAASH,EAACR,KAAK7E,MAAMU,aAAK,IAAA2E,OAAA,EAAhBA,EAAkBrE,iBAE3G,OADIsE,GAAcG,IAAcZ,KAAKd,YAAYkB,IAC1C,CACT,GAAC,CAAAZ,IAAA,SAAA3B,MAID,WAAM,IAAAgD,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EACEC,EAAkC,CACtCnD,QAASsB,KAAKb,MAAMT,QAAQoD,OAC5B5F,iBAA+C,QAA/B2E,EAAEb,KAAKzC,eAAexB,iBAAS,IAAA8E,EAAAA,EAAI,CAAE,EACrDnD,YAAasC,KAAKtC,YAClBmB,SAAUmB,KAAKb,MAAMN,SACrBC,KAAMkB,KAAKb,MAAML,KACjB/D,SAAUiF,KAAKb,MAAMpE,SACrB4D,SAAUqB,KAAKb,MAAMR,SACrBoD,oBAAqB/B,KAAKpC,2BAC1BoE,gBAAiBhC,KAAKiC,uBACtBC,oBAAqBlC,KAAKmC,2BAC1BC,aAAcpC,KAAKqC,oBACnBC,QAAStC,KAAKuC,gBAEhB,OACEC,EAACC,EAAgBC,SAAQ,CAAC7E,MAAOgE,qBAC9Bf,EAAId,KAACzC,eAAexB,iBAAS,IAAA+E,OAAA,EAA7BA,EAA+B6B,eAAgB9F,EAAC+F,EAAc,CAACjF,SAAUqC,KAAK6C,wBAC9D9B,QADuFA,EACvGf,KAAK7E,MAAMU,aAAKkF,IAAAA,GAAaA,QAAbA,EAAhBA,EAAkB+B,mBAAlB/B,IAA6BA,OAA7BA,EAAAA,EAA+BgC,MAChClG,EAACtC,EAAa,CACZsB,MAAKkB,EAAAA,EAAA,CAAA,EACgB,QADhBiE,EACAhB,KAAK7E,MAAMU,aAAXmF,IAAgBA,OAAhBA,EAAAA,EAAkBgC,mBAAiB,GAAA,CACtCC,MACET,EAAAU,EAAA,CAAAjG,SAAA,EACgC,QAA7BgE,OAAK1D,eAAexB,iBAApBkF,IAA6BA,OAA7BA,EAAAA,EAA+BkC,aAActG,EAACuG,EAAa,YAAAlC,EAC3DlB,KAAK7E,MAAMU,aAAK,IAAAqF,GAAmB,QAAnBA,EAAhBA,EAAkB8B,yBAAlB9B,IAAmCA,OAAnCA,EAAAA,EAAqC+B,WAK5ChG,SAAAJ,EAACpC,EAAmB,CAAA,KAEL0G,QADDA,EACfnB,KAAK7E,MAAMU,iBAAKsF,WAAAA,EAAhBA,EAAkB2B,mBAAW,IAAA3B,OAAA,EAA7BA,EAA+BkC,MACfjC,QADoBA,EACpCpB,KAAK7E,MAAMU,aAAKuF,IAAAA,GAAyB,QAAzBA,EAAhBA,EAAkBkC,+BAAuB,IAAAlC,OAAA,EAAzCA,EAA2C2B,MAC5CP,EAACe,EACC,CAAAtG,SAAA,CAAAJ,EAAC2G,EAAe,CAAC3F,MAAOmC,KAAKb,MAAMpE,SAAU4C,SAAUqC,KAAKyD,0BAC3CpC,QADsEA,EACtFrB,KAAK7E,MAAMU,aAAKwF,IAAAA,GAAyBA,QAAzBA,EAAhBA,EAAkBiC,+BAAlBjC,IAAyCA,OAAzCA,EAAAA,EAA2CqC,KAC5ClB,EAACmB,EAAK,CAACC,cAAe,MAAOC,GAAI,CAAEC,SAAU,OAAQC,WAAY,SAAUC,IAAK,EAAGC,SAAU,GAC3FhH,SAAA,CAAAJ,EAAClC,EAA0B,CAACuJ,QAASlE,KAAK7E,MAAM+I,UAChDrH,EAACsH,EAAG,CAACN,GAAI,CAAEO,QAAS,OAAQL,WAAY,SAAUC,IAAK,EAAGC,SAAU,EAAGI,eAAgB,OAAOpH,SAC3F+C,KAAKzC,eAAejB,qBACnBO,EAAC7B,EAAqB+B,EAAA,CACpBI,cAAKmE,UAAAC,EAAEvB,KAAK7E,MAAMiC,YAAI,IAAAmE,OAAA,EAAfA,EAAiBlE,kBAAU,IAAAiE,EAAAA,EAAI,EACtChE,cAA4CkE,QAA/BA,EAAExB,KAAKzC,eAAexB,iBAApByF,IAA6BA,OAA7BA,EAAAA,EAA+BhE,aAC9CC,OAAQuC,KAAKtC,YACbC,SAAUqC,KAAKpC,4BACXoC,KAAKzC,eAAenB,qBAKfqF,QADTA,EACPzB,KAAK7E,MAAMU,iBAAK4F,WAAAA,EAAhBA,EAAkB6B,+BAAuB,IAAA7B,OAAA,EAAzCA,EAA2CwB,SAE7BvB,QADAA,EAChB1B,KAAK7E,MAAMU,aAAK6F,IAAAA,GAAyBA,QAAzBA,EAAhBA,EAAkB4B,+BAAlB5B,IAAyCA,OAAzCA,EAAAA,EAA2C2B,MAC5CxG,EAAChC,EACC,CAAAuC,aAAIuE,UAAAC,EAAE5B,KAAK7E,MAAMiC,YAAI,IAAAwE,OAAA,EAAfA,EAAiB0C,aAAK,IAAA3C,EAAAA,EAAI,GAChC5G,SAAUiF,KAAKjF,SACfmJ,QAASlE,KAAK7E,MAAM+I,QACpBK,MAAOvE,KAAK7E,MAAMoJ,MAClB1I,MAAOmE,KAAKzC,eAAexC,WAE5BiF,KAAKwE,iBAGZ,IAAC,GAiDL,CAIA,IAAMjB,EAAiBkB,EAAON,EAAPM,CAAY,CACjCL,QAAS,OACTL,WAAY,SACZD,SAAU,OACVE,IAAK,MACLU,aAAc,MACdC,UAAW,mCAGP7H,EAAa2H,EAAON,EAAPM,CAAY,CAC7BL,QAAS,OACTC,eAAgB,WAChBO,MAAO"}
|
|
@@ -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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as r,objectSpread2 as o}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useCallback as t}from"react";import{styled as n,ToggleButtonGroup as i,colors as l,Box as c,Typography as d,Tooltip as s,ToggleButton as u}from"@mui/material";import p from"@mui/icons-material/ViewList";import h from"@mui/icons-material/ViewModule";import{EViewMode as g}from"./view-mode.types.js";var m=g.List,b=[{value:g.Module,icon:e(h,{}),label:"Card Grid"},{value:g.List,icon:e(p,{}),label:"Detailed List"}],f=function(r){var o=r.value,a=r.onChange,n=void 0===a?function(){}:a,i=o&&Object.values(g).includes(o)?o:m,l=t((function(r){null!==r&&r!==i&&n(r)}),[i,n]);return e(v,{size:"small",value:i,exclusive:!0,onChange:function(r,o){return l(o)},children:b.map((function(r){return e(s,{title:r.label,arrow:!0,children:e(u,{size:"small",value:r.value,"aria-label":r.label,sx:{p:"5px"},children:r.icon})},r.value)}))})},y=function(){return f},v=n(i)((function(o){var e=o.theme;return r({flex:"0 0 auto",".MuiToggleButtonGroup-grouped":{"&.Mui-selected":{color:l.common.white,backgroundColor:"var(--color-orange, ".concat(l.blue[600],")"),borderColor:"var(--color-orange, ".concat(l.blue[600],")"),"&.MuiToggleButtonGroup-lastButton":{borderColor:"var(--color-orange, ".concat(l.blue[600],")")},"&:hover":{backgroundColor:"var(--color-orange, ".concat(l.blue[600],")")}}}},e.breakpoints.down("md"),{display:"none"})})),x=function(r){return e(w,o(o({},r),{},{children:a(c,{className:"loading-overlay__content",children:[e(c,{className:"loading-overlay__spinner"}),e(d,{variant:"body2",color:"primary",children:"Loading..."})]})}))},w=n(c)({position:"absolute",top:0,left:0,right:0,bottom:0,bgcolor:"rgba(255, 255, 255, 0.7)",display:"flex",alignItems:"flex-start",justifyContent:"center",zIndex:
|
|
1
|
+
import{defineProperty as r,objectSpread2 as o}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useCallback as t}from"react";import{styled as n,ToggleButtonGroup as i,colors as l,Box as c,Typography as d,Tooltip as s,ToggleButton as u}from"@mui/material";import p from"@mui/icons-material/ViewList";import h from"@mui/icons-material/ViewModule";import{EViewMode as g}from"./view-mode.types.js";var m=g.List,b=[{value:g.Module,icon:e(h,{}),label:"Card Grid"},{value:g.List,icon:e(p,{}),label:"Detailed List"}],f=function(r){var o=r.value,a=r.onChange,n=void 0===a?function(){}:a,i=o&&Object.values(g).includes(o)?o:m,l=t((function(r){null!==r&&r!==i&&n(r)}),[i,n]);return e(v,{size:"small",value:i,exclusive:!0,onChange:function(r,o){return l(o)},children:b.map((function(r){return e(s,{title:r.label,arrow:!0,children:e(u,{size:"small",value:r.value,"aria-label":r.label,sx:{p:"5px"},children:r.icon})},r.value)}))})},y=function(){return f},v=n(i)((function(o){var e=o.theme;return r({flex:"0 0 auto",".MuiToggleButtonGroup-grouped":{"&.Mui-selected":{color:l.common.white,backgroundColor:"var(--color-orange, ".concat(l.blue[600],")"),borderColor:"var(--color-orange, ".concat(l.blue[600],")"),"&.MuiToggleButtonGroup-lastButton":{borderColor:"var(--color-orange, ".concat(l.blue[600],")")},"&:hover":{backgroundColor:"var(--color-orange, ".concat(l.blue[600],")")}}}},e.breakpoints.down("md"),{display:"none"})})),x=function(r){return e(w,o(o({},r),{},{children:a(c,{className:"loading-overlay__content",children:[e(c,{className:"loading-overlay__spinner"}),e(d,{variant:"body2",color:"primary",children:"Loading..."})]})}))},w=n(c)({position:"absolute",top:0,left:0,right:0,bottom:0,bgcolor:"rgba(255, 255, 255, 0.7)",display:"flex",alignItems:"flex-start",justifyContent:"center",zIndex:1e3,paddingTop:"20vh",backdropFilter:"blur(2px)",".loading-overlay__content":{display:"flex",alignItems:"center",gap:"10px"},".loading-overlay__spinner":{width:24,height:24,border:"3px solid",borderColor:l.grey[300],borderTopColor:"var(--color-orange, ".concat(l.blue[600],")"),borderRadius:"50%","@keyframes spin":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}},animation:"spin 1s linear infinite"},".MuiTypography-root":{color:"var(--color-orange, ".concat(l.blue[600],")")}}),C=function(r){var o=r.error;return a(M,{children:[e(d,{variant:"h6",gutterBottom:!0,children:"An error occurred"}),e(d,{variant:"body2",children:o})]})},M=n(c)({marginTop:3,padding:3,border:"1px solid",borderColor:"error.main",borderRadius:1,bgcolor:"error.light",color:"error.contrastText"}),T=n("div")((function(r){var e=r.theme;return{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%","& .no-rows-primary":o({fill:"#3D4751"},e.applyStyles("light",{fill:"#AEB8C2"})),"& .no-rows-secondary":o({fill:"#1D2126"},e.applyStyles("light",{fill:"#E8EAED"}))}})),Z=function(){return a(_,{children:[a(T,{children:[a("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",width:96,viewBox:"0 0 452 257","aria-hidden":!0,focusable:"false",children:[e("path",{className:"no-rows-primary",d:"M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z"}),e("path",{className:"no-rows-primary",d:"M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z"}),e("path",{className:"no-rows-primary",d:"M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z"}),e("path",{className:"no-rows-secondary",d:"M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z"})]}),e(d,{variant:"h6",color:"text.secondary",gutterBottom:!0,children:"No data available"})]}),e(d,{variant:"body2",color:"text.secondary",children:"Try changing the filter or search keyword"})]})},_=n(c)({marginTop:"8px",padding:"24px 12px",textAlign:"center",border:"1px dashed",borderColor:l.grey[400],borderRadius:"6px"}),k=function(){return a(B,{children:[e(d,{variant:"h6",color:"text.primary",sx:{fontWeight:"bold"},children:"Waiting for data..."}),e(d,{variant:"body2",color:"text.secondary",children:"Please wait while we fetch the data."})]})},B=n(c)({marginTop:"8px",padding:"24px 12px",textAlign:"center",border:"1px dashed",borderColor:l.grey[400],borderRadius:"6px"}),j=function(){return a(H,{children:[e(d,{variant:"h6",color:"text.primary",sx:{fontWeight:"bold"},children:"Missing Configuration"}),e(d,{variant:"body2",color:"text.secondary",children:"We're sorry, but it looks like there's a missing configuration required for this feature to work correctly."}),e(d,{variant:"body2",color:"text.secondary",children:"Please contact support for assistance."})]})},H=n(c)({marginTop:3,padding:4,textAlign:"center",border:"1px dashed",borderColor:l.red[700],borderRadius:1});export{C as LoadingError,j as LoadingMissingConfig,Z as LoadingNoData,x as LoadingOverlay,k as LoadingWaiting,f as ViewModeButtons,y as createViewModeButtons,m as defaultViewMode};
|
|
2
2
|
//# sourceMappingURL=view-mode.units.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"view-mode.units.js","sources":["../../src/data-view/view-mode.units.tsx"],"sourcesContent":["import { FC, useCallback } from 'react'\r\nimport { Box, BoxProps, colors, styled, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material'\r\nimport ViewListIcon from '@mui/icons-material/ViewList'\r\nimport ViewModuleIcon from '@mui/icons-material/ViewModule'\r\nimport { EViewMode, IResponsiveSize, IViewModeElementProps } from './view-mode.types'\r\n\r\nexport const defaultSize: IResponsiveSize = { xs: 12, sm: 6, md: 4, lg: 3 }\r\n\r\nexport const defaultViewMode = EViewMode.List\r\n\r\nconst viewModes = [\r\n { value: EViewMode.Module, icon: <ViewModuleIcon />, label: 'Card Grid' },\r\n { value: EViewMode.List, icon: <ViewListIcon />, label: 'Detailed List' }\r\n]\r\n\r\nexport interface IViewModeProps {\r\n value?: EViewMode\r\n onChange?: (value: EViewMode) => void\r\n}\r\n\r\nexport const ViewModeButtons: FC<IViewModeProps> = (props) => {\r\n const { value, onChange = () => {} } = props\r\n const normalizedValue = value && Object.values(EViewMode).includes(value as EViewMode) ? value : defaultViewMode\r\n\r\n const handleChange = useCallback(\r\n (newValue: EViewMode | null) => {\r\n if (newValue !== null && newValue !== normalizedValue) {\r\n onChange(newValue)\r\n }\r\n },\r\n [normalizedValue, onChange]\r\n )\r\n\r\n return (\r\n <ToggleButtonGroupCustom size='small' value={normalizedValue} exclusive onChange={(_, v) => handleChange(v)}>\r\n {viewModes.map((mode) => (\r\n <Tooltip key={mode.value} title={mode.label} arrow>\r\n <ToggleButton size='small' value={mode.value} aria-label={mode.label} sx={{ p: '5px' }}>\r\n {mode.icon}\r\n </ToggleButton>\r\n </Tooltip>\r\n ))}\r\n </ToggleButtonGroupCustom>\r\n )\r\n}\r\n\r\nexport const createViewModeButtons = () => ViewModeButtons\r\n\r\nconst ToggleButtonGroupCustom = styled(ToggleButtonGroup)(({ theme }) => ({\r\n flex: '0 0 auto',\r\n '.MuiToggleButtonGroup-grouped': {\r\n '&.Mui-selected': {\r\n color: colors.common.white,\r\n backgroundColor: `var(--color-orange, ${colors.blue[600]})`,\r\n borderColor: `var(--color-orange, ${colors.blue[600]})`,\r\n '&.MuiToggleButtonGroup-lastButton': {\r\n borderColor: `var(--color-orange, ${colors.blue[600]})`\r\n },\r\n '&:hover': {\r\n backgroundColor: `var(--color-orange, ${colors.blue[600]})`\r\n }\r\n }\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n display: 'none'\r\n }\r\n}))\r\n\r\nexport const LoadingOverlay: FC<BoxProps> = (props) => (\r\n <LoadingOverlayWrap {...props}>\r\n <Box className='loading-overlay__content'>\r\n <Box className='loading-overlay__spinner' />\r\n <Typography variant='body2' color='primary'>\r\n Loading...\r\n </Typography>\r\n </Box>\r\n </LoadingOverlayWrap>\r\n)\r\n\r\nconst LoadingOverlayWrap = styled(Box)({\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n bgcolor: 'rgba(255, 255, 255, 0.7)',\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n justifyContent: 'center',\r\n zIndex: 1,\r\n paddingTop: '20vh',\r\n backdropFilter: 'blur(2px)',\r\n '.loading-overlay__content': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '10px'\r\n },\r\n '.loading-overlay__spinner': {\r\n width: 24,\r\n height: 24,\r\n border: '3px solid',\r\n borderColor: colors.grey[300],\r\n borderTopColor: `var(--color-orange, ${colors.blue[600]})`,\r\n borderRadius: '50%',\r\n '@keyframes spin': {\r\n '0%': { transform: 'rotate(0deg)' },\r\n '100%': { transform: 'rotate(360deg)' }\r\n },\r\n animation: 'spin 1s linear infinite'\r\n },\r\n '.MuiTypography-root': {\r\n color: `var(--color-orange, ${colors.blue[600]})`\r\n }\r\n})\r\n\r\nexport const LoadingError: FC<{ error: string }> = ({ error }) => (\r\n <LoadingErrorWrap>\r\n <Typography variant='h6' gutterBottom>\r\n An error occurred\r\n </Typography>\r\n <Typography variant='body2'>{error}</Typography>\r\n </LoadingErrorWrap>\r\n)\r\n\r\nconst LoadingErrorWrap = styled(Box)({\r\n marginTop: 3,\r\n padding: 3,\r\n border: '1px solid',\r\n borderColor: 'error.main',\r\n borderRadius: 1,\r\n bgcolor: 'error.light',\r\n color: 'error.contrastText'\r\n})\r\n\r\nconst StyledGridOverlay = styled('div')(({ theme }) => ({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n height: '100%',\r\n '& .no-rows-primary': {\r\n fill: '#3D4751',\r\n ...theme.applyStyles('light', {\r\n fill: '#AEB8C2'\r\n })\r\n },\r\n '& .no-rows-secondary': {\r\n fill: '#1D2126',\r\n ...theme.applyStyles('light', {\r\n fill: '#E8EAED'\r\n })\r\n }\r\n}))\r\n\r\nexport const LoadingNoData: FC<IViewModeElementProps> = () => (\r\n <LoadingNoDataWrap>\r\n <StyledGridOverlay>\r\n <svg xmlns='http://www.w3.org/2000/svg' fill='none' width={96} viewBox='0 0 452 257' aria-hidden focusable='false'>\r\n <path\r\n className='no-rows-primary'\r\n d='M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z'\r\n />\r\n <path\r\n className='no-rows-primary'\r\n d='M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z'\r\n />\r\n <path\r\n className='no-rows-primary'\r\n d='M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z'\r\n />\r\n <path\r\n className='no-rows-secondary'\r\n d='M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z'\r\n />\r\n </svg>\r\n <Typography variant='h6' color='text.secondary' gutterBottom>\r\n No data available\r\n </Typography>\r\n </StyledGridOverlay>\r\n <Typography variant='body2' color='text.secondary'>\r\n Try changing the filter or search keyword\r\n </Typography>\r\n </LoadingNoDataWrap>\r\n)\r\n\r\nconst LoadingNoDataWrap = styled(Box)({\r\n marginTop: '8px',\r\n padding: '24px 12px',\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.grey[400],\r\n borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingWaiting: FC = () => (\r\n <LoadingWaitingWrap>\r\n <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n Waiting for data...\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n Please wait while we fetch the data.\r\n </Typography>\r\n </LoadingWaitingWrap>\r\n)\r\n\r\nconst LoadingWaitingWrap = styled(Box)({\r\n marginTop: '8px',\r\n padding: '24px 12px',\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.grey[400],\r\n borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingMissingConfig: React.FC = () => (\r\n <LoadingMissingConfigWrap>\r\n <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n Missing Configuration\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n We're sorry, but it looks like there's a missing configuration required for this feature to work correctly.\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n Please contact support for assistance.\r\n </Typography>\r\n </LoadingMissingConfigWrap>\r\n)\r\n\r\nconst LoadingMissingConfigWrap = styled(Box)({\r\n marginTop: 3,\r\n padding: 4,\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.red[700],\r\n borderRadius: 1\r\n})\r\n"],"names":["defaultViewMode","EViewMode","List","viewModes","value","Module","icon","_jsx","ViewModuleIcon","label","ViewListIcon","ViewModeButtons","props","_props$onChange","onChange","normalizedValue","Object","values","includes","handleChange","useCallback","newValue","ToggleButtonGroupCustom","size","exclusive","_","v","children","map","mode","Tooltip","title","arrow","ToggleButton","sx","p","createViewModeButtons","styled","ToggleButtonGroup","_ref","theme","_defineProperty","flex","color","colors","common","white","backgroundColor","concat","blue","borderColor","breakpoints","down","display","LoadingOverlay","LoadingOverlayWrap","_objectSpread","_jsxs","Box","className","Typography","variant","position","top","left","right","bottom","bgcolor","alignItems","justifyContent","zIndex","paddingTop","backdropFilter","gap","width","height","border","grey","borderTopColor","borderRadius","transform","animation","LoadingError","_ref3","error","LoadingErrorWrap","gutterBottom","marginTop","padding","StyledGridOverlay","_ref4","flexDirection","fill","applyStyles","LoadingNoData","LoadingNoDataWrap","xmlns","viewBox","focusable","d","textAlign","LoadingWaiting","LoadingWaitingWrap","fontWeight","LoadingMissingConfig","LoadingMissingConfigWrap","red"],"mappings":"gcAQaA,IAAAA,EAAkBC,EAAUC,KAEnCC,EAAY,CAChB,CAAEC,MAAOH,EAAUI,OAAQC,KAAMC,EAACC,EAAiB,IAAEC,MAAO,aAC5D,CAAEL,MAAOH,EAAUC,KAAMI,KAAMC,EAACG,EAAe,IAAED,MAAO,kBAQ7CE,EAAsC,SAACC,GAClD,IAAQR,EAA+BQ,EAA/BR,MAAKS,EAA0BD,EAAxBE,SAAAA,OAAQ,IAAAD,EAAG,WAAQ,EAAAA,EAC5BE,EAAkBX,GAASY,OAAOC,OAAOhB,GAAWiB,SAASd,GAAsBA,EAAQJ,EAE3FmB,EAAeC,GACnB,SAACC,GACkB,OAAbA,GAAqBA,IAAaN,GACpCD,EAASO,EAEb,GACA,CAACN,EAAiBD,IAGpB,OACEP,EAACe,GAAwBC,KAAK,QAAQnB,MAAOW,EAAiBS,WAAS,EAACV,SAAU,SAACW,EAAGC,GAAC,OAAKP,EAAaO,EAAE,EAAAC,SACxGxB,EAAUyB,KAAI,SAACC,GAAI,OAClBtB,EAACuB,GAAyBC,MAAOF,EAAKpB,MAAOuB,kBAC3CzB,EAAC0B,GAAaV,KAAK,QAAQnB,MAAOyB,EAAKzB,MAAmB,aAAAyB,EAAKpB,MAAOyB,GAAI,CAAEC,EAAG,OAAOR,SACnFE,EAAKvB,QAFIuB,EAAKzB,MAKpB,KAGP,EAEagC,EAAwB,WAAH,OAASzB,CAAe,EAEpDW,EAA0Be,EAAOC,EAAPD,EAA0B,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,OAAAC,EAAA,CAChEC,KAAM,WACN,gCAAiC,CAC/B,iBAAkB,CAChBC,MAAOC,EAAOC,OAAOC,MACrBC,gBAAe,uBAAAC,OAAyBJ,EAAOK,KAAK,KAAO,KAC3DC,YAAW,uBAAAF,OAAyBJ,EAAOK,KAAK,KAAO,KACvD,oCAAqC,CACnCC,YAAW,uBAAAF,OAAyBJ,EAAOK,KAAK,KAAI,MAEtD,UAAW,CACTF,gBAAe,uBAAAC,OAAyBJ,EAAOK,KAAK,KAAI,SAI7DT,EAAMW,YAAYC,KAAK,MAAQ,CAC9BC,QAAS,QACV,IAGUC,EAA+B,SAAC1C,GAAK,OAChDL,EAACgD,EAAkBC,EAAAA,KAAK5C,GAAK,GAAA,CAC3Be,SAAA8B,EAACC,EAAI,CAAAC,UAAU,2BAA0BhC,SAAA,CACvCpB,EAACmD,EAAG,CAACC,UAAU,6BACfpD,EAACqD,EAAW,CAAAC,QAAQ,QAAQlB,MAAM,uCAIjB,EAGjBY,EAAqBlB,EAAOqB,EAAPrB,CAAY,CACrCyB,SAAU,WACVC,IAAK,EACLC,KAAM,EACNC,MAAO,EACPC,OAAQ,EACRC,QAAS,2BACTd,QAAS,OACTe,WAAY,aACZC,eAAgB,SAChBC,OAAQ,EACRC,WAAY,OACZC,eAAgB,YAChB,4BAA6B,CAC3BnB,QAAS,OACTe,WAAY,SACZK,IAAK,QAEP,4BAA6B,CAC3BC,MAAO,GACPC,OAAQ,GACRC,OAAQ,YACR1B,YAAaN,EAAOiC,KAAK,KACzBC,eAAc,uBAAA9B,OAAyBJ,EAAOK,KAAK,KAAO,KAC1D8B,aAAc,MACd,kBAAmB,CACjB,KAAM,CAAEC,UAAW,gBACnB,OAAQ,CAAEA,UAAW,mBAEvBC,UAAW,2BAEb,sBAAuB,CACrBtC,MAAK,uBAAAK,OAAyBJ,EAAOK,KAAK,KAAI,QAIrCiC,EAAsC,SAA1BC,GAAA,IAA6BC,EAAKD,EAALC,MAAK,OACzD3B,EAAC4B,EAAgB,CAAA1D,SAAA,CACfpB,EAACqD,EAAU,CAACC,QAAQ,KAAKyB,cAEZ,EAAA3D,SAAA,sBACbpB,EAACqD,EAAU,CAACC,QAAQ,QAASlC,SAAAyD,MACZ,EAGfC,EAAmBhD,EAAOqB,EAAPrB,CAAY,CACnCkD,UAAW,EACXC,QAAS,EACTZ,OAAQ,YACR1B,YAAa,aACb6B,aAAc,EACdZ,QAAS,cACTxB,MAAO,uBAGH8C,EAAoBpD,EAAO,MAAPA,EAAc,SAAAqD,GAAA,IAAGlD,EAAKkD,EAALlD,MAAK,MAAQ,CACtDa,QAAS,OACTsC,cAAe,SACfvB,WAAY,SACZC,eAAgB,SAChBM,OAAQ,OACR,qBAAoBnB,EAAA,CAClBoC,KAAM,WACHpD,EAAMqD,YAAY,QAAS,CAC5BD,KAAM,aAGV,uBAAsBpC,EAAA,CACpBoC,KAAM,WACHpD,EAAMqD,YAAY,QAAS,CAC5BD,KAAM,aAGX,IAEYE,EAA2C,WAA9B,OACxBrC,EAACsC,EAAiB,CAAApE,SAAA,CAChB8B,EAACgC,EAAiB,CAAA9D,SAAA,CAChB8B,EAAK,MAAA,CAAAuC,MAAM,6BAA6BJ,KAAK,OAAOlB,MAAO,GAAIuB,QAAQ,cAAa,eAAA,EAAaC,UAAU,QACzGvE,SAAA,CAAApB,EAAA,OAAA,CACEoD,UAAU,kBACVwC,EAAE,qLAEJ5F,UACEoD,UAAU,kBACVwC,EAAE,wLAEJ5F,UACEoD,UAAU,kBACVwC,EAAE,yLAEJ5F,UACEoD,UAAU,oBACVwC,EAAE,4lBAGN5F,EAACqD,EAAU,CAACC,QAAQ,KAAKlB,MAAM,iBAAiB2C,cAEnC,EAAA3D,SAAA,yBAEfpB,EAACqD,EAAW,CAAAC,QAAQ,QAAQlB,MAAM,iBAAgBhB,SAAA,gDAGhC,EAGhBoE,EAAoB1D,EAAOqB,EAAPrB,CAAY,CACpCkD,UAAW,MACXC,QAAS,YACTY,UAAW,SACXxB,OAAQ,aACR1B,YAAaN,EAAOiC,KAAK,KACzBE,aAAc,QAGHsB,EAAqB,WAAP,OACzB5C,EAAC6C,aACC/F,EAACqD,GAAWC,QAAQ,KAAKlB,MAAM,eAAeT,GAAI,CAAEqE,WAAY,QAEnD5E,SAAA,wBACbpB,EAACqD,EAAU,CAACC,QAAQ,QAAQlB,MAAM,iBAErBhB,SAAA,2CACM,EAGjB2E,EAAqBjE,EAAOqB,EAAPrB,CAAY,CACrCkD,UAAW,MACXC,QAAS,YACTY,UAAW,SACXxB,OAAQ,aACR1B,YAAaN,EAAOiC,KAAK,KACzBE,aAAc,QAGHyB,EAAiC,WAAb,OAC/B/C,EAACgD,EAAwB,CAAA9E,SAAA,CACvBpB,EAACqD,GAAWC,QAAQ,KAAKlB,MAAM,eAAeT,GAAI,CAAEqE,WAAY,QAEnD5E,SAAA,0BACbpB,EAACqD,EAAW,CAAAC,QAAQ,QAAQlB,MAAM,iBAErBhB,SAAA,gHACbpB,EAACqD,EAAU,CAACC,QAAQ,QAAQlB,MAAM,iBAAgBhB,SAAA,6CAGzB,EAGvB8E,EAA2BpE,EAAOqB,EAAPrB,CAAY,CAC3CkD,UAAW,EACXC,QAAS,EACTY,UAAW,SACXxB,OAAQ,aACR1B,YAAaN,EAAO8D,IAAI,KACxB3B,aAAc"}
|
|
1
|
+
{"version":3,"file":"view-mode.units.js","sources":["../../src/data-view/view-mode.units.tsx"],"sourcesContent":["import { FC, useCallback } from 'react'\r\nimport { Box, BoxProps, colors, styled, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material'\r\nimport ViewListIcon from '@mui/icons-material/ViewList'\r\nimport ViewModuleIcon from '@mui/icons-material/ViewModule'\r\nimport { EViewMode, IResponsiveSize, IViewModeElementProps } from './view-mode.types'\r\n\r\nexport const defaultSize: IResponsiveSize = { xs: 12, sm: 6, md: 4, lg: 3 }\r\n\r\nexport const defaultViewMode = EViewMode.List\r\n\r\nconst viewModes = [\r\n { value: EViewMode.Module, icon: <ViewModuleIcon />, label: 'Card Grid' },\r\n { value: EViewMode.List, icon: <ViewListIcon />, label: 'Detailed List' }\r\n]\r\n\r\nexport interface IViewModeProps {\r\n value?: EViewMode\r\n onChange?: (value: EViewMode) => void\r\n}\r\n\r\nexport const ViewModeButtons: FC<IViewModeProps> = (props) => {\r\n const { value, onChange = () => {} } = props\r\n const normalizedValue = value && Object.values(EViewMode).includes(value as EViewMode) ? value : defaultViewMode\r\n\r\n const handleChange = useCallback(\r\n (newValue: EViewMode | null) => {\r\n if (newValue !== null && newValue !== normalizedValue) {\r\n onChange(newValue)\r\n }\r\n },\r\n [normalizedValue, onChange]\r\n )\r\n\r\n return (\r\n <ToggleButtonGroupCustom size='small' value={normalizedValue} exclusive onChange={(_, v) => handleChange(v)}>\r\n {viewModes.map((mode) => (\r\n <Tooltip key={mode.value} title={mode.label} arrow>\r\n <ToggleButton size='small' value={mode.value} aria-label={mode.label} sx={{ p: '5px' }}>\r\n {mode.icon}\r\n </ToggleButton>\r\n </Tooltip>\r\n ))}\r\n </ToggleButtonGroupCustom>\r\n )\r\n}\r\n\r\nexport const createViewModeButtons = () => ViewModeButtons\r\n\r\nconst ToggleButtonGroupCustom = styled(ToggleButtonGroup)(({ theme }) => ({\r\n flex: '0 0 auto',\r\n '.MuiToggleButtonGroup-grouped': {\r\n '&.Mui-selected': {\r\n color: colors.common.white,\r\n backgroundColor: `var(--color-orange, ${colors.blue[600]})`,\r\n borderColor: `var(--color-orange, ${colors.blue[600]})`,\r\n '&.MuiToggleButtonGroup-lastButton': {\r\n borderColor: `var(--color-orange, ${colors.blue[600]})`\r\n },\r\n '&:hover': {\r\n backgroundColor: `var(--color-orange, ${colors.blue[600]})`\r\n }\r\n }\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n display: 'none'\r\n }\r\n}))\r\n\r\nexport const LoadingOverlay: FC<BoxProps> = (props) => (\r\n <LoadingOverlayWrap {...props}>\r\n <Box className='loading-overlay__content'>\r\n <Box className='loading-overlay__spinner' />\r\n <Typography variant='body2' color='primary'>\r\n Loading...\r\n </Typography>\r\n </Box>\r\n </LoadingOverlayWrap>\r\n)\r\n\r\nconst LoadingOverlayWrap = styled(Box)({\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n bgcolor: 'rgba(255, 255, 255, 0.7)',\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n justifyContent: 'center',\r\n zIndex: 1000,\r\n paddingTop: '20vh',\r\n backdropFilter: 'blur(2px)',\r\n '.loading-overlay__content': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '10px'\r\n },\r\n '.loading-overlay__spinner': {\r\n width: 24,\r\n height: 24,\r\n border: '3px solid',\r\n borderColor: colors.grey[300],\r\n borderTopColor: `var(--color-orange, ${colors.blue[600]})`,\r\n borderRadius: '50%',\r\n '@keyframes spin': {\r\n '0%': { transform: 'rotate(0deg)' },\r\n '100%': { transform: 'rotate(360deg)' }\r\n },\r\n animation: 'spin 1s linear infinite'\r\n },\r\n '.MuiTypography-root': {\r\n color: `var(--color-orange, ${colors.blue[600]})`\r\n }\r\n})\r\n\r\nexport const LoadingError: FC<{ error: string }> = ({ error }) => (\r\n <LoadingErrorWrap>\r\n <Typography variant='h6' gutterBottom>\r\n An error occurred\r\n </Typography>\r\n <Typography variant='body2'>{error}</Typography>\r\n </LoadingErrorWrap>\r\n)\r\n\r\nconst LoadingErrorWrap = styled(Box)({\r\n marginTop: 3,\r\n padding: 3,\r\n border: '1px solid',\r\n borderColor: 'error.main',\r\n borderRadius: 1,\r\n bgcolor: 'error.light',\r\n color: 'error.contrastText'\r\n})\r\n\r\nconst StyledGridOverlay = styled('div')(({ theme }) => ({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n height: '100%',\r\n '& .no-rows-primary': {\r\n fill: '#3D4751',\r\n ...theme.applyStyles('light', {\r\n fill: '#AEB8C2'\r\n })\r\n },\r\n '& .no-rows-secondary': {\r\n fill: '#1D2126',\r\n ...theme.applyStyles('light', {\r\n fill: '#E8EAED'\r\n })\r\n }\r\n}))\r\n\r\nexport const LoadingNoData: FC<IViewModeElementProps> = () => (\r\n <LoadingNoDataWrap>\r\n <StyledGridOverlay>\r\n <svg xmlns='http://www.w3.org/2000/svg' fill='none' width={96} viewBox='0 0 452 257' aria-hidden focusable='false'>\r\n <path\r\n className='no-rows-primary'\r\n d='M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z'\r\n />\r\n <path\r\n className='no-rows-primary'\r\n d='M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z'\r\n />\r\n <path\r\n className='no-rows-primary'\r\n d='M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z'\r\n />\r\n <path\r\n className='no-rows-secondary'\r\n d='M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z'\r\n />\r\n </svg>\r\n <Typography variant='h6' color='text.secondary' gutterBottom>\r\n No data available\r\n </Typography>\r\n </StyledGridOverlay>\r\n <Typography variant='body2' color='text.secondary'>\r\n Try changing the filter or search keyword\r\n </Typography>\r\n </LoadingNoDataWrap>\r\n)\r\n\r\nconst LoadingNoDataWrap = styled(Box)({\r\n marginTop: '8px',\r\n padding: '24px 12px',\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.grey[400],\r\n borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingWaiting: FC = () => (\r\n <LoadingWaitingWrap>\r\n <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n Waiting for data...\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n Please wait while we fetch the data.\r\n </Typography>\r\n </LoadingWaitingWrap>\r\n)\r\n\r\nconst LoadingWaitingWrap = styled(Box)({\r\n marginTop: '8px',\r\n padding: '24px 12px',\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.grey[400],\r\n borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingMissingConfig: React.FC = () => (\r\n <LoadingMissingConfigWrap>\r\n <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n Missing Configuration\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n We're sorry, but it looks like there's a missing configuration required for this feature to work correctly.\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n Please contact support for assistance.\r\n </Typography>\r\n </LoadingMissingConfigWrap>\r\n)\r\n\r\nconst LoadingMissingConfigWrap = styled(Box)({\r\n marginTop: 3,\r\n padding: 4,\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.red[700],\r\n borderRadius: 1\r\n})\r\n"],"names":["defaultViewMode","EViewMode","List","viewModes","value","Module","icon","_jsx","ViewModuleIcon","label","ViewListIcon","ViewModeButtons","props","_props$onChange","onChange","normalizedValue","Object","values","includes","handleChange","useCallback","newValue","ToggleButtonGroupCustom","size","exclusive","_","v","children","map","mode","Tooltip","title","arrow","ToggleButton","sx","p","createViewModeButtons","styled","ToggleButtonGroup","_ref","theme","_defineProperty","flex","color","colors","common","white","backgroundColor","concat","blue","borderColor","breakpoints","down","display","LoadingOverlay","LoadingOverlayWrap","_objectSpread","_jsxs","Box","className","Typography","variant","position","top","left","right","bottom","bgcolor","alignItems","justifyContent","zIndex","paddingTop","backdropFilter","gap","width","height","border","grey","borderTopColor","borderRadius","transform","animation","LoadingError","_ref3","error","LoadingErrorWrap","gutterBottom","marginTop","padding","StyledGridOverlay","_ref4","flexDirection","fill","applyStyles","LoadingNoData","LoadingNoDataWrap","xmlns","viewBox","focusable","d","textAlign","LoadingWaiting","LoadingWaitingWrap","fontWeight","LoadingMissingConfig","LoadingMissingConfigWrap","red"],"mappings":"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"}
|
|
@@ -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;
|
package/package.json
CHANGED
|
@@ -1,66 +1,66 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "dinocollab-core",
|
|
3
|
-
"version": "1.1.
|
|
4
|
-
"description": "",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"module": "dist/index.js",
|
|
7
|
-
"types": "dist/types/index.d.ts",
|
|
8
|
-
"exports": {
|
|
9
|
-
".": {
|
|
10
|
-
"import": "./dist/index.js",
|
|
11
|
-
"types": "./dist/types/index.d.ts"
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
"files": [
|
|
15
|
-
"dist"
|
|
16
|
-
],
|
|
17
|
-
"scripts": {
|
|
18
|
-
"build": "npx rimraf dist && rollup -c",
|
|
19
|
-
"build:watch": "rollup -c -w"
|
|
20
|
-
},
|
|
21
|
-
"keywords": [],
|
|
22
|
-
"author": "",
|
|
23
|
-
"license": "ISC",
|
|
24
|
-
"peerDependencies": {
|
|
25
|
-
"@emotion/react": "11.14.0",
|
|
26
|
-
"@emotion/styled": "11.14.0",
|
|
27
|
-
"@mui/icons-material": "5.17.1",
|
|
28
|
-
"@mui/material": "5.17.1",
|
|
29
|
-
"@mui/x-data-grid": "6.20.4",
|
|
30
|
-
"@mui/x-date-pickers": "6.20.2",
|
|
31
|
-
"axios": "1.8.3",
|
|
32
|
-
"clipboard-copy": "4.0.1",
|
|
33
|
-
"dayjs": "1.11.5",
|
|
34
|
-
"dinocollab-http-service": "1.1.5",
|
|
35
|
-
"dotenv": "16.4.7",
|
|
36
|
-
"framer-motion": "12.12.1",
|
|
37
|
-
"query-string": "9.1.1",
|
|
38
|
-
"react": "18.3.1",
|
|
39
|
-
"react-dom": "18.3.1",
|
|
40
|
-
"react-quill": "2.0.0",
|
|
41
|
-
"react-router-dom": "6.30.0"
|
|
42
|
-
},
|
|
43
|
-
"devDependencies": {
|
|
44
|
-
"@babel/core": "7.27.1",
|
|
45
|
-
"@babel/preset-env": "7.27.2",
|
|
46
|
-
"@babel/preset-react": "7.27.1",
|
|
47
|
-
"@babel/preset-typescript": "7.27.1",
|
|
48
|
-
"@rollup/plugin-babel": "6.0.4",
|
|
49
|
-
"@rollup/plugin-commonjs": "28.0.3",
|
|
50
|
-
"@rollup/plugin-node-resolve": "16.0.1",
|
|
51
|
-
"@rollup/plugin-typescript": "12.1.2",
|
|
52
|
-
"@rollup/plugin-url": "8.0.2",
|
|
53
|
-
"@types/node": "16.18.126",
|
|
54
|
-
"@types/react": "18.3.20",
|
|
55
|
-
"@types/react-dom": "18.3.5",
|
|
56
|
-
"babel-preset-react": "6.24.1",
|
|
57
|
-
"babel-preset-typescript": "7.0.0-alpha.19",
|
|
58
|
-
"rollup": "4.41.0",
|
|
59
|
-
"rollup-plugin-copy": "3.5.0",
|
|
60
|
-
"rollup-plugin-peer-deps-external": "2.2.4",
|
|
61
|
-
"rollup-plugin-postcss": "4.0.2",
|
|
62
|
-
"rollup-plugin-terser": "7.0.2",
|
|
63
|
-
"tslib": "2.8.1",
|
|
64
|
-
"typescript": "4.9.5"
|
|
65
|
-
}
|
|
66
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "dinocollab-core",
|
|
3
|
+
"version": "1.1.11",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.js",
|
|
7
|
+
"types": "dist/types/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/index.js",
|
|
11
|
+
"types": "./dist/types/index.d.ts"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"dist"
|
|
16
|
+
],
|
|
17
|
+
"scripts": {
|
|
18
|
+
"build": "npx rimraf dist && rollup -c",
|
|
19
|
+
"build:watch": "rollup -c -w"
|
|
20
|
+
},
|
|
21
|
+
"keywords": [],
|
|
22
|
+
"author": "",
|
|
23
|
+
"license": "ISC",
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"@emotion/react": "11.14.0",
|
|
26
|
+
"@emotion/styled": "11.14.0",
|
|
27
|
+
"@mui/icons-material": "5.17.1",
|
|
28
|
+
"@mui/material": "5.17.1",
|
|
29
|
+
"@mui/x-data-grid": "6.20.4",
|
|
30
|
+
"@mui/x-date-pickers": "6.20.2",
|
|
31
|
+
"axios": "1.8.3",
|
|
32
|
+
"clipboard-copy": "4.0.1",
|
|
33
|
+
"dayjs": "1.11.5",
|
|
34
|
+
"dinocollab-http-service": "1.1.5",
|
|
35
|
+
"dotenv": "16.4.7",
|
|
36
|
+
"framer-motion": "12.12.1",
|
|
37
|
+
"query-string": "9.1.1",
|
|
38
|
+
"react": "18.3.1",
|
|
39
|
+
"react-dom": "18.3.1",
|
|
40
|
+
"react-quill": "2.0.0",
|
|
41
|
+
"react-router-dom": "6.30.0"
|
|
42
|
+
},
|
|
43
|
+
"devDependencies": {
|
|
44
|
+
"@babel/core": "7.27.1",
|
|
45
|
+
"@babel/preset-env": "7.27.2",
|
|
46
|
+
"@babel/preset-react": "7.27.1",
|
|
47
|
+
"@babel/preset-typescript": "7.27.1",
|
|
48
|
+
"@rollup/plugin-babel": "6.0.4",
|
|
49
|
+
"@rollup/plugin-commonjs": "28.0.3",
|
|
50
|
+
"@rollup/plugin-node-resolve": "16.0.1",
|
|
51
|
+
"@rollup/plugin-typescript": "12.1.2",
|
|
52
|
+
"@rollup/plugin-url": "8.0.2",
|
|
53
|
+
"@types/node": "16.18.126",
|
|
54
|
+
"@types/react": "18.3.20",
|
|
55
|
+
"@types/react-dom": "18.3.5",
|
|
56
|
+
"babel-preset-react": "6.24.1",
|
|
57
|
+
"babel-preset-typescript": "7.0.0-alpha.19",
|
|
58
|
+
"rollup": "4.41.0",
|
|
59
|
+
"rollup-plugin-copy": "3.5.0",
|
|
60
|
+
"rollup-plugin-peer-deps-external": "2.2.4",
|
|
61
|
+
"rollup-plugin-postcss": "4.0.2",
|
|
62
|
+
"rollup-plugin-terser": "7.0.2",
|
|
63
|
+
"tslib": "2.8.1",
|
|
64
|
+
"typescript": "4.9.5"
|
|
65
|
+
}
|
|
66
|
+
}
|