Skip to content

Commit

Permalink
chore(docs): Update a few recipes for the new theming system.
Browse files Browse the repository at this point in the history
  • Loading branch information
@markrickert
markrickert committed Feb 28, 2024
1 parent 187cc7d commit 8776e9b
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 66 deletions.
10 changes: 6 additions & 4 deletions docs/recipes/Redux.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,30 +139,32 @@ import React, { FC } from "react";
import { View, ViewStyle } from "react-native";
import { Button, Text } from "app/components";
import { AppStackScreenProps } from "../navigators";
import { colors } from "../theme";
import type { ThemedStyle } from "app/theme";
import { useAppTheme } from "app/utils/useAppTheme";
import { useSafeAreaInsetsStyle } from "../utils/useSafeAreaInsetsStyle";
import { useAppDispatch, useAppSelector } from "app/store/store";
import { decrement, increment } from "app/store/counterSlice";

interface WelcomeScreenProps extends AppStackScreenProps<"Welcome"> {}

export const WelcomeScreen: FC<WelcomeScreenProps> = () => {
const { themed } = useAppTheme();
const $containerInsets = useSafeAreaInsetsStyle(["top", "bottom"]);
const count = useAppSelector((state) => state.counter.value);
const dispatch = useAppDispatch();
return (
<View style={[$containerInsets, $container]}>
<View style={themed([$containerInsets, $container])}>
<Button text="Increment" onPress={() => dispatch(increment())} />
<Button text="Decrement" onPress={() => dispatch(decrement())} />
<Text text={`Count: ${count}`} />
</View>
);
};

const $container: ViewStyle = {
const $container: ThemedStyle<ViewStyle> = ({ colors }) => ({
flex: 1,
backgroundColor: colors.background,
};
});
```

You're now using Redux!
Expand Down
99 changes: 37 additions & 62 deletions docs/recipes/SelectFieldWithBottomSheet.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,7 @@ import { View, TouchableOpacity } from "react-native";
import { TextField, TextFieldProps } from "./TextField";

export interface SelectFieldProps
extends Omit<
TextFieldProps,
"ref" | "onValueChange" | "onChange" | "value"
> {}
extends Omit<TextFieldProps, "ref" | "onValueChange" | "onChange" | "value"> {}
export interface SelectFieldRef {}

export const SelectField = forwardRef(function SelectField(
Expand All @@ -72,8 +69,7 @@ export const SelectField = forwardRef(function SelectField(
) {
const { ...TextFieldProps } = props;

const disabled =
TextFieldProps.editable === false || TextFieldProps.status === "disabled";
const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";

useImperativeHandle(ref, () => ({}));

Expand Down Expand Up @@ -121,9 +117,7 @@ Let's add an accessory to the input to make it look like a `SelectField`.
```tsx
<TextField
{...TextFieldProps}
RightAccessory={(props) => (
<Icon icon="caretRight" containerStyle={props.style} />
)}
RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
/>
```

Expand Down Expand Up @@ -210,8 +204,7 @@ export const SelectField = forwardRef(function SelectField(
...TextFieldProps
} = props;

const disabled =
TextFieldProps.editable === false || TextFieldProps.status === "disabled";
const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";

useImperativeHandle(ref, () => ({}));

Expand All @@ -232,9 +225,7 @@ export const SelectField = forwardRef(function SelectField(
{...TextFieldProps}
// success-line-start
value={valueString}
RightAccessory={(props) => (
<Icon icon="caretRight" containerStyle={props.style} />
)}
RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
// success-line-end
/>
</View>
Expand Down Expand Up @@ -348,6 +339,8 @@ import {
// success-line-end
import React, { forwardRef, Ref, useImperativeHandle, useRef } from "react";
import { TouchableOpacity, View, ViewStyle } from "react-native";
import type { ThemedStyle } from "app/theme";
import { useAppTheme } from "app/utils/useAppTheme";
// success-line
import { useSafeAreaInsets } from "react-native-safe-area-context";
// success-line
Expand Down Expand Up @@ -391,8 +384,9 @@ export const SelectField = forwardRef(function SelectField(
const { bottom } = useSafeAreaInsets();
// success-line-end

const disabled =
TextFieldProps.editable === false || TextFieldProps.status === "disabled";
const { themed } = useAppTheme();

const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";

// success-line
useImperativeHandle(ref, () => ({ presentOptions, dismissOptions }));
Expand Down Expand Up @@ -426,9 +420,7 @@ export const SelectField = forwardRef(function SelectField(
<TextField
{...TextFieldProps}
value={valueString}
RightAccessory={(props) => (
<Icon icon="caretRight" containerStyle={props.style} />
)}
RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
/>
</View>
</TouchableOpacity>
Expand All @@ -440,26 +432,18 @@ export const SelectField = forwardRef(function SelectField(
stackBehavior="replace"
enableDismissOnClose
backdropComponent={(props) => (
<BottomSheetBackdrop
{...props}
appearsOnIndex={0}
disappearsOnIndex={-1}
/>
<BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} />
)}
footerComponent={
!multiple
? undefined
: (props) => (
<BottomSheetFooter
{...props}
style={$bottomSheetFooter}
style={themed($bottomSheetFooter)}
bottomInset={bottom}
>
<Button
text="Dismiss"
preset="reversed"
onPress={dismissOptions}
/>
<Button text="Dismiss" preset="reversed" onPress={dismissOptions} />
</BottomSheetFooter>
)
}
Expand All @@ -469,11 +453,7 @@ export const SelectField = forwardRef(function SelectField(
data={options}
keyExtractor={(o) => o.value}
renderItem={({ item, index }) => (
<ListItem
text={item.label}
topSeparator={index !== 0}
style={$listItem}
/>
<ListItem text={item.label} topSeparator={index !== 0} style={themed($listItem)} />
)}
/>
</BottomSheetModal>
Expand All @@ -483,13 +463,13 @@ export const SelectField = forwardRef(function SelectField(
});

// success-line-start
const $bottomSheetFooter: ViewStyle = {
const $bottomSheetFooter: ThemedStyle<ViewStyle> = ({ spacing }) => ({
paddingHorizontal: spacing.large,
};
});

const $listItem: ViewStyle = {
const $listItem: ThemedStyle<ViewStyle> = ({ spacing }) => ({
paddingHorizontal: spacing.large,
};
});
// success-line-end
```

Expand All @@ -514,8 +494,8 @@ import {
import React, { forwardRef, Ref, useImperativeHandle, useRef } from "react";
import { TouchableOpacity, View, ViewStyle } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
// success-line
import { colors, spacing } from "../theme";
import type { ThemedStyle } from "app/theme";
import { useAppTheme } from "app/utils/useAppTheme";
import { Button } from "./Button";
import { Icon } from "./Icon";
import { ListItem } from "./ListItem";
Expand Down Expand Up @@ -554,9 +534,14 @@ export const SelectField = forwardRef(function SelectField(
} = props;
const sheet = useRef<BottomSheetModal>(null);
const { bottom } = useSafeAreaInsets();
const {
themed,
// success-line-start
theme: { colors },
// success-line-end
} = useAppTheme();

const disabled =
TextFieldProps.editable === false || TextFieldProps.status === "disabled";
const disabled = TextFieldProps.editable === false || TextFieldProps.status === "disabled";

useImperativeHandle(ref, () => ({ presentOptions, dismissOptions }));

Expand Down Expand Up @@ -595,9 +580,7 @@ export const SelectField = forwardRef(function SelectField(
<TextField
{...TextFieldProps}
value={valueString}
RightAccessory={(props) => (
<Icon icon="caretRight" containerStyle={props.style} />
)}
RightAccessory={(props) => <Icon icon="caretRight" containerStyle={props.style} />}
/>
</View>
</TouchableOpacity>
Expand All @@ -608,26 +591,18 @@ export const SelectField = forwardRef(function SelectField(
stackBehavior="replace"
enableDismissOnClose
backdropComponent={(props) => (
<BottomSheetBackdrop
{...props}
appearsOnIndex={0}
disappearsOnIndex={-1}
/>
<BottomSheetBackdrop {...props} appearsOnIndex={0} disappearsOnIndex={-1} />
)}
footerComponent={
!multiple
? undefined
: (props) => (
<BottomSheetFooter
{...props}
style={$bottomSheetFooter}
style={themed($bottomSheetFooter)}
bottomInset={bottom}
>
<Button
text="Dismiss"
preset="reversed"
onPress={dismissOptions}
/>
<Button text="Dismiss" preset="reversed" onPress={dismissOptions} />
</BottomSheetFooter>
)
}
Expand All @@ -640,7 +615,7 @@ export const SelectField = forwardRef(function SelectField(
<ListItem
text={item.label}
topSeparator={index !== 0}
style={$listItem}
style={themed($listItem)}
// success-line-start
rightIcon={value.includes(item.value) ? "check" : undefined}
rightIconColor={colors.palette.angry500}
Expand All @@ -654,13 +629,13 @@ export const SelectField = forwardRef(function SelectField(
);
});

const $bottomSheetFooter: ViewStyle = {
const $bottomSheetFooter: ThemedStyle<ViewStyle> = ({ spacing }) => ({
paddingHorizontal: spacing.large,
};
});

const $listItem: ViewStyle = {
const $listItem: ThemedStyle<ViewStyle> = ({ spacing }) => ({
paddingHorizontal: spacing.large,
};
});
```

And we're done!
Expand Down

0 comments on commit 8776e9b

Please sign in to comment.