gform-react 2.5.4 → 2.6.2

package/native/dist/esm/index.development.js

@@ -1,592 +1,2 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import React, { useContext, createContext, useSyncExternalStore, useRef, useCallback, useEffect, forwardRef, useMemo, memo } from 'react';
-import '@babel/runtime/helpers/esm/defineProperty';
-import { TextInput } from 'react-native';
-
-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 generateId = () => (+new Date()).toString(36) + (1 - Math.random()).toString(36).substring(2, 16);
-const _buildFormInitialValues = (rows = []) => {
-  const fields = {};
-  if (!Array.isArray(rows)) rows = [rows];
-  for (const row of rows) {
-    const inputConfigs = _findInputs(row);
-    inputConfigs.forEach(config => {
-      if (fields[config.formKey]) {
-        console.warn(`DEV ONLY - [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: generateId()
-      };
-      Object.keys(fields[config.formKey]).forEach(key => {
-        if (typeof fields[config.formKey][key] === 'undefined') delete fields[config.formKey][key];
-      });
-    });
-  }
-  return {
-    fields: fields,
-    key: generateId()
-  };
-};
-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, exclude = []) => {
-  for (const key in validity) {
-    if (exclude.includes(key)) continue;
-    if (key !== 'valid' && validity[key]) {
-      return key;
-    }
-  }
-};
-const _checkTypeMismatch = input => {
-  var _input$value;
-  const value = (_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.toString().trim();
-  if (!value) return false;
-  switch (input.type) {
-    case 'email':
-      return !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
-    case 'url':
-      try {
-        new URL(value);
-        return false;
-      } catch (_unused) {
-        return true;
-      }
-    case 'tel':
-      return !/^\+?[0-9\s\-().]{7,}$/.test(value);
-    default:
-      return false;
-  }
-};
-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 || 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) || fields[key]);
-    }
-  }
-  return data;
-};
-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 || 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 !== null && e !== void 0 && e.target) {
-    if (Object.hasOwn(typeValueDict, e.target.type)) return e.target[typeValueDict[e.target.type]];
-    return e.target.value;
-  }
-  return (e === null || e === void 0 ? void 0 : e.value) || (isObject(unknown) ? unknown.value : unknown);
-};
-const _checkResult = (handlerResult, value) => typeof handlerResult === 'boolean' ? handlerResult : typeof value === 'string' ? typeof handlerResult === 'string' ? !new RegExp(handlerResult).test(value) : !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] ? _objectSpread(_objectSpread({}, target[key]), next[key]) : next[key];
-    }
-  }
-  return _merge(target, ...nodes);
-};
-
-let handlersMap;
-let validityMap;
-{
-  handlersMap = {
-    minLength: 'withMinLengthMessage',
-    maxLength: 'withMaxLengthMessage',
-    required: 'withRequiredMessage',
-    pattern: 'withPatternMismatchMessage',
-    min: 'withRangeUnderflowMessage',
-    max: 'withRangeOverflowMessage',
-    step: 'withStepMismatchMessage',
-    type: 'withTypeMismatchMessage'
-  };
-  validityMap = {
-    tooShort: 'minLength',
-    valueMissing: 'required',
-    tooLong: 'maxLength',
-    patternMismatch: 'pattern',
-    rangeOverflow: 'max',
-    rangeUnderflow: 'min',
-    stepMismatch: 'step',
-    typeMismatch: 'type'
-  };
-}
-
-const useFormHandlers = (getState, setState, validators = {}, optimized = false) => {
-  const _viHandler = (input, e) => {
-    if (!input) return;
-    const element = e && e.target;
-    const hasInitialValue = !input.dirty && input.value && !input.touched;
-    if (!element && !hasInitialValue) return;
-    if (typeof document !== 'undefined' && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)) {
-      if (!input.checkValidity) input.checkValidity = () => element.checkValidity();
-      if (hasInitialValue) {
-        _checkInputManually(input);
-        _dispatchChanges(input, input.formKey);
-        return;
-      }
-      element.setCustomValidity('');
-      const exclude = input.type && (input.pattern || hasCustomValidation(input)) ? ['typeMismatch'] : [];
-      const validityKey = _findValidityKey(element.validity, exclude);
-      _validateInput(input, validityKey, v => element.setCustomValidity(v));
-      if (!validityKey && input.error) {
-        element.setCustomValidity(input.errorText || 'error');
-      }
-      _dispatchChanges(input, input.formKey);
-    } else {
-      input.checkValidity = () => _checkInputManually(input);
-      input.checkValidity();
-      _dispatchChanges(input, input.formKey);
-    }
-  };
-  const _checkInputManually = input => {
-    const exclude = input.type && (input.pattern || hasCustomValidation(input)) ? ['typeMismatch'] : [];
-    let validityKey = _findValidityKey({
-      valueMissing: input.required && !input.value || false,
-      typeMismatch: _checkTypeMismatch(input),
-      tooShort: input.minLength && input.value.toString().length < input.minLength || false,
-      tooLong: input.maxLength && input.value.toString().length > input.maxLength || false,
-      patternMismatch: input.pattern && _checkResult(input.pattern, input.value) || false,
-      rangeUnderflow: input.min && Number(input.value) < Number(input.min) || false,
-      rangeOverflow: input.max && Number(input.value) > Number(input.max) || false
-    }, exclude);
-    if (!validityKey && input.error) {
-      validityKey = 'customError';
-    }
-    _validateInput(input, validityKey);
-    return !input.error;
-  };
-  const _updateInputHandler = (input, e, unknown) => {
-    input.value = _extractValue(e, unknown);
-    _viHandler(input, e);
-  };
-  const _validateInput = (input, validityKey, setValidity) => {
-    const inputValidator = validators[input.validatorKey || input.formKey] || validators['*'];
-    {
-      if (validityKey && !(inputValidator !== null && inputValidator !== void 0 && inputValidator.hasConstraint(validityKey))) {
-        if (validityKey === 'typeMismatch') console.warn(`DEV ONLY - [Missing Validator] - the input '${input.formKey}' has described the constraint '${validityMap[validityKey]}' however, a correspond validator / custom validation / pattern validator are missing.\nadd '${handlersMap[validityMap[validityKey]]}' or 'withCustomValidation' or '${handlersMap[validityMap.patternMismatch]}' to the input validator.\nexample:\nconst validators: GValidators = {\n\temail: new GValidator().withPatternMismatchMessage('pattern mismatch'),\n\t...\n}\n\nor either remove the constraint '${validityMap[validityKey]}' from the input props`);else console.warn(`DEV ONLY - [Missing Validator] - the input '${input.formKey}' has described the constraint '${validityMap[validityKey]}' however, a correspond validator is missing.\nadd '${handlersMap[validityMap[validityKey]]}' to the input validator.\nexample:\nconst validators: GValidators = {\n\temail: new GValidator().withPatternMismatchMessage('pattern mismatch'),\n\t...\n}\n\nor either remove the constraint '${validityMap[validityKey]}' from the input props`);
-      }
-    }
-    if (inputValidator) {
-      __validateInput(input, inputValidator, validityKey, setValidity);
-    }
-    input.touched = true;
-  };
-  const _dispatchChanges = (changes, key) => setState(prev => {
-    if (key) {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        fields: _objectSpread(_objectSpread({}, prev.fields), {}, {
-          [key]: _objectSpread(_objectSpread({}, prev.fields[key]), changes)
-        })
-      });
-    }
-    return _objectSpread(_objectSpread({}, prev), changes);
-  });
-  const __validateInput = (input, inputValidator, validityKey, setValidity) => {
-    const fields = getState().fields;
-    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, 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, 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);
-          if (setValidity) {
-            setValidity(input.errorText);
-          }
-        };
-        validateAsync();
-      });
-    }
-  };
-  const hasCustomValidation = input => {
-    const validator = validators[input.validatorKey || input.formKey] || validators['*'];
-    return validator && (validator.asyncHandlers.length > 0 || validator.handlers.length > 0);
-  };
-  return {
-    _updateInputHandler,
-    _viHandler,
-    _dispatchChanges,
-    optimized,
-    _createInputChecker: _checkInputManually
-  };
-};
-
-const GFormContext = createContext({});
-const GFormContextProvider = ({
-  children,
-  initialState,
-  validators,
-  optimized
-}) => {
-  const stateRef = useRef(initialState);
-  const listeners = useRef(new Set());
-  const setState = useCallback(updater => {
-    stateRef.current = typeof updater === 'function' ? updater(stateRef.current) : updater;
-    listeners.current.forEach(l => l());
-  }, []);
-  const handlers = useFormHandlers(() => stateRef.current, setState, validators, optimized);
-  const getState = useCallback(() => stateRef.current, []);
-  const subscribe = useCallback(listener => {
-    listeners.current.add(listener);
-    return () => listeners.current.delete(listener);
-  }, []);
-  useEffect(() => {
-    for (const fieldKey in initialState.fields) {
-      initialState.fields[fieldKey].dispatchChanges = changes => handlers._dispatchChanges(changes, fieldKey);
-    }
-  }, []);
-  const store = useRef({
-    getState,
-    setState,
-    subscribe,
-    handlers
-  });
-  return React.createElement(GFormContext.Provider, {
-    value: store.current
-  }, children);
-};
-const useFormStore = () => {
-  const store = useContext(GFormContext);
-  if (!store) throw new Error('useGFormStore must be used within `GForm` component');
-  return store;
-};
-const useFormSelector = selector => {
-  const store = useFormStore();
-  return useSyncExternalStore(store.subscribe, () => selector(store.getState()), () => selector(store.getState()));
-};
-function createSelector(selectors, combiner) {
-  let lastArgs = [];
-  let lastResult;
-  return state => {
-    const args = selectors.map(fn => fn(state));
-    if (lastArgs.length === args.length && args.every((val, i) => val === lastArgs[i])) {
-      return lastResult;
-    }
-    lastArgs = args;
-    lastResult = combiner(...args);
-    return lastResult;
-  };
-}
-
-const selectFields = [state => state.fields];
-const selectFirstInvalidField = createSelector(selectFields, fields => {
-  for (const f in fields) {
-    if (fields[f].error) {
-      return true;
-    }
-  }
-  return false;
-});
-const makeSelectFields = (keys = []) => createSelector(selectFields, fields => {
-  const selected = keys.map(key => fields[key]).filter(Boolean);
-  return selected.length ? selected : null;
-});
-
-const _excluded$1 = ["stateRef", "children", "onInit", "el"],
-  _excluded2 = ["children", "validators"];
-const FormRenderer = forwardRef((_ref, ref) => {
-  let {
-      stateRef,
-      children,
-      onInit,
-      el: El
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded$1);
-  const {
-    getState,
-    handlers
-  } = useFormStore();
-  const isFormInvalid = useFormSelector(selectFirstInvalidField);
-  const getFormState = useCallback(() => {
-    const fields = getState().fields;
-    const formState = _objectSpread(_objectSpread({}, fields), {}, {
-      isValid: !isFormInvalid,
-      isInvalid: isFormInvalid,
-      toRawData: options => _toRawData(fields, options),
-      toURLSearchParams: _toURLSearchParams,
-      checkValidity: () => {
-        for (const i in fields) {
-          const valid = fields[i].checkValidity();
-          if (!valid) {
-            return false;
-          }
-        }
-        return true;
-      },
-      dispatchChanges: changes => handlers._dispatchChanges({
-        fields: _merge({}, fields, changes)
-      })
-    });
-    if (stateRef) stateRef.current = formState;
-    return formState;
-  }, [isFormInvalid]);
-  const formComponent = useMemo(() => {
-    const state = getFormState();
-    const formChildren = typeof children === 'function' ? children(state) : children;
-    return React.createElement(El, _extends({}, rest, {
-      ref: ref
-    }), formChildren);
-  }, [getFormState, children]);
-  useEffect(() => {
-    const state = getFormState();
-    if (onInit) {
-      const changes = onInit(state);
-      if (changes) {
-        const _handler = _c => handlers._dispatchChanges({
-          fields: _merge({}, state, _c)
-        });
-        if (changes instanceof Promise) {
-          changes.then(_handler);
-        } else _handler(changes);
-      }
-    }
-    const dispatchers = {};
-    const fields = getState().fields;
-    for (const fieldKey in fields) {
-      dispatchers[fieldKey] = {
-        dispatchChanges: changes => handlers._dispatchChanges(changes, fieldKey),
-        checkValidity: () => {
-          const result = handlers._createInputChecker(state[fieldKey]);
-          handlers._dispatchChanges(state[fieldKey], fieldKey);
-          return result;
-        }
-      };
-      const field = fields[fieldKey];
-      if (!field.value) continue;
-      handlers._viHandler(field);
-    }
-    handlers._dispatchChanges({
-      fields: _merge(dispatchers, state)
-    });
-  }, [getFormState]);
-  return formComponent;
-});
-const RNGForm = forwardRef((_ref2, ref) => {
-  let {
-      children,
-      validators
-    } = _ref2,
-    props = _objectWithoutProperties(_ref2, _excluded2);
-  const initialState = useMemo(() => {
-    return _buildFormInitialValues(typeof children === 'function' ? children({}) : children);
-  }, [children]);
-  return React.createElement(GFormContextProvider, {
-    key: initialState.key,
-    initialState: initialState,
-    validators: validators
-  }, React.createElement(FormRenderer, _extends({
-    ref: ref
-  }, props), children));
-});
-
-const _excluded = ["formKey", "element", "type", "fetch", "fetchDeps", "debounce", "defaultValue", "validatorKey", "value"];
-const _RNGInput = forwardRef((_ref, ref) => {
-  let {
-      formKey,
-      element,
-      type,
-      fetch,
-      fetchDeps,
-      debounce = 300,
-      defaultValue,
-      validatorKey,
-      value
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  const inputState = useFormSelector(state => state.fields[formKey]);
-  const store = useFormStore();
-  const _element = useMemo(() => {
-    const value = inputState.value || '';
-    const _props = _objectSpread(_objectSpread({}, rest), {}, {
-      value,
-      inputMode: type,
-      ref
-    });
-    _props.onEndEditing = rest.onEndEditing ? e => {
-      store.handlers._viHandler(inputState);
-      rest.onEndEditing(e);
-    } : () => {
-      store.handlers._viHandler(inputState);
-    };
-    _props.onChangeText = rest.onChangeText ? e => {
-      store.handlers._updateInputHandler(inputState, undefined, {
-        value: e
-      });
-      rest.onChangeText(e);
-    } : e => {
-      store.handlers._updateInputHandler(inputState, undefined, {
-        value: e
-      });
-    };
-    if (!inputState.touched) {
-      _props.onFocus = rest.onFocus ? e => {
-        rest.onFocus(e);
-        inputState.dispatchChanges({
-          touched: true
-        });
-      } : () => {
-        inputState.dispatchChanges({
-          touched: true
-        });
-      };
-    }
-    if (element) {
-      return element(inputState, _props);
-    }
-    return React.createElement(TextInput, _props);
-  }, [inputState, element]);
-  const _fetchDeps = useFormSelector(makeSelectFields(fetchDeps));
-  const stableFetchDeps = useMemo(() => JSON.stringify(_fetchDeps), [_fetchDeps]);
-  useEffect(() => {
-    if (fetch) {
-      _debounce(debounce, `${inputState.gid}-fetch`).then(() => {
-        const res = fetch(inputState, store.getState().fields);
-        if (res instanceof Promise) {
-          res.then(state => state && store.handlers._dispatchChanges(state, formKey));
-        } else if (res) {
-          store.handlers._dispatchChanges(res, formKey);
-        }
-      });
-    }
-  }, [stableFetchDeps]);
-  return _element;
-});
-const RNGInput = memo(_RNGInput);
-
-export { RNGForm, RNGInput };
-//# sourceMappingURL=index.development.js.map
+export { RNGForm } from './RNGForm.development.js';
+export { RNGInput } from './RNGInput.development.js';

package/native/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { RNGForm } from './RNGForm.production';
-export { RNGInput } from './RNGInput.production';
+export { RNGForm } from './RNGForm.production.js';
+export { RNGInput } from './RNGInput.production.js';