@dtdot/lego 2.0.0-40 → 2.0.0-42

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { ColourVariant } from '../../theme/theme.types';
 interface FloatingActionButtonProps {
@@ -6,5 +6,8 @@ interface FloatingActionButtonProps {
     onClick: () => void;
     variant?: ColourVariant;
 }
-declare const FloatingActionButton: React.FC<FloatingActionButtonProps>;
+declare const FloatingActionButton: {
+    ({ icon, onClick, variant }: FloatingActionButtonProps): JSX.Element | null;
+    Provider: ({ children }: import("./_FloatingActionButton.provider").FloatingActionButtonProviderProps) => JSX.Element;
+};
 export default FloatingActionButton;

package/build/components/FloatingActionButton/FloatingActionButton.component.js

@@ -1,43 +1,21 @@
-import React, { useContext } from 'react';
-import styled from 'styled-components';
-import { motion } from 'framer-motion';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import getThemeVariantColours from '../../theme/helpers/getThemeVariantColours';
-import MinimalMenuContext from '../MinimalMenu/MinimalMenu.context';
-import zIndexConstants from '../../constants/zIndex.constants';
-const FloatingButton = styled(motion.button) `
-  position: fixed;
-  bottom: ${(props) => (props.offsetBottom ? '76px' : '20px')};
-  right: 20px;
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).main};
-  color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
-  border: none;
-  outline: none;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 24px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-  z-index: ${zIndexConstants.floatingActionButton};
-
-  &:hover {
-    background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).darker};
-  }
-`;
+import React, { useContext, useEffect, useMemo } from 'react';
+import FloatingActionButtonContext from './_FloatingActionButton.context';
+import FloatingActionButtonProvider from './_FloatingActionButton.provider';
+import { v4 } from 'uuid';
+import FloatingActionButtonInternal from './_FloatingActionButton.internal';
 const FloatingActionButton = ({ icon, onClick, variant = 'primary' }) => {
-    const { menuExists, isMobile } = useContext(MinimalMenuContext);
-    const variants = {
-        hidden: { opacity: 0, scale: 0 },
-        visible: { opacity: 1, scale: 1, transition: { duration: 0.3, delay: 0.2 } },
-        exit: { opacity: 0, scale: 0 },
-        hover: { scale: 1.05 },
-        tap: { scale: 0.95 },
-    };
-    return (React.createElement(FloatingButton, { initial: 'hidden', animate: 'visible', exit: 'exit', whileHover: 'hover', whileTap: 'tap', offsetBottom: menuExists && isMobile, variants: variants, onClick: onClick, variant: variant },
-        React.createElement(FontAwesomeIcon, { icon: icon })));
+    const { contextExists, setButton } = useContext(FloatingActionButtonContext);
+    const id = useMemo(() => v4(), []);
+    useEffect(() => {
+        setButton({ id, icon, onClick, variant });
+        return () => {
+            setButton(undefined);
+        };
+    }, [icon, onClick, variant, setButton]);
+    if (!contextExists) {
+        return React.createElement(FloatingActionButtonInternal, { icon: icon, onClick: onClick, variant: variant });
+    }
+    return null;
 };
+FloatingActionButton.Provider = FloatingActionButtonProvider;
 export default FloatingActionButton;

package/build/components/FloatingActionButton/_FloatingActionButton.context.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { ColourVariant } from '../../theme/theme.types';
+export interface FabProps {
+    id: string;
+    icon: IconDefinition | null;
+    onClick: () => void;
+    variant?: ColourVariant;
+}
+interface FloatingActionButtonContextProps {
+    contextExists: boolean;
+    setButton: (props: FabProps | undefined) => void;
+}
+declare const FloatingActionButtonContext: import("react").Context<FloatingActionButtonContextProps>;
+export default FloatingActionButtonContext;

package/build/components/FloatingActionButton/_FloatingActionButton.context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const FloatingActionButtonContext = createContext({
+    contextExists: false,
+    setButton: () => { },
+});
+export default FloatingActionButtonContext;

package/build/components/FloatingActionButton/_FloatingActionButton.internal.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { ColourVariant } from '../../theme/theme.types';
+interface FloatingActionButtonInternalProps {
+    icon: IconDefinition;
+    onClick: () => void;
+    variant?: ColourVariant;
+}
+declare const FloatingActionButtonInternal: ({ icon, onClick, variant }: FloatingActionButtonInternalProps) => JSX.Element;
+export default FloatingActionButtonInternal;

package/build/components/FloatingActionButton/_FloatingActionButton.internal.js

@@ -0,0 +1,45 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import getThemeVariantColours from '../../theme/helpers/getThemeVariantColours';
+import MinimalMenuContext from '../MinimalMenu/MinimalMenu.context';
+import zIndexConstants from '../../constants/zIndex.constants';
+import FloatingActionButtonContext from './_FloatingActionButton.context';
+const FloatingButton = styled(motion.button) `
+  position: fixed;
+  bottom: ${(props) => (props.offsetBottom ? '76px' : '20px')};
+  right: 20px;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).main};
+  color: ${(props) => getThemeVariantColours(props.variant, props.theme).contrastText};
+  border: none;
+  outline: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  z-index: ${zIndexConstants.floatingActionButton};
+
+  &:hover {
+    background-color: ${(props) => getThemeVariantColours(props.variant, props.theme).darker};
+  }
+`;
+const FloatingActionButtonInternal = ({ icon, onClick, variant = 'primary' }) => {
+    const { menuExists, isMobile } = useContext(MinimalMenuContext);
+    const { contextExists } = useContext(FloatingActionButtonContext);
+    const variants = {
+        hidden: { opacity: 0, scale: 0 },
+        visible: { opacity: 1, scale: 1, transition: { duration: 0.3, delay: 0.2 } },
+        exit: { opacity: 0, scale: 0, transition: { duration: 0.3 } },
+        hover: { scale: 1.1 },
+        tap: { scale: 0.95 },
+    };
+    return (React.createElement(FloatingButton, { key: 'floating-button', initial: contextExists ? 'hidden' : 'visible', animate: 'visible', exit: 'exit', whileHover: 'hover', whileTap: 'tap', offsetBottom: menuExists && isMobile, variants: variants, onClick: onClick, variant: variant },
+        React.createElement(FontAwesomeIcon, { icon: icon })));
+};
+export default FloatingActionButtonInternal;

package/build/components/FloatingActionButton/_FloatingActionButton.provider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface FloatingActionButtonProviderProps {
+    children: React.ReactNode;
+}
+declare const FloatingActionButtonProvider: ({ children }: FloatingActionButtonProviderProps) => JSX.Element;
+export default FloatingActionButtonProvider;

package/build/components/FloatingActionButton/_FloatingActionButton.provider.js

@@ -0,0 +1,15 @@
+import React, { useMemo, useState } from 'react';
+import { AnimatePresence } from 'framer-motion';
+import FloatingActionButtonContext from './_FloatingActionButton.context';
+import FloatingActionButtonInternal from './_FloatingActionButton.internal';
+const FloatingActionButtonProvider = ({ children }) => {
+    const [fab, setFab] = useState();
+    const contextVal = useMemo(() => ({
+        contextExists: true,
+        setButton: setFab,
+    }), [setFab]);
+    return (React.createElement(FloatingActionButtonContext.Provider, { value: contextVal },
+        children,
+        React.createElement(AnimatePresence, null, fab?.icon && (React.createElement(FloatingActionButtonInternal, { key: fab.id, icon: fab.icon, onClick: fab.onClick, variant: fab.variant })))));
+};
+export default FloatingActionButtonProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "2.0.0-40",
+  "version": "2.0.0-42",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {