gform-react 1.2.0 → 1.4.0

package/README.md

@@ -2,8 +2,8 @@
 
 ![gform-react](https://gform-react.onrender.com/gform-logo.png)
 
-[![gzip size](http://img.badgesize.io/https://unpkg.com/gform-react@latest/dist/index.esm.js?label=minified_size)](https://unpkg.com/gform-react@latest/dist/index.esm.js)
-[![gzip size](http://img.badgesize.io/https://unpkg.com/gform-react@latest/dist/index.esm.js?compression=gzip)](https://unpkg.com/gform-react@latest/dist/index.esm.js)
+[![gzip size](http://img.badgesize.io/https://unpkg.com/gform-react@latest/cjs/gform-react.cjs.js?label=minified_size)](https://unpkg.com/gform-react@latest/dist/cjs/gform-react.cjs.js)
+[![gzip size](http://img.badgesize.io/https://unpkg.com/gform-react@latest/cjs/gform-react.cjs.js?compression=gzip)](https://unpkg.com/gform-react@latest/dist/cjs/gform-react.cjs.js)
 ![npm peer dependency version](https://img.shields.io/npm/dependency-version/gform-react/peer/react)
 ![npm peer dependency version](https://img.shields.io/npm/dependency-version/gform-react/peer/react-dom)
 [![NPM](https://img.shields.io/npm/l/gform-react)](https://unpkg.com/gform-react@latest/LICENSE.md)
@@ -12,6 +12,12 @@
 it doesn't matter which UI library you're using,
 it only cares about the form and the inputs inside.
 
+## Pros
+* Lightweight, no dependencies
+* Based on native form and constraint validations (can also add custom and async validations)
+* Can be used with any UI library that preserves native form controls (input, button, etc. can also be adjusted to non-native controls)
+* Tree shakeable
+
 ## Docs
 https://gform-react.onrender.com
 
@@ -30,4 +36,4 @@ yarn add gform-react
 ```
 
 #### NOTE:
-react >=16.7.0, react-dom >=16.7.0 are peer dependecies
+react >=16.8.0, react-dom >=16.8.0 are peer dependecies

package/dist/cjs/gform-react.development.js

@@ -0,0 +1,576 @@
+'use strict';
+
+var _extends = require('@babel/runtime/helpers/extends');
+var React = require('react');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+
+const isObject = o => o && typeof o === 'object' && !Array.isArray(o);
+const defaultFieldProps = {
+  text: {
+    value: ''
+  },
+  checkbox: {
+    value: false
+  },
+  number: {
+    value: 0
+  }
+};
+const typeValueDict = {
+  checkbox: 'checked',
+  number: 'valueAsNumber'
+};
+const _buildFormInitialValues = (rows = []) => {
+  const fields = {};
+  if (!Array.isArray(rows)) rows = [rows];
+  rows.forEach(row => {
+    const inputConfigs = _findInputs(row);
+    inputConfigs.forEach(config => {
+      if (fields[config.formKey]) {
+        console.warn(`[Duplicate Keys] - field with key '${config.formKey}' has already been defined.`);
+      }
+      const {
+        required = false,
+        max,
+        maxLength,
+        min,
+        minLength,
+        step,
+        pattern,
+        type = 'text',
+        defaultValue,
+        value,
+        checked,
+        defaultChecked,
+        formKey,
+        debounce,
+        validatorKey
+      } = config;
+      const defaultProps = defaultFieldProps[type] || defaultFieldProps.text;
+      const inputValue = value || defaultValue || checked || defaultChecked || defaultProps.value;
+      fields[config.formKey] = {
+        formKey,
+        type,
+        required,
+        max,
+        maxLength,
+        min,
+        minLength,
+        step,
+        pattern,
+        value: inputValue,
+        validatorKey,
+        debounce,
+        dirty: false,
+        touched: false,
+        gid: Math.random().toString(36)
+      };
+      Object.keys(fields[config.formKey]).forEach(key => {
+        if (typeof fields[config.formKey][key] === 'undefined') delete fields[config.formKey][key];
+      });
+    });
+  });
+  return {
+    fields,
+    loading: false
+  };
+};
+const _findInputs = (root, total = []) => {
+  var _root$props, _root$props2;
+  if (!root) return total;
+  if (Array.isArray(root)) {
+    root.forEach(element => _findInputs(element, total));
+    return total;
+  }
+  if ((_root$props = root.props) !== null && _root$props !== void 0 && _root$props.formKey) {
+    total.push(root.props);
+    return total;
+  }
+  return _findInputs((_root$props2 = root.props) === null || _root$props2 === void 0 ? void 0 : _root$props2.children, total);
+};
+const _findValidityKey = validity => {
+  for (const key in validity) {
+    if (key !== 'valid' && validity[key]) {
+      return key;
+    }
+  }
+};
+const hasSubmitter = form => {
+  if (!form) return false;
+  for (const element of form) {
+    if (element.type === 'submit') return true;
+  }
+  return false;
+};
+const _checkIfFormIsValid = fields => {
+  for (const f in fields) {
+    if (fields[f].error) {
+      return false;
+    }
+  }
+  return true;
+};
+const _toRawData = (fields, options = {}) => {
+  const data = {};
+  const {
+    include,
+    exclude,
+    transform
+  } = options;
+  if (include) {
+    include.forEach(key => {
+      var _fields$key;
+      return data[key] = (_fields$key = fields[key]) === null || _fields$key === void 0 ? void 0 : _fields$key.value;
+    });
+  } else for (const f in fields) {
+    data[f] = fields[f].value;
+  }
+  exclude === null || exclude === void 0 ? void 0 : exclude.forEach(key => delete data[key]);
+  if (transform) {
+    for (const key in transform) {
+      var _fields$key2;
+      const set = transform[key];
+      data[key] = set((_fields$key2 = fields[key]) === null || _fields$key2 === void 0 ? void 0 : _fields$key2.value);
+    }
+  }
+  return data;
+};
+const _toFormData = (form, options) => {
+  if (!form) return new FormData();
+  if (options) {
+    const {
+      exclude,
+      include,
+      transform
+    } = options;
+    let formData;
+    if (include) {
+      formData = new FormData();
+      include.forEach(key => {
+        var _form;
+        return formData.set(key, (_form = form[key]) === null || _form === void 0 ? void 0 : _form.value);
+      });
+    } else {
+      formData = new FormData(form);
+      exclude === null || exclude === void 0 ? void 0 : exclude.forEach(key => formData.delete(key));
+    }
+    if (transform) {
+      for (const key in transform) {
+        var _form$key;
+        const set = transform[key];
+        formData.set(key, set((_form$key = form[key]) === null || _form$key === void 0 ? void 0 : _form$key.value));
+      }
+    }
+    return formData;
+  }
+  return new FormData(form);
+};
+function _toURLSearchParams(options) {
+  let data;
+  if (options) {
+    const {
+      exclude,
+      include,
+      transform
+    } = options;
+    if (include) {
+      data = {};
+      include.forEach(key => {
+        var _this$key;
+        return data[key] = (_this$key = this[key]) === null || _this$key === void 0 ? void 0 : _this$key.value;
+      });
+    } else {
+      data = this.toRawData();
+      exclude === null || exclude === void 0 ? void 0 : exclude.forEach(key => delete data[key]);
+    }
+    if (transform) {
+      for (const key in transform) {
+        var _this$key2;
+        const set = transform[key];
+        data[key] = set((_this$key2 = this[key]) === null || _this$key2 === void 0 ? void 0 : _this$key2.value);
+      }
+    }
+  } else data = this.toRawData();
+  return new URLSearchParams(data);
+}
+function __debounce(timeout, id) {
+  return new Promise(resolve => {
+    var _this$id;
+    if ((_this$id = this[id]) !== null && _this$id !== void 0 && _this$id.timerId) clearTimeout(this[id].timerId);
+    const timerId = setTimeout(() => resolve(), timeout);
+    if (this[id]) {
+      this[id].timerId = timerId;
+    } else this[id] = {
+      timerId
+    };
+  });
+}
+const _debounce = __debounce.bind({});
+const _extractValue = (e, unknown) => {
+  if (e.target) {
+    if (Object.hasOwn(typeValueDict, e.target.type)) return e.target[typeValueDict[e.target.type]];
+    return e.target.value;
+  }
+  return e.value || (isObject(unknown) ? unknown.value : unknown);
+};
+const _checkResult = (handlerResult, value) => typeof handlerResult === 'boolean' ? handlerResult : typeof value === 'string' ? !handlerResult.test(value) : false;
+const _merge = (target = {}, ...nodes) => {
+  if (!nodes.length) return target;
+  const next = nodes.shift();
+  if (isObject(next)) {
+    for (const key in next) {
+      target[key] = target[key] ? {
+        ...target[key],
+        ...next[key]
+      } : next[key];
+    }
+  }
+  return _merge(target, ...nodes);
+};
+
+const useForm = (children, validators = {}, optimized = false) => {
+  const initialValues = React.useMemo(() => _buildFormInitialValues(typeof children === 'function' ? children({}) : children), [children]);
+  const [state, setState] = React.useState(initialValues);
+  const _validateInputHandler = (input, e) => {
+    if (!input) return;
+    const element = e.target;
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+      if (!input.checkValidity) input.checkValidity = () => element.checkValidity();
+      element.setCustomValidity('');
+      const validityKey = _findValidityKey(element.validity);
+      _validateInput(input, validityKey, v => element.setCustomValidity(v));
+      if (!validityKey && input.error) {
+        element.setCustomValidity(input.errorText || 'error');
+      }
+    } else {
+      _validateInput(input, input.required && !input.value ? 'valueMissing' : undefined);
+    }
+  };
+  const _updateInputHandler = (key, e, unknown) => {
+    const value = _extractValue(e, unknown);
+    _updateInput(key, value);
+    _validateInputHandler(state.fields[key], e);
+  };
+  const _validateInput = (input, validityKey, setValidity) => {
+    const inputValidator = validators[input.validatorKey || input.formKey] || validators['*'];
+    inputValidator && __validateInput(input, inputValidator, validityKey, setValidity);
+    input.touched = true;
+    _dispatchChanges(input, input.formKey);
+  };
+  const _updateInput = (key, value) => {
+    const input = state.fields[key];
+    input.value = value;
+    input.dirty = true;
+  };
+  const _dispatchChanges = (changes, key) => setState(prev => {
+    if (key) {
+      return {
+        ...prev,
+        fields: {
+          ...prev.fields,
+          [key]: {
+            ...prev.fields[key],
+            ...changes
+          }
+        }
+      };
+    }
+    return {
+      ...prev,
+      ...changes
+    };
+  });
+  const __validateInput = (input, inputValidator, validityKey, setValidity) => {
+    for (const index in inputValidator.constraintHandlers) {
+      const result = inputValidator.constraintHandlers[index](input, validityKey);
+      input.error = _checkResult(result, input.value);
+      if (input.error) return;
+    }
+    for (const index in inputValidator.handlers) {
+      const result = inputValidator.handlers[index](input, state.fields);
+      input.error = _checkResult(result, input.value);
+      if (input.error) return;
+    }
+    input.errorText = '';
+    if (inputValidator.asyncHandlers.length) {
+      input.error = true;
+      _debounce(input.debounce || 300, `${input.gid}-async`).then(() => {
+        const validateAsync = async () => {
+          for (const index in inputValidator.asyncHandlers) {
+            const result = await inputValidator.asyncHandlers[index](input, state.fields);
+            input.error = _checkResult(result, input.value);
+            if (input.error) break;
+          }
+          if (!input.error) input.errorText = '';
+          _dispatchChanges({
+            error: input.error,
+            errorText: input.errorText
+          }, input.formKey);
+          setValidity === null || setValidity === void 0 ? void 0 : setValidity(input.errorText);
+        };
+        validateAsync();
+      });
+    }
+  };
+  return {
+    state,
+    _updateInputHandler,
+    _validateInputHandler,
+    _dispatchChanges,
+    optimized
+  };
+};
+
+const gFormContext = React.createContext({
+  state: {
+    fields: {},
+    loading: false
+  },
+  _updateInputHandler: () => null,
+  _validateInputHandler: () => null,
+  _dispatchChanges: () => null,
+  optimized: false
+});
+const useGenericFormContext = () => React.useContext(gFormContext);
+const GFormContextProvider = gFormContext.Provider;
+
+const GForm = ({
+  loader = React.createElement("div", null, "loading"),
+  stateRef,
+  onSubmit,
+  onChange,
+  children,
+  validators,
+  onInit,
+  optimized,
+  ...rest
+}) => {
+  const formRef = React.useRef(null);
+  const values = useForm(children, validators, optimized);
+  const {
+    state,
+    _updateInputHandler,
+    _validateInputHandler,
+    _dispatchChanges
+  } = values;
+  const formState = React.useMemo(() => {
+    const _isFormValid = _checkIfFormIsValid(state.fields);
+    const formState = {
+      ...state.fields,
+      isValid: _isFormValid,
+      isInvalid: !_isFormValid,
+      loading: state.loading,
+      toRawData: options => _toRawData(state.fields, options),
+      toFormData: () => _toFormData(formRef.current),
+      toURLSearchParams: _toURLSearchParams,
+      checkValidity: function () {
+        var _formRef$current;
+        this.isValid = ((_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.checkValidity()) || false;
+        this.isInvalid = !this.isValid;
+        return this.isValid;
+      },
+      setLoading: p => _dispatchChanges({
+        loading: typeof p === 'function' ? p(state.loading) : p
+      })
+    };
+    if (stateRef) stateRef.current = formState;
+    return formState;
+  }, [state.fields]);
+  const form = React.useMemo(() => {
+    const formChildren = typeof children === 'function' ? children(formState) : children;
+    const _onSubmit = e => {
+      e.preventDefault();
+      onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formState, e);
+    };
+    return optimized ? React.createElement("form", _extends({}, rest, {
+      ref: formRef,
+      onBlur: e => {
+        _validateInputHandler(state.fields[e.target.name], e);
+      },
+      onInvalid: e => {
+        e.preventDefault();
+        _validateInputHandler(state.fields[e.target.name], e);
+      },
+      onChange: (e, unknown) => {
+        _updateInputHandler(e.target.name, e, unknown);
+        onChange === null || onChange === void 0 ? void 0 : onChange(formState, e);
+      },
+      onSubmit: _onSubmit
+    }), formChildren) : React.createElement("form", _extends({}, rest, {
+      ref: formRef,
+      onSubmit: _onSubmit
+    }), formChildren);
+  }, [formState, children]);
+  React.useEffect(() => {
+    if (!hasSubmitter(formRef.current)) {
+      console.warn(`[No Submit Button] - you have created a form without a button type=submit, this will prevent the onSubmit event from being fired.\nif you have a button with onClick event that handle the submission of the form then ignore this warning\nbut don't forget to manually invoke the checkValidity() function and to check if the form is valid before perfoming any action, for example:\nif (formState.checkValidity()) { \n\t//do somthing\n}\n`);
+    }
+    const dispatchers = Object.keys(state.fields).reduce((fields, key) => {
+      fields[key] = {
+        dispatchChanges: changes => _dispatchChanges(changes, key)
+      };
+      return fields;
+    }, {});
+    if (onInit) {
+      const _handler = _c => {
+        _dispatchChanges({
+          fields: _merge({}, state.fields, dispatchers, _c)
+        });
+      };
+      const changes = onInit(formState);
+      changes instanceof Promise ? changes.then(_handler) : _handler(changes);
+    } else {
+      _dispatchChanges({
+        fields: _merge({}, state.fields, dispatchers)
+      });
+    }
+  }, []);
+  return React.createElement(GFormContextProvider, {
+    value: values
+  }, state.loading ? loader : form);
+};
+
+const GInput = ({
+  formKey,
+  element,
+  title,
+  type,
+  validatorKey,
+  fetch,
+  fetchDeps = [],
+  optimized,
+  defaultChecked,
+  defaultValue,
+  checked,
+  value,
+  debounce = 300,
+  ...rest
+}) => {
+  const {
+    state: {
+      fields
+    },
+    _updateInputHandler,
+    _validateInputHandler,
+    _dispatchChanges,
+    optimized: formOptimized
+  } = useGenericFormContext();
+  const inputState = fields[formKey];
+  const _element = React.useMemo(() => {
+    let value, checked;
+    if (type === 'checkbox') checked = inputState.value || false;else value = inputState.value || '';
+    const _props = {
+      ...rest,
+      type,
+      name: formKey,
+      value,
+      checked,
+      title: title || inputState.errorText
+    };
+    if (!formOptimized || !optimized) {
+      _props.onBlur = e => _validateInputHandler(inputState, e);
+      _props.onInvalid = e => {
+        e.preventDefault();
+        _validateInputHandler(inputState, e);
+      };
+      _props.onChange = (e, unknown) => _updateInputHandler(formKey, e, unknown);
+    }
+    if (element) {
+      return element(inputState, _props);
+    }
+    return React.createElement("input", _props);
+  }, [inputState, element]);
+  const _fetchDeps = React.useMemo(() => fetchDeps.map(key => fields[key].value), [fields]);
+  React.useEffect(() => {
+    if (fetch) {
+      _debounce(debounce, `${inputState.gid}-fetch`).then(() => {
+        const res = fetch(inputState, fields);
+        res instanceof Promise ? res.then(state => state && _dispatchChanges(state, formKey)) : res && _dispatchChanges(res, formKey);
+      });
+    }
+  }, _fetchDeps);
+  return _element;
+};
+
+class GValidator {
+  get handlers() {
+    return this._handlers;
+  }
+  get constraintHandlers() {
+    return this._constraintHandlers;
+  }
+  get asyncHandlers() {
+    return this._asyncHandlers;
+  }
+  constructor(baseValidator) {
+    _defineProperty(this, "_handlers", void 0);
+    _defineProperty(this, "_constraintHandlers", void 0);
+    _defineProperty(this, "_asyncHandlers", void 0);
+    _defineProperty(this, "_track", void 0);
+    const baseHandlers = (baseValidator === null || baseValidator === void 0 ? void 0 : baseValidator.handlers) || [];
+    const baseConstraintHandlers = (baseValidator === null || baseValidator === void 0 ? void 0 : baseValidator.constraintHandlers) || [];
+    const baseHandlersAsync = (baseValidator === null || baseValidator === void 0 ? void 0 : baseValidator.asyncHandlers) || [];
+    this._handlers = new Array().concat(baseHandlers);
+    this._constraintHandlers = new Array().concat(baseConstraintHandlers);
+    this._asyncHandlers = new Array().concat(baseHandlersAsync);
+    {
+      this._track = [];
+    }
+  }
+  withRequiredMessage(message) {
+    return this.__addConstraintValidationHandler('valueMissing', message);
+  }
+  withMaxLengthMessage(message) {
+    return this.__addConstraintValidationHandler('tooLong', message);
+  }
+  withMinLengthMessage(message) {
+    return this.__addConstraintValidationHandler('tooShort', message);
+  }
+  withPatternMismatchMessage(message) {
+    return this.__addConstraintValidationHandler('patternMismatch', message);
+  }
+  withBadInputMessage(message) {
+    return this.__addConstraintValidationHandler('badInput', message);
+  }
+  withRangeUnderflowMessage(message) {
+    return this.__addConstraintValidationHandler('rangeUnderflow', message);
+  }
+  withRangeOverflowMessage(message) {
+    return this.__addConstraintValidationHandler('rangeOverflow', message);
+  }
+  withTypeMismatchMessage(message) {
+    return this.__addConstraintValidationHandler('typeMismatch', message);
+  }
+  withStepMismatchMessage(message) {
+    return this.__addConstraintValidationHandler('stepMismatch', message);
+  }
+  withCustomValidation(handler) {
+    this._handlers.push(handler);
+    return this;
+  }
+  withCustomValidationAsync(handler) {
+    this._asyncHandlers.push(handler);
+    return this;
+  }
+  __addConstraintValidationHandler(validityKey, message) {
+    {
+      if (this._track.includes(validityKey)) {
+        console.warn(`[Duplicate Handlers] - handler for '${validityKey}' has already been defined`);
+      }
+      this._track.push(validityKey);
+    }
+    this._constraintHandlers.push((input, key) => {
+      if (key === validityKey) {
+        input.errorText = typeof message === 'string' ? message : message(input);
+        return true;
+      }
+      return false;
+    });
+    return this;
+  }
+}
+
+exports.GForm = GForm;
+exports.GInput = GInput;
+exports.GValidator = GValidator;
+//# sourceMappingURL=gform-react.development.js.map