deepsea-components 5.10.1 → 5.10.3
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/InputFileButton.d.ts +3 -3
- package/dist/cjs/components/InputFileButton.js +3 -1
- package/dist/cjs/components/InputFileButton.js.map +2 -2
- package/dist/cjs/components/Unify.d.ts +4 -4
- package/dist/cjs/components/Unify.js +3 -3
- package/dist/cjs/components/Unify.js.map +2 -2
- package/dist/esm/components/InputFileButton.d.ts +3 -3
- package/dist/esm/components/InputFileButton.js +4 -1
- package/dist/esm/components/InputFileButton.js.map +1 -1
- package/dist/esm/components/Unify.d.ts +4 -4
- package/dist/esm/components/Unify.js +3 -3
- package/dist/esm/components/Unify.js.map +1 -1
- package/package.json +1 -1
- package/src/components/InputFileButton.tsx +24 -7
- package/src/components/Unify.tsx +6 -6
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ComponentProps, JSX } from "react";
|
|
1
|
+
import { ComponentProps, JSX, JSXElementConstructor } from "react";
|
|
2
2
|
import { InputFileBaseProps, InputFileDataType, InputFileExtraProps } from "./InputFile";
|
|
3
|
-
export type InputFileButtonProps<Multiple extends boolean = false, Type extends InputFileDataType = "file", AS extends keyof JSX.IntrinsicElements = "button"> = Omit<ComponentProps<AS>, "type" | "disabled"> & InputFileExtraProps<Multiple, Type> & {
|
|
3
|
+
export type InputFileButtonProps<Multiple extends boolean = false, Type extends InputFileDataType = "file", AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button"> = Omit<ComponentProps<AS>, "as" | "type" | "disabled"> & InputFileExtraProps<Multiple, Type> & {
|
|
4
4
|
disabled?: boolean;
|
|
5
5
|
inputProps?: Omit<InputFileBaseProps, "accept">;
|
|
6
6
|
accept?: string;
|
|
@@ -8,4 +8,4 @@ export type InputFileButtonProps<Multiple extends boolean = false, Type extends
|
|
|
8
8
|
as?: AS;
|
|
9
9
|
};
|
|
10
10
|
/** 专用于读取文件的 button 组件 */
|
|
11
|
-
export declare function InputFileButton<Multiple extends boolean = false, Type extends InputFileDataType = "file", AS extends keyof JSX.IntrinsicElements = "button">(props: InputFileButtonProps<Multiple, Type, AS>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function InputFileButton<Multiple extends boolean = false, Type extends InputFileDataType = "file", AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button">(props: InputFileButtonProps<Multiple, Type, AS>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -42,9 +42,10 @@ function InputFileButton(props) {
|
|
|
42
42
|
clearAfterChange,
|
|
43
43
|
...rest
|
|
44
44
|
} = props;
|
|
45
|
-
const { style, disabled: __disabled, ...restInputProps } = inputProps;
|
|
45
|
+
const { ref, style, disabled: __disabled, ...restInputProps } = inputProps;
|
|
46
46
|
const [disabled, setDisabled] = (0, import_react.useState)(false);
|
|
47
47
|
const input = (0, import_react.useRef)(null);
|
|
48
|
+
(0, import_react.useImperativeHandle)(ref, () => input.current, [input.current]);
|
|
48
49
|
function onClick(e) {
|
|
49
50
|
input.current?.click();
|
|
50
51
|
_onClick?.(e);
|
|
@@ -86,6 +87,7 @@ function InputFileButton(props) {
|
|
|
86
87
|
return /* @__PURE__ */ React.createElement(import_react.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
87
88
|
import_InputFile.InputFile,
|
|
88
89
|
{
|
|
90
|
+
ref: input,
|
|
89
91
|
disabled: disabled || _disabled || __disabled,
|
|
90
92
|
style: { display: "none", ...style },
|
|
91
93
|
multiple,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/InputFileButton.tsx"],
|
|
4
|
-
"sourcesContent": ["\"use client\"\r\n\r\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,
|
|
4
|
+
"sourcesContent": ["\"use client\"\r\n\r\nimport {\r\n ComponentProps,\r\n ComponentRef,\r\n createElement,\r\n DragEvent,\r\n Fragment,\r\n JSX,\r\n JSXElementConstructor,\r\n MouseEvent as ReactMouseEvent,\r\n useImperativeHandle,\r\n useRef,\r\n useState,\r\n} from \"react\"\r\nimport { FileType, getFileData, InputFile, InputFileBaseProps, InputFileDataType, InputFileDataTypeMap, InputFileExtraProps, ValueType } from \"./InputFile\"\r\n\r\nexport type InputFileButtonProps<\r\n Multiple extends boolean = false,\r\n Type extends InputFileDataType = \"file\",\r\n AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"button\",\r\n> = Omit<ComponentProps<AS>, \"as\" | \"type\" | \"disabled\"> &\r\n InputFileExtraProps<Multiple, Type> & {\r\n disabled?: boolean\r\n inputProps?: Omit<InputFileBaseProps, \"accept\">\r\n accept?: string\r\n dragFile?: boolean\r\n as?: AS\r\n }\r\n\r\n/** 专用于读取文件的 button 组件 */\r\nexport function InputFileButton<\r\n Multiple extends boolean = false,\r\n Type extends InputFileDataType = \"file\",\r\n AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"button\",\r\n>(props: InputFileButtonProps<Multiple, Type, AS>) {\r\n const {\r\n as = \"button\",\r\n onClick: _onClick,\r\n inputProps = {},\r\n accept,\r\n onDrop: _onDrop,\r\n onDragOver: _onDragOver,\r\n dragFile,\r\n disabled: _disabled,\r\n type = \"file\",\r\n multiple,\r\n onValueChange,\r\n onFileChange,\r\n clearAfterChange,\r\n ...rest\r\n } = props\r\n\r\n const { ref, style, disabled: __disabled, ...restInputProps } = inputProps\r\n const [disabled, setDisabled] = useState(false)\r\n const input = useRef<HTMLInputElement>(null)\r\n\r\n useImperativeHandle(ref, () => input.current!, [input.current])\r\n\r\n function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {\r\n input.current?.click()\r\n _onClick?.(e as any)\r\n }\r\n\r\n async function onDrop(e: DragEvent<ComponentRef<AS>>) {\r\n _onDrop?.(e as any)\r\n if (disabled || !dragFile) return\r\n e.preventDefault()\r\n const { files } = e.dataTransfer\r\n if (!files || files.length === 0) return\r\n setDisabled(true)\r\n try {\r\n if (multiple) {\r\n const files2: File[] = Array.from(files)\r\n const values: InputFileDataTypeMap[Type][] = []\r\n for (const file of files2) {\r\n const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]\r\n values.push(value)\r\n }\r\n onFileChange?.(files2 as FileType<Multiple>)\r\n onValueChange?.(values as ValueType<Multiple, Type>)\r\n } else {\r\n const file = files[0]\r\n onFileChange?.(file as FileType<Multiple>)\r\n onValueChange?.((await getFileData(file, type)) as ValueType<Multiple, Type>)\r\n }\r\n } finally {\r\n setDisabled(false)\r\n }\r\n }\r\n\r\n function onDragOver(e: DragEvent<ComponentRef<AS>>) {\r\n _onDragOver?.(e as any)\r\n if (disabled || !dragFile) return\r\n e.preventDefault()\r\n }\r\n\r\n return (\r\n <Fragment>\r\n <InputFile<Multiple, Type>\r\n ref={input}\r\n disabled={disabled || _disabled || __disabled}\r\n style={{ display: \"none\", ...style }}\r\n multiple={multiple}\r\n accept={accept}\r\n type={type as Type}\r\n onValueChange={onValueChange}\r\n onFileChange={onFileChange}\r\n clearAfterChange={clearAfterChange}\r\n {...restInputProps}\r\n />\r\n {createElement(as, {\r\n disabled: disabled || _disabled,\r\n onClick,\r\n onDrop,\r\n onDragOver,\r\n ...rest,\r\n })}\r\n </Fragment>\r\n )\r\n}\r\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAYO;AACP,uBAA8I;AAgBvI,SAAS,gBAId,OAAiD;AAC/C,QAAM;AAAA,IACF,KAAK;AAAA,IACL,SAAS;AAAA,IACT,aAAa,CAAC;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AAEJ,QAAM,EAAE,KAAK,OAAO,UAAU,YAAY,GAAG,eAAe,IAAI;AAChE,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,YAAQ,qBAAyB,IAAI;AAE3C,wCAAoB,KAAK,MAAM,MAAM,SAAU,CAAC,MAAM,OAAO,CAAC;AAE9D,WAAS,QAAQ,GAAkD;AAC/D,UAAM,SAAS,MAAM;AACrB,eAAW,CAAQ;AAAA,EACvB;AAEA,iBAAe,OAAO,GAAgC;AAClD,cAAU,CAAQ;AAClB,QAAI,YAAY,CAAC;AAAU;AAC3B,MAAE,eAAe;AACjB,UAAM,EAAE,MAAM,IAAI,EAAE;AACpB,QAAI,CAAC,SAAS,MAAM,WAAW;AAAG;AAClC,gBAAY,IAAI;AAChB,QAAI;AACA,UAAI,UAAU;AACV,cAAM,SAAiB,MAAM,KAAK,KAAK;AACvC,cAAM,SAAuC,CAAC;AAC9C,mBAAW,QAAQ,QAAQ;AACvB,gBAAM,QAAS,UAAM,8BAAY,MAAM,IAAI;AAC3C,iBAAO,KAAK,KAAK;AAAA,QACrB;AACA,uBAAe,MAA4B;AAC3C,wBAAgB,MAAmC;AAAA,MACvD,OAAO;AACH,cAAM,OAAO,MAAM,CAAC;AACpB,uBAAe,IAA0B;AACzC,wBAAiB,UAAM,8BAAY,MAAM,IAAI,CAA+B;AAAA,MAChF;AAAA,IACJ,UAAE;AACE,kBAAY,KAAK;AAAA,IACrB;AAAA,EACJ;AAEA,WAAS,WAAW,GAAgC;AAChD,kBAAc,CAAQ;AACtB,QAAI,YAAY,CAAC;AAAU;AAC3B,MAAE,eAAe;AAAA,EACrB;AAEA,SACI,oCAAC,6BACG;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,UAAU,YAAY,aAAa;AAAA,MACnC,OAAO,EAAE,SAAS,QAAQ,GAAG,MAAM;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACR,OACC,4BAAc,IAAI;AAAA,IACf,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,CAAC,CACL;AAER;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CSSProperties, ComponentProps, FC,
|
|
1
|
+
import { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode } from "react";
|
|
2
2
|
export interface UnifyConfig {
|
|
3
3
|
className?: string;
|
|
4
4
|
style?: CSSProperties;
|
|
@@ -7,7 +7,7 @@ export interface UnifyConfigProviderProps extends UnifyConfig {
|
|
|
7
7
|
children?: ReactNode;
|
|
8
8
|
}
|
|
9
9
|
export declare const UnifyConfigProvider: FC<UnifyConfigProviderProps>;
|
|
10
|
-
export type UnifyProps<
|
|
11
|
-
as?:
|
|
10
|
+
export type UnifyProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div"> = Omit<ComponentProps<AS>, "as"> & {
|
|
11
|
+
as?: AS;
|
|
12
12
|
};
|
|
13
|
-
export declare function Unify<
|
|
13
|
+
export declare function Unify<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div">(props: UnifyProps<AS>): ReactNode;
|
|
@@ -24,17 +24,17 @@ __export(Unify_exports, {
|
|
|
24
24
|
UnifyConfigProvider: () => UnifyConfigProvider
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(Unify_exports);
|
|
27
|
-
var import_react = require("react");
|
|
28
27
|
var import_deepsea_tools = require("deepsea-tools");
|
|
28
|
+
var import_react = require("react");
|
|
29
29
|
var UnifyConfigContext = (0, import_react.createContext)({});
|
|
30
30
|
var UnifyConfigProvider = ({ className, style, children }) => {
|
|
31
31
|
const { className: _className, style: _style } = (0, import_react.useContext)(UnifyConfigContext);
|
|
32
32
|
return /* @__PURE__ */ React.createElement(UnifyConfigContext.Provider, { value: { className: (0, import_deepsea_tools.clsx)(_className, className), style: { ..._style, ...style } } }, children);
|
|
33
33
|
};
|
|
34
34
|
function Unify(props) {
|
|
35
|
-
const { as, className, style, ...rest } = props;
|
|
35
|
+
const { as = "div", className, style, ...rest } = props;
|
|
36
36
|
const { className: _className, style: _style } = (0, import_react.useContext)(UnifyConfigContext);
|
|
37
|
-
return (0, import_react.createElement)(as
|
|
37
|
+
return (0, import_react.createElement)(as, {
|
|
38
38
|
className: (0, import_deepsea_tools.clsx)(_className, className),
|
|
39
39
|
style: { ..._style, ...style },
|
|
40
40
|
...rest
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Unify.tsx"],
|
|
4
|
-
"sourcesContent": ["\"use client\"\r\n\r\nimport { CSSProperties, ComponentProps, FC, ReactNode, createContext, createElement, useContext
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,
|
|
4
|
+
"sourcesContent": ["\"use client\"\r\n\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode, createContext, createElement, useContext } from \"react\"\r\n\r\nexport interface UnifyConfig {\r\n className?: string\r\n style?: CSSProperties\r\n}\r\n\r\nconst UnifyConfigContext = createContext<UnifyConfig>({})\r\n\r\nexport interface UnifyConfigProviderProps extends UnifyConfig {\r\n children?: ReactNode\r\n}\r\n\r\nexport const UnifyConfigProvider: FC<UnifyConfigProviderProps> = ({ className, style, children }) => {\r\n const { className: _className, style: _style } = useContext(UnifyConfigContext)\r\n\r\n return (\r\n <UnifyConfigContext.Provider value={{ className: clsx(_className, className), style: { ..._style, ...style } }}>{children}</UnifyConfigContext.Provider>\r\n )\r\n}\r\n\r\nexport type UnifyProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"div\"> = Omit<ComponentProps<AS>, \"as\"> & {\r\n as?: AS\r\n}\r\n\r\nexport function Unify<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"div\">(props: UnifyProps<AS>) {\r\n const { as = \"div\", className, style, ...rest } = props\r\n const { className: _className, style: _style } = useContext(UnifyConfigContext)\r\n\r\n return createElement(as, {\r\n className: clsx(_className, className),\r\n style: { ..._style, ...style },\r\n ...rest,\r\n }) as ReactNode\r\n}\r\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAAqB;AACrB,mBAAmI;AAOnI,IAAM,yBAAqB,4BAA2B,CAAC,CAAC;AAMjD,IAAM,sBAAoD,CAAC,EAAE,WAAW,OAAO,SAAS,MAAM;AACjG,QAAM,EAAE,WAAW,YAAY,OAAO,OAAO,QAAI,yBAAW,kBAAkB;AAE9E,SACI,oCAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,eAAW,2BAAK,YAAY,SAAS,GAAG,OAAO,EAAE,GAAG,QAAQ,GAAG,MAAM,EAAE,KAAI,QAAS;AAElI;AAMO,SAAS,MAAmF,OAAuB;AACtH,QAAM,EAAE,KAAK,OAAO,WAAW,OAAO,GAAG,KAAK,IAAI;AAClD,QAAM,EAAE,WAAW,YAAY,OAAO,OAAO,QAAI,yBAAW,kBAAkB;AAE9E,aAAO,4BAAc,IAAI;AAAA,IACrB,eAAW,2BAAK,YAAY,SAAS;AAAA,IACrC,OAAO,EAAE,GAAG,QAAQ,GAAG,MAAM;AAAA,IAC7B,GAAG;AAAA,EACP,CAAC;AACL;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ComponentProps, JSX } from "react";
|
|
1
|
+
import { ComponentProps, JSX, JSXElementConstructor } from "react";
|
|
2
2
|
import { InputFileBaseProps, InputFileDataType, InputFileExtraProps } from "./InputFile";
|
|
3
|
-
export type InputFileButtonProps<Multiple extends boolean = false, Type extends InputFileDataType = "file", AS extends keyof JSX.IntrinsicElements = "button"> = Omit<ComponentProps<AS>, "type" | "disabled"> & InputFileExtraProps<Multiple, Type> & {
|
|
3
|
+
export type InputFileButtonProps<Multiple extends boolean = false, Type extends InputFileDataType = "file", AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button"> = Omit<ComponentProps<AS>, "as" | "type" | "disabled"> & InputFileExtraProps<Multiple, Type> & {
|
|
4
4
|
disabled?: boolean;
|
|
5
5
|
inputProps?: Omit<InputFileBaseProps, "accept">;
|
|
6
6
|
accept?: string;
|
|
@@ -8,4 +8,4 @@ export type InputFileButtonProps<Multiple extends boolean = false, Type extends
|
|
|
8
8
|
as?: AS;
|
|
9
9
|
};
|
|
10
10
|
/** 专用于读取文件的 button 组件 */
|
|
11
|
-
export declare function InputFileButton<Multiple extends boolean = false, Type extends InputFileDataType = "file", AS extends keyof JSX.IntrinsicElements = "button">(props: InputFileButtonProps<Multiple, Type, AS>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function InputFileButton<Multiple extends boolean = false, Type extends InputFileDataType = "file", AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button">(props: InputFileButtonProps<Multiple, Type, AS>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import { createElement, Fragment, useRef, useState } from "react";
|
|
3
|
+
import { createElement, Fragment, useImperativeHandle, useRef, useState } from "react";
|
|
4
4
|
import { getFileData, InputFile } from "./InputFile";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -23,12 +23,14 @@ export function InputFileButton(props) {
|
|
|
23
23
|
...rest
|
|
24
24
|
} = props;
|
|
25
25
|
const {
|
|
26
|
+
ref,
|
|
26
27
|
style,
|
|
27
28
|
disabled: __disabled,
|
|
28
29
|
...restInputProps
|
|
29
30
|
} = inputProps;
|
|
30
31
|
const [disabled, setDisabled] = useState(false);
|
|
31
32
|
const input = useRef(null);
|
|
33
|
+
useImperativeHandle(ref, () => input.current, [input.current]);
|
|
32
34
|
function onClick(e) {
|
|
33
35
|
input.current?.click();
|
|
34
36
|
_onClick?.(e);
|
|
@@ -68,6 +70,7 @@ export function InputFileButton(props) {
|
|
|
68
70
|
}
|
|
69
71
|
return /*#__PURE__*/_jsxs(Fragment, {
|
|
70
72
|
children: [/*#__PURE__*/_jsx(InputFile, {
|
|
73
|
+
ref: input,
|
|
71
74
|
disabled: disabled || _disabled || __disabled,
|
|
72
75
|
style: {
|
|
73
76
|
display: "none",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createElement","Fragment","useRef","useState","getFileData","InputFile","jsx","_jsx","jsxs","_jsxs","InputFileButton","props","as","onClick","_onClick","inputProps","accept","onDrop","_onDrop","onDragOver","_onDragOver","dragFile","disabled","_disabled","type","multiple","onValueChange","onFileChange","clearAfterChange","rest","style","__disabled","restInputProps","setDisabled","input","
|
|
1
|
+
{"version":3,"names":["createElement","Fragment","useImperativeHandle","useRef","useState","getFileData","InputFile","jsx","_jsx","jsxs","_jsxs","InputFileButton","props","as","onClick","_onClick","inputProps","accept","onDrop","_onDrop","onDragOver","_onDragOver","dragFile","disabled","_disabled","type","multiple","onValueChange","onFileChange","clearAfterChange","rest","ref","style","__disabled","restInputProps","setDisabled","input","current","e","click","preventDefault","files","dataTransfer","length","files2","Array","from","values","file","value","push","children","display"],"sources":["../../../src/components/InputFileButton.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport {\r\n ComponentProps,\r\n ComponentRef,\r\n createElement,\r\n DragEvent,\r\n Fragment,\r\n JSX,\r\n JSXElementConstructor,\r\n MouseEvent as ReactMouseEvent,\r\n useImperativeHandle,\r\n useRef,\r\n useState,\r\n} from \"react\"\r\nimport { FileType, getFileData, InputFile, InputFileBaseProps, InputFileDataType, InputFileDataTypeMap, InputFileExtraProps, ValueType } from \"./InputFile\"\r\n\r\nexport type InputFileButtonProps<\r\n Multiple extends boolean = false,\r\n Type extends InputFileDataType = \"file\",\r\n AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"button\",\r\n> = Omit<ComponentProps<AS>, \"as\" | \"type\" | \"disabled\"> &\r\n InputFileExtraProps<Multiple, Type> & {\r\n disabled?: boolean\r\n inputProps?: Omit<InputFileBaseProps, \"accept\">\r\n accept?: string\r\n dragFile?: boolean\r\n as?: AS\r\n }\r\n\r\n/** 专用于读取文件的 button 组件 */\r\nexport function InputFileButton<\r\n Multiple extends boolean = false,\r\n Type extends InputFileDataType = \"file\",\r\n AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"button\",\r\n>(props: InputFileButtonProps<Multiple, Type, AS>) {\r\n const {\r\n as = \"button\",\r\n onClick: _onClick,\r\n inputProps = {},\r\n accept,\r\n onDrop: _onDrop,\r\n onDragOver: _onDragOver,\r\n dragFile,\r\n disabled: _disabled,\r\n type = \"file\",\r\n multiple,\r\n onValueChange,\r\n onFileChange,\r\n clearAfterChange,\r\n ...rest\r\n } = props\r\n\r\n const { ref, style, disabled: __disabled, ...restInputProps } = inputProps\r\n const [disabled, setDisabled] = useState(false)\r\n const input = useRef<HTMLInputElement>(null)\r\n\r\n useImperativeHandle(ref, () => input.current!, [input.current])\r\n\r\n function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {\r\n input.current?.click()\r\n _onClick?.(e as any)\r\n }\r\n\r\n async function onDrop(e: DragEvent<ComponentRef<AS>>) {\r\n _onDrop?.(e as any)\r\n if (disabled || !dragFile) return\r\n e.preventDefault()\r\n const { files } = e.dataTransfer\r\n if (!files || files.length === 0) return\r\n setDisabled(true)\r\n try {\r\n if (multiple) {\r\n const files2: File[] = Array.from(files)\r\n const values: InputFileDataTypeMap[Type][] = []\r\n for (const file of files2) {\r\n const value = (await getFileData(file, type)) as InputFileDataTypeMap[Type]\r\n values.push(value)\r\n }\r\n onFileChange?.(files2 as FileType<Multiple>)\r\n onValueChange?.(values as ValueType<Multiple, Type>)\r\n } else {\r\n const file = files[0]\r\n onFileChange?.(file as FileType<Multiple>)\r\n onValueChange?.((await getFileData(file, type)) as ValueType<Multiple, Type>)\r\n }\r\n } finally {\r\n setDisabled(false)\r\n }\r\n }\r\n\r\n function onDragOver(e: DragEvent<ComponentRef<AS>>) {\r\n _onDragOver?.(e as any)\r\n if (disabled || !dragFile) return\r\n e.preventDefault()\r\n }\r\n\r\n return (\r\n <Fragment>\r\n <InputFile<Multiple, Type>\r\n ref={input}\r\n disabled={disabled || _disabled || __disabled}\r\n style={{ display: \"none\", ...style }}\r\n multiple={multiple}\r\n accept={accept}\r\n type={type as Type}\r\n onValueChange={onValueChange}\r\n onFileChange={onFileChange}\r\n clearAfterChange={clearAfterChange}\r\n {...restInputProps}\r\n />\r\n {createElement(as, {\r\n disabled: disabled || _disabled,\r\n onClick,\r\n onDrop,\r\n onDragOver,\r\n ...rest,\r\n })}\r\n </Fragment>\r\n )\r\n}\r\n"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CSSProperties, ComponentProps, FC,
|
|
1
|
+
import { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode } from "react";
|
|
2
2
|
export interface UnifyConfig {
|
|
3
3
|
className?: string;
|
|
4
4
|
style?: CSSProperties;
|
|
@@ -7,7 +7,7 @@ export interface UnifyConfigProviderProps extends UnifyConfig {
|
|
|
7
7
|
children?: ReactNode;
|
|
8
8
|
}
|
|
9
9
|
export declare const UnifyConfigProvider: FC<UnifyConfigProviderProps>;
|
|
10
|
-
export type UnifyProps<
|
|
11
|
-
as?:
|
|
10
|
+
export type UnifyProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div"> = Omit<ComponentProps<AS>, "as"> & {
|
|
11
|
+
as?: AS;
|
|
12
12
|
};
|
|
13
|
-
export declare function Unify<
|
|
13
|
+
export declare function Unify<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div">(props: UnifyProps<AS>): ReactNode;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import { createContext, createElement, useContext } from "react";
|
|
4
3
|
import { clsx } from "deepsea-tools";
|
|
4
|
+
import { createContext, createElement, useContext } from "react";
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
const UnifyConfigContext = /*#__PURE__*/createContext({});
|
|
7
7
|
export const UnifyConfigProvider = ({
|
|
@@ -26,7 +26,7 @@ export const UnifyConfigProvider = ({
|
|
|
26
26
|
};
|
|
27
27
|
export function Unify(props) {
|
|
28
28
|
const {
|
|
29
|
-
as,
|
|
29
|
+
as = "div",
|
|
30
30
|
className,
|
|
31
31
|
style,
|
|
32
32
|
...rest
|
|
@@ -35,7 +35,7 @@ export function Unify(props) {
|
|
|
35
35
|
className: _className,
|
|
36
36
|
style: _style
|
|
37
37
|
} = useContext(UnifyConfigContext);
|
|
38
|
-
return /*#__PURE__*/createElement(as
|
|
38
|
+
return /*#__PURE__*/createElement(as, {
|
|
39
39
|
className: clsx(_className, className),
|
|
40
40
|
style: {
|
|
41
41
|
..._style,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","createElement","useContext","
|
|
1
|
+
{"version":3,"names":["clsx","createContext","createElement","useContext","jsx","_jsx","UnifyConfigContext","UnifyConfigProvider","className","style","children","_className","_style","Provider","value","Unify","props","as","rest"],"sources":["../../../src/components/Unify.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { clsx } from \"deepsea-tools\"\r\nimport { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode, createContext, createElement, useContext } from \"react\"\r\n\r\nexport interface UnifyConfig {\r\n className?: string\r\n style?: CSSProperties\r\n}\r\n\r\nconst UnifyConfigContext = createContext<UnifyConfig>({})\r\n\r\nexport interface UnifyConfigProviderProps extends UnifyConfig {\r\n children?: ReactNode\r\n}\r\n\r\nexport const UnifyConfigProvider: FC<UnifyConfigProviderProps> = ({ className, style, children }) => {\r\n const { className: _className, style: _style } = useContext(UnifyConfigContext)\r\n\r\n return (\r\n <UnifyConfigContext.Provider value={{ className: clsx(_className, className), style: { ..._style, ...style } }}>{children}</UnifyConfigContext.Provider>\r\n )\r\n}\r\n\r\nexport type UnifyProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"div\"> = Omit<ComponentProps<AS>, \"as\"> & {\r\n as?: AS\r\n}\r\n\r\nexport function Unify<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = \"div\">(props: UnifyProps<AS>) {\r\n const { as = \"div\", className, style, ...rest } = props\r\n const { className: _className, style: _style } = useContext(UnifyConfigContext)\r\n\r\n return createElement(as, {\r\n className: clsx(_className, className),\r\n style: { ..._style, ...style },\r\n ...rest,\r\n }) as ReactNode\r\n}\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,IAAI,QAAQ,eAAe;AACpC,SAAmFC,aAAa,EAAEC,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAO1I,MAAMC,kBAAkB,gBAAGL,aAAa,CAAc,CAAC,CAAC,CAAC;AAMzD,OAAO,MAAMM,mBAAiD,GAAGA,CAAC;EAAEC,SAAS;EAAEC,KAAK;EAAEC;AAAS,CAAC,KAAK;EACjG,MAAM;IAAEF,SAAS,EAAEG,UAAU;IAAEF,KAAK,EAAEG;EAAO,CAAC,GAAGT,UAAU,CAACG,kBAAkB,CAAC;EAE/E,oBACID,IAAA,CAACC,kBAAkB,CAACO,QAAQ;IAACC,KAAK,EAAE;MAAEN,SAAS,EAAER,IAAI,CAACW,UAAU,EAAEH,SAAS,CAAC;MAAEC,KAAK,EAAE;QAAE,GAAGG,MAAM;QAAE,GAAGH;MAAM;IAAE,CAAE;IAAAC,QAAA,EAAEA;EAAQ,CAA8B,CAAC;AAEhK,CAAC;AAMD,OAAO,SAASK,KAAKA,CAA8EC,KAAqB,EAAE;EACtH,MAAM;IAAEC,EAAE,GAAG,KAAK;IAAET,SAAS;IAAEC,KAAK;IAAE,GAAGS;EAAK,CAAC,GAAGF,KAAK;EACvD,MAAM;IAAER,SAAS,EAAEG,UAAU;IAAEF,KAAK,EAAEG;EAAO,CAAC,GAAGT,UAAU,CAACG,kBAAkB,CAAC;EAE/E,oBAAOJ,aAAa,CAACe,EAAE,EAAE;IACrBT,SAAS,EAAER,IAAI,CAACW,UAAU,EAAEH,SAAS,CAAC;IACtCC,KAAK,EAAE;MAAE,GAAGG,MAAM;MAAE,GAAGH;IAAM,CAAC;IAC9B,GAAGS;EACP,CAAC,CAAC;AACN"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,25 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
ComponentProps,
|
|
5
|
+
ComponentRef,
|
|
6
|
+
createElement,
|
|
7
|
+
DragEvent,
|
|
8
|
+
Fragment,
|
|
9
|
+
JSX,
|
|
10
|
+
JSXElementConstructor,
|
|
11
|
+
MouseEvent as ReactMouseEvent,
|
|
12
|
+
useImperativeHandle,
|
|
13
|
+
useRef,
|
|
14
|
+
useState,
|
|
15
|
+
} from "react"
|
|
4
16
|
import { FileType, getFileData, InputFile, InputFileBaseProps, InputFileDataType, InputFileDataTypeMap, InputFileExtraProps, ValueType } from "./InputFile"
|
|
5
17
|
|
|
6
18
|
export type InputFileButtonProps<
|
|
7
19
|
Multiple extends boolean = false,
|
|
8
20
|
Type extends InputFileDataType = "file",
|
|
9
|
-
AS extends keyof JSX.IntrinsicElements = "button",
|
|
10
|
-
> = Omit<ComponentProps<AS>, "type" | "disabled"> &
|
|
21
|
+
AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button",
|
|
22
|
+
> = Omit<ComponentProps<AS>, "as" | "type" | "disabled"> &
|
|
11
23
|
InputFileExtraProps<Multiple, Type> & {
|
|
12
24
|
disabled?: boolean
|
|
13
25
|
inputProps?: Omit<InputFileBaseProps, "accept">
|
|
@@ -17,9 +29,11 @@ export type InputFileButtonProps<
|
|
|
17
29
|
}
|
|
18
30
|
|
|
19
31
|
/** 专用于读取文件的 button 组件 */
|
|
20
|
-
export function InputFileButton<
|
|
21
|
-
|
|
22
|
-
|
|
32
|
+
export function InputFileButton<
|
|
33
|
+
Multiple extends boolean = false,
|
|
34
|
+
Type extends InputFileDataType = "file",
|
|
35
|
+
AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "button",
|
|
36
|
+
>(props: InputFileButtonProps<Multiple, Type, AS>) {
|
|
23
37
|
const {
|
|
24
38
|
as = "button",
|
|
25
39
|
onClick: _onClick,
|
|
@@ -37,10 +51,12 @@ export function InputFileButton<Multiple extends boolean = false, Type extends I
|
|
|
37
51
|
...rest
|
|
38
52
|
} = props
|
|
39
53
|
|
|
40
|
-
const { style, disabled: __disabled, ...restInputProps } = inputProps
|
|
54
|
+
const { ref, style, disabled: __disabled, ...restInputProps } = inputProps
|
|
41
55
|
const [disabled, setDisabled] = useState(false)
|
|
42
56
|
const input = useRef<HTMLInputElement>(null)
|
|
43
57
|
|
|
58
|
+
useImperativeHandle(ref, () => input.current!, [input.current])
|
|
59
|
+
|
|
44
60
|
function onClick(e: ReactMouseEvent<ComponentRef<AS>, MouseEvent>) {
|
|
45
61
|
input.current?.click()
|
|
46
62
|
_onClick?.(e as any)
|
|
@@ -82,6 +98,7 @@ export function InputFileButton<Multiple extends boolean = false, Type extends I
|
|
|
82
98
|
return (
|
|
83
99
|
<Fragment>
|
|
84
100
|
<InputFile<Multiple, Type>
|
|
101
|
+
ref={input}
|
|
85
102
|
disabled={disabled || _disabled || __disabled}
|
|
86
103
|
style={{ display: "none", ...style }}
|
|
87
104
|
multiple={multiple}
|
package/src/components/Unify.tsx
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
|
-
import { CSSProperties, ComponentProps, FC, ReactNode, createContext, createElement, useContext, JSX } from "react"
|
|
4
3
|
import { clsx } from "deepsea-tools"
|
|
4
|
+
import { CSSProperties, ComponentProps, FC, JSX, JSXElementConstructor, ReactNode, createContext, createElement, useContext } from "react"
|
|
5
5
|
|
|
6
6
|
export interface UnifyConfig {
|
|
7
7
|
className?: string
|
|
@@ -22,15 +22,15 @@ export const UnifyConfigProvider: FC<UnifyConfigProviderProps> = ({ className, s
|
|
|
22
22
|
)
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
export type UnifyProps<
|
|
26
|
-
as?:
|
|
25
|
+
export type UnifyProps<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div"> = Omit<ComponentProps<AS>, "as"> & {
|
|
26
|
+
as?: AS
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
export function Unify<
|
|
30
|
-
const { as, className, style, ...rest } = props
|
|
29
|
+
export function Unify<AS extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div">(props: UnifyProps<AS>) {
|
|
30
|
+
const { as = "div", className, style, ...rest } = props
|
|
31
31
|
const { className: _className, style: _style } = useContext(UnifyConfigContext)
|
|
32
32
|
|
|
33
|
-
return createElement(as
|
|
33
|
+
return createElement(as, {
|
|
34
34
|
className: clsx(_className, className),
|
|
35
35
|
style: { ..._style, ...style },
|
|
36
36
|
...rest,
|