brd-ui-kit 0.1.78 → 0.1.79
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/brd-ui-kit.css +1 -1
- package/dist/components/card-info/card-info.d.ts +13 -0
- package/dist/components/card-info/card-info.styles.d.ts +10 -0
- package/dist/components/card-info/index.d.ts +1 -0
- package/dist/components/card-info.d.ts +2 -0
- package/dist/components-avatar-uploader-avatar-uploader.cjs +1 -1
- package/dist/components-avatar-uploader-avatar-uploader.cjs.map +1 -1
- package/dist/components-avatar-uploader-avatar-uploader.js +3 -2
- package/dist/components-avatar-uploader-avatar-uploader.js.map +1 -1
- package/dist/components-basic-avatar-basic-avatar.cjs +1 -1
- package/dist/components-basic-avatar-basic-avatar.cjs.map +1 -1
- package/dist/components-basic-avatar-basic-avatar.js +3 -2
- package/dist/components-basic-avatar-basic-avatar.js.map +1 -1
- package/dist/components-card-info-card-info.cjs +2 -0
- package/dist/components-card-info-card-info.cjs.map +1 -0
- package/dist/components-card-info-card-info.js +43 -0
- package/dist/components-card-info-card-info.js.map +1 -0
- package/dist/components-card-info-card-info.styles.cjs +3 -0
- package/dist/components-card-info-card-info.styles.cjs.map +1 -0
- package/dist/components-card-info-card-info.styles.js +52 -0
- package/dist/components-card-info-card-info.styles.js.map +1 -0
- package/dist/components-card-info.cjs +2 -0
- package/dist/components-card-info.cjs.map +1 -0
- package/dist/components-card-info.js +5 -0
- package/dist/components-card-info.js.map +1 -0
- package/dist/components-checkbox-group-checkbox-group.cjs +1 -1
- package/dist/components-checkbox-group-checkbox-group.cjs.map +1 -1
- package/dist/components-checkbox-group-checkbox-group.js +3 -2
- package/dist/components-checkbox-group-checkbox-group.js.map +1 -1
- package/dist/components-files-uploader-files-uploader.cjs +6 -6
- package/dist/components-files-uploader-files-uploader.cjs.map +1 -1
- package/dist/components-files-uploader-files-uploader.js +73 -67
- package/dist/components-files-uploader-files-uploader.js.map +1 -1
- package/dist/components-input-contact-input-contact.cjs +1 -1
- package/dist/components-input-contact-input-contact.cjs.map +1 -1
- package/dist/components-input-contact-input-contact.js +3 -2
- package/dist/components-input-contact-input-contact.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +124 -122
- package/dist/index.js.map +1 -1
- package/package.json +10 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components-files-uploader-files-uploader.cjs","sources":["../src/components/files-uploader/files-uploader.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\";\nimport { useState } from \"react\";\nimport { type FileRejection, useDropzone } from \"react-dropzone\";\nimport { Plus } from \"@/components/icons/Plus\";\nimport { SpinnerGap } from \"@/components/icons/SpinnerGap\";\nimport { StrokeIcon, type StrokeIconComponent } from \"@/components/icons/stroke-icon\";\nimport { X } from \"@/components/icons/X\";\nimport { Typography } from \"../ui/typography\";\n\ntype Variant = \"grid\" | \"list\" | \"compact\";\ntype AcceptType = \"image\" | \"pdf\" | \"doc\" | \"excel\" | \"text\" | \"all\";\n\nexport type UploadedFileData = {\n url: string;\n name: string;\n size: string;\n addedAt: string;\n status: \"uploaded\" | \"error\";\n error?: string;\n};\n\nexport type FilesUploaderValue = UploadedFileData[] | [];\n\nexport type PropsFilesUploader = {\n value?: FilesUploaderValue;\n onChange?: (value: FilesUploaderValue) => void;\n multiple?: boolean;\n maxFiles?: number;\n disabled?: boolean;\n isErrorText?: boolean;\n className?: {\n container?: string;\n blockAdd?: string;\n title?: string;\n text?: string;\n icon?: string;\n };\n maxSize?: number;\n variant?: Variant;\n accepts?: AcceptType[];\n icon?: StrokeIconComponent;\n title?: string;\n text?: string;\n showFiles?: boolean;\n};\n\nconst FILE_SIZE_UNITS = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\"];\nconst FILE_SIZE_KB = 1024;\n\nconst DEFAULT_MAX_SIZE = 5 * FILE_SIZE_KB * FILE_SIZE_KB;\nconst DEFAULT_MAX_FILES = 5;\nconst DEFAULT_ACCEPT: AcceptType[] = [\"all\"];\nconst DEFAULT_TIMEOUT = 800;\n\nconst ACCEPT_MAP: Record<AcceptType, Record<string, string[]>> = {\n image: { \"image/*\": [\".jpg\", \".jpeg\", \".png\", \".webp\"] },\n pdf: { \"application/pdf\": [\".pdf\"] },\n doc: {\n \"application/msword\": [\".doc\"],\n \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\": [\".docx\"],\n },\n excel: {\n \"application/vnd.ms-excel\": [\".xls\"],\n \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": [\".xlsx\"],\n },\n text: { \"text/plain\": [\".txt\"] },\n all: {},\n};\n\nconst formatFileSize = (bytes: number) => {\n if (!bytes) return \"0 B\";\n const i = Math.floor(Math.log(bytes) / Math.log(FILE_SIZE_KB));\n return `${(bytes / Math.pow(FILE_SIZE_KB, i)).toFixed(2)} ${FILE_SIZE_UNITS[i]}`;\n};\n\nconst getFileIdentity = (file: Pick<UploadedFileData, \"name\" | \"size\">) =>\n `${file.name}:${file.size}`;\n\nconst fileAcceptMap = (accepts: AcceptType[]) =>\n accepts.reduce((acc, t) => ({ ...acc, ...ACCEPT_MAP[t] }), {});\n\nconst limitFilesForValue = (\n nextFiles: UploadedFileData[],\n maxFiles: number,\n): UploadedFileData[] => {\n const uploadedFiles = nextFiles.filter((file) => file.status === \"uploaded\");\n const errorFiles = nextFiles.filter((file) => file.status === \"error\");\n const availableErrorSlots = Math.max(0, maxFiles - uploadedFiles.length);\n\n return [...uploadedFiles, ...errorFiles.slice(0, availableErrorSlots)];\n};\n\nconst mapFile = (\n file: File,\n status: UploadedFileData[\"status\"],\n error?: string,\n): UploadedFileData => ({\n url: URL.createObjectURL(file),\n name: file.name,\n size: formatFileSize(file.size),\n addedAt: new Date().toISOString(),\n status,\n error,\n});\n\nconst getRejectedError = (code?: string) =>\n code === \"file-too-large\" ? \"Файл слишком большой\" : \"Неподдерживаемый формат\";\n\nconst replaceDuplicateErrors = (\n currentFiles: UploadedFileData[],\n newFiles: UploadedFileData[],\n rejectedFiles: UploadedFileData[],\n) => {\n const rejectedFileIds = new Set(rejectedFiles.map(getFileIdentity));\n const acceptedFileIds = new Set(newFiles.map(getFileIdentity));\n\n return currentFiles.filter((existingFile) => {\n if (existingFile.status !== \"error\") return true;\n const id = getFileIdentity(existingFile);\n return !rejectedFileIds.has(id) && !acceptedFileIds.has(id);\n });\n};\n\nconst getFileType = (file: UploadedFileData) => {\n const ext = file.name.split(\".\").pop()?.toLowerCase();\n\n if (!ext) return \"other\";\n if ([\"jpg\", \"jpeg\", \"png\", \"webp\"].includes(ext)) return \"image\";\n if (ext === \"pdf\") return \"pdf\";\n if ([\"doc\", \"docx\"].includes(ext)) return \"doc\";\n if ([\"xls\", \"xlsx\"].includes(ext)) return \"excel\";\n if (ext === \"txt\") return \"text\";\n\n return \"other\";\n};\n\nexport const FilesUploader = ({\n value = [],\n onChange,\n multiple = false,\n maxFiles = DEFAULT_MAX_FILES,\n disabled = false,\n className,\n maxSize = DEFAULT_MAX_SIZE,\n variant = \"grid\",\n accepts = DEFAULT_ACCEPT,\n icon,\n title,\n text,\n showFiles = true,\n isErrorText = false,\n}: PropsFilesUploader) => {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n const files = value;\n const uploadedCount = files.filter((file) => file.status === \"uploaded\").length;\n\n const onDrop = (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\n setError(null);\n const remainingUploadSlots = Math.max(0, maxFiles - uploadedCount);\n const acceptedFilesToUpload = acceptedFiles.slice(0, remainingUploadSlots);\n const overflowAcceptedFiles = acceptedFiles.slice(remainingUploadSlots);\n\n const rejectedMapped = [\n ...rejectedFiles.map((rejection) =>\n mapFile(rejection.file, \"error\", getRejectedError(rejection.errors[0]?.code)),\n ),\n ...overflowAcceptedFiles.map((file) =>\n mapFile(file, \"error\", `Максимальное количество файлов: ${maxFiles}`),\n ),\n ];\n\n if (rejectedMapped.length) {\n setError(rejectedMapped[0].error || \"Ошибка загрузки\");\n }\n\n if (!acceptedFilesToUpload.length && !rejectedMapped.length) return;\n\n setLoading(true);\n\n setTimeout(() => {\n const newFiles = acceptedFilesToUpload.map((file) => mapFile(file, \"uploaded\"));\n const nextBaseFiles = replaceDuplicateErrors(files, newFiles, rejectedMapped);\n const nextFiles = multiple\n ? limitFilesForValue([...nextBaseFiles, ...newFiles, ...rejectedMapped], maxFiles)\n : [...newFiles, ...rejectedMapped].slice(0, 1);\n\n onChange?.(nextFiles.length ? nextFiles : []);\n setLoading(false);\n }, DEFAULT_TIMEOUT);\n };\n\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n onDrop,\n accept: fileAcceptMap(accepts),\n maxSize,\n multiple: multiple && maxFiles > 1,\n disabled: disabled || loading,\n });\n\n const removeFile = (index: number) => () => {\n const updated = files.filter((_, i) => i !== index);\n onChange?.(updated.length ? updated : []);\n };\n\n const uploadedFiles = files\n .map((file, index) => ({ file, index }))\n .filter(({ file }) => file.status === \"uploaded\");\n\n const isMaxFilesReached = uploadedCount >= maxFiles;\n const uploadIcon = icon ?? Plus;\n\n const gridClasses = {\n grid: \"grid-cols-2 sm:grid-cols-3 md:grid-cols-4\",\n list: \"grid-cols-1\",\n compact: \"grid-cols-2 sm:grid-cols-3\",\n };\n\n return (\n <div className={cn(\"w-full space-y-4\", className?.container)}>\n <div\n className={cn(\n \"grid h-full w-full gap-4\",\n variant === \"list\" ? \"grid-cols-1\" : gridClasses[variant],\n )}\n >\n {showFiles &&\n uploadedFiles.map(({ file, index }) => {\n const type = getFileType(file);\n\n return (\n <div\n key={`${file.url}-${file.addedAt}-${index}`}\n className=\"group bg-primary-bg relative aspect-square h-full w-full\n overflow-hidden rounded-lg\"\n >\n {type === \"image\" ? (\n <img\n src={file.url}\n className=\"h-full w-full object-cover\"\n />\n ) : (\n <div\n className=\"flex h-full w-full items-center justify-center bg-gray-100\n text-sm font-semibold\"\n >\n {file.name.split(\".\").pop()?.toUpperCase()}\n </div>\n )}\n\n <div\n className=\"bg-primary-inverse-bg/50 text-primary-bg absolute inset-0\n flex items-center justify-center opacity-0 transition-opacity\n hover:opacity-100\"\n >\n <StrokeIcon\n onClick={removeFile(index)}\n icon={X}\n />\n </div>\n </div>\n );\n })}\n\n {!isMaxFilesReached && (\n <div\n {...getRootProps()}\n className={cn(\n `relative flex cursor-pointer flex-col items-center justify-center\n rounded-lg border-2 border-dashed border-gray-300 bg-gray-50\n transition-colors hover:bg-gray-100`,\n isDragActive && \"border-primary bg-primary/5\",\n (disabled || loading) && \"cursor-not-allowed opacity-50\",\n variant === \"list\" ? \"min-h-37.5\" : \"aspect-square\",\n className?.blockAdd,\n )}\n >\n <input {...getInputProps()} />\n\n {loading ? (\n <StrokeIcon\n icon={SpinnerGap}\n className=\"text-sub-label-text h-8 w-8 animate-spin\"\n />\n ) : (\n <div className=\"flex flex-col items-center space-y-2 p-4 text-center\">\n <StrokeIcon\n icon={uploadIcon}\n className={cn(\"text-sub-label-text h-8 w-8\", className?.icon)}\n />\n\n <Typography className={cn(\"text-sub-label-text\", className?.title)}>\n {multiple\n ? `${title || \"Добавить\"} (${uploadedCount}/${maxFiles})`\n : title || \"Добавить\"}\n </Typography>\n\n {text && (\n <Typography className={cn(\"text-sub-label-text\", className?.text)}>\n {text}\n </Typography>\n )}\n </div>\n )}\n </div>\n )}\n </div>\n\n {!isErrorText && error && (\n <div className=\"rounded-lg bg-red-50 p-3 text-sm text-red-600\">{error}</div>\n )}\n </div>\n );\n};\n"],"names":["FILE_SIZE_UNITS","FILE_SIZE_KB","DEFAULT_MAX_SIZE","DEFAULT_MAX_FILES","DEFAULT_ACCEPT","DEFAULT_TIMEOUT","ACCEPT_MAP","formatFileSize","bytes","i","getFileIdentity","file","fileAcceptMap","accepts","acc","t","limitFilesForValue","nextFiles","maxFiles","uploadedFiles","errorFiles","availableErrorSlots","mapFile","status","error","getRejectedError","code","replaceDuplicateErrors","currentFiles","newFiles","rejectedFiles","rejectedFileIds","acceptedFileIds","existingFile","id","getFileType","ext","FilesUploader","value","onChange","multiple","disabled","className","maxSize","variant","icon","title","text","showFiles","isErrorText","loading","setLoading","useState","setError","files","uploadedCount","onDrop","acceptedFiles","remainingUploadSlots","acceptedFilesToUpload","overflowAcceptedFiles","rejectedMapped","rejection","nextBaseFiles","getRootProps","getInputProps","isDragActive","useDropzone","removeFile","index","updated","_","isMaxFilesReached","uploadIcon","Plus","gridClasses","cn","jsxs","type","jsx","StrokeIcon","X","SpinnerGap","Typography"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"components-files-uploader-files-uploader.cjs","sources":["../src/components/files-uploader/files-uploader.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\";\nimport { useState } from \"react\";\nimport { type FileRejection, useDropzone } from \"react-dropzone\";\nimport { Plus } from \"@/components/icons/Plus\";\nimport { SpinnerGap } from \"@/components/icons/SpinnerGap\";\nimport { StrokeIcon, type StrokeIconComponent } from \"@/components/icons/stroke-icon\";\nimport { X } from \"@/components/icons/X\";\nimport { Typography } from \"../ui/typography\";\n\ntype Variant = \"grid\" | \"list\" | \"compact\";\ntype AcceptType = \"image\" | \"pdf\" | \"doc\" | \"excel\" | \"text\" | \"all\";\n\nexport type UploadedFileData = {\n url: string;\n name: string;\n size: string;\n addedAt: string;\n status: \"uploaded\" | \"error\";\n error?: string;\n};\n\nexport type FilesUploaderValue = UploadedFileData[] | [];\n\nexport type PropsFilesUploader = {\n value?: FilesUploaderValue;\n onChange?: (value: FilesUploaderValue) => void;\n multiple?: boolean;\n maxFiles?: number;\n disabled?: boolean;\n isErrorText?: boolean;\n className?: {\n container?: string;\n blockAdd?: string;\n title?: string;\n text?: string;\n icon?: string;\n };\n maxSize?: number;\n variant?: Variant;\n accepts?: AcceptType[];\n icon?: StrokeIconComponent;\n title?: string;\n text?: string;\n showFiles?: boolean;\n};\n\nconst FILE_SIZE_UNITS = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\"];\nconst FILE_SIZE_KB = 1024;\n\nconst DEFAULT_MAX_SIZE = 5 * FILE_SIZE_KB * FILE_SIZE_KB;\nconst DEFAULT_MAX_FILES = 5;\nconst DEFAULT_ACCEPT: AcceptType[] = [\"all\"];\nconst DEFAULT_TIMEOUT = 800;\n\nconst ACCEPT_MAP: Record<AcceptType, Record<string, string[]>> = {\n image: { \"image/*\": [\".jpg\", \".jpeg\", \".png\", \".webp\"] },\n pdf: { \"application/pdf\": [\".pdf\"] },\n doc: {\n \"application/msword\": [\".doc\"],\n \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\": [\".docx\"],\n },\n excel: {\n \"application/vnd.ms-excel\": [\".xls\"],\n \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": [\".xlsx\"],\n },\n text: { \"text/plain\": [\".txt\"] },\n all: {},\n};\n\nconst formatFileSize = (bytes: number) => {\n if (!bytes) return \"0 B\";\n const i = Math.floor(Math.log(bytes) / Math.log(FILE_SIZE_KB));\n return `${(bytes / Math.pow(FILE_SIZE_KB, i)).toFixed(2)} ${FILE_SIZE_UNITS[i]}`;\n};\n\nconst getFileIdentity = (file: Pick<UploadedFileData, \"name\" | \"size\">) =>\n `${file.name}:${file.size}`;\n\nconst fileAcceptMap = (accepts: AcceptType[]) =>\n accepts.reduce((acc, t) => ({ ...acc, ...ACCEPT_MAP[t] }), {});\n\nconst limitFilesForValue = (\n nextFiles: UploadedFileData[],\n maxFiles: number,\n): UploadedFileData[] => {\n const uploadedFiles = nextFiles.filter((file) => file.status === \"uploaded\");\n const errorFiles = nextFiles.filter((file) => file.status === \"error\");\n const availableErrorSlots = Math.max(0, maxFiles - uploadedFiles.length);\n\n return [...uploadedFiles, ...errorFiles.slice(0, availableErrorSlots)];\n};\n\nconst mapFile = (\n file: File,\n status: UploadedFileData[\"status\"],\n error?: string,\n): UploadedFileData => ({\n url: URL.createObjectURL(file),\n name: file.name,\n size: formatFileSize(file.size),\n addedAt: new Date().toISOString(),\n status,\n error,\n});\n\nconst getRejectedError = (code?: string) =>\n code === \"file-too-large\" ? \"Файл слишком большой\" : \"Неподдерживаемый формат\";\n\nconst replaceDuplicateErrors = (\n currentFiles: UploadedFileData[],\n newFiles: UploadedFileData[],\n rejectedFiles: UploadedFileData[],\n) => {\n const rejectedFileIds = new Set(rejectedFiles.map(getFileIdentity));\n const acceptedFileIds = new Set(newFiles.map(getFileIdentity));\n\n return currentFiles.filter((existingFile) => {\n if (existingFile.status !== \"error\") return true;\n const id = getFileIdentity(existingFile);\n return !rejectedFileIds.has(id) && !acceptedFileIds.has(id);\n });\n};\n\nconst getFileType = (file: UploadedFileData) => {\n const ext = file.name.split(\".\").pop()?.toLowerCase();\n\n if (!ext) return \"other\";\n if ([\"jpg\", \"jpeg\", \"png\", \"webp\"].includes(ext)) return \"image\";\n if (ext === \"pdf\") return \"pdf\";\n if ([\"doc\", \"docx\"].includes(ext)) return \"doc\";\n if ([\"xls\", \"xlsx\"].includes(ext)) return \"excel\";\n if (ext === \"txt\") return \"text\";\n\n return \"other\";\n};\n\nexport const FilesUploader = ({\n value = [],\n onChange,\n multiple = false,\n maxFiles = DEFAULT_MAX_FILES,\n disabled = false,\n className,\n maxSize = DEFAULT_MAX_SIZE,\n variant = \"grid\",\n accepts = DEFAULT_ACCEPT,\n icon,\n title,\n text,\n showFiles = true,\n isErrorText = false,\n}: PropsFilesUploader) => {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n const files = value;\n const uploadedCount = files.filter((file) => file.status === \"uploaded\").length;\n\n const onDrop = (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\n setError(null);\n const remainingUploadSlots = Math.max(0, maxFiles - uploadedCount);\n const acceptedFilesToUpload = acceptedFiles.slice(0, remainingUploadSlots);\n const overflowAcceptedFiles = acceptedFiles.slice(remainingUploadSlots);\n\n const rejectedMapped = [\n ...rejectedFiles.map((rejection) =>\n mapFile(rejection.file, \"error\", getRejectedError(rejection.errors[0]?.code)),\n ),\n ...overflowAcceptedFiles.map((file) =>\n mapFile(file, \"error\", `Максимальное количество файлов: ${maxFiles}`),\n ),\n ];\n\n if (rejectedMapped.length) {\n setError(rejectedMapped[0].error || \"Ошибка загрузки\");\n }\n\n if (!acceptedFilesToUpload.length && !rejectedMapped.length) return;\n\n setLoading(true);\n\n setTimeout(() => {\n const newFiles = acceptedFilesToUpload.map((file) => mapFile(file, \"uploaded\"));\n const nextBaseFiles = replaceDuplicateErrors(files, newFiles, rejectedMapped);\n const nextFiles = multiple\n ? limitFilesForValue([...nextBaseFiles, ...newFiles, ...rejectedMapped], maxFiles)\n : [...newFiles, ...rejectedMapped].slice(0, 1);\n\n onChange?.(nextFiles.length ? nextFiles : []);\n setLoading(false);\n }, DEFAULT_TIMEOUT);\n };\n\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n onDrop,\n accept: fileAcceptMap(accepts),\n maxSize,\n multiple: multiple && maxFiles > 1,\n disabled: disabled || loading,\n });\n\n const removeFile = (index: number) => () => {\n const updated = files.filter((_, i) => i !== index);\n onChange?.(updated.length ? updated : []);\n };\n\n const uploadedFiles = files\n .map((file, index) => ({ file, index }))\n .filter(({ file }) => file.status === \"uploaded\");\n\n const isMaxFilesReached = uploadedCount >= maxFiles;\n const uploadIcon = icon ?? Plus;\n\n const gridClasses = {\n grid: \"grid-cols-2 sm:grid-cols-3 md:grid-cols-4\",\n list: \"grid-cols-1\",\n compact: \"grid-cols-2 sm:grid-cols-3\",\n };\n const isFileDisplayBlocked = !(isMaxFilesReached && showFiles);\n\n return (\n <div className={cn(\"w-full space-y-4\", className?.container)}>\n <div\n className={cn(\n \"grid h-full w-full gap-4\",\n variant === \"list\" ? \"grid-cols-1\" : gridClasses[variant],\n )}\n >\n {showFiles &&\n uploadedFiles.map(({ file, index }) => {\n const type = getFileType(file);\n\n return (\n <div\n key={`${file.url}-${file.addedAt}-${index}`}\n className=\"group bg-primary-bg relative aspect-square h-full w-full\n overflow-hidden rounded-lg\"\n >\n {type === \"image\" ? (\n <img\n src={file.url}\n className=\"h-full w-full object-cover\"\n />\n ) : (\n <div\n className=\"bg-tertiary-bg flex h-full w-full items-center\n justify-center text-sm font-semibold\"\n >\n {file.name.split(\".\").pop()?.toUpperCase()}\n </div>\n )}\n\n <div\n className=\"bg-primary-inverse-bg/50 text-primary-bg absolute inset-0\n flex items-center justify-center opacity-0 transition-opacity\n hover:opacity-100\"\n >\n <StrokeIcon\n onClick={removeFile(index)}\n icon={X}\n />\n </div>\n </div>\n );\n })}\n\n {isFileDisplayBlocked && (\n <div\n {...getRootProps()}\n className={cn(\n `border-delicate-border bg-secondary-bg hover:bg-tertiary-bg relative flex\n cursor-pointer flex-col items-center justify-center rounded-lg border-2\n border-dashed transition-colors`,\n isDragActive && \"border-primary bg-primary/5\",\n variant === \"list\" ? \"min-h-37.5\" : \"aspect-square\",\n className?.blockAdd,\n (disabled || loading || isMaxFilesReached) &&\n \"bg-disabled-bg text-disabled-text cursor-default hover:bg-none\",\n )}\n >\n <input\n disabled={isMaxFilesReached}\n {...getInputProps()}\n />\n\n {loading ? (\n <StrokeIcon\n icon={SpinnerGap}\n className=\"text-sub-label-text h-8 w-8 animate-spin\"\n />\n ) : (\n <div className=\"flex flex-col items-center space-y-2 p-4 text-center\">\n <StrokeIcon\n icon={uploadIcon}\n className={cn(\"text-sub-label-text h-8 w-8\", className?.icon)}\n />\n <Typography className={cn(\"text-sub-label-text\", className?.title)}>\n {multiple\n ? `${title || \"Добавить\"} (${uploadedCount}/${maxFiles})`\n : title || \"Добавить\"}\n </Typography>\n\n {text && (\n <Typography className={cn(\"text-sub-label-text\", className?.text)}>\n {text}\n </Typography>\n )}\n </div>\n )}\n </div>\n )}\n </div>\n\n {!isErrorText && error && (\n <div className=\"bg-error-bg text-error-text rounded-lg p-3 text-sm\">{error}</div>\n )}\n </div>\n );\n};\n"],"names":["FILE_SIZE_UNITS","FILE_SIZE_KB","DEFAULT_MAX_SIZE","DEFAULT_MAX_FILES","DEFAULT_ACCEPT","DEFAULT_TIMEOUT","ACCEPT_MAP","formatFileSize","bytes","i","getFileIdentity","file","fileAcceptMap","accepts","acc","t","limitFilesForValue","nextFiles","maxFiles","uploadedFiles","errorFiles","availableErrorSlots","mapFile","status","error","getRejectedError","code","replaceDuplicateErrors","currentFiles","newFiles","rejectedFiles","rejectedFileIds","acceptedFileIds","existingFile","id","getFileType","ext","FilesUploader","value","onChange","multiple","disabled","className","maxSize","variant","icon","title","text","showFiles","isErrorText","loading","setLoading","useState","setError","files","uploadedCount","onDrop","acceptedFiles","remainingUploadSlots","acceptedFilesToUpload","overflowAcceptedFiles","rejectedMapped","rejection","nextBaseFiles","getRootProps","getInputProps","isDragActive","useDropzone","removeFile","index","updated","_","isMaxFilesReached","uploadIcon","Plus","gridClasses","isFileDisplayBlocked","cn","jsxs","type","jsx","StrokeIcon","X","SpinnerGap","Typography"],"mappings":"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"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsxs as m, jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import { cn as p } from "./lib-utils.js";
|
|
3
|
-
import { useState as
|
|
4
|
-
import { u as
|
|
5
|
-
import { Plus as
|
|
6
|
-
import { SpinnerGap as
|
|
3
|
+
import { useState as L } from "react";
|
|
4
|
+
import { u as H } from "./index-CVlBIwtP.js";
|
|
5
|
+
import { Plus as J } from "phosphor-strokes-icons/icons/Plus";
|
|
6
|
+
import { SpinnerGap as Q } from "phosphor-strokes-icons/icons/SpinnerGap";
|
|
7
7
|
import { StrokeIcon as w } from "./components-icons-stroke-icon.js";
|
|
8
|
-
import { X as
|
|
9
|
-
import { Typography as
|
|
8
|
+
import { X as W } from "phosphor-strokes-icons/icons/X";
|
|
9
|
+
import { Typography as $ } from "./components-ui-typography-typography.js";
|
|
10
10
|
import "./components-ui-typography-typography.styles.js";
|
|
11
|
-
const
|
|
11
|
+
const Y = ["B", "KB", "MB", "GB", "TB"], h = 1024, ee = 5 * h * h, te = 5, re = ["all"], oe = 800, se = {
|
|
12
12
|
image: { "image/*": [".jpg", ".jpeg", ".png", ".webp"] },
|
|
13
13
|
pdf: { "application/pdf": [".pdf"] },
|
|
14
14
|
doc: {
|
|
@@ -21,74 +21,74 @@ const W = ["B", "KB", "MB", "GB", "TB"], x = 1024, Y = 5 * x * x, ee = 5, te = [
|
|
|
21
21
|
},
|
|
22
22
|
text: { "text/plain": [".txt"] },
|
|
23
23
|
all: {}
|
|
24
|
-
},
|
|
24
|
+
}, le = (e) => {
|
|
25
25
|
if (!e) return "0 B";
|
|
26
|
-
const t = Math.floor(Math.log(e) / Math.log(
|
|
27
|
-
return `${(e / Math.pow(
|
|
28
|
-
},
|
|
26
|
+
const t = Math.floor(Math.log(e) / Math.log(h));
|
|
27
|
+
return `${(e / Math.pow(h, t)).toFixed(2)} ${Y[t]}`;
|
|
28
|
+
}, E = (e) => `${e.name}:${e.size}`, ne = (e) => e.reduce((t, o) => ({ ...t, ...se[o] }), {}), ce = (e, t) => {
|
|
29
29
|
const o = e.filter((s) => s.status === "uploaded"), l = e.filter((s) => s.status === "error"), a = Math.max(0, t - o.length);
|
|
30
30
|
return [...o, ...l.slice(0, a)];
|
|
31
|
-
},
|
|
31
|
+
}, A = (e, t, o) => ({
|
|
32
32
|
url: URL.createObjectURL(e),
|
|
33
33
|
name: e.name,
|
|
34
|
-
size:
|
|
34
|
+
size: le(e.size),
|
|
35
35
|
addedAt: (/* @__PURE__ */ new Date()).toISOString(),
|
|
36
36
|
status: t,
|
|
37
37
|
error: o
|
|
38
|
-
}),
|
|
39
|
-
const l = new Set(o.map(
|
|
38
|
+
}), ie = (e) => e === "file-too-large" ? "Файл слишком большой" : "Неподдерживаемый формат", ae = (e, t, o) => {
|
|
39
|
+
const l = new Set(o.map(E)), a = new Set(t.map(E));
|
|
40
40
|
return e.filter((s) => {
|
|
41
41
|
if (s.status !== "error") return !0;
|
|
42
|
-
const
|
|
43
|
-
return !l.has(
|
|
42
|
+
const g = E(s);
|
|
43
|
+
return !l.has(g) && !a.has(g);
|
|
44
44
|
});
|
|
45
|
-
},
|
|
45
|
+
}, de = (e) => {
|
|
46
46
|
const t = e.name.split(".").pop()?.toLowerCase();
|
|
47
47
|
return t ? ["jpg", "jpeg", "png", "webp"].includes(t) ? "image" : t === "pdf" ? "pdf" : ["doc", "docx"].includes(t) ? "doc" : ["xls", "xlsx"].includes(t) ? "excel" : t === "txt" ? "text" : "other" : "other";
|
|
48
|
-
},
|
|
48
|
+
}, Fe = ({
|
|
49
49
|
value: e = [],
|
|
50
50
|
onChange: t,
|
|
51
51
|
multiple: o = !1,
|
|
52
|
-
maxFiles: l =
|
|
52
|
+
maxFiles: l = te,
|
|
53
53
|
disabled: a = !1,
|
|
54
54
|
className: s,
|
|
55
|
-
maxSize:
|
|
55
|
+
maxSize: g = ee,
|
|
56
56
|
variant: b = "grid",
|
|
57
|
-
accepts:
|
|
58
|
-
icon:
|
|
59
|
-
title:
|
|
60
|
-
text:
|
|
61
|
-
showFiles:
|
|
62
|
-
isErrorText:
|
|
57
|
+
accepts: D = re,
|
|
58
|
+
icon: N,
|
|
59
|
+
title: I,
|
|
60
|
+
text: S,
|
|
61
|
+
showFiles: M = !0,
|
|
62
|
+
isErrorText: B = !1
|
|
63
63
|
}) => {
|
|
64
|
-
const [
|
|
65
|
-
|
|
66
|
-
const u = Math.max(0, l -
|
|
64
|
+
const [v, T] = L(!1), [j, U] = L(null), f = e, y = f.filter((r) => r.status === "uploaded").length, C = (r, c) => {
|
|
65
|
+
U(null);
|
|
66
|
+
const u = Math.max(0, l - y), x = r.slice(0, u), G = r.slice(u), d = [
|
|
67
67
|
...c.map(
|
|
68
|
-
(i) =>
|
|
68
|
+
(i) => A(i.file, "error", ie(i.errors[0]?.code))
|
|
69
69
|
),
|
|
70
|
-
...
|
|
71
|
-
(i) =>
|
|
70
|
+
...G.map(
|
|
71
|
+
(i) => A(i, "error", `Максимальное количество файлов: ${l}`)
|
|
72
72
|
)
|
|
73
73
|
];
|
|
74
|
-
d.length &&
|
|
75
|
-
const i =
|
|
76
|
-
t?.(
|
|
77
|
-
},
|
|
78
|
-
}, { getRootProps:
|
|
79
|
-
onDrop:
|
|
80
|
-
accept:
|
|
81
|
-
maxSize:
|
|
74
|
+
d.length && U(d[0].error || "Ошибка загрузки"), !(!x.length && !d.length) && (T(!0), setTimeout(() => {
|
|
75
|
+
const i = x.map((V) => A(V, "uploaded")), K = ae(f, i, d), _ = o ? ce([...K, ...i, ...d], l) : [...i, ...d].slice(0, 1);
|
|
76
|
+
t?.(_.length ? _ : []), T(!1);
|
|
77
|
+
}, oe));
|
|
78
|
+
}, { getRootProps: P, getInputProps: z, isDragActive: R } = H({
|
|
79
|
+
onDrop: C,
|
|
80
|
+
accept: ne(D),
|
|
81
|
+
maxSize: g,
|
|
82
82
|
multiple: o && l > 1,
|
|
83
|
-
disabled: a ||
|
|
84
|
-
}),
|
|
85
|
-
const c =
|
|
83
|
+
disabled: a || v
|
|
84
|
+
}), k = (r) => () => {
|
|
85
|
+
const c = f.filter((u, x) => x !== r);
|
|
86
86
|
t?.(c.length ? c : []);
|
|
87
|
-
},
|
|
87
|
+
}, O = f.map((r, c) => ({ file: r, index: c })).filter(({ file: r }) => r.status === "uploaded"), F = y >= l, X = N ?? J, Z = {
|
|
88
88
|
grid: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4",
|
|
89
89
|
list: "grid-cols-1",
|
|
90
90
|
compact: "grid-cols-2 sm:grid-cols-3"
|
|
91
|
-
};
|
|
91
|
+
}, q = !(F && M);
|
|
92
92
|
return /* @__PURE__ */ m("div", { className: p("w-full space-y-4", s?.container), children: [
|
|
93
93
|
/* @__PURE__ */ m(
|
|
94
94
|
"div",
|
|
@@ -98,8 +98,8 @@ const W = ["B", "KB", "MB", "GB", "TB"], x = 1024, Y = 5 * x * x, ee = 5, te = [
|
|
|
98
98
|
b === "list" ? "grid-cols-1" : Z[b]
|
|
99
99
|
),
|
|
100
100
|
children: [
|
|
101
|
-
|
|
102
|
-
const u =
|
|
101
|
+
M && O.map(({ file: r, index: c }) => {
|
|
102
|
+
const u = de(r);
|
|
103
103
|
return /* @__PURE__ */ m(
|
|
104
104
|
"div",
|
|
105
105
|
{
|
|
@@ -115,8 +115,8 @@ const W = ["B", "KB", "MB", "GB", "TB"], x = 1024, Y = 5 * x * x, ee = 5, te = [
|
|
|
115
115
|
) : /* @__PURE__ */ n(
|
|
116
116
|
"div",
|
|
117
117
|
{
|
|
118
|
-
className: `flex h-full w-full items-center
|
|
119
|
-
text-sm font-semibold`,
|
|
118
|
+
className: `bg-tertiary-bg flex h-full w-full items-center
|
|
119
|
+
justify-center text-sm font-semibold`,
|
|
120
120
|
children: r.name.split(".").pop()?.toUpperCase()
|
|
121
121
|
}
|
|
122
122
|
),
|
|
@@ -129,8 +129,8 @@ const W = ["B", "KB", "MB", "GB", "TB"], x = 1024, Y = 5 * x * x, ee = 5, te = [
|
|
|
129
129
|
children: /* @__PURE__ */ n(
|
|
130
130
|
w,
|
|
131
131
|
{
|
|
132
|
-
onClick:
|
|
133
|
-
icon:
|
|
132
|
+
onClick: k(c),
|
|
133
|
+
icon: W
|
|
134
134
|
}
|
|
135
135
|
)
|
|
136
136
|
}
|
|
@@ -140,25 +140,31 @@ const W = ["B", "KB", "MB", "GB", "TB"], x = 1024, Y = 5 * x * x, ee = 5, te = [
|
|
|
140
140
|
`${r.url}-${r.addedAt}-${c}`
|
|
141
141
|
);
|
|
142
142
|
}),
|
|
143
|
-
|
|
143
|
+
q && /* @__PURE__ */ m(
|
|
144
144
|
"div",
|
|
145
145
|
{
|
|
146
|
-
...
|
|
146
|
+
...P(),
|
|
147
147
|
className: p(
|
|
148
|
-
`
|
|
149
|
-
|
|
150
|
-
transition-colors
|
|
151
|
-
|
|
152
|
-
(a || y) && "cursor-not-allowed opacity-50",
|
|
148
|
+
`border-delicate-border bg-secondary-bg hover:bg-tertiary-bg relative flex
|
|
149
|
+
cursor-pointer flex-col items-center justify-center rounded-lg border-2
|
|
150
|
+
border-dashed transition-colors`,
|
|
151
|
+
R && "border-primary bg-primary/5",
|
|
153
152
|
b === "list" ? "min-h-37.5" : "aspect-square",
|
|
154
|
-
s?.blockAdd
|
|
153
|
+
s?.blockAdd,
|
|
154
|
+
(a || v || F) && "bg-disabled-bg text-disabled-text cursor-default hover:bg-none"
|
|
155
155
|
),
|
|
156
156
|
children: [
|
|
157
|
-
/* @__PURE__ */ n(
|
|
158
|
-
|
|
157
|
+
/* @__PURE__ */ n(
|
|
158
|
+
"input",
|
|
159
|
+
{
|
|
160
|
+
disabled: F,
|
|
161
|
+
...z()
|
|
162
|
+
}
|
|
163
|
+
),
|
|
164
|
+
v ? /* @__PURE__ */ n(
|
|
159
165
|
w,
|
|
160
166
|
{
|
|
161
|
-
icon:
|
|
167
|
+
icon: Q,
|
|
162
168
|
className: "text-sub-label-text h-8 w-8 animate-spin"
|
|
163
169
|
}
|
|
164
170
|
) : /* @__PURE__ */ m("div", { className: "flex flex-col items-center space-y-2 p-4 text-center", children: [
|
|
@@ -169,8 +175,8 @@ const W = ["B", "KB", "MB", "GB", "TB"], x = 1024, Y = 5 * x * x, ee = 5, te = [
|
|
|
169
175
|
className: p("text-sub-label-text h-8 w-8", s?.icon)
|
|
170
176
|
}
|
|
171
177
|
),
|
|
172
|
-
/* @__PURE__ */ n(
|
|
173
|
-
|
|
178
|
+
/* @__PURE__ */ n($, { className: p("text-sub-label-text", s?.title), children: o ? `${I || "Добавить"} (${y}/${l})` : I || "Добавить" }),
|
|
179
|
+
S && /* @__PURE__ */ n($, { className: p("text-sub-label-text", s?.text), children: S })
|
|
174
180
|
] })
|
|
175
181
|
]
|
|
176
182
|
}
|
|
@@ -178,10 +184,10 @@ const W = ["B", "KB", "MB", "GB", "TB"], x = 1024, Y = 5 * x * x, ee = 5, te = [
|
|
|
178
184
|
]
|
|
179
185
|
}
|
|
180
186
|
),
|
|
181
|
-
!
|
|
187
|
+
!B && j && /* @__PURE__ */ n("div", { className: "bg-error-bg text-error-text rounded-lg p-3 text-sm", children: j })
|
|
182
188
|
] });
|
|
183
189
|
};
|
|
184
190
|
export {
|
|
185
|
-
|
|
191
|
+
Fe as FilesUploader
|
|
186
192
|
};
|
|
187
193
|
//# sourceMappingURL=components-files-uploader-files-uploader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components-files-uploader-files-uploader.js","sources":["../src/components/files-uploader/files-uploader.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\";\nimport { useState } from \"react\";\nimport { type FileRejection, useDropzone } from \"react-dropzone\";\nimport { Plus } from \"@/components/icons/Plus\";\nimport { SpinnerGap } from \"@/components/icons/SpinnerGap\";\nimport { StrokeIcon, type StrokeIconComponent } from \"@/components/icons/stroke-icon\";\nimport { X } from \"@/components/icons/X\";\nimport { Typography } from \"../ui/typography\";\n\ntype Variant = \"grid\" | \"list\" | \"compact\";\ntype AcceptType = \"image\" | \"pdf\" | \"doc\" | \"excel\" | \"text\" | \"all\";\n\nexport type UploadedFileData = {\n url: string;\n name: string;\n size: string;\n addedAt: string;\n status: \"uploaded\" | \"error\";\n error?: string;\n};\n\nexport type FilesUploaderValue = UploadedFileData[] | [];\n\nexport type PropsFilesUploader = {\n value?: FilesUploaderValue;\n onChange?: (value: FilesUploaderValue) => void;\n multiple?: boolean;\n maxFiles?: number;\n disabled?: boolean;\n isErrorText?: boolean;\n className?: {\n container?: string;\n blockAdd?: string;\n title?: string;\n text?: string;\n icon?: string;\n };\n maxSize?: number;\n variant?: Variant;\n accepts?: AcceptType[];\n icon?: StrokeIconComponent;\n title?: string;\n text?: string;\n showFiles?: boolean;\n};\n\nconst FILE_SIZE_UNITS = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\"];\nconst FILE_SIZE_KB = 1024;\n\nconst DEFAULT_MAX_SIZE = 5 * FILE_SIZE_KB * FILE_SIZE_KB;\nconst DEFAULT_MAX_FILES = 5;\nconst DEFAULT_ACCEPT: AcceptType[] = [\"all\"];\nconst DEFAULT_TIMEOUT = 800;\n\nconst ACCEPT_MAP: Record<AcceptType, Record<string, string[]>> = {\n image: { \"image/*\": [\".jpg\", \".jpeg\", \".png\", \".webp\"] },\n pdf: { \"application/pdf\": [\".pdf\"] },\n doc: {\n \"application/msword\": [\".doc\"],\n \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\": [\".docx\"],\n },\n excel: {\n \"application/vnd.ms-excel\": [\".xls\"],\n \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": [\".xlsx\"],\n },\n text: { \"text/plain\": [\".txt\"] },\n all: {},\n};\n\nconst formatFileSize = (bytes: number) => {\n if (!bytes) return \"0 B\";\n const i = Math.floor(Math.log(bytes) / Math.log(FILE_SIZE_KB));\n return `${(bytes / Math.pow(FILE_SIZE_KB, i)).toFixed(2)} ${FILE_SIZE_UNITS[i]}`;\n};\n\nconst getFileIdentity = (file: Pick<UploadedFileData, \"name\" | \"size\">) =>\n `${file.name}:${file.size}`;\n\nconst fileAcceptMap = (accepts: AcceptType[]) =>\n accepts.reduce((acc, t) => ({ ...acc, ...ACCEPT_MAP[t] }), {});\n\nconst limitFilesForValue = (\n nextFiles: UploadedFileData[],\n maxFiles: number,\n): UploadedFileData[] => {\n const uploadedFiles = nextFiles.filter((file) => file.status === \"uploaded\");\n const errorFiles = nextFiles.filter((file) => file.status === \"error\");\n const availableErrorSlots = Math.max(0, maxFiles - uploadedFiles.length);\n\n return [...uploadedFiles, ...errorFiles.slice(0, availableErrorSlots)];\n};\n\nconst mapFile = (\n file: File,\n status: UploadedFileData[\"status\"],\n error?: string,\n): UploadedFileData => ({\n url: URL.createObjectURL(file),\n name: file.name,\n size: formatFileSize(file.size),\n addedAt: new Date().toISOString(),\n status,\n error,\n});\n\nconst getRejectedError = (code?: string) =>\n code === \"file-too-large\" ? \"Файл слишком большой\" : \"Неподдерживаемый формат\";\n\nconst replaceDuplicateErrors = (\n currentFiles: UploadedFileData[],\n newFiles: UploadedFileData[],\n rejectedFiles: UploadedFileData[],\n) => {\n const rejectedFileIds = new Set(rejectedFiles.map(getFileIdentity));\n const acceptedFileIds = new Set(newFiles.map(getFileIdentity));\n\n return currentFiles.filter((existingFile) => {\n if (existingFile.status !== \"error\") return true;\n const id = getFileIdentity(existingFile);\n return !rejectedFileIds.has(id) && !acceptedFileIds.has(id);\n });\n};\n\nconst getFileType = (file: UploadedFileData) => {\n const ext = file.name.split(\".\").pop()?.toLowerCase();\n\n if (!ext) return \"other\";\n if ([\"jpg\", \"jpeg\", \"png\", \"webp\"].includes(ext)) return \"image\";\n if (ext === \"pdf\") return \"pdf\";\n if ([\"doc\", \"docx\"].includes(ext)) return \"doc\";\n if ([\"xls\", \"xlsx\"].includes(ext)) return \"excel\";\n if (ext === \"txt\") return \"text\";\n\n return \"other\";\n};\n\nexport const FilesUploader = ({\n value = [],\n onChange,\n multiple = false,\n maxFiles = DEFAULT_MAX_FILES,\n disabled = false,\n className,\n maxSize = DEFAULT_MAX_SIZE,\n variant = \"grid\",\n accepts = DEFAULT_ACCEPT,\n icon,\n title,\n text,\n showFiles = true,\n isErrorText = false,\n}: PropsFilesUploader) => {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n const files = value;\n const uploadedCount = files.filter((file) => file.status === \"uploaded\").length;\n\n const onDrop = (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\n setError(null);\n const remainingUploadSlots = Math.max(0, maxFiles - uploadedCount);\n const acceptedFilesToUpload = acceptedFiles.slice(0, remainingUploadSlots);\n const overflowAcceptedFiles = acceptedFiles.slice(remainingUploadSlots);\n\n const rejectedMapped = [\n ...rejectedFiles.map((rejection) =>\n mapFile(rejection.file, \"error\", getRejectedError(rejection.errors[0]?.code)),\n ),\n ...overflowAcceptedFiles.map((file) =>\n mapFile(file, \"error\", `Максимальное количество файлов: ${maxFiles}`),\n ),\n ];\n\n if (rejectedMapped.length) {\n setError(rejectedMapped[0].error || \"Ошибка загрузки\");\n }\n\n if (!acceptedFilesToUpload.length && !rejectedMapped.length) return;\n\n setLoading(true);\n\n setTimeout(() => {\n const newFiles = acceptedFilesToUpload.map((file) => mapFile(file, \"uploaded\"));\n const nextBaseFiles = replaceDuplicateErrors(files, newFiles, rejectedMapped);\n const nextFiles = multiple\n ? limitFilesForValue([...nextBaseFiles, ...newFiles, ...rejectedMapped], maxFiles)\n : [...newFiles, ...rejectedMapped].slice(0, 1);\n\n onChange?.(nextFiles.length ? nextFiles : []);\n setLoading(false);\n }, DEFAULT_TIMEOUT);\n };\n\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n onDrop,\n accept: fileAcceptMap(accepts),\n maxSize,\n multiple: multiple && maxFiles > 1,\n disabled: disabled || loading,\n });\n\n const removeFile = (index: number) => () => {\n const updated = files.filter((_, i) => i !== index);\n onChange?.(updated.length ? updated : []);\n };\n\n const uploadedFiles = files\n .map((file, index) => ({ file, index }))\n .filter(({ file }) => file.status === \"uploaded\");\n\n const isMaxFilesReached = uploadedCount >= maxFiles;\n const uploadIcon = icon ?? Plus;\n\n const gridClasses = {\n grid: \"grid-cols-2 sm:grid-cols-3 md:grid-cols-4\",\n list: \"grid-cols-1\",\n compact: \"grid-cols-2 sm:grid-cols-3\",\n };\n\n return (\n <div className={cn(\"w-full space-y-4\", className?.container)}>\n <div\n className={cn(\n \"grid h-full w-full gap-4\",\n variant === \"list\" ? \"grid-cols-1\" : gridClasses[variant],\n )}\n >\n {showFiles &&\n uploadedFiles.map(({ file, index }) => {\n const type = getFileType(file);\n\n return (\n <div\n key={`${file.url}-${file.addedAt}-${index}`}\n className=\"group bg-primary-bg relative aspect-square h-full w-full\n overflow-hidden rounded-lg\"\n >\n {type === \"image\" ? (\n <img\n src={file.url}\n className=\"h-full w-full object-cover\"\n />\n ) : (\n <div\n className=\"flex h-full w-full items-center justify-center bg-gray-100\n text-sm font-semibold\"\n >\n {file.name.split(\".\").pop()?.toUpperCase()}\n </div>\n )}\n\n <div\n className=\"bg-primary-inverse-bg/50 text-primary-bg absolute inset-0\n flex items-center justify-center opacity-0 transition-opacity\n hover:opacity-100\"\n >\n <StrokeIcon\n onClick={removeFile(index)}\n icon={X}\n />\n </div>\n </div>\n );\n })}\n\n {!isMaxFilesReached && (\n <div\n {...getRootProps()}\n className={cn(\n `relative flex cursor-pointer flex-col items-center justify-center\n rounded-lg border-2 border-dashed border-gray-300 bg-gray-50\n transition-colors hover:bg-gray-100`,\n isDragActive && \"border-primary bg-primary/5\",\n (disabled || loading) && \"cursor-not-allowed opacity-50\",\n variant === \"list\" ? \"min-h-37.5\" : \"aspect-square\",\n className?.blockAdd,\n )}\n >\n <input {...getInputProps()} />\n\n {loading ? (\n <StrokeIcon\n icon={SpinnerGap}\n className=\"text-sub-label-text h-8 w-8 animate-spin\"\n />\n ) : (\n <div className=\"flex flex-col items-center space-y-2 p-4 text-center\">\n <StrokeIcon\n icon={uploadIcon}\n className={cn(\"text-sub-label-text h-8 w-8\", className?.icon)}\n />\n\n <Typography className={cn(\"text-sub-label-text\", className?.title)}>\n {multiple\n ? `${title || \"Добавить\"} (${uploadedCount}/${maxFiles})`\n : title || \"Добавить\"}\n </Typography>\n\n {text && (\n <Typography className={cn(\"text-sub-label-text\", className?.text)}>\n {text}\n </Typography>\n )}\n </div>\n )}\n </div>\n )}\n </div>\n\n {!isErrorText && error && (\n <div className=\"rounded-lg bg-red-50 p-3 text-sm text-red-600\">{error}</div>\n )}\n </div>\n );\n};\n"],"names":["FILE_SIZE_UNITS","FILE_SIZE_KB","DEFAULT_MAX_SIZE","DEFAULT_MAX_FILES","DEFAULT_ACCEPT","DEFAULT_TIMEOUT","ACCEPT_MAP","formatFileSize","bytes","i","getFileIdentity","file","fileAcceptMap","accepts","acc","t","limitFilesForValue","nextFiles","maxFiles","uploadedFiles","errorFiles","availableErrorSlots","mapFile","status","error","getRejectedError","code","replaceDuplicateErrors","currentFiles","newFiles","rejectedFiles","rejectedFileIds","acceptedFileIds","existingFile","id","getFileType","ext","FilesUploader","value","onChange","multiple","disabled","className","maxSize","variant","icon","title","text","showFiles","isErrorText","loading","setLoading","useState","setError","files","uploadedCount","onDrop","acceptedFiles","remainingUploadSlots","acceptedFilesToUpload","overflowAcceptedFiles","rejectedMapped","rejection","nextBaseFiles","getRootProps","getInputProps","isDragActive","useDropzone","removeFile","index","updated","_","isMaxFilesReached","uploadIcon","Plus","gridClasses","cn","jsxs","type","jsx","StrokeIcon","X","SpinnerGap","Typography"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"components-files-uploader-files-uploader.js","sources":["../src/components/files-uploader/files-uploader.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils\";\nimport { useState } from \"react\";\nimport { type FileRejection, useDropzone } from \"react-dropzone\";\nimport { Plus } from \"@/components/icons/Plus\";\nimport { SpinnerGap } from \"@/components/icons/SpinnerGap\";\nimport { StrokeIcon, type StrokeIconComponent } from \"@/components/icons/stroke-icon\";\nimport { X } from \"@/components/icons/X\";\nimport { Typography } from \"../ui/typography\";\n\ntype Variant = \"grid\" | \"list\" | \"compact\";\ntype AcceptType = \"image\" | \"pdf\" | \"doc\" | \"excel\" | \"text\" | \"all\";\n\nexport type UploadedFileData = {\n url: string;\n name: string;\n size: string;\n addedAt: string;\n status: \"uploaded\" | \"error\";\n error?: string;\n};\n\nexport type FilesUploaderValue = UploadedFileData[] | [];\n\nexport type PropsFilesUploader = {\n value?: FilesUploaderValue;\n onChange?: (value: FilesUploaderValue) => void;\n multiple?: boolean;\n maxFiles?: number;\n disabled?: boolean;\n isErrorText?: boolean;\n className?: {\n container?: string;\n blockAdd?: string;\n title?: string;\n text?: string;\n icon?: string;\n };\n maxSize?: number;\n variant?: Variant;\n accepts?: AcceptType[];\n icon?: StrokeIconComponent;\n title?: string;\n text?: string;\n showFiles?: boolean;\n};\n\nconst FILE_SIZE_UNITS = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\"];\nconst FILE_SIZE_KB = 1024;\n\nconst DEFAULT_MAX_SIZE = 5 * FILE_SIZE_KB * FILE_SIZE_KB;\nconst DEFAULT_MAX_FILES = 5;\nconst DEFAULT_ACCEPT: AcceptType[] = [\"all\"];\nconst DEFAULT_TIMEOUT = 800;\n\nconst ACCEPT_MAP: Record<AcceptType, Record<string, string[]>> = {\n image: { \"image/*\": [\".jpg\", \".jpeg\", \".png\", \".webp\"] },\n pdf: { \"application/pdf\": [\".pdf\"] },\n doc: {\n \"application/msword\": [\".doc\"],\n \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\": [\".docx\"],\n },\n excel: {\n \"application/vnd.ms-excel\": [\".xls\"],\n \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": [\".xlsx\"],\n },\n text: { \"text/plain\": [\".txt\"] },\n all: {},\n};\n\nconst formatFileSize = (bytes: number) => {\n if (!bytes) return \"0 B\";\n const i = Math.floor(Math.log(bytes) / Math.log(FILE_SIZE_KB));\n return `${(bytes / Math.pow(FILE_SIZE_KB, i)).toFixed(2)} ${FILE_SIZE_UNITS[i]}`;\n};\n\nconst getFileIdentity = (file: Pick<UploadedFileData, \"name\" | \"size\">) =>\n `${file.name}:${file.size}`;\n\nconst fileAcceptMap = (accepts: AcceptType[]) =>\n accepts.reduce((acc, t) => ({ ...acc, ...ACCEPT_MAP[t] }), {});\n\nconst limitFilesForValue = (\n nextFiles: UploadedFileData[],\n maxFiles: number,\n): UploadedFileData[] => {\n const uploadedFiles = nextFiles.filter((file) => file.status === \"uploaded\");\n const errorFiles = nextFiles.filter((file) => file.status === \"error\");\n const availableErrorSlots = Math.max(0, maxFiles - uploadedFiles.length);\n\n return [...uploadedFiles, ...errorFiles.slice(0, availableErrorSlots)];\n};\n\nconst mapFile = (\n file: File,\n status: UploadedFileData[\"status\"],\n error?: string,\n): UploadedFileData => ({\n url: URL.createObjectURL(file),\n name: file.name,\n size: formatFileSize(file.size),\n addedAt: new Date().toISOString(),\n status,\n error,\n});\n\nconst getRejectedError = (code?: string) =>\n code === \"file-too-large\" ? \"Файл слишком большой\" : \"Неподдерживаемый формат\";\n\nconst replaceDuplicateErrors = (\n currentFiles: UploadedFileData[],\n newFiles: UploadedFileData[],\n rejectedFiles: UploadedFileData[],\n) => {\n const rejectedFileIds = new Set(rejectedFiles.map(getFileIdentity));\n const acceptedFileIds = new Set(newFiles.map(getFileIdentity));\n\n return currentFiles.filter((existingFile) => {\n if (existingFile.status !== \"error\") return true;\n const id = getFileIdentity(existingFile);\n return !rejectedFileIds.has(id) && !acceptedFileIds.has(id);\n });\n};\n\nconst getFileType = (file: UploadedFileData) => {\n const ext = file.name.split(\".\").pop()?.toLowerCase();\n\n if (!ext) return \"other\";\n if ([\"jpg\", \"jpeg\", \"png\", \"webp\"].includes(ext)) return \"image\";\n if (ext === \"pdf\") return \"pdf\";\n if ([\"doc\", \"docx\"].includes(ext)) return \"doc\";\n if ([\"xls\", \"xlsx\"].includes(ext)) return \"excel\";\n if (ext === \"txt\") return \"text\";\n\n return \"other\";\n};\n\nexport const FilesUploader = ({\n value = [],\n onChange,\n multiple = false,\n maxFiles = DEFAULT_MAX_FILES,\n disabled = false,\n className,\n maxSize = DEFAULT_MAX_SIZE,\n variant = \"grid\",\n accepts = DEFAULT_ACCEPT,\n icon,\n title,\n text,\n showFiles = true,\n isErrorText = false,\n}: PropsFilesUploader) => {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n const files = value;\n const uploadedCount = files.filter((file) => file.status === \"uploaded\").length;\n\n const onDrop = (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\n setError(null);\n const remainingUploadSlots = Math.max(0, maxFiles - uploadedCount);\n const acceptedFilesToUpload = acceptedFiles.slice(0, remainingUploadSlots);\n const overflowAcceptedFiles = acceptedFiles.slice(remainingUploadSlots);\n\n const rejectedMapped = [\n ...rejectedFiles.map((rejection) =>\n mapFile(rejection.file, \"error\", getRejectedError(rejection.errors[0]?.code)),\n ),\n ...overflowAcceptedFiles.map((file) =>\n mapFile(file, \"error\", `Максимальное количество файлов: ${maxFiles}`),\n ),\n ];\n\n if (rejectedMapped.length) {\n setError(rejectedMapped[0].error || \"Ошибка загрузки\");\n }\n\n if (!acceptedFilesToUpload.length && !rejectedMapped.length) return;\n\n setLoading(true);\n\n setTimeout(() => {\n const newFiles = acceptedFilesToUpload.map((file) => mapFile(file, \"uploaded\"));\n const nextBaseFiles = replaceDuplicateErrors(files, newFiles, rejectedMapped);\n const nextFiles = multiple\n ? limitFilesForValue([...nextBaseFiles, ...newFiles, ...rejectedMapped], maxFiles)\n : [...newFiles, ...rejectedMapped].slice(0, 1);\n\n onChange?.(nextFiles.length ? nextFiles : []);\n setLoading(false);\n }, DEFAULT_TIMEOUT);\n };\n\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n onDrop,\n accept: fileAcceptMap(accepts),\n maxSize,\n multiple: multiple && maxFiles > 1,\n disabled: disabled || loading,\n });\n\n const removeFile = (index: number) => () => {\n const updated = files.filter((_, i) => i !== index);\n onChange?.(updated.length ? updated : []);\n };\n\n const uploadedFiles = files\n .map((file, index) => ({ file, index }))\n .filter(({ file }) => file.status === \"uploaded\");\n\n const isMaxFilesReached = uploadedCount >= maxFiles;\n const uploadIcon = icon ?? Plus;\n\n const gridClasses = {\n grid: \"grid-cols-2 sm:grid-cols-3 md:grid-cols-4\",\n list: \"grid-cols-1\",\n compact: \"grid-cols-2 sm:grid-cols-3\",\n };\n const isFileDisplayBlocked = !(isMaxFilesReached && showFiles);\n\n return (\n <div className={cn(\"w-full space-y-4\", className?.container)}>\n <div\n className={cn(\n \"grid h-full w-full gap-4\",\n variant === \"list\" ? \"grid-cols-1\" : gridClasses[variant],\n )}\n >\n {showFiles &&\n uploadedFiles.map(({ file, index }) => {\n const type = getFileType(file);\n\n return (\n <div\n key={`${file.url}-${file.addedAt}-${index}`}\n className=\"group bg-primary-bg relative aspect-square h-full w-full\n overflow-hidden rounded-lg\"\n >\n {type === \"image\" ? (\n <img\n src={file.url}\n className=\"h-full w-full object-cover\"\n />\n ) : (\n <div\n className=\"bg-tertiary-bg flex h-full w-full items-center\n justify-center text-sm font-semibold\"\n >\n {file.name.split(\".\").pop()?.toUpperCase()}\n </div>\n )}\n\n <div\n className=\"bg-primary-inverse-bg/50 text-primary-bg absolute inset-0\n flex items-center justify-center opacity-0 transition-opacity\n hover:opacity-100\"\n >\n <StrokeIcon\n onClick={removeFile(index)}\n icon={X}\n />\n </div>\n </div>\n );\n })}\n\n {isFileDisplayBlocked && (\n <div\n {...getRootProps()}\n className={cn(\n `border-delicate-border bg-secondary-bg hover:bg-tertiary-bg relative flex\n cursor-pointer flex-col items-center justify-center rounded-lg border-2\n border-dashed transition-colors`,\n isDragActive && \"border-primary bg-primary/5\",\n variant === \"list\" ? \"min-h-37.5\" : \"aspect-square\",\n className?.blockAdd,\n (disabled || loading || isMaxFilesReached) &&\n \"bg-disabled-bg text-disabled-text cursor-default hover:bg-none\",\n )}\n >\n <input\n disabled={isMaxFilesReached}\n {...getInputProps()}\n />\n\n {loading ? (\n <StrokeIcon\n icon={SpinnerGap}\n className=\"text-sub-label-text h-8 w-8 animate-spin\"\n />\n ) : (\n <div className=\"flex flex-col items-center space-y-2 p-4 text-center\">\n <StrokeIcon\n icon={uploadIcon}\n className={cn(\"text-sub-label-text h-8 w-8\", className?.icon)}\n />\n <Typography className={cn(\"text-sub-label-text\", className?.title)}>\n {multiple\n ? `${title || \"Добавить\"} (${uploadedCount}/${maxFiles})`\n : title || \"Добавить\"}\n </Typography>\n\n {text && (\n <Typography className={cn(\"text-sub-label-text\", className?.text)}>\n {text}\n </Typography>\n )}\n </div>\n )}\n </div>\n )}\n </div>\n\n {!isErrorText && error && (\n <div className=\"bg-error-bg text-error-text rounded-lg p-3 text-sm\">{error}</div>\n )}\n </div>\n );\n};\n"],"names":["FILE_SIZE_UNITS","FILE_SIZE_KB","DEFAULT_MAX_SIZE","DEFAULT_MAX_FILES","DEFAULT_ACCEPT","DEFAULT_TIMEOUT","ACCEPT_MAP","formatFileSize","bytes","i","getFileIdentity","file","fileAcceptMap","accepts","acc","t","limitFilesForValue","nextFiles","maxFiles","uploadedFiles","errorFiles","availableErrorSlots","mapFile","status","error","getRejectedError","code","replaceDuplicateErrors","currentFiles","newFiles","rejectedFiles","rejectedFileIds","acceptedFileIds","existingFile","id","getFileType","ext","FilesUploader","value","onChange","multiple","disabled","className","maxSize","variant","icon","title","text","showFiles","isErrorText","loading","setLoading","useState","setError","files","uploadedCount","onDrop","acceptedFiles","remainingUploadSlots","acceptedFilesToUpload","overflowAcceptedFiles","rejectedMapped","rejection","nextBaseFiles","getRootProps","getInputProps","isDragActive","useDropzone","removeFile","index","updated","_","isMaxFilesReached","uploadIcon","Plus","gridClasses","isFileDisplayBlocked","cn","jsxs","type","jsx","StrokeIcon","X","SpinnerGap","Typography"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./brd-ui-kit.css');const r=require("react/jsx-runtime"),j=require("phosphor-strokes-icons/icons/CaretDown"),y=require("phosphor-strokes-icons/icons/CaretUp"),_=require("phosphor-strokes-icons/icons/EnvelopeSimple"),k=require("phosphor-strokes-icons/icons/MaxLogo"),S=require("phosphor-strokes-icons/icons/Phone"),i=require("./components-icons-stroke-icon.cjs"),T=require("phosphor-strokes-icons/icons/TelegramLogo"),L=require("phosphor-strokes-icons/icons/WhatsAppLogoFilled");;/* empty css */const C=require("./lib-utils.cjs");require("class-variance-authority");require("./components-ui-badge-badge.styles.cjs");const F=require("./components-ui-button-button.cjs");require("./components-ui-button-button.styles.cjs");require("./components-ui-card-card.cjs");require("./components-ui-checkbox-checkbox.cjs");const N=require("./hooks-usePopupControls.cjs");require("./calendar-PqChui7l.cjs");require("phosphor-strokes-icons/icons");require("./components-ui-combobox-combobox.cjs");require("./components-ui-dialog-dialog.cjs");const c=require("react");require("./components-ui-label-label.cjs");require("./components-ui-separator-separator.cjs");require("./components-ui-field-field.styles.cjs");require("./components-ui-input-input.styles.cjs");require("./components-ui-textarea-textarea.cjs");require("./components-ui-input-group-input-group.styles.cjs");require("./components-ui-navigation-item-navigation-item.styles.cjs");require("./components-ui-navigation-menu-navigation-menu.styles.cjs");require("./components-ui-pagination-pagination.cjs");require("./components-ui-progress-progress.cjs");require("./components-ui-radio-group-radio-group.cjs");require("./components-ui-switch-switch.cjs");require("./components-ui-toggle-toggle.styles.cjs");require("./components-ui-toggle-group-toggle-group.cjs");require("./components-ui-table-table.cjs");require("./components-ui-tabs-tabs.cjs");require("./components-ui-tooltip-tooltip.cjs");require("./components-ui-typography-typography.styles.cjs");require("phosphor-strokes-icons/icons/CaretLeft");require("phosphor-strokes-icons/icons/CaretRight");require("./components-app-pagination-app-pagination.styles.cjs");require("phosphor-strokes-icons/icons/CaretUpDown");require("./components-app-sidebar-app-sidebar.styles.cjs");require("./components-data-table-data-table.styles.cjs");require("./components-ui-dropdown-menu-dropdown-menu.styles.cjs");const z=require("./components-input-field-input-field.cjs");require("phosphor-strokes-icons/icons/Eye");require("phosphor-strokes-icons/icons/EyeSlash");require("./components-select-field-select-field.cjs");require("./lodash-kqhtUJfz.cjs");require("./chart-9H_9wEfR.cjs");require("phosphor-strokes-icons/icons/CheckCircle");require("phosphor-strokes-icons/icons/Info");require("phosphor-strokes-icons/icons/SpinnerGap");require("phosphor-strokes-icons/icons/Warning");require("phosphor-strokes-icons/icons/X");require("phosphor-strokes-icons/icons/XCircle");require("./index-DGxwh2Ms.cjs");require("./index-fTTv8YY8.cjs");require("phosphor-strokes-icons/icons/Plus");const D=require("./components-input-phone-input-phone.cjs")
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./brd-ui-kit.css');const r=require("react/jsx-runtime"),j=require("phosphor-strokes-icons/icons/CaretDown"),y=require("phosphor-strokes-icons/icons/CaretUp"),_=require("phosphor-strokes-icons/icons/EnvelopeSimple"),k=require("phosphor-strokes-icons/icons/MaxLogo"),S=require("phosphor-strokes-icons/icons/Phone"),i=require("./components-icons-stroke-icon.cjs"),T=require("phosphor-strokes-icons/icons/TelegramLogo"),L=require("phosphor-strokes-icons/icons/WhatsAppLogoFilled");;/* empty css */const C=require("./lib-utils.cjs");require("class-variance-authority");require("./components-ui-badge-badge.styles.cjs");const F=require("./components-ui-button-button.cjs");require("./components-ui-button-button.styles.cjs");require("./components-ui-card-card.cjs");require("./components-ui-checkbox-checkbox.cjs");const N=require("./hooks-usePopupControls.cjs");require("./calendar-PqChui7l.cjs");require("phosphor-strokes-icons/icons");require("./components-ui-combobox-combobox.cjs");require("./components-ui-dialog-dialog.cjs");const c=require("react");require("./components-ui-label-label.cjs");require("./components-ui-separator-separator.cjs");require("./components-ui-field-field.styles.cjs");require("./components-ui-input-input.styles.cjs");require("./components-ui-textarea-textarea.cjs");require("./components-ui-input-group-input-group.styles.cjs");require("./components-ui-navigation-item-navigation-item.styles.cjs");require("./components-ui-navigation-menu-navigation-menu.styles.cjs");require("./components-ui-pagination-pagination.cjs");require("./components-ui-progress-progress.cjs");require("./components-ui-radio-group-radio-group.cjs");require("./components-ui-switch-switch.cjs");require("./components-ui-toggle-toggle.styles.cjs");require("./components-ui-toggle-group-toggle-group.cjs");require("./components-ui-table-table.cjs");require("./components-ui-tabs-tabs.cjs");require("./components-ui-tooltip-tooltip.cjs");require("./components-ui-typography-typography.styles.cjs");require("phosphor-strokes-icons/icons/CaretLeft");require("phosphor-strokes-icons/icons/CaretRight");require("./components-app-pagination-app-pagination.styles.cjs");require("phosphor-strokes-icons/icons/CaretUpDown");require("./components-app-sidebar-app-sidebar.styles.cjs");require("./components-data-table-data-table.styles.cjs");require("./components-ui-dropdown-menu-dropdown-menu.styles.cjs");const z=require("./components-input-field-input-field.cjs");require("phosphor-strokes-icons/icons/Eye");require("phosphor-strokes-icons/icons/EyeSlash");require("./components-select-field-select-field.cjs");require("./lodash-kqhtUJfz.cjs");require("./chart-9H_9wEfR.cjs");require("phosphor-strokes-icons/icons/CheckCircle");require("phosphor-strokes-icons/icons/Info");require("phosphor-strokes-icons/icons/SpinnerGap");require("phosphor-strokes-icons/icons/Warning");require("phosphor-strokes-icons/icons/X");require("phosphor-strokes-icons/icons/XCircle");require("./index-DGxwh2Ms.cjs");require("./index-fTTv8YY8.cjs");require("phosphor-strokes-icons/icons/Plus");const D=require("./components-input-phone-input-phone.cjs");require("./components-card-info-card-info.styles.cjs");const E=[{label:"Мобильный",icon:"phone"},{label:"Telegram",icon:"telegram-logo"},{label:"WhatsApp",icon:"whats-app-logo-filled"},{label:"Max",icon:"max-logo"},{label:"E-mail",icon:"envelope-simple"}],h={phone:S.Phone,"telegram-logo":T.TelegramLogo,"whats-app-logo-filled":L.WhatsAppLogoFilled,"max-logo":k.MaxLogo,"envelope-simple":_.EnvelopeSimple},x=o=>{switch(o){case"max-logo":return{bgColor:"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]"};case"telegram-logo":return{bgColor:"bg-[#289AD2]"};case"whats-app-logo-filled":return{bgColor:"bg-[#00C202]",textColor:"text-[#00C202]"};default:return{}}},a=o=>({wrapper:C.cn(`flex h-5.5 w-5.5 shrink-0 items-center justify-center rounded-sm
|
|
2
2
|
${x(o).bgColor??"bg-primary-inverse-hover-bg"}
|
|
3
3
|
${x(o).textColor??"text-primary-inverse-text"}`),icon:"size-5 shrink-0"}),O=o=>{const{inputProps:b,inputPhoneProps:f,onTypeChange:v,...p}=o,[n,I]=c.useState("phone"),{isOpened:s,openPopup:q,closePopup:u}=N.usePopupControls(),l=c.useRef(null);c.useEffect(()=>{const e=t=>{l.current&&!l.current.contains(t.target)&&u()};return s&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[s,u]);const m=e=>{switch(e){case"phone":return"+7 (999) 999-99-99";case"telegram-logo":return"@username";case"whats-app-logo-filled":return"+7 (999) 999-99-99";case"max-logo":return"ID пользователя Max";case"envelope-simple":return"example@mail.com";default:return"Введите значение"}},w=e=>()=>{I(e),v?.(e),u()},d=h[n],g=s?y.CaretUp:j.CaretDown;return r.jsxs("div",{className:C.cn("relative",o.classes?.container),children:[["telegram-logo","max-logo","envelope-simple"].includes(n)?r.jsx(z.InputField,{...b,...p,date:[{id:"0",position:"inline-start",component:r.jsx(i.StrokeIcon,{icon:d,size:"medium",classes:a(n)})},{id:"1",position:"inline-end",component:r.jsx(i.StrokeIcon,{icon:g,size:"medium",className:"cursor-pointer",onClick:q})}],placeholder:m(n)}):r.jsx(D.InputPhone,{...f,...p,date:[{id:"0",position:"inline-start",component:r.jsx(i.StrokeIcon,{icon:d,size:"medium",classes:a(n)})},{id:"1",position:"inline-end",component:r.jsx(i.StrokeIcon,{icon:g,size:"medium",className:"cursor-pointer",onClick:q})}],placeholder:m(n)}),s&&r.jsx("div",{className:`border-inp-hover-border bg-primary-bg absolute my-2 flex w-full
|
|
4
4
|
flex-col rounded-xl border`,ref:l,children:E.map(({label:e,icon:t})=>{const P=h[t];return r.jsxs(F.Button,{variant:"ghost",className:"flex w-full justify-start",type:"button",onClick:w(t),children:[r.jsx(i.StrokeIcon,{icon:P,size:"medium",className:"text-primary-inverse-text",classes:a(t)}),e]},e)})})]})};exports.InputContact=O;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components-input-contact-input-contact.cjs","sources":["../src/constants/contact-input.ts","../src/components/input-contact/input-contact.tsx"],"sourcesContent":["import type { TOption } from \"@/components/input-contact/input-contact\";\n\nexport const OPTIONS: TOption[] = [\n {\n label: \"Мобильный\",\n icon: \"phone\",\n },\n {\n label: \"Telegram\",\n icon: \"telegram-logo\",\n },\n {\n label: \"WhatsApp\",\n icon: \"whats-app-logo-filled\",\n },\n {\n label: \"Max\",\n icon: \"max-logo\",\n },\n {\n label: \"E-mail\",\n icon: \"envelope-simple\",\n },\n];\n","import { OPTIONS } from \"@/constants/contact-input\";\nimport { CaretDown } from \"@/components/icons/CaretDown\";\nimport { CaretUp } from \"@/components/icons/CaretUp\";\nimport { EnvelopeSimple } from \"@/components/icons/EnvelopeSimple\";\nimport { MaxLogo } from \"@/components/icons/MaxLogo\";\nimport { Phone } from \"@/components/icons/Phone\";\nimport { StrokeIcon, type StrokeIconComponent } from \"@/components/icons/stroke-icon\";\nimport { TelegramLogo } from \"@/components/icons/TelegramLogo\";\nimport { WhatsAppLogoFilled } from \"@/components/icons/WhatsAppLogoFilled\";\nimport {\n Button,\n InputField,\n InputPhone,\n cn,\n usePopupControls,\n type InputPhoneProps,\n} from \"@/index\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TOption = {\n label: string;\n icon: TypesChange;\n};\n\ntype TypesChange =\n | \"phone\"\n | \"telegram-logo\"\n | \"whats-app-logo-filled\"\n | \"max-logo\"\n | \"envelope-simple\";\n\nconst contactIcons: Record<TypesChange, StrokeIconComponent> = {\n phone: Phone,\n \"telegram-logo\": TelegramLogo,\n \"whats-app-logo-filled\": WhatsAppLogoFilled,\n \"max-logo\": MaxLogo,\n \"envelope-simple\": EnvelopeSimple,\n};\n\ntype Props = {\n isValid?: boolean;\n label?: string;\n description?: string;\n classes?: {\n fieldset?: string;\n fieldgroup?: string;\n field?: string;\n container?: string;\n };\n value?: string;\n name?: string;\n onTypeChange?: (type: TypesChange) => void;\n inputProps: React.ComponentPropsWithRef<\"input\">;\n inputPhoneProps: InputPhoneProps;\n};\n\n// TODO: заменить цвета\nconst iconStyles = (icon: TypesChange) => {\n switch (icon) {\n case \"max-logo\":\n return {\n bgColor: \"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]\",\n };\n\n case \"telegram-logo\":\n return {\n bgColor: \"bg-[#289AD2]\",\n };\n\n case \"whats-app-logo-filled\":\n return {\n bgColor: \"bg-[#00C202]\",\n textColor: \"text-[#00C202]\",\n };\n\n default:\n return {};\n }\n};\n\nconst getContactIconClasses = (icon: TypesChange) => ({\n wrapper: cn(\n `flex h-5.5 w-5.5 shrink-0 items-center justify-center rounded-sm\n ${iconStyles(icon).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${iconStyles(icon).textColor ?? \"text-primary-inverse-text\"}`,\n ),\n icon: \"size-5 shrink-0\",\n});\n\nexport const InputContact = (props: Props) => {\n const { inputProps, inputPhoneProps, onTypeChange, ...rest } = props;\n\n const [type, setType] = useState<TypesChange>(\"phone\");\n const { isOpened, openPopup, closePopup } = usePopupControls();\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n closePopup();\n }\n };\n\n if (isOpened) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpened, closePopup]);\n\n const getPlaceholder = (type: TypesChange): string => {\n switch (type) {\n case \"phone\":\n return \"+7 (999) 999-99-99\";\n case \"telegram-logo\":\n return \"@username\";\n case \"whats-app-logo-filled\":\n return \"+7 (999) 999-99-99\";\n case \"max-logo\":\n return \"ID пользователя Max\";\n case \"envelope-simple\":\n return \"example@mail.com\";\n default:\n return \"Введите значение\";\n }\n };\n\n const handleTypeChange = (type: TypesChange) => {\n return () => {\n setType(type);\n onTypeChange?.(type);\n closePopup();\n };\n };\n\n const SelectedIcon = contactIcons[type];\n const ToggleIcon = isOpened ? CaretUp : CaretDown;\n\n return (\n <div className={cn(\"relative\", props.classes?.container)}>\n {[\"telegram-logo\", \"max-logo\", \"envelope-simple\"].includes(type) ? (\n <InputField\n {...inputProps}\n {...rest}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <StrokeIcon\n icon={SelectedIcon}\n size=\"medium\"\n classes={getContactIconClasses(type)}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <StrokeIcon\n icon={ToggleIcon}\n size=\"medium\"\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n ) : (\n <InputPhone\n {...inputPhoneProps}\n {...rest}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <StrokeIcon\n icon={SelectedIcon}\n size=\"medium\"\n classes={getContactIconClasses(type)}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <StrokeIcon\n icon={ToggleIcon}\n size=\"medium\"\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n )}\n\n {isOpened && (\n <div\n className=\"border-inp-hover-border bg-primary-bg absolute my-2 flex w-full\n flex-col rounded-xl border\"\n ref={wrapperRef}\n >\n {OPTIONS.map(({ label, icon }) => {\n const OptionIcon = contactIcons[icon];\n\n return (\n <Button\n key={label}\n variant=\"ghost\"\n className=\"flex w-full justify-start\"\n type=\"button\"\n onClick={handleTypeChange(icon)}\n >\n <StrokeIcon\n icon={OptionIcon}\n size=\"medium\"\n className=\"text-primary-inverse-text\"\n classes={getContactIconClasses(icon)}\n />\n\n {label}\n </Button>\n );\n })}\n </div>\n )}\n </div>\n );\n};\n\nexport type { Props as InputContactProps, TypesChange };\n"],"names":["OPTIONS","contactIcons","Phone","TelegramLogo","WhatsAppLogoFilled","MaxLogo","EnvelopeSimple","iconStyles","icon","getContactIconClasses","cn","InputContact","props","inputProps","inputPhoneProps","onTypeChange","rest","type","setType","useState","isOpened","openPopup","closePopup","usePopupControls","wrapperRef","useRef","useEffect","handleClickOutside","event","getPlaceholder","handleTypeChange","SelectedIcon","ToggleIcon","CaretUp","CaretDown","jsxs","jsx","InputField","StrokeIcon","InputPhone","label","OptionIcon","Button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"components-input-contact-input-contact.cjs","sources":["../src/constants/contact-input.ts","../src/components/input-contact/input-contact.tsx"],"sourcesContent":["import type { TOption } from \"@/components/input-contact/input-contact\";\n\nexport const OPTIONS: TOption[] = [\n {\n label: \"Мобильный\",\n icon: \"phone\",\n },\n {\n label: \"Telegram\",\n icon: \"telegram-logo\",\n },\n {\n label: \"WhatsApp\",\n icon: \"whats-app-logo-filled\",\n },\n {\n label: \"Max\",\n icon: \"max-logo\",\n },\n {\n label: \"E-mail\",\n icon: \"envelope-simple\",\n },\n];\n","import { OPTIONS } from \"@/constants/contact-input\";\nimport { CaretDown } from \"@/components/icons/CaretDown\";\nimport { CaretUp } from \"@/components/icons/CaretUp\";\nimport { EnvelopeSimple } from \"@/components/icons/EnvelopeSimple\";\nimport { MaxLogo } from \"@/components/icons/MaxLogo\";\nimport { Phone } from \"@/components/icons/Phone\";\nimport { StrokeIcon, type StrokeIconComponent } from \"@/components/icons/stroke-icon\";\nimport { TelegramLogo } from \"@/components/icons/TelegramLogo\";\nimport { WhatsAppLogoFilled } from \"@/components/icons/WhatsAppLogoFilled\";\nimport {\n Button,\n InputField,\n InputPhone,\n cn,\n usePopupControls,\n type InputPhoneProps,\n} from \"@/index\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TOption = {\n label: string;\n icon: TypesChange;\n};\n\ntype TypesChange =\n | \"phone\"\n | \"telegram-logo\"\n | \"whats-app-logo-filled\"\n | \"max-logo\"\n | \"envelope-simple\";\n\nconst contactIcons: Record<TypesChange, StrokeIconComponent> = {\n phone: Phone,\n \"telegram-logo\": TelegramLogo,\n \"whats-app-logo-filled\": WhatsAppLogoFilled,\n \"max-logo\": MaxLogo,\n \"envelope-simple\": EnvelopeSimple,\n};\n\ntype Props = {\n isValid?: boolean;\n label?: string;\n description?: string;\n classes?: {\n fieldset?: string;\n fieldgroup?: string;\n field?: string;\n container?: string;\n };\n value?: string;\n name?: string;\n onTypeChange?: (type: TypesChange) => void;\n inputProps: React.ComponentPropsWithRef<\"input\">;\n inputPhoneProps: InputPhoneProps;\n};\n\n// TODO: заменить цвета\nconst iconStyles = (icon: TypesChange) => {\n switch (icon) {\n case \"max-logo\":\n return {\n bgColor: \"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]\",\n };\n\n case \"telegram-logo\":\n return {\n bgColor: \"bg-[#289AD2]\",\n };\n\n case \"whats-app-logo-filled\":\n return {\n bgColor: \"bg-[#00C202]\",\n textColor: \"text-[#00C202]\",\n };\n\n default:\n return {};\n }\n};\n\nconst getContactIconClasses = (icon: TypesChange) => ({\n wrapper: cn(\n `flex h-5.5 w-5.5 shrink-0 items-center justify-center rounded-sm\n ${iconStyles(icon).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${iconStyles(icon).textColor ?? \"text-primary-inverse-text\"}`,\n ),\n icon: \"size-5 shrink-0\",\n});\n\nexport const InputContact = (props: Props) => {\n const { inputProps, inputPhoneProps, onTypeChange, ...rest } = props;\n\n const [type, setType] = useState<TypesChange>(\"phone\");\n const { isOpened, openPopup, closePopup } = usePopupControls();\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n closePopup();\n }\n };\n\n if (isOpened) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpened, closePopup]);\n\n const getPlaceholder = (type: TypesChange): string => {\n switch (type) {\n case \"phone\":\n return \"+7 (999) 999-99-99\";\n case \"telegram-logo\":\n return \"@username\";\n case \"whats-app-logo-filled\":\n return \"+7 (999) 999-99-99\";\n case \"max-logo\":\n return \"ID пользователя Max\";\n case \"envelope-simple\":\n return \"example@mail.com\";\n default:\n return \"Введите значение\";\n }\n };\n\n const handleTypeChange = (type: TypesChange) => {\n return () => {\n setType(type);\n onTypeChange?.(type);\n closePopup();\n };\n };\n\n const SelectedIcon = contactIcons[type];\n const ToggleIcon = isOpened ? CaretUp : CaretDown;\n\n return (\n <div className={cn(\"relative\", props.classes?.container)}>\n {[\"telegram-logo\", \"max-logo\", \"envelope-simple\"].includes(type) ? (\n <InputField\n {...inputProps}\n {...rest}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <StrokeIcon\n icon={SelectedIcon}\n size=\"medium\"\n classes={getContactIconClasses(type)}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <StrokeIcon\n icon={ToggleIcon}\n size=\"medium\"\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n ) : (\n <InputPhone\n {...inputPhoneProps}\n {...rest}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <StrokeIcon\n icon={SelectedIcon}\n size=\"medium\"\n classes={getContactIconClasses(type)}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <StrokeIcon\n icon={ToggleIcon}\n size=\"medium\"\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n )}\n\n {isOpened && (\n <div\n className=\"border-inp-hover-border bg-primary-bg absolute my-2 flex w-full\n flex-col rounded-xl border\"\n ref={wrapperRef}\n >\n {OPTIONS.map(({ label, icon }) => {\n const OptionIcon = contactIcons[icon];\n\n return (\n <Button\n key={label}\n variant=\"ghost\"\n className=\"flex w-full justify-start\"\n type=\"button\"\n onClick={handleTypeChange(icon)}\n >\n <StrokeIcon\n icon={OptionIcon}\n size=\"medium\"\n className=\"text-primary-inverse-text\"\n classes={getContactIconClasses(icon)}\n />\n\n {label}\n </Button>\n );\n })}\n </div>\n )}\n </div>\n );\n};\n\nexport type { Props as InputContactProps, TypesChange };\n"],"names":["OPTIONS","contactIcons","Phone","TelegramLogo","WhatsAppLogoFilled","MaxLogo","EnvelopeSimple","iconStyles","icon","getContactIconClasses","cn","InputContact","props","inputProps","inputPhoneProps","onTypeChange","rest","type","setType","useState","isOpened","openPopup","closePopup","usePopupControls","wrapperRef","useRef","useEffect","handleClickOutside","event","getPlaceholder","handleTypeChange","SelectedIcon","ToggleIcon","CaretUp","CaretDown","jsxs","jsx","InputField","StrokeIcon","InputPhone","label","OptionIcon","Button"],"mappings":"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"}
|
|
@@ -62,6 +62,7 @@ import "./index-C4iHL8Gs.js";
|
|
|
62
62
|
import "./index-C6N9aMq_.js";
|
|
63
63
|
import "phosphor-strokes-icons/icons/Plus";
|
|
64
64
|
import { InputPhone as _ } from "./components-input-phone-input-phone.js";
|
|
65
|
+
import "./components-card-info-card-info.styles.js";
|
|
65
66
|
const B = [
|
|
66
67
|
{
|
|
67
68
|
label: "Мобильный",
|
|
@@ -114,7 +115,7 @@ const B = [
|
|
|
114
115
|
${x(t).textColor ?? "text-primary-inverse-text"}`
|
|
115
116
|
),
|
|
116
117
|
icon: "size-5 shrink-0"
|
|
117
|
-
}),
|
|
118
|
+
}), Yo = (t) => {
|
|
118
119
|
const { inputProps: b, inputPhoneProps: v, onTypeChange: w, ...a } = t, [r, y] = j("phone"), { isOpened: m, openPopup: c, closePopup: p } = O(), l = F(null);
|
|
119
120
|
A(() => {
|
|
120
121
|
const o = (i) => {
|
|
@@ -248,6 +249,6 @@ const B = [
|
|
|
248
249
|
] });
|
|
249
250
|
};
|
|
250
251
|
export {
|
|
251
|
-
|
|
252
|
+
Yo as InputContact
|
|
252
253
|
};
|
|
253
254
|
//# sourceMappingURL=components-input-contact-input-contact.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components-input-contact-input-contact.js","sources":["../src/constants/contact-input.ts","../src/components/input-contact/input-contact.tsx"],"sourcesContent":["import type { TOption } from \"@/components/input-contact/input-contact\";\n\nexport const OPTIONS: TOption[] = [\n {\n label: \"Мобильный\",\n icon: \"phone\",\n },\n {\n label: \"Telegram\",\n icon: \"telegram-logo\",\n },\n {\n label: \"WhatsApp\",\n icon: \"whats-app-logo-filled\",\n },\n {\n label: \"Max\",\n icon: \"max-logo\",\n },\n {\n label: \"E-mail\",\n icon: \"envelope-simple\",\n },\n];\n","import { OPTIONS } from \"@/constants/contact-input\";\nimport { CaretDown } from \"@/components/icons/CaretDown\";\nimport { CaretUp } from \"@/components/icons/CaretUp\";\nimport { EnvelopeSimple } from \"@/components/icons/EnvelopeSimple\";\nimport { MaxLogo } from \"@/components/icons/MaxLogo\";\nimport { Phone } from \"@/components/icons/Phone\";\nimport { StrokeIcon, type StrokeIconComponent } from \"@/components/icons/stroke-icon\";\nimport { TelegramLogo } from \"@/components/icons/TelegramLogo\";\nimport { WhatsAppLogoFilled } from \"@/components/icons/WhatsAppLogoFilled\";\nimport {\n Button,\n InputField,\n InputPhone,\n cn,\n usePopupControls,\n type InputPhoneProps,\n} from \"@/index\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TOption = {\n label: string;\n icon: TypesChange;\n};\n\ntype TypesChange =\n | \"phone\"\n | \"telegram-logo\"\n | \"whats-app-logo-filled\"\n | \"max-logo\"\n | \"envelope-simple\";\n\nconst contactIcons: Record<TypesChange, StrokeIconComponent> = {\n phone: Phone,\n \"telegram-logo\": TelegramLogo,\n \"whats-app-logo-filled\": WhatsAppLogoFilled,\n \"max-logo\": MaxLogo,\n \"envelope-simple\": EnvelopeSimple,\n};\n\ntype Props = {\n isValid?: boolean;\n label?: string;\n description?: string;\n classes?: {\n fieldset?: string;\n fieldgroup?: string;\n field?: string;\n container?: string;\n };\n value?: string;\n name?: string;\n onTypeChange?: (type: TypesChange) => void;\n inputProps: React.ComponentPropsWithRef<\"input\">;\n inputPhoneProps: InputPhoneProps;\n};\n\n// TODO: заменить цвета\nconst iconStyles = (icon: TypesChange) => {\n switch (icon) {\n case \"max-logo\":\n return {\n bgColor: \"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]\",\n };\n\n case \"telegram-logo\":\n return {\n bgColor: \"bg-[#289AD2]\",\n };\n\n case \"whats-app-logo-filled\":\n return {\n bgColor: \"bg-[#00C202]\",\n textColor: \"text-[#00C202]\",\n };\n\n default:\n return {};\n }\n};\n\nconst getContactIconClasses = (icon: TypesChange) => ({\n wrapper: cn(\n `flex h-5.5 w-5.5 shrink-0 items-center justify-center rounded-sm\n ${iconStyles(icon).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${iconStyles(icon).textColor ?? \"text-primary-inverse-text\"}`,\n ),\n icon: \"size-5 shrink-0\",\n});\n\nexport const InputContact = (props: Props) => {\n const { inputProps, inputPhoneProps, onTypeChange, ...rest } = props;\n\n const [type, setType] = useState<TypesChange>(\"phone\");\n const { isOpened, openPopup, closePopup } = usePopupControls();\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n closePopup();\n }\n };\n\n if (isOpened) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpened, closePopup]);\n\n const getPlaceholder = (type: TypesChange): string => {\n switch (type) {\n case \"phone\":\n return \"+7 (999) 999-99-99\";\n case \"telegram-logo\":\n return \"@username\";\n case \"whats-app-logo-filled\":\n return \"+7 (999) 999-99-99\";\n case \"max-logo\":\n return \"ID пользователя Max\";\n case \"envelope-simple\":\n return \"example@mail.com\";\n default:\n return \"Введите значение\";\n }\n };\n\n const handleTypeChange = (type: TypesChange) => {\n return () => {\n setType(type);\n onTypeChange?.(type);\n closePopup();\n };\n };\n\n const SelectedIcon = contactIcons[type];\n const ToggleIcon = isOpened ? CaretUp : CaretDown;\n\n return (\n <div className={cn(\"relative\", props.classes?.container)}>\n {[\"telegram-logo\", \"max-logo\", \"envelope-simple\"].includes(type) ? (\n <InputField\n {...inputProps}\n {...rest}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <StrokeIcon\n icon={SelectedIcon}\n size=\"medium\"\n classes={getContactIconClasses(type)}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <StrokeIcon\n icon={ToggleIcon}\n size=\"medium\"\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n ) : (\n <InputPhone\n {...inputPhoneProps}\n {...rest}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <StrokeIcon\n icon={SelectedIcon}\n size=\"medium\"\n classes={getContactIconClasses(type)}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <StrokeIcon\n icon={ToggleIcon}\n size=\"medium\"\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n )}\n\n {isOpened && (\n <div\n className=\"border-inp-hover-border bg-primary-bg absolute my-2 flex w-full\n flex-col rounded-xl border\"\n ref={wrapperRef}\n >\n {OPTIONS.map(({ label, icon }) => {\n const OptionIcon = contactIcons[icon];\n\n return (\n <Button\n key={label}\n variant=\"ghost\"\n className=\"flex w-full justify-start\"\n type=\"button\"\n onClick={handleTypeChange(icon)}\n >\n <StrokeIcon\n icon={OptionIcon}\n size=\"medium\"\n className=\"text-primary-inverse-text\"\n classes={getContactIconClasses(icon)}\n />\n\n {label}\n </Button>\n );\n })}\n </div>\n )}\n </div>\n );\n};\n\nexport type { Props as InputContactProps, TypesChange };\n"],"names":["OPTIONS","contactIcons","Phone","TelegramLogo","WhatsAppLogoFilled","MaxLogo","EnvelopeSimple","iconStyles","icon","getContactIconClasses","cn","InputContact","props","inputProps","inputPhoneProps","onTypeChange","rest","type","setType","useState","isOpened","openPopup","closePopup","usePopupControls","wrapperRef","useRef","useEffect","handleClickOutside","event","getPlaceholder","handleTypeChange","SelectedIcon","ToggleIcon","CaretUp","CaretDown","jsxs","jsx","InputField","StrokeIcon","InputPhone","label","OptionIcon","Button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"components-input-contact-input-contact.js","sources":["../src/constants/contact-input.ts","../src/components/input-contact/input-contact.tsx"],"sourcesContent":["import type { TOption } from \"@/components/input-contact/input-contact\";\n\nexport const OPTIONS: TOption[] = [\n {\n label: \"Мобильный\",\n icon: \"phone\",\n },\n {\n label: \"Telegram\",\n icon: \"telegram-logo\",\n },\n {\n label: \"WhatsApp\",\n icon: \"whats-app-logo-filled\",\n },\n {\n label: \"Max\",\n icon: \"max-logo\",\n },\n {\n label: \"E-mail\",\n icon: \"envelope-simple\",\n },\n];\n","import { OPTIONS } from \"@/constants/contact-input\";\nimport { CaretDown } from \"@/components/icons/CaretDown\";\nimport { CaretUp } from \"@/components/icons/CaretUp\";\nimport { EnvelopeSimple } from \"@/components/icons/EnvelopeSimple\";\nimport { MaxLogo } from \"@/components/icons/MaxLogo\";\nimport { Phone } from \"@/components/icons/Phone\";\nimport { StrokeIcon, type StrokeIconComponent } from \"@/components/icons/stroke-icon\";\nimport { TelegramLogo } from \"@/components/icons/TelegramLogo\";\nimport { WhatsAppLogoFilled } from \"@/components/icons/WhatsAppLogoFilled\";\nimport {\n Button,\n InputField,\n InputPhone,\n cn,\n usePopupControls,\n type InputPhoneProps,\n} from \"@/index\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport type TOption = {\n label: string;\n icon: TypesChange;\n};\n\ntype TypesChange =\n | \"phone\"\n | \"telegram-logo\"\n | \"whats-app-logo-filled\"\n | \"max-logo\"\n | \"envelope-simple\";\n\nconst contactIcons: Record<TypesChange, StrokeIconComponent> = {\n phone: Phone,\n \"telegram-logo\": TelegramLogo,\n \"whats-app-logo-filled\": WhatsAppLogoFilled,\n \"max-logo\": MaxLogo,\n \"envelope-simple\": EnvelopeSimple,\n};\n\ntype Props = {\n isValid?: boolean;\n label?: string;\n description?: string;\n classes?: {\n fieldset?: string;\n fieldgroup?: string;\n field?: string;\n container?: string;\n };\n value?: string;\n name?: string;\n onTypeChange?: (type: TypesChange) => void;\n inputProps: React.ComponentPropsWithRef<\"input\">;\n inputPhoneProps: InputPhoneProps;\n};\n\n// TODO: заменить цвета\nconst iconStyles = (icon: TypesChange) => {\n switch (icon) {\n case \"max-logo\":\n return {\n bgColor: \"bg-[linear-gradient(135deg,#9933DD_0%,#2831B9_50%,#44CCFF_100%)]\",\n };\n\n case \"telegram-logo\":\n return {\n bgColor: \"bg-[#289AD2]\",\n };\n\n case \"whats-app-logo-filled\":\n return {\n bgColor: \"bg-[#00C202]\",\n textColor: \"text-[#00C202]\",\n };\n\n default:\n return {};\n }\n};\n\nconst getContactIconClasses = (icon: TypesChange) => ({\n wrapper: cn(\n `flex h-5.5 w-5.5 shrink-0 items-center justify-center rounded-sm\n ${iconStyles(icon).bgColor ?? \"bg-primary-inverse-hover-bg\"}\n ${iconStyles(icon).textColor ?? \"text-primary-inverse-text\"}`,\n ),\n icon: \"size-5 shrink-0\",\n});\n\nexport const InputContact = (props: Props) => {\n const { inputProps, inputPhoneProps, onTypeChange, ...rest } = props;\n\n const [type, setType] = useState<TypesChange>(\"phone\");\n const { isOpened, openPopup, closePopup } = usePopupControls();\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n closePopup();\n }\n };\n\n if (isOpened) {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }\n\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpened, closePopup]);\n\n const getPlaceholder = (type: TypesChange): string => {\n switch (type) {\n case \"phone\":\n return \"+7 (999) 999-99-99\";\n case \"telegram-logo\":\n return \"@username\";\n case \"whats-app-logo-filled\":\n return \"+7 (999) 999-99-99\";\n case \"max-logo\":\n return \"ID пользователя Max\";\n case \"envelope-simple\":\n return \"example@mail.com\";\n default:\n return \"Введите значение\";\n }\n };\n\n const handleTypeChange = (type: TypesChange) => {\n return () => {\n setType(type);\n onTypeChange?.(type);\n closePopup();\n };\n };\n\n const SelectedIcon = contactIcons[type];\n const ToggleIcon = isOpened ? CaretUp : CaretDown;\n\n return (\n <div className={cn(\"relative\", props.classes?.container)}>\n {[\"telegram-logo\", \"max-logo\", \"envelope-simple\"].includes(type) ? (\n <InputField\n {...inputProps}\n {...rest}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <StrokeIcon\n icon={SelectedIcon}\n size=\"medium\"\n classes={getContactIconClasses(type)}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <StrokeIcon\n icon={ToggleIcon}\n size=\"medium\"\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n ) : (\n <InputPhone\n {...inputPhoneProps}\n {...rest}\n date={[\n {\n id: \"0\",\n position: \"inline-start\",\n component: (\n <StrokeIcon\n icon={SelectedIcon}\n size=\"medium\"\n classes={getContactIconClasses(type)}\n />\n ),\n },\n {\n id: \"1\",\n position: \"inline-end\",\n component: (\n <StrokeIcon\n icon={ToggleIcon}\n size=\"medium\"\n className=\"cursor-pointer\"\n onClick={openPopup}\n />\n ),\n },\n ]}\n placeholder={getPlaceholder(type)}\n />\n )}\n\n {isOpened && (\n <div\n className=\"border-inp-hover-border bg-primary-bg absolute my-2 flex w-full\n flex-col rounded-xl border\"\n ref={wrapperRef}\n >\n {OPTIONS.map(({ label, icon }) => {\n const OptionIcon = contactIcons[icon];\n\n return (\n <Button\n key={label}\n variant=\"ghost\"\n className=\"flex w-full justify-start\"\n type=\"button\"\n onClick={handleTypeChange(icon)}\n >\n <StrokeIcon\n icon={OptionIcon}\n size=\"medium\"\n className=\"text-primary-inverse-text\"\n classes={getContactIconClasses(icon)}\n />\n\n {label}\n </Button>\n );\n })}\n </div>\n )}\n </div>\n );\n};\n\nexport type { Props as InputContactProps, TypesChange };\n"],"names":["OPTIONS","contactIcons","Phone","TelegramLogo","WhatsAppLogoFilled","MaxLogo","EnvelopeSimple","iconStyles","icon","getContactIconClasses","cn","InputContact","props","inputProps","inputPhoneProps","onTypeChange","rest","type","setType","useState","isOpened","openPopup","closePopup","usePopupControls","wrapperRef","useRef","useEffect","handleClickOutside","event","getPlaceholder","handleTypeChange","SelectedIcon","ToggleIcon","CaretUp","CaretDown","jsxs","jsx","InputField","StrokeIcon","InputPhone","label","OptionIcon","Button"],"mappings":"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"}
|