dinocollab-core 2.1.21 → 2.1.23
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/form/index.js +1 -1
- 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/src/form/decorator.form.js +1 -1
- package/dist/src/form/decorator.form.js.map +1 -1
- package/dist/src/form/decorator.js +1 -1
- package/dist/src/form/decorator.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/dist/types/form/decorator.d.ts +14 -0
- package/dist/types/form/decorator.form.d.ts +5 -1
- package/dist/types/form/dino-form.d.ts +2 -2
- package/package.json +1 -1
package/dist/form/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{default as FormValidator,SingleRuleValidate,createFormValidator,mapRuleOptions}from"../src/form/validator.js";export{default as DinoForm}from"../src/form/dino-form.js";export{convertFormDataToJson,getErrorMessage,validateCsvModel}from"../src/form/helpers.js";export{formField,formPreSubmit,formValidate,getFormFields,getFormPreSubmit,getFormValidators,registerForm}from"../src/form/decorator.js";export{DecoratorField,DecoratorForm,createDecoratorForm}from"../src/form/decorator.form.js";
|
|
1
|
+
export{default as FormValidator,SingleRuleValidate,createFormValidator,mapRuleOptions}from"../src/form/validator.js";export{default as DinoForm}from"../src/form/dino-form.js";export{convertFormDataToJson,getErrorMessage,validateCsvModel}from"../src/form/helpers.js";export{formField,formPreSubmit,formValidate,getFormFields,getFormPreSubmit,getFormValidators,isFormRegistered,registerForm}from"../src/form/decorator.js";export{DecoratorField,DecoratorForm,createDecoratorForm}from"../src/form/decorator.form.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -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":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectSpread2 as r,asyncToGenerator as e,objectWithoutProperties as
|
|
1
|
+
import{objectSpread2 as r,asyncToGenerator as e,objectWithoutProperties as n,regenerator as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,jsx as a}from"react/jsx-runtime";import{Box as i,Typography as s,Grid as l,Button as u}from"@mui/material";import{getErrorMessage as d}from"./helpers.js";import{getFormFields as c,getFormValidators as m,getFormPreSubmit as f,isFormRegistered as p}from"./decorator.js";import v from"./validator.js";import b from"./create.input.js";import g from"./create.form-base.js";var h=["type","renderInput"],y=g({}),S=b({}),x=function(e){var o,i,s=e.type,l=e.renderInput,u=n(e,h),c=(null===(o=u.name)||void 0===o?void 0:o.toString())||"",m=(null===(i=u.data)||void 0===i?void 0:i[c])||u.defaultValue;return l?a(l,r({},u)):y.mapContext((function(e){var n=e.messageErrors,o=e.onBlur,i=d(e.messageErrors,u.name);switch(s){case String:return a(S,r(r({},u),{},{messageErrors:n,onBlur:o}));case Number:return a(S,r({slots:{textFieldProps:{type:"number"}},messageErrors:n,onBlur:o},u));case Boolean:return t("div",{children:[t("label",{children:[u.label||c,": "]}),a("input",{name:c,type:"checkbox",defaultChecked:m}),a("span",{style:{color:"red"},children:i.error?i.message:""})]});default:return t("div",{children:["Unsupported field type for ",c]})}}))},j=function(n){var d,b=c(n.configClass),g=m(n.configClass),h=f(n.configClass);if(!p(n.configClass)){var S,j=(null===(S=n.configClass)||void 0===S?void 0:S.name)||"Unknown";return t(i,{sx:{border:"1px dashed #ccc",padding:12,borderRadius:4,color:"#333",background:"#fafafa"},children:[a(s,{variant:"subtitle1",sx:{fontWeight:600,marginBottom:6},children:"Form configuration not registered"}),t(s,{variant:"body1",children:['Configuration for "',j,'" was not found. Did you forget to add ',a("code",{children:"@registerForm"})," to the class?"]})]})}var C,B,E=function(){var r=e(o().m((function r(e){var t,a;return o().w((function(r){for(;;)switch(r.n){case 0:if(t=e,r.p=1,null==h||!h.handler){r.n=3;break}return r.n=2,h.handler(e,n.data);case 2:null==(t=r.v)&&(t=e);case 3:if(!n.onSubmit){r.n=4;break}return r.n=4,n.onSubmit(t);case 4:r.n=6;break;case 5:throw r.p=5,a=r.v,n.onError&&n.onError(a),a;case 6:return r.a(2)}}),r,null,[[1,5]])})));return function(e){return r.apply(this,arguments)}}();return t(y.Form,{onSubmit:E,validate:new v(g),onError:n.onSubmitError,children:[a(l,{container:!0,spacing:2,children:b.map((function(e){return a(l,r(r({item:!0,xs:12},e.size),{},{children:a(x,r({data:n.data},e))}),e.name.toString())}))}),!1===(null===(C=n.slots)||void 0===C?void 0:C.isFooter)?null:null!==(B=n.slots)&&void 0!==B&&B.renderSubmitButton?n.slots.renderSubmitButton():a(u,{variant:"contained",color:"primary",type:"submit",sx:{mt:2},children:"Submit"}),null===(d=n.slots)||void 0===d?void 0:d.bottom]})},C=function(e,n){return function(o){return a(j,r(r({configClass:e},n),o))}};export{x as DecoratorField,j as DecoratorForm,C as createDecoratorForm,j as default};
|
|
2
2
|
//# sourceMappingURL=decorator.form.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"decorator.form.js","sources":["../../../src/form/decorator.form.tsx"],"sourcesContent":["import { ComponentType, FC } from 'react'\r\nimport { Button, Grid } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { getFormFields, getFormPreSubmit, getFormValidators } from './decorator'\r\nimport FormValidator from './validator'\r\nimport createInput from './create.input'\r\nimport createFormBase from './create.form-base'\r\n\r\nconst FormBase = createFormBase<any>({})\r\nconst InputInstance = createInput<any>({})\r\n\r\nexport interface IDecoratorFieldProps<T = any> extends IFormInputBase<T> {\r\n type?: any\r\n renderInput?: ComponentType<IFormInputBase<T>>\r\n}\r\n\r\nexport const DecoratorField: FC<IDecoratorFieldProps> = ({ type: inputType, renderInput, ...props }) => {\r\n const name = props.name?.toString() || ''\r\n const defaultValue = props.data?.[name] || props.defaultValue\r\n if (renderInput) {\r\n const InputComp = renderInput\r\n return <InputComp {...props} />\r\n }\r\n return FormBase.mapContext((context) => {\r\n const { messageErrors, onBlur } = context\r\n const err = getErrorMessage(context.messageErrors, props.name as any)\r\n switch (inputType) {\r\n case String:\r\n return <InputInstance {...props} messageErrors={messageErrors} onBlur={onBlur} />\r\n case Number:\r\n return <InputInstance slots={{ textFieldProps: { type: 'number' } }} messageErrors={messageErrors} onBlur={onBlur} {...props} />\r\n case Boolean:\r\n return (\r\n <div>\r\n <label>{props.label || name}: </label>\r\n <input name={name} type='checkbox' defaultChecked={defaultValue} />\r\n <span style={{ color: 'red' }}>{err.error ? err.message : ''}</span>\r\n </div>\r\n )\r\n default:\r\n return <div>Unsupported field type for {name}</div>\r\n }\r\n })\r\n}\r\n\r\nexport interface IDecoratorFormSlots {\r\n bottom?: React.ReactNode\r\n renderSubmitButton?: () => React.ReactNode\r\n}\r\n\r\nexport interface IDecoratorFormProps {\r\n configClass: any\r\n data?: any\r\n onSubmit?: (data: any) => Promise<void>\r\n slots?: IDecoratorFormSlots\r\n}\r\n\r\nexport const DecoratorForm: FC<IDecoratorFormProps> = (props) => {\r\n const fields = getFormFields(props.configClass)\r\n const validators = getFormValidators(props.configClass)\r\n const preSubmitConfig = getFormPreSubmit(props.configClass)\r\n\r\n const handleSubmit = async (data: any) => {\r\n let processedData = data\r\n\r\n
|
|
1
|
+
{"version":3,"file":"decorator.form.js","sources":["../../../src/form/decorator.form.tsx"],"sourcesContent":["import { ComponentType, FC } from 'react'\r\nimport { Box, Button, Grid, Typography } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { getFormFields, getFormPreSubmit, getFormValidators, isFormRegistered } from './decorator'\r\nimport FormValidator, { IPartialError } from './validator'\r\nimport createInput from './create.input'\r\nimport createFormBase from './create.form-base'\r\n\r\nconst FormBase = createFormBase<any>({})\r\nconst InputInstance = createInput<any>({})\r\n\r\nexport interface IDecoratorFieldProps<T = any> extends IFormInputBase<T> {\r\n type?: any\r\n renderInput?: ComponentType<IFormInputBase<T>>\r\n}\r\n\r\nexport const DecoratorField: FC<IDecoratorFieldProps> = ({ type: inputType, renderInput, ...props }) => {\r\n const name = props.name?.toString() || ''\r\n const defaultValue = props.data?.[name] || props.defaultValue\r\n if (renderInput) {\r\n const InputComp = renderInput\r\n return <InputComp {...props} />\r\n }\r\n return FormBase.mapContext((context) => {\r\n const { messageErrors, onBlur } = context\r\n const err = getErrorMessage(context.messageErrors, props.name as any)\r\n switch (inputType) {\r\n case String:\r\n return <InputInstance {...props} messageErrors={messageErrors} onBlur={onBlur} />\r\n case Number:\r\n return <InputInstance slots={{ textFieldProps: { type: 'number' } }} messageErrors={messageErrors} onBlur={onBlur} {...props} />\r\n case Boolean:\r\n return (\r\n <div>\r\n <label>{props.label || name}: </label>\r\n <input name={name} type='checkbox' defaultChecked={defaultValue} />\r\n <span style={{ color: 'red' }}>{err.error ? err.message : ''}</span>\r\n </div>\r\n )\r\n default:\r\n return <div>Unsupported field type for {name}</div>\r\n }\r\n })\r\n}\r\n\r\nexport interface IDecoratorFormSlots {\r\n bottom?: React.ReactNode\r\n isFooter?: React.ReactNode | boolean\r\n renderSubmitButton?: () => React.ReactNode\r\n}\r\n\r\nexport interface IDecoratorFormProps<T = any> {\r\n configClass: any\r\n data?: any\r\n onSubmit?: (data: any) => Promise<void>\r\n onError?: (error: any) => void\r\n onSubmitError?: (error: IPartialError<T>) => void\r\n slots?: IDecoratorFormSlots\r\n}\r\n\r\nexport const DecoratorForm: FC<IDecoratorFormProps> = (props) => {\r\n const fields = getFormFields(props.configClass)\r\n const validators = getFormValidators(props.configClass)\r\n const preSubmitConfig = getFormPreSubmit(props.configClass)\r\n\r\n // If the provided configClass isn't registered via @registerForm,\r\n // show a simple, friendly error UI instead of throwing.\r\n if (!isFormRegistered(props.configClass)) {\r\n const name = props.configClass?.name || 'Unknown'\r\n return (\r\n <Box sx={{ border: '1px dashed #ccc', padding: 12, borderRadius: 4, color: '#333', background: '#fafafa' }}>\r\n <Typography variant='subtitle1' sx={{ fontWeight: 600, marginBottom: 6 }}>\r\n Form configuration not registered\r\n </Typography>\r\n <Typography variant='body1'>\r\n Configuration for \"{name}\" was not found. Did you forget to add <code>@registerForm</code> to the class?\r\n </Typography>\r\n </Box>\r\n )\r\n }\r\n\r\n const handleSubmit = async (data: any) => {\r\n let processedData = data\r\n try {\r\n // Execute presubmit handler if exists\r\n if (preSubmitConfig?.handler) {\r\n processedData = await preSubmitConfig.handler(data, props.data)\r\n // If handler returns null/undefined, use original data\r\n if (processedData === null || processedData === undefined) {\r\n processedData = data\r\n }\r\n }\r\n\r\n // Call the original onSubmit with processed data\r\n if (props.onSubmit) {\r\n await props.onSubmit(processedData)\r\n }\r\n } catch (error) {\r\n if (props.onError) {\r\n props.onError(error)\r\n }\r\n throw error\r\n }\r\n }\r\n\r\n const renderFooter = () => {\r\n if (props.slots?.isFooter === false) return null\r\n if (props.slots?.renderSubmitButton) {\r\n return props.slots.renderSubmitButton()\r\n }\r\n return (\r\n <Button variant='contained' color='primary' type='submit' sx={{ mt: 2 }}>\r\n Submit\r\n </Button>\r\n )\r\n }\r\n\r\n return (\r\n <FormBase.Form onSubmit={handleSubmit} validate={new FormValidator(validators)} onError={props.onSubmitError}>\r\n <Grid container spacing={2}>\r\n {fields.map((field) => (\r\n <Grid item key={field.name.toString()} xs={12} {...field.size}>\r\n <DecoratorField data={props.data} {...field} />\r\n </Grid>\r\n ))}\r\n </Grid>\r\n {renderFooter()}\r\n {props.slots?.bottom}\r\n </FormBase.Form>\r\n )\r\n}\r\nexport default DecoratorForm\r\n\r\nexport const createDecoratorForm = function <T>(\r\n configClass: any,\r\n params?: Partial<Omit<IDecoratorFormProps, 'configClass'>>\r\n): ComponentType<Omit<IDecoratorFormProps, 'configClass'>> {\r\n const DecoratorFormComp: FC<Omit<IDecoratorFormProps, 'configClass'>> = (props) => {\r\n return <DecoratorForm configClass={configClass} {...params} {...props} />\r\n }\r\n return DecoratorFormComp\r\n}\r\n"],"names":["FormBase","createFormBase","InputInstance","createInput","DecoratorField","_ref","_props$name","_props$data","inputType","type","renderInput","props","_objectWithoutProperties","_excluded","name","toString","defaultValue","data","_jsx","_objectSpread","mapContext","context","messageErrors","onBlur","err","getErrorMessage","String","Number","slots","textFieldProps","Boolean","_jsxs","children","label","defaultChecked","style","color","error","message","DecoratorForm","_props$slots3","fields","getFormFields","configClass","validators","getFormValidators","preSubmitConfig","getFormPreSubmit","isFormRegistered","_props$configClass","Box","sx","border","padding","borderRadius","background","Typography","variant","fontWeight","marginBottom","_props$slots","_props$slots2","handleSubmit","_ref2","_asyncToGenerator","_regenerator","m","_callee","processedData","_t","w","_context","n","p","handler","v","onSubmit","onError","a","_x","apply","this","arguments","Form","validate","FormValidator","onSubmitError","Grid","container","spacing","map","field","item","xs","size","isFooter","renderSubmitButton","Button","mt","bottom","createDecoratorForm","params"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{toConsumableArray as e,objectSpread2 as t,inherits as
|
|
1
|
+
import{toConsumableArray as e,objectSpread2 as t,inherits as r,createClass as a,classCallCheck as n,callSuper as o,defineProperty as u}from"../../_virtual/_rollupPluginBabelHelpers.js";import"../../_virtual/Reflect.js";var c=new Map;function l(e){return function(t){var l=e||t.name;c.set(l,t);var f=function(e){function t(){var e;n(this,t);for(var r=arguments.length,a=new Array(r),c=0;c<r;c++)a[c]=arguments[c];return e=o(this,t,[].concat(a)),u(e,"__class",l),e.__class=l,e}return r(t,e),a(t)}(t);return Object.defineProperty(f,"name",{value:t.name}),Object.defineProperty(f,"__class",{value:l}),f}}function f(e){if(!e)return!1;var t="function"==typeof e?e:null==e?void 0:e.constructor;if(!t)return!1;var r=t.__class||t.name;return!!r&&c.has(r)}function s(e){return function(t){return Reflect.defineMetadata("form:presubmit",{handler:e},t),t}}function i(e){return Reflect.getMetadata("form:presubmit",e)}function d(r){return function(a,n){var o=Reflect.getMetadata("design:type",a,n),u=r.type||o,c=Reflect.getMetadata("form:fields",a.constructor)||[],l=e(c);l.push(t({name:n,type:u,label:r.label||n},r)),Reflect.defineMetadata("form:fields",l,a.constructor)}}var m=function(e){return Reflect.getMetadata("form:fields",e)||[]};function p(r){return function(a,n){var o=Reflect.getMetadata("form:validators",a.constructor)||[],u=e(o);u.push(t({name:n},r)),Reflect.defineMetadata("form:validators",u,a.constructor)}}function v(e){return(Reflect.getMetadata("form:validators",e)||[]).reduce((function(e,t){return e[t.name]={Rules:t.Rules,label:t.label},e}),{})}export{d as formField,s as formPreSubmit,p as formValidate,m as getFormFields,i as getFormPreSubmit,v as getFormValidators,f as isFormRegistered,l as registerForm};
|
|
2
2
|
//# sourceMappingURL=decorator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"decorator.js","sources":["../../../src/form/decorator.ts"],"sourcesContent":["import 'reflect-metadata'\r\nimport { ComponentType } from 'react'\r\nimport { IFormInputBase } from './types'\r\nimport { IConfigValue, IFormValidatorConfig } from './validator'\r\n\r\nconst ClassRegistry = new Map<string, any>()\r\n\r\nexport function registerForm(name?: string) {\r\n return function <T extends { new (...args: any[]): {} }>(constructor: T) {\r\n const key = name || constructor.name\r\n ClassRegistry.set(key, constructor)\r\n class RegisteredClass extends constructor {\r\n __class = key\r\n constructor(...args: any[]) {\r\n super(...args)\r\n this.__class = key\r\n }\r\n }\r\n Object.defineProperty(RegisteredClass, 'name', { value: constructor.name })\r\n Object.defineProperty(RegisteredClass, '__class', { value: key })\r\n return RegisteredClass\r\n }\r\n}\r\n\r\nexport interface IPreSubmitMetadata<T = any> {\r\n handler: (data: T, oldData: T) => Promise<any> | any\r\n}\r\n\r\nexport function formPreSubmit<T = any>(handler: IPreSubmitMetadata<T>['handler']) {\r\n return function <T extends { new (...args: any[]): {} }>(constructor: T) {\r\n Reflect.defineMetadata('form:presubmit', { handler }, constructor)\r\n return constructor\r\n }\r\n}\r\n\r\nexport function getFormPreSubmit(targetClass: any): IPreSubmitMetadata | undefined {\r\n return Reflect.getMetadata('form:presubmit', targetClass)\r\n}\r\n\r\nexport interface IFieldMetadata<T = any> {\r\n name: keyof T | string\r\n label?: string\r\n placeholder?: string\r\n default?: any\r\n type?: any\r\n size?: Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>>\r\n renderInput?: ComponentType<IFormInputBase<T>>\r\n}\r\n\r\nexport function formField(options: Omit<IFieldMetadata, 'name'>) {\r\n return function (target: any, propertyKey: string) {\r\n const designType = Reflect.getMetadata('design:type', target, propertyKey)\r\n const actualType = options.type || designType\r\n const existing: IFieldMetadata[] = Reflect.getMetadata('form:fields', target.constructor) || []\r\n const fields = [...existing]\r\n fields.push({ name: propertyKey, type: actualType, label: options.label || propertyKey, ...options })\r\n Reflect.defineMetadata('form:fields', fields, target.constructor)\r\n }\r\n}\r\n\r\nexport const getFormFields = (targetClass: any): IFieldMetadata[] => {\r\n return Reflect.getMetadata('form:fields', targetClass) || []\r\n}\r\n\r\nexport interface IValidationMetadata extends IConfigValue {\r\n name: string\r\n}\r\n\r\nexport function formValidate(options: Omit<IValidationMetadata, 'name'>) {\r\n return function (target: any, propertyKey: string) {\r\n const existing: IValidationMetadata[] = Reflect.getMetadata('form:validators', target.constructor) || []\r\n const validators = [...existing]\r\n validators.push({ name: propertyKey, ...options })\r\n Reflect.defineMetadata('form:validators', validators, target.constructor)\r\n }\r\n}\r\n\r\nexport function getFormValidators<T = any>(targetClass: any): IFormValidatorConfig<T> {\r\n const metas: IValidationMetadata[] = Reflect.getMetadata('form:validators', targetClass) || []\r\n return metas.reduce<IFormValidatorConfig<T>>((acc, curr) => {\r\n acc[curr.name as keyof T] = { Rules: curr.Rules, label: curr.label }\r\n return acc\r\n }, {})\r\n}\r\n"],"names":["ClassRegistry","Map","registerForm","name","constructor","key","set","RegisteredClass","_constructor","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","__class","_inherits","_createClass","Object","defineProperty","value","formPreSubmit","handler","Reflect","defineMetadata","getFormPreSubmit","targetClass","getMetadata","formField","options","
|
|
1
|
+
{"version":3,"file":"decorator.js","sources":["../../../src/form/decorator.ts"],"sourcesContent":["import 'reflect-metadata'\r\nimport { ComponentType } from 'react'\r\nimport { IFormInputBase } from './types'\r\nimport { IConfigValue, IFormValidatorConfig } from './validator'\r\n\r\nconst ClassRegistry = new Map<string, any>()\r\n\r\nexport function registerForm(name?: string) {\r\n return function <T extends { new (...args: any[]): {} }>(constructor: T) {\r\n const key = name || constructor.name\r\n ClassRegistry.set(key, constructor)\r\n class RegisteredClass extends constructor {\r\n __class = key\r\n constructor(...args: any[]) {\r\n super(...args)\r\n this.__class = key\r\n }\r\n }\r\n Object.defineProperty(RegisteredClass, 'name', { value: constructor.name })\r\n Object.defineProperty(RegisteredClass, '__class', { value: key })\r\n return RegisteredClass\r\n }\r\n}\r\n\r\n/**\r\n * Check whether a class (constructor) or an instance has been registered\r\n * with the @registerForm decorator.\r\n *\r\n * Accepts:\r\n * - the decorated constructor (function)\r\n * - the original constructor (function)\r\n * - an instance of the class\r\n *\r\n * Returns true when the underlying registry contains an entry for the\r\n * class key (either the custom name provided to the decorator or the\r\n * constructor name).\r\n */\r\nexport function isFormRegistered(target: any): boolean {\r\n if (!target) return false\r\n const ctor = typeof target === 'function' ? target : target?.constructor\r\n if (!ctor) return false\r\n const key = (ctor as any).__class || (ctor as any).name\r\n if (!key) return false\r\n return ClassRegistry.has(key)\r\n}\r\n\r\nexport interface IPreSubmitMetadata<T = any> {\r\n handler: (data: T, oldData: T) => Promise<any> | any\r\n}\r\n\r\nexport function formPreSubmit<T = any>(handler: IPreSubmitMetadata<T>['handler']) {\r\n return function <T extends { new (...args: any[]): {} }>(constructor: T) {\r\n Reflect.defineMetadata('form:presubmit', { handler }, constructor)\r\n return constructor\r\n }\r\n}\r\n\r\nexport function getFormPreSubmit(targetClass: any): IPreSubmitMetadata | undefined {\r\n return Reflect.getMetadata('form:presubmit', targetClass)\r\n}\r\n\r\nexport interface IFieldMetadata<T = any> {\r\n name: keyof T | string\r\n label?: string\r\n placeholder?: string\r\n default?: any\r\n type?: any\r\n size?: Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>>\r\n renderInput?: ComponentType<IFormInputBase<T>>\r\n}\r\n\r\nexport function formField(options: Omit<IFieldMetadata, 'name'>) {\r\n return function (target: any, propertyKey: string) {\r\n const designType = Reflect.getMetadata('design:type', target, propertyKey)\r\n const actualType = options.type || designType\r\n const existing: IFieldMetadata[] = Reflect.getMetadata('form:fields', target.constructor) || []\r\n const fields = [...existing]\r\n fields.push({ name: propertyKey, type: actualType, label: options.label || propertyKey, ...options })\r\n Reflect.defineMetadata('form:fields', fields, target.constructor)\r\n }\r\n}\r\n\r\nexport const getFormFields = (targetClass: any): IFieldMetadata[] => {\r\n return Reflect.getMetadata('form:fields', targetClass) || []\r\n}\r\n\r\nexport interface IValidationMetadata extends IConfigValue {\r\n name: string\r\n}\r\n\r\nexport function formValidate(options: Omit<IValidationMetadata, 'name'>) {\r\n return function (target: any, propertyKey: string) {\r\n const existing: IValidationMetadata[] = Reflect.getMetadata('form:validators', target.constructor) || []\r\n const validators = [...existing]\r\n validators.push({ name: propertyKey, ...options })\r\n Reflect.defineMetadata('form:validators', validators, target.constructor)\r\n }\r\n}\r\n\r\nexport function getFormValidators<T = any>(targetClass: any): IFormValidatorConfig<T> {\r\n const metas: IValidationMetadata[] = Reflect.getMetadata('form:validators', targetClass) || []\r\n return metas.reduce<IFormValidatorConfig<T>>((acc, curr) => {\r\n acc[curr.name as keyof T] = { Rules: curr.Rules, label: curr.label }\r\n return acc\r\n }, {})\r\n}\r\n"],"names":["ClassRegistry","Map","registerForm","name","constructor","key","set","RegisteredClass","_constructor","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","__class","_inherits","_createClass","Object","defineProperty","value","isFormRegistered","target","ctor","has","formPreSubmit","handler","Reflect","defineMetadata","getFormPreSubmit","targetClass","getMetadata","formField","options","propertyKey","designType","actualType","type","existing","fields","_toConsumableArray","push","_objectSpread","label","getFormFields","formValidate","validators","getFormValidators","reduce","acc","curr","Rules"],"mappings":"2NAKA,IAAMA,EAAgB,IAAIC,IAEpB,SAAUC,EAAaC,GAC3B,OAAO,SAAkDC,GACvD,IAAMC,EAAMF,GAAQC,EAAYD,KAChCH,EAAcM,IAAID,EAAKD,GAAY,IAC7BG,WAAgBC,GAEpB,SAAAD,IAA0B,IAAAE,EAAAC,OAAAH,GAAA,IAAA,IAAAI,EAAAC,UAAAC,OAAXC,EAAWC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAXF,EAAWE,GAAAJ,UAAAI,GAEN,OADlBP,EAAAQ,EAAAC,KAAAX,EAAAY,GAAAA,OAASL,IAAKM,EAAAX,EAAA,UAFNJ,GAGRI,EAAKY,QAAUhB,EAAGI,CACpB,CAAC,OAAAa,EAAAf,EAAAC,GAAAe,EAAAhB,EAAA,EAL2BH,GAS9B,OAFAoB,OAAOC,eAAelB,EAAiB,OAAQ,CAAEmB,MAAOtB,EAAYD,OACpEqB,OAAOC,eAAelB,EAAiB,UAAW,CAAEmB,MAAOrB,IACpDE,CACR,CACH,CAeM,SAAUoB,EAAiBC,GAC/B,IAAKA,EAAQ,OAAO,EACpB,IAAMC,EAAyB,mBAAXD,EAAwBA,EAASA,aAAAA,EAAAA,EAAQxB,YAC7D,IAAKyB,EAAM,OAAO,EAClB,IAAMxB,EAAOwB,EAAaR,SAAYQ,EAAa1B,KACnD,QAAKE,GACEL,EAAc8B,IAAIzB,EAC3B,CAMM,SAAU0B,EAAuBC,GACrC,OAAO,SAAkD5B,GAEvD,OADA6B,QAAQC,eAAe,iBAAkB,CAAEF,QAAAA,GAAW5B,GAC/CA,CACR,CACH,CAEM,SAAU+B,EAAiBC,GAC/B,OAAOH,QAAQI,YAAY,iBAAkBD,EAC/C,CAYM,SAAUE,EAAUC,GACxB,OAAO,SAAUX,EAAaY,GAC5B,IAAMC,EAAaR,QAAQI,YAAY,cAAeT,EAAQY,GACxDE,EAAaH,EAAQI,MAAQF,EAC7BG,EAA6BX,QAAQI,YAAY,cAAeT,EAAOxB,cAAgB,GACvFyC,EAAMC,EAAOF,GACnBC,EAAOE,KAAIC,EAAA,CAAG7C,KAAMqC,EAAaG,KAAMD,EAAYO,MAAOV,EAAQU,OAAST,GAAgBD,IAC3FN,QAAQC,eAAe,cAAeW,EAAQjB,EAAOxB,YACtD,CACH,KAEa8C,EAAgB,SAACd,GAC5B,OAAOH,QAAQI,YAAY,cAAeD,IAAgB,EAC5D,EAMM,SAAUe,EAAaZ,GAC3B,OAAO,SAAUX,EAAaY,GAC5B,IAAMI,EAAkCX,QAAQI,YAAY,kBAAmBT,EAAOxB,cAAgB,GAChGgD,EAAUN,EAAOF,GACvBQ,EAAWL,KAAIC,EAAA,CAAG7C,KAAMqC,GAAgBD,IACxCN,QAAQC,eAAe,kBAAmBkB,EAAYxB,EAAOxB,YAC9D,CACH,CAEM,SAAUiD,EAA2BjB,GAEzC,OADqCH,QAAQI,YAAY,kBAAmBD,IAAgB,IAC/EkB,QAAgC,SAACC,EAAKC,GAEjD,OADAD,EAAIC,EAAKrD,MAAmB,CAAEsD,MAAOD,EAAKC,MAAOR,MAAOO,EAAKP,OACtDM,CACR,GAAE,GACL"}
|
|
@@ -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>;
|
|
@@ -7,6 +7,20 @@ export declare function registerForm(name?: string): <T extends new (...args: an
|
|
|
7
7
|
__class: string;
|
|
8
8
|
};
|
|
9
9
|
} & T;
|
|
10
|
+
/**
|
|
11
|
+
* Check whether a class (constructor) or an instance has been registered
|
|
12
|
+
* with the @registerForm decorator.
|
|
13
|
+
*
|
|
14
|
+
* Accepts:
|
|
15
|
+
* - the decorated constructor (function)
|
|
16
|
+
* - the original constructor (function)
|
|
17
|
+
* - an instance of the class
|
|
18
|
+
*
|
|
19
|
+
* Returns true when the underlying registry contains an entry for the
|
|
20
|
+
* class key (either the custom name provided to the decorator or the
|
|
21
|
+
* constructor name).
|
|
22
|
+
*/
|
|
23
|
+
export declare function isFormRegistered(target: any): boolean;
|
|
10
24
|
export interface IPreSubmitMetadata<T = any> {
|
|
11
25
|
handler: (data: T, oldData: T) => Promise<any> | any;
|
|
12
26
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ComponentType, FC } from 'react';
|
|
2
2
|
import { IFormInputBase } from './types';
|
|
3
|
+
import { IPartialError } from './validator';
|
|
3
4
|
export interface IDecoratorFieldProps<T = any> extends IFormInputBase<T> {
|
|
4
5
|
type?: any;
|
|
5
6
|
renderInput?: ComponentType<IFormInputBase<T>>;
|
|
@@ -7,12 +8,15 @@ export interface IDecoratorFieldProps<T = any> extends IFormInputBase<T> {
|
|
|
7
8
|
export declare const DecoratorField: FC<IDecoratorFieldProps>;
|
|
8
9
|
export interface IDecoratorFormSlots {
|
|
9
10
|
bottom?: React.ReactNode;
|
|
11
|
+
isFooter?: React.ReactNode | boolean;
|
|
10
12
|
renderSubmitButton?: () => React.ReactNode;
|
|
11
13
|
}
|
|
12
|
-
export interface IDecoratorFormProps {
|
|
14
|
+
export interface IDecoratorFormProps<T = any> {
|
|
13
15
|
configClass: any;
|
|
14
16
|
data?: any;
|
|
15
17
|
onSubmit?: (data: any) => Promise<void>;
|
|
18
|
+
onError?: (error: any) => void;
|
|
19
|
+
onSubmitError?: (error: IPartialError<T>) => void;
|
|
16
20
|
slots?: IDecoratorFormSlots;
|
|
17
21
|
}
|
|
18
22
|
export declare const DecoratorForm: FC<IDecoratorFormProps>;
|
|
@@ -18,8 +18,8 @@ declare class DinoFormBase {
|
|
|
18
18
|
createFormBase: <T>(params?: import("./create.form-base").IFormBaseParams<T> | undefined) => import("./create.form-base").IFormBaseResult<T>;
|
|
19
19
|
createFormComfirm: <T = any>(param?: import("./create.form-comfirm").IFormComfirmParam<T> | undefined) => import("react").ComponentType<import("react").PropsWithChildren<import("./create.form-comfirm").IFormComfirmProps<T>>>;
|
|
20
20
|
createFormGridLayout: <T>(params: import("./create.form-grid-layout").IFormGridLayoutParams<T>) => import("react").ComponentType<import("./create.form-grid-layout").IFormGridLayoutProps<T>>;
|
|
21
|
-
DecoratorForm: import("react").FC<import("./decorator.form").IDecoratorFormProps
|
|
22
|
-
createDecoratorForm: <T>(configClass: any, params?: Partial<Omit<import("./decorator.form").IDecoratorFormProps
|
|
21
|
+
DecoratorForm: import("react").FC<import("./decorator.form").IDecoratorFormProps<any>>;
|
|
22
|
+
createDecoratorForm: <T>(configClass: any, params?: Partial<Omit<import("./decorator.form").IDecoratorFormProps<any>, "configClass">> | undefined) => import("react").ComponentType<Omit<import("./decorator.form").IDecoratorFormProps<any>, "configClass">>;
|
|
23
23
|
createColorPicker: typeof createColorPicker;
|
|
24
24
|
createDateExpired: typeof CreateDateExpired;
|
|
25
25
|
createDatePicker: <T extends Object>(params?: import("./create.date-picker").IDatePickerSlots | undefined) => import("react").ComponentType<import("./create.date-picker").IDatePickerProps<T>>;
|