Last active
January 29, 2019 18:22
-
-
Save leviyehonatan/71133b02767b780d2b79d9f00a81e1f6 to your computer and use it in GitHub Desktop.
my problem with flatlist overflow
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Animated, Dimensions, NativeModules, Platform, StyleSheet} from 'react-native'; | |
| import {formStyle} from './forms'; | |
| import {FEED} from './app'; | |
| import DeviceInfo from 'react-native-device-info'; | |
| import * as config from '../config'; | |
| const { StatusBarManager } = NativeModules; | |
| const WIDTH = Dimensions.get('window').width; | |
| const HEIGHT = Dimensions.get('window').height; | |
| function isTablet(ratio){ | |
| return (ratio < 1.6); | |
| } | |
| export const SIZES = { | |
| radioSmall: 6, | |
| radioBig: 24, | |
| radioRadius:18, | |
| radioWidth:2, | |
| radioSmallRadius:3, | |
| radioSmallWidth:4, | |
| radioInnerLarge: 14, | |
| radioInnerRadius: 7, | |
| imageAssementSize: 115, | |
| graphWidth: WIDTH * 0.9, | |
| graphFooterHeight: 30, | |
| graphRowHeight: 30, | |
| graphTitlesColumnWidth: WIDTH * 0.12, | |
| androidTabBarHeight: 56, | |
| iosTabBarHeight: 50, | |
| contentMarginFromSides: 20, | |
| mediaSliderHeight: 60, | |
| taskHeaderHeight: 50, | |
| moduleItemDisplayHeight: 255, | |
| loadingIndicatorSmall: { flex: 2 }, | |
| loadingIndicatorBig: { flex: 5 }, | |
| borderRadiusCircle: Math.round((WIDTH + HEIGHT) / 2), | |
| breathingCircleDiameter: Math.round(WIDTH * 0.42), | |
| portraitVideoWrapper: { width: WIDTH - 64, height: Math.round((WIDTH - 64) * 9 / 16 ) } //aspect ration of video is 16/9, 64 = 12*2 (task card padding) + 20*2 (task content marginHorizontal) | |
| }; | |
| export const DEVICE = { | |
| WIDTH: WIDTH, | |
| HEIGHT: HEIGHT, | |
| STATUSBAR: (Platform.OS === 'ios') ? 23 : StatusBarManager.HEIGHT, | |
| KEYBOARD: new Animated.Value(0), | |
| ISTABLET : isTablet(HEIGHT/WIDTH), | |
| TASK_CARD_HEIGHT_IOS : HEIGHT - (SIZES.taskHeaderHeight + 30), | |
| TASK_CARD_HEIGHT_ANDROID : HEIGHT - (SIZES.taskHeaderHeight + 55), | |
| FULL_CARD_HEIGHT_IOS : HEIGHT - 45, | |
| FULL_CARD_HEIGHT_ANDROID : HEIGHT - 60, | |
| HEADERED_CARD_HEIGHT_IOS : HEIGHT - 110, | |
| HEADERED_CARD_HEIGHT_ANDROID : HEIGHT - 60 - 60, | |
| MODEL: DeviceInfo.getModel(), | |
| IS_SPECIAL_DEVICE_SIZE: () => { | |
| return config.SPECIAL_DEVICES_SIZES.includes(DEVICE.MODEL); | |
| }, | |
| }; | |
| export const FONT = { | |
| FAMILY : { | |
| 'NORMAL': 'Lato-Regular', | |
| 'REGULAR': 'Lato-Light', | |
| 'BOLD': 'Lato-Bold', | |
| 'BLACK': 'Lato-Black', | |
| }, | |
| }; | |
| export const COLORS = { | |
| 'BLACK' : '#000000', | |
| 'BACKGROUND_TASK' : '#F6F7FA', | |
| 'BATTLESHIPGREY' : '#727580', | |
| 'BACKGROUND_PAGE': '#F5F5F5', | |
| 'COOLGREY' : '#B3B7BE', | |
| 'FADEDBLUE' : '#848CD1', | |
| 'FLATBLUE' : '#3188A0', | |
| 'NORMALBLUE' : '#3e65cf', | |
| 'PALEGREY' : '#DEE1E6', | |
| 'RUSTYORANGE' : '#D16B0F', | |
| 'ENVIRONMENTGREEN': '#66C3B6', | |
| 'SEA' : '#359688', | |
| 'SEAFOAMBLUE' : '#69B9D3', | |
| 'MORNING': '#6EB9D4', | |
| 'SLATE' : '#414C5C', | |
| 'GRAY_DARK': '#757575', | |
| 'STEELBLUE' : '#5B63A6', | |
| 'TANGERINE' : '#FF9600', | |
| 'WHITE': '#FFFFFF', | |
| 'WHITETWO' : '#F3F3F3', | |
| 'ANOTHERGRAY' : '#F2F2F2', | |
| 'RADIO_WHITE': '#e0e0e0', | |
| 'RED' : '#EA5050', | |
| 'GREEN' : '#94D42E', | |
| 'FACEBOOK_BLUE' : '#3363b3', | |
| 'ERROR' : '#a94442', | |
| 'RADIO_BORDER': '#e0e0e0', | |
| 'WHITEOPAQUE' : 'rgba(255, 255, 255, 0.6)', | |
| 'WHITETWOOPAUE' : 'rgba(243, 243, 243, 0.8)', | |
| 'BLACKOPAQUE' : 'rgba(0, 0, 0, 0.3)', | |
| 'BLACKOPAQUE_MID' : 'rgba(0, 0, 0, 0.35)', | |
| }; | |
| export const CONTAINERS = StyleSheet.create({ | |
| TEXT_INPUT_ANDROID_MARGIN_BOTTOM: { | |
| marginBottom: Platform.OS === 'ios' ? 0 : 8 | |
| }, | |
| FULL_CARD_BACKGROUND_VIEW : { | |
| flex: 1, | |
| width: DEVICE.WIDTH, | |
| height: DEVICE.HEIGHT, | |
| backgroundColor: COLORS.WHITETWO, | |
| padding: 12, | |
| paddingTop: Platform.OS === 'ios' ? 20 : 12 | |
| }, | |
| SHADOWED_CARD_VIEW : { | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { | |
| width: 0, | |
| height: 2 | |
| }, | |
| shadowRadius: 19, | |
| shadowOpacity: 0.16, | |
| elevation: 10, | |
| }, | |
| SHADOWED_ONGOING_VIEW : { | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { | |
| width: 0, | |
| height: 2 | |
| }, | |
| shadowRadius: 19, | |
| shadowOpacity: 0.3, | |
| elevation: 10, | |
| }, | |
| FULL_CARD_VIEW : { | |
| flex: 1, | |
| backgroundColor: COLORS.WHITE, | |
| borderRadius: 10, | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { width: 0, height: 3 }, | |
| shadowRadius: 5, | |
| shadowOpacity: 0.5, | |
| elevation: 10, | |
| height: Platform.OS === 'ios' ? DEVICE.FULL_CARD_HEIGHT_IOS : DEVICE.FULL_CARD_HEIGHT_ANDROID | |
| }, | |
| HEADERED_CARD_BACKGROUND_VIEW : { | |
| width: DEVICE.WIDTH, | |
| height: Platform.OS === 'ios' ? DEVICE.FULL_CARD_HEIGHT_IOS : DEVICE.FULL_CARD_HEIGHT_ANDROID, | |
| backgroundColor: COLORS.WHITETWO, | |
| padding: 12, | |
| paddingTop: Platform.OS === 'ios' ? 20 : 12 | |
| }, | |
| HEADERED_CARD_VIEW : { | |
| backgroundColor: COLORS.WHITE, | |
| borderRadius: 10, | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { width: 0, height: 3 }, | |
| shadowRadius: 5, | |
| shadowOpacity: 0.5, | |
| elevation: 10, | |
| height: Platform.OS === 'ios' ? DEVICE.HEADERED_CARD_HEIGHT_IOS : DEVICE.HEADERED_CARD_HEIGHT_ANDROID | |
| }, | |
| ALIGN_CENTER: { | |
| alignItems: 'center' | |
| }, | |
| CONTENT_VIEW_NO_TOP: { | |
| marginHorizontal: 30, | |
| }, | |
| DETAILS_QUESTION: { | |
| marginTop:50, | |
| flexDirection: 'row', | |
| borderBottomWidth:1, | |
| }, | |
| FAKE_KYB: { | |
| height: DEVICE.HEIGHT, | |
| justifyContent: 'flex-end' | |
| }, | |
| FLEX_ONE_ALIGN_CENTER: { | |
| alignItems: 'center' | |
| }, | |
| HEADER_VIEW: { | |
| backgroundColor: COLORS.WHITE, | |
| flexDirection: 'row', | |
| justifyContent: 'space-between', | |
| alignItems: 'center', | |
| paddingTop: Platform.OS === 'ios' ? 30 : 20, | |
| paddingBottom: 15, | |
| paddingLeft: SIZES.contentMarginFromSides, | |
| paddingRight: SIZES.contentMarginFromSides, | |
| }, | |
| HEADER_VIEW_SPECIAL_DEVICE_SIZE: { | |
| backgroundColor: COLORS.WHITE, | |
| flexDirection: 'row', | |
| justifyContent: 'space-between', | |
| alignItems: 'center', | |
| paddingTop: 50, | |
| paddingBottom: 15, | |
| paddingLeft: SIZES.contentMarginFromSides, | |
| paddingRight: SIZES.contentMarginFromSides, | |
| }, | |
| HEADER_ICON_CONTAINER: { | |
| flex: 0.2, | |
| alignItems: 'center' | |
| }, | |
| POSTREG_ERROR: { | |
| marginTop: 5 | |
| }, | |
| END_TWENTY: { | |
| alignItems: 'flex-end', | |
| marginRight: 20 | |
| }, | |
| MAIN_COLUMN_WHITE: { | |
| flex: 1, | |
| justifyContent: 'space-between', | |
| paddingTop: (Platform.OS == 'ios') ? DEVICE.STATUSBAR : 0, | |
| backgroundColor: COLORS.WHITE, | |
| }, | |
| MARGINED_BOTTOM_ROW_BETWEEN: { | |
| flexDirection: 'row', | |
| justifyContent:'space-between', | |
| marginBottom: 20 | |
| }, | |
| MEDIA_SLIDER_VIEW: { | |
| width: DEVICE.WIDTH * 0.5, | |
| marginLeft: 10, | |
| marginRight: 10 | |
| }, | |
| MEDIA_PLAY_ICON_VIEW: { | |
| backgroundColor: COLORS.WHITE, | |
| borderRadius: 50, | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { width: 0, height: 3 }, | |
| shadowRadius: 5, | |
| shadowOpacity: 0.5, | |
| elevation: 10, | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| height: 40, | |
| width: 40 | |
| }, | |
| MESSAGE_CARD_VIEW: { | |
| borderRadius: 10, | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { width: 0, height: 3 }, | |
| shadowRadius: 5, | |
| shadowOpacity: 0.5, | |
| elevation: 10, | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| paddingTop: 60, | |
| paddingBottom: 20 | |
| }, | |
| MESSAGE_NUMBERS_VIEW: { | |
| flexDirection: 'row', | |
| alignItems: 'flex-end', | |
| }, | |
| MESSAGE_TEXT_VIEW: { | |
| marginTop: 20, | |
| marginBottom: 40, | |
| marginLeft: 50, | |
| marginRight: 50 | |
| }, | |
| MULTIPLE_ANSWERS_CONTAINER: { | |
| flexDirection:'column', | |
| justifyContent:'flex-start', | |
| }, | |
| MULTIPLE_ANSWERS: { | |
| flexDirection: 'row', | |
| marginTop: 20, | |
| }, | |
| MULTIPLE_ANSWERS_EMPTY: { | |
| backgroundColor: COLORS.ANOTHERGRAY, | |
| height: 20, | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| marginRight: 10, | |
| width: 20, | |
| }, | |
| MULTIPLE_ANSWERS_EMPTY_SQUARE_CONTAINER: { | |
| borderRadius: 5, | |
| }, | |
| MULTIPLE_ANSWERS_EMPTY_CIRCLE_CONTAINER: { | |
| borderRadius: 20, | |
| }, | |
| CHECKBOX_EMPTY_WRAPPER: { | |
| backgroundColor: COLORS.WHITE, | |
| height: 18, | |
| width: 18, | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| borderRadius: 5, | |
| borderWidth: 1.5, | |
| }, | |
| MYSLEEP_ITEM_CONTAINER: { | |
| flex: 1, | |
| }, | |
| MYSLEEP_BUTTON_VIEW: { | |
| borderColor: COLORS.SEAFOAMBLUE, | |
| borderRadius: 25, | |
| borderWidth: 2, | |
| padding: 5, | |
| paddingLeft: 8, | |
| paddingRight: 8, | |
| marginLeft: 15 | |
| }, | |
| MYSLEEP_DETAILS_VIEW: { | |
| flexDirection: 'row', | |
| marginTop: 10, | |
| alignItems: 'center' | |
| }, | |
| MYSLEEP_DETAILS_TEXT_WRAPPER: { | |
| flexDirection: 'row', | |
| marginLeft: 5, | |
| alignItems: 'flex-end', | |
| }, | |
| MYSLEEP_ICON_STYLE: { | |
| marginBottom: Platform.OS === 'ios' ? -7 : 0, | |
| }, | |
| MYSLEEP_TOOLTIP_CONTAINER: { | |
| position: 'absolute', | |
| top: 0, | |
| left: 5, | |
| right: 5, | |
| backgroundColor: COLORS.SLATE, | |
| borderRadius: 8, | |
| padding: 10, | |
| alignItems: 'center' | |
| }, | |
| SEPARATOR_LINE: { | |
| backgroundColor: 'rgba(151,151,151,0.1)', | |
| height: 2, | |
| width: DEVICE.WIDTH, | |
| marginTop: 5, | |
| marginBottom: 5 | |
| }, | |
| NOTIFICATION_ITEM_CONTAINER: { | |
| paddingBottom: 8, | |
| paddingTop: 8, | |
| paddingLeft: 16, | |
| paddingRight: 16, | |
| borderBottomWidth: 1, | |
| borderBottomColor: 'rgba(151,151,151,0.2)' | |
| }, | |
| NOTIFICATION_UNREAD_VIEW: { | |
| backgroundColor: COLORS.WHITE, | |
| borderRadius: 5, | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { width: 0, height: 3 }, | |
| shadowRadius: 5, | |
| shadowOpacity: 0.5, | |
| elevation: 10, | |
| }, | |
| REG_CARD_CONTENT: { | |
| marginHorizontal: 30, | |
| }, | |
| REG_ICON: { | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| marginRight: 15 | |
| }, | |
| ROW: { | |
| flexDirection: 'row' | |
| }, | |
| ROW_BETWEEN: { | |
| flexDirection: 'row', | |
| justifyContent: 'space-between' | |
| }, | |
| ROW_CENTER: { | |
| flexDirection: 'row', | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| }, | |
| SECONDARY_BUTTON_VIEW: { | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| }, | |
| SECONDARY_BUTTONS_ROW_VIEW: { | |
| flexDirection: 'row', | |
| justifyContent: 'space-between', | |
| alignItems: 'center', | |
| width: '100%' | |
| }, | |
| SECONDARY_BUTTON_TEXT_CONTAINER: { | |
| paddingBottom: 20, | |
| }, | |
| SUBMITTED_MODAL_CONTAINER: { | |
| height: DEVICE.HEIGHT, | |
| width: DEVICE.WIDTH, | |
| backgroundColor: COLORS.BLACKOPAQUE, | |
| justifyContent: 'center', | |
| alignItems: 'center' | |
| }, | |
| TABS_WRAPPER_VIEW: { | |
| height: DEVICE.HEIGHT, | |
| backgroundColor: COLORS.WHITETWO | |
| }, | |
| TABS_CONTAINER: { | |
| backgroundColor: COLORS.WHITETWO, | |
| flex:1, | |
| // marginBottom: 20, | |
| }, | |
| TAB_BAR_MARGIN: { | |
| marginBottom: Platform.OS === 'ios' ? SIZES.iosTabBarHeight : SIZES.androidTabBarHeight | |
| }, | |
| TASK_IMAGE_VIEW: { | |
| alignItems: 'center', | |
| marginBottom: 20, | |
| }, | |
| TASK_IMAGE_VIEW_RIGHT: { | |
| alignItems: 'flex-end', | |
| marginBottom: 20, | |
| }, | |
| TASK_QUESTION_VIEW: { | |
| padding: 20 | |
| }, | |
| TASK_TEXTANSWER_VIEW: { | |
| marginTop: 10, | |
| marginBottom: 10, | |
| paddingTop: 10, | |
| paddingBottom: 5, | |
| borderBottomWidth: 2 | |
| }, | |
| TASK_HEADER_BAR : { | |
| flexDirection: 'row', | |
| justifyContent: 'space-between', | |
| alignItems: 'center', | |
| padding: 8, | |
| marginTop: 5, | |
| height: SIZES.taskHeaderHeight | |
| }, | |
| TASK_CLOSE_ICON_CONTAINER: { | |
| flex: 0.2, | |
| alignItems: 'flex-end' | |
| }, | |
| TASK_SCROLL_VIEW_CONTAINER: { | |
| flexGrow: 1, | |
| justifyContent: 'space-between' | |
| }, | |
| TASK_CONTENT_WRAPPER: { | |
| flex: 1, | |
| backgroundColor: COLORS.WHITE, | |
| borderBottomStartRadius: 10, | |
| borderBottomEndRadius: 10, | |
| }, | |
| TASK_CONTENT_VIEW: { | |
| marginHorizontal: 20, | |
| marginTop: 30, | |
| }, | |
| TASK_FAVORITE_ICON_VIEW: { | |
| flex: 0.1, | |
| alignItems: 'flex-end' | |
| }, | |
| TASK_BUTTONS_BOTTOM: { | |
| flex: 1, | |
| justifyContent: 'flex-end', | |
| }, | |
| TASK_BACKGROUND_VIEW : { | |
| width: DEVICE.WIDTH, | |
| height: DEVICE.HEIGHT, | |
| backgroundColor: COLORS.WHITETWO, | |
| padding: 12, | |
| }, | |
| TASK_BACKGROUND_VIEW_SPECIAL_DEVICE_SIZE: { | |
| width: DEVICE.WIDTH, | |
| height: DEVICE.HEIGHT, | |
| backgroundColor: COLORS.WHITETWO, | |
| paddingBottom: 65, | |
| paddingTop: 24, | |
| paddingRight: 12, | |
| paddingLeft: 12 | |
| }, | |
| TASK_CARD_VIEW : { | |
| backgroundColor: COLORS.WHITE, | |
| borderRadius: 10, | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { width: 0, height: 3 }, | |
| shadowRadius: 5, | |
| shadowOpacity: 0.5, | |
| elevation: 10, | |
| height: Platform.OS === 'ios' ? DEVICE.TASK_CARD_HEIGHT_IOS : DEVICE.TASK_CARD_HEIGHT_ANDROID, | |
| }, | |
| TASK_CARD_VIEW_SPECIAL_DEVICE_SIZE : { | |
| backgroundColor: COLORS.WHITE, | |
| borderRadius: 10, | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { width: 0, height: 3 }, | |
| shadowRadius: 5, | |
| shadowOpacity: 0.5, | |
| elevation: 10, | |
| height: DEVICE.HEIGHT - (SIZES.taskHeaderHeight + 90), | |
| }, | |
| TASK_RATE_SUD_NUM_PADDING_CONTAINER: { | |
| paddingLeft: 16, | |
| paddingRight: 16, | |
| alignItems: 'center', | |
| justifyContent: 'center' | |
| }, | |
| TASK_RATE_SUD_SELECTED_VIEW: { | |
| backgroundColor: COLORS.WHITE, | |
| borderRadius: 50, | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { width: 0, height: 3 }, | |
| shadowRadius: 5, | |
| shadowOpacity: 0.5, | |
| elevation: 10, | |
| paddingBottom: 8, | |
| paddingTop: 8, | |
| }, | |
| TASK_RATE_SUD_UNSELECTED_VIEW: { | |
| paddingBottom: 14, | |
| paddingTop: 14, | |
| }, | |
| TASK_RATE_SUD_SLIDER_PADDING: { | |
| paddingLeft: 12, | |
| paddingRight: 12, | |
| }, | |
| TASK_ANIMATION_CONTENT_CONTAINER: { | |
| flex: 1, | |
| width: '100%', | |
| justifyContent: 'center', | |
| alignItems: 'center' | |
| }, | |
| STUB_TASK_PRACTICE_PROGRESS: { | |
| height: 10, | |
| width: '100%', | |
| backgroundColor: COLORS.WHITETWO, | |
| marginBottom: 10, | |
| flexDirection: 'row', | |
| alignItems: 'center', | |
| marginTop: 15, | |
| borderRadius: 5, | |
| }, | |
| STUB_TASK_PRACTICE_PROGRESS_FILLED: { | |
| height: 10, | |
| borderRadius: 5, | |
| elevation: 3, | |
| opacity:1, | |
| shadowColor: COLORS.BLACKOPAQUE, | |
| shadowOffset: { | |
| width: 1, | |
| height: 1 | |
| }, | |
| shadowRadius: 5, | |
| shadowOpacity:0.6, | |
| }, | |
| TITLE_VIEW : { | |
| borderTopStartRadius: 10, | |
| borderTopEndRadius: 10, | |
| padding: 20, | |
| }, | |
| TUTORIAL_BOTTOM: { | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| backgroundColor: COLORS.WHITE | |
| }, | |
| TUTORIAL_IMAGE : { | |
| flexDirection: 'column', | |
| alignItems: 'stretch', | |
| height: 166, | |
| width: 200, | |
| marginTop:40 | |
| }, | |
| TUTORIAL_ICONS : { | |
| flexDirection: 'row', | |
| marginTop:10, | |
| paddingHorizontal:40 | |
| }, | |
| TUTORIAL_TITLE : { | |
| marginTop:40, | |
| paddingHorizontal:40, | |
| justifyContent:'flex-start' | |
| }, | |
| TUTORIAL_SUBTITLE : { | |
| paddingHorizontal:40, | |
| marginTop:40, | |
| }, | |
| TUTORIAL_PERM_LIST_SUBTITLE : { | |
| marginTop:20, | |
| }, | |
| WHITE_CONTENT_PADDED: { | |
| flex: 5, | |
| backgroundColor: COLORS.WHITE, | |
| padding: 20, | |
| }, | |
| TOOLS_CONTENT_SECTION_VIEW: { | |
| marginBottom: 20, | |
| marginTop: 20, | |
| }, | |
| TOOLS_CONTAINER_VIEW: { | |
| marginLeft: 20, | |
| width: DEVICE.WIDTH / 4.5, | |
| alignItems: 'center' | |
| }, | |
| TOOL_ITEM_IMAGE: { | |
| width: DEVICE.WIDTH / 4.5, | |
| height: DEVICE.WIDTH / 4.5, | |
| }, | |
| TOOL_CARD_VIEW: { | |
| flex: 1, | |
| backgroundColor: COLORS.WHITE, | |
| borderRadius: 10, | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { width: 0, height: 3 }, | |
| shadowRadius: 5, | |
| shadowOpacity: 0.5, | |
| elevation: 10, | |
| }, | |
| TOOL_CARD_CONTENT: { | |
| width: DEVICE.WIDTH - 40, | |
| alignItems: 'center' | |
| }, | |
| TOOL_IMAGE: { | |
| width: DEVICE.WIDTH * 0.77, | |
| height: DEVICE.HEIGHT * 0.28, | |
| marginTop: 25 | |
| }, | |
| TOOL_AUDIO_LEFT: { | |
| borderBottomLeftRadius : 20, | |
| borderColor: COLORS.ENVIRONMENTGREEN, | |
| borderTopLeftRadius : 20, | |
| borderWidth: 1.5, | |
| marginTop: 20, | |
| padding: 10, | |
| }, | |
| TOOL_AUDIO_LEFT_SELECTED: { | |
| backgroundColor: COLORS.ENVIRONMENTGREEN, | |
| borderBottomLeftRadius : 20, | |
| borderColor: COLORS.ENVIRONMENTGREEN, | |
| borderTopLeftRadius : 20, | |
| borderWidth: 1, | |
| marginTop: 20, | |
| padding: 10, | |
| }, | |
| TOOL_AUDIO_RIGHT: { | |
| borderBottomRightRadius : 20, | |
| borderColor: COLORS.ENVIRONMENTGREEN, | |
| borderTopRightRadius : 20, | |
| borderWidth: 1.5, | |
| marginTop:20, | |
| padding:10, | |
| }, | |
| TOOL_AUDIO_RIGHT_SELECTED: { | |
| backgroundColor: COLORS.ENVIRONMENTGREEN, | |
| borderBottomRightRadius : 20, | |
| borderColor: COLORS.ENVIRONMENTGREEN, | |
| borderTopRightRadius : 20, | |
| borderWidth: 1, | |
| marginTop: 20, | |
| padding: 10, | |
| }, | |
| TOOL_AUDIO_CENTER: { | |
| borderColor: COLORS.ENVIRONMENTGREEN, | |
| borderTopWidth: 1.5, | |
| borderBottomWidth: 1.5, | |
| borderLeftWidth: 0, | |
| borderRightWidth: 0, | |
| marginTop: 20, | |
| padding: 10, | |
| }, | |
| TOOL_AUDIO_CENTER_SELECTED: { | |
| backgroundColor: COLORS.ENVIRONMENTGREEN, | |
| borderColor: COLORS.ENVIRONMENTGREEN, | |
| borderWidth:1, | |
| marginTop: 20, | |
| padding: 10, | |
| }, | |
| TOOL_MEDIA_PLAY_ICON_PAUSED: { | |
| backgroundColor: COLORS.ENVIRONMENTGREEN, | |
| borderRadius: 50, | |
| shadowColor: COLORS.ENVIRONMENTGREEN, | |
| shadowOffset: { width: 0, height: 3 }, | |
| shadowRadius: 5, | |
| shadowOpacity: 0.5, | |
| elevation: 10, | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| height: 40, | |
| width: 40, | |
| }, | |
| TOOL_MEDIA_PLAY_ICON_PLAYING: { | |
| backgroundColor: COLORS.WHITE, | |
| borderRadius: 50, | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { width: 0, height: 3 }, | |
| shadowRadius: 5, | |
| shadowOpacity: 0.5, | |
| elevation: 10, | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| height: 40, | |
| width: 40 | |
| }, | |
| FAVORITE_TASK_VIEW: { | |
| flex: 1, | |
| borderRadius: 5, | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { width: 0, height: 3 }, | |
| shadowRadius: 5, | |
| shadowOpacity: 0.5, | |
| elevation: 10, | |
| padding: 10 | |
| }, | |
| INTEGRATION_BOX : { | |
| width: 30, | |
| height: 30, | |
| backgroundColor: COLORS.WHITE, | |
| borderRadius: 5, | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { width: 0, height: 3 }, | |
| shadowRadius: 5, | |
| shadowOpacity: 0.5, | |
| elevation: 10, | |
| justifyContent: 'center', | |
| alignItems: 'center', | |
| marginRight:10 | |
| }, | |
| INTEGRATION: { | |
| margin:20, | |
| flex:1 | |
| }, | |
| INTEGRATION_BOX_TEXT: { | |
| flexDirection:'row', | |
| alignItems: 'center' | |
| }, | |
| INTEGRATION_ROW: { | |
| alignItems: 'center', | |
| flex: 1, | |
| flexDirection: 'row', | |
| justifyContent: 'space-between', | |
| marginBottom: 20, | |
| }, | |
| PERM : { | |
| marginTop:20, | |
| marginHorizontal:20 | |
| }, | |
| PERM_SCREEN_ROW: { | |
| alignSelf: 'stretch', | |
| flex: 1, | |
| flexDirection: 'row', | |
| justifyContent: 'space-between', | |
| marginBottom:10 | |
| }, | |
| MARGIN_TOP_TWENTY: { | |
| marginTop:20 | |
| }, | |
| BUILD: { | |
| marginTop:10, | |
| marginLeft:10 | |
| }, | |
| BUILD_ROW: { | |
| flex: 1, | |
| flexDirection: 'row', | |
| marginBottom:10, | |
| marginHorizontal:20, | |
| marginTop:10, | |
| }, | |
| }); | |
| export const TEXT = StyleSheet.create({ | |
| DISCLAIMER: { | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| fontSize: 15, | |
| color: COLORS.COOLGREY, | |
| }, | |
| DISCLAIMER_CENTER: { | |
| textAlign: 'center', | |
| fontFamily: FONT.FAMILY.REGULAR, | |
| fontSize: 12, | |
| color: COLORS.COOLGREY, | |
| }, | |
| POSTREG_ERROR: { | |
| color: COLORS.ERROR, | |
| fontSize: 12, | |
| fontFamily: FONT.FAMILY.REGULAR, | |
| }, | |
| DYNAMIC_LIST_ITEM: { | |
| fontSize: 16, | |
| fontFamily: FONT.FAMILY.BOLD | |
| }, | |
| DESCRIPTION_TEXT: { | |
| color: COLORS.BATTLESHIPGREY, | |
| fontSize: 18, | |
| textAlign: 'left', | |
| lineHeight: 24, | |
| marginBottom: 10, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| }, | |
| DESCRIPTION_MEDIA_TEXT: { | |
| color: COLORS.SLATE, | |
| fontSize: 30, | |
| lineHeight: 34, | |
| textAlign: 'center', | |
| fontFamily: FONT.FAMILY.BOLD, | |
| marginBottom: 20 | |
| }, | |
| SLIDER_MEDIA_TEXT_LANDSCAPE: { | |
| fontSize: 16, | |
| color: COLORS.WHITETWO, | |
| fontFamily: FONT.FAMILY.NORMAL | |
| }, | |
| EIGHTEEN_TOP: { | |
| fontSize: 18, | |
| marginTop: 10 | |
| }, | |
| EIGHTEEN_NORMAL: { | |
| fontSize: 18, | |
| fontFamily: FONT.FAMILY.NORMAL | |
| }, | |
| GRAPH_TITLE: { | |
| fontSize: 14, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| color: COLORS.SLATE | |
| }, | |
| GRAPH_INDEX_NAME: { | |
| fontSize: 14, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| color: COLORS.BATTLESHIPGREY | |
| }, | |
| GRAPH_COLUMN_TITLE: { | |
| fontSize: 12, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| color: COLORS.BATTLESHIPGREY | |
| }, | |
| GRAPH_COLUMN_TITLE_SELECTED: { | |
| fontSize: 12, | |
| fontFamily: FONT.FAMILY.BOLD, | |
| color: COLORS.SLATE | |
| }, | |
| GRAPH_COLUMN_DESCRIPTION: { | |
| fontSize: 10, | |
| lineHeight: 14 | |
| }, | |
| HEADER_TITLE: { | |
| fontFamily: FONT.FAMILY.BOLD, | |
| color: COLORS.SLATE, | |
| fontSize: 14, | |
| textAlign: 'center' | |
| }, | |
| LIKE_TEXT_INPUT_CLEAN: { | |
| color:COLORS.SLATE, | |
| fontFamily: FONT.FAMILY.REGULAR, | |
| fontSize:20, | |
| }, | |
| MENU_ITEM_TEXT: { | |
| fontSize: 14, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| marginLeft: 10, | |
| }, | |
| MESSAGE_BIGNUMBER: { | |
| fontSize: 84, | |
| color: COLORS.WHITE, | |
| fontFamily: FONT.FAMILY.REGULAR, | |
| height: Platform.OS === 'ios' ? 84 : 78 | |
| }, | |
| MESSAGE_SMALLNUMBER: { | |
| fontSize: 24, | |
| color: COLORS.WHITE, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| height: 24 | |
| }, | |
| MESSAGE_TITLE_TEXT: { | |
| fontSize: 26, | |
| color: COLORS.WHITE, | |
| fontFamily: FONT.FAMILY.BOLD, | |
| textAlign: 'center' | |
| }, | |
| MESSAGE_SUBTITLE_TEXT: { | |
| fontSize: 16, | |
| color: COLORS.WHITE, | |
| lineHeight: 24, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| textAlign: 'center', | |
| margin: 10 | |
| }, | |
| MESSAGE_SECONDARY_BUTTON_TEXT: { | |
| fontSize: 14, | |
| color: COLORS.WHITE, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| marginTop: 20 | |
| }, | |
| OVERLAY_TITLE: { | |
| fontSize: 24, | |
| fontFamily: FONT.FAMILY.BOLD, | |
| color: COLORS.SLATE, | |
| textAlign: 'center' | |
| }, | |
| OVERLAY_SUBTITLE: { | |
| fontSize: 16, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| color: COLORS.BATTLESHIPGREY, | |
| lineHeight: 20, | |
| textAlign: 'center' | |
| }, | |
| MODAL_CANCEL: { | |
| fontSize: 16, | |
| fontWeight: '700', | |
| color: COLORS.NORMALBLUE, | |
| marginRight: 10 | |
| }, | |
| MODULE_NAME : { | |
| color: COLORS.SLATE, | |
| fontSize: 14, | |
| lineHeight: 18, | |
| fontFamily: FONT.FAMILY.NORMAL | |
| }, | |
| MYSLEEP_BUTTON: { | |
| color: COLORS.SEAFOAMBLUE, | |
| fontSize: 12, | |
| fontWeight: '700', | |
| textAlign: 'center' | |
| }, | |
| MYSLEEP_DETAILS: { | |
| color: COLORS.SLATE, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| }, | |
| MYSLEEP_NO_DATA_TEXT: { | |
| color: COLORS.SLATE, | |
| fontFamily: FONT.FAMILY.BOLD, | |
| fontSize: 20, | |
| }, | |
| MYSLEEP_TOOLTIP: { | |
| color: COLORS.WHITE, | |
| fontSize: 12, | |
| fontWeight: '700', | |
| }, | |
| PERMISSION_LINK:{ | |
| color: COLORS.SLATE, | |
| textAlign: 'center', | |
| fontFamily: FONT.FAMILY.BOLD, | |
| fontSize: 16, | |
| marginLeft: 10 | |
| }, | |
| QUESTION_ASSESSMENT_INDEX: { | |
| fontFamily: FONT.FAMILY.BOLD, | |
| fontSize: 30, | |
| color:COLORS.SEAFOAMBLUE, | |
| }, | |
| QUESTION_ASSESSMENT_TEXT: { | |
| fontFamily: FONT.FAMILY.BOLD, | |
| fontSize: 24, | |
| color:COLORS.SEAFOAMBLUE, | |
| lineHeight: 30, | |
| textAlign: 'center' | |
| }, | |
| QUESTION_TEXT: { | |
| color: COLORS.BATTLESHIPGREY, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| fontSize: 18, | |
| lineHeight: 24, | |
| }, | |
| QUESTION_CHOICE_TEXT: { | |
| color: COLORS.BATTLESHIPGREY, | |
| fontSize: 16, | |
| lineHeight: 20 | |
| }, | |
| QUESTION_SELECTED_TEXT: { | |
| color: COLORS.SLATE, | |
| fontFamily: FONT.FAMILY.BOLD, | |
| fontSize: 16, | |
| lineHeight: 20 | |
| }, | |
| SIXTEEN_TOP: { | |
| fontSize: 16, | |
| marginTop: 10 | |
| }, | |
| SECONDARY_BUTTONS_TEXT: { | |
| color: COLORS.BATTLESHIPGREY, | |
| fontSize: 12, | |
| marginTop: 15, | |
| marginBottom: 15 | |
| }, | |
| SLEEP_TRACKER_DATE_TITLE: { | |
| fontSize: 24, | |
| color: COLORS.WHITE, | |
| fontFamily: FONT.FAMILY.BOLD | |
| }, | |
| SMALL_TEXT_WHITE: { | |
| textAlign: 'center', | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| fontSize: 17, | |
| color: COLORS.WHITE, | |
| }, | |
| SMALL_TEXT_DARK_GREY_LEFT:{ | |
| textAlign: 'left', | |
| fontFamily: FONT.FAMILY.REGULAR, | |
| fontSize: 17, | |
| color: COLORS.BATTLESHIPGREY, | |
| }, | |
| SUBTITLE_TEXT: { | |
| fontSize: 14, | |
| fontFamily: FONT.FAMILY.BOLD, | |
| marginTop: 3, | |
| marginLeft: 3 | |
| }, | |
| SWITCH_TEXT: { | |
| fontSize: 16, | |
| fontFamily: FONT.FAMILY.BOLD, | |
| color: COLORS.SLATE, | |
| width: 200, | |
| }, | |
| TABS_TITLE: { | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| color: COLORS.SLATE | |
| }, | |
| TABS_TITLE_BOLD: { | |
| fontFamily: FONT.FAMILY.BOLD, | |
| color: COLORS.SLATE | |
| }, | |
| DOMAIN_TITLE: { | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| color: COLORS.SLATE, | |
| fontSize:18, | |
| marginBottom:16 | |
| }, | |
| TASK_TITLE: { | |
| fontSize: 20, | |
| marginBottom: 10 | |
| }, | |
| TASK_PLACEHOLDER_TEXT: { | |
| fontSize: 12, | |
| color: COLORS.COOLGREY, | |
| fontFamily: FONT.FAMILY.NORMAL | |
| }, | |
| TASK_TEXTANSWER_TEXT: { | |
| fontSize: 18, | |
| lineHeight: 24, | |
| color: COLORS.SLATE, | |
| fontFamily: FONT.FAMILY.BOLD | |
| }, | |
| TASK_PICKER_ANSWER_BIG_TEXT: { | |
| fontSize: 60, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| color: COLORS.SLATE | |
| }, | |
| TASK_PICKER_ANSWER_SMALL_TEXT: { | |
| fontSize: 14, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| color: COLORS.SLATE | |
| }, | |
| STUB_PRACTICE_TIME: { | |
| fontSize: 60, | |
| color: COLORS.SLATE, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| }, | |
| STUB_PROGRESS_TEXT: { | |
| fontSize: 12, | |
| color: COLORS.SLATE, | |
| fontFamily: FONT.FAMILY.NORMAL | |
| }, | |
| STUB_ENCOURAGEMENT_TEXT: { | |
| fontSize: 20, | |
| color: COLORS.BATTLESHIPGREY, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| lineHeight: 26 | |
| }, | |
| TITLE_TEXT: { | |
| color: COLORS.WHITE, | |
| fontSize: 28, | |
| fontWeight: '700', | |
| lineHeight: 35 | |
| }, | |
| TWENTY: { | |
| fontSize: 20 | |
| }, | |
| TUTORIAL_SUBTITLE:{ | |
| color: COLORS.GRAY_DARK, | |
| textAlign: 'center', | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| fontSize: 18, | |
| }, | |
| TUTORIAL_TITLE: { | |
| color: COLORS.SLATE, | |
| textAlign: 'center', | |
| fontFamily: FONT.FAMILY.BOLD, | |
| fontSize: 24, | |
| }, | |
| TUTORIAL_TITLE_BLUE: { | |
| color: COLORS.MORNING, | |
| textAlign: 'center', | |
| fontFamily: FONT.FAMILY.BOLD, | |
| fontSize: 24, | |
| }, | |
| TUTORIAL_TITLE_LEFT: { | |
| color: COLORS.SLATE, | |
| textAlign: 'left', | |
| fontFamily: FONT.FAMILY.BOLD, | |
| fontSize: 24, | |
| }, | |
| TWELVE: { | |
| fontSize: 12, | |
| fontFamily: FONT.FAMILY.NORMAL | |
| }, | |
| SECTION_SUBTITLE: { | |
| color: COLORS.SLATE, | |
| fontSize: 14, | |
| fontFamily: FONT.FAMILY.BOLD | |
| }, | |
| TOOL_CONTAINER_NAME: { | |
| textAlign: 'center', | |
| color: COLORS.SLATE, | |
| fontSize: 12, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| marginTop: 10 | |
| }, | |
| TOOL_CARD_TITLE: { | |
| color: COLORS.SLATE, | |
| fontSize: 28, | |
| textAlign: 'center', | |
| fontFamily: FONT.FAMILY.BOLD, | |
| }, | |
| TOOL_CARD_ADDITIONAL_TEXT: { | |
| color: COLORS.BATTLESHIPGREY, | |
| fontSize: 18, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| textAlign: 'center', | |
| lineHeight: 24, | |
| paddingHorizontal: 15, | |
| }, | |
| TOOL_AUDIO_DURATION: { | |
| color: COLORS.COOLGREY, | |
| fontSize: 14, | |
| fontFamily: FONT.FAMILY.BOLD, | |
| }, | |
| TOOL_AUDIO_DURATION_SELECTED: { | |
| color: COLORS.WHITE, | |
| fontSize: 14, | |
| fontFamily: FONT.FAMILY.BOLD, | |
| }, | |
| FAVORITE_TASK_TITLE: { | |
| color: COLORS.WHITE, | |
| fontSize: 16, | |
| lineHeight: 20, | |
| fontFamily: FONT.FAMILY.BOLD | |
| }, | |
| CHECKBOX_TEXT: { | |
| color: COLORS.SLATE, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| fontSize: 14, | |
| lineHeight: 18 | |
| }, | |
| PERMS_TEXT: { | |
| fontSize: 14, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| color:COLORS.BATTLESHIPGREY | |
| }, | |
| TASK_CIRCLE_CONTENT_TEXT: { | |
| fontFamily: FONT.FAMILY.BOLD, | |
| color: COLORS.SLATE | |
| }, | |
| TASK_RATE_SUD_SELECTED_TEXT: { | |
| fontSize: 28, | |
| fontFamily: FONT.FAMILY.BOLD, | |
| color: COLORS.BATTLESHIPGREY | |
| }, | |
| TASK_RATE_SUD_UNSELECTED_TEXT: { | |
| fontSize: 18, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| color: COLORS.PALEGREY | |
| }, | |
| TASK_RATE_SUD_INDICATORS_TEXT: { | |
| fontSize: 14, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| color: COLORS.COOLGREY | |
| }, | |
| }); | |
| export const GRAPH_CONTAINERS = StyleSheet.create({ | |
| stackContainer: { | |
| width: SIZES.graphWidth, | |
| paddingBottom: 20, | |
| }, | |
| rowsContainer: { | |
| paddingBottom: SIZES.graphFooterHeight, | |
| }, | |
| columnDescriptionContainer: { | |
| position: 'absolute', | |
| width: '100%', | |
| bottom: 0, | |
| zIndex: 1, | |
| flex: 1, | |
| backgroundColor: COLORS.WHITE, | |
| borderColor: COLORS.SLATE, | |
| borderRadius: 3, | |
| marginTop: 10, | |
| paddingTop: 6, | |
| paddingBottom: 6, | |
| paddingLeft: 8, | |
| paddingRight: 8, | |
| shadowColor: COLORS.SLATE, | |
| shadowOffset: { | |
| width: 0, | |
| height: 4, | |
| }, | |
| shadowRadius: 10, | |
| shadowOpacity: 0.24, | |
| }, | |
| columnsContainer: { | |
| position: 'absolute', | |
| right: 0, | |
| width: SIZES.graphWidth - SIZES.graphTitlesColumnWidth, | |
| paddingRight: 10, | |
| flexDirection: 'row', | |
| }, | |
| columnTitleView: { | |
| height: SIZES.graphFooterHeight, | |
| justifyContent: 'center', | |
| }, | |
| columnElementView: { | |
| borderRadius: 25 | |
| }, | |
| indexContainer: { | |
| marginLeft: 5, | |
| padding: 5, | |
| alignItems: 'center' | |
| }, | |
| indexDotView: { | |
| borderRadius: 50, | |
| marginRight: 10, | |
| height: 8, | |
| width: 8 | |
| } | |
| }); | |
| export const styles_v2 = StyleSheet.create({ | |
| FITBIT_AUTH_BTN: { | |
| backgroundColor: COLORS.WHITETWO, | |
| paddingVertical: 18, | |
| paddingHorizontal: 22, | |
| flexDirection: 'row', | |
| }, | |
| FITBIT_AUTH_BTN_TEXT: { | |
| color: COLORS.SLATE, | |
| marginTop: 3, | |
| marginLeft: 10, | |
| }, | |
| CHAT_IMAGE : { | |
| flexDirection: 'column', | |
| alignItems: 'stretch', | |
| height: 297, | |
| width: 400, | |
| marginTop:40 | |
| }, | |
| IMAGE_RESIZE: { | |
| width: null, | |
| height: null, | |
| flex:1, | |
| }, | |
| myPlans_paginationDotsContainer: StyleSheet.flatten([FEED.TITLE_CONTAINERS, { | |
| flexDirection: 'row', | |
| marginBottom: 0, | |
| marginTop: 0, | |
| alignItems: 'center', | |
| marginLeft: 20, | |
| marginRight: 20, | |
| justifyContent: 'center' | |
| }]), | |
| paginationDots: StyleSheet.flatten([formStyle.radioStyles.radioBase, formStyle.radioStyles.radioSelected, { | |
| borderColor: COLORS.SLATE, | |
| backgroundColor: COLORS.SLATE, | |
| height: 5, | |
| width: 5, | |
| marginRight: 3 | |
| }]), | |
| myPlans_moduleStyle: { | |
| height: DEVICE.HEIGHT * 0.30, | |
| width: DEVICE.WIDTH * 0.70, | |
| marginVertical: 14, | |
| marginLeft: 14, | |
| marginRight: 8, | |
| borderRadius: 10, | |
| elevation: 10, | |
| shadowColor: COLORS.BLACKOPAQUE, | |
| shadowOffset: { | |
| width: 1, | |
| height: 1 | |
| }, | |
| shadowRadius: 5, | |
| shadowOpacity: 0.6, | |
| }, | |
| myPlans_domainStyle: { | |
| height: 5, | |
| //width: '100%', | |
| backgroundColor: COLORS.WHITE, | |
| //marginBottom: 10, | |
| // marginHorizontal:5, | |
| flexDirection: 'row', | |
| alignItems: 'center', | |
| marginTop: 5, | |
| borderRadius: 5, | |
| }, | |
| myPlans_domainStyleContainerProgress: { | |
| flex: 1, | |
| justifyContent: 'space-around', | |
| marginTop: 10, | |
| borderRadius: 4, | |
| backgroundColor: '#ffffff', | |
| shadowColor: 'rgba(0, 0, 0, 0.08)', | |
| shadowOffset: { | |
| width: 0, | |
| height: 2 | |
| }, | |
| shadowRadius: 8, | |
| shadowOpacity: 1 | |
| }, | |
| myPlans_domainNameProgressEmpty: { | |
| position:'absolute', | |
| backgroundColor:COLORS.WHITETWO, | |
| height: 4, | |
| // elevation: 3, | |
| borderRadius: 4, | |
| shadowColor: 'rgba(0, 0, 0, 0.08)', | |
| shadowOffset: { | |
| width: 0, | |
| height: 2 | |
| }, | |
| shadowRadius: 8, | |
| shadowOpacity: 1 }, | |
| myPlans_domainNameProgressProgressDoneTasks: { | |
| backgroundColor: COLORS.BLACK, | |
| height: 4, | |
| borderRadius: 4, | |
| elevation: 3, | |
| opacity:1, | |
| shadowColor: COLORS.BLACKOPAQUE, | |
| shadowOffset: { | |
| width: 1, | |
| height: 1 | |
| }, | |
| shadowRadius: 5, | |
| shadowOpacity:0.6, | |
| }, | |
| myPlans_tradingDomainContainer: { | |
| flex:1, | |
| justifyContent:'space-between', | |
| marginTop:20 | |
| }, | |
| RADIO_NOT_TOUCHED: { | |
| borderWidth: 2, | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| height: SIZES.radioSmall, | |
| width: SIZES.radioSmall, | |
| borderRadius: 3, | |
| borderColor: COLORS.PALEGREY, | |
| backgroundColor: COLORS.PALEGREY, | |
| marginRight: 6, | |
| }, | |
| RADIO_IN_PROGRESS: { | |
| borderWidth: 2, | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| height: SIZES.radioSmall, | |
| width: SIZES.radioSmall, | |
| borderRadius: 3, | |
| borderColor: COLORS.SLATE, | |
| backgroundColor: COLORS.SLATE, | |
| marginRight: 6, | |
| }, | |
| RADIO_DONE: { | |
| borderWidth: 2, | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| height: SIZES.radioSmall, | |
| width: SIZES.radioSmall, | |
| borderRadius: 3, | |
| borderColor: COLORS.PALEGREY, | |
| backgroundColor: COLORS.PALEGREY, | |
| marginRight: 6, | |
| }, | |
| SMS_PARENT_CONTAINER: { | |
| flex: 4, | |
| flexDirection: 'row' | |
| }, | |
| SMS_PHONE_PARENT : { | |
| flex: 4, | |
| }, | |
| SMS_COUNTRY_DROP_PARENT: { | |
| flex: 2 | |
| }, | |
| SMS_COUNTRY_DROP_CONTAINER: { | |
| borderBottomWidth:1, | |
| paddingVertical:8, | |
| flexDirection: 'row', | |
| justifyContent: 'space-between', | |
| marginRight:20, | |
| borderBottomColor:COLORS.SEAFOAMBLUE, | |
| height: 40 | |
| }, | |
| SMS_ICON: { | |
| color: COLORS.GRAY_DARK, | |
| backgroundColor: 'transparent' | |
| }, | |
| SMS_DISCLAIMER: { | |
| marginBottom:20, | |
| }, | |
| userModule_bodyContainer: { | |
| flex:1, | |
| alignSelf:'stretch', | |
| marginTop:15 | |
| }, | |
| userModule_bodyTextContainer: { | |
| flex:4, | |
| zIndex:1, | |
| }, | |
| userModule_bodyText: { | |
| color: COLORS.WHITE, | |
| fontFamily: FONT.FAMILY.BOLD, | |
| fontSize:28, | |
| }, | |
| userModule_bottomContainer: { | |
| flexDirection:'row', | |
| justifyContent:'space-between', | |
| alignItems:'center' | |
| }, | |
| userModule_bottomIconContainer: { | |
| flex:1, | |
| flexDirection:'row', | |
| alignItems:'center', | |
| }, | |
| userModule_bottomIconSize: { | |
| width:25, | |
| height:25 | |
| }, | |
| userModule_bottomTimeStyle: { | |
| //fontFamily:FONT.FAMILY.BOLD, | |
| fontSize:14, | |
| }, | |
| userModule_Container: { | |
| margin:12, | |
| flex:1 | |
| }, | |
| userModule_numberContainer: { | |
| flex:1, | |
| alignItems:'flex-end' | |
| }, | |
| userModule_numberStyle: { | |
| flex:1, | |
| fontFamily: FONT.FAMILY.BOLD, | |
| fontSize:140, | |
| alignSelf:'flex-end', | |
| position:'absolute', | |
| bottom:-20 | |
| }, | |
| userModule_title: { | |
| color: COLORS.WHITE, | |
| fontFamily: FONT.FAMILY.BOLD, | |
| fontSize:14 | |
| }, | |
| userModule_trophyIconSize: { | |
| marginLeft:4, | |
| width:15, | |
| height:15 | |
| }, | |
| }); | |
| export const ASSESSMENT = StyleSheet.create({ | |
| ASSESSMENT_DEVICE_CONNECTION_LOGO: { | |
| width: 68.4, | |
| height: 18, | |
| alignSelf: 'center', | |
| marginVertical: 32, | |
| }, | |
| ASSESSMENT_DEVICE_CONNECTION_ICONS: { | |
| width: '100%', | |
| flexDirection: 'row', | |
| paddingHorizontal: 5, | |
| marginTop: 26, | |
| alignItems: 'center', | |
| }, | |
| ASSESSMENT_DEVICE_CONNECTION_BG: { | |
| flex: 3, | |
| justifyContent: 'flex-end', | |
| alignItems: 'center', | |
| }, | |
| ASSESSMENT_DEVICE_CONNECTION_BG_IMAGE: { | |
| width: 280, | |
| height: 108.6, | |
| }, | |
| ASSESSMENT_DEVICE_CONNECTION_ICONS_ITEM: { | |
| flexDirection: 'column', | |
| flex: 1, | |
| alignItems: 'center', | |
| }, | |
| ASSESSMENT_DEVICE_CONNECTION_POPUP: { | |
| width: 250, | |
| height: 446.5, | |
| maxWidth: '90%', | |
| maxHeight: '90%', | |
| backgroundColor: '#ffffff', | |
| borderRadius: 10, | |
| shadowColor: COLORS.BLACK, | |
| shadowOffset: { width: 0, height: 3 }, | |
| shadowRadius: 15, | |
| shadowOpacity: 0.3, | |
| }, | |
| ASSESSMENT_DEVICE_CONNECTION_POPUP_WRAPPER: { | |
| flex:1, | |
| backgroundColor: 'rgba(0, 0, 0, 0.3)', | |
| alignItems: 'center', | |
| justifyContent: 'center', | |
| }, | |
| ASSESSMENT_SECTION_CONTAINER: { | |
| backgroundColor: COLORS.BACKGROUND_STRIP_GRAY, | |
| flexDirection: 'row', | |
| flex:1, | |
| alignItems:'stretch', | |
| justifyContent:'space-around', | |
| borderTopLeftRadius: 10, | |
| borderTopRightRadius: 10 | |
| }, | |
| ASSESSMENT_SECTION_TEXT_CONTAINER_ACTIVE:{ | |
| borderBottomWidth: 3, | |
| borderBottomColor: COLORS.MORNING, | |
| alignSelf:'stretch' | |
| }, | |
| ASSESSMENT_SECTION_TEXT_CONTAINER:{ | |
| justifyContent: 'center', | |
| alignSelf:'stretch' | |
| }, | |
| ASSESSMENT_SECTION_TEXT:{ | |
| marginTop:15, | |
| marginBottom:15, | |
| color: COLORS.WHITE, | |
| lineHeight: 20, | |
| fontSize: 14, | |
| fontFamily: FONT.FAMILY.BOLD | |
| }, | |
| ASSESSMENT_IMAGE_GATE:{ | |
| width: DEVICE.WIDTH /2.5 , | |
| height: DEVICE.WIDTH /2.5, | |
| alignSelf:'center' | |
| }, | |
| ASSESSMENT_GATE_TITLE_TEXT: { | |
| color: COLORS.WHITE, | |
| alignSelf: 'center', | |
| fontFamily: FONT.FAMILY.BOLD, | |
| textAlign:'center', | |
| fontSize: 30, | |
| }, | |
| ASSESSMENT_GATE_SUBTITLE_TEXT: { | |
| color:COLORS.WHITE, | |
| fontFamily: FONT.FAMILY.REGULAR, | |
| fontSize:15, | |
| alignSelf: 'center', | |
| textAlign: 'center', | |
| marginTop: 8, | |
| lineHeight: 22 | |
| }, | |
| ASSESSMENT_GATE_CONTAINER_SUBTITLE:{ | |
| flexDirection: 'column', | |
| flex: 1 | |
| }, | |
| ASSESSMENT_GRANDPARENT: { | |
| flex: 1, | |
| justifyContent:'space-between', | |
| paddingTop: (Platform.OS == 'ios') ? DEVICE.STATUSBAR : 0, | |
| backgroundColor: COLORS.STRIP_ACTION_DARK_BLUE, | |
| }, | |
| ASSESSMENT_PARENT_QUESTION:{ | |
| flex:1, | |
| //justifyContent: 'space-around', | |
| alignItems: 'center', | |
| marginTop: 20, | |
| width: DEVICE.WIDTH * 0.75 | |
| }, | |
| ASSESSMENT_CONTAINER: { | |
| flex: 1, | |
| paddingTop: DEVICE.STATUSBAR, | |
| backgroundColor: COLORS.WHITETWO | |
| }, | |
| ASSESSMENT_PARENT_CONTAINER: { | |
| flex:1, | |
| backgroundColor: COLORS.WHITE | |
| }, | |
| SLIDE_CONTAINER: { | |
| borderRadius:10, | |
| left:0, | |
| right:0, | |
| position:'absolute', | |
| }, | |
| WELCOME_SLIDE: { | |
| borderRadius:10, | |
| backgroundColor:COLORS.SEAFOAMBLUE, | |
| flex:1 | |
| }, | |
| SLEEP_REPORT_SCROLL_CONTAINER: { | |
| flexGrow: 1, | |
| justifyContent: 'space-between' | |
| }, | |
| SLEEP_REPORT_HEADER_CONTAINER: { | |
| justifyContent:'space-around', | |
| margin:20, | |
| }, | |
| SLEEP_REPORT_CONCLUSION_CONTAINER:{ | |
| backgroundColor:COLORS.WHITE, | |
| flexDirection:'row', | |
| justifyContent: 'space-between', | |
| padding: 20, | |
| paddingBottom: 0 | |
| }, | |
| SLEEP_REPORT_CONCLUSION_TEXT_CONTAINER:{ | |
| alignItems:'center', | |
| }, | |
| SLEEP_REPORT_CONCLUSION_TEXT:{ | |
| fontSize: 14, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| color: COLORS.SLATE, | |
| textAlign:'center' | |
| }, | |
| SLEEP_REPORT_CONCLUSION_NUMBERS: { | |
| color: COLORS.SLATE, | |
| alignSelf: 'center', | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| textAlign:'center', | |
| fontSize: 25, | |
| }, | |
| SLEEP_REPORT_CONCLUSION_NUMBERS_SIGN:{ | |
| fontSize: 14, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| color: COLORS.SLATE, | |
| textAlign:'center' | |
| }, | |
| SLEEP_REPORT_CONCLUSION_TEXT_BODY_CONTAINER:{ | |
| backgroundColor:COLORS.WHITE | |
| }, | |
| SLEEP_REPORT_CONCLUSION_TEXT_BODY:{ | |
| fontSize: 20, | |
| fontFamily: FONT.FAMILY.NORMAL, | |
| color: COLORS.SLATE, | |
| textAlign:'left', | |
| margin:20 | |
| }, | |
| GET_PLAN_BTN_CONTAINER:{ | |
| flex: 1, | |
| backgroundColor: COLORS.WHITE, | |
| justifyContent: 'flex-end', | |
| borderBottomRightRadius: 10, | |
| borderBottomLeftRadius: 10, | |
| }, | |
| START_FINISH_IMG_CONTAINER:{ | |
| flex: 2, | |
| flexDirection: 'column', | |
| justifyContent: 'center' | |
| }, | |
| QUESTION:{ | |
| flex: 7, | |
| marginLeft: 20, | |
| marginRight: 20 | |
| } | |
| }); | |
| export const login = StyleSheet.create({ | |
| headerContainer:{ | |
| flex: 1, | |
| backgroundColor: COLORS.SEAFOAMBLUE, | |
| alignItems: 'center', | |
| justifyContent: 'space-evenly', | |
| borderTopLeftRadius:10, | |
| borderTopRightRadius:10, | |
| }, | |
| btnContainer:{ | |
| backgroundColor: COLORS.WHITE, | |
| flex:1, | |
| borderBottomLeftRadius:10, | |
| borderBottomRightRadius:10, | |
| justifyContent:'space-around' | |
| }, | |
| imageSize:{ | |
| width: DEVICE.HEIGHT * 0.25, | |
| height: DEVICE.HEIGHT * 0.25 | |
| } | |
| }); | |
| export const FORMS = StyleSheet.create({ | |
| PICKER_SEPERATOR: { | |
| flex:1, | |
| height: 2, | |
| backgroundColor: COLORS.BATTLESHIPGREY, | |
| marginVertical:15 | |
| }, | |
| PICKER_SEPERATOR_SELECTED: { | |
| flex:1, | |
| height: 2, | |
| backgroundColor: COLORS.SEAFOAMBLUE, | |
| marginVertical:15 | |
| }, | |
| PICKER_TEXT_CLEAN: { | |
| fontSize: 20, | |
| color:COLORS.COOLGREY | |
| }, | |
| PICKER_TEXT_SELECTED: { | |
| fontSize: 20, | |
| color:COLORS.SLATE | |
| }, | |
| TEXT_INPUT_ERROR_CONTAINER: { | |
| marginTop:10 | |
| }, | |
| TEXT_INPUT_CLEAN: { | |
| height: (Platform.OS == 'ios') ? 40 : 44, | |
| color:COLORS.SLATE, | |
| fontSize: 20, | |
| fontFamily: FONT.FAMILY.REGULAR, | |
| }, | |
| TEXT_INPUT_ACTIVE :{ | |
| height: (Platform.OS == 'ios') ? 40 : 44, | |
| color:COLORS.BATTLESHIPGREY, | |
| fontSize:20, | |
| lineHeight:30, | |
| fontFamily: FONT.FAMILY.REGULAR, | |
| }, | |
| TEXT_INPUT_ERROR :{ | |
| height: (Platform.OS == 'ios') ? 40 : 44, | |
| color: COLORS.ERROR, | |
| fontSize:20, | |
| fontFamily: FONT.FAMILY.REGULAR, | |
| }, | |
| TEXT_INPUT_ANDROID_DATE_PICK :{ | |
| height: (Platform.OS == 'ios') ? 40 : 44, | |
| borderBottomWidth:1, | |
| borderBottomColor: COLORS.BORDER_2 | |
| }, | |
| CONTAINER_BTN: { | |
| backgroundColor: COLORS.WHITE, | |
| flexDirection: 'row', | |
| paddingTop: 10, | |
| }, | |
| BTN: { | |
| flex: 1, | |
| paddingHorizontal: 15 | |
| }, | |
| CANCEL: { | |
| alignItems: 'flex-start' | |
| }, | |
| DONE: { | |
| alignItems: 'flex-end' | |
| }, | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| import {bindActionCreators} from 'redux'; | |
| import * as tabsActions from '../homeTabs/tabs.actions'; | |
| import * as tasksActions from '../tasks/task.actions'; | |
| import {connect} from 'react-redux'; | |
| import { | |
| Animated, | |
| View, | |
| Image, | |
| ScrollView, | |
| Text, | |
| FlatList, | |
| TouchableOpacity, | |
| TouchableWithoutFeedback, | |
| AsyncStorage | |
| } | |
| from 'react-native'; | |
| import Header from '../../components/generic/Header'; | |
| import I18n from '../../i18n/i18n'; | |
| import {COLORS, CONTAINERS, DEVICE, TEXT} from '../../styles/app_v2'; | |
| import {DOMAINS} from '../../styles/domains'; | |
| import UserModule from '../../components/userModules/UserModule'; | |
| import Ionicons from 'react-native-vector-icons/Ionicons'; | |
| import DayzzIcon from '../../res/dayzz_icons/DayzzIcon'; | |
| import OverlayModal from '../../components/generic/OverlayModal'; | |
| import {DOMAIN_MODAL_EXPLORE_YOUR_PLAN} from '../../services/asyncStorage'; | |
| const CARD_ANIMATION_DURATION = 250; | |
| const overlays = { | |
| EXPLORE_YOUR_PLAN:'EXPLORE_YOUR_PLAN', | |
| HEADS_UP: 'HEADS_UP', | |
| FULLY_BOOKED: 'FULLY_BOOKED', | |
| SO_SOON: 'SO_SOON', | |
| WAIT_UP: 'WAIT_UP', | |
| MASTERED_LOCKED: 'MASTERED_LOCKED', | |
| }; | |
| const PADDING_HORIZONTAL = 25; | |
| /// mastered | |
| /// finish updating builders | |
| // show non locked first in pending | |
| /// check order of adding/removing modules | |
| /// CHECK ELEVATION OR SHADOW FOR IDOS TO : UPCOMING, MASTERED, MAIN SCREEN | |
| // check ui spaces between and shadows | |
| // animation | |
| const icons = {lock: 'lock_12_12', x: 'x_12_12', replay: 'Replay', plus:'plus' }; | |
| const UpperRightIcon = ({icon, color, backgroundColor}) => ( | |
| <View style={{position: 'absolute', padding:4, top: 12, right: 12, borderRadius: 10, backgroundColor: backgroundColor }}> | |
| <DayzzIcon style={{justifyContent:'center', textAlign:'center', | |
| fontSize: 12, fontWeight: 'bold', color: color || COLORS.SLATE}} size={10} color={color} name={icons[icon]} /> | |
| </View>); | |
| const GeneralCard = ({imageSource, name, description, underIconText, children, iconCounter, iconCounterColor}) => ( | |
| <View | |
| style={[{ | |
| padding:16, overflow:'visible', | |
| borderRadius: 10, | |
| flexDirection: 'row', | |
| backgroundColor:COLORS.WHITE}]}> | |
| <View style={{alignItems: 'center', marginRight: 16}}> | |
| <View> | |
| <Image | |
| style={{width:48, height:48}} | |
| source={imageSource}/> | |
| {iconCounter && | |
| <View style={{backgroundColor: iconCounterColor, position: 'absolute', bottom:0, right: 0, | |
| justifyContent:'center', alignItems:'center', width: 12, height: 12, borderRadius: 8}}> | |
| <Text style={{color:COLORS.WHITETWO, fontSize:8, fontWeight:'bold'}}>{iconCounter}</Text> | |
| </View>} | |
| </View> | |
| { underIconText && | |
| <Text style={{marginTop: 8, fontSize: 10, | |
| fontWeight: 'bold', color:COLORS.COOLGREY}}>{underIconText}</Text>} | |
| </View> | |
| <View style={{flex:1}}> | |
| <View style={{ marginBottom: 4, marginRight:10, flexDirection:'row'}}> | |
| <Text style={{flex:1, fontSize: 12, | |
| fontWeight: 'bold', color: COLORS.SLATE}}>{name}</Text> | |
| </View> | |
| <Text style={{ | |
| color:COLORS.BATTLESHIPGREY, | |
| fontSize: 12, | |
| }}>{description}</Text> | |
| </View> | |
| {children} | |
| </View>); | |
| class DoubleSidedCard extends Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| backSideVisible : false, | |
| }; | |
| } | |
| _onLayout (event) { | |
| if (!event) return; | |
| if (!event.nativeEvent) return; | |
| let { height } = event.nativeEvent.layout; | |
| console.log('onLayout', height); | |
| this.setState({ animationOffset: height }); | |
| this.animatedPosition = new Animated.Value(height); | |
| this.animatedPosition.addListener(e => { | |
| if (e.value === this.state.animationOffset) { | |
| this.setState({backSideVisible: false}); | |
| } | |
| }); | |
| } | |
| componentDidUpdate(prevProps) { | |
| console.log('componentDidUpdate'); | |
| const { showOtherSide } = this.props; | |
| if (showOtherSide !== prevProps.showOtherSide ) { | |
| if (showOtherSide) { | |
| this.setState({backSideVisible: true}, () => { | |
| Animated.timing(this.animatedPosition, { | |
| // useNativeDriver:true, | |
| toValue: 0, | |
| duration: CARD_ANIMATION_DURATION | |
| }).start(); | |
| }); | |
| } else { | |
| Animated.timing(this.animatedPosition, { | |
| // useNativeDriver:true, | |
| toValue: this.state.animationOffset, | |
| duration: CARD_ANIMATION_DURATION | |
| }).start(); | |
| } | |
| } | |
| } | |
| render() { | |
| const {front, back, style, onPress} = this.props; | |
| return ( | |
| <TouchableWithoutFeedback onPress={onPress} > | |
| <View style={style} onLayout={(e) =>this._onLayout(e)}> | |
| <View style={{overflow:'hidden', borderRadius:10}}> | |
| {front()} | |
| { this.state.backSideVisible && | |
| <Animated.View style={{ | |
| position: 'absolute', | |
| top: 0, bottom: 0, left: 0, right: 0, | |
| transform: [{translateY: this.animatedPosition}], | |
| }}>{back()}</Animated.View> } | |
| </View> | |
| </View> | |
| </TouchableWithoutFeedback>); | |
| } | |
| } | |
| const OngoingModuleCard = ({ module, onStartNow, onPostpone, user, onPress, isSelected }) => | |
| (<DoubleSidedCard | |
| style={[CONTAINERS.SHADOWED_ONGOING_VIEW,{margin:PADDING_HORIZONTAL, borderWidth:1,}]} | |
| showOtherSide={isSelected} | |
| onPress={onPress} | |
| front={() =><UserModule | |
| style={[{height: DEVICE.HEIGHT * 0.30,width: DEVICE.WIDTH * 0.70}]} | |
| user={user} | |
| module={module} | |
| onModuleSelect={onPress} />} | |
| back={() => | |
| <View style={{ | |
| flex:1, | |
| padding: 16, | |
| borderRadius:10, | |
| backgroundColor: COLORS.WHITE | |
| }}> | |
| <Text style={{ | |
| marginBottom: 4, | |
| fontSize: 12, | |
| color: COLORS.SLATE, | |
| }}>{module.name.toUpperCase()}</Text> | |
| <Text style={{ | |
| flex: -1, | |
| fontSize: 12, | |
| color: COLORS.BATTLESHIPGREY | |
| }}>{module.description}</Text> | |
| <View style={{flex:1, justifyContent: 'flex-end'}}> | |
| <TouchableOpacity | |
| onPress={onStartNow} | |
| style={{backgroundColor: DOMAINS[module.domain].color, borderRadius: 16}}> | |
| <Text style={{ | |
| marginVertical: 10, | |
| marginHorizontal: 16, | |
| textAlign: 'center', | |
| fontSize: 12, fontWeight: 'bold', | |
| color: COLORS.WHITETWO | |
| }} | |
| >{I18n.t('domains.ongoingTrainNow')}</Text> | |
| </TouchableOpacity> | |
| <TouchableOpacity style={{alignSelf:'center'}} onPress={onPostpone}> | |
| <Text | |
| style={{margin: 10,color:COLORS.BATTLESHIPGREY, fontSize:12, }} | |
| >{I18n.t('domains.ongoingPostpone')}</Text> | |
| </TouchableOpacity> | |
| </View> | |
| </View>} | |
| />); | |
| const GeneralOtherSideCard = ({module, onStartPressed, onAddToPlan}) => (<View style={{flex: 1, padding: 16,borderRadius:10, backgroundColor: DOMAINS[module.domain].color}}> | |
| <Text style={{ | |
| marginBottom: 4, | |
| fontSize: 12, | |
| borderRadius: 10, | |
| fontWeight: 'bold', | |
| color: DOMAINS[module.domain].darkColor, | |
| }}>{module.name.toUpperCase()}</Text> | |
| <View style={{flex: 1, flexDirection: 'row', alignItems:'flex-end'}}> | |
| {/* <Text style={{ | |
| flex: -1, | |
| fontSize: 12, | |
| color: COLORS.WHITETWO | |
| }}>{I18n.t('domains.startnow')}</Text> */} | |
| <TouchableOpacity | |
| onPress={onStartPressed} | |
| style={{ | |
| flex: 0, | |
| justifyContent: 'center', | |
| backgroundColor: COLORS.WHITETWO, | |
| borderRadius: 16 | |
| }}> | |
| <Text style={{ | |
| marginVertical: 8, | |
| marginHorizontal: 16, | |
| textAlign: 'center', | |
| fontSize: 12, fontWeight: 'bold', | |
| color: DOMAINS[module.domain].color | |
| }} | |
| >{I18n.t('domains.startbutton')}</Text> | |
| </TouchableOpacity> | |
| <TouchableOpacity onPress={onAddToPlan}> | |
| <Text style={{color: COLORS.WHITETWO, fontWeight: 'bold',fontSize: 12, marginVertical:8, marginHorizontal:16}}>{I18n.t('domains.addtoplan')}</Text> | |
| </TouchableOpacity> | |
| </View> | |
| <UpperRightIcon icon={'x'} backgroundColor={null} color={COLORS.WHITETWO } /> | |
| </View>); | |
| const PendingModuleCard = ({onStartPressed, module, isSelected, onPress, onAddToPlan, locked, disabled}) => | |
| <DoubleSidedCard onPress={onPress} showOtherSide={isSelected} | |
| style={[{marginBottom:15, borderRadius:10}, CONTAINERS.SHADOWED_CARD_VIEW]} | |
| front={() => | |
| <GeneralCard name={module.name.toUpperCase()} description={module.description} | |
| underIconText={`${module.tasks.length} Tasks`} | |
| imageSource={{uri:module.imageUrl}} > | |
| <UpperRightIcon icon={ locked ? 'lock' : 'plus'} backgroundColor={ disabled ?COLORS.PALEGREY : DOMAINS[module.domain].color} color={disabled? COLORS.SLATE : COLORS.WHITETWO } /> | |
| </GeneralCard>} | |
| back={() => | |
| <GeneralOtherSideCard | |
| module={module} | |
| onStartPressed={onStartPressed} | |
| onAddToPlan={onAddToPlan} />} />; | |
| const MasteredModuleCard = ({module, isSelected, onPress, disabled, onStartPressed, onAddToPlan}) => | |
| (<DoubleSidedCard onPress={onPress} showOtherSide={isSelected} | |
| style={[{marginBottom:15, borderRadius:10}, CONTAINERS.SHADOWED_CARD_VIEW]} | |
| front={() => <GeneralCard | |
| showOtherSide={isSelected} | |
| name={module.name.toUpperCase()} | |
| description={module.description} | |
| imageSource={DOMAINS[module.domain].mastered} | |
| iconCounterColor ={DOMAINS[module.domain].color} | |
| iconCounter={module.masteredCounter}> | |
| <UpperRightIcon icon={module.status == 'MASTERED_LOCKED' ? 'lock' :'replay'} | |
| backgroundColor={ disabled ? COLORS.PALEGREY : DOMAINS[module.domain].color} | |
| color={disabled? COLORS.SLATE : COLORS.WHITETWO} /> | |
| </GeneralCard>} | |
| back={() => <GeneralOtherSideCard | |
| module={module} onStartPressed={onStartPressed} | |
| onAddToPlan={onAddToPlan} />} | |
| />); | |
| class Domain extends Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| showMore : false, | |
| selectedModule:null, | |
| currentOverlay: null, | |
| displayedModules: [], | |
| undisplayedModules: [], | |
| refreshingList: false, | |
| }; | |
| } | |
| static getDerivedStateFromProps(props, state) { | |
| let newState = {}; | |
| if (props.displayedModules) { | |
| const newDisplayedModules = props.displayedModules.filter(userModule => | |
| userModule.module.domain === props.selectedDomain).map(item => item.module); | |
| if (state.displayedModules.length !== newDisplayedModules.length) { | |
| newState.displayedModules = newDisplayedModules; | |
| } | |
| } | |
| if (props.undisplayedModules) { | |
| const newUndisplayedModules = props.undisplayedModules.filter(module => module.domain === props.selectedDomain); | |
| if (state.undisplayedModules.length !== newUndisplayedModules) | |
| // make non pending first | |
| newState.undisplayedModules = [...newUndisplayedModules.filter(module => !module.pendingMasteredModule), | |
| ...newUndisplayedModules.filter(module => module.pendingMasteredModule)]; | |
| } | |
| if (Object.keys(newState).length > 0) | |
| return newState; | |
| else | |
| return null; | |
| } | |
| findModule(moduleCodeName) { | |
| return [...this.props.undisplayedModules, ...this.state.displayedModules].find(m => m.codeName === moduleCodeName); | |
| } | |
| attemptStartPendingModule (module, navigateAfter) { | |
| if (this.props.maxOngoing === this.state.displayedModules.length + 1) { | |
| this.setState({currentOverlay: overlays.HEADS_UP, overlayPayload: {module, navigateAfter}}); | |
| } else { | |
| this.startPendingModule(module, navigateAfter); | |
| } | |
| } | |
| startPendingModule (module, navigateAfter) { | |
| this.props.tabsActions.moduleAction({ | |
| action:'start', | |
| moduleId: module._id}, | |
| navigateAfter ? this.props.navigator : null, | |
| module); | |
| } | |
| attemptPostponeModule(moduleId) { | |
| this.setState({currentOverlay: overlays.SO_SOON, moduleId}); | |
| } | |
| postponeModule(moduleId) { | |
| this.props.tabsActions.moduleAction({ | |
| action:'postpone', | |
| moduleId}); | |
| } | |
| requestDomainModules() { | |
| this.props.tabsActions.getModules(); | |
| } | |
| navigateToModule (module) { | |
| this.props.navigator.handleDeepLink({link:'myPlans.onModuleSelect', payload: {module}}); | |
| } | |
| selectOrUnselectModule(module) { | |
| this.setState({selectedModule: this.state.selectedModule === module._id ? null : module._id}); | |
| } | |
| onModuleCardPressed(module) { | |
| this.selectOrUnselectModule(module); | |
| } | |
| async componentDidMount() { | |
| const { displayedModules, undisplayedModules} = this.props; | |
| if (displayedModules === null || undisplayedModules === null) { | |
| this.requestDomainModules(); | |
| } | |
| //await AsyncStorage.setItem(DOMAIN_MODAL_EXPLORE_YOUR_PLAN, '0'); | |
| let exploreTimes = +(await AsyncStorage.getItem(DOMAIN_MODAL_EXPLORE_YOUR_PLAN)); | |
| if (exploreTimes < 1) { | |
| this.setState({currentOverlay: overlays.EXPLORE_YOUR_PLAN}); | |
| } | |
| } | |
| render() { | |
| const { displayedModules, undisplayedModules, selectedModule, currentOverlay } = this.state; | |
| const { maxVisiblePendingModules, selectedDomain, navigator, maxOngoing, user } = this.props; | |
| if (displayedModules == null || undisplayedModules == null) { | |
| return (<View></View>); | |
| } | |
| let addingDisabled = displayedModules.length == maxOngoing; | |
| let upcoming = undisplayedModules.filter(m => ['MASTERED_UNMASTERED', | |
| 'PENDING', 'IGNORED'].includes(m.status) && m.domain === selectedDomain); | |
| let masteredModules = undisplayedModules.filter(m => ['MASTERED_LOCKED', 'MASTERED'].includes(m.status) && (m.domain === selectedDomain)); | |
| let visiblePendingModules = upcoming.length > maxVisiblePendingModules && !this.state.showMore ?upcoming.slice(0, maxVisiblePendingModules) : upcoming; | |
| return ( | |
| <View style={{flex:1}}> | |
| {currentOverlay == overlays.EXPLORE_YOUR_PLAN && <OverlayModal | |
| visible={true} | |
| imageSize={{width:121, height:111}} | |
| mainButtonBckColor={DOMAINS[selectedDomain].color} | |
| onButtonClicked={async () => { | |
| await AsyncStorage.setItem(DOMAIN_MODAL_EXPLORE_YOUR_PLAN, '1'); | |
| this.setState({currentOverlay: null}); | |
| } | |
| } | |
| {...I18n.t('domains.overlays.exploreYourPlan')} | |
| subtitle={I18n.t('domains.overlays.exploreYourPlan.subtitle', {maxOngoing})} // just because it doesn't work on objects | |
| />} | |
| {currentOverlay == overlays.HEADS_UP && <OverlayModal | |
| visible={true} | |
| mainButtonBckColor={DOMAINS[selectedDomain].color} | |
| imageSize={{width:121, height:111}} | |
| onButtonClicked={() => { | |
| const { navigateAfter, module } = this.state.overlayPayload; | |
| this.startPendingModule(module, navigateAfter ); | |
| this.setState({currentOverlay:null}); | |
| }} | |
| onSecondaryButtonClicked={() => this.setState({currentOverlay: null})} | |
| {...I18n.t('domains.overlays.headsUp')} | |
| />} | |
| {currentOverlay == overlays.FULLY_BOOKED && <OverlayModal | |
| visible={true} | |
| mainButtonBckColor={DOMAINS[selectedDomain].color} | |
| onButtonClicked={() => this.setState({currentOverlay:null})} | |
| imageSize={{width:121, height:111}} | |
| {...I18n.t('domains.overlays.fullyBooked')} | |
| />} | |
| {currentOverlay == overlays.SO_SOON && <OverlayModal | |
| visible={true} | |
| mainButtonBckColor={DOMAINS[selectedDomain].color} | |
| imageSize={{width:121, height:111}} | |
| onButtonClicked={() => { | |
| this.postponeModule(this.state.moduleId); | |
| this.setState({currentOverlay:null}); | |
| }} | |
| onSecondaryButtonClicked={() => {this.setState({currentOverlay:null});}} | |
| {...I18n.t('domains.overlays.soSoon')} | |
| />} | |
| {currentOverlay == overlays.WAIT_UP && <OverlayModal | |
| visible={true} | |
| imageSize={{width:121, height:111}} | |
| mainButtonBckColor={DOMAINS[selectedDomain].color} | |
| {...I18n.t('domains.overlays.waitUp')} | |
| subtitle={I18n.t('domains.overlays.waitUp.subtitle', this.state)} | |
| onButtonClicked={() => { | |
| this.setState({currentOverlay:null, pendingMasteredModule: null}); | |
| }} | |
| />} | |
| {currentOverlay == overlays.MASTERED_LOCKED && <OverlayModal | |
| visible={true} | |
| imageSize={{width:121, height:111}} | |
| mainButtonBckColor={DOMAINS[selectedDomain].color} | |
| {...I18n.t('domains.overlays.masteredLocked')} | |
| onButtonClicked={() => { | |
| this.setState({currentOverlay:null}); | |
| }} | |
| />} | |
| <Header | |
| navigator={navigator} | |
| title={I18n.t(`domains.${selectedDomain}.title`).toUpperCase()} | |
| leftIcon={{ color: COLORS.SLATE, name: 'arrow-back', action: () => navigator.pop() }} /> | |
| <ScrollView contentContainerStyle={{}} style={{flex:1}}> | |
| <View style={{paddingHorizontal: PADDING_HORIZONTAL}}> | |
| <Image style={{alignSelf:'center', marginTop:28, marginBottom: 15}} source={DOMAINS[selectedDomain].screenIcon} /> | |
| <Text style={{ color: COLORS.SLATE, textAlign: 'center', fontFamily:'Lato', fontWeight: 'bold', lineHeight: 20,}}> | |
| {I18n.t(`domains.${selectedDomain}.description`)} | |
| </Text> | |
| <View style={{marginVertical:16, backgroundColor: DOMAINS[selectedDomain].color, height:2, alignSelf: 'stretch'}} /> | |
| </View> | |
| {!displayedModules || displayedModules.length > 0 && <View style={{marginBottom:32}}> | |
| <Text style={[TEXT.DOMAIN_TITLE, {paddingHorizontal: PADDING_HORIZONTAL}]}>{I18n.t('domains.ongoing').toUpperCase()}</Text> | |
| <FlatList | |
| keyExtractor={(item, index) => 'key_' + index} | |
| data={displayedModules} | |
| //CellRendererComponent={({ style, ...props}) => <View style={[style, {elevation:3, margin:10}]} {...props} />} | |
| horizontal={true} | |
| showsHorizontalScrollIndicator={false} | |
| renderItem={item => | |
| // <View style={{ | |
| // backgroundColor: 'salmon', elevation: 3, height: 75, width: 100, margin: 10, | |
| // }}/> | |
| // <View style={[ | |
| // //CONTAINERS.SHADOWED_ONGOING_VIEW, | |
| // {backgroundColor:'green', borderColor:'black', borderWidth:1,width:180, height:100, marginLeft:PADDING_HORIZONTAL}]}/> | |
| <OngoingModuleCard | |
| isSelected={selectedModule === item.item._id} | |
| onPress={e => this.onModuleCardPressed(item.item)} | |
| onStartNow={() => this.navigateToModule(item.item)} | |
| onPostpone={() => this.attemptPostponeModule(item.item._id)} | |
| module={item.item} | |
| user={user}/> | |
| } /> | |
| </View> } | |
| <View style={{paddingHorizontal: PADDING_HORIZONTAL, marginBottom:24}}> | |
| {upcoming.length > 0 && <View style={{marginBottom:16}}> | |
| <Text style={TEXT.DOMAIN_TITLE}>{I18n.t('domains.upcoming').toUpperCase()}</Text> | |
| { visiblePendingModules.map( module => | |
| (<PendingModuleCard | |
| key={module._id} | |
| isSelected={module._id === selectedModule} | |
| onStartPressed={() => this.attemptStartPendingModule(module, true)} | |
| onAddToPlan={()=> { | |
| this.attemptStartPendingModule(module, false); | |
| }} | |
| locked={!!module.pendingMasteredModule} | |
| disabled={module.pendingMasteredModule || addingDisabled} | |
| module={module} | |
| onPress={() => { | |
| if (module.pendingMasteredModule) { | |
| const pendingModule = this.findModule(module.pendingMasteredModule); | |
| this.setState({ currentOverlay: overlays.WAIT_UP, pendingMasteredModule : pendingModule.name}); | |
| } else if (addingDisabled) { | |
| this.setState({ currentOverlay: overlays.FULLY_BOOKED}); | |
| } else { | |
| this.onModuleCardPressed(module); | |
| } | |
| }} />)) } | |
| {upcoming.length > maxVisiblePendingModules && <TouchableOpacity | |
| style={{marginBottom: 12, flexDirection: 'row', justifyContent: 'center'}} | |
| onPress={(item) => { | |
| this.setState({showMore: !this.state.showMore}); | |
| }}> | |
| <Text style={{color: COLORS.BATTLESHIPGREY, fontSize: 10}}> | |
| {this.state.showMore ? I18n.t('domains.showless') : I18n.t('domains.showmore')}</Text> | |
| <Ionicons style={{paddingHorizontal: 8}} size={12} color={COLORS.BATTLESHIPGREY} | |
| name={this.state.showMore ? 'ios-arrow-dropup' : 'ios-arrow-dropdown'}/> | |
| </TouchableOpacity> } | |
| </View>} | |
| <Text style={TEXT.DOMAIN_TITLE}>{I18n.t('domains.mastered').toUpperCase()}</Text> | |
| { masteredModules.length == 0 ? <View style={[{overflow:'visible'},CONTAINERS.SHADOWED_CARD_VIEW]}><GeneralCard | |
| name={I18n.t('domains.noneMastered.title')} | |
| description={I18n.t('domains.noneMastered.description')} | |
| imageSource={DOMAINS.disabledMastered} /></View> : masteredModules.map(module => | |
| <MasteredModuleCard | |
| key={module._id} | |
| onAddToPlan={() => this.attemptStartPendingModule(module, false)} | |
| onStartPressed={() => this.attemptStartPendingModule(module, true)} | |
| onPress={() => { | |
| if (module.status === 'MASTERED_LOCKED') { | |
| this.setState({ currentOverlay: overlays.MASTERED_LOCKED}); | |
| } else { | |
| this.onModuleCardPressed(module); | |
| } | |
| }} | |
| isSelected={module._id === selectedModule} | |
| module={module} />)} | |
| </View> | |
| </ScrollView> | |
| </View>); | |
| } | |
| } | |
| function mapStateToProps(state, ownProps) { | |
| return { | |
| user: state.auth.user, | |
| displayedModules: state.tabs.displayedModules, | |
| undisplayedModules: state.tabs.undisplayedModules, | |
| maxOngoing: state.auth.configuration.maxOngoing, | |
| maxVisiblePendingModules: state.auth.configuration.maxVisiblePendingModules, | |
| selectedDomain: state.tabs.selectedDomain | |
| }; | |
| } | |
| function mapDispatchToProps(dispatch) { | |
| return { | |
| tabsActions: bindActionCreators(tabsActions, dispatch), | |
| tasksActions: bindActionCreators(tasksActions, dispatch), | |
| }; | |
| } | |
| export default connect(mapStateToProps, mapDispatchToProps)(Domain); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment