@dartech/arsenal-ui 1.3.60 → 1.3.61
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/index.js +211 -224
- package/package.json +1 -1
- package/src/lib/Property/PropertyWidget/PropertyWidget.d.ts +3 -1
- package/src/lib/Property/{PropertyValueField → UpsertProperty/PropertyValueField}/BooleanValueField.d.ts +0 -1
- package/src/lib/Property/{PropertyValueField → UpsertProperty/PropertyValueField}/DateTimeValueField.d.ts +0 -1
- package/src/lib/Property/{PropertyValueField → UpsertProperty/PropertyValueField}/DateValueField.d.ts +0 -1
- package/src/lib/Property/{PropertyValueField → UpsertProperty/PropertyValueField}/JsonValueField.d.ts +0 -1
- package/src/lib/Property/{PropertyValueField → UpsertProperty/PropertyValueField}/TimeValueField.d.ts +0 -1
- package/src/lib/Property/UpsertProperty/index.d.ts +1 -0
- package/src/lib/Property/ViewProperty/PropertyItem.d.ts +0 -1
- package/src/lib/Property/index.d.ts +0 -1
- /package/src/lib/Property/{PropertyValueField → UpsertProperty/PropertyValueField}/PropertyValueField.d.ts +0 -0
- /package/src/lib/Property/{PropertyValueField → UpsertProperty/PropertyValueField}/StringValueField.d.ts +0 -0
- /package/src/lib/Property/{PropertyValueField → UpsertProperty/PropertyValueField}/index.d.ts +0 -0
package/index.js
CHANGED
@@ -241,18 +241,15 @@ const ControlInput = _a => {
|
|
241
241
|
_d = _c.field,
|
242
242
|
{
|
243
243
|
ref,
|
244
|
-
onChange
|
244
|
+
onChange,
|
245
|
+
value
|
245
246
|
} = _d,
|
246
|
-
fieldProps = __rest(_d, ["ref", "onChange"]),
|
247
|
+
fieldProps = __rest(_d, ["ref", "onChange", "value"]),
|
247
248
|
{
|
248
249
|
fieldState: {
|
249
250
|
error
|
250
251
|
}
|
251
252
|
} = _c;
|
252
|
-
const value = useWatch({
|
253
|
-
control,
|
254
|
-
name
|
255
|
-
});
|
256
253
|
return jsx(TextField, Object.assign({}, fieldProps, {
|
257
254
|
fullWidth: true,
|
258
255
|
size: "small",
|
@@ -431,18 +428,15 @@ const ControlSelect = _a => {
|
|
431
428
|
_d = _c.field,
|
432
429
|
{
|
433
430
|
ref,
|
434
|
-
onChange
|
431
|
+
onChange,
|
432
|
+
value
|
435
433
|
} = _d,
|
436
|
-
fieldProps = __rest(_d, ["ref", "onChange"]),
|
434
|
+
fieldProps = __rest(_d, ["ref", "onChange", "value"]),
|
437
435
|
{
|
438
436
|
fieldState: {
|
439
437
|
error
|
440
438
|
}
|
441
439
|
} = _c;
|
442
|
-
const value = useWatch({
|
443
|
-
control,
|
444
|
-
name
|
445
|
-
});
|
446
440
|
const getValue = useCallback(option => {
|
447
441
|
if (typeof option === 'string') return option;
|
448
442
|
return valueKey ? option[valueKey] : option.value;
|
@@ -538,18 +532,15 @@ const ControlCheckbox = _a => {
|
|
538
532
|
_c = _b.field,
|
539
533
|
{
|
540
534
|
ref,
|
541
|
-
onChange
|
535
|
+
onChange,
|
536
|
+
value
|
542
537
|
} = _c,
|
543
|
-
fieldProps = __rest(_c, ["ref", "onChange"]),
|
538
|
+
fieldProps = __rest(_c, ["ref", "onChange", "value"]),
|
544
539
|
{
|
545
540
|
fieldState: {
|
546
541
|
error
|
547
542
|
}
|
548
543
|
} = _b;
|
549
|
-
const value = useWatch({
|
550
|
-
control,
|
551
|
-
name
|
552
|
-
});
|
553
544
|
const checked = useMemo(() => {
|
554
545
|
if (typeof value === 'boolean') {
|
555
546
|
return value;
|
@@ -617,19 +608,15 @@ const ControlRadio = ({
|
|
617
608
|
}),
|
618
609
|
_b = _a.field,
|
619
610
|
{
|
620
|
-
ref,
|
621
611
|
onChange
|
622
612
|
} = _b,
|
623
|
-
fieldProps = __rest(_b, ["
|
613
|
+
fieldProps = __rest(_b, ["onChange"]),
|
624
614
|
{
|
625
615
|
fieldState: {
|
626
616
|
error
|
627
617
|
}
|
628
618
|
} = _a;
|
629
|
-
const value = useWatch({
|
630
|
-
control,
|
631
|
-
name
|
632
|
-
});
|
619
|
+
// const value = useWatch({ control, name });
|
633
620
|
const getValue = useCallback(option => {
|
634
621
|
if (typeof option === 'string') return option;
|
635
622
|
return valueKey ? option[valueKey] : option.value;
|
@@ -649,9 +636,6 @@ const ControlRadio = ({
|
|
649
636
|
})), jsx(RadioGroup, Object.assign({}, fieldProps, {
|
650
637
|
row: row,
|
651
638
|
"aria-labelledby": "radio-buttons-group",
|
652
|
-
ref: ref,
|
653
|
-
name: name,
|
654
|
-
value: value,
|
655
639
|
onChange: customOnChange ? customOnChange : onChange
|
656
640
|
}, {
|
657
641
|
children: _values.map((item, i) => jsx(FormControlLabel, {
|
@@ -726,28 +710,26 @@ const ControlAutocomplete = _a => {
|
|
726
710
|
disableCloseOnSelect
|
727
711
|
} = _a,
|
728
712
|
autocompleteProps = __rest(_a, ["control", "validate", "name", "label", "required", "defaultValue", "disabled", "hideErrorMessage", "onChange", "labelKey", "valueKey", "options", "multiple", "textFieldProps", "disableCloseOnSelect"]);
|
729
|
-
const {
|
730
|
-
|
713
|
+
const _b = useController({
|
714
|
+
name,
|
715
|
+
control,
|
716
|
+
defaultValue: defaultValue || (multiple ? [] : null),
|
717
|
+
rules: {
|
718
|
+
required: required && 'Please, fill this field',
|
719
|
+
validate
|
720
|
+
}
|
721
|
+
}),
|
722
|
+
_c = _b.field,
|
723
|
+
{
|
731
724
|
ref,
|
732
725
|
onChange
|
733
|
-
},
|
734
|
-
|
735
|
-
|
736
|
-
|
737
|
-
|
738
|
-
|
739
|
-
|
740
|
-
defaultValue,
|
741
|
-
rules: {
|
742
|
-
required: required && 'Please, fill this field',
|
743
|
-
validate
|
744
|
-
}
|
745
|
-
});
|
746
|
-
const formValue = useWatch({
|
747
|
-
control,
|
748
|
-
name,
|
749
|
-
defaultValue: multiple ? [] : null
|
750
|
-
});
|
726
|
+
} = _c,
|
727
|
+
fieldProps = __rest(_c, ["ref", "onChange"]),
|
728
|
+
{
|
729
|
+
fieldState: {
|
730
|
+
error
|
731
|
+
}
|
732
|
+
} = _b;
|
751
733
|
const {
|
752
734
|
getOptionLabel,
|
753
735
|
isOptionEqualToValue,
|
@@ -759,7 +741,7 @@ const ControlAutocomplete = _a => {
|
|
759
741
|
const handleChange = (_, value) => {
|
760
742
|
onChange(value);
|
761
743
|
};
|
762
|
-
return jsx(Autocomplete, Object.assign({
|
744
|
+
return jsx(Autocomplete, Object.assign({}, fieldProps, {
|
763
745
|
fullWidth: true,
|
764
746
|
disablePortal: true,
|
765
747
|
size: "small",
|
@@ -770,7 +752,6 @@ const ControlAutocomplete = _a => {
|
|
770
752
|
isOptionEqualToValue: isOptionEqualToValue,
|
771
753
|
disableCloseOnSelect: disableCloseOnSelect || multiple,
|
772
754
|
filterSelectedOptions: multiple,
|
773
|
-
value: formValue,
|
774
755
|
onChange: customOnChange ? customOnChange : handleChange,
|
775
756
|
renderOption: renderOption,
|
776
757
|
renderInput: params => {
|
@@ -816,28 +797,29 @@ function ControlQueryAutocomplete(_a) {
|
|
816
797
|
itemQueryFunction
|
817
798
|
} = _a,
|
818
799
|
autocompleteProps = __rest(_a, ["name", "label", "control", "required", "searchBy", "labelKey", "multiple", "disabled", "valueKey", "sortBy", "hideErrorMessage", "disableCloseOnSelect", "textFieldProps", "onChange", "queryFunction", "validate", "itemQueryFunction"]);
|
819
|
-
const {
|
820
|
-
|
800
|
+
const _b = useController({
|
801
|
+
control,
|
802
|
+
name,
|
803
|
+
defaultValue: multiple ? [] : null,
|
804
|
+
rules: {
|
805
|
+
required: required && 'Please, fill this field',
|
806
|
+
validate
|
807
|
+
}
|
808
|
+
}),
|
809
|
+
_c = _b.field,
|
810
|
+
{
|
821
811
|
ref,
|
822
|
-
onChange: setFieldValue
|
823
|
-
|
824
|
-
|
825
|
-
|
826
|
-
|
827
|
-
|
828
|
-
|
829
|
-
|
830
|
-
|
831
|
-
|
832
|
-
|
833
|
-
validate
|
834
|
-
}
|
835
|
-
});
|
836
|
-
const formValue = useWatch({
|
837
|
-
control,
|
838
|
-
name,
|
839
|
-
defaultValue: multiple ? [] : null
|
840
|
-
});
|
812
|
+
onChange: setFieldValue,
|
813
|
+
value: formValue
|
814
|
+
} = _c,
|
815
|
+
fieldProps = __rest(_c, ["ref", "onChange", "value"]),
|
816
|
+
{
|
817
|
+
fieldState: {
|
818
|
+
error,
|
819
|
+
isDirty
|
820
|
+
}
|
821
|
+
} = _b;
|
822
|
+
// const formValue = useWatch({ control, name, defaultValue: });
|
841
823
|
const {
|
842
824
|
getOptionLabel,
|
843
825
|
isOptionEqualToValue,
|
@@ -913,7 +895,7 @@ function ControlQueryAutocomplete(_a) {
|
|
913
895
|
setTotalItems(data.totalItems);
|
914
896
|
}
|
915
897
|
}, [data]);
|
916
|
-
return jsx(Autocomplete, Object.assign({
|
898
|
+
return jsx(Autocomplete, Object.assign({}, fieldProps, {
|
917
899
|
fullWidth: true,
|
918
900
|
disablePortal: true,
|
919
901
|
size: "small",
|
@@ -1056,43 +1038,46 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
|
|
1056
1038
|
setError,
|
1057
1039
|
clearErrors
|
1058
1040
|
} = useFormContext();
|
1059
|
-
const {
|
1060
|
-
|
1041
|
+
const _b = useController({
|
1042
|
+
control,
|
1043
|
+
name,
|
1044
|
+
rules: {
|
1045
|
+
required: required && 'Please, fill this field'
|
1046
|
+
}
|
1047
|
+
}),
|
1048
|
+
_c = _b.field,
|
1049
|
+
{
|
1061
1050
|
onChange,
|
1051
|
+
value,
|
1062
1052
|
ref: formRef
|
1063
|
-
},
|
1064
|
-
|
1065
|
-
|
1066
|
-
|
1067
|
-
|
1068
|
-
|
1069
|
-
|
1070
|
-
|
1071
|
-
|
1072
|
-
}
|
1073
|
-
});
|
1074
|
-
const value = useWatch({
|
1075
|
-
control,
|
1076
|
-
name
|
1077
|
-
});
|
1053
|
+
} = _c,
|
1054
|
+
fieldProps = __rest(_c, ["onChange", "value", "ref"]),
|
1055
|
+
{
|
1056
|
+
fieldState: {
|
1057
|
+
error
|
1058
|
+
}
|
1059
|
+
} = _b;
|
1060
|
+
// console.log('validateJson', validateJson, name);
|
1061
|
+
// console.log('parseValue', parseValue, name);
|
1078
1062
|
const extensions = useMemo(() => ({
|
1079
1063
|
json: [langs.json()],
|
1080
1064
|
javascript: [langs.javascript()],
|
1081
1065
|
python: [langs.python()]
|
1082
1066
|
}), []);
|
1083
1067
|
const handleChange = useCallback(value => {
|
1084
|
-
|
1085
|
-
|
1086
|
-
|
1087
|
-
|
1088
|
-
|
1089
|
-
|
1090
|
-
}
|
1068
|
+
// console.log('handleChange', name, value);
|
1069
|
+
// if (!value && required) {
|
1070
|
+
// setError(name, { message: 'Required field' });
|
1071
|
+
// } else {
|
1072
|
+
// clearErrors(name);
|
1073
|
+
// }
|
1091
1074
|
if (validateJson) {
|
1092
1075
|
try {
|
1076
|
+
// console.log('validateJson', JSON.parse(value), name);
|
1093
1077
|
JSON.parse(value);
|
1094
1078
|
clearErrors(name);
|
1095
1079
|
} catch (error) {
|
1080
|
+
console.error(error);
|
1096
1081
|
setError(name, {
|
1097
1082
|
message: 'Invalid JSON'
|
1098
1083
|
});
|
@@ -1108,7 +1093,7 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
|
|
1108
1093
|
} else {
|
1109
1094
|
onChange(value);
|
1110
1095
|
}
|
1111
|
-
}, [setError, clearErrors, onChange,
|
1096
|
+
}, [setError, clearErrors, onChange, name, parseValue, validateJson]);
|
1112
1097
|
return jsxs(Box, Object.assign({
|
1113
1098
|
display: "flex",
|
1114
1099
|
flexDirection: "column",
|
@@ -1132,7 +1117,7 @@ const ControlAceEditor = /*#__PURE__*/forwardRef((_a, ref) => {
|
|
1132
1117
|
}) : label
|
1133
1118
|
}))
|
1134
1119
|
}), jsxs(Fragment, {
|
1135
|
-
children: [jsx(CodeMirror, Object.assign({
|
1120
|
+
children: [jsx(CodeMirror, Object.assign({}, fieldProps, {
|
1136
1121
|
ref: ref || formRef,
|
1137
1122
|
basicSetup: {
|
1138
1123
|
autocompletion: true,
|
@@ -1958,13 +1943,10 @@ const ControlSwitch = _a => {
|
|
1958
1943
|
}).field,
|
1959
1944
|
{
|
1960
1945
|
ref,
|
1961
|
-
onChange
|
1946
|
+
onChange,
|
1947
|
+
value
|
1962
1948
|
} = _b,
|
1963
|
-
fieldProps = __rest(_b, ["ref", "onChange"]);
|
1964
|
-
const value = useWatch({
|
1965
|
-
control,
|
1966
|
-
name
|
1967
|
-
});
|
1949
|
+
fieldProps = __rest(_b, ["ref", "onChange", "value"]);
|
1968
1950
|
const checked = useMemo(() => {
|
1969
1951
|
if (typeof value === 'boolean') {
|
1970
1952
|
return value;
|
@@ -2156,18 +2138,15 @@ const ControlTime = ({
|
|
2156
2138
|
_b = _a.field,
|
2157
2139
|
{
|
2158
2140
|
onChange,
|
2159
|
-
ref
|
2141
|
+
ref,
|
2142
|
+
value
|
2160
2143
|
} = _b,
|
2161
|
-
fieldProps = __rest(_b, ["onChange", "ref"]),
|
2144
|
+
fieldProps = __rest(_b, ["onChange", "ref", "value"]),
|
2162
2145
|
{
|
2163
2146
|
fieldState: {
|
2164
2147
|
error
|
2165
2148
|
}
|
2166
2149
|
} = _a;
|
2167
|
-
const value = useWatch({
|
2168
|
-
control,
|
2169
|
-
name
|
2170
|
-
});
|
2171
2150
|
const [fieldValue, setFieldValue] = useState(null);
|
2172
2151
|
const handleChange = date => {
|
2173
2152
|
setFieldValue(date);
|
@@ -3596,53 +3575,6 @@ const PropertyAdditionalFields = ({
|
|
3596
3575
|
}
|
3597
3576
|
};
|
3598
3577
|
|
3599
|
-
const JsonEditor = /*#__PURE__*/forwardRef(({
|
3600
|
-
validate: _validate = false,
|
3601
|
-
name,
|
3602
|
-
useParsedValue
|
3603
|
-
}, ref) => {
|
3604
|
-
const {
|
3605
|
-
control,
|
3606
|
-
setValue,
|
3607
|
-
setError,
|
3608
|
-
clearErrors
|
3609
|
-
} = useFormContext();
|
3610
|
-
const value = useWatch({
|
3611
|
-
control,
|
3612
|
-
name
|
3613
|
-
});
|
3614
|
-
const handleChange = value => {
|
3615
|
-
try {
|
3616
|
-
if (value) setValue(name, useParsedValue ? JSON.parse(value) : value);
|
3617
|
-
clearErrors(name);
|
3618
|
-
} catch (e) {
|
3619
|
-
if (_validate) setError(name, {
|
3620
|
-
message: 'Invalid JSON'
|
3621
|
-
});
|
3622
|
-
}
|
3623
|
-
};
|
3624
|
-
return jsx(CodeMirror, {
|
3625
|
-
ref: ref,
|
3626
|
-
basicSetup: {
|
3627
|
-
autocompletion: true,
|
3628
|
-
history: true
|
3629
|
-
},
|
3630
|
-
theme: abcdef,
|
3631
|
-
width: "100%",
|
3632
|
-
height: "200px",
|
3633
|
-
style: {
|
3634
|
-
fontSize: 14,
|
3635
|
-
lineHeight: 1.4,
|
3636
|
-
zIndex: 0,
|
3637
|
-
isolation: 'isolate'
|
3638
|
-
},
|
3639
|
-
value: typeof value !== 'string' ? value === null ? '' : JSON.stringify(value) : value,
|
3640
|
-
onChange: handleChange,
|
3641
|
-
extensions: [langs.json()]
|
3642
|
-
});
|
3643
|
-
});
|
3644
|
-
var JsonEditor$1 = JsonEditor;
|
3645
|
-
|
3646
3578
|
const StringValueField = ({
|
3647
3579
|
name,
|
3648
3580
|
label,
|
@@ -3704,21 +3636,20 @@ const StringValueField = ({
|
|
3704
3636
|
};
|
3705
3637
|
var StringValueField$1 = StringValueField;
|
3706
3638
|
|
3707
|
-
const PropertyWidget =
|
3639
|
+
const PropertyWidget = ({
|
3708
3640
|
property,
|
3709
3641
|
name,
|
3710
3642
|
label,
|
3711
|
-
useExpression
|
3712
|
-
|
3713
|
-
|
3714
|
-
control
|
3715
|
-
} = useFormContext();
|
3643
|
+
useExpression,
|
3644
|
+
control
|
3645
|
+
}) => {
|
3716
3646
|
const propertyType = useMemo(() => typeof property.propertyType === 'string' ? property.propertyType : property['propertyType']['value'], [property]);
|
3717
3647
|
switch (propertyType) {
|
3718
3648
|
case PropertyType.BIG_DECIMAL:
|
3719
3649
|
case PropertyType.FLOAT:
|
3720
3650
|
case PropertyType.DOUBLE:
|
3721
3651
|
return jsx(ControlNumberInput, {
|
3652
|
+
required: true,
|
3722
3653
|
decimal: true,
|
3723
3654
|
hideErrorMessage: true,
|
3724
3655
|
control: control,
|
@@ -3729,10 +3660,8 @@ const PropertyWidget = /*#__PURE__*/forwardRef(({
|
|
3729
3660
|
case PropertyType.INTEGER:
|
3730
3661
|
case PropertyType.BIG_INTEGER:
|
3731
3662
|
case PropertyType.LONG:
|
3732
|
-
return jsx(ControlNumberInput
|
3733
|
-
|
3734
|
-
, {
|
3735
|
-
// required
|
3663
|
+
return jsx(ControlNumberInput, {
|
3664
|
+
required: true,
|
3736
3665
|
hideErrorMessage: true,
|
3737
3666
|
control: control,
|
3738
3667
|
name: name,
|
@@ -3778,12 +3707,15 @@ const PropertyWidget = /*#__PURE__*/forwardRef(({
|
|
3778
3707
|
format: property.format
|
3779
3708
|
});
|
3780
3709
|
case PropertyType.JSON:
|
3781
|
-
return jsx(
|
3782
|
-
|
3710
|
+
return jsx(ControlAceEditor, {
|
3711
|
+
control: control,
|
3783
3712
|
name: name,
|
3784
|
-
|
3785
|
-
|
3713
|
+
label: label,
|
3714
|
+
parseValue: true,
|
3715
|
+
hideErrorMessage: true,
|
3716
|
+
validateJson: true
|
3786
3717
|
});
|
3718
|
+
// return <JsonEditor validate name={name} ref={ref} useParsedValue />;
|
3787
3719
|
case PropertyType.STRING:
|
3788
3720
|
return jsx(StringValueField$1
|
3789
3721
|
// required={!property.isRequired}
|
@@ -3802,9 +3734,11 @@ const PropertyWidget = /*#__PURE__*/forwardRef(({
|
|
3802
3734
|
control: control
|
3803
3735
|
});
|
3804
3736
|
case PropertyType.ANY:
|
3805
|
-
return jsx(
|
3737
|
+
return jsx(ControlAceEditor, {
|
3738
|
+
control: control,
|
3806
3739
|
name: name,
|
3807
|
-
|
3740
|
+
hideErrorMessage: true,
|
3741
|
+
label: label
|
3808
3742
|
});
|
3809
3743
|
case PropertyType.ENTITY:
|
3810
3744
|
return jsx(DefinitionFiller, {
|
@@ -3817,7 +3751,7 @@ const PropertyWidget = /*#__PURE__*/forwardRef(({
|
|
3817
3751
|
children: "No widget"
|
3818
3752
|
});
|
3819
3753
|
}
|
3820
|
-
}
|
3754
|
+
};
|
3821
3755
|
|
3822
3756
|
const usePropertyFiller = ({
|
3823
3757
|
value,
|
@@ -3845,31 +3779,29 @@ const usePropertyFiller = ({
|
|
3845
3779
|
useExpression: _useExpression
|
3846
3780
|
}), [_useExpression, _required, propertyType, _multipleOptions]);
|
3847
3781
|
const defaultProperyValue = useMemo(() => {
|
3848
|
-
|
3849
|
-
|
3850
|
-
|
3851
|
-
|
3852
|
-
|
3853
|
-
|
3854
|
-
|
3855
|
-
|
3856
|
-
|
3857
|
-
|
3858
|
-
|
3859
|
-
|
3860
|
-
|
3861
|
-
|
3862
|
-
|
3863
|
-
|
3864
|
-
|
3865
|
-
|
3866
|
-
|
3867
|
-
|
3868
|
-
|
3869
|
-
|
3870
|
-
|
3871
|
-
} else return null;
|
3872
|
-
}, [propertyType, property]);
|
3782
|
+
switch (propertyType) {
|
3783
|
+
case PropertyType.STRING:
|
3784
|
+
case PropertyType.DATE:
|
3785
|
+
case PropertyType.TIME:
|
3786
|
+
case PropertyType.DATE_TIME:
|
3787
|
+
case PropertyType.ENTITY_REFERENCE:
|
3788
|
+
case PropertyType.ANY:
|
3789
|
+
return '';
|
3790
|
+
case PropertyType.JSON:
|
3791
|
+
return {};
|
3792
|
+
case PropertyType.BOOLEAN:
|
3793
|
+
return true;
|
3794
|
+
case PropertyType.INTEGER:
|
3795
|
+
case PropertyType.BIG_DECIMAL:
|
3796
|
+
case PropertyType.BIG_INTEGER:
|
3797
|
+
case PropertyType.DOUBLE:
|
3798
|
+
case PropertyType.LONG:
|
3799
|
+
case PropertyType.FLOAT:
|
3800
|
+
return 0;
|
3801
|
+
default:
|
3802
|
+
return {};
|
3803
|
+
}
|
3804
|
+
}, [propertyType]);
|
3873
3805
|
useEffect(() => {
|
3874
3806
|
if (!fillOption) {
|
3875
3807
|
if (isPropertyValueEmpty(value) && (fillOptions === null || fillOptions === void 0 ? void 0 : fillOptions.length)) {
|
@@ -3923,8 +3855,6 @@ const PropertyFiller = ({
|
|
3923
3855
|
} = useFormContext();
|
3924
3856
|
const {
|
3925
3857
|
field: {
|
3926
|
-
ref,
|
3927
|
-
onChange,
|
3928
3858
|
value
|
3929
3859
|
},
|
3930
3860
|
fieldState: {
|
@@ -3966,7 +3896,7 @@ const PropertyFiller = ({
|
|
3966
3896
|
properties: propertiesArrayToObject(value.property || [])
|
3967
3897
|
});
|
3968
3898
|
try {
|
3969
|
-
|
3899
|
+
setValue(name, JSON.stringify(definitionValue, null, '\t'));
|
3970
3900
|
} catch (error) {
|
3971
3901
|
console.log('Stringify failed', error);
|
3972
3902
|
}
|
@@ -3974,7 +3904,7 @@ const PropertyFiller = ({
|
|
3974
3904
|
setValue(name, property.defaultValue || defaultProperyValue);
|
3975
3905
|
}
|
3976
3906
|
} else if (selectedType === 'expression' || selectedType === 'string') {
|
3977
|
-
|
3907
|
+
setValue(name, '');
|
3978
3908
|
} else if (selectedType === 'dem_builder') {
|
3979
3909
|
const defaultArrayValue = {
|
3980
3910
|
code: '',
|
@@ -3986,22 +3916,27 @@ const PropertyFiller = ({
|
|
3986
3916
|
try {
|
3987
3917
|
const definitionValue = JSON.parse(value);
|
3988
3918
|
definitionValue['properties'] = propertiesObjectToArray(definitionValue['properties'] || {});
|
3989
|
-
|
3919
|
+
setValue(name, definitionValue);
|
3990
3920
|
} catch (error) {
|
3991
|
-
|
3921
|
+
setValue(name, defaultArrayValue);
|
3992
3922
|
// console.log('Parse failed');
|
3993
3923
|
}
|
3994
3924
|
} else {
|
3995
|
-
|
3925
|
+
setValue(name, defaultArrayValue);
|
3996
3926
|
}
|
3997
3927
|
}
|
3998
3928
|
clearErrors();
|
3999
|
-
}, [name, defaultProperyValue, clearErrors, value, setFillOption,
|
3929
|
+
}, [name, defaultProperyValue, clearErrors, value, setFillOption, fillOption, propertyType, setValue, property]);
|
3930
|
+
useEffect(() => {
|
3931
|
+
if (!isDirty && property.defaultValue) {
|
3932
|
+
setValue(name, property.defaultValue);
|
3933
|
+
}
|
3934
|
+
}, [isDirty, property, name, setValue]);
|
4000
3935
|
useEffect(() => {
|
4001
|
-
if (value === undefined) {
|
4002
|
-
|
3936
|
+
if (value === undefined || property.isRequired && value === null) {
|
3937
|
+
setValue(name, defaultProperyValue);
|
4003
3938
|
}
|
4004
|
-
}, [value,
|
3939
|
+
}, [value, setValue, defaultProperyValue, property, name, isDirty]);
|
4005
3940
|
return jsxs(Grid$1, Object.assign({
|
4006
3941
|
xs: 12
|
4007
3942
|
}, {
|
@@ -4038,10 +3973,15 @@ const PropertyFiller = ({
|
|
4038
3973
|
}), option.value))
|
4039
3974
|
}))]
|
4040
3975
|
}))
|
4041
|
-
})) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ?
|
3976
|
+
})) : null, fillOption === 'expression' && (propertyType === PropertyType.JSON || propertyType === PropertyType.ENTITY || propertyType === PropertyType.ANY ?
|
3977
|
+
// <JsonEditor validate name={name} useParsedValue />
|
3978
|
+
jsx(ControlAceEditor, {
|
4042
3979
|
name: name,
|
4043
|
-
|
4044
|
-
|
3980
|
+
control: control,
|
3981
|
+
label: valueLabel,
|
3982
|
+
parseValue: true,
|
3983
|
+
validateJson: true,
|
3984
|
+
hideErrorMessage: true
|
4045
3985
|
}) : jsx(ControlInput, {
|
4046
3986
|
control: control,
|
4047
3987
|
name: name,
|
@@ -4054,15 +3994,19 @@ const PropertyFiller = ({
|
|
4054
3994
|
label: valueLabel,
|
4055
3995
|
required: true,
|
4056
3996
|
hideErrorMessage: true
|
4057
|
-
}), fillOption === 'json_notvalid' &&
|
3997
|
+
}), fillOption === 'json_notvalid' &&
|
3998
|
+
// <JsonEditor validate name={name} />
|
3999
|
+
jsx(ControlAceEditor, {
|
4058
4000
|
name: name,
|
4059
|
-
|
4001
|
+
control: control,
|
4002
|
+
label: valueLabel,
|
4003
|
+
hideErrorMessage: true
|
4060
4004
|
}), fillOption === 'widget' && jsx(PropertyWidget, {
|
4005
|
+
control: control,
|
4061
4006
|
property: property,
|
4062
4007
|
name: name,
|
4063
4008
|
useExpression: useExpression,
|
4064
4009
|
label: valueLabel,
|
4065
|
-
ref: ref,
|
4066
4010
|
required: required
|
4067
4011
|
}), fillOption === 'dem_builder' && jsx(CreateDefinition, {
|
4068
4012
|
title: "JSON",
|
@@ -4075,6 +4019,53 @@ const PropertyFiller = ({
|
|
4075
4019
|
}));
|
4076
4020
|
};
|
4077
4021
|
|
4022
|
+
const JsonEditor = /*#__PURE__*/forwardRef(({
|
4023
|
+
validate: _validate = false,
|
4024
|
+
name,
|
4025
|
+
useParsedValue
|
4026
|
+
}, ref) => {
|
4027
|
+
const {
|
4028
|
+
control,
|
4029
|
+
setValue,
|
4030
|
+
setError,
|
4031
|
+
clearErrors
|
4032
|
+
} = useFormContext();
|
4033
|
+
const value = useWatch({
|
4034
|
+
control,
|
4035
|
+
name
|
4036
|
+
});
|
4037
|
+
const handleChange = value => {
|
4038
|
+
try {
|
4039
|
+
if (value) setValue(name, useParsedValue ? JSON.parse(value) : value);
|
4040
|
+
clearErrors(name);
|
4041
|
+
} catch (e) {
|
4042
|
+
if (_validate) setError(name, {
|
4043
|
+
message: 'Invalid JSON'
|
4044
|
+
});
|
4045
|
+
}
|
4046
|
+
};
|
4047
|
+
return jsx(CodeMirror, {
|
4048
|
+
ref: ref,
|
4049
|
+
basicSetup: {
|
4050
|
+
autocompletion: true,
|
4051
|
+
history: true
|
4052
|
+
},
|
4053
|
+
theme: abcdef,
|
4054
|
+
width: "100%",
|
4055
|
+
height: "200px",
|
4056
|
+
style: {
|
4057
|
+
fontSize: 14,
|
4058
|
+
lineHeight: 1.4,
|
4059
|
+
zIndex: 0,
|
4060
|
+
isolation: 'isolate'
|
4061
|
+
},
|
4062
|
+
value: typeof value !== 'string' ? value === null ? '' : JSON.stringify(value) : value,
|
4063
|
+
onChange: handleChange,
|
4064
|
+
extensions: [langs.json()]
|
4065
|
+
});
|
4066
|
+
});
|
4067
|
+
var JsonEditor$1 = JsonEditor;
|
4068
|
+
|
4078
4069
|
const MultiplePropertyWidget = ({
|
4079
4070
|
name,
|
4080
4071
|
property,
|
@@ -4174,7 +4165,8 @@ const MultiplePropertyFiller = ({
|
|
4174
4165
|
const {
|
4175
4166
|
field: {
|
4176
4167
|
ref,
|
4177
|
-
onChange
|
4168
|
+
onChange,
|
4169
|
+
value
|
4178
4170
|
},
|
4179
4171
|
fieldState: {
|
4180
4172
|
error,
|
@@ -4191,10 +4183,6 @@ const MultiplePropertyFiller = ({
|
|
4191
4183
|
}
|
4192
4184
|
}
|
4193
4185
|
});
|
4194
|
-
const value = useWatch({
|
4195
|
-
control,
|
4196
|
-
name
|
4197
|
-
});
|
4198
4186
|
const {
|
4199
4187
|
propertyType,
|
4200
4188
|
valueLabel,
|
@@ -4218,14 +4206,13 @@ const MultiplePropertyFiller = ({
|
|
4218
4206
|
} else if (selectedType === 'expression' || selectedType === 'json_valid' || selectedType === 'json_notvalid') {
|
4219
4207
|
onChange('');
|
4220
4208
|
} else if (selectedType === 'widget') {
|
4221
|
-
console.log('WiDGET??');
|
4222
4209
|
onChange([]);
|
4223
4210
|
}
|
4224
4211
|
setFillOption(selectedType);
|
4225
4212
|
clearErrors(name);
|
4226
4213
|
};
|
4227
4214
|
useEffect(() => {
|
4228
|
-
if (value
|
4215
|
+
if (!value) {
|
4229
4216
|
onChange(property.isRequired ? [] : null);
|
4230
4217
|
}
|
4231
4218
|
}, [value, property, onChange]);
|
@@ -4328,7 +4315,7 @@ const PropertyValueField = ({
|
|
4328
4315
|
const typeValue = typeof propertyType === 'string' ? propertyType : propertyType.value;
|
4329
4316
|
return {
|
4330
4317
|
name: _label,
|
4331
|
-
isRequired,
|
4318
|
+
isRequired: required !== null && required !== void 0 ? required : isRequired,
|
4332
4319
|
isMultiple,
|
4333
4320
|
format,
|
4334
4321
|
restrictedValues,
|
@@ -4341,7 +4328,7 @@ const PropertyValueField = ({
|
|
4341
4328
|
uiSettings: null,
|
4342
4329
|
validationNode: null
|
4343
4330
|
};
|
4344
|
-
}, [propertyType, format, restrictedValues, isMultiple, _label, isRequired, properties]);
|
4331
|
+
}, [propertyType, format, restrictedValues, isMultiple, _label, isRequired, properties, required]);
|
4345
4332
|
return isMultiple ? jsx(MultiplePropertyFiller, {
|
4346
4333
|
name: name,
|
4347
4334
|
property: fillerProperty,
|
package/package.json
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
/// <reference types="react" />
|
2
|
+
import { Control } from 'react-hook-form';
|
2
3
|
import { PropertyUnion } from '../../../interfaces';
|
3
4
|
type Props = {
|
4
5
|
property: PropertyUnion;
|
@@ -6,6 +7,7 @@ type Props = {
|
|
6
7
|
label?: string;
|
7
8
|
useExpression?: boolean;
|
8
9
|
required?: boolean;
|
10
|
+
control: Control<any>;
|
9
11
|
};
|
10
|
-
export declare const PropertyWidget:
|
12
|
+
export declare const PropertyWidget: ({ property, name, label, useExpression, control }: Props) => JSX.Element;
|
11
13
|
export default PropertyWidget;
|
File without changes
|
File without changes
|
/package/src/lib/Property/{PropertyValueField → UpsertProperty/PropertyValueField}/index.d.ts
RENAMED
File without changes
|