dinocollab-core 1.0.9 → 1.0.11
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/README.md +22 -0
- package/dist/components/create.multi-select-dropdown.js +1 -1
- package/dist/components/create.multi-select-dropdown.js.map +1 -1
- package/dist/form/create.form-grid-layout.js +1 -1
- package/dist/form/create.form-grid-layout.js.map +1 -1
- package/dist/types/components/create.multi-select-dropdown.d.ts +7 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -52,3 +52,25 @@ Tùy chọn 2: `webpack.config.js`
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
```
|
|
55
|
+
|
|
56
|
+
## 📦 Build npm - dinocollab-core
|
|
57
|
+
|
|
58
|
+
```
|
|
59
|
+
npm run build
|
|
60
|
+
npm version <patch|minor|major>
|
|
61
|
+
npm publish
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
| Lệnh | Tác dụng |
|
|
65
|
+
| ------------------- | --------------------------------------- |
|
|
66
|
+
| `npm version patch` | Tăng `PATCH` (ví dụ: `1.2.3` → `1.2.4`) |
|
|
67
|
+
| `npm version minor` | Tăng `MINOR` (ví dụ: `1.2.3` → `1.3.0`) |
|
|
68
|
+
| `npm version major` | Tăng `MAJOR` (ví dụ: `1.2.3` → `2.0.0`) |
|
|
69
|
+
|
|
70
|
+
>💡 Mỗi lệnh npm version sẽ tự động cập nhật package.json.
|
|
71
|
+
|
|
72
|
+
Bạn có thể thêm tuỳ chọn --no-git-tag-version nếu không muốn tạo git tag:
|
|
73
|
+
|
|
74
|
+
```
|
|
75
|
+
npm version <patch|minor|major> --no-git-tag-version
|
|
76
|
+
```
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineProperty as
|
|
1
|
+
import{defineProperty as o,slicedToArray as n,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"react-router-dom";import"../utils/query-param.js";import A from"./help-tooltip.js";function k(o){return function(s){var d,p,h,k,S,T,q,B,D,F,H,I,R,Y,_,E,M=a(""),W=n(M,2),X=W[0],G=W[1],J=a(null),K=n(J,2),Q=K[0],U=K[1],V=a(null!==(d=null!==(p=s.options)&&void 0!==p?p:o.options)&&void 0!==d?d:[]),Z=n(V,2),$=Z[0],oo=Z[1],no=a([]),eo=n(no,2),lo=eo[0],to=eo[1],io=a(null!==(h=null===(k=s.slots)||void 0===k?void 0:k.defaultLogic)&&void 0!==h?h:"and"),ro=n(io,2),ao=ro[0],co=ro[1],uo={buttonProps:z(null==o?void 0:o.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==o?void 0:o.contentPorps)&&void 0!==T?T:{}},so=c((function(){var o;s.value&&(co(null!==(o=s.value.logic)&&void 0!==o?o:"and"),to(s.value.items))}),[s.value]),po=function(o,n){U(null),setTimeout(so,300)};return u((function(){s.options&&s.options.length>0&&oo(s.options)}),[s.options]),u((function(){so()}),[so]),t(i,{children:[t(v,e(e({color:"inherit",endIcon:r(j,{}),disabled:$.length<1},uo.buttonProps),{},{onClick:function(o){U(o.currentTarget)},children:[o.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:po,anchorOrigin:{vertical:"bottom",horizontal:"left"},children:[t(N,{className:"top",children:[r(f,{size:"small",placeholder:null!==(F=o.placeholder)&&void 0!==F?F:"Search",fullWidth:!0,value:X,onChange:function(o){return G(o.target.value)}}),t(g,{size:"small",exclusive:!0,color:"primary",value:ao,onChange:function(o,n){n&&co(n)},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"},uo.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(o){return o.toLowerCase().includes(X.toLowerCase())})).sort((function(o,n){return o.localeCompare(n)})),_=Y.filter((function(o){return R.includes(o)})),E=Y.filter((function(o){return!R.includes(o)})),[].concat(l(_),l(E))).map((function(o){return r(y,{sx:{whiteSpace:"nowrap"},children:r(P,{label:o,control:r(w,{checked:lo.includes(o),onChange:function(){return n=o,void to((function(o){return o.includes(n)?o.filter((function(o){return o!==n})):[].concat(l(o),[n])}));var n}})})},o)}))})})),t(N,{children:[r(v,{size:"small",onClick:function(){to([]),s.onChange&&s.onChange({items:[],logic:ao})},color:"inherit",children:"Clear"}),r(m,{sx:{flex:1}}),r(v,{size:"small",onClick:function(){to([]),po()},color:"inherit",children:"Cancel"}),r(v,{size:"small",variant:"contained",onClick:function(){s.onChange&&s.onChange({items:lo,logic:ao}),po()},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)(o({},"& .".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, 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\ntype ILogic = 'and' | 'or'\r\n\r\nexport interface IMultiSelectDropdownFilter {\r\n logic?: ILogic\r\n}\r\n\r\nexport interface IMultiSelectDropdownSlots {\r\n buttonProps?: ButtonProps\r\n contentPorps?: BoxProps\r\n}\r\n\r\nexport interface IMultiSelectDropdownProps {\r\n options?: string[]\r\n value?: string[]\r\n onChange?: (value: string[], filter?: IMultiSelectDropdownFilter) => void\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 [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\r\n const [selectedOptions, setSelectedOptions] = useState<string[]>([])\r\n const [options, setOptions] = useState<string[]>(props.options ?? params.options ?? [])\r\n const [search, setSearch] = useState('')\r\n const [filterLogic, setFilterLogic] = useState<ILogic>('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 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 }\r\n\r\n const handleToggle = (value: string) => {\r\n setSelectedOptions((prev) => (prev.includes(value) ? prev.filter((t) => t !== value) : [...prev, value]))\r\n }\r\n\r\n const handleClear = () => {\r\n setSelectedOptions([])\r\n props.onChange && props.onChange([])\r\n }\r\n\r\n const handleCancel = () => {\r\n setSelectedOptions(props.value ?? [])\r\n handleClose()\r\n }\r\n\r\n const handleApply = () => {\r\n props.onChange && props.onChange(selectedOptions)\r\n handleClose()\r\n }\r\n\r\n const getOptions = () => {\r\n const values = props.value ?? []\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 useEffect(() => {\r\n if (props.options && props.options.length > 0) setOptions(props.options)\r\n }, [props.options])\r\n\r\n useEffect(() => {\r\n setSelectedOptions(props.value ?? [])\r\n }, [props.value])\r\n\r\n return (\r\n <>\r\n <Button color='inherit' endIcon={<FilterAltOutlinedIcon />} {...mergeConfig.buttonProps} onClick={handleOpen}>\r\n {params.btnText}\r\n <ButtonBadge badgeContent={props.value?.length} color='error' overlap='circular' sx={{ transform: 'translateY(-50%) translateX(24px)' }} />\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\r\n size='small'\r\n exclusive\r\n color='primary'\r\n value={filterLogic}\r\n onChange={(_, value) => {\r\n if (value) setFilterLogic(value)\r\n }}\r\n >\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={selectedOptions.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 // minWidth: '300px',\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","_ref2","_props$slots$contentP","_props$slots2","_props$value4","_params$placeholder","_props$value2","values","list","prioritized","others","_useState","useState","_useState2","_slicedToArray","anchorEl","setAnchorEl","_useState3","_useState4","selectedOptions","setSelectedOptions","_useState5","options","_useState6","setOptions","_useState7","_useState8","search","setSearch","_useState9","_useState0","filterLogic","setFilterLogic","mergeConfig","buttonProps","mergeObjects","slots","contentProps","contentPorps","handleClose","event","reason","useEffect","length","_props$value3","value","_jsxs","_Fragment","children","Button","_objectSpread","color","endIcon","_jsx","FilterAltOutlinedIcon","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","_props$value","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{inherits as o,createClass as t,classCallCheck as n,callSuper as r,defineProperty as e,objectSpread2 as i,objectWithoutProperties as l,asyncToGenerator as a,regeneratorRuntime as s}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as u,jsx as p}from"react/jsx-runtime";import{Fragment as d,Component as c}from"react";import{Grid as v}from"@mui/material";import"../api-context/alert-global.js";import"../api-context/drawer-global.js";import{mapGlobalModalContext as m}from"../api-context/global-modal.js";import{CreateFormBottomBar as f,ContentWrap as g}from"./create.form-grid-layout.units.js";import b from"./create.input.js";import h from"./create.form-base.js";var y=["slots"],x=function(x){var S=h(),C=f(),
|
|
1
|
+
import{inherits as o,createClass as t,classCallCheck as n,callSuper as r,defineProperty as e,objectSpread2 as i,objectWithoutProperties as l,asyncToGenerator as a,regeneratorRuntime as s}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as u,jsx as p}from"react/jsx-runtime";import{Fragment as d,Component as c}from"react";import{Grid as v}from"@mui/material";import"../api-context/alert-global.js";import"../api-context/drawer-global.js";import{mapGlobalModalContext as m}from"../api-context/global-modal.js";import{CreateFormBottomBar as f,ContentWrap as g}from"./create.form-grid-layout.units.js";import b from"./create.input.js";import h from"./create.form-base.js";var y=["slots"],x=function(x){var S=h(),C=f(),k=b({maxLength:250}),j=function(){function f(o){var t;return n(this,f),t=r(this,f,[o]),e(t,"renderContent",(function(){var o,n=t.props.slots;return u(g,i(i({},null===(o=t.props)||void 0===o||null===(o=o.slots)||void 0===o?void 0:o.contentProps),{},{children:[(null==n?void 0:n.contentBefore)&&(null==n?void 0:n.contentBefore),null==x?void 0:x.contentBefore,p(v,{container:!0,spacing:2,children:x.configs.map((function(o,n){var r,e=!(null===(r=t.configMerged.inputVisibility)||void 0===r||!r[o.key])||void 0;return p(d,e?{}:{children:p(v,i(i({item:!0,xs:12},o.reponsives),{},{children:t.renderFormFieldElement(o)}))},o.key.toString()+n)}))}),null==x?void 0:x.contentAfter,(null==n?void 0:n.contentAfter)&&(null==n?void 0:n.contentAfter)]}))})),e(t,"renderFormFieldElement",(function(o){var n,r,e,i,a=t.props;a.slots;var s=l(a,y),u=null!==(n=o.inputElement)&&void 0!==n?n:k,d=null!==(r=null===(e=s.data)||void 0===e?void 0:e[o.key])&&void 0!==r?r:null==o?void 0:o.defaultValue,c=!(null===(i=t.configMerged.inputDisabled)||void 0===i||!i[o.key])||void 0;return S.contextMapping((function(n){return p(u,{data:t.props.data,onBlur:n.onBlur,messageErrors:n.messageErrors,name:o.key,label:o.label,placeholder:o.placeholder,disabled:c,defaultValue:d})}))})),e(t,"loading",(function(){return t.setState({loadding:!0})})),e(t,"unloading",(function(){return t.setState({loadding:!1})})),e(t,"onSubmit",function(){var o=a(s().mark((function o(n,r){var e,i,l,a,u,p,d;return s().wrap((function(o){for(;;)switch(o.prev=o.next){case 0:return a=t.props.slots,u=null!==(e=null!==(i=null===(l=t.props.slots)||void 0===l?void 0:l.submitMapping)&&void 0!==i?i:x.submitMapping)&&void 0!==e?e:t.submitMapping,p=u(n,t.props.data),o.prev=3,t.loading(),null===(d=t.abortController)||void 0===d||d.abort(),t.abortController=new AbortController,o.next=9,t.props.onSubmit(p,t.abortController.signal);case 9:null!=a&&a.closeState&&!1===a.closeState.Success||(r&&r(),t.props.onClose&&t.props.onClose()),o.next=16;break;case 12:o.prev=12,o.t0=o.catch(3),null!=a&&a.closeState&&!0===a.closeState.Fail&&(r&&r(),t.props.onClose&&t.props.onClose()),t.props.onError&&t.props.onError(o.t0);case 16:return o.prev=16,t.unloading(),o.finish(16);case 19:case"end":return o.stop()}}),o,null,[[3,12,16,19]])})));return function(t,n){return o.apply(this,arguments)}}()),e(t,"submitMapping",(function(o){return o})),e(t,"getSxProps",(function(){var o=t.state.loadding;return i(i({},t.props.sx),{},{opacity:o?.7:1,pointerEvents:o?"none":"auto"})})),t.state={loadding:!1},t}return o(f,c),t(f,[{key:"configMerged",get:function(){var o,t,n,r;return{inputVisibility:null!==(o=null===(t=this.props.slots)||void 0===t?void 0:t.inputVisibility)&&void 0!==o?o:x.inputVisibility,inputDisabled:null!==(n=null===(r=this.props.slots)||void 0===r?void 0:r.inputDisabled)&&void 0!==n?n:x.inputDisabled}}},{key:"render",value:function(){var o,t,n,r=this,e=null!==(o=null!==(t=null==x?void 0:x.action)&&void 0!==t?t:null===(n=this.props.slots)||void 0===n?void 0:n.action)&&void 0!==o?o:C;return m((function(o){var t=o.close;return u(S.Form,{validate:x.validate,onSubmit:function(o){return r.onSubmit(o,t)},sx:r.getSxProps(),children:[r.renderContent(),S.contextMapping((function(o){var t;return p(e,{data:r.props.data,onBlur:o.onBlur,messageErrors:o.messageErrors,before:null===(t=r.props.slots)||void 0===t?void 0:t.actionBefore})}))]})}))}},{key:"componentWillUnmount",value:function(){var o;null===(o=this.abortController)||void 0===o||o.abort()}}])}();return j};export{x as default};
|
|
2
2
|
//# sourceMappingURL=create.form-grid-layout.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.form-grid-layout.js","sources":["../../src/form/create.form-grid-layout.tsx"],"sourcesContent":["import React, { Component, ComponentType, Fragment } from 'react'\r\nimport { BoxProps, Grid, RegularBreakpoints, SxProps, Theme } from '@mui/material'\r\nimport { IFormBase, IFormInputBase } from './types'\r\nimport { mapGlobalModalContext } from '../api-context'\r\nimport { ContentWrap, CreateFormBottomBar } from './create.form-grid-layout.units'\r\nimport FormValidator from './validator'\r\nimport CreateInput from './create.input'\r\nimport CreateFormBase from './create.form-base'\r\n\r\nexport interface IFormGridLayoutConfig<T> {\r\n key: keyof T\r\n label?: string\r\n placeholder?: string\r\n reponsives?: RegularBreakpoints\r\n defaultValue?: any\r\n inputElement?: React.ComponentType<IFormInputBase<T>>\r\n}\r\n\r\nexport type SubmitMappingEvent<T> = (value: Partial<T>, oldValue?: T) => Partial<T>\r\n\r\nexport interface IFormGridLayoutSlots<T> {\r\n action?: React.ComponentType<IFormBase<T>>\r\n actionBefore?: JSX.Element\r\n contentBefore?: JSX.Element\r\n contentAfter?: JSX.Element\r\n inputVisibility?: Partial<Record<keyof T, boolean>>\r\n inputDisabled?: Partial<Record<keyof T, boolean>>\r\n closeState?: { Success?: boolean; Fail?: boolean }\r\n contentProps?: BoxProps\r\n submitMapping?: SubmitMappingEvent<T>\r\n}\r\n\r\nexport interface IFormGridLayoutParams<T> extends IFormGridLayoutSlots<T> {\r\n configs: IFormGridLayoutConfig<T>[]\r\n validate: FormValidator<Partial<T>>\r\n}\r\n\r\nexport interface IFormGridLayoutProps<T> {\r\n data?: T\r\n onSubmit: (value: Partial<T>, signal?: AbortSignal) => Promise<void>\r\n onError?: (error: any) => void\r\n onClose?: () => void\r\n sx?: SxProps<Theme>\r\n slots?: IFormGridLayoutSlots<T>\r\n}\r\n\r\nexport interface IFormGridLayoutState {\r\n loadding?: boolean\r\n}\r\n\r\nconst CreateFormGridLayout = function <T>(params: IFormGridLayoutParams<T>): ComponentType<IFormGridLayoutProps<T>> {\r\n const FormBaseInstance = CreateFormBase<T>()\r\n const BottomBarInstance = CreateFormBottomBar<T>()\r\n const InputBaseInstance = CreateInput<T>({ maxLength: 250 })\r\n\r\n class FormGridLayout extends Component<IFormGridLayoutProps<T>, IFormGridLayoutState> {\r\n private abortController?: AbortController\r\n constructor(props: IFormGridLayoutProps<T>) {\r\n super(props)\r\n this.state = { loadding: false }\r\n }\r\n\r\n get configMerged() {\r\n return {\r\n inputVisibility: this.props.slots?.inputVisibility ?? params.inputVisibility,\r\n inputDisabled: this.props.slots?.inputDisabled ?? params.inputDisabled\r\n }\r\n }\r\n\r\n render() {\r\n const BottomBar = params?.action ?? this.props.slots?.action ?? BottomBarInstance\r\n return mapGlobalModalContext(({ close }) => (\r\n <FormBaseInstance.Form validate={params.validate} onSubmit={(v) => this.onSubmit(v, close)} sx={this.getSxProps()}>\r\n {this.renderContent()}\r\n {FormBaseInstance.contextMapping((context) => (\r\n <BottomBar data={this.props.data} onBlur={context.onBlur} messageErrors={context.messageErrors} before={this.props.slots?.actionBefore} />\r\n ))}\r\n </FormBaseInstance.Form>\r\n ))\r\n }\r\n\r\n renderContent = () => {\r\n const { slots } = this.props\r\n return (\r\n <ContentWrap {...this.props?.slots?.contentProps}>\r\n {slots?.contentBefore && slots?.contentBefore}\r\n {params?.contentBefore}\r\n <Grid container spacing={2}>\r\n {params.configs.map((config, index) => {\r\n const visibility: boolean | undefined = this.configMerged.inputVisibility?.[config.key] ? true : undefined\r\n if (visibility) return <Fragment key={config.key.toString() + index} />\r\n return (\r\n <Fragment key={config.key.toString() + index}>\r\n <Grid item xs={12} {...config.reponsives}>\r\n {this.renderFormFieldElement(config)}\r\n </Grid>\r\n </Fragment>\r\n )\r\n })}\r\n </Grid>\r\n {params?.contentAfter}\r\n {slots?.contentAfter && slots?.contentAfter}\r\n </ContentWrap>\r\n )\r\n }\r\n\r\n renderFormFieldElement = (config: IFormGridLayoutConfig<T>) => {\r\n const { slots, ...otherProps } = this.props\r\n const ElementComponent = config.inputElement ?? InputBaseInstance\r\n const dValue = otherProps.data?.[config.key] ?? config?.defaultValue\r\n const disabled: boolean | undefined = this.configMerged.inputDisabled?.[config.key] ? true : undefined\r\n return FormBaseInstance.contextMapping((context) => (\r\n <ElementComponent\r\n data={this.props.data}\r\n onBlur={context.onBlur}\r\n messageErrors={context.messageErrors}\r\n name={config.key}\r\n label={config.label}\r\n placeholder={config.placeholder}\r\n disabled={disabled}\r\n defaultValue={dValue}\r\n />\r\n ))\r\n }\r\n\r\n loading = () => this.setState({ loadding: true })\r\n\r\n unloading = () => this.setState({ loadding: false })\r\n\r\n componentWillUnmount(): void {\r\n this.abortController?.abort()\r\n }\r\n\r\n onSubmit = async (value: Partial<T>, close?: () => void) => {\r\n const { slots } = this.props\r\n const mapping = this.props.slots?.submitMapping ?? params.submitMapping ?? this.submitMapping\r\n const data = mapping(value, this.props.data)\r\n try {\r\n this.loading()\r\n this.abortController?.abort()\r\n this.abortController = new AbortController()\r\n await this.props.onSubmit(data, this.abortController.signal)\r\n if (!slots?.closeState || slots.closeState.Success !== false) {\r\n close && close()\r\n this.props.onClose && this.props.onClose()\r\n }\r\n } catch (error) {\r\n if (slots?.closeState && slots.closeState.Fail === true) {\r\n close && close()\r\n this.props.onClose && this.props.onClose()\r\n }\r\n if (this.props.onError) this.props.onError(error)\r\n } finally {\r\n this.unloading()\r\n }\r\n }\r\n\r\n submitMapping: SubmitMappingEvent<T> = (value, oldValue) => {\r\n return Object.assign({}, oldValue, value)\r\n }\r\n\r\n getSxProps = (): SxProps<Theme> => {\r\n const isLoading = this.state.loadding\r\n return { ...this.props.sx, opacity: isLoading ? 0.7 : 1, pointerEvents: isLoading ? 'none' : 'auto' }\r\n }\r\n }\r\n return FormGridLayout\r\n}\r\n\r\nexport default CreateFormGridLayout\r\n"],"names":["CreateFormGridLayout","params","FormBaseInstance","CreateFormBase","BottomBarInstance","CreateFormBottomBar","InputBaseInstance","CreateInput","maxLength","FormGridLayout","props","_this","_classCallCheck","_callSuper","_defineProperty","_this$props","slots","_jsxs","ContentWrap","_objectSpread","contentProps","children","contentBefore","_jsx","Grid","container","spacing","configs","map","config","index","_this$configMerged$in","visibility","configMerged","inputVisibility","key","undefined","Fragment","item","xs","reponsives","renderFormFieldElement","toString","contentAfter","_config$inputElement","_otherProps$data$conf","_otherProps$data","_this$configMerged$in2","_this$props2","otherProps","_objectWithoutProperties","_excluded","ElementComponent","inputElement","dValue","data","defaultValue","disabled","inputDisabled","contextMapping","context","onBlur","messageErrors","name","label","placeholder","setState","loadding","_ref","_asyncToGenerator","_regeneratorRuntime","mark","_callee","value","close","_ref2","_this$props$slots$sub","_this$props$slots","mapping","_this$abortController","wrap","_context","prev","next","submitMapping","loading","abortController","abort","AbortController","onSubmit","signal","closeState","Success","onClose","t0","Fail","onError","unloading","finish","stop","_x","_x2","apply","this","arguments","oldValue","Object","assign","isLoading","state","sx","opacity","pointerEvents","_inherits","Component","_createClass","get","_this$props$slots$inp","_this$props$slots2","_this$props$slots$inp2","_this$props$slots3","_ref3","_params$action","_this$props$slots4","_this2","BottomBar","action","mapGlobalModalContext","_ref4","Form","validate","v","getSxProps","renderContent","_this2$props$slots","before","actionBefore","_this$abortController2"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.form-grid-layout.js","sources":["../../src/form/create.form-grid-layout.tsx"],"sourcesContent":["import React, { Component, ComponentType, Fragment } from 'react'\r\nimport { BoxProps, Grid, RegularBreakpoints, SxProps, Theme } from '@mui/material'\r\nimport { IFormBase, IFormInputBase } from './types'\r\nimport { mapGlobalModalContext } from '../api-context'\r\nimport { ContentWrap, CreateFormBottomBar } from './create.form-grid-layout.units'\r\nimport FormValidator from './validator'\r\nimport CreateInput from './create.input'\r\nimport CreateFormBase from './create.form-base'\r\n\r\nexport interface IFormGridLayoutConfig<T> {\r\n key: keyof T\r\n label?: string\r\n placeholder?: string\r\n reponsives?: RegularBreakpoints\r\n defaultValue?: any\r\n inputElement?: React.ComponentType<IFormInputBase<T>>\r\n}\r\n\r\nexport type SubmitMappingEvent<T> = (value: Partial<T>, oldValue?: T) => Partial<T>\r\n\r\nexport interface IFormGridLayoutSlots<T> {\r\n action?: React.ComponentType<IFormBase<T>>\r\n actionBefore?: JSX.Element\r\n contentBefore?: JSX.Element\r\n contentAfter?: JSX.Element\r\n inputVisibility?: Partial<Record<keyof T, boolean>>\r\n inputDisabled?: Partial<Record<keyof T, boolean>>\r\n closeState?: { Success?: boolean; Fail?: boolean }\r\n contentProps?: BoxProps\r\n submitMapping?: SubmitMappingEvent<T>\r\n}\r\n\r\nexport interface IFormGridLayoutParams<T> extends IFormGridLayoutSlots<T> {\r\n configs: IFormGridLayoutConfig<T>[]\r\n validate: FormValidator<Partial<T>>\r\n}\r\n\r\nexport interface IFormGridLayoutProps<T> {\r\n data?: T\r\n onSubmit: (value: Partial<T>, signal?: AbortSignal) => Promise<void>\r\n onError?: (error: any) => void\r\n onClose?: () => void\r\n sx?: SxProps<Theme>\r\n slots?: IFormGridLayoutSlots<T>\r\n}\r\n\r\nexport interface IFormGridLayoutState {\r\n loadding?: boolean\r\n}\r\n\r\nconst CreateFormGridLayout = function <T>(params: IFormGridLayoutParams<T>): ComponentType<IFormGridLayoutProps<T>> {\r\n const FormBaseInstance = CreateFormBase<T>()\r\n const BottomBarInstance = CreateFormBottomBar<T>()\r\n const InputBaseInstance = CreateInput<T>({ maxLength: 250 })\r\n\r\n class FormGridLayout extends Component<IFormGridLayoutProps<T>, IFormGridLayoutState> {\r\n private abortController?: AbortController\r\n constructor(props: IFormGridLayoutProps<T>) {\r\n super(props)\r\n this.state = { loadding: false }\r\n }\r\n\r\n get configMerged() {\r\n return {\r\n inputVisibility: this.props.slots?.inputVisibility ?? params.inputVisibility,\r\n inputDisabled: this.props.slots?.inputDisabled ?? params.inputDisabled\r\n }\r\n }\r\n\r\n render() {\r\n const BottomBar = params?.action ?? this.props.slots?.action ?? BottomBarInstance\r\n return mapGlobalModalContext(({ close }) => (\r\n <FormBaseInstance.Form validate={params.validate} onSubmit={(v) => this.onSubmit(v, close)} sx={this.getSxProps()}>\r\n {this.renderContent()}\r\n {FormBaseInstance.contextMapping((context) => (\r\n <BottomBar data={this.props.data} onBlur={context.onBlur} messageErrors={context.messageErrors} before={this.props.slots?.actionBefore} />\r\n ))}\r\n </FormBaseInstance.Form>\r\n ))\r\n }\r\n\r\n renderContent = () => {\r\n const { slots } = this.props\r\n return (\r\n <ContentWrap {...this.props?.slots?.contentProps}>\r\n {slots?.contentBefore && slots?.contentBefore}\r\n {params?.contentBefore}\r\n <Grid container spacing={2}>\r\n {params.configs.map((config, index) => {\r\n const visibility: boolean | undefined = this.configMerged.inputVisibility?.[config.key] ? true : undefined\r\n if (visibility) return <Fragment key={config.key.toString() + index} />\r\n return (\r\n <Fragment key={config.key.toString() + index}>\r\n <Grid item xs={12} {...config.reponsives}>\r\n {this.renderFormFieldElement(config)}\r\n </Grid>\r\n </Fragment>\r\n )\r\n })}\r\n </Grid>\r\n {params?.contentAfter}\r\n {slots?.contentAfter && slots?.contentAfter}\r\n </ContentWrap>\r\n )\r\n }\r\n\r\n renderFormFieldElement = (config: IFormGridLayoutConfig<T>) => {\r\n const { slots, ...otherProps } = this.props\r\n const ElementComponent = config.inputElement ?? InputBaseInstance\r\n const dValue = otherProps.data?.[config.key] ?? config?.defaultValue\r\n const disabled: boolean | undefined = this.configMerged.inputDisabled?.[config.key] ? true : undefined\r\n return FormBaseInstance.contextMapping((context) => (\r\n <ElementComponent\r\n data={this.props.data}\r\n onBlur={context.onBlur}\r\n messageErrors={context.messageErrors}\r\n name={config.key}\r\n label={config.label}\r\n placeholder={config.placeholder}\r\n disabled={disabled}\r\n defaultValue={dValue}\r\n />\r\n ))\r\n }\r\n\r\n loading = () => this.setState({ loadding: true })\r\n\r\n unloading = () => this.setState({ loadding: false })\r\n\r\n componentWillUnmount(): void {\r\n this.abortController?.abort()\r\n }\r\n\r\n onSubmit = async (value: Partial<T>, close?: () => void) => {\r\n const { slots } = this.props\r\n const mapping = this.props.slots?.submitMapping ?? params.submitMapping ?? this.submitMapping\r\n const data = mapping(value, this.props.data)\r\n try {\r\n this.loading()\r\n this.abortController?.abort()\r\n this.abortController = new AbortController()\r\n await this.props.onSubmit(data, this.abortController.signal)\r\n if (!slots?.closeState || slots.closeState.Success !== false) {\r\n close && close()\r\n this.props.onClose && this.props.onClose()\r\n }\r\n } catch (error) {\r\n if (slots?.closeState && slots.closeState.Fail === true) {\r\n close && close()\r\n this.props.onClose && this.props.onClose()\r\n }\r\n if (this.props.onError) this.props.onError(error)\r\n } finally {\r\n this.unloading()\r\n }\r\n }\r\n\r\n submitMapping: SubmitMappingEvent<T> = (value) => value\r\n\r\n getSxProps = (): SxProps<Theme> => {\r\n const isLoading = this.state.loadding\r\n return { ...this.props.sx, opacity: isLoading ? 0.7 : 1, pointerEvents: isLoading ? 'none' : 'auto' }\r\n }\r\n }\r\n return FormGridLayout\r\n}\r\n\r\nexport default CreateFormGridLayout\r\n"],"names":["CreateFormGridLayout","params","FormBaseInstance","CreateFormBase","BottomBarInstance","CreateFormBottomBar","InputBaseInstance","CreateInput","maxLength","FormGridLayout","props","_this","_classCallCheck","_callSuper","_defineProperty","_this$props","slots","_jsxs","ContentWrap","_objectSpread","contentProps","children","contentBefore","_jsx","Grid","container","spacing","configs","map","config","index","_this$configMerged$in","visibility","configMerged","inputVisibility","key","undefined","Fragment","item","xs","reponsives","renderFormFieldElement","toString","contentAfter","_config$inputElement","_otherProps$data$conf","_otherProps$data","_this$configMerged$in2","_this$props2","otherProps","_objectWithoutProperties","_excluded","ElementComponent","inputElement","dValue","data","defaultValue","disabled","inputDisabled","contextMapping","context","onBlur","messageErrors","name","label","placeholder","setState","loadding","_ref","_asyncToGenerator","_regeneratorRuntime","mark","_callee","value","close","_ref2","_this$props$slots$sub","_this$props$slots","mapping","_this$abortController","wrap","_context","prev","next","submitMapping","loading","abortController","abort","AbortController","onSubmit","signal","closeState","Success","onClose","t0","Fail","onError","unloading","finish","stop","_x","_x2","apply","this","arguments","isLoading","state","sx","opacity","pointerEvents","_inherits","Component","_createClass","get","_this$props$slots$inp","_this$props$slots2","_this$props$slots$inp2","_this$props$slots3","_ref3","_params$action","_this$props$slots4","_this2","BottomBar","action","mapGlobalModalContext","_ref4","Form","validate","v","getSxProps","renderContent","_this2$props$slots","before","actionBefore","_this$abortController2"],"mappings":"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"}
|
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BoxProps, ButtonProps } from '@mui/material';
|
|
3
|
-
type
|
|
3
|
+
export type IMultiSelectDropdownFilterLogic = 'and' | 'or';
|
|
4
4
|
export interface IMultiSelectDropdownFilter {
|
|
5
|
-
|
|
5
|
+
items: string[];
|
|
6
|
+
logic?: IMultiSelectDropdownFilterLogic;
|
|
6
7
|
}
|
|
8
|
+
export type IMultiSelectDropdownChange = (value: IMultiSelectDropdownFilter) => void;
|
|
7
9
|
export interface IMultiSelectDropdownSlots {
|
|
8
10
|
buttonProps?: ButtonProps;
|
|
9
11
|
contentPorps?: BoxProps;
|
|
12
|
+
defaultLogic?: IMultiSelectDropdownFilterLogic;
|
|
10
13
|
}
|
|
11
14
|
export interface IMultiSelectDropdownProps {
|
|
12
15
|
options?: string[];
|
|
13
|
-
value?:
|
|
14
|
-
onChange?:
|
|
16
|
+
value?: IMultiSelectDropdownFilter;
|
|
17
|
+
onChange?: IMultiSelectDropdownChange;
|
|
15
18
|
slots?: IMultiSelectDropdownSlots;
|
|
16
19
|
}
|
|
17
20
|
export interface IMultiSelectDropdownParams extends IMultiSelectDropdownSlots {
|