dinocollab-core 2.1.4 → 2.1.6
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/components/breadcrumbs.js.map +1 -1
- package/dist/components/create.multi-select-dropdown.js +1 -1
- package/dist/components/create.multi-select-dropdown.js.map +1 -1
- package/dist/components/help-tooltip.js +1 -1
- package/dist/components/help-tooltip.js.map +1 -1
- package/dist/components/image-with-fallback.js +1 -1
- package/dist/components/image-with-fallback.js.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/rich-tooltip.js +2 -0
- package/dist/components/rich-tooltip.js.map +1 -0
- package/dist/data-view/ui.units.js +1 -1
- package/dist/data-view/ui.units.js.map +1 -1
- package/dist/form/create.input.js +1 -1
- package/dist/form/create.input.js.map +1 -1
- package/dist/form/create.select-simple.js +1 -1
- package/dist/form/create.select-simple.js.map +1 -1
- package/dist/form/create.select-with-api.js +1 -1
- package/dist/form/create.select-with-api.js.map +1 -1
- package/dist/redux/types.js.map +1 -1
- package/dist/table/toolbar-pannel.js +1 -1
- package/dist/table/toolbar-pannel.js.map +1 -1
- package/dist/table-grid/filter-bar/ui.units.js +1 -1
- package/dist/table-grid/filter-bar/ui.units.js.map +1 -1
- package/dist/types/components/help-tooltip.d.ts +3 -3
- package/dist/types/components/image-with-fallback.d.ts +3 -3
- package/dist/types/components/index.d.ts +1 -2
- package/dist/types/components/rich-tooltip.d.ts +25 -0
- package/dist/types/form/create.select-simple.d.ts +5 -2
- package/dist/types/form/create.select-with-api.d.ts +6 -3
- package/dist/types/redux/types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumbs.js","sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import React, { FC } from 'react'\r\nimport { Box, Breadcrumbs as MUIBreadcrumbs, styled, Typography, TypographyProps } from '@mui/material'\r\nimport ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'\r\
|
|
1
|
+
{"version":3,"file":"breadcrumbs.js","sources":["../../src/components/breadcrumbs.tsx"],"sourcesContent":["import React, { FC } from 'react'\r\nimport { Box, Breadcrumbs as MUIBreadcrumbs, styled, Typography, TypographyProps } from '@mui/material'\r\nimport ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'\r\n\r\nexport interface IBreadcrumbConfig {\r\n label: string\r\n url?: string\r\n props?: TypographyProps & { [key: string]: any }\r\n onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\r\n}\r\n\r\nexport interface IBreadcrumbsProps {\r\n value?: IBreadcrumbConfig[]\r\n}\r\n\r\nexport const Breadcrumbs: FC<IBreadcrumbsProps> = (props) => {\r\n const list = props.value ?? []\r\n\r\n const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, x: IBreadcrumbConfig) => {\r\n e.preventDefault()\r\n e.stopPropagation()\r\n x.onClick && x.onClick(e)\r\n }\r\n\r\n const getItemProps = (item: IBreadcrumbConfig): TypographyProps => {\r\n return item.props ?? (item.url ? ({ component: 'a', href: item.url } as TypographyProps) : {})\r\n }\r\n\r\n return (\r\n <MUIBreadcrumbs>\r\n {list.map((x, i) => {\r\n const isClick = !!x.onClick || !!x.url\r\n return (\r\n <WrapTypography\r\n key={'key' + i}\r\n {...getItemProps(x)}\r\n onClick={x.onClick ? (e: any) => handleClick(e, x) : undefined}\r\n className={isClick ? 'clickable' : ''}\r\n >\r\n {i < 1 && <ArrowBackIosIcon fontSize='small' />}\r\n <Typography variant='subtitle1' noWrap>\r\n <span>{x.label}</span>\r\n </Typography>\r\n </WrapTypography>\r\n )\r\n })}\r\n </MUIBreadcrumbs>\r\n )\r\n}\r\nexport default Breadcrumbs\r\n\r\nconst WrapTypography = styled(Box)(({ theme }) => ({\r\n display: 'flex',\r\n alignItems: 'center',\r\n color: `var(--color-title, ${theme.palette.text.primary})`,\r\n '.MuiTypography-root': {\r\n color: 'currentColor',\r\n fontWeight: 600\r\n },\r\n '.MuiSvgIcon-root': {\r\n color: 'currentColor',\r\n fontSize: theme.typography.pxToRem(16),\r\n marginRight: theme.spacing(0.5)\r\n },\r\n '&[href]': {\r\n textDecoration: 'none',\r\n cursor: 'pointer',\r\n '&:hover': {\r\n textDecoration: 'underline',\r\n color: `var(--color-title-hover, ${theme.palette.primary.main})`\r\n }\r\n }\r\n}))\r\n"],"names":["Breadcrumbs","props","_props$value","list","value","_jsx","MUIBreadcrumbs","children","map","x","i","item","_item$props","isClick","onClick","url","_jsxs","WrapTypography","_objectSpread","getItemProps","component","href","e","preventDefault","stopPropagation","handleClick","undefined","className","ArrowBackIosIcon","fontSize","Typography","variant","noWrap","label","styled","Box","_ref","theme","display","alignItems","color","concat","palette","text","primary","fontWeight","typography","pxToRem","marginRight","spacing","textDecoration","cursor","main"],"mappings":"gQAeaA,EAAqC,SAACC,GAAS,IAAAC,EACpDC,EAAkB,QAAdD,EAAGD,EAAMG,aAAK,IAAAF,EAAAA,EAAI,GAY5B,OACEG,EAACC,EAAc,CAAAC,SACZJ,EAAKK,KAAI,SAACC,EAAGC,GACZ,IAPgBC,EAA4CC,EAOtDC,IAAYJ,EAAEK,WAAaL,EAAEM,IACnC,OACEC,EAACC,EAAcC,EAAAA,EAETC,CAAAA,EAVK,QAAjBP,GADoBD,EAWKF,GAVbR,aAAK,IAAAW,EAAAA,EAAKD,EAAKI,IAAO,CAAEK,UAAW,IAAKC,KAAMV,EAAKI,KAA4B,CAAE,GAUlE,GAAA,CACnBD,QAASL,EAAEK,QAAU,SAACQ,GAAM,OAlBlB,SAACA,EAAiDb,GACpEa,EAAEC,iBACFD,EAAEE,kBACFf,EAAEK,SAAWL,EAAEK,QAAQQ,EACxB,CAc0CG,CAAYH,EAAGb,EAAE,OAAGiB,EACrDC,UAAWd,EAAU,YAAc,GAElCN,SAAA,CAAAG,EAAI,GAAKL,EAACuB,GAAiBC,SAAS,UACrCxB,EAACyB,EAAW,CAAAC,QAAQ,YAAYC,QAAM,EAAAzB,SACpCF,mBAAOI,EAAEwB,aAPN,MAAQvB,EAWlB,KAGP,EAGMO,EAAiBiB,EAAOC,EAAPD,EAAY,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,MAAQ,CACjDC,QAAS,OACTC,WAAY,SACZC,MAAK,sBAAAC,OAAwBJ,EAAMK,QAAQC,KAAKC,QAAU,KAC1D,sBAAuB,CACrBJ,MAAO,eACPK,WAAY,KAEd,mBAAoB,CAClBL,MAAO,eACPX,SAAUQ,EAAMS,WAAWC,QAAQ,IACnCC,YAAaX,EAAMY,QAAQ,KAE7B,UAAW,CACTC,eAAgB,OAChBC,OAAQ,UACR,UAAW,CACTD,eAAgB,YAChBV,MAAK,4BAAAC,OAA8BJ,EAAMK,QAAQE,QAAQQ,KAAI,OAGlE"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as n,slicedToArray as o,objectSpread2 as e,toConsumableArray as l}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,Fragment as i,jsx as r}from"react/jsx-runtime";import{useState as a,useCallback as c,useEffect as u}from"react";import{styled as s,Popover as d,Badge as p,badgeClasses as h,Box as m,Button as v,TextField as f,ToggleButtonGroup as g,ToggleButton as x,Typography as C,List as b,ListItem as y,FormControlLabel as P,Checkbox as w}from"@mui/material";import j from"@mui/icons-material/FilterAltOutlined";import{mergeObjects as z}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";import A
|
|
1
|
+
import{defineProperty as n,slicedToArray as o,objectSpread2 as e,toConsumableArray as l}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,Fragment as i,jsx as r}from"react/jsx-runtime";import{useState as a,useCallback as c,useEffect as u}from"react";import{styled as s,Popover as d,Badge as p,badgeClasses as h,Box as m,Button as v,TextField as f,ToggleButtonGroup as g,ToggleButton as x,Typography as C,List as b,ListItem as y,FormControlLabel as P,Checkbox as w}from"@mui/material";import j from"@mui/icons-material/FilterAltOutlined";import{mergeObjects as z}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";import{HelpTooltip as A}from"./help-tooltip.js";function k(n){return function(s){var d,p,h,k,S,T,q,B,D,F,H,I,R,Y,_,E,M=a(""),W=o(M,2),X=W[0],G=W[1],J=a(null),K=o(J,2),Q=K[0],U=K[1],V=a(null!==(d=null!==(p=s.options)&&void 0!==p?p:n.options)&&void 0!==d?d:[]),Z=o(V,2),$=Z[0],nn=Z[1],on=a([]),en=o(on,2),ln=en[0],tn=en[1],rn=a(null!==(h=null===(k=s.slots)||void 0===k?void 0:k.defaultLogic)&&void 0!==h?h:"and"),an=o(rn,2),cn=an[0],un=an[1],sn={buttonProps:z(null==n?void 0:n.buttonProps,null===(S=s.slots)||void 0===S?void 0:S.buttonProps),contentProps:null!==(T=null!==(q=null===(B=s.slots)||void 0===B?void 0:B.contentPorps)&&void 0!==q?q:null==n?void 0:n.contentPorps)&&void 0!==T?T:{}},dn=c((function(){var n;s.value&&(un(null!==(n=s.value.logic)&&void 0!==n?n:"and"),tn(s.value.items))}),[s.value]),pn=function(n,o){U(null),setTimeout(dn,300)};return u((function(){s.options&&s.options.length>0&&nn(s.options)}),[s.options]),u((function(){dn()}),[dn]),t(i,{children:[t(v,e(e({color:"inherit",endIcon:r(j,{}),disabled:$.length<1},sn.buttonProps),{},{onClick:function(n){U(n.currentTarget)},children:[n.btnText,r(L,{badgeContent:null===(D=s.value)||void 0===D?void 0:D.items.length,color:"error",overlap:"circular",sx:{transform:"translateY(-50%) translateX(24px)"}})]})),t(O,{open:Boolean(Q),anchorEl:Q,onClose:pn,anchorOrigin:{vertical:"bottom",horizontal:"left"},children:[t(N,{className:"top",children:[r(f,{size:"small",placeholder:null!==(F=n.placeholder)&&void 0!==F?F:"Search",fullWidth:!0,value:X,onChange:function(n){return G(n.target.value)}}),t(g,{size:"small",exclusive:!0,color:"primary",value:cn,onChange:function(n,o){o&&un(o)},children:[r(x,{value:"and",children:"AND"}),r(x,{value:"or",children:"OR"})]}),r(A,{title:"Filter Logic",small:!0,children:t(C,{variant:"body2",color:"text.secondary",children:["Choose how multiple categories are applied.",r("br",{}),r("strong",{children:" AND "})," requires all selected categories, while",r("br",{}),r("strong",{children:" OR "})," matches any."]})})]}),r(m,e(e({className:"menu-content"},sn.contentProps),{},{children:r(b,{children:(R=null!==(H=null===(I=s.value)||void 0===I?void 0:I.items)&&void 0!==H?H:[],Y=$.filter((function(n){return n.toLowerCase().includes(X.toLowerCase())})).sort((function(n,o){return n.localeCompare(o)})),_=Y.filter((function(n){return R.includes(n)})),E=Y.filter((function(n){return!R.includes(n)})),[].concat(l(_),l(E))).map((function(n){return r(y,{sx:{whiteSpace:"nowrap"},children:r(P,{label:n,control:r(w,{checked:ln.includes(n),onChange:function(){return o=n,void tn((function(n){return n.includes(o)?n.filter((function(n){return n!==o})):[].concat(l(n),[o])}));var o}})})},n)}))})})),t(N,{children:[r(v,{size:"small",onClick:function(){tn([]),s.onChange&&s.onChange({items:[],logic:cn})},color:"inherit",children:"Clear"}),r(m,{sx:{flex:1}}),r(v,{size:"small",onClick:function(){tn([]),pn()},color:"inherit",children:"Cancel"}),r(v,{size:"small",variant:"contained",onClick:function(){s.onChange&&s.onChange({items:ln,logic:cn}),pn()},children:"Apply"})]})]})]})}}var O=s(d)({".MuiPaper-root":{overflow:"hidden",position:"relative",width:"360px"},".menu-content":{overflowY:"auto",maxHeight:"".concat(290,"px"),margin:"2px 2px 2px 0"}}),L=s(p)(n({},"& .".concat(h.badge),{top:"-12px",right:"-6px"})),N=s(m)({alignItems:"center",display:"flex",gap:"6px",height:"58px",padding:"8px 10px",boxShadow:"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"});export{k as default};
|
|
2
2
|
//# sourceMappingURL=create.multi-select-dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.multi-select-dropdown.js","sources":["../../src/components/create.multi-select-dropdown.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useState } from 'react'\r\nimport { Badge, badgeClasses, Box, BoxProps, Button, ButtonProps, Checkbox } from '@mui/material'\r\nimport { FormControlLabel, List, ListItem, Popover, styled, TextField, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material'\r\nimport FilterAltOutlinedIcon from '@mui/icons-material/FilterAltOutlined'\r\nimport { mergeObjects } from '../utils'\r\nimport HelpTooltip from './help-tooltip'\r\n\r\nexport type IMultiSelectDropdownFilterLogic = 'and' | 'or'\r\n\r\nexport interface IMultiSelectDropdownFilter {\r\n items: string[]\r\n logic?: IMultiSelectDropdownFilterLogic\r\n}\r\n\r\nexport type IMultiSelectDropdownChange = (value: IMultiSelectDropdownFilter) => void\r\n\r\nexport interface IMultiSelectDropdownSlots {\r\n buttonProps?: ButtonProps\r\n contentPorps?: BoxProps\r\n defaultLogic?: IMultiSelectDropdownFilterLogic\r\n}\r\n\r\nexport interface IMultiSelectDropdownProps {\r\n options?: string[]\r\n value?: IMultiSelectDropdownFilter\r\n onChange?: IMultiSelectDropdownChange\r\n slots?: IMultiSelectDropdownSlots\r\n}\r\n\r\nexport interface IMultiSelectDropdownParams extends IMultiSelectDropdownSlots {\r\n btnText: string\r\n options?: string[]\r\n placeholder?: string\r\n}\r\n\r\nfunction CreateMultiSelectDropdown(params: IMultiSelectDropdownParams) {\r\n const MenuSelectMultiple: FC<IMultiSelectDropdownProps> = (props) => {\r\n const [search, setSearch] = useState<string>('')\r\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\r\n const [options, setOptions] = useState<string[]>(props.options ?? params.options ?? [])\r\n const [itemSelecteds, setItemSelecteds] = useState<string[]>([])\r\n const [logic, setLogic] = useState(props.slots?.defaultLogic ?? 'and')\r\n\r\n const mergeConfig = {\r\n buttonProps: mergeObjects<ButtonProps>(params?.buttonProps, props.slots?.buttonProps),\r\n contentProps: props.slots?.contentPorps ?? params?.contentPorps ?? {}\r\n }\r\n\r\n const getOptions = () => {\r\n const values = props.value?.items ?? []\r\n const list = options.filter((x) => x.toLowerCase().includes(search.toLowerCase())).sort((a, b) => a.localeCompare(b))\r\n\r\n const prioritized = list.filter((x) => values.includes(x))\r\n const others = list.filter((x) => !values.includes(x))\r\n\r\n return [...prioritized, ...others]\r\n }\r\n\r\n const setValueWithProps = useCallback(() => {\r\n if (props.value) {\r\n setLogic(props.value.logic ?? 'and')\r\n setItemSelecteds(props.value.items)\r\n }\r\n }, [props.value])\r\n\r\n const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {\r\n setAnchorEl(event.currentTarget)\r\n }\r\n\r\n const handleClose = (event?: {}, reason?: 'backdropClick' | 'escapeKeyDown') => {\r\n setAnchorEl(null)\r\n setTimeout(setValueWithProps, 300)\r\n }\r\n\r\n const handleToggle = (value: string) => {\r\n setItemSelecteds((prev) => (prev.includes(value) ? prev.filter((t) => t !== value) : [...prev, value]))\r\n }\r\n\r\n const handleClear = () => {\r\n setItemSelecteds([])\r\n props.onChange && props.onChange({ items: [], logic })\r\n }\r\n\r\n const handleCancel = () => {\r\n setItemSelecteds([])\r\n handleClose()\r\n }\r\n\r\n const handleApply = () => {\r\n props.onChange && props.onChange({ items: itemSelecteds, logic })\r\n handleClose()\r\n }\r\n\r\n const handleChangeLogic = (_: React.MouseEvent<HTMLElement>, value: any) => {\r\n if (value) setLogic(value)\r\n }\r\n\r\n useEffect(() => {\r\n if (props.options && props.options.length > 0) setOptions(props.options)\r\n }, [props.options])\r\n\r\n useEffect(() => {\r\n setValueWithProps()\r\n }, [setValueWithProps])\r\n\r\n return (\r\n <>\r\n <Button color='inherit' endIcon={<FilterAltOutlinedIcon />} disabled={options.length < 1} {...mergeConfig.buttonProps} onClick={handleOpen}>\r\n {params.btnText}\r\n <ButtonBadge\r\n badgeContent={props.value?.items.length}\r\n color='error'\r\n overlap='circular'\r\n sx={{ transform: 'translateY(-50%) translateX(24px)' }}\r\n />\r\n </Button>\r\n <CustomPopover open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}>\r\n <WrapActions className='top'>\r\n <TextField\r\n size='small'\r\n placeholder={params.placeholder ?? 'Search'}\r\n fullWidth\r\n value={search}\r\n onChange={(e) => setSearch(e.target.value)}\r\n />\r\n <ToggleButtonGroup size='small' exclusive color='primary' value={logic} onChange={handleChangeLogic}>\r\n <ToggleButton value='and'>AND</ToggleButton>\r\n <ToggleButton value='or'>OR</ToggleButton>\r\n </ToggleButtonGroup>\r\n <HelpTooltip title='Filter Logic' small>\r\n <Typography variant='body2' color='text.secondary'>\r\n Choose how multiple categories are applied.\r\n <br />\r\n <strong> AND </strong> requires all selected categories, while\r\n <br />\r\n <strong> OR </strong> matches any.\r\n </Typography>\r\n </HelpTooltip>\r\n </WrapActions>\r\n <Box className='menu-content' {...mergeConfig.contentProps}>\r\n <List>\r\n {getOptions().map((x) => (\r\n <ListItem key={x} sx={{ whiteSpace: 'nowrap' }}>\r\n <FormControlLabel label={x} control={<Checkbox checked={itemSelecteds.includes(x)} onChange={() => handleToggle(x)} />} />\r\n </ListItem>\r\n ))}\r\n </List>\r\n </Box>\r\n <WrapActions>\r\n <Button size='small' onClick={handleClear} color='inherit'>\r\n Clear\r\n </Button>\r\n <Box sx={{ flex: 1 }} />\r\n <Button size='small' onClick={handleCancel} color='inherit'>\r\n Cancel\r\n </Button>\r\n <Button size='small' variant='contained' onClick={handleApply}>\r\n Apply\r\n </Button>\r\n </WrapActions>\r\n </CustomPopover>\r\n </>\r\n )\r\n }\r\n\r\n return MenuSelectMultiple\r\n}\r\n\r\nexport default CreateMultiSelectDropdown\r\n\r\nconst heightItem = 58\r\nconst CustomPopover = styled(Popover)({\r\n '.MuiPaper-root': {\r\n overflow: 'hidden',\r\n position: 'relative',\r\n width: '360px'\r\n },\r\n '.menu-content': {\r\n overflowY: 'auto',\r\n maxHeight: `${heightItem * 5}px`,\r\n margin: '2px 2px 2px 0'\r\n }\r\n})\r\n\r\nconst ButtonBadge = styled(Badge)({\r\n [`& .${badgeClasses.badge}`]: {\r\n top: '-12px',\r\n right: '-6px'\r\n }\r\n})\r\nconst WrapActions = styled(Box)({\r\n alignItems: 'center',\r\n display: 'flex',\r\n gap: '6px',\r\n height: '58px',\r\n padding: '8px 10px',\r\n boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'\r\n})\r\n"],"names":["CreateMultiSelectDropdown","params","props","_ref","_props$options","_props$slots$defaultL","_props$slots","_props$slots2","_ref2","_props$slots$contentP","_props$slots3","_props$value2","_params$placeholder","_props$value$items","_props$value","values","list","prioritized","others","_useState","useState","_useState2","_slicedToArray","search","setSearch","_useState3","_useState4","anchorEl","setAnchorEl","_useState5","options","_useState6","setOptions","_useState7","_useState8","itemSelecteds","setItemSelecteds","_useState9","slots","defaultLogic","_useState0","logic","setLogic","mergeConfig","buttonProps","mergeObjects","contentProps","contentPorps","setValueWithProps","useCallback","_props$value$logic","value","items","handleClose","event","reason","setTimeout","useEffect","length","_jsxs","_Fragment","children","Button","_objectSpread","color","endIcon","_jsx","FilterAltOutlinedIcon","disabled","onClick","currentTarget","btnText","ButtonBadge","badgeContent","overlap","sx","transform","CustomPopover","open","Boolean","onClose","anchorOrigin","vertical","horizontal","WrapActions","className","TextField","size","placeholder","fullWidth","onChange","e","target","ToggleButtonGroup","exclusive","_","ToggleButton","HelpTooltip","title","small","Typography","variant","Box","List","filter","x","toLowerCase","includes","sort","a","b","localeCompare","concat","_toConsumableArray","map","ListItem","whiteSpace","FormControlLabel","label","control","Checkbox","checked","prev","t","flex","styled","Popover","overflow","position","width","overflowY","maxHeight","heightItem","margin","Badge","_defineProperty","badgeClasses","badge","top","right","alignItems","display","gap","height","padding","boxShadow"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.multi-select-dropdown.js","sources":["../../src/components/create.multi-select-dropdown.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useState } from 'react'\r\nimport { Badge, badgeClasses, Box, BoxProps, Button, ButtonProps, Checkbox } from '@mui/material'\r\nimport { FormControlLabel, List, ListItem, Popover, styled, TextField, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material'\r\nimport FilterAltOutlinedIcon from '@mui/icons-material/FilterAltOutlined'\r\nimport { mergeObjects } from '../utils'\r\nimport HelpTooltip from './help-tooltip'\r\n\r\nexport type IMultiSelectDropdownFilterLogic = 'and' | 'or'\r\n\r\nexport interface IMultiSelectDropdownFilter {\r\n items: string[]\r\n logic?: IMultiSelectDropdownFilterLogic\r\n}\r\n\r\nexport type IMultiSelectDropdownChange = (value: IMultiSelectDropdownFilter) => void\r\n\r\nexport interface IMultiSelectDropdownSlots {\r\n buttonProps?: ButtonProps\r\n contentPorps?: BoxProps\r\n defaultLogic?: IMultiSelectDropdownFilterLogic\r\n}\r\n\r\nexport interface IMultiSelectDropdownProps {\r\n options?: string[]\r\n value?: IMultiSelectDropdownFilter\r\n onChange?: IMultiSelectDropdownChange\r\n slots?: IMultiSelectDropdownSlots\r\n}\r\n\r\nexport interface IMultiSelectDropdownParams extends IMultiSelectDropdownSlots {\r\n btnText: string\r\n options?: string[]\r\n placeholder?: string\r\n}\r\n\r\nfunction CreateMultiSelectDropdown(params: IMultiSelectDropdownParams) {\r\n const MenuSelectMultiple: FC<IMultiSelectDropdownProps> = (props) => {\r\n const [search, setSearch] = useState<string>('')\r\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\r\n const [options, setOptions] = useState<string[]>(props.options ?? params.options ?? [])\r\n const [itemSelecteds, setItemSelecteds] = useState<string[]>([])\r\n const [logic, setLogic] = useState(props.slots?.defaultLogic ?? 'and')\r\n\r\n const mergeConfig = {\r\n buttonProps: mergeObjects<ButtonProps>(params?.buttonProps, props.slots?.buttonProps),\r\n contentProps: props.slots?.contentPorps ?? params?.contentPorps ?? {}\r\n }\r\n\r\n const getOptions = () => {\r\n const values = props.value?.items ?? []\r\n const list = options.filter((x) => x.toLowerCase().includes(search.toLowerCase())).sort((a, b) => a.localeCompare(b))\r\n\r\n const prioritized = list.filter((x) => values.includes(x))\r\n const others = list.filter((x) => !values.includes(x))\r\n\r\n return [...prioritized, ...others]\r\n }\r\n\r\n const setValueWithProps = useCallback(() => {\r\n if (props.value) {\r\n setLogic(props.value.logic ?? 'and')\r\n setItemSelecteds(props.value.items)\r\n }\r\n }, [props.value])\r\n\r\n const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {\r\n setAnchorEl(event.currentTarget)\r\n }\r\n\r\n const handleClose = (event?: {}, reason?: 'backdropClick' | 'escapeKeyDown') => {\r\n setAnchorEl(null)\r\n setTimeout(setValueWithProps, 300)\r\n }\r\n\r\n const handleToggle = (value: string) => {\r\n setItemSelecteds((prev) => (prev.includes(value) ? prev.filter((t) => t !== value) : [...prev, value]))\r\n }\r\n\r\n const handleClear = () => {\r\n setItemSelecteds([])\r\n props.onChange && props.onChange({ items: [], logic })\r\n }\r\n\r\n const handleCancel = () => {\r\n setItemSelecteds([])\r\n handleClose()\r\n }\r\n\r\n const handleApply = () => {\r\n props.onChange && props.onChange({ items: itemSelecteds, logic })\r\n handleClose()\r\n }\r\n\r\n const handleChangeLogic = (_: React.MouseEvent<HTMLElement>, value: any) => {\r\n if (value) setLogic(value)\r\n }\r\n\r\n useEffect(() => {\r\n if (props.options && props.options.length > 0) setOptions(props.options)\r\n }, [props.options])\r\n\r\n useEffect(() => {\r\n setValueWithProps()\r\n }, [setValueWithProps])\r\n\r\n return (\r\n <>\r\n <Button color='inherit' endIcon={<FilterAltOutlinedIcon />} disabled={options.length < 1} {...mergeConfig.buttonProps} onClick={handleOpen}>\r\n {params.btnText}\r\n <ButtonBadge\r\n badgeContent={props.value?.items.length}\r\n color='error'\r\n overlap='circular'\r\n sx={{ transform: 'translateY(-50%) translateX(24px)' }}\r\n />\r\n </Button>\r\n <CustomPopover open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={handleClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}>\r\n <WrapActions className='top'>\r\n <TextField\r\n size='small'\r\n placeholder={params.placeholder ?? 'Search'}\r\n fullWidth\r\n value={search}\r\n onChange={(e) => setSearch(e.target.value)}\r\n />\r\n <ToggleButtonGroup size='small' exclusive color='primary' value={logic} onChange={handleChangeLogic}>\r\n <ToggleButton value='and'>AND</ToggleButton>\r\n <ToggleButton value='or'>OR</ToggleButton>\r\n </ToggleButtonGroup>\r\n <HelpTooltip title='Filter Logic' small>\r\n <Typography variant='body2' color='text.secondary'>\r\n Choose how multiple categories are applied.\r\n <br />\r\n <strong> AND </strong> requires all selected categories, while\r\n <br />\r\n <strong> OR </strong> matches any.\r\n </Typography>\r\n </HelpTooltip>\r\n </WrapActions>\r\n <Box className='menu-content' {...mergeConfig.contentProps}>\r\n <List>\r\n {getOptions().map((x) => (\r\n <ListItem key={x} sx={{ whiteSpace: 'nowrap' }}>\r\n <FormControlLabel label={x} control={<Checkbox checked={itemSelecteds.includes(x)} onChange={() => handleToggle(x)} />} />\r\n </ListItem>\r\n ))}\r\n </List>\r\n </Box>\r\n <WrapActions>\r\n <Button size='small' onClick={handleClear} color='inherit'>\r\n Clear\r\n </Button>\r\n <Box sx={{ flex: 1 }} />\r\n <Button size='small' onClick={handleCancel} color='inherit'>\r\n Cancel\r\n </Button>\r\n <Button size='small' variant='contained' onClick={handleApply}>\r\n Apply\r\n </Button>\r\n </WrapActions>\r\n </CustomPopover>\r\n </>\r\n )\r\n }\r\n\r\n return MenuSelectMultiple\r\n}\r\n\r\nexport default CreateMultiSelectDropdown\r\n\r\nconst heightItem = 58\r\nconst CustomPopover = styled(Popover)({\r\n '.MuiPaper-root': {\r\n overflow: 'hidden',\r\n position: 'relative',\r\n width: '360px'\r\n },\r\n '.menu-content': {\r\n overflowY: 'auto',\r\n maxHeight: `${heightItem * 5}px`,\r\n margin: '2px 2px 2px 0'\r\n }\r\n})\r\n\r\nconst ButtonBadge = styled(Badge)({\r\n [`& .${badgeClasses.badge}`]: {\r\n top: '-12px',\r\n right: '-6px'\r\n }\r\n})\r\nconst WrapActions = styled(Box)({\r\n alignItems: 'center',\r\n display: 'flex',\r\n gap: '6px',\r\n height: '58px',\r\n padding: '8px 10px',\r\n boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'\r\n})\r\n"],"names":["CreateMultiSelectDropdown","params","props","_ref","_props$options","_props$slots$defaultL","_props$slots","_props$slots2","_ref2","_props$slots$contentP","_props$slots3","_props$value2","_params$placeholder","_props$value$items","_props$value","values","list","prioritized","others","_useState","useState","_useState2","_slicedToArray","search","setSearch","_useState3","_useState4","anchorEl","setAnchorEl","_useState5","options","_useState6","setOptions","_useState7","_useState8","itemSelecteds","setItemSelecteds","_useState9","slots","defaultLogic","_useState0","logic","setLogic","mergeConfig","buttonProps","mergeObjects","contentProps","contentPorps","setValueWithProps","useCallback","_props$value$logic","value","items","handleClose","event","reason","setTimeout","useEffect","length","_jsxs","_Fragment","children","Button","_objectSpread","color","endIcon","_jsx","FilterAltOutlinedIcon","disabled","onClick","currentTarget","btnText","ButtonBadge","badgeContent","overlap","sx","transform","CustomPopover","open","Boolean","onClose","anchorOrigin","vertical","horizontal","WrapActions","className","TextField","size","placeholder","fullWidth","onChange","e","target","ToggleButtonGroup","exclusive","_","ToggleButton","HelpTooltip","title","small","Typography","variant","Box","List","filter","x","toLowerCase","includes","sort","a","b","localeCompare","concat","_toConsumableArray","map","ListItem","whiteSpace","FormControlLabel","label","control","Checkbox","checked","prev","t","flex","styled","Popover","overflow","position","width","overflowY","maxHeight","heightItem","margin","Badge","_defineProperty","badgeClasses","badge","top","right","alignItems","display","gap","height","padding","boxShadow"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectSpread2 as r,objectWithoutProperties as t,defineProperty as e}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,jsxs as o}from"react/jsx-runtime";import{styled as n,Typography as l,Tooltip as a,tooltipClasses as p,Box as c,IconButton as m,Stack as s,Divider as x}from"@mui/material";import d from"@mui/icons-material/HelpOutline";var u=["className"],f=function(t){return i(g,{arrow:!0,placement:"bottom",title:o(s,{sx:{gap:"6px",py:"6px",minWidth:"200px",maxWidth:"400px "},children:[i(b,{children:t.title}),i(x,{}),i(c,{sx:{p:"6px 12px"},children:t.children})]}),children:i(c,{sx:r({cursor:"default"},t.sxIcon),children:i(m,{size:"small",children:i(d,{fontSize:t.small?"small":"medium",sx:{color:"rgb(25,103,210)"}})})})})},h=function(r){return i(g,{arrow:!0,placement:"bottom",title:o(s,{sx:{gap:"6px",py:"6px",minWidth:"200px",maxWidth:"400px "},children:[i(b,{children:r.title}),i(x,{}),i(c,{sx:{p:"6px 12px"},children:r.content})]}),children:i(c,{sx:{cursor:"default"},children:r.children})})},b=n((function(t){return i(l,r({variant:"subtitle1"},t))}))({color:"#0095ff",fontWeight:700,padding:"0 10px"}),g=n((function(e){var o=e.className,n=t(e,u);return i(a,r(r({},n),{},{classes:{popper:o}}))}))((function(r){var t=r.theme;return e(e({},"& .".concat(p.tooltip),{backgroundColor:"#fff",color:"#3c3c3c",maxWidth:500,minHeight:120,fontSize:t.typography.pxToRem(12),borderRadius:"8px",boxShadow:"rgba(0, 0, 0, 0.08) 0px 6px 30px"}),"& .".concat(p.arrow),{color:"#fff"})}));export{h as HelpTooltipWrap,f as default};
|
|
1
|
+
import{objectSpread2 as r,objectWithoutProperties as t,defineProperty as e}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,jsxs as o}from"react/jsx-runtime";import{styled as n,Typography as l,Tooltip as a,tooltipClasses as p,Box as c,IconButton as m,Stack as s,Divider as x}from"@mui/material";import d from"@mui/icons-material/HelpOutline";var u=["className"],f=function(t){return i(g,{arrow:!0,placement:"bottom",title:o(s,{sx:{gap:"6px",py:"6px",minWidth:"200px",maxWidth:"400px "},children:[i(b,{children:t.title}),i(x,{}),i(c,{sx:{p:"6px 12px"},children:t.children})]}),children:i(c,{sx:r({cursor:"default"},t.sxIcon),children:i(m,{size:"small",children:i(d,{fontSize:t.small?"small":"medium",sx:{color:"rgb(25,103,210)"}})})})})},h=function(r){return i(g,{arrow:!0,placement:"bottom",title:o(s,{sx:{gap:"6px",py:"6px",minWidth:"200px",maxWidth:"400px "},children:[i(b,{children:r.title}),i(x,{}),i(c,{sx:{p:"6px 12px"},children:r.content})]}),children:i(c,{sx:{cursor:"default"},children:r.children})})},b=n((function(t){return i(l,r({variant:"subtitle1"},t))}))({color:"#0095ff",fontWeight:700,padding:"0 10px"}),g=n((function(e){var o=e.className,n=t(e,u);return i(a,r(r({},n),{},{classes:{popper:o}}))}))((function(r){var t=r.theme;return e(e({},"& .".concat(p.tooltip),{backgroundColor:"#fff",color:"#3c3c3c",maxWidth:500,minHeight:120,fontSize:t.typography.pxToRem(12),borderRadius:"8px",boxShadow:"rgba(0, 0, 0, 0.08) 0px 6px 30px"}),"& .".concat(p.arrow),{color:"#fff"})}));export{f as HelpTooltip,h as HelpTooltipWrap,f as default};
|
|
2
2
|
//# sourceMappingURL=help-tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"help-tooltip.js","sources":["../../src/components/help-tooltip.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"help-tooltip.js","sources":["../../src/components/help-tooltip.tsx"],"sourcesContent":["import { Box, Divider, IconButton, Stack, Tooltip, Typography, styled, tooltipClasses } from '@mui/material'\r\nimport type { FC, PropsWithChildren, ReactNode } from 'react'\r\nimport type { SxProps, Theme, TooltipProps, TypographyProps } from '@mui/material'\r\nimport HelpOutlineIcon from '@mui/icons-material/HelpOutline'\r\n\r\nexport interface IHelpTooltipProps {\r\n title: string\r\n small?: boolean\r\n sxIcon?: SxProps<Theme>\r\n}\r\n\r\nexport const HelpTooltip: FC<PropsWithChildren<IHelpTooltipProps>> = (props) => (\r\n <TooltipStyled\r\n arrow\r\n placement='bottom'\r\n title={\r\n <Stack sx={{ gap: '6px', py: '6px', minWidth: '200px', maxWidth: '400px ' }}>\r\n <TooltipHeaderText>{props.title}</TooltipHeaderText>\r\n <Divider />\r\n <Box sx={{ p: '6px 12px' }}>{props.children}</Box>\r\n </Stack>\r\n }\r\n >\r\n <Box sx={{ cursor: 'default', ...props.sxIcon }}>\r\n <IconButton size='small'>\r\n <HelpOutlineIcon fontSize={props.small ? 'small' : 'medium'} sx={{ color: 'rgb(25,103,210)' }} />\r\n </IconButton>\r\n </Box>\r\n </TooltipStyled>\r\n)\r\n\r\nexport default HelpTooltip\r\n\r\nexport interface IHelpTooltipWrapProps {\r\n content: ReactNode\r\n title: string\r\n children: React.ReactNode\r\n}\r\n\r\nexport const HelpTooltipWrap: FC<IHelpTooltipWrapProps> = (props) => (\r\n <TooltipStyled\r\n arrow\r\n placement='bottom'\r\n title={\r\n <Stack sx={{ gap: '6px', py: '6px', minWidth: '200px', maxWidth: '400px ' }}>\r\n <TooltipHeaderText>{props.title}</TooltipHeaderText>\r\n <Divider />\r\n <Box sx={{ p: '6px 12px' }}>{props.content}</Box>\r\n </Stack>\r\n }\r\n >\r\n <Box sx={{ cursor: 'default' }}>{props.children}</Box>\r\n </TooltipStyled>\r\n)\r\n\r\nconst TooltipHeaderText = styled((props: TypographyProps) => <Typography variant='subtitle1' {...props} />)({\r\n color: '#0095ff',\r\n fontWeight: 700,\r\n padding: '0 10px'\r\n})\r\n\r\nconst TooltipStyled = styled(({ className, ...props }: TooltipProps) => <Tooltip {...props} classes={{ popper: className }} />)(({ theme }) => ({\r\n [`& .${tooltipClasses.tooltip}`]: {\r\n backgroundColor: '#fff',\r\n color: '#3c3c3c',\r\n maxWidth: 500,\r\n minHeight: 120,\r\n fontSize: theme.typography.pxToRem(12),\r\n borderRadius: '8px',\r\n boxShadow: 'rgba(0, 0, 0, 0.08) 0px 6px 30px'\r\n },\r\n [`& .${tooltipClasses.arrow}`]: {\r\n color: '#fff'\r\n }\r\n}))\r\n"],"names":["HelpTooltip","props","_jsx","TooltipStyled","arrow","placement","title","_jsxs","Stack","sx","gap","py","minWidth","maxWidth","children","TooltipHeaderText","Divider","Box","p","_objectSpread","cursor","sxIcon","IconButton","size","HelpOutlineIcon","fontSize","small","color","HelpTooltipWrap","content","styled","Typography","variant","fontWeight","padding","_ref","className","_objectWithoutProperties","_excluded","Tooltip","classes","popper","_ref2","theme","_defineProperty","concat","tooltipClasses","tooltip","backgroundColor","minHeight","typography","pxToRem","borderRadius","boxShadow"],"mappings":"wXAWaA,EAAwD,SAACC,GAAK,OACzEC,EAACC,EACC,CAAAC,OACA,EAAAC,UAAU,SACVC,MACEC,EAACC,EAAK,CAACC,GAAI,CAAEC,IAAK,MAAOC,GAAI,MAAOC,SAAU,QAASC,SAAU,UAAUC,SAAA,CACzEZ,EAACa,EAAmB,CAAAD,SAAAb,EAAMK,QAC1BJ,EAACc,EAAU,CAAA,GACXd,EAACe,EAAI,CAAAR,GAAI,CAAES,EAAG,YAAeJ,SAAAb,EAAMa,cAIvCA,SAAAZ,EAACe,EAAG,CAACR,GAAEU,EAAA,CAAIC,OAAQ,WAAcnB,EAAMoB,QACrCP,SAAAZ,EAACoB,EAAU,CAACC,KAAK,QAAOT,SACtBZ,EAACsB,EAAgB,CAAAC,SAAUxB,EAAMyB,MAAQ,QAAU,SAAUjB,GAAI,CAAEkB,MAAO,0BAGhE,EAWLC,EAA6C,SAAC3B,GAAK,OAC9DC,EAACC,GACCC,OAAK,EACLC,UAAU,SACVC,MACEC,EAACC,EAAK,CAACC,GAAI,CAAEC,IAAK,MAAOC,GAAI,MAAOC,SAAU,QAASC,SAAU,UAC/DC,SAAA,CAAAZ,EAACa,EAAiB,CAAAD,SAAEb,EAAMK,QAC1BJ,EAACc,EAAU,CAAA,GACXd,EAACe,EAAG,CAACR,GAAI,CAAES,EAAG,YAAeJ,SAAAb,EAAM4B,aAIvCf,SAAAZ,EAACe,EAAI,CAAAR,GAAI,CAAEW,OAAQ,oBAAcnB,EAAMa,YACzB,EAGZC,EAAoBe,GAAO,SAAC7B,GAAsB,OAAKC,EAAC6B,EAAUZ,EAAA,CAACa,QAAQ,aAAgB/B,GAAS,GAAhF6B,CAAkF,CAC1GH,MAAO,UACPM,WAAY,IACZC,QAAS,WAGL/B,EAAgB2B,GAAO,SAAAK,GAAA,IAAGC,EAASD,EAATC,UAAcnC,EAAKoC,EAAAF,EAAAG,GAAA,OAAqBpC,EAACqC,EAAOpB,EAAAA,KAAKlB,GAAK,GAAA,CAAEuC,QAAS,CAAEC,OAAQL,KAAe,GAAxGN,EAA0G,SAAAY,GAAA,IAAGC,EAAKD,EAALC,MAAK,OAAAC,EAAAA,EAAA,CAAA,EAAA,MAAAC,OAC/HC,EAAeC,SAAY,CAChCC,gBAAiB,OACjBrB,MAAO,UACPd,SAAU,IACVoC,UAAW,IACXxB,SAAUkB,EAAMO,WAAWC,QAAQ,IACnCC,aAAc,MACdC,UAAW,2CACZR,OACMC,EAAe1C,OAAU,CAC9BuB,MAAO,QACR"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectWithoutProperties as r,slicedToArray as o,objectSpread2 as a}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as t,Fragment as e,jsxs as n}from"react/jsx-runtime";import{useState as l,useEffect as c,Fragment as i}from"react";import{useDebounce as u}from"../hooks/debounce.js";var s=["src","fallbackSrc","alt","loading","debounceDelay"],d=function(d){var f=d.src,m=d.fallbackSrc,p=d.alt,b=d.loading,g=d.debounceDelay,j=void 0===g?0:g,v=r(d,s),S=u(f,j),h=u(m,j),k=j>0?S:f,y=j>0?h:m,x=l(!0),D=o(x,2),L=D[0],P=D[1],_=l(null!=k?k:y),A=o(_,2),B=A[0],E=A[1];c((function(){E(null!=k?k:y),P(!0)}),[k,y]);var F=L&&b?b:t(e,{});return n(i,{children:[F,t("img",a(a({},v),{},{src:B,alt:p,onLoadStart:function(){return P(!0)},onLoad:function(){return P(!1)},onError:function(){E(m),P(!1)}}))]})};export{d as default};
|
|
1
|
+
import{objectWithoutProperties as r,slicedToArray as o,objectSpread2 as a}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as t,Fragment as e,jsxs as n}from"react/jsx-runtime";import{useState as l,useEffect as c,Fragment as i}from"react";import{useDebounce as u}from"../hooks/debounce.js";var s=["src","fallbackSrc","alt","loading","debounceDelay"],d=function(d){var f=d.src,m=d.fallbackSrc,p=d.alt,b=d.loading,g=d.debounceDelay,j=void 0===g?0:g,v=r(d,s),S=u(f,j),h=u(m,j),k=j>0?S:f,y=j>0?h:m,x=l(!0),D=o(x,2),L=D[0],P=D[1],_=l(null!=k?k:y),A=o(_,2),B=A[0],E=A[1];c((function(){E(null!=k?k:y),P(!0)}),[k,y]);var F=L&&b?b:t(e,{});return n(i,{children:[F,t("img",a(a({},v),{},{src:B,alt:p,onLoadStart:function(){return P(!0)},onLoad:function(){return P(!1)},onError:function(){E(m),P(!1)}}))]})};export{d as ImageWithFallback,d as default};
|
|
2
2
|
//# sourceMappingURL=image-with-fallback.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-with-fallback.js","sources":["../../src/components/image-with-fallback.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"image-with-fallback.js","sources":["../../src/components/image-with-fallback.tsx"],"sourcesContent":["import { Fragment, useEffect, useState } from 'react'\r\nimport type { FC, ImgHTMLAttributes, ReactNode } from 'react'\r\nimport { useDebounce } from '../hooks'\r\n\r\nexport interface IImageWithFallbackPropsOwner {\r\n src?: string\r\n alt?: string\r\n fallbackSrc: string\r\n loading?: ReactNode\r\n debounceDelay?: number\r\n}\r\n\r\nexport type IImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, keyof IImageWithFallbackPropsOwner>\r\n\r\nexport interface IImageWithFallbackProps extends IImageProps, IImageWithFallbackPropsOwner {}\r\n\r\nexport const ImageWithFallback: FC<IImageWithFallbackProps> = ({ src, fallbackSrc, alt, loading, debounceDelay = 0, ...props }) => {\r\n const debouncedSrc = useDebounce(src, debounceDelay)\r\n const debouncedFallbackSrc = useDebounce(fallbackSrc, debounceDelay)\r\n\r\n const effectiveSrc = debounceDelay > 0 ? debouncedSrc : src\r\n const effectiveFallbackSrc = debounceDelay > 0 ? debouncedFallbackSrc : fallbackSrc\r\n\r\n const [isLoading, setLoading] = useState(true)\r\n const [imgSrc, setImgSrc] = useState(effectiveSrc ?? effectiveFallbackSrc)\r\n\r\n useEffect(() => {\r\n setImgSrc(effectiveSrc ?? effectiveFallbackSrc)\r\n setLoading(true)\r\n }, [effectiveSrc, effectiveFallbackSrc])\r\n\r\n const loadingElement = isLoading && loading ? loading : <></>\r\n\r\n return (\r\n <Fragment>\r\n {loadingElement}\r\n <img\r\n {...props}\r\n src={imgSrc}\r\n alt={alt}\r\n onLoadStart={() => setLoading(true)}\r\n onLoad={() => setLoading(false)}\r\n onError={() => {\r\n setImgSrc(fallbackSrc)\r\n setLoading(false)\r\n }}\r\n />\r\n </Fragment>\r\n )\r\n}\r\nexport default ImageWithFallback\r\n"],"names":["ImageWithFallback","_ref","src","fallbackSrc","alt","loading","_ref$debounceDelay","debounceDelay","props","_objectWithoutProperties","_excluded","debouncedSrc","useDebounce","debouncedFallbackSrc","effectiveSrc","effectiveFallbackSrc","_useState","useState","_useState2","_slicedToArray","isLoading","setLoading","_useState3","_useState4","imgSrc","setImgSrc","useEffect","loadingElement","_jsx","_jsxs","Fragment","onLoadStart","onLoad","onError"],"mappings":"sWAgBaA,EAAiD,SAAhCC,GAAoG,IAAjEC,EAAGD,EAAHC,IAAKC,EAAWF,EAAXE,YAAaC,EAAGH,EAAHG,IAAKC,EAAOJ,EAAPI,QAAOC,EAAAL,EAAEM,cAAAA,OAAgB,IAAHD,EAAG,EAACA,EAAKE,EAAKC,EAAAR,EAAAS,GACpHC,EAAeC,EAAYV,EAAKK,GAChCM,EAAuBD,EAAYT,EAAaI,GAEhDO,EAAeP,EAAgB,EAAII,EAAeT,EAClDa,EAAuBR,EAAgB,EAAIM,EAAuBV,EAExEa,EAAgCC,GAAS,GAAKC,EAAAC,EAAAH,EAAA,GAAvCI,EAASF,EAAA,GAAEG,EAAUH,EAAA,GAC5BI,EAA4BL,EAASH,QAAAA,EAAgBC,GAAqBQ,EAAAJ,EAAAG,EAAA,GAAnEE,EAAMD,EAAA,GAAEE,EAASF,EAAA,GAExBG,GAAU,WACRD,EAAUX,QAAAA,EAAgBC,GAC1BM,GAAW,EACb,GAAG,CAACP,EAAcC,IAElB,IAAMY,EAAiBP,GAAaf,EAAUA,EAAUuB,QAExD,OACEC,EAACC,aACEH,EACDC,eACMpB,GAAK,GAAA,CACTN,IAAKsB,EACLpB,IAAKA,EACL2B,YAAa,WAAF,OAAQV,GAAW,EAAK,EACnCW,OAAQ,WAAF,OAAQX,GAAW,EAAM,EAC/BY,QAAS,WACPR,EAAUtB,GACVkB,GAAW,EACb,OAIR"}
|
package/dist/components/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{Breadcrumbs}from"./breadcrumbs.js";export{LoadingButton}from"./buttons.js";export{CopyToClipboard}from"./copy-to-clipboard.js";export{default as CreateMultiSelectDropdown}from"./create.multi-select-dropdown.js";export{
|
|
1
|
+
export{Breadcrumbs}from"./breadcrumbs.js";export{LoadingButton}from"./buttons.js";export{CopyToClipboard}from"./copy-to-clipboard.js";export{default as CreateMultiSelectDropdown}from"./create.multi-select-dropdown.js";export{ImageWithFallback}from"./image-with-fallback.js";export{HelpTooltip,HelpTooltipWrap}from"./help-tooltip.js";export{HelpOutlinePulseIcon,RichTooltip}from"./rich-tooltip.js";export{default as TextEditorPreview}from"./text-editor.preview.js";export{default as TextEditor,textEditorClasses}from"./text-editor.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{defineProperty as e,objectWithoutProperties as t,objectSpread2 as r,inherits as n,createClass as o,classCallCheck as i,callSuper as a}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as l,jsxs as c}from"react/jsx-runtime";import{Component as p}from"react";import{styled as s,Stack as u,Tooltip as d,tooltipClasses as f,Typography as m,Divider as h,Box as v}from"@mui/material";import b from"@mui/icons-material/HelpOutline";var x=["className"],g=function(){function t(){var r;i(this,t);for(var n=arguments.length,o=new Array(n),p=0;p<n;p++)o[p]=arguments[p];return r=a(this,t,[].concat(o)),e(r,"renderTitlePanel",(function(){var e=r.props,t=e.panel,n=e.renderPanel;return n?n():t?c(w,{className:P.titlePanel,children:[r.renderTitle(null==t?void 0:t.title),l(h,{}),l(v,{className:P.content,children:r.renderContent(null==t?void 0:t.content)})]}):l(m,{variant:"body2",children:"Please provide a panel configuration"})})),e(r,"renderTitle",(function(e){return e?"string"!=typeof e?e:l(m,{variant:"subtitle1",className:P.title,children:e}):null})),e(r,"renderContent",(function(e){return e?"string"!=typeof e?e:l(m,{variant:"body2",children:e}):null})),r}return n(t,p),o(t,[{key:"render",value:function(){var e=this.props,t=e.children,n=e.slots;return l(T,r(r({arrow:!0,placement:"bottom",title:this.renderTitlePanel(),className:P.root},null==n?void 0:n.tooltipProps),{},{children:l(u,{children:t})}))}}])}(),P={root:"RichTooltip-root",titlePanel:"RichTooltip-titlePanel",title:"RichTooltip-title",content:"RichTooltip-content"},y=function(e,t){return"".concat((null==t?void 0:t.prefix)||"",".").concat(P[e]).concat((null==t?void 0:t.suffix)||"")},w=s(u)((function(t){var r=t.theme;return e(e(e({},y("titlePanel",{prefix:"&"}),{gap:"6px"}),y("title"),{color:r.palette.primary.main,fontWeight:700,padding:r.spacing(1,1.5,0)}),y("content"),{padding:r.spacing(1,1.5,1.5),color:r.palette.text.primary})})),T=s((function(e){var n=e.className,o=t(e,x);return l(d,r(r({},o),{},{classes:{popper:n}}))}))((function(t){var r=t.theme;return e(e({},"& .".concat(f.tooltip),{backgroundColor:"#fff",color:"#3c3c3c",padding:0,minWidth:"360px",maxWidth:"450px",borderRadius:r.shape.borderRadius,boxShadow:"rgba(0, 0, 0, 0.08) 0px 6px 30px"}),"& .".concat(f.arrow),{color:"#fff"})})),R=s(b)((function(e){return{position:"relative",zIndex:1,color:e.theme.palette.primary.main,animation:"pulseGlow 1.5s infinite",borderRadius:"50%",cursor:"help","@keyframes pulseGlow":{"0%":{boxShadow:"0 0 0 0 rgba(33,150,243, 0.3)"},"70%":{boxShadow:"0 0 0 10px rgba(33,150,243, 0)"},"100%":{boxShadow:"0 0 0 0 rgba(33,150,243, 0)"}}}}));export{R as HelpOutlinePulseIcon,g as RichTooltip,g as default};
|
|
2
|
+
//# sourceMappingURL=rich-tooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rich-tooltip.js","sources":["../../src/components/rich-tooltip.tsx"],"sourcesContent":["import { Component } from 'react'\r\nimport { Box, Divider, Stack, Tooltip, Typography, styled, tooltipClasses } from '@mui/material'\r\nimport type { ReactNode } from 'react'\r\nimport type { TooltipProps } from '@mui/material'\r\nimport HelpOutlineIcon from '@mui/icons-material/HelpOutline'\r\n\r\nexport interface IRichTooltipPanelConfig {\r\n title: ReactNode\r\n content: ReactNode\r\n}\r\n\r\nexport interface IRichTooltipProps {\r\n panel?: IRichTooltipPanelConfig\r\n renderPanel?: () => ReactNode\r\n children: React.ReactNode\r\n slots?: {\r\n tooltipProps?: Partial<TooltipProps>\r\n }\r\n}\r\n\r\nexport class RichTooltip extends Component<IRichTooltipProps> {\r\n render() {\r\n const { children, slots } = this.props\r\n return (\r\n <TooltipStyled arrow placement='bottom' title={this.renderTitlePanel()} className={richTooltipClasses.root} {...slots?.tooltipProps}>\r\n <Stack>{children}</Stack>\r\n </TooltipStyled>\r\n )\r\n }\r\n\r\n renderTitlePanel = () => {\r\n const { panel: panel, renderPanel } = this.props\r\n if (renderPanel) return renderPanel()\r\n if (!panel) return <Typography variant='body2'>Please provide a panel configuration</Typography>\r\n return (\r\n <TooltipTitlePanelStyled className={richTooltipClasses.titlePanel}>\r\n {this.renderTitle(panel?.title)}\r\n <Divider />\r\n <Box className={richTooltipClasses.content}>{this.renderContent(panel?.content)}</Box>\r\n </TooltipTitlePanelStyled>\r\n )\r\n }\r\n\r\n renderTitle = (value: ReactNode) => {\r\n if (!value) return null\r\n if (typeof value !== 'string') return value\r\n return (\r\n <Typography variant='subtitle1' className={richTooltipClasses.title}>\r\n {value}\r\n </Typography>\r\n )\r\n }\r\n\r\n renderContent = (value: ReactNode) => {\r\n if (!value) return null\r\n if (typeof value !== 'string') return value\r\n return <Typography variant='body2'>{value}</Typography>\r\n }\r\n}\r\n\r\nexport default RichTooltip\r\n\r\nconst richTooltipClasses = {\r\n root: 'RichTooltip-root',\r\n titlePanel: 'RichTooltip-titlePanel',\r\n title: 'RichTooltip-title',\r\n content: 'RichTooltip-content'\r\n}\r\n\r\nconst getRichTooltipClass = (key: keyof typeof richTooltipClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${richTooltipClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nconst TooltipTitlePanelStyled = styled(Stack)(({ theme }) => ({\r\n [getRichTooltipClass('titlePanel', { prefix: '&' })]: {\r\n gap: '6px'\r\n },\r\n [getRichTooltipClass('title')]: {\r\n color: theme.palette.primary.main,\r\n fontWeight: 700,\r\n padding: theme.spacing(1, 1.5, 0)\r\n },\r\n [getRichTooltipClass('content')]: {\r\n padding: theme.spacing(1, 1.5, 1.5),\r\n color: theme.palette.text.primary\r\n }\r\n}))\r\n\r\nconst TooltipStyled = styled(({ className, ...props }: TooltipProps) => <Tooltip {...props} classes={{ popper: className }} />)(({ theme }) => ({\r\n [`& .${tooltipClasses.tooltip}`]: {\r\n backgroundColor: '#fff',\r\n color: '#3c3c3c',\r\n padding: 0,\r\n minWidth: '360px',\r\n maxWidth: '450px',\r\n borderRadius: theme.shape.borderRadius,\r\n boxShadow: 'rgba(0, 0, 0, 0.08) 0px 6px 30px'\r\n },\r\n [`& .${tooltipClasses.arrow}`]: {\r\n color: '#fff'\r\n }\r\n}))\r\n\r\nexport const HelpOutlinePulseIcon = styled(HelpOutlineIcon)(({ theme }) => ({\r\n position: 'relative',\r\n zIndex: 1,\r\n color: theme.palette.primary.main,\r\n animation: 'pulseGlow 1.5s infinite',\r\n borderRadius: '50%',\r\n cursor: 'help',\r\n '@keyframes pulseGlow': {\r\n '0%': {\r\n boxShadow: '0 0 0 0 rgba(33,150,243, 0.3)'\r\n },\r\n '70%': {\r\n boxShadow: '0 0 0 10px rgba(33,150,243, 0)'\r\n },\r\n '100%': {\r\n boxShadow: '0 0 0 0 rgba(33,150,243, 0)'\r\n }\r\n }\r\n}))\r\n"],"names":["RichTooltip","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","_this$props","props","panel","renderPanel","_jsxs","TooltipTitlePanelStyled","className","richTooltipClasses","titlePanel","renderTitle","title","_jsx","Divider","Box","content","children","renderContent","Typography","variant","value","_inherits","Component","_createClass","key","_this$props2","slots","TooltipStyled","_objectSpread","arrow","placement","renderTitlePanel","root","tooltipProps","Stack","getRichTooltipClass","options","prefix","suffix","styled","_ref","theme","gap","color","palette","primary","main","fontWeight","padding","spacing","text","_ref3","_objectWithoutProperties","_excluded","Tooltip","classes","popper","_ref4","tooltipClasses","tooltip","backgroundColor","minWidth","maxWidth","borderRadius","shape","boxShadow","HelpOutlinePulseIcon","HelpOutlineIcon","_ref6","position","zIndex","animation","cursor"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectSpread2 as e,objectWithoutProperties as o,slicedToArray as n}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,Fragment as l,jsxs as r}from"react/jsx-runtime";import t,{useRef as a,useState as d}from"react";import{styled as u,ToggleButtonGroup as s,Button as c,colors as f,Box as m,RadioGroup as v,FormGroup as p,ButtonGroup as h,IconButton as g,InputBase as b,InputAdornment as x,Typography as C,Tooltip as z,TextField as y,FormControlLabel as w,Checkbox as S,Radio as T,ToggleButton as R}from"@mui/material";import k from"@mui/icons-material/Close";import B from"@mui/icons-material/Shuffle";import P from"@mui/icons-material/ClearAll";import L from"@mui/icons-material/FilterList";import W from"@mui/icons-material/ArrowUpward";import D from"@mui/icons-material/ArrowDownward";import E from"@mui/icons-material/KeyboardReturn";import F from"@mui/icons-material/KeyboardArrowDown";import{mapDataViewContext as M}from"./context.js";import j from"../components/help-tooltip.js";import{createFilterStore as A}from"./filter-store.js";var N=["children"],I={asc:{title:"Ascending",icon:i(W,{fontSize:"small"})},desc:{title:"Descending",icon:i(D,{fontSize:"small"})}},_=function(e){return r(O,{size:"small",value:e.value||"and",exclusive:!0,onChange:function(o,n){n&&e.onChange&&e.onChange(o,n)},children:[i(R,{size:"small",value:"and","aria-label":"and logic",children:"AND"}),i(R,{size:"small",value:"or","aria-label":"or logic",children:"OR"})]})},H=function(e){return r(O,{size:"small",value:e.value||"before",exclusive:!0,onChange:function(o,n){n&&e.onChange&&e.onChange(o,n)},children:[i(R,{size:"small",value:"before","aria-label":"before date",children:"before"}),i(R,{size:"small",value:"after","aria-label":"after date",children:"after"})]})},K=function(e){return r(O,{size:"small",value:e.value||"between",exclusive:!0,onChange:function(o,n){n&&e.onChange&&e.onChange(o,n)},children:[i(R,{size:"small",value:"between","aria-label":"between dates",children:"between"}),i(R,{size:"small",value:"not-between","aria-label":"not between dates",children:"not between"})]})},O=u(s)({"& .MuiToggleButton-root":{color:"#fff",borderColor:"rgba(255, 255, 255, 0.3)",fontSize:"0.65rem",fontWeight:600,lineHeight:1,minWidth:"40px",padding:"6px 8px","&.Mui-selected":{backgroundColor:"#1976d2",color:"#fff","&:hover":{backgroundColor:"#1565c0"}},"&:hover":{backgroundColor:"rgba(255, 255, 255, 0.08)"}}}),U=function(e){return i(fe,{children:e.items.map((function(e,o){return i(C,{component:"li",variant:"body2",children:e},o)}))})},Y=function(e){var o,n;return i(ce,{className:!0===e.disabledSize?"disabled-size":"",children:i(j,{small:!0,title:null!==(o=e.title)&&void 0!==o?o:"The search includes",children:e.renderContent?e.renderContent():i(U,{items:null!==(n=e.items)&&void 0!==n?n:[]})})})},$=t.forwardRef((function(o,n){return i(b,e(e({fullWidth:!0,autoComplete:"off",size:"small"},o),{},{inputRef:n}))})),q=function(o){return r(x,{position:"end",children:[o.keyword&&r(l,{children:[i(G,{size:"small",color:"primary",onClick:o.onEnterSearch,sx:{display:{xs:"none",md:"flex"}},children:r(C,{variant:"caption",children:["Type and hit ",i("b",{children:"Enter ⏎"})," to filter."]})}),i(z,{title:"Press Enter to filter",placement:"bottom",arrow:!0,children:i(g,{size:"small",color:"primary",sx:{display:{xs:"flex",md:"none"}},onClick:o.onEnterSearch,children:i(E,{fontSize:"small"})})})]}),o.keyword&&i(z,{title:"Press Esc to clear",placement:"bottom",arrow:!0,children:i(g,{size:"small",sx:{marginLeft:"8px",color:"text.error","&:hover":{color:"error.main"}},onClick:o.onClear,children:i(k,{fontSize:"small"})})}),o.notes&&i(Y,e({},o.notes))]})},G=u(c)({padding:"4px 6px",textTransform:"none",lineHeight:1,".MuiTypography-root":{fontWeight:600,b:{fontWeight:700,backgroundColor:f.blue[100],borderRadius:"4px",padding:"2px 4px"}}}),J=t.forwardRef((function(n,l){var r=n.children,t=o(n,N);return i(Q,e(e({size:"small",color:"error",startIcon:i(P,{}),ref:l},t),{},{children:r||"Clear all"}))})),Q=u(c)({textTransform:"none",fontWeight:700}),V=t.forwardRef((function(o,n){return i(g,e(e({ref:n,size:"small",sx:{flex:"0 0 auto"}},o),{},{children:i(L,{})}))})),X=function(o){var n=a(null);return i(l,{children:M((function(l){var t,a,d,u,s,c,f,m,v,p=l.filterState,g=l.filterBarConfigs,b=p.sort?I[null===(t=p.sort)||void 0===t?void 0:t.direction]:{},x=null===(a=g.fields)||void 0===a?void 0:a[null===(d=p.sort)||void 0===d?void 0:d.field],C=(null==x?void 0:x.label)||(null===(u=p.sort)||void 0===u||null===(u=u.field)||void 0===u?void 0:u.toString())||(null===(s=g.sortButton)||void 0===s?void 0:s.text);return C?r(h,{"aria-label":"Button Sort",size:"small",children:[i(Z,e(e(e({size:"small",color:"inherit",startIcon:b.icon||i(B,{fontSize:"small"}),onClick:function(e){e.stopPropagation(),n.current&&clearTimeout(n.current),n.current=setTimeout((function(){return function(){var e,o;if(null!==(e=p.sort)&&void 0!==e&&e.field){var n=null===(o=p.sort)||void 0===o?void 0:o.direction,i=n&&"asc"===n?"desc":"asc",r={field:p.sort.field,direction:i},t=A(p).changeSort(r,{area:"sortButton"});l.onFilterStateChange(t.build())}}()}),500)}},null===(v=g.sortButton)||void 0===v?void 0:v.wrapProps),o),{},{children:C})),i(Z,{size:"small",color:"inherit",sx:{p:0},onClick:function(e){return l.onPopperPanelChange(e.currentTarget,"sortButton")},children:i(F,{fontSize:"small"})})]}):i(Z,e(e(e({size:"small",color:"inherit",startIcon:b.icon||i(B,{fontSize:"small"}),endIcon:null!==(c=null===(f=g.sortButton)||void 0===f?void 0:f.icon)&&void 0!==c?c:i(F,{fontSize:"small"}),onClick:function(e){return l.onPopperPanelChange(e.currentTarget,"sortButton")}},null===(m=g.sortButton)||void 0===m?void 0:m.wrapProps),o),{},{children:C||"Sort"}))}))})},Z=u(c)({height:"var(--filter-bar-height, 40px)",padding:"0 16px",backgroundColor:f.grey[50],border:"1px solid var(--color-divider, rgba(145 158 171 / 20%))",textTransform:"none",fontWeight:600,":hover":{backgroundColor:f.grey[100]}}),ee=function(e){var o=e.area;return i(m,{sx:{padding:"8px",textAlign:"center",border:"1px solid #ddd",borderRadius:"4px"},children:r(C,{variant:"body2",sx:{padding:"8px"},children:["No panel available for area: ",o]})})},oe=function(o){var n=o.label,l=o.notes,t=o.children,a=o.afterTopBar;return r(ne,{children:[r(m,{className:"top-bar",children:[i(C,{variant:"subtitle2",children:n}),a&&i(m,{className:"after-top-bar",children:a}),l&&i(Y,e({title:"The ".concat(n," includes"),disabledSize:!0},l))]}),i(m,{className:"content",children:t})]})},ne=u(m)({minWidth:"200px",borderRadius:"4px",overflow:"hidden",".top-bar":{display:"flex",alignItems:"center",background:f.grey[900],padding:"8px",gap:"8px",".MuiTypography-root":{color:f.common.white,flex:1}},".after-top-bar":{marginLeft:"8px"},".content":{padding:"8px"}}),ie=function(e){var o,n,l,r,t,a=null!==(o=null===(n=e.fieldConfig)||void 0===n?void 0:n.label)&&void 0!==o?o:e.name;return i(oe,{label:a,notes:null===(l=e.fieldConfig)||void 0===l?void 0:l.notes,children:i(y,{autoFocus:!0,name:e.name,size:"small",fullWidth:!0,error:!(null===(r=e.validationResult)||void 0===r||!r.hasError),helperText:null===(t=e.validationResult)||void 0===t?void 0:t.message})})},le=function(e){var o,n,l,r,t,a=null!==(o=null===(n=e.fieldConfig)||void 0===n?void 0:n.label)&&void 0!==o?o:e.name;return i(oe,{label:a,notes:null===(l=e.fieldConfig)||void 0===l?void 0:l.notes,children:i(re,{name:e.name,className:null!==(r=e.validationResult)&&void 0!==r&&r.hasError?"error":"",onChange:e.onChange,children:null===(t=e.fieldConfig)||void 0===t?void 0:t.options.map((function(e,o){var n;return i(w,{value:e.value,control:i(T,{}),label:null!==(n=e.label)&&void 0!==n?n:e.value},e.value.toString()+o)}))})})},re=u(v)({marginLeft:"-8px",marginRight:"-8px","&.error .MuiRadio-root":{color:"#d32f2f"},".MuiFormControlLabel-root":{margin:0},".MuiFormControlLabel-root:hover":{backgroundColor:"rgba(25, 118, 210, 0.04)"}}),te=function(e){var o,l,t,a,u,s=d("and"),c=n(s,2),f=c[0],m=c[1],v=null!==(o=null===(l=e.fieldConfig)||void 0===l?void 0:l.label)&&void 0!==o?o:e.name;return r(oe,{label:v,notes:null===(t=e.fieldConfig)||void 0===t?void 0:t.notes,afterTopBar:i(_,{value:f,onChange:function(e,o){return m(o)}}),children:[i("input",{type:"hidden",name:"filterLogic",value:f}),i(ae,{className:null!==(a=e.validationResult)&&void 0!==a&&a.hasError?"error":"",children:null===(u=e.fieldConfig)||void 0===u?void 0:u.options.map((function(o,n){var l;return i(w,{value:o.value,control:i(S,{name:e.name}),label:null!==(l=o.label)&&void 0!==l?l:o.value,onChange:e.onChange},o.value.toString()+n)}))})]})},ae=u(p)({marginLeft:"-8px",marginRight:"-8px","&.error .MuiCheckbox-root":{color:"#d32f2f"},".MuiFormControlLabel-root":{margin:0},".MuiFormControlLabel-root:hover":{backgroundColor:"rgba(25, 118, 210, 0.04)"}});var de=function(e){var o,l,t,a,u,s,c,f,v=d("before"),p=n(v,2),h=p[0],g=p[1],b=d(""),x=n(b,2),C=x[0],z=x[1],w=null!==(o=null===(l=e.fieldConfig)||void 0===l?void 0:l.label)&&void 0!==o?o:e.name;return i(oe,{label:w,notes:null===(t=e.fieldConfig)||void 0===t?void 0:t.notes,afterTopBar:i(H,{value:h,onChange:function(e,o){return g(o)}}),children:r(m,{className:"content",children:[i("input",{type:"hidden",name:"dateLogic",value:h}),i("input",{hidden:!0,type:"text",name:e.name,readOnly:!0,value:(f=C,f&&/^\d{4}-\d{2}-\d{2}$/.test(f)?"".concat(f,"T00:00:00.0000000"):"")}),i(y,{autoFocus:!0,fullWidth:!0,type:"date",size:"small",value:C,onChange:function(e){return z(e.target.value)},error:!(null===(a=e.validationResult)||void 0===a||!a.hasError),helperText:null===(u=e.validationResult)||void 0===u?void 0:u.message,inputProps:{min:null===(s=e.fieldConfig)||void 0===s?void 0:s.minDate,max:null===(c=e.fieldConfig)||void 0===c?void 0:c.maxDate}})]})})},ue=function(e){var o,l,t,a,u,s,c,f,m,v,p=d("between"),h=n(p,2),g=h[0],b=h[1],x=null!==(o=null===(l=e.fieldConfig)||void 0===l?void 0:l.label)&&void 0!==o?o:e.name;return r(oe,{label:x,notes:null===(t=e.fieldConfig)||void 0===t?void 0:t.notes,afterTopBar:i(K,{value:g,onChange:function(e,o){return b(o)}}),children:[i("input",{type:"hidden",name:"dateRangeLogic",value:g}),r(se,{children:[i(y,{autoFocus:!0,fullWidth:!0,name:"".concat(e.name,"_start"),type:"date",size:"small",label:"From",error:!(null===(a=e.validationResult)||void 0===a||!a.hasError),sx:{marginBottom:1},InputLabelProps:{shrink:!0},inputProps:{min:null===(u=e.fieldConfig)||void 0===u?void 0:u.minDate,max:null===(s=e.fieldConfig)||void 0===s?void 0:s.maxDate}}),i(y,{fullWidth:!0,name:"".concat(e.name,"_end"),type:"date",size:"small",label:"To",error:!(null===(c=e.validationResult)||void 0===c||!c.hasError),helperText:null===(f=e.validationResult)||void 0===f?void 0:f.message,InputLabelProps:{shrink:!0},inputProps:{min:null===(m=e.fieldConfig)||void 0===m?void 0:m.minDate,max:null===(v=e.fieldConfig)||void 0===v?void 0:v.maxDate}})]})]})},se=u(m)({display:"flex",flexDirection:"column",gap:"8px"}),ce=u(m)({display:"inline-flex",flex:"0 0 auto",justifyContent:"center",alignItems:"center","&:not(.disabled-size)":{width:"40px",height:"40px"}}),fe=u("ul")({paddingLeft:"1.7rem",marginBottom:0,li:{position:"relative",textAlign:"justify","&::before":{content:'"►"',display:"block",position:"absolute",top:"50%",right:"calc(100% + 6px)",transform:"translateY(-50%)",fontSize:"0.9em"}}});export{J as ClearAllButton,H as DateLogicToggle,K as DateRangeLogicToggle,V as FilterButton,$ as FilterInput,q as FilterInputAdornment,_ as FilterLogicToggle,Y as FilterNotes,de as MenuWithTypeDate,ue as MenuWithTypeDateRange,le as MenuWithTypeSelect,te as MenuWithTypeSelectMulti,ie as MenuWithTypeString,ee as PanelNotFound,X as SortButton,I as mapSortConfigs};
|
|
1
|
+
import{objectSpread2 as e,objectWithoutProperties as o,slicedToArray as n}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,Fragment as l,jsxs as r}from"react/jsx-runtime";import t,{useRef as a,useState as d}from"react";import{styled as u,ToggleButtonGroup as s,Button as c,colors as f,Box as m,RadioGroup as v,FormGroup as p,ButtonGroup as h,IconButton as g,InputBase as b,InputAdornment as x,Typography as C,Tooltip as z,TextField as y,FormControlLabel as w,Checkbox as S,Radio as T,ToggleButton as R}from"@mui/material";import k from"@mui/icons-material/Close";import B from"@mui/icons-material/Shuffle";import P from"@mui/icons-material/ClearAll";import L from"@mui/icons-material/FilterList";import W from"@mui/icons-material/ArrowUpward";import D from"@mui/icons-material/ArrowDownward";import E from"@mui/icons-material/KeyboardReturn";import F from"@mui/icons-material/KeyboardArrowDown";import{mapDataViewContext as M}from"./context.js";import{HelpTooltip as j}from"../components/help-tooltip.js";import{createFilterStore as A}from"./filter-store.js";var N=["children"],I={asc:{title:"Ascending",icon:i(W,{fontSize:"small"})},desc:{title:"Descending",icon:i(D,{fontSize:"small"})}},_=function(e){return r(O,{size:"small",value:e.value||"and",exclusive:!0,onChange:function(o,n){n&&e.onChange&&e.onChange(o,n)},children:[i(R,{size:"small",value:"and","aria-label":"and logic",children:"AND"}),i(R,{size:"small",value:"or","aria-label":"or logic",children:"OR"})]})},H=function(e){return r(O,{size:"small",value:e.value||"before",exclusive:!0,onChange:function(o,n){n&&e.onChange&&e.onChange(o,n)},children:[i(R,{size:"small",value:"before","aria-label":"before date",children:"before"}),i(R,{size:"small",value:"after","aria-label":"after date",children:"after"})]})},K=function(e){return r(O,{size:"small",value:e.value||"between",exclusive:!0,onChange:function(o,n){n&&e.onChange&&e.onChange(o,n)},children:[i(R,{size:"small",value:"between","aria-label":"between dates",children:"between"}),i(R,{size:"small",value:"not-between","aria-label":"not between dates",children:"not between"})]})},O=u(s)({"& .MuiToggleButton-root":{color:"#fff",borderColor:"rgba(255, 255, 255, 0.3)",fontSize:"0.65rem",fontWeight:600,lineHeight:1,minWidth:"40px",padding:"6px 8px","&.Mui-selected":{backgroundColor:"#1976d2",color:"#fff","&:hover":{backgroundColor:"#1565c0"}},"&:hover":{backgroundColor:"rgba(255, 255, 255, 0.08)"}}}),U=function(e){return i(fe,{children:e.items.map((function(e,o){return i(C,{component:"li",variant:"body2",children:e},o)}))})},Y=function(e){var o,n;return i(ce,{className:!0===e.disabledSize?"disabled-size":"",children:i(j,{small:!0,title:null!==(o=e.title)&&void 0!==o?o:"The search includes",children:e.renderContent?e.renderContent():i(U,{items:null!==(n=e.items)&&void 0!==n?n:[]})})})},$=t.forwardRef((function(o,n){return i(b,e(e({fullWidth:!0,autoComplete:"off",size:"small"},o),{},{inputRef:n}))})),q=function(o){return r(x,{position:"end",children:[o.keyword&&r(l,{children:[i(G,{size:"small",color:"primary",onClick:o.onEnterSearch,sx:{display:{xs:"none",md:"flex"}},children:r(C,{variant:"caption",children:["Type and hit ",i("b",{children:"Enter ⏎"})," to filter."]})}),i(z,{title:"Press Enter to filter",placement:"bottom",arrow:!0,children:i(g,{size:"small",color:"primary",sx:{display:{xs:"flex",md:"none"}},onClick:o.onEnterSearch,children:i(E,{fontSize:"small"})})})]}),o.keyword&&i(z,{title:"Press Esc to clear",placement:"bottom",arrow:!0,children:i(g,{size:"small",sx:{marginLeft:"8px",color:"text.error","&:hover":{color:"error.main"}},onClick:o.onClear,children:i(k,{fontSize:"small"})})}),o.notes&&i(Y,e({},o.notes))]})},G=u(c)({padding:"4px 6px",textTransform:"none",lineHeight:1,".MuiTypography-root":{fontWeight:600,b:{fontWeight:700,backgroundColor:f.blue[100],borderRadius:"4px",padding:"2px 4px"}}}),J=t.forwardRef((function(n,l){var r=n.children,t=o(n,N);return i(Q,e(e({size:"small",color:"error",startIcon:i(P,{}),ref:l},t),{},{children:r||"Clear all"}))})),Q=u(c)({textTransform:"none",fontWeight:700}),V=t.forwardRef((function(o,n){return i(g,e(e({ref:n,size:"small",sx:{flex:"0 0 auto"}},o),{},{children:i(L,{})}))})),X=function(o){var n=a(null);return i(l,{children:M((function(l){var t,a,d,u,s,c,f,m,v,p=l.filterState,g=l.filterBarConfigs,b=p.sort?I[null===(t=p.sort)||void 0===t?void 0:t.direction]:{},x=null===(a=g.fields)||void 0===a?void 0:a[null===(d=p.sort)||void 0===d?void 0:d.field],C=(null==x?void 0:x.label)||(null===(u=p.sort)||void 0===u||null===(u=u.field)||void 0===u?void 0:u.toString())||(null===(s=g.sortButton)||void 0===s?void 0:s.text);return C?r(h,{"aria-label":"Button Sort",size:"small",children:[i(Z,e(e(e({size:"small",color:"inherit",startIcon:b.icon||i(B,{fontSize:"small"}),onClick:function(e){e.stopPropagation(),n.current&&clearTimeout(n.current),n.current=setTimeout((function(){return function(){var e,o;if(null!==(e=p.sort)&&void 0!==e&&e.field){var n=null===(o=p.sort)||void 0===o?void 0:o.direction,i=n&&"asc"===n?"desc":"asc",r={field:p.sort.field,direction:i},t=A(p).changeSort(r,{area:"sortButton"});l.onFilterStateChange(t.build())}}()}),500)}},null===(v=g.sortButton)||void 0===v?void 0:v.wrapProps),o),{},{children:C})),i(Z,{size:"small",color:"inherit",sx:{p:0},onClick:function(e){return l.onPopperPanelChange(e.currentTarget,"sortButton")},children:i(F,{fontSize:"small"})})]}):i(Z,e(e(e({size:"small",color:"inherit",startIcon:b.icon||i(B,{fontSize:"small"}),endIcon:null!==(c=null===(f=g.sortButton)||void 0===f?void 0:f.icon)&&void 0!==c?c:i(F,{fontSize:"small"}),onClick:function(e){return l.onPopperPanelChange(e.currentTarget,"sortButton")}},null===(m=g.sortButton)||void 0===m?void 0:m.wrapProps),o),{},{children:C||"Sort"}))}))})},Z=u(c)({height:"var(--filter-bar-height, 40px)",padding:"0 16px",backgroundColor:f.grey[50],border:"1px solid var(--color-divider, rgba(145 158 171 / 20%))",textTransform:"none",fontWeight:600,":hover":{backgroundColor:f.grey[100]}}),ee=function(e){var o=e.area;return i(m,{sx:{padding:"8px",textAlign:"center",border:"1px solid #ddd",borderRadius:"4px"},children:r(C,{variant:"body2",sx:{padding:"8px"},children:["No panel available for area: ",o]})})},oe=function(o){var n=o.label,l=o.notes,t=o.children,a=o.afterTopBar;return r(ne,{children:[r(m,{className:"top-bar",children:[i(C,{variant:"subtitle2",children:n}),a&&i(m,{className:"after-top-bar",children:a}),l&&i(Y,e({title:"The ".concat(n," includes"),disabledSize:!0},l))]}),i(m,{className:"content",children:t})]})},ne=u(m)({minWidth:"200px",borderRadius:"4px",overflow:"hidden",".top-bar":{display:"flex",alignItems:"center",background:f.grey[900],padding:"8px",gap:"8px",".MuiTypography-root":{color:f.common.white,flex:1}},".after-top-bar":{marginLeft:"8px"},".content":{padding:"8px"}}),ie=function(e){var o,n,l,r,t,a=null!==(o=null===(n=e.fieldConfig)||void 0===n?void 0:n.label)&&void 0!==o?o:e.name;return i(oe,{label:a,notes:null===(l=e.fieldConfig)||void 0===l?void 0:l.notes,children:i(y,{autoFocus:!0,name:e.name,size:"small",fullWidth:!0,error:!(null===(r=e.validationResult)||void 0===r||!r.hasError),helperText:null===(t=e.validationResult)||void 0===t?void 0:t.message})})},le=function(e){var o,n,l,r,t,a=null!==(o=null===(n=e.fieldConfig)||void 0===n?void 0:n.label)&&void 0!==o?o:e.name;return i(oe,{label:a,notes:null===(l=e.fieldConfig)||void 0===l?void 0:l.notes,children:i(re,{name:e.name,className:null!==(r=e.validationResult)&&void 0!==r&&r.hasError?"error":"",onChange:e.onChange,children:null===(t=e.fieldConfig)||void 0===t?void 0:t.options.map((function(e,o){var n;return i(w,{value:e.value,control:i(T,{}),label:null!==(n=e.label)&&void 0!==n?n:e.value},e.value.toString()+o)}))})})},re=u(v)({marginLeft:"-8px",marginRight:"-8px","&.error .MuiRadio-root":{color:"#d32f2f"},".MuiFormControlLabel-root":{margin:0},".MuiFormControlLabel-root:hover":{backgroundColor:"rgba(25, 118, 210, 0.04)"}}),te=function(e){var o,l,t,a,u,s=d("and"),c=n(s,2),f=c[0],m=c[1],v=null!==(o=null===(l=e.fieldConfig)||void 0===l?void 0:l.label)&&void 0!==o?o:e.name;return r(oe,{label:v,notes:null===(t=e.fieldConfig)||void 0===t?void 0:t.notes,afterTopBar:i(_,{value:f,onChange:function(e,o){return m(o)}}),children:[i("input",{type:"hidden",name:"filterLogic",value:f}),i(ae,{className:null!==(a=e.validationResult)&&void 0!==a&&a.hasError?"error":"",children:null===(u=e.fieldConfig)||void 0===u?void 0:u.options.map((function(o,n){var l;return i(w,{value:o.value,control:i(S,{name:e.name}),label:null!==(l=o.label)&&void 0!==l?l:o.value,onChange:e.onChange},o.value.toString()+n)}))})]})},ae=u(p)({marginLeft:"-8px",marginRight:"-8px","&.error .MuiCheckbox-root":{color:"#d32f2f"},".MuiFormControlLabel-root":{margin:0},".MuiFormControlLabel-root:hover":{backgroundColor:"rgba(25, 118, 210, 0.04)"}});var de=function(e){var o,l,t,a,u,s,c,f,v=d("before"),p=n(v,2),h=p[0],g=p[1],b=d(""),x=n(b,2),C=x[0],z=x[1],w=null!==(o=null===(l=e.fieldConfig)||void 0===l?void 0:l.label)&&void 0!==o?o:e.name;return i(oe,{label:w,notes:null===(t=e.fieldConfig)||void 0===t?void 0:t.notes,afterTopBar:i(H,{value:h,onChange:function(e,o){return g(o)}}),children:r(m,{className:"content",children:[i("input",{type:"hidden",name:"dateLogic",value:h}),i("input",{hidden:!0,type:"text",name:e.name,readOnly:!0,value:(f=C,f&&/^\d{4}-\d{2}-\d{2}$/.test(f)?"".concat(f,"T00:00:00.0000000"):"")}),i(y,{autoFocus:!0,fullWidth:!0,type:"date",size:"small",value:C,onChange:function(e){return z(e.target.value)},error:!(null===(a=e.validationResult)||void 0===a||!a.hasError),helperText:null===(u=e.validationResult)||void 0===u?void 0:u.message,inputProps:{min:null===(s=e.fieldConfig)||void 0===s?void 0:s.minDate,max:null===(c=e.fieldConfig)||void 0===c?void 0:c.maxDate}})]})})},ue=function(e){var o,l,t,a,u,s,c,f,m,v,p=d("between"),h=n(p,2),g=h[0],b=h[1],x=null!==(o=null===(l=e.fieldConfig)||void 0===l?void 0:l.label)&&void 0!==o?o:e.name;return r(oe,{label:x,notes:null===(t=e.fieldConfig)||void 0===t?void 0:t.notes,afterTopBar:i(K,{value:g,onChange:function(e,o){return b(o)}}),children:[i("input",{type:"hidden",name:"dateRangeLogic",value:g}),r(se,{children:[i(y,{autoFocus:!0,fullWidth:!0,name:"".concat(e.name,"_start"),type:"date",size:"small",label:"From",error:!(null===(a=e.validationResult)||void 0===a||!a.hasError),sx:{marginBottom:1},InputLabelProps:{shrink:!0},inputProps:{min:null===(u=e.fieldConfig)||void 0===u?void 0:u.minDate,max:null===(s=e.fieldConfig)||void 0===s?void 0:s.maxDate}}),i(y,{fullWidth:!0,name:"".concat(e.name,"_end"),type:"date",size:"small",label:"To",error:!(null===(c=e.validationResult)||void 0===c||!c.hasError),helperText:null===(f=e.validationResult)||void 0===f?void 0:f.message,InputLabelProps:{shrink:!0},inputProps:{min:null===(m=e.fieldConfig)||void 0===m?void 0:m.minDate,max:null===(v=e.fieldConfig)||void 0===v?void 0:v.maxDate}})]})]})},se=u(m)({display:"flex",flexDirection:"column",gap:"8px"}),ce=u(m)({display:"inline-flex",flex:"0 0 auto",justifyContent:"center",alignItems:"center","&:not(.disabled-size)":{width:"40px",height:"40px"}}),fe=u("ul")({paddingLeft:"1.7rem",marginBottom:0,li:{position:"relative",textAlign:"justify","&::before":{content:'"►"',display:"block",position:"absolute",top:"50%",right:"calc(100% + 6px)",transform:"translateY(-50%)",fontSize:"0.9em"}}});export{J as ClearAllButton,H as DateLogicToggle,K as DateRangeLogicToggle,V as FilterButton,$ as FilterInput,q as FilterInputAdornment,_ as FilterLogicToggle,Y as FilterNotes,de as MenuWithTypeDate,ue as MenuWithTypeDateRange,le as MenuWithTypeSelect,te as MenuWithTypeSelectMulti,ie as MenuWithTypeString,ee as PanelNotFound,X as SortButton,I as mapSortConfigs};
|
|
2
2
|
//# sourceMappingURL=ui.units.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ui.units.js","sources":["../../src/data-view/ui.units.tsx"],"sourcesContent":["import React, { FC, ReactNode, useRef, useState } from 'react'\r\nimport { Box, Button, ButtonGroup, ButtonProps, Fade, IconButton, InputBaseProps, Typography } from '@mui/material'\r\nimport { FormControlLabel, FormGroup, Radio, RadioGroup, TextField, colors, styled } from '@mui/material'\r\nimport { ToggleButton, Tooltip, ToggleButtonGroup, Checkbox, IconButtonProps, InputAdornment, InputBase } from '@mui/material'\r\nimport CloseIcon from '@mui/icons-material/Close'\r\nimport ShuffleIcon from '@mui/icons-material/Shuffle'\r\nimport ClearAllIcon from '@mui/icons-material/ClearAll'\r\nimport FilterListIcon from '@mui/icons-material/FilterList'\r\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'\r\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\r\nimport KeyboardReturnIcon from '@mui/icons-material/KeyboardReturn'\r\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'\r\nimport { mapDataViewContext } from './context'\r\nimport { IFilterLogic, IFilterDateLogic, IFilterDateRangeLogic, IFilterSelectDef, IValidationResult, IFilterDateDef, IFilterBasicDef } from './types'\r\nimport HelpTooltip from '../components/help-tooltip'\r\nimport { createFilterStore } from './filter-store'\r\n\r\nexport const mapSortConfigs: Record<'asc' | 'desc', { title: string; icon: ReactNode }> = {\r\n asc: { title: 'Ascending', icon: <ArrowUpwardIcon fontSize='small' /> },\r\n desc: { title: 'Descending', icon: <ArrowDownwardIcon fontSize='small' /> }\r\n}\r\n\r\n//#region Toggle Components\r\nexport interface IFilterLogicToggleProps {\r\n value?: IFilterLogic\r\n onChange?: (event: React.MouseEvent<HTMLElement>, value: IFilterLogic) => void\r\n}\r\n\r\nexport const FilterLogicToggle: FC<IFilterLogicToggleProps> = (props) => {\r\n const handleChange = (event: React.MouseEvent<HTMLElement>, newValue: string | null) => {\r\n if (newValue && props.onChange) {\r\n props.onChange(event, newValue as IFilterLogic)\r\n }\r\n }\r\n\r\n return (\r\n <ToggleButtonGroupCustom size='small' value={props.value || 'and'} exclusive onChange={handleChange}>\r\n <ToggleButton size='small' value='and' aria-label='and logic'>\r\n AND\r\n </ToggleButton>\r\n <ToggleButton size='small' value='or' aria-label='or logic'>\r\n OR\r\n </ToggleButton>\r\n </ToggleButtonGroupCustom>\r\n )\r\n}\r\n\r\nexport interface IDateLogicToggleProps {\r\n value?: IFilterDateLogic\r\n onChange?: (event: React.MouseEvent<HTMLElement>, value: IFilterDateLogic) => void\r\n}\r\n\r\nexport const DateLogicToggle: FC<IDateLogicToggleProps> = (props) => {\r\n const handleChange = (event: React.MouseEvent<HTMLElement>, newValue: string | null) => {\r\n if (newValue && props.onChange) {\r\n props.onChange(event, newValue as IFilterDateLogic)\r\n }\r\n }\r\n\r\n return (\r\n <ToggleButtonGroupCustom size='small' value={props.value || 'before'} exclusive onChange={handleChange}>\r\n <ToggleButton size='small' value='before' aria-label='before date'>\r\n before\r\n </ToggleButton>\r\n <ToggleButton size='small' value='after' aria-label='after date'>\r\n after\r\n </ToggleButton>\r\n </ToggleButtonGroupCustom>\r\n )\r\n}\r\n\r\nexport interface IDateRangeLogicToggleProps {\r\n value?: IFilterDateRangeLogic\r\n onChange?: (event: React.MouseEvent<HTMLElement>, value: IFilterDateRangeLogic) => void\r\n}\r\n\r\nexport const DateRangeLogicToggle: FC<IDateRangeLogicToggleProps> = (props) => {\r\n const handleChange = (event: React.MouseEvent<HTMLElement>, newValue: string | null) => {\r\n if (newValue && props.onChange) {\r\n props.onChange(event, newValue as IFilterDateRangeLogic)\r\n }\r\n }\r\n\r\n return (\r\n <ToggleButtonGroupCustom size='small' value={props.value || 'between'} exclusive onChange={handleChange}>\r\n <ToggleButton size='small' value='between' aria-label='between dates'>\r\n between\r\n </ToggleButton>\r\n <ToggleButton size='small' value='not-between' aria-label='not between dates'>\r\n not between\r\n </ToggleButton>\r\n </ToggleButtonGroupCustom>\r\n )\r\n}\r\n\r\nconst ToggleButtonGroupCustom = styled(ToggleButtonGroup)({\r\n '& .MuiToggleButton-root': {\r\n color: '#fff',\r\n borderColor: 'rgba(255, 255, 255, 0.3)',\r\n fontSize: '0.65rem',\r\n fontWeight: 600,\r\n lineHeight: 1,\r\n minWidth: '40px',\r\n padding: '6px 8px',\r\n '&.Mui-selected': {\r\n backgroundColor: '#1976d2',\r\n color: '#fff',\r\n '&:hover': {\r\n backgroundColor: '#1565c0'\r\n }\r\n },\r\n '&:hover': {\r\n backgroundColor: 'rgba(255, 255, 255, 0.08)'\r\n }\r\n }\r\n})\r\n//#endregion\r\n\r\n//#region Notes\r\nexport interface IFilterNotesProps {\r\n title?: string\r\n items?: string[]\r\n disabledSize?: boolean\r\n renderContent?: () => ReactNode\r\n}\r\n\r\nconst HelpTooltipContent: FC<{ items: string[] }> = (props) => (\r\n <WrapList>\r\n {props.items.map((item, index) => (\r\n <Typography key={index} component='li' variant='body2'>\r\n {item}\r\n </Typography>\r\n ))}\r\n </WrapList>\r\n)\r\n\r\nexport const FilterNotes: FC<IFilterNotesProps> = (props) => (\r\n <WrapIcon className={props.disabledSize === true ? 'disabled-size' : ''}>\r\n <HelpTooltip small title={props.title ?? 'The search includes'}>\r\n {props.renderContent ? props.renderContent() : <HelpTooltipContent items={props.items ?? []} />}\r\n </HelpTooltip>\r\n </WrapIcon>\r\n)\r\n//#endregion\r\n\r\n//#region Input\r\nexport const FilterInput = React.forwardRef<HTMLInputElement, InputBaseProps>((props, ref) => {\r\n return <InputBase fullWidth autoComplete='off' size='small' {...props} inputRef={ref} />\r\n})\r\n\r\ninterface IFilterInputAdornmentProps {\r\n notes?: IFilterNotesProps\r\n keyword?: string\r\n onClear: IconButtonProps['onClick']\r\n onEnterSearch: ButtonProps['onClick']\r\n}\r\n\r\nexport const FilterInputAdornment: FC<IFilterInputAdornmentProps> = (props) => (\r\n <InputAdornment position='end'>\r\n {props.keyword && (\r\n <>\r\n <HelpButton size='small' color='primary' onClick={props.onEnterSearch} sx={{ display: { xs: 'none', md: 'flex' } }}>\r\n <Typography variant='caption'>\r\n Type and hit <b>Enter ⏎</b> to filter.\r\n </Typography>\r\n </HelpButton>\r\n <Tooltip title='Press Enter to filter' placement='bottom' arrow>\r\n <IconButton size='small' color='primary' sx={{ display: { xs: 'flex', md: 'none' } }} onClick={props.onEnterSearch}>\r\n <KeyboardReturnIcon fontSize='small' />\r\n </IconButton>\r\n </Tooltip>\r\n </>\r\n )}\r\n {props.keyword && (\r\n <Tooltip title='Press Esc to clear' placement='bottom' arrow>\r\n <IconButton size='small' sx={{ marginLeft: '8px', color: 'text.error', '&:hover': { color: 'error.main' } }} onClick={props.onClear}>\r\n <CloseIcon fontSize='small' />\r\n </IconButton>\r\n </Tooltip>\r\n )}\r\n {props.notes && <FilterNotes {...props.notes} />}\r\n </InputAdornment>\r\n)\r\n\r\nconst HelpButton = styled(Button)({\r\n padding: '4px 6px',\r\n textTransform: 'none',\r\n lineHeight: 1,\r\n '.MuiTypography-root': {\r\n fontWeight: 600,\r\n b: {\r\n fontWeight: 700,\r\n backgroundColor: colors.blue[100],\r\n borderRadius: '4px',\r\n padding: '2px 4px'\r\n }\r\n }\r\n})\r\n//#endregion\r\n\r\n//#region Button\r\nexport interface IButtonClearProps {\r\n visibled?: boolean\r\n onClick: IconButtonProps['onClick']\r\n}\r\n\r\nexport const ButtonClear: FC<IButtonClearProps> = (props) => (\r\n <WrapIcon>\r\n <Tooltip title='Remove filter'>\r\n <Fade in={props.visibled} unmountOnExit>\r\n <IconButton size='small' onClick={props.onClick}>\r\n <CloseIcon fontSize='small' />\r\n </IconButton>\r\n </Fade>\r\n </Tooltip>\r\n </WrapIcon>\r\n)\r\n\r\nexport const ClearAllButton = React.forwardRef<HTMLButtonElement, ButtonProps>(({ children, ...props }, ref) => (\r\n <ClearButtonStyled size='small' color='error' startIcon={<ClearAllIcon />} ref={ref} {...props}>\r\n {children || 'Clear all'}\r\n </ClearButtonStyled>\r\n))\r\n\r\nconst ClearButtonStyled = styled(Button)({ textTransform: 'none', fontWeight: 700 })\r\n\r\nexport const FilterButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => (\r\n <IconButton ref={ref} size='small' sx={{ flex: '0 0 auto' }} {...props}>\r\n <FilterListIcon />\r\n </IconButton>\r\n))\r\n\r\nexport const SortIconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => (\r\n <IconButton ref={ref} size='small' sx={{ flex: '0 0 auto' }} {...props}>\r\n <ShuffleIcon />\r\n </IconButton>\r\n))\r\n\r\n//TODO - Add a button to toggle the visibility of the filter bar\r\nexport const SortButton: FC<ButtonProps> = (props) => {\r\n const timeoutRef = useRef<NodeJS.Timeout | null>(null)\r\n const debounceDelay = 500\r\n return (\r\n <>\r\n {mapDataViewContext((context) => {\r\n const { filterState, filterBarConfigs: configs } = context\r\n const config: Partial<{ title: string; icon: ReactNode }> = filterState.sort ? mapSortConfigs[filterState.sort?.direction] : {}\r\n const fieldConfig = configs.fields?.[filterState.sort?.field as any]\r\n const text = fieldConfig?.label || filterState.sort?.field?.toString() || configs.sortButton?.text\r\n // Debounce logic to prevent rapid/continuous calls\r\n const handleSortButtonClick = () => {\r\n if (!filterState.sort?.field) return\r\n const currentDirection = filterState.sort?.direction\r\n const newDirection: 'asc' | 'desc' = currentDirection ? (currentDirection === 'asc' ? 'desc' : 'asc') : 'asc'\r\n const newSort = { field: filterState.sort.field, direction: newDirection }\r\n const store = createFilterStore(filterState).changeSort(newSort, { area: 'sortButton' })\r\n context.onFilterStateChange(store.build())\r\n }\r\n\r\n const handlePopperPanelChange = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n e.stopPropagation()\r\n timeoutRef.current && clearTimeout(timeoutRef.current)\r\n timeoutRef.current = setTimeout(() => handleSortButtonClick(), debounceDelay)\r\n }\r\n\r\n if (text) {\r\n return (\r\n <ButtonGroup aria-label='Button Sort' size='small'>\r\n <SortButtonStyled\r\n size='small'\r\n color='inherit'\r\n startIcon={config.icon || <ShuffleIcon fontSize='small' />}\r\n onClick={handlePopperPanelChange}\r\n {...configs.sortButton?.wrapProps}\r\n {...props}\r\n >\r\n {text}\r\n </SortButtonStyled>\r\n <SortButtonStyled\r\n size='small'\r\n color='inherit'\r\n sx={{ p: 0 }}\r\n onClick={(e) => context.onPopperPanelChange(e.currentTarget, 'sortButton')}\r\n >\r\n <KeyboardArrowDownIcon fontSize='small' />\r\n </SortButtonStyled>\r\n </ButtonGroup>\r\n )\r\n }\r\n\r\n return (\r\n <SortButtonStyled\r\n size='small'\r\n color='inherit'\r\n startIcon={config.icon || <ShuffleIcon fontSize='small' />}\r\n endIcon={configs.sortButton?.icon ?? <KeyboardArrowDownIcon fontSize='small' />}\r\n onClick={(e) => context.onPopperPanelChange(e.currentTarget, 'sortButton')}\r\n {...configs.sortButton?.wrapProps}\r\n {...props}\r\n >\r\n {text || 'Sort'}\r\n </SortButtonStyled>\r\n )\r\n })}\r\n </>\r\n )\r\n}\r\n\r\nconst SortButtonStyled = styled(Button)({\r\n height: 'var(--filter-bar-height, 40px)',\r\n padding: '0 16px',\r\n backgroundColor: colors.grey[50],\r\n border: '1px solid var(--color-divider, rgba(145 158 171 / 20%))',\r\n textTransform: 'none',\r\n fontWeight: 600,\r\n ':hover': {\r\n backgroundColor: colors.grey[100]\r\n }\r\n})\r\n//#endregion\r\n\r\n//#region Panel Not Found\r\nexport const PanelNotFound: FC<{ area?: string }> = ({ area }) => (\r\n <Box sx={{ padding: '8px', textAlign: 'center', border: '1px solid #ddd', borderRadius: '4px' }}>\r\n <Typography variant='body2' sx={{ padding: '8px' }}>\r\n No panel available for area: {area}\r\n </Typography>\r\n </Box>\r\n)\r\n//#endregion\r\n\r\n//#region Form\r\ninterface IFormContentProps {\r\n label: string\r\n notes?: any\r\n children?: React.ReactNode\r\n afterTopBar?: React.ReactNode\r\n}\r\n\r\nconst FormContent: FC<IFormContentProps> = ({ label, notes, children, afterTopBar }) => (\r\n <FormContentWrapper>\r\n <Box className='top-bar'>\r\n <Typography variant='subtitle2'>{label}</Typography>\r\n {afterTopBar && <Box className='after-top-bar'>{afterTopBar}</Box>}\r\n {notes && <FilterNotes title={`The ${label} includes`} disabledSize {...notes} />}\r\n </Box>\r\n <Box className='content'>{children}</Box>\r\n </FormContentWrapper>\r\n)\r\n\r\nconst FormContentWrapper = styled(Box)({\r\n minWidth: '200px',\r\n borderRadius: '4px',\r\n overflow: 'hidden',\r\n '.top-bar': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n background: colors.grey[900],\r\n padding: '8px',\r\n gap: '8px',\r\n '.MuiTypography-root': {\r\n color: colors.common.white,\r\n flex: 1\r\n }\r\n },\r\n '.after-top-bar': {\r\n marginLeft: '8px'\r\n },\r\n '.content': {\r\n padding: '8px'\r\n }\r\n})\r\n//#endregion\r\n\r\n//#region Menu - String Type\r\ninterface IMenuWithTypeBaseProps {\r\n name: string\r\n validationResult?: IValidationResult\r\n}\r\n\r\ninterface IMenuWithTypeStringProps extends IMenuWithTypeBaseProps {\r\n fieldConfig?: IFilterBasicDef\r\n}\r\n\r\nexport const MenuWithTypeString: FC<IMenuWithTypeStringProps> = (props) => {\r\n const label = props.fieldConfig?.label ?? props.name\r\n return (\r\n <FormContent label={label} notes={props.fieldConfig?.notes}>\r\n <TextField\r\n autoFocus\r\n name={props.name}\r\n size='small'\r\n fullWidth\r\n error={!!props.validationResult?.hasError}\r\n helperText={props.validationResult?.message}\r\n />\r\n </FormContent>\r\n )\r\n}\r\n//#endregion\r\n\r\n//#region Menu - Select Type\r\nexport interface IMenuWithTypeSelectProps extends IMenuWithTypeBaseProps {\r\n fieldConfig?: IFilterSelectDef\r\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void\r\n}\r\n\r\nexport const MenuWithTypeSelect: FC<IMenuWithTypeSelectProps> = (props) => {\r\n const label = props.fieldConfig?.label ?? props.name\r\n return (\r\n <FormContent label={label} notes={props.fieldConfig?.notes}>\r\n <CustomRadioGroup name={props.name} className={props.validationResult?.hasError ? 'error' : ''} onChange={props.onChange}>\r\n {props.fieldConfig?.options.map((x, i) => (\r\n <FormControlLabel key={x.value.toString() + i} value={x.value} control={<Radio />} label={x.label ?? x.value} />\r\n ))}\r\n </CustomRadioGroup>\r\n </FormContent>\r\n )\r\n}\r\n\r\nconst CustomRadioGroup = styled(RadioGroup)({\r\n marginLeft: '-8px',\r\n marginRight: '-8px',\r\n '&.error .MuiRadio-root': {\r\n color: '#d32f2f'\r\n },\r\n '.MuiFormControlLabel-root': {\r\n margin: 0\r\n },\r\n '.MuiFormControlLabel-root:hover': {\r\n backgroundColor: 'rgba(25, 118, 210, 0.04)'\r\n }\r\n})\r\n//#endregion\r\n\r\n//#region Menu - Select Multi Type\r\nexport interface IMenuWithTypeSelectMultiProps extends IMenuWithTypeBaseProps {\r\n fieldConfig?: IFilterSelectDef\r\n onChange?: (event: React.SyntheticEvent, checked: boolean) => void\r\n}\r\n\r\nexport const MenuWithTypeSelectMulti: FC<IMenuWithTypeSelectMultiProps> = (props) => {\r\n const [filterLogic, setFilterLogic] = useState<IFilterLogic>('and')\r\n const label = props.fieldConfig?.label ?? props.name\r\n return (\r\n <FormContent\r\n label={label}\r\n notes={props.fieldConfig?.notes}\r\n afterTopBar={<FilterLogicToggle value={filterLogic} onChange={(_, value) => setFilterLogic(value)} />}\r\n >\r\n {/* Hidden input for logic value */}\r\n <input type='hidden' name='filterLogic' value={filterLogic} />\r\n <CustomFormGroup className={props.validationResult?.hasError ? 'error' : ''}>\r\n {props.fieldConfig?.options.map((x, i) => (\r\n <FormControlLabel\r\n key={x.value.toString() + i}\r\n value={x.value}\r\n control={<Checkbox name={props.name} />}\r\n label={x.label ?? x.value}\r\n onChange={props.onChange}\r\n />\r\n ))}\r\n </CustomFormGroup>\r\n </FormContent>\r\n )\r\n}\r\n\r\nconst CustomFormGroup = styled(FormGroup)({\r\n marginLeft: '-8px',\r\n marginRight: '-8px',\r\n '&.error .MuiCheckbox-root': {\r\n color: '#d32f2f'\r\n },\r\n '.MuiFormControlLabel-root': {\r\n margin: 0\r\n },\r\n '.MuiFormControlLabel-root:hover': {\r\n backgroundColor: 'rgba(25, 118, 210, 0.04)'\r\n }\r\n})\r\n//#endregion\r\n\r\nfunction convertDateToCustomFormat(dateString: string): string {\r\n if (!dateString || !/^\\d{4}-\\d{2}-\\d{2}$/.test(dateString)) return ''\r\n return `${dateString}T00:00:00.0000000`\r\n}\r\n//#region Menu - Date Type\r\nexport interface IMenuWithTypeDateProps extends IMenuWithTypeBaseProps {\r\n fieldConfig?: IFilterDateDef\r\n}\r\n\r\nexport const MenuWithTypeDate: FC<IMenuWithTypeDateProps> = (props) => {\r\n const [dateLogic, setDateLogic] = useState<IFilterDateLogic>('before')\r\n const [value, setValue] = useState<string>('')\r\n const label = props.fieldConfig?.label ?? props.name\r\n return (\r\n <FormContent\r\n label={label}\r\n notes={props.fieldConfig?.notes}\r\n afterTopBar={<DateLogicToggle value={dateLogic} onChange={(_, value) => setDateLogic(value)} />}\r\n >\r\n <Box className='content'>\r\n {/* Hidden input for logic value */}\r\n <input type='hidden' name='dateLogic' value={dateLogic} />\r\n <input hidden type='text' name={props.name} readOnly value={convertDateToCustomFormat(value)} />\r\n <TextField\r\n autoFocus\r\n fullWidth\r\n type='date'\r\n size='small'\r\n value={value}\r\n onChange={(event) => setValue(event.target.value)}\r\n error={!!props.validationResult?.hasError}\r\n helperText={props.validationResult?.message}\r\n inputProps={{ min: props.fieldConfig?.minDate, max: props.fieldConfig?.maxDate }}\r\n />\r\n </Box>\r\n </FormContent>\r\n )\r\n}\r\n//#endregion\r\n\r\n//#region Menu - Date Range Type\r\nexport interface IMenuWithTypeDateRangeProps extends IMenuWithTypeBaseProps {\r\n fieldConfig?: IFilterDateDef\r\n}\r\n\r\nexport const MenuWithTypeDateRange: FC<IMenuWithTypeDateRangeProps> = (props) => {\r\n const [dateRangeLogic, setDateRangeLogic] = useState<IFilterDateRangeLogic>('between')\r\n const label = props.fieldConfig?.label ?? props.name\r\n return (\r\n <FormContent\r\n label={label}\r\n notes={props.fieldConfig?.notes}\r\n afterTopBar={<DateRangeLogicToggle value={dateRangeLogic} onChange={(_, value) => setDateRangeLogic(value)} />}\r\n >\r\n {/* Hidden input for logic value */}\r\n <input type='hidden' name='dateRangeLogic' value={dateRangeLogic} />\r\n <DateRangeContainer>\r\n <TextField\r\n autoFocus\r\n fullWidth\r\n name={`${props.name}_start`}\r\n type='date'\r\n size='small'\r\n label='From'\r\n error={!!props.validationResult?.hasError}\r\n sx={{ marginBottom: 1 }}\r\n InputLabelProps={{ shrink: true }}\r\n inputProps={{ min: props.fieldConfig?.minDate, max: props.fieldConfig?.maxDate }}\r\n />\r\n <TextField\r\n fullWidth\r\n name={`${props.name}_end`}\r\n type='date'\r\n size='small'\r\n label='To'\r\n error={!!props.validationResult?.hasError}\r\n helperText={props.validationResult?.message}\r\n InputLabelProps={{ shrink: true }}\r\n inputProps={{ min: props.fieldConfig?.minDate, max: props.fieldConfig?.maxDate }}\r\n />\r\n </DateRangeContainer>\r\n </FormContent>\r\n )\r\n}\r\n\r\nconst DateRangeContainer = styled(Box)({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: '8px'\r\n})\r\n//#endregion\r\n\r\n//#region Styled\r\nconst WrapIcon = styled(Box)({\r\n display: 'inline-flex',\r\n flex: '0 0 auto',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n '&:not(.disabled-size)': {\r\n width: '40px',\r\n height: '40px'\r\n }\r\n})\r\n\r\nconst WrapList = styled('ul')({\r\n paddingLeft: '1.7rem',\r\n marginBottom: 0,\r\n li: {\r\n position: 'relative',\r\n textAlign: 'justify',\r\n '&::before': {\r\n content: '\"►\"',\r\n display: 'block',\r\n position: 'absolute',\r\n top: '50%',\r\n right: 'calc(100% + 6px)',\r\n transform: 'translateY(-50%)',\r\n fontSize: '0.9em'\r\n }\r\n }\r\n})\r\n//#endregion\r\n"],"names":["mapSortConfigs","asc","title","icon","_jsx","ArrowUpwardIcon","fontSize","desc","ArrowDownwardIcon","FilterLogicToggle","props","_jsxs","ToggleButtonGroupCustom","size","value","exclusive","onChange","event","newValue","children","ToggleButton","DateLogicToggle","DateRangeLogicToggle","styled","ToggleButtonGroup","color","borderColor","fontWeight","lineHeight","minWidth","padding","backgroundColor","HelpTooltipContent","WrapList","items","map","item","index","Typography","component","variant","FilterNotes","_props$title","_props$items","WrapIcon","className","disabledSize","HelpTooltip","small","renderContent","FilterInput","React","forwardRef","ref","InputBase","_objectSpread","fullWidth","autoComplete","inputRef","FilterInputAdornment","InputAdornment","position","keyword","_Fragment","HelpButton","onClick","onEnterSearch","sx","display","xs","md","Tooltip","placement","arrow","IconButton","KeyboardReturnIcon","marginLeft","onClear","CloseIcon","notes","Button","textTransform","b","colors","blue","borderRadius","ClearAllButton","_ref","_objectWithoutProperties","_excluded","ClearButtonStyled","startIcon","ClearAllIcon","FilterButton","flex","FilterListIcon","SortButton","timeoutRef","useRef","mapDataViewContext","context","_filterState$sort","_configs$fields","_filterState$sort2","_filterState$sort3","_configs$sortButton","_configs$sortButton$i","_configs$sortButton3","_configs$sortButton4","_configs$sortButton2","filterState","configs","filterBarConfigs","config","sort","direction","fieldConfig","fields","field","text","label","toString","sortButton","ButtonGroup","SortButtonStyled","ShuffleIcon","e","stopPropagation","current","clearTimeout","setTimeout","_filterState$sort4","_filterState$sort5","currentDirection","newDirection","newSort","store","createFilterStore","changeSort","area","onFilterStateChange","build","handleSortButtonClick","wrapProps","p","onPopperPanelChange","currentTarget","KeyboardArrowDownIcon","endIcon","height","grey","border","PanelNotFound","_ref2","Box","textAlign","FormContent","_ref3","afterTopBar","FormContentWrapper","concat","overflow","alignItems","background","gap","common","white","MenuWithTypeString","_props$fieldConfig$la","_props$fieldConfig","_props$fieldConfig2","_props$validationResu","_props$validationResu2","name","TextField","autoFocus","error","validationResult","hasError","helperText","message","MenuWithTypeSelect","_props$fieldConfig$la2","_props$fieldConfig3","_props$fieldConfig4","_props$validationResu3","_props$fieldConfig5","CustomRadioGroup","options","x","i","_x$label","FormControlLabel","control","Radio","RadioGroup","marginRight","margin","MenuWithTypeSelectMulti","_props$fieldConfig$la3","_props$fieldConfig6","_props$fieldConfig7","_props$validationResu4","_props$fieldConfig8","_useState","useState","_useState2","_slicedToArray","filterLogic","setFilterLogic","_","type","CustomFormGroup","_x$label2","Checkbox","FormGroup","MenuWithTypeDate","_props$fieldConfig$la4","_props$fieldConfig9","_props$fieldConfig0","_props$validationResu5","_props$validationResu6","_props$fieldConfig1","_props$fieldConfig10","dateString","_useState3","_useState4","dateLogic","setDateLogic","_useState5","_useState6","setValue","hidden","readOnly","test","target","inputProps","min","minDate","max","maxDate","MenuWithTypeDateRange","_props$fieldConfig$la5","_props$fieldConfig11","_props$fieldConfig12","_props$validationResu7","_props$fieldConfig13","_props$fieldConfig14","_props$validationResu8","_props$validationResu9","_props$fieldConfig15","_props$fieldConfig16","_useState7","_useState8","dateRangeLogic","setDateRangeLogic","DateRangeContainer","marginBottom","InputLabelProps","shrink","flexDirection","justifyContent","width","paddingLeft","li","content","top","right","transform"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ui.units.js","sources":["../../src/data-view/ui.units.tsx"],"sourcesContent":["import React, { FC, ReactNode, useRef, useState } from 'react'\r\nimport { Box, Button, ButtonGroup, ButtonProps, Fade, IconButton, InputBaseProps, Typography } from '@mui/material'\r\nimport { FormControlLabel, FormGroup, Radio, RadioGroup, TextField, colors, styled } from '@mui/material'\r\nimport { ToggleButton, Tooltip, ToggleButtonGroup, Checkbox, IconButtonProps, InputAdornment, InputBase } from '@mui/material'\r\nimport CloseIcon from '@mui/icons-material/Close'\r\nimport ShuffleIcon from '@mui/icons-material/Shuffle'\r\nimport ClearAllIcon from '@mui/icons-material/ClearAll'\r\nimport FilterListIcon from '@mui/icons-material/FilterList'\r\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'\r\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\r\nimport KeyboardReturnIcon from '@mui/icons-material/KeyboardReturn'\r\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'\r\nimport { mapDataViewContext } from './context'\r\nimport { IFilterLogic, IFilterDateLogic, IFilterDateRangeLogic, IFilterSelectDef, IValidationResult, IFilterDateDef, IFilterBasicDef } from './types'\r\nimport HelpTooltip from '../components/help-tooltip'\r\nimport { createFilterStore } from './filter-store'\r\n\r\nexport const mapSortConfigs: Record<'asc' | 'desc', { title: string; icon: ReactNode }> = {\r\n asc: { title: 'Ascending', icon: <ArrowUpwardIcon fontSize='small' /> },\r\n desc: { title: 'Descending', icon: <ArrowDownwardIcon fontSize='small' /> }\r\n}\r\n\r\n//#region Toggle Components\r\nexport interface IFilterLogicToggleProps {\r\n value?: IFilterLogic\r\n onChange?: (event: React.MouseEvent<HTMLElement>, value: IFilterLogic) => void\r\n}\r\n\r\nexport const FilterLogicToggle: FC<IFilterLogicToggleProps> = (props) => {\r\n const handleChange = (event: React.MouseEvent<HTMLElement>, newValue: string | null) => {\r\n if (newValue && props.onChange) {\r\n props.onChange(event, newValue as IFilterLogic)\r\n }\r\n }\r\n\r\n return (\r\n <ToggleButtonGroupCustom size='small' value={props.value || 'and'} exclusive onChange={handleChange}>\r\n <ToggleButton size='small' value='and' aria-label='and logic'>\r\n AND\r\n </ToggleButton>\r\n <ToggleButton size='small' value='or' aria-label='or logic'>\r\n OR\r\n </ToggleButton>\r\n </ToggleButtonGroupCustom>\r\n )\r\n}\r\n\r\nexport interface IDateLogicToggleProps {\r\n value?: IFilterDateLogic\r\n onChange?: (event: React.MouseEvent<HTMLElement>, value: IFilterDateLogic) => void\r\n}\r\n\r\nexport const DateLogicToggle: FC<IDateLogicToggleProps> = (props) => {\r\n const handleChange = (event: React.MouseEvent<HTMLElement>, newValue: string | null) => {\r\n if (newValue && props.onChange) {\r\n props.onChange(event, newValue as IFilterDateLogic)\r\n }\r\n }\r\n\r\n return (\r\n <ToggleButtonGroupCustom size='small' value={props.value || 'before'} exclusive onChange={handleChange}>\r\n <ToggleButton size='small' value='before' aria-label='before date'>\r\n before\r\n </ToggleButton>\r\n <ToggleButton size='small' value='after' aria-label='after date'>\r\n after\r\n </ToggleButton>\r\n </ToggleButtonGroupCustom>\r\n )\r\n}\r\n\r\nexport interface IDateRangeLogicToggleProps {\r\n value?: IFilterDateRangeLogic\r\n onChange?: (event: React.MouseEvent<HTMLElement>, value: IFilterDateRangeLogic) => void\r\n}\r\n\r\nexport const DateRangeLogicToggle: FC<IDateRangeLogicToggleProps> = (props) => {\r\n const handleChange = (event: React.MouseEvent<HTMLElement>, newValue: string | null) => {\r\n if (newValue && props.onChange) {\r\n props.onChange(event, newValue as IFilterDateRangeLogic)\r\n }\r\n }\r\n\r\n return (\r\n <ToggleButtonGroupCustom size='small' value={props.value || 'between'} exclusive onChange={handleChange}>\r\n <ToggleButton size='small' value='between' aria-label='between dates'>\r\n between\r\n </ToggleButton>\r\n <ToggleButton size='small' value='not-between' aria-label='not between dates'>\r\n not between\r\n </ToggleButton>\r\n </ToggleButtonGroupCustom>\r\n )\r\n}\r\n\r\nconst ToggleButtonGroupCustom = styled(ToggleButtonGroup)({\r\n '& .MuiToggleButton-root': {\r\n color: '#fff',\r\n borderColor: 'rgba(255, 255, 255, 0.3)',\r\n fontSize: '0.65rem',\r\n fontWeight: 600,\r\n lineHeight: 1,\r\n minWidth: '40px',\r\n padding: '6px 8px',\r\n '&.Mui-selected': {\r\n backgroundColor: '#1976d2',\r\n color: '#fff',\r\n '&:hover': {\r\n backgroundColor: '#1565c0'\r\n }\r\n },\r\n '&:hover': {\r\n backgroundColor: 'rgba(255, 255, 255, 0.08)'\r\n }\r\n }\r\n})\r\n//#endregion\r\n\r\n//#region Notes\r\nexport interface IFilterNotesProps {\r\n title?: string\r\n items?: string[]\r\n disabledSize?: boolean\r\n renderContent?: () => ReactNode\r\n}\r\n\r\nconst HelpTooltipContent: FC<{ items: string[] }> = (props) => (\r\n <WrapList>\r\n {props.items.map((item, index) => (\r\n <Typography key={index} component='li' variant='body2'>\r\n {item}\r\n </Typography>\r\n ))}\r\n </WrapList>\r\n)\r\n\r\nexport const FilterNotes: FC<IFilterNotesProps> = (props) => (\r\n <WrapIcon className={props.disabledSize === true ? 'disabled-size' : ''}>\r\n <HelpTooltip small title={props.title ?? 'The search includes'}>\r\n {props.renderContent ? props.renderContent() : <HelpTooltipContent items={props.items ?? []} />}\r\n </HelpTooltip>\r\n </WrapIcon>\r\n)\r\n//#endregion\r\n\r\n//#region Input\r\nexport const FilterInput = React.forwardRef<HTMLInputElement, InputBaseProps>((props, ref) => {\r\n return <InputBase fullWidth autoComplete='off' size='small' {...props} inputRef={ref} />\r\n})\r\n\r\ninterface IFilterInputAdornmentProps {\r\n notes?: IFilterNotesProps\r\n keyword?: string\r\n onClear: IconButtonProps['onClick']\r\n onEnterSearch: ButtonProps['onClick']\r\n}\r\n\r\nexport const FilterInputAdornment: FC<IFilterInputAdornmentProps> = (props) => (\r\n <InputAdornment position='end'>\r\n {props.keyword && (\r\n <>\r\n <HelpButton size='small' color='primary' onClick={props.onEnterSearch} sx={{ display: { xs: 'none', md: 'flex' } }}>\r\n <Typography variant='caption'>\r\n Type and hit <b>Enter ⏎</b> to filter.\r\n </Typography>\r\n </HelpButton>\r\n <Tooltip title='Press Enter to filter' placement='bottom' arrow>\r\n <IconButton size='small' color='primary' sx={{ display: { xs: 'flex', md: 'none' } }} onClick={props.onEnterSearch}>\r\n <KeyboardReturnIcon fontSize='small' />\r\n </IconButton>\r\n </Tooltip>\r\n </>\r\n )}\r\n {props.keyword && (\r\n <Tooltip title='Press Esc to clear' placement='bottom' arrow>\r\n <IconButton size='small' sx={{ marginLeft: '8px', color: 'text.error', '&:hover': { color: 'error.main' } }} onClick={props.onClear}>\r\n <CloseIcon fontSize='small' />\r\n </IconButton>\r\n </Tooltip>\r\n )}\r\n {props.notes && <FilterNotes {...props.notes} />}\r\n </InputAdornment>\r\n)\r\n\r\nconst HelpButton = styled(Button)({\r\n padding: '4px 6px',\r\n textTransform: 'none',\r\n lineHeight: 1,\r\n '.MuiTypography-root': {\r\n fontWeight: 600,\r\n b: {\r\n fontWeight: 700,\r\n backgroundColor: colors.blue[100],\r\n borderRadius: '4px',\r\n padding: '2px 4px'\r\n }\r\n }\r\n})\r\n//#endregion\r\n\r\n//#region Button\r\nexport interface IButtonClearProps {\r\n visibled?: boolean\r\n onClick: IconButtonProps['onClick']\r\n}\r\n\r\nexport const ButtonClear: FC<IButtonClearProps> = (props) => (\r\n <WrapIcon>\r\n <Tooltip title='Remove filter'>\r\n <Fade in={props.visibled} unmountOnExit>\r\n <IconButton size='small' onClick={props.onClick}>\r\n <CloseIcon fontSize='small' />\r\n </IconButton>\r\n </Fade>\r\n </Tooltip>\r\n </WrapIcon>\r\n)\r\n\r\nexport const ClearAllButton = React.forwardRef<HTMLButtonElement, ButtonProps>(({ children, ...props }, ref) => (\r\n <ClearButtonStyled size='small' color='error' startIcon={<ClearAllIcon />} ref={ref} {...props}>\r\n {children || 'Clear all'}\r\n </ClearButtonStyled>\r\n))\r\n\r\nconst ClearButtonStyled = styled(Button)({ textTransform: 'none', fontWeight: 700 })\r\n\r\nexport const FilterButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => (\r\n <IconButton ref={ref} size='small' sx={{ flex: '0 0 auto' }} {...props}>\r\n <FilterListIcon />\r\n </IconButton>\r\n))\r\n\r\nexport const SortIconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => (\r\n <IconButton ref={ref} size='small' sx={{ flex: '0 0 auto' }} {...props}>\r\n <ShuffleIcon />\r\n </IconButton>\r\n))\r\n\r\n//TODO - Add a button to toggle the visibility of the filter bar\r\nexport const SortButton: FC<ButtonProps> = (props) => {\r\n const timeoutRef = useRef<NodeJS.Timeout | null>(null)\r\n const debounceDelay = 500\r\n return (\r\n <>\r\n {mapDataViewContext((context) => {\r\n const { filterState, filterBarConfigs: configs } = context\r\n const config: Partial<{ title: string; icon: ReactNode }> = filterState.sort ? mapSortConfigs[filterState.sort?.direction] : {}\r\n const fieldConfig = configs.fields?.[filterState.sort?.field as any]\r\n const text = fieldConfig?.label || filterState.sort?.field?.toString() || configs.sortButton?.text\r\n // Debounce logic to prevent rapid/continuous calls\r\n const handleSortButtonClick = () => {\r\n if (!filterState.sort?.field) return\r\n const currentDirection = filterState.sort?.direction\r\n const newDirection: 'asc' | 'desc' = currentDirection ? (currentDirection === 'asc' ? 'desc' : 'asc') : 'asc'\r\n const newSort = { field: filterState.sort.field, direction: newDirection }\r\n const store = createFilterStore(filterState).changeSort(newSort, { area: 'sortButton' })\r\n context.onFilterStateChange(store.build())\r\n }\r\n\r\n const handlePopperPanelChange = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n e.stopPropagation()\r\n timeoutRef.current && clearTimeout(timeoutRef.current)\r\n timeoutRef.current = setTimeout(() => handleSortButtonClick(), debounceDelay)\r\n }\r\n\r\n if (text) {\r\n return (\r\n <ButtonGroup aria-label='Button Sort' size='small'>\r\n <SortButtonStyled\r\n size='small'\r\n color='inherit'\r\n startIcon={config.icon || <ShuffleIcon fontSize='small' />}\r\n onClick={handlePopperPanelChange}\r\n {...configs.sortButton?.wrapProps}\r\n {...props}\r\n >\r\n {text}\r\n </SortButtonStyled>\r\n <SortButtonStyled\r\n size='small'\r\n color='inherit'\r\n sx={{ p: 0 }}\r\n onClick={(e) => context.onPopperPanelChange(e.currentTarget, 'sortButton')}\r\n >\r\n <KeyboardArrowDownIcon fontSize='small' />\r\n </SortButtonStyled>\r\n </ButtonGroup>\r\n )\r\n }\r\n\r\n return (\r\n <SortButtonStyled\r\n size='small'\r\n color='inherit'\r\n startIcon={config.icon || <ShuffleIcon fontSize='small' />}\r\n endIcon={configs.sortButton?.icon ?? <KeyboardArrowDownIcon fontSize='small' />}\r\n onClick={(e) => context.onPopperPanelChange(e.currentTarget, 'sortButton')}\r\n {...configs.sortButton?.wrapProps}\r\n {...props}\r\n >\r\n {text || 'Sort'}\r\n </SortButtonStyled>\r\n )\r\n })}\r\n </>\r\n )\r\n}\r\n\r\nconst SortButtonStyled = styled(Button)({\r\n height: 'var(--filter-bar-height, 40px)',\r\n padding: '0 16px',\r\n backgroundColor: colors.grey[50],\r\n border: '1px solid var(--color-divider, rgba(145 158 171 / 20%))',\r\n textTransform: 'none',\r\n fontWeight: 600,\r\n ':hover': {\r\n backgroundColor: colors.grey[100]\r\n }\r\n})\r\n//#endregion\r\n\r\n//#region Panel Not Found\r\nexport const PanelNotFound: FC<{ area?: string }> = ({ area }) => (\r\n <Box sx={{ padding: '8px', textAlign: 'center', border: '1px solid #ddd', borderRadius: '4px' }}>\r\n <Typography variant='body2' sx={{ padding: '8px' }}>\r\n No panel available for area: {area}\r\n </Typography>\r\n </Box>\r\n)\r\n//#endregion\r\n\r\n//#region Form\r\ninterface IFormContentProps {\r\n label: string\r\n notes?: any\r\n children?: React.ReactNode\r\n afterTopBar?: React.ReactNode\r\n}\r\n\r\nconst FormContent: FC<IFormContentProps> = ({ label, notes, children, afterTopBar }) => (\r\n <FormContentWrapper>\r\n <Box className='top-bar'>\r\n <Typography variant='subtitle2'>{label}</Typography>\r\n {afterTopBar && <Box className='after-top-bar'>{afterTopBar}</Box>}\r\n {notes && <FilterNotes title={`The ${label} includes`} disabledSize {...notes} />}\r\n </Box>\r\n <Box className='content'>{children}</Box>\r\n </FormContentWrapper>\r\n)\r\n\r\nconst FormContentWrapper = styled(Box)({\r\n minWidth: '200px',\r\n borderRadius: '4px',\r\n overflow: 'hidden',\r\n '.top-bar': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n background: colors.grey[900],\r\n padding: '8px',\r\n gap: '8px',\r\n '.MuiTypography-root': {\r\n color: colors.common.white,\r\n flex: 1\r\n }\r\n },\r\n '.after-top-bar': {\r\n marginLeft: '8px'\r\n },\r\n '.content': {\r\n padding: '8px'\r\n }\r\n})\r\n//#endregion\r\n\r\n//#region Menu - String Type\r\ninterface IMenuWithTypeBaseProps {\r\n name: string\r\n validationResult?: IValidationResult\r\n}\r\n\r\ninterface IMenuWithTypeStringProps extends IMenuWithTypeBaseProps {\r\n fieldConfig?: IFilterBasicDef\r\n}\r\n\r\nexport const MenuWithTypeString: FC<IMenuWithTypeStringProps> = (props) => {\r\n const label = props.fieldConfig?.label ?? props.name\r\n return (\r\n <FormContent label={label} notes={props.fieldConfig?.notes}>\r\n <TextField\r\n autoFocus\r\n name={props.name}\r\n size='small'\r\n fullWidth\r\n error={!!props.validationResult?.hasError}\r\n helperText={props.validationResult?.message}\r\n />\r\n </FormContent>\r\n )\r\n}\r\n//#endregion\r\n\r\n//#region Menu - Select Type\r\nexport interface IMenuWithTypeSelectProps extends IMenuWithTypeBaseProps {\r\n fieldConfig?: IFilterSelectDef\r\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void\r\n}\r\n\r\nexport const MenuWithTypeSelect: FC<IMenuWithTypeSelectProps> = (props) => {\r\n const label = props.fieldConfig?.label ?? props.name\r\n return (\r\n <FormContent label={label} notes={props.fieldConfig?.notes}>\r\n <CustomRadioGroup name={props.name} className={props.validationResult?.hasError ? 'error' : ''} onChange={props.onChange}>\r\n {props.fieldConfig?.options.map((x, i) => (\r\n <FormControlLabel key={x.value.toString() + i} value={x.value} control={<Radio />} label={x.label ?? x.value} />\r\n ))}\r\n </CustomRadioGroup>\r\n </FormContent>\r\n )\r\n}\r\n\r\nconst CustomRadioGroup = styled(RadioGroup)({\r\n marginLeft: '-8px',\r\n marginRight: '-8px',\r\n '&.error .MuiRadio-root': {\r\n color: '#d32f2f'\r\n },\r\n '.MuiFormControlLabel-root': {\r\n margin: 0\r\n },\r\n '.MuiFormControlLabel-root:hover': {\r\n backgroundColor: 'rgba(25, 118, 210, 0.04)'\r\n }\r\n})\r\n//#endregion\r\n\r\n//#region Menu - Select Multi Type\r\nexport interface IMenuWithTypeSelectMultiProps extends IMenuWithTypeBaseProps {\r\n fieldConfig?: IFilterSelectDef\r\n onChange?: (event: React.SyntheticEvent, checked: boolean) => void\r\n}\r\n\r\nexport const MenuWithTypeSelectMulti: FC<IMenuWithTypeSelectMultiProps> = (props) => {\r\n const [filterLogic, setFilterLogic] = useState<IFilterLogic>('and')\r\n const label = props.fieldConfig?.label ?? props.name\r\n return (\r\n <FormContent\r\n label={label}\r\n notes={props.fieldConfig?.notes}\r\n afterTopBar={<FilterLogicToggle value={filterLogic} onChange={(_, value) => setFilterLogic(value)} />}\r\n >\r\n {/* Hidden input for logic value */}\r\n <input type='hidden' name='filterLogic' value={filterLogic} />\r\n <CustomFormGroup className={props.validationResult?.hasError ? 'error' : ''}>\r\n {props.fieldConfig?.options.map((x, i) => (\r\n <FormControlLabel\r\n key={x.value.toString() + i}\r\n value={x.value}\r\n control={<Checkbox name={props.name} />}\r\n label={x.label ?? x.value}\r\n onChange={props.onChange}\r\n />\r\n ))}\r\n </CustomFormGroup>\r\n </FormContent>\r\n )\r\n}\r\n\r\nconst CustomFormGroup = styled(FormGroup)({\r\n marginLeft: '-8px',\r\n marginRight: '-8px',\r\n '&.error .MuiCheckbox-root': {\r\n color: '#d32f2f'\r\n },\r\n '.MuiFormControlLabel-root': {\r\n margin: 0\r\n },\r\n '.MuiFormControlLabel-root:hover': {\r\n backgroundColor: 'rgba(25, 118, 210, 0.04)'\r\n }\r\n})\r\n//#endregion\r\n\r\nfunction convertDateToCustomFormat(dateString: string): string {\r\n if (!dateString || !/^\\d{4}-\\d{2}-\\d{2}$/.test(dateString)) return ''\r\n return `${dateString}T00:00:00.0000000`\r\n}\r\n//#region Menu - Date Type\r\nexport interface IMenuWithTypeDateProps extends IMenuWithTypeBaseProps {\r\n fieldConfig?: IFilterDateDef\r\n}\r\n\r\nexport const MenuWithTypeDate: FC<IMenuWithTypeDateProps> = (props) => {\r\n const [dateLogic, setDateLogic] = useState<IFilterDateLogic>('before')\r\n const [value, setValue] = useState<string>('')\r\n const label = props.fieldConfig?.label ?? props.name\r\n return (\r\n <FormContent\r\n label={label}\r\n notes={props.fieldConfig?.notes}\r\n afterTopBar={<DateLogicToggle value={dateLogic} onChange={(_, value) => setDateLogic(value)} />}\r\n >\r\n <Box className='content'>\r\n {/* Hidden input for logic value */}\r\n <input type='hidden' name='dateLogic' value={dateLogic} />\r\n <input hidden type='text' name={props.name} readOnly value={convertDateToCustomFormat(value)} />\r\n <TextField\r\n autoFocus\r\n fullWidth\r\n type='date'\r\n size='small'\r\n value={value}\r\n onChange={(event) => setValue(event.target.value)}\r\n error={!!props.validationResult?.hasError}\r\n helperText={props.validationResult?.message}\r\n inputProps={{ min: props.fieldConfig?.minDate, max: props.fieldConfig?.maxDate }}\r\n />\r\n </Box>\r\n </FormContent>\r\n )\r\n}\r\n//#endregion\r\n\r\n//#region Menu - Date Range Type\r\nexport interface IMenuWithTypeDateRangeProps extends IMenuWithTypeBaseProps {\r\n fieldConfig?: IFilterDateDef\r\n}\r\n\r\nexport const MenuWithTypeDateRange: FC<IMenuWithTypeDateRangeProps> = (props) => {\r\n const [dateRangeLogic, setDateRangeLogic] = useState<IFilterDateRangeLogic>('between')\r\n const label = props.fieldConfig?.label ?? props.name\r\n return (\r\n <FormContent\r\n label={label}\r\n notes={props.fieldConfig?.notes}\r\n afterTopBar={<DateRangeLogicToggle value={dateRangeLogic} onChange={(_, value) => setDateRangeLogic(value)} />}\r\n >\r\n {/* Hidden input for logic value */}\r\n <input type='hidden' name='dateRangeLogic' value={dateRangeLogic} />\r\n <DateRangeContainer>\r\n <TextField\r\n autoFocus\r\n fullWidth\r\n name={`${props.name}_start`}\r\n type='date'\r\n size='small'\r\n label='From'\r\n error={!!props.validationResult?.hasError}\r\n sx={{ marginBottom: 1 }}\r\n InputLabelProps={{ shrink: true }}\r\n inputProps={{ min: props.fieldConfig?.minDate, max: props.fieldConfig?.maxDate }}\r\n />\r\n <TextField\r\n fullWidth\r\n name={`${props.name}_end`}\r\n type='date'\r\n size='small'\r\n label='To'\r\n error={!!props.validationResult?.hasError}\r\n helperText={props.validationResult?.message}\r\n InputLabelProps={{ shrink: true }}\r\n inputProps={{ min: props.fieldConfig?.minDate, max: props.fieldConfig?.maxDate }}\r\n />\r\n </DateRangeContainer>\r\n </FormContent>\r\n )\r\n}\r\n\r\nconst DateRangeContainer = styled(Box)({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: '8px'\r\n})\r\n//#endregion\r\n\r\n//#region Styled\r\nconst WrapIcon = styled(Box)({\r\n display: 'inline-flex',\r\n flex: '0 0 auto',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n '&:not(.disabled-size)': {\r\n width: '40px',\r\n height: '40px'\r\n }\r\n})\r\n\r\nconst WrapList = styled('ul')({\r\n paddingLeft: '1.7rem',\r\n marginBottom: 0,\r\n li: {\r\n position: 'relative',\r\n textAlign: 'justify',\r\n '&::before': {\r\n content: '\"►\"',\r\n display: 'block',\r\n position: 'absolute',\r\n top: '50%',\r\n right: 'calc(100% + 6px)',\r\n transform: 'translateY(-50%)',\r\n fontSize: '0.9em'\r\n }\r\n }\r\n})\r\n//#endregion\r\n"],"names":["mapSortConfigs","asc","title","icon","_jsx","ArrowUpwardIcon","fontSize","desc","ArrowDownwardIcon","FilterLogicToggle","props","_jsxs","ToggleButtonGroupCustom","size","value","exclusive","onChange","event","newValue","children","ToggleButton","DateLogicToggle","DateRangeLogicToggle","styled","ToggleButtonGroup","color","borderColor","fontWeight","lineHeight","minWidth","padding","backgroundColor","HelpTooltipContent","WrapList","items","map","item","index","Typography","component","variant","FilterNotes","_props$title","_props$items","WrapIcon","className","disabledSize","HelpTooltip","small","renderContent","FilterInput","React","forwardRef","ref","InputBase","_objectSpread","fullWidth","autoComplete","inputRef","FilterInputAdornment","InputAdornment","position","keyword","_Fragment","HelpButton","onClick","onEnterSearch","sx","display","xs","md","Tooltip","placement","arrow","IconButton","KeyboardReturnIcon","marginLeft","onClear","CloseIcon","notes","Button","textTransform","b","colors","blue","borderRadius","ClearAllButton","_ref","_objectWithoutProperties","_excluded","ClearButtonStyled","startIcon","ClearAllIcon","FilterButton","flex","FilterListIcon","SortButton","timeoutRef","useRef","mapDataViewContext","context","_filterState$sort","_configs$fields","_filterState$sort2","_filterState$sort3","_configs$sortButton","_configs$sortButton$i","_configs$sortButton3","_configs$sortButton4","_configs$sortButton2","filterState","configs","filterBarConfigs","config","sort","direction","fieldConfig","fields","field","text","label","toString","sortButton","ButtonGroup","SortButtonStyled","ShuffleIcon","e","stopPropagation","current","clearTimeout","setTimeout","_filterState$sort4","_filterState$sort5","currentDirection","newDirection","newSort","store","createFilterStore","changeSort","area","onFilterStateChange","build","handleSortButtonClick","wrapProps","p","onPopperPanelChange","currentTarget","KeyboardArrowDownIcon","endIcon","height","grey","border","PanelNotFound","_ref2","Box","textAlign","FormContent","_ref3","afterTopBar","FormContentWrapper","concat","overflow","alignItems","background","gap","common","white","MenuWithTypeString","_props$fieldConfig$la","_props$fieldConfig","_props$fieldConfig2","_props$validationResu","_props$validationResu2","name","TextField","autoFocus","error","validationResult","hasError","helperText","message","MenuWithTypeSelect","_props$fieldConfig$la2","_props$fieldConfig3","_props$fieldConfig4","_props$validationResu3","_props$fieldConfig5","CustomRadioGroup","options","x","i","_x$label","FormControlLabel","control","Radio","RadioGroup","marginRight","margin","MenuWithTypeSelectMulti","_props$fieldConfig$la3","_props$fieldConfig6","_props$fieldConfig7","_props$validationResu4","_props$fieldConfig8","_useState","useState","_useState2","_slicedToArray","filterLogic","setFilterLogic","_","type","CustomFormGroup","_x$label2","Checkbox","FormGroup","MenuWithTypeDate","_props$fieldConfig$la4","_props$fieldConfig9","_props$fieldConfig0","_props$validationResu5","_props$validationResu6","_props$fieldConfig1","_props$fieldConfig10","dateString","_useState3","_useState4","dateLogic","setDateLogic","_useState5","_useState6","setValue","hidden","readOnly","test","target","inputProps","min","minDate","max","maxDate","MenuWithTypeDateRange","_props$fieldConfig$la5","_props$fieldConfig11","_props$fieldConfig12","_props$validationResu7","_props$fieldConfig13","_props$fieldConfig14","_props$validationResu8","_props$validationResu9","_props$fieldConfig15","_props$fieldConfig16","_useState7","_useState8","dateRangeLogic","setDateRangeLogic","DateRangeContainer","marginBottom","InputLabelProps","shrink","flexDirection","justifyContent","width","paddingLeft","li","content","top","right","transform"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as e,createClass as t,objectSpread2 as r,classCallCheck as a,callSuper as o,defineProperty as i,objectWithoutProperties as n,asyncToGenerator as l,regenerator as s}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as u,jsx as d,Fragment as p}from"react/jsx-runtime";import{Component as c}from"react";import{styled as m,Box as h,TextField as v,InputAdornment as g,IconButton as f,Collapse as b,CircularProgress as x}from"@mui/material";import S from"@mui/icons-material/ContentPaste";import{mergeObjects as k}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";import{getErrorMessage as y}from"./helpers.js";import P
|
|
1
|
+
import{inherits as e,createClass as t,objectSpread2 as r,classCallCheck as a,callSuper as o,defineProperty as i,objectWithoutProperties as n,asyncToGenerator as l,regenerator as s}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as u,jsx as d,Fragment as p}from"react/jsx-runtime";import{Component as c}from"react";import{styled as m,Box as h,TextField as v,InputAdornment as g,IconButton as f,Collapse as b,CircularProgress as x}from"@mui/material";import S from"@mui/icons-material/ContentPaste";import{mergeObjects as k}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";import{getErrorMessage as y}from"./helpers.js";import{ImageWithFallback as P}from"../components/image-with-fallback.js";var j=["srcGetter","element","alt","fallbackSrc","debounceDelay"],L=function(m){return function(){function x(e){var t,u;return a(this,x),u=o(this,x,[e]),i(u,"_cachedSlots",{}),i(u,"mapTextFieldProps",(function(){var e,t,a,o,i=y(u.props.messageErrors,u.props.name),n={fullWidth:!0,variant:"outlined",name:null===(e=u.props.name)||void 0===e?void 0:e.toString(),error:i.error,helperText:i.message,disabled:u.props.disabled,onBlur:function(){u.props.name&&u.props.onBlur&&u.props.onBlur(u.props.name)},label:u.getLabel(),placeholder:u.props.placeholder,InputLabelProps:u.state.value?{shrink:!0}:{},value:null!==(t=u.state.value)&&void 0!==t?t:"",onChange:u.handleChange};return!0===u.slots.pastenable&&(n.InputProps={endAdornment:d(g,{position:"end",children:d(f,{onClick:u.handlePaste,edge:"end",children:d(S,{})})})}),null!==(a=u.slots)&&void 0!==a&&a.maxLength&&(n.inputProps=r(r({},n.inputProps),{},{maxLength:u.slots.maxLength})),k({},n,null===(o=u.slots)||void 0===o?void 0:o.textFieldProps)})),i(u,"renderImageSide",(function(e){var t,a="left"===e?u.slots.imageLeft:u.slots.imageRight;if(!a)return d(p,{});var o=a.srcGetter,i=a.element,l=a.alt,s=void 0===l?"input-image":l,c=a.fallbackSrc,m=void 0===c?"":c,h=a.debounceDelay,v=void 0===h?700:h,g=n(a,j);if(i)return d(w,{children:d(i,{value:u.state.value,model:u.props.data})});var f=o?o(u.state.value,u.props.data):null!==(t=g.src)&&void 0!==t?t:u.state.value,x={src:f,alt:s,fallbackSrc:m,debounceDelay:v};return d(b,{sx:{mx:"10px"},in:!!f,unmountOnExit:!0,orientation:"horizontal",children:d(w,{children:d(P,r(r(r({},g),x),{},{loading:d(C,{})}))})})})),i(u,"mergeSlots",(function(e){var t=k({},m,e),a=t.imageLeft,o=t.imageRight;return null!=a&&a.mirror&&!o?(t.imageRight=r({},a),delete t.imageRight.mirror):null!=o&&o.mirror&&!a&&(t.imageLeft=r({},o),delete t.imageLeft.mirror),t})),i(u,"getLabel",(function(){var e,t,r;if(u.props.label)return null!==(e=u.slots)&&void 0!==e&&e.maxLength?"".concat(u.props.label," (").concat(null!==(t=null===(r=u.state.value)||void 0===r?void 0:r.length)&&void 0!==t?t:0,"/").concat(u.slots.maxLength,")"):u.props.label})),i(u,"handleChange",(function(e){u.setState({value:e.target.value})})),i(u,"handlePaste",l(s().m((function e(){var t,r;return s().w((function(e){for(;;)switch(e.n){case 0:return e.p=0,e.n=1,navigator.clipboard.readText();case 1:t=e.v,u.setState({value:t}),e.n=3;break;case 2:e.p=2,r=e.v,console.error("Error clipboard:",r);case 3:return e.a(2)}}),e,null,[[0,2]])})))),u._cachedSlots=null!==(t=u.mergeSlots(e.slots))&&void 0!==t?t:{},u.state={value:u.defaulValue},u}return e(x,c),t(x,[{key:"slots",get:function(){return this._cachedSlots}},{key:"defaulValue",get:function(){var e,t,r=this.props,a=r.data,o=r.name;return null!==(e=this.props.defaultValue)&&void 0!==e?e:a&&o?null===(t=a[o])||void 0===t?void 0:t.toString():void 0}},{key:"componentDidUpdate",value:function(e){e.slots!==this.props.slots&&(this._cachedSlots=this.mergeSlots(this.props.slots))}},{key:"shouldComponentUpdate",value:function(e){var t=this.props,r=t.name;t.slots;if(r){var a,o,i,n,l=null!==(a=null===(o=this.props.data)||void 0===o||null===(o=o[r])||void 0===o?void 0:o.toString())&&void 0!==a?a:"",s=null!==(i=null===(n=e.data)||void 0===n||null===(n=n[r])||void 0===n?void 0:n.toString())&&void 0!==i?i:"";if(l!==s)return this.setState({value:s}),!1}return e.slots,!0}},{key:"render",value:function(){var e;return u(h,{sx:{display:"flex",alignItems:"center"},children:[!!this.props.disabled&&d("input",{hidden:!0,name:null===(e=this.props.name)||void 0===e?void 0:e.toString(),defaultValue:this.defaulValue}),this.renderImageSide("left"),d(v,r({},this.mapTextFieldProps())),this.renderImageSide("right")]})}}])}()},C=function(){return d("div",{children:d(x,{size:24})})},w=m(h)({fontSize:"1rem",height:"var(--input-base-image-size, 54px)",width:"var(--input-base-image-size, 54px)",position:"relative",borderRadius:"8px",boxShadow:"rgba(0, 0, 0, 0.16) 0px 1px 4px",overflow:"hidden","& > img":{position:"absolute",top:0,left:0,backgroundRepeat:"no-repeat",height:"100%",width:"100%",backgroundSize:"contain"},"& > div":{position:"absolute",top:0,left:0,height:"100%",width:"100%",background:"#fafafa",zIndex:1,display:"flex",alignItems:"center",justifyContent:"center"}});export{L as default};
|
|
2
2
|
//# sourceMappingURL=create.input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.input.js","sources":["../../src/form/create.input.tsx"],"sourcesContent":["import React, { Component, ComponentType, FC } from 'react'\r\nimport { Box, CircularProgress, Collapse, IconButton, InputAdornment, styled, TextField, TextFieldProps } from '@mui/material'\r\nimport ContentPasteIcon from '@mui/icons-material/ContentPaste'\r\nimport { mergeObjects } from '../utils'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { ImageWithFallback, IImageWithFallbackPropsOwner } from '../components'\r\n\r\nexport interface InputBaseImage<T> extends Partial<IImageWithFallbackPropsOwner> {\r\n srcGetter?: (value: any, model?: Partial<T>) => string\r\n element?: React.ComponentType<{ value: any; model?: Partial<T> }>\r\n mirror?: boolean\r\n}\r\n\r\nexport interface IInputSlots<T> {\r\n maxLength?: number\r\n textFieldProps?: TextFieldProps\r\n pastenable?: boolean\r\n imageLeft?: InputBaseImage<T>\r\n imageRight?: InputBaseImage<T>\r\n}\r\n\r\nexport interface IInputProps<T> extends IFormInputBase<T, IInputSlots<T>> {}\r\n\r\nexport interface IInputState {\r\n value?: string\r\n}\r\n\r\nexport interface IInputParams<T> extends IInputSlots<T> {}\r\n\r\nconst CreateInput = function <T>(params?: IInputParams<T>): ComponentType<IInputProps<T>> {\r\n class InputBase extends Component<IInputProps<T>, IInputState> {\r\n private _cachedSlots: IInputSlots<T> = {}\r\n constructor(props: IInputProps<T>) {\r\n super(props)\r\n this._cachedSlots = this.mergeSlots(props.slots) ?? {}\r\n this.state = { value: this.defaulValue }\r\n }\r\n\r\n get slots() {\r\n return this._cachedSlots\r\n }\r\n\r\n get defaulValue(): string {\r\n const { data, name } = this.props\r\n return this.props.defaultValue ?? (!!data && !!name ? data[name]?.toString() : undefined)\r\n }\r\n\r\n componentDidUpdate(prevProps: IInputProps<T>) {\r\n if (prevProps.slots !== this.props.slots) {\r\n this._cachedSlots = this.mergeSlots(this.props.slots)\r\n }\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IInputProps<T>>): boolean {\r\n const { name, slots } = this.props\r\n if (!!name) {\r\n const currentDataValue = this.props.data?.[name]?.toString() ?? ''\r\n const nextDataValue = nextProps.data?.[name]?.toString() ?? ''\r\n if (currentDataValue !== nextDataValue) {\r\n this.setState({ value: nextDataValue })\r\n return false\r\n }\r\n }\r\n\r\n if (slots !== nextProps.slots) {\r\n return true\r\n }\r\n return true\r\n }\r\n\r\n mapTextFieldProps = (): TextFieldProps => {\r\n const errorMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n const tfp: TextFieldProps = {\r\n fullWidth: true,\r\n variant: 'outlined',\r\n name: this.props.name?.toString(),\r\n error: errorMessage.error,\r\n helperText: errorMessage.message,\r\n disabled: this.props.disabled,\r\n onBlur: () => {\r\n if (!this.props.name) return\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n },\r\n label: this.getLabel(),\r\n placeholder: this.props.placeholder,\r\n InputLabelProps: !!this.state.value ? { shrink: true } : {},\r\n value: this.state.value ?? '',\r\n onChange: this.handleChange\r\n }\r\n if (this.slots.pastenable === true) {\r\n tfp.InputProps = {\r\n endAdornment: (\r\n <InputAdornment position='end'>\r\n <IconButton onClick={this.handlePaste} edge='end'>\r\n <ContentPasteIcon />\r\n </IconButton>\r\n </InputAdornment>\r\n )\r\n }\r\n }\r\n if (this.slots?.maxLength) tfp.inputProps = { ...tfp.inputProps, maxLength: this.slots.maxLength }\r\n return mergeObjects<TextFieldProps>({}, tfp, this.slots?.textFieldProps)\r\n }\r\n\r\n //#region Render\r\n render() {\r\n return (\r\n <Box sx={{ display: 'flex', alignItems: 'center' }}>\r\n {!!this.props.disabled && <input hidden name={this.props.name?.toString()} defaultValue={this.defaulValue} />}\r\n {this.renderImageSide('left')}\r\n <TextField {...this.mapTextFieldProps()} />\r\n {this.renderImageSide('right')}\r\n </Box>\r\n )\r\n }\r\n\r\n renderImageSide = (side: 'left' | 'right') => {\r\n const image = side === 'left' ? this.slots.imageLeft : this.slots.imageRight\r\n if (!image) return <></>\r\n const { srcGetter, element, alt = 'input-image', fallbackSrc = '', debounceDelay = 700, ...imageOther } = image\r\n if (element) {\r\n const Element = element\r\n return (\r\n <WrapImage>\r\n <Element value={this.state.value} model={this.props.data} />\r\n </WrapImage>\r\n )\r\n }\r\n const src = srcGetter ? srcGetter(this.state.value, this.props.data) : imageOther.src ?? this.state.value\r\n const imageProps: IImageWithFallbackPropsOwner = { src, alt, fallbackSrc, debounceDelay }\r\n return (\r\n <Collapse sx={{ mx: '10px' }} in={!!src} unmountOnExit orientation='horizontal'>\r\n <WrapImage>\r\n <ImageWithFallback {...imageOther} {...imageProps} loading={<LoadingCircularProgress />} />\r\n </WrapImage>\r\n </Collapse>\r\n )\r\n }\r\n //#endregion\r\n\r\n private mergeSlots = (currentSlots?: IInputSlots<T>): IInputSlots<T> => {\r\n const base = mergeObjects<IInputSlots<T>>({}, params, currentSlots)\r\n const { imageLeft, imageRight } = base\r\n\r\n // mirror from left to right\r\n if (imageLeft?.mirror && !imageRight) {\r\n base.imageRight = { ...imageLeft }\r\n delete base.imageRight.mirror\r\n }\r\n // mirror from right to left\r\n else if (imageRight?.mirror && !imageLeft) {\r\n base.imageLeft = { ...imageRight }\r\n delete base.imageLeft.mirror\r\n }\r\n\r\n return base\r\n }\r\n\r\n getLabel = () => {\r\n if (!this.props.label) return\r\n if (!this.slots?.maxLength) return this.props.label\r\n return `${this.props.label} (${this.state.value?.length ?? 0}/${this.slots.maxLength})`\r\n }\r\n\r\n handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n this.setState({ value: event.target.value })\r\n }\r\n\r\n handlePaste = async () => {\r\n try {\r\n const clipboardText = await navigator.clipboard.readText()\r\n this.setState({ value: clipboardText })\r\n } catch (error) {\r\n console.error('Error clipboard:', error)\r\n }\r\n }\r\n }\r\n return InputBase\r\n}\r\n\r\nexport default CreateInput\r\n\r\n// export type InputTextType<T> = ReturnType<typeof CreateInputBase<T>>\r\n\r\nconst LoadingCircularProgress: FC = () => (\r\n <div>\r\n <CircularProgress size={24} />\r\n </div>\r\n)\r\n\r\nconst WrapImage = styled(Box)({\r\n fontSize: '1rem',\r\n height: 'var(--input-base-image-size, 54px)',\r\n width: 'var(--input-base-image-size, 54px)',\r\n position: 'relative',\r\n borderRadius: '8px',\r\n boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',\r\n overflow: 'hidden',\r\n '& > img': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n backgroundRepeat: 'no-repeat',\r\n height: '100%',\r\n width: '100%',\r\n backgroundSize: 'contain'\r\n },\r\n '& > div': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n height: '100%',\r\n width: '100%',\r\n background: '#fafafa',\r\n zIndex: 1,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center'\r\n }\r\n})\r\n"],"names":["CreateInput","params","InputBase","props","_this$mergeSlots","_this","_classCallCheck","_callSuper","_defineProperty","_this$props$name","_this$state$value","_this$slots","_this$slots2","errorMessage","getErrorMessage","messageErrors","name","tfp","fullWidth","variant","toString","error","helperText","message","disabled","onBlur","label","getLabel","placeholder","InputLabelProps","state","value","shrink","onChange","handleChange","slots","pastenable","InputProps","endAdornment","_jsx","InputAdornment","position","children","IconButton","onClick","handlePaste","edge","ContentPasteIcon","maxLength","inputProps","_objectSpread","mergeObjects","textFieldProps","side","_imageOther$src","image","imageLeft","imageRight","srcGetter","element","_image$alt","alt","_image$fallbackSrc","fallbackSrc","_image$debounceDelay","debounceDelay","imageOther","_objectWithoutProperties","_excluded","WrapImage","model","data","src","imageProps","Collapse","sx","mx","in","unmountOnExit","orientation","ImageWithFallback","loading","LoadingCircularProgress","currentSlots","base","mirror","_this$slots3","_this$state$value$len","_this$state$value2","concat","length","event","setState","target","_asyncToGenerator","_regenerator","m","_callee","clipboardText","_t","w","_context","n","p","navigator","clipboard","readText","v","console","a","_cachedSlots","mergeSlots","defaulValue","_inherits","Component","_createClass","key","get","this","_this$props$defaultVa","_data$name","_this$props","defaultValue","undefined","prevProps","nextProps","_this$props2","_this$props$data$name","_this$props$data","_nextProps$data$name$","_nextProps$data","currentDataValue","nextDataValue","_this$props$name2","_jsxs","Box","display","alignItems","hidden","renderImageSide","TextField","mapTextFieldProps","CircularProgress","size","styled","fontSize","height","width","borderRadius","boxShadow","overflow","top","left","backgroundRepeat","backgroundSize","background","zIndex","justifyContent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.input.js","sources":["../../src/form/create.input.tsx"],"sourcesContent":["import React, { Component, ComponentType, FC } from 'react'\r\nimport { Box, CircularProgress, Collapse, IconButton, InputAdornment, styled, TextField, TextFieldProps } from '@mui/material'\r\nimport ContentPasteIcon from '@mui/icons-material/ContentPaste'\r\nimport { mergeObjects } from '../utils'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { ImageWithFallback, IImageWithFallbackPropsOwner } from '../components'\r\n\r\nexport interface InputBaseImage<T> extends Partial<IImageWithFallbackPropsOwner> {\r\n srcGetter?: (value: any, model?: Partial<T>) => string\r\n element?: React.ComponentType<{ value: any; model?: Partial<T> }>\r\n mirror?: boolean\r\n}\r\n\r\nexport interface IInputSlots<T> {\r\n maxLength?: number\r\n textFieldProps?: TextFieldProps\r\n pastenable?: boolean\r\n imageLeft?: InputBaseImage<T>\r\n imageRight?: InputBaseImage<T>\r\n}\r\n\r\nexport interface IInputProps<T> extends IFormInputBase<T, IInputSlots<T>> {}\r\n\r\nexport interface IInputState {\r\n value?: string\r\n}\r\n\r\nexport interface IInputParams<T> extends IInputSlots<T> {}\r\n\r\nconst CreateInput = function <T>(params?: IInputParams<T>): ComponentType<IInputProps<T>> {\r\n class InputBase extends Component<IInputProps<T>, IInputState> {\r\n private _cachedSlots: IInputSlots<T> = {}\r\n constructor(props: IInputProps<T>) {\r\n super(props)\r\n this._cachedSlots = this.mergeSlots(props.slots) ?? {}\r\n this.state = { value: this.defaulValue }\r\n }\r\n\r\n get slots() {\r\n return this._cachedSlots\r\n }\r\n\r\n get defaulValue(): string {\r\n const { data, name } = this.props\r\n return this.props.defaultValue ?? (!!data && !!name ? data[name]?.toString() : undefined)\r\n }\r\n\r\n componentDidUpdate(prevProps: IInputProps<T>) {\r\n if (prevProps.slots !== this.props.slots) {\r\n this._cachedSlots = this.mergeSlots(this.props.slots)\r\n }\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IInputProps<T>>): boolean {\r\n const { name, slots } = this.props\r\n if (!!name) {\r\n const currentDataValue = this.props.data?.[name]?.toString() ?? ''\r\n const nextDataValue = nextProps.data?.[name]?.toString() ?? ''\r\n if (currentDataValue !== nextDataValue) {\r\n this.setState({ value: nextDataValue })\r\n return false\r\n }\r\n }\r\n\r\n if (slots !== nextProps.slots) {\r\n return true\r\n }\r\n return true\r\n }\r\n\r\n mapTextFieldProps = (): TextFieldProps => {\r\n const errorMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n const tfp: TextFieldProps = {\r\n fullWidth: true,\r\n variant: 'outlined',\r\n name: this.props.name?.toString(),\r\n error: errorMessage.error,\r\n helperText: errorMessage.message,\r\n disabled: this.props.disabled,\r\n onBlur: () => {\r\n if (!this.props.name) return\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n },\r\n label: this.getLabel(),\r\n placeholder: this.props.placeholder,\r\n InputLabelProps: !!this.state.value ? { shrink: true } : {},\r\n value: this.state.value ?? '',\r\n onChange: this.handleChange\r\n }\r\n if (this.slots.pastenable === true) {\r\n tfp.InputProps = {\r\n endAdornment: (\r\n <InputAdornment position='end'>\r\n <IconButton onClick={this.handlePaste} edge='end'>\r\n <ContentPasteIcon />\r\n </IconButton>\r\n </InputAdornment>\r\n )\r\n }\r\n }\r\n if (this.slots?.maxLength) tfp.inputProps = { ...tfp.inputProps, maxLength: this.slots.maxLength }\r\n return mergeObjects<TextFieldProps>({}, tfp, this.slots?.textFieldProps)\r\n }\r\n\r\n //#region Render\r\n render() {\r\n return (\r\n <Box sx={{ display: 'flex', alignItems: 'center' }}>\r\n {!!this.props.disabled && <input hidden name={this.props.name?.toString()} defaultValue={this.defaulValue} />}\r\n {this.renderImageSide('left')}\r\n <TextField {...this.mapTextFieldProps()} />\r\n {this.renderImageSide('right')}\r\n </Box>\r\n )\r\n }\r\n\r\n renderImageSide = (side: 'left' | 'right') => {\r\n const image = side === 'left' ? this.slots.imageLeft : this.slots.imageRight\r\n if (!image) return <></>\r\n const { srcGetter, element, alt = 'input-image', fallbackSrc = '', debounceDelay = 700, ...imageOther } = image\r\n if (element) {\r\n const Element = element\r\n return (\r\n <WrapImage>\r\n <Element value={this.state.value} model={this.props.data} />\r\n </WrapImage>\r\n )\r\n }\r\n const src = srcGetter ? srcGetter(this.state.value, this.props.data) : imageOther.src ?? this.state.value\r\n const imageProps: IImageWithFallbackPropsOwner = { src, alt, fallbackSrc, debounceDelay }\r\n return (\r\n <Collapse sx={{ mx: '10px' }} in={!!src} unmountOnExit orientation='horizontal'>\r\n <WrapImage>\r\n <ImageWithFallback {...imageOther} {...imageProps} loading={<LoadingCircularProgress />} />\r\n </WrapImage>\r\n </Collapse>\r\n )\r\n }\r\n //#endregion\r\n\r\n private mergeSlots = (currentSlots?: IInputSlots<T>): IInputSlots<T> => {\r\n const base = mergeObjects<IInputSlots<T>>({}, params, currentSlots)\r\n const { imageLeft, imageRight } = base\r\n\r\n // mirror from left to right\r\n if (imageLeft?.mirror && !imageRight) {\r\n base.imageRight = { ...imageLeft }\r\n delete base.imageRight.mirror\r\n }\r\n // mirror from right to left\r\n else if (imageRight?.mirror && !imageLeft) {\r\n base.imageLeft = { ...imageRight }\r\n delete base.imageLeft.mirror\r\n }\r\n\r\n return base\r\n }\r\n\r\n getLabel = () => {\r\n if (!this.props.label) return\r\n if (!this.slots?.maxLength) return this.props.label\r\n return `${this.props.label} (${this.state.value?.length ?? 0}/${this.slots.maxLength})`\r\n }\r\n\r\n handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n this.setState({ value: event.target.value })\r\n }\r\n\r\n handlePaste = async () => {\r\n try {\r\n const clipboardText = await navigator.clipboard.readText()\r\n this.setState({ value: clipboardText })\r\n } catch (error) {\r\n console.error('Error clipboard:', error)\r\n }\r\n }\r\n }\r\n return InputBase\r\n}\r\n\r\nexport default CreateInput\r\n\r\n// export type InputTextType<T> = ReturnType<typeof CreateInputBase<T>>\r\n\r\nconst LoadingCircularProgress: FC = () => (\r\n <div>\r\n <CircularProgress size={24} />\r\n </div>\r\n)\r\n\r\nconst WrapImage = styled(Box)({\r\n fontSize: '1rem',\r\n height: 'var(--input-base-image-size, 54px)',\r\n width: 'var(--input-base-image-size, 54px)',\r\n position: 'relative',\r\n borderRadius: '8px',\r\n boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px',\r\n overflow: 'hidden',\r\n '& > img': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n backgroundRepeat: 'no-repeat',\r\n height: '100%',\r\n width: '100%',\r\n backgroundSize: 'contain'\r\n },\r\n '& > div': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n height: '100%',\r\n width: '100%',\r\n background: '#fafafa',\r\n zIndex: 1,\r\n display: 'flex',\r\n alignItems: 'center',\r\n justifyContent: 'center'\r\n }\r\n})\r\n"],"names":["CreateInput","params","InputBase","props","_this$mergeSlots","_this","_classCallCheck","_callSuper","_defineProperty","_this$props$name","_this$state$value","_this$slots","_this$slots2","errorMessage","getErrorMessage","messageErrors","name","tfp","fullWidth","variant","toString","error","helperText","message","disabled","onBlur","label","getLabel","placeholder","InputLabelProps","state","value","shrink","onChange","handleChange","slots","pastenable","InputProps","endAdornment","_jsx","InputAdornment","position","children","IconButton","onClick","handlePaste","edge","ContentPasteIcon","maxLength","inputProps","_objectSpread","mergeObjects","textFieldProps","side","_imageOther$src","image","imageLeft","imageRight","srcGetter","element","_image$alt","alt","_image$fallbackSrc","fallbackSrc","_image$debounceDelay","debounceDelay","imageOther","_objectWithoutProperties","_excluded","WrapImage","model","data","src","imageProps","Collapse","sx","mx","in","unmountOnExit","orientation","ImageWithFallback","loading","LoadingCircularProgress","currentSlots","base","mirror","_this$slots3","_this$state$value$len","_this$state$value2","concat","length","event","setState","target","_asyncToGenerator","_regenerator","m","_callee","clipboardText","_t","w","_context","n","p","navigator","clipboard","readText","v","console","a","_cachedSlots","mergeSlots","defaulValue","_inherits","Component","_createClass","key","get","this","_this$props$defaultVa","_data$name","_this$props","defaultValue","undefined","prevProps","nextProps","_this$props2","_this$props$data$name","_this$props$data","_nextProps$data$name$","_nextProps$data","currentDataValue","nextDataValue","_this$props$name2","_jsxs","Box","display","alignItems","hidden","renderImageSide","TextField","mapTextFieldProps","CircularProgress","size","styled","fontSize","height","width","borderRadius","boxShadow","overflow","top","left","backgroundRepeat","backgroundSize","background","zIndex","justifyContent"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{inherits as
|
|
1
|
+
import{defineProperty as o,inherits as t,createClass as e,objectSpread2 as i,classCallCheck as l,callSuper as r}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as n,jsx as a}from"react/jsx-runtime";import{Fragment as p,Component as s}from"react";import{styled as u,FormControl as d,InputLabel as v,Select as c,MenuItem as f,Collapse as m,FormHelperText as g}from"@mui/material";import{mergeObjects as h}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"../utils/query-param.js";import{getErrorMessage as S}from"./helpers.js";import{RichTooltip as b,HelpOutlinePulseIcon as j}from"../components/rich-tooltip.js";function C(u){return function(){function d(t){var e,i;return l(this,d),i=r(this,d,[t]),o(i,"mapProps",(function(){var o,t,e,l,r,n=i.getLabel(),a={id:null===(o=i.props.name)||void 0===o?void 0:o.toString(),labelId:(null===(t=i.props.name)||void 0===t?void 0:t.toString())+n,name:null===(e=i.props.name)||void 0===e?void 0:e.toString(),label:n,defaultValue:i.getDefaultValue(),value:i.state.value,onChange:function(o){var t=o.target.value+"";i.setState({value:t},(function(){i.props.name&&i.props.onBlur&&i.props.onBlur(i.props.name);var o=i.getOptions().find((function(o){var e;return(null===(e=o.value)||void 0===e?void 0:e.toString())===t}));o&&i.props.onChange&&i.props.onChange(o)}))},disabled:i.props.disabled,fullWidth:void 0===i.props.fullWidth||i.props.fullWidth},p=null!==(l=null===(r=i.props.slots)||void 0===r?void 0:r.selectProps)&&void 0!==l?l:null==u?void 0:u.selectProps;return h({},a,p)})),o(i,"renderTooltip",(function(){var o=i.props.tooltip||(null==u?void 0:u.tooltip);return o?a("div",{className:W.tooltipWrap,children:a(b,{panel:o,children:a(j,{fontSize:"small"})})}):null})),o(i,"getRootClasses",(function(){var o=[W.root];return(i.props.tooltip||(null==u?void 0:u.tooltip))&&o.push(W.tooltip),o.join(" ")})),o(i,"getLabel",(function(){var o,t;return i.props.label&&"string"==typeof i.props.label?i.props.label:null!==(o=null===(t=i.props.name)||void 0===t?void 0:t.toString())&&void 0!==o?o:""})),o(i,"getDefaultValue",(function(){var o,t,e,l,r=i.props,n=r.data,a=r.name,p=i.getOptions();return null!==(o=null!==(t=null===(e=i.props.defaultValue)||void 0===e?void 0:e.toString())&&void 0!==t?t:n&&a?n[a]:void 0)&&void 0!==o?o:null===(l=p[0])||void 0===l?void 0:l.value})),o(i,"getOptions",(function(){var o,t;return null!==(o=null!==(t=null==u?void 0:u.options)&&void 0!==t?t:i.props.options)&&void 0!==o?o:[]})),i.state={value:null===(e=i.getDefaultValue())||void 0===e?void 0:e.toString()},i}return t(d,s),e(d,[{key:"render",value:function(){var o,t,e=this.getOptions(),l=this.getLabel(),r=S(this.props.messageErrors,this.props.name);return n(p,{children:[!!this.props.disabled&&a("input",{hidden:!0,name:null===(o=this.props.name)||void 0===o?void 0:o.toString(),defaultValue:this.getDefaultValue()}),n(V,{className:this.getRootClasses(),fullWidth:!0,disabled:this.props.disabled,error:r.error,children:[a(v,{id:(null===(t=this.props.name)||void 0===t?void 0:t.toString())+l,children:l}),a(c,i(i({},this.mapProps()),{},{children:e.map((function(o){return a(f,{value:o.value,children:o.name},o.value)}))})),a(m,{in:r.error,children:a(g,{children:r.message})}),this.renderTooltip()]})]})}}])}()}var W={root:"SelectSimple-root",tooltip:"SelectSimple-tooltip",tooltipWrap:"SelectSimple-tooltipWrap"},x=function(o,t){return"".concat((null==t?void 0:t.prefix)||"",".").concat(W[o]).concat((null==t?void 0:t.suffix)||"")},V=u(d)((function(t){var e=t.theme;return o(o(o({},x("root",{suffix:"&"}),{position:"relative"}),x("tooltipWrap"),{position:"absolute",top:e.spacing(2.25),right:e.spacing(1.5),display:"flex",alignItems:"center",gap:e.spacing(.5)}),x("tooltip",{suffix:"&"}),{".MuiSelect-icon":{right:e.spacing(4.5)}})}));export{C as default};
|
|
2
2
|
//# sourceMappingURL=create.select-simple.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.select-simple.js","sources":["../../src/form/create.select-simple.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Collapse, FormControl, FormHelperText, InputLabel, MenuItem, Select, SelectProps } from '@mui/material'\r\nimport { mergeObjects } from '../utils'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\n\r\nexport interface ISelectSimpleOption<T extends string = string> {\r\n name: string\r\n value: T\r\n}\r\n\r\nexport interface ISelectSimpleSlots {\r\n selectProps?: Omit<SelectProps, 'variant'>\r\n}\r\n\r\nexport interface ISelectSimpleProps<T> extends Partial<IFormInputBase<T>> {\r\n options?: ISelectSimpleOption[]\r\n onChange?: (value: ISelectSimpleOption) => void\r\n slots?: ISelectSimpleSlots\r\n fullWidth?: boolean\r\n}\r\n\r\nexport interface ISelectSimpleState {\r\n value?: string\r\n}\r\n\r\nexport interface ISelectSimpleParams extends ISelectSimpleSlots {\r\n options?: ISelectSimpleOption[]\r\n}\r\n\r\nfunction CreateSelectSimple<T>(args?: ISelectSimpleParams): ComponentType<ISelectSimpleProps<T>> {\r\n class SelectSimple extends Component<ISelectSimpleProps<T>, ISelectSimpleState> {\r\n constructor(props: ISelectSimpleProps<T>) {\r\n super(props)\r\n this.state = { value: this.getDefaultValue()?.toString() }\r\n }\r\n mapProps = (): SelectProps => {\r\n const label = this.getLabel()\r\n const tfp: SelectProps = {\r\n id: this.props.name?.toString(),\r\n labelId: this.props.name?.toString() + label,\r\n name: this.props.name?.toString(),\r\n label: label,\r\n defaultValue: this.getDefaultValue(),\r\n value: this.state.value,\r\n onChange: (event) => {\r\n const value: string = event.target.value + ''\r\n this.setState({ value }, () => {\r\n if (!!this.props.name) {\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n }\r\n const options = this.getOptions()\r\n const temp = options.find((x) => x.value?.toString() === value)\r\n if (!temp) return\r\n this.props.onChange && this.props.onChange(temp)\r\n })\r\n },\r\n disabled: this.props.disabled,\r\n fullWidth: this.props.fullWidth !== undefined ? this.props.fullWidth : true\r\n }\r\n const selectProps = this.props.slots?.selectProps ?? args?.selectProps\r\n return mergeObjects({}, tfp, selectProps)\r\n }\r\n render() {\r\n const data = this.getOptions()\r\n const label = this.getLabel()\r\n const errorMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n return (\r\n <React.Fragment>\r\n {!!this.props.disabled && <input hidden name={this.props.name?.toString()} defaultValue={this.getDefaultValue()} />}\r\n <FormControl fullWidth disabled={this.props.disabled} error={errorMessage.error}>\r\n <InputLabel id={this.props.name?.toString() + label}>{label}</InputLabel>\r\n <Select {...this.mapProps()}>\r\n {data.map((item) => (\r\n <MenuItem key={item.value} value={item.value}>\r\n {item.name}\r\n </MenuItem>\r\n ))}\r\n </Select>\r\n <Collapse in={errorMessage.error}>\r\n <FormHelperText>{errorMessage.message}</FormHelperText>\r\n </Collapse>\r\n </FormControl>\r\n </React.Fragment>\r\n )\r\n }\r\n getLabel = () => {\r\n if (!!this.props.label && typeof this.props.label === 'string') return this.props.label\r\n return this.props.name?.toString() ?? ''\r\n }\r\n getDefaultValue = () => {\r\n const { data, name } = this.props\r\n const options = this.getOptions()\r\n return this.props.defaultValue?.toString() ?? (!!data && !!name ? data[name] : undefined) ?? options[0]?.value\r\n }\r\n getOptions = (): ISelectSimpleOption[] => {\r\n return args?.options ?? this.props.options ?? []\r\n }\r\n }\r\n return SelectSimple\r\n}\r\nexport default CreateSelectSimple\r\n"],"names":["CreateSelectSimple","args","SelectSimple","props","_this$getDefaultValue","_this","_classCallCheck","_callSuper","_defineProperty","_this$props$name","_this$props$name2","_this$props$name3","_this$props$slots$sel","_this$props$slots","label","getLabel","tfp","id","name","toString","labelId","defaultValue","getDefaultValue","value","state","onChange","event","target","setState","onBlur","temp","getOptions","find","x","_x$value","disabled","fullWidth","undefined","selectProps","slots","mergeObjects","_this$props$name$toSt","_this$props$name4","_ref","_this$props$defaultVa","_this$props$defaultVa2","_options$","_this$props","data","options","_ref2","_args$options","_inherits","Component","_createClass","key","_this$props$name5","_this$props$name6","this","errorMessage","getErrorMessage","messageErrors","_jsxs","React","Fragment","children","_jsx","hidden","FormControl","error","InputLabel","Select","_objectSpread","mapProps","map","item","MenuItem","Collapse","in","FormHelperText","message"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.select-simple.js","sources":["../../src/form/create.select-simple.tsx"],"sourcesContent":["import { Component, Fragment } from 'react'\r\nimport { Collapse, FormControl, FormHelperText, InputLabel, MenuItem, Select, styled } from '@mui/material'\r\nimport type { ComponentType } from 'react'\r\nimport type { SelectProps } from '@mui/material'\r\nimport { mergeObjects } from '../utils'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { RichTooltip, HelpOutlinePulseIcon } from '../components/rich-tooltip'\r\nimport type { IRichTooltipPanelConfig } from '../components/rich-tooltip'\r\n\r\nexport interface ISelectSimpleOption<T extends string = string> {\r\n name: string\r\n value: T\r\n}\r\n\r\nexport interface ISelectSimpleSlots {\r\n selectProps?: Omit<SelectProps, 'variant'>\r\n}\r\n\r\nexport interface ISelectSimpleProps<T> extends Partial<IFormInputBase<T>> {\r\n options?: ISelectSimpleOption[]\r\n onChange?: (value: ISelectSimpleOption) => void\r\n slots?: ISelectSimpleSlots\r\n fullWidth?: boolean\r\n tooltip?: IRichTooltipPanelConfig\r\n}\r\n\r\nexport interface ISelectSimpleState {\r\n value?: string\r\n}\r\n\r\nexport interface ISelectSimpleParams extends ISelectSimpleSlots {\r\n options?: ISelectSimpleOption[]\r\n tooltip?: IRichTooltipPanelConfig\r\n}\r\n\r\nfunction CreateSelectSimple<T>(args?: ISelectSimpleParams): ComponentType<ISelectSimpleProps<T>> {\r\n class SelectSimple extends Component<ISelectSimpleProps<T>, ISelectSimpleState> {\r\n constructor(props: ISelectSimpleProps<T>) {\r\n super(props)\r\n this.state = { value: this.getDefaultValue()?.toString() }\r\n }\r\n mapProps = (): SelectProps => {\r\n const label = this.getLabel()\r\n const tfp: SelectProps = {\r\n id: this.props.name?.toString(),\r\n labelId: this.props.name?.toString() + label,\r\n name: this.props.name?.toString(),\r\n label: label,\r\n defaultValue: this.getDefaultValue(),\r\n value: this.state.value,\r\n onChange: (event) => {\r\n const value: string = event.target.value + ''\r\n this.setState({ value }, () => {\r\n if (!!this.props.name) {\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n }\r\n const options = this.getOptions()\r\n const temp = options.find((x) => x.value?.toString() === value)\r\n if (!temp) return\r\n this.props.onChange && this.props.onChange(temp)\r\n })\r\n },\r\n disabled: this.props.disabled,\r\n fullWidth: this.props.fullWidth !== undefined ? this.props.fullWidth : true\r\n }\r\n const selectProps = this.props.slots?.selectProps ?? args?.selectProps\r\n return mergeObjects({}, tfp, selectProps)\r\n }\r\n render() {\r\n const data = this.getOptions()\r\n const label = this.getLabel()\r\n const errorMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n return (\r\n <Fragment>\r\n {!!this.props.disabled && <input hidden name={this.props.name?.toString()} defaultValue={this.getDefaultValue()} />}\r\n <SelectSimpleStyled className={this.getRootClasses()} fullWidth disabled={this.props.disabled} error={errorMessage.error}>\r\n <InputLabel id={this.props.name?.toString() + label}>{label}</InputLabel>\r\n <Select {...this.mapProps()}>\r\n {data.map((item) => (\r\n <MenuItem key={item.value} value={item.value}>\r\n {item.name}\r\n </MenuItem>\r\n ))}\r\n </Select>\r\n <Collapse in={errorMessage.error}>\r\n <FormHelperText>{errorMessage.message}</FormHelperText>\r\n </Collapse>\r\n {this.renderTooltip()}\r\n </SelectSimpleStyled>\r\n </Fragment>\r\n )\r\n }\r\n\r\n renderTooltip = () => {\r\n const tooltip = this.props.tooltip || args?.tooltip\r\n if (!tooltip) return null\r\n return (\r\n <div className={selectSimpleClasses.tooltipWrap}>\r\n <RichTooltip panel={tooltip}>\r\n <HelpOutlinePulseIcon fontSize='small' />\r\n </RichTooltip>\r\n </div>\r\n )\r\n }\r\n\r\n getRootClasses = () => {\r\n const classes = [selectSimpleClasses.root]\r\n const tooltip = this.props.tooltip || args?.tooltip\r\n if (tooltip) classes.push(selectSimpleClasses.tooltip)\r\n return classes.join(' ')\r\n }\r\n\r\n getLabel = () => {\r\n if (!!this.props.label && typeof this.props.label === 'string') return this.props.label\r\n return this.props.name?.toString() ?? ''\r\n }\r\n\r\n getDefaultValue = () => {\r\n const { data, name } = this.props\r\n const options = this.getOptions()\r\n return this.props.defaultValue?.toString() ?? (!!data && !!name ? data[name] : undefined) ?? options[0]?.value\r\n }\r\n\r\n getOptions = (): ISelectSimpleOption[] => {\r\n return args?.options ?? this.props.options ?? []\r\n }\r\n }\r\n return SelectSimple\r\n}\r\nexport default CreateSelectSimple\r\n\r\nconst selectSimpleClasses = {\r\n root: 'SelectSimple-root',\r\n tooltip: 'SelectSimple-tooltip',\r\n tooltipWrap: 'SelectSimple-tooltipWrap'\r\n}\r\n\r\nconst getSelectSimpleClass = (key: keyof typeof selectSimpleClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${selectSimpleClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nconst SelectSimpleStyled = styled(FormControl)(({ theme }) => ({\r\n [getSelectSimpleClass('root', { suffix: '&' })]: {\r\n position: 'relative'\r\n },\r\n [getSelectSimpleClass('tooltipWrap')]: {\r\n position: 'absolute',\r\n top: theme.spacing(2.25),\r\n right: theme.spacing(1.5),\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(0.5)\r\n },\r\n [getSelectSimpleClass('tooltip', { suffix: '&' })]: {\r\n '.MuiSelect-icon': {\r\n right: theme.spacing(4.5)\r\n }\r\n }\r\n}))\r\n"],"names":["CreateSelectSimple","args","SelectSimple","props","_this$getDefaultValue","_this","_classCallCheck","_callSuper","_defineProperty","_this$props$name","_this$props$name2","_this$props$name3","_this$props$slots$sel","_this$props$slots","label","getLabel","tfp","id","name","toString","labelId","defaultValue","getDefaultValue","value","state","onChange","event","target","setState","onBlur","temp","getOptions","find","x","_x$value","disabled","fullWidth","undefined","selectProps","slots","mergeObjects","tooltip","_jsx","className","selectSimpleClasses","tooltipWrap","children","RichTooltip","panel","HelpOutlinePulseIcon","fontSize","classes","root","push","join","_this$props$name$toSt","_this$props$name4","_ref","_this$props$defaultVa","_this$props$defaultVa2","_options$","_this$props","data","options","_ref2","_args$options","_inherits","Component","_createClass","key","_this$props$name5","_this$props$name6","this","errorMessage","getErrorMessage","messageErrors","_jsxs","Fragment","hidden","SelectSimpleStyled","getRootClasses","error","InputLabel","Select","_objectSpread","mapProps","map","item","MenuItem","Collapse","in","FormHelperText","message","renderTooltip","getSelectSimpleClass","concat","prefix","suffix","styled","FormControl","_ref3","theme","position","top","spacing","right","display","alignItems","gap"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{defineProperty as t,inherits as e,createClass as n,objectSpread2 as o,classCallCheck as r,callSuper as i,asyncToGenerator as l,regenerator as a}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as s,jsx as u}from"react/jsx-runtime";import{Component as p}from"react";import{styled as d,Box as c,Autocomplete as f,TextField as v}from"@mui/material";import{getErrorMessage as h}from"./helpers.js";import{RichTooltip as m,HelpOutlinePulseIcon as g}from"../components/rich-tooltip.js";import{ApiAlertContext as S}from"../api-context/alert-global.js";var C=function(d){var c=function(){function c(e){var n,o,s;return r(this,c),o=i(this,c,[e]),t(o,"abortController",{signalController:new AbortController}),t(o,"refInput",null),t(o,"existedIds",[]),t(o,"renderTooltip",(function(){var t=o.props.tooltip||(null==d?void 0:d.tooltip);return t?u("div",{className:I.tooltipWrap,children:u(m,{panel:t,children:u(g,{fontSize:"small"})})}):null})),t(o,"getRootClasses",(function(){var t=[I.root];return(o.props.tooltip||(null==d?void 0:d.tooltip))&&t.push(I.tooltip),t.join(" ")})),t(o,"getFetchDataFunc",(function(){var t,e;return null!==(t=null!==(e=o.props.fetchData)&&void 0!==e?e:null==d?void 0:d.fetchData)&&void 0!==t?t:function(){return Promise.resolve([])}})),t(o,"timer",{_timer:0,_second:500,callback:(s=l(a().m((function t(e){var n,r,i;return a().w((function(t){for(;;)switch(t.n){case 0:return t.p=0,o.abortController.signalController=new AbortController,t.n=1,o.getFetchDataFunc()(e,o.abortController.signalController.signal);case 1:n=t.v,r=o.getOptionsFilter(n,o.existedIds),o.setState({options:r}),t.n=3;break;case 2:t.p=2,t.v,null===(i=S.ApiAlert)||void 0===i||i.PushError("Error from server!");case 3:return t.p=3,o.setState({statusText:"no items"}),t.f(3);case 4:return t.a(2)}}),t,null,[[0,2,3,4]])}))),function(t){return s.apply(this,arguments)}),start:function(t){o.timer.clear(),o.timer._timer=window.setTimeout((function(){return o.timer.callback(t)}),o.timer._second)},clear:function(){o.abortController.signalController.abort(),clearTimeout(o.timer._timer)}}),t(o,"fetchData",l(a().m((function t(){var e,n,r,i,l,s;return a().w((function(t){for(;;)switch(t.n){case 0:return t.p=0,n=o.getDefaultValue(),t.n=1,o.getFetchDataFunc()(n,o.abortController.signalController.signal);case 1:if(r=t.v,Array.isArray(r)){t.n=2;break}return t.a(2);case 2:return i=o.getOptionsFilter(r,o.existedIds),l=null!==(e=i.find((function(t){return t.Id===n})))&&void 0!==e?e:null,o.setState({options:i,optionSelected:l,loading:!1}),t.a(2);case 3:t.p=3,t.v,null===(s=S.ApiAlert)||void 0===s||s.PushError("Error from server!");case 4:return t.p=4,o.setState({statusText:"no items",loading:!1}),t.f(4);case 5:return t.a(2)}}),t,null,[[0,3,4,5]])})))),t(o,"handleChange",(function(t,e){var n;o.setState({optionSelected:e}),o.refInput&&(o.refInput.value=null!==(n=null==e?void 0:e.Id)&&void 0!==n?n:""),o.props.onChange&&o.props.onChange(e)})),t(o,"handleInputChange",(function(t,e){var n,r={inputValue:e};if(e!==(null===(n=o.state.optionSelected)||void 0===n?void 0:n.Name)){var i=e.trim().toLowerCase(),l=o.state.options.findIndex((function(t){var e;return null===(e=t.Name)||void 0===e?void 0:e.trim().toLowerCase().includes(i)}));(l<0||""===i)&&(r.statusText="loading..."),o.setState(r,(function(){(l<0||""===i)&&o.timer.start(i)}))}else o.setState(r)})),t(o,"fillterOptions",(function(t,e){return t.filter((function(t){var n,o=e.inputValue.toLowerCase();return t.Id.toLowerCase().includes(o)||(null===(n=t.Name)||void 0===n?void 0:n.toLowerCase().includes(o))}))})),t(o,"getLabel",(function(){var t,e;return null!==(t=o.props.label)&&void 0!==t?t:null===(e=o.props.name)||void 0===e?void 0:e.toString()})),t(o,"getDefaultValue",(function(){var t,e,n;if(o.props.name)return null===(t=null!==(e=o.props.defaultValue)&&void 0!==e?e:null===(n=o.props.data)||void 0===n?void 0:n[o.props.name])||void 0===t?void 0:t.toString()})),o.state={options:[],statusText:"no items",optionSelected:null,inputValue:"",loading:!0},o.existedIds=null!==(n=e.existedIds)&&void 0!==n?n:[],o}return e(c,p),n(c,[{key:"componentDidMount",value:function(){this.fetchData()}},{key:"componentWillUnmount",value:function(){this.timer.clear()}},{key:"componentDidUpdate",value:function(t){var e;JSON.stringify(t.existedIds)!==JSON.stringify(this.props.existedIds)&&(this.existedIds=null!==(e=this.props.existedIds)&&void 0!==e?e:[])}},{key:"render",value:function(){var t,e,n,r,i=this,l=this.getDefaultValue(),a=h(this.props.messageErrors,this.props.name);return s(b,{className:this.getRootClasses(),children:[u(f,{disabled:this.state.loading||this.props.disabled,fullWidth:!0,noOptionsText:this.state.statusText,options:this.state.options,getOptionLabel:function(t){var e;return null!==(e=t.Name)&&void 0!==e?e:t.Id},getOptionKey:function(t){return JSON.stringify(t)},isOptionEqualToValue:function(t,e){return t.Id.toString()===e.Id.toString()&&t.Name===e.Name},filterOptions:this.fillterOptions,value:this.state.optionSelected,onChange:this.handleChange,inputValue:this.state.inputValue,onInputChange:this.handleInputChange,renderInput:function(t){var e;return u(v,o(o({},t),{},{label:i.getLabel(),error:a.error,helperText:a.message,onBlur:function(){i.props.name&&i.props.onBlur&&i.props.onBlur(i.props.name)}},null===(e=i.props.slots)||void 0===e?void 0:e.textFieldProps))}}),u("input",{ref:function(t){return i.refInput=t},hidden:!0,name:null===(t=this.props.name)||void 0===t?void 0:t.toString(),defaultValue:l}),(null===(e=this.state.optionSelected)||void 0===e?void 0:e.Other)&&u("input",{hidden:!0,name:"".concat(null===(n=this.props.name)||void 0===n?void 0:n.toString(),"Other"),defaultValue:JSON.stringify(this.state.optionSelected.Other)},null!==(r=this.state.optionSelected.Id)&&void 0!==r?r:"key"),this.renderTooltip()]})}},{key:"getOptionsFilter",value:function(t){var e=new Set(arguments.length>1&&void 0!==arguments[1]?arguments[1]:[]);return t.reduce((function(t,n){return e.has(n.Id)||(t.push(n),e.add(n.Id)),t}),[])}}])}();return c},I={root:"SelectWithApi-root",tooltip:"SelectWithApi-tooltip",tooltipWrap:"SelectWithApi-tooltipWrap"},x=function(t,e){return"".concat((null==e?void 0:e.prefix)||"",".").concat(I[t]).concat((null==e?void 0:e.suffix)||"")},b=d(c)((function(e){var n=e.theme;return t(t(t({},x("root",{suffix:"&"}),{width:"100%",position:"relative"}),x("tooltipWrap"),{position:"absolute",top:n.spacing(2.25),right:n.spacing(1.5),display:"flex",alignItems:"center",gap:n.spacing(.5)}),x("tooltip",{suffix:"&"}),{".MuiInputBase-root .MuiAutocomplete-endAdornment":{right:n.spacing(4.5)}})}));export{C as default};
|
|
2
2
|
//# sourceMappingURL=create.select-with-api.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.select-with-api.js","sources":["../../src/form/create.select-with-api.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Autocomplete, FilterOptionsState, TextField, TextFieldProps } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { ApiAlertContext } from '../api-context'\r\n\r\nexport interface ISelectWithApiOption<TOther = any> {\r\n Id: string\r\n Name?: string\r\n Other?: TOther\r\n}\r\n\r\nexport interface ISelectWithApiPropsSlots {\r\n textFieldProps: TextFieldProps\r\n}\r\n\r\nexport type ISelectWithApiFetchData<O extends ISelectWithApiOption> = (value?: string, signal?: AbortSignal) => Promise<O[]>\r\n\r\nexport interface ISelectWithApiProps<T, O extends ISelectWithApiOption> extends IFormInputBase<T>, ISelectWithApiParams<O> {\r\n onChange?: (value: O | null) => void\r\n existedIds?: string[]\r\n slots?: ISelectWithApiPropsSlots\r\n}\r\n\r\nexport interface ISelectWithApiState<O extends ISelectWithApiOption> {\r\n options: O[]\r\n statusText?: string\r\n optionSelected: O | null\r\n inputValue: string\r\n loading?: boolean\r\n}\r\n\r\nexport interface ISelectWithApiParams<O extends ISelectWithApiOption> {\r\n fetchData?: ISelectWithApiFetchData<O>\r\n}\r\n\r\nconst CreateSelectWithApi = function <T, O extends ISelectWithApiOption = ISelectWithApiOption>(\r\n params?: ISelectWithApiParams<O>\r\n): ComponentType<ISelectWithApiProps<T, O>> {\r\n class SelectWithApi extends Component<ISelectWithApiProps<T, O>, ISelectWithApiState<O>> {\r\n abortController = { signalController: new AbortController() }\r\n refInput: HTMLInputElement | null = null\r\n existedIds: string[] = []\r\n constructor(props: ISelectWithApiProps<T, O>) {\r\n super(props)\r\n this.state = {\r\n options: [],\r\n statusText: 'no items',\r\n optionSelected: null,\r\n inputValue: '',\r\n loading: true\r\n }\r\n this.existedIds = props.existedIds ?? []\r\n }\r\n\r\n render() {\r\n const defaultValue = this.getDefaultValue()\r\n const eMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n return (\r\n <>\r\n <Autocomplete\r\n disabled={this.state.loading || this.props.disabled}\r\n fullWidth\r\n noOptionsText={this.state.statusText}\r\n options={this.state.options}\r\n getOptionLabel={(x) => x.Name ?? x.Id}\r\n getOptionKey={(x) => JSON.stringify(x)}\r\n isOptionEqualToValue={(o, v) => o.Id.toString() === v.Id.toString() && o.Name === v.Name}\r\n filterOptions={this.fillterOptions}\r\n // select\r\n value={this.state.optionSelected}\r\n onChange={this.handleChange}\r\n // input\r\n inputValue={this.state.inputValue}\r\n onInputChange={this.handleInputChange}\r\n renderInput={(params) => (\r\n <TextField\r\n {...params}\r\n label={this.getLabel()}\r\n error={eMessage.error}\r\n helperText={eMessage.message}\r\n onBlur={() => {\r\n if (!this.props.name) return\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n }}\r\n {...this.props.slots?.textFieldProps}\r\n />\r\n )}\r\n />\r\n <input ref={(ref) => (this.refInput = ref)} hidden name={this.props.name?.toString()} defaultValue={defaultValue} />\r\n {this.state.optionSelected?.Other && (\r\n <input\r\n hidden\r\n name={`${this.props.name?.toString()}Other`}\r\n key={this.state.optionSelected.Id ?? 'key'}\r\n defaultValue={JSON.stringify(this.state.optionSelected.Other)}\r\n />\r\n )}\r\n </>\r\n )\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchData()\r\n }\r\n\r\n componentWillUnmount(): void {\r\n this.timer.clear()\r\n }\r\n\r\n componentDidUpdate(prevProps: Readonly<ISelectWithApiProps<T, O>>): void {\r\n if (JSON.stringify(prevProps.existedIds) !== JSON.stringify(this.props.existedIds)) {\r\n this.existedIds = this.props.existedIds ?? []\r\n }\r\n }\r\n\r\n getFetchDataFunc = (): ISelectWithApiFetchData<O> => {\r\n return this.props.fetchData ?? params?.fetchData ?? (() => Promise.resolve([]))\r\n }\r\n\r\n timer = {\r\n _timer: 0,\r\n _second: 500,\r\n callback: async (value: string) => {\r\n try {\r\n this.abortController.signalController = new AbortController()\r\n const res = await this.getFetchDataFunc()(value, this.abortController.signalController.signal)\r\n const options = this.getOptionsFilter(res, this.existedIds)\r\n this.setState({ options })\r\n } catch (error) {\r\n // console.log(error)\r\n ApiAlertContext.ApiAlert?.PushError('Error from server!')\r\n } finally {\r\n this.setState({ statusText: 'no items' })\r\n }\r\n },\r\n start: (text: string) => {\r\n this.timer.clear()\r\n this.timer._timer = window.setTimeout(() => this.timer.callback(text), this.timer._second)\r\n },\r\n clear: () => {\r\n this.abortController.signalController.abort()\r\n clearTimeout(this.timer._timer)\r\n }\r\n }\r\n\r\n fetchData = async () => {\r\n try {\r\n const defaultValue = this.getDefaultValue()\r\n const res = await this.getFetchDataFunc()(defaultValue, this.abortController.signalController.signal)\r\n if (!Array.isArray(res)) return\r\n const options = this.getOptionsFilter(res, this.existedIds)\r\n const optionSelected = options.find((x) => x.Id === defaultValue) ?? null\r\n this.setState({ options, optionSelected, loading: false })\r\n return\r\n } catch (error) {\r\n // console.log(error)\r\n ApiAlertContext.ApiAlert?.PushError('Error from server!')\r\n } finally {\r\n this.setState({ statusText: 'no items', loading: false })\r\n }\r\n }\r\n\r\n handleChange = (_: React.SyntheticEvent, value: O | null) => {\r\n this.setState({ optionSelected: value })\r\n if (this.refInput) this.refInput.value = value?.Id ?? ''\r\n this.props.onChange && this.props.onChange(value)\r\n }\r\n\r\n handleInputChange = (_: React.SyntheticEvent, value: string) => {\r\n const state: Pick<ISelectWithApiState<O>, 'inputValue' | 'statusText' | 'loading'> = { inputValue: value }\r\n if (value === this.state.optionSelected?.Name) {\r\n this.setState(state)\r\n return\r\n }\r\n const valueFormated = value.trim().toLowerCase()\r\n const selectedIndex = this.state.options.findIndex((x) => {\r\n return x.Name?.trim().toLowerCase().includes(valueFormated)\r\n })\r\n if (selectedIndex < 0 || valueFormated === '') state.statusText = 'loading...'\r\n this.setState(state, () => {\r\n if (selectedIndex < 0 || valueFormated === '') this.timer.start(valueFormated)\r\n })\r\n }\r\n\r\n fillterOptions = (options: O[], state: FilterOptionsState<O>) => {\r\n return options.filter((x) => {\r\n const value = state.inputValue.toLowerCase()\r\n return x.Id.toLowerCase().includes(value) || x.Name?.toLowerCase().includes(value)\r\n })\r\n }\r\n\r\n getLabel = () => {\r\n return this.props.label ?? this.props.name?.toString()\r\n }\r\n\r\n getDefaultValue = () => {\r\n if (!this.props.name) return\r\n return (this.props.defaultValue ?? this.props.data?.[this.props.name])?.toString()\r\n }\r\n\r\n getOptionsFilter<O extends ISelectWithApiOption = ISelectWithApiOption>(options: O[], existedId: string[] = []): O[] {\r\n const ids = new Set<string | number>(existedId)\r\n return options.reduce<O[]>((a, b) => {\r\n if (!ids.has(b.Id)) {\r\n a.push(b)\r\n ids.add(b.Id)\r\n }\r\n return a\r\n }, [])\r\n }\r\n }\r\n return SelectWithApi\r\n}\r\nexport default CreateSelectWithApi\r\n"],"names":["CreateSelectWithApi","params","SelectWithApi","props","_props$existedIds","_this","_callback","_classCallCheck","_callSuper","_defineProperty","signalController","AbortController","_ref","_this$props$fetchData","fetchData","Promise","resolve","_timer","_second","callback","_asyncToGenerator","_regenerator","m","_callee","value","res","options","_ApiAlertContext$ApiA","w","_context","n","p","abortController","getFetchDataFunc","signal","v","getOptionsFilter","existedIds","setState","ApiAlertContext","ApiAlert","PushError","statusText","f","a","_x","apply","this","arguments","start","text","timer","clear","window","setTimeout","abort","clearTimeout","_callee2","_options$find","defaultValue","optionSelected","_ApiAlertContext$ApiA2","_context2","getDefaultValue","Array","isArray","find","x","Id","loading","_","_value$Id","refInput","onChange","_this$state$optionSel","state","inputValue","Name","valueFormated","trim","toLowerCase","selectedIndex","findIndex","_x$Name","includes","filter","_x$Name2","_this$props$label","_this$props$name","label","name","toString","_ref3","_this$props$defaultVa","_this$props$data","data","_inherits","Component","_createClass","key","_this$props$name2","_this$state$optionSel2","_this$props$name3","_this$state$optionSel3","_this2","eMessage","getErrorMessage","messageErrors","_jsxs","_jsx","Autocomplete","disabled","fullWidth","noOptionsText","getOptionLabel","_x$Name3","getOptionKey","JSON","stringify","isOptionEqualToValue","o","filterOptions","fillterOptions","handleChange","onInputChange","handleInputChange","renderInput","_this2$props$slots","TextField","_objectSpread","getLabel","error","helperText","message","onBlur","slots","textFieldProps","ref","hidden","Other","concat","prevProps","_this$props$existedId","ids","Set","length","undefined","reduce","b","has","push","add"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.select-with-api.js","sources":["../../src/form/create.select-with-api.tsx"],"sourcesContent":["import { Component } from 'react'\r\nimport { Autocomplete, Box, styled, TextField } from '@mui/material'\r\nimport type { ComponentType } from 'react'\r\nimport type { FilterOptionsState, TextFieldProps } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { ApiAlertContext } from '../api-context'\r\nimport { RichTooltip, HelpOutlinePulseIcon } from '../components/rich-tooltip'\r\nimport type { IRichTooltipPanelConfig } from '../components/rich-tooltip'\r\n\r\nexport interface ISelectWithApiOption<TOther = any> {\r\n Id: string\r\n Name?: string\r\n Other?: TOther\r\n}\r\n\r\nexport interface ISelectWithApiPropsSlots {\r\n textFieldProps: TextFieldProps\r\n}\r\n\r\nexport type ISelectWithApiFetchData<O extends ISelectWithApiOption> = (value?: string, signal?: AbortSignal) => Promise<O[]>\r\n\r\nexport interface ISelectWithApiProps<T, O extends ISelectWithApiOption> extends IFormInputBase<T>, ISelectWithApiParams<O> {\r\n tooltip?: IRichTooltipPanelConfig\r\n onChange?: (value: O | null) => void\r\n existedIds?: string[]\r\n slots?: ISelectWithApiPropsSlots\r\n}\r\n\r\nexport interface ISelectWithApiState<O extends ISelectWithApiOption> {\r\n options: O[]\r\n statusText?: string\r\n optionSelected: O | null\r\n inputValue: string\r\n loading?: boolean\r\n}\r\n\r\nexport interface ISelectWithApiParams<O extends ISelectWithApiOption> {\r\n fetchData?: ISelectWithApiFetchData<O>\r\n tooltip?: IRichTooltipPanelConfig\r\n}\r\n\r\nconst CreateSelectWithApi = function <T, O extends ISelectWithApiOption = ISelectWithApiOption>(\r\n params?: ISelectWithApiParams<O>\r\n): ComponentType<ISelectWithApiProps<T, O>> {\r\n class SelectWithApi extends Component<ISelectWithApiProps<T, O>, ISelectWithApiState<O>> {\r\n abortController = { signalController: new AbortController() }\r\n refInput: HTMLInputElement | null = null\r\n existedIds: string[] = []\r\n constructor(props: ISelectWithApiProps<T, O>) {\r\n super(props)\r\n this.state = {\r\n options: [],\r\n statusText: 'no items',\r\n optionSelected: null,\r\n inputValue: '',\r\n loading: true\r\n }\r\n this.existedIds = props.existedIds ?? []\r\n }\r\n\r\n componentDidMount() {\r\n this.fetchData()\r\n }\r\n\r\n componentWillUnmount(): void {\r\n this.timer.clear()\r\n }\r\n\r\n componentDidUpdate(prevProps: Readonly<ISelectWithApiProps<T, O>>): void {\r\n if (JSON.stringify(prevProps.existedIds) !== JSON.stringify(this.props.existedIds)) {\r\n this.existedIds = this.props.existedIds ?? []\r\n }\r\n }\r\n\r\n render() {\r\n const defaultValue = this.getDefaultValue()\r\n const eMessage = getErrorMessage(this.props.messageErrors, this.props.name)\r\n return (\r\n <SelectWithApiStyled className={this.getRootClasses()}>\r\n <Autocomplete\r\n disabled={this.state.loading || this.props.disabled}\r\n fullWidth\r\n noOptionsText={this.state.statusText}\r\n options={this.state.options}\r\n getOptionLabel={(x) => x.Name ?? x.Id}\r\n getOptionKey={(x) => JSON.stringify(x)}\r\n isOptionEqualToValue={(o, v) => o.Id.toString() === v.Id.toString() && o.Name === v.Name}\r\n filterOptions={this.fillterOptions}\r\n // select\r\n value={this.state.optionSelected}\r\n onChange={this.handleChange}\r\n // input\r\n inputValue={this.state.inputValue}\r\n onInputChange={this.handleInputChange}\r\n renderInput={(params) => (\r\n <TextField\r\n {...params}\r\n label={this.getLabel()}\r\n error={eMessage.error}\r\n helperText={eMessage.message}\r\n onBlur={() => {\r\n if (!this.props.name) return\r\n this.props.onBlur && this.props.onBlur(this.props.name)\r\n }}\r\n {...this.props.slots?.textFieldProps}\r\n />\r\n )}\r\n />\r\n <input ref={(ref) => (this.refInput = ref)} hidden name={this.props.name?.toString()} defaultValue={defaultValue} />\r\n {this.state.optionSelected?.Other && (\r\n <input\r\n hidden\r\n name={`${this.props.name?.toString()}Other`}\r\n key={this.state.optionSelected.Id ?? 'key'}\r\n defaultValue={JSON.stringify(this.state.optionSelected.Other)}\r\n />\r\n )}\r\n {this.renderTooltip()}\r\n </SelectWithApiStyled>\r\n )\r\n }\r\n\r\n renderTooltip = () => {\r\n const tooltip = this.props.tooltip || params?.tooltip\r\n if (!tooltip) return null\r\n return (\r\n <div className={selectWithApiClasses.tooltipWrap}>\r\n <RichTooltip panel={tooltip}>\r\n <HelpOutlinePulseIcon fontSize='small' />\r\n </RichTooltip>\r\n </div>\r\n )\r\n }\r\n\r\n getRootClasses = () => {\r\n const classes = [selectWithApiClasses.root]\r\n const tooltip = this.props.tooltip || params?.tooltip\r\n if (tooltip) classes.push(selectWithApiClasses.tooltip)\r\n return classes.join(' ')\r\n }\r\n\r\n getFetchDataFunc = (): ISelectWithApiFetchData<O> => {\r\n return this.props.fetchData ?? params?.fetchData ?? (() => Promise.resolve([]))\r\n }\r\n\r\n timer = {\r\n _timer: 0,\r\n _second: 500,\r\n callback: async (value: string) => {\r\n try {\r\n this.abortController.signalController = new AbortController()\r\n const res = await this.getFetchDataFunc()(value, this.abortController.signalController.signal)\r\n const options = this.getOptionsFilter(res, this.existedIds)\r\n this.setState({ options })\r\n } catch (error) {\r\n // console.log(error)\r\n ApiAlertContext.ApiAlert?.PushError('Error from server!')\r\n } finally {\r\n this.setState({ statusText: 'no items' })\r\n }\r\n },\r\n start: (text: string) => {\r\n this.timer.clear()\r\n this.timer._timer = window.setTimeout(() => this.timer.callback(text), this.timer._second)\r\n },\r\n clear: () => {\r\n this.abortController.signalController.abort()\r\n clearTimeout(this.timer._timer)\r\n }\r\n }\r\n\r\n fetchData = async () => {\r\n try {\r\n const defaultValue = this.getDefaultValue()\r\n const res = await this.getFetchDataFunc()(defaultValue, this.abortController.signalController.signal)\r\n if (!Array.isArray(res)) return\r\n const options = this.getOptionsFilter(res, this.existedIds)\r\n const optionSelected = options.find((x) => x.Id === defaultValue) ?? null\r\n this.setState({ options, optionSelected, loading: false })\r\n return\r\n } catch (error) {\r\n // console.log(error)\r\n ApiAlertContext.ApiAlert?.PushError('Error from server!')\r\n } finally {\r\n this.setState({ statusText: 'no items', loading: false })\r\n }\r\n }\r\n\r\n handleChange = (_: React.SyntheticEvent, value: O | null) => {\r\n this.setState({ optionSelected: value })\r\n if (this.refInput) this.refInput.value = value?.Id ?? ''\r\n this.props.onChange && this.props.onChange(value)\r\n }\r\n\r\n handleInputChange = (_: React.SyntheticEvent, value: string) => {\r\n const state: Pick<ISelectWithApiState<O>, 'inputValue' | 'statusText' | 'loading'> = { inputValue: value }\r\n if (value === this.state.optionSelected?.Name) {\r\n this.setState(state)\r\n return\r\n }\r\n const valueFormated = value.trim().toLowerCase()\r\n const selectedIndex = this.state.options.findIndex((x) => {\r\n return x.Name?.trim().toLowerCase().includes(valueFormated)\r\n })\r\n if (selectedIndex < 0 || valueFormated === '') state.statusText = 'loading...'\r\n this.setState(state, () => {\r\n if (selectedIndex < 0 || valueFormated === '') this.timer.start(valueFormated)\r\n })\r\n }\r\n\r\n fillterOptions = (options: O[], state: FilterOptionsState<O>) => {\r\n return options.filter((x) => {\r\n const value = state.inputValue.toLowerCase()\r\n return x.Id.toLowerCase().includes(value) || x.Name?.toLowerCase().includes(value)\r\n })\r\n }\r\n\r\n getLabel = () => {\r\n return this.props.label ?? this.props.name?.toString()\r\n }\r\n\r\n getDefaultValue = () => {\r\n if (!this.props.name) return\r\n return (this.props.defaultValue ?? this.props.data?.[this.props.name])?.toString()\r\n }\r\n\r\n getOptionsFilter<O extends ISelectWithApiOption = ISelectWithApiOption>(options: O[], existedId: string[] = []): O[] {\r\n const ids = new Set<string | number>(existedId)\r\n return options.reduce<O[]>((a, b) => {\r\n if (!ids.has(b.Id)) {\r\n a.push(b)\r\n ids.add(b.Id)\r\n }\r\n return a\r\n }, [])\r\n }\r\n }\r\n return SelectWithApi\r\n}\r\nexport default CreateSelectWithApi\r\n\r\nconst selectWithApiClasses = {\r\n root: 'SelectWithApi-root',\r\n tooltip: 'SelectWithApi-tooltip',\r\n tooltipWrap: 'SelectWithApi-tooltipWrap'\r\n}\r\n\r\nconst getSelectWithApiClass = (key: keyof typeof selectWithApiClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix || ''}.${selectWithApiClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nconst SelectWithApiStyled = styled(Box)(({ theme }) => ({\r\n [getSelectWithApiClass('root', { suffix: '&' })]: {\r\n width: '100%',\r\n position: 'relative'\r\n },\r\n [getSelectWithApiClass('tooltipWrap')]: {\r\n position: 'absolute',\r\n top: theme.spacing(2.25),\r\n right: theme.spacing(1.5),\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: theme.spacing(0.5)\r\n },\r\n [getSelectWithApiClass('tooltip', { suffix: '&' })]: {\r\n '.MuiInputBase-root .MuiAutocomplete-endAdornment': {\r\n right: theme.spacing(4.5)\r\n }\r\n }\r\n}))\r\n"],"names":["CreateSelectWithApi","params","SelectWithApi","props","_props$existedIds","_this","_callback","_classCallCheck","_callSuper","_defineProperty","signalController","AbortController","tooltip","_jsx","className","selectWithApiClasses","tooltipWrap","children","RichTooltip","panel","HelpOutlinePulseIcon","fontSize","classes","root","push","join","_ref","_this$props$fetchData","fetchData","Promise","resolve","_timer","_second","callback","_asyncToGenerator","_regenerator","m","_callee","value","res","options","_ApiAlertContext$ApiA","w","_context","n","p","abortController","getFetchDataFunc","signal","v","getOptionsFilter","existedIds","setState","ApiAlertContext","ApiAlert","PushError","statusText","f","a","_x","apply","this","arguments","start","text","timer","clear","window","setTimeout","abort","clearTimeout","_callee2","_options$find","defaultValue","optionSelected","_ApiAlertContext$ApiA2","_context2","getDefaultValue","Array","isArray","find","x","Id","loading","_","_value$Id","refInput","onChange","_this$state$optionSel","state","inputValue","Name","valueFormated","trim","toLowerCase","selectedIndex","findIndex","_x$Name","includes","filter","_x$Name2","_this$props$label","_this$props$name","label","name","toString","_ref3","_this$props$defaultVa","_this$props$data","data","_inherits","Component","_createClass","key","prevProps","_this$props$existedId","JSON","stringify","_this$props$name2","_this$state$optionSel2","_this$props$name3","_this$state$optionSel3","_this2","eMessage","getErrorMessage","messageErrors","_jsxs","SelectWithApiStyled","getRootClasses","Autocomplete","disabled","fullWidth","noOptionsText","getOptionLabel","_x$Name3","getOptionKey","isOptionEqualToValue","o","filterOptions","fillterOptions","handleChange","onInputChange","handleInputChange","renderInput","_this2$props$slots","TextField","_objectSpread","getLabel","error","helperText","message","onBlur","slots","textFieldProps","ref","hidden","Other","concat","renderTooltip","ids","Set","length","undefined","reduce","b","has","add","getSelectWithApiClass","prefix","suffix","styled","Box","_ref5","theme","width","position","top","spacing","right","display","alignItems","gap"],"mappings":"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"}
|
package/dist/redux/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../src/redux/types.ts"],"sourcesContent":["export enum ELazyStatus {\r\n Loading = 'Loading',\r\n Loaded = 'Loaded',\r\n Error = 'Error'\r\n}\r\n\r\nexport interface IDinoReduxState {\r\n status: ELazyStatus\r\n requestedId?: string\r\n}\r\n\r\nexport interface IReturnDispatch {\r\n abort?: () => void\r\n}\r\n\r\nexport interface IDinoReduxDispatch<P = any> {\r\n fetchData?: (params?: P, signal?: AbortSignal) => IReturnDispatch\r\n setStatus: (status: ELazyStatus) => void\r\n}\r\n\r\nexport interface IBaseActions<T, Id extends keyof T> {\r\n create: (value: Partial<T>, signal?: AbortSignal) => Promise<void>\r\n update: (id: T[Id], value: Partial<T>, signal?: AbortSignal) => Promise<void>\r\n delete: (id: T[Id], value?: Partial<T>, signal?: AbortSignal) => Promise<void>\r\n}\r\n\r\nexport type IDinoReduxActions<T, Id extends keyof T, K extends keyof IBaseActions<T, Id> = keyof IBaseActions<T, Id>> = Pick<IBaseActions<T, Id>, K>\r\n"],"names":["ELazyStatus"],"mappings":"IAAYA,GAAZ,SAAYA,GACVA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../src/redux/types.ts"],"sourcesContent":["export enum ELazyStatus {\r\n Loading = 'Loading',\r\n Loaded = 'Loaded',\r\n Error = 'Error'\r\n}\r\n\r\nexport interface IDinoReduxState {\r\n status: ELazyStatus\r\n requestedId?: string\r\n}\r\n\r\nexport interface IReturnDispatch {\r\n abort?: () => void\r\n}\r\n\r\nexport interface IDinoReduxDispatch<P = any> {\r\n fetchData?: (params?: P, signal?: AbortSignal) => IReturnDispatch\r\n setStatus: (status: ELazyStatus) => void\r\n}\r\n\r\nexport interface IBaseActions<T, Id extends keyof T> {\r\n create: (value: Partial<T>, signal?: AbortSignal) => Promise<void>\r\n update: (id: T[Id], value: Partial<T>, signal?: AbortSignal) => Promise<void>\r\n updatePatch: (oldValue: T, value: Partial<T>, signal?: AbortSignal) => Promise<void>\r\n delete: (id: T[Id], value?: Partial<T>, signal?: AbortSignal) => Promise<void>\r\n}\r\n\r\nexport type IDinoReduxActions<T, Id extends keyof T, K extends keyof IBaseActions<T, Id> = keyof IBaseActions<T, Id>> = Pick<IBaseActions<T, Id>, K>\r\n"],"names":["ELazyStatus"],"mappings":"IAAYA,GAAZ,SAAYA,GACVA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectSpread2 as r,inherits as e,createClass as t,classCallCheck as n,callSuper as i,defineProperty as a}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as l,jsxs as s,Fragment as o}from"react/jsx-runtime";import{Component as p}from"react";import{GridToolbar as c,GridToolbarQuickFilter as d}from"@mui/x-data-grid";import{styled as u,Typography as f,Box as m}from"@mui/material";import{BtnFormCreate as h}from"./ui.buttons.js";import{Breadcrumbs as x}from"../components/breadcrumbs.js";import g
|
|
1
|
+
import{objectSpread2 as r,inherits as e,createClass as t,classCallCheck as n,callSuper as i,defineProperty as a}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as l,jsxs as s,Fragment as o}from"react/jsx-runtime";import{Component as p}from"react";import{GridToolbar as c,GridToolbarQuickFilter as d}from"@mui/x-data-grid";import{styled as u,Typography as f,Box as m}from"@mui/material";import{BtnFormCreate as h}from"./ui.buttons.js";import{Breadcrumbs as x}from"../components/breadcrumbs.js";import{HelpTooltip as g}from"../components/help-tooltip.js";var b=function(){function r(){var e;n(this,r);for(var t=arguments.length,p=new Array(t),c=0;c<t;c++)p[c]=arguments[c];return e=i(this,r,[].concat(p)),a(e,"renderTitle",(function(){var r=e.props,t=r.title,n=r.afterTitle,i=r.breadcrumbs;if(!(!!t||!!i||!!n))return l(o,{});var a=t;return"string"==typeof t&&(a=l(y,{children:t})),i&&(a=l(x,{value:i})),s(m,{sx:{height:"56px",display:"flex",alignItems:"center"},children:[a,n]})})),a(e,"renderEndAdornment",(function(){return!e.props.searchInclude||e.props.searchInclude.length<=0?l(o,{}):l(g,{title:"The search includes",small:!0,children:l(v,{children:e.props.searchInclude.map((function(r,e){return l("li",{children:l(f,{variant:"body2",children:r})},e)}))})})})),e}return e(r,p),t(r,[{key:"render",value:function(){return s(m,{sx:{padding:"0 6px"},children:[this.renderTitle(),s(m,{sx:{display:"flex"},children:[s(m,{sx:{flex:1,display:"flex",alignItems:"center",flexWrap:"wrap"},children:[l(c,{sx:{padding:0}}),this.props.formCreate&&l(h,{children:this.props.formCreate}),this.props.afterAction]}),l(m,{sx:{display:"flex",gap:"8px",alignItems:"center"},children:s(m,{sx:{display:"flex",alignItems:"center"},children:[l(d,{fullWidth:!0,variant:"standard",size:"small",debounceMs:800,quickFilterParser:function(r){return[r]}}),this.renderEndAdornment()]})})]})]})}}])}(),v=u("ul")({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"}}),y=u((function(e){return l(f,r({noWrap:!0,variant:"subtitle1"},e))}))({fontWeight:700,flex:1});export{b 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, styled, Typography, TypographyProps } 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 afterTitle?: React.ReactNode\r\n}\r\n\r\nclass ToolbarPannel extends Component<React.PropsWithChildren<IToolbarPannelProps>> {\r\n render() {\r\n return (\r\n <Box sx={{ padding: '0 6px' }}>\r\n {this.renderTitle()}\r\n <Box sx={{ display: 'flex' }}>\r\n <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>\r\n <GridToolbar sx={{ padding: 0 }} />\r\n {this.props.formCreate && <BtnFormCreate>{this.props.formCreate}</BtnFormCreate>}\r\n {this.props.afterAction}\r\n </Box>\r\n <Box sx={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\r\n <Box sx={{ display: 'flex', alignItems: 'center' }}>\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 </Box>\r\n )\r\n }\r\n\r\n renderTitle = () => {\r\n const { title, afterTitle, breadcrumbs } = this.props\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') titleElm = <Title>{title}</Title>\r\n if (breadcrumbs) titleElm = <Breadcrumbs value={breadcrumbs} />\r\n\r\n return (\r\n <Box sx={{ height: '56px', display: 'flex', alignItems: 'center' }}>\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 <SeachHelp>\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 </SeachHelp>\r\n </HelpTooltip>\r\n )\r\n }\r\n}\r\n\r\nexport default ToolbarPannel\r\n\r\nconst SeachHelp = styled('ul')({\r\n margin: '0 0 0 18px',\r\n padding: 0,\r\n li: {\r\n position: 'relative'\r\n },\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\r\nconst Title = styled((props: TypographyProps) => <Typography noWrap variant='subtitle1' {...props} />)({\r\n fontWeight: 700,\r\n flex: 1\r\n})\r\n"],"names":["ToolbarPannel","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","_this$props","props","title","afterTitle","breadcrumbs","_jsx","titleElm","Title","children","Breadcrumbs","value","_jsxs","Box","sx","height","display","alignItems","searchInclude","HelpTooltip","small","SeachHelp","map","item","index","Typography","variant","_inherits","Component","_createClass","key","padding","renderTitle","flex","flexWrap","GridToolbar","formCreate","BtnFormCreate","afterAction","gap","GridToolbarQuickFilter","fullWidth","size","debounceMs","quickFilterParser","x","renderEndAdornment","styled","margin","li","position","content","top","transform","left","_objectSpread","noWrap","fontWeight"],"mappings":"
|
|
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, styled, Typography, TypographyProps } 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 afterTitle?: React.ReactNode\r\n}\r\n\r\nclass ToolbarPannel extends Component<React.PropsWithChildren<IToolbarPannelProps>> {\r\n render() {\r\n return (\r\n <Box sx={{ padding: '0 6px' }}>\r\n {this.renderTitle()}\r\n <Box sx={{ display: 'flex' }}>\r\n <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>\r\n <GridToolbar sx={{ padding: 0 }} />\r\n {this.props.formCreate && <BtnFormCreate>{this.props.formCreate}</BtnFormCreate>}\r\n {this.props.afterAction}\r\n </Box>\r\n <Box sx={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\r\n <Box sx={{ display: 'flex', alignItems: 'center' }}>\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 </Box>\r\n )\r\n }\r\n\r\n renderTitle = () => {\r\n const { title, afterTitle, breadcrumbs } = this.props\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') titleElm = <Title>{title}</Title>\r\n if (breadcrumbs) titleElm = <Breadcrumbs value={breadcrumbs} />\r\n\r\n return (\r\n <Box sx={{ height: '56px', display: 'flex', alignItems: 'center' }}>\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 <SeachHelp>\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 </SeachHelp>\r\n </HelpTooltip>\r\n )\r\n }\r\n}\r\n\r\nexport default ToolbarPannel\r\n\r\nconst SeachHelp = styled('ul')({\r\n margin: '0 0 0 18px',\r\n padding: 0,\r\n li: {\r\n position: 'relative'\r\n },\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\r\nconst Title = styled((props: TypographyProps) => <Typography noWrap variant='subtitle1' {...props} />)({\r\n fontWeight: 700,\r\n flex: 1\r\n})\r\n"],"names":["ToolbarPannel","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","_this$props","props","title","afterTitle","breadcrumbs","_jsx","titleElm","Title","children","Breadcrumbs","value","_jsxs","Box","sx","height","display","alignItems","searchInclude","HelpTooltip","small","SeachHelp","map","item","index","Typography","variant","_inherits","Component","_createClass","key","padding","renderTitle","flex","flexWrap","GridToolbar","formCreate","BtnFormCreate","afterAction","gap","GridToolbarQuickFilter","fullWidth","size","debounceMs","quickFilterParser","x","renderEndAdornment","styled","margin","li","position","content","top","transform","left","_objectSpread","noWrap","fontWeight"],"mappings":"mjBAkBMA,IAAAA,aAAc,SAAAA,IAAA,IAAAC,EAAAC,OAAAF,GAAA,IAAA,IAAAG,EAAAC,UAAAC,OAAAC,EAAAC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAAF,EAAAE,GAAAJ,UAAAI,GAqDjB,OArDiBP,EAAAQ,EAAAC,KAAAV,EAAAW,GAAAA,OAAAL,IAAAM,EAAAX,EAAA,eAsBJ,WACZ,IAAAY,EAA2CZ,EAAKa,MAAxCC,EAAKF,EAALE,MAAOC,EAAUH,EAAVG,WAAYC,EAAWJ,EAAXI,YAG3B,OADoBF,KAAWE,KAAiBD,GAChC,OAAOE,QAEvB,IAAIC,EAAWJ,EAIf,MAHqB,iBAAVA,IAAoBI,EAAWD,EAACE,EAAO,CAAAC,SAAAN,KAC9CE,IAAaE,EAAWD,EAACI,EAAW,CAACC,MAAON,KAG9CO,EAACC,EAAI,CAAAC,GAAI,CAAEC,OAAQ,OAAQC,QAAS,OAAQC,WAAY,UACrDR,SAAA,CAAAF,EACAH,QAGNJ,EAAAX,EAAA,sBAEoB,WACnB,OAAKA,EAAKa,MAAMgB,eAAiB7B,EAAKa,MAAMgB,cAAczB,QAAU,EAAUa,QAE5EA,EAACa,EAAW,CAAChB,MAAM,sBAAsBiB,OAAK,EAAAX,SAC5CH,EAACe,EAAS,CAAAZ,SACPpB,EAAKa,MAAMgB,cAAcI,KAAI,SAACC,EAAMC,GAAK,OACxClB,iBACEA,EAACmB,EAAW,CAAAC,QAAQ,iBAASH,KADtBC,EAGV,WAIRnC,CAAA,CAAA,OAAAsC,EAAAvC,EArDyBwC,GAqDzBC,EAAAzC,EAAA,CAAA,CAAA0C,IAAA,SAAAnB,MApDD,WACE,OACEC,EAACC,EAAI,CAAAC,GAAI,CAAEiB,QAAS,SACjBtB,SAAA,CAAAX,KAAKkC,cACNpB,EAACC,EAAG,CAACC,GAAI,CAAEE,QAAS,QAAQP,SAAA,CAC1BG,EAACC,GAAIC,GAAI,CAAEmB,KAAM,EAAGjB,QAAS,OAAQC,WAAY,SAAUiB,SAAU,kBACnE5B,EAAC6B,EAAY,CAAArB,GAAI,CAAEiB,QAAS,KAC3BjC,KAAKI,MAAMkC,YAAc9B,EAAC+B,EAAe,CAAA5B,SAAAX,KAAKI,MAAMkC,aACpDtC,KAAKI,MAAMoC,eAEdhC,EAACO,EAAG,CAACC,GAAI,CAAEE,QAAS,OAAQuB,IAAK,MAAOtB,WAAY,UAClDR,SAAAG,EAACC,EAAI,CAAAC,GAAI,CAAEE,QAAS,OAAQC,WAAY,UACtCR,SAAA,CAAAH,EAACkC,EAAuB,CAAAC,WAAU,EAAAf,QAAQ,WAAWgB,KAAK,QAAQC,WAAY,IAAKC,kBAAmB,SAACC,GAAM,MAAK,CAACA,EAAE,IACpH/C,KAAKgD,+BAMlB,IAAC,IAsCGzB,EAAY0B,EAAO,KAAPA,CAAa,CAC7BC,OAAQ,aACRjB,QAAS,EACTkB,GAAI,CACFC,SAAU,YAEZ,YAAa,CACXC,QAAS,MACTnC,QAAS,eACToC,IAAK,MACLC,UAAW,mBACXH,SAAU,WACVI,KAAM,WAIJ9C,EAAQuC,GAAO,SAAC7C,GAAsB,OAAKI,EAACmB,EAAU8B,EAAA,CAACC,UAAO9B,QAAQ,aAAgBxB,GAAS,GAAvF6C,CAAyF,CACrGU,WAAY,IACZxB,KAAM"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{styled as i,Box as t,Tooltip as n,Fade as l,IconButton as r,Typography as o}from"@mui/material";import s from"@mui/icons-material/Close";import a
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{styled as i,Box as t,Tooltip as n,Fade as l,IconButton as r,Typography as o}from"@mui/material";import s from"@mui/icons-material/Close";import{HelpTooltip as a}from"../../components/help-tooltip.js";var m=function(i){return e(u,{children:e(n,{title:"Remove filter",children:e(l,{in:i.visibled,unmountOnExit:!0,children:e(r,{size:"small",onClick:i.onClick,children:e(s,{fontSize:"small"})})})})})},c=function(i){return e(p,{children:i.items.map((function(i,t){return e(o,{component:"li",variant:"body2",children:i},t)}))})},d=function(i){var t,n;return e(u,{className:!0===i.disabledSize?"disabled-size":"",children:e(a,{small:!0,title:null!==(t=i.title)&&void 0!==t?t:"The search includes",children:i.renderContent?i.renderContent():e(c,{items:null!==(n=i.items)&&void 0!==n?n:[]})})})},u=i(t)({display:"inline-flex",flex:"0 0 auto",justifyContent:"center",alignItems:"center","&:not(.disabled-size)":{width:"40px",height:"40px"}}),p=i("ul")({paddingLeft:"1.7rem",marginBottom:0,li:{position:"relative",textAlign:"justify","&::before":{content:'"►"',display:"block",position:"absolute",top:"50%",right:"calc(100% + 6px)",transform:"translateY(-50%)",fontSize:"0.9em"}}});export{m as ButtonClear,d as FilterNotes};
|
|
2
2
|
//# sourceMappingURL=ui.units.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ui.units.js","sources":["../../../src/table-grid/filter-bar/ui.units.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react'\r\nimport { Box, Fade, IconButton, IconButtonProps, styled, Tooltip, Typography } from '@mui/material'\r\nimport CloseIcon from '@mui/icons-material/Close'\r\nimport HelpTooltip from '../../components/help-tooltip'\r\n\r\nexport interface IButtonClearProps {\r\n visibled?: boolean\r\n onClick: IconButtonProps['onClick']\r\n}\r\n\r\nexport const ButtonClear: FC<IButtonClearProps> = (props) => (\r\n <WrapIcon>\r\n <Tooltip title='Remove filter'>\r\n <Fade in={props.visibled} unmountOnExit>\r\n <IconButton size='small' onClick={props.onClick}>\r\n <CloseIcon fontSize='small' />\r\n </IconButton>\r\n </Fade>\r\n </Tooltip>\r\n </WrapIcon>\r\n)\r\n\r\nexport interface IFilterNotesProps {\r\n title?: string\r\n items?: string[]\r\n disabledSize?: boolean\r\n renderContent?: () => ReactNode\r\n}\r\n\r\nconst HelpTooltipContent: FC<{ items: string[] }> = (props) => (\r\n <WrapList>\r\n {props.items.map((item, index) => (\r\n <Typography key={index} component='li' variant='body2'>\r\n {item}\r\n </Typography>\r\n ))}\r\n </WrapList>\r\n)\r\n\r\nexport const FilterNotes: FC<IFilterNotesProps> = (props) => (\r\n <WrapIcon className={props.disabledSize === true ? 'disabled-size' : ''}>\r\n <HelpTooltip small title={props.title ?? 'The search includes'}>\r\n {props.renderContent ? props.renderContent() : <HelpTooltipContent items={props.items ?? []} />}\r\n </HelpTooltip>\r\n </WrapIcon>\r\n)\r\nconst WrapIcon = styled(Box)({\r\n display: 'inline-flex',\r\n flex: '0 0 auto',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n '&:not(.disabled-size)': {\r\n width: '40px',\r\n height: '40px'\r\n }\r\n})\r\n\r\nconst WrapList = styled('ul')({\r\n paddingLeft: '1.7rem',\r\n marginBottom: 0,\r\n li: {\r\n position: 'relative',\r\n textAlign: 'justify',\r\n '&::before': {\r\n content: '\"►\"',\r\n display: 'block',\r\n position: 'absolute',\r\n top: '50%',\r\n right: 'calc(100% + 6px)',\r\n transform: 'translateY(-50%)',\r\n fontSize: '0.9em'\r\n }\r\n }\r\n})\r\n"],"names":["ButtonClear","props","_jsx","WrapIcon","children","Tooltip","title","Fade","in","visibled","unmountOnExit","IconButton","size","onClick","CloseIcon","fontSize","HelpTooltipContent","WrapList","items","map","item","index","Typography","component","variant","FilterNotes","_props$title","_props$items","className","disabledSize","HelpTooltip","small","renderContent","styled","Box","display","flex","justifyContent","alignItems","width","height","paddingLeft","marginBottom","li","position","textAlign","content","top","right","transform"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ui.units.js","sources":["../../../src/table-grid/filter-bar/ui.units.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react'\r\nimport { Box, Fade, IconButton, IconButtonProps, styled, Tooltip, Typography } from '@mui/material'\r\nimport CloseIcon from '@mui/icons-material/Close'\r\nimport HelpTooltip from '../../components/help-tooltip'\r\n\r\nexport interface IButtonClearProps {\r\n visibled?: boolean\r\n onClick: IconButtonProps['onClick']\r\n}\r\n\r\nexport const ButtonClear: FC<IButtonClearProps> = (props) => (\r\n <WrapIcon>\r\n <Tooltip title='Remove filter'>\r\n <Fade in={props.visibled} unmountOnExit>\r\n <IconButton size='small' onClick={props.onClick}>\r\n <CloseIcon fontSize='small' />\r\n </IconButton>\r\n </Fade>\r\n </Tooltip>\r\n </WrapIcon>\r\n)\r\n\r\nexport interface IFilterNotesProps {\r\n title?: string\r\n items?: string[]\r\n disabledSize?: boolean\r\n renderContent?: () => ReactNode\r\n}\r\n\r\nconst HelpTooltipContent: FC<{ items: string[] }> = (props) => (\r\n <WrapList>\r\n {props.items.map((item, index) => (\r\n <Typography key={index} component='li' variant='body2'>\r\n {item}\r\n </Typography>\r\n ))}\r\n </WrapList>\r\n)\r\n\r\nexport const FilterNotes: FC<IFilterNotesProps> = (props) => (\r\n <WrapIcon className={props.disabledSize === true ? 'disabled-size' : ''}>\r\n <HelpTooltip small title={props.title ?? 'The search includes'}>\r\n {props.renderContent ? props.renderContent() : <HelpTooltipContent items={props.items ?? []} />}\r\n </HelpTooltip>\r\n </WrapIcon>\r\n)\r\nconst WrapIcon = styled(Box)({\r\n display: 'inline-flex',\r\n flex: '0 0 auto',\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n '&:not(.disabled-size)': {\r\n width: '40px',\r\n height: '40px'\r\n }\r\n})\r\n\r\nconst WrapList = styled('ul')({\r\n paddingLeft: '1.7rem',\r\n marginBottom: 0,\r\n li: {\r\n position: 'relative',\r\n textAlign: 'justify',\r\n '&::before': {\r\n content: '\"►\"',\r\n display: 'block',\r\n position: 'absolute',\r\n top: '50%',\r\n right: 'calc(100% + 6px)',\r\n transform: 'translateY(-50%)',\r\n fontSize: '0.9em'\r\n }\r\n }\r\n})\r\n"],"names":["ButtonClear","props","_jsx","WrapIcon","children","Tooltip","title","Fade","in","visibled","unmountOnExit","IconButton","size","onClick","CloseIcon","fontSize","HelpTooltipContent","WrapList","items","map","item","index","Typography","component","variant","FilterNotes","_props$title","_props$items","className","disabledSize","HelpTooltip","small","renderContent","styled","Box","display","flex","justifyContent","alignItems","width","height","paddingLeft","marginBottom","li","position","textAlign","content","top","right","transform"],"mappings":"2PAUaA,EAAqC,SAACC,GAAK,OACtDC,EAACC,EAAQ,CAAAC,SACPF,EAACG,EAAO,CAACC,MAAM,gBAAeF,SAC5BF,EAACK,EAAK,CAAAC,GAAIP,EAAMQ,SAAUC,eAAa,EAAAN,SACrCF,EAACS,EAAW,CAAAC,KAAK,QAAQC,QAASZ,EAAMY,iBACtCX,EAACY,EAAU,CAAAC,SAAS,iBAIjB,EAUPC,EAA8C,SAACf,GAAK,OACxDC,EAACe,YACEhB,EAAMiB,MAAMC,KAAI,SAACC,EAAMC,GAAK,OAC3BnB,EAACoB,EAAU,CAAaC,UAAU,KAAKC,QAAQ,QAC5CpB,SAAAgB,GADcC,EAGlB,KACQ,EAGAI,EAAqC,SAACxB,GAAK,IAAAyB,EAAAC,EAAA,OACtDzB,EAACC,EAAQ,CAACyB,WAAkC,IAAvB3B,EAAM4B,aAAwB,gBAAkB,GAAEzB,SACrEF,EAAC4B,GAAYC,OAAK,EAACzB,MAAkB,QAAboB,EAAEzB,EAAMK,aAAK,IAAAoB,EAAAA,EAAI,sBACtCtB,SAAAH,EAAM+B,cAAgB/B,EAAM+B,gBAAkB9B,EAACc,EAAkB,CAACE,MAAkBS,QAAbA,EAAE1B,EAAMiB,aAAKS,IAAAA,EAAAA,EAAI,QAElF,EAEPxB,EAAW8B,EAAOC,EAAPD,CAAY,CAC3BE,QAAS,cACTC,KAAM,WACNC,eAAgB,SAChBC,WAAY,SACZ,wBAAyB,CACvBC,MAAO,OACPC,OAAQ,UAINvB,EAAWgB,EAAO,KAAPA,CAAa,CAC5BQ,YAAa,SACbC,aAAc,EACdC,GAAI,CACFC,SAAU,WACVC,UAAW,UACX,YAAa,CACXC,QAAS,MACTX,QAAS,QACTS,SAAU,WACVG,IAAK,MACLC,MAAO,mBACPC,UAAW,mBACXlC,SAAU"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { SxProps, Theme } from '@mui/material';
|
|
1
|
+
import type { FC, PropsWithChildren, ReactNode } from 'react';
|
|
2
|
+
import type { SxProps, Theme } from '@mui/material';
|
|
3
3
|
export interface IHelpTooltipProps {
|
|
4
4
|
title: string;
|
|
5
5
|
small?: boolean;
|
|
6
6
|
sxIcon?: SxProps<Theme>;
|
|
7
7
|
}
|
|
8
|
-
declare const HelpTooltip: FC<PropsWithChildren<IHelpTooltipProps>>;
|
|
8
|
+
export declare const HelpTooltip: FC<PropsWithChildren<IHelpTooltipProps>>;
|
|
9
9
|
export default HelpTooltip;
|
|
10
10
|
export interface IHelpTooltipWrapProps {
|
|
11
11
|
content: ReactNode;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import type { FC, ImgHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
export interface IImageWithFallbackPropsOwner {
|
|
3
3
|
src?: string;
|
|
4
4
|
alt?: string;
|
|
@@ -6,8 +6,8 @@ export interface IImageWithFallbackPropsOwner {
|
|
|
6
6
|
loading?: ReactNode;
|
|
7
7
|
debounceDelay?: number;
|
|
8
8
|
}
|
|
9
|
-
export type IImageProps = Omit<
|
|
9
|
+
export type IImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, keyof IImageWithFallbackPropsOwner>;
|
|
10
10
|
export interface IImageWithFallbackProps extends IImageProps, IImageWithFallbackPropsOwner {
|
|
11
11
|
}
|
|
12
|
-
declare const ImageWithFallback: FC<IImageWithFallbackProps>;
|
|
12
|
+
export declare const ImageWithFallback: FC<IImageWithFallbackProps>;
|
|
13
13
|
export default ImageWithFallback;
|
|
@@ -4,10 +4,9 @@ export * from './buttons';
|
|
|
4
4
|
export * from './copy-to-clipboard';
|
|
5
5
|
export { default as CreateMultiSelectDropdown } from './create.multi-select-dropdown';
|
|
6
6
|
export * from './create.multi-select-dropdown';
|
|
7
|
-
export { default as ImageWithFallback } from './image-with-fallback';
|
|
8
7
|
export * from './image-with-fallback';
|
|
9
|
-
export { default as HelpTooltip } from './help-tooltip';
|
|
10
8
|
export * from './help-tooltip';
|
|
9
|
+
export * from './rich-tooltip';
|
|
11
10
|
export { default as TextEditorPreview } from './text-editor.preview';
|
|
12
11
|
export * from './text-editor.preview';
|
|
13
12
|
export { default as TextEditor } from './text-editor';
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Component } from 'react';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
import type { TooltipProps } from '@mui/material';
|
|
4
|
+
export interface IRichTooltipPanelConfig {
|
|
5
|
+
title: ReactNode;
|
|
6
|
+
content: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export interface IRichTooltipProps {
|
|
9
|
+
panel?: IRichTooltipPanelConfig;
|
|
10
|
+
renderPanel?: () => ReactNode;
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
slots?: {
|
|
13
|
+
tooltipProps?: Partial<TooltipProps>;
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
export declare class RichTooltip extends Component<IRichTooltipProps> {
|
|
17
|
+
render(): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
renderTitlePanel: () => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
|
|
19
|
+
renderTitle: (value: ReactNode) => number | true | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null;
|
|
20
|
+
renderContent: (value: ReactNode) => number | true | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null;
|
|
21
|
+
}
|
|
22
|
+
export default RichTooltip;
|
|
23
|
+
export declare const HelpOutlinePulseIcon: import("@emotion/styled").StyledComponent<import("@mui/material").SvgIconOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
|
|
24
|
+
ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
|
|
25
|
+
}, "classes" | "className" | "style" | "children" | "sx" | "color" | "fontSize" | "shapeRendering" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { ComponentType } from 'react';
|
|
2
|
-
import { SelectProps } from '@mui/material';
|
|
1
|
+
import type { ComponentType } from 'react';
|
|
2
|
+
import type { SelectProps } from '@mui/material';
|
|
3
3
|
import { IFormInputBase } from './types';
|
|
4
|
+
import type { IRichTooltipPanelConfig } from '../components/rich-tooltip';
|
|
4
5
|
export interface ISelectSimpleOption<T extends string = string> {
|
|
5
6
|
name: string;
|
|
6
7
|
value: T;
|
|
@@ -13,12 +14,14 @@ export interface ISelectSimpleProps<T> extends Partial<IFormInputBase<T>> {
|
|
|
13
14
|
onChange?: (value: ISelectSimpleOption) => void;
|
|
14
15
|
slots?: ISelectSimpleSlots;
|
|
15
16
|
fullWidth?: boolean;
|
|
17
|
+
tooltip?: IRichTooltipPanelConfig;
|
|
16
18
|
}
|
|
17
19
|
export interface ISelectSimpleState {
|
|
18
20
|
value?: string;
|
|
19
21
|
}
|
|
20
22
|
export interface ISelectSimpleParams extends ISelectSimpleSlots {
|
|
21
23
|
options?: ISelectSimpleOption[];
|
|
24
|
+
tooltip?: IRichTooltipPanelConfig;
|
|
22
25
|
}
|
|
23
26
|
declare function CreateSelectSimple<T>(args?: ISelectSimpleParams): ComponentType<ISelectSimpleProps<T>>;
|
|
24
27
|
export default CreateSelectSimple;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { TextFieldProps } from '@mui/material';
|
|
1
|
+
import type { ComponentType } from 'react';
|
|
2
|
+
import type { TextFieldProps } from '@mui/material';
|
|
3
3
|
import { IFormInputBase } from './types';
|
|
4
|
+
import type { IRichTooltipPanelConfig } from '../components/rich-tooltip';
|
|
4
5
|
export interface ISelectWithApiOption<TOther = any> {
|
|
5
6
|
Id: string;
|
|
6
7
|
Name?: string;
|
|
@@ -11,6 +12,7 @@ export interface ISelectWithApiPropsSlots {
|
|
|
11
12
|
}
|
|
12
13
|
export type ISelectWithApiFetchData<O extends ISelectWithApiOption> = (value?: string, signal?: AbortSignal) => Promise<O[]>;
|
|
13
14
|
export interface ISelectWithApiProps<T, O extends ISelectWithApiOption> extends IFormInputBase<T>, ISelectWithApiParams<O> {
|
|
15
|
+
tooltip?: IRichTooltipPanelConfig;
|
|
14
16
|
onChange?: (value: O | null) => void;
|
|
15
17
|
existedIds?: string[];
|
|
16
18
|
slots?: ISelectWithApiPropsSlots;
|
|
@@ -24,6 +26,7 @@ export interface ISelectWithApiState<O extends ISelectWithApiOption> {
|
|
|
24
26
|
}
|
|
25
27
|
export interface ISelectWithApiParams<O extends ISelectWithApiOption> {
|
|
26
28
|
fetchData?: ISelectWithApiFetchData<O>;
|
|
29
|
+
tooltip?: IRichTooltipPanelConfig;
|
|
27
30
|
}
|
|
28
|
-
declare const CreateSelectWithApi: <T, O extends ISelectWithApiOption<any> = ISelectWithApiOption<any>>(params?: ISelectWithApiParams<O> | undefined) =>
|
|
31
|
+
declare const CreateSelectWithApi: <T, O extends ISelectWithApiOption<any> = ISelectWithApiOption<any>>(params?: ISelectWithApiParams<O> | undefined) => ComponentType<ISelectWithApiProps<T, O>>;
|
|
29
32
|
export default CreateSelectWithApi;
|
|
@@ -17,6 +17,7 @@ export interface IDinoReduxDispatch<P = any> {
|
|
|
17
17
|
export interface IBaseActions<T, Id extends keyof T> {
|
|
18
18
|
create: (value: Partial<T>, signal?: AbortSignal) => Promise<void>;
|
|
19
19
|
update: (id: T[Id], value: Partial<T>, signal?: AbortSignal) => Promise<void>;
|
|
20
|
+
updatePatch: (oldValue: T, value: Partial<T>, signal?: AbortSignal) => Promise<void>;
|
|
20
21
|
delete: (id: T[Id], value?: Partial<T>, signal?: AbortSignal) => Promise<void>;
|
|
21
22
|
}
|
|
22
23
|
export type IDinoReduxActions<T, Id extends keyof T, K extends keyof IBaseActions<T, Id> = keyof IBaseActions<T, Id>> = Pick<IBaseActions<T, Id>, K>;
|