dinocollab-core 2.1.21 → 2.1.22
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/src/data-view/create.data-view.js +1 -1
- package/dist/src/data-view/create.data-view.js.map +1 -1
- package/dist/src/data-view/create.filter-bar.js +1 -1
- package/dist/src/data-view/create.filter-bar.js.map +1 -1
- package/dist/src/data-view/scroll-tracking.js +1 -1
- package/dist/src/data-view/scroll-tracking.js.map +1 -1
- package/dist/src/data-view/view-mode.units.js.map +1 -1
- package/dist/types/data-view/create.data-view.d.ts +3 -0
- package/dist/types/data-view/create.filter-bar.d.ts +1 -0
- package/dist/types/data-view/scroll-tracking.d.ts +6 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as e,createClass as i,objectSpread2 as t,classCallCheck as o,callSuper as
|
|
1
|
+
import{inherits as e,createClass as i,objectSpread2 as t,classCallCheck as o,callSuper as l,defineProperty as n}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 j(u){var j=y(),x=P(),F=b(),V=g(u.viewMode),T=B();return function(){function g(e){var i;return o(this,g),i=l(this,g,[e]),n(i,"mergeConfig",(function(e){var t,o,l,n,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===(l=r.paginationBarConfigs)||void 0===l?void 0:l.enablePaginationTop)&&void 0!==o?o:null===(n=u.paginationBar)||void 0===n?void 0:n.enablePaginationTop)&&void 0!==t&&t,scrollTracking:Object.assign({},u.scrollTracking,null==r?void 0:r.scrollTracking)}})),n(i,"configCache",{}),n(i,"refFilterButton",null),n(i,"refSortButton",null),n(i,"renderFooter",(function(){var e,o,l,n,r=(null===(e=i.props.slots)||void 0===e?void 0:e.footerProps)||{};return a(H,t(t({},r.wrapProps),{},{children:!1!==r.enablePagination&&a(T,t({count:null!==(o=null===(l=i.props.data)||void 0===l?void 0:l.totalItems)&&void 0!==o?o:0,defaultFilter:null===(n=i.internalConfig.filterBar)||void 0===n?void 0:n.defaultValue,filter:i.filterState,onChange:i.onFilterStateChangeHandler},i.internalConfig.paginationBar))}))})),n(i,"onViewModeChangeHandler",(function(e){i.setState({viewMode:e},(function(){var t,o;if(i.props.syncViewModeToURL){var l,n,r,a,s=null!==(l=null!==(n=null===(r=i.internalConfig.viewMode)||void 0===r?void 0:r.defaultValue)&&void 0!==n?n:null===(a=u.viewMode)||void 0===a?void 0:a.defaultValue)&&void 0!==l?l:h;m({viewMode:e,defaultViewMode:s})}null===(t=(o=i.props).onViewModeChange)||void 0===t||t.call(o,e)}))})),n(i,"onKeywordChangeHandler",(function(e){return i.setState({keyword:e})})),n(i,"onScrollChangeHandler",(function(e){return i.setState({scrolled:e.isScrolled})})),n(i,"onPopperPanelChangeHandler",(function(e,t){return i.setState({anchorEl:e,area:t})})),n(i,"onClearHandler",(function(){return i.setState(w)})),n(i,"onPanelCloseHandler",(function(){i.setState({anchorEl:null,area:void 0,keyword:""})})),n(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,l,n,r,a,s=null!==(i=null!==(o=null===(l=e.slots)||void 0===l||null===(l=l.viewModeConfigs)||void 0===l?void 0:l.defaultValue)&&void 0!==o?o:null===(n=u.viewMode)||void 0===n?void 0:n.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,l,n=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===(l=this.props.slots)||void 0===l?void 0:l.viewModeConfigs);return(n||r)&&this.mergeConfig(e),!0}},{key:"render",value:function(){var e,i,o,l,n,d,u,g,h,C,m,w,y,B,P,b,H,I={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:I,children:[(null===(i=this.internalConfig.filterBar)||void 0===i?void 0:i.enableSticky)&&a(M,t({onChange:this.onScrollChangeHandler},this.internalConfig.scrollTracking)),null===(o=this.props.slots)||void 0===o||null===(o=o.filterSlots)||void 0===o?void 0:o.above,a(j,{id:null===(l=this.internalConfig.scrollTracking)||void 0===l?void 0:l.elementId,slots:t(t({},null===(n=this.props.slots)||void 0===n?void 0:n.primaryInputSlots),{},{right:r(s,{children:[(null===(d=this.internalConfig.filterBar)||void 0===d?void 0:d.enableSort)&&a(p,{}),null===(u=this.props.slots)||void 0===u||null===(u=u.primaryInputSlots)||void 0===u?void 0:u.right]})}),children:a(x,{})}),null===(g=this.props.slots)||void 0===g||null===(g=g.filterSlots)||void 0===g?void 0:g.below,null===(h=this.props.slots)||void 0===h||null===(h=h.activeFiltersPanelSlots)||void 0===h?void 0:h.above,r(k,{children:[a(c,{value:this.state.viewMode,onChange:this.onViewModeChangeHandler}),null===(C=this.props.slots)||void 0===C||null===(C=C.activeFiltersPanelSlots)||void 0===C?void 0:C.left,r(f,{flexDirection:"row",sx:{flexWrap:"wrap",alignItems:"center",gap:1,flexGrow:1},children:[a(F,{loading:this.props.loading}),a(v,{sx:{display:"flex",alignItems:"center",gap:1,flexGrow:1,justifyContent:"end"},children:this.internalConfig.enablePaginationTop&&a(T,t({count:null!==(m=null===(w=this.props.data)||void 0===w?void 0:w.totalItems)&&void 0!==m?m:0,defaultFilter:null===(y=this.internalConfig.filterBar)||void 0===y?void 0:y.defaultValue,filter:this.filterState,onChange:this.onFilterStateChangeHandler},this.internalConfig.paginationBar))})]}),null===(B=this.props.slots)||void 0===B||null===(B=B.activeFiltersPanelSlots)||void 0===B?void 0:B.right]}),null===(P=this.props.slots)||void 0===P||null===(P=P.activeFiltersPanelSlots)||void 0===P?void 0:P.below,a(V,{data:null!==(b=null===(H=this.props.data)||void 0===H?void 0:H.items)&&void 0!==b?b:[],viewMode:this.viewMode,loading:this.props.loading,error:this.props.error,slots:this.internalConfig.viewMode}),this.renderFooter()]})}}])}()}var k=u(v)({display:"flex",alignItems:"center",flexWrap:"wrap",gap:"8px",marginBottom:"8px",minHeight:"var(--filter-bar-height, 40px)"}),H=u(v)({display:"flex",justifyContent:"flex-end",width:"100%"});export{j 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, Stack, styled } from '@mui/material'\r\nimport { SortButton } from './ui.units'\r\nimport { createViewMode } from './create.view-mode'\r\nimport { defaultViewMode, ViewModeButtons } from './view-mode.units'\r\nimport { getViewModeFromURL, syncViewModeToURL } from './query-param-url'\r\nimport { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types'\r\nimport { IFilterBarConfigs, IFilterState, IFilterStateChangeHandler, IPositionElement, IViewData } from './types'\r\nimport { defaultFilterBarState, DataViewContext, IDataViewState, IDataViewContext, OnPanelValueChange } from './context'\r\nimport createFilterBar, { IFilterBarSlots } from './create.filter-bar'\r\nimport ScrollTracking, { IScrollTrackingData } from './scroll-tracking'\r\nimport createPaginationBar, { IPaginationBarConfigs } from './create.pagination-bar'\r\nimport createPopperPanel from './create.popper-panel'\r\nimport createActiveFiltersPanel from './create.active-filters-panel'\r\n\r\nexport const filterBarClasses = {\r\n root: 'FilterBar-root',\r\n content: 'FilterBar-content',\r\n input: 'FilterBar-input',\r\n inputWrap: 'FilterBar-inputWrap',\r\n label: 'FilterBar-label',\r\n button: 'FilterBar-button',\r\n spacing: 'FilterBar-spacing',\r\n panel: 'FilterBar-panel',\r\n sticky: 'FilterBar-sticky',\r\n shadow: 'FilterBar-shadow'\r\n}\r\n\r\nexport interface IDataViewSlots<T extends IViewModeValidModel> {\r\n filterWrapProps?: BoxProps\r\n filterSlots?: IPositionElement\r\n activeFiltersPanelSlots?: IPositionElement\r\n primaryInputSlots?: IFilterBarSlots\r\n filterBarConfigs?: IFilterBarConfigs<T>\r\n viewModeConfigs?: IViewModeConfigs<T>\r\n paginationBarConfigs?: IPaginationBarConfigs\r\n footerProps?: {\r\n wrapProps?: BoxProps\r\n enablePagination?: boolean\r\n }\r\n}\r\n\r\nexport interface IDataViewProps<T extends IViewModeValidModel> {\r\n loading?: boolean\r\n error?: string\r\n data?: IViewData<T>\r\n filter?: IFilterState<T>\r\n onFilterChange?: (value: IFilterState<T>) => void\r\n viewMode?: EViewMode\r\n onViewModeChange?: (value: EViewMode) => void\r\n syncViewModeToURL?: boolean\r\n slots?: IDataViewSlots<T>\r\n}\r\n\r\nexport interface IDataViewConfigs<T extends IViewModeValidModel> {\r\n filterBar?: IFilterBarConfigs<T>\r\n viewMode?: IViewModeConfigs<T>\r\n paginationBar?: IPaginationBarConfigs\r\n}\r\n\r\ninterface IInternalConfigs<T extends IViewModeValidModel> extends IDataViewConfigs<T> {\r\n enablePaginationTop?: boolean\r\n}\r\n\r\nfunction createDataView<T extends IViewModeValidModel>(configs: IDataViewConfigs<T>): ComponentType<IDataViewProps<T>> {\r\n const InputInstance = createFilterBar<T>()\r\n const PopperPanelInstance = createPopperPanel<T>()\r\n const ActiveFiltersPanelInstance = createActiveFiltersPanel<T>()\r\n const ViewModeInstance = createViewMode<T>(configs.viewMode)\r\n const PaginationBarInstance = createPaginationBar<T>()\r\n\r\n class DataView extends Component<IDataViewProps<T>, IDataViewState<T>> {\r\n constructor(props: IDataViewProps<T>) {\r\n super(props)\r\n this.mergeConfig(props)\r\n this.state = this.getDefaultState(props)\r\n }\r\n\r\n private getDefaultState(currentProps: IDataViewProps<T>): IDataViewState<T> {\r\n const defaultValue = currentProps.slots?.viewModeConfigs?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n const viewMode = currentProps.syncViewModeToURL ? getViewModeFromURL<T>({ defaultViewMode: defaultValue }) : defaultValue\r\n return {\r\n ...defaultFilterBarState,\r\n filterState: this.internalConfig.filterBar?.defaultValue ?? {},\r\n viewMode\r\n }\r\n }\r\n\r\n get filterState(): IFilterState<T> {\r\n return this.props.filter ?? this.state.filterState\r\n }\r\n\r\n get viewMode(): EViewMode | undefined {\r\n return this.props.viewMode ?? this.state.viewMode\r\n }\r\n\r\n private mergeConfig = (currentProps: IDataViewProps<T>) => {\r\n const { slots } = currentProps\r\n this.configCache = {\r\n filterBar: Object.assign({}, configs.filterBar, slots?.filterBarConfigs),\r\n viewMode: slots?.viewModeConfigs,\r\n paginationBar: Object.assign({}, configs.paginationBar, slots?.paginationBarConfigs),\r\n enablePaginationTop: slots?.paginationBarConfigs?.enablePaginationTop ?? configs.paginationBar?.enablePaginationTop ?? false\r\n }\r\n }\r\n\r\n private configCache: IInternalConfigs<T> = {}\r\n get internalConfig() {\r\n return this.configCache\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IDataViewProps<T>>): boolean {\r\n const filterDiff = JSON.stringify(nextProps.slots?.filterBarConfigs) !== JSON.stringify(this.props.slots?.filterBarConfigs)\r\n const viewModeDiff = JSON.stringify(nextProps.slots?.viewModeConfigs) !== JSON.stringify(this.props.slots?.viewModeConfigs)\r\n if (filterDiff || viewModeDiff) this.mergeConfig(nextProps)\r\n return true\r\n }\r\n\r\n refFilterButton: HTMLButtonElement | null = null\r\n refSortButton: HTMLButtonElement | null = null\r\n render() {\r\n const mapContext: IDataViewContext<T> = {\r\n keyword: this.state.keyword.trim(),\r\n filterBarConfigs: this.internalConfig.filterBar ?? {},\r\n filterState: this.filterState,\r\n anchorEl: this.state.anchorEl,\r\n area: this.state.area,\r\n viewMode: this.state.viewMode,\r\n scrolled: this.state.scrolled,\r\n onFilterStateChange: this.onFilterStateChangeHandler,\r\n onKeywordChange: this.onKeywordChangeHandler,\r\n onPopperPanelChange: this.onPopperPanelChangeHandler,\r\n onPanelClose: this.onPanelCloseHandler,\r\n onClear: this.onClearHandler\r\n }\r\n return (\r\n <DataViewContext.Provider value={mapContext}>\r\n {this.internalConfig.filterBar?.enableSticky && <ScrollTracking onChange={this.onScrollChangeHandler} />}\r\n {this.props.slots?.filterSlots?.above}\r\n <InputInstance\r\n slots={{\r\n ...this.props.slots?.primaryInputSlots,\r\n right: (\r\n <>\r\n {this.internalConfig.filterBar?.enableSort && <SortButton />}\r\n {this.props.slots?.primaryInputSlots?.right}\r\n </>\r\n )\r\n }}\r\n >\r\n <PopperPanelInstance />\r\n </InputInstance>\r\n {this.props.slots?.filterSlots?.below}\r\n {this.props.slots?.activeFiltersPanelSlots?.above}\r\n <FilterBarPanel>\r\n <ViewModeButtons value={this.state.viewMode} onChange={this.onViewModeChangeHandler} />\r\n {this.props.slots?.activeFiltersPanelSlots?.left}\r\n <Stack flexDirection={'row'} sx={{ flexWrap: 'wrap', alignItems: 'center', gap: 1, flexGrow: 1 }}>\r\n <ActiveFiltersPanelInstance loading={this.props.loading} />\r\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexGrow: 1, justifyContent: 'end' }}>\r\n {this.internalConfig.enablePaginationTop && (\r\n <PaginationBarInstance\r\n count={this.props.data?.totalItems ?? 0}\r\n defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n filter={this.filterState}\r\n onChange={this.onFilterStateChangeHandler}\r\n {...this.internalConfig.paginationBar}\r\n />\r\n )}\r\n </Box>\r\n </Stack>\r\n {this.props.slots?.activeFiltersPanelSlots?.right}\r\n </FilterBarPanel>\r\n {this.props.slots?.activeFiltersPanelSlots?.below}\r\n <ViewModeInstance\r\n data={this.props.data?.items ?? []}\r\n viewMode={this.viewMode}\r\n loading={this.props.loading}\r\n error={this.props.error}\r\n slots={this.internalConfig.viewMode}\r\n />\r\n {this.renderFooter()}\r\n </DataViewContext.Provider>\r\n )\r\n }\r\n\r\n renderFooter = () => {\r\n const temp = this.props.slots?.footerProps || {}\r\n return (\r\n <FooterWrap {...temp.wrapProps}>\r\n {temp.enablePagination !== false && (\r\n <PaginationBarInstance\r\n count={this.props.data?.totalItems ?? 0}\r\n defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n filter={this.filterState}\r\n onChange={this.onFilterStateChangeHandler}\r\n {...this.internalConfig.paginationBar}\r\n />\r\n )}\r\n </FooterWrap>\r\n )\r\n }\r\n\r\n onViewModeChangeHandler = (value: EViewMode) => {\r\n this.setState({ viewMode: value }, () => {\r\n if (this.props.syncViewModeToURL) {\r\n const dViewMode = this.internalConfig.viewMode?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n syncViewModeToURL({ viewMode: value, defaultViewMode: dViewMode })\r\n }\r\n this.props.onViewModeChange?.(value)\r\n })\r\n }\r\n\r\n onKeywordChangeHandler = (keyword: string) => this.setState({ keyword })\r\n\r\n onScrollChangeHandler = (data: IScrollTrackingData) => this.setState({ scrolled: data.isScrolled })\r\n\r\n onPopperPanelChangeHandler: OnPanelValueChange = (anchorEl, area) => this.setState({ anchorEl, area })\r\n\r\n onClearHandler = () => this.setState(defaultFilterBarState)\r\n\r\n onPanelCloseHandler = () => {\r\n this.setState({ anchorEl: null, area: undefined, keyword: '' })\r\n }\r\n\r\n onFilterStateChangeHandler: IFilterStateChangeHandler<T> = (filterState: IFilterState<T>) => {\r\n if (!this.props.filter) this.setState({ ...defaultFilterBarState, filterState })\r\n this.props.onFilterChange && this.props.onFilterChange(filterState)\r\n if (!!this.props.filter) this.setState(defaultFilterBarState)\r\n }\r\n }\r\n\r\n return DataView\r\n}\r\n\r\nexport default createDataView\r\n\r\nconst FilterBarPanel = styled(Box)({\r\n display: 'flex',\r\n alignItems: 'center',\r\n flexWrap: 'wrap',\r\n gap: '8px',\r\n marginBottom: '8px',\r\n minHeight: 'var(--filter-bar-height, 40px)'\r\n})\r\n\r\nconst FooterWrap = styled(Box)({\r\n display: 'flex',\r\n justifyContent: 'flex-end',\r\n width: '100%'\r\n})\r\n"],"names":["createDataView","configs","InputInstance","createFilterBar","PopperPanelInstance","createPopperPanel","ActiveFiltersPanelInstance","createActiveFiltersPanel","ViewModeInstance","createViewMode","viewMode","PaginationBarInstance","createPaginationBar","DataView","props","_this","_classCallCheck","_callSuper","_defineProperty","currentProps","_ref","_slots$paginationBarC","_slots$paginationBarC2","_configs$paginationBa","slots","configCache","filterBar","Object","assign","filterBarConfigs","viewModeConfigs","paginationBar","paginationBarConfigs","enablePaginationTop","_this$props$slots","_this$props$data$tota","_this$props$data","_this$internalConfig$","temp","footerProps","_jsx","FooterWrap","_objectSpread","wrapProps","children","enablePagination","count","data","totalItems","defaultFilter","internalConfig","defaultValue","filter","filterState","onChange","onFilterStateChangeHandler","value","setState","_this$props$onViewMod","_this$props","syncViewModeToURL","_ref2","_this$internalConfig$2","_this$internalConfig$3","_configs$viewMode","dViewMode","defaultViewMode","onViewModeChange","call","keyword","scrolled","isScrolled","anchorEl","area","defaultFilterBarState","undefined","onFilterChange","mergeConfig","state","getDefaultState","_inherits","Component","_createClass","key","_ref3","_currentProps$slots$v","_currentProps$slots","_configs$viewMode2","_this$internalConfig$4","_this$internalConfig$5","getViewModeFromURL","this","get","_this$props$filter","_this$props$viewMode","nextProps","_nextProps$slots","_this$props$slots2","_nextProps$slots2","_this$props$slots3","filterDiff","JSON","stringify","viewModeDiff","_this$internalConfig$6","_this$internalConfig$7","_this$props$slots4","_this$props$slots5","_this$internalConfig$8","_this$props$slots6","_this$props$slots7","_this$props$slots8","_this$props$slots9","_this$props$data$tota2","_this$props$data2","_this$internalConfig$9","_this$props$slots0","_this$props$slots1","_this$props$data$item","_this$props$data3","mapContext","trim","onFilterStateChange","onKeywordChange","onKeywordChangeHandler","onPopperPanelChange","onPopperPanelChangeHandler","onPanelClose","onPanelCloseHandler","onClear","onClearHandler","_jsxs","DataViewContext","Provider","enableSticky","ScrollTracking","onScrollChangeHandler","filterSlots","above","primaryInputSlots","right","_Fragment","enableSort","SortButton","below","activeFiltersPanelSlots","FilterBarPanel","ViewModeButtons","onViewModeChangeHandler","left","Stack","flexDirection","sx","flexWrap","alignItems","gap","flexGrow","loading","Box","display","justifyContent","items","error","renderFooter","styled","marginBottom","minHeight","width"],"mappings":"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"}
|
|
1
|
+
{"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, IScrollTrackingOptions } 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 scrollTracking?: IScrollTrackingOptions\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 scrollTracking?: IScrollTrackingOptions\r\n}\r\n\r\ninterface IInternalConfigs<T extends IViewModeValidModel> extends IDataViewConfigs<T> {\r\n enablePaginationTop?: boolean\r\n scrollTracking?: IScrollTrackingOptions\r\n}\r\n\r\nfunction createDataView<T extends IViewModeValidModel>(configs: IDataViewConfigs<T>): ComponentType<IDataViewProps<T>> {\r\n const FilterBarInstance = 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 scrollTracking: Object.assign({}, configs.scrollTracking, slots?.scrollTracking)\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\r\n return (\r\n <DataViewContext.Provider value={mapContext}>\r\n {this.internalConfig.filterBar?.enableSticky && (\r\n <ScrollTracking onChange={this.onScrollChangeHandler} {...this.internalConfig.scrollTracking} />\r\n )}\r\n {this.props.slots?.filterSlots?.above}\r\n <FilterBarInstance\r\n id={this.internalConfig.scrollTracking?.elementId}\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 </FilterBarInstance>\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","FilterBarInstance","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","scrollTracking","_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$internalConfig$8","_this$props$slots5","_this$internalConfig$9","_this$props$slots6","_this$props$slots7","_this$props$slots8","_this$props$slots9","_this$props$data$tota2","_this$props$data2","_this$internalConfig$0","_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","id","elementId","primaryInputSlots","right","_Fragment","enableSort","SortButton","below","activeFiltersPanelSlots","FilterBarPanel","ViewModeButtons","onViewModeChangeHandler","left","Stack","flexDirection","sx","flexWrap","alignItems","gap","flexGrow","loading","Box","display","justifyContent","items","error","renderFooter","styled","marginBottom","minHeight","width"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as e,inherits as t,createClass as
|
|
1
|
+
import{defineProperty as e,inherits as t,createClass as r,classCallCheck as a,callSuper as n,objectSpread2 as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,jsxs as l}from"react/jsx-runtime";import{Component as p}from"react";import{styled as s,Box as c,colors as d}from"@mui/material";import u from"@mui/material/ClickAwayListener";import{createFilterStore as f}from"./filter-store.js";import{FilterButton as h,FilterInput as g,FilterInputAdornment as m}from"./ui.units.js";import{mapDataViewContext as b,defaultDataViewContext as v}from"./context.js";var x={root:"FilterBar-root",content:"FilterBar-content",input:"FilterBar-input",inputWrap:"FilterBar-inputWrap",label:"FilterBar-label",button:"FilterBar-button",spacing:"FilterBar-spacing",sticky:"FilterBar-sticky",shadow:"FilterBar-shadow"};function C(){var s=function(){function s(){var t;a(this,s);for(var r=arguments.length,o=new Array(r),i=0;i<r;i++)o[i]=arguments[i];return t=n(this,s,[].concat(o)),e(t,"dataViewContext",v),e(t,"refInput",null),e(t,"refBeforeInput",null),e(t,"getRootClasses",(function(){var e,r=null!==(e=t.dataViewContext.filterBarConfigs.enableSticky)&&void 0!==e&&e,a=[x.root];return r&&a.push(x.sticky),t.dataViewContext.scrolled&&a.push(x.shadow),a.join(" ")})),e(t,"handleKeyDown",(function(e){var r=e.keyCode;if(13===r)e.stopPropagation(),e.preventDefault(),t.handleEnterSearch();else if(27===r){var a;e.stopPropagation(),e.preventDefault(),null===(a=t.refInput)||void 0===a||a.blur(),t.dataViewContext.onPanelClose()}})),e(t,"handleEnterSearch",(function(){var e;if(t.dataViewContext.keyword){var r=f(t.dataViewContext.filterState);r.addQuickSearch(t.dataViewContext.keyword,{reason:"quickSearch",area:"input"});var a,n=r.build();if(null!==(e=n.details)&&void 0!==e&&e.isChanged)null===(a=t.refInput)||void 0===a||a.blur(),t.dataViewContext.onFilterStateChange(n)}})),e(t,"handleClear",(function(){var e;null===(e=t.refInput)||void 0===e||e.blur(),t.dataViewContext.onClear()})),t}return t(s,p),r(s,[{key:"render",value:function(){var e=this;return b((function(t){var r,a,n,p=t.filterBarConfigs,s=p.id;return e.dataViewContext=t,i(u,{onClickAway:function(){return t.onPopperPanelChange(null)},children:l(k,o(o({id:e.props.id,className:e.getRootClasses()},null===(r=e.props.slots)||void 0===r?void 0:r.wrapProps),{},{children:[l("div",{className:x.content,children:[null===(a=e.props.slots)||void 0===a?void 0:a.left,l("div",{className:x.inputWrap,children:[i(h,{className:x.button,onClick:function(e){t.onPopperPanelChange(e.currentTarget,"filterButton")}}),l(c,{component:"label",htmlFor:s,className:x.label,children:[i(c,{ref:function(t){e.refBeforeInput=t}}),i(g,{ref:function(t){e.refInput=t},id:s,className:x.input,placeholder:p.placeholder,onChange:function(e){return t.onKeywordChange(e.target.value)},value:t.keyword,onFocus:function(){e.refBeforeInput&&t.onPopperPanelChange(e.refBeforeInput,"input")},onKeyDown:e.handleKeyDown,endAdornment:i(m,{notes:p.notes,keyword:t.keyword,onEnterSearch:e.handleEnterSearch,onClear:e.handleClear})})]})]}),null===(n=e.props.slots)||void 0===n?void 0:n.right]}),e.props.children]}))})}))}}])}();return s}var k=s(c)((function(t){var r=t.theme;return e(e(e(e(e(e(e({marginBottom:"4px",marginLeft:"-6px",marginRight:"-6px"},"&.".concat(x.sticky),{position:"sticky",top:"var(--height-header, 0)",zIndex:r.zIndex.appBar-1}),".".concat(x.content),{display:"flex",gap:"8px",alignItems:"center",flexWrap:"wrap",padding:r.spacing(1.5,0,.75),position:"relative",backgroundColor:r.palette.background.paper,"&::after":{content:'""',position:"absolute",top:"100%",left:0,width:"100%",height:"6px",pointerEvents:"none",background:"linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent)",maskImage:"linear-gradient(to right, transparent, black 20%, black 80%, transparent)",WebkitMaskImage:"linear-gradient(to right, transparent, black 20%, black 80%, transparent)",opacity:0}}),"&.".concat(x.shadow," .").concat(x.content),{"&::after":{transition:"opacity 0.2s ease-in-out",transitionDelay:"0.2s",opacity:1}}),".".concat(x.input),{input:{padding:"4px 0 5px"}}),".".concat(x.inputWrap),{flex:1,display:"flex",alignItems:"center",minHeight:"var(--filter-bar-height, 40px)",gap:"8px",borderRadius:"6px",transition:"all linear 0.2s",padding:"0 8px",backgroundColor:r.palette.background.paper,border:"1px solid var(--color-divider, rgba(145 158 171 / 20%))","&:hover":{backgroundColor:"dark"===r.palette.mode?r.palette.grey[900]:d.grey[50],borderColor:"dark"===r.palette.mode?d.blue[300]:d.blue[200]},"&:focus-within":{backgroundColor:"dark"===r.palette.mode?r.palette.grey[900]:d.grey[50],borderColor:"dark"===r.palette.mode?d.blue[300]:d.blue[400],boxShadow:"dark"===r.palette.mode?"0 0 0 2px ".concat(d.blue[200]):"0 0 0 2px ".concat(d.blue[100])}}),".".concat(x.label),{flex:1,display:"flex",alignItems:"flex-end"}),".".concat(x.spacing),{flex:1,height:"var(--filter-bar-height, 40px)"})}));export{C as createFilterBar,C as default,x as filterBarClasses};
|
|
2
2
|
//# sourceMappingURL=create.filter-bar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.filter-bar.js","sources":["../../../src/data-view/create.filter-bar.tsx"],"sourcesContent":["import React, { Component, PropsWithChildren } from 'react'\r\nimport { Box, BoxProps, colors, styled } from '@mui/material'\r\nimport ClickAwayListener from '@mui/material/ClickAwayListener'\r\nimport { IPositionElement } from './types'\r\nimport { createFilterStore } from './filter-store'\r\nimport { FilterButton, FilterInput, FilterInputAdornment } from './ui.units'\r\nimport { defaultDataViewContext, IDataViewContext, mapDataViewContext } from './context'\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 helpText: 'FilterBar-helpText'\r\n}\r\n\r\nexport interface IFilterBarSlots extends IPositionElement<'left' | 'right'> {\r\n wrapProps?: BoxProps\r\n}\r\n\r\nexport interface IFilterBarProps extends PropsWithChildren {\r\n slots?: IFilterBarSlots\r\n}\r\n\r\nexport function createFilterBar<T>() {\r\n class FilterBar extends Component<IFilterBarProps> {\r\n dataViewContext: IDataViewContext<T> = defaultDataViewContext\r\n\r\n refInput: HTMLInputElement | null = null\r\n refBeforeInput: HTMLElement | null = null\r\n render() {\r\n return mapDataViewContext((context) => {\r\n const configs = context.filterBarConfigs\r\n const id = configs.id\r\n this.dataViewContext = context\r\n return (\r\n <ClickAwayListener onClickAway={() => context.onPopperPanelChange(null)}>\r\n <FilterBarStyled className={this.getRootClasses()} {...this.props.slots?.wrapProps}>\r\n <div className={filterBarClasses.content}>\r\n {this.props.slots?.left}\r\n <div className={filterBarClasses.inputWrap}>\r\n <FilterButton\r\n className={filterBarClasses.button}\r\n onClick={(e) => {\r\n context.onPopperPanelChange(e.currentTarget, 'filterButton')\r\n }}\r\n />\r\n <Box component='label' htmlFor={id} className={filterBarClasses.label}>\r\n <Box\r\n ref={(ref: HTMLElement) => {\r\n this.refBeforeInput = ref\r\n }}\r\n />\r\n <FilterInput\r\n ref={(ref: HTMLInputElement) => {\r\n this.refInput = ref\r\n }}\r\n id={id}\r\n className={filterBarClasses.input}\r\n placeholder={configs.placeholder}\r\n onChange={(e) => context.onKeywordChange(e.target.value)}\r\n value={context.keyword}\r\n onFocus={() => {\r\n if (!this.refBeforeInput) return\r\n context.onPopperPanelChange(this.refBeforeInput, 'input')\r\n }}\r\n onKeyDown={this.handleKeyDown}\r\n endAdornment={\r\n <FilterInputAdornment\r\n notes={configs.notes}\r\n keyword={context.keyword}\r\n onEnterSearch={this.handleEnterSearch}\r\n onClear={this.handleClear}\r\n />\r\n }\r\n />\r\n </Box>\r\n </div>\r\n {this.props.slots?.right}\r\n </div>\r\n {this.props.children}\r\n </FilterBarStyled>\r\n </ClickAwayListener>\r\n )\r\n })\r\n }\r\n\r\n getRootClasses = () => {\r\n const enableSticky = this.dataViewContext.filterBarConfigs.enableSticky ?? false\r\n const classes: string[] = [filterBarClasses.root]\r\n if (enableSticky) classes.push(filterBarClasses.sticky)\r\n if (this.dataViewContext.scrolled) classes.push(filterBarClasses.shadow)\r\n return classes.join(' ')\r\n }\r\n\r\n handleKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> = (event) => {\r\n const keyCode: number = event.keyCode\r\n if (keyCode === 13) {\r\n event.stopPropagation()\r\n event.preventDefault()\r\n this.handleEnterSearch()\r\n } else if (keyCode === 27) {\r\n event.stopPropagation()\r\n event.preventDefault()\r\n this.refInput?.blur()\r\n this.dataViewContext.onPanelClose()\r\n }\r\n }\r\n\r\n handleEnterSearch = () => {\r\n if (!this.dataViewContext.keyword) return\r\n const store = createFilterStore<T>(this.dataViewContext.filterState)\r\n store.addQuickSearch(this.dataViewContext.keyword, { reason: 'quickSearch', area: 'input' })\r\n const temp = store.build()\r\n if (!!temp.details?.isChanged) {\r\n this.refInput?.blur()\r\n this.dataViewContext.onFilterStateChange(temp)\r\n }\r\n }\r\n\r\n handleClear = () => {\r\n this.refInput?.blur()\r\n this.dataViewContext.onClear()\r\n }\r\n }\r\n return FilterBar\r\n}\r\nexport default createFilterBar\r\n\r\nconst FilterBarStyled = styled(Box)(({ theme }) => ({\r\n marginBottom: '4px',\r\n marginLeft: '-6px',\r\n marginRight: '-6px',\r\n [`&.${filterBarClasses.sticky}`]: {\r\n position: 'sticky',\r\n top: 'var(--height-header, 0)',\r\n zIndex: theme.zIndex.appBar - 1\r\n },\r\n [`.${filterBarClasses.content}`]: {\r\n display: 'flex',\r\n gap: '8px',\r\n alignItems: 'center',\r\n flexWrap: 'wrap',\r\n padding: theme.spacing(1.5, 0, 0.75),\r\n position: 'relative',\r\n backgroundColor: theme.palette.background.paper,\r\n '&::after': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n top: '100%',\r\n left: 0,\r\n width: '100%',\r\n height: '6px',\r\n pointerEvents: 'none',\r\n background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent)',\r\n maskImage: 'linear-gradient(to right, transparent, black 20%, black 80%, transparent)',\r\n WebkitMaskImage: 'linear-gradient(to right, transparent, black 20%, black 80%, transparent)',\r\n opacity: 0\r\n }\r\n },\r\n [`&.${filterBarClasses.shadow} .${filterBarClasses.content}`]: {\r\n '&::after': { transition: 'opacity 0.2s ease-in-out', transitionDelay: '0.2s', opacity: 1 }\r\n },\r\n [`.${filterBarClasses.input}`]: { input: { padding: '4px 0 5px' } },\r\n [`.${filterBarClasses.inputWrap}`]: {\r\n flex: 1,\r\n display: 'flex',\r\n alignItems: 'center',\r\n minHeight: 'var(--filter-bar-height, 40px)',\r\n gap: '8px',\r\n borderRadius: '6px',\r\n transition: 'all linear 0.2s',\r\n padding: '0 8px',\r\n backgroundColor: theme.palette.background.paper,\r\n border: '1px solid var(--color-divider, rgba(145 158 171 / 20%))',\r\n '&:hover': {\r\n backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : colors.grey[50],\r\n borderColor: theme.palette.mode === 'dark' ? colors.blue[300] : colors.blue[200]\r\n },\r\n '&:focus-within': {\r\n backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : colors.grey[50],\r\n borderColor: theme.palette.mode === 'dark' ? colors.blue[300] : colors.blue[400],\r\n boxShadow: theme.palette.mode === 'dark' ? `0 0 0 2px ${colors.blue[200]}` : `0 0 0 2px ${colors.blue[100]}`\r\n }\r\n },\r\n [`.${filterBarClasses.label}`]: { flex: 1, display: 'flex', alignItems: 'flex-end' },\r\n [`.${filterBarClasses.spacing}`]: { flex: 1, height: 'var(--filter-bar-height, 40px)' }\r\n}))\r\n"],"names":["filterBarClasses","root","content","input","inputWrap","label","button","spacing","sticky","shadow","createFilterBar","FilterBar","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","defaultDataViewContext","_this$dataViewContext","enableSticky","dataViewContext","filterBarConfigs","classes","push","scrolled","join","event","keyCode","stopPropagation","preventDefault","handleEnterSearch","_this$refInput","refInput","blur","onPanelClose","_temp$details","keyword","store","createFilterStore","filterState","addQuickSearch","reason","area","_this$refInput2","temp","build","details","isChanged","onFilterStateChange","_this$refInput3","onClear","_inherits","Component","_createClass","key","value","_this2","mapDataViewContext","context","_this2$props$slots","_this2$props$slots2","_this2$props$slots3","configs","id","_jsx","ClickAwayListener","onClickAway","onPopperPanelChange","children","_jsxs","FilterBarStyled","_objectSpread","className","getRootClasses","props","slots","wrapProps","left","FilterButton","onClick","e","currentTarget","Box","component","htmlFor","ref","refBeforeInput","FilterInput","placeholder","onChange","onKeywordChange","target","onFocus","onKeyDown","handleKeyDown","endAdornment","FilterInputAdornment","notes","onEnterSearch","handleClear","right","styled","_ref3","theme","marginBottom","marginLeft","marginRight","position","top","zIndex","appBar","display","gap","alignItems","flexWrap","padding","backgroundColor","palette","background","paper","width","height","pointerEvents","maskImage","WebkitMaskImage","opacity","transition","transitionDelay","flex","minHeight","borderRadius","border","mode","grey","colors","borderColor","blue","boxShadow"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.filter-bar.js","sources":["../../../src/data-view/create.filter-bar.tsx"],"sourcesContent":["import React, { Component, PropsWithChildren } from 'react'\r\nimport { Box, BoxProps, colors, styled } from '@mui/material'\r\nimport ClickAwayListener from '@mui/material/ClickAwayListener'\r\nimport { IPositionElement } from './types'\r\nimport { createFilterStore } from './filter-store'\r\nimport { FilterButton, FilterInput, FilterInputAdornment } from './ui.units'\r\nimport { defaultDataViewContext, IDataViewContext, mapDataViewContext } from './context'\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 helpText: 'FilterBar-helpText'\r\n}\r\n\r\nexport interface IFilterBarSlots extends IPositionElement<'left' | 'right'> {\r\n wrapProps?: BoxProps\r\n}\r\n\r\nexport interface IFilterBarProps extends PropsWithChildren {\r\n id?: string\r\n slots?: IFilterBarSlots\r\n}\r\n\r\nexport function createFilterBar<T>() {\r\n class FilterBar extends Component<IFilterBarProps> {\r\n dataViewContext: IDataViewContext<T> = defaultDataViewContext\r\n\r\n refInput: HTMLInputElement | null = null\r\n refBeforeInput: HTMLElement | null = null\r\n render() {\r\n return mapDataViewContext((context) => {\r\n const configs = context.filterBarConfigs\r\n const id = configs.id\r\n this.dataViewContext = context\r\n return (\r\n <ClickAwayListener onClickAway={() => context.onPopperPanelChange(null)}>\r\n <FilterBarStyled id={this.props.id} className={this.getRootClasses()} {...this.props.slots?.wrapProps}>\r\n <div className={filterBarClasses.content}>\r\n {this.props.slots?.left}\r\n <div className={filterBarClasses.inputWrap}>\r\n <FilterButton\r\n className={filterBarClasses.button}\r\n onClick={(e) => {\r\n context.onPopperPanelChange(e.currentTarget, 'filterButton')\r\n }}\r\n />\r\n <Box component='label' htmlFor={id} className={filterBarClasses.label}>\r\n <Box\r\n ref={(ref: HTMLElement) => {\r\n this.refBeforeInput = ref\r\n }}\r\n />\r\n <FilterInput\r\n ref={(ref: HTMLInputElement) => {\r\n this.refInput = ref\r\n }}\r\n id={id}\r\n className={filterBarClasses.input}\r\n placeholder={configs.placeholder}\r\n onChange={(e) => context.onKeywordChange(e.target.value)}\r\n value={context.keyword}\r\n onFocus={() => {\r\n if (!this.refBeforeInput) return\r\n context.onPopperPanelChange(this.refBeforeInput, 'input')\r\n }}\r\n onKeyDown={this.handleKeyDown}\r\n endAdornment={\r\n <FilterInputAdornment\r\n notes={configs.notes}\r\n keyword={context.keyword}\r\n onEnterSearch={this.handleEnterSearch}\r\n onClear={this.handleClear}\r\n />\r\n }\r\n />\r\n </Box>\r\n </div>\r\n {this.props.slots?.right}\r\n </div>\r\n {this.props.children}\r\n </FilterBarStyled>\r\n </ClickAwayListener>\r\n )\r\n })\r\n }\r\n\r\n getRootClasses = () => {\r\n const enableSticky = this.dataViewContext.filterBarConfigs.enableSticky ?? false\r\n const classes: string[] = [filterBarClasses.root]\r\n if (enableSticky) classes.push(filterBarClasses.sticky)\r\n if (this.dataViewContext.scrolled) classes.push(filterBarClasses.shadow)\r\n return classes.join(' ')\r\n }\r\n\r\n handleKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> = (event) => {\r\n const keyCode: number = event.keyCode\r\n if (keyCode === 13) {\r\n event.stopPropagation()\r\n event.preventDefault()\r\n this.handleEnterSearch()\r\n } else if (keyCode === 27) {\r\n event.stopPropagation()\r\n event.preventDefault()\r\n this.refInput?.blur()\r\n this.dataViewContext.onPanelClose()\r\n }\r\n }\r\n\r\n handleEnterSearch = () => {\r\n if (!this.dataViewContext.keyword) return\r\n const store = createFilterStore<T>(this.dataViewContext.filterState)\r\n store.addQuickSearch(this.dataViewContext.keyword, { reason: 'quickSearch', area: 'input' })\r\n const temp = store.build()\r\n if (!!temp.details?.isChanged) {\r\n this.refInput?.blur()\r\n this.dataViewContext.onFilterStateChange(temp)\r\n }\r\n }\r\n\r\n handleClear = () => {\r\n this.refInput?.blur()\r\n this.dataViewContext.onClear()\r\n }\r\n }\r\n return FilterBar\r\n}\r\nexport default createFilterBar\r\n\r\nconst FilterBarStyled = styled(Box)(({ theme }) => ({\r\n marginBottom: '4px',\r\n marginLeft: '-6px',\r\n marginRight: '-6px',\r\n [`&.${filterBarClasses.sticky}`]: {\r\n position: 'sticky',\r\n top: 'var(--height-header, 0)',\r\n zIndex: theme.zIndex.appBar - 1\r\n },\r\n [`.${filterBarClasses.content}`]: {\r\n display: 'flex',\r\n gap: '8px',\r\n alignItems: 'center',\r\n flexWrap: 'wrap',\r\n padding: theme.spacing(1.5, 0, 0.75),\r\n position: 'relative',\r\n backgroundColor: theme.palette.background.paper,\r\n '&::after': {\r\n content: '\"\"',\r\n position: 'absolute',\r\n top: '100%',\r\n left: 0,\r\n width: '100%',\r\n height: '6px',\r\n pointerEvents: 'none',\r\n background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent)',\r\n maskImage: 'linear-gradient(to right, transparent, black 20%, black 80%, transparent)',\r\n WebkitMaskImage: 'linear-gradient(to right, transparent, black 20%, black 80%, transparent)',\r\n opacity: 0\r\n }\r\n },\r\n [`&.${filterBarClasses.shadow} .${filterBarClasses.content}`]: {\r\n '&::after': { transition: 'opacity 0.2s ease-in-out', transitionDelay: '0.2s', opacity: 1 }\r\n },\r\n [`.${filterBarClasses.input}`]: { input: { padding: '4px 0 5px' } },\r\n [`.${filterBarClasses.inputWrap}`]: {\r\n flex: 1,\r\n display: 'flex',\r\n alignItems: 'center',\r\n minHeight: 'var(--filter-bar-height, 40px)',\r\n gap: '8px',\r\n borderRadius: '6px',\r\n transition: 'all linear 0.2s',\r\n padding: '0 8px',\r\n backgroundColor: theme.palette.background.paper,\r\n border: '1px solid var(--color-divider, rgba(145 158 171 / 20%))',\r\n '&:hover': {\r\n backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : colors.grey[50],\r\n borderColor: theme.palette.mode === 'dark' ? colors.blue[300] : colors.blue[200]\r\n },\r\n '&:focus-within': {\r\n backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : colors.grey[50],\r\n borderColor: theme.palette.mode === 'dark' ? colors.blue[300] : colors.blue[400],\r\n boxShadow: theme.palette.mode === 'dark' ? `0 0 0 2px ${colors.blue[200]}` : `0 0 0 2px ${colors.blue[100]}`\r\n }\r\n },\r\n [`.${filterBarClasses.label}`]: { flex: 1, display: 'flex', alignItems: 'flex-end' },\r\n [`.${filterBarClasses.spacing}`]: { flex: 1, height: 'var(--filter-bar-height, 40px)' }\r\n}))\r\n"],"names":["filterBarClasses","root","content","input","inputWrap","label","button","spacing","sticky","shadow","createFilterBar","FilterBar","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","defaultDataViewContext","_this$dataViewContext","enableSticky","dataViewContext","filterBarConfigs","classes","push","scrolled","join","event","keyCode","stopPropagation","preventDefault","handleEnterSearch","_this$refInput","refInput","blur","onPanelClose","_temp$details","keyword","store","createFilterStore","filterState","addQuickSearch","reason","area","_this$refInput2","temp","build","details","isChanged","onFilterStateChange","_this$refInput3","onClear","_inherits","Component","_createClass","key","value","_this2","mapDataViewContext","context","_this2$props$slots","_this2$props$slots2","_this2$props$slots3","configs","id","_jsx","ClickAwayListener","onClickAway","onPopperPanelChange","_jsxs","FilterBarStyled","_objectSpread","props","className","getRootClasses","slots","wrapProps","children","left","FilterButton","onClick","e","currentTarget","Box","component","htmlFor","ref","refBeforeInput","FilterInput","placeholder","onChange","onKeywordChange","target","onFocus","onKeyDown","handleKeyDown","endAdornment","FilterInputAdornment","notes","onEnterSearch","handleClear","right","styled","_ref3","theme","marginBottom","marginLeft","marginRight","position","top","zIndex","appBar","display","gap","alignItems","flexWrap","padding","backgroundColor","palette","background","paper","width","height","pointerEvents","maskImage","WebkitMaskImage","opacity","transition","transitionDelay","flex","minHeight","borderRadius","border","mode","grey","colors","borderColor","blue","boxShadow"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{slicedToArray as
|
|
1
|
+
import{slicedToArray as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,Fragment as r}from"react/jsx-runtime";import{useEffect as o,useState as t}from"react";var i=function(n){var r=n||{},i=r.elementId,l=r.threshold,d=t(!1),s=e(d,2),u=s[0],c=s[1],a=!!i,f="number"==typeof l?l:0;return o((function(){if("undefined"!=typeof window){var e=function(){if(a){var e=document.getElementById(i);if(!e)return void c(!1);var n=e.getBoundingClientRect().top+window.scrollY,r=window.scrollY>=n-f;c((function(e){return e===r?e:r}))}else{var o=window.scrollY>0;c((function(e){return e===o?e:o}))}};return e(),window.addEventListener("scroll",e),window.addEventListener("resize",e),function(){window.removeEventListener("scroll",e),window.removeEventListener("resize",e)}}}),[i,f,a]),{isScrolled:u}},l=function(e){var t=i({elementId:e.elementId,threshold:e.threshold}).isScrolled;return o((function(){e.onChange({isScrolled:t})}),[t,e.onChange]),n(r,{})};export{l as default,i as useScrollTracking};
|
|
2
2
|
//# sourceMappingURL=scroll-tracking.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-tracking.js","sources":["../../../src/data-view/scroll-tracking.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps*/\r\nimport { FC, useEffect, useState } from 'react'\r\n\r\nexport interface IScrollTrackingData {\r\n isScrolled: boolean\r\n}\r\n\r\nexport const useScrollTracking = (): IScrollTrackingData => {\r\n const [isScrolled, setIsScrolled] = useState<boolean>(false)\r\n\r\n useEffect(() => {\r\n const
|
|
1
|
+
{"version":3,"file":"scroll-tracking.js","sources":["../../../src/data-view/scroll-tracking.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps*/\r\nimport { FC, useEffect, useState } from 'react'\r\n\r\nexport interface IScrollTrackingOptions {\r\n elementId?: string\r\n threshold?: number\r\n}\r\n\r\nexport interface IScrollTrackingData {\r\n isScrolled: boolean\r\n}\r\n\r\nexport const useScrollTracking = (options?: IScrollTrackingOptions): IScrollTrackingData => {\r\n const { elementId, threshold } = options || {}\r\n const [isScrolled, setIsScrolled] = useState<boolean>(false)\r\n\r\n // enable element mode only when elementId provided (threshold optional)\r\n const useElementMode = !!elementId\r\n const thresholdNumber = typeof threshold === 'number' ? threshold : 0\r\n\r\n useEffect(() => {\r\n if (typeof window === 'undefined') return\r\n\r\n const check = () => {\r\n if (useElementMode) {\r\n const el = document.getElementById(elementId!)\r\n if (!el) {\r\n setIsScrolled(false)\r\n return\r\n }\r\n // compute element top relative to the whole document (robust when other elements exist above)\r\n const rect = el.getBoundingClientRect()\r\n const elementTopDocument = rect.top + window.scrollY\r\n // active only when the page scroll has reached (elementTop - threshold)\r\n const nearTop = window.scrollY >= elementTopDocument - thresholdNumber\r\n setIsScrolled((prev) => (prev === nearTop ? prev : nearTop))\r\n } else {\r\n // legacy/simple mode: active when page scrolled at all\r\n const scrolled = window.scrollY > 0\r\n setIsScrolled((prev) => (prev === scrolled ? prev : scrolled))\r\n }\r\n }\r\n\r\n // initial check\r\n check()\r\n\r\n window.addEventListener('scroll', check)\r\n window.addEventListener('resize', check)\r\n return () => {\r\n window.removeEventListener('scroll', check)\r\n window.removeEventListener('resize', check)\r\n }\r\n }, [elementId, thresholdNumber, useElementMode])\r\n\r\n return { isScrolled }\r\n}\r\n\r\nexport interface IScrollTrackingProps extends IScrollTrackingOptions {\r\n onChange: (data: IScrollTrackingData) => void\r\n}\r\n\r\nconst ScrollTracking: FC<IScrollTrackingProps> = (props) => {\r\n const { isScrolled } = useScrollTracking({\r\n elementId: props.elementId,\r\n threshold: props.threshold\r\n })\r\n\r\n useEffect(() => {\r\n props.onChange({ isScrolled })\r\n }, [isScrolled, props.onChange])\r\n\r\n return <></>\r\n}\r\n\r\nexport default ScrollTracking\r\n"],"names":["useScrollTracking","options","_ref","elementId","threshold","_useState","useState","_useState2","_slicedToArray","isScrolled","setIsScrolled","useElementMode","thresholdNumber","useEffect","window","check","el","document","getElementById","elementTopDocument","getBoundingClientRect","top","scrollY","nearTop","prev","scrolled","addEventListener","removeEventListener","ScrollTracking","props","onChange","_jsx"],"mappings":"sLAYaA,EAAoB,SAACC,GAChC,IAAAC,EAAiCD,GAAW,CAAE,EAAtCE,EAASD,EAATC,UAAWC,EAASF,EAATE,UACnBC,EAAoCC,GAAkB,GAAMC,EAAAC,EAAAH,EAAA,GAArDI,EAAUF,EAAA,GAAEG,EAAaH,EAAA,GAG1BI,IAAmBR,EACnBS,EAAuC,iBAAdR,EAAyBA,EAAY,EAoCpE,OAlCAS,GAAU,WACR,GAAsB,oBAAXC,OAAX,CAEA,IAAMC,EAAQ,WACZ,GAAIJ,EAAgB,CAClB,IAAMK,EAAKC,SAASC,eAAef,GACnC,IAAKa,EAEH,YADAN,GAAc,GAIhB,IACMS,EADOH,EAAGI,wBACgBC,IAAMP,OAAOQ,QAEvCC,EAAUT,OAAOQ,SAAWH,EAAqBP,EACvDF,GAAc,SAACc,GAAI,OAAMA,IAASD,EAAUC,EAAOD,CAAO,GAC3D,KAAM,CAEL,IAAME,EAAWX,OAAOQ,QAAU,EAClCZ,GAAc,SAACc,GAAI,OAAMA,IAASC,EAAWD,EAAOC,CAAQ,GAC7D,CACF,EAOD,OAJAV,IAEAD,OAAOY,iBAAiB,SAAUX,GAClCD,OAAOY,iBAAiB,SAAUX,GAC3B,WACLD,OAAOa,oBAAoB,SAAUZ,GACrCD,OAAOa,oBAAoB,SAAUZ,EACtC,CA9BkC,CA+BpC,GAAE,CAACZ,EAAWS,EAAiBD,IAEzB,CAAEF,WAAAA,EACX,EAMMmB,EAA2C,SAACC,GAChD,IAAQpB,EAAeT,EAAkB,CACvCG,UAAW0B,EAAM1B,UACjBC,UAAWyB,EAAMzB,YAFXK,WASR,OAJAI,GAAU,WACRgB,EAAMC,SAAS,CAAErB,WAAAA,GAClB,GAAE,CAACA,EAAYoB,EAAMC,WAEfC,OACT"}
|
|
@@ -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: 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","red"],"mappings":"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"}
|
|
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': { fill: '#3D4751', ...theme.applyStyles('light', { fill: '#AEB8C2' }) },\r\n '& .no-rows-secondary': { fill: '#1D2126', ...theme.applyStyles('light', { fill: '#E8EAED' }) }\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","red"],"mappings":"mcAQaA,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,IACRC,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,CAAIoC,KAAM,WAAcpD,EAAMqD,YAAY,QAAS,CAAED,KAAM,aAC/E,uBAAsBpC,EAAA,CAAIoC,KAAM,WAAcpD,EAAMqD,YAAY,QAAS,CAAED,KAAM,aAClF,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,QAiBiB1C,EAAOqB,EAAPrB,CAAY,CAC3CkD,UAAW,EACXC,QAAS,EACTY,UAAW,SACXxB,OAAQ,aACR1B,YAAaN,EAAO4D,IAAI,KACxBzB,aAAc"}
|
|
@@ -3,6 +3,7 @@ import { BoxProps } from '@mui/material';
|
|
|
3
3
|
import { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types';
|
|
4
4
|
import { IFilterBarConfigs, IFilterState, IPositionElement, IViewData } from './types';
|
|
5
5
|
import { IFilterBarSlots } from './create.filter-bar';
|
|
6
|
+
import { IScrollTrackingOptions } from './scroll-tracking';
|
|
6
7
|
import { IPaginationBarConfigs } from './create.pagination-bar';
|
|
7
8
|
export declare const filterBarClasses: {
|
|
8
9
|
root: string;
|
|
@@ -24,6 +25,7 @@ export interface IDataViewSlots<T extends IViewModeValidModel> {
|
|
|
24
25
|
filterBarConfigs?: IFilterBarConfigs<T>;
|
|
25
26
|
viewModeConfigs?: IViewModeConfigs<T>;
|
|
26
27
|
paginationBarConfigs?: IPaginationBarConfigs;
|
|
28
|
+
scrollTracking?: IScrollTrackingOptions;
|
|
27
29
|
footerProps?: {
|
|
28
30
|
wrapProps?: BoxProps;
|
|
29
31
|
enablePagination?: boolean;
|
|
@@ -44,6 +46,7 @@ export interface IDataViewConfigs<T extends IViewModeValidModel> {
|
|
|
44
46
|
filterBar?: IFilterBarConfigs<T>;
|
|
45
47
|
viewMode?: IViewModeConfigs<T>;
|
|
46
48
|
paginationBar?: IPaginationBarConfigs;
|
|
49
|
+
scrollTracking?: IScrollTrackingOptions;
|
|
47
50
|
}
|
|
48
51
|
declare function createDataView<T extends IViewModeValidModel>(configs: IDataViewConfigs<T>): ComponentType<IDataViewProps<T>>;
|
|
49
52
|
export default createDataView;
|
|
@@ -19,6 +19,7 @@ export interface IFilterBarSlots extends IPositionElement<'left' | 'right'> {
|
|
|
19
19
|
wrapProps?: BoxProps;
|
|
20
20
|
}
|
|
21
21
|
export interface IFilterBarProps extends PropsWithChildren {
|
|
22
|
+
id?: string;
|
|
22
23
|
slots?: IFilterBarSlots;
|
|
23
24
|
}
|
|
24
25
|
export declare function createFilterBar<T>(): {
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
+
export interface IScrollTrackingOptions {
|
|
3
|
+
elementId?: string;
|
|
4
|
+
threshold?: number;
|
|
5
|
+
}
|
|
2
6
|
export interface IScrollTrackingData {
|
|
3
7
|
isScrolled: boolean;
|
|
4
8
|
}
|
|
5
|
-
export declare const useScrollTracking: () => IScrollTrackingData;
|
|
6
|
-
export interface IScrollTrackingProps {
|
|
9
|
+
export declare const useScrollTracking: (options?: IScrollTrackingOptions) => IScrollTrackingData;
|
|
10
|
+
export interface IScrollTrackingProps extends IScrollTrackingOptions {
|
|
7
11
|
onChange: (data: IScrollTrackingData) => void;
|
|
8
12
|
}
|
|
9
13
|
declare const ScrollTracking: FC<IScrollTrackingProps>;
|