dinocollab-core 2.2.17 → 2.2.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/api-context/alert-global.js +1 -1
- package/dist/src/api-context/alert-global.js.map +1 -1
- package/dist/src/filter-bar/components/filter-input.js +1 -1
- package/dist/src/filter-bar/components/filter-input.js.map +1 -1
- package/dist/src/filter-bar/components/popper-custom.js +1 -1
- package/dist/src/filter-bar/components/popper-custom.js.map +1 -1
- package/dist/src/filter-bar/menu/create-form-field-select-multiple.js +1 -1
- package/dist/src/filter-bar/menu/create-form-field-select-multiple.js.map +1 -1
- package/dist/src/filter-bar/menu/create-form-field-select.js +1 -1
- package/dist/src/filter-bar/menu/create-form-field-select.js.map +1 -1
- package/dist/src/filter-bar/menu/create-form-field-string.js +1 -1
- package/dist/src/filter-bar/menu/create-form-field-string.js.map +1 -1
- package/dist/src/filter-bar/menu/create.js +1 -1
- package/dist/src/filter-bar/menu/create.js.map +1 -1
- package/dist/src/form/create.form-base.js +1 -1
- package/dist/src/form/create.form-base.js.map +1 -1
- package/dist/src/form/create.form-comfirm.js +1 -1
- package/dist/src/form/create.form-comfirm.js.map +1 -1
- package/dist/src/form/create.form-grid-layout.js +1 -1
- package/dist/src/form/create.form-grid-layout.js.map +1 -1
- package/dist/src/form/create.select-with-api.js +1 -1
- package/dist/src/form/create.select-with-api.js.map +1 -1
- package/dist/src/form/modal-wrapper.js +1 -1
- package/dist/src/form/modal-wrapper.js.map +1 -1
- package/dist/src/table/create.table.js +1 -1
- package/dist/src/table/create.table.js.map +1 -1
- package/dist/src/table/ui.buttons.js +1 -1
- package/dist/src/table/ui.buttons.js.map +1 -1
- package/dist/src/table-grid/create.table-grid.js +1 -1
- package/dist/src/table-grid/create.table-grid.js.map +1 -1
- package/dist/src/table-grid/item-actions.js +1 -1
- package/dist/src/table-grid/item-actions.js.map +1 -1
- package/dist/src/table-grid/toolbar-pannel.js +1 -1
- package/dist/src/table-grid/toolbar-pannel.js.map +1 -1
- package/dist/types/filter-bar/components/popper-custom.d.ts +4 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.select-with-api.js","sources":["../../../src/form/create.select-with-api.tsx"],"sourcesContent":["// imports\r\nimport { Component } from 'react'\r\nimport { Autocomplete, Box, styled, TextField } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { ApiAlertContext } from '../api-context'\r\nimport { RichTooltip, HelpOutlinePulseIcon } from '../components/rich-tooltip'\r\n// types\r\nimport type { ComponentClass } from 'react'\r\nimport type { FilterOptionsState, TextFieldProps, AutocompleteRenderOptionState } from '@mui/material'\r\nimport type { IRichTooltipPanelConfig } from '../components/rich-tooltip'\r\n\r\nexport interface ISelectWithApiOption<TOther = any> {\r\n Id: string\r\n Name?: string\r\n Other?: TOther\r\n}\r\n\r\nexport interface ISelectWithApiPropsSlots<O extends ISelectWithApiOption = ISelectWithApiOption> {\r\n textFieldProps: TextFieldProps\r\n renderOption?: (props: React.HTMLAttributes<HTMLElement>, option: O, state: AutocompleteRenderOptionState) => React.ReactNode\r\n}\r\n\r\nexport type ISelectWithApiFetchData<O extends ISelectWithApiOption> = (value?: string, signal?: AbortSignal) => Promise<O[]>\r\n\r\nexport interface ISelectWithApiProps<T, O extends ISelectWithApiOption> extends IFormInputBase<T>, ISelectWithApiParams<O> {\r\n tooltip?: IRichTooltipPanelConfig\r\n onChange?: (value: O | null) => void\r\n existedIds?: string[]\r\n slots?: ISelectWithApiPropsSlots<O>\r\n}\r\n\r\nexport interface ISelectWithApiState<O extends ISelectWithApiOption> {\r\n options: O[]\r\n statusText?: string\r\n optionSelected: O | null\r\n inputValue: string\r\n loading?: boolean\r\n}\r\n\r\nexport interface ISelectWithApiParams<O extends ISelectWithApiOption> {\r\n fetchData?: ISelectWithApiFetchData<O>\r\n tooltip?: IRichTooltipPanelConfig\r\n renderOption?: (props: React.HTMLAttributes<HTMLElement>, option: O, state: AutocompleteRenderOptionState) => React.ReactNode\r\n}\r\n\r\nexport interface ISelectWithApiHandle {\r\n clear: () => void\r\n}\r\n\r\nfunction createSelectWithApi<T, O extends ISelectWithApiOption = ISelectWithApiOption>(params?: ISelectWithApiParams<O>) {\r\n class SelectWithApi extends Component<ISelectWithApiProps<T, O>, ISelectWithApiState<O>> implements ISelectWithApiHandle {\r\n abortController = { signalController: new AbortController() }\r\n refInput: HTMLInputElement | null = null\r\n existedIds: string[] = []\r\n constructor(props: ISelectWithApiProps<T, O>) {\r\n super(props)\r\n this.state = {\r\n options: [],\r\n statusText: 'no items',\r\n optionSelected: null,\r\n inputValue: '',\r\n loading: true\r\n }\r\n this.existedIds = props.existedIds ?? []\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchData()\r\n }\r\n\r\n componentWillUnmount(): void {\r\n this.timer.clear()\r\n }\r\n\r\n componentDidUpdate(prevProps: Readonly<ISelectWithApiProps<T, O>>): void {\r\n if (JSON.stringify(prevProps.existedIds) !== JSON.stringify(this.props.existedIds)) {\r\n this.existedIds = this.props.existedIds ?? []\r\n }\r\n }\r\n\r\n render() {\r\n const defaultValue = this.getDefaultValue()\r\n const eMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n const renderOption = this.getWrappedRenderOption()\r\n return (\r\n <SelectWithApiStyled className={this.getRootClasses()}>\r\n <Autocomplete\r\n disabled={this.state.loading || this.props.disabled}\r\n fullWidth\r\n noOptionsText={this.state.statusText}\r\n options={this.state.options}\r\n getOptionLabel={(x) => x.Name ?? x.Id}\r\n getOptionKey={(x) => JSON.stringify(x)}\r\n isOptionEqualToValue={(o, v) => o.Id.toString() === v.Id.toString() && o.Name === v.Name}\r\n filterOptions={this.fillterOptions}\r\n renderOption={renderOption}\r\n // select\r\n value={this.state.optionSelected}\r\n onChange={this.handleChange}\r\n // input\r\n inputValue={this.state.inputValue}\r\n onInputChange={this.handleInputChange}\r\n renderInput={(params) => (\r\n <TextField\r\n {...params}\r\n label={this.getLabel()}\r\n error={eMessage.error}\r\n helperText={eMessage.message}\r\n onBlur={() => {\r\n if (!this.props.name) return\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n }}\r\n {...this.props.slots?.textFieldProps}\r\n />\r\n )}\r\n />\r\n <input ref={(ref) => (this.refInput = ref)} hidden name={this.props.name?.toString()} defaultValue={defaultValue} />\r\n {this.state.optionSelected?.Other && (\r\n <input\r\n hidden\r\n name={`${this.props.name?.toString()}Other`}\r\n key={this.state.optionSelected.Id ?? 'key'}\r\n defaultValue={JSON.stringify(this.state.optionSelected.Other)}\r\n />\r\n )}\r\n {this.renderTooltip()}\r\n </SelectWithApiStyled>\r\n )\r\n }\r\n\r\n renderTooltip = () => {\r\n const tooltip = this.props.tooltip || params?.tooltip\r\n if (!tooltip) return null\r\n return (\r\n <div className={selectWithApiClasses.tooltipWrap}>\r\n <RichTooltip panel={tooltip}>\r\n <HelpOutlinePulseIcon fontSize='small' />\r\n </RichTooltip>\r\n </div>\r\n )\r\n }\r\n\r\n getRootClasses = () => {\r\n const classes = [selectWithApiClasses.root]\r\n const tooltip = this.props.tooltip || params?.tooltip\r\n if (tooltip) classes.push(selectWithApiClasses.tooltip)\r\n return classes.join(' ')\r\n }\r\n\r\n getFetchDataFunc = (): ISelectWithApiFetchData<O> => {\r\n return this.props.fetchData ?? params?.fetchData ?? (() => Promise.resolve([]))\r\n }\r\n\r\n getWrappedRenderOption = () => {\r\n const userRenderOption = this.props.slots?.renderOption ?? params?.renderOption\r\n if (!userRenderOption) return undefined\r\n\r\n return (props: any, option: O, state: AutocompleteRenderOptionState) => {\r\n const { key, ...propsWithoutKey } = props\r\n return (\r\n <li key={key} {...(propsWithoutKey as any)} style={{ width: '100%', boxSizing: 'border-box', ...propsWithoutKey.style }}>\r\n {userRenderOption(propsWithoutKey as React.HTMLAttributes<HTMLElement>, option, state)}\r\n </li>\r\n )\r\n }\r\n }\r\n\r\n timer = {\r\n _timer: 0,\r\n _second: 500,\r\n callback: async (value: string) => {\r\n try {\r\n this.abortController.signalController = new AbortController()\r\n const res = await this.getFetchDataFunc()(value, this.abortController.signalController.signal)\r\n const options = this.getOptionsFilter(res, this.existedIds)\r\n this.setState({ options })\r\n } catch (error) {\r\n // console.log(error)\r\n ApiAlertContext.ApiAlert?.PushError('Error from server!')\r\n } finally {\r\n this.setState({ statusText: 'no items' })\r\n }\r\n },\r\n start: (text: string) => {\r\n this.timer.clear()\r\n this.timer._timer = window.setTimeout(() => this.timer.callback(text), this.timer._second)\r\n },\r\n clear: () => {\r\n this.abortController.signalController.abort()\r\n clearTimeout(this.timer._timer)\r\n }\r\n }\r\n\r\n fetchData = async () => {\r\n try {\r\n const defaultValue = this.getDefaultValue()\r\n const res = await this.getFetchDataFunc()(defaultValue, this.abortController.signalController.signal)\r\n if (!Array.isArray(res)) return\r\n const options = this.getOptionsFilter(res, this.existedIds)\r\n const optionSelected = options.find((x) => x.Id === defaultValue) ?? null\r\n this.setState({ options, optionSelected, loading: false })\r\n return\r\n } catch (error) {\r\n // console.log(error)\r\n ApiAlertContext.ApiAlert?.PushError('Error from server!')\r\n } finally {\r\n this.setState({ statusText: 'no items', loading: false })\r\n }\r\n }\r\n\r\n handleChange = (_: React.SyntheticEvent, value: O | null) => {\r\n this.setState({ optionSelected: value })\r\n if (this.refInput) this.refInput.value = value?.Id ?? ''\r\n this.props.onChange && this.props.onChange(value)\r\n }\r\n\r\n handleInputChange = (_: React.SyntheticEvent, value: string) => {\r\n const state: Pick<ISelectWithApiState<O>, 'inputValue' | 'statusText' | 'loading'> = { inputValue: value }\r\n if (value === this.state.optionSelected?.Name) {\r\n this.setState(state)\r\n return\r\n }\r\n const valueFormated = value.trim().toLowerCase()\r\n const selectedIndex = this.state.options.findIndex((x) => {\r\n return x.Name?.trim().toLowerCase().includes(valueFormated)\r\n })\r\n if (selectedIndex < 0 || valueFormated === '') state.statusText = 'loading...'\r\n this.setState(state, () => {\r\n if (selectedIndex < 0 || valueFormated === '') this.timer.start(valueFormated)\r\n })\r\n }\r\n\r\n fillterOptions = (options: O[], state: FilterOptionsState<O>) => {\r\n return options.filter((x) => {\r\n const value = state.inputValue.toLowerCase()\r\n return x.Id.toLowerCase().includes(value) || x.Name?.toLowerCase().includes(value)\r\n })\r\n }\r\n\r\n getLabel = () => {\r\n return this.props.label ?? this.props.name?.toString()\r\n }\r\n\r\n getDefaultValue = () => {\r\n if (!this.props.name) return\r\n return (this.props.defaultValue ?? this.props.data?.[this.props.name])?.toString()\r\n }\r\n\r\n getOptionsFilter<O extends ISelectWithApiOption = ISelectWithApiOption>(options: O[], existedId: string[] = []): O[] {\r\n const ids = new Set<string | number>(existedId)\r\n return options.reduce<O[]>((a, b) => {\r\n if (!ids.has(b.Id)) {\r\n a.push(b)\r\n ids.add(b.Id)\r\n }\r\n return a\r\n }, [])\r\n }\r\n\r\n clear = () => {\r\n this.setState({ optionSelected: null, inputValue: '' })\r\n if (this.refInput) this.refInput.value = ''\r\n }\r\n }\r\n return SelectWithApi\r\n}\r\nexport default createSelectWithApi\r\n\r\nconst selectWithApiClasses = {\r\n root: 'SelectWithApi-root',\r\n tooltip: 'SelectWithApi-tooltip',\r\n tooltipWrap: 'SelectWithApi-tooltipWrap'\r\n}\r\n\r\nconst getSelectWithApiClass = (key: keyof typeof selectWithApiClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${selectWithApiClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nconst SelectWithApiStyled = styled(Box)(({ theme }) => ({\r\n [getSelectWithApiClass('root', { suffix: '&' })]: {\r\n width: '100%',\r\n position: 'relative'\r\n },\r\n [getSelectWithApiClass('tooltipWrap')]: {\r\n position: 'absolute',\r\n top: theme.spacing(2.25),\r\n right: theme.spacing(1.5),\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(0.5)\r\n },\r\n [getSelectWithApiClass('tooltip', { suffix: '&' })]: {\r\n '.MuiInputBase-root .MuiAutocomplete-endAdornment': {\r\n right: theme.spacing(4.5)\r\n }\r\n }\r\n}))\r\n"],"names":["createSelectWithApi","params","SelectWithApi","props","_props$existedIds","_this","_callback","_classCallCheck","_callSuper","_defineProperty","signalController","AbortController","tooltip","_jsx","className","selectWithApiClasses","tooltipWrap","children","RichTooltip","panel","HelpOutlinePulseIcon","fontSize","classes","root","push","join","_ref","_this$props$fetchData","fetchData","Promise","resolve","_this$props$slots$ren","_this$props$slots","userRenderOption","slots","renderOption","option","state","key","propsWithoutKey","_objectWithoutProperties","_excluded","_objectSpread","style","width","boxSizing","_timer","_second","callback","_asyncToGenerator","_regenerator","m","_callee","value","res","options","_ApiAlertContext$ApiA","w","_context","p","n","abortController","getFetchDataFunc","signal","v","getOptionsFilter","existedIds","setState","ApiAlertContext","ApiAlert","PushError","statusText","f","a","_x","apply","this","arguments","start","text","timer","clear","window","setTimeout","abort","clearTimeout","_callee2","_options$find","defaultValue","optionSelected","_ApiAlertContext$ApiA2","_context2","getDefaultValue","Array","isArray","find","x","Id","loading","_","_value$Id","refInput","onChange","_this$state$optionSel","inputValue","Name","valueFormated","trim","toLowerCase","selectedIndex","findIndex","_x$Name","includes","filter","_x$Name2","_this$props$label","_this$props$name","label","name","toString","_ref3","_this$props$defaultVa","_this$props$data","data","_inherits","Component","_createClass","prevProps","_this$props$existedId","JSON","stringify","_this$props$name2","_this$state$optionSel2","_this$props$name3","_this$state$optionSel3","_this2","eMessage","getErrorMessage","messageErrors","getWrappedRenderOption","_jsxs","SelectWithApiStyled","getRootClasses","Autocomplete","disabled","fullWidth","noOptionsText","getOptionLabel","_x$Name3","getOptionKey","isOptionEqualToValue","o","filterOptions","fillterOptions","handleChange","onInputChange","handleInputChange","renderInput","_this2$props$slots","TextField","getLabel","error","helperText","message","onBlur","textFieldProps","ref","hidden","Other","concat","renderTooltip","ids","Set","length","undefined","reduce","b","has","add","getSelectWithApiClass","prefix","suffix","styled","Box","_ref5","theme","position","top","spacing","right","display","alignItems","gap"],"mappings":"8qBAkDA,SAASA,EAA8EC,GAAgC,IAC/GC,aAIJ,SAAAA,EAAYC,GAAgC,IAAAC,EAAAC,EAoHlCC,EA3GgC,OATEC,OAAAL,GAC1CG,EAAAG,EAAAN,KAAAA,GAAMC,IAAMM,EAAAJ,EAJI,kBAAA,CAAEK,iBAAkB,IAAIC,kBAAmBF,EAAAJ,EAAA,WACzB,MAAII,EAAAJ,EAAA,aACjB,IAAEI,EAAAJ,EAAA,gBA6ET,WACd,IAAMO,EAAUP,EAAKF,MAAMS,UAAWX,aAAAA,EAAAA,EAAQW,SAC9C,OAAKA,EAEHC,EAAK,MAAA,CAAAC,UAAWC,EAAqBC,YAAWC,SAC9CJ,EAACK,EAAY,CAAAC,MAAOP,EAAOK,SACzBJ,EAACO,EAAqB,CAAAC,SAAS,cAJhB,OAQtBZ,EAAAJ,EAAA,iBAEgB,WACf,IAAMiB,EAAU,CAACP,EAAqBQ,MAGtC,OAFgBlB,EAAKF,MAAMS,UAAWX,aAAAA,EAAAA,EAAQW,WACjCU,EAAQE,KAAKT,EAAqBH,SACxCU,EAAQG,KAAK,OACrBhB,EAAAJ,EAAA,mBAEkB,WAAiC,IAAAqB,EAAAC,EAClD,OAAgDD,QAAhDA,EAA2B,QAA3BC,EAAOtB,EAAKF,MAAMyB,iBAAS,IAAAD,EAAAA,EAAI1B,aAAAA,EAAAA,EAAQ2B,iBAASF,IAAAA,EAAAA,EAAK,WAAA,OAAMG,QAAQC,QAAQ,GAAG,IAC/ErB,EAAAJ,EAAA,yBAEwB,WAAK,IAAA0B,EAAAC,EACtBC,EAAiD,QAAjCF,EAAmB,QAAnBC,EAAG3B,EAAKF,MAAM+B,aAAK,IAAAF,OAAA,EAAhBA,EAAkBG,oBAAY,IAAAJ,EAAAA,EAAI9B,aAAM,EAANA,EAAQkC,aACnE,GAAKF,EAEL,OAAO,SAAC9B,EAAYiC,EAAWC,GAC7B,IAAQC,EAA4BnC,EAA5BmC,IAAQC,EAAeC,EAAKrC,EAAKsC,GACzC,OACE5B,EAAA,KAAA6B,EAAAA,KAAmBH,GAAuB,GAAA,CAAEI,MAAKD,EAAA,CAAIE,MAAO,OAAQC,UAAW,cAAiBN,EAAgBI,OAC7G1B,SAAAgB,EAAiBM,EAAsDH,EAAQC,KADzEC,EAIZ,IACF7B,EAAAJ,EAEO,QAAA,CACNyC,OAAQ,EACRC,QAAS,IACTC,UAAQ1C,EAAA2C,EAAAC,IAAAC,EAAE,SAAAC,EAAOC,GAAa,IAAAC,EAAAC,EAAAC,EAAA,OAAAN,IAAAO,EAAA,SAAAC,GAAA,cAAAA,EAAAC,EAAAD,EAAAE,GAAA,KAAA,EAEmC,OAFnCF,EAAAC,EAAA,EAE1BtD,EAAKwD,gBAAgBnD,iBAAmB,IAAIC,gBAAiB+C,EAAAE,EAAA,EAC3CvD,EAAKyD,kBAALzD,CAAwBgD,EAAOhD,EAAKwD,gBAAgBnD,iBAAiBqD,QAAO,KAAA,EAAxFT,EAAGI,EAAAM,EACHT,EAAUlD,EAAK4D,iBAAiBX,EAAKjD,EAAK6D,YAChD7D,EAAK8D,SAAS,CAAEZ,QAAAA,IAAUG,EAAAE,EAAA,EAAA,MAAA,KAAA,EAAAF,EAAAC,EAAA,EAAAD,EAAAM,EAGF,QAAxBR,EAAAY,EAAgBC,gBAAQ,IAAAb,GAAxBA,EAA0Bc,UAAU,sBAAqB,KAAA,EAEhB,OAFgBZ,EAAAC,EAAA,EAEzDtD,EAAK8D,SAAS,CAAEI,WAAY,aAAab,EAAAc,EAAA,GAAA,KAAA,EAAA,OAAAd,EAAAe,EAAA,GAAA,EAAArB,EAAA,KAAA,CAAA,CAAA,EAAA,EAAA,EAAA,QAE5C,SAZOsB,GAAA,OAAApE,EAAAqE,MAAAC,KAAAC,UAAA,GAaRC,MAAO,SAACC,GACN1E,EAAK2E,MAAMC,QACX5E,EAAK2E,MAAMlC,OAASoC,OAAOC,WAAW,WAAA,OAAM9E,EAAK2E,MAAMhC,SAAS+B,EAAK,EAAE1E,EAAK2E,MAAMjC,QACnF,EACDkC,MAAO,WACL5E,EAAKwD,gBAAgBnD,iBAAiB0E,QACtCC,aAAahF,EAAK2E,MAAMlC,OAC1B,IACDrC,EAAAJ,EAAA,YAAA4C,EAAAC,IAAAC,EAEW,SAAAmC,IAAA,IAAAC,EAAAC,EAAAlC,EAAAC,EAAAkC,EAAAC,EAAA,OAAAxC,IAAAO,EAAA,SAAAkC,GAAA,cAAAA,EAAAhC,EAAAgC,EAAA/B,GAAA,KAAA,EAEmC,OAFnC+B,EAAAhC,EAAA,EAEF6B,EAAenF,EAAKuF,kBAAiBD,EAAA/B,EAAA,EACzBvD,EAAKyD,kBAALzD,CAAwBmF,EAAcnF,EAAKwD,gBAAgBnD,iBAAiBqD,QAAO,KAAA,EAA5F,GAAHT,EAAGqC,EAAA3B,EACJ6B,MAAMC,QAAQxC,GAAI,CAAAqC,EAAA/B,EAAA,EAAA,KAAA,CAAA,OAAA+B,EAAAlB,EAAA,GAAA,KAAA,EAGmC,OAFpDlB,EAAUlD,EAAK4D,iBAAiBX,EAAKjD,EAAK6D,YAC1CuB,EAA2DF,QAA7CA,EAAGhC,EAAQwC,KAAK,SAACC,GAAC,OAAKA,EAAEC,KAAOT,CAAY,UAACD,IAAAA,EAAAA,EAAI,KACrElF,EAAK8D,SAAS,CAAEZ,QAAAA,EAASkC,eAAAA,EAAgBS,SAAS,IAAQP,EAAAlB,EAAA,GAAA,KAAA,EAAAkB,EAAAhC,EAAA,EAAAgC,EAAA3B,EAIlC,QAAxB0B,EAAAtB,EAAgBC,gBAAQ,IAAAqB,GAAxBA,EAA0BpB,UAAU,sBAAqB,KAAA,EAEA,OAFAqB,EAAAhC,EAAA,EAEzDtD,EAAK8D,SAAS,CAAEI,WAAY,WAAY2B,SAAS,IAAQP,EAAAnB,EAAA,GAAA,KAAA,EAAA,OAAAmB,EAAAlB,EAAA,GAAA,EAAAa,EAAA,KAAA,CAAA,CAAA,EAAA,EAAA,EAAA,IAE5D,KAAA7E,EAAAJ,EAAA,eAEc,SAAC8F,EAAyB9C,GAAmB,IAAA+C,EAC1D/F,EAAK8D,SAAS,CAAEsB,eAAgBpC,IAC5BhD,EAAKgG,WAAUhG,EAAKgG,SAAShD,cAAK+C,EAAG/C,aAAAA,EAAAA,EAAO4C,UAAE,IAAAG,EAAAA,EAAI,IACtD/F,EAAKF,MAAMmG,UAAYjG,EAAKF,MAAMmG,SAASjD,KAC5C5C,EAAAJ,EAAA,oBAEmB,SAAC8F,EAAyB9C,GAAiB,IAAAkD,EACvDlE,EAA+E,CAAEmE,WAAYnD,GACnG,GAAIA,aAAKkD,EAAKlG,EAAKgC,MAAMoD,sBAAc,IAAAc,OAAA,EAAzBA,EAA2BE,MAAzC,CAIA,IAAMC,EAAgBrD,EAAMsD,OAAOC,cAC7BC,EAAgBxG,EAAKgC,MAAMkB,QAAQuD,UAAU,SAACd,GAAK,IAAAe,EACvD,OAAaA,QAAbA,EAAOf,EAAES,gBAAIM,SAANA,EAAQJ,OAAOC,cAAcI,SAASN,EAC/C,IACIG,EAAgB,GAAuB,KAAlBH,KAAsBrE,EAAMkC,WAAa,cAClElE,EAAK8D,SAAS9B,EAAO,YACfwE,EAAgB,GAAuB,KAAlBH,IAAsBrG,EAAK2E,MAAMF,MAAM4B,EAClE,EARC,MAFCrG,EAAK8D,SAAS9B,KAWjB5B,EAAAJ,EAAA,iBAEgB,SAACkD,EAAclB,GAC9B,OAAOkB,EAAQ0D,OAAO,SAACjB,GAAK,IAAAkB,EACpB7D,EAAQhB,EAAMmE,WAAWI,cAC/B,OAAOZ,EAAEC,GAAGW,cAAcI,SAAS3D,KAAgB,QAAV6D,EAAIlB,EAAES,YAAI,IAAAS,OAAA,EAANA,EAAQN,cAAcI,SAAS3D,GAC9E,KACD5C,EAAAJ,EAAA,WAEU,WAAK,IAAA8G,EAAAC,EACd,OAAuBD,QAAvBA,EAAO9G,EAAKF,MAAMkH,aAAKF,IAAAA,EAAAA,EAAmB,QAAnBC,EAAI/G,EAAKF,MAAMmH,YAAI,IAAAF,OAAA,EAAfA,EAAiBG,aAC7C9G,EAAAJ,EAAA,kBAEiB,WAAK,IAAAmH,EAAAC,EAAAC,EACrB,GAAKrH,EAAKF,MAAMmH,KAChB,eAAAE,EAA+B,QAA/BC,EAAQpH,EAAKF,MAAMqF,oBAAYiC,IAAAA,EAAAA,UAAAC,EAAIrH,EAAKF,MAAMwH,YAAI,IAAAD,OAAA,EAAfA,EAAkBrH,EAAKF,MAAMmH,aAAK,IAAAE,OAAA,EAA9DA,EAAiED,aACzE9G,EAAAJ,EAAA,QAaO,WACNA,EAAK8D,SAAS,CAAEsB,eAAgB,KAAMe,WAAY,KAC9CnG,EAAKgG,WAAUhG,EAAKgG,SAAShD,MAAQ,MA7MzChD,EAAKgC,MAAQ,CACXkB,QAAS,GACTgB,WAAY,WACZkB,eAAgB,KAChBe,WAAY,GACZN,SAAS,GAEX7F,EAAK6D,WAA6B9D,QAAnBA,EAAGD,EAAM+D,kBAAU9D,IAAAA,EAAAA,EAAI,GAAEC,CAC1C,CAAC,OAAAuH,EAAA1H,EAdyB2H,GAczBC,EAAA5H,EAAA,CAAA,CAAAoC,IAAA,oBAAAe,MAED,WACEuB,KAAKhD,WACP,GAAC,CAAAU,IAAA,uBAAAe,MAED,WACEuB,KAAKI,MAAMC,OACb,GAAC,CAAA3C,IAAA,qBAAAe,MAED,SAAmB0E,GACmE,IAAAC,EAAhFC,KAAKC,UAAUH,EAAU7D,cAAgB+D,KAAKC,UAAUtD,KAAKzE,MAAM+D,cACrEU,KAAKV,WAAkC8D,QAAxBA,EAAGpD,KAAKzE,MAAM+D,kBAAU8D,IAAAA,EAAAA,EAAI,GAE/C,GAAC,CAAA1F,IAAA,SAAAe,MAED,WAAM,IAAA8E,EAAAC,EAAAC,EAAAC,EAAAC,EAAA3D,KACEY,EAAeZ,KAAKgB,kBACpB4C,EAAWC,EAAgB7D,KAAKzE,MAAMuI,cAAe9D,KAAKzE,MAAMmH,MAChEnF,EAAeyC,KAAK+D,yBAC1B,OACEC,EAACC,EAAoB,CAAA/H,UAAW8D,KAAKkE,iBACnC7H,SAAA,CAAAJ,EAACkI,EACC,CAAAC,SAAUpE,KAAKvC,MAAM6D,SAAWtB,KAAKzE,MAAM6I,SAC3CC,WAAS,EACTC,cAAetE,KAAKvC,MAAMkC,WAC1BhB,QAASqB,KAAKvC,MAAMkB,QACpB4F,eAAgB,SAACnD,GAAC,IAAAoD,EAAA,OAAW,QAAXA,EAAKpD,EAAES,YAAI,IAAA2C,EAAAA,EAAIpD,EAAEC,EAAE,EACrCoD,aAAc,SAACrD,GAAC,OAAKiC,KAAKC,UAAUlC,EAAE,EACtCsD,qBAAsB,SAACC,EAAGvF,GAAC,OAAKuF,EAAEtD,GAAGsB,aAAevD,EAAEiC,GAAGsB,YAAcgC,EAAE9C,OAASzC,EAAEyC,IAAI,EACxF+C,cAAe5E,KAAK6E,eACpBtH,aAAcA,EAEdkB,MAAOuB,KAAKvC,MAAMoD,eAClBa,SAAU1B,KAAK8E,aAEflD,WAAY5B,KAAKvC,MAAMmE,WACvBmD,cAAe/E,KAAKgF,kBACpBC,YAAa,SAAC5J,GAAM,IAAA6J,EAAA,OAClBjJ,EAACkJ,EAASrH,EAAAA,KACJzC,GAAM,GAAA,CACVoH,MAAOkB,EAAKyB,WACZC,MAAOzB,EAASyB,MAChBC,WAAY1B,EAAS2B,QACrBC,OAAQ,WACD7B,EAAKpI,MAAMmH,MAChBiB,EAAKpI,MAAMiK,QAAU7B,EAAKpI,MAAMiK,OAAO7B,EAAKpI,MAAMmH,KACpD,GACoBwC,QADnBA,EACGvB,EAAKpI,MAAM+B,aAAX4H,IAAgBA,OAAhBA,EAAAA,EAAkBO,gBACtB,IAGNxJ,EAAO,QAAA,CAAAyJ,IAAK,SAACA,GAAG,OAAM/B,EAAKlC,SAAWiE,CAAI,EAAEC,QAAO,EAAAjD,KAAqB,QAAjBa,EAAEvD,KAAKzE,MAAMmH,YAAXa,IAAeA,OAAfA,EAAAA,EAAiBZ,WAAY/B,aAAcA,aACnG4C,EAAIxD,KAACvC,MAAMoD,sBAAc,IAAA2C,OAAA,EAAzBA,EAA2BoC,QAC1B3J,WACE0J,QAAM,EACNjD,QAAImD,OAAoB,QAApBpC,EAAKzD,KAAKzE,MAAMmH,YAAXe,IAAeA,OAAfA,EAAAA,EAAiBd,WAAiB,SAE3C/B,aAAcyC,KAAKC,UAAUtD,KAAKvC,MAAMoD,eAAe+E,QADtB,UAA5B5F,KAAKvC,MAAMoD,eAAeQ,UAAEqC,IAAAA,EAAAA,EAAI,OAIxC1D,KAAK8F,kBAGZ,GAAC,CAAApI,IAAA,mBAAAe,MAwHD,SAAwEE,GAAsC,IACtGoH,EAAM,IAAIC,IADoE/F,UAAAgG,OAAA,QAAAC,IAAAjG,UAAA,GAAAA,UAAA,GAAsB,IAE1G,OAAOtB,EAAQwH,OAAY,SAACtG,EAAGuG,GAK7B,OAJKL,EAAIM,IAAID,EAAE/E,MACbxB,EAAEjD,KAAKwJ,GACPL,EAAIO,IAAIF,EAAE/E,KAELxB,CACR,EAAE,GACL,IAAC,IAOH,OAAOvE,CACT,CAGA,IAAMa,EAAuB,CAC3BQ,KAAM,qBACNX,QAAS,wBACTI,YAAa,6BAGTmK,EAAwB,SAAC7I,EAAwCiB,GACrE,MAAA,GAAAkH,QAAUlH,aAAAA,EAAAA,EAAS6H,SAAU,QAAEX,OAAI1J,EAAqBuB,IAAImI,QAAGlH,aAAAA,EAAAA,EAAS8H,SAAU,GACpF,EAEMxC,EAAsByC,EAAOC,EAAPD,CAAY,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,OAAAhL,EAAAA,EAAAA,EAC7C0K,CAAAA,EAAAA,EAAsB,OAAQ,CAAEE,OAAQ,MAAS,CAChDzI,MAAO,OACP8I,SAAU,aAEXP,EAAsB,eAAiB,CACtCO,SAAU,WACVC,IAAKF,EAAMG,QAAQ,MACnBC,MAAOJ,EAAMG,QAAQ,KACrBE,QAAS,OACTC,WAAY,SACZC,IAAKP,EAAMG,QAAQ,MAEpBT,EAAsB,UAAW,CAAEE,OAAQ,MAAS,CACnD,mDAAoD,CAClDQ,MAAOJ,EAAMG,QAAQ,OAExB"}
|
|
1
|
+
{"version":3,"file":"create.select-with-api.js","sources":["../../../src/form/create.select-with-api.tsx"],"sourcesContent":["// imports\r\nimport { Component } from 'react'\r\nimport { Autocomplete, Box, styled, TextField } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { ApiAlertContext } from '../api-context'\r\nimport { RichTooltip, HelpOutlinePulseIcon } from '../components/rich-tooltip'\r\n// types\r\nimport type { ComponentClass } from 'react'\r\nimport type { FilterOptionsState, TextFieldProps, AutocompleteRenderOptionState } from '@mui/material'\r\nimport type { IRichTooltipPanelConfig } from '../components/rich-tooltip'\r\n\r\nexport interface ISelectWithApiOption<TOther = any> {\r\n Id: string\r\n Name?: string\r\n Other?: TOther\r\n}\r\n\r\nexport interface ISelectWithApiPropsSlots<O extends ISelectWithApiOption = ISelectWithApiOption> {\r\n textFieldProps: TextFieldProps\r\n renderOption?: (props: React.HTMLAttributes<HTMLElement>, option: O, state: AutocompleteRenderOptionState) => React.ReactNode\r\n}\r\n\r\nexport type ISelectWithApiFetchData<O extends ISelectWithApiOption> = (value?: string, signal?: AbortSignal) => Promise<O[]>\r\n\r\nexport interface ISelectWithApiProps<T, O extends ISelectWithApiOption> extends IFormInputBase<T>, ISelectWithApiParams<O> {\r\n tooltip?: IRichTooltipPanelConfig\r\n onChange?: (value: O | null) => void\r\n existedIds?: string[]\r\n slots?: ISelectWithApiPropsSlots<O>\r\n}\r\n\r\nexport interface ISelectWithApiState<O extends ISelectWithApiOption> {\r\n options: O[]\r\n statusText?: string\r\n optionSelected: O | null\r\n inputValue: string\r\n loading?: boolean\r\n}\r\n\r\nexport interface ISelectWithApiParams<O extends ISelectWithApiOption> {\r\n fetchData?: ISelectWithApiFetchData<O>\r\n tooltip?: IRichTooltipPanelConfig\r\n renderOption?: (props: React.HTMLAttributes<HTMLElement>, option: O, state: AutocompleteRenderOptionState) => React.ReactNode\r\n}\r\n\r\nexport interface ISelectWithApiHandle {\r\n clear: () => void\r\n}\r\n\r\nfunction createSelectWithApi<T, O extends ISelectWithApiOption = ISelectWithApiOption>(params?: ISelectWithApiParams<O>) {\r\n class SelectWithApi extends Component<ISelectWithApiProps<T, O>, ISelectWithApiState<O>> implements ISelectWithApiHandle {\r\n abortController = { signalController: new AbortController() }\r\n refInput: HTMLInputElement | null = null\r\n existedIds: string[] = []\r\n constructor(props: ISelectWithApiProps<T, O>) {\r\n super(props)\r\n this.state = {\r\n options: [],\r\n statusText: 'no items',\r\n optionSelected: null,\r\n inputValue: '',\r\n loading: true\r\n }\r\n this.existedIds = props.existedIds ?? []\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchData()\r\n }\r\n\r\n componentWillUnmount(): void {\r\n this.timer.clear()\r\n }\r\n\r\n componentDidUpdate(prevProps: Readonly<ISelectWithApiProps<T, O>>): void {\r\n if (JSON.stringify(prevProps.existedIds) !== JSON.stringify(this.props.existedIds)) {\r\n this.existedIds = this.props.existedIds ?? []\r\n }\r\n }\r\n\r\n render() {\r\n const defaultValue = this.getDefaultValue()\r\n const eMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n const renderOption = this.getWrappedRenderOption()\r\n return (\r\n <SelectWithApiStyled className={this.getRootClasses()}>\r\n <Autocomplete\r\n disabled={this.state.loading || this.props.disabled}\r\n fullWidth\r\n noOptionsText={this.state.statusText}\r\n options={this.state.options}\r\n getOptionLabel={(x) => x.Name ?? x.Id}\r\n getOptionKey={(x) => JSON.stringify(x)}\r\n isOptionEqualToValue={(o, v) => o.Id.toString() === v.Id.toString() && o.Name === v.Name}\r\n filterOptions={this.fillterOptions}\r\n renderOption={renderOption}\r\n // select\r\n value={this.state.optionSelected}\r\n onChange={this.handleChange}\r\n // input\r\n inputValue={this.state.inputValue}\r\n onInputChange={this.handleInputChange}\r\n renderInput={(params) => (\r\n <TextField\r\n {...params}\r\n label={this.getLabel()}\r\n error={eMessage.error}\r\n helperText={eMessage.message}\r\n onBlur={() => {\r\n if (!this.props.name) return\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n }}\r\n {...this.props.slots?.textFieldProps}\r\n />\r\n )}\r\n />\r\n <input ref={(ref) => (this.refInput = ref)} hidden name={this.props.name?.toString()} defaultValue={defaultValue} />\r\n {this.state.optionSelected?.Other && (\r\n <input\r\n hidden\r\n name={`${this.props.name?.toString()}Other`}\r\n key={this.state.optionSelected.Id ?? 'key'}\r\n defaultValue={JSON.stringify(this.state.optionSelected.Other)}\r\n />\r\n )}\r\n {this.renderTooltip()}\r\n </SelectWithApiStyled>\r\n )\r\n }\r\n\r\n renderTooltip = () => {\r\n const tooltip = this.props.tooltip || params?.tooltip\r\n if (!tooltip) return null\r\n return (\r\n <div className={selectWithApiClasses.tooltipWrap}>\r\n <RichTooltip panel={tooltip}>\r\n <HelpOutlinePulseIcon fontSize='small' />\r\n </RichTooltip>\r\n </div>\r\n )\r\n }\r\n\r\n getRootClasses = () => {\r\n const classes = [selectWithApiClasses.root]\r\n const tooltip = this.props.tooltip || params?.tooltip\r\n if (tooltip) classes.push(selectWithApiClasses.tooltip)\r\n return classes.join(' ')\r\n }\r\n\r\n getFetchDataFunc = (): ISelectWithApiFetchData<O> => {\r\n return this.props.fetchData ?? params?.fetchData ?? (() => Promise.resolve([]))\r\n }\r\n\r\n getWrappedRenderOption = () => {\r\n const userRenderOption = this.props.slots?.renderOption ?? params?.renderOption\r\n if (!userRenderOption) return undefined\r\n\r\n return (props: any, option: O, state: AutocompleteRenderOptionState) => {\r\n const { key, ...propsWithoutKey } = props\r\n return (\r\n <li key={key} {...(propsWithoutKey as any)} style={{ width: '100%', boxSizing: 'border-box', ...propsWithoutKey.style }}>\r\n {userRenderOption(propsWithoutKey as React.HTMLAttributes<HTMLElement>, option, state)}\r\n </li>\r\n )\r\n }\r\n }\r\n\r\n timer = {\r\n _timer: 0,\r\n _second: 500,\r\n callback: async (value: string) => {\r\n try {\r\n this.abortController.signalController = new AbortController()\r\n const res = await this.getFetchDataFunc()(value, this.abortController.signalController.signal)\r\n const options = this.getOptionsFilter(res, this.existedIds)\r\n this.setState({ options })\r\n } catch (error) {\r\n // console.log(error)\r\n ApiAlertContext.ApiAlert?.PushError('Error from server!')\r\n } finally {\r\n this.setState({ statusText: 'no items' })\r\n }\r\n },\r\n start: (text: string) => {\r\n this.timer.clear()\r\n this.timer._timer = window.setTimeout(() => this.timer.callback(text), this.timer._second)\r\n },\r\n clear: () => {\r\n this.abortController.signalController.abort()\r\n clearTimeout(this.timer._timer)\r\n }\r\n }\r\n\r\n fetchData = async () => {\r\n try {\r\n const defaultValue = this.getDefaultValue()\r\n const res = await this.getFetchDataFunc()(defaultValue, this.abortController.signalController.signal)\r\n if (!Array.isArray(res)) return\r\n const options = this.getOptionsFilter(res, this.existedIds)\r\n const optionSelected = options.find((x) => x.Id === defaultValue) ?? null\r\n this.setState({ options, optionSelected, loading: false })\r\n return\r\n } catch (error) {\r\n // console.log(error)\r\n ApiAlertContext.ApiAlert?.PushError('Error from server!')\r\n } finally {\r\n this.setState({ statusText: 'no items', loading: false })\r\n }\r\n }\r\n\r\n handleChange = (_: React.SyntheticEvent, value: O | null) => {\r\n this.setState({ optionSelected: value })\r\n if (this.refInput) this.refInput.value = value?.Id ?? ''\r\n this.props.onChange && this.props.onChange(value)\r\n }\r\n\r\n handleInputChange = (_: React.SyntheticEvent, value: string) => {\r\n const state: Pick<ISelectWithApiState<O>, 'inputValue' | 'statusText' | 'loading'> = { inputValue: value }\r\n if (value === this.state.optionSelected?.Name) {\r\n this.setState(state)\r\n return\r\n }\r\n const valueFormated = value.trim().toLowerCase()\r\n const selectedIndex = this.state.options.findIndex((x) => {\r\n return x.Name?.trim().toLowerCase().includes(valueFormated)\r\n })\r\n if (selectedIndex < 0 || valueFormated === '') state.statusText = 'loading...'\r\n this.setState(state, () => {\r\n if (selectedIndex < 0 || valueFormated === '') this.timer.start(valueFormated)\r\n })\r\n }\r\n\r\n fillterOptions = (options: O[], state: FilterOptionsState<O>) => {\r\n return options.filter((x) => {\r\n const value = state.inputValue.toLowerCase()\r\n return x.Id.toLowerCase().includes(value) || x.Name?.toLowerCase().includes(value)\r\n })\r\n }\r\n\r\n getLabel = () => {\r\n return this.props.label ?? this.props.name?.toString()\r\n }\r\n\r\n getDefaultValue = () => {\r\n if (!this.props.name) return\r\n return (this.props.defaultValue ?? this.props.data?.[this.props.name])?.toString()\r\n }\r\n\r\n getOptionsFilter<O extends ISelectWithApiOption = ISelectWithApiOption>(options: O[], existedId: string[] = []): O[] {\r\n const ids = new Set<string | number>(existedId)\r\n return options.reduce<O[]>((a, b) => {\r\n if (!ids.has(b.Id)) {\r\n a.push(b)\r\n ids.add(b.Id)\r\n }\r\n return a\r\n }, [])\r\n }\r\n\r\n clear = () => {\r\n this.setState({ optionSelected: null, inputValue: '' })\r\n if (this.refInput) this.refInput.value = ''\r\n }\r\n }\r\n return SelectWithApi\r\n}\r\nexport default createSelectWithApi\r\n\r\nconst selectWithApiClasses = {\r\n root: 'SelectWithApi-root',\r\n tooltip: 'SelectWithApi-tooltip',\r\n tooltipWrap: 'SelectWithApi-tooltipWrap'\r\n}\r\n\r\nconst getSelectWithApiClass = (key: keyof typeof selectWithApiClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${selectWithApiClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nconst SelectWithApiStyled = styled(Box)(({ theme }) => ({\r\n [getSelectWithApiClass('root', { suffix: '&' })]: {\r\n width: '100%',\r\n position: 'relative'\r\n },\r\n [getSelectWithApiClass('tooltipWrap')]: {\r\n position: 'absolute',\r\n top: theme.spacing(2.25),\r\n right: theme.spacing(1.5),\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(0.5)\r\n },\r\n [getSelectWithApiClass('tooltip', { suffix: '&' })]: {\r\n '.MuiInputBase-root .MuiAutocomplete-endAdornment': {\r\n right: theme.spacing(4.5)\r\n }\r\n }\r\n}))\r\n"],"names":["createSelectWithApi","params","SelectWithApi","props","_props$existedIds","_this","_callback","_classCallCheck","_callSuper","_defineProperty","signalController","AbortController","tooltip","_jsx","className","selectWithApiClasses","tooltipWrap","children","RichTooltip","panel","HelpOutlinePulseIcon","fontSize","classes","root","push","join","_ref","_this$props$fetchData","fetchData","Promise","resolve","_this$props$slots$ren","_this$props$slots","userRenderOption","slots","renderOption","option","state","key","propsWithoutKey","_objectWithoutProperties","_excluded","_objectSpread","style","width","boxSizing","_timer","_second","callback","_asyncToGenerator","_regenerator","m","_callee","value","res","options","_ApiAlertContext$ApiA","w","_context","p","n","abortController","getFetchDataFunc","signal","v","getOptionsFilter","existedIds","setState","ApiAlertContext","ApiAlert","PushError","statusText","f","a","_x","apply","this","arguments","start","text","timer","clear","window","setTimeout","abort","clearTimeout","_callee2","_options$find","defaultValue","optionSelected","_ApiAlertContext$ApiA2","_context2","getDefaultValue","Array","isArray","find","x","Id","loading","_","_value$Id","refInput","onChange","_this$state$optionSel","inputValue","Name","valueFormated","trim","toLowerCase","selectedIndex","findIndex","_x$Name","includes","filter","_x$Name2","_this$props$label","_this$props$name","label","name","toString","_ref3","_this$props$defaultVa","_this$props$data","data","_inherits","Component","_createClass","prevProps","_this$props$existedId","JSON","stringify","_this$props$name2","_this$state$optionSel2","_this$props$name3","_this$state$optionSel3","_this2","eMessage","getErrorMessage","messageErrors","getWrappedRenderOption","_jsxs","SelectWithApiStyled","getRootClasses","Autocomplete","disabled","fullWidth","noOptionsText","getOptionLabel","_x$Name3","getOptionKey","isOptionEqualToValue","o","filterOptions","fillterOptions","handleChange","onInputChange","handleInputChange","renderInput","_this2$props$slots","TextField","getLabel","error","helperText","message","onBlur","textFieldProps","ref","hidden","Other","concat","renderTooltip","ids","Set","length","undefined","reduce","b","has","add","getSelectWithApiClass","prefix","suffix","styled","Box","_ref5","theme","position","top","spacing","right","display","alignItems","gap"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as o,objectSpread2 as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as e,jsx as
|
|
1
|
+
import{defineProperty as o,objectSpread2 as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import{styled as r,Paper as n,IconButton as a,colors as s,Box as c,Tooltip as p,Typography as d}from"@mui/material";import u from"@mui/icons-material/Close";import v from"@mui/icons-material/ChevronLeft";import{mapGlobalModalContext as m}from"../api-context/global-modal.js";var f=function(o){return m(function(r){var n,a,s,m,f,w,C,k,H,P,z,j=[h.root,null===(n=o.slots)||void 0===n||null===(n=n.wrapProps)||void 0===n?void 0:n.className];o.fullHeight&&j.push(h.fullHeight);var S,W=[h.topBar,null===(a=o.slots)||void 0===a||null===(a=a.topBarProps)||void 0===a?void 0:a.className].filter(Boolean).join(" ");return e(x,l(l({size:o.size},null===(s=o.slots)||void 0===s?void 0:s.wrapProps),{},{className:j.filter(Boolean).join(" "),children:[e(B,l(l({},null===(m=o.slots)||void 0===m?void 0:m.topBarProps),{},{className:W,children:[Boolean(o.enableBackButton)&&i(p,{title:"Back",placement:"top",arrow:!0,children:i(b,l(l({onClick:o.onBackClick},null===(f=o.slots)||void 0===f?void 0:f.iconBackProps),{},{children:i(v,{fontSize:null!==(w=null===(C=o.slots)||void 0===C?void 0:C.iconSize)&&void 0!==w?w:"medium"})}))}),(null===(k=o.slots)||void 0===k?void 0:k.beforeTitle)&&e(t,{children:[o.slots.beforeTitle,i(c,{flex:1})]}),(S=o.title,"string"==typeof S?i(d,{component:"h3",variant:"subtitle1",sx:{mt:"2px",ml:"8px",fontWeight:700},children:S}):S),i(c,{flex:1}),!1!==o.enableCloseButton&&i(p,{title:"Close",placement:"top",arrow:!0,children:i(g,l(l({onClick:function(l){o.onCloseClick&&o.onCloseClick(l),r.close()}},null===(H=o.slots)||void 0===H?void 0:H.iconCloseProps),{},{children:i(u,{fontSize:null!==(P=null===(z=o.slots)||void 0===z?void 0:z.iconSize)&&void 0!==P?P:"medium"})}))})]})),i("div",{className:h.content,children:o.children})]}))})},h={root:"Dino-ModalWrapper-root",topBar:"Dino-ModalWrapper-topBar",content:"Dino-ModalWrapper-content",fullHeight:"Dino-ModalWrapper-fullHeight"},x=r(n)(function(l){var e=l.theme,i=l.size;return o(o(o({maxHeight:"calc(100vh - 24px)",overflow:"hidden",display:"flex",flexDirection:"column",position:"relative",maxWidth:"calc(100vw - 24px)",width:e.breakpoints.values[null!=i?i:"lg"]},e.breakpoints.down("sm"),{width:"calc(100vw - 24px)"}),"&.".concat(h.fullHeight),{height:"calc(100vh - 24px)"}),".".concat(h.content),{overflowY:"auto",flex:"1 1 auto",minHeight:0})}),g=r(a)({flex:"0 0 auto",color:"#3c3c3c","& svg":{transition:"all 0.2s"},"&:hover svg":{color:s.red[600],transform:"rotate(90deg)"}}),b=r(a)({flex:"0 0 auto",color:"#3c3c3c","& svg":{transition:"all 0.2s"},"&:hover svg":{color:s.blue[600],transform:"scale(1.2)"}}),B=r(c)(function(o){return{height:"var(--dino-h-top-bar, 48px)",display:"flex",alignItems:"center",padding:o.theme.spacing(0,1),flex:"0 0 auto",boxShadow:"rgba(145, 158, 171, 0.1) 0px 0px 2px 0px,rgba(145, 158, 171, 0.12) 0px 0px 24px -4px"}});export{f as default};
|
|
2
2
|
//# sourceMappingURL=modal-wrapper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-wrapper.js","sources":["../../../src/form/modal-wrapper.tsx"],"sourcesContent":["import { FC, PropsWithChildren, ReactNode } from 'react'\r\nimport { Box, Breakpoint, colors, IconButton, Paper, styled, Tooltip, Typography } from '@mui/material'\r\nimport CloseIcon from '@mui/icons-material/Close'\r\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft'\r\nimport { mapGlobalModalContext } from '../api-context'\r\nimport type { BoxProps, IconButtonProps, PaperProps } from '@mui/material'\r\n\r\nexport interface IFormModalWrapperProps extends PropsWithChildren {\r\n title: ReactNode\r\n size?: Breakpoint\r\n fullHeight?: boolean\r\n onCloseClick?: IconButtonProps['onClick']\r\n onBackClick?: IconButtonProps['onClick']\r\n enableCloseButton?: boolean\r\n enableBackButton?: boolean\r\n slots?: {\r\n wrapProps?: Partial<PaperProps>\r\n topBarProps?: BoxProps\r\n beforeTitle?: JSX.Element\r\n iconSize?: 'small' | 'medium' | 'large'\r\n iconBackProps?: Partial<IconButtonProps>\r\n iconCloseProps?: Partial<IconButtonProps>\r\n }\r\n}\r\n\r\nconst FormModalWrapper: FC<IFormModalWrapperProps> = (props) => {\r\n const renderTitle = () => {\r\n const { title } = props\r\n if (typeof title === 'string') {\r\n return (\r\n <Typography component='h3' variant='subtitle1' sx={{ mt: '2px', ml: '8px', fontWeight: 700 }}>\r\n {title}\r\n </Typography>\r\n )\r\n }\r\n return title\r\n }\r\n\r\n return mapGlobalModalContext((context) => {\r\n const rootClasses = [modalWrapperClasses.root, props.slots?.wrapProps?.className]\r\n if (props.fullHeight) rootClasses.push(modalWrapperClasses.fullHeight)\r\n\r\n const topBarClasses = [modalWrapperClasses.topBar, props.slots?.topBarProps?.className].filter(Boolean).join(' ')\r\n return (\r\n <ModalWrapperStyled size={props.size} {...props.slots?.wrapProps} className={rootClasses.filter(Boolean).join(' ')}>\r\n <TopBar {...props.slots?.topBarProps} className={topBarClasses}>\r\n {Boolean(props.enableBackButton) && (\r\n <Tooltip title='Back' placement='top' arrow>\r\n <BtnBack onClick={props.onBackClick} {...props.slots?.iconBackProps}>\r\n <ChevronLeftIcon fontSize={props.slots?.iconSize ?? 'medium'} />\r\n </BtnBack>\r\n </Tooltip>\r\n )}\r\n {props.slots?.beforeTitle && (\r\n <>\r\n {props.slots.beforeTitle}\r\n <Box flex={1} />\r\n </>\r\n )}\r\n {renderTitle()}\r\n <Box flex={1} />\r\n {props.enableCloseButton !== false && (\r\n <Tooltip title='Close' placement='top' arrow>\r\n <BtnClose\r\n onClick={(e) => {\r\n props.onCloseClick && props.onCloseClick(e)\r\n context.close()\r\n }}\r\n {...props.slots?.iconCloseProps}\r\n >\r\n <CloseIcon fontSize={props.slots?.iconSize ?? 'medium'} />\r\n </BtnClose>\r\n </Tooltip>\r\n )}\r\n </TopBar>\r\n <div className={modalWrapperClasses.content}>{props.children}</div>\r\n </ModalWrapperStyled>\r\n )\r\n })\r\n}\r\nexport default FormModalWrapper\r\n\r\nconst modalWrapperClasses = {\r\n root: 'Dino-ModalWrapper-root',\r\n topBar: 'Dino-ModalWrapper-topBar',\r\n content: 'Dino-ModalWrapper-content',\r\n fullHeight: 'Dino-ModalWrapper-fullHeight'\r\n}\r\n\r\nconst ModalWrapperStyled = styled(Paper)<{ size?: Breakpoint }>(({ theme, size }) => ({\r\n maxHeight: 'calc(100vh - 24px)',\r\n overflow: 'hidden',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n position: 'relative',\r\n maxWidth: 'calc(100vw - 24px)',\r\n width: theme.breakpoints.values[size ?? 'lg'],\r\n [theme.breakpoints.down('sm')]: { width: 'calc(100vw - 24px)' },\r\n [`&.${modalWrapperClasses.fullHeight}`]: { height: 'calc(100vh - 24px)' },\r\n [`.${modalWrapperClasses.content}`]: {\r\n overflowY: 'auto',\r\n flex: '1 1 auto',\r\n minHeight: 0\r\n }\r\n}))\r\n\r\nconst BtnClose = styled(IconButton)({\r\n flex: '0 0 auto',\r\n color: '#3c3c3c',\r\n '& svg': { transition: 'all 0.2s' },\r\n '&:hover svg': { color: colors.red[600], transform: 'rotate(90deg)' }\r\n})\r\n\r\nconst BtnBack = styled(IconButton)({\r\n flex: '0 0 auto',\r\n color: '#3c3c3c',\r\n '& svg': { transition: 'all 0.2s' },\r\n '&:hover svg': { color: colors.blue[600], transform: 'scale(1.2)' }\r\n})\r\n\r\nconst TopBar = styled(Box)(({ theme }) => ({\r\n height: 'var(--dino-h-top-bar, 48px)',\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: theme.spacing(0, 1),\r\n flex: '0 0 auto',\r\n boxShadow: 'rgba(145, 158, 171, 0.1) 0px 0px 2px 0px,rgba(145, 158, 171, 0.12) 0px 0px 24px -4px'\r\n}))\r\n"],"names":["FormModalWrapper","props","mapGlobalModalContext","context","_props$slots","_props$slots2","_props$slots3","_props$slots4","_props$slots5","_props$slots$iconSize","_props$slots6","_props$slots7","_props$slots8","_props$slots$iconSize2","_props$slots9","rootClasses","modalWrapperClasses","root","slots","wrapProps","className","fullHeight","push","title","topBarClasses","topBar","topBarProps","filter","Boolean","join","_jsxs","ModalWrapperStyled","_objectSpread","size","children","TopBar","enableBackButton","_jsx","Tooltip","placement","arrow","BtnBack","onClick","onBackClick","iconBackProps","ChevronLeftIcon","fontSize","iconSize","beforeTitle","_Fragment","Box","flex","Typography","component","variant","sx","mt","ml","fontWeight","enableCloseButton","BtnClose","e","onCloseClick","close","iconCloseProps","CloseIcon","content","styled","Paper","_ref","theme","_defineProperty","maxHeight","overflow","display","flexDirection","position","maxWidth","width","breakpoints","values","down","concat","height","overflowY","minHeight","IconButton","color","transition","colors","red","transform","blue","_ref3","alignItems","padding","spacing","boxShadow"],"mappings":"
|
|
1
|
+
{"version":3,"file":"modal-wrapper.js","sources":["../../../src/form/modal-wrapper.tsx"],"sourcesContent":["import { FC, PropsWithChildren, ReactNode } from 'react'\r\nimport { Box, Breakpoint, colors, IconButton, Paper, styled, Tooltip, Typography } from '@mui/material'\r\nimport CloseIcon from '@mui/icons-material/Close'\r\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft'\r\nimport { mapGlobalModalContext } from '../api-context'\r\nimport type { BoxProps, IconButtonProps, PaperProps } from '@mui/material'\r\n\r\nexport interface IFormModalWrapperProps extends PropsWithChildren {\r\n title: ReactNode\r\n size?: Breakpoint\r\n fullHeight?: boolean\r\n onCloseClick?: IconButtonProps['onClick']\r\n onBackClick?: IconButtonProps['onClick']\r\n enableCloseButton?: boolean\r\n enableBackButton?: boolean\r\n slots?: {\r\n wrapProps?: Partial<PaperProps>\r\n topBarProps?: BoxProps\r\n beforeTitle?: JSX.Element\r\n iconSize?: 'small' | 'medium' | 'large'\r\n iconBackProps?: Partial<IconButtonProps>\r\n iconCloseProps?: Partial<IconButtonProps>\r\n }\r\n}\r\n\r\nconst FormModalWrapper: FC<IFormModalWrapperProps> = (props) => {\r\n const renderTitle = () => {\r\n const { title } = props\r\n if (typeof title === 'string') {\r\n return (\r\n <Typography component='h3' variant='subtitle1' sx={{ mt: '2px', ml: '8px', fontWeight: 700 }}>\r\n {title}\r\n </Typography>\r\n )\r\n }\r\n return title\r\n }\r\n\r\n return mapGlobalModalContext((context) => {\r\n const rootClasses = [modalWrapperClasses.root, props.slots?.wrapProps?.className]\r\n if (props.fullHeight) rootClasses.push(modalWrapperClasses.fullHeight)\r\n\r\n const topBarClasses = [modalWrapperClasses.topBar, props.slots?.topBarProps?.className].filter(Boolean).join(' ')\r\n return (\r\n <ModalWrapperStyled size={props.size} {...props.slots?.wrapProps} className={rootClasses.filter(Boolean).join(' ')}>\r\n <TopBar {...props.slots?.topBarProps} className={topBarClasses}>\r\n {Boolean(props.enableBackButton) && (\r\n <Tooltip title='Back' placement='top' arrow>\r\n <BtnBack onClick={props.onBackClick} {...props.slots?.iconBackProps}>\r\n <ChevronLeftIcon fontSize={props.slots?.iconSize ?? 'medium'} />\r\n </BtnBack>\r\n </Tooltip>\r\n )}\r\n {props.slots?.beforeTitle && (\r\n <>\r\n {props.slots.beforeTitle}\r\n <Box flex={1} />\r\n </>\r\n )}\r\n {renderTitle()}\r\n <Box flex={1} />\r\n {props.enableCloseButton !== false && (\r\n <Tooltip title='Close' placement='top' arrow>\r\n <BtnClose\r\n onClick={(e) => {\r\n props.onCloseClick && props.onCloseClick(e)\r\n context.close()\r\n }}\r\n {...props.slots?.iconCloseProps}\r\n >\r\n <CloseIcon fontSize={props.slots?.iconSize ?? 'medium'} />\r\n </BtnClose>\r\n </Tooltip>\r\n )}\r\n </TopBar>\r\n <div className={modalWrapperClasses.content}>{props.children}</div>\r\n </ModalWrapperStyled>\r\n )\r\n })\r\n}\r\nexport default FormModalWrapper\r\n\r\nconst modalWrapperClasses = {\r\n root: 'Dino-ModalWrapper-root',\r\n topBar: 'Dino-ModalWrapper-topBar',\r\n content: 'Dino-ModalWrapper-content',\r\n fullHeight: 'Dino-ModalWrapper-fullHeight'\r\n}\r\n\r\nconst ModalWrapperStyled = styled(Paper)<{ size?: Breakpoint }>(({ theme, size }) => ({\r\n maxHeight: 'calc(100vh - 24px)',\r\n overflow: 'hidden',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n position: 'relative',\r\n maxWidth: 'calc(100vw - 24px)',\r\n width: theme.breakpoints.values[size ?? 'lg'],\r\n [theme.breakpoints.down('sm')]: { width: 'calc(100vw - 24px)' },\r\n [`&.${modalWrapperClasses.fullHeight}`]: { height: 'calc(100vh - 24px)' },\r\n [`.${modalWrapperClasses.content}`]: {\r\n overflowY: 'auto',\r\n flex: '1 1 auto',\r\n minHeight: 0\r\n }\r\n}))\r\n\r\nconst BtnClose = styled(IconButton)({\r\n flex: '0 0 auto',\r\n color: '#3c3c3c',\r\n '& svg': { transition: 'all 0.2s' },\r\n '&:hover svg': { color: colors.red[600], transform: 'rotate(90deg)' }\r\n})\r\n\r\nconst BtnBack = styled(IconButton)({\r\n flex: '0 0 auto',\r\n color: '#3c3c3c',\r\n '& svg': { transition: 'all 0.2s' },\r\n '&:hover svg': { color: colors.blue[600], transform: 'scale(1.2)' }\r\n})\r\n\r\nconst TopBar = styled(Box)(({ theme }) => ({\r\n height: 'var(--dino-h-top-bar, 48px)',\r\n display: 'flex',\r\n alignItems: 'center',\r\n padding: theme.spacing(0, 1),\r\n flex: '0 0 auto',\r\n boxShadow: 'rgba(145, 158, 171, 0.1) 0px 0px 2px 0px,rgba(145, 158, 171, 0.12) 0px 0px 24px -4px'\r\n}))\r\n"],"names":["FormModalWrapper","props","mapGlobalModalContext","context","_props$slots","_props$slots2","_props$slots3","_props$slots4","_props$slots5","_props$slots$iconSize","_props$slots6","_props$slots7","_props$slots8","_props$slots$iconSize2","_props$slots9","rootClasses","modalWrapperClasses","root","slots","wrapProps","className","fullHeight","push","title","topBarClasses","topBar","topBarProps","filter","Boolean","join","_jsxs","ModalWrapperStyled","_objectSpread","size","children","TopBar","enableBackButton","_jsx","Tooltip","placement","arrow","BtnBack","onClick","onBackClick","iconBackProps","ChevronLeftIcon","fontSize","iconSize","beforeTitle","_Fragment","Box","flex","Typography","component","variant","sx","mt","ml","fontWeight","enableCloseButton","BtnClose","e","onCloseClick","close","iconCloseProps","CloseIcon","content","styled","Paper","_ref","theme","_defineProperty","maxHeight","overflow","display","flexDirection","position","maxWidth","width","breakpoints","values","down","concat","height","overflowY","minHeight","IconButton","color","transition","colors","red","transform","blue","_ref3","alignItems","padding","spacing","boxShadow"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as e,createClass as o,objectSpread2 as r,classCallCheck as i,callSuper as a,defineProperty as t,toConsumableArray as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n}from"react/jsx-runtime";import{Component as s,Fragment as d}from"react";import{DataGrid as u}from"@mui/x-data-grid";import{mergeObjects as p}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";import{TableBaseContext as
|
|
1
|
+
import{inherits as e,createClass as o,objectSpread2 as r,classCallCheck as i,callSuper as a,defineProperty as t,toConsumableArray as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n}from"react/jsx-runtime";import{Component as s,Fragment as d}from"react";import{DataGrid as u}from"@mui/x-data-grid";import{mergeObjects as p}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";import{TableBaseContext as g}from"./context.js";import{customFilterOperators as m}from"./custom.filter-operators.js";import c from"./helpers.js";import f from"./toolbar-pannel.js";import{dinoTableClasses as h,TableStyled as v}from"./styled.js";import{GlobalModal as b,mapGlobalModalContext as y}from"../api-context/global-modal.js";function C(C){return function(){function P(e){var o;return i(this,P),o=a(this,P,[e]),t(o,"setTableQueryParams",function(e){o.tableQueryParams=p({},o.tableQueryParams,e)}),t(o,"renderWrapContext",function(e){var o=C.disableGlobalModalProvider?d:b;return n(o,{children:y(function(o){return n(g.Provider,{value:{showModal:o.show,closeModal:o.close},children:e})})})}),t(o,"getDataGridProps",function(){var e,r,i,a,t=c.mapInitialState(o.props.query,{columns:{columnVisibilityModel:C.columnVisibilityModel}}),l={getRowId:C.getRowId,initialState:t,columns:o.columns,rows:null!==(e=null===(r=o.props.data)||void 0===r?void 0:r.items)&&void 0!==e?e:[],checkboxSelection:!0,pagination:!0,density:null!==(i=null===(a=o.props.slots)||void 0===a?void 0:a.density)&&void 0!==i?i:"standard",filterDebounceMs:800,sx:{border:0},slots:{toolbar:o.mergeConfig.toolbar},rowSelectionModel:o.rowSelecteds,onRowSelectionModelChange:o.handleRowSelectionChange};if("server"===C.featureMode){var n,s,d={filterMode:"server",sortingMode:"server",paginationMode:"server",onPaginationModelChange:o.onPaginationModelChange,onFilterModelChange:o.onFilterModelChange,onSortModelChange:o.onSortModelChange,rowCount:null!==(n=null===(s=o.props.data)||void 0===s?void 0:s.rowTotal)&&void 0!==n?n:0,paginationModel:o.tableQueryParams.pagination,filterModel:o.tableQueryParams.filter,sortModel:c.mapSortModel(o.tableQueryParams.sort),loading:o.mergeConfig.loading};Object.assign(l,d)}return p(l,o.mergeConfig.dataGridProps)}),t(o,"initialColumns",function(){var e,i,a=o.mergeConfig,t=a.ActionRow,s=a.disableActionRow,d=[];return t&&!0!==s&&d.push(r({field:"Actions",minWidth:100,headerAlign:"right",align:"right",filterable:!1,sortable:!1,disableExport:!0,renderCell:function(e){return n(t,{value:e.row})}},C.actionRow)),e=d,i=Object.keys(C.columns).map(function(e){var o=r({field:e},C.columns[e]);return o.filterOperators=C.filterOperators?C.filterOperators(o):m(o),o}),e&&e.length>0&&i.push.apply(i,l(e)),i}),t(o,"onPaginationModelChange",function(e,r){o.mergeConfig.loading||(o.setTableQueryParams({pagination:e,detail:"pagination"}),o.handleChange())}),t(o,"onFilterModelChange",function(e,r){var i;if(!o.mergeConfig.loading){var a=o.tableQueryParams.pagination;o.setTableQueryParams({filter:e,pagination:{page:0,pageSize:null!==(i=null==a?void 0:a.pageSize)&&void 0!==i?i:25},detail:c.detectSearchType(e)}),o.handleChange()}}),t(o,"onSortModelChange",function(e,r){if(!o.mergeConfig.loading){var i,a,t,l,n,s=e,d=o.tableQueryParams.sort;if(null!=d&&d.length&&!s.length)if((null==d||null===(i=d[0])||void 0===i?void 0:i.field)===(null===(a=o.defaultTableQueryParams.sort)||void 0===a||null===(a=a[0])||void 0===a?void 0:a.field))s=[{field:null===(t=d[0])||void 0===t?void 0:t.field,sort:"desc"===(null===(l=d[0])||void 0===l?void 0:l.sort)?"asc":"desc"}];else s=null!==(n=o.defaultTableQueryParams.sort)&&void 0!==n?n:[];o.setTableQueryParams({sort:s,detail:"sort"}),o.handleChange()}}),t(o,"handleChange",function(){o.changeTimeout&&clearTimeout(o.changeTimeout),o.changeTimeout=setTimeout(function(){o.props.onChange&&o.props.onChange(o.tableQueryParams)},300)}),t(o,"handleRowSelectionChange",function(e,r){o.mergeConfig.maxSelcion&&e.length>o.mergeConfig.maxSelcion?o.rowSelecteds=e.slice(0,o.mergeConfig.maxSelcion):o.rowSelecteds=e,o.props.onRowSelectionChange&&o.props.onRowSelectionChange(o.rowSelecteds,r),o.forceUpdate()}),o.columns=o.initialColumns(),o.tableQueryParams=r({},e.query),o.defaultTableQueryParams=o.tableQueryParams,o.rowSelecteds=[],o}return e(P,s),o(P,[{key:"mergeConfig",get:function(){var e,o,i,a,t,l,s,d,u,g,m=p({},null==C?void 0:C.toolbarProps,null===(e=this.props.slots)||void 0===e?void 0:e.toolbarProps);return{toolbar:null!==(o=null===(i=this.props.slots)||void 0===i?void 0:i.toolbar)&&void 0!==o?o:function(){return n(f,r({},m))},ActionRow:null===(a=this.props.slots)||void 0===a?void 0:a.actionRow,disableActionRow:C.disableActionRow,columnVisibilityModel:C.columnVisibilityModel,maxSelcion:null!==(t=null===(l=this.props.slots)||void 0===l?void 0:l.maxSelection)&&void 0!==t?t:C.maxSelection,dataGridProps:p({},C.dataGridProps,null===(s=this.props.slots)||void 0===s?void 0:s.dataGridProps),wrapProps:p({},C.wrapProps,null===(d=this.props.slots)||void 0===d?void 0:d.wrapProps),loading:null!==(u=void 0!==this.props.loading?this.props.loading:null===(g=this.tableQueryParams)||void 0===g?void 0:g.loading)&&void 0!==u&&u}}},{key:"componentWillUnmount",value:function(){this.changeTimeout&&clearTimeout(this.changeTimeout)}},{key:"shouldComponentUpdate",value:function(e){var o;return"server"!==C.featureMode||(c.equalTableQueryParams(e.query,this.props.query)?JSON.stringify(e.data)!==JSON.stringify(this.props.data)||e.loading!==this.props.loading:(this.setTableQueryParams(null!==(o=e.query)&&void 0!==o?o:{}),!0))}},{key:"render",value:function(){var e,o=[h.root,null===(e=this.mergeConfig.wrapProps)||void 0===e?void 0:e.className];return this.renderWrapContext(n(v,r(r({},this.mergeConfig.wrapProps),{},{className:o.filter(function(e){return!!e}).join(" "),children:n(u,r({loading:this.props.loading},this.getDataGridProps()))})))}}])}()}export{C as CreateTable,C as default};
|
|
2
2
|
//# sourceMappingURL=create.table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.table.js","sources":["../../../src/table/create.table.tsx"],"sourcesContent":["import { Component, Fragment } from 'react'\r\nimport { Box, BoxProps, styled } from '@mui/material'\r\nimport { DataGrid, DataGridProps, GridColDef, GridFeatureMode, GridFilterOperator } from '@mui/x-data-grid'\r\nimport { GridSortModel, GridValidRowModel, GridRowIdGetter, GridRowSelectionModel } from '@mui/x-data-grid'\r\nimport { GridCallbackDetails, GridColumnVisibilityModel, GridDensity, GridFilterModel, GridPaginationModel } from '@mui/x-data-grid'\r\nimport type { ComponentType, ReactNode } from 'react'\r\nimport { mergeObjects } from '../utils'\r\nimport { TableBaseContext } from './context'\r\nimport { IActionRowProps } from './create.action-row'\r\nimport { customFilterOperators } from './custom.filter-operators'\r\nimport { GlobalModal, mapGlobalModalContext } from '../api-context'\r\nimport { ICustomGridColDef, ICustomGridFilterModel, ICustomGridSortModel, ITableData, ITableQueryParams } from './types'\r\nimport TableHelper from './helpers'\r\nimport ToolbarPannel, { IToolbarPannelProps } from './toolbar-pannel'\r\nimport { dinoTableClasses, TableStyled } from './styled'\r\n\r\nexport interface ITableSlots<T> {\r\n maxSelection?: number\r\n density?: GridDensity\r\n toolbar?: ComponentType<IToolbarPannelProps>\r\n actionRow?: ComponentType<IActionRowProps<T>>\r\n toolbarProps?: IToolbarPannelProps\r\n dataGridProps?: DataGridProps\r\n wrapProps?: BoxProps\r\n}\r\n\r\nexport type ITableParamsSlots<T> = Pick<ITableSlots<T>, 'maxSelection' | 'toolbarProps' | 'dataGridProps' | 'wrapProps'>\r\n\r\nexport interface ITableProps<T> {\r\n data?: ITableData<T>\r\n query?: ITableQueryParams<T>\r\n loading?: boolean\r\n onChange?: (query: ITableQueryParams<T>) => void\r\n onRowSelectionChange?: DataGridProps['onRowSelectionModelChange']\r\n slots?: ITableSlots<T>\r\n}\r\n\r\nexport interface ITableParams<T extends GridValidRowModel> extends ITableParamsSlots<T> {\r\n featureMode?: GridFeatureMode\r\n getRowId: GridRowIdGetter<T>\r\n columns: ICustomGridColDef<T>\r\n filterOperators?: (config: GridColDef) => GridFilterOperator[]\r\n columnVisibilityModel?: Partial<Record<keyof T, boolean>>\r\n actionRow?: Omit<GridColDef, 'field'>\r\n disableActionRow?: boolean\r\n disableGlobalModalProvider?: boolean\r\n}\r\n\r\nexport function CreateTable<T extends GridValidRowModel>(params: ITableParams<T>): ComponentType<ITableProps<T>> {\r\n const generateColumns = (extendColDefs?: GridColDef[]) => {\r\n const columns = Object.keys(params.columns).map<GridColDef>((key) => {\r\n const obj = { field: key, ...params.columns[key] }\r\n obj.filterOperators = params.filterOperators ? params.filterOperators(obj) : customFilterOperators(obj)\r\n return obj\r\n })\r\n\r\n if (!!extendColDefs && extendColDefs.length > 0) columns.push(...extendColDefs)\r\n return columns\r\n }\r\n\r\n class Table extends Component<ITableProps<T>> {\r\n private tableQueryParams: ITableQueryParams<T>\r\n // private tableQueryParamsCache: ITableQueryParams<T> = {}\r\n private defaultTableQueryParams: ITableQueryParams<T>\r\n private columns: GridColDef<T>[]\r\n private rowSelecteds: GridRowSelectionModel\r\n private changeTimeout?: ReturnType<typeof setTimeout>\r\n constructor(props: ITableProps<T>) {\r\n super(props)\r\n this.columns = this.initialColumns()\r\n this.tableQueryParams = { ...props.query }\r\n this.defaultTableQueryParams = this.tableQueryParams\r\n this.rowSelecteds = []\r\n }\r\n\r\n get mergeConfig() {\r\n const toolbarPannelProps = mergeObjects({}, params?.toolbarProps, this.props.slots?.toolbarProps)\r\n return {\r\n toolbar: this.props.slots?.toolbar ?? (() => <ToolbarPannel {...toolbarPannelProps} />),\r\n ActionRow: this.props.slots?.actionRow,\r\n disableActionRow: params.disableActionRow,\r\n columnVisibilityModel: params.columnVisibilityModel,\r\n maxSelcion: this.props.slots?.maxSelection ?? params.maxSelection,\r\n dataGridProps: mergeObjects({}, params.dataGridProps, this.props.slots?.dataGridProps),\r\n wrapProps: mergeObjects({}, params.wrapProps, this.props.slots?.wrapProps),\r\n loading: (this.props.loading !== undefined ? this.props.loading : this.tableQueryParams?.loading) ?? false\r\n }\r\n }\r\n\r\n setTableQueryParams = (value: Partial<ITableQueryParams<T>>) => {\r\n this.tableQueryParams = mergeObjects({}, this.tableQueryParams, value)\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.changeTimeout) {\r\n clearTimeout(this.changeTimeout)\r\n }\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<ITableProps<T>>): boolean {\r\n if (params.featureMode === 'server') {\r\n // Check if query changed\r\n if (!TableHelper.equalTableQueryParams(nextProps.query, this.props.query)) {\r\n this.setTableQueryParams(nextProps.query ?? {})\r\n return true\r\n }\r\n // Check if data or loading changed\r\n if (JSON.stringify(nextProps.data) !== JSON.stringify(this.props.data) || nextProps.loading !== this.props.loading) {\r\n return true\r\n }\r\n return false\r\n } else {\r\n return true\r\n }\r\n }\r\n\r\n render() {\r\n const rootClasses = [dinoTableClasses.root, this.mergeConfig.wrapProps?.className]\r\n return this.renderWrapContext(\r\n <TableStyled {...this.mergeConfig.wrapProps} className={rootClasses.filter((x) => !!x).join(' ')}>\r\n <DataGrid loading={this.props.loading} {...this.getDataGridProps()} />\r\n </TableStyled>\r\n )\r\n }\r\n\r\n renderWrapContext = (children: ReactNode) => {\r\n const WrapComponent = params.disableGlobalModalProvider ? Fragment : GlobalModal\r\n return (\r\n <WrapComponent>\r\n {mapGlobalModalContext((context) => (\r\n <TableBaseContext.Provider value={{ showModal: context.show, closeModal: context.close }}>{children}</TableBaseContext.Provider>\r\n ))}\r\n </WrapComponent>\r\n )\r\n }\r\n\r\n getDataGridProps = (): DataGridProps<T> => {\r\n const initialState = TableHelper.mapInitialState(this.props.query, {\r\n columns: { columnVisibilityModel: params.columnVisibilityModel as GridColumnVisibilityModel }\r\n })\r\n const obj: DataGridProps<T> = {\r\n getRowId: params.getRowId,\r\n initialState,\r\n columns: this.columns,\r\n rows: this.props.data?.items ?? [],\r\n checkboxSelection: true,\r\n pagination: true,\r\n density: this.props.slots?.density ?? 'standard',\r\n filterDebounceMs: 800,\r\n sx: { border: 0 },\r\n slots: { toolbar: this.mergeConfig.toolbar },\r\n rowSelectionModel: this.rowSelecteds,\r\n onRowSelectionModelChange: this.handleRowSelectionChange\r\n }\r\n if (params.featureMode === 'server') {\r\n const objServer: Partial<DataGridProps<T>> = {\r\n filterMode: 'server',\r\n sortingMode: 'server',\r\n paginationMode: 'server',\r\n onPaginationModelChange: this.onPaginationModelChange,\r\n onFilterModelChange: this.onFilterModelChange,\r\n onSortModelChange: this.onSortModelChange,\r\n rowCount: this.props.data?.rowTotal ?? 0,\r\n paginationModel: this.tableQueryParams.pagination,\r\n filterModel: this.tableQueryParams.filter as GridFilterModel,\r\n sortModel: TableHelper.mapSortModel(this.tableQueryParams.sort),\r\n loading: this.mergeConfig.loading\r\n }\r\n Object.assign(obj, objServer)\r\n }\r\n return mergeObjects(obj, this.mergeConfig.dataGridProps)\r\n }\r\n\r\n initialColumns = (): GridColDef<T>[] => {\r\n const { ActionRow, disableActionRow } = this.mergeConfig\r\n const list: GridColDef<T>[] = []\r\n if (!!ActionRow && disableActionRow !== true) {\r\n list.push({\r\n field: 'Actions',\r\n minWidth: 100,\r\n headerAlign: 'right',\r\n align: 'right',\r\n filterable: false,\r\n sortable: false,\r\n disableExport: true,\r\n renderCell: (value) => <ActionRow value={value.row} />,\r\n ...params.actionRow\r\n })\r\n }\r\n return generateColumns(list)\r\n }\r\n\r\n onPaginationModelChange = (model: GridPaginationModel, details: GridCallbackDetails<'pagination'>) => {\r\n if (this.mergeConfig.loading) return\r\n this.setTableQueryParams({ pagination: model, detail: 'pagination' })\r\n this.handleChange()\r\n }\r\n\r\n onFilterModelChange = (model: GridFilterModel, details: GridCallbackDetails<'filter'>) => {\r\n if (this.mergeConfig.loading) return\r\n const { pagination } = this.tableQueryParams\r\n this.setTableQueryParams({\r\n filter: model as ICustomGridFilterModel<T>,\r\n pagination: { page: 0, pageSize: pagination?.pageSize ?? 25 },\r\n detail: TableHelper.detectSearchType(model)\r\n })\r\n this.handleChange()\r\n }\r\n\r\n onSortModelChange = (model: GridSortModel, details: GridCallbackDetails<any>) => {\r\n if (this.mergeConfig.loading) return\r\n let sortValue = model as ICustomGridSortModel<T>\r\n const { sort } = this.tableQueryParams\r\n if (!!sort?.length && !sortValue.length) {\r\n if (sort?.[0]?.field === this.defaultTableQueryParams.sort?.[0]?.field) {\r\n sortValue = [{ field: sort[0]?.field, sort: sort[0]?.sort === 'desc' ? 'asc' : 'desc' }]\r\n } else {\r\n sortValue = this.defaultTableQueryParams.sort ?? []\r\n }\r\n }\r\n this.setTableQueryParams({ sort: sortValue, detail: 'sort' })\r\n this.handleChange()\r\n }\r\n\r\n handleChange = () => {\r\n if (this.changeTimeout) clearTimeout(this.changeTimeout)\r\n this.changeTimeout = setTimeout(() => {\r\n this.props.onChange && this.props.onChange(this.tableQueryParams)\r\n }, 300)\r\n }\r\n\r\n handleRowSelectionChange = (value: GridRowSelectionModel, details: GridCallbackDetails) => {\r\n if (this.mergeConfig.maxSelcion && value.length > this.mergeConfig.maxSelcion) {\r\n this.rowSelecteds = value.slice(0, this.mergeConfig.maxSelcion)\r\n } else {\r\n this.rowSelecteds = value\r\n }\r\n this.props.onRowSelectionChange && this.props.onRowSelectionChange(this.rowSelecteds, details)\r\n this.forceUpdate()\r\n }\r\n }\r\n\r\n return Table\r\n}\r\n\r\nexport default CreateTable\r\n"],"names":["CreateTable","params","Table","props","_this","_classCallCheck","_callSuper","_defineProperty","value","tableQueryParams","mergeObjects","children","WrapComponent","disableGlobalModalProvider","Fragment","GlobalModal","_jsx","mapGlobalModalContext","context","TableBaseContext","Provider","showModal","show","closeModal","close","_this$props$data$item","_this$props$data","_this$props$slots$den","_this$props$slots","initialState","TableHelper","mapInitialState","query","columns","columnVisibilityModel","obj","getRowId","rows","data","items","checkboxSelection","pagination","density","slots","filterDebounceMs","sx","border","toolbar","mergeConfig","rowSelectionModel","rowSelecteds","onRowSelectionModelChange","handleRowSelectionChange","featureMode","_this$props$data$rowT","_this$props$data2","objServer","filterMode","sortingMode","paginationMode","onPaginationModelChange","onFilterModelChange","onSortModelChange","rowCount","rowTotal","paginationModel","filterModel","filter","sortModel","mapSortModel","sort","loading","Object","assign","dataGridProps","extendColDefs","_this$mergeConfig","ActionRow","disableActionRow","list","push","_objectSpread","field","minWidth","headerAlign","align","filterable","sortable","disableExport","renderCell","row","actionRow","keys","map","key","filterOperators","customFilterOperators","length","apply","_toConsumableArray","model","details","setTableQueryParams","detail","handleChange","_pagination$pageSize","page","pageSize","detectSearchType","_sort$","_this$defaultTableQue","_sort$2","_sort$3","_this$defaultTableQue2","sortValue","defaultTableQueryParams","changeTimeout","clearTimeout","setTimeout","onChange","maxSelcion","slice","onRowSelectionChange","forceUpdate","initialColumns","_inherits","Component","_createClass","get","_this$props$slots2","_this$props$slots$too","_this$props$slots3","_this$props$slots4","_this$props$slots$max","_this$props$slots5","_this$props$slots6","_this$props$slots7","_ref","_this$tableQueryParam","toolbarPannelProps","toolbarProps","this","ToolbarPannel","maxSelection","wrapProps","undefined","nextProps","_nextProps$query","equalTableQueryParams","JSON","stringify","_this$mergeConfig$wra","rootClasses","dinoTableClasses","root","className","renderWrapContext","TableStyled","x","join","DataGrid","getDataGridProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.table.js","sources":["../../../src/table/create.table.tsx"],"sourcesContent":["import { Component, Fragment } from 'react'\r\nimport { Box, BoxProps, styled } from '@mui/material'\r\nimport { DataGrid, DataGridProps, GridColDef, GridFeatureMode, GridFilterOperator } from '@mui/x-data-grid'\r\nimport { GridSortModel, GridValidRowModel, GridRowIdGetter, GridRowSelectionModel } from '@mui/x-data-grid'\r\nimport { GridCallbackDetails, GridColumnVisibilityModel, GridDensity, GridFilterModel, GridPaginationModel } from '@mui/x-data-grid'\r\nimport type { ComponentType, ReactNode } from 'react'\r\nimport { mergeObjects } from '../utils'\r\nimport { TableBaseContext } from './context'\r\nimport { IActionRowProps } from './create.action-row'\r\nimport { customFilterOperators } from './custom.filter-operators'\r\nimport { GlobalModal, mapGlobalModalContext } from '../api-context'\r\nimport { ICustomGridColDef, ICustomGridFilterModel, ICustomGridSortModel, ITableData, ITableQueryParams } from './types'\r\nimport TableHelper from './helpers'\r\nimport ToolbarPannel, { IToolbarPannelProps } from './toolbar-pannel'\r\nimport { dinoTableClasses, TableStyled } from './styled'\r\n\r\nexport interface ITableSlots<T> {\r\n maxSelection?: number\r\n density?: GridDensity\r\n toolbar?: ComponentType<IToolbarPannelProps>\r\n actionRow?: ComponentType<IActionRowProps<T>>\r\n toolbarProps?: IToolbarPannelProps\r\n dataGridProps?: DataGridProps\r\n wrapProps?: BoxProps\r\n}\r\n\r\nexport type ITableParamsSlots<T> = Pick<ITableSlots<T>, 'maxSelection' | 'toolbarProps' | 'dataGridProps' | 'wrapProps'>\r\n\r\nexport interface ITableProps<T> {\r\n data?: ITableData<T>\r\n query?: ITableQueryParams<T>\r\n loading?: boolean\r\n onChange?: (query: ITableQueryParams<T>) => void\r\n onRowSelectionChange?: DataGridProps['onRowSelectionModelChange']\r\n slots?: ITableSlots<T>\r\n}\r\n\r\nexport interface ITableParams<T extends GridValidRowModel> extends ITableParamsSlots<T> {\r\n featureMode?: GridFeatureMode\r\n getRowId: GridRowIdGetter<T>\r\n columns: ICustomGridColDef<T>\r\n filterOperators?: (config: GridColDef) => GridFilterOperator[]\r\n columnVisibilityModel?: Partial<Record<keyof T, boolean>>\r\n actionRow?: Omit<GridColDef, 'field'>\r\n disableActionRow?: boolean\r\n disableGlobalModalProvider?: boolean\r\n}\r\n\r\nexport function CreateTable<T extends GridValidRowModel>(params: ITableParams<T>): ComponentType<ITableProps<T>> {\r\n const generateColumns = (extendColDefs?: GridColDef[]) => {\r\n const columns = Object.keys(params.columns).map<GridColDef>((key) => {\r\n const obj = { field: key, ...params.columns[key] }\r\n obj.filterOperators = params.filterOperators ? params.filterOperators(obj) : customFilterOperators(obj)\r\n return obj\r\n })\r\n\r\n if (!!extendColDefs && extendColDefs.length > 0) columns.push(...extendColDefs)\r\n return columns\r\n }\r\n\r\n class Table extends Component<ITableProps<T>> {\r\n private tableQueryParams: ITableQueryParams<T>\r\n // private tableQueryParamsCache: ITableQueryParams<T> = {}\r\n private defaultTableQueryParams: ITableQueryParams<T>\r\n private columns: GridColDef<T>[]\r\n private rowSelecteds: GridRowSelectionModel\r\n private changeTimeout?: ReturnType<typeof setTimeout>\r\n constructor(props: ITableProps<T>) {\r\n super(props)\r\n this.columns = this.initialColumns()\r\n this.tableQueryParams = { ...props.query }\r\n this.defaultTableQueryParams = this.tableQueryParams\r\n this.rowSelecteds = []\r\n }\r\n\r\n get mergeConfig() {\r\n const toolbarPannelProps = mergeObjects({}, params?.toolbarProps, this.props.slots?.toolbarProps)\r\n return {\r\n toolbar: this.props.slots?.toolbar ?? (() => <ToolbarPannel {...toolbarPannelProps} />),\r\n ActionRow: this.props.slots?.actionRow,\r\n disableActionRow: params.disableActionRow,\r\n columnVisibilityModel: params.columnVisibilityModel,\r\n maxSelcion: this.props.slots?.maxSelection ?? params.maxSelection,\r\n dataGridProps: mergeObjects({}, params.dataGridProps, this.props.slots?.dataGridProps),\r\n wrapProps: mergeObjects({}, params.wrapProps, this.props.slots?.wrapProps),\r\n loading: (this.props.loading !== undefined ? this.props.loading : this.tableQueryParams?.loading) ?? false\r\n }\r\n }\r\n\r\n setTableQueryParams = (value: Partial<ITableQueryParams<T>>) => {\r\n this.tableQueryParams = mergeObjects({}, this.tableQueryParams, value)\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this.changeTimeout) {\r\n clearTimeout(this.changeTimeout)\r\n }\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<ITableProps<T>>): boolean {\r\n if (params.featureMode === 'server') {\r\n // Check if query changed\r\n if (!TableHelper.equalTableQueryParams(nextProps.query, this.props.query)) {\r\n this.setTableQueryParams(nextProps.query ?? {})\r\n return true\r\n }\r\n // Check if data or loading changed\r\n if (JSON.stringify(nextProps.data) !== JSON.stringify(this.props.data) || nextProps.loading !== this.props.loading) {\r\n return true\r\n }\r\n return false\r\n } else {\r\n return true\r\n }\r\n }\r\n\r\n render() {\r\n const rootClasses = [dinoTableClasses.root, this.mergeConfig.wrapProps?.className]\r\n return this.renderWrapContext(\r\n <TableStyled {...this.mergeConfig.wrapProps} className={rootClasses.filter((x) => !!x).join(' ')}>\r\n <DataGrid loading={this.props.loading} {...this.getDataGridProps()} />\r\n </TableStyled>\r\n )\r\n }\r\n\r\n renderWrapContext = (children: ReactNode) => {\r\n const WrapComponent = params.disableGlobalModalProvider ? Fragment : GlobalModal\r\n return (\r\n <WrapComponent>\r\n {mapGlobalModalContext((context) => (\r\n <TableBaseContext.Provider value={{ showModal: context.show, closeModal: context.close }}>{children}</TableBaseContext.Provider>\r\n ))}\r\n </WrapComponent>\r\n )\r\n }\r\n\r\n getDataGridProps = (): DataGridProps<T> => {\r\n const initialState = TableHelper.mapInitialState(this.props.query, {\r\n columns: { columnVisibilityModel: params.columnVisibilityModel as GridColumnVisibilityModel }\r\n })\r\n const obj: DataGridProps<T> = {\r\n getRowId: params.getRowId,\r\n initialState,\r\n columns: this.columns,\r\n rows: this.props.data?.items ?? [],\r\n checkboxSelection: true,\r\n pagination: true,\r\n density: this.props.slots?.density ?? 'standard',\r\n filterDebounceMs: 800,\r\n sx: { border: 0 },\r\n slots: { toolbar: this.mergeConfig.toolbar },\r\n rowSelectionModel: this.rowSelecteds,\r\n onRowSelectionModelChange: this.handleRowSelectionChange\r\n }\r\n if (params.featureMode === 'server') {\r\n const objServer: Partial<DataGridProps<T>> = {\r\n filterMode: 'server',\r\n sortingMode: 'server',\r\n paginationMode: 'server',\r\n onPaginationModelChange: this.onPaginationModelChange,\r\n onFilterModelChange: this.onFilterModelChange,\r\n onSortModelChange: this.onSortModelChange,\r\n rowCount: this.props.data?.rowTotal ?? 0,\r\n paginationModel: this.tableQueryParams.pagination,\r\n filterModel: this.tableQueryParams.filter as GridFilterModel,\r\n sortModel: TableHelper.mapSortModel(this.tableQueryParams.sort),\r\n loading: this.mergeConfig.loading\r\n }\r\n Object.assign(obj, objServer)\r\n }\r\n return mergeObjects(obj, this.mergeConfig.dataGridProps)\r\n }\r\n\r\n initialColumns = (): GridColDef<T>[] => {\r\n const { ActionRow, disableActionRow } = this.mergeConfig\r\n const list: GridColDef<T>[] = []\r\n if (!!ActionRow && disableActionRow !== true) {\r\n list.push({\r\n field: 'Actions',\r\n minWidth: 100,\r\n headerAlign: 'right',\r\n align: 'right',\r\n filterable: false,\r\n sortable: false,\r\n disableExport: true,\r\n renderCell: (value) => <ActionRow value={value.row} />,\r\n ...params.actionRow\r\n })\r\n }\r\n return generateColumns(list)\r\n }\r\n\r\n onPaginationModelChange = (model: GridPaginationModel, details: GridCallbackDetails<'pagination'>) => {\r\n if (this.mergeConfig.loading) return\r\n this.setTableQueryParams({ pagination: model, detail: 'pagination' })\r\n this.handleChange()\r\n }\r\n\r\n onFilterModelChange = (model: GridFilterModel, details: GridCallbackDetails<'filter'>) => {\r\n if (this.mergeConfig.loading) return\r\n const { pagination } = this.tableQueryParams\r\n this.setTableQueryParams({\r\n filter: model as ICustomGridFilterModel<T>,\r\n pagination: { page: 0, pageSize: pagination?.pageSize ?? 25 },\r\n detail: TableHelper.detectSearchType(model)\r\n })\r\n this.handleChange()\r\n }\r\n\r\n onSortModelChange = (model: GridSortModel, details: GridCallbackDetails<any>) => {\r\n if (this.mergeConfig.loading) return\r\n let sortValue = model as ICustomGridSortModel<T>\r\n const { sort } = this.tableQueryParams\r\n if (!!sort?.length && !sortValue.length) {\r\n if (sort?.[0]?.field === this.defaultTableQueryParams.sort?.[0]?.field) {\r\n sortValue = [{ field: sort[0]?.field, sort: sort[0]?.sort === 'desc' ? 'asc' : 'desc' }]\r\n } else {\r\n sortValue = this.defaultTableQueryParams.sort ?? []\r\n }\r\n }\r\n this.setTableQueryParams({ sort: sortValue, detail: 'sort' })\r\n this.handleChange()\r\n }\r\n\r\n handleChange = () => {\r\n if (this.changeTimeout) clearTimeout(this.changeTimeout)\r\n this.changeTimeout = setTimeout(() => {\r\n this.props.onChange && this.props.onChange(this.tableQueryParams)\r\n }, 300)\r\n }\r\n\r\n handleRowSelectionChange = (value: GridRowSelectionModel, details: GridCallbackDetails) => {\r\n if (this.mergeConfig.maxSelcion && value.length > this.mergeConfig.maxSelcion) {\r\n this.rowSelecteds = value.slice(0, this.mergeConfig.maxSelcion)\r\n } else {\r\n this.rowSelecteds = value\r\n }\r\n this.props.onRowSelectionChange && this.props.onRowSelectionChange(this.rowSelecteds, details)\r\n this.forceUpdate()\r\n }\r\n }\r\n\r\n return Table\r\n}\r\n\r\nexport default CreateTable\r\n"],"names":["CreateTable","params","Table","props","_this","_classCallCheck","_callSuper","_defineProperty","value","tableQueryParams","mergeObjects","children","WrapComponent","disableGlobalModalProvider","Fragment","GlobalModal","_jsx","mapGlobalModalContext","context","TableBaseContext","Provider","showModal","show","closeModal","close","_this$props$data$item","_this$props$data","_this$props$slots$den","_this$props$slots","initialState","TableHelper","mapInitialState","query","columns","columnVisibilityModel","obj","getRowId","rows","data","items","checkboxSelection","pagination","density","slots","filterDebounceMs","sx","border","toolbar","mergeConfig","rowSelectionModel","rowSelecteds","onRowSelectionModelChange","handleRowSelectionChange","featureMode","_this$props$data$rowT","_this$props$data2","objServer","filterMode","sortingMode","paginationMode","onPaginationModelChange","onFilterModelChange","onSortModelChange","rowCount","rowTotal","paginationModel","filterModel","filter","sortModel","mapSortModel","sort","loading","Object","assign","dataGridProps","extendColDefs","_this$mergeConfig","ActionRow","disableActionRow","list","push","_objectSpread","field","minWidth","headerAlign","align","filterable","sortable","disableExport","renderCell","row","actionRow","keys","map","key","filterOperators","customFilterOperators","length","apply","_toConsumableArray","model","details","setTableQueryParams","detail","handleChange","_pagination$pageSize","page","pageSize","detectSearchType","_sort$","_this$defaultTableQue","_sort$2","_sort$3","_this$defaultTableQue2","sortValue","defaultTableQueryParams","changeTimeout","clearTimeout","setTimeout","onChange","maxSelcion","slice","onRowSelectionChange","forceUpdate","initialColumns","_inherits","Component","_createClass","get","_this$props$slots2","_this$props$slots$too","_this$props$slots3","_this$props$slots4","_this$props$slots$max","_this$props$slots5","_this$props$slots6","_this$props$slots7","_ref","_this$tableQueryParam","toolbarPannelProps","toolbarProps","this","ToolbarPannel","maxSelection","wrapProps","undefined","nextProps","_nextProps$query","equalTableQueryParams","JSON","stringify","_this$mergeConfig$wra","rootClasses","dinoTableClasses","root","className","renderWrapContext","TableStyled","x","join","DataGrid","getDataGridProps"],"mappings":"6vBAgDM,SAAUA,EAAyCC,GAkMvD,kBA/KE,SAAAC,EAAYC,GAAqB,IAAAC,EAKT,OALSC,OAAAH,GAC/BE,EAAAE,EAAAJ,KAAAA,GAAMC,IAAMI,EAAAH,EAqBQ,sBAAA,SAACI,GACrBJ,EAAKK,iBAAmBC,EAAa,CAAE,EAAEN,EAAKK,iBAAkBD,KACjED,EAAAH,EAkCmB,oBAAA,SAACO,GACnB,IAAMC,EAAgBX,EAAOY,2BAA6BC,EAAWC,EACrE,OACEC,EAACJ,EACE,CAAAD,SAAAM,EAAsB,SAACC,GAAO,OAC7BF,EAACG,EAAiBC,UAASZ,MAAO,CAAEa,UAAWH,EAAQI,KAAMC,WAAYL,EAAQM,gBAAUb,GAC5F,OAGNJ,EAAAH,EAAA,mBAEkB,WAAuB,IAAAqB,EAAAC,EAAAC,EAAAC,EAClCC,EAAeC,EAAYC,gBAAgB3B,EAAKD,MAAM6B,MAAO,CACjEC,QAAS,CAAEC,sBAAuBjC,EAAOiC,yBAErCC,EAAwB,CAC5BC,SAAUnC,EAAOmC,SACjBP,aAAAA,EACAI,QAAS7B,EAAK6B,QACdI,aAAIZ,UAAAC,EAAEtB,EAAKD,MAAMmC,YAAI,IAAAZ,OAAA,EAAfA,EAAiBa,aAAK,IAAAd,EAAAA,EAAI,GAChCe,mBAAmB,EACnBC,YAAY,EACZC,gBAAOf,UAAAC,EAAExB,EAAKD,MAAMwC,aAAK,IAAAf,OAAA,EAAhBA,EAAkBc,eAAO,IAAAf,EAAAA,EAAI,WACtCiB,iBAAkB,IAClBC,GAAI,CAAEC,OAAQ,GACdH,MAAO,CAAEI,QAAS3C,EAAK4C,YAAYD,SACnCE,kBAAmB7C,EAAK8C,aACxBC,0BAA2B/C,EAAKgD,0BAElC,GAA2B,WAAvBnD,EAAOoD,YAA0B,CAAA,IAAAC,EAAAC,EAC7BC,EAAuC,CAC3CC,WAAY,SACZC,YAAa,SACbC,eAAgB,SAChBC,wBAAyBxD,EAAKwD,wBAC9BC,oBAAqBzD,EAAKyD,oBAC1BC,kBAAmB1D,EAAK0D,kBACxBC,iBAAQT,UAAAC,EAAEnD,EAAKD,MAAMmC,YAAI,IAAAiB,OAAA,EAAfA,EAAiBS,gBAAQ,IAAAV,EAAAA,EAAI,EACvCW,gBAAiB7D,EAAKK,iBAAiBgC,WACvCyB,YAAa9D,EAAKK,iBAAiB0D,OACnCC,UAAWtC,EAAYuC,aAAajE,EAAKK,iBAAiB6D,MAC1DC,QAASnE,EAAK4C,YAAYuB,SAE5BC,OAAOC,OAAOtC,EAAKqB,EACpB,CACD,OAAO9C,EAAayB,EAAK/B,EAAK4C,YAAY0B,iBAC3CnE,EAAAH,EAAA,iBAEgB,WACf,IA7HqBuE,EACjB1C,EA4HJ2C,EAAwCxE,EAAK4C,YAArC6B,EAASD,EAATC,UAAWC,EAAgBF,EAAhBE,iBACbC,EAAwB,GAc9B,OAbMF,IAAkC,IAArBC,GACjBC,EAAKC,KAAIC,EAAA,CACPC,MAAO,UACPC,SAAU,IACVC,YAAa,QACbC,MAAO,QACPC,YAAY,EACZC,UAAU,EACVC,eAAe,EACfC,WAAY,SAACjF,GAAK,OAAKQ,EAAC6D,EAAS,CAACrE,MAAOA,EAAMkF,KAAO,GACnDzF,EAAO0F,YAzIOhB,EA4IEI,EA3InB9C,EAAUuC,OAAOoB,KAAK3F,EAAOgC,SAAS4D,IAAgB,SAACC,GAC3D,IAAM3D,EAAG8C,EAAA,CAAKC,MAAOY,GAAQ7F,EAAOgC,QAAQ6D,IAE5C,OADA3D,EAAI4D,gBAAkB9F,EAAO8F,gBAAkB9F,EAAO8F,gBAAgB5D,GAAO6D,EAAsB7D,GAC5FA,CACT,GAEMwC,GAAiBA,EAAcsB,OAAS,GAAGhE,EAAQ+C,KAAIkB,MAAZjE,EAAOkE,EAASxB,IAC1D1C,IAqIN1B,EAAAH,EAAA,0BAEyB,SAACgG,EAA4BC,GACjDjG,EAAK4C,YAAYuB,UACrBnE,EAAKkG,oBAAoB,CAAE7D,WAAY2D,EAAOG,OAAQ,eACtDnG,EAAKoG,kBACNjG,EAAAH,EAAA,sBAEqB,SAACgG,EAAwBC,GAA0C,IAAAI,EACvF,IAAIrG,EAAK4C,YAAYuB,QAArB,CACA,IAAQ9B,EAAerC,EAAKK,iBAApBgC,WACRrC,EAAKkG,oBAAoB,CACvBnC,OAAQiC,EACR3D,WAAY,CAAEiE,KAAM,EAAGC,SAA8B,QAAtBF,EAAEhE,aAAU,EAAVA,EAAYkE,gBAAQ,IAAAF,EAAAA,EAAI,IACzDF,OAAQzE,EAAY8E,iBAAiBR,KAEvChG,EAAKoG,cAPyB,IAQ/BjG,EAAAH,EAAA,oBAEmB,SAACgG,EAAsBC,GACzC,IAAIjG,EAAK4C,YAAYuB,QAArB,CACA,IAEyCsC,EAAAC,EACiCC,EAAAC,EAEjEC,EALLC,EAAYd,EACR9B,EAASlE,EAAKK,iBAAd6D,KACR,GAAMA,SAAAA,EAAM2B,SAAWiB,EAAUjB,OAC/B,IAAI3B,iBAAIuC,EAAJvC,EAAO,UAAE,IAAAuC,OAAA,EAATA,EAAW3B,kBAAK4B,EAAK1G,EAAK+G,wBAAwB7C,YAAI,IAAAwC,GAAKA,QAALA,EAAjCA,EAAoC,cAAEA,SAAtCA,EAAwC5B,OAC/DgC,EAAY,CAAC,CAAEhC,MAAc,QAAT6B,EAAEzC,EAAK,UAAE,IAAAyC,OAAA,EAAPA,EAAS7B,MAAOZ,KAAwB,UAAX,QAAP0C,EAAA1C,EAAK,UAAE,IAAA0C,OAAA,EAAPA,EAAS1C,MAAkB,MAAQ,cAE/E4C,EAA6CD,QAApCA,EAAG7G,EAAK+G,wBAAwB7C,YAAI2C,IAAAA,EAAAA,EAAI,GAGrD7G,EAAKkG,oBAAoB,CAAEhC,KAAM4C,EAAWX,OAAQ,SACpDnG,EAAKoG,cAXyB,IAY/BjG,EAAAH,EAAA,eAEc,WACTA,EAAKgH,eAAeC,aAAajH,EAAKgH,eAC1ChH,EAAKgH,cAAgBE,WAAW,WAC9BlH,EAAKD,MAAMoH,UAAYnH,EAAKD,MAAMoH,SAASnH,EAAKK,iBACjD,EAAE,OACJF,EAAAH,EAAA,2BAE0B,SAACI,EAA8B6F,GACpDjG,EAAK4C,YAAYwE,YAAchH,EAAMyF,OAAS7F,EAAK4C,YAAYwE,WACjEpH,EAAK8C,aAAe1C,EAAMiH,MAAM,EAAGrH,EAAK4C,YAAYwE,YAEpDpH,EAAK8C,aAAe1C,EAEtBJ,EAAKD,MAAMuH,sBAAwBtH,EAAKD,MAAMuH,qBAAqBtH,EAAK8C,aAAcmD,GACtFjG,EAAKuH,gBAzKLvH,EAAK6B,QAAU7B,EAAKwH,iBACpBxH,EAAKK,iBAAgBwE,KAAQ9E,EAAM6B,OACnC5B,EAAK+G,wBAA0B/G,EAAKK,iBACpCL,EAAK8C,aAAe,GAAE9C,CACxB,CAAC,OAAAyH,EAAA3H,EAbiB4H,GAajBC,EAAA7H,EAAA,CAAA,CAAA4F,IAAA,cAAAkC,IAED,WAAe,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EACPC,EAAqBjI,EAAa,CAAA,EAAIT,aAAAA,EAAAA,EAAQ2I,aAA8BX,QAAlBA,EAAEY,KAAK1I,MAAMwC,aAAXsF,IAAgBA,OAAhBA,EAAAA,EAAkBW,cACpF,MAAO,CACL7F,gBAAOmF,UAAAC,EAAEU,KAAK1I,MAAMwC,aAAK,IAAAwF,OAAA,EAAhBA,EAAkBpF,eAAO,IAAAmF,EAAAA,EAAK,WAAA,OAAMlH,EAAC8H,EAAa7D,EAAK0D,CAAAA,EAAAA,GAAuB,EACvF9D,UAA2BuD,QAAlBA,EAAES,KAAK1I,MAAMwC,aAAXyF,IAAgBA,OAAhBA,EAAAA,EAAkBzC,UAC7Bb,iBAAkB7E,EAAO6E,iBACzB5C,sBAAuBjC,EAAOiC,sBAC9BsF,WAA0Ca,QAAhCA,EAAkB,QAAlBC,EAAEO,KAAK1I,MAAMwC,aAAX2F,IAAgBA,OAAhBA,EAAAA,EAAkBS,wBAAYV,EAAAA,EAAIpI,EAAO8I,aACrDrE,cAAehE,EAAa,CAAE,EAAET,EAAOyE,cAA+B,QAAlB6D,EAAEM,KAAK1I,MAAMwC,aAAX4F,IAAgBA,OAAhBA,EAAAA,EAAkB7D,eACxEsE,UAAWtI,EAAa,CAAE,EAAET,EAAO+I,UAA2B,QAAlBR,EAAEK,KAAK1I,MAAMwC,aAAX6F,IAAgBA,OAAhBA,EAAAA,EAAkBQ,WAChEzE,QAAgG,QAAzFkE,OAA0BQ,IAAvBJ,KAAK1I,MAAMoE,QAAwBsE,KAAK1I,MAAMoE,gBAAOmE,EAAGG,KAAKpI,wBAAgB,IAAAiI,OAAA,EAArBA,EAAuBnE,eAAO,IAAAkE,GAAAA,EAEpG,GAAC,CAAA3C,IAAA,uBAAAtF,MAMD,WACMqI,KAAKzB,eACPC,aAAawB,KAAKzB,cAEtB,GAAC,CAAAtB,IAAA,wBAAAtF,MAED,SAAsB0I,GAGyD,IAAAC,EAF7E,MAA2B,WAAvBlJ,EAAOoD,cAEJvB,EAAYsH,sBAAsBF,EAAUlH,MAAO6G,KAAK1I,MAAM6B,OAK/DqH,KAAKC,UAAUJ,EAAU5G,QAAU+G,KAAKC,UAAUT,KAAK1I,MAAMmC,OAAS4G,EAAU3E,UAAYsE,KAAK1I,MAAMoE,SAJzGsE,KAAKvC,oBAAmC,QAAhB6C,EAACD,EAAUlH,aAAKmH,IAAAA,EAAAA,EAAI,KACrC,GAUb,GAAC,CAAArD,IAAA,SAAAtF,MAED,WAAM,IAAA+I,EACEC,EAAc,CAACC,EAAiBC,KAAgCH,QAA5BA,EAAEV,KAAK7F,YAAYgG,qBAASO,SAA1BA,EAA4BI,WACxE,OAAOd,KAAKe,kBACV5I,EAAC6I,EAAW5E,EAAAA,EAAK,CAAA,EAAA4D,KAAK7F,YAAYgG,WAAS,CAAA,EAAA,CAAEW,UAAWH,EAAYrF,OAAO,SAAC2F,GAAC,QAAOA,CAAC,GAAEC,KAAK,cAC1F/I,EAACgJ,EAAQ/E,EAAA,CAACV,QAASsE,KAAK1I,MAAMoE,SAAasE,KAAKoB,wBAGtD,IAAC,GAwHL"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as n}from"react/jsx-runtime";import{Tooltip as t,IconButton as i,Button as r}from"@mui/material";import e from"@mui/icons-material/ViewList";import o from"@mui/icons-material/AddCircleOutline";import{mapGlobalModalContext as l}from"../api-context/global-modal.js";var c=function(i){return l(function(e){return n(t,{title:"Create new",children:n(r,{size:"small",onClick:function(){return e.show({renderContent:function(){return i.children}})},startIcon:n(o,{fontSize:"small"}),sx:{fontWeight:600},variant:"contained",children:"Create"})})})},a=function(r){return l(function(o){return n(t,{title:"Detail",children:n(i,{onClick:function(n){var t;null===(t=r.onOpenModal)||void 0===t||t.call(r,n),o.show({backdropActivated:!0,renderContent:function(){return r.formDetail},onClose:r.onCloseModal})},children:n(e,{})})})})},u=function(r){return n(t,{title:"Detail",children:n(i,{onClick:r.onClick,children:n(e,{})})})};export{u as BtnDetail,c as BtnFormCreate,a as BtnFormDetail};
|
|
2
2
|
//# sourceMappingURL=ui.buttons.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ui.buttons.js","sources":["../../../src/table/ui.buttons.tsx"],"sourcesContent":["import React, { FC } from 'react'\r\nimport { Button, IconButton, IconButtonProps, Tooltip } from '@mui/material'\r\nimport ViewListIcon from '@mui/icons-material/ViewList'\r\nimport AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'\r\nimport { mapGlobalModalContext, TModalReason } from '../api-context'\r\n\r\nexport const BtnFormCreate: FC<{ children: React.ReactNode }> = (props) => {\r\n return mapGlobalModalContext((context) => (\r\n <Tooltip title='Create new'>\r\n <Button\r\n size='small'\r\n onClick={() => context.show({ renderContent: () => props.children })}\r\n startIcon={<AddCircleOutlineIcon fontSize='small' />}\r\n sx={{ fontWeight: 600 }}\r\n variant='contained'\r\n >\r\n Create\r\n </Button>\r\n </Tooltip>\r\n ))\r\n}\r\n\r\nexport interface IBtnFormDetailProps {\r\n formDetail: React.ReactNode\r\n onOpenModal?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\r\n onCloseModal?: (reason?: TModalReason) => void\r\n}\r\n\r\nexport const BtnFormDetail: FC<IBtnFormDetailProps> = (props) => {\r\n return mapGlobalModalContext((context) => (\r\n <Tooltip title='Detail'>\r\n <IconButton\r\n onClick={(e) => {\r\n props.onOpenModal?.(e)\r\n context.show({ backdropActivated: true, renderContent: () => props.formDetail, onClose: props.onCloseModal })\r\n }}\r\n >\r\n <ViewListIcon />\r\n </IconButton>\r\n </Tooltip>\r\n ))\r\n}\r\n\r\nexport interface IBtnDetailProps {\r\n onClick?: IconButtonProps['onClick']\r\n}\r\n\r\nexport const BtnDetail: FC<IBtnDetailProps> = (props) => (\r\n <Tooltip title='Detail'>\r\n <IconButton onClick={props.onClick}>\r\n <ViewListIcon />\r\n </IconButton>\r\n </Tooltip>\r\n)\r\n"],"names":["BtnFormCreate","props","mapGlobalModalContext","context","_jsx","Tooltip","title","children","Button","size","onClick","show","renderContent","startIcon","AddCircleOutlineIcon","fontSize","sx","fontWeight","variant","BtnFormDetail","IconButton","e","_props$onOpenModal","onOpenModal","call","backdropActivated","formDetail","onClose","onCloseModal","ViewListIcon","BtnDetail"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ui.buttons.js","sources":["../../../src/table/ui.buttons.tsx"],"sourcesContent":["import React, { FC } from 'react'\r\nimport { Button, IconButton, IconButtonProps, Tooltip } from '@mui/material'\r\nimport ViewListIcon from '@mui/icons-material/ViewList'\r\nimport AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'\r\nimport { mapGlobalModalContext, TModalReason } from '../api-context'\r\n\r\nexport const BtnFormCreate: FC<{ children: React.ReactNode }> = (props) => {\r\n return mapGlobalModalContext((context) => (\r\n <Tooltip title='Create new'>\r\n <Button\r\n size='small'\r\n onClick={() => context.show({ renderContent: () => props.children })}\r\n startIcon={<AddCircleOutlineIcon fontSize='small' />}\r\n sx={{ fontWeight: 600 }}\r\n variant='contained'\r\n >\r\n Create\r\n </Button>\r\n </Tooltip>\r\n ))\r\n}\r\n\r\nexport interface IBtnFormDetailProps {\r\n formDetail: React.ReactNode\r\n onOpenModal?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\r\n onCloseModal?: (reason?: TModalReason) => void\r\n}\r\n\r\nexport const BtnFormDetail: FC<IBtnFormDetailProps> = (props) => {\r\n return mapGlobalModalContext((context) => (\r\n <Tooltip title='Detail'>\r\n <IconButton\r\n onClick={(e) => {\r\n props.onOpenModal?.(e)\r\n context.show({ backdropActivated: true, renderContent: () => props.formDetail, onClose: props.onCloseModal })\r\n }}\r\n >\r\n <ViewListIcon />\r\n </IconButton>\r\n </Tooltip>\r\n ))\r\n}\r\n\r\nexport interface IBtnDetailProps {\r\n onClick?: IconButtonProps['onClick']\r\n}\r\n\r\nexport const BtnDetail: FC<IBtnDetailProps> = (props) => (\r\n <Tooltip title='Detail'>\r\n <IconButton onClick={props.onClick}>\r\n <ViewListIcon />\r\n </IconButton>\r\n </Tooltip>\r\n)\r\n"],"names":["BtnFormCreate","props","mapGlobalModalContext","context","_jsx","Tooltip","title","children","Button","size","onClick","show","renderContent","startIcon","AddCircleOutlineIcon","fontSize","sx","fontWeight","variant","BtnFormDetail","IconButton","e","_props$onOpenModal","onOpenModal","call","backdropActivated","formDetail","onClose","onCloseModal","ViewListIcon","BtnDetail"],"mappings":"uRAMaA,EAAmD,SAACC,GAC/D,OAAOC,EAAsB,SAACC,GAAO,OACnCC,EAACC,EAAO,CAACC,MAAM,aACbC,SAAAH,EAACI,EAAM,CACLC,KAAK,QACLC,QAAS,WAAF,OAAQP,EAAQQ,KAAK,CAAEC,cAAe,WAAF,OAAQX,EAAMM,QAAQ,GAAG,EACpEM,UAAWT,EAACU,EAAqB,CAAAC,SAAS,UAC1CC,GAAI,CAAEC,WAAY,KAClBC,QAAQ,YAAWX,SAAA,YAIb,EAEd,EAQaY,EAAyC,SAAClB,GACrD,OAAOC,EAAsB,SAACC,GAAO,OACnCC,EAACC,EAAO,CAACC,MAAM,SACbC,SAAAH,EAACgB,EAAU,CACTV,QAAS,SAACW,GAAK,IAAAC,EACIA,QAAjBA,EAAArB,EAAMsB,mBAAND,IAAiBA,GAAjBA,EAAAE,KAAAvB,EAAoBoB,GACpBlB,EAAQQ,KAAK,CAAEc,mBAAmB,EAAMb,cAAe,WAAF,OAAQX,EAAMyB,UAAU,EAAEC,QAAS1B,EAAM2B,cAC/F,EAAArB,SAEDH,EAACyB,EAAY,CAAA,MAEP,EAEd,EAMaC,EAAiC,SAAC7B,GAAK,OAClDG,EAACC,EAAO,CAACC,MAAM,SACbC,SAAAH,EAACgB,EAAU,CAACV,QAAST,EAAMS,QACzBH,SAAAH,EAACyB,EAAY,CAAA,MAEP"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as t,createClass as e,objectSpread2 as i,classCallCheck as r,callSuper as o,defineProperty as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a,jsxs as l}from"react/jsx-runtime";import{Component as s}from"react";import{Stack as
|
|
1
|
+
import{inherits as t,createClass as e,objectSpread2 as i,classCallCheck as r,callSuper as o,defineProperty as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a,jsxs as l}from"react/jsx-runtime";import{Component as s}from"react";import{Stack as d,Grid as p,Box as c,Fade as u,CircularProgress as g,Typography as h,Divider as m,TablePagination as f}from"@mui/material";import{mergeObjects as v}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";import{defaultPagination as S}from"./helpers.js";import{CreateTableGridItemActions as P}from"./item-actions.js";import b from"./filter-bar/create.filter-bar.js";import"./filter-bar/types.js";import{ItemDefault as j,TableGridStyled as C,tableGridClasses as y}from"./styled.js";import x from"./toolbar-pannel.js";import I from"../api-context/popover-global.js";import{GlobalModal as z}from"../api-context/global-modal.js";function F(F){var N,R=b(null!==(N=F.filterBarConfigs)&&void 0!==N?N:{fields:{}}),k=P(),B=function(){function P(){var t;r(this,P);for(var e=arguments.length,s=new Array(e),d=0;d<e;d++)s[d]=arguments[d];return t=o(this,P,[].concat(s)),n(t,"filterStateStore",{pagination:S}),n(t,"setFilterState",function(e){try{e.details?t.filterStateStore=i({pagination:t.filterStateStore.pagination},e):t.filterStateStore=v({},t.filterState,e),t.props.onFilterChange&&t.props.onFilterChange(t.filterStateStore),t.forceUpdate()}catch(t){console.log("Set Filter State error:",t)}}),n(t,"preRender",function(t){return l(z,{children:[a(I.Provider,{}),t]})}),n(t,"getPagination",function(){var e;return null!==(e=t.filterState.pagination)&&void 0!==e?e:S}),n(t,"getRootClasses",function(){var e=[y.root];return t.filterState.loading&&e.push(y.loading),e.join(" ")}),n(t,"getItems",function(){var e;return null!==(e=t.props.data.items)&&void 0!==e?e:[]}),n(t,"handleFilterChange",function(e){t.setFilterState(e)}),n(t,"handleChangePage",function(e,i){var r=t.getPagination();t.setFilterState({pagination:{page:i,pageSize:r.pageSize}})}),n(t,"handleChangeRowsPerPage",function(e){t.setFilterState({pagination:{page:0,pageSize:parseInt(e.target.value,10)}})}),t}return t(P,s),e(P,[{key:"filterState",get:function(){var t;return null!==(t=this.props.filter)&&void 0!==t?t:this.filterStateStore}},{key:"slots",get:function(){var t,e,r,o,n,l,s;return i(i({},Object.assign({},F.slots,this.props.slots)),{},{TableGridItem:null!==(t=null!==(e=null===(r=this.props.slots)||void 0===r?void 0:r.item)&&void 0!==e?e:F.item)&&void 0!==t?t:function(){return a(j,{})},ToolbarPannel:null!==(o=null!==(n=null===(l=this.props.slots)||void 0===l?void 0:l.toolbar)&&void 0!==n?n:null===(s=F.slots)||void 0===s?void 0:s.toolbar)&&void 0!==o?o:x})}},{key:"mergeConfig",get:function(){var t;return{size:null!==(t=F.size)&&void 0!==t?t:{xs:12,sm:6,md:4}}}},{key:"render",value:function(){var t,e,r,o,n=this,s=this.slots,v=s.TableGridItem,S=s.ToolbarPannel,P=s.actionProps,b=this.getItems(),j=this.getPagination();return this.preRender(l(C,{className:this.getRootClasses(),children:[a(S,i({title:F.title},this.slots.toolbarProps)),l(d,{className:y.filterBarWrap,sx:null===(t=this.slots.filterBar)||void 0===t?void 0:t.sx,children:[(null===(e=this.slots.filterBar)||void 0===e?void 0:e.before)||null,a(R,{value:this.filterState,onChange:this.handleFilterChange}),(null===(r=this.slots.filterBar)||void 0===r?void 0:r.after)||null]}),l("div",{className:y.content,children:[a("div",{className:[y.contentInner,y.contentPosition].join(" "),children:a(p,i(i({container:!0,spacing:2},this.slots.gridContainer),{},{children:b.map(function(t,e){return a(p,i(i(i({item:!0},n.mergeConfig.size),n.slots.gridItem),{},{children:l("div",{className:y.item,children:[a(v,{value:t}),a(c,{className:y.actions,children:a(k,i({value:t},P))})]})}),F.getSelecterId(t).toString()+e)})}))}),a(u,{in:this.filterState.loading,unmountOnExit:!0,children:a("div",{className:[y.overlay,y.contentPosition].join(" "),children:a(g,{size:36})})}),a(u,{in:b.length<1&&!this.filterState.loading,unmountOnExit:!0,children:a("div",{className:[y.noItems,y.contentPosition].join(" "),children:a(h,{variant:"body2",children:"No items data"})})})]}),a(m,{sx:{position:"relative",zIndex:2}}),a(f,i({component:"div",count:null!==(o=this.props.data.totalItems)&&void 0!==o?o:0,page:j.page,onPageChange:this.handleChangePage,rowsPerPage:j.pageSize,onRowsPerPageChange:this.handleChangeRowsPerPage,slotProps:{select:{MenuProps:{disableScrollLock:!0}}}},this.slots.tablePaginationProps))]}))}}])}();return B}export{F as default};
|
|
2
2
|
//# sourceMappingURL=create.table-grid.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.table-grid.js","sources":["../../../src/table-grid/create.table-grid.tsx"],"sourcesContent":["import { Component } from 'react'\r\nimport type { ChangeEventHandler, ComponentType, MouseEvent as RMEvent, ReactNode } from 'react'\r\nimport { Box, CircularProgress, Divider, Fade, Grid, Stack, TablePagination, Typography } from '@mui/material'\r\nimport { mergeObjects } from '../utils'\r\nimport { defaultPagination } from './helpers'\r\nimport { CreateTableGridItemActions } from './item-actions'\r\nimport { GlobalModal, PopoverGlobal } from '../api-context'\r\nimport { CreateFilterBar, IFilterState } from './filter-bar'\r\nimport { ItemDefault, tableGridClasses, TableGridStyled } from './styled'\r\nimport { ITableGridFilter, IPaginationModel, ITableGridParams, ITableGridProps, ITableGridInnerSlots } from './types'\r\nimport ToolbarPannelDefault from './toolbar-pannel'\r\n\r\nfunction CreateTableGrid<T extends object>(params: ITableGridParams<T>): ComponentType<ITableGridProps<T>> {\r\n const FilterBarInstance = CreateFilterBar<T>(params.filterBarConfigs ?? { fields: {} })\r\n const ItemActions = CreateTableGridItemActions<T>()\r\n\r\n class TableGrid extends Component<ITableGridProps<T>> {\r\n private filterStateStore: ITableGridFilter<T> = { pagination: defaultPagination }\r\n get filterState(): ITableGridFilter<T> {\r\n return this.props.filter ?? this.filterStateStore\r\n }\r\n\r\n get slots(): ITableGridInnerSlots<T> {\r\n return {\r\n ...Object.assign({}, params.slots, this.props.slots),\r\n TableGridItem: this.props.slots?.item ?? params.item ?? (() => <ItemDefault />),\r\n ToolbarPannel: this.props.slots?.toolbar ?? params.slots?.toolbar ?? ToolbarPannelDefault\r\n }\r\n }\r\n\r\n get mergeConfig() {\r\n return {\r\n size: params.size ?? { xs: 12, sm: 6, md: 4 }\r\n }\r\n }\r\n\r\n setFilterState = (value: Partial<ITableGridFilter<T>>) => {\r\n try {\r\n if (!!value.details) {\r\n this.filterStateStore = { pagination: this.filterStateStore.pagination, ...value }\r\n } else {\r\n this.filterStateStore = mergeObjects<any>({}, this.filterState, value)\r\n }\r\n this.props.onFilterChange && this.props.onFilterChange(this.filterStateStore)\r\n this.forceUpdate()\r\n } catch (error) {\r\n console.log('Set Filter State error:', error)\r\n }\r\n }\r\n\r\n render() {\r\n const { TableGridItem, ToolbarPannel, actionProps } = this.slots\r\n const items = this.getItems()\r\n const pagination = this.getPagination()\r\n return this.preRender(\r\n <TableGridStyled className={this.getRootClasses()}>\r\n <ToolbarPannel title={params.title} {...this.slots.toolbarProps} />\r\n <Stack className={tableGridClasses.filterBarWrap} sx={this.slots.filterBar?.sx}>\r\n {this.slots.filterBar?.before || null}\r\n <FilterBarInstance value={this.filterState} onChange={this.handleFilterChange} />\r\n {this.slots.filterBar?.after || null}\r\n </Stack>\r\n <div className={tableGridClasses.content}>\r\n <div className={[tableGridClasses.contentInner, tableGridClasses.contentPosition].join(' ')}>\r\n <Grid container spacing={2} {...this.slots.gridContainer}>\r\n {items.map((item, index) => (\r\n <Grid key={params.getSelecterId(item).toString() + index} item {...this.mergeConfig.size} {...this.slots.gridItem}>\r\n <div className={tableGridClasses.item}>\r\n <TableGridItem value={item} />\r\n <Box className={tableGridClasses.actions}>\r\n <ItemActions value={item} {...actionProps} />\r\n </Box>\r\n </div>\r\n </Grid>\r\n ))}\r\n </Grid>\r\n </div>\r\n <Fade in={this.filterState.loading} unmountOnExit>\r\n <div className={[tableGridClasses.overlay, tableGridClasses.contentPosition].join(' ')}>\r\n <CircularProgress size={36} />\r\n </div>\r\n </Fade>\r\n <Fade in={items.length < 1 && !this.filterState.loading} unmountOnExit>\r\n <div className={[tableGridClasses.noItems, tableGridClasses.contentPosition].join(' ')}>\r\n <Typography variant='body2'>No items data</Typography>\r\n </div>\r\n </Fade>\r\n </div>\r\n <Divider sx={{ position: 'relative', zIndex: 2 }} />\r\n <TablePagination\r\n component='div'\r\n count={this.props.data.totalItems ?? 0}\r\n page={pagination.page}\r\n onPageChange={this.handleChangePage}\r\n rowsPerPage={pagination.pageSize}\r\n onRowsPerPageChange={this.handleChangeRowsPerPage}\r\n slotProps={{ select: { MenuProps: { disableScrollLock: true } } }}\r\n {...this.slots.tablePaginationProps}\r\n />\r\n </TableGridStyled>\r\n )\r\n }\r\n\r\n preRender = (children?: ReactNode) => (\r\n <GlobalModal>\r\n <PopoverGlobal.Provider />\r\n {children}\r\n </GlobalModal>\r\n )\r\n\r\n getPagination = (): IPaginationModel => this.filterState.pagination ?? defaultPagination\r\n\r\n getRootClasses = () => {\r\n const classes = [tableGridClasses.root]\r\n if (this.filterState.loading) classes.push(tableGridClasses.loading)\r\n return classes.join(' ')\r\n }\r\n\r\n getItems = () => {\r\n return this.props.data.items ?? []\r\n }\r\n\r\n handleFilterChange = (filterStateChange: IFilterState<T>) => {\r\n this.setFilterState(filterStateChange)\r\n }\r\n\r\n handleChangePage = (_: RMEvent<HTMLButtonElement, MouseEvent> | null, page: number) => {\r\n const pagination = this.getPagination()\r\n this.setFilterState({ pagination: { page, pageSize: pagination.pageSize } })\r\n }\r\n\r\n handleChangeRowsPerPage: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = (event) => {\r\n this.setFilterState({ pagination: { page: 0, pageSize: parseInt(event.target.value, 10) } })\r\n }\r\n }\r\n\r\n return TableGrid\r\n}\r\n\r\nexport default CreateTableGrid\r\n"],"names":["CreateTableGrid","params","_params$filterBarConf","FilterBarInstance","CreateFilterBar","filterBarConfigs","fields","ItemActions","CreateTableGridItemActions","TableGrid","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","pagination","defaultPagination","value","details","filterStateStore","_objectSpread","mergeObjects","filterState","props","onFilterChange","forceUpdate","error","console","log","children","_jsxs","GlobalModal","_jsx","PopoverGlobal","Provider","_this$filterState$pag","classes","tableGridClasses","root","loading","push","join","_this$props$data$item","data","items","filterStateChange","setFilterState","_","page","getPagination","pageSize","event","parseInt","target","_inherits","Component","_createClass","key","get","_this$props$filter","filter","_ref","_this$props$slots$ite","_this$props$slots","_ref2","_this$props$slots$too","_this$props$slots2","_params$slots","Object","assign","slots","TableGridItem","item","ItemDefault","ToolbarPannel","toolbar","ToolbarPannelDefault","_params$size","size","xs","sm","md","_this$slots$filterBar","_this$slots$filterBar2","_this$slots$filterBar3","_this$props$data$tota","_this2","_this$slots","actionProps","getItems","preRender","TableGridStyled","className","getRootClasses","title","toolbarProps","Stack","filterBarWrap","sx","filterBar","before","onChange","handleFilterChange","after","content","contentInner","contentPosition","Grid","container","spacing","gridContainer","map","index","mergeConfig","gridItem","Box","actions","getSelecterId","toString","Fade","in","unmountOnExit","overlay","CircularProgress","noItems","Typography","variant","Divider","position","zIndex","TablePagination","component","count","totalItems","onPageChange","handleChangePage","rowsPerPage","onRowsPerPageChange","handleChangeRowsPerPage","slotProps","select","MenuProps","disableScrollLock","tablePaginationProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.table-grid.js","sources":["../../../src/table-grid/create.table-grid.tsx"],"sourcesContent":["import { Component } from 'react'\r\nimport type { ChangeEventHandler, ComponentType, MouseEvent as RMEvent, ReactNode } from 'react'\r\nimport { Box, CircularProgress, Divider, Fade, Grid, Stack, TablePagination, Typography } from '@mui/material'\r\nimport { mergeObjects } from '../utils'\r\nimport { defaultPagination } from './helpers'\r\nimport { CreateTableGridItemActions } from './item-actions'\r\nimport { GlobalModal, PopoverGlobal } from '../api-context'\r\nimport { CreateFilterBar, IFilterState } from './filter-bar'\r\nimport { ItemDefault, tableGridClasses, TableGridStyled } from './styled'\r\nimport { ITableGridFilter, IPaginationModel, ITableGridParams, ITableGridProps, ITableGridInnerSlots } from './types'\r\nimport ToolbarPannelDefault from './toolbar-pannel'\r\n\r\nfunction CreateTableGrid<T extends object>(params: ITableGridParams<T>): ComponentType<ITableGridProps<T>> {\r\n const FilterBarInstance = CreateFilterBar<T>(params.filterBarConfigs ?? { fields: {} })\r\n const ItemActions = CreateTableGridItemActions<T>()\r\n\r\n class TableGrid extends Component<ITableGridProps<T>> {\r\n private filterStateStore: ITableGridFilter<T> = { pagination: defaultPagination }\r\n get filterState(): ITableGridFilter<T> {\r\n return this.props.filter ?? this.filterStateStore\r\n }\r\n\r\n get slots(): ITableGridInnerSlots<T> {\r\n return {\r\n ...Object.assign({}, params.slots, this.props.slots),\r\n TableGridItem: this.props.slots?.item ?? params.item ?? (() => <ItemDefault />),\r\n ToolbarPannel: this.props.slots?.toolbar ?? params.slots?.toolbar ?? ToolbarPannelDefault\r\n }\r\n }\r\n\r\n get mergeConfig() {\r\n return {\r\n size: params.size ?? { xs: 12, sm: 6, md: 4 }\r\n }\r\n }\r\n\r\n setFilterState = (value: Partial<ITableGridFilter<T>>) => {\r\n try {\r\n if (!!value.details) {\r\n this.filterStateStore = { pagination: this.filterStateStore.pagination, ...value }\r\n } else {\r\n this.filterStateStore = mergeObjects<any>({}, this.filterState, value)\r\n }\r\n this.props.onFilterChange && this.props.onFilterChange(this.filterStateStore)\r\n this.forceUpdate()\r\n } catch (error) {\r\n console.log('Set Filter State error:', error)\r\n }\r\n }\r\n\r\n render() {\r\n const { TableGridItem, ToolbarPannel, actionProps } = this.slots\r\n const items = this.getItems()\r\n const pagination = this.getPagination()\r\n return this.preRender(\r\n <TableGridStyled className={this.getRootClasses()}>\r\n <ToolbarPannel title={params.title} {...this.slots.toolbarProps} />\r\n <Stack className={tableGridClasses.filterBarWrap} sx={this.slots.filterBar?.sx}>\r\n {this.slots.filterBar?.before || null}\r\n <FilterBarInstance value={this.filterState} onChange={this.handleFilterChange} />\r\n {this.slots.filterBar?.after || null}\r\n </Stack>\r\n <div className={tableGridClasses.content}>\r\n <div className={[tableGridClasses.contentInner, tableGridClasses.contentPosition].join(' ')}>\r\n <Grid container spacing={2} {...this.slots.gridContainer}>\r\n {items.map((item, index) => (\r\n <Grid key={params.getSelecterId(item).toString() + index} item {...this.mergeConfig.size} {...this.slots.gridItem}>\r\n <div className={tableGridClasses.item}>\r\n <TableGridItem value={item} />\r\n <Box className={tableGridClasses.actions}>\r\n <ItemActions value={item} {...actionProps} />\r\n </Box>\r\n </div>\r\n </Grid>\r\n ))}\r\n </Grid>\r\n </div>\r\n <Fade in={this.filterState.loading} unmountOnExit>\r\n <div className={[tableGridClasses.overlay, tableGridClasses.contentPosition].join(' ')}>\r\n <CircularProgress size={36} />\r\n </div>\r\n </Fade>\r\n <Fade in={items.length < 1 && !this.filterState.loading} unmountOnExit>\r\n <div className={[tableGridClasses.noItems, tableGridClasses.contentPosition].join(' ')}>\r\n <Typography variant='body2'>No items data</Typography>\r\n </div>\r\n </Fade>\r\n </div>\r\n <Divider sx={{ position: 'relative', zIndex: 2 }} />\r\n <TablePagination\r\n component='div'\r\n count={this.props.data.totalItems ?? 0}\r\n page={pagination.page}\r\n onPageChange={this.handleChangePage}\r\n rowsPerPage={pagination.pageSize}\r\n onRowsPerPageChange={this.handleChangeRowsPerPage}\r\n slotProps={{ select: { MenuProps: { disableScrollLock: true } } }}\r\n {...this.slots.tablePaginationProps}\r\n />\r\n </TableGridStyled>\r\n )\r\n }\r\n\r\n preRender = (children?: ReactNode) => (\r\n <GlobalModal>\r\n <PopoverGlobal.Provider />\r\n {children}\r\n </GlobalModal>\r\n )\r\n\r\n getPagination = (): IPaginationModel => this.filterState.pagination ?? defaultPagination\r\n\r\n getRootClasses = () => {\r\n const classes = [tableGridClasses.root]\r\n if (this.filterState.loading) classes.push(tableGridClasses.loading)\r\n return classes.join(' ')\r\n }\r\n\r\n getItems = () => {\r\n return this.props.data.items ?? []\r\n }\r\n\r\n handleFilterChange = (filterStateChange: IFilterState<T>) => {\r\n this.setFilterState(filterStateChange)\r\n }\r\n\r\n handleChangePage = (_: RMEvent<HTMLButtonElement, MouseEvent> | null, page: number) => {\r\n const pagination = this.getPagination()\r\n this.setFilterState({ pagination: { page, pageSize: pagination.pageSize } })\r\n }\r\n\r\n handleChangeRowsPerPage: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = (event) => {\r\n this.setFilterState({ pagination: { page: 0, pageSize: parseInt(event.target.value, 10) } })\r\n }\r\n }\r\n\r\n return TableGrid\r\n}\r\n\r\nexport default CreateTableGrid\r\n"],"names":["CreateTableGrid","params","_params$filterBarConf","FilterBarInstance","CreateFilterBar","filterBarConfigs","fields","ItemActions","CreateTableGridItemActions","TableGrid","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","pagination","defaultPagination","value","details","filterStateStore","_objectSpread","mergeObjects","filterState","props","onFilterChange","forceUpdate","error","console","log","children","_jsxs","GlobalModal","_jsx","PopoverGlobal","Provider","_this$filterState$pag","classes","tableGridClasses","root","loading","push","join","_this$props$data$item","data","items","filterStateChange","setFilterState","_","page","getPagination","pageSize","event","parseInt","target","_inherits","Component","_createClass","key","get","_this$props$filter","filter","_ref","_this$props$slots$ite","_this$props$slots","_ref2","_this$props$slots$too","_this$props$slots2","_params$slots","Object","assign","slots","TableGridItem","item","ItemDefault","ToolbarPannel","toolbar","ToolbarPannelDefault","_params$size","size","xs","sm","md","_this$slots$filterBar","_this$slots$filterBar2","_this$slots$filterBar3","_this$props$data$tota","_this2","_this$slots","actionProps","getItems","preRender","TableGridStyled","className","getRootClasses","title","toolbarProps","Stack","filterBarWrap","sx","filterBar","before","onChange","handleFilterChange","after","content","contentInner","contentPosition","Grid","container","spacing","gridContainer","map","index","mergeConfig","gridItem","Box","actions","getSelecterId","toString","Fade","in","unmountOnExit","overlay","CircularProgress","noItems","Typography","variant","Divider","position","zIndex","TablePagination","component","count","totalItems","onPageChange","handleChangePage","rowsPerPage","onRowsPerPageChange","handleChangeRowsPerPage","slotProps","select","MenuProps","disableScrollLock","tablePaginationProps"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as r,createClass as o,classCallCheck as e,callSuper as
|
|
1
|
+
import{inherits as r,createClass as o,classCallCheck as e,callSuper as i,defineProperty as t,toConsumableArray as n,objectSpread2 as a}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as l,Fragment as s,jsxs as p}from"react/jsx-runtime";import{Component as c}from"react";import{styled as m,Box as u,colors as d,ListItem as f,IconButton as h,List as v,ListItemButton as g,ListItemIcon as y,ListItemText as b}from"@mui/material";import A from"@mui/icons-material/Edit";import C from"@mui/icons-material/MoreVert";import I from"@mui/icons-material/DeleteOutline";import k from"../api-context/popover-global.js";import{mapGlobalModalContext as x}from"../api-context/global-modal.js";var E={Edit:l(A,{fontSize:"small",color:"primary"}),Delete:l(I,{fontSize:"small",color:"error"})};function P(){var m=function(){function m(){var r;e(this,m);for(var o=arguments.length,c=new Array(o),u=0;u<o;u++)c[u]=arguments[u];return r=i(this,m,[].concat(c)),t(r,"isVisible",function(){var o=r.props.menuList,e=[].concat(n(r.singleOrArrayToArray(null==o?void 0:o.before)),n(r.singleOrArrayToArray(null==o?void 0:o.after)));return!!r.props.formEdit||!!r.props.formDelete||e.length>0}),t(r,"singleOrArrayToArray",function(r){return r?Array.isArray(r)?r:[r]:[]}),t(r,"renderItems",function(o){return o?(Array.isArray(o)?o:[o]).map(function(o,e){var i=o.name+e,t=o.override;if(t)return l(t,{onClose:k.Api.close},i);var n=o.listItemPropsGetter?o.listItemPropsGetter(r.props.value):o.listItemProps;return l(M,a(a({disablePadding:!0,onClick:function(e){!1!==o.closableOnClick&&k.Api.close(),o.onClick&&o.onClick(e,r.props.value)}},n),{},{children:p(g,{children:[l(y,{children:o.icon}),l(b,{primary:o.name})]})}),i)}):l(s,{})}),t(r,"renderItemWithForm",function(o,e,i){return e?x(function(t){return l(M,{disablePadding:!0,onClick:function(){k.Api.close(),t.show(a({renderContent:function(){return e(r.props.value)}},i))},children:p(g,{children:[l(y,{children:E[o]}),l(b,{primary:o})]})})}):l(s,{})}),r}return r(m,c),o(m,[{key:"render",value:function(){var r=this;return this.isVisible()?l(T,{children:l(h,{size:"small",onClick:function(o){var e,i,t;k.Api.open({anchorEl:o.currentTarget,popoverProps:{anchorOrigin:{vertical:"top",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"}},content:p(v,{children:[r.renderItems(null===(e=r.props.menuList)||void 0===e?void 0:e.before),r.renderItemWithForm("Edit",r.props.formEdit,r.props.buttonEditConfig),r.renderItemWithForm("Delete",r.props.formDelete,null!==(i=r.props.buttonEditConfig)&&void 0!==i?i:{backdropActivated:!0}),r.renderItems(null===(t=r.props.menuList)||void 0===t?void 0:t.after)]})})},children:l(C,{fontSize:"small"})})}):l(s,{})}}])}();return m}var T=m(u)({background:d.common.white,borderRadius:"6px","& > .MuiButtonBase-root":{borderRadius:"6px"}}),M=m(f)({minWidth:"150px",".MuiListItemIcon-root":{minWidth:"40px"},".MuiListItemText-root .MuiTypography-root":{color:d.grey[800]},"&:hover":{".MuiListItemText-root .MuiTypography-root":{background:d.grey[100],color:d.grey[900]}}});export{P as CreateTableGridItemActions};
|
|
2
2
|
//# sourceMappingURL=item-actions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item-actions.js","sources":["../../../src/table-grid/item-actions.tsx"],"sourcesContent":["import React, { Component, ComponentType, ReactNode } from 'react'\r\nimport { Box, colors, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemProps, ListItemText, styled } from '@mui/material'\r\nimport EditIcon from '@mui/icons-material/Edit'\r\nimport MoreVertIcon from '@mui/icons-material/MoreVert'\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'\r\nimport { ClosePopover, GlobalModalState, mapGlobalModalContext, PopoverGlobal } from '../api-context'\r\n\r\nexport type ITableGridItemActionType = 'Edit' | 'Delete'\r\n\r\nconst mapIcons: { [key in ITableGridItemActionType]: ReactNode } = {\r\n Edit: <EditIcon fontSize='small' color='primary' />,\r\n Delete: <DeleteOutlineIcon fontSize='small' color='error' />\r\n}\r\n\r\nexport interface ITableGridItemActionsBaseProps<T> {\r\n value: T\r\n}\r\n\r\nexport type IActionFormGetter<T> = (value: T) => React.ReactNode\r\n\r\nexport interface IActionMenuItemDef<T> {\r\n name: string\r\n icon?: ReactNode\r\n /** Whether this item should trigger a close action when clicked. @default true */\r\n closableOnClick?: boolean\r\n /** Handler called when item is clicked */\r\n onClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, value: T) => void\r\n listItemProps?: ListItemProps\r\n listItemPropsGetter?: (value: T) => ListItemProps & { [key: string]: any }\r\n /**\r\n * Optional custom ReactNode to override the entire ListItem UI.\r\n * If provided, this will be rendered instead of the default ListItem structure\r\n * (icon + text + click behavior).\r\n */\r\n override?: ComponentType<{ onClose?: ClosePopover }>\r\n}\r\n\r\nexport interface TableGridItemActionsConfig<T> {\r\n formEdit?: IActionFormGetter<T>\r\n formDelete?: IActionFormGetter<T>\r\n buttonEditConfig?: GlobalModalState\r\n buttonDeleteConfig?: GlobalModalState\r\n menuList?: {\r\n before?: SingleOrArray<IActionMenuItemDef<T>>\r\n after?: SingleOrArray<IActionMenuItemDef<T>>\r\n }\r\n}\r\n\r\nexport interface ITableGridItemActionsProps<T> extends ITableGridItemActionsBaseProps<T>, TableGridItemActionsConfig<T> {}\r\n\r\nexport function CreateTableGridItemActions<T>() {\r\n class TableGridItemActions extends Component<ITableGridItemActionsProps<T>> {\r\n render() {\r\n if (!this.isVisible()) return <></>\r\n return (\r\n <Wrap>\r\n <IconButton\r\n size='small'\r\n onClick={(e) => {\r\n PopoverGlobal.Api.open({\r\n anchorEl: e.currentTarget,\r\n popoverProps: { anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' } },\r\n content: (\r\n <List>\r\n {this.renderItems(this.props.menuList?.before)}\r\n {this.renderItemWithForm('Edit', this.props.formEdit, this.props.buttonEditConfig)}\r\n {this.renderItemWithForm('Delete', this.props.formDelete, this.props.buttonEditConfig ?? { backdropActivated: true })}\r\n {this.renderItems(this.props.menuList?.after)}\r\n </List>\r\n )\r\n })\r\n }}\r\n >\r\n <MoreVertIcon fontSize='small' />\r\n </IconButton>\r\n </Wrap>\r\n )\r\n }\r\n\r\n isVisible = () => {\r\n const { menuList } = this.props\r\n const list = [...this.singleOrArrayToArray(menuList?.before), ...this.singleOrArrayToArray(menuList?.after)]\r\n return !!this.props.formEdit || !!this.props.formDelete || list.length > 0\r\n }\r\n\r\n singleOrArrayToArray = (value?: SingleOrArray<IActionMenuItemDef<T>>): IActionMenuItemDef<T>[] => {\r\n if (!value) return []\r\n return Array.isArray(value) ? value : [value]\r\n }\r\n\r\n renderItems = (value?: SingleOrArray<IActionMenuItemDef<T>>) => {\r\n if (!value) return <></>\r\n const list = Array.isArray(value) ? value : [value]\r\n return list.map((item, index) => {\r\n const key = item.name + index\r\n const { override: Override } = item\r\n if (Override) return <Override key={key} onClose={PopoverGlobal.Api.close} />\r\n const itemProps = item.listItemPropsGetter ? item.listItemPropsGetter(this.props.value) : item.listItemProps\r\n return (\r\n <ListItemCustom\r\n key={key}\r\n disablePadding\r\n onClick={(e) => {\r\n if (item.closableOnClick !== false) PopoverGlobal.Api.close()\r\n item.onClick && item.onClick(e, this.props.value)\r\n }}\r\n {...itemProps}\r\n >\r\n <ListItemButton>\r\n <ListItemIcon>{item.icon}</ListItemIcon>\r\n <ListItemText primary={item.name} />\r\n </ListItemButton>\r\n </ListItemCustom>\r\n )\r\n })\r\n }\r\n\r\n renderItemWithForm = (name: ITableGridItemActionType, form?: IActionFormGetter<T>, globalState?: GlobalModalState) => {\r\n if (!form) return <></>\r\n return mapGlobalModalContext((context) => (\r\n <ListItemCustom\r\n disablePadding\r\n onClick={() => {\r\n PopoverGlobal.Api.close()\r\n context.show({ renderContent: () => form(this.props.value), ...globalState })\r\n }}\r\n >\r\n <ListItemButton>\r\n <ListItemIcon>{mapIcons[name]}</ListItemIcon>\r\n <ListItemText primary={name} />\r\n </ListItemButton>\r\n </ListItemCustom>\r\n ))\r\n }\r\n }\r\n return TableGridItemActions\r\n}\r\n\r\nconst Wrap = styled(Box)({\r\n background: colors.common.white,\r\n borderRadius: '6px',\r\n '& > .MuiButtonBase-root': {\r\n borderRadius: '6px'\r\n }\r\n})\r\n\r\nconst ListItemCustom = styled(ListItem)({\r\n minWidth: '150px',\r\n '.MuiListItemIcon-root': {\r\n minWidth: '40px'\r\n },\r\n '.MuiListItemText-root .MuiTypography-root': {\r\n color: colors.grey[800]\r\n },\r\n '&:hover': {\r\n '.MuiListItemText-root .MuiTypography-root': {\r\n background: colors.grey[100],\r\n color: colors.grey[900]\r\n }\r\n }\r\n})\r\n"],"names":["mapIcons","Edit","_jsx","EditIcon","fontSize","color","Delete","DeleteOutlineIcon","CreateTableGridItemActions","TableGridItemActions","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","menuList","props","list","_toConsumableArray","singleOrArrayToArray","before","after","formEdit","formDelete","value","isArray","map","item","index","key","name","Override","override","onClose","PopoverGlobal","Api","close","itemProps","listItemPropsGetter","listItemProps","ListItemCustom","_objectSpread","disablePadding","onClick","e","closableOnClick","children","_jsxs","ListItemButton","ListItemIcon","icon","ListItemText","primary","form","globalState","mapGlobalModalContext","context","show","renderContent","_inherits","Component","_createClass","_this2","isVisible","Wrap","IconButton","size","_this2$props$menuList","_this2$props$buttonEd","_this2$props$menuList2","open","anchorEl","currentTarget","popoverProps","anchorOrigin","vertical","horizontal","transformOrigin","content","List","renderItems","renderItemWithForm","buttonEditConfig","backdropActivated","MoreVertIcon","styled","Box","background","colors","common","white","borderRadius","ListItem","minWidth","grey"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"item-actions.js","sources":["../../../src/table-grid/item-actions.tsx"],"sourcesContent":["import React, { Component, ComponentType, ReactNode } from 'react'\r\nimport { Box, colors, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemProps, ListItemText, styled } from '@mui/material'\r\nimport EditIcon from '@mui/icons-material/Edit'\r\nimport MoreVertIcon from '@mui/icons-material/MoreVert'\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'\r\nimport { ClosePopover, GlobalModalState, mapGlobalModalContext, PopoverGlobal } from '../api-context'\r\n\r\nexport type ITableGridItemActionType = 'Edit' | 'Delete'\r\n\r\nconst mapIcons: { [key in ITableGridItemActionType]: ReactNode } = {\r\n Edit: <EditIcon fontSize='small' color='primary' />,\r\n Delete: <DeleteOutlineIcon fontSize='small' color='error' />\r\n}\r\n\r\nexport interface ITableGridItemActionsBaseProps<T> {\r\n value: T\r\n}\r\n\r\nexport type IActionFormGetter<T> = (value: T) => React.ReactNode\r\n\r\nexport interface IActionMenuItemDef<T> {\r\n name: string\r\n icon?: ReactNode\r\n /** Whether this item should trigger a close action when clicked. @default true */\r\n closableOnClick?: boolean\r\n /** Handler called when item is clicked */\r\n onClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, value: T) => void\r\n listItemProps?: ListItemProps\r\n listItemPropsGetter?: (value: T) => ListItemProps & { [key: string]: any }\r\n /**\r\n * Optional custom ReactNode to override the entire ListItem UI.\r\n * If provided, this will be rendered instead of the default ListItem structure\r\n * (icon + text + click behavior).\r\n */\r\n override?: ComponentType<{ onClose?: ClosePopover }>\r\n}\r\n\r\nexport interface TableGridItemActionsConfig<T> {\r\n formEdit?: IActionFormGetter<T>\r\n formDelete?: IActionFormGetter<T>\r\n buttonEditConfig?: GlobalModalState\r\n buttonDeleteConfig?: GlobalModalState\r\n menuList?: {\r\n before?: SingleOrArray<IActionMenuItemDef<T>>\r\n after?: SingleOrArray<IActionMenuItemDef<T>>\r\n }\r\n}\r\n\r\nexport interface ITableGridItemActionsProps<T> extends ITableGridItemActionsBaseProps<T>, TableGridItemActionsConfig<T> {}\r\n\r\nexport function CreateTableGridItemActions<T>() {\r\n class TableGridItemActions extends Component<ITableGridItemActionsProps<T>> {\r\n render() {\r\n if (!this.isVisible()) return <></>\r\n return (\r\n <Wrap>\r\n <IconButton\r\n size='small'\r\n onClick={(e) => {\r\n PopoverGlobal.Api.open({\r\n anchorEl: e.currentTarget,\r\n popoverProps: { anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' } },\r\n content: (\r\n <List>\r\n {this.renderItems(this.props.menuList?.before)}\r\n {this.renderItemWithForm('Edit', this.props.formEdit, this.props.buttonEditConfig)}\r\n {this.renderItemWithForm('Delete', this.props.formDelete, this.props.buttonEditConfig ?? { backdropActivated: true })}\r\n {this.renderItems(this.props.menuList?.after)}\r\n </List>\r\n )\r\n })\r\n }}\r\n >\r\n <MoreVertIcon fontSize='small' />\r\n </IconButton>\r\n </Wrap>\r\n )\r\n }\r\n\r\n isVisible = () => {\r\n const { menuList } = this.props\r\n const list = [...this.singleOrArrayToArray(menuList?.before), ...this.singleOrArrayToArray(menuList?.after)]\r\n return !!this.props.formEdit || !!this.props.formDelete || list.length > 0\r\n }\r\n\r\n singleOrArrayToArray = (value?: SingleOrArray<IActionMenuItemDef<T>>): IActionMenuItemDef<T>[] => {\r\n if (!value) return []\r\n return Array.isArray(value) ? value : [value]\r\n }\r\n\r\n renderItems = (value?: SingleOrArray<IActionMenuItemDef<T>>) => {\r\n if (!value) return <></>\r\n const list = Array.isArray(value) ? value : [value]\r\n return list.map((item, index) => {\r\n const key = item.name + index\r\n const { override: Override } = item\r\n if (Override) return <Override key={key} onClose={PopoverGlobal.Api.close} />\r\n const itemProps = item.listItemPropsGetter ? item.listItemPropsGetter(this.props.value) : item.listItemProps\r\n return (\r\n <ListItemCustom\r\n key={key}\r\n disablePadding\r\n onClick={(e) => {\r\n if (item.closableOnClick !== false) PopoverGlobal.Api.close()\r\n item.onClick && item.onClick(e, this.props.value)\r\n }}\r\n {...itemProps}\r\n >\r\n <ListItemButton>\r\n <ListItemIcon>{item.icon}</ListItemIcon>\r\n <ListItemText primary={item.name} />\r\n </ListItemButton>\r\n </ListItemCustom>\r\n )\r\n })\r\n }\r\n\r\n renderItemWithForm = (name: ITableGridItemActionType, form?: IActionFormGetter<T>, globalState?: GlobalModalState) => {\r\n if (!form) return <></>\r\n return mapGlobalModalContext((context) => (\r\n <ListItemCustom\r\n disablePadding\r\n onClick={() => {\r\n PopoverGlobal.Api.close()\r\n context.show({ renderContent: () => form(this.props.value), ...globalState })\r\n }}\r\n >\r\n <ListItemButton>\r\n <ListItemIcon>{mapIcons[name]}</ListItemIcon>\r\n <ListItemText primary={name} />\r\n </ListItemButton>\r\n </ListItemCustom>\r\n ))\r\n }\r\n }\r\n return TableGridItemActions\r\n}\r\n\r\nconst Wrap = styled(Box)({\r\n background: colors.common.white,\r\n borderRadius: '6px',\r\n '& > .MuiButtonBase-root': {\r\n borderRadius: '6px'\r\n }\r\n})\r\n\r\nconst ListItemCustom = styled(ListItem)({\r\n minWidth: '150px',\r\n '.MuiListItemIcon-root': {\r\n minWidth: '40px'\r\n },\r\n '.MuiListItemText-root .MuiTypography-root': {\r\n color: colors.grey[800]\r\n },\r\n '&:hover': {\r\n '.MuiListItemText-root .MuiTypography-root': {\r\n background: colors.grey[100],\r\n color: colors.grey[900]\r\n }\r\n }\r\n})\r\n"],"names":["mapIcons","Edit","_jsx","EditIcon","fontSize","color","Delete","DeleteOutlineIcon","CreateTableGridItemActions","TableGridItemActions","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","menuList","props","list","_toConsumableArray","singleOrArrayToArray","before","after","formEdit","formDelete","value","isArray","map","item","index","key","name","Override","override","onClose","PopoverGlobal","Api","close","itemProps","listItemPropsGetter","listItemProps","ListItemCustom","_objectSpread","disablePadding","onClick","e","closableOnClick","children","_jsxs","ListItemButton","ListItemIcon","icon","ListItemText","primary","form","globalState","mapGlobalModalContext","context","show","renderContent","_inherits","Component","_createClass","_this2","isVisible","Wrap","IconButton","size","_this2$props$menuList","_this2$props$buttonEd","_this2$props$menuList2","open","anchorEl","currentTarget","popoverProps","anchorOrigin","vertical","horizontal","transformOrigin","content","List","renderItems","renderItemWithForm","buttonEditConfig","backdropActivated","MoreVertIcon","styled","Box","background","colors","common","white","borderRadius","ListItem","minWidth","grey"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectSpread2 as t,defineProperty as r,inherits as e,createClass as o,classCallCheck as i,callSuper as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a,jsxs as l,Fragment as s}from"react/jsx-runtime";import{Component as p}from"react";import{styled as u,Typography as d,Box as
|
|
1
|
+
import{objectSpread2 as t,defineProperty as r,inherits as e,createClass as o,classCallCheck as i,callSuper as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as a,jsxs as l,Fragment as s}from"react/jsx-runtime";import{Component as p}from"react";import{styled as u,Typography as d,Box as f,Tooltip as c,Button as m}from"@mui/material";import h from"@mui/icons-material/AddCircleOutline";import{Breadcrumbs as v}from"../components/breadcrumbs.js";import{mapGlobalModalContext as x}from"../api-context/global-modal.js";var b=function(){function u(){var e;i(this,u);for(var o=arguments.length,l=new Array(o),p=0;p<o;p++)l[p]=arguments[p];return e=n(this,u,[].concat(l)),r(e,"renderButtonCreate",function(){return e.props.formCreate?x(function(r){var o;return a(c,{title:"Create new",children:a(m,t(t({size:"small",onClick:function(){return r.show({renderContent:function(){return e.props.formCreate}})},startIcon:a(h,{fontSize:"small"}),sx:{fontWeight:600},variant:"contained"},null===(o=e.props.slots)||void 0===o?void 0:o.buttonCreateProps),{},{children:"Create"}))})}):a(s,{})}),r(e,"renderTitle",function(){var t,r=null!==(t=e.props)&&void 0!==t?t:{},o=r.title,i=r.breadcrumbs;return i?a(v,{value:i}):a("string"==typeof o?g:s,{children:o})}),e}return e(u,p),o(u,[{key:"render",value:function(){var r,e,o,i,n;if(!1!==this.props.visible)return l(C,t(t({},null===(r=this.props.slots)||void 0===r?void 0:r.rootProps),{},{children:[null===(e=this.props.titleSlots)||void 0===e?void 0:e.before,this.renderTitle(),null===(o=this.props.titleSlots)||void 0===o?void 0:o.after,a(f,{sx:{flex:{xs:"0 0 auto",md:1},width:{xs:"100%",md:"auto"}}}),null===(i=this.props.actionSlots)||void 0===i?void 0:i.before,this.renderButtonCreate(),null===(n=this.props.actionSlots)||void 0===n?void 0:n.after]}))}}])}(),g=u(function(r){return a(d,t({noWrap:!0,variant:"subtitle1"},r))})({fontWeight:700,flex:1}),C=u(f)(function(t){var e=t.theme;return r({height:"var(--height-toolbar, 56px)",display:"flex",alignItems:"center",gap:"8px",padding:"0 6px",flexWrap:"wrap"},e.breakpoints.down("sm"),{height:"auto",padding:"12px 0",alignItems:"flex-start"})});export{b as default};
|
|
2
2
|
//# sourceMappingURL=toolbar-pannel.js.map
|