@foxford/ui 2.121.2 → 2.122.0-beta-eebeeaa-20260814
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/components/DialogComponent/DialogComponent.js +1 -1
- package/components/DialogComponent/DialogComponent.js.map +1 -1
- package/components/DialogComponent/DialogComponent.mjs +1 -1
- package/components/DialogComponent/DialogComponent.mjs.map +1 -1
- package/components/FileUploader/FileUploader.js +2 -0
- package/components/FileUploader/FileUploader.js.map +1 -0
- package/components/FileUploader/FileUploader.mjs +2 -0
- package/components/FileUploader/FileUploader.mjs.map +1 -0
- package/components/FileUploader/style.js +2 -0
- package/components/FileUploader/style.js.map +1 -0
- package/components/FileUploader/style.mjs +2 -0
- package/components/FileUploader/style.mjs.map +1 -0
- package/components/FileUploaderItem/FileUploaderItem.js +2 -0
- package/components/FileUploaderItem/FileUploaderItem.js.map +1 -0
- package/components/FileUploaderItem/FileUploaderItem.mjs +2 -0
- package/components/FileUploaderItem/FileUploaderItem.mjs.map +1 -0
- package/components/FileUploaderItem/formatFileSize.js +2 -0
- package/components/FileUploaderItem/formatFileSize.js.map +1 -0
- package/components/FileUploaderItem/formatFileSize.mjs +2 -0
- package/components/FileUploaderItem/formatFileSize.mjs.map +1 -0
- package/components/FileUploaderItem/getMimeTypeData.js +2 -0
- package/components/FileUploaderItem/getMimeTypeData.js.map +1 -0
- package/components/FileUploaderItem/getMimeTypeData.mjs +2 -0
- package/components/FileUploaderItem/getMimeTypeData.mjs.map +1 -0
- package/components/FileUploaderItem/sizes.js +2 -0
- package/components/FileUploaderItem/sizes.js.map +1 -0
- package/components/FileUploaderItem/sizes.mjs +2 -0
- package/components/FileUploaderItem/sizes.mjs.map +1 -0
- package/components/FileUploaderItem/style.js +2 -0
- package/components/FileUploaderItem/style.js.map +1 -0
- package/components/FileUploaderItem/style.mjs +2 -0
- package/components/FileUploaderItem/style.mjs.map +1 -0
- package/components/FileUploaderItem/truncateFileName.js +2 -0
- package/components/FileUploaderItem/truncateFileName.js.map +1 -0
- package/components/FileUploaderItem/truncateFileName.mjs +2 -0
- package/components/FileUploaderItem/truncateFileName.mjs.map +1 -0
- package/components/FileUploaderList/FileUploaderList.js +2 -0
- package/components/FileUploaderList/FileUploaderList.js.map +1 -0
- package/components/FileUploaderList/FileUploaderList.mjs +2 -0
- package/components/FileUploaderList/FileUploaderList.mjs.map +1 -0
- package/components/FileUploaderList/style.js +2 -0
- package/components/FileUploaderList/style.js.map +1 -0
- package/components/FileUploaderList/style.mjs +2 -0
- package/components/FileUploaderList/style.mjs.map +1 -0
- package/components/IconButton/IconButton.js +1 -1
- package/components/IconButton/IconButton.js.map +1 -1
- package/components/IconButton/IconButton.mjs +1 -1
- package/components/IconButton/IconButton.mjs.map +1 -1
- package/components/IconButton/style.js +1 -1
- package/components/IconButton/style.js.map +1 -1
- package/components/IconButton/style.mjs +1 -1
- package/components/IconButton/style.mjs.map +1 -1
- package/components/ImageUploader/ImageUploader.js +2 -0
- package/components/ImageUploader/ImageUploader.js.map +1 -0
- package/components/ImageUploader/ImageUploader.mjs +2 -0
- package/components/ImageUploader/ImageUploader.mjs.map +1 -0
- package/components/ImageUploader/constants.js +2 -0
- package/components/ImageUploader/constants.js.map +1 -0
- package/components/ImageUploader/constants.mjs +2 -0
- package/components/ImageUploader/constants.mjs.map +1 -0
- package/components/ImageUploader/style.js +2 -0
- package/components/ImageUploader/style.js.map +1 -0
- package/components/ImageUploader/style.mjs +2 -0
- package/components/ImageUploader/style.mjs.map +1 -0
- package/components/ImageUploaderGrid/ImageUploaderGrid.js +2 -0
- package/components/ImageUploaderGrid/ImageUploaderGrid.js.map +1 -0
- package/components/ImageUploaderGrid/ImageUploaderGrid.mjs +2 -0
- package/components/ImageUploaderGrid/ImageUploaderGrid.mjs.map +1 -0
- package/components/ImageUploaderGrid/style.js +2 -0
- package/components/ImageUploaderGrid/style.js.map +1 -0
- package/components/ImageUploaderGrid/style.mjs +2 -0
- package/components/ImageUploaderGrid/style.mjs.map +1 -0
- package/components/TooltipComponent/TooltipComponent.js +1 -1
- package/components/TooltipComponent/TooltipComponent.js.map +1 -1
- package/components/TooltipComponent/TooltipComponent.mjs +1 -1
- package/components/TooltipComponent/TooltipComponent.mjs.map +1 -1
- package/dts/index.d.ts +1247 -443
- package/icon-pack/src/collection.json.js +1 -1
- package/icon-pack/src/collection.json.mjs +1 -1
- package/icon-pack/src/icons/Camera/index.js +2 -0
- package/icon-pack/src/icons/Camera/index.js.map +1 -0
- package/icon-pack/src/icons/Camera/index.mjs +2 -0
- package/icon-pack/src/icons/Camera/index.mjs.map +1 -0
- package/icon-pack/src/icons/File/index.js +2 -0
- package/icon-pack/src/icons/File/index.js.map +1 -0
- package/icon-pack/src/icons/File/index.mjs +2 -0
- package/icon-pack/src/icons/File/index.mjs.map +1 -0
- package/icon-pack/src/icons/FilePdf/index.js +2 -0
- package/icon-pack/src/icons/FilePdf/index.js.map +1 -0
- package/icon-pack/src/icons/FilePdf/index.mjs +2 -0
- package/icon-pack/src/icons/FilePdf/index.mjs.map +1 -0
- package/icon-pack/src/icons/FileQuestion/index.js +2 -0
- package/icon-pack/src/icons/FileQuestion/index.js.map +1 -0
- package/icon-pack/src/icons/FileQuestion/index.mjs +2 -0
- package/icon-pack/src/icons/FileQuestion/index.mjs.map +1 -0
- package/icon-pack/src/icons/FileZipper/index.js +2 -0
- package/icon-pack/src/icons/FileZipper/index.js.map +1 -0
- package/icon-pack/src/icons/FileZipper/index.mjs +2 -0
- package/icon-pack/src/icons/FileZipper/index.mjs.map +1 -0
- package/icon-pack/src/icons/Image/index.js +2 -0
- package/icon-pack/src/icons/Image/index.js.map +1 -0
- package/icon-pack/src/icons/Image/index.mjs +2 -0
- package/icon-pack/src/icons/Image/index.mjs.map +1 -0
- package/icon-pack/src/icons/ImageAdd/index.js +2 -0
- package/icon-pack/src/icons/ImageAdd/index.js.map +1 -0
- package/icon-pack/src/icons/ImageAdd/index.mjs +2 -0
- package/icon-pack/src/icons/ImageAdd/index.mjs.map +1 -0
- package/icon-pack/src/icons/InfoCircleFill/index.js +2 -0
- package/icon-pack/src/icons/InfoCircleFill/index.js.map +1 -0
- package/icon-pack/src/icons/InfoCircleFill/index.mjs +2 -0
- package/icon-pack/src/icons/InfoCircleFill/index.mjs.map +1 -0
- package/icon-pack/src/icons/Music/index.js +2 -0
- package/icon-pack/src/icons/Music/index.js.map +1 -0
- package/icon-pack/src/icons/Music/index.mjs +2 -0
- package/icon-pack/src/icons/Music/index.mjs.map +1 -0
- package/icon-pack/src/icons/Trash/index.js +2 -0
- package/icon-pack/src/icons/Trash/index.js.map +1 -0
- package/icon-pack/src/icons/Trash/index.mjs +2 -0
- package/icon-pack/src/icons/Trash/index.mjs.map +1 -0
- package/icon-pack/src/icons/Upload/index.js +2 -0
- package/icon-pack/src/icons/Upload/index.js.map +1 -0
- package/icon-pack/src/icons/Upload/index.mjs +2 -0
- package/icon-pack/src/icons/Upload/index.mjs.map +1 -0
- package/icon-pack/src/icons/WarningCircleFill/index.js +2 -0
- package/icon-pack/src/icons/WarningCircleFill/index.js.map +1 -0
- package/icon-pack/src/icons/WarningCircleFill/index.mjs +2 -0
- package/icon-pack/src/icons/WarningCircleFill/index.mjs.map +1 -0
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/package.json +3 -2
- package/shared/utils/parseNumberString.js +2 -0
- package/shared/utils/parseNumberString.js.map +1 -0
- package/shared/utils/parseNumberString.mjs +2 -0
- package/shared/utils/parseNumberString.mjs.map +1 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollThresholds=require('../../hooks/useScrollThresholds.js');var constants=require('../../shared/constants.js');var dom=require('../../shared/utils/dom.js');var useScrollLock=require('../../hooks/useScrollLock.js');var dragging=require('./images/dragging.svg.js');var style=require('./style.js');var sizes=require('./sizes.js');var layouts=require('./layouts.js');var Header=require('./Header.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var AspectRatio=require('../AspectRatio/AspectRatio.js');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');var index=require('../../icon-pack/src/icons/Close/index.js');const DialogComponent=withMergedProps.withMergedProps(React.forwardRef((e,s)=>{const{size:t="s",layout:o="vertical",scrollable:
|
|
1
|
+
'use strict';var React=require('react');var withMergedProps=require('../../hocs/withMergedProps.js');var useScrollThresholds=require('../../hooks/useScrollThresholds.js');var constants=require('../../shared/constants.js');var dom=require('../../shared/utils/dom.js');var useScrollLock=require('../../hooks/useScrollLock.js');var dragging=require('./images/dragging.svg.js');var style=require('./style.js');var sizes=require('./sizes.js');var layouts=require('./layouts.js');var Header=require('./Header.js');var jsxRuntime=require('react/jsx-runtime');var Icon=require('../Icon/Icon.js');var AspectRatio=require('../AspectRatio/AspectRatio.js');var Skeleton=require('../Skeleton/Skeleton.js');var Text=require('../Text/Text.js');var index=require('../../icon-pack/src/icons/Close/index.js');const DialogComponent=withMergedProps.withMergedProps(React.forwardRef((e,s)=>{const{size:t="s",layout:o="vertical",scrollable:i=!1,scrollFading:n=!1,sizeXXS:r,sizeXS:l,sizeS:a,sizeM:c,sizeL:u,sizeXL:d,layoutXXS:x,layoutXS:j,layoutS:m,layoutM:y,layoutL:R,layoutXL:S,root:g,floats:p,media:h,body:I,header:T,caption:z,title:A,subtitle:k,children:E,footer:L,closeButton:b,progressLine:C,fancy:v,imgSrcVertical:P,imgSrcHorizontal:_,draggable:w,loading:N,stickyHeader:f,className:O,backgroundClassName:B,onGrab:D,onNudge:q,...X}=e;const H={size:t,sizeXXS:r,sizeXS:l,sizeS:a,sizeM:c,sizeL:u,sizeXL:d};const Y={layout:o,layoutXXS:x,layoutXS:j,layoutS:m,layoutM:y,layoutL:R,layoutXL:S};const Z={...H,appearance:'body',color:'content-onmain-tertiary',wordBreak:'break-word',marginBottom:'0.8em',sizes:sizes.SIZES_CAPTION};const M={...H,as:'h2',appearance:'heading',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.5em',sizes:sizes.SIZES_TITLE};const V={...H,as:'p',appearance:'body',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.8em',sizes:sizes.SIZES_SUBTITLE};const F=v?{icon:jsxRuntime.jsx(index.Close,{}),size:'xxl',filled:!0}:{icon:jsxRuntime.jsx(index.Close,{}),size:'l',marginTop:8,marginRight:8};const U={size:'xs'};const K=v?O:dom.concatClassNames(O,B);const G=i&&n;const[J,Q]=React.useState(null);const{scrollThresholds:W,setScrollThresholds:$}=useScrollThresholds.useScrollThresholds({enabled:G,target:J});return useScrollLock.useScrollLock({locked:!i,target:J}),jsxRuntime.jsxs(style.Root,{...X,...H,...Y,layouts:v?layouts.LAYOUTS_FANCY:layouts.LAYOUTS,className:K,fancy:v,ref:s,children:[v?jsxRuntime.jsx(style.FancyBackground,{className:B}):null,React.isValidElement(g)?g:typeof g=='function'?g({captionProps:Z,titleProps:M,subtitleProps:V,closeButtonProps:F,progressLineProps:U,onGrab:D,onNudge:q}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[p,w?jsxRuntime.jsx(style.DraggingHandle,{...Y,layouts:layouts.VISIBILITY_VERTICAL,onPointerDown:D,children:jsxRuntime.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:q,children:jsxRuntime.jsx(Icon.Icon,{icon:jsxRuntime.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary"})})}):null,b?jsxRuntime.jsx(style.ButtonPosition,{children:React.isValidElement(b)?b:typeof b=='function'?b(F):null}):null,N||h||P?jsxRuntime.jsx(style.Media,{...Y,layouts:v?layouts.LAYOUTS_FANCY_MEDIA_VERTICAL:layouts.LAYOUTS_MEDIA_VERTICAL,children:N?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"3:1",width:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:0})}):React.isValidElement(h)?h:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"3:1",width:"100%",children:jsxRuntime.jsx(style.Img,{src:P})})}):null,N||h||_?jsxRuntime.jsx(style.Media,{...Y,layouts:layouts.LAYOUTS_MEDIA_HORIZONTAL,children:N?jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"5:7",height:"100%",children:jsxRuntime.jsx(Skeleton.Skeleton,{borderRadius:0})}):React.isValidElement(h)?h:jsxRuntime.jsx(AspectRatio.AspectRatio,{ratio:"5:7",height:"100%",children:jsxRuntime.jsx(style.Img,{src:_})})}):null,jsxRuntime.jsxs(style.Body,{children:[C&&!N?jsxRuntime.jsx(style.ProgressPosition,{...Y,layouts:v?layouts.LAYOUTS_FANCY_PROGRESS:layouts.LAYOUTS_PROGRESS,children:React.isValidElement(C)?C:typeof C=='function'?C(U):null}):null,w?jsxRuntime.jsx(style.DraggingHandle,{...Y,layouts:layouts.VISIBILITY_HORIZONTAL,onPointerDown:D,children:jsxRuntime.jsx(style.DraggingIconContainer,{tabIndex:0,onKeyDown:q,children:jsxRuntime.jsx(Icon.Icon,{icon:jsxRuntime.jsx(dragging.default,{}),size:34,color:"content-onmain-tertiary"})})}):null,v?jsxRuntime.jsx(style.LayoutSpacer,{...Y,layouts:layouts.VISIBILITY_HORIZONTAL,paddingTop:76}):null,N?jsxRuntime.jsx(style.Container,{...H,sizes:sizes.SIZES_CONTAINER,children:jsxRuntime.jsxs(style.Content,{...H,sizes:sizes.SIZES_CONTENT,children:[jsxRuntime.jsx(Skeleton.Skeleton,{children:jsxRuntime.jsx(Text.Text,{...M,marginBottom:"1.5em"})}),jsxRuntime.jsx(Skeleton.Skeleton,{width:"90%",children:jsxRuntime.jsx(Text.Text,{...V,marginBottom:"0.4em"})}),jsxRuntime.jsx(Skeleton.Skeleton,{width:"70%",children:jsxRuntime.jsx(Text.Text,{...V,marginBottom:"0.4em"})}),jsxRuntime.jsx(Skeleton.Skeleton,{width:"50%",children:jsxRuntime.jsx(Text.Text,{...V,marginBottom:"0.8em"})})]})}):React.isValidElement(I)?I:typeof I=='function'?I({captionProps:Z,titleProps:M,subtitleProps:V}):jsxRuntime.jsxs(style.Container,{...H,sizes:sizes.SIZES_CONTAINER,children:[f?jsxRuntime.jsx(style.StickyHeader,{...H,sizes:sizes.SIZES_STICKY_HEADER,children:jsxRuntime.jsx(Header.Header,{header:T,caption:z,title:A,subtitle:k,captionProps:Z,titleProps:M,subtitleProps:V})}):null,G?jsxRuntime.jsx(style.Fading,{visible:W.top===!1}):null,jsxRuntime.jsx(style.ContentScrollArea,{ref:Q,scrollable:i,tabIndex:i?0:void 0,onScroll:e=>{G&&$(e.currentTarget)},onKeyDown:e=>{constants.keyboardKeys.ArrowUp.validate(e.key)?(e.preventDefault(),e.currentTarget.scrollBy(0,-13)):constants.keyboardKeys.ArrowDown.validate(e.key)&&(e.preventDefault(),e.currentTarget.scrollBy(0,13))},children:jsxRuntime.jsxs(style.Content,{...H,sizes:sizes.SIZES_CONTENT,children:[f?null:jsxRuntime.jsx(Header.Header,{header:T,caption:z,title:A,subtitle:k,captionProps:Z,titleProps:M,subtitleProps:V}),E]})}),G?jsxRuntime.jsx(style.Fading,{visible:W.bottom===!1,after:!0}):null,L?jsxRuntime.jsx(style.Footer,{...H,sizes:sizes.SIZES_FOOTER,children:L}):null]})]})]})]})}),{sizes:e=>e.fancy?sizes.SIZES_FANCY:sizes.SIZES,displayName:'DialogComponent'});exports.DialogComponent=DialogComponent;
|
|
2
2
|
//# sourceMappingURL=DialogComponent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogComponent.js","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement } from 'react'\nimport { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport { concatClassNames } from 'shared/utils/dom'\nimport { useScrollLock } from 'hooks/useScrollLock'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport {\n SIZES,\n SIZES_FANCY,\n SIZES_CONTAINER,\n SIZES_CONTENT,\n SIZES_FOOTER,\n SIZES_CAPTION,\n SIZES_TITLE,\n SIZES_SUBTITLE,\n SIZES_STICKY_HEADER,\n} from './sizes'\nimport {\n LAYOUTS,\n LAYOUTS_FANCY,\n LAYOUTS_MEDIA_VERTICAL,\n LAYOUTS_FANCY_MEDIA_VERTICAL,\n LAYOUTS_MEDIA_HORIZONTAL,\n LAYOUTS_PROGRESS,\n LAYOUTS_FANCY_PROGRESS,\n VISIBILITY_VERTICAL,\n VISIBILITY_HORIZONTAL,\n} from './layouts'\nimport type { DialogComponentProps } from './types'\nimport { Header } from './Header'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n DialogComponentProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<DialogComponentProps>>((props, ref) => {\n const {\n size = 's',\n layout = 'vertical',\n scrollable = false,\n scrollFading = false,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n root,\n floats,\n media,\n body,\n header,\n caption,\n title,\n subtitle,\n children,\n footer,\n closeButton,\n progressLine,\n fancy,\n imgSrcVertical,\n imgSrcHorizontal,\n draggable,\n loading,\n stickyHeader,\n className,\n backgroundClassName,\n onGrab,\n onNudge,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const layoutProps = {\n layout,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n }\n\n const captionProps: TextProps = {\n ...sizeProps,\n appearance: 'body',\n color: 'content-onmain-tertiary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_CAPTION,\n }\n\n const titleProps: TextProps = {\n ...sizeProps,\n as: 'h2',\n appearance: 'heading',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.5em',\n sizes: SIZES_TITLE,\n }\n\n const subtitleProps: TextProps = {\n ...sizeProps,\n as: 'p',\n appearance: 'body',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_SUBTITLE,\n }\n\n const closeButtonProps: IconButtonProps = fancy\n ? { icon: <Close />, size: 'xxl', secondary: true }\n : { icon: <Close />, size: 'l', marginTop: 8, marginRight: 8 }\n\n const progressLineProps: ProgressLineProps = {\n size: 'xs',\n }\n\n const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n const scrollFadingEnabled = scrollable && scrollFading\n\n const [contentRef, setContentRef] = useState<HTMLDivElement | null>(null)\n\n const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n enabled: scrollFadingEnabled,\n target: contentRef,\n })\n\n useScrollLock({ locked: !scrollable, target: contentRef })\n\n return (\n <Styled.Root\n {...restProps}\n {...sizeProps}\n {...layoutProps}\n layouts={fancy ? LAYOUTS_FANCY : LAYOUTS}\n className={rootClassName}\n fancy={fancy}\n ref={ref}\n >\n {fancy ? <Styled.FancyBackground className={backgroundClassName} /> : null}\n {isValidElement(root) ? (\n root\n ) : typeof root === 'function' ? (\n root({\n captionProps,\n titleProps,\n subtitleProps,\n closeButtonProps,\n progressLineProps,\n onGrab,\n onNudge,\n })\n ) : (\n <>\n {floats}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_VERTICAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {closeButton ? (\n <Styled.ButtonPosition>\n {isValidElement(closeButton)\n ? closeButton\n : typeof closeButton === 'function'\n ? closeButton(closeButtonProps)\n : null}\n </Styled.ButtonPosition>\n ) : null}\n {loading || media || imgSrcVertical ? (\n <Styled.Media {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_MEDIA_VERTICAL : LAYOUTS_MEDIA_VERTICAL}>\n {loading ? (\n <AspectRatio ratio='3:1' width='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='3:1' width='100%'>\n <Styled.Img src={imgSrcVertical} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n {loading || media || imgSrcHorizontal ? (\n <Styled.Media {...layoutProps} layouts={LAYOUTS_MEDIA_HORIZONTAL}>\n {loading ? (\n <AspectRatio ratio='5:7' height='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='5:7' height='100%'>\n <Styled.Img src={imgSrcHorizontal} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n <Styled.Body>\n {progressLine && !loading ? (\n <Styled.ProgressPosition {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_PROGRESS : LAYOUTS_PROGRESS}>\n {isValidElement(progressLine)\n ? progressLine\n : typeof progressLine === 'function'\n ? progressLine(progressLineProps)\n : null}\n </Styled.ProgressPosition>\n ) : null}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_HORIZONTAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {fancy ? <Styled.LayoutSpacer {...layoutProps} layouts={VISIBILITY_HORIZONTAL} paddingTop={76} /> : null}\n {loading ? (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n <Skeleton>\n <Text {...titleProps} marginBottom='1.5em' />\n </Skeleton>\n <Skeleton width='90%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='70%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='50%'>\n <Text {...subtitleProps} marginBottom='0.8em' />\n </Skeleton>\n </Styled.Content>\n </Styled.Container>\n ) : isValidElement(body) ? (\n body\n ) : typeof body === 'function' ? (\n body({\n captionProps,\n titleProps,\n subtitleProps,\n })\n ) : (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n {stickyHeader ? (\n <Styled.StickyHeader {...sizeProps} sizes={SIZES_STICKY_HEADER}>\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n </Styled.StickyHeader>\n ) : null}\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.top === false} /> : null}\n <Styled.ContentScrollArea\n ref={setContentRef}\n scrollable={scrollable}\n tabIndex={scrollable ? 0 : undefined}\n onScroll={(evt) => {\n if (scrollFadingEnabled) {\n setScrollThresholds(evt.currentTarget)\n }\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.ArrowUp.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, -13)\n } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, 13)\n }\n }}\n >\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n {!stickyHeader ? (\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n ) : null}\n {children}\n </Styled.Content>\n </Styled.ContentScrollArea>\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.bottom === false} after /> : null}\n {footer ? (\n <Styled.Footer {...sizeProps} sizes={SIZES_FOOTER}>\n {footer}\n </Styled.Footer>\n ) : null}\n </Styled.Container>\n )}\n </Styled.Body>\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { DialogComponent }\n"],"names":["DialogComponent","withMergedProps","forwardRef","props","ref","size","layout","scrollable","scrollFading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","floats","media","body","header","caption","title","subtitle","children","footer","closeButton","progressLine","fancy","imgSrcVertical","imgSrcHorizontal","draggable","loading","stickyHeader","className","backgroundClassName","onGrab","onNudge","restProps","sizeProps","layoutProps","captionProps","appearance","color","wordBreak","marginBottom","sizes","SIZES_CAPTION","titleProps","as","SIZES_TITLE","subtitleProps","SIZES_SUBTITLE","closeButtonProps","icon","_jsx","Close","secondary","marginTop","marginRight","progressLineProps","rootClassName","concatClassNames","scrollFadingEnabled","contentRef","setContentRef","useState","scrollThresholds","setScrollThresholds","useScrollThresholds","enabled","target","useScrollLock","locked","_jsxs","Styled","layouts","LAYOUTS_FANCY","LAYOUTS","isValidElement","_Fragment","VISIBILITY_VERTICAL","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_VERTICAL","AspectRatio","ratio","width","Skeleton","borderRadius","src","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_FANCY_PROGRESS","LAYOUTS_PROGRESS","VISIBILITY_HORIZONTAL","paddingTop","SIZES_CONTAINER","SIZES_CONTENT","Text","SIZES_STICKY_HEADER","Header","visible","top","undefined","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","bottom","after","SIZES_FOOTER","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DialogComponent.js","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement } from 'react'\nimport { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport { concatClassNames } from 'shared/utils/dom'\nimport { useScrollLock } from 'hooks/useScrollLock'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport {\n SIZES,\n SIZES_FANCY,\n SIZES_CONTAINER,\n SIZES_CONTENT,\n SIZES_FOOTER,\n SIZES_CAPTION,\n SIZES_TITLE,\n SIZES_SUBTITLE,\n SIZES_STICKY_HEADER,\n} from './sizes'\nimport {\n LAYOUTS,\n LAYOUTS_FANCY,\n LAYOUTS_MEDIA_VERTICAL,\n LAYOUTS_FANCY_MEDIA_VERTICAL,\n LAYOUTS_MEDIA_HORIZONTAL,\n LAYOUTS_PROGRESS,\n LAYOUTS_FANCY_PROGRESS,\n VISIBILITY_VERTICAL,\n VISIBILITY_HORIZONTAL,\n} from './layouts'\nimport type { DialogComponentProps } from './types'\nimport { Header } from './Header'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n DialogComponentProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<DialogComponentProps>>((props, ref) => {\n const {\n size = 's',\n layout = 'vertical',\n scrollable = false,\n scrollFading = false,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n root,\n floats,\n media,\n body,\n header,\n caption,\n title,\n subtitle,\n children,\n footer,\n closeButton,\n progressLine,\n fancy,\n imgSrcVertical,\n imgSrcHorizontal,\n draggable,\n loading,\n stickyHeader,\n className,\n backgroundClassName,\n onGrab,\n onNudge,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const layoutProps = {\n layout,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n }\n\n const captionProps: TextProps = {\n ...sizeProps,\n appearance: 'body',\n color: 'content-onmain-tertiary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_CAPTION,\n }\n\n const titleProps: TextProps = {\n ...sizeProps,\n as: 'h2',\n appearance: 'heading',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.5em',\n sizes: SIZES_TITLE,\n }\n\n const subtitleProps: TextProps = {\n ...sizeProps,\n as: 'p',\n appearance: 'body',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_SUBTITLE,\n }\n\n const closeButtonProps: IconButtonProps = fancy\n ? { icon: <Close />, size: 'xxl', filled: true }\n : { icon: <Close />, size: 'l', marginTop: 8, marginRight: 8 }\n\n const progressLineProps: ProgressLineProps = {\n size: 'xs',\n }\n\n const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n const scrollFadingEnabled = scrollable && scrollFading\n\n const [contentRef, setContentRef] = useState<HTMLDivElement | null>(null)\n\n const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n enabled: scrollFadingEnabled,\n target: contentRef,\n })\n\n useScrollLock({ locked: !scrollable, target: contentRef })\n\n return (\n <Styled.Root\n {...restProps}\n {...sizeProps}\n {...layoutProps}\n layouts={fancy ? LAYOUTS_FANCY : LAYOUTS}\n className={rootClassName}\n fancy={fancy}\n ref={ref}\n >\n {fancy ? <Styled.FancyBackground className={backgroundClassName} /> : null}\n {isValidElement(root) ? (\n root\n ) : typeof root === 'function' ? (\n root({\n captionProps,\n titleProps,\n subtitleProps,\n closeButtonProps,\n progressLineProps,\n onGrab,\n onNudge,\n })\n ) : (\n <>\n {floats}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_VERTICAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {closeButton ? (\n <Styled.ButtonPosition>\n {isValidElement(closeButton)\n ? closeButton\n : typeof closeButton === 'function'\n ? closeButton(closeButtonProps)\n : null}\n </Styled.ButtonPosition>\n ) : null}\n {loading || media || imgSrcVertical ? (\n <Styled.Media {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_MEDIA_VERTICAL : LAYOUTS_MEDIA_VERTICAL}>\n {loading ? (\n <AspectRatio ratio='3:1' width='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='3:1' width='100%'>\n <Styled.Img src={imgSrcVertical} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n {loading || media || imgSrcHorizontal ? (\n <Styled.Media {...layoutProps} layouts={LAYOUTS_MEDIA_HORIZONTAL}>\n {loading ? (\n <AspectRatio ratio='5:7' height='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='5:7' height='100%'>\n <Styled.Img src={imgSrcHorizontal} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n <Styled.Body>\n {progressLine && !loading ? (\n <Styled.ProgressPosition {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_PROGRESS : LAYOUTS_PROGRESS}>\n {isValidElement(progressLine)\n ? progressLine\n : typeof progressLine === 'function'\n ? progressLine(progressLineProps)\n : null}\n </Styled.ProgressPosition>\n ) : null}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_HORIZONTAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {fancy ? <Styled.LayoutSpacer {...layoutProps} layouts={VISIBILITY_HORIZONTAL} paddingTop={76} /> : null}\n {loading ? (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n <Skeleton>\n <Text {...titleProps} marginBottom='1.5em' />\n </Skeleton>\n <Skeleton width='90%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='70%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='50%'>\n <Text {...subtitleProps} marginBottom='0.8em' />\n </Skeleton>\n </Styled.Content>\n </Styled.Container>\n ) : isValidElement(body) ? (\n body\n ) : typeof body === 'function' ? (\n body({\n captionProps,\n titleProps,\n subtitleProps,\n })\n ) : (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n {stickyHeader ? (\n <Styled.StickyHeader {...sizeProps} sizes={SIZES_STICKY_HEADER}>\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n </Styled.StickyHeader>\n ) : null}\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.top === false} /> : null}\n <Styled.ContentScrollArea\n ref={setContentRef}\n scrollable={scrollable}\n tabIndex={scrollable ? 0 : undefined}\n onScroll={(evt) => {\n if (scrollFadingEnabled) {\n setScrollThresholds(evt.currentTarget)\n }\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.ArrowUp.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, -13)\n } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, 13)\n }\n }}\n >\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n {!stickyHeader ? (\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n ) : null}\n {children}\n </Styled.Content>\n </Styled.ContentScrollArea>\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.bottom === false} after /> : null}\n {footer ? (\n <Styled.Footer {...sizeProps} sizes={SIZES_FOOTER}>\n {footer}\n </Styled.Footer>\n ) : null}\n </Styled.Container>\n )}\n </Styled.Body>\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { DialogComponent }\n"],"names":["DialogComponent","withMergedProps","forwardRef","props","ref","size","layout","scrollable","scrollFading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","floats","media","body","header","caption","title","subtitle","children","footer","closeButton","progressLine","fancy","imgSrcVertical","imgSrcHorizontal","draggable","loading","stickyHeader","className","backgroundClassName","onGrab","onNudge","restProps","sizeProps","layoutProps","captionProps","appearance","color","wordBreak","marginBottom","sizes","SIZES_CAPTION","titleProps","as","SIZES_TITLE","subtitleProps","SIZES_SUBTITLE","closeButtonProps","icon","_jsx","Close","filled","marginTop","marginRight","progressLineProps","rootClassName","concatClassNames","scrollFadingEnabled","contentRef","setContentRef","useState","scrollThresholds","setScrollThresholds","useScrollThresholds","enabled","target","useScrollLock","locked","_jsxs","Styled","layouts","LAYOUTS_FANCY","LAYOUTS","isValidElement","_Fragment","VISIBILITY_VERTICAL","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_VERTICAL","AspectRatio","ratio","width","Skeleton","borderRadius","src","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_FANCY_PROGRESS","LAYOUTS_PROGRESS","VISIBILITY_HORIZONTAL","paddingTop","SIZES_CONTAINER","SIZES_CONTENT","Text","SIZES_STICKY_HEADER","Header","visible","top","undefined","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","bottom","after","SIZES_FOOTER","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{forwardRef,useState,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollThresholds}from'../../hooks/useScrollThresholds.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{concatClassNames}from'../../shared/utils/dom.mjs';import{useScrollLock}from'../../hooks/useScrollLock.mjs';import SvgDragging from'./images/dragging.svg.mjs';import{Root,FancyBackground,DraggingHandle,DraggingIconContainer,ButtonPosition,Media,Img,Body,ProgressPosition,LayoutSpacer,Container,Content,StickyHeader,Fading,ContentScrollArea,Footer}from'./style.mjs';import{SIZES_SUBTITLE,SIZES_TITLE,SIZES_CAPTION,SIZES_CONTAINER,SIZES_CONTENT,SIZES_STICKY_HEADER,SIZES_FOOTER,SIZES_FANCY,SIZES}from'./sizes.mjs';import{LAYOUTS_FANCY,LAYOUTS,VISIBILITY_VERTICAL,LAYOUTS_FANCY_MEDIA_VERTICAL,LAYOUTS_MEDIA_VERTICAL,LAYOUTS_MEDIA_HORIZONTAL,LAYOUTS_FANCY_PROGRESS,LAYOUTS_PROGRESS,VISIBILITY_HORIZONTAL}from'./layouts.mjs';import{Header}from'./Header.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{AspectRatio}from'../AspectRatio/AspectRatio.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';const DialogComponent=withMergedProps(forwardRef((o,e)=>{const{size:t="s",layout:s="vertical",scrollable:r=!1,scrollFading:n=!1,sizeXXS:i,sizeXS:
|
|
1
|
+
import{forwardRef,useState,isValidElement}from'react';import{withMergedProps}from'../../hocs/withMergedProps.mjs';import{useScrollThresholds}from'../../hooks/useScrollThresholds.mjs';import{keyboardKeys}from'../../shared/constants.mjs';import{concatClassNames}from'../../shared/utils/dom.mjs';import{useScrollLock}from'../../hooks/useScrollLock.mjs';import SvgDragging from'./images/dragging.svg.mjs';import{Root,FancyBackground,DraggingHandle,DraggingIconContainer,ButtonPosition,Media,Img,Body,ProgressPosition,LayoutSpacer,Container,Content,StickyHeader,Fading,ContentScrollArea,Footer}from'./style.mjs';import{SIZES_SUBTITLE,SIZES_TITLE,SIZES_CAPTION,SIZES_CONTAINER,SIZES_CONTENT,SIZES_STICKY_HEADER,SIZES_FOOTER,SIZES_FANCY,SIZES}from'./sizes.mjs';import{LAYOUTS_FANCY,LAYOUTS,VISIBILITY_VERTICAL,LAYOUTS_FANCY_MEDIA_VERTICAL,LAYOUTS_MEDIA_VERTICAL,LAYOUTS_MEDIA_HORIZONTAL,LAYOUTS_FANCY_PROGRESS,LAYOUTS_PROGRESS,VISIBILITY_HORIZONTAL}from'./layouts.mjs';import{Header}from'./Header.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Icon}from'../Icon/Icon.mjs';import{AspectRatio}from'../AspectRatio/AspectRatio.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Text}from'../Text/Text.mjs';import{Close}from'../../icon-pack/src/icons/Close/index.mjs';const DialogComponent=withMergedProps(forwardRef((o,e)=>{const{size:t="s",layout:s="vertical",scrollable:r=!1,scrollFading:n=!1,sizeXXS:i,sizeXS:l,sizeS:a,sizeM:c,sizeL:d,sizeXL:S,layoutXXS:m,layoutXS:g,layoutS:I,layoutM:p,layoutL:u,layoutXL:T,root:j,floats:x,media:y,body:h,header:E,caption:A,title:L,subtitle:_,children:C,footer:f,closeButton:O,progressLine:R,fancy:N,imgSrcVertical:k,imgSrcHorizontal:b,draggable:z,loading:P,stickyHeader:Y,className:D,backgroundClassName:B,onGrab:Z,onNudge:w,...F}=o;const V={size:t,sizeXXS:i,sizeXS:l,sizeS:a,sizeM:c,sizeL:d,sizeXL:S};const H={layout:s,layoutXXS:m,layoutXS:g,layoutS:I,layoutM:p,layoutL:u,layoutXL:T};const U={...V,appearance:'body',color:'content-onmain-tertiary',wordBreak:'break-word',marginBottom:'0.8em',sizes:SIZES_CAPTION};const M={...V,as:'h2',appearance:'heading',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.5em',sizes:SIZES_TITLE};const X={...V,as:'p',appearance:'body',color:'content-onmain-primary',wordBreak:'break-word',marginBottom:'0.8em',sizes:SIZES_SUBTITLE};const v=N?{icon:jsx(Close,{}),size:'xxl',filled:!0}:{icon:jsx(Close,{}),size:'l',marginTop:8,marginRight:8};const K={size:'xs'};const G=N?D:concatClassNames(D,B);const q=r&&n;const[J,Q]=useState(null);const{scrollThresholds:W,setScrollThresholds:$}=useScrollThresholds({enabled:q,target:J});return useScrollLock({locked:!r,target:J}),jsxs(Root,{...F,...V,...H,layouts:N?LAYOUTS_FANCY:LAYOUTS,className:G,fancy:N,ref:e,children:[N?jsx(FancyBackground,{className:B}):null,isValidElement(j)?j:typeof j=='function'?j({captionProps:U,titleProps:M,subtitleProps:X,closeButtonProps:v,progressLineProps:K,onGrab:Z,onNudge:w}):jsxs(Fragment,{children:[x,z?jsx(DraggingHandle,{...H,layouts:VISIBILITY_VERTICAL,onPointerDown:Z,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:w,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary"})})}):null,O?jsx(ButtonPosition,{children:isValidElement(O)?O:typeof O=='function'?O(v):null}):null,P||y||k?jsx(Media,{...H,layouts:N?LAYOUTS_FANCY_MEDIA_VERTICAL:LAYOUTS_MEDIA_VERTICAL,children:P?jsx(AspectRatio,{ratio:"3:1",width:"100%",children:jsx(Skeleton,{borderRadius:0})}):isValidElement(y)?y:jsx(AspectRatio,{ratio:"3:1",width:"100%",children:jsx(Img,{src:k})})}):null,P||y||b?jsx(Media,{...H,layouts:LAYOUTS_MEDIA_HORIZONTAL,children:P?jsx(AspectRatio,{ratio:"5:7",height:"100%",children:jsx(Skeleton,{borderRadius:0})}):isValidElement(y)?y:jsx(AspectRatio,{ratio:"5:7",height:"100%",children:jsx(Img,{src:b})})}):null,jsxs(Body,{children:[R&&!P?jsx(ProgressPosition,{...H,layouts:N?LAYOUTS_FANCY_PROGRESS:LAYOUTS_PROGRESS,children:isValidElement(R)?R:typeof R=='function'?R(K):null}):null,z?jsx(DraggingHandle,{...H,layouts:VISIBILITY_HORIZONTAL,onPointerDown:Z,children:jsx(DraggingIconContainer,{tabIndex:0,onKeyDown:w,children:jsx(Icon,{icon:jsx(SvgDragging,{}),size:34,color:"content-onmain-tertiary"})})}):null,N?jsx(LayoutSpacer,{...H,layouts:VISIBILITY_HORIZONTAL,paddingTop:76}):null,P?jsx(Container,{...V,sizes:SIZES_CONTAINER,children:jsxs(Content,{...V,sizes:SIZES_CONTENT,children:[jsx(Skeleton,{children:jsx(Text,{...M,marginBottom:"1.5em"})}),jsx(Skeleton,{width:"90%",children:jsx(Text,{...X,marginBottom:"0.4em"})}),jsx(Skeleton,{width:"70%",children:jsx(Text,{...X,marginBottom:"0.4em"})}),jsx(Skeleton,{width:"50%",children:jsx(Text,{...X,marginBottom:"0.8em"})})]})}):isValidElement(h)?h:typeof h=='function'?h({captionProps:U,titleProps:M,subtitleProps:X}):jsxs(Container,{...V,sizes:SIZES_CONTAINER,children:[Y?jsx(StickyHeader,{...V,sizes:SIZES_STICKY_HEADER,children:jsx(Header,{header:E,caption:A,title:L,subtitle:_,captionProps:U,titleProps:M,subtitleProps:X})}):null,q?jsx(Fading,{visible:W.top===!1}):null,jsx(ContentScrollArea,{ref:Q,scrollable:r,tabIndex:r?0:void 0,onScroll:o=>{q&&$(o.currentTarget)},onKeyDown:o=>{keyboardKeys.ArrowUp.validate(o.key)?(o.preventDefault(),o.currentTarget.scrollBy(0,-13)):keyboardKeys.ArrowDown.validate(o.key)&&(o.preventDefault(),o.currentTarget.scrollBy(0,13))},children:jsxs(Content,{...V,sizes:SIZES_CONTENT,children:[Y?null:jsx(Header,{header:E,caption:A,title:L,subtitle:_,captionProps:U,titleProps:M,subtitleProps:X}),C]})}),q?jsx(Fading,{visible:W.bottom===!1,after:!0}):null,f?jsx(Footer,{...V,sizes:SIZES_FOOTER,children:f}):null]})]})]})]})}),{sizes:o=>o.fancy?SIZES_FANCY:SIZES,displayName:'DialogComponent'});export{DialogComponent};
|
|
2
2
|
//# sourceMappingURL=DialogComponent.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DialogComponent.mjs","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement } from 'react'\nimport { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport { concatClassNames } from 'shared/utils/dom'\nimport { useScrollLock } from 'hooks/useScrollLock'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport {\n SIZES,\n SIZES_FANCY,\n SIZES_CONTAINER,\n SIZES_CONTENT,\n SIZES_FOOTER,\n SIZES_CAPTION,\n SIZES_TITLE,\n SIZES_SUBTITLE,\n SIZES_STICKY_HEADER,\n} from './sizes'\nimport {\n LAYOUTS,\n LAYOUTS_FANCY,\n LAYOUTS_MEDIA_VERTICAL,\n LAYOUTS_FANCY_MEDIA_VERTICAL,\n LAYOUTS_MEDIA_HORIZONTAL,\n LAYOUTS_PROGRESS,\n LAYOUTS_FANCY_PROGRESS,\n VISIBILITY_VERTICAL,\n VISIBILITY_HORIZONTAL,\n} from './layouts'\nimport type { DialogComponentProps } from './types'\nimport { Header } from './Header'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n DialogComponentProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<DialogComponentProps>>((props, ref) => {\n const {\n size = 's',\n layout = 'vertical',\n scrollable = false,\n scrollFading = false,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n root,\n floats,\n media,\n body,\n header,\n caption,\n title,\n subtitle,\n children,\n footer,\n closeButton,\n progressLine,\n fancy,\n imgSrcVertical,\n imgSrcHorizontal,\n draggable,\n loading,\n stickyHeader,\n className,\n backgroundClassName,\n onGrab,\n onNudge,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const layoutProps = {\n layout,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n }\n\n const captionProps: TextProps = {\n ...sizeProps,\n appearance: 'body',\n color: 'content-onmain-tertiary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_CAPTION,\n }\n\n const titleProps: TextProps = {\n ...sizeProps,\n as: 'h2',\n appearance: 'heading',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.5em',\n sizes: SIZES_TITLE,\n }\n\n const subtitleProps: TextProps = {\n ...sizeProps,\n as: 'p',\n appearance: 'body',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_SUBTITLE,\n }\n\n const closeButtonProps: IconButtonProps = fancy\n ? { icon: <Close />, size: 'xxl', secondary: true }\n : { icon: <Close />, size: 'l', marginTop: 8, marginRight: 8 }\n\n const progressLineProps: ProgressLineProps = {\n size: 'xs',\n }\n\n const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n const scrollFadingEnabled = scrollable && scrollFading\n\n const [contentRef, setContentRef] = useState<HTMLDivElement | null>(null)\n\n const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n enabled: scrollFadingEnabled,\n target: contentRef,\n })\n\n useScrollLock({ locked: !scrollable, target: contentRef })\n\n return (\n <Styled.Root\n {...restProps}\n {...sizeProps}\n {...layoutProps}\n layouts={fancy ? LAYOUTS_FANCY : LAYOUTS}\n className={rootClassName}\n fancy={fancy}\n ref={ref}\n >\n {fancy ? <Styled.FancyBackground className={backgroundClassName} /> : null}\n {isValidElement(root) ? (\n root\n ) : typeof root === 'function' ? (\n root({\n captionProps,\n titleProps,\n subtitleProps,\n closeButtonProps,\n progressLineProps,\n onGrab,\n onNudge,\n })\n ) : (\n <>\n {floats}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_VERTICAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {closeButton ? (\n <Styled.ButtonPosition>\n {isValidElement(closeButton)\n ? closeButton\n : typeof closeButton === 'function'\n ? closeButton(closeButtonProps)\n : null}\n </Styled.ButtonPosition>\n ) : null}\n {loading || media || imgSrcVertical ? (\n <Styled.Media {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_MEDIA_VERTICAL : LAYOUTS_MEDIA_VERTICAL}>\n {loading ? (\n <AspectRatio ratio='3:1' width='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='3:1' width='100%'>\n <Styled.Img src={imgSrcVertical} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n {loading || media || imgSrcHorizontal ? (\n <Styled.Media {...layoutProps} layouts={LAYOUTS_MEDIA_HORIZONTAL}>\n {loading ? (\n <AspectRatio ratio='5:7' height='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='5:7' height='100%'>\n <Styled.Img src={imgSrcHorizontal} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n <Styled.Body>\n {progressLine && !loading ? (\n <Styled.ProgressPosition {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_PROGRESS : LAYOUTS_PROGRESS}>\n {isValidElement(progressLine)\n ? progressLine\n : typeof progressLine === 'function'\n ? progressLine(progressLineProps)\n : null}\n </Styled.ProgressPosition>\n ) : null}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_HORIZONTAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {fancy ? <Styled.LayoutSpacer {...layoutProps} layouts={VISIBILITY_HORIZONTAL} paddingTop={76} /> : null}\n {loading ? (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n <Skeleton>\n <Text {...titleProps} marginBottom='1.5em' />\n </Skeleton>\n <Skeleton width='90%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='70%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='50%'>\n <Text {...subtitleProps} marginBottom='0.8em' />\n </Skeleton>\n </Styled.Content>\n </Styled.Container>\n ) : isValidElement(body) ? (\n body\n ) : typeof body === 'function' ? (\n body({\n captionProps,\n titleProps,\n subtitleProps,\n })\n ) : (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n {stickyHeader ? (\n <Styled.StickyHeader {...sizeProps} sizes={SIZES_STICKY_HEADER}>\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n </Styled.StickyHeader>\n ) : null}\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.top === false} /> : null}\n <Styled.ContentScrollArea\n ref={setContentRef}\n scrollable={scrollable}\n tabIndex={scrollable ? 0 : undefined}\n onScroll={(evt) => {\n if (scrollFadingEnabled) {\n setScrollThresholds(evt.currentTarget)\n }\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.ArrowUp.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, -13)\n } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, 13)\n }\n }}\n >\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n {!stickyHeader ? (\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n ) : null}\n {children}\n </Styled.Content>\n </Styled.ContentScrollArea>\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.bottom === false} after /> : null}\n {footer ? (\n <Styled.Footer {...sizeProps} sizes={SIZES_FOOTER}>\n {footer}\n </Styled.Footer>\n ) : null}\n </Styled.Container>\n )}\n </Styled.Body>\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { DialogComponent }\n"],"names":["DialogComponent","withMergedProps","forwardRef","props","ref","size","layout","scrollable","scrollFading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","floats","media","body","header","caption","title","subtitle","children","footer","closeButton","progressLine","fancy","imgSrcVertical","imgSrcHorizontal","draggable","loading","stickyHeader","className","backgroundClassName","onGrab","onNudge","restProps","sizeProps","layoutProps","captionProps","appearance","color","wordBreak","marginBottom","sizes","SIZES_CAPTION","titleProps","as","SIZES_TITLE","subtitleProps","SIZES_SUBTITLE","closeButtonProps","icon","_jsx","Close","secondary","marginTop","marginRight","progressLineProps","rootClassName","concatClassNames","scrollFadingEnabled","contentRef","setContentRef","useState","scrollThresholds","setScrollThresholds","useScrollThresholds","enabled","target","useScrollLock","locked","_jsxs","Styled","layouts","LAYOUTS_FANCY","LAYOUTS","isValidElement","_Fragment","VISIBILITY_VERTICAL","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_VERTICAL","AspectRatio","ratio","width","Skeleton","borderRadius","src","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_FANCY_PROGRESS","LAYOUTS_PROGRESS","VISIBILITY_HORIZONTAL","paddingTop","SIZES_CONTAINER","SIZES_CONTENT","Text","SIZES_STICKY_HEADER","Header","visible","top","undefined","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","bottom","after","SIZES_FOOTER","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DialogComponent.mjs","sources":["../../../../src/components/DialogComponent/DialogComponent.tsx"],"sourcesContent":["import { forwardRef, useState, isValidElement } from 'react'\nimport { Close } from '@foxford/icon-pack'\nimport { withMergedProps } from 'hocs/withMergedProps'\nimport type { MergedProps } from 'hocs/withMergedProps'\nimport { useScrollThresholds } from 'hooks/useScrollThresholds'\nimport { keyboardKeys } from 'shared/constants'\nimport { Text } from 'components/Text'\nimport { Icon } from 'components/Icon'\nimport { Skeleton } from 'components/Skeleton'\nimport { AspectRatio } from 'components/AspectRatio'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport { concatClassNames } from 'shared/utils/dom'\nimport { useScrollLock } from 'hooks/useScrollLock'\nimport Dragging from './images/dragging.svg?module'\nimport * as Styled from './style'\nimport {\n SIZES,\n SIZES_FANCY,\n SIZES_CONTAINER,\n SIZES_CONTENT,\n SIZES_FOOTER,\n SIZES_CAPTION,\n SIZES_TITLE,\n SIZES_SUBTITLE,\n SIZES_STICKY_HEADER,\n} from './sizes'\nimport {\n LAYOUTS,\n LAYOUTS_FANCY,\n LAYOUTS_MEDIA_VERTICAL,\n LAYOUTS_FANCY_MEDIA_VERTICAL,\n LAYOUTS_MEDIA_HORIZONTAL,\n LAYOUTS_PROGRESS,\n LAYOUTS_FANCY_PROGRESS,\n VISIBILITY_VERTICAL,\n VISIBILITY_HORIZONTAL,\n} from './layouts'\nimport type { DialogComponentProps } from './types'\nimport { Header } from './Header'\n\nconst COMPONENT_NAME = 'DialogComponent'\n\nconst DialogComponent: React.ForwardRefExoticComponent<DialogComponentProps> = withMergedProps<\n DialogComponentProps,\n HTMLDivElement\n>(\n forwardRef<HTMLDivElement, MergedProps<DialogComponentProps>>((props, ref) => {\n const {\n size = 's',\n layout = 'vertical',\n scrollable = false,\n scrollFading = false,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n root,\n floats,\n media,\n body,\n header,\n caption,\n title,\n subtitle,\n children,\n footer,\n closeButton,\n progressLine,\n fancy,\n imgSrcVertical,\n imgSrcHorizontal,\n draggable,\n loading,\n stickyHeader,\n className,\n backgroundClassName,\n onGrab,\n onNudge,\n ...restProps\n } = props\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const layoutProps = {\n layout,\n layoutXXS,\n layoutXS,\n layoutS,\n layoutM,\n layoutL,\n layoutXL,\n }\n\n const captionProps: TextProps = {\n ...sizeProps,\n appearance: 'body',\n color: 'content-onmain-tertiary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_CAPTION,\n }\n\n const titleProps: TextProps = {\n ...sizeProps,\n as: 'h2',\n appearance: 'heading',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.5em',\n sizes: SIZES_TITLE,\n }\n\n const subtitleProps: TextProps = {\n ...sizeProps,\n as: 'p',\n appearance: 'body',\n color: 'content-onmain-primary',\n wordBreak: 'break-word',\n marginBottom: '0.8em',\n sizes: SIZES_SUBTITLE,\n }\n\n const closeButtonProps: IconButtonProps = fancy\n ? { icon: <Close />, size: 'xxl', filled: true }\n : { icon: <Close />, size: 'l', marginTop: 8, marginRight: 8 }\n\n const progressLineProps: ProgressLineProps = {\n size: 'xs',\n }\n\n const rootClassName = !fancy ? concatClassNames(className, backgroundClassName) : className\n\n const scrollFadingEnabled = scrollable && scrollFading\n\n const [contentRef, setContentRef] = useState<HTMLDivElement | null>(null)\n\n const { scrollThresholds, setScrollThresholds } = useScrollThresholds({\n enabled: scrollFadingEnabled,\n target: contentRef,\n })\n\n useScrollLock({ locked: !scrollable, target: contentRef })\n\n return (\n <Styled.Root\n {...restProps}\n {...sizeProps}\n {...layoutProps}\n layouts={fancy ? LAYOUTS_FANCY : LAYOUTS}\n className={rootClassName}\n fancy={fancy}\n ref={ref}\n >\n {fancy ? <Styled.FancyBackground className={backgroundClassName} /> : null}\n {isValidElement(root) ? (\n root\n ) : typeof root === 'function' ? (\n root({\n captionProps,\n titleProps,\n subtitleProps,\n closeButtonProps,\n progressLineProps,\n onGrab,\n onNudge,\n })\n ) : (\n <>\n {floats}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_VERTICAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {closeButton ? (\n <Styled.ButtonPosition>\n {isValidElement(closeButton)\n ? closeButton\n : typeof closeButton === 'function'\n ? closeButton(closeButtonProps)\n : null}\n </Styled.ButtonPosition>\n ) : null}\n {loading || media || imgSrcVertical ? (\n <Styled.Media {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_MEDIA_VERTICAL : LAYOUTS_MEDIA_VERTICAL}>\n {loading ? (\n <AspectRatio ratio='3:1' width='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='3:1' width='100%'>\n <Styled.Img src={imgSrcVertical} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n {loading || media || imgSrcHorizontal ? (\n <Styled.Media {...layoutProps} layouts={LAYOUTS_MEDIA_HORIZONTAL}>\n {loading ? (\n <AspectRatio ratio='5:7' height='100%'>\n <Skeleton borderRadius={0} />\n </AspectRatio>\n ) : isValidElement(media) ? (\n media\n ) : (\n <AspectRatio ratio='5:7' height='100%'>\n <Styled.Img src={imgSrcHorizontal} />\n </AspectRatio>\n )}\n </Styled.Media>\n ) : null}\n <Styled.Body>\n {progressLine && !loading ? (\n <Styled.ProgressPosition {...layoutProps} layouts={fancy ? LAYOUTS_FANCY_PROGRESS : LAYOUTS_PROGRESS}>\n {isValidElement(progressLine)\n ? progressLine\n : typeof progressLine === 'function'\n ? progressLine(progressLineProps)\n : null}\n </Styled.ProgressPosition>\n ) : null}\n {draggable ? (\n <Styled.DraggingHandle {...layoutProps} layouts={VISIBILITY_HORIZONTAL} onPointerDown={onGrab}>\n <Styled.DraggingIconContainer tabIndex={0} onKeyDown={onNudge}>\n <Icon icon={<Dragging />} size={34} color='content-onmain-tertiary' />\n </Styled.DraggingIconContainer>\n </Styled.DraggingHandle>\n ) : null}\n {fancy ? <Styled.LayoutSpacer {...layoutProps} layouts={VISIBILITY_HORIZONTAL} paddingTop={76} /> : null}\n {loading ? (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n <Skeleton>\n <Text {...titleProps} marginBottom='1.5em' />\n </Skeleton>\n <Skeleton width='90%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='70%'>\n <Text {...subtitleProps} marginBottom='0.4em' />\n </Skeleton>\n <Skeleton width='50%'>\n <Text {...subtitleProps} marginBottom='0.8em' />\n </Skeleton>\n </Styled.Content>\n </Styled.Container>\n ) : isValidElement(body) ? (\n body\n ) : typeof body === 'function' ? (\n body({\n captionProps,\n titleProps,\n subtitleProps,\n })\n ) : (\n <Styled.Container {...sizeProps} sizes={SIZES_CONTAINER}>\n {stickyHeader ? (\n <Styled.StickyHeader {...sizeProps} sizes={SIZES_STICKY_HEADER}>\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n </Styled.StickyHeader>\n ) : null}\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.top === false} /> : null}\n <Styled.ContentScrollArea\n ref={setContentRef}\n scrollable={scrollable}\n tabIndex={scrollable ? 0 : undefined}\n onScroll={(evt) => {\n if (scrollFadingEnabled) {\n setScrollThresholds(evt.currentTarget)\n }\n }}\n onKeyDown={(evt) => {\n if (keyboardKeys.ArrowUp.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, -13)\n } else if (keyboardKeys.ArrowDown.validate(evt.key)) {\n evt.preventDefault()\n evt.currentTarget.scrollBy(0, 13)\n }\n }}\n >\n <Styled.Content {...sizeProps} sizes={SIZES_CONTENT}>\n {!stickyHeader ? (\n <Header\n header={header}\n caption={caption}\n title={title}\n subtitle={subtitle}\n captionProps={captionProps}\n titleProps={titleProps}\n subtitleProps={subtitleProps}\n />\n ) : null}\n {children}\n </Styled.Content>\n </Styled.ContentScrollArea>\n {scrollFadingEnabled ? <Styled.Fading visible={scrollThresholds.bottom === false} after /> : null}\n {footer ? (\n <Styled.Footer {...sizeProps} sizes={SIZES_FOOTER}>\n {footer}\n </Styled.Footer>\n ) : null}\n </Styled.Container>\n )}\n </Styled.Body>\n </>\n )}\n </Styled.Root>\n )\n }),\n {\n sizes: (props) => (props.fancy ? SIZES_FANCY : SIZES),\n displayName: COMPONENT_NAME,\n }\n)\n\nexport { DialogComponent }\n"],"names":["DialogComponent","withMergedProps","forwardRef","props","ref","size","layout","scrollable","scrollFading","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","layoutXXS","layoutXS","layoutS","layoutM","layoutL","layoutXL","root","floats","media","body","header","caption","title","subtitle","children","footer","closeButton","progressLine","fancy","imgSrcVertical","imgSrcHorizontal","draggable","loading","stickyHeader","className","backgroundClassName","onGrab","onNudge","restProps","sizeProps","layoutProps","captionProps","appearance","color","wordBreak","marginBottom","sizes","SIZES_CAPTION","titleProps","as","SIZES_TITLE","subtitleProps","SIZES_SUBTITLE","closeButtonProps","icon","_jsx","Close","filled","marginTop","marginRight","progressLineProps","rootClassName","concatClassNames","scrollFadingEnabled","contentRef","setContentRef","useState","scrollThresholds","setScrollThresholds","useScrollThresholds","enabled","target","useScrollLock","locked","_jsxs","Styled","layouts","LAYOUTS_FANCY","LAYOUTS","isValidElement","_Fragment","VISIBILITY_VERTICAL","onPointerDown","tabIndex","onKeyDown","Icon","Dragging","LAYOUTS_FANCY_MEDIA_VERTICAL","LAYOUTS_MEDIA_VERTICAL","AspectRatio","ratio","width","Skeleton","borderRadius","src","LAYOUTS_MEDIA_HORIZONTAL","height","LAYOUTS_FANCY_PROGRESS","LAYOUTS_PROGRESS","VISIBILITY_HORIZONTAL","paddingTop","SIZES_CONTAINER","SIZES_CONTENT","Text","SIZES_STICKY_HEADER","Header","visible","top","undefined","onScroll","evt","currentTarget","keyboardKeys","ArrowUp","validate","key","preventDefault","scrollBy","ArrowDown","bottom","after","SIZES_FOOTER","SIZES_FANCY","SIZES","displayName"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var React=require('react');var reactDropzone=require('react-dropzone');var useMergedProps=require('../../hooks/useMergedProps.js');var style=require('./style.js');var jsxRuntime=require('react/jsx-runtime');var Slot=require('../Slot/Slot.js');var FileUploaderList=require('../FileUploaderList/FileUploaderList.js');var FileUploaderItem=require('../FileUploaderItem/FileUploaderItem.js');var index=require('../../icon-pack/src/icons/Upload/index.js');const FileUploader=Object.assign(React.forwardRef((e,r)=>{const{multiple:o=!1,accept:t,withDropzone:i,disabled:n,title:l,caption:s,content:a,children:p,control:c,minFileSize:d,maxFileSize:u,maxFiles:m,noDragEventsBubbling:x,validator:j,onAccept:g,onReject:F,onFileDialogCancel:R,onFileDialogOpen:D,...v}=useMergedProps.useMergedProps(e,{componentName:"FileUploader",sizes:{}});const S=reactDropzone.useDropzone({noClick:!i,noKeyboard:!i,noDrag:!i,preventDropOnDocument:!0,onDropAccepted:g,onDropRejected:F,multiple:o,accept:t,minSize:d,maxSize:u,maxFiles:m,disabled:n,validator:j,noDragEventsBubbling:x,onFileDialogCancel:R,onFileDialogOpen:D});React.useImperativeHandle(r,()=>S.rootRef.current);const b={size:16,appearance:'subheading',color:'content-onmain-primary',weight:700,textAlign:i?'center':'left',wordBreak:'break-word'};const U={size:16,appearance:'subheading',color:'content-onmain-tertiary',weight:400,textAlign:i?'center':'left',wordBreak:'break-word'};const z={icon:jsxRuntime.jsx(index.Upload,{}),size:'l',outline:!0,textProps:{weight:400},disabled:n,onClick:()=>{i||S.open()}};return jsxRuntime.jsxs(style.Root,{...S.getRootProps({...v,withDropzone:i,disabled:n,fileOverDropzone:S.isDragActive}),children:[jsxRuntime.jsx("input",{...S.getInputProps()}),jsxRuntime.jsx(Slot.Slot,{render:p,props:{titleProps:b,captionProps:U,controlProps:z},fallback:jsxRuntime.jsxs(style.Container,{itemsCentered:i,children:[jsxRuntime.jsx(style.Content,{children:jsxRuntime.jsx(Slot.Slot,{render:a,props:{titleProps:b,captionProps:U},fallback:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Slot.Slot,{render:l,props:b}),jsxRuntime.jsx(Slot.Slot,{render:s,props:U})]})})}),jsxRuntime.jsx(Slot.Slot,{render:c,props:z})]})})]})}),{Item:FileUploaderItem.FileUploaderItem,List:FileUploaderList.FileUploaderList});exports.FileUploader=FileUploader;
|
|
2
|
+
//# sourceMappingURL=FileUploader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileUploader.js","sources":["../../../../src/components/FileUploader/FileUploader.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle } from 'react'\nimport { useDropzone } from 'react-dropzone'\nimport { Upload } from '@foxford/icon-pack'\nimport { Slot } from 'components/Slot'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { FileUploaderItem } from 'components/FileUploaderItem'\nimport { FileUploaderList } from 'components/FileUploaderList'\nimport type { ButtonProps } from 'components/Button'\nimport type { TextProps } from 'components/Text'\nimport type { FileUploaderProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'FileUploader'\n\n/**\n *\n * *v1.0.0*\n *\n * Компонент приема файлов для загрузки.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n */\nconst FileUploader: React.ForwardRefExoticComponent<FileUploaderProps> & {\n Item: typeof FileUploaderItem\n List: typeof FileUploaderList\n} = Object.assign(\n forwardRef<HTMLDivElement, FileUploaderProps>((props, ref) => {\n const {\n multiple = false,\n accept,\n withDropzone,\n disabled,\n title,\n caption,\n content,\n children,\n control,\n minFileSize,\n maxFileSize,\n maxFiles,\n noDragEventsBubbling,\n validator,\n onAccept,\n onReject,\n onFileDialogCancel,\n onFileDialogOpen,\n ...restProps\n } = useMergedProps(props, {\n componentName: COMPONENT_NAME,\n sizes: {},\n })\n\n const dropzone = useDropzone({\n noClick: !withDropzone,\n noKeyboard: !withDropzone,\n noDrag: !withDropzone,\n preventDropOnDocument: true,\n onDropAccepted: onAccept,\n onDropRejected: onReject,\n multiple,\n accept,\n minSize: minFileSize,\n maxSize: maxFileSize,\n maxFiles,\n disabled,\n validator,\n noDragEventsBubbling,\n onFileDialogCancel,\n onFileDialogOpen,\n })\n\n useImperativeHandle<HTMLElement | null, HTMLElement | null>(ref, () => dropzone.rootRef.current)\n\n const titleProps: TextProps = {\n size: 16,\n appearance: 'subheading',\n color: 'content-onmain-primary',\n weight: 700,\n textAlign: withDropzone ? 'center' : 'left',\n wordBreak: 'break-word',\n }\n\n const captionProps: TextProps = {\n size: 16,\n appearance: 'subheading',\n color: 'content-onmain-tertiary',\n weight: 400,\n textAlign: withDropzone ? 'center' : 'left',\n wordBreak: 'break-word',\n }\n\n const controlProps: ButtonProps = {\n icon: <Upload />,\n size: 'l',\n outline: true,\n textProps: {\n weight: 400,\n },\n disabled,\n onClick: () => {\n if (!withDropzone) {\n dropzone.open()\n }\n },\n }\n\n return (\n <Styled.Root\n {...dropzone.getRootProps({\n ...restProps,\n withDropzone,\n disabled,\n fileOverDropzone: dropzone.isDragActive,\n })}\n >\n <input {...dropzone.getInputProps()} />\n <Slot\n render={children}\n props={{\n titleProps,\n captionProps,\n controlProps,\n }}\n fallback={\n <Styled.Container itemsCentered={withDropzone}>\n <Styled.Content>\n <Slot\n render={content}\n props={{\n titleProps,\n captionProps,\n }}\n fallback={\n <>\n <Slot render={title} props={titleProps} />\n <Slot render={caption} props={captionProps} />\n </>\n }\n />\n </Styled.Content>\n <Slot render={control} props={controlProps} />\n </Styled.Container>\n }\n />\n </Styled.Root>\n )\n }),\n {\n Item: FileUploaderItem,\n List: FileUploaderList,\n }\n)\n\nexport { FileUploader }\n"],"names":["FileUploader","Object","assign","forwardRef","props","ref","multiple","accept","withDropzone","disabled","title","caption","content","children","control","minFileSize","maxFileSize","maxFiles","noDragEventsBubbling","validator","onAccept","onReject","onFileDialogCancel","onFileDialogOpen","restProps","useMergedProps","componentName","sizes","dropzone","useDropzone","noClick","noKeyboard","noDrag","preventDropOnDocument","onDropAccepted","onDropRejected","minSize","maxSize","useImperativeHandle","rootRef","current","titleProps","size","appearance","color","weight","textAlign","wordBreak","captionProps","controlProps","icon","_jsx","Upload","outline","textProps","onClick","open","_jsxs","Styled","getRootProps","fileOverDropzone","isDragActive","getInputProps","Slot","render","fallback","itemsCentered","_Fragment","Item","FileUploaderItem","List","FileUploaderList"],"mappings":"+cAsBA,MAAMA,aAGFC,OAAOC,OACTC,MAAAA,WAA8C,CAACC,EAAOC,KACpD,MAAMC,SACJA,GAAW,EAAKC,OAChBA,EAAMC,aACNA,EAAYC,SACZA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,SACPA,EAAQC,QACRA,EAAOC,YACPA,EAAWC,YACXA,EAAWC,SACXA,EAAQC,qBACRA,EAAoBC,UACpBA,EAASC,SACTA,EAAQC,SACRA,EAAQC,mBACRA,EAAkBC,iBAClBA,KACGC,GACDC,eAAAA,eAAerB,EAAO,CACxBsB,cApCiB,eAqCjBC,MAAO,CAAA,IAGT,MAAMC,EAAWC,cAAAA,YAAY,CAC3BC,SAAUtB,EACVuB,YAAavB,EACbwB,QAASxB,EACTyB,uBAAuB,EACvBC,eAAgBd,EAChBe,eAAgBd,EAChBf,WACAC,SACA6B,QAASrB,EACTsB,QAASrB,EACTC,WACAR,WACAU,YACAD,uBACAI,qBACAC,qBAGFe,MAAAA,oBAA4DjC,EAAK,IAAMuB,EAASW,QAAQC,SAExF,MAAMC,EAAwB,CAC5BC,KAAM,GACNC,WAAY,aACZC,MAAO,yBACPC,OAAQ,IACRC,UAAWtC,EAAe,SAAW,OACrCuC,UAAW,cAGb,MAAMC,EAA0B,CAC9BN,KAAM,GACNC,WAAY,aACZC,MAAO,0BACPC,OAAQ,IACRC,UAAWtC,EAAe,SAAW,OACrCuC,UAAW,cAGb,MAAME,EAA4B,CAChCC,KAAMC,WAAAA,IAACC,MAAAA,WACPV,KAAM,IACNW,SAAS,EACTC,UAAW,CACTT,OAAQ,KAEVpC,WACA8C,QAASA,KACF/C,GACHoB,EAAS4B,SAKf,OACEC,WAAAA,KAACC,MAAAA,KAAW,IACN9B,EAAS+B,aAAa,IACrBnC,EACHhB,eACAC,WACAmD,iBAAkBhC,EAASiC,eAC3BhD,UAEFsC,WAAAA,IAAA,QAAA,IAAWvB,EAASkC,kBACpBX,WAAAA,IAACY,UAAI,CACHC,OAAQnD,EACRT,MAAO,CACLqC,aACAO,eACAC,gBAEFgB,SACER,WAAAA,KAACC,gBAAgB,CAACQ,cAAe1D,EAAaK,SAAA,CAC5CsC,WAAAA,IAACO,cAAc,CAAA7C,SACbsC,WAAAA,IAACY,UAAI,CACHC,OAAQpD,EACRR,MAAO,CACLqC,aACAO,gBAEFiB,SACER,WAAAA,KAAAU,oBAAA,CAAAtD,SAAA,CACEsC,WAAAA,IAACY,UAAI,CAACC,OAAQtD,EAAON,MAAOqC,IAC5BU,WAAAA,IAACY,UAAI,CAACC,OAAQrD,EAASP,MAAO4C,WAKtCG,WAAAA,IAACY,UAAI,CAACC,OAAQlD,EAASV,MAAO6C,cAO1C,CACEmB,KAAMC,iBAAAA,iBACNC,KAAMC,iBAAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{forwardRef,useImperativeHandle}from'react';import{useDropzone}from'react-dropzone';import{useMergedProps}from'../../hooks/useMergedProps.mjs';import{Root,Container,Content}from'./style.mjs';import{jsxs,jsx,Fragment}from'react/jsx-runtime';import{Slot}from'../Slot/Slot.mjs';import{FileUploaderList}from'../FileUploaderList/FileUploaderList.mjs';import{FileUploaderItem}from'../FileUploaderItem/FileUploaderItem.mjs';import{Upload}from'../../icon-pack/src/icons/Upload/index.mjs';const FileUploader=Object.assign(forwardRef((e,o)=>{const{multiple:r=!1,accept:t,withDropzone:i,disabled:n,title:l,caption:s,content:a,children:p,control:c,minFileSize:d,maxFileSize:m,maxFiles:g,noDragEventsBubbling:j,validator:x,onAccept:F,onReject:u,onFileDialogCancel:f,onFileDialogOpen:D,...b}=useMergedProps(e,{componentName:"FileUploader",sizes:{}});const z=useDropzone({noClick:!i,noKeyboard:!i,noDrag:!i,preventDropOnDocument:!0,onDropAccepted:F,onDropRejected:u,multiple:r,accept:t,minSize:d,maxSize:m,maxFiles:g,disabled:n,validator:x,noDragEventsBubbling:j,onFileDialogCancel:f,onFileDialogOpen:D});useImperativeHandle(o,()=>z.rootRef.current);const U={size:16,appearance:'subheading',color:'content-onmain-primary',weight:700,textAlign:i?'center':'left',wordBreak:'break-word'};const h={size:16,appearance:'subheading',color:'content-onmain-tertiary',weight:400,textAlign:i?'center':'left',wordBreak:'break-word'};const S={icon:jsx(Upload,{}),size:'l',outline:!0,textProps:{weight:400},disabled:n,onClick:()=>{i||z.open()}};return jsxs(Root,{...z.getRootProps({...b,withDropzone:i,disabled:n,fileOverDropzone:z.isDragActive}),children:[jsx("input",{...z.getInputProps()}),jsx(Slot,{render:p,props:{titleProps:U,captionProps:h,controlProps:S},fallback:jsxs(Container,{itemsCentered:i,children:[jsx(Content,{children:jsx(Slot,{render:a,props:{titleProps:U,captionProps:h},fallback:jsxs(Fragment,{children:[jsx(Slot,{render:l,props:U}),jsx(Slot,{render:s,props:h})]})})}),jsx(Slot,{render:c,props:S})]})})]})}),{Item:FileUploaderItem,List:FileUploaderList});export{FileUploader};
|
|
2
|
+
//# sourceMappingURL=FileUploader.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileUploader.mjs","sources":["../../../../src/components/FileUploader/FileUploader.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle } from 'react'\nimport { useDropzone } from 'react-dropzone'\nimport { Upload } from '@foxford/icon-pack'\nimport { Slot } from 'components/Slot'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { FileUploaderItem } from 'components/FileUploaderItem'\nimport { FileUploaderList } from 'components/FileUploaderList'\nimport type { ButtonProps } from 'components/Button'\nimport type { TextProps } from 'components/Text'\nimport type { FileUploaderProps } from './types'\nimport * as Styled from './style'\n\nconst COMPONENT_NAME = 'FileUploader'\n\n/**\n *\n * *v1.0.0*\n *\n * Компонент приема файлов для загрузки.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n */\nconst FileUploader: React.ForwardRefExoticComponent<FileUploaderProps> & {\n Item: typeof FileUploaderItem\n List: typeof FileUploaderList\n} = Object.assign(\n forwardRef<HTMLDivElement, FileUploaderProps>((props, ref) => {\n const {\n multiple = false,\n accept,\n withDropzone,\n disabled,\n title,\n caption,\n content,\n children,\n control,\n minFileSize,\n maxFileSize,\n maxFiles,\n noDragEventsBubbling,\n validator,\n onAccept,\n onReject,\n onFileDialogCancel,\n onFileDialogOpen,\n ...restProps\n } = useMergedProps(props, {\n componentName: COMPONENT_NAME,\n sizes: {},\n })\n\n const dropzone = useDropzone({\n noClick: !withDropzone,\n noKeyboard: !withDropzone,\n noDrag: !withDropzone,\n preventDropOnDocument: true,\n onDropAccepted: onAccept,\n onDropRejected: onReject,\n multiple,\n accept,\n minSize: minFileSize,\n maxSize: maxFileSize,\n maxFiles,\n disabled,\n validator,\n noDragEventsBubbling,\n onFileDialogCancel,\n onFileDialogOpen,\n })\n\n useImperativeHandle<HTMLElement | null, HTMLElement | null>(ref, () => dropzone.rootRef.current)\n\n const titleProps: TextProps = {\n size: 16,\n appearance: 'subheading',\n color: 'content-onmain-primary',\n weight: 700,\n textAlign: withDropzone ? 'center' : 'left',\n wordBreak: 'break-word',\n }\n\n const captionProps: TextProps = {\n size: 16,\n appearance: 'subheading',\n color: 'content-onmain-tertiary',\n weight: 400,\n textAlign: withDropzone ? 'center' : 'left',\n wordBreak: 'break-word',\n }\n\n const controlProps: ButtonProps = {\n icon: <Upload />,\n size: 'l',\n outline: true,\n textProps: {\n weight: 400,\n },\n disabled,\n onClick: () => {\n if (!withDropzone) {\n dropzone.open()\n }\n },\n }\n\n return (\n <Styled.Root\n {...dropzone.getRootProps({\n ...restProps,\n withDropzone,\n disabled,\n fileOverDropzone: dropzone.isDragActive,\n })}\n >\n <input {...dropzone.getInputProps()} />\n <Slot\n render={children}\n props={{\n titleProps,\n captionProps,\n controlProps,\n }}\n fallback={\n <Styled.Container itemsCentered={withDropzone}>\n <Styled.Content>\n <Slot\n render={content}\n props={{\n titleProps,\n captionProps,\n }}\n fallback={\n <>\n <Slot render={title} props={titleProps} />\n <Slot render={caption} props={captionProps} />\n </>\n }\n />\n </Styled.Content>\n <Slot render={control} props={controlProps} />\n </Styled.Container>\n }\n />\n </Styled.Root>\n )\n }),\n {\n Item: FileUploaderItem,\n List: FileUploaderList,\n }\n)\n\nexport { FileUploader }\n"],"names":["FileUploader","Object","assign","forwardRef","props","ref","multiple","accept","withDropzone","disabled","title","caption","content","children","control","minFileSize","maxFileSize","maxFiles","noDragEventsBubbling","validator","onAccept","onReject","onFileDialogCancel","onFileDialogOpen","restProps","useMergedProps","componentName","sizes","dropzone","useDropzone","noClick","noKeyboard","noDrag","preventDropOnDocument","onDropAccepted","onDropRejected","minSize","maxSize","useImperativeHandle","rootRef","current","titleProps","size","appearance","color","weight","textAlign","wordBreak","captionProps","controlProps","icon","_jsx","Upload","outline","textProps","onClick","open","_jsxs","Styled","getRootProps","fileOverDropzone","isDragActive","getInputProps","Slot","render","fallback","itemsCentered","_Fragment","Item","FileUploaderItem","List","FileUploaderList"],"mappings":"seAsBA,MAAMA,aAGFC,OAAOC,OACTC,WAA8C,CAACC,EAAOC,KACpD,MAAMC,SACJA,GAAW,EAAKC,OAChBA,EAAMC,aACNA,EAAYC,SACZA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,SACPA,EAAQC,QACRA,EAAOC,YACPA,EAAWC,YACXA,EAAWC,SACXA,EAAQC,qBACRA,EAAoBC,UACpBA,EAASC,SACTA,EAAQC,SACRA,EAAQC,mBACRA,EAAkBC,iBAClBA,KACGC,GACDC,eAAerB,EAAO,CACxBsB,cApCiB,eAqCjBC,MAAO,CAAA,IAGT,MAAMC,EAAWC,YAAY,CAC3BC,SAAUtB,EACVuB,YAAavB,EACbwB,QAASxB,EACTyB,uBAAuB,EACvBC,eAAgBd,EAChBe,eAAgBd,EAChBf,WACAC,SACA6B,QAASrB,EACTsB,QAASrB,EACTC,WACAR,WACAU,YACAD,uBACAI,qBACAC,qBAGFe,oBAA4DjC,EAAK,IAAMuB,EAASW,QAAQC,SAExF,MAAMC,EAAwB,CAC5BC,KAAM,GACNC,WAAY,aACZC,MAAO,yBACPC,OAAQ,IACRC,UAAWtC,EAAe,SAAW,OACrCuC,UAAW,cAGb,MAAMC,EAA0B,CAC9BN,KAAM,GACNC,WAAY,aACZC,MAAO,0BACPC,OAAQ,IACRC,UAAWtC,EAAe,SAAW,OACrCuC,UAAW,cAGb,MAAME,EAA4B,CAChCC,KAAMC,IAACC,WACPV,KAAM,IACNW,SAAS,EACTC,UAAW,CACTT,OAAQ,KAEVpC,WACA8C,QAASA,KACF/C,GACHoB,EAAS4B,SAKf,OACEC,KAACC,KAAW,IACN9B,EAAS+B,aAAa,IACrBnC,EACHhB,eACAC,WACAmD,iBAAkBhC,EAASiC,eAC3BhD,UAEFsC,IAAA,QAAA,IAAWvB,EAASkC,kBACpBX,IAACY,KAAI,CACHC,OAAQnD,EACRT,MAAO,CACLqC,aACAO,eACAC,gBAEFgB,SACER,KAACC,UAAgB,CAACQ,cAAe1D,EAAaK,SAAA,CAC5CsC,IAACO,QAAc,CAAA7C,SACbsC,IAACY,KAAI,CACHC,OAAQpD,EACRR,MAAO,CACLqC,aACAO,gBAEFiB,SACER,KAAAU,SAAA,CAAAtD,SAAA,CACEsC,IAACY,KAAI,CAACC,OAAQtD,EAAON,MAAOqC,IAC5BU,IAACY,KAAI,CAACC,OAAQrD,EAASP,MAAO4C,WAKtCG,IAACY,KAAI,CAACC,OAAQlD,EAASV,MAAO6C,cAO1C,CACEmB,KAAMC,iBACNC,KAAMC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var styled=require('styled-components');var style=require('../../shared/utils/style.js');var focus=require('../../mixins/focus.js');var responsiveMargin=require('../../mixins/responsive-margin.js');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var styled__default=_interopDefault(styled);const shouldForwardFileUploaderProp=style.createShouldForwardProp(e=>!['withDropzone','disabled','fileOverDropzone'].includes(e));const template=e=>`\n background-color: ${e.backgroundColor};\n border-color: ${e.borderColor};\n`;const COLOR_SCHEMA={default:styled.css(["",""],e=>template({backgroundColor:e.palette.backgroundColor??(e.withDropzone?e.theme.colors['bg-onmain-main']:e.theme.colors.transparent),borderColor:e.palette.borderColor??(e.withDropzone?e.theme.colors['border-onmain-default-small']:e.theme.colors.transparent)})),disabled:styled.css(["",""],e=>template({backgroundColor:e.palette.backgroundColorDisabled??(e.withDropzone?e.theme.colors['bg-onmain-main']:e.theme.colors.transparent),borderColor:e.palette.borderColorDisabled??(e.withDropzone?e.theme.colors['border-disabled']:e.theme.colors.transparent)})),active:styled.css(["",""],e=>template({backgroundColor:e.palette.backgroundColorActive??(e.withDropzone?e.theme.colors['bg-brand-primary-100-active']:e.theme.colors.transparent),borderColor:e.palette.borderColorActive??(e.withDropzone?e.theme.colors['border-brand-primary']:e.theme.colors.transparent)}))};const Root=styled__default.default.div.withConfig({shouldForwardProp:shouldForwardFileUploaderProp}).withConfig({displayName:"FileUploader__Root",componentId:"ui__sc-gu5eys-0"})(["box-sizing:border-box;position:relative;border-radius:12px;min-width:min-content;"," "," "," "," ",""],e=>`\n border: 1px ${e.fileOverDropzone?'solid':'dashed'};\n `,e=>{if(!e.withDropzone)return null;let o='pointer';return e.fileOverDropzone&&(o='copy'),e.disabled&&(o='not-allowed'),`\n cursor: ${o};\n `},e=>e.disabled?COLOR_SCHEMA.disabled:e.fileOverDropzone?COLOR_SCHEMA.active:COLOR_SCHEMA.default,focus.focus,responsiveMargin.responsiveMargin);const Container=styled__default.default.div.withConfig({shouldForwardProp:e=>!['itemsCentered'].includes(e)}).withConfig({displayName:"FileUploader__Container",componentId:"ui__sc-gu5eys-1"})(["box-sizing:border-box;border-radius:inherit;"," & > *:not(:last-child){margin-bottom:16px;}"],e=>e.itemsCentered?"\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n ":null);const Content=styled__default.default.div.withConfig({displayName:"FileUploader__Content",componentId:"ui__sc-gu5eys-2"})(["box-sizing:border-box;& > *:not(:last-child){margin-bottom:4px;}"]);exports.Container=Container,exports.Content=Content,exports.Root=Root;
|
|
2
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../../src/components/FileUploader/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { focus } from 'mixins/focus'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { FileUploaderPalette, StyledFileUploaderProps } from './types'\n\nconst shouldForwardFileUploaderProp = createShouldForwardProp(\n (propKey) => !['withDropzone', 'disabled', 'fileOverDropzone'].includes(propKey)\n)\n\nconst template = (palette: FileUploaderPalette) => `\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n`\n\nconst COLOR_SCHEMA = {\n default: css<StyledFileUploaderProps>`\n ${(props) =>\n template({\n backgroundColor:\n props.palette.backgroundColor ??\n (props.withDropzone ? props.theme.colors['bg-onmain-main'] : props.theme.colors.transparent),\n borderColor:\n props.palette.borderColor ??\n (props.withDropzone ? props.theme.colors['border-onmain-default-small'] : props.theme.colors.transparent),\n })}\n `,\n disabled: css<StyledFileUploaderProps>`\n ${(props) =>\n template({\n backgroundColor:\n props.palette.backgroundColorDisabled ??\n (props.withDropzone ? props.theme.colors['bg-onmain-main'] : props.theme.colors.transparent),\n borderColor:\n props.palette.borderColorDisabled ??\n (props.withDropzone ? props.theme.colors['border-disabled'] : props.theme.colors.transparent),\n })}\n `,\n active: css<StyledFileUploaderProps>`\n ${(props) =>\n template({\n backgroundColor:\n props.palette.backgroundColorActive ??\n (props.withDropzone ? props.theme.colors['bg-brand-primary-100-active'] : props.theme.colors.transparent),\n borderColor:\n props.palette.borderColorActive ??\n (props.withDropzone ? props.theme.colors['border-brand-primary'] : props.theme.colors.transparent),\n })}\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledFileUploaderProps>({\n shouldForwardProp: shouldForwardFileUploaderProp,\n})`\n box-sizing: border-box;\n position: relative;\n border-radius: 12px;\n min-width: min-content;\n\n ${(props) => `\n border: 1px ${props.fileOverDropzone ? 'solid' : 'dashed'};\n `}\n\n ${(props) => {\n if (!props.withDropzone) {\n return null\n }\n\n let cursor = 'pointer'\n if (props.fileOverDropzone) cursor = 'copy'\n if (props.disabled) cursor = 'not-allowed'\n\n return `\n cursor: ${cursor};\n `\n }}\n\n ${(props) => {\n if (props.disabled) return COLOR_SCHEMA.disabled\n if (props.fileOverDropzone) return COLOR_SCHEMA.active\n\n return COLOR_SCHEMA.default\n }}\n\n ${focus}\n ${responsiveMargin}\n`\n\nexport const Container = styled.div.withConfig<{\n itemsCentered?: boolean\n}>({\n shouldForwardProp: (propKey) => !['itemsCentered'].includes(propKey),\n})`\n box-sizing: border-box;\n border-radius: inherit;\n\n ${(props) => {\n if (!props.itemsCentered) {\n return null\n }\n\n return `\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n `\n }}\n\n & > *:not(:last-child) {\n margin-bottom: 16px;\n }\n`\n\nexport const Content = styled.div`\n box-sizing: border-box;\n\n & > *:not(:last-child) {\n margin-bottom: 4px;\n }\n`\n"],"names":["shouldForwardFileUploaderProp","createShouldForwardProp","propKey","includes","template","palette","backgroundColor","borderColor","COLOR_SCHEMA","default","css","props","withDropzone","theme","colors","transparent","disabled","backgroundColorDisabled","borderColorDisabled","active","backgroundColorActive","borderColorActive","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","fileOverDropzone","cursor","focus","responsiveMargin","Container","itemsCentered","Content"],"mappings":"gUAMA,MAAMA,8BAAgCC,MAAAA,wBACnCC,IAAa,CAAC,eAAgB,WAAY,oBAAoBC,SAASD,IAG1E,MAAME,SAAYC,GAAiC,yBAC7BA,EAAQC,qCACZD,EAAQE,iBAG1B,MAAMC,aAAe,CACnBC,QAASC,OAAAA,IAAG,CAAA,GAAA,IACPC,GACDP,SAAS,CACPE,gBACEK,EAAMN,QAAQC,kBACbK,EAAMC,aAAeD,EAAME,MAAMC,OAAO,kBAAoBH,EAAME,MAAMC,OAAOC,aAClFR,YACEI,EAAMN,QAAQE,cACbI,EAAMC,aAAeD,EAAME,MAAMC,OAAO,+BAAiCH,EAAME,MAAMC,OAAOC,gBAGrGC,SAAUN,OAAAA,IAAG,CAAA,GAAA,IACRC,GACDP,SAAS,CACPE,gBACEK,EAAMN,QAAQY,0BACbN,EAAMC,aAAeD,EAAME,MAAMC,OAAO,kBAAoBH,EAAME,MAAMC,OAAOC,aAClFR,YACEI,EAAMN,QAAQa,sBACbP,EAAMC,aAAeD,EAAME,MAAMC,OAAO,mBAAqBH,EAAME,MAAMC,OAAOC,gBAGzFI,OAAQT,OAAAA,IAAG,CAAA,GAAA,IACNC,GACDP,SAAS,CACPE,gBACEK,EAAMN,QAAQe,wBACbT,EAAMC,aAAeD,EAAME,MAAMC,OAAO,+BAAiCH,EAAME,MAAMC,OAAOC,aAC/FR,YACEI,EAAMN,QAAQgB,oBACbV,EAAMC,aAAeD,EAAME,MAAMC,OAAO,wBAA0BH,EAAME,MAAMC,OAAOC,iBAKzF,MAAMO,KAAOC,gBAAAA,QAAOC,IAAIC,WAAoC,CACjEC,kBAAmB1B,gCACnByB,WAAA,CAAAE,YAAA,qBAAAC,YAAA,mBAFkBL,CAElB,CAAA,oFAAA,IAAA,IAAA,IAAA,IAAA,IAMGZ,GAAU,qBACGA,EAAMkB,iBAAmB,QAAU,gBAGhDlB,IACD,IAAKA,EAAMC,aACT,OAAO,KAGT,IAAIkB,EAAS,UAIb,OAHInB,EAAMkB,mBAAkBC,EAAS,QACjCnB,EAAMK,WAAUc,EAAS,eAEtB,mBACKA,YAIXnB,GACGA,EAAMK,SAAiBR,aAAaQ,SACpCL,EAAMkB,iBAAyBrB,aAAaW,OAEzCX,aAAaC,QAGpBsB,MAAAA,MACAC,iBAAAA,kBAGG,MAAMC,UAAYV,gBAAAA,QAAOC,IAAIC,WAEjC,CACDC,kBAAoBxB,IAAa,CAAC,iBAAiBC,SAASD,KAC5DuB,WAAA,CAAAE,YAAA,0BAAAC,YAAA,mBAJuBL,CAIvB,CAAA,+CAAA,gDAIGZ,GACIA,EAAMuB,cAIJ,gJAHE,YAiBAC,QAAUZ,gBAAAA,QAAOC,IAAGC,WAAA,CAAAE,YAAA,wBAAAC,YAAA,mBAAVL,CAAU,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import styled,{css}from'styled-components';import{createShouldForwardProp}from'../../shared/utils/style.mjs';import{focus}from'../../mixins/focus.mjs';import{responsiveMargin}from'../../mixins/responsive-margin.mjs';const shouldForwardFileUploaderProp=createShouldForwardProp(o=>!['withDropzone','disabled','fileOverDropzone'].includes(o));const template=o=>`\n background-color: ${o.backgroundColor};\n border-color: ${o.borderColor};\n`;const COLOR_SCHEMA={default:css(["",""],o=>template({backgroundColor:o.palette.backgroundColor??(o.withDropzone?o.theme.colors['bg-onmain-main']:o.theme.colors.transparent),borderColor:o.palette.borderColor??(o.withDropzone?o.theme.colors['border-onmain-default-small']:o.theme.colors.transparent)})),disabled:css(["",""],o=>template({backgroundColor:o.palette.backgroundColorDisabled??(o.withDropzone?o.theme.colors['bg-onmain-main']:o.theme.colors.transparent),borderColor:o.palette.borderColorDisabled??(o.withDropzone?o.theme.colors['border-disabled']:o.theme.colors.transparent)})),active:css(["",""],o=>template({backgroundColor:o.palette.backgroundColorActive??(o.withDropzone?o.theme.colors['bg-brand-primary-100-active']:o.theme.colors.transparent),borderColor:o.palette.borderColorActive??(o.withDropzone?o.theme.colors['border-brand-primary']:o.theme.colors.transparent)}))};const Root=styled.div.withConfig({shouldForwardProp:shouldForwardFileUploaderProp}).withConfig({displayName:"FileUploader__Root",componentId:"ui__sc-gu5eys-0"})(["box-sizing:border-box;position:relative;border-radius:12px;min-width:min-content;"," "," "," "," ",""],o=>`\n border: 1px ${o.fileOverDropzone?'solid':'dashed'};\n `,o=>{if(!o.withDropzone)return null;let e='pointer';return o.fileOverDropzone&&(e='copy'),o.disabled&&(e='not-allowed'),`\n cursor: ${e};\n `},o=>o.disabled?COLOR_SCHEMA.disabled:o.fileOverDropzone?COLOR_SCHEMA.active:COLOR_SCHEMA.default,focus,responsiveMargin);const Container=styled.div.withConfig({shouldForwardProp:o=>!['itemsCentered'].includes(o)}).withConfig({displayName:"FileUploader__Container",componentId:"ui__sc-gu5eys-1"})(["box-sizing:border-box;border-radius:inherit;"," & > *:not(:last-child){margin-bottom:16px;}"],o=>o.itemsCentered?"\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n ":null);const Content=styled.div.withConfig({displayName:"FileUploader__Content",componentId:"ui__sc-gu5eys-2"})(["box-sizing:border-box;& > *:not(:last-child){margin-bottom:4px;}"]);export{Container,Content,Root};
|
|
2
|
+
//# sourceMappingURL=style.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.mjs","sources":["../../../../src/components/FileUploader/style.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { createShouldForwardProp } from 'shared/utils/style'\nimport { focus } from 'mixins/focus'\nimport { responsiveMargin } from 'mixins/responsive-margin'\nimport type { FileUploaderPalette, StyledFileUploaderProps } from './types'\n\nconst shouldForwardFileUploaderProp = createShouldForwardProp(\n (propKey) => !['withDropzone', 'disabled', 'fileOverDropzone'].includes(propKey)\n)\n\nconst template = (palette: FileUploaderPalette) => `\n background-color: ${palette.backgroundColor};\n border-color: ${palette.borderColor};\n`\n\nconst COLOR_SCHEMA = {\n default: css<StyledFileUploaderProps>`\n ${(props) =>\n template({\n backgroundColor:\n props.palette.backgroundColor ??\n (props.withDropzone ? props.theme.colors['bg-onmain-main'] : props.theme.colors.transparent),\n borderColor:\n props.palette.borderColor ??\n (props.withDropzone ? props.theme.colors['border-onmain-default-small'] : props.theme.colors.transparent),\n })}\n `,\n disabled: css<StyledFileUploaderProps>`\n ${(props) =>\n template({\n backgroundColor:\n props.palette.backgroundColorDisabled ??\n (props.withDropzone ? props.theme.colors['bg-onmain-main'] : props.theme.colors.transparent),\n borderColor:\n props.palette.borderColorDisabled ??\n (props.withDropzone ? props.theme.colors['border-disabled'] : props.theme.colors.transparent),\n })}\n `,\n active: css<StyledFileUploaderProps>`\n ${(props) =>\n template({\n backgroundColor:\n props.palette.backgroundColorActive ??\n (props.withDropzone ? props.theme.colors['bg-brand-primary-100-active'] : props.theme.colors.transparent),\n borderColor:\n props.palette.borderColorActive ??\n (props.withDropzone ? props.theme.colors['border-brand-primary'] : props.theme.colors.transparent),\n })}\n `,\n}\n\nexport const Root = styled.div.withConfig<StyledFileUploaderProps>({\n shouldForwardProp: shouldForwardFileUploaderProp,\n})`\n box-sizing: border-box;\n position: relative;\n border-radius: 12px;\n min-width: min-content;\n\n ${(props) => `\n border: 1px ${props.fileOverDropzone ? 'solid' : 'dashed'};\n `}\n\n ${(props) => {\n if (!props.withDropzone) {\n return null\n }\n\n let cursor = 'pointer'\n if (props.fileOverDropzone) cursor = 'copy'\n if (props.disabled) cursor = 'not-allowed'\n\n return `\n cursor: ${cursor};\n `\n }}\n\n ${(props) => {\n if (props.disabled) return COLOR_SCHEMA.disabled\n if (props.fileOverDropzone) return COLOR_SCHEMA.active\n\n return COLOR_SCHEMA.default\n }}\n\n ${focus}\n ${responsiveMargin}\n`\n\nexport const Container = styled.div.withConfig<{\n itemsCentered?: boolean\n}>({\n shouldForwardProp: (propKey) => !['itemsCentered'].includes(propKey),\n})`\n box-sizing: border-box;\n border-radius: inherit;\n\n ${(props) => {\n if (!props.itemsCentered) {\n return null\n }\n\n return `\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n `\n }}\n\n & > *:not(:last-child) {\n margin-bottom: 16px;\n }\n`\n\nexport const Content = styled.div`\n box-sizing: border-box;\n\n & > *:not(:last-child) {\n margin-bottom: 4px;\n }\n`\n"],"names":["shouldForwardFileUploaderProp","createShouldForwardProp","propKey","includes","template","palette","backgroundColor","borderColor","COLOR_SCHEMA","default","css","props","withDropzone","theme","colors","transparent","disabled","backgroundColorDisabled","borderColorDisabled","active","backgroundColorActive","borderColorActive","Root","styled","div","withConfig","shouldForwardProp","displayName","componentId","fileOverDropzone","cursor","focus","responsiveMargin","Container","itemsCentered","Content"],"mappings":"wNAMA,MAAMA,8BAAgCC,wBACnCC,IAAa,CAAC,eAAgB,WAAY,oBAAoBC,SAASD,IAG1E,MAAME,SAAYC,GAAiC,yBAC7BA,EAAQC,qCACZD,EAAQE,iBAG1B,MAAMC,aAAe,CACnBC,QAASC,IAAG,CAAA,GAAA,IACPC,GACDP,SAAS,CACPE,gBACEK,EAAMN,QAAQC,kBACbK,EAAMC,aAAeD,EAAME,MAAMC,OAAO,kBAAoBH,EAAME,MAAMC,OAAOC,aAClFR,YACEI,EAAMN,QAAQE,cACbI,EAAMC,aAAeD,EAAME,MAAMC,OAAO,+BAAiCH,EAAME,MAAMC,OAAOC,gBAGrGC,SAAUN,IAAG,CAAA,GAAA,IACRC,GACDP,SAAS,CACPE,gBACEK,EAAMN,QAAQY,0BACbN,EAAMC,aAAeD,EAAME,MAAMC,OAAO,kBAAoBH,EAAME,MAAMC,OAAOC,aAClFR,YACEI,EAAMN,QAAQa,sBACbP,EAAMC,aAAeD,EAAME,MAAMC,OAAO,mBAAqBH,EAAME,MAAMC,OAAOC,gBAGzFI,OAAQT,IAAG,CAAA,GAAA,IACNC,GACDP,SAAS,CACPE,gBACEK,EAAMN,QAAQe,wBACbT,EAAMC,aAAeD,EAAME,MAAMC,OAAO,+BAAiCH,EAAME,MAAMC,OAAOC,aAC/FR,YACEI,EAAMN,QAAQgB,oBACbV,EAAMC,aAAeD,EAAME,MAAMC,OAAO,wBAA0BH,EAAME,MAAMC,OAAOC,iBAKzF,MAAMO,KAAOC,OAAOC,IAAIC,WAAoC,CACjEC,kBAAmB1B,gCACnByB,WAAA,CAAAE,YAAA,qBAAAC,YAAA,mBAFkBL,CAElB,CAAA,oFAAA,IAAA,IAAA,IAAA,IAAA,IAMGZ,GAAU,qBACGA,EAAMkB,iBAAmB,QAAU,gBAGhDlB,IACD,IAAKA,EAAMC,aACT,OAAO,KAGT,IAAIkB,EAAS,UAIb,OAHInB,EAAMkB,mBAAkBC,EAAS,QACjCnB,EAAMK,WAAUc,EAAS,eAEtB,mBACKA,YAIXnB,GACGA,EAAMK,SAAiBR,aAAaQ,SACpCL,EAAMkB,iBAAyBrB,aAAaW,OAEzCX,aAAaC,QAGpBsB,MACAC,kBAGG,MAAMC,UAAYV,OAAOC,IAAIC,WAEjC,CACDC,kBAAoBxB,IAAa,CAAC,iBAAiBC,SAASD,KAC5DuB,WAAA,CAAAE,YAAA,0BAAAC,YAAA,mBAJuBL,CAIvB,CAAA,+CAAA,gDAIGZ,GACIA,EAAMuB,cAIJ,gJAHE,YAiBAC,QAAUZ,OAAOC,IAAGC,WAAA,CAAAE,YAAA,wBAAAC,YAAA,mBAAVL,CAAU,CAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var React=require('react');var useMergedProps=require('../../hooks/useMergedProps.js');var isNil=require('../../shared/utils/isNil.js');var style=require('./style.js');var getMimeTypeData=require('./getMimeTypeData.js');var formatFileSize=require('./formatFileSize.js');var truncateFileName=require('./truncateFileName.js');var sizes=require('./sizes.js');var jsxRuntime=require('react/jsx-runtime');var index=require('../../icon-pack/src/icons/FileQuestion/index.js');var Slot=require('../Slot/Slot.js');var Skeleton=require('../Skeleton/Skeleton.js');var Icon=require('../Icon/Icon.js');var Text=require('../Text/Text.js');var index$1=require('../../icon-pack/src/icons/Trash/index.js');var index$2=require('../../icon-pack/src/icons/InfoCircleFill/index.js');exports.FileUploaderItem=React.forwardRef((e,s)=>{const{size:t="m",nameMaxLength:r=25,error:i,loading:n,type:o,typeIcon:l,errorButton:a,name:u,format:x,fileSize:j,status:c,discardButton:m,controls:S,progressLine:d,loadingLayout:p,content:R,children:h,truncateName:z,sizeXXS:y,sizeXS:I,sizeS:g,sizeM:k,sizeL:N,sizeXL:T,...E}=useMergedProps.useMergedProps(e,{componentName:"FileUploaderItem",sizes:sizes.SIZES});const F=React.useMemo(()=>o?getMimeTypeData.getMimeTypeData(o)??{subtype:null,icon:jsxRuntime.jsx(index.FileQuestion,{})}:{subtype:null,icon:jsxRuntime.jsx(index.FileQuestion,{})},[o]);const f={size:t,sizeXXS:y,sizeXS:I,sizeS:g,sizeM:k,sizeL:N,sizeXL:T};const b={...f,sizes:sizes.SIZES_MIME_ICON,color:'inherit',icon:F.icon};const P={...f,sizes:sizes.SIZES_NAME,appearance:'subheading',weight:700,color:'inherit',textAlign:'left',wordBreak:'break-word'};const _={...f,sizes:sizes.SIZES_META,appearance:'body',weight:400,color:'inherit',textAlign:'left',wordBreak:'break-word'};const q={...f,sizes:sizes.SIZES_META,appearance:'body',weight:400,color:i?'alert-error':'inherit',textAlign:'left',wordBreak:'break-word'};const M={...f,sizes:sizes.SIZES_ICON_BUTTON,secondary:!0,square:!0};const v={...f,sizes:sizes.SIZES_ICON_BUTTON,secondary:!0,square:!0,children:e=>jsxRuntime.jsx(Icon.Icon,{...e,icon:jsxRuntime.jsx(index$2.InfoCircleFill,{}),color:"alert-error"})};const C={...f,sizes:sizes.SIZES_ICON_BUTTON,secondary:!0,icon:jsxRuntime.jsx(index$1.Trash,{}),square:!0};const L={...f,sizes:sizes.SIZES_FILE_UPLOADER_PROGRESS_LINE,palette:i?{barColor:'alert-error'}:void 0};const w={height:12,width:'45%',borderRadius:4,marginTop:3,marginBottom:3};const O=z&&typeof u=='string'&&r>0?truncateFileName.truncateFileName(u,r):null;const B=typeof j=='number'||typeof j=='string'?formatFileSize.formatFileSize(j):null;return jsxRuntime.jsx(style.Root,{...E,...f,ref:s,children:jsxRuntime.jsx(Slot.Slot,{render:h,props:{nameProps:P,metaProps:_,statusProps:q,typeIconProps:b,errorButtonProps:v,progressLineProps:L,controlProps:M,discardButtonProps:C,skeletonProps:w,nameTruncated:O,fileSizeFormatted:B,subtypeFormatted:F.subtype},fallback:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(style.Container,{children:n?jsxRuntime.jsx(Slot.Slot,{render:p,props:{skeletonProps:w},fallback:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(style.IconSkeleton,{children:jsxRuntime.jsx(Skeleton.Skeleton,{width:"100%",height:"100%"})}),jsxRuntime.jsxs(style.Content,{children:[jsxRuntime.jsx(Skeleton.Skeleton,{...w}),jsxRuntime.jsxs(style.MetaSkeleton,{children:[jsxRuntime.jsx(Skeleton.Skeleton,{height:4,width:"10%",marginRight:8}),jsxRuntime.jsx(Skeleton.Skeleton,{height:4,width:"15%"})]})]})]})}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs(style.IconContainer,{children:[jsxRuntime.jsx(style.IconBackground,{}),jsxRuntime.jsx(Slot.Slot,{render:l,props:b,fallback:jsxRuntime.jsx(Icon.Icon,{...b})})]}),jsxRuntime.jsxs(style.Content,{children:[jsxRuntime.jsx(Slot.Slot,{render:R,props:{nameProps:P,metaProps:_,statusProps:q,nameTruncated:O,fileSizeFormatted:B,subtypeFormatted:F.subtype},fallback:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(Slot.Slot,{render:O!==null?O:u,props:P}),[x,F.subtype,j,c].some(e=>!isNil.isNil(e))?jsxRuntime.jsxs(style.Meta,{children:[jsxRuntime.jsx(Slot.Slot,{render:x,props:_,fallback:F.subtype?jsxRuntime.jsx(Text.Text,{..._,children:F.subtype}):null}),isNil.isNil(j)?null:jsxRuntime.jsx(style.FileSize,{children:B?jsxRuntime.jsx(Text.Text,{..._,children:B}):jsxRuntime.jsx(Slot.Slot,{render:j,props:_})}),jsxRuntime.jsx(Slot.Slot,{render:c,props:q})]}):null]})}),d?jsxRuntime.jsx(style.ProgressLineContainer,{...f,sizes:sizes.SIZES_PROGRESS_LINE_CONTAINER_IN_CONTENT,children:jsxRuntime.jsx(Slot.Slot,{render:d,props:L})}):null]}),i&&a||S||m?jsxRuntime.jsxs(style.Controls,{children:[i?jsxRuntime.jsx(Slot.Slot,{render:a,props:v}):null,jsxRuntime.jsx(Slot.Slot,{render:S,props:M}),jsxRuntime.jsx(Slot.Slot,{render:m,props:C})]}):null]})}),d&&!n?jsxRuntime.jsx(style.ProgressLineContainer,{...f,sizes:sizes.SIZES_PROGRESS_LINE_CONTAINER,children:jsxRuntime.jsx(Slot.Slot,{render:d,props:L})}):null]})})})});
|
|
2
|
+
//# sourceMappingURL=FileUploaderItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileUploaderItem.js","sources":["../../../../src/components/FileUploaderItem/FileUploaderItem.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react'\nimport { FileQuestion, Trash, InfoCircleFill } from '@foxford/icon-pack'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { Slot } from 'components/Slot'\nimport { Icon } from 'components/Icon'\nimport { Text } from 'components/Text'\nimport { Skeleton } from 'components/Skeleton'\nimport { isNil } from 'shared/utils/isNil'\nimport type { IconProps } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport type { SkeletonProps } from 'components/Skeleton'\nimport * as Styled from './style'\nimport type { MimeTypeData } from './getMimeTypeData'\nimport { getMimeTypeData } from './getMimeTypeData'\nimport { formatFileSize } from './formatFileSize'\nimport { truncateFileName } from './truncateFileName'\nimport {\n SIZES,\n SIZES_MIME_ICON,\n SIZES_NAME,\n SIZES_META,\n SIZES_ICON_BUTTON,\n SIZES_FILE_UPLOADER_PROGRESS_LINE,\n SIZES_PROGRESS_LINE_CONTAINER_IN_CONTENT,\n SIZES_PROGRESS_LINE_CONTAINER,\n} from './sizes'\nimport type { FileUploaderItemProps } from './types'\n\nconst COMPONENT_NAME = 'FileUploaderItem'\n\n/**\n *\n * *v1.0.0*\n *\n * Компонент для вывода метаданных и контролов загружаемого файла.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n * @visibleName FileUploader.Item\n */\nconst FileUploaderItem: React.ForwardRefExoticComponent<FileUploaderItemProps> = forwardRef<\n HTMLDivElement,\n FileUploaderItemProps\n>((props, ref) => {\n const {\n size = 'm',\n nameMaxLength = 25,\n error,\n loading,\n type,\n typeIcon,\n errorButton,\n name,\n format,\n fileSize,\n status,\n discardButton,\n controls,\n progressLine,\n loadingLayout,\n content,\n children,\n truncateName,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n ...restProps\n } = useMergedProps(props, {\n componentName: COMPONENT_NAME,\n sizes: SIZES,\n })\n\n const mimeTypeData = useMemo<MimeTypeData>(() => {\n if (!type) {\n return {\n subtype: null,\n icon: <FileQuestion />,\n }\n }\n\n return (\n getMimeTypeData(type) ?? {\n subtype: null,\n icon: <FileQuestion />,\n }\n )\n }, [type])\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const typeIconProps: IconProps = {\n ...sizeProps,\n sizes: SIZES_MIME_ICON,\n color: 'inherit',\n icon: mimeTypeData.icon,\n }\n\n const nameProps: TextProps = {\n ...sizeProps,\n sizes: SIZES_NAME,\n appearance: 'subheading',\n weight: 700,\n color: 'inherit',\n textAlign: 'left',\n wordBreak: 'break-word',\n }\n\n const metaProps: TextProps = {\n ...sizeProps,\n sizes: SIZES_META,\n appearance: 'body',\n weight: 400,\n color: 'inherit',\n textAlign: 'left',\n wordBreak: 'break-word',\n }\n\n const statusProps: TextProps = {\n ...sizeProps,\n sizes: SIZES_META,\n appearance: 'body',\n weight: 400,\n color: error ? 'alert-error' : 'inherit',\n textAlign: 'left',\n wordBreak: 'break-word',\n }\n\n const controlProps: Omit<IconButtonProps, 'icon'> = {\n ...sizeProps,\n sizes: SIZES_ICON_BUTTON,\n secondary: true,\n square: true,\n }\n\n const errorButtonProps: IconButtonProps = {\n ...sizeProps,\n sizes: SIZES_ICON_BUTTON,\n secondary: true,\n square: true,\n children: (iconProps) => {\n return <Icon {...iconProps} icon={<InfoCircleFill />} color='alert-error' />\n },\n }\n\n const discardButtonProps: IconButtonProps = {\n ...sizeProps,\n sizes: SIZES_ICON_BUTTON,\n secondary: true,\n icon: <Trash />,\n square: true,\n }\n\n const progressLineProps: ProgressLineProps = {\n ...sizeProps,\n sizes: SIZES_FILE_UPLOADER_PROGRESS_LINE,\n palette: error ? { barColor: 'alert-error' } : undefined,\n }\n\n const skeletonProps: SkeletonProps = {\n height: 12,\n width: '45%',\n borderRadius: 4,\n marginTop: 3,\n marginBottom: 3,\n }\n\n const nameTruncated =\n truncateName && typeof name === 'string' && nameMaxLength > 0 ? truncateFileName(name, nameMaxLength) : null\n\n const fileSizeFormatted =\n typeof fileSize === 'number' || typeof fileSize === 'string' ? formatFileSize(fileSize) : null\n\n return (\n <Styled.Root {...restProps} {...sizeProps} ref={ref}>\n <Slot\n render={children}\n props={{\n nameProps,\n metaProps,\n statusProps,\n typeIconProps,\n errorButtonProps,\n progressLineProps,\n controlProps,\n discardButtonProps,\n skeletonProps,\n nameTruncated,\n fileSizeFormatted,\n subtypeFormatted: mimeTypeData.subtype,\n }}\n fallback={\n <>\n <Styled.Container>\n {loading ? (\n <Slot\n render={loadingLayout}\n props={{\n skeletonProps,\n }}\n fallback={\n <>\n <Styled.IconSkeleton>\n <Skeleton width='100%' height='100%' />\n </Styled.IconSkeleton>\n <Styled.Content>\n <Skeleton {...skeletonProps} />\n <Styled.MetaSkeleton>\n <Skeleton height={4} width='10%' marginRight={8} />\n <Skeleton height={4} width='15%' />\n </Styled.MetaSkeleton>\n </Styled.Content>\n </>\n }\n />\n ) : (\n <>\n <Styled.IconContainer>\n <Styled.IconBackground />\n <Slot render={typeIcon} props={typeIconProps} fallback={<Icon {...typeIconProps} />} />\n </Styled.IconContainer>\n <Styled.Content>\n <Slot\n render={content}\n props={{\n nameProps,\n metaProps,\n statusProps,\n nameTruncated,\n fileSizeFormatted,\n subtypeFormatted: mimeTypeData.subtype,\n }}\n fallback={\n <>\n <Slot render={nameTruncated !== null ? nameTruncated : name} props={nameProps} />\n {[format, mimeTypeData.subtype, fileSize, status].some((item) => !isNil(item)) ? (\n <Styled.Meta>\n <Slot\n render={format}\n props={metaProps}\n fallback={\n mimeTypeData.subtype ? <Text {...metaProps}>{mimeTypeData.subtype}</Text> : null\n }\n />\n {!isNil(fileSize) ? (\n <Styled.FileSize>\n {fileSizeFormatted ? (\n <Text {...metaProps}>{fileSizeFormatted}</Text>\n ) : (\n <Slot render={fileSize} props={metaProps} />\n )}\n </Styled.FileSize>\n ) : null}\n <Slot render={status} props={statusProps} />\n </Styled.Meta>\n ) : null}\n </>\n }\n />\n {progressLine ? (\n <Styled.ProgressLineContainer {...sizeProps} sizes={SIZES_PROGRESS_LINE_CONTAINER_IN_CONTENT}>\n <Slot render={progressLine} props={progressLineProps} />\n </Styled.ProgressLineContainer>\n ) : null}\n </Styled.Content>\n {(error && errorButton) || controls || discardButton ? (\n <Styled.Controls>\n {error ? <Slot render={errorButton} props={errorButtonProps} /> : null}\n <Slot render={controls} props={controlProps} />\n <Slot render={discardButton} props={discardButtonProps} />\n </Styled.Controls>\n ) : null}\n </>\n )}\n </Styled.Container>\n {progressLine && !loading ? (\n <Styled.ProgressLineContainer {...sizeProps} sizes={SIZES_PROGRESS_LINE_CONTAINER}>\n <Slot render={progressLine} props={progressLineProps} />\n </Styled.ProgressLineContainer>\n ) : null}\n </>\n }\n />\n </Styled.Root>\n )\n})\n\nexport { FileUploaderItem }\n"],"names":["forwardRef","props","ref","size","nameMaxLength","error","loading","type","typeIcon","errorButton","name","format","fileSize","status","discardButton","controls","progressLine","loadingLayout","content","children","truncateName","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","useMergedProps","componentName","sizes","SIZES","mimeTypeData","useMemo","getMimeTypeData","subtype","icon","_jsx","FileQuestion","sizeProps","typeIconProps","SIZES_MIME_ICON","color","nameProps","SIZES_NAME","appearance","weight","textAlign","wordBreak","metaProps","SIZES_META","statusProps","controlProps","SIZES_ICON_BUTTON","secondary","square","errorButtonProps","iconProps","Icon","InfoCircleFill","discardButtonProps","Trash","progressLineProps","SIZES_FILE_UPLOADER_PROGRESS_LINE","palette","barColor","undefined","skeletonProps","height","width","borderRadius","marginTop","marginBottom","nameTruncated","truncateFileName","fileSizeFormatted","formatFileSize","Styled","Slot","render","subtypeFormatted","fallback","_jsxs","_Fragment","Skeleton","marginRight","some","item","isNil","Text","SIZES_PROGRESS_LINE_CONTAINER_IN_CONTENT","SIZES_PROGRESS_LINE_CONTAINER"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{forwardRef,useMemo}from'react';import{useMergedProps}from'../../hooks/useMergedProps.mjs';import{isNil}from'../../shared/utils/isNil.mjs';import{Root,Container,IconSkeleton,Content,MetaSkeleton,IconContainer,IconBackground,Meta,FileSize,ProgressLineContainer,Controls}from'./style.mjs';import{getMimeTypeData}from'./getMimeTypeData.mjs';import{formatFileSize}from'./formatFileSize.mjs';import{truncateFileName}from'./truncateFileName.mjs';import{SIZES,SIZES_ICON_BUTTON,SIZES_FILE_UPLOADER_PROGRESS_LINE,SIZES_MIME_ICON,SIZES_META,SIZES_NAME,SIZES_PROGRESS_LINE_CONTAINER_IN_CONTENT,SIZES_PROGRESS_LINE_CONTAINER}from'./sizes.mjs';import{jsx,jsxs,Fragment}from'react/jsx-runtime';import{FileQuestion}from'../../icon-pack/src/icons/FileQuestion/index.mjs';import{Slot}from'../Slot/Slot.mjs';import{Skeleton}from'../Skeleton/Skeleton.mjs';import{Icon}from'../Icon/Icon.mjs';import{Text}from'../Text/Text.mjs';import{Trash}from'../../icon-pack/src/icons/Trash/index.mjs';import{InfoCircleFill}from'../../icon-pack/src/icons/InfoCircleFill/index.mjs';const FileUploaderItem=forwardRef((e,r)=>{const{size:o="m",nameMaxLength:s=25,error:t,loading:n,type:i,typeIcon:l,errorButton:a,name:c,format:p,fileSize:S,status:m,discardButton:d,controls:I,progressLine:j,loadingLayout:x,content:u,children:E,truncateName:h,sizeXXS:f,sizeXS:N,sizeS:_,sizeM:g,sizeL:z,sizeXL:T,...k}=useMergedProps(e,{componentName:"FileUploaderItem",sizes:SIZES});const F=useMemo(()=>i?getMimeTypeData(i)??{subtype:null,icon:jsx(FileQuestion,{})}:{subtype:null,icon:jsx(FileQuestion,{})},[i]);const C={size:o,sizeXXS:f,sizeXS:N,sizeS:_,sizeM:g,sizeL:z,sizeXL:T};const P={...C,sizes:SIZES_MIME_ICON,color:'inherit',icon:F.icon};const y={...C,sizes:SIZES_NAME,appearance:'subheading',weight:700,color:'inherit',textAlign:'left',wordBreak:'break-word'};const M={...C,sizes:SIZES_META,appearance:'body',weight:400,color:'inherit',textAlign:'left',wordBreak:'break-word'};const O={...C,sizes:SIZES_META,appearance:'body',weight:400,color:t?'alert-error':'inherit',textAlign:'left',wordBreak:'break-word'};const R={...C,sizes:SIZES_ICON_BUTTON,secondary:!0,square:!0};const b={...C,sizes:SIZES_ICON_BUTTON,secondary:!0,square:!0,children:e=>jsx(Icon,{...e,icon:jsx(InfoCircleFill,{}),color:"alert-error"})};const L={...C,sizes:SIZES_ICON_BUTTON,secondary:!0,icon:jsx(Trash,{}),square:!0};const Z={...C,sizes:SIZES_FILE_UPLOADER_PROGRESS_LINE,palette:t?{barColor:'alert-error'}:void 0};const w={height:12,width:'45%',borderRadius:4,marginTop:3,marginBottom:3};const A=h&&typeof c=='string'&&s>0?truncateFileName(c,s):null;const B=typeof S=='number'||typeof S=='string'?formatFileSize(S):null;return jsx(Root,{...k,...C,ref:r,children:jsx(Slot,{render:E,props:{nameProps:y,metaProps:M,statusProps:O,typeIconProps:P,errorButtonProps:b,progressLineProps:Z,controlProps:R,discardButtonProps:L,skeletonProps:w,nameTruncated:A,fileSizeFormatted:B,subtypeFormatted:F.subtype},fallback:jsxs(Fragment,{children:[jsx(Container,{children:n?jsx(Slot,{render:x,props:{skeletonProps:w},fallback:jsxs(Fragment,{children:[jsx(IconSkeleton,{children:jsx(Skeleton,{width:"100%",height:"100%"})}),jsxs(Content,{children:[jsx(Skeleton,{...w}),jsxs(MetaSkeleton,{children:[jsx(Skeleton,{height:4,width:"10%",marginRight:8}),jsx(Skeleton,{height:4,width:"15%"})]})]})]})}):jsxs(Fragment,{children:[jsxs(IconContainer,{children:[jsx(IconBackground,{}),jsx(Slot,{render:l,props:P,fallback:jsx(Icon,{...P})})]}),jsxs(Content,{children:[jsx(Slot,{render:u,props:{nameProps:y,metaProps:M,statusProps:O,nameTruncated:A,fileSizeFormatted:B,subtypeFormatted:F.subtype},fallback:jsxs(Fragment,{children:[jsx(Slot,{render:A!==null?A:c,props:y}),[p,F.subtype,S,m].some(e=>!isNil(e))?jsxs(Meta,{children:[jsx(Slot,{render:p,props:M,fallback:F.subtype?jsx(Text,{...M,children:F.subtype}):null}),isNil(S)?null:jsx(FileSize,{children:B?jsx(Text,{...M,children:B}):jsx(Slot,{render:S,props:M})}),jsx(Slot,{render:m,props:O})]}):null]})}),j?jsx(ProgressLineContainer,{...C,sizes:SIZES_PROGRESS_LINE_CONTAINER_IN_CONTENT,children:jsx(Slot,{render:j,props:Z})}):null]}),t&&a||I||d?jsxs(Controls,{children:[t?jsx(Slot,{render:a,props:b}):null,jsx(Slot,{render:I,props:R}),jsx(Slot,{render:d,props:L})]}):null]})}),j&&!n?jsx(ProgressLineContainer,{...C,sizes:SIZES_PROGRESS_LINE_CONTAINER,children:jsx(Slot,{render:j,props:Z})}):null]})})})});export{FileUploaderItem};
|
|
2
|
+
//# sourceMappingURL=FileUploaderItem.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileUploaderItem.mjs","sources":["../../../../src/components/FileUploaderItem/FileUploaderItem.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react'\nimport { FileQuestion, Trash, InfoCircleFill } from '@foxford/icon-pack'\nimport { useMergedProps } from 'hooks/useMergedProps'\nimport { Slot } from 'components/Slot'\nimport { Icon } from 'components/Icon'\nimport { Text } from 'components/Text'\nimport { Skeleton } from 'components/Skeleton'\nimport { isNil } from 'shared/utils/isNil'\nimport type { IconProps } from 'components/Icon'\nimport type { TextProps } from 'components/Text'\nimport type { IconButtonProps } from 'components/IconButton'\nimport type { ProgressLineProps } from 'components/ProgressLine'\nimport type { SkeletonProps } from 'components/Skeleton'\nimport * as Styled from './style'\nimport type { MimeTypeData } from './getMimeTypeData'\nimport { getMimeTypeData } from './getMimeTypeData'\nimport { formatFileSize } from './formatFileSize'\nimport { truncateFileName } from './truncateFileName'\nimport {\n SIZES,\n SIZES_MIME_ICON,\n SIZES_NAME,\n SIZES_META,\n SIZES_ICON_BUTTON,\n SIZES_FILE_UPLOADER_PROGRESS_LINE,\n SIZES_PROGRESS_LINE_CONTAINER_IN_CONTENT,\n SIZES_PROGRESS_LINE_CONTAINER,\n} from './sizes'\nimport type { FileUploaderItemProps } from './types'\n\nconst COMPONENT_NAME = 'FileUploaderItem'\n\n/**\n *\n * *v1.0.0*\n *\n * Компонент для вывода метаданных и контролов загружаемого файла.\n *\n * Поддерживается \"ref\" и все нативные атрибуты \\<div\\> элемента.\n *\n * @visibleName FileUploader.Item\n */\nconst FileUploaderItem: React.ForwardRefExoticComponent<FileUploaderItemProps> = forwardRef<\n HTMLDivElement,\n FileUploaderItemProps\n>((props, ref) => {\n const {\n size = 'm',\n nameMaxLength = 25,\n error,\n loading,\n type,\n typeIcon,\n errorButton,\n name,\n format,\n fileSize,\n status,\n discardButton,\n controls,\n progressLine,\n loadingLayout,\n content,\n children,\n truncateName,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n ...restProps\n } = useMergedProps(props, {\n componentName: COMPONENT_NAME,\n sizes: SIZES,\n })\n\n const mimeTypeData = useMemo<MimeTypeData>(() => {\n if (!type) {\n return {\n subtype: null,\n icon: <FileQuestion />,\n }\n }\n\n return (\n getMimeTypeData(type) ?? {\n subtype: null,\n icon: <FileQuestion />,\n }\n )\n }, [type])\n\n const sizeProps = {\n size,\n sizeXXS,\n sizeXS,\n sizeS,\n sizeM,\n sizeL,\n sizeXL,\n }\n\n const typeIconProps: IconProps = {\n ...sizeProps,\n sizes: SIZES_MIME_ICON,\n color: 'inherit',\n icon: mimeTypeData.icon,\n }\n\n const nameProps: TextProps = {\n ...sizeProps,\n sizes: SIZES_NAME,\n appearance: 'subheading',\n weight: 700,\n color: 'inherit',\n textAlign: 'left',\n wordBreak: 'break-word',\n }\n\n const metaProps: TextProps = {\n ...sizeProps,\n sizes: SIZES_META,\n appearance: 'body',\n weight: 400,\n color: 'inherit',\n textAlign: 'left',\n wordBreak: 'break-word',\n }\n\n const statusProps: TextProps = {\n ...sizeProps,\n sizes: SIZES_META,\n appearance: 'body',\n weight: 400,\n color: error ? 'alert-error' : 'inherit',\n textAlign: 'left',\n wordBreak: 'break-word',\n }\n\n const controlProps: Omit<IconButtonProps, 'icon'> = {\n ...sizeProps,\n sizes: SIZES_ICON_BUTTON,\n secondary: true,\n square: true,\n }\n\n const errorButtonProps: IconButtonProps = {\n ...sizeProps,\n sizes: SIZES_ICON_BUTTON,\n secondary: true,\n square: true,\n children: (iconProps) => {\n return <Icon {...iconProps} icon={<InfoCircleFill />} color='alert-error' />\n },\n }\n\n const discardButtonProps: IconButtonProps = {\n ...sizeProps,\n sizes: SIZES_ICON_BUTTON,\n secondary: true,\n icon: <Trash />,\n square: true,\n }\n\n const progressLineProps: ProgressLineProps = {\n ...sizeProps,\n sizes: SIZES_FILE_UPLOADER_PROGRESS_LINE,\n palette: error ? { barColor: 'alert-error' } : undefined,\n }\n\n const skeletonProps: SkeletonProps = {\n height: 12,\n width: '45%',\n borderRadius: 4,\n marginTop: 3,\n marginBottom: 3,\n }\n\n const nameTruncated =\n truncateName && typeof name === 'string' && nameMaxLength > 0 ? truncateFileName(name, nameMaxLength) : null\n\n const fileSizeFormatted =\n typeof fileSize === 'number' || typeof fileSize === 'string' ? formatFileSize(fileSize) : null\n\n return (\n <Styled.Root {...restProps} {...sizeProps} ref={ref}>\n <Slot\n render={children}\n props={{\n nameProps,\n metaProps,\n statusProps,\n typeIconProps,\n errorButtonProps,\n progressLineProps,\n controlProps,\n discardButtonProps,\n skeletonProps,\n nameTruncated,\n fileSizeFormatted,\n subtypeFormatted: mimeTypeData.subtype,\n }}\n fallback={\n <>\n <Styled.Container>\n {loading ? (\n <Slot\n render={loadingLayout}\n props={{\n skeletonProps,\n }}\n fallback={\n <>\n <Styled.IconSkeleton>\n <Skeleton width='100%' height='100%' />\n </Styled.IconSkeleton>\n <Styled.Content>\n <Skeleton {...skeletonProps} />\n <Styled.MetaSkeleton>\n <Skeleton height={4} width='10%' marginRight={8} />\n <Skeleton height={4} width='15%' />\n </Styled.MetaSkeleton>\n </Styled.Content>\n </>\n }\n />\n ) : (\n <>\n <Styled.IconContainer>\n <Styled.IconBackground />\n <Slot render={typeIcon} props={typeIconProps} fallback={<Icon {...typeIconProps} />} />\n </Styled.IconContainer>\n <Styled.Content>\n <Slot\n render={content}\n props={{\n nameProps,\n metaProps,\n statusProps,\n nameTruncated,\n fileSizeFormatted,\n subtypeFormatted: mimeTypeData.subtype,\n }}\n fallback={\n <>\n <Slot render={nameTruncated !== null ? nameTruncated : name} props={nameProps} />\n {[format, mimeTypeData.subtype, fileSize, status].some((item) => !isNil(item)) ? (\n <Styled.Meta>\n <Slot\n render={format}\n props={metaProps}\n fallback={\n mimeTypeData.subtype ? <Text {...metaProps}>{mimeTypeData.subtype}</Text> : null\n }\n />\n {!isNil(fileSize) ? (\n <Styled.FileSize>\n {fileSizeFormatted ? (\n <Text {...metaProps}>{fileSizeFormatted}</Text>\n ) : (\n <Slot render={fileSize} props={metaProps} />\n )}\n </Styled.FileSize>\n ) : null}\n <Slot render={status} props={statusProps} />\n </Styled.Meta>\n ) : null}\n </>\n }\n />\n {progressLine ? (\n <Styled.ProgressLineContainer {...sizeProps} sizes={SIZES_PROGRESS_LINE_CONTAINER_IN_CONTENT}>\n <Slot render={progressLine} props={progressLineProps} />\n </Styled.ProgressLineContainer>\n ) : null}\n </Styled.Content>\n {(error && errorButton) || controls || discardButton ? (\n <Styled.Controls>\n {error ? <Slot render={errorButton} props={errorButtonProps} /> : null}\n <Slot render={controls} props={controlProps} />\n <Slot render={discardButton} props={discardButtonProps} />\n </Styled.Controls>\n ) : null}\n </>\n )}\n </Styled.Container>\n {progressLine && !loading ? (\n <Styled.ProgressLineContainer {...sizeProps} sizes={SIZES_PROGRESS_LINE_CONTAINER}>\n <Slot render={progressLine} props={progressLineProps} />\n </Styled.ProgressLineContainer>\n ) : null}\n </>\n }\n />\n </Styled.Root>\n )\n})\n\nexport { FileUploaderItem }\n"],"names":["FileUploaderItem","forwardRef","props","ref","size","nameMaxLength","error","loading","type","typeIcon","errorButton","name","format","fileSize","status","discardButton","controls","progressLine","loadingLayout","content","children","truncateName","sizeXXS","sizeXS","sizeS","sizeM","sizeL","sizeXL","restProps","useMergedProps","componentName","sizes","SIZES","mimeTypeData","useMemo","getMimeTypeData","subtype","icon","_jsx","FileQuestion","sizeProps","typeIconProps","SIZES_MIME_ICON","color","nameProps","SIZES_NAME","appearance","weight","textAlign","wordBreak","metaProps","SIZES_META","statusProps","controlProps","SIZES_ICON_BUTTON","secondary","square","errorButtonProps","iconProps","Icon","InfoCircleFill","discardButtonProps","Trash","progressLineProps","SIZES_FILE_UPLOADER_PROGRESS_LINE","palette","barColor","undefined","skeletonProps","height","width","borderRadius","marginTop","marginBottom","nameTruncated","truncateFileName","fileSizeFormatted","formatFileSize","Styled","Slot","render","subtypeFormatted","fallback","_jsxs","_Fragment","Skeleton","marginRight","some","item","isNil","Text","SIZES_PROGRESS_LINE_CONTAINER_IN_CONTENT","SIZES_PROGRESS_LINE_CONTAINER"],"mappings":"8hCA0CA,MAAMA,iBAA2EC,WAG/E,CAACC,EAAOC,KACR,MAAMC,KACJA,EAAO,IAAGC,cACVA,EAAgB,GAAEC,MAClBA,EAAKC,QACLA,EAAOC,KACPA,EAAIC,SACJA,EAAQC,YACRA,EAAWC,KACXA,EAAIC,OACJA,EAAMC,SACNA,EAAQC,OACRA,EAAMC,cACNA,EAAaC,SACbA,EAAQC,aACRA,EAAYC,cACZA,EAAaC,QACbA,EAAOC,SACPA,EAAQC,aACRA,EAAYC,QACZA,EAAOC,OACPA,EAAMC,MACNA,EAAKC,MACLA,EAAKC,MACLA,EAAKC,OACLA,KACGC,GACDC,eAAe3B,EAAO,CACxB4B,cA3CmB,mBA4CnBC,MAAOC,QAGT,MAAMC,EAAeC,QAAsB,IACpC1B,EAQH2B,gBAAgB3B,IAAS,CACvB4B,QAAS,KACTC,KAAMC,IAACC,aAAY,CAAA,IATd,CACLH,QAAS,KACTC,KAAMC,IAACC,aAAY,CAAA,IAUtB,CAAC/B,IAEJ,MAAMgC,EAAY,CAChBpC,OACAkB,UACAC,SACAC,QACAC,QACAC,QACAC,UAGF,MAAMc,EAA2B,IAC5BD,EACHT,MAAOW,gBACPC,MAAO,UACPN,KAAMJ,EAAaI,MAGrB,MAAMO,EAAuB,IACxBJ,EACHT,MAAOc,WACPC,WAAY,aACZC,OAAQ,IACRJ,MAAO,UACPK,UAAW,OACXC,UAAW,cAGb,MAAMC,EAAuB,IACxBV,EACHT,MAAOoB,WACPL,WAAY,OACZC,OAAQ,IACRJ,MAAO,UACPK,UAAW,OACXC,UAAW,cAGb,MAAMG,EAAyB,IAC1BZ,EACHT,MAAOoB,WACPL,WAAY,OACZC,OAAQ,IACRJ,MAAOrC,EAAQ,cAAgB,UAC/B0C,UAAW,OACXC,UAAW,cAGb,MAAMI,EAA8C,IAC/Cb,EACHT,MAAOuB,kBACPC,WAAW,EACXC,QAAQ,GAGV,MAAMC,EAAoC,IACrCjB,EACHT,MAAOuB,kBACPC,WAAW,EACXC,QAAQ,EACRpC,SAAWsC,GACFpB,IAACqB,KAAI,IAAKD,EAAWrB,KAAMC,IAACsB,mBAAmBjB,MAAM,iBAIhE,MAAMkB,EAAsC,IACvCrB,EACHT,MAAOuB,kBACPC,WAAW,EACXlB,KAAMC,IAACwB,UACPN,QAAQ,GAGV,MAAMO,EAAuC,IACxCvB,EACHT,MAAOiC,kCACPC,QAAS3D,EAAQ,CAAE4D,SAAU,oBAAkBC,GAGjD,MAAMC,EAA+B,CACnCC,OAAQ,GACRC,MAAO,MACPC,aAAc,EACdC,UAAW,EACXC,aAAc,GAGhB,MAAMC,EACJrD,UAAuBV,GAAS,UAAYN,EAAgB,EAAIsE,iBAAiBhE,EAAMN,GAAiB,KAE1G,MAAMuE,SACG/D,GAAa,iBAAmBA,GAAa,SAAWgE,eAAehE,GAAY,KAE5F,OACEyB,IAACwC,KAAW,IAAKlD,KAAeY,EAAWrC,IAAKA,EAAIiB,SAClDkB,IAACyC,KAAI,CACHC,OAAQ5D,EACRlB,MAAO,CACL0C,YACAM,YACAE,cACAX,gBACAgB,mBACAM,oBACAV,eACAQ,qBACAO,gBACAM,gBACAE,oBACAK,iBAAkBhD,EAAaG,SAEjC8C,SACEC,KAAAC,SAAA,CAAAhE,SAAA,CACEkB,IAACwC,UAAgB,CAAA1D,SACdb,EACC+B,IAACyC,KAAI,CACHC,OAAQ9D,EACRhB,MAAO,CACLkE,iBAEFc,SACEC,KAAAC,SAAA,CAAAhE,SAAA,CACEkB,IAACwC,aAAmB,CAAA1D,SAClBkB,IAAC+C,SAAQ,CAACf,MAAM,OAAOD,OAAO,WAEhCc,KAACL,QAAc,CAAA1D,SAAA,CACbkB,IAAC+C,SAAQ,IAAKjB,IACde,KAACL,aAAmB,CAAA1D,SAAA,CAClBkB,IAAC+C,SAAQ,CAAChB,OAAQ,EAAGC,MAAM,MAAMgB,YAAa,IAC9ChD,IAAC+C,SAAQ,CAAChB,OAAQ,EAAGC,MAAM,mBAOrCa,KAAAC,SAAA,CAAAhE,SAAA,CACE+D,KAACL,cAAoB,CAAA1D,SAAA,CACnBkB,IAACwC,eAAqB,CAAA,GACtBxC,IAACyC,KAAI,CAACC,OAAQvE,EAAUP,MAAOuC,EAAeyC,SAAU5C,IAACqB,KAAI,IAAKlB,SAEpE0C,KAACL,QAAc,CAAA1D,SAAA,CACbkB,IAACyC,KAAI,CACHC,OAAQ7D,EACRjB,MAAO,CACL0C,YACAM,YACAE,cACAsB,gBACAE,oBACAK,iBAAkBhD,EAAaG,SAEjC8C,SACEC,KAAAC,SAAA,CAAAhE,SAAA,CACEkB,IAACyC,KAAI,CAACC,OAAQN,IAAkB,KAAOA,EAAgB/D,EAAMT,MAAO0C,IACnE,CAAChC,EAAQqB,EAAaG,QAASvB,EAAUC,GAAQyE,KAAMC,IAAUC,MAAMD,IACtEL,KAACL,KAAW,CAAA1D,SAAA,CACVkB,IAACyC,KAAI,CACHC,OAAQpE,EACRV,MAAOgD,EACPgC,SACEjD,EAAaG,QAAUE,IAACoD,KAAI,IAAKxC,EAAS9B,SAAGa,EAAaG,UAAkB,OAG9EqD,MAAM5E,GAQJ,KAPFyB,IAACwC,SAAe,CAAA1D,SACbwD,EACCtC,IAACoD,KAAI,IAAKxC,EAAS9B,SAAGwD,IAEtBtC,IAACyC,KAAI,CAACC,OAAQnE,EAAUX,MAAOgD,MAIrCZ,IAACyC,KAAI,CAACC,OAAQlE,EAAQZ,MAAOkD,OAE7B,UAITnC,EACCqB,IAACwC,sBAA4B,IAAKtC,EAAWT,MAAO4D,yCAAyCvE,SAC3FkB,IAACyC,KAAI,CAACC,OAAQ/D,EAAcf,MAAO6D,MAEnC,QAEJzD,GAASI,GAAgBM,GAAYD,EACrCoE,KAACL,SAAe,CAAA1D,SAAA,CACbd,EAAQgC,IAACyC,KAAI,CAACC,OAAQtE,EAAaR,MAAOuD,IAAuB,KAClEnB,IAACyC,KAAI,CAACC,OAAQhE,EAAUd,MAAOmD,IAC/Bf,IAACyC,KAAI,CAACC,OAAQjE,EAAeb,MAAO2D,OAEpC,UAIT5C,IAAiBV,EAChB+B,IAACwC,sBAA4B,IAAKtC,EAAWT,MAAO6D,8BAA8BxE,SAChFkB,IAACyC,KAAI,CAACC,OAAQ/D,EAAcf,MAAO6D,MAEnC"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var parseNumberString=require('../../shared/utils/parseNumberString.js');const unitsToBytes=[['GB',1e3**3],['MB',1e6],['KB',1e3],['B',1]];exports.formatFileSize=r=>{const e=typeof r=='string'?parseNumberString.parseNumberString(r):r;for(const[r,t]of unitsToBytes){const s=e/t;const n=Math.round(s);if(n>=1)return`${`${s!==n?parseNumberString.parseNumberString(s.toFixed(1)):s}`.replace('.',',')} ${r}`}return'0 B'};
|
|
2
|
+
//# sourceMappingURL=formatFileSize.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formatFileSize.js","sources":["../../../../src/components/FileUploaderItem/formatFileSize.ts"],"sourcesContent":["import { parseNumberString } from 'shared/utils/parseNumberString'\n\ntype FileSize = number | string\ntype FileSizeUnit = 'GB' | 'MB' | 'KB' | 'B'\n\nconst unitsToBytes: [FileSizeUnit, number][] = [\n ['GB', 1000 ** 3],\n ['MB', 1000 ** 2],\n ['KB', 1000 ** 1],\n ['B', 1000 ** 0],\n]\n\nexport const formatFileSize = (value: string | number): `${FileSize} ${FileSizeUnit}` => {\n const fileSize: number = typeof value === 'string' ? parseNumberString(value) : value\n\n for (const [unit, bytes] of unitsToBytes) {\n const result = fileSize / bytes\n const resultRounded = Math.round(result)\n\n if (resultRounded >= 1) {\n const fileSizeFormatted = `${result !== resultRounded ? parseNumberString(result.toFixed(1)) : result}`.replace(\n '.',\n ','\n )\n\n return `${fileSizeFormatted} ${unit}`\n }\n }\n\n return '0 B'\n}\n"],"names":["unitsToBytes","value","fileSize","parseNumberString","unit","bytes","result","resultRounded","Math","round","toFixed","replace"],"mappings":"sFAKA,MAAMA,aAAyC,CAC7C,CAAC,KAAM,KAAQ,GACf,CAAC,KAAM,KACP,CAAC,KAAM,KACP,CAAC,IAAK,2BAGuBC,IAC7B,MAAMC,SAA0BD,GAAU,SAAWE,kBAAAA,kBAAkBF,GAASA,EAEhF,IAAK,MAAOG,EAAMC,KAAUL,aAAc,CACxC,MAAMM,EAASJ,EAAWG,EAC1B,MAAME,EAAgBC,KAAKC,MAAMH,GAEjC,GAAIC,GAAiB,EAMnB,MAAO,GALmB,GAAGD,IAAWC,EAAgBJ,kBAAAA,kBAAkBG,EAAOI,QAAQ,IAAMJ,IAASK,QACtG,IACA,QAG6BP,GAEnC,CAEA,MAAO"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{parseNumberString}from'../../shared/utils/parseNumberString.mjs';const unitsToBytes=[['GB',1e3**3],['MB',1e6],['KB',1e3],['B',1]];const formatFileSize=r=>{const e=typeof r=='string'?parseNumberString(r):r;for(const[r,t]of unitsToBytes){const o=e/t;const s=Math.round(o);if(s>=1)return`${`${o!==s?parseNumberString(o.toFixed(1)):o}`.replace('.',',')} ${r}`}return'0 B'};export{formatFileSize};
|
|
2
|
+
//# sourceMappingURL=formatFileSize.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"formatFileSize.mjs","sources":["../../../../src/components/FileUploaderItem/formatFileSize.ts"],"sourcesContent":["import { parseNumberString } from 'shared/utils/parseNumberString'\n\ntype FileSize = number | string\ntype FileSizeUnit = 'GB' | 'MB' | 'KB' | 'B'\n\nconst unitsToBytes: [FileSizeUnit, number][] = [\n ['GB', 1000 ** 3],\n ['MB', 1000 ** 2],\n ['KB', 1000 ** 1],\n ['B', 1000 ** 0],\n]\n\nexport const formatFileSize = (value: string | number): `${FileSize} ${FileSizeUnit}` => {\n const fileSize: number = typeof value === 'string' ? parseNumberString(value) : value\n\n for (const [unit, bytes] of unitsToBytes) {\n const result = fileSize / bytes\n const resultRounded = Math.round(result)\n\n if (resultRounded >= 1) {\n const fileSizeFormatted = `${result !== resultRounded ? parseNumberString(result.toFixed(1)) : result}`.replace(\n '.',\n ','\n )\n\n return `${fileSizeFormatted} ${unit}`\n }\n }\n\n return '0 B'\n}\n"],"names":["unitsToBytes","formatFileSize","value","fileSize","parseNumberString","unit","bytes","result","resultRounded","Math","round","toFixed","replace"],"mappings":"wEAKA,MAAMA,aAAyC,CAC7C,CAAC,KAAM,KAAQ,GACf,CAAC,KAAM,KACP,CAAC,KAAM,KACP,CAAC,IAAK,IAGD,MAAMC,eAAkBC,IAC7B,MAAMC,SAA0BD,GAAU,SAAWE,kBAAkBF,GAASA,EAEhF,IAAK,MAAOG,EAAMC,KAAUN,aAAc,CACxC,MAAMO,EAASJ,EAAWG,EAC1B,MAAME,EAAgBC,KAAKC,MAAMH,GAEjC,GAAIC,GAAiB,EAMnB,MAAO,GALmB,GAAGD,IAAWC,EAAgBJ,kBAAkBG,EAAOI,QAAQ,IAAMJ,IAASK,QACtG,IACA,QAG6BP,GAEnC,CAEA,MAAO"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var jsxRuntime=require('react/jsx-runtime');var index=require('../../icon-pack/src/icons/File/index.js');var index$1=require('../../icon-pack/src/icons/Image/index.js');var index$2=require('../../icon-pack/src/icons/Music/index.js');var index$3=require('../../icon-pack/src/icons/Camera/index.js');var index$4=require('../../icon-pack/src/icons/FileZipper/index.js');var index$5=require('../../icon-pack/src/icons/FilePdf/index.js');const mimeTypeToIcons=new Map([[/^(text)\/(.+)$/i,index.File],[/^(image)\/(.+)$/i,index$1.Image],[/^(audio)\/(.+)$/i,index$2.Music],[/^(video)\/(.+)$/i,index$3.Camera],[/^(application)\/(zip|x-zip-compressed|x-7z-compressed|vnd\.rar|x-rar-compressed|x-tar|gzip|x-gzip|x-bzip2|x-xz)$/i,index$4.FileZipper],[/^(application)\/(pdf)$/i,index$5.FilePdf]]);exports.getMimeTypeData=e=>{try{for(const[i,r]of mimeTypeToIcons.entries()){const n=e.match(i);if(n)return{subtype:n[2].toUpperCase(),icon:jsxRuntime.jsx(r,{})}}return null}catch{return null}};
|
|
2
|
+
//# sourceMappingURL=getMimeTypeData.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getMimeTypeData.js","sources":["../../../../src/components/FileUploaderItem/getMimeTypeData.tsx"],"sourcesContent":["import { File, FilePdf, FileZipper, Image, Music, Camera } from '@foxford/icon-pack'\n\nexport type MimeTypeData = {\n subtype: string | null\n icon: JSX.Element\n}\n\nconst mimeTypeToIcons = new Map<RegExp, React.FC>([\n [/^(text)\\/(.+)$/i, File],\n [/^(image)\\/(.+)$/i, Image],\n [/^(audio)\\/(.+)$/i, Music],\n [/^(video)\\/(.+)$/i, Camera],\n [\n /^(application)\\/(zip|x-zip-compressed|x-7z-compressed|vnd\\.rar|x-rar-compressed|x-tar|gzip|x-gzip|x-bzip2|x-xz)$/i,\n FileZipper,\n ],\n [/^(application)\\/(pdf)$/i, FilePdf],\n])\n\nexport const getMimeTypeData = (mimeType: string): MimeTypeData | null => {\n try {\n for (const [mimeRegExp, MimeTypeIcon] of mimeTypeToIcons.entries()) {\n const match = mimeType.match(mimeRegExp)\n\n if (match) {\n return {\n subtype: match[2].toUpperCase(),\n icon: <MimeTypeIcon />,\n }\n }\n }\n return null\n } catch {\n return null\n }\n}\n"],"names":["mimeTypeToIcons","Map","File","Image","Music","Camera","FileZipper","FilePdf","mimeType","mimeRegExp","MimeTypeIcon","entries","match","subtype","toUpperCase","icon","_jsx"],"mappings":"8bAOA,MAAMA,gBAAkB,IAAIC,IAAsB,CAChD,CAAC,kBAAmBC,YACpB,CAAC,mBAAoBC,eACrB,CAAC,mBAAoBC,QAAAA,OACrB,CAAC,mBAAoBC,QAAAA,QACrB,CACE,oHACAC,QAAAA,YAEF,CAAC,0BAA2BC,QAAAA,mCAGEC,IAC9B,IACE,IAAK,MAAOC,EAAYC,KAAiBV,gBAAgBW,UAAW,CAClE,MAAMC,EAAQJ,EAASI,MAAMH,GAE7B,GAAIG,EACF,MAAO,CACLC,QAASD,EAAM,GAAGE,cAClBC,KAAMC,WAAAA,IAACN,EAAY,CAAA,GAGzB,CACA,OAAO,IACT,CAAE,MACA,OAAO,IACT"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx}from'react/jsx-runtime';import{File}from'../../icon-pack/src/icons/File/index.mjs';import{Image}from'../../icon-pack/src/icons/Image/index.mjs';import{Music}from'../../icon-pack/src/icons/Music/index.mjs';import{Camera}from'../../icon-pack/src/icons/Camera/index.mjs';import{FileZipper}from'../../icon-pack/src/icons/FileZipper/index.mjs';import{FilePdf}from'../../icon-pack/src/icons/FilePdf/index.mjs';const mimeTypeToIcons=new Map([[/^(text)\/(.+)$/i,File],[/^(image)\/(.+)$/i,Image],[/^(audio)\/(.+)$/i,Music],[/^(video)\/(.+)$/i,Camera],[/^(application)\/(zip|x-zip-compressed|x-7z-compressed|vnd\.rar|x-rar-compressed|x-tar|gzip|x-gzip|x-bzip2|x-xz)$/i,FileZipper],[/^(application)\/(pdf)$/i,FilePdf]]);const getMimeTypeData=i=>{try{for(const[e,r]of mimeTypeToIcons.entries()){const o=i.match(e);if(o)return{subtype:o[2].toUpperCase(),icon:jsx(r,{})}}return null}catch{return null}};export{getMimeTypeData};
|
|
2
|
+
//# sourceMappingURL=getMimeTypeData.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getMimeTypeData.mjs","sources":["../../../../src/components/FileUploaderItem/getMimeTypeData.tsx"],"sourcesContent":["import { File, FilePdf, FileZipper, Image, Music, Camera } from '@foxford/icon-pack'\n\nexport type MimeTypeData = {\n subtype: string | null\n icon: JSX.Element\n}\n\nconst mimeTypeToIcons = new Map<RegExp, React.FC>([\n [/^(text)\\/(.+)$/i, File],\n [/^(image)\\/(.+)$/i, Image],\n [/^(audio)\\/(.+)$/i, Music],\n [/^(video)\\/(.+)$/i, Camera],\n [\n /^(application)\\/(zip|x-zip-compressed|x-7z-compressed|vnd\\.rar|x-rar-compressed|x-tar|gzip|x-gzip|x-bzip2|x-xz)$/i,\n FileZipper,\n ],\n [/^(application)\\/(pdf)$/i, FilePdf],\n])\n\nexport const getMimeTypeData = (mimeType: string): MimeTypeData | null => {\n try {\n for (const [mimeRegExp, MimeTypeIcon] of mimeTypeToIcons.entries()) {\n const match = mimeType.match(mimeRegExp)\n\n if (match) {\n return {\n subtype: match[2].toUpperCase(),\n icon: <MimeTypeIcon />,\n }\n }\n }\n return null\n } catch {\n return null\n }\n}\n"],"names":["mimeTypeToIcons","Map","File","Image","Music","Camera","FileZipper","FilePdf","getMimeTypeData","mimeType","mimeRegExp","MimeTypeIcon","entries","match","subtype","toUpperCase","icon","_jsx"],"mappings":"+ZAOA,MAAMA,gBAAkB,IAAIC,IAAsB,CAChD,CAAC,kBAAmBC,MACpB,CAAC,mBAAoBC,OACrB,CAAC,mBAAoBC,OACrB,CAAC,mBAAoBC,QACrB,CACE,oHACAC,YAEF,CAAC,0BAA2BC,WAGvB,MAAMC,gBAAmBC,IAC9B,IACE,IAAK,MAAOC,EAAYC,KAAiBX,gBAAgBY,UAAW,CAClE,MAAMC,EAAQJ,EAASI,MAAMH,GAE7B,GAAIG,EACF,MAAO,CACLC,QAASD,EAAM,GAAGE,cAClBC,KAAMC,IAACN,EAAY,CAAA,GAGzB,CACA,OAAO,IACT,CAAE,MACA,OAAO,IACT"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var sizes=require('../IconButton/sizes.js');var constants=require('../ProgressLine/constants.js');const SIZES_ICON_BUTTON={m:sizes.SIZES_BASE.xl,s:sizes.SIZES_BASE.l};const SIZES_FILE_UPLOADER_PROGRESS_LINE={m:{...constants.SIZES.xs,borderRadius:12},s:{...constants.SIZES.xs,borderRadius:12}};exports.SIZES={m:{'--file-uploader-item-root-padding':'11px','--file-uploader-item-root-min-width':'min-content','--file-uploader-item-root-min-height':'64px','--file-uploader-item-root-border-radius':'12px','--file-uploader-item-icon-container-width':'40px','--file-uploader-item-icon-container-height':'40px','--file-uploader-item-icon-container-border-radius':'8px','--file-uploader-item-icon-background-display':'block','--file-uploader-item-controls-gap':'8px','--file-uploader-item-icon-skeleton-width':'40px','--file-uploader-item-icon-skeleton-height':'40px','--file-uploader-item-icon-skeleton-border-radius':'8px','--file-uploader-item-meta-display':'flex'},s:{'--file-uploader-item-root-padding':'7px 9px 7px 11px','--file-uploader-item-root-min-width':'min-content','--file-uploader-item-root-min-height':'48px','--file-uploader-item-root-border-radius':'10px','--file-uploader-item-icon-container-width':'24px','--file-uploader-item-icon-container-height':'24px','--file-uploader-item-icon-container-border-radius':'8px','--file-uploader-item-icon-background-display':'none','--file-uploader-item-controls-gap':'4px','--file-uploader-item-icon-skeleton-width':'24px','--file-uploader-item-icon-skeleton-height':'24px','--file-uploader-item-icon-skeleton-border-radius':'50%','--file-uploader-item-meta-display':'none'}},exports.SIZES_FILE_UPLOADER_PROGRESS_LINE=SIZES_FILE_UPLOADER_PROGRESS_LINE,exports.SIZES_ICON_BUTTON=SIZES_ICON_BUTTON,exports.SIZES_META={m:{fontSize:14},s:{fontSize:14}},exports.SIZES_MIME_ICON={m:{fontSize:24},s:{fontSize:24}},exports.SIZES_NAME={m:{fontSize:16},s:{fontSize:16}},exports.SIZES_PROGRESS_LINE_CONTAINER={m:{display:'block',marginTop:12},s:{display:'none'}},exports.SIZES_PROGRESS_LINE_CONTAINER_IN_CONTENT={m:{display:'none'},s:{display:'block',marginTop:4,marginBottom:4}};
|
|
2
|
+
//# sourceMappingURL=sizes.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sizes.js","sources":["../../../../src/components/FileUploaderItem/sizes.ts"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { SIZES_BASE } from 'components/IconButton'\nimport { SIZES as SIZES_PROGRESS_LINE } from 'components/ProgressLine'\nimport type { Size } from './types'\n\nexport const SIZES: Record<Size, CSSProperties> = {\n m: {\n '--file-uploader-item-root-padding': '11px',\n '--file-uploader-item-root-min-width': 'min-content',\n '--file-uploader-item-root-min-height': '64px',\n '--file-uploader-item-root-border-radius': '12px',\n '--file-uploader-item-icon-container-width': '40px',\n '--file-uploader-item-icon-container-height': '40px',\n '--file-uploader-item-icon-container-border-radius': '8px',\n '--file-uploader-item-icon-background-display': 'block',\n '--file-uploader-item-controls-gap': '8px',\n '--file-uploader-item-icon-skeleton-width': '40px',\n '--file-uploader-item-icon-skeleton-height': '40px',\n '--file-uploader-item-icon-skeleton-border-radius': '8px',\n '--file-uploader-item-meta-display': 'flex',\n },\n s: {\n '--file-uploader-item-root-padding': '7px 9px 7px 11px',\n '--file-uploader-item-root-min-width': 'min-content',\n '--file-uploader-item-root-min-height': '48px',\n '--file-uploader-item-root-border-radius': '10px',\n '--file-uploader-item-icon-container-width': '24px',\n '--file-uploader-item-icon-container-height': '24px',\n '--file-uploader-item-icon-container-border-radius': '8px',\n '--file-uploader-item-icon-background-display': 'none',\n '--file-uploader-item-controls-gap': '4px',\n '--file-uploader-item-icon-skeleton-width': '24px',\n '--file-uploader-item-icon-skeleton-height': '24px',\n '--file-uploader-item-icon-skeleton-border-radius': '50%',\n '--file-uploader-item-meta-display': 'none',\n },\n}\n\nexport const SIZES_MIME_ICON: Record<Size, CSSProperties> = {\n m: { fontSize: 24 },\n s: { fontSize: 24 },\n}\n\nexport const SIZES_NAME: Record<Size, CSSProperties> = {\n m: { fontSize: 16 },\n s: { fontSize: 16 },\n}\n\nexport const SIZES_META: Record<Size, CSSProperties> = {\n m: { fontSize: 14 },\n s: { fontSize: 14 },\n}\n\nexport const SIZES_ICON_BUTTON: Record<Size, CSSProperties> = {\n m: SIZES_BASE.xl,\n s: SIZES_BASE.l,\n}\n\nexport const SIZES_FILE_UPLOADER_PROGRESS_LINE: Record<Size, CSSProperties> = {\n m: {\n ...SIZES_PROGRESS_LINE.xs,\n borderRadius: 12,\n },\n s: {\n ...SIZES_PROGRESS_LINE.xs,\n borderRadius: 12,\n },\n}\n\nexport const SIZES_PROGRESS_LINE_CONTAINER_IN_CONTENT: Record<Size, CSSProperties> = {\n m: {\n display: 'none',\n },\n s: {\n display: 'block',\n marginTop: 4,\n marginBottom: 4,\n },\n}\n\nexport const SIZES_PROGRESS_LINE_CONTAINER: Record<Size, CSSProperties> = {\n m: {\n display: 'block',\n marginTop: 12,\n },\n s: {\n display: 'none',\n },\n}\n"],"names":["SIZES_ICON_BUTTON","m","SIZES_BASE","xl","s","l","SIZES_FILE_UPLOADER_PROGRESS_LINE","SIZES_PROGRESS_LINE","xs","borderRadius","fontSize","display","marginTop","marginBottom"],"mappings":"+GAqDO,MAAMA,kBAAiD,CAC5DC,EAAGC,MAAAA,WAAWC,GACdC,EAAGF,MAAAA,WAAWG,GAGT,MAAMC,kCAAiE,CAC5EL,EAAG,IACEM,UAAAA,MAAoBC,GACvBC,aAAc,IAEhBL,EAAG,IACEG,UAAAA,MAAoBC,GACvBC,aAAc,mBA5DgC,CAChDR,EAAG,CACD,oCAAqC,OACrC,sCAAuC,cACvC,uCAAwC,OACxC,0CAA2C,OAC3C,4CAA6C,OAC7C,6CAA8C,OAC9C,oDAAqD,MACrD,+CAAgD,QAChD,oCAAqC,MACrC,2CAA4C,OAC5C,4CAA6C,OAC7C,mDAAoD,MACpD,oCAAqC,QAEvCG,EAAG,CACD,oCAAqC,mBACrC,sCAAuC,cACvC,uCAAwC,OACxC,0CAA2C,OAC3C,4CAA6C,OAC7C,6CAA8C,OAC9C,oDAAqD,MACrD,+CAAgD,OAChD,oCAAqC,MACrC,2CAA4C,OAC5C,4CAA6C,OAC7C,mDAAoD,MACpD,oCAAqC,oJAcc,CACrDH,EAAG,CAAES,SAAU,IACfN,EAAG,CAAEM,SAAU,6BAZ2C,CAC1DT,EAAG,CAAES,SAAU,IACfN,EAAG,CAAEM,SAAU,wBAGsC,CACrDT,EAAG,CAAES,SAAU,IACfN,EAAG,CAAEM,SAAU,2CAmCyD,CACxET,EAAG,CACDU,QAAS,QACTC,UAAW,IAEbR,EAAG,CACDO,QAAS,0DAjBwE,CACnFV,EAAG,CACDU,QAAS,QAEXP,EAAG,CACDO,QAAS,QACTC,UAAW,EACXC,aAAc"}
|