@luscii-healthtech/web-ui 2.15.0 → 2.15.2
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/components/Form/form.types.d.ts +3 -2
- package/dist/components/ImagePicker/ImagePicker.d.ts +3 -3
- package/dist/web-ui.cjs.development.js +23 -17
- package/dist/web-ui.cjs.development.js.map +1 -1
- package/dist/web-ui.cjs.production.min.js +1 -1
- package/dist/web-ui.cjs.production.min.js.map +1 -1
- package/dist/web-ui.esm.js +23 -17
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +2 -2
|
@@ -41,9 +41,10 @@ export interface FormFieldSelectProps<TFieldValues> extends FormFieldGenericProp
|
|
|
41
41
|
type: "select";
|
|
42
42
|
fieldProps: SelectProps;
|
|
43
43
|
}
|
|
44
|
-
|
|
44
|
+
declare type ImagePickerFieldProps = Omit<ImagePickerProps, "name" | "handleChange"> & Partial<Pick<ImagePickerProps, "handleChange">>;
|
|
45
|
+
export interface FormFieldImagePickerProps<TFieldValues> extends FormFieldGenericProps<ImagePickerFieldProps, TFieldValues> {
|
|
45
46
|
type: "imagePicker";
|
|
46
|
-
fieldProps:
|
|
47
|
+
fieldProps: ImagePickerFieldProps;
|
|
47
48
|
}
|
|
48
49
|
export interface FormFieldDecoratorWithGeneratedProps extends FormFieldDecoratorProps {
|
|
49
50
|
name: string;
|
|
@@ -14,12 +14,12 @@ export interface ImagePickerProps {
|
|
|
14
14
|
categories: CategoryProps[];
|
|
15
15
|
preselectedImage?: string;
|
|
16
16
|
clearImageIndex?: number;
|
|
17
|
-
type
|
|
18
|
-
isDisabled
|
|
17
|
+
type?: "normal" | "compact";
|
|
18
|
+
isDisabled?: boolean;
|
|
19
19
|
handleChange: (target: TargetProps) => void;
|
|
20
20
|
isUploadButtonVisible?: boolean;
|
|
21
21
|
isClearButtonVisible?: boolean;
|
|
22
|
-
localisation: Record<"openModalButton" | "selectButton" | "error" | "uploadImage" | "clearSelection" | "cancel" | "search" | "modalTitle", string
|
|
22
|
+
localisation: Partial<Record<"openModalButton" | "selectButton" | "error" | "uploadImage" | "clearSelection" | "cancel" | "search" | "modalTitle", string>>;
|
|
23
23
|
}
|
|
24
24
|
export declare const ImagePickerInner: React.VFC<ImagePickerProps & {
|
|
25
25
|
innerRef?: React.Ref<HTMLButtonElement>;
|
|
@@ -2388,7 +2388,7 @@ var Checkbox = function Checkbox(_ref) {
|
|
|
2388
2388
|
}))));
|
|
2389
2389
|
};
|
|
2390
2390
|
|
|
2391
|
-
var css_248z$9 = ".cweb-box-shadow-default {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cweb-box-shadow-default {\n box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.24), 0 0 2px 1px rgba(0, 0, 0, 0.12);\n }\n}\n\n.cweb-modal-overlay {\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 60px 8px;\n background-color: rgba(0, 0, 0, 0.25);\n z-index: 20;\n}\n\n.cweb-modal-overlay.no-title-bar {\n background-color: rgba(0, 0, 0, 0.75);\n}\n\n.cweb-modal-overlay > .cweb-modal {\n box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.14);\n position: relative;\n margin: 0 auto;\n background: white;\n outline: none;\n border-radius: 8px;\n}\n\n.cweb-modal-overlay > .cweb-modal.type-default {\n max-width: 580px;\n}\n\n.cweb-modal-overlay > .cweb-modal.type-dialog {\n max-width: 342px;\n}\n\n.cweb-modal-overlay > .cweb-modal.type-extra-small {\n max-width: 444px;\n}\n\n.cweb-modal-overlay > .cweb-modal.type-wide {\n max-width: 748px;\n}\n\n.cweb-modal-overlay > .cweb-modal.type-wider {\n max-width: 868px;\n}\n\n.cweb-modal-overlay > .cweb-modal.has-padded-body .cweb-modal-content {\n padding: 1.5rem;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-no-title-section {\n height: 0;\n width: 100%;\n position: relative;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-no-title-section > .cweb-modal-close-button {\n position: absolute;\n top: 16px;\n right: 24px;\n width: 44px;\n height: 44px;\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22%3E %3Cg fill%3D%22none%22 fill-rule%3D%22evenodd%22%3E %3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23E5F5FC%22%2F%3E %3Cg fill%3D%22%23009FE3%22%3E %3Crect width%3D%2216%22 height%3D%222%22 rx%3D%221%22 transform%3D%22rotate(45 -9.157 25.52)%22%2F%3E %3Crect width%3D%2216%22 height%3D%222%22 rx%3D%221%22 transform%3D%22rotate(135 10.157 13.207)%22%2F%3E %3C%2Fg%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-no-title-section > .cweb-modal-close-button:hover, .cweb-modal-overlay > .cweb-modal .cweb-modal-no-title-section > .cweb-modal-close-button:active, .cweb-modal-overlay > .cweb-modal .cweb-modal-no-title-section > .cweb-modal-close-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22%3E %3Cg fill%3D%22none%22 fill-rule%3D%22evenodd%22%3E %3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23B2E2F6%22%2F%3E %3Cg fill%3D%22%23009FE3%22%3E %3Crect width%3D%2216%22 height%3D%222%22 rx%3D%221%22 transform%3D%22rotate(45 -9.157 25.52)%22%2F%3E %3Crect width%3D%2216%22 height%3D%222%22 rx%3D%221%22 transform%3D%22rotate(135 10.157 13.207)%22%2F%3E %3C%2Fg%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-title-section {\n display: flex;\n flex-direction: row;\n align-items: center;\n border-bottom: 1px solid #f3f3f3;\n padding: 24px;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-title-section > .cweb-modal-title {\n width: 100%;\n justify-content: flex-start;\n color: #374151;\n font-weight: normal;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-title-section > .cweb-modal-close-button {\n transition: opacity 0.3s ease-in-out;\n outline: none;\n width: 2rem;\n height: 2rem;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M14.4194 5.66942C14.7681 6.0181 14.7681 6.58343 14.4194 6.93211L11.2627 10.0888L14.4194 13.2456C14.7681 13.5942 14.7681 14.1596 14.4194 14.5083C14.0707 14.8569 13.5054 14.8569 13.1567 14.5083L10 11.3515L6.84327 14.5083C6.49459 14.8569 5.92927 14.8569 5.58058 14.5083C5.2319 14.1596 5.2319 13.5942 5.58058 13.2456L8.73731 10.0888L5.58058 6.93211C5.2319 6.58343 5.2319 6.0181 5.58058 5.66942C5.92927 5.32073 6.49459 5.32073 6.84327 5.66942L10 8.82614L13.1567 5.66942C13.5054 5.32073 14.0707 5.32073 14.4194 5.66942Z%22 fill%3D%22%23D1D5DB%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n opacity: 0.75;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-title-section > .cweb-modal-close-button:hover, .cweb-modal-overlay > .cweb-modal .cweb-modal-title-section > .cweb-modal-close-button:active, .cweb-modal-overlay > .cweb-modal .cweb-modal-title-section > .cweb-modal-close-button:focus {\n opacity: 1;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-title-section > .cweb-modal-content {\n margin: 24px;\n overflow-y: auto;\n}\n";
|
|
2391
|
+
var css_248z$9 = ".cweb-box-shadow-default {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cweb-box-shadow-default {\n box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.24), 0 0 2px 1px rgba(0, 0, 0, 0.12);\n }\n}\n\n.cweb-modal-overlay {\n position: fixed;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n overflow-x: hidden;\n overflow-y: auto;\n padding: 60px 8px;\n background-color: rgba(0, 0, 0, 0.25);\n z-index: 20;\n}\n\n.cweb-modal-overlay.no-title-bar {\n background-color: rgba(0, 0, 0, 0.75);\n}\n\n.cweb-modal-overlay > .cweb-modal {\n box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.14);\n position: relative;\n margin: 0 auto;\n background: white;\n outline: none;\n border-radius: 8px;\n}\n\n.cweb-modal-overlay > .cweb-modal.type-default {\n max-width: 580px;\n}\n\n.cweb-modal-overlay > .cweb-modal.type-dialog {\n max-width: 342px;\n margin-top: 68px;\n}\n\n.cweb-modal-overlay > .cweb-modal.type-extra-small {\n max-width: 444px;\n}\n\n.cweb-modal-overlay > .cweb-modal.type-wide {\n max-width: 748px;\n}\n\n.cweb-modal-overlay > .cweb-modal.type-wider {\n max-width: 868px;\n}\n\n.cweb-modal-overlay > .cweb-modal.has-padded-body .cweb-modal-content {\n padding: 1.5rem;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-no-title-section {\n height: 0;\n width: 100%;\n position: relative;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-no-title-section > .cweb-modal-close-button {\n position: absolute;\n top: 16px;\n right: 24px;\n width: 44px;\n height: 44px;\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22%3E %3Cg fill%3D%22none%22 fill-rule%3D%22evenodd%22%3E %3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23E5F5FC%22%2F%3E %3Cg fill%3D%22%23009FE3%22%3E %3Crect width%3D%2216%22 height%3D%222%22 rx%3D%221%22 transform%3D%22rotate(45 -9.157 25.52)%22%2F%3E %3Crect width%3D%2216%22 height%3D%222%22 rx%3D%221%22 transform%3D%22rotate(135 10.157 13.207)%22%2F%3E %3C%2Fg%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-no-title-section > .cweb-modal-close-button:hover, .cweb-modal-overlay > .cweb-modal .cweb-modal-no-title-section > .cweb-modal-close-button:active, .cweb-modal-overlay > .cweb-modal .cweb-modal-no-title-section > .cweb-modal-close-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2240%22 height%3D%2240%22 viewBox%3D%220 0 40 40%22%3E %3Cg fill%3D%22none%22 fill-rule%3D%22evenodd%22%3E %3Ccircle cx%3D%2220%22 cy%3D%2220%22 r%3D%2220%22 fill%3D%22%23B2E2F6%22%2F%3E %3Cg fill%3D%22%23009FE3%22%3E %3Crect width%3D%2216%22 height%3D%222%22 rx%3D%221%22 transform%3D%22rotate(45 -9.157 25.52)%22%2F%3E %3Crect width%3D%2216%22 height%3D%222%22 rx%3D%221%22 transform%3D%22rotate(135 10.157 13.207)%22%2F%3E %3C%2Fg%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-title-section {\n display: flex;\n flex-direction: row;\n align-items: center;\n border-bottom: 1px solid #f3f3f3;\n padding: 24px;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-title-section > .cweb-modal-title {\n width: 100%;\n justify-content: flex-start;\n color: #374151;\n font-weight: normal;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-title-section > .cweb-modal-close-button {\n transition: opacity 0.3s ease-in-out;\n outline: none;\n width: 2rem;\n height: 2rem;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2220%22 height%3D%2220%22 viewBox%3D%220 0 20 20%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M14.4194 5.66942C14.7681 6.0181 14.7681 6.58343 14.4194 6.93211L11.2627 10.0888L14.4194 13.2456C14.7681 13.5942 14.7681 14.1596 14.4194 14.5083C14.0707 14.8569 13.5054 14.8569 13.1567 14.5083L10 11.3515L6.84327 14.5083C6.49459 14.8569 5.92927 14.8569 5.58058 14.5083C5.2319 14.1596 5.2319 13.5942 5.58058 13.2456L8.73731 10.0888L5.58058 6.93211C5.2319 6.58343 5.2319 6.0181 5.58058 5.66942C5.92927 5.32073 6.49459 5.32073 6.84327 5.66942L10 8.82614L13.1567 5.66942C13.5054 5.32073 14.0707 5.32073 14.4194 5.66942Z%22 fill%3D%22%23D1D5DB%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n opacity: 0.75;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-title-section > .cweb-modal-close-button:hover, .cweb-modal-overlay > .cweb-modal .cweb-modal-title-section > .cweb-modal-close-button:active, .cweb-modal-overlay > .cweb-modal .cweb-modal-title-section > .cweb-modal-close-button:focus {\n opacity: 1;\n}\n\n.cweb-modal-overlay > .cweb-modal .cweb-modal-title-section > .cweb-modal-content {\n margin: 24px;\n overflow-y: auto;\n}\n";
|
|
2392
2392
|
styleInject(css_248z$9);
|
|
2393
2393
|
|
|
2394
2394
|
var MODAL_SIZES = {
|
|
@@ -6297,10 +6297,12 @@ var ImagePickerInner = function ImagePickerInner(_ref) {
|
|
|
6297
6297
|
clearImageIndex = _ref.clearImageIndex,
|
|
6298
6298
|
handleChange = _ref.handleChange,
|
|
6299
6299
|
images = _ref.images,
|
|
6300
|
-
isDisabled = _ref.isDisabled,
|
|
6300
|
+
_ref$isDisabled = _ref.isDisabled,
|
|
6301
|
+
isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
|
|
6301
6302
|
name = _ref.name,
|
|
6302
6303
|
preselectedImage = _ref.preselectedImage,
|
|
6303
|
-
type = _ref.type,
|
|
6304
|
+
_ref$type = _ref.type,
|
|
6305
|
+
type = _ref$type === void 0 ? "normal" : _ref$type,
|
|
6304
6306
|
_ref$isUploadButtonVi = _ref.isUploadButtonVisible,
|
|
6305
6307
|
isUploadButtonVisible = _ref$isUploadButtonVi === void 0 ? false : _ref$isUploadButtonVi,
|
|
6306
6308
|
_ref$isClearButtonVis = _ref.isClearButtonVisible,
|
|
@@ -6339,7 +6341,7 @@ var ImagePickerInner = function ImagePickerInner(_ref) {
|
|
|
6339
6341
|
if (preselectedImage) {
|
|
6340
6342
|
setSelectedImage(preselectedImage);
|
|
6341
6343
|
}
|
|
6342
|
-
}, []);
|
|
6344
|
+
}, [preselectedImage]);
|
|
6343
6345
|
|
|
6344
6346
|
var handleSearchChange = function handleSearchChange(event) {
|
|
6345
6347
|
var _event$target$value;
|
|
@@ -6395,7 +6397,8 @@ var ImagePickerInner = function ImagePickerInner(_ref) {
|
|
|
6395
6397
|
|
|
6396
6398
|
var uploadImage = /*#__PURE__*/function () {
|
|
6397
6399
|
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
|
|
6398
|
-
var file, base64String;
|
|
6400
|
+
var file, base64String, _localisation$error;
|
|
6401
|
+
|
|
6399
6402
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
6400
6403
|
while (1) {
|
|
6401
6404
|
switch (_context.prev = _context.next) {
|
|
@@ -6431,7 +6434,7 @@ var ImagePickerInner = function ImagePickerInner(_ref) {
|
|
|
6431
6434
|
break;
|
|
6432
6435
|
|
|
6433
6436
|
case 10:
|
|
6434
|
-
setError(localisation.error);
|
|
6437
|
+
setError((_localisation$error = localisation.error) != null ? _localisation$error : null);
|
|
6435
6438
|
|
|
6436
6439
|
case 11:
|
|
6437
6440
|
case "end":
|
|
@@ -6571,12 +6574,12 @@ var FormImagePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, inn
|
|
|
6571
6574
|
control: control,
|
|
6572
6575
|
rules: rules,
|
|
6573
6576
|
render: function render(_ref2) {
|
|
6574
|
-
var
|
|
6575
|
-
|
|
6576
|
-
|
|
6577
|
+
var _field$value;
|
|
6578
|
+
|
|
6579
|
+
var field = _ref2.field;
|
|
6577
6580
|
React.useEffect(function () {
|
|
6578
|
-
if (fieldProps.preselectedImage && !value) {
|
|
6579
|
-
onChange({
|
|
6581
|
+
if (fieldProps.preselectedImage && !field.value) {
|
|
6582
|
+
field.onChange({
|
|
6580
6583
|
target: {
|
|
6581
6584
|
name: name,
|
|
6582
6585
|
value: fieldProps.preselectedImage
|
|
@@ -6584,14 +6587,12 @@ var FormImagePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, inn
|
|
|
6584
6587
|
});
|
|
6585
6588
|
}
|
|
6586
6589
|
}, []);
|
|
6587
|
-
return /*#__PURE__*/React__default.createElement(ImagePicker, _extends({
|
|
6588
|
-
name: name
|
|
6589
|
-
}, fieldProps, {
|
|
6590
|
+
return /*#__PURE__*/React__default.createElement(ImagePicker, _extends({}, fieldProps, field, {
|
|
6590
6591
|
handleChange: function handleChange(e) {
|
|
6591
|
-
onChange(e);
|
|
6592
|
-
fieldProps.handleChange(e);
|
|
6592
|
+
field.onChange(e);
|
|
6593
|
+
fieldProps == null ? void 0 : fieldProps.handleChange == null ? void 0 : fieldProps.handleChange(e);
|
|
6593
6594
|
},
|
|
6594
|
-
preselectedImage: value != null ? value : fieldProps.preselectedImage,
|
|
6595
|
+
preselectedImage: (_field$value = field.value) != null ? _field$value : fieldProps.preselectedImage,
|
|
6595
6596
|
ref: innerRef
|
|
6596
6597
|
}));
|
|
6597
6598
|
}
|
|
@@ -6616,6 +6617,11 @@ function GenericForm(_ref) {
|
|
|
6616
6617
|
criteriaMode: "all",
|
|
6617
6618
|
defaultValues: defaultValues
|
|
6618
6619
|
});
|
|
6620
|
+
React.useEffect(function () {
|
|
6621
|
+
if (defaultValues) {
|
|
6622
|
+
useFormReturn.reset(defaultValues);
|
|
6623
|
+
}
|
|
6624
|
+
}, [defaultValues]);
|
|
6619
6625
|
var handleSubmit = useFormReturn.handleSubmit;
|
|
6620
6626
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
6621
6627
|
className: "space-y-4"
|