@dtdot/lego 0.15.1 → 0.16.3

package/build/components/InlineCard/InlineCard.component.d.ts

@@ -1,11 +1,17 @@
 import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { Status } from '../../theme/theme.types';
 export declare type InlineCardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
+export declare type DragVariant = Status;
 export interface InlineCardProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     size?: InlineCardSize;
+    gestureLeftIcon?: IconProp;
+    gestureLeftVariant?: DragVariant;
+    onGestureLeft?: () => void;
 }
 declare const InlineCard: {
-    ({ children, size, onClick }: InlineCardProps): JSX.Element;
+    ({ children, size, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }: InlineCardProps): JSX.Element;
     Media: ({ children }: import("./_InlineCardMedia.component").InlineCardMediaProps) => JSX.Element;
     Content: ({ children, center }: import("./_InlineCardContent.component").InlineCardContentProps) => JSX.Element;
     Meta: ({ children }: import("./_InlineCardMeta.component").InlineCardMetaProps) => JSX.Element;

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

@@ -1,18 +1,16 @@
-import React from 'react';
-import styled from 'styled-components';
+import { motion, useMotionValue, useTransform } from 'framer-motion';
+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';
 import InlineCardMedia from './_InlineCardMedia.component';
 import InlineCardMeta from './_InlineCardMeta.component';
-const CardOuter = styled.div `
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+const CardWrapper = styled.div `
+  position: relative;
   height: 64px;
-  width: 100%;
-  display: flex;
-
-  cursor: ${(props) => (props.usePointer ? 'pointer' : '')};
-
-  background-color: ${(props) => props.theme.colours.cardBackground};
-  box-shadow: ${(props) => props.theme.shadows.small};
 
   ${(props) => {
     switch (props.size) {
@@ -52,8 +50,49 @@ const CardOuter = styled.div `
     }
 }}
 `;
-const InlineCard = ({ children, size, onClick }) => {
-    return (React.createElement(CardOuter, { size: size, usePointer: !!onClick, onClick: onClick }, children));
+const CardOuter = styled(motion.div) `
+  height: 64px;
+  width: 100%;
+  display: flex;
+
+  cursor: ${(props) => (props.usePointer ? 'pointer' : '')};
+
+  background-color: ${(props) => props.theme.colours.cardBackground};
+  box-shadow: ${(props) => props.theme.shadows.small};
+`;
+const CardActionBackground = styled(motion.div) `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 8px;
+  padding-right: 16px;
+
+  top: 0;
+  left: 0;
+  pointer-events: none;
+`;
+const InlineCard = ({ children, size, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }) => {
+    const theme = useTheme();
+    const x = useMotionValue(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, 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/InlineCard/InlineCard.stories.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Meta } from '@storybook/react/types-6-0';
 export declare const Standard: () => JSX.Element;
+export declare const WithDrag: () => JSX.Element;
 declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
 export default _default;

package/build/components/InlineCard/InlineCard.stories.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { faCheckCircle, faExclamationTriangle, faInfoCircle, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { Badge, InlineCard, InlineCardGroup } from '../..';
 export const Standard = () => (React.createElement(InlineCardGroup, null,
     React.createElement(InlineCard, null,
@@ -13,6 +14,16 @@ export const Standard = () => (React.createElement(InlineCardGroup, null,
         React.createElement(InlineCard.Content, null, "Clickable card"),
         React.createElement(InlineCard.Meta, null,
             React.createElement(Badge, { variant: 'info' }, "Clickable")))));
+export const WithDrag = () => (React.createElement("div", { style: { maxWidth: '400px' } },
+    React.createElement(InlineCardGroup, null,
+        React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faCheckCircle, gestureLeftVariant: 'success' },
+            React.createElement(InlineCard.Content, null, "A success gesture")),
+        React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faInfoCircle, gestureLeftVariant: 'info' },
+            React.createElement(InlineCard.Content, null, "A info gesture")),
+        React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faExclamationTriangle, gestureLeftVariant: 'warn' },
+            React.createElement(InlineCard.Content, null, "A warning gesture")),
+        React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faTimes, gestureLeftVariant: 'danger' },
+            React.createElement(InlineCard.Content, null, "A danger gesture")))));
 export default {
     title: 'Components/InlineCard',
     component: InlineCard,

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.15.1",
+  "version": "0.16.3",
   "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"
   }
 }