awing-library 2.1.2-dev.542 → 2.1.2-dev.544

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.
Files changed (7) hide show
  1. package/dist/AWING/DataForm/container.d.ts.map +1 -1
  2. package/dist/AWING/DataForm/container.js +49 -34
  3. package/dist/AWING/DataInput/components/NumberInput.d.ts.map +1 -1
  4. package/dist/AWING/DataInput/components/NumberInput.js +15 -5
  5. package/dist/AWING/DataInput/components/TextInput.d.ts.map +1 -1
  6. package/dist/AWING/DataInput/components/TextInput.js +31 -3
  7. package/package.json +1 -1
package/dist/AWING/DataForm/container.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/AWING/DataForm/container.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,2CA6QzE"}
1
+ {"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../src/AWING/DataForm/container.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,2CA4RzE"}
package/dist/AWING/DataForm/container.js CHANGED
@@ -6,6 +6,9 @@ import { calculateFormValid, handleFields, updateFieldsWithFormulas } from "./ut
6
6
  function DataForm(props) {
7
7
  const { caption, actions, fields, onUpdate, onValues, padding = 'normal', onValidateForm, onFormValid, autoValidateFieldText = false, oldValue: propsOldValue, fieldPermissions } = props;
8
8
  const [oldValue, setOldValue] = useState(propsOldValue);
9
+ const oldValueRef = useRef(propsOldValue);
10
+ const lastPropsOldValueStr = useRef(JSON.stringify(propsOldValue));
11
+ const isSyncingFromParent = useRef(false);
9
12
  const [keyUpdate, setKey] = useState('');
10
13
  const isFirstRender = useRef(true);
11
14
  const [dataFormState, setDataFormState] = useState(()=>{
@@ -26,44 +29,51 @@ function DataForm(props) {
26
29
  });
27
30
  useEffect(()=>{
28
31
  if (propsOldValue) {
29
- const isFirstLoad = !oldValue || 0 === Object.keys(oldValue).length;
32
+ const currentPropsStr = JSON.stringify(propsOldValue);
33
+ const isFirstLoad = !oldValueRef.current || 0 === Object.keys(oldValueRef.current).length;
30
34
  const newId = propsOldValue?.id;
31
- const currentId = oldValue?.id;
35
+ const currentId = oldValueRef.current?.id;
32
36
  const isNewId = newId !== currentId;
33
- const isNewVersion = propsOldValue?.versionId !== oldValue?.versionId;
34
- const isContentDifferent = JSON.stringify(propsOldValue) !== JSON.stringify(oldValue);
35
- setOldValue(propsOldValue);
36
- if (isFirstLoad || isNewId || isNewVersion || isContentDifferent) setDataFormState((pre)=>{
37
- const newFieldsToUpdate = {
38
- ...pre.fieldsToUpdate
39
- };
40
- if (isFirstLoad || isNewId) {
41
- const resetFields = {};
42
- const newValidation = {};
43
- fields.forEach((field)=>{
44
- const fieldName = field.fieldName;
45
- resetFields[fieldName] = propsOldValue[fieldName];
46
- newValidation[fieldName] = true;
37
+ const isNewVersion = propsOldValue?.versionId !== oldValueRef.current?.versionId;
38
+ const isContentDifferent = currentPropsStr !== lastPropsOldValueStr.current;
39
+ if (isFirstLoad || isNewId || isNewVersion || isContentDifferent) {
40
+ lastPropsOldValueStr.current = currentPropsStr;
41
+ oldValueRef.current = propsOldValue;
42
+ setOldValue(propsOldValue);
43
+ isSyncingFromParent.current = true;
44
+ setDataFormState((pre)=>{
45
+ if (isFirstLoad || isNewId) {
46
+ const resetFields = {};
47
+ const newValidation = {};
48
+ fields.forEach((field)=>{
49
+ const fieldName = field.fieldName;
50
+ resetFields[fieldName] = propsOldValue[fieldName];
51
+ newValidation[fieldName] = true;
52
+ });
53
+ return {
54
+ fieldsToUpdate: resetFields,
55
+ validation: newValidation
56
+ };
57
+ }
58
+ const newFieldsToUpdate = {
59
+ ...pre.fieldsToUpdate
60
+ };
61
+ Object.keys(propsOldValue).forEach((key)=>{
62
+ const fieldKey = key;
63
+ newFieldsToUpdate[fieldKey] = propsOldValue[fieldKey];
47
64
  });
48
65
  return {
49
- fieldsToUpdate: resetFields,
50
- validation: newValidation
66
+ ...pre,
67
+ fieldsToUpdate: newFieldsToUpdate
51
68
  };
52
- }
53
- Object.keys(propsOldValue).forEach((key)=>{
54
- const fieldKey = key;
55
- newFieldsToUpdate[fieldKey] = propsOldValue[fieldKey];
56
69
  });
57
- return {
58
- ...pre,
59
- fieldsToUpdate: newFieldsToUpdate
60
- };
61
- });
70
+ }
62
71
  }
63
72
  }, [
64
73
  JSON.stringify(propsOldValue)
65
74
  ]);
66
75
  const handleChange = (fieldName, newValue, valid)=>{
76
+ isSyncingFromParent.current = false;
67
77
  setDataFormState((pre)=>{
68
78
  let newFieldsToUpdate = {
69
79
  ...pre.fieldsToUpdate
@@ -95,7 +105,7 @@ function DataForm(props) {
95
105
  }
96
106
  const convertFields = fields.map((field)=>({
97
107
  fieldName: String(field.fieldName),
98
- value: String(newFieldsToUpdate[field.fieldName] ?? oldValue?.[field.fieldName] ?? '')
108
+ value: String(newFieldsToUpdate[field.fieldName] ?? oldValueRef.current?.[field.fieldName] ?? '')
99
109
  }));
100
110
  const convertFormulas = fields.filter((field)=>field.autoFormula).map((field)=>({
101
111
  fieldName: String(field.fieldName ?? ''),
@@ -115,21 +125,26 @@ function DataForm(props) {
115
125
  setKey(String(fieldName));
116
126
  };
117
127
  useEffect(()=>{
118
- if (isFirstRender.current) {
119
- isFirstRender.current = false;
128
+ if (isSyncingFromParent.current) {
129
+ isSyncingFromParent.current = false;
120
130
  return;
121
131
  }
132
+ const currentOldValue = oldValueRef.current;
122
133
  const completeValues = {
123
- ...oldValue,
134
+ ...currentOldValue,
124
135
  ...dataFormState.fieldsToUpdate
125
136
  };
126
- const formValid = calculateFormValid(dataFormState, fields, oldValue, onValidateForm, onFormValid);
137
+ const formValid = calculateFormValid(dataFormState, fields, currentOldValue, onValidateForm, onFormValid);
138
+ if (isFirstRender.current) {
139
+ isFirstRender.current = false;
140
+ if (onValues) onValues(completeValues, formValid, keyUpdate);
141
+ return;
142
+ }
127
143
  if (onUpdate) onUpdate(dataFormState.fieldsToUpdate, formValid, keyUpdate);
128
144
  if (onValues) onValues(completeValues, formValid, keyUpdate);
129
145
  }, [
130
146
  dataFormState,
131
- keyUpdate,
132
- oldValue
147
+ keyUpdate
133
148
  ]);
134
149
  const renderField = (fieldDef)=>{
135
150
  const { fieldName } = fieldDef;
package/dist/AWING/DataInput/components/NumberInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../src/AWING/DataInput/components/NumberInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,WAAW,qBAAsB,SAAQ,mBAAmB,CAAC,MAAM,CAAC;IACtE,IAAI,EAAE,UAAU,CAAC,MAAM,GAAG,QAAQ,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7E;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,UAOpE;AAED,eAAO,MAAM,WAAW,oBAAqB,qBAAqB,4CAmEjE,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../src/AWING/DataInput/components/NumberInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,WAAW,qBAAsB,SAAQ,mBAAmB,CAAC,MAAM,CAAC;IACtE,IAAI,EAAE,UAAU,CAAC,MAAM,GAAG,QAAQ,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7E;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,UAOpE;AAED,eAAO,MAAM,WAAW,oBAAqB,qBAAqB,4CAmFjE,CAAC;AAEF,eAAe,WAAW,CAAC"}
package/dist/AWING/DataInput/components/NumberInput.js CHANGED
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
3
3
  import i18n from "../../../translate/i18n.js";
4
4
  import NumberFormat from "../../NumberFormat/index.js";
5
5
  import { numberNotNullValid } from "../../ultis/index.js";
6
- import { useEffect, useState } from "react";
6
+ import { useEffect, useRef, useState } from "react";
7
7
  function clampNumber(value, min, max) {
8
8
  let result = value;
9
9
  if (void 0 !== min) result = Math.max(result, min);
@@ -16,8 +16,9 @@ const NumberInput = (fieldDefinition)=>{
16
16
  });
17
17
  const { name, defaultValue, value, onChange, error, disableHelperText, helperText, min, max, onValidateCustom, ...other } = fieldDefinition;
18
18
  const [valueInput, setValueInput] = useState(defaultValue || value || '');
19
+ const isComposing = useRef(false);
19
20
  useEffect(()=>{
20
- if (valueInput !== value) setValueInput(value ?? '');
21
+ if (!isComposing.current && valueInput !== value) setValueInput(value ?? '');
21
22
  }, [
22
23
  value
23
24
  ]);
@@ -25,16 +26,18 @@ const NumberInput = (fieldDefinition)=>{
25
26
  if (onValidateCustom) return onValidateCustom(Number(val));
26
27
  return (void 0 === min || Number(val) >= min) && (void 0 === max || Number(val) <= max) && numberNotNullValid(Number(val));
27
28
  };
28
- const handleChange = (event)=>{
29
- const newValue = event.target.value;
29
+ const processChange = (newValue)=>{
30
30
  if ('-' === newValue || '' === newValue) return void ('-' === newValue && void 0 !== min && min >= 0 ? setValueInput(0) : setValueInput(newValue));
31
31
  const numberValue = Number(newValue);
32
32
  if (!isNaN(numberValue)) {
33
33
  const currentValue = clampNumber(numberValue, min, max);
34
34
  setValueInput(currentValue);
35
- onChange && onChange(currentValue, onValidate(currentValue), numberValue);
35
+ if (!isComposing.current) onChange && onChange(currentValue, onValidate(currentValue), numberValue);
36
36
  }
37
37
  };
38
+ const handleChange = (event)=>{
39
+ processChange(event.target.value);
40
+ };
38
41
  return /*#__PURE__*/ jsx(NumberFormat, {
39
42
  id: name?.toString(),
40
43
  name: name?.toString(),
@@ -42,6 +45,13 @@ const NumberInput = (fieldDefinition)=>{
42
45
  variant: "standard",
43
46
  value: valueInput,
44
47
  onChange: handleChange,
48
+ onCompositionStart: ()=>{
49
+ isComposing.current = true;
50
+ },
51
+ onCompositionEnd: (event)=>{
52
+ isComposing.current = false;
53
+ processChange(event.target.value);
54
+ },
45
55
  error: error,
46
56
  helperText: !disableHelperText && error ? helperText ?? t('Common.InvalidData') : '',
47
57
  ...other
package/dist/AWING/DataInput/components/TextInput.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/AWING/DataInput/components/TextInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB,CAAC,MAAM,CAAC;IAEpE,IAAI,EACE,UAAU,CAAC,IAAI,GACf,UAAU,CAAC,KAAK,GAChB,UAAU,CAAC,GAAG,GACd,UAAU,CAAC,SAAS,GACpB,UAAU,CAAC,GAAG,GACd,UAAU,CAAC,QAAQ,GACnB,MAAM,GACN,OAAO,GACP,KAAK,GACL,WAAW,GACX,KAAK,GACL,UAAU,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAChF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,SAAS,oBAAqB,mBAAmB,4CAyD7D,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/AWING/DataInput/components/TextInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB,CAAC,MAAM,CAAC;IAEpE,IAAI,EACE,UAAU,CAAC,IAAI,GACf,UAAU,CAAC,KAAK,GAChB,UAAU,CAAC,GAAG,GACd,UAAU,CAAC,SAAS,GACpB,UAAU,CAAC,GAAG,GACd,UAAU,CAAC,QAAQ,GACnB,MAAM,GACN,OAAO,GACP,KAAK,GACL,WAAW,GACX,KAAK,GACL,UAAU,CAAC;IACjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACzB;;;;;OAKG;IACH,UAAU,CAAC,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;IAChF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,SAAS,oBAAqB,mBAAmB,4CA6F7D,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/dist/AWING/DataInput/components/TextInput.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
- import { useState } from "react";
2
+ import { useEffect, useRef, useState } from "react";
3
3
  import { useTranslation } from "react-i18next";
4
4
  import { TextField } from "@mui/material";
5
5
  import i18n from "../../../translate/i18n.js";
@@ -11,6 +11,14 @@ const TextInput_TextInput = (fieldDefinition)=>{
11
11
  });
12
12
  const { name, value, onChange, error, disableHelperText, helperText, type, length, pattern, onValidateCustom, fieldName, ...other } = fieldDefinition;
13
13
  const [errorText, setErrorText] = useState(t('Common.InvalidData'));
14
+ const [localValue, setLocalValue] = useState(value ?? '');
15
+ const isComposing = useRef(false);
16
+ const isFocused = useRef(false);
17
+ useEffect(()=>{
18
+ if (!isComposing.current && !isFocused.current && value !== localValue) setLocalValue(value ?? '');
19
+ }, [
20
+ value
21
+ ]);
14
22
  const onValidate = (val)=>{
15
23
  if (onValidateCustom) return onValidateCustom(val ?? '');
16
24
  if (type === FIELD_TYPE.EMAIL) return emailValid(val ?? '');
@@ -24,6 +32,10 @@ const TextInput_TextInput = (fieldDefinition)=>{
24
32
  return valid;
25
33
  }
26
34
  };
35
+ const handleTextChange = (newValue)=>{
36
+ setLocalValue(newValue);
37
+ if (!isComposing.current) onChange && onChange(newValue, onValidate(newValue));
38
+ };
27
39
  return /*#__PURE__*/ jsx(TextField, {
28
40
  id: name?.toString(),
29
41
  name: name?.toString(),
@@ -33,8 +45,24 @@ const TextInput_TextInput = (fieldDefinition)=>{
33
45
  multiline: type === FIELD_TYPE.TEXT_AREA,
34
46
  error: error,
35
47
  helperText: !disableHelperText && (error ? helperText ?? errorText : helperText),
36
- value: value ?? '',
37
- onChange: (event)=>onChange && onChange(event.target.value, onValidate(event.target.value)),
48
+ value: localValue,
49
+ onChange: (event)=>handleTextChange(event.target.value),
50
+ onFocus: ()=>{
51
+ isFocused.current = true;
52
+ },
53
+ onBlur: (event)=>{
54
+ isFocused.current = false;
55
+ const finalValue = event.target.value;
56
+ onChange && onChange(finalValue, onValidate(finalValue));
57
+ },
58
+ onCompositionStart: ()=>{
59
+ isComposing.current = true;
60
+ },
61
+ onCompositionEnd: (event)=>{
62
+ isComposing.current = false;
63
+ const finalValue = event.target.value;
64
+ handleTextChange(finalValue);
65
+ },
38
66
  disabled: fieldDefinition.readOnly,
39
67
  ...other
40
68
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "awing-library",
3
- "version": "2.1.2-dev.542",
3
+ "version": "2.1.2-dev.544",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": {