{"version":3,"file":"AvatarUploader.mjs","names":["emojiPickerMessages","Flexbox"],"sources":["../../src/EmojiPicker/AvatarUploader.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar } from 'antd-style';\nimport { ChevronLeftIcon, ImageUpIcon } from 'lucide-react';\nimport { memo, useCallback, useRef, useState } from 'react';\nimport AvatarEditor from 'react-avatar-editor';\n\nimport Button from '@/base-ui/Button';\nimport Tag from '@/base-ui/Tag';\nimport { toast, ToastHost } from '@/base-ui/Toast';\nimport { UploadDragger } from '@/base-ui/Upload';\nimport { Center, Flexbox } from '@/Flex';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Text from '@/Text';\n\nimport { type AvatarUploaderProps } from './type';\n\nconst ACCEPTED_IMAGE_TYPES = new Set(['image/jpeg', 'image/png', 'image/gif', 'image/webp']);\n\nconst readAsDataURL = (file: File, onLoad: (dataUrl: string) => void) => {\n  const reader = new FileReader();\n  reader.readAsDataURL(file);\n  reader.addEventListener('load', () => {\n    onLoad(String(reader.result));\n  });\n};\n\nconst AvatarUploader = memo<AvatarUploaderProps>(\n  ({ shape, onChange, texts, compressSize = 256, onUpload }) => {\n    const editor = useRef<any>(null);\n    const [previewImage, setPreviewImage] = useState('');\n    const { t } = useTranslation(emojiPickerMessages);\n\n    const fileTypeErrorText = texts?.fileTypeError ?? t('emojiPicker.fileTypeError');\n    const draggerDescText = texts?.draggerDesc ?? t('emojiPicker.draggerDesc');\n    const uploadBtnText = texts?.uploadBtn ?? t('emojiPicker.uploadBtn');\n\n    const handleFiles = useCallback(\n      ([file]: File[]) => {\n        if (!ACCEPTED_IMAGE_TYPES.has(file.type)) {\n          toast.error(fileTypeErrorText);\n          return;\n        }\n        readAsDataURL(file, setPreviewImage);\n      },\n      [fileTypeErrorText],\n    );\n\n    const handleUpload = () => {\n      if (!editor.current) return;\n      const canvasScaled = editor.current.getImageScaledToCanvas() as HTMLCanvasElement;\n      const dataUrl = canvasScaled.toDataURL();\n      onChange(dataUrl);\n\n      if (!onUpload) return;\n\n      // 使用 toBlob 直接获取 Blob，然后创建 File 对象\n      canvasScaled.toBlob(\n        (blob) => {\n          if (blob) {\n            const file = new File([blob], 'avatar.webp', { type: 'image/webp' });\n            onUpload(file);\n          }\n        },\n        'image/webp',\n        0.95,\n      ); // 0.95 是图片质量\n    };\n\n    return (\n      <Flexbox padding={10} style={{ position: 'relative' }} width={'100%'}>\n        {!previewImage && (\n          <UploadDragger maxCount={1} onFiles={handleFiles}>\n            <Center gap={16} height={compressSize} width={compressSize}>\n              <Icon color={cssVar.colorTextDescription} icon={ImageUpIcon} size={48} />\n              <Text color={cssVar.colorTextSecondary}>{draggerDescText}</Text>\n              <Center horizontal gap={4}>\n                <Tag>JPG</Tag>\n                <Tag>PNG</Tag>\n                <Tag>GIF</Tag>\n                <Tag>WEBP</Tag>\n              </Center>\n            </Center>\n          </UploadDragger>\n        )}\n        {previewImage && (\n          <Center gap={8} style={{ position: 'relative' }} width={'100%'}>\n            <AvatarEditor\n              border={0}\n              borderRadius={shape === 'square' ? undefined : compressSize / 2}\n              height={compressSize}\n              image={previewImage}\n              ref={editor}\n              width={compressSize}\n            />\n\n            <Flexbox horizontal gap={8} style={{ position: 'relative' }} width={'100%'}>\n              <Button\n                icon={ChevronLeftIcon}\n                style={{ flex: 'none' }}\n                onClick={() => setPreviewImage('')}\n              />\n              <Button style={{ flex: 1, fontWeight: 500 }} type={'primary'} onClick={handleUpload}>\n                {uploadBtnText}\n              </Button>\n            </Flexbox>\n          </Center>\n        )}\n        <ToastHost />\n      </Flexbox>\n    );\n  },\n);\n\nAvatarUploader.displayName = 'AvatarUploader';\n\nexport default AvatarUploader;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,MAAM,uCAAuB,IAAI,IAAI;CAAC;CAAc;CAAa;CAAa;AAAY,CAAC;AAE3F,MAAM,iBAAiB,MAAY,WAAsC;CACvE,MAAM,SAAS,IAAI,WAAW;CAC9B,OAAO,cAAc,IAAI;CACzB,OAAO,iBAAiB,cAAc;EACpC,OAAO,OAAO,OAAO,MAAM,CAAC;CAC9B,CAAC;AACH;AAEA,MAAM,iBAAiB,MACpB,EAAE,OAAO,UAAU,OAAO,eAAe,KAAK,eAAe;CAC5D,MAAM,SAAS,OAAY,IAAI;CAC/B,MAAM,CAAC,cAAc,mBAAmB,SAAS,EAAE;CACnD,MAAM,EAAE,MAAM,eAAeA,mBAAmB;CAEhD,MAAM,oBAAoB,OAAO,iBAAiB,EAAE,2BAA2B;CAC/E,MAAM,kBAAkB,OAAO,eAAe,EAAE,yBAAyB;CACzE,MAAM,gBAAgB,OAAO,aAAa,EAAE,uBAAuB;CAEnE,MAAM,cAAc,aACjB,CAAC,UAAkB;EAClB,IAAI,CAAC,qBAAqB,IAAI,KAAK,IAAI,GAAG;GACxC,MAAM,MAAM,iBAAiB;GAC7B;EACF;EACA,cAAc,MAAM,eAAe;CACrC,GACA,CAAC,iBAAiB,CACpB;CAEA,MAAM,qBAAqB;EACzB,IAAI,CAAC,OAAO,SAAS;EACrB,MAAM,eAAe,OAAO,QAAQ,uBAAuB;EAE3D,SADgB,aAAa,UACd,CAAC;EAEhB,IAAI,CAAC,UAAU;EAGf,aAAa,QACV,SAAS;GACR,IAAI,MAEF,SAAS,IADQ,KAAK,CAAC,IAAI,GAAG,eAAe,EAAE,MAAM,aAAa,CACtD,CAAC;EAEjB,GACA,cACA,GACF;CACF;CAEA,OACE,qBAACC,mBAAD;EAAS,SAAS;EAAI,OAAO,EAAE,UAAU,WAAW;EAAG,OAAO;EAA9D,UAAA;GACG,CAAC,gBACA,oBAAC,eAAD;IAAe,UAAU;IAAG,SAAS;IACnC,UAAA,qBAAC,QAAD;KAAQ,KAAK;KAAI,QAAQ;KAAc,OAAO;KAA9C,UAAA;MACE,oBAAC,MAAD;OAAM,OAAO,OAAO;OAAsB,MAAM;OAAa,MAAM;MAAK,CAAA;MACxE,oBAAC,MAAD;OAAM,OAAO,OAAO;OAAqB,UAAA;MAAsB,CAAA;MAC/D,qBAAC,QAAD;OAAQ,YAAA;OAAW,KAAK;OAAxB,UAAA;QACE,oBAAC,KAAD,EAAA,UAAK,MAAQ,CAAA;QACb,oBAAC,KAAD,EAAA,UAAK,MAAQ,CAAA;QACb,oBAAC,KAAD,EAAA,UAAK,MAAQ,CAAA;QACb,oBAAC,KAAD,EAAA,UAAK,OAAS,CAAA;OACR;;KACF;;GACK,CAAA;GAEhB,gBACC,qBAAC,QAAD;IAAQ,KAAK;IAAG,OAAO,EAAE,UAAU,WAAW;IAAG,OAAO;IAAxD,UAAA,CACE,oBAAC,cAAD;KACE,QAAQ;KACR,cAAc,UAAU,WAAW,KAAA,IAAY,eAAe;KAC9D,QAAQ;KACR,OAAO;KACP,KAAK;KACL,OAAO;IACR,CAAA,GAED,qBAACA,mBAAD;KAAS,YAAA;KAAW,KAAK;KAAG,OAAO,EAAE,UAAU,WAAW;KAAG,OAAO;KAApE,UAAA,CACE,oBAAC,QAAD;MACE,MAAM;MACN,OAAO,EAAE,MAAM,OAAO;MACtB,eAAe,gBAAgB,EAAE;KAClC,CAAA,GACD,oBAAC,QAAD;MAAQ,OAAO;OAAE,MAAM;OAAG,YAAY;MAAI;MAAG,MAAM;MAAW,SAAS;MACpE,UAAA;KACK,CAAA,CACD;IACH,CAAA,CAAA;;GAEV,oBAAC,WAAD,CAAY,CAAA;EACL;;AAEb,CACF;AAEA,eAAe,cAAc"}