dinocollab-core 2.2.4 → 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/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/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"}
|
|
@@ -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;
|