@tenon-io/tenon-ui - npm Package Compare versions

Comparing version 1.0.0-alpha.17 to 1.0.0-alpha.18

es/modules/forms/tenonForm/Form.js

@@ -63,2 +63,5 @@ 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; };
  *                  if any, from the smart form state.
+ *
+ * Context also contains a registerErrors boolean what can be used
+ * by the consumers to decide when to show errors.
  * */
@@ -155,3 +158,3 @@ var Form = (_temp2 = _class = function (_Component) {
             });
-        }, _this.getContext = memoize(function () {
+        }, _this.getContext = memoize(function (registerErrors) {
             return {
@@ -164,3 +167,4 @@ registerControl: _this.registerControl,
                 getControlValidity: _this.getControlValidity,
-                getControlErrorText: _this.getControlErrorText
+                getControlErrorText: _this.getControlErrorText,
+                registerErrors: registerErrors
             };
@@ -273,3 +277,3 @@ }), _temp), _possibleConstructorReturn(_this, _ret);
      * Builds up the React Context value. This function
-     * memoized to avoid Consumer redenders.
+     * memoized to avoid Consumer rerenders.
      */
@@ -279,2 +283,3 @@
     Form.prototype.render = function render() {
+        var alwaysShowErrors = this.props.alwaysShowErrors;
         var _state = this.state,
@@ -285,3 +290,3 @@ formControls = _state.formControls,
 
-        var context = this.getContext();
+        var context = this.getContext(alwaysShowErrors || hasSubmitted);
         return React.createElement(
@@ -306,3 +311,4 @@ FormContext.Provider,
     children: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired
+    onSubmit: PropTypes.func.isRequired,
+    alwaysShowErrors: PropTypes.bool
 } : {};
@@ -309,0 +315,0 @@

es/modules/forms/tenonForm/InputController.js

@@ -73,4 +73,4 @@ 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; };
         _this.controlId = uuidv4();
+        _this.contentHintId = uuidv4();
         _this.errorId = uuidv4();
-        _this.contentHintId = uuidv4();
 
@@ -238,3 +238,4 @@ _this.state = {
             getControlErrorText = _props4.getControlErrorText,
-            name = _props4.name;
+            name = _props4.name,
+            registerErrors = _props4.registerErrors;
 
@@ -246,3 +247,3 @@ return children({
             getContentHintProps: this.getContentHintProps,
-            showError: !getControlValidity(name),
+            showError: registerErrors ? !getControlValidity(name) : false,
             errorText: getControlErrorText(name)
@@ -280,6 +281,7 @@ });
             getControlValue = _props6.getControlValue,
-            getControlValidity = _props6.getControlValidity;
+            getControlValidity = _props6.getControlValidity,
+            registerErrors = _props6.registerErrors;
         var contentHintId = _this2.state.contentHintId;
 
-        var isValid = getControlValidity(name);
+        var isValid = registerErrors ? getControlValidity(name) : true;
 
@@ -351,3 +353,4 @@ return _extends({
     validators: PropTypes.arrayOf(PropTypes.object),
-    name: PropTypes.string.isRequired
+    name: PropTypes.string.isRequired,
+    registerErrors: PropTypes.bool
 } : {};
@@ -354,0 +357,0 @@ var InputController = function InputController(props) {

es/modules/tabs/Tabs.js

@@ -72,3 +72,3 @@ 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; };
                     },
-                    style: { outline: '0' }
+                    style: { outline: 'none' }
                 },
@@ -75,0 +75,0 @@ noHeading ? null : React.createElement(

lib/modules/forms/tenonForm/Form.js

@@ -80,2 +80,5 @@ 'use strict';
  *                  if any, from the smart form state.
+ *
+ * Context also contains a registerErrors boolean what can be used
+ * by the consumers to decide when to show errors.
  * */
@@ -172,3 +175,3 @@ var Form = (_temp2 = _class = function (_Component) {
             });
-        }, _this.getContext = (0, _memoizeOne2.default)(function () {
+        }, _this.getContext = (0, _memoizeOne2.default)(function (registerErrors) {
             return {
@@ -181,3 +184,4 @@ registerControl: _this.registerControl,
                 getControlValidity: _this.getControlValidity,
-                getControlErrorText: _this.getControlErrorText
+                getControlErrorText: _this.getControlErrorText,
+                registerErrors: registerErrors
             };
@@ -290,3 +294,3 @@ }), _temp), _possibleConstructorReturn(_this, _ret);
      * Builds up the React Context value. This function
-     * memoized to avoid Consumer redenders.
+     * memoized to avoid Consumer rerenders.
      */
@@ -296,2 +300,3 @@
     Form.prototype.render = function render() {
+        var alwaysShowErrors = this.props.alwaysShowErrors;
         var _state = this.state,
@@ -302,3 +307,3 @@ formControls = _state.formControls,
 
-        var context = this.getContext();
+        var context = this.getContext(alwaysShowErrors || hasSubmitted);
         return _react2.default.createElement(
@@ -323,5 +328,6 @@ _FormContext2.default.Provider,
     children: _propTypes2.default.func.isRequired,
-    onSubmit: _propTypes2.default.func.isRequired
+    onSubmit: _propTypes2.default.func.isRequired,
+    alwaysShowErrors: _propTypes2.default.bool
 } : {};
 exports.default = Form;
 module.exports = exports['default'];

lib/modules/forms/tenonForm/InputController.js

@@ -91,4 +91,4 @@ 'use strict';
         _this.controlId = (0, _v2.default)();
+        _this.contentHintId = (0, _v2.default)();
         _this.errorId = (0, _v2.default)();
-        _this.contentHintId = (0, _v2.default)();
 
@@ -256,3 +256,4 @@ _this.state = {
             getControlErrorText = _props4.getControlErrorText,
-            name = _props4.name;
+            name = _props4.name,
+            registerErrors = _props4.registerErrors;
 
@@ -264,3 +265,3 @@ return children({
             getContentHintProps: this.getContentHintProps,
-            showError: !getControlValidity(name),
+            showError: registerErrors ? !getControlValidity(name) : false,
             errorText: getControlErrorText(name)
@@ -298,6 +299,7 @@ });
             getControlValue = _props6.getControlValue,
-            getControlValidity = _props6.getControlValidity;
+            getControlValidity = _props6.getControlValidity,
+            registerErrors = _props6.registerErrors;
         var contentHintId = _this2.state.contentHintId;
 
-        var isValid = getControlValidity(name);
+        var isValid = registerErrors ? getControlValidity(name) : true;
 
@@ -369,3 +371,4 @@ return _extends({
     validators: _propTypes2.default.arrayOf(_propTypes2.default.object),
-    name: _propTypes2.default.string.isRequired
+    name: _propTypes2.default.string.isRequired,
+    registerErrors: _propTypes2.default.bool
 } : {};
@@ -372,0 +375,0 @@ var InputController = function InputController(props) {

lib/modules/tabs/Tabs.js

@@ -98,3 +98,3 @@ 'use strict';
                     },
-                    style: { outline: '0' }
+                    style: { outline: 'none' }
                 },
@@ -101,0 +101,0 @@ noHeading ? null : _react2.default.createElement(

package.json

 {
     "name": "@tenon-io/tenon-ui",
-    "version": "1.0.0-alpha.17",
+    "version": "1.0.0-alpha.18",
     "description": "Tenon ui components library",
@@ -5,0 +5,0 @@ "contributors": [

No alert changes

Improved metrics

Total package byte prevSize

153615

increased by0.68%

Lines of code

3394

increased by0.53%

No dependency changes