bootstrap-rn 0.2.11 → 0.2.13

package/dist/bootstrap-rn.umd.js

@@ -21,6 +21,18 @@
     }
   };
 
+  // @ts-ignore
+  // const expo = global.__expo;
+
+  const IOS_STATUS_BAR_HEIGHT = 20;
+  // Try to get height from expo if app is using expo env
+  // IOS >= 11 is handled using SafeAreaView
+
+  const APPROX_STATUSBAR_HEIGHT = reactNative.Platform.select({
+    android: reactNative.StatusBar.currentHeight,
+    ios: reactNative.Platform.Version < 11 ? IOS_STATUS_BAR_HEIGHT : 0
+  });
+
   const measureOffset = ref => new Promise(resolve => {
     if (ref.current) {
       ref.current.measureInWindow((x, y, width, height) => {
@@ -35,6 +47,8 @@
   });
 
   function useOverlayPosition(props) {
+    var _position$position, _position$position2;
+
     let {
       targetRef,
       overlayRef,
@@ -96,17 +110,25 @@
     React__default["default"].useLayoutEffect(() => {
       updatePosition();
     }, [placement, isOpen, offset, shouldFlip, crossOffset, shouldOverlapWithTrigger]);
+    const style = { ...position.position
+    };
+
+    if (position !== null && position !== void 0 && (_position$position = position.position) !== null && _position$position !== void 0 && _position$position.top || (position === null || position === void 0 ? void 0 : (_position$position2 = position.position) === null || _position$position2 === void 0 ? void 0 : _position$position2.top) === 0) {
+      var _position$position3;
+
+      style.top = ((position === null || position === void 0 ? void 0 : (_position$position3 = position.position) === null || _position$position3 === void 0 ? void 0 : _position$position3.top) || 0) + (APPROX_STATUSBAR_HEIGHT || 0);
+    }
+
     const returnProps = {
       rendered,
       overlayProps: {
-        style: { ...position.position
-        }
+        style
       },
       placement: position.placement,
       arrowProps: {
         style: {
           left: position.arrowOffsetLeft,
-          top: position.arrowOffsetTop
+          top: ((position === null || position === void 0 ? void 0 : position.arrowOffsetTop) || 0) + (APPROX_STATUSBAR_HEIGHT || 0)
         }
       },
       updatePosition
@@ -350,16 +372,27 @@
     };
 
     const updateOverlayItem = (id, node) => {
-      setItems(prev => prev.map(item => {
-        if (item.id === id) {
-          return {
-            id,
+      setItems(prev => {
+        const overlayItem = prev.find(item => item.id == id);
+
+        if (!overlayItem) {
+          return prev.concat([{
+            id: id,
             node
-          };
-        }
+          }]);
+        } else {
+          return prev.map(item => {
+            if (item.id === id) {
+              return {
+                id,
+                node
+              };
+            }
 
-        return item;
-      }));
+            return item;
+          });
+        }
+      });
     };
 
     const removeOverlayItem = id => {
@@ -2063,6 +2096,20 @@
   var STRING = matchString;
   var COLOR = matchColor;
   var LINE = regExpToken(/^(none|underline|line-through)$/i);
+
+  var aspectRatio = function aspectRatio(tokenStream) {
+    var aspectRatio = tokenStream.expect(NUMBER);
+
+    if (tokenStream.hasTokens()) {
+      tokenStream.expect(SLASH);
+      aspectRatio /= tokenStream.expect(NUMBER);
+    }
+
+    return {
+      aspectRatio: aspectRatio
+    };
+  };
+
   var BORDER_STYLE = regExpToken(/^(solid|dashed|dotted)$/);
   var defaultBorderWidth = 1;
   var defaultBorderColor = 'black';
@@ -2640,6 +2687,7 @@
   };
 
   var transforms = {
+    aspectRatio: aspectRatio,
     background: background,
     border: border,
     borderColor: borderColor,
@@ -2873,23 +2921,10 @@
     }
 
     _createClass(UnitValue, [{
-      key: "toPercentage",
-      value: function toPercentage() {
-        if (!['number', 'percent'].includes(this.unit)) {
-          throw new Error("Unexpected unit \"".concat(this.unit, "\"."));
-        }
-
-        if (this.unit === 'percent') {
-          return this.value / 100;
-        }
-
-        return this.value;
-      }
-    }, {
       key: "toNumber",
       value: function toNumber() {
-        if (!['number', 'px', 'rem'].includes(this.unit)) {
-          throw new Error("Unexpected unit \"".concat(this.unit, "\"."));
+        if (this.unit === 'percent') {
+          return this.value / 100;
         }
 
         if (this.unit === 'rem') {
@@ -2901,7 +2936,15 @@
     }, {
       key: "toString",
       value: function toString() {
-        return "".concat(this.value).concat(this.unit === 'number' ? '' : this.unit);
+        if (this.unit === 'number') {
+          return this.value;
+        }
+
+        if (this.unit === 'percent') {
+          return "".concat(this.value, "%");
+        }
+
+        return "".concat(this.value).concat(this.unit);
       }
     }], [{
       key: "parse",
@@ -2928,12 +2971,28 @@
   }();
 
   var POWER = Math.pow(10, 8);
+  var UNIT_ORDER = ['percent', 'number', 'px', 'rem'];
 
   var fixRounding = function fixRounding(value) {
     return Math.round(value * POWER) / POWER;
   };
 
-  var calculateValue = function calculateValue(value1, operator, value2) {
+  var normalizeValue$1 = function normalizeValue(number1, number2) {
+    if (number1.unit === 'px' && number2.unit === 'rem') {
+      return number1.value / (reactNative.PixelRatio.getFontScale() * 16);
+    }
+
+    if (number1.unit === 'percent' && number2.unit !== 'percent') {
+      return number1.value / 100;
+    }
+
+    return number1.value;
+  };
+
+  var calculateValue = function calculateValue(number1, operator, number2) {
+    var value1 = normalizeValue$1(number1, number2);
+    var value2 = normalizeValue$1(number2, number1);
+
     switch (operator) {
       case '+':
         return value1 + value2;
@@ -2955,24 +3014,18 @@
     }
   };
 
-  var pxToRem = function pxToRem(value) {
-    return value / (reactNative.PixelRatio.getFontScale() * 16);
+  var determineUnit = function determineUnit(number1, number2) {
+    var index1 = UNIT_ORDER.indexOf(number1.unit);
+    var index2 = UNIT_ORDER.indexOf(number2.unit);
+    return index1 > index2 ? number1.unit : number2.unit;
   };
 
   function calculate(value1, operator, value2) {
     var number1 = UnitValue.parse(value1);
     var number2 = UnitValue.parse(value2);
-
-    if (number1.unit === 'px' && number2.unit === 'rem') {
-      return "".concat(calculateValue(pxToRem(number1.value), operator, number2.value), "rem");
-    }
-
-    if (number1.unit === 'rem' && number2.unit === 'px') {
-      return "".concat(calculateValue(number1.value, operator, pxToRem(number2.value)), "rem");
-    }
-
-    var unit = number1.unit === 'number' ? number2.unit : number1.unit;
-    return "".concat(calculateValue(number1.value, operator, number2.value)).concat(unit === 'number' ? '' : unit);
+    var value = calculateValue(number1, operator, number2);
+    var unit = determineUnit(number1, number2);
+    return new UnitValue(value, unit).toString();
   }
   function normalizeNumber(value) {
     return UnitValue.parse(value).toNumber();
@@ -3278,7 +3331,7 @@
     var weight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0.5;
     var rgb1 = RgbaValue.parse(color1).toRgb();
     var rgb2 = RgbaValue.parse(color2).toRgb();
-    var percentage = UnitValue.parse(weight).toPercentage();
+    var percentage = UnitValue.parse(weight).toNumber();
 
     var _rgb1$map = rgb1.map(function (value, key) {
       return Math.round(rgb2[key] + (value - rgb2[key]) * percentage);
@@ -4737,7 +4790,7 @@
         color = _ref10[0],
         weight = _ref10[1];
 
-    var percentage = UnitValue.parse(weight).toPercentage();
+    var percentage = UnitValue.parse(weight).toNumber();
     var handle = percentage > 0 ? shadeColor(color, percentage) : tintColor(color, -percentage);
     return handle(t);
   });
@@ -6897,7 +6950,7 @@
   }
 
   var _excluded$1p = ["toggle", "dismiss"],
-      _excluded2$2 = ["ref"];
+      _excluded2$3 = ["ref"];
 
   var getActionHook = function getActionHook(toggle, dismiss) {
     if (toggle) {
@@ -6928,7 +6981,7 @@
 
     var _useActionHook = useActionHook(restProps),
         actionRef = _useActionHook.ref,
-        actionProps = _objectWithoutProperties(_useActionHook, _excluded2$2);
+        actionProps = _objectWithoutProperties(_useActionHook, _excluded2$3);
 
     return [actionProps, concatRefs(actionRef, ref)];
   }
@@ -8514,21 +8567,32 @@
       overlayRef: overlayRef,
       offset: offset,
       isOpen: visible
-    }); // Remove undefined arrow styles and adjust arrow offset.
+    }); // Remove unnecessary arrow styles and adjust arrow offset.
+
+    if (placement === 'top' || placement === 'bottom') {
+      delete overlay.arrowProps.style.top;
 
-    if (overlay.arrowProps.style.left === undefined) {
+      if (typeof overlay.arrowProps.style.left === 'number') {
+        overlay.arrowProps.style.left -= arrowOffset;
+      }
+    }
+
+    if (placement === 'left' || placement === 'right') {
       delete overlay.arrowProps.style.left;
 
-      if (overlay.arrowProps.style.top) {
+      if (typeof overlay.arrowProps.style.top === 'number') {
         overlay.arrowProps.style.top -= arrowOffset;
       }
-    }
+    } // Adjust top value by status bar height on Android
 
-    if (overlay.arrowProps.style.top === undefined) {
-      delete overlay.arrowProps.style.top;
 
-      if (overlay.arrowProps.style.left) {
-        overlay.arrowProps.style.left -= arrowOffset;
+    if (reactNative.Platform.OS === 'android' && reactNative.StatusBar.currentHeight) {
+      if (typeof overlay.overlayProps.style.top === 'number') {
+        overlay.overlayProps.style.top -= reactNative.StatusBar.currentHeight;
+      }
+
+      if (typeof overlay.arrowProps.style.top === 'number') {
+        overlay.arrowProps.style.top -= reactNative.StatusBar.currentHeight;
       }
     }
 
@@ -9764,7 +9828,7 @@
   Popover.Body = PopoverBody;
 
   var _excluded$M = ["title", "content", "autoClose", "trigger", "placement"],
-      _excluded2$1 = ["popover"];
+      _excluded2$2 = ["popover"];
   var propTypes$O = {
     popover: PropTypes.shape(_objectSpread2({
       title: PropTypes.node,
@@ -9785,7 +9849,7 @@
           _props$popover$placem = _props$popover.placement,
           placement = _props$popover$placem === void 0 ? 'right' : _props$popover$placem,
           tooltipProps = _objectWithoutProperties(_props$popover, _excluded$M),
-          elementProps = _objectWithoutProperties(props, _excluded2$1);
+          elementProps = _objectWithoutProperties(props, _excluded2$2);
       /* eslint-enable */
 
 
@@ -9961,7 +10025,7 @@
   Tooltip.Inner = TooltipInner;
 
   var _excluded$I = ["title", "autoClose", "trigger", "placement"],
-      _excluded2 = ["tooltip"];
+      _excluded2$1 = ["tooltip"];
   var propTypes$K = {
     tooltip: PropTypes.shape(_objectSpread2({
       title: PropTypes.node.isRequired,
@@ -9980,7 +10044,7 @@
           _props$tooltip$placem = _props$tooltip.placement,
           placement = _props$tooltip$placem === void 0 ? 'top' : _props$tooltip$placem,
           tooltipProps = _objectWithoutProperties(_props$tooltip, _excluded$I),
-          elementProps = _objectWithoutProperties(props, _excluded2);
+          elementProps = _objectWithoutProperties(props, _excluded2$1);
       /* eslint-enable */
 
 
@@ -10273,11 +10337,14 @@
   ListGroup.Item = ListGroupItem;
   ListGroup.ItemAction = ListGroupItemAction;
 
-  var _excluded$C = ["children", "style"];
+  var _excluded$C = ["children", "onHoverIn", "onHoverOut", "onMouseEnter", "onMouseLeave", "style"],
+      _excluded2 = ["onHoverIn", "onHoverOut"];
 
   var _templateObject$w;
   var propTypes$E = {
     children: PropTypes.node.isRequired,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
     // eslint-disable-next-line react/forbid-prop-types
     style: PropTypes.any
   };
@@ -10295,7 +10362,13 @@
         actionProps = _useAction2[0],
         actionRef = _useAction2[1];
 
-    var children = actionProps.children,
+    var children = actionProps.children;
+        actionProps.onHoverIn;
+        actionProps.onHoverOut;
+        var _actionProps$onMouseE = actionProps.onMouseEnter,
+        handleMouseEnter = _actionProps$onMouseE === void 0 ? function () {} : _actionProps$onMouseE,
+        _actionProps$onMouseL = actionProps.onMouseLeave,
+        handleMouseLeave = _actionProps$onMouseL === void 0 ? function () {} : _actionProps$onMouseL,
         style = actionProps.style,
         elementProps = _objectWithoutProperties(actionProps, _excluded$C);
 
@@ -10305,9 +10378,20 @@
 
     var _useInteractionState = useInteractionState(elementProps),
         interaction = _useInteractionState.interaction,
-        interactionProps = _useInteractionState.interactionProps;
+        _useInteractionState$ = _useInteractionState.interactionProps,
+        handleMouseEnterInteraction = _useInteractionState$.onHoverIn,
+        handleMouseLeaveInteraction = _useInteractionState$.onHoverOut,
+        interactionProps = _objectWithoutProperties(_useInteractionState$, _excluded2);
 
     return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, interactionProps, {
+      onMouseEnter: function onMouseEnter(event) {
+        handleMouseEnter(event);
+        handleMouseEnterInteraction(event);
+      },
+      onMouseLeave: function onMouseLeave(event) {
+        handleMouseLeave(event);
+        handleMouseLeaveInteraction(event);
+      },
       ref: actionRef,
       accessibilityRole: getRole$2(actionProps),
       accessible: true,
@@ -11251,6 +11335,14 @@
       transparent: true,
       visible: navbar ? navbar.expanded : visible,
       onRequestClose: handleToggle
+    }, placement !== 'bottom' && /*#__PURE__*/React__default["default"].createElement(reactNative.SafeAreaView, {
+      style: {
+        flexGrow: 0
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(reactNative.SafeAreaView, {
+      style: {
+        flexGrow: 1
+      }
     }, backdrop && /*#__PURE__*/React__default["default"].createElement(View, {
       style: backdropClasses
     }, /*#__PURE__*/React__default["default"].createElement(BackdropHandler, {
@@ -11261,11 +11353,7 @@
       ref: concatRefs(offcanvasRef, ref),
       style: [classes, style],
       textStyle: [textClasses, textStyle]
-    }), /*#__PURE__*/React__default["default"].createElement(reactNative.SafeAreaView, {
-      style: {
-        flexShrink: 1
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(View, {
+    }), /*#__PURE__*/React__default["default"].createElement(View, {
       style: [dialogClasses, dialogStyle],
       textStyle: dialogTextStyle
     }, /*#__PURE__*/React__default["default"].createElement(OffcanvasContext.Provider, {