authscape 1.0.144 → 1.0.146

package/index.js

@@ -729,6 +729,7 @@ var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon")
 var _LocationOnRounded = _interopRequireDefault(require("@mui/icons-material/LocationOnRounded"));
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _reactCoolOnclickoutside = _interopRequireDefault(require("react-cool-onclickoutside"));
+var _reactHookForm = require("react-hook-form");
 var _usePlacesAutocomplete = _interopRequireWildcard(require("use-places-autocomplete"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -739,10 +740,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var AutoCompleteDialog = function AutoCompleteDialog(_ref) {
   var placeholder = _ref.placeholder,
     onSelected = _ref.onSelected,
     defaultValue = _ref.defaultValue,
+    react_hook_form_Control = _ref.react_hook_form_Control,
     onChange = _ref.onChange;
   var txtAddressField = (0, _react.useRef)(null);
   var dismissSuggestions = function dismissSuggestions() {
@@ -974,15 +977,30 @@ var AutoCompleteDialog = function AutoCompleteDialog(_ref) {
       })), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], null, /*#__PURE__*/_react["default"].createElement("strong", null, main_text), " ", /*#__PURE__*/_react["default"].createElement("small", null, secondary_text)));
     });
   };
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
-    ref: txtAddressField,
-    autoFocus: true,
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+    control: react_hook_form_Control,
+    rules: {
+      required: true
+    },
     name: "address",
-    label: placeholder,
-    variant: "outlined",
-    fullWidth: true,
-    value: value,
-    onChange: handleInput
+    render: function render(_ref3) {
+      var field = _ref3.field;
+      return /*#__PURE__*/_react["default"].createElement(Stack, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], _extends({
+        ref: txtAddressField,
+        name: "address"
+      }, field, {
+        autoComplete: "new-password",
+        label: placeholder,
+        variant: "outlined",
+        fullWidth: true,
+        value: value,
+        onChange: handleInput
+      })), errors.address && errors.address.type === 'required' && /*#__PURE__*/_react["default"].createElement(Typography, {
+        sx: {
+          color: "red"
+        }
+      }, "Address is required."));
+    }
   }), status == "OK" && /*#__PURE__*/_react["default"].createElement(_material.MenuList, {
     ref: ref,
     sx: {
@@ -993,16 +1011,18 @@ var AutoCompleteDialog = function AutoCompleteDialog(_ref) {
     }
   }, renderSuggestions()));
 };
-var GooglePlacesModal = function GooglePlacesModal(_ref3) {
-  var onAddressSelected = _ref3.onAddressSelected,
-    _ref3$_address = _ref3._address,
-    _address = _ref3$_address === void 0 ? "" : _ref3$_address,
-    _ref3$_city = _ref3._city,
-    _city = _ref3$_city === void 0 ? "" : _ref3$_city,
-    _ref3$_state = _ref3._state,
-    _state = _ref3$_state === void 0 ? "" : _ref3$_state,
-    _ref3$_postalCode = _ref3._postalCode,
-    _postalCode = _ref3$_postalCode === void 0 ? "" : _ref3$_postalCode;
+var GooglePlacesModal = function GooglePlacesModal(_ref4) {
+  var onAddressSelected = _ref4.onAddressSelected,
+    _ref4$_address = _ref4._address,
+    _address = _ref4$_address === void 0 ? "" : _ref4$_address,
+    _ref4$_city = _ref4._city,
+    _city = _ref4$_city === void 0 ? "" : _ref4$_city,
+    _ref4$_state = _ref4._state,
+    _state = _ref4$_state === void 0 ? "" : _ref4$_state,
+    _ref4$_postalCode = _ref4._postalCode,
+    _postalCode = _ref4$_postalCode === void 0 ? "" : _ref4$_postalCode,
+    _ref4$react_hook_form = _ref4.react_hook_form_Control,
+    react_hook_form_Control = _ref4$react_hook_form === void 0 ? null : _ref4$react_hook_form;
   var _useState = (0, _react.useState)(_address),
     _useState2 = _slicedToArray(_useState, 2),
     address = _useState2[0],
@@ -1029,6 +1049,7 @@ var GooglePlacesModal = function GooglePlacesModal(_ref3) {
     setLng = _useState12[1];
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(AutoCompleteDialog, {
     placeholder: "Address",
+    react_hook_form_Control: react_hook_form_Control,
     defaultValue: address,
     onSelected: function onSelected(data) {
       setAddress(data.address);
@@ -1051,42 +1072,87 @@ var GooglePlacesModal = function GooglePlacesModal(_ref3) {
   }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
     item: true,
     xs: 6
-  }, /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
-    id: "outlined-basic",
-    label: "City",
+  }, /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+    control: react_hook_form_Control,
+    rules: {
+      required: true
+    },
     name: "city",
-    variant: "outlined",
-    fullWidth: true,
-    value: city,
-    onChange: function onChange(val) {
-      setCity(val.currentTarget.value);
+    render: function render(_ref5) {
+      var field = _ref5.field;
+      return /*#__PURE__*/_react["default"].createElement(Stack, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], _extends({
+        id: "outlined-basic",
+        label: "City",
+        name: "city",
+        variant: "outlined"
+      }, field, {
+        fullWidth: true,
+        value: city,
+        onChange: function onChange(val) {
+          setCity(val.currentTarget.value);
+        }
+      })), errors.city && errors.city.type === 'required' && /*#__PURE__*/_react["default"].createElement(Typography, {
+        sx: {
+          color: "red"
+        }
+      }, "City is required."));
     }
   }))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
     item: true,
     xs: 6
-  }, /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
-    id: "outlined-basic",
-    label: "State",
+  }, /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+    control: react_hook_form_Control,
+    rules: {
+      required: true
+    },
     name: "state",
-    variant: "outlined",
-    fullWidth: true,
-    value: state,
-    onChange: function onChange(val) {
-      setState(val.currentTarget.value);
+    render: function render(_ref6) {
+      var field = _ref6.field;
+      return /*#__PURE__*/_react["default"].createElement(Stack, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], _extends({
+        id: "outlined-basic",
+        label: "State"
+      }, field, {
+        name: "state",
+        variant: "outlined",
+        fullWidth: true,
+        value: state,
+        onChange: function onChange(val) {
+          setState(val.currentTarget.value);
+        }
+      })), errors.state && errors.state.type === 'required' && /*#__PURE__*/_react["default"].createElement(Typography, {
+        sx: {
+          color: "red"
+        }
+      }, "State is required."));
     }
   })))), /*#__PURE__*/_react["default"].createElement(_system.Box, {
     sx: {
       marginTop: 2
     }
-  }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
-    id: "outlined-basic",
-    label: "Postal code",
+  }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+    control: react_hook_form_Control,
+    rules: {
+      required: true
+    },
     name: "postalCode",
-    variant: "outlined",
-    fullWidth: true,
-    value: zip,
-    onChange: function onChange(val) {
-      setPostalcode(val.currentTarget.value);
+    render: function render(_ref7) {
+      var field = _ref7.field;
+      return /*#__PURE__*/_react["default"].createElement(Stack, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], _extends({
+        id: "outlined-basic",
+        label: "Postal code"
+      }, field, {
+        name: "postalCode",
+        variant: "outlined",
+        fullWidth: true,
+        value: zip,
+        onChange: function onChange(val) {
+          setPostalcode(val.currentTarget.value);
+        }
+      })), errors.postalCode && errors.postalCode.type === 'required' && /*#__PURE__*/_react["default"].createElement(Typography, {
+        sx: {
+          color: "red"
+        }
+      }, "Postal Code is required."));
     }
   }))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.144",
+  "version": "1.0.146",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/components/GoogleMapsAutoComplete.js

@@ -9,6 +9,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import LocationOnRoundedIcon from '@mui/icons-material/LocationOnRounded';
 import ListItemText from '@mui/material/ListItemText';
 import useOnclickOutside from "react-cool-onclickoutside";
+import { useForm, Controller, useFieldArray } from "react-hook-form";
 
 import usePlacesAutocomplete, {
   getGeocode,
@@ -17,7 +18,7 @@ import usePlacesAutocomplete, {
   getLatLng,
 } from "use-places-autocomplete";
 
-const AutoCompleteDialog = ({placeholder, onSelected, defaultValue, onChange}) => {
+const AutoCompleteDialog = ({placeholder, onSelected, defaultValue, react_hook_form_Control, onChange}) => {
 
     const txtAddressField = useRef(null);
   
@@ -322,8 +323,27 @@ const AutoCompleteDialog = ({placeholder, onSelected, defaultValue, onChange}) =
   
     return (
       <>
-        <TextField ref={txtAddressField} autoFocus={true} name="address" label={placeholder} variant="outlined" fullWidth={true} value={value} onChange={handleInput} />
-  
+
+        <Controller
+            control={react_hook_form_Control}
+            rules={{ required: true }}
+            name="address"
+            render={({ field }) => (
+            <Stack>
+                <TextField ref={txtAddressField} name="address" {...field} autoComplete="new-password" label={placeholder} variant="outlined" fullWidth={true} value={value} onChange={handleInput} />
+                {errors.address && 
+            errors.address.type === 'required' 
+            && <Typography sx={{color: "red"}}>Address is required.</Typography>}
+            </Stack>
+            )}
+        />
+
+
+
+
+
+
+
         {status == "OK" &&
           <MenuList ref={ref} sx={{position:"absolute", zIndex:9999, backgroundColor:"white", border:"1px solid black"}}>
             {renderSuggestions()}
@@ -338,7 +358,8 @@ export const GooglePlacesModal = ({
   _address = "",
   _city = "",
   _state = "",
-  _postalCode = ""
+  _postalCode = "",
+  react_hook_form_Control = null
 }) => {
   const [address, setAddress] = useState(_address);
   const [city, setCity] = useState(_city);
@@ -353,6 +374,7 @@ export const GooglePlacesModal = ({
     <Box>
         <AutoCompleteDialog
         placeholder={"Address"}
+        react_hook_form_Control={react_hook_form_Control}
         defaultValue={address}
         onSelected={(data) => {
             setAddress(data.address);
@@ -372,49 +394,120 @@ export const GooglePlacesModal = ({
         <Grid container spacing={1} sx={{ marginTop: 1 }}>
         <Grid item xs={6}>
             <Box>
-            <TextField
-                id="outlined-basic"
-                label="City"
+
+
+            <Controller
+                control={react_hook_form_Control}
+                rules={{ required: true }}
                 name="city"
-                variant="outlined"
-                fullWidth={true}
-                value={city}
-                onChange={(val) => {
-                setCity(val.currentTarget.value);
-                }}
+                render={({ field }) => (
+                <Stack>
+                    <TextField
+                        id="outlined-basic"
+                        label="City"
+                        name="city"
+                        variant="outlined"
+                        {...field}
+                        fullWidth={true}
+                        value={city}
+                        onChange={(val) => {
+                        setCity(val.currentTarget.value);
+                        }}
+                    />
+
+                    {errors.city && 
+                errors.city.type === 'required' 
+                && <Typography sx={{color: "red"}}>City is required.</Typography>}
+                </Stack>
+                )}
             />
+                
+            
             </Box>
         </Grid>
 
         <Grid item xs={6}>
             <Box>
-            <TextField
-                id="outlined-basic"
-                label="State"
+
+
+            <Controller
+                control={react_hook_form_Control}
+                rules={{ required: true }}
                 name="state"
-                variant="outlined"
-                fullWidth={true}
-                value={state}
-                onChange={(val) => {
-                setState(val.currentTarget.value);
-                }}
+                render={({ field }) => (
+                <Stack>
+
+                    <TextField
+                        id="outlined-basic"
+                        label="State"
+                        {...field}
+                        name="state"
+                        variant="outlined"
+                        fullWidth={true}
+                        value={state}
+                        onChange={(val) => {
+                        setState(val.currentTarget.value);
+                        }}
+                    />
+                    
+                    
+                    {errors.state && 
+                errors.state.type === 'required' 
+                && <Typography sx={{color: "red"}}>State is required.</Typography>}
+                </Stack>
+                )}
             />
+
+
+
+            
             </Box>
         </Grid>
         </Grid>
 
         <Box sx={{ marginTop: 2 }}>
-        <TextField
-            id="outlined-basic"
-            label="Postal code"
+
+
+
+        <Controller
+            control={react_hook_form_Control}
+            rules={{ required: true }}
             name="postalCode"
-            variant="outlined"
-            fullWidth={true}
-            value={zip}
-            onChange={(val) => {
-            setPostalcode(val.currentTarget.value);
-            }}
+            render={({ field }) => (
+            <Stack>
+
+                <TextField
+                    id="outlined-basic"
+                    label="Postal code"
+                    {...field}
+                    name="postalCode"
+                    variant="outlined"
+                    fullWidth={true}
+                    value={zip}
+                    onChange={(val) => {
+                    setPostalcode(val.currentTarget.value);
+                    }}
+                />
+
+                {errors.postalCode && 
+            errors.postalCode.type === 'required' 
+            && <Typography sx={{color: "red"}}>Postal Code is required.</Typography>}
+            </Stack>
+            )}
         />
+
+
+
+
+
+
+
+
+
+
+
+
+        
         </Box>
 
         {/* <Box sx={{ marginTop: 1, textAlign: "right" }}>