@openmrs/esm-form-engine-lib 2.1.0-pre.1386 → 2.1.0-pre.1390

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/inputs/date/date.component.tsx +51 -53
  3. package/src/components/inputs/number/number.component.tsx +26 -24
  4. package/src/components/inputs/text/text.component.tsx +19 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@openmrs/esm-form-engine-lib",
3
- "version": "2.1.0-pre.1386",
3
+ "version": "2.1.0-pre.1390",
4
4
  "description": "React Form Engine for O3",
5
5
  "browser": "dist/openmrs-esm-form-engine-lib.js",
6
6
  "main": "src/index.ts",
package/src/components/inputs/date/date.component.tsx CHANGED
@@ -80,60 +80,58 @@ const DateField: React.FC<FormFieldInputProps> = ({ field, value: dateValue, err
80
80
  />
81
81
  ) : (
82
82
  !field.isHidden && (
83
- <>
84
- <div className={styles.datetime}>
85
- {(field.datePickerFormat === 'calendar' || field.datePickerFormat === 'both') && (
86
- <div className={styles.datePickerSpacing}>
87
- <Layer>
88
- <OpenmrsDatePicker
89
- id={field.id}
90
- onChange={onDateChange}
91
- labelText={
92
- <span className={styles.datePickerLabel}>
93
- <FieldLabel field={field} />
94
- </span>
95
- }
96
- isDisabled={field.isDisabled}
97
- isReadOnly={isTrue(field.readonly)}
98
- isRequired={field.isRequired ?? false}
99
- isInvalid={errors.length > 0}
100
- invalidText={errors[0]?.message}
101
- value={dateValue}
102
- />
103
- </Layer>
104
- {warnings.length > 0 ? <div className={styles.datePickerWarn}>{warnings[0]?.message}</div> : null}
105
- </div>
106
- )}
83
+ <div className={styles.datetime}>
84
+ {(field.datePickerFormat === 'calendar' || field.datePickerFormat === 'both') && (
85
+ <div className={styles.datePickerSpacing}>
86
+ <Layer>
87
+ <OpenmrsDatePicker
88
+ id={field.id}
89
+ onChange={onDateChange}
90
+ labelText={
91
+ <span className={styles.datePickerLabel}>
92
+ <FieldLabel field={field} />
93
+ </span>
94
+ }
95
+ isDisabled={field.isDisabled}
96
+ isReadOnly={isTrue(field.readonly)}
97
+ isRequired={field.isRequired ?? false}
98
+ isInvalid={errors.length > 0}
99
+ invalidText={errors[0]?.message}
100
+ value={dateValue}
101
+ />
102
+ </Layer>
103
+ {warnings.length > 0 ? <div className={styles.datePickerWarn}>{warnings[0]?.message}</div> : null}
104
+ </div>
105
+ )}
107
106
 
108
- {field.datePickerFormat === 'both' || field.datePickerFormat === 'timer' ? (
109
- <div>
110
- <Layer>
111
- <TimePicker
112
- className={classNames(styles.boldedLabel, styles.timeInput)}
113
- id={field.id}
114
- labelText={timePickerLabel}
115
- placeholder="HH:MM"
116
- pattern="(1[012]|[1-9]):[0-5][0-9])$"
117
- type="time"
118
- disabled={field.datePickerFormat === 'timer' ? field.isDisabled : !dateValue ? true : false}
119
- invalid={errors.length > 0}
120
- invalidText={errors[0]?.message}
121
- warning={warnings.length > 0}
122
- warningText={warnings[0]?.message}
123
- value={
124
- time
125
- ? time
126
- : dateValue instanceof Date
127
- ? dateValue.toLocaleDateString(window.navigator.language)
128
- : dateValue
129
- }
130
- onChange={onTimeChange}
131
- />
132
- </Layer>
133
- </div>
134
- ) : null}
135
- </div>
136
- </>
107
+ {field.datePickerFormat === 'both' || field.datePickerFormat === 'timer' ? (
108
+ <div>
109
+ <Layer>
110
+ <TimePicker
111
+ className={classNames(styles.boldedLabel, styles.timeInput)}
112
+ id={field.id}
113
+ labelText={timePickerLabel}
114
+ placeholder="HH:MM"
115
+ pattern="(1[012]|[1-9]):[0-5][0-9])$"
116
+ type="time"
117
+ disabled={field.datePickerFormat === 'timer' ? field.isDisabled : !dateValue ? true : false}
118
+ invalid={errors.length > 0}
119
+ invalidText={errors[0]?.message}
120
+ warning={warnings.length > 0}
121
+ warningText={warnings[0]?.message}
122
+ value={
123
+ time
124
+ ? time
125
+ : dateValue instanceof Date
126
+ ? dateValue.toLocaleDateString(window.navigator.language)
127
+ : dateValue
128
+ }
129
+ onChange={onTimeChange}
130
+ />
131
+ </Layer>
132
+ </div>
133
+ ) : null}
134
+ </div>
137
135
  )
138
136
  );
139
137
  };
package/src/components/inputs/number/number.component.tsx CHANGED
@@ -44,30 +44,32 @@ const NumberField: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
44
44
  />
45
45
  </div>
46
46
  ) : (
47
- <Layer>
48
- <NumberInput
49
- id={field.id}
50
- invalid={errors.length > 0}
51
- invalidText={errors[0]?.message}
52
- label={<FieldLabel field={field} />}
53
- max={Number(field.questionOptions.max) || undefined}
54
- min={Number(field.questionOptions.min) || undefined}
55
- name={field.id}
56
- value={field.value ?? ''}
57
- onChange={handleChange}
58
- onBlur={onBlur}
59
- allowEmpty={true}
60
- size="lg"
61
- hideSteppers={true}
62
- onWheel={(e) => e.target.blur()}
63
- disabled={field.isDisabled}
64
- readOnly={field.readonly}
65
- className={classNames(styles.controlWidthConstrained, styles.boldedLabel)}
66
- warn={warnings.length > 0}
67
- warnText={warnings[0]?.message}
68
- step={0.01}
69
- />
70
- </Layer>
47
+ !field.isHidden && (
48
+ <Layer>
49
+ <NumberInput
50
+ id={field.id}
51
+ invalid={errors.length > 0}
52
+ invalidText={errors[0]?.message}
53
+ label={<FieldLabel field={field} />}
54
+ max={Number(field.questionOptions.max) || undefined}
55
+ min={Number(field.questionOptions.min) || undefined}
56
+ name={field.id}
57
+ value={field.value ?? ''}
58
+ onChange={handleChange}
59
+ onBlur={onBlur}
60
+ allowEmpty={true}
61
+ size="lg"
62
+ hideSteppers={true}
63
+ onWheel={(e) => e.target.blur()}
64
+ disabled={field.isDisabled}
65
+ readOnly={field.readonly}
66
+ className={classNames(styles.controlWidthConstrained, styles.boldedLabel)}
67
+ warn={warnings.length > 0}
68
+ warnText={warnings[0]?.message}
69
+ step={0.01}
70
+ />
71
+ </Layer>
72
+ )
71
73
  );
72
74
  };
73
75
 
package/src/components/inputs/text/text.component.tsx CHANGED
@@ -37,27 +37,25 @@ const TextField: React.FC<FormFieldInputProps> = ({ field, value, errors, warnin
37
37
  />
38
38
  ) : (
39
39
  !field.isHidden && (
40
- <>
41
- <div className={styles.boldedLabel}>
42
- <Layer>
43
- <TextInput
44
- id={field.id}
45
- labelText={<FieldLabel field={field} />}
46
- onChange={setFieldValue}
47
- onBlur={onBlur}
48
- name={field.id}
49
- value={value}
50
- disabled={field.isDisabled}
51
- readOnly={isTrue(field.readonly)}
52
- invalid={errors.length > 0}
53
- invalidText={errors[0]?.message}
54
- warn={warnings.length > 0}
55
- warnText={warnings.length && warnings[0].message}
56
- maxLength={field.questionOptions.max || TextInput.maxLength}
57
- />
58
- </Layer>
59
- </div>
60
- </>
40
+ <div className={styles.boldedLabel}>
41
+ <Layer>
42
+ <TextInput
43
+ id={field.id}
44
+ labelText={<FieldLabel field={field} />}
45
+ onChange={setFieldValue}
46
+ onBlur={onBlur}
47
+ name={field.id}
48
+ value={value}
49
+ disabled={field.isDisabled}
50
+ readOnly={isTrue(field.readonly)}
51
+ invalid={errors.length > 0}
52
+ invalidText={errors[0]?.message}
53
+ warn={warnings.length > 0}
54
+ warnText={warnings.length > 0 ? warnings[0].message : undefined}
55
+ maxLength={field.questionOptions.max || TextInput.maxLength}
56
+ />
57
+ </Layer>
58
+ </div>
61
59
  )
62
60
  );
63
61
  };