vcc-ui - npm Package Compare versions

Comparing version 1.0.0-rc.4 to 1.0.0-rc.5

es/components/select-input/index.js

@@ -12,2 +12,3 @@ function _extends() { _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; }; return _extends.apply(this, arguments); }
 import { Block } from "../block";
+import { Spinner } from "../spinner";
 import { getThemeStyle } from "../../get-theme-style";
@@ -90,2 +91,12 @@
 
+var isLoadingStyles = function isLoadingStyles() {
+  return {
+    background: "none",
+    display: "flex",
+    justifyContent: "center",
+    width: "100%",
+    padding: "15px 18px 14px 18px"
+  };
+};
+
 var SelectInputComponent = function SelectInputComponent(_ref3) {
@@ -98,3 +109,4 @@ var _ref3$as = _ref3.as,
       options = _ref3.options,
-      props = _objectWithoutProperties(_ref3, ["as", "value", "placeholder", "disabled", "options"]);
+      loading = _ref3.loading,
+      props = _objectWithoutProperties(_ref3, ["as", "value", "placeholder", "disabled", "options", "loading"]);
 
@@ -104,2 +116,12 @@ var _useFela = useFela(),
 
+  if (loading) {
+    return React.createElement(Block, {
+      extend: [styles, isLoadingStyles, getThemeStyle("selectInput", theme, {
+        disabled: disabled
+      })]
+    }, React.createElement(Spinner, {
+      size: 24
+    }));
+  }
+
   return React.createElement(Block, _extends({
@@ -132,3 +154,4 @@ as: as,
   value: string,
-  disabled: bool
+  disabled: bool,
+  loading: bool
 };
@@ -135,0 +158,0 @@ SelectInputComponent.propTypes = propTypes;

es/components/select-input/stories.js

@@ -169,2 +169,75 @@ 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); }
   return React.createElement(Example, null);
+}).addWithJSX("With loading spinner", function () {
+  var Example =
+  /*#__PURE__*/
+  function (_React$Component3) {
+    _inherits(Example, _React$Component3);
+
+    function Example() {
+      var _getPrototypeOf4;
+
+      var _this3;
+
+      _classCallCheck(this, Example);
+
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
+      }
+
+      _this3 = _possibleConstructorReturn(this, (_getPrototypeOf4 = _getPrototypeOf(Example)).call.apply(_getPrototypeOf4, [this].concat(args)));
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "state", {
+        options: [{
+          value: "bilmodell",
+          label: "Bilmodell"
+        }, {
+          value: "c30",
+          label: "Volvo C30",
+          disabled: true
+        }, {
+          value: "c70",
+          label: "Volvo C70"
+        }, {
+          value: "c90",
+          label: "Volvo C90"
+        }, {
+          value: "c40",
+          label: "Volvo S40"
+        }, {
+          value: "s60",
+          label: "Volvo S60"
+        }, {
+          value: "s80",
+          label: "Volvo S80"
+        }, {
+          value: "s90",
+          label: "Volvo S90"
+        }],
+        value: "bilmodell"
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "onChange", function (e) {
+        _this3.setState({
+          value: e.target.value
+        });
+      });
+
+      return _this3;
+    }
+
+    _createClass(Example, [{
+      key: "render",
+      value: function render() {
+        return React.createElement(SelectInput, {
+          onChange: this.onChange.bind(this),
+          options: this.state.options,
+          loading: true
+        });
+      }
+    }]);
+
+    return Example;
+  }(React.Component);
+
+  return React.createElement(Example, null);
 });

es/components/tab-nav-item/index.js

@@ -90,3 +90,3 @@ function _extends() { _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; }; return _extends.apply(this, arguments); }
   useEffect(function () {
-    if (updateDimensions) {
+    if (updateDimensions && ref.current) {
       var _ref3 = ref.current ? ref.current.getBoundingClientRect() : {
@@ -110,2 +110,11 @@ width: 0
   };
+
+  if (typeof index !== "number") {
+    // Index property is passed down only to direct descendants of <TabNav> and is required for line transitions to work as intended.
+    // If <TabNavItem>s are not direct descendants of <TabNav> an index will need to be passed down manually.
+    // eslint-disable-next-line no-console
+    console.warn("TabNavItem is not a direct descendant of TabNav. Please provide an index to each TabNavItem to enable line transitions.");
+    return null;
+  }
+
   return React.createElement(Click, _extends({
@@ -112,0 +121,0 @@ extend: _objectSpread({}, styles(styleProps), getThemeStyle("tabNavItem", theme, styleProps))

es/components/tab-nav/index.js

@@ -38,3 +38,3 @@ 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 TabNavComponent(props) {
+  function TabNavComponent(_props) {
     var _this;
@@ -44,6 +44,21 @@
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(TabNavComponent).call(this, props));
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(TabNavComponent).call(this, _props));
 
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {});
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getActiveIndex", function () {
+      var children = _this.props.children;
+      return children.length ? children.filter(Boolean).findIndex(function (child) {
+        var props = child.props;
+        var nestLimit = 5;
+
+        while (!("isActive" in props) && nestLimit > 0 && props.children && props.children.props) {
+          props = props.children.props;
+          nestLimit -= 1;
+        }
+
+        return props.isActive;
+      }) : 0;
+    });
+
     _this.root = React.createRef();
@@ -195,3 +210,3 @@ _this.navItemGroup = React.createRef();
         direction: "left",
-        size: "10px",
+        size: 10,
         color: reverseOut ? theme.colors.white : theme.colors.primary.blue
@@ -258,5 +273,3 @@ }), React.createElement(Inline, {
 
-        var activeIndex = children.map(function (child) {
-          return child.props.isActive;
-        }).indexOf(true);
+        var activeIndex = this.getActiveIndex();
         return React.createElement(LineTransitionContext.Provider, {
@@ -263,0 +276,0 @@ value: {

es/index.js

@@ -26,3 +26,3 @@ export { Block } from "./components/block";
 export { getStyles } from "./get-styles";
-export { loadThemeFonts } from "./load-fonts";
-export { useTheme } from "./use-theme";
+export { useTheme } from "./use-theme";
+export { FelaTheme as Theme } from "react-fela";

lib/components/select-input/index.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _spinner = require("../spinner");
+
 var _getThemeStyle = require("../../get-theme-style");
@@ -102,2 +104,12 @@
 
+var isLoadingStyles = function isLoadingStyles() {
+  return {
+    background: "none",
+    display: "flex",
+    justifyContent: "center",
+    width: "100%",
+    padding: "15px 18px 14px 18px"
+  };
+};
+
 var SelectInputComponent = function SelectInputComponent(_ref3) {
@@ -110,3 +122,4 @@ var _ref3$as = _ref3.as,
       options = _ref3.options,
-      props = _objectWithoutProperties(_ref3, ["as", "value", "placeholder", "disabled", "options"]);
+      loading = _ref3.loading,
+      props = _objectWithoutProperties(_ref3, ["as", "value", "placeholder", "disabled", "options", "loading"]);
 
@@ -116,2 +129,12 @@ var _useFela = (0, _reactFela.useFela)(),
 
+  if (loading) {
+    return _react.default.createElement(_block.Block, {
+      extend: [styles, isLoadingStyles, (0, _getThemeStyle.getThemeStyle)("selectInput", theme, {
+        disabled: disabled
+      })]
+    }, _react.default.createElement(_spinner.Spinner, {
+      size: 24
+    }));
+  }
+
   return _react.default.createElement(_block.Block, _extends({
@@ -144,3 +167,4 @@ as: as,
   value: _propTypes.string,
-  disabled: _propTypes.bool
+  disabled: _propTypes.bool,
+  loading: _propTypes.bool
 };
@@ -147,0 +171,0 @@ SelectInputComponent.propTypes = propTypes;

lib/components/select-input/stories.js

@@ -178,2 +178,75 @@ "use strict";
   return _react.default.createElement(Example, null);
+}).addWithJSX("With loading spinner", function () {
+  var Example =
+  /*#__PURE__*/
+  function (_React$Component3) {
+    _inherits(Example, _React$Component3);
+
+    function Example() {
+      var _getPrototypeOf4;
+
+      var _this3;
+
+      _classCallCheck(this, Example);
+
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
+      }
+
+      _this3 = _possibleConstructorReturn(this, (_getPrototypeOf4 = _getPrototypeOf(Example)).call.apply(_getPrototypeOf4, [this].concat(args)));
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "state", {
+        options: [{
+          value: "bilmodell",
+          label: "Bilmodell"
+        }, {
+          value: "c30",
+          label: "Volvo C30",
+          disabled: true
+        }, {
+          value: "c70",
+          label: "Volvo C70"
+        }, {
+          value: "c90",
+          label: "Volvo C90"
+        }, {
+          value: "c40",
+          label: "Volvo S40"
+        }, {
+          value: "s60",
+          label: "Volvo S60"
+        }, {
+          value: "s80",
+          label: "Volvo S80"
+        }, {
+          value: "s90",
+          label: "Volvo S90"
+        }],
+        value: "bilmodell"
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "onChange", function (e) {
+        _this3.setState({
+          value: e.target.value
+        });
+      });
+
+      return _this3;
+    }
+
+    _createClass(Example, [{
+      key: "render",
+      value: function render() {
+        return _react.default.createElement(_.SelectInput, {
+          onChange: this.onChange.bind(this),
+          options: this.state.options,
+          loading: true
+        });
+      }
+    }]);
+
+    return Example;
+  }(_react.default.Component);
+
+  return _react.default.createElement(Example, null);
 });

lib/components/tab-nav-item/index.js

@@ -106,3 +106,3 @@ "use strict";
   (0, _react.useEffect)(function () {
-    if (updateDimensions) {
+    if (updateDimensions && ref.current) {
       var _ref3 = ref.current ? ref.current.getBoundingClientRect() : {
@@ -126,2 +126,11 @@ width: 0
   };
+
+  if (typeof index !== "number") {
+    // Index property is passed down only to direct descendants of <TabNav> and is required for line transitions to work as intended.
+    // If <TabNavItem>s are not direct descendants of <TabNav> an index will need to be passed down manually.
+    // eslint-disable-next-line no-console
+    console.warn("TabNavItem is not a direct descendant of TabNav. Please provide an index to each TabNavItem to enable line transitions.");
+    return null;
+  }
+
   return _react.default.createElement(_click.Click, _extends({
@@ -128,0 +137,0 @@ extend: _objectSpread({}, styles(styleProps), (0, _getThemeStyle.getThemeStyle)("tabNavItem", theme, styleProps))

lib/components/tab-nav/index.js

@@ -60,3 +60,3 @@ "use strict";
 
-  function TabNavComponent(props) {
+  function TabNavComponent(_props) {
     var _this;
@@ -66,6 +66,21 @@
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(TabNavComponent).call(this, props));
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(TabNavComponent).call(this, _props));
 
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {});
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getActiveIndex", function () {
+      var children = _this.props.children;
+      return children.length ? children.filter(Boolean).findIndex(function (child) {
+        var props = child.props;
+        var nestLimit = 5;
+
+        while (!("isActive" in props) && nestLimit > 0 && props.children && props.children.props) {
+          props = props.children.props;
+          nestLimit -= 1;
+        }
+
+        return props.isActive;
+      }) : 0;
+    });
+
     _this.root = _react.default.createRef();
@@ -217,3 +232,3 @@ _this.navItemGroup = _react.default.createRef();
         direction: "left",
-        size: "10px",
+        size: 10,
         color: reverseOut ? theme.colors.white : theme.colors.primary.blue
@@ -280,5 +295,3 @@ }), _react.default.createElement(_inline.Inline, {
 
-        var activeIndex = children.map(function (child) {
-          return child.props.isActive;
-        }).indexOf(true);
+        var activeIndex = this.getActiveIndex();
         return _react.default.createElement(LineTransitionContext.Provider, {
@@ -285,0 +298,0 @@ value: {

lib/index.js

@@ -162,12 +162,12 @@ "use strict";
 });
-Object.defineProperty(exports, "loadThemeFonts", {
+Object.defineProperty(exports, "useTheme", {
   enumerable: true,
   get: function get() {
-    return _loadFonts.loadThemeFonts;
+    return _useTheme.useTheme;
   }
 });
-Object.defineProperty(exports, "useTheme", {
+Object.defineProperty(exports, "Theme", {
   enumerable: true,
   get: function get() {
-    return _useTheme.useTheme;
+    return _reactFela.FelaTheme;
   }
@@ -226,4 +226,4 @@ });
 
-var _loadFonts = require("./load-fonts");
+var _useTheme = require("./use-theme");
 
-var _useTheme = require("./use-theme");
+var _reactFela = require("react-fela");

package.json

 {
 	"name": "vcc-ui",
-	"version": "1.0.0-rc.4",
+	"version": "1.0.0-rc.5",
 	"license": "LicenseRef-LICENSE",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6307033

increased by0.07%

Lines of code

12130

increased by1.24%

Worsened metrics

Number of package files

262

decreased by-0.76%

No dependency changes