Skip to content

Commit

Permalink
feat: Add unstableLabelStyle & fix switch statement comparison method (…
Browse files Browse the repository at this point in the history 
…#150)

- Added `unstableLabelStyle` to allow temporarily styling the label
- Fix custom component switch statement to allow correctly providing custom components to react-native-dialog
  • Loading branch information
Slapbox authored Oct 31, 2022
1 parent 0a9366b commit 839915b
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 26 deletions.
34 changes: 18 additions & 16 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,24 +181,25 @@ const styles = StyleSheet.create({
### Dialog.Input props
| Name | Type | Default | Description |
| ------------ | ------ | --------- | ------------------------------------------- |
| label | string | undefined | The input floating label |
| wrapperStyle | any | undefined | The style applied to the input wrapper View |
| textInputRef | ref | undefined | Ref to the input |
| Name | Type | Default | Description |
| ------------------ | ------ | --------- | ----------------------------------------------------------------------- |
| label | string | undefined | The input floating label |
| wrapperStyle | any | undefined | The style applied to the input wrapper View |
| textInputRef | ref | undefined | Ref to the input |
| unstableLabelStyle | any | undefined | Likely to be removed in a future version. See issue #141 for discussion |
`Dialog.Input` also accepts all the React-Native's `TextInput` component props.
### Dialog.CodeInput props
| Name | Type | Default | Description |
| --------------------------- | ------ | --------- | ------------------------------------------------------------ |
| wrapperStyle | any | undefined | The style applied to the input wrapper View |
| digitContainerStyle | any | undefined | The style applied to the digit container View |
| digitContainerFocusedStyle | any | undefined | The style applied to the digit container View when in focus |
| digitStyle | any | undefined | The style applied to the digit text |
| codeLength | number | 4 | The total number of digits |
| onCodeChange | func | undefined | Called when the input changed |
| Name | Type | Default | Description |
| -------------------------- | ------ | --------- | ----------------------------------------------------------- |
| wrapperStyle | any | undefined | The style applied to the input wrapper View |
| digitContainerStyle | any | undefined | The style applied to the digit container View |
| digitContainerFocusedStyle | any | undefined | The style applied to the digit container View when in focus |
| digitStyle | any | undefined | The style applied to the digit text |
| codeLength | number | 4 | The total number of digits |
| onCodeChange | func | undefined | Called when the input changed |
`Dialog.CodeInput` also accepts all the React-Native's `TextInput` component props.
Expand All @@ -212,9 +213,10 @@ const styles = StyleSheet.create({
### Dialog.Switch props
| Name | Type | Default | Description |
| ----- | ------ | --------- | --------------------------- |
| label | string | undefined | The switch description text |
| Name | Type | Default | Description |
| ------------------ | ------ | --------- | ----------------------------------------------------------------------- |
| label | string | undefined | The switch description text |
| unstableLabelStyle | any | undefined | Likely to be removed in a future version. See issue #141 for discussion |
`Dialog.Switch` also accepts all the React-Native's `Switch` component props.
Expand Down
7 changes: 4 additions & 3 deletions src/CodeInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import {
import useTheme from "./useTheme";

export interface DialogCodeInputProps extends TextInputProps {
autoFocus?: boolean; // TODO: Why do we need to add this to fix TS2339? It should already be included in TextInputProps.
style?: StyleProp<ViewStyle>;
wrapperStyle?: StyleProp<ViewStyle>;
digitContainerStyle?: StyleProp<ViewStyle>;
digitContainerFocusedStyle?: StyleProp<ViewStyle>;
Expand All @@ -25,6 +27,7 @@ export interface DialogCodeInputProps extends TextInputProps {

const DialogCodeInput: React.FC<DialogCodeInputProps> = (props) => {
const {
autoFocus = false,
style,
wrapperStyle,
digitContainerStyle,
Expand All @@ -36,9 +39,7 @@ const DialogCodeInput: React.FC<DialogCodeInputProps> = (props) => {
} = props;
const { styles } = useTheme(buildStyles);
const codeRef = React.useRef<TextInput>(null);
const [containerIsFocused, setContainerIsFocused] = React.useState(
props.autoFocus || false
);
const [containerIsFocused, setContainerIsFocused] = React.useState(autoFocus);
const [code, setCode] = React.useState("");
const codeDigitsArray = new Array(codeLength).fill(0);
const emptyInputChar = " ";
Expand Down
10 changes: 6 additions & 4 deletions src/Container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,16 @@ const DialogContainer: React.FC<DialogContainerProps> = (props) => {
const { styles } = useTheme(buildStyles);
React.Children.forEach(children, (child) => {
if (typeof child === "object" && child !== null && "type" in child) {
switch (child.type) {
case DialogTitle:
// @ts-expect-error: "Property 'displayName' does not exist on type 'string"
const displayName = child.type?.displayName || child.type?.name;
switch (displayName) {
case DialogTitle.displayName:
titleChildrens.push(child as TitleElement);
return;
case DialogDescription:
case DialogDescription.displayName:
descriptionChildrens.push(child as DescriptionElement);
return;
case DialogButton:
case DialogButton.displayName:
if (Platform.OS === "ios" && buttonChildrens.length > 0) {
buttonChildrens.push(
<View
Expand Down
5 changes: 4 additions & 1 deletion src/Input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
View,
PlatformColor,
TextInputProps,
TextStyle,
ViewStyle,
StyleProp,
} from "react-native";
Expand All @@ -17,6 +18,7 @@ export interface DialogInputProps extends TextInputProps {
label?: ReactNode;
wrapperStyle?: StyleProp<ViewStyle>;
textInputRef?: LegacyRef<TextInput>;
unstableLabelStyle?: StyleProp<TextStyle>;
}

const DialogInput: React.FC<DialogInputProps> = (props) => {
Expand All @@ -27,6 +29,7 @@ const DialogInput: React.FC<DialogInputProps> = (props) => {
textInputRef,
multiline,
numberOfLines,
unstableLabelStyle,
...nodeProps
} = props;
const lines = (multiline && numberOfLines) || 1;
Expand All @@ -35,7 +38,7 @@ const DialogInput: React.FC<DialogInputProps> = (props) => {
const { styles, isDark } = useTheme(buildStyles);
return (
<View style={[styles.textInputWrapper, wrapperStyle]}>
{label && <Text style={styles.label}>{label}</Text>}
{label && <Text style={[styles.label, unstableLabelStyle]}>{label}</Text>}
<TextInput
ref={textInputRef}
placeholderTextColor={
Expand Down
7 changes: 5 additions & 2 deletions src/Switch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,23 @@ import {
Text,
View,
PlatformColor,
StyleProp,
TextStyle,
SwitchProps,
} from "react-native";
import useTheme, { StyleBuilder } from "./useTheme";

export interface DialogSwitchProps extends SwitchProps {
label?: ReactNode;
unstableLabelStyle?: StyleProp<TextStyle>;
}

const DialogSwitch: React.FC<DialogSwitchProps> = (props) => {
const { label, ...nodeProps } = props;
const { label, unstableLabelStyle, ...nodeProps } = props;
const { styles } = useTheme(buildStyles);
return (
<View style={styles.switchWrapper}>
<Text style={styles.label}>{label}</Text>
<Text style={[styles.label, unstableLabelStyle]}>{label}</Text>
<Switch {...nodeProps} />
</View>
);
Expand Down

0 comments on commit 839915b

Please sign in to comment.