fluent-styles 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -0
- package/lib/commonjs/assets/img/doctor.png +0 -0
- package/lib/commonjs/index.js +248 -0
- package/lib/commonjs/index.js.map +1 -0
- package/lib/commonjs/package/badge/index.js +159 -0
- package/lib/commonjs/package/badge/index.js.map +1 -0
- package/lib/commonjs/package/button/index.js +96 -0
- package/lib/commonjs/package/button/index.js.map +1 -0
- package/lib/commonjs/package/card/index.js +32 -0
- package/lib/commonjs/package/card/index.js.map +1 -0
- package/lib/commonjs/package/checkBox/index.js +84 -0
- package/lib/commonjs/package/checkBox/index.js.map +1 -0
- package/lib/commonjs/package/cycle/index.js +28 -0
- package/lib/commonjs/package/cycle/index.js.map +1 -0
- package/lib/commonjs/package/dialog/index.js +192 -0
- package/lib/commonjs/package/dialog/index.js.map +1 -0
- package/lib/commonjs/package/dropdown/index.js +116 -0
- package/lib/commonjs/package/dropdown/index.js.map +1 -0
- package/lib/commonjs/package/form/index.js +184 -0
- package/lib/commonjs/package/form/index.js.map +1 -0
- package/lib/commonjs/package/header/index.js +89 -0
- package/lib/commonjs/package/header/index.js.map +1 -0
- package/lib/commonjs/package/image/index.js +123 -0
- package/lib/commonjs/package/image/index.js.map +1 -0
- package/lib/commonjs/package/radioButton/index.js +84 -0
- package/lib/commonjs/package/radioButton/index.js.map +1 -0
- package/lib/commonjs/package/safeAreaView/index.js +16 -0
- package/lib/commonjs/package/safeAreaView/index.js.map +1 -0
- package/lib/commonjs/package/scrollView/index.js +16 -0
- package/lib/commonjs/package/scrollView/index.js.map +1 -0
- package/lib/commonjs/package/separator/index.js +33 -0
- package/lib/commonjs/package/separator/index.js.map +1 -0
- package/lib/commonjs/package/spacer/index.js +18 -0
- package/lib/commonjs/package/spacer/index.js.map +1 -0
- package/lib/commonjs/package/spinner/index.js +43 -0
- package/lib/commonjs/package/spinner/index.js.map +1 -0
- package/lib/commonjs/package/stack/__test__/index.test.js +91 -0
- package/lib/commonjs/package/stack/__test__/index.test.js.map +1 -0
- package/lib/commonjs/package/stack/index.js +41 -0
- package/lib/commonjs/package/stack/index.js.map +1 -0
- package/lib/commonjs/package/styled/__test__/index.test.js +161 -0
- package/lib/commonjs/package/styled/__test__/index.test.js.map +1 -0
- package/lib/commonjs/package/styled/index.js +42 -0
- package/lib/commonjs/package/styled/index.js.map +1 -0
- package/lib/commonjs/package/switch/index.js +43 -0
- package/lib/commonjs/package/switch/index.js.map +1 -0
- package/lib/commonjs/package/text/index.js +73 -0
- package/lib/commonjs/package/text/index.js.map +1 -0
- package/lib/commonjs/package/theme.js +384 -0
- package/lib/commonjs/package/theme.js.map +1 -0
- package/lib/commonjs/package/utils/index.js +130 -0
- package/lib/commonjs/package/utils/index.js.map +1 -0
- package/lib/commonjs/styled.code-workspace +9 -0
- package/lib/module/assets/img/doctor.png +0 -0
- package/lib/module/index.js +23 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/package/badge/index.js +151 -0
- package/lib/module/package/badge/index.js.map +1 -0
- package/lib/module/package/button/index.js +89 -0
- package/lib/module/package/button/index.js.map +1 -0
- package/lib/module/package/card/index.js +25 -0
- package/lib/module/package/card/index.js.map +1 -0
- package/lib/module/package/checkBox/index.js +75 -0
- package/lib/module/package/checkBox/index.js.map +1 -0
- package/lib/module/package/cycle/index.js +21 -0
- package/lib/module/package/cycle/index.js.map +1 -0
- package/lib/module/package/dialog/index.js +182 -0
- package/lib/module/package/dialog/index.js.map +1 -0
- package/lib/module/package/dropdown/index.js +106 -0
- package/lib/module/package/dropdown/index.js.map +1 -0
- package/lib/module/package/form/index.js +176 -0
- package/lib/module/package/form/index.js.map +1 -0
- package/lib/module/package/header/index.js +83 -0
- package/lib/module/package/header/index.js.map +1 -0
- package/lib/module/package/image/index.js +115 -0
- package/lib/module/package/image/index.js.map +1 -0
- package/lib/module/package/radioButton/index.js +75 -0
- package/lib/module/package/radioButton/index.js.map +1 -0
- package/lib/module/package/safeAreaView/index.js +11 -0
- package/lib/module/package/safeAreaView/index.js.map +1 -0
- package/lib/module/package/scrollView/index.js +11 -0
- package/lib/module/package/scrollView/index.js.map +1 -0
- package/lib/module/package/separator/index.js +26 -0
- package/lib/module/package/separator/index.js.map +1 -0
- package/lib/module/package/spacer/index.js +11 -0
- package/lib/module/package/spacer/index.js.map +1 -0
- package/lib/module/package/spinner/index.js +36 -0
- package/lib/module/package/spinner/index.js.map +1 -0
- package/lib/module/package/stack/__test__/index.test.js +89 -0
- package/lib/module/package/stack/__test__/index.test.js.map +1 -0
- package/lib/module/package/stack/index.js +36 -0
- package/lib/module/package/stack/index.js.map +1 -0
- package/lib/module/package/styled/__test__/index.test.js +158 -0
- package/lib/module/package/styled/__test__/index.test.js.map +1 -0
- package/lib/module/package/styled/index.js +35 -0
- package/lib/module/package/styled/index.js.map +1 -0
- package/lib/module/package/switch/index.js +36 -0
- package/lib/module/package/switch/index.js.map +1 -0
- package/lib/module/package/text/index.js +68 -0
- package/lib/module/package/text/index.js.map +1 -0
- package/lib/module/package/theme.js +379 -0
- package/lib/module/package/theme.js.map +1 -0
- package/lib/module/package/utils/index.js +120 -0
- package/lib/module/package/utils/index.js.map +1 -0
- package/lib/module/styled.code-workspace +9 -0
- package/package.json +85 -0
- package/src/assets/img/doctor.png +0 -0
- package/src/index.js +23 -0
- package/src/package/badge/index.jsx +133 -0
- package/src/package/button/index.jsx +80 -0
- package/src/package/card/index.jsx +38 -0
- package/src/package/checkBox/index.jsx +80 -0
- package/src/package/cycle/index.jsx +23 -0
- package/src/package/dialog/index.jsx +214 -0
- package/src/package/dropdown/index.jsx +102 -0
- package/src/package/form/index.jsx +145 -0
- package/src/package/header/index.jsx +92 -0
- package/src/package/image/index.jsx +93 -0
- package/src/package/radioButton/index.jsx +81 -0
- package/src/package/safeAreaView/index.jsx +12 -0
- package/src/package/scrollView/index.jsx +12 -0
- package/src/package/separator/index.jsx +26 -0
- package/src/package/spacer/index.jsx +13 -0
- package/src/package/spinner/index.jsx +33 -0
- package/src/package/stack/__test__/index.test.js +68 -0
- package/src/package/stack/index.jsx +37 -0
- package/src/package/styled/__test__/index.test.js +132 -0
- package/src/package/styled/index.js +32 -0
- package/src/package/switch/index.jsx +33 -0
- package/src/package/text/index.jsx +61 -0
- package/src/package/theme.js +376 -0
- package/src/package/utils/index.js +108 -0
- package/src/styled.code-workspace +9 -0
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
+
import React, { useState, useEffect } from "react";
|
|
3
|
+
import { YStack } from '../stack';
|
|
4
|
+
import { StyledText } from '../text';
|
|
5
|
+
import { StyledSpacer } from '../spacer';
|
|
6
|
+
import DropDownPicker from "react-native-dropdown-picker";
|
|
7
|
+
import { theme } from "../theme";
|
|
8
|
+
import { styled } from "../styled";
|
|
9
|
+
const Dropdown = styled(DropDownPicker, {
|
|
10
|
+
base: {
|
|
11
|
+
borderColor: theme.colors.gray[800],
|
|
12
|
+
borderWidth: 1,
|
|
13
|
+
borderRadius: 30,
|
|
14
|
+
backgroundColor: theme.colors.gray[1],
|
|
15
|
+
width: '100%',
|
|
16
|
+
color: theme.colors.gray[800],
|
|
17
|
+
paddingHorizontal: 16
|
|
18
|
+
},
|
|
19
|
+
variants: {
|
|
20
|
+
error: {
|
|
21
|
+
true: {
|
|
22
|
+
borderColor: theme.colors.pink[500],
|
|
23
|
+
borderWidth: 1
|
|
24
|
+
},
|
|
25
|
+
false: {
|
|
26
|
+
borderColor: theme.colors.gray[800]
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
const StyledDropdown = ({
|
|
32
|
+
items,
|
|
33
|
+
label,
|
|
34
|
+
errorMessage,
|
|
35
|
+
labelStyles,
|
|
36
|
+
...rest
|
|
37
|
+
}) => {
|
|
38
|
+
const [open, setOpen] = useState(false);
|
|
39
|
+
return /*#__PURE__*/React.createElement(YStack, {
|
|
40
|
+
justifyContent: "flex-start",
|
|
41
|
+
alignItems: "flex-start"
|
|
42
|
+
}, label && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpacer, {
|
|
43
|
+
marginVertical: 4
|
|
44
|
+
}), /*#__PURE__*/React.createElement(StyledText, _extends({
|
|
45
|
+
paddingHorizontal: 8,
|
|
46
|
+
color: theme.colors.gray[600],
|
|
47
|
+
fontSize: theme.fontSize.normal,
|
|
48
|
+
fontWeight: theme.fontWeight.normal
|
|
49
|
+
}, labelStyles), label), /*#__PURE__*/React.createElement(StyledSpacer, {
|
|
50
|
+
marginVertical: 4
|
|
51
|
+
})), /*#__PURE__*/React.createElement(Dropdown, _extends({
|
|
52
|
+
open: open,
|
|
53
|
+
setOpen: setOpen,
|
|
54
|
+
items: items
|
|
55
|
+
}, rest)), errorMessage && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpacer, {
|
|
56
|
+
marginVertical: 1
|
|
57
|
+
}), /*#__PURE__*/React.createElement(StyledText, {
|
|
58
|
+
marginHorizontal: 16,
|
|
59
|
+
fontWeight: theme.fontWeight.bold,
|
|
60
|
+
fontSize: theme.fontSize.small,
|
|
61
|
+
color: theme.colors.pink[500]
|
|
62
|
+
}, errorMessage)));
|
|
63
|
+
};
|
|
64
|
+
const StyledMultiDropdown = ({
|
|
65
|
+
items,
|
|
66
|
+
label,
|
|
67
|
+
errorMessage,
|
|
68
|
+
labelStyles,
|
|
69
|
+
onSelected,
|
|
70
|
+
...rest
|
|
71
|
+
}) => {
|
|
72
|
+
const [selected, setSelected] = useState([]);
|
|
73
|
+
const [open, setOpen] = useState(false);
|
|
74
|
+
useEffect(() => {
|
|
75
|
+
onSelected && onSelected(selected);
|
|
76
|
+
}, [selected]);
|
|
77
|
+
return /*#__PURE__*/React.createElement(YStack, {
|
|
78
|
+
justifyContent: "flex-start",
|
|
79
|
+
alignItems: "flex-start"
|
|
80
|
+
}, label && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpacer, {
|
|
81
|
+
marginVertical: 4
|
|
82
|
+
}), /*#__PURE__*/React.createElement(StyledText, _extends({
|
|
83
|
+
paddingHorizontal: 8,
|
|
84
|
+
color: theme.colors.gray[600],
|
|
85
|
+
fontSize: theme.fontSize.normal,
|
|
86
|
+
fontWeight: theme.fontWeight.normal
|
|
87
|
+
}, labelStyles), label), /*#__PURE__*/React.createElement(StyledSpacer, {
|
|
88
|
+
marginVertical: 4
|
|
89
|
+
})), /*#__PURE__*/React.createElement(Dropdown, _extends({
|
|
90
|
+
open: open,
|
|
91
|
+
setOpen: setOpen,
|
|
92
|
+
items: items,
|
|
93
|
+
setValue: setSelected,
|
|
94
|
+
value: selected,
|
|
95
|
+
multiple: true
|
|
96
|
+
}, rest)), errorMessage && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpacer, {
|
|
97
|
+
marginVertical: 1
|
|
98
|
+
}), /*#__PURE__*/React.createElement(StyledText, {
|
|
99
|
+
marginHorizontal: 16,
|
|
100
|
+
fontWeight: theme.fontWeight.bold,
|
|
101
|
+
fontSize: theme.fontSize.small,
|
|
102
|
+
color: theme.colors.pink[500]
|
|
103
|
+
}, errorMessage)));
|
|
104
|
+
};
|
|
105
|
+
export { StyledDropdown, StyledMultiDropdown };
|
|
106
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useState","useEffect","YStack","StyledText","StyledSpacer","DropDownPicker","theme","styled","Dropdown","base","borderColor","colors","gray","borderWidth","borderRadius","backgroundColor","width","color","paddingHorizontal","variants","error","true","pink","false","StyledDropdown","items","label","errorMessage","labelStyles","rest","open","setOpen","createElement","justifyContent","alignItems","Fragment","marginVertical","_extends","fontSize","normal","fontWeight","marginHorizontal","bold","small","StyledMultiDropdown","onSelected","selected","setSelected","setValue","value","multiple"],"sources":["index.jsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\r\nimport { YStack } from '../stack';\r\nimport { StyledText } from '../text';\r\nimport { StyledSpacer } from '../spacer';\r\nimport DropDownPicker from \"react-native-dropdown-picker\";\r\nimport { theme } from \"../theme\";\r\nimport { styled } from \"../styled\";\r\n\r\nconst Dropdown = styled(DropDownPicker, {\r\n base: {\r\n borderColor: theme.colors.gray[800],\r\n borderWidth: 1,\r\n borderRadius: 30,\r\n backgroundColor: theme.colors.gray[1],\r\n width: '100%',\r\n color: theme.colors.gray[800],\r\n paddingHorizontal: 16,\r\n },\r\n variants: {\r\n error: {\r\n true: {\r\n borderColor: theme.colors.pink[500],\r\n borderWidth: 1,\r\n },\r\n false: {\r\n borderColor: theme.colors.gray[800],\r\n }\r\n },\r\n }\r\n})\r\n\r\nconst StyledDropdown = ({ items, label, errorMessage, labelStyles, ...rest }) => {\r\n const [open, setOpen] = useState(false)\r\n return (\r\n <YStack justifyContent='flex-start' alignItems='flex-start'>\r\n {\r\n label && (\r\n <>\r\n <StyledSpacer marginVertical={4} />\r\n <StyledText paddingHorizontal={8} color={theme.colors.gray[600]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelStyles}>\r\n {label}\r\n </StyledText>\r\n <StyledSpacer marginVertical={4} />\r\n </>\r\n\r\n )\r\n }\r\n <Dropdown open={open} setOpen={setOpen} items={items} {...rest} />\r\n {\r\n errorMessage && (\r\n <>\r\n <StyledSpacer marginVertical={1} />\r\n <StyledText marginHorizontal={16} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>\r\n {errorMessage}\r\n </StyledText>\r\n </>\r\n )\r\n }\r\n\r\n </YStack>\r\n )\r\n}\r\n\r\nconst StyledMultiDropdown = ({ items, label, errorMessage, labelStyles, onSelected, ...rest }) => {\r\n const [selected, setSelected] = useState([])\r\n const [open, setOpen] = useState(false)\r\n\r\n useEffect(() => {\r\n onSelected && onSelected(selected)\r\n }, [selected])\r\n\r\n return (\r\n <YStack justifyContent='flex-start' alignItems='flex-start'>\r\n {\r\n label && (\r\n <>\r\n <StyledSpacer marginVertical={4} />\r\n <StyledText paddingHorizontal={8} color={theme.colors.gray[600]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelStyles}>\r\n {label}\r\n </StyledText>\r\n <StyledSpacer marginVertical={4} />\r\n </>\r\n\r\n )\r\n }\r\n <Dropdown open={open} setOpen={setOpen} items={items} setValue={setSelected} value={selected} multiple {...rest} />\r\n {\r\n errorMessage && (\r\n <>\r\n <StyledSpacer marginVertical={1} />\r\n <StyledText marginHorizontal={16} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]}>\r\n {errorMessage}\r\n </StyledText>\r\n </>\r\n )\r\n }\r\n\r\n </YStack>\r\n )\r\n}\r\n\r\nexport { StyledDropdown, StyledMultiDropdown }"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
+
import React, { forwardRef } from 'react';
|
|
3
|
+
import { TextInput } from 'react-native';
|
|
4
|
+
import { YStack } from '../stack';
|
|
5
|
+
import { StyledText } from '../text';
|
|
6
|
+
import { StyledSpacer } from '../spacer';
|
|
7
|
+
import { theme } from '../theme';
|
|
8
|
+
import { styled } from '../styled';
|
|
9
|
+
import { isValidColor, isValidNumber, isValidString } from '../utils';
|
|
10
|
+
const StyledInputText = styled(TextInput, {
|
|
11
|
+
base: {
|
|
12
|
+
borderColor: theme.colors.gray[800],
|
|
13
|
+
borderWidth: 1,
|
|
14
|
+
borderRadius: 30,
|
|
15
|
+
backgroundColor: theme.fontWeight.normal[1],
|
|
16
|
+
width: '100%',
|
|
17
|
+
color: theme.colors.gray[800],
|
|
18
|
+
paddingHorizontal: 16,
|
|
19
|
+
paddingVertical: 8,
|
|
20
|
+
fontSize: theme.fontSize.normal,
|
|
21
|
+
placeholderTextColor: theme.colors.gray[1]
|
|
22
|
+
},
|
|
23
|
+
variants: {
|
|
24
|
+
fontWeight: (size = theme.fontWeight.normal) => {
|
|
25
|
+
if (!isValidString(size)) {
|
|
26
|
+
throw new Error('Invalid fontWeight value');
|
|
27
|
+
}
|
|
28
|
+
return {
|
|
29
|
+
fontWeight: size
|
|
30
|
+
};
|
|
31
|
+
},
|
|
32
|
+
color: (color = theme.colors.gray[800]) => {
|
|
33
|
+
if (!isValidColor(color)) {
|
|
34
|
+
throw new Error('Invalid color value');
|
|
35
|
+
}
|
|
36
|
+
return {
|
|
37
|
+
color: color
|
|
38
|
+
};
|
|
39
|
+
},
|
|
40
|
+
fontSize: (size = theme.fontSize.normal) => {
|
|
41
|
+
if (!isValidNumber(size)) {
|
|
42
|
+
throw new Error('Invalid fontSize value');
|
|
43
|
+
}
|
|
44
|
+
return {
|
|
45
|
+
fontSize: size
|
|
46
|
+
};
|
|
47
|
+
},
|
|
48
|
+
fontFamily: font => {
|
|
49
|
+
if (!font) return;
|
|
50
|
+
return {
|
|
51
|
+
fontFamily: font
|
|
52
|
+
};
|
|
53
|
+
},
|
|
54
|
+
textAlign: (align = 'left') => {
|
|
55
|
+
const validAlignments = ['auto', 'left', 'right', 'center', 'justify'];
|
|
56
|
+
if (!validAlignments.includes(align)) {
|
|
57
|
+
throw new Error('Invalid textAlign value');
|
|
58
|
+
}
|
|
59
|
+
return {
|
|
60
|
+
textAlign: align
|
|
61
|
+
};
|
|
62
|
+
},
|
|
63
|
+
borderRadius: (value = 16) => {
|
|
64
|
+
if (!isValidNumber(value)) {
|
|
65
|
+
throw new Error('Invalid borderRadius value');
|
|
66
|
+
}
|
|
67
|
+
return {
|
|
68
|
+
borderRadius: value
|
|
69
|
+
};
|
|
70
|
+
},
|
|
71
|
+
borderColor: (value = theme.colors.gray[100]) => {
|
|
72
|
+
if (!isValidColor(value)) {
|
|
73
|
+
throw new Error('Invalid borderColor value');
|
|
74
|
+
}
|
|
75
|
+
return {
|
|
76
|
+
borderColor: value
|
|
77
|
+
};
|
|
78
|
+
},
|
|
79
|
+
backgroundColor: (value = theme.colors.gray[1]) => {
|
|
80
|
+
if (!isValidColor(value)) {
|
|
81
|
+
throw new Error('Invalid backgroundColor value');
|
|
82
|
+
}
|
|
83
|
+
return {
|
|
84
|
+
backgroundColor: value
|
|
85
|
+
};
|
|
86
|
+
},
|
|
87
|
+
noBorder: {
|
|
88
|
+
true: {
|
|
89
|
+
borderWidth: 0
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
placeholderTextColor: (value = theme.colors.gray[800]) => {
|
|
93
|
+
if (!isValidColor(value)) {
|
|
94
|
+
throw new Error('Invalid placeholderTextColor value');
|
|
95
|
+
}
|
|
96
|
+
return {
|
|
97
|
+
placeholderTextColor: value
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
const StyledInput = /*#__PURE__*/forwardRef(({
|
|
103
|
+
label,
|
|
104
|
+
flex = 0,
|
|
105
|
+
borderColor,
|
|
106
|
+
errorMessage,
|
|
107
|
+
error,
|
|
108
|
+
errorProps,
|
|
109
|
+
labelProps,
|
|
110
|
+
...rest
|
|
111
|
+
}, ref) => {
|
|
112
|
+
return /*#__PURE__*/React.createElement(YStack, {
|
|
113
|
+
width: '100%'
|
|
114
|
+
}, label && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledText, _extends({
|
|
115
|
+
paddingHorizontal: 8,
|
|
116
|
+
color: theme.colors.gray[800],
|
|
117
|
+
fontSize: theme.fontSize.normal,
|
|
118
|
+
fontWeight: theme.fontWeight.normal
|
|
119
|
+
}, labelProps), label), /*#__PURE__*/React.createElement(StyledSpacer, {
|
|
120
|
+
marginVertical: 4
|
|
121
|
+
})), /*#__PURE__*/React.createElement(StyledInputText, _extends({
|
|
122
|
+
placeholderTextColor: theme.colors.gray[400],
|
|
123
|
+
ref: ref
|
|
124
|
+
}, rest, {
|
|
125
|
+
borderColor: error ? theme.colors.pink[500] : borderColor
|
|
126
|
+
})), errorMessage && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpacer, {
|
|
127
|
+
marginVertical: 1
|
|
128
|
+
}), /*#__PURE__*/React.createElement(StyledText, _extends({
|
|
129
|
+
marginHorizontal: 8,
|
|
130
|
+
fontWeight: theme.fontWeight.bold,
|
|
131
|
+
fontSize: theme.fontSize.small,
|
|
132
|
+
color: theme.colors.pink[500]
|
|
133
|
+
}, errorProps), errorMessage)));
|
|
134
|
+
});
|
|
135
|
+
const StyledMultiInput = ({
|
|
136
|
+
label,
|
|
137
|
+
errorMessage,
|
|
138
|
+
borderColor,
|
|
139
|
+
error,
|
|
140
|
+
errorProps,
|
|
141
|
+
labelProps,
|
|
142
|
+
...rest
|
|
143
|
+
}) => {
|
|
144
|
+
return /*#__PURE__*/React.createElement(YStack, {
|
|
145
|
+
width: '100%',
|
|
146
|
+
justifyContent: "flex-start",
|
|
147
|
+
alignItems: "flex-start"
|
|
148
|
+
}, label && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpacer, {
|
|
149
|
+
marginVertical: 4
|
|
150
|
+
}), /*#__PURE__*/React.createElement(StyledText, _extends({
|
|
151
|
+
paddingHorizontal: 8,
|
|
152
|
+
color: theme.colors.gray[800],
|
|
153
|
+
fontSize: theme.fontSize.normal,
|
|
154
|
+
fontWeight: theme.fontWeight.normal
|
|
155
|
+
}, labelProps), label), /*#__PURE__*/React.createElement(StyledSpacer, {
|
|
156
|
+
marginVertical: 4
|
|
157
|
+
})), /*#__PURE__*/React.createElement(StyledInputText, _extends({
|
|
158
|
+
borderRadius: 16,
|
|
159
|
+
textAlignVertical: "top",
|
|
160
|
+
multiline: true,
|
|
161
|
+
numberOfLines: 5,
|
|
162
|
+
inputMode: "text"
|
|
163
|
+
}, rest, {
|
|
164
|
+
borderColor: error ? theme.colors.pink[500] : borderColor
|
|
165
|
+
})), errorMessage && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSpacer, {
|
|
166
|
+
marginVertical: 1
|
|
167
|
+
}), /*#__PURE__*/React.createElement(StyledText, _extends({
|
|
168
|
+
marginHorizontal: 8,
|
|
169
|
+
fontWeight: theme.fontWeight.bold,
|
|
170
|
+
fontSize: theme.fontSize.small,
|
|
171
|
+
color: theme.colors.pink[500]
|
|
172
|
+
}, errorProps), errorMessage)));
|
|
173
|
+
};
|
|
174
|
+
export { StyledInput, StyledMultiInput };
|
|
175
|
+
export default StyledInputText;
|
|
176
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","forwardRef","TextInput","YStack","StyledText","StyledSpacer","theme","styled","isValidColor","isValidNumber","isValidString","StyledInputText","base","borderColor","colors","gray","borderWidth","borderRadius","backgroundColor","fontWeight","normal","width","color","paddingHorizontal","paddingVertical","fontSize","placeholderTextColor","variants","size","Error","fontFamily","font","textAlign","align","validAlignments","includes","value","noBorder","true","StyledInput","label","flex","errorMessage","error","errorProps","labelProps","rest","ref","createElement","Fragment","_extends","marginVertical","pink","marginHorizontal","bold","small","StyledMultiInput","justifyContent","alignItems","textAlignVertical","multiline","numberOfLines","inputMode"],"sources":["index.jsx"],"sourcesContent":["import React, { forwardRef } from 'react';\r\nimport { TextInput } from 'react-native';\r\nimport { YStack } from '../stack';\r\nimport { StyledText } from '../text';\r\nimport { StyledSpacer } from '../spacer';\r\nimport { theme } from '../theme';\r\nimport { styled } from '../styled';\r\nimport { isValidColor, isValidNumber, isValidString } from '../utils';\r\n\r\nconst StyledInputText = styled(TextInput, {\r\n base: {\r\n borderColor: theme.colors.gray[800],\r\n borderWidth: 1,\r\n borderRadius: 30,\r\n backgroundColor: theme.fontWeight.normal[1],\r\n width: '100%',\r\n color: theme.colors.gray[800],\r\n paddingHorizontal: 16,\r\n paddingVertical: 8,\r\n fontSize: theme.fontSize.normal,\r\n placeholderTextColor: theme.colors.gray[1],\r\n },\r\n variants : {\r\n fontWeight: (size = theme.fontWeight.normal) => {\r\n if (!isValidString(size)) {\r\n throw new Error('Invalid fontWeight value');\r\n }\r\n return { fontWeight: size };\r\n },\r\n color: (color = theme.colors.gray[800]) => {\r\n if (!isValidColor(color)) {\r\n throw new Error('Invalid color value');\r\n }\r\n return { color: color };\r\n },\r\n fontSize: (size = theme.fontSize.normal) => {\r\n if (!isValidNumber(size)) {\r\n throw new Error('Invalid fontSize value');\r\n }\r\n return { fontSize: size };\r\n },\r\n fontFamily: font => {\r\n if (!font) return\r\n return {\r\n fontFamily: font\r\n }\r\n },\r\n textAlign: (align = 'left') => {\r\n const validAlignments = ['auto', 'left', 'right', 'center', 'justify'];\r\n if (!validAlignments.includes(align)) {\r\n throw new Error('Invalid textAlign value');\r\n }\r\n return { textAlign: align };\r\n },\r\n borderRadius: (value = 16) => {\r\n if (!isValidNumber(value)) {\r\n throw new Error('Invalid borderRadius value');\r\n }\r\n return { borderRadius: value };\r\n },\r\n borderColor: (value = theme.colors.gray[100]) => {\r\n if (!isValidColor(value)) {\r\n throw new Error('Invalid borderColor value');\r\n }\r\n return { borderColor: value };\r\n },\r\n backgroundColor: (value = theme.colors.gray[1]) => {\r\n if (!isValidColor(value)) {\r\n throw new Error('Invalid backgroundColor value');\r\n }\r\n return { backgroundColor: value };\r\n },\r\n noBorder: {\r\n true: { borderWidth: 0 }\r\n },\r\n placeholderTextColor: (value = theme.colors.gray[800]) => {\r\n if (!isValidColor(value)) {\r\n throw new Error('Invalid placeholderTextColor value');\r\n }\r\n return { placeholderTextColor: value };\r\n },\r\n}\r\n});\r\n\r\nconst StyledInput = forwardRef(({ label, flex = 0, borderColor, errorMessage, error, errorProps, labelProps, ...rest }, ref) => {\r\n return (\r\n <YStack width={'100%'}>\r\n {\r\n label && (\r\n <>\r\n <StyledText paddingHorizontal={8} color={theme.colors.gray[800]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelProps}>\r\n {label}\r\n </StyledText>\r\n <StyledSpacer marginVertical={4} />\r\n </>\r\n )\r\n }\r\n <StyledInputText placeholderTextColor={theme.colors.gray[400]} ref={ref} {...rest} borderColor={error ? theme.colors.pink[500] : borderColor} />\r\n {\r\n errorMessage && (\r\n <>\r\n <StyledSpacer marginVertical={1} />\r\n <StyledText marginHorizontal={8} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]} {...errorProps}>\r\n {errorMessage}\r\n </StyledText>\r\n </>\r\n )\r\n }\r\n </YStack>\r\n )\r\n})\r\n\r\nconst StyledMultiInput = ({ label, errorMessage, borderColor, error, errorProps, labelProps, ...rest }) => {\r\n return (\r\n <YStack width={'100%'} justifyContent='flex-start' alignItems='flex-start'>\r\n {\r\n label && (\r\n <>\r\n <StyledSpacer marginVertical={4} />\r\n <StyledText paddingHorizontal={8} color={theme.colors.gray[800]} fontSize={theme.fontSize.normal} fontWeight={theme.fontWeight.normal} {...labelProps}>\r\n {label}\r\n </StyledText>\r\n <StyledSpacer marginVertical={4} />\r\n </>\r\n\r\n )\r\n }\r\n <StyledInputText borderRadius={16} textAlignVertical='top' multiline numberOfLines={5} inputMode='text' {...rest} borderColor={error ? theme.colors.pink[500] : borderColor} />\r\n {\r\n errorMessage && (\r\n <>\r\n <StyledSpacer marginVertical={1} />\r\n <StyledText marginHorizontal={8} fontWeight={theme.fontWeight.bold} fontSize={theme.fontSize.small} color={theme.colors.pink[500]} {...errorProps}>\r\n {errorMessage}\r\n </StyledText>\r\n </>\r\n )\r\n }\r\n\r\n </YStack>\r\n )\r\n}\r\n\r\nexport { StyledInput, StyledMultiInput }\r\nexport default StyledInputText"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,UAAU,QAAQ,SAAS;AACpC,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,YAAY,EAAEC,aAAa,EAAEC,aAAa,QAAQ,UAAU;AAErE,MAAMC,eAAe,GAAGJ,MAAM,CAACL,SAAS,EAAE;EACtCU,IAAI,EAAE;IACFC,WAAW,EAAEP,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG,CAAC;IACnCC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,EAAE;IAChBC,eAAe,EAAEZ,KAAK,CAACa,UAAU,CAACC,MAAM,CAAC,CAAC,CAAC;IAC3CC,KAAK,EAAE,MAAM;IACbC,KAAK,EAAEhB,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG,CAAC;IAC7BQ,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,CAAC;IAClBC,QAAQ,EAAEnB,KAAK,CAACmB,QAAQ,CAACL,MAAM;IAC/BM,oBAAoB,EAAEpB,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,CAAC;EAC7C,CAAC;EACDY,QAAQ,EAAG;IACXR,UAAU,EAAEA,CAACS,IAAI,GAAGtB,KAAK,CAACa,UAAU,CAACC,MAAM,KAAK;MAC5C,IAAI,CAACV,aAAa,CAACkB,IAAI,CAAC,EAAE;QACtB,MAAM,IAAIC,KAAK,CAAC,0BAA0B,CAAC;MAC/C;MACA,OAAO;QAAEV,UAAU,EAAES;MAAK,CAAC;IAC/B,CAAC;IACDN,KAAK,EAAEA,CAACA,KAAK,GAAGhB,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG,CAAC,KAAK;MACvC,IAAI,CAACP,YAAY,CAACc,KAAK,CAAC,EAAE;QACtB,MAAM,IAAIO,KAAK,CAAC,qBAAqB,CAAC;MAC1C;MACA,OAAO;QAAEP,KAAK,EAAEA;MAAM,CAAC;IAC3B,CAAC;IACDG,QAAQ,EAAEA,CAACG,IAAI,GAAGtB,KAAK,CAACmB,QAAQ,CAACL,MAAM,KAAK;MACxC,IAAI,CAACX,aAAa,CAACmB,IAAI,CAAC,EAAE;QACtB,MAAM,IAAIC,KAAK,CAAC,wBAAwB,CAAC;MAC7C;MACA,OAAO;QAAEJ,QAAQ,EAAEG;MAAK,CAAC;IAC7B,CAAC;IACDE,UAAU,EAAEC,IAAI,IAAI;MAClB,IAAI,CAACA,IAAI,EAAE;MACX,OAAO;QACLD,UAAU,EAAEC;MACd,CAAC;IACH,CAAC;IACDC,SAAS,EAAEA,CAACC,KAAK,GAAG,MAAM,KAAK;MAC3B,MAAMC,eAAe,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,CAAC;MACtE,IAAI,CAACA,eAAe,CAACC,QAAQ,CAACF,KAAK,CAAC,EAAE;QAClC,MAAM,IAAIJ,KAAK,CAAC,yBAAyB,CAAC;MAC9C;MACA,OAAO;QAAEG,SAAS,EAAEC;MAAM,CAAC;IAC/B,CAAC;IACDhB,YAAY,EAAEA,CAACmB,KAAK,GAAG,EAAE,KAAK;MAC1B,IAAI,CAAC3B,aAAa,CAAC2B,KAAK,CAAC,EAAE;QACvB,MAAM,IAAIP,KAAK,CAAC,4BAA4B,CAAC;MACjD;MACA,OAAO;QAAEZ,YAAY,EAAEmB;MAAM,CAAC;IAClC,CAAC;IACDvB,WAAW,EAAEA,CAACuB,KAAK,GAAI9B,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG,CAAC,KAAK;MAC9C,IAAI,CAACP,YAAY,CAAC4B,KAAK,CAAC,EAAE;QACtB,MAAM,IAAIP,KAAK,CAAC,2BAA2B,CAAC;MAChD;MACA,OAAO;QAAEhB,WAAW,EAAEuB;MAAM,CAAC;IACjC,CAAC;IACDlB,eAAe,EAAEA,CAACkB,KAAK,GAAG9B,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,CAAC,CAAC,KAAK;MAC/C,IAAI,CAACP,YAAY,CAAC4B,KAAK,CAAC,EAAE;QACtB,MAAM,IAAIP,KAAK,CAAC,+BAA+B,CAAC;MACpD;MACA,OAAO;QAAEX,eAAe,EAAEkB;MAAM,CAAC;IACrC,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;QAAEtB,WAAW,EAAE;MAAE;IAC3B,CAAC;IACDU,oBAAoB,EAAEA,CAACU,KAAK,GAAG9B,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG,CAAC,KAAK;MACtD,IAAI,CAACP,YAAY,CAAC4B,KAAK,CAAC,EAAE;QACtB,MAAM,IAAIP,KAAK,CAAC,oCAAoC,CAAC;MACzD;MACA,OAAO;QAAEH,oBAAoB,EAAEU;MAAM,CAAC;IAC1C;EACJ;AACA,CAAC,CAAC;AAEF,MAAMG,WAAW,gBAAGtC,UAAU,CAAC,CAAC;EAAEuC,KAAK;EAAEC,IAAI,GAAG,CAAC;EAAE5B,WAAW;EAAE6B,YAAY;EAAEC,KAAK;EAAEC,UAAU;EAAEC,UAAU;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EAC5H,oBACI/C,KAAA,CAAAgD,aAAA,CAAC7C,MAAM;IAACkB,KAAK,EAAE;EAAO,GAEdmB,KAAK,iBACDxC,KAAA,CAAAgD,aAAA,CAAAhD,KAAA,CAAAiD,QAAA,qBACIjD,KAAA,CAAAgD,aAAA,CAAC5C,UAAU,EAAA8C,QAAA;IAAC3B,iBAAiB,EAAE,CAAE;IAACD,KAAK,EAAEhB,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG,CAAE;IAACU,QAAQ,EAAEnB,KAAK,CAACmB,QAAQ,CAACL,MAAO;IAACD,UAAU,EAAEb,KAAK,CAACa,UAAU,CAACC;EAAO,GAAKyB,UAAU,GAChJL,KACO,CAAC,eACbxC,KAAA,CAAAgD,aAAA,CAAC3C,YAAY;IAAC8C,cAAc,EAAE;EAAE,CAAE,CACpC,CACL,eAELnD,KAAA,CAAAgD,aAAA,CAACrC,eAAe,EAAAuC,QAAA;IAACxB,oBAAoB,EAAEpB,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG,CAAE;IAACgC,GAAG,EAAEA;EAAI,GAAKD,IAAI;IAAEjC,WAAW,EAAE8B,KAAK,GAAGrC,KAAK,CAACQ,MAAM,CAACsC,IAAI,CAAC,GAAG,CAAC,GAAGvC;EAAY,EAAE,CAAC,EAE5I6B,YAAY,iBACR1C,KAAA,CAAAgD,aAAA,CAAAhD,KAAA,CAAAiD,QAAA,qBACIjD,KAAA,CAAAgD,aAAA,CAAC3C,YAAY;IAAC8C,cAAc,EAAE;EAAE,CAAE,CAAC,eACnCnD,KAAA,CAAAgD,aAAA,CAAC5C,UAAU,EAAA8C,QAAA;IAACG,gBAAgB,EAAE,CAAE;IAAClC,UAAU,EAAEb,KAAK,CAACa,UAAU,CAACmC,IAAK;IAAC7B,QAAQ,EAAEnB,KAAK,CAACmB,QAAQ,CAAC8B,KAAM;IAACjC,KAAK,EAAEhB,KAAK,CAACQ,MAAM,CAACsC,IAAI,CAAC,GAAG;EAAE,GAAKR,UAAU,GAC5IF,YACO,CACd,CAGN,CAAC;AAEjB,CAAC,CAAC;AAEF,MAAMc,gBAAgB,GAAGA,CAAC;EAAEhB,KAAK;EAAEE,YAAY;EAAE7B,WAAW;EAAE8B,KAAK;EAAEC,UAAU;EAAEC,UAAU;EAAE,GAAGC;AAAK,CAAC,KAAK;EACvG,oBACI9C,KAAA,CAAAgD,aAAA,CAAC7C,MAAM;IAACkB,KAAK,EAAE,MAAO;IAACoC,cAAc,EAAC,YAAY;IAACC,UAAU,EAAC;EAAY,GAElElB,KAAK,iBACDxC,KAAA,CAAAgD,aAAA,CAAAhD,KAAA,CAAAiD,QAAA,qBACIjD,KAAA,CAAAgD,aAAA,CAAC3C,YAAY;IAAC8C,cAAc,EAAE;EAAE,CAAE,CAAC,eACnCnD,KAAA,CAAAgD,aAAA,CAAC5C,UAAU,EAAA8C,QAAA;IAAC3B,iBAAiB,EAAE,CAAE;IAACD,KAAK,EAAEhB,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG,CAAE;IAACU,QAAQ,EAAEnB,KAAK,CAACmB,QAAQ,CAACL,MAAO;IAACD,UAAU,EAAEb,KAAK,CAACa,UAAU,CAACC;EAAO,GAAKyB,UAAU,GAChJL,KACO,CAAC,eACbxC,KAAA,CAAAgD,aAAA,CAAC3C,YAAY;IAAC8C,cAAc,EAAE;EAAE,CAAE,CACpC,CAEL,eAELnD,KAAA,CAAAgD,aAAA,CAACrC,eAAe,EAAAuC,QAAA;IAACjC,YAAY,EAAE,EAAG;IAAC0C,iBAAiB,EAAC,KAAK;IAACC,SAAS;IAACC,aAAa,EAAE,CAAE;IAACC,SAAS,EAAC;EAAM,GAAKhB,IAAI;IAAEjC,WAAW,EAAE8B,KAAK,GAAGrC,KAAK,CAACQ,MAAM,CAACsC,IAAI,CAAC,GAAG,CAAC,GAAGvC;EAAY,EAAE,CAAC,EAE3K6B,YAAY,iBACR1C,KAAA,CAAAgD,aAAA,CAAAhD,KAAA,CAAAiD,QAAA,qBACIjD,KAAA,CAAAgD,aAAA,CAAC3C,YAAY;IAAC8C,cAAc,EAAE;EAAE,CAAE,CAAC,eACnCnD,KAAA,CAAAgD,aAAA,CAAC5C,UAAU,EAAA8C,QAAA;IAACG,gBAAgB,EAAE,CAAE;IAAClC,UAAU,EAAEb,KAAK,CAACa,UAAU,CAACmC,IAAK;IAAC7B,QAAQ,EAAEnB,KAAK,CAACmB,QAAQ,CAAC8B,KAAM;IAACjC,KAAK,EAAEhB,KAAK,CAACQ,MAAM,CAACsC,IAAI,CAAC,GAAG;EAAE,GAAKR,UAAU,GAC5IF,YACO,CACd,CAIN,CAAC;AAEjB,CAAC;AAED,SAASH,WAAW,EAAEiB,gBAAgB;AACtC,eAAe7C,eAAe","ignoreList":[]}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { View } from 'react-native';
|
|
4
|
+
import { StatusBar } from 'react-native';
|
|
5
|
+
import Icon from 'react-native-vector-icons/MaterialIcons';
|
|
6
|
+
import { theme } from '../theme';
|
|
7
|
+
import { YStack, XStack } from '../stack';
|
|
8
|
+
import { styled } from '../styled';
|
|
9
|
+
import { StyledCycle } from '../cycle';
|
|
10
|
+
import { StyledText } from '../text';
|
|
11
|
+
import { StyledSpacer } from '../spacer';
|
|
12
|
+
import { isValidNumber } from '../utils';
|
|
13
|
+
const Headers = styled(View, {
|
|
14
|
+
base: {
|
|
15
|
+
width: '100%',
|
|
16
|
+
flexDirection: 'row',
|
|
17
|
+
alignItems: 'center',
|
|
18
|
+
justifyContent: 'flex-start'
|
|
19
|
+
},
|
|
20
|
+
variants: {
|
|
21
|
+
marginTop: size => {
|
|
22
|
+
if (!isValidNumber(size)) {
|
|
23
|
+
throw new Error('Invalid marginTop value');
|
|
24
|
+
}
|
|
25
|
+
return {
|
|
26
|
+
marginTop: size
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
const StyledHeader = ({
|
|
32
|
+
statusProps,
|
|
33
|
+
...rest
|
|
34
|
+
}) => {
|
|
35
|
+
return /*#__PURE__*/React.createElement(YStack, null, /*#__PURE__*/React.createElement(StatusBar, _extends({
|
|
36
|
+
translucent: true,
|
|
37
|
+
backgroundColor: theme.colors.gray[1],
|
|
38
|
+
barStyle: 'dark-content'
|
|
39
|
+
}, statusProps)), /*#__PURE__*/React.createElement(Headers, rest));
|
|
40
|
+
};
|
|
41
|
+
const Title = ({
|
|
42
|
+
navigator,
|
|
43
|
+
title,
|
|
44
|
+
icon = false,
|
|
45
|
+
cycleProps,
|
|
46
|
+
reload = false,
|
|
47
|
+
screen,
|
|
48
|
+
...rest
|
|
49
|
+
}) => {
|
|
50
|
+
return /*#__PURE__*/React.createElement(XStack, _extends({
|
|
51
|
+
justifyContent: "flex-start",
|
|
52
|
+
alignItems: "center",
|
|
53
|
+
flex: 1,
|
|
54
|
+
paddingHorizontal: 8,
|
|
55
|
+
paddingVertical: 8
|
|
56
|
+
}, rest), icon && /*#__PURE__*/React.createElement(StyledCycle, cycleProps, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
|
|
57
|
+
name: 'arrow-back',
|
|
58
|
+
size: 30,
|
|
59
|
+
color: theme.colors.gray[700],
|
|
60
|
+
onPress: () => {
|
|
61
|
+
if (reload && screen && navigator) {
|
|
62
|
+
navigator.replace(screen);
|
|
63
|
+
} else {
|
|
64
|
+
navigator.goBack();
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}), /*#__PURE__*/React.createElement(StyledSpacer, {
|
|
68
|
+
marginHorizontal: 4
|
|
69
|
+
}))), title && /*#__PURE__*/React.createElement(StyledText, {
|
|
70
|
+
color: theme.colors.gray[800],
|
|
71
|
+
fontWeight: theme.fontWeight.normal,
|
|
72
|
+
fontSize: theme.fontSize.normal
|
|
73
|
+
}, title));
|
|
74
|
+
};
|
|
75
|
+
const Full = ({
|
|
76
|
+
children
|
|
77
|
+
}) => {
|
|
78
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
79
|
+
};
|
|
80
|
+
StyledHeader.Title = Title;
|
|
81
|
+
StyledHeader.Full = Full;
|
|
82
|
+
export { StyledHeader };
|
|
83
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","View","StatusBar","Icon","theme","YStack","XStack","styled","StyledCycle","StyledText","StyledSpacer","isValidNumber","Headers","base","width","flexDirection","alignItems","justifyContent","variants","marginTop","size","Error","StyledHeader","statusProps","rest","createElement","_extends","translucent","backgroundColor","colors","gray","barStyle","Title","navigator","title","icon","cycleProps","reload","screen","flex","paddingHorizontal","paddingVertical","Fragment","name","color","onPress","replace","goBack","marginHorizontal","fontWeight","normal","fontSize","Full","children"],"sources":["index.jsx"],"sourcesContent":["import React from 'react'\r\nimport { View } from 'react-native'\r\nimport { StatusBar } from 'react-native'\r\nimport Icon from 'react-native-vector-icons/MaterialIcons'\r\nimport { theme } from '../theme'\r\nimport { YStack, XStack } from '../stack'\r\nimport { styled } from '../styled'\r\nimport { StyledCycle } from '../cycle'\r\nimport { StyledText } from '../text'\r\nimport { StyledSpacer } from '../spacer'\r\nimport { isValidNumber } from '../utils'\r\n\r\nconst Headers = styled(View, {\r\n base: {\r\n width: '100%',\r\n flexDirection: 'row',\r\n alignItems: 'center',\r\n justifyContent: 'flex-start'\r\n },\r\n variants: {\r\n marginTop: size => {\r\n\r\n if (!isValidNumber(size)) {\r\n throw new Error('Invalid marginTop value')\r\n }\r\n return { marginTop: size }\r\n }\r\n }\r\n})\r\n\r\nconst StyledHeader = ({ statusProps, ...rest }) => {\r\n return (\r\n <YStack>\r\n <StatusBar\r\n translucent\r\n backgroundColor={theme.colors.gray[1]}\r\n barStyle={'dark-content'}\r\n {...statusProps}\r\n />\r\n <Headers {...rest} />\r\n </YStack>\r\n )\r\n}\r\n\r\nconst Title = ({ navigator, title, icon = false, cycleProps, reload = false, screen, ...rest }) => {\r\n\r\n return (\r\n <XStack justifyContent='flex-start' alignItems='center' flex={1} paddingHorizontal={8}\r\n paddingVertical={8} {...rest}>\r\n {\r\n icon && (\r\n <StyledCycle {...cycleProps}>\r\n <>\r\n <Icon\r\n name={'arrow-back'}\r\n size={30}\r\n color={theme.colors.gray[700]}\r\n onPress={() => {\r\n if (reload && screen && navigator) {\r\n navigator.replace(screen)\r\n } else {\r\n navigator.goBack()\r\n }\r\n }}\r\n />\r\n <StyledSpacer marginHorizontal={4} />\r\n </>\r\n </StyledCycle>\r\n )\r\n }\r\n {title &&\r\n <StyledText\r\n color={theme.colors.gray[800]}\r\n fontWeight={theme.fontWeight.normal}\r\n fontSize={theme.fontSize.normal}\r\n >\r\n {title}\r\n </StyledText>}\r\n </XStack>\r\n )\r\n}\r\n\r\nconst Full = ({ children }) => {\r\n return (\r\n <>{children}</>\r\n )\r\n}\r\n\r\nStyledHeader.Title = Title\r\nStyledHeader.Full = Full\r\n\r\nexport { StyledHeader }\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Image as SourceImage, ImageBackground as ImageBg } from 'react-native';
|
|
4
|
+
import { styled } from '../styled';
|
|
5
|
+
import { isValidColor, isValidNumber } from '../utils';
|
|
6
|
+
const base = {
|
|
7
|
+
borderRadius: 8,
|
|
8
|
+
resizeMode: 'cover',
|
|
9
|
+
position: 'relative'
|
|
10
|
+
};
|
|
11
|
+
const variants = {
|
|
12
|
+
borderRadius: (size = 32) => {
|
|
13
|
+
if (!isValidNumber(size)) {
|
|
14
|
+
throw new Error('Invalid borderRadius value');
|
|
15
|
+
}
|
|
16
|
+
return {
|
|
17
|
+
borderRadius: size
|
|
18
|
+
};
|
|
19
|
+
},
|
|
20
|
+
flex: size => {
|
|
21
|
+
if (!isValidNumber(size)) {
|
|
22
|
+
throw new Error('Invalid flex value');
|
|
23
|
+
}
|
|
24
|
+
return {
|
|
25
|
+
flex: size
|
|
26
|
+
};
|
|
27
|
+
},
|
|
28
|
+
width: size => {
|
|
29
|
+
if (!size) return;
|
|
30
|
+
return {
|
|
31
|
+
width: size
|
|
32
|
+
};
|
|
33
|
+
},
|
|
34
|
+
height: size => {
|
|
35
|
+
if (!size) return;
|
|
36
|
+
return {
|
|
37
|
+
height: size
|
|
38
|
+
};
|
|
39
|
+
},
|
|
40
|
+
borderWidth: size => {
|
|
41
|
+
if (!isValidNumber(size)) {
|
|
42
|
+
throw new Error('Invalid borderWidth value');
|
|
43
|
+
}
|
|
44
|
+
return {
|
|
45
|
+
borderWidth: size
|
|
46
|
+
};
|
|
47
|
+
},
|
|
48
|
+
borderColor: color => {
|
|
49
|
+
if (!isValidColor(color)) {
|
|
50
|
+
throw new Error('Invalid color value');
|
|
51
|
+
}
|
|
52
|
+
return {
|
|
53
|
+
borderColor: color
|
|
54
|
+
};
|
|
55
|
+
},
|
|
56
|
+
resizeMode: mode => {
|
|
57
|
+
const validModes = ['cover', 'contain', 'stretch', 'repeat', 'center'];
|
|
58
|
+
if (!validModes.includes(mode)) {
|
|
59
|
+
throw new Error('Invalid mode value');
|
|
60
|
+
}
|
|
61
|
+
return {
|
|
62
|
+
resizeMode: mode
|
|
63
|
+
};
|
|
64
|
+
},
|
|
65
|
+
right: (size = 0) => {
|
|
66
|
+
if (!isValidNumber(size)) {
|
|
67
|
+
throw new Error('Invalid right value');
|
|
68
|
+
}
|
|
69
|
+
return {
|
|
70
|
+
right: size
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
const Image = styled(SourceImage, {
|
|
75
|
+
base: {
|
|
76
|
+
...base
|
|
77
|
+
},
|
|
78
|
+
variants: {
|
|
79
|
+
...variants
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
const ImageBackground = styled(ImageBg, {
|
|
83
|
+
base: {
|
|
84
|
+
...base
|
|
85
|
+
},
|
|
86
|
+
variants: {
|
|
87
|
+
...variants
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
const StyledImage = ({
|
|
91
|
+
imageUrl,
|
|
92
|
+
local = false,
|
|
93
|
+
...rest
|
|
94
|
+
}) => {
|
|
95
|
+
const url = imageUrl ? {
|
|
96
|
+
uri: imageUrl
|
|
97
|
+
} : require('../../assets/img/doctor.png');
|
|
98
|
+
return /*#__PURE__*/React.createElement(Image, _extends({
|
|
99
|
+
source: local ? imageUrl : url
|
|
100
|
+
}, rest));
|
|
101
|
+
};
|
|
102
|
+
const StyledBackgroundImage = ({
|
|
103
|
+
imageUrl,
|
|
104
|
+
local = false,
|
|
105
|
+
...rest
|
|
106
|
+
}) => {
|
|
107
|
+
const url = imageUrl ? {
|
|
108
|
+
uri: imageUrl
|
|
109
|
+
} : require('../../assets/img/doctor.png');
|
|
110
|
+
return /*#__PURE__*/React.createElement(ImageBackground, _extends({
|
|
111
|
+
source: local ? imageUrl : url
|
|
112
|
+
}, rest));
|
|
113
|
+
};
|
|
114
|
+
export { StyledImage, StyledBackgroundImage };
|
|
115
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","Image","SourceImage","ImageBackground","ImageBg","styled","isValidColor","isValidNumber","base","borderRadius","resizeMode","position","variants","size","Error","flex","width","height","borderWidth","borderColor","color","mode","validModes","includes","right","StyledImage","imageUrl","local","rest","url","uri","require","createElement","_extends","source","StyledBackgroundImage"],"sources":["index.jsx"],"sourcesContent":["import React from 'react'\r\nimport { Image as SourceImage, ImageBackground as ImageBg } from 'react-native'\r\nimport { styled } from '../styled'\r\nimport { isValidColor, isValidNumber } from '../utils'\r\n\r\nconst base = {\r\n borderRadius: 8,\r\n resizeMode: 'cover',\r\n position: 'relative'\r\n}\r\n\r\nconst variants = {\r\n borderRadius: (size = 32) => {\r\n if (!isValidNumber(size)) {\r\n throw new Error('Invalid borderRadius value')\r\n }\r\n return { borderRadius: size }\r\n },\r\n flex: size => {\r\n if (!isValidNumber(size)) {\r\n throw new Error('Invalid flex value')\r\n }\r\n return { flex: size }\r\n },\r\n width: size => {\r\n if (!size) return\r\n return { width: size }\r\n },\r\n height: size => {\r\n if (!size) return\r\n return { height: size }\r\n },\r\n borderWidth: size => {\r\n if (!isValidNumber(size)) {\r\n throw new Error('Invalid borderWidth value')\r\n }\r\n return { borderWidth: size }\r\n },\r\n borderColor: color => {\r\n if (!isValidColor(color)) {\r\n throw new Error('Invalid color value')\r\n }\r\n return { borderColor: color }\r\n },\r\n resizeMode: mode => {\r\n const validModes = ['cover', 'contain', 'stretch', 'repeat', 'center']\r\n if (!validModes.includes(mode)) {\r\n throw new Error('Invalid mode value')\r\n }\r\n return { resizeMode: mode }\r\n },\r\n right: (size = 0) => {\r\n if (!isValidNumber(size)) {\r\n throw new Error('Invalid right value')\r\n }\r\n return { right: size }\r\n }\r\n}\r\n\r\nconst Image = styled(SourceImage, {\r\n base: { ...base },\r\n variants: {\r\n ...variants\r\n }\r\n})\r\n\r\nconst ImageBackground = styled(ImageBg, {\r\n base: { ...base },\r\n variants: {\r\n ...variants\r\n }\r\n})\r\n\r\nconst StyledImage = ({ imageUrl, local = false, ...rest }) => {\r\n const url = imageUrl\r\n\t\t? {\r\n uri: imageUrl\r\n}\r\n\t\t: require('../../assets/img/doctor.png')\r\n return <Image source={local ? imageUrl : url} {...rest} />\r\n}\r\n\r\nconst StyledBackgroundImage = ({ imageUrl, local = false, ...rest }) => {\r\n const url = imageUrl\r\n\t\t? {\r\n uri: imageUrl\r\n}\r\n\t\t: require('../../assets/img/doctor.png')\r\n\r\n return <ImageBackground source={local ? imageUrl : url} {...rest} />\r\n}\r\n\r\nexport { StyledImage, StyledBackgroundImage }\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
2
|
+
import React, { useState } from 'react';
|
|
3
|
+
import { styled } from '../styled';
|
|
4
|
+
import { TouchableOpacity } from 'react-native';
|
|
5
|
+
import Icon from 'react-native-vector-icons/MaterialIcons';
|
|
6
|
+
import { theme } from '../theme';
|
|
7
|
+
import { isValidColor, isValidNumber, isValidString } from '../utils';
|
|
8
|
+
const RadioButton = styled(TouchableOpacity, {
|
|
9
|
+
base: {
|
|
10
|
+
width: 24,
|
|
11
|
+
height: 24,
|
|
12
|
+
borderWidth: 2,
|
|
13
|
+
borderRadius: 100,
|
|
14
|
+
borderColor: theme.colors.gray[500],
|
|
15
|
+
justifyContent: 'center',
|
|
16
|
+
alignItems: 'center',
|
|
17
|
+
flexDirection: 'column'
|
|
18
|
+
},
|
|
19
|
+
variants: {
|
|
20
|
+
width: size => {
|
|
21
|
+
if (!size) return;
|
|
22
|
+
return {
|
|
23
|
+
width: size
|
|
24
|
+
};
|
|
25
|
+
},
|
|
26
|
+
height: size => {
|
|
27
|
+
if (!size) return;
|
|
28
|
+
return {
|
|
29
|
+
height: size
|
|
30
|
+
};
|
|
31
|
+
},
|
|
32
|
+
disabled: {
|
|
33
|
+
true: {
|
|
34
|
+
backgroundColor: theme.colors.gray[500]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
checked: {
|
|
38
|
+
true: {
|
|
39
|
+
backgroundColor: theme.colors.gray[1]
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
checkedColor: color => {
|
|
43
|
+
if (!color) return;
|
|
44
|
+
return {
|
|
45
|
+
backgroundColor: color,
|
|
46
|
+
borderColor: color
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
const StyledRadioButton = ({
|
|
52
|
+
onPress,
|
|
53
|
+
disabled = false,
|
|
54
|
+
checkedColor,
|
|
55
|
+
iconProps,
|
|
56
|
+
...rest
|
|
57
|
+
}) => {
|
|
58
|
+
const [checked, setChecked] = useState(false);
|
|
59
|
+
const toggleCheckbox = () => {
|
|
60
|
+
setChecked(!checked);
|
|
61
|
+
onPress && onPress(!checked);
|
|
62
|
+
};
|
|
63
|
+
return /*#__PURE__*/React.createElement(RadioButton, _extends({
|
|
64
|
+
disabled: disabled,
|
|
65
|
+
checked: checked,
|
|
66
|
+
checkedColor: checked && checkedColor && checkedColor,
|
|
67
|
+
onPress: () => toggleCheckbox()
|
|
68
|
+
}, rest), checked && /*#__PURE__*/React.createElement(Icon, _extends({
|
|
69
|
+
name: "circle",
|
|
70
|
+
color: theme.colors.gray[700],
|
|
71
|
+
size: 15
|
|
72
|
+
}, iconProps)));
|
|
73
|
+
};
|
|
74
|
+
export { StyledRadioButton };
|
|
75
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useState","styled","TouchableOpacity","Icon","theme","isValidColor","isValidNumber","isValidString","RadioButton","base","width","height","borderWidth","borderRadius","borderColor","colors","gray","justifyContent","alignItems","flexDirection","variants","size","disabled","true","backgroundColor","checked","checkedColor","color","StyledRadioButton","onPress","iconProps","rest","setChecked","toggleCheckbox","createElement","_extends","name"],"sources":["index.jsx"],"sourcesContent":["import React, { useState } from 'react'\r\nimport { styled } from '../styled'\r\nimport { TouchableOpacity } from 'react-native'\r\nimport Icon from 'react-native-vector-icons/MaterialIcons'\r\nimport { theme } from '../theme'\r\nimport { isValidColor, isValidNumber, isValidString } from '../utils'\r\n\r\nconst RadioButton = styled(TouchableOpacity, {\r\n base: {\r\n width: 24,\r\n height: 24,\r\n borderWidth: 2,\r\n borderRadius: 100,\r\n borderColor: theme.colors.gray[500],\r\n justifyContent: 'center',\r\n alignItems: 'center',\r\n flexDirection: 'column'\r\n },\r\n variants: {\r\n width: size => {\r\n if (!size) return\r\n return { width: size }\r\n },\r\n height: size => {\r\n if (!size) return\r\n return { height: size }\r\n },\r\n disabled: {\r\n true: {\r\n backgroundColor: theme.colors.gray[500]\r\n }\r\n },\r\n checked: {\r\n true: {\r\n backgroundColor: theme.colors.gray[1]\r\n }\r\n },\r\n checkedColor: color => {\r\n if (!color) return\r\n return {\r\n backgroundColor: color,\r\n borderColor: color\r\n }\r\n }\r\n }\r\n})\r\n\r\nconst StyledRadioButton = ({\r\n\tonPress,\r\n\tdisabled = false,\r\n\tcheckedColor,\r\n\ticonProps,\r\n\t...rest\r\n}) => {\r\n const [checked, setChecked] = useState(false)\r\n\r\n const toggleCheckbox = () => {\r\n setChecked(!checked)\r\n onPress && onPress(!checked)\r\n }\r\n\r\n return (\r\n <RadioButton\r\n disabled={disabled}\r\n checked={checked}\r\n checkedColor={checked && checkedColor && checkedColor}\r\n onPress={() => toggleCheckbox()}\r\n {...rest}\r\n\t\t>\r\n {checked &&\r\n <Icon\r\n name='circle'\r\n color={theme.colors.gray[700]}\r\n size={15}\r\n {...iconProps}\r\n\t\t\t\t/>}\r\n </RadioButton>\r\n )\r\n}\r\n\r\nexport { StyledRadioButton }\r\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,gBAAgB,QAAQ,cAAc;AAC/C,OAAOC,IAAI,MAAM,yCAAyC;AAC1D,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,YAAY,EAAEC,aAAa,EAAEC,aAAa,QAAQ,UAAU;AAErE,MAAMC,WAAW,GAAGP,MAAM,CAACC,gBAAgB,EAAE;EAC3CO,IAAI,EAAE;IACJC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,GAAG;IACjBC,WAAW,EAAEV,KAAK,CAACW,MAAM,CAACC,IAAI,CAAC,GAAG,CAAC;IACnCC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,aAAa,EAAE;EACjB,CAAC;EACDC,QAAQ,EAAE;IACRV,KAAK,EAAEW,IAAI,IAAI;MACb,IAAI,CAACA,IAAI,EAAE;MACX,OAAO;QAAEX,KAAK,EAAEW;MAAK,CAAC;IACxB,CAAC;IACDV,MAAM,EAAEU,IAAI,IAAI;MACd,IAAI,CAACA,IAAI,EAAE;MACX,OAAO;QAAEV,MAAM,EAAEU;MAAK,CAAC;IACzB,CAAC;IACDC,QAAQ,EAAE;MACRC,IAAI,EAAE;QACJC,eAAe,EAAEpB,KAAK,CAACW,MAAM,CAACC,IAAI,CAAC,GAAG;MACxC;IACF,CAAC;IACDS,OAAO,EAAE;MACPF,IAAI,EAAE;QACJC,eAAe,EAAEpB,KAAK,CAACW,MAAM,CAACC,IAAI,CAAC,CAAC;MACtC;IACF,CAAC;IACDU,YAAY,EAAEC,KAAK,IAAI;MACrB,IAAI,CAACA,KAAK,EAAE;MACZ,OAAO;QACLH,eAAe,EAAEG,KAAK;QACtBb,WAAW,EAAEa;MACf,CAAC;IACH;EACF;AACF,CAAC,CAAC;AAEF,MAAMC,iBAAiB,GAAGA,CAAC;EAC1BC,OAAO;EACPP,QAAQ,GAAG,KAAK;EAChBI,YAAY;EACZI,SAAS;EACT,GAAGC;AACJ,CAAC,KAAK;EACJ,MAAM,CAACN,OAAO,EAAEO,UAAU,CAAC,GAAGhC,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMiC,cAAc,GAAGA,CAAA,KAAM;IAC3BD,UAAU,CAAC,CAACP,OAAO,CAAC;IACpBI,OAAO,IAAIA,OAAO,CAAC,CAACJ,OAAO,CAAC;EAC9B,CAAC;EAED,oBACE1B,KAAA,CAAAmC,aAAA,CAAC1B,WAAW,EAAA2B,QAAA;IACVb,QAAQ,EAAEA,QAAS;IACnBG,OAAO,EAAEA,OAAQ;IACjBC,YAAY,EAAED,OAAO,IAAIC,YAAY,IAAIA,YAAa;IACtDG,OAAO,EAAEA,CAAA,KAAMI,cAAc,CAAC;EAAE,GAC5BF,IAAI,GAEPN,OAAO,iBACR1B,KAAA,CAAAmC,aAAA,CAAC/B,IAAI,EAAAgC,QAAA;IACHC,IAAI,EAAC,QAAQ;IACbT,KAAK,EAAEvB,KAAK,CAACW,MAAM,CAACC,IAAI,CAAC,GAAG,CAAE;IAC9BK,IAAI,EAAE;EAAG,GACLS,SAAS,CAChB,CACY,CAAC;AAElB,CAAC;AAED,SAASF,iBAAiB","ignoreList":[]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { SafeAreaView } from "react-native";
|
|
2
|
+
import { styled } from "../styled";
|
|
3
|
+
const StyledSafeAreaView = styled(SafeAreaView, {
|
|
4
|
+
variants: {
|
|
5
|
+
backgroundColor: color => ({
|
|
6
|
+
backgroundColor: color
|
|
7
|
+
})
|
|
8
|
+
}
|
|
9
|
+
});
|
|
10
|
+
export { StyledSafeAreaView };
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["SafeAreaView","styled","StyledSafeAreaView","variants","backgroundColor","color"],"sources":["index.jsx"],"sourcesContent":["import { SafeAreaView } from \"react-native\";\r\nimport { styled } from \"../styled\";\r\n\r\nconst StyledSafeAreaView = styled(SafeAreaView, { \r\n variants : {\r\n backgroundColor: (color) => ({\r\n backgroundColor: color\r\n }),\r\n }\r\n})\r\n\r\nexport { StyledSafeAreaView }"],"mappings":"AAAA,SAASA,YAAY,QAAQ,cAAc;AAC3C,SAASC,MAAM,QAAQ,WAAW;AAElC,MAAMC,kBAAkB,GAAGD,MAAM,CAACD,YAAY,EAAE;EAC5CG,QAAQ,EAAG;IACPC,eAAe,EAAGC,KAAK,KAAM;MACzBD,eAAe,EAAEC;IACrB,CAAC;EACL;AACJ,CAAC,CAAC;AAEF,SAASH,kBAAkB","ignoreList":[]}
|