react-asc 25.5.0 → 25.5.2

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 (5) hide show
  1. package/components/Form/Form.d.ts +3 -2
  2. package/components/Form/form.interfaces.d.ts +2 -2
  3. package/index.es.js +58 -47
  4. package/index.js +58 -47
  5. package/package.json +2 -9
package/components/Form/Form.d.ts CHANGED
@@ -2,10 +2,11 @@ import React, { Component } from 'react';
2
2
  import type { IControls } from './form.interfaces';
3
3
  import type { FormControl } from './form.models';
4
4
  export interface IFormProps {
5
+ className?: string;
5
6
  controls: IControls;
6
7
  validateOnBlur?: boolean;
7
- onSubmit?: (values: unknown) => void;
8
- onChange?: (values: unknown) => void;
8
+ onSubmit?: (values: any) => void;
9
+ onChange?: (values: any) => void;
9
10
  submitOnEnter?: boolean;
10
11
  }
11
12
  export interface IFormState {
package/components/Form/form.interfaces.d.ts CHANGED
@@ -4,8 +4,8 @@ export interface IControls {
4
4
  [key: string]: FormControl;
5
5
  }
6
6
  export interface IFormTextAreaOptions {
7
- rows: number;
8
- resize: boolean;
7
+ rows?: number;
8
+ resize?: boolean;
9
9
  }
10
10
  export interface IFormSelectOptions {
11
11
  multiple?: boolean;
package/index.es.js CHANGED
@@ -886,18 +886,14 @@ const Row = ({ children, direction = 'row', className, ...rest }) => {
886
886
  return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
887
887
  };
888
888
 
889
- var css_248z$E = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
890
- var styles$E = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
889
+ var css_248z$E = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
890
+ var styles$E = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
891
891
  styleInject(css_248z$E);
892
892
 
893
- const FormLabel = ({ children, className, htmlFor, ...rest }) => {
894
- const getCssClasses = () => {
895
- const cssClasses = [];
896
- cssClasses.push(styles$E.formLabel);
897
- className && cssClasses.push(className);
898
- return cssClasses.filter(css => css).join(' ');
899
- };
900
- return (React.createElement("label", { htmlFor: htmlFor, className: getCssClasses(), ...rest }, children));
893
+ const FormError = (props) => {
894
+ const { className = styles$E.isInvalid, errors = [] } = props;
895
+ return (React.createElement(Fragment$1, null, errors &&
896
+ React.createElement("div", { className: className }, errors.map(e => React.createElement("div", { key: e.validator }, e.message)))));
901
897
  };
902
898
 
903
899
  const FormGroup = (props) => {
@@ -905,6 +901,16 @@ const FormGroup = (props) => {
905
901
  return (React.createElement("div", { className: className }, children));
906
902
  };
907
903
 
904
+ const FormHint = (props) => {
905
+ const { children, className = 'form-text text-muted' } = props;
906
+ const getCssClasses = () => {
907
+ const cssClasses = [];
908
+ className && cssClasses.push(className);
909
+ return cssClasses.filter(css => css).join(' ');
910
+ };
911
+ return (React.createElement("small", { className: getCssClasses() }, children));
912
+ };
913
+
908
914
  const FileInput = (props) => {
909
915
  const { id, className, children, name, multiple = false, accept, disabled, onChange, readOnly, value, deletable = false, ...rest } = props;
910
916
  const inputFileElement = useRef(null);
@@ -1086,7 +1092,7 @@ const Select = (props) => {
1086
1092
  React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))));
1087
1093
  };
1088
1094
 
1089
- var css_248z$C = ".Textarea-module_textarea__L5zqa {\n min-height: calc(10em + 0.75rem + 2px);\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n background-clip: padding-box;\n border: 2px solid var(--input-border-color);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: var(--borderRadius);\n resize: vertical;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: 1px solid #ced4da;\n}\n.Textarea-module_textarea__L5zqa:focus:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\n outline: none !important;\n border-color: var(--primary);\n}\n.Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
1095
+ var css_248z$C = ".Textarea-module_textarea__L5zqa {\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n background-clip: padding-box;\n border: 2px solid var(--input-border-color);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: var(--borderRadius);\n resize: vertical;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: 1px solid #ced4da;\n}\n.Textarea-module_textarea__L5zqa:focus:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\n outline: none !important;\n border-color: var(--primary);\n}\n.Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
1090
1096
  var styles$C = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
1091
1097
  styleInject(css_248z$C);
1092
1098
 
@@ -1150,24 +1156,18 @@ const FormInput = (props) => {
1150
1156
  React.createElement("label", { className: "form-check-label", htmlFor: option.id }, option.label))))));
1151
1157
  };
1152
1158
 
1153
- const FormHint = (props) => {
1154
- const { children, className = 'form-text text-muted' } = props;
1159
+ var css_248z$A = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
1160
+ var styles$A = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
1161
+ styleInject(css_248z$A);
1162
+
1163
+ const FormLabel = ({ children, className, htmlFor, ...rest }) => {
1155
1164
  const getCssClasses = () => {
1156
1165
  const cssClasses = [];
1166
+ cssClasses.push(styles$A.formLabel);
1157
1167
  className && cssClasses.push(className);
1158
1168
  return cssClasses.filter(css => css).join(' ');
1159
1169
  };
1160
- return (React.createElement("small", { className: getCssClasses() }, children));
1161
- };
1162
-
1163
- var css_248z$A = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
1164
- var styles$A = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
1165
- styleInject(css_248z$A);
1166
-
1167
- const FormError = (props) => {
1168
- const { className = styles$A.isInvalid, errors = [] } = props;
1169
- return (React.createElement(Fragment$1, null, errors &&
1170
- React.createElement("div", { className: className }, errors.map(e => React.createElement("div", { key: e.validator }, e.message)))));
1170
+ return (React.createElement("label", { htmlFor: htmlFor, className: getCssClasses(), ...rest }, children));
1171
1171
  };
1172
1172
 
1173
1173
  const IsEmptyValidator = (value) => value?.trim() === ''
@@ -1186,16 +1186,21 @@ const MaxValidator = (val, valueB) => val.length <= valueB;
1186
1186
 
1187
1187
  const MinValidator = (val, minLength) => val.length >= minLength;
1188
1188
 
1189
- // values, isSubmitting, handleChange, handleBlur, handleSubmit
1190
1189
  class Form extends Component {
1191
1190
  constructor(props) {
1192
1191
  super(props);
1193
1192
  this.myForm = createRef();
1194
- this.state = { controls: undefined, isValid: false, isChanged: false, isSubmitted: false, submitOnEnter: props.submitOnEnter !== undefined ? props.submitOnEnter : true };
1193
+ this.state = {
1194
+ controls: undefined,
1195
+ isValid: false,
1196
+ isChanged: false,
1197
+ isSubmitted: false,
1198
+ submitOnEnter: props.submitOnEnter !== undefined ? props.submitOnEnter : true,
1199
+ };
1195
1200
  }
1196
1201
  static getDerivedStateFromProps(nextProps, state) {
1197
1202
  if (!state.controls && nextProps.controls) {
1198
- return ({ controls: nextProps.controls });
1203
+ return { controls: nextProps.controls };
1199
1204
  }
1200
1205
  return null;
1201
1206
  }
@@ -1206,13 +1211,15 @@ class Form extends Component {
1206
1211
  const values = keys.reduce((obj, f) => {
1207
1212
  const control = this.getControl(f);
1208
1213
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
1209
- const newValue = ((control.type === 'date' || control.type === 'datetime-local') &&
1214
+ const newValue = (control.type === 'date' || control.type === 'datetime-local') &&
1210
1215
  control.value &&
1211
- isValidDate((control.value))) ? new Date((control.value)).toISOString() : control.value;
1212
- return ({
1216
+ isValidDate(control.value)
1217
+ ? new Date(control.value).toISOString()
1218
+ : control.value;
1219
+ return {
1213
1220
  ...obj,
1214
- [f]: newValue
1215
- });
1221
+ [f]: newValue,
1222
+ };
1216
1223
  }, {});
1217
1224
  if (this.state.isValid && this.state.isSubmitted) {
1218
1225
  this.props.onSubmit && this.props.onSubmit(values);
@@ -1309,7 +1316,7 @@ class Form extends Component {
1309
1316
  }
1310
1317
  renderLabel(fieldKey, label, labelClassName = 'form-label') {
1311
1318
  const cssClasses = [labelClassName, this.isRequired(fieldKey) ? 'required' : undefined];
1312
- return React.createElement(FormLabel, { htmlFor: fieldKey, className: cssClasses.join(' ') }, label);
1319
+ return (React.createElement(FormLabel, { htmlFor: fieldKey, className: cssClasses.join(' ') }, label));
1313
1320
  }
1314
1321
  handleFormSubmit() {
1315
1322
  for (const fieldKey of Object.keys(this.state.controls)) {
@@ -1322,7 +1329,9 @@ class Form extends Component {
1322
1329
  this.setState({
1323
1330
  controls: { ...this.state.controls },
1324
1331
  isSubmitted: true,
1325
- isValid: Object.keys(this.state.controls).map(f => this.getControl(f).isValid).every(valid => valid === true)
1332
+ isValid: Object.keys(this.state.controls)
1333
+ .map(f => this.getControl(f).isValid)
1334
+ .every(valid => valid === true),
1326
1335
  }, () => this.handleChange());
1327
1336
  }
1328
1337
  // trigger via ref
@@ -1338,7 +1347,7 @@ class Form extends Component {
1338
1347
  controls: { ...this.state.controls },
1339
1348
  isSubmitted: false,
1340
1349
  isChanged: false,
1341
- isValid: false
1350
+ isValid: false,
1342
1351
  });
1343
1352
  }
1344
1353
  handleOnKeyDown(e) {
@@ -1354,18 +1363,20 @@ class Form extends Component {
1354
1363
  return this.getControl(fieldKey).config.formGroupClassName;
1355
1364
  }
1356
1365
  render() {
1357
- return (React.createElement("form", { ref: this.myForm }, this.state && this.state.controls && Object.keys(this.state.controls).map((fieldKey) => {
1358
- return (React.createElement(FormGroup, { key: fieldKey, className: this.getFormGroupCssClass(fieldKey) },
1359
- this.getControl(fieldKey).config.labelPosition !== 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
1360
- this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
1361
- React.createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: ({ name, value }) => this.handleInputChange(name, value), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
1362
- this.getControl(fieldKey).config.labelPosition === 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
1363
- this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
1364
- this.getControl(fieldKey).config.hint &&
1365
- React.createElement(FormHint, null, this.getControl(fieldKey).config.hint),
1366
- this.getControl(fieldKey).errors &&
1367
- React.createElement(FormError, { errors: this.getControl(fieldKey).errors })));
1368
- })));
1366
+ return (React.createElement("form", { className: this.props.className, ref: this.myForm }, this.state &&
1367
+ this.state.controls &&
1368
+ Object.keys(this.state.controls).map(fieldKey => {
1369
+ return (React.createElement(FormGroup, { key: fieldKey, className: this.getFormGroupCssClass(fieldKey) },
1370
+ this.getControl(fieldKey).config.labelPosition !== 'behind' &&
1371
+ this.getControl(fieldKey).type !== 'checkbox' &&
1372
+ this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
1373
+ React.createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: ({ name, value }) => this.handleInputChange(name, value), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
1374
+ this.getControl(fieldKey).config.labelPosition === 'behind' &&
1375
+ this.getControl(fieldKey).type !== 'checkbox' &&
1376
+ this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
1377
+ this.getControl(fieldKey).config.hint && (React.createElement(FormHint, null, this.getControl(fieldKey).config.hint)),
1378
+ this.getControl(fieldKey).errors && React.createElement(FormError, { errors: this.getControl(fieldKey).errors })));
1379
+ })));
1369
1380
  }
1370
1381
  }
1371
1382
  function isValidDate(dateObject) {
package/index.js CHANGED
@@ -895,18 +895,14 @@ const Row = ({ children, direction = 'row', className, ...rest }) => {
895
895
  return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
896
896
  };
897
897
 
898
- var css_248z$E = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
899
- var styles$E = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
898
+ var css_248z$E = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
899
+ var styles$E = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
900
900
  styleInject(css_248z$E);
901
901
 
902
- const FormLabel = ({ children, className, htmlFor, ...rest }) => {
903
- const getCssClasses = () => {
904
- const cssClasses = [];
905
- cssClasses.push(styles$E.formLabel);
906
- className && cssClasses.push(className);
907
- return cssClasses.filter(css => css).join(' ');
908
- };
909
- return (React__default["default"].createElement("label", { htmlFor: htmlFor, className: getCssClasses(), ...rest }, children));
902
+ const FormError = (props) => {
903
+ const { className = styles$E.isInvalid, errors = [] } = props;
904
+ return (React__default["default"].createElement(React.Fragment, null, errors &&
905
+ React__default["default"].createElement("div", { className: className }, errors.map(e => React__default["default"].createElement("div", { key: e.validator }, e.message)))));
910
906
  };
911
907
 
912
908
  const FormGroup = (props) => {
@@ -914,6 +910,16 @@ const FormGroup = (props) => {
914
910
  return (React__default["default"].createElement("div", { className: className }, children));
915
911
  };
916
912
 
913
+ const FormHint = (props) => {
914
+ const { children, className = 'form-text text-muted' } = props;
915
+ const getCssClasses = () => {
916
+ const cssClasses = [];
917
+ className && cssClasses.push(className);
918
+ return cssClasses.filter(css => css).join(' ');
919
+ };
920
+ return (React__default["default"].createElement("small", { className: getCssClasses() }, children));
921
+ };
922
+
917
923
  const FileInput = (props) => {
918
924
  const { id, className, children, name, multiple = false, accept, disabled, onChange, readOnly, value, deletable = false, ...rest } = props;
919
925
  const inputFileElement = React.useRef(null);
@@ -1095,7 +1101,7 @@ const Select = (props) => {
1095
1101
  React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))));
1096
1102
  };
1097
1103
 
1098
- var css_248z$C = ".Textarea-module_textarea__L5zqa {\n min-height: calc(10em + 0.75rem + 2px);\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n background-clip: padding-box;\n border: 2px solid var(--input-border-color);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: var(--borderRadius);\n resize: vertical;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: 1px solid #ced4da;\n}\n.Textarea-module_textarea__L5zqa:focus:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\n outline: none !important;\n border-color: var(--primary);\n}\n.Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
1104
+ var css_248z$C = ".Textarea-module_textarea__L5zqa {\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n background-clip: padding-box;\n border: 2px solid var(--input-border-color);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: var(--borderRadius);\n resize: vertical;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: 1px solid #ced4da;\n}\n.Textarea-module_textarea__L5zqa:focus:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\n outline: none !important;\n border-color: var(--primary);\n}\n.Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
1099
1105
  var styles$C = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
1100
1106
  styleInject(css_248z$C);
1101
1107
 
@@ -1159,24 +1165,18 @@ const FormInput = (props) => {
1159
1165
  React__default["default"].createElement("label", { className: "form-check-label", htmlFor: option.id }, option.label))))));
1160
1166
  };
1161
1167
 
1162
- const FormHint = (props) => {
1163
- const { children, className = 'form-text text-muted' } = props;
1168
+ var css_248z$A = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
1169
+ var styles$A = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
1170
+ styleInject(css_248z$A);
1171
+
1172
+ const FormLabel = ({ children, className, htmlFor, ...rest }) => {
1164
1173
  const getCssClasses = () => {
1165
1174
  const cssClasses = [];
1175
+ cssClasses.push(styles$A.formLabel);
1166
1176
  className && cssClasses.push(className);
1167
1177
  return cssClasses.filter(css => css).join(' ');
1168
1178
  };
1169
- return (React__default["default"].createElement("small", { className: getCssClasses() }, children));
1170
- };
1171
-
1172
- var css_248z$A = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
1173
- var styles$A = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
1174
- styleInject(css_248z$A);
1175
-
1176
- const FormError = (props) => {
1177
- const { className = styles$A.isInvalid, errors = [] } = props;
1178
- return (React__default["default"].createElement(React.Fragment, null, errors &&
1179
- React__default["default"].createElement("div", { className: className }, errors.map(e => React__default["default"].createElement("div", { key: e.validator }, e.message)))));
1179
+ return (React__default["default"].createElement("label", { htmlFor: htmlFor, className: getCssClasses(), ...rest }, children));
1180
1180
  };
1181
1181
 
1182
1182
  const IsEmptyValidator = (value) => value?.trim() === ''
@@ -1195,16 +1195,21 @@ const MaxValidator = (val, valueB) => val.length <= valueB;
1195
1195
 
1196
1196
  const MinValidator = (val, minLength) => val.length >= minLength;
1197
1197
 
1198
- // values, isSubmitting, handleChange, handleBlur, handleSubmit
1199
1198
  class Form extends React.Component {
1200
1199
  constructor(props) {
1201
1200
  super(props);
1202
1201
  this.myForm = React.createRef();
1203
- this.state = { controls: undefined, isValid: false, isChanged: false, isSubmitted: false, submitOnEnter: props.submitOnEnter !== undefined ? props.submitOnEnter : true };
1202
+ this.state = {
1203
+ controls: undefined,
1204
+ isValid: false,
1205
+ isChanged: false,
1206
+ isSubmitted: false,
1207
+ submitOnEnter: props.submitOnEnter !== undefined ? props.submitOnEnter : true,
1208
+ };
1204
1209
  }
1205
1210
  static getDerivedStateFromProps(nextProps, state) {
1206
1211
  if (!state.controls && nextProps.controls) {
1207
- return ({ controls: nextProps.controls });
1212
+ return { controls: nextProps.controls };
1208
1213
  }
1209
1214
  return null;
1210
1215
  }
@@ -1215,13 +1220,15 @@ class Form extends React.Component {
1215
1220
  const values = keys.reduce((obj, f) => {
1216
1221
  const control = this.getControl(f);
1217
1222
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
1218
- const newValue = ((control.type === 'date' || control.type === 'datetime-local') &&
1223
+ const newValue = (control.type === 'date' || control.type === 'datetime-local') &&
1219
1224
  control.value &&
1220
- isValidDate((control.value))) ? new Date((control.value)).toISOString() : control.value;
1221
- return ({
1225
+ isValidDate(control.value)
1226
+ ? new Date(control.value).toISOString()
1227
+ : control.value;
1228
+ return {
1222
1229
  ...obj,
1223
- [f]: newValue
1224
- });
1230
+ [f]: newValue,
1231
+ };
1225
1232
  }, {});
1226
1233
  if (this.state.isValid && this.state.isSubmitted) {
1227
1234
  this.props.onSubmit && this.props.onSubmit(values);
@@ -1318,7 +1325,7 @@ class Form extends React.Component {
1318
1325
  }
1319
1326
  renderLabel(fieldKey, label, labelClassName = 'form-label') {
1320
1327
  const cssClasses = [labelClassName, this.isRequired(fieldKey) ? 'required' : undefined];
1321
- return React__default["default"].createElement(FormLabel, { htmlFor: fieldKey, className: cssClasses.join(' ') }, label);
1328
+ return (React__default["default"].createElement(FormLabel, { htmlFor: fieldKey, className: cssClasses.join(' ') }, label));
1322
1329
  }
1323
1330
  handleFormSubmit() {
1324
1331
  for (const fieldKey of Object.keys(this.state.controls)) {
@@ -1331,7 +1338,9 @@ class Form extends React.Component {
1331
1338
  this.setState({
1332
1339
  controls: { ...this.state.controls },
1333
1340
  isSubmitted: true,
1334
- isValid: Object.keys(this.state.controls).map(f => this.getControl(f).isValid).every(valid => valid === true)
1341
+ isValid: Object.keys(this.state.controls)
1342
+ .map(f => this.getControl(f).isValid)
1343
+ .every(valid => valid === true),
1335
1344
  }, () => this.handleChange());
1336
1345
  }
1337
1346
  // trigger via ref
@@ -1347,7 +1356,7 @@ class Form extends React.Component {
1347
1356
  controls: { ...this.state.controls },
1348
1357
  isSubmitted: false,
1349
1358
  isChanged: false,
1350
- isValid: false
1359
+ isValid: false,
1351
1360
  });
1352
1361
  }
1353
1362
  handleOnKeyDown(e) {
@@ -1363,18 +1372,20 @@ class Form extends React.Component {
1363
1372
  return this.getControl(fieldKey).config.formGroupClassName;
1364
1373
  }
1365
1374
  render() {
1366
- return (React__default["default"].createElement("form", { ref: this.myForm }, this.state && this.state.controls && Object.keys(this.state.controls).map((fieldKey) => {
1367
- return (React__default["default"].createElement(FormGroup, { key: fieldKey, className: this.getFormGroupCssClass(fieldKey) },
1368
- this.getControl(fieldKey).config.labelPosition !== 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
1369
- this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
1370
- React__default["default"].createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: ({ name, value }) => this.handleInputChange(name, value), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
1371
- this.getControl(fieldKey).config.labelPosition === 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
1372
- this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
1373
- this.getControl(fieldKey).config.hint &&
1374
- React__default["default"].createElement(FormHint, null, this.getControl(fieldKey).config.hint),
1375
- this.getControl(fieldKey).errors &&
1376
- React__default["default"].createElement(FormError, { errors: this.getControl(fieldKey).errors })));
1377
- })));
1375
+ return (React__default["default"].createElement("form", { className: this.props.className, ref: this.myForm }, this.state &&
1376
+ this.state.controls &&
1377
+ Object.keys(this.state.controls).map(fieldKey => {
1378
+ return (React__default["default"].createElement(FormGroup, { key: fieldKey, className: this.getFormGroupCssClass(fieldKey) },
1379
+ this.getControl(fieldKey).config.labelPosition !== 'behind' &&
1380
+ this.getControl(fieldKey).type !== 'checkbox' &&
1381
+ this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
1382
+ React__default["default"].createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: ({ name, value }) => this.handleInputChange(name, value), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
1383
+ this.getControl(fieldKey).config.labelPosition === 'behind' &&
1384
+ this.getControl(fieldKey).type !== 'checkbox' &&
1385
+ this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
1386
+ this.getControl(fieldKey).config.hint && (React__default["default"].createElement(FormHint, null, this.getControl(fieldKey).config.hint)),
1387
+ this.getControl(fieldKey).errors && React__default["default"].createElement(FormError, { errors: this.getControl(fieldKey).errors })));
1388
+ })));
1378
1389
  }
1379
1390
  }
1380
1391
  function isValidDate(dateObject) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-asc",
3
- "version": "25.5.0",
3
+ "version": "25.5.2",
4
4
  "description": "handcrafted react components",
5
5
  "main": "index.js",
6
6
  "module": "index.es.js",
@@ -18,12 +18,5 @@
18
18
  "scripts": {
19
19
  "pub": "npm publish --access public"
20
20
  },
21
- "keywords": [
22
- "react",
23
- "component library",
24
- "ui library",
25
- "components",
26
- "library",
27
- "material"
28
- ]
21
+ "keywords": ["react", "component library", "ui library", "components", "library", "material"]
29
22
  }