@ainias42/react-bootstrap-mobile 0.1.32 → 0.2.0

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

@@ -1,2 +1,2 @@
-import { useLayoutEffect } from "react";
-export declare function useClientLayoutEffect(...params: Parameters<typeof useLayoutEffect>): void;
+import React from "react";
+export declare function useClientLayoutEffect(...params: Parameters<typeof React.useLayoutEffect>): void;

package/dist/src/Components/Toast/ToastContext.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const ToastContext: import("react").Context<(<Data>(text: string, action?: {
+    name: string;
+    onClick: (data?: Data) => void;
+    onClickData?: Data;
+}, duration?: number) => void)>;
+export declare function useToast(): <Data>(text: string, action?: {
+    name: string;
+    onClick: (data?: Data | undefined) => void;
+    onClickData?: Data | undefined;
+} | undefined, duration?: number | undefined) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.1.32",
+  "version": "0.2.0",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {

package/react-bootstrap-mobile.scss

@@ -1,6 +1,6 @@
 @import "src/scss/variables";
-@import "src/scss/mobileMixin";
+@import "src/scss/designMixin";
+@import "src/scss/flavorMixin";
 @import "src/scss/default";
-@import "src/scss/animations";
 @import "src/scss/baseClasses";
 @import "src/scss/colors";

package/src/Components/Dialog/DialogContainer.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import {ComponentType, ForwardedRef, PropsWithChildren, useCallback, useImperativeHandle, useState} from 'react';
+import { ComponentType, ForwardedRef, PropsWithChildren, useCallback, useImperativeHandle, useState } from 'react';
 import { PromiseWithHandlers } from '@ainias42/js-helper';
 import { DialogProvider, ShowDialog } from './DialogContext';
 import { Dialog } from './Dialog';
-import {withForwardRef} from "../../helper/withForwardRef";
+import { withForwardRef } from "../../helper/withForwardRef";
 import { Block } from "../Layout/Block";
 
 export type DialogContainerProps = PropsWithChildren<{
@@ -21,7 +21,10 @@ export type DialogContainerRef = {
     showDialog: ShowDialog;
 }
 
-export const DialogContainer = withForwardRef(function DialogContainer({ children, dialogClassName }: DialogContainerProps, ref: ForwardedRef<DialogContainerRef>) {
+export const DialogContainer = withForwardRef(function DialogContainer({
+                                                                           children,
+                                                                           dialogClassName
+                                                                       }: DialogContainerProps, ref: ForwardedRef<DialogContainerRef>) {
     // Variables
     const [dialogs, setDialogs] = useState<DialogData[]>([]);
     const [, setLastId] = useState(0);
@@ -38,7 +41,7 @@ export const DialogContainer = withForwardRef(function DialogContainer({ childre
         setLastId((oldId) => {
             const id = oldId + 1;
             setDialogs((oldDialogs) => {
-                return [...oldDialogs, { id, component, props, resultPromise: promise }] as DialogData[];
+                return [...oldDialogs, {id, component, props, resultPromise: promise}] as DialogData[];
             });
             return id;
         });
@@ -71,14 +74,14 @@ export const DialogContainer = withForwardRef(function DialogContainer({ childre
         <DialogProvider value={showDialog}>
             {children}
             <Block className={dialogClassName}>
-            {dialogs.map((d) => {
-                const DialogComponent = d.component;
-                return (
-                    <Dialog {...d.props} key={d.id} onClose={onClose} identifier={d.id}>
-                        <DialogComponent {...d.props} />
-                    </Dialog>
-                );
-            })}
+                {dialogs.map((d) => {
+                    const DialogComponent = d.component;
+                    return (
+                        <Dialog {...d.props} key={d.id} onClose={onClose} identifier={d.id}>
+                            <DialogComponent {...d.props} />
+                        </Dialog>
+                    );
+                })}
             </Block>
         </DialogProvider>
     );

package/src/Components/Dialog/DialogContext.ts

@@ -12,7 +12,10 @@ export type ShowDialog = <
     props?: Omit<P, 'close'>
 ) => Promise<R | void>;
 
-const DialogContext = React.createContext<ShowDialog>(() => Promise.reject());
+const DialogContext = React.createContext<ShowDialog>(() => {
+    console.error("DialogContext not initialized");
+    return Promise.reject("DialogContext not initialized")
+});
 export const DialogProvider = DialogContext.Provider;
 
 export function useDialog() {

package/src/Components/FormElements/Input/Input.tsx

@@ -5,7 +5,7 @@ import {
     KeyboardEvent,
     MutableRefObject,
     useCallback, useEffect,
-    useMemo, useRef,
+    useMemo,
 } from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';

package/src/Components/Hooks/useClientLayoutEffect.ts

@@ -1,8 +1,8 @@
-import { useLayoutEffect } from "react";
+import React from "react";
 
-export function useClientLayoutEffect(...params: Parameters<typeof useLayoutEffect>) {
+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
-        useLayoutEffect(...params);
+        React.useLayoutEffect(...params);
     }
 }

package/src/Components/Layout/View.tsx

@@ -1,7 +1,6 @@
 import * as React 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<

package/src/Components/Layout/ViewWithoutListeners.tsx

@@ -1,7 +1,6 @@
 import * as React 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<

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/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',
         },

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
-    }
-  }
-}