Skip to content

Commit ec3719d

Browse files
Karthik-B-06Karthik-B-06
committed
feat: ✨ use short hand function ts instead of tailwind.style from useTailwind hook
1 parent 9af122d commit ec3719d

33 files changed

+213
-258
lines changed

‎src/components/badge/Badge.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { forwardRef } from "react";
22

33
import { Box, BoxProps, Text, TextProps } from "../../primitives";
4-
import { getTextFontFamily, useTheme } from "../../theme";
4+
import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
55
import { createComponent, cx, RenderPropType, styleAdapter } from "../../utils";
66
import { createIcon } from "../create-icon";
77
import { Icon } from "../icon";
@@ -58,7 +58,7 @@ const RNBadge: React.FC<Partial<BadgeProps>> = forwardRef<
5858
},
5959
ref,
6060
) => {
61-
const tailwind = useTheme();
61+
const { ts, gc } = useTailwind();
6262

6363
const badgeStyles = useTheme("badge");
6464
const { style: boxStyle = {}, ...otherBoxProps } = props;
@@ -69,13 +69,11 @@ const RNBadge: React.FC<Partial<BadgeProps>> = forwardRef<
6969
prefix?.type === Icon ? (
7070
createIcon({
7171
icon: prefix,
72-
iconFill: tailwind.getColor(
73-
cx(badgeStyles.themeColor[themeColor]?.[variant]?.text),
74-
),
75-
iconStyle: tailwind.style(cx(badgeStyles.size[size]?.prefix)),
72+
iconFill: gc(cx(badgeStyles.themeColor[themeColor]?.[variant]?.text)),
73+
iconStyle: ts(cx(badgeStyles.size[size]?.prefix)),
7674
})
7775
) : (
78-
<Box style={tailwind.style(cx(badgeStyles.size[size]?.prefix))}>
76+
<Box style={ts(cx(badgeStyles.size[size]?.prefix))}>
7977
{prefix as React.ReactNode}
8078
</Box>
8179
);
@@ -84,7 +82,7 @@ const RNBadge: React.FC<Partial<BadgeProps>> = forwardRef<
8482
<Box
8583
ref={ref}
8684
style={[
87-
tailwind.style(
85+
ts(
8886
cx(
8987
badgeStyles.baseContainer,
9088
badgeStyles.themeColor[themeColor]?.[variant]?.container,
@@ -99,7 +97,7 @@ const RNBadge: React.FC<Partial<BadgeProps>> = forwardRef<
9997
{typeof props.children === "string" ? (
10098
<Text
10199
style={[
102-
tailwind.style(
100+
ts(
103101
cx(
104102
badgeStyles.size[size]?.text,
105103
badgeStyles.themeColor[themeColor]?.[variant]?.text,

‎src/components/button/Button.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88

99
import { RenderPropType } from "../../index";
1010
import { Box, Text, Touchable } from "../../primitives";
11-
import { getTextFontFamily, useTheme } from "../../theme";
11+
import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
1212
import {
1313
createComponent,
1414
cx,
@@ -113,7 +113,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
113113
},
114114
ref,
115115
) => {
116-
const tailwind = useTheme();
116+
const { ts, gc } = useTailwind();
117117
const buttonTheme = useTheme("button");
118118

119119
const { onHoverIn, onHoverOut, hovered } = useOnHover();
@@ -131,12 +131,12 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
131131
prefix?.type === Icon ? (
132132
createIcon({
133133
icon: prefix,
134-
iconFill: tailwind.getColor(
134+
iconFill: gc(
135135
isButtonDisabled
136136
? buttonTheme.themeColor[themeColor]?.[variant]?.icon?.disabled
137137
: buttonTheme.themeColor[themeColor]?.[variant]?.icon?.default,
138138
),
139-
iconStyle: tailwind.style(cx(buttonTheme.size[size]?.prefix)),
139+
iconStyle: ts(cx(buttonTheme.size[size]?.prefix)),
140140
})
141141
) : (
142142
<ButtonPrefix size={size}>{prefix as React.ReactNode}</ButtonPrefix>
@@ -165,12 +165,12 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
165165
suffix?.type === Icon ? (
166166
createIcon({
167167
icon: suffix,
168-
iconFill: tailwind.getColor(
168+
iconFill: gc(
169169
isButtonDisabled
170170
? buttonTheme.themeColor[themeColor]?.[variant]?.icon?.disabled
171171
: buttonTheme.themeColor[themeColor]?.[variant]?.icon?.default,
172172
),
173-
iconStyle: tailwind.style(cx(buttonTheme.size[size]?.suffix)),
173+
iconStyle: ts(cx(buttonTheme.size[size]?.suffix)),
174174
})
175175
) : (
176176
<ButtonSuffix size={size}>{suffix as React.ReactNode}</ButtonSuffix>
@@ -194,7 +194,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
194194
iconOnly ? (
195195
<Box
196196
style={[
197-
tailwind.style(
197+
ts(
198198
cx(
199199
buttonTheme.size[size]?.icon,
200200
loading ? buttonTheme.loading.children : "",
@@ -205,7 +205,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
205205
>
206206
{/* @ts-ignore */}
207207
{React.cloneElement(iconOnly, {
208-
color: tailwind.getColor(
208+
color: gc(
209209
isButtonDisabled
210210
? buttonTheme.themeColor[themeColor]?.[variant]?.icon.disabled
211211
: buttonTheme.themeColor[themeColor]?.[variant]?.icon.default,
@@ -218,7 +218,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
218218
allowFontScaling={false}
219219
selectable={false}
220220
style={[
221-
tailwind.style(
221+
ts(
222222
cx(
223223
buttonTheme.size[size]?.text,
224224
buttonTheme.themeColor[themeColor]?.[variant]?.text.default,
@@ -269,7 +269,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
269269
<Touchable
270270
style={(touchState: PressableStateCallbackType) => {
271271
return [
272-
tailwind.style(
272+
ts(
273273
cx(
274274
buttonTheme.base,
275275
buttonTheme.size[size]?.default,
@@ -296,7 +296,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
296296
boxShadow: `${generateBoxShadow(
297297
buttonTheme.themeColor[themeColor]?.[variant]?.container
298298
?.focus?.offset,
299-
tailwind.getColor(
299+
gc(
300300
cx(
301301
buttonTheme.themeColor[themeColor]?.[variant]
302302
?.container?.focus?.color,

‎src/components/button/ButtonPrefix.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22

33
import { Box } from "../../primitives";
4-
import { useTheme } from "../../theme";
4+
import { useTailwind, useTheme } from "../../theme";
55
import { cx } from "../../utils";
66

77
import { ButtonSizes } from "./Button";
@@ -15,12 +15,8 @@ export const ButtonPrefix: React.FC<ButtonPrefixProps> = ({
1515
size,
1616
children,
1717
}) => {
18-
const tailwind = useTheme();
18+
const { ts } = useTailwind();
1919
const buttonTheme = useTheme("button");
2020

21-
return (
22-
<Box style={[tailwind.style(cx(buttonTheme.size[size]?.prefix))]}>
23-
{children}
24-
</Box>
25-
);
21+
return <Box style={[ts(cx(buttonTheme.size[size]?.prefix))]}>{children}</Box>;
2622
};

‎src/components/button/ButtonSpinner.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { isValidElement } from "react";
22

33
import { Box } from "../../primitives";
4-
import { useTheme } from "../../theme";
4+
import { useTailwind, useTheme } from "../../theme";
55
import { cx } from "../../utils";
66
import { Spinner, SpinnerSizes } from "../spinner";
77

@@ -75,22 +75,20 @@ export const ButtonFullWidthSpinner: React.FC<ButtonFullWidthSpinnerProps> = ({
7575
variant,
7676
children,
7777
}) => {
78-
const tailwind = useTheme();
78+
const { ts } = useTailwind();
7979
const buttonTheme = useTheme("button");
8080

8181
return (
8282
<>
83-
<Box style={tailwind.style(cx(buttonTheme.loading.wrapper))}>
83+
<Box style={ts(cx(buttonTheme.loading.wrapper))}>
8484
<ButtonSpinner
8585
spinner={spinner}
8686
size={size}
8787
themeColor={themeColor}
8888
variant={variant}
8989
/>
9090
</Box>
91-
<Box style={[tailwind.style(buttonTheme.loading.children)]}>
92-
{children}
93-
</Box>
91+
<Box style={[ts(buttonTheme.loading.children)]}>{children}</Box>
9492
</>
9593
);
9694
};

‎src/components/button/ButtonSuffix.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22

33
import { Box } from "../../primitives";
4-
import { useTheme } from "../../theme";
4+
import { useTailwind, useTheme } from "../../theme";
55
import { cx } from "../../utils";
66

77
import { ButtonSizes } from "./Button";
@@ -15,12 +15,8 @@ export const ButtonSuffix: React.FC<ButtonSuffixProps> = ({
1515
size,
1616
children,
1717
}) => {
18-
const tailwind = useTheme();
18+
const { ts } = useTailwind();
1919
const buttonTheme = useTheme("button");
2020

21-
return (
22-
<Box style={[tailwind.style(cx(buttonTheme.size[size]?.suffix))]}>
23-
{children}
24-
</Box>
25-
);
21+
return <Box style={[ts(cx(buttonTheme.size[size]?.suffix))]}>{children}</Box>;
2622
};

‎src/components/checkbox/Checkbox.tsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { useToggleState } from "@react-stately/toggle";
1010

1111
import { Check, Dash } from "../../icons";
1212
import { Box, Text, Touchable, TouchableProps } from "../../primitives";
13-
import { getTextFontFamily, useTheme } from "../../theme";
13+
import { getTextFontFamily, useTailwind, useTheme } from "../../theme";
1414
import {
1515
createComponent,
1616
cx,
@@ -90,7 +90,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
9090
typeof Touchable,
9191
Partial<CheckboxProps>
9292
>((props, ref) => {
93-
const tailwind = useTheme();
93+
const { ts, gc } = useTailwind();
9494
const checkboxTheme = useTheme("checkbox");
9595

9696
const checkboxGroupState = useCheckboxGroupContext();
@@ -193,7 +193,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
193193
)}
194194
<Box
195195
style={[
196-
tailwind.style(
196+
ts(
197197
cx(
198198
checkboxTheme.icon?.common,
199199
checkboxTheme.size[size]?.icon?.wrapper,
@@ -257,7 +257,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
257257
?.checked?.boxShadow?.offset
258258
: checkboxTheme.themeColor[themeColor]?.focus?.icon
259259
?.unChecked?.boxShadow?.offset,
260-
tailwind.getColor(
260+
gc(
261261
cx(
262262
isIndeterminate
263263
? checkboxTheme.themeColor[themeColor]?.focus?.icon
@@ -278,23 +278,21 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
278278
{icon &&
279279
createIcon({
280280
icon,
281-
iconFill: tailwind.getColor(
281+
iconFill: gc(
282282
cx(
283283
isDisabled
284284
? checkboxTheme.themeColor[themeColor]?.disabled?.iconFill
285285
: checkboxTheme.themeColor[themeColor]?.default?.iconFill,
286286
),
287287
),
288-
iconStyle: tailwind.style(
289-
cx(checkboxTheme.size[size]?.icon?.iconSize),
290-
),
288+
iconStyle: ts(cx(checkboxTheme.size[size]?.icon?.iconSize)),
291289
})}
292290
</Box>
293291
<Box style={checkboxTheme.labelDescWrapper}>
294292
{label && (
295293
<Text
296294
style={[
297-
tailwind.style(
295+
ts(
298296
cx(
299297
checkboxTheme.size[size]?.text?.default,
300298
isDisabled
@@ -315,7 +313,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
315313
{label && description && (
316314
<Text
317315
style={[
318-
tailwind.style(
316+
ts(
319317
cx(
320318
checkboxTheme?.description?.common,
321319
checkboxTheme?.size[size]?.description?.default,
@@ -351,7 +349,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
351349
onAccessibilityTap={handleChange}
352350
// A11y Props
353351
style={(touchState: PressableStateCallbackType) => [
354-
tailwind.style(
352+
ts(
355353
cx(
356354
checkboxTheme?.label?.common,
357355
index !== 0
@@ -377,7 +375,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
377375
? `${generateBoxShadow(
378376
checkboxTheme.themeColor[themeColor]?.focus?.label
379377
?.boxShadow?.offset,
380-
tailwind.getColor(
378+
gc(
381379
cx(
382380
checkboxTheme.themeColor[themeColor]?.focus?.label
383381
?.boxShadow?.color,
@@ -386,7 +384,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
386384
)}`
387385
: "",
388386
backgroundColor: hasOnlyLabel
389-
? (tailwind.getColor(
387+
? (gc(
390388
cx(
391389
checkboxTheme.themeColor[themeColor]?.focus?.label
392390
?.default,

‎src/components/checkbox/CheckboxGroup.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
} from "@react-stately/checkbox";
77

88
import { Box, BoxProps } from "../../primitives";
9-
import { useTheme } from "../../theme";
9+
import { useTailwind, useTheme } from "../../theme";
1010
import {
1111
createComponent,
1212
createContext,
@@ -85,14 +85,14 @@ const RNCheckboxGroup: React.FC<Partial<CheckboxGroupProps>> = forwardRef<
8585
};
8686
const state = useCheckboxGroupState(checkboxGroupProps);
8787

88-
const tailwind = useTheme();
88+
const { ts } = useTailwind();
8989
const checkboxGroupTheme = useTheme("checkbox");
9090

9191
const validChildren = getValidChildren(children);
9292
return (
9393
<Box
9494
style={[
95-
tailwind.style(cx(checkboxGroupTheme.group[orientation]?.common)),
95+
ts(cx(checkboxGroupTheme.group[orientation]?.common)),
9696
styleAdapter(style),
9797
]}
9898
// @ts-ignore Web Only Prop

0 commit comments

Comments
 (0)