@emporix/component-library 2.3.0 → 2.4.1
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 +143 -0
- package/dist/components/editor/Editor.d.ts +85 -0
- package/dist/components/editor/Editor.d.ts.map +1 -0
- package/dist/components/editor/index.d.ts +3 -0
- package/dist/components/editor/index.d.ts.map +1 -0
- package/dist/components/fieldlabel/FieldLabel.d.ts.map +1 -1
- package/dist/components/fileupload/FileUpload.d.ts +188 -0
- package/dist/components/fileupload/FileUpload.d.ts.map +1 -0
- package/dist/components/fileupload/index.d.ts +3 -0
- package/dist/components/fileupload/index.d.ts.map +1 -0
- package/dist/components/progressbar/ProgressBar.d.ts +59 -0
- package/dist/components/progressbar/ProgressBar.d.ts.map +1 -0
- package/dist/components/progressbar/index.d.ts +3 -0
- package/dist/components/progressbar/index.d.ts.map +1 -0
- package/dist/index-Cc9uulfe.js +14976 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.es.js +36 -13785
- package/dist/index.umd.js +100 -55
- package/dist/quill-dcYbXeA-.js +7349 -0
- package/dist/style.css +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -941,6 +941,149 @@ import { SectionBox } from '@emporix/component-library'
|
|
|
941
941
|
|
|
942
942
|
`SectionTitle` accepts `name`, `actions`, `className`, and `data-testid`.
|
|
943
943
|
|
|
944
|
+
### Editor
|
|
945
|
+
|
|
946
|
+
Rich-text editor for HTML content, built on [PrimeReact Editor](https://primereact.org/editor/) (Quill). Pattern B — both `primereact` and `quill` ship bundled, and Quill's snow-theme CSS is already inside `@emporix/component-library/styles`, so consumers add no extra dependency or stylesheet.
|
|
947
|
+
|
|
948
|
+
```tsx
|
|
949
|
+
import { useState } from 'react'
|
|
950
|
+
import { Editor } from '@emporix/component-library'
|
|
951
|
+
|
|
952
|
+
const BrandDescription = () => {
|
|
953
|
+
const [description, setDescription] = useState('')
|
|
954
|
+
|
|
955
|
+
return (
|
|
956
|
+
<Editor
|
|
957
|
+
label='Description'
|
|
958
|
+
required
|
|
959
|
+
value={description}
|
|
960
|
+
onTextChange={event => setDescription(event.htmlValue ?? '')}
|
|
961
|
+
/>
|
|
962
|
+
)
|
|
963
|
+
}
|
|
964
|
+
```
|
|
965
|
+
|
|
966
|
+
Persist `event.htmlValue` — it is `null` when the editor has been emptied. Pass already-translated `label` / `tooltip` strings; the component does no i18n itself.
|
|
967
|
+
|
|
968
|
+
#### Props
|
|
969
|
+
|
|
970
|
+
| Prop | Type | Default | Description |
|
|
971
|
+
| -------------- | ---------------------------------------- | ------- | ----------------------------------------------------------------- |
|
|
972
|
+
| value | string | - | Editor contents as an HTML string |
|
|
973
|
+
| onTextChange | `(event: EditorTextChangeEvent) => void` | - | Called on every content change |
|
|
974
|
+
| label | ReactNode | - | Label rendered above the editor (via `FieldLabel`) |
|
|
975
|
+
| tooltip | string | - | Info icon tooltip next to the label |
|
|
976
|
+
| required | boolean | `false` | Shows a required asterisk on the label |
|
|
977
|
+
| error | ReactNode | - | Error text rendered below the editor |
|
|
978
|
+
| readOnly | boolean | `false` | Disables editing and hides the toolbar |
|
|
979
|
+
| placeholder | string | - | Placeholder shown while empty |
|
|
980
|
+
| showHeader | boolean | `true` | Whether the formatting toolbar renders (forced off when readOnly) |
|
|
981
|
+
| headerTemplate | ReactNode | - | Replaces the default toolbar |
|
|
982
|
+
| contentStyle | CSSProperties | - | Inline styles for the editable area — use it to set `height` |
|
|
983
|
+
| className | string | - | Additional CSS class on the root wrapper |
|
|
984
|
+
| data-testid | string | - | Test ID for testing |
|
|
985
|
+
|
|
986
|
+
`EditorTextChangeEvent` exposes `htmlValue`, `textValue`, `delta`, and `source`.
|
|
987
|
+
|
|
988
|
+
> **Note:** PrimeReact 8's Editor targets Quill 1.x. Pairing it with Quill 2 silently breaks loading existing content (Quill 2 changed `clipboard.convert` to take an object), so the library pins `quill@^1.3.7`.
|
|
989
|
+
|
|
990
|
+
### FileUpload
|
|
991
|
+
|
|
992
|
+
File picker with drag-and-drop, built on [PrimeReact FileUpload](https://primereact.org/fileupload/). Pattern B. For uploads needing custom transport (signed URLs, progress tracking), set `customUpload` and implement `uploadHandler`.
|
|
993
|
+
|
|
994
|
+
```tsx
|
|
995
|
+
import { FileUpload } from '@emporix/component-library'
|
|
996
|
+
|
|
997
|
+
const AssetUpload = () => (
|
|
998
|
+
<FileUpload
|
|
999
|
+
accept='image/*'
|
|
1000
|
+
multiple
|
|
1001
|
+
customUpload
|
|
1002
|
+
chooseLabel='Choose'
|
|
1003
|
+
uploadLabel='Upload'
|
|
1004
|
+
cancelLabel='Clear'
|
|
1005
|
+
emptyTemplate={<span>Drag and drop images here</span>}
|
|
1006
|
+
uploadHandler={async event => {
|
|
1007
|
+
await uploadAssets(event.files)
|
|
1008
|
+
event.options.clear()
|
|
1009
|
+
}}
|
|
1010
|
+
/>
|
|
1011
|
+
)
|
|
1012
|
+
```
|
|
1013
|
+
|
|
1014
|
+
Pass already-translated button labels. A `ref` exposes `upload()`, `clear()`, `formatSize(bytes)`, and `getFiles()` via the `FileUploadRef` type.
|
|
1015
|
+
|
|
1016
|
+
#### Props
|
|
1017
|
+
|
|
1018
|
+
| Prop | Type | Default | Description |
|
|
1019
|
+
| ---------------- | ------------------------------------------ | ------------ | ------------------------------------------------- |
|
|
1020
|
+
| mode | `'advanced'` \| `'basic'` | `'advanced'` | Drop area with buttons, or a single button |
|
|
1021
|
+
| multiple | boolean | `false` | Whether several files can be selected |
|
|
1022
|
+
| accept | string | - | Accepted file types, e.g. `image/*` |
|
|
1023
|
+
| disabled | boolean | `false` | Whether the control is disabled |
|
|
1024
|
+
| auto | boolean | `false` | Upload immediately on selection |
|
|
1025
|
+
| maxFileSize | number | - | Maximum accepted size per file, in bytes |
|
|
1026
|
+
| url | string | - | Remote endpoint for the built-in upload |
|
|
1027
|
+
| name | string | - | Request parameter name holding the files |
|
|
1028
|
+
| customUpload | boolean | `false` | Route uploads through `uploadHandler` |
|
|
1029
|
+
| uploadHandler | `(event: FileUploadHandlerEvent) => void` | - | Performs the upload when `customUpload` is set |
|
|
1030
|
+
| onSelect | `(event: FileUploadSelectEvent) => void` | - | Called when files are selected |
|
|
1031
|
+
| onUpload | `(event: FileUploadUploadEvent) => void` | - | Called after a successful built-in upload |
|
|
1032
|
+
| onError | `(event: FileUploadUploadEvent) => void` | - | Called when a built-in upload fails |
|
|
1033
|
+
| onProgress | `(event: FileUploadProgressEvent) => void` | - | Called as a built-in upload progresses |
|
|
1034
|
+
| onRemove | `(event: FileUploadRemoveEvent) => void` | - | Called when a pending file is removed |
|
|
1035
|
+
| onClear | `() => void` | - | Called when the file list is cleared |
|
|
1036
|
+
| onValidationFail | `(file: File) => void` | - | Called when a file fails `accept` / `maxFileSize` |
|
|
1037
|
+
| headerTemplate | ReactNode \| function | - | Replaces the button row |
|
|
1038
|
+
| itemTemplate | ReactNode \| function | - | Renders one pending file row |
|
|
1039
|
+
| emptyTemplate | ReactNode \| function | - | Rendered while no file is pending |
|
|
1040
|
+
| chooseLabel | string | - | Choose button label |
|
|
1041
|
+
| uploadLabel | string | - | Upload button label |
|
|
1042
|
+
| cancelLabel | string | - | Cancel button label |
|
|
1043
|
+
| chooseOptions | FileUploadButtonOptions | - | Choose button appearance |
|
|
1044
|
+
| uploadOptions | FileUploadButtonOptions | - | Upload button appearance |
|
|
1045
|
+
| cancelOptions | FileUploadButtonOptions | - | Cancel button appearance |
|
|
1046
|
+
| className | string | - | Additional CSS class on the root |
|
|
1047
|
+
| style | CSSProperties | - | Inline styles on the root |
|
|
1048
|
+
| data-testid | string | - | Test ID for testing |
|
|
1049
|
+
|
|
1050
|
+
### ProgressBar
|
|
1051
|
+
|
|
1052
|
+
Horizontal progress indicator for determinate work (uploads, imports) and indeterminate waits. Pattern B, built on [PrimeReact ProgressBar](https://primereact.org/progressbar/). For a blocking spinner use [`ProgressSpinner`](#progressspinner) instead.
|
|
1053
|
+
|
|
1054
|
+
```tsx
|
|
1055
|
+
import { ProgressBar } from '@emporix/component-library'
|
|
1056
|
+
|
|
1057
|
+
const UploadProgress = () => (
|
|
1058
|
+
<>
|
|
1059
|
+
<ProgressBar value={uploadedPercentage} />
|
|
1060
|
+
|
|
1061
|
+
{/* Absolute progress instead of a percentage */}
|
|
1062
|
+
<ProgressBar
|
|
1063
|
+
value={uploadedPercentage}
|
|
1064
|
+
displayValueTemplate={() => `${uploadedSize} / ${totalSize}`}
|
|
1065
|
+
/>
|
|
1066
|
+
|
|
1067
|
+
{/* Unknown duration */}
|
|
1068
|
+
<ProgressBar mode='indeterminate' />
|
|
1069
|
+
</>
|
|
1070
|
+
)
|
|
1071
|
+
```
|
|
1072
|
+
|
|
1073
|
+
#### Props
|
|
1074
|
+
|
|
1075
|
+
| Prop | Type | Default | Description |
|
|
1076
|
+
| -------------------- | ---------------------------------------- | --------------- | ---------------------------------------------- |
|
|
1077
|
+
| value | number \| string | - | Completion value, normally 0-100 |
|
|
1078
|
+
| mode | `'determinate'` \| `'indeterminate'` | `'determinate'` | Fills to `value`, or loops indefinitely |
|
|
1079
|
+
| showValue | boolean | `true` | Whether the value label renders inside the bar |
|
|
1080
|
+
| unit | string | `'%'` | Suffix appended to the default value label |
|
|
1081
|
+
| color | string | - | Custom bar color |
|
|
1082
|
+
| displayValueTemplate | `(value: ProgressBarValue) => ReactNode` | - | Renders a custom value label |
|
|
1083
|
+
| className | string | - | Additional CSS class on the bar root |
|
|
1084
|
+
| style | CSSProperties | - | Inline styles on the bar root (e.g. `height`) |
|
|
1085
|
+
| data-testid | string | - | Test ID for testing |
|
|
1086
|
+
|
|
944
1087
|
### ProgressSpinner
|
|
945
1088
|
|
|
946
1089
|
Indeterminate loading spinner for overlays and blocking states. Pattern A (no PrimeReact dependency). API inspired by [PrimeReact ProgressSpinner](https://primereact.org/progressspinner/).
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Emitted whenever the document changes. `htmlValue` is what you normally
|
|
4
|
+
* persist; it is `null` when the editor has been emptied.
|
|
5
|
+
*/
|
|
6
|
+
export interface EditorTextChangeEvent {
|
|
7
|
+
/** Editor contents as an HTML string, or `null` when empty. */
|
|
8
|
+
htmlValue: string | null;
|
|
9
|
+
/** Editor contents as plain text. */
|
|
10
|
+
textValue: string;
|
|
11
|
+
/** Quill delta describing the change. */
|
|
12
|
+
delta: unknown;
|
|
13
|
+
/** Origin of the change, e.g. `user` or `api`. */
|
|
14
|
+
source: string;
|
|
15
|
+
}
|
|
16
|
+
export interface EditorProps {
|
|
17
|
+
/**
|
|
18
|
+
* Editor contents as an HTML string.
|
|
19
|
+
*/
|
|
20
|
+
value?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Called on every content change. Persist `event.htmlValue`.
|
|
23
|
+
*/
|
|
24
|
+
onTextChange?: (event: EditorTextChangeEvent) => void;
|
|
25
|
+
/**
|
|
26
|
+
* Label rendered above the editor.
|
|
27
|
+
*/
|
|
28
|
+
label?: ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* When set, an info icon with this tooltip is shown next to the label.
|
|
31
|
+
*/
|
|
32
|
+
tooltip?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Whether the field is required (shows an asterisk on the label).
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
37
|
+
required?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Error text rendered below the editor.
|
|
40
|
+
*/
|
|
41
|
+
error?: ReactNode;
|
|
42
|
+
/**
|
|
43
|
+
* When true, content cannot be edited and the toolbar is hidden.
|
|
44
|
+
* @default false
|
|
45
|
+
*/
|
|
46
|
+
readOnly?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Placeholder shown while the editor is empty.
|
|
49
|
+
*/
|
|
50
|
+
placeholder?: string;
|
|
51
|
+
/**
|
|
52
|
+
* Whether the formatting toolbar is rendered. Forced off when `readOnly`.
|
|
53
|
+
* @default true
|
|
54
|
+
*/
|
|
55
|
+
showHeader?: boolean;
|
|
56
|
+
/**
|
|
57
|
+
* Replaces the default formatting toolbar.
|
|
58
|
+
*/
|
|
59
|
+
headerTemplate?: ReactNode;
|
|
60
|
+
/**
|
|
61
|
+
* Inline styles for the editable content area — use it to set `height`.
|
|
62
|
+
* (PrimeReact applies its `style` prop to the content area, not the root.)
|
|
63
|
+
*/
|
|
64
|
+
contentStyle?: CSSProperties;
|
|
65
|
+
/**
|
|
66
|
+
* Additional CSS class name on the root wrapper.
|
|
67
|
+
*/
|
|
68
|
+
className?: string;
|
|
69
|
+
/**
|
|
70
|
+
* Test ID for testing.
|
|
71
|
+
*/
|
|
72
|
+
'data-testid'?: string;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Rich-text editor for HTML content, built on
|
|
76
|
+
* [PrimeReact Editor](https://primereact.org/editor/) (Quill).
|
|
77
|
+
*
|
|
78
|
+
* Pass already-translated `label` / `tooltip` strings — the component is
|
|
79
|
+
* context-free and does no i18n itself.
|
|
80
|
+
*/
|
|
81
|
+
export declare const Editor: {
|
|
82
|
+
({ value, onTextChange, label, tooltip, required, error, readOnly, placeholder, showHeader, headerTemplate, contentStyle, className, "data-testid": testId, }: EditorProps): import("react/jsx-runtime").JSX.Element;
|
|
83
|
+
displayName: string;
|
|
84
|
+
};
|
|
85
|
+
//# sourceMappingURL=Editor.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../../src/components/editor/Editor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMrD;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,+DAA+D;IAC/D,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,KAAK,EAAE,OAAO,CAAA;IACd,kDAAkD;IAClD,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAA;IACrD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,aAAa,CAAA;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;mKAchB,WAAW;;CA2Bb,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../../src/components/fieldlabel/FieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"FieldLabel.d.ts","sourceRoot":"","sources":["../../../src/components/fieldlabel/FieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,UAAU,GAAI,6EAOxB,eAAe,4CAgBjB,CAAA"}
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode, SyntheticEvent } from 'react';
|
|
2
|
+
/** `advanced` shows the drop area with choose/upload/cancel buttons; `basic` is a single button. */
|
|
3
|
+
export type FileUploadMode = 'basic' | 'advanced';
|
|
4
|
+
/** Styling and labelling for one of the built-in buttons. */
|
|
5
|
+
export interface FileUploadButtonOptions {
|
|
6
|
+
label?: string;
|
|
7
|
+
icon?: ReactNode;
|
|
8
|
+
iconOnly?: boolean;
|
|
9
|
+
className?: string;
|
|
10
|
+
style?: CSSProperties;
|
|
11
|
+
}
|
|
12
|
+
export interface FileUploadSelectEvent {
|
|
13
|
+
/** Files chosen by the user. */
|
|
14
|
+
files: File[];
|
|
15
|
+
originalEvent: React.ChangeEvent<HTMLInputElement> | DragEvent;
|
|
16
|
+
}
|
|
17
|
+
export interface FileUploadUploadEvent {
|
|
18
|
+
files: File[];
|
|
19
|
+
xhr: XMLHttpRequest;
|
|
20
|
+
}
|
|
21
|
+
export interface FileUploadProgressEvent {
|
|
22
|
+
originalEvent: SyntheticEvent;
|
|
23
|
+
/** Completion percentage, 0-100. */
|
|
24
|
+
progress: number;
|
|
25
|
+
}
|
|
26
|
+
export interface FileUploadRemoveEvent {
|
|
27
|
+
originalEvent: SyntheticEvent;
|
|
28
|
+
file: File;
|
|
29
|
+
}
|
|
30
|
+
/** Passed to `uploadHandler` when `customUpload` is set. */
|
|
31
|
+
export interface FileUploadHandlerEvent {
|
|
32
|
+
files: File[];
|
|
33
|
+
options: {
|
|
34
|
+
/** Clears the pending file list. */
|
|
35
|
+
clear: () => void;
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
/** Options object handed to `itemTemplate`. */
|
|
39
|
+
export interface FileUploadItemTemplateOptions {
|
|
40
|
+
onRemove: (event: SyntheticEvent) => void;
|
|
41
|
+
formatSize: string;
|
|
42
|
+
files: File[];
|
|
43
|
+
index: number;
|
|
44
|
+
}
|
|
45
|
+
/** Imperative handle exposed via `ref`. */
|
|
46
|
+
export interface FileUploadRef {
|
|
47
|
+
/** Starts the upload of the pending files. */
|
|
48
|
+
upload: () => void;
|
|
49
|
+
/** Clears the pending file list. */
|
|
50
|
+
clear: () => void;
|
|
51
|
+
/** Formats a byte count as a human-readable string. */
|
|
52
|
+
formatSize: (bytes: number) => string;
|
|
53
|
+
/** Currently pending files. */
|
|
54
|
+
getFiles: () => File[];
|
|
55
|
+
}
|
|
56
|
+
export interface FileUploadProps {
|
|
57
|
+
/**
|
|
58
|
+
* Name of the request parameter holding the files.
|
|
59
|
+
*/
|
|
60
|
+
name?: string;
|
|
61
|
+
/**
|
|
62
|
+
* Remote endpoint. Omit it when using `customUpload` + `uploadHandler`.
|
|
63
|
+
*/
|
|
64
|
+
url?: string;
|
|
65
|
+
/**
|
|
66
|
+
* Whether the drop area with buttons or a single button is rendered.
|
|
67
|
+
* @default 'advanced'
|
|
68
|
+
*/
|
|
69
|
+
mode?: FileUploadMode;
|
|
70
|
+
/**
|
|
71
|
+
* Whether more than one file can be selected.
|
|
72
|
+
* @default false
|
|
73
|
+
*/
|
|
74
|
+
multiple?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Accepted file types, e.g. `image/*`.
|
|
77
|
+
*/
|
|
78
|
+
accept?: string;
|
|
79
|
+
/**
|
|
80
|
+
* Whether the control is disabled.
|
|
81
|
+
* @default false
|
|
82
|
+
*/
|
|
83
|
+
disabled?: boolean;
|
|
84
|
+
/**
|
|
85
|
+
* Whether selected files upload immediately, without pressing Upload.
|
|
86
|
+
* @default false
|
|
87
|
+
*/
|
|
88
|
+
auto?: boolean;
|
|
89
|
+
/**
|
|
90
|
+
* Maximum accepted size per file, in bytes.
|
|
91
|
+
*/
|
|
92
|
+
maxFileSize?: number;
|
|
93
|
+
/**
|
|
94
|
+
* When true, `uploadHandler` performs the upload instead of the built-in XHR.
|
|
95
|
+
* @default false
|
|
96
|
+
*/
|
|
97
|
+
customUpload?: boolean;
|
|
98
|
+
/**
|
|
99
|
+
* Performs the upload when `customUpload` is set.
|
|
100
|
+
*/
|
|
101
|
+
uploadHandler?: (event: FileUploadHandlerEvent) => void;
|
|
102
|
+
/**
|
|
103
|
+
* Called after a successful built-in upload.
|
|
104
|
+
*/
|
|
105
|
+
onUpload?: (event: FileUploadUploadEvent) => void;
|
|
106
|
+
/**
|
|
107
|
+
* Called when the user selects files.
|
|
108
|
+
*/
|
|
109
|
+
onSelect?: (event: FileUploadSelectEvent) => void;
|
|
110
|
+
/**
|
|
111
|
+
* Called when a built-in upload fails.
|
|
112
|
+
*/
|
|
113
|
+
onError?: (event: FileUploadUploadEvent) => void;
|
|
114
|
+
/**
|
|
115
|
+
* Called when the file list is cleared.
|
|
116
|
+
*/
|
|
117
|
+
onClear?: () => void;
|
|
118
|
+
/**
|
|
119
|
+
* Called as a built-in upload progresses.
|
|
120
|
+
*/
|
|
121
|
+
onProgress?: (event: FileUploadProgressEvent) => void;
|
|
122
|
+
/**
|
|
123
|
+
* Called when a single pending file is removed.
|
|
124
|
+
*/
|
|
125
|
+
onRemove?: (event: FileUploadRemoveEvent) => void;
|
|
126
|
+
/**
|
|
127
|
+
* Called when a file fails `accept` / `maxFileSize` validation.
|
|
128
|
+
*/
|
|
129
|
+
onValidationFail?: (file: File) => void;
|
|
130
|
+
/**
|
|
131
|
+
* Replaces the header (button row) content.
|
|
132
|
+
*/
|
|
133
|
+
headerTemplate?: ReactNode | ((options: unknown) => ReactNode);
|
|
134
|
+
/**
|
|
135
|
+
* Renders one pending file row.
|
|
136
|
+
*/
|
|
137
|
+
itemTemplate?: ReactNode | ((file: object, options: FileUploadItemTemplateOptions) => ReactNode);
|
|
138
|
+
/**
|
|
139
|
+
* Rendered in the drop area while no file is pending.
|
|
140
|
+
*/
|
|
141
|
+
emptyTemplate?: ReactNode | (() => ReactNode);
|
|
142
|
+
/**
|
|
143
|
+
* Label for the choose button.
|
|
144
|
+
*/
|
|
145
|
+
chooseLabel?: string;
|
|
146
|
+
/**
|
|
147
|
+
* Label for the upload button.
|
|
148
|
+
*/
|
|
149
|
+
uploadLabel?: string;
|
|
150
|
+
/**
|
|
151
|
+
* Label for the cancel button.
|
|
152
|
+
*/
|
|
153
|
+
cancelLabel?: string;
|
|
154
|
+
/**
|
|
155
|
+
* Appearance of the choose button.
|
|
156
|
+
*/
|
|
157
|
+
chooseOptions?: FileUploadButtonOptions;
|
|
158
|
+
/**
|
|
159
|
+
* Appearance of the upload button.
|
|
160
|
+
*/
|
|
161
|
+
uploadOptions?: FileUploadButtonOptions;
|
|
162
|
+
/**
|
|
163
|
+
* Appearance of the cancel button.
|
|
164
|
+
*/
|
|
165
|
+
cancelOptions?: FileUploadButtonOptions;
|
|
166
|
+
/**
|
|
167
|
+
* Additional CSS class name on the root.
|
|
168
|
+
*/
|
|
169
|
+
className?: string;
|
|
170
|
+
/**
|
|
171
|
+
* Inline styles on the root.
|
|
172
|
+
*/
|
|
173
|
+
style?: CSSProperties;
|
|
174
|
+
/**
|
|
175
|
+
* Test ID for testing.
|
|
176
|
+
*/
|
|
177
|
+
'data-testid'?: string;
|
|
178
|
+
}
|
|
179
|
+
/**
|
|
180
|
+
* File picker with drag-and-drop, built on
|
|
181
|
+
* [PrimeReact FileUpload](https://primereact.org/fileupload/).
|
|
182
|
+
*
|
|
183
|
+
* Pass already-translated button labels — the component is context-free and
|
|
184
|
+
* does no i18n itself. For uploads that need custom transport (signed URLs,
|
|
185
|
+
* progress tracking), set `customUpload` and implement `uploadHandler`.
|
|
186
|
+
*/
|
|
187
|
+
export declare const FileUpload: import('react').ForwardRefExoticComponent<FileUploadProps & import('react').RefAttributes<FileUploadRef>>;
|
|
188
|
+
//# sourceMappingURL=FileUpload.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/fileupload/FileUpload.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { FileUpload } from './FileUpload';
|
|
2
|
+
export type { FileUploadProps, FileUploadRef, FileUploadMode, FileUploadButtonOptions, FileUploadSelectEvent, FileUploadUploadEvent, FileUploadProgressEvent, FileUploadRemoveEvent, FileUploadHandlerEvent, FileUploadItemTemplateOptions, } from './FileUpload';
|
|
3
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/fileupload/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EACV,eAAe,EACf,aAAa,EACb,cAAc,EACd,uBAAuB,EACvB,qBAAqB,EACrB,qBAAqB,EACrB,uBAAuB,EACvB,qBAAqB,EACrB,sBAAsB,EACtB,6BAA6B,GAC9B,MAAM,cAAc,CAAA"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
/** Value rendered by the bar. `undefined`/`null` renders an empty bar. */
|
|
3
|
+
export type ProgressBarValue = number | string | undefined | null;
|
|
4
|
+
/**
|
|
5
|
+
* `determinate` fills the bar to `value`; `indeterminate` shows a looping
|
|
6
|
+
* animation for work of unknown length.
|
|
7
|
+
*/
|
|
8
|
+
export type ProgressBarMode = 'determinate' | 'indeterminate';
|
|
9
|
+
export interface ProgressBarProps {
|
|
10
|
+
/**
|
|
11
|
+
* Completion value, normally 0-100. Ignored in `indeterminate` mode.
|
|
12
|
+
*/
|
|
13
|
+
value?: ProgressBarValue;
|
|
14
|
+
/**
|
|
15
|
+
* Whether the bar fills to `value` or loops indefinitely.
|
|
16
|
+
* @default 'determinate'
|
|
17
|
+
*/
|
|
18
|
+
mode?: ProgressBarMode;
|
|
19
|
+
/**
|
|
20
|
+
* Whether the value label is rendered inside the bar.
|
|
21
|
+
* @default true
|
|
22
|
+
*/
|
|
23
|
+
showValue?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Suffix appended to the default value label.
|
|
26
|
+
* @default '%'
|
|
27
|
+
*/
|
|
28
|
+
unit?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Custom bar color. Defaults to the primary theme color.
|
|
31
|
+
*/
|
|
32
|
+
color?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Renders the value label. Use it to show absolute progress (e.g.
|
|
35
|
+
* `120 kB / 2 MB`) instead of a percentage.
|
|
36
|
+
*/
|
|
37
|
+
displayValueTemplate?: (value: ProgressBarValue) => ReactNode;
|
|
38
|
+
/**
|
|
39
|
+
* Additional CSS class name on the bar root.
|
|
40
|
+
*/
|
|
41
|
+
className?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Inline styles on the bar root (e.g. `height`, `width`).
|
|
44
|
+
*/
|
|
45
|
+
style?: CSSProperties;
|
|
46
|
+
/**
|
|
47
|
+
* Test ID for testing.
|
|
48
|
+
*/
|
|
49
|
+
'data-testid'?: string;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Horizontal progress indicator for determinate work (uploads, imports) and
|
|
53
|
+
* indeterminate waits. For a blocking spinner use `ProgressSpinner` instead.
|
|
54
|
+
*/
|
|
55
|
+
export declare const ProgressBar: {
|
|
56
|
+
({ value, mode, showValue, unit, color, displayValueTemplate, className, style, "data-testid": testId, }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
|
|
57
|
+
displayName: string;
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=ProgressBar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../src/components/progressbar/ProgressBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIrD,0EAA0E;AAC1E,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAA;AAEjE;;;GAGG;AACH,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,eAAe,CAAA;AAE7D,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,SAAS,CAAA;IAC7D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW;8GAUrB,gBAAgB;;CAkBlB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/progressbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,gBAAgB,GACjB,MAAM,eAAe,CAAA"}
|