react-uicomp - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/index.js

@@ -417,3 +417,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
         return {
-          left: 0
+          left: 0,
+          top: "100%"
         };
@@ -423,21 +424,72 @@
         return {
-          left: "50%"
+          left: "50%",
+          top: "100%"
         };
 
       case "bottomright":
-      default:
         return {
-          right: 0
+          right: 0,
+          top: "100%"
         };
+
+      case "topleft":
+        return {
+          left: 0,
+          bottom: "100%"
+        };
+
+      case "topmiddle":
+        return {
+          left: "50%",
+          bottom: "100%"
+        };
+
+      case "topright":
+        return {
+          right: 0,
+          bottom: "100%"
+        };
     }
   };
 
+  var getTransformOrigin = function getTransformOrigin(pm) {
+    switch (pm) {
+      case "bottomleft":
+        return {
+          transformOrigin: "0% 0%"
+        };
+
+      case "bottommiddle":
+        return {
+          transformOrigin: "0% 0%"
+        };
+
+      case "bottomright":
+        return {
+          transformOrigin: "100% 0%"
+        };
+
+      case "topleft":
+        return {
+          transformOrigin: "0% 100%"
+        };
+
+      case "topmiddle":
+        return {
+          transformOrigin: "0% 100%"
+        };
+
+      case "topright":
+        return {
+          transformOrigin: "100% 100%"
+        };
+    }
+  };
+
   var dropdownElementStyles = {};
 
-  var dropdownMenuStyles = _extends({}, getDirectionStyles(placement), {
-    top: "100%",
-    transformOrigin: "50% 0%",
+  var dropdownMenuStyles = _extends({
     zIndex: 100,
     whiteSpace: "nowrap"
-  }, dropdownStyles);
+  }, getDirectionStyles(placement), getTransformOrigin(placement), dropdownStyles);
 
@@ -471,5 +523,7 @@ var onClick = toggleOnTriggerElementClick ? toggleDropdown : openDropdown;
           if (placement === "bottommiddle") {
-            return "scaleY(" + s + ") translateX(-50%)";
+            return "scale(" + s + ") translateX(-50%)";
+          } else if (placement === "topmiddle") {
+            return "scale(" + s + ") translateX(-50%)";
           } else {
-            return "scaleY(" + s + ") translateX(0)";
+            return "scale(" + s + ") translateX(0)";
           }
@@ -476,0 +530,0 @@ }) : "scaleY(1)"

dist/index.modern.js

@@ -414,3 +414,4 @@ import React, { useContext, useMemo } from 'react';
         return {
-          left: 0
+          left: 0,
+          top: "100%"
         };
@@ -420,21 +421,72 @@
         return {
-          left: "50%"
+          left: "50%",
+          top: "100%"
         };
 
       case "bottomright":
-      default:
         return {
-          right: 0
+          right: 0,
+          top: "100%"
         };
+
+      case "topleft":
+        return {
+          left: 0,
+          bottom: "100%"
+        };
+
+      case "topmiddle":
+        return {
+          left: "50%",
+          bottom: "100%"
+        };
+
+      case "topright":
+        return {
+          right: 0,
+          bottom: "100%"
+        };
     }
   };
 
+  var getTransformOrigin = function getTransformOrigin(pm) {
+    switch (pm) {
+      case "bottomleft":
+        return {
+          transformOrigin: "0% 0%"
+        };
+
+      case "bottommiddle":
+        return {
+          transformOrigin: "0% 0%"
+        };
+
+      case "bottomright":
+        return {
+          transformOrigin: "100% 0%"
+        };
+
+      case "topleft":
+        return {
+          transformOrigin: "0% 100%"
+        };
+
+      case "topmiddle":
+        return {
+          transformOrigin: "0% 100%"
+        };
+
+      case "topright":
+        return {
+          transformOrigin: "100% 100%"
+        };
+    }
+  };
+
   var dropdownElementStyles = {};
 
-  var dropdownMenuStyles = _extends({}, getDirectionStyles(placement), {
-    top: "100%",
-    transformOrigin: "50% 0%",
+  var dropdownMenuStyles = _extends({
     zIndex: 100,
     whiteSpace: "nowrap"
-  }, dropdownStyles);
+  }, getDirectionStyles(placement), getTransformOrigin(placement), dropdownStyles);
 
@@ -468,5 +520,7 @@ var onClick = toggleOnTriggerElementClick ? toggleDropdown : openDropdown;
           if (placement === "bottommiddle") {
-            return "scaleY(" + s + ") translateX(-50%)";
+            return "scale(" + s + ") translateX(-50%)";
+          } else if (placement === "topmiddle") {
+            return "scale(" + s + ") translateX(-50%)";
           } else {
-            return "scaleY(" + s + ") translateX(0)";
+            return "scale(" + s + ") translateX(0)";
           }
@@ -473,0 +527,0 @@ }) : "scaleY(1)"

dist/ui/Dropdown.d.ts

@@ -5,3 +5,3 @@ import React from "react";
 };
-declare type placementType = "bottomleft" | "bottomright" | "bottommiddle";
+declare type placementType = "bottomleft" | "bottomright" | "bottommiddle" | "topleft" | "topright" | "topmiddle";
 interface DropdownProps {
@@ -8,0 +8,0 @@ children: React.ReactNode;

package.json

 {
   "name": "react-uicomp",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React UI component for creating complex routes and beautiful UI",
@@ -5,0 +5,0 @@ "author": "dipeshrai123",

README.md

@@ -242,14 +242,14 @@ # react-uicomp
 
-| Props                                 | Type                                             | Description                                                  | Default       |
-| ------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------ | ------------- |
-| children                              | element node                                     | React Node which will be the dropdown content                | -             |
-| triggerElement                        | function                                         | Function which should return the element which will trigger the dropdown | -             |
-| active(optional)                      | boolean                                          | Sets default state of dropdown, either it is active or not by default | false         |
-| isAnimated(optional)                  | boolean                                          | Should animate or not while toggling between dropdown        | false         |
-| animationType(optional)               | "fade" \| "expand"                               | Type of animation for dropdown                               | "expand"      |
-| dropdownStyles(optional)              | style                                            | Style object to style the dropdown                           | -             |
-| placement(optional)                   | "bottomleft" \| "bottommiddle" \|  "bottomright" | Defines the direction of dropdown                            | "bottomright" |
-| dismissOnOutsideClick(optional)       | boolean                                          | Should dismiss dropdown if we click outside dropdown         | true          |
-| dismissOnInsideClick(optional)        | boolean                                          | Should dismiss dropdown if we click on content inside dropdown | false         |
-| toggleOnTriggerElementClick(optional) | boolean                                          | Should toggle the dropdown if we click trigger element       | false         |
+| Props                                 | Type                                                         | Description                                                  | Default       |
+| ------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------- |
+| children                              | element node                                                 | React Node which will be the dropdown content                | -             |
+| triggerElement                        | function                                                     | Function which should return the element which will trigger the dropdown | -             |
+| active(optional)                      | boolean                                                      | Sets default state of dropdown, either it is active or not by default | false         |
+| isAnimated(optional)                  | boolean                                                      | Should animate or not while toggling between dropdown        | false         |
+| animationType(optional)               | "fade" \| "expand"                                           | Type of animation for dropdown                               | "expand"      |
+| dropdownStyles(optional)              | style                                                        | Style object to style the dropdown                           | -             |
+| placement(optional)                   | "bottomleft" \| "bottommiddle" \|  "bottomright" \| "topleft" \| "topmiddle" \| "topright" | Defines the placement of dropdown                            | "bottomright" |
+| dismissOnOutsideClick(optional)       | boolean                                                      | Should dismiss dropdown if we click outside dropdown         | true          |
+| dismissOnInsideClick(optional)        | boolean                                                      | Should dismiss dropdown if we click on content inside dropdown | false         |
+| toggleOnTriggerElementClick(optional) | boolean                                                      | Should toggle the dropdown if we click trigger element       | false         |
 
@@ -256,0 +256,0 @@ #### DropdownMenu

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

126890

increased by5.26%

Lines of code

1292

increased by7.49%

No dependency changes