react-native-timer-picker/src/components/TimerPickerModal/styles.ts at main · troberts-28/react-native-timer-picker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import { StyleSheet } from "react-native";
import type { DimensionValue, TextStyle, ViewStyle } from "react-native";

import type { CustomTimerPickerStyles } from "../TimerPicker/styles";

export const DEFAULT_COLUMN_WIDTH = 70;

export interface CustomTimerPickerModalStyles extends CustomTimerPickerStyles {
  button?: TextStyle;
  buttonContainer?: ViewStyle;
  cancelButton?: TextStyle;
  confirmButton?: TextStyle;
  container?: ViewStyle;
  contentContainer?: ViewStyle;
  modalTitle?: TextStyle;
}

const DARK_MODE_BACKGROUND_COLOR = "#232323";
const DARK_MODE_TEXT_COLOR = "#E9E9E9";
const LIGHT_MODE_BACKGROUND_COLOR = "#F1F1F1";
const LIGHT_MODE_TEXT_COLOR = "#1B1B1B";

export const generateStyles = (
  customStyles: CustomTimerPickerModalStyles | undefined,
  variables: {
    hasModalTitle: boolean;
    totalColumnWidth: number;
  }
) => {
  const {
    button: customButtonStyle,
    buttonContainer: customButtonContainerStyle,
    cancelButton: customCancelButtonStyle,
    confirmButton: customConfirmButtonStyle,
    container: customContainerStyle,
    contentContainer: customContentContainerStyle,
    modalTitle: customModalTitleStyle,
    ...customTimerPickerStyles
  } = customStyles ?? {};

  const totalColumnWidth = variables.totalColumnWidth;
  const modalPadding = (customContentContainerStyle?.paddingHorizontal as number) ?? 20;
  const labelOverhang = 20;
  const computedWidth = Math.max(
    DEFAULT_COLUMN_WIDTH * 2,
    totalColumnWidth + modalPadding * 2 + labelOverhang
  );

  return StyleSheet.create({
    button: {
      borderRadius: 10,
      borderWidth: 1,
      fontSize: 16,
      marginHorizontal: 12,
      overflow: "hidden",
      paddingHorizontal: 20,
      paddingVertical: 10,
      ...customTimerPickerStyles?.text,
      ...customButtonStyle,
    },
    buttonContainer: {
      flexDirection: "row",
      marginBottom: 20,
      marginTop: 25,
      ...customButtonContainerStyle,
    },
    cancelButton: {
      backgroundColor: customTimerPickerStyles?.theme === "dark" ? "gray" : undefined,
      borderColor: "gray",
      color: customTimerPickerStyles?.theme === "dark" ? DARK_MODE_TEXT_COLOR : "gray",
      ...customTimerPickerStyles?.text,
      ...customCancelButtonStyle,
    },
    confirmButton: {
      backgroundColor: customTimerPickerStyles?.theme === "dark" ? "green" : undefined,
      borderColor: "green",
      color: customTimerPickerStyles?.theme === "dark" ? DARK_MODE_TEXT_COLOR : "green",
      ...customTimerPickerStyles?.text,
      ...customConfirmButtonStyle,
    },
    container: {
      justifyContent: "center",
      overflow: "hidden",
      ...customContainerStyle,
    },
    contentContainer: {
      alignItems: "center",
      backgroundColor:
        customTimerPickerStyles?.backgroundColor ??
        (customTimerPickerStyles?.theme === "dark"
          ? DARK_MODE_BACKGROUND_COLOR
          : LIGHT_MODE_BACKGROUND_COLOR),
      borderRadius: 20,
      justifyContent: "center",
      overflow: "hidden",
      paddingHorizontal: 20,
      width: computedWidth,
      ...customContentContainerStyle,
    },
    modalTitle: {
      color:
        customTimerPickerStyles?.theme === "dark" ? DARK_MODE_TEXT_COLOR : LIGHT_MODE_TEXT_COLOR,
      fontSize: 24,
      fontWeight: "600",
      marginBottom: 15,
      marginTop: 20,
      ...customTimerPickerStyles?.text,
      ...customModalTitleStyle,
    },
    timerPickerStyles: {
      ...customTimerPickerStyles,
      pickerContainer: {
        marginRight: "8%" as DimensionValue,
        paddingTop: !variables?.hasModalTitle ? 20 : 0,
        ...(customTimerPickerStyles?.pickerContainer ?? {}),
      },
    },
  });
};