@dtdot/lego 0.16.0 → 0.16.4

package/build/components/InlineCard/InlineCard.component.js

@@ -1,6 +1,7 @@
 import { motion, useMotionValue, useTransform } from 'framer-motion';
-import React from 'react';
+import React, { useState } from 'react';
 import styled, { useTheme } from 'styled-components';
+import useMeasure from 'react-use-measure';
 import { responsive } from '../..';
 import getThemeStatusColour from '../../theme/helpers/getThemeStatusColour';
 import InlineCardContent from './_InlineCardContent.component';
@@ -77,18 +78,21 @@ const CardActionBackground = styled(motion.div) `
 const InlineCard = ({ children, size, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }) => {
     const theme = useTheme();
     const x = useMotionValue(0);
-    const xInput = [-70, 0];
+    const [ref, bounds] = useMeasure();
+    const xInput = [-50, 0];
     const gestureLeftTheme = getThemeStatusColour(gestureLeftVariant || 'info', theme);
+    const [gestureLeftActivated, setGestureLeftActivated] = useState(false);
     const opacity = useTransform(x, xInput, ['1', '0']);
     const handleDragEnd = (e, panInfo) => {
         // approx xInputMin * 3
         if (panInfo.offset.x < -180 && onGestureLeft) {
+            setGestureLeftActivated(true);
             onGestureLeft();
         }
     };
     return (React.createElement(CardWrapper, { size: size },
         React.createElement(CardActionBackground, { style: { opacity, backgroundColor: gestureLeftTheme.main } }, gestureLeftIcon && (React.createElement(FontAwesomeIcon, { style: { fontSize: '20px', color: gestureLeftTheme.contrast }, icon: gestureLeftIcon }))),
-        React.createElement(CardOuter, { drag: onGestureLeft ? 'x' : undefined, onDragEnd: handleDragEnd, style: { x }, dragConstraints: { left: 0, right: 0 }, usePointer: !!onClick, onClick: onClick }, children)));
+        React.createElement(CardOuter, { drag: onGestureLeft ? 'x' : undefined, onDragEnd: handleDragEnd, ref: ref, style: { x }, animate: { x: gestureLeftActivated ? -bounds.width : undefined, opacity: gestureLeftActivated ? 0 : undefined }, dragConstraints: { left: 0, right: 0 }, usePointer: !!onClick, onClick: onClick }, children)));
 };
 InlineCard.Media = InlineCardMedia;
 InlineCard.Content = InlineCardContent;

package/build/components/Modal/Modal.component.js

@@ -51,7 +51,7 @@ const ModalWrapper = styled.div `
   `)}
 `;
 const ModalOuter = styled(motion.div) `
-  background-color: ${(props) => props.theme.colours.cardBackground};
+  background-color: ${(props) => props.theme.colours.background};
   border-radius: 4px;
   margin: 16px 0 128px 0;
 

package/build/components/Notifications/Notifications.component.js

@@ -1,10 +1,10 @@
 // eslint-disable-next-line @typescript-eslint/no-use-before-define
 import React from 'react';
 import styled from 'styled-components';
-import { animated, useTransition } from 'react-spring';
 import { Notification, Spacer } from '../..';
 import responsive from '../../responsive/responsive';
 import zIndexConstants from '../../constants/zIndex.constants';
+import { AnimatePresence, motion } from 'framer-motion';
 const NotificationContainer = styled.div `
   position: fixed;
   bottom: 20px;
@@ -20,18 +20,9 @@ const NotificationContainer = styled.div `
   `)}
 `;
 const Notifications = ({ notifications }) => {
-    const transitions = useTransition(notifications, (item) => item.id, {
-        from: { transform: 'translateX(-300px)', opacity: 0 },
-        enter: { transform: 'translateX(0px)', opacity: 1 },
-        leave: { transform: 'translateX(300px)', opacity: 0 },
-        config: {
-            tension: 280,
-            mass: 0.2,
-            friction: 10,
-        },
-    });
-    return (React.createElement(NotificationContainer, null, transitions.map(({ item, props, key }) => (React.createElement(animated.div, { key: key, style: props },
-        React.createElement(Spacer, { size: '1x' }),
-        React.createElement(Notification, { variant: item.variant, message: item.message, action: item.action, onAction: item.onAction, count: item.count }))))));
+    return (React.createElement(NotificationContainer, null,
+        React.createElement(AnimatePresence, null, notifications.map((notification) => (React.createElement(motion.div, { transition: { type: 'spring', duration: 0.4, bounce: 0 }, initial: { x: -300, opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: 300, opacity: 0 }, key: notification.id },
+            React.createElement(Spacer, { size: '1x' }),
+            React.createElement(Notification, { variant: notification.variant, message: notification.message, action: notification.action, onAction: notification.onAction, count: notification.count })))))));
 };
 export default Notifications;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.16.0",
+  "version": "0.16.4",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -59,7 +59,7 @@
     "framer-motion": "^4.1.17",
     "identicon.js": "^2.3.3",
     "qrcode": "^1.4.4",
-    "react-spring": "^8.0.27",
+    "react-use-measure": "^2.1.1",
     "spark-md5": "^3.0.1"
   }
 }