ncore-ui-kit/example/src/pages/components/button/index.tsx

import {
    useLayoutEffect,
    useState
} from "react";
import {
    View
} from "react-native";
import stylesheet from "./stylesheet";
import {
    NCoreUIKitLocalize,
    NCoreUIKitTheme,
    PageContainer,
    SelectBox,
    TextInput,
    Button,
    Header,
    Switch
    ,
    Text
} from "ncore-ui-kit";
import {
    useNavigation
} from "@react-navigation/native";
import type RootStackParamList from "../../navigation/type";
import type {
    NativeStackNavigationProp
} from "@react-navigation/native-stack";
import type {
    IButtonProps
} from "ncore-ui-kit";
import {
    Home as HomeIcon
} from "lucide-react-native";

const BUTTON_TYPES: Array<IButtonProps["type"]> = [
    "primary",
    "danger",
    "warning",
    "success",
    "info"
];
const BUTTON_VARIANTS: Array<IButtonProps["variant"]> = [
    "filled",
    "outline",
    "ghost"
];
const BUTTON_SIZES: Array<IButtonProps["size"]> = [
    "small",
    "medium",
    "large"
];

const BUTTON_TYPES_DATA = BUTTON_TYPES.map(item => ({
    __key: item as string,
    __title: item as string
}));

const BUTTON_SPREAD_BEHAVIOURS: Array<IButtonProps["spreadBehaviour"]> = [
    "baseline",
    "stretch",
    "free"
];

const BUTTON_VARIANTS_DATA = BUTTON_VARIANTS.map(item => ({
    __key: item as string,
    __title: item as string
}));

const BUTTON_SIZES_DATA = BUTTON_SIZES.map(item => ({
    __key: item as string,
    __title: item as string
}));

const ButtonPage = () => {
    const {
        radiuses,
        borders,
        spaces,
        colors
    } = NCoreUIKitTheme.useContext();

    const {
        localize
    } = NCoreUIKitLocalize.useContext();

    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();

    const [
        typeIndex,
        setTypeIndex
    ] = useState<number>(0);

    const [
        spreadIndex,
        setSpreadIndex
    ] = useState<number>(0);

    const [
        variantIndex,
        setVariantIndex
    ] = useState<number>(0);

    const [
        sizeIndex,
        setSizeIndex
    ] = useState<number>(1);

    const [
        title,
        setTitle
    ] = useState<string>("");

    const [
        isLoading,
        setIsLoading
    ] = useState<boolean>(false);

    const [
        isDisabled,
        setIsDisabled
    ] = useState<boolean>(false);

    const [
        isCustomPadding,
        setIsCustomPadding
    ] = useState<boolean>(false);

    const [
        showIcon,
        setShowIcon
    ] = useState<boolean>(false);

    const [
        iconDirection,
        setIconDirection
    ] = useState<"left" | "right">("left");

    useLayoutEffect(() => {
        navigation.setOptions({
            headerShown: true,
            header: () => <Header
                isWrapSafeareaContext={false}
                title={localize("button")}
                navigation={navigation}
                isGoBackEnable={true}
            />
        });
    }, []);

    return <PageContainer
        isWorkWithHeaderSpace={false}
        isScrollable={true}
        scrollViewProps={{
            contentContainerStyle: stylesheet.scrollContent
        }}
        scrollViewStyle={[
            stylesheet.container
        ]}
    >
        <View
            style={[
                stylesheet.contentContainer
            ]}
        >
            <Text
                variant="bodyMediumSize"
                color="mid"
                style={{
                    marginBottom: 20
                }}
            >
                {localize("button-desc")}
            </Text>
            <View
                style={{
                    borderColor: colors.content.border.subtle,
                    marginBottom: spaces.spacingMd,
                    borderRadius: radiuses.form,
                    borderWidth: borders.line,
                    padding: spaces.spacingMd,
                    justifyContent: "center",
                    alignItems: "center",
                    minHeight: 120
                }}
            >
                <Button
                    spreadBehaviour={BUTTON_SPREAD_BEHAVIOURS[spreadIndex]}
                    title={title || localize("example-button")}
                    variant={BUTTON_VARIANTS[variantIndex]}
                    isCustomPadding={isCustomPadding}
                    type={BUTTON_TYPES[typeIndex]}
                    size={BUTTON_SIZES[sizeIndex]}
                    iconDirection={iconDirection}
                    isDisabled={isDisabled}
                    isLoading={isLoading}
                    icon={showIcon ? ({
                        color,
                        size
                    }) => <HomeIcon
                        color={colors.content.icon[color]}
                        size={size}
                    /> : undefined}
                    style={{
                        marginBottom: spaces.spacingLg
                    }}
                    onPress={() => {
                    }}
                />
            </View>
            <TextInput
                placeholder={localize("enter-text")}
                title={localize("button-title")}
                spreadBehaviour="stretch"
                onChangeText={setTitle}
                value={title}
                style={{
                    marginBottom: spaces.spacingMd
                }}
            />
            <View
                style={{
                    justifyContent: "space-between",
                    gap: spaces.spacingMd,
                    flexDirection: "row",
                    flexWrap: "wrap",
                    width: "100%"
                }}
            >
                <SelectBox
                    initialSelectedItems={BUTTON_TYPES_DATA[typeIndex] ? [
                        BUTTON_TYPES_DATA[typeIndex]
                    ] : []}
                    titleExtractor={(item) => item.__title}
                    keyExtractor={(item) => item.__key}
                    title={localize("change-type")}
                    spreadBehaviour="free"
                    data={BUTTON_TYPES_DATA}
                    onChange={(selectedItems) => {
                        if (selectedItems.length > 0) {
                            const index = BUTTON_TYPES.indexOf(selectedItems[0]!.__key as IButtonProps["type"]);
                            if (index !== -1) setTypeIndex(index);
                        }
                    }}
                />
                <SelectBox
                    initialSelectedItems={BUTTON_VARIANTS_DATA[variantIndex] ? [
                        BUTTON_VARIANTS_DATA[variantIndex]
                    ] : []}
                    titleExtractor={(item) => item.__title}
                    keyExtractor={(item) => item.__key}
                    title={localize("change-variant")}
                    data={BUTTON_VARIANTS_DATA}
                    spreadBehaviour="free"
                    onChange={(selectedItems) => {
                        if (selectedItems.length > 0) {
                            const index = BUTTON_VARIANTS.indexOf(selectedItems[0]!.__key as IButtonProps["variant"]);
                            if (index !== -1) setVariantIndex(index);
                        }
                    }}
                />
                <Button
                    title={`${localize("change-spread")}: ${BUTTON_SPREAD_BEHAVIOURS[spreadIndex]}`}
                    verticalLocationForStretchFix="center"
                    isFixVerticalStretch={true}
                    spreadBehaviour="free"
                    onPress={() => {
                        setSpreadIndex(prev => prev + 1 > BUTTON_SPREAD_BEHAVIOURS.length - 1 ? 0 : prev + 1);
                    }}
                />
                <SelectBox
                    initialSelectedItems={BUTTON_SIZES_DATA[sizeIndex] ? [
                        BUTTON_SIZES_DATA[sizeIndex]
                    ] : []}
                    titleExtractor={(item) => item.__title}
                    keyExtractor={(item) => item.__key}
                    title={localize("change-size")}
                    spreadBehaviour="free"
                    data={BUTTON_SIZES_DATA}
                    onChange={(selectedItems) => {
                        if (selectedItems.length > 0) {
                            const index = BUTTON_SIZES.indexOf(selectedItems[0]!.__key as IButtonProps["size"]);
                            if (index !== -1) setSizeIndex(index);
                        }
                    }}
                />
                <View
                    style={{
                        justifyContent: "space-between",
                        flexDirection: "row",
                        alignItems: "center",
                        flexWrap: "wrap",
                        width: "100%"
                    }}
                >
                    <Switch
                        title={localize("toggle-icon-direction")}
                        isActive={iconDirection === "right"}
                        subTitle={localize(iconDirection)}
                        onPress={() => {
                            setIconDirection(iconDirection === "left" ? "right" : "left");
                        }}
                    />
                    <Switch
                        title={localize("toggle-icon")}
                        isActive={showIcon}
                        onPress={() => {
                            setShowIcon(!showIcon);
                        }}
                    />
                    <Switch
                        title={localize("toggle-loading")}
                        isActive={isLoading}
                        onPress={() => {
                            setIsLoading(!isLoading);
                        }}
                    />
                    <Switch
                        title={localize("toggle-disabled")}
                        isActive={isDisabled}
                        onPress={() => {
                            setIsDisabled(!isDisabled);
                        }}
                    />
                    <Switch
                        title={localize("toggle-custom-padding")}
                        isActive={isCustomPadding}
                        onPress={() => {
                            setIsCustomPadding(!isCustomPadding);
                        }}
                    />
                </View>
            </View>
        </View>
    </PageContainer>;
};
export default ButtonPage;