@ainias42/react-bootstrap-mobile 0.1.7

package/src/Components/Table/Table.tsx

@@ -0,0 +1,182 @@
+import * as React from 'react';
+import {
+    Cell,
+    Column as RTColumn,
+    HeaderGroup,
+    PluginHook,
+    Row,
+    TableOptions,
+    useSortBy,
+    UseSortByOptions,
+    useTable,
+} from 'react-table';
+import { RbmComponentProps } from '../RbmComponentProps';
+import { ReactNode } from 'react';
+import { withMemo } from '../../helper/withMemo';
+
+export type ColumnCellData<DataType extends string | number | Record<string, unknown>> = {
+    value: DataType;
+    cell: {
+        column: {
+            id: string;
+        };
+        row: {
+            original: Record<string, DataType>;
+            index: number;
+            id: string;
+        };
+    };
+};
+
+export type Column<DataType extends string | number | Record<string, unknown>> = RTColumn<Record<string, DataType>> & {
+    Cell?: (cellData: ColumnCellData<DataType>) => ReactNode;
+};
+
+export type TableSortOptions<DataType extends string | number | Record<string, unknown>> = UseSortByOptions<
+    Record<string, DataType>
+> & {
+    renderSortIndicator?: (column: HeaderGroup<Record<string, DataType>>) => ReactNode;
+};
+
+export type TableProps<DataType extends string | number | Record<string, unknown>> = RbmComponentProps<{
+    columns: Column<DataType>[];
+    data: Record<string, DataType>[];
+    cellRenderer?: ({ value }: { value: DataType }) => ReactNode;
+    sortOptions?: TableSortOptions<DataType>;
+    getCellProperties?: (row: Cell<Record<string, DataType>>) => React.TdHTMLAttributes<HTMLTableDataCellElement>;
+    getRowProperties?: (row: Row<Record<string, DataType>>) => React.HTMLAttributes<HTMLTableRowElement>;
+}>;
+
+const defaultPropertiesGetter = () => ({});
+
+function Table<DataType extends string | number | Record<string, unknown>>({
+    columns,
+    data,
+    cellRenderer,
+    sortOptions,
+    className,
+    style,
+    getCellProperties = defaultPropertiesGetter,
+    getRowProperties = defaultPropertiesGetter,
+}: TableProps<DataType>) {
+    // Variables
+
+    if (cellRenderer) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        columns.forEach((c) => (c.Cell = c.Cell ?? cellRenderer));
+    }
+
+    columns.forEach((c) => {
+        if (!('width' in c)) {
+            c.width = 0;
+        }
+    });
+
+    let tableOptions: TableOptions<Record<string, DataType>> = {
+        columns,
+        data,
+    };
+
+    const plugins: PluginHook<Record<string, DataType>>[] = [];
+
+    if (sortOptions) {
+        tableOptions = {
+            autoResetSortBy: false,
+            ...sortOptions,
+            ...tableOptions,
+        };
+        plugins.push(useSortBy);
+    }
+
+    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable<Record<string, DataType>>(
+        tableOptions,
+        ...plugins
+    );
+
+    // States
+
+    // Refs
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    const renderSorting = (column: HeaderGroup<Record<string, DataType>>) => {
+        if (sortOptions?.renderSortIndicator) {
+            return sortOptions.renderSortIndicator(column);
+        }
+        if (column.isSorted) return <span>{column.isSortedDesc ? ' ↓' : ' ↑'}</span>;
+        return null;
+    };
+
+    return (
+        // apply the table props
+        <table className={className} {...getTableProps()} style={style}>
+            <thead>
+                {
+                    // Loop over the header rows
+                    headerGroups.map((headerGroup) => (
+                        // Apply the header row props
+                        <tr {...headerGroup.getHeaderGroupProps()}>
+                            {
+                                // Loop over the headers in each row
+                                headerGroup.headers.map((column) => (
+                                    // Apply the header cell props
+                                    <th
+                                        {...column.getHeaderProps(
+                                            sortOptions ? column.getSortByToggleProps() : undefined
+                                        )}
+                                    >
+                                        {
+                                            // Render the header
+                                            column.render('Header')
+                                        }
+                                        {renderSorting(column)}
+                                    </th>
+                                ))
+                            }
+                        </tr>
+                    ))
+                }
+            </thead>
+            {/* Apply the table body props */}
+            <tbody {...getTableBodyProps()}>
+                {
+                    // Loop over the table rows
+                    rows.map((row) => {
+                        // Prepare the row for display
+                        prepareRow(row);
+                        return (
+                            // Apply the row props
+                            <tr {...row.getRowProps(getRowProperties(row))}>
+                                {
+                                    // Loop over the rows cells
+                                    row.cells.map((cell) => {
+                                        const width = cell.column.width || undefined;
+
+                                        // Apply the cell props
+                                        return (
+                                            <td {...cell.getCellProps(getCellProperties(cell))} width={width}>
+                                                {
+                                                    // Render the cell contents
+                                                    cell.render('Cell')
+                                                }
+                                            </td>
+                                        );
+                                    })
+                                }
+                            </tr>
+                        );
+                    })
+                }
+            </tbody>
+        </table>
+    );
+}
+
+const tmp = withMemo(Table);
+export { tmp as Table };

package/src/Components/Text/Heading.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { withMemo } from '../../helper/withMemo';
+import { Text, TEXT_PRIO, TEXT_SIZE } from './Text';
+import { RbmComponentProps, WithStringProps } from '../RbmComponentProps';
+
+import styles from './heading.scss';
+import classNames from 'classnames';
+import { EmptyProps } from '../../helper/EmptyProps';
+
+export type HeadingProps = RbmComponentProps<EmptyProps, WithStringProps>;
+
+function Heading({ children, className, style }: HeadingProps) {
+    // Variables
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <Text
+            as="h1"
+            size={TEXT_SIZE.xxLarge}
+            prio={TEXT_PRIO.heading}
+            className={classNames(styles.heading, className)}
+            style={style}
+        >
+            {children}
+        </Text>
+    );
+}
+
+// Need HeadingMemo for autocompletion of phpstorm
+const HeadingMemo = withMemo(Heading, styles, 'text');
+export { HeadingMemo as Heading };

package/src/Components/Text/Text.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import styles from './text.scss';
+import { Recursive, ValueOf } from '../../TypeHelpers';
+import { WrongChildError } from '../../WrongChildError';
+import withStyles from 'isomorphic-style-loader/withStyles';
+import { Inline } from '../Layout/Inline';
+import { ViewProps } from '../Layout/View';
+
+export const TEXT_PRIO = {
+    primary: styles.primary,
+    secondary: styles.secondary,
+    heading: styles.heading,
+};
+
+export const TEXT_SIZE = {
+    xSmall: styles.xsmall,
+    small: styles.small,
+    medium: styles.medium,
+    large: styles.large,
+    xLarge: styles.xlarge,
+    xxLarge: styles.xxlarge,
+};
+
+export type TextProps<AsType extends keyof JSX.IntrinsicElements> = {
+    block?: boolean;
+    prio?: ValueOf<typeof TEXT_PRIO>;
+    size?: ValueOf<typeof TEXT_SIZE>;
+    className?: string;
+    children: Recursive<string | undefined | null | number>;
+} & ViewProps<AsType>;
+
+function Text<AsType extends keyof JSX.IntrinsicElements = 'span'>({
+    className,
+    children,
+    block = false,
+    prio,
+    size = TEXT_SIZE.medium,
+    as = 'span' as AsType,
+    ...props
+}: TextProps<AsType>) {
+    // Variables
+    prio = prio ?? styles.primaryDefault;
+
+    // States
+
+    // Refs
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+    React.Children.forEach(children, (child) => {
+        const type = typeof child;
+        if (
+            (type !== 'string' && type !== 'undefined' && type !== 'object' && type !== 'number') ||
+            (type === 'object' && child !== null)
+        ) {
+            throw new WrongChildError('string, number, undefined, null', type, child, 'Text');
+        }
+    });
+
+    // Render Functions
+    return (
+        <Inline
+            __allowChildren="text"
+            as={as}
+            {...props}
+            className={classNames(styles.text, { [styles.block]: block }, prio, size, className)}
+        >
+            {children}
+        </Inline>
+    );
+}
+
+const tmp = React.memo(withStyles(styles)(Text)) as typeof Text;
+export { tmp as Text };

package/src/Components/Text/heading.scss

@@ -0,0 +1,3 @@
+.heading {
+  display: block;
+}

package/src/Components/Text/text.scss

@@ -0,0 +1,60 @@
+$primaryColor: #000000;
+$secondaryColor: #717171;
+
+:root {
+  --text-primary-default-color: $primaryColor;
+}
+
+.text {
+  display: inline;
+
+  &.block {
+    display: block;
+  }
+
+  &.heading {
+    font-weight: bold;
+  }
+
+  &.primaryDefault {
+    color: var(--text-primary-default-color)
+  }
+
+  &.primary {
+    color: $primaryColor
+  }
+
+  &.secondary {
+    color: $secondaryColor;
+  }
+
+  &.xsmall {
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  &.small {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  &.medium {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  &.large {
+    font-size: 1.125rem;
+    line-height: 1.75;
+  }
+
+  &.xlarge {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  &.xxlarge {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}

package/src/Components/Toast/Toast.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { RbmComponentProps, WithNoStringAndChildrenProps } from '../RbmComponentProps';
+import { Clickable } from '../Clickable/Clickable';
+import { ReactNode, useCallback, useEffect, useState } from 'react';
+import { Listener, OptionalListener, useListener } from '../Hooks/useListener';
+
+import styles from './toast.scss';
+import { withMemo } from '../../helper/withMemo';
+import classNames from 'classnames';
+
+type WithoutActionProps<DismissedData> = {
+    timeToShow?: number;
+} & OptionalListener<'onDismissed', DismissedData>;
+type WithActionProps<ActionData, DismissedData> = WithoutActionProps<DismissedData> & {
+    actionName: string;
+} & Listener<'onClick', ActionData>;
+
+export type ToastProps<ActionData, DismissedData> = RbmComponentProps<
+    WithActionProps<ActionData, DismissedData> | WithoutActionProps<DismissedData>,
+    WithNoStringAndChildrenProps
+>;
+
+function Toast<ActionData, DismissedData>({
+    className,
+    timeToShow = 0,
+    children,
+    style,
+    ...otherProps
+}: ToastProps<ActionData, DismissedData>) {
+    // Variables
+
+    const ANIMATION_DURATION = 250;
+
+    // States
+    const [hidingStart, setHidingStart] = useState<number>(0);
+    const [startShow] = useState(new Date().getTime());
+    const isHidden = hidingStart > 0 && ANIMATION_DURATION + hidingStart < new Date().getTime();
+
+    // Refs
+
+    // Callbacks
+    const updateHidingStart = useCallback(() => {
+        setHidingStart((oldHidingStart) => (oldHidingStart > 0 ? oldHidingStart : new Date().getTime()));
+    }, [setHidingStart]);
+
+    const onDismissed = useListener('onDismissed', otherProps);
+
+    // Effects
+    useEffect(() => {
+        if (timeToShow > 0) {
+            const diff = timeToShow + startShow - new Date().getTime();
+            const timeout = setTimeout(updateHidingStart, diff);
+            return () => {
+                if (timeout) {
+                    clearTimeout(timeout);
+                }
+            };
+        }
+        return undefined;
+    }, [timeToShow, updateHidingStart, startShow]);
+
+    useEffect(() => {
+        if (hidingStart > 0) {
+            const diff = hidingStart + ANIMATION_DURATION - new Date().getTime();
+            if (diff > 0) {
+                const timeout = setTimeout(() => onDismissed, diff);
+                return () => {
+                    if (timeout) {
+                        clearTimeout(timeout);
+                    }
+                };
+            }
+        }
+        return undefined;
+    }, [hidingStart, onDismissed, otherProps]);
+
+    // Other
+
+    // Render Functions
+    if (isHidden) {
+        return null;
+    }
+
+    let actionElement: ReactNode = null;
+    if ('onClick' in otherProps) {
+        actionElement = (
+            <Clickable className={styles.action} {...otherProps} __allowChildren="all">
+                {otherProps.actionName}
+            </Clickable>
+        );
+    }
+
+    return (
+        <Clickable
+            style={style}
+            className={classNames(styles.toast, { [styles.hiding]: hidingStart > 0 }, className)}
+            onClick={updateHidingStart}
+            __allowChildren="all"
+        >
+            <span>{children}</span>
+            {actionElement}
+        </Clickable>
+    );
+}
+
+const ToastMemo = withMemo(Toast, styles, 'text');
+export { ToastMemo as Toast };

package/src/Components/Toast/ToastContainer.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../RbmComponentProps';
+import { Container } from '../Layout/Container';
+
+import styles from './toast.scss';
+import classNames from 'classnames';
+import { withMemo } from '../../helper/withMemo';
+import { EmptyProps } from '../../helper/EmptyProps';
+
+export type ToastContainerProps = RbmComponentProps<EmptyProps>;
+
+function ToastContainer({ className, children, style }: ToastContainerProps) {
+    // Variables
+
+    // States
+
+    // Refs
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <Container className={classNames(styles.toastContainer, className)} fluid __allowChildren="all" style={style}>
+            {children}
+        </Container>
+    );
+}
+
+const ToastContainerMemo = withMemo(ToastContainer, styles);
+export { ToastContainerMemo as ToastContainer };

package/src/Components/Toast/toast.scss

@@ -0,0 +1,52 @@
+@import "../../scss/variables";
+@import "../../scss/designMixin";
+
+.toastContainer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 3rem;
+  margin: auto;
+  max-width: map-get($grid-breakpoints, "sm");
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.toast {
+  background-color: rgba(0, 0, 0, 0.8);
+  min-height: 48px;
+  line-height: 1.5;
+  color: white;
+  font-size: 0.77rem;
+  letter-spacing: normal;
+  transition-duration: 0.25s;
+  margin: 8px;
+
+  &.hiding {
+    opacity: 0;
+  }
+
+  @include design($material) {
+    padding: 16px 24px;
+  }
+
+  @include design($flat) {
+    border-radius: 0.5rem;
+    padding: 16px;
+  }
+
+  .action {
+    text-transform: uppercase;
+    margin-left: 24px;
+
+    @include design($material) {
+      color: #bbdefb
+    }
+    @include design($flat) {
+      color: #ffffff;
+    }
+  }
+
+}

package/src/Components/TopBar/MoreButton.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../RbmComponentProps';
+import { TopBarButton } from './TopBarButton';
+import { Icon } from '../Icon/Icon';
+import { faEllipsisH, faEllipsisV } from '@fortawesome/free-solid-svg-icons';
+
+import { withMemo } from '../../helper/withMemo';
+
+export type MoreButtonProps = RbmComponentProps<{
+    disabled?: boolean;
+    onClick?: () => void;
+}>;
+
+function MoreButton({ onClick, disabled, className, style }: MoreButtonProps) {
+    // Variables
+
+    // States
+
+    // Refs
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <TopBarButton onClick={onClick} disabled={disabled} className={className} style={style}>
+            <Icon icon={faEllipsisH} className="material-hidden" />
+            <Icon icon={faEllipsisV} className="flat-hidden" />
+        </TopBarButton>
+    );
+}
+
+const MoreButtonMemo = withMemo(MoreButton);
+export { MoreButtonMemo as MoreButton };