react-uicomp - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/index.js

@@ -616,2 +616,78 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
+function _templateObject2$1() {
+  var data = _taggedTemplateLiteralLoose(["\n  min-width: 400px;\n  max-width: 90vw;\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 20px;\n  background: #ffffff;\n  border-radius: 4px;\n  box-shadow: 0px 6px 46px rgba(0, 0, 0, 0.08);\n  font-family: Arial;\n"]);
+
+  _templateObject2$1 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$1() {
+  var data = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(0, 0, 0, 0.4);\n"]);
+
+  _templateObject$1 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var ContainerStyled = styled.div(_templateObject$1());
+var ModalContentStyled = styled.div(_templateObject2$1());
+var Container = reactSpring.animated(ContainerStyled);
+var ModalContent = reactSpring.animated(ModalContentStyled);
+var Modal = function Modal(_ref) {
+  var children = _ref.children,
+      visible = _ref.visible,
+      onClose = _ref.onClose,
+      _ref$dismissOnOutside = _ref.dismissOnOutsideClick,
+      dismissOnOutsideClick = _ref$dismissOnOutside === void 0 ? true : _ref$dismissOnOutside,
+      style = _ref.style;
+  var modalRef = React.useRef(null);
+  var transitions = reactSpring.useTransition(visible, null, {
+    from: {
+      opacity: 0
+    },
+    enter: {
+      opacity: 1
+    },
+    leave: {
+      opacity: 0
+    },
+    config: {
+      mass: 1,
+      tension: 250,
+      friction: 18
+    }
+  });
+
+  if (dismissOnOutsideClick) {
+    useOutsideClick(modalRef, onClose);
+  }
+
+  return React__default.createElement("div", null, transitions.map(function (_ref2) {
+    var item = _ref2.item,
+        key = _ref2.key,
+        props = _ref2.props;
+    return item && React__default.createElement(Container, {
+      key: key,
+      style: props
+    }, React__default.createElement(ModalContent, {
+      ref: modalRef,
+      style: _extends({}, style, {
+        transform: reactSpring.interpolate([props.opacity.interpolate({
+          range: [0, 1],
+          output: [0.9, 1]
+        }), props.opacity.interpolate({
+          range: [0, 1],
+          output: [-50, 0]
+        })], function (scale, translateY) {
+          return "scale(" + scale + ") translateY(" + translateY + "px)";
+        })
+      })
+    }, children));
+  }));
+};
+
 exports.ActiveLink = ActiveLink;
@@ -623,2 +699,3 @@ exports.Auth = Auth;
 exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.Modal = Modal;
 exports.Navigation = Navigation;
@@ -625,0 +702,0 @@ exports.Theme = Theme;

dist/index.modern.js

@@ -1,4 +0,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useMemo, useRef } from 'react';
 import { Route, Redirect, HashRouter, BrowserRouter, Switch, NavLink, useHistory, useLocation, useParams } from 'react-router-dom';
-import { useTransition, animated } from 'react-spring';
+import { useTransition, animated, interpolate } from 'react-spring';
 import styled from 'styled-components';
@@ -613,3 +613,79 @@
 
-export { ActiveLink, Auth, Dropdown, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, Navigation, Theme, DefaultThemeConfig as ThemeConfig, useAuth, useNavigation, useOutsideClick, useTheme };
+function _templateObject2$1() {
+  var data = _taggedTemplateLiteralLoose(["\n  min-width: 400px;\n  max-width: 90vw;\n  max-height: 80vh;\n  overflow-y: auto;\n  padding: 20px;\n  background: #ffffff;\n  border-radius: 4px;\n  box-shadow: 0px 6px 46px rgba(0, 0, 0, 0.08);\n  font-family: Arial;\n"]);
+
+  _templateObject2$1 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$1() {
+  var data = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(0, 0, 0, 0.4);\n"]);
+
+  _templateObject$1 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var ContainerStyled = styled.div(_templateObject$1());
+var ModalContentStyled = styled.div(_templateObject2$1());
+var Container = animated(ContainerStyled);
+var ModalContent = animated(ModalContentStyled);
+var Modal = function Modal(_ref) {
+  var children = _ref.children,
+      visible = _ref.visible,
+      onClose = _ref.onClose,
+      _ref$dismissOnOutside = _ref.dismissOnOutsideClick,
+      dismissOnOutsideClick = _ref$dismissOnOutside === void 0 ? true : _ref$dismissOnOutside,
+      style = _ref.style;
+  var modalRef = useRef(null);
+  var transitions = useTransition(visible, null, {
+    from: {
+      opacity: 0
+    },
+    enter: {
+      opacity: 1
+    },
+    leave: {
+      opacity: 0
+    },
+    config: {
+      mass: 1,
+      tension: 250,
+      friction: 18
+    }
+  });
+
+  if (dismissOnOutsideClick) {
+    useOutsideClick(modalRef, onClose);
+  }
+
+  return React.createElement("div", null, transitions.map(function (_ref2) {
+    var item = _ref2.item,
+        key = _ref2.key,
+        props = _ref2.props;
+    return item && React.createElement(Container, {
+      key: key,
+      style: props
+    }, React.createElement(ModalContent, {
+      ref: modalRef,
+      style: _extends({}, style, {
+        transform: interpolate([props.opacity.interpolate({
+          range: [0, 1],
+          output: [0.9, 1]
+        }), props.opacity.interpolate({
+          range: [0, 1],
+          output: [-50, 0]
+        })], function (scale, translateY) {
+          return "scale(" + scale + ") translateY(" + translateY + "px)";
+        })
+      })
+    }, children));
+  }));
+};
+
+export { ActiveLink, Auth, Dropdown, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, Modal, Navigation, Theme, DefaultThemeConfig as ThemeConfig, useAuth, useNavigation, useOutsideClick, useTheme };
 //# sourceMappingURL=index.modern.js.map

dist/ui/index.d.ts

 export * from "./Dropdown";
 export * from "./DropdownMenu";
+export * from "./Modal";

package.json

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

README.md

@@ -304,6 +304,37 @@ # react-uicomp
 
+#### Modal
 
+UI component for Modal which provides easy use for creating extremely fluid animated modal.
 
+**props**
+
+| Props                            | Type          | Description                                                  | Default |
+| -------------------------------- | ------------- | ------------------------------------------------------------ | ------- |
+| children                         | element nodes | Can contain any element which is placed inside modal component | -       |
+| visible                          | boolean       | Determines whether the modal is visible or not.              | -       |
+| onClose                          | function      | Function that is called when clicked outside or to close modal | -       |
+| dissmissOnOutsideClick(optional) | boolean       | Calls onClose function if clicked outside modal.             | true    |
+| style(optional)                  | style         | Allows you to change default styling to modal itself.        | -       |
+
+**Example**
+
+```tsx
+import { Modal } from "react-uicomp";
+
+export default function() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+      <Modal
+        visible={visible}
+        onClose={() => setVisible(false)}
+      >
+        Modal Content Goes Here...
+      </Modal>
+  );
+}
+```
+
 ## License
 
 MIT © [dipeshrai123](https://github.com/dipeshrai123)

No alert changes

Improved metrics

Total package byte prevSize

144692

increased by11.93%

Number of package files

22

increased by4.76%

Lines of code

1461

increased by11.27%

Number of lines in readme file

340

increased by10.03%

No dependency changes