@ainias42/react-bootstrap-mobile 0.1.31 → 0.1.32

package/src/Components/Layout/View.tsx

@@ -1,13 +1,15 @@
 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 { withMemo } from "../../helper/withMemo";
+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 +33,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,8 @@
 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 { withMemo } from "../../helper/withMemo";
+import { withForwardRef } from "../../helper/withForwardRef";
 
 export type ViewWithoutListenersProps<AsType extends keyof JSX.IntrinsicElements> = Omit<
     ViewProps<AsType>,
@@ -11,7 +13,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 +37,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/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/webpack.config.js

@@ -63,6 +63,7 @@ module.exports = (env) => {
                                 esModule: false,
                                 modules: {
                                     localIdentName: '[local]__[hash:base64:5]',
+                                    exportLocalsConvention: 'camel-case'
                                 },
                             },
                         },