@ainias42/react-bootstrap-mobile 0.2.3 → 0.2.4

package/dist/src/Components/FormElements/Controller/SwitchController.d.ts

@@ -0,0 +1,3 @@
+export declare const SwitchController: import("../../../helper/withForwardRef").RefComponent<Omit<import("../Switch/Switch").SwitchProps<unknown>, "value" | "ref" | "onBlur" | "name" | "onChangeChecked"> & {
+    name: string;
+}, never>;

package/dist/src/Components/Hooks/useDelayedState.d.ts

@@ -0,0 +1,5 @@
+export declare function useDelayedState<T>(initialState: T | (() => T), delay?: number, maxDelay?: number | undefined): {
+    state: T;
+    immediateState: T;
+    setState: (newValue: (T)) => void;
+};

package/dist/src/Components/TopBar/TopBar.d.ts

@@ -3,6 +3,7 @@ import { ComponentType } from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 import { IconSource } from '../Icon/Icon';
 export type TopBarActionButtonType = {
+    order?: number;
     title: string;
     icon?: IconSource;
     action: () => void;
@@ -21,6 +22,6 @@ export type TopBarProps = RbmComponentProps<{
     transparent?: boolean;
     drawBehind?: boolean;
 }>;
-declare function TopBar({ title, rightButtons, leftButtons, hiddenButtons, className, transparent, drawBehind, ...rbmProps }: TopBarProps): React.JSX.Element;
+declare function TopBar({ title, rightButtons: unsortedRightButtons, leftButtons: unsortedLeftButtons, hiddenButtons: unsortedHiddenButtons, className, transparent, drawBehind, ...rbmProps }: TopBarProps): React.JSX.Element;
 declare const TopBarMemo: typeof TopBar;
 export { TopBarMemo as TopBar };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {
@@ -92,7 +92,7 @@
     "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {
-    "@ainias42/js-helper": ">=0.8.15",
+    "@ainias42/js-helper": ">=0.8.16",
     "@types/react-virtualized-auto-sizer": "^1.0.4",
     "classnames": "^2.5.1",
     "isomorphic-style-loader": "^5.3.2",

package/src/Components/Clickable/Clickable.tsx

@@ -315,7 +315,7 @@ function Clickable<
     };
     if (typeof href === 'string') {
         return (
-            <a {...props} href={href} ref={refSetter as ForwardedRef<HTMLAnchorElement>}>
+            <a {...props} className={classNames(styles.link, props.className)} href={href} ref={refSetter as ForwardedRef<HTMLAnchorElement>}>
                 {children}
             </a>
         );

package/src/Components/Clickable/clickable.scss

@@ -1,3 +1,8 @@
 .clickable {
   cursor: pointer;
 }
+
+.link {
+  color: var(--link-color);
+  text-decoration: underline;
+}

package/src/Components/FormElements/Controller/SwitchController.ts

@@ -0,0 +1,4 @@
+import { Switch } from "../Switch/Switch";
+import { withHookController } from "./withHookController";
+
+export const SwitchController = withHookController(Switch, "onChangeChecked");

package/src/Components/FormElements/Controller/withHookController.tsx

@@ -41,6 +41,7 @@ export function withHookController<C extends ComponentType<any>, OnChangeProp ex
                 {...field}
                 {...onChangeProps}
                 value={field.value ?? emptyValue}
+                checked={field.value ?? emptyValue}
                 ref={composedRef}
                 error={errorMessage}
             >

package/src/Components/Hooks/useDelayedState.ts

@@ -0,0 +1,18 @@
+import { useCallback, useState } from "react";
+import { useDelayed } from "./useDelayed";
+
+export function useDelayedState<T>(initialState: T | (() => T), delay = 100, maxDelay: number | undefined = undefined) {
+    const [immediateState, setImmediateState] = useState(initialState);
+    const [state, setState] = useState(immediateState);
+
+    const setDelayedState = useDelayed((newState: (T)) => {
+        setState(newState);
+    }, [], delay, maxDelay);
+
+    const setValue = useCallback((newValue: (T)) => {
+        setImmediateState(newValue);
+        setDelayedState(newValue);
+    }, [setDelayedState]);
+
+    return {state, immediateState, setState: setValue};
+}

package/src/Components/Layout/Flex.tsx

@@ -37,6 +37,7 @@ function Flex<AsType extends keyof JSX.IntrinsicElements = 'div'>(
             className={classNames(className, styles.flex, {
                 [styles.horizontal]: horizontal,
                 [styles.grow]: grow,
+                [styles.weight1]: grow,
             })}
             as={as as AsType}
             ref={ref}

package/src/Components/Layout/Grid/grid.scss

@@ -18,7 +18,7 @@ $containerBreakpoints: $grid-breakpoints;
 @mixin printClasses {
   @media print {
     @for $i from 1 through $columns {
-      .item-print-#{$i} {
+      > .item-print-#{$i} {
         grid-column: auto / span $i;
       }
     }
@@ -26,14 +26,14 @@ $containerBreakpoints: $grid-breakpoints;
     // Start with `1` because `0` is and invalid value.
     // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
     @for $i from 1 through ($columns - 1) {
-      .start-print-#{$i} {
+      > .start-print-#{$i} {
         grid-column-start: $i;
       }
     }
 
     // Add classes for reordering
     @for $i from -10 through 10 {
-      .order-print-#{$i} {
+      > .order-print-#{$i} {
         order: $i;
       }
     }
@@ -42,7 +42,7 @@ $containerBreakpoints: $grid-breakpoints;
 
 @mixin contentMin($breakpointName) {
   @for $i from 1 through $columns {
-    .item-#{$breakpointName}-#{$i} {
+    > .item-#{$breakpointName}-#{$i} {
       grid-column: auto / span $i;
     }
   }
@@ -50,7 +50,7 @@ $containerBreakpoints: $grid-breakpoints;
   // Start with `1` because `0` is and invalid value.
   // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
   @for $i from 1 through ($columns - 1) {
-    .start-#{$breakpointName}-#{$i} {
+    > .start-#{$breakpointName}-#{$i} {
       grid-column-start: $i;
     }
   }
@@ -58,7 +58,7 @@ $containerBreakpoints: $grid-breakpoints;
 
 @mixin contentOnly($breakpointName) {
   @for $i from -10 through 10 {
-    .order-#{$breakpointName}-#{$i} {
+    > .order-#{$breakpointName}-#{$i} {
       order: $i;
     }
   }
@@ -110,7 +110,7 @@ $containerBreakpoints: $grid-breakpoints;
     @each $breakpoint in map-keys($breakpoints) {
       @include media-breakpoint-up($breakpoint, $breakpoints) {
         @for $i from 1 through $columns {
-          .item-#{$breakpoint}-#{$i} {
+          > .item-#{$breakpoint}-#{$i} {
             grid-column: auto / span $i;
           }
         }
@@ -118,7 +118,7 @@ $containerBreakpoints: $grid-breakpoints;
         // Start with `1` because `0` is and invalid value.
         // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
         @for $i from 1 through ($columns - 1) {
-          .start-#{$breakpoint}-#{$i} {
+          > .start-#{$breakpoint}-#{$i} {
             grid-column-start: $i;
           }
         }
@@ -127,7 +127,7 @@ $containerBreakpoints: $grid-breakpoints;
       // Add classes for reordering
       @include media-breakpoint-only($breakpoint, $breakpoints) {
         @for $i from -10 through 10 {
-          .order-#{$breakpoint}-#{$i} {
+          > .order-#{$breakpoint}-#{$i} {
             order: $i;
           }
         }

package/src/Components/TopBar/TopBar.tsx

@@ -18,6 +18,7 @@ import { Inline } from '../Layout/Inline';
 import { View } from '../Layout/View';
 
 export type TopBarActionButtonType = {
+    order?: number;
     title: string;
     icon?: IconSource;
     action: () => void;
@@ -45,11 +46,11 @@ function getButtonComponents(buttons: TopBarButtonType[]) {
         const key = button.key ?? String(index);
         if ('component' in button) {
             const Component = button.component;
-            return <Component {...button} key={key} onClick={button.action} />;
+            return <Component {...button} key={key} onClick={button.action}/>;
         }
         let child: string | ReactElement | undefined = button.title;
         if (button.icon) {
-            child = <Icon icon={button.icon} />;
+            child = <Icon icon={button.icon}/>;
         }
         return (
             <TopBarButton key={key} onClick={button.action} disabled={button.disabled} __allowChildren="all">
@@ -60,15 +61,15 @@ function getButtonComponents(buttons: TopBarButtonType[]) {
 }
 
 function TopBar({
-    title = '',
-    rightButtons = [],
-    leftButtons = [],
-    hiddenButtons = [],
-    className,
-    transparent = false,
-    drawBehind = false,
-    ...rbmProps
-}: TopBarProps) {
+                    title = '',
+                    rightButtons: unsortedRightButtons = [],
+                    leftButtons: unsortedLeftButtons = [],
+                    hiddenButtons: unsortedHiddenButtons = [],
+                    className,
+                    transparent = false,
+                    drawBehind = false,
+                    ...rbmProps
+                }: TopBarProps) {
     const [isHiddenMenuOpen, setIsHiddenMenuOpen] = useState(false);
 
     if (isHiddenMenuOpen) {
@@ -76,6 +77,9 @@ function TopBar({
     }
 
     const actionSheetRef = useRef<React.ElementRef<typeof ActionSheet>>(null);
+    let rightButtons = useMemo(() => unsortedRightButtons.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), [unsortedRightButtons]);
+    const leftButtons = useMemo(() => unsortedLeftButtons.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), [unsortedLeftButtons]);
+    let hiddenButtons = useMemo(() => unsortedHiddenButtons.sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), [unsortedHiddenButtons]);
 
     const toggleHiddenMenu = useCallback(() => {
         setIsHiddenMenuOpen((isOpen) => {
@@ -121,7 +125,7 @@ function TopBar({
 
     const rightButtonComponents = getButtonComponents(rightButtons);
     const leftButtonComponents = getButtonComponents(leftButtons);
-    const hiddenButtonComponents = getButtonComponents(hiddenButtons.map(({ icon: _, ...button }) => button));
+    const hiddenButtonComponents = getButtonComponents(hiddenButtons.map(({icon: _, ...button}) => button));
 
     const actions: ActionSheetAction<any>[] = useMemo(
         () =>
@@ -157,7 +161,7 @@ function TopBar({
                 </Flex>
                 {hiddenButtons.length > 0 && isHiddenMenuOpen ? (
                     <Inline className={styles.hiddenContainer}>
-                        <View aria-hidden={true} className={styles.hiddenCloseCurtain} onClick={toggleHiddenMenu} />
+                        <View aria-hidden={true} className={styles.hiddenCloseCurtain} onClick={toggleHiddenMenu}/>
                         <View className={styles.hiddenMenu}>{hiddenButtonComponents}</View>
                     </Inline>
                 ) : null}

package/src/Components/TopBar/topBar.scss

@@ -30,12 +30,12 @@
 
     display: block;
     padding: 0.5rem 1rem;
-    color: #0d3efd; // TODO change color
+    color: var(--top-bar-button, #0d3efd);
     text-decoration: none;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 
     &.disabled {
-      color: #6c757d; // TODO change color
+      color: var(--top-bar-button-disabled, #6c757d);
       pointer-events: none;
       cursor: default;
     }

package/src/scss/_colors.scss

@@ -1,5 +1,4 @@
 
-
 :root {
   --flavor-basic: #000000;
   --flavor-constructive: #15803D;
@@ -12,6 +11,10 @@
 
   --text-error: var(--flavor-destructive);
 
+  --top-bar-button: #0d3efd;
+  --top-bar-button-disabled: #6c757d;
+
+  --link-color: #0d6efd;
 }
 
 .#{$material} {