@ainias42/react-bootstrap-mobile 0.1.7

package/src/Components/Dialog/DialogBackground.tsx

@@ -0,0 +1,38 @@
+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';
+
+export type DialogBackgroundProps = RbmComponentProps<EmptyProps>;
+
+function DialogBackground({ children, className, style }: DialogBackgroundProps) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <Block __allowChildren="all" className={classNames(styles.dialogBackground, className)} style={style}>
+            {children}
+        </Block>
+    );
+}
+
+// Need DialogBackgroundMemo for autocompletion of phpstorm
+const DialogBackgroundMemo = withMemo(DialogBackground, styles);
+export { DialogBackgroundMemo as DialogBackground };

package/src/Components/Dialog/DialogContainer.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { withMemo } from '../../helper/withMemo';
+import { ComponentType, PropsWithChildren, useCallback, useState } from 'react';
+import { PromiseWithHandlers } from '@ainias42/js-helper';
+import { DialogProvider, ShowDialog } from './DialogContext';
+import { Dialog } from './Dialog';
+import { EmptyProps } from '../../helper/EmptyProps';
+
+export type DialogContainerProps = PropsWithChildren<EmptyProps>;
+
+type DialogData = {
+    id: number;
+    component: ComponentType;
+    props?: Record<string, any>;
+    resultPromise: PromiseWithHandlers<any>;
+};
+
+function DialogContainer({ children }: DialogContainerProps) {
+    // Variables
+    const [dialogs, setDialogs] = useState<DialogData[]>([]);
+    const [, setLastId] = useState(0);
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+    const showDialog: ShowDialog = useCallback((component, props) => {
+        const promise = new PromiseWithHandlers<any>();
+        setLastId((oldId) => {
+            const id = oldId + 1;
+            setDialogs((oldDialogs) => {
+                return [...oldDialogs, { id, component, props, resultPromise: promise }] as DialogData[];
+            });
+            return id;
+        });
+        return promise;
+    }, []);
+
+    const onClose = useCallback((result?: any, id?: number) => {
+        setDialogs((oldDialogs) =>
+            oldDialogs.filter((d) => {
+                if (d.id === id) {
+                    d.resultPromise.resolve(result);
+                    return false;
+                }
+                return true;
+            })
+        );
+    }, []);
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <DialogProvider value={showDialog}>
+            {children}
+            {dialogs.map((d) => {
+                const DialogComponent = d.component;
+                return (
+                    <Dialog {...d.props} key={d.id} onClose={onClose} identifier={d.id}>
+                        <DialogComponent {...d.props} />
+                    </Dialog>
+                );
+            })}
+        </DialogProvider>
+    );
+}
+
+// Need DialogContainerMemo for autocompletion of phpstorm
+const DialogContainerMemo = withMemo(DialogContainer);
+export { DialogContainerMemo as DialogContainer };

package/src/Components/Dialog/DialogContext.ts

@@ -0,0 +1,21 @@
+import React, { ComponentType, useContext } from 'react';
+import { EmptyProps } from '../../helper/EmptyProps';
+
+export type ShowDialog = <
+    P = EmptyProps,
+    R = any,
+    C extends ComponentType<(P & { close: (result?: R) => void }) | P> = ComponentType<
+        (P & { close: (result?: R) => void }) | P
+    >
+>(
+    dialog: C,
+    props?: Omit<P, 'close'>
+) => Promise<R | void>;
+
+const DialogContext = React.createContext<ShowDialog>(() => Promise.reject());
+export const DialogProvider = DialogContext.Provider;
+
+export function useDialog() {
+    const showDialog = useContext(DialogContext);
+    return showDialog as ShowDialog;
+}

package/src/Components/Dialog/buttonDialog.scss

@@ -0,0 +1,114 @@
+@import "../../scss/variables";
+@import "../../scss/designMixin";
+
+.buttonDialog {
+  font-weight: 400;
+  max-width: 95%;
+  overflow: hidden;
+  min-width: 270px;
+
+  .title {
+    font-weight: 500;
+  }
+
+  .message {
+  }
+
+  .buttonContainer {
+    width: 100%;
+
+    .button {
+      color: var(--flavor-accent);
+      padding: 0 8px;
+    }
+  }
+
+  @include design($flat) {
+    border-radius: 8px;
+    background-color: #f4f4f4;
+    padding-top: 16px;
+    color: #1f1f21;
+    font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
+    text-align: center;
+
+    .title {
+      font-size: 17px;
+      padding: 0 8px;
+    }
+
+    .message {
+      font-size: 14px;
+      padding: 4px 12px 8px;
+      min-height: 36px;
+    }
+
+    .buttonContainer {
+      display: flex;
+      white-space: nowrap;
+
+      .button {
+        flex: 1;
+        display: block;
+        border-left: 1px solid var(--border-light);
+        border-top: 1px solid var(--border-light);
+        text-overflow: ellipsis;
+        letter-spacing: 0;
+        vertical-align: middle;
+        font-size: 16px;
+        text-align: center;
+        height: 44px;
+        line-height: 44px;
+        overflow: hidden;
+
+        &:first-child {
+          border-left: none;
+        }
+      }
+    }
+  }
+
+  @include design($material) {
+    border-radius: 2px;
+    background-color: #ffffff;
+    padding: 22px 0 0;
+    box-shadow: 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 40%);
+    color: #31313a;
+    font-family: 'Roboto', 'Noto', sans-serif;
+    text-align: left;
+
+    .title {
+      font-size: 20px;
+      padding: 0 24px;
+    }
+
+    .message {
+      font-size: 16px;
+      line-height: 20px;
+      padding: 0 24px;
+      margin: 24px 0 10px 0;
+      min-height: 0;
+      color: rgba(49, 49, 58, .85);
+    }
+
+    .buttonContainer {
+      display: block;
+      padding: 0;
+      height: 52px;
+      line-height: 1;
+
+      .button {
+        text-transform: uppercase;
+        display: inline-block;
+        width: auto;
+        float: right;
+        border-radius: 2px;
+        font-size: 14px;
+        font-weight: 500;
+        height: 36px;
+        line-height: 36px;
+        margin: 8px 8px 8px 0;
+        min-width: 50px;
+      }
+    }
+  }
+}

package/src/Components/Dialog/dialog.scss

@@ -0,0 +1,30 @@
+@import "../../scss/variables";
+@import "../../scss/designMixin";
+
+.dialogContainer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  margin: auto;
+  z-index: 1001;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  .closeCurtain {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .dialog {
+    max-width: map-get($grid-breakpoints, "xxl");
+    z-index: 1;
+  }
+}

package/src/Components/Dialog/dialogBackground.scss

@@ -0,0 +1,4 @@
+.dialogBackground {
+  background-color: white;
+  padding: 0.3rem;
+}

package/src/Components/Dialog/useAlertDialog.ts

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+import { useDialog } from './DialogContext';
+import { AlertDialog } from './AlertDialog';
+
+export function useAlertDialog() {
+    const showDialog = useDialog();
+    return useCallback(
+        (message: string, title?: string) => {
+            return showDialog(AlertDialog, { message, title });
+        },
+        [showDialog]
+    );
+}

package/src/Components/Dialog/useConfirmDialog.ts

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+import { useDialog } from './DialogContext';
+import { ConfirmDialog } from './ConfirmDialog';
+
+export function useConfirmDialog() {
+    const showDialog = useDialog();
+    return useCallback(
+        (message: string, title?: string) => {
+            return showDialog(ConfirmDialog, { message, title });
+        },
+        [showDialog]
+    );
+}

package/src/Components/DragAndDrop/DragItem.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+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) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <Draggable {...dragProps}>
+            {({ innerRef, dragHandleProps, draggableProps }) => (
+                <div {...draggableProps} {...dragHandleProps} ref={innerRef}>
+                    {children}
+                </div>
+            )}
+        </Draggable>
+    );
+}
+
+// Need DragItemMemo for autocompletion of phpstorm
+const DragItemMemo = withMemo(DragItem);
+export { DragItemMemo as DragItem };

package/src/Components/DragAndDrop/DropArea.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { withMemo } from '../../helper/withMemo';
+import { RbmComponentProps, WithNoStringAndChildrenProps } from '../RbmComponentProps';
+import { Droppable, DroppableProps } from 'react-beautiful-dnd';
+import { useStrictEnabled } from './useStrictEnabled';
+
+export type DropAreaProps = RbmComponentProps<Omit<DroppableProps, 'children'>, WithNoStringAndChildrenProps>;
+
+function DropArea({ children, style, className, ...dropProps }: DropAreaProps) {
+    // Variables
+
+    // Refs
+
+    // States
+    const enabled = useStrictEnabled();
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    if (!enabled) {
+        return null;
+    }
+
+    return (
+        <Droppable {...dropProps}>
+            {({ innerRef, droppableProps }) => (
+                <div {...droppableProps} ref={innerRef} style={style} className={className}>
+                    {children}
+                </div>
+            )}
+        </Droppable>
+    );
+}
+
+// Need DropAreaMemo for autocompletion of phpstorm
+const DropAreaMemo = withMemo(DropArea);
+export { DropAreaMemo as DropArea };

package/src/Components/DragAndDrop/useStrictEnabled.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+export const useStrictEnabled = (loading = false) => {
+    const [enabled, setEnabled] = useState(false);
+
+    useEffect(() => {
+        let animation: any;
+
+        if (!loading) {
+            animation = requestAnimationFrame(() => setEnabled(true));
+        }
+
+        return () => {
+            cancelAnimationFrame(animation);
+            setEnabled(false);
+        };
+    }, [loading]);
+
+    return enabled;
+};

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Override } from '../../../TypeHelpers';
+import { OptionalListener, useListener } 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';
+
+export type ButtonProps<ClickData> = RbmComponentProps<
+    Override<HTMLAttributes<HTMLButtonElement>, OptionalListener<'onClick', ClickData>>
+>;
+
+function Button<ClickData>({ children, className, ...props }: ButtonProps<ClickData>) {
+    const onClick = useListener<'onClick', ClickData>('onClick', props);
+    return (
+        <button {...props} type="button" onClick={onClick} className={classNames(styles.button, className)}>
+            {children}
+        </button>
+    );
+}
+
+const ButtonMemo = withMemo(Button, styles);
+export { ButtonMemo as Button };

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

@@ -0,0 +1,39 @@
+@import "../../../scss/variables";
+@import "../../../scss/designMixin";
+
+.button {
+  cursor: pointer;
+  margin: 0;
+  user-select: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  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 design($material) {
+    box-shadow: $boxShadowMaterial;
+    min-height: 40px;
+    line-height: 40px;
+    padding: 0 16px;
+    text-align: center;
+    font-size: 14px;
+    text-transform: uppercase;
+    background-color: var(--flavor-accent);
+    font-weight: 500;
+  }
+
+  @include design($flat) {
+    line-height: 32px;
+    padding: 4px 18px;
+    font-size: 17px;
+    background-color: var(--flavor-accent);
+  }
+}

package/src/Components/FormElements/CheckBox/Checkbox.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { InputHTMLAttributes } from 'react';
+
+import styles from './checkbox.scss';
+import { withMemo } from '../../../helper/withMemo';
+import classNames from 'classnames';
+
+export type CheckboxProps = RbmComponentProps<
+    {
+        label?: string;
+        children?: string;
+        isLabelBeforeCheckbox?: boolean;
+    } & InputHTMLAttributes<HTMLInputElement>
+>;
+
+function Checkbox({
+    children,
+    label = '',
+    isLabelBeforeCheckbox = false,
+    id,
+    className,
+    style,
+    ...props
+}: CheckboxProps) {
+    // Variables
+
+    // States
+
+    // Refs
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    if (React.Children.count(children) === 1 && typeof children === 'string') {
+        label = children;
+    }
+
+    let preLabel = '';
+    if (isLabelBeforeCheckbox) {
+        [label, preLabel] = [preLabel, label];
+    }
+
+    return (
+        <span className={classNames(styles.checkbox, className)} style={style}>
+            <label htmlFor={id} key={id}>
+                <span className={styles.label}>{preLabel}</span>
+                <input {...props} type="checkbox" id={id} className={styles.input} />
+                <span className={styles.checkmark} />
+                <span className={styles.label}>{label}</span>
+            </label>
+        </span>
+    );
+}
+
+const tmp = withMemo(Checkbox, styles);
+export { tmp as Checkbox };

package/src/Components/FormElements/CheckBox/checkbox.scss

@@ -0,0 +1,107 @@
+@import "../../../scss/variables";
+@import "../../../scss/designMixin";
+
+.checkbox {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+
+  > label {
+    display: flex;
+    cursor: pointer;
+  }
+
+  .label {
+    line-height: 22px;
+
+    &:not(:empty) {
+      margin-left: 0.2rem;
+      margin-right: 0.2rem;
+    }
+  }
+
+  .input {
+    display: none;
+  }
+
+  .checkmark {
+    display: inline-block;
+    user-select: none;
+    position: relative;
+
+    &::before {
+      content: " ";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+    }
+
+    @include design($material) {
+      width: 18px;
+      height: 18px;
+      margin: 2px;
+
+      &::before {
+        border: 2px solid var(--border-strong);
+        border-radius: 2px;
+        transition: background-color 0.1s linear 0.2s, border-color 0.1s linear 0.2s;
+        background-color: transparent;
+      }
+    }
+    @include design($flat) {
+      width: 22px;
+      height: 22px;
+
+      &::before {
+        background: transparent;
+        border: 1px solid var(--border-light);
+        border-radius: 22px;
+      }
+    }
+  }
+
+  input:checked + {
+    .checkmark {
+      &::after {
+        content: " ";
+        position: absolute;
+        height: 5px;
+        background: transparent;
+        border-radius: 0;
+        transform: rotate(-45deg);
+        border: 2px none #fff;
+        border-bottom-style: solid;
+        border-left-style: solid;
+      }
+
+      &::before {
+        background-color: var(--flavor-accent);
+      }
+
+      @include design($material) {
+        &::before {
+          border: 2px solid var(--flavor-accent);
+          transition: background-color 0.1s linear, border-color 0.1s linear;
+        }
+        &::after {
+          transition: transform 0.2s ease 0.2s;
+          top: 5px;
+          left: 4px;
+          width: 10px;
+
+        }
+      }
+      @include design($flat) {
+        &::before {
+          border: none;
+        }
+        &::after {
+          top: 7px;
+          left: 5px;
+          width: 11px;
+        }
+      }
+    }
+  }
+}