deepsea-components 5.7.22 → 5.8.0
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/README.md +23 -23
- package/dist/cjs/components/ExportExcel.d.ts +7 -0
- package/dist/cjs/components/ExportExcel.js +36 -0
- package/dist/cjs/components/ExportExcel.js.map +7 -0
- package/dist/cjs/components/FormLabel.d.ts +6 -5
- package/dist/cjs/components/FormLabel.js +1 -1
- package/dist/cjs/components/FormLabel.js.map +2 -2
- package/dist/cjs/components/ImportExcel.d.ts +7 -0
- package/dist/cjs/components/ImportExcel.js +37 -0
- package/dist/cjs/components/ImportExcel.js.map +7 -0
- package/dist/cjs/components/InputFile.d.ts +0 -14
- package/dist/cjs/components/InputFile.js +0 -37
- package/dist/cjs/components/InputFile.js.map +2 -2
- package/dist/cjs/index.d.ts +2 -0
- package/dist/cjs/index.js +4 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/esm/components/ExportExcel.d.ts +7 -0
- package/dist/esm/components/ExportExcel.js +26 -0
- package/dist/esm/components/ExportExcel.js.map +1 -0
- package/dist/esm/components/FormLabel.d.ts +6 -5
- package/dist/esm/components/FormLabel.js +2 -1
- package/dist/esm/components/FormLabel.js.map +1 -1
- package/dist/esm/components/ImportExcel.d.ts +7 -0
- package/dist/esm/components/ImportExcel.js +23 -0
- package/dist/esm/components/ImportExcel.js.map +1 -0
- package/dist/esm/components/InputFile.d.ts +0 -14
- package/dist/esm/components/InputFile.js +0 -53
- package/dist/esm/components/InputFile.js.map +1 -1
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.js +2 -0
- package/dist/esm/index.js.map +1 -1
- package/package.json +2 -3
- package/src/components/ExportExcel.tsx +18 -0
- package/src/components/FormLabel.tsx +4 -4
- package/src/components/ImportExcel.tsx +17 -0
- package/src/components/InputFile.tsx +0 -54
- package/src/index.ts +2 -0
package/README.md
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
# deepsea-components
|
|
2
|
-
|
|
3
|
-
[](https://npmjs.org/package/deepsea-components)
|
|
4
|
-
[](https://npmjs.org/package/deepsea-components)
|
|
5
|
-
|
|
6
|
-
## Install
|
|
7
|
-
|
|
8
|
-
```bash
|
|
9
|
-
$ yarn install
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
```bash
|
|
13
|
-
$ npm run dev
|
|
14
|
-
$ npm run build
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
## Options
|
|
18
|
-
|
|
19
|
-
TODO
|
|
20
|
-
|
|
21
|
-
## LICENSE
|
|
22
|
-
|
|
23
|
-
MIT
|
|
1
|
+
# deepsea-components
|
|
2
|
+
|
|
3
|
+
[](https://npmjs.org/package/deepsea-components)
|
|
4
|
+
[](https://npmjs.org/package/deepsea-components)
|
|
5
|
+
|
|
6
|
+
## Install
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
$ yarn install
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
$ npm run dev
|
|
14
|
+
$ npm run build
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Options
|
|
18
|
+
|
|
19
|
+
TODO
|
|
20
|
+
|
|
21
|
+
## LICENSE
|
|
22
|
+
|
|
23
|
+
MIT
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ExportExcelParams } from "deepsea-tools";
|
|
2
|
+
import { ComponentPropsWithoutRef } from "react";
|
|
3
|
+
export interface ExportExcelProps extends ComponentPropsWithoutRef<"button">, ExportExcelParams {
|
|
4
|
+
}
|
|
5
|
+
/** 导出 excel 的 button 组件 */
|
|
6
|
+
declare const ExportExcel: import("react").ForwardRefExoticComponent<ExportExcelProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
7
|
+
export default ExportExcel;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/components/ExportExcel.tsx
|
|
20
|
+
var ExportExcel_exports = {};
|
|
21
|
+
__export(ExportExcel_exports, {
|
|
22
|
+
default: () => ExportExcel_default
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(ExportExcel_exports);
|
|
25
|
+
var import_deepsea_tools = require("deepsea-tools");
|
|
26
|
+
var import_react = require("react");
|
|
27
|
+
var ExportExcel = (0, import_react.forwardRef)((props, ref) => {
|
|
28
|
+
const { data, fileName, onClick, ...rest } = props;
|
|
29
|
+
function onButtonClick(e) {
|
|
30
|
+
(0, import_deepsea_tools.exportExcel)({ data, fileName });
|
|
31
|
+
onClick?.(e);
|
|
32
|
+
}
|
|
33
|
+
return /* @__PURE__ */ React.createElement("button", { ref, onClick: onButtonClick, ...rest });
|
|
34
|
+
});
|
|
35
|
+
var ExportExcel_default = ExportExcel;
|
|
36
|
+
//# sourceMappingURL=ExportExcel.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/ExportExcel.tsx"],
|
|
4
|
+
"sourcesContent": ["import { ExportExcelParams, exportExcel } from \"deepsea-tools\"\r\nimport { ComponentPropsWithoutRef, ComponentRef, MouseEvent as ReactMouseEvent, forwardRef } from \"react\"\r\n\r\nexport interface ExportExcelProps extends ComponentPropsWithoutRef<\"button\">, ExportExcelParams {}\r\n\r\n/** 导出 excel 的 button 组件 */\r\nconst ExportExcel = forwardRef<ComponentRef<\"button\">, ExportExcelProps>((props, ref) => {\r\n const { data, fileName, onClick, ...rest } = props\r\n\r\n function onButtonClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\r\n exportExcel({ data, fileName })\r\n onClick?.(e)\r\n }\r\n\r\n return <button ref={ref} onClick={onButtonClick} {...rest} />\r\n})\r\n\r\nexport default ExportExcel\r\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAA+C;AAC/C,mBAAkG;AAKlG,IAAM,kBAAc,yBAAqD,CAAC,OAAO,QAAQ;AACrF,QAAM,EAAE,MAAM,UAAU,SAAS,GAAG,KAAK,IAAI;AAE7C,WAAS,cAAc,GAAmD;AACtE,0CAAY,EAAE,MAAM,SAAS,CAAC;AAC9B,cAAU,CAAC;AAAA,EACf;AAEA,SAAO,oCAAC,YAAO,KAAU,SAAS,eAAgB,GAAG,MAAM;AAC/D,CAAC;AAED,IAAO,sBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, FC, ReactNode } from "react";
|
|
2
|
-
export
|
|
2
|
+
export interface FormLabelConfig {
|
|
3
3
|
/**
|
|
4
4
|
* Label 的宽度.
|
|
5
5
|
*/
|
|
@@ -8,12 +8,13 @@ export type FormLabelConfig = {
|
|
|
8
8
|
* 是否在 Label 前面添加一个空白区域,只有当前 Label 为非必选,而存在其他 Label 为必选的时候开启
|
|
9
9
|
*/
|
|
10
10
|
before?: boolean | number;
|
|
11
|
-
}
|
|
12
|
-
export
|
|
11
|
+
}
|
|
12
|
+
export interface FormLabelProps extends ComponentPropsWithoutRef<"div">, FormLabelConfig {
|
|
13
|
+
}
|
|
13
14
|
export declare const FormLabelConfigContext: import("react").Context<Partial<FormLabelConfig>>;
|
|
14
|
-
export
|
|
15
|
+
export interface FormLabelConfigProviderProps extends FormLabelConfig {
|
|
15
16
|
children?: ReactNode;
|
|
16
|
-
}
|
|
17
|
+
}
|
|
17
18
|
export declare const FormLabelConfigProvider: FC<FormLabelConfigProviderProps>;
|
|
18
19
|
/**
|
|
19
20
|
* 为 Ant Design 的 FormItem 设计的 Label 组件
|
|
@@ -31,7 +31,7 @@ var FormLabelConfigProvider = ({ width, before, children }) => /* @__PURE__ */ R
|
|
|
31
31
|
var FormLabel = (props) => {
|
|
32
32
|
const { width: _width, before: _before } = (0, import_react.useContext)(FormLabelConfigContext);
|
|
33
33
|
const { style, width = _width, before = _before, ...rest } = props;
|
|
34
|
-
return /* @__PURE__ */ React.createElement(import_react.Fragment, null, !!before && /* @__PURE__ */ React.createElement("div", { style: { width: 11, color: "transparent" } }, " "), /* @__PURE__ */ React.createElement("div", { style: { width, textAlign: "justify", textAlignLast: "justify", ...style }, ...rest }));
|
|
34
|
+
return /* @__PURE__ */ React.createElement(import_react.Fragment, null, !!before && /* @__PURE__ */ React.createElement("div", { style: { width: 11, color: "transparent", userSelect: "none" } }, " "), /* @__PURE__ */ React.createElement("div", { style: { width, textAlign: "justify", textAlignLast: "justify", ...style }, ...rest }));
|
|
35
35
|
};
|
|
36
36
|
// Annotate the CommonJS export names for ESM import in node:
|
|
37
37
|
0 && (module.exports = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/FormLabel.tsx"],
|
|
4
|
-
"sourcesContent": ["\"use client\"\n\nimport { ComponentPropsWithoutRef, FC, Fragment, ReactNode, createContext, useContext } from \"react\"\n\nexport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA6F;AAetF,IAAM,6BAAyB,4BAAwC,CAAC,CAAC;AAMzE,IAAM,0BAA4D,CAAC,EAAE,OAAO,QAAQ,SAAS,MAChG,oCAAC,uBAAuB,UAAvB,EAAgC,OAAO,EAAE,OAAO,OAAO,KAAI,QAAS;AAMlE,IAAM,YAAgC,WAAS;AAClD,QAAM,EAAE,OAAO,QAAQ,QAAQ,QAAQ,QAAI,yBAAW,sBAAsB;AAC5E,QAAM,EAAE,OAAO,QAAQ,QAAQ,SAAS,SAAS,GAAG,KAAK,IAAI;AAE7D,SACI,oCAAC,6BACI,CAAC,CAAC,UAAU,oCAAC,SAAI,OAAO,EAAE,OAAO,IAAI,OAAO,
|
|
4
|
+
"sourcesContent": ["\"use client\"\n\nimport { ComponentPropsWithoutRef, FC, Fragment, ReactNode, createContext, useContext } from \"react\"\n\nexport interface FormLabelConfig {\n /**\n * Label 的宽度.\n */\n width?: number\n /**\n * 是否在 Label 前面添加一个空白区域,只有当前 Label 为非必选,而存在其他 Label 为必选的时候开启\n */\n before?: boolean | number\n}\n\nexport interface FormLabelProps extends ComponentPropsWithoutRef<\"div\">, FormLabelConfig {}\n\nexport const FormLabelConfigContext = createContext<Partial<FormLabelConfig>>({})\n\nexport interface FormLabelConfigProviderProps extends FormLabelConfig {\n children?: ReactNode\n}\n\nexport const FormLabelConfigProvider: FC<FormLabelConfigProviderProps> = ({ width, before, children }) => (\n <FormLabelConfigContext.Provider value={{ width, before }}>{children}</FormLabelConfigContext.Provider>\n)\n\n/**\n * 为 Ant Design 的 FormItem 设计的 Label 组件\n */\nexport const FormLabel: FC<FormLabelProps> = props => {\n const { width: _width, before: _before } = useContext(FormLabelConfigContext)\n const { style, width = _width, before = _before, ...rest } = props\n\n return (\n <Fragment>\n {!!before && <div style={{ width: 11, color: \"transparent\", userSelect: \"none\" }}> </div>}\n <div style={{ width, textAlign: \"justify\", textAlignLast: \"justify\", ...style }} {...rest} />\n </Fragment>\n )\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA6F;AAetF,IAAM,6BAAyB,4BAAwC,CAAC,CAAC;AAMzE,IAAM,0BAA4D,CAAC,EAAE,OAAO,QAAQ,SAAS,MAChG,oCAAC,uBAAuB,UAAvB,EAAgC,OAAO,EAAE,OAAO,OAAO,KAAI,QAAS;AAMlE,IAAM,YAAgC,WAAS;AAClD,QAAM,EAAE,OAAO,QAAQ,QAAQ,QAAQ,QAAI,yBAAW,sBAAsB;AAC5E,QAAM,EAAE,OAAO,QAAQ,QAAQ,SAAS,SAAS,GAAG,KAAK,IAAI;AAE7D,SACI,oCAAC,6BACI,CAAC,CAAC,UAAU,oCAAC,SAAI,OAAO,EAAE,OAAO,IAAI,OAAO,eAAe,YAAY,OAAO,KAAG,GAAM,GACxF,oCAAC,SAAI,OAAO,EAAE,OAAO,WAAW,WAAW,eAAe,WAAW,GAAG,MAAM,GAAI,GAAG,MAAM,CAC/F;AAER;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { InputFileProps } from "./InputFile";
|
|
3
|
+
export interface ImportExcelProps extends Omit<InputFileProps, "multiple" | "onChange" | "accept" | "type"> {
|
|
4
|
+
onChange?: (data: Record<string, any>[]) => void;
|
|
5
|
+
}
|
|
6
|
+
/** 专门用于读取 excel 的组件 */
|
|
7
|
+
export declare const ImportExcel: import("react").ForwardRefExoticComponent<ImportExcelProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/components/ImportExcel.tsx
|
|
21
|
+
var ImportExcel_exports = {};
|
|
22
|
+
__export(ImportExcel_exports, {
|
|
23
|
+
ImportExcel: () => ImportExcel
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(ImportExcel_exports);
|
|
26
|
+
var import_deepsea_tools = require("deepsea-tools");
|
|
27
|
+
var import_react = require("react");
|
|
28
|
+
var import_InputFile = require("./InputFile");
|
|
29
|
+
var ImportExcel = (0, import_react.forwardRef)((props, ref) => {
|
|
30
|
+
const { onChange, ...rest } = props;
|
|
31
|
+
return /* @__PURE__ */ React.createElement(import_InputFile.InputFile, { ref, accept: ".xlsx", type: "arrayBuffer", onChange: ({ result }) => onChange?.((0, import_deepsea_tools.readExcel)(result)), ...rest });
|
|
32
|
+
});
|
|
33
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
34
|
+
0 && (module.exports = {
|
|
35
|
+
ImportExcel
|
|
36
|
+
});
|
|
37
|
+
//# sourceMappingURL=ImportExcel.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/ImportExcel.tsx"],
|
|
4
|
+
"sourcesContent": ["\"use client\"\r\n\r\nimport { readExcel } from \"deepsea-tools\"\r\nimport { forwardRef } from \"react\"\r\n\r\nimport { InputFile, InputFileProps } from \"./InputFile\"\r\n\r\nexport interface ImportExcelProps extends Omit<InputFileProps, \"multiple\" | \"onChange\" | \"accept\" | \"type\"> {\r\n onChange?: (data: Record<string, any>[]) => void\r\n}\r\n\r\n/** 专门用于读取 excel 的组件 */\r\nexport const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {\r\n const { onChange, ...rest } = props\r\n\r\n return <InputFile ref={ref} accept=\".xlsx\" type=\"arrayBuffer\" onChange={({ result }) => onChange?.(readExcel(result))} {...rest} />\r\n})\r\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAA0B;AAC1B,mBAA2B;AAE3B,uBAA0C;AAOnC,IAAM,kBAAc,yBAA+C,CAAC,OAAO,QAAQ;AACtF,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAE9B,SAAO,oCAAC,8BAAU,KAAU,QAAO,SAAQ,MAAK,eAAc,UAAU,CAAC,EAAE,OAAO,MAAM,eAAW,gCAAU,MAAM,CAAC,GAAI,GAAG,MAAM;AACrI,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -51,17 +51,3 @@ export declare const InputFileButton: import("react").ForwardRefExoticComponent<
|
|
|
51
51
|
input: InputFileProps;
|
|
52
52
|
dragFile?: boolean | undefined;
|
|
53
53
|
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
54
|
-
export type ExcelItem = Record<string, string | undefined>;
|
|
55
|
-
export interface ImportExcelProps extends Omit<InputFileProps, "multiple" | "onChange" | "accept" | "type"> {
|
|
56
|
-
onChange?: (data: ExcelItem[]) => void;
|
|
57
|
-
}
|
|
58
|
-
/** 专门用于读取 excel 的组件 */
|
|
59
|
-
export declare const ImportExcel: import("react").ForwardRefExoticComponent<ImportExcelProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
60
|
-
/** 手动导出 excel */
|
|
61
|
-
export declare function exportExcel(data: ExcelItem[], name: string): void;
|
|
62
|
-
export interface ExportExcelProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
63
|
-
data: ExcelItem[];
|
|
64
|
-
fileName: string;
|
|
65
|
-
}
|
|
66
|
-
/** 导出 excel 的 button 组件 */
|
|
67
|
-
export declare const ExportExcel: import("react").ForwardRefExoticComponent<ExportExcelProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -20,16 +20,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/components/InputFile.tsx
|
|
21
21
|
var InputFile_exports = {};
|
|
22
22
|
__export(InputFile_exports, {
|
|
23
|
-
ExportExcel: () => ExportExcel,
|
|
24
|
-
ImportExcel: () => ImportExcel,
|
|
25
23
|
InputFile: () => InputFile,
|
|
26
24
|
InputFileButton: () => InputFileButton,
|
|
27
|
-
exportExcel: () => exportExcel,
|
|
28
25
|
getFileData: () => getFileData
|
|
29
26
|
});
|
|
30
27
|
module.exports = __toCommonJS(InputFile_exports);
|
|
31
28
|
var import_react = require("react");
|
|
32
|
-
var import_xlsx = require("xlsx");
|
|
33
29
|
async function getFileData(file, type) {
|
|
34
30
|
const fileReader = new FileReader();
|
|
35
31
|
switch (type) {
|
|
@@ -144,43 +140,10 @@ var InputFileButton = (0, import_react.forwardRef)((props, ref) => {
|
|
|
144
140
|
}
|
|
145
141
|
), /* @__PURE__ */ React.createElement("button", { ref, type: "button", disabled: disabled || _disabled, onClick, onDrop, onDragOver, ...rest }));
|
|
146
142
|
});
|
|
147
|
-
var ImportExcel = (0, import_react.forwardRef)((props, ref) => {
|
|
148
|
-
const { onChange, ...rest } = props;
|
|
149
|
-
function onInputChange(data) {
|
|
150
|
-
const wb = (0, import_xlsx.read)(data.result);
|
|
151
|
-
const result = import_xlsx.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
|
|
152
|
-
if (typeof result === "object") {
|
|
153
|
-
const $ = result.map((it) => {
|
|
154
|
-
const _ = {};
|
|
155
|
-
Object.keys(it).filter((key) => key !== "__rowNum__").forEach((key) => _[key] = String(it[key]));
|
|
156
|
-
return _;
|
|
157
|
-
});
|
|
158
|
-
onChange?.($);
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
return /* @__PURE__ */ React.createElement(InputFile, { ref, accept: ".xlsx", type: "arrayBuffer", onChange: onInputChange, ...rest });
|
|
162
|
-
});
|
|
163
|
-
function exportExcel(data, name) {
|
|
164
|
-
const workSheet = import_xlsx.utils.json_to_sheet(data);
|
|
165
|
-
const workBook = import_xlsx.utils.book_new();
|
|
166
|
-
import_xlsx.utils.book_append_sheet(workBook, workSheet);
|
|
167
|
-
(0, import_xlsx.writeFile)(workBook, `${name}${name.endsWith(".xlsx") ? "" : ".xlsx"}`);
|
|
168
|
-
}
|
|
169
|
-
var ExportExcel = (0, import_react.forwardRef)((props, ref) => {
|
|
170
|
-
const { data, fileName, onClick, ...rest } = props;
|
|
171
|
-
function onButtonClick(e) {
|
|
172
|
-
exportExcel(data, fileName);
|
|
173
|
-
onClick?.(e);
|
|
174
|
-
}
|
|
175
|
-
return /* @__PURE__ */ React.createElement("button", { ref, onClick: onButtonClick, ...rest });
|
|
176
|
-
});
|
|
177
143
|
// Annotate the CommonJS export names for ESM import in node:
|
|
178
144
|
0 && (module.exports = {
|
|
179
|
-
ExportExcel,
|
|
180
|
-
ImportExcel,
|
|
181
145
|
InputFile,
|
|
182
146
|
InputFileButton,
|
|
183
|
-
exportExcel,
|
|
184
147
|
getFileData
|
|
185
148
|
});
|
|
186
149
|
//# sourceMappingURL=InputFile.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/InputFile.tsx"],
|
|
4
|
-
"sourcesContent": ["\"use client\"\n\nimport { ButtonHTMLAttributes, ChangeEvent, DragEvent, Fragment, InputHTMLAttributes, MouseEvent as ReactMouseEvent, forwardRef, useRef, useState } from \"react\"\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["\"use client\"\n\nimport { ButtonHTMLAttributes, ChangeEvent, DragEvent, Fragment, InputHTMLAttributes, MouseEvent as ReactMouseEvent, forwardRef, useRef, useState } from \"react\"\n\nexport interface InputFileDataTypes {\n base64: string\n text: string\n arrayBuffer: ArrayBuffer\n binary: string\n file: File\n}\n\nexport type InputFileDataType = keyof InputFileDataTypes\n\nexport interface InputFileData<T> {\n result: T\n file: File\n}\n\nexport type InputFileProps = (\n | {\n multiple?: false\n type: \"base64\" | \"text\" | \"binary\"\n onChange?: (data: InputFileData<string>) => void\n }\n | {\n multiple?: false\n type: \"arrayBuffer\"\n onChange?: (data: InputFileData<ArrayBuffer>) => void\n }\n | {\n multiple?: false\n type?: \"file\"\n onChange?: (data: InputFileData<File>) => void\n }\n | {\n multiple: true\n type: \"base64\" | \"text\" | \"binary\"\n onChange?: (data: InputFileData<string>[]) => void\n }\n | {\n multiple: true\n type: \"arrayBuffer\"\n onChange?: (data: InputFileData<ArrayBuffer>[]) => void\n }\n | {\n multiple: true\n type?: \"file\"\n onChange?: (data: InputFileData<File>[]) => void\n }\n) &\n Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"multiple\" | \"type\"> & {\n /** 是否在捕获文件后清除 input 上的文件,默认为 false,主要区别在于如果不清除,连续两次选择同样的文件不会触发 onChange 事件,如果用于 form 表单,请设置为 flase */\n clearAfterChange?: boolean\n }\n\nexport async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypes[T]> {\n const fileReader = new FileReader()\n switch (type) {\n case \"arrayBuffer\":\n fileReader.readAsArrayBuffer(file)\n break\n case \"binary\":\n fileReader.readAsBinaryString(file)\n break\n case \"base64\":\n fileReader.readAsDataURL(file)\n break\n case \"text\":\n fileReader.readAsText(file)\n break\n default:\n return file as any\n }\n return new Promise(resolve => {\n fileReader.addEventListener(\"load\", () => {\n resolve(fileReader.result as any)\n })\n })\n}\n\n/** 专用于读取文件的组件 */\nexport const InputFile = forwardRef<HTMLInputElement, InputFileProps>((props, ref) => {\n const { multiple = false, type = \"file\", onChange, disabled: inputDisabled, clearAfterChange, ...rest } = props\n const [disabled, setDisabled] = useState(false)\n\n async function onInputChange(e: ChangeEvent<HTMLInputElement>) {\n const input = e.target\n const { files } = input\n if (!files || files.length === 0) return\n setDisabled(true)\n try {\n if (multiple) {\n const result: any[] = []\n for (const file of Array.from(files)) {\n result.push({\n result: await getFileData(file, type),\n file,\n })\n }\n onChange?.(result as any)\n } else {\n onChange?.({\n result: await getFileData(files[0], type),\n file: files[0],\n } as any)\n }\n } finally {\n if (clearAfterChange) input.value = \"\"\n setDisabled(false)\n }\n }\n\n return <input ref={ref} disabled={disabled || inputDisabled} type=\"file\" multiple={multiple} onChange={onInputChange} {...rest} />\n})\n\nexport type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n input: InputFileProps\n dragFile?: boolean\n}\n\n/** 专用于读取文件的 button 组件 */\nexport const InputFileButton = forwardRef<HTMLButtonElement, InputFileButtonProps>((props, ref) => {\n const { onClick: _onClick, input: inputProps, onDrop: _onDrop, onDragOver: _onDragOver, dragFile, disabled: _disabled, ...rest } = props\n const { style, disabled: __disabled, multiple, onChange, type = \"file\", ...restInputProps } = inputProps\n const [disabled, setDisabled] = useState(false)\n const input = useRef<HTMLInputElement>(null)\n\n function onClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\n input.current?.click()\n _onClick?.(e)\n }\n\n async function onDrop(e: DragEvent<HTMLButtonElement>) {\n _onDrop?.(e)\n if (disabled || !dragFile) return\n e.preventDefault()\n const { files } = e.dataTransfer\n if (!files || files.length === 0) return\n setDisabled(true)\n try {\n if (multiple) {\n const result: any[] = []\n for (const file of Array.from(files)) {\n result.push({\n result: await getFileData(file, type),\n file,\n })\n }\n onChange?.(result as any)\n } else {\n onChange?.({\n result: await getFileData(files[0], type),\n file: files[0],\n } as any)\n }\n } finally {\n setDisabled(false)\n }\n }\n\n function onDragOver(e: DragEvent<HTMLButtonElement>) {\n _onDragOver?.(e)\n if (disabled || !dragFile) return\n e.preventDefault()\n }\n\n return (\n <Fragment>\n <InputFile\n ref={input}\n disabled={disabled || _disabled || __disabled}\n style={{ display: \"none\", ...style }}\n multiple={multiple as any}\n onChange={onChange as any}\n type={type as any}\n {...restInputProps}\n />\n <button ref={ref} type=\"button\" disabled={disabled || _disabled} onClick={onClick} onDrop={onDrop} onDragOver={onDragOver} {...rest} />\n </Fragment>\n )\n})\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -4,9 +4,11 @@ export * from "./components/AutoSizeTextarea";
|
|
|
4
4
|
export * from "./components/CircleText";
|
|
5
5
|
export * from "./components/CopyButton";
|
|
6
6
|
export * from "./components/Echart";
|
|
7
|
+
export * from "./components/ExportExcel";
|
|
7
8
|
export * from "./components/Flow";
|
|
8
9
|
export * from "./components/FormLabel";
|
|
9
10
|
export * from "./components/HlsPlayer";
|
|
11
|
+
export * from "./components/ImportExcel";
|
|
10
12
|
export * from "./components/InfiniteScroll";
|
|
11
13
|
export * from "./components/InputFile";
|
|
12
14
|
export * from "./components/LoopSwiper";
|
package/dist/cjs/index.js
CHANGED
|
@@ -22,9 +22,11 @@ __reExport(src_exports, require("./components/AutoSizeTextarea"), module.exports
|
|
|
22
22
|
__reExport(src_exports, require("./components/CircleText"), module.exports);
|
|
23
23
|
__reExport(src_exports, require("./components/CopyButton"), module.exports);
|
|
24
24
|
__reExport(src_exports, require("./components/Echart"), module.exports);
|
|
25
|
+
__reExport(src_exports, require("./components/ExportExcel"), module.exports);
|
|
25
26
|
__reExport(src_exports, require("./components/Flow"), module.exports);
|
|
26
27
|
__reExport(src_exports, require("./components/FormLabel"), module.exports);
|
|
27
28
|
__reExport(src_exports, require("./components/HlsPlayer"), module.exports);
|
|
29
|
+
__reExport(src_exports, require("./components/ImportExcel"), module.exports);
|
|
28
30
|
__reExport(src_exports, require("./components/InfiniteScroll"), module.exports);
|
|
29
31
|
__reExport(src_exports, require("./components/InputFile"), module.exports);
|
|
30
32
|
__reExport(src_exports, require("./components/LoopSwiper"), module.exports);
|
|
@@ -46,9 +48,11 @@ __reExport(src_exports, require("./utils/index"), module.exports);
|
|
|
46
48
|
...require("./components/CircleText"),
|
|
47
49
|
...require("./components/CopyButton"),
|
|
48
50
|
...require("./components/Echart"),
|
|
51
|
+
...require("./components/ExportExcel"),
|
|
49
52
|
...require("./components/Flow"),
|
|
50
53
|
...require("./components/FormLabel"),
|
|
51
54
|
...require("./components/HlsPlayer"),
|
|
55
|
+
...require("./components/ImportExcel"),
|
|
52
56
|
...require("./components/InfiniteScroll"),
|
|
53
57
|
...require("./components/InputFile"),
|
|
54
58
|
...require("./components/LoopSwiper"),
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts"],
|
|
4
|
-
"sourcesContent": ["export * from \"@/components/AutoFit\"\nexport * from \"@/components/AutoScroll\"\nexport * from \"@/components/AutoSizeTextarea\"\nexport * from \"@/components/CircleText\"\nexport * from \"@/components/CopyButton\"\nexport * from \"@/components/Echart\"\nexport * from \"@/components/Flow\"\nexport * from \"@/components/FormLabel\"\nexport * from \"@/components/HlsPlayer\"\nexport * from \"@/components/InfiniteScroll\"\nexport * from \"@/components/InputFile\"\nexport * from \"@/components/LoopSwiper\"\nexport * from \"@/components/Ring\"\nexport * from \"@/components/Scroll\"\nexport * from \"@/components/SectionRing\"\nexport * from \"@/components/Skeleton\"\nexport * from \"@/components/Title\"\nexport * from \"@/components/TransitionBox\"\nexport * from \"@/components/TransitionNum\"\nexport * from \"@/components/Trapezium\"\nexport * from \"@/utils/getReactVersion\"\nexport * from \"@/utils/index\"\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,0CAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,oCAJd;AAKA,wBAAc,gCALd;AAMA,wBAAc,
|
|
4
|
+
"sourcesContent": ["export * from \"@/components/AutoFit\"\nexport * from \"@/components/AutoScroll\"\nexport * from \"@/components/AutoSizeTextarea\"\nexport * from \"@/components/CircleText\"\nexport * from \"@/components/CopyButton\"\nexport * from \"@/components/Echart\"\nexport * from \"@/components/ExportExcel\"\nexport * from \"@/components/Flow\"\nexport * from \"@/components/FormLabel\"\nexport * from \"@/components/HlsPlayer\"\nexport * from \"@/components/ImportExcel\"\nexport * from \"@/components/InfiniteScroll\"\nexport * from \"@/components/InputFile\"\nexport * from \"@/components/LoopSwiper\"\nexport * from \"@/components/Ring\"\nexport * from \"@/components/Scroll\"\nexport * from \"@/components/SectionRing\"\nexport * from \"@/components/Skeleton\"\nexport * from \"@/components/Title\"\nexport * from \"@/components/TransitionBox\"\nexport * from \"@/components/TransitionNum\"\nexport * from \"@/components/Trapezium\"\nexport * from \"@/utils/getReactVersion\"\nexport * from \"@/utils/index\"\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,wBAAc,iCAAd;AACA,wBAAc,oCADd;AAEA,wBAAc,0CAFd;AAGA,wBAAc,oCAHd;AAIA,wBAAc,oCAJd;AAKA,wBAAc,gCALd;AAMA,wBAAc,qCANd;AAOA,wBAAc,8BAPd;AAQA,wBAAc,mCARd;AASA,wBAAc,mCATd;AAUA,wBAAc,qCAVd;AAWA,wBAAc,wCAXd;AAYA,wBAAc,mCAZd;AAaA,wBAAc,oCAbd;AAcA,wBAAc,8BAdd;AAeA,wBAAc,gCAfd;AAgBA,wBAAc,qCAhBd;AAiBA,wBAAc,kCAjBd;AAkBA,wBAAc,+BAlBd;AAmBA,wBAAc,uCAnBd;AAoBA,wBAAc,uCApBd;AAqBA,wBAAc,mCArBd;AAsBA,wBAAc,oCAtBd;AAuBA,wBAAc,0BAvBd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ExportExcelParams } from "deepsea-tools";
|
|
2
|
+
import { ComponentPropsWithoutRef } from "react";
|
|
3
|
+
export interface ExportExcelProps extends ComponentPropsWithoutRef<"button">, ExportExcelParams {
|
|
4
|
+
}
|
|
5
|
+
/** 导出 excel 的 button 组件 */
|
|
6
|
+
declare const ExportExcel: import("react").ForwardRefExoticComponent<ExportExcelProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
7
|
+
export default ExportExcel;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { exportExcel } from "deepsea-tools";
|
|
2
|
+
import { forwardRef } from "react";
|
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
+
/** 导出 excel 的 button 组件 */
|
|
5
|
+
const ExportExcel = /*#__PURE__*/forwardRef((props, ref) => {
|
|
6
|
+
const {
|
|
7
|
+
data,
|
|
8
|
+
fileName,
|
|
9
|
+
onClick,
|
|
10
|
+
...rest
|
|
11
|
+
} = props;
|
|
12
|
+
function onButtonClick(e) {
|
|
13
|
+
exportExcel({
|
|
14
|
+
data,
|
|
15
|
+
fileName
|
|
16
|
+
});
|
|
17
|
+
onClick?.(e);
|
|
18
|
+
}
|
|
19
|
+
return /*#__PURE__*/_jsx("button", {
|
|
20
|
+
ref: ref,
|
|
21
|
+
onClick: onButtonClick,
|
|
22
|
+
...rest
|
|
23
|
+
});
|
|
24
|
+
});
|
|
25
|
+
export default ExportExcel;
|
|
26
|
+
//# sourceMappingURL=ExportExcel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["exportExcel","forwardRef","jsx","_jsx","ExportExcel","props","ref","data","fileName","onClick","rest","onButtonClick","e"],"sources":["../../../src/components/ExportExcel.tsx"],"sourcesContent":["import { ExportExcelParams, exportExcel } from \"deepsea-tools\"\r\nimport { ComponentPropsWithoutRef, ComponentRef, MouseEvent as ReactMouseEvent, forwardRef } from \"react\"\r\n\r\nexport interface ExportExcelProps extends ComponentPropsWithoutRef<\"button\">, ExportExcelParams {}\r\n\r\n/** 导出 excel 的 button 组件 */\r\nconst ExportExcel = forwardRef<ComponentRef<\"button\">, ExportExcelProps>((props, ref) => {\r\n const { data, fileName, onClick, ...rest } = props\r\n\r\n function onButtonClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\r\n exportExcel({ data, fileName })\r\n onClick?.(e)\r\n }\r\n\r\n return <button ref={ref} onClick={onButtonClick} {...rest} />\r\n})\r\n\r\nexport default ExportExcel\r\n"],"mappings":"AAAA,SAA4BA,WAAW,QAAQ,eAAe;AAC9D,SAAgFC,UAAU,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIzG;AACA,MAAMC,WAAW,gBAAGH,UAAU,CAA2C,CAACI,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,OAAO;IAAE,GAAGC;EAAK,CAAC,GAAGL,KAAK;EAElD,SAASM,aAAaA,CAACC,CAAiD,EAAE;IACtEZ,WAAW,CAAC;MAAEO,IAAI;MAAEC;IAAS,CAAC,CAAC;IAC/BC,OAAO,GAAGG,CAAC,CAAC;EAChB;EAEA,oBAAOT,IAAA;IAAQG,GAAG,EAAEA,GAAI;IAACG,OAAO,EAAEE,aAAc;IAAA,GAAKD;EAAI,CAAG,CAAC;AACjE,CAAC,CAAC;AAEF,eAAeN,WAAW"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, FC, ReactNode } from "react";
|
|
2
|
-
export
|
|
2
|
+
export interface FormLabelConfig {
|
|
3
3
|
/**
|
|
4
4
|
* Label 的宽度.
|
|
5
5
|
*/
|
|
@@ -8,12 +8,13 @@ export type FormLabelConfig = {
|
|
|
8
8
|
* 是否在 Label 前面添加一个空白区域,只有当前 Label 为非必选,而存在其他 Label 为必选的时候开启
|
|
9
9
|
*/
|
|
10
10
|
before?: boolean | number;
|
|
11
|
-
}
|
|
12
|
-
export
|
|
11
|
+
}
|
|
12
|
+
export interface FormLabelProps extends ComponentPropsWithoutRef<"div">, FormLabelConfig {
|
|
13
|
+
}
|
|
13
14
|
export declare const FormLabelConfigContext: import("react").Context<Partial<FormLabelConfig>>;
|
|
14
|
-
export
|
|
15
|
+
export interface FormLabelConfigProviderProps extends FormLabelConfig {
|
|
15
16
|
children?: ReactNode;
|
|
16
|
-
}
|
|
17
|
+
}
|
|
17
18
|
export declare const FormLabelConfigProvider: FC<FormLabelConfigProviderProps>;
|
|
18
19
|
/**
|
|
19
20
|
* 为 Ant Design 的 FormItem 设计的 Label 组件
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Fragment","createContext","useContext","jsx","_jsx","jsxs","_jsxs","FormLabelConfigContext","FormLabelConfigProvider","width","before","children","Provider","value","FormLabel","props","_width","_before","style","rest","color","textAlign","textAlignLast"],"sources":["../../../src/components/FormLabel.tsx"],"sourcesContent":["\"use client\"\n\nimport { ComponentPropsWithoutRef, FC, Fragment, ReactNode, createContext, useContext } from \"react\"\n\nexport
|
|
1
|
+
{"version":3,"names":["Fragment","createContext","useContext","jsx","_jsx","jsxs","_jsxs","FormLabelConfigContext","FormLabelConfigProvider","width","before","children","Provider","value","FormLabel","props","_width","_before","style","rest","color","userSelect","textAlign","textAlignLast"],"sources":["../../../src/components/FormLabel.tsx"],"sourcesContent":["\"use client\"\n\nimport { ComponentPropsWithoutRef, FC, Fragment, ReactNode, createContext, useContext } from \"react\"\n\nexport interface FormLabelConfig {\n /**\n * Label 的宽度.\n */\n width?: number\n /**\n * 是否在 Label 前面添加一个空白区域,只有当前 Label 为非必选,而存在其他 Label 为必选的时候开启\n */\n before?: boolean | number\n}\n\nexport interface FormLabelProps extends ComponentPropsWithoutRef<\"div\">, FormLabelConfig {}\n\nexport const FormLabelConfigContext = createContext<Partial<FormLabelConfig>>({})\n\nexport interface FormLabelConfigProviderProps extends FormLabelConfig {\n children?: ReactNode\n}\n\nexport const FormLabelConfigProvider: FC<FormLabelConfigProviderProps> = ({ width, before, children }) => (\n <FormLabelConfigContext.Provider value={{ width, before }}>{children}</FormLabelConfigContext.Provider>\n)\n\n/**\n * 为 Ant Design 的 FormItem 设计的 Label 组件\n */\nexport const FormLabel: FC<FormLabelProps> = props => {\n const { width: _width, before: _before } = useContext(FormLabelConfigContext)\n const { style, width = _width, before = _before, ...rest } = props\n\n return (\n <Fragment>\n {!!before && <div style={{ width: 11, color: \"transparent\", userSelect: \"none\" }}> </div>}\n <div style={{ width, textAlign: \"justify\", textAlignLast: \"justify\", ...style }} {...rest} />\n </Fragment>\n )\n}\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAuCA,QAAQ,EAAaC,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAepG,OAAO,MAAMC,sBAAsB,gBAAGN,aAAa,CAA2B,CAAC,CAAC,CAAC;AAMjF,OAAO,MAAMO,uBAAyD,GAAGA,CAAC;EAAEC,KAAK;EAAEC,MAAM;EAAEC;AAAS,CAAC,kBACjGP,IAAA,CAACG,sBAAsB,CAACK,QAAQ;EAACC,KAAK,EAAE;IAAEJ,KAAK;IAAEC;EAAO,CAAE;EAAAC,QAAA,EAAEA;AAAQ,CAAkC,CACzG;;AAED;AACA;AACA;AACA,OAAO,MAAMG,SAA6B,GAAGC,KAAK,IAAI;EAClD,MAAM;IAAEN,KAAK,EAAEO,MAAM;IAAEN,MAAM,EAAEO;EAAQ,CAAC,GAAGf,UAAU,CAACK,sBAAsB,CAAC;EAC7E,MAAM;IAAEW,KAAK;IAAET,KAAK,GAAGO,MAAM;IAAEN,MAAM,GAAGO,OAAO;IAAE,GAAGE;EAAK,CAAC,GAAGJ,KAAK;EAElE,oBACIT,KAAA,CAACN,QAAQ;IAAAW,QAAA,GACJ,CAAC,CAACD,MAAM,iBAAIN,IAAA;MAAKc,KAAK,EAAE;QAAET,KAAK,EAAE,EAAE;QAAEW,KAAK,EAAE,aAAa;QAAEC,UAAU,EAAE;MAAO,CAAE;MAAAV,QAAA,EAAC;IAAM,CAAK,CAAC,eAC9FP,IAAA;MAAKc,KAAK,EAAE;QAAET,KAAK;QAAEa,SAAS,EAAE,SAAS;QAAEC,aAAa,EAAE,SAAS;QAAE,GAAGL;MAAM,CAAE;MAAA,GAAKC;IAAI,CAAG,CAAC;EAAA,CACvF,CAAC;AAEnB,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { InputFileProps } from "./InputFile";
|
|
3
|
+
export interface ImportExcelProps extends Omit<InputFileProps, "multiple" | "onChange" | "accept" | "type"> {
|
|
4
|
+
onChange?: (data: Record<string, any>[]) => void;
|
|
5
|
+
}
|
|
6
|
+
/** 专门用于读取 excel 的组件 */
|
|
7
|
+
export declare const ImportExcel: import("react").ForwardRefExoticComponent<ImportExcelProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { readExcel } from "deepsea-tools";
|
|
4
|
+
import { forwardRef } from "react";
|
|
5
|
+
import { InputFile } from "./InputFile";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
/** 专门用于读取 excel 的组件 */
|
|
8
|
+
export const ImportExcel = /*#__PURE__*/forwardRef((props, ref) => {
|
|
9
|
+
const {
|
|
10
|
+
onChange,
|
|
11
|
+
...rest
|
|
12
|
+
} = props;
|
|
13
|
+
return /*#__PURE__*/_jsx(InputFile, {
|
|
14
|
+
ref: ref,
|
|
15
|
+
accept: ".xlsx",
|
|
16
|
+
type: "arrayBuffer",
|
|
17
|
+
onChange: ({
|
|
18
|
+
result
|
|
19
|
+
}) => onChange?.(readExcel(result)),
|
|
20
|
+
...rest
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
//# sourceMappingURL=ImportExcel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["readExcel","forwardRef","InputFile","jsx","_jsx","ImportExcel","props","ref","onChange","rest","accept","type","result"],"sources":["../../../src/components/ImportExcel.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { readExcel } from \"deepsea-tools\"\r\nimport { forwardRef } from \"react\"\r\n\r\nimport { InputFile, InputFileProps } from \"./InputFile\"\r\n\r\nexport interface ImportExcelProps extends Omit<InputFileProps, \"multiple\" | \"onChange\" | \"accept\" | \"type\"> {\r\n onChange?: (data: Record<string, any>[]) => void\r\n}\r\n\r\n/** 专门用于读取 excel 的组件 */\r\nexport const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {\r\n const { onChange, ...rest } = props\r\n\r\n return <InputFile ref={ref} accept=\".xlsx\" type=\"arrayBuffer\" onChange={({ result }) => onChange?.(readExcel(result))} {...rest} />\r\n})\r\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,SAAS,QAAQ,eAAe;AACzC,SAASC,UAAU,QAAQ,OAAO;AAElC,SAASC,SAAS;AAAqC,SAAAC,GAAA,IAAAC,IAAA;AAMvD;AACA,OAAO,MAAMC,WAAW,gBAAGJ,UAAU,CAAqC,CAACK,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;IAAEC,QAAQ;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAEnC,oBAAOF,IAAA,CAACF,SAAS;IAACK,GAAG,EAAEA,GAAI;IAACG,MAAM,EAAC,OAAO;IAACC,IAAI,EAAC,aAAa;IAACH,QAAQ,EAAEA,CAAC;MAAEI;IAAO,CAAC,KAAKJ,QAAQ,GAAGR,SAAS,CAACY,MAAM,CAAC,CAAE;IAAA,GAAKH;EAAI,CAAG,CAAC;AACvI,CAAC,CAAC"}
|
|
@@ -51,17 +51,3 @@ export declare const InputFileButton: import("react").ForwardRefExoticComponent<
|
|
|
51
51
|
input: InputFileProps;
|
|
52
52
|
dragFile?: boolean | undefined;
|
|
53
53
|
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
54
|
-
export type ExcelItem = Record<string, string | undefined>;
|
|
55
|
-
export interface ImportExcelProps extends Omit<InputFileProps, "multiple" | "onChange" | "accept" | "type"> {
|
|
56
|
-
onChange?: (data: ExcelItem[]) => void;
|
|
57
|
-
}
|
|
58
|
-
/** 专门用于读取 excel 的组件 */
|
|
59
|
-
export declare const ImportExcel: import("react").ForwardRefExoticComponent<ImportExcelProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
60
|
-
/** 手动导出 excel */
|
|
61
|
-
export declare function exportExcel(data: ExcelItem[], name: string): void;
|
|
62
|
-
export interface ExportExcelProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
63
|
-
data: ExcelItem[];
|
|
64
|
-
fileName: string;
|
|
65
|
-
}
|
|
66
|
-
/** 导出 excel 的 button 组件 */
|
|
67
|
-
export declare const ExportExcel: import("react").ForwardRefExoticComponent<ExportExcelProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import { Fragment, forwardRef, useRef, useState } from "react";
|
|
4
|
-
import { read, utils, writeFile } from "xlsx";
|
|
5
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
5
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
6
|
export async function getFileData(file, type) {
|
|
@@ -159,56 +158,4 @@ export const InputFileButton = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
159
158
|
})]
|
|
160
159
|
});
|
|
161
160
|
});
|
|
162
|
-
/** 专门用于读取 excel 的组件 */
|
|
163
|
-
export const ImportExcel = /*#__PURE__*/forwardRef((props, ref) => {
|
|
164
|
-
const {
|
|
165
|
-
onChange,
|
|
166
|
-
...rest
|
|
167
|
-
} = props;
|
|
168
|
-
function onInputChange(data) {
|
|
169
|
-
const wb = read(data.result);
|
|
170
|
-
const result = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
|
|
171
|
-
if (typeof result === "object") {
|
|
172
|
-
const $ = result.map(it => {
|
|
173
|
-
const _ = {};
|
|
174
|
-
Object.keys(it).filter(key => key !== "__rowNum__").forEach(key => _[key] = String(it[key]));
|
|
175
|
-
return _;
|
|
176
|
-
});
|
|
177
|
-
onChange?.($);
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
return /*#__PURE__*/_jsx(InputFile, {
|
|
181
|
-
ref: ref,
|
|
182
|
-
accept: ".xlsx",
|
|
183
|
-
type: "arrayBuffer",
|
|
184
|
-
onChange: onInputChange,
|
|
185
|
-
...rest
|
|
186
|
-
});
|
|
187
|
-
});
|
|
188
|
-
|
|
189
|
-
/** 手动导出 excel */
|
|
190
|
-
export function exportExcel(data, name) {
|
|
191
|
-
const workSheet = utils.json_to_sheet(data);
|
|
192
|
-
const workBook = utils.book_new();
|
|
193
|
-
utils.book_append_sheet(workBook, workSheet);
|
|
194
|
-
writeFile(workBook, `${name}${name.endsWith(".xlsx") ? "" : ".xlsx"}`);
|
|
195
|
-
}
|
|
196
|
-
/** 导出 excel 的 button 组件 */
|
|
197
|
-
export const ExportExcel = /*#__PURE__*/forwardRef((props, ref) => {
|
|
198
|
-
const {
|
|
199
|
-
data,
|
|
200
|
-
fileName,
|
|
201
|
-
onClick,
|
|
202
|
-
...rest
|
|
203
|
-
} = props;
|
|
204
|
-
function onButtonClick(e) {
|
|
205
|
-
exportExcel(data, fileName);
|
|
206
|
-
onClick?.(e);
|
|
207
|
-
}
|
|
208
|
-
return /*#__PURE__*/_jsx("button", {
|
|
209
|
-
ref: ref,
|
|
210
|
-
onClick: onButtonClick,
|
|
211
|
-
...rest
|
|
212
|
-
});
|
|
213
|
-
});
|
|
214
161
|
//# sourceMappingURL=InputFile.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Fragment","forwardRef","useRef","useState","read","utils","writeFile","jsx","_jsx","jsxs","_jsxs","getFileData","file","type","fileReader","FileReader","readAsArrayBuffer","readAsBinaryString","readAsDataURL","readAsText","Promise","resolve","addEventListener","result","InputFile","props","ref","multiple","onChange","disabled","inputDisabled","clearAfterChange","rest","setDisabled","onInputChange","e","input","target","files","length","Array","from","push","value","InputFileButton","onClick","_onClick","inputProps","onDrop","_onDrop","onDragOver","_onDragOver","dragFile","_disabled","style","__disabled","restInputProps","current","click","preventDefault","dataTransfer","children","display","ImportExcel","data","wb","sheet_to_json","Sheets","SheetNames","$","map","it","_","Object","keys","filter","key","forEach","String","accept","exportExcel","name","workSheet","json_to_sheet","workBook","book_new","book_append_sheet","endsWith","ExportExcel","fileName","onButtonClick"],"sources":["../../../src/components/InputFile.tsx"],"sourcesContent":["\"use client\"\n\nimport { ButtonHTMLAttributes, ChangeEvent, DragEvent, Fragment, InputHTMLAttributes, MouseEvent as ReactMouseEvent, forwardRef, useRef, useState } from \"react\"\nimport { read, utils, writeFile } from \"xlsx\"\n\nexport interface InputFileDataTypes {\n base64: string\n text: string\n arrayBuffer: ArrayBuffer\n binary: string\n file: File\n}\n\nexport type InputFileDataType = keyof InputFileDataTypes\n\nexport interface InputFileData<T> {\n result: T\n file: File\n}\n\nexport type InputFileProps = (\n | {\n multiple?: false\n type: \"base64\" | \"text\" | \"binary\"\n onChange?: (data: InputFileData<string>) => void\n }\n | {\n multiple?: false\n type: \"arrayBuffer\"\n onChange?: (data: InputFileData<ArrayBuffer>) => void\n }\n | {\n multiple?: false\n type?: \"file\"\n onChange?: (data: InputFileData<File>) => void\n }\n | {\n multiple: true\n type: \"base64\" | \"text\" | \"binary\"\n onChange?: (data: InputFileData<string>[]) => void\n }\n | {\n multiple: true\n type: \"arrayBuffer\"\n onChange?: (data: InputFileData<ArrayBuffer>[]) => void\n }\n | {\n multiple: true\n type?: \"file\"\n onChange?: (data: InputFileData<File>[]) => void\n }\n) &\n Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"multiple\" | \"type\"> & {\n /** 是否在捕获文件后清除 input 上的文件,默认为 false,主要区别在于如果不清除,连续两次选择同样的文件不会触发 onChange 事件,如果用于 form 表单,请设置为 flase */\n clearAfterChange?: boolean\n }\n\nexport async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypes[T]> {\n const fileReader = new FileReader()\n switch (type) {\n case \"arrayBuffer\":\n fileReader.readAsArrayBuffer(file)\n break\n case \"binary\":\n fileReader.readAsBinaryString(file)\n break\n case \"base64\":\n fileReader.readAsDataURL(file)\n break\n case \"text\":\n fileReader.readAsText(file)\n break\n default:\n return file as any\n }\n return new Promise(resolve => {\n fileReader.addEventListener(\"load\", () => {\n resolve(fileReader.result as any)\n })\n })\n}\n\n/** 专用于读取文件的组件 */\nexport const InputFile = forwardRef<HTMLInputElement, InputFileProps>((props, ref) => {\n const { multiple = false, type = \"file\", onChange, disabled: inputDisabled, clearAfterChange, ...rest } = props\n const [disabled, setDisabled] = useState(false)\n\n async function onInputChange(e: ChangeEvent<HTMLInputElement>) {\n const input = e.target\n const { files } = input\n if (!files || files.length === 0) return\n setDisabled(true)\n try {\n if (multiple) {\n const result: any[] = []\n for (const file of Array.from(files)) {\n result.push({\n result: await getFileData(file, type),\n file,\n })\n }\n onChange?.(result as any)\n } else {\n onChange?.({\n result: await getFileData(files[0], type),\n file: files[0],\n } as any)\n }\n } finally {\n if (clearAfterChange) input.value = \"\"\n setDisabled(false)\n }\n }\n\n return <input ref={ref} disabled={disabled || inputDisabled} type=\"file\" multiple={multiple} onChange={onInputChange} {...rest} />\n})\n\nexport type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n input: InputFileProps\n dragFile?: boolean\n}\n\n/** 专用于读取文件的 button 组件 */\nexport const InputFileButton = forwardRef<HTMLButtonElement, InputFileButtonProps>((props, ref) => {\n const { onClick: _onClick, input: inputProps, onDrop: _onDrop, onDragOver: _onDragOver, dragFile, disabled: _disabled, ...rest } = props\n const { style, disabled: __disabled, multiple, onChange, type = \"file\", ...restInputProps } = inputProps\n const [disabled, setDisabled] = useState(false)\n const input = useRef<HTMLInputElement>(null)\n\n function onClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\n input.current?.click()\n _onClick?.(e)\n }\n\n async function onDrop(e: DragEvent<HTMLButtonElement>) {\n _onDrop?.(e)\n if (disabled || !dragFile) return\n e.preventDefault()\n const { files } = e.dataTransfer\n if (!files || files.length === 0) return\n setDisabled(true)\n try {\n if (multiple) {\n const result: any[] = []\n for (const file of Array.from(files)) {\n result.push({\n result: await getFileData(file, type),\n file,\n })\n }\n onChange?.(result as any)\n } else {\n onChange?.({\n result: await getFileData(files[0], type),\n file: files[0],\n } as any)\n }\n } finally {\n setDisabled(false)\n }\n }\n\n function onDragOver(e: DragEvent<HTMLButtonElement>) {\n _onDragOver?.(e)\n if (disabled || !dragFile) return\n e.preventDefault()\n }\n\n return (\n <Fragment>\n <InputFile\n ref={input}\n disabled={disabled || _disabled || __disabled}\n style={{ display: \"none\", ...style }}\n multiple={multiple as any}\n onChange={onChange as any}\n type={type as any}\n {...restInputProps}\n />\n <button ref={ref} type=\"button\" disabled={disabled || _disabled} onClick={onClick} onDrop={onDrop} onDragOver={onDragOver} {...rest} />\n </Fragment>\n )\n})\n\nexport type ExcelItem = Record<string, string | undefined>\n\nexport interface ImportExcelProps extends Omit<InputFileProps, \"multiple\" | \"onChange\" | \"accept\" | \"type\"> {\n onChange?: (data: ExcelItem[]) => void\n}\n\n/** 专门用于读取 excel 的组件 */\nexport const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {\n const { onChange, ...rest } = props\n\n function onInputChange(data: InputFileData<ArrayBuffer>) {\n const wb = read(data.result)\n const result = utils.sheet_to_json<any>(wb.Sheets[wb.SheetNames[0]])\n if (typeof result === \"object\") {\n const $ = result.map(it => {\n const _: Record<string, string> = {}\n Object.keys(it)\n .filter(key => key !== \"__rowNum__\")\n .forEach(key => (_[key] = String(it[key])))\n return _\n })\n onChange?.($)\n }\n }\n\n return <InputFile ref={ref} accept=\".xlsx\" type=\"arrayBuffer\" onChange={onInputChange} {...rest} />\n})\n\n/** 手动导出 excel */\nexport function exportExcel(data: ExcelItem[], name: string) {\n const workSheet = utils.json_to_sheet(data)\n const workBook = utils.book_new()\n utils.book_append_sheet(workBook, workSheet)\n writeFile(workBook, `${name}${name.endsWith(\".xlsx\") ? \"\" : \".xlsx\"}`)\n}\n\nexport interface ExportExcelProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n data: ExcelItem[]\n fileName: string\n}\n\n/** 导出 excel 的 button 组件 */\nexport const ExportExcel = forwardRef<HTMLButtonElement, ExportExcelProps>((props, ref) => {\n const { data, fileName, onClick, ...rest } = props\n\n function onButtonClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\n exportExcel(data, fileName)\n onClick?.(e)\n }\n\n return <button ref={ref} onClick={onButtonClick} {...rest} />\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAuDA,QAAQ,EAAsDC,UAAU,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAChK,SAASC,IAAI,EAAEC,KAAK,EAAEC,SAAS,QAAQ,MAAM;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAsD7C,OAAO,eAAeC,WAAWA,CAA8BC,IAAU,EAAEC,IAAO,EAAkC;EAChH,MAAMC,UAAU,GAAG,IAAIC,UAAU,CAAC,CAAC;EACnC,QAAQF,IAAI;IACR,KAAK,aAAa;MACdC,UAAU,CAACE,iBAAiB,CAACJ,IAAI,CAAC;MAClC;IACJ,KAAK,QAAQ;MACTE,UAAU,CAACG,kBAAkB,CAACL,IAAI,CAAC;MACnC;IACJ,KAAK,QAAQ;MACTE,UAAU,CAACI,aAAa,CAACN,IAAI,CAAC;MAC9B;IACJ,KAAK,MAAM;MACPE,UAAU,CAACK,UAAU,CAACP,IAAI,CAAC;MAC3B;IACJ;MACI,OAAOA,IAAI;EACnB;EACA,OAAO,IAAIQ,OAAO,CAACC,OAAO,IAAI;IAC1BP,UAAU,CAACQ,gBAAgB,CAAC,MAAM,EAAE,MAAM;MACtCD,OAAO,CAACP,UAAU,CAACS,MAAa,CAAC;IACrC,CAAC,CAAC;EACN,CAAC,CAAC;AACN;;AAEA;AACA,OAAO,MAAMC,SAAS,gBAAGvB,UAAU,CAAmC,CAACwB,KAAK,EAAEC,GAAG,KAAK;EAClF,MAAM;IAAEC,QAAQ,GAAG,KAAK;IAAEd,IAAI,GAAG,MAAM;IAAEe,QAAQ;IAAEC,QAAQ,EAAEC,aAAa;IAAEC,gBAAgB;IAAE,GAAGC;EAAK,CAAC,GAAGP,KAAK;EAC/G,MAAM,CAACI,QAAQ,EAAEI,WAAW,CAAC,GAAG9B,QAAQ,CAAC,KAAK,CAAC;EAE/C,eAAe+B,aAAaA,CAACC,CAAgC,EAAE;IAC3D,MAAMC,KAAK,GAAGD,CAAC,CAACE,MAAM;IACtB,MAAM;MAAEC;IAAM,CAAC,GAAGF,KAAK;IACvB,IAAI,CAACE,KAAK,IAAIA,KAAK,CAACC,MAAM,KAAK,CAAC,EAAE;IAClCN,WAAW,CAAC,IAAI,CAAC;IACjB,IAAI;MACA,IAAIN,QAAQ,EAAE;QACV,MAAMJ,MAAa,GAAG,EAAE;QACxB,KAAK,MAAMX,IAAI,IAAI4B,KAAK,CAACC,IAAI,CAACH,KAAK,CAAC,EAAE;UAClCf,MAAM,CAACmB,IAAI,CAAC;YACRnB,MAAM,EAAE,MAAMZ,WAAW,CAACC,IAAI,EAAEC,IAAI,CAAC;YACrCD;UACJ,CAAC,CAAC;QACN;QACAgB,QAAQ,GAAGL,MAAa,CAAC;MAC7B,CAAC,MAAM;QACHK,QAAQ,GAAG;UACPL,MAAM,EAAE,MAAMZ,WAAW,CAAC2B,KAAK,CAAC,CAAC,CAAC,EAAEzB,IAAI,CAAC;UACzCD,IAAI,EAAE0B,KAAK,CAAC,CAAC;QACjB,CAAQ,CAAC;MACb;IACJ,CAAC,SAAS;MACN,IAAIP,gBAAgB,EAAEK,KAAK,CAACO,KAAK,GAAG,EAAE;MACtCV,WAAW,CAAC,KAAK,CAAC;IACtB;EACJ;EAEA,oBAAOzB,IAAA;IAAOkB,GAAG,EAAEA,GAAI;IAACG,QAAQ,EAAEA,QAAQ,IAAIC,aAAc;IAACjB,IAAI,EAAC,MAAM;IAACc,QAAQ,EAAEA,QAAS;IAACC,QAAQ,EAAEM,aAAc;IAAA,GAAKF;EAAI,CAAG,CAAC;AACtI,CAAC,CAAC;AAOF;AACA,OAAO,MAAMY,eAAe,gBAAG3C,UAAU,CAA0C,CAACwB,KAAK,EAAEC,GAAG,KAAK;EAC/F,MAAM;IAAEmB,OAAO,EAAEC,QAAQ;IAAEV,KAAK,EAAEW,UAAU;IAAEC,MAAM,EAAEC,OAAO;IAAEC,UAAU,EAAEC,WAAW;IAAEC,QAAQ;IAAEvB,QAAQ,EAAEwB,SAAS;IAAE,GAAGrB;EAAK,CAAC,GAAGP,KAAK;EACxI,MAAM;IAAE6B,KAAK;IAAEzB,QAAQ,EAAE0B,UAAU;IAAE5B,QAAQ;IAAEC,QAAQ;IAAEf,IAAI,GAAG,MAAM;IAAE,GAAG2C;EAAe,CAAC,GAAGT,UAAU;EACxG,MAAM,CAAClB,QAAQ,EAAEI,WAAW,CAAC,GAAG9B,QAAQ,CAAC,KAAK,CAAC;EAC/C,MAAMiC,KAAK,GAAGlC,MAAM,CAAmB,IAAI,CAAC;EAE5C,SAAS2C,OAAOA,CAACV,CAAiD,EAAE;IAChEC,KAAK,CAACqB,OAAO,EAAEC,KAAK,CAAC,CAAC;IACtBZ,QAAQ,GAAGX,CAAC,CAAC;EACjB;EAEA,eAAea,MAAMA,CAACb,CAA+B,EAAE;IACnDc,OAAO,GAAGd,CAAC,CAAC;IACZ,IAAIN,QAAQ,IAAI,CAACuB,QAAQ,EAAE;IAC3BjB,CAAC,CAACwB,cAAc,CAAC,CAAC;IAClB,MAAM;MAAErB;IAAM,CAAC,GAAGH,CAAC,CAACyB,YAAY;IAChC,IAAI,CAACtB,KAAK,IAAIA,KAAK,CAACC,MAAM,KAAK,CAAC,EAAE;IAClCN,WAAW,CAAC,IAAI,CAAC;IACjB,IAAI;MACA,IAAIN,QAAQ,EAAE;QACV,MAAMJ,MAAa,GAAG,EAAE;QACxB,KAAK,MAAMX,IAAI,IAAI4B,KAAK,CAACC,IAAI,CAACH,KAAK,CAAC,EAAE;UAClCf,MAAM,CAACmB,IAAI,CAAC;YACRnB,MAAM,EAAE,MAAMZ,WAAW,CAACC,IAAI,EAAEC,IAAI,CAAC;YACrCD;UACJ,CAAC,CAAC;QACN;QACAgB,QAAQ,GAAGL,MAAa,CAAC;MAC7B,CAAC,MAAM;QACHK,QAAQ,GAAG;UACPL,MAAM,EAAE,MAAMZ,WAAW,CAAC2B,KAAK,CAAC,CAAC,CAAC,EAAEzB,IAAI,CAAC;UACzCD,IAAI,EAAE0B,KAAK,CAAC,CAAC;QACjB,CAAQ,CAAC;MACb;IACJ,CAAC,SAAS;MACNL,WAAW,CAAC,KAAK,CAAC;IACtB;EACJ;EAEA,SAASiB,UAAUA,CAACf,CAA+B,EAAE;IACjDgB,WAAW,GAAGhB,CAAC,CAAC;IAChB,IAAIN,QAAQ,IAAI,CAACuB,QAAQ,EAAE;IAC3BjB,CAAC,CAACwB,cAAc,CAAC,CAAC;EACtB;EAEA,oBACIjD,KAAA,CAACV,QAAQ;IAAA6D,QAAA,gBACLrD,IAAA,CAACgB,SAAS;MACNE,GAAG,EAAEU,KAAM;MACXP,QAAQ,EAAEA,QAAQ,IAAIwB,SAAS,IAAIE,UAAW;MAC9CD,KAAK,EAAE;QAAEQ,OAAO,EAAE,MAAM;QAAE,GAAGR;MAAM,CAAE;MACrC3B,QAAQ,EAAEA,QAAgB;MAC1BC,QAAQ,EAAEA,QAAgB;MAC1Bf,IAAI,EAAEA,IAAY;MAAA,GACd2C;IAAc,CACrB,CAAC,eACFhD,IAAA;MAAQkB,GAAG,EAAEA,GAAI;MAACb,IAAI,EAAC,QAAQ;MAACgB,QAAQ,EAAEA,QAAQ,IAAIwB,SAAU;MAACR,OAAO,EAAEA,OAAQ;MAACG,MAAM,EAAEA,MAAO;MAACE,UAAU,EAAEA,UAAW;MAAA,GAAKlB;IAAI,CAAG,CAAC;EAAA,CACjI,CAAC;AAEnB,CAAC,CAAC;AAQF;AACA,OAAO,MAAM+B,WAAW,gBAAG9D,UAAU,CAAqC,CAACwB,KAAK,EAAEC,GAAG,KAAK;EACtF,MAAM;IAAEE,QAAQ;IAAE,GAAGI;EAAK,CAAC,GAAGP,KAAK;EAEnC,SAASS,aAAaA,CAAC8B,IAAgC,EAAE;IACrD,MAAMC,EAAE,GAAG7D,IAAI,CAAC4D,IAAI,CAACzC,MAAM,CAAC;IAC5B,MAAMA,MAAM,GAAGlB,KAAK,CAAC6D,aAAa,CAAMD,EAAE,CAACE,MAAM,CAACF,EAAE,CAACG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACpE,IAAI,OAAO7C,MAAM,KAAK,QAAQ,EAAE;MAC5B,MAAM8C,CAAC,GAAG9C,MAAM,CAAC+C,GAAG,CAACC,EAAE,IAAI;QACvB,MAAMC,CAAyB,GAAG,CAAC,CAAC;QACpCC,MAAM,CAACC,IAAI,CAACH,EAAE,CAAC,CACVI,MAAM,CAACC,GAAG,IAAIA,GAAG,KAAK,YAAY,CAAC,CACnCC,OAAO,CAACD,GAAG,IAAKJ,CAAC,CAACI,GAAG,CAAC,GAAGE,MAAM,CAACP,EAAE,CAACK,GAAG,CAAC,CAAE,CAAC;QAC/C,OAAOJ,CAAC;MACZ,CAAC,CAAC;MACF5C,QAAQ,GAAGyC,CAAC,CAAC;IACjB;EACJ;EAEA,oBAAO7D,IAAA,CAACgB,SAAS;IAACE,GAAG,EAAEA,GAAI;IAACqD,MAAM,EAAC,OAAO;IAAClE,IAAI,EAAC,aAAa;IAACe,QAAQ,EAAEM,aAAc;IAAA,GAAKF;EAAI,CAAG,CAAC;AACvG,CAAC,CAAC;;AAEF;AACA,OAAO,SAASgD,WAAWA,CAAChB,IAAiB,EAAEiB,IAAY,EAAE;EACzD,MAAMC,SAAS,GAAG7E,KAAK,CAAC8E,aAAa,CAACnB,IAAI,CAAC;EAC3C,MAAMoB,QAAQ,GAAG/E,KAAK,CAACgF,QAAQ,CAAC,CAAC;EACjChF,KAAK,CAACiF,iBAAiB,CAACF,QAAQ,EAAEF,SAAS,CAAC;EAC5C5E,SAAS,CAAC8E,QAAQ,EAAG,GAAEH,IAAK,GAAEA,IAAI,CAACM,QAAQ,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,OAAQ,EAAC,CAAC;AAC1E;AAOA;AACA,OAAO,MAAMC,WAAW,gBAAGvF,UAAU,CAAsC,CAACwB,KAAK,EAAEC,GAAG,KAAK;EACvF,MAAM;IAAEsC,IAAI;IAAEyB,QAAQ;IAAE5C,OAAO;IAAE,GAAGb;EAAK,CAAC,GAAGP,KAAK;EAElD,SAASiE,aAAaA,CAACvD,CAAiD,EAAE;IACtE6C,WAAW,CAAChB,IAAI,EAAEyB,QAAQ,CAAC;IAC3B5C,OAAO,GAAGV,CAAC,CAAC;EAChB;EAEA,oBAAO3B,IAAA;IAAQkB,GAAG,EAAEA,GAAI;IAACmB,OAAO,EAAE6C,aAAc;IAAA,GAAK1D;EAAI,CAAG,CAAC;AACjE,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"names":["Fragment","forwardRef","useRef","useState","jsx","_jsx","jsxs","_jsxs","getFileData","file","type","fileReader","FileReader","readAsArrayBuffer","readAsBinaryString","readAsDataURL","readAsText","Promise","resolve","addEventListener","result","InputFile","props","ref","multiple","onChange","disabled","inputDisabled","clearAfterChange","rest","setDisabled","onInputChange","e","input","target","files","length","Array","from","push","value","InputFileButton","onClick","_onClick","inputProps","onDrop","_onDrop","onDragOver","_onDragOver","dragFile","_disabled","style","__disabled","restInputProps","current","click","preventDefault","dataTransfer","children","display"],"sources":["../../../src/components/InputFile.tsx"],"sourcesContent":["\"use client\"\n\nimport { ButtonHTMLAttributes, ChangeEvent, DragEvent, Fragment, InputHTMLAttributes, MouseEvent as ReactMouseEvent, forwardRef, useRef, useState } from \"react\"\n\nexport interface InputFileDataTypes {\n base64: string\n text: string\n arrayBuffer: ArrayBuffer\n binary: string\n file: File\n}\n\nexport type InputFileDataType = keyof InputFileDataTypes\n\nexport interface InputFileData<T> {\n result: T\n file: File\n}\n\nexport type InputFileProps = (\n | {\n multiple?: false\n type: \"base64\" | \"text\" | \"binary\"\n onChange?: (data: InputFileData<string>) => void\n }\n | {\n multiple?: false\n type: \"arrayBuffer\"\n onChange?: (data: InputFileData<ArrayBuffer>) => void\n }\n | {\n multiple?: false\n type?: \"file\"\n onChange?: (data: InputFileData<File>) => void\n }\n | {\n multiple: true\n type: \"base64\" | \"text\" | \"binary\"\n onChange?: (data: InputFileData<string>[]) => void\n }\n | {\n multiple: true\n type: \"arrayBuffer\"\n onChange?: (data: InputFileData<ArrayBuffer>[]) => void\n }\n | {\n multiple: true\n type?: \"file\"\n onChange?: (data: InputFileData<File>[]) => void\n }\n) &\n Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"multiple\" | \"type\"> & {\n /** 是否在捕获文件后清除 input 上的文件,默认为 false,主要区别在于如果不清除,连续两次选择同样的文件不会触发 onChange 事件,如果用于 form 表单,请设置为 flase */\n clearAfterChange?: boolean\n }\n\nexport async function getFileData<T extends InputFileDataType>(file: File, type: T): Promise<InputFileDataTypes[T]> {\n const fileReader = new FileReader()\n switch (type) {\n case \"arrayBuffer\":\n fileReader.readAsArrayBuffer(file)\n break\n case \"binary\":\n fileReader.readAsBinaryString(file)\n break\n case \"base64\":\n fileReader.readAsDataURL(file)\n break\n case \"text\":\n fileReader.readAsText(file)\n break\n default:\n return file as any\n }\n return new Promise(resolve => {\n fileReader.addEventListener(\"load\", () => {\n resolve(fileReader.result as any)\n })\n })\n}\n\n/** 专用于读取文件的组件 */\nexport const InputFile = forwardRef<HTMLInputElement, InputFileProps>((props, ref) => {\n const { multiple = false, type = \"file\", onChange, disabled: inputDisabled, clearAfterChange, ...rest } = props\n const [disabled, setDisabled] = useState(false)\n\n async function onInputChange(e: ChangeEvent<HTMLInputElement>) {\n const input = e.target\n const { files } = input\n if (!files || files.length === 0) return\n setDisabled(true)\n try {\n if (multiple) {\n const result: any[] = []\n for (const file of Array.from(files)) {\n result.push({\n result: await getFileData(file, type),\n file,\n })\n }\n onChange?.(result as any)\n } else {\n onChange?.({\n result: await getFileData(files[0], type),\n file: files[0],\n } as any)\n }\n } finally {\n if (clearAfterChange) input.value = \"\"\n setDisabled(false)\n }\n }\n\n return <input ref={ref} disabled={disabled || inputDisabled} type=\"file\" multiple={multiple} onChange={onInputChange} {...rest} />\n})\n\nexport type InputFileButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n input: InputFileProps\n dragFile?: boolean\n}\n\n/** 专用于读取文件的 button 组件 */\nexport const InputFileButton = forwardRef<HTMLButtonElement, InputFileButtonProps>((props, ref) => {\n const { onClick: _onClick, input: inputProps, onDrop: _onDrop, onDragOver: _onDragOver, dragFile, disabled: _disabled, ...rest } = props\n const { style, disabled: __disabled, multiple, onChange, type = \"file\", ...restInputProps } = inputProps\n const [disabled, setDisabled] = useState(false)\n const input = useRef<HTMLInputElement>(null)\n\n function onClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\n input.current?.click()\n _onClick?.(e)\n }\n\n async function onDrop(e: DragEvent<HTMLButtonElement>) {\n _onDrop?.(e)\n if (disabled || !dragFile) return\n e.preventDefault()\n const { files } = e.dataTransfer\n if (!files || files.length === 0) return\n setDisabled(true)\n try {\n if (multiple) {\n const result: any[] = []\n for (const file of Array.from(files)) {\n result.push({\n result: await getFileData(file, type),\n file,\n })\n }\n onChange?.(result as any)\n } else {\n onChange?.({\n result: await getFileData(files[0], type),\n file: files[0],\n } as any)\n }\n } finally {\n setDisabled(false)\n }\n }\n\n function onDragOver(e: DragEvent<HTMLButtonElement>) {\n _onDragOver?.(e)\n if (disabled || !dragFile) return\n e.preventDefault()\n }\n\n return (\n <Fragment>\n <InputFile\n ref={input}\n disabled={disabled || _disabled || __disabled}\n style={{ display: \"none\", ...style }}\n multiple={multiple as any}\n onChange={onChange as any}\n type={type as any}\n {...restInputProps}\n />\n <button ref={ref} type=\"button\" disabled={disabled || _disabled} onClick={onClick} onDrop={onDrop} onDragOver={onDragOver} {...rest} />\n </Fragment>\n )\n})\n"],"mappings":"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"}
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -4,9 +4,11 @@ export * from "./components/AutoSizeTextarea";
|
|
|
4
4
|
export * from "./components/CircleText";
|
|
5
5
|
export * from "./components/CopyButton";
|
|
6
6
|
export * from "./components/Echart";
|
|
7
|
+
export * from "./components/ExportExcel";
|
|
7
8
|
export * from "./components/Flow";
|
|
8
9
|
export * from "./components/FormLabel";
|
|
9
10
|
export * from "./components/HlsPlayer";
|
|
11
|
+
export * from "./components/ImportExcel";
|
|
10
12
|
export * from "./components/InfiniteScroll";
|
|
11
13
|
export * from "./components/InputFile";
|
|
12
14
|
export * from "./components/LoopSwiper";
|
package/dist/esm/index.js
CHANGED
|
@@ -4,9 +4,11 @@ export * from "./components/AutoSizeTextarea";
|
|
|
4
4
|
export * from "./components/CircleText";
|
|
5
5
|
export * from "./components/CopyButton";
|
|
6
6
|
export * from "./components/Echart";
|
|
7
|
+
export * from "./components/ExportExcel";
|
|
7
8
|
export * from "./components/Flow";
|
|
8
9
|
export * from "./components/FormLabel";
|
|
9
10
|
export * from "./components/HlsPlayer";
|
|
11
|
+
export * from "./components/ImportExcel";
|
|
10
12
|
export * from "./components/InfiniteScroll";
|
|
11
13
|
export * from "./components/InputFile";
|
|
12
14
|
export * from "./components/LoopSwiper";
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from \"@/components/AutoFit\"\nexport * from \"@/components/AutoScroll\"\nexport * from \"@/components/AutoSizeTextarea\"\nexport * from \"@/components/CircleText\"\nexport * from \"@/components/CopyButton\"\nexport * from \"@/components/Echart\"\nexport * from \"@/components/Flow\"\nexport * from \"@/components/FormLabel\"\nexport * from \"@/components/HlsPlayer\"\nexport * from \"@/components/InfiniteScroll\"\nexport * from \"@/components/InputFile\"\nexport * from \"@/components/LoopSwiper\"\nexport * from \"@/components/Ring\"\nexport * from \"@/components/Scroll\"\nexport * from \"@/components/SectionRing\"\nexport * from \"@/components/Skeleton\"\nexport * from \"@/components/Title\"\nexport * from \"@/components/TransitionBox\"\nexport * from \"@/components/TransitionNum\"\nexport * from \"@/components/Trapezium\"\nexport * from \"@/utils/getReactVersion\"\nexport * from \"@/utils/index\"\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
1
|
+
{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from \"@/components/AutoFit\"\nexport * from \"@/components/AutoScroll\"\nexport * from \"@/components/AutoSizeTextarea\"\nexport * from \"@/components/CircleText\"\nexport * from \"@/components/CopyButton\"\nexport * from \"@/components/Echart\"\nexport * from \"@/components/ExportExcel\"\nexport * from \"@/components/Flow\"\nexport * from \"@/components/FormLabel\"\nexport * from \"@/components/HlsPlayer\"\nexport * from \"@/components/ImportExcel\"\nexport * from \"@/components/InfiniteScroll\"\nexport * from \"@/components/InputFile\"\nexport * from \"@/components/LoopSwiper\"\nexport * from \"@/components/Ring\"\nexport * from \"@/components/Scroll\"\nexport * from \"@/components/SectionRing\"\nexport * from \"@/components/Skeleton\"\nexport * from \"@/components/Title\"\nexport * from \"@/components/TransitionBox\"\nexport * from \"@/components/TransitionNum\"\nexport * from \"@/components/Trapezium\"\nexport * from \"@/utils/getReactVersion\"\nexport * from \"@/utils/index\"\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "deepsea-components",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.8.0",
|
|
4
4
|
"description": "格数科技自用组件库",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -31,8 +31,7 @@
|
|
|
31
31
|
"echarts": "^5.5.1",
|
|
32
32
|
"hls.js": "^1.5.18",
|
|
33
33
|
"smooth-scrollbar": "^8.8.4",
|
|
34
|
-
"
|
|
35
|
-
"deepsea-tools": "5.16.7"
|
|
34
|
+
"deepsea-tools": "5.17.0"
|
|
36
35
|
},
|
|
37
36
|
"peerDependencies": {
|
|
38
37
|
"@types/react": "^18.3.1",
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ExportExcelParams, exportExcel } from "deepsea-tools"
|
|
2
|
+
import { ComponentPropsWithoutRef, ComponentRef, MouseEvent as ReactMouseEvent, forwardRef } from "react"
|
|
3
|
+
|
|
4
|
+
export interface ExportExcelProps extends ComponentPropsWithoutRef<"button">, ExportExcelParams {}
|
|
5
|
+
|
|
6
|
+
/** 导出 excel 的 button 组件 */
|
|
7
|
+
const ExportExcel = forwardRef<ComponentRef<"button">, ExportExcelProps>((props, ref) => {
|
|
8
|
+
const { data, fileName, onClick, ...rest } = props
|
|
9
|
+
|
|
10
|
+
function onButtonClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {
|
|
11
|
+
exportExcel({ data, fileName })
|
|
12
|
+
onClick?.(e)
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
return <button ref={ref} onClick={onButtonClick} {...rest} />
|
|
16
|
+
})
|
|
17
|
+
|
|
18
|
+
export default ExportExcel
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import { ComponentPropsWithoutRef, FC, Fragment, ReactNode, createContext, useContext } from "react"
|
|
4
4
|
|
|
5
|
-
export
|
|
5
|
+
export interface FormLabelConfig {
|
|
6
6
|
/**
|
|
7
7
|
* Label 的宽度.
|
|
8
8
|
*/
|
|
@@ -13,11 +13,11 @@ export type FormLabelConfig = {
|
|
|
13
13
|
before?: boolean | number
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
export
|
|
16
|
+
export interface FormLabelProps extends ComponentPropsWithoutRef<"div">, FormLabelConfig {}
|
|
17
17
|
|
|
18
18
|
export const FormLabelConfigContext = createContext<Partial<FormLabelConfig>>({})
|
|
19
19
|
|
|
20
|
-
export
|
|
20
|
+
export interface FormLabelConfigProviderProps extends FormLabelConfig {
|
|
21
21
|
children?: ReactNode
|
|
22
22
|
}
|
|
23
23
|
|
|
@@ -34,7 +34,7 @@ export const FormLabel: FC<FormLabelProps> = props => {
|
|
|
34
34
|
|
|
35
35
|
return (
|
|
36
36
|
<Fragment>
|
|
37
|
-
{!!before && <div style={{ width: 11, color: "transparent" }}> </div>}
|
|
37
|
+
{!!before && <div style={{ width: 11, color: "transparent", userSelect: "none" }}> </div>}
|
|
38
38
|
<div style={{ width, textAlign: "justify", textAlignLast: "justify", ...style }} {...rest} />
|
|
39
39
|
</Fragment>
|
|
40
40
|
)
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
|
|
3
|
+
import { readExcel } from "deepsea-tools"
|
|
4
|
+
import { forwardRef } from "react"
|
|
5
|
+
|
|
6
|
+
import { InputFile, InputFileProps } from "./InputFile"
|
|
7
|
+
|
|
8
|
+
export interface ImportExcelProps extends Omit<InputFileProps, "multiple" | "onChange" | "accept" | "type"> {
|
|
9
|
+
onChange?: (data: Record<string, any>[]) => void
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/** 专门用于读取 excel 的组件 */
|
|
13
|
+
export const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {
|
|
14
|
+
const { onChange, ...rest } = props
|
|
15
|
+
|
|
16
|
+
return <InputFile ref={ref} accept=".xlsx" type="arrayBuffer" onChange={({ result }) => onChange?.(readExcel(result))} {...rest} />
|
|
17
|
+
})
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
|
|
3
3
|
import { ButtonHTMLAttributes, ChangeEvent, DragEvent, Fragment, InputHTMLAttributes, MouseEvent as ReactMouseEvent, forwardRef, useRef, useState } from "react"
|
|
4
|
-
import { read, utils, writeFile } from "xlsx"
|
|
5
4
|
|
|
6
5
|
export interface InputFileDataTypes {
|
|
7
6
|
base64: string
|
|
@@ -181,56 +180,3 @@ export const InputFileButton = forwardRef<HTMLButtonElement, InputFileButtonProp
|
|
|
181
180
|
</Fragment>
|
|
182
181
|
)
|
|
183
182
|
})
|
|
184
|
-
|
|
185
|
-
export type ExcelItem = Record<string, string | undefined>
|
|
186
|
-
|
|
187
|
-
export interface ImportExcelProps extends Omit<InputFileProps, "multiple" | "onChange" | "accept" | "type"> {
|
|
188
|
-
onChange?: (data: ExcelItem[]) => void
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
/** 专门用于读取 excel 的组件 */
|
|
192
|
-
export const ImportExcel = forwardRef<HTMLInputElement, ImportExcelProps>((props, ref) => {
|
|
193
|
-
const { onChange, ...rest } = props
|
|
194
|
-
|
|
195
|
-
function onInputChange(data: InputFileData<ArrayBuffer>) {
|
|
196
|
-
const wb = read(data.result)
|
|
197
|
-
const result = utils.sheet_to_json<any>(wb.Sheets[wb.SheetNames[0]])
|
|
198
|
-
if (typeof result === "object") {
|
|
199
|
-
const $ = result.map(it => {
|
|
200
|
-
const _: Record<string, string> = {}
|
|
201
|
-
Object.keys(it)
|
|
202
|
-
.filter(key => key !== "__rowNum__")
|
|
203
|
-
.forEach(key => (_[key] = String(it[key])))
|
|
204
|
-
return _
|
|
205
|
-
})
|
|
206
|
-
onChange?.($)
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
return <InputFile ref={ref} accept=".xlsx" type="arrayBuffer" onChange={onInputChange} {...rest} />
|
|
211
|
-
})
|
|
212
|
-
|
|
213
|
-
/** 手动导出 excel */
|
|
214
|
-
export function exportExcel(data: ExcelItem[], name: string) {
|
|
215
|
-
const workSheet = utils.json_to_sheet(data)
|
|
216
|
-
const workBook = utils.book_new()
|
|
217
|
-
utils.book_append_sheet(workBook, workSheet)
|
|
218
|
-
writeFile(workBook, `${name}${name.endsWith(".xlsx") ? "" : ".xlsx"}`)
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
export interface ExportExcelProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
222
|
-
data: ExcelItem[]
|
|
223
|
-
fileName: string
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
/** 导出 excel 的 button 组件 */
|
|
227
|
-
export const ExportExcel = forwardRef<HTMLButtonElement, ExportExcelProps>((props, ref) => {
|
|
228
|
-
const { data, fileName, onClick, ...rest } = props
|
|
229
|
-
|
|
230
|
-
function onButtonClick(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {
|
|
231
|
-
exportExcel(data, fileName)
|
|
232
|
-
onClick?.(e)
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
return <button ref={ref} onClick={onButtonClick} {...rest} />
|
|
236
|
-
})
|
package/src/index.ts
CHANGED
|
@@ -4,9 +4,11 @@ export * from "@/components/AutoSizeTextarea"
|
|
|
4
4
|
export * from "@/components/CircleText"
|
|
5
5
|
export * from "@/components/CopyButton"
|
|
6
6
|
export * from "@/components/Echart"
|
|
7
|
+
export * from "@/components/ExportExcel"
|
|
7
8
|
export * from "@/components/Flow"
|
|
8
9
|
export * from "@/components/FormLabel"
|
|
9
10
|
export * from "@/components/HlsPlayer"
|
|
11
|
+
export * from "@/components/ImportExcel"
|
|
10
12
|
export * from "@/components/InfiniteScroll"
|
|
11
13
|
export * from "@/components/InputFile"
|
|
12
14
|
export * from "@/components/LoopSwiper"
|