@ainias42/react-bootstrap-mobile 0.1.7

package/src/Components/ActionSheet/actionSheet.scss

@@ -0,0 +1,153 @@
+@import "../../scss/variables";
+@import "../../scss/designMixin";
+
+$zIndexActionSheet: 10000;
+
+.actionSheet {
+  position: fixed;
+  top: 100%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.1);
+  z-index: $zIndexActionSheet;
+
+  transition-duration: 0s;
+  transition-delay: 0.25s;
+
+  &.open {
+    transition-delay: 0s;
+    top: 0;
+
+    > :global(.full-height) {;
+      top: 0
+    }
+  }
+
+  > :global(.full-height) {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 100%;
+  }
+
+  .content {
+    bottom: 0;
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+
+    .action {
+      height: 56px;
+      width: 100%;
+      font-size: 20px;
+      background-color: #ffffff;
+      border-radius: 0;
+      line-height: 56px;
+      display: block;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .cancel {
+      height: 56px;
+      width: 100%;
+      font-size: 20px;
+      background-color: #ffffff;
+      line-height: 56px;
+      display: block;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+
+  @include design($material) {
+    > .full-height {
+      padding: 0;
+    }
+
+    .content {
+      text-align: left;
+
+      .action {
+        padding: 0 0 0 16px;
+        color: #686868;
+
+        .actionIcon {
+          display: inline-block;
+          float: left;
+          margin-right: 32px;
+          font-size: 26px;
+          text-align: center;
+          width: 0.8em;
+          height: 56px;
+        }
+      }
+
+      .cancel {
+        padding: 0 0 0 16px;
+        color: #686868;
+
+        .actionIcon {
+          display: inline-block;
+          float: left;
+          margin-right: 32px;
+          font-size: 1rem;
+          text-align: center;
+          width: 0.8em;
+          height: 56px;
+        }
+      }
+    }
+  }
+
+  @include design($flat) {
+    .content {
+
+      text-align: center;
+
+      padding-right: 10px;
+      padding-left: 10px;
+      padding-bottom: 10px;
+
+      .action {
+        color: var(--flavor-accent);
+
+        background-size: 100% 1px;
+        background-repeat: no-repeat;
+        background-position: bottom;
+        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 100%);
+
+        &:first-child {
+          border-top-right-radius: 12px;
+          border-top-left-radius: 12px;
+        }
+
+        &:nth-last-child(2) {
+          border-bottom-right-radius: 12px;
+          border-bottom-left-radius: 12px;
+        }
+
+        .actionIcon {
+          display: none;
+        }
+      }
+
+      .cancel {
+        color: var(--flavor-accent);
+
+        border-radius: 12px;
+        margin: 8px 0 0 0;
+
+        .actionIcon {
+          display: none;
+        }
+      }
+    }
+  }
+}

package/src/Components/Card/Card.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../RbmComponentProps';
+
+import styles from './card.scss';
+import { withMemo } from '../../helper/withMemo';
+import classNames from 'classnames';
+import { ReactElement } from 'react';
+
+export type CardProps = RbmComponentProps<{
+    title?: string | ReactElement;
+    fullHeight?: boolean;
+    noPaddingHeight?: boolean;
+    noPaddingWidth?: boolean;
+    noPadding?: boolean;
+    noMargin?: boolean;
+}>;
+
+function Card({
+    title,
+    children,
+    fullHeight = false,
+    noPaddingHeight = false,
+    noPadding = false,
+    noPaddingWidth = false,
+    noMargin = false,
+    className,
+    ...rbmProps
+}: CardProps) {
+    const classes = classNames(styles.card, className, {
+        [styles.fullHeight]: fullHeight,
+        [styles.noPadding]: noPadding,
+        [styles.noMargin]: noMargin,
+        [styles.noPaddingHeight]: noPaddingHeight,
+        [styles.noPaddingWidth]: noPaddingWidth,
+    });
+
+    return (
+        <div {...rbmProps} className={classes}>
+            {title ? <div className={styles.title}>{title}</div> : null}
+            <div className={styles.content}>{children}</div>
+        </div>
+    );
+}
+
+const CardMemo = withMemo(Card, styles);
+export { CardMemo as Card };

package/src/Components/Card/card.scss

@@ -0,0 +1,76 @@
+@import "../../scss/variables";
+@import "../../scss/designMixin";
+
+$marginCard: 8px;
+
+.card {
+  margin: $marginCard;
+  padding: 16px;
+  word-wrap: break-word;
+  background-color: #ffffff;
+
+  &.fullHeight {
+    height: calc(100% - #{2*$marginCard})
+  }
+
+  &.noPaddingHeight {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  &.noPaddingWidth {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &.noPadding {
+    padding: 0
+  }
+
+  &.noMargin {
+    margin: 0;
+
+    &.fullHeight {
+      height: 100%
+    }
+  }
+
+  .content {
+    font-size: $fontSizeBase;
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  .title {
+    padding: 0;
+  }
+
+  @include design($material) {
+    border-radius: 2px;
+    box-shadow: $boxShadowMaterial;
+
+    .content {
+      color: #000000;
+      color: rgba(0, 0, 0, 0.54);
+    }
+
+    .title {
+      margin: 8px 0 12px 0;
+      font-size: 24px;
+    }
+  }
+
+  @include design($flat) {
+    border-radius: 8px;
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 12%);
+
+    .content {
+      color: #030303;
+    }
+
+    .title {
+      margin: 4px 0 8px 0;
+      font-size: 20px;
+    }
+  }
+}

package/src/Components/Clickable/Clickable.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react';
+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';
+
+type OnClickListener<Data> = OptionalListener<'onClick', Data>;
+type OnMouseDownListener<Data> = OptionalListener<'onMouseDown', Data>;
+type OnMouseUpListener<Data> = OptionalListener<'onMouseUp', Data>;
+type OnMouseMoveListener<Data> = OptionalListener<'onMouseMove', Data>;
+
+export type ClickableProps<
+    OnClickData,
+    OnMouseDownData,
+    OnMouseMoveData,
+    OnMouseUpData,
+    OnClickCaptureData,
+    HrefType extends string | undefined
+> = RbmComponentProps<
+    {
+        interactable?: boolean;
+        href?: HrefType;
+        preventDefault?: boolean;
+        stopPropagation?: boolean;
+    } & OnClickListener<OnClickData> &
+        OnMouseDownListener<OnMouseDownData> &
+        OnMouseMoveListener<OnMouseMoveData> &
+        OnMouseUpListener<OnMouseUpData> &
+        OptionalListener<'onClickCapture', OnClickCaptureData>
+>;
+
+function Clickable<
+    OnClickData,
+    OnMouseDownData,
+    OnMouseMoveData,
+    OnMouseUpData,
+    OnClickCaptureData,
+    HrefType extends string | undefined
+>(
+    {
+        className,
+        children,
+        style,
+        href,
+        interactable = true,
+        preventDefault = true,
+        stopPropagation = true,
+        ...clickData
+    }: ClickableProps<OnClickData, OnMouseDownData, OnMouseMoveData, OnMouseUpData, OnClickCaptureData, HrefType>,
+    ref: ForwardedRef<HrefType extends string ? HTMLAnchorElement : HTMLSpanElement>
+) {
+    // Variables
+
+    // States
+
+    // Refs
+
+    // Callbacks
+    const onClickInner = useListener<'onClick', OnClickData>('onClick', clickData);
+    const realOnClick = useCallback(
+        (e: MouseEvent) => {
+            if (clickData.onClick) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onClickInner(e);
+            }
+        },
+        [clickData.onClick, onClickInner, preventDefault, stopPropagation]
+    );
+
+    const onMouseDownInner = useListener<'onMouseDown', OnMouseDownData>('onMouseDown', clickData);
+    const realOnMouseDown = useCallback(
+        (e: MouseEvent) => {
+            if (clickData.onMouseDown) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onMouseDownInner(e);
+            }
+        },
+        [clickData.onMouseDown, onMouseDownInner, preventDefault, stopPropagation]
+    );
+
+    const onMouseMoveInner = useListener<'onMouseMove', OnMouseMoveData>('onMouseMove', clickData);
+    const realOnMouseMove = useCallback(
+        (e: MouseEvent) => {
+            if (clickData.onMouseMove) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onMouseMoveInner(e);
+            }
+        },
+        [clickData.onMouseMove, onMouseMoveInner, preventDefault, stopPropagation]
+    );
+
+    const onMouseUpInner = useListener<'onMouseUp', OnMouseUpData>('onMouseUp', clickData);
+    const realOnMouseUp = useCallback(
+        (e: MouseEvent) => {
+            if (clickData.onMouseUp) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onMouseUpInner(e);
+            }
+        },
+        [clickData.onMouseUp, onMouseUpInner, preventDefault, stopPropagation]
+    );
+
+    const onClickCaptureInner = useListener<'onClickCapture', OnClickCaptureData>('onClickCapture', clickData);
+    const realOnClickCaptureInner = useCallback(
+        (e: MouseEvent) => {
+            if (clickData.onClickCapture) {
+                if (stopPropagation) {
+                    e.stopPropagation();
+                }
+                if (preventDefault) {
+                    e.preventDefault();
+                }
+                onClickCaptureInner(e);
+            }
+        },
+        [clickData.onClickCapture, onClickCaptureInner, preventDefault, stopPropagation]
+    );
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    const props = {
+        style,
+        role: interactable ? 'button' : undefined,
+        'aria-hidden': interactable ? undefined : true,
+        className: classNames(styles.clickable, className),
+        onClick: realOnClick,
+        onMouseDown: realOnMouseDown,
+        onMouseMove: realOnMouseMove,
+        onMouseUp: realOnMouseUp,
+        onClickCapture: realOnClickCaptureInner,
+        tabIndex: interactable ? 0 : undefined,
+    };
+    if (typeof href === 'string') {
+        return (
+            <a {...props} href={href} ref={ref as ForwardedRef<HTMLAnchorElement>}>
+                {children}
+            </a>
+        );
+    }
+    return (
+        <span {...props} ref={ref as ForwardedRef<HTMLSpanElement>}>
+            {children}
+        </span>
+    );
+}
+
+const ClickableMemo = withForwardRef(Clickable, styles);
+export { ClickableMemo as Clickable };

package/src/Components/Clickable/clickable.scss

@@ -0,0 +1,3 @@
+.clickable {
+  cursor: pointer;
+}

package/src/Components/Dialog/AlertDialog.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import { withMemo } from '../../helper/withMemo';
+import { ButtonDialog } from './ButtonDialog';
+
+export type AlertDialogProps = {
+    title?: string;
+    message: string;
+    close: () => void;
+    confirmText?: string;
+};
+
+function AlertDialog({ title, message, close, confirmText = 'OK' }: AlertDialogProps) {
+    // Variables
+    const buttons = useMemo(
+        () => [
+            {
+                text: confirmText,
+                callback: () => close(),
+            },
+        ],
+        [close, confirmText]
+    );
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return <ButtonDialog message={message} buttons={buttons} title={title} />;
+}
+
+// Need AlertDialogMemo for autocompletion of phpstorm
+const AlertDialogMemo = withMemo(AlertDialog);
+export { AlertDialogMemo as AlertDialog };

package/src/Components/Dialog/ButtonDialog.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { withMemo } from '../../helper/withMemo';
+import { Block } from '../Layout/Block';
+import { Text } from '../Text/Text';
+import { Clickable } from '../Clickable/Clickable';
+
+import styles from './buttonDialog.scss';
+import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
+import classNames from 'classnames';
+
+export type ButtonDialogProps = RbmComponentProps<
+    { title?: string; message: string; buttons: { text: string; callback: () => void }[] },
+    WithNoChildren
+>;
+
+function ButtonDialog({ title, message, buttons, style, className }: ButtonDialogProps) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <Block className={classNames(styles.buttonDialog, className)} style={style}>
+            {!!title && (
+                <Block className={styles.title}>
+                    <Text>{title}</Text>
+                </Block>
+            )}
+            <Block className={styles.message}>
+                <Text>{message}</Text>
+            </Block>
+            <Block className={styles.buttonContainer}>
+                {buttons.map((b, i) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <Clickable onClick={b.callback} className={styles.button} key={i + b.text}>
+                        <Text>{b.text}</Text>
+                    </Clickable>
+                ))}
+            </Block>
+        </Block>
+    );
+}
+
+// Need ButtonDialogMemo for autocompletion of phpstorm
+const ButtonDialogMemo = withMemo(ButtonDialog, styles);
+export { ButtonDialogMemo as ButtonDialog };

package/src/Components/Dialog/ConfirmDialog.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useMemo } from 'react';
+import { withMemo } from '../../helper/withMemo';
+import { ButtonDialog } from './ButtonDialog';
+
+export type ConfirmDialogProps = {
+    title?: string;
+    message: string;
+    close: (confirmed: boolean) => void;
+    cancelText?: string;
+    confirmText?: string;
+};
+
+function ConfirmDialog({ title, message, close, cancelText = 'Cancel', confirmText = 'OK' }: ConfirmDialogProps) {
+    // Variables
+    const buttons = useMemo(
+        () => [
+            {
+                text: confirmText,
+                callback: () => close(true),
+            },
+            { text: cancelText, callback: () => close(false) },
+        ],
+        [cancelText, close, confirmText]
+    );
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return <ButtonDialog message={message} buttons={buttons} title={title} />;
+}
+
+// Need ConfirmDialogMemo for autocompletion of phpstorm
+const ConfirmDialogMemo = withMemo(ConfirmDialog);
+export { ConfirmDialogMemo as ConfirmDialog };

package/src/Components/Dialog/Dialog.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import styles from './dialog.scss';
+import { RbmComponentProps } from '../RbmComponentProps';
+import { withMemo } from '../../helper/withMemo';
+import { InlineBlock } from '../Layout/InlineBlock';
+import { Block } from '../Layout/Block';
+import { ReactElement, useCallback, useState } from 'react';
+import { Clickable } from '../Clickable/Clickable';
+
+export type DialogProps<ReturnData> = RbmComponentProps<
+    {
+        closable?: boolean;
+        onClose?: (data?: ReturnData, identifier?: number) => void;
+        identifier?: number;
+    },
+    {
+        children: ReactElement<Record<string, any> & { close?: (data?: ReturnData) => void }> | string | number;
+    }
+>;
+
+function Dialog<ReturnData>({
+    style,
+    children,
+    className,
+    closable = true,
+    onClose,
+    identifier,
+}: DialogProps<ReturnData>) {
+    // Variables
+    const [isClosed, setIsClosed] = useState(false);
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+    const close = useCallback(
+        (data?: ReturnData) => {
+            setIsClosed(true);
+            onClose?.(data, identifier);
+        },
+        [identifier, onClose]
+    );
+
+    const onCurtainClick = useCallback(() => {
+        if (!closable) {
+            return;
+        }
+        close();
+    }, [closable, close]);
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    if (isClosed) {
+        return null;
+    }
+
+    return (
+        <Block className={classNames(styles.dialogContainer, className)} __allowChildren="all" style={style}>
+            <Clickable onClick={onCurtainClick} className={styles.closeCurtain} interactable={closable} />
+            <InlineBlock __allowChildren="all" className={styles.dialog}>
+                {React.Children.map(children, (child) => {
+                    if (React.isValidElement(child)) {
+                        return React.cloneElement(child, { close });
+                    }
+                    return child;
+                })}
+            </InlineBlock>
+        </Block>
+    );
+}
+
+// Need Dialog Memo for autocompletion of phpstorm
+const DialogMemo = withMemo(Dialog, styles);
+export { DialogMemo as Dialog };