@admin-layout/gluestack-ui-mobile 11.0.4-alpha.0 → 12.0.16-alpha.0

package/src/components/ui/refresh-control/index.web.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+interface RefreshControlProps {
+    refreshing?: boolean;
+    onRefresh?: () => void;
+    progressViewOffset?: number;
+    tintColor?: string;
+    title?: string;
+    titleColor?: string;
+    colors?: string[];
+    enabled?: boolean;
+    style?: React.CSSProperties;
+}
+
+export const RefreshControl: React.FC<RefreshControlProps> = ({ refreshing = false, onRefresh, style, ...props }) => {
+    const [startY, setStartY] = useState(0);
+    const [pulling, setPulling] = useState(false);
+    const [pullDistance, setPullDistance] = useState(0);
+    const threshold = 100; // Minimum pull distance to trigger refresh
+
+    useEffect(() => {
+        if (!refreshing) {
+            setPullDistance(0);
+            setPulling(false);
+        }
+    }, [refreshing]);
+
+    const handleTouchStart = (e: React.TouchEvent) => {
+        if (window.scrollY === 0) {
+            setStartY(e.touches[0].clientY);
+            setPulling(true);
+        }
+    };
+
+    const handleTouchMove = (e: React.TouchEvent) => {
+        if (pulling && !refreshing) {
+            const currentY = e.touches[0].clientY;
+            const distance = Math.max(0, currentY - startY);
+            setPullDistance(Math.min(distance * 0.5, threshold * 1.5)); // Add resistance
+        }
+    };
+
+    const handleTouchEnd = () => {
+        if (pulling && pullDistance >= threshold && onRefresh) {
+            onRefresh();
+        }
+        if (!refreshing) {
+            setPullDistance(0);
+        }
+        setPulling(false);
+    };
+
+    return (
+        <div
+            style={{
+                position: 'relative',
+                width: '100%',
+                ...style,
+            }}
+            onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
+            onTouchEnd={handleTouchEnd}
+        >
+            {(pulling || refreshing) && (
+                <div
+                    style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: Math.max(pullDistance, refreshing ? 50 : 0),
+                        transition: pulling ? 'none' : 'height 0.2s ease-out',
+                        overflow: 'hidden',
+                    }}
+                >
+                    <div
+                        style={{
+                            width: '20px',
+                            height: '20px',
+                            border: '2px solid #ccc',
+                            borderTopColor: props.tintColor || '#000',
+                            borderRadius: '50%',
+                            animation: refreshing ? 'spin 1s linear infinite' : 'none',
+                            transform: !refreshing ? `rotate(${(pullDistance / threshold) * 360}deg)` : undefined,
+                        }}
+                    />
+                </div>
+            )}
+            <style>
+                {`
+          @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+          }
+        `}
+            </style>
+        </div>
+    );
+};

package/src/components/ui/safe-area-view/index.web.tsx

@@ -0,0 +1,24 @@
+'use client';
+import React, { forwardRef } from 'react';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { clsx } from 'clsx';
+import { safeAreaStyle } from './styles';
+
+type ISafeAreaProps = React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof safeAreaStyle> & {
+        className?: string;
+    };
+
+export const StyledSafeAreaView = forwardRef<HTMLDivElement, ISafeAreaProps>(
+    ({ className, children, ...props }, ref) => {
+        return (
+            <div {...props} ref={ref} className={safeAreaStyle({ class: clsx(className) })}>
+                {children}
+            </div>
+        );
+    },
+);
+
+StyledSafeAreaView.displayName = 'StyledSafeAreaView';
+
+export { StyledSafeAreaView as SafeAreaView };

package/src/components/ui/scroll-view/index.web.tsx

@@ -0,0 +1,142 @@
+'use client';
+import React, { forwardRef } from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { clsx } from 'clsx';
+
+// Styles for scroll containers
+const scrollContainerStyle = tva({
+    base: 'overflow-auto',
+    variants: {
+        horizontal: {
+            true: 'overflow-x-auto overflow-y-hidden whitespace-nowrap',
+        },
+        vertical: {
+            true: 'overflow-y-auto overflow-x-hidden',
+        },
+    },
+});
+
+type ScrollViewProps = React.HTMLAttributes<HTMLDivElement> & {
+    horizontal?: boolean;
+    className?: string;
+    contentContainerStyle?: React.CSSProperties;
+    showsHorizontalScrollIndicator?: boolean;
+    showsVerticalScrollIndicator?: boolean;
+};
+
+export const ScrollView = forwardRef<HTMLDivElement, ScrollViewProps>(
+    (
+        {
+            horizontal,
+            className,
+            contentContainerStyle,
+            showsHorizontalScrollIndicator = true,
+            showsVerticalScrollIndicator = true,
+            children,
+            style,
+            ...props
+        },
+        ref,
+    ) => {
+        return (
+            <div
+                ref={ref}
+                className={scrollContainerStyle({
+                    horizontal,
+                    vertical: !horizontal,
+                    class: clsx(className),
+                })}
+                style={{
+                    ...style,
+                    overflowX: !showsHorizontalScrollIndicator ? 'hidden' : undefined,
+                    overflowY: !showsVerticalScrollIndicator ? 'hidden' : undefined,
+                }}
+                {...props}
+            >
+                <div style={contentContainerStyle}>{children}</div>
+            </div>
+        );
+    },
+);
+
+ScrollView.displayName = 'ScrollView';
+
+// FlatList implementation
+type FlatListProps<T> = {
+    data: T[];
+    renderItem: ({ item, index }: { item: T; index: number }) => React.ReactNode;
+    keyExtractor?: (item: T, index: number) => string;
+    horizontal?: boolean;
+    className?: string;
+    contentContainerStyle?: React.CSSProperties;
+    showsHorizontalScrollIndicator?: boolean;
+    showsVerticalScrollIndicator?: boolean;
+};
+
+export function FlatList<T>({
+    data,
+    renderItem,
+    keyExtractor,
+    horizontal,
+    className,
+    contentContainerStyle,
+    showsHorizontalScrollIndicator,
+    showsVerticalScrollIndicator,
+    ...props
+}: FlatListProps<T>) {
+    return (
+        <ScrollView
+            horizontal={horizontal}
+            className={className}
+            contentContainerStyle={contentContainerStyle}
+            showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
+            showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+            {...props}
+        >
+            {data.map((item, index) => (
+                <React.Fragment key={keyExtractor ? keyExtractor(item, index) : index}>
+                    {renderItem({ item, index })}
+                </React.Fragment>
+            ))}
+        </ScrollView>
+    );
+}
+
+// SectionList implementation
+type SectionListProps<T, S> = {
+    sections: Array<{ title: string; data: T[] }>;
+    renderItem: ({ item, index }: { item: T; index: number }) => React.ReactNode;
+    renderSectionHeader?: ({ section }: { section: { title: string; data: T[] } }) => React.ReactNode;
+    keyExtractor?: (item: T, index: number) => string;
+    className?: string;
+    contentContainerStyle?: React.CSSProperties;
+};
+
+export function SectionList<T, S>({
+    sections,
+    renderItem,
+    renderSectionHeader,
+    keyExtractor,
+    className,
+    contentContainerStyle,
+    ...props
+}: SectionListProps<T, S>) {
+    return (
+        <ScrollView className={className} contentContainerStyle={contentContainerStyle} {...props}>
+            {sections.map((section, sectionIndex) => (
+                <React.Fragment key={`section-${sectionIndex}`}>
+                    {renderSectionHeader?.({ section })}
+                    {section.data.map((item, index) => (
+                        <React.Fragment key={keyExtractor ? keyExtractor(item, index) : index}>
+                            {renderItem({ item, index })}
+                        </React.Fragment>
+                    ))}
+                </React.Fragment>
+            ))}
+        </ScrollView>
+    );
+}
+
+// VirtualizedList is an alias for FlatList in web implementation
+// since we're not implementing actual virtualization in this basic version
+export const VirtualizedList = FlatList;

package/src/components/ui/section-list/index.web.tsx

@@ -0,0 +1,93 @@
+'use client';
+import React, { forwardRef } from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { ScrollView } from '../scroll-view/index.web';
+
+const sectionListStyle = tva({
+    base: 'flex flex-col',
+});
+
+const sectionHeaderStyle = tva({
+    base: 'font-bold text-lg py-2 bg-gray-100',
+});
+
+interface SectionBase {
+    title: string;
+}
+
+interface SectionListProps<ItemT, SectionT extends SectionBase> {
+    sections: ReadonlyArray<SectionT & { data: ReadonlyArray<ItemT> }>;
+    renderItem: ({ item, index }: { item: ItemT; index: number }) => React.ReactElement;
+    renderSectionHeader?: ({ section }: { section: SectionT }) => React.ReactElement;
+    keyExtractor?: (item: ItemT, index: number) => string;
+    className?: string;
+    contentContainerStyle?: React.CSSProperties;
+    onEndReached?: () => void;
+    onEndReachedThreshold?: number;
+    stickySectionHeadersEnabled?: boolean;
+}
+
+function SectionListComponent<ItemT, SectionT extends SectionBase>(
+    {
+        sections,
+        renderItem,
+        renderSectionHeader,
+        keyExtractor,
+        className,
+        contentContainerStyle,
+        onEndReached,
+        onEndReachedThreshold = 0.5,
+        stickySectionHeadersEnabled = false,
+        ...props
+    }: SectionListProps<ItemT, SectionT>,
+    ref: React.Ref<HTMLDivElement>,
+) {
+    const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
+        if (!onEndReached) return;
+
+        const target = event.target as HTMLDivElement;
+        const scrollPosition = target.scrollTop + target.clientHeight;
+        const scrollSize = target.scrollHeight;
+        const threshold = scrollSize * onEndReachedThreshold;
+
+        if (scrollSize - scrollPosition <= threshold) {
+            onEndReached();
+        }
+    };
+
+    const defaultSectionHeader = (section: SectionT) => <div className={sectionHeaderStyle()}>{section.title}</div>;
+
+    return (
+        <ScrollView ref={ref} className={className} onScroll={handleScroll} {...props}>
+            <div className={sectionListStyle()} style={contentContainerStyle}>
+                {sections.map((section, sectionIndex) => (
+                    <div key={`section-${sectionIndex}`}>
+                        <div
+                            style={{
+                                position: stickySectionHeadersEnabled ? 'sticky' : 'relative',
+                                top: stickySectionHeadersEnabled ? 0 : undefined,
+                                zIndex: stickySectionHeadersEnabled ? 1 : undefined,
+                            }}
+                        >
+                            {renderSectionHeader ? renderSectionHeader({ section }) : defaultSectionHeader(section)}
+                        </div>
+                        {section.data.map((item, index) => (
+                            <React.Fragment key={keyExtractor ? keyExtractor(item, index) : `${sectionIndex}-${index}`}>
+                                {renderItem({ item, index })}
+                            </React.Fragment>
+                        ))}
+                    </div>
+                ))}
+            </div>
+        </ScrollView>
+    );
+}
+
+const SectionList = React.forwardRef(SectionListComponent) as <ItemT, SectionT extends SectionBase>(
+    props: SectionListProps<ItemT, SectionT> & { ref?: React.Ref<HTMLDivElement> },
+) => React.ReactElement;
+
+export { SectionList };

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

@@ -0,0 +1,83 @@
+'use client';
+import React, { forwardRef } from 'react';
+import { createSelect } from '@gluestack-ui/select';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const SCOPE = 'SELECT';
+
+const StyledSelect = forwardRef<HTMLSelectElement, any>(
+    ({ onValueChange, onChange, placeholder, children, ...props }, ref) => {
+        const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+            if (onChange) {
+                onChange(e);
+            }
+            if (onValueChange) {
+                onValueChange(e.target.value);
+            }
+        };
+
+        return (
+            <select ref={ref} onChange={handleChange} {...props}>
+                {placeholder && (
+                    <option value="" disabled>
+                        {placeholder}
+                    </option>
+                )}
+                {children}
+            </select>
+        );
+    },
+);
+
+StyledSelect.displayName = 'StyledSelect';
+
+const selectStyle = tva({
+    base: 'px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent appearance-none bg-white',
+    variants: {
+        size: {
+            sm: 'text-sm h-8',
+            md: 'text-base h-10',
+            lg: 'text-lg h-12',
+        },
+        variant: {
+            outline: 'bg-transparent',
+            filled: 'bg-gray-100',
+            unstyled: '',
+        },
+        state: {
+            error: 'border-red-500 focus:ring-red-500',
+            success: 'border-green-500 focus:ring-green-500',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'outline',
+    },
+});
+
+export const SelectOption = forwardRef<HTMLOptionElement, React.ComponentProps<'option'>>((props, ref) => {
+    return <option ref={ref} {...props} />;
+});
+
+SelectOption.displayName = 'SelectOption';
+
+type ISelectProps = React.ComponentProps<typeof StyledSelect> &
+    VariantProps<typeof selectStyle> & {
+        className?: string;
+        onValueChange?: (value: string) => void;
+    };
+
+const Select = React.forwardRef<HTMLSelectElement, ISelectProps>(
+    ({ className, size, variant, state, ...props }, ref) => {
+        return (
+            <StyledSelect ref={ref} className={selectStyle({ size, variant, state, class: className })} {...props} />
+        );
+    },
+);
+
+Select.displayName = 'Select';
+
+export { Select };