@ainias42/react-bootstrap-mobile 0.1.31 → 0.2.0

package/src/Components/FullScreen/FullScreen.tsx

@@ -77,5 +77,5 @@ export const FullScreen = withMemo(function FullScreen<AsTag extends keyof JSX.I
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return React.createElement(element, props, children);
-})
+});
 

package/src/Components/Hooks/useClientLayoutEffect.ts

@@ -0,0 +1,8 @@
+import React from "react";
+
+export function useClientLayoutEffect(...params: Parameters<typeof React.useLayoutEffect>) {
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/exhaustive-deps,react-hooks/rules-of-hooks
+        React.useLayoutEffect(...params);
+    }
+}

package/src/Components/Hooks/useDelayed.ts

@@ -4,7 +4,7 @@ export function useDelayed<Args extends any[]>(
     callback: (...args: Args) => void | Promise<void>,
     dependencies: any[],
     delay = 100,
-    maxDelay?: number
+    maxDelay: number|undefined = undefined
 ) {
     const argsRef = useRef<Args | undefined>(undefined);
     const timeoutRef = useRef<any>(undefined);

package/src/Components/Hooks/useMousePosition.ts

@@ -1,8 +1,9 @@
-import {useLayoutEffect, useRef} from "react";
+import {useRef} from "react";
+import { useClientLayoutEffect } from "./useClientLayoutEffect";
 
 export function useMousePosition() {
     const position = useRef({ x: 0, y: 0 });
-    useLayoutEffect(() => {
+    useClientLayoutEffect(() => {
         const setFromEvent = (e: MouseEvent) => {
             position.current = { x: e.clientX, y: e.clientY };
         };

package/src/Components/Layout/Grid/GridItem.tsx

@@ -151,7 +151,6 @@ function GridItem({
     // Other
 
     // Render Functions
-
     return (
         <InlineBlock
             style={style}

package/src/Components/Layout/Grow.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
-
 import styles from './layout.scss';
-import { withMemo } from '../../helper/withMemo';
 import classNames from 'classnames';
 import { withForwardRef } from "../../helper/withForwardRef";
-import { ComponentRef, ForwardedRef } from "react";
+import { ForwardedRef } from "react";
 
 export type GrowProps = RbmComponentProps<{
     center?: boolean;
@@ -48,4 +46,4 @@ export const Grow = withForwardRef(function Grow({ className, children, center =
             {children}
         </div>
     );
-}, styles)
+}, styles);

package/src/Components/Layout/View.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { ComponentRef, ForwardedRef, PropsWithChildren, ReactElement, ReactNode, RefAttributes } from 'react';
+import { ComponentRef, ForwardedRef, PropsWithChildren } from 'react';
 import { Override } from '../../TypeHelpers';
+import { withForwardRef } from "../../helper/withForwardRef";
 
 export type ViewProps<AsType extends keyof JSX.IntrinsicElements> = PropsWithChildren<
     Override<React.ComponentPropsWithoutRef<AsType>, { as?: AsType; children?: React.ReactNode }>
 >;
 
-function View<AsType extends keyof JSX.IntrinsicElements>(
-    { children, as, ...otherProps }: ViewProps<AsType>,
+export const View = withForwardRef(function View<AsType extends keyof JSX.IntrinsicElements>(
+    {children, as, ...otherProps}: ViewProps<AsType>,
     ref?: ForwardedRef<ComponentRef<AsType>>
 ) {
     // Variables
@@ -31,10 +32,4 @@ function View<AsType extends keyof JSX.IntrinsicElements>(
         ref,
     };
     return React.createElement(element, props, children);
-}
-
-// Need ViewMemo for autocompletion of phpstorm
-const ViewMemo: <AsType extends keyof JSX.IntrinsicElements>(
-    props: ViewProps<AsType> & RefAttributes<ComponentRef<AsType>>
-) => ReactNode | null = React.memo(React.forwardRef(View));
-export { ViewMemo as View };
+}, undefined, "all");

package/src/Components/Layout/ViewWithoutListeners.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { ComponentRef, DOMAttributes, ForwardedRef, ReactElement, ReactNode, RefAttributes } from 'react';
+import { ComponentRef, DOMAttributes, ForwardedRef } from 'react';
 import { View, ViewProps } from './View';
+import { withForwardRef } from "../../helper/withForwardRef";
 
 export type ViewWithoutListenersProps<AsType extends keyof JSX.IntrinsicElements> = Omit<
     ViewProps<AsType>,
@@ -11,7 +12,7 @@ export type ViewWithoutListenersProps<AsType extends keyof JSX.IntrinsicElements
         __html: string | TrustedHTML;
     } | undefined;   };
 
-function ViewWithoutListeners<AsType extends keyof JSX.IntrinsicElements>(
+export const ViewWithoutListeners = withForwardRef(function ViewWithoutListeners<AsType extends keyof JSX.IntrinsicElements>(
     { children, ...props }: ViewWithoutListenersProps<AsType>,
     ref?: ForwardedRef<ComponentRef<AsType>>
 ) {
@@ -35,10 +36,4 @@ function ViewWithoutListeners<AsType extends keyof JSX.IntrinsicElements>(
             {children}
         </View>
     );
-}
-
-// Need ViewWithoutListenersMemo for autocompletion of phpstorm
-const ViewWithoutListenersMemo: <AsType extends keyof JSX.IntrinsicElements>(
-    props: ViewWithoutListenersProps<AsType> & RefAttributes<ComponentRef<AsType>>
-) => ReactNode = React.memo(React.forwardRef(ViewWithoutListeners));
-export { ViewWithoutListenersMemo as ViewWithoutListeners };
+}, undefined, "all");

package/src/Components/Menu/Menu.tsx

@@ -5,12 +5,13 @@ import {IconSource} from '../Icon/Icon';
 import {Block} from '../Layout/Block';
 import classNames from 'classnames';
 import styles from './menu.scss';
-import {useEffect, useLayoutEffect, useRef, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import {withRenderBrowserOnly} from '../../helper/withRenderBrowserOnly';
 import {useWindow} from '../../WindowContext/WindowContext';
 import {MenuItem} from "./MenuItem";
 import {MenuCloseContextProvider} from "./MenuCloseContext";
 import {createPortal} from "react-dom";
+import { useClientLayoutEffect } from "../Hooks/useClientLayoutEffect";
 
 export type MenuItemType = {
     label: string;
@@ -78,26 +79,25 @@ export const Menu = withMemo(
                 window?.addEventListener('mousedown', listener, {capture: true});
                 window?.addEventListener('touchstart', listener, {capture: true});
                 return () => {
-                    window?.removeEventListener('mousedown', listener, {capture: true})
-                    window?.removeEventListener('touchstart', listener, {capture: true})
+                    window?.removeEventListener('mousedown', listener, {capture: true});
+                    window?.removeEventListener('touchstart', listener, {capture: true});
                 };
             }
             return undefined;
         }, [isOpen, onClose, window]);
 
-        useLayoutEffect(() => {
+        useClientLayoutEffect(() => {
             if (!isOpen) {
                 return;
             }
-            let elem = window?.document.body.querySelector("." + MENU_CONTAINER_CLASS);
+            let elem = window?.document.body.querySelector(`.${  MENU_CONTAINER_CLASS}`);
             if (!elem) {
                 elem = window?.document.body;
             }
-            elem?.appendChild(portalContainer)
+            elem?.appendChild(portalContainer);
         }, [isOpen, portalContainer, window?.document.body]);
 
-
-        useLayoutEffect(() => {
+        useClientLayoutEffect(() => {
             if (!menuRef.current) {
                 return;
             }
@@ -114,7 +114,7 @@ export const Menu = withMemo(
             setInnerX(newX);
         }, [offsetX, window?.innerWidth, x]);
 
-        useLayoutEffect(() => {
+        useClientLayoutEffect(() => {
             if (!menuRef.current) {
                 return;
             }

package/src/Components/RbmComponentProps.ts

@@ -1,6 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
 import { Recursive } from '../TypeHelpers';
-import { URecord } from "@ainias42/js-helper";
 
 export type RbmChildWithoutString = Recursive<JSX.Element | undefined | null | RbmChildWithoutString[]> | false;
 export type WithNoStringProps =

package/src/Components/SpoilerList/Spoiler/Spoiler.tsx

@@ -7,13 +7,11 @@ import { Grow } from '../../Layout/Grow';
 import { Text, TEXT_SIZE } from '../../Text/Text';
 import { Block } from '../../Layout/Block';
 import { Clickable } from '../../Clickable/Clickable';
-
 import styles from './spoiler.scss';
 import classNames from 'classnames';
 import { OptionalListener, useListener } from '../../Hooks/useListener';
 import { Icon, IconSource } from '../../Icon/Icon';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 export type SpoilerProps<OnClickData> = RbmComponentProps<
     {
@@ -89,7 +87,7 @@ function Spoiler<OnClickData>({
             style={style}
         >
             <Flex horizontal={true}>
-                <Grow __allowChildren={"all"}>{titleComponent}</Grow>
+                <Grow __allowChildren="all">{titleComponent}</Grow>
                 {icon ? <Icon icon={icon} className={styles.icon} /> : null}
             </Flex>
             <Block className={styles.bodyContainer}>

package/src/Components/Toast/Toast.tsx

@@ -79,7 +79,6 @@ function Toast<ActionData, DismissedData>({
 
     // Render Functions
     if (isHidden) {
-        console.log("LOG-d isHidden");
         return null;
     }
 

package/src/Components/Toast/ToastContainer.tsx

@@ -6,17 +6,61 @@ import styles from './toast.scss';
 import classNames from 'classnames';
 import { withMemo } from '../../helper/withMemo';
 import { EmptyProps } from '../../helper/EmptyProps';
+import { useCallback, useRef, useState } from "react";
+import { ObjectHelper, URecord } from "@ainias42/js-helper";
+import { Toast } from "./Toast";
+import { Text } from "../Text/Text";
+import { ToastContext } from "./ToastContext";
 
 export type ToastContainerProps = RbmComponentProps<EmptyProps>;
 
-function ToastContainer({ className, children, style }: ToastContainerProps) {
+function ToastContainer({className, children, style}: ToastContainerProps) {
     // Variables
 
     // States
+    const lastId = useRef(0);
+    const [toasts, setToasts] = useState<URecord<number, {
+        id: number,
+        text: string,
+        duration: number,
+        action?: { name: string, onClick: (data?: any) => void, onClickData?: any }
+    }>>({});
 
     // Refs
 
     // Callbacks
+    const removeToast = useCallback((id: number) => {
+        setToasts((oldToasts) => {
+            const newToasts = {...oldToasts};
+            delete newToasts[id];
+            return newToasts;
+        });
+    }, []);
+
+    const addToast = useCallback((
+        text: string,
+        action?: {
+            name: string,
+            onClick: (data?: any) => void,
+            onClickData?: any
+        },
+        duration = 2500
+    ) => {
+        lastId.current++;
+        const id = lastId.current;
+
+        setToasts((oldToasts) => {
+            return {
+                ...oldToasts,
+                [id]: {
+                    id,
+                    text,
+                    duration,
+                    action
+                }
+            };
+        });
+    }, []);
 
     // Effects
 
@@ -25,9 +69,21 @@ function ToastContainer({ className, children, style }: ToastContainerProps) {
     // Render Functions
 
     return (
-        <Container className={classNames(styles.toastContainer, className)} fluid __allowChildren="all" style={style}>
+        <ToastContext.Provider value={addToast}>
             {children}
-        </Container>
+            <Container className={classNames(styles.toastContainer, className)} fluid __allowChildren="all"
+                       style={style}>
+                {ObjectHelper.values(toasts).map((toast) => <Toast key={toast.id}
+                                                                   timeToShow={toast.duration}
+                                                                   onDismissed={removeToast}
+                                                                   onDismissedData={toast.id} {...(toast.action ? {
+                    ...toast.action,
+                    actionName: toast.action.name
+                } : {})}>
+                    <Text>{toast.text}</Text>
+                </Toast>)}
+            </Container>
+        </ToastContext.Provider>
     );
 }
 

package/src/Components/Toast/ToastContext.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+
+export const ToastContext = createContext<<Data>(text: string, action?: {name: string, onClick: (data?: Data) => void, onClickData?: Data }, duration?: number) => void>(() => {
+    console.error("ToastContext not initialized");
+});
+
+export function useToast() {
+    return useContext(ToastContext);
+}

package/src/Components/TopBar/TopBarButton.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useCallback } from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 
 import styles from './topBar.scss';
@@ -12,13 +11,12 @@ export type TopBarButtonProps = RbmComponentProps<{
 }>;
 
 function TopBarButton({ disabled = false, onClick, className, children, ...rbmProps }: TopBarButtonProps) {
-    const cb = useCallback(() => (onClick ? onClick() : null), [onClick]);
     return (
         <a
             role="button"
             {...rbmProps}
-            onClick={cb}
-            className={classNames(styles.button, { [styles.disabled]: disabled }, className)}
+            onClick={onClick}
+            className={classNames(styles.button, { [styles.disabled]: disabled, [styles.active]: !disabled && onClick }, className)}
         >
             {children}
         </a>

package/src/Components/TopBar/topBar.scss

@@ -24,6 +24,10 @@
   }
 
   .button {
+    &.active {
+      cursor: pointer;
+    }
+
     display: block;
     padding: 0.5rem 1rem;
     color: #0d3efd; // TODO change color

package/src/helper/withRenderBrowserOnly.tsx

@@ -6,7 +6,7 @@ export function withRenderBrowserOnly<C extends ComponentType<any>>(Component: C
 
     const displayName = `WithRenderBrowserOnly(${Component.displayName || Component.name})`;
 
-    const HocComponent = ({ children, ...props }: Props, ref?: ForwardedRef<RefType>) => {
+    function HocComponent({ children, ...props }: Props, ref?: ForwardedRef<RefType>) {
         const [isBrowser, setIsBrowser] = useState(false);
 
         useEffect(() => setIsBrowser(true), []);
@@ -24,7 +24,7 @@ export function withRenderBrowserOnly<C extends ComponentType<any>>(Component: C
             // @ts-ignore
             <Component {...(newProps as Props)}>{children}</Component>
         );
-    };
+    }
     HocComponent.displayName = displayName;
     return HocComponent as C;
 }

package/src/scss/_baseClasses.scss

@@ -1,26 +1,26 @@
-.full-height {
+:global(.full-height) {
   height: 100%;
 }
 
-.full-min-height {
+:global(.full-min-height) {
   min-height: 100%;
 }
 
-.scrollable {
+:global(.scrollable) {
   overflow-y: auto;
 }
 
-.full-width {
+:global(.full-width) {
   width: 100%;
 }
 
-.flat-hidden {
+:global(.flat-hidden) {
   @include design($flat) {
     display: none;
   }
 }
 
-.material-hidden {
+:global(.material-hidden) {
   @include design($material) {
     display: none;
   }

package/src/scss/_default.scss

@@ -1,3 +1,5 @@
+@import "designMixin";
+
 * {
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;

package/src/scss/_variables.scss

@@ -1,5 +1,5 @@
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
 
 $classPrefix: "rbm-";
 

package/webpack.config.js

@@ -28,7 +28,7 @@ module.exports = (env) => {
         output: {
             filename: 'bootstrapReactMobile.js',
             path: path.resolve(__dirname, 'dist'),
-            library: { type: 'umd' },
+            library: { type: 'commonjs-static' },
             clean: true,
             globalObject: 'this',
         },
@@ -63,6 +63,7 @@ module.exports = (env) => {
                                 esModule: false,
                                 modules: {
                                     localIdentName: '[local]__[hash:base64:5]',
+                                    exportLocalsConvention: 'camel-case'
                                 },
                             },
                         },

package/src/scss/_animations.scss

@@ -1,46 +0,0 @@
-@keyframes material-new-site {
-  0% {
-    transform: translate(0, 100%);
-    z-index: 1;
-  }
-  100% {
-    transform: translate(0, 0);
-    z-index: 1;
-  }
-}
-
-@keyframes flat-new-site {
-  0% {
-    transform: translate(100%, 0);
-    z-index: 1;
-  }
-  100% {
-    transform: translate(0, 0);
-    z-index: 1;
-  }
-}
-
-.animation-new-site {
-  background: green;
-  @include design($material) {
-    animation: material-new-site;
-    animation-duration: $animationDurationMaterial;
-  }
-  @include design($flat) {
-    animation: flat-new-site;
-    animation-duration: $animationDurationMaterial;
-  }
-}
-
-.animation-end-site {
-  @include design($material) {
-    animation: material-new-site;
-    animation-duration: $animationDurationMaterial;
-    animation-direction: reverse;
-  }
-  @include design($flat) {
-    animation: flat-new-site;
-    animation-duration: $animationDurationMaterial;
-    animation-direction: reverse;
-  }
-}

package/src/scss/_mobileMixin.scss

@@ -1,35 +0,0 @@
-@use 'sass:selector';
-
-@mixin design($designName) {
-  @if & {
-    @at-root #{selector.nest('.'+$designName, &)} {
-      @content
-    }
-  } @else {
-    .#{$designName} {
-      @content
-    }
-  }
-}
-
-@mixin subPrefix($className) {
-  .#{$classPrefix+$className} {
-    @content
-  }
-}
-
-@mixin prefix($className, $concatSelectors: false) {
-  @if $concatSelectors == true {
-    &.#{$classPrefix+$className} {
-      @content
-    }
-  } @else if ($concatSelectors != false) {
-    #{$concatSelectors}.#{$classPrefix+$className} {
-      @content
-    }
-  } @else {
-    @include subPrefix($className) {
-      @content
-    }
-  }
-}