Compare commits
3 Commits
a05c1508e4
...
53be0b2f50
| Author | SHA1 | Date | |
|---|---|---|---|
|
53be0b2f50 | ||
|
|
ba07581f31 | ||
|
|
ada1fa40db |
@@ -18,3 +18,18 @@ export async function getNoticeById(noticeId) {
|
|||||||
}
|
}
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function createNotice(notice) {
|
||||||
|
// console.log("Notice created", notice);
|
||||||
|
const response = await fetch(`${API_URL}add`, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(notice),
|
||||||
|
});
|
||||||
|
console.log("Response", response);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Error");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,4 +1,142 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Button, ButtonText } from "@/components/ui/button";
|
||||||
|
import { FormControl } from "@/components/ui/form-control";
|
||||||
|
import { Input, InputField } from "@/components/ui/input";
|
||||||
import { Text } from "@/components/ui/text";
|
import { Text } from "@/components/ui/text";
|
||||||
|
import { VStack } from "@/components/ui/vstack";
|
||||||
|
import { Textarea, TextareaInput } from "@/components/ui/textarea";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectInput,
|
||||||
|
SelectIcon,
|
||||||
|
SelectPortal,
|
||||||
|
SelectBackdrop,
|
||||||
|
SelectContent,
|
||||||
|
SelectDragIndicator,
|
||||||
|
SelectDragIndicatorWrapper,
|
||||||
|
SelectItem,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
|
||||||
|
import { ChevronDownIcon } from "@/components/ui/icon";
|
||||||
|
import { useMutation } from "@tanstack/react-query";
|
||||||
|
import { createNotice } from "@/api/notices";
|
||||||
|
|
||||||
export default function CreateNotice() {
|
export default function CreateNotice() {
|
||||||
return <Text>Tworzenie ogłoszenia</Text>;
|
const [title, setTitle] = useState("");
|
||||||
|
const [description, setDescription] = useState("");
|
||||||
|
const [price, setPrice] = useState("");
|
||||||
|
const [category, setCategory] = useState("");
|
||||||
|
const [error, setError] = useState({
|
||||||
|
title: false,
|
||||||
|
description: false,
|
||||||
|
price: false,
|
||||||
|
category: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const noticeMutation = useMutation({
|
||||||
|
mutationFn: () =>
|
||||||
|
createNotice({
|
||||||
|
title: title,
|
||||||
|
clientId: 1,
|
||||||
|
description: description,
|
||||||
|
price: parseFloat(price),
|
||||||
|
category: category,
|
||||||
|
status: "ACTIVE",
|
||||||
|
}),
|
||||||
|
onSuccess: () => {
|
||||||
|
console.log("Notice created successfully");
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
console.error("Error creating notice");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const addNotice = () => {
|
||||||
|
setError({
|
||||||
|
title: !title,
|
||||||
|
description: !description,
|
||||||
|
price: !price,
|
||||||
|
category: !category,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!title || !description || !price || !category) {
|
||||||
|
console.log("Error in form");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
noticeMutation.mutate();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormControl className="p-4 border rounded-lg border-outline-300">
|
||||||
|
<VStack space="xl">
|
||||||
|
<VStack space="xs">
|
||||||
|
<Text className="text-typography-500">Tytuł</Text>
|
||||||
|
<Input className="min-w-[250px]" isInvalid={error.title}>
|
||||||
|
<InputField
|
||||||
|
type="text"
|
||||||
|
value={title}
|
||||||
|
onChangeText={(value) => setTitle(value)}
|
||||||
|
/>
|
||||||
|
</Input>
|
||||||
|
</VStack>
|
||||||
|
|
||||||
|
<VStack space="xs">
|
||||||
|
<Text className="text-typography-500">Opis</Text>
|
||||||
|
<Textarea
|
||||||
|
size="md"
|
||||||
|
className="min-w-[250px] "
|
||||||
|
isInvalid={error.description}
|
||||||
|
>
|
||||||
|
<TextareaInput
|
||||||
|
placeholder="Opisz produkt"
|
||||||
|
value={description}
|
||||||
|
onChangeText={(value) => setDescription(value)}
|
||||||
|
/>
|
||||||
|
</Textarea>
|
||||||
|
</VStack>
|
||||||
|
|
||||||
|
<VStack space="xs">
|
||||||
|
<Text className="text-typography-500">Cena</Text>
|
||||||
|
<Input className="min-w-[250px]" isInvalid={error.price}>
|
||||||
|
<InputField
|
||||||
|
type="text"
|
||||||
|
value={price}
|
||||||
|
onChangeText={(value) => setPrice(value)}
|
||||||
|
/>
|
||||||
|
</Input>
|
||||||
|
</VStack>
|
||||||
|
<VStack space="xs">
|
||||||
|
<Text className="text-typography-500">Kategoria</Text>
|
||||||
|
<Select
|
||||||
|
onValueChange={(value) => setCategory(value)}
|
||||||
|
isInvalid={error.category}
|
||||||
|
>
|
||||||
|
<SelectTrigger variant="outline" size="md">
|
||||||
|
<SelectInput placeholder="Wybierz kategorię" />
|
||||||
|
<SelectIcon className="mr-3" as={ChevronDownIcon} />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectPortal>
|
||||||
|
<SelectBackdrop />
|
||||||
|
<SelectContent>
|
||||||
|
<SelectDragIndicatorWrapper>
|
||||||
|
<SelectDragIndicator />
|
||||||
|
</SelectDragIndicatorWrapper>
|
||||||
|
<SelectItem label="Meble" value="Furniture" />
|
||||||
|
<SelectItem label="Biżuteria" value="Jewelry" />
|
||||||
|
<SelectItem label="Ceramika" value="Ceramics" />
|
||||||
|
</SelectContent>
|
||||||
|
</SelectPortal>
|
||||||
|
</Select>
|
||||||
|
</VStack>
|
||||||
|
<Button
|
||||||
|
className="ml-auto"
|
||||||
|
onPress={() => addNotice()}
|
||||||
|
disabled={noticeMutation.isLoading}
|
||||||
|
>
|
||||||
|
<ButtonText className="text-typography-0">Save</ButtonText>
|
||||||
|
</Button>
|
||||||
|
</VStack>
|
||||||
|
</FormControl>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
468
ArtisanConnect/components/ui/form-control/index.tsx
Normal file
468
ArtisanConnect/components/ui/form-control/index.tsx
Normal file
@@ -0,0 +1,468 @@
|
|||||||
|
'use client';
|
||||||
|
import { Text, View } from 'react-native';
|
||||||
|
import React from 'react';
|
||||||
|
import { createFormControl } from '@gluestack-ui/form-control';
|
||||||
|
import { tva } from '@gluestack-ui/nativewind-utils/tva';
|
||||||
|
import {
|
||||||
|
withStyleContext,
|
||||||
|
useStyleContext,
|
||||||
|
} from '@gluestack-ui/nativewind-utils/withStyleContext';
|
||||||
|
import { cssInterop } from 'nativewind';
|
||||||
|
import type { VariantProps } from '@gluestack-ui/nativewind-utils';
|
||||||
|
import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
|
||||||
|
|
||||||
|
const SCOPE = 'FORM_CONTROL';
|
||||||
|
|
||||||
|
const formControlStyle = tva({
|
||||||
|
base: 'flex flex-col',
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
sm: '',
|
||||||
|
md: '',
|
||||||
|
lg: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const formControlErrorIconStyle = tva({
|
||||||
|
base: 'text-error-700 fill-none',
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
'2xs': 'h-3 w-3',
|
||||||
|
'xs': 'h-3.5 w-3.5',
|
||||||
|
'sm': 'h-4 w-4',
|
||||||
|
'md': 'h-[18px] w-[18px]',
|
||||||
|
'lg': 'h-5 w-5',
|
||||||
|
'xl': 'h-6 w-6',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const formControlErrorStyle = tva({
|
||||||
|
base: 'flex flex-row justify-start items-center mt-1 gap-1',
|
||||||
|
});
|
||||||
|
|
||||||
|
const formControlErrorTextStyle = tva({
|
||||||
|
base: 'text-error-700',
|
||||||
|
variants: {
|
||||||
|
isTruncated: {
|
||||||
|
true: 'web:truncate',
|
||||||
|
},
|
||||||
|
bold: {
|
||||||
|
true: 'font-bold',
|
||||||
|
},
|
||||||
|
underline: {
|
||||||
|
true: 'underline',
|
||||||
|
},
|
||||||
|
strikeThrough: {
|
||||||
|
true: 'line-through',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
'2xs': 'text-2xs',
|
||||||
|
'xs': 'text-xs',
|
||||||
|
'sm': 'text-sm',
|
||||||
|
'md': 'text-base',
|
||||||
|
'lg': 'text-lg',
|
||||||
|
'xl': 'text-xl',
|
||||||
|
'2xl': 'text-2xl',
|
||||||
|
'3xl': 'text-3xl',
|
||||||
|
'4xl': 'text-4xl',
|
||||||
|
'5xl': 'text-5xl',
|
||||||
|
'6xl': 'text-6xl',
|
||||||
|
},
|
||||||
|
sub: {
|
||||||
|
true: 'text-xs',
|
||||||
|
},
|
||||||
|
italic: {
|
||||||
|
true: 'italic',
|
||||||
|
},
|
||||||
|
highlight: {
|
||||||
|
true: 'bg-yellow-500',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const formControlHelperStyle = tva({
|
||||||
|
base: 'flex flex-row justify-start items-center mt-1',
|
||||||
|
});
|
||||||
|
|
||||||
|
const formControlHelperTextStyle = tva({
|
||||||
|
base: 'text-typography-500',
|
||||||
|
variants: {
|
||||||
|
isTruncated: {
|
||||||
|
true: 'web:truncate',
|
||||||
|
},
|
||||||
|
bold: {
|
||||||
|
true: 'font-bold',
|
||||||
|
},
|
||||||
|
underline: {
|
||||||
|
true: 'underline',
|
||||||
|
},
|
||||||
|
strikeThrough: {
|
||||||
|
true: 'line-through',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
'2xs': 'text-2xs',
|
||||||
|
'xs': 'text-xs',
|
||||||
|
'sm': 'text-xs',
|
||||||
|
'md': 'text-sm',
|
||||||
|
'lg': 'text-base',
|
||||||
|
'xl': 'text-xl',
|
||||||
|
'2xl': 'text-2xl',
|
||||||
|
'3xl': 'text-3xl',
|
||||||
|
'4xl': 'text-4xl',
|
||||||
|
'5xl': 'text-5xl',
|
||||||
|
'6xl': 'text-6xl',
|
||||||
|
},
|
||||||
|
sub: {
|
||||||
|
true: 'text-xs',
|
||||||
|
},
|
||||||
|
italic: {
|
||||||
|
true: 'italic',
|
||||||
|
},
|
||||||
|
highlight: {
|
||||||
|
true: 'bg-yellow-500',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const formControlLabelStyle = tva({
|
||||||
|
base: 'flex flex-row justify-start items-center mb-1',
|
||||||
|
});
|
||||||
|
|
||||||
|
const formControlLabelTextStyle = tva({
|
||||||
|
base: 'font-medium text-typography-900',
|
||||||
|
variants: {
|
||||||
|
isTruncated: {
|
||||||
|
true: 'web:truncate',
|
||||||
|
},
|
||||||
|
bold: {
|
||||||
|
true: 'font-bold',
|
||||||
|
},
|
||||||
|
underline: {
|
||||||
|
true: 'underline',
|
||||||
|
},
|
||||||
|
strikeThrough: {
|
||||||
|
true: 'line-through',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
'2xs': 'text-2xs',
|
||||||
|
'xs': 'text-xs',
|
||||||
|
'sm': 'text-sm',
|
||||||
|
'md': 'text-base',
|
||||||
|
'lg': 'text-lg',
|
||||||
|
'xl': 'text-xl',
|
||||||
|
'2xl': 'text-2xl',
|
||||||
|
'3xl': 'text-3xl',
|
||||||
|
'4xl': 'text-4xl',
|
||||||
|
'5xl': 'text-5xl',
|
||||||
|
'6xl': 'text-6xl',
|
||||||
|
},
|
||||||
|
sub: {
|
||||||
|
true: 'text-xs',
|
||||||
|
},
|
||||||
|
italic: {
|
||||||
|
true: 'italic',
|
||||||
|
},
|
||||||
|
highlight: {
|
||||||
|
true: 'bg-yellow-500',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const formControlLabelAstrickStyle = tva({
|
||||||
|
base: 'font-medium text-typography-900',
|
||||||
|
variants: {
|
||||||
|
isTruncated: {
|
||||||
|
true: 'web:truncate',
|
||||||
|
},
|
||||||
|
bold: {
|
||||||
|
true: 'font-bold',
|
||||||
|
},
|
||||||
|
underline: {
|
||||||
|
true: 'underline',
|
||||||
|
},
|
||||||
|
strikeThrough: {
|
||||||
|
true: 'line-through',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
'2xs': 'text-2xs',
|
||||||
|
'xs': 'text-xs',
|
||||||
|
'sm': 'text-sm',
|
||||||
|
'md': 'text-base',
|
||||||
|
'lg': 'text-lg',
|
||||||
|
'xl': 'text-xl',
|
||||||
|
'2xl': 'text-2xl',
|
||||||
|
'3xl': 'text-3xl',
|
||||||
|
'4xl': 'text-4xl',
|
||||||
|
'5xl': 'text-5xl',
|
||||||
|
'6xl': 'text-6xl',
|
||||||
|
},
|
||||||
|
sub: {
|
||||||
|
true: 'text-xs',
|
||||||
|
},
|
||||||
|
italic: {
|
||||||
|
true: 'italic',
|
||||||
|
},
|
||||||
|
highlight: {
|
||||||
|
true: 'bg-yellow-500',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
type IFormControlLabelAstrickProps = React.ComponentPropsWithoutRef<
|
||||||
|
typeof Text
|
||||||
|
> &
|
||||||
|
VariantProps<typeof formControlLabelAstrickStyle>;
|
||||||
|
|
||||||
|
const FormControlLabelAstrick = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof Text>,
|
||||||
|
IFormControlLabelAstrickProps
|
||||||
|
>(function FormControlLabelAstrick({ className, ...props }, ref) {
|
||||||
|
const { size: parentSize } = useStyleContext(SCOPE);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Text
|
||||||
|
ref={ref}
|
||||||
|
className={formControlLabelAstrickStyle({
|
||||||
|
parentVariants: { size: parentSize },
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export const UIFormControl = createFormControl({
|
||||||
|
Root: withStyleContext(View, SCOPE),
|
||||||
|
Error: View,
|
||||||
|
ErrorText: Text,
|
||||||
|
ErrorIcon: UIIcon,
|
||||||
|
Label: View,
|
||||||
|
LabelText: Text,
|
||||||
|
LabelAstrick: FormControlLabelAstrick,
|
||||||
|
Helper: View,
|
||||||
|
HelperText: Text,
|
||||||
|
});
|
||||||
|
|
||||||
|
cssInterop(PrimitiveIcon, {
|
||||||
|
className: {
|
||||||
|
target: 'style',
|
||||||
|
nativeStyleToProp: {
|
||||||
|
height: true,
|
||||||
|
width: true,
|
||||||
|
fill: true,
|
||||||
|
color: true,
|
||||||
|
stroke: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
type IFormControlProps = React.ComponentProps<typeof UIFormControl> &
|
||||||
|
VariantProps<typeof formControlStyle>;
|
||||||
|
|
||||||
|
const FormControl = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIFormControl>,
|
||||||
|
IFormControlProps
|
||||||
|
>(function FormControl({ className, size = 'md', ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIFormControl
|
||||||
|
ref={ref}
|
||||||
|
className={formControlStyle({ size, class: className })}
|
||||||
|
{...props}
|
||||||
|
context={{ size }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
type IFormControlErrorProps = React.ComponentProps<typeof UIFormControl.Error> &
|
||||||
|
VariantProps<typeof formControlErrorStyle>;
|
||||||
|
|
||||||
|
const FormControlError = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIFormControl.Error>,
|
||||||
|
IFormControlErrorProps
|
||||||
|
>(function FormControlError({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIFormControl.Error
|
||||||
|
ref={ref}
|
||||||
|
className={formControlErrorStyle({ class: className })}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
type IFormControlErrorTextProps = React.ComponentProps<
|
||||||
|
typeof UIFormControl.Error.Text
|
||||||
|
> &
|
||||||
|
VariantProps<typeof formControlErrorTextStyle>;
|
||||||
|
|
||||||
|
const FormControlErrorText = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIFormControl.Error.Text>,
|
||||||
|
IFormControlErrorTextProps
|
||||||
|
>(function FormControlErrorText({ className, size, ...props }, ref) {
|
||||||
|
const { size: parentSize } = useStyleContext(SCOPE);
|
||||||
|
return (
|
||||||
|
<UIFormControl.Error.Text
|
||||||
|
className={formControlErrorTextStyle({
|
||||||
|
parentVariants: { size: parentSize },
|
||||||
|
size,
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
type IFormControlErrorIconProps = React.ComponentProps<
|
||||||
|
typeof UIFormControl.Error.Icon
|
||||||
|
> &
|
||||||
|
VariantProps<typeof formControlErrorIconStyle> & {
|
||||||
|
height?: number;
|
||||||
|
width?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const FormControlErrorIcon = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIFormControl.Error.Icon>,
|
||||||
|
IFormControlErrorIconProps
|
||||||
|
>(function FormControlErrorIcon({ className, size, ...props }, ref) {
|
||||||
|
const { size: parentSize } = useStyleContext(SCOPE);
|
||||||
|
|
||||||
|
if (typeof size === 'number') {
|
||||||
|
return (
|
||||||
|
<UIFormControl.Error.Icon
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={formControlErrorIconStyle({ class: className })}
|
||||||
|
size={size}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else if (
|
||||||
|
(props.height !== undefined || props.width !== undefined) &&
|
||||||
|
size === undefined
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<UIFormControl.Error.Icon
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={formControlErrorIconStyle({ class: className })}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<UIFormControl.Error.Icon
|
||||||
|
className={formControlErrorIconStyle({
|
||||||
|
parentVariants: { size: parentSize },
|
||||||
|
size,
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
type IFormControlLabelProps = React.ComponentProps<typeof UIFormControl.Label> &
|
||||||
|
VariantProps<typeof formControlLabelStyle>;
|
||||||
|
|
||||||
|
const FormControlLabel = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIFormControl.Label>,
|
||||||
|
IFormControlLabelProps
|
||||||
|
>(function FormControlLabel({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIFormControl.Label
|
||||||
|
ref={ref}
|
||||||
|
className={formControlLabelStyle({ class: className })}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
type IFormControlLabelTextProps = React.ComponentProps<
|
||||||
|
typeof UIFormControl.Label.Text
|
||||||
|
> &
|
||||||
|
VariantProps<typeof formControlLabelTextStyle>;
|
||||||
|
|
||||||
|
const FormControlLabelText = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIFormControl.Label.Text>,
|
||||||
|
IFormControlLabelTextProps
|
||||||
|
>(function FormControlLabelText({ className, size, ...props }, ref) {
|
||||||
|
const { size: parentSize } = useStyleContext(SCOPE);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<UIFormControl.Label.Text
|
||||||
|
className={formControlLabelTextStyle({
|
||||||
|
parentVariants: { size: parentSize },
|
||||||
|
size,
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
type IFormControlHelperProps = React.ComponentProps<
|
||||||
|
typeof UIFormControl.Helper
|
||||||
|
> &
|
||||||
|
VariantProps<typeof formControlHelperStyle>;
|
||||||
|
|
||||||
|
const FormControlHelper = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIFormControl.Helper>,
|
||||||
|
IFormControlHelperProps
|
||||||
|
>(function FormControlHelper({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIFormControl.Helper
|
||||||
|
ref={ref}
|
||||||
|
className={formControlHelperStyle({
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
type IFormControlHelperTextProps = React.ComponentProps<
|
||||||
|
typeof UIFormControl.Helper.Text
|
||||||
|
> &
|
||||||
|
VariantProps<typeof formControlHelperTextStyle>;
|
||||||
|
|
||||||
|
const FormControlHelperText = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIFormControl.Helper.Text>,
|
||||||
|
IFormControlHelperTextProps
|
||||||
|
>(function FormControlHelperText({ className, size, ...props }, ref) {
|
||||||
|
const { size: parentSize } = useStyleContext(SCOPE);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<UIFormControl.Helper.Text
|
||||||
|
className={formControlHelperTextStyle({
|
||||||
|
parentVariants: { size: parentSize },
|
||||||
|
size,
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
FormControl.displayName = 'FormControl';
|
||||||
|
FormControlError.displayName = 'FormControlError';
|
||||||
|
FormControlErrorText.displayName = 'FormControlErrorText';
|
||||||
|
FormControlErrorIcon.displayName = 'FormControlErrorIcon';
|
||||||
|
FormControlLabel.displayName = 'FormControlLabel';
|
||||||
|
FormControlLabelText.displayName = 'FormControlLabelText';
|
||||||
|
FormControlLabelAstrick.displayName = 'FormControlLabelAstrick';
|
||||||
|
FormControlHelper.displayName = 'FormControlHelper';
|
||||||
|
FormControlHelperText.displayName = 'FormControlHelperText';
|
||||||
|
|
||||||
|
export {
|
||||||
|
FormControl,
|
||||||
|
FormControlError,
|
||||||
|
FormControlErrorText,
|
||||||
|
FormControlErrorIcon,
|
||||||
|
FormControlLabel,
|
||||||
|
FormControlLabelText,
|
||||||
|
FormControlLabelAstrick,
|
||||||
|
FormControlHelper,
|
||||||
|
FormControlHelperText,
|
||||||
|
};
|
||||||
217
ArtisanConnect/components/ui/input/index.tsx
Normal file
217
ArtisanConnect/components/ui/input/index.tsx
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
'use client';
|
||||||
|
import React from 'react';
|
||||||
|
import { createInput } from '@gluestack-ui/input';
|
||||||
|
import { View, Pressable, TextInput } from 'react-native';
|
||||||
|
import { tva } from '@gluestack-ui/nativewind-utils/tva';
|
||||||
|
import {
|
||||||
|
withStyleContext,
|
||||||
|
useStyleContext,
|
||||||
|
} from '@gluestack-ui/nativewind-utils/withStyleContext';
|
||||||
|
import { cssInterop } from 'nativewind';
|
||||||
|
import type { VariantProps } from '@gluestack-ui/nativewind-utils';
|
||||||
|
import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
|
||||||
|
|
||||||
|
const SCOPE = 'INPUT';
|
||||||
|
|
||||||
|
const UIInput = createInput({
|
||||||
|
Root: withStyleContext(View, SCOPE),
|
||||||
|
Icon: UIIcon,
|
||||||
|
Slot: Pressable,
|
||||||
|
Input: TextInput,
|
||||||
|
});
|
||||||
|
|
||||||
|
cssInterop(PrimitiveIcon, {
|
||||||
|
className: {
|
||||||
|
target: 'style',
|
||||||
|
nativeStyleToProp: {
|
||||||
|
height: true,
|
||||||
|
width: true,
|
||||||
|
fill: true,
|
||||||
|
color: 'classNameColor',
|
||||||
|
stroke: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const inputStyle = tva({
|
||||||
|
base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300 items-center',
|
||||||
|
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
xl: 'h-12',
|
||||||
|
lg: 'h-11',
|
||||||
|
md: 'h-10',
|
||||||
|
sm: 'h-9',
|
||||||
|
},
|
||||||
|
|
||||||
|
variant: {
|
||||||
|
underlined:
|
||||||
|
'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700',
|
||||||
|
|
||||||
|
outline:
|
||||||
|
'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-indicator-error data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-indicator-error',
|
||||||
|
|
||||||
|
rounded:
|
||||||
|
'rounded-full border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-indicator-error data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-indicator-error',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const inputIconStyle = tva({
|
||||||
|
base: 'justify-center items-center text-typography-400 fill-none',
|
||||||
|
parentVariants: {
|
||||||
|
size: {
|
||||||
|
'2xs': 'h-3 w-3',
|
||||||
|
'xs': 'h-3.5 w-3.5',
|
||||||
|
'sm': 'h-4 w-4',
|
||||||
|
'md': 'h-[18px] w-[18px]',
|
||||||
|
'lg': 'h-5 w-5',
|
||||||
|
'xl': 'h-6 w-6',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const inputSlotStyle = tva({
|
||||||
|
base: 'justify-center items-center web:disabled:cursor-not-allowed',
|
||||||
|
});
|
||||||
|
|
||||||
|
const inputFieldStyle = tva({
|
||||||
|
base: 'flex-1 text-typography-900 py-0 px-3 placeholder:text-typography-500 h-full ios:leading-[0px] web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
|
||||||
|
|
||||||
|
parentVariants: {
|
||||||
|
variant: {
|
||||||
|
underlined: 'web:outline-0 web:outline-none px-0',
|
||||||
|
outline: 'web:outline-0 web:outline-none',
|
||||||
|
rounded: 'web:outline-0 web:outline-none px-4',
|
||||||
|
},
|
||||||
|
|
||||||
|
size: {
|
||||||
|
'2xs': 'text-2xs',
|
||||||
|
'xs': 'text-xs',
|
||||||
|
'sm': 'text-sm',
|
||||||
|
'md': 'text-base',
|
||||||
|
'lg': 'text-lg',
|
||||||
|
'xl': 'text-xl',
|
||||||
|
'2xl': 'text-2xl',
|
||||||
|
'3xl': 'text-3xl',
|
||||||
|
'4xl': 'text-4xl',
|
||||||
|
'5xl': 'text-5xl',
|
||||||
|
'6xl': 'text-6xl',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
type IInputProps = React.ComponentProps<typeof UIInput> &
|
||||||
|
VariantProps<typeof inputStyle> & { className?: string };
|
||||||
|
const Input = React.forwardRef<React.ComponentRef<typeof UIInput>, IInputProps>(
|
||||||
|
function Input(
|
||||||
|
{ className, variant = 'outline', size = 'md', ...props },
|
||||||
|
ref
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<UIInput
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={inputStyle({ variant, size, class: className })}
|
||||||
|
context={{ variant, size }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
type IInputIconProps = React.ComponentProps<typeof UIInput.Icon> &
|
||||||
|
VariantProps<typeof inputIconStyle> & {
|
||||||
|
className?: string;
|
||||||
|
height?: number;
|
||||||
|
width?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const InputIcon = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIInput.Icon>,
|
||||||
|
IInputIconProps
|
||||||
|
>(function InputIcon({ className, size, ...props }, ref) {
|
||||||
|
const { size: parentSize } = useStyleContext(SCOPE);
|
||||||
|
|
||||||
|
if (typeof size === 'number') {
|
||||||
|
return (
|
||||||
|
<UIInput.Icon
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={inputIconStyle({ class: className })}
|
||||||
|
size={size}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else if (
|
||||||
|
(props.height !== undefined || props.width !== undefined) &&
|
||||||
|
size === undefined
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<UIInput.Icon
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={inputIconStyle({ class: className })}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<UIInput.Icon
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={inputIconStyle({
|
||||||
|
parentVariants: {
|
||||||
|
size: parentSize,
|
||||||
|
},
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
type IInputSlotProps = React.ComponentProps<typeof UIInput.Slot> &
|
||||||
|
VariantProps<typeof inputSlotStyle> & { className?: string };
|
||||||
|
|
||||||
|
const InputSlot = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIInput.Slot>,
|
||||||
|
IInputSlotProps
|
||||||
|
>(function InputSlot({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIInput.Slot
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={inputSlotStyle({
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
type IInputFieldProps = React.ComponentProps<typeof UIInput.Input> &
|
||||||
|
VariantProps<typeof inputFieldStyle> & { className?: string };
|
||||||
|
|
||||||
|
const InputField = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIInput.Input>,
|
||||||
|
IInputFieldProps
|
||||||
|
>(function InputField({ className, ...props }, ref) {
|
||||||
|
const { variant: parentVariant, size: parentSize } = useStyleContext(SCOPE);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<UIInput.Input
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={inputFieldStyle({
|
||||||
|
parentVariants: {
|
||||||
|
variant: parentVariant,
|
||||||
|
size: parentSize,
|
||||||
|
},
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
Input.displayName = 'Input';
|
||||||
|
InputIcon.displayName = 'InputIcon';
|
||||||
|
InputSlot.displayName = 'InputSlot';
|
||||||
|
InputField.displayName = 'InputField';
|
||||||
|
|
||||||
|
export { Input, InputField, InputIcon, InputSlot };
|
||||||
277
ArtisanConnect/components/ui/select/index.tsx
Normal file
277
ArtisanConnect/components/ui/select/index.tsx
Normal file
@@ -0,0 +1,277 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { tva } from '@gluestack-ui/nativewind-utils/tva';
|
||||||
|
import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
|
||||||
|
import {
|
||||||
|
withStyleContext,
|
||||||
|
useStyleContext,
|
||||||
|
} from '@gluestack-ui/nativewind-utils/withStyleContext';
|
||||||
|
import type { VariantProps } from '@gluestack-ui/nativewind-utils';
|
||||||
|
import { createSelect } from '@gluestack-ui/select';
|
||||||
|
import { cssInterop } from 'nativewind';
|
||||||
|
import {
|
||||||
|
Actionsheet,
|
||||||
|
ActionsheetContent,
|
||||||
|
ActionsheetItem,
|
||||||
|
ActionsheetItemText,
|
||||||
|
ActionsheetDragIndicator,
|
||||||
|
ActionsheetDragIndicatorWrapper,
|
||||||
|
ActionsheetBackdrop,
|
||||||
|
ActionsheetScrollView,
|
||||||
|
ActionsheetVirtualizedList,
|
||||||
|
ActionsheetFlatList,
|
||||||
|
ActionsheetSectionList,
|
||||||
|
ActionsheetSectionHeaderText,
|
||||||
|
} from './select-actionsheet';
|
||||||
|
import { Pressable, View, TextInput } from 'react-native';
|
||||||
|
|
||||||
|
const SelectTriggerWrapper = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof Pressable>,
|
||||||
|
React.ComponentProps<typeof Pressable>
|
||||||
|
>(function SelectTriggerWrapper({ ...props }, ref) {
|
||||||
|
return <Pressable {...props} ref={ref} />;
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectIconStyle = tva({
|
||||||
|
base: 'text-background-500 fill-none',
|
||||||
|
parentVariants: {
|
||||||
|
size: {
|
||||||
|
'2xs': 'h-3 w-3',
|
||||||
|
'xs': 'h-3.5 w-3.5',
|
||||||
|
'sm': 'h-4 w-4',
|
||||||
|
'md': 'h-[18px] w-[18px]',
|
||||||
|
'lg': 'h-5 w-5',
|
||||||
|
'xl': 'h-6 w-6',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectStyle = tva({
|
||||||
|
base: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectTriggerStyle = tva({
|
||||||
|
base: 'border border-background-300 rounded flex-row items-center overflow-hidden data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[hover=true]:border-background-300',
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
xl: 'h-12',
|
||||||
|
lg: 'h-11',
|
||||||
|
md: 'h-10',
|
||||||
|
sm: 'h-9',
|
||||||
|
},
|
||||||
|
variant: {
|
||||||
|
underlined:
|
||||||
|
'border-0 border-b rounded-none data-[hover=true]:border-primary-700 data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_-1px_0_0] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700',
|
||||||
|
outline:
|
||||||
|
'data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:data-[hover=true]:web:shadow-primary-600 data-[invalid=true]:web:shadow-[inset_0_0_0_1px] data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700 data-[invalid=true]:data-[hover=true]:border-error-700',
|
||||||
|
rounded:
|
||||||
|
'rounded-full data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectInputStyle = tva({
|
||||||
|
base: 'py-auto px-3 placeholder:text-typography-500 web:w-full h-full text-typography-900 pointer-events-none web:outline-none ios:leading-[0px]',
|
||||||
|
parentVariants: {
|
||||||
|
size: {
|
||||||
|
xl: 'text-xl',
|
||||||
|
lg: 'text-lg',
|
||||||
|
md: 'text-base',
|
||||||
|
sm: 'text-sm',
|
||||||
|
},
|
||||||
|
variant: {
|
||||||
|
underlined: 'px-0',
|
||||||
|
outline: '',
|
||||||
|
rounded: 'px-4',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const UISelect = createSelect(
|
||||||
|
{
|
||||||
|
Root: View,
|
||||||
|
Trigger: withStyleContext(SelectTriggerWrapper),
|
||||||
|
Input: TextInput,
|
||||||
|
Icon: UIIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Portal: Actionsheet,
|
||||||
|
Backdrop: ActionsheetBackdrop,
|
||||||
|
Content: ActionsheetContent,
|
||||||
|
DragIndicator: ActionsheetDragIndicator,
|
||||||
|
DragIndicatorWrapper: ActionsheetDragIndicatorWrapper,
|
||||||
|
Item: ActionsheetItem,
|
||||||
|
ItemText: ActionsheetItemText,
|
||||||
|
ScrollView: ActionsheetScrollView,
|
||||||
|
VirtualizedList: ActionsheetVirtualizedList,
|
||||||
|
FlatList: ActionsheetFlatList,
|
||||||
|
SectionList: ActionsheetSectionList,
|
||||||
|
SectionHeaderText: ActionsheetSectionHeaderText,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
cssInterop(UISelect, { className: 'style' });
|
||||||
|
cssInterop(UISelect.Input, {
|
||||||
|
className: { target: 'style', nativeStyleToProp: { textAlign: true } },
|
||||||
|
});
|
||||||
|
cssInterop(SelectTriggerWrapper, { className: 'style' });
|
||||||
|
|
||||||
|
cssInterop(PrimitiveIcon, {
|
||||||
|
className: {
|
||||||
|
target: 'style',
|
||||||
|
nativeStyleToProp: {
|
||||||
|
height: true,
|
||||||
|
width: true,
|
||||||
|
fill: true,
|
||||||
|
color: 'classNameColor',
|
||||||
|
stroke: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
type ISelectProps = VariantProps<typeof selectStyle> &
|
||||||
|
React.ComponentProps<typeof UISelect> & { className?: string };
|
||||||
|
|
||||||
|
const Select = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UISelect>,
|
||||||
|
ISelectProps
|
||||||
|
>(function Select({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UISelect
|
||||||
|
className={selectStyle({
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
type ISelectTriggerProps = VariantProps<typeof selectTriggerStyle> &
|
||||||
|
React.ComponentProps<typeof UISelect.Trigger> & { className?: string };
|
||||||
|
|
||||||
|
const SelectTrigger = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UISelect.Trigger>,
|
||||||
|
ISelectTriggerProps
|
||||||
|
>(function SelectTrigger(
|
||||||
|
{ className, size = 'md', variant = 'outline', ...props },
|
||||||
|
ref
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<UISelect.Trigger
|
||||||
|
className={selectTriggerStyle({
|
||||||
|
class: className,
|
||||||
|
size,
|
||||||
|
variant,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
context={{ size, variant }}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
type ISelectInputProps = VariantProps<typeof selectInputStyle> &
|
||||||
|
React.ComponentProps<typeof UISelect.Input> & { className?: string };
|
||||||
|
|
||||||
|
const SelectInput = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UISelect.Input>,
|
||||||
|
ISelectInputProps
|
||||||
|
>(function SelectInput({ className, ...props }, ref) {
|
||||||
|
const { size: parentSize, variant: parentVariant } = useStyleContext();
|
||||||
|
return (
|
||||||
|
<UISelect.Input
|
||||||
|
className={selectInputStyle({
|
||||||
|
class: className,
|
||||||
|
parentVariants: {
|
||||||
|
size: parentSize,
|
||||||
|
variant: parentVariant,
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
type ISelectIcon = VariantProps<typeof selectIconStyle> &
|
||||||
|
React.ComponentProps<typeof UISelect.Icon> & { className?: string };
|
||||||
|
|
||||||
|
const SelectIcon = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UISelect.Icon>,
|
||||||
|
ISelectIcon
|
||||||
|
>(function SelectIcon({ className, size, ...props }, ref) {
|
||||||
|
const { size: parentSize } = useStyleContext();
|
||||||
|
if (typeof size === 'number') {
|
||||||
|
return (
|
||||||
|
<UISelect.Icon
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={selectIconStyle({ class: className })}
|
||||||
|
size={size}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else if (
|
||||||
|
//@ts-expect-error : web only
|
||||||
|
(props?.height !== undefined || props?.width !== undefined) &&
|
||||||
|
size === undefined
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<UISelect.Icon
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={selectIconStyle({ class: className })}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<UISelect.Icon
|
||||||
|
className={selectIconStyle({
|
||||||
|
class: className,
|
||||||
|
size,
|
||||||
|
parentVariants: {
|
||||||
|
size: parentSize,
|
||||||
|
},
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
Select.displayName = 'Select';
|
||||||
|
SelectTrigger.displayName = 'SelectTrigger';
|
||||||
|
SelectInput.displayName = 'SelectInput';
|
||||||
|
SelectIcon.displayName = 'SelectIcon';
|
||||||
|
|
||||||
|
// Actionsheet Components
|
||||||
|
const SelectPortal = UISelect.Portal;
|
||||||
|
const SelectBackdrop = UISelect.Backdrop;
|
||||||
|
const SelectContent = UISelect.Content;
|
||||||
|
const SelectDragIndicator = UISelect.DragIndicator;
|
||||||
|
const SelectDragIndicatorWrapper = UISelect.DragIndicatorWrapper;
|
||||||
|
const SelectItem = UISelect.Item;
|
||||||
|
const SelectScrollView = UISelect.ScrollView;
|
||||||
|
const SelectVirtualizedList = UISelect.VirtualizedList;
|
||||||
|
const SelectFlatList = UISelect.FlatList;
|
||||||
|
const SelectSectionList = UISelect.SectionList;
|
||||||
|
const SelectSectionHeaderText = UISelect.SectionHeaderText;
|
||||||
|
|
||||||
|
export {
|
||||||
|
Select,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectInput,
|
||||||
|
SelectIcon,
|
||||||
|
SelectPortal,
|
||||||
|
SelectBackdrop,
|
||||||
|
SelectContent,
|
||||||
|
SelectDragIndicator,
|
||||||
|
SelectDragIndicatorWrapper,
|
||||||
|
SelectItem,
|
||||||
|
SelectScrollView,
|
||||||
|
SelectVirtualizedList,
|
||||||
|
SelectFlatList,
|
||||||
|
SelectSectionList,
|
||||||
|
SelectSectionHeaderText,
|
||||||
|
};
|
||||||
562
ArtisanConnect/components/ui/select/select-actionsheet.tsx
Normal file
562
ArtisanConnect/components/ui/select/select-actionsheet.tsx
Normal file
@@ -0,0 +1,562 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { H4 } from '@expo/html-elements';
|
||||||
|
import { createActionsheet } from '@gluestack-ui/actionsheet';
|
||||||
|
import {
|
||||||
|
Pressable,
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
ScrollView,
|
||||||
|
VirtualizedList,
|
||||||
|
FlatList,
|
||||||
|
SectionList,
|
||||||
|
ViewStyle,
|
||||||
|
} from 'react-native';
|
||||||
|
import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
|
||||||
|
import { tva } from '@gluestack-ui/nativewind-utils/tva';
|
||||||
|
import type { VariantProps } from '@gluestack-ui/nativewind-utils';
|
||||||
|
import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
|
||||||
|
import { cssInterop } from 'nativewind';
|
||||||
|
import {
|
||||||
|
Motion,
|
||||||
|
AnimatePresence,
|
||||||
|
createMotionAnimatedComponent,
|
||||||
|
MotionComponentProps,
|
||||||
|
} from '@legendapp/motion';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
type IAnimatedPressableProps = React.ComponentProps<typeof Pressable> &
|
||||||
|
MotionComponentProps<typeof Pressable, ViewStyle, unknown, unknown, unknown>;
|
||||||
|
|
||||||
|
const AnimatedPressable = createMotionAnimatedComponent(
|
||||||
|
Pressable
|
||||||
|
) as React.ComponentType<IAnimatedPressableProps>;
|
||||||
|
|
||||||
|
type IMotionViewProps = React.ComponentProps<typeof View> &
|
||||||
|
MotionComponentProps<typeof View, ViewStyle, unknown, unknown, unknown>;
|
||||||
|
|
||||||
|
const MotionView = Motion.View as React.ComponentType<IMotionViewProps>;
|
||||||
|
|
||||||
|
export const UIActionsheet = createActionsheet({
|
||||||
|
Root: View,
|
||||||
|
Content: withStyleContext(MotionView),
|
||||||
|
Item: withStyleContext(Pressable),
|
||||||
|
ItemText: Text,
|
||||||
|
DragIndicator: View,
|
||||||
|
IndicatorWrapper: View,
|
||||||
|
Backdrop: AnimatedPressable,
|
||||||
|
ScrollView: ScrollView,
|
||||||
|
VirtualizedList: VirtualizedList,
|
||||||
|
FlatList: FlatList,
|
||||||
|
SectionList: SectionList,
|
||||||
|
SectionHeaderText: H4,
|
||||||
|
Icon: UIIcon,
|
||||||
|
AnimatePresence: AnimatePresence,
|
||||||
|
});
|
||||||
|
|
||||||
|
cssInterop(UIActionsheet, { className: 'style' });
|
||||||
|
cssInterop(UIActionsheet.Content, { className: 'style' });
|
||||||
|
cssInterop(UIActionsheet.Item, { className: 'style' });
|
||||||
|
cssInterop(UIActionsheet.ItemText, { className: 'style' });
|
||||||
|
cssInterop(UIActionsheet.DragIndicator, { className: 'style' });
|
||||||
|
cssInterop(UIActionsheet.DragIndicatorWrapper, { className: 'style' });
|
||||||
|
cssInterop(UIActionsheet.Backdrop, { className: 'style' });
|
||||||
|
cssInterop(UIActionsheet.ScrollView, {
|
||||||
|
className: 'style',
|
||||||
|
contentContainerClassName: 'contentContainerStyle',
|
||||||
|
indicatorClassName: 'indicatorStyle',
|
||||||
|
});
|
||||||
|
cssInterop(UIActionsheet.VirtualizedList, {
|
||||||
|
className: 'style',
|
||||||
|
ListFooterComponentClassName: 'ListFooterComponentStyle',
|
||||||
|
ListHeaderComponentClassName: 'ListHeaderComponentStyle',
|
||||||
|
contentContainerClassName: 'contentContainerStyle',
|
||||||
|
indicatorClassName: 'indicatorStyle',
|
||||||
|
});
|
||||||
|
cssInterop(UIActionsheet.FlatList, {
|
||||||
|
className: 'style',
|
||||||
|
ListFooterComponentClassName: 'ListFooterComponentStyle',
|
||||||
|
ListHeaderComponentClassName: 'ListHeaderComponentStyle',
|
||||||
|
columnWrapperClassName: 'columnWrapperStyle',
|
||||||
|
contentContainerClassName: 'contentContainerStyle',
|
||||||
|
indicatorClassName: 'indicatorStyle',
|
||||||
|
});
|
||||||
|
cssInterop(UIActionsheet.SectionList, { className: 'style' });
|
||||||
|
cssInterop(UIActionsheet.SectionHeaderText, { className: 'style' });
|
||||||
|
cssInterop(PrimitiveIcon, {
|
||||||
|
className: {
|
||||||
|
target: 'style',
|
||||||
|
nativeStyleToProp: {
|
||||||
|
height: true,
|
||||||
|
width: true,
|
||||||
|
fill: true,
|
||||||
|
color: 'classNameColor',
|
||||||
|
stroke: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionsheetStyle = tva({ base: 'w-full h-full web:pointer-events-none' });
|
||||||
|
|
||||||
|
const actionsheetContentStyle = tva({
|
||||||
|
base: 'items-center rounded-tl-3xl rounded-tr-3xl p-2 bg-background-0 web:pointer-events-auto web:select-none shadow-lg',
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionsheetItemStyle = tva({
|
||||||
|
base: 'w-full flex-row items-center p-3 rounded-sm data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-auto data-[disabled=true]:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 data-[focus=true]:bg-background-100 web:data-[focus-visible=true]:bg-background-100 data-[checked=true]:bg-background-100',
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionsheetItemTextStyle = tva({
|
||||||
|
base: 'text-typography-700 font-normal font-body tracking-md text-left mx-2',
|
||||||
|
variants: {
|
||||||
|
isTruncated: {
|
||||||
|
true: '',
|
||||||
|
},
|
||||||
|
bold: {
|
||||||
|
true: 'font-bold',
|
||||||
|
},
|
||||||
|
underline: {
|
||||||
|
true: 'underline',
|
||||||
|
},
|
||||||
|
strikeThrough: {
|
||||||
|
true: 'line-through',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
'2xs': 'text-2xs',
|
||||||
|
'xs': 'text-xs',
|
||||||
|
'sm': 'text-sm',
|
||||||
|
'md': 'text-base',
|
||||||
|
'lg': 'text-lg',
|
||||||
|
'xl': 'text-xl',
|
||||||
|
'2xl': 'text-2xl',
|
||||||
|
'3xl': 'text-3xl',
|
||||||
|
'4xl': 'text-4xl',
|
||||||
|
'5xl': 'text-5xl',
|
||||||
|
'6xl': 'text-6xl',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
size: 'md',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionsheetDragIndicatorStyle = tva({
|
||||||
|
base: 'w-16 h-1 bg-background-400 rounded-full',
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionsheetDragIndicatorWrapperStyle = tva({
|
||||||
|
base: 'w-full py-1 items-center',
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionsheetBackdropStyle = tva({
|
||||||
|
base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default web:pointer-events-auto',
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionsheetScrollViewStyle = tva({
|
||||||
|
base: 'w-full h-auto',
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionsheetVirtualizedListStyle = tva({
|
||||||
|
base: 'w-full h-auto',
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionsheetFlatListStyle = tva({
|
||||||
|
base: 'w-full h-auto',
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionsheetSectionListStyle = tva({
|
||||||
|
base: 'w-full h-auto',
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionsheetSectionHeaderTextStyle = tva({
|
||||||
|
base: 'leading-5 font-bold font-heading my-0 text-typography-500 p-3 uppercase',
|
||||||
|
variants: {
|
||||||
|
isTruncated: {
|
||||||
|
true: '',
|
||||||
|
},
|
||||||
|
bold: {
|
||||||
|
true: 'font-bold',
|
||||||
|
},
|
||||||
|
underline: {
|
||||||
|
true: 'underline',
|
||||||
|
},
|
||||||
|
strikeThrough: {
|
||||||
|
true: 'line-through',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
'5xl': 'text-5xl',
|
||||||
|
'4xl': 'text-4xl',
|
||||||
|
'3xl': 'text-3xl',
|
||||||
|
'2xl': 'text-2xl',
|
||||||
|
'xl': 'text-xl',
|
||||||
|
'lg': 'text-lg',
|
||||||
|
'md': 'text-base',
|
||||||
|
'sm': 'text-sm',
|
||||||
|
'xs': 'text-xs',
|
||||||
|
},
|
||||||
|
|
||||||
|
sub: {
|
||||||
|
true: 'text-xs',
|
||||||
|
},
|
||||||
|
italic: {
|
||||||
|
true: 'italic',
|
||||||
|
},
|
||||||
|
highlight: {
|
||||||
|
true: 'bg-yellow500',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
size: 'xs',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const actionsheetIconStyle = tva({
|
||||||
|
base: 'text-typography-900',
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
'2xs': 'h-3 w-3',
|
||||||
|
'xs': 'h-3.5 w-3.5',
|
||||||
|
'sm': 'h-4 w-4',
|
||||||
|
'md': 'w-4 h-4',
|
||||||
|
'lg': 'h-5 w-5',
|
||||||
|
'xl': 'h-6 w-6',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
type IActionsheetProps = VariantProps<typeof actionsheetStyle> &
|
||||||
|
React.ComponentProps<typeof UIActionsheet> & { className?: string };
|
||||||
|
|
||||||
|
type IActionsheetContentProps = VariantProps<typeof actionsheetContentStyle> &
|
||||||
|
React.ComponentProps<typeof UIActionsheet.Content> & { className?: string };
|
||||||
|
|
||||||
|
type IActionsheetItemProps = VariantProps<typeof actionsheetItemStyle> &
|
||||||
|
React.ComponentProps<typeof UIActionsheet.Item> & { className?: string };
|
||||||
|
|
||||||
|
type IActionsheetItemTextProps = VariantProps<typeof actionsheetItemTextStyle> &
|
||||||
|
React.ComponentProps<typeof UIActionsheet.ItemText> & { className?: string };
|
||||||
|
|
||||||
|
type IActionsheetDragIndicatorProps = VariantProps<
|
||||||
|
typeof actionsheetDragIndicatorStyle
|
||||||
|
> &
|
||||||
|
React.ComponentProps<typeof UIActionsheet.DragIndicator> & {
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type IActionsheetDragIndicatorWrapperProps = VariantProps<
|
||||||
|
typeof actionsheetDragIndicatorWrapperStyle
|
||||||
|
> &
|
||||||
|
React.ComponentProps<typeof UIActionsheet.DragIndicatorWrapper> & {
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type IActionsheetBackdropProps = VariantProps<typeof actionsheetBackdropStyle> &
|
||||||
|
React.ComponentProps<typeof UIActionsheet.Backdrop> & {
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type IActionsheetScrollViewProps = VariantProps<
|
||||||
|
typeof actionsheetScrollViewStyle
|
||||||
|
> &
|
||||||
|
React.ComponentProps<typeof UIActionsheet.ScrollView> & {
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type IActionsheetVirtualizedListProps = VariantProps<
|
||||||
|
typeof actionsheetVirtualizedListStyle
|
||||||
|
> &
|
||||||
|
React.ComponentProps<typeof UIActionsheet.VirtualizedList> & {
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type IActionsheetFlatListProps = VariantProps<typeof actionsheetFlatListStyle> &
|
||||||
|
React.ComponentProps<typeof UIActionsheet.FlatList> & {
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type IActionsheetSectionListProps = VariantProps<
|
||||||
|
typeof actionsheetSectionListStyle
|
||||||
|
> &
|
||||||
|
React.ComponentProps<typeof UIActionsheet.SectionList> & {
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type IActionsheetSectionHeaderTextProps = VariantProps<
|
||||||
|
typeof actionsheetSectionHeaderTextStyle
|
||||||
|
> &
|
||||||
|
React.ComponentProps<typeof UIActionsheet.SectionHeaderText> & {
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type IActionsheetIconProps = VariantProps<typeof actionsheetIconStyle> &
|
||||||
|
React.ComponentProps<typeof UIActionsheet.Icon> & {
|
||||||
|
className?: string;
|
||||||
|
as?: React.ElementType;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Actionsheet = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIActionsheet>,
|
||||||
|
IActionsheetProps
|
||||||
|
>(function Actionsheet({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIActionsheet
|
||||||
|
className={actionsheetStyle({
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const ActionsheetContent = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIActionsheet.Content>,
|
||||||
|
IActionsheetContentProps & { className?: string }
|
||||||
|
>(function ActionsheetContent({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIActionsheet.Content
|
||||||
|
className={actionsheetContentStyle({
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const ActionsheetItem = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIActionsheet.Item>,
|
||||||
|
IActionsheetItemProps
|
||||||
|
>(function ActionsheetItem({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIActionsheet.Item
|
||||||
|
className={actionsheetItemStyle({
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const ActionsheetItemText = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIActionsheet.ItemText>,
|
||||||
|
IActionsheetItemTextProps
|
||||||
|
>(function ActionsheetItemText(
|
||||||
|
{ className, isTruncated, bold, underline, strikeThrough, size, ...props },
|
||||||
|
ref
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<UIActionsheet.ItemText
|
||||||
|
className={actionsheetItemTextStyle({
|
||||||
|
class: className,
|
||||||
|
isTruncated,
|
||||||
|
bold,
|
||||||
|
underline,
|
||||||
|
strikeThrough,
|
||||||
|
size,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const ActionsheetDragIndicator = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIActionsheet.DragIndicator>,
|
||||||
|
IActionsheetDragIndicatorProps
|
||||||
|
>(function ActionsheetDragIndicator({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIActionsheet.DragIndicator
|
||||||
|
className={actionsheetDragIndicatorStyle({
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const ActionsheetDragIndicatorWrapper = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIActionsheet.DragIndicatorWrapper>,
|
||||||
|
IActionsheetDragIndicatorWrapperProps
|
||||||
|
>(function ActionsheetDragIndicatorWrapper({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIActionsheet.DragIndicatorWrapper
|
||||||
|
className={actionsheetDragIndicatorWrapperStyle({
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const ActionsheetBackdrop = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIActionsheet.Backdrop>,
|
||||||
|
IActionsheetBackdropProps
|
||||||
|
>(function ActionsheetBackdrop({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIActionsheet.Backdrop
|
||||||
|
initial={{
|
||||||
|
opacity: 0,
|
||||||
|
}}
|
||||||
|
animate={{
|
||||||
|
opacity: 0.5,
|
||||||
|
}}
|
||||||
|
exit={{
|
||||||
|
opacity: 0,
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
className={actionsheetBackdropStyle({
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const ActionsheetScrollView = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIActionsheet.ScrollView>,
|
||||||
|
IActionsheetScrollViewProps
|
||||||
|
>(function ActionsheetScrollView({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIActionsheet.ScrollView
|
||||||
|
className={actionsheetScrollViewStyle({
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const ActionsheetVirtualizedList = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIActionsheet.VirtualizedList>,
|
||||||
|
IActionsheetVirtualizedListProps
|
||||||
|
>(function ActionsheetVirtualizedList({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIActionsheet.VirtualizedList
|
||||||
|
className={actionsheetVirtualizedListStyle({
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const ActionsheetFlatList = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIActionsheet.FlatList>,
|
||||||
|
IActionsheetFlatListProps
|
||||||
|
>(function ActionsheetFlatList({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIActionsheet.FlatList
|
||||||
|
className={actionsheetFlatListStyle({
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const ActionsheetSectionList = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIActionsheet.SectionList>,
|
||||||
|
IActionsheetSectionListProps
|
||||||
|
>(function ActionsheetSectionList({ className, ...props }, ref) {
|
||||||
|
return (
|
||||||
|
<UIActionsheet.SectionList
|
||||||
|
className={actionsheetSectionListStyle({
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const ActionsheetSectionHeaderText = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIActionsheet.SectionHeaderText>,
|
||||||
|
IActionsheetSectionHeaderTextProps
|
||||||
|
>(function ActionsheetSectionHeaderText(
|
||||||
|
{
|
||||||
|
className,
|
||||||
|
isTruncated,
|
||||||
|
bold,
|
||||||
|
underline,
|
||||||
|
strikeThrough,
|
||||||
|
size,
|
||||||
|
sub,
|
||||||
|
italic,
|
||||||
|
highlight,
|
||||||
|
...props
|
||||||
|
},
|
||||||
|
ref
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<UIActionsheet.SectionHeaderText
|
||||||
|
className={actionsheetSectionHeaderTextStyle({
|
||||||
|
class: className,
|
||||||
|
isTruncated,
|
||||||
|
bold,
|
||||||
|
underline,
|
||||||
|
strikeThrough,
|
||||||
|
size,
|
||||||
|
sub,
|
||||||
|
italic,
|
||||||
|
highlight,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const ActionsheetIcon = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UIActionsheet.Icon>,
|
||||||
|
IActionsheetIconProps
|
||||||
|
>(function ActionsheetIcon(
|
||||||
|
{ className, as: AsComp, size = 'sm', ...props },
|
||||||
|
ref
|
||||||
|
) {
|
||||||
|
if (AsComp) {
|
||||||
|
return (
|
||||||
|
<AsComp
|
||||||
|
className={actionsheetIconStyle({
|
||||||
|
class: className,
|
||||||
|
size,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<UIActionsheet.Icon
|
||||||
|
className={actionsheetIconStyle({
|
||||||
|
class: className,
|
||||||
|
size,
|
||||||
|
})}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export {
|
||||||
|
Actionsheet,
|
||||||
|
ActionsheetContent,
|
||||||
|
ActionsheetItem,
|
||||||
|
ActionsheetItemText,
|
||||||
|
ActionsheetDragIndicator,
|
||||||
|
ActionsheetDragIndicatorWrapper,
|
||||||
|
ActionsheetBackdrop,
|
||||||
|
ActionsheetScrollView,
|
||||||
|
ActionsheetVirtualizedList,
|
||||||
|
ActionsheetFlatList,
|
||||||
|
ActionsheetSectionList,
|
||||||
|
ActionsheetSectionHeaderText,
|
||||||
|
ActionsheetIcon,
|
||||||
|
};
|
||||||
93
ArtisanConnect/components/ui/textarea/index.tsx
Normal file
93
ArtisanConnect/components/ui/textarea/index.tsx
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
'use client';
|
||||||
|
import React from 'react';
|
||||||
|
import { createTextarea } from '@gluestack-ui/textarea';
|
||||||
|
import { View, TextInput } from 'react-native';
|
||||||
|
import { tva } from '@gluestack-ui/nativewind-utils/tva';
|
||||||
|
import {
|
||||||
|
withStyleContext,
|
||||||
|
useStyleContext,
|
||||||
|
} from '@gluestack-ui/nativewind-utils/withStyleContext';
|
||||||
|
import type { VariantProps } from '@gluestack-ui/nativewind-utils';
|
||||||
|
|
||||||
|
const SCOPE = 'TEXTAREA';
|
||||||
|
const UITextarea = createTextarea({
|
||||||
|
Root: withStyleContext(View, SCOPE),
|
||||||
|
Input: TextInput,
|
||||||
|
});
|
||||||
|
|
||||||
|
const textareaStyle = tva({
|
||||||
|
base: 'w-full h-[100px] border border-background-300 rounded data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:data-[hover=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:bg-background-50 data-[disabled=true]:data-[hover=true]:border-background-300',
|
||||||
|
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:border-primary-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-indicator-primary data-[invalid=true]:data-[disabled=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-indicator-error ',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
sm: '',
|
||||||
|
md: '',
|
||||||
|
lg: '',
|
||||||
|
xl: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const textareaInputStyle = tva({
|
||||||
|
base: 'p-2 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
|
||||||
|
parentVariants: {
|
||||||
|
size: {
|
||||||
|
sm: 'text-sm',
|
||||||
|
md: 'text-base',
|
||||||
|
lg: 'text-lg',
|
||||||
|
xl: 'text-xl',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
type ITextareaProps = React.ComponentProps<typeof UITextarea> &
|
||||||
|
VariantProps<typeof textareaStyle>;
|
||||||
|
|
||||||
|
const Textarea = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UITextarea>,
|
||||||
|
ITextareaProps
|
||||||
|
>(function Textarea(
|
||||||
|
{ className, variant = 'default', size = 'md', ...props },
|
||||||
|
ref
|
||||||
|
) {
|
||||||
|
return (
|
||||||
|
<UITextarea
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={textareaStyle({ variant, class: className })}
|
||||||
|
context={{ size }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
type ITextareaInputProps = React.ComponentProps<typeof UITextarea.Input> &
|
||||||
|
VariantProps<typeof textareaInputStyle>;
|
||||||
|
|
||||||
|
const TextareaInput = React.forwardRef<
|
||||||
|
React.ComponentRef<typeof UITextarea.Input>,
|
||||||
|
ITextareaInputProps
|
||||||
|
>(function TextareaInput({ className, ...props }, ref) {
|
||||||
|
const { size: parentSize } = useStyleContext(SCOPE);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<UITextarea.Input
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
className={textareaInputStyle({
|
||||||
|
parentVariants: {
|
||||||
|
size: parentSize,
|
||||||
|
},
|
||||||
|
class: className,
|
||||||
|
})}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
Textarea.displayName = 'Textarea';
|
||||||
|
TextareaInput.displayName = 'TextareaInput';
|
||||||
|
|
||||||
|
export { Textarea, TextareaInput };
|
||||||
157
ArtisanConnect/package-lock.json
generated
157
ArtisanConnect/package-lock.json
generated
@@ -10,12 +10,18 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@expo/html-elements": "^0.4.2",
|
"@expo/html-elements": "^0.4.2",
|
||||||
"@expo/vector-icons": "^14.1.0",
|
"@expo/vector-icons": "^14.1.0",
|
||||||
|
"@gluestack-ui/actionsheet": "^0.2.53",
|
||||||
"@gluestack-ui/button": "^1.0.14",
|
"@gluestack-ui/button": "^1.0.14",
|
||||||
|
"@gluestack-ui/form-control": "^0.1.19",
|
||||||
"@gluestack-ui/icon": "^0.1.27",
|
"@gluestack-ui/icon": "^0.1.27",
|
||||||
"@gluestack-ui/image": "^0.1.17",
|
"@gluestack-ui/image": "^0.1.17",
|
||||||
|
"@gluestack-ui/input": "^0.1.38",
|
||||||
"@gluestack-ui/nativewind-utils": "^1.0.26",
|
"@gluestack-ui/nativewind-utils": "^1.0.26",
|
||||||
"@gluestack-ui/overlay": "^0.1.22",
|
"@gluestack-ui/overlay": "^0.1.22",
|
||||||
|
"@gluestack-ui/select": "^0.1.31",
|
||||||
|
"@gluestack-ui/textarea": "^0.1.25",
|
||||||
"@gluestack-ui/toast": "^1.0.9",
|
"@gluestack-ui/toast": "^1.0.9",
|
||||||
|
"@legendapp/motion": "^2.4.0",
|
||||||
"@tanstack/react-query": "^5.74.4",
|
"@tanstack/react-query": "^5.74.4",
|
||||||
"axios": "^1.8.4",
|
"axios": "^1.8.4",
|
||||||
"babel-plugin-module-resolver": "^5.0.2",
|
"babel-plugin-module-resolver": "^5.0.2",
|
||||||
@@ -2335,6 +2341,24 @@
|
|||||||
"tslib": "^2.8.0"
|
"tslib": "^2.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@gluestack-ui/actionsheet": {
|
||||||
|
"version": "0.2.53",
|
||||||
|
"resolved": "https://registry.npmjs.org/@gluestack-ui/actionsheet/-/actionsheet-0.2.53.tgz",
|
||||||
|
"integrity": "sha512-93qHvq6BHezJ7wt2lce4OQ38wXCGsDtglj5nlmwo2T41vj4ubOtDVoSUhXT+hfH0EmRr0TxFNeFqIgesO46qVw==",
|
||||||
|
"dependencies": {
|
||||||
|
"@gluestack-ui/hooks": "0.1.13",
|
||||||
|
"@gluestack-ui/overlay": "^0.1.22",
|
||||||
|
"@gluestack-ui/transitions": "^0.1.11",
|
||||||
|
"@gluestack-ui/utils": "^0.1.15",
|
||||||
|
"@react-native-aria/dialog": "^0.0.5",
|
||||||
|
"@react-native-aria/focus": "^0.2.9",
|
||||||
|
"@react-native-aria/interactions": "0.2.16"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16",
|
||||||
|
"react-dom": ">=16"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@gluestack-ui/button": {
|
"node_modules/@gluestack-ui/button": {
|
||||||
"version": "1.0.14",
|
"version": "1.0.14",
|
||||||
"resolved": "https://registry.npmjs.org/@gluestack-ui/button/-/button-1.0.14.tgz",
|
"resolved": "https://registry.npmjs.org/@gluestack-ui/button/-/button-1.0.14.tgz",
|
||||||
@@ -2349,6 +2373,19 @@
|
|||||||
"react-dom": ">=16"
|
"react-dom": ">=16"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@gluestack-ui/form-control": {
|
||||||
|
"version": "0.1.19",
|
||||||
|
"resolved": "https://registry.npmjs.org/@gluestack-ui/form-control/-/form-control-0.1.19.tgz",
|
||||||
|
"integrity": "sha512-6YbPbi/RZrXc5DyVPbxPV17FYaBoEl1yAdSwut8iE6n+yQekjluINrh2q5ZPWF2SGmyo7VSNcL85yeU5I97xHg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@gluestack-ui/utils": "^0.1.14",
|
||||||
|
"@react-native-aria/focus": "^0.2.9"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16",
|
||||||
|
"react-dom": ">=16"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@gluestack-ui/hooks": {
|
"node_modules/@gluestack-ui/hooks": {
|
||||||
"version": "0.1.13",
|
"version": "0.1.13",
|
||||||
"resolved": "https://registry.npmjs.org/@gluestack-ui/hooks/-/hooks-0.1.13.tgz",
|
"resolved": "https://registry.npmjs.org/@gluestack-ui/hooks/-/hooks-0.1.13.tgz",
|
||||||
@@ -2386,6 +2423,21 @@
|
|||||||
"react-dom": ">=16"
|
"react-dom": ">=16"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@gluestack-ui/input": {
|
||||||
|
"version": "0.1.38",
|
||||||
|
"resolved": "https://registry.npmjs.org/@gluestack-ui/input/-/input-0.1.38.tgz",
|
||||||
|
"integrity": "sha512-NzwDOXkkMYzBQ0h7UnhKA2h54/qlxDxMFGXykkmYOl7mc7QJc1aJaveo4yMHtpYvcQG17xLyD+Z+5CQYA76nvw==",
|
||||||
|
"dependencies": {
|
||||||
|
"@gluestack-ui/form-control": "^0.1.19",
|
||||||
|
"@gluestack-ui/utils": "^0.1.15",
|
||||||
|
"@react-native-aria/focus": "^0.2.9",
|
||||||
|
"@react-native-aria/interactions": "0.2.16"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16",
|
||||||
|
"react-dom": ">=16"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@gluestack-ui/nativewind-utils": {
|
"node_modules/@gluestack-ui/nativewind-utils": {
|
||||||
"version": "1.0.26",
|
"version": "1.0.26",
|
||||||
"resolved": "https://registry.npmjs.org/@gluestack-ui/nativewind-utils/-/nativewind-utils-1.0.26.tgz",
|
"resolved": "https://registry.npmjs.org/@gluestack-ui/nativewind-utils/-/nativewind-utils-1.0.26.tgz",
|
||||||
@@ -2440,6 +2492,36 @@
|
|||||||
"react-dom": ">=16"
|
"react-dom": ">=16"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@gluestack-ui/select": {
|
||||||
|
"version": "0.1.31",
|
||||||
|
"resolved": "https://registry.npmjs.org/@gluestack-ui/select/-/select-0.1.31.tgz",
|
||||||
|
"integrity": "sha512-d8vfdCK4VFBYEDYMCTRYcZCWvYaf7UWMJGg2uMnutHA8Y4sDXjKR5P821xKdh75QVkmZRZm1MdzSWFvXUzAlgg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@gluestack-ui/form-control": "^0.1.19",
|
||||||
|
"@gluestack-ui/hooks": "0.1.13",
|
||||||
|
"@gluestack-ui/utils": "^0.1.14",
|
||||||
|
"@react-native-aria/focus": "^0.2.9"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16",
|
||||||
|
"react-dom": ">=16"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@gluestack-ui/textarea": {
|
||||||
|
"version": "0.1.25",
|
||||||
|
"resolved": "https://registry.npmjs.org/@gluestack-ui/textarea/-/textarea-0.1.25.tgz",
|
||||||
|
"integrity": "sha512-hXJx9LYSfrx7/Lrh2D2cTjr7PqvdkxJXBv2VydcR01X4WEN34DZkik+at/qk5FBw+p4t0vE+BTAK3IoMJwWvGg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@gluestack-ui/form-control": "^0.1.19",
|
||||||
|
"@gluestack-ui/utils": "^0.1.14",
|
||||||
|
"@react-native-aria/focus": "^0.2.9",
|
||||||
|
"@react-native-aria/interactions": "^0.2.16"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16",
|
||||||
|
"react-dom": ">=16"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@gluestack-ui/toast": {
|
"node_modules/@gluestack-ui/toast": {
|
||||||
"version": "1.0.9",
|
"version": "1.0.9",
|
||||||
"resolved": "https://registry.npmjs.org/@gluestack-ui/toast/-/toast-1.0.9.tgz",
|
"resolved": "https://registry.npmjs.org/@gluestack-ui/toast/-/toast-1.0.9.tgz",
|
||||||
@@ -2828,6 +2910,34 @@
|
|||||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@legendapp/motion": {
|
||||||
|
"version": "2.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@legendapp/motion/-/motion-2.4.0.tgz",
|
||||||
|
"integrity": "sha512-AAYpRLGvxGD5hIGl9sVHyoUufr66zoH82PuxYcKiPSMdCBI3jwZFWh6CuHjV1leRKVIRk2py1rSvIVabG8eqcw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@legendapp/tools": "2.0.1"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"nativewind": "*",
|
||||||
|
"react": ">=16",
|
||||||
|
"react-native": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@legendapp/tools": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@legendapp/tools/-/tools-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-Kxt0HWvWElRK6oybHRzcYxdgaKGwuaiRNreS7usW7QuHXRIHaH4yMcW2YNRG4DHE5fpefv+Bno/BohQcCE4FaA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"react": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@nodelib/fs.scandir": {
|
"node_modules/@nodelib/fs.scandir": {
|
||||||
"version": "2.1.5",
|
"version": "2.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||||
@@ -2922,6 +3032,24 @@
|
|||||||
"react": "^16.8 || ^17.0 || ^18.0"
|
"react": "^16.8 || ^17.0 || ^18.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@react-aria/dialog": {
|
||||||
|
"version": "3.5.24",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-aria/dialog/-/dialog-3.5.24.tgz",
|
||||||
|
"integrity": "sha512-tw0WH89gVpHMI5KUQhuzRE+IYCc9clRfDvCppuXNueKDrZmrQKbeoU6d0b5WYRsBur2+d7ErtvpLzHVqE1HzfA==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@react-aria/interactions": "^3.25.0",
|
||||||
|
"@react-aria/overlays": "^3.27.0",
|
||||||
|
"@react-aria/utils": "^3.28.2",
|
||||||
|
"@react-types/dialog": "^3.5.17",
|
||||||
|
"@react-types/shared": "^3.29.0",
|
||||||
|
"@swc/helpers": "^0.5.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
|
||||||
|
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@react-aria/focus": {
|
"node_modules/@react-aria/focus": {
|
||||||
"version": "3.20.2",
|
"version": "3.20.2",
|
||||||
"resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.20.2.tgz",
|
"resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.20.2.tgz",
|
||||||
@@ -3048,6 +3176,22 @@
|
|||||||
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@react-native-aria/dialog": {
|
||||||
|
"version": "0.0.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-native-aria/dialog/-/dialog-0.0.5.tgz",
|
||||||
|
"integrity": "sha512-ZThiWyymf3WiA2EdjStV32pTL3RjAb7H/CL0Zsd1wKNuw1lU9HX6h4UIUpt0MZhcFCUnZjCovNtU9IRwbbdj/Q==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@react-aria/dialog": "*",
|
||||||
|
"@react-native-aria/utils": "0.2.12",
|
||||||
|
"@react-types/dialog": "*",
|
||||||
|
"@react-types/shared": "*"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "*",
|
||||||
|
"react-native": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@react-native-aria/focus": {
|
"node_modules/@react-native-aria/focus": {
|
||||||
"version": "0.2.9",
|
"version": "0.2.9",
|
||||||
"resolved": "https://registry.npmjs.org/@react-native-aria/focus/-/focus-0.2.9.tgz",
|
"resolved": "https://registry.npmjs.org/@react-native-aria/focus/-/focus-0.2.9.tgz",
|
||||||
@@ -3753,6 +3897,19 @@
|
|||||||
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@react-types/dialog": {
|
||||||
|
"version": "3.5.17",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-types/dialog/-/dialog-3.5.17.tgz",
|
||||||
|
"integrity": "sha512-rKe2WrT272xuCH13euegBGjJAORYXJpHsX2hlu/f02TmMG4nSLss9vKBnY2N7k7nci65k5wDTW6lcsvQ4Co5zQ==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"@react-types/overlays": "^3.8.14",
|
||||||
|
"@react-types/shared": "^3.29.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@react-types/overlays": {
|
"node_modules/@react-types/overlays": {
|
||||||
"version": "3.8.14",
|
"version": "3.8.14",
|
||||||
"resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.14.tgz",
|
"resolved": "https://registry.npmjs.org/@react-types/overlays/-/overlays-3.8.14.tgz",
|
||||||
|
|||||||
@@ -11,12 +11,18 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@expo/html-elements": "^0.4.2",
|
"@expo/html-elements": "^0.4.2",
|
||||||
"@expo/vector-icons": "^14.1.0",
|
"@expo/vector-icons": "^14.1.0",
|
||||||
|
"@gluestack-ui/actionsheet": "^0.2.53",
|
||||||
"@gluestack-ui/button": "^1.0.14",
|
"@gluestack-ui/button": "^1.0.14",
|
||||||
|
"@gluestack-ui/form-control": "^0.1.19",
|
||||||
"@gluestack-ui/icon": "^0.1.27",
|
"@gluestack-ui/icon": "^0.1.27",
|
||||||
"@gluestack-ui/image": "^0.1.17",
|
"@gluestack-ui/image": "^0.1.17",
|
||||||
|
"@gluestack-ui/input": "^0.1.38",
|
||||||
"@gluestack-ui/nativewind-utils": "^1.0.26",
|
"@gluestack-ui/nativewind-utils": "^1.0.26",
|
||||||
"@gluestack-ui/overlay": "^0.1.22",
|
"@gluestack-ui/overlay": "^0.1.22",
|
||||||
|
"@gluestack-ui/select": "^0.1.31",
|
||||||
|
"@gluestack-ui/textarea": "^0.1.25",
|
||||||
"@gluestack-ui/toast": "^1.0.9",
|
"@gluestack-ui/toast": "^1.0.9",
|
||||||
|
"@legendapp/motion": "^2.4.0",
|
||||||
"@tanstack/react-query": "^5.74.4",
|
"@tanstack/react-query": "^5.74.4",
|
||||||
"axios": "^1.8.4",
|
"axios": "^1.8.4",
|
||||||
"babel-plugin-module-resolver": "^5.0.2",
|
"babel-plugin-module-resolver": "^5.0.2",
|
||||||
|
|||||||
Reference in New Issue
Block a user