@pareto-engineering/design-system 4.8.1 → 4.9.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/dist/cjs/a/Notification/styles.scss +0 -1
- package/dist/cjs/f/fields/FileUpload/FileUpload.js +2 -1
- package/dist/cjs/f/fields/FileUpload/common/Preview/Preview.js +4 -5
- package/dist/cjs/g/FormBuilder/FormBuilder.js +4 -3
- package/dist/cjs/g/FormBuilder/styles.scss +3 -1
- package/dist/es/a/Notification/styles.scss +0 -1
- package/dist/es/f/fields/FileUpload/FileUpload.js +2 -1
- package/dist/es/f/fields/FileUpload/common/Preview/Preview.js +4 -5
- package/dist/es/g/FormBuilder/FormBuilder.js +25 -22
- package/dist/es/g/FormBuilder/styles.scss +3 -1
- package/package.json +3 -3
- package/src/ui/a/Notification/styles.scss +0 -1
- package/src/ui/f/fields/FileUpload/FileUpload.jsx +2 -1
- package/src/ui/f/fields/FileUpload/common/Preview/Preview.jsx +4 -5
- package/src/ui/g/FormBuilder/FormBuilder.jsx +46 -42
- package/src/ui/g/FormBuilder/styles.scss +3 -1
|
@@ -135,7 +135,8 @@ const FileUpload = _ref => {
|
|
|
135
135
|
fileIndex: indx,
|
|
136
136
|
identifier: file?.id || file.name
|
|
137
137
|
}),
|
|
138
|
-
uploadStatus: uploadStatus?.[file?.name]
|
|
138
|
+
uploadStatus: uploadStatus?.[file?.name]?.status,
|
|
139
|
+
uploadProgress: uploadStatus?.[file?.name]?.progress
|
|
139
140
|
})))));
|
|
140
141
|
};
|
|
141
142
|
FileUpload.propTypes = {
|
|
@@ -45,11 +45,10 @@ const Preview = _ref => {
|
|
|
45
45
|
} = _ref;
|
|
46
46
|
const isFileObject = file instanceof File;
|
|
47
47
|
const type = isFileObject ? (0, _utils.getFileType)(file) : (0, _utils.getFileTypeFromUrl)(file?.url);
|
|
48
|
-
const
|
|
49
|
-
const
|
|
50
|
-
const isPending = status === 'pending';
|
|
48
|
+
const statusColor = statusColorMap[uploadStatus] ?? color;
|
|
49
|
+
const isPending = uploadStatus === 'pending';
|
|
51
50
|
// isPreview means the file is uploaded and previewed while other files can still be uploaded
|
|
52
|
-
const isSuccess =
|
|
51
|
+
const isSuccess = uploadStatus === 'success' || file?.isPreview;
|
|
53
52
|
const handlePreview = () => {
|
|
54
53
|
if (!isFileObject) {
|
|
55
54
|
window.open(file.url, '_blank');
|
|
@@ -124,6 +123,6 @@ Preview.propTypes = {
|
|
|
124
123
|
};
|
|
125
124
|
Preview.defaultProps = {
|
|
126
125
|
color: 'green',
|
|
127
|
-
uploadProgress:
|
|
126
|
+
uploadProgress: 0
|
|
128
127
|
};
|
|
129
128
|
var _default = exports.default = Preview;
|
|
@@ -43,14 +43,15 @@ const FormBuilder = _ref => {
|
|
|
43
43
|
taskData
|
|
44
44
|
// ...otherProps
|
|
45
45
|
} = _ref;
|
|
46
|
+
const formattedJson = JSON.stringify(taskData, null, 2);
|
|
46
47
|
return /*#__PURE__*/React.createElement("div", {
|
|
47
48
|
id: id,
|
|
48
49
|
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
|
|
49
50
|
style: style
|
|
50
51
|
// {...otherProps}
|
|
51
|
-
}, taskData && /*#__PURE__*/React.createElement("
|
|
52
|
-
className: "task-data md-span-12 span-8"
|
|
53
|
-
},
|
|
52
|
+
}, taskData && /*#__PURE__*/React.createElement("pre", {
|
|
53
|
+
className: "task-data md-span-12 span-8 s-1"
|
|
54
|
+
}, formattedJson), mode === 'build' && /*#__PURE__*/React.createElement(_common.Builder, {
|
|
54
55
|
initialValues: initialBuilderValues,
|
|
55
56
|
formBuilderId: formBuilderId,
|
|
56
57
|
onSave: onBuilderFormSave,
|
|
@@ -14,10 +14,12 @@ $default-margin: var(--gap);
|
|
|
14
14
|
border: $default-border;
|
|
15
15
|
border-radius: $default-border-radius;
|
|
16
16
|
color: var(--on-background-far);
|
|
17
|
+
height: $default-max-height;
|
|
17
18
|
margin-bottom: $default-margin;
|
|
18
|
-
max-height: $default-max-height;
|
|
19
19
|
max-width: 100%;
|
|
20
20
|
overflow: auto;
|
|
21
21
|
padding: $default-padding;
|
|
22
|
+
resize: vertical;
|
|
23
|
+
text-wrap: wrap;
|
|
22
24
|
}
|
|
23
25
|
}
|
|
@@ -124,7 +124,8 @@ const FileUpload = ({
|
|
|
124
124
|
fileIndex: indx,
|
|
125
125
|
identifier: file?.id || file.name
|
|
126
126
|
}),
|
|
127
|
-
uploadStatus: uploadStatus?.[file?.name]
|
|
127
|
+
uploadStatus: uploadStatus?.[file?.name]?.status,
|
|
128
|
+
uploadProgress: uploadStatus?.[file?.name]?.progress
|
|
128
129
|
})))));
|
|
129
130
|
};
|
|
130
131
|
FileUpload.propTypes = {
|
|
@@ -35,11 +35,10 @@ const Preview = ({
|
|
|
35
35
|
}) => {
|
|
36
36
|
const isFileObject = file instanceof File;
|
|
37
37
|
const type = isFileObject ? getFileType(file) : getFileTypeFromUrl(file?.url);
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
const isPending = status === 'pending';
|
|
38
|
+
const statusColor = statusColorMap[uploadStatus] ?? color;
|
|
39
|
+
const isPending = uploadStatus === 'pending';
|
|
41
40
|
// isPreview means the file is uploaded and previewed while other files can still be uploaded
|
|
42
|
-
const isSuccess =
|
|
41
|
+
const isSuccess = uploadStatus === 'success' || file?.isPreview;
|
|
43
42
|
const handlePreview = () => {
|
|
44
43
|
if (!isFileObject) {
|
|
45
44
|
window.open(file.url, '_blank');
|
|
@@ -114,6 +113,6 @@ Preview.propTypes = {
|
|
|
114
113
|
};
|
|
115
114
|
Preview.defaultProps = {
|
|
116
115
|
color: 'green',
|
|
117
|
-
uploadProgress:
|
|
116
|
+
uploadProgress: 0
|
|
118
117
|
};
|
|
119
118
|
export default Preview;
|
|
@@ -32,28 +32,31 @@ const FormBuilder = ({
|
|
|
32
32
|
handleFileDelete,
|
|
33
33
|
taskData
|
|
34
34
|
// ...otherProps
|
|
35
|
-
}) =>
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
},
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
35
|
+
}) => {
|
|
36
|
+
const formattedJson = JSON.stringify(taskData, null, 2);
|
|
37
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
38
|
+
id: id,
|
|
39
|
+
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
|
|
40
|
+
style: style
|
|
41
|
+
// {...otherProps}
|
|
42
|
+
}, taskData && /*#__PURE__*/React.createElement("pre", {
|
|
43
|
+
className: "task-data md-span-12 span-8 s-1"
|
|
44
|
+
}, formattedJson), mode === 'build' && /*#__PURE__*/React.createElement(Builder, {
|
|
45
|
+
initialValues: initialBuilderValues,
|
|
46
|
+
formBuilderId: formBuilderId,
|
|
47
|
+
onSave: onBuilderFormSave,
|
|
48
|
+
onError: onBuilderError,
|
|
49
|
+
validate: onBuilderValidate
|
|
50
|
+
}), mode === 'render' && /*#__PURE__*/React.createElement(Renderer, {
|
|
51
|
+
formData: formData,
|
|
52
|
+
onSave: onRendererFormSave,
|
|
53
|
+
readOnly: readOnly,
|
|
54
|
+
shouldSubmit: shouldSubmit,
|
|
55
|
+
onError: onRendererError,
|
|
56
|
+
fileUploadStatus: fileUploadStatus,
|
|
57
|
+
handleFileDelete: handleFileDelete
|
|
58
|
+
}));
|
|
59
|
+
};
|
|
57
60
|
FormBuilder.propTypes = {
|
|
58
61
|
/**
|
|
59
62
|
* The HTML id for this element
|
|
@@ -14,10 +14,12 @@ $default-margin: var(--gap);
|
|
|
14
14
|
border: $default-border;
|
|
15
15
|
border-radius: $default-border-radius;
|
|
16
16
|
color: var(--on-background-far);
|
|
17
|
+
height: $default-max-height;
|
|
17
18
|
margin-bottom: $default-margin;
|
|
18
|
-
max-height: $default-max-height;
|
|
19
19
|
max-width: 100%;
|
|
20
20
|
overflow: auto;
|
|
21
21
|
padding: $default-padding;
|
|
22
|
+
resize: vertical;
|
|
23
|
+
text-wrap: wrap;
|
|
22
24
|
}
|
|
23
25
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pareto-engineering/design-system",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.9.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/es/index.js",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"@lexical/selection": "0.12.2",
|
|
60
60
|
"@lexical/table": "0.12.2",
|
|
61
61
|
"@lexical/utils": "0.12.2",
|
|
62
|
-
"@pareto-engineering/assets": "^4.
|
|
62
|
+
"@pareto-engineering/assets": "^4.9.0",
|
|
63
63
|
"@pareto-engineering/bem": "^4.8.1",
|
|
64
64
|
"@pareto-engineering/styles": "^4.2.0",
|
|
65
65
|
"@pareto-engineering/utils": "^4.0.0",
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"relay-test-utils": "^15.0.0"
|
|
83
83
|
},
|
|
84
84
|
"browserslist": "> 2%",
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "198830358910af7c44d657ad846d3c7ce0967181"
|
|
86
86
|
}
|
|
@@ -152,7 +152,8 @@ const FileUpload = ({
|
|
|
152
152
|
fileIndex :indx,
|
|
153
153
|
identifier:file?.id || file.name,
|
|
154
154
|
})}
|
|
155
|
-
uploadStatus={uploadStatus?.[file?.name]}
|
|
155
|
+
uploadStatus={uploadStatus?.[file?.name]?.status}
|
|
156
|
+
uploadProgress={uploadStatus?.[file?.name]?.progress}
|
|
156
157
|
/>
|
|
157
158
|
))}
|
|
158
159
|
</div>
|
|
@@ -45,12 +45,11 @@ const Preview = ({
|
|
|
45
45
|
const isFileObject = file instanceof File
|
|
46
46
|
const type = isFileObject ? getFileType(file) : getFileTypeFromUrl(file?.url)
|
|
47
47
|
|
|
48
|
-
const
|
|
49
|
-
const statusColor = statusColorMap[status] ?? color
|
|
48
|
+
const statusColor = statusColorMap[uploadStatus] ?? color
|
|
50
49
|
|
|
51
|
-
const isPending =
|
|
50
|
+
const isPending = uploadStatus === 'pending'
|
|
52
51
|
// isPreview means the file is uploaded and previewed while other files can still be uploaded
|
|
53
|
-
const isSuccess =
|
|
52
|
+
const isSuccess = uploadStatus === 'success' || file?.isPreview
|
|
54
53
|
|
|
55
54
|
const handlePreview = () => {
|
|
56
55
|
if (!isFileObject) {
|
|
@@ -179,7 +178,7 @@ Preview.propTypes = {
|
|
|
179
178
|
|
|
180
179
|
Preview.defaultProps = {
|
|
181
180
|
color :'green',
|
|
182
|
-
uploadProgress:
|
|
181
|
+
uploadProgress:0,
|
|
183
182
|
}
|
|
184
183
|
|
|
185
184
|
export default Preview
|
|
@@ -37,48 +37,52 @@ const FormBuilder = ({
|
|
|
37
37
|
handleFileDelete,
|
|
38
38
|
taskData,
|
|
39
39
|
// ...otherProps
|
|
40
|
-
}) =>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
40
|
+
}) => {
|
|
41
|
+
const formattedJson = JSON.stringify(taskData, null, 2)
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<div
|
|
45
|
+
id={id}
|
|
46
|
+
className={[
|
|
47
|
+
baseClassName,
|
|
48
|
+
componentClassName,
|
|
49
|
+
userClassName,
|
|
50
|
+
]
|
|
51
|
+
.filter((e) => e)
|
|
52
|
+
.join(' ')}
|
|
53
|
+
style={style}
|
|
54
|
+
// {...otherProps}
|
|
55
|
+
>
|
|
56
|
+
{
|
|
57
|
+
taskData && (
|
|
58
|
+
<pre className="task-data md-span-12 span-8 s-1">
|
|
59
|
+
{formattedJson}
|
|
60
|
+
</pre>
|
|
61
|
+
)
|
|
62
|
+
}
|
|
63
|
+
{mode === 'build' && (
|
|
64
|
+
<Builder
|
|
65
|
+
initialValues={initialBuilderValues}
|
|
66
|
+
formBuilderId={formBuilderId}
|
|
67
|
+
onSave={onBuilderFormSave}
|
|
68
|
+
onError={onBuilderError}
|
|
69
|
+
validate={onBuilderValidate}
|
|
70
|
+
/>
|
|
71
|
+
)}
|
|
72
|
+
{mode === 'render' && (
|
|
73
|
+
<Renderer
|
|
74
|
+
formData={formData}
|
|
75
|
+
onSave={onRendererFormSave}
|
|
76
|
+
readOnly={readOnly}
|
|
77
|
+
shouldSubmit={shouldSubmit}
|
|
78
|
+
onError={onRendererError}
|
|
79
|
+
fileUploadStatus={fileUploadStatus}
|
|
80
|
+
handleFileDelete={handleFileDelete}
|
|
81
|
+
/>
|
|
82
|
+
)}
|
|
83
|
+
</div>
|
|
84
|
+
)
|
|
85
|
+
}
|
|
82
86
|
|
|
83
87
|
FormBuilder.propTypes = {
|
|
84
88
|
/**
|
|
@@ -14,10 +14,12 @@ $default-margin: var(--gap);
|
|
|
14
14
|
border: $default-border;
|
|
15
15
|
border-radius: $default-border-radius;
|
|
16
16
|
color: var(--on-background-far);
|
|
17
|
+
height: $default-max-height;
|
|
17
18
|
margin-bottom: $default-margin;
|
|
18
|
-
max-height: $default-max-height;
|
|
19
19
|
max-width: 100%;
|
|
20
20
|
overflow: auto;
|
|
21
21
|
padding: $default-padding;
|
|
22
|
+
resize: vertical;
|
|
23
|
+
text-wrap: wrap;
|
|
22
24
|
}
|
|
23
25
|
}
|