use-form
Version:
1,144 lines (1,033 loc) • 110 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("React"));
else if(typeof define === 'function' && define.amd)
define("useForm", ["React"], factory);
else if(typeof exports === 'object')
exports["useForm"] = factory(require("React"));
else
root["useForm"] = factory(root["React"]);
})(window, function(__WEBPACK_EXTERNAL_MODULE_react__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ({
/***/ "../node_modules/nest-deep/lib/flatten.js":
/*!************************************************!*\
!*** ../node_modules/nest-deep/lib/flatten.js ***!
\************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
exports.__esModule = true;
function typeOf(operand) {
return Object.prototype.toString.call(operand).slice(8, -1).toLowerCase();
}
function isArray(array) {
return typeOf(array) === 'array';
}
function isObject(object) {
return typeOf(object) === 'object';
}
var keys = Object.keys;
function flatten(obj) {
if (!isObject(obj)) {
throw new Error();
}
function recur(accumulator, key, value) {
if (isObject(value)) {
var objKeys = keys(value);
if (objKeys.length) {
objKeys.forEach(function (v) {
recur(accumulator, key + "." + v, value[v]);
});
return accumulator;
}
}
if (isArray(value)) {
if (value.length) {
value.forEach(function (v, i) {
recur(accumulator, key + "[" + i + "]", v);
});
return accumulator;
}
}
accumulator[key] = value;
return accumulator;
}
return keys(obj).reduce(function (accumulator, key) { return (__assign(__assign({}, accumulator), recur(accumulator, key, obj[key]))); }, {});
}
exports["default"] = flatten;
/***/ }),
/***/ "../node_modules/nest-deep/lib/index.js":
/*!**********************************************!*\
!*** ../node_modules/nest-deep/lib/index.js ***!
\**********************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
var nested_1 = __webpack_require__(/*! ./nested */ "../node_modules/nest-deep/lib/nested.js");
exports.nested = nested_1["default"];
var flatten_1 = __webpack_require__(/*! ./flatten */ "../node_modules/nest-deep/lib/flatten.js");
exports.flatten = flatten_1["default"];
/***/ }),
/***/ "../node_modules/nest-deep/lib/nested.js":
/*!***********************************************!*\
!*** ../node_modules/nest-deep/lib/nested.js ***!
\***********************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
exports.__esModule = true;
function nested(object) {
if (object === void 0) { object = null; }
if (Object(object) !== object || Array.isArray(object)) {
return object;
}
var regex = /\.?([^.\[\]]+)|\[(\d+)\]/g;
var result = {};
var keys = Object.keys(object).sort();
for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
var key = keys_1[_i];
var cur = result;
var prop = '';
var m = void 0;
// tslint:disable-next-line:no-conditional-assignment
while (m = regex.exec(key)) {
cur = cur[prop] || (cur[prop] = (m[2] ? [] : {}));
prop = m[2] || m[1];
}
cur[prop] = object[key];
}
return result[''] || result;
}
exports["default"] = nested;
/***/ }),
/***/ "./api.ts":
/*!****************!*\
!*** ./api.ts ***!
\****************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var nest_deep__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! nest-deep */ "../node_modules/nest-deep/lib/index.js");
/* harmony import */ var nest_deep__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(nest_deep__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _helpers_get__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./helpers/get */ "./helpers/get.ts");
/* harmony import */ var _helpers_isEmpty__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./helpers/isEmpty */ "./helpers/isEmpty.ts");
/* harmony import */ var _helpers_isEqual__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./helpers/isEqual */ "./helpers/isEqual.ts");
/* harmony import */ var _helpers_isEvent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./helpers/isEvent */ "./helpers/isEvent.ts");
/* harmony import */ var _helpers_noop__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./helpers/noop */ "./helpers/noop.ts");
/* harmony import */ var _helpers_typeOf__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./helpers/typeOf */ "./helpers/typeOf.ts");
var __assign = (undefined && undefined.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
function mapped(map) {
return Array.from(map.entries()).reduce(function (accumulator, _a) {
var _b;
var key = _a[0], value = _a[1];
return (__assign({}, accumulator, (_b = {}, _b[key] = value, _b)));
}, {});
}
var keys = Object.keys;
var Api = /** @class */ (function () {
function Api(_a) {
var _this = this;
var _b = _a.validate, validate = _b === void 0 ? _helpers_noop__WEBPACK_IMPORTED_MODULE_5__["default"] : _b, _c = _a.onSubmit, onSubmit = _c === void 0 ? _helpers_noop__WEBPACK_IMPORTED_MODULE_5__["default"] : _c, _d = _a.initialValues, initialValues = _d === void 0 ? {} : _d, _e = _a.initialErrors, initialErrors = _e === void 0 ? {} : _e;
this.listener = {
on: function (name, callback) { return _this.listeners.set(name, callback); },
off: function (name) { return _this.listeners.delete(name); },
emit: function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
return [2 /*return*/, this.listeners.forEach(function (listener) { return listener(); })];
}); }); },
};
this.listeners = new Map();
this.initialValues = new Map();
this.initialErrors = new Map();
this.fields = new Map();
this.values = new Map();
this.meta = {
errors: new Map(),
touched: new Map(),
validations: new Map(),
};
this.submitting = false;
this.handleReset = function (event) { return __awaiter(_this, void 0, void 0, function () {
var prevValues, prevValueKeys, nextValues_1, nextErrors_1;
var _this = this;
return __generator(this, function (_a) {
prevValues = mapped(this.values);
prevValueKeys = keys(__assign({}, prevValues, Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["flatten"])(prevValues)));
this.values.clear();
this.meta.errors.clear();
this.meta.touched.clear();
if (Object(_helpers_isEvent__WEBPACK_IMPORTED_MODULE_4__["default"])(event)) {
event.preventDefault();
event.stopPropagation();
prevValueKeys.map(function (key) {
_this.setValue(key, _this.getDefaultValue(key));
});
keys(mapped(this.initialErrors)).map(function (key) {
_this.setError(key, _this.getDefaultError(key));
});
}
else if (Object(_helpers_typeOf__WEBPACK_IMPORTED_MODULE_6__["isObject"])(event) && !Object(_helpers_isEmpty__WEBPACK_IMPORTED_MODULE_2__["default"])(event)) {
this.initialValues.clear();
this.initialErrors.clear();
nextValues_1 = Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["flatten"])(event.values);
nextErrors_1 = Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["flatten"])(event.errors);
keys(nextValues_1).map(function (key) {
_this.initialValues.set(key, nextValues_1[key]);
_this.setValue(key, _this.getDefaultValue(key));
});
keys(nextErrors_1).map(function (key) {
_this.initialErrors.set(key, nextErrors_1[key]);
_this.setError(key, nextErrors_1[key]);
});
}
this.listener.emit();
return [2 /*return*/];
});
}); };
this.handleSubmit = function (event) { return __awaiter(_this, void 0, void 0, function () {
var _a, errors, values;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
if (Object(_helpers_isEvent__WEBPACK_IMPORTED_MODULE_4__["default"])(event)) {
event.preventDefault();
event.stopPropagation();
}
this.submitting = true;
return [4 /*yield*/, this.listener.emit()];
case 1:
_b.sent();
this.handleValidate(this.getState().values);
_a = this.getState(), errors = _a.errors, values = _a.values;
if (!(!errors || Object(_helpers_isEmpty__WEBPACK_IMPORTED_MODULE_2__["default"])(errors))) return [3 /*break*/, 3];
return [4 /*yield*/, this.onSubmit(values)];
case 2:
_b.sent();
_b.label = 3;
case 3:
this.submitting = false;
this.listener.emit();
return [2 /*return*/];
}
});
}); };
this.getState = function () {
var errors = Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["nested"])(mapped(_this.meta.errors));
var State = {
fields: Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["nested"])(mapped(_this.fields)),
values: Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["nested"])(mapped(_this.values)),
errors: errors,
touched: Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["nested"])(mapped(_this.meta.touched)),
valid: keys(errors).length === 0,
submitting: _this.submitting,
};
return State;
};
this.getField = function (name) {
return __assign({ value: Object(_helpers_get__WEBPACK_IMPORTED_MODULE_1__["default"])(Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["nested"])(mapped(_this.values)), name, '') }, Object(_helpers_get__WEBPACK_IMPORTED_MODULE_1__["default"])(Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["nested"])(mapped(_this.fields)), name, {}));
};
this.setField = function (name) { return ({
mount: function (_a) {
var _b = _a.type, type = _b === void 0 ? 'text' : _b, _c = _a.validate, validate = _c === void 0 ? _helpers_noop__WEBPACK_IMPORTED_MODULE_5__["default"] : _c, multiple = _a.multiple;
_this.fields.set(name, {
type: type,
name: name,
multiple: multiple,
});
_this.setValue(name, _this.getDefaultValue(name));
var defaultError = _this.getDefaultError(name);
_this.setError(name, defaultError);
_this.setMeta(name, 'validations', validate);
return _this.getField(name);
},
unmount: function () {
_this.fields.delete(name);
_this.values.delete(name);
_this.meta.errors.delete(name);
_this.meta.touched.delete(name);
_this.meta.validations.delete(name);
},
value: function (event) {
var _a;
var value = _this.getValue(name, event);
var state = _this.setValue(name, value);
_this.setError(name);
_this.handleValidate((_a = {},
_a[name] = value,
_a));
_this.listener.emit();
return state;
},
error: function (error) {
var state = _this.setError(name, error);
_this.listener.emit();
return state;
},
meta: function (metaKey, metaValue) {
_this.setMeta(name, metaKey, metaValue);
var state = _this.getField(name);
_this.listener.emit();
return state;
},
}); };
this.getMeta = function (name) {
var State = {
error: Object(_helpers_get__WEBPACK_IMPORTED_MODULE_1__["default"])(Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["nested"])(mapped(_this.meta.errors)), name),
touched: _this.meta.touched.get(name),
validate: _this.meta.validations.get(name),
};
return State;
};
this.setMeta = function (name, metaKey, metaValue) {
if (metaValue) {
_this.meta[metaKey].set(name, metaValue);
}
else {
_this.meta[metaKey].delete(name);
}
return _this.getField(name);
};
this.getDefaultValue = function (name) {
var _a = _this.getField(name), type = _a.type, multiple = _a.multiple;
var defaultValue;
switch (type) {
case 'checkbox':
defaultValue = false;
break;
case 'select':
defaultValue = '';
if (multiple) {
defaultValue = [];
}
break;
default:
defaultValue = '';
break;
}
return Object(_helpers_get__WEBPACK_IMPORTED_MODULE_1__["default"])(Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["nested"])(mapped(_this.initialValues)), name, defaultValue);
};
this.getValue = function (name, event) {
if (Object(_helpers_isEvent__WEBPACK_IMPORTED_MODULE_4__["default"])(event)) {
var _a = event.target, value = _a.value, checked = _a.checked, options = _a.options;
var _b = _this.getField(name), type = _b.type, multiple = _b.multiple;
switch (type) {
case 'checkbox':
case 'radio':
return checked;
case 'select':
if (multiple) {
var selected = [];
if (options && options.length) {
// tslint:disable-next-line:prefer-for-of
for (var index = 0; index < options.length; index++) {
var option = options[index];
if (option.selected) {
selected.push(option.value);
}
}
}
return selected;
}
return value;
default:
return value;
}
}
return event;
};
this.setValue = function (name, value) {
var _a, _b;
if (Array.isArray(value)) {
var prevValues = Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["flatten"])((_a = {},
_a[name] = Object(_helpers_get__WEBPACK_IMPORTED_MODULE_1__["default"])(Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["nested"])(mapped(_this.values)), name),
_a));
var nextValues = Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["flatten"])((_b = {}, _b[name] = value, _b));
if (!Object(_helpers_isEqual__WEBPACK_IMPORTED_MODULE_3__["default"])(prevValues, nextValues)) {
for (var key in prevValues) {
if (prevValues.hasOwnProperty(key)) {
_this.values.delete(key);
}
}
for (var key in nextValues) {
if (nextValues.hasOwnProperty(key)) {
_this.values.set(key, nextValues[key]);
}
}
}
}
_this.values.set(name, value);
return _this.getField(name);
};
this.getDefaultError = function (name) {
return Object(_helpers_get__WEBPACK_IMPORTED_MODULE_1__["default"])(Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["nested"])(mapped(_this.initialErrors)), name);
};
this.setError = function (name, error) {
_this.setMeta(name, 'touched', Boolean(error));
return _this.setMeta(name, 'errors', error);
};
this.handleValidate = function (valuesForValidate) {
if (valuesForValidate === void 0) { valuesForValidate = {}; }
var values = _this.getState().values;
var allValues = __assign({}, values, Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["flatten"])(values));
var errors = Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["flatten"])(_this.validate(allValues) || {});
keys(__assign({}, valuesForValidate, Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["flatten"])(valuesForValidate))).forEach(function (name) {
var value = _this.getField(name).value;
var validate = _this.getMeta(name).validate;
var error = (validate && validate(value, allValues)) || errors[name];
_this.setError(name, error);
});
};
this.validate = validate;
this.onSubmit = onSubmit;
var values = Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["flatten"])(initialValues);
var errors = Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["flatten"])(initialErrors);
keys(values).map(function (key) {
_this.initialValues.set(key, values[key]);
_this.setValue(key, values[key]);
});
keys(errors).map(function (key) {
_this.initialErrors.set(key, errors[key]);
_this.setError(key, errors[key]);
});
}
return Api;
}());
/* harmony default export */ __webpack_exports__["default"] = (Api);
/***/ }),
/***/ "./context.ts":
/*!********************!*\
!*** ./context.ts ***!
\********************/
/*! exports provided: FormProvider, FormConsumer, default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormProvider", function() { return FormProvider; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "FormConsumer", function() { return FormConsumer; });
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
var getField = Object;
var setField = Object;
var getMeta = Object;
var getState = Object;
var FormContext = Object(react__WEBPACK_IMPORTED_MODULE_0__["createContext"])({
getField: getField,
setField: setField,
getMeta: getMeta,
getState: getState,
});
var FormProvider = FormContext.Provider, FormConsumer = FormContext.Consumer;
/* harmony default export */ __webpack_exports__["default"] = (FormContext);
/***/ }),
/***/ "./field.tsx":
/*!*******************!*\
!*** ./field.tsx ***!
\*******************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _hooks_useField__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./hooks/useField */ "./hooks/useField.ts");
var __assign = (undefined && undefined.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (undefined && undefined.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var Field = function (_a) {
var component = _a.component, props = __rest(_a, ["component"]);
var Component = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(component).current;
return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(Component, __assign({}, Object(_hooks_useField__WEBPACK_IMPORTED_MODULE_1__["default"])(props)));
};
/* harmony default export */ __webpack_exports__["default"] = (Field);
/***/ }),
/***/ "./form.tsx":
/*!******************!*\
!*** ./form.tsx ***!
\******************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./context */ "./context.ts");
/* harmony import */ var _hooks_useForm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./hooks/useForm */ "./hooks/useForm.ts");
var __assign = (undefined && undefined.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (undefined && undefined.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var Form = function (_a) {
var children = _a.children, props = __rest(_a, ["children"]);
if (typeof children !== 'function') {
throw new Error("children must be specified as function");
}
var _b = Object(_hooks_useForm__WEBPACK_IMPORTED_MODULE_2__["default"])(props), api = _b.api, state = _b.state;
return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_context__WEBPACK_IMPORTED_MODULE_1__["FormProvider"], { value: {
setField: api.setField,
getField: api.getField,
getMeta: api.getMeta,
getState: api.getState,
} }, children(__assign({}, state, { handleSubmit: api.handleSubmit, handleReset: api.handleReset }))));
};
/* harmony default export */ __webpack_exports__["default"] = (Form);
/***/ }),
/***/ "./helpers/get.ts":
/*!************************!*\
!*** ./helpers/get.ts ***!
\************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return get; });
/* harmony import */ var _typeOf__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./typeOf */ "./helpers/typeOf.ts");
function get(obj, path, defaultValue) {
var value = path
.match(/([^[.\]])+/g)
.reduce(function (acc, key) { return (Object(_typeOf__WEBPACK_IMPORTED_MODULE_0__["default"])(acc).is('array', 'object') ? acc[key] : undefined); }, obj);
return !Object(_typeOf__WEBPACK_IMPORTED_MODULE_0__["default"])(value).is('undefined') ? value : defaultValue;
}
/***/ }),
/***/ "./helpers/isEmpty.ts":
/*!****************************!*\
!*** ./helpers/isEmpty.ts ***!
\****************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return isEmpty; });
/* harmony import */ var _typeOf__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./typeOf */ "./helpers/typeOf.ts");
/**
* isEmpty
* @param {any} val
* @return {Boolean}
*/
function isEmpty(val) {
// Undefined...
if ('undefined' === typeof val) {
return true;
}
// Strings...
if ('string' === typeof val) {
return val.length === 0;
}
// Objects...
if (Object(_typeOf__WEBPACK_IMPORTED_MODULE_0__["isObject"])(val)) {
switch (val.toString()) {
// Maps, Sets, Files and Errors...
case '[object File]':
case '[object Map]':
case '[object Set]': {
return val.size === 0;
}
// Plain objects...
case '[object Object]': {
for (var key in val) {
if (Object.prototype.hasOwnProperty.call(val, key)) {
return false;
}
}
return true;
}
}
}
// Anything else...
return false;
}
/***/ }),
/***/ "./helpers/isEqual.ts":
/*!****************************!*\
!*** ./helpers/isEqual.ts ***!
\****************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// Compare two items
var compare = function (a, b) {
// Get the object type
var itemType = Object.prototype.toString.call(a);
// If an object or array, compare recursively
if (['[object Array]', '[object Object]'].indexOf(itemType) >= 0) {
if (!isEqual(a, b)) {
return false;
}
}
else {
// If the two items are not the same type, return false
if (itemType !== Object.prototype.toString.call(b)) {
return false;
}
// Else if it's a function, convert to a string and compare
// Otherwise, just compare
if (itemType === '[object Function]') {
if (a.toString() !== b.toString()) {
return false;
}
}
else {
if (a !== b) {
return false;
}
}
}
};
var isEqual = function (value, other) {
// Get the value type
var type = Object.prototype.toString.call(value);
// If the two objects are not the same type, return false
if (type !== Object.prototype.toString.call(other)) {
return false;
}
// If items are not an object or array, return false
if (['[object Array]', '[object Object]'].indexOf(type) < 0) {
return false;
}
// Compare the length of the length of the two items
var valueLen = type === '[object Array]' ? value.length : Object.keys(value).length;
var otherLen = type === '[object Array]' ? other.length : Object.keys(other).length;
if (valueLen !== otherLen) {
return false;
}
// Compare properties
if (type === '[object Array]') {
for (var i = 0; i < valueLen; i++) {
if (compare(value[i], other[i]) === false) {
return false;
}
}
}
else {
for (var key in value) {
if (value.hasOwnProperty(key)) {
if (compare(value[key], other[key]) === false) {
return false;
}
}
}
}
// If nothing failed, return true
return true;
};
/* harmony default export */ __webpack_exports__["default"] = (isEqual);
/***/ }),
/***/ "./helpers/isEvent.ts":
/*!****************************!*\
!*** ./helpers/isEvent.ts ***!
\****************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (function (event) {
return !!(event && typeof event.stopPropagation === 'function');
});
/***/ }),
/***/ "./helpers/noop.ts":
/*!*************************!*\
!*** ./helpers/noop.ts ***!
\*************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony default export */ __webpack_exports__["default"] = (function () { return undefined; });
/***/ }),
/***/ "./helpers/typeOf.ts":
/*!***************************!*\
!*** ./helpers/typeOf.ts ***!
\***************************/
/*! exports provided: isArray, isObject, default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isArray", function() { return isArray; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isObject", function() { return isObject; });
var typeOf = function (operand) { return ({
is: function () {
var types = [];
for (var _i = 0; _i < arguments.length; _i++) {
types[_i] = arguments[_i];
}
return types.includes(Object.prototype.toString
.call(operand)
.slice(8, -1)
.toLowerCase());
},
}); };
function isArray(array) {
return typeOf(array).is('array');
}
function isObject(object) {
return typeOf(object).is('object');
}
/* harmony default export */ __webpack_exports__["default"] = (typeOf);
/***/ }),
/***/ "./hooks/useField.ts":
/*!***************************!*\
!*** ./hooks/useField.ts ***!
\***************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../context */ "./context.ts");
/* harmony import */ var _helpers_noop__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../helpers/noop */ "./helpers/noop.ts");
var __assign = (undefined && undefined.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (undefined && undefined.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
/*export interface Props {
[key: string]: any;
}*/
var useField = function (props) {
var form = Object(react__WEBPACK_IMPORTED_MODULE_0__["useContext"])(_context__WEBPACK_IMPORTED_MODULE_1__["default"]);
var name = props.name, _a = props.onChange, onChange = _a === void 0 ? _helpers_noop__WEBPACK_IMPORTED_MODULE_2__["default"] : _a, _b = props.onFocus, onFocus = _b === void 0 ? _helpers_noop__WEBPACK_IMPORTED_MODULE_2__["default"] : _b, _c = props.onBlur, onBlur = _c === void 0 ? _helpers_noop__WEBPACK_IMPORTED_MODULE_2__["default"] : _c, _d = props.validate, validate = _d === void 0 ? _helpers_noop__WEBPACK_IMPORTED_MODULE_2__["default"] : _d, rest = __rest(props, ["name", "onChange", "onFocus", "onBlur", "validate"]);
var willMount = Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(true);
if (willMount.current) {
form.setField(name).mount(props);
}
Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(function () {
willMount.current = false;
return form.setField(name).unmount;
}, []);
var _e = form.getField(name), type = _e.type, value = _e.value, multiple = _e.multiple;
var error = form.getMeta(name).error;
var handleChange = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(function (event) {
form.setField(name).value(event);
onChange(event);
}, [name]);
var handleFocus = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(function (event) {
form.setField(name).meta('touched', true);
onFocus(event);
}, [name]);
var handleBlur = Object(react__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(function (event) {
form.setField(name).value(event);
onBlur(event);
}, [name]);
return __assign({ input: __assign({ name: name }, (type !== 'select' && {
type: type,
}), (type === 'checkbox' && {
checked: Boolean(value),
}), (type !== 'checkbox' && {
value: value,
}), { multiple: multiple, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }), meta: {
error: error,
} }, rest);
};
/* harmony default export */ __webpack_exports__["default"] = (useField);
/***/ }),
/***/ "./hooks/useForm.ts":
/*!**************************!*\
!*** ./hooks/useForm.ts ***!
\**************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _api__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../api */ "./api.ts");
/* harmony import */ var _hooks_useSubscription__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../hooks/useSubscription */ "./hooks/useSubscription.ts");
var useForm = function (props) {
var initialValues = props.initialValues, initialErrors = props.initialErrors, validate = props.validate, onSubmit = props.onSubmit;
var api = Object(react__WEBPACK_IMPORTED_MODULE_0__["useMemo"])(function () {
return new _api__WEBPACK_IMPORTED_MODULE_1__["default"]({
initialValues: initialValues,
initialErrors: initialErrors,
validate: validate,
onSubmit: onSubmit,
});
}, []);
var state = Object(_hooks_useSubscription__WEBPACK_IMPORTED_MODULE_2__["default"])(Object(react__WEBPACK_IMPORTED_MODULE_0__["useMemo"])(function () { return ({
getState: api.getState,
subscribe: function (callback) {
api.listener.on('subscribe', callback);
return function () { return api.listener.off('subscribe'); };
},
}); }, []));
return {
api: api,
state: state,
};
};
/* harmony default export */ __webpack_exports__["default"] = (useForm);
/***/ }),
/***/ "./hooks/useSubscription.ts":
/*!**********************************!*\
!*** ./hooks/useSubscription.ts ***!
\**********************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return useSubscription; });
/* harmony import */ var nest_deep__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! nest-deep */ "../node_modules/nest-deep/lib/index.js");
/* harmony import */ var nest_deep__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(nest_deep__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _helpers_isEqual__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../helpers/isEqual */ "./helpers/isEqual.ts");
function useSubscription(_a) {
var getState = _a.getState, subscribe = _a.subscribe;
var _b = Object(react__WEBPACK_IMPORTED_MODULE_1__["useState"])(getState()), state = _b[0], setState = _b[1];
Object(react__WEBPACK_IMPORTED_MODULE_1__["useEffect"])(function () {
var didUnsubscribe = false;
var checkForUpdates = function () {
if (didUnsubscribe) {
return;
}
var nextState = getState();
return setState(function (prevState) {
if (Object(_helpers_isEqual__WEBPACK_IMPORTED_MODULE_2__["default"])(Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["flatten"])(state), Object(nest_deep__WEBPACK_IMPORTED_MODULE_0__["flatten"])(nextState))) {
return prevState;
}
return nextState;
});
};
checkForUpdates();
var unsubscribe = subscribe(checkForUpdates);
return function () {
didUnsubscribe = true;
unsubscribe();
};
}, [subscribe]);
return state;
}
/***/ }),
/***/ "./index.ts":
/*!******************!*\
!*** ./index.ts ***!
\******************/
/*! exports provided: Form, Field, useForm, useField */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _form__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./form */ "./form.tsx");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Form", function() { return _form__WEBPACK_IMPORTED_MODULE_0__["default"]; });
/* harmony import */ var _field__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./field */ "./field.tsx");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Field", function() { return _field__WEBPACK_IMPORTED_MODULE_1__["default"]; });
/* harmony import */ var _hooks_useForm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./hooks/useForm */ "./hooks/useForm.ts");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useForm", function() { return _hooks_useForm__WEBPACK_IMPORTED_MODULE_2__["default"]; });
/* harmony import */ var _hooks_useField__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./hooks/useField */ "./hooks/useField.ts");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "useField", function() { return _hooks_useField__WEBPACK_IMPORTED_MODULE_3__["default"]; });
/***/ }),
/***/ 0:
/*!************************!*\
!*** multi ./index.ts ***!
\************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(/*! ./index.ts */"./index.ts");
/***/ }),
/***/ "react":
/*!************************!*\
!*** external "React" ***!
\************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
/***/ })
/******/ });
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly91c2VGb3JtL3dlYnBhY2svdW5pdmVyc2FsTW9kdWxlRGVmaW5pdGlvbiIsIndlYnBhY2s6Ly91c2VGb3JtL3dlYnBhY2svYm9vdHN0cmFwIiwid2VicGFjazovL3VzZUZvcm0vLi4vbm9kZV9tb2R1bGVzL25lc3QtZGVlcC9saWIvZmxhdHRlbi5qcyIsIndlYnBhY2s6Ly91c2VGb3JtLy4uL25vZGVfbW9kdWxlcy9uZXN0LWRlZXAvbGliL2luZGV4LmpzIiwid2VicGFjazovL3VzZUZvcm0vLi4vbm9kZV9tb2R1bGVzL25lc3QtZGVlcC9saWIvbmVzdGVkLmpzIiwid2VicGFjazovL3VzZUZvcm0vLi9hcGkudHMiLCJ3ZWJwYWNrOi8vdXNlRm9ybS8uL2NvbnRleHQudHMiLCJ3ZWJwYWNrOi8vdXNlRm9ybS8uL2ZpZWxkLnRzeCIsIndlYnBhY2s6Ly91c2VGb3JtLy4vZm9ybS50c3giLCJ3ZWJwYWNrOi8vdXNlRm9ybS8uL2hlbHBlcnMvZ2V0LnRzIiwid2VicGFjazovL3VzZUZvcm0vLi9oZWxwZXJzL2lzRW1wdHkudHMiLCJ3ZWJwYWNrOi8vdXNlRm9ybS8uL2hlbHBlcnMvaXNFcXVhbC50cyIsIndlYnBhY2s6Ly91c2VGb3JtLy4vaGVscGVycy9pc0V2ZW50LnRzIiwid2VicGFjazovL3VzZUZvcm0vLi9oZWxwZXJzL25vb3AudHMiLCJ3ZWJwYWNrOi8vdXNlRm9ybS8uL2hlbHBlcnMvdHlwZU9mLnRzIiwid2VicGFjazovL3VzZUZvcm0vLi9ob29rcy91c2VGaWVsZC50cyIsIndlYnBhY2s6Ly91c2VGb3JtLy4vaG9va3MvdXNlRm9ybS50cyIsIndlYnBhY2s6Ly91c2VGb3JtLy4vaG9va3MvdXNlU3Vic2NyaXB0aW9uLnRzIiwid2VicGFjazovL3VzZUZvcm0vLi9pbmRleC50cyIsIndlYnBhY2s6Ly91c2VGb3JtL2V4dGVybmFsIFwiUmVhY3RcIiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxDQUFDO0FBQ0QsTztRQ1ZBO1FBQ0E7O1FBRUE7UUFDQTs7UUFFQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTs7UUFFQTtRQUNBOztRQUVBO1FBQ0E7O1FBRUE7UUFDQTtRQUNBOzs7UUFHQTtRQUNBOztRQUVBO1FBQ0E7O1FBRUE7UUFDQTtRQUNBO1FBQ0EsMENBQTBDLGdDQUFnQztRQUMxRTtRQUNBOztRQUVBO1FBQ0E7UUFDQTtRQUNBLHdEQUF3RCxrQkFBa0I7UUFDMUU7UUFDQSxpREFBaUQsY0FBYztRQUMvRDs7UUFFQTtRQUNBO1FBQ0E7UUFDQTtRQUNBO1FBQ0E7UUFDQTt