Skip to content

Commit 5af3560

Browse files
kodiakhq[bot]kodiakhq[bot]
authored
Divider component (#78)
Divider component
2 parents 7db1588 + 68c4b6e commit 5af3560

File tree

13 files changed

+198
-5
lines changed

13 files changed

+198
-5
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"input",
2121
"icons",
2222
"kodiak",
23-
"utils"
23+
"utils",
24+
"divider"
2425
],
2526
"git.branchProtection": ["main"]
2627
}

‎example/src/AppRoot.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
CheckboxGroupScreen,
1010
CheckboxScreen,
1111
CircularProgressScreen,
12+
DividerScreen,
1213
InputScreen,
1314
MeterComponentScreen,
1415
ProgressScreen,
@@ -50,6 +51,11 @@ const AppRoot = () => {
5051
name="CheckboxScreen"
5152
component={CheckboxScreen}
5253
/>
54+
<Drawer.Screen
55+
options={{ title: "Divider" }}
56+
name="DividerScreen"
57+
component={DividerScreen}
58+
/>
5359
<Drawer.Screen
5460
options={{ title: "Spinner" }}
5561
name="SpinnerScreen"

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from "react";
2+
import { ScrollView } from "react-native-gesture-handler";
3+
import { Box, Divider, Tag, useTheme } from "@adaptui/react-native-tailwind";
4+
5+
export const DividerScreen = () => {
6+
const tailwind = useTheme();
7+
return (
8+
<ScrollView>
9+
<Box style={tailwind.style("flex-1 ")}>
10+
<Box style={tailwind.style("h-15 px-2 justify-center")}>
11+
<Divider orientation="horizontal" />
12+
</Box>
13+
<Box style={tailwind.style("h-15 px-2 justify-center")}>
14+
<Divider
15+
orientation="horizontal"
16+
labelPosition="start"
17+
label="Continue"
18+
/>
19+
</Box>
20+
<Box style={tailwind.style("h-15 px-2 justify-center")}>
21+
<Divider
22+
orientation="horizontal"
23+
labelPosition="center"
24+
label="Continue"
25+
/>
26+
</Box>
27+
<Box style={tailwind.style("h-15 px-2 justify-center")}>
28+
<Divider
29+
orientation="horizontal"
30+
labelPosition="end"
31+
label="Continue"
32+
/>
33+
</Box>
34+
<Box style={tailwind.style("h-15 px-2 justify-center")}>
35+
<Divider
36+
orientation="horizontal"
37+
labelPosition="center"
38+
slot={
39+
<Tag
40+
style={tailwind.style("rounded-full")}
41+
variant="subtle"
42+
themeColor="primary"
43+
>
44+
New Messages
45+
</Tag>
46+
}
47+
dividerStyle={[tailwind.style("border-dashed border-blue-500")]}
48+
/>
49+
</Box>
50+
<Box style={tailwind.style("h-50 py-4 justify-center")}>
51+
<Divider
52+
orientation="vertical"
53+
labelPosition="start"
54+
label="Continue"
55+
/>
56+
</Box>
57+
<Box style={tailwind.style("h-50 py-4 w-full justify-center")}>
58+
<Divider
59+
orientation="vertical"
60+
labelPosition="center"
61+
label="Continue"
62+
/>
63+
</Box>
64+
<Box style={tailwind.style("h-50 py-4 justify-center")}>
65+
<Divider
66+
orientation="vertical"
67+
labelPosition="end"
68+
label="Continue"
69+
/>
70+
</Box>
71+
</Box>
72+
</ScrollView>
73+
);
74+
};

‎example/src/modules/primitives/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ export * from "./AvatarScreen";
55
export * from "./BadgeScreen";
66
export * from "./ButtonScreen";
77
export * from "./CheckboxScreen";
8+
export * from "./DividerScreen";
89
export * from "./TagScreen";

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@
9696
"devDependencies": {
9797
"@babel/core": "7.18.9",
9898
"@babel/eslint-parser": "7.18.9",
99+
"@babel/helper-string-parser": "^7.19.4",
99100
"@commitlint/cli": "17.0.3",
100101
"@commitlint/config-conventional": "17.0.3",
101102
"@react-native-community/eslint-config": "3.0.3",

‎src/components/divider/Divider.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { ReactElement } from "react";
2+
import { StyleProp, ViewStyle } from "react-native";
3+
import { Box, useTheme } from "@adaptui/react-native-tailwind";
4+
5+
import { createComponent, cx, styleAdapter } from "../../utils";
6+
import { Button, ButtonProps } from "../button";
7+
8+
interface DividerProps {
9+
/**
10+
* Label name
11+
*/
12+
label: string;
13+
/**
14+
* The orientation of the divider
15+
* @default horizontal
16+
*/
17+
orientation: "horizontal" | "vertical";
18+
/**
19+
* Pass custom component instead of deafult component.
20+
*/
21+
slot: ReactElement;
22+
/**
23+
* The position of the label/slot
24+
* @default start
25+
*/
26+
labelPosition: "start" | "center" | "end";
27+
/**
28+
* A prop that is passed for the button component
29+
*/
30+
buttonProps: ButtonProps;
31+
/**
32+
* A style prop that is passed for the divider line
33+
*/
34+
dividerStyle: StyleProp<ViewStyle>;
35+
}
36+
37+
const RNDivider = (props: Partial<DividerProps>) => {
38+
const {
39+
label,
40+
orientation = "horizontal",
41+
slot,
42+
labelPosition = "start",
43+
buttonProps,
44+
dividerStyle,
45+
} = props;
46+
const tailwind = useTheme();
47+
const dividerTheme = useTheme("divider");
48+
return (
49+
<Box
50+
style={tailwind.style(
51+
cx(dividerTheme[orientation].orientaion),
52+
orientation === "vertical" ? "overflow-hidden" : {},
53+
)}
54+
>
55+
<Box
56+
style={[
57+
tailwind.style(cx(dividerTheme[orientation].lines)),
58+
styleAdapter(dividerStyle),
59+
]}
60+
/>
61+
62+
<Box
63+
style={tailwind.style(
64+
cx(dividerTheme[orientation]?.label[labelPosition]),
65+
)}
66+
>
67+
{label ? (
68+
<Button themeColor="base" variant="outline" {...buttonProps}>
69+
{label}
70+
</Button>
71+
) : slot ? (
72+
slot
73+
) : null}
74+
</Box>
75+
</Box>
76+
);
77+
};
78+
79+
export const Divider = createComponent<Partial<DividerProps>>(RNDivider, {
80+
shouldMemo: true,
81+
});

‎src/components/divider/index.ts‎

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

‎src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export * from "./button";
55
export * from "./checkbox";
66
export * from "./circular-progress";
77
export * from "./create-icon";
8+
export * from "./divider";
89
export * from "./icon";
910
export * from "./input";
1011
export * from "./meter";

‎src/components/slider/Slider.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -521,7 +521,7 @@ const RNSlider: React.FC<Partial<SliderProps>> = forwardRef<
521521
{ name: "increment", label: "incrementKnobOne" },
522522
{ name: "decrement", label: "decrementKnobOne" },
523523
]}
524-
onAccessibilityAction={event => {
524+
onAccessibilityAction={(event: any) => {
525525
switch (event.nativeEvent.actionName) {
526526
case "increment":
527527
if (
@@ -606,7 +606,7 @@ const RNSlider: React.FC<Partial<SliderProps>> = forwardRef<
606606
{ name: "increment", label: "incrementKnobTwo" },
607607
{ name: "decrement", label: "decrementKnobTwo" },
608608
]}
609-
onAccessibilityAction={event => {
609+
onAccessibilityAction={(event: any) => {
610610
switch (event.nativeEvent.actionName) {
611611
case "increment":
612612
if (knobTwoDraggingValue.value < maxValue) {

‎src/components/slider/SliderTooltip.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useMemo, useRef } from "react";
2-
import { StyleSheet, ViewStyle } from "react-native";
2+
import { LayoutChangeEvent, StyleSheet, ViewStyle } from "react-native";
33
import Animated, {
44
interpolate,
55
useAnimatedStyle,
@@ -103,7 +103,7 @@ const RNSliderTooltip: React.FC<Partial<SliderTooltipProps>> = props => {
103103
return (
104104
<AnimatedBox
105105
ref={tooltipRef}
106-
onLayout={e =>
106+
onLayout={(e: LayoutChangeEvent) =>
107107
(tooltipWidth.value = Math.round(e.nativeEvent.layout.width))
108108
}
109109
style={[

0 commit comments

Comments
 (0)