@a-type/ui 2.1.14 → 2.1.16
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/avatar/Avatar.d.ts +3 -2
- package/dist/cjs/components/avatar/Avatar.js +10 -5
- package/dist/cjs/components/avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/imageUploader/ImageUploader.d.ts +4 -5
- package/dist/cjs/components/imageUploader/ImageUploader.js +3 -2
- package/dist/cjs/components/imageUploader/ImageUploader.js.map +1 -1
- package/dist/cjs/components/imageUploader/ImageUploader.stories.d.ts +2 -1
- package/dist/esm/components/avatar/Avatar.d.ts +3 -2
- package/dist/esm/components/avatar/Avatar.js +10 -5
- package/dist/esm/components/avatar/Avatar.js.map +1 -1
- package/dist/esm/components/imageUploader/ImageUploader.d.ts +4 -5
- package/dist/esm/components/imageUploader/ImageUploader.js +3 -2
- package/dist/esm/components/imageUploader/ImageUploader.js.map +1 -1
- package/dist/esm/components/imageUploader/ImageUploader.stories.d.ts +2 -1
- package/package.json +1 -1
- package/src/components/avatar/Avatar.tsx +19 -4
- package/src/components/imageUploader/ImageUploader.tsx +10 -9
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
1
|
+
import { CSSProperties, HTMLProps } from 'react';
|
|
2
2
|
export interface AvatarProps {
|
|
3
3
|
className?: string;
|
|
4
4
|
popIn?: boolean;
|
|
5
5
|
style?: CSSProperties;
|
|
6
6
|
imageSrc?: string | null;
|
|
7
7
|
name?: string;
|
|
8
|
+
crossOrigin?: HTMLProps<HTMLImageElement>['crossOrigin'];
|
|
8
9
|
}
|
|
9
|
-
export declare function Avatar({ className, popIn, imageSrc, name, ...rest }: AvatarProps): import("react/jsx-runtime.js").JSX.Element;
|
|
10
|
+
export declare function Avatar({ className, popIn, imageSrc, name, crossOrigin, ...rest }: AvatarProps): import("react/jsx-runtime.js").JSX.Element;
|
|
@@ -18,16 +18,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
18
18
|
exports.Avatar = Avatar;
|
|
19
19
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
20
20
|
const clsx_1 = __importDefault(require("clsx"));
|
|
21
|
+
const react_1 = require("react");
|
|
21
22
|
const index_js_1 = require("../icon/index.js");
|
|
22
23
|
function Avatar(_a) {
|
|
23
|
-
var { className, popIn = false, imageSrc, name } = _a, rest = __rest(_a, ["className", "popIn", "imageSrc", "name"]);
|
|
24
|
+
var { className, popIn = false, imageSrc, name, crossOrigin } = _a, rest = __rest(_a, ["className", "popIn", "imageSrc", "name", "crossOrigin"]);
|
|
24
25
|
const empty = !name && !imageSrc;
|
|
25
26
|
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-pop": popIn, className: (0, clsx_1.default)('layer-components:flex layer-components:items-center layer-components:justify-center layer-components:rounded-lg layer-components:border-default layer-components:overflow-hidden layer-components:w-24px layer-components:aspect-1 layer-components:select-none layer-components:relative layer-components:bg-white layer-components:flex-shrink-0', popIn &&
|
|
26
|
-
'layer-variants:animate-pop-in-from-half layer-variants:animate-ease-springy layer-variants:animate-duration-200', empty && 'layer-components(border-dashed bg-gray-light)', className) }, rest, { children: [!empty && (0, jsx_runtime_1.jsx)(AvatarContent, { name: name, imageSrc: imageSrc }), empty && (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "profile" })] })));
|
|
27
|
+
'layer-variants:animate-pop-in-from-half layer-variants:animate-ease-springy layer-variants:animate-duration-200', empty && 'layer-components(border-dashed bg-gray-light)', className) }, rest, { children: [!empty && ((0, jsx_runtime_1.jsx)(AvatarContent, { name: name, imageSrc: imageSrc, crossOrigin: crossOrigin })), empty && (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "profile" })] })));
|
|
27
28
|
}
|
|
28
|
-
function AvatarContent({ name, imageSrc, }) {
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
function AvatarContent({ name, imageSrc, crossOrigin = 'anonymous', }) {
|
|
30
|
+
const [fallback, setFallback] = (0, react_1.useState)(false);
|
|
31
|
+
const triggerFallback = () => {
|
|
32
|
+
setFallback(true);
|
|
33
|
+
};
|
|
34
|
+
if (imageSrc && !fallback) {
|
|
35
|
+
return ((0, jsx_runtime_1.jsx)("img", { className: "w-full h-full object-cover", referrerPolicy: "no-referrer", src: imageSrc, alt: `${name !== null && name !== void 0 ? name : 'user'}'s profile picture`, crossOrigin: crossOrigin, onError: triggerFallback }));
|
|
31
36
|
}
|
|
32
37
|
return ((0, jsx_runtime_1.jsx)("div", { className: "color-black items-center justify-center flex text-sm font-bold", children: (name === null || name === void 0 ? void 0 : name.charAt(0)) || '?' }));
|
|
33
38
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAaA,wBA+BC;;AA5CD,gDAA8B;AAC9B,iCAA2D;AAC3D,+CAAwC;AAWxC,SAAgB,MAAM,CAAC,EAOT;QAPS,EACtB,SAAS,EACT,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,IAAI,EACJ,WAAW,OAEE,EADV,IAAI,cANe,yDAOtB,CADO;IAEP,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;IACjC,OAAO,CACN,2DACW,KAAK,EACf,SAAS,EAAE,IAAA,cAAU,EACpB,2JAA2J,EAC3J,KAAK;YACJ,qFAAqF,EACtF,KAAK,IAAI,+CAA+C,EACxD,SAAS,CACT,IACG,IAAI,eAEP,CAAC,KAAK,IAAI,CACV,uBAAC,aAAa,IACb,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GACvB,CACF,EACA,KAAK,IAAI,uBAAC,eAAI,IAAC,IAAI,EAAC,SAAS,GAAG,KAC5B,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACtB,IAAI,EACJ,QAAQ,EACR,WAAW,GAAG,WAAW,GAKzB;IACA,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,GAAG,EAAE;QAC5B,WAAW,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,CAAC;IACF,IAAI,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC3B,OAAO,CACN,gCACC,SAAS,EAAC,4BAA4B,EACtC,cAAc,EAAC,aAAa,EAC5B,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,MAAM,oBAAoB,EAC1C,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,GACvB,CACF,CAAC;IACH,CAAC;IACD,OAAO,CACN,gCAAK,SAAS,EAAC,gEAAgE,YAC7E,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,CAAC,CAAC,KAAI,GAAG,GAClB,CACN,CAAC;AACH,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ImgHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { ButtonProps } from '../button/index.js';
|
|
3
3
|
export interface ImageUploaderProps {
|
|
4
4
|
value: string | null;
|
|
@@ -13,14 +13,13 @@ export interface ImageUploaderProps {
|
|
|
13
13
|
* component to replace the existing one.
|
|
14
14
|
*/
|
|
15
15
|
export declare function ImageUploaderRoot({ value, onChange: handleChange, maxDimension, children, ...rest }: ImageUploaderProps): import("react/jsx-runtime.js").JSX.Element;
|
|
16
|
-
declare function ImageUploaderPrebuilt(props: Omit<ImageUploaderProps, 'children'> & {
|
|
16
|
+
declare function ImageUploaderPrebuilt({ crossOrigin, ...props }: Omit<ImageUploaderProps, 'children'> & {
|
|
17
17
|
facingMode?: 'user' | 'environment';
|
|
18
|
+
crossOrigin?: ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
|
|
18
19
|
}): import("react/jsx-runtime.js").JSX.Element;
|
|
19
20
|
export declare function ImageUploaderFileButton({ children, ...props }: ButtonProps): import("react/jsx-runtime.js").JSX.Element;
|
|
20
21
|
export declare function ImageUploaderRemoveButton({ className, ...rest }: ButtonProps): import("react/jsx-runtime.js").JSX.Element | null;
|
|
21
|
-
export declare function ImageUploaderDisplay({ className, ...rest }:
|
|
22
|
-
className?: string;
|
|
23
|
-
}): import("react/jsx-runtime.js").JSX.Element | null;
|
|
22
|
+
export declare function ImageUploaderDisplay({ className, ...rest }: ImgHTMLAttributes<HTMLImageElement>): import("react/jsx-runtime.js").JSX.Element | null;
|
|
24
23
|
export declare function ImageUploaderEmptyControls({ children, className, }: {
|
|
25
24
|
children: ReactNode;
|
|
26
25
|
className?: string;
|
|
@@ -144,10 +144,11 @@ function useUploaderContext() {
|
|
|
144
144
|
}
|
|
145
145
|
return context;
|
|
146
146
|
}
|
|
147
|
-
function ImageUploaderPrebuilt(
|
|
147
|
+
function ImageUploaderPrebuilt(_a) {
|
|
148
|
+
var { crossOrigin = 'anonymous' } = _a, props = __rest(_a, ["crossOrigin"]);
|
|
148
149
|
const [cameraOpen, setCameraOpen] = (0, react_1.useState)(false);
|
|
149
150
|
const openCamera = () => setCameraOpen(true);
|
|
150
|
-
return ((0, jsx_runtime_1.jsxs)(ImageUploaderRoot, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(ImageUploaderDisplay, {}), (0, jsx_runtime_1.jsxs)(ImageUploaderEmptyControls, { children: [(0, jsx_runtime_1.jsx)(ImageUploaderFileButton, {}), (0, jsx_runtime_1.jsxs)(index_js_1.Button, { color: "ghost", onClick: openCamera, children: [(0, jsx_runtime_1.jsx)(index_js_3.Icon, { name: "camera" }), (0, jsx_runtime_1.jsx)("span", { children: "Camera" })] })] }), !props.value && cameraOpen && ((0, jsx_runtime_1.jsxs)(index_js_2.CameraRoot, { className: "absolute w-full h-full z-1", format: "image/png", onCapture: (file) => {
|
|
151
|
+
return ((0, jsx_runtime_1.jsxs)(ImageUploaderRoot, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(ImageUploaderDisplay, { crossOrigin: crossOrigin }), (0, jsx_runtime_1.jsxs)(ImageUploaderEmptyControls, { children: [(0, jsx_runtime_1.jsx)(ImageUploaderFileButton, {}), (0, jsx_runtime_1.jsxs)(index_js_1.Button, { color: "ghost", onClick: openCamera, children: [(0, jsx_runtime_1.jsx)(index_js_3.Icon, { name: "camera" }), (0, jsx_runtime_1.jsx)("span", { children: "Camera" })] })] }), !props.value && cameraOpen && ((0, jsx_runtime_1.jsxs)(index_js_2.CameraRoot, { className: "absolute w-full h-full z-1", format: "image/png", onCapture: (file) => {
|
|
151
152
|
props.onChange(file);
|
|
152
153
|
setCameraOpen(false);
|
|
153
154
|
}, facingMode: props.facingMode, children: [(0, jsx_runtime_1.jsx)(index_js_2.CameraShutterButton, {}), (0, jsx_runtime_1.jsx)(index_js_2.CameraDeviceSelector, {}), (0, jsx_runtime_1.jsx)(index_js_2.CameraFullscreenButton, {}), (0, jsx_runtime_1.jsx)(index_js_1.Button, { onClick: () => setCameraOpen(false), color: "ghost", size: "small", className: "text-white absolute top-2 left-2", children: "Cancel" })] })), (0, jsx_runtime_1.jsx)(ImageUploaderRemoveButton, {})] })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageUploader.js","sourceRoot":"","sources":["../../../../src/components/imageUploader/ImageUploader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ImageUploader.js","sourceRoot":"","sources":["../../../../src/components/imageUploader/ImageUploader.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,8 +2,9 @@ import type { StoryObj } from '@storybook/react';
|
|
|
2
2
|
import { ImageUploader } from './ImageUploader.js';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ((props: Omit<import("./ImageUploader.js").ImageUploaderProps, "children"> & {
|
|
5
|
+
component: (({ crossOrigin, ...props }: Omit<import("./ImageUploader.js").ImageUploaderProps, "children"> & {
|
|
6
6
|
facingMode?: "user" | "environment";
|
|
7
|
+
crossOrigin?: import("react").ImgHTMLAttributes<HTMLImageElement>["crossOrigin"];
|
|
7
8
|
}) => import("react/jsx-runtime.js").JSX.Element) & {
|
|
8
9
|
Root: typeof import("./ImageUploader.js").ImageUploaderRoot;
|
|
9
10
|
FileButton: typeof import("./ImageUploader.js").ImageUploaderFileButton;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
1
|
+
import { CSSProperties, HTMLProps } from 'react';
|
|
2
2
|
export interface AvatarProps {
|
|
3
3
|
className?: string;
|
|
4
4
|
popIn?: boolean;
|
|
5
5
|
style?: CSSProperties;
|
|
6
6
|
imageSrc?: string | null;
|
|
7
7
|
name?: string;
|
|
8
|
+
crossOrigin?: HTMLProps<HTMLImageElement>['crossOrigin'];
|
|
8
9
|
}
|
|
9
|
-
export declare function Avatar({ className, popIn, imageSrc, name, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function Avatar({ className, popIn, imageSrc, name, crossOrigin, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -12,16 +12,21 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
};
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
14
|
import classNames from 'clsx';
|
|
15
|
+
import { useState } from 'react';
|
|
15
16
|
import { Icon } from '../icon/index.js';
|
|
16
17
|
export function Avatar(_a) {
|
|
17
|
-
var { className, popIn = false, imageSrc, name } = _a, rest = __rest(_a, ["className", "popIn", "imageSrc", "name"]);
|
|
18
|
+
var { className, popIn = false, imageSrc, name, crossOrigin } = _a, rest = __rest(_a, ["className", "popIn", "imageSrc", "name", "crossOrigin"]);
|
|
18
19
|
const empty = !name && !imageSrc;
|
|
19
20
|
return (_jsxs("div", Object.assign({ "data-pop": popIn, className: classNames('layer-components:flex layer-components:items-center layer-components:justify-center layer-components:rounded-lg layer-components:border-default layer-components:overflow-hidden layer-components:w-24px layer-components:aspect-1 layer-components:select-none layer-components:relative layer-components:bg-white layer-components:flex-shrink-0', popIn &&
|
|
20
|
-
'layer-variants:animate-pop-in-from-half layer-variants:animate-ease-springy layer-variants:animate-duration-200', empty && 'layer-components(border-dashed bg-gray-light)', className) }, rest, { children: [!empty && _jsx(AvatarContent, { name: name, imageSrc: imageSrc }), empty && _jsx(Icon, { name: "profile" })] })));
|
|
21
|
+
'layer-variants:animate-pop-in-from-half layer-variants:animate-ease-springy layer-variants:animate-duration-200', empty && 'layer-components(border-dashed bg-gray-light)', className) }, rest, { children: [!empty && (_jsx(AvatarContent, { name: name, imageSrc: imageSrc, crossOrigin: crossOrigin })), empty && _jsx(Icon, { name: "profile" })] })));
|
|
21
22
|
}
|
|
22
|
-
function AvatarContent({ name, imageSrc, }) {
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
function AvatarContent({ name, imageSrc, crossOrigin = 'anonymous', }) {
|
|
24
|
+
const [fallback, setFallback] = useState(false);
|
|
25
|
+
const triggerFallback = () => {
|
|
26
|
+
setFallback(true);
|
|
27
|
+
};
|
|
28
|
+
if (imageSrc && !fallback) {
|
|
29
|
+
return (_jsx("img", { className: "w-full h-full object-cover", referrerPolicy: "no-referrer", src: imageSrc, alt: `${name !== null && name !== void 0 ? name : 'user'}'s profile picture`, crossOrigin: crossOrigin, onError: triggerFallback }));
|
|
25
30
|
}
|
|
26
31
|
return (_jsx("div", { className: "color-black items-center justify-center flex text-sm font-bold", children: (name === null || name === void 0 ? void 0 : name.charAt(0)) || '?' }));
|
|
27
32
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../../src/components/avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAA4B,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAWxC,MAAM,UAAU,MAAM,CAAC,EAOT;QAPS,EACtB,SAAS,EACT,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,IAAI,EACJ,WAAW,OAEE,EADV,IAAI,cANe,yDAOtB,CADO;IAEP,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;IACjC,OAAO,CACN,yCACW,KAAK,EACf,SAAS,EAAE,UAAU,CACpB,2JAA2J,EAC3J,KAAK;YACJ,qFAAqF,EACtF,KAAK,IAAI,+CAA+C,EACxD,SAAS,CACT,IACG,IAAI,eAEP,CAAC,KAAK,IAAI,CACV,KAAC,aAAa,IACb,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GACvB,CACF,EACA,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,GAAG,KAC5B,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EACtB,IAAI,EACJ,QAAQ,EACR,WAAW,GAAG,WAAW,GAKzB;IACA,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,eAAe,GAAG,GAAG,EAAE;QAC5B,WAAW,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,CAAC;IACF,IAAI,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC3B,OAAO,CACN,cACC,SAAS,EAAC,4BAA4B,EACtC,cAAc,EAAC,aAAa,EAC5B,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,GAAG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,MAAM,oBAAoB,EAC1C,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,eAAe,GACvB,CACF,CAAC;IACH,CAAC;IACD,OAAO,CACN,cAAK,SAAS,EAAC,gEAAgE,YAC7E,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,CAAC,CAAC,KAAI,GAAG,GAClB,CACN,CAAC;AACH,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { ImgHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { ButtonProps } from '../button/index.js';
|
|
3
3
|
export interface ImageUploaderProps {
|
|
4
4
|
value: string | null;
|
|
@@ -13,14 +13,13 @@ export interface ImageUploaderProps {
|
|
|
13
13
|
* component to replace the existing one.
|
|
14
14
|
*/
|
|
15
15
|
export declare function ImageUploaderRoot({ value, onChange: handleChange, maxDimension, children, ...rest }: ImageUploaderProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
declare function ImageUploaderPrebuilt(props: Omit<ImageUploaderProps, 'children'> & {
|
|
16
|
+
declare function ImageUploaderPrebuilt({ crossOrigin, ...props }: Omit<ImageUploaderProps, 'children'> & {
|
|
17
17
|
facingMode?: 'user' | 'environment';
|
|
18
|
+
crossOrigin?: ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
|
|
18
19
|
}): import("react/jsx-runtime").JSX.Element;
|
|
19
20
|
export declare function ImageUploaderFileButton({ children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
|
|
20
21
|
export declare function ImageUploaderRemoveButton({ className, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element | null;
|
|
21
|
-
export declare function ImageUploaderDisplay({ className, ...rest }:
|
|
22
|
-
className?: string;
|
|
23
|
-
}): import("react/jsx-runtime").JSX.Element | null;
|
|
22
|
+
export declare function ImageUploaderDisplay({ className, ...rest }: ImgHTMLAttributes<HTMLImageElement>): import("react/jsx-runtime").JSX.Element | null;
|
|
24
23
|
export declare function ImageUploaderEmptyControls({ children, className, }: {
|
|
25
24
|
children: ReactNode;
|
|
26
25
|
className?: string;
|
|
@@ -103,10 +103,11 @@ function useUploaderContext() {
|
|
|
103
103
|
}
|
|
104
104
|
return context;
|
|
105
105
|
}
|
|
106
|
-
function ImageUploaderPrebuilt(
|
|
106
|
+
function ImageUploaderPrebuilt(_a) {
|
|
107
|
+
var { crossOrigin = 'anonymous' } = _a, props = __rest(_a, ["crossOrigin"]);
|
|
107
108
|
const [cameraOpen, setCameraOpen] = useState(false);
|
|
108
109
|
const openCamera = () => setCameraOpen(true);
|
|
109
|
-
return (_jsxs(ImageUploaderRoot, Object.assign({}, props, { children: [_jsx(ImageUploaderDisplay, {}), _jsxs(ImageUploaderEmptyControls, { children: [_jsx(ImageUploaderFileButton, {}), _jsxs(Button, { color: "ghost", onClick: openCamera, children: [_jsx(Icon, { name: "camera" }), _jsx("span", { children: "Camera" })] })] }), !props.value && cameraOpen && (_jsxs(CameraRoot, { className: "absolute w-full h-full z-1", format: "image/png", onCapture: (file) => {
|
|
110
|
+
return (_jsxs(ImageUploaderRoot, Object.assign({}, props, { children: [_jsx(ImageUploaderDisplay, { crossOrigin: crossOrigin }), _jsxs(ImageUploaderEmptyControls, { children: [_jsx(ImageUploaderFileButton, {}), _jsxs(Button, { color: "ghost", onClick: openCamera, children: [_jsx(Icon, { name: "camera" }), _jsx("span", { children: "Camera" })] })] }), !props.value && cameraOpen && (_jsxs(CameraRoot, { className: "absolute w-full h-full z-1", format: "image/png", onCapture: (file) => {
|
|
110
111
|
props.onChange(file);
|
|
111
112
|
setCameraOpen(false);
|
|
112
113
|
}, facingMode: props.facingMode, children: [_jsx(CameraShutterButton, {}), _jsx(CameraDeviceSelector, {}), _jsx(CameraFullscreenButton, {}), _jsx(Button, { onClick: () => setCameraOpen(false), color: "ghost", size: "small", className: "text-white absolute top-2 left-2", children: "Cancel" })] })), _jsx(ImageUploaderRemoveButton, {})] })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageUploader.js","sourceRoot":"","sources":["../../../../src/components/imageUploader/ImageUploader.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AACxC,OAAO,EACN,aAAa,
|
|
1
|
+
{"version":3,"file":"ImageUploader.js","sourceRoot":"","sources":["../../../../src/components/imageUploader/ImageUploader.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,8 +2,9 @@ import type { StoryObj } from '@storybook/react';
|
|
|
2
2
|
import { ImageUploader } from './ImageUploader.js';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: ((props: Omit<import("./ImageUploader.js").ImageUploaderProps, "children"> & {
|
|
5
|
+
component: (({ crossOrigin, ...props }: Omit<import("./ImageUploader.js").ImageUploaderProps, "children"> & {
|
|
6
6
|
facingMode?: "user" | "environment";
|
|
7
|
+
crossOrigin?: import("react").ImgHTMLAttributes<HTMLImageElement>["crossOrigin"];
|
|
7
8
|
}) => import("react/jsx-runtime").JSX.Element) & {
|
|
8
9
|
Root: typeof import("./ImageUploader.js").ImageUploaderRoot;
|
|
9
10
|
FileButton: typeof import("./ImageUploader.js").ImageUploaderFileButton;
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import classNames from 'clsx';
|
|
2
|
-
import { CSSProperties } from 'react';
|
|
2
|
+
import { CSSProperties, HTMLProps, useState } from 'react';
|
|
3
3
|
import { Icon } from '../icon/index.js';
|
|
4
4
|
|
|
5
5
|
export interface AvatarProps {
|
|
@@ -8,6 +8,7 @@ export interface AvatarProps {
|
|
|
8
8
|
style?: CSSProperties;
|
|
9
9
|
imageSrc?: string | null;
|
|
10
10
|
name?: string;
|
|
11
|
+
crossOrigin?: HTMLProps<HTMLImageElement>['crossOrigin'];
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
export function Avatar({
|
|
@@ -15,6 +16,7 @@ export function Avatar({
|
|
|
15
16
|
popIn = false,
|
|
16
17
|
imageSrc,
|
|
17
18
|
name,
|
|
19
|
+
crossOrigin,
|
|
18
20
|
...rest
|
|
19
21
|
}: AvatarProps) {
|
|
20
22
|
const empty = !name && !imageSrc;
|
|
@@ -30,7 +32,13 @@ export function Avatar({
|
|
|
30
32
|
)}
|
|
31
33
|
{...rest}
|
|
32
34
|
>
|
|
33
|
-
{!empty &&
|
|
35
|
+
{!empty && (
|
|
36
|
+
<AvatarContent
|
|
37
|
+
name={name}
|
|
38
|
+
imageSrc={imageSrc}
|
|
39
|
+
crossOrigin={crossOrigin}
|
|
40
|
+
/>
|
|
41
|
+
)}
|
|
34
42
|
{empty && <Icon name="profile" />}
|
|
35
43
|
</div>
|
|
36
44
|
);
|
|
@@ -39,18 +47,25 @@ export function Avatar({
|
|
|
39
47
|
function AvatarContent({
|
|
40
48
|
name,
|
|
41
49
|
imageSrc,
|
|
50
|
+
crossOrigin = 'anonymous',
|
|
42
51
|
}: {
|
|
43
52
|
name?: string;
|
|
44
53
|
imageSrc?: string | null;
|
|
54
|
+
crossOrigin?: HTMLProps<HTMLImageElement>['crossOrigin'];
|
|
45
55
|
}) {
|
|
46
|
-
|
|
56
|
+
const [fallback, setFallback] = useState(false);
|
|
57
|
+
const triggerFallback = () => {
|
|
58
|
+
setFallback(true);
|
|
59
|
+
};
|
|
60
|
+
if (imageSrc && !fallback) {
|
|
47
61
|
return (
|
|
48
62
|
<img
|
|
49
63
|
className="w-full h-full object-cover"
|
|
50
64
|
referrerPolicy="no-referrer"
|
|
51
|
-
crossOrigin="anonymous"
|
|
52
65
|
src={imageSrc}
|
|
53
66
|
alt={`${name ?? 'user'}'s profile picture`}
|
|
67
|
+
crossOrigin={crossOrigin}
|
|
68
|
+
onError={triggerFallback}
|
|
54
69
|
/>
|
|
55
70
|
);
|
|
56
71
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import classNames, { clsx } from 'clsx';
|
|
2
2
|
import {
|
|
3
3
|
createContext,
|
|
4
|
+
ImgHTMLAttributes,
|
|
4
5
|
ReactNode,
|
|
5
6
|
useCallback,
|
|
6
7
|
useContext,
|
|
@@ -171,17 +172,19 @@ function useUploaderContext() {
|
|
|
171
172
|
return context;
|
|
172
173
|
}
|
|
173
174
|
|
|
174
|
-
function ImageUploaderPrebuilt(
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
175
|
+
function ImageUploaderPrebuilt({
|
|
176
|
+
crossOrigin = 'anonymous',
|
|
177
|
+
...props
|
|
178
|
+
}: Omit<ImageUploaderProps, 'children'> & {
|
|
179
|
+
facingMode?: 'user' | 'environment';
|
|
180
|
+
crossOrigin?: ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
|
|
181
|
+
}) {
|
|
179
182
|
const [cameraOpen, setCameraOpen] = useState(false);
|
|
180
183
|
const openCamera = () => setCameraOpen(true);
|
|
181
184
|
|
|
182
185
|
return (
|
|
183
186
|
<ImageUploaderRoot {...props}>
|
|
184
|
-
<ImageUploaderDisplay />
|
|
187
|
+
<ImageUploaderDisplay crossOrigin={crossOrigin} />
|
|
185
188
|
|
|
186
189
|
<ImageUploaderEmptyControls>
|
|
187
190
|
<ImageUploaderFileButton />
|
|
@@ -278,9 +281,7 @@ export function ImageUploaderRemoveButton({ className, ...rest }: ButtonProps) {
|
|
|
278
281
|
export function ImageUploaderDisplay({
|
|
279
282
|
className,
|
|
280
283
|
...rest
|
|
281
|
-
}: {
|
|
282
|
-
className?: string;
|
|
283
|
-
}) {
|
|
284
|
+
}: ImgHTMLAttributes<HTMLImageElement>) {
|
|
284
285
|
const { value } = useUploaderContext();
|
|
285
286
|
return value ? (
|
|
286
287
|
<img
|