Skip to content

Commit 30ad937

Browse files
author
crstnmac
committed
fix: refactor divider component
1 parent 7e9ac71 commit 30ad937

File tree

4 files changed

+103
-95
lines changed

4 files changed

+103
-95
lines changed

‎example/src/modules/primitives/DividerScreen.tsx‎

Lines changed: 46 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,55 @@
11
import React from "react";
2+
import { ScrollView } from "react-native-gesture-handler";
23
import { Box, Divider, useTheme } from "@adaptui/react-native-tailwind";
34

45
export const DividerScreen = () => {
56
const tailwind = useTheme();
67
return (
7-
<Box style={tailwind.style("flex-1 justify-center items-center ")}>
8-
<Box
9-
style={tailwind.style(
10-
"w-full bg-white-900 border rounded-xl h-40 justify-center",
11-
)}
12-
>
13-
<Divider onPress={() => console.log("hello")} />
8+
<ScrollView>
9+
<Box style={tailwind.style("flex-1 ")}>
10+
<Box style={tailwind.style("h-15 px-2 justify-center")}>
11+
<Divider
12+
orientation="horizontal"
13+
labelPosition="start"
14+
label="Continue"
15+
/>
16+
</Box>
17+
<Box style={tailwind.style("h-15 px-2 justify-center")}>
18+
<Divider
19+
orientation="horizontal"
20+
labelPosition="center"
21+
label="Continue"
22+
/>
23+
</Box>
24+
<Box style={tailwind.style("h-15 px-2 justify-center")}>
25+
<Divider
26+
orientation="horizontal"
27+
labelPosition="end"
28+
label="Continue"
29+
/>
30+
</Box>
31+
<Box style={tailwind.style("h-50 py-4 justify-center")}>
32+
<Divider
33+
orientation="vertical"
34+
labelPosition="start"
35+
label="Continue"
36+
/>
37+
</Box>
38+
<Box style={tailwind.style("h-50 py-4 justify-center")}>
39+
<Divider
40+
orientation="vertical"
41+
labelPosition="center"
42+
label="Continue"
43+
/>
44+
</Box>
45+
<Box style={tailwind.style("h-50 py-4 justify-center")}>
46+
<Divider
47+
orientation="vertical"
48+
labelPosition="end"
49+
label="Continue"
50+
/>
51+
</Box>
1452
</Box>
15-
<Box
16-
style={tailwind.style(
17-
"h-100 overflow-hidden items-center justify-center border mt-3 rounded-xl w-80 bg-white-900 ",
18-
)}
19-
>
20-
<Divider
21-
orientation="vertical"
22-
inset={40}
23-
insetType="top"
24-
onPress={() => console.log("hello")}
25-
/>
26-
</Box>
27-
</Box>
53+
</ScrollView>
2854
);
2955
};

‎src/components/divider/Divider.tsx‎

Lines changed: 32 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,50 @@
1-
import { View, ViewProps } from "react-native";
1+
import { ReactElement } from "react";
22
import { Box, useTheme } from "@adaptui/react-native-tailwind";
33

4-
import { createComponent, RenderPropType } from "../../utils";
4+
import { createComponent, cx } from "../../utils";
55
import { Button, ButtonProps } from "../button";
66

7-
interface DividerProps extends ViewProps {
8-
subHeaderText?: string;
7+
interface DividerProps {
8+
label?: string;
99
orientation?: "horizontal" | "vertical";
10-
subHeader?: RenderPropType<ButtonProps>;
11-
inset: number;
12-
height: number;
13-
insetType: "left" | "right" | "top" | "bottom";
14-
onPress: () => void;
10+
slot?: ReactElement;
11+
labelPosition: "start" | "center" | "end";
12+
buttonProps: ButtonProps;
1513
}
1614

1715
const RNDivider = ({
18-
subHeaderText = "Hello",
19-
orientation,
20-
subHeader,
21-
inset,
22-
insetType = "left",
23-
onPress,
16+
label,
17+
orientation = "horizontal",
18+
slot,
19+
labelPosition = "start",
20+
buttonProps,
2421
}: Partial<DividerProps>) => {
2522
const tailwind = useTheme();
26-
23+
const dividerTheme = useTheme("divider");
2724
return (
28-
<Box style={tailwind.style("overflow-hidden")}>
29-
<View
25+
<Box
26+
style={tailwind.style(
27+
cx(dividerTheme.orientation[orientation]),
28+
orientation === "vertical" ? "overflow-hidden" : {},
29+
)}
30+
>
31+
<Box style={tailwind.style(cx(dividerTheme.lines[orientation]))} />
32+
33+
<Box
3034
style={tailwind.style(
31-
orientation !== "vertical"
32-
? "flex-row items-center"
33-
: "self-stretch items-center",
35+
cx(dividerTheme.label[orientation]?.[labelPosition]),
3436
)}
3537
>
36-
<View
37-
style={tailwind.style(
38-
orientation !== "vertical"
39-
? "border-b border-gray-300 flex-1 h-0"
40-
: "border-r border-gray-300 h-100 w-0",
41-
orientation !== "vertical" && insetType === "left"
42-
? `left-[${inset}]`
43-
: insetType === "right"
44-
? `right-[${inset}]`
45-
: insetType === "top"
46-
? `top-[${inset}]`
47-
: insetType === "bottom"
48-
? `bottom-[${inset}]`
49-
: "",
50-
)}
51-
/>
52-
53-
<View
54-
style={tailwind.style(
55-
insetType === "left"
56-
? `left-[${inset}]`
57-
: insetType === "right"
58-
? `right-[${inset}]`
59-
: insetType === "bottom"
60-
? `bottom-[${inset}]`
61-
: insetType === "top"
62-
? `top-[${inset}]`
63-
: "",
64-
)}
65-
>
66-
{!subHeader && (
67-
<Button themeColor="base" variant="outline" onPress={onPress}>
68-
{subHeaderText}
69-
</Button>
70-
)}
71-
<>{subHeader}</>
72-
</View>
38+
{label ? (
39+
<Button themeColor="base" variant="outline" {...buttonProps}>
40+
{label}
41+
</Button>
42+
) : slot ? (
43+
slot
44+
) : null}
45+
</Box>
7346

74-
<View
75-
style={tailwind.style(
76-
orientation !== "vertical"
77-
? "border-b border-gray-300 flex-1 h-0"
78-
: "border-r border-gray-300 h-100 w-0",
79-
orientation !== "vertical" && insetType === "left"
80-
? `left-[${inset}]`
81-
: insetType === "right"
82-
? `right-[${inset}]`
83-
: insetType === "top"
84-
? `top-[${inset}]`
85-
: insetType === "bottom"
86-
? `bottom-[${inset}]`
87-
: "",
88-
)}
89-
/>
90-
</View>
47+
<Box style={tailwind.style(cx(dividerTheme.lines[orientation]))} />
9148
</Box>
9249
);
9350
};

‎src/theme/defaultTheme/divider.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export const divider = {
2+
base: "border-gray-300",
3+
orientation: {
4+
horizontal: "w-full items-center justify-center",
5+
vertical: "justify-center h-full items-center",
6+
},
7+
lines: {
8+
horizontal: "border-b border-gray-400 w-full",
9+
vertical: "border-r border-gray-400 h-full",
10+
},
11+
label: {
12+
horizontal: {
13+
start: "z-1 absolute left-4",
14+
center: "z-1 absolute",
15+
end: "z-1 absolute right-4",
16+
},
17+
vertical: {
18+
start: "z-1 absolute top-4",
19+
center: "z-1 absolute",
20+
end: "z-1 absolute bottom-4",
21+
},
22+
},
23+
};

‎src/theme/defaultTheme/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { badge } from "./badge";
33
import { button } from "./button";
44
import { checkbox } from "./checkbox";
55
import { circularProgress } from "./circularProgress";
6+
import { divider } from "./divider";
67
import { input } from "./input";
78
import { meter } from "./meter";
89
import { progress } from "./progress";
@@ -30,6 +31,7 @@ const extendedTheme = {
3031
checkbox,
3132
radio,
3233
meter,
34+
divider,
3335
};
3436

3537
export default extendedTheme;

0 commit comments

Comments
 (0)