shroud/ShroudComponents.js at master · CypherCommons/shroud · 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
/* eslint react/prop-types: "off", react-native/no-inline-styles: "off" */
import React, { forwardRef } from 'react';
import { Platform, Pressable, StyleSheet, TextInput, View } from 'react-native';
import { Text } from '@rneui/themed';
import { useTheme } from './components/themes';
import { ClashFont } from './constants/fonts';

/**
 * TODO: remove this comment once this file gets properly converted to typescript.
 *
 * @type {React.FC<any>}
 */
export const ShroudButtonLink = forwardRef((props, ref) => {
  const { colors } = useTheme();
  return (
    <Pressable
      accessibilityRole="button"
      style={({ pressed }) => [styles.shroudButtonLink, pressed && styles.pressed]}
      {...props}
      ref={ref}
    >
      <Text style={{ color: colors.textSecondary, textAlign: 'center', fontSize: 16 }}>{props.title}</Text>
    </Pressable>
  );
});

export const ShroudCard = props => {
  return <View {...props} style={{ padding: 20 }} />;
};

export const ShroudText = ({ bold = false, ...props }) => {
  const { colors } = useTheme();
  const style = StyleSheet.compose(
    {
      color: colors.textSecondary,
      fontWeight: bold ? 'bold' : 'normal',
    },
    props.style,
  );
  return <Text {...props} style={style} />;
};

export const ShroudTextCentered = props => {
  const { colors } = useTheme();
  return <Text {...props} style={{ color: colors.textSecondary, textAlign: 'center' }} />;
};

export const ShroudFormLabel = props => {
  const { colors } = useTheme();

  return (
    <Text
      {...props}
      style={{
        color: colors.textSecondary,
        fontFamily: ClashFont.regular,
        marginHorizontal: 20,
      }}
    />
  );
};

export const ShroudFormMultiInput = props => {
  const { colors } = useTheme();

  return (
    <TextInput
      multiline
      underlineColorAndroid="transparent"
      numberOfLines={4}
      editable={!props.editable}
      style={{
        paddingHorizontal: 8,
        paddingVertical: 16,
        flex: 1,
        marginTop: 5,
        marginHorizontal: 20,
        borderColor: colors.borderInput,
        borderBottomColor: colors.borderInput,
        borderWidth: 1,
        borderBottomWidth: 0.5,
        borderRadius: 4,
        backgroundColor: colors.fieldBackground,
        color: colors.textSecondary,
        textAlignVertical: 'top',
        fontFamily: ClashFont.regular,
      }}
      autoCorrect={false}
      autoCapitalize="none"
      spellCheck={false}
      {...props}
      selectTextOnFocus={false}
      keyboardType={Platform.OS === 'android' ? 'visible-password' : 'default'}
    />
  );
};

const styles = StyleSheet.create({
  shroudButtonLink: {
    minWidth: 100,
    minHeight: 36,
    justifyContent: 'center',
  },
  pressed: {
    opacity: 0.6,
  },
});