@ainias42/react-bootstrap-mobile 0.1.15 → 0.1.17

package/src/Components/Clickable/Clickable.tsx

@@ -1,16 +1,19 @@
 import * as React from 'react';
-import { RbmComponentProps } from '../RbmComponentProps';
-import { OptionalListener, useListener } from '../Hooks/useListener';
+import {RbmComponentProps} from '../RbmComponentProps';
+import {OptionalListener, useListener} from '../Hooks/useListener';
 
 import styles from './clickable.scss';
 import classNames from 'classnames';
-import { useCallback, MouseEvent, ForwardedRef } from 'react';
-import { withForwardRef } from '../../helper/withForwardRef';
+import {useCallback, MouseEvent as ReactMouseEvent, ForwardedRef, useEffect, MouseEvent} from 'react';
+import {withForwardRef} from '../../helper/withForwardRef';
+import {useComposedRef} from "../Hooks/useComposedRef";
 
 type OnClickListener<Data> = OptionalListener<'onClick', Data>;
 type OnMouseDownListener<Data> = OptionalListener<'onMouseDown', Data>;
 type OnMouseUpListener<Data> = OptionalListener<'onMouseUp', Data>;
 type OnMouseMoveListener<Data> = OptionalListener<'onMouseMove', Data>;
+type OnDropListener<Data> = OptionalListener<'onDrop', Data>;
+type OnDragOverListener<Data> = OptionalListener<'onDragOver', Data>;
 
 export type ClickableProps<
     OnClickData,
@@ -18,6 +21,11 @@ export type ClickableProps<
     OnMouseMoveData,
     OnMouseUpData,
     OnClickCaptureData,
+    OnDropData,
+    OnDragOverData,
+    OnMouseEnterData,
+    OnMouseLeaveData,
+    OnDoubleClickData,
     HrefType extends string | undefined
 > = RbmComponentProps<
     {
@@ -25,11 +33,17 @@ export type ClickableProps<
         href?: HrefType;
         preventDefault?: boolean;
         stopPropagation?: boolean;
+        useReactOnMouseLeave?: boolean;
     } & OnClickListener<OnClickData> &
-        OnMouseDownListener<OnMouseDownData> &
-        OnMouseMoveListener<OnMouseMoveData> &
-        OnMouseUpListener<OnMouseUpData> &
-        OptionalListener<'onClickCapture', OnClickCaptureData>
+    OnMouseDownListener<OnMouseDownData> &
+    OnMouseMoveListener<OnMouseMoveData> &
+    OnMouseUpListener<OnMouseUpData> &
+    OnDropListener<OnDropData> &
+    OnDragOverListener<OnDragOverData> &
+    OptionalListener<'onClickCapture', OnClickCaptureData> &
+    OptionalListener<'onMouseEnter', OnMouseEnterData> &
+    OptionalListener<'onMouseLeave', OnMouseLeaveData, MouseEvent|ReactMouseEvent> &
+    OptionalListener<'onDoubleClick', OnDoubleClickData>
 >;
 
 function Clickable<
@@ -38,6 +52,11 @@ function Clickable<
     OnMouseMoveData,
     OnMouseUpData,
     OnClickCaptureData,
+    OnDropData,
+    OnDragOverData,
+    OnMouseEnterData,
+    OnMouseLeaveData,
+    OnDoubleClickData,
     HrefType extends string | undefined
 >(
     {
@@ -48,8 +67,9 @@ function Clickable<
         interactable = true,
         preventDefault = false,
         stopPropagation = true,
+        useReactOnMouseLeave = false,
         ...clickData
-    }: ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, HrefType>,
+    }: ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, OnDropData, OnDragOverData,OnMouseEnterData, OnMouseLeaveData, OnDoubleClickData, HrefType>,
     ref: ForwardedRef<HrefType extends string ? HTMLAnchorElement : HTMLSpanElement>
 ) {
     // Variables
@@ -57,11 +77,12 @@ function Clickable<
     // States
 
     // Refs
+    const clickableRef = useComposedRef(ref);
 
     // Callbacks
     const onClickInner = useListener<'onClick', OnClickData>('onClick', clickData);
     const realOnClick = useCallback(
-        (e: MouseEvent) => {
+        (e: ReactMouseEvent) => {
             if (clickData.onClick) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -77,7 +98,7 @@ function Clickable<
 
     const onMouseDownInner = useListener<'onMouseDown', OnMouseDownData>('onMouseDown', clickData);
     const realOnMouseDown = useCallback(
-        (e: MouseEvent) => {
+        (e: ReactMouseEvent) => {
             if (clickData.onMouseDown) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -93,7 +114,7 @@ function Clickable<
 
     const onMouseMoveInner = useListener<'onMouseMove', OnMouseMoveData>('onMouseMove', clickData);
     const realOnMouseMove = useCallback(
-        (e: MouseEvent) => {
+        (e: ReactMouseEvent) => {
             if (clickData.onMouseMove) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -109,7 +130,7 @@ function Clickable<
 
     const onMouseUpInner = useListener<'onMouseUp', OnMouseUpData>('onMouseUp', clickData);
     const realOnMouseUp = useCallback(
-        (e: MouseEvent) => {
+        (e: ReactMouseEvent) => {
             if (clickData.onMouseUp) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -124,8 +145,8 @@ function Clickable<
     );
 
     const onClickCaptureInner = useListener<'onClickCapture', OnClickCaptureData>('onClickCapture', clickData);
-    const realOnClickCaptureInner = useCallback(
-        (e: MouseEvent) => {
+    const realOnClickCapture = useCallback(
+        (e: ReactMouseEvent) => {
             if (clickData.onClickCapture) {
                 if (stopPropagation) {
                     e.stopPropagation();
@@ -139,7 +160,97 @@ function Clickable<
         [clickData.onClickCapture, onClickCaptureInner, preventDefault, stopPropagation]
     );
 
+    const onDropInner = useListener<'onDrop', OnDropData>('onDrop', clickData);
+    const realOnDrop = useCallback(
+        (e: ReactMouseEvent) => {
+            if (clickData.onDrop) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onDropInner(e);
+            }
+        },
+        [clickData.onDrop, onDropInner, preventDefault, stopPropagation]
+    );
+
+    const onDragOver = useListener<'onDragOver', OnDragOverData>('onDragOver', clickData);
+    const realOnDragOver = useCallback(
+        (e: ReactMouseEvent) => {
+            if (clickData.onDragOver) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onDragOver(e);
+            }
+        },
+        [clickData.onDragOver, onDragOver, preventDefault, stopPropagation]
+    );
+
+    const onMouseEnter = useListener<'onMouseEnter', OnMouseEnterData>('onMouseEnter', clickData);
+    const realOnMouseEnter = useCallback(
+        (e: ReactMouseEvent) => {
+            if (clickData.onMouseEnter) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onMouseEnter(e);
+            }
+        },
+        [clickData.onMouseEnter, onMouseEnter, preventDefault, stopPropagation]
+    );
+
+    const onMouseLeave = useListener<'onMouseLeave', OnMouseLeaveData>('onMouseLeave', clickData);
+    const realOnMouseLeave = useCallback(
+        (e: Event|ReactMouseEvent) => {
+            if (clickData.onMouseLeave) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onMouseLeave(e);
+            }
+        },
+        [clickData.onMouseLeave, onMouseLeave, preventDefault, stopPropagation]
+    );
+
+    const onDoubleClick = useListener<'onDoubleClick', OnDoubleClickData>('onDoubleClick', clickData);
+    const realOnDoubleClick = useCallback(
+        (e: Event|ReactMouseEvent) => {
+            if (clickData.onDoubleClick) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onDoubleClick(e);
+            }
+        },
+        [clickData.onDoubleClick, onDoubleClick, preventDefault, stopPropagation]
+    );
+
     // Effects
+    useEffect(() => {
+        if (useReactOnMouseLeave) {
+            return undefined;
+        }
+        const elem = clickableRef.current;
+        elem?.addEventListener('mouseleave', realOnMouseLeave);
+        return () => {
+            elem?.removeEventListener('mouseleave', realOnMouseLeave);
+        };
+    }, [useReactOnMouseLeave, clickableRef, realOnMouseLeave]);
 
     // Other
 
@@ -153,22 +264,27 @@ function Clickable<
         onMouseDown: realOnMouseDown,
         onMouseMove: realOnMouseMove,
         onMouseUp: realOnMouseUp,
-        onClickCapture: realOnClickCaptureInner,
+        onClickCapture: realOnClickCapture,
+        onDrop: realOnDrop,
+        onDragOver: realOnDragOver,
+        onMouseEnter: realOnMouseEnter,
+        onMouseLeave: useReactOnMouseLeave ? realOnMouseLeave : undefined,
+        onDoubleClick: realOnDoubleClick,
         tabIndex: interactable ? 0 : undefined,
     };
     if (typeof href === 'string') {
         return (
-            <a {...props} href={href} ref={ref as ForwardedRef<HTMLAnchorElement>}>
+            <a {...props} href={href} ref={clickableRef as ForwardedRef<HTMLAnchorElement>}>
                 {children}
             </a>
         );
     }
     return (
-        <span {...props} ref={ref as ForwardedRef<HTMLSpanElement>}>
+        <span {...props} ref={clickableRef as ForwardedRef<HTMLSpanElement>}>
             {children}
         </span>
     );
 }
 
 const ClickableMemo = withForwardRef(Clickable, styles);
-export { ClickableMemo as Clickable };
+export {ClickableMemo as Clickable};

package/src/Components/Dialog/DialogBackground.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { withMemo } from '../../helper/withMemo';
 import { RbmComponentProps } from '../RbmComponentProps';
 import { Block } from '../Layout/Block';
-import { EmptyProps } from '../../helper/EmptyProps';
 
 import styles from './dialogBackground.scss';
 import classNames from 'classnames';
+import {Heading} from "../Text/Heading";
 
-export type DialogBackgroundProps = RbmComponentProps<EmptyProps>;
+export type DialogBackgroundProps = RbmComponentProps<{title?: string}>;
 
-function DialogBackground({ children, className, style }: DialogBackgroundProps) {
+export const DialogBackground = withMemo(function DialogBackground({ children, className, style, title }: DialogBackgroundProps) {
     // Variables
 
     // Refs
@@ -28,11 +28,8 @@ function DialogBackground({ children, className, style }: DialogBackgroundProps)
 
     return (
         <Block __allowChildren="all" className={classNames(styles.dialogBackground, className)} style={style}>
+            {!!title && <Heading className={styles.title}>{title}</Heading>}
             {children}
         </Block>
     );
-}
-
-// Need DialogBackgroundMemo for autocompletion of phpstorm
-const DialogBackgroundMemo = withMemo(DialogBackground, styles);
-export { DialogBackgroundMemo as DialogBackground };
+}, styles);

package/src/Components/Dialog/DialogContainer.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { ComponentType, PropsWithChildren, useCallback, 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 { EmptyProps } from '../../helper/EmptyProps';
+import {withForwardRef} from "../../helper/withForwardRef";
 
 export type DialogContainerProps = PropsWithChildren<EmptyProps>;
 
@@ -15,7 +15,11 @@ type DialogData = {
     resultPromise: PromiseWithHandlers<any>;
 };
 
-function DialogContainer({ children }: DialogContainerProps) {
+export type DialogContainerRef = {
+    showDialog: ShowDialog;
+}
+
+export const DialogContainer = withForwardRef(function DialogContainer({ children }: DialogContainerProps, ref: ForwardedRef<DialogContainerRef>) {
     // Variables
     const [dialogs, setDialogs] = useState<DialogData[]>([]);
     const [, setLastId] = useState(0);
@@ -52,6 +56,10 @@ function DialogContainer({ children }: DialogContainerProps) {
     }, []);
 
     // Effects
+    useImperativeHandle(ref, () => ({
+        showDialog
+    }), [showDialog]);
+
 
     // Other
 
@@ -70,8 +78,4 @@ function DialogContainer({ children }: DialogContainerProps) {
             })}
         </DialogProvider>
     );
-}
-
-// Need DialogContainerMemo for autocompletion of phpstorm
-const DialogContainerMemo = withMemo(DialogContainer);
-export { DialogContainerMemo as DialogContainer };
+});

package/src/Components/Dialog/DialogContext.ts

@@ -16,6 +16,5 @@ const DialogContext = React.createContext<ShowDialog>(() => Promise.reject());
 export const DialogProvider = DialogContext.Provider;
 
 export function useDialog() {
-    const showDialog = useContext(DialogContext);
-    return showDialog as ShowDialog;
+    return useContext(DialogContext);
 }

package/src/Components/Dialog/dialogBackground.scss

@@ -1,4 +1,8 @@
 .dialogBackground {
   background-color: white;
-  padding: 0.3rem;
+  padding: 0.5rem;
+
+  .title {
+    margin: 0 0 0.8rem;
+  }
 }

package/src/Components/DragAndDrop/DragItem.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { withMemo } from '../../helper/withMemo';
-import { RbmComponentProps, WithNoStringAndChildrenProps } from '../RbmComponentProps';
-import { Draggable, DraggableProps } from 'react-beautiful-dnd';
+import {withMemo} from '../../helper/withMemo';
+import {RbmComponentProps, WithNoStringAndChildrenProps} from '../RbmComponentProps';
+import {Draggable, DraggableProps} from 'react-beautiful-dnd';
 
 export type DragItemProps = RbmComponentProps<Omit<DraggableProps, 'children'>, WithNoStringAndChildrenProps>;
 
-function DragItem({ children, ...dragProps }: DragItemProps) {
+function DragItem({children, className, ...dragProps}: DragItemProps) {
     // Variables
 
     // Refs
@@ -24,8 +24,8 @@ function DragItem({ children, ...dragProps }: DragItemProps) {
 
     return (
         <Draggable {...dragProps}>
-            {({ innerRef, dragHandleProps, draggableProps }) => (
-                <div {...draggableProps} {...dragHandleProps} ref={innerRef}>
+            {({innerRef, dragHandleProps, draggableProps}) => (
+                <div className={className} {...draggableProps} {...dragHandleProps} ref={innerRef}>
                     {children}
                 </div>
             )}
@@ -35,4 +35,4 @@ function DragItem({ children, ...dragProps }: DragItemProps) {
 
 // Need DragItemMemo for autocompletion of phpstorm
 const DragItemMemo = withMemo(DragItem);
-export { DragItemMemo as DragItem };
+export {DragItemMemo as DragItem};

package/src/Components/DragAndDrop/DropArea.tsx

@@ -29,9 +29,10 @@ function DropArea({ children, style, className, ...dropProps }: DropAreaProps) {
 
     return (
         <Droppable {...dropProps}>
-            {({ innerRef, droppableProps }) => (
+            {({ innerRef, droppableProps, placeholder }) => (
                 <div {...droppableProps} ref={innerRef} style={style} className={className}>
                     {children}
+                    {placeholder}
                 </div>
             )}
         </Droppable>

package/src/Components/Flavor.ts

@@ -0,0 +1,4 @@
+export enum Flavor {
+    Accent = "flavor-accent",
+    Basic = "flavor-basic",
+}

package/src/Components/FormElements/Button/Button.tsx

@@ -1,25 +1,43 @@
 import * as React from 'react';
-import { Override } from '@ainias42/js-helper';
-import { OptionalListener, useListener } from '../../Hooks/useListener';
+import {Override} from '@ainias42/js-helper';
+import {OptionalListener, useListener, useListenerWithExtractedProps} from '../../Hooks/useListener';
 
 import styles from './button.scss';
 import classNames from 'classnames';
-import { withMemo } from '../../../helper/withMemo';
-import { HTMLAttributes } from 'react';
-import { RbmComponentProps } from '../../RbmComponentProps';
+import {withMemo} from '../../../helper/withMemo';
+import {HTMLAttributes} from 'react';
+import {RbmComponentProps} from '../../RbmComponentProps';
+import {ButtonType} from "./ButtonType";
+import {Flavor} from "../../Flavor";
 
 export type ButtonProps<ClickData> = RbmComponentProps<
-    Override<HTMLAttributes<HTMLButtonElement>, OptionalListener<'onClick', ClickData>>
+    Override<HTMLAttributes<HTMLButtonElement>, {
+        type?: ButtonType,
+        disabled?: boolean;
+        flavor?: Flavor
+    } & OptionalListener<'onClick', ClickData>>
 >;
 
-function Button<ClickData>({ children, className, ...props }: ButtonProps<ClickData>) {
-    const onClick = useListener<'onClick', ClickData>('onClick', props);
+export const Button = withMemo(function Button<ClickData>({
+                                                              children,
+                                                              className,
+                                                              disabled,
+                                                              flavor = Flavor.Accent,
+                                                              type = ButtonType.Primary,
+                                                              ...props
+                                                          }: ButtonProps<ClickData>) {
+    const [onClick, otherProps] = useListenerWithExtractedProps<'onClick', ClickData>('onClick', props);
+
+    const classes = {
+        [styles.primary]: type === ButtonType.Primary,
+        [styles.secondary]: type === ButtonType.Secondary,
+        [styles.disabled]: disabled,
+    };
+
     return (
-        <button {...props} type="button" onClick={onClick} className={classNames(styles.button, className)}>
+        <button {...otherProps} disabled={disabled} type="button" onClick={onClick}
+                className={classNames(styles.button, classes, flavor, className)}>
             {children}
         </button>
     );
-}
-
-const ButtonMemo = withMemo(Button, styles);
-export { ButtonMemo as Button };
+}, styles);

package/src/Components/FormElements/Button/ButtonType.ts

@@ -0,0 +1,4 @@
+export enum ButtonType {
+    Primary = "primary",
+    Secondary = "secondary",
+}

package/src/Components/FormElements/Button/button.scss

@@ -1,5 +1,6 @@
 @import "../../../scss/variables";
 @import "../../../scss/designMixin";
+@import "../../../scss/flavorMixin";
 
 .button {
   cursor: pointer;
@@ -10,13 +11,11 @@
   overflow: hidden;
   text-decoration: none;
   letter-spacing: 0;
-  color: white;
   vertical-align: middle;
-  border: 0 solid currentColor;
   border-radius: 3px;
   transition: none;
 
-  --text-primary-default-color: white;
+  @include flavorSelection(--button-color);
 
   @include design($material) {
     box-shadow: $boxShadowMaterial;
@@ -26,7 +25,6 @@
     text-align: center;
     font-size: 14px;
     text-transform: uppercase;
-    background-color: var(--flavor-accent);
     font-weight: 500;
   }
 
@@ -34,6 +32,25 @@
     line-height: 32px;
     padding: 4px 18px;
     font-size: 17px;
-    background-color: var(--flavor-accent);
+  }
+
+  &.primary {
+    background-color: var(--button-color);
+    border: 0 solid currentColor;
+    color: white;
+    --text-primary-default-color: white;
+  }
+
+  &.secondary {
+    background-color: transparent;
+    border: 1px solid var(--button-color);
+    color: var(--button-color);
+    --text-primary-default-color: var(--button-color);
+  }
+
+  &.disabled {
+    opacity: 0.3;
+    cursor: default;
+    pointer-events: none;
   }
 }

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {RbmComponentProps} from '../../../RbmComponentProps';
+import {Override} from '../../../../TypeHelpers';
+import {useCallback, useMemo} from 'react';
+import {Listener, useListenerWithExtractedProps} from '../../../Hooks/useListener';
+
+import styles from './fileInput.scss';
+import {withMemo} from '../../../../helper/withMemo';
+import {FileType} from "./FileType";
+import {MultipleFileInput, MultipleFileInputProps} from "./MultipleFileInput";
+
+
+export type FileInputProps<OnChangeFileData> = RbmComponentProps<
+    Override<
+        Omit<MultipleFileInputProps<unknown>, "onChangeFiles" | "maxFiles" | "onChangeFilesData" | "mimeTypes"|"showDeleteButton">, {
+        value?: FileType,
+        mimeType?: string,
+        required?: boolean,
+    } & Listener<'onChangeFile', OnChangeFileData, FileType | undefined>>
+>;
+
+// TODO use MultipleFileInput internal
+export const FileInput = withMemo(function FileInput<OnChangeData>({
+                                                                       value,
+                                                                       mimeType,
+                                                                       required = false,
+                                                                       ...otherProps
+                                                                   }: FileInputProps<OnChangeData>) {
+    // Variables
+
+    // Refs
+
+    // States
+    const mimeTypes = useMemo(() => (mimeType ? [mimeType] : undefined), [mimeType]);
+    const innerValue = useMemo(() => value ? [value] : [], [value]);
+
+    // Selectors
+
+    // Callbacks
+    const [onChangeFile, multipleFileInputProps] = useListenerWithExtractedProps<"onChangeFile", OnChangeData>("onChangeFile", otherProps);
+    const onChangeFiles = useCallback((files: FileType[]) => {
+        if (!required || files[0]) {
+            onChangeFile(files[0]);
+        }
+    }, [onChangeFile, required]);
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    return <MultipleFileInput maxFiles={1} value={innerValue} onChangeFiles={onChangeFiles}
+                              mimeTypes={mimeTypes} showDeleteButton={!required} {...multipleFileInputProps}/>;
+
+}, styles);

package/src/Components/FormElements/Input/FileInput/FileType.ts

@@ -0,0 +1 @@
+export type FileType = { name: string; data: string; mimeType: string; uploaded?: boolean; blob?: Blob };