@coorpacademy/components 11.5.1 → 11.5.2

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.
@@ -25,12 +25,13 @@ export interface Props {
25
25
  selectedItemIndex: number;
26
26
  }
27
27
  declare type StyleSheetType = {
28
- main: ViewStyle;
29
28
  container: ViewStyle;
29
+ navbar: ViewStyle;
30
+ blur: ViewStyle;
30
31
  button: ViewStyle;
31
32
  buttonText: TextStyle;
32
33
  dot: ViewStyle;
33
- blur: ViewStyle;
34
+ dotShadow: ViewStyle;
34
35
  };
35
36
  declare const NavigationBar: ({ items, selectedItemIndex }: Props) => JSX.Element | null;
36
37
  export default NavigationBar;
@@ -1 +1 @@
1
- {"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/mobile-navigation/index.native.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAsB,EAAE,EAAC,MAAM,OAAO,CAAC;AACrD,OAAO,EAIL,SAAS,EACT,SAAS,EACT,qBAAqB,EAEtB,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAC,KAAK,EAAC,MAAM,8BAA8B,CAAC;AAEnD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IAC1D,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD;AAED,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,MAAM,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,aAAK,cAAc,GAAG;IACpB,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC;IACtB,GAAG,EAAE,SAAS,CAAC;IACf,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAsEF,QAAA,MAAM,aAAa,iCAAgC,KAAK,uBA0CvD,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/mobile-navigation/index.native.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAsB,EAAE,EAAC,MAAM,OAAO,CAAC;AACrD,OAAO,EAIL,SAAS,EACT,SAAS,EACT,qBAAqB,EAEtB,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAC,KAAK,EAAC,MAAM,8BAA8B,CAAC;AAEnD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IAC1D,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD;AAED,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,MAAM,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,aAAK,cAAc,GAAG;IACpB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC;IACtB,GAAG,EAAE,SAAS,CAAC;IACf,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAuFF,QAAA,MAAM,aAAa,iCAAgC,KAAK,uBAsCvD,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -6,25 +6,43 @@ import { useTemplateContext } from '../../template/app-review/template-context';
6
6
  import Touchable from '../../hoc/touchable/index.native';
7
7
 
8
8
  const createStyleSheet = theme => StyleSheet.create({
9
- main: {
10
- marginHorizontal: 20
11
- },
12
9
  container: {
13
10
  position: 'absolute',
14
- bottom: 34,
11
+ bottom: 0,
12
+ paddingTop: 10,
13
+ paddingBottom: 34,
14
+ paddingHorizontal: 20,
15
15
  width: '100%',
16
+ shadowColor: '#000',
17
+ shadowOffset: {
18
+ width: 0,
19
+ height: 2
20
+ },
21
+ shadowOpacity: 0.15,
22
+ shadowRadius: 3,
23
+ elevation: 4
24
+ },
25
+ blur: {
26
+ position: 'absolute',
27
+ top: 0,
28
+ bottom: 0,
29
+ left: 0,
30
+ right: 0
31
+ },
32
+ navbar: {
16
33
  flexDirection: 'row',
17
34
  justifyContent: 'space-between',
18
35
  alignSelf: 'center',
19
36
  overflow: 'hidden',
20
37
  height: 66,
21
38
  borderRadius: 12,
22
- backgroundColor: theme.colors.gray.light
39
+ backgroundColor: Platform.OS === 'ios' ? theme.colors.gray.light : '#edededee'
23
40
  },
24
41
  button: {
25
42
  alignItems: 'center',
26
43
  flex: 1,
27
44
  height: '100%',
45
+ maxWidth: 110,
28
46
  marginTop: theme.spacing.small
29
47
  },
30
48
  buttonText: {
@@ -42,7 +60,7 @@ const createStyleSheet = theme => StyleSheet.create({
42
60
  position: 'absolute',
43
61
  alignSelf: 'center'
44
62
  },
45
- blur: {
63
+ dotShadow: {
46
64
  marginTop: -87,
47
65
  width: 200,
48
66
  height: 100,
@@ -82,7 +100,7 @@ const Button = ({
82
100
  style: styles.dot
83
101
  }), /*#__PURE__*/React.createElement(BlurredShadow, {
84
102
  color: theme.colors.cta,
85
- style: styles.blur
103
+ style: styles.dotShadow
86
104
  })) : null);
87
105
 
88
106
  const NavigationBar = ({
@@ -105,14 +123,14 @@ const NavigationBar = ({
105
123
  }
106
124
 
107
125
  return /*#__PURE__*/React.createElement(View, {
108
- style: styleSheet.main
109
- }, Platform.OS === 'ios' ? /*#__PURE__*/React.createElement(BlurView, {
110
- style: styleSheet.container,
111
- blurAmount: 32,
112
- reducedTransparencyFallbackColor: "rgba(17, 17, 23, 0.5)"
113
- }) : null, /*#__PURE__*/React.createElement(View, {
114
126
  style: styleSheet.container
115
- }, items.map((prop, index) => {
127
+ }, /*#__PURE__*/React.createElement(View, {
128
+ style: styleSheet.navbar
129
+ }, Platform.OS === 'ios' ? /*#__PURE__*/React.createElement(BlurView, {
130
+ style: styleSheet.blur,
131
+ blurAmount: 75,
132
+ blurType: "xlight"
133
+ }) : null, items.map((prop, index) => {
116
134
  const handlePress = prop.action;
117
135
  return /*#__PURE__*/React.createElement(Button, {
118
136
  key: `button-${prop.label}`,
@@ -1 +1 @@
1
- {"version":3,"file":"index.native.js","names":["React","useState","useEffect","View","StyleSheet","Text","Platform","BlurView","NovaCompositionNavigationNavBar","BlurredShadow","useTemplateContext","Touchable","createStyleSheet","theme","create","main","marginHorizontal","container","position","bottom","width","flexDirection","justifyContent","alignSelf","overflow","height","borderRadius","backgroundColor","colors","gray","light","button","alignItems","flex","marginTop","spacing","small","buttonText","fontSize","lineHeight","color","text","primary","dot","cta","blur","transform","rotateX","scaleX","Button","testID","title","selected","Icon","styles","onPress","NavigationBar","items","selectedItemIndex","templateContext","styleSheet","setStylesheet","_stylesheet","OS","map","prop","index","handlePress","action","label","icon"],"sources":["../../../src/organism/mobile-navigation/index.native.tsx"],"sourcesContent":["import React, {useState, useEffect, FC} from 'react';\nimport {\n View,\n StyleSheet,\n Text,\n ViewStyle,\n TextStyle,\n GestureResponderEvent,\n Platform\n} from 'react-native';\nimport {BlurView} from '@react-native-community/blur';\n\nimport {NovaCompositionNavigationNavBar as BlurredShadow} from '@coorpacademy/nova-icons';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {Theme} from '../../variables/theme.native';\n\ninterface ButtonProps {\n title: string;\n testID: string;\n selected: boolean;\n Icon: FC<{height: number; width: number; color?: string}>;\n styles: StyleSheetType;\n theme: Theme;\n onPress: (event: GestureResponderEvent) => void;\n}\n\nexport type NavItemType = {\n label: string;\n icon: ButtonProps['Icon'];\n action: (event: GestureResponderEvent) => void;\n};\n\nexport interface Props {\n testID?: string;\n items: Array<NavItemType>;\n selectedItemIndex: number;\n}\n\ntype StyleSheetType = {\n main: ViewStyle;\n container: ViewStyle;\n button: ViewStyle;\n buttonText: TextStyle;\n dot: ViewStyle;\n blur: ViewStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n StyleSheet.create({\n main: {\n marginHorizontal: 20\n },\n container: {\n position: 'absolute',\n bottom: 34,\n width: '100%',\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignSelf: 'center',\n overflow: 'hidden',\n height: 66,\n borderRadius: 12,\n backgroundColor: theme.colors.gray.light\n },\n button: {\n alignItems: 'center',\n flex: 1,\n height: '100%',\n marginTop: theme.spacing.small\n },\n buttonText: {\n fontSize: theme.fontSize.small,\n lineHeight: 26,\n // height: 11,\n color: theme.colors.text.primary\n },\n\n dot: {\n width: 8,\n height: 8,\n borderRadius: 8,\n backgroundColor: theme.colors.cta,\n marginTop: 3,\n position: 'absolute',\n alignSelf: 'center'\n },\n blur: {\n marginTop: -87,\n width: 200,\n height: 100,\n position: 'absolute',\n alignSelf: 'center',\n transform: [{rotateX: '180deg'}, {scaleX: 0.7}]\n }\n });\n\nconst Button = ({testID, title, selected, Icon, styles, theme, onPress}: ButtonProps) => (\n <Touchable testID={testID} style={styles.button} onPress={onPress}>\n <View style={{alignItems: 'center'}}>\n <Icon\n height={16}\n width={16}\n color={selected ? theme.colors.cta : theme.colors.text.primary}\n />\n <Text style={styles.buttonText}>{title}</Text>\n </View>\n {selected ? (\n <View>\n <View style={styles.dot} />\n <BlurredShadow color={theme.colors.cta} style={styles.blur} />\n </View>\n ) : null}\n </Touchable>\n);\n\nconst NavigationBar = ({items, selectedItemIndex}: Props) => {\n const templateContext = useTemplateContext();\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const {theme} = templateContext;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <View style={styleSheet.main}>\n {Platform.OS === 'ios' ? (\n <BlurView\n style={styleSheet.container}\n blurAmount={32}\n reducedTransparencyFallbackColor=\"rgba(17, 17, 23, 0.5)\"\n />\n ) : null}\n <View style={styleSheet.container}>\n {items.map((prop, index) => {\n const handlePress = prop.action;\n return (\n <Button\n key={`button-${prop.label}`}\n title={prop.label}\n Icon={prop.icon}\n onPress={handlePress}\n selected={index === selectedItemIndex}\n testID={`navigationButton_${index}`}\n styles={styleSheet}\n theme={theme}\n />\n );\n })}\n </View>\n </View>\n );\n};\n\nexport default NavigationBar;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,QAAf,EAAyBC,SAAzB,QAA6C,OAA7C;AACA,SACEC,IADF,EAEEC,UAFF,EAGEC,IAHF,EAOEC,QAPF,QAQO,cARP;AASA,SAAQC,QAAR,QAAuB,8BAAvB;AAEA,SAAQC,+BAA+B,IAAIC,aAA3C,QAA+D,0BAA/D;AAEA,SAAQC,kBAAR,QAAiC,4CAAjC;AACA,OAAOC,SAAP,MAAsB,kCAAtB;;AAkCA,MAAMC,gBAAgB,GAAIC,KAAD,IACvBT,UAAU,CAACU,MAAX,CAAkB;EAChBC,IAAI,EAAE;IACJC,gBAAgB,EAAE;EADd,CADU;EAIhBC,SAAS,EAAE;IACTC,QAAQ,EAAE,UADD;IAETC,MAAM,EAAE,EAFC;IAGTC,KAAK,EAAE,MAHE;IAITC,aAAa,EAAE,KAJN;IAKTC,cAAc,EAAE,eALP;IAMTC,SAAS,EAAE,QANF;IAOTC,QAAQ,EAAE,QAPD;IAQTC,MAAM,EAAE,EARC;IASTC,YAAY,EAAE,EATL;IAUTC,eAAe,EAAEd,KAAK,CAACe,MAAN,CAAaC,IAAb,CAAkBC;EAV1B,CAJK;EAgBhBC,MAAM,EAAE;IACNC,UAAU,EAAE,QADN;IAENC,IAAI,EAAE,CAFA;IAGNR,MAAM,EAAE,MAHF;IAINS,SAAS,EAAErB,KAAK,CAACsB,OAAN,CAAcC;EAJnB,CAhBQ;EAsBhBC,UAAU,EAAE;IACVC,QAAQ,EAAEzB,KAAK,CAACyB,QAAN,CAAeF,KADf;IAEVG,UAAU,EAAE,EAFF;IAGV;IACAC,KAAK,EAAE3B,KAAK,CAACe,MAAN,CAAaa,IAAb,CAAkBC;EAJf,CAtBI;EA6BhBC,GAAG,EAAE;IACHvB,KAAK,EAAE,CADJ;IAEHK,MAAM,EAAE,CAFL;IAGHC,YAAY,EAAE,CAHX;IAIHC,eAAe,EAAEd,KAAK,CAACe,MAAN,CAAagB,GAJ3B;IAKHV,SAAS,EAAE,CALR;IAMHhB,QAAQ,EAAE,UANP;IAOHK,SAAS,EAAE;EAPR,CA7BW;EAsChBsB,IAAI,EAAE;IACJX,SAAS,EAAE,CAAC,EADR;IAEJd,KAAK,EAAE,GAFH;IAGJK,MAAM,EAAE,GAHJ;IAIJP,QAAQ,EAAE,UAJN;IAKJK,SAAS,EAAE,QALP;IAMJuB,SAAS,EAAE,CAAC;MAACC,OAAO,EAAE;IAAV,CAAD,EAAsB;MAACC,MAAM,EAAE;IAAT,CAAtB;EANP;AAtCU,CAAlB,CADF;;AAiDA,MAAMC,MAAM,GAAG,CAAC;EAACC,MAAD;EAASC,KAAT;EAAgBC,QAAhB;EAA0BC,IAA1B;EAAgCC,MAAhC;EAAwCzC,KAAxC;EAA+C0C;AAA/C,CAAD,kBACb,oBAAC,SAAD;EAAW,MAAM,EAAEL,MAAnB;EAA2B,KAAK,EAAEI,MAAM,CAACvB,MAAzC;EAAiD,OAAO,EAAEwB;AAA1D,gBACE,oBAAC,IAAD;EAAM,KAAK,EAAE;IAACvB,UAAU,EAAE;EAAb;AAAb,gBACE,oBAAC,IAAD;EACE,MAAM,EAAE,EADV;EAEE,KAAK,EAAE,EAFT;EAGE,KAAK,EAAEoB,QAAQ,GAAGvC,KAAK,CAACe,MAAN,CAAagB,GAAhB,GAAsB/B,KAAK,CAACe,MAAN,CAAaa,IAAb,CAAkBC;AAHzD,EADF,eAME,oBAAC,IAAD;EAAM,KAAK,EAAEY,MAAM,CAACjB;AAApB,GAAiCc,KAAjC,CANF,CADF,EASGC,QAAQ,gBACP,oBAAC,IAAD,qBACE,oBAAC,IAAD;EAAM,KAAK,EAAEE,MAAM,CAACX;AAApB,EADF,eAEE,oBAAC,aAAD;EAAe,KAAK,EAAE9B,KAAK,CAACe,MAAN,CAAagB,GAAnC;EAAwC,KAAK,EAAEU,MAAM,CAACT;AAAtD,EAFF,CADO,GAKL,IAdN,CADF;;AAmBA,MAAMW,aAAa,GAAG,CAAC;EAACC,KAAD;EAAQC;AAAR,CAAD,KAAuC;EAC3D,MAAMC,eAAe,GAAGjD,kBAAkB,EAA1C;EACA,MAAM,CAACkD,UAAD,EAAaC,aAAb,IAA8B5D,QAAQ,CAAwB,IAAxB,CAA5C;EACA,MAAM;IAACY;EAAD,IAAU8C,eAAhB;EAEAzD,SAAS,CAAC,MAAM;IACd,MAAM4D,WAAW,GAAGlD,gBAAgB,CAACC,KAAD,CAApC;;IACAgD,aAAa,CAACC,WAAD,CAAb;EACD,CAHQ,EAGN,CAACjD,KAAD,CAHM,CAAT;;EAKA,IAAI,CAAC+C,UAAL,EAAiB;IACf,OAAO,IAAP;EACD;;EAED,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEA,UAAU,CAAC7C;EAAxB,GACGT,QAAQ,CAACyD,EAAT,KAAgB,KAAhB,gBACC,oBAAC,QAAD;IACE,KAAK,EAAEH,UAAU,CAAC3C,SADpB;IAEE,UAAU,EAAE,EAFd;IAGE,gCAAgC,EAAC;EAHnC,EADD,GAMG,IAPN,eAQE,oBAAC,IAAD;IAAM,KAAK,EAAE2C,UAAU,CAAC3C;EAAxB,GACGwC,KAAK,CAACO,GAAN,CAAU,CAACC,IAAD,EAAOC,KAAP,KAAiB;IAC1B,MAAMC,WAAW,GAAGF,IAAI,CAACG,MAAzB;IACA,oBACE,oBAAC,MAAD;MACE,GAAG,EAAG,UAASH,IAAI,CAACI,KAAM,EAD5B;MAEE,KAAK,EAAEJ,IAAI,CAACI,KAFd;MAGE,IAAI,EAAEJ,IAAI,CAACK,IAHb;MAIE,OAAO,EAAEH,WAJX;MAKE,QAAQ,EAAED,KAAK,KAAKR,iBALtB;MAME,MAAM,EAAG,oBAAmBQ,KAAM,EANpC;MAOE,MAAM,EAAEN,UAPV;MAQE,KAAK,EAAE/C;IART,EADF;EAYD,CAdA,CADH,CARF,CADF;AA4BD,CA1CD;;AA4CA,eAAe2C,aAAf"}
1
+ {"version":3,"file":"index.native.js","names":["React","useState","useEffect","View","StyleSheet","Text","Platform","BlurView","NovaCompositionNavigationNavBar","BlurredShadow","useTemplateContext","Touchable","createStyleSheet","theme","create","container","position","bottom","paddingTop","paddingBottom","paddingHorizontal","width","shadowColor","shadowOffset","height","shadowOpacity","shadowRadius","elevation","blur","top","left","right","navbar","flexDirection","justifyContent","alignSelf","overflow","borderRadius","backgroundColor","OS","colors","gray","light","button","alignItems","flex","maxWidth","marginTop","spacing","small","buttonText","fontSize","lineHeight","color","text","primary","dot","cta","dotShadow","transform","rotateX","scaleX","Button","testID","title","selected","Icon","styles","onPress","NavigationBar","items","selectedItemIndex","templateContext","styleSheet","setStylesheet","_stylesheet","map","prop","index","handlePress","action","label","icon"],"sources":["../../../src/organism/mobile-navigation/index.native.tsx"],"sourcesContent":["import React, {useState, useEffect, FC} from 'react';\nimport {\n View,\n StyleSheet,\n Text,\n ViewStyle,\n TextStyle,\n GestureResponderEvent,\n Platform\n} from 'react-native';\nimport {BlurView} from '@react-native-community/blur';\n\nimport {NovaCompositionNavigationNavBar as BlurredShadow} from '@coorpacademy/nova-icons';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {Theme} from '../../variables/theme.native';\n\ninterface ButtonProps {\n title: string;\n testID: string;\n selected: boolean;\n Icon: FC<{height: number; width: number; color?: string}>;\n styles: StyleSheetType;\n theme: Theme;\n onPress: (event: GestureResponderEvent) => void;\n}\n\nexport type NavItemType = {\n label: string;\n icon: ButtonProps['Icon'];\n action: (event: GestureResponderEvent) => void;\n};\n\nexport interface Props {\n testID?: string;\n items: Array<NavItemType>;\n selectedItemIndex: number;\n}\n\ntype StyleSheetType = {\n container: ViewStyle;\n navbar: ViewStyle;\n blur: ViewStyle;\n button: ViewStyle;\n buttonText: TextStyle;\n dot: ViewStyle;\n dotShadow: ViewStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n StyleSheet.create({\n container: {\n position: 'absolute',\n bottom: 0,\n paddingTop: 10,\n paddingBottom: 34,\n paddingHorizontal: 20,\n width: '100%',\n shadowColor: '#000',\n shadowOffset: {\n width: 0,\n height: 2\n },\n shadowOpacity: 0.15,\n shadowRadius: 3,\n elevation: 4\n },\n blur: {\n position: 'absolute',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0\n },\n navbar: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignSelf: 'center',\n overflow: 'hidden',\n height: 66,\n borderRadius: 12,\n backgroundColor: Platform.OS === 'ios' ? theme.colors.gray.light : '#edededee'\n },\n button: {\n alignItems: 'center',\n flex: 1,\n height: '100%',\n maxWidth: 110,\n marginTop: theme.spacing.small\n },\n buttonText: {\n fontSize: theme.fontSize.small,\n lineHeight: 26,\n // height: 11,\n color: theme.colors.text.primary\n },\n dot: {\n width: 8,\n height: 8,\n borderRadius: 8,\n backgroundColor: theme.colors.cta,\n marginTop: 3,\n position: 'absolute',\n alignSelf: 'center'\n },\n dotShadow: {\n marginTop: -87,\n width: 200,\n height: 100,\n position: 'absolute',\n alignSelf: 'center',\n transform: [{rotateX: '180deg'}, {scaleX: 0.7}]\n }\n });\n\nconst Button = ({testID, title, selected, Icon, styles, theme, onPress}: ButtonProps) => (\n <Touchable testID={testID} style={styles.button} onPress={onPress}>\n <View style={{alignItems: 'center'}}>\n <Icon\n height={16}\n width={16}\n color={selected ? theme.colors.cta : theme.colors.text.primary}\n />\n <Text style={styles.buttonText}>{title}</Text>\n </View>\n {selected ? (\n <View>\n <View style={styles.dot} />\n <BlurredShadow color={theme.colors.cta} style={styles.dotShadow} />\n </View>\n ) : null}\n </Touchable>\n);\n\nconst NavigationBar = ({items, selectedItemIndex}: Props) => {\n const templateContext = useTemplateContext();\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const {theme} = templateContext;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <View style={styleSheet.container}>\n <View style={styleSheet.navbar}>\n {Platform.OS === 'ios' ? (\n <BlurView style={styleSheet.blur} blurAmount={75} blurType=\"xlight\" />\n ) : null}\n {items.map((prop, index) => {\n const handlePress = prop.action;\n return (\n <Button\n key={`button-${prop.label}`}\n title={prop.label}\n Icon={prop.icon}\n onPress={handlePress}\n selected={index === selectedItemIndex}\n testID={`navigationButton_${index}`}\n styles={styleSheet}\n theme={theme}\n />\n );\n })}\n </View>\n </View>\n );\n};\n\nexport default NavigationBar;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,QAAf,EAAyBC,SAAzB,QAA6C,OAA7C;AACA,SACEC,IADF,EAEEC,UAFF,EAGEC,IAHF,EAOEC,QAPF,QAQO,cARP;AASA,SAAQC,QAAR,QAAuB,8BAAvB;AAEA,SAAQC,+BAA+B,IAAIC,aAA3C,QAA+D,0BAA/D;AAEA,SAAQC,kBAAR,QAAiC,4CAAjC;AACA,OAAOC,SAAP,MAAsB,kCAAtB;;AAmCA,MAAMC,gBAAgB,GAAIC,KAAD,IACvBT,UAAU,CAACU,MAAX,CAAkB;EAChBC,SAAS,EAAE;IACTC,QAAQ,EAAE,UADD;IAETC,MAAM,EAAE,CAFC;IAGTC,UAAU,EAAE,EAHH;IAITC,aAAa,EAAE,EAJN;IAKTC,iBAAiB,EAAE,EALV;IAMTC,KAAK,EAAE,MANE;IAOTC,WAAW,EAAE,MAPJ;IAQTC,YAAY,EAAE;MACZF,KAAK,EAAE,CADK;MAEZG,MAAM,EAAE;IAFI,CARL;IAYTC,aAAa,EAAE,IAZN;IAaTC,YAAY,EAAE,CAbL;IAcTC,SAAS,EAAE;EAdF,CADK;EAiBhBC,IAAI,EAAE;IACJZ,QAAQ,EAAE,UADN;IAEJa,GAAG,EAAE,CAFD;IAGJZ,MAAM,EAAE,CAHJ;IAIJa,IAAI,EAAE,CAJF;IAKJC,KAAK,EAAE;EALH,CAjBU;EAwBhBC,MAAM,EAAE;IACNC,aAAa,EAAE,KADT;IAENC,cAAc,EAAE,eAFV;IAGNC,SAAS,EAAE,QAHL;IAINC,QAAQ,EAAE,QAJJ;IAKNZ,MAAM,EAAE,EALF;IAMNa,YAAY,EAAE,EANR;IAONC,eAAe,EAAEhC,QAAQ,CAACiC,EAAT,KAAgB,KAAhB,GAAwB1B,KAAK,CAAC2B,MAAN,CAAaC,IAAb,CAAkBC,KAA1C,GAAkD;EAP7D,CAxBQ;EAiChBC,MAAM,EAAE;IACNC,UAAU,EAAE,QADN;IAENC,IAAI,EAAE,CAFA;IAGNrB,MAAM,EAAE,MAHF;IAINsB,QAAQ,EAAE,GAJJ;IAKNC,SAAS,EAAElC,KAAK,CAACmC,OAAN,CAAcC;EALnB,CAjCQ;EAwChBC,UAAU,EAAE;IACVC,QAAQ,EAAEtC,KAAK,CAACsC,QAAN,CAAeF,KADf;IAEVG,UAAU,EAAE,EAFF;IAGV;IACAC,KAAK,EAAExC,KAAK,CAAC2B,MAAN,CAAac,IAAb,CAAkBC;EAJf,CAxCI;EA8ChBC,GAAG,EAAE;IACHnC,KAAK,EAAE,CADJ;IAEHG,MAAM,EAAE,CAFL;IAGHa,YAAY,EAAE,CAHX;IAIHC,eAAe,EAAEzB,KAAK,CAAC2B,MAAN,CAAaiB,GAJ3B;IAKHV,SAAS,EAAE,CALR;IAMH/B,QAAQ,EAAE,UANP;IAOHmB,SAAS,EAAE;EAPR,CA9CW;EAuDhBuB,SAAS,EAAE;IACTX,SAAS,EAAE,CAAC,EADH;IAET1B,KAAK,EAAE,GAFE;IAGTG,MAAM,EAAE,GAHC;IAITR,QAAQ,EAAE,UAJD;IAKTmB,SAAS,EAAE,QALF;IAMTwB,SAAS,EAAE,CAAC;MAACC,OAAO,EAAE;IAAV,CAAD,EAAsB;MAACC,MAAM,EAAE;IAAT,CAAtB;EANF;AAvDK,CAAlB,CADF;;AAkEA,MAAMC,MAAM,GAAG,CAAC;EAACC,MAAD;EAASC,KAAT;EAAgBC,QAAhB;EAA0BC,IAA1B;EAAgCC,MAAhC;EAAwCtD,KAAxC;EAA+CuD;AAA/C,CAAD,kBACb,oBAAC,SAAD;EAAW,MAAM,EAAEL,MAAnB;EAA2B,KAAK,EAAEI,MAAM,CAACxB,MAAzC;EAAiD,OAAO,EAAEyB;AAA1D,gBACE,oBAAC,IAAD;EAAM,KAAK,EAAE;IAACxB,UAAU,EAAE;EAAb;AAAb,gBACE,oBAAC,IAAD;EACE,MAAM,EAAE,EADV;EAEE,KAAK,EAAE,EAFT;EAGE,KAAK,EAAEqB,QAAQ,GAAGpD,KAAK,CAAC2B,MAAN,CAAaiB,GAAhB,GAAsB5C,KAAK,CAAC2B,MAAN,CAAac,IAAb,CAAkBC;AAHzD,EADF,eAME,oBAAC,IAAD;EAAM,KAAK,EAAEY,MAAM,CAACjB;AAApB,GAAiCc,KAAjC,CANF,CADF,EASGC,QAAQ,gBACP,oBAAC,IAAD,qBACE,oBAAC,IAAD;EAAM,KAAK,EAAEE,MAAM,CAACX;AAApB,EADF,eAEE,oBAAC,aAAD;EAAe,KAAK,EAAE3C,KAAK,CAAC2B,MAAN,CAAaiB,GAAnC;EAAwC,KAAK,EAAEU,MAAM,CAACT;AAAtD,EAFF,CADO,GAKL,IAdN,CADF;;AAmBA,MAAMW,aAAa,GAAG,CAAC;EAACC,KAAD;EAAQC;AAAR,CAAD,KAAuC;EAC3D,MAAMC,eAAe,GAAG9D,kBAAkB,EAA1C;EACA,MAAM,CAAC+D,UAAD,EAAaC,aAAb,IAA8BzE,QAAQ,CAAwB,IAAxB,CAA5C;EACA,MAAM;IAACY;EAAD,IAAU2D,eAAhB;EAEAtE,SAAS,CAAC,MAAM;IACd,MAAMyE,WAAW,GAAG/D,gBAAgB,CAACC,KAAD,CAApC;;IACA6D,aAAa,CAACC,WAAD,CAAb;EACD,CAHQ,EAGN,CAAC9D,KAAD,CAHM,CAAT;;EAKA,IAAI,CAAC4D,UAAL,EAAiB;IACf,OAAO,IAAP;EACD;;EAED,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEA,UAAU,CAAC1D;EAAxB,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAE0D,UAAU,CAACzC;EAAxB,GACG1B,QAAQ,CAACiC,EAAT,KAAgB,KAAhB,gBACC,oBAAC,QAAD;IAAU,KAAK,EAAEkC,UAAU,CAAC7C,IAA5B;IAAkC,UAAU,EAAE,EAA9C;IAAkD,QAAQ,EAAC;EAA3D,EADD,GAEG,IAHN,EAIG0C,KAAK,CAACM,GAAN,CAAU,CAACC,IAAD,EAAOC,KAAP,KAAiB;IAC1B,MAAMC,WAAW,GAAGF,IAAI,CAACG,MAAzB;IACA,oBACE,oBAAC,MAAD;MACE,GAAG,EAAG,UAASH,IAAI,CAACI,KAAM,EAD5B;MAEE,KAAK,EAAEJ,IAAI,CAACI,KAFd;MAGE,IAAI,EAAEJ,IAAI,CAACK,IAHb;MAIE,OAAO,EAAEH,WAJX;MAKE,QAAQ,EAAED,KAAK,KAAKP,iBALtB;MAME,MAAM,EAAG,oBAAmBO,KAAM,EANpC;MAOE,MAAM,EAAEL,UAPV;MAQE,KAAK,EAAE5D;IART,EADF;EAYD,CAdA,CAJH,CADF,CADF;AAwBD,CAtCD;;AAwCA,eAAewD,aAAf"}
@@ -25,12 +25,13 @@ export interface Props {
25
25
  selectedItemIndex: number;
26
26
  }
27
27
  declare type StyleSheetType = {
28
- main: ViewStyle;
29
28
  container: ViewStyle;
29
+ navbar: ViewStyle;
30
+ blur: ViewStyle;
30
31
  button: ViewStyle;
31
32
  buttonText: TextStyle;
32
33
  dot: ViewStyle;
33
- blur: ViewStyle;
34
+ dotShadow: ViewStyle;
34
35
  };
35
36
  declare const NavigationBar: ({ items, selectedItemIndex }: Props) => JSX.Element | null;
36
37
  export default NavigationBar;
@@ -1 +1 @@
1
- {"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/mobile-navigation/index.native.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAsB,EAAE,EAAC,MAAM,OAAO,CAAC;AACrD,OAAO,EAIL,SAAS,EACT,SAAS,EACT,qBAAqB,EAEtB,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAC,KAAK,EAAC,MAAM,8BAA8B,CAAC;AAEnD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IAC1D,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD;AAED,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,MAAM,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,aAAK,cAAc,GAAG;IACpB,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC;IACtB,GAAG,EAAE,SAAS,CAAC;IACf,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAsEF,QAAA,MAAM,aAAa,iCAAgC,KAAK,uBA0CvD,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/mobile-navigation/index.native.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAsB,EAAE,EAAC,MAAM,OAAO,CAAC;AACrD,OAAO,EAIL,SAAS,EACT,SAAS,EACT,qBAAqB,EAEtB,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAC,KAAK,EAAC,MAAM,8BAA8B,CAAC;AAEnD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,EAAE,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC,CAAC;IAC1D,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACjD;AAED,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,MAAM,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAC1B,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,aAAK,cAAc,GAAG;IACpB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC;IACtB,GAAG,EAAE,SAAS,CAAC;IACf,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAuFF,QAAA,MAAM,aAAa,iCAAgC,KAAK,uBAsCvD,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -22,25 +22,43 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
22
22
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
23
 
24
24
  const createStyleSheet = theme => _reactNative.StyleSheet.create({
25
- main: {
26
- marginHorizontal: 20
27
- },
28
25
  container: {
29
26
  position: 'absolute',
30
- bottom: 34,
27
+ bottom: 0,
28
+ paddingTop: 10,
29
+ paddingBottom: 34,
30
+ paddingHorizontal: 20,
31
31
  width: '100%',
32
+ shadowColor: '#000',
33
+ shadowOffset: {
34
+ width: 0,
35
+ height: 2
36
+ },
37
+ shadowOpacity: 0.15,
38
+ shadowRadius: 3,
39
+ elevation: 4
40
+ },
41
+ blur: {
42
+ position: 'absolute',
43
+ top: 0,
44
+ bottom: 0,
45
+ left: 0,
46
+ right: 0
47
+ },
48
+ navbar: {
32
49
  flexDirection: 'row',
33
50
  justifyContent: 'space-between',
34
51
  alignSelf: 'center',
35
52
  overflow: 'hidden',
36
53
  height: 66,
37
54
  borderRadius: 12,
38
- backgroundColor: theme.colors.gray.light
55
+ backgroundColor: _reactNative.Platform.OS === 'ios' ? theme.colors.gray.light : '#edededee'
39
56
  },
40
57
  button: {
41
58
  alignItems: 'center',
42
59
  flex: 1,
43
60
  height: '100%',
61
+ maxWidth: 110,
44
62
  marginTop: theme.spacing.small
45
63
  },
46
64
  buttonText: {
@@ -58,7 +76,7 @@ const createStyleSheet = theme => _reactNative.StyleSheet.create({
58
76
  position: 'absolute',
59
77
  alignSelf: 'center'
60
78
  },
61
- blur: {
79
+ dotShadow: {
62
80
  marginTop: -87,
63
81
  width: 200,
64
82
  height: 100,
@@ -98,7 +116,7 @@ const Button = ({
98
116
  style: styles.dot
99
117
  }), /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationNavBar, {
100
118
  color: theme.colors.cta,
101
- style: styles.blur
119
+ style: styles.dotShadow
102
120
  })) : null);
103
121
 
104
122
  const NavigationBar = ({
@@ -121,14 +139,14 @@ const NavigationBar = ({
121
139
  }
122
140
 
123
141
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
124
- style: styleSheet.main
125
- }, _reactNative.Platform.OS === 'ios' ? /*#__PURE__*/_react.default.createElement(_blur.BlurView, {
126
- style: styleSheet.container,
127
- blurAmount: 32,
128
- reducedTransparencyFallbackColor: "rgba(17, 17, 23, 0.5)"
129
- }) : null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
130
142
  style: styleSheet.container
131
- }, items.map((prop, index) => {
143
+ }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
144
+ style: styleSheet.navbar
145
+ }, _reactNative.Platform.OS === 'ios' ? /*#__PURE__*/_react.default.createElement(_blur.BlurView, {
146
+ style: styleSheet.blur,
147
+ blurAmount: 75,
148
+ blurType: "xlight"
149
+ }) : null, items.map((prop, index) => {
132
150
  const handlePress = prop.action;
133
151
  return /*#__PURE__*/_react.default.createElement(Button, {
134
152
  key: `button-${prop.label}`,
@@ -1 +1 @@
1
- {"version":3,"file":"index.native.js","names":["createStyleSheet","theme","StyleSheet","create","main","marginHorizontal","container","position","bottom","width","flexDirection","justifyContent","alignSelf","overflow","height","borderRadius","backgroundColor","colors","gray","light","button","alignItems","flex","marginTop","spacing","small","buttonText","fontSize","lineHeight","color","text","primary","dot","cta","blur","transform","rotateX","scaleX","Button","testID","title","selected","Icon","styles","onPress","NavigationBar","items","selectedItemIndex","templateContext","useTemplateContext","styleSheet","setStylesheet","useState","useEffect","_stylesheet","Platform","OS","map","prop","index","handlePress","action","label","icon"],"sources":["../../../src/organism/mobile-navigation/index.native.tsx"],"sourcesContent":["import React, {useState, useEffect, FC} from 'react';\nimport {\n View,\n StyleSheet,\n Text,\n ViewStyle,\n TextStyle,\n GestureResponderEvent,\n Platform\n} from 'react-native';\nimport {BlurView} from '@react-native-community/blur';\n\nimport {NovaCompositionNavigationNavBar as BlurredShadow} from '@coorpacademy/nova-icons';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {Theme} from '../../variables/theme.native';\n\ninterface ButtonProps {\n title: string;\n testID: string;\n selected: boolean;\n Icon: FC<{height: number; width: number; color?: string}>;\n styles: StyleSheetType;\n theme: Theme;\n onPress: (event: GestureResponderEvent) => void;\n}\n\nexport type NavItemType = {\n label: string;\n icon: ButtonProps['Icon'];\n action: (event: GestureResponderEvent) => void;\n};\n\nexport interface Props {\n testID?: string;\n items: Array<NavItemType>;\n selectedItemIndex: number;\n}\n\ntype StyleSheetType = {\n main: ViewStyle;\n container: ViewStyle;\n button: ViewStyle;\n buttonText: TextStyle;\n dot: ViewStyle;\n blur: ViewStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n StyleSheet.create({\n main: {\n marginHorizontal: 20\n },\n container: {\n position: 'absolute',\n bottom: 34,\n width: '100%',\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignSelf: 'center',\n overflow: 'hidden',\n height: 66,\n borderRadius: 12,\n backgroundColor: theme.colors.gray.light\n },\n button: {\n alignItems: 'center',\n flex: 1,\n height: '100%',\n marginTop: theme.spacing.small\n },\n buttonText: {\n fontSize: theme.fontSize.small,\n lineHeight: 26,\n // height: 11,\n color: theme.colors.text.primary\n },\n\n dot: {\n width: 8,\n height: 8,\n borderRadius: 8,\n backgroundColor: theme.colors.cta,\n marginTop: 3,\n position: 'absolute',\n alignSelf: 'center'\n },\n blur: {\n marginTop: -87,\n width: 200,\n height: 100,\n position: 'absolute',\n alignSelf: 'center',\n transform: [{rotateX: '180deg'}, {scaleX: 0.7}]\n }\n });\n\nconst Button = ({testID, title, selected, Icon, styles, theme, onPress}: ButtonProps) => (\n <Touchable testID={testID} style={styles.button} onPress={onPress}>\n <View style={{alignItems: 'center'}}>\n <Icon\n height={16}\n width={16}\n color={selected ? theme.colors.cta : theme.colors.text.primary}\n />\n <Text style={styles.buttonText}>{title}</Text>\n </View>\n {selected ? (\n <View>\n <View style={styles.dot} />\n <BlurredShadow color={theme.colors.cta} style={styles.blur} />\n </View>\n ) : null}\n </Touchable>\n);\n\nconst NavigationBar = ({items, selectedItemIndex}: Props) => {\n const templateContext = useTemplateContext();\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const {theme} = templateContext;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <View style={styleSheet.main}>\n {Platform.OS === 'ios' ? (\n <BlurView\n style={styleSheet.container}\n blurAmount={32}\n reducedTransparencyFallbackColor=\"rgba(17, 17, 23, 0.5)\"\n />\n ) : null}\n <View style={styleSheet.container}>\n {items.map((prop, index) => {\n const handlePress = prop.action;\n return (\n <Button\n key={`button-${prop.label}`}\n title={prop.label}\n Icon={prop.icon}\n onPress={handlePress}\n selected={index === selectedItemIndex}\n testID={`navigationButton_${index}`}\n styles={styleSheet}\n theme={theme}\n />\n );\n })}\n </View>\n </View>\n );\n};\n\nexport default NavigationBar;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.native.js","names":["createStyleSheet","theme","StyleSheet","create","container","position","bottom","paddingTop","paddingBottom","paddingHorizontal","width","shadowColor","shadowOffset","height","shadowOpacity","shadowRadius","elevation","blur","top","left","right","navbar","flexDirection","justifyContent","alignSelf","overflow","borderRadius","backgroundColor","Platform","OS","colors","gray","light","button","alignItems","flex","maxWidth","marginTop","spacing","small","buttonText","fontSize","lineHeight","color","text","primary","dot","cta","dotShadow","transform","rotateX","scaleX","Button","testID","title","selected","Icon","styles","onPress","NavigationBar","items","selectedItemIndex","templateContext","useTemplateContext","styleSheet","setStylesheet","useState","useEffect","_stylesheet","map","prop","index","handlePress","action","label","icon"],"sources":["../../../src/organism/mobile-navigation/index.native.tsx"],"sourcesContent":["import React, {useState, useEffect, FC} from 'react';\nimport {\n View,\n StyleSheet,\n Text,\n ViewStyle,\n TextStyle,\n GestureResponderEvent,\n Platform\n} from 'react-native';\nimport {BlurView} from '@react-native-community/blur';\n\nimport {NovaCompositionNavigationNavBar as BlurredShadow} from '@coorpacademy/nova-icons';\n\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {Theme} from '../../variables/theme.native';\n\ninterface ButtonProps {\n title: string;\n testID: string;\n selected: boolean;\n Icon: FC<{height: number; width: number; color?: string}>;\n styles: StyleSheetType;\n theme: Theme;\n onPress: (event: GestureResponderEvent) => void;\n}\n\nexport type NavItemType = {\n label: string;\n icon: ButtonProps['Icon'];\n action: (event: GestureResponderEvent) => void;\n};\n\nexport interface Props {\n testID?: string;\n items: Array<NavItemType>;\n selectedItemIndex: number;\n}\n\ntype StyleSheetType = {\n container: ViewStyle;\n navbar: ViewStyle;\n blur: ViewStyle;\n button: ViewStyle;\n buttonText: TextStyle;\n dot: ViewStyle;\n dotShadow: ViewStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n StyleSheet.create({\n container: {\n position: 'absolute',\n bottom: 0,\n paddingTop: 10,\n paddingBottom: 34,\n paddingHorizontal: 20,\n width: '100%',\n shadowColor: '#000',\n shadowOffset: {\n width: 0,\n height: 2\n },\n shadowOpacity: 0.15,\n shadowRadius: 3,\n elevation: 4\n },\n blur: {\n position: 'absolute',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0\n },\n navbar: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignSelf: 'center',\n overflow: 'hidden',\n height: 66,\n borderRadius: 12,\n backgroundColor: Platform.OS === 'ios' ? theme.colors.gray.light : '#edededee'\n },\n button: {\n alignItems: 'center',\n flex: 1,\n height: '100%',\n maxWidth: 110,\n marginTop: theme.spacing.small\n },\n buttonText: {\n fontSize: theme.fontSize.small,\n lineHeight: 26,\n // height: 11,\n color: theme.colors.text.primary\n },\n dot: {\n width: 8,\n height: 8,\n borderRadius: 8,\n backgroundColor: theme.colors.cta,\n marginTop: 3,\n position: 'absolute',\n alignSelf: 'center'\n },\n dotShadow: {\n marginTop: -87,\n width: 200,\n height: 100,\n position: 'absolute',\n alignSelf: 'center',\n transform: [{rotateX: '180deg'}, {scaleX: 0.7}]\n }\n });\n\nconst Button = ({testID, title, selected, Icon, styles, theme, onPress}: ButtonProps) => (\n <Touchable testID={testID} style={styles.button} onPress={onPress}>\n <View style={{alignItems: 'center'}}>\n <Icon\n height={16}\n width={16}\n color={selected ? theme.colors.cta : theme.colors.text.primary}\n />\n <Text style={styles.buttonText}>{title}</Text>\n </View>\n {selected ? (\n <View>\n <View style={styles.dot} />\n <BlurredShadow color={theme.colors.cta} style={styles.dotShadow} />\n </View>\n ) : null}\n </Touchable>\n);\n\nconst NavigationBar = ({items, selectedItemIndex}: Props) => {\n const templateContext = useTemplateContext();\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const {theme} = templateContext;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <View style={styleSheet.container}>\n <View style={styleSheet.navbar}>\n {Platform.OS === 'ios' ? (\n <BlurView style={styleSheet.blur} blurAmount={75} blurType=\"xlight\" />\n ) : null}\n {items.map((prop, index) => {\n const handlePress = prop.action;\n return (\n <Button\n key={`button-${prop.label}`}\n title={prop.label}\n Icon={prop.icon}\n onPress={handlePress}\n selected={index === selectedItemIndex}\n testID={`navigationButton_${index}`}\n styles={styleSheet}\n theme={theme}\n />\n );\n })}\n </View>\n </View>\n );\n};\n\nexport default NavigationBar;\n"],"mappings":"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"}
@@ -0,0 +1 @@
1
+ {"ignore_dirs":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coorpacademy/components",
3
- "version": "11.5.1",
3
+ "version": "11.5.2",
4
4
  "description": "",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -159,6 +159,5 @@
159
159
  "browserslist": [
160
160
  "last 2 versions",
161
161
  "IE 11"
162
- ],
163
- "gitHead": "6b28ff594cef71a502447610d0c105080b872a86"
162
+ ]
164
163
  }
@@ -1,45 +0,0 @@
1
- .container {
2
- width: 300px;
3
- height: 300px;
4
- position: relative;
5
- perspective: 800px;
6
- }
7
-
8
- .square {
9
- position: absolute;
10
- width: 100%;
11
- height: 100%;
12
- transform-style: preserve-3d;
13
- transition: transform 1s;
14
- border: 1px solid black;
15
- top: 100px;
16
- left: 100px;
17
- }
18
-
19
- .flipped > .square {
20
- transform: rotateY(180deg);
21
- }
22
-
23
- .front,
24
- .back {
25
- margin: 0;
26
- display: block;
27
- position: absolute;
28
- width: 100%;
29
- height: 100%;
30
- backface-visibility: hidden;
31
- }
32
-
33
- .front {
34
- font-size: 20px;
35
- display: flex;
36
- align-items: center;
37
- justify-content: center;
38
- flex-flow: column;
39
- }
40
-
41
- .back {
42
- background-image: url(http://img.voi.pmdstatic.net/fit/http.3A.2F.2Fprd2-bone-image.2Es3-website-eu-west-1.2Eamazonaws.2Ecom.2Fprismamedia_people.2F2017.2F06.2F30.2Fa9a1132c-920d-4d0d-af0c-7c686d72dfe5.2Ejpeg/380x285/quality/80/jacques-chirac.jpg);
43
- background-size: cover;
44
- transform: rotateY(180deg);
45
- }
@@ -1,211 +0,0 @@
1
- # Snapshot report for `src/molecule/select-multiple/test/index.js`
2
-
3
- The actual snapshot is saved in `index.js.snap`.
4
-
5
- Generated by [AVA](https://ava.li).
6
-
7
- ## should shallow render when select is opened
8
-
9
- > Snapshot 1
10
-
11
- ShallowWrapper {
12
- <div
13
- className="select-multiple__default variables__defaultText"
14
- >
15
- <span
16
- className="select-multiple__title"
17
- >
18
- Learning Path:
19
- </span>
20
- <div
21
- className="select-multiple__select"
22
- onClick={Function {}}
23
- title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut"
24
- >
25
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
26
- <SvgComponent⍟
27
- className="select-multiple__arrow select-multiple__down"
28
- color={undefined}
29
- />
30
- </div>
31
- <div
32
- className="select-multiple__activeChoices"
33
- >
34
- <ul
35
- className="select-multiple__list"
36
- >
37
- <li
38
- className="select-multiple__choice"
39
- key="0"
40
- >
41
- <TitledCheckbox⍟
42
- background={undefined}
43
- choice={
44
- {
45
- i: 0,
46
- name: 'Digital',
47
- selected: false,
48
- value: 'digital',
49
- }
50
- }
51
- onToggle={Function {}}
52
- />
53
- </li>
54
- <li
55
- className="select-multiple__choice"
56
- key="1"
57
- >
58
- <TitledCheckbox⍟
59
- background={undefined}
60
- choice={
61
- {
62
- i: 1,
63
- name: 'Esprit du temps',
64
- selected: false,
65
- value: 'espritDuTemps',
66
- }
67
- }
68
- onToggle={Function {}}
69
- />
70
- </li>
71
- <li
72
- className="select-multiple__choice"
73
- key="2"
74
- >
75
- <TitledCheckbox⍟
76
- background={undefined}
77
- choice={
78
- {
79
- i: 2,
80
- name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut',
81
- selected: true,
82
- value: 'loremIpsum',
83
- }
84
- }
85
- onToggle={Function {}}
86
- />
87
- </li>
88
- <li
89
- className="select-multiple__choice"
90
- key="3"
91
- >
92
- <TitledCheckbox⍟
93
- background={undefined}
94
- choice={
95
- {
96
- i: 3,
97
- name: 'Le monde du projet',
98
- selected: false,
99
- value: 'project',
100
- }
101
- }
102
- onToggle={Function {}}
103
- />
104
- </li>
105
- </ul>
106
- </div>
107
- </div>,
108
- }
109
-
110
- ## should shallow render with default props
111
-
112
- > Snapshot 1
113
-
114
- ShallowWrapper {
115
- <div
116
- className="select-multiple__default variables__defaultText"
117
- >
118
- <span
119
- className="select-multiple__title"
120
- >
121
- Learning Path:
122
- </span>
123
- <div
124
- className="select-multiple__select"
125
- onClick={Function {}}
126
- title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut"
127
- >
128
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
129
- <SvgComponent⍟
130
- className="select-multiple__arrow"
131
- color={undefined}
132
- />
133
- </div>
134
- <div
135
- className="select-multiple__choices"
136
- >
137
- <ul
138
- className="select-multiple__list"
139
- >
140
- <li
141
- className="select-multiple__choice"
142
- key="0"
143
- >
144
- <TitledCheckbox⍟
145
- background={undefined}
146
- choice={
147
- {
148
- i: 0,
149
- name: 'Digital',
150
- selected: false,
151
- value: 'digital',
152
- }
153
- }
154
- onToggle={Function {}}
155
- />
156
- </li>
157
- <li
158
- className="select-multiple__choice"
159
- key="1"
160
- >
161
- <TitledCheckbox⍟
162
- background={undefined}
163
- choice={
164
- {
165
- i: 1,
166
- name: 'Esprit du temps',
167
- selected: false,
168
- value: 'espritDuTemps',
169
- }
170
- }
171
- onToggle={Function {}}
172
- />
173
- </li>
174
- <li
175
- className="select-multiple__choice"
176
- key="2"
177
- >
178
- <TitledCheckbox⍟
179
- background={undefined}
180
- choice={
181
- {
182
- i: 2,
183
- name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut',
184
- selected: true,
185
- value: 'loremIpsum',
186
- }
187
- }
188
- onToggle={Function {}}
189
- />
190
- </li>
191
- <li
192
- className="select-multiple__choice"
193
- key="3"
194
- >
195
- <TitledCheckbox⍟
196
- background={undefined}
197
- choice={
198
- {
199
- i: 3,
200
- name: 'Le monde du projet',
201
- selected: false,
202
- value: 'project',
203
- }
204
- }
205
- onToggle={Function {}}
206
- />
207
- </li>
208
- </ul>
209
- </div>
210
- </div>,
211
- }
@@ -1,34 +0,0 @@
1
- [{
2
- "label": "1mn",
3
- "value": 1
4
- }, {
5
- "label": "2mn",
6
- "value": 2
7
- }, {
8
- "label": "3mn",
9
- "value": 3
10
- }, {
11
- "label": "5mn",
12
- "value": 5
13
- }, {
14
- "label": "10mn",
15
- "value": 10
16
- }, {
17
- "label": "15mn",
18
- "value": 15
19
- }, {
20
- "label": "30mn",
21
- "value": 30
22
- }, {
23
- "label": "45mn",
24
- "value": 45
25
- }, {
26
- "label": "1h",
27
- "value": 60
28
- }, {
29
- "label": "2h",
30
- "value": 120
31
- }, {
32
- "label": "2h+",
33
- "value": 121
34
- }]
@@ -1,45 +0,0 @@
1
- .container {
2
- width: 300px;
3
- height: 300px;
4
- position: relative;
5
- perspective: 800px;
6
- }
7
-
8
- .square {
9
- position: absolute;
10
- width: 100%;
11
- height: 100%;
12
- transform-style: preserve-3d;
13
- transition: transform 1s;
14
- border: 1px solid black;
15
- top: 100px;
16
- left: 100px;
17
- }
18
-
19
- .flipped > .square {
20
- transform: rotateY(180deg);
21
- }
22
-
23
- .front,
24
- .back {
25
- margin: 0;
26
- display: block;
27
- position: absolute;
28
- width: 100%;
29
- height: 100%;
30
- backface-visibility: hidden;
31
- }
32
-
33
- .front {
34
- font-size: 20px;
35
- display: flex;
36
- align-items: center;
37
- justify-content: center;
38
- flex-flow: column;
39
- }
40
-
41
- .back {
42
- background-image: url(http://img.voi.pmdstatic.net/fit/http.3A.2F.2Fprd2-bone-image.2Es3-website-eu-west-1.2Eamazonaws.2Ecom.2Fprismamedia_people.2F2017.2F06.2F30.2Fa9a1132c-920d-4d0d-af0c-7c686d72dfe5.2Ejpeg/380x285/quality/80/jacques-chirac.jpg);
43
- background-size: cover;
44
- transform: rotateY(180deg);
45
- }
@@ -1,211 +0,0 @@
1
- # Snapshot report for `src/molecule/select-multiple/test/index.js`
2
-
3
- The actual snapshot is saved in `index.js.snap`.
4
-
5
- Generated by [AVA](https://ava.li).
6
-
7
- ## should shallow render when select is opened
8
-
9
- > Snapshot 1
10
-
11
- ShallowWrapper {
12
- <div
13
- className="select-multiple__default variables__defaultText"
14
- >
15
- <span
16
- className="select-multiple__title"
17
- >
18
- Learning Path:
19
- </span>
20
- <div
21
- className="select-multiple__select"
22
- onClick={Function {}}
23
- title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut"
24
- >
25
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
26
- <SvgComponent⍟
27
- className="select-multiple__arrow select-multiple__down"
28
- color={undefined}
29
- />
30
- </div>
31
- <div
32
- className="select-multiple__activeChoices"
33
- >
34
- <ul
35
- className="select-multiple__list"
36
- >
37
- <li
38
- className="select-multiple__choice"
39
- key="0"
40
- >
41
- <TitledCheckbox⍟
42
- background={undefined}
43
- choice={
44
- {
45
- i: 0,
46
- name: 'Digital',
47
- selected: false,
48
- value: 'digital',
49
- }
50
- }
51
- onToggle={Function {}}
52
- />
53
- </li>
54
- <li
55
- className="select-multiple__choice"
56
- key="1"
57
- >
58
- <TitledCheckbox⍟
59
- background={undefined}
60
- choice={
61
- {
62
- i: 1,
63
- name: 'Esprit du temps',
64
- selected: false,
65
- value: 'espritDuTemps',
66
- }
67
- }
68
- onToggle={Function {}}
69
- />
70
- </li>
71
- <li
72
- className="select-multiple__choice"
73
- key="2"
74
- >
75
- <TitledCheckbox⍟
76
- background={undefined}
77
- choice={
78
- {
79
- i: 2,
80
- name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut',
81
- selected: true,
82
- value: 'loremIpsum',
83
- }
84
- }
85
- onToggle={Function {}}
86
- />
87
- </li>
88
- <li
89
- className="select-multiple__choice"
90
- key="3"
91
- >
92
- <TitledCheckbox⍟
93
- background={undefined}
94
- choice={
95
- {
96
- i: 3,
97
- name: 'Le monde du projet',
98
- selected: false,
99
- value: 'project',
100
- }
101
- }
102
- onToggle={Function {}}
103
- />
104
- </li>
105
- </ul>
106
- </div>
107
- </div>,
108
- }
109
-
110
- ## should shallow render with default props
111
-
112
- > Snapshot 1
113
-
114
- ShallowWrapper {
115
- <div
116
- className="select-multiple__default variables__defaultText"
117
- >
118
- <span
119
- className="select-multiple__title"
120
- >
121
- Learning Path:
122
- </span>
123
- <div
124
- className="select-multiple__select"
125
- onClick={Function {}}
126
- title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut"
127
- >
128
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
129
- <SvgComponent⍟
130
- className="select-multiple__arrow"
131
- color={undefined}
132
- />
133
- </div>
134
- <div
135
- className="select-multiple__choices"
136
- >
137
- <ul
138
- className="select-multiple__list"
139
- >
140
- <li
141
- className="select-multiple__choice"
142
- key="0"
143
- >
144
- <TitledCheckbox⍟
145
- background={undefined}
146
- choice={
147
- {
148
- i: 0,
149
- name: 'Digital',
150
- selected: false,
151
- value: 'digital',
152
- }
153
- }
154
- onToggle={Function {}}
155
- />
156
- </li>
157
- <li
158
- className="select-multiple__choice"
159
- key="1"
160
- >
161
- <TitledCheckbox⍟
162
- background={undefined}
163
- choice={
164
- {
165
- i: 1,
166
- name: 'Esprit du temps',
167
- selected: false,
168
- value: 'espritDuTemps',
169
- }
170
- }
171
- onToggle={Function {}}
172
- />
173
- </li>
174
- <li
175
- className="select-multiple__choice"
176
- key="2"
177
- >
178
- <TitledCheckbox⍟
179
- background={undefined}
180
- choice={
181
- {
182
- i: 2,
183
- name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut',
184
- selected: true,
185
- value: 'loremIpsum',
186
- }
187
- }
188
- onToggle={Function {}}
189
- />
190
- </li>
191
- <li
192
- className="select-multiple__choice"
193
- key="3"
194
- >
195
- <TitledCheckbox⍟
196
- background={undefined}
197
- choice={
198
- {
199
- i: 3,
200
- name: 'Le monde du projet',
201
- selected: false,
202
- value: 'project',
203
- }
204
- }
205
- onToggle={Function {}}
206
- />
207
- </li>
208
- </ul>
209
- </div>
210
- </div>,
211
- }
@@ -1,34 +0,0 @@
1
- [{
2
- "label": "1mn",
3
- "value": 1
4
- }, {
5
- "label": "2mn",
6
- "value": 2
7
- }, {
8
- "label": "3mn",
9
- "value": 3
10
- }, {
11
- "label": "5mn",
12
- "value": 5
13
- }, {
14
- "label": "10mn",
15
- "value": 10
16
- }, {
17
- "label": "15mn",
18
- "value": 15
19
- }, {
20
- "label": "30mn",
21
- "value": 30
22
- }, {
23
- "label": "45mn",
24
- "value": 45
25
- }, {
26
- "label": "1h",
27
- "value": 60
28
- }, {
29
- "label": "2h",
30
- "value": 120
31
- }, {
32
- "label": "2h+",
33
- "value": 121
34
- }]