fluent-styles 1.9.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.
|
@@ -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":[]}
|
|
@@ -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":[]}
|
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 }
|