@yamada-ui/file-button 1.0.31 → 1.0.32-dev-20240517073303
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/{chunk-X6I4HTJ3.mjs → chunk-SDH7RMH3.mjs} +17 -8
- package/dist/chunk-SDH7RMH3.mjs.map +1 -0
- package/dist/file-button.js +16 -6
- package/dist/file-button.js.map +1 -1
- package/dist/file-button.mjs +1 -1
- package/dist/index.js +16 -6
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunk-X6I4HTJ3.mjs.map +0 -1
|
@@ -14,14 +14,23 @@ import {
|
|
|
14
14
|
isFunction,
|
|
15
15
|
isNull,
|
|
16
16
|
mergeRefs,
|
|
17
|
-
omitObject,
|
|
18
17
|
pickObject
|
|
19
18
|
} from "@yamada-ui/utils";
|
|
20
19
|
import { useCallback, useRef } from "react";
|
|
21
20
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
22
21
|
var FileButton = forwardRef(
|
|
23
22
|
({ className, resetRef, as: As, children, ...props }, ref) => {
|
|
24
|
-
const {
|
|
23
|
+
const {
|
|
24
|
+
id,
|
|
25
|
+
name,
|
|
26
|
+
accept,
|
|
27
|
+
multiple,
|
|
28
|
+
form,
|
|
29
|
+
"aria-readonly": ariaReadonly,
|
|
30
|
+
onClick: onClickProp,
|
|
31
|
+
onChange: onChangeProp,
|
|
32
|
+
...rest
|
|
33
|
+
} = useFormControlProps(props);
|
|
25
34
|
const { disabled, readOnly, required, "aria-invalid": isInvalid } = rest;
|
|
26
35
|
const inputRef = useRef(null);
|
|
27
36
|
const onClick = useCallback(() => {
|
|
@@ -32,11 +41,10 @@ var FileButton = forwardRef(
|
|
|
32
41
|
}, [disabled, readOnly]);
|
|
33
42
|
const onChange = useCallback(
|
|
34
43
|
(ev) => {
|
|
35
|
-
var _a;
|
|
36
44
|
const files = !isNull(ev.currentTarget.files) ? Array.from(ev.currentTarget.files) : void 0;
|
|
37
|
-
|
|
45
|
+
onChangeProp == null ? void 0 : onChangeProp(files);
|
|
38
46
|
},
|
|
39
|
-
[
|
|
47
|
+
[onChangeProp]
|
|
40
48
|
);
|
|
41
49
|
const onReset = useCallback(() => {
|
|
42
50
|
if (inputRef.current)
|
|
@@ -48,8 +56,8 @@ var FileButton = forwardRef(
|
|
|
48
56
|
Component,
|
|
49
57
|
{
|
|
50
58
|
className: cx("ui-file-button", className),
|
|
51
|
-
...
|
|
52
|
-
onClick: handlerAll(
|
|
59
|
+
...rest,
|
|
60
|
+
onClick: handlerAll(onClickProp, onClick),
|
|
53
61
|
children
|
|
54
62
|
}
|
|
55
63
|
);
|
|
@@ -80,6 +88,7 @@ var FileButton = forwardRef(
|
|
|
80
88
|
position: "absolute"
|
|
81
89
|
},
|
|
82
90
|
onChange,
|
|
91
|
+
"aria-readonly": ariaReadonly,
|
|
83
92
|
...pickObject(rest, formControlProperties)
|
|
84
93
|
}
|
|
85
94
|
),
|
|
@@ -100,4 +109,4 @@ var FileButton = forwardRef(
|
|
|
100
109
|
export {
|
|
101
110
|
FileButton
|
|
102
111
|
};
|
|
103
|
-
//# sourceMappingURL=chunk-
|
|
112
|
+
//# sourceMappingURL=chunk-SDH7RMH3.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/file-button.tsx"],"sourcesContent":["import type { ButtonProps } from \"@yamada-ui/button\"\nimport { Button } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport {\n assignRef,\n cx,\n handlerAll,\n isFunction,\n isNull,\n mergeRefs,\n pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { useCallback, useRef } from \"react\"\n\ntype Props = {\n onClick: () => void\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n} & FormControlOptions\n\ntype FileButtonOptions = {\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n children?: ReactNode | ((props: Props) => ReactNode)\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n}\n\ntype InputProps = Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">>\n\nexport type FileButtonProps = Omit<ButtonProps, \"onChange\" | \"children\"> &\n InputProps &\n FileButtonOptions &\n FormControlOptions\n\n/**\n * `FileButton` is a button component used for users to select files.\n *\n * @see Docs https://yamada-ui.com/components/forms/file-button\n */\nexport const FileButton = forwardRef<FileButtonProps, \"input\">(\n ({ className, resetRef, as: As, children, ...props }, ref) => {\n const {\n id,\n name,\n accept,\n multiple,\n form,\n \"aria-readonly\": ariaReadonly,\n onClick: onClickProp,\n onChange: onChangeProp,\n ...rest\n } = useFormControlProps(props)\n\n const { disabled, readOnly, required, \"aria-invalid\": isInvalid } = rest\n\n const inputRef = useRef<HTMLInputElement>(null)\n\n const onClick = useCallback(() => {\n if (disabled || readOnly) return\n\n inputRef.current?.click()\n }, [disabled, readOnly])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n const files = !isNull(ev.currentTarget.files)\n ? Array.from(ev.currentTarget.files)\n : undefined\n\n onChangeProp?.(files)\n },\n [onChangeProp],\n )\n\n const onReset = useCallback(() => {\n if (inputRef.current) inputRef.current.value = \"\"\n }, [])\n\n if (!isFunction(children)) {\n const Component = As || Button\n\n children = (\n <Component\n className={cx(\"ui-file-button\", className)}\n {...rest}\n onClick={handlerAll(onClickProp, onClick)}\n >\n {children}\n </Component>\n ) as ReactNode\n }\n\n assignRef(resetRef, onReset)\n\n return (\n <>\n <ui.input\n ref={mergeRefs(inputRef, ref)}\n type=\"file\"\n aria-hidden\n tabIndex={-1}\n id={id}\n name={name}\n form={form}\n accept={accept}\n multiple={multiple}\n style={{\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }}\n onChange={onChange}\n aria-readonly={ariaReadonly}\n {...pickObject(rest, formControlProperties)}\n />\n\n {isFunction(children)\n ? children({\n onClick,\n disabled,\n readOnly,\n required,\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n isInvalid,\n })\n : children}\n </>\n )\n },\n)\n"],"mappings":";;;AACA,SAAS,cAAc;AAEvB,SAAS,IAAI,kBAAkB;AAE/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,aAAa,cAAc;AAgF5B,SAaF,UAbE,KAaF,YAbE;AA3CD,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,GAAG;AAAA,IACL,IAAI,oBAAoB,KAAK;AAE7B,UAAM,EAAE,UAAU,UAAU,UAAU,gBAAgB,UAAU,IAAI;AAEpE,UAAM,WAAW,OAAyB,IAAI;AAE9C,UAAM,UAAU,YAAY,MAAM;AA1EtC;AA2EM,UAAI,YAAY;AAAU;AAE1B,qBAAS,YAAT,mBAAkB;AAAA,IACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,UAAM,WAAW;AAAA,MACf,CAAC,OAAsC;AACrC,cAAM,QAAQ,CAAC,OAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,qDAAe;AAAA,MACjB;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,UAAU,YAAY,MAAM;AAChC,UAAI,SAAS;AAAS,iBAAS,QAAQ,QAAQ;AAAA,IACjD,GAAG,CAAC,CAAC;AAEL,QAAI,CAAC,WAAW,QAAQ,GAAG;AACzB,YAAM,YAAY,MAAM;AAExB,iBACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,kBAAkB,SAAS;AAAA,UACxC,GAAG;AAAA,UACJ,SAAS,WAAW,aAAa,OAAO;AAAA,UAEvC;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,cAAU,UAAU,OAAO;AAE3B,WACE,iCACE;AAAA;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UACC,KAAK,UAAU,UAAU,GAAG;AAAA,UAC5B,MAAK;AAAA,UACL,eAAW;AAAA,UACX,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,UAAU;AAAA,UACZ;AAAA,UACA;AAAA,UACA,iBAAe;AAAA,UACd,GAAG,WAAW,MAAM,qBAAqB;AAAA;AAAA,MAC5C;AAAA,MAEC,WAAW,QAAQ,IAChB,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ;AAAA,MACF,CAAC,IACD;AAAA,OACN;AAAA,EAEJ;AACF;","names":[]}
|
package/dist/file-button.js
CHANGED
|
@@ -32,7 +32,17 @@ var import_react = require("react");
|
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
33
|
var FileButton = (0, import_core.forwardRef)(
|
|
34
34
|
({ className, resetRef, as: As, children, ...props }, ref) => {
|
|
35
|
-
const {
|
|
35
|
+
const {
|
|
36
|
+
id,
|
|
37
|
+
name,
|
|
38
|
+
accept,
|
|
39
|
+
multiple,
|
|
40
|
+
form,
|
|
41
|
+
"aria-readonly": ariaReadonly,
|
|
42
|
+
onClick: onClickProp,
|
|
43
|
+
onChange: onChangeProp,
|
|
44
|
+
...rest
|
|
45
|
+
} = (0, import_form_control.useFormControlProps)(props);
|
|
36
46
|
const { disabled, readOnly, required, "aria-invalid": isInvalid } = rest;
|
|
37
47
|
const inputRef = (0, import_react.useRef)(null);
|
|
38
48
|
const onClick = (0, import_react.useCallback)(() => {
|
|
@@ -43,11 +53,10 @@ var FileButton = (0, import_core.forwardRef)(
|
|
|
43
53
|
}, [disabled, readOnly]);
|
|
44
54
|
const onChange = (0, import_react.useCallback)(
|
|
45
55
|
(ev) => {
|
|
46
|
-
var _a;
|
|
47
56
|
const files = !(0, import_utils.isNull)(ev.currentTarget.files) ? Array.from(ev.currentTarget.files) : void 0;
|
|
48
|
-
|
|
57
|
+
onChangeProp == null ? void 0 : onChangeProp(files);
|
|
49
58
|
},
|
|
50
|
-
[
|
|
59
|
+
[onChangeProp]
|
|
51
60
|
);
|
|
52
61
|
const onReset = (0, import_react.useCallback)(() => {
|
|
53
62
|
if (inputRef.current)
|
|
@@ -59,8 +68,8 @@ var FileButton = (0, import_core.forwardRef)(
|
|
|
59
68
|
Component,
|
|
60
69
|
{
|
|
61
70
|
className: (0, import_utils.cx)("ui-file-button", className),
|
|
62
|
-
...
|
|
63
|
-
onClick: (0, import_utils.handlerAll)(
|
|
71
|
+
...rest,
|
|
72
|
+
onClick: (0, import_utils.handlerAll)(onClickProp, onClick),
|
|
64
73
|
children
|
|
65
74
|
}
|
|
66
75
|
);
|
|
@@ -91,6 +100,7 @@ var FileButton = (0, import_core.forwardRef)(
|
|
|
91
100
|
position: "absolute"
|
|
92
101
|
},
|
|
93
102
|
onChange,
|
|
103
|
+
"aria-readonly": ariaReadonly,
|
|
94
104
|
...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties)
|
|
95
105
|
}
|
|
96
106
|
),
|
package/dist/file-button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/file-button.tsx"],"sourcesContent":["import type { ButtonProps } from \"@yamada-ui/button\"\nimport { Button } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport {\n assignRef,\n cx,\n handlerAll,\n isFunction,\n isNull,\n mergeRefs,\n
|
|
1
|
+
{"version":3,"sources":["../src/file-button.tsx"],"sourcesContent":["import type { ButtonProps } from \"@yamada-ui/button\"\nimport { Button } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport {\n assignRef,\n cx,\n handlerAll,\n isFunction,\n isNull,\n mergeRefs,\n pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { useCallback, useRef } from \"react\"\n\ntype Props = {\n onClick: () => void\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n} & FormControlOptions\n\ntype FileButtonOptions = {\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n children?: ReactNode | ((props: Props) => ReactNode)\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n}\n\ntype InputProps = Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">>\n\nexport type FileButtonProps = Omit<ButtonProps, \"onChange\" | \"children\"> &\n InputProps &\n FileButtonOptions &\n FormControlOptions\n\n/**\n * `FileButton` is a button component used for users to select files.\n *\n * @see Docs https://yamada-ui.com/components/forms/file-button\n */\nexport const FileButton = forwardRef<FileButtonProps, \"input\">(\n ({ className, resetRef, as: As, children, ...props }, ref) => {\n const {\n id,\n name,\n accept,\n multiple,\n form,\n \"aria-readonly\": ariaReadonly,\n onClick: onClickProp,\n onChange: onChangeProp,\n ...rest\n } = useFormControlProps(props)\n\n const { disabled, readOnly, required, \"aria-invalid\": isInvalid } = rest\n\n const inputRef = useRef<HTMLInputElement>(null)\n\n const onClick = useCallback(() => {\n if (disabled || readOnly) return\n\n inputRef.current?.click()\n }, [disabled, readOnly])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n const files = !isNull(ev.currentTarget.files)\n ? Array.from(ev.currentTarget.files)\n : undefined\n\n onChangeProp?.(files)\n },\n [onChangeProp],\n )\n\n const onReset = useCallback(() => {\n if (inputRef.current) inputRef.current.value = \"\"\n }, [])\n\n if (!isFunction(children)) {\n const Component = As || Button\n\n children = (\n <Component\n className={cx(\"ui-file-button\", className)}\n {...rest}\n onClick={handlerAll(onClickProp, onClick)}\n >\n {children}\n </Component>\n ) as ReactNode\n }\n\n assignRef(resetRef, onReset)\n\n return (\n <>\n <ui.input\n ref={mergeRefs(inputRef, ref)}\n type=\"file\"\n aria-hidden\n tabIndex={-1}\n id={id}\n name={name}\n form={form}\n accept={accept}\n multiple={multiple}\n style={{\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }}\n onChange={onChange}\n aria-readonly={ariaReadonly}\n {...pickObject(rest, formControlProperties)}\n />\n\n {isFunction(children)\n ? children({\n onClick,\n disabled,\n readOnly,\n required,\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n isInvalid,\n })\n : children}\n </>\n )\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAuB;AAEvB,kBAA+B;AAE/B,0BAGO;AACP,mBAQO;AAEP,mBAAoC;AAgF5B;AA3CD,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,GAAG;AAAA,IACL,QAAI,yCAAoB,KAAK;AAE7B,UAAM,EAAE,UAAU,UAAU,UAAU,gBAAgB,UAAU,IAAI;AAEpE,UAAM,eAAW,qBAAyB,IAAI;AAE9C,UAAM,cAAU,0BAAY,MAAM;AA1EtC;AA2EM,UAAI,YAAY;AAAU;AAE1B,qBAAS,YAAT,mBAAkB;AAAA,IACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,UAAM,eAAW;AAAA,MACf,CAAC,OAAsC;AACrC,cAAM,QAAQ,KAAC,qBAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,qDAAe;AAAA,MACjB;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,SAAS;AAAS,iBAAS,QAAQ,QAAQ;AAAA,IACjD,GAAG,CAAC,CAAC;AAEL,QAAI,KAAC,yBAAW,QAAQ,GAAG;AACzB,YAAM,YAAY,MAAM;AAExB,iBACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAW,iBAAG,kBAAkB,SAAS;AAAA,UACxC,GAAG;AAAA,UACJ,aAAS,yBAAW,aAAa,OAAO;AAAA,UAEvC;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,gCAAU,UAAU,OAAO;AAE3B,WACE,4EACE;AAAA;AAAA,QAAC,eAAG;AAAA,QAAH;AAAA,UACC,SAAK,wBAAU,UAAU,GAAG;AAAA,UAC5B,MAAK;AAAA,UACL,eAAW;AAAA,UACX,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,UAAU;AAAA,UACZ;AAAA,UACA;AAAA,UACA,iBAAe;AAAA,UACd,OAAG,yBAAW,MAAM,yCAAqB;AAAA;AAAA,MAC5C;AAAA,UAEC,yBAAW,QAAQ,IAChB,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ;AAAA,MACF,CAAC,IACD;AAAA,OACN;AAAA,EAEJ;AACF;","names":[]}
|
package/dist/file-button.mjs
CHANGED
package/dist/index.js
CHANGED
|
@@ -34,7 +34,17 @@ var import_react = require("react");
|
|
|
34
34
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
35
|
var FileButton = (0, import_core.forwardRef)(
|
|
36
36
|
({ className, resetRef, as: As, children, ...props }, ref) => {
|
|
37
|
-
const {
|
|
37
|
+
const {
|
|
38
|
+
id,
|
|
39
|
+
name,
|
|
40
|
+
accept,
|
|
41
|
+
multiple,
|
|
42
|
+
form,
|
|
43
|
+
"aria-readonly": ariaReadonly,
|
|
44
|
+
onClick: onClickProp,
|
|
45
|
+
onChange: onChangeProp,
|
|
46
|
+
...rest
|
|
47
|
+
} = (0, import_form_control.useFormControlProps)(props);
|
|
38
48
|
const { disabled, readOnly, required, "aria-invalid": isInvalid } = rest;
|
|
39
49
|
const inputRef = (0, import_react.useRef)(null);
|
|
40
50
|
const onClick = (0, import_react.useCallback)(() => {
|
|
@@ -45,11 +55,10 @@ var FileButton = (0, import_core.forwardRef)(
|
|
|
45
55
|
}, [disabled, readOnly]);
|
|
46
56
|
const onChange = (0, import_react.useCallback)(
|
|
47
57
|
(ev) => {
|
|
48
|
-
var _a;
|
|
49
58
|
const files = !(0, import_utils.isNull)(ev.currentTarget.files) ? Array.from(ev.currentTarget.files) : void 0;
|
|
50
|
-
|
|
59
|
+
onChangeProp == null ? void 0 : onChangeProp(files);
|
|
51
60
|
},
|
|
52
|
-
[
|
|
61
|
+
[onChangeProp]
|
|
53
62
|
);
|
|
54
63
|
const onReset = (0, import_react.useCallback)(() => {
|
|
55
64
|
if (inputRef.current)
|
|
@@ -61,8 +70,8 @@ var FileButton = (0, import_core.forwardRef)(
|
|
|
61
70
|
Component,
|
|
62
71
|
{
|
|
63
72
|
className: (0, import_utils.cx)("ui-file-button", className),
|
|
64
|
-
...
|
|
65
|
-
onClick: (0, import_utils.handlerAll)(
|
|
73
|
+
...rest,
|
|
74
|
+
onClick: (0, import_utils.handlerAll)(onClickProp, onClick),
|
|
66
75
|
children
|
|
67
76
|
}
|
|
68
77
|
);
|
|
@@ -93,6 +102,7 @@ var FileButton = (0, import_core.forwardRef)(
|
|
|
93
102
|
position: "absolute"
|
|
94
103
|
},
|
|
95
104
|
onChange,
|
|
105
|
+
"aria-readonly": ariaReadonly,
|
|
96
106
|
...(0, import_utils.pickObject)(rest, import_form_control.formControlProperties)
|
|
97
107
|
}
|
|
98
108
|
),
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/file-button.tsx"],"sourcesContent":["export { FileButton } from \"./file-button\"\nexport type { FileButtonProps } from \"./file-button\"\n","import type { ButtonProps } from \"@yamada-ui/button\"\nimport { Button } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport {\n assignRef,\n cx,\n handlerAll,\n isFunction,\n isNull,\n mergeRefs,\n
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/file-button.tsx"],"sourcesContent":["export { FileButton } from \"./file-button\"\nexport type { FileButtonProps } from \"./file-button\"\n","import type { ButtonProps } from \"@yamada-ui/button\"\nimport { Button } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport {\n assignRef,\n cx,\n handlerAll,\n isFunction,\n isNull,\n mergeRefs,\n pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { useCallback, useRef } from \"react\"\n\ntype Props = {\n onClick: () => void\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n} & FormControlOptions\n\ntype FileButtonOptions = {\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n children?: ReactNode | ((props: Props) => ReactNode)\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n}\n\ntype InputProps = Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">>\n\nexport type FileButtonProps = Omit<ButtonProps, \"onChange\" | \"children\"> &\n InputProps &\n FileButtonOptions &\n FormControlOptions\n\n/**\n * `FileButton` is a button component used for users to select files.\n *\n * @see Docs https://yamada-ui.com/components/forms/file-button\n */\nexport const FileButton = forwardRef<FileButtonProps, \"input\">(\n ({ className, resetRef, as: As, children, ...props }, ref) => {\n const {\n id,\n name,\n accept,\n multiple,\n form,\n \"aria-readonly\": ariaReadonly,\n onClick: onClickProp,\n onChange: onChangeProp,\n ...rest\n } = useFormControlProps(props)\n\n const { disabled, readOnly, required, \"aria-invalid\": isInvalid } = rest\n\n const inputRef = useRef<HTMLInputElement>(null)\n\n const onClick = useCallback(() => {\n if (disabled || readOnly) return\n\n inputRef.current?.click()\n }, [disabled, readOnly])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n const files = !isNull(ev.currentTarget.files)\n ? Array.from(ev.currentTarget.files)\n : undefined\n\n onChangeProp?.(files)\n },\n [onChangeProp],\n )\n\n const onReset = useCallback(() => {\n if (inputRef.current) inputRef.current.value = \"\"\n }, [])\n\n if (!isFunction(children)) {\n const Component = As || Button\n\n children = (\n <Component\n className={cx(\"ui-file-button\", className)}\n {...rest}\n onClick={handlerAll(onClickProp, onClick)}\n >\n {children}\n </Component>\n ) as ReactNode\n }\n\n assignRef(resetRef, onReset)\n\n return (\n <>\n <ui.input\n ref={mergeRefs(inputRef, ref)}\n type=\"file\"\n aria-hidden\n tabIndex={-1}\n id={id}\n name={name}\n form={form}\n accept={accept}\n multiple={multiple}\n style={{\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }}\n onChange={onChange}\n aria-readonly={ariaReadonly}\n {...pickObject(rest, formControlProperties)}\n />\n\n {isFunction(children)\n ? children({\n onClick,\n disabled,\n readOnly,\n required,\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n isInvalid,\n })\n : children}\n </>\n )\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,oBAAuB;AAEvB,kBAA+B;AAE/B,0BAGO;AACP,mBAQO;AAEP,mBAAoC;AAgF5B;AA3CD,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,UAAU;AAAA,MACV,GAAG;AAAA,IACL,QAAI,yCAAoB,KAAK;AAE7B,UAAM,EAAE,UAAU,UAAU,UAAU,gBAAgB,UAAU,IAAI;AAEpE,UAAM,eAAW,qBAAyB,IAAI;AAE9C,UAAM,cAAU,0BAAY,MAAM;AA1EtC;AA2EM,UAAI,YAAY;AAAU;AAE1B,qBAAS,YAAT,mBAAkB;AAAA,IACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,UAAM,eAAW;AAAA,MACf,CAAC,OAAsC;AACrC,cAAM,QAAQ,KAAC,qBAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,qDAAe;AAAA,MACjB;AAAA,MACA,CAAC,YAAY;AAAA,IACf;AAEA,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,SAAS;AAAS,iBAAS,QAAQ,QAAQ;AAAA,IACjD,GAAG,CAAC,CAAC;AAEL,QAAI,KAAC,yBAAW,QAAQ,GAAG;AACzB,YAAM,YAAY,MAAM;AAExB,iBACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAW,iBAAG,kBAAkB,SAAS;AAAA,UACxC,GAAG;AAAA,UACJ,aAAS,yBAAW,aAAa,OAAO;AAAA,UAEvC;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,gCAAU,UAAU,OAAO;AAE3B,WACE,4EACE;AAAA;AAAA,QAAC,eAAG;AAAA,QAAH;AAAA,UACC,SAAK,wBAAU,UAAU,GAAG;AAAA,UAC5B,MAAK;AAAA,UACL,eAAW;AAAA,UACX,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,UAAU;AAAA,UACZ;AAAA,UACA;AAAA,UACA,iBAAe;AAAA,UACd,OAAG,yBAAW,MAAM,yCAAqB;AAAA;AAAA,MAC5C;AAAA,UAEC,yBAAW,QAAQ,IAChB,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ;AAAA,MACF,CAAC,IACD;AAAA,OACN;AAAA,EAEJ;AACF;","names":[]}
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/file-button.tsx"],"sourcesContent":["import type { ButtonProps } from \"@yamada-ui/button\"\nimport { Button } from \"@yamada-ui/button\"\nimport type { ColorModeToken, CSS } from \"@yamada-ui/core\"\nimport { ui, forwardRef } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\n useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport {\n assignRef,\n cx,\n handlerAll,\n isFunction,\n isNull,\n mergeRefs,\n omitObject,\n pickObject,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, ForwardedRef, ReactNode } from \"react\"\nimport { useCallback, useRef } from \"react\"\n\ntype Props = {\n onClick: () => void\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n} & FormControlOptions\n\ntype FileButtonOptions = {\n /**\n * The border color when the button is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * Function to be called when a file change event occurs.\n */\n onChange?: (files: File[] | undefined) => void\n children?: ReactNode | ((props: Props) => ReactNode)\n /**\n * Ref to a reset function.\n */\n resetRef?: ForwardedRef<() => void>\n}\n\ntype InputProps = Partial<Pick<HTMLInputElement, \"accept\" | \"multiple\">>\n\nexport type FileButtonProps = Omit<ButtonProps, \"onChange\" | \"children\"> &\n InputProps &\n FileButtonOptions &\n FormControlOptions\n\n/**\n * `FileButton` is a button component used for users to select files.\n *\n * @see Docs https://yamada-ui.com/components/forms/file-button\n */\nexport const FileButton = forwardRef<FileButtonProps, \"input\">(\n ({ className, resetRef, as: As, children, ...props }, ref) => {\n const { id, name, accept, multiple, form, ...rest } =\n useFormControlProps(props)\n\n const { disabled, readOnly, required, \"aria-invalid\": isInvalid } = rest\n\n const inputRef = useRef<HTMLInputElement>(null)\n\n const onClick = useCallback(() => {\n if (disabled || readOnly) return\n\n inputRef.current?.click()\n }, [disabled, readOnly])\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n const files = !isNull(ev.currentTarget.files)\n ? Array.from(ev.currentTarget.files)\n : undefined\n\n rest.onChange?.(files)\n },\n [rest],\n )\n\n const onReset = useCallback(() => {\n if (inputRef.current) inputRef.current.value = \"\"\n }, [])\n\n if (!isFunction(children)) {\n const Component = As || Button\n\n children = (\n <Component\n className={cx(\"ui-file-button\", className)}\n {...omitObject(rest, [\"onChange\", \"aria-readonly\"])}\n onClick={handlerAll(rest.onClick, onClick)}\n >\n {children}\n </Component>\n ) as ReactNode\n }\n\n assignRef(resetRef, onReset)\n\n return (\n <>\n <ui.input\n ref={mergeRefs(inputRef, ref)}\n type=\"file\"\n aria-hidden\n tabIndex={-1}\n id={id}\n name={name}\n form={form}\n accept={accept}\n multiple={multiple}\n style={{\n border: \"0px\",\n clip: \"rect(0px, 0px, 0px, 0px)\",\n height: \"1px\",\n width: \"1px\",\n margin: \"-1px\",\n padding: \"0px\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n position: \"absolute\",\n }}\n onChange={onChange}\n {...pickObject(rest, formControlProperties)}\n />\n\n {isFunction(children)\n ? children({\n onClick,\n disabled,\n readOnly,\n required,\n isDisabled: disabled,\n isReadOnly: readOnly,\n isRequired: required,\n isInvalid,\n })\n : children}\n </>\n )\n },\n)\n"],"mappings":";;;AACA,SAAS,cAAc;AAEvB,SAAS,IAAI,kBAAkB;AAE/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,aAAa,cAAc;AAuE5B,SAaF,UAbE,KAaF,YAbE;AAlCD,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,IAAI,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5D,UAAM,EAAE,IAAI,MAAM,QAAQ,UAAU,MAAM,GAAG,KAAK,IAChD,oBAAoB,KAAK;AAE3B,UAAM,EAAE,UAAU,UAAU,UAAU,gBAAgB,UAAU,IAAI;AAEpE,UAAM,WAAW,OAAyB,IAAI;AAE9C,UAAM,UAAU,YAAY,MAAM;AAlEtC;AAmEM,UAAI,YAAY;AAAU;AAE1B,qBAAS,YAAT,mBAAkB;AAAA,IACpB,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,UAAM,WAAW;AAAA,MACf,CAAC,OAAsC;AAzE7C;AA0EQ,cAAM,QAAQ,CAAC,OAAO,GAAG,cAAc,KAAK,IACxC,MAAM,KAAK,GAAG,cAAc,KAAK,IACjC;AAEJ,mBAAK,aAAL,8BAAgB;AAAA,MAClB;AAAA,MACA,CAAC,IAAI;AAAA,IACP;AAEA,UAAM,UAAU,YAAY,MAAM;AAChC,UAAI,SAAS;AAAS,iBAAS,QAAQ,QAAQ;AAAA,IACjD,GAAG,CAAC,CAAC;AAEL,QAAI,CAAC,WAAW,QAAQ,GAAG;AACzB,YAAM,YAAY,MAAM;AAExB,iBACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,kBAAkB,SAAS;AAAA,UACxC,GAAG,WAAW,MAAM,CAAC,YAAY,eAAe,CAAC;AAAA,UAClD,SAAS,WAAW,KAAK,SAAS,OAAO;AAAA,UAExC;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,cAAU,UAAU,OAAO;AAE3B,WACE,iCACE;AAAA;AAAA,QAAC,GAAG;AAAA,QAAH;AAAA,UACC,KAAK,UAAU,UAAU,GAAG;AAAA,UAC5B,MAAK;AAAA,UACL,eAAW;AAAA,UACX,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,UAAU;AAAA,UACZ;AAAA,UACA;AAAA,UACC,GAAG,WAAW,MAAM,qBAAqB;AAAA;AAAA,MAC5C;AAAA,MAEC,WAAW,QAAQ,IAChB,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ;AAAA,MACF,CAAC,IACD;AAAA,OACN;AAAA,EAEJ;AACF;","names":[]}
|