react-mui-form-validator 1.2.1 → 1.5.1

package/Readme.md

@@ -1,3 +1,4 @@
+
 ## Validation component for material-ui forms
 
 [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://opensource.org/licenses/MIT)
@@ -14,10 +15,16 @@ npm install react-mui-form-validator
 Some rules can accept extra parameter, example:
 
 TextField
+
 ```javascript
 <MuiTextField
   {...someProps}
-  validators={["minNumber:0", "maxNumber:255", "matchRegexp:^[0-9]$"]}
+  validators={[
+    {
+      validator: "maxNumber",
+      max: 10,
+    },
+  ]}
 />
 ```
 
@@ -27,193 +34,44 @@ You can pass any props of field components, but note that `errorText` prop will
 Your component must [provide a theme](http://www.material-ui.com/#/get-started/usage).
 
 ```javascript
-
 import { useState } from "react";
-import "./App.css";
 import { MuiForm, MuiTextField } from "react-mui-form-validator";
-import { Button, IconButton, InputAdornment, Paper } from "@mui/material";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faEnvelope,
-  faEye,
-  faEyeSlash,
-} from "@fortawesome/free-solid-svg-icons";
+import { Button } from "@mui/material";
 
 export default function App(props: any) {
-  const [name, setName] = useState();
   const [email, setEmail] = useState();
-  const [password, setPassword] = useState();
-  const [showPassword, setShowPassword] = useState(false);
-
-  const changeName = (event: any) => {
-    const name = event.target.value;
-    setName(name);
-  };
-
-  const changeEmail = (event: any) => {
-    const email = event.target.value;
-    setEmail(email);
-  };
-
-  const changePassword = (event: any) => {
-    const password = event.target.value;
-    setPassword(password);
-  };
 
   const handleSubmit = () => {
     // your submit logic
   };
 
   return (
-    <div className="App">
-      <center>
-        <Paper className="container">
-          <h3>Example Sign In</h3>
-          <MuiForm
-            onSubmit={handleSubmit}
-            onError={(errors: any) => console.log(errors)}
-          >
-            <MuiTextField
-              name="name"
-              //className="css-style-name" add your css style
-              //classes={classes.emailInput} //add your js or ts style
-              label="Name"
-              placeholder="Name"
-              onChange={changeName}
-              value={name}
-              validators={["required"]}
-              errorMessages={["this field is required"]}
-              fullWidth
-            />
-            <br />
-            <MuiTextField
-              name="email"
-              //className="css-style-name" add your css style
-              //classes={classes.emailInput} //add your js or ts style
-              label="Email"
-              placeholder="Email"
-              onChange={changeEmail}
-              value={email}
-              validators={["required", "isEmail"]}
-              errorMessages={["this field is required", "email is not valid"]}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <FontAwesomeIcon icon={faEnvelope} />
-                  </InputAdornment>
-                ),
-              }}
-              fullWidth
-            />
-            <br />
-            <MuiTextField
-              type={showPassword ? "text" : "password"}
-              style={{ marginBottom: 0 }}
-              name="password"
-              label="Password"
-              //InputLabelProps={{ shrink: true }}
-              placeholder="Password"
-              value={password}
-              onChange={changePassword}
-              InputProps={{
-                startAdornment: (
-                  <InputAdornment position="start">
-                    <FontAwesomeIcon icon={faEnvelope} />
-                  </InputAdornment>
-                ),
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton
-                      aria-label="toggle password visibility"
-                      onClick={() => setShowPassword(!showPassword)}
-                      onMouseDown={(e) => e.preventDefault()}
-                      edge="end"
-                    >
-                      <FontAwesomeIcon
-                        icon={showPassword ? faEyeSlash : faEye}
-                      />
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              }}
-              validators={["required"]}
-              errorMessages={["Password is required"]}
-              variant="outlined"
-              fullWidth
-            />
-            <br />
-            <Button type="submit" variant="outlined">
-              Sign In
-            </Button>
-          </MuiForm>
-        </Paper>
-      </center>
-    </div>
-  );
-}
-
-```
-css style example:
-
-```
-.App {
-  text-align: center;
-  width: 100%;
-}
-
-.container {
-  width: 500px;
-  height: auto;
-  background: #FFFFFF;
-  box-shadow: 0px 20px 56px rgba(0, 0, 0, 0.1);
-  border-radius: 16px;
-  padding: 15px;
-  margin: 20px;
-}
-
-```
-
-Class component example:
-
-```javascript
-
-import React from "react";
-import Button from "@mui/material/Button";
-import { MuiForm, MuiTextField } from "react-mui-form-validator";
-
-class MyForm extends React.Component {
-  state = {
-    email: "",
-  };
-
-  handleChange = (event) => {
-    const email = event.target.value;
-    this.setState({ email });
-  };
-
-  handleSubmit = () => {
-    // your submit logic
-  };
-
-  render() {
-    const { email } = this.state;
-    return (
+    <div>
+      <h3>Example Sign In</h3>
       <MuiForm
-        onSubmit={this.handleSubmit}
-        onError={(errors) => console.log(errors)}
+        onSubmit={handleSubmit}
+        onError={(errors: any) => console.log(errors)}
       >
         <MuiTextField
-          label="Email"
-          onChange={this.handleChange}
           name="email"
+          label="Email"
+          placeholder="example@domain.com"
+          onChange={(v) => setEmail(v.target.value)}
           value={email}
-          validators={["required", "isEmail"]}
-          errorMessages={["this field is required", "email is not valid"]}
+          validators={[
+            {
+              validator: "isEmail",
+            },
+          ]}
+          errorMessages={["Email is required"]}
+          fullWidth
         />
-        <Button type="submit">Submit</Button>
+        <br />
+        <Button type="submit" variant="outlined">
+          Sign In
+        </Button>
       </MuiForm>
-    );
-  }
+    </div>
+  );
 }
-
 ```

package/lib/index.d.ts

@@ -1,125 +1,167 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default from 'react';
-import * as mui_tel_input from 'mui-tel-input';
-import PropTypes from 'prop-types';
+import { TextFieldVariants, FilledTextFieldProps, StandardTextFieldProps, OutlinedTextFieldProps } from '@mui/material';
+import { MuiTelInputInfo } from 'mui-tel-input';
 
-declare class ValidatorComponent extends React__default.Component<any, any, any> {
-    static getDerivedStateFromProps(nextProps: any, prevState: any): {
+interface required {
+    validator: "required";
+}
+interface matchRegexp {
+    validator: "matchRegexp";
+    regexp: RegExp | string;
+}
+interface isEmail {
+    validator: "isEmail";
+}
+interface isEmpty {
+    validator: "isEmpty";
+}
+interface trim {
+    validator: "trim";
+}
+interface isNumber {
+    validator: "isNumber";
+}
+interface isFloat {
+    validator: "isFloat";
+}
+interface isPositive {
+    validator: "isPositive";
+}
+interface maxNumber {
+    validator: "maxNumber";
+    max: number;
+}
+interface minNumber {
+    validator: "minNumber";
+    min: number;
+}
+interface maxFloat {
+    validator: "maxFloat";
+    max: number;
+}
+interface minFloat {
+    validator: "minFloat";
+    min: number;
+}
+interface isString {
+    validator: "isString";
+}
+interface minStringLength {
+    validator: "minStringLength";
+    min: number;
+}
+interface maxStringLength {
+    validator: "maxStringLength";
+    max: number;
+}
+interface isFile {
+    validator: "isFile";
+}
+interface maxFileSize {
+    validator: "maxFileSize";
+    max: number;
+}
+interface allowedExtensions {
+    validator: "allowedExtensions";
+    fileTypes: string;
+}
+type Validator = required | matchRegexp | isEmail | isEmpty | trim | isNumber | isFloat | isPositive | maxNumber | minNumber | maxFloat | minFloat | isString | minStringLength | maxStringLength | isFile | maxFileSize | allowedExtensions;
+
+type MuiTextFieldProps<Variant extends TextFieldVariants = TextFieldVariants> = Variant extends "filled" ? FilledTextFieldProps : Variant extends "standard" ? StandardTextFieldProps : OutlinedTextFieldProps & ValidatorComponentProps;
+interface ValidatorComponentProps {
+    errorMessages?: string | string[];
+    validators?: Validator[];
+    value: any;
+    validatorListener?: (value: boolean) => void;
+    withRequiredValidator?: boolean;
+    containerProps?: object;
+    onChangeTel?: (value: string, info: MuiTelInputInfo) => void;
+}
+interface ValidatorComponentState {
+    isValid?: boolean;
+    value: any;
+    errorMessages?: string | string[];
+    validators?: Validator[];
+}
+interface ValidatorFormProps {
+    onSubmit: () => void;
+    instantValidate?: boolean;
+    children?: React.ReactNode;
+    onError?: (errors: any[]) => void;
+    debounceTime?: number;
+}
+
+declare class ValidatorForm extends React$1.Component<ValidatorFormProps> {
+    static getValidator: (value: any, validator: Validator) => boolean;
+    childs: any[];
+    errors: any[];
+    instantValidate: boolean;
+    debounceTime: number | undefined;
+    getFormHelpers: () => {
+        form: {
+            attachToForm: (component: any) => void;
+            debounceTime: number | undefined;
+            detachFromForm: (component: any) => void;
+            instantValidate: boolean | undefined;
+        };
+    };
+    attachToForm: (component: any) => void;
+    detachFromForm: (component: any) => void;
+    submit: (event: React$1.FormEvent<HTMLFormElement>) => void;
+    walk: (children: any[], dryRun?: boolean) => Promise<boolean>;
+    checkInput: (input: any, dryRun?: boolean) => Promise<boolean>;
+    validate: (input: any, includeRequired: boolean, dryRun?: boolean) => Promise<boolean>;
+    find: (collection: any[], fn: (item: any) => boolean) => any;
+    resetValidations: () => void;
+    isFormValid: (dryRun?: boolean) => Promise<boolean>;
+    render(): React$1.JSX.Element;
+}
+
+declare class ValidatorComponent extends React$1.Component<MuiTextFieldProps & ValidatorComponentProps, ValidatorComponentState> {
+    renderValidatorComponent(): React$1.ReactNode;
+    form: any;
+    debounceTime: any;
+    validateDebounced: {
+        (value: any, includeRequired?: boolean | undefined, dryRun?: boolean | undefined): void;
+        cancel: () => void;
+    } | any;
+    constructor(props: MuiTextFieldProps & ValidatorComponentProps);
+    getSnapshotBeforeUpdate(nextProps: Readonly<MuiTextFieldProps & ValidatorComponentProps>, prevState: Readonly<ValidatorComponentState>): {
         value: any;
-        validators: any;
-        errorMessages: any;
+        validators: Validator[];
+        errorMessages: string | string[];
     } | {
         value: any;
         validators?: undefined;
         errorMessages?: undefined;
     };
-    constructor(props: any);
-    constructor(props: any, context: any);
-    state: {
-        isValid: boolean;
-        value: any;
-        errorMessages: any;
-        validators: any;
-    };
-    componentDidMount(): void;
-    shouldComponentUpdate(nextProps: any, nextState: any): boolean;
-    componentDidUpdate(prevProps: any, prevState: any): void;
-    componentWillUnmount(): void;
-    getErrorMessage: () => any;
     instantValidate: boolean;
-    invalid: any[];
+    invalid: number[];
+    componentDidMount(): void;
     configure: () => void;
-    debounceTime: any;
-    validateDebounced: {
-        (value?: any, includeRequired?: boolean | undefined, dryRun?: boolean | undefined): void;
-        cancel: () => void;
-    } | undefined;
-    validate: (value: any, includeRequired?: boolean, dryRun?: boolean) => Promise<boolean>;
+    shouldComponentUpdate(nextProps: MuiTextFieldProps, nextState: ValidatorComponentState): boolean;
+    componentDidUpdate(prevProps: MuiTextFieldProps, prevState: ValidatorComponentState): void;
+    componentWillUnmount(): void;
+    getErrorMessage: () => string | boolean | string[];
+    validate: (value: any, dryRun?: boolean) => Promise<boolean>;
     isValid: () => boolean;
     makeInvalid: () => void;
     makeValid: () => void;
-    renderComponent: (form: any) => any;
-    form: any;
-    render(): React__default.JSX.Element;
-}
-declare namespace ValidatorComponent {
-    namespace propTypes {
-        let errorMessages: PropTypes.Requireable<NonNullable<string | any[] | null | undefined>>;
-        let validators: PropTypes.Requireable<any[]>;
-        let value: PropTypes.Requireable<any>;
-        let validatorListener: PropTypes.Requireable<(...args: any[]) => any>;
-        let withRequiredValidator: PropTypes.Requireable<boolean>;
-        let containerProps: PropTypes.Requireable<object>;
-    }
-    namespace defaultProps {
-        let errorMessages_1: string;
-        export { errorMessages_1 as errorMessages };
-        let validators_1: never[];
-        export { validators_1 as validators };
-        export function validatorListener_1(): void;
-        export { validatorListener_1 as validatorListener };
-    }
+    renderComponent: (form: ValidatorForm) => React$1.ReactNode;
+    render(): React$1.JSX.Element;
 }
 
-declare class TextValidator extends ValidatorComponent {
-    renderValidatorComponent(): React__default.JSX.Element;
+declare class MuiSelect extends ValidatorComponent {
+    renderValidatorComponent(): React$1.JSX.Element;
 }
 
-declare class MuiSelect$1 extends ValidatorComponent {
-    renderValidatorComponent(): React.JSX.Element;
+declare class MuiTextField extends ValidatorComponent {
+    renderValidatorComponent(): React__default.JSX.Element;
 }
 
-declare class ValidatorForm extends React__default.Component<any, any, any> {
-    static getValidator: (validator: any, value: any, includeRequired: any) => boolean;
-    constructor(props: any);
-    constructor(props: any, context: any);
-    getFormHelpers: () => {
-        form: {
-            attachToForm: (component: any) => void;
-            detachFromForm: (component: any) => void;
-            instantValidate: any;
-            debounceTime: any;
-        };
-    };
-    instantValidate: any;
-    debounceTime: any;
-    childs: any[];
-    errors: any[];
-    attachToForm: (component: any) => void;
-    detachFromForm: (component: any) => void;
-    submit: (event: any) => void;
-    walk: (children: any, dryRun: any) => Promise<any>;
-    checkInput: (input: any, dryRun: any) => Promise<any>;
-    validate: (input: any, includeRequired: any, dryRun: any) => Promise<any>;
-    find: (collection: any, fn: any) => any;
-    resetValidations: () => void;
-    isFormValid: (dryRun?: boolean) => Promise<any>;
-    render(): React__default.JSX.Element;
-}
-declare namespace ValidatorForm {
-    function addValidationRule(name: any, callback: any): void;
-    function getValidationRule(name: any): any;
-    function hasValidationRule(name: any): any;
-    function removeValidationRule(name: any): void;
-    namespace propTypes {
-        let onSubmit: PropTypes.Validator<(...args: any[]) => any>;
-        let instantValidate: PropTypes.Requireable<boolean>;
-        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let onError: PropTypes.Requireable<(...args: any[]) => any>;
-        let debounceTime: PropTypes.Requireable<number>;
-    }
-    namespace defaultProps {
-        export function onError_1(): void;
-        export { onError_1 as onError };
-        let debounceTime_1: number;
-        export { debounceTime_1 as debounceTime };
-    }
+declare class MuiTelInputDefault extends ValidatorComponent {
+    renderValidatorComponent(): React__default.JSX.Element;
 }
 
-declare const MuiTextField: typeof TextValidator;
-declare const MuiPhoneNumber: React.ForwardRefExoticComponent<Omit<mui_tel_input.MuiTelInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const MuiSelect: typeof MuiSelect$1;
-declare const MuiComponent: typeof ValidatorComponent;
-declare const MuiForm: typeof ValidatorForm;
-
-export { MuiComponent, MuiForm, MuiPhoneNumber, MuiSelect, MuiTextField };
+export { ValidatorComponent as MuiComponent, ValidatorForm as MuiForm, MuiTelInputDefault as MuiPhoneNumber, MuiSelect, MuiTextField, Validator as MuiValidator };