inconel 0.1.44 → 0.1.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/FileUpload/FileUpload.cjs +1 -1
- package/dist/cjs/components/FileUpload/FileUpload.cjs.map +1 -1
- package/dist/cjs/styles.css +1 -1
- package/dist/components/FileUpload/FileUpload.d.ts +8 -0
- package/dist/components/FileUpload/FileUpload.d.ts.map +1 -1
- package/dist/components/FileUpload/FileUpload.js +111 -61
- package/dist/components/FileUpload/FileUpload.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,75 +1,125 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import {
|
|
1
|
+
import { jsxs as s, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as C, useId as L, useRef as E, useState as P, useEffect as V } from "react";
|
|
3
|
+
import { getSelectedFileText as W } from "../DragDropUpload/utils.js";
|
|
4
|
+
import { classNames as o } from "../shared/classNames.js";
|
|
4
5
|
/* empty css */
|
|
5
|
-
import { useInconelAdapters as
|
|
6
|
-
|
|
6
|
+
import { useInconelAdapters as $ } from "../../adapters/context.js";
|
|
7
|
+
function q() {
|
|
8
|
+
return /* @__PURE__ */ s(
|
|
9
|
+
"svg",
|
|
10
|
+
{
|
|
11
|
+
className: "inconel-file-upload__icon",
|
|
12
|
+
width: "18",
|
|
13
|
+
height: "18",
|
|
14
|
+
viewBox: "0 0 24 24",
|
|
15
|
+
fill: "none",
|
|
16
|
+
stroke: "currentColor",
|
|
17
|
+
strokeWidth: "2",
|
|
18
|
+
strokeLinecap: "round",
|
|
19
|
+
strokeLinejoin: "round",
|
|
20
|
+
"aria-hidden": "true",
|
|
21
|
+
children: [
|
|
22
|
+
/* @__PURE__ */ l("path", { d: "M12 15V3" }),
|
|
23
|
+
/* @__PURE__ */ l("path", { d: "m7 8 5-5 5 5" }),
|
|
24
|
+
/* @__PURE__ */ l("path", { d: "M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4" })
|
|
25
|
+
]
|
|
26
|
+
}
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
const X = C(
|
|
7
30
|
function({
|
|
8
|
-
id:
|
|
9
|
-
label:
|
|
10
|
-
placeholder:
|
|
11
|
-
labelClassName:
|
|
12
|
-
inputClassName:
|
|
13
|
-
onChange:
|
|
14
|
-
onFilesChange:
|
|
15
|
-
errorMessage:
|
|
16
|
-
render:
|
|
17
|
-
className:
|
|
18
|
-
disabled:
|
|
19
|
-
accept:
|
|
20
|
-
multiple:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
31
|
+
id: h,
|
|
32
|
+
label: c,
|
|
33
|
+
placeholder: _,
|
|
34
|
+
labelClassName: v,
|
|
35
|
+
inputClassName: F,
|
|
36
|
+
onChange: x,
|
|
37
|
+
onFilesChange: N,
|
|
38
|
+
errorMessage: n,
|
|
39
|
+
render: y = !0,
|
|
40
|
+
className: g,
|
|
41
|
+
disabled: u,
|
|
42
|
+
accept: k = "*",
|
|
43
|
+
multiple: I = !1,
|
|
44
|
+
files: i,
|
|
45
|
+
icon: p,
|
|
46
|
+
noFileText: j,
|
|
47
|
+
showFileName: D = !0,
|
|
48
|
+
...R
|
|
49
|
+
}, t) {
|
|
50
|
+
const T = L(), f = $(), r = E(null), [b, w] = P([]), d = h ?? `inconel-file-upload-${T.replace(/:/g, "")}`, a = i ?? b;
|
|
51
|
+
if (V(() => {
|
|
52
|
+
i && i.length === 0 && r.current && (r.current.value = "");
|
|
53
|
+
}, [i]), !y) return null;
|
|
54
|
+
const B = (e) => {
|
|
55
|
+
r.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
|
|
56
|
+
}, S = _ ?? f.translate?.("selectFile", "Dosya seç") ?? "Dosya seç", U = j ?? f.translate?.("noFileSelected", "Dosya seçilmedi") ?? "Dosya seçilmedi", A = W(a, U);
|
|
57
|
+
return /* @__PURE__ */ s("div", { className: o("inconel-file-upload", g), children: [
|
|
58
|
+
c != null && /* @__PURE__ */ l(
|
|
26
59
|
"label",
|
|
27
60
|
{
|
|
28
|
-
className:
|
|
61
|
+
className: o(
|
|
29
62
|
"inconel-file-upload__label",
|
|
30
|
-
|
|
63
|
+
v
|
|
31
64
|
),
|
|
32
|
-
htmlFor:
|
|
33
|
-
children:
|
|
65
|
+
htmlFor: d,
|
|
66
|
+
children: c
|
|
34
67
|
}
|
|
35
68
|
),
|
|
36
|
-
/* @__PURE__ */
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
69
|
+
/* @__PURE__ */ s("div", { className: "inconel-file-upload__control", children: [
|
|
70
|
+
/* @__PURE__ */ l(
|
|
71
|
+
"input",
|
|
72
|
+
{
|
|
73
|
+
...R,
|
|
74
|
+
ref: B,
|
|
75
|
+
id: d,
|
|
76
|
+
type: "file",
|
|
77
|
+
className: o(
|
|
78
|
+
"inconel-file-upload__input",
|
|
79
|
+
!!n && "inconel-is-invalid",
|
|
80
|
+
F
|
|
81
|
+
),
|
|
82
|
+
accept: k,
|
|
83
|
+
multiple: I,
|
|
84
|
+
disabled: u,
|
|
85
|
+
onChange: (e) => {
|
|
86
|
+
const m = Array.from(e.target.files ?? []);
|
|
87
|
+
w(m), x?.(e), N?.(m);
|
|
88
|
+
}
|
|
53
89
|
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
90
|
+
),
|
|
91
|
+
/* @__PURE__ */ s(
|
|
92
|
+
"label",
|
|
93
|
+
{
|
|
94
|
+
className: o(
|
|
95
|
+
"inconel-file-upload__button",
|
|
96
|
+
u && "inconel-is-disabled",
|
|
97
|
+
!!n && "inconel-is-error"
|
|
98
|
+
),
|
|
99
|
+
htmlFor: d,
|
|
100
|
+
children: [
|
|
101
|
+
p === void 0 ? /* @__PURE__ */ l(q, {}) : p,
|
|
102
|
+
S
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
),
|
|
106
|
+
D && /* @__PURE__ */ l(
|
|
107
|
+
"span",
|
|
108
|
+
{
|
|
109
|
+
className: o(
|
|
110
|
+
"inconel-file-upload__file-name",
|
|
111
|
+
a.length > 0 && "inconel-has-file"
|
|
112
|
+
),
|
|
113
|
+
title: a.length > 0 ? a.map((e) => e.name).join(", ") : void 0,
|
|
114
|
+
children: A
|
|
115
|
+
}
|
|
116
|
+
)
|
|
117
|
+
] }),
|
|
118
|
+
n != null && /* @__PURE__ */ l("span", { className: "inconel-file-upload__error", role: "alert", children: n })
|
|
119
|
+
] });
|
|
70
120
|
}
|
|
71
121
|
);
|
|
72
122
|
export {
|
|
73
|
-
|
|
123
|
+
X as FileUpload
|
|
74
124
|
};
|
|
75
125
|
//# sourceMappingURL=FileUpload.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileUpload.js","sources":["../../../src/components/FileUpload/FileUpload.tsx"],"sourcesContent":["import {\n forwardRef,\n useId,\n type ChangeEventHandler,\n type InputHTMLAttributes,\n type ReactNode,\n} from 'react'\n\nimport { useInconelAdapters } from '../../adapters'\nimport { classNames } from '../shared/classNames'\nimport './styles.css'\n\nexport interface FileUploadProps\n extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'onChange' | 'id' | 'placeholder'\n > {\n id?: string | null\n label?: ReactNode\n placeholder?: ReactNode\n labelClassName?: string\n inputClassName?: string\n onChange?: ChangeEventHandler<HTMLInputElement>\n errorMessage?: ReactNode\n render?: boolean\n files?: File[]\n onFilesChange?: (files: File[]) => void\n}\n\nexport const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(\n function FileUpload(\n {\n id,\n label,\n placeholder,\n labelClassName,\n inputClassName,\n onChange,\n onFilesChange,\n errorMessage,\n render = true,\n className,\n disabled,\n accept = '*',\n multiple = false,\n ...props\n },\n ref,\n ) {\n const generatedId = useId()\n const adapters = useInconelAdapters()\n const inputId = id ?? `inconel-file-upload-${generatedId.replace(/:/g, '')}`\n\n if (!render) return null\n\n return (\n <div className={classNames('inconel-file-upload', className)}>\n {label !== null && label !== undefined && (\n <label\n className={classNames(\n 'inconel-file-upload__label',\n labelClassName,\n )}\n htmlFor={inputId}\n >\n {label}\n </label>\n )}\n <input\n
|
|
1
|
+
{"version":3,"file":"FileUpload.js","sources":["../../../src/components/FileUpload/FileUpload.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useId,\n useRef,\n useState,\n type ChangeEventHandler,\n type InputHTMLAttributes,\n type MutableRefObject,\n type ReactNode,\n} from 'react'\n\nimport { useInconelAdapters } from '../../adapters'\nimport { getSelectedFileText } from '../DragDropUpload/utils'\nimport { classNames } from '../shared/classNames'\nimport './styles.css'\n\nexport interface FileUploadProps\n extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'type' | 'onChange' | 'id' | 'placeholder'\n > {\n id?: string | null\n label?: ReactNode\n /** Düğmenin metni (varsayılan: \"Dosya seç\"). */\n placeholder?: ReactNode\n labelClassName?: string\n inputClassName?: string\n onChange?: ChangeEventHandler<HTMLInputElement>\n errorMessage?: ReactNode\n render?: boolean\n /** Verilirse seçili dosyalar dışarıdan yönetilir (kontrollü); boş dizi inputu da sıfırlar. */\n files?: File[]\n onFilesChange?: (files: File[]) => void\n /** Düğmedeki ikon. Varsayılan: yükleme ikonu. `null` verilirse ikon gösterilmez. */\n icon?: ReactNode\n /** Dosya seçilmediğinde düğmenin yanında gösterilen metin (varsayılan: \"Dosya seçilmedi\"). */\n noFileText?: ReactNode\n /** Düğmenin yanında seçilen dosya adı / \"Dosya seçilmedi\" metni gösterilsin mi. Varsayılan: true. */\n showFileName?: boolean\n}\n\nfunction UploadIcon() {\n return (\n <svg\n className=\"inconel-file-upload__icon\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n aria-hidden=\"true\"\n >\n <path d=\"M12 15V3\" />\n <path d=\"m7 8 5-5 5 5\" />\n <path d=\"M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4\" />\n </svg>\n )\n}\n\nexport const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(\n function FileUpload(\n {\n id,\n label,\n placeholder,\n labelClassName,\n inputClassName,\n onChange,\n onFilesChange,\n errorMessage,\n render = true,\n className,\n disabled,\n accept = '*',\n multiple = false,\n files,\n icon,\n noFileText,\n showFileName = true,\n ...props\n },\n ref,\n ) {\n const generatedId = useId()\n const adapters = useInconelAdapters()\n const inputRef = useRef<HTMLInputElement | null>(null)\n const [pickedFiles, setPickedFiles] = useState<File[]>([])\n const inputId = id ?? `inconel-file-upload-${generatedId.replace(/:/g, '')}`\n const selectedFiles = files ?? pickedFiles\n\n // Dışarıdan boş dizi verilince (ör. \"sil\" düğmesi) native input da sıfırlanır; yoksa aynı dosya tekrar seçilemez.\n useEffect(() => {\n if (files && files.length === 0 && inputRef.current) {\n inputRef.current.value = ''\n }\n }, [files])\n\n if (!render) return null\n\n const setRefs = (element: HTMLInputElement | null) => {\n inputRef.current = element\n if (typeof ref === 'function') ref(element)\n else if (ref)\n (ref as MutableRefObject<HTMLInputElement | null>).current = element\n }\n const buttonText =\n placeholder ??\n adapters.translate?.('selectFile', 'Dosya seç') ??\n 'Dosya seç'\n const emptyText =\n noFileText ??\n adapters.translate?.('noFileSelected', 'Dosya seçilmedi') ??\n 'Dosya seçilmedi'\n const fileText = getSelectedFileText(selectedFiles, emptyText)\n\n return (\n <div className={classNames('inconel-file-upload', className)}>\n {label !== null && label !== undefined && (\n <label\n className={classNames(\n 'inconel-file-upload__label',\n labelClassName,\n )}\n htmlFor={inputId}\n >\n {label}\n </label>\n )}\n <div className=\"inconel-file-upload__control\">\n <input\n {...props}\n ref={setRefs}\n id={inputId}\n type=\"file\"\n className={classNames(\n 'inconel-file-upload__input',\n Boolean(errorMessage) && 'inconel-is-invalid',\n inputClassName,\n )}\n accept={accept}\n multiple={multiple}\n disabled={disabled}\n onChange={(event) => {\n const nextFiles = Array.from(event.target.files ?? [])\n setPickedFiles(nextFiles)\n onChange?.(event)\n onFilesChange?.(nextFiles)\n }}\n />\n <label\n className={classNames(\n 'inconel-file-upload__button',\n disabled && 'inconel-is-disabled',\n Boolean(errorMessage) && 'inconel-is-error',\n )}\n htmlFor={inputId}\n >\n {icon === undefined ? <UploadIcon /> : icon}\n {buttonText}\n </label>\n {showFileName && (\n <span\n className={classNames(\n 'inconel-file-upload__file-name',\n selectedFiles.length > 0 && 'inconel-has-file',\n )}\n title={\n selectedFiles.length > 0\n ? selectedFiles.map((file) => file.name).join(', ')\n : undefined\n }\n >\n {fileText}\n </span>\n )}\n </div>\n {errorMessage !== null && errorMessage !== undefined && (\n <span className=\"inconel-file-upload__error\" role=\"alert\">\n {errorMessage}\n </span>\n )}\n </div>\n )\n },\n)\n"],"names":["UploadIcon","jsxs","jsx","FileUpload","forwardRef","id","label","placeholder","labelClassName","inputClassName","onChange","onFilesChange","errorMessage","render","className","disabled","accept","multiple","files","icon","noFileText","showFileName","props","ref","generatedId","useId","adapters","useInconelAdapters","inputRef","useRef","pickedFiles","setPickedFiles","useState","inputId","selectedFiles","useEffect","setRefs","element","buttonText","emptyText","fileText","getSelectedFileText","classNames","event","nextFiles","file"],"mappings":"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"}
|