dinocollab-core 1.0.17 → 1.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/table/ui.units.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{objectWithoutProperties as e,objectSpread2 as r,slicedToArray as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as t,Fragment as
|
|
1
|
+
import{objectWithoutProperties as e,objectSpread2 as r,slicedToArray as i}from"../_virtual/_rollupPluginBabelHelpers.js";import{jsx as t,Fragment as a,jsxs as l}from"react/jsx-runtime";import{useState as n,useEffect as o}from"react";import{styled as p,Typography as c,Box as m,Chip as s,Tooltip as u,IconButton as d,Divider as f}from"@mui/material";import v from"@mui/icons-material/OpenInNew";import{mergeObjects as g}from"../utils/helpers.js";import"../utils/dayjs-config.js";import"react-router-dom";import"../utils/query-param.js";import"../components/breadcrumbs.js";import"../components/buttons.js";import x from"../components/copy-to-clipboard.js";import"../components/create.multi-select-dropdown.js";import{HelpTooltipWrap as h}from"../components/help-tooltip.js";import"../components/text-editor.js";import b from"dayjs";var y=["children"],k=function(e,i){return function(l){var n,o,p,c,m;return l.value?t(j,r(r({onClick:l.onClick},null===(n=l.slots)||void 0===n?void 0:n.typographyProps),{},{sx:(p=l.value,c=l.sx,m=l.slots,Object.assign({},p?e[p]:{},null==i?void 0:i.sx,c,null==m||null===(o=m.typographyProps)||void 0===o?void 0:o.sx)),children:l.title||l.value})):t(a,{})}},j=p(c)({borderRadius:"4px",fontSize:"0.8rem",padding:"4px 9px",fontWeight:600,minWidth:"70px",textAlign:"center",color:"#ffffff",display:"inline-block"}),w=function(e){var r,a=n(null!==(r=e.imageUri)&&void 0!==r?r:e.fallbackSrc),p=i(a,2),s=p[0],u=p[1];return o((function(){var r;u(null!==(r=e.imageUri)&&void 0!==r?r:e.fallbackSrc)}),[e.imageUri,e.fallbackSrc]),l(m,{sx:{display:"flex",alignItems:"center",height:"100%",gap:"10px"},children:[t(F,{src:s,onError:function(){return u(e.fallbackSrc)}}),t(c,{variant:"body1",children:e.value})]})},S=function(e){var r,a=n(null!==(r=e.imageUri)&&void 0!==r?r:e.imageFallback),l=i(a,2),p=l[0],c=l[1];return o((function(){var r;c(null!==(r=e.imageUri)&&void 0!==r?r:e.imageFallback)}),[e.imageUri,e.imageFallback]),t(F,{src:p,onError:function(){return c(e.imageFallback)},sx:e.sx})},F=p("img")({backgroundRepeat:"no-repeat",height:"50px",width:"50px",backgroundSize:"contain",borderRadius:"8px",boxShadow:"rgba(0, 0, 0, 0.16) 0px 1px 4px"}),U=function(e){var i,a=null!==(i=e.valueFormatted)&&void 0!==i?i:e.value,n=!!e.copyToClipboard&&!!a;return l(W,r(r({title:a},e.wrapProps),{},{children:[e.imageUrl&&t(S,{imageUri:e.imageUrl,sx:{mr:"10px"},imageFallback:e.imageFallbackSrc}),t(c,r(r({variant:"body2",component:"span",noWrap:!0,sx:{flex:1}},e.typographyProps),{},{children:a})),a&&!0===e.openInNewTab&&t(u,{arrow:!0,title:"Open new tab",children:t(d,{component:"a",href:a,target:"_blank",children:t(v,{fontSize:"small",sx:{color:"#1A75E2"}})})}),n&&t(x,{value:a}),a&&!0===e.beforeLine&&t(f,{flexItem:!0,variant:"middle",orientation:"vertical"})]}))},W=p((function(i){var a=i.children,l=e(i,y);return t(m,r(r({},l),{},{children:t("div",{children:a})}))}))({flex:1,width:"100%",height:"100%",position:"relative",top:0,left:0,"& > div":{display:"flex",alignItems:"center",width:"100%",height:"100%",position:"absolute",top:0,left:0}}),I=function(e){var r,i;if("string"!=typeof e.value)return null!==(r=e.value)&&void 0!==r?r:t(a,{});var n=e.value.split(null!==(i=null==e?void 0:e.separator)&&void 0!==i?i:"|").filter((function(e){return!!e})),o=null!=e&&e.maximum?n.slice(0,e.maximum):n,p=null!=e&&e.maximum&&n.length>e.maximum?n.length-e.maximum:0;return l(m,{sx:{display:"flex",alignItems:"center",flexWrap:"wrap",gap:"4px",height:"100%"},children:[o.map((function(r,i){return t(P,{label:e.valueFormatter?e.valueFormatter(r):r,size:"small"},"key"+i)})),p>0&&t(h,{title:"Artists",content:t(m,{sx:{display:"flex",alignItems:"center",flexWrap:"wrap",gap:"4px"},children:n.map((function(e,r){return t(P,{label:e,size:"small"},"key"+r)}))}),children:t(P,{label:"+".concat(p),size:"small"},"remaining")})]})},P=p(s)({lineHeight:1}),z=function(e){try{var i,a,l=null!==(i=null==e?void 0:e.showRelative)&&void 0!==i&&i,n=b(e.value),o=n.format(e.formatString),p=l?"".concat(o," (").concat(b().to(n),")"):o,m=e.styledGetter?e.styledGetter(e.value):{flex:1},s=g({},null!==(a=e.typographyProps)&&void 0!==a?a:{},{sx:m});return t(c,r(r({variant:"body2",component:"span",noWrap:!0},s),{},{children:p}))}catch(e){return t(c,{variant:"body2",component:"span",noWrap:!0,children:"format invalid"})}};export{U as CellBase,I as CellChips,z as CellDate,w as CellImageSmall,k as CreateStatusCell,S as ImageSmallFallback};
|
|
2
2
|
//# sourceMappingURL=ui.units.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ui.units.js","sources":["../../src/table/ui.units.tsx"],"sourcesContent":["import React, { ComponentType, FC, PropsWithChildren, useEffect, useState } from 'react'\r\nimport { Box, BoxProps, Chip, Divider, IconButton, styled, SxProps, Theme, Tooltip, Typography, TypographyProps } from '@mui/material'\r\nimport OpenInNewIcon from '@mui/icons-material/OpenInNew'\r\nimport { dayjsCustom, mergeObjects } from '../utils'\r\nimport { CopyToClipboard, HelpTooltipWrap } from '../components'\r\n\r\n//#region CellImageSmall\r\nexport type IStatusCellConfig<T extends string> = { [key in T]: SxProps<Theme> }\r\n\r\nexport interface IStatusCellOptions {\r\n sx?: SxProps<Theme>\r\n}\r\n\r\nexport interface IStatusCellProps<T extends string> extends PropsWithChildren {\r\n value?: T\r\n title?: string\r\n sx?: SxProps<Theme>\r\n onClick?: TypographyProps['onClick']\r\n slots?: {\r\n typographyProps?: TypographyProps\r\n }\r\n}\r\n\r\nexport const CreateStatusCell = function <T extends string>(\r\n config: IStatusCellConfig<T>,\r\n options?: IStatusCellOptions\r\n): ComponentType<IStatusCellProps<T>> {\r\n const StatusCell: FC<IStatusCellProps<T>> = (props) => {\r\n const getSxProps = (): SxProps<Theme> => {\r\n const { value: data, sx, slots } = props\r\n return Object.assign({}, data ? config[data] : {}, options?.sx, sx, slots?.typographyProps?.sx)\r\n }\r\n\r\n if (!props.value) return <></>\r\n return (\r\n <CustomTypography onClick={props.onClick} {...props.slots?.typographyProps} sx={getSxProps()}>\r\n {props.title || props.value}\r\n </CustomTypography>\r\n )\r\n }\r\n return StatusCell\r\n}\r\n\r\nconst CustomTypography = styled(Typography)({\r\n borderRadius: '4px',\r\n fontSize: '0.8rem',\r\n padding: '4px 9px',\r\n fontWeight: 600,\r\n minWidth: '70px',\r\n textAlign: 'center',\r\n color: '#ffffff',\r\n display: 'inline-block'\r\n})\r\n\r\n//#region CellImageSmall\r\ninterface CellImageSmallProps {\r\n value: string\r\n imageUri?: string\r\n fallbackSrc?: string\r\n}\r\n\r\nexport const CellImageSmall: FC<CellImageSmallProps> = (props) => {\r\n const [imgSrc, setImgSrc] = useState(props.imageUri ?? props.fallbackSrc)\r\n useEffect(() => {\r\n setImgSrc(props.imageUri ?? props.fallbackSrc)\r\n }, [props.imageUri, props.fallbackSrc])\r\n return (\r\n <Box sx={{ display: 'flex', alignItems: 'center', height: '100%', gap: '10px' }}>\r\n <ImageSmall src={imgSrc} onError={() => setImgSrc(props.fallbackSrc)} />\r\n <Typography variant='body1'>{props.value}</Typography>\r\n </Box>\r\n )\r\n}\r\n\r\ninterface ImageSmallFallbackProps {\r\n imageUri?: string\r\n imageFallback?: string\r\n sx?: SxProps<Theme>\r\n}\r\n\r\nexport const ImageSmallFallback: FC<ImageSmallFallbackProps> = (props) => {\r\n const [imgSrc, setImgSrc] = useState(props.imageUri ?? props.imageFallback)\r\n useEffect(() => {\r\n setImgSrc(props.imageUri ?? props.imageFallback)\r\n }, [props.imageUri, props.imageFallback])\r\n return <ImageSmall src={imgSrc} onError={() => setImgSrc(props.imageFallback)} sx={props.sx} />\r\n}\r\n\r\nconst ImageSmall = styled('img')({\r\n backgroundRepeat: 'no-repeat',\r\n height: '50px',\r\n width: '50px',\r\n backgroundSize: 'contain',\r\n borderRadius: '8px',\r\n boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px'\r\n})\r\n//#endregion\r\n\r\n//#region CellBase\r\n\r\nexport interface CellBaseOptions {\r\n openInNewTab?: boolean\r\n beforeLine?: boolean\r\n copyToClipboard?: boolean\r\n imageUrl?: string\r\n imageFallbackSrc?: string\r\n valueFormatter?: (value?: string) => string\r\n wrapProps?: BoxProps\r\n typographyProps?: TypographyProps\r\n}\r\n\r\ninterface CellBaseProps extends CellBaseOptions {\r\n value?: string\r\n valueFormatted?: string\r\n}\r\n\r\nexport const CellBase: FC<CellBaseProps> = (props) => {\r\n const value = props.valueFormatted ?? props.value\r\n const isCopyToClipboard = !!props.copyToClipboard && !!value\r\n return (\r\n <CellBaseWrap title={value} {...props.wrapProps}>\r\n {props.imageUrl && <ImageSmallFallback imageUri={props.imageUrl} sx={{ mr: '10px' }} imageFallback={props.imageFallbackSrc} />}\r\n <Typography variant='body2' component='span' noWrap sx={{ flex: 1 }} {...props.typographyProps}>\r\n {value}\r\n </Typography>\r\n {value && props.openInNewTab === true && (\r\n <Tooltip arrow title='Open new tab'>\r\n <IconButton component='a' href={value} target='_blank'>\r\n <OpenInNewIcon fontSize='small' sx={{ color: '#1A75E2' }} />\r\n </IconButton>\r\n </Tooltip>\r\n )}\r\n {isCopyToClipboard && <CopyToClipboard value={value} />}\r\n {value && props.beforeLine === true && <Divider flexItem variant='middle' orientation='vertical' />}\r\n </CellBaseWrap>\r\n )\r\n}\r\n\r\nconst CellBaseWrap = styled(({ children, ...props }: BoxProps) => (\r\n <Box {...props}>\r\n <div>{children}</div>\r\n </Box>\r\n))({\r\n flex: 1,\r\n width: '100%',\r\n height: '100%',\r\n position: 'relative',\r\n top: 0,\r\n left: 0,\r\n '& > div': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n width: '100%',\r\n height: '100%',\r\n position: 'absolute',\r\n top: 0,\r\n left: 0\r\n }\r\n})\r\n//#endregion\r\n\r\n//#region Chips\r\nexport interface CellChipsProps {\r\n value?: string\r\n separator?: string\r\n maximum?: number\r\n}\r\n\r\nexport const CellChips: FC<CellChipsProps> = (props) => {\r\n if (typeof props.value !== 'string') return props.value ?? <></>\r\n\r\n const list = props.value.split(props?.separator ?? '|').filter((x) => !!x)\r\n const displayList = props?.maximum ? list.slice(0, props.maximum) : list\r\n const remainingCount = props?.maximum && list.length > props.maximum ? list.length - props.maximum : 0\r\n\r\n return (\r\n <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px', height: '100%' }}>\r\n {displayList.map((x, i) => (\r\n <CustomChip key={'key' + i} label={x} size='small' />\r\n ))}\r\n {remainingCount > 0 && (\r\n <HelpTooltipWrap\r\n title='Artists'\r\n content={\r\n <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px' }}>\r\n {list.map((x, i) => (\r\n <CustomChip key={'key' + i} label={x} size='small' />\r\n ))}\r\n </Box>\r\n }\r\n >\r\n <CustomChip key='remaining' label={`+${remainingCount}`} size='small' />\r\n </HelpTooltipWrap>\r\n )}\r\n </Box>\r\n )\r\n}\r\n\r\nconst CustomChip = styled(Chip)({\r\n lineHeight: 1\r\n})\r\n//#endregion\r\n\r\n//#region Date\r\nexport interface CellDatePropsOwner {\r\n formatString?: string\r\n showRelative?: boolean\r\n typographyProps?: TypographyProps\r\n styledGetter?: (value: any) => SxProps<Theme>\r\n}\r\nexport interface CellDateProps extends CellDatePropsOwner {\r\n value: any\r\n}\r\n\r\nexport const CellDate: FC<CellDateProps> = (props) => {\r\n try {\r\n const showRelative = props?.showRelative ?? false\r\n const date = dayjsCustom(props.value)\r\n const formatted = date.format(props.formatString)\r\n const value = showRelative ? `${formatted} (${dayjsCustom().to(date)})` : formatted\r\n const sx = props.styledGetter ? props.styledGetter(props.value) : { flex: 1 }\r\n const mergeTypographyProps = mergeObjects<TypographyProps>({}, props.typographyProps ?? {}, { sx })\r\n return (\r\n <Typography variant='body2' component='span' noWrap {...mergeTypographyProps}>\r\n {value}\r\n </Typography>\r\n )\r\n } catch {\r\n return (\r\n <Typography variant='body2' component='span' noWrap>\r\n format invalid\r\n </Typography>\r\n )\r\n }\r\n}\r\n//#endregion\r\n"],"names":["CreateStatusCell","config","options","props","_props$slots","_slots$typographyProp","data","sx","slots","value","_jsx","CustomTypography","_objectSpread","onClick","typographyProps","Object","assign","children","title","styled","Typography","borderRadius","fontSize","padding","fontWeight","minWidth","textAlign","color","display","CellImageSmall","_props$imageUri","_useState","useState","imageUri","fallbackSrc","_useState2","_slicedToArray","imgSrc","setImgSrc","useEffect","_props$imageUri2","_jsxs","Box","alignItems","height","gap","ImageSmall","src","onError","variant","ImageSmallFallback","_props$imageUri3","_useState3","imageFallback","_useState4","_props$imageUri4","backgroundRepeat","width","backgroundSize","boxShadow","CellBase","_props$valueFormatted","valueFormatted","isCopyToClipboard","copyToClipboard","CellBaseWrap","wrapProps","imageUrl","mr","imageFallbackSrc","component","noWrap","flex","openInNewTab","Tooltip","arrow","IconButton","href","target","OpenInNewIcon","CopyToClipboard","beforeLine","Divider","flexItem","orientation","_ref","_objectWithoutProperties","_excluded","position","top","left","CellChips","_props$value","_props$separator","list","split","separator","filter","x","displayList","maximum","slice","remainingCount","length","flexWrap","map","i","CustomChip","label","size","HelpTooltipWrap","content","concat","Chip","lineHeight","CellDate","_props$showRelative","_props$typographyProp","showRelative","date","dayjsCustom","formatted","format","formatString","to","styledGetter","mergeTypographyProps","mergeObjects","_unused"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ui.units.js","sources":["../../src/table/ui.units.tsx"],"sourcesContent":["import React, { ComponentType, FC, PropsWithChildren, useEffect, useState } from 'react'\r\nimport { Box, BoxProps, Chip, Divider, IconButton, styled, SxProps, Theme, Tooltip, Typography, TypographyProps } from '@mui/material'\r\nimport OpenInNewIcon from '@mui/icons-material/OpenInNew'\r\nimport { dayjsCustom, mergeObjects } from '../utils'\r\nimport { CopyToClipboard, HelpTooltipWrap } from '../components'\r\n\r\n//#region CellImageSmall\r\nexport type IStatusCellConfig<T extends string> = { [key in T]: SxProps<Theme> }\r\n\r\nexport interface IStatusCellOptions {\r\n sx?: SxProps<Theme>\r\n}\r\n\r\nexport interface IStatusCellProps<T extends string> extends PropsWithChildren {\r\n value?: T\r\n title?: string\r\n sx?: SxProps<Theme>\r\n onClick?: TypographyProps['onClick']\r\n slots?: {\r\n typographyProps?: TypographyProps\r\n }\r\n}\r\n\r\nexport const CreateStatusCell = function <T extends string>(\r\n config: IStatusCellConfig<T>,\r\n options?: IStatusCellOptions\r\n): ComponentType<IStatusCellProps<T>> {\r\n const StatusCell: FC<IStatusCellProps<T>> = (props) => {\r\n const getSxProps = (): SxProps<Theme> => {\r\n const { value: data, sx, slots } = props\r\n return Object.assign({}, data ? config[data] : {}, options?.sx, sx, slots?.typographyProps?.sx)\r\n }\r\n\r\n if (!props.value) return <></>\r\n return (\r\n <CustomTypography onClick={props.onClick} {...props.slots?.typographyProps} sx={getSxProps()}>\r\n {props.title || props.value}\r\n </CustomTypography>\r\n )\r\n }\r\n return StatusCell\r\n}\r\n\r\nconst CustomTypography = styled(Typography)({\r\n borderRadius: '4px',\r\n fontSize: '0.8rem',\r\n padding: '4px 9px',\r\n fontWeight: 600,\r\n minWidth: '70px',\r\n textAlign: 'center',\r\n color: '#ffffff',\r\n display: 'inline-block'\r\n})\r\n\r\n//#region CellImageSmall\r\ninterface CellImageSmallProps {\r\n value: string\r\n imageUri?: string\r\n fallbackSrc?: string\r\n}\r\n\r\nexport const CellImageSmall: FC<CellImageSmallProps> = (props) => {\r\n const [imgSrc, setImgSrc] = useState(props.imageUri ?? props.fallbackSrc)\r\n useEffect(() => {\r\n setImgSrc(props.imageUri ?? props.fallbackSrc)\r\n }, [props.imageUri, props.fallbackSrc])\r\n return (\r\n <Box sx={{ display: 'flex', alignItems: 'center', height: '100%', gap: '10px' }}>\r\n <ImageSmall src={imgSrc} onError={() => setImgSrc(props.fallbackSrc)} />\r\n <Typography variant='body1'>{props.value}</Typography>\r\n </Box>\r\n )\r\n}\r\n\r\ninterface ImageSmallFallbackProps {\r\n imageUri?: string\r\n imageFallback?: string\r\n sx?: SxProps<Theme>\r\n}\r\n\r\nexport const ImageSmallFallback: FC<ImageSmallFallbackProps> = (props) => {\r\n const [imgSrc, setImgSrc] = useState(props.imageUri ?? props.imageFallback)\r\n useEffect(() => {\r\n setImgSrc(props.imageUri ?? props.imageFallback)\r\n }, [props.imageUri, props.imageFallback])\r\n return <ImageSmall src={imgSrc} onError={() => setImgSrc(props.imageFallback)} sx={props.sx} />\r\n}\r\n\r\nconst ImageSmall = styled('img')({\r\n backgroundRepeat: 'no-repeat',\r\n height: '50px',\r\n width: '50px',\r\n backgroundSize: 'contain',\r\n borderRadius: '8px',\r\n boxShadow: 'rgba(0, 0, 0, 0.16) 0px 1px 4px'\r\n})\r\n//#endregion\r\n\r\n//#region CellBase\r\n\r\nexport interface CellBaseOptions {\r\n openInNewTab?: boolean\r\n beforeLine?: boolean\r\n copyToClipboard?: boolean\r\n imageUrl?: string\r\n imageFallbackSrc?: string\r\n valueFormatter?: (value?: string) => string\r\n wrapProps?: BoxProps\r\n typographyProps?: TypographyProps\r\n}\r\n\r\ninterface CellBaseProps extends CellBaseOptions {\r\n value?: string\r\n valueFormatted?: string\r\n}\r\n\r\nexport const CellBase: FC<CellBaseProps> = (props) => {\r\n const value = props.valueFormatted ?? props.value\r\n const isCopyToClipboard = !!props.copyToClipboard && !!value\r\n return (\r\n <CellBaseWrap title={value} {...props.wrapProps}>\r\n {props.imageUrl && <ImageSmallFallback imageUri={props.imageUrl} sx={{ mr: '10px' }} imageFallback={props.imageFallbackSrc} />}\r\n <Typography variant='body2' component='span' noWrap sx={{ flex: 1 }} {...props.typographyProps}>\r\n {value}\r\n </Typography>\r\n {value && props.openInNewTab === true && (\r\n <Tooltip arrow title='Open new tab'>\r\n <IconButton component='a' href={value} target='_blank'>\r\n <OpenInNewIcon fontSize='small' sx={{ color: '#1A75E2' }} />\r\n </IconButton>\r\n </Tooltip>\r\n )}\r\n {isCopyToClipboard && <CopyToClipboard value={value} />}\r\n {value && props.beforeLine === true && <Divider flexItem variant='middle' orientation='vertical' />}\r\n </CellBaseWrap>\r\n )\r\n}\r\n\r\nconst CellBaseWrap = styled(({ children, ...props }: BoxProps) => (\r\n <Box {...props}>\r\n <div>{children}</div>\r\n </Box>\r\n))({\r\n flex: 1,\r\n width: '100%',\r\n height: '100%',\r\n position: 'relative',\r\n top: 0,\r\n left: 0,\r\n '& > div': {\r\n display: 'flex',\r\n alignItems: 'center',\r\n width: '100%',\r\n height: '100%',\r\n position: 'absolute',\r\n top: 0,\r\n left: 0\r\n }\r\n})\r\n//#endregion\r\n\r\n//#region Chips\r\nexport interface CellChipsProps {\r\n value?: string\r\n valueFormatter?: (value: string) => string\r\n separator?: string\r\n maximum?: number\r\n}\r\n\r\nexport const CellChips: FC<CellChipsProps> = (props) => {\r\n if (typeof props.value !== 'string') return props.value ?? <></>\r\n\r\n const list = props.value.split(props?.separator ?? '|').filter((x) => !!x)\r\n const displayList = props?.maximum ? list.slice(0, props.maximum) : list\r\n const remainingCount = props?.maximum && list.length > props.maximum ? list.length - props.maximum : 0\r\n\r\n return (\r\n <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px', height: '100%' }}>\r\n {displayList.map((x, i) => (\r\n <CustomChip key={'key' + i} label={props.valueFormatter ? props.valueFormatter(x) : x} size='small' />\r\n ))}\r\n {remainingCount > 0 && (\r\n <HelpTooltipWrap\r\n title='Artists'\r\n content={\r\n <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4px' }}>\r\n {list.map((x, i) => (\r\n <CustomChip key={'key' + i} label={x} size='small' />\r\n ))}\r\n </Box>\r\n }\r\n >\r\n <CustomChip key='remaining' label={`+${remainingCount}`} size='small' />\r\n </HelpTooltipWrap>\r\n )}\r\n </Box>\r\n )\r\n}\r\n\r\nconst CustomChip = styled(Chip)({\r\n lineHeight: 1\r\n})\r\n//#endregion\r\n\r\n//#region Date\r\nexport interface CellDatePropsOwner {\r\n formatString?: string\r\n showRelative?: boolean\r\n typographyProps?: TypographyProps\r\n styledGetter?: (value: any) => SxProps<Theme>\r\n}\r\nexport interface CellDateProps extends CellDatePropsOwner {\r\n value: any\r\n}\r\n\r\nexport const CellDate: FC<CellDateProps> = (props) => {\r\n try {\r\n const showRelative = props?.showRelative ?? false\r\n const date = dayjsCustom(props.value)\r\n const formatted = date.format(props.formatString)\r\n const value = showRelative ? `${formatted} (${dayjsCustom().to(date)})` : formatted\r\n const sx = props.styledGetter ? props.styledGetter(props.value) : { flex: 1 }\r\n const mergeTypographyProps = mergeObjects<TypographyProps>({}, props.typographyProps ?? {}, { sx })\r\n return (\r\n <Typography variant='body2' component='span' noWrap {...mergeTypographyProps}>\r\n {value}\r\n </Typography>\r\n )\r\n } catch {\r\n return (\r\n <Typography variant='body2' component='span' noWrap>\r\n format invalid\r\n </Typography>\r\n )\r\n }\r\n}\r\n//#endregion\r\n"],"names":["CreateStatusCell","config","options","props","_props$slots","_slots$typographyProp","data","sx","slots","value","_jsx","CustomTypography","_objectSpread","onClick","typographyProps","Object","assign","children","title","styled","Typography","borderRadius","fontSize","padding","fontWeight","minWidth","textAlign","color","display","CellImageSmall","_props$imageUri","_useState","useState","imageUri","fallbackSrc","_useState2","_slicedToArray","imgSrc","setImgSrc","useEffect","_props$imageUri2","_jsxs","Box","alignItems","height","gap","ImageSmall","src","onError","variant","ImageSmallFallback","_props$imageUri3","_useState3","imageFallback","_useState4","_props$imageUri4","backgroundRepeat","width","backgroundSize","boxShadow","CellBase","_props$valueFormatted","valueFormatted","isCopyToClipboard","copyToClipboard","CellBaseWrap","wrapProps","imageUrl","mr","imageFallbackSrc","component","noWrap","flex","openInNewTab","Tooltip","arrow","IconButton","href","target","OpenInNewIcon","CopyToClipboard","beforeLine","Divider","flexItem","orientation","_ref","_objectWithoutProperties","_excluded","position","top","left","CellChips","_props$value","_props$separator","list","split","separator","filter","x","displayList","maximum","slice","remainingCount","length","flexWrap","map","i","CustomChip","label","valueFormatter","size","HelpTooltipWrap","content","concat","Chip","lineHeight","CellDate","_props$showRelative","_props$typographyProp","showRelative","date","dayjsCustom","formatted","format","formatString","to","styledGetter","mergeTypographyProps","mergeObjects","_unused"],"mappings":"k1BAuBaA,EAAmB,SAC9BC,EACAC,GAeA,OAb4C,SAACC,GAAS,IAAAC,EACZC,EACvBC,EAAMC,EAAIC,EAI3B,OAAKL,EAAMM,MAETC,EAACC,EAAgBC,EAAAA,EAAA,CAACC,QAASV,EAAMU,iBAAOT,EAAMD,EAAMK,aAAK,IAAAJ,OAAA,EAAXA,EAAaU,iBAAe,CAAA,EAAA,CAAEP,IAN7DD,EAAoBH,EAA3BM,MAAaF,EAAcJ,EAAdI,GAAIC,EAAUL,EAAVK,MAClBO,OAAOC,OAAO,CAAE,EAAEV,EAAOL,EAAOK,GAAQ,CAAA,EAAIJ,aAAO,EAAPA,EAASK,GAAIA,EAAIC,SAAsBH,QAAjBA,EAALG,EAAOM,2BAAeT,SAAtBA,EAAwBE,KAKAU,SACzFd,EAAMe,OAASf,EAAMM,SAHDC,OAM1B,CAEH,EAEMC,EAAmBQ,EAAOC,EAAPD,CAAmB,CAC1CE,aAAc,MACdC,SAAU,SACVC,QAAS,UACTC,WAAY,IACZC,SAAU,OACVC,UAAW,SACXC,MAAO,UACPC,QAAS,iBAUEC,EAA0C,SAAC1B,GAAS,IAAA2B,EAC/DC,EAA4BC,EAAuB,QAAfF,EAAC3B,EAAM8B,gBAAQH,IAAAA,EAAAA,EAAI3B,EAAM+B,aAAYC,EAAAC,EAAAL,EAAA,GAAlEM,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAIxB,OAHAI,GAAU,WAAK,IAAAC,EACbF,EAAwB,QAAfE,EAACrC,EAAM8B,gBAAQ,IAAAO,EAAAA,EAAIrC,EAAM+B,YACnC,GAAE,CAAC/B,EAAM8B,SAAU9B,EAAM+B,cAExBO,EAACC,EAAI,CAAAnC,GAAI,CAAEqB,QAAS,OAAQe,WAAY,SAAUC,OAAQ,OAAQC,IAAK,QAAQ5B,SAAA,CAC7EP,EAACoC,EAAW,CAAAC,IAAKV,EAAQW,QAAS,WAAF,OAAQV,EAAUnC,EAAM+B,YAAY,IACpExB,EAACU,EAAU,CAAC6B,QAAQ,QAAOhC,SAAEd,EAAMM,UAGzC,EAQayC,EAAkD,SAAC/C,GAAS,IAAAgD,EACvEC,EAA4BpB,EAAuB,QAAfmB,EAAChD,EAAM8B,gBAAQkB,IAAAA,EAAAA,EAAIhD,EAAMkD,eAAcC,EAAAlB,EAAAgB,EAAA,GAApEf,EAAMiB,EAAA,GAAEhB,EAASgB,EAAA,GAIxB,OAHAf,GAAU,WAAK,IAAAgB,EACbjB,EAAwB,QAAfiB,EAACpD,EAAM8B,gBAAQ,IAAAsB,EAAAA,EAAIpD,EAAMkD,cACnC,GAAE,CAAClD,EAAM8B,SAAU9B,EAAMkD,gBACnB3C,EAACoC,EAAU,CAACC,IAAKV,EAAQW,QAAS,WAAF,OAAQV,EAAUnC,EAAMkD,cAAc,EAAE9C,GAAIJ,EAAMI,IAC3F,EAEMuC,EAAa3B,EAAO,MAAPA,CAAc,CAC/BqC,iBAAkB,YAClBZ,OAAQ,OACRa,MAAO,OACPC,eAAgB,UAChBrC,aAAc,MACdsC,UAAW,oCAsBAC,EAA8B,SAACzD,GAAS,IAAA0D,EAC7CpD,EAA4BoD,QAAvBA,EAAG1D,EAAM2D,sBAAcD,IAAAA,EAAAA,EAAI1D,EAAMM,MACtCsD,IAAsB5D,EAAM6D,mBAAqBvD,EACvD,OACEgC,EAACwB,EAAYrD,EAAAA,EAAA,CAACM,MAAOT,GAAWN,EAAM+D,WAAS,GAAA,CAAAjD,SAAA,CAC5Cd,EAAMgE,UAAYzD,EAACwC,EAAkB,CAACjB,SAAU9B,EAAMgE,SAAU5D,GAAI,CAAE6D,GAAI,QAAUf,cAAelD,EAAMkE,mBAC1G3D,EAACU,EAAUR,EAAAA,EAAA,CAACqC,QAAQ,QAAQqB,UAAU,OAAOC,QAAM,EAAChE,GAAI,CAAEiE,KAAM,IAASrE,EAAMW,iBAAe,GAAA,CAC3FG,SAAAR,KAEFA,IAAgC,IAAvBN,EAAMsE,cACd/D,EAACgE,EAAO,CAACC,OAAK,EAACzD,MAAM,eACnBD,SAAAP,EAACkE,EAAW,CAAAN,UAAU,IAAIO,KAAMpE,EAAOqE,OAAO,SAC5C7D,SAAAP,EAACqE,EAAc,CAAAzD,SAAS,QAAQf,GAAI,CAAEoB,MAAO,iBAIlDoC,GAAqBrD,EAACsE,EAAe,CAACvE,MAAOA,IAC7CA,IAA8B,IAArBN,EAAM8E,YAAuBvE,EAACwE,EAAQ,CAAAC,YAASlC,QAAQ,SAASmC,YAAY,gBAG5F,EAEMnB,EAAe9C,GAAO,SAAAkE,GAAA,IAAGpE,EAAQoE,EAARpE,SAAad,EAAKmF,EAAAD,EAAAE,GAAA,OAC/C7E,EAACgC,EAAG9B,EAAAA,KAAKT,GAAK,GAAA,CAAAc,SACZP,EAAM,MAAA,CAAAO,SAAAA,MACF,GAHaE,CAIlB,CACDqD,KAAM,EACNf,MAAO,OACPb,OAAQ,OACR4C,SAAU,WACVC,IAAK,EACLC,KAAM,EACN,UAAW,CACT9D,QAAS,OACTe,WAAY,SACZc,MAAO,OACPb,OAAQ,OACR4C,SAAU,WACVC,IAAK,EACLC,KAAM,KAaGC,EAAgC,SAACxF,GAAS,IAAAyF,EAAAC,EACrD,GAA2B,iBAAhB1F,EAAMM,MAAoB,OAAkBmF,QAAlBA,EAAOzF,EAAMM,aAAKmF,IAAAA,EAAAA,EAAIlF,QAE3D,IAAMoF,EAAO3F,EAAMM,MAAMsF,MAAsB,QAAjBF,EAAC1F,aAAK,EAALA,EAAO6F,iBAAS,IAAAH,EAAAA,EAAI,KAAKI,QAAO,SAACC,GAAC,QAAOA,KAClEC,EAAchG,SAAAA,EAAOiG,QAAUN,EAAKO,MAAM,EAAGlG,EAAMiG,SAAWN,EAC9DQ,EAAiBnG,SAAAA,EAAOiG,SAAWN,EAAKS,OAASpG,EAAMiG,QAAUN,EAAKS,OAASpG,EAAMiG,QAAU,EAErG,OACE3D,EAACC,EAAI,CAAAnC,GAAI,CAAEqB,QAAS,OAAQe,WAAY,SAAU6D,SAAU,OAAQ3D,IAAK,MAAOD,OAAQ,QAAQ3B,SAAA,CAC7FkF,EAAYM,KAAI,SAACP,EAAGQ,GAAC,OACpBhG,EAACiG,EAA2B,CAAAC,MAAOzG,EAAM0G,eAAiB1G,EAAM0G,eAAeX,GAAKA,EAAGY,KAAK,SAA3E,MAAQJ,EAC1B,IACAJ,EAAiB,GAChB5F,EAACqG,EACC,CAAA7F,MAAM,UACN8F,QACEtG,EAACgC,EAAG,CAACnC,GAAI,CAAEqB,QAAS,OAAQe,WAAY,SAAU6D,SAAU,OAAQ3D,IAAK,OAAO5B,SAC7E6E,EAAKW,KAAI,SAACP,EAAGQ,GAAC,OACbhG,EAACiG,EAA2B,CAAAC,MAAOV,EAAGY,KAAK,SAA1B,MAAQJ,EAC1B,MACGzF,SAGRP,EAACiG,GAA2BC,MAAKK,IAAAA,OAAMX,GAAkBQ,KAAK,SAA9C,iBAK1B,EAEMH,EAAaxF,EAAO+F,EAAP/F,CAAa,CAC9BgG,WAAY,IAeDC,EAA8B,SAACjH,GAC1C,IAAI,IAAAkH,EAAAC,EACIC,EAAkCF,QAAtBA,EAAGlH,aAAK,EAALA,EAAOoH,oBAAYF,IAAAA,GAAAA,EAClCG,EAAOC,EAAYtH,EAAMM,OACzBiH,EAAYF,EAAKG,OAAOxH,EAAMyH,cAC9BnH,EAAQ8G,KAAYN,OAAMS,EAAST,MAAAA,OAAKQ,IAAcI,GAAGL,QAAWE,EACpEnH,EAAKJ,EAAM2H,aAAe3H,EAAM2H,aAAa3H,EAAMM,OAAS,CAAE+D,KAAM,GACpEuD,EAAuBC,EAA8B,WAAEV,EAAEnH,EAAMW,uBAAe,IAAAwG,EAAAA,EAAI,CAAA,EAAI,CAAE/G,GAAAA,IAC9F,OACEG,EAACU,EAAUR,EAAAA,EAAA,CAACqC,QAAQ,QAAQqB,UAAU,OAAOC,QAAW,GAAAwD,GAAoB,GAAA,UACzEtH,IAGN,CAAC,MAAAwH,GACA,OACEvH,EAACU,EAAU,CAAC6B,QAAQ,QAAQqB,UAAU,OAAOC,QAAM,EAAAtD,SAAA,kBAItD,CACH"}
|