@movalib/movalib-commons 1.1.41 → 1.1.43

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/devIndex.tsx CHANGED
@@ -157,22 +157,22 @@ const App = () => {
157
157
  streetName: {
158
158
  value: undefined,
159
159
  error: undefined,
160
- isValid: undefined
160
+ isValid: true
161
161
  },
162
162
  additional: {
163
163
  value: undefined,
164
164
  error: undefined,
165
- isValid: undefined
165
+ isValid: true
166
166
  },
167
167
  postalCode: {
168
168
  value: undefined,
169
169
  error: undefined,
170
- isValid: undefined
170
+ isValid: true
171
171
  },
172
172
  cityName: {
173
173
  value: undefined,
174
174
  error: undefined,
175
- isValid: undefined
175
+ isValid: true
176
176
  }
177
177
  }} size={'small'} handleChange={function (fieldName: AddressFieldName, newValue: any, save?: boolean | undefined): void {
178
178
  throw new Error('Function not implemented.');
package/dist/devIndex.js CHANGED
@@ -133,22 +133,22 @@ var App = function () {
133
133
  streetName: {
134
134
  value: undefined,
135
135
  error: undefined,
136
- isValid: undefined
136
+ isValid: true
137
137
  },
138
138
  additional: {
139
139
  value: undefined,
140
140
  error: undefined,
141
- isValid: undefined
141
+ isValid: true
142
142
  },
143
143
  postalCode: {
144
144
  value: undefined,
145
145
  error: undefined,
146
- isValid: undefined
146
+ isValid: true
147
147
  },
148
148
  cityName: {
149
149
  value: undefined,
150
150
  error: undefined,
151
- isValid: undefined
151
+ isValid: true
152
152
  }
153
153
  }, size: 'small', handleChange: function (fieldName, newValue, save) {
154
154
  throw new Error('Function not implemented.');
@@ -15,6 +15,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
15
15
  var material_1 = require("@mui/material");
16
16
  var AddressFields = function (_a) {
17
17
  var form = _a.form, size = _a.size, handleChange = _a.handleChange;
18
- return ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { id: "address-streetName", label: "RUE", value: form.streetName.value, required: true, size: size, onBlur: function (e) { return handleChange('streetName', e.target.value, true); }, onChange: function (e) { return handleChange('streetName', e.target.value, false); }, sx: { width: '100%', mt: 2.5 } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "address-additionnalInfo", label: "COMPL\u00C9MENT", size: size, value: form.additional.value, onBlur: function (e) { return handleChange('additional', e.target.value, true); }, onChange: function (e) { return handleChange('additional', e.target.value, false); }, sx: { width: '100%', mt: 2.5 } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "address-postalCode", label: "CODE POSTAL", value: form.postalCode.value, required: true, size: size, onBlur: function (e) { return handleChange('postalCode', e.target.value, true); }, onChange: function (e) { return handleChange('postalCode', e.target.value, false); }, sx: { width: '40%', mt: 2.5, pr: 2 } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "address-cityName", label: "VILLE", value: form.cityName.value, required: true, size: size, onBlur: function (e) { return handleChange('cityName', e.target.value, true); }, onChange: function (e) { return handleChange('cityName', e.target.value, false); }, sx: { width: '60%', mt: 2.5 } })] })));
18
+ return ((0, jsx_runtime_1.jsxs)(material_1.Grid, __assign({ container: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { id: "address-streetName", label: "RUE", value: form.streetName.value, required: true, size: size, onBlur: function (e) { return handleChange('streetName', e.target.value, true); }, onChange: function (e) { return handleChange('streetName', e.target.value, false); }, error: !form.streetName.isValid, helperText: form.streetName.error, sx: { width: '100%', mt: 2.5 } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "address-additionnalInfo", label: "COMPL\u00C9MENT", size: size, value: form.additional.value, onBlur: function (e) { return handleChange('additional', e.target.value, true); }, onChange: function (e) { return handleChange('additional', e.target.value, false); }, error: !form.additional.isValid, helperText: form.additional.error, sx: { width: '100%', mt: 2.5 } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "address-postalCode", label: "CODE POSTAL", value: form.postalCode.value, required: true, size: size, onBlur: function (e) { return handleChange('postalCode', e.target.value, true); }, onChange: function (e) { return handleChange('postalCode', e.target.value, false); }, error: !form.postalCode.isValid, helperText: form.postalCode.error, sx: { width: '40%', mt: 2.5, pr: 2 } }), (0, jsx_runtime_1.jsx)(material_1.TextField, { id: "address-cityName", label: "VILLE", value: form.cityName.value, required: true, size: size, onBlur: function (e) { return handleChange('cityName', e.target.value, true); }, onChange: function (e) { return handleChange('cityName', e.target.value, false); }, error: !form.cityName.isValid, helperText: form.cityName.error, sx: { width: '60%', mt: 2.5 } })] })));
19
19
  };
20
20
  exports.default = AddressFields;
@@ -15,6 +15,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
15
15
  var material_1 = require("@mui/material");
16
16
  var GenderSelector = function (_a) {
17
17
  var handleSelectChange = _a.handleSelectChange, form = _a.form, required = _a.required, sx = _a.sx;
18
- return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, margin: "normal", required: required, sx: __assign({}, sx) }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, __assign({ id: "gender-label" }, { children: "Sexe" })), (0, jsx_runtime_1.jsxs)(material_1.Select, __assign({ labelId: "gender-label", id: "gender", name: "gender", label: "Sexe", value: form.gender.value, onChange: function (e) { return handleSelectChange(e); } }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "MALE" }, { children: "Homme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "FEMALE" }, { children: "Femme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "OTHER" }, { children: "Autre" }))] })), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, { children: form.gender.error })] })));
18
+ var theme = (0, material_1.useTheme)();
19
+ return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, __assign({ fullWidth: true, margin: "normal", required: required, sx: __assign({}, sx) }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, __assign({ id: "gender-label" }, { children: "Sexe" })), (0, jsx_runtime_1.jsxs)(material_1.Select, __assign({ labelId: "gender-label", id: "gender", name: "gender", label: "Sexe", value: form.gender.value, onChange: function (e) { return handleSelectChange(e); }, error: Boolean(form.gender.error) }, { children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "MALE" }, { children: "Homme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "FEMALE" }, { children: "Femme" })), (0, jsx_runtime_1.jsx)(material_1.MenuItem, __assign({ value: "OTHER" }, { children: "Autre" }))] })), (0, jsx_runtime_1.jsx)(material_1.FormHelperText, __assign({ sx: { color: theme.palette.error.main } }, { children: form.gender.error }))] })));
19
20
  };
20
21
  exports.default = GenderSelector;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@movalib/movalib-commons",
3
- "version": "1.1.41",
3
+ "version": "1.1.43",
4
4
  "description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -25,6 +25,8 @@ const AddressFields: FunctionComponent<AddressFieldsProps> = ({ form, size, hand
25
25
  size={size}
26
26
  onBlur={(e) => handleChange('streetName', e.target.value, true)}
27
27
  onChange={(e) => handleChange('streetName', e.target.value, false)}
28
+ error={!form.streetName.isValid}
29
+ helperText={form.streetName.error}
28
30
  sx={{ width: '100%', mt: 2.5 }}
29
31
  >
30
32
  </TextField>
@@ -35,6 +37,8 @@ const AddressFields: FunctionComponent<AddressFieldsProps> = ({ form, size, hand
35
37
  value={form.additional.value}
36
38
  onBlur={(e) => handleChange('additional', e.target.value, true)}
37
39
  onChange={(e) => handleChange('additional', e.target.value, false)}
40
+ error={!form.additional.isValid}
41
+ helperText={form.additional.error}
38
42
  sx={{ width: '100%', mt: 2.5 }}
39
43
  >
40
44
  </TextField>
@@ -46,6 +50,8 @@ const AddressFields: FunctionComponent<AddressFieldsProps> = ({ form, size, hand
46
50
  size={size}
47
51
  onBlur={(e) => handleChange('postalCode', e.target.value, true)}
48
52
  onChange={(e) => handleChange('postalCode', e.target.value, false)}
53
+ error={!form.postalCode.isValid}
54
+ helperText={form.postalCode.error}
49
55
  sx={{ width: '40%', mt: 2.5 , pr: 2}}
50
56
  >
51
57
  </TextField>
@@ -57,6 +63,8 @@ const AddressFields: FunctionComponent<AddressFieldsProps> = ({ form, size, hand
57
63
  size={size}
58
64
  onBlur={(e) => handleChange('cityName', e.target.value, true)}
59
65
  onChange={(e) => handleChange('cityName', e.target.value, false)}
66
+ error={!form.cityName.isValid}
67
+ helperText={form.cityName.error}
60
68
  sx={{ width: '60%', mt: 2.5 }}
61
69
  >
62
70
  </TextField>
@@ -1,5 +1,5 @@
1
1
  import React, { ChangeEvent } from 'react';
2
- import { FormControl, InputLabel, Select, MenuItem, SelectChangeEvent, SxProps, Theme, FormHelperText } from '@mui/material';
2
+ import { FormControl, InputLabel, Select, MenuItem, SelectChangeEvent, SxProps, Theme, FormHelperText, Typography, useTheme } from '@mui/material';
3
3
  import { MovaFormField } from './helpers/Types';
4
4
 
5
5
  interface GenderSelectorProps {
@@ -12,6 +12,7 @@ interface GenderSelectorProps {
12
12
  }
13
13
 
14
14
  const GenderSelector: React.FC<GenderSelectorProps> = ({ handleSelectChange, form, required, sx }) => {
15
+ const theme = useTheme();
15
16
  return (
16
17
  <FormControl fullWidth margin="normal" required={required} sx={{ ...sx }} >
17
18
  <InputLabel id="gender-label">Sexe</InputLabel>
@@ -22,12 +23,13 @@ const GenderSelector: React.FC<GenderSelectorProps> = ({ handleSelectChange, for
22
23
  label="Sexe"
23
24
  value={form.gender.value}
24
25
  onChange={e => handleSelectChange(e)}
26
+ error={Boolean(form.gender.error)}
25
27
  >
26
28
  <MenuItem value="MALE">Homme</MenuItem>
27
29
  <MenuItem value="FEMALE">Femme</MenuItem>
28
30
  <MenuItem value="OTHER">Autre</MenuItem>
29
31
  </Select>
30
- <FormHelperText>{form.gender.error}</FormHelperText>
32
+ <FormHelperText sx={{ color: theme.palette.error.main}}>{form.gender.error}</FormHelperText>
31
33
  </FormControl>
32
34
  );
33
35
  };