@admin-layout/gluestack-ui-mobile 11.0.4-alpha.4 → 11.2.1-alpha.1

package/src/components/ui/grid/index.tsx

@@ -1,284 +0,0 @@
-import React, { useEffect, useState, createContext, useContext, useMemo, forwardRef } from 'react';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { View, Dimensions, Platform, ViewProps } from 'react-native';
-import { gridStyle, gridItemStyle } from './styles';
-import { cssInterop } from 'nativewind';
-import { useBreakpointValue, getBreakPointValue } from '../utils/use-break-point-value';
-
-const { width: DEVICE_WIDTH } = Dimensions.get('window');
-
-const GridContext = createContext<any>({});
-
-function arrangeChildrenIntoRows({
-    childrenArray,
-    colSpanArr,
-    numColumns,
-}: {
-    childrenArray: React.ReactNode[];
-    colSpanArr: number[];
-    numColumns: number;
-}) {
-    let currentRow = 1;
-    let currentRowTotalColSpan = 0;
-
-    // store how many items in each row
-    const rowItemsCount: {
-        [key: number]: number[];
-    } = {};
-
-    for (let i = 0; i < childrenArray.length; i++) {
-        const colSpan = colSpanArr[i];
-
-        // if current row is full, go to next row
-        if (currentRowTotalColSpan + colSpan > numColumns) {
-            currentRow++;
-            currentRowTotalColSpan = colSpan;
-        } else {
-            // if current row is not full, add colSpan to current row
-            currentRowTotalColSpan += colSpan;
-        }
-
-        rowItemsCount[currentRow] = rowItemsCount[currentRow] ? [...rowItemsCount[currentRow], i] : [i];
-    }
-
-    return rowItemsCount;
-}
-
-function generateResponsiveNumColumns({ gridClass }: { gridClass: string }) {
-    const gridClassNamePattern = /\b(?:\w+:)?grid-cols-?\d+\b/g;
-    const numColumns = gridClass?.match(gridClassNamePattern);
-
-    if (!numColumns) {
-        return 12;
-    }
-
-    const regex = /^(?:(\w+):)?grid-cols-?(\d+)$/;
-    const result: any = {};
-
-    numColumns.forEach((classname) => {
-        const match = classname.match(regex);
-        if (match) {
-            const prefix = match[1] || 'default';
-            const value = parseInt(match[2], 10);
-            result[prefix] = value;
-        }
-    });
-
-    return result;
-}
-
-function generateResponsiveColSpans({ gridItemClassName }: { gridItemClassName: string }) {
-    const gridClassNamePattern = /\b(?:\w+:)?col-span-?\d+\b/g;
-
-    const colSpan: any = gridItemClassName?.match(gridClassNamePattern);
-
-    if (!colSpan) {
-        return 1;
-    }
-
-    const regex = /^(?:(\w+):)?col-span-?(\d+)$/;
-    const result: any = {};
-
-    colSpan.forEach((classname: any) => {
-        const match = classname.match(regex);
-        if (match) {
-            const prefix = match[1] || 'default';
-            const value = parseInt(match[2], 10);
-            result[prefix] = value;
-        }
-    });
-
-    return result;
-}
-
-type IGridProps = ViewProps &
-    VariantProps<typeof gridStyle> & {
-        gap?: number;
-        rowGap?: number;
-        columnGap?: number;
-        flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-        padding?: number;
-        paddingLeft?: number;
-        paddingRight?: number;
-        paddingStart?: number;
-        paddingEnd?: number;
-        borderWidth?: number;
-        borderLeftWidth?: number;
-        borderRightWidth?: number;
-        _extra: {
-            className: string;
-        };
-    };
-
-const Grid = forwardRef<React.ElementRef<typeof View>, IGridProps>(({ className, _extra, children, ...props }, ref) => {
-    const [calculatedWidth, setCalculatedWidth] = useState<number | null>(null);
-
-    const gridClass = _extra?.className;
-    const obj = generateResponsiveNumColumns({ gridClass });
-    const responsiveNumColumns: any = useBreakpointValue(obj);
-
-    const itemsPerRow = useMemo(() => {
-        // get the colSpan of each child
-        const colSpanArr = React.Children.map(children, (child: any) => {
-            const gridItemClassName = child?.props?._extra?.className;
-
-            const colSpan2 = getBreakPointValue(generateResponsiveColSpans({ gridItemClassName }), DEVICE_WIDTH);
-            const colSpan = colSpan2 ? colSpan2 : 1;
-
-            if (colSpan > responsiveNumColumns) {
-                return responsiveNumColumns;
-            }
-
-            return colSpan;
-        });
-
-        const childrenArray = React.Children.toArray(children);
-
-        const rowItemsCount = arrangeChildrenIntoRows({
-            childrenArray,
-            colSpanArr,
-            numColumns: responsiveNumColumns,
-        });
-
-        return rowItemsCount;
-    }, [responsiveNumColumns, children]);
-
-    const childrenWithProps = React.Children.map(children, (child, index) => {
-        if (React.isValidElement(child)) {
-            return React.cloneElement(child, { index } as any);
-        }
-
-        return child;
-    });
-
-    const gridClassMerged = `${Platform.select({
-        web: gridClass ?? '',
-    })}`;
-
-    const contextValue = useMemo(() => {
-        return {
-            calculatedWidth,
-            numColumns: responsiveNumColumns,
-            itemsPerRow,
-            flexDirection: props?.flexDirection || 'row',
-            gap: props?.gap || 0,
-            columnGap: props?.columnGap || 0,
-        };
-    }, [calculatedWidth, itemsPerRow, responsiveNumColumns, props]);
-
-    const borderLeftWidth = props?.borderLeftWidth || props?.borderWidth || 0;
-    const borderRightWidth = props?.borderRightWidth || props?.borderWidth || 0;
-    const borderWidthToSubtract = borderLeftWidth + borderRightWidth;
-
-    return (
-        <GridContext.Provider value={contextValue}>
-            <View
-                ref={ref}
-                className={gridStyle({
-                    class: className + ' ' + gridClassMerged,
-                })}
-                onLayout={(event: any) => {
-                    const paddingLeftToSubtract = props?.paddingStart || props?.paddingLeft || props?.padding || 0;
-
-                    const paddingRightToSubtract = props?.paddingEnd || props?.paddingRight || props?.padding || 0;
-
-                    const gridWidth =
-                        event.nativeEvent.layout.width -
-                        paddingLeftToSubtract -
-                        paddingRightToSubtract -
-                        borderWidthToSubtract;
-
-                    setCalculatedWidth(gridWidth);
-                }}
-                {...props}
-            >
-                {calculatedWidth && childrenWithProps}
-            </View>
-        </GridContext.Provider>
-    );
-});
-
-cssInterop(Grid, {
-    className: {
-        target: 'style',
-        nativeStyleToProp: {
-            gap: 'gap',
-            rowGap: 'rowGap',
-            columnGap: 'columnGap',
-            flexDirection: 'flexDirection',
-            padding: 'padding',
-            paddingLeft: 'paddingLeft',
-            paddingRight: 'paddingRight',
-            paddingStart: 'paddingStart',
-            paddingEnd: 'paddingEnd',
-            borderWidth: 'borderWidth',
-            borderLeftWidth: 'borderLeftWidth',
-            borderRightWidth: 'borderRightWidth',
-        },
-    },
-});
-
-type IGridItemProps = ViewProps &
-    VariantProps<typeof gridItemStyle> & {
-        index?: number;
-        _extra: {
-            className: string;
-        };
-    };
-
-const GridItem = forwardRef<React.ElementRef<typeof View>, IGridItemProps>(({ className, _extra, ...props }, ref) => {
-    const [flexBasisValue, setFlexBasisValue] = useState<number | string | null>('auto');
-
-    const { calculatedWidth, numColumns, itemsPerRow, flexDirection, gap, columnGap } = useContext(GridContext);
-
-    const gridItemClass = _extra?.className;
-    const responsiveColSpan: number =
-        useBreakpointValue(generateResponsiveColSpans({ gridItemClassName: gridItemClass })) ?? 1;
-
-    useEffect(() => {
-        if (!flexDirection?.includes('column') && calculatedWidth && numColumns > 0 && responsiveColSpan > 0) {
-            // find out in which row of itemsPerRow the current item's index is
-            const row = Object.keys(itemsPerRow).find((key) => {
-                return itemsPerRow[key].includes(props?.index);
-            });
-
-            const rowColsCount = itemsPerRow[row as string]?.length;
-
-            const space = columnGap || gap || 0;
-
-            const gutterOffset = space * (rowColsCount === 1 && responsiveColSpan < numColumns ? 2 : rowColsCount - 1);
-
-            const flexBasisVal =
-                Math.min(
-                    (((calculatedWidth - gutterOffset) * responsiveColSpan) / numColumns / calculatedWidth) * 100,
-                    100,
-                ) + '%';
-
-            setFlexBasisValue(flexBasisVal);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [calculatedWidth, responsiveColSpan, numColumns, columnGap, gap, flexDirection]);
-
-    return (
-        <View
-            ref={ref}
-            // @ts-expect-error
-            gridItemClass={gridItemClass}
-            className={gridItemStyle({
-                class: className,
-            })}
-            {...props}
-            style={[
-                {
-                    flexBasis: flexBasisValue as any,
-                },
-                props.style,
-            ]}
-        />
-    );
-});
-
-Grid.displayName = 'Grid';
-GridItem.displayName = 'GridItem';
-
-export { Grid, GridItem };

package/src/components/ui/grid/index.web.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { gridStyle, gridItemStyle } from './styles';
-
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-
-type IGridProps = React.ComponentPropsWithoutRef<'div'> &
-    VariantProps<typeof gridStyle> & {
-        gap?: number;
-        rowGap?: number;
-        columnGap?: number;
-        flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-        padding?: number;
-        paddingLeft?: number;
-        paddingRight?: number;
-        paddingStart?: number;
-        paddingEnd?: number;
-        _extra: {
-            className: string;
-        };
-    };
-
-const Grid = React.forwardRef<HTMLDivElement, IGridProps>(({ className, _extra, ...props }, ref) => {
-    const gridClass = _extra?.className;
-    const finalGridClass = gridClass ?? '';
-    return (
-        <div
-            ref={ref}
-            className={gridStyle({
-                class: className + ' ' + finalGridClass,
-            })}
-            {...props}
-        />
-    );
-});
-
-type IGridItemProps = React.ComponentPropsWithoutRef<'div'> &
-    VariantProps<typeof gridItemStyle> & {
-        index?: number;
-        _extra: {
-            className: string;
-        };
-    };
-const GridItem = React.forwardRef<HTMLDivElement, IGridItemProps>(({ className, _extra, ...props }, ref) => {
-    const gridItemClass = _extra?.className;
-
-    const finalGridItemClass = gridItemClass ?? '';
-    return (
-        <div
-            ref={ref}
-            className={gridItemStyle({
-                class: className + ' ' + finalGridItemClass,
-            })}
-            {...props}
-        />
-    );
-});
-
-Grid.displayName = 'Grid';
-GridItem.displayName = 'GridItem';
-
-export { Grid, GridItem };

package/src/components/ui/grid/styles.tsx

@@ -1,13 +0,0 @@
-import { tva } from '@gluestack-ui/nativewind-utils/tva';
-import { isWeb } from '@gluestack-ui/nativewind-utils/IsWeb';
-
-const gridBaseStyle = isWeb ? 'grid grid-cols-12' : 'box-border flex-row flex-wrap justify-start';
-const gridItemBaseStyle = isWeb ? 'w-auto col-span-1' : '';
-
-export const gridStyle = tva({
-    base: `w-full ${gridBaseStyle}`,
-});
-
-export const gridItemStyle = tva({
-    base: `w-full ${gridItemBaseStyle}`,
-});

package/src/components/ui/heading/index.tsx

@@ -1,193 +0,0 @@
-import React, { forwardRef, memo } from 'react';
-import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements';
-import { headingStyle } from './styles';
-import type { VariantProps } from '@gluestack-ui/nativewind-utils';
-import { cssInterop } from 'nativewind';
-
-type IHeadingProps = VariantProps<typeof headingStyle> &
-    React.ComponentPropsWithoutRef<typeof H1> & {
-        as?: React.ElementType;
-    };
-
-cssInterop(H1, { className: 'style' });
-cssInterop(H2, { className: 'style' });
-cssInterop(H3, { className: 'style' });
-cssInterop(H4, { className: 'style' });
-cssInterop(H5, { className: 'style' });
-cssInterop(H6, { className: 'style' });
-
-const MappedHeading = memo(
-    forwardRef<React.ElementRef<typeof H1>, IHeadingProps>(
-        ({ size, className, isTruncated, bold, underline, strikeThrough, sub, italic, highlight, ...props }, ref) => {
-            switch (size) {
-                case '5xl':
-                case '4xl':
-                case '3xl':
-                    return (
-                        <H1
-                            className={headingStyle({
-                                size,
-                                isTruncated,
-                                bold,
-                                underline,
-                                strikeThrough,
-                                sub,
-                                italic,
-                                highlight,
-                                class: className,
-                            })}
-                            {...props}
-                            // @ts-expect-error
-                            ref={ref}
-                        />
-                    );
-                case '2xl':
-                    return (
-                        <H2
-                            className={headingStyle({
-                                size,
-                                isTruncated,
-                                bold,
-                                underline,
-                                strikeThrough,
-                                sub,
-                                italic,
-                                highlight,
-                                class: className,
-                            })}
-                            {...props}
-                            // @ts-expect-error
-                            ref={ref}
-                        />
-                    );
-                case 'xl':
-                    return (
-                        <H3
-                            className={headingStyle({
-                                size,
-                                isTruncated,
-                                bold,
-                                underline,
-                                strikeThrough,
-                                sub,
-                                italic,
-                                highlight,
-                                class: className,
-                            })}
-                            {...props}
-                            // @ts-expect-error
-                            ref={ref}
-                        />
-                    );
-                case 'lg':
-                    return (
-                        <H4
-                            className={headingStyle({
-                                size,
-                                isTruncated,
-                                bold,
-                                underline,
-                                strikeThrough,
-                                sub,
-                                italic,
-                                highlight,
-                                class: className,
-                            })}
-                            {...props}
-                            // @ts-expect-error
-                            ref={ref}
-                        />
-                    );
-                case 'md':
-                    return (
-                        <H5
-                            className={headingStyle({
-                                size,
-                                isTruncated,
-                                bold,
-                                underline,
-                                strikeThrough,
-                                sub,
-                                italic,
-                                highlight,
-                                class: className,
-                            })}
-                            {...props}
-                            // @ts-expect-error
-                            ref={ref}
-                        />
-                    );
-                case 'sm':
-                case 'xs':
-                    return (
-                        <H6
-                            className={headingStyle({
-                                size,
-                                isTruncated,
-                                bold,
-                                underline,
-                                strikeThrough,
-                                sub,
-                                italic,
-                                highlight,
-                                class: className,
-                            })}
-                            {...props}
-                            // @ts-expect-error
-                            ref={ref}
-                        />
-                    );
-                default:
-                    return (
-                        <H4
-                            className={headingStyle({
-                                size,
-                                isTruncated,
-                                bold,
-                                underline,
-                                strikeThrough,
-                                sub,
-                                italic,
-                                highlight,
-                                class: className,
-                            })}
-                            {...props}
-                            // @ts-expect-error
-                            ref={ref}
-                        />
-                    );
-            }
-        },
-    ),
-);
-
-const Heading = memo(
-    forwardRef<React.ElementRef<typeof H1>, IHeadingProps>(({ className, size = 'lg', as: AsComp, ...props }, ref) => {
-        const { isTruncated, bold, underline, strikeThrough, sub, italic, highlight } = props;
-
-        if (AsComp) {
-            return (
-                <AsComp
-                    className={headingStyle({
-                        size,
-                        isTruncated,
-                        bold,
-                        underline,
-                        strikeThrough,
-                        sub,
-                        italic,
-                        highlight,
-                        class: className,
-                    })}
-                    {...props}
-                />
-            );
-        }
-
-        return <MappedHeading className={className} size={size} ref={ref} {...props} />;
-    }),
-);
-
-Heading.displayName = 'Heading';
-
-export { Heading };