Socket
Socket
Sign inDemoInstall

formula-one

Package Overview
Dependencies
Maintainers
1
Versions
44
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

formula-one - npm Package Compare versions

Comparing version 0.9.0-alpha.6 to 0.9.0-alpha.7

dist/index.d.ts

256

dist/ArrayField.js

@@ -6,13 +6,6 @@ "use strict";

});
exports.default = void 0;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = _interopRequireWildcard(require("react"));
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); // strict
var _react = require("react");
var React = _interopRequireWildcard(_react);
var _types = require("./types");

@@ -28,12 +21,40 @@

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function makeLinks(formState, onChildChange, onChildBlur, onChildValidation) {

@@ -59,21 +80,26 @@ var _formState = _slicedToArray(formState, 1),

var ArrayField = function (_React$Component) {
var ArrayField =
/*#__PURE__*/
function (_React$Component) {
_inherits(ArrayField, _React$Component);
function ArrayField() {
var _ref;
var _getPrototypeOf2;
var _temp, _this, _ret;
var _this;
_classCallCheck(this, ArrayField);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ArrayField.__proto__ || Object.getPrototypeOf(ArrayField)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ArrayField)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "state", {
nonce: 0
}, _this._handleChildChange = function (index, newChild) {
});
_defineProperty(_assertThisInitialized(_this), "_handleChildChange", function (index, newChild) {
var newFormState = (0, _formState3.replaceArrayChild)(index, newChild, _this.props.link.formState);
var oldValue = _this.props.link.formState[0];

@@ -84,3 +110,4 @@ var newValue = newFormState[0];

var nextFormState = void 0;
var nextFormState;
if (customValue) {

@@ -94,9 +121,11 @@ // Create a fresh form state for the new value.

_this.props.link.onChange((0, _formState3.setChanged)((0, _formState3.validate)(_this.props.validation, nextFormState)));
_this.props.link.onChange((0, _formState3.setChanged)((0, _formState3.validate)(_this.props.validation, nextFormState))); // Need to remount children so they will run validations
// Need to remount children so they will run validations
if (customValue) {
_this.forceChildRemount();
}
}, _this._handleChildBlur = function (index, childTree) {
});
_defineProperty(_assertThisInitialized(_this), "_handleChildBlur", function (index, childTree) {
var _this$props$link$form = _slicedToArray(_this.props.link.formState, 2),

@@ -107,3 +136,5 @@ _ = _this$props$link$form[0],

_this.props.link.onBlur((0, _shapedTree.mapRoot)(_formState3.setExtrasTouched, (0, _shapedTree.dangerouslyReplaceArrayChild)(index, childTree, tree)));
}, _this._handleChildValidation = function (index, childPath, errors) {
});
_defineProperty(_assertThisInitialized(_this), "_handleChildValidation", function (index, childPath, errors) {
var extendedPath = [{

@@ -113,4 +144,7 @@ type: "array",

}].concat(_toConsumableArray(childPath));
_this.props.link.onValidation(extendedPath, errors);
}, _this._addChildField = function (index, childValue) {
});
_defineProperty(_assertThisInitialized(_this), "_addChildField", function (index, childValue) {
var _this$props$link$form2 = _slicedToArray(_this.props.link.formState, 2),

@@ -124,3 +158,2 @@ oldValue = _this$props$link$form2[0],

};
var newValue = (0, _array.insertAt)(index, childValue, oldValue);

@@ -130,3 +163,5 @@ var newTree = (0, _shapedTree.dangerouslySetChildren)((0, _array.insertAt)(index, (0, _shapedTree.treeFromValue)(childValue, cleanNode), (0, _shapedTree.shapedArrayChildren)(oldTree)), oldTree);

_this.props.link.onChange((0, _formState3.validate)(_this.props.validation, (0, _formState3.setChanged)((0, _formState3.setTouched)([newValue, newTree]))));
}, _this._addChildFields = function (spans) {
});
_defineProperty(_assertThisInitialized(_this), "_addChildFields", function (spans) {
var _this$props$link$form3 = _slicedToArray(_this.props.link.formState, 2),

@@ -140,8 +175,7 @@ oldValue = _this$props$link$form3[0],

};
var newValue = (0, _array.insertSpans)(spans, oldValue);
var newNodeSpans = spans.map(function (_ref2) {
var _ref3 = _slicedToArray(_ref2, 2),
index = _ref3[0],
content = _ref3[1];
var newNodeSpans = spans.map(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
index = _ref2[0],
content = _ref2[1];

@@ -155,3 +189,5 @@ return [index, content.map(function (v) {

_this.props.link.onChange((0, _formState3.validate)(_this.props.validation, (0, _formState3.setChanged)((0, _formState3.setTouched)([newValue, newTree]))));
}, _this._filterChildFields = function (predicate) {
});
_defineProperty(_assertThisInitialized(_this), "_filterChildFields", function (predicate) {
var _this$props$link$form4 = _slicedToArray(_this.props.link.formState, 2),

@@ -163,9 +199,9 @@ oldValue = _this$props$link$form4[0],

var _unzip = (0, _array.unzip)(zipped.filter(function (_ref4, i, arr) {
var _ref5 = _slicedToArray(_ref4, 1),
value = _ref5[0];
var _unzip = (0, _array.unzip)(zipped.filter(function (_ref3, i, arr) {
var _ref4 = _slicedToArray(_ref3, 1),
value = _ref4[0];
return predicate(value, i, arr.map(function (_ref6) {
var _ref7 = _slicedToArray(_ref6, 1),
v = _ref7[0];
return predicate(value, i, arr.map(function (_ref5) {
var _ref6 = _slicedToArray(_ref5, 1),
v = _ref6[0];

@@ -182,6 +218,8 @@ return v;

_this.props.link.onChange((0, _formState3.validate)(_this.props.validation, (0, _formState3.setChanged)((0, _formState3.setTouched)([newValue, newTree]))));
}, _this._modifyChildFields = function (_ref8) {
var insertSpans = _ref8.insertSpans,
filterPredicate = _ref8.filterPredicate;
});
_defineProperty(_assertThisInitialized(_this), "_modifyChildFields", function (_ref7) {
var insertSpans = _ref7.insertSpans,
filterPredicate = _ref7.filterPredicate;
var _this$props$link$form5 = _slicedToArray(_this.props.link.formState, 2),

@@ -194,14 +232,11 @@ oldValue = _this$props$link$form5[0],

meta: _types.cleanMeta
};
// TODO(zach): there's a less complicated, more functorial way to do this
}; // TODO(zach): there's a less complicated, more functorial way to do this
// augment, then unaugment
var zipped = (0, _array.zip)(oldValue, (0, _shapedTree.shapedArrayChildren)(oldTree));
var zipped = (0, _array.zip)(oldValue, (0, _shapedTree.shapedArrayChildren)(oldTree)); // augment the spans with fresh nodes
// augment the spans with fresh nodes
var augmentedSpans = insertSpans !== undefined ? insertSpans.map(function (_ref9) {
var _ref10 = _slicedToArray(_ref9, 2),
index = _ref10[0],
contents = _ref10[1];
var augmentedSpans = insertSpans !== undefined ? insertSpans.map(function (_ref8) {
var _ref9 = _slicedToArray(_ref8, 2),
index = _ref9[0],
contents = _ref9[1];

@@ -211,14 +246,13 @@ return [index, contents.map(function (v) {

})];
}) : undefined;
}) : undefined; // augment the predicate to work on formstates
// augment the predicate to work on formstates
var augmentedPredicate = filterPredicate !== undefined ? function (_ref11, i, arr) {
var _ref12 = _slicedToArray(_ref11, 2),
v = _ref12[0],
_ = _ref12[1];
var augmentedPredicate = filterPredicate !== undefined ? function (_ref10, i, arr) {
var _ref11 = _slicedToArray(_ref10, 2),
v = _ref11[0],
_ = _ref11[1];
return filterPredicate(v, i, arr.map(function (_ref13) {
var _ref14 = _slicedToArray(_ref13, 2),
v = _ref14[0],
_ = _ref14[1];
return filterPredicate(v, i, arr.map(function (_ref12) {
var _ref13 = _slicedToArray(_ref12, 2),
v = _ref13[0],
_ = _ref13[1];

@@ -229,3 +263,6 @@ return v;

var _unzip3 = (0, _array.unzip)((0, _array.modify)({ insertSpans: augmentedSpans, filterPredicate: augmentedPredicate }, zipped)),
var _unzip3 = (0, _array.unzip)((0, _array.modify)({
insertSpans: augmentedSpans,
filterPredicate: augmentedPredicate
}, zipped)),
_unzip4 = _slicedToArray(_unzip3, 2),

@@ -238,3 +275,5 @@ newValue = _unzip4[0],

_this.props.link.onChange((0, _formState3.validate)(_this.props.validation, (0, _formState3.setChanged)((0, _formState3.setTouched)([newValue, newTree]))));
}, _this._removeChildField = function (index) {
});
_defineProperty(_assertThisInitialized(_this), "_removeChildField", function (index) {
var _this$props$link$form6 = _slicedToArray(_this.props.link.formState, 2),

@@ -248,3 +287,5 @@ oldValue = _this$props$link$form6[0],

_this.props.link.onChange((0, _formState3.validate)(_this.props.validation, (0, _formState3.setChanged)((0, _formState3.setTouched)([newValue, newTree]))));
}, _this._moveChildField = function (from, to) {
});
_defineProperty(_assertThisInitialized(_this), "_moveChildField", function (from, to) {
var _this$props$link$form7 = _slicedToArray(_this.props.link.formState, 2),

@@ -256,4 +297,7 @@ oldValue = _this$props$link$form7[0],

var newTree = (0, _shapedTree.dangerouslySetChildren)((0, _array.moveFromTo)(from, to, (0, _shapedTree.shapedArrayChildren)(oldTree)), oldTree);
_this.props.link.onChange((0, _formState3.validate)(_this.props.validation, (0, _formState3.setChanged)((0, _formState3.setTouched)([newValue, newTree]))));
}, _temp), _possibleConstructorReturn(_this, _ret);
});
return _this;
}

@@ -264,7 +308,7 @@

value: function initialValidate() {
var _props = this.props,
_props$link = _props.link,
formState = _props$link.formState,
onValidation = _props$link.onValidation,
validation = _props.validation;
var _this$props = this.props,
_this$props$link = _this$props.link,
formState = _this$props$link.formState,
onValidation = _this$props$link.onValidation,
validation = _this$props.validation;

@@ -289,5 +333,7 @@ var _formState2 = _slicedToArray(formState, 1),

value: function forceChildRemount() {
this.setState(function (_ref15) {
var nonce = _ref15.nonce;
return { nonce: nonce + 1 };
this.setState(function (_ref14) {
var nonce = _ref14.nonce;
return {
nonce: nonce + 1
};
});

@@ -299,26 +345,23 @@ }

var formState = this.props.link.formState;
var shouldShowError = this.props.formContext.shouldShowError;
var shouldShowError = this.context.shouldShowError;
var links = makeLinks(formState, this._handleChildChange, this._handleChildBlur, this._handleChildValidation);
return React.createElement(
React.Fragment,
{ key: this.state.nonce },
this.props.children(links, {
addField: this._addChildField,
removeField: this._removeChildField,
moveField: this._moveChildField,
addFields: this._addChildFields,
filterFields: this._filterChildFields,
modifyFields: this._modifyChildFields
}, {
touched: (0, _formState3.getExtras)(formState).meta.touched,
changed: (0, _formState3.getExtras)(formState).meta.changed,
shouldShowErrors: shouldShowError((0, _formState3.getExtras)(formState).meta),
unfilteredErrors: (0, _formState3.flatRootErrors)(formState),
asyncValidationInFlight: false, // no validations on Form
valid: (0, _formState3.isValid)(formState),
value: formState[0]
})
);
return React.createElement(React.Fragment, {
key: this.state.nonce
}, this.props.children(links, {
addField: this._addChildField,
removeField: this._removeChildField,
moveField: this._moveChildField,
addFields: this._addChildFields,
filterFields: this._filterChildFields,
modifyFields: this._modifyChildFields
}, {
touched: (0, _formState3.getExtras)(formState).meta.touched,
changed: (0, _formState3.getExtras)(formState).meta.changed,
shouldShowErrors: shouldShowError((0, _formState3.getExtras)(formState).meta),
unfilteredErrors: (0, _formState3.flatRootErrors)(formState),
asyncValidationInFlight: false,
// no validations on Form
valid: (0, _formState3.isValid)(formState),
value: formState[0]
}));
}

@@ -330,21 +373,10 @@ }]);

// Using a HOC here is not possible due to a Flow bug: https://github.com/facebook/flow/issues/6903
exports.default = ArrayField;
ArrayField.defaultProps = {
_defineProperty(ArrayField, "defaultProps", {
validation: function validation() {
return [];
}
};
function wrap(props) {
return React.createElement(
_Form.FormContext.Consumer,
null,
function (formContext) {
return React.createElement(ArrayField, _extends({}, props, { formContext: formContext }));
}
);
}
wrap.defaultProps = ArrayField.defaultProps;
});
exports.default = wrap;
_defineProperty(ArrayField, "contextType", _Form.FormContext);

31

dist/ErrorsHelper.js

@@ -6,9 +6,6 @@ "use strict";

});
exports.default = ErrorsHelper;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; // strict
var React = _interopRequireWildcard(require("react"));
var _react = require("react");
var React = _interopRequireWildcard(_react);
var _Form = require("./Form");

@@ -18,12 +15,15 @@

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function flattenErrors(errors) {
var flatErrors = [];
if (errors.client !== "pending") {
flatErrors = flatErrors.concat(errors.client);
}
if (errors.server !== "unchecked") {
flatErrors = flatErrors.concat(errors.server);
}
return flatErrors;

@@ -38,3 +38,4 @@ }

var flattened = flattenErrors(errors);
var shouldShowErrors = props.formContext.shouldShowError(meta);
var formContext = React.useContext(_Form.FormContext);
var shouldShowErrors = formContext.shouldShowError(meta);
return props.children({

@@ -46,16 +47,2 @@ shouldShowErrors: shouldShowErrors,

});
}
// Using a HOC here is not possible due to a Flow bug: https://github.com/facebook/flow/issues/6903
function wrap(props) {
return React.createElement(
_Form.FormContext.Consumer,
null,
function (formContext) {
return React.createElement(ErrorsHelper, _extends({}, props, { formContext: formContext }));
}
);
}
wrap.defaultProps = ErrorsHelper.defaultProps;
exports.default = wrap;
}

5

dist/feedbackStrategies.js

@@ -9,3 +9,3 @@ "use strict";

exports.not = not;
// strict
exports.default = void 0;
var strategies = {

@@ -31,4 +31,5 @@ Always: function Always() {

};
var _default = strategies;
exports.default = _default;
exports.default = strategies;
function and(a, b) {

@@ -35,0 +36,0 @@ return function (metaForm, metaField) {

105

dist/Field.js

@@ -6,53 +6,75 @@ "use strict";

});
exports.default = void 0;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = _interopRequireWildcard(require("react"));
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _shapedTree = require("./shapedTree");
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _Form = require("./Form");
var _react = require("react");
var _formState3 = require("./formState");
var React = _interopRequireWildcard(_react);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
var _shapedTree = require("./shapedTree");
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
var _Form = require("./Form");
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
var _formState3 = require("./formState");
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // strict
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function getErrors(errors) {
var flatErrors = [];
if (errors.client !== "pending") {
flatErrors = flatErrors.concat(errors.client);
}
if (errors.server !== "unchecked") {
flatErrors = flatErrors.concat(errors.server);
}
return flatErrors;
}
var Field = function (_React$Component) {
var Field =
/*#__PURE__*/
function (_React$Component) {
_inherits(Field, _React$Component);
function Field() {
var _ref;
var _getPrototypeOf2;
var _temp, _this, _ret;
var _this;
_classCallCheck(this, Field);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Field.__proto__ || Object.getPrototypeOf(Field)).call.apply(_ref, [this].concat(args))), _this), _this.onChange = function (newValue) {
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(Field)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "onChange", function (newValue) {
var _this$props$link$form = _slicedToArray(_this.props.link.formState, 2),

@@ -63,3 +85,5 @@ _ = _this$props$link$form[0],

_this.props.link.onChange((0, _formState3.setChanged)((0, _formState3.validate)(_this.props.validation, [newValue, oldTree])));
}, _this.onBlur = function () {
});
_defineProperty(_assertThisInitialized(_this), "onBlur", function () {
var _this$props$link$form2 = _slicedToArray(_this.props.link.formState, 2),

@@ -69,6 +93,7 @@ _ = _this$props$link$form2[0],

_this.props.link.onBlur(
// TODO(zach): Not sure if we should blow away server errors here
_this.props.link.onBlur( // TODO(zach): Not sure if we should blow away server errors here
(0, _shapedTree.mapRoot)(_formState3.setExtrasTouched, tree));
}, _temp), _possibleConstructorReturn(_this, _ret);
});
return _this;
}

@@ -79,7 +104,7 @@

value: function initialValidate() {
var _props = this.props,
_props$link = _props.link,
formState = _props$link.formState,
onValidation = _props$link.onValidation,
validation = _props.validation;
var _this$props = this.props,
_this$props$link = _this$props.link,
formState = _this$props$link.formState,
onValidation = _this$props$link.onValidation,
validation = _this$props.validation;

@@ -113,7 +138,4 @@ var _formState = _slicedToArray(formState, 1),

var shouldShowError = this.props.formContext.shouldShowError;
var flatErrors = this.props.formContext.shouldShowError(meta) ? getErrors(errors) : [];
var shouldShowError = this.context.shouldShowError;
var flatErrors = this.context.shouldShowError(meta) ? getErrors(errors) : [];
return this.props.children(value, flatErrors, this.onChange, this.onBlur, {

@@ -124,3 +146,4 @@ touched: meta.touched,

unfilteredErrors: getErrors(errors),
asyncValidationInFlight: false, // no validations on Form
asyncValidationInFlight: false,
// no validations on Form
valid: (0, _formState3.isValid)(formState),

@@ -135,20 +158,10 @@ value: value

Field.defaultProps = {
exports.default = Field;
_defineProperty(Field, "defaultProps", {
validation: function validation() {
return [];
}
};
});
function wrap(props) {
return React.createElement(
_Form.FormContext.Consumer,
null,
function (formContext) {
return React.createElement(Field, _extends({}, props, { formContext: formContext }));
}
);
}
wrap.defaultProps = Field.defaultProps;
exports.default = wrap;
_defineProperty(Field, "contextType", _Form.FormContext);

181

dist/Form.js

@@ -6,14 +6,6 @@ "use strict";

});
exports.FormContext = undefined;
exports.default = exports.FormContext = void 0;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var React = _interopRequireWildcard(require("react"));
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); // strict
var _react = require("react");
var React = _interopRequireWildcard(_react);
var _formState2 = require("./formState");

@@ -25,13 +17,39 @@

require("./feedbackStrategies");
var _feedbackStrategies = _interopRequireDefault(require("./feedbackStrategies"));
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
var FormContext = exports.FormContext = React.createContext({
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var FormContext = React.createContext({
shouldShowError: function shouldShowError() {

@@ -43,2 +61,3 @@ return true;

});
exports.FormContext = FormContext;

@@ -50,3 +69,4 @@ function applyServerErrorsToFormState(serverErrors, formState) {

var tree = void 0;
var tree;
if (serverErrors !== null) {

@@ -58,3 +78,5 @@ // If keys do not appear, no errors

return {
errors: _extends({}, errors, { server: [] }),
errors: _objectSpread({}, errors, {
server: []
}),
meta: meta

@@ -73,3 +95,5 @@ };

return {
errors: _extends({}, errors, { server: newErrors }),
errors: _objectSpread({}, errors, {
server: newErrors
}),
meta: meta

@@ -80,6 +104,8 @@ };

var valueStr = JSON.stringify(value);
if (valueStr === undefined) {
valueStr = "undefined";
}
console.error("Warning: couldn't match error with path " + key + " to value " + valueStr);
console.error("Warning: couldn't match error with path ".concat(key, " to value ").concat(valueStr));
}

@@ -92,3 +118,5 @@ });

return {
errors: _extends({}, errors, { server: [] }),
errors: _objectSpread({}, errors, {
server: []
}),
meta: meta

@@ -102,3 +130,5 @@ };

var Form = function (_React$Component) {
var Form =
/*#__PURE__*/
function (_React$Component) {
_inherits(Form, _React$Component);

@@ -110,4 +140,3 @@

if (props.serverErrors !== state.oldServerErrors) {
// prettier-ignore
var newFormState = applyServerErrorsToFormState /*::<T>*/(props.serverErrors, state.formState);
var newFormState = applyServerErrorsToFormState(props.serverErrors, state.formState);
return {

@@ -118,2 +147,3 @@ formState: newFormState,

}
return null;

@@ -124,15 +154,23 @@ }

function Form(props) {
var _this;
_classCallCheck(this, Form);
var _this = _possibleConstructorReturn(this, (Form.__proto__ || Object.getPrototypeOf(Form)).call(this, props));
_this = _possibleConstructorReturn(this, _getPrototypeOf(Form).call(this, props));
_this._handleSubmit = function (extraData) {
_this.setState({ submitted: true });
_defineProperty(_assertThisInitialized(_this), "_handleSubmit", function (extraData) {
_this.setState({
submitted: true
});
_this.props.onSubmit(_this.state.formState[0], extraData);
};
});
_this._handleChange = function (newState) {
_this.setState({ formState: newState, pristine: false });
_this.props.onChange(newState[0]);
// TODO(zach): This is a bit gross, but the general purpose here is
_defineProperty(_assertThisInitialized(_this), "_handleChange", function (newState) {
_this.setState({
formState: newState,
pristine: false
});
_this.props.onChange(newState[0]); // TODO(zach): This is a bit gross, but the general purpose here is
// that onValidation outside the form (in the public API) doesn't

@@ -142,12 +180,14 @@ // correspond directly to the internal onValidation. Internally

// on any validation.
_this.props.onValidation((0, _formState2.isValid)(newState));
};
});
_this._handleBlur = function (newTree) {
_defineProperty(_assertThisInitialized(_this), "_handleBlur", function (newTree) {
_this.setState({
formState: [_this.state.formState[0], newTree]
});
};
});
_this._handleValidation = function (path, errors) {
_defineProperty(_assertThisInitialized(_this), "_handleValidation", function (path, errors) {
// TODO(zach): Move this into formState.js, it is gross

@@ -159,4 +199,6 @@ var updater = function updater(newErrors) {

return {
errors: _extends({}, errors, { client: newErrors }),
meta: _extends({}, meta, {
errors: _objectSpread({}, errors, {
client: newErrors
}),
meta: _objectSpread({}, meta, {
succeeded: newErrors.length === 0 ? true : meta.succeeded

@@ -167,2 +209,3 @@ })

};
_this.setState(function (_ref5) {

@@ -179,3 +222,3 @@ var _ref5$formState = _slicedToArray(_ref5.formState, 2),

});
};
});

@@ -190,7 +233,5 @@ var formState = applyServerErrorsToFormState(props.serverErrors, (0, _formState2.freshFormState)(props.initialValue));

return _this;
}
} // Public API: submit from the outside
// Public API: submit from the outside
_createClass(Form, [{

@@ -200,6 +241,4 @@ key: "submit",

this._handleSubmit(extraData);
}
} // private
// private
}, {

@@ -209,3 +248,2 @@ key: "render",

var formState = this.state.formState;
var metaForm = {

@@ -215,25 +253,21 @@ pristine: this.state.pristine,

};
return React.createElement(
FormContext.Provider,
{
value: _extends({
shouldShowError: this.props.feedbackStrategy.bind(null, metaForm)
}, metaForm)
},
this.props.children({
formState: formState,
onChange: this._handleChange,
onBlur: this._handleBlur,
onValidation: this._handleValidation
}, this._handleSubmit, {
touched: (0, _formState2.getExtras)(formState).meta.touched,
changed: (0, _formState2.getExtras)(formState).meta.changed,
shouldShowErrors: this.props.feedbackStrategy(metaForm, (0, _formState2.getExtras)(formState).meta),
unfilteredErrors: (0, _formState2.flatRootErrors)(formState),
asyncValidationInFlight: false, // no validations on Form
valid: (0, _formState2.isValid)(formState),
value: formState[0]
})
);
return React.createElement(FormContext.Provider, {
value: _objectSpread({
shouldShowError: this.props.feedbackStrategy.bind(null, metaForm)
}, metaForm)
}, this.props.children({
formState: formState,
onChange: this._handleChange,
onBlur: this._handleBlur,
onValidation: this._handleValidation
}, this._handleSubmit, {
touched: (0, _formState2.getExtras)(formState).meta.touched,
changed: (0, _formState2.getExtras)(formState).meta.changed,
shouldShowErrors: this.props.feedbackStrategy(metaForm, (0, _formState2.getExtras)(formState).meta),
unfilteredErrors: (0, _formState2.flatRootErrors)(formState),
asyncValidationInFlight: false,
// no validations on Form
valid: (0, _formState2.isValid)(formState),
value: formState[0]
}));
}

@@ -245,7 +279,10 @@ }]);

Form.defaultProps = {
exports.default = Form;
_defineProperty(Form, "defaultProps", {
onChange: function onChange() {},
onSubmit: function onSubmit() {},
onValidation: function onValidation() {}
};
exports.default = Form;
onValidation: function onValidation() {},
feedbackStrategy: _feedbackStrategies.default.Always,
serverErrors: null
});

80

dist/formState.js

@@ -6,7 +6,2 @@ "use strict";

});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); // strict
exports.getExtras = getExtras;

@@ -36,11 +31,18 @@ exports.freshFormState = freshFormState;

var _invariant = require("./utils/invariant");
var _invariant = _interopRequireDefault(require("./utils/invariant"));
var _invariant2 = _interopRequireDefault(_invariant);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
// invariant, Tree is shaped like T
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function getExtras(formState) {

@@ -71,10 +73,12 @@ return (0, _shapedTree.forgetShape)(formState[1]).data;

var errors = (0, _shapedTree.getRootData)(formState[1]).errors;
var flatErrors = [];
var flatErrors = [];
if (errors.client !== "pending") {
flatErrors = flatErrors.concat(errors.client);
}
if (errors.server !== "unchecked") {
flatErrors = flatErrors.concat(errors.server);
}
return flatErrors;

@@ -112,3 +116,3 @@ }

},
meta: _extends({}, meta, {
meta: _objectSpread({}, meta, {
succeeded: meta.succeeded || newErrors.length === 0

@@ -126,3 +130,6 @@ })

errors: errors,
meta: _extends({}, meta, { touched: true, changed: true })
meta: _objectSpread({}, meta, {
touched: true,
changed: true
})
};

@@ -136,3 +143,8 @@ }, formState[1])];

meta = _ref3.meta;
return { errors: errors, meta: _extends({}, meta, { touched: true }) };
return {
errors: errors,
meta: _objectSpread({}, meta, {
touched: true
})
};
}, formState[1])];

@@ -146,3 +158,5 @@ }

return {
errors: _extends({}, errors, { client: newErrors }),
errors: _objectSpread({}, errors, {
client: newErrors
}),
meta: meta

@@ -156,4 +170,8 @@ };

meta = _ref5.meta;
return { errors: errors, meta: _extends({}, meta, { touched: true }) };
return {
errors: errors,
meta: _objectSpread({}, meta, {
touched: true
})
};
}

@@ -170,3 +188,3 @@

return [_extends({}, value, _defineProperty({}, key, childValue)), (0, _shapedTree.dangerouslyReplaceObjectChild)(key, childTree, tree)];
return [_objectSpread({}, value, _defineProperty({}, key, childValue)), (0, _shapedTree.dangerouslyReplaceObjectChild)(key, childTree, tree)];
}

@@ -209,15 +227,12 @@

var newMeta = newExtras.meta,
newErrors = newExtras.errors;
newErrors = newExtras.errors; // Only asyncValidationInFlight + succeeded may change
// Only asyncValidationInFlight + succeeded may change
(0, _invariant.default)(oldMeta.touched === newMeta.touched, "Recieved a new meta.touched when monoidally combining errors");
(0, _invariant.default)(oldMeta.changed === newMeta.changed, "Recieved a new meta.changed when monoidally combining errors"); // No combination is possible if the old client errors are not pending
(0, _invariant2.default)(oldMeta.touched === newMeta.touched, "Recieved a new meta.touched when monoidally combining errors");
(0, _invariant2.default)(oldMeta.changed === newMeta.changed, "Recieved a new meta.changed when monoidally combining errors");
// No combination is possible if the old client errors are not pending
if (oldErrors.client !== "pending") {
return oldExtras;
}
} // No combination is possible if the new client errors are pending
// No combination is possible if the new client errors are pending
if (newErrors.client === "pending") {

@@ -243,9 +258,8 @@ return oldExtras;

return (0, _shapedTree.shapedZipWith)(combineExtrasForValidation, oldTree, newTree);
}
} // Also sets asyncValidationInFlight
// Also sets asyncValidationInFlight
function monoidallyCombineFormStatesForValidation(oldState, newState) {
// Value should never change when combining errors
(0, _invariant2.default)(oldState[0] === newState[0], "Received a new value when monoidally combining errors");
(0, _invariant.default)(oldState[0] === newState[0], "Received a new value when monoidally combining errors");
return [oldState[0], monoidallyCombineTreesForValidation(oldState[1], newState[1])];

@@ -257,3 +271,2 @@ }

errors = oldExtras.errors;
return {

@@ -267,7 +280,6 @@ meta: meta,

}
function replaceServerErrors(serverErrors, formState) {
return [formState[0], (0, _shapedTree.shapedZipWith)(replaceServerErrorsExtra, serverErrors, formState[1])];
}
// Is whole tree client valid?
} // Is whole tree client valid?
// TODO(zach): This will have to change with asynchronous validations. We will

@@ -277,2 +289,4 @@ // need a "pending" value as well as an "unchecked" value.

// marked "pending", which means they can be valid :grimace:.
function isValid(formState) {

@@ -279,0 +293,0 @@ return (0, _shapedTree.foldMapShapedTree)(function (_ref6) {

62

dist/index.js

@@ -6,61 +6,63 @@ "use strict";

});
exports.LinkTap = exports.FeedbackStrategies = exports.Field = exports.ErrorsHelper = exports.ArrayField = exports.ObjectField = exports.Form = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; // strict
// Just re-exports and some masssaging
var _Form = require("./Form");
Object.defineProperty(exports, "LinkTap", {
enumerable: true,
get: function get() {
return _testutils.LinkTap;
}
});
Object.defineProperty(exports, "Form", {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Form).default;
return _Form.default;
}
});
var _ObjectField = require("./ObjectField");
Object.defineProperty(exports, "ObjectField", {
enumerable: true,
get: function get() {
return _interopRequireDefault(_ObjectField).default;
return _ObjectField.default;
}
});
var _ArrayField = require("./ArrayField");
Object.defineProperty(exports, "ArrayField", {
enumerable: true,
get: function get() {
return _interopRequireDefault(_ArrayField).default;
return _ArrayField.default;
}
});
var _ErrorsHelper = require("./ErrorsHelper");
Object.defineProperty(exports, "ErrorsHelper", {
enumerable: true,
get: function get() {
return _interopRequireDefault(_ErrorsHelper).default;
return _ErrorsHelper.default;
}
});
var _Field = require("./Field");
Object.defineProperty(exports, "Field", {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Field).default;
return _Field.default;
}
});
exports.FeedbackStrategies = void 0;
var _feedbackStrategies = require("./feedbackStrategies");
var _feedbackStrategies = _interopRequireWildcard(require("./feedbackStrategies"));
var _feedbackStrategies2 = _interopRequireDefault(_feedbackStrategies);
var _testutils = require("./testutils");
var _Form = _interopRequireDefault(require("./Form"));
var _ObjectField = _interopRequireDefault(require("./ObjectField"));
var _ArrayField = _interopRequireDefault(require("./ArrayField"));
var _ErrorsHelper = _interopRequireDefault(require("./ErrorsHelper"));
var _Field = _interopRequireDefault(require("./Field"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var mergedStrategies = _extends({}, _feedbackStrategies2.default, {
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var mergedStrategies = _objectSpread({}, _feedbackStrategies.default, {
and: _feedbackStrategies.and,

@@ -70,3 +72,3 @@ or: _feedbackStrategies.or,

});
exports.FeedbackStrategies = mergedStrategies;
exports.LinkTap = _testutils.LinkTap;
exports.FeedbackStrategies = mergedStrategies;

156

dist/ObjectField.js

@@ -6,31 +6,52 @@ "use strict";

});
exports.default = void 0;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var React = _interopRequireWildcard(require("react"));
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _Form = require("./Form");
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); // strict
var _formState3 = require("./formState");
var _react = require("react");
var _shapedTree = require("./shapedTree");
var React = _interopRequireWildcard(_react);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
var _Form = require("./Form");
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
var _formState3 = require("./formState");
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
var _shapedTree = require("./shapedTree");
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function makeLinks(formState, onChildChange, onChildBlur, onChildValidation) {

@@ -54,25 +75,30 @@ var _formState = _slicedToArray(formState, 1),

memo[k] = l;
return _extends({}, memo, _defineProperty({}, k, l));
return _objectSpread({}, memo, _defineProperty({}, k, l));
}, {});
}
var ObjectField = function (_React$Component) {
var ObjectField =
/*#__PURE__*/
function (_React$Component) {
_inherits(ObjectField, _React$Component);
function ObjectField() {
var _ref;
var _getPrototypeOf2;
var _temp, _this, _ret;
var _this;
_classCallCheck(this, ObjectField);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ObjectField.__proto__ || Object.getPrototypeOf(ObjectField)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ObjectField)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "state", {
nonce: 0
}, _this._handleChildChange = function (key, newChild) {
});
_defineProperty(_assertThisInitialized(_this), "_handleChildChange", function (key, newChild) {
var newFormState = (0, _formState3.replaceObjectChild)(key, newChild, _this.props.link.formState);
var oldValue = _this.props.link.formState[0];

@@ -83,3 +109,4 @@ var newValue = newFormState[0];

var nextFormState = void 0;
var nextFormState;
if (customValue) {

@@ -93,9 +120,11 @@ // Create a fresh form state for the new value.

_this.props.link.onChange((0, _formState3.setChanged)((0, _formState3.validate)(_this.props.validation, nextFormState)));
_this.props.link.onChange((0, _formState3.setChanged)((0, _formState3.validate)(_this.props.validation, nextFormState))); // Need to remount children so they will run validations
// Need to remount children so they will run validations
if (customValue) {
_this.forceChildRemount();
}
}, _this._handleChildBlur = function (key, childTree) {
});
_defineProperty(_assertThisInitialized(_this), "_handleChildBlur", function (key, childTree) {
var _this$props$link$form = _slicedToArray(_this.props.link.formState, 2),

@@ -106,3 +135,5 @@ _ = _this$props$link$form[0],

_this.props.link.onBlur((0, _shapedTree.mapRoot)(_formState3.setExtrasTouched, (0, _shapedTree.dangerouslyReplaceObjectChild)(key, childTree, tree)));
}, _this._handleChildValidation = function (key, childPath, errors) {
});
_defineProperty(_assertThisInitialized(_this), "_handleChildValidation", function (key, childPath, errors) {
var extendedPath = [{

@@ -112,4 +143,7 @@ type: "object",

}].concat(_toConsumableArray(childPath));
_this.props.link.onValidation(extendedPath, errors);
}, _temp), _possibleConstructorReturn(_this, _ret);
});
return _this;
}

@@ -120,7 +154,7 @@

value: function _initialValidate() {
var _props = this.props,
_props$link = _props.link,
formState = _props$link.formState,
onValidation = _props$link.onValidation,
validation = _props.validation;
var _this$props = this.props,
_this$props$link = _this$props.link,
formState = _this$props$link.formState,
onValidation = _this$props$link.onValidation,
validation = _this$props.validation;

@@ -145,5 +179,7 @@ var _formState2 = _slicedToArray(formState, 1),

value: function forceChildRemount() {
this.setState(function (_ref2) {
var nonce = _ref2.nonce;
return { nonce: nonce + 1 };
this.setState(function (_ref) {
var nonce = _ref.nonce;
return {
nonce: nonce + 1
};
});

@@ -155,19 +191,16 @@ }

var formState = this.props.link.formState;
var shouldShowError = this.props.formContext.shouldShowError;
var shouldShowError = this.context.shouldShowError;
var links = makeLinks(this.props.link.formState, this._handleChildChange, this._handleChildBlur, this._handleChildValidation);
return React.createElement(
React.Fragment,
{ key: this.state.nonce },
this.props.children(links, {
touched: (0, _formState3.getExtras)(formState).meta.touched,
changed: (0, _formState3.getExtras)(formState).meta.changed,
shouldShowErrors: shouldShowError((0, _formState3.getExtras)(formState).meta),
unfilteredErrors: (0, _formState3.flatRootErrors)(formState),
asyncValidationInFlight: false, // no validations on Form
valid: (0, _formState3.isValid)(formState),
value: formState[0]
})
);
return React.createElement(React.Fragment, {
key: this.state.nonce
}, this.props.children(links, {
touched: (0, _formState3.getExtras)(formState).meta.touched,
changed: (0, _formState3.getExtras)(formState).meta.changed,
shouldShowErrors: shouldShowError((0, _formState3.getExtras)(formState).meta),
unfilteredErrors: (0, _formState3.flatRootErrors)(formState),
asyncValidationInFlight: false,
// no validations on Form
valid: (0, _formState3.isValid)(formState),
value: formState[0]
}));
}

@@ -179,23 +212,12 @@ }]);

// Using a HOC here is not possible due to a Flow bug: https://github.com/facebook/flow/issues/6903
exports.default = ObjectField;
_defineProperty(ObjectField, "contextType", _Form.FormContext);
ObjectField.contextType = _Form.FormContext;
ObjectField.defaultProps = {
_defineProperty(ObjectField, "_contextType", _Form.FormContext);
_defineProperty(ObjectField, "defaultProps", {
validation: function validation() {
return [];
}
};
function wrap(props) {
return React.createElement(
_Form.FormContext.Consumer,
null,
function (formContext) {
return React.createElement(ObjectField, _extends({}, props, { formContext: formContext }));
}
);
}
wrap.defaultProps = ObjectField.defaultProps;
wrap._contextType = ObjectField.contextType;
exports.default = wrap;
});

140

dist/shapedTree.js

@@ -6,6 +6,2 @@ "use strict";

});
exports.rootPath = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; // strict
exports.treeFromValue = treeFromValue;

@@ -28,9 +24,8 @@ exports.shapePath = shapePath;

exports.getRootData = getRootData;
exports.rootPath = void 0;
var _tree = require("./tree");
var _invariant = require("./utils/invariant");
var _invariant = _interopRequireDefault(require("./utils/invariant"));
var _invariant2 = _interopRequireDefault(_invariant);
var _array = require("./utils/array");

@@ -40,20 +35,31 @@

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
// Shape is a phantom type used to track the shape of the Tree
// eslint-disable-next-line no-unused-vars
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
// A path on a shaped tree
// TODO(zach): Make this opaque
// eslint-disable-next-line no-unused-vars
var rootPath = exports.rootPath = function rootPath() {
function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var rootPath = function rootPath() {
return [];
};
}; // Take shape from value, data from nodeData
// Take shape from value, data from nodeData
exports.rootPath = rootPath;
function treeFromValue(value, nodeData) {

@@ -76,3 +82,3 @@ if (Array.isArray(value)) {

children: Object.keys(objectValue).reduce(function (children, k) {
return _extends({}, children, _defineProperty({}, k, treeFromValue(objectValue[k], nodeData)));
return _objectSpread({}, children, _defineProperty({}, k, treeFromValue(objectValue[k], nodeData)));
}, {})

@@ -100,11 +106,15 @@ };

var restPath = shapePath(data[firstPart.key], restParts);
if (restPath === null) {
return null;
}
return [firstPart].concat(_toConsumableArray(restPath));
} else if (firstPart.type === "array" && Array.isArray(data) && firstPart.index < data.length) {
var _restPath = shapePath(data[firstPart.index], restParts);
if (_restPath === null) {
return null;
}
return [firstPart].concat(_toConsumableArray(_restPath));

@@ -126,2 +136,3 @@ }

}
if (tree.type === "array") {

@@ -134,2 +145,3 @@ return {

}
return {

@@ -150,13 +162,17 @@ type: "leaf",

if (tree.type === "array") {
(0, _invariant2.default)(firstStep.type === "array", "Trying to take a non-array path into an array");
var newChild = updateAtPath(restStep, updater, tree.children[firstStep.index]);
// $FlowFixMe(zach): I think this is safe, might need GADTs for the type checker to understand why
(0, _invariant.default)(firstStep.type === "array", "Trying to take a non-array path into an array");
var newChild = updateAtPath(restStep, updater, tree.children[firstStep.index]); // $FlowFixMe(zach): I think this is safe, might need GADTs for the type checker to understand why
return dangerouslyReplaceArrayChild(firstStep.index, newChild, tree);
}
if (tree.type === "object") {
(0, _invariant2.default)(firstStep.type === "object", "Trying to take a non-object path into an object");
var _newChild = updateAtPath(restStep, updater, tree.children[firstStep.key]);
// $FlowFixMe(zach): I think this is safe, might need GADTs for the type checker to understand why
(0, _invariant.default)(firstStep.type === "object", "Trying to take a non-object path into an object");
var _newChild = updateAtPath(restStep, updater, tree.children[firstStep.key]); // $FlowFixMe(zach): I think this is safe, might need GADTs for the type checker to understand why
return dangerouslyReplaceObjectChild(firstStep.key, _newChild, tree);
}
throw new Error("unreachable");

@@ -167,4 +183,4 @@ }

if (tree.type === "array") {
(0, _invariant2.default)(Array.isArray(value), "value isn't an array");
(0, _invariant2.default)(value.length === tree.children.length, "value and tree children have different lengths");
(0, _invariant.default)(Array.isArray(value), "value isn't an array");
(0, _invariant.default)(value.length === tree.children.length, "value and tree children have different lengths");
tree.children.forEach(function (child, i) {

@@ -174,9 +190,19 @@ checkShape(value[i], child);

}
if (tree.type === "object") {
(0, _invariant2.default)(value instanceof Object, "value isn't an object in checkTree");
Object.keys(tree.children).forEach(function (k) {
checkShape(value[k], tree.children[k]);
(0, _invariant.default)(value instanceof Object, "value isn't an object in checkTree");
var valueEntries = Object.entries(value);
var childrenKeys = new Set(Object.keys(tree.children));
(0, _invariant.default)(valueEntries.length === childrenKeys.size, "value doesn't have the right number of keys");
valueEntries.forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
key = _ref2[0],
value = _ref2[1];
(0, _invariant.default)(childrenKeys.has(key));
checkShape(value, tree.children[key]);
});
}
// leaves are allowed to stand in for complex types in T
} // leaves are allowed to stand in for complex types in T
return tree;

@@ -186,3 +212,3 @@ }

function shapedArrayChild(index, tree) {
(0, _invariant2.default)(tree.type === "array", "Tried to get an array child of a non-array node");
(0, _invariant.default)(tree.type === "array", "Tried to get an array child of a non-array node");
return tree.children[index];

@@ -192,11 +218,11 @@ }

function shapedArrayChildren(tree) {
(0, _invariant2.default)(tree.type === "array", "Tried to get an array children of a non-array node");
(0, _invariant.default)(tree.type === "array", "Tried to get an array children of a non-array node");
return tree.children.map(function (x) {
return x;
});
}
} // TODO(zach): not sure what to do about this output variable
// TODO(zach): not sure what to do about this output variable
function shapedObjectChild(key, tree) {
(0, _invariant2.default)(tree.type === "object", "Tried to get object child of a non-object node");
(0, _invariant.default)(tree.type === "object", "Tried to get object child of a non-object node");
return tree.children[key];

@@ -217,2 +243,3 @@ }

}
if (tree.type === "array") {

@@ -225,2 +252,3 @@ return {

}
return {

@@ -230,19 +258,19 @@ type: "leaf",

};
}
} // Do not use this unless you really know what you are doing
// It is unsafe, and intended to bypass some checks
// Do not use this unless you really know what you are doing
// It is unsafe, and intended to bypass some checks
function dangerouslyReplaceObjectChild(key, child, tree) {
(0, _invariant2.default)(tree.type === "object", "Tried to replace child of a non-object node");
(0, _invariant.default)(tree.type === "object", "Tried to replace child of a non-object node");
return {
type: "object",
data: tree.data,
children: _extends({}, tree.children, _defineProperty({}, key, child))
children: _objectSpread({}, tree.children, _defineProperty({}, key, child))
};
}
} // Do not use this unless you really know what you are doing
// It is unsafe, and intended to bypass some checks
// Do not use this unless you really know what you are doing
// It is unsafe, and intended to bypass some checks
function dangerouslyReplaceArrayChild(index, child, tree) {
(0, _invariant2.default)(tree.type === "array", "Tried to replace child of a non-array node");
(0, _invariant.default)(tree.type === "array", "Tried to replace child of a non-array node");
return {

@@ -253,8 +281,8 @@ type: "array",

};
}
} // Do not use this unless you really know what you are doing
// It is intended to bypass some checks when modifying arrays
// Do not use this unless you really know what you are doing
// It is intended to bypass some checks when modifying arrays
function dangerouslySetChildren(children, tree) {
(0, _invariant2.default)(tree.type === "array", "Tried to set children of a non-array node");
(0, _invariant.default)(tree.type === "array", "Tried to set children of a non-array node");
return {

@@ -265,5 +293,5 @@ type: "array",

};
}
} // A leaf matches any shape
// A leaf matches any shape
function shapedLeaf(node) {

@@ -276,10 +304,10 @@ return (0, _tree.leaf)(node);

return (0, _tree.strictZipWith)(f, left, right);
}
} // Mapping doesn't change the shape
// Mapping doesn't change the shape
function mapShapedTree(f, tree) {
return (0, _tree.mapTree)(f, tree);
}
} // Fold a tree inorder
// Fold a tree inorder
function foldMapShapedTree(mapper, mempty, mappend, tree) {

@@ -286,0 +314,0 @@ return (0, _tree.foldMapTree)(mapper, mempty, mappend, tree);

432

dist/test/ArrayField.test.js
"use strict";
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var React = _interopRequireWildcard(require("react"));
var _react = require("react");
var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
var React = _interopRequireWildcard(_react);
var _ArrayField = _interopRequireDefault(require("../ArrayField"));
var _reactTestRenderer = require("react-test-renderer");
var _TestField = _interopRequireWildcard(require("./TestField"));
var _reactTestRenderer2 = _interopRequireDefault(_reactTestRenderer);
var _tools = require("./tools");
var _ArrayField = require("../ArrayField");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _ArrayField2 = _interopRequireDefault(_ArrayField);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
require("../types");
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
var _TestField = require("./TestField");
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
var _TestField2 = _interopRequireDefault(_TestField);
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
var _tools = require("./tools");
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
describe("ArrayField", function () {

@@ -34,26 +30,21 @@ describe("ArrayField is a field", function () {

var formState = (0, _tools.mockFormState)(["one", "two", "three"]);
var link = (0, _tools.mockLink)(formState);
var link = (0, _tools.mockLink)(formState); // $ExpectError
// $ExpectError
React.createElement(
_ArrayField2.default,
{ link: link, validation: function validation(_e) {
return [];
} },
function () {
return null;
React.createElement(_ArrayField.default, {
link: link,
validation: function validation(_e) {
return [];
}
);
React.createElement(
_ArrayField2.default,
{ link: link, validation: function validation(_e) {
return [];
} },
function () {
return null;
}, function () {
return null;
});
React.createElement(_ArrayField.default, {
link: link,
validation: function validation(_e) {
return [];
}
);
}, function () {
return null;
});
});
it("Sets errors.client and meta.succeeded when there are no errors", function () {

@@ -66,9 +57,8 @@ var validation = jest.fn(function () {

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link, validation: validation },
jest.fn(function () {
return null;
})
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link,
validation: validation
}, jest.fn(function () {
return null;
})));

@@ -86,3 +76,2 @@ expect(validation).toHaveBeenCalledTimes(1);

});
it("Sets errors.client and meta.succeeded when there are errors", function () {

@@ -95,9 +84,8 @@ var validation = jest.fn(function () {

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link, validation: validation },
jest.fn(function () {
return null;
})
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link,
validation: validation
}, jest.fn(function () {
return null;
})));

@@ -115,3 +103,2 @@ expect(validation).toHaveBeenCalledTimes(1);

});
it("Treats no validation as always passing", function () {

@@ -121,9 +108,7 @@ var formState = (0, _tools.mockFormState)([]);

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link },
jest.fn(function () {
return null;
})
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link
}, jest.fn(function () {
return null;
})));

@@ -139,6 +124,5 @@ expect(link.onValidation).toHaveBeenCalledTimes(1);

});
it("Passes additional information to its render function", function () {
var formState = (0, _tools.mockFormState)(["value"]); // $FlowFixMe
it("Passes additional information to its render function", function () {
var formState = (0, _tools.mockFormState)(["value"]);
// $FlowFixMe
formState[1].data.errors = {

@@ -153,7 +137,5 @@ server: ["A server error"],

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link
}, renderFn));

@@ -173,3 +155,2 @@ expect(renderFn).toHaveBeenCalled();

});
describe("An ArrayField disassembles an array into each item", function () {

@@ -184,7 +165,5 @@ it("breaks apart a link into an array of links", function () {

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link
}, renderFn));

@@ -196,26 +175,18 @@ expect(renderFn).toHaveBeenCalled();

});
it("has the correct type for the links object", function () {
var formState = (0, _tools.mockFormState)(["one", "two", "three"]);
var link = (0, _tools.mockLink)(formState);
React.createElement(
_ArrayField2.default,
{ link: link },
function (links) {
console.log(links);
return null;
}
);
React.createElement(
_ArrayField2.default,
{ link: link },
function (links) {
console.log(links);
return null;
}
);
React.createElement(_ArrayField.default, {
link: link
}, function (links) {
console.log(links);
return null;
});
React.createElement(_ArrayField.default, {
link: link
}, function (links) {
console.log(links);
return null;
});
});
it("calls onChange when a child changes", function () {

@@ -229,7 +200,5 @@ var formStateValue = ["one", "two", "three"];

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link
}, renderFn));

@@ -239,3 +208,2 @@ var arrayLinks = renderFn.mock.calls[0][0];

arrayLinks[1].onChange(newElementFormState);
expect(link.onChange).toHaveBeenCalled();

@@ -250,3 +218,2 @@ var newArrayFormState = link.onChange.mock.calls[0][0];

});
it("calls onBlur when a child is blurred", function () {

@@ -260,7 +227,5 @@ var formStateValue = ["one", "two", "three"];

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link
}, renderFn));

@@ -270,3 +235,2 @@ var arrayLinks = renderFn.mock.calls[0][0];

arrayLinks[0].onBlur(newElementTree);
expect(link.onBlur).toHaveBeenCalled();

@@ -280,3 +244,2 @@ var newArrayTree = link.onBlur.mock.calls[0][0];

});
it("calls onValidation when a child initially validates", function () {

@@ -290,14 +253,10 @@ var formStateValue = ["one", "two", "three"];

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link
}, renderFn));
var arrayLinks = renderFn.mock.calls[0][0];
arrayLinks[2].onValidation([], ["These are", "some errors"]);
expect(link.onValidation).toHaveBeenCalledTimes(2); // Important: the first call to onValidation is for the initial render validation
expect(link.onValidation).toHaveBeenCalledTimes(2);
// Important: the first call to onValidation is for the initial render validation
var _link$onValidation$mo4 = _slicedToArray(link.onValidation.mock.calls[1], 2),

@@ -307,6 +266,8 @@ path = _link$onValidation$mo4[0],

expect(path).toEqual([{ type: "array", index: 2 }]);
expect(path).toEqual([{
type: "array",
index: 2
}]);
expect(errors).toEqual(["These are", "some errors"]);
});
it("calls its validation when a child changes", function () {

@@ -323,14 +284,11 @@ var formStateValue = ["one", "two", "three"];

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link, validation: validation },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link,
validation: validation
}, renderFn));
expect(validation).toHaveBeenCalledTimes(1);
var arrayLinks = renderFn.mock.calls[0][0];
var newElementFormState = (0, _tools.mockFormState)("newOne");
arrayLinks[0].onChange(newElementFormState);
expect(validation).toHaveBeenCalledTimes(2);

@@ -340,3 +298,2 @@ expect(validation).toHaveBeenLastCalledWith(["newOne", "two", "three"]);

});
describe("An ArrayField provides a way to modify the array", function () {

@@ -352,7 +309,5 @@ describe("addField", function () {

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link
}, renderFn));

@@ -374,7 +329,6 @@ expect(renderFn).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ validation: validation, link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
validation: validation,
link: link
}, renderFn));

@@ -388,3 +342,2 @@ expect(validation).toHaveBeenCalledTimes(1);

addField(0, "zero");
expect(validation).toHaveBeenCalledTimes(2);

@@ -394,3 +347,2 @@ expect(validation).toHaveBeenLastCalledWith(["zero", "one", "two", "three"]);

});
describe("removeField", function () {

@@ -405,7 +357,5 @@ it("exposes removeField to remove an entry", function () {

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link
}, renderFn));

@@ -427,7 +377,6 @@ expect(renderFn).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ validation: validation, link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
validation: validation,
link: link
}, renderFn));

@@ -441,3 +390,2 @@ expect(validation).toHaveBeenCalledTimes(1);

removeField(1);
expect(validation).toHaveBeenCalledTimes(2);

@@ -447,3 +395,2 @@ expect(validation).toHaveBeenLastCalledWith(["one", "three"]);

});
describe("moveField", function () {

@@ -458,7 +405,5 @@ it("exposes moveField to move an entry", function () {

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link
}, renderFn));

@@ -480,7 +425,6 @@ expect(renderFn).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ validation: validation, link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
validation: validation,
link: link
}, renderFn));

@@ -494,3 +438,2 @@ expect(validation).toHaveBeenCalledTimes(1);

moveField(2, 1);
expect(validation).toHaveBeenCalledTimes(2);

@@ -500,3 +443,2 @@ expect(validation).toHaveBeenLastCalledWith(["one", "three", "two"]);

});
describe("addFields", function () {

@@ -511,7 +453,5 @@ it("exposes addFields to add an entry", function () {

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link
}, renderFn));

@@ -533,7 +473,6 @@ expect(renderFn).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ validation: validation, link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
validation: validation,
link: link
}, renderFn));

@@ -547,3 +486,2 @@ expect(validation).toHaveBeenCalledTimes(1);

addFields([[0, ["negative one", "zero"]], [3, ["four", "five"]]]);
expect(validation).toHaveBeenCalledTimes(2);

@@ -553,3 +491,2 @@ expect(validation).toHaveBeenLastCalledWith(["negative one", "zero", "one", "two", "three", "four", "five"]);

});
describe("filterFields", function () {

@@ -564,7 +501,5 @@ it("exposes filterFields to filter entries", function () {

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link
}, renderFn));

@@ -586,7 +521,6 @@ expect(renderFn).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ validation: validation, link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
validation: validation,
link: link
}, renderFn));

@@ -597,4 +531,3 @@ expect(validation).toHaveBeenCalledTimes(1);

_ = _renderFn$mock$calls$5[0],
filterFields = _renderFn$mock$calls$5[1].filterFields;
// remove numbers without "o" and the fourth element
filterFields = _renderFn$mock$calls$5[1].filterFields; // remove numbers without "o" and the fourth element

@@ -605,3 +538,2 @@

});
expect(validation).toHaveBeenCalledTimes(2);

@@ -611,3 +543,2 @@ expect(validation).toHaveBeenLastCalledWith(["one", "two"]);

});
describe("modifyFields", function () {

@@ -622,7 +553,5 @@ it("exposes modifyFields to add and remove entries atomically", function () {

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link
}, renderFn));

@@ -644,7 +573,6 @@ expect(renderFn).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ validation: validation, link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
validation: validation,
link: link
}, renderFn));

@@ -663,3 +591,2 @@ expect(validation).toHaveBeenCalledTimes(1);

});
expect(validation).toHaveBeenCalledTimes(2);

@@ -670,3 +597,2 @@ expect(validation).toHaveBeenLastCalledWith(["start", "two", "middle", "content", "three"]);

});
describe("customChange", function () {

@@ -683,3 +609,2 @@ it("allows the default change behavior to be overwritten with customChange", function () {

});
var customChange = jest.fn(function (_oldValue, _newValue) {

@@ -689,30 +614,22 @@ return ["uno", "dos", "tres"];

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{
link: link,
validation: validation,
customChange: customChange
},
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link,
validation: validation,
customChange: customChange
}, renderFn));
var arrayLinks = renderFn.mock.calls[0][0];
// call the child onChange
var arrayLinks = renderFn.mock.calls[0][0]; // call the child onChange
var newChildMeta = (0, _tools.mockFormState)("zwei");
arrayLinks[1].onChange(newChildMeta);
arrayLinks[1].onChange(newChildMeta); // customChange should be called with the correct args
// customChange should be called with the correct args
expect(customChange).toHaveBeenCalledTimes(1);
expect(customChange).toHaveBeenCalledWith(["one", "two", "three"], ["one", "zwei", "three"]);
expect(customChange).toHaveBeenCalledWith(["one", "two", "three"], ["one", "zwei", "three"]); // onChange should be called with the result of customChange
// onChange should be called with the result of customChange
expect(link.onChange).toHaveBeenCalledTimes(1);
expect(link.onChange).toHaveBeenCalledWith([["uno", "dos", "tres"], expect.anything()]);
expect(link.onChange).toHaveBeenCalledWith([["uno", "dos", "tres"], expect.anything()]); // Validated the result of customChange
// Validated the result of customChange
expect(validation).toHaveBeenCalledTimes(2);
expect(validation.mock.calls[1][0]).toEqual(["uno", "dos", "tres"]);
});
it("can return null to signal there was no custom change", function () {

@@ -728,3 +645,2 @@ var formStateInner = ["one", "two", "three"];

});
var customChange = jest.fn(function (_oldValue, _newValue) {

@@ -734,28 +650,20 @@ return null;

_reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{
link: link,
validation: validation,
customChange: customChange
},
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link,
validation: validation,
customChange: customChange
}, renderFn));
var arrayLinks = renderFn.mock.calls[0][0];
// call the child onChange
var arrayLinks = renderFn.mock.calls[0][0]; // call the child onChange
var newChildMeta = (0, _tools.mockFormState)("zwei");
arrayLinks[1].onChange(newChildMeta);
expect(customChange).toHaveBeenCalledTimes(1); // onChange should be called with the result of customChange
expect(customChange).toHaveBeenCalledTimes(1);
// onChange should be called with the result of customChange
expect(link.onChange).toHaveBeenCalledTimes(1);
expect(link.onChange).toHaveBeenCalledWith([["one", "zwei", "three"], expect.anything()]);
expect(link.onChange).toHaveBeenCalledWith([["one", "zwei", "three"], expect.anything()]); // Validated the result of customChange
// Validated the result of customChange
expect(validation).toHaveBeenCalledTimes(2);
expect(validation.mock.calls[1][0]).toEqual(["one", "zwei", "three"]);
});
it("doesn't break validations for child fields", function () {

@@ -765,7 +673,5 @@ var formStateInner = ["one", "two", "three"];

var link = (0, _tools.mockLink)(formState);
var customChange = jest.fn(function (_oldValue, _newValue) {
return ["1", "2"];
});
var childValidation = jest.fn(function () {

@@ -775,17 +681,14 @@ return ["This is an error"];

var renderer = _reactTestRenderer2.default.create(React.createElement(
_ArrayField2.default,
{ link: link, customChange: customChange },
function (links) {
return React.createElement(
React.Fragment,
null,
links.map(function (link, i) {
return React.createElement(_TestField2.default, { key: i, link: link, validation: childValidation });
})
);
}
));
// 6 validations:
var renderer = _reactTestRenderer.default.create(React.createElement(_ArrayField.default, {
link: link,
customChange: customChange
}, function (links) {
return React.createElement(React.Fragment, null, links.map(function (link, i) {
return React.createElement(_TestField.default, {
key: i,
link: link,
validation: childValidation
});
}));
})); // 6 validations:
// 1) Child initial validation x3

@@ -795,20 +698,27 @@ // 2) Parent initial validation

// (No parent onValidation call, because it will use onChange)
// 1) and 2)
// 1) and 2)
expect(link.onValidation).toHaveBeenCalledTimes(4);
link.onValidation.mockClear();
var inner = renderer.root.findAllByType(_TestField.TestInput)[0];
inner.instance.change("zach");
inner.instance.change("zach"); // 3)
// 3)
expect(link.onValidation).toHaveBeenCalledTimes(3);
expect(link.onValidation).toHaveBeenCalledWith([{ type: "array", index: 0 }], ["This is an error"]);
expect(link.onValidation).toHaveBeenCalledWith([{ type: "array", index: 1 }], ["This is an error"]);
// NOTE(zach): This may be surprising since there are only two values in
expect(link.onValidation).toHaveBeenCalledWith([{
type: "array",
index: 0
}], ["This is an error"]);
expect(link.onValidation).toHaveBeenCalledWith([{
type: "array",
index: 1
}], ["This is an error"]); // NOTE(zach): This may be surprising since there are only two values in
// the new value, but there is no guarantee that the next commit will
// have occurred yet.
expect(link.onValidation).toHaveBeenCalledWith([{ type: "array", index: 2 }], ["This is an error"]);
// onChange should be called with the result of customChange
expect(link.onValidation).toHaveBeenCalledWith([{
type: "array",
index: 2
}], ["This is an error"]); // onChange should be called with the result of customChange
expect(link.onChange).toHaveBeenCalledTimes(1);

@@ -815,0 +725,0 @@ expect(link.onChange).toHaveBeenCalledWith([["1", "2"], {

63

dist/test/feedbackStrategies.test.js
"use strict";
var _feedbackStrategies = require("../feedbackStrategies");
var _feedbackStrategies = _interopRequireWildcard(require("../feedbackStrategies"));
var _feedbackStrategies2 = _interopRequireDefault(_feedbackStrategies);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
describe("feedbackStrategies", function () {

@@ -13,64 +11,76 @@ describe("provided strategies", function () {

it("always returns true", function () {
expect(_feedbackStrategies2.default.Always()).toBe(true);
expect(_feedbackStrategies.default.Always()).toBe(true);
});
});
describe("Touched", function () {
it("returns true when the field is touched", function () {
// $FlowFixMe
expect(_feedbackStrategies2.default.Touched(null, { touched: true })).toBe(true);
expect(_feedbackStrategies.default.Touched(null, {
touched: true
})).toBe(true);
});
it("returns false when the field is not touched", function () {
// $FlowFixMe
expect(_feedbackStrategies2.default.Touched(null, { touched: false })).toBe(false);
expect(_feedbackStrategies.default.Touched(null, {
touched: false
})).toBe(false);
});
});
describe("Changed", function () {
it("returns true when the field is changed", function () {
// $FlowFixMe
expect(_feedbackStrategies2.default.Changed(null, { changed: true })).toBe(true);
expect(_feedbackStrategies.default.Changed(null, {
changed: true
})).toBe(true);
});
it("returns false when the field is not changed", function () {
// $FlowFixMe
expect(_feedbackStrategies2.default.Changed(null, { changed: false })).toBe(false);
expect(_feedbackStrategies.default.Changed(null, {
changed: false
})).toBe(false);
});
});
describe("ClientValidationSucceeded", function () {
it("returns true when the field has passed client validations in the past", function () {
expect(
// $FlowFixMe
_feedbackStrategies2.default.ClientValidationSucceeded(null, { succeeded: true })).toBe(true);
expect( // $FlowFixMe
_feedbackStrategies.default.ClientValidationSucceeded(null, {
succeeded: true
})).toBe(true);
});
it("returns false when the field has not passed client validations in the past", function () {
expect(
// $FlowFixMe
_feedbackStrategies2.default.ClientValidationSucceeded(null, { succeeded: false })).toBe(false);
expect( // $FlowFixMe
_feedbackStrategies.default.ClientValidationSucceeded(null, {
succeeded: false
})).toBe(false);
});
});
describe("Pristine", function () {
it("returns true when the form is pristine", function () {
// $FlowFixMe
expect(_feedbackStrategies2.default.Pristine({ pristine: true })).toBe(true);
expect(_feedbackStrategies.default.Pristine({
pristine: true
})).toBe(true);
});
it("returns false when the form is not pristine", function () {
// $FlowFixMe
expect(_feedbackStrategies2.default.Pristine({ pristine: false })).toBe(false);
expect(_feedbackStrategies.default.Pristine({
pristine: false
})).toBe(false);
});
});
describe("Submitted", function () {
it("returns true when the form is submitted", function () {
// $FlowFixMe
expect(_feedbackStrategies2.default.Submitted({ submitted: true })).toBe(true);
expect(_feedbackStrategies.default.Submitted({
submitted: true
})).toBe(true);
});
it("returns false when the form is not submitted", function () {
// $FlowFixMe
expect(_feedbackStrategies2.default.Submitted({ submitted: false })).toBe(false);
expect(_feedbackStrategies.default.Submitted({
submitted: false
})).toBe(false);
});
});
});
describe("combining strategies", function () {

@@ -80,2 +90,3 @@ var t = function t() {

};
var f = function f() {

@@ -98,3 +109,2 @@ return false;

});
describe("or()", function () {

@@ -108,3 +118,2 @@ it("behaves like boolean disjunction", function () {

});
describe("not()", function () {

@@ -111,0 +120,0 @@ it("behaves like boolean negation", function () {

185

dist/test/Field.test.js
"use strict";
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = _interopRequireWildcard(require("react"));
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
var _react = require("react");
var _Field = _interopRequireDefault(require("../Field"));
var React = _interopRequireWildcard(_react);
var _tools = require("./tools");
var _reactTestRenderer = require("react-test-renderer");
var _TestField = _interopRequireWildcard(require("./TestField"));
var _reactTestRenderer2 = _interopRequireDefault(_reactTestRenderer);
var _shapedTree = require("../shapedTree");
var _Field = require("../Field");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _Field2 = _interopRequireDefault(_Field);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
require("../types");
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
var _tools = require("./tools");
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var _TestField = require("./TestField");
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
var _TestField2 = _interopRequireDefault(_TestField);
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
var _shapedTree = require("../shapedTree");
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
describe("Field", function () {

@@ -37,26 +35,21 @@ describe("validates on mount", function () {

var formState = (0, _tools.mockFormState)("Hello world.");
var link = (0, _tools.mockLink)(formState);
var link = (0, _tools.mockLink)(formState); // $ExpectError
// $ExpectError
React.createElement(
_Field2.default,
{ link: link, validation: function validation(_e) {
return [];
} },
function () {
return null;
React.createElement(_Field.default, {
link: link,
validation: function validation(_e) {
return [];
}
);
React.createElement(
_Field2.default,
{ link: link, validation: function validation(_e) {
return [];
} },
function () {
return null;
}, function () {
return null;
});
React.createElement(_Field.default, {
link: link,
validation: function validation(_e) {
return [];
}
);
}, function () {
return null;
});
});
it("Sets errors.client and meta.succeeded when there are no errors", function () {

@@ -69,3 +62,6 @@ var formState = (0, _tools.mockFormState)("Hello world.");

_reactTestRenderer2.default.create(React.createElement(_TestField2.default, { link: link, validation: validation }));
_reactTestRenderer.default.create(React.createElement(_TestField.default, {
link: link,
validation: validation
}));

@@ -82,3 +78,2 @@ expect(validation).toHaveBeenCalledTimes(1);

});
it("Sets errors.client and meta.succeeded when there are errors", function () {

@@ -91,3 +86,6 @@ var formState = (0, _tools.mockFormState)("Hello world.");

_reactTestRenderer2.default.create(React.createElement(_TestField2.default, { link: link, validation: validation }));
_reactTestRenderer.default.create(React.createElement(_TestField.default, {
link: link,
validation: validation
}));

@@ -104,3 +102,2 @@ expect(validation).toHaveBeenCalledTimes(1);

});
it("Counts as successfully validated if there is no validation", function () {

@@ -110,3 +107,5 @@ var formState = (0, _tools.mockFormState)("Hello world.");

_reactTestRenderer2.default.create(React.createElement(_TestField2.default, { link: link }));
_reactTestRenderer.default.create(React.createElement(_TestField.default, {
link: link
}));

@@ -123,3 +122,2 @@ expect(link.onValidation).toHaveBeenCalledTimes(1);

});
it("calls the link onChange with new values and correct meta", function () {

@@ -129,5 +127,7 @@ var formState = (0, _tools.mockFormState)("Hello world.");

var renderer = _reactTestRenderer2.default.create(React.createElement(_TestField2.default, { link: link }));
var renderer = _reactTestRenderer.default.create(React.createElement(_TestField.default, {
link: link
}));
var inner = renderer.root.findByType(_TestField.TestInput);
expect(link.onChange).toHaveBeenCalledTimes(0);

@@ -150,3 +150,2 @@ inner.instance.change("You've got mail");

});
it("calls the link onBlur with correct meta", function () {

@@ -156,9 +155,10 @@ var formState = (0, _tools.mockFormState)("");

var renderer = _reactTestRenderer2.default.create(React.createElement(_TestField2.default, { link: link }));
var renderer = _reactTestRenderer.default.create(React.createElement(_TestField.default, {
link: link
}));
var inner = renderer.root.findByType(_TestField.TestInput);
expect(link.onBlur).toHaveBeenCalledTimes(0);
inner.instance.blur();
expect(link.onBlur).toHaveBeenCalledTimes(1);
var tree = link.onBlur.mock.calls[0][0];

@@ -173,7 +173,6 @@ expect(tree.data).toMatchObject({

});
it("flattens errors for the inner component", function () {
var formState = (0, _tools.mockFormState)("");
formState[1] = (0, _shapedTree.mapRoot)(function (oldRoot) {
return _extends({}, oldRoot, {
return _objectSpread({}, oldRoot, {
errors: {

@@ -187,62 +186,46 @@ client: ["Some", "client", "errors"],

var renderer = _reactTestRenderer2.default.create(React.createElement(_TestField2.default, { link: link }));
var renderer = _reactTestRenderer.default.create(React.createElement(_TestField.default, {
link: link
}));
var inner = renderer.root.findByType(_TestField.TestInput);
expect(inner.props.errors).toEqual(["Some", "client", "errors", "Server errors", "go here"]);
});
it("Passes value of the right type to its render function", function () {
var formState = (0, _tools.mockFormState)("Hello there");
var link = (0, _tools.mockLink)(formState);
React.createElement(
_Field2.default,
{ link: link },
function (_value) {
return null;
}
);
React.createElement(
_Field2.default,
{ link: link },
function (_value) {
return null;
}
);
React.createElement(_Field.default, {
link: link
}, function (_value) {
return null;
});
React.createElement(_Field.default, {
link: link
}, function (_value) {
return null;
});
});
it("Passes onChange of the right type to its render function", function () {
var formState = (0, _tools.mockFormState)("Hello there");
var link = (0, _tools.mockLink)(formState);
React.createElement(_Field.default, {
link: link
}, function (_value, _errors, _onChange) {
return null;
}); // $ExpectError
React.createElement(
_Field2.default,
{ link: link },
function (_value, _errors, _onChange) {
return null;
}
);
// $ExpectError
React.createElement(
_Field2.default,
{ link: link },
function (_value, _errors, _onChange) {
return null;
}
);
React.createElement(
_Field2.default,
{ link: link },
function (_value, _errors, _onChange) {
return null;
}
);
React.createElement(_Field.default, {
link: link
}, function (_value, _errors, _onChange) {
return null;
});
React.createElement(_Field.default, {
link: link
}, function (_value, _errors, _onChange) {
return null;
});
});
it("Passes additional information to its render function", function () {
var formState = (0, _tools.mockFormState)(10); // $FlowFixMe
it("Passes additional information to its render function", function () {
var formState = (0, _tools.mockFormState)(10);
// $FlowFixMe
formState[1].data.errors = {

@@ -257,7 +240,5 @@ server: ["A server error"],

_reactTestRenderer2.default.create(React.createElement(
_Field2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_Field.default, {
link: link
}, renderFn));

@@ -264,0 +245,0 @@ expect(renderFn).toHaveBeenCalled();

616

dist/test/Form.test.js
"use strict";
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var React = _interopRequireWildcard(require("react"));
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
var _react = require("react");
var _feedbackStrategies = _interopRequireDefault(require("../feedbackStrategies"));
var React = _interopRequireWildcard(_react);
var _Form = _interopRequireWildcard(require("../Form"));
var _reactTestRenderer = require("react-test-renderer");
var _ObjectField = _interopRequireDefault(require("../ObjectField"));
var _reactTestRenderer2 = _interopRequireDefault(_reactTestRenderer);
var _ArrayField = _interopRequireDefault(require("../ArrayField"));
var _feedbackStrategies = require("../feedbackStrategies");
var _Field = _interopRequireDefault(require("../Field"));
var _feedbackStrategies2 = _interopRequireDefault(_feedbackStrategies);
var _tools = require("./tools");
var _Form = require("../Form");
var _TestField = _interopRequireWildcard(require("./TestField"));
var _Form2 = _interopRequireDefault(_Form);
var _shapedTree = require("../shapedTree");
var _ObjectField = require("../ObjectField");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _ObjectField2 = _interopRequireDefault(_ObjectField);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
var _ArrayField = require("../ArrayField");
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
var _ArrayField2 = _interopRequireDefault(_ArrayField);
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
var _Field = require("../Field");
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
var _Field2 = _interopRequireDefault(_Field);
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var _tools = require("./tools");
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
var _TestField = require("./TestField");
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var _TestField2 = _interopRequireDefault(_TestField);
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
var _shapedTree = require("../shapedTree");
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var NaughtyRenderingInput = function (_React$Component) {
var NaughtyRenderingInput =
/*#__PURE__*/
function (_React$Component) {
_inherits(NaughtyRenderingInput, _React$Component);

@@ -59,3 +61,3 @@

return _possibleConstructorReturn(this, (NaughtyRenderingInput.__proto__ || Object.getPrototypeOf(NaughtyRenderingInput)).apply(this, arguments));
return _possibleConstructorReturn(this, _getPrototypeOf(NaughtyRenderingInput).apply(this, arguments));
}

@@ -79,14 +81,10 @@

function NaughtyRenderingField(props) {
return React.createElement(
_Field2.default,
props,
function (value, errors, onChange, onBlur) {
return React.createElement(NaughtyRenderingInput, {
value: value,
errors: errors,
onChange: onChange,
onBlur: onBlur
});
}
);
return React.createElement(_Field.default, props, function (value, errors, onChange, onBlur) {
return React.createElement(NaughtyRenderingInput, {
value: value,
errors: errors,
onChange: onChange,
onBlur: onBlur
});
});
}

@@ -101,15 +99,12 @@

});
_reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: 1,
feedbackStrategy: _feedbackStrategies2.default.Always,
onSubmit: onSubmit,
serverErrors: { "/": ["Server error", "Another server error"] }
},
renderFn
));
_reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: 1,
onSubmit: onSubmit,
serverErrors: {
"/": ["Server error", "Another server error"]
}
}, renderFn));
expect(renderFn).toHaveBeenCalled();
var link = renderFn.mock.calls[0][0];

@@ -137,3 +132,2 @@ (0, _tools.expectLink)(link);

});
it("parses and sets complex server errors", function () {

@@ -144,23 +138,22 @@ var onSubmit = jest.fn();

});
_reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: {
simple: 3,
complex: [{ inner: "hello" }, { inner: "there" }]
},
feedbackStrategy: _feedbackStrategies2.default.Always,
onSubmit: onSubmit,
serverErrors: {
"/": ["Root error"],
"/simple": ["One", "level", "down"],
"/complex": [],
"/complex/0": ["in an", "array"]
}
_reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: {
simple: 3,
complex: [{
inner: "hello"
}, {
inner: "there"
}]
},
renderFn
));
onSubmit: onSubmit,
serverErrors: {
"/": ["Root error"],
"/simple": ["One", "level", "down"],
"/complex": [],
"/complex/0": ["in an", "array"]
}
}, renderFn));
expect(renderFn).toHaveBeenCalled();
var link = renderFn.mock.calls[0][0];

@@ -171,4 +164,3 @@ (0, _tools.expectLink)(link);

_ = _link$formState2[0],
tree = _link$formState2[1];
// Cross your fingers
tree = _link$formState2[1]; // Cross your fingers

@@ -187,3 +179,2 @@

});
it("updates the server errors", function () {

@@ -194,48 +185,33 @@ var onSubmit = jest.fn();

});
var renderer = _reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: {
array: []
},
feedbackStrategy: _feedbackStrategies2.default.Always,
onSubmit: onSubmit,
serverErrors: {
"/array": ["Cannot be empty"]
}
var renderer = _reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: {
array: []
},
function (link) {
return React.createElement(
_ObjectField2.default,
{ link: link },
renderFn
);
onSubmit: onSubmit,
serverErrors: {
"/array": ["Cannot be empty"]
}
));
}, function (link) {
return React.createElement(_ObjectField.default, {
link: link
}, renderFn);
}));
expect(renderFn).toHaveBeenCalled();
var links = renderFn.mock.calls[0][0];
var newFormState = (0, _tools.mockFormState)([1]);
links.array.onChange(newFormState);
var anotherRenderFn = jest.fn();
renderer.update(React.createElement(
_Form2.default,
{
initialValue: {
array: []
},
feedbackStrategy: _feedbackStrategies2.default.Always,
onSubmit: onSubmit,
serverErrors: {
"/array": [],
"/array/0": ["inner error"]
}
renderer.update(React.createElement(_Form.default, {
initialValue: {
array: []
},
anotherRenderFn
));
onSubmit: onSubmit,
serverErrors: {
"/array": [],
"/array/0": ["inner error"]
}
}, anotherRenderFn));
expect(anotherRenderFn).toHaveBeenCalled();
var link = anotherRenderFn.mock.calls[0][0];

@@ -245,4 +221,3 @@

_ = _link$formState3[0],
tree = _link$formState3[1];
// Cross your fingers
tree = _link$formState3[1]; // Cross your fingers

@@ -257,66 +232,50 @@

});
it("collects the initial validations", function () {
// This test is not very unit-y, but that's okay! It's more useful to
// know that it's working with ArrayField and ObjectField and Field
var onSubmit = jest.fn();
var onSubmit = jest.fn();
var renderer = _reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: {
errors: "foo",
noErrors: "bar",
array: ["baz", "quux"]
},
feedbackStrategy: _feedbackStrategies2.default.Always,
onSubmit: onSubmit,
serverErrors: null
var renderer = _reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: {
errors: "foo",
noErrors: "bar",
array: ["baz", "quux"]
},
function (link) {
return React.createElement(
_ObjectField2.default,
{ link: link, validation: function validation() {
return ["Toplevel error"];
} },
function (link) {
return React.createElement(
React.Fragment,
null,
React.createElement(_TestField2.default, {
link: link.errors,
validation: function validation() {
return ["Two", "errors"];
}
}),
React.createElement(_TestField2.default, { link: link.noErrors }),
React.createElement(
_ArrayField2.default,
{
link: link.array,
validation: function validation() {
return ["Array errors"];
}
},
function (links) {
return links.map(function (link, i) {
return React.createElement(_TestField2.default, {
key: i,
link: link,
validation: i === 1 ? function () {
return ["Errors on the second item"];
} : function () {
return [];
}
});
});
}
)
);
onSubmit: onSubmit
}, function (link) {
return React.createElement(_ObjectField.default, {
link: link,
validation: function validation() {
return ["Toplevel error"];
}
}, function (link) {
return React.createElement(React.Fragment, null, React.createElement(_TestField.default, {
link: link.errors,
validation: function validation() {
return ["Two", "errors"];
}
);
}
));
}), React.createElement(_TestField.default, {
link: link.noErrors
}), React.createElement(_ArrayField.default, {
link: link.array,
validation: function validation() {
return ["Array errors"];
}
}, function (links) {
return links.map(function (link, i) {
return React.createElement(_TestField.default, {
key: i,
link: link,
validation: i === 1 ? function () {
return ["Errors on the second item"];
} : function () {
return [];
}
});
});
}));
});
})); // Cross your fingers
// Cross your fingers
var root = (0, _shapedTree.forgetShape)(renderer.root.instance.state.formState[1]);

@@ -341,43 +300,31 @@ expect(root.data.errors.client).toEqual(["Toplevel error"]);

});
it("doesn't break on validation when given an input with bad behaviour", function () {
var onSubmit = jest.fn();
var renderer = _reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: {
naughty: "foo",
nice: "bar"
},
feedbackStrategy: _feedbackStrategies2.default.Always,
onSubmit: onSubmit,
serverErrors: null
var renderer = _reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: {
naughty: "foo",
nice: "bar"
},
function (link) {
return React.createElement(
_ObjectField2.default,
{ link: link, validation: function validation() {
return ["Toplevel error"];
} },
function (link) {
return React.createElement(
React.Fragment,
null,
React.createElement(NaughtyRenderingField, {
link: link.naughty,
validation: function validation() {
return ["Naughty", "errors"];
}
}),
React.createElement(_TestField2.default, {
link: link.nice,
validation: function validation() {
return ["Nice", "errors"];
}
})
);
onSubmit: onSubmit
}, function (link) {
return React.createElement(_ObjectField.default, {
link: link,
validation: function validation() {
return ["Toplevel error"];
}
}, function (link) {
return React.createElement(React.Fragment, null, React.createElement(NaughtyRenderingField, {
link: link.naughty,
validation: function validation() {
return ["Naughty", "errors"];
}
);
}
));
}), React.createElement(_TestField.default, {
link: link.nice,
validation: function validation() {
return ["Nice", "errors"];
}
}));
});
}));

@@ -388,5 +335,4 @@ var formState = renderer.root.instance.state.formState;

nice: "bar"
});
}); // Cross your fingers
// Cross your fingers
var root = formState[1];

@@ -399,3 +345,2 @@ expect(root.data.errors.client).toEqual(["Toplevel error"]);

});
it("changes when link calls onChange", function () {

@@ -406,21 +351,13 @@ var onSubmit = jest.fn();

});
var renderer = _reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: 1,
feedbackStrategy: _feedbackStrategies2.default.Always,
onSubmit: onSubmit,
serverErrors: null
},
renderFn
));
var renderer = _reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: 1,
onSubmit: onSubmit
}, renderFn));
var link = renderFn.mock.calls[0][0];
var newFormState = (0, _tools.mockFormState)(2);
link.onChange(newFormState);
expect(renderer.root.instance.state.formState).toBe(newFormState);
});
it("changes when link calls onBlur", function () {

@@ -431,13 +368,8 @@ var onSubmit = jest.fn();

});
var renderer = _reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: 1,
feedbackStrategy: _feedbackStrategies2.default.Always,
onSubmit: onSubmit,
serverErrors: null
},
renderFn
));
var renderer = _reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: 1,
onSubmit: onSubmit
}, renderFn));
var link = renderFn.mock.calls[0][0];

@@ -451,7 +383,5 @@

link.onBlur(newTree);
expect(renderer.root.instance.state.formState[1]).toBe(newTree);
});
});
describe("Form manages form-level meta information", function () {

@@ -464,27 +394,16 @@ it("tracks whether the form has been modified", function () {

var renderFn = jest.fn(function () {
return React.createElement(
_Form.FormContext.Consumer,
null,
contextExtractor
);
return React.createElement(_Form.FormContext.Consumer, null, contextExtractor);
});
_reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: 1,
feedbackStrategy: _feedbackStrategies2.default.Always,
onSubmit: onSubmit,
serverErrors: { "/": ["Server error", "Another server error"] }
},
renderFn
));
_reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: 1,
onSubmit: onSubmit
}, renderFn));
expect(contextExtractor).toHaveBeenCalledWith(expect.objectContaining({
pristine: true
}));
var link = renderFn.mock.calls[0][0];
var nextFormState = (0, _tools.mockFormState)(2);
link.onChange(nextFormState);
expect(contextExtractor).toHaveBeenLastCalledWith(expect.objectContaining({

@@ -494,3 +413,2 @@ pristine: false

});
it("tracks whether the form has been submitted", function () {

@@ -501,26 +419,15 @@ var contextExtractor = jest.fn(function () {

var renderFn = jest.fn(function () {
return React.createElement(
_Form.FormContext.Consumer,
null,
contextExtractor
);
return React.createElement(_Form.FormContext.Consumer, null, contextExtractor);
});
_reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: 1,
feedbackStrategy: _feedbackStrategies2.default.Always,
onSubmit: jest.fn(),
serverErrors: { "/": ["Server error", "Another server error"] }
},
renderFn
));
_reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: 1,
onSubmit: jest.fn()
}, renderFn));
expect(contextExtractor).toHaveBeenCalledWith(expect.objectContaining({
submitted: false
}));
var onSubmit = renderFn.mock.calls[0][1];
onSubmit();
expect(contextExtractor).toHaveBeenLastCalledWith(expect.objectContaining({

@@ -530,3 +437,2 @@ submitted: true

});
it("gives children a shouldShowError", function () {

@@ -537,20 +443,12 @@ var onSubmit = jest.fn();

});
var renderFn = function renderFn() {
return React.createElement(
_Form.FormContext.Consumer,
null,
contextExtractor
);
return React.createElement(_Form.FormContext.Consumer, null, contextExtractor);
};
_reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: 1,
feedbackStrategy: _feedbackStrategies2.default.Always,
onSubmit: onSubmit,
serverErrors: { "/": ["Server error", "Another server error"] }
},
renderFn
));
_reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: 1,
onSubmit: onSubmit
}, renderFn));
expect(contextExtractor).toHaveBeenCalledWith(expect.objectContaining({

@@ -560,3 +458,2 @@ shouldShowError: expect.any(Function)

});
it("Passes additional information to its render function", function () {

@@ -567,12 +464,10 @@ var renderFn = jest.fn(function () {

_reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: 1,
feedbackStrategy: _feedbackStrategies2.default.Touched,
onSubmit: jest.fn(),
serverErrors: { "/": ["Server error", "Another server error"] }
},
renderFn
));
_reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: 1,
feedbackStrategy: _feedbackStrategies.default.Touched,
onSubmit: jest.fn(),
serverErrors: {
"/": ["Server error", "Another server error"]
}
}, renderFn));

@@ -591,3 +486,2 @@ expect(renderFn).toHaveBeenCalledWith(expect.anything(), expect.anything(), expect.objectContaining({

});
it("Calls onSubmit with the value when submitted", function () {

@@ -599,75 +493,49 @@ var onSubmit = jest.fn();

var renderFn = jest.fn(function () {
return React.createElement(
_Form.FormContext.Consumer,
null,
contextExtractor
);
return React.createElement(_Form.FormContext.Consumer, null, contextExtractor);
});
_reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: 1,
feedbackStrategy: _feedbackStrategies2.default.Always,
onSubmit: onSubmit,
serverErrors: { "/": ["Server error", "Another server error"] }
},
renderFn
));
_reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: 1,
onSubmit: onSubmit
}, renderFn));
expect(onSubmit).toHaveBeenCalledTimes(0);
var linkOnSubmit = renderFn.mock.calls[0][1];
linkOnSubmit();
expect(onSubmit).toHaveBeenCalledTimes(1);
expect(onSubmit).toHaveBeenLastCalledWith(1, undefined);
});
it("Calls onSubmit with extra info when submitted", function () {
var onSubmit = jest.fn();
var renderFn = jest.fn();
_reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: 1,
feedbackStrategy: _feedbackStrategies2.default.Always,
onSubmit: onSubmit,
serverErrors: { "/": ["Server error", "Another server error"] }
},
renderFn
));
_reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: 1,
onSubmit: onSubmit
}, renderFn));
expect(onSubmit).toHaveBeenCalledTimes(0);
var linkOnSubmit = renderFn.mock.calls[0][1];
linkOnSubmit("extra");
expect(onSubmit).toHaveBeenCalledTimes(1);
expect(onSubmit).toHaveBeenLastCalledWith(expect.anything(), "extra");
});
it("Enforces types on onSubmit", function () {
var onSubmit = function onSubmit() {};
_reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: 1,
feedbackStrategy: _feedbackStrategies2.default.Always,
onSubmit: onSubmit,
serverErrors: { "/": ["Server error", "Another server error"] }
},
function (_, onSubmit) {
return React.createElement("button", {
onClick: function onClick() {
// $ExpectError
onSubmit();
// $ExpectError
onSubmit("hello");
onSubmit("extra");
}
});
}
));
_reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: 1,
onSubmit: onSubmit
}, function (_, onSubmit) {
return React.createElement("button", {
onClick: function onClick() {
// $ExpectError
onSubmit(); // $ExpectError
onSubmit("hello");
onSubmit("extra");
}
});
}));
});
it("Calls onChange when the value is changed", function () {

@@ -678,50 +546,36 @@ var onChange = jest.fn();

});
_reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: 1,
feedbackStrategy: _feedbackStrategies2.default.Always,
onChange: onChange,
serverErrors: { "/": ["Server error", "Another server error"] }
},
renderFn
));
_reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: 1,
onChange: onChange
}, renderFn));
var link = renderFn.mock.calls[0][0];
var nextFormState = (0, _tools.mockFormState)(2);
link.onChange(nextFormState);
expect(onChange).toHaveBeenCalledWith(2);
});
it("Calls onValidation when a part of the value is validated", function () {
var onValidation = jest.fn();
var renderer = _reactTestRenderer2.default.create(React.createElement(
_Form2.default,
{
initialValue: "",
feedbackStrategy: _feedbackStrategies2.default.Always,
onValidation: onValidation,
serverErrors: { "/": ["Server error", "Another server error"] }
},
function (link) {
return React.createElement(_TestField2.default, {
link: link,
validation: function validation(s) {
if (s.length > 0) {
return [];
} else {
return ["No blank strings"];
}
var renderer = _reactTestRenderer.default.create(React.createElement(_Form.default, {
initialValue: "",
onValidation: onValidation
}, function (link) {
return React.createElement(_TestField.default, {
link: link,
validation: function validation(s) {
if (s.length > 0) {
return [];
} else {
return ["No blank strings"];
}
});
}
));
}
});
}));
expect(onValidation).toHaveBeenCalledTimes(1);
expect(onValidation).toHaveBeenLastCalledWith(false);
var inner = renderer.root.findByType(_TestField.TestInput);
inner.instance.change("zach");
expect(onValidation).toHaveBeenCalledTimes(2);

@@ -728,0 +582,0 @@ expect(onValidation).toHaveBeenLastCalledWith(true);

375

dist/test/ObjectField.test.js
"use strict";
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var React = _interopRequireWildcard(require("react"));
var _react = require("react");
var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
var React = _interopRequireWildcard(_react);
var _Form = require("../Form");
var _reactTestRenderer = require("react-test-renderer");
var _ObjectField = _interopRequireDefault(require("../ObjectField"));
var _reactTestRenderer2 = _interopRequireDefault(_reactTestRenderer);
var _tools = require("./tools");
var _Form = require("../Form");
var _TestField = _interopRequireWildcard(require("./TestField"));
var _ObjectField = require("../ObjectField");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _ObjectField2 = _interopRequireDefault(_ObjectField);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
require("../types");
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
var _tools = require("./tools");
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
var _TestField = require("./TestField");
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
var _TestField2 = _interopRequireDefault(_TestField);
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
describe("ObjectField", function () {
describe("Sneaky hacks", function () {
it("exposes FormContext as its contextType", function () {
expect(_ObjectField2.default._contextType).toBe(_Form.FormContext);
expect(_ObjectField.default._contextType).toBe(_Form.FormContext);
});
});
describe("ObjectField is a field", function () {

@@ -46,37 +41,30 @@ describe("validates on mount", function () {

var formState = (0, _tools.mockFormState)(formStateInner);
var link = (0, _tools.mockLink)(formState);
var link = (0, _tools.mockLink)(formState); // $ExpectError
// $ExpectError
React.createElement(
_ObjectField2.default,
{ link: link, validation: function validation(_e) {
return [];
} },
function () {
return null;
React.createElement(_ObjectField.default, {
link: link,
validation: function validation(_e) {
return [];
}
);
}, function () {
return null;
}); // $ExpectError
// $ExpectError
React.createElement(
_ObjectField2.default,
{ link: link, validation: function validation(_e) {
return [];
} },
function () {
return null;
React.createElement(_ObjectField.default, {
link: link,
validation: function validation(_e) {
return [];
}
);
React.createElement(
_ObjectField2.default,
{ link: link, validation: function validation(_e) {
return [];
} },
function () {
return null;
}, function () {
return null;
});
React.createElement(_ObjectField.default, {
link: link,
validation: function validation(_e) {
return [];
}
);
}, function () {
return null;
});
});
it("Sets errors.client and meta.succeeded when there are no errors", function () {

@@ -86,12 +74,13 @@ var validation = jest.fn(function () {

});
var formState = (0, _tools.mockFormState)({ inner: "value" });
var formState = (0, _tools.mockFormState)({
inner: "value"
});
var link = (0, _tools.mockLink)(formState);
_reactTestRenderer2.default.create(React.createElement(
_ObjectField2.default,
{ link: link, validation: validation },
jest.fn(function () {
return null;
})
));
_reactTestRenderer.default.create(React.createElement(_ObjectField.default, {
link: link,
validation: validation
}, jest.fn(function () {
return null;
})));

@@ -109,3 +98,2 @@ expect(validation).toHaveBeenCalledTimes(1);

});
it("Sets errors.client and meta.succeeded when there are errors", function () {

@@ -115,12 +103,13 @@ var validation = jest.fn(function () {

});
var formState = (0, _tools.mockFormState)({ inner: "value" });
var formState = (0, _tools.mockFormState)({
inner: "value"
});
var link = (0, _tools.mockLink)(formState);
_reactTestRenderer2.default.create(React.createElement(
_ObjectField2.default,
{ link: link, validation: validation },
jest.fn(function () {
return null;
})
));
_reactTestRenderer.default.create(React.createElement(_ObjectField.default, {
link: link,
validation: validation
}, jest.fn(function () {
return null;
})));

@@ -138,14 +127,13 @@ expect(validation).toHaveBeenCalledTimes(1);

});
it("Treats no validation as always passing", function () {
var formState = (0, _tools.mockFormState)({ inner: "value" });
var formState = (0, _tools.mockFormState)({
inner: "value"
});
var link = (0, _tools.mockLink)(formState);
_reactTestRenderer2.default.create(React.createElement(
_ObjectField2.default,
{ link: link },
jest.fn(function () {
return null;
})
));
_reactTestRenderer.default.create(React.createElement(_ObjectField.default, {
link: link
}, jest.fn(function () {
return null;
})));

@@ -161,6 +149,7 @@ expect(link.onValidation).toHaveBeenCalledTimes(1);

});
it("Passes additional information to its render function", function () {
var formState = (0, _tools.mockFormState)({
inner: "value"
}); // $FlowFixMe
it("Passes additional information to its render function", function () {
var formState = (0, _tools.mockFormState)({ inner: "value" });
// $FlowFixMe
formState[1].data.errors = {

@@ -175,7 +164,5 @@ server: ["A server error"],

_reactTestRenderer2.default.create(React.createElement(
_ObjectField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ObjectField.default, {
link: link
}, renderFn));

@@ -190,3 +177,5 @@ expect(renderFn).toHaveBeenCalled();

asyncValidationInFlight: false,
value: { inner: "value" }
value: {
inner: "value"
}
}));

@@ -196,3 +185,2 @@ });

});
describe("An ObjectField disassembles an object into its fields", function () {

@@ -210,7 +198,5 @@ it("breaks apart a link to an object into an object of links", function () {

_reactTestRenderer2.default.create(React.createElement(
_ObjectField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ObjectField.default, {
link: link
}, renderFn));

@@ -226,3 +212,2 @@ expect(renderFn).toHaveBeenCalled();

});
it("has the correct type for the links object", function () {

@@ -235,31 +220,21 @@ var formStateInner = {

var link = (0, _tools.mockLink)(formState);
React.createElement(
_ObjectField2.default,
{ link: link },
function (links) {
console.log(links);
return null;
}
);
React.createElement(
_ObjectField2.default,
{ link: link },
function (links) {
console.log(links);
return null;
}
);
React.createElement(
_ObjectField2.default,
{ link: link },
function (links) {
console.log(links);
return null;
}
);
React.createElement(_ObjectField.default, {
link: link
}, function (links) {
console.log(links);
return null;
});
React.createElement(_ObjectField.default, {
link: link
}, function (links) {
console.log(links);
return null;
});
React.createElement(_ObjectField.default, {
link: link
}, function (links) {
console.log(links);
return null;
});
});
it("calls onChange when a child changes", function () {

@@ -276,13 +251,10 @@ var formStateInner = {

_reactTestRenderer2.default.create(React.createElement(
_ObjectField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ObjectField.default, {
link: link
}, renderFn));
var objectLinks = renderFn.mock.calls[0][0];
// call the child onChange
var objectLinks = renderFn.mock.calls[0][0]; // call the child onChange
var newChildMeta = (0, _tools.mockFormState)("newString");
objectLinks.string.onChange(newChildMeta);
expect(link.onChange).toHaveBeenCalled();

@@ -297,3 +269,2 @@ var newObjectFormState = link.onChange.mock.calls[0][0];

});
it("calls onBlur when a child is blurred", function () {

@@ -310,13 +281,10 @@ var formStateInner = {

_reactTestRenderer2.default.create(React.createElement(
_ObjectField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ObjectField.default, {
link: link
}, renderFn));
var objectLinks = renderFn.mock.calls[0][0];
// call the child onBlur
var objectLinks = renderFn.mock.calls[0][0]; // call the child onBlur
var newChildTree = (0, _tools.mockFormState)("")[1];
objectLinks.number.onBlur(newChildTree);
expect(link.onBlur).toHaveBeenCalled();

@@ -330,3 +298,2 @@ var newObjectTree = link.onBlur.mock.calls[0][0];

});
it("calls onValidation when a child runs validations", function () {

@@ -343,15 +310,11 @@ var formStateInner = {

_reactTestRenderer2.default.create(React.createElement(
_ObjectField2.default,
{ link: link },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ObjectField.default, {
link: link
}, renderFn));
var objectLinks = renderFn.mock.calls[0][0];
// call the child onValidation
var objectLinks = renderFn.mock.calls[0][0]; // call the child onValidation
objectLinks.string.onValidation([], ["Some", "errors"]);
expect(link.onValidation).toHaveBeenCalledTimes(2); // Important: the first call to onValidation is for the initial render validation
expect(link.onValidation).toHaveBeenCalledTimes(2);
// Important: the first call to onValidation is for the initial render validation
var _link$onValidation$mo4 = _slicedToArray(link.onValidation.mock.calls[1], 2),

@@ -361,6 +324,8 @@ path = _link$onValidation$mo4[0],

expect(path).toEqual([{ type: "object", key: "string" }]);
expect(path).toEqual([{
type: "object",
key: "string"
}]);
expect(errors).toEqual(["Some", "errors"]);
});
it("calls its own validation when a child changes", function () {

@@ -380,15 +345,12 @@ var formStateInner = {

_reactTestRenderer2.default.create(React.createElement(
_ObjectField2.default,
{ link: link, validation: validation },
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ObjectField.default, {
link: link,
validation: validation
}, renderFn));
expect(validation).toHaveBeenCalledTimes(1);
var objectLinks = renderFn.mock.calls[0][0]; // call the child onChange
var objectLinks = renderFn.mock.calls[0][0];
// call the child onChange
var newChildMeta = (0, _tools.mockFormState)("newString");
objectLinks.string.onChange(newChildMeta);
expect(validation).toHaveBeenCalledTimes(2);

@@ -401,3 +363,2 @@ expect(validation.mock.calls[1][0]).toEqual({

});
describe("customChange", function () {

@@ -417,3 +378,2 @@ it("allows the default change behavior to be overwritten with customChange", function () {

});
var customChange = jest.fn(function (_oldValue, _newValue) {

@@ -426,18 +386,13 @@ return {

_reactTestRenderer2.default.create(React.createElement(
_ObjectField2.default,
{
link: link,
validation: validation,
customChange: customChange
},
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ObjectField.default, {
link: link,
validation: validation,
customChange: customChange
}, renderFn));
var objectLinks = renderFn.mock.calls[0][0];
// call the child onChange
var objectLinks = renderFn.mock.calls[0][0]; // call the child onChange
var newChildMeta = (0, _tools.mockFormState)("newString");
objectLinks.string.onChange(newChildMeta);
objectLinks.string.onChange(newChildMeta); // customChange should be called with the correct args
// customChange should be called with the correct args
expect(customChange).toHaveBeenCalledTimes(1);

@@ -450,5 +405,4 @@ expect(customChange).toHaveBeenCalledWith({

number: 42
});
}); // onChange should be called with the result of customChange
// onChange should be called with the result of customChange
expect(link.onChange).toHaveBeenCalledTimes(1);

@@ -458,5 +412,4 @@ expect(link.onChange).toHaveBeenCalledWith([{

number: 0
}, expect.anything()]);
}, expect.anything()]); // Validated the result of customChange
// Validated the result of customChange
expect(validation).toHaveBeenCalledTimes(2);

@@ -468,3 +421,2 @@ expect(validation.mock.calls[1][0]).toEqual({

});
it("can return null to signal there was no custom change", function () {

@@ -483,3 +435,2 @@ var formStateInner = {

});
var customChange = jest.fn(function (_oldValue, _newValue) {

@@ -489,20 +440,14 @@ return null;

_reactTestRenderer2.default.create(React.createElement(
_ObjectField2.default,
{
link: link,
validation: validation,
customChange: customChange
},
renderFn
));
_reactTestRenderer.default.create(React.createElement(_ObjectField.default, {
link: link,
validation: validation,
customChange: customChange
}, renderFn));
var objectLinks = renderFn.mock.calls[0][0];
// call the child onChange
var objectLinks = renderFn.mock.calls[0][0]; // call the child onChange
var newChildMeta = (0, _tools.mockFormState)("newString");
objectLinks.string.onChange(newChildMeta);
expect(customChange).toHaveBeenCalledTimes(1); // onChange should be called with the result of customChange
expect(customChange).toHaveBeenCalledTimes(1);
// onChange should be called with the result of customChange
expect(link.onChange).toHaveBeenCalledTimes(1);

@@ -512,5 +457,4 @@ expect(link.onChange).toHaveBeenCalledWith([{

number: 42
}, expect.anything()]);
}, expect.anything()]); // Validated the result of customChange
// Validated the result of customChange
expect(validation).toHaveBeenCalledTimes(2);

@@ -522,3 +466,2 @@ expect(validation.mock.calls[1][0]).toEqual({

});
it("doesn't break validations for child fields", function () {

@@ -531,3 +474,2 @@ var formStateInner = {

var link = (0, _tools.mockLink)(formState);
var customChange = jest.fn(function (_oldValue, _newValue) {

@@ -539,3 +481,2 @@ return {

});
var childValidation = jest.fn(function () {

@@ -545,16 +486,14 @@ return ["This is an error"];

var renderer = _reactTestRenderer2.default.create(React.createElement(
_ObjectField2.default,
{ link: link, customChange: customChange },
function (links) {
return React.createElement(
React.Fragment,
null,
React.createElement(_TestField2.default, { link: links.string, validation: childValidation }),
React.createElement(_TestField2.default, { link: links.string2, validation: childValidation })
);
}
));
// 5 validations:
var renderer = _reactTestRenderer.default.create(React.createElement(_ObjectField.default, {
link: link,
customChange: customChange
}, function (links) {
return React.createElement(React.Fragment, null, React.createElement(_TestField.default, {
link: links.string,
validation: childValidation
}), React.createElement(_TestField.default, {
link: links.string2,
validation: childValidation
}));
})); // 5 validations:
// 1) Child initial validation x2

@@ -564,16 +503,20 @@ // 2) Parent initial validation

// (No parent onValidation call, because it will use onChange)
// 1) and 2)
// 1) and 2)
expect(link.onValidation).toHaveBeenCalledTimes(3);
link.onValidation.mockClear();
var inner = renderer.root.findAllByType(_TestField.TestInput)[0];
inner.instance.change("zach");
inner.instance.change("zach"); // 3)
// 3)
expect(link.onValidation).toHaveBeenCalledTimes(2);
expect(link.onValidation).toHaveBeenCalledWith([{ type: "object", key: "string" }], ["This is an error"]);
expect(link.onValidation).toHaveBeenCalledWith([{ type: "object", key: "string2" }], ["This is an error"]);
expect(link.onValidation).toHaveBeenCalledWith([{
type: "object",
key: "string"
}], ["This is an error"]);
expect(link.onValidation).toHaveBeenCalledWith([{
type: "object",
key: "string2"
}], ["This is an error"]); // onChange should be called with the result of customChange
// onChange should be called with the result of customChange
expect(link.onChange).toHaveBeenCalledTimes(1);

@@ -580,0 +523,0 @@ expect(link.onChange).toHaveBeenCalledWith([{

74

dist/test/TestField.js

@@ -6,25 +6,35 @@ "use strict";

});
exports.TestInput = undefined;
exports.default = exports.TestInput = void 0;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var React = _interopRequireWildcard(require("react"));
var _react = require("react");
var _Field = _interopRequireDefault(require("../Field"));
var React = _interopRequireWildcard(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _Field = require("../Field");
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
var _Field2 = _interopRequireDefault(_Field);
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var TestInput = exports.TestInput = function (_React$Component) {
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var TestInput =
/*#__PURE__*/
function (_React$Component) {
_inherits(TestInput, _React$Component);

@@ -35,3 +45,3 @@

return _possibleConstructorReturn(this, (TestInput.__proto__ || Object.getPrototypeOf(TestInput)).apply(this, arguments));
return _possibleConstructorReturn(this, _getPrototypeOf(TestInput).apply(this, arguments));
}

@@ -59,3 +69,7 @@

var TestField = function (_React$Component2) {
exports.TestInput = TestInput;
var TestField =
/*#__PURE__*/
function (_React$Component2) {
_inherits(TestField, _React$Component2);

@@ -66,3 +80,3 @@

return _possibleConstructorReturn(this, (TestField.__proto__ || Object.getPrototypeOf(TestField)).apply(this, arguments));
return _possibleConstructorReturn(this, _getPrototypeOf(TestField).apply(this, arguments));
}

@@ -73,14 +87,13 @@

value: function render() {
return React.createElement(
_Field2.default,
{ link: this.props.link, validation: this.props.validation },
function (value, errors, onChange, onBlur) {
return React.createElement(TestInput, {
value: value,
errors: errors,
onChange: onChange,
onBlur: onBlur
});
}
);
return React.createElement(_Field.default, {
link: this.props.link,
validation: this.props.validation
}, function (value, errors, onChange, onBlur) {
return React.createElement(TestInput, {
value: value,
errors: errors,
onChange: onChange,
onBlur: onBlur
});
});
}

@@ -92,7 +105,8 @@ }]);

TestField.defaultProps = {
exports.default = TestField;
_defineProperty(TestField, "defaultProps", {
validation: function validation() {
return [];
}
};
exports.default = TestField;
});

4

dist/test/tools.js

@@ -10,8 +10,6 @@ "use strict";

require("../formState");
var _shapedTree = require("../shapedTree");
var _types = require("../types");
var _shapedTree = require("../shapedTree");
function mockFormState(value) {

@@ -18,0 +16,0 @@ return [value, (0, _shapedTree.treeFromValue)(value, {

4

dist/test/tree.test.js

@@ -26,3 +26,2 @@ "use strict";

};
describe("tree", function () {

@@ -33,3 +32,2 @@ it("can be mapped over", function () {

}, sampleTree);
var untypedRoot = mappedTree;

@@ -51,3 +49,2 @@ expect(untypedRoot.type).toBe("object");

});
it("can be folded into a monoid preorder", function () {

@@ -57,2 +54,3 @@ var id = function id(x) {

};
var folded = (0, _tree.foldMapTree)(id, "", function (x, y) {

@@ -59,0 +57,0 @@ return x.concat(y);

117

dist/test/utils/array.test.js

@@ -7,50 +7,50 @@ "use strict";

var a = ["one", "two", "three"];
it("moves elements in place", function () {
expect((0, _array.moveFromTo)(1, 1, a)).toEqual(a);
});
it("moves elements forward", function () {
expect((0, _array.moveFromTo)(0, 1, a)).toEqual(["two", "one", "three"]);
});
it("moves elements backward", function () {
expect((0, _array.moveFromTo)(2, 0, a)).toEqual(["three", "one", "two"]);
});
}); // strict
});
describe("modify", function () {
it("is identity when given nothing to insert or remove", function () {
var a = ["one", "two", "three"];
expect((0, _array.modify)({}, [])).toEqual([]);
expect((0, _array.modify)({}, a)).toEqual(a);
});
describe("inserting spans", function () {
it("is identity when given no spans", function () {
var a = ["one", "two", "three"];
expect((0, _array.modify)({ insertSpans: [] }, [])).toEqual([]);
expect((0, _array.modify)({ insertSpans: [] }, a)).toEqual(a);
expect((0, _array.modify)({
insertSpans: []
}, [])).toEqual([]);
expect((0, _array.modify)({
insertSpans: []
}, a)).toEqual(a);
});
it("inserts a single span", function () {
var a = ["one", "two", "three"];
var s = [1, ["hello", "world"]];
expect((0, _array.modify)({ insertSpans: [s] }, a)).toEqual(["one", "hello", "world", "two", "three"]);
expect((0, _array.modify)({
insertSpans: [s]
}, a)).toEqual(["one", "hello", "world", "two", "three"]);
});
it("inserts a span at the end of the array", function () {
var a = ["one", "two", "three"];
var s = [3, ["the", "end"]];
expect((0, _array.modify)({ insertSpans: [s] }, a)).toEqual(["one", "two", "three", "the", "end"]);
expect((0, _array.modify)({
insertSpans: [s]
}, a)).toEqual(["one", "two", "three", "the", "end"]);
});
it("errors if two spans with the same index are provided", function () {
var redundantSpans = [[0, ["one", "thing"]], [0, ["and", "another"]]];
expect(function () {
(0, _array.modify)({ insertSpans: redundantSpans }, []);
(0, _array.modify)({
insertSpans: redundantSpans
}, []);
}).toThrowError("at the same index");
});
it("inserts multiple spans in the correct place", function () {

@@ -60,64 +60,77 @@ var s0 = [1, ["uno"]];

var a = ["one", "two", "three"];
expect((0, _array.modify)({ insertSpans: [s0, s1] }, a)).toEqual(["one", "uno", "two", "dos", "three"]);
expect((0, _array.modify)({
insertSpans: [s0, s1]
}, a)).toEqual(["one", "uno", "two", "dos", "three"]);
});
});
describe("filtering", function () {
it("is identity when given (const true)", function () {
var a = ["one", "two", "three"];
expect((0, _array.modify)({ filterPredicate: function filterPredicate() {
expect((0, _array.modify)({
filterPredicate: function filterPredicate() {
return true;
} }, [])).toEqual([]);
expect((0, _array.modify)({ filterPredicate: function filterPredicate() {
}
}, [])).toEqual([]);
expect((0, _array.modify)({
filterPredicate: function filterPredicate() {
return true;
} }, a)).toEqual(a);
}
}, a)).toEqual(a);
});
it("removes everything when given (const false)", function () {
var a = ["one", "two", "three"];
expect((0, _array.modify)({ filterPredicate: function filterPredicate() {
expect((0, _array.modify)({
filterPredicate: function filterPredicate() {
return false;
} }, [])).toEqual([]);
expect((0, _array.modify)({ filterPredicate: function filterPredicate() {
}
}, [])).toEqual([]);
expect((0, _array.modify)({
filterPredicate: function filterPredicate() {
return false;
} }, a)).toEqual([]);
}
}, a)).toEqual([]);
});
it("removes things based on values", function () {
var a = ["one", "two", "three"];
expect((0, _array.modify)({ filterPredicate: function filterPredicate(s) {
expect((0, _array.modify)({
filterPredicate: function filterPredicate(s) {
return s === "one";
} }, [])).toEqual([]);
expect((0, _array.modify)({ filterPredicate: function filterPredicate(s) {
}
}, [])).toEqual([]);
expect((0, _array.modify)({
filterPredicate: function filterPredicate(s) {
return s === "one";
} }, a)).toEqual(["one"]);
expect((0, _array.modify)({ filterPredicate: function filterPredicate(s) {
}
}, a)).toEqual(["one"]);
expect((0, _array.modify)({
filterPredicate: function filterPredicate(s) {
return s !== "one";
} }, a)).toEqual(["two", "three"]);
}
}, a)).toEqual(["two", "three"]);
});
it("removes things based on index", function () {
var a = ["one", "two", "three"];
expect((0, _array.modify)({ filterPredicate: function filterPredicate(_, i) {
expect((0, _array.modify)({
filterPredicate: function filterPredicate(_, i) {
return i === 1;
} }, [])).toEqual([]);
expect((0, _array.modify)({ filterPredicate: function filterPredicate(_, i) {
}
}, [])).toEqual([]);
expect((0, _array.modify)({
filterPredicate: function filterPredicate(_, i) {
return i === 1;
} }, a)).toEqual(["two"]);
expect((0, _array.modify)({ filterPredicate: function filterPredicate(_, i) {
}
}, a)).toEqual(["two"]);
expect((0, _array.modify)({
filterPredicate: function filterPredicate(_, i) {
return i !== 1;
} }, a)).toEqual(["one", "three"]);
}
}, a)).toEqual(["one", "three"]);
});
it("removes things based on the whole array", function () {
var a = ["one", "two", "three"];
var pred = jest.fn();
(0, _array.modify)({ filterPredicate: pred }, a);
(0, _array.modify)({
filterPredicate: pred
}, a);
expect(pred).toHaveBeenCalledWith(expect.anything(), expect.anything(), a);
expect((0, _array.modify)({

@@ -130,3 +143,2 @@ filterPredicate: function filterPredicate(_0, i, arr) {

});
describe("inserting and filtering simultaneously", function () {

@@ -143,3 +155,2 @@ it("can insert and remove simultaneously", function () {

});
describe("insertSpans", function () {

@@ -151,3 +162,2 @@ it("is identity when given no spans", function () {

});
it("inserts a single span", function () {

@@ -158,3 +168,2 @@ var a = ["one", "two", "three"];

});
it("inserts a span at the end of the array", function () {

@@ -165,3 +174,2 @@ var a = ["one", "two", "three"];

});
it("errors if two spans with the same index are provided", function () {

@@ -173,3 +181,2 @@ var redundantSpans = [[0, ["one", "thing"]], [0, ["and", "another"]]];

});
it("inserts multiple spans in the correct place", function () {

@@ -176,0 +183,0 @@ var s0 = [1, ["uno"]];

7

dist/testutils/index.js

@@ -6,12 +6,11 @@ "use strict";

});
var _LinkTap = require("./LinkTap");
Object.defineProperty(exports, "LinkTap", {
enumerable: true,
get: function get() {
return _interopRequireDefault(_LinkTap).default;
return _LinkTap.default;
}
});
var _LinkTap = _interopRequireDefault(require("./LinkTap"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

56

dist/testutils/LinkTap.js

@@ -6,47 +6,71 @@ "use strict";

});
exports.default = void 0;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var React = _interopRequireWildcard(require("react"));
var _react = require("react");
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
var React = _interopRequireWildcard(_react);
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // strict
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var LinkTap = function (_React$Component) {
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var LinkTap =
/*#__PURE__*/
function (_React$Component) {
_inherits(LinkTap, _React$Component);
function LinkTap() {
var _ref;
var _getPrototypeOf2;
var _temp, _this, _ret;
var _this;
_classCallCheck(this, LinkTap);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = LinkTap.__proto__ || Object.getPrototypeOf(LinkTap)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (newState) {
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(LinkTap)).call.apply(_getPrototypeOf2, [this].concat(args)));
_defineProperty(_assertThisInitialized(_this), "handleChange", function (newState) {
if (_this.props.onChange) {
_this.props.onChange(newState[0], newState[1]);
}
_this.props.link.onChange(newState);
}, _this.handleBlur = function (newMeta) {
});
_defineProperty(_assertThisInitialized(_this), "handleBlur", function (newMeta) {
if (_this.props.onBlur) {
_this.props.onBlur();
}
_this.props.link.onBlur(newMeta);
}, _this.handleValidation = function (path, errors) {
});
_defineProperty(_assertThisInitialized(_this), "handleValidation", function (path, errors) {
if (_this.props.onValidation) {
_this.props.onValidation(path, errors);
}
_this.props.link.onValidation(path, errors);
}, _temp), _possibleConstructorReturn(_this, _ret);
});
return _this;
}

@@ -58,3 +82,2 @@

var link = this.props.link;
var tappedLink = {

@@ -66,3 +89,2 @@ formState: link.formState,

};
return this.props.children(tappedLink);

@@ -69,0 +91,0 @@ }

27

dist/tree.js

@@ -6,6 +6,2 @@ "use strict";

});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; // strict
exports.leaf = leaf;

@@ -19,8 +15,8 @@ exports.pathFromPathString = pathFromPathString;

var _invariant = require("./utils/invariant");
var _invariant = _interopRequireDefault(require("./utils/invariant"));
var _invariant2 = _interopRequireDefault(_invariant);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

@@ -71,4 +67,4 @@

children: Object.keys(left.children).reduce(function (memo, k) {
(0, _invariant2.default)(left.type === "object" && right.type === "object", "This should never happen.");
return _extends({}, memo, _defineProperty({}, k, strictZipWith(f, left.children[k], right.children[k])));
(0, _invariant.default)(left.type === "object" && right.type === "object", "This should never happen.");
return _objectSpread({}, memo, _defineProperty({}, k, strictZipWith(f, left.children[k], right.children[k])));
}, {})

@@ -87,3 +83,3 @@ };

children: left.children.map(function (_, i) {
(0, _invariant2.default)(left.type === "array" && right.type === "array");
(0, _invariant.default)(left.type === "array" && right.type === "array");
return strictZipWith(f, left.children[i], right.children[i]);

@@ -102,5 +98,5 @@ })

throw new Error("Tried to zip two nodes of different type");
}
} // A tree is a functor
// A tree is a functor
function mapTree(f, tree) {

@@ -112,3 +108,3 @@ if (tree.type === "object") {

children: Object.keys(tree.children).reduce(function (memo, key) {
return _extends({}, memo, _defineProperty({}, key, mapTree(f, tree.children[key])));
return _objectSpread({}, memo, _defineProperty({}, key, mapTree(f, tree.children[key])));
}, {})

@@ -130,5 +126,5 @@ };

}
}
} // Fold a tree preorder
// Fold a tree preorder
function foldMapTree(mapper, mempty, mappend, tree) {

@@ -146,4 +142,5 @@ if (tree.type === "leaf") {

}, mempty);
return mappend(mapper(tree.data), _foldedChildren);
}
}

15

dist/types.js

@@ -6,9 +6,4 @@ "use strict";

});
exports.cleanErrors = exports.cleanMeta = undefined;
require("./formState");
// strict
var cleanMeta = exports.cleanMeta = {
exports.cleanErrors = exports.cleanMeta = void 0;
var cleanMeta = {
touched: false,

@@ -19,7 +14,7 @@ changed: false,

};
var cleanErrors = exports.cleanErrors = {
exports.cleanMeta = cleanMeta;
var cleanErrors = {
client: "pending",
server: "unchecked"
};
// This seems like it should be ClientError => void, but the new subtree needs to travel up
exports.cleanErrors = cleanErrors;

66

dist/utils/array.js

@@ -6,5 +6,2 @@ "use strict";

});
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
exports.removeAt = removeAt;

@@ -20,6 +17,18 @@ exports.replaceAt = replaceAt;

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
// strict
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
function removeAt(index, arr) {

@@ -45,4 +54,4 @@ return [].concat(_toConsumableArray(arr.slice(0, index)), _toConsumableArray(arr.slice(index + 1)));

filterPredicate = _ref.filterPredicate;
var sortedSpans = [];
var sortedSpans = [];
if (insertSpans !== undefined) {

@@ -56,24 +65,25 @@ // no duplicated indices are allowed, ECMAScript Array.sort is not stable by spec

}));
if (indexSet.size !== insertSpans.length) {
throw new Error("You cannot insert two spans at the same index. Combine the values of the spans.");
}
} // sort spans by insertion position
// sort spans by insertion position
sortedSpans = [].concat(_toConsumableArray(insertSpans));
sortedSpans = _toConsumableArray(insertSpans);
sortedSpans.sort(function (_ref4, _ref5) {
var _ref7 = _slicedToArray(_ref4, 1),
i = _ref7[0];
var _ref6 = _slicedToArray(_ref4, 1),
i = _ref6[0];
var _ref6 = _slicedToArray(_ref5, 1),
j = _ref6[0];
var _ref7 = _slicedToArray(_ref5, 1),
j = _ref7[0];
return i - j;
});
}
} // The next span to insert
// The next span to insert
var nextSpanIndex = 0;
// build the new array in one pass
var nextSpanIndex = 0; // build the new array in one pass
var ret = [];
for (var i = 0; i < arr.length; i += 1) {

@@ -90,10 +100,11 @@ if (nextSpanIndex < sortedSpans.length) {

}
if (filterPredicate === undefined || filterPredicate(arr[i], i, arr)) {
ret.push(arr[i]);
}
}
} // insert spans after the end of the array
// insert spans after the end of the array
for (var _i = nextSpanIndex; _i < sortedSpans.length; _i += 1) {
var _sortedSpans$_i = _slicedToArray(sortedSpans[_i], 2),
for (var _i2 = nextSpanIndex; _i2 < sortedSpans.length; _i2 += 1) {
var _sortedSpans$_i = _slicedToArray(sortedSpans[_i2], 2),
_ = _sortedSpans$_i[0],

@@ -109,6 +120,8 @@ _contents = _sortedSpans$_i[1];

function insertSpans(spans, arr) {
return modify({ insertSpans: spans }, arr);
}
return modify({
insertSpans: spans
}, arr);
} // Strict on length
// Strict on length
function zipWith(f, left, right) {

@@ -118,6 +131,9 @@ if (left.length !== right.length) {

}
var ret = [];
for (var i = 0; i < left.length; i += 1) {
ret.push(f(left[i], right[i]));
}
return ret;

@@ -134,2 +150,3 @@ }

var ret = [[], []];
for (var i = 0; i < zipped.length; i += 1) {

@@ -143,3 +160,4 @@ var _zipped$i = _slicedToArray(zipped[i], 2),

}
return ret;
}

2

dist/utils/invariant.js

@@ -7,3 +7,3 @@ "use strict";

exports.default = invariant;
// strict
function invariant(inv, message) {

@@ -10,0 +10,0 @@ if (!inv) {

3

dist/utils/object.js

@@ -13,2 +13,3 @@ "use strict";

var rightKeys = new Set(Object.keys(right));
if (!(0, _set.setEq)(leftKeys, rightKeys)) {

@@ -22,2 +23,2 @@ throw new Error("Tried to zip two object with different keys");

}, {});
} // strict
}

1

dist/utils/set.js

@@ -7,3 +7,2 @@ "use strict";

exports.setEq = setEq;
// strict

@@ -10,0 +9,0 @@ function setEq(a, b) {

35

package.json
{
"name": "formula-one",
"version": "0.9.0-alpha.6",
"version": "0.9.0-alpha.7",
"description": "Strongly-typed React form state management",

@@ -22,9 +22,26 @@ "author": "Zach Gotsch",

"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "9.x",
"babel-jest": "^23.6.0",
"babel-preset-env": "^1.7.0",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-do-expressions": "^7.0.0",
"@babel/plugin-proposal-export-default-from": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-bind": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"@babel/plugin-proposal-pipeline-operator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10",
"babel-jest": "^24",
"eslint": "5.x",

@@ -39,3 +56,3 @@ "eslint-config-react-app": "^3.0.4",

"husky": "^0.14.3",
"jest": "^23.6.0",
"jest": "^24.5.0",
"lint-staged": "^7.2.0",

@@ -42,0 +59,0 @@ "prettier": "^1.14.0",

276

README.md

@@ -5,5 +5,12 @@ # formula-one

## A simple example
## A minimal example, with no validation
[Edit the working example on CodeSandbox](https://codesandbox.io/s/549m5n0y8x?module=%2Fsrc%2FSimpleExample.js)
```jsx
// @flow strict
import React from "react";
import {Form, Field, ObjectField, FeedbackStrategies} from "formula-one";
type Person = {

@@ -15,52 +22,72 @@ name: string,

const emptyPerson: Person = {
const EMPTY_PERSON: Person = {
name: "",
age: null,
age: "",
side: "Empire",
};
<Form
feedbackStrategy="Always"
initialValue={emptyPerson}
onSubmit={savePerson}
>
{(link, onSubmit) => (
<ObjectField link={link}>
{links => (
<>
<Field link={links.name}>
{(value, errors, onChange, onBlur) => (
export default function SimpleExample() {
return (
<div className="App">
<Form
initialValue={EMPTY_PERSON}
onSubmit={person => console.log("Submitted", person)}
// TODO(dmnd): Remove following props after new version is published
serverErrors={null}
feedbackStrategy={FeedbackStrategies.Always}
>
{(link, onSubmit) => (
<ObjectField link={link}>
{links => (
<>
<label>Name:</label>
<input type="text" onChange={onChange} onBlur={onBlur} />
<Field link={links.name}>
{(value, errors, onChange) => (
<label>
<div>Name</div>
<input
type="text"
value={value}
onChange={e => onChange(e.target.value)}
/>
</label>
)}
</Field>
<Field link={links.age}>
{(value, errors, onChange) => (
<label>
<div>Age</div>
<input
type="text"
onChange={e => onChange(e.target.value)}
value={value}
/>
</label>
)}
</Field>
<Field link={links.side}>
{(value, errors, onChange) => (
<label>
<div>Side</div>
<select
onChange={e => onChange(e.target.value)}
value={value}
>
<option value="Empire">Empire</option>
<option value="Rebels">Rebels</option>
</select>
</label>
)}
</Field>
<div>
<button onClick={onSubmit}>Submit</button>
</div>
</>
)}
</Field>
<Field link={links.age}>
{(value, errors, onChange, onBlur) => (
<>
<label>Age:</label>
<input type="text" onChange={onChange} onBlur={onBlur} />
</>
)}
</Field>
<Field link={links.side}>
{(value, errors, onChange, onBlur) => (
<>
<label>Side:</label>
<select onChange={onChange} onBlur={onBlur} value={value}>
<option value="Empire">Empire</option>
<option value="Rebels">Rebels</option>
</select>
</>
)}
</Field>
<div>
<button onClick={onSubmit}>Submit</button>
</div>
</>
)}
</ObjectField>
)}
</Form>;
</ObjectField>
)}
</Form>
</div>
);
}
```

@@ -88,2 +115,4 @@

[Edit the working example on CodeSandbox](https://codesandbox.io/s/rj25l331no?module=%2Fsrc%2FNoEmptyStrings.js)
```jsx

@@ -94,14 +123,24 @@ function noEmptyStrings(s: string): Array<string> {

}
return [];
}
<Field link={link} validation={noEmptyStrings}>
{(value, errors, onChange, onBlur)} => (
<>
<input type="text" value={value} />
<ul class="input_errors">
{errors.map(error => (
<li>{error}</li>
))}
</ul>
</>
{(value, errors, onChange) => (
<>
<label>
<div>Name</div>
<input
type="text"
value={value}
onChange={e => onChange(e.target.value)}
/>
{errors ? (
<ul className="error">
{errors.map(e => (
<li key={e}>{e}</li>
))}
</ul>
) : null}
</label>
</>
)}

@@ -138,6 +177,8 @@ </Field>;

[Edit the working example on CodeSandbox](https://codesandbox.io/s/z32q7ml1y4?module=%2Fsrc%2FMultipleValidations.js)
```jsx
function validate(s: string): Array<string> {
return [noShortStrings, mustHaveLettersAndNumbers, noLongStrings].flatMap(
validation => validation(s)
return [noEmptyStrings, mustHaveNumbers, noLongStrings].flatMap(validation =>
validation(s)
);

@@ -157,2 +198,4 @@ }

[Edit the working example on CodeSandbox](https://codesandbox.io/s/xlzyz3o6no?module=%2Fsrc%2FArrays.js)
```jsx

@@ -166,3 +209,3 @@ type Person = {

const emptyPerson = {
const emptyPerson: Person = {
name: "",

@@ -172,54 +215,73 @@ pets: [],

<Form>
{(link, onSubmit) => (
<ObjectField link={link}>
{links => (
<>
<Field link={links.name}>
{(value, errors, onChange, onBlur) => (
export default function() {
return (
<div className="App">
<Form
initialValue={emptyPerson}
onSubmit={p => console.log("Submitted", p)}
// TODO(dmnd): Remove following props after new version is published
serverErrors={null}
feedbackStrategy={FeedbackStrategies.Always}
>
{(link, onSubmit) => (
<ObjectField link={link}>
{links => (
<>
<label>Name:</label>
<input type="text" onChange={onChange} onBlur={onBlur} />
<Field link={links.name}>
{(value, errors, onChange) => (
<label>
<div>Name</div>
<input
type="text"
onChange={e => onChange(e.target.value)}
value={value}
/>
</label>
)}
</Field>
<ArrayField link={links.pets}>
{(links, {addField}) => (
<ul>
{links.map((link, i) => (
<ObjectField key={i} link={link}>
{link => (
<Field link={link.name}>
{(value, errors, onChange) => (
<li>
Pet #{i + 1}
<input
type="text"
value={value}
onChange={e => onChange(e.target.value)}
/>
</li>
)}
</Field>
)}
</ObjectField>
))}
{links.length === 0 ? "No pets :(" : null}
<button
onClick={() => addField(links.length, {name: ""})}
>
Add pet
</button>
</ul>
)}
</ArrayField>
<div>
<button onClick={onSubmit}>Submit</button>
</div>
</>
)}
</Field>
<ArrayField link={links.pets}>
{(links, {addField}) => (
<ul>
{links.map((link, i) => (
<ObjectField link={link}>
{link => (
<Field link={link}>
{(value, errors, onChange, onBlur) => (
<li>
Pet #{i + 1}
<input
type="text"
value={value}
onChange={onChange}
onBlur={onBlur}
/>
</li>
)}
</Field>
)}
</ObjectField>
))}
{links.length === 0 ? "No pets :(" : null}
<button onClick={addField(links.length, {name: ""})}>
Add pet
</button>
</ul>
)}
</ArrayField>
<div>
<button onClick={onSubmit}>Submit</button>
</div>
</>
)}
</ObjectField>
)}
</Form>;
</ObjectField>
)}
</Form>
</div>
);
}
```
<!-- TODO(dmnd) Add removeField and moveField to the example -->
`<ArrayField>` exposes both an array of links to the array elements, but also an object containing mutators for the array:

@@ -249,3 +311,3 @@

<Modal buttons={[<button onClick={handleSubmit}>Submit</button>]}>
<MyField link={link} />
<MyField link={link}>...</MyField>
</Modal>

@@ -298,3 +360,3 @@ )}

| touched | `boolean` | Whether the field has been touched (blurred or changed) |
| changed | `boolean` | Whether the field has been changed |
| changed | `boolean` | Whether the field has been changed |
| shouldShowErrors | `boolean` | Whether errors should be shown according to the current feedback strategy |

@@ -336,3 +398,3 @@ | unfilteredErrors | `$ReadOnlyArray<string>` | All validation errors for the current field. (This differs from the `errors` argument in `<Field>`, since the `errors` argument in `<Field>` will be empty if `shouldShowErrors` is false) |

Sometimes, you need to have multiple submission buttons and need to know which button was clicked in your `onSubmit` prop callback. This can be achieved by passing additional information as an argument to the `handleSubmit` argument to your `<Form>`'s render prop. This argument will be passed to your `onSubmit` prop callback as a second argument. If your `onSubmit` prop callback is typed to make this extra data mandatory, they inner `handleSubmit` callback will require that data.
Sometimes, you need to have multiple submission buttons and need to know which button was clicked in your `onSubmit` prop callback. This can be achieved by passing additional information as an argument to the `handleSubmit` argument to your `<Form>`'s render prop. This argument will be passed to your `onSubmit` prop callback as a second argument. If your `onSubmit` prop callback is typed to make this extra data mandatory, the inner `handleSubmit` callback will require that data.

@@ -365,3 +427,3 @@ Example:

It is easy to sumbit a **formula-one** form using the `handleSubmit` argument provided to `<Form>`'s render prop, but sometimes you need to submit a `<Form>` from outside. This is possible using the `submit()` method available on `<Form>` along with a React ref to that `<Form>` element. This `submit()` method can also receive additional user-specified information, as stated above.
It is easy to submit a **formula-one** form using the `handleSubmit` argument provided to `<Form>`'s render prop, but sometimes you need to submit a `<Form>` from outside. This is possible using the `submit()` method available on `<Form>` along with a React ref to that `<Form>` element. This `submit()` method can also receive additional user-specified information, as stated above.

@@ -368,0 +430,0 @@ ```jsx

20

src/ArrayField.js

@@ -32,3 +32,3 @@ // @flow strict

} from "./utils/array";
import {FormContext, type FormContextPayload} from "./Form";
import {FormContext} from "./Form";
import {

@@ -53,3 +53,2 @@ type FormState,

+link: FieldLink<Array<E>>,
+formContext: FormContextPayload,
+validation: Validation<Array<E>>,

@@ -103,6 +102,7 @@ +customChange?: CustomChange<Array<E>>,

class ArrayField<E> extends React.Component<Props<E>, State> {
export default class ArrayField<E> extends React.Component<Props<E>, State> {
static defaultProps = {
validation: () => [],
};
static contextType = FormContext;

@@ -353,3 +353,3 @@ state = {

const {formState} = this.props.link;
const {shouldShowError} = this.props.formContext;
const {shouldShowError} = this.context;

@@ -388,13 +388,1 @@ const links = makeLinks(

}
// Using a HOC here is not possible due to a Flow bug: https://github.com/facebook/flow/issues/6903
function wrap<E>(props: $Diff<Props<E>, {+formContext: FormContextPayload}>) {
return (
<FormContext.Consumer>
{formContext => <ArrayField {...props} formContext={formContext} />}
</FormContext.Consumer>
);
}
wrap.defaultProps = ArrayField.defaultProps;
export default wrap;

22

src/ErrorsHelper.js

@@ -5,3 +5,3 @@ // @flow strict

import type {FieldLink, ClientErrors, ServerErrors, Err} from "./types";
import {FormContext, type FormContextPayload} from "./Form";
import {FormContext} from "./Form";
import {getExtras} from "./formState";

@@ -22,3 +22,2 @@

+link: FieldLink<T>,
+formContext: FormContextPayload,
+children: ({

@@ -29,8 +28,9 @@ shouldShowErrors: boolean,

flattened: Array<string>,
}) => React.Node,
}) => Node,
|};
function ErrorsHelper<T>(props: Props<T>) {
export default function ErrorsHelper<T>(props: Props<T>) {
const {errors, meta} = getExtras(props.link.formState);
const flattened = flattenErrors(errors);
const shouldShowErrors = props.formContext.shouldShowError(meta);
const formContext = React.useContext(FormContext);
const shouldShowErrors = formContext.shouldShowError(meta);
return props.children({

@@ -43,13 +43,1 @@ shouldShowErrors,

}
// Using a HOC here is not possible due to a Flow bug: https://github.com/facebook/flow/issues/6903
function wrap<E>(props: $Diff<Props<E>, {+formContext: FormContextPayload}>) {
return (
<FormContext.Consumer>
{formContext => <ErrorsHelper {...props} formContext={formContext} />}
</FormContext.Consumer>
);
}
wrap.defaultProps = ErrorsHelper.defaultProps;
export default wrap;

21

src/Field.js

@@ -6,3 +6,3 @@ // @flow strict

import {mapRoot} from "./shapedTree";
import {FormContext, type FormContextPayload} from "./Form";
import {FormContext} from "./Form";
import {

@@ -19,3 +19,2 @@ setExtrasTouched,

+validation: Validation<T>,
+formContext: FormContextPayload,
+children: (

@@ -41,6 +40,7 @@ value: T,

class Field<T> extends React.Component<Props<T>> {
export default class Field<T> extends React.Component<Props<T>> {
static defaultProps = {
validation: () => [],
};
static contextType = FormContext;

@@ -84,5 +84,5 @@ initialValidate() {

const {meta, errors} = getExtras(formState);
const {shouldShowError} = this.props.formContext;
const {shouldShowError} = this.context;
const flatErrors = this.props.formContext.shouldShowError(meta)
const flatErrors = this.context.shouldShowError(meta)
? getErrors(errors)

@@ -102,12 +102,1 @@ : [];

}
function wrap<T>(props: $Diff<Props<T>, {+formContext: FormContextPayload}>) {
return (
<FormContext.Consumer>
{formContext => <Field {...props} formContext={formContext} />}
</FormContext.Consumer>
);
}
wrap.defaultProps = Field.defaultProps;
export default wrap;

7

src/Form.js

@@ -29,3 +29,3 @@ // @flow strict

import {pathFromPathString} from "./tree";
import {type FeedbackStrategy} from "./feedbackStrategies";
import FeedbackStrategies, {type FeedbackStrategy} from "./feedbackStrategies";

@@ -128,2 +128,4 @@ export type FormContextPayload = {

onValidation: () => {},
feedbackStrategy: FeedbackStrategies.Always,
serverErrors: null,
};

@@ -136,4 +138,3 @@

if (props.serverErrors !== state.oldServerErrors) {
// prettier-ignore
const newFormState = applyServerErrorsToFormState/*::<T>*/(
const newFormState = applyServerErrorsToFormState<T>(
props.serverErrors,

@@ -140,0 +141,0 @@ state.formState

25

src/ObjectField.js

@@ -13,3 +13,2 @@ // @flow strict

} from "./types";
import {type FormContextPayload} from "./Form";
import {FormContext} from "./Form";

@@ -40,3 +39,2 @@ import {

+link: FieldLink<T>,
+formContext: FormContextPayload,
+validation: Validation<T>,

@@ -82,4 +80,8 @@ +customChange?: CustomChange<T>,

class ObjectField<T: {}> extends React.Component<Props<T>, State> {
export default class ObjectField<T: {}> extends React.Component<
Props<T>,
State
> {
static contextType = FormContext;
static _contextType = FormContext;
static defaultProps = {

@@ -181,3 +183,3 @@ validation: () => [],

const {formState} = this.props.link;
const {shouldShowError} = this.props.formContext;
const {shouldShowError} = this.context;

@@ -205,16 +207,1 @@ const links = makeLinks(

}
// Using a HOC here is not possible due to a Flow bug: https://github.com/facebook/flow/issues/6903
function wrap<T: {}>(
props: $Diff<Props<T>, {+formContext: FormContextPayload}>
) {
return (
<FormContext.Consumer>
{formContext => <ObjectField {...props} formContext={formContext} />}
</FormContext.Consumer>
);
}
wrap.defaultProps = ObjectField.defaultProps;
wrap._contextType = ObjectField.contextType;
export default wrap;

11

src/shapedTree.js

@@ -166,4 +166,11 @@ // @flow strict

invariant(value instanceof Object, "value isn't an object in checkTree");
Object.keys(tree.children).forEach(k => {
checkShape(value[k], tree.children[k]);
const valueEntries = Object.entries(value);
const childrenKeys = new Set(Object.keys(tree.children));
invariant(
valueEntries.length === childrenKeys.size,
"value doesn't have the right number of keys"
);
valueEntries.forEach(([key, value]) => {
invariant(childrenKeys.has(key));
checkShape(value, tree.children[key]);
});

@@ -170,0 +177,0 @@ }

78

src/test/Form.test.js

@@ -51,3 +51,2 @@ // @flow

initialValue={1}
feedbackStrategy={FeedbackStrategies.Always}
onSubmit={onSubmit}

@@ -91,3 +90,2 @@ serverErrors={{"/": ["Server error", "Another server error"]}}

}}
feedbackStrategy={FeedbackStrategies.Always}
onSubmit={onSubmit}

@@ -132,3 +130,2 @@ serverErrors={{

}}
feedbackStrategy={FeedbackStrategies.Always}
onSubmit={onSubmit}

@@ -155,3 +152,2 @@ serverErrors={{

}}
feedbackStrategy={FeedbackStrategies.Always}
onSubmit={onSubmit}

@@ -193,5 +189,3 @@ serverErrors={{

}}
feedbackStrategy={FeedbackStrategies.Always}
onSubmit={onSubmit}
serverErrors={null}
>

@@ -261,5 +255,3 @@ {link => (

}}
feedbackStrategy={FeedbackStrategies.Always}
onSubmit={onSubmit}
serverErrors={null}
>

@@ -304,8 +296,3 @@ {link => (

const renderer = TestRenderer.create(
<Form
initialValue={1}
feedbackStrategy={FeedbackStrategies.Always}
onSubmit={onSubmit}
serverErrors={null}
>
<Form initialValue={1} onSubmit={onSubmit}>
{renderFn}

@@ -327,8 +314,3 @@ </Form>

const renderer = TestRenderer.create(
<Form
initialValue={1}
feedbackStrategy={FeedbackStrategies.Always}
onSubmit={onSubmit}
serverErrors={null}
>
<Form initialValue={1} onSubmit={onSubmit}>
{renderFn}

@@ -355,8 +337,3 @@ </Form>

TestRenderer.create(
<Form
initialValue={1}
feedbackStrategy={FeedbackStrategies.Always}
onSubmit={onSubmit}
serverErrors={{"/": ["Server error", "Another server error"]}}
>
<Form initialValue={1} onSubmit={onSubmit}>
{renderFn}

@@ -389,8 +366,3 @@ </Form>

TestRenderer.create(
<Form
initialValue={1}
feedbackStrategy={FeedbackStrategies.Always}
onSubmit={jest.fn()}
serverErrors={{"/": ["Server error", "Another server error"]}}
>
<Form initialValue={1} onSubmit={jest.fn()}>
{renderFn}

@@ -423,8 +395,3 @@ </Form>

TestRenderer.create(
<Form
initialValue={1}
feedbackStrategy={FeedbackStrategies.Always}
onSubmit={onSubmit}
serverErrors={{"/": ["Server error", "Another server error"]}}
>
<Form initialValue={1} onSubmit={onSubmit}>
{renderFn}

@@ -482,8 +449,3 @@ </Form>

TestRenderer.create(
<Form
initialValue={1}
feedbackStrategy={FeedbackStrategies.Always}
onSubmit={onSubmit}
serverErrors={{"/": ["Server error", "Another server error"]}}
>
<Form initialValue={1} onSubmit={onSubmit}>
{renderFn}

@@ -506,8 +468,3 @@ </Form>

TestRenderer.create(
<Form
initialValue={1}
feedbackStrategy={FeedbackStrategies.Always}
onSubmit={onSubmit}
serverErrors={{"/": ["Server error", "Another server error"]}}
>
<Form initialValue={1} onSubmit={onSubmit}>
{renderFn}

@@ -529,8 +486,3 @@ </Form>

TestRenderer.create(
<Form
initialValue={1}
feedbackStrategy={FeedbackStrategies.Always}
onSubmit={onSubmit}
serverErrors={{"/": ["Server error", "Another server error"]}}
>
<Form initialValue={1} onSubmit={onSubmit}>
{(_, onSubmit) => (

@@ -555,8 +507,3 @@ <button

TestRenderer.create(
<Form
initialValue={1}
feedbackStrategy={FeedbackStrategies.Always}
onChange={onChange}
serverErrors={{"/": ["Server error", "Another server error"]}}
>
<Form initialValue={1} onChange={onChange}>
{renderFn}

@@ -576,8 +523,3 @@ </Form>

const renderer = TestRenderer.create(
<Form
initialValue={""}
feedbackStrategy={FeedbackStrategies.Always}
onValidation={onValidation}
serverErrors={{"/": ["Server error", "Another server error"]}}
>
<Form initialValue={""} onValidation={onValidation}>
{link => (

@@ -584,0 +526,0 @@ <TestField

src/test/setup.js
src/withFormContext.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc