@ainias42/react-bootstrap-mobile 0.2.1 → 0.2.2

package/dist/src/Components/Dialog/ButtonDialog.d.ts

@@ -1,13 +1,17 @@
 import * as React from 'react';
+import { ReactElement } from 'react';
 import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
+import { Flavor } from "../Flavor";
 export type ButtonDialogProps = RbmComponentProps<{
     title?: string;
     message: string;
     buttons: {
         text: string;
         callback: () => void;
+        flavor?: Flavor;
     }[];
+    extraContent?: ReactElement | null;
 }, WithNoChildren>;
-declare function ButtonDialog({ title, message, buttons, style, className }: ButtonDialogProps): React.JSX.Element;
+declare function ButtonDialog({ title, message, buttons, style, className, extraContent }: ButtonDialogProps): React.JSX.Element;
 declare const ButtonDialogMemo: typeof ButtonDialog;
 export { ButtonDialogMemo as ButtonDialog };

package/dist/src/Components/Flavor.d.ts

@@ -1,4 +1,6 @@
 export declare enum Flavor {
     Accent = "flavor-accent",
-    Basic = "flavor-basic"
+    Basic = "flavor-basic",
+    Destructive = "flavor-destructive",
+    Constructive = "flavor-constructive"
 }

package/dist/src/Components/Layout/Grid/Grid.d.ts

@@ -1,10 +1,8 @@
-import * as React from 'react';
 import { RbmComponentProps } from '../../RbmComponentProps';
 export type GridProps = RbmComponentProps<{
     columns?: number;
     rows?: number;
     useContainerWidth?: boolean;
 }>;
-declare function Grid({ style, children, columns, rows, useContainerWidth, className, __allowChildren }: GridProps): React.JSX.Element;
-declare const GridMemo: typeof Grid;
+declare const GridMemo: import("../../../helper/withForwardRef").RefComponent<GridProps, HTMLDivElement>;
 export { GridMemo as Grid };

package/dist/src/Components/List/InfiniteList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ListProps } from "./List";
+export type InfiniteListProps<ItemType> = ListProps<ItemType> & {
+    hasNextPage: boolean;
+    loadNextPage: () => unknown | Promise<unknown>;
+};
+export declare const InfiniteList: <ItemType>({ renderItem, itemHeight, items, renderBefore, keyExtractor, hasNextPage, loadNextPage, style, className }: InfiniteListProps<ItemType>) => React.JSX.Element;

package/dist/src/Components/List/List.d.ts

@@ -1,11 +1,13 @@
-import * as React from 'react';
 import { CSSProperties, ReactElement, ReactNode } from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
+import { FixedSizeList, FixedSizeListProps } from 'react-window';
 export type ListProps<ItemType> = RbmComponentProps<{
     renderItem: (item: ItemType, style: CSSProperties, index: number) => ReactElement;
     itemHeight?: number;
     items: ItemType[];
     renderBefore?: (item: ItemType, index: number) => ReactNode;
     keyExtractor?: (item: ItemType, index: number) => string;
+    onItemsRendered?: FixedSizeListProps<ItemType>['onItemsRendered'];
+    autoSizeClassName?: string;
 }>;
-export declare const List: <ItemType>({ items, renderItem, itemHeight: initialItemHeight, className, style, }: ListProps<ItemType>) => React.JSX.Element;
+export declare const List: import("../../helper/withForwardRef").RefComponent<ListProps<unknown>, FixedSizeList<unknown>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {

package/src/Components/Dialog/ButtonDialog.tsx

@@ -1,19 +1,27 @@
 import * as React from 'react';
+import { ReactElement } from 'react';
 import { withMemo } from '../../helper/withMemo';
 import { Block } from '../Layout/Block';
-import { Text } from '../Text/Text';
+import { Text, TEXT_SIZE } from '../Text/Text';
 import { Clickable } from '../Clickable/Clickable';
 
 import styles from './buttonDialog.scss';
 import { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
 import classNames from 'classnames';
+import { Flavor } from "../Flavor";
+import { Size } from "../../Size";
 
 export type ButtonDialogProps = RbmComponentProps<
-    { title?: string; message: string; buttons: { text: string; callback: () => void }[] },
+    {
+        title?: string;
+        message: string;
+        buttons: { text: string; callback: () => void, flavor?: Flavor }[]
+        extraContent?: ReactElement|null
+    },
     WithNoChildren
 >;
 
-function ButtonDialog({ title, message, buttons, style, className }: ButtonDialogProps) {
+function ButtonDialog({ title, message, buttons, style, className, extraContent }: ButtonDialogProps) {
     // Variables
 
     // Refs
@@ -31,20 +39,21 @@ function ButtonDialog({ title, message, buttons, style, className }: ButtonDialo
     // Render Functions
 
     return (
-        <Block className={classNames(styles.buttonDialog, className)} style={style}>
+        <Block className={classNames(styles.buttonDialog, className)} style={style} >
             {!!title && (
-                <Block className={styles.title}>
-                    <Text>{title}</Text>
+                <Block>
+                    <Text size={TEXT_SIZE.large} className={styles.title}>{title}</Text>
                 </Block>
             )}
-            <Block className={styles.message}>
-                <Text>{message}</Text>
+            <Block>
+                <Text className={styles.message}>{message}</Text>
             </Block>
+            {extraContent}
             <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 onClick={b.callback} className={classNames(styles.button)} key={i + b.text}>
+                        <Text className={classNames(styles.buttonText, b.flavor ?? Flavor.Accent)}>{b.text}</Text>
                     </Clickable>
                 ))}
             </Block>

package/src/Components/Dialog/ConfirmDialog.tsx

@@ -11,6 +11,7 @@ export type ConfirmDialogProps = {
     confirmText?: string;
 };
 
+// TODO Translation
 function ConfirmDialog({ title, message, close, cancelText = 'Cancel', confirmText = 'OK' }: ConfirmDialogProps) {
     // Variables
     const buttons = useMemo(

package/src/Components/Dialog/buttonDialog.scss

@@ -1,5 +1,6 @@
 @import "../../scss/variables";
 @import "../../scss/designMixin";
+@import "../../scss/flavorMixin";
 
 .buttonDialog {
   font-weight: 400;
@@ -18,8 +19,13 @@
     width: 100%;
 
     .button {
-      color: var(--flavor-accent);
       padding: 0 8px;
+
+      .buttonText {
+        @include flavorSelection(--text-primary-default-color);
+
+      }
+
     }
   }
 
@@ -51,15 +57,18 @@
         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;
 
+        .buttonText {
+          line-height: 44px;
+          text-overflow: ellipsis;
+          letter-spacing: 0;
+          font-size: 16px;
+        }
+
         &:first-child {
           border-left: none;
         }
@@ -102,12 +111,15 @@
         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;
+
+        .buttonText {
+          line-height: 36px;
+          font-size: 14px;
+          font-weight: 500;
+        }
       }
     }
   }

package/src/Components/Flavor.ts

@@ -1,4 +1,6 @@
 export enum Flavor {
     Accent = "flavor-accent",
     Basic = "flavor-basic",
+    Destructive = "flavor-destructive",
+    Constructive = "flavor-constructive",
 }

package/src/Components/Layout/Grid/Grid.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { withMemo } from '../../../helper/withMemo';
 import { RbmComponentProps } from '../../RbmComponentProps';
 import { Block } from '../Block';
 import classNames from 'classnames';
 import styles from './grid.scss';
-import { useMemo } from 'react';
+import { ForwardedRef, useMemo } from 'react';
+import { withForwardRef } from "../../../helper/withForwardRef";
 
 export type GridProps = RbmComponentProps<{
     columns?: number;
@@ -12,7 +12,7 @@ export type GridProps = RbmComponentProps<{
     useContainerWidth?: boolean;
 }>;
 
-function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = false, className, __allowChildren }: GridProps) {
+function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = false, className, __allowChildren }: GridProps, ref?:ForwardedRef<HTMLDivElement>) {
     // Variables
     const appliedStyle = useMemo(
         () => ({
@@ -39,6 +39,7 @@ function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = fal
 
     return (
         <Block
+            ref={ref}
             style={appliedStyle}
             className={classNames(styles.grid, className, {[styles.useContainerWidth]: useContainerWidth})}
             __allowChildren={__allowChildren as 'all'}
@@ -49,5 +50,5 @@ function Grid({ style, children, columns = 12, rows = 1, useContainerWidth = fal
 }
 
 // Need RowMemo for autocompletion of phpstorm
-const GridMemo = withMemo(Grid, styles);
+const GridMemo = withForwardRef(Grid, styles);
 export { GridMemo as Grid };

package/src/Components/List/InfiniteList.tsx

@@ -0,0 +1,57 @@
+import React, { CSSProperties, ReactElement, ReactNode, useCallback, useState } from 'react';
+import InfiniteLoader from "react-window-infinite-loader";
+import { RbmComponentProps } from "../RbmComponentProps";
+import { List, ListProps } from "./List";
+import { withMemo } from "../../helper/withMemo";
+
+export type InfiniteListProps<ItemType> = ListProps<ItemType> &{
+    hasNextPage: boolean,
+    loadNextPage: () => unknown | Promise<unknown>,
+};
+
+export const InfiniteList = withMemo(function InfiniteList<ItemType>({
+                                                                         renderItem,
+                                                                         itemHeight,
+                                                                         items,
+                                                                         renderBefore,
+                                                                         keyExtractor,
+                                                                         hasNextPage,
+                                                                         loadNextPage,
+                                                                         style,
+                                                                         className
+                                                                     }: InfiniteListProps<ItemType>) {
+    // Refs
+
+    // States/Variables/Selectors
+    const [isPageLoading, setIsPageLoading] = useState(false);
+
+    // Dispatch
+
+    // Callbacks
+    const isItemLoaded = useCallback((index: number) => !hasNextPage || index < items.length, [hasNextPage, items]);
+
+    const loadMore = useCallback(async () => {
+        if (!isPageLoading) {
+            setIsPageLoading(true);
+            try {
+                loadNextPage()
+            } finally {
+                setIsPageLoading(false);
+            }
+        }
+    }, [isPageLoading, loadNextPage])
+
+    // Effects
+
+    // Other
+
+    // RenderFunctions
+
+    return <InfiniteLoader isItemLoaded={isItemLoaded} loadMoreItems={loadMore}
+                           itemCount={hasNextPage ? items.length + 1 : items.length}>{({onItemsRendered, ref}) => (
+        <List
+            items={items} renderItem={renderItem} style={style} className={className} itemHeight={itemHeight}
+            renderBefore={renderBefore} keyExtractor={keyExtractor} ref={ref} onItemsRendered={onItemsRendered}/>
+    )}
+    </InfiniteLoader>;
+});

package/src/Components/List/List.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { ComponentType, CSSProperties, ReactElement, ReactNode, useCallback, useState } from 'react';
+import { ComponentType, CSSProperties, ForwardedRef, ReactElement, ReactNode, useCallback, useState } from 'react';
 import { RbmComponentProps } from '../RbmComponentProps';
 
 import styles from './list.scss';
 import { withMemo } from '../../helper/withMemo';
-import { FixedSizeList, ListChildComponentProps } from 'react-window';
+import { FixedSizeList, FixedSizeListProps, ListChildComponentProps } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { SizeCalculator, SizeCalculatorProps } from '../SizeCalculator/SizeCalculator';
+import { withForwardRef } from "../../helper/withForwardRef";
 
 export type ListProps<ItemType> = RbmComponentProps<{
     renderItem: (item: ItemType, style: CSSProperties, index: number) => ReactElement;
@@ -14,15 +15,19 @@ export type ListProps<ItemType> = RbmComponentProps<{
     items: ItemType[];
     renderBefore?: (item: ItemType, index: number) => ReactNode;
     keyExtractor?: (item: ItemType, index: number) => string;
+    onItemsRendered?: FixedSizeListProps<ItemType>['onItemsRendered'];
+    autoSizeClassName?: string;
 }>;
 
-export const List = withMemo(function List<ItemType>({
+export const List = withForwardRef(function List<ItemType>({
     items,
     renderItem,
     itemHeight: initialItemHeight = 0,
     className,
     style,
-}: ListProps<ItemType>) {
+    onItemsRendered,
+    autoSizeClassName,
+}: ListProps<ItemType>, ref: ForwardedRef<FixedSizeList<ItemType>>) {
     // Variables
 
     // States
@@ -45,7 +50,7 @@ export const List = withMemo(function List<ItemType>({
     // Render Functions
 
     return (
-        <AutoSizer>
+        <AutoSizer className={autoSizeClassName}>
             {({ height, width }: { height?: number; width?: number }) => {
                 return (
                     <>
@@ -54,6 +59,8 @@ export const List = withMemo(function List<ItemType>({
                                 {renderItem(
                                     items[0],
                                     {
+                                        visibility: 'hidden',
+                                        pointerEvents: 'none',
                                         position: 'relative',
                                         top: '0px',
                                         left: '0px',
@@ -66,6 +73,8 @@ export const List = withMemo(function List<ItemType>({
                         )}
                         {height !== undefined && width !== undefined && (
                             <FixedSizeList
+                                onItemsRendered={onItemsRendered}
+                                ref={ref}
                                 height={height}
                                 itemCount={items.length}
                                 width={width}

package/src/scss/_flavorMixin.scss

@@ -7,4 +7,10 @@
   &:global(.flavor-basic) {
     #{$varName}: var(--flavor-basic);
   }
+  &:global(.flavor-destructive) {
+    #{$varName}: var(--flavor-destructive);
+  }
+  &:global(.flavor-constructive) {
+    #{$varName}: var(--flavor-constructive);
+  }
 }