@ainias42/react-bootstrap-mobile 0.2.13 → 0.2.14

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,14 @@ export const Switch = withMemo(function Switch<OnChangeCheckedData>({
             [onChange, onChangeChecked]
         );
 
+        const checkStopPropagation = useCallback((ev: MouseEvent) => {
+            if (stopPropagation) {
+                console.log("LOG-d stopPropagation inside checkStopPropagation", ev);
+                ev.stopPropagation();
+                ev.nativeEvent.stopPropagation();
+            }
+        }, [stopPropagation]);
+
         // Effects
 
         // Other
@@ -71,17 +84,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/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}