Skip to content

Commit ba5a834

Browse files
kodiakhq[bot]kodiakhq[bot]
authored
Update component screens (#89)
Update component screens
2 parents 1f2c52c + c2d0648 commit ba5a834

32 files changed

+1935
-671
lines changed

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828
},
2929
"devDependencies": {
3030
"@babel/core": "^7.19.3",
31-
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
3231
"@babel/runtime": "7.18.9",
32+
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
3333
"@types/react": "~18.0.24",
3434
"@types/react-native": "~0.70.6",
3535
"babel-loader": "8.2.5",

‎example/src/App.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ const App = () => {
1818
`flex-1 android:mt-[${StatusBar.currentHeight || 0}px]`,
1919
)}
2020
>
21+
<StatusBar
22+
translucent
23+
backgroundColor={"transparent"}
24+
barStyle="dark-content"
25+
/>
2126
<AdaptUIProvider>
2227
<AppRoot />
2328
</AdaptUIProvider>

‎example/src/AppRoot.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const Drawer = createDrawerNavigator();
2727

2828
const AppRoot = () => {
2929
return (
30-
<Drawer.Navigator initialRouteName="SelectScreen">
30+
<Drawer.Navigator initialRouteName="AvatarScreen">
3131
<Drawer.Screen
3232
options={{ title: "Avatar" }}
3333
name="AvatarScreen"

‎example/src/components/Group.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, { PropsWithChildren } from "react";
2+
import { ViewProps } from "react-native";
3+
import {
4+
Box,
5+
styleAdapter,
6+
Text,
7+
useTheme,
8+
} from "@adaptui/react-native-tailwind";
9+
10+
export interface GroupType extends ViewProps {
11+
label: string;
12+
}
13+
14+
export const Group = (props: PropsWithChildren<GroupType>) => {
15+
const { children, label, style, ...other } = props;
16+
const tailwind = useTheme();
17+
return (
18+
<Box
19+
style={[
20+
tailwind.style("bg-white-800 rounded-xl p-2 flex-col w-full"),
21+
styleAdapter(style),
22+
]}
23+
{...other}
24+
>
25+
<Text style={tailwind.style("ml-3 font-bold")}>{label}</Text>
26+
<Box
27+
style={tailwind.style(
28+
"flex flex-row flex-wrap justify-start items-center mt-2 ml-0",
29+
)}
30+
>
31+
{children}
32+
</Box>
33+
</Box>
34+
);
35+
};

‎example/src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./Group";

‎example/src/modules/feedback/CircularProgressScreen.tsx‎

Lines changed: 96 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
1-
import React from "react";
1+
import React, { SetStateAction, useState } from "react";
22
import {
33
Box,
44
Button,
55
CircularProgress,
6+
CircularProgressSizes,
7+
CircularProgressTheme,
8+
Radio,
9+
RadioGroup,
10+
Switch,
611
useTheme,
712
} from "@adaptui/react-native-tailwind";
813

14+
import { Group } from "../../components";
15+
916
const useCircularProgressState = (initialValue: number | null = 0) => {
1017
const [value, setValue] = React.useState<number | null>(initialValue);
1118

@@ -33,45 +40,98 @@ const useCircularProgressState = (initialValue: number | null = 0) => {
3340

3441
export const CircularProgressScreen = () => {
3542
const tailwind = useTheme();
36-
const [value, setValue] = useCircularProgressState();
43+
const [progressValue, setProgressValue] = useCircularProgressState();
44+
const [selectedTheme, setSelectedTheme] =
45+
useState<CircularProgressTheme>("base");
46+
const [selectedSize, setSelectedSize] = useState<CircularProgressSizes>("md");
47+
const [hasHints, setHasHints] = useState<boolean>(false);
48+
const [hasCustomTrack, setHasCustomTrack] = useState<boolean>(false);
49+
3750
return (
38-
<Box
39-
style={tailwind.style(
40-
"flex-1 justify-center items-center px-2 bg-white-900",
41-
)}
42-
>
43-
<Box style={tailwind.style("my-5")}>
44-
<CircularProgress size="sm" />
45-
</Box>
46-
<Box style={tailwind.style("my-5")}>
47-
<CircularProgress themeColor="primary" />
48-
</Box>
49-
<Box style={tailwind.style("my-5")}>
50-
<CircularProgress
51-
style={tailwind.style("w-48 h-48")}
52-
themeColor="primary"
53-
progressTrackColor={tailwind.getColor("text-green-600")}
54-
/>
55-
</Box>
56-
<Box style={tailwind.style("my-5")}>
57-
<CircularProgress size="lg" />
58-
</Box>
59-
<Box style={tailwind.style("my-5")}>
60-
<CircularProgress value={value} themeColor="primary" size="xl" />
61-
</Box>
62-
<Box style={tailwind.style("my-5")}>
51+
<Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
52+
<Box
53+
style={tailwind.style(
54+
"flex-1 px-2 justify-center items-center bg-white-900",
55+
)}
56+
>
6357
<CircularProgress
64-
hint={`${value}%`}
65-
value={value}
66-
themeColor="primary"
67-
size="xl"
58+
style={!hasCustomTrack ? null : tailwind.style("w-48 h-48")}
59+
hint={!hasHints ? null : `${progressValue}%`}
60+
value={progressValue}
61+
themeColor={selectedTheme}
62+
size={selectedSize}
63+
progressTrackColor={
64+
!hasCustomTrack ? null : tailwind.getColor("text-green-600")
65+
}
6866
/>
6967
</Box>
70-
<Box style={tailwind.style("flex-row justify-center w-full")}>
71-
<Button onPress={() => setValue(0)}>Reset</Button>
72-
<Button variant="ghost" onPress={() => setValue(null)}>
73-
Make Indeterminate
74-
</Button>
68+
<Box
69+
style={tailwind.style(
70+
"rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
71+
)}
72+
>
73+
<RadioGroup
74+
value={selectedSize}
75+
onChange={(value: CircularProgressSizes) => setSelectedSize(value)}
76+
orientation="horizontal"
77+
>
78+
<Group label="Sizes">
79+
<Radio value="sm" label="sm" />
80+
<Radio value="md" label="md" />
81+
<Radio value="lg" label="lg" />
82+
<Radio value="xl" label="xl" />
83+
</Group>
84+
</RadioGroup>
85+
<RadioGroup
86+
value={selectedTheme}
87+
onChange={(value: CircularProgressTheme) => setSelectedTheme(value)}
88+
orientation="horizontal"
89+
>
90+
<Group label="Theme" style={tailwind.style("mt-2")}>
91+
<Radio value="base" label="base" />
92+
<Radio value="primary" label="primary" />
93+
</Group>
94+
</RadioGroup>
95+
<Box
96+
style={tailwind.style(
97+
"flex flex-row justify-start flex-wrap w-full mt-2",
98+
)}
99+
>
100+
<Switch
101+
state={hasHints}
102+
onStateChange={(value: SetStateAction<boolean>) => {
103+
setHasHints(value);
104+
setProgressValue(0);
105+
}}
106+
size="md"
107+
label="Has Hints"
108+
/>
109+
<Switch
110+
state={hasCustomTrack}
111+
onStateChange={(value: SetStateAction<boolean>) =>
112+
setHasCustomTrack(value)
113+
}
114+
size="md"
115+
style={tailwind.style("ml-1")}
116+
label="Custom track"
117+
/>
118+
</Box>
119+
<Box
120+
style={tailwind.style(
121+
"flex flex-row justify-start flex-wrap w-full mt-2",
122+
)}
123+
>
124+
<Button variant="solid" onPress={() => setProgressValue(0)}>
125+
Reset
126+
</Button>
127+
<Button
128+
variant="ghost"
129+
onPress={() => setProgressValue(null)}
130+
style={tailwind.style("ml-1")}
131+
>
132+
Make Indeterminate
133+
</Button>
134+
</Box>
75135
</Box>
76136
</Box>
77137
);

‎example/src/modules/feedback/MeterComponentScreen.tsx‎

Lines changed: 101 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,113 @@
1-
import React from "react";
2-
import { Box, Meter, useTheme } from "@adaptui/react-native-tailwind";
1+
import React, { SetStateAction, useState } from "react";
2+
import {
3+
Box,
4+
Meter,
5+
MeterSizes,
6+
MeterTheme,
7+
Radio,
8+
RadioGroup,
9+
Switch,
10+
useTheme,
11+
} from "@adaptui/react-native-tailwind";
12+
13+
import { Group } from "../../components";
314

415
export const MeterComponentScreen = () => {
516
const tailwind = useTheme();
6-
return (
7-
<Box style={tailwind.style("flex-1 justify-center px-2 bg-white-900")}>
8-
<Box style={tailwind.style("my-2")}>
9-
<Meter intervals={3} value={0.55} />
10-
</Box>
11-
<Box style={tailwind.style("my-2")}>
12-
<Meter themeColor="primary" intervals={3} value={0.85} />
13-
</Box>
14-
<Box style={tailwind.style("my-2")}>
15-
<Meter themeColor="success" intervals={3} value={0.25} />
16-
</Box>
1717

18-
<Box style={tailwind.style("my-2")}>
19-
<Meter label="Stocks" themeColor="success" intervals={3} value={0.25} />
20-
</Box>
18+
const [selectedTheme, setSelectedTheme] = useState<MeterTheme>("base");
19+
const [selectedSize, setSelectedSize] = useState<MeterSizes>("md");
20+
const [hasFlatBorder, setHasFlatBorders] = useState<boolean>(false);
21+
const [hasIntervals, setHasIntervals] = useState<boolean>(false);
22+
const [hasHints, setHasHints] = useState<boolean>(false);
23+
const [hasLabel, setHasLabel] = useState<boolean>(false);
2124

22-
<Box style={tailwind.style("my-2")}>
25+
return (
26+
<Box style={tailwind.style("flex-1 justify-center bg-white-900")}>
27+
<Box
28+
style={tailwind.style(
29+
"flex-1 px-2 justify-center items-center bg-white-900",
30+
)}
31+
>
2332
<Meter
24-
label="Progress"
25-
hint="1/3"
26-
themeColor="primary"
27-
intervals={3}
33+
label={!hasLabel ? null : "Progress"}
34+
hint={!hasHints ? null : "1/3"}
35+
themeColor={selectedTheme}
36+
intervals={!hasIntervals ? 1 : 3}
2837
value={0.33}
38+
size={selectedSize}
39+
flatBorders={hasFlatBorder}
2940
/>
3041
</Box>
42+
<Box
43+
style={tailwind.style(
44+
"rounded-t-lg shadow-lg bg-gray-100 justify-end p-2",
45+
)}
46+
>
47+
<RadioGroup
48+
value={selectedSize}
49+
onChange={(value: MeterSizes) => setSelectedSize(value)}
50+
orientation="horizontal"
51+
>
52+
<Group label="Sizes">
53+
<Radio value="sm" label="sm" />
54+
<Radio value="md" label="md" />
55+
<Radio value="lg" label="lg" />
56+
</Group>
57+
</RadioGroup>
58+
<RadioGroup
59+
value={selectedTheme}
60+
onChange={(value: MeterTheme) => setSelectedTheme(value)}
61+
orientation="horizontal"
62+
>
63+
<Group label="Theme" style={tailwind.style("mt-2")}>
64+
<Radio value="base" label="base" />
65+
<Radio value="primary" label="primary" />
66+
<Radio value="success" label="success" />
67+
</Group>
68+
</RadioGroup>
69+
<Box
70+
style={tailwind.style(
71+
"flex flex-row justify-start flex-wrap w-full mt-2",
72+
)}
73+
>
74+
<Switch
75+
state={hasLabel}
76+
onStateChange={(value: SetStateAction<boolean>) =>
77+
setHasLabel(value)
78+
}
79+
size="md"
80+
label="Label"
81+
/>
82+
<Switch
83+
state={hasHints}
84+
onStateChange={(value: SetStateAction<boolean>) =>
85+
setHasHints(value)
86+
}
87+
size="md"
88+
style={tailwind.style("ml-1")}
89+
label="Hints"
90+
/>
91+
<Switch
92+
state={hasIntervals}
93+
onStateChange={(value: SetStateAction<boolean>) =>
94+
setHasIntervals(value)
95+
}
96+
size="md"
97+
style={tailwind.style("ml-1")}
98+
label="Intervals"
99+
/>
100+
<Switch
101+
state={hasFlatBorder}
102+
onStateChange={(value: SetStateAction<boolean>) =>
103+
setHasFlatBorders(value)
104+
}
105+
size="md"
106+
style={tailwind.style("mt-1")}
107+
label="Flat Borders"
108+
/>
109+
</Box>
110+
</Box>
31111
</Box>
32112
);
33113
};

0 commit comments

Comments
 (0)