@ainias42/react-bootstrap-mobile 0.2.13 → 0.2.15

package/src/Components/FormElements/Switch/Switch.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { ChangeEventHandler, InputHTMLAttributes, useCallback } from 'react';
+import { ChangeEventHandler, InputHTMLAttributes, MouseEvent, useCallback } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
 import classNames from 'classnames';
-
 import styles from './switch.scss';
 import { withMemo } from '../../../helper/withMemo';
 import { OptionalListener, useListenerWithExtractedProps } from "../../Hooks/useListener";
@@ -19,6 +18,9 @@ export type SwitchProps<OnChangeCheckedData> = RbmComponentProps<
             isLabelBeforeSwitch?: boolean;
             isDual?: boolean;
             error?: string;
+            classNameLabel?: string;
+            classNamePreLabel?: string;
+            stopPropagation?: boolean;
         } & OptionalListener<"onChangeChecked", OnChangeCheckedData, boolean>
     >
 >;
@@ -29,8 +31,11 @@ export const Switch = withMemo(function Switch<OnChangeCheckedData>({
                                                                         preLabel = '',
                                                                         isLabelBeforeSwitch = false,
                                                                         isDual = undefined,
+                                                                        stopPropagation = true,
                                                                         id,
                                                                         className,
+                                                                        classNamePreLabel,
+                                                                        classNameLabel,
                                                                         style,
                                                                         error,
                                                                         onChange,
@@ -53,6 +58,13 @@ export const Switch = withMemo(function Switch<OnChangeCheckedData>({
             [onChange, onChangeChecked]
         );
 
+        const checkStopPropagation = useCallback((ev: MouseEvent) => {
+            if (stopPropagation) {
+                ev.stopPropagation();
+                ev.nativeEvent.stopPropagation();
+            }
+        }, [stopPropagation]);
+
         // Effects
 
         // Other
@@ -71,17 +83,16 @@ export const Switch = withMemo(function Switch<OnChangeCheckedData>({
             isDual = true;
         }
         return (
-            <span className={classNames(styles.switch, {[styles.dual]: isDual}, className)} style={style}>
-            <label htmlFor={id} key={id}>
-                <span className={styles.label}>{preLabel}</span>
-                <input {...otherProps} type="checkbox" id={id} onChange={realOnChange}/>
-                <div className={styles.toggle}>
-                    <span className={styles.handle}/>
-                </div>
-                <span className={styles.label}>{label}</span>
-                <FormError error={error}/>
-            </label>
-        </span>
-        );
+            <span className={classNames(styles.switch, {[styles.dual]: isDual}, className)} style={style} onClick={checkStopPropagation}>
+                <label htmlFor={id} key={id}>
+                    <span className={classNames(styles.label, classNamePreLabel)}>{preLabel}</span>
+                    <input {...otherProps} type="checkbox" id={id} onChange={realOnChange}/>
+                    <div className={styles.toggle}>
+                        <span className={styles.handle}/>
+                    </div>
+                    <span className={classNames(styles.label, classNameLabel)}>{label}</span>
+                    <FormError error={error}/>
+                </label>
+            </span>);
     },
     styles);

package/src/Components/FormElements/Switch/switch.scss

@@ -24,6 +24,7 @@
   }
 
   .toggle {
+    flex-shrink: 0;
     width: 40px;
     display: inline-block;
     position: relative;
@@ -33,6 +34,7 @@
     border-radius: 30px;
 
     .handle {
+      left: var(--switch-handle-offset, 0);
       transition-property: all;
       transition-duration: 0.35s;
       transition-timing-function: cubic-bezier(.59, .01, .5, .99);
@@ -60,14 +62,14 @@
   }
 
   @include design($material) {
-    input:checked + {
-      .toggle {
-        //box-shadow: none;
+    --switch-handle-checked-offset: 18px;
+    --switch-handle-offset: 0px;
 
-        .handle {
-          @extend %dual-handle-material;
-          left: 18px;
-        }
+    input:checked + .toggle {
+      --switch-handle-offset: var(--switch-handle-checked-offset);
+
+      .handle {
+        @extend %dual-handle-material;
       }
     }
 
@@ -82,7 +84,6 @@
         width: 22px;
         height: 22px;
         background-color: #f1f1f1;
-        left: 0;
         box-shadow: 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 40%);
 
         &:before {
@@ -101,15 +102,17 @@
   }
 
   @include design($flat) {
-    input:checked + {
-      .toggle {
-        @extend %dual-toggle-flat;
+    --switch-handle-offset: 2px;
+    --switch-handle-checked-offset: 19px;
 
-        .handle {
-          @extend %dual-handle-flat;
-          left: 19px
-        }
+    input:checked + .toggle {
+      @extend %dual-toggle-flat;
+      --switch-handle-offset: var(--switch-handle-checked-offset);
+
+      .handle {
+        @extend %dual-handle-flat;
       }
+
     }
 
     .toggle {
@@ -122,7 +125,6 @@
         height: 19px;
         width: 19px;
         background-color: #ffffff;
-        left: 2px;
         top: 2px;
         box-shadow: 0 0 1px 0 rgb(0 0 0 / 25%), 0 3px 2px rgb(0 0 0 / 25%);
       }

package/src/Components/Icon/Icon.tsx

@@ -6,7 +6,6 @@ import {IconProp} from '@fortawesome/fontawesome-svg-core';
 import {withMemo} from '../../helper/withMemo';
 import {IconDefinition} from '@fortawesome/free-regular-svg-icons';
 import classNames from "classnames";
-
 import styles from "./icon.scss";
 
 export type IconSource = IconProp | string | IconDefinition;

package/src/Components/Menu/Menu.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
-import {withMemo} from '../../helper/withMemo';
-import {RbmComponentProps} from '../RbmComponentProps';
-import {IconSource} from '../Icon/Icon';
-import {Block} from '../Layout/Block';
+import { withMemo } from '../../helper/withMemo';
+import { RbmComponentProps } from '../RbmComponentProps';
+import { IconSource } from '../Icon/Icon';
+import { Block } from '../Layout/Block';
 import classNames from 'classnames';
 import styles from './menu.scss';
-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 { 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 = {
@@ -71,7 +71,7 @@ export const Menu = withMemo(
         // Effects
         useEffect(() => {
             if (isOpen) {
-                const listener = (e: MouseEvent|TouchEvent) => {
+                const listener = (e: MouseEvent | TouchEvent) => {
                     if (!menuRef.current?.contains(e.target as Node)) {
                         onClose();
                     }
@@ -90,7 +90,7 @@ export const Menu = withMemo(
             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;
             }
@@ -99,37 +99,38 @@ export const Menu = withMemo(
 
         useClientLayoutEffect(() => {
             if (!menuRef.current) {
-                return;
-            }
-            const width = parseFloat(getComputedStyle(menuRef.current).width);
-            let newX = x;
-            if (newX > (window?.innerWidth ?? 0) - width) {
-                newX -= width + offsetX;
-            }
-
-            if (newX < 0) {
-                newX = 0;
-            }
-
-            setInnerX(newX);
-        }, [offsetX, window?.innerWidth, x]);
-
-        useClientLayoutEffect(() => {
-            if (!menuRef.current) {
-                return;
-            }
-            const height = parseFloat(getComputedStyle(menuRef.current).height);
-            let newY = y;
-            if (newY > (window?.innerHeight ?? 0) - height) {
-                newY -= height + offsetY;
+                return undefined;
             }
-
-            if (newY < 0) {
-                newY = 0;
-            }
-
-            setInnerY(newY);
-        }, [offsetY, window?.innerHeight, y]);
+            const menuElement = menuRef.current;
+
+            const updateInnerPositions = () => {
+                const computedStyle = getComputedStyle(menuElement);
+                const height = parseFloat(computedStyle.height);
+                let newY = y;
+                if (newY > (window?.innerHeight ?? 0) - height) {
+                    newY -= height + offsetY;
+                }
+                setInnerY(Math.max(0, newY));
+
+                const width = parseFloat(computedStyle.width);
+                let newX = x;
+                if (newX > (window?.innerWidth ?? 0) - width) {
+                    newX -= width + offsetX;
+                }
+                setInnerX(Math.max(0, newX));
+
+            };
+
+            const observer = new ResizeObserver(() => {
+                updateInnerPositions();
+            });
+            observer.observe(menuElement);
+            updateInnerPositions();
+
+            return () => {
+                observer.disconnect();
+            };
+        }, [window, x, y, offsetX, offsetY]);
 
         // Other
 

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { withMemo } from '../../../helper/withMemo';
 import { RbmComponentProps } from '../../RbmComponentProps';
-import { ReactChild, useCallback, useEffect, useRef, useState } from 'react';
+import { MouseEvent, ReactChild, useCallback, useEffect, useRef, useState } from 'react';
 import { Flex } from '../../Layout/Flex';
 import { Grow } from '../../Layout/Grow';
 import { Text, TEXT_SIZE } from '../../Text/Text';
@@ -18,6 +18,7 @@ export type SpoilerProps<OnClickData> = RbmComponentProps<
         title: ReactChild;
         initialOpen?: boolean;
         open?: boolean;
+        onlyTitleToggles?: boolean;
         noClosingAnimation?: boolean;
         openIcon?: IconSource | null;
         closeIcon?: IconSource | null;
@@ -25,17 +26,18 @@ export type SpoilerProps<OnClickData> = RbmComponentProps<
 >;
 
 function Spoiler<OnClickData>({
-    title,
-    children,
-    initialOpen = false,
-    noClosingAnimation = false,
-    openIcon = faChevronDown,
-    closeIcon = faChevronUp,
-    className,
-    style,
-    open,
-    ...listenerProps
-}: SpoilerProps<OnClickData>) {
+                                  title,
+                                  children,
+                                  initialOpen = false,
+                                  noClosingAnimation = false,
+                                  openIcon = faChevronDown,
+                                  closeIcon = faChevronUp,
+                                  className,
+                                  onlyTitleToggles = false,
+                                  style,
+                                  open,
+                                  ...listenerProps
+                              }: SpoilerProps<OnClickData>) {
     // Variables
 
     // Refs
@@ -50,12 +52,14 @@ function Spoiler<OnClickData>({
     // Callbacks
     const onClickListener = useListener<'onClick', OnClickData, boolean>('onClick', listenerProps);
 
-    const toggleOpen = useCallback(() => {
+    const toggleOpen = useCallback((ev: MouseEvent) => {
+        console.log("LOG-d target", ev.target);
         if (open !== undefined) {
             onClickListener?.(!open);
         } else {
             setIsInitialValue(false);
             setIsOpen((old) => {
+                console.log("LOG-d toggleOpen", !old);
                 onClickListener?.(!old);
                 return !old;
             });
@@ -78,7 +82,7 @@ function Spoiler<OnClickData>({
 
     return (
         <Clickable
-            onClick={toggleOpen}
+            onClick={onlyTitleToggles ? undefined: toggleOpen}
             className={classNames(className, styles.spoiler, {
                 [styles.open]: open ?? isOpen,
                 [styles.noAnimation]: isInitialValue,
@@ -86,10 +90,12 @@ function Spoiler<OnClickData>({
             })}
             style={style}
         >
-            <Flex horizontal={true}>
-                <Grow __allowChildren="all">{titleComponent}</Grow>
-                {icon ? <Icon icon={icon} className={styles.icon} /> : null}
-            </Flex>
+            <Clickable onClick={toggleOpen}>
+                <Flex horizontal={true}>
+                    <Grow __allowChildren="all">{titleComponent}</Grow>
+                    {icon ? <Icon icon={icon} className={styles.icon}/> : null}
+                </Flex>
+            </Clickable>
             <Block className={styles.bodyContainer}>
                 <Block __allowChildren="all" className={styles.body}>
                     {children}