@stackshift-ui/input-file 7.0.0-beta.1 → 7.0.0-beta.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/chunk-GC3HK7A3.mjs +68 -0
- package/dist/input-file.d.ts +4 -0
- package/package.json +6 -6
- package/src/input-file.tsx +4 -0
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
// src/input-file.tsx
|
|
2
|
+
import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
|
|
3
|
+
import cn from "classnames";
|
|
4
|
+
import { useState } from "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
var displayName = "InputFile";
|
|
7
|
+
var InputFile = ({
|
|
8
|
+
required = false,
|
|
9
|
+
variant = "primary",
|
|
10
|
+
name,
|
|
11
|
+
ariaLabel,
|
|
12
|
+
children,
|
|
13
|
+
className,
|
|
14
|
+
as,
|
|
15
|
+
...props
|
|
16
|
+
}) => {
|
|
17
|
+
var _a;
|
|
18
|
+
const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
|
|
19
|
+
const [filename, setFilename] = useState("");
|
|
20
|
+
const commonStyle = "my-1 ml-auto cursor-pointer rounded px-4 py-3 text-xs font-semibold leading-none transition duration-200";
|
|
21
|
+
const primary = `${commonStyle} bg-primary-foreground hover:bg-primary`;
|
|
22
|
+
const outline = `${commonStyle} text-primary-foreground border border-solid border-primary-foreground hover:bg-slate-100`;
|
|
23
|
+
const variants = {
|
|
24
|
+
primary,
|
|
25
|
+
outline
|
|
26
|
+
};
|
|
27
|
+
const variantClass = (_a = variants[variant]) != null ? _a : primary;
|
|
28
|
+
const handleFileChange = (event) => {
|
|
29
|
+
var _a2;
|
|
30
|
+
const file = (_a2 = event.target.files) == null ? void 0 : _a2[0];
|
|
31
|
+
if (file) {
|
|
32
|
+
setFilename(file.name);
|
|
33
|
+
} else {
|
|
34
|
+
setFilename("");
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
return /* @__PURE__ */ jsxs(
|
|
38
|
+
"div",
|
|
39
|
+
{
|
|
40
|
+
className: "relative rounded-global bg-white px-2 w-full",
|
|
41
|
+
"data-testid": displayName == null ? void 0 : displayName.toLowerCase(),
|
|
42
|
+
children: [
|
|
43
|
+
/* @__PURE__ */ jsx(
|
|
44
|
+
"input",
|
|
45
|
+
{
|
|
46
|
+
"aria-label": ariaLabel != null ? ariaLabel : "Attach file",
|
|
47
|
+
className: "absolute w-full h-full opacity-0 cursor-pointer",
|
|
48
|
+
type: "file",
|
|
49
|
+
name,
|
|
50
|
+
required,
|
|
51
|
+
id: name,
|
|
52
|
+
onChange: handleFileChange,
|
|
53
|
+
...props
|
|
54
|
+
}
|
|
55
|
+
),
|
|
56
|
+
/* @__PURE__ */ jsxs("div", { className: "flex", children: [
|
|
57
|
+
/* @__PURE__ */ jsx("span", { className: "px-2 py-4 text-xs font-semibold leading-none", children: filename }),
|
|
58
|
+
/* @__PURE__ */ jsx("label", { htmlFor: name, className: cn(variantClass, className), children: name })
|
|
59
|
+
] })
|
|
60
|
+
]
|
|
61
|
+
}
|
|
62
|
+
);
|
|
63
|
+
};
|
|
64
|
+
InputFile.displayName = displayName;
|
|
65
|
+
|
|
66
|
+
export {
|
|
67
|
+
InputFile
|
|
68
|
+
};
|
package/dist/input-file.d.ts
CHANGED
|
@@ -10,5 +10,9 @@ export interface InputFileProps extends Omit<HTMLProps<HTMLInputElement>, "as">
|
|
|
10
10
|
className?: string;
|
|
11
11
|
as?: ElementType;
|
|
12
12
|
}
|
|
13
|
+
/**
|
|
14
|
+
* @deprecated Redundant since Input component was added
|
|
15
|
+
* @use Input component
|
|
16
|
+
* */
|
|
13
17
|
export declare const InputFile: React.FC<InputFileProps>;
|
|
14
18
|
export {};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stackshift-ui/input-file",
|
|
3
3
|
"description": "",
|
|
4
|
-
"version": "7.0.0-beta.
|
|
4
|
+
"version": "7.0.0-beta.3",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"main": "./dist/index.js",
|
|
@@ -29,20 +29,20 @@
|
|
|
29
29
|
"typescript": "^5.6.2",
|
|
30
30
|
"vite-tsconfig-paths": "^5.0.1",
|
|
31
31
|
"vitest": "^2.1.1",
|
|
32
|
-
"@stackshift-ui/
|
|
33
|
-
"@stackshift-ui/
|
|
32
|
+
"@stackshift-ui/typescript-config": "6.0.10",
|
|
33
|
+
"@stackshift-ui/eslint-config": "6.0.10"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"classnames": "^2.5.1",
|
|
37
|
-
"@stackshift-ui/scripts": "6.1.0-beta.
|
|
38
|
-
"@stackshift-ui/system": "6.1.0-beta.
|
|
37
|
+
"@stackshift-ui/scripts": "6.1.0-beta.2",
|
|
38
|
+
"@stackshift-ui/system": "6.1.0-beta.3"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"@types/react": "16.8 - 19",
|
|
42
42
|
"next": "10 - 14",
|
|
43
43
|
"react": "16.8 - 19",
|
|
44
44
|
"react-dom": "16.8 - 19",
|
|
45
|
-
"@stackshift-ui/system": ">=6.1.0-beta.
|
|
45
|
+
"@stackshift-ui/system": ">=6.1.0-beta.3"
|
|
46
46
|
},
|
|
47
47
|
"peerDependenciesMeta": {
|
|
48
48
|
"next": {
|
package/src/input-file.tsx
CHANGED
|
@@ -19,6 +19,10 @@ export interface InputFileProps extends Omit<HTMLProps<HTMLInputElement>, "as">
|
|
|
19
19
|
|
|
20
20
|
const displayName = "InputFile";
|
|
21
21
|
|
|
22
|
+
/**
|
|
23
|
+
* @deprecated Redundant since Input component was added
|
|
24
|
+
* @use Input component
|
|
25
|
+
* */
|
|
22
26
|
export const InputFile: React.FC<InputFileProps> = ({
|
|
23
27
|
required = false,
|
|
24
28
|
variant = "primary",
|