npm - dinocollab-core - Versions diffs - 2.1.28 → 2.1.29 - Mend

dinocollab-core 2.1.28 → 2.1.29

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.

Files changed (191) hide show

package/dist/src/data-view/ui.units.js.map CHANGED Viewed

	@@ -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 RichTooltip, { HelpOutlinePulseIcon } from '../components/rich-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 <RichTooltip\r\n panel={{\r\n title: props.title ?? 'The search includes',\r\n content: props.renderContent ? props.renderContent() : <HelpTooltipContent items={props.items ?? []} />\r\n }}\r\n >\r\n <HelpOutlinePulseIcon fontSize='small' />\r\n </RichTooltip>\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\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)(({ theme }) => ({\r\n height: 'var(--filter-bar-height, 40px)',\r\n padding: '0 16px',\r\n backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.paper : theme.palette.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: theme.palette.mode === 'dark' ? theme.palette.grey[800] : 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 sx={{ '.MuiInputBase-root': { minHeight: '42px' } }}\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 sx={{ '.MuiInputBase-root': { minHeight: '42px' } }}\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","RichTooltip","panel","content","renderContent","HelpOutlinePulseIcon","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","_ref2","theme","height","palette","mode","background","paper","grey","border","PanelNotFound","_ref3","Box","textAlign","FormContent","_ref4","afterTopBar","FormContentWrapper","concat","overflow","alignItems","gap","common","white","MenuWithTypeString","_props$fieldConfig$la","_props$fieldConfig","_props$fieldConfig2","_props$validationResu","_props$validationResu2","name","TextField","autoFocus","error","validationResult","hasError","helperText","message","minHeight","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","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 RichTooltip, { HelpOutlinePulseIcon } from '../components/rich-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 <RichTooltip\r\n panel={{\r\n title: props.title ?? 'The search includes',\r\n content: props.renderContent ? props.renderContent() : <HelpTooltipContent items={props.items ?? []} />\r\n }}\r\n >\r\n <HelpOutlinePulseIcon fontSize='small' />\r\n </RichTooltip>\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\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)(({ theme }) => ({\r\n height: 'var(--filter-bar-height, 40px)',\r\n padding: '0 16px',\r\n backgroundColor: theme.palette.mode === 'dark' ? theme.palette.background.paper : theme.palette.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: theme.palette.mode === 'dark' ? theme.palette.grey[800] : 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 sx={{ '.MuiInputBase-root': { minHeight: '42px' } }}\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 sx={{ '.MuiInputBase-root': { minHeight: '42px' } }}\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","RichTooltip","panel","content","renderContent","HelpOutlinePulseIcon","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","_ref2","theme","height","palette","mode","background","paper","grey","border","PanelNotFound","_ref3","Box","textAlign","FormContent","_ref4","afterTopBar","FormContentWrapper","concat","overflow","alignItems","gap","common","white","MenuWithTypeString","_props$fieldConfig$la","_props$fieldConfig","_props$fieldConfig2","_props$validationResu","_props$validationResu2","name","TextField","autoFocus","error","validationResult","hasError","helperText","message","minHeight","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","top","right","transform"],"mappings":"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"}

package/dist/src/data-view/view-mode.content.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{inherits as r,createClass as o,objectWithoutProperties as e,objectSpread2 as t,classCallCheck as i,callSuper as n,defineProperty as a}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as s}from"react/jsx-runtime";import{memo as l,Component as u}from"react";import{styled as d,colors as c,Box as p,Grid as m,Stack as f,Typography as h}from"@mui/material";import{DataGrid as g}from"@mui/x-data-grid";var b=["Element"],v=["Element"],x=function(){return s(h,{variant:"subtitle1",color:"textSecondary",children:"No items to display"})};function y(){return l(function(){function a(r){var o;return i(this,a),(o=n(this,a,[r])).ElementComponent=r.configs.Element||x,o}return r(a,u),o(a,[{key:"shouldComponentUpdate",value:function(r){var o=this.props.configs,t=o.Element,i=e(o,b),n=r.configs,a=n.Element,s=e(n,v);t!==a&&(this.ElementComponent=r.configs.Element||x);var l=JSON.stringify(i)!==JSON.stringify(s);return JSON.stringify(this.props.data)!==JSON.stringify(r.data)||l}},{key:"render",value:function(){var r=this.ElementComponent,o=this.props,e=o.data,i=o.configs,n=i.size||{xs:12,sm:6,md:4,lg:3};return s(p,{sx:this.props.autoHeight?{}:{height:"100%",overflow:"auto"},children:s(m,t(t({container:!0,spacing:i.spacing||0},i.wrapProps),{},{style:{height:"100%"},children:e.map((function(o,e){var a=i.getElementId?i.getElementId(o):e.toString(),l=i.elementWrapPropsGetter?i.elementWrapPropsGetter({data:o,index:e}):i.elementWrapProps||{};return s(m,t(t(t({item:!0},n),l),{},{children:s(r,{data:o,index:e})}),a)}))}))})}}])}())}function S(){var e=function(r){var o,e=null!==(o=null==r?void 0:r.columns)&&void 0!==o?o:{};return Object.keys(e).map((function(r){var o=e[r];return t({field:String(r),sortable:!1},o)}))};return l(function(){function l(r){var o;return i(this,l),o=n(this,l,[r]),a(o,"columns",[]),o.columns=e(r.configs),o}return r(l,u),o(l,[{key:"shouldComponentUpdate",value:function(r){var o=JSON.stringify(this.props.value)!==JSON.stringify(r.value),t=JSON.stringify(this.props.configs)!==JSON.stringify(r.configs);return t&&(this.columns=e()),o||t}},{key:"render",value:function(){var r,o,e,i,n;if(this.props.configs&&Object.keys(null!==(r=null===(o=this.props.configs)||void 0===o?void 0:o.columns)&&void 0!==r?r:{}).length>0){var a=this.props.value;return s(f,{sx:{flex:1,width:"100%",height:"100%",minHeight:"100px"},children:s(C,t({hideFooter:!0,disableColumnFilter:!0,disableColumnMenu:!0,getRowId:null===(e=this.props.configs)||void 0===e?void 0:e.getRowId,rows:a,rowHeight:null===(i=this.props.configs)||void 0===i?void 0:i.rowHeight,columnHeaderHeight:48,getRowSpacing:function(r){return{top:r.isFirstVisible?8:4,bottom:4}},columns:this.columns,disableColumnSelector:!0,autoHeight:this.props.autoHeight},null===(n=this.props.slots)||void 0===n?void 0:n.dataGridProps))})}}}])}())}var C=d(g,{shouldForwardProp:function(r){return"autoHeight"!==r}})((function(r){var o=r.theme,e=r.ownerState,t=null==e?void 0:e.autoHeight;return{height:t?"auto":"100%",width:"100%",display:t?"block":"flex",flexDirection:t?void 0:"column","*":{boxSizing:"border-box"},"--custom-border-color":"rgba(145, 158, 171, 0.16)","--custom-bg-color":o.palette.background.paper,"--DataGrid-rowBorderColor":"transparent",borderColor:"transparent",".MuiDataGrid-cell":{"--rowBorderColor":"transparent",display:"flex",alignItems:"center"},".MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus":{outline:"none"},".MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within":{outline:"none"},".MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible":{outline:"none"},".MuiDataGrid-columnHeaders":{backgroundColor:c.grey[50],borderColor:"transparent",borderRadius:"6px"},".MuiDataGrid-virtualScroller":t?{minHeight:0}:{flex:1,minHeight:0},".MuiDataGrid-virtualScrollerContent":{".MuiDataGrid-row":{borderRadius:"6px",border:"none",transition:"all 0.2s ease",backgroundColor:"var(--custom-bg-color)",".MuiDataGrid-cell":{backgroundColor:"var(--custom-bg-color)",border:"none",borderTop:"1px dashed var(--custom-border-color)",borderBottom:"1px dashed var(--custom-border-color)","&:first-of-type":{borderLeft:"1px dashed var(--custom-border-color)",borderRadius:"6px 0 0 6px"},"&:last-of-type":{borderRight:"1px dashed var(--custom-border-color)",borderRadius:"0 6px 6px 0"}},"&:hover":{"--custom-border-color":o.palette.divider,"--custom-bg-color":c.grey[50],transform:"translateY(-1px)",boxShadow:"rgba(99, 99, 99, 0.1) 0px 2px 8px 0px",".MuiDataGrid-cell":{borderTopStyle:"solid",borderBottomStyle:"solid","&:first-of-type":{borderLeftStyle:"solid"},"&:last-of-type":{borderRightStyle:"solid"}}}}}}}));export{S as createViewModeList,y as createViewModeModule};
+import{inherits as r,createClass as o,objectWithoutProperties as e,objectSpread2 as t,classCallCheck as i,callSuper as n,defineProperty as a}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as s}from"react/jsx-runtime";import{memo as l,Component as u}from"react";import{styled as d,colors as c,Box as p,Grid as m,Stack as f,Typography as h}from"@mui/material";import{DataGrid as g}from"@mui/x-data-grid";var b=["Element"],v=["Element"],x=function(){return s(h,{variant:"subtitle1",color:"textSecondary",children:"No items to display"})};function y(){return l(function(){function a(r){var o;return i(this,a),(o=n(this,a,[r])).ElementComponent=r.configs.Element||x,o}return r(a,u),o(a,[{key:"shouldComponentUpdate",value:function(r){var o=this.props.configs,t=o.Element,i=e(o,b),n=r.configs,a=n.Element,s=e(n,v);t!==a&&(this.ElementComponent=r.configs.Element||x);var l=JSON.stringify(i)!==JSON.stringify(s);return JSON.stringify(this.props.data)!==JSON.stringify(r.data)||l}},{key:"render",value:function(){var r=this.ElementComponent,o=this.props,e=o.data,i=o.configs,n=i.size||{xs:12,sm:6,md:4,lg:3};return s(p,{sx:this.props.autoHeight?{}:{height:"100%",overflow:"auto"},children:s(m,t(t({container:!0,spacing:i.spacing||0},i.wrapProps),{},{style:{height:"100%"},children:e.map(function(o,e){var a=i.getElementId?i.getElementId(o):e.toString(),l=i.elementWrapPropsGetter?i.elementWrapPropsGetter({data:o,index:e}):i.elementWrapProps||{};return s(m,t(t(t({item:!0},n),l),{},{children:s(r,{data:o,index:e})}),a)})}))})}}])}())}function S(){var e=function(r){var o,e=null!==(o=null==r?void 0:r.columns)&&void 0!==o?o:{};return Object.keys(e).map(function(r){var o=e[r];return t({field:String(r),sortable:!1},o)})};return l(function(){function l(r){var o;return i(this,l),o=n(this,l,[r]),a(o,"columns",[]),o.columns=e(r.configs),o}return r(l,u),o(l,[{key:"shouldComponentUpdate",value:function(r){var o=JSON.stringify(this.props.value)!==JSON.stringify(r.value),t=JSON.stringify(this.props.configs)!==JSON.stringify(r.configs);return t&&(this.columns=e()),o||t}},{key:"render",value:function(){var r,o,e,i,n;if(this.props.configs&&Object.keys(null!==(r=null===(o=this.props.configs)||void 0===o?void 0:o.columns)&&void 0!==r?r:{}).length>0){var a=this.props.value;return s(f,{sx:{flex:1,width:"100%",height:"100%",minHeight:"100px"},children:s(C,t({hideFooter:!0,disableColumnFilter:!0,disableColumnMenu:!0,getRowId:null===(e=this.props.configs)||void 0===e?void 0:e.getRowId,rows:a,rowHeight:null===(i=this.props.configs)||void 0===i?void 0:i.rowHeight,columnHeaderHeight:48,getRowSpacing:function(r){return{top:r.isFirstVisible?8:4,bottom:4}},columns:this.columns,disableColumnSelector:!0,autoHeight:this.props.autoHeight},null===(n=this.props.slots)||void 0===n?void 0:n.dataGridProps))})}}}])}())}var C=d(g,{shouldForwardProp:function(r){return"autoHeight"!==r}})(function(r){var o=r.theme,e=r.ownerState,t=null==e?void 0:e.autoHeight;return{height:t?"auto":"100%",width:"100%",display:t?"block":"flex",flexDirection:t?void 0:"column","*":{boxSizing:"border-box"},"--custom-border-color":"rgba(145, 158, 171, 0.16)","--custom-bg-color":o.palette.background.paper,"--DataGrid-rowBorderColor":"transparent",borderColor:"transparent",".MuiDataGrid-cell":{"--rowBorderColor":"transparent",display:"flex",alignItems:"center"},".MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus":{outline:"none"},".MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within":{outline:"none"},".MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible":{outline:"none"},".MuiDataGrid-columnHeaders":{backgroundColor:c.grey[50],borderColor:"transparent",borderRadius:"6px"},".MuiDataGrid-virtualScroller":t?{minHeight:0}:{flex:1,minHeight:0},".MuiDataGrid-virtualScrollerContent":{".MuiDataGrid-row":{borderRadius:"6px",border:"none",transition:"all 0.2s ease",backgroundColor:"var(--custom-bg-color)",".MuiDataGrid-cell":{backgroundColor:"var(--custom-bg-color)",border:"none",borderTop:"1px dashed var(--custom-border-color)",borderBottom:"1px dashed var(--custom-border-color)","&:first-of-type":{borderLeft:"1px dashed var(--custom-border-color)",borderRadius:"6px 0 0 6px"},"&:last-of-type":{borderRight:"1px dashed var(--custom-border-color)",borderRadius:"0 6px 6px 0"}},"&:hover":{"--custom-border-color":o.palette.divider,"--custom-bg-color":c.grey[50],transform:"translateY(-1px)",boxShadow:"rgba(99, 99, 99, 0.1) 0px 2px 8px 0px",".MuiDataGrid-cell":{borderTopStyle:"solid",borderBottomStyle:"solid","&:first-of-type":{borderLeftStyle:"solid"},"&:last-of-type":{borderRightStyle:"solid"}}}}}}});export{S as createViewModeList,y as createViewModeModule};
 //# sourceMappingURL=view-mode.content.js.map

package/dist/src/data-view/view-mode.content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"view-mode.content.js","sources":["../../../src/data-view/view-mode.content.tsx"],"sourcesContent":["import { Component, ComponentType, FC, memo } from 'react'\r\nimport { Typography, Grid, styled, colors, Stack, Box } from '@mui/material'\r\nimport { DataGrid, DataGridProps, GridColDef, GridRowIdGetter, GridValidRowModel } from '@mui/x-data-grid'\r\nimport { GridColsDef, IViewModeListConfig, IViewModeModuleConfig, IViewModeValidModel } from './view-mode.types'\r\n\r\n//#region Mode Module\r\nconst EmptyModule: FC = () => (\r\n <Typography variant='subtitle1' color='textSecondary'>\r\n No items to display\r\n </Typography>\r\n)\r\n\r\nexport interface IViewModeModuleProps<T extends IViewModeValidModel> {\r\n data: T[]\r\n configs: IViewModeModuleConfig<T>\r\n autoHeight?: boolean\r\n}\r\n\r\nexport function createViewModeModule<T extends IViewModeValidModel>(): ComponentType<IViewModeModuleProps<T>> {\r\n class ViewModeModule extends Component<IViewModeModuleProps<T>> {\r\n private ElementComponent\r\n constructor(props: IViewModeModuleProps<T>) {\r\n super(props)\r\n this.ElementComponent = props.configs.Element \|\| EmptyModule\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IViewModeModuleProps<T>>): boolean {\r\n const { Element: currentElement, ...currentConfig } = this.props.configs\r\n const { Element: nextElement, ...nextConfigs } = nextProps.configs\r\n const checkElementDiff = currentElement !== nextElement\r\n if (checkElementDiff) {\r\n this.ElementComponent = nextProps.configs.Element \|\| EmptyModule\r\n }\r\n\r\n const checkConfigsDiff = JSON.stringify(currentConfig) !== JSON.stringify(nextConfigs)\r\n const checkDataDiff = JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)\r\n return checkDataDiff \|\| checkConfigsDiff\r\n }\r\n\r\n render() {\r\n const { ElementComponent } = this\r\n const { data, configs } = this.props\r\n const size = configs.size \|\| { xs: 12, sm: 6, md: 4, lg: 3 }\r\n return (\r\n <Box sx={this.props.autoHeight ? {} : { height: '100%', overflow: 'auto' }}>\r\n <Grid container spacing={configs.spacing \|\| 0} {...configs.wrapProps} style={{ height: '100%' }}>\r\n {data.map((item, index) => {\r\n const key = configs.getElementId ? configs.getElementId(item) : index.toString()\r\n const itemProps = configs.elementWrapPropsGetter\r\n ? configs.elementWrapPropsGetter({ data: item, index })\r\n : configs.elementWrapProps \|\| {}\r\n return (\r\n <Grid item key={key} {...size} {...itemProps}>\r\n <ElementComponent data={item} index={index} />\r\n </Grid>\r\n )\r\n })}\r\n </Grid>\r\n </Box>\r\n )\r\n }\r\n }\r\n\r\n return memo(ViewModeModule)\r\n}\r\n//#endregion\r\n\r\n//#region View Mode List\r\nexport interface IViewModeListProps<T extends IViewModeValidModel> {\r\n value: T[]\r\n configs: IViewModeListConfig<T>\r\n autoHeight?: boolean\r\n slots?: {\r\n dataGridProps?: Partial<Omit<DataGridProps, 'columns' \| 'rows'>>\r\n }\r\n}\r\n\r\nexport function createViewModeList<T extends IViewModeValidModel>(): ComponentType<IViewModeListProps<T>> {\r\n const genarateColumns = (configs?: IViewModeListConfig<T>): GridColDef[] => {\r\n const cols: GridColsDef<T> = configs?.columns ?? {}\r\n const fields = Object.keys(cols) as (keyof T)[]\r\n return fields.map((field) => {\r\n const config = cols[field]\r\n return { field: String(field), sortable: false, ...config }\r\n })\r\n }\r\n\r\n class ViewModeList extends Component<IViewModeListProps<T>> {\r\n private columns: GridColDef[] = []\r\n constructor(props: IViewModeListProps<T>) {\r\n super(props)\r\n this.columns = genarateColumns(props.configs)\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IViewModeListProps<T>>): boolean {\r\n const checkValueDiff = JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)\r\n const checkListConfigsDiff = JSON.stringify(this.props.configs) !== JSON.stringify(nextProps.configs)\r\n if (checkListConfigsDiff) {\r\n this.columns = genarateColumns()\r\n }\r\n return checkValueDiff \|\| checkListConfigsDiff\r\n }\r\n\r\n render() {\r\n const isRender = this.props.configs && Object.keys(this.props.configs?.columns ?? {}).length > 0\r\n if (!isRender) {\r\n return\r\n }\r\n const rows = this.props.value as GridValidRowModel[]\r\n return (\r\n <Stack sx={{ flex: 1, width: '100%', height: '100%', minHeight: '100px' }}>\r\n <DataGridCustom\r\n hideFooter\r\n // disableColumnSorting\r\n disableColumnFilter\r\n disableColumnMenu\r\n getRowId={this.props.configs?.getRowId as GridRowIdGetter<GridValidRowModel>}\r\n rows={rows}\r\n rowHeight={this.props.configs?.rowHeight}\r\n columnHeaderHeight={48}\r\n getRowSpacing={({ isFirstVisible }) => ({ top: isFirstVisible ? 8 : 4, bottom: 4 })}\r\n columns={this.columns}\r\n disableColumnSelector\r\n autoHeight={this.props.autoHeight}\r\n {...this.props.slots?.dataGridProps}\r\n />\r\n </Stack>\r\n )\r\n }\r\n }\r\n\r\n return memo(ViewModeList)\r\n}\r\n\r\nconst DataGridCustom = styled(DataGrid, { shouldForwardProp: (prop) => prop !== 'autoHeight' })<{\r\n autoHeight?: boolean\r\n}>((params: any) => {\r\n const { theme, ownerState } = params as any\r\n const autoHeight = ownerState?.autoHeight\r\n return {\r\n // When `autoHeight` is true let the grid size to its content, otherwise fill parent.\r\n height: autoHeight ? 'auto' : '100%',\r\n width: '100%',\r\n display: autoHeight ? 'block' : 'flex',\r\n flexDirection: autoHeight ? undefined : 'column',\r\n '*': {\r\n boxSizing: 'border-box'\r\n },\r\n '--custom-border-color': 'rgba(145, 158, 171, 0.16)',\r\n '--custom-bg-color': theme.palette.background.paper,\r\n '--DataGrid-rowBorderColor': 'transparent',\r\n borderColor: 'transparent',\r\n '.MuiDataGrid-cell': {\r\n '--rowBorderColor': 'transparent',\r\n display: 'flex',\r\n alignItems: 'center'\r\n },\r\n '.MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus': {\r\n outline: 'none'\r\n },\r\n '.MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within': {\r\n outline: 'none'\r\n },\r\n '.MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible': {\r\n outline: 'none'\r\n },\r\n '.MuiDataGrid-columnHeaders': {\r\n backgroundColor: colors.grey[50],\r\n borderColor: 'transparent',\r\n borderRadius: '6px'\r\n },\r\n '.MuiDataGrid-virtualScroller': autoHeight ? { minHeight: 0 } : { flex: 1, minHeight: 0 },\r\n '.MuiDataGrid-virtualScrollerContent': {\r\n '.MuiDataGrid-row': {\r\n borderRadius: '6px',\r\n border: 'none',\r\n transition: 'all 0.2s ease',\r\n backgroundColor: 'var(--custom-bg-color)',\r\n '.MuiDataGrid-cell': {\r\n backgroundColor: 'var(--custom-bg-color)',\r\n border: 'none',\r\n borderTop: '1px dashed var(--custom-border-color)',\r\n borderBottom: '1px dashed var(--custom-border-color)',\r\n '&:first-of-type': {\r\n borderLeft: '1px dashed var(--custom-border-color)',\r\n borderRadius: '6px 0 0 6px'\r\n },\r\n '&:last-of-type': {\r\n borderRight: '1px dashed var(--custom-border-color)',\r\n borderRadius: '0 6px 6px 0'\r\n }\r\n },\r\n '&:hover': {\r\n '--custom-border-color': theme.palette.divider,\r\n '--custom-bg-color': colors.grey[50],\r\n transform: 'translateY(-1px)',\r\n boxShadow: 'rgba(99, 99, 99, 0.1) 0px 2px 8px 0px',\r\n '.MuiDataGrid-cell': {\r\n borderTopStyle: 'solid',\r\n borderBottomStyle: 'solid',\r\n '&:first-of-type': {\r\n borderLeftStyle: 'solid'\r\n },\r\n '&:last-of-type': {\r\n borderRightStyle: 'solid'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n})\r\n//#endregion\r\n"],"names":["EmptyModule","_jsx","Typography","variant","color","children","createViewModeModule","memo","ViewModeModule","props","_this","_classCallCheck","_callSuper","ElementComponent","configs","Element","_inherits","Component","_createClass","key","value","nextProps","_this$props$configs","this","currentElement","currentConfig","_objectWithoutProperties","_excluded","_nextProps$configs","nextElement","nextConfigs","_excluded2","checkConfigsDiff","JSON","stringify","data","_this$props","size","xs","sm","md","lg","Box","sx","autoHeight","height","overflow","Grid","_objectSpread","container","spacing","wrapProps","style","map","item","index","getElementId","toString","itemProps","elementWrapPropsGetter","elementWrapProps","createViewModeList","genarateColumns","_configs$columns","cols","columns","Object","keys","field","config","String","sortable","ViewModeList","_this2","_defineProperty","checkValueDiff","checkListConfigsDiff","_this$props$configs$c","_this$props$configs2","_this$props$configs3","_this$props$configs4","_this$props$slots","length","rows","Stack","flex","width","minHeight","DataGridCustom","hideFooter","disableColumnFilter","disableColumnMenu","getRowId","rowHeight","columnHeaderHeight","getRowSpacing","_ref","top","isFirstVisible","bottom","disableColumnSelector","slots","dataGridProps","styled","DataGrid","shouldForwardProp","prop","params","theme","ownerState","display","flexDirection","undefined","boxSizing","palette","background","paper","borderColor","alignItems","outline","backgroundColor","colors","grey","borderRadius","border","transition","borderTop","borderBottom","borderLeft","borderRight","divider","transform","boxShadow","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle"],"mappings":"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"}
1	+ {"version":3,"file":"view-mode.content.js","sources":["../../../src/data-view/view-mode.content.tsx"],"sourcesContent":["import { Component, ComponentType, FC, memo } from 'react'\r\nimport { Typography, Grid, styled, colors, Stack, Box } from '@mui/material'\r\nimport { DataGrid, DataGridProps, GridColDef, GridRowIdGetter, GridValidRowModel } from '@mui/x-data-grid'\r\nimport { GridColsDef, IViewModeListConfig, IViewModeModuleConfig, IViewModeValidModel } from './view-mode.types'\r\n\r\n//#region Mode Module\r\nconst EmptyModule: FC = () => (\r\n <Typography variant='subtitle1' color='textSecondary'>\r\n No items to display\r\n </Typography>\r\n)\r\n\r\nexport interface IViewModeModuleProps<T extends IViewModeValidModel> {\r\n data: T[]\r\n configs: IViewModeModuleConfig<T>\r\n autoHeight?: boolean\r\n}\r\n\r\nexport function createViewModeModule<T extends IViewModeValidModel>(): ComponentType<IViewModeModuleProps<T>> {\r\n class ViewModeModule extends Component<IViewModeModuleProps<T>> {\r\n private ElementComponent\r\n constructor(props: IViewModeModuleProps<T>) {\r\n super(props)\r\n this.ElementComponent = props.configs.Element \|\| EmptyModule\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IViewModeModuleProps<T>>): boolean {\r\n const { Element: currentElement, ...currentConfig } = this.props.configs\r\n const { Element: nextElement, ...nextConfigs } = nextProps.configs\r\n const checkElementDiff = currentElement !== nextElement\r\n if (checkElementDiff) {\r\n this.ElementComponent = nextProps.configs.Element \|\| EmptyModule\r\n }\r\n\r\n const checkConfigsDiff = JSON.stringify(currentConfig) !== JSON.stringify(nextConfigs)\r\n const checkDataDiff = JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)\r\n return checkDataDiff \|\| checkConfigsDiff\r\n }\r\n\r\n render() {\r\n const { ElementComponent } = this\r\n const { data, configs } = this.props\r\n const size = configs.size \|\| { xs: 12, sm: 6, md: 4, lg: 3 }\r\n return (\r\n <Box sx={this.props.autoHeight ? {} : { height: '100%', overflow: 'auto' }}>\r\n <Grid container spacing={configs.spacing \|\| 0} {...configs.wrapProps} style={{ height: '100%' }}>\r\n {data.map((item, index) => {\r\n const key = configs.getElementId ? configs.getElementId(item) : index.toString()\r\n const itemProps = configs.elementWrapPropsGetter\r\n ? configs.elementWrapPropsGetter({ data: item, index })\r\n : configs.elementWrapProps \|\| {}\r\n return (\r\n <Grid item key={key} {...size} {...itemProps}>\r\n <ElementComponent data={item} index={index} />\r\n </Grid>\r\n )\r\n })}\r\n </Grid>\r\n </Box>\r\n )\r\n }\r\n }\r\n\r\n return memo(ViewModeModule)\r\n}\r\n//#endregion\r\n\r\n//#region View Mode List\r\nexport interface IViewModeListProps<T extends IViewModeValidModel> {\r\n value: T[]\r\n configs: IViewModeListConfig<T>\r\n autoHeight?: boolean\r\n slots?: {\r\n dataGridProps?: Partial<Omit<DataGridProps, 'columns' \| 'rows'>>\r\n }\r\n}\r\n\r\nexport function createViewModeList<T extends IViewModeValidModel>(): ComponentType<IViewModeListProps<T>> {\r\n const genarateColumns = (configs?: IViewModeListConfig<T>): GridColDef[] => {\r\n const cols: GridColsDef<T> = configs?.columns ?? {}\r\n const fields = Object.keys(cols) as (keyof T)[]\r\n return fields.map((field) => {\r\n const config = cols[field]\r\n return { field: String(field), sortable: false, ...config }\r\n })\r\n }\r\n\r\n class ViewModeList extends Component<IViewModeListProps<T>> {\r\n private columns: GridColDef[] = []\r\n constructor(props: IViewModeListProps<T>) {\r\n super(props)\r\n this.columns = genarateColumns(props.configs)\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IViewModeListProps<T>>): boolean {\r\n const checkValueDiff = JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)\r\n const checkListConfigsDiff = JSON.stringify(this.props.configs) !== JSON.stringify(nextProps.configs)\r\n if (checkListConfigsDiff) {\r\n this.columns = genarateColumns()\r\n }\r\n return checkValueDiff \|\| checkListConfigsDiff\r\n }\r\n\r\n render() {\r\n const isRender = this.props.configs && Object.keys(this.props.configs?.columns ?? {}).length > 0\r\n if (!isRender) {\r\n return\r\n }\r\n const rows = this.props.value as GridValidRowModel[]\r\n return (\r\n <Stack sx={{ flex: 1, width: '100%', height: '100%', minHeight: '100px' }}>\r\n <DataGridCustom\r\n hideFooter\r\n // disableColumnSorting\r\n disableColumnFilter\r\n disableColumnMenu\r\n getRowId={this.props.configs?.getRowId as GridRowIdGetter<GridValidRowModel>}\r\n rows={rows}\r\n rowHeight={this.props.configs?.rowHeight}\r\n columnHeaderHeight={48}\r\n getRowSpacing={({ isFirstVisible }) => ({ top: isFirstVisible ? 8 : 4, bottom: 4 })}\r\n columns={this.columns}\r\n disableColumnSelector\r\n autoHeight={this.props.autoHeight}\r\n {...this.props.slots?.dataGridProps}\r\n />\r\n </Stack>\r\n )\r\n }\r\n }\r\n\r\n return memo(ViewModeList)\r\n}\r\n\r\nconst DataGridCustom = styled(DataGrid, { shouldForwardProp: (prop) => prop !== 'autoHeight' })<{\r\n autoHeight?: boolean\r\n}>((params: any) => {\r\n const { theme, ownerState } = params as any\r\n const autoHeight = ownerState?.autoHeight\r\n return {\r\n // When `autoHeight` is true let the grid size to its content, otherwise fill parent.\r\n height: autoHeight ? 'auto' : '100%',\r\n width: '100%',\r\n display: autoHeight ? 'block' : 'flex',\r\n flexDirection: autoHeight ? undefined : 'column',\r\n '*': {\r\n boxSizing: 'border-box'\r\n },\r\n '--custom-border-color': 'rgba(145, 158, 171, 0.16)',\r\n '--custom-bg-color': theme.palette.background.paper,\r\n '--DataGrid-rowBorderColor': 'transparent',\r\n borderColor: 'transparent',\r\n '.MuiDataGrid-cell': {\r\n '--rowBorderColor': 'transparent',\r\n display: 'flex',\r\n alignItems: 'center'\r\n },\r\n '.MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus': {\r\n outline: 'none'\r\n },\r\n '.MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within': {\r\n outline: 'none'\r\n },\r\n '.MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible': {\r\n outline: 'none'\r\n },\r\n '.MuiDataGrid-columnHeaders': {\r\n backgroundColor: colors.grey[50],\r\n borderColor: 'transparent',\r\n borderRadius: '6px'\r\n },\r\n '.MuiDataGrid-virtualScroller': autoHeight ? { minHeight: 0 } : { flex: 1, minHeight: 0 },\r\n '.MuiDataGrid-virtualScrollerContent': {\r\n '.MuiDataGrid-row': {\r\n borderRadius: '6px',\r\n border: 'none',\r\n transition: 'all 0.2s ease',\r\n backgroundColor: 'var(--custom-bg-color)',\r\n '.MuiDataGrid-cell': {\r\n backgroundColor: 'var(--custom-bg-color)',\r\n border: 'none',\r\n borderTop: '1px dashed var(--custom-border-color)',\r\n borderBottom: '1px dashed var(--custom-border-color)',\r\n '&:first-of-type': {\r\n borderLeft: '1px dashed var(--custom-border-color)',\r\n borderRadius: '6px 0 0 6px'\r\n },\r\n '&:last-of-type': {\r\n borderRight: '1px dashed var(--custom-border-color)',\r\n borderRadius: '0 6px 6px 0'\r\n }\r\n },\r\n '&:hover': {\r\n '--custom-border-color': theme.palette.divider,\r\n '--custom-bg-color': colors.grey[50],\r\n transform: 'translateY(-1px)',\r\n boxShadow: 'rgba(99, 99, 99, 0.1) 0px 2px 8px 0px',\r\n '.MuiDataGrid-cell': {\r\n borderTopStyle: 'solid',\r\n borderBottomStyle: 'solid',\r\n '&:first-of-type': {\r\n borderLeftStyle: 'solid'\r\n },\r\n '&:last-of-type': {\r\n borderRightStyle: 'solid'\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n})\r\n//#endregion\r\n"],"names":["EmptyModule","_jsx","Typography","variant","color","children","createViewModeModule","memo","ViewModeModule","props","_this","_classCallCheck","_callSuper","ElementComponent","configs","Element","_inherits","Component","_createClass","key","value","nextProps","_this$props$configs","this","currentElement","currentConfig","_objectWithoutProperties","_excluded","_nextProps$configs","nextElement","nextConfigs","_excluded2","checkConfigsDiff","JSON","stringify","data","_this$props","size","xs","sm","md","lg","Box","sx","autoHeight","height","overflow","Grid","_objectSpread","container","spacing","wrapProps","style","map","item","index","getElementId","toString","itemProps","elementWrapPropsGetter","elementWrapProps","createViewModeList","genarateColumns","_configs$columns","cols","columns","Object","keys","field","config","String","sortable","ViewModeList","_this2","_defineProperty","checkValueDiff","checkListConfigsDiff","_this$props$configs$c","_this$props$configs2","_this$props$configs3","_this$props$configs4","_this$props$slots","length","rows","Stack","flex","width","minHeight","DataGridCustom","hideFooter","disableColumnFilter","disableColumnMenu","getRowId","rowHeight","columnHeaderHeight","getRowSpacing","_ref","top","isFirstVisible","bottom","disableColumnSelector","slots","dataGridProps","styled","DataGrid","shouldForwardProp","prop","params","theme","ownerState","display","flexDirection","undefined","boxSizing","palette","background","paper","borderColor","alignItems","outline","backgroundColor","colors","grey","borderRadius","border","transition","borderTop","borderBottom","borderLeft","borderRight","divider","transform","boxShadow","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle"],"mappings":"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"}

package/dist/src/data-view/view-mode.units.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as r,objectSpread2 as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useCallback as n}from"react";import{styled as t,ToggleButtonGroup as i,colors as l,Box as c,Tooltip as d,ToggleButton as s,Typography as p}from"@mui/material";import u from"@mui/icons-material/ViewList";import g from"@mui/icons-material/ViewModule";import{EViewMode as h}from"./view-mode.types.js";var m=h.List,b=[{value:h.Module,icon:e(g,{}),label:"Card Grid"},{value:h.List,icon:e(u,{}),label:"Detailed List"}],f=function(r){var o=r.value,a=r.onChange,t=void 0===a?function(){}:a,i=o&&Object.values(h).includes(o)?o:m,l=n((function(r){null!==r&&r!==i&&t(r)}),[i,t]);return e(y,{size:"small",value:i,exclusive:!0,onChange:function(r,o){return l(o)},children:b.map((function(r){return e(d,{title:r.label,arrow:!0,children:e(s,{size:"small",value:r.value,"aria-label":r.label,sx:{p:"5px"},children:r.icon})},r.value)}))})},v=function(){return f},y=t(i)((function(o){var e=o.theme;return r({flex:"0 0 auto",".MuiToggleButtonGroup-grouped":{"&.Mui-selected":{color:l.common.white,backgroundColor:"var(--color-orange, ".concat(l.blue[600],")"),borderColor:"var(--color-orange, ".concat(l.blue[600],")"),"&.MuiToggleButtonGroup-lastButton":{borderColor:"var(--color-orange, ".concat(l.blue[600],")")},"&:hover":{backgroundColor:"var(--color-orange, ".concat(l.blue[600],")")}}}},e.breakpoints.down("md"),{display:"none"})})),x=function(r){return e(w,o(o({},r),{},{children:a(c,{className:"loading-overlay__content",children:[e(c,{className:"loading-overlay__spinner"}),e(p,{variant:"body2",color:"primary",children:"Loading..."})]})}))},w=t(c)({position:"absolute",top:0,left:0,right:0,bottom:0,bgcolor:"rgba(255, 255, 255, 0.7)",display:"flex",alignItems:"flex-start",justifyContent:"center",zIndex:1e3,paddingTop:"20vh",backdropFilter:"blur(2px)",".loading-overlay__content":{display:"flex",alignItems:"center",gap:"10px"},".loading-overlay__spinner":{width:24,height:24,border:"3px solid",borderColor:l.grey[300],borderTopColor:"var(--color-orange, ".concat(l.blue[600],")"),borderRadius:"50%","@keyframes spin":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}},animation:"spin 1s linear infinite"},".MuiTypography-root":{color:"var(--color-orange, ".concat(l.blue[600],")")}}),C=function(r){var o=r.error;return a(M,{children:[e(p,{variant:"h6",gutterBottom:!0,children:"An error occurred"}),e(p,{variant:"body2",children:o})]})},M=t(c)({marginTop:3,padding:3,border:"1px solid",borderColor:"error.main",borderRadius:1,bgcolor:"error.light",color:"error.contrastText"}),T=t("div")((function(r){var e=r.theme;return{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%","& .no-rows-primary":o({fill:"#3D4751"},e.applyStyles("light",{fill:"#AEB8C2"})),"& .no-rows-secondary":o({fill:"#1D2126"},e.applyStyles("light",{fill:"#E8EAED"}))}})),Z=function(){return a(_,{children:[a(T,{children:[a("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",width:96,viewBox:"0 0 452 257","aria-hidden":!0,focusable:"false",children:[e("path",{className:"no-rows-primary",d:"M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z"}),e("path",{className:"no-rows-primary",d:"M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z"}),e("path",{className:"no-rows-primary",d:"M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z"}),e("path",{className:"no-rows-secondary",d:"M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z"})]}),e(p,{variant:"h6",color:"text.secondary",gutterBottom:!0,children:"No data available"})]}),e(p,{variant:"body2",color:"text.secondary",children:"Try changing the filter or search keyword"})]})},_=t(c)({marginTop:"8px",padding:"24px 12px",textAlign:"center",border:"1px dashed",borderColor:l.grey[400],borderRadius:"6px"}),B=function(){return a(j,{children:[e(p,{variant:"h6",color:"text.primary",sx:{fontWeight:"bold"},children:"Waiting for data..."}),e(p,{variant:"body2",color:"text.secondary",children:"Please wait while we fetch the data."})]})},j=t(c)({marginTop:"8px",padding:"24px 12px",textAlign:"center",border:"1px dashed",borderColor:l.grey[400],borderRadius:"6px"});t(c)({marginTop:3,padding:4,textAlign:"center",border:"1px dashed",borderColor:l.red[700],borderRadius:1});export{C as LoadingError,Z as LoadingNoData,x as LoadingOverlay,B as LoadingWaiting,f as ViewModeButtons,v as createViewModeButtons,m as defaultViewMode};
+import{defineProperty as r,objectSpread2 as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useCallback as n}from"react";import{styled as t,ToggleButtonGroup as i,colors as l,Box as c,Tooltip as d,ToggleButton as s,Typography as p}from"@mui/material";import u from"@mui/icons-material/ViewList";import g from"@mui/icons-material/ViewModule";import{EViewMode as h}from"./view-mode.types.js";var m=h.List,b=[{value:h.Module,icon:e(g,{}),label:"Card Grid"},{value:h.List,icon:e(u,{}),label:"Detailed List"}],f=function(r){var o=r.value,a=r.onChange,t=void 0===a?function(){}:a,i=o&&Object.values(h).includes(o)?o:m,l=n(function(r){null!==r&&r!==i&&t(r)},[i,t]);return e(y,{size:"small",value:i,exclusive:!0,onChange:function(r,o){return l(o)},children:b.map(function(r){return e(d,{title:r.label,arrow:!0,children:e(s,{size:"small",value:r.value,"aria-label":r.label,sx:{p:"5px"},children:r.icon})},r.value)})})},v=function(){return f},y=t(i)(function(o){var e=o.theme;return r({flex:"0 0 auto",".MuiToggleButtonGroup-grouped":{"&.Mui-selected":{color:l.common.white,backgroundColor:"var(--color-orange, ".concat(l.blue[600],")"),borderColor:"var(--color-orange, ".concat(l.blue[600],")"),"&.MuiToggleButtonGroup-lastButton":{borderColor:"var(--color-orange, ".concat(l.blue[600],")")},"&:hover":{backgroundColor:"var(--color-orange, ".concat(l.blue[600],")")}}}},e.breakpoints.down("md"),{display:"none"})}),x=function(r){return e(w,o(o({},r),{},{children:a(c,{className:"loading-overlay__content",children:[e(c,{className:"loading-overlay__spinner"}),e(p,{variant:"body2",color:"primary",children:"Loading..."})]})}))},w=t(c)({position:"absolute",top:0,left:0,right:0,bottom:0,bgcolor:"rgba(255, 255, 255, 0.7)",display:"flex",alignItems:"flex-start",justifyContent:"center",zIndex:1e3,paddingTop:"20vh",backdropFilter:"blur(2px)",".loading-overlay__content":{display:"flex",alignItems:"center",gap:"10px"},".loading-overlay__spinner":{width:24,height:24,border:"3px solid",borderColor:l.grey[300],borderTopColor:"var(--color-orange, ".concat(l.blue[600],")"),borderRadius:"50%","@keyframes spin":{"0%":{transform:"rotate(0deg)"},"100%":{transform:"rotate(360deg)"}},animation:"spin 1s linear infinite"},".MuiTypography-root":{color:"var(--color-orange, ".concat(l.blue[600],")")}}),C=function(r){var o=r.error;return a(M,{children:[e(p,{variant:"h6",gutterBottom:!0,children:"An error occurred"}),e(p,{variant:"body2",children:o})]})},M=t(c)({marginTop:3,padding:3,border:"1px solid",borderColor:"error.main",borderRadius:1,bgcolor:"error.light",color:"error.contrastText"}),T=t("div")(function(r){var e=r.theme;return{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%","& .no-rows-primary":o({fill:"#3D4751"},e.applyStyles("light",{fill:"#AEB8C2"})),"& .no-rows-secondary":o({fill:"#1D2126"},e.applyStyles("light",{fill:"#E8EAED"}))}}),Z=function(){return a(_,{children:[a(T,{children:[a("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",width:96,viewBox:"0 0 452 257","aria-hidden":!0,focusable:"false",children:[e("path",{className:"no-rows-primary",d:"M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z"}),e("path",{className:"no-rows-primary",d:"M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z"}),e("path",{className:"no-rows-primary",d:"M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z"}),e("path",{className:"no-rows-secondary",d:"M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z"})]}),e(p,{variant:"h6",color:"text.secondary",gutterBottom:!0,children:"No data available"})]}),e(p,{variant:"body2",color:"text.secondary",children:"Try changing the filter or search keyword"})]})},_=t(c)({marginTop:"8px",padding:"24px 12px",textAlign:"center",border:"1px dashed",borderColor:l.grey[400],borderRadius:"6px"}),B=function(){return a(j,{children:[e(p,{variant:"h6",color:"text.primary",sx:{fontWeight:"bold"},children:"Waiting for data..."}),e(p,{variant:"body2",color:"text.secondary",children:"Please wait while we fetch the data."})]})},j=t(c)({marginTop:"8px",padding:"24px 12px",textAlign:"center",border:"1px dashed",borderColor:l.grey[400],borderRadius:"6px"});t(c)({marginTop:3,padding:4,textAlign:"center",border:"1px dashed",borderColor:l.red[700],borderRadius:1});export{C as LoadingError,Z as LoadingNoData,x as LoadingOverlay,B as LoadingWaiting,f as ViewModeButtons,v as createViewModeButtons,m as defaultViewMode};
 //# sourceMappingURL=view-mode.units.js.map

package/dist/src/data-view/view-mode.units.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"view-mode.units.js","sources":["../../../src/data-view/view-mode.units.tsx"],"sourcesContent":["import { FC, useCallback } from 'react'\r\nimport { Box, BoxProps, colors, styled, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material'\r\nimport ViewListIcon from '@mui/icons-material/ViewList'\r\nimport ViewModuleIcon from '@mui/icons-material/ViewModule'\r\nimport { EViewMode, IResponsiveSize, IViewModeElementProps } from './view-mode.types'\r\n\r\nexport const defaultSize: IResponsiveSize = { xs: 12, sm: 6, md: 4, lg: 3 }\r\n\r\nexport const defaultViewMode = EViewMode.List\r\n\r\nconst viewModes = [\r\n { value: EViewMode.Module, icon: <ViewModuleIcon />, label: 'Card Grid' },\r\n { value: EViewMode.List, icon: <ViewListIcon />, label: 'Detailed List' }\r\n]\r\n\r\nexport interface IViewModeProps {\r\n value?: EViewMode\r\n onChange?: (value: EViewMode) => void\r\n}\r\n\r\nexport const ViewModeButtons: FC<IViewModeProps> = (props) => {\r\n const { value, onChange = () => {} } = props\r\n const normalizedValue = value && Object.values(EViewMode).includes(value as EViewMode) ? value : defaultViewMode\r\n\r\n const handleChange = useCallback(\r\n (newValue: EViewMode \| null) => {\r\n if (newValue !== null && newValue !== normalizedValue) {\r\n onChange(newValue)\r\n }\r\n },\r\n [normalizedValue, onChange]\r\n )\r\n\r\n return (\r\n <ToggleButtonGroupCustom size='small' value={normalizedValue} exclusive onChange={(_, v) => handleChange(v)}>\r\n {viewModes.map((mode) => (\r\n <Tooltip key={mode.value} title={mode.label} arrow>\r\n <ToggleButton size='small' value={mode.value} aria-label={mode.label} sx={{ p: '5px' }}>\r\n {mode.icon}\r\n </ToggleButton>\r\n </Tooltip>\r\n ))}\r\n </ToggleButtonGroupCustom>\r\n )\r\n}\r\n\r\nexport const createViewModeButtons = () => ViewModeButtons\r\n\r\nconst ToggleButtonGroupCustom = styled(ToggleButtonGroup)(({ theme }) => ({\r\n flex: '0 0 auto',\r\n '.MuiToggleButtonGroup-grouped': {\r\n '&.Mui-selected': {\r\n color: colors.common.white,\r\n backgroundColor: `var(--color-orange, ${colors.blue[600]})`,\r\n borderColor: `var(--color-orange, ${colors.blue[600]})`,\r\n '&.MuiToggleButtonGroup-lastButton': {\r\n borderColor: `var(--color-orange, ${colors.blue[600]})`\r\n },\r\n '&:hover': {\r\n backgroundColor: `var(--color-orange, ${colors.blue[600]})`\r\n }\r\n }\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n display: 'none'\r\n }\r\n}))\r\n\r\nexport const LoadingOverlay: FC<BoxProps> = (props) => (\r\n <LoadingOverlayWrap {...props}>\r\n <Box className='loading-overlay__content'>\r\n <Box className='loading-overlay__spinner' />\r\n <Typography variant='body2' color='primary'>\r\n Loading...\r\n </Typography>\r\n </Box>\r\n </LoadingOverlayWrap>\r\n)\r\n\r\nconst LoadingOverlayWrap = styled(Box)({\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n bgcolor: 'rgba(255, 255, 255, 0.7)',\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n justifyContent: 'center',\r\n zIndex: 1000,\r\n paddingTop: '20vh',\r\n backdropFilter: 'blur(2px)',\r\n '.loading-overlay__content': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '10px'\r\n },\r\n '.loading-overlay__spinner': {\r\n width: 24,\r\n height: 24,\r\n border: '3px solid',\r\n borderColor: colors.grey[300],\r\n borderTopColor: `var(--color-orange, ${colors.blue[600]})`,\r\n borderRadius: '50%',\r\n '@keyframes spin': {\r\n '0%': { transform: 'rotate(0deg)' },\r\n '100%': { transform: 'rotate(360deg)' }\r\n },\r\n animation: 'spin 1s linear infinite'\r\n },\r\n '.MuiTypography-root': {\r\n color: `var(--color-orange, ${colors.blue[600]})`\r\n }\r\n})\r\n\r\nexport const LoadingError: FC<{ error: string }> = ({ error }) => (\r\n <LoadingErrorWrap>\r\n <Typography variant='h6' gutterBottom>\r\n An error occurred\r\n </Typography>\r\n <Typography variant='body2'>{error}</Typography>\r\n </LoadingErrorWrap>\r\n)\r\n\r\nconst LoadingErrorWrap = styled(Box)({\r\n marginTop: 3,\r\n padding: 3,\r\n border: '1px solid',\r\n borderColor: 'error.main',\r\n borderRadius: 1,\r\n bgcolor: 'error.light',\r\n color: 'error.contrastText'\r\n})\r\n\r\nconst StyledGridOverlay = styled('div')(({ theme }) => ({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n height: '100%',\r\n '& .no-rows-primary': { fill: '#3D4751', ...theme.applyStyles('light', { fill: '#AEB8C2' }) },\r\n '& .no-rows-secondary': { fill: '#1D2126', ...theme.applyStyles('light', { fill: '#E8EAED' }) }\r\n}))\r\n\r\nexport const LoadingNoData: FC<IViewModeElementProps> = () => (\r\n <LoadingNoDataWrap>\r\n <StyledGridOverlay>\r\n <svg xmlns='http://www.w3.org/2000/svg' fill='none' width={96} viewBox='0 0 452 257' aria-hidden focusable='false'>\r\n <path\r\n className='no-rows-primary'\r\n d='M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z'\r\n />\r\n <path\r\n className='no-rows-primary'\r\n d='M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z'\r\n />\r\n <path\r\n className='no-rows-primary'\r\n d='M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z'\r\n />\r\n <path\r\n className='no-rows-secondary'\r\n d='M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z'\r\n />\r\n </svg>\r\n <Typography variant='h6' color='text.secondary' gutterBottom>\r\n No data available\r\n </Typography>\r\n </StyledGridOverlay>\r\n <Typography variant='body2' color='text.secondary'>\r\n Try changing the filter or search keyword\r\n </Typography>\r\n </LoadingNoDataWrap>\r\n)\r\n\r\nconst LoadingNoDataWrap = styled(Box)({\r\n marginTop: '8px',\r\n padding: '24px 12px',\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.grey[400],\r\n borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingWaiting: FC = () => (\r\n <LoadingWaitingWrap>\r\n <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n Waiting for data...\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n Please wait while we fetch the data.\r\n </Typography>\r\n </LoadingWaitingWrap>\r\n)\r\n\r\nconst LoadingWaitingWrap = styled(Box)({\r\n marginTop: '8px',\r\n padding: '24px 12px',\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.grey[400],\r\n borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingMissingConfig: React.FC = () => (\r\n <LoadingMissingConfigWrap>\r\n <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n Missing Configuration\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n We're sorry, but it looks like there's a missing configuration required for this feature to work correctly.\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n Please contact support for assistance.\r\n </Typography>\r\n </LoadingMissingConfigWrap>\r\n)\r\n\r\nconst LoadingMissingConfigWrap = styled(Box)({\r\n marginTop: 3,\r\n padding: 4,\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.red[700],\r\n borderRadius: 1\r\n})\r\n"],"names":["defaultViewMode","EViewMode","List","viewModes","value","Module","icon","_jsx","ViewModuleIcon","label","ViewListIcon","ViewModeButtons","props","_props$onChange","onChange","normalizedValue","Object","values","includes","handleChange","useCallback","newValue","ToggleButtonGroupCustom","size","exclusive","_","v","children","map","mode","Tooltip","title","arrow","ToggleButton","sx","p","createViewModeButtons","styled","ToggleButtonGroup","_ref","theme","_defineProperty","flex","color","colors","common","white","backgroundColor","concat","blue","borderColor","breakpoints","down","display","LoadingOverlay","LoadingOverlayWrap","_objectSpread","_jsxs","Box","className","Typography","variant","position","top","left","right","bottom","bgcolor","alignItems","justifyContent","zIndex","paddingTop","backdropFilter","gap","width","height","border","grey","borderTopColor","borderRadius","transform","animation","LoadingError","_ref3","error","LoadingErrorWrap","gutterBottom","marginTop","padding","StyledGridOverlay","_ref4","flexDirection","fill","applyStyles","LoadingNoData","LoadingNoDataWrap","xmlns","viewBox","focusable","d","textAlign","LoadingWaiting","LoadingWaitingWrap","fontWeight","red"],"mappings":"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"}
1	+ {"version":3,"file":"view-mode.units.js","sources":["../../../src/data-view/view-mode.units.tsx"],"sourcesContent":["import { FC, useCallback } from 'react'\r\nimport { Box, BoxProps, colors, styled, ToggleButton, ToggleButtonGroup, Tooltip, Typography } from '@mui/material'\r\nimport ViewListIcon from '@mui/icons-material/ViewList'\r\nimport ViewModuleIcon from '@mui/icons-material/ViewModule'\r\nimport { EViewMode, IResponsiveSize, IViewModeElementProps } from './view-mode.types'\r\n\r\nexport const defaultSize: IResponsiveSize = { xs: 12, sm: 6, md: 4, lg: 3 }\r\n\r\nexport const defaultViewMode = EViewMode.List\r\n\r\nconst viewModes = [\r\n { value: EViewMode.Module, icon: <ViewModuleIcon />, label: 'Card Grid' },\r\n { value: EViewMode.List, icon: <ViewListIcon />, label: 'Detailed List' }\r\n]\r\n\r\nexport interface IViewModeProps {\r\n value?: EViewMode\r\n onChange?: (value: EViewMode) => void\r\n}\r\n\r\nexport const ViewModeButtons: FC<IViewModeProps> = (props) => {\r\n const { value, onChange = () => {} } = props\r\n const normalizedValue = value && Object.values(EViewMode).includes(value as EViewMode) ? value : defaultViewMode\r\n\r\n const handleChange = useCallback(\r\n (newValue: EViewMode \| null) => {\r\n if (newValue !== null && newValue !== normalizedValue) {\r\n onChange(newValue)\r\n }\r\n },\r\n [normalizedValue, onChange]\r\n )\r\n\r\n return (\r\n <ToggleButtonGroupCustom size='small' value={normalizedValue} exclusive onChange={(_, v) => handleChange(v)}>\r\n {viewModes.map((mode) => (\r\n <Tooltip key={mode.value} title={mode.label} arrow>\r\n <ToggleButton size='small' value={mode.value} aria-label={mode.label} sx={{ p: '5px' }}>\r\n {mode.icon}\r\n </ToggleButton>\r\n </Tooltip>\r\n ))}\r\n </ToggleButtonGroupCustom>\r\n )\r\n}\r\n\r\nexport const createViewModeButtons = () => ViewModeButtons\r\n\r\nconst ToggleButtonGroupCustom = styled(ToggleButtonGroup)(({ theme }) => ({\r\n flex: '0 0 auto',\r\n '.MuiToggleButtonGroup-grouped': {\r\n '&.Mui-selected': {\r\n color: colors.common.white,\r\n backgroundColor: `var(--color-orange, ${colors.blue[600]})`,\r\n borderColor: `var(--color-orange, ${colors.blue[600]})`,\r\n '&.MuiToggleButtonGroup-lastButton': {\r\n borderColor: `var(--color-orange, ${colors.blue[600]})`\r\n },\r\n '&:hover': {\r\n backgroundColor: `var(--color-orange, ${colors.blue[600]})`\r\n }\r\n }\r\n },\r\n [theme.breakpoints.down('md')]: {\r\n display: 'none'\r\n }\r\n}))\r\n\r\nexport const LoadingOverlay: FC<BoxProps> = (props) => (\r\n <LoadingOverlayWrap {...props}>\r\n <Box className='loading-overlay__content'>\r\n <Box className='loading-overlay__spinner' />\r\n <Typography variant='body2' color='primary'>\r\n Loading...\r\n </Typography>\r\n </Box>\r\n </LoadingOverlayWrap>\r\n)\r\n\r\nconst LoadingOverlayWrap = styled(Box)({\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n right: 0,\r\n bottom: 0,\r\n bgcolor: 'rgba(255, 255, 255, 0.7)',\r\n display: 'flex',\r\n alignItems: 'flex-start',\r\n justifyContent: 'center',\r\n zIndex: 1000,\r\n paddingTop: '20vh',\r\n backdropFilter: 'blur(2px)',\r\n '.loading-overlay__content': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n gap: '10px'\r\n },\r\n '.loading-overlay__spinner': {\r\n width: 24,\r\n height: 24,\r\n border: '3px solid',\r\n borderColor: colors.grey[300],\r\n borderTopColor: `var(--color-orange, ${colors.blue[600]})`,\r\n borderRadius: '50%',\r\n '@keyframes spin': {\r\n '0%': { transform: 'rotate(0deg)' },\r\n '100%': { transform: 'rotate(360deg)' }\r\n },\r\n animation: 'spin 1s linear infinite'\r\n },\r\n '.MuiTypography-root': {\r\n color: `var(--color-orange, ${colors.blue[600]})`\r\n }\r\n})\r\n\r\nexport const LoadingError: FC<{ error: string }> = ({ error }) => (\r\n <LoadingErrorWrap>\r\n <Typography variant='h6' gutterBottom>\r\n An error occurred\r\n </Typography>\r\n <Typography variant='body2'>{error}</Typography>\r\n </LoadingErrorWrap>\r\n)\r\n\r\nconst LoadingErrorWrap = styled(Box)({\r\n marginTop: 3,\r\n padding: 3,\r\n border: '1px solid',\r\n borderColor: 'error.main',\r\n borderRadius: 1,\r\n bgcolor: 'error.light',\r\n color: 'error.contrastText'\r\n})\r\n\r\nconst StyledGridOverlay = styled('div')(({ theme }) => ({\r\n display: 'flex',\r\n flexDirection: 'column',\r\n alignItems: 'center',\r\n justifyContent: 'center',\r\n height: '100%',\r\n '& .no-rows-primary': { fill: '#3D4751', ...theme.applyStyles('light', { fill: '#AEB8C2' }) },\r\n '& .no-rows-secondary': { fill: '#1D2126', ...theme.applyStyles('light', { fill: '#E8EAED' }) }\r\n}))\r\n\r\nexport const LoadingNoData: FC<IViewModeElementProps> = () => (\r\n <LoadingNoDataWrap>\r\n <StyledGridOverlay>\r\n <svg xmlns='http://www.w3.org/2000/svg' fill='none' width={96} viewBox='0 0 452 257' aria-hidden focusable='false'>\r\n <path\r\n className='no-rows-primary'\r\n d='M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z'\r\n />\r\n <path\r\n className='no-rows-primary'\r\n d='M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z'\r\n />\r\n <path\r\n className='no-rows-primary'\r\n d='M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z'\r\n />\r\n <path\r\n className='no-rows-secondary'\r\n d='M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z'\r\n />\r\n </svg>\r\n <Typography variant='h6' color='text.secondary' gutterBottom>\r\n No data available\r\n </Typography>\r\n </StyledGridOverlay>\r\n <Typography variant='body2' color='text.secondary'>\r\n Try changing the filter or search keyword\r\n </Typography>\r\n </LoadingNoDataWrap>\r\n)\r\n\r\nconst LoadingNoDataWrap = styled(Box)({\r\n marginTop: '8px',\r\n padding: '24px 12px',\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.grey[400],\r\n borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingWaiting: FC = () => (\r\n <LoadingWaitingWrap>\r\n <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n Waiting for data...\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n Please wait while we fetch the data.\r\n </Typography>\r\n </LoadingWaitingWrap>\r\n)\r\n\r\nconst LoadingWaitingWrap = styled(Box)({\r\n marginTop: '8px',\r\n padding: '24px 12px',\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.grey[400],\r\n borderRadius: '6px'\r\n})\r\n\r\nexport const LoadingMissingConfig: React.FC = () => (\r\n <LoadingMissingConfigWrap>\r\n <Typography variant='h6' color='text.primary' sx={{ fontWeight: 'bold' }}>\r\n Missing Configuration\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n We're sorry, but it looks like there's a missing configuration required for this feature to work correctly.\r\n </Typography>\r\n <Typography variant='body2' color='text.secondary'>\r\n Please contact support for assistance.\r\n </Typography>\r\n </LoadingMissingConfigWrap>\r\n)\r\n\r\nconst LoadingMissingConfigWrap = styled(Box)({\r\n marginTop: 3,\r\n padding: 4,\r\n textAlign: 'center',\r\n border: '1px dashed',\r\n borderColor: colors.red[700],\r\n borderRadius: 1\r\n})\r\n"],"names":["defaultViewMode","EViewMode","List","viewModes","value","Module","icon","_jsx","ViewModuleIcon","label","ViewListIcon","ViewModeButtons","props","_props$onChange","onChange","normalizedValue","Object","values","includes","handleChange","useCallback","newValue","ToggleButtonGroupCustom","size","exclusive","_","v","children","map","mode","Tooltip","title","arrow","ToggleButton","sx","p","createViewModeButtons","styled","ToggleButtonGroup","_ref","theme","_defineProperty","flex","color","colors","common","white","backgroundColor","concat","blue","borderColor","breakpoints","down","display","LoadingOverlay","LoadingOverlayWrap","_objectSpread","_jsxs","Box","className","Typography","variant","position","top","left","right","bottom","bgcolor","alignItems","justifyContent","zIndex","paddingTop","backdropFilter","gap","width","height","border","grey","borderTopColor","borderRadius","transform","animation","LoadingError","_ref3","error","LoadingErrorWrap","gutterBottom","marginTop","padding","StyledGridOverlay","_ref4","flexDirection","fill","applyStyles","LoadingNoData","LoadingNoDataWrap","xmlns","viewBox","focusable","d","textAlign","LoadingWaiting","LoadingWaitingWrap","fontWeight","red"],"mappings":"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"}

package/dist/src/form/create.autocomplete.chips.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as t,createClass as e,classCallCheck as n,toConsumableArray as o,inherits as r,objectSpread2 as i,callSuper as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as a,Fragment as s,jsx as u}from"react/jsx-runtime";import{createElement as p,Component as d}from"react";import{styled as c,Autocomplete as v,TextField as f,Chip as m,Typography as h,Tooltip as g,IconButton as y}from"@mui/material";import S from"@mui/icons-material/Remove";import{getErrorMessage as I}from"./helpers.js";var R;function C(o){var c=(null==o?void 0:o.separator)||"|",R=(null==o?void 0:o.limitTags)||2,C=null!=o&&o.saveLocalStorageByKey?B.initial(o.saveLocalStorageByKey):void 0,K=function(){function B(e){var r;return n(this,B),r=l(this,B,[e]),t(r,"refInput",null),t(r,"handleRemoveItem",(function(t,e){var n;t.preventDefault(),t.stopPropagation(),console.log(e);var o=null!==(n=null==C?void 0:C.delete(e))&&void 0!==n?n:[];r.setState({options:o})})),t(r,"handleAddOption",(function(t,e){if(null!=o&&o.saveLocalStorageByKey){var n,i=null!==(n=null==C?void 0:C.setItems(r.state.options,e))&&void 0!==n?n:r.state.options;r.setState({value:e,options:i})}else r.setState({value:e});r.refInput&&(r.refInput.value=e.join(c)),r.props.name&&r.props.onBlur&&r.props.onBlur(r.props.name)})),t(r,"isBtnRemoveOption",(function(t){var e,n,i,l=r.state.value.findIndex((function(e){return e===t}))<0;return(null!==(e=null!==(n=null==o?void 0:o.optionItems)&&void 0!==n?n:null===(i=r.props.slots)||void 0===i?void 0:i.optionItems)&&void 0!==e?e:[]).findIndex((function(e){return e===t}))<0&&l})),t(r,"getSelectOptions",(function(){var t,e,n=null!==(t=null==o?void 0:o.optionItems)&&void 0!==t?t:[];null!=o&&o.saveLocalStorageByKey&&(n=null!==(e=null==C?void 0:C.getItemsAndMerge(n))&&void 0!==e?e:[]);return n})),t(r,"getTextFieldProps",(function(){var t=r.props,e=t.name,n=t.label,o=t.placeholder,i=t.onBlur,l=t.messageErrors,a=I(l,e);return{label:n,placeholder:o||"Add new",onBlur:function(){e&&i&&i(e)},error:a.error,helperText:a.message}})),t(r,"getDefaultValue",(function(){var t,e,n=r.props,o=n.name,i=n.data,l=o?null==i||null===(t=i[o])||void 0===t?void 0:t.toString():"";return null!==(e=null==l?void 0:l.split(c).filter((function(t){return!!t})))&&void 0!==e?e:[]})),r.state={value:r.getDefaultValue(),options:r.getSelectOptions()},r}return r(B,d),e(B,[{key:"render",value:function(){var t=this,e=this.props.name;return a(s,{children:[u(v,{multiple:!0,freeSolo:!0,limitTags:R,value:this.state.value,onChange:this.handleAddOption,options:this.state.options,renderOption:function(e,n){return p(x,i(i({},e),{},{key:n}),u(h,{variant:"subtitle1",sx:{flex:1},children:n}),t.isBtnRemoveOption(n)&&u(g,{title:"Remove option",arrow:!0,placement:"left",children:u(y,{size:"small",onClick:function(e){return t.handleRemoveItem(e,n)},children:u(S,{fontSize:"small"})})}))},renderTags:function(t,e){return t.map((function(t,n){return p(m,i(i({label:t},e({index:n})),{},{key:t.toString()}))}))},renderInput:function(e){return u(f,i(i({},e),{},{variant:"outlined"},t.getTextFieldProps()))}}),u("input",{ref:function(e){t.refInput=e},hidden:!0,type:"text",name:null==e?void 0:e.toString(),defaultValue:this.state.value.join(c)})]})}}])}();return K}var x=c("li")({display:"flex",alignItems:"center"}),B=e((function e(r,i){var l=this;n(this,e),t(this,"storeKeyRoot","autocomplete_chip_store"),t(this,"getRoot",(function(){try{var t=window.localStorage.getItem(l.storeKeyRoot);return JSON.parse(null!=t?t:"{}")}catch(t){return{}}})),t(this,"getChild",(function(){return l.getRoot()[l.storeKey]})),t(this,"setRoot",(function(t){window.localStorage.setItem(l.storeKeyRoot,JSON.stringify(t))})),t(this,"setChild",(function(t){var e=l.getRoot();e[l.storeKey]=t,l.setRoot(e)})),t(this,"getItemsAndMerge",(function(t){try{return Array.from(new Set([].concat(o(l.getChild()),o(t)))).sort()}catch(e){return t}})),t(this,"setItems",(function(t,e){var n=Array.from(new Set([].concat(o(t),o(e)))).sort();return l.setChild(n),n})),t(this,"delete",(function(t){var e=l.getChild().filter((function(e){return e!==t}));return l.setChild(e),e})),this.storeKey=r,i&&this.setChild(i)}));R=B,t(B,"initial",(function(t,e){return new R(t,e)}));export{C as default};
+import{defineProperty as t,createClass as e,classCallCheck as n,toConsumableArray as o,inherits as r,objectSpread2 as i,callSuper as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as a,Fragment as s,jsx as u}from"react/jsx-runtime";import{createElement as p,Component as d}from"react";import{styled as c,Autocomplete as v,TextField as f,Chip as m,Typography as h,Tooltip as g,IconButton as y}from"@mui/material";import S from"@mui/icons-material/Remove";import{getErrorMessage as I}from"./helpers.js";var R;function C(o){var c=(null==o?void 0:o.separator)||"|",R=(null==o?void 0:o.limitTags)||2,C=null!=o&&o.saveLocalStorageByKey?B.initial(o.saveLocalStorageByKey):void 0,K=function(){function B(e){var r;return n(this,B),r=l(this,B,[e]),t(r,"refInput",null),t(r,"handleRemoveItem",function(t,e){var n;t.preventDefault(),t.stopPropagation(),console.log(e);var o=null!==(n=null==C?void 0:C.delete(e))&&void 0!==n?n:[];r.setState({options:o})}),t(r,"handleAddOption",function(t,e){if(null!=o&&o.saveLocalStorageByKey){var n,i=null!==(n=null==C?void 0:C.setItems(r.state.options,e))&&void 0!==n?n:r.state.options;r.setState({value:e,options:i})}else r.setState({value:e});r.refInput&&(r.refInput.value=e.join(c)),r.props.name&&r.props.onBlur&&r.props.onBlur(r.props.name)}),t(r,"isBtnRemoveOption",function(t){var e,n,i,l=r.state.value.findIndex(function(e){return e===t})<0;return(null!==(e=null!==(n=null==o?void 0:o.optionItems)&&void 0!==n?n:null===(i=r.props.slots)||void 0===i?void 0:i.optionItems)&&void 0!==e?e:[]).findIndex(function(e){return e===t})<0&&l}),t(r,"getSelectOptions",function(){var t,e,n=null!==(t=null==o?void 0:o.optionItems)&&void 0!==t?t:[];null!=o&&o.saveLocalStorageByKey&&(n=null!==(e=null==C?void 0:C.getItemsAndMerge(n))&&void 0!==e?e:[]);return n}),t(r,"getTextFieldProps",function(){var t=r.props,e=t.name,n=t.label,o=t.placeholder,i=t.onBlur,l=t.messageErrors,a=I(l,e);return{label:n,placeholder:o||"Add new",onBlur:function(){e&&i&&i(e)},error:a.error,helperText:a.message}}),t(r,"getDefaultValue",function(){var t,e,n=r.props,o=n.name,i=n.data,l=o?null==i||null===(t=i[o])||void 0===t?void 0:t.toString():"";return null!==(e=null==l?void 0:l.split(c).filter(function(t){return!!t}))&&void 0!==e?e:[]}),r.state={value:r.getDefaultValue(),options:r.getSelectOptions()},r}return r(B,d),e(B,[{key:"render",value:function(){var t=this,e=this.props.name;return a(s,{children:[u(v,{multiple:!0,freeSolo:!0,limitTags:R,value:this.state.value,onChange:this.handleAddOption,options:this.state.options,renderOption:function(e,n){return p(x,i(i({},e),{},{key:n}),u(h,{variant:"subtitle1",sx:{flex:1},children:n}),t.isBtnRemoveOption(n)&&u(g,{title:"Remove option",arrow:!0,placement:"left",children:u(y,{size:"small",onClick:function(e){return t.handleRemoveItem(e,n)},children:u(S,{fontSize:"small"})})}))},renderTags:function(t,e){return t.map(function(t,n){return p(m,i(i({label:t},e({index:n})),{},{key:t.toString()}))})},renderInput:function(e){return u(f,i(i({},e),{},{variant:"outlined"},t.getTextFieldProps()))}}),u("input",{ref:function(e){t.refInput=e},hidden:!0,type:"text",name:null==e?void 0:e.toString(),defaultValue:this.state.value.join(c)})]})}}])}();return K}var x=c("li")({display:"flex",alignItems:"center"}),B=e(function e(r,i){var l=this;n(this,e),t(this,"storeKeyRoot","autocomplete_chip_store"),t(this,"getRoot",function(){try{var t=window.localStorage.getItem(l.storeKeyRoot);return JSON.parse(null!=t?t:"{}")}catch(t){return{}}}),t(this,"getChild",function(){return l.getRoot()[l.storeKey]}),t(this,"setRoot",function(t){window.localStorage.setItem(l.storeKeyRoot,JSON.stringify(t))}),t(this,"setChild",function(t){var e=l.getRoot();e[l.storeKey]=t,l.setRoot(e)}),t(this,"getItemsAndMerge",function(t){try{return Array.from(new Set([].concat(o(l.getChild()),o(t)))).sort()}catch(e){return t}}),t(this,"setItems",function(t,e){var n=Array.from(new Set([].concat(o(t),o(e)))).sort();return l.setChild(n),n}),t(this,"delete",function(t){var e=l.getChild().filter(function(e){return e!==t});return l.setChild(e),e}),this.storeKey=r,i&&this.setChild(i)});R=B,t(B,"initial",function(t,e){return new R(t,e)});export{C as default};
 //# sourceMappingURL=create.autocomplete.chips.js.map

package/dist/src/form/create.autocomplete.chips.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"create.autocomplete.chips.js","sources":["../../../src/form/create.autocomplete.chips.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Autocomplete, Chip, IconButton, styled, TextField, TextFieldProps, Tooltip, Typography } from '@mui/material'\r\nimport RemoveIcon from '@mui/icons-material/Remove'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\n\r\nexport interface IAutocompleteChipSlots {\r\n optionItems?: string[]\r\n limitTags?: number\r\n separator?: string\r\n saveLocalStorageByKey?: string\r\n}\r\n\r\nexport interface IAutocompleteChipProps<T> extends IFormInputBase<T, IAutocompleteChipSlots> {}\r\n\r\nexport interface IAutocompleteChipState {\r\n value: string[]\r\n options: string[]\r\n}\r\n\r\nfunction CreateAutocompleteChip<T>(params?: IAutocompleteChipSlots): ComponentType<IAutocompleteChipProps<T>> {\r\n const separator = params?.separator \|\| '\|'\r\n const limitTags = params?.limitTags \|\| 2\r\n const storeItems = params?.saveLocalStorageByKey ? AutocompleteChipStore.initial(params.saveLocalStorageByKey) : undefined\r\n\r\n class AutocompleteChip extends Component<IAutocompleteChipProps<T>, IAutocompleteChipState> {\r\n constructor(props: IAutocompleteChipProps<T>) {\r\n super(props)\r\n this.state = {\r\n value: this.getDefaultValue(),\r\n options: this.getSelectOptions()\r\n }\r\n }\r\n\r\n refInput: HTMLInputElement \| null = null\r\n render() {\r\n const { name } = this.props\r\n return (\r\n <>\r\n <Autocomplete\r\n multiple\r\n freeSolo\r\n limitTags={limitTags}\r\n value={this.state.value}\r\n onChange={this.handleAddOption}\r\n options={this.state.options}\r\n renderOption={(props, option) => (\r\n <ItemOption {...props} key={option}>\r\n <Typography variant='subtitle1' sx={{ flex: 1 }}>\r\n {option}\r\n </Typography>\r\n {this.isBtnRemoveOption(option) && (\r\n <Tooltip title='Remove option' arrow placement='left'>\r\n <IconButton size='small' onClick={(e) => this.handleRemoveItem(e, option)}>\r\n <RemoveIcon fontSize='small' />\r\n </IconButton>\r\n </Tooltip>\r\n )}\r\n </ItemOption>\r\n )}\r\n renderTags={(tagValue, getTagProps) => {\r\n return tagValue.map((option, index) => <Chip label={option} {...getTagProps({ index })} key={option.toString()} />)\r\n }}\r\n renderInput={(params) => <TextField {...params} variant='outlined' {...this.getTextFieldProps()} />}\r\n />\r\n <input\r\n ref={(ref) => {\r\n this.refInput = ref\r\n }}\r\n hidden\r\n type='text'\r\n name={name?.toString()}\r\n defaultValue={this.state.value.join(separator)}\r\n />\r\n </>\r\n )\r\n }\r\n\r\n handleRemoveItem = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => {\r\n e.preventDefault()\r\n e.stopPropagation()\r\n console.log(value)\r\n const list = storeItems?.delete(value) ?? []\r\n this.setState({ options: list })\r\n }\r\n\r\n handleAddOption = (_: React.SyntheticEvent, newValue: string[]) => {\r\n if (params?.saveLocalStorageByKey) {\r\n const options = storeItems?.setItems(this.state.options, newValue) ?? this.state.options\r\n this.setState({ value: newValue, options })\r\n } else {\r\n this.setState({ value: newValue })\r\n }\r\n if (this.refInput) {\r\n this.refInput.value = newValue.join(separator)\r\n }\r\n this.props.name && this.props.onBlur && this.props.onBlur(this.props.name)\r\n }\r\n\r\n isBtnRemoveOption = (value: string) => {\r\n const isSelectedOption = this.state.value.findIndex((x) => x === value) < 0\r\n const selectOptions = params?.optionItems ?? this.props.slots?.optionItems ?? []\r\n const isDefault = selectOptions.findIndex((x) => x === value) < 0\r\n return isDefault && isSelectedOption\r\n }\r\n\r\n getSelectOptions = () => {\r\n let items = params?.optionItems ?? []\r\n if (params?.saveLocalStorageByKey) {\r\n items = storeItems?.getItemsAndMerge(items) ?? []\r\n }\r\n return items\r\n }\r\n\r\n getTextFieldProps = (): TextFieldProps => {\r\n const { name, label, placeholder, onBlur, messageErrors } = this.props\r\n const eMessage = getErrorMessage(messageErrors, name)\r\n return {\r\n label,\r\n placeholder: placeholder \|\| 'Add new',\r\n onBlur: () => {\r\n if (!name) return\r\n onBlur && onBlur(name)\r\n },\r\n error: eMessage.error,\r\n helperText: eMessage.message\r\n }\r\n }\r\n\r\n getDefaultValue = (): string[] => {\r\n const { name, data } = this.props\r\n const value = name ? data?.[name]?.toString() : ''\r\n return value?.split(separator).filter((x) => !!x) ?? []\r\n }\r\n }\r\n\r\n return AutocompleteChip\r\n}\r\n\r\nexport default CreateAutocompleteChip\r\n\r\nconst ItemOption = styled('li')({\r\n display: 'flex',\r\n alignItems: 'center'\r\n})\r\n\r\ntype TChipStoreRoot = { [key: string]: string[] }\r\n\r\nclass AutocompleteChipStore {\r\n private storeKeyRoot = 'autocomplete_chip_store'\r\n private storeKey: string\r\n constructor(key: string, defaultValue?: string[]) {\r\n this.storeKey = key\r\n if (defaultValue) {\r\n this.setChild(defaultValue)\r\n }\r\n }\r\n\r\n static initial = (key: string, defaultValue?: string[]) => new AutocompleteChipStore(key, defaultValue)\r\n\r\n private getRoot = (): TChipStoreRoot => {\r\n try {\r\n const res = window.localStorage.getItem(this.storeKeyRoot)\r\n return JSON.parse(res ?? '{}')\r\n } catch (error) {\r\n return {}\r\n }\r\n }\r\n\r\n private getChild = (): string[] => {\r\n return this.getRoot()[this.storeKey]\r\n }\r\n\r\n private setRoot = (value: TChipStoreRoot) => {\r\n window.localStorage.setItem(this.storeKeyRoot, JSON.stringify(value))\r\n }\r\n\r\n private setChild = (value: string[]) => {\r\n const obj = this.getRoot()\r\n obj[this.storeKey] = value\r\n this.setRoot(obj)\r\n }\r\n\r\n getItemsAndMerge = (value: string[]): string[] => {\r\n try {\r\n return Array.from(new Set([...this.getChild(), ...value])).sort()\r\n } catch (error) {\r\n return value\r\n }\r\n }\r\n\r\n setItems = (options: string[], value: string[]): string[] => {\r\n const list = Array.from(new Set([...options, ...value])).sort()\r\n this.setChild(list)\r\n return list\r\n }\r\n\r\n delete = (value: string) => {\r\n const list = this.getChild().filter((x) => x !== value)\r\n this.setChild(list)\r\n return list\r\n }\r\n}\r\n"],"names":["CreateAutocompleteChip","params","separator","limitTags","storeItems","saveLocalStorageByKey","AutocompleteChipStore","initial","undefined","AutocompleteChip","props","_this","_classCallCheck","_callSuper","_defineProperty","e","value","_storeItems$delete","preventDefault","stopPropagation","console","log","list","setState","options","_","newValue","_storeItems$setItems","setItems","state","refInput","join","name","onBlur","_ref","_params$optionItems","_this$props$slots","isSelectedOption","findIndex","x","optionItems","slots","_params$optionItems2","_storeItems$getItemsA","items","getItemsAndMerge","_this$props","label","placeholder","messageErrors","eMessage","getErrorMessage","error","helperText","message","_data$name","_value$split$filter","_this$props2","data","toString","split","filter","getDefaultValue","getSelectOptions","_inherits","Component","_createClass","key","_this2","this","_jsxs","_Fragment","children","_jsx","Autocomplete","multiple","freeSolo","onChange","handleAddOption","renderOption","option","_createElement","ItemOption","_objectSpread","Typography","variant","sx","flex","isBtnRemoveOption","Tooltip","title","arrow","placement","IconButton","size","onClick","handleRemoveItem","RemoveIcon","fontSize","renderTags","tagValue","getTagProps","map","index","Chip","renderInput","TextField","getTextFieldProps","ref","hidden","type","defaultValue","styled","display","alignItems","_this3","res","window","localStorage","getItem","storeKeyRoot","JSON","parse","getRoot","storeKey","setItem","stringify","obj","setRoot","Array","from","Set","concat","_toConsumableArray","getChild","sort","setChild","_AutocompleteChipStore"],"mappings":"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"}
1	+ {"version":3,"file":"create.autocomplete.chips.js","sources":["../../../src/form/create.autocomplete.chips.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Autocomplete, Chip, IconButton, styled, TextField, TextFieldProps, Tooltip, Typography } from '@mui/material'\r\nimport RemoveIcon from '@mui/icons-material/Remove'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\n\r\nexport interface IAutocompleteChipSlots {\r\n optionItems?: string[]\r\n limitTags?: number\r\n separator?: string\r\n saveLocalStorageByKey?: string\r\n}\r\n\r\nexport interface IAutocompleteChipProps<T> extends IFormInputBase<T, IAutocompleteChipSlots> {}\r\n\r\nexport interface IAutocompleteChipState {\r\n value: string[]\r\n options: string[]\r\n}\r\n\r\nfunction CreateAutocompleteChip<T>(params?: IAutocompleteChipSlots): ComponentType<IAutocompleteChipProps<T>> {\r\n const separator = params?.separator \|\| '\|'\r\n const limitTags = params?.limitTags \|\| 2\r\n const storeItems = params?.saveLocalStorageByKey ? AutocompleteChipStore.initial(params.saveLocalStorageByKey) : undefined\r\n\r\n class AutocompleteChip extends Component<IAutocompleteChipProps<T>, IAutocompleteChipState> {\r\n constructor(props: IAutocompleteChipProps<T>) {\r\n super(props)\r\n this.state = {\r\n value: this.getDefaultValue(),\r\n options: this.getSelectOptions()\r\n }\r\n }\r\n\r\n refInput: HTMLInputElement \| null = null\r\n render() {\r\n const { name } = this.props\r\n return (\r\n <>\r\n <Autocomplete\r\n multiple\r\n freeSolo\r\n limitTags={limitTags}\r\n value={this.state.value}\r\n onChange={this.handleAddOption}\r\n options={this.state.options}\r\n renderOption={(props, option) => (\r\n <ItemOption {...props} key={option}>\r\n <Typography variant='subtitle1' sx={{ flex: 1 }}>\r\n {option}\r\n </Typography>\r\n {this.isBtnRemoveOption(option) && (\r\n <Tooltip title='Remove option' arrow placement='left'>\r\n <IconButton size='small' onClick={(e) => this.handleRemoveItem(e, option)}>\r\n <RemoveIcon fontSize='small' />\r\n </IconButton>\r\n </Tooltip>\r\n )}\r\n </ItemOption>\r\n )}\r\n renderTags={(tagValue, getTagProps) => {\r\n return tagValue.map((option, index) => <Chip label={option} {...getTagProps({ index })} key={option.toString()} />)\r\n }}\r\n renderInput={(params) => <TextField {...params} variant='outlined' {...this.getTextFieldProps()} />}\r\n />\r\n <input\r\n ref={(ref) => {\r\n this.refInput = ref\r\n }}\r\n hidden\r\n type='text'\r\n name={name?.toString()}\r\n defaultValue={this.state.value.join(separator)}\r\n />\r\n </>\r\n )\r\n }\r\n\r\n handleRemoveItem = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => {\r\n e.preventDefault()\r\n e.stopPropagation()\r\n console.log(value)\r\n const list = storeItems?.delete(value) ?? []\r\n this.setState({ options: list })\r\n }\r\n\r\n handleAddOption = (_: React.SyntheticEvent, newValue: string[]) => {\r\n if (params?.saveLocalStorageByKey) {\r\n const options = storeItems?.setItems(this.state.options, newValue) ?? this.state.options\r\n this.setState({ value: newValue, options })\r\n } else {\r\n this.setState({ value: newValue })\r\n }\r\n if (this.refInput) {\r\n this.refInput.value = newValue.join(separator)\r\n }\r\n this.props.name && this.props.onBlur && this.props.onBlur(this.props.name)\r\n }\r\n\r\n isBtnRemoveOption = (value: string) => {\r\n const isSelectedOption = this.state.value.findIndex((x) => x === value) < 0\r\n const selectOptions = params?.optionItems ?? this.props.slots?.optionItems ?? []\r\n const isDefault = selectOptions.findIndex((x) => x === value) < 0\r\n return isDefault && isSelectedOption\r\n }\r\n\r\n getSelectOptions = () => {\r\n let items = params?.optionItems ?? []\r\n if (params?.saveLocalStorageByKey) {\r\n items = storeItems?.getItemsAndMerge(items) ?? []\r\n }\r\n return items\r\n }\r\n\r\n getTextFieldProps = (): TextFieldProps => {\r\n const { name, label, placeholder, onBlur, messageErrors } = this.props\r\n const eMessage = getErrorMessage(messageErrors, name)\r\n return {\r\n label,\r\n placeholder: placeholder \|\| 'Add new',\r\n onBlur: () => {\r\n if (!name) return\r\n onBlur && onBlur(name)\r\n },\r\n error: eMessage.error,\r\n helperText: eMessage.message\r\n }\r\n }\r\n\r\n getDefaultValue = (): string[] => {\r\n const { name, data } = this.props\r\n const value = name ? data?.[name]?.toString() : ''\r\n return value?.split(separator).filter((x) => !!x) ?? []\r\n }\r\n }\r\n\r\n return AutocompleteChip\r\n}\r\n\r\nexport default CreateAutocompleteChip\r\n\r\nconst ItemOption = styled('li')({\r\n display: 'flex',\r\n alignItems: 'center'\r\n})\r\n\r\ntype TChipStoreRoot = { [key: string]: string[] }\r\n\r\nclass AutocompleteChipStore {\r\n private storeKeyRoot = 'autocomplete_chip_store'\r\n private storeKey: string\r\n constructor(key: string, defaultValue?: string[]) {\r\n this.storeKey = key\r\n if (defaultValue) {\r\n this.setChild(defaultValue)\r\n }\r\n }\r\n\r\n static initial = (key: string, defaultValue?: string[]) => new AutocompleteChipStore(key, defaultValue)\r\n\r\n private getRoot = (): TChipStoreRoot => {\r\n try {\r\n const res = window.localStorage.getItem(this.storeKeyRoot)\r\n return JSON.parse(res ?? '{}')\r\n } catch (error) {\r\n return {}\r\n }\r\n }\r\n\r\n private getChild = (): string[] => {\r\n return this.getRoot()[this.storeKey]\r\n }\r\n\r\n private setRoot = (value: TChipStoreRoot) => {\r\n window.localStorage.setItem(this.storeKeyRoot, JSON.stringify(value))\r\n }\r\n\r\n private setChild = (value: string[]) => {\r\n const obj = this.getRoot()\r\n obj[this.storeKey] = value\r\n this.setRoot(obj)\r\n }\r\n\r\n getItemsAndMerge = (value: string[]): string[] => {\r\n try {\r\n return Array.from(new Set([...this.getChild(), ...value])).sort()\r\n } catch (error) {\r\n return value\r\n }\r\n }\r\n\r\n setItems = (options: string[], value: string[]): string[] => {\r\n const list = Array.from(new Set([...options, ...value])).sort()\r\n this.setChild(list)\r\n return list\r\n }\r\n\r\n delete = (value: string) => {\r\n const list = this.getChild().filter((x) => x !== value)\r\n this.setChild(list)\r\n return list\r\n }\r\n}\r\n"],"names":["CreateAutocompleteChip","params","separator","limitTags","storeItems","saveLocalStorageByKey","AutocompleteChipStore","initial","undefined","AutocompleteChip","props","_this","_classCallCheck","_callSuper","_defineProperty","e","value","_storeItems$delete","preventDefault","stopPropagation","console","log","list","setState","options","_","newValue","_storeItems$setItems","setItems","state","refInput","join","name","onBlur","_ref","_params$optionItems","_this$props$slots","isSelectedOption","findIndex","x","optionItems","slots","_params$optionItems2","_storeItems$getItemsA","items","getItemsAndMerge","_this$props","label","placeholder","messageErrors","eMessage","getErrorMessage","error","helperText","message","_data$name","_value$split$filter","_this$props2","data","toString","split","filter","getDefaultValue","getSelectOptions","_inherits","Component","_createClass","key","_this2","this","_jsxs","_Fragment","children","_jsx","Autocomplete","multiple","freeSolo","onChange","handleAddOption","renderOption","option","_createElement","ItemOption","_objectSpread","Typography","variant","sx","flex","isBtnRemoveOption","Tooltip","title","arrow","placement","IconButton","size","onClick","handleRemoveItem","RemoveIcon","fontSize","renderTags","tagValue","getTagProps","map","index","Chip","renderInput","TextField","getTextFieldProps","ref","hidden","type","defaultValue","styled","display","alignItems","_this3","res","window","localStorage","getItem","storeKeyRoot","JSON","parse","getRoot","storeKey","setItem","stringify","obj","setRoot","Array","from","Set","concat","_toConsumableArray","getChild","sort","setChild","_AutocompleteChipStore"],"mappings":"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"}

package/dist/src/form/create.color-picker.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{defineProperty as t,inherits as e,createClass as a,classCallCheck as n,callSuper as r}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as o}from"react/jsx-runtime";import{Component as l}from"react";import{styled as i,TextField as u,InputAdornment as s}from"@mui/material";function c(){return function(){function i(e){var a;return n(this,i),a=r(this,i,[e]),t(a,"handleColorChange",(function(t){var e=t.target.value;a.setState({value:e})})),t(a,"handleInputChange",(function(t){var e=t.target.value;e.startsWith("#")||(e="#"+e.replace(/[^a-fA-F0-9]/g,"")),a.setState({value:e})})),t(a,"handleBlur",(function(){var t=a.state.value.trim();/^#[0-9A-Fa-f]{6}$/.test(t)||a.setState({value:a.getDefaultValue(a.props)})})),a.state={value:a.getDefaultValue(e)},a}return e(i,l),a(i,[{key:"shouldComponentUpdate",value:function(t){var e=this.getDefaultValue(this.props),a=this.getDefaultValue(t);return e===a||(this.setState({value:a}),!1)}},{key:"render",value:function(){var t,e=null===(t=this.props.name)||void 0===t?void 0:t.toString();return o(p,{name:e,label:this.props.label,value:this.state.value,onChange:this.handleInputChange,onBlur:this.handleBlur,variant:"outlined",fullWidth:!0,className:h.root,inputProps:{maxLength:7,style:{paddingLeft:0}},InputProps:{startAdornment:o(s,{position:"start",children:o("div",{className:h.icon,children:o("input",{type:"color",value:this.state.value,onChange:this.handleColorChange,style:{}})})})}})}},{key:"getDefaultValue",value:function(t){var e,a=t.name,n=t.data;return a&&(null==n||null===(e=n[a])||void 0===e?void 0:e.toString())||"#000000"}}])}()}var h={root:"DinoColorPicker-root",icon:"DinoColorPicker-icon"},p=i(u)((function(e){var a,n=e.theme,r=e.value,o="var(--color-picker-icon-size, ".concat(n.spacing(3.5),")"),l=r||"#000000";return t({},(a="icon","".concat("",".").concat(h[a]).concat("")),{width:o,height:o,backgroundColor:l,borderRadius:"50%",boxShadow:"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",'input[type="color"]':{width:"100%",height:"100%",border:"none",outline:"none",padding:0,background:"none",opacity:0,cursor:"pointer"}})}));export{c as createColorPicker,c as default};
+import{defineProperty as t,inherits as e,createClass as a,classCallCheck as n,callSuper as r}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as o}from"react/jsx-runtime";import{Component as l}from"react";import{styled as i,TextField as u,InputAdornment as s}from"@mui/material";function c(){return function(){function i(e){var a;return n(this,i),a=r(this,i,[e]),t(a,"handleColorChange",function(t){var e=t.target.value;a.setState({value:e})}),t(a,"handleInputChange",function(t){var e=t.target.value;e.startsWith("#")||(e="#"+e.replace(/[^a-fA-F0-9]/g,"")),a.setState({value:e})}),t(a,"handleBlur",function(){var t=a.state.value.trim();/^#[0-9A-Fa-f]{6}$/.test(t)||a.setState({value:a.getDefaultValue(a.props)})}),a.state={value:a.getDefaultValue(e)},a}return e(i,l),a(i,[{key:"shouldComponentUpdate",value:function(t){var e=this.getDefaultValue(this.props),a=this.getDefaultValue(t);return e===a||(this.setState({value:a}),!1)}},{key:"render",value:function(){var t,e=null===(t=this.props.name)||void 0===t?void 0:t.toString();return o(p,{name:e,label:this.props.label,value:this.state.value,onChange:this.handleInputChange,onBlur:this.handleBlur,variant:"outlined",fullWidth:!0,className:h.root,inputProps:{maxLength:7,style:{paddingLeft:0}},InputProps:{startAdornment:o(s,{position:"start",children:o("div",{className:h.icon,children:o("input",{type:"color",value:this.state.value,onChange:this.handleColorChange,style:{}})})})}})}},{key:"getDefaultValue",value:function(t){var e,a=t.name,n=t.data;return a&&(null==n||null===(e=n[a])||void 0===e?void 0:e.toString())||"#000000"}}])}()}var h={root:"DinoColorPicker-root",icon:"DinoColorPicker-icon"},p=i(u)(function(e){var a,n=e.theme,r=e.value,o="var(--color-picker-icon-size, ".concat(n.spacing(3.5),")"),l=r||"#000000";return t({},(a="icon","".concat("",".").concat(h[a]).concat("")),{width:o,height:o,backgroundColor:l,borderRadius:"50%",boxShadow:"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",'input[type="color"]':{width:"100%",height:"100%",border:"none",outline:"none",padding:0,background:"none",opacity:0,cursor:"pointer"}})});export{c as createColorPicker,c as default};
 //# sourceMappingURL=create.color-picker.js.map

package/dist/src/form/create.color-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"create.color-picker.js","sources":["../../../src/form/create.color-picker.tsx"],"sourcesContent":["import { ChangeEventHandler, Component } from 'react'\r\nimport { TextField, InputAdornment, styled } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\n\r\nexport interface IColorPickerProps<T> extends IFormInputBase<T> {}\r\n\r\nexport interface IColorPickerState {\r\n value: string\r\n}\r\n\r\nexport function createColorPicker<T>() {\r\n class ColorPicker extends Component<IColorPickerProps<T>, IColorPickerState> {\r\n constructor(props: IColorPickerProps<T>) {\r\n super(props)\r\n this.state = { value: this.getDefaultValue(props) }\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IColorPickerProps<T>>): boolean {\r\n const value = this.getDefaultValue(this.props)\r\n const nextValue = this.getDefaultValue(nextProps)\r\n if (value !== nextValue) {\r\n this.setState({ value: nextValue })\r\n return false\r\n }\r\n return true\r\n }\r\n\r\n render() {\r\n const name = this.props.name?.toString()\r\n return (\r\n <TextFieldStyled\r\n name={name}\r\n label={this.props.label}\r\n value={this.state.value}\r\n onChange={this.handleInputChange}\r\n onBlur={this.handleBlur}\r\n variant='outlined'\r\n fullWidth\r\n className={colorPickerClasses.root}\r\n inputProps={{ maxLength: 7, style: { paddingLeft: 0 } }}\r\n InputProps={{\r\n startAdornment: (\r\n <InputAdornment position='start'>\r\n <div className={colorPickerClasses.icon}>\r\n <input type='color' value={this.state.value} onChange={this.handleColorChange} style={{}} />\r\n </div>\r\n </InputAdornment>\r\n )\r\n }}\r\n />\r\n )\r\n }\r\n\r\n getDefaultValue(currentProps: IColorPickerProps<T>) {\r\n const { name, data } = currentProps\r\n return name ? data?.[name]?.toString() \|\| '#000000' : '#000000'\r\n }\r\n\r\n handleColorChange: ChangeEventHandler<HTMLInputElement> = (event) => {\r\n const { value } = event.target\r\n this.setState({ value })\r\n }\r\n\r\n handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\r\n let value = event.target.value\r\n if (!value.startsWith('#')) value = '#' + value.replace(/[^a-fA-F0-9]/g, '')\r\n this.setState({ value })\r\n }\r\n\r\n handleBlur = () => {\r\n const v = this.state.value.trim()\r\n if (!/^#[0-9A-Fa-f]{6}$/.test(v)) {\r\n this.setState({ value: this.getDefaultValue(this.props) })\r\n }\r\n }\r\n }\r\n return ColorPicker\r\n}\r\nexport default createColorPicker\r\n\r\nconst colorPickerClasses = {\r\n root: 'DinoColorPicker-root',\r\n icon: 'DinoColorPicker-icon'\r\n}\r\n\r\nconst getColorPickerClasses = (key: keyof typeof colorPickerClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix \|\| ''}.${colorPickerClasses[key]}${options?.suffix \|\| ''}`\r\n}\r\n\r\nconst TextFieldStyled = styled(TextField)(({ theme, value }) => {\r\n const size = `var(--color-picker-icon-size, ${theme.spacing(3.5)})`\r\n const color = value \|\| '#000000'\r\n return {\r\n [getColorPickerClasses('icon')]: {\r\n width: size,\r\n height: size,\r\n backgroundColor: color,\r\n borderRadius: '50%',\r\n boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',\r\n 'input[type=\"color\"]': {\r\n width: '100%',\r\n height: '100%',\r\n border: 'none',\r\n outline: 'none',\r\n padding: 0,\r\n background: 'none',\r\n opacity: 0,\r\n cursor: 'pointer'\r\n }\r\n }\r\n }\r\n})\r\n"],"names":["createColorPicker","ColorPicker","props","_this","_classCallCheck","_callSuper","_defineProperty","event","value","target","setState","startsWith","replace","v","state","trim","test","getDefaultValue","_inherits","Component","_createClass","key","nextProps","this","nextValue","_this$props$name","name","toString","_jsx","TextFieldStyled","label","onChange","handleInputChange","onBlur","handleBlur","variant","fullWidth","className","colorPickerClasses","root","inputProps","maxLength","style","paddingLeft","InputProps","startAdornment","InputAdornment","position","children","icon","type","handleColorChange","currentProps","_data$name","data","styled","TextField","_ref","theme","size","concat","spacing","color","getColorPickerClasses","width","height","backgroundColor","borderRadius","boxShadow","border","outline","padding","background","opacity","cursor"],"mappings":"4SAUgBA,IAkEd,kBAhEE,SAAAC,EAAYC,GAA2B,IAAAC,EAEc,OAFdC,OAAAH,GACrCE,EAAAE,EAAAJ,KAAAA,GAAMC,IAAMI,EAAAH,EA6C4C,~~qBAAA~~,SAACI,GACzD,IAAQC,EAAUD,EAAME,OAAhBD,MACRL,EAAKO,SAAS,CAAEF,MAAAA,~~OACjBF~~,EAAAH,EAEyD,~~qBAAA~~,SAACI,GACzD,IAAIC,EAAQD,EAAME,OAAOD,MACpBA,EAAMG,WAAW,OAAMH,EAAQ,IAAMA,EAAMI,QAAQ,gBAAiB,KACzET,EAAKO,SAAS,CAAEF,MAAAA,~~OACjBF~~,EAAAH,EAAA,~~cAEY~~,WACX,IAAMU,EAAIV,EAAKW,MAAMN,MAAMO,OACtB,oBAAoBC,KAAKH,IAC5BV,EAAKO,SAAS,CAAEF,MAAOL,EAAKc,gBAAgBd,EAAKD,~~YA1DnDC~~,EAAKW,MAAQ,CAAEN,MAAOL,EAAKc,gBAAgBf,IAAQC,CACrD,CAAC,OAAAe,EAAAjB,EAJuBkB,GAIvBC,EAAAnB,EAAA,CAAA,CAAAoB,IAAA,wBAAAb,MAED,SAAsBc,GACpB,IAAMd,EAAQe,KAAKN,gBAAgBM,KAAKrB,OAClCsB,EAAYD,KAAKN,gBAAgBK,GACvC,OAAId,IAAUgB,IACZD,KAAKb,SAAS,CAAEF,MAAOgB,KAChB,EAGX,GAAC,CAAAH,IAAA,SAAAb,MAED,WAAM,IAAAiB,EACEC,EAAsB,QAAlBD,EAAGF,KAAKrB,MAAMwB,YAAXD,IAAeA,OAAfA,EAAAA,EAAiBE,WAC9B,OACEC,EAACC,EAAe,CACdH,KAAMA,EACNI,MAAOP,KAAKrB,MAAM4B,MAClBtB,MAAOe,KAAKT,MAAMN,MAClBuB,SAAUR,KAAKS,kBACfC,OAAQV,KAAKW,WACbC,QAAQ,WACRC,WAAS,EACTC,UAAWC,EAAmBC,KAC9BC,WAAY,CAAEC,UAAW,EAAGC,MAAO,CAAEC,YAAa,IAClDC,WAAY,CACVC,eACEjB,EAACkB,EAAe,CAAAC,SAAS,QAAOC,SAC9BpB,EAAK,MAAA,CAAAS,UAAWC,EAAmBW,KACjCD,SAAApB,EAAA,QAAA,CAAOsB,KAAK,QAAQ1C,MAAOe,KAAKT,MAAMN,MAAOuB,SAAUR,KAAK4B,kBAAmBT,MAAO,CAAA,UAOpG,GAAC,CAAArB,IAAA,kBAAAb,MAED,SAAgB4C,GAAkC,IAAAC,EACxC3B,EAAe0B,EAAf1B,KAAM4B,EAASF,EAATE,KACd,OAAO5B,IAAO4B,SAAYD,QAARA,EAAJC,EAAO5B,UAAP2B,IAAYA,OAAZA,EAAAA,EAAc1B,aAA0B,SACxD,IAAC,GAqBL,CAGA,IAAMW,EAAqB,CACzBC,KAAM,uBACNU,KAAM,wBAOFpB,EAAkB0B,EAAOC,EAAPD,~~EAAkB~~,SAAAE,GAAqB,IAJhCpC,EAIcqC,EAAKD,EAALC,MAAOlD,EAAKiD,EAALjD,MAC5CmD,EAAIC,iCAAAA,OAAoCF,EAAMG,QAAQ,KAAO,KAC7DC,EAAQtD,GAAS,UACvB,OAAAF,EACGyD,CAAAA,GAR0B1C,EAQJ,OAPzB,GAAAuC,OAA6B,QAAEA,OAAItB,EAAmBjB,IAAIuC,OAAsB,KAO7C,CAC/BI,MAAOL,EACPM,OAAQN,EACRO,gBAAiBJ,EACjBK,aAAc,MACdC,UAAW,wCACX,sBAAuB,CACrBJ,MAAO,OACPC,OAAQ,OACRI,OAAQ,OACRC,QAAS,OACTC,QAAS,EACTC,WAAY,OACZC,QAAS,EACTC,OAAQ,YAIhB"}
1	+ {"version":3,"file":"create.color-picker.js","sources":["../../../src/form/create.color-picker.tsx"],"sourcesContent":["import { ChangeEventHandler, Component } from 'react'\r\nimport { TextField, InputAdornment, styled } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\n\r\nexport interface IColorPickerProps<T> extends IFormInputBase<T> {}\r\n\r\nexport interface IColorPickerState {\r\n value: string\r\n}\r\n\r\nexport function createColorPicker<T>() {\r\n class ColorPicker extends Component<IColorPickerProps<T>, IColorPickerState> {\r\n constructor(props: IColorPickerProps<T>) {\r\n super(props)\r\n this.state = { value: this.getDefaultValue(props) }\r\n }\r\n\r\n shouldComponentUpdate(nextProps: Readonly<IColorPickerProps<T>>): boolean {\r\n const value = this.getDefaultValue(this.props)\r\n const nextValue = this.getDefaultValue(nextProps)\r\n if (value !== nextValue) {\r\n this.setState({ value: nextValue })\r\n return false\r\n }\r\n return true\r\n }\r\n\r\n render() {\r\n const name = this.props.name?.toString()\r\n return (\r\n <TextFieldStyled\r\n name={name}\r\n label={this.props.label}\r\n value={this.state.value}\r\n onChange={this.handleInputChange}\r\n onBlur={this.handleBlur}\r\n variant='outlined'\r\n fullWidth\r\n className={colorPickerClasses.root}\r\n inputProps={{ maxLength: 7, style: { paddingLeft: 0 } }}\r\n InputProps={{\r\n startAdornment: (\r\n <InputAdornment position='start'>\r\n <div className={colorPickerClasses.icon}>\r\n <input type='color' value={this.state.value} onChange={this.handleColorChange} style={{}} />\r\n </div>\r\n </InputAdornment>\r\n )\r\n }}\r\n />\r\n )\r\n }\r\n\r\n getDefaultValue(currentProps: IColorPickerProps<T>) {\r\n const { name, data } = currentProps\r\n return name ? data?.[name]?.toString() \|\| '#000000' : '#000000'\r\n }\r\n\r\n handleColorChange: ChangeEventHandler<HTMLInputElement> = (event) => {\r\n const { value } = event.target\r\n this.setState({ value })\r\n }\r\n\r\n handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\r\n let value = event.target.value\r\n if (!value.startsWith('#')) value = '#' + value.replace(/[^a-fA-F0-9]/g, '')\r\n this.setState({ value })\r\n }\r\n\r\n handleBlur = () => {\r\n const v = this.state.value.trim()\r\n if (!/^#[0-9A-Fa-f]{6}$/.test(v)) {\r\n this.setState({ value: this.getDefaultValue(this.props) })\r\n }\r\n }\r\n }\r\n return ColorPicker\r\n}\r\nexport default createColorPicker\r\n\r\nconst colorPickerClasses = {\r\n root: 'DinoColorPicker-root',\r\n icon: 'DinoColorPicker-icon'\r\n}\r\n\r\nconst getColorPickerClasses = (key: keyof typeof colorPickerClasses, options?: { prefix?: string; suffix?: string }) => {\r\n return `${options?.prefix \|\| ''}.${colorPickerClasses[key]}${options?.suffix \|\| ''}`\r\n}\r\n\r\nconst TextFieldStyled = styled(TextField)(({ theme, value }) => {\r\n const size = `var(--color-picker-icon-size, ${theme.spacing(3.5)})`\r\n const color = value \|\| '#000000'\r\n return {\r\n [getColorPickerClasses('icon')]: {\r\n width: size,\r\n height: size,\r\n backgroundColor: color,\r\n borderRadius: '50%',\r\n boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px',\r\n 'input[type=\"color\"]': {\r\n width: '100%',\r\n height: '100%',\r\n border: 'none',\r\n outline: 'none',\r\n padding: 0,\r\n background: 'none',\r\n opacity: 0,\r\n cursor: 'pointer'\r\n }\r\n }\r\n }\r\n})\r\n"],"names":["createColorPicker","ColorPicker","props","_this","_classCallCheck","_callSuper","_defineProperty","event","value","target","setState","startsWith","replace","v","state","trim","test","getDefaultValue","_inherits","Component","_createClass","key","nextProps","this","nextValue","_this$props$name","name","toString","_jsx","TextFieldStyled","label","onChange","handleInputChange","onBlur","handleBlur","variant","fullWidth","className","colorPickerClasses","root","inputProps","maxLength","style","paddingLeft","InputProps","startAdornment","InputAdornment","position","children","icon","type","handleColorChange","currentProps","_data$name","data","styled","TextField","_ref","theme","size","concat","spacing","color","getColorPickerClasses","width","height","backgroundColor","borderRadius","boxShadow","border","outline","padding","background","opacity","cursor"],"mappings":"4SAUgBA,IAkEd,kBAhEE,SAAAC,EAAYC,GAA2B,IAAAC,EAEc,OAFdC,OAAAH,GACrCE,EAAAE,EAAAJ,KAAAA,GAAMC,IAAMI,EAAAH,EA6C4C,oBAAA,SAACI,GACzD,IAAQC,EAAUD,EAAME,OAAhBD,MACRL,EAAKO,SAAS,CAAEF,MAAAA,MACjBF,EAAAH,EAEyD,oBAAA,SAACI,GACzD,IAAIC,EAAQD,EAAME,OAAOD,MACpBA,EAAMG,WAAW,OAAMH,EAAQ,IAAMA,EAAMI,QAAQ,gBAAiB,KACzET,EAAKO,SAAS,CAAEF,MAAAA,MACjBF,EAAAH,EAAA,aAEY,WACX,IAAMU,EAAIV,EAAKW,MAAMN,MAAMO,OACtB,oBAAoBC,KAAKH,IAC5BV,EAAKO,SAAS,CAAEF,MAAOL,EAAKc,gBAAgBd,EAAKD,WA1DnDC,EAAKW,MAAQ,CAAEN,MAAOL,EAAKc,gBAAgBf,IAAQC,CACrD,CAAC,OAAAe,EAAAjB,EAJuBkB,GAIvBC,EAAAnB,EAAA,CAAA,CAAAoB,IAAA,wBAAAb,MAED,SAAsBc,GACpB,IAAMd,EAAQe,KAAKN,gBAAgBM,KAAKrB,OAClCsB,EAAYD,KAAKN,gBAAgBK,GACvC,OAAId,IAAUgB,IACZD,KAAKb,SAAS,CAAEF,MAAOgB,KAChB,EAGX,GAAC,CAAAH,IAAA,SAAAb,MAED,WAAM,IAAAiB,EACEC,EAAsB,QAAlBD,EAAGF,KAAKrB,MAAMwB,YAAXD,IAAeA,OAAfA,EAAAA,EAAiBE,WAC9B,OACEC,EAACC,EAAe,CACdH,KAAMA,EACNI,MAAOP,KAAKrB,MAAM4B,MAClBtB,MAAOe,KAAKT,MAAMN,MAClBuB,SAAUR,KAAKS,kBACfC,OAAQV,KAAKW,WACbC,QAAQ,WACRC,WAAS,EACTC,UAAWC,EAAmBC,KAC9BC,WAAY,CAAEC,UAAW,EAAGC,MAAO,CAAEC,YAAa,IAClDC,WAAY,CACVC,eACEjB,EAACkB,EAAe,CAAAC,SAAS,QAAOC,SAC9BpB,EAAK,MAAA,CAAAS,UAAWC,EAAmBW,KACjCD,SAAApB,EAAA,QAAA,CAAOsB,KAAK,QAAQ1C,MAAOe,KAAKT,MAAMN,MAAOuB,SAAUR,KAAK4B,kBAAmBT,MAAO,CAAA,UAOpG,GAAC,CAAArB,IAAA,kBAAAb,MAED,SAAgB4C,GAAkC,IAAAC,EACxC3B,EAAe0B,EAAf1B,KAAM4B,EAASF,EAATE,KACd,OAAO5B,IAAO4B,SAAYD,QAARA,EAAJC,EAAO5B,UAAP2B,IAAYA,OAAZA,EAAAA,EAAc1B,aAA0B,SACxD,IAAC,GAqBL,CAGA,IAAMW,EAAqB,CACzBC,KAAM,uBACNU,KAAM,wBAOFpB,EAAkB0B,EAAOC,EAAPD,CAAkB,SAAAE,GAAqB,IAJhCpC,EAIcqC,EAAKD,EAALC,MAAOlD,EAAKiD,EAALjD,MAC5CmD,EAAIC,iCAAAA,OAAoCF,EAAMG,QAAQ,KAAO,KAC7DC,EAAQtD,GAAS,UACvB,OAAAF,EACGyD,CAAAA,GAR0B1C,EAQJ,OAPzB,GAAAuC,OAA6B,QAAEA,OAAItB,EAAmBjB,IAAIuC,OAAsB,KAO7C,CAC/BI,MAAOL,EACPM,OAAQN,EACRO,gBAAiBJ,EACjBK,aAAc,MACdC,UAAW,wCACX,sBAAuB,CACrBJ,MAAO,OACPC,OAAQ,OACRI,OAAQ,OACRC,QAAS,OACTC,QAAS,EACTC,WAAY,OACZC,QAAS,EACTC,OAAQ,YAIhB"}