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

Comparing version 1.0.0-alpha.23 to 1.0.0-beta.1

CHANGELOG.md

@@ -0,0 +0,0 @@ # Changelog

es/modules/forms/tenonForm/Input.js

@@ -54,3 +54,3 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
             "div",
-            { className: "fieldwrapper" },
+            { className: "fieldWrapper" },
             React.createElement(
@@ -57,0 +57,0 @@ "label",

es/modules/forms/tenonForm/InputController.js

@@ -77,3 +77,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; };
         _this.state = {
-            contentHintId: null
+            contentHintId: ''
         };
@@ -136,2 +136,5 @@
 
+        //This is required to update the component when a content hint is
+        //detected so that the id linkage is established in the prop
+        //getter functions.
         if (this.contentHintRegistered && !this.state.contentHintId) {
@@ -183,2 +186,10 @@ this.setState({
     /**
+     * Calculates the aria-describedby property of the <input> tag.
+     *
+     * @param {boolean} isValid
+     * @returns {string | null}
+     */
+
+
+    /**
      * @function
@@ -272,2 +283,19 @@ * Prop getter for the <input>.
 
+    this.getAriaDescribedBy = function (isValid) {
+        var contentHintId = _this2.state.contentHintId;
+
+
+        var describedByIds = [];
+
+        if (contentHintId) {
+            describedByIds.push(contentHintId);
+        }
+
+        if (!isValid) {
+            describedByIds.push(_this2.errorId);
+        }
+
+        return describedByIds.join(' ') || null;
+    };
+
     this.getInputProps = function () {
@@ -284,3 +312,2 @@ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
             registerErrors = _props6.registerErrors;
-        var contentHintId = _this2.state.contentHintId;
 
@@ -290,3 +317,3 @@ var isValid = registerErrors ? getControlValidity(name) : true;
         return _extends({
-            'aria-describedby': !isValid || contentHintId ? '' + (contentHintId ? contentHintId : '') + (!isValid && contentHintId ? ' ' : '') + (isValid ? '' : _this2.errorId) : null,
+            'aria-describedby': _this2.getAriaDescribedBy(isValid),
             'aria-disabled': props['disabled'] ? 'true' : null,
@@ -329,3 +356,3 @@ 'aria-invalid': isValid ? null : 'true',
             }
-            var validateResult = cur.func(textValue, cur.compare);
+            var validateResult = cur.func(textValue);
             return !validateResult ? { validity: validateResult, errorText: cur.message } : prev;
@@ -332,0 +359,0 @@ }, { validity: true, errorText: '' });

es/modules/tabs/Tabs.js

 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 _class, _temp2;
+var _class, _temp;
 
@@ -118,17 +118,11 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  */
-var Tabs = (_temp2 = _class = function (_Component) {
+var Tabs = (_temp = _class = function (_Component) {
     _inherits(Tabs, _Component);
 
-    function Tabs() {
-        var _temp, _this, _ret;
-
+    function Tabs(props) {
         _classCallCheck(this, Tabs);
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-        }
+        var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
-            activeTabId: ''
-        }, _this.tabsById = [], _this.panelIdByTabId = {}, _this.tabRefs = {}, _this.panelRefs = {}, _this.onKeyUpHandler = function (e) {
+        _this.onKeyUpHandler = function (e) {
             var activeTabId = _this.state.activeTabId;
@@ -161,10 +155,18 @@
             });
-        }, _this.onClickHandler = function (e, tab) {
+        };
+
+        _this.onClickHandler = function (e, tab) {
             e.preventDefault();
             _this.setState({ activeTabId: tab.tabId });
-        }, _this.registerTabRef = function (tabId, ref) {
+        };
+
+        _this.registerTabRef = function (tabId, ref) {
             _this.tabRefs[tabId] = ref;
-        }, _this.registerPanelRef = function (panelId, ref) {
+        };
+
+        _this.registerPanelRef = function (panelId, ref) {
             _this.panelRefs[panelId] = ref;
-        }, _this.calcTabMetadata = memoize(function (tabChildren) {
+        };
+
+        _this.calcTabMetadata = memoize(function (tabChildren) {
             _this.tabRefs = {};
@@ -174,3 +176,3 @@ _this.panelRefs = {};
             var tabPanelMetadata = tabChildren.map(function (child) {
-                return child ? {
+                return child.title ? {
                     title: child.title,
@@ -202,7 +204,19 @@ name: child.name,
             return { tabPanelMetadata: tabPanelMetadata, tabMetadata: tabMetadata };
-        }, deepEqual), _this.getSelectedTab = memoize(function (activeTabId, tabsById) {
+        }, deepEqual);
+        _this.getSelectedTab = memoize(function (activeTabId, tabsById) {
             return tabsById.filter(function (tab) {
                 return tab.tabId === activeTabId;
             }).length === 0 ? _this.tabsById[0].tabId : activeTabId;
-        }, deepEqual), _temp), _possibleConstructorReturn(_this, _ret);
+        }, deepEqual);
+
+
+        _this.state = {
+            activeTabId: ''
+        };
+
+        _this.tabsById = [];
+        _this.panelIdByTabId = {};
+        _this.tabRefs = {};
+        _this.panelRefs = {};
+        return _this;
     }
@@ -309,3 +323,3 @@
         //If a toggle render function is defined on the Tab component, it is
-        //applied. If a child toggle render function is defined it overrides
+        //applied. If a child toggle render function is defined it overrides.
 
@@ -364,10 +378,12 @@ var tabs = this.calcTabMetadata(React.Children.map(children, function (child, i) {
             React.Children.map(children, function (child, i) {
+                var tabPanelMetadata = tabs.tabPanelMetadata[i];
+
                 return child ? React.cloneElement(child, {
-                    key: tabs.tabPanelMetadata[i].tabId,
-                    tabId: tabs.tabPanelMetadata[i].tabId,
-                    panelId: tabs.tabPanelMetadata[i].panelId,
+                    key: tabPanelMetadata.tabId,
+                    tabId: tabPanelMetadata.tabId,
+                    panelId: tabPanelMetadata.panelId,
                     ref: function ref(panel) {
-                        _this2.registerPanelRef(tabs.tabPanelMetadata[i].tabId, panel);
+                        _this2.registerPanelRef(tabPanelMetadata.tabId, panel);
                     },
-                    isHidden: tabs.tabPanelMetadata[i].tabId !== selectedTabId
+                    isHidden: tabPanelMetadata.tabId !== selectedTabId
                 }) : child;
@@ -379,3 +395,3 @@ })
     return Tabs;
-}(Component), _class.Tab = Tab, _temp2);
+}(Component), _class.Tab = Tab, _temp);
 Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -382,0 +398,0 @@ toggleRender: PropTypes.func

es/modules/utils/data/validation.js

@@ -16,8 +16,12 @@ /**
  *
+ * Note that this validator is curried.
+ *
+ * @param {number} minLength
  * @param {string} value
- * @param {number} length
  * @returns {boolean}
  */
-export var isLongerThan = function isLongerThan(value, length) {
-    return !value || value.length > length;
+export var isLongerThan = function isLongerThan(minLength) {
+    return function (value) {
+        return !value || value.length > minLength;
+    };
 };
@@ -24,0 +28,0 @@

es/modules/utils/helpers/validationHelpers.js

@@ -7,13 +7,11 @@ /**
  * @param {string} message
- * @param {any} compare
  * @param {boolean} ignore
  * @returns {object} - A validator configuration object.
  */
-export var validator = function validator(func, message, compare, ignore) {
+export var validator = function validator(func, message, ignore) {
   return {
     func: func,
     message: message,
-    compare: compare,
     ignore: ignore
   };
 };

lib/modules/forms/tenonForm/Input.js

@@ -62,3 +62,3 @@ "use strict";
             "div",
-            { className: "fieldwrapper" },
+            { className: "fieldWrapper" },
             _react2.default.createElement(
@@ -65,0 +65,0 @@ "label",

lib/modules/forms/tenonForm/InputController.js

@@ -95,3 +95,3 @@ 'use strict';
         _this.state = {
-            contentHintId: null
+            contentHintId: ''
         };
@@ -154,2 +154,5 @@
 
+        //This is required to update the component when a content hint is
+        //detected so that the id linkage is established in the prop
+        //getter functions.
         if (this.contentHintRegistered && !this.state.contentHintId) {
@@ -201,2 +204,10 @@ this.setState({
     /**
+     * Calculates the aria-describedby property of the <input> tag.
+     *
+     * @param {boolean} isValid
+     * @returns {string | null}
+     */
+
+
+    /**
      * @function
@@ -290,2 +301,19 @@ * Prop getter for the <input>.
 
+    this.getAriaDescribedBy = function (isValid) {
+        var contentHintId = _this2.state.contentHintId;
+
+
+        var describedByIds = [];
+
+        if (contentHintId) {
+            describedByIds.push(contentHintId);
+        }
+
+        if (!isValid) {
+            describedByIds.push(_this2.errorId);
+        }
+
+        return describedByIds.join(' ') || null;
+    };
+
     this.getInputProps = function () {
@@ -302,3 +330,2 @@ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
             registerErrors = _props6.registerErrors;
-        var contentHintId = _this2.state.contentHintId;
 
@@ -308,3 +335,3 @@ var isValid = registerErrors ? getControlValidity(name) : true;
         return _extends({
-            'aria-describedby': !isValid || contentHintId ? '' + (contentHintId ? contentHintId : '') + (!isValid && contentHintId ? ' ' : '') + (isValid ? '' : _this2.errorId) : null,
+            'aria-describedby': _this2.getAriaDescribedBy(isValid),
             'aria-disabled': props['disabled'] ? 'true' : null,
@@ -347,3 +374,3 @@ 'aria-invalid': isValid ? null : 'true',
             }
-            var validateResult = cur.func(textValue, cur.compare);
+            var validateResult = cur.func(textValue);
             return !validateResult ? { validity: validateResult, errorText: cur.message } : prev;
@@ -350,0 +377,0 @@ }, { validity: true, errorText: '' });

lib/modules/tabs/Tabs.js

@@ -8,3 +8,3 @@ 'use strict';
 
-var _class, _temp2;
+var _class, _temp;
 
@@ -145,17 +145,11 @@ var _react = require('react');
  */
-var Tabs = (_temp2 = _class = function (_Component) {
+var Tabs = (_temp = _class = function (_Component) {
     _inherits(Tabs, _Component);
 
-    function Tabs() {
-        var _temp, _this, _ret;
-
+    function Tabs(props) {
         _classCallCheck(this, Tabs);
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-        }
+        var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
-            activeTabId: ''
-        }, _this.tabsById = [], _this.panelIdByTabId = {}, _this.tabRefs = {}, _this.panelRefs = {}, _this.onKeyUpHandler = function (e) {
+        _this.onKeyUpHandler = function (e) {
             var activeTabId = _this.state.activeTabId;
@@ -188,10 +182,18 @@
             });
-        }, _this.onClickHandler = function (e, tab) {
+        };
+
+        _this.onClickHandler = function (e, tab) {
             e.preventDefault();
             _this.setState({ activeTabId: tab.tabId });
-        }, _this.registerTabRef = function (tabId, ref) {
+        };
+
+        _this.registerTabRef = function (tabId, ref) {
             _this.tabRefs[tabId] = ref;
-        }, _this.registerPanelRef = function (panelId, ref) {
+        };
+
+        _this.registerPanelRef = function (panelId, ref) {
             _this.panelRefs[panelId] = ref;
-        }, _this.calcTabMetadata = (0, _memoizeOne2.default)(function (tabChildren) {
+        };
+
+        _this.calcTabMetadata = (0, _memoizeOne2.default)(function (tabChildren) {
             _this.tabRefs = {};
@@ -201,3 +203,3 @@ _this.panelRefs = {};
             var tabPanelMetadata = tabChildren.map(function (child) {
-                return child ? {
+                return child.title ? {
                     title: child.title,
@@ -229,7 +231,19 @@ name: child.name,
             return { tabPanelMetadata: tabPanelMetadata, tabMetadata: tabMetadata };
-        }, _lodash2.default), _this.getSelectedTab = (0, _memoizeOne2.default)(function (activeTabId, tabsById) {
+        }, _lodash2.default);
+        _this.getSelectedTab = (0, _memoizeOne2.default)(function (activeTabId, tabsById) {
             return tabsById.filter(function (tab) {
                 return tab.tabId === activeTabId;
             }).length === 0 ? _this.tabsById[0].tabId : activeTabId;
-        }, _lodash2.default), _temp), _possibleConstructorReturn(_this, _ret);
+        }, _lodash2.default);
+
+
+        _this.state = {
+            activeTabId: ''
+        };
+
+        _this.tabsById = [];
+        _this.panelIdByTabId = {};
+        _this.tabRefs = {};
+        _this.panelRefs = {};
+        return _this;
     }
@@ -336,3 +350,3 @@
         //If a toggle render function is defined on the Tab component, it is
-        //applied. If a child toggle render function is defined it overrides
+        //applied. If a child toggle render function is defined it overrides.
 
@@ -391,10 +405,12 @@ var tabs = this.calcTabMetadata(_react2.default.Children.map(children, function (child, i) {
             _react2.default.Children.map(children, function (child, i) {
+                var tabPanelMetadata = tabs.tabPanelMetadata[i];
+
                 return child ? _react2.default.cloneElement(child, {
-                    key: tabs.tabPanelMetadata[i].tabId,
-                    tabId: tabs.tabPanelMetadata[i].tabId,
-                    panelId: tabs.tabPanelMetadata[i].panelId,
+                    key: tabPanelMetadata.tabId,
+                    tabId: tabPanelMetadata.tabId,
+                    panelId: tabPanelMetadata.panelId,
                     ref: function ref(panel) {
-                        _this2.registerPanelRef(tabs.tabPanelMetadata[i].tabId, panel);
+                        _this2.registerPanelRef(tabPanelMetadata.tabId, panel);
                     },
-                    isHidden: tabs.tabPanelMetadata[i].tabId !== selectedTabId
+                    isHidden: tabPanelMetadata.tabId !== selectedTabId
                 }) : child;
@@ -406,3 +422,3 @@ })
     return Tabs;
-}(_react.Component), _class.Tab = Tab, _temp2);
+}(_react.Component), _class.Tab = Tab, _temp);
 Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -409,0 +425,0 @@ toggleRender: _propTypes2.default.func

lib/modules/utils/data/validation.js

@@ -19,8 +19,12 @@ 'use strict';
  *
+ * Note that this validator is curried.
+ *
+ * @param {number} minLength
  * @param {string} value
- * @param {number} length
  * @returns {boolean}
  */
-var isLongerThan = exports.isLongerThan = function isLongerThan(value, length) {
-    return !value || value.length > length;
+var isLongerThan = exports.isLongerThan = function isLongerThan(minLength) {
+    return function (value) {
+        return !value || value.length > minLength;
+    };
 };
@@ -27,0 +31,0 @@

lib/modules/utils/helpers/validationHelpers.js

@@ -10,13 +10,11 @@ "use strict";
  * @param {string} message
- * @param {any} compare
  * @param {boolean} ignore
  * @returns {object} - A validator configuration object.
  */
-var validator = exports.validator = function validator(func, message, compare, ignore) {
+var validator = exports.validator = function validator(func, message, ignore) {
   return {
     func: func,
     message: message,
-    compare: compare,
     ignore: ignore
   };
 };

package.json

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

New alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

172156

increased by0.55%

Lines of code

3951

increased by1.54%

No dependency changes