fluent-styles 1.48.0 → 1.52.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/card/index.js +4 -4
- package/lib/commonjs/package/card/index.js.map +1 -1
- package/lib/commonjs/package/cycle/index.js +17 -2
- package/lib/commonjs/package/cycle/index.js.map +1 -1
- package/lib/commonjs/package/header/index.js +2 -1
- package/lib/commonjs/package/header/index.js.map +1 -1
- package/lib/module/package/card/index.js +4 -4
- package/lib/module/package/card/index.js.map +1 -1
- package/lib/module/package/cycle/index.js +20 -5
- package/lib/module/package/cycle/index.js.map +1 -1
- package/lib/module/package/header/index.js +2 -1
- package/lib/module/package/header/index.js.map +1 -1
- package/package.json +1 -1
- package/src/package/card/index.jsx +4 -4
- package/src/package/cycle/index.jsx +37 -11
- package/src/package/header/index.jsx +2 -2
|
@@ -33,14 +33,14 @@ const Card = (0, _styled.styled)(_reactNative.View, {
|
|
|
33
33
|
});
|
|
34
34
|
const StyledCard = ({
|
|
35
35
|
pressable = false,
|
|
36
|
-
pressableProps,
|
|
36
|
+
pressableProps = {},
|
|
37
37
|
children,
|
|
38
|
-
...
|
|
38
|
+
...cardProps
|
|
39
39
|
}) => {
|
|
40
40
|
if (pressable) {
|
|
41
|
-
return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, pressableProps, /*#__PURE__*/_react.default.createElement(Card,
|
|
41
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, pressableProps, /*#__PURE__*/_react.default.createElement(Card, cardProps, children));
|
|
42
42
|
}
|
|
43
|
-
return /*#__PURE__*/_react.default.createElement(Card,
|
|
43
|
+
return /*#__PURE__*/_react.default.createElement(Card, cardProps, children);
|
|
44
44
|
};
|
|
45
45
|
exports.StyledCard = StyledCard;
|
|
46
46
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_styled","_utils","e","__esModule","default","Card","styled","View","base","flexDirection","variants","shadow","HWidth","width","windowWidth","StyledCard","pressable","pressableProps","children","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_styled","_utils","e","__esModule","default","Card","styled","View","base","flexDirection","variants","shadow","HWidth","width","windowWidth","StyledCard","pressable","pressableProps","children","cardProps","createElement","Pressable","exports"],"sources":["index.jsx"],"sourcesContent":["import React from 'react'\r\nimport { View, Pressable } from 'react-native'\r\nimport { styled } from '../styled'\r\nimport { shadow, windowWidth } from '../utils'\r\n\r\nconst Card = styled(View, {\r\n base: {\r\n flexDirection: 'column'\r\n },\r\n variants: {\r\n shadow: shadow,\r\n HWidth: {\r\n '32x4': {\r\n width: windowWidth - 32 - 4\r\n },\r\n '32x8': {\r\n width: windowWidth - 32 - 8\r\n },\r\n '16x4': {\r\n width: windowWidth - 16 - 4\r\n },\r\n '16x8': {\r\n width: windowWidth - 16 - 8\r\n }\r\n },\r\n }\r\n})\r\n\r\nconst StyledCard = ({\r\n\tpressable = false,\r\n pressableProps = {},\r\n\tchildren,\r\n ...cardProps\r\n}) => {\r\n if (pressable) {\r\n return (\r\n <Pressable {...pressableProps}>\r\n <Card {...cardProps}>\r\n {children}\r\n </Card>\r\n </Pressable>\r\n )\r\n }\r\n\r\n return (\r\n <Card {...cardProps}>\r\n {children}\r\n </Card>\r\n )\r\n}\r\n\r\nexport { StyledCard }\r\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAA8C,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE9C,MAAMG,IAAI,GAAG,IAAAC,cAAM,EAACC,iBAAI,EAAE;EACxBC,IAAI,EAAE;IACJC,aAAa,EAAE;EACjB,CAAC;EACDC,QAAQ,EAAE;IACRC,MAAM,EAAEA,aAAM;IACdC,MAAM,EAAE;MACN,MAAM,EAAE;QACNC,KAAK,EAAEC,kBAAW,GAAG,EAAE,GAAG;MAC5B,CAAC;MACD,MAAM,EAAE;QACND,KAAK,EAAEC,kBAAW,GAAG,EAAE,GAAG;MAC5B,CAAC;MACD,MAAM,EAAE;QACND,KAAK,EAAEC,kBAAW,GAAG,EAAE,GAAG;MAC5B,CAAC;MACD,MAAM,EAAE;QACND,KAAK,EAAEC,kBAAW,GAAG,EAAE,GAAG;MAC5B;IACF;EACF;AACF,CAAC,CAAC;AAEF,MAAMC,UAAU,GAAGA,CAAC;EACnBC,SAAS,GAAG,KAAK;EAChBC,cAAc,GAAG,CAAC,CAAC;EACpBC,QAAQ;EACP,GAAGC;AACL,CAAC,KAAK;EACJ,IAAIH,SAAS,EAAE;IACb,oBACEpB,MAAA,CAAAQ,OAAA,CAAAgB,aAAA,CAACrB,YAAA,CAAAsB,SAAS,EAAKJ,cAAc,eAC3BrB,MAAA,CAAAQ,OAAA,CAAAgB,aAAA,CAACf,IAAI,EAAKc,SAAS,EAChBD,QACG,CACG,CAAC;EAEhB;EAEA,oBACEtB,MAAA,CAAAQ,OAAA,CAAAgB,aAAA,CAACf,IAAI,EAAKc,SAAS,EAChBD,QACG,CAAC;AAEX,CAAC;AAAAI,OAAA,CAAAP,UAAA,GAAAA,UAAA","ignoreList":[]}
|
|
@@ -5,14 +5,29 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.StyledCycle = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactNative = require("react-native");
|
|
8
9
|
var _stack = require("../stack");
|
|
9
10
|
var _theme = require("../theme");
|
|
10
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
12
|
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); }
|
|
12
13
|
const StyledCycle = ({
|
|
13
14
|
children,
|
|
14
|
-
|
|
15
|
+
pressable = false,
|
|
16
|
+
pressableProps = {},
|
|
17
|
+
...cycleProps
|
|
15
18
|
}) => {
|
|
19
|
+
if (pressable) {
|
|
20
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, pressableProps, /*#__PURE__*/_react.default.createElement(_stack.YStack, _extends({
|
|
21
|
+
height: 48,
|
|
22
|
+
width: 48,
|
|
23
|
+
borderRadius: 50,
|
|
24
|
+
borderWidth: 1,
|
|
25
|
+
borderColor: _theme.theme.colors.gray[1],
|
|
26
|
+
backgroundColor: _theme.theme.colors.gray[1],
|
|
27
|
+
justifyContent: "center",
|
|
28
|
+
alignItems: "center"
|
|
29
|
+
}, cycleProps), children));
|
|
30
|
+
}
|
|
16
31
|
return /*#__PURE__*/_react.default.createElement(_stack.YStack, _extends({
|
|
17
32
|
height: 48,
|
|
18
33
|
width: 48,
|
|
@@ -22,7 +37,7 @@ const StyledCycle = ({
|
|
|
22
37
|
backgroundColor: _theme.theme.colors.gray[1],
|
|
23
38
|
justifyContent: "center",
|
|
24
39
|
alignItems: "center"
|
|
25
|
-
},
|
|
40
|
+
}, cycleProps), children);
|
|
26
41
|
};
|
|
27
42
|
exports.StyledCycle = StyledCycle;
|
|
28
43
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_stack","_theme","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","StyledCycle","children","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_stack","_theme","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","StyledCycle","children","pressable","pressableProps","cycleProps","createElement","Pressable","YStack","height","width","borderRadius","borderWidth","borderColor","theme","colors","gray","backgroundColor","justifyContent","alignItems","exports"],"sources":["index.jsx"],"sourcesContent":["import React from \"react\";\r\nimport { Pressable } from \"react-native\";\r\nimport { YStack } from \"../stack\";\r\nimport { theme } from \"../theme\";\r\n\r\nconst StyledCycle = ({\r\n\tchildren,\r\n\tpressable = false,\r\n\tpressableProps = {},\r\n\t...cycleProps\r\n}) => {\r\n\tif (pressable) {\r\n\t\treturn (\r\n\t\t\t<Pressable {...pressableProps}>\r\n\t\t\t\t<YStack\r\n\t\t\t\t\theight={48}\r\n\t\t\t\t\twidth={48}\r\n\t\t\t\t\tborderRadius={50}\r\n\t\t\t\t\tborderWidth={1}\r\n\t\t\t\t\tborderColor={theme.colors.gray[1]}\r\n\t\t\t\t\tbackgroundColor={theme.colors.gray[1]}\r\n\t\t\t\t\tjustifyContent=\"center\"\r\n\t\t\t\t\talignItems=\"center\"\r\n {...cycleProps}\r\n\t\t\t\t>\r\n\t\t\t\t\t{children}\r\n\t\t\t\t</YStack>\r\n\t\t\t</Pressable>\r\n\t\t);\r\n\t}\r\n\r\n return (\r\n <YStack\r\n height={48}\r\n width={48}\r\n borderRadius={50}\r\n borderWidth={1}\r\n borderColor={theme.colors.gray[1]}\r\n backgroundColor={theme.colors.gray[1]}\r\n justifyContent=\"center\"\r\n alignItems=\"center\"\r\n {...cycleProps}\r\n >\r\n {children}\r\n </YStack>\r\n );\r\n};\r\n\r\nexport { StyledCycle };\r\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAAiC,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,SAAA,WAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,CAAA,aAAAP,CAAA,MAAAA,CAAA,GAAAQ,SAAA,CAAAC,MAAA,EAAAT,CAAA,UAAAU,CAAA,GAAAF,SAAA,CAAAR,CAAA,YAAAW,CAAA,IAAAD,CAAA,OAAAE,cAAA,CAAAC,IAAA,CAAAH,CAAA,EAAAC,CAAA,MAAAJ,CAAA,CAAAI,CAAA,IAAAD,CAAA,CAAAC,CAAA,aAAAJ,CAAA,KAAAJ,QAAA,CAAAW,KAAA,OAAAN,SAAA;AAEjC,MAAMO,WAAW,GAAGA,CAAC;EACpBC,QAAQ;EACRC,SAAS,GAAG,KAAK;EACjBC,cAAc,GAAG,CAAC,CAAC;EACnB,GAAGC;AACJ,CAAC,KAAK;EACL,IAAIF,SAAS,EAAE;IACd,oBACCvB,MAAA,CAAAQ,OAAA,CAAAkB,aAAA,CAACvB,YAAA,CAAAwB,SAAS,EAAKH,cAAc,eAC5BxB,MAAA,CAAAQ,OAAA,CAAAkB,aAAA,CAACtB,MAAA,CAAAwB,MAAM,EAAAnB,QAAA;MACNoB,MAAM,EAAE,EAAG;MACXC,KAAK,EAAE,EAAG;MACVC,YAAY,EAAE,EAAG;MACjBC,WAAW,EAAE,CAAE;MACfC,WAAW,EAAEC,YAAK,CAACC,MAAM,CAACC,IAAI,CAAC,CAAC,CAAE;MAClCC,eAAe,EAAEH,YAAK,CAACC,MAAM,CAACC,IAAI,CAAC,CAAC,CAAE;MACtCE,cAAc,EAAC,QAAQ;MACvBC,UAAU,EAAC;IAAQ,GACVd,UAAU,GAElBH,QACM,CACE,CAAC;EAEd;EAEC,oBACEtB,MAAA,CAAAQ,OAAA,CAAAkB,aAAA,CAACtB,MAAA,CAAAwB,MAAM,EAAAnB,QAAA;IACLoB,MAAM,EAAE,EAAG;IACXC,KAAK,EAAE,EAAG;IACVC,YAAY,EAAE,EAAG;IACjBC,WAAW,EAAE,CAAE;IACfC,WAAW,EAAEC,YAAK,CAACC,MAAM,CAACC,IAAI,CAAC,CAAC,CAAE;IAClCC,eAAe,EAAEH,YAAK,CAACC,MAAM,CAACC,IAAI,CAAC,CAAC,CAAE;IACtCE,cAAc,EAAC,QAAQ;IACvBC,UAAU,EAAC;EAAQ,GACfd,UAAU,GAEbH,QACK,CAAC;AAEb,CAAC;AAACkB,OAAA,CAAAnB,WAAA,GAAAA,WAAA","ignoreList":[]}
|
|
@@ -43,6 +43,7 @@ const Headers = (0, _styled.styled)(_reactNative.View, {
|
|
|
43
43
|
const StyledHeader = ({
|
|
44
44
|
statusProps,
|
|
45
45
|
skipAndroid = false,
|
|
46
|
+
skipIos = true,
|
|
46
47
|
...rest
|
|
47
48
|
}) => {
|
|
48
49
|
return /*#__PURE__*/_react.default.createElement(_stack.YStack, null, /*#__PURE__*/_react.default.createElement(_reactNative.StatusBar, _extends({
|
|
@@ -50,7 +51,7 @@ const StyledHeader = ({
|
|
|
50
51
|
backgroundColor: _theme.theme.colors.gray[1],
|
|
51
52
|
barStyle: 'dark-content'
|
|
52
53
|
}, statusProps)), /*#__PURE__*/_react.default.createElement(Headers, _extends({
|
|
53
|
-
statusHeight: (0, _statusBar.getStatusBarHeight)(skipAndroid)
|
|
54
|
+
statusHeight: (0, _statusBar.getStatusBarHeight)(skipAndroid, skipIos)
|
|
54
55
|
}, rest)));
|
|
55
56
|
};
|
|
56
57
|
exports.StyledHeader = StyledHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_MaterialIcons","_theme","_stack","_styled","_cycle","_text","_spacer","_utils","_statusBar","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","fontWeight","normal","fontSize","iconProps","color","textProps","title","icon","cycleProps","rightIcon","rightIconProps","onPress","XStack","flex","paddingHorizontal","paddingVertical","StyledCycle","Fragment","name","StyledSpacer","marginHorizontal","StyledText","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\nimport { getStatusBarHeight } from '../utils/statusBar'\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={true}\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, fontWeight = theme.fontWeight.normal, fontSize = theme.fontSize.normal, iconProps, color = theme.colors.gray[800], textProps, title, icon = false, cycleProps, rightIcon, rightIconProps, onPress, ...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={() => onPress && onPress()}\r\n {...iconProps}\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={color}\r\n fontWeight={fontWeight}\r\n fontSize={fontSize}\r\n >\r\n {title}\r\n </StyledText>}\r\n {\r\n rightIcon && (\r\n <>{rightIcon}</>\r\n )\r\n }\r\n\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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,cAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAR,OAAA;AACA,IAAAS,MAAA,GAAAT,OAAA;AACA,IAAAU,UAAA,GAAAV,OAAA;AAAuD,SAAAD,uBAAAY,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,SAAA,WAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,CAAA,aAAAP,CAAA,MAAAA,CAAA,GAAAQ,SAAA,CAAAC,MAAA,EAAAT,CAAA,UAAAU,CAAA,GAAAF,SAAA,CAAAR,CAAA,YAAAW,CAAA,IAAAD,CAAA,OAAAE,cAAA,CAAAC,IAAA,CAAAH,CAAA,EAAAC,CAAA,MAAAJ,CAAA,CAAAI,CAAA,IAAAD,CAAA,CAAAC,CAAA,aAAAJ,CAAA,KAAAJ,QAAA,CAAAW,KAAA,OAAAN,SAAA;AAEvD,MAAMO,OAAO,GAAG,IAAAC,cAAM,EAACC,iBAAI,EAAE;EAC3BC,IAAI,EAAE;IACJC,KAAK,EAAE,MAAM;IACbC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDC,QAAQ,EAAE;IACRC,SAAS,EAAEA,CAACC,IAAI,GAAG,CAAC,KAAK;MACvB,IAAI,CAAC,IAAAC,oBAAa,EAACD,IAAI,CAAC,EAAE;QACxB,MAAM,IAAIE,KAAK,CAAC,yBAAyB,CAAC;MAC5C;MACA,OAAO;QAAEH,SAAS,EAAEC;MAAK,CAAC;IAC5B,CAAC;IACDG,YAAY,EAAEA,CAACC,MAAM,GAAG,CAAC,KAAK;MAC5B,OAAO;QAAEC,UAAU,EAAED;MAAO,CAAC;IAC/B;EACF;AACF,CAAC,CAAC;AAEF,MAAME,YAAY,GAAGA,CAAC;EAAEC,WAAW;EAAEC,WAAW,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAC,KAAK;
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_MaterialIcons","_theme","_stack","_styled","_cycle","_text","_spacer","_utils","_statusBar","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","skipIos","rest","createElement","YStack","StatusBar","translucent","backgroundColor","theme","colors","gray","barStyle","getStatusBarHeight","exports","Header","navigator","fontWeight","normal","fontSize","iconProps","color","textProps","title","icon","cycleProps","rightIcon","rightIconProps","onPress","XStack","flex","paddingHorizontal","paddingVertical","StyledCycle","Fragment","name","StyledSpacer","marginHorizontal","StyledText","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\nimport { getStatusBarHeight } from '../utils/statusBar'\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, skipIos = true, ...rest }) => {\r\n return (\r\n <YStack>\r\n <StatusBar\r\n translucent={true}\r\n backgroundColor={theme.colors.gray[1]}\r\n barStyle={'dark-content'}\r\n {...statusProps}\r\n />\r\n <Headers statusHeight={getStatusBarHeight(skipAndroid, skipIos)} {...rest} />\r\n </YStack>\r\n )\r\n}\r\n\r\nconst Header = ({ navigator, fontWeight = theme.fontWeight.normal, fontSize = theme.fontSize.normal, iconProps, color = theme.colors.gray[800], textProps, title, icon = false, cycleProps, rightIcon, rightIconProps, onPress, ...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={() => onPress && onPress()}\r\n {...iconProps}\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={color}\r\n fontWeight={fontWeight}\r\n fontSize={fontSize}\r\n >\r\n {title}\r\n </StyledText>}\r\n {\r\n rightIcon && (\r\n <>{rightIcon}</>\r\n )\r\n }\r\n\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":[]}
|
|
@@ -26,14 +26,14 @@ const Card = styled(View, {
|
|
|
26
26
|
});
|
|
27
27
|
const StyledCard = ({
|
|
28
28
|
pressable = false,
|
|
29
|
-
pressableProps,
|
|
29
|
+
pressableProps = {},
|
|
30
30
|
children,
|
|
31
|
-
...
|
|
31
|
+
...cardProps
|
|
32
32
|
}) => {
|
|
33
33
|
if (pressable) {
|
|
34
|
-
return /*#__PURE__*/React.createElement(Pressable, pressableProps, /*#__PURE__*/React.createElement(Card,
|
|
34
|
+
return /*#__PURE__*/React.createElement(Pressable, pressableProps, /*#__PURE__*/React.createElement(Card, cardProps, children));
|
|
35
35
|
}
|
|
36
|
-
return /*#__PURE__*/React.createElement(Card,
|
|
36
|
+
return /*#__PURE__*/React.createElement(Card, cardProps, children);
|
|
37
37
|
};
|
|
38
38
|
export { StyledCard };
|
|
39
39
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","Pressable","styled","shadow","windowWidth","Card","base","flexDirection","variants","HWidth","width","StyledCard","pressable","pressableProps","children","
|
|
1
|
+
{"version":3,"names":["React","View","Pressable","styled","shadow","windowWidth","Card","base","flexDirection","variants","HWidth","width","StyledCard","pressable","pressableProps","children","cardProps","createElement"],"sources":["index.jsx"],"sourcesContent":["import React from 'react'\r\nimport { View, Pressable } from 'react-native'\r\nimport { styled } from '../styled'\r\nimport { shadow, windowWidth } from '../utils'\r\n\r\nconst Card = styled(View, {\r\n base: {\r\n flexDirection: 'column'\r\n },\r\n variants: {\r\n shadow: shadow,\r\n HWidth: {\r\n '32x4': {\r\n width: windowWidth - 32 - 4\r\n },\r\n '32x8': {\r\n width: windowWidth - 32 - 8\r\n },\r\n '16x4': {\r\n width: windowWidth - 16 - 4\r\n },\r\n '16x8': {\r\n width: windowWidth - 16 - 8\r\n }\r\n },\r\n }\r\n})\r\n\r\nconst StyledCard = ({\r\n\tpressable = false,\r\n pressableProps = {},\r\n\tchildren,\r\n ...cardProps\r\n}) => {\r\n if (pressable) {\r\n return (\r\n <Pressable {...pressableProps}>\r\n <Card {...cardProps}>\r\n {children}\r\n </Card>\r\n </Pressable>\r\n )\r\n }\r\n\r\n return (\r\n <Card {...cardProps}>\r\n {children}\r\n </Card>\r\n )\r\n}\r\n\r\nexport { StyledCard }\r\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,SAAS,QAAQ,cAAc;AAC9C,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,MAAM,EAAEC,WAAW,QAAQ,UAAU;AAE9C,MAAMC,IAAI,GAAGH,MAAM,CAACF,IAAI,EAAE;EACxBM,IAAI,EAAE;IACJC,aAAa,EAAE;EACjB,CAAC;EACDC,QAAQ,EAAE;IACRL,MAAM,EAAEA,MAAM;IACdM,MAAM,EAAE;MACN,MAAM,EAAE;QACNC,KAAK,EAAEN,WAAW,GAAG,EAAE,GAAG;MAC5B,CAAC;MACD,MAAM,EAAE;QACNM,KAAK,EAAEN,WAAW,GAAG,EAAE,GAAG;MAC5B,CAAC;MACD,MAAM,EAAE;QACNM,KAAK,EAAEN,WAAW,GAAG,EAAE,GAAG;MAC5B,CAAC;MACD,MAAM,EAAE;QACNM,KAAK,EAAEN,WAAW,GAAG,EAAE,GAAG;MAC5B;IACF;EACF;AACF,CAAC,CAAC;AAEF,MAAMO,UAAU,GAAGA,CAAC;EACnBC,SAAS,GAAG,KAAK;EAChBC,cAAc,GAAG,CAAC,CAAC;EACpBC,QAAQ;EACP,GAAGC;AACL,CAAC,KAAK;EACJ,IAAIH,SAAS,EAAE;IACb,oBACEb,KAAA,CAAAiB,aAAA,CAACf,SAAS,EAAKY,cAAc,eAC3Bd,KAAA,CAAAiB,aAAA,CAACX,IAAI,EAAKU,SAAS,EAChBD,QACG,CACG,CAAC;EAEhB;EAEA,oBACEf,KAAA,CAAAiB,aAAA,CAACX,IAAI,EAAKU,SAAS,EAChBD,QACG,CAAC;AAEX,CAAC;AAED,SAASH,UAAU","ignoreList":[]}
|
|
@@ -1,11 +1,26 @@
|
|
|
1
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
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { Pressable } from "react-native";
|
|
4
|
+
import { YStack } from "../stack";
|
|
5
|
+
import { theme } from "../theme";
|
|
5
6
|
const StyledCycle = ({
|
|
6
7
|
children,
|
|
7
|
-
|
|
8
|
+
pressable = false,
|
|
9
|
+
pressableProps = {},
|
|
10
|
+
...cycleProps
|
|
8
11
|
}) => {
|
|
12
|
+
if (pressable) {
|
|
13
|
+
return /*#__PURE__*/React.createElement(Pressable, pressableProps, /*#__PURE__*/React.createElement(YStack, _extends({
|
|
14
|
+
height: 48,
|
|
15
|
+
width: 48,
|
|
16
|
+
borderRadius: 50,
|
|
17
|
+
borderWidth: 1,
|
|
18
|
+
borderColor: theme.colors.gray[1],
|
|
19
|
+
backgroundColor: theme.colors.gray[1],
|
|
20
|
+
justifyContent: "center",
|
|
21
|
+
alignItems: "center"
|
|
22
|
+
}, cycleProps), children));
|
|
23
|
+
}
|
|
9
24
|
return /*#__PURE__*/React.createElement(YStack, _extends({
|
|
10
25
|
height: 48,
|
|
11
26
|
width: 48,
|
|
@@ -15,7 +30,7 @@ const StyledCycle = ({
|
|
|
15
30
|
backgroundColor: theme.colors.gray[1],
|
|
16
31
|
justifyContent: "center",
|
|
17
32
|
alignItems: "center"
|
|
18
|
-
},
|
|
33
|
+
}, cycleProps), children);
|
|
19
34
|
};
|
|
20
35
|
export { StyledCycle };
|
|
21
36
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","YStack","theme","StyledCycle","children","
|
|
1
|
+
{"version":3,"names":["React","Pressable","YStack","theme","StyledCycle","children","pressable","pressableProps","cycleProps","createElement","_extends","height","width","borderRadius","borderWidth","borderColor","colors","gray","backgroundColor","justifyContent","alignItems"],"sources":["index.jsx"],"sourcesContent":["import React from \"react\";\r\nimport { Pressable } from \"react-native\";\r\nimport { YStack } from \"../stack\";\r\nimport { theme } from \"../theme\";\r\n\r\nconst StyledCycle = ({\r\n\tchildren,\r\n\tpressable = false,\r\n\tpressableProps = {},\r\n\t...cycleProps\r\n}) => {\r\n\tif (pressable) {\r\n\t\treturn (\r\n\t\t\t<Pressable {...pressableProps}>\r\n\t\t\t\t<YStack\r\n\t\t\t\t\theight={48}\r\n\t\t\t\t\twidth={48}\r\n\t\t\t\t\tborderRadius={50}\r\n\t\t\t\t\tborderWidth={1}\r\n\t\t\t\t\tborderColor={theme.colors.gray[1]}\r\n\t\t\t\t\tbackgroundColor={theme.colors.gray[1]}\r\n\t\t\t\t\tjustifyContent=\"center\"\r\n\t\t\t\t\talignItems=\"center\"\r\n {...cycleProps}\r\n\t\t\t\t>\r\n\t\t\t\t\t{children}\r\n\t\t\t\t</YStack>\r\n\t\t\t</Pressable>\r\n\t\t);\r\n\t}\r\n\r\n return (\r\n <YStack\r\n height={48}\r\n width={48}\r\n borderRadius={50}\r\n borderWidth={1}\r\n borderColor={theme.colors.gray[1]}\r\n backgroundColor={theme.colors.gray[1]}\r\n justifyContent=\"center\"\r\n alignItems=\"center\"\r\n {...cycleProps}\r\n >\r\n {children}\r\n </YStack>\r\n );\r\n};\r\n\r\nexport { StyledCycle };\r\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,KAAK,QAAQ,UAAU;AAEhC,MAAMC,WAAW,GAAGA,CAAC;EACpBC,QAAQ;EACRC,SAAS,GAAG,KAAK;EACjBC,cAAc,GAAG,CAAC,CAAC;EACnB,GAAGC;AACJ,CAAC,KAAK;EACL,IAAIF,SAAS,EAAE;IACd,oBACCN,KAAA,CAAAS,aAAA,CAACR,SAAS,EAAKM,cAAc,eAC5BP,KAAA,CAAAS,aAAA,CAACP,MAAM,EAAAQ,QAAA;MACNC,MAAM,EAAE,EAAG;MACXC,KAAK,EAAE,EAAG;MACVC,YAAY,EAAE,EAAG;MACjBC,WAAW,EAAE,CAAE;MACfC,WAAW,EAAEZ,KAAK,CAACa,MAAM,CAACC,IAAI,CAAC,CAAC,CAAE;MAClCC,eAAe,EAAEf,KAAK,CAACa,MAAM,CAACC,IAAI,CAAC,CAAC,CAAE;MACtCE,cAAc,EAAC,QAAQ;MACvBC,UAAU,EAAC;IAAQ,GACVZ,UAAU,GAElBH,QACM,CACE,CAAC;EAEd;EAEC,oBACEL,KAAA,CAAAS,aAAA,CAACP,MAAM,EAAAQ,QAAA;IACLC,MAAM,EAAE,EAAG;IACXC,KAAK,EAAE,EAAG;IACVC,YAAY,EAAE,EAAG;IACjBC,WAAW,EAAE,CAAE;IACfC,WAAW,EAAEZ,KAAK,CAACa,MAAM,CAACC,IAAI,CAAC,CAAC,CAAE;IAClCC,eAAe,EAAEf,KAAK,CAACa,MAAM,CAACC,IAAI,CAAC,CAAC,CAAE;IACtCE,cAAc,EAAC,QAAQ;IACvBC,UAAU,EAAC;EAAQ,GACfZ,UAAU,GAEbH,QACK,CAAC;AAEb,CAAC;AAED,SAASD,WAAW","ignoreList":[]}
|
|
@@ -37,6 +37,7 @@ const Headers = styled(View, {
|
|
|
37
37
|
const StyledHeader = ({
|
|
38
38
|
statusProps,
|
|
39
39
|
skipAndroid = false,
|
|
40
|
+
skipIos = true,
|
|
40
41
|
...rest
|
|
41
42
|
}) => {
|
|
42
43
|
return /*#__PURE__*/React.createElement(YStack, null, /*#__PURE__*/React.createElement(StatusBar, _extends({
|
|
@@ -44,7 +45,7 @@ const StyledHeader = ({
|
|
|
44
45
|
backgroundColor: theme.colors.gray[1],
|
|
45
46
|
barStyle: 'dark-content'
|
|
46
47
|
}, statusProps)), /*#__PURE__*/React.createElement(Headers, _extends({
|
|
47
|
-
statusHeight: getStatusBarHeight(skipAndroid)
|
|
48
|
+
statusHeight: getStatusBarHeight(skipAndroid, skipIos)
|
|
48
49
|
}, rest)));
|
|
49
50
|
};
|
|
50
51
|
const Header = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","StatusBar","Icon","theme","YStack","XStack","styled","StyledCycle","StyledText","StyledSpacer","isValidNumber","getStatusBarHeight","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","fontWeight","normal","fontSize","iconProps","color","textProps","title","icon","cycleProps","rightIcon","rightIconProps","onPress","flex","paddingHorizontal","paddingVertical","Fragment","name","marginHorizontal","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\nimport { getStatusBarHeight } from '../utils/statusBar'\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={true}\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, fontWeight = theme.fontWeight.normal, fontSize = theme.fontSize.normal, iconProps, color = theme.colors.gray[800], textProps, title, icon = false, cycleProps, rightIcon, rightIconProps, onPress, ...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={() => onPress && onPress()}\r\n {...iconProps}\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={color}\r\n fontWeight={fontWeight}\r\n fontSize={fontSize}\r\n >\r\n {title}\r\n </StyledText>}\r\n {\r\n rightIcon && (\r\n <>{rightIcon}</>\r\n )\r\n }\r\n\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":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,SAAS,QAAQ,cAAc;AACxC,OAAOC,IAAI,MAAM,yCAAyC;AAC1D,SAASC,KAAK,QAAQ,UAAU;AAChC,SAASC,MAAM,EAAEC,MAAM,QAAQ,UAAU;AACzC,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,WAAW,QAAQ,UAAU;AACtC,SAASC,UAAU,QAAQ,SAAS;AACpC,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,aAAa,QAAQ,UAAU;AACxC,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD,MAAMC,OAAO,GAAGN,MAAM,CAACN,IAAI,EAAE;EAC3Ba,IAAI,EAAE;IACJC,KAAK,EAAE,MAAM;IACbC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDC,QAAQ,EAAE;IACRC,SAAS,EAAEA,CAACC,IAAI,GAAG,CAAC,KAAK;MACvB,IAAI,CAACV,aAAa,CAACU,IAAI,CAAC,EAAE;QACxB,MAAM,IAAIC,KAAK,CAAC,yBAAyB,CAAC;MAC5C;MACA,OAAO;QAAEF,SAAS,EAAEC;MAAK,CAAC;IAC5B,CAAC;IACDE,YAAY,EAAEA,CAACC,MAAM,GAAG,CAAC,KAAK;MAC5B,OAAO;QAAEC,UAAU,EAAED;MAAO,CAAC;IAC/B;EACF;AACF,CAAC,CAAC;AAEF,MAAME,YAAY,GAAGA,CAAC;EAAEC,WAAW;EAAEC,WAAW,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAC,KAAK;
|
|
1
|
+
{"version":3,"names":["React","View","StatusBar","Icon","theme","YStack","XStack","styled","StyledCycle","StyledText","StyledSpacer","isValidNumber","getStatusBarHeight","Headers","base","width","flexDirection","alignItems","justifyContent","variants","marginTop","size","Error","statusHeight","height","paddingTop","StyledHeader","statusProps","skipAndroid","skipIos","rest","createElement","_extends","translucent","backgroundColor","colors","gray","barStyle","Header","navigator","fontWeight","normal","fontSize","iconProps","color","textProps","title","icon","cycleProps","rightIcon","rightIconProps","onPress","flex","paddingHorizontal","paddingVertical","Fragment","name","marginHorizontal","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\nimport { getStatusBarHeight } from '../utils/statusBar'\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, skipIos = true, ...rest }) => {\r\n return (\r\n <YStack>\r\n <StatusBar\r\n translucent={true}\r\n backgroundColor={theme.colors.gray[1]}\r\n barStyle={'dark-content'}\r\n {...statusProps}\r\n />\r\n <Headers statusHeight={getStatusBarHeight(skipAndroid, skipIos)} {...rest} />\r\n </YStack>\r\n )\r\n}\r\n\r\nconst Header = ({ navigator, fontWeight = theme.fontWeight.normal, fontSize = theme.fontSize.normal, iconProps, color = theme.colors.gray[800], textProps, title, icon = false, cycleProps, rightIcon, rightIconProps, onPress, ...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={() => onPress && onPress()}\r\n {...iconProps}\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={color}\r\n fontWeight={fontWeight}\r\n fontSize={fontSize}\r\n >\r\n {title}\r\n </StyledText>}\r\n {\r\n rightIcon && (\r\n <>{rightIcon}</>\r\n )\r\n }\r\n\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
|
@@ -28,14 +28,14 @@ const Card = styled(View, {
|
|
|
28
28
|
|
|
29
29
|
const StyledCard = ({
|
|
30
30
|
pressable = false,
|
|
31
|
-
|
|
31
|
+
pressableProps = {},
|
|
32
32
|
children,
|
|
33
|
-
|
|
33
|
+
...cardProps
|
|
34
34
|
}) => {
|
|
35
35
|
if (pressable) {
|
|
36
36
|
return (
|
|
37
37
|
<Pressable {...pressableProps}>
|
|
38
|
-
<Card {...
|
|
38
|
+
<Card {...cardProps}>
|
|
39
39
|
{children}
|
|
40
40
|
</Card>
|
|
41
41
|
</Pressable>
|
|
@@ -43,7 +43,7 @@ const StyledCard = ({
|
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
return (
|
|
46
|
-
<Card {...
|
|
46
|
+
<Card {...cardProps}>
|
|
47
47
|
{children}
|
|
48
48
|
</Card>
|
|
49
49
|
)
|
|
@@ -1,8 +1,34 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Pressable } from "react-native";
|
|
3
|
+
import { YStack } from "../stack";
|
|
4
|
+
import { theme } from "../theme";
|
|
5
|
+
|
|
6
|
+
const StyledCycle = ({
|
|
7
|
+
children,
|
|
8
|
+
pressable = false,
|
|
9
|
+
pressableProps = {},
|
|
10
|
+
...cycleProps
|
|
11
|
+
}) => {
|
|
12
|
+
if (pressable) {
|
|
13
|
+
return (
|
|
14
|
+
<Pressable {...pressableProps}>
|
|
15
|
+
<YStack
|
|
16
|
+
height={48}
|
|
17
|
+
width={48}
|
|
18
|
+
borderRadius={50}
|
|
19
|
+
borderWidth={1}
|
|
20
|
+
borderColor={theme.colors.gray[1]}
|
|
21
|
+
backgroundColor={theme.colors.gray[1]}
|
|
22
|
+
justifyContent="center"
|
|
23
|
+
alignItems="center"
|
|
24
|
+
{...cycleProps}
|
|
25
|
+
>
|
|
26
|
+
{children}
|
|
27
|
+
</YStack>
|
|
28
|
+
</Pressable>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
4
31
|
|
|
5
|
-
const StyledCycle = ({ children, ...rest }) => {
|
|
6
32
|
return (
|
|
7
33
|
<YStack
|
|
8
34
|
height={48}
|
|
@@ -11,13 +37,13 @@ const StyledCycle = ({ children, ...rest }) => {
|
|
|
11
37
|
borderWidth={1}
|
|
12
38
|
borderColor={theme.colors.gray[1]}
|
|
13
39
|
backgroundColor={theme.colors.gray[1]}
|
|
14
|
-
justifyContent=
|
|
15
|
-
alignItems=
|
|
16
|
-
{...
|
|
17
|
-
|
|
40
|
+
justifyContent="center"
|
|
41
|
+
alignItems="center"
|
|
42
|
+
{...cycleProps}
|
|
43
|
+
>
|
|
18
44
|
{children}
|
|
19
45
|
</YStack>
|
|
20
|
-
)
|
|
21
|
-
}
|
|
46
|
+
);
|
|
47
|
+
};
|
|
22
48
|
|
|
23
|
-
export { StyledCycle }
|
|
49
|
+
export { StyledCycle };
|
|
@@ -31,7 +31,7 @@ const Headers = styled(View, {
|
|
|
31
31
|
}
|
|
32
32
|
})
|
|
33
33
|
|
|
34
|
-
const StyledHeader = ({ statusProps, skipAndroid = false, ...rest }) => {
|
|
34
|
+
const StyledHeader = ({ statusProps, skipAndroid = false, skipIos = true, ...rest }) => {
|
|
35
35
|
return (
|
|
36
36
|
<YStack>
|
|
37
37
|
<StatusBar
|
|
@@ -40,7 +40,7 @@ const StyledHeader = ({ statusProps, skipAndroid = false, ...rest }) => {
|
|
|
40
40
|
barStyle={'dark-content'}
|
|
41
41
|
{...statusProps}
|
|
42
42
|
/>
|
|
43
|
-
<Headers statusHeight={getStatusBarHeight(skipAndroid)} {...rest} />
|
|
43
|
+
<Headers statusHeight={getStatusBarHeight(skipAndroid, skipIos)} {...rest} />
|
|
44
44
|
</YStack>
|
|
45
45
|
)
|
|
46
46
|
}
|