@ainias42/react-bootstrap-mobile 0.1.7

package/src/Components/Menu/useMenu.ts

@@ -0,0 +1,20 @@
+import { useCallback, useState, MouseEvent } from 'react';
+import { MenuProps } from './Menu';
+
+export function useMenu() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const open = useCallback((e: MouseEvent) => {
+        setPosition({ x: e.clientX, y: e.clientY });
+        setIsOpen(true);
+    }, []);
+
+    const props: Omit<MenuProps, 'items'> = {
+        isOpen,
+        x: position.x,
+        y: position.y,
+        onClose: useCallback(() => setIsOpen(false), []),
+    };
+
+    return [open, props] as const;
+}

package/src/Components/RbmComponentProps.ts

@@ -0,0 +1,40 @@
+import { CSSProperties, ReactNode } from 'react';
+import { Recursive } from '../TypeHelpers';
+
+type Child = Recursive<JSX.Element | undefined | null | Child[]> | false;
+export type WithNoStringProps =
+    | {
+          children?: Child;
+          __allowChildren?: 'html';
+      }
+    | {
+          children?: ReactNode;
+          __allowChildren: 'text' | 'all';
+      };
+
+export type WithNoStringAndChildrenProps =
+    | {
+          children: Child;
+          __allowChildren?: 'html';
+      }
+    | {
+          children: ReactNode;
+          __allowChildren: 'text' | 'all';
+      };
+
+export type WithStringProps = {
+    children?: Recursive<string>;
+};
+
+export type WithStringAndChildrenProps = {
+    children: Recursive<string>;
+};
+
+export type WithNoChildren = {
+    children?: never;
+};
+
+export type RbmComponentProps<SpecialProps, ChildrenProps = WithNoStringProps> = ChildrenProps & {
+    className?: string;
+    style?: CSSProperties;
+} & SpecialProps;

package/src/Components/SizeCalculator/SizeCalculator.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { withMemo } from '../../helper/withMemo';
+import { WithNoStringAndChildrenProps } from '../RbmComponentProps';
+import { InlineBlock } from '../Layout/InlineBlock';
+import { useEffect, useRef } from 'react';
+
+export type SizeCalculatorProps = {
+    onSize: (width: number, height: number) => void;
+    absolute?: boolean;
+} & WithNoStringAndChildrenProps;
+
+function SizeCalculator({ onSize, children, absolute = false }: SizeCalculatorProps) {
+    // Variables
+
+    // Refs
+    const ref = useRef<HTMLSpanElement>(null);
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+    useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        onSize(ref.current.clientWidth, ref.current.clientHeight);
+    }, [onSize]);
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <InlineBlock ref={ref} __allowChildren="all" style={{ position: absolute ? 'absolute' : 'static' }}>
+            {children}
+        </InlineBlock>
+    );
+}
+
+// Need SizeCalculatorMemo for autocompletion of phpstorm
+const SizeCalculatorMemo = withMemo(SizeCalculator);
+export { SizeCalculatorMemo as SizeCalculator };

package/src/Components/SpoilerList/Spoiler/Spoiler.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { withMemo } from '../../../helper/withMemo';
+import { RbmComponentProps } from '../../RbmComponentProps';
+import { ReactChild, useCallback, useEffect, useRef, useState } from 'react';
+import { Flex } from '../../Layout/Flex';
+import { Grow } from '../../Layout/Grow';
+import { Text, TEXT_SIZE } from '../../Text/Text';
+import { Block } from '../../Layout/Block';
+import { Clickable } from '../../Clickable/Clickable';
+
+import styles from './spoiler.scss';
+import classNames from 'classnames';
+import { OptionalListener, useListener } from '../../Hooks/useListener';
+import { Icon } from '../../Icon/Icon';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+export type SpoilerProps<OnClickData> = RbmComponentProps<
+    {
+        title: ReactChild;
+        initialOpen?: boolean;
+        open?: boolean;
+        noClosingAnimation?: boolean;
+        openIcon?: IconProp | null;
+        closeIcon?: IconProp | null;
+    } & OptionalListener<'onClick', OnClickData>
+>;
+
+function Spoiler<OnClickData>({
+    title,
+    children,
+    initialOpen = false,
+    noClosingAnimation = false,
+    openIcon = faChevronDown,
+    closeIcon = faChevronUp,
+    className,
+    style,
+    open,
+    ...listenerProps
+}: SpoilerProps<OnClickData>) {
+    // Variables
+
+    // Refs
+
+    // States
+    const [isOpen, setIsOpen] = useState(open ?? initialOpen);
+    const [isInitialValue, setIsInitialValue] = useState(true);
+    const savedOpen = useRef(open);
+
+    // Selectors
+
+    // Callbacks
+    const onClickListener = useListener<'onClick', OnClickData, boolean>('onClick', listenerProps);
+
+    const toggleOpen = useCallback(() => {
+        if (open !== undefined) {
+            onClickListener?.(!open);
+        } else {
+            setIsInitialValue(false);
+            setIsOpen((old) => {
+                onClickListener?.(!old);
+                return !old;
+            });
+        }
+    }, [onClickListener, open]);
+
+    // Effects
+    useEffect(() => {
+        if (savedOpen.current !== open) {
+            setIsInitialValue(false);
+        }
+    }, [open]);
+
+    // Other
+    const titleComponent =
+        typeof title === 'string' || typeof title === 'number' ? <Text size={TEXT_SIZE.large}>{title}</Text> : title;
+
+    // Render Functions
+    const icon = open ?? isOpen ? closeIcon : openIcon;
+
+    return (
+        <Clickable
+            onClick={toggleOpen}
+            className={classNames(className, styles.spoiler, {
+                [styles.open]: open ?? isOpen,
+                [styles.noAnimation]: isInitialValue,
+                [styles.noClosingAnimation]: noClosingAnimation,
+            })}
+            style={style}
+        >
+            <Flex horizontal={true}>
+                <Grow>{titleComponent}</Grow>
+                {icon ? <Icon icon={icon} className={styles.icon} /> : null}
+            </Flex>
+            <Block className={styles.bodyContainer}>
+                <Block __allowChildren="all" className={styles.body}>
+                    {children}
+                </Block>
+            </Block>
+        </Clickable>
+    );
+}
+
+// Need SpoilerMemo for autocompletion of phpstorm
+const SpoilerMemo = withMemo(Spoiler, styles);
+export { SpoilerMemo as Spoiler };

package/src/Components/SpoilerList/Spoiler/spoiler.scss

@@ -0,0 +1,120 @@
+@keyframes spoilerContainerOpen {
+  0% {
+    height: 0;
+  }
+  1% {
+    height: initial;
+  }
+  100% {
+    height: initial;
+  }
+}
+
+@keyframes spoilerOpen {
+  0% {
+    height: 0;
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  1% {
+    height: initial;
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  100% {
+    height: initial;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes spoilerContainerClose {
+  0% {
+    height: initial;
+  }
+  99% {
+    height: initial;
+  }
+  100% {
+    height: 0;
+  }
+}
+
+@keyframes spoilerClose {
+  0% {
+    height: initial;
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  99% {
+    height: initial;
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  100% {
+    height: 0;
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+.spoiler {
+  display: block;
+  border-top: 1px solid var(--border-strong);
+  border-bottom: 1px solid var(--border-strong);
+
+  .icon {
+    margin-right: 0.5rem;
+  }
+
+  &.open, &.open.noClosingAnimation {
+    .bodyContainer {
+      height: initial;
+      animation-name: spoilerContainerOpen;
+
+      .body {
+        height: initial;
+        transform: translateY(0%);
+        animation-name: spoilerOpen;
+      }
+    }
+  }
+
+  &.noAnimation, &.noAnimation.open {
+    .bodyContainer {
+      animation: none;
+
+      .body {
+        animation: none;
+      }
+    }
+  }
+
+  &.noClosingAnimation {
+    .bodyContainer {
+      animation-name: none;
+
+      .body {
+        animation-name: none;
+      }
+    }
+  }
+
+  .bodyContainer {
+    height: 0;
+    overflow: hidden;
+    animation-name: spoilerContainerClose;
+    animation-duration: 0.7s;
+    animation-fill-mode: forwards;
+
+    .body {
+      height: 0;
+      overflow: hidden;
+      transform-origin: left top;
+      transform: translateY(-100%);
+      animation-name: spoilerClose;
+      animation-duration: 0.7s;
+      animation-fill-mode: forwards;
+    }
+  }
+}

package/src/Components/SpoilerList/SpoilerList.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { withMemo } from '../../helper/withMemo';
+import { ReactElement } from 'react';
+import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
+import { Block } from '../Layout/Block';
+import classNames from 'classnames';
+import { Spoiler } from './Spoiler/Spoiler';
+import { useSpoilerGroup } from './useSpoilerGroup';
+
+export type SpoilerItem<BodyData, TitleData = string> = {
+    title: TitleData;
+    body: BodyData;
+    key: number | string;
+};
+
+export type SpoilerListProps<BodyData, TitleData = string> = RbmComponentProps<
+    {
+        data: SpoilerItem<BodyData, TitleData>[];
+        renderBody: (item: SpoilerItem<BodyData, TitleData>) => ReactElement;
+        renderTitle?: (item: SpoilerItem<BodyData, TitleData>) => ReactElement | string;
+    },
+    WithNoChildren
+>;
+
+const stringIdentity = (data: any) => data as string;
+
+function SpoilerList<BodyData, TitleData = string>({
+    data,
+    renderBody,
+    renderTitle = stringIdentity,
+    className,
+    style,
+}: SpoilerListProps<BodyData, TitleData>) {
+    // Variables
+    const [propsGenerator] = useSpoilerGroup();
+
+    // Refs
+
+    // States
+
+    // Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    return (
+        <Block className={classNames(className)} style={style}>
+            {data.map((item) => (
+                <Spoiler title={renderTitle(item)} {...propsGenerator(item.key)}>
+                    {renderBody(item)}
+                </Spoiler>
+            ))}
+        </Block>
+    );
+}
+
+// Need SpoilerListMemo for autocompletion of phpstorm
+const SpoilerListMemo = withMemo(SpoilerList);
+export { SpoilerListMemo as SpoilerList };

package/src/Components/SpoilerList/useSpoilerGroup.ts

@@ -0,0 +1,39 @@
+import { useCallback, useState } from 'react';
+
+export type SpoilerGroupOptions = {
+    closeWithClick: boolean;
+    noClosingAnimation: boolean;
+};
+
+export function useSpoilerGroup(defaultKey?: number | string, options: Partial<SpoilerGroupOptions> = {}) {
+    const [openKey, setOpenKey] = useState<number | string | undefined>(defaultKey);
+
+    const onClick = useCallback(
+        (isOpen: boolean, key: string | number) => {
+            setOpenKey((oldKey) => {
+                if (options?.closeWithClick && oldKey === key && !isOpen) {
+                    return undefined;
+                }
+                if (isOpen) {
+                    return key;
+                }
+                return oldKey;
+            });
+        },
+        [options?.closeWithClick]
+    );
+
+    const createProps = useCallback(
+        (key: string | number) => ({
+            onClick,
+            onClickData: key,
+            key,
+            open: key === openKey,
+            noClosingAnimation: options?.noClosingAnimation !== false,
+            closeIcon: null,
+        }),
+        [onClick, openKey, options?.noClosingAnimation]
+    );
+
+    return [createProps, openKey] as const;
+}

package/src/Components/TabBar/TabBar.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../RbmComponentProps';
+import { Icon, IconSource } from '../Icon/Icon';
+import { ComponentType, useCallback, useState } from 'react';
+import { Container } from '../Layout/Container';
+import { TabBarButton } from './TabBarButton';
+
+import styles from './tabBar.scss';
+import { withMemo } from '../../helper/withMemo';
+import classNames from 'classnames';
+import { ListenerWithData } from '../Hooks/useListener';
+import { Inline } from '../Layout/Inline';
+import { Text } from '../Text/Text';
+
+export type TabBarComponentButtonType = {
+    component: ComponentType<Record<string, any>>;
+    key?: string;
+};
+
+export type TabBarTitleButtonType = {
+    title: string;
+    icon?: IconSource;
+    key?: string;
+};
+
+export type TabBarIconButtonType = {
+    title?: string;
+    icon: IconSource;
+    key?: string;
+};
+
+export type TabBarButtonType = TabBarComponentButtonType | TabBarTitleButtonType | TabBarIconButtonType;
+
+export type TabBarProps = RbmComponentProps<{
+    buttons: TabBarButtonType[];
+    startActiveTab?: number;
+    onTabChange: (newActiveTab: number) => void;
+    activeTab?: number;
+    transparent?: boolean;
+    drawBehind?: boolean;
+    underline?: boolean;
+}>;
+
+function getButtonComponents(buttons: TabBarButtonType[], activeTab: number, onSelect: ListenerWithData<number>) {
+    return buttons.map((button, index) => {
+        const isActive = index === activeTab;
+
+        const key = button.key ?? String(index);
+        if ('component' in button) {
+            const Component = button.component;
+            return <Component key={key} active={isActive} />;
+        }
+
+        return (
+            <TabBarButton key={key} active={isActive} onClickData={index} onClick={onSelect}>
+                <Inline>
+                    {button.icon ? <Icon icon={button.icon} className={styles.buttonIcon} /> : null}
+                    {button.title ? <Text className={styles.buttonTitle}>{button.title}</Text> : null}
+                </Inline>
+            </TabBarButton>
+        );
+    });
+}
+
+function TabBar({
+    buttons,
+    startActiveTab,
+    onTabChange,
+    activeTab,
+    transparent,
+    underline,
+    className,
+    ...rbmProps
+}: TabBarProps) {
+    // States
+    const [internalActiveTab, setInternalActiveTab] = useState(startActiveTab ?? 0);
+    activeTab = activeTab ?? internalActiveTab;
+
+    // Refs
+
+    // Callbacks
+    const onSelect = useCallback(
+        (_: any, index: number) => {
+            setInternalActiveTab(index);
+            onTabChange(index);
+        },
+        [onTabChange, setInternalActiveTab]
+    );
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+    const buttonComponents = getButtonComponents(buttons, activeTab, onSelect);
+
+    return (
+        <div
+            {...rbmProps}
+            className={classNames(
+                styles.tabBar,
+                {
+                    [styles.transparent]: transparent,
+                    [styles.underlined]: underline,
+                },
+                className
+            )}
+        >
+            <Container fluid="xxl" className={styles.buttonContainer}>
+                {buttonComponents}
+            </Container>
+        </div>
+    );
+}
+
+const TabBarMemo = withMemo(TabBar, styles);
+export { TabBarMemo as TabBar };

package/src/Components/TabBar/TabBarButton.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { RbmComponentProps } from '../RbmComponentProps';
+
+import styles from './tabBar.scss';
+import { withMemo } from '../../helper/withMemo';
+import classNames from 'classnames';
+import { Listener, useListenerWithExtractedProps } from '../Hooks/useListener';
+
+export type TabBarButtonProps = RbmComponentProps<
+    {
+        active: boolean;
+    } & Listener<'onClick', number>
+>;
+
+function TabBarButton({ active, className, children, ...rbmProps }: TabBarButtonProps) {
+    // Variables
+
+    // States
+
+    // Refs
+
+    // Callbacks
+    const [onClick, otherProps] = useListenerWithExtractedProps<'onClick', number>('onClick', rbmProps);
+
+    // Effects
+
+    // Other
+
+    // Render Functions
+
+    return (
+        <a
+            {...otherProps}
+            role="button"
+            onClick={onClick}
+            className={classNames(styles.button, { [styles.buttonActive]: active, className })}
+        >
+            {children}
+        </a>
+    );
+}
+
+const TabBarButtonMemo = withMemo(TabBarButton, styles);
+export { TabBarButtonMemo as TabBarButton };

package/src/Components/TabBar/tabBar.scss

@@ -0,0 +1,108 @@
+@import "../../scss/variables";
+@import "../../scss/designMixin";
+
+.tabBar {
+  height: 60px;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+
+  .buttonContainer {
+    padding: 0;
+    display: flex;
+  }
+
+  &.underlined {
+    .buttonActive {
+      @include design($flat) {
+        border-bottom: 4px solid var(--flavor-accent);
+      }
+    }
+  }
+
+  &.transparent {
+    opacity: 0.65;
+  }
+
+  @include design($material) {
+    background-color: #ffffff;
+    box-shadow: 0 -2px 2px 0px rgb(0 0 0 / 14%), 0 -1px 5px 0px rgb(0 0 0 / 12%), 0 -1px 1px 0px rgb(0 0 0 / 20%);
+  }
+
+  @include design($flat) {
+    background-color: #fafafa;
+    border-top: 1px solid var(--border-light);
+  }
+}
+
+.button {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
+  text-decoration: none;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+
+  > span {
+    width: 100%;
+    display: inline-block;
+  }
+
+  .buttonIcon {
+    display: block;
+    font-size: 24px;
+    line-height: 26px;
+    height: 28px;
+    margin: auto;
+
+    + .buttonTitle {
+      font-size: 10px;
+      line-height: 1;
+    }
+  }
+
+  .buttonTitle {
+    display: block;
+    margin: auto;
+    font-size: 16px;
+    line-height: 49px;
+  }
+
+  @include design($flat) {
+    color: #999;
+    &.buttonActive {
+      color: var(--flavor-accent);
+    }
+  }
+
+
+  @include design($material) {
+    color: #31313a;
+    position: relative;
+    text-transform: uppercase;
+
+    &::after {
+      content: ' ';
+      display: block;
+      width: 0;
+      height: 2px;
+      bottom: 0;
+      position: absolute;
+      margin-top: -2px;
+      background-color: #31313a;
+
+    }
+    &.buttonActive {
+      &::after {
+        width: 100%;
+        transition: width 0.2s ease-in-out;
+      }
+    }
+  }
+}