@os-design/upload 1.0.138 → 1.0.141
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ImageUpload/index.js +4 -2
- package/dist/cjs/ImageUpload/index.js.map +1 -1
- package/dist/cjs/ImageUpload/utils/defaultLocale.js.map +1 -1
- package/dist/cjs/ImageUploadSkeleton/index.js +1 -1
- package/dist/cjs/ImageUploadSkeleton/index.js.map +1 -1
- package/dist/cjs/emotion.d.js.map +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/ImageUpload/index.js +4 -2
- package/dist/esm/ImageUpload/index.js.map +1 -1
- package/dist/esm/ImageUpload/utils/defaultLocale.js.map +1 -1
- package/dist/esm/ImageUploadSkeleton/index.js +1 -1
- package/dist/esm/ImageUploadSkeleton/index.js.map +1 -1
- package/dist/esm/emotion.d.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/types/ImageUpload/index.d.ts +3 -2
- package/dist/types/ImageUpload/index.d.ts.map +1 -1
- package/dist/types/ImageUploadSkeleton/index.d.ts +1 -1
- package/dist/types/ImageUploadSkeleton/index.d.ts.map +1 -1
- package/package.json +5 -5
|
@@ -35,7 +35,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
35
35
|
|
|
36
36
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
37
37
|
|
|
38
|
-
function _extends() { _extends = Object.assign
|
|
38
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
39
39
|
|
|
40
40
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
41
41
|
|
|
@@ -116,7 +116,9 @@ var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('isD
|
|
|
116
116
|
var ImageUpload = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
117
117
|
var url = _ref.url,
|
|
118
118
|
_ref$accept = _ref.accept,
|
|
119
|
-
accept = _ref$accept === void 0 ?
|
|
119
|
+
accept = _ref$accept === void 0 ? {
|
|
120
|
+
'image/*': ['.jpeg', '.png', '.webp']
|
|
121
|
+
} : _ref$accept,
|
|
120
122
|
_ref$locale = _ref.locale,
|
|
121
123
|
locale = _ref$locale === void 0 ? _defaultLocale["default"] : _ref$locale,
|
|
122
124
|
value = _ref.value,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ImageUpload/index.tsx"],"names":["overlayHasImageStyles","p","hasImage","css","theme","imageUploadOverlayOpacity","overlayHasImageHoverStyles","isDragActive","Overlay","resetFocusStyles","imageUploadOverlayPadding","contentIsDragActiveStyles","Content","PictureIcon","Picture","Title","styled","div","DeleteButtonContainer","hoverStyles","imageUploadNoImageHoverColorBorder","notHasImageStyles","imageUploadNoImageColorBg","imageUploadNoImageColorBorder","focusStyles","isDragActiveStyles","LocalImage","img","RemoteImage","Image","Container","imageUploadMaxWidth","imageUploadMinHeight","borderRadius","colorText","sizeStyles","ImageUpload","ref","url","accept","locale","defaultLocale","value","defaultValue","onChange","size","rest","touchDevice","forwardedValue","setForwardedValue","multiple","onDrop","file","getRootProps","getInputProps","source","URL","createObjectURL","renderImage","e","preventDefault","onKeyDown","key","touchTitle","dropTitle","buttonGhostColorText","buttonGhostColorBgHover","stopPropagation","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Button, Image } from '@os-design/core';\nimport { Delete, Picture } from '@os-design/icons';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport {\n omitEmotionProps,\n isTouchDevice,\n useForwardedState,\n} from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface ImageUploadProps extends JsxDivProps, WithSize {\n /**\n * The url of the image.\n * @default undefined\n */\n url?: string;\n /**\n * Allowed image formats.\n * @default undefined\n */\n accept?: string | string[];\n /**\n * The locale of the component.\n * @default undefined\n */\n locale?: ImageUploadLocale;\n /**\n * The selected local file, or null if the image is marked as deleted.\n * @default undefined\n */\n value?: File | null;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: File | null;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: File | null) => void;\n}\n\nconst overlayHasImageStyles = (p) =>\n p.hasImage &&\n css`\n background-color: hsla(0, 0%, 0%, ${p.theme.imageUploadOverlayOpacity});\n color: hsl(0, 0%, 100%);\n `;\n\nconst overlayHasImageHoverStyles = (p) =>\n p.hasImage &&\n !p.isDragActive &&\n css`\n @media (hover: hover) {\n opacity: 0;\n\n &:hover {\n opacity: 1;\n }\n }\n `;\n\ninterface OverlayProps {\n isDragActive: boolean;\n hasImage: boolean;\n}\nexport const Overlay = styled(\n 'div',\n omitEmotionProps('isDragActive', 'hasImage')\n)<OverlayProps>`\n ${resetFocusStyles};\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n text-align: center;\n padding: ${(p) => p.theme.imageUploadOverlayPadding}em;\n\n ${overlayHasImageStyles};\n ${overlayHasImageHoverStyles}\n ${transitionStyles('opacity')};\n`;\n\nconst contentIsDragActiveStyles = (p) =>\n p.isDragActive &&\n css`\n transform: scale(0.92);\n `;\n\ntype ContentProps = Pick<OverlayProps, 'isDragActive'>;\nconst Content = styled('div', omitEmotionProps('isDragActive'))<ContentProps>`\n ${contentIsDragActiveStyles};\n ${transitionStyles('transform')};\n`;\n\nconst PictureIcon = styled(Picture)`\n opacity: 0.8;\n font-size: 2.5em;\n`;\n\nconst Title = styled.div`\n opacity: 0.8;\n`;\n\nconst DeleteButtonContainer = styled.div`\n position: absolute;\n top: 0.5em;\n right: 0.5em;\n`;\n\nconst hoverStyles = (p) => css`\n border-color: ${clr(p.theme.imageUploadNoImageHoverColorBorder)};\n`;\n\nconst notHasImageStyles = (p) =>\n !p.hasImage &&\n css`\n background-color: ${clr(p.theme.imageUploadNoImageColorBg)};\n border: 2px dashed ${clr(p.theme.imageUploadNoImageColorBorder)};\n\n @media (hover: hover) {\n &:hover {\n ${hoverStyles(p)};\n }\n }\n `;\n\nconst focusStyles = (p) => css`\n &:focus-within {\n & > div {\n opacity: 1;\n }\n ${hoverStyles(p)};\n }\n`;\n\nconst isDragActiveStyles = (p) =>\n p.isDragActive &&\n css`\n ${hoverStyles(p)};\n `;\n\nconst LocalImage = styled.img`\n width: 100%;\n vertical-align: top;\n`;\n\nconst RemoteImage = styled(Image)`\n vertical-align: top;\n`;\n\ninterface ContainerProps extends WithSize {\n isDragActive: boolean;\n hasImage: boolean;\n}\n\nconst Container = styled(\n 'div',\n omitEmotionProps('isDragActive', 'hasImage', 'size')\n)<ContainerProps>`\n position: relative;\n cursor: pointer;\n overflow: hidden;\n box-sizing: border-box;\n\n max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n min-height: ${(p) => p.theme.imageUploadMinHeight}em;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${notHasImageStyles};\n ${focusStyles};\n ${isDragActiveStyles};\n ${sizeStyles};\n ${transitionStyles('border')};\n`;\n\n/**\n * The component to upload an image.\n */\nconst ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(\n (\n {\n url,\n accept = ['image/jpeg', 'image/png', 'image/webp'],\n locale = defaultLocale,\n value,\n defaultValue,\n onChange,\n size,\n ...rest\n },\n ref\n ) => {\n const touchDevice = useMemo(() => isTouchDevice(), []);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n accept,\n multiple: false,\n onDrop: ([file]) => setForwardedValue(file),\n });\n\n const source = useMemo(() => {\n if (forwardedValue === null) return null; // If the user select an image\n if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists\n if (url) return url;\n return null;\n }, [forwardedValue, url]);\n\n const hasImage = useMemo(() => !!source, [source]);\n\n const renderImage = useCallback(() => {\n if (!source) return null;\n if (typeof forwardedValue === 'object' && forwardedValue !== null) {\n return <LocalImage src={source} />;\n }\n return <RemoteImage url={source} />;\n }, [forwardedValue, source]);\n\n return (\n <Container\n isDragActive={isDragActive}\n hasImage={hasImage}\n size={size}\n onMouseDown={(e) => e.preventDefault()}\n {...rest}\n ref={ref}\n >\n <input {...getInputProps()} />\n {renderImage()}\n\n <Overlay\n isDragActive={isDragActive}\n hasImage={hasImage}\n {\n ...getRootProps({\n onKeyDown: (e) => {\n if (e.key === 'Backspace') setForwardedValue(null);\n },\n } as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n }\n >\n <Content isDragActive={isDragActive}>\n <PictureIcon />\n <Title>{touchDevice ? locale.touchTitle : locale.dropTitle}</Title>\n </Content>\n\n {hasImage && (\n <ThemeOverrider\n overrides={{\n buttonGhostColorText: [0, 0, 100],\n buttonGhostColorBgHover: [0, 0, 100, 0.1],\n }}\n >\n <DeleteButtonContainer>\n <Button\n type='ghost'\n wide='never'\n onClick={(e) => {\n setForwardedValue(null);\n e.stopPropagation();\n }}\n >\n <Delete />\n </Button>\n </DeleteButtonContainer>\n </ThemeOverrider>\n )}\n </Overlay>\n </Container>\n );\n }\n);\n\nImageUpload.displayName = 'ImageUpload';\n\nexport default ImageUpload;\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["overlayHasImageStyles","p","hasImage","css","theme","imageUploadOverlayOpacity","overlayHasImageHoverStyles","isDragActive","Overlay","styled","omitEmotionProps","resetFocusStyles","imageUploadOverlayPadding","transitionStyles","contentIsDragActiveStyles","Content","PictureIcon","Picture","Title","div","DeleteButtonContainer","hoverStyles","clr","imageUploadNoImageHoverColorBorder","notHasImageStyles","imageUploadNoImageColorBg","imageUploadNoImageColorBorder","focusStyles","isDragActiveStyles","LocalImage","img","RemoteImage","Image","Container","imageUploadMaxWidth","imageUploadMinHeight","borderRadius","colorText","sizeStyles","ImageUpload","forwardRef","ref","url","accept","locale","defaultLocale","value","defaultValue","onChange","size","rest","touchDevice","useMemo","isTouchDevice","useForwardedState","forwardedValue","setForwardedValue","useDropzone","multiple","onDrop","file","getRootProps","getInputProps","source","URL","createObjectURL","renderImage","useCallback","e","preventDefault","onKeyDown","key","touchTitle","dropTitle","buttonGhostColorText","buttonGhostColorBgHover","stopPropagation","displayName"],"sources":["../../../src/ImageUpload/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useDropzone, Accept } from 'react-dropzone';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Button, Image } from '@os-design/core';\nimport { Delete, Picture } from '@os-design/icons';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport {\n omitEmotionProps,\n isTouchDevice,\n useForwardedState,\n} from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface ImageUploadProps extends JsxDivProps, WithSize {\n /**\n * The url of the image.\n * @default undefined\n */\n url?: string;\n /**\n * Allowed image formats.\n * @default undefined\n */\n accept?: Accept;\n /**\n * The locale of the component.\n * @default undefined\n */\n locale?: ImageUploadLocale;\n /**\n * The selected local file, or null if the image is marked as deleted.\n * @default undefined\n */\n value?: File | null;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: File | null;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: File | null) => void;\n}\n\nconst overlayHasImageStyles = (p) =>\n p.hasImage &&\n css`\n background-color: hsla(0, 0%, 0%, ${p.theme.imageUploadOverlayOpacity});\n color: hsl(0, 0%, 100%);\n `;\n\nconst overlayHasImageHoverStyles = (p) =>\n p.hasImage &&\n !p.isDragActive &&\n css`\n @media (hover: hover) {\n opacity: 0;\n\n &:hover {\n opacity: 1;\n }\n }\n `;\n\ninterface OverlayProps {\n isDragActive: boolean;\n hasImage: boolean;\n}\nexport const Overlay = styled(\n 'div',\n omitEmotionProps('isDragActive', 'hasImage')\n)<OverlayProps>`\n ${resetFocusStyles};\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n text-align: center;\n padding: ${(p) => p.theme.imageUploadOverlayPadding}em;\n\n ${overlayHasImageStyles};\n ${overlayHasImageHoverStyles}\n ${transitionStyles('opacity')};\n`;\n\nconst contentIsDragActiveStyles = (p) =>\n p.isDragActive &&\n css`\n transform: scale(0.92);\n `;\n\ntype ContentProps = Pick<OverlayProps, 'isDragActive'>;\nconst Content = styled('div', omitEmotionProps('isDragActive'))<ContentProps>`\n ${contentIsDragActiveStyles};\n ${transitionStyles('transform')};\n`;\n\nconst PictureIcon = styled(Picture)`\n opacity: 0.8;\n font-size: 2.5em;\n`;\n\nconst Title = styled.div`\n opacity: 0.8;\n`;\n\nconst DeleteButtonContainer = styled.div`\n position: absolute;\n top: 0.5em;\n right: 0.5em;\n`;\n\nconst hoverStyles = (p) => css`\n border-color: ${clr(p.theme.imageUploadNoImageHoverColorBorder)};\n`;\n\nconst notHasImageStyles = (p) =>\n !p.hasImage &&\n css`\n background-color: ${clr(p.theme.imageUploadNoImageColorBg)};\n border: 2px dashed ${clr(p.theme.imageUploadNoImageColorBorder)};\n\n @media (hover: hover) {\n &:hover {\n ${hoverStyles(p)};\n }\n }\n `;\n\nconst focusStyles = (p) => css`\n &:focus-within {\n & > div {\n opacity: 1;\n }\n ${hoverStyles(p)};\n }\n`;\n\nconst isDragActiveStyles = (p) =>\n p.isDragActive &&\n css`\n ${hoverStyles(p)};\n `;\n\nconst LocalImage = styled.img`\n width: 100%;\n vertical-align: top;\n`;\n\nconst RemoteImage = styled(Image)`\n vertical-align: top;\n`;\n\ninterface ContainerProps extends WithSize {\n isDragActive: boolean;\n hasImage: boolean;\n}\n\nconst Container = styled(\n 'div',\n omitEmotionProps('isDragActive', 'hasImage', 'size')\n)<ContainerProps>`\n position: relative;\n cursor: pointer;\n overflow: hidden;\n box-sizing: border-box;\n\n max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n min-height: ${(p) => p.theme.imageUploadMinHeight}em;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${notHasImageStyles};\n ${focusStyles};\n ${isDragActiveStyles};\n ${sizeStyles};\n ${transitionStyles('border')};\n`;\n\n/**\n * The component to upload an image.\n */\nconst ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(\n (\n {\n url,\n accept = { 'image/*': ['.jpeg', '.png', '.webp'] },\n locale = defaultLocale,\n value,\n defaultValue,\n onChange,\n size,\n ...rest\n },\n ref\n ) => {\n const touchDevice = useMemo(() => isTouchDevice(), []);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n accept,\n multiple: false,\n onDrop: ([file]) => setForwardedValue(file),\n });\n\n const source = useMemo(() => {\n if (forwardedValue === null) return null; // If the user select an image\n if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists\n if (url) return url;\n return null;\n }, [forwardedValue, url]);\n\n const hasImage = useMemo(() => !!source, [source]);\n\n const renderImage = useCallback(() => {\n if (!source) return null;\n if (typeof forwardedValue === 'object' && forwardedValue !== null) {\n return <LocalImage src={source} />;\n }\n return <RemoteImage url={source} />;\n }, [forwardedValue, source]);\n\n return (\n <Container\n isDragActive={isDragActive}\n hasImage={hasImage}\n size={size}\n onMouseDown={(e) => e.preventDefault()}\n {...rest}\n ref={ref}\n >\n <input {...getInputProps()} />\n {renderImage()}\n\n <Overlay\n isDragActive={isDragActive}\n hasImage={hasImage}\n {\n ...getRootProps({\n onKeyDown: (e) => {\n if (e.key === 'Backspace') setForwardedValue(null);\n },\n } as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n }\n >\n <Content isDragActive={isDragActive}>\n <PictureIcon />\n <Title>{touchDevice ? locale.touchTitle : locale.dropTitle}</Title>\n </Content>\n\n {hasImage && (\n <ThemeOverrider\n overrides={{\n buttonGhostColorText: [0, 0, 100],\n buttonGhostColorBgHover: [0, 0, 100, 0.1],\n }}\n >\n <DeleteButtonContainer>\n <Button\n type='ghost'\n wide='never'\n onClick={(e) => {\n setForwardedValue(null);\n e.stopPropagation();\n }}\n >\n <Delete />\n </Button>\n </DeleteButtonContainer>\n </ThemeOverrider>\n )}\n </Overlay>\n </Container>\n );\n }\n);\n\nImageUpload.displayName = 'ImageUpload';\n\nexport default ImageUpload;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AAKA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAwB,CAACC,CAAD;EAAA,OAC5BA,CAAC,CAACC,QAAF,QACAC,WADA,uJAEsCF,CAAC,CAACG,KAAF,CAAQC,yBAF9C,CAD4B;AAAA,CAA9B;;AAOA,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA6B,CAACL,CAAD;EAAA,OACjCA,CAAC,CAACC,QAAF,IACA,CAACD,CAAC,CAACM,YADH,QAEAJ,WAFA,oLADiC;AAAA,CAAnC;;AAiBO,IAAMK,OAAO,GAAG,IAAAC,kBAAA,EACrB,KADqB,EAErB,IAAAC,uBAAA,EAAiB,cAAjB,EAAiC,UAAjC,CAFqB,CAAH,wUAIhBC,wBAJgB,EAiBP,UAACV,CAAD;EAAA,OAAOA,CAAC,CAACG,KAAF,CAAQQ,yBAAf;AAAA,CAjBO,EAmBhBZ,qBAnBgB,EAoBhBM,0BApBgB,EAqBhB,IAAAO,wBAAA,EAAiB,SAAjB,CArBgB,CAAb;;;AAwBP,IAAMC,yBAAyB,GAAG,SAA5BA,yBAA4B,CAACb,CAAD;EAAA,OAChCA,CAAC,CAACM,YAAF,QACAJ,WADA,yGADgC;AAAA,CAAlC;;AAOA,IAAMY,OAAO,GAAG,IAAAN,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,cAAjB,CAAd,CAAH,4FACTI,yBADS,EAET,IAAAD,wBAAA,EAAiB,WAAjB,CAFS,CAAb;AAKA,IAAMG,WAAW,GAAG,IAAAP,kBAAA,EAAOQ,cAAP,CAAH,+GAAjB;;AAKA,IAAMC,KAAK,GAAGT,kBAAA,CAAOU,GAAV,0FAAX;;AAIA,IAAMC,qBAAqB,GAAGX,kBAAA,CAAOU,GAAV,gIAA3B;;AAMA,IAAME,WAAW,GAAG,SAAdA,WAAc,CAACpB,CAAD;EAAA,WAAOE,WAAP,kGACF,IAAAmB,YAAA,EAAIrB,CAAC,CAACG,KAAF,CAAQmB,kCAAZ,CADE;AAAA,CAApB;;AAIA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACvB,CAAD;EAAA,OACxB,CAACA,CAAC,CAACC,QAAH,QACAC,WADA,yNAEsB,IAAAmB,YAAA,EAAIrB,CAAC,CAACG,KAAF,CAAQqB,yBAAZ,CAFtB,EAGuB,IAAAH,YAAA,EAAIrB,CAAC,CAACG,KAAF,CAAQsB,6BAAZ,CAHvB,EAOQL,WAAW,CAACpB,CAAD,CAPnB,CADwB;AAAA,CAA1B;;AAaA,IAAM0B,WAAW,GAAG,SAAdA,WAAc,CAAC1B,CAAD;EAAA,WAAOE,WAAP,0JAKdkB,WAAW,CAACpB,CAAD,CALG;AAAA,CAApB;;AASA,IAAM2B,kBAAkB,GAAG,SAArBA,kBAAqB,CAAC3B,CAAD;EAAA,OACzBA,CAAC,CAACM,YAAF,QACAJ,WADA,0FAEIkB,WAAW,CAACpB,CAAD,CAFf,CADyB;AAAA,CAA3B;;AAMA,IAAM4B,UAAU,GAAGpB,kBAAA,CAAOqB,GAAV,mHAAhB;;AAKA,IAAMC,WAAW,GAAG,IAAAtB,kBAAA,EAAOuB,WAAP,CAAH,mGAAjB;AASA,IAAMC,SAAS,GAAG,IAAAxB,kBAAA,EAChB,KADgB,EAEhB,IAAAC,uBAAA,EAAiB,cAAjB,EAAiC,UAAjC,EAA6C,MAA7C,CAFgB,CAAH,+SASA,UAACT,CAAD;EAAA,OAAOA,CAAC,CAACG,KAAF,CAAQ8B,mBAAf;AAAA,CATA,EAUC,UAACjC,CAAD;EAAA,OAAOA,CAAC,CAACG,KAAF,CAAQ+B,oBAAf;AAAA,CAVD,EAWI,UAAClC,CAAD;EAAA,OAAOA,CAAC,CAACG,KAAF,CAAQgC,YAAf;AAAA,CAXJ,EAYJ,UAACnC,CAAD;EAAA,OAAO,IAAAqB,YAAA,EAAIrB,CAAC,CAACG,KAAF,CAAQiC,SAAZ,CAAP;AAAA,CAZI,EAcXb,iBAdW,EAeXG,WAfW,EAgBXC,kBAhBW,EAiBXU,kBAjBW,EAkBX,IAAAzB,wBAAA,EAAiB,QAAjB,CAlBW,CAAf;AAqBA;AACA;AACA;;AACA,IAAM0B,WAAW,gBAAG,IAAAC,iBAAA,EAClB,gBAWEC,GAXF,EAYK;EAAA,IAVDC,GAUC,QAVDA,GAUC;EAAA,uBATDC,MASC;EAAA,IATDA,MASC,4BATQ;IAAE,WAAW,CAAC,OAAD,EAAU,MAAV,EAAkB,OAAlB;EAAb,CASR;EAAA,uBARDC,MAQC;EAAA,IARDA,MAQC,4BARQC,yBAQR;EAAA,IAPDC,KAOC,QAPDA,KAOC;EAAA,IANDC,YAMC,QANDA,YAMC;EAAA,IALDC,QAKC,QALDA,QAKC;EAAA,IAJDC,IAIC,QAJDA,IAIC;EAAA,IAHEC,IAGF;;EACH,IAAMC,WAAW,GAAG,IAAAC,cAAA,EAAQ;IAAA,OAAM,IAAAC,oBAAA,GAAN;EAAA,CAAR,EAA+B,EAA/B,CAApB;;EACA,yBAA4C,IAAAC,wBAAA,EAAkB;IAC5DR,KAAK,EAALA,KAD4D;IAE5DC,YAAY,EAAZA,YAF4D;IAG5DC,QAAQ,EAARA;EAH4D,CAAlB,CAA5C;EAAA;EAAA,IAAOO,cAAP;EAAA,IAAuBC,iBAAvB;;EAMA,mBAAsD,IAAAC,0BAAA,EAAY;IAChEd,MAAM,EAANA,MADgE;IAEhEe,QAAQ,EAAE,KAFsD;IAGhEC,MAAM,EAAE;MAAA;MAAA,IAAEC,IAAF;;MAAA,OAAYJ,iBAAiB,CAACI,IAAD,CAA7B;IAAA;EAHwD,CAAZ,CAAtD;EAAA,IAAQC,YAAR,gBAAQA,YAAR;EAAA,IAAsBC,aAAtB,gBAAsBA,aAAtB;EAAA,IAAqCvD,YAArC,gBAAqCA,YAArC;;EAMA,IAAMwD,MAAM,GAAG,IAAAX,cAAA,EAAQ,YAAM;IAC3B,IAAIG,cAAc,KAAK,IAAvB,EAA6B,OAAO,IAAP,CADF,CACe;;IAC1C,IAAIA,cAAJ,EAAoB,OAAOS,GAAG,CAACC,eAAJ,CAAoBV,cAApB,CAAP,CAFO,CAEqC;;IAChE,IAAIb,GAAJ,EAAS,OAAOA,GAAP;IACT,OAAO,IAAP;EACD,CALc,EAKZ,CAACa,cAAD,EAAiBb,GAAjB,CALY,CAAf;EAOA,IAAMxC,QAAQ,GAAG,IAAAkD,cAAA,EAAQ;IAAA,OAAM,CAAC,CAACW,MAAR;EAAA,CAAR,EAAwB,CAACA,MAAD,CAAxB,CAAjB;EAEA,IAAMG,WAAW,GAAG,IAAAC,kBAAA,EAAY,YAAM;IACpC,IAAI,CAACJ,MAAL,EAAa,OAAO,IAAP;;IACb,IAAI,QAAOR,cAAP,MAA0B,QAA1B,IAAsCA,cAAc,KAAK,IAA7D,EAAmE;MACjE,oBAAO,gCAAC,UAAD;QAAY,GAAG,EAAEQ;MAAjB,EAAP;IACD;;IACD,oBAAO,gCAAC,WAAD;MAAa,GAAG,EAAEA;IAAlB,EAAP;EACD,CANmB,EAMjB,CAACR,cAAD,EAAiBQ,MAAjB,CANiB,CAApB;EAQA,oBACE,gCAAC,SAAD;IACE,YAAY,EAAExD,YADhB;IAEE,QAAQ,EAAEL,QAFZ;IAGE,IAAI,EAAE+C,IAHR;IAIE,WAAW,EAAE,qBAACmB,CAAD;MAAA,OAAOA,CAAC,CAACC,cAAF,EAAP;IAAA;EAJf,GAKMnB,IALN;IAME,GAAG,EAAET;EANP,iBAQE,yCAAWqB,aAAa,EAAxB,CARF,EASGI,WAAW,EATd,eAWE,gCAAC,OAAD;IACE,YAAY,EAAE3D,YADhB;IAEE,QAAQ,EAAEL;EAFZ,GAIO2D,YAAY,CAAC;IACdS,SAAS,EAAE,mBAACF,CAAD,EAAO;MAChB,IAAIA,CAAC,CAACG,GAAF,KAAU,WAAd,EAA2Bf,iBAAiB,CAAC,IAAD,CAAjB;IAC5B;EAHa,CAAD,CAJnB,CAQc;EARd,gBAWE,gCAAC,OAAD;IAAS,YAAY,EAAEjD;EAAvB,gBACE,gCAAC,WAAD,OADF,eAEE,gCAAC,KAAD,QAAQ4C,WAAW,GAAGP,MAAM,CAAC4B,UAAV,GAAuB5B,MAAM,CAAC6B,SAAjD,CAFF,CAXF,EAgBGvE,QAAQ,iBACP,gCAAC,uBAAD;IACE,SAAS,EAAE;MACTwE,oBAAoB,EAAE,CAAC,CAAD,EAAI,CAAJ,EAAO,GAAP,CADb;MAETC,uBAAuB,EAAE,CAAC,CAAD,EAAI,CAAJ,EAAO,GAAP,EAAY,GAAZ;IAFhB;EADb,gBAME,gCAAC,qBAAD,qBACE,gCAAC,YAAD;IACE,IAAI,EAAC,OADP;IAEE,IAAI,EAAC,OAFP;IAGE,OAAO,EAAE,iBAACP,CAAD,EAAO;MACdZ,iBAAiB,CAAC,IAAD,CAAjB;MACAY,CAAC,CAACQ,eAAF;IACD;EANH,gBAQE,gCAAC,aAAD,OARF,CADF,CANF,CAjBJ,CAXF,CADF;AAoDD,CAhGiB,CAApB;AAmGArC,WAAW,CAACsC,WAAZ,GAA0B,aAA1B;eAEetC,W"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"defaultLocale.js","names":["defaultLocale","touchTitle","dropTitle"],"sources":["../../../../src/ImageUpload/utils/defaultLocale.ts"],"sourcesContent":["export interface ImageUploadLocale {\n touchTitle: string;\n dropTitle: string;\n}\n\nconst defaultLocale: ImageUploadLocale = {\n touchTitle: 'Click here to choose an image',\n dropTitle: 'Drop an image here or click to choose it',\n};\n\nexport default defaultLocale;\n"],"mappings":";;;;;;AAKA,IAAMA,aAAgC,GAAG;EACvCC,UAAU,EAAE,+BAD2B;EAEvCC,SAAS,EAAE;AAF4B,CAAzC;eAKeF,a"}
|
|
@@ -25,7 +25,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
25
25
|
|
|
26
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
27
27
|
|
|
28
|
-
function _extends() { _extends = Object.assign
|
|
28
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
29
29
|
|
|
30
30
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
31
31
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["StyledImageUploadSkeleton","styled","Skeleton","omitEmotionProps","p","theme","imageUploadMaxWidth","imageUploadMinHeight","sizeStyles","ImageUploadSkeleton","forwardRef","props","ref","displayName"],"sources":["../../../src/ImageUploadSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { Skeleton, SkeletonProps } from '@os-design/core';\n\nexport type ImageUploadSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;\n\nconst StyledImageUploadSkeleton = styled(\n Skeleton,\n omitEmotionProps('size')\n)<WithSize>`\n max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n height: ${(p) => p.theme.imageUploadMinHeight}em;\n ${sizeStyles};\n`;\n\n/**\n * Provides an image upload placeholder while a user waits for\n * the content to load.\n */\nconst ImageUploadSkeleton = forwardRef<\n HTMLDivElement,\n ImageUploadSkeletonProps\n>((props, ref) => (\n <StyledImageUploadSkeleton width='100%' {...props} ref={ref} />\n));\n\nImageUploadSkeleton.displayName = 'ImageUploadSkeleton';\n\nexport default ImageUploadSkeleton;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAIA,IAAMA,yBAAyB,GAAG,IAAAC,kBAAA,EAChCC,cADgC,EAEhC,IAAAC,uBAAA,EAAiB,MAAjB,CAFgC,CAAH,0HAIhB,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,mBAAf;AAAA,CAJgB,EAKnB,UAACF,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQE,oBAAf;AAAA,CALmB,EAM3BC,kBAN2B,CAA/B;AASA;AACA;AACA;AACA;;AACA,IAAMC,mBAAmB,gBAAG,IAAAC,iBAAA,EAG1B,UAACC,KAAD,EAAQC,GAAR;EAAA,oBACA,gCAAC,yBAAD;IAA2B,KAAK,EAAC;EAAjC,GAA4CD,KAA5C;IAAmD,GAAG,EAAEC;EAAxD,GADA;AAAA,CAH0B,CAA5B;AAOAH,mBAAmB,CAACI,WAApB,GAAkC,qBAAlC;eAEeJ,mB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"emotion.d.js","names":[],"sources":["../../src/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"mappings":";;AAAA"}
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export { default as ImageUpload } from './ImageUpload';\nexport { default as ImageUploadSkeleton } from './ImageUploadSkeleton';\n\nexport * from './ImageUpload';\nexport * from './ImageUploadSkeleton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAGA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAFA;;AAGA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
3
|
import React, { forwardRef, useCallback, useMemo } from 'react';
|
|
4
4
|
import { useDropzone } from 'react-dropzone';
|
|
@@ -126,7 +126,9 @@ const Container = styled('div', omitEmotionProps('isDragActive', 'hasImage', 'si
|
|
|
126
126
|
|
|
127
127
|
const ImageUpload = /*#__PURE__*/forwardRef(({
|
|
128
128
|
url,
|
|
129
|
-
accept =
|
|
129
|
+
accept = {
|
|
130
|
+
'image/*': ['.jpeg', '.png', '.webp']
|
|
131
|
+
},
|
|
130
132
|
locale = defaultLocale,
|
|
131
133
|
value,
|
|
132
134
|
defaultValue,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/ImageUpload/index.tsx"],"names":["React","forwardRef","useCallback","useMemo","useDropzone","styled","css","Button","Image","Delete","Picture","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","isTouchDevice","useForwardedState","clr","ThemeOverrider","defaultLocale","overlayHasImageStyles","p","hasImage","theme","imageUploadOverlayOpacity","overlayHasImageHoverStyles","isDragActive","Overlay","imageUploadOverlayPadding","contentIsDragActiveStyles","Content","PictureIcon","Title","div","DeleteButtonContainer","hoverStyles","imageUploadNoImageHoverColorBorder","notHasImageStyles","imageUploadNoImageColorBg","imageUploadNoImageColorBorder","focusStyles","isDragActiveStyles","LocalImage","img","RemoteImage","Container","imageUploadMaxWidth","imageUploadMinHeight","borderRadius","colorText","ImageUpload","url","accept","locale","value","defaultValue","onChange","size","rest","ref","touchDevice","forwardedValue","setForwardedValue","getRootProps","getInputProps","multiple","onDrop","file","source","URL","createObjectURL","renderImage","e","preventDefault","onKeyDown","key","touchTitle","dropTitle","buttonGhostColorText","buttonGhostColorBgHover","stopPropagation","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Button, Image } from '@os-design/core';\nimport { Delete, Picture } from '@os-design/icons';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport {\n omitEmotionProps,\n isTouchDevice,\n useForwardedState,\n} from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface ImageUploadProps extends JsxDivProps, WithSize {\n /**\n * The url of the image.\n * @default undefined\n */\n url?: string;\n /**\n * Allowed image formats.\n * @default undefined\n */\n accept?: string | string[];\n /**\n * The locale of the component.\n * @default undefined\n */\n locale?: ImageUploadLocale;\n /**\n * The selected local file, or null if the image is marked as deleted.\n * @default undefined\n */\n value?: File | null;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: File | null;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: File | null) => void;\n}\n\nconst overlayHasImageStyles = (p) =>\n p.hasImage &&\n css`\n background-color: hsla(0, 0%, 0%, ${p.theme.imageUploadOverlayOpacity});\n color: hsl(0, 0%, 100%);\n `;\n\nconst overlayHasImageHoverStyles = (p) =>\n p.hasImage &&\n !p.isDragActive &&\n css`\n @media (hover: hover) {\n opacity: 0;\n\n &:hover {\n opacity: 1;\n }\n }\n `;\n\ninterface OverlayProps {\n isDragActive: boolean;\n hasImage: boolean;\n}\nexport const Overlay = styled(\n 'div',\n omitEmotionProps('isDragActive', 'hasImage')\n)<OverlayProps>`\n ${resetFocusStyles};\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n text-align: center;\n padding: ${(p) => p.theme.imageUploadOverlayPadding}em;\n\n ${overlayHasImageStyles};\n ${overlayHasImageHoverStyles}\n ${transitionStyles('opacity')};\n`;\n\nconst contentIsDragActiveStyles = (p) =>\n p.isDragActive &&\n css`\n transform: scale(0.92);\n `;\n\ntype ContentProps = Pick<OverlayProps, 'isDragActive'>;\nconst Content = styled('div', omitEmotionProps('isDragActive'))<ContentProps>`\n ${contentIsDragActiveStyles};\n ${transitionStyles('transform')};\n`;\n\nconst PictureIcon = styled(Picture)`\n opacity: 0.8;\n font-size: 2.5em;\n`;\n\nconst Title = styled.div`\n opacity: 0.8;\n`;\n\nconst DeleteButtonContainer = styled.div`\n position: absolute;\n top: 0.5em;\n right: 0.5em;\n`;\n\nconst hoverStyles = (p) => css`\n border-color: ${clr(p.theme.imageUploadNoImageHoverColorBorder)};\n`;\n\nconst notHasImageStyles = (p) =>\n !p.hasImage &&\n css`\n background-color: ${clr(p.theme.imageUploadNoImageColorBg)};\n border: 2px dashed ${clr(p.theme.imageUploadNoImageColorBorder)};\n\n @media (hover: hover) {\n &:hover {\n ${hoverStyles(p)};\n }\n }\n `;\n\nconst focusStyles = (p) => css`\n &:focus-within {\n & > div {\n opacity: 1;\n }\n ${hoverStyles(p)};\n }\n`;\n\nconst isDragActiveStyles = (p) =>\n p.isDragActive &&\n css`\n ${hoverStyles(p)};\n `;\n\nconst LocalImage = styled.img`\n width: 100%;\n vertical-align: top;\n`;\n\nconst RemoteImage = styled(Image)`\n vertical-align: top;\n`;\n\ninterface ContainerProps extends WithSize {\n isDragActive: boolean;\n hasImage: boolean;\n}\n\nconst Container = styled(\n 'div',\n omitEmotionProps('isDragActive', 'hasImage', 'size')\n)<ContainerProps>`\n position: relative;\n cursor: pointer;\n overflow: hidden;\n box-sizing: border-box;\n\n max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n min-height: ${(p) => p.theme.imageUploadMinHeight}em;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${notHasImageStyles};\n ${focusStyles};\n ${isDragActiveStyles};\n ${sizeStyles};\n ${transitionStyles('border')};\n`;\n\n/**\n * The component to upload an image.\n */\nconst ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(\n (\n {\n url,\n accept = ['image/jpeg', 'image/png', 'image/webp'],\n locale = defaultLocale,\n value,\n defaultValue,\n onChange,\n size,\n ...rest\n },\n ref\n ) => {\n const touchDevice = useMemo(() => isTouchDevice(), []);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n accept,\n multiple: false,\n onDrop: ([file]) => setForwardedValue(file),\n });\n\n const source = useMemo(() => {\n if (forwardedValue === null) return null; // If the user select an image\n if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists\n if (url) return url;\n return null;\n }, [forwardedValue, url]);\n\n const hasImage = useMemo(() => !!source, [source]);\n\n const renderImage = useCallback(() => {\n if (!source) return null;\n if (typeof forwardedValue === 'object' && forwardedValue !== null) {\n return <LocalImage src={source} />;\n }\n return <RemoteImage url={source} />;\n }, [forwardedValue, source]);\n\n return (\n <Container\n isDragActive={isDragActive}\n hasImage={hasImage}\n size={size}\n onMouseDown={(e) => e.preventDefault()}\n {...rest}\n ref={ref}\n >\n <input {...getInputProps()} />\n {renderImage()}\n\n <Overlay\n isDragActive={isDragActive}\n hasImage={hasImage}\n {\n ...getRootProps({\n onKeyDown: (e) => {\n if (e.key === 'Backspace') setForwardedValue(null);\n },\n } as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n }\n >\n <Content isDragActive={isDragActive}>\n <PictureIcon />\n <Title>{touchDevice ? locale.touchTitle : locale.dropTitle}</Title>\n </Content>\n\n {hasImage && (\n <ThemeOverrider\n overrides={{\n buttonGhostColorText: [0, 0, 100],\n buttonGhostColorBgHover: [0, 0, 100, 0.1],\n }}\n >\n <DeleteButtonContainer>\n <Button\n type='ghost'\n wide='never'\n onClick={(e) => {\n setForwardedValue(null);\n e.stopPropagation();\n }}\n >\n <Delete />\n </Button>\n </DeleteButtonContainer>\n </ThemeOverrider>\n )}\n </Overlay>\n </Container>\n );\n }\n);\n\nImageUpload.displayName = 'ImageUpload';\n\nexport default ImageUpload;\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","useDropzone","styled","css","Button","Image","Delete","Picture","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","isTouchDevice","useForwardedState","clr","ThemeOverrider","defaultLocale","overlayHasImageStyles","p","hasImage","theme","imageUploadOverlayOpacity","overlayHasImageHoverStyles","isDragActive","Overlay","imageUploadOverlayPadding","contentIsDragActiveStyles","Content","PictureIcon","Title","div","DeleteButtonContainer","hoverStyles","imageUploadNoImageHoverColorBorder","notHasImageStyles","imageUploadNoImageColorBg","imageUploadNoImageColorBorder","focusStyles","isDragActiveStyles","LocalImage","img","RemoteImage","Container","imageUploadMaxWidth","imageUploadMinHeight","borderRadius","colorText","ImageUpload","url","accept","locale","value","defaultValue","onChange","size","rest","ref","touchDevice","forwardedValue","setForwardedValue","getRootProps","getInputProps","multiple","onDrop","file","source","URL","createObjectURL","renderImage","e","preventDefault","onKeyDown","key","touchTitle","dropTitle","buttonGhostColorText","buttonGhostColorBgHover","stopPropagation","displayName"],"sources":["../../../src/ImageUpload/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useDropzone, Accept } from 'react-dropzone';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\nimport { Button, Image } from '@os-design/core';\nimport { Delete, Picture } from '@os-design/icons';\nimport {\n resetFocusStyles,\n sizeStyles,\n transitionStyles,\n WithSize,\n} from '@os-design/styles';\nimport {\n omitEmotionProps,\n isTouchDevice,\n useForwardedState,\n} from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface ImageUploadProps extends JsxDivProps, WithSize {\n /**\n * The url of the image.\n * @default undefined\n */\n url?: string;\n /**\n * Allowed image formats.\n * @default undefined\n */\n accept?: Accept;\n /**\n * The locale of the component.\n * @default undefined\n */\n locale?: ImageUploadLocale;\n /**\n * The selected local file, or null if the image is marked as deleted.\n * @default undefined\n */\n value?: File | null;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: File | null;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: File | null) => void;\n}\n\nconst overlayHasImageStyles = (p) =>\n p.hasImage &&\n css`\n background-color: hsla(0, 0%, 0%, ${p.theme.imageUploadOverlayOpacity});\n color: hsl(0, 0%, 100%);\n `;\n\nconst overlayHasImageHoverStyles = (p) =>\n p.hasImage &&\n !p.isDragActive &&\n css`\n @media (hover: hover) {\n opacity: 0;\n\n &:hover {\n opacity: 1;\n }\n }\n `;\n\ninterface OverlayProps {\n isDragActive: boolean;\n hasImage: boolean;\n}\nexport const Overlay = styled(\n 'div',\n omitEmotionProps('isDragActive', 'hasImage')\n)<OverlayProps>`\n ${resetFocusStyles};\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n\n text-align: center;\n padding: ${(p) => p.theme.imageUploadOverlayPadding}em;\n\n ${overlayHasImageStyles};\n ${overlayHasImageHoverStyles}\n ${transitionStyles('opacity')};\n`;\n\nconst contentIsDragActiveStyles = (p) =>\n p.isDragActive &&\n css`\n transform: scale(0.92);\n `;\n\ntype ContentProps = Pick<OverlayProps, 'isDragActive'>;\nconst Content = styled('div', omitEmotionProps('isDragActive'))<ContentProps>`\n ${contentIsDragActiveStyles};\n ${transitionStyles('transform')};\n`;\n\nconst PictureIcon = styled(Picture)`\n opacity: 0.8;\n font-size: 2.5em;\n`;\n\nconst Title = styled.div`\n opacity: 0.8;\n`;\n\nconst DeleteButtonContainer = styled.div`\n position: absolute;\n top: 0.5em;\n right: 0.5em;\n`;\n\nconst hoverStyles = (p) => css`\n border-color: ${clr(p.theme.imageUploadNoImageHoverColorBorder)};\n`;\n\nconst notHasImageStyles = (p) =>\n !p.hasImage &&\n css`\n background-color: ${clr(p.theme.imageUploadNoImageColorBg)};\n border: 2px dashed ${clr(p.theme.imageUploadNoImageColorBorder)};\n\n @media (hover: hover) {\n &:hover {\n ${hoverStyles(p)};\n }\n }\n `;\n\nconst focusStyles = (p) => css`\n &:focus-within {\n & > div {\n opacity: 1;\n }\n ${hoverStyles(p)};\n }\n`;\n\nconst isDragActiveStyles = (p) =>\n p.isDragActive &&\n css`\n ${hoverStyles(p)};\n `;\n\nconst LocalImage = styled.img`\n width: 100%;\n vertical-align: top;\n`;\n\nconst RemoteImage = styled(Image)`\n vertical-align: top;\n`;\n\ninterface ContainerProps extends WithSize {\n isDragActive: boolean;\n hasImage: boolean;\n}\n\nconst Container = styled(\n 'div',\n omitEmotionProps('isDragActive', 'hasImage', 'size')\n)<ContainerProps>`\n position: relative;\n cursor: pointer;\n overflow: hidden;\n box-sizing: border-box;\n\n max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n min-height: ${(p) => p.theme.imageUploadMinHeight}em;\n border-radius: ${(p) => p.theme.borderRadius}em;\n color: ${(p) => clr(p.theme.colorText)};\n\n ${notHasImageStyles};\n ${focusStyles};\n ${isDragActiveStyles};\n ${sizeStyles};\n ${transitionStyles('border')};\n`;\n\n/**\n * The component to upload an image.\n */\nconst ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(\n (\n {\n url,\n accept = { 'image/*': ['.jpeg', '.png', '.webp'] },\n locale = defaultLocale,\n value,\n defaultValue,\n onChange,\n size,\n ...rest\n },\n ref\n ) => {\n const touchDevice = useMemo(() => isTouchDevice(), []);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n accept,\n multiple: false,\n onDrop: ([file]) => setForwardedValue(file),\n });\n\n const source = useMemo(() => {\n if (forwardedValue === null) return null; // If the user select an image\n if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists\n if (url) return url;\n return null;\n }, [forwardedValue, url]);\n\n const hasImage = useMemo(() => !!source, [source]);\n\n const renderImage = useCallback(() => {\n if (!source) return null;\n if (typeof forwardedValue === 'object' && forwardedValue !== null) {\n return <LocalImage src={source} />;\n }\n return <RemoteImage url={source} />;\n }, [forwardedValue, source]);\n\n return (\n <Container\n isDragActive={isDragActive}\n hasImage={hasImage}\n size={size}\n onMouseDown={(e) => e.preventDefault()}\n {...rest}\n ref={ref}\n >\n <input {...getInputProps()} />\n {renderImage()}\n\n <Overlay\n isDragActive={isDragActive}\n hasImage={hasImage}\n {\n ...getRootProps({\n onKeyDown: (e) => {\n if (e.key === 'Backspace') setForwardedValue(null);\n },\n } as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n }\n >\n <Content isDragActive={isDragActive}>\n <PictureIcon />\n <Title>{touchDevice ? locale.touchTitle : locale.dropTitle}</Title>\n </Content>\n\n {hasImage && (\n <ThemeOverrider\n overrides={{\n buttonGhostColorText: [0, 0, 100],\n buttonGhostColorBgHover: [0, 0, 100, 0.1],\n }}\n >\n <DeleteButtonContainer>\n <Button\n type='ghost'\n wide='never'\n onClick={(e) => {\n setForwardedValue(null);\n e.stopPropagation();\n }}\n >\n <Delete />\n </Button>\n </DeleteButtonContainer>\n </ThemeOverrider>\n )}\n </Overlay>\n </Container>\n );\n }\n);\n\nImageUpload.displayName = 'ImageUpload';\n\nexport default ImageUpload;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"defaultLocale.js","names":["defaultLocale","touchTitle","dropTitle"],"sources":["../../../../src/ImageUpload/utils/defaultLocale.ts"],"sourcesContent":["export interface ImageUploadLocale {\n touchTitle: string;\n dropTitle: string;\n}\n\nconst defaultLocale: ImageUploadLocale = {\n touchTitle: 'Click here to choose an image',\n dropTitle: 'Drop an image here or click to choose it',\n};\n\nexport default defaultLocale;\n"],"mappings":"AAKA,MAAMA,aAAgC,GAAG;EACvCC,UAAU,EAAE,+BAD2B;EAEvCC,SAAS,EAAE;AAF4B,CAAzC;AAKA,eAAeF,aAAf"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
3
|
import styled from '@emotion/styled';
|
|
4
4
|
import React, { forwardRef } from 'react';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","StyledImageUploadSkeleton","p","theme","imageUploadMaxWidth","imageUploadMinHeight","ImageUploadSkeleton","props","ref","displayName"],"sources":["../../../src/ImageUploadSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { Skeleton, SkeletonProps } from '@os-design/core';\n\nexport type ImageUploadSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;\n\nconst StyledImageUploadSkeleton = styled(\n Skeleton,\n omitEmotionProps('size')\n)<WithSize>`\n max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n height: ${(p) => p.theme.imageUploadMinHeight}em;\n ${sizeStyles};\n`;\n\n/**\n * Provides an image upload placeholder while a user waits for\n * the content to load.\n */\nconst ImageUploadSkeleton = forwardRef<\n HTMLDivElement,\n ImageUploadSkeletonProps\n>((props, ref) => (\n <StyledImageUploadSkeleton width='100%' {...props} ref={ref} />\n));\n\nImageUploadSkeleton.displayName = 'ImageUploadSkeleton';\n\nexport default ImageUploadSkeleton;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,QAAT,QAAwC,iBAAxC;AAIA,MAAMC,yBAAyB,GAAGN,MAAM,CACtCK,QADsC,EAEtCD,gBAAgB,CAAC,MAAD,CAFsB,CAG5B;AACZ,eAAgBG,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,mBAAoB;AAClD,YAAaF,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQE,oBAAqB;AAChD,IAAIP,UAAW;AACf,CAPA;AASA;AACA;AACA;AACA;;AACA,MAAMQ,mBAAmB,gBAAGT,UAAU,CAGpC,CAACU,KAAD,EAAQC,GAAR,kBACA,oBAAC,yBAAD;EAA2B,KAAK,EAAC;AAAjC,GAA4CD,KAA5C;EAAmD,GAAG,EAAEC;AAAxD,GAJoC,CAAtC;AAOAF,mBAAmB,CAACG,WAApB,GAAkC,qBAAlC;AAEA,eAAeH,mBAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"emotion.d.js","names":[],"sources":["../../src/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"mappings":"AAAA,OAAO,gBAAP"}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"file":"index.js","names":["default","ImageUpload","ImageUploadSkeleton"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as ImageUpload } from './ImageUpload';\nexport { default as ImageUploadSkeleton } from './ImageUploadSkeleton';\n\nexport * from './ImageUpload';\nexport * from './ImageUploadSkeleton';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,SAASD,OAAO,IAAIE,mBAApB,QAA+C,uBAA/C;AAEA,cAAc,eAAd;AACA,cAAc,uBAAd"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { Accept } from 'react-dropzone';
|
|
2
3
|
import { WithSize } from '@os-design/styles';
|
|
3
4
|
import { ImageUploadLocale } from './utils/defaultLocale';
|
|
4
5
|
declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'defaultValue' | 'onChange' | 'ref'>;
|
|
5
6
|
export interface ImageUploadProps extends JsxDivProps, WithSize {
|
|
6
7
|
url?: string;
|
|
7
|
-
accept?:
|
|
8
|
+
accept?: Accept;
|
|
8
9
|
locale?: ImageUploadLocale;
|
|
9
10
|
value?: File | null;
|
|
10
11
|
defaultValue?: File | null;
|
|
@@ -16,7 +17,7 @@ interface OverlayProps {
|
|
|
16
17
|
}
|
|
17
18
|
export declare const Overlay: import("@emotion/styled").StyledComponent<{
|
|
18
19
|
theme?: import("@emotion/react").Theme | undefined;
|
|
19
|
-
as?:
|
|
20
|
+
as?: React.ElementType<any> | undefined;
|
|
20
21
|
} & OverlayProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
21
22
|
declare const ImageUpload: React.ForwardRefExoticComponent<ImageUploadProps & React.RefAttributes<HTMLDivElement>>;
|
|
22
23
|
export default ImageUpload;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ImageUpload/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ImageUpload/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAAe,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAKrD,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAO3B,OAAsB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEzE,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,cAAc,GAAG,UAAU,GAAG,KAAK,CACpC,CAAC;AACF,MAAM,WAAW,gBAAiB,SAAQ,WAAW,EAAE,QAAQ;IAK7D,GAAG,CAAC,EAAE,MAAM,CAAC;IAKb,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAK3B,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAKpB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAK3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACzC;AAsBD,UAAU,YAAY;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,OAAO;;;oGAsBnB,CAAC;AAmGF,QAAA,MAAM,WAAW,yFAiGhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
|
|
@@ -2,6 +2,6 @@ import React from 'react';
|
|
|
2
2
|
import { WithSize } from '@os-design/styles';
|
|
3
3
|
import { SkeletonProps } from '@os-design/core';
|
|
4
4
|
export declare type ImageUploadSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;
|
|
5
|
-
declare const ImageUploadSkeleton: React.ForwardRefExoticComponent<
|
|
5
|
+
declare const ImageUploadSkeleton: React.ForwardRefExoticComponent<Omit<SkeletonProps, "width"> & WithSize & React.RefAttributes<HTMLDivElement>>;
|
|
6
6
|
export default ImageUploadSkeleton;
|
|
7
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ImageUploadSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAY,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE1D,oBAAY,wBAAwB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC;AAe/E,QAAA,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ImageUploadSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAc,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEzD,OAAO,EAAY,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE1D,oBAAY,wBAAwB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC;AAe/E,QAAA,MAAM,mBAAmB,gHAKvB,CAAC;AAIH,eAAe,mBAAmB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/upload",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.141",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -28,12 +28,12 @@
|
|
|
28
28
|
"access": "public"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@os-design/core": "^1.0.
|
|
31
|
+
"@os-design/core": "^1.0.138",
|
|
32
32
|
"@os-design/icons": "^1.0.34",
|
|
33
33
|
"@os-design/styles": "^1.0.32",
|
|
34
34
|
"@os-design/theming": "^1.0.30",
|
|
35
|
-
"@os-design/utils": "^1.0.
|
|
36
|
-
"react-dropzone": "^
|
|
35
|
+
"@os-design/utils": "^1.0.47",
|
|
36
|
+
"react-dropzone": "^14.2.2"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"@emotion/react": ">=11",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"react": ">=18",
|
|
46
46
|
"react-dom": ">=18"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "f8ca9a29bb4131d35eff737da2c6b3bcb594c3b3"
|
|
49
49
|
}
|