fluent-styles 1.8.0 → 1.10.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/lib/commonjs/package/header/index.js +12 -3
- package/lib/commonjs/package/header/index.js.map +1 -1
- package/lib/commonjs/package/radioButton/index.js +10 -19
- package/lib/commonjs/package/radioButton/index.js.map +1 -1
- package/lib/module/package/header/index.js +12 -3
- package/lib/module/package/header/index.js.map +1 -1
- package/lib/module/package/radioButton/index.js +10 -19
- package/lib/module/package/radioButton/index.js.map +1 -1
- package/package.json +4 -3
- package/src/package/header/index.jsx +9 -5
- package/src/package/radioButton/index.jsx +10 -17
|
@@ -7,6 +7,7 @@ exports.StyledHeader = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
var _MaterialIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialIcons"));
|
|
10
|
+
var _reactNativeStatusBarHeight = require("react-native-status-bar-height");
|
|
10
11
|
var _theme = require("../theme");
|
|
11
12
|
var _stack = require("../stack");
|
|
12
13
|
var _styled = require("../styled");
|
|
@@ -31,21 +32,29 @@ const Headers = (0, _styled.styled)(_reactNative.View, {
|
|
|
31
32
|
return {
|
|
32
33
|
marginTop: size
|
|
33
34
|
};
|
|
35
|
+
},
|
|
36
|
+
statusHeight: (height = 0) => {
|
|
37
|
+
return {
|
|
38
|
+
paddingTop: height
|
|
39
|
+
};
|
|
34
40
|
}
|
|
35
41
|
}
|
|
36
42
|
});
|
|
37
43
|
const StyledHeader = ({
|
|
38
44
|
statusProps,
|
|
45
|
+
skipAndroid = false,
|
|
39
46
|
...rest
|
|
40
47
|
}) => {
|
|
41
48
|
return /*#__PURE__*/_react.default.createElement(_stack.YStack, null, /*#__PURE__*/_react.default.createElement(_reactNative.StatusBar, _extends({
|
|
42
49
|
translucent: true,
|
|
43
50
|
backgroundColor: _theme.theme.colors.gray[1],
|
|
44
51
|
barStyle: 'dark-content'
|
|
45
|
-
}, statusProps)), /*#__PURE__*/_react.default.createElement(Headers,
|
|
52
|
+
}, statusProps)), /*#__PURE__*/_react.default.createElement(Headers, _extends({
|
|
53
|
+
statusHeight: (0, _reactNativeStatusBarHeight.getStatusBarHeight)(skipAndroid)
|
|
54
|
+
}, rest)));
|
|
46
55
|
};
|
|
47
56
|
exports.StyledHeader = StyledHeader;
|
|
48
|
-
const
|
|
57
|
+
const Header = ({
|
|
49
58
|
navigator,
|
|
50
59
|
title,
|
|
51
60
|
icon = false,
|
|
@@ -84,6 +93,6 @@ const Full = ({
|
|
|
84
93
|
}) => {
|
|
85
94
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
|
|
86
95
|
};
|
|
87
|
-
StyledHeader.
|
|
96
|
+
StyledHeader.Header = Header;
|
|
88
97
|
StyledHeader.Full = Full;
|
|
89
98
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_MaterialIcons","_theme","_stack","_styled","_cycle","_text","_spacer","_utils","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","Headers","styled","View","base","width","flexDirection","alignItems","justifyContent","variants","marginTop","size","isValidNumber","Error","StyledHeader","statusProps","rest","createElement","YStack","StatusBar","translucent","backgroundColor","theme","colors","gray","barStyle","exports","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_MaterialIcons","_reactNativeStatusBarHeight","_theme","_stack","_styled","_cycle","_text","_spacer","_utils","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","Headers","styled","View","base","width","flexDirection","alignItems","justifyContent","variants","marginTop","size","isValidNumber","Error","statusHeight","height","paddingTop","StyledHeader","statusProps","skipAndroid","rest","createElement","YStack","StatusBar","translucent","backgroundColor","theme","colors","gray","barStyle","getStatusBarHeight","exports","Header","navigator","title","icon","cycleProps","reload","screen","XStack","flex","paddingHorizontal","paddingVertical","StyledCycle","Fragment","name","color","onPress","replace","goBack","StyledSpacer","marginHorizontal","StyledText","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 { getStatusBarHeight } from 'react-native-status-bar-height';\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 = 0) => {\r\n if (!isValidNumber(size)) {\r\n throw new Error('Invalid marginTop value')\r\n }\r\n return { marginTop: size }\r\n },\r\n statusHeight: (height = 0) => {\r\n return { paddingTop: height }\r\n }\r\n }\r\n})\r\n\r\nconst StyledHeader = ({ statusProps, skipAndroid = false, ...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 statusHeight={getStatusBarHeight(skipAndroid)} {...rest} />\r\n </YStack>\r\n )\r\n}\r\n\r\nconst Header = ({ 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.Header = Header\r\nStyledHeader.Full = Full\r\n\r\nexport { StyledHeader }\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -9,7 +9,6 @@ var _styled = require("../styled");
|
|
|
9
9
|
var _reactNative = require("react-native");
|
|
10
10
|
var _MaterialIcons = _interopRequireDefault(require("react-native-vector-icons/MaterialIcons"));
|
|
11
11
|
var _theme = require("../theme");
|
|
12
|
-
var _utils = require("../utils");
|
|
13
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
13
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
14
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -26,18 +25,12 @@ const RadioButton = (0, _styled.styled)(_reactNative.TouchableOpacity, {
|
|
|
26
25
|
flexDirection: 'column'
|
|
27
26
|
},
|
|
28
27
|
variants: {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
},
|
|
35
|
-
height: size => {
|
|
36
|
-
if (!size) return;
|
|
37
|
-
return {
|
|
38
|
-
height: size
|
|
39
|
-
};
|
|
40
|
-
},
|
|
28
|
+
height: size => ({
|
|
29
|
+
height: size || 24
|
|
30
|
+
}),
|
|
31
|
+
width: size => ({
|
|
32
|
+
width: size || 24
|
|
33
|
+
}),
|
|
41
34
|
disabled: {
|
|
42
35
|
true: {
|
|
43
36
|
backgroundColor: _theme.theme.colors.gray[500]
|
|
@@ -58,22 +51,20 @@ const RadioButton = (0, _styled.styled)(_reactNative.TouchableOpacity, {
|
|
|
58
51
|
}
|
|
59
52
|
});
|
|
60
53
|
const StyledRadioButton = ({
|
|
54
|
+
name = "",
|
|
61
55
|
onPress,
|
|
62
56
|
disabled = false,
|
|
57
|
+
selected,
|
|
63
58
|
checkedColor,
|
|
64
59
|
iconProps,
|
|
65
60
|
...rest
|
|
66
61
|
}) => {
|
|
67
|
-
const
|
|
68
|
-
const toggleCheckbox = () => {
|
|
69
|
-
setChecked(!checked);
|
|
70
|
-
onPress && onPress(!checked);
|
|
71
|
-
};
|
|
62
|
+
const checked = selected === name;
|
|
72
63
|
return /*#__PURE__*/_react.default.createElement(RadioButton, _extends({
|
|
73
64
|
disabled: disabled,
|
|
74
65
|
checked: checked,
|
|
75
66
|
checkedColor: checked && checkedColor && checkedColor,
|
|
76
|
-
onPress: () =>
|
|
67
|
+
onPress: () => onPress && onPress(name)
|
|
77
68
|
}, rest), checked && /*#__PURE__*/_react.default.createElement(_MaterialIcons.default, _extends({
|
|
78
69
|
name: "circle",
|
|
79
70
|
color: _theme.theme.colors.gray[700],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_styled","_reactNative","_MaterialIcons","_interopRequireDefault","_theme","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_styled","_reactNative","_MaterialIcons","_interopRequireDefault","_theme","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","RadioButton","styled","TouchableOpacity","base","width","height","borderWidth","borderRadius","borderColor","theme","colors","gray","justifyContent","alignItems","flexDirection","variants","size","disabled","true","backgroundColor","checked","checkedColor","color","StyledRadioButton","name","onPress","selected","iconProps","rest","createElement","exports"],"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\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 height: size => ({\r\n height: size || 24\r\n }),\r\n width: size => ({\r\n width: size || 24\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\tname= \"\",\r\n\tonPress,\r\n\tdisabled = false,\r\n\tselected,\r\n\tcheckedColor,\r\n\ticonProps,\r\n\t...rest\r\n}) => {\r\n const checked = selected === name \r\n return (\r\n <RadioButton\r\n disabled={disabled}\r\n checked={checked}\r\n checkedColor={checked && checkedColor && checkedColor}\r\n onPress={() => onPress && onPress(name)}\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":"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","ignoreList":[]}
|
|
@@ -3,6 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { View } from 'react-native';
|
|
4
4
|
import { StatusBar } from 'react-native';
|
|
5
5
|
import Icon from 'react-native-vector-icons/MaterialIcons';
|
|
6
|
+
import { getStatusBarHeight } from 'react-native-status-bar-height';
|
|
6
7
|
import { theme } from '../theme';
|
|
7
8
|
import { YStack, XStack } from '../stack';
|
|
8
9
|
import { styled } from '../styled';
|
|
@@ -25,20 +26,28 @@ const Headers = styled(View, {
|
|
|
25
26
|
return {
|
|
26
27
|
marginTop: size
|
|
27
28
|
};
|
|
29
|
+
},
|
|
30
|
+
statusHeight: (height = 0) => {
|
|
31
|
+
return {
|
|
32
|
+
paddingTop: height
|
|
33
|
+
};
|
|
28
34
|
}
|
|
29
35
|
}
|
|
30
36
|
});
|
|
31
37
|
const StyledHeader = ({
|
|
32
38
|
statusProps,
|
|
39
|
+
skipAndroid = false,
|
|
33
40
|
...rest
|
|
34
41
|
}) => {
|
|
35
42
|
return /*#__PURE__*/React.createElement(YStack, null, /*#__PURE__*/React.createElement(StatusBar, _extends({
|
|
36
43
|
translucent: true,
|
|
37
44
|
backgroundColor: theme.colors.gray[1],
|
|
38
45
|
barStyle: 'dark-content'
|
|
39
|
-
}, statusProps)), /*#__PURE__*/React.createElement(Headers,
|
|
46
|
+
}, statusProps)), /*#__PURE__*/React.createElement(Headers, _extends({
|
|
47
|
+
statusHeight: getStatusBarHeight(skipAndroid)
|
|
48
|
+
}, rest)));
|
|
40
49
|
};
|
|
41
|
-
const
|
|
50
|
+
const Header = ({
|
|
42
51
|
navigator,
|
|
43
52
|
title,
|
|
44
53
|
icon = false,
|
|
@@ -77,7 +86,7 @@ const Full = ({
|
|
|
77
86
|
}) => {
|
|
78
87
|
return /*#__PURE__*/React.createElement(React.Fragment, null, children);
|
|
79
88
|
};
|
|
80
|
-
StyledHeader.
|
|
89
|
+
StyledHeader.Header = Header;
|
|
81
90
|
StyledHeader.Full = Full;
|
|
82
91
|
export { StyledHeader };
|
|
83
92
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +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","
|
|
1
|
+
{"version":3,"names":["React","View","StatusBar","Icon","getStatusBarHeight","theme","YStack","XStack","styled","StyledCycle","StyledText","StyledSpacer","isValidNumber","Headers","base","width","flexDirection","alignItems","justifyContent","variants","marginTop","size","Error","statusHeight","height","paddingTop","StyledHeader","statusProps","skipAndroid","rest","createElement","_extends","translucent","backgroundColor","colors","gray","barStyle","Header","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 { getStatusBarHeight } from 'react-native-status-bar-height';\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 = 0) => {\r\n if (!isValidNumber(size)) {\r\n throw new Error('Invalid marginTop value')\r\n }\r\n return { marginTop: size }\r\n },\r\n statusHeight: (height = 0) => {\r\n return { paddingTop: height }\r\n }\r\n }\r\n})\r\n\r\nconst StyledHeader = ({ statusProps, skipAndroid = false, ...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 statusHeight={getStatusBarHeight(skipAndroid)} {...rest} />\r\n </YStack>\r\n )\r\n}\r\n\r\nconst Header = ({ 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.Header = Header\r\nStyledHeader.Full = Full\r\n\r\nexport { StyledHeader }\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,7 +4,6 @@ import { styled } from '../styled';
|
|
|
4
4
|
import { TouchableOpacity } from 'react-native';
|
|
5
5
|
import Icon from 'react-native-vector-icons/MaterialIcons';
|
|
6
6
|
import { theme } from '../theme';
|
|
7
|
-
import { isValidColor, isValidNumber, isValidString } from '../utils';
|
|
8
7
|
const RadioButton = styled(TouchableOpacity, {
|
|
9
8
|
base: {
|
|
10
9
|
width: 24,
|
|
@@ -17,18 +16,12 @@ const RadioButton = styled(TouchableOpacity, {
|
|
|
17
16
|
flexDirection: 'column'
|
|
18
17
|
},
|
|
19
18
|
variants: {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
},
|
|
26
|
-
height: size => {
|
|
27
|
-
if (!size) return;
|
|
28
|
-
return {
|
|
29
|
-
height: size
|
|
30
|
-
};
|
|
31
|
-
},
|
|
19
|
+
height: size => ({
|
|
20
|
+
height: size || 24
|
|
21
|
+
}),
|
|
22
|
+
width: size => ({
|
|
23
|
+
width: size || 24
|
|
24
|
+
}),
|
|
32
25
|
disabled: {
|
|
33
26
|
true: {
|
|
34
27
|
backgroundColor: theme.colors.gray[500]
|
|
@@ -49,22 +42,20 @@ const RadioButton = styled(TouchableOpacity, {
|
|
|
49
42
|
}
|
|
50
43
|
});
|
|
51
44
|
const StyledRadioButton = ({
|
|
45
|
+
name = "",
|
|
52
46
|
onPress,
|
|
53
47
|
disabled = false,
|
|
48
|
+
selected,
|
|
54
49
|
checkedColor,
|
|
55
50
|
iconProps,
|
|
56
51
|
...rest
|
|
57
52
|
}) => {
|
|
58
|
-
const
|
|
59
|
-
const toggleCheckbox = () => {
|
|
60
|
-
setChecked(!checked);
|
|
61
|
-
onPress && onPress(!checked);
|
|
62
|
-
};
|
|
53
|
+
const checked = selected === name;
|
|
63
54
|
return /*#__PURE__*/React.createElement(RadioButton, _extends({
|
|
64
55
|
disabled: disabled,
|
|
65
56
|
checked: checked,
|
|
66
57
|
checkedColor: checked && checkedColor && checkedColor,
|
|
67
|
-
onPress: () =>
|
|
58
|
+
onPress: () => onPress && onPress(name)
|
|
68
59
|
}, rest), checked && /*#__PURE__*/React.createElement(Icon, _extends({
|
|
69
60
|
name: "circle",
|
|
70
61
|
color: theme.colors.gray[700],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","styled","TouchableOpacity","Icon","theme","
|
|
1
|
+
{"version":3,"names":["React","useState","styled","TouchableOpacity","Icon","theme","RadioButton","base","width","height","borderWidth","borderRadius","borderColor","colors","gray","justifyContent","alignItems","flexDirection","variants","size","disabled","true","backgroundColor","checked","checkedColor","color","StyledRadioButton","name","onPress","selected","iconProps","rest","createElement","_extends"],"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\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 height: size => ({\r\n height: size || 24\r\n }),\r\n width: size => ({\r\n width: size || 24\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\tname= \"\",\r\n\tonPress,\r\n\tdisabled = false,\r\n\tselected,\r\n\tcheckedColor,\r\n\ticonProps,\r\n\t...rest\r\n}) => {\r\n const checked = selected === name \r\n return (\r\n <RadioButton\r\n disabled={disabled}\r\n checked={checked}\r\n checkedColor={checked && checkedColor && checkedColor}\r\n onPress={() => onPress && onPress(name)}\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;AAEhC,MAAMC,WAAW,GAAGJ,MAAM,CAACC,gBAAgB,EAAE;EAC3CI,IAAI,EAAE;IACJC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,GAAG;IACjBC,WAAW,EAAEP,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG,CAAC;IACnCC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,aAAa,EAAE;EACjB,CAAC;EACDC,QAAQ,EAAE;IACRT,MAAM,EAAEU,IAAI,KAAK;MACfV,MAAM,EAAEU,IAAI,IAAI;IAClB,CAAC,CAAC;IACFX,KAAK,EAAEW,IAAI,KAAK;MACdX,KAAK,EAAEW,IAAI,IAAI;IACjB,CAAC,CAAC;IACFC,QAAQ,EAAE;MACRC,IAAI,EAAE;QACJC,eAAe,EAAEjB,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG;MACxC;IACF,CAAC;IACDS,OAAO,EAAE;MACPF,IAAI,EAAE;QACJC,eAAe,EAAEjB,KAAK,CAACQ,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,IAAI,GAAE,EAAE;EACRC,OAAO;EACPR,QAAQ,GAAG,KAAK;EAChBS,QAAQ;EACRL,YAAY;EACZM,SAAS;EACT,GAAGC;AACJ,CAAC,KAAK;EACJ,MAAMR,OAAO,GAAGM,QAAQ,KAAKF,IAAI;EACjC,oBACE3B,KAAA,CAAAgC,aAAA,CAAC1B,WAAW,EAAA2B,QAAA;IACVb,QAAQ,EAAEA,QAAS;IACnBG,OAAO,EAAEA,OAAQ;IACjBC,YAAY,EAAED,OAAO,IAAIC,YAAY,IAAIA,YAAa;IACtDI,OAAO,EAAEA,CAAA,KAAMA,OAAO,IAAIA,OAAO,CAACD,IAAI;EAAE,GACpCI,IAAI,GAEPR,OAAO,iBACRvB,KAAA,CAAAgC,aAAA,CAAC5B,IAAI,EAAA6B,QAAA;IACHN,IAAI,EAAC,QAAQ;IACbF,KAAK,EAAEpB,KAAK,CAACQ,MAAM,CAACC,IAAI,CAAC,GAAG,CAAE;IAC9BK,IAAI,EAAE;EAAG,GACLW,SAAS,CAChB,CACY,CAAC;AAElB,CAAC;AAED,SAASJ,iBAAiB","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fluent-styles",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.0",
|
|
4
4
|
"description": "Develop different styled versions of UI components.",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"module": "lib/module/index.js",
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"homepage": "https://github.com/suftnetrepo/fluent-styles#readme",
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"react-native-dropdown-picker": "^5.4.6",
|
|
29
|
+
"react-native-status-bar-height": "^2.6.0",
|
|
29
30
|
"react-native-vector-icons": "^9.2.0"
|
|
30
31
|
},
|
|
31
32
|
"files": [
|
|
@@ -38,7 +39,7 @@
|
|
|
38
39
|
"build": "bob build",
|
|
39
40
|
"prepack": "bob build",
|
|
40
41
|
"release": "release-it",
|
|
41
|
-
"publish": "
|
|
42
|
+
"publish": "npm publish --access public",
|
|
42
43
|
"lint": "eslint \"**/*.{js,ts,tsx}\""
|
|
43
44
|
},
|
|
44
45
|
"peerDependencies": {
|
|
@@ -77,7 +78,7 @@
|
|
|
77
78
|
},
|
|
78
79
|
"github": {
|
|
79
80
|
"release": true
|
|
80
|
-
}
|
|
81
|
+
}
|
|
81
82
|
},
|
|
82
83
|
"eslintIgnore": [
|
|
83
84
|
"node_modules/",
|
|
@@ -2,6 +2,7 @@ import React from 'react'
|
|
|
2
2
|
import { View } from 'react-native'
|
|
3
3
|
import { StatusBar } from 'react-native'
|
|
4
4
|
import Icon from 'react-native-vector-icons/MaterialIcons'
|
|
5
|
+
import { getStatusBarHeight } from 'react-native-status-bar-height';
|
|
5
6
|
import { theme } from '../theme'
|
|
6
7
|
import { YStack, XStack } from '../stack'
|
|
7
8
|
import { styled } from '../styled'
|
|
@@ -18,16 +19,19 @@ const Headers = styled(View, {
|
|
|
18
19
|
justifyContent: 'flex-start'
|
|
19
20
|
},
|
|
20
21
|
variants: {
|
|
21
|
-
marginTop: (size=0) => {
|
|
22
|
+
marginTop: (size = 0) => {
|
|
22
23
|
if (!isValidNumber(size)) {
|
|
23
24
|
throw new Error('Invalid marginTop value')
|
|
24
25
|
}
|
|
25
26
|
return { marginTop: size }
|
|
27
|
+
},
|
|
28
|
+
statusHeight: (height = 0) => {
|
|
29
|
+
return { paddingTop: height }
|
|
26
30
|
}
|
|
27
31
|
}
|
|
28
32
|
})
|
|
29
33
|
|
|
30
|
-
const StyledHeader = ({ statusProps, ...rest }) => {
|
|
34
|
+
const StyledHeader = ({ statusProps, skipAndroid = false, ...rest }) => {
|
|
31
35
|
return (
|
|
32
36
|
<YStack>
|
|
33
37
|
<StatusBar
|
|
@@ -36,12 +40,12 @@ const StyledHeader = ({ statusProps, ...rest }) => {
|
|
|
36
40
|
barStyle={'dark-content'}
|
|
37
41
|
{...statusProps}
|
|
38
42
|
/>
|
|
39
|
-
<Headers {...rest} />
|
|
43
|
+
<Headers statusHeight={getStatusBarHeight(skipAndroid)} {...rest} />
|
|
40
44
|
</YStack>
|
|
41
45
|
)
|
|
42
46
|
}
|
|
43
47
|
|
|
44
|
-
const
|
|
48
|
+
const Header = ({ navigator, title, icon = false, cycleProps, reload = false, screen, ...rest }) => {
|
|
45
49
|
|
|
46
50
|
return (
|
|
47
51
|
<XStack justifyContent='flex-start' alignItems='center' flex={1} paddingHorizontal={8}
|
|
@@ -85,7 +89,7 @@ const Full = ({ children }) => {
|
|
|
85
89
|
)
|
|
86
90
|
}
|
|
87
91
|
|
|
88
|
-
StyledHeader.
|
|
92
|
+
StyledHeader.Header = Header
|
|
89
93
|
StyledHeader.Full = Full
|
|
90
94
|
|
|
91
95
|
export { StyledHeader }
|
|
@@ -3,7 +3,6 @@ import { styled } from '../styled'
|
|
|
3
3
|
import { TouchableOpacity } from 'react-native'
|
|
4
4
|
import Icon from 'react-native-vector-icons/MaterialIcons'
|
|
5
5
|
import { theme } from '../theme'
|
|
6
|
-
import { isValidColor, isValidNumber, isValidString } from '../utils'
|
|
7
6
|
|
|
8
7
|
const RadioButton = styled(TouchableOpacity, {
|
|
9
8
|
base: {
|
|
@@ -17,14 +16,12 @@ const RadioButton = styled(TouchableOpacity, {
|
|
|
17
16
|
flexDirection: 'column'
|
|
18
17
|
},
|
|
19
18
|
variants: {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
return { height: size }
|
|
27
|
-
},
|
|
19
|
+
height: size => ({
|
|
20
|
+
height: size || 24
|
|
21
|
+
}),
|
|
22
|
+
width: size => ({
|
|
23
|
+
width: size || 24
|
|
24
|
+
}),
|
|
28
25
|
disabled: {
|
|
29
26
|
true: {
|
|
30
27
|
backgroundColor: theme.colors.gray[500]
|
|
@@ -46,25 +43,21 @@ const RadioButton = styled(TouchableOpacity, {
|
|
|
46
43
|
})
|
|
47
44
|
|
|
48
45
|
const StyledRadioButton = ({
|
|
46
|
+
name= "",
|
|
49
47
|
onPress,
|
|
50
48
|
disabled = false,
|
|
49
|
+
selected,
|
|
51
50
|
checkedColor,
|
|
52
51
|
iconProps,
|
|
53
52
|
...rest
|
|
54
53
|
}) => {
|
|
55
|
-
const
|
|
56
|
-
|
|
57
|
-
const toggleCheckbox = () => {
|
|
58
|
-
setChecked(!checked)
|
|
59
|
-
onPress && onPress(!checked)
|
|
60
|
-
}
|
|
61
|
-
|
|
54
|
+
const checked = selected === name
|
|
62
55
|
return (
|
|
63
56
|
<RadioButton
|
|
64
57
|
disabled={disabled}
|
|
65
58
|
checked={checked}
|
|
66
59
|
checkedColor={checked && checkedColor && checkedColor}
|
|
67
|
-
onPress={() =>
|
|
60
|
+
onPress={() => onPress && onPress(name)}
|
|
68
61
|
{...rest}
|
|
69
62
|
>
|
|
70
63
|
{checked &&
|