@coxy/react-validator 1.3.3 → 2.0.1

package/src/validator-field.jsx

@@ -1,72 +0,0 @@
-/* eslint react/jsx-props-no-spreading: [0], react/sort-comp: [0], camelcase: [0] */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Context from './context';
-import { Field } from './validator';
-
-class ValidationFieldWrapper extends Component {
-  componentWillUnmount() {
-    this.props.unregisterField(this);
-  }
-
-  componentDidMount() {
-    this.props.registerField(this);
-  }
-
-  validate() {
-    const field = new Field({
-      rules: this.props.rules,
-      required: this.props.required,
-      value: this.props.value,
-      id: this.props.id,
-    });
-    return field.validate();
-  }
-
-  render() {
-    const { children, value } = this.props;
-    const validity = this.validate();
-    return (typeof children === 'function' ? children(validity, value) : children);
-  }
-}
-
-export default function ValidationField(props) {
-  return (
-    <Context.Consumer>
-      {(data) => (
-        <ValidationFieldWrapper
-          {...props}
-          registerField={data.registerField}
-          unregisterField={data.unregisterField}
-        />
-      )}
-    </Context.Consumer>
-  );
-}
-
-ValidationFieldWrapper.propTypes = {
-  // from context
-  registerField: PropTypes.func.isRequired,
-  unregisterField: PropTypes.func.isRequired,
-
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.func,
-  ]),
-  rules: PropTypes.arrayOf(PropTypes.shape({
-    message: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-    rule: PropTypes.func,
-  })),
-
-  id: PropTypes.string,
-  required: PropTypes.bool,
-  value: PropTypes.any, // eslint-disable-line
-};
-
-ValidationFieldWrapper.defaultProps = {
-  rules: [],
-  children: null,
-  required: true,
-  value: undefined,
-  id: '',
-};

package/src/validator-field.test.js

@@ -1,187 +0,0 @@
-/* eslint-env jest */
-/* globals shallow */
-/* eslint react/jsx-filename-extension: [0] */
-
-import React from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
-import { act } from 'react-dom/test-utils';
-
-import ValidatorWrapper from './validator-wrapper';
-import ValidatorField from './validator-field';
-import rules from './rules';
-
-let container = null;
-beforeEach(() => {
-  container = document.createElement('div');
-  document.body.appendChild(container);
-});
-
-afterEach(() => {
-  unmountComponentAtNode(container);
-  container.remove();
-  container = null;
-});
-
-it('render without wrapper', () => {
-  expect(() => shallow(<ValidatorField />)).toThrowError();
-});
-
-it('normal render', () => {
-  act(() => {
-    render((
-      <ValidatorWrapper>
-        <ValidatorField rules={[]} value="" />
-      </ValidatorWrapper>
-    ), container);
-  });
-});
-
-it('check context validator', () => {
-  const validator = React.createRef();
-  act(() => {
-    render((
-      <ValidatorWrapper ref={validator}>
-        <ValidatorField rules={[]} />
-      </ValidatorWrapper>
-    ), container);
-  });
-
-  const validateResult = validator.current.validate();
-
-  expect(validateResult.isValid).toBe(true);
-  expect(validateResult.message).toBe('');
-});
-
-it('check failed validation', () => {
-  const validator1 = React.createRef();
-  act(() => {
-    render((
-      <ValidatorWrapper ref={validator1}>
-        <ValidatorField rules={rules.email} value="test" />
-      </ValidatorWrapper>
-    ), container);
-  });
-
-  const validateResult1 = validator1.current.validate();
-
-  expect(validateResult1.isValid).toBe(false);
-  expect(validateResult1.message).toBe('Email is invalid');
-  expect(validateResult1.errors.length).toBe(1);
-
-  const validator2 = React.createRef();
-  act(() => {
-    render((
-      <ValidatorWrapper ref={validator2}>
-        <ValidatorField rules={rules.email} value="" />
-      </ValidatorWrapper>
-    ), container);
-  });
-
-  const validateResult2 = validator2.current.validate();
-
-  expect(validateResult2.isValid).toBe(false);
-  expect(validateResult2.message).toBe('Email is required');
-  expect(validateResult2.errors.length).toBe(1);
-});
-
-jest.useFakeTimers();
-
-it('check state change and hide field', () => {
-  const validator1 = React.createRef();
-  function Comp() {
-    const [st, setSt] = React.useState(true);
-
-    React.useEffect(() => {
-      setTimeout(() => {
-        act(() => {
-          setSt(false);
-        });
-      }, 100);
-    }, []);
-
-    return (
-      <ValidatorWrapper ref={validator1}>
-        <ValidatorField rules={rules.email} value="test" />
-        {st && (
-          <ValidatorField rules={rules.email} value="" />
-        )}
-      </ValidatorWrapper>
-    );
-  }
-
-  act(() => {
-    render(<Comp />, container);
-  });
-
-  jest.runAllTimers();
-
-  const validateResult1 = validator1.current.validate();
-
-  expect(validateResult1.isValid).toBe(false);
-  expect(validateResult1.message).toBe('Email is invalid');
-  expect(validateResult1.errors.length).toBe(1);
-});
-
-it('check success validation', () => {
-  const validator = React.createRef();
-  act(() => {
-    render((
-      <ValidatorWrapper ref={validator}>
-        <ValidatorField rules={rules.email} value="email@email.com" />
-      </ValidatorWrapper>
-    ), container);
-  });
-
-  const validateResult = validator.current.validate();
-
-  expect(validateResult.isValid).toBe(true);
-  expect(validateResult.message).toBe('');
-});
-
-it('check success validation fot child function', () => {
-  const validator = React.createRef();
-  act(() => {
-    render((
-      <ValidatorWrapper ref={validator}>
-        <ValidatorField rules={rules.email} value="email@email.com">
-          {({ isValid, message }) => (
-            <>
-              {!isValid && <div>{message}</div>}
-            </>
-          )}
-        </ValidatorField>
-      </ValidatorWrapper>
-    ), container);
-  });
-
-  const validateResult = validator.current.validate();
-
-  expect(validateResult.isValid).toBe(true);
-  expect(validateResult.message).toBe('');
-});
-
-it('check custom rule message function', () => {
-  const validator = React.createRef();
-  const rule = [{
-    rule: (value) => value !== 'test',
-    message: (value) => `test message ${value}`,
-  }];
-  act(() => {
-    render((
-      <ValidatorWrapper ref={validator}>
-        <ValidatorField rules={rule} value="test">
-          {({ isValid, message }) => (
-            <>
-              {!isValid && <div>{message}</div>}
-            </>
-          )}
-        </ValidatorField>
-      </ValidatorWrapper>
-    ), container);
-  });
-
-  const validateResult = validator.current.validate();
-
-  expect(validateResult.isValid).toBe(false);
-  expect(validateResult.message).toBe('test message test');
-});

package/src/validator-wrapper.jsx

@@ -1,63 +0,0 @@
-/* eslint react/sort-comp: [0], camelcase: [0] */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Context from './context';
-import Validator from './validator';
-
-class ValidatorWrapper extends Component {
-  fields = [];
-
-  constructor(...args) {
-    super(...args);
-    this.registerField = this.registerField.bind(this);
-    this.unregisterField = this.unregisterField.bind(this);
-  }
-
-  componentWillUnmount() {
-    this.fields = [];
-  }
-
-  registerField(field) {
-    if (field && !this.fields.includes(field)) {
-      this.fields.push(field);
-    }
-  }
-
-  unregisterField(field) {
-    const index = this.fields.indexOf(field);
-    if (index > -1) this.fields.splice(index, 1);
-  }
-
-  getField(id) {
-    return this.fields.find((field) => field.props.id === id) || null;
-  }
-
-  validate() {
-    const validator = new Validator({ stopAtFirstError: this.props.stopAtFirstError });
-    this.fields.forEach((comp) => {
-      validator.addField(comp.props);
-    });
-    return validator.validate();
-  }
-
-  render() {
-    return (
-      <Context.Provider
-        value={{ registerField: this.registerField, unregisterField: this.unregisterField }}
-      >
-        {this.props.children}
-      </Context.Provider>
-    );
-  }
-}
-
-ValidatorWrapper.propTypes = {
-  children: PropTypes.node.isRequired,
-  stopAtFirstError: PropTypes.bool,
-};
-
-ValidatorWrapper.defaultProps = {
-  stopAtFirstError: false,
-};
-
-export default ValidatorWrapper;

package/src/validator-wrapper.test.js

@@ -1,174 +0,0 @@
-/* eslint-env jest */
-/* globals shallow */
-/* eslint react/jsx-filename-extension: [0] */
-import React from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
-import { act } from 'react-dom/test-utils';
-
-import ValidatorWrapper from './validator-wrapper';
-import ValidatorField from './validator-field';
-import rules from './rules';
-
-let container = null;
-beforeEach(() => {
-  container = document.createElement('div');
-  document.body.appendChild(container);
-});
-
-afterEach(() => {
-  unmountComponentAtNode(container);
-  container.remove();
-  container = null;
-});
-
-it('render without child', () => {
-  expect(() => shallow(<ValidatorWrapper />)).toThrowError();
-});
-
-it('check wrapper validator', () => {
-  const validator = React.createRef();
-  act(() => {
-    render((
-      <ValidatorWrapper ref={validator}>
-        <ValidatorField rules={[]} />
-        <ValidatorField rules={[]} />
-        <ValidatorField rules={[]} />
-        <ValidatorField rules={[]} />
-        <ValidatorField rules={[]} />
-        <ValidatorField rules={[]} />
-      </ValidatorWrapper>
-    ), container);
-  });
-
-  expect(typeof validator.current).toBe('object');
-  expect(typeof validator.current.validate).toBe('function');
-});
-
-it('check getField validator', () => {
-  const validator = React.createRef();
-  act(() => {
-    render((
-      <ValidatorWrapper ref={validator}>
-        <ValidatorField rules={[]} id="test" />
-        <ValidatorField rules={[]} id="test-fields" />
-      </ValidatorWrapper>
-    ), container);
-  });
-
-  expect(typeof validator.current.getField).toBe('function');
-  const field = validator.current.getField('test');
-
-  expect(typeof field.validate).toBe('function');
-  const fieldValidate = field.validate();
-
-  expect(fieldValidate.isValid).toBe(true);
-  expect(fieldValidate.message).toBe('');
-});
-
-it('check getField undefined field', () => {
-  const validator = React.createRef();
-  act(() => {
-    render((
-      <ValidatorWrapper ref={validator}>
-        <ValidatorField rules={[]} id="test-empty-field" />
-      </ValidatorWrapper>
-    ), container);
-  });
-
-  const field = validator.current.getField('8');
-  expect(field).toBe(null);
-});
-
-it('check stopAtFirstError validator', () => {
-  const validator = React.createRef();
-  act(() => {
-    render((
-      <ValidatorWrapper ref={validator} stopAtFirstError>
-        <ValidatorField rules={[]} value="test" />
-        <ValidatorField rules={rules.email} value="test" />
-        <ValidatorField rules={rules.password} value="" />
-      </ValidatorWrapper>
-    ), container);
-  });
-
-  const fieldValidate = validator.current.validate();
-
-  expect(fieldValidate.isValid).toBe(false);
-  expect(fieldValidate.message).toBe('Email is invalid');
-  expect(fieldValidate.errors.length).toBe(1);
-});
-
-it('check unregisterField, registerField', () => {
-  const validator = React.createRef();
-  act(() => {
-    render((
-      <ValidatorWrapper ref={validator}>
-        <ValidatorField rules={[]} id="test-register-field" />
-      </ValidatorWrapper>
-    ), container);
-  });
-
-  expect(typeof validator.current.registerField).toBe('function');
-  expect(typeof validator.current.registerField(1)).toBe('undefined');
-  expect(typeof validator.current.registerField()).toBe('undefined');
-
-  expect(typeof validator.current.unregisterField).toBe('function');
-  expect(typeof validator.current.unregisterField(1)).toBe('undefined');
-  expect(typeof validator.current.unregisterField()).toBe('undefined');
-});
-
-it('check filed in field', () => {
-  const validator = React.createRef();
-  act(() => {
-    render((
-      <ValidatorWrapper ref={validator}>
-        <ValidatorField rules={[]}>
-          <ValidatorField rules={[]} id="check-validate-field-1" />
-          <ValidatorField rules={[]} id="check-validate-field-2" />
-        </ValidatorField>
-      </ValidatorWrapper>
-    ), container);
-  });
-
-  expect(typeof validator.current).toBe('object');
-  expect(typeof validator.current.validate).toBe('function');
-  const result = validator.current.validate();
-  expect(result.isValid).toBe(true);
-});
-
-it('check wrapper in wrapper', () => {
-  const validatorOut = React.createRef();
-  const validatorIn = React.createRef();
-  act(() => {
-    render((
-      <ValidatorWrapper ref={validatorOut}>
-        <ValidatorField rules={rules.email} value="" />
-        <ValidatorWrapper ref={validatorIn}>
-          <ValidatorField rules={rules.password} value="successpasswword" />
-        </ValidatorWrapper>
-      </ValidatorWrapper>
-    ), container);
-    expect(validatorIn.current.validate().isValid).toBe(true);
-    expect(validatorOut.current.validate().isValid).toBe(false);
-  });
-});
-
-it('check two validators', () => {
-  const validatorSuccess = React.createRef();
-  const validatorFailed = React.createRef();
-  act(() => {
-    render((
-      <>
-        <ValidatorWrapper ref={validatorSuccess}>
-          <ValidatorField rules={rules.password} value="successpasswword" />
-        </ValidatorWrapper>
-        <ValidatorWrapper ref={validatorFailed}>
-          <ValidatorField rules={rules.email} value="" />
-        </ValidatorWrapper>
-      </>
-    ), container);
-  });
-
-  expect(validatorFailed.current.validate().isValid).toBe(false);
-  expect(validatorSuccess.current.validate().isValid).toBe(true);
-});

package/src/validator.js

@@ -1,82 +0,0 @@
-// eslint-disable-next-line max-classes-per-file
-export class Field {
-  constructor({
-    rules,
-    required,
-    value,
-    id,
-  }) {
-    this.rules = rules;
-    this.required = required;
-    this.value = value;
-    this.id = id;
-  }
-
-  validate() {
-    let isValid = true;
-    let message = '';
-    const {
-      rules,
-      value,
-      required,
-      id,
-    } = this;
-
-    const isEmptyValue = !value && parseFloat(value) !== 0;
-
-    if (!rules.length || (isEmptyValue && required === false)) {
-      return { isValid, message, id };
-    }
-    rules.forEach((instance) => {
-      if (isValid) {
-        isValid = instance.rule(value);
-        if (!isValid) {
-          ({ message } = instance);
-          if (typeof message === 'function') message = message(value);
-        }
-      }
-    });
-    return { isValid, message, id };
-  }
-}
-
-export default class Validator {
-  constructor(params) {
-    this.params = params || {};
-    this.fields = [];
-  }
-
-  addField(params) {
-    const field = new Field(params);
-    this.fields.push(field);
-    return field;
-  }
-
-  removeField(field) {
-    const index = this.fields.indexOf(field);
-    if (index > -1) this.fields.splice(index, 1);
-  }
-
-  getField(id) {
-    return this.fields.find((field) => field.id === id) || null;
-  }
-
-  validate() {
-    let prevResult;
-    const statuses = this.fields.map((field) => {
-      if (this.params.stopAtFirstError && prevResult && prevResult.isValid === false) {
-        return null;
-      }
-      prevResult = field.validate();
-      return prevResult;
-    });
-
-    const errors = statuses.filter((inst) => inst && inst.isValid === false);
-
-    if (errors.length) {
-      const { isValid, message } = errors[0];
-      return { isValid, message, errors };
-    }
-    return { isValid: true, message: '' };
-  }
-}

package/src/validator.test.js

@@ -1,36 +0,0 @@
-/* eslint-env jest */
-
-import Validator from './validator';
-import { rules } from './index';
-
-it('check normal create validator', () => {
-  const validator = new Validator();
-  expect(typeof validator).toBe('object');
-  expect(typeof validator.validate).toBe('function');
-});
-
-it('check normal add and remove fields', () => {
-  const validator = new Validator({ stopAtFirstError: true });
-  const fieldPassword = validator.addField({
-    rules: rules.password,
-    value: '',
-    id: 'for-remove',
-  });
-
-  expect(typeof fieldPassword).toBe('object');
-
-  const fieldSearchPassword = validator.getField('for-remove');
-
-  expect(typeof fieldSearchPassword).toBe('object');
-  expect(typeof fieldSearchPassword.validate).toBe('function');
-  expect(fieldPassword === fieldSearchPassword).toBe(true);
-
-  const resultRemove = validator.removeField(fieldPassword);
-  expect(resultRemove).toBe(undefined);
-
-  const resultRemoveUndefined = validator.removeField();
-  expect(resultRemoveUndefined).toBe(undefined);
-
-  const newFieldSearchPassword = validator.getField('for-remove');
-  expect(newFieldSearchPassword === null).toBe(true);
-});

package/webpack.config.js

@@ -1,32 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  entry: './src/index.js',
-  output: {
-    path: path.resolve(__dirname, 'build'),
-    filename: 'index.js',
-    libraryTarget: 'commonjs2',
-  },
-  resolve: {
-    extensions: ['.js', '.jsx'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)(\?.*$|$)/,
-        exclude: [/node_modules/, /bower_components/],
-        include: path.resolve(__dirname, 'src'),
-        use: {
-          loader: 'babel-loader',
-          options: {
-            babelrc: true,
-          },
-        },
-      },
-    ],
-  },
-  externals: {
-    react: 'commonjs react',
-    'prop-types': 'commonjs prop-types',
-  },
-};