@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 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, ["ref", "onChange"]),
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
- field: {
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
- fieldState: {
735
- error
736
- }
737
- } = useController({
738
- name,
739
- control,
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
- field: {
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
- fieldState: {
825
- error,
826
- isDirty
827
- }
828
- } = useController({
829
- control,
830
- name,
831
- rules: {
832
- required: required && 'Please, fill this field',
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
- field: {
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
- fieldState: {
1065
- error
1066
- }
1067
- } = useController({
1068
- control,
1069
- name,
1070
- rules: {
1071
- required: required && 'Please, fill this field'
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
- if (!value && required) {
1085
- setError(name, {
1086
- message: 'Required field'
1087
- });
1088
- } else {
1089
- clearErrors(name);
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, required, name, parseValue, validateJson]);
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 = /*#__PURE__*/forwardRef(({
3639
+ const PropertyWidget = ({
3708
3640
  property,
3709
3641
  name,
3710
3642
  label,
3711
- useExpression
3712
- }, ref) => {
3713
- const {
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
- // required
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(JsonEditor$1, {
3782
- validate: true,
3710
+ return jsx(ControlAceEditor, {
3711
+ control: control,
3783
3712
  name: name,
3784
- ref: ref,
3785
- useParsedValue: true
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(JsonEditor$1, {
3737
+ return jsx(ControlAceEditor, {
3738
+ control: control,
3806
3739
  name: name,
3807
- ref: ref
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
- if (property.isRequired || property.isMultiple) {
3849
- switch (propertyType) {
3850
- case PropertyType.STRING:
3851
- case PropertyType.DATE:
3852
- case PropertyType.TIME:
3853
- case PropertyType.DATE_TIME:
3854
- case PropertyType.ENTITY_REFERENCE:
3855
- case PropertyType.ANY:
3856
- return '';
3857
- case PropertyType.JSON:
3858
- return {};
3859
- case PropertyType.BOOLEAN:
3860
- return true;
3861
- case PropertyType.INTEGER:
3862
- case PropertyType.BIG_DECIMAL:
3863
- case PropertyType.BIG_INTEGER:
3864
- case PropertyType.DOUBLE:
3865
- case PropertyType.LONG:
3866
- case PropertyType.FLOAT:
3867
- return 0;
3868
- default:
3869
- return {};
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
- onChange(JSON.stringify(definitionValue, null, '\t'));
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
- onChange('');
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
- onChange(definitionValue);
3919
+ setValue(name, definitionValue);
3990
3920
  } catch (error) {
3991
- onChange(defaultArrayValue);
3921
+ setValue(name, defaultArrayValue);
3992
3922
  // console.log('Parse failed');
3993
3923
  }
3994
3924
  } else {
3995
- onChange(defaultArrayValue);
3925
+ setValue(name, defaultArrayValue);
3996
3926
  }
3997
3927
  }
3998
3928
  clearErrors();
3999
- }, [name, defaultProperyValue, clearErrors, value, setFillOption, onChange, fillOption, propertyType, setValue, property]);
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
- onChange(property.defaultValue || defaultProperyValue);
3936
+ if (value === undefined || property.isRequired && value === null) {
3937
+ setValue(name, defaultProperyValue);
4003
3938
  }
4004
- }, [value, onChange, defaultProperyValue, property]);
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 ? jsx(JsonEditor$1, {
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
- ref: ref,
4044
- useParsedValue: true
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' && jsx(JsonEditor$1, {
3997
+ }), fillOption === 'json_notvalid' &&
3998
+ // <JsonEditor validate name={name} />
3999
+ jsx(ControlAceEditor, {
4058
4000
  name: name,
4059
- ref: ref
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 === undefined) {
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,6 +1,6 @@
1
1
  {
2
2
  "name": "@dartech/arsenal-ui",
3
- "version": "1.3.60",
3
+ "version": "1.3.61",
4
4
  "author": "DAR",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -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: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<any>>;
12
+ export declare const PropertyWidget: ({ property, name, label, useExpression, control }: Props) => JSX.Element;
11
13
  export default PropertyWidget;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type Props = {
3
2
  name: string;
4
3
  label?: string;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type Props = {
3
2
  name: string;
4
3
  label?: string;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type Props = {
3
2
  name: string;
4
3
  format: string;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type Props = {
3
2
  name: string;
4
3
  label?: string;
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  type Props = {
3
2
  name: string;
4
3
  label?: string;
@@ -1,2 +1,3 @@
1
1
  export * from './CreatePropertiesList';
2
2
  export * from './CreatePropertyFormFields';
3
+ export * from './PropertyValueField';
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { PropertyUnion } from '../../../interfaces';
3
2
  type PropertyItemProps = {
4
3
  property: PropertyUnion;
@@ -1,5 +1,4 @@
1
1
  export * from './UpsertProperty';
2
- export * from './PropertyValueField';
3
2
  export * from './ViewProperty';
4
3
  export * from './ViewPropertiesList';
5
4
  export * from './PropertyFiller';