UNPKG

react-formal

Version:

Classy HTML form management for React

74 lines (73 loc) 2.39 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _propTypes = _interopRequireDefault(require("prop-types")); var _react = _interopRequireDefault(require("react")); var _Message = _interopRequireDefault(require("./Message")); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } /** * Display all Form validation `errors` in a single summary list. * * ```jsx static * <Form * schema={modelSchema} * defaultValue={modelSchema.default()} * > * <Form.Summary/> * * <Form.Field name='name.first' placeholder='first'/> * <Form.Field name='name.last' placeholder='surname'/> * <Form.Field name='dateOfBirth' placeholder='dob'/> * * <Form.Submit>Validate</Form.Submit> * </Form> * ``` * * @memberof Form */ class Summary extends _react.default.PureComponent { render() { let _this$props = this.props, { formatMessage } = _this$props, props = _objectWithoutPropertiesLoose(_this$props, ["formatMessage"]); return /*#__PURE__*/_react.default.createElement(_Message.default, props, errors => errors.map(formatMessage)); } } Summary.propTypes = { /** * An error message renderer, Should return a `ReactElement` * ```ts static * function( * message: string, * idx: number, * errors: array * ): ReactElement * ``` */ formatMessage: _propTypes.default.func.isRequired, /** * A DOM node tag name or Component class the Message should render as. */ as: _propTypes.default.elementType.isRequired, /** * A css class that should be always be applied to the Summary container. */ errorClass: _propTypes.default.string, /** * Specify a group to show errors for, if empty all form errors will be shown in the Summary. */ group: _propTypes.default.string }; Summary.defaultProps = { as: 'ul', formatMessage: (message, idx) => /*#__PURE__*/_react.default.createElement("li", { key: idx }, message) }; var _default = Summary; exports.default = _default;