@sebgroup/green-react 1.0.0-beta.7 → 1.0.0-beta.8

package/index.esm.js

@@ -1840,27 +1840,14 @@ const validateInputValue = (target, rules, setError) => {
 
 const validateInputValueErrors = (rules, target) => {
   const {
-    value,
-    type,
-    checked
+    value
   } = target;
 
   if ((rules === null || rules === void 0 ? void 0 : rules.custom) instanceof Function) {
     return rules === null || rules === void 0 ? void 0 : rules.custom();
   }
 
-  switch (type) {
-    case 'text':
-    case 'email':
-    case 'number':
-      return validateTextInputValues(value, rules);
-
-    case 'checkbox':
-      return validateCheckBoxInput(checked);
-
-    default:
-      return validateTextInputValues(value, rules);
-  }
+  return validateTextInputValues(value, rules);
 };
 
 const setErrorInsert = (setError, name) => {
@@ -1893,14 +1880,6 @@ const validateTextInputValues = (value, rules) => {
   }
 };
 
-const validateCheckBoxInput = checked => {
-  if (!checked) {
-    return 'error';
-  }
-
-  return null;
-};
-
 const FormContext = /*#__PURE__*/React.createContext({});
 const useFormContext = () => {
   return React.useContext(FormContext);
@@ -2000,34 +1979,24 @@ const FormItems = ({
       type,
       checked
     } = event.target;
+    let inputValue;
 
     if (type === 'checkbox') {
-      if (checked) {
-        setValues(values => {
-          return Object.assign(Object.assign({}, values), {
-            [name]: {
-              value,
-              checked
-            }
-          });
-        });
-      } else {
-        setValues(values => {
-          return Object.assign(Object.assign({}, values), {
-            [name]: null
-          });
-        });
-      }
+      inputValue = checked ? value : null;
+      checked ? setValues(values => Object.assign(Object.assign({}, values), {
+        [name]: value
+      })) : setValues(values => Object.assign(Object.assign({}, values), {
+        [name]: null
+      }));
     } else {
-      setValues(values => {
-        return Object.assign(Object.assign({}, values), {
-          [name]: value
-        });
-      });
+      inputValue = value;
+      setValues(values => Object.assign(Object.assign({}, values), {
+        [name]: value
+      }));
     }
 
     validateInputValue({
-      value,
+      value: inputValue,
       name,
       type,
       checked
@@ -2200,7 +2169,7 @@ const Checkbox = _a => {
     }), void 0)]
   }, void 0);
 };
-const RadioButton = _a => {
+const RadioButton = /*#__PURE__*/React.forwardRef((_a, ref) => {
   var {
     label,
     validator
@@ -2218,12 +2187,13 @@ const RadioButton = _a => {
       id: id,
       type: "radio"
     }, props, {
-      className: validator
+      className: validator,
+      ref: ref
     }), void 0), jsx("span", {
       children: label
     }, void 0), jsx("i", {}, void 0)]
   }), void 0);
-};
+});
 
 const Text = ({
   children
@@ -2345,16 +2315,37 @@ const RadioGroup = ({
   title,
   validator,
   onChangeRadio,
+  onChange,
+  name,
   children
 }) => {
   const [checked, setChecked] = React.useState();
   const validatorClassName = validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
 
-  const onChange = event => {
+  const onChanges = event => {
     setChecked(event.target.value);
     onChangeRadio && onChangeRadio(event.target.value);
+    onChange && onChange(event);
   };
 
+  const radioBtnRef = React.useRef(null);
+  React.useEffect(() => {
+    var _a;
+
+    if (radioBtnRef && radioBtnRef.current) {
+      const form = (_a = radioBtnRef === null || radioBtnRef === void 0 ? void 0 : radioBtnRef.current) === null || _a === void 0 ? void 0 : _a.form;
+
+      const resetListner = () => {
+        setChecked(undefined);
+      };
+
+      form === null || form === void 0 ? void 0 : form.addEventListener('reset', resetListner);
+      return () => form === null || form === void 0 ? void 0 : form.removeEventListener('reset', resetListner);
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {};
+    }
+  }, []);
   return jsxs("div", Object.assign({
     className: "form-group"
   }, {
@@ -2370,8 +2361,10 @@ const RadioGroup = ({
       }), void 0), React.Children.map(children, Child => {
         return /*#__PURE__*/React.isValidElement(Child) ? /*#__PURE__*/React.cloneElement(Child, {
           validator: validatorClassName,
-          onChange,
-          checked: checked === Child.props.value
+          onChange: onChanges,
+          checked: checked === Child.props.value,
+          name,
+          ref: radioBtnRef
         }) : Child;
       })]
     }), void 0), (validator === null || validator === void 0 ? void 0 : validator.message) && jsx("span", Object.assign({

package/index.umd.js

@@ -330,26 +330,13 @@
     };
 
     var validateInputValueErrors = function validateInputValueErrors(rules, target) {
-      var value = target.value,
-          type = target.type,
-          checked = target.checked;
+      var value = target.value;
 
       if ((rules === null || rules === void 0 ? void 0 : rules.custom) instanceof Function) {
         return rules === null || rules === void 0 ? void 0 : rules.custom();
       }
 
-      switch (type) {
-        case 'text':
-        case 'email':
-        case 'number':
-          return validateTextInputValues(value, rules);
-
-        case 'checkbox':
-          return validateCheckBoxInput(checked);
-
-        default:
-          return validateTextInputValues(value, rules);
-      }
+      return validateTextInputValues(value, rules);
     };
 
     var setErrorInsert = function setErrorInsert(setError, name) {
@@ -383,14 +370,6 @@
       }
     };
 
-    var validateCheckBoxInput = function validateCheckBoxInput(checked) {
-      if (!checked) {
-        return 'error';
-      }
-
-      return null;
-    };
-
     var FormContext = /*#__PURE__*/React__default["default"].createContext({});
     var useFormContext = function useFormContext() {
       return React__default["default"].useContext(FormContext);
@@ -506,25 +485,21 @@
             name = _a.name,
             type = _a.type,
             checked = _a.checked;
+        var inputValue;
 
         if (type === 'checkbox') {
-          if (checked) {
-            setValues(function (values) {
-              var _a;
-
-              return __assign(__assign({}, values), (_a = {}, _a[name] = {
-                value: value,
-                checked: checked
-              }, _a));
-            });
-          } else {
-            setValues(function (values) {
-              var _a;
-
-              return __assign(__assign({}, values), (_a = {}, _a[name] = null, _a));
-            });
-          }
+          inputValue = checked ? value : null;
+          checked ? setValues(function (values) {
+            var _a;
+
+            return __assign(__assign({}, values), (_a = {}, _a[name] = value, _a));
+          }) : setValues(function (values) {
+            var _a;
+
+            return __assign(__assign({}, values), (_a = {}, _a[name] = null, _a));
+          });
         } else {
+          inputValue = value;
           setValues(function (values) {
             var _a;
 
@@ -533,7 +508,7 @@
         }
 
         validateInputValue({
-          value: value,
+          value: inputValue,
           name: name,
           type: type,
           checked: checked
@@ -707,7 +682,7 @@
         }), void 0)]
       }, void 0);
     };
-    var RadioButton = function RadioButton(_a) {
+    var RadioButton = /*#__PURE__*/React__default["default"].forwardRef(function (_a, ref) {
       var label = _a.label,
           validator = _a.validator,
           props = __rest(_a, ["label", "validator"]);
@@ -721,12 +696,13 @@
           id: id,
           type: "radio"
         }, props, {
-          className: validator
+          className: validator,
+          ref: ref
         }), void 0), jsxRuntime.jsx("span", {
           children: label
         }, void 0), jsxRuntime.jsx("i", {}, void 0)]
       }), void 0);
-    };
+    });
 
     var Text = function Text(_a) {
       var children = _a.children;
@@ -1798,6 +1774,8 @@
           title = _a.title,
           validator = _a.validator,
           onChangeRadio = _a.onChangeRadio,
+          onChange = _a.onChange,
+          name = _a.name,
           children = _a.children;
 
       var _b = React__default["default"].useState(),
@@ -1806,11 +1784,32 @@
 
       var validatorClassName = extract.validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
 
-      var onChange = function onChange(event) {
+      var onChanges = function onChanges(event) {
         setChecked(event.target.value);
         onChangeRadio && onChangeRadio(event.target.value);
+        onChange && onChange(event);
       };
 
+      var radioBtnRef = React__default["default"].useRef(null);
+      React__default["default"].useEffect(function () {
+        var _a;
+
+        if (radioBtnRef && radioBtnRef.current) {
+          var form_1 = (_a = radioBtnRef === null || radioBtnRef === void 0 ? void 0 : radioBtnRef.current) === null || _a === void 0 ? void 0 : _a.form;
+
+          var resetListner_1 = function resetListner_1() {
+            setChecked(undefined);
+          };
+
+          form_1 === null || form_1 === void 0 ? void 0 : form_1.addEventListener('reset', resetListner_1);
+          return function () {
+            return form_1 === null || form_1 === void 0 ? void 0 : form_1.removeEventListener('reset', resetListner_1);
+          };
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-empty-function
+          return function () {};
+        }
+      }, []);
       return jsxRuntime.jsxs("div", __assign({
         className: "form-group"
       }, {
@@ -1826,8 +1825,10 @@
           }), void 0), React__default["default"].Children.map(children, function (Child) {
             return /*#__PURE__*/React__default["default"].isValidElement(Child) ? /*#__PURE__*/React__default["default"].cloneElement(Child, {
               validator: validatorClassName,
-              onChange: onChange,
-              checked: checked === Child.props.value
+              onChange: onChanges,
+              checked: checked === Child.props.value,
+              name: name,
+              ref: radioBtnRef
             }) : Child;
           })]
         }), void 0), (validator === null || validator === void 0 ? void 0 : validator.message) && jsxRuntime.jsx("span", __assign({

package/lib/form/input/input.d.ts

@@ -7,4 +7,4 @@ export declare const TextInput: ({ label, info, onChange, onChangeInput, validat
 export declare const EmailInput: ({ label, info, onChange, onChangeInput, validator, ...props }: TextInputProps) => JSX.Element;
 export declare const NumberInput: ({ label, info, onChange, onChangeInput, validator, ...props }: NumberInputProps) => JSX.Element;
 export declare const Checkbox: ({ label, onChange, validator, ...props }: CheckboxProps) => JSX.Element;
-export declare const RadioButton: ({ label, validator, ...props }: RadioButtonProps) => JSX.Element;
+export declare const RadioButton: React.ForwardRefExoticComponent<Pick<RadioButtonProps, "label" | "onChange" | "validator" | "type" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLInputElement>>;

package/lib/form/radioButton/radioGroup.d.ts

@@ -5,6 +5,8 @@ export interface RadioGroupProps {
     description?: string;
     validator?: IValidator;
     onChangeRadio?: (value: string) => string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    name?: string;
 }
-export declare const RadioGroup: ({ description, title, validator, onChangeRadio, children }: React.PropsWithChildren<RadioGroupProps>) => JSX.Element;
+export declare const RadioGroup: ({ description, title, validator, onChangeRadio, onChange, name, children }: React.PropsWithChildren<RadioGroupProps>) => JSX.Element;
 export default RadioGroup;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "peerDependencies": {
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
   "dependencies": {
-    "@sebgroup/chlorophyll": "^1.0.0-beta.7",
-    "@sebgroup/extract": "^1.0.0-beta.7"
+    "@sebgroup/chlorophyll": "^1.0.0-beta.8",
+    "@sebgroup/extract": "^1.0.0-beta.8"
   },
   "description": "React components built on top of @sebgroup/chlorophyll.",
   "repository": {