dinocollab-core 2.2.3 → 2.2.5
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/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/filter-input.units.js +1 -1
- package/dist/src/filter-bar/components/filter-input.units.js.map +1 -1
- package/dist/src/filter-bar/helpers.js +1 -1
- package/dist/src/filter-bar/helpers.js.map +1 -1
- package/dist/src/filter-bar/index.create.js +1 -1
- package/dist/src/filter-bar/index.create.js.map +1 -1
- package/dist/src/filter-bar/index.dino.js +1 -1
- package/dist/src/filter-bar/index.dino.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/toolbar-pannel.js +1 -1
- package/dist/src/table/toolbar-pannel.js.map +1 -1
- package/dist/types/filter-bar/components/filter-input.d.ts +4 -0
- package/dist/types/filter-bar/components/filter-input.types.d.ts +6 -2
- package/dist/types/filter-bar/components/filter-input.units.d.ts +4 -1
- package/dist/types/filter-bar/helpers.d.ts +5 -0
- package/dist/types/filter-bar/index.create.d.ts +2 -38
- package/dist/types/filter-bar/index.dino.d.ts +2 -1
- package/dist/types/form/modal-wrapper.d.ts +12 -5
- package/dist/types/table/toolbar-pannel.d.ts +15 -6
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as
|
|
1
|
+
import{defineProperty as o,objectSpread2 as n,slicedToArray as t}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useContext as i,useState as l,useMemo as a,useEffect as u,createRef as s}from"react";import{styled as c,Box as p,alpha as d,IconButton as m,InputBase as f,MenuList as v,MenuItem as h,Typography as b}from"@mui/material";import x from"@mui/material/ClickAwayListener";import{KeySpecial as I}from"../types.js";import{useFilterActions as g}from"./hooks.js";import{mapSpecialLabel as y}from"../helpers.js";import{FilterBarContext as C}from"../index.context.js";import{PopperCustom as S,PopperContent as F}from"./popper-custom.js";import{InputAdornmentRight as w,InputAdornmentLeft as D,getFieldsByMatches as j}from"./filter-input.units.js";import k from"@mui/icons-material/Search";function z(o){var c=N,d=function(o){var t=o.fields,e=o.enableQuickSearch,r=void 0===e||e,i=I.quickSearch,l=n({},t);if(r){var a=l[i],u=null!=a&&a.label?a.label:y[i],s=Object.assign({},l[i],{field:i,label:u});l[i]=s}else delete l[i];return n(n({},o),{},{fields:l})}(o);return function(I){var y,z,N,B,A,E=s(),O=s(),q=i(C),R=g(q),T=R.addFilter,W=R.replaceFilter,K=l(null),_=t(K,2),G=_[0],H=_[1],L=Boolean(G),M=l(""),Q=t(M,2),V=Q[0],J=Q[1],U=l("normal"),X=t(U,2),Y=X[0],Z=X[1],$=a(function(){var n,t=o.beforeInput,e=o.afterInput,r=Object.assign({},I.sx,null===(n=I.slots)||void 0===n||null===(n=n.rootProps)||void 0===n?void 0:n.sx);return{slots:Object.assign({},{beforeInput:t,afterInput:e},I.slots),rootSx:r}},[]),oo=o.minimalInput||(null===(y=I.slots)||void 0===y?void 0:y.minimalInput)||!1,no=l(oo),to=t(no,2),eo=to[0],ro=to[1];u(function(){eo||setTimeout(function(){var o;return null===(o=E.current)||void 0===o?void 0:o.focus()},0)},[eo]);var io=function(o){H(null),Z("normal"),o&&J(""),!oo||eo||""!==V&&!o||ro(!0)},lo=function(){var o;if(V){var n=null===(o=q.filterState.storeFilter)||void 0===o?void 0:o.quickSearch,t=(null==n?void 0:n.logic)||"or";W("quickSearch",{values:[V],logic:t}),io(!0)}},ao=function(){var o;oo&&eo?ro(!1):null===(o=E.current)||void 0===o||o.focus()},uo=[c.root];("focus"===Y||Boolean(V))&&uo.push(c.focus),oo&&(uo.push(c.minimalized),uo.push(eo?c.minimalCollapsed:c.minimalExpanded));var so,co=oo&&eo;return e(x,{onClickAway:function(o){io()},children:r(P,n(n({className:uo.join(" ")},null===(z=I.slots)||void 0===z?void 0:z.rootProps),{},{sx:$.rootSx,children:[co&&e(m,{size:"small",className:c.button,onClick:ao,"aria-label":"Open search",children:e(k,{fontSize:"small"})}),r("div",{className:c.rootInner,children:[(null===(N=$.slots)||void 0===N?void 0:N.beforeInput)||null,e(p,{className:c.beforeInput,ref:O}),e(f,{fullWidth:!0,className:c.input,autoComplete:"off",size:"small",inputRef:E,value:V,placeholder:"Search...",onKeyDown:function(o){var n=o.keyCode;if(13===n)o.stopPropagation(),o.preventDefault(),lo();else if(27===n){var t;o.stopPropagation(),o.preventDefault(),null==E||null===(t=E.current)||void 0===t||t.blur(),io(!0)}},onChange:function(o){var n=o.target.value||"";J(n);var t=Boolean(null==O?void 0:O.current)&&Boolean(n);n!==V&&H(t&&(null==O?void 0:O.current)||null)},onFocus:function(o){Z("focus"),Boolean(V)&&H((null==O?void 0:O.current)||o.currentTarget)},startAdornment:e(D,{onSearch:ao}),endAdornment:e(w,{hasKeyword:Boolean(V),onSubmit:lo,onClear:function(){return io(!0)}})}),(null===(B=$.slots)||void 0===B?void 0:B.afterInput)||null]}),e(S,n(n({anchorEl:G,open:L,placement:"bottom",transition:!0,disablePortal:!0},null===(A=$.slots)||void 0===A?void 0:A.popperProps),{},{children:(so=j(d,V),e(F,{title:"Filter Options",disableGutter:!0,onClose:function(){return H(null)},children:e(v,{className:c.menu,children:so.map(function(n,t){var e,i=n.field;if(!n)return null;var l=null!==(e=n.label)&&void 0!==e?e:i.toString(),a="".concat(l,': "').concat(V,'"');return r(h,{title:a,onClick:function(){return function(n){var t;if(V){var e=o.fields[n],r=null===(t=q.filterState.storeFilter)||void 0===t?void 0:t[n],i=(null==r?void 0:r.logic)||"or";null!=e&&e.singleValue?W(n,{values:[V],logic:i}):T(n,{values:[V],logic:i}),io(!0)}}(i)},className:c.menuItem,children:[r(b,{variant:"body2",sx:{fontWeight:500,flex:"0 0 auto"},children:[l,":"]}),r(b,{className:"",variant:"body2",color:"text.secondary",sx:{ml:1,flex:"1 1 auto"},noWrap:!0,children:['"',V,'"']})]},i.toString()+t)})})}))}))]}))})}}var N={root:"DinoFilterInput-root",rootInner:"DinoFilterInput-rootInner",minimalized:"DinoFilterInput-minimalized",minimalCollapsed:"DinoFilterInput-minimalCollapsed",minimalExpanded:"DinoFilterInput-minimalExpanded",button:"DinoFilterInput-button",input:"DinoFilterInput-input",focus:"DinoFilterInput-focus",beforeInput:"DinoFilterInput-beforeInput",menu:"DinoFilterInput-menu",menuItem:"DinoFilterInput-menuItem"},P=c(p)(function(n){var t=n.theme;return o(o(o(o(o(o(o({},"&.".concat(N.root),{height:"var(--dino-h-filter-input, 38px)",flex:1,border:"1px solid",borderColor:"transparent",borderRadius:t.shape.borderRadius,backgroundColor:t.palette.background.paper,transition:t.transitions.create(["border-color","box-shadow"])}),"&.".concat(N.root,":not(.").concat(N.minimalCollapsed,")"),o({borderColor:d(t.palette.divider,.12),"&:hover":{borderColor:t.palette.text.primary},"&.Mui-focused":{borderColor:t.palette.primary.main,boxShadow:"0 0 0 2px ".concat(t.palette.primary.main,"33")}},"&.".concat(N.focus),{borderColor:t.palette.primary.main,boxShadow:"0 0 0 2px ".concat(t.palette.primary.main,"33")})),".".concat(N.rootInner),{height:"100%",display:"flex",alignItems:"stretch"}),".".concat(N.beforeInput),{width:"1px",height:"100%",alignSelf:"stretch"}),".".concat(N.input),{padding:t.spacing(.5,1),input:{fontSize:"14px",padding:"4px 0 5px"}}),".".concat(N.button),{flex:"0 0 auto"}),"&.".concat(N.minimalized),o(o(o({display:"inline-flex",flex:"0 0 auto",gap:0,alignItems:"center"},".".concat(N.rootInner),{display:"none"}),"&.".concat(N.minimalCollapsed),{width:"var(--dino-w-filter-input, 30px)",transition:t.transitions.create("width"),border:"none"}),"&.".concat(N.minimalExpanded),o({width:"var(--dino-w-filter-input-expanded, 200px)",transition:t.transitions.create("width"),overflow:"visible"},".".concat(N.rootInner),{display:"flex"})))});export{z as createFilterInput,N as filterInputClasses};
|
|
2
2
|
//# sourceMappingURL=filter-input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-input.js","sources":["../../../../src/filter-bar/components/filter-input.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { createRef, useContext, useMemo, useState } from 'react'\r\nimport { Box, InputBase, MenuItem, MenuList, styled, Typography } from '@mui/material'\r\nimport ClickAwayListener from '@mui/material/ClickAwayListener'\r\nimport { KeySpecial } from '../types'\r\nimport { useFilterActions } from './hooks'\r\nimport { mapSpecialLabel } from '../helpers'\r\nimport { FilterBarContext } from '../index.context'\r\nimport { PopperContent, PopperCustom } from './popper-custom'\r\nimport { getFieldsByMatches, InputAdornmentRight } from './filter-input.units'\r\n// types\r\nimport type { FC } from 'react'\r\nimport type { InputBaseProps } from '@mui/material'\r\nimport type { TFieldType } from '../types'\r\nimport type { IFilterBarContext } from '../index.context'\r\nimport type { IFilterInputConfig, IFilterInputProps, IFilterInputSlots, TFieldInputConfigs } from './filter-input.types'\r\n\r\nconst initializeConfig = <T,>(config: IFilterInputConfig<T>): IFilterInputConfig<T> => {\r\n const { fields, enableQuickSearch = true } = config\r\n const qsKey = KeySpecial.quickSearch\r\n const mergedFields: TFieldInputConfigs<T> = { ...fields }\r\n\r\n if (enableQuickSearch) {\r\n const item = mergedFields[qsKey]\r\n const label = item?.label ? item.label : mapSpecialLabel[qsKey]\r\n const temp = Object.assign({}, mergedFields[qsKey], { field: qsKey, label })\r\n mergedFields[qsKey] = temp\r\n } else {\r\n delete mergedFields[qsKey]\r\n }\r\n\r\n return { ...config, fields: mergedFields }\r\n}\r\n\r\nexport function createFilterInput<T>(config: IFilterInputConfig<T>) {\r\n const classes = filterInputClasses\r\n const initialConfig = initializeConfig(config)\r\n\r\n const FilterInput: FC<IFilterInputProps<T>> = (props) => {\r\n const refInput = createRef<HTMLInputElement>()\r\n const refBeforeInput = createRef<HTMLElement>()\r\n\r\n const context = useContext(FilterBarContext) as IFilterBarContext<T>\r\n const { addFilter, replaceFilter } = useFilterActions<T>(context)\r\n\r\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\r\n const isOpen = Boolean(anchorEl)\r\n\r\n const [keywords, setKeywords] = useState<string>('')\r\n const [status, setStatus] = useState<'focus' | 'normal'>('normal')\r\n\r\n const mergedConfig = useMemo(() => {\r\n const { beforeInput, afterInput } = config\r\n const mergedSlots: IFilterInputSlots = Object.assign({}, { beforeInput, afterInput }, props.slots)\r\n return { slots: mergedSlots }\r\n }, [])\r\n\r\n const handleClose = (isClear?: boolean) => {\r\n setAnchorEl(null)\r\n setStatus('normal')\r\n if (isClear) setKeywords('')\r\n }\r\n\r\n const handleSubmitSearch = () => {\r\n if (!keywords) return\r\n const qsField = context.filterState.storeFilter?.quickSearch\r\n const logic = qsField?.logic || 'or'\r\n replaceFilter('quickSearch', { values: [keywords], logic })\r\n handleClose(true)\r\n }\r\n\r\n const handleKeyDown: InputBaseProps['onKeyDown'] = (event) => {\r\n const keyCode: number = event.keyCode\r\n if (keyCode === 13) {\r\n event.stopPropagation()\r\n event.preventDefault()\r\n handleSubmitSearch()\r\n } else if (keyCode === 27) {\r\n event.stopPropagation()\r\n event.preventDefault()\r\n refInput?.current?.blur()\r\n handleClose(true)\r\n }\r\n }\r\n\r\n const handleKeywordChange: InputBaseProps['onChange'] = (event) => {\r\n const finalValue = event.target.value || ''\r\n setKeywords(finalValue)\r\n\r\n const isOpenPopper = Boolean(refBeforeInput?.current) && Boolean(finalValue)\r\n if (finalValue !== keywords) setAnchorEl(isOpenPopper ? refBeforeInput?.current || null : null)\r\n }\r\n\r\n const handleFocus = (event: React.FocusEvent<HTMLElement>) => {\r\n setStatus('focus')\r\n if (!Boolean(keywords)) return\r\n setAnchorEl(refBeforeInput?.current || event.currentTarget)\r\n }\r\n\r\n const handleClickMenuItem = (field: TFieldType<T>) => {\r\n if (!keywords) return\r\n const fieldConfig = config.fields[field]\r\n const fieldValue = context.filterState.storeFilter?.[field]\r\n const logic = fieldValue?.logic || 'or'\r\n if (fieldConfig?.singleValue) {\r\n replaceFilter(field, { values: [keywords], logic })\r\n } else {\r\n addFilter(field, { values: [keywords], logic })\r\n }\r\n handleClose(true)\r\n }\r\n\r\n const handleClickSearch = () => {\r\n refInput.current?.focus()\r\n }\r\n\r\n const renderContent = () => {\r\n const fieldsList = getFieldsByMatches(initialConfig, keywords)\r\n return (\r\n <PopperContent title='Filter Options' disableGutter onClose={() => setAnchorEl(null)}>\r\n <MenuList className={classes.menu}>\r\n {fieldsList.map((x, i) => {\r\n const field = x.field\r\n if (!x) return null\r\n const label = x.label ?? field.toString()\r\n const title = `${label}: \"${keywords}\"`\r\n return (\r\n <MenuItem title={title} key={field.toString() + i} onClick={() => handleClickMenuItem(field)} className={classes.menuItem}>\r\n <Typography variant='body2' sx={{ fontWeight: 500, flex: '0 0 auto' }}>\r\n {label}:\r\n </Typography>\r\n <Typography className='' variant='body2' color='text.secondary' sx={{ ml: 1, flex: '1 1 auto' }} noWrap>\r\n \"{keywords}\"\r\n </Typography>\r\n </MenuItem>\r\n )\r\n })}\r\n </MenuList>\r\n </PopperContent>\r\n )\r\n }\r\n\r\n const rootClass = [classes.root]\r\n if (status === 'focus' || Boolean(keywords)) rootClass.push(classes.focus)\r\n\r\n return (\r\n <ClickAwayListener onClickAway={() => handleClose()}>\r\n <FilterInputStyled className={rootClass.join(' ')} {...props.slots?.rootProps}>\r\n <div className={classes.rootInner}>\r\n {mergedConfig.slots?.beforeInput || null}\r\n <Box className={classes.beforeInput} ref={refBeforeInput} />\r\n <InputBase\r\n fullWidth\r\n className={classes.input}\r\n autoComplete='off'\r\n size='small'\r\n inputRef={refInput}\r\n value={keywords}\r\n placeholder='Search...'\r\n onKeyDown={handleKeyDown}\r\n onChange={handleKeywordChange}\r\n onFocus={handleFocus}\r\n endAdornment={\r\n <InputAdornmentRight\r\n hasKeyword={Boolean(keywords)}\r\n onSubmit={handleSubmitSearch}\r\n onClear={() => handleClose(true)}\r\n onSearch={handleClickSearch}\r\n />\r\n }\r\n />\r\n {mergedConfig.slots?.afterInput || null}\r\n </div>\r\n <PopperCustom anchorEl={anchorEl} open={isOpen} placement='bottom' transition disablePortal {...mergedConfig.slots?.popperProps}>\r\n {renderContent()}\r\n </PopperCustom>\r\n </FilterInputStyled>\r\n </ClickAwayListener>\r\n )\r\n }\r\n return FilterInput\r\n}\r\n\r\nexport const filterInputClasses = {\r\n root: 'DinoFilterInput-root',\r\n rootInner: 'DinoFilterInput-rootInner',\r\n input: 'DinoFilterInput-input',\r\n focus: 'DinoFilterInput-focus',\r\n beforeInput: 'DinoFilterInput-beforeInput',\r\n menu: 'DinoFilterInput-menu',\r\n menuItem: 'DinoFilterInput-menuItem',\r\n menuItemKey: 'DinoFilterInput-menuItemKey'\r\n}\r\n\r\nconst FilterInputStyled = styled(Box)(({ theme }) => ({\r\n '--dino-filter-input-height': '38px',\r\n [`&.${filterInputClasses.root}`]: {\r\n flex: 1,\r\n border: `1px solid ${theme.palette.divider}`,\r\n borderRadius: theme.shape.borderRadius,\r\n backgroundColor: theme.palette.background.paper,\r\n transition: theme.transitions.create(['border-color', 'box-shadow']),\r\n '&:hover': { borderColor: theme.palette.text.primary },\r\n '&.Mui-focused': {\r\n borderColor: theme.palette.primary.main,\r\n boxShadow: `0 0 0 2px ${theme.palette.primary.main}33`\r\n },\r\n [`&.${filterInputClasses.focus}`]: {\r\n borderColor: theme.palette.primary.main,\r\n boxShadow: `0 0 0 2px ${theme.palette.primary.main}33`\r\n }\r\n },\r\n [`.${filterInputClasses.rootInner}`]: {\r\n height: 'var(--dino-filter-input-height)',\r\n display: 'flex',\r\n alignItems: 'stretch'\r\n },\r\n [`.${filterInputClasses.beforeInput}`]: { width: '1px', height: '100%', alignSelf: 'stretch' },\r\n [`.${filterInputClasses.input}`]: {\r\n padding: theme.spacing(0.5, 1),\r\n input: { fontSize: '14px', padding: '4px 0 5px' }\r\n }\r\n}))\r\n"],"names":["createFilterInput","config","classes","filterInputClasses","initialConfig","fields","_config$enableQuickSe","enableQuickSearch","qsKey","KeySpecial","quickSearch","mergedFields","_objectSpread","item","label","mapSpecialLabel","temp","Object","assign","field","initializeConfig","props","_props$slots","_mergedConfig$slots","_mergedConfig$slots2","_mergedConfig$slots3","fieldsList","refInput","createRef","refBeforeInput","context","useContext","FilterBarContext","_useFilterActions","useFilterActions","addFilter","replaceFilter","_useState","useState","_useState2","_slicedToArray","anchorEl","setAnchorEl","isOpen","Boolean","_useState3","_useState4","keywords","setKeywords","_useState5","_useState6","status","setStatus","mergedConfig","useMemo","beforeInput","afterInput","slots","handleClose","isClear","handleSubmitSearch","_context$filterState$","qsField","filterState","storeFilter","logic","values","rootClass","root","push","focus","_jsx","ClickAwayListener","onClickAway","_jsxs","FilterInputStyled","className","join","rootProps","children","rootInner","Box","ref","InputBase","fullWidth","input","autoComplete","size","inputRef","value","placeholder","onKeyDown","event","keyCode","stopPropagation","preventDefault","_refInput$current","current","blur","onChange","finalValue","target","isOpenPopper","onFocus","currentTarget","endAdornment","InputAdornmentRight","hasKeyword","onSubmit","onClear","onSearch","_refInput$current2","PopperCustom","open","placement","transition","disablePortal","popperProps","getFieldsByMatches","PopperContent","title","disableGutter","onClose","MenuList","menu","map","x","i","_x$label","toString","concat","MenuItem","onClick","_context$filterState$2","fieldConfig","fieldValue","singleValue","handleClickMenuItem","menuItem","Typography","variant","sx","fontWeight","flex","color","ml","noWrap","styled","_ref","theme","_defineProperty","border","palette","divider","borderRadius","shape","backgroundColor","background","paper","transitions","create","borderColor","text","primary","main","boxShadow","height","display","alignItems","width","alignSelf","padding","spacing","fontSize"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"filter-input.js","sources":["../../../../src/filter-bar/components/filter-input.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { createRef, useContext, useMemo, useState, useEffect } from 'react'\r\nimport { Box, InputBase, MenuItem, MenuList, styled, Typography, IconButton, alpha, Fade } from '@mui/material'\r\nimport ClickAwayListener from '@mui/material/ClickAwayListener'\r\nimport { KeySpecial } from '../types'\r\nimport { useFilterActions } from './hooks'\r\nimport { mapSpecialLabel } from '../helpers'\r\nimport { FilterBarContext } from '../index.context'\r\nimport { PopperContent, PopperCustom } from './popper-custom'\r\nimport { getFieldsByMatches, InputAdornmentLeft, InputAdornmentRight } from './filter-input.units'\r\nimport SearchIcon from '@mui/icons-material/Search'\r\n// types\r\nimport type { FC } from 'react'\r\nimport type { InputBaseProps } from '@mui/material'\r\nimport type { TFieldType } from '../types'\r\nimport type { IFilterBarContext } from '../index.context'\r\nimport type { IFilterInputConfig, IFilterInputProps, IFilterInputSlots, TFieldInputConfigs } from './filter-input.types'\r\n\r\nconst initializeConfig = <T,>(config: IFilterInputConfig<T>): IFilterInputConfig<T> => {\r\n const { fields, enableQuickSearch = true } = config\r\n const qsKey = KeySpecial.quickSearch\r\n const mergedFields: TFieldInputConfigs<T> = { ...fields }\r\n\r\n if (enableQuickSearch) {\r\n const item = mergedFields[qsKey]\r\n const label = item?.label ? item.label : mapSpecialLabel[qsKey]\r\n const temp = Object.assign({}, mergedFields[qsKey], { field: qsKey, label })\r\n mergedFields[qsKey] = temp\r\n } else {\r\n delete mergedFields[qsKey]\r\n }\r\n\r\n return { ...config, fields: mergedFields }\r\n}\r\n\r\nexport function createFilterInput<T>(config: IFilterInputConfig<T>) {\r\n const classes = filterInputClasses\r\n const initialConfig = initializeConfig(config)\r\n\r\n const FilterInput: FC<IFilterInputProps<T>> = (props) => {\r\n const refInput = createRef<HTMLInputElement>()\r\n const refBeforeInput = createRef<HTMLElement>()\r\n\r\n const context = useContext(FilterBarContext) as IFilterBarContext<T>\r\n const { addFilter, replaceFilter } = useFilterActions<T>(context)\r\n\r\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\r\n const isOpen = Boolean(anchorEl)\r\n\r\n const [keywords, setKeywords] = useState<string>('')\r\n const [status, setStatus] = useState<'focus' | 'normal'>('normal')\r\n\r\n const mergedConfig = useMemo(() => {\r\n const { beforeInput, afterInput } = config\r\n const mergedRootSx = Object.assign({}, props.sx, props.slots?.rootProps?.sx)\r\n const mergedSlots: IFilterInputSlots = Object.assign({}, { beforeInput, afterInput }, props.slots)\r\n return { slots: mergedSlots, rootSx: mergedRootSx }\r\n }, [])\r\n\r\n const isMinimal = config.minimalInput || props.slots?.minimalInput || false\r\n const [isCollapsed, setIsCollapsed] = useState<boolean>(isMinimal)\r\n\r\n useEffect(() => {\r\n if (!isCollapsed) {\r\n // focus input after expansion (next tick)\r\n setTimeout(() => refInput.current?.focus(), 0)\r\n }\r\n }, [isCollapsed])\r\n\r\n const handleClose = (isClear?: boolean) => {\r\n setAnchorEl(null)\r\n setStatus('normal')\r\n if (isClear) setKeywords('')\r\n if (isMinimal && !isCollapsed && (keywords === '' || isClear)) {\r\n setIsCollapsed(true)\r\n }\r\n }\r\n\r\n const handleSubmitSearch = () => {\r\n if (!keywords) return\r\n const qsField = context.filterState.storeFilter?.quickSearch\r\n const logic = qsField?.logic || 'or'\r\n replaceFilter('quickSearch', { values: [keywords], logic })\r\n handleClose(true)\r\n }\r\n\r\n const handleKeyDown: InputBaseProps['onKeyDown'] = (event) => {\r\n const keyCode: number = event.keyCode\r\n if (keyCode === 13) {\r\n event.stopPropagation()\r\n event.preventDefault()\r\n handleSubmitSearch()\r\n } else if (keyCode === 27) {\r\n event.stopPropagation()\r\n event.preventDefault()\r\n refInput?.current?.blur()\r\n handleClose(true)\r\n }\r\n }\r\n\r\n const handleKeywordChange: InputBaseProps['onChange'] = (event) => {\r\n const finalValue = event.target.value || ''\r\n setKeywords(finalValue)\r\n\r\n const isOpenPopper = Boolean(refBeforeInput?.current) && Boolean(finalValue)\r\n if (finalValue !== keywords) setAnchorEl(isOpenPopper ? refBeforeInput?.current || null : null)\r\n }\r\n\r\n const handleFocus = (event: React.FocusEvent<HTMLElement>) => {\r\n setStatus('focus')\r\n if (!Boolean(keywords)) return\r\n setAnchorEl(refBeforeInput?.current || event.currentTarget)\r\n }\r\n\r\n const handleClickMenuItem = (field: TFieldType<T>) => {\r\n if (!keywords) return\r\n const fieldConfig = config.fields[field]\r\n const fieldValue = context.filterState.storeFilter?.[field]\r\n const logic = fieldValue?.logic || 'or'\r\n if (fieldConfig?.singleValue) {\r\n replaceFilter(field, { values: [keywords], logic })\r\n } else {\r\n addFilter(field, { values: [keywords], logic })\r\n }\r\n handleClose(true)\r\n }\r\n\r\n const handleClickSearch = () => {\r\n if (isMinimal && isCollapsed) {\r\n setIsCollapsed(false)\r\n return\r\n }\r\n refInput.current?.focus()\r\n }\r\n\r\n const handleClickAway = (event: MouseEvent | TouchEvent) => {\r\n handleClose()\r\n }\r\n\r\n const renderContent = () => {\r\n const fieldsList = getFieldsByMatches(initialConfig, keywords)\r\n return (\r\n <PopperContent title='Filter Options' disableGutter onClose={() => setAnchorEl(null)}>\r\n <MenuList className={classes.menu}>\r\n {fieldsList.map((x, i) => {\r\n const field = x.field\r\n if (!x) return null\r\n const label = x.label ?? field.toString()\r\n const title = `${label}: \"${keywords}\"`\r\n return (\r\n <MenuItem title={title} key={field.toString() + i} onClick={() => handleClickMenuItem(field)} className={classes.menuItem}>\r\n <Typography variant='body2' sx={{ fontWeight: 500, flex: '0 0 auto' }}>\r\n {label}:\r\n </Typography>\r\n <Typography className='' variant='body2' color='text.secondary' sx={{ ml: 1, flex: '1 1 auto' }} noWrap>\r\n \"{keywords}\"\r\n </Typography>\r\n </MenuItem>\r\n )\r\n })}\r\n </MenuList>\r\n </PopperContent>\r\n )\r\n }\r\n\r\n const rootClass = [classes.root]\r\n if (status === 'focus' || Boolean(keywords)) rootClass.push(classes.focus)\r\n if (isMinimal) {\r\n rootClass.push(classes.minimalized)\r\n rootClass.push(isCollapsed ? classes.minimalCollapsed : classes.minimalExpanded)\r\n }\r\n\r\n const isIconOnly = isMinimal && isCollapsed\r\n\r\n return (\r\n <ClickAwayListener onClickAway={handleClickAway}>\r\n <FilterInputStyled className={rootClass.join(' ')} {...props.slots?.rootProps} sx={mergedConfig.rootSx}>\r\n {isIconOnly && (\r\n <IconButton size='small' className={classes.button} onClick={handleClickSearch} aria-label='Open search'>\r\n <SearchIcon fontSize='small' />\r\n </IconButton>\r\n )}\r\n\r\n <div className={classes.rootInner}>\r\n {mergedConfig.slots?.beforeInput || null}\r\n <Box className={classes.beforeInput} ref={refBeforeInput} />\r\n <InputBase\r\n fullWidth\r\n className={classes.input}\r\n autoComplete='off'\r\n size='small'\r\n inputRef={refInput}\r\n value={keywords}\r\n placeholder='Search...'\r\n onKeyDown={handleKeyDown}\r\n onChange={handleKeywordChange}\r\n onFocus={handleFocus}\r\n startAdornment={<InputAdornmentLeft onSearch={handleClickSearch} />}\r\n endAdornment={<InputAdornmentRight hasKeyword={Boolean(keywords)} onSubmit={handleSubmitSearch} onClear={() => handleClose(true)} />}\r\n />\r\n {mergedConfig.slots?.afterInput || null}\r\n </div>\r\n <PopperCustom anchorEl={anchorEl} open={isOpen} placement='bottom' transition disablePortal {...mergedConfig.slots?.popperProps}>\r\n {renderContent()}\r\n </PopperCustom>\r\n </FilterInputStyled>\r\n </ClickAwayListener>\r\n )\r\n }\r\n return FilterInput\r\n}\r\n\r\nexport const filterInputClasses = {\r\n root: 'DinoFilterInput-root',\r\n rootInner: 'DinoFilterInput-rootInner',\r\n minimalized: 'DinoFilterInput-minimalized',\r\n minimalCollapsed: 'DinoFilterInput-minimalCollapsed',\r\n minimalExpanded: 'DinoFilterInput-minimalExpanded',\r\n button: 'DinoFilterInput-button',\r\n input: 'DinoFilterInput-input',\r\n focus: 'DinoFilterInput-focus',\r\n beforeInput: 'DinoFilterInput-beforeInput',\r\n menu: 'DinoFilterInput-menu',\r\n menuItem: 'DinoFilterInput-menuItem',\r\n menuItemKey: 'DinoFilterInput-menuItemKey'\r\n}\r\n\r\nconst FilterInputStyled = styled(Box)(({ theme }) => ({\r\n // Note: we use CSS variable\r\n // '--dino-h-filter-input': '38px',\r\n\r\n [`&.${filterInputClasses.root}`]: {\r\n height: 'var(--dino-h-filter-input, 38px)',\r\n flex: 1,\r\n border: '1px solid',\r\n borderColor: 'transparent',\r\n borderRadius: theme.shape.borderRadius,\r\n backgroundColor: theme.palette.background.paper,\r\n transition: theme.transitions.create(['border-color', 'box-shadow'])\r\n },\r\n [`&.${filterInputClasses.root}:not(.${filterInputClasses.minimalCollapsed})`]: {\r\n borderColor: alpha(theme.palette.divider, 0.12),\r\n '&:hover': { borderColor: theme.palette.text.primary },\r\n '&.Mui-focused': {\r\n borderColor: theme.palette.primary.main,\r\n boxShadow: `0 0 0 2px ${theme.palette.primary.main}33`\r\n },\r\n [`&.${filterInputClasses.focus}`]: {\r\n borderColor: theme.palette.primary.main,\r\n boxShadow: `0 0 0 2px ${theme.palette.primary.main}33`\r\n }\r\n },\r\n [`.${filterInputClasses.rootInner}`]: { height: '100%', display: 'flex', alignItems: 'stretch' },\r\n [`.${filterInputClasses.beforeInput}`]: { width: '1px', height: '100%', alignSelf: 'stretch' },\r\n [`.${filterInputClasses.input}`]: {\r\n padding: theme.spacing(0.5, 1),\r\n input: { fontSize: '14px', padding: '4px 0 5px' }\r\n },\r\n [`.${filterInputClasses.button}`]: { flex: '0 0 auto' },\r\n // Minimal style: collapsed (icon-only) and expanded (200px)\r\n [`&.${filterInputClasses.minimalized}`]: {\r\n display: 'inline-flex',\r\n flex: '0 0 auto',\r\n gap: 0,\r\n alignItems: 'center',\r\n [`.${filterInputClasses.rootInner}`]: {\r\n display: 'none' // hide input and adornments when minimalized, only show the search icon button\r\n },\r\n [`&.${filterInputClasses.minimalCollapsed}`]: {\r\n width: 'var(--dino-w-filter-input, 30px)',\r\n transition: theme.transitions.create('width'),\r\n border: 'none'\r\n },\r\n [`&.${filterInputClasses.minimalExpanded}`]: {\r\n width: 'var(--dino-w-filter-input-expanded, 200px)',\r\n transition: theme.transitions.create('width'),\r\n overflow: 'visible',\r\n [`.${filterInputClasses.rootInner}`]: {\r\n display: 'flex' // show input and adornments when expanded\r\n }\r\n }\r\n }\r\n}))\r\n"],"names":["createFilterInput","config","classes","filterInputClasses","initialConfig","fields","_config$enableQuickSe","enableQuickSearch","qsKey","KeySpecial","quickSearch","mergedFields","_objectSpread","item","label","mapSpecialLabel","temp","Object","assign","field","initializeConfig","props","_props$slots2","_props$slots3","_mergedConfig$slots","_mergedConfig$slots2","_mergedConfig$slots3","refInput","createRef","refBeforeInput","context","useContext","FilterBarContext","_useFilterActions","useFilterActions","addFilter","replaceFilter","_useState","useState","_useState2","_slicedToArray","anchorEl","setAnchorEl","isOpen","Boolean","_useState3","_useState4","keywords","setKeywords","_useState5","_useState6","status","setStatus","mergedConfig","useMemo","_props$slots","beforeInput","afterInput","mergedRootSx","sx","slots","rootProps","rootSx","isMinimal","minimalInput","_useState7","_useState8","isCollapsed","setIsCollapsed","useEffect","setTimeout","_refInput$current","current","focus","handleClose","isClear","handleSubmitSearch","_context$filterState$","qsField","filterState","storeFilter","logic","values","handleClickSearch","_refInput$current3","rootClass","root","push","minimalized","minimalCollapsed","minimalExpanded","fieldsList","isIconOnly","_jsx","ClickAwayListener","onClickAway","event","children","_jsxs","FilterInputStyled","className","join","IconButton","size","button","onClick","SearchIcon","fontSize","rootInner","Box","ref","InputBase","fullWidth","input","autoComplete","inputRef","value","placeholder","onKeyDown","keyCode","stopPropagation","preventDefault","_refInput$current2","blur","onChange","finalValue","target","isOpenPopper","onFocus","currentTarget","startAdornment","InputAdornmentLeft","onSearch","endAdornment","InputAdornmentRight","hasKeyword","onSubmit","onClear","PopperCustom","open","placement","transition","disablePortal","popperProps","getFieldsByMatches","PopperContent","title","disableGutter","onClose","MenuList","menu","map","x","i","_x$label","toString","concat","MenuItem","_context$filterState$2","fieldConfig","fieldValue","singleValue","handleClickMenuItem","menuItem","Typography","variant","fontWeight","flex","color","ml","noWrap","styled","_ref","theme","_defineProperty","height","border","borderColor","borderRadius","shape","backgroundColor","palette","background","paper","transitions","create","alpha","divider","text","primary","main","boxShadow","display","alignItems","width","alignSelf","padding","spacing","gap","overflow"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectSpread2 as
|
|
1
|
+
import{objectSpread2 as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as e,jsx as l}from"react/jsx-runtime";import{InputAdornment as i,Tooltip as o,IconButton as a,colors as t,SvgIcon as n}from"@mui/material";import c from"@mui/icons-material/Close";import s from"@mui/icons-material/Search";import{KeySpecial as u}from"../types.js";function d(r,e){var l=(e||"").toString().trim().toLowerCase(),i=Object.keys(r.fields||{}),o=[];return i.forEach(function(e){var i,a,t=r.fields[e];if(t){var n=null===(i=r.matches)||void 0===i?void 0:i[e],c=null!==(a=null==n?void 0:n.rules)&&void 0!==a?a:[{rule:"always"}];(Array.isArray(c)?c:[]).forEach(function(r){switch(r.rule){case"always":return void o.push({field:e,label:t.label});case"existed":return void(l&&o.push({field:e,label:t.label}));case"link":try{new URL(l),o.push({field:e,label:t.label})}catch(r){}return;case"custom":var i;return void(null!==(i=r.validate)&&void 0!==i&&i.call(r,l)&&o.push({field:e,label:t.label}));default:return}})}}),o.sort(function(r,e){return r.field===u.quickSearch?1:e.field===u.quickSearch?-1:0})}var f=function(e){return l(n,r(r({viewBox:"2 0 24 24",version:"1.0"},e),{},{children:l("path",{fill:"currentColor",d:"M19,6a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H7.41l1.3-1.29A1,1,0,0,0,7.29,9.29l-3,3a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L7.41,14H17a3,3,0,0,0,3-3V7A1,1,0,0,0,19,6Z"})}))},h=function(r){return l(i,{position:"start",children:l(o,{title:"Enter the value to search for",arrow:!0,children:l(a,{size:"small",sx:{flex:"0 0 auto"},onClick:r.onSearch,children:l(s,{fontSize:"small"})})})})},m=function(r){var n=r.hasKeyword,s=r.onSubmit,u=r.onClear;return e(i,{position:"end",children:[n&&l(o,{title:"The enter or click to apply",arrow:!0,children:l(a,{size:"small",sx:{flex:"0 0 auto",color:t.blue[600],"&:hover":{color:t.blue[900]}},onClick:s,children:l(f,{fontSize:"small"})})}),n&&l(o,{title:"Clear",arrow:!0,children:l(a,{size:"small",sx:{flex:"0 0 auto",color:t.red[500],"&:hover":{color:t.red[700]}},onClick:u,children:l(c,{fontSize:"small"})})})]})};export{h as InputAdornmentLeft,m as InputAdornmentRight,d as getFieldsByMatches};
|
|
2
2
|
//# sourceMappingURL=filter-input.units.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-input.units.js","sources":["../../../../src/filter-bar/components/filter-input.units.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { colors, IconButton, InputAdornment, SvgIcon, Tooltip } from '@mui/material'\r\nimport CloseIcon from '@mui/icons-material/Close'\r\nimport SearchIcon from '@mui/icons-material/Search'\r\nimport { KeySpecial } from '../types'\r\n// types\r\nimport type { FC } from 'react'\r\nimport type { IconButtonProps, SvgIconProps } from '@mui/material'\r\nimport type { TFieldType } from '../types'\r\nimport type { IFieldInputConfig, IFilterInputConfig, TFieldMatch } from './filter-input.types'\r\n\r\nexport function getFieldsByMatches<T>(config: IFilterInputConfig<T>, keywords: string): IFieldInputConfig<T>[] {\r\n const value = (keywords || '').toString().trim().toLowerCase()\r\n const keys = Object.keys(config.fields || {}) as TFieldType<T>[]\r\n const items: IFieldInputConfig<T>[] = []\r\n\r\n keys.forEach((key) => {\r\n const fieldConfig = config.fields[key]\r\n if (!fieldConfig) return\r\n\r\n const matchConfig = config.matches?.[key]\r\n const rules = matchConfig?.rules ?? [{ rule: 'always' }]\r\n const finalRules: TFieldMatch[] = Array.isArray(rules) ? rules : []\r\n\r\n finalRules.forEach((r) => {\r\n switch (r.rule) {\r\n case 'always': {\r\n items.push({ field: key, label: fieldConfig.label })\r\n return\r\n }\r\n case 'existed': {\r\n if (value) items.push({ field: key, label: fieldConfig.label })\r\n return\r\n }\r\n case 'link': {\r\n try {\r\n new URL(value)\r\n items.push({ field: key, label: fieldConfig.label })\r\n } catch {\r\n // If the value is not a valid URL, we won't show the linked field\r\n }\r\n return\r\n }\r\n case 'custom': {\r\n if (r.validate?.(value)) items.push({ field: key, label: fieldConfig.label })\r\n return\r\n }\r\n default:\r\n return\r\n }\r\n })\r\n })\r\n\r\n return items.sort((a, b) => {\r\n if (a.field === KeySpecial.quickSearch) return 1\r\n if (b.field === KeySpecial.quickSearch) return -1\r\n return 0\r\n })\r\n}\r\n\r\nconst EnterIcon: FC<SvgIconProps> = (props) => (\r\n <SvgIcon viewBox='2 0 24 24' version='1.0' {...props}>\r\n <path\r\n fill='currentColor'\r\n d='M19,6a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H7.41l1.3-1.29A1,1,0,0,0,7.29,9.29l-3,3a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L7.41,14H17a3,3,0,0,0,3-3V7A1,1,0,0,0,19,6Z'\r\n />\r\n </SvgIcon>\r\n)\r\n\r\ninterface
|
|
1
|
+
{"version":3,"file":"filter-input.units.js","sources":["../../../../src/filter-bar/components/filter-input.units.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { colors, IconButton, InputAdornment, SvgIcon, Tooltip } from '@mui/material'\r\nimport CloseIcon from '@mui/icons-material/Close'\r\nimport SearchIcon from '@mui/icons-material/Search'\r\nimport { KeySpecial } from '../types'\r\n// types\r\nimport type { FC } from 'react'\r\nimport type { IconButtonProps, SvgIconProps } from '@mui/material'\r\nimport type { TFieldType } from '../types'\r\nimport type { IFieldInputConfig, IFilterInputConfig, TFieldMatch } from './filter-input.types'\r\n\r\nexport function getFieldsByMatches<T>(config: IFilterInputConfig<T>, keywords: string): IFieldInputConfig<T>[] {\r\n const value = (keywords || '').toString().trim().toLowerCase()\r\n const keys = Object.keys(config.fields || {}) as TFieldType<T>[]\r\n const items: IFieldInputConfig<T>[] = []\r\n\r\n keys.forEach((key) => {\r\n const fieldConfig = config.fields[key]\r\n if (!fieldConfig) return\r\n\r\n const matchConfig = config.matches?.[key]\r\n const rules = matchConfig?.rules ?? [{ rule: 'always' }]\r\n const finalRules: TFieldMatch[] = Array.isArray(rules) ? rules : []\r\n\r\n finalRules.forEach((r) => {\r\n switch (r.rule) {\r\n case 'always': {\r\n items.push({ field: key, label: fieldConfig.label })\r\n return\r\n }\r\n case 'existed': {\r\n if (value) items.push({ field: key, label: fieldConfig.label })\r\n return\r\n }\r\n case 'link': {\r\n try {\r\n new URL(value)\r\n items.push({ field: key, label: fieldConfig.label })\r\n } catch {\r\n // If the value is not a valid URL, we won't show the linked field\r\n }\r\n return\r\n }\r\n case 'custom': {\r\n if (r.validate?.(value)) items.push({ field: key, label: fieldConfig.label })\r\n return\r\n }\r\n default:\r\n return\r\n }\r\n })\r\n })\r\n\r\n return items.sort((a, b) => {\r\n if (a.field === KeySpecial.quickSearch) return 1\r\n if (b.field === KeySpecial.quickSearch) return -1\r\n return 0\r\n })\r\n}\r\n\r\nconst EnterIcon: FC<SvgIconProps> = (props) => (\r\n <SvgIcon viewBox='2 0 24 24' version='1.0' {...props}>\r\n <path\r\n fill='currentColor'\r\n d='M19,6a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H7.41l1.3-1.29A1,1,0,0,0,7.29,9.29l-3,3a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L7.41,14H17a3,3,0,0,0,3-3V7A1,1,0,0,0,19,6Z'\r\n />\r\n </SvgIcon>\r\n)\r\n\r\ninterface InputAdornmentLeftProps {\r\n onSearch?: IconButtonProps['onClick']\r\n}\r\n\r\nexport const InputAdornmentLeft: FC<InputAdornmentLeftProps> = (props) => (\r\n <InputAdornment position='start'>\r\n <Tooltip title='Enter the value to search for' arrow>\r\n <IconButton size='small' sx={{ flex: '0 0 auto' }} onClick={props.onSearch}>\r\n <SearchIcon fontSize='small' />\r\n </IconButton>\r\n </Tooltip>\r\n </InputAdornment>\r\n)\r\n\r\ninterface InputAdornmentRightProps {\r\n hasKeyword?: boolean\r\n onSubmit?: IconButtonProps['onClick']\r\n onClear?: IconButtonProps['onClick']\r\n}\r\n\r\nexport const InputAdornmentRight: FC<InputAdornmentRightProps> = (props) => {\r\n const { hasKeyword, onSubmit, onClear } = props\r\n return (\r\n <InputAdornment position='end'>\r\n {hasKeyword && (\r\n <Tooltip title='The enter or click to apply' arrow>\r\n <IconButton size='small' sx={{ flex: '0 0 auto', color: colors.blue[600], '&:hover': { color: colors.blue[900] } }} onClick={onSubmit}>\r\n <EnterIcon fontSize='small' />\r\n </IconButton>\r\n </Tooltip>\r\n )}\r\n\r\n {hasKeyword && (\r\n <Tooltip title='Clear' arrow>\r\n <IconButton size='small' sx={{ flex: '0 0 auto', color: colors.red[500], '&:hover': { color: colors.red[700] } }} onClick={onClear}>\r\n <CloseIcon fontSize='small' />\r\n </IconButton>\r\n </Tooltip>\r\n )}\r\n </InputAdornment>\r\n )\r\n}\r\n"],"names":["getFieldsByMatches","config","keywords","value","toString","trim","toLowerCase","keys","Object","fields","items","forEach","key","_config$matches","_matchConfig$rules","fieldConfig","matchConfig","matches","rules","rule","Array","isArray","r","push","field","label","URL","_unused","_r$validate","validate","call","sort","a","b","KeySpecial","quickSearch","EnterIcon","props","_jsx","SvgIcon","_objectSpread","viewBox","version","children","fill","d","InputAdornmentLeft","InputAdornment","position","Tooltip","title","arrow","IconButton","size","sx","flex","onClick","onSearch","SearchIcon","fontSize","InputAdornmentRight","hasKeyword","onSubmit","onClear","_jsxs","color","colors","blue","red","CloseIcon"],"mappings":"kWAagB,SAAAA,EAAsBC,EAA+BC,GACnE,IAAMC,GAASD,GAAY,IAAIE,WAAWC,OAAOC,cAC3CC,EAAOC,OAAOD,KAAKN,EAAOQ,QAAU,CAAA,GACpCC,EAAgC,GAuCtC,OArCAH,EAAKI,QAAQ,SAACC,GAAO,IAAAC,EAAAC,EACbC,EAAcd,EAAOQ,OAAOG,GAClC,GAAKG,EAAL,CAEA,IAAMC,EAA4B,QAAjBH,EAAGZ,EAAOgB,eAAO,IAAAJ,OAAA,EAAdA,EAAiBD,GAC/BM,EAA0BJ,QAArBA,EAAGE,aAAW,EAAXA,EAAaE,aAAKJ,IAAAA,EAAAA,EAAI,CAAC,CAAEK,KAAM,YACXC,MAAMC,QAAQH,GAASA,EAAQ,IAEtDP,QAAQ,SAACW,GAClB,OAAQA,EAAEH,MACR,IAAK,SAEH,YADAT,EAAMa,KAAK,CAAEC,MAAOZ,EAAKa,MAAOV,EAAYU,QAG9C,IAAK,UAEH,YADItB,GAAOO,EAAMa,KAAK,CAAEC,MAAOZ,EAAKa,MAAOV,EAAYU,SAGzD,IAAK,OACH,IACE,IAAIC,IAAIvB,GACRO,EAAMa,KAAK,CAAEC,MAAOZ,EAAKa,MAAOV,EAAYU,OAC7C,CAAC,MAAAE,GACA,CAEF,OAEF,IAAK,SAAU,IAAAC,EAEb,YADcA,QAAdA,EAAIN,EAAEO,oBAAQD,GAAVA,EAAAE,KAAAR,EAAanB,IAAQO,EAAMa,KAAK,CAAEC,MAAOZ,EAAKa,MAAOV,EAAYU,SAGvE,QACE,OAEN,EAhCkB,CAiCpB,GAEOf,EAAMqB,KAAK,SAACC,EAAGC,GACpB,OAAID,EAAER,QAAUU,EAAWC,YAAoB,EAC3CF,EAAET,QAAUU,EAAWC,aAAsB,EAC1C,CACT,EACF,CAEA,IAAMC,EAA8B,SAACC,GAAK,OACxCC,EAACC,EAAOC,EAAAA,EAAA,CAACC,QAAQ,YAAYC,QAAQ,OAAUL,GAAK,GAAA,CAClDM,SAAAL,EAAA,OAAA,CACEM,KAAK,eACLC,EAAE,oNAEI,EAOCC,EAAkD,SAACT,GAAK,OACnEC,EAACS,EAAc,CAACC,SAAS,QAAOL,SAC9BL,EAACW,EAAQ,CAAAC,MAAM,gCAAgCC,OAC7C,EAAAR,SAAAL,EAACc,EAAU,CAACC,KAAK,QAAQC,GAAI,CAAEC,KAAM,YAAcC,QAASnB,EAAMoB,SAChEd,SAAAL,EAACoB,EAAU,CAACC,SAAS,eAGV,EASNC,EAAoD,SAACvB,GAChE,IAAQwB,EAAkCxB,EAAlCwB,WAAYC,EAAsBzB,EAAtByB,SAAUC,EAAY1B,EAAZ0B,QAC9B,OACEC,EAACjB,EAAc,CAACC,SAAS,MAAKL,SAAA,CAC3BkB,GACCvB,EAACW,EAAQ,CAAAC,MAAM,8BAA8BC,OAC3C,EAAAR,SAAAL,EAACc,EAAW,CAAAC,KAAK,QAAQC,GAAI,CAAEC,KAAM,WAAYU,MAAOC,EAAOC,KAAK,KAAM,UAAW,CAAEF,MAAOC,EAAOC,KAAK,OAAUX,QAASM,EAAQnB,SACnIL,EAACF,EAAU,CAAAuB,SAAS,cAKzBE,GACCvB,EAACW,EAAO,CAACC,MAAM,QAAQC,OACrB,EAAAR,SAAAL,EAACc,EAAU,CAACC,KAAK,QAAQC,GAAI,CAAEC,KAAM,WAAYU,MAAOC,EAAOE,IAAI,KAAM,UAAW,CAAEH,MAAOC,EAAOE,IAAI,OAAUZ,QAASO,EAAOpB,SAChIL,EAAC+B,GAAUV,SAAS,gBAMhC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as r,typeof as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{KeySpecial as t}from"./types.js";import{QueryParam as i}from"../utils/query-param.js";var n=r({},t.quickSearch,"Quick Search");function o(r){if(null!=r){if("object"!==e(r))return r;if(Array.isArray(r)){var t=r.map(o).filter(function(r){return void 0!==r});return t.length>0?t:void 0}var i={},n=!1;for(var f in r)if(r.hasOwnProperty(f)){var a=o(r[f]);void 0!==a&&(i[f]=a,n=!0)}return n?i:void 0}}function f(r,e){if(r===e)return!0;try{var t=o(r),i=o(e);return t===i||!(!t||!i)&&JSON.stringify(t)===JSON.stringify(i)}catch(r){return console.error("Error comparing filter states:",r),!1}}function
|
|
1
|
+
import{defineProperty as r,typeof as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{KeySpecial as t}from"./types.js";import{QueryParam as i}from"../utils/query-param.js";var n=r({},t.quickSearch,"Quick Search");function o(r){if(null!=r){if("object"!==e(r))return r;if(Array.isArray(r)){var t=r.map(o).filter(function(r){return void 0!==r});return t.length>0?t:void 0}var i={},n=!1;for(var f in r)if(r.hasOwnProperty(f)){var a=o(r[f]);void 0!==a&&(i[f]=a,n=!0)}return n?i:void 0}}function f(r){if(!r)return!0;var e=o(r);return!e||0===Object.keys(e).length}function a(r,e){if(r===e)return!0;try{var t=o(r),i=o(e);return t===i||!(!t||!i)&&JSON.stringify(t)===JSON.stringify(i)}catch(r){return console.error("Error comparing filter states:",r),!1}}function l(r,e){if("undefined"!=typeof window)try{if(a(r,e))return void i.replaceDeletes("filter");if(!r||0===Object.keys(r).length)return void i.replaceDeletes("filter");var t={filter:JSON.stringify(r)};i.replacePatch(t)}catch(r){console.error("Error syncing filter state to URL:",r)}}function u(r){if("undefined"==typeof window)return r;try{var e=i.gets("filter");return e.filter?JSON.parse(e.filter):r}catch(e){return console.error("Error getting filter state from URL:",e),r}}export{u as getFilterFromURL,f as isEmptyFilterState,a as isFilterStateEqual,n as mapSpecialLabel,o as removeNullValues,l as setFilterToURL};
|
|
2
2
|
//# sourceMappingURL=helpers.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sources":["../../../src/filter-bar/helpers.ts"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\nimport { KeySpecial, TFilterState } from './types'\r\nimport { QueryParam } from '../utils/query-param'\r\n\r\nexport const mapSpecialLabel: Record<KeySpecial, string> = {\r\n [KeySpecial.quickSearch]: 'Quick Search'\r\n}\r\n\r\nexport interface IFilterStateQueryParams {\r\n filter?: string\r\n}\r\n\r\n/**\r\n * @en Remove null/undefined values from object recursively for accurate comparison.\r\n * @vi Loai bo cac gia tri null/undefined khoi object mot cach de quy de so sanh chinh xac.\r\n */\r\nexport function removeNullValues<T = any>(obj: T): T | undefined {\r\n if (obj === null || obj === undefined) {\r\n return undefined\r\n }\r\n\r\n if (typeof obj !== 'object') {\r\n return obj\r\n }\r\n\r\n if (Array.isArray(obj)) {\r\n const cleaned = obj.map(removeNullValues).filter((v) => v !== undefined)\r\n return cleaned.length > 0 ? (cleaned as any) : undefined\r\n }\r\n\r\n const cleaned: any = {}\r\n let hasValue = false\r\n\r\n for (const key in obj) {\r\n if (obj.hasOwnProperty(key)) {\r\n const value = removeNullValues(obj[key])\r\n if (value !== undefined) {\r\n cleaned[key] = value\r\n hasValue = true\r\n }\r\n }\r\n }\r\n\r\n return hasValue ? cleaned : undefined\r\n}\r\n\r\n/**\r\n * @en Deep comparison of two filter states to check if they are equal.\r\n * @vi So sanh sau hai filter state de kiem tra xem chung co bang nhau khong.\r\n */\r\nexport function isFilterStateEqual<T>(state1?: TFilterState<T>, state2?: TFilterState<T>): boolean {\r\n if (state1 === state2) return true\r\n\r\n try {\r\n // Remove null/undefined values before comparison\r\n const cleaned1 = removeNullValues(state1)\r\n const cleaned2 = removeNullValues(state2)\r\n\r\n if (cleaned1 === cleaned2) return true\r\n if (!cleaned1 || !cleaned2) return false\r\n\r\n return JSON.stringify(cleaned1) === JSON.stringify(cleaned2)\r\n } catch (error) {\r\n console.error('Error comparing filter states:', error)\r\n return false\r\n }\r\n}\r\n\r\n/**\r\n * @en Synchronize filter state to URL query parameters. If state equals defaultState, remove from URL to keep it clean.\r\n * @vi Dong bo filter state vao URL query parameters. Neu state bang defaultState, xoa khoi URL de giu URL sach.\r\n *\r\n * @param state - Current filter state to sync\r\n * @param defaultState - Default filter state (if current equals this, don't save to URL)\r\n */\r\nexport function setFilterToURL<T>(state?: TFilterState<T>, defaultState?: TFilterState<T>) {\r\n // If window is undefined (e.g., during SSR), do nothing\r\n if (typeof window === 'undefined') return\r\n\r\n try {\r\n // If state equals default, remove from URL\r\n if (isFilterStateEqual(state, defaultState)) {\r\n QueryParam.replaceDeletes<IFilterStateQueryParams>('filter')\r\n return\r\n }\r\n\r\n // If state is empty/undefined, remove from URL\r\n if (!state || Object.keys(state).length === 0) {\r\n QueryParam.replaceDeletes<IFilterStateQueryParams>('filter')\r\n return\r\n }\r\n\r\n // Serialize state to JSON and save to URL\r\n const updateParams: IFilterStateQueryParams = {\r\n filter: JSON.stringify(state)\r\n }\r\n\r\n QueryParam.replacePatch<IFilterStateQueryParams>(updateParams)\r\n } catch (error) {\r\n console.error('Error syncing filter state to URL:', error)\r\n }\r\n}\r\n\r\n/**\r\n * @en Retrieve filter state from URL query parameters.\r\n * @vi Lay filter state tu URL query parameters.\r\n *\r\n * @param defaultState - Default filter state to return if URL has no filter state\r\n * @returns Filter state from URL or defaultState\r\n */\r\nexport function getFilterFromURL<T>(defaultState?: TFilterState<T>): TFilterState<T> | undefined {\r\n // If window is undefined (e.g., during SSR), return defaultState\r\n if (typeof window === 'undefined') return defaultState\r\n\r\n try {\r\n const q = QueryParam.gets<IFilterStateQueryParams>('filter')\r\n\r\n if (!q.filter) {\r\n return defaultState\r\n }\r\n\r\n // Parse JSON from URL\r\n const state = JSON.parse(q.filter) as TFilterState<T>\r\n return state\r\n } catch (error) {\r\n console.error('Error getting filter state from URL:', error)\r\n return defaultState\r\n }\r\n}\r\n"],"names":["mapSpecialLabel","_defineProperty","KeySpecial","quickSearch","removeNullValues","obj","_typeof","Array","isArray","cleaned","map","filter","v","undefined","length","hasValue","key","hasOwnProperty","value","isFilterStateEqual","state1","state2","cleaned1","cleaned2","JSON","stringify","error","console","setFilterToURL","
|
|
1
|
+
{"version":3,"file":"helpers.js","sources":["../../../src/filter-bar/helpers.ts"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\nimport { KeySpecial, TFilterState } from './types'\r\nimport { QueryParam } from '../utils/query-param'\r\n\r\nexport const mapSpecialLabel: Record<KeySpecial, string> = {\r\n [KeySpecial.quickSearch]: 'Quick Search'\r\n}\r\n\r\nexport interface IFilterStateQueryParams {\r\n filter?: string\r\n}\r\n\r\n/**\r\n * @en Remove null/undefined values from object recursively for accurate comparison.\r\n * @vi Loai bo cac gia tri null/undefined khoi object mot cach de quy de so sanh chinh xac.\r\n */\r\nexport function removeNullValues<T = any>(obj: T): T | undefined {\r\n if (obj === null || obj === undefined) {\r\n return undefined\r\n }\r\n\r\n if (typeof obj !== 'object') {\r\n return obj\r\n }\r\n\r\n if (Array.isArray(obj)) {\r\n const cleaned = obj.map(removeNullValues).filter((v) => v !== undefined)\r\n return cleaned.length > 0 ? (cleaned as any) : undefined\r\n }\r\n\r\n const cleaned: any = {}\r\n let hasValue = false\r\n\r\n for (const key in obj) {\r\n if (obj.hasOwnProperty(key)) {\r\n const value = removeNullValues(obj[key])\r\n if (value !== undefined) {\r\n cleaned[key] = value\r\n hasValue = true\r\n }\r\n }\r\n }\r\n\r\n return hasValue ? cleaned : undefined\r\n}\r\n\r\n/**\r\n * @en Check if filter state is empty (no filters applied). Null/undefined values are ignored in this check.\r\n * @vi Kiem tra xem filter state co rong khong (khong co filter nao duoc ap dung). Gia tri null/undefined se duoc bo qua trong kiem tra nay.\r\n */\r\nexport function isEmptyFilterState<T>(state?: TFilterState<T>): boolean {\r\n if (!state) return true\r\n const cleaned = removeNullValues(state)\r\n return !cleaned || Object.keys(cleaned).length === 0\r\n}\r\n\r\n/**\r\n * @en Deep comparison of two filter states to check if they are equal.\r\n * @vi So sanh sau hai filter state de kiem tra xem chung co bang nhau khong.\r\n */\r\nexport function isFilterStateEqual<T>(state1?: TFilterState<T>, state2?: TFilterState<T>): boolean {\r\n if (state1 === state2) return true\r\n\r\n try {\r\n // Remove null/undefined values before comparison\r\n const cleaned1 = removeNullValues(state1)\r\n const cleaned2 = removeNullValues(state2)\r\n\r\n if (cleaned1 === cleaned2) return true\r\n if (!cleaned1 || !cleaned2) return false\r\n\r\n return JSON.stringify(cleaned1) === JSON.stringify(cleaned2)\r\n } catch (error) {\r\n console.error('Error comparing filter states:', error)\r\n return false\r\n }\r\n}\r\n\r\n/**\r\n * @en Synchronize filter state to URL query parameters. If state equals defaultState, remove from URL to keep it clean.\r\n * @vi Dong bo filter state vao URL query parameters. Neu state bang defaultState, xoa khoi URL de giu URL sach.\r\n *\r\n * @param state - Current filter state to sync\r\n * @param defaultState - Default filter state (if current equals this, don't save to URL)\r\n */\r\nexport function setFilterToURL<T>(state?: TFilterState<T>, defaultState?: TFilterState<T>) {\r\n // If window is undefined (e.g., during SSR), do nothing\r\n if (typeof window === 'undefined') return\r\n\r\n try {\r\n // If state equals default, remove from URL\r\n if (isFilterStateEqual(state, defaultState)) {\r\n QueryParam.replaceDeletes<IFilterStateQueryParams>('filter')\r\n return\r\n }\r\n\r\n // If state is empty/undefined, remove from URL\r\n if (!state || Object.keys(state).length === 0) {\r\n QueryParam.replaceDeletes<IFilterStateQueryParams>('filter')\r\n return\r\n }\r\n\r\n // Serialize state to JSON and save to URL\r\n const updateParams: IFilterStateQueryParams = {\r\n filter: JSON.stringify(state)\r\n }\r\n\r\n QueryParam.replacePatch<IFilterStateQueryParams>(updateParams)\r\n } catch (error) {\r\n console.error('Error syncing filter state to URL:', error)\r\n }\r\n}\r\n\r\n/**\r\n * @en Retrieve filter state from URL query parameters.\r\n * @vi Lay filter state tu URL query parameters.\r\n *\r\n * @param defaultState - Default filter state to return if URL has no filter state\r\n * @returns Filter state from URL or defaultState\r\n */\r\nexport function getFilterFromURL<T>(defaultState?: TFilterState<T>): TFilterState<T> | undefined {\r\n // If window is undefined (e.g., during SSR), return defaultState\r\n if (typeof window === 'undefined') return defaultState\r\n\r\n try {\r\n const q = QueryParam.gets<IFilterStateQueryParams>('filter')\r\n\r\n if (!q.filter) {\r\n return defaultState\r\n }\r\n\r\n // Parse JSON from URL\r\n const state = JSON.parse(q.filter) as TFilterState<T>\r\n return state\r\n } catch (error) {\r\n console.error('Error getting filter state from URL:', error)\r\n return defaultState\r\n }\r\n}\r\n"],"names":["mapSpecialLabel","_defineProperty","KeySpecial","quickSearch","removeNullValues","obj","_typeof","Array","isArray","cleaned","map","filter","v","undefined","length","hasValue","key","hasOwnProperty","value","isEmptyFilterState","state","Object","keys","isFilterStateEqual","state1","state2","cleaned1","cleaned2","JSON","stringify","error","console","setFilterToURL","defaultState","window","QueryParam","replaceDeletes","updateParams","replacePatch","getFilterFromURL","q","gets","parse"],"mappings":"sLAKO,IAAMA,EAAeC,EAAA,CAAA,EACzBC,EAAWC,YAAc,gBAWtB,SAAUC,EAA0BC,GACxC,GAAIA,QAAJ,CAIA,GAAmB,WAAfC,EAAOD,GACT,OAAOA,EAGT,GAAIE,MAAMC,QAAQH,GAAM,CACtB,IAAMI,EAAUJ,EAAIK,IAAIN,GAAkBO,OAAO,SAACC,GAAC,YAAWC,IAAND,IACxD,OAAOH,EAAQK,OAAS,EAAKL,OAAkBI,CAChD,CAED,IAAMJ,EAAe,CAAE,EACnBM,GAAW,EAEf,IAAK,IAAMC,KAAOX,EAChB,GAAIA,EAAIY,eAAeD,GAAM,CAC3B,IAAME,EAAQd,EAAiBC,EAAIW,SACrBH,IAAVK,IACFT,EAAQO,GAAOE,EACfH,GAAW,EAEd,CAGH,OAAOA,EAAWN,OAAUI,CAxB3B,CAyBH,CAMM,SAAUM,EAAsBC,GACpC,IAAKA,EAAO,OAAO,EACnB,IAAMX,EAAUL,EAAiBgB,GACjC,OAAQX,GAA2C,IAAhCY,OAAOC,KAAKb,GAASK,MAC1C,CAMgB,SAAAS,EAAsBC,EAA0BC,GAC9D,GAAID,IAAWC,EAAQ,OAAO,EAE9B,IAEE,IAAMC,EAAWtB,EAAiBoB,GAC5BG,EAAWvB,EAAiBqB,GAElC,OAAIC,IAAaC,MACZD,IAAaC,IAEXC,KAAKC,UAAUH,KAAcE,KAAKC,UAAUF,EACpD,CAAC,MAAOG,GAEP,OADAC,QAAQD,MAAM,iCAAkCA,IACzC,CACR,CACH,CASgB,SAAAE,EAAkBZ,EAAyBa,GAEzD,GAAsB,oBAAXC,OAEX,IAEE,GAAIX,EAAmBH,EAAOa,GAE5B,YADAE,EAAWC,eAAwC,UAKrD,IAAKhB,GAAuC,IAA9BC,OAAOC,KAAKF,GAAON,OAE/B,YADAqB,EAAWC,eAAwC,UAKrD,IAAMC,EAAwC,CAC5C1B,OAAQiB,KAAKC,UAAUT,IAGzBe,EAAWG,aAAsCD,EAClD,CAAC,MAAOP,GACPC,QAAQD,MAAM,qCAAsCA,EACrD,CACH,CASM,SAAUS,EAAoBN,GAElC,GAAsB,oBAAXC,OAAwB,OAAOD,EAE1C,IACE,IAAMO,EAAIL,EAAWM,KAA8B,UAEnD,OAAKD,EAAE7B,OAKOiB,KAAKc,MAAMF,EAAE7B,QAJlBsB,CAMV,CAAC,MAAOH,GAEP,OADAC,QAAQD,MAAM,uCAAwCA,GAC/CG,CACR,CACH"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as t,
|
|
1
|
+
import{defineProperty as t,slicedToArray as r,objectSpread2 as n,asyncToGenerator as e,regenerator as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{useState as l,useEffect as m}from"react";import{styled as u,Box as s,useMediaQuery as p}from"@mui/material";import{useTheme as f}from"@mui/material/styles";import{fetchDelay as c}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";import{createFilterBarContext as d}from"./index.context.js";import{createFilterSort as v}from"./components/filter-sort.js";import{createFilterMenu as g}from"./components/filter-menu.js";import{createFilterInput as C}from"./components/filter-input.js";import{createFilterSummary as y}from"./components/filter-summary.js";function S(t){if(!t.InputComponent){var u=t.inputConfig||{fields:{}};t.inputConfig=u,t.InputComponent=C(u)}if(!t.MenuComponent){var S=t.menuConfig||{fields:{}};t.menuConfig=S,t.MenuComponent=g(S)}if(!t.SummaryComponent&&!1!==t.enableSummary){var j=t.summaryConfig||{fields:{}};t.summaryConfig=j,t.SummaryComponent=y(j)}if(!t.SortComponent){var h=t.sortConfig||{fields:{}};t.sortConfig=h,t.SortComponent=v(h)}var P=t.defaultFilterLogic||"and",I=d();return function(u){var d,v=u.slots,g=t.InputComponent,C=t.MenuComponent,y=t.SummaryComponent,S=t.SortComponent,j=l(function(){return u.value?{filterState:u.value}:{filterState:Object.assign({filterLogic:P},t.initialFilterState)}}),h=r(j,2),w=h[0],F=h[1],k=l(!1),B=r(k,2),L=B[0],M=B[1];m(function(){u.value&&F({filterState:u.value})},[u.value]);var W=function(){var t=e(o().m(function t(r,n){var i;return o().w(function(t){for(;;)switch(t.p=t.n){case 0:return t.p=0,F(function(t){var r;return{filterState:null!==(r=null==n?void 0:n.filterState)&&void 0!==r?r:t.filterState}}),M(!0),t.n=1,c(e(o().m(function t(){var n;return o().w(function(t){for(;;)if(0===t.n)return t.a(2,null===(n=u.onChange)||void 0===n?void 0:n.call(u,r))},t)})),500);case 1:M(!1),t.n=3;break;case 2:throw t.p=2,i=t.v,M(!1),i;case 3:return t.a(2)}},t,null,[[0,2]])}));return function(r,n){return t.apply(this,arguments)}}(),A={filterState:u.value||w.filterState,isLoading:L,setFilterState:function(t){u.value?W(t):W(t,{filterState:t})}},D=f(),N=p(D.breakpoints.down("md"));return i(I.Provider,{value:A,children:a(x,{className:b.root,sx:u.sx,children:[a("div",{className:b.inner,children:[(null==v?void 0:v.before)||null,i(C,{slots:{popperProps:{placement:"bottom-start"}}}),i(S,{slots:{popperProps:{placement:"bottom-start"}}}),i(g,{slots:{minimalInput:N,popperProps:{placement:"bottom-start"}}}),(null==v?void 0:v.after)||null]}),a(s,n(n({},null==v?void 0:v.summaryWrapProps),{},{sx:n({display:"flex",alignItems:"center"},null==v||null===(d=v.summaryWrapProps)||void 0===d?void 0:d.sx),children:[(null==v?void 0:v.summaryBefore)||null,i(s,{sx:{flex:1,minWidth:0},children:!1!==t.enableSummary&&i(y,{})}),(null==v?void 0:v.summaryAfter)||null]}))]})})}}var b={root:"DinoFilterBar-root",inner:"DinoFilterBar-inner"},x=u(s)(function(r){var n=r.theme;return t(t({},"&.".concat(b.root),{backgroundColor:n.palette.background.paper,boxSizing:"border-box"}),".".concat(b.inner),{display:"flex",alignItems:"center",gap:n.spacing(1)})});export{S as createFilterBar};
|
|
2
2
|
//# sourceMappingURL=index.create.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.create.js","sources":["../../../src/filter-bar/index.create.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Component } from 'react'\r\nimport { Box, BoxProps, styled } from '@mui/material'\r\nimport { createFilterBarContext } from './index.context'\r\nimport { createFilterSort } from './components/filter-sort'\r\nimport { createFilterMenu } from './components/filter-menu'\r\nimport { createFilterInput } from './components/filter-input'\r\nimport { createFilterSummary } from './components/filter-summary'\r\n// types\r\nimport type { ComponentType } from 'react'\r\nimport type { TFilterState } from './types'\r\nimport type { IFilterBarContext, IFilterBarContextState } from './index.context'\r\nimport type { IFilterMenuConfig, IFilterMenuProps } from './components/filter-menu.types'\r\nimport type { IFilterSortConfig, IFilterSortProps } from './components/filter-sort.types'\r\nimport type { IFilterInputConfig, IFilterInputProps } from './components/filter-input.types'\r\nimport type { IFilterSummaryConfig, IFilterSummaryProps } from './components/filter-summary.types'\r\nimport { fetchDelay } from '../utils'\r\n\r\nexport interface IFilterBarConfigs<T> {\r\n initialFilterState?: TFilterState<T>\r\n /** Default filter logic, can be overridden by individual filters @default \"and\" */\r\n defaultFilterLogic?: 'and' | 'or'\r\n InputComponent?: ComponentType<IFilterInputProps<T>>\r\n inputConfig?: IFilterInputConfig<T>\r\n MenuComponent?: ComponentType<IFilterMenuProps<T>>\r\n menuConfig?: IFilterMenuConfig<T>\r\n sortConfig?: IFilterSortConfig<T>\r\n SortComponent?: ComponentType<IFilterSortProps<T>>\r\n /** Enable or disable the summary component. Default is true. */\r\n enableSummary?: boolean\r\n SummaryComponent?: ComponentType<IFilterSummaryProps<T>>\r\n summaryConfig?: IFilterSummaryConfig<T>\r\n}\r\n\r\nexport interface IFilterBarSlots {\r\n summaryWrapProps?: BoxProps\r\n summaryBefore?: React.ReactNode\r\n summaryAfter?: React.ReactNode\r\n before?: React.ReactNode\r\n after?: React.ReactNode\r\n}\r\n\r\nexport interface IFilterBarProps<T> {\r\n sx?: BoxProps['sx']\r\n value?: TFilterState<T>\r\n onChange?: (state: TFilterState<T>) => Promise<void> | void\r\n slots?: IFilterBarSlots\r\n}\r\n\r\ninterface IFilterBarState<T> extends IFilterBarContextState<T> {}\r\n\r\nexport function createFilterBar<T>(configs: IFilterBarConfigs<T>) {\r\n if (!configs.InputComponent) {\r\n const configInput = configs.inputConfig || { fields: {} }\r\n configs.inputConfig = configInput\r\n configs.InputComponent = createFilterInput<T>(configInput)\r\n }\r\n if (!configs.MenuComponent) {\r\n const configMenu = configs.menuConfig || { fields: {} }\r\n configs.menuConfig = configMenu\r\n configs.MenuComponent = createFilterMenu<T>(configMenu)\r\n }\r\n if (!configs.SummaryComponent && configs.enableSummary !== false) {\r\n const configSummary: IFilterSummaryConfig<T> = configs.summaryConfig || { fields: {} }\r\n configs.summaryConfig = configSummary\r\n configs.SummaryComponent = createFilterSummary<T>(configSummary)\r\n }\r\n if (!configs.SortComponent) {\r\n const configSort: IFilterSortConfig<T> = configs.sortConfig || { fields: {} }\r\n configs.sortConfig = configSort\r\n configs.SortComponent = createFilterSort<T>(configSort)\r\n }\r\n\r\n const defaultFilterLogic = configs.defaultFilterLogic || 'and'\r\n const Context = createFilterBarContext<T>()\r\n\r\n class FilterBar extends Component<IFilterBarProps<T>, IFilterBarState<T>> implements IFilterBarContext<T> {\r\n constructor(props: IFilterBarProps<T>) {\r\n super(props)\r\n this.state = this.getInitialFilterState()\r\n }\r\n\r\n getInitialFilterState(): IFilterBarState<T> {\r\n if (this.props.value) return { filterState: this.props.value }\r\n return { filterState: Object.assign({ filterLogic: defaultFilterLogic }, configs.initialFilterState) }\r\n }\r\n\r\n get filterState(): TFilterState<T> {\r\n return this.props.value || this.state.filterState\r\n }\r\n\r\n get isLoading(): boolean {\r\n return this.state.isLoading || false\r\n }\r\n\r\n handleChange = async (filterState: TFilterState<T>, state?: Partial<IFilterBarState<T>>) => {\r\n try {\r\n this.setState((prev) => ({ filterState: state?.filterState ?? prev.filterState, isLoading: true }))\r\n await fetchDelay(async () => this.props.onChange?.(filterState), 500)\r\n this.setState({ isLoading: false })\r\n } catch (error) {\r\n this.setState({ isLoading: false })\r\n throw error\r\n }\r\n }\r\n\r\n setFilterState = (state: TFilterState<T>) => {\r\n if (this.props.value) {\r\n this.handleChange(state)\r\n return\r\n }\r\n this.handleChange(state, { filterState: state })\r\n }\r\n\r\n onAddFilter = () => {\r\n // TODO: add filter to filterState\r\n console.log('Add filter')\r\n }\r\n\r\n onAddRemove = () => {\r\n // TODO: remove filter from filterState\r\n console.log('Remove filter')\r\n }\r\n\r\n render() {\r\n const { slots } = this.props\r\n const InputComponent = configs.InputComponent as ComponentType<IFilterInputProps<T>>\r\n const MenuComponent = configs.MenuComponent as ComponentType<IFilterMenuProps<T>>\r\n const SummaryComponent = configs.SummaryComponent as ComponentType<IFilterSummaryProps<T>>\r\n const SortComponent = configs.SortComponent as ComponentType<IFilterSortProps<T>>\r\n return (\r\n <Context.Provider value={this}>\r\n <FilterBarStyled className={filterbarClasses.root} sx={this.props.sx}>\r\n <div className={filterbarClasses.inner}>\r\n {slots?.before || null}\r\n <MenuComponent slots={{ popperProps: { placement: 'bottom-start' } }} />\r\n <SortComponent sx={{ mr: 1 }} slots={{ popperProps: { placement: 'bottom-start' } }} />\r\n <InputComponent onAdd={this.onAddFilter} slots={{ popperProps: { placement: 'bottom-start' } }} />\r\n {slots?.after || null}\r\n </div>\r\n <Box {...slots?.summaryWrapProps} sx={{ display: 'flex', alignItems: 'center', ...slots?.summaryWrapProps?.sx }}>\r\n {slots?.summaryBefore || null}\r\n <Box sx={{ flex: 1, minWidth: 0 }}>{configs.enableSummary !== false && <SummaryComponent />}</Box>\r\n {slots?.summaryAfter || null}\r\n </Box>\r\n </FilterBarStyled>\r\n {/* <Box style={{ border: '1px solid red', marginTop: '16px', padding: '8px' }}>\r\n <Typography variant='subtitle2'>For Debug - Current Filter State:</Typography>\r\n <pre>{JSON.stringify(this.filterState, null, 2)}</pre>\r\n </Box> */}\r\n </Context.Provider>\r\n )\r\n }\r\n }\r\n\r\n return FilterBar\r\n}\r\n\r\nconst filterbarClasses = {\r\n root: 'DinoFilterBar-root',\r\n inner: 'DinoFilterBar-inner'\r\n}\r\n\r\nconst FilterBarStyled = styled(Box)(({ theme }) => ({\r\n [`&.${filterbarClasses.root}`]: {\r\n backgroundColor: theme.palette.background.paper\r\n },\r\n [`.${filterbarClasses.inner}`]: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(1)\r\n }\r\n}))\r\n"],"names":["createFilterBar","configs","InputComponent","configInput","inputConfig","fields","createFilterInput","MenuComponent","configMenu","menuConfig","createFilterMenu","SummaryComponent","enableSummary","configSummary","summaryConfig","createFilterSummary","SortComponent","configSort","sortConfig","createFilterSort","defaultFilterLogic","Context","createFilterBarContext","FilterBar","props","_this","_classCallCheck","_callSuper","_defineProperty","_ref","_asyncToGenerator","_regenerator","m","_callee2","filterState","state","_t","w","_context2","p","n","setState","prev","_state$filterState","isLoading","fetchDelay","_callee","_this$props$onChange","_this$props","_context","a","onChange","call","v","_x","_x2","apply","this","arguments","value","handleChange","console","log","getInitialFilterState","_inherits","Component","_createClass","key","Object","assign","filterLogic","initialFilterState","get","_slots$summaryWrapPro","slots","_jsx","Provider","children","_jsxs","FilterBarStyled","className","filterbarClasses","root","sx","inner","before","popperProps","placement","mr","onAdd","onAddFilter","after","Box","_objectSpread","summaryWrapProps","display","alignItems","summaryBefore","flex","minWidth","summaryAfter","styled","_ref3","theme","concat","backgroundColor","palette","background","paper","gap","spacing"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.create.js","sources":["../../../src/filter-bar/index.create.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { useState, useEffect } from 'react'\r\nimport { Box, BoxProps, styled, useMediaQuery } from '@mui/material'\r\nimport { useTheme } from '@mui/material/styles'\r\nimport { fetchDelay } from '../utils'\r\nimport { createFilterBarContext } from './index.context'\r\nimport { createFilterSort } from './components/filter-sort'\r\nimport { createFilterMenu } from './components/filter-menu'\r\nimport { createFilterInput } from './components/filter-input'\r\nimport { createFilterSummary } from './components/filter-summary'\r\n// types\r\nimport type { ComponentType, FC } from 'react'\r\nimport type { TFilterState } from './types'\r\nimport type { IFilterBarContext, IFilterBarContextState } from './index.context'\r\nimport type { IFilterMenuConfig, IFilterMenuProps } from './components/filter-menu.types'\r\nimport type { IFilterSortConfig, IFilterSortProps } from './components/filter-sort.types'\r\nimport type { IFilterInputConfig, IFilterInputProps } from './components/filter-input.types'\r\nimport type { IFilterSummaryConfig, IFilterSummaryProps } from './components/filter-summary.types'\r\n\r\nexport interface IFilterBarConfigs<T> {\r\n initialFilterState?: TFilterState<T>\r\n /** Default filter logic, can be overridden by individual filters @default \"and\" */\r\n defaultFilterLogic?: 'and' | 'or'\r\n InputComponent?: ComponentType<IFilterInputProps<T>>\r\n inputConfig?: IFilterInputConfig<T>\r\n MenuComponent?: ComponentType<IFilterMenuProps<T>>\r\n menuConfig?: IFilterMenuConfig<T>\r\n sortConfig?: IFilterSortConfig<T>\r\n SortComponent?: ComponentType<IFilterSortProps<T>>\r\n /** Enable or disable the summary component. Default is true. */\r\n enableSummary?: boolean\r\n SummaryComponent?: ComponentType<IFilterSummaryProps<T>>\r\n summaryConfig?: IFilterSummaryConfig<T>\r\n}\r\n\r\nexport interface IFilterBarSlots {\r\n summaryWrapProps?: BoxProps\r\n summaryBefore?: React.ReactNode\r\n summaryAfter?: React.ReactNode\r\n before?: React.ReactNode\r\n after?: React.ReactNode\r\n}\r\n\r\nexport interface IFilterBarProps<T> {\r\n sx?: BoxProps['sx']\r\n value?: TFilterState<T>\r\n onChange?: (state: TFilterState<T>) => Promise<void> | void\r\n slots?: IFilterBarSlots\r\n}\r\n\r\ninterface IFilterBarState<T> extends IFilterBarContextState<T> {}\r\n\r\nexport function createFilterBar<T>(configs: IFilterBarConfigs<T>) {\r\n if (!configs.InputComponent) {\r\n const configInput = configs.inputConfig || { fields: {} }\r\n configs.inputConfig = configInput\r\n configs.InputComponent = createFilterInput<T>(configInput)\r\n }\r\n if (!configs.MenuComponent) {\r\n const configMenu = configs.menuConfig || { fields: {} }\r\n configs.menuConfig = configMenu\r\n configs.MenuComponent = createFilterMenu<T>(configMenu)\r\n }\r\n if (!configs.SummaryComponent && configs.enableSummary !== false) {\r\n const configSummary: IFilterSummaryConfig<T> = configs.summaryConfig || { fields: {} }\r\n configs.summaryConfig = configSummary\r\n configs.SummaryComponent = createFilterSummary<T>(configSummary)\r\n }\r\n if (!configs.SortComponent) {\r\n const configSort: IFilterSortConfig<T> = configs.sortConfig || { fields: {} }\r\n configs.sortConfig = configSort\r\n configs.SortComponent = createFilterSort<T>(configSort)\r\n }\r\n\r\n const defaultFilterLogic = configs.defaultFilterLogic || 'and'\r\n const Context = createFilterBarContext<T>()\r\n\r\n const FilterBar: FC<IFilterBarProps<T>> = (props) => {\r\n const { slots } = props\r\n const InputComponent = configs.InputComponent as ComponentType<IFilterInputProps<T>>\r\n const MenuComponent = configs.MenuComponent as ComponentType<IFilterMenuProps<T>>\r\n const SummaryComponent = configs.SummaryComponent as ComponentType<IFilterSummaryProps<T>>\r\n const SortComponent = configs.SortComponent as ComponentType<IFilterSortProps<T>>\r\n\r\n const computeInitial = (): IFilterBarState<T> => {\r\n if (props.value) return { filterState: props.value }\r\n return { filterState: Object.assign({ filterLogic: defaultFilterLogic }, configs.initialFilterState) }\r\n }\r\n\r\n const [localState, setLocalState] = useState<IFilterBarState<T>>(computeInitial)\r\n const [isLoading, setIsLoading] = useState<boolean>(false)\r\n\r\n useEffect(() => {\r\n // keep local state in sync if controlled\r\n if (props.value) setLocalState({ filterState: props.value })\r\n }, [props.value])\r\n\r\n const handleChange = async (filterState: TFilterState<T>, state?: Partial<IFilterBarState<T>>) => {\r\n try {\r\n setLocalState((prev) => ({ filterState: state?.filterState ?? prev.filterState }))\r\n setIsLoading(true)\r\n await fetchDelay(async () => props.onChange?.(filterState), 500)\r\n setIsLoading(false)\r\n } catch (error) {\r\n setIsLoading(false)\r\n throw error\r\n }\r\n }\r\n\r\n const setFilterState = (state: TFilterState<T>) => {\r\n if (props.value) {\r\n handleChange(state)\r\n return\r\n }\r\n handleChange(state, { filterState: state })\r\n }\r\n\r\n const contextValue: IFilterBarContext<T> = {\r\n filterState: props.value || localState.filterState,\r\n isLoading: isLoading,\r\n setFilterState\r\n }\r\n\r\n const theme = useTheme()\r\n const isSmall = useMediaQuery(theme.breakpoints.down('md'))\r\n\r\n return (\r\n <Context.Provider value={contextValue}>\r\n <FilterBarStyled className={filterbarClasses.root} sx={props.sx}>\r\n <div className={filterbarClasses.inner}>\r\n {slots?.before || null}\r\n <MenuComponent slots={{ popperProps: { placement: 'bottom-start' } }} />\r\n <SortComponent slots={{ popperProps: { placement: 'bottom-start' } }} />\r\n <InputComponent slots={{ minimalInput: isSmall, popperProps: { placement: 'bottom-start' } }} />\r\n {slots?.after || null}\r\n </div>\r\n <Box {...slots?.summaryWrapProps} sx={{ display: 'flex', alignItems: 'center', ...slots?.summaryWrapProps?.sx }}>\r\n {slots?.summaryBefore || null}\r\n <Box sx={{ flex: 1, minWidth: 0 }}>{configs.enableSummary !== false && <SummaryComponent />}</Box>\r\n {slots?.summaryAfter || null}\r\n </Box>\r\n </FilterBarStyled>\r\n </Context.Provider>\r\n )\r\n }\r\n\r\n return FilterBar\r\n}\r\n\r\nconst filterbarClasses = {\r\n root: 'DinoFilterBar-root',\r\n inner: 'DinoFilterBar-inner'\r\n}\r\n\r\nconst FilterBarStyled = styled(Box)(({ theme }) => ({\r\n [`&.${filterbarClasses.root}`]: {\r\n backgroundColor: theme.palette.background.paper,\r\n boxSizing: 'border-box'\r\n },\r\n [`.${filterbarClasses.inner}`]: {\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(1)\r\n }\r\n}))\r\n"],"names":["createFilterBar","configs","InputComponent","configInput","inputConfig","fields","createFilterInput","MenuComponent","configMenu","menuConfig","createFilterMenu","SummaryComponent","enableSummary","configSummary","summaryConfig","createFilterSummary","SortComponent","configSort","sortConfig","createFilterSort","defaultFilterLogic","Context","createFilterBarContext","props","_slots$summaryWrapPro","slots","_useState","useState","value","filterState","Object","assign","filterLogic","initialFilterState","_useState2","_slicedToArray","localState","setLocalState","_useState3","_useState4","isLoading","setIsLoading","useEffect","handleChange","_ref","_asyncToGenerator","_regenerator","m","_callee2","state","_t","w","_context2","p","n","prev","_state$filterState","fetchDelay","_callee","_props$onChange","_context","a","onChange","call","v","_x","_x2","apply","this","arguments","contextValue","setFilterState","theme","useTheme","isSmall","useMediaQuery","breakpoints","down","_jsx","Provider","children","_jsxs","FilterBarStyled","className","filterbarClasses","root","sx","inner","before","popperProps","placement","minimalInput","after","Box","_objectSpread","summaryWrapProps","display","alignItems","summaryBefore","flex","minWidth","summaryAfter","styled","_ref3","_defineProperty","concat","backgroundColor","palette","background","paper","boxSizing","gap","spacing"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createClass as
|
|
1
|
+
import{createClass as t,classCallCheck as e,defineProperty as r}from"../../_virtual/_rollupPluginBabelHelpers.js";import{createConvertToGraphQL as i,mapLogic as s,mapSortDirection as a}from"./convert-to-graphql.js";import{isEmptyFilterState as l,removeNullValues as o,isFilterStateEqual as h,setFilterToURL as p,getFilterFromURL as m}from"./helpers.js";import{createFilterBar as c}from"./index.create.js";var n=t(function t(){e(this,t),r(this,"createFilterBar",c),r(this,"createConvertToGraphQL",i),r(this,"mapLogic",s),r(this,"mapDirection",a),r(this,"isEmptyFilterState",l),r(this,"removeNullValues",o),r(this,"isFilterStateEqual",h),r(this,"setFilterToURL",p),r(this,"getFilterFromURL",m)}),u=new n;export{n as DinoFilterBar,u as dinoFilterBar};
|
|
2
2
|
//# sourceMappingURL=index.dino.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.dino.js","sources":["../../../src/filter-bar/index.dino.tsx"],"sourcesContent":["import { createConvertToGraphQL, mapLogic, mapSortDirection } from './convert-to-graphql'\r\nimport { getFilterFromURL, isFilterStateEqual, removeNullValues, setFilterToURL } from './helpers'\r\nimport { createFilterBar } from './index.create'\r\n\r\nexport class DinoFilterBar {\r\n createFilterBar = createFilterBar as typeof createFilterBar\r\n createConvertToGraphQL = createConvertToGraphQL as typeof createConvertToGraphQL\r\n\r\n // support\r\n mapLogic = mapLogic\r\n mapDirection = mapSortDirection\r\n\r\n // helpers\r\n removeNullValues = removeNullValues\r\n isFilterStateEqual = isFilterStateEqual\r\n setFilterToURL = setFilterToURL\r\n getFilterFromURL = getFilterFromURL\r\n}\r\n\r\nexport const dinoFilterBar = new DinoFilterBar()\r\n"],"names":["DinoFilterBar","_createClass","_classCallCheck","_defineProperty","createFilterBar","createConvertToGraphQL","mapLogic","mapSortDirection","removeNullValues","isFilterStateEqual","setFilterToURL","getFilterFromURL","dinoFilterBar"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.dino.js","sources":["../../../src/filter-bar/index.dino.tsx"],"sourcesContent":["import { createConvertToGraphQL, mapLogic, mapSortDirection } from './convert-to-graphql'\r\nimport { getFilterFromURL, isEmptyFilterState, isFilterStateEqual, removeNullValues, setFilterToURL } from './helpers'\r\nimport { createFilterBar } from './index.create'\r\n\r\nexport class DinoFilterBar {\r\n createFilterBar = createFilterBar as typeof createFilterBar\r\n createConvertToGraphQL = createConvertToGraphQL as typeof createConvertToGraphQL\r\n\r\n // support\r\n mapLogic = mapLogic\r\n mapDirection = mapSortDirection\r\n\r\n // helpers\r\n isEmptyFilterState = isEmptyFilterState\r\n removeNullValues = removeNullValues\r\n isFilterStateEqual = isFilterStateEqual\r\n setFilterToURL = setFilterToURL\r\n getFilterFromURL = getFilterFromURL\r\n}\r\n\r\nexport const dinoFilterBar = new DinoFilterBar()\r\n"],"names":["DinoFilterBar","_createClass","_classCallCheck","_defineProperty","createFilterBar","createConvertToGraphQL","mapLogic","mapSortDirection","isEmptyFilterState","removeNullValues","isFilterStateEqual","setFilterToURL","getFilterFromURL","dinoFilterBar"],"mappings":"qZAIA,IAAaA,EAAaC,EAAA,SAAAD,IAAAE,OAAAF,GAAAG,yBACNC,GAAyCD,gCAClCE,GAEzBF,kBACWG,GAAQH,sBACJI,GAEfJ,4BACqBK,GAAkBL,0BACpBM,GAAgBN,4BACdO,GAAkBP,wBACtBQ,GAAcR,0BACZS,EAAgB,GAGxBC,EAAgB,IAAIb"}
|
|
@@ -1,2 +1,2 @@
|
|
|
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,
|
|
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
|
|
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{objectWithoutProperties as e,objectSpread2 as o,defineProperty as i,inherits as r,createClass as a,classCallCheck as t,callSuper as l,toConsumableArray as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as s}from"react/jsx-runtime";import{Component as d,Fragment as u}from"react";import{styled as p,Box as c}from"@mui/material";import{DataGrid as g}from"@mui/x-data-grid";import{mergeObjects as m}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";import{TableBaseContext as h}from"./context.js";import{customFilterOperators as f}from"./custom.filter-operators.js";import v,{dinoTableClasses as b}from"./helpers.js";import y from"./toolbar-pannel.js";import{GlobalModal as C,mapGlobalModalContext as P}from"../api-context/global-modal.js";var w=["children"];function S(e){return function(){function p(r){var a;return t(this,p),a=l(this,p,[r]),i(a,"setTableQueryParams",function(e){a.tableQueryParams=m({},a.tableQueryParams,e)}),i(a,"renderWrapContext",function(o){var i=e.disableGlobalModalProvider?u:C;return s(i,{children:P(function(e){return s(h.Provider,{value:{showModal:e.show,closeModal:e.close},children:o})})})}),i(a,"getDataGridProps",function(){var o,i,r,t,l=a.
|
|
1
|
+
import{objectWithoutProperties as e,objectSpread2 as o,defineProperty as i,inherits as r,createClass as a,classCallCheck as t,callSuper as l,toConsumableArray as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as s}from"react/jsx-runtime";import{Component as d,Fragment as u}from"react";import{styled as p,Box as c}from"@mui/material";import{DataGrid as g}from"@mui/x-data-grid";import{mergeObjects as m}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";import{TableBaseContext as h}from"./context.js";import{customFilterOperators as f}from"./custom.filter-operators.js";import v,{dinoTableClasses as b}from"./helpers.js";import y from"./toolbar-pannel.js";import{GlobalModal as C,mapGlobalModalContext as P}from"../api-context/global-modal.js";var w=["children"];function S(e){return function(){function p(r){var a;return t(this,p),a=l(this,p,[r]),i(a,"setTableQueryParams",function(e){a.tableQueryParams=m({},a.tableQueryParams,e)}),i(a,"renderWrapContext",function(o){var i=e.disableGlobalModalProvider?u:C;return s(i,{children:P(function(e){return s(h.Provider,{value:{showModal:e.show,closeModal:e.close},children:o})})})}),i(a,"getDataGridProps",function(){var o,i,r,t,l=v.mapInitialState(a.props.query,{columns:{columnVisibilityModel:e.columnVisibilityModel}}),n={getRowId:e.getRowId,initialState:l,columns:a.columns,rows:null!==(o=null===(i=a.props.data)||void 0===i?void 0:i.items)&&void 0!==o?o:[],checkboxSelection:!0,pagination:!0,density:null!==(r=null===(t=a.props.slots)||void 0===t?void 0:t.density)&&void 0!==r?r:"standard",filterDebounceMs:800,sx:{border:0},slots:{toolbar:a.mergeConfig.toolbar},rowSelectionModel:a.rowSelecteds,onRowSelectionModelChange:a.handleRowSelectionChange};if("server"===e.featureMode){var s,d,u={filterMode:"server",sortingMode:"server",paginationMode:"server",onPaginationModelChange:a.onPaginationModelChange,onFilterModelChange:a.onFilterModelChange,onSortModelChange:a.onSortModelChange,rowCount:null!==(s=null===(d=a.props.data)||void 0===d?void 0:d.rowTotal)&&void 0!==s?s:0,paginationModel:a.tableQueryParams.pagination,filterModel:a.tableQueryParams.filter,sortModel:v.mapSortModel(a.tableQueryParams.sort),loading:a.mergeConfig.loading};Object.assign(n,u)}return m(n,a.mergeConfig.dataGridProps)}),i(a,"initialColumns",function(){var i,r,t=a.mergeConfig,l=t.ActionRow,d=t.disableActionRow,u=[];return l&&!0!==d&&u.push(o({field:"Actions",minWidth:100,headerAlign:"right",align:"right",filterable:!1,sortable:!1,renderCell:function(e){return s(l,{value:e.row})}},e.actionRow)),i=u,r=Object.keys(e.columns).map(function(i){var r=o({field:i},e.columns[i]);return r.filterOperators=e.filterOperators?e.filterOperators(r):f(r),r}),i&&i.length>0&&r.push.apply(r,n(i)),r}),i(a,"onPaginationModelChange",function(e,o){a.mergeConfig.loading||(a.setTableQueryParams({pagination:e,detail:"pagination"}),a.handleChange())}),i(a,"onFilterModelChange",function(e,o){var i;if(!a.mergeConfig.loading){var r=a.tableQueryParams.pagination;a.setTableQueryParams({filter:e,pagination:{page:0,pageSize:null!==(i=null==r?void 0:r.pageSize)&&void 0!==i?i:25},detail:v.detectSearchType(e)}),a.handleChange()}}),i(a,"onSortModelChange",function(e,o){if(!a.mergeConfig.loading){var i,r,t,l,n,s=e,d=a.tableQueryParams.sort;if(null!=d&&d.length&&!s.length)if((null==d||null===(i=d[0])||void 0===i?void 0:i.field)===(null===(r=a.defaultTableQueryParams.sort)||void 0===r||null===(r=r[0])||void 0===r?void 0:r.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=a.defaultTableQueryParams.sort)&&void 0!==n?n:[];a.setTableQueryParams({sort:s,detail:"sort"}),a.handleChange()}}),i(a,"handleChange",function(){a.changeTimeout&&clearTimeout(a.changeTimeout),a.changeTimeout=setTimeout(function(){a.props.onChange&&a.props.onChange(a.tableQueryParams)},300)}),i(a,"handleRowSelectionChange",function(e,o){a.mergeConfig.maxSelcion&&e.length>a.mergeConfig.maxSelcion?a.rowSelecteds=e.slice(0,a.mergeConfig.maxSelcion):a.rowSelecteds=e,a.props.onRowSelectionChange&&a.props.onRowSelectionChange(a.rowSelecteds,o),a.forceUpdate()}),a.columns=a.initialColumns(),a.tableQueryParams=o({},r.query),a.defaultTableQueryParams=a.tableQueryParams,a.rowSelecteds=[],a}return r(p,d),a(p,[{key:"mergeConfig",get:function(){var i,r,a,t,l,n,d,u,p,c,g=m({},null==e?void 0:e.toolbarProps,null===(i=this.props.slots)||void 0===i?void 0:i.toolbarProps);return{toolbar:null!==(r=null===(a=this.props.slots)||void 0===a?void 0:a.toolbar)&&void 0!==r?r:function(){return s(y,o({},g))},ActionRow:null===(t=this.props.slots)||void 0===t?void 0:t.actionRow,disableActionRow:e.disableActionRow,columnVisibilityModel:e.columnVisibilityModel,maxSelcion:null!==(l=null===(n=this.props.slots)||void 0===n?void 0:n.maxSelection)&&void 0!==l?l:e.maxSelection,dataGridProps:m({},e.dataGridProps,null===(d=this.props.slots)||void 0===d?void 0:d.dataGridProps),wrapProps:m({},e.wrapProps,null===(u=this.props.slots)||void 0===u?void 0:u.wrapProps),loading:null!==(p=void 0!==this.props.loading?this.props.loading:null===(c=this.tableQueryParams)||void 0===c?void 0:c.loading)&&void 0!==p&&p}}},{key:"componentWillUnmount",value:function(){this.changeTimeout&&clearTimeout(this.changeTimeout)}},{key:"shouldComponentUpdate",value:function(o){var i;return"server"!==e.featureMode||(v.equalTableQueryParams(o.query,this.props.query)?JSON.stringify(o.data)!==JSON.stringify(this.props.data)||o.loading!==this.props.loading:(this.setTableQueryParams(null!==(i=o.query)&&void 0!==i?i:{}),!0))}},{key:"render",value:function(){return this.renderWrapContext(s(M,o(o({},this.mergeConfig.wrapProps),{},{children:s(g,o({loading:this.props.loading},this.getDataGridProps()))})))}}])}()}var M=p(function(i){var r=i.children,a=e(i,w);return s(c,o(o({},a),{},{children:s("div",{children:r})}))})(i(i({flex:1,position:"relative","& > div":{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflowY:"auto"},".MuiDataGrid-root":{"--unstable_DataGrid-radius":0,overflow:"hidden"}},".MuiDataGrid-cell.".concat(b.whiteSpacePre," .MuiDataGrid-cellContent"),{whiteSpace:"pre"}),".MuiTablePagination-root p",{marginBottom:0}));export{S as CreateTable,S 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, tablePaginationClasses } 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, { dinoTableClasses } from './helpers'\r\nimport ToolbarPannel, { IToolbarPannelProps } from './toolbar-pannel'\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 return this.renderWrapContext(\r\n <Wrap {...this.mergeConfig.wrapProps}>\r\n <DataGrid loading={this.props.loading} {...this.getDataGridProps()} />\r\n </Wrap>\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 mergeConfig = this.mergeConfig\r\n const obj: DataGridProps<T> = {\r\n getRowId: params.getRowId,\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 initialState: TableHelper.mapInitialState(this.props.query, {\r\n columns: { columnVisibilityModel: params.columnVisibilityModel as GridColumnVisibilityModel }\r\n }),\r\n filterDebounceMs: 800,\r\n sx: { border: 0 },\r\n slots: { toolbar: 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 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\r\nconst Wrap = styled(({ children, ...p }: BoxProps) => (\r\n <Box {...p}>\r\n <div>{children}</div>\r\n </Box>\r\n))({\r\n flex: 1,\r\n position: 'relative',\r\n '& > div': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n overflowY: 'auto'\r\n },\r\n '.MuiDataGrid-root': {\r\n '--unstable_DataGrid-radius': 0,\r\n overflow: 'hidden'\r\n },\r\n [`.MuiDataGrid-cell.${dinoTableClasses.whiteSpacePre} .MuiDataGrid-cellContent`]: {\r\n whiteSpace: 'pre'\r\n },\r\n [`.MuiTablePagination-root p`]: {\r\n marginBottom: 0\r\n }\r\n})\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","mergeConfig","obj","getRowId","columns","rows","data","items","checkboxSelection","pagination","density","slots","initialState","TableHelper","mapInitialState","query","columnVisibilityModel","filterDebounceMs","sx","border","toolbar","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","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","renderWrapContext","Wrap","DataGrid","getDataGridProps","styled","_ref2","p","_objectWithoutProperties","_excluded","Box","flex","position","top","left","width","height","overflowY","overflow","concat","dinoTableClasses","whiteSpacePre","whiteSpace","marginBottom"],"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, { dinoTableClasses } from './helpers'\r\nimport ToolbarPannel, { IToolbarPannelProps } from './toolbar-pannel'\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 return this.renderWrapContext(\r\n <Wrap {...this.mergeConfig.wrapProps}>\r\n <DataGrid loading={this.props.loading} {...this.getDataGridProps()} />\r\n </Wrap>\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 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\r\nconst Wrap = styled(({ children, ...p }: BoxProps) => (\r\n <Box {...p}>\r\n <div>{children}</div>\r\n </Box>\r\n))({\r\n flex: 1,\r\n position: 'relative',\r\n '& > div': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n overflowY: 'auto'\r\n },\r\n '.MuiDataGrid-root': {\r\n '--unstable_DataGrid-radius': 0,\r\n overflow: 'hidden'\r\n },\r\n [`.MuiDataGrid-cell.${dinoTableClasses.whiteSpacePre} .MuiDataGrid-cellContent`]: {\r\n whiteSpace: 'pre'\r\n },\r\n [`.MuiTablePagination-root p`]: {\r\n marginBottom: 0\r\n }\r\n})\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","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","renderWrapContext","Wrap","DataGrid","getDataGridProps","styled","_ref2","p","_objectWithoutProperties","_excluded","Box","flex","position","top","left","width","height","overflowY","overflow","concat","dinoTableClasses","whiteSpacePre","whiteSpace","marginBottom"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as
|
|
1
|
+
import{defineProperty as t,inherits as i,createClass as e,objectSpread2 as r,classCallCheck as o,callSuper as a}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as n,jsx as l,Fragment as s}from"react/jsx-runtime";import{Component as c}from"react";import{GridToolbarColumnsButton as p,GridToolbarFilterButton as d,GridToolbarDensitySelector as h,GridToolbarExport as m,GridToolbarQuickFilter as u}from"@mui/x-data-grid";import{styled as f,Box as b,Typography as g}from"@mui/material";import{BtnFormCreate as v}from"./ui.buttons.js";import{Breadcrumbs as T}from"../components/breadcrumbs.js";import{HelpTooltip as x}from"../components/help-tooltip.js";var y=function(){function f(){var i;o(this,f);for(var e=arguments.length,c=new Array(e),p=0;p<e;p++)c[p]=arguments[p];return i=a(this,f,[].concat(c)),t(i,"renderTitle",function(){var t,e=i.props,o=e.title,a=e.afterTitle,c=e.breadcrumbs,p=e.icon,d="".concat(P.titleWrap).concat(null!==(t=i.props.titleProps)&&void 0!==t&&t.className?" ".concat(i.props.titleProps.className):"");if(!(!!o||!!c||!!a))return l(s,{});var h=o;return"string"==typeof o&&(h=l(g,{noWrap:!0,variant:"subtitle1",className:P.titleText,children:o})),c&&(h=l(T,{value:c})),n(b,r(r({},i.props.titleProps),{},{className:d,children:[p&&l("div",{className:P.icon,children:p}),h,a]}))}),t(i,"renderEndAdornment",function(){return!i.props.searchInclude||i.props.searchInclude.length<=0?l(s,{}):l(x,{title:"The search includes",small:!0,children:l("ul",{className:P.searchHelp,children:i.props.searchInclude.map(function(t,i){return l("li",{children:l(g,{variant:"body2",children:t})},i)})})})}),i}return i(f,c),e(f,[{key:"render",value:function(){var t,i,e,o;return n(W,{className:P.root,sx:this.props.sx,children:[this.renderTitle(),this.props.aboveAction,n(b,r(r({className:P.actionsRow},this.props.actionWrapProps),{},{children:[n(b,{className:P.actionsLeft,children:[n(b,{className:P.gridToolbar,children:[!1!==(null===(t=this.props.visibilityToolbar)||void 0===t?void 0:t.columns)&&l(p,{}),!1!==(null===(i=this.props.visibilityToolbar)||void 0===i?void 0:i.filters)&&l(d,{}),!1!==(null===(e=this.props.visibilityToolbar)||void 0===e?void 0:e.density)&&l(h,{}),!1!==(null===(o=this.props.visibilityToolbar)||void 0===o?void 0:o.export)&&l(m,{})]}),this.props.formCreate&&l(v,{children:this.props.formCreate}),this.props.afterAction]}),l(b,{className:P.actionsRight,children:n(b,{className:P.quickFilterWrap,children:[l(u,{fullWidth:!0,variant:"standard",size:"small",debounceMs:800,quickFilterParser:function(t){return[t]}}),this.renderEndAdornment()]})})]})),this.props.belowAction]})}}])}(),P={root:"Dino-ToolbarPannel-root",actionsRow:"Dino-ToolbarPannel-actionsRow",actionsLeft:"Dino-ToolbarPannel-actionsLeft",actionsRight:"Dino-ToolbarPannel-actionsRight",quickFilterWrap:"Dino-ToolbarPannel-quickFilterWrap",gridToolbar:"Dino-ToolbarPannel-gridToolbar",titleWrap:"Dino-ToolbarPannel-titleWrap",titleText:"Dino-ToolbarPannel-titleText",searchHelp:"Dino-ToolbarPannel-searchHelp",icon:"Dino-ToolbarPannel-icon"},W=f(b)(function(i){var e=i.theme;return t(t(t(t(t(t(t(t(t(t({padding:e.spacing(1,2,0)},".".concat(P.actionsRow),{display:"flex",flexWrap:"wrap"}),".".concat(P.actionsLeft),{flex:1,display:"flex",alignItems:"center",flexWrap:"wrap"}),".".concat(P.actionsRight),t({display:"flex",gap:"8px",alignItems:"center",width:"auto"},e.breakpoints.down("md"),{width:"100%"})),".".concat(P.quickFilterWrap),{display:"flex",alignItems:"center"}),".".concat(P.gridToolbar),{padding:0}),".".concat(P.titleWrap),{height:"var(--height-table-topbar, 48px)",display:"flex",alignItems:"center"}),".".concat(P.titleText),{fontWeight:700,flex:1}),".".concat(P.icon),{marginRight:8,display:"flex",alignItems:"center",justifyContent:"center",flex:"0 0 auto"}),".".concat(P.searchHelp),{margin:"0 0 0 18px",padding:0,li:{position:"relative"},"li::after":{content:'"►"',display:"inline-block",top:"50%",transform:"translateY(-50%)",position:"absolute",left:"-18px"}}),e.breakpoints.down("md"),{padding:e.spacing(1,1,0)})});export{y as default};
|
|
2
2
|
//# sourceMappingURL=toolbar-pannel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toolbar-pannel.js","sources":["../../../src/table/toolbar-pannel.tsx"],"sourcesContent":["import React, { Component } from 'react'\r\nimport { GridToolbar, GridToolbarQuickFilter } from '@mui/x-data-grid'\r\nimport { Box, BoxProps, styled, Typography } from '@mui/material'\r\nimport { BtnFormCreate } from './ui.buttons'\r\nimport { Breadcrumbs, IBreadcrumbConfig, HelpTooltip } from '../components'\r\n\r\nexport interface IToolbarPannelOptions {\r\n searchInclude?: string[]\r\n formCreate?: React.ReactNode\r\n afterAction?: React.ReactNode\r\n breadcrumbs?: IBreadcrumbConfig[]\r\n}\r\n\r\nexport interface IToolbarPannelProps extends IToolbarPannelOptions {\r\n title?: React.ReactNode\r\n titleProps?: BoxProps\r\n icon?: React.ReactNode\r\n afterTitle?: React.ReactNode\r\n}\r\n\r\nclass ToolbarPannel extends Component<React.PropsWithChildren<IToolbarPannelProps>> {\r\n render() {\r\n return (\r\n <ToolbarPannelStyled className={toolbarPannelClasses.root}>\r\n {this.renderTitle()}\r\n <Box className={toolbarPannelClasses.actionsRow}>\r\n <Box className={toolbarPannelClasses.actionsLeft}>\r\n <GridToolbar className={toolbarPannelClasses.gridToolbar} />\r\n {this.props.formCreate && <BtnFormCreate>{this.props.formCreate}</BtnFormCreate>}\r\n {this.props.afterAction}\r\n </Box>\r\n <Box className={toolbarPannelClasses.actionsRight}>\r\n <Box className={toolbarPannelClasses.quickFilterWrap}>\r\n <GridToolbarQuickFilter fullWidth variant='standard' size='small' debounceMs={800} quickFilterParser={(x: any) => [x]} />\r\n {this.renderEndAdornment()}\r\n </Box>\r\n </Box>\r\n </Box>\r\n </ToolbarPannelStyled>\r\n )\r\n }\r\n\r\n renderTitle = () => {\r\n const { title, afterTitle, breadcrumbs, icon } = this.props\r\n const titleClassName = `${toolbarPannelClasses.titleWrap}${this.props.titleProps?.className ? ` ${this.props.titleProps.className}` : ''}`\r\n\r\n const isVisible = !!title || !!breadcrumbs || !!afterTitle\r\n if (!isVisible) return <></>\r\n\r\n let titleElm = title\r\n if (typeof title === 'string') {\r\n titleElm = (\r\n <Typography noWrap variant='subtitle1' className={toolbarPannelClasses.titleText}>\r\n {title}\r\n </Typography>\r\n )\r\n }\r\n if (breadcrumbs) titleElm = <Breadcrumbs value={breadcrumbs} />\r\n\r\n return (\r\n <Box {...this.props.titleProps} className={titleClassName}>\r\n {icon && <div className={toolbarPannelClasses.icon}>{icon}</div>}\r\n {titleElm}\r\n {afterTitle}\r\n </Box>\r\n )\r\n }\r\n\r\n renderEndAdornment = () => {\r\n if (!this.props.searchInclude || this.props.searchInclude.length <= 0) return <></>\r\n return (\r\n <HelpTooltip title='The search includes' small>\r\n <ul className={toolbarPannelClasses.searchHelp}>\r\n {this.props.searchInclude.map((item, index) => (\r\n <li key={index}>\r\n <Typography variant='body2'>{item}</Typography>\r\n </li>\r\n ))}\r\n </ul>\r\n </HelpTooltip>\r\n )\r\n }\r\n}\r\nexport default ToolbarPannel\r\n\r\nconst toolbarPannelClasses = {\r\n root: 'Dino-ToolbarPannel-root',\r\n actionsRow: 'Dino-ToolbarPannel-actionsRow',\r\n actionsLeft: 'Dino-ToolbarPannel-actionsLeft',\r\n actionsRight: 'Dino-ToolbarPannel-actionsRight',\r\n quickFilterWrap: 'Dino-ToolbarPannel-quickFilterWrap',\r\n gridToolbar: 'Dino-ToolbarPannel-gridToolbar',\r\n titleWrap: 'Dino-ToolbarPannel-titleWrap',\r\n titleText: 'Dino-ToolbarPannel-titleText',\r\n searchHelp: 'Dino-ToolbarPannel-searchHelp',\r\n icon: 'Dino-ToolbarPannel-icon'\r\n}\r\n\r\nconst ToolbarPannelStyled = styled(Box)(({ theme }) => ({\r\n padding: theme.spacing(1, 2, 0),\r\n [`.${toolbarPannelClasses.actionsRow}`]: { display: 'flex', flexWrap: 'wrap' },\r\n [`.${toolbarPannelClasses.actionsLeft}`]: { flex: 1, display: 'flex', alignItems: 'center', flexWrap: 'wrap' },\r\n [`.${toolbarPannelClasses.actionsRight}`]: {\r\n display: 'flex',\r\n gap: '8px',\r\n alignItems: 'center',\r\n width: 'auto',\r\n [theme.breakpoints.down('md')]: { width: '100%' }\r\n },\r\n [`.${toolbarPannelClasses.quickFilterWrap}`]: { display: 'flex', alignItems: 'center' },\r\n [`.${toolbarPannelClasses.gridToolbar}`]: { padding: 0 },\r\n [`.${toolbarPannelClasses.titleWrap}`]: { height: 'var(--height-table-topbar, 48px)', display: 'flex', alignItems: 'center' },\r\n [`.${toolbarPannelClasses.titleText}`]: { fontWeight: 700, flex: 1 },\r\n [`.${toolbarPannelClasses.icon}`]: {\r\n marginRight: 8,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n flex: '0 0 auto'\r\n },\r\n [`.${toolbarPannelClasses.searchHelp}`]: {\r\n margin: '0 0 0 18px',\r\n padding: 0,\r\n li: { position: 'relative' },\r\n 'li::after': {\r\n content: '\"►\"',\r\n display: 'inline-block',\r\n top: '50%',\r\n transform: 'translateY(-50%)',\r\n position: 'absolute',\r\n left: '-18px'\r\n }\r\n },\r\n [theme.breakpoints.down('md')]: { padding: theme.spacing(1, 1, 0) }\r\n}))\r\n"],"names":["ToolbarPannel","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","_this$props$titleProp","_this$props","props","title","afterTitle","breadcrumbs","icon","titleClassName","toolbarPannelClasses","titleWrap","titleProps","className","_jsx","titleElm","Typography","noWrap","variant","titleText","Breadcrumbs","value","_jsxs","Box","_objectSpread","children","searchInclude","HelpTooltip","small","searchHelp","map","item","index","_inherits","Component","_createClass","key","ToolbarPannelStyled","root","renderTitle","actionsRow","actionsLeft","GridToolbar","gridToolbar","formCreate","BtnFormCreate","afterAction","actionsRight","quickFilterWrap","GridToolbarQuickFilter","fullWidth","size","debounceMs","quickFilterParser","x","renderEndAdornment","styled","_ref","theme","padding","spacing","display","flexWrap","flex","alignItems","gap","width","breakpoints","down","height","fontWeight","marginRight","justifyContent","margin","li","position","content","top","transform","left"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"toolbar-pannel.js","sources":["../../../src/table/toolbar-pannel.tsx"],"sourcesContent":["import React, { Component } from 'react'\r\nimport { GridToolbarColumnsButton, GridToolbarDensitySelector } from '@mui/x-data-grid'\r\nimport { GridToolbarExport, GridToolbarFilterButton, GridToolbarQuickFilter } from '@mui/x-data-grid'\r\nimport { Box, BoxProps, styled, Typography } from '@mui/material'\r\nimport { BtnFormCreate } from './ui.buttons'\r\nimport { Breadcrumbs, IBreadcrumbConfig, HelpTooltip } from '../components'\r\n\r\nexport interface IToolbarPannelToolbarConfig {\r\n columns?: boolean\r\n filters?: boolean\r\n density?: boolean\r\n export?: boolean\r\n}\r\n\r\nexport interface IToolbarPannelProps {\r\n title?: React.ReactNode\r\n titleProps?: BoxProps\r\n icon?: React.ReactNode\r\n afterTitle?: React.ReactNode\r\n searchInclude?: string[]\r\n visibilityToolbar?: IToolbarPannelToolbarConfig\r\n formCreate?: React.ReactNode\r\n breadcrumbs?: IBreadcrumbConfig[]\r\n afterAction?: React.ReactNode\r\n belowAction?: React.ReactNode\r\n aboveAction?: React.ReactNode\r\n actionWrapProps?: BoxProps\r\n sx?: BoxProps['sx']\r\n}\r\n\r\nclass ToolbarPannel extends Component<React.PropsWithChildren<IToolbarPannelProps>> {\r\n render() {\r\n return (\r\n <ToolbarPannelStyled className={toolbarPannelClasses.root} sx={this.props.sx}>\r\n {this.renderTitle()}\r\n {this.props.aboveAction}\r\n <Box className={toolbarPannelClasses.actionsRow} {...this.props.actionWrapProps}>\r\n <Box className={toolbarPannelClasses.actionsLeft}>\r\n <Box className={toolbarPannelClasses.gridToolbar}>\r\n {this.props.visibilityToolbar?.columns !== false && <GridToolbarColumnsButton />}\r\n {this.props.visibilityToolbar?.filters !== false && <GridToolbarFilterButton />}\r\n {this.props.visibilityToolbar?.density !== false && <GridToolbarDensitySelector />}\r\n {this.props.visibilityToolbar?.export !== false && <GridToolbarExport />}\r\n </Box>\r\n {this.props.formCreate && <BtnFormCreate>{this.props.formCreate}</BtnFormCreate>}\r\n {this.props.afterAction}\r\n </Box>\r\n <Box className={toolbarPannelClasses.actionsRight}>\r\n <Box className={toolbarPannelClasses.quickFilterWrap}>\r\n <GridToolbarQuickFilter fullWidth variant='standard' size='small' debounceMs={800} quickFilterParser={(x: any) => [x]} />\r\n {this.renderEndAdornment()}\r\n </Box>\r\n </Box>\r\n </Box>\r\n {this.props.belowAction}\r\n </ToolbarPannelStyled>\r\n )\r\n }\r\n\r\n renderTitle = () => {\r\n const { title, afterTitle, breadcrumbs, icon } = this.props\r\n const titleClassName = `${toolbarPannelClasses.titleWrap}${this.props.titleProps?.className ? ` ${this.props.titleProps.className}` : ''}`\r\n\r\n const isVisible = !!title || !!breadcrumbs || !!afterTitle\r\n if (!isVisible) return <></>\r\n\r\n let titleElm = title\r\n if (typeof title === 'string') {\r\n titleElm = (\r\n <Typography noWrap variant='subtitle1' className={toolbarPannelClasses.titleText}>\r\n {title}\r\n </Typography>\r\n )\r\n }\r\n if (breadcrumbs) titleElm = <Breadcrumbs value={breadcrumbs} />\r\n\r\n return (\r\n <Box {...this.props.titleProps} className={titleClassName}>\r\n {icon && <div className={toolbarPannelClasses.icon}>{icon}</div>}\r\n {titleElm}\r\n {afterTitle}\r\n </Box>\r\n )\r\n }\r\n\r\n renderEndAdornment = () => {\r\n if (!this.props.searchInclude || this.props.searchInclude.length <= 0) return <></>\r\n return (\r\n <HelpTooltip title='The search includes' small>\r\n <ul className={toolbarPannelClasses.searchHelp}>\r\n {this.props.searchInclude.map((item, index) => (\r\n <li key={index}>\r\n <Typography variant='body2'>{item}</Typography>\r\n </li>\r\n ))}\r\n </ul>\r\n </HelpTooltip>\r\n )\r\n }\r\n}\r\nexport default ToolbarPannel\r\n\r\nconst toolbarPannelClasses = {\r\n root: 'Dino-ToolbarPannel-root',\r\n actionsRow: 'Dino-ToolbarPannel-actionsRow',\r\n actionsLeft: 'Dino-ToolbarPannel-actionsLeft',\r\n actionsRight: 'Dino-ToolbarPannel-actionsRight',\r\n quickFilterWrap: 'Dino-ToolbarPannel-quickFilterWrap',\r\n gridToolbar: 'Dino-ToolbarPannel-gridToolbar',\r\n titleWrap: 'Dino-ToolbarPannel-titleWrap',\r\n titleText: 'Dino-ToolbarPannel-titleText',\r\n searchHelp: 'Dino-ToolbarPannel-searchHelp',\r\n icon: 'Dino-ToolbarPannel-icon'\r\n}\r\n\r\nconst ToolbarPannelStyled = styled(Box)(({ theme }) => ({\r\n padding: theme.spacing(1, 2, 0),\r\n [`.${toolbarPannelClasses.actionsRow}`]: { display: 'flex', flexWrap: 'wrap' },\r\n [`.${toolbarPannelClasses.actionsLeft}`]: { flex: 1, display: 'flex', alignItems: 'center', flexWrap: 'wrap' },\r\n [`.${toolbarPannelClasses.actionsRight}`]: {\r\n display: 'flex',\r\n gap: '8px',\r\n alignItems: 'center',\r\n width: 'auto',\r\n [theme.breakpoints.down('md')]: { width: '100%' }\r\n },\r\n [`.${toolbarPannelClasses.quickFilterWrap}`]: { display: 'flex', alignItems: 'center' },\r\n [`.${toolbarPannelClasses.gridToolbar}`]: { padding: 0 },\r\n [`.${toolbarPannelClasses.titleWrap}`]: { height: 'var(--height-table-topbar, 48px)', display: 'flex', alignItems: 'center' },\r\n [`.${toolbarPannelClasses.titleText}`]: { fontWeight: 700, flex: 1 },\r\n [`.${toolbarPannelClasses.icon}`]: {\r\n marginRight: 8,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n flex: '0 0 auto'\r\n },\r\n [`.${toolbarPannelClasses.searchHelp}`]: {\r\n margin: '0 0 0 18px',\r\n padding: 0,\r\n li: { position: 'relative' },\r\n 'li::after': {\r\n content: '\"►\"',\r\n display: 'inline-block',\r\n top: '50%',\r\n transform: 'translateY(-50%)',\r\n position: 'absolute',\r\n left: '-18px'\r\n }\r\n },\r\n [theme.breakpoints.down('md')]: { padding: theme.spacing(1, 1, 0) }\r\n}))\r\n"],"names":["ToolbarPannel","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","_this$props$titleProp","_this$props","props","title","afterTitle","breadcrumbs","icon","titleClassName","toolbarPannelClasses","titleWrap","titleProps","className","_jsx","titleElm","Typography","noWrap","variant","titleText","Breadcrumbs","value","_jsxs","Box","_objectSpread","children","searchInclude","HelpTooltip","small","searchHelp","map","item","index","_inherits","Component","_createClass","key","_this$props$visibilit","_this$props$visibilit2","_this$props$visibilit3","_this$props$visibilit4","ToolbarPannelStyled","root","sx","renderTitle","aboveAction","actionsRow","actionWrapProps","actionsLeft","gridToolbar","visibilityToolbar","columns","GridToolbarColumnsButton","filters","GridToolbarFilterButton","density","GridToolbarDensitySelector","GridToolbarExport","formCreate","BtnFormCreate","afterAction","actionsRight","quickFilterWrap","GridToolbarQuickFilter","fullWidth","size","debounceMs","quickFilterParser","x","renderEndAdornment","belowAction","styled","_ref","theme","padding","spacing","display","flexWrap","flex","alignItems","gap","width","breakpoints","down","height","fontWeight","marginRight","justifyContent","margin","li","position","content","top","transform","left"],"mappings":"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"}
|
|
@@ -4,6 +4,10 @@ export declare function createFilterInput<T>(config: IFilterInputConfig<T>): FC<
|
|
|
4
4
|
export declare const filterInputClasses: {
|
|
5
5
|
root: string;
|
|
6
6
|
rootInner: string;
|
|
7
|
+
minimalized: string;
|
|
8
|
+
minimalCollapsed: string;
|
|
9
|
+
minimalExpanded: string;
|
|
10
|
+
button: string;
|
|
7
11
|
input: string;
|
|
8
12
|
focus: string;
|
|
9
13
|
beforeInput: string;
|
|
@@ -36,16 +36,20 @@ export interface IFilterInputLayoutSlots {
|
|
|
36
36
|
beforeInput?: ReactNode;
|
|
37
37
|
afterInput?: ReactNode;
|
|
38
38
|
}
|
|
39
|
-
export interface
|
|
39
|
+
export interface IFilterInputBase {
|
|
40
|
+
minimalInput?: boolean;
|
|
41
|
+
}
|
|
42
|
+
export interface IFilterInputConfig<T> extends IFilterInputBase, IFilterInputLayoutSlots {
|
|
40
43
|
fields: TFieldInputConfigs<T>;
|
|
41
44
|
matches?: TFieldMatchConfigs<T>;
|
|
42
45
|
enableQuickSearch?: boolean;
|
|
43
46
|
}
|
|
44
|
-
export interface IFilterInputSlots extends IFilterInputLayoutSlots {
|
|
47
|
+
export interface IFilterInputSlots extends IFilterInputBase, IFilterInputLayoutSlots {
|
|
45
48
|
popperProps?: Partial<PopperProps>;
|
|
46
49
|
rootProps?: BoxProps;
|
|
47
50
|
}
|
|
48
51
|
export interface IFilterInputProps<T> {
|
|
49
52
|
onAdd?: (key: TFieldType<T>, value: any, modal?: Record<TFieldType<T>, any>) => void;
|
|
53
|
+
sx?: BoxProps['sx'];
|
|
50
54
|
slots?: IFilterInputSlots;
|
|
51
55
|
}
|
|
@@ -2,11 +2,14 @@ import type { FC } from 'react';
|
|
|
2
2
|
import type { IconButtonProps } from '@mui/material';
|
|
3
3
|
import type { IFieldInputConfig, IFilterInputConfig } from './filter-input.types';
|
|
4
4
|
export declare function getFieldsByMatches<T>(config: IFilterInputConfig<T>, keywords: string): IFieldInputConfig<T>[];
|
|
5
|
+
interface InputAdornmentLeftProps {
|
|
6
|
+
onSearch?: IconButtonProps['onClick'];
|
|
7
|
+
}
|
|
8
|
+
export declare const InputAdornmentLeft: FC<InputAdornmentLeftProps>;
|
|
5
9
|
interface InputAdornmentRightProps {
|
|
6
10
|
hasKeyword?: boolean;
|
|
7
11
|
onSubmit?: IconButtonProps['onClick'];
|
|
8
12
|
onClear?: IconButtonProps['onClick'];
|
|
9
|
-
onSearch?: IconButtonProps['onClick'];
|
|
10
13
|
}
|
|
11
14
|
export declare const InputAdornmentRight: FC<InputAdornmentRightProps>;
|
|
12
15
|
export {};
|
|
@@ -8,6 +8,11 @@ export interface IFilterStateQueryParams {
|
|
|
8
8
|
* @vi Loai bo cac gia tri null/undefined khoi object mot cach de quy de so sanh chinh xac.
|
|
9
9
|
*/
|
|
10
10
|
export declare function removeNullValues<T = any>(obj: T): T | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* @en Check if filter state is empty (no filters applied). Null/undefined values are ignored in this check.
|
|
13
|
+
* @vi Kiem tra xem filter state co rong khong (khong co filter nao duoc ap dung). Gia tri null/undefined se duoc bo qua trong kiem tra nay.
|
|
14
|
+
*/
|
|
15
|
+
export declare function isEmptyFilterState<T>(state?: TFilterState<T>): boolean;
|
|
11
16
|
/**
|
|
12
17
|
* @en Deep comparison of two filter states to check if they are equal.
|
|
13
18
|
* @vi So sanh sau hai filter state de kiem tra xem chung co bang nhau khong.
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { BoxProps } from '@mui/material';
|
|
2
|
-
import type { ComponentType } from 'react';
|
|
2
|
+
import type { ComponentType, FC } from 'react';
|
|
3
3
|
import type { TFilterState } from './types';
|
|
4
|
-
import type { IFilterBarContextState } from './index.context';
|
|
5
4
|
import type { IFilterMenuConfig, IFilterMenuProps } from './components/filter-menu.types';
|
|
6
5
|
import type { IFilterSortConfig, IFilterSortProps } from './components/filter-sort.types';
|
|
7
6
|
import type { IFilterInputConfig, IFilterInputProps } from './components/filter-input.types';
|
|
@@ -34,39 +33,4 @@ export interface IFilterBarProps<T> {
|
|
|
34
33
|
onChange?: (state: TFilterState<T>) => Promise<void> | void;
|
|
35
34
|
slots?: IFilterBarSlots;
|
|
36
35
|
}
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
export declare function createFilterBar<T>(configs: IFilterBarConfigs<T>): {
|
|
40
|
-
new (props: IFilterBarProps<T>): {
|
|
41
|
-
getInitialFilterState(): IFilterBarState<T>;
|
|
42
|
-
readonly filterState: TFilterState<T>;
|
|
43
|
-
readonly isLoading: boolean;
|
|
44
|
-
handleChange: (filterState: TFilterState<T>, state?: Partial<IFilterBarState<T>>) => Promise<void>;
|
|
45
|
-
setFilterState: (state: TFilterState<T>) => void;
|
|
46
|
-
onAddFilter: () => void;
|
|
47
|
-
onAddRemove: () => void;
|
|
48
|
-
render(): import("react/jsx-runtime").JSX.Element;
|
|
49
|
-
context: unknown;
|
|
50
|
-
setState<K extends keyof IFilterBarState<T>>(state: IFilterBarState<T> | ((prevState: Readonly<IFilterBarState<T>>, props: Readonly<IFilterBarProps<T>>) => IFilterBarState<T> | Pick<IFilterBarState<T>, K> | null) | Pick<IFilterBarState<T>, K> | null, callback?: (() => void) | undefined): void;
|
|
51
|
-
forceUpdate(callback?: (() => void) | undefined): void;
|
|
52
|
-
readonly props: Readonly<IFilterBarProps<T>>;
|
|
53
|
-
state: Readonly<IFilterBarState<T>>;
|
|
54
|
-
refs: {
|
|
55
|
-
[key: string]: import("react").ReactInstance;
|
|
56
|
-
};
|
|
57
|
-
componentDidMount?(): void;
|
|
58
|
-
shouldComponentUpdate?(nextProps: Readonly<IFilterBarProps<T>>, nextState: Readonly<IFilterBarState<T>>, nextContext: any): boolean;
|
|
59
|
-
componentWillUnmount?(): void;
|
|
60
|
-
componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
|
|
61
|
-
getSnapshotBeforeUpdate?(prevProps: Readonly<IFilterBarProps<T>>, prevState: Readonly<IFilterBarState<T>>): any;
|
|
62
|
-
componentDidUpdate?(prevProps: Readonly<IFilterBarProps<T>>, prevState: Readonly<IFilterBarState<T>>, snapshot?: any): void;
|
|
63
|
-
componentWillMount?(): void;
|
|
64
|
-
UNSAFE_componentWillMount?(): void;
|
|
65
|
-
componentWillReceiveProps?(nextProps: Readonly<IFilterBarProps<T>>, nextContext: any): void;
|
|
66
|
-
UNSAFE_componentWillReceiveProps?(nextProps: Readonly<IFilterBarProps<T>>, nextContext: any): void;
|
|
67
|
-
componentWillUpdate?(nextProps: Readonly<IFilterBarProps<T>>, nextState: Readonly<IFilterBarState<T>>, nextContext: any): void;
|
|
68
|
-
UNSAFE_componentWillUpdate?(nextProps: Readonly<IFilterBarProps<T>>, nextState: Readonly<IFilterBarState<T>>, nextContext: any): void;
|
|
69
|
-
};
|
|
70
|
-
contextType?: import("react").Context<any> | undefined;
|
|
71
|
-
};
|
|
72
|
-
export {};
|
|
36
|
+
export declare function createFilterBar<T>(configs: IFilterBarConfigs<T>): FC<IFilterBarProps<T>>;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import { getFilterFromURL, isFilterStateEqual, removeNullValues, setFilterToURL } from './helpers';
|
|
1
|
+
import { getFilterFromURL, isEmptyFilterState, isFilterStateEqual, removeNullValues, setFilterToURL } from './helpers';
|
|
2
2
|
import { createFilterBar } from './index.create';
|
|
3
3
|
export declare class DinoFilterBar {
|
|
4
4
|
createFilterBar: typeof createFilterBar;
|
|
5
5
|
createConvertToGraphQL: <TSource extends Record<string, any>, TTarget extends object>(state: import("./types").TFilterState<TSource>) => import("./convert-to-graphql").TableFileterConverter<TSource, TTarget>;
|
|
6
6
|
mapLogic: (logic?: import("./types").TLogic | undefined) => "Or" | "And";
|
|
7
7
|
mapDirection: (direction?: import("./types").TDirection | undefined) => "ASC" | "DESC";
|
|
8
|
+
isEmptyFilterState: typeof isEmptyFilterState;
|
|
8
9
|
removeNullValues: typeof removeNullValues;
|
|
9
10
|
isFilterStateEqual: typeof isFilterStateEqual;
|
|
10
11
|
setFilterToURL: typeof setFilterToURL;
|
|
@@ -1,14 +1,21 @@
|
|
|
1
|
-
import { FC, PropsWithChildren } from 'react';
|
|
2
|
-
import { Breakpoint
|
|
1
|
+
import { FC, PropsWithChildren, ReactNode } from 'react';
|
|
2
|
+
import { Breakpoint } from '@mui/material';
|
|
3
|
+
import type { BoxProps, IconButtonProps, PaperProps } from '@mui/material';
|
|
3
4
|
export interface IFormModalWrapperProps extends PropsWithChildren {
|
|
4
|
-
title:
|
|
5
|
+
title: ReactNode;
|
|
5
6
|
size?: Breakpoint;
|
|
6
7
|
fullHeight?: boolean;
|
|
7
|
-
onCloseClick?:
|
|
8
|
+
onCloseClick?: IconButtonProps['onClick'];
|
|
9
|
+
onBackClick?: IconButtonProps['onClick'];
|
|
10
|
+
enableCloseButton?: boolean;
|
|
11
|
+
enableBackButton?: boolean;
|
|
8
12
|
slots?: {
|
|
9
13
|
wrapProps?: Partial<PaperProps>;
|
|
10
|
-
|
|
14
|
+
topBarProps?: BoxProps;
|
|
11
15
|
beforeTitle?: JSX.Element;
|
|
16
|
+
iconSize?: 'small' | 'medium' | 'large';
|
|
17
|
+
iconBackProps?: Partial<IconButtonProps>;
|
|
18
|
+
iconCloseProps?: Partial<IconButtonProps>;
|
|
12
19
|
};
|
|
13
20
|
}
|
|
14
21
|
declare const FormModalWrapper: FC<IFormModalWrapperProps>;
|
|
@@ -1,17 +1,26 @@
|
|
|
1
1
|
import React, { Component } from 'react';
|
|
2
2
|
import { BoxProps } from '@mui/material';
|
|
3
3
|
import { IBreadcrumbConfig } from '../components';
|
|
4
|
-
export interface
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
export interface IToolbarPannelToolbarConfig {
|
|
5
|
+
columns?: boolean;
|
|
6
|
+
filters?: boolean;
|
|
7
|
+
density?: boolean;
|
|
8
|
+
export?: boolean;
|
|
9
9
|
}
|
|
10
|
-
export interface IToolbarPannelProps
|
|
10
|
+
export interface IToolbarPannelProps {
|
|
11
11
|
title?: React.ReactNode;
|
|
12
12
|
titleProps?: BoxProps;
|
|
13
13
|
icon?: React.ReactNode;
|
|
14
14
|
afterTitle?: React.ReactNode;
|
|
15
|
+
searchInclude?: string[];
|
|
16
|
+
visibilityToolbar?: IToolbarPannelToolbarConfig;
|
|
17
|
+
formCreate?: React.ReactNode;
|
|
18
|
+
breadcrumbs?: IBreadcrumbConfig[];
|
|
19
|
+
afterAction?: React.ReactNode;
|
|
20
|
+
belowAction?: React.ReactNode;
|
|
21
|
+
aboveAction?: React.ReactNode;
|
|
22
|
+
actionWrapProps?: BoxProps;
|
|
23
|
+
sx?: BoxProps['sx'];
|
|
15
24
|
}
|
|
16
25
|
declare class ToolbarPannel extends Component<React.PropsWithChildren<IToolbarPannelProps>> {
|
|
17
26
|
render(): import("react/jsx-runtime").JSX.Element;
|