From beb626d436e8ab6e4c3d7017457611bcc22772dc Mon Sep 17 00:00:00 2001 From: Kichiyaki Date: Sun, 4 Apr 2021 14:31:01 +0200 Subject: [PATCH] add native-base theme --- package.json | 1 + src/libs/native-base/components/Badge.ts | 36 ++ src/libs/native-base/components/Body.ts | 9 + src/libs/native-base/components/Button.ts | 378 +++++++++++++++ src/libs/native-base/components/Card.ts | 35 ++ src/libs/native-base/components/CardItem.ts | 196 ++++++++ src/libs/native-base/components/CheckBox.ts | 35 ++ src/libs/native-base/components/Container.ts | 15 + src/libs/native-base/components/Content.ts | 12 + src/libs/native-base/components/Fab.ts | 23 + src/libs/native-base/components/Footer.ts | 110 +++++ src/libs/native-base/components/FooterTab.ts | 77 +++ src/libs/native-base/components/Form.ts | 84 ++++ src/libs/native-base/components/H1.ts | 11 + src/libs/native-base/components/H2.ts | 11 + src/libs/native-base/components/H3.ts | 11 + src/libs/native-base/components/Header.ts | 374 +++++++++++++++ src/libs/native-base/components/Icon.ts | 10 + src/libs/native-base/components/Input.ts | 17 + src/libs/native-base/components/InputGroup.ts | 130 +++++ src/libs/native-base/components/Item.ts | 240 ++++++++++ src/libs/native-base/components/Label.ts | 10 + src/libs/native-base/components/Left.ts | 9 + src/libs/native-base/components/ListItem.ts | 443 ++++++++++++++++++ .../native-base/components/Picker.android.ts | 12 + src/libs/native-base/components/Picker.ios.ts | 5 + src/libs/native-base/components/Picker.ts | 12 + src/libs/native-base/components/Radio.ts | 27 ++ src/libs/native-base/components/Right.ts | 12 + src/libs/native-base/components/Segment.ts | 55 +++ src/libs/native-base/components/Separator.ts | 47 ++ src/libs/native-base/components/Spinner.ts | 7 + src/libs/native-base/components/Subtitle.ts | 17 + src/libs/native-base/components/SwipeRow.ts | 44 ++ src/libs/native-base/components/Switch.ts | 7 + src/libs/native-base/components/Tab.ts | 8 + src/libs/native-base/components/TabBar.ts | 55 +++ .../native-base/components/TabContainer.ts | 17 + src/libs/native-base/components/TabHeading.ts | 38 ++ src/libs/native-base/components/Text.ts | 15 + src/libs/native-base/components/Textarea.ts | 23 + src/libs/native-base/components/Thumbnail.ts | 38 ++ src/libs/native-base/components/Title.ts | 19 + src/libs/native-base/components/Toast.ts | 39 ++ src/libs/native-base/components/View.ts | 11 + src/libs/native-base/components/index.ts | 250 ++++++++++ src/libs/native-base/index.ts | 4 + src/libs/native-base/useVariables.ts | 5 + src/libs/native-base/variables/platform.ts | 326 +++++++++++++ src/libs/native-base/variables/types.ts | 215 +++++++++ src/screens/App.tsx | 7 +- yarn.lock | 19 + 52 files changed, 3610 insertions(+), 1 deletion(-) create mode 100644 src/libs/native-base/components/Badge.ts create mode 100644 src/libs/native-base/components/Body.ts create mode 100644 src/libs/native-base/components/Button.ts create mode 100644 src/libs/native-base/components/Card.ts create mode 100644 src/libs/native-base/components/CardItem.ts create mode 100644 src/libs/native-base/components/CheckBox.ts create mode 100644 src/libs/native-base/components/Container.ts create mode 100644 src/libs/native-base/components/Content.ts create mode 100644 src/libs/native-base/components/Fab.ts create mode 100644 src/libs/native-base/components/Footer.ts create mode 100644 src/libs/native-base/components/FooterTab.ts create mode 100644 src/libs/native-base/components/Form.ts create mode 100644 src/libs/native-base/components/H1.ts create mode 100644 src/libs/native-base/components/H2.ts create mode 100644 src/libs/native-base/components/H3.ts create mode 100644 src/libs/native-base/components/Header.ts create mode 100644 src/libs/native-base/components/Icon.ts create mode 100644 src/libs/native-base/components/Input.ts create mode 100644 src/libs/native-base/components/InputGroup.ts create mode 100644 src/libs/native-base/components/Item.ts create mode 100644 src/libs/native-base/components/Label.ts create mode 100644 src/libs/native-base/components/Left.ts create mode 100644 src/libs/native-base/components/ListItem.ts create mode 100644 src/libs/native-base/components/Picker.android.ts create mode 100644 src/libs/native-base/components/Picker.ios.ts create mode 100644 src/libs/native-base/components/Picker.ts create mode 100644 src/libs/native-base/components/Radio.ts create mode 100644 src/libs/native-base/components/Right.ts create mode 100644 src/libs/native-base/components/Segment.ts create mode 100644 src/libs/native-base/components/Separator.ts create mode 100644 src/libs/native-base/components/Spinner.ts create mode 100644 src/libs/native-base/components/Subtitle.ts create mode 100644 src/libs/native-base/components/SwipeRow.ts create mode 100644 src/libs/native-base/components/Switch.ts create mode 100644 src/libs/native-base/components/Tab.ts create mode 100644 src/libs/native-base/components/TabBar.ts create mode 100644 src/libs/native-base/components/TabContainer.ts create mode 100644 src/libs/native-base/components/TabHeading.ts create mode 100644 src/libs/native-base/components/Text.ts create mode 100644 src/libs/native-base/components/Textarea.ts create mode 100644 src/libs/native-base/components/Thumbnail.ts create mode 100644 src/libs/native-base/components/Title.ts create mode 100644 src/libs/native-base/components/Toast.ts create mode 100644 src/libs/native-base/components/View.ts create mode 100644 src/libs/native-base/components/index.ts create mode 100644 src/libs/native-base/index.ts create mode 100644 src/libs/native-base/useVariables.ts create mode 100644 src/libs/native-base/variables/platform.ts create mode 100644 src/libs/native-base/variables/types.ts diff --git a/package.json b/package.json index 7ab79cd..8bc93ca 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "@graphql-codegen/typescript": "^1.21.1", "@graphql-codegen/typescript-operations": "^1.17.15", "@react-native-community/eslint-config": "^2.0.0", + "@types/color": "^3.0.1", "@types/jest": "^26.0.20", "@types/lodash": "^4.14.168", "@types/react-native": "^0.64.0", diff --git a/src/libs/native-base/components/Badge.ts b/src/libs/native-base/components/Badge.ts new file mode 100644 index 0000000..2789340 --- /dev/null +++ b/src/libs/native-base/components/Badge.ts @@ -0,0 +1,36 @@ +import variable from '../variables/platform'; + +export default (variables /* : * */ = variable) => { + const badgeTheme = { + '.primary': { + backgroundColor: variables.buttonPrimaryBg, + }, + '.warning': { + backgroundColor: variables.buttonWarningBg, + }, + '.info': { + backgroundColor: variables.buttonInfoBg, + }, + '.success': { + backgroundColor: variables.buttonSuccessBg, + }, + '.danger': { + backgroundColor: variables.buttonDangerBg, + }, + 'NativeBase.Text': { + color: variables.badgeColor, + fontSize: variables.fontSizeBase, + lineHeight: variables.lineHeight - 1, + textAlign: 'center', + paddingHorizontal: 3, + }, + backgroundColor: variables.badgeBg, + padding: variables.badgePadding, + paddingHorizontal: 6, + alignSelf: 'flex-start', + justifyContent: 'center', + borderRadius: 13.5, + height: 27, + }; + return badgeTheme; +}; diff --git a/src/libs/native-base/components/Body.ts b/src/libs/native-base/components/Body.ts new file mode 100644 index 0000000..e33138b --- /dev/null +++ b/src/libs/native-base/components/Body.ts @@ -0,0 +1,9 @@ +export default () => { + const bodyTheme = { + flex: 1, + alignItems: 'center', + alignSelf: 'center', + }; + + return bodyTheme; +}; diff --git a/src/libs/native-base/components/Button.ts b/src/libs/native-base/components/Button.ts new file mode 100644 index 0000000..9c67d58 --- /dev/null +++ b/src/libs/native-base/components/Button.ts @@ -0,0 +1,378 @@ +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + const darkCommon = { + 'NativeBase.Text': { + color: variables.brandDark, + }, + 'NativeBase.Icon': { + color: variables.brandDark, + }, + 'NativeBase.IconNB': { + color: variables.brandDark, + }, + }; + const lightCommon = { + 'NativeBase.Text': { + color: variables.brandLight, + }, + 'NativeBase.Icon': { + color: variables.brandLight, + }, + 'NativeBase.IconNB': { + color: variables.brandLight, + }, + }; + const primaryCommon = { + 'NativeBase.Text': { + color: variables.buttonPrimaryBg, + }, + 'NativeBase.Icon': { + color: variables.buttonPrimaryBg, + }, + 'NativeBase.IconNB': { + color: variables.buttonPrimaryBg, + }, + }; + const successCommon = { + 'NativeBase.Text': { + color: variables.buttonSuccessBg, + }, + 'NativeBase.Icon': { + color: variables.buttonSuccessBg, + }, + 'NativeBase.IconNB': { + color: variables.buttonSuccessBg, + }, + }; + const infoCommon = { + 'NativeBase.Text': { + color: variables.buttonInfoBg, + }, + 'NativeBase.Icon': { + color: variables.buttonInfoBg, + }, + 'NativeBase.IconNB': { + color: variables.buttonInfoBg, + }, + }; + const warningCommon = { + 'NativeBase.Text': { + color: variables.buttonWarningBg, + }, + 'NativeBase.Icon': { + color: variables.buttonWarningBg, + }, + 'NativeBase.IconNB': { + color: variables.buttonWarningBg, + }, + }; + const dangerCommon = { + 'NativeBase.Text': { + color: variables.buttonDangerBg, + }, + 'NativeBase.Icon': { + color: variables.buttonDangerBg, + }, + 'NativeBase.IconNB': { + color: variables.buttonDangerBg, + }, + }; + const buttonTheme = { + '.disabled': { + '.transparent': { + backgroundColor: 'transparent', + 'NativeBase.Text': { + color: variables.buttonDisabledBg, + }, + 'NativeBase.Icon': { + color: variables.buttonDisabledBg, + }, + 'NativeBase.IconNB': { + color: variables.buttonDisabledBg, + }, + }, + 'NativeBase.Icon': { + color: variables.brandLight, + }, + 'NativeBase.IconNB': { + color: variables.brandLight, + }, + backgroundColor: variables.buttonDisabledBg, + }, + '.bordered': { + '.dark': { + ...darkCommon, + backgroundColor: 'transparent', + borderColor: variables.brandDark, + borderWidth: variables.borderWidth * 2, + }, + '.light': { + ...lightCommon, + backgroundColor: 'transparent', + borderColor: variables.brandLight, + borderWidth: variables.borderWidth * 2, + }, + '.primary': { + ...primaryCommon, + backgroundColor: 'transparent', + borderColor: variables.buttonPrimaryBg, + borderWidth: variables.borderWidth * 2, + }, + '.success': { + ...successCommon, + backgroundColor: 'transparent', + borderColor: variables.buttonSuccessBg, + borderWidth: variables.borderWidth * 2, + }, + '.info': { + ...infoCommon, + backgroundColor: 'transparent', + borderColor: variables.buttonInfoBg, + borderWidth: variables.borderWidth * 2, + }, + '.warning': { + ...warningCommon, + backgroundColor: 'transparent', + borderColor: variables.buttonWarningBg, + borderWidth: variables.borderWidth * 2, + }, + '.danger': { + ...dangerCommon, + backgroundColor: 'transparent', + borderColor: variables.buttonDangerBg, + borderWidth: variables.borderWidth * 2, + }, + '.disabled': { + backgroundColor: 'transparent', + borderColor: variables.buttonDisabledBg, + borderWidth: variables.borderWidth * 2, + 'NativeBase.Text': { + color: variables.buttonDisabledBg, + }, + }, + ...primaryCommon, + borderWidth: variables.borderWidth * 2, + elevation: null, + shadowColor: null, + shadowOffset: null, + shadowOpacity: null, + shadowRadius: null, + backgroundColor: 'transparent', + }, + + '.dark': { + '.bordered': { + ...darkCommon, + }, + backgroundColor: variables.brandDark, + }, + '.light': { + '.transparent': { + ...lightCommon, + backgroundColor: 'transparent', + }, + '.bordered': { + ...lightCommon, + }, + ...darkCommon, + backgroundColor: variables.brandLight, + }, + + '.primary': { + '.bordered': { + ...primaryCommon, + }, + backgroundColor: variables.buttonPrimaryBg, + }, + + '.success': { + '.bordered': { + ...successCommon, + }, + backgroundColor: variables.buttonSuccessBg, + }, + + '.info': { + '.bordered': { + ...infoCommon, + }, + backgroundColor: variables.buttonInfoBg, + }, + + '.warning': { + '.bordered': { + ...warningCommon, + }, + backgroundColor: variables.buttonWarningBg, + }, + + '.danger': { + '.bordered': { + ...dangerCommon, + }, + backgroundColor: variables.buttonDangerBg, + }, + + '.block': { + justifyContent: 'center', + alignSelf: 'stretch', + }, + + '.full': { + justifyContent: 'center', + alignSelf: 'stretch', + borderRadius: 0, + }, + + '.rounded': { + borderRadius: variables.borderRadiusLarge, + }, + + '.transparent': { + backgroundColor: 'transparent', + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + ...primaryCommon, + '.dark': { + ...darkCommon, + }, + '.danger': { + ...dangerCommon, + }, + '.warning': { + ...warningCommon, + }, + '.info': { + ...infoCommon, + }, + '.primary': { + ...primaryCommon, + }, + '.success': { + ...successCommon, + }, + '.light': { + ...lightCommon, + }, + '.disabled': { + backgroundColor: 'transparent', + borderColor: variables.buttonDisabledBg, + borderWidth: variables.borderWidth * 2, + 'NativeBase.Text': { + color: variables.buttonDisabledBg, + }, + 'NativeBase.Icon': { + color: variables.buttonDisabledBg, + }, + 'NativeBase.IconNB': { + color: variables.buttonDisabledBg, + }, + }, + }, + + '.small': { + height: 30, + 'NativeBase.Text': { + fontSize: 14, + }, + 'NativeBase.Icon': { + fontSize: 20, + paddingTop: 0, + }, + 'NativeBase.IconNB': { + fontSize: 20, + paddingTop: 0, + }, + }, + + '.large': { + height: 60, + 'NativeBase.Text': { + fontSize: 22, + }, + }, + + '.capitalize': {}, + + '.vertical': { + flexDirection: 'column', + height: null, + }, + + 'NativeBase.Text': { + fontFamily: variables.buttonFontFamily, + marginLeft: 0, + marginRight: 0, + color: variables.inverseTextColor, + fontSize: variables.buttonTextSize, + paddingHorizontal: 16, + backgroundColor: 'transparent', + }, + + 'NativeBase.Icon': { + color: variables.inverseTextColor, + fontSize: 24, + marginHorizontal: 16, + paddingTop: platform === OS.IOS ? 2 : undefined, + }, + 'NativeBase.IconNB': { + color: variables.inverseTextColor, + fontSize: 24, + marginHorizontal: 16, + paddingTop: platform === OS.IOS ? 2 : undefined, + }, + + '.iconLeft': { + 'NativeBase.Text': { + marginLeft: 0, + }, + 'NativeBase.IconNB': { + marginRight: 0, + marginLeft: 16, + }, + 'NativeBase.Icon': { + marginRight: 0, + marginLeft: 16, + }, + }, + '.iconRight': { + 'NativeBase.Text': { + marginRight: 0, + }, + 'NativeBase.IconNB': { + marginLeft: 0, + marginRight: 16, + }, + 'NativeBase.Icon': { + marginLeft: 0, + marginRight: 16, + }, + }, + '.picker': { + 'NativeBase.Text': { + '.note': { + fontSize: 16, + lineHeight: null, + }, + }, + }, + paddingVertical: variables.buttonPadding, + backgroundColor: variables.buttonPrimaryBg, + borderRadius: variables.borderRadiusBase, + borderColor: variables.buttonPrimaryBg, + borderWidth: null, + height: 45, + flexDirection: 'row', + elevation: 2, + alignItems: 'center', + justifyContent: 'space-between', + alignSelf: 'flex-start', + }; + return buttonTheme; +}; diff --git a/src/libs/native-base/components/Card.ts b/src/libs/native-base/components/Card.ts new file mode 100644 index 0000000..10baf3a --- /dev/null +++ b/src/libs/native-base/components/Card.ts @@ -0,0 +1,35 @@ +import variable from '../variables/platform'; + +export default (variables /* : * */ = variable) => { + const cardTheme = { + '.transparent': { + shadowColor: null, + shadowOffset: null, + shadowOpacity: null, + shadowRadius: null, + elevation: null, + backgroundColor: 'transparent', + borderWidth: 0, + }, + '.noShadow': { + shadowColor: null, + shadowOffset: null, + shadowOpacity: null, + elevation: null, + }, + marginVertical: 5, + marginHorizontal: 2, + borderWidth: variables.borderWidth, + borderRadius: variables.cardBorderRadius, + borderColor: variables.cardBorderColor, + flexWrap: 'nowrap', + backgroundColor: variables.cardDefaultBg, + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.1, + shadowRadius: 1.5, + elevation: 3, + }; + + return cardTheme; +}; diff --git a/src/libs/native-base/components/CardItem.ts b/src/libs/native-base/components/CardItem.ts new file mode 100644 index 0000000..c28fa86 --- /dev/null +++ b/src/libs/native-base/components/CardItem.ts @@ -0,0 +1,196 @@ +import { StyleSheet } from 'react-native'; + +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + const transparentBtnCommon = { + 'NativeBase.Text': { + fontSize: variables.DefaultFontSize - 3, + color: variables.sTabBarActiveTextColor, + }, + 'NativeBase.Icon': { + fontSize: variables.iconFontSize - 10, + color: variables.sTabBarActiveTextColor, + marginHorizontal: null, + }, + 'NativeBase.IconNB': { + fontSize: variables.iconFontSize - 10, + color: variables.sTabBarActiveTextColor, + }, + paddingVertical: null, + paddingHorizontal: null, + }; + + const cardItemTheme = { + 'NativeBase.Left': { + 'NativeBase.Body': { + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '400', + marginRight: 20, + }, + }, + flex: 1, + marginLeft: 10, + alignItems: null, + }, + 'NativeBase.Icon': { + fontSize: variables.iconFontSize, + }, + 'NativeBase.IconNB': { + fontSize: variables.iconFontSize, + }, + 'NativeBase.Text': { + marginLeft: 10, + alignSelf: 'center', + }, + 'NativeBase.Button': { + '.transparent': { + ...transparentBtnCommon, + paddingRight: variables.cardItemPadding + 5, + }, + }, + flex: 1, + flexDirection: 'row', + alignItems: 'center', + }, + '.content': { + 'NativeBase.Text': { + color: platform === OS.IOS ? '#555' : '#222', + fontSize: variables.DefaultFontSize - 2, + }, + }, + '.cardBody': { + padding: -5, + 'NativeBase.Text': { + marginTop: 5, + }, + }, + 'NativeBase.Body': { + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '200', + marginRight: 20, + }, + }, + 'NativeBase.Button': { + '.transparent': { + ...transparentBtnCommon, + paddingRight: variables.cardItemPadding + 5, + alignSelf: 'stretch', + }, + }, + flex: 1, + alignSelf: 'stretch', + alignItems: 'flex-start', + }, + 'NativeBase.Right': { + 'NativeBase.Badge': { + alignSelf: null, + }, + 'NativeBase.Button': { + '.transparent': { + ...transparentBtnCommon, + }, + alignSelf: null, + }, + 'NativeBase.Icon': { + alignSelf: null, + fontSize: variables.iconFontSize - 8, + color: variables.cardBorderColor, + }, + 'NativeBase.IconNB': { + alignSelf: null, + fontSize: variables.iconFontSize - 8, + color: variables.cardBorderColor, + }, + 'NativeBase.Text': { + fontSize: variables.DefaultFontSize - 1, + alignSelf: null, + }, + 'NativeBase.Thumbnail': { + alignSelf: null, + }, + 'NativeBase.Image': { + alignSelf: null, + }, + 'NativeBase.Radio': { + alignSelf: null, + }, + 'NativeBase.Checkbox': { + alignSelf: null, + }, + 'NativeBase.Switch': { + alignSelf: null, + }, + flex: 0.8, + }, + '.header': { + 'NativeBase.Text': { + fontSize: 16, + fontWeight: platform === OS.IOS ? '600' : '500', + }, + '.bordered': { + 'NativeBase.Text': { + color: variables.brandPrimary, + fontWeight: platform === OS.IOS ? '600' : '500', + }, + borderBottomWidth: variables.borderWidth, + }, + borderBottomWidth: null, + paddingVertical: variables.cardItemPadding + 5, + }, + '.footer': { + 'NativeBase.Text': { + fontSize: 16, + fontWeight: platform === OS.IOS ? '600' : '500', + }, + '.bordered': { + 'NativeBase.Text': { + color: variables.brandPrimary, + fontWeight: platform === OS.IOS ? '600' : '500', + }, + borderTopWidth: variables.borderWidth, + }, + borderBottomWidth: null, + }, + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '200', + }, + }, + 'NativeBase.Icon': { + width: variables.iconFontSize + 5, + fontSize: variables.iconFontSize - 2, + }, + 'NativeBase.IconNB': { + width: variables.iconFontSize + 5, + fontSize: variables.iconFontSize - 2, + }, + '.bordered': { + borderBottomWidth: StyleSheet.hairlineWidth, + borderColor: variables.cardBorderColor, + }, + '.first': { + borderTopLeftRadius: variables.cardBorderRadius, + borderTopRightRadius: variables.cardBorderRadius, + }, + '.last': { + borderBottomLeftRadius: variables.cardBorderRadius, + borderBottomRightRadius: variables.cardBorderRadius, + }, + flexDirection: 'row', + alignItems: 'center', + borderRadius: variables.cardBorderRadius, + padding: variables.cardItemPadding + 5, + paddingVertical: variables.cardItemPadding, + backgroundColor: variables.cardDefaultBg, + }; + + return cardItemTheme; +}; diff --git a/src/libs/native-base/components/CheckBox.ts b/src/libs/native-base/components/CheckBox.ts new file mode 100644 index 0000000..cb72883 --- /dev/null +++ b/src/libs/native-base/components/CheckBox.ts @@ -0,0 +1,35 @@ +import variable from '../variables/platform'; + +export default (variables /* : * */ = variable) => { + const checkBoxTheme = { + '.checked': { + 'NativeBase.Icon': { + color: variables.checkboxTickColor, + }, + 'NativeBase.IconNB': { + color: variables.checkboxTickColor, + }, + }, + 'NativeBase.Icon': { + color: 'transparent', + lineHeight: variables.CheckboxIconSize, + marginTop: variables.CheckboxIconMarginTop, + fontSize: variables.CheckboxFontSize, + }, + 'NativeBase.IconNB': { + color: 'transparent', + lineHeight: variables.CheckboxIconSize, + marginTop: variables.CheckboxIconMarginTop, + fontSize: variables.CheckboxFontSize, + }, + overflow: 'hidden', + width: variables.checkboxSize, + height: variables.checkboxSize, + borderWidth: variables.CheckboxBorderWidth, + paddingLeft: variables.CheckboxPaddingLeft - 1, + paddingBottom: variables.CheckboxPaddingBottom, + left: 10, + }; + + return checkBoxTheme; +}; diff --git a/src/libs/native-base/components/Container.ts b/src/libs/native-base/components/Container.ts new file mode 100644 index 0000000..1e06dd6 --- /dev/null +++ b/src/libs/native-base/components/Container.ts @@ -0,0 +1,15 @@ +import { Platform, Dimensions } from 'react-native'; + +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +const deviceHeight = Dimensions.get('window').height; +export default (variables /* : * */ = variable) => { + const theme = { + flex: 1, + height: Platform.OS === OS.IOS ? deviceHeight : deviceHeight - 20, + backgroundColor: variables.containerBgColor, + }; + + return theme; +}; diff --git a/src/libs/native-base/components/Content.ts b/src/libs/native-base/components/Content.ts new file mode 100644 index 0000000..7824880 --- /dev/null +++ b/src/libs/native-base/components/Content.ts @@ -0,0 +1,12 @@ +export default () => { + const contentTheme = { + flex: 1, + backgroundColor: 'transparent', + 'NativeBase.Segment': { + borderWidth: 0, + backgroundColor: 'transparent', + }, + }; + + return contentTheme; +}; diff --git a/src/libs/native-base/components/Fab.ts b/src/libs/native-base/components/Fab.ts new file mode 100644 index 0000000..9a161d4 --- /dev/null +++ b/src/libs/native-base/components/Fab.ts @@ -0,0 +1,23 @@ +export default () => { + const fabTheme = { + 'NativeBase.Button': { + alignItems: 'center', + padding: null, + justifyContent: 'center', + 'NativeBase.Icon': { + alignSelf: 'center', + fontSize: 20, + marginLeft: 0, + marginRight: 0, + }, + 'NativeBase.IconNB': { + alignSelf: 'center', + fontSize: 20, + marginLeft: 0, + marginRight: 0, + }, + }, + }; + + return fabTheme; +}; diff --git a/src/libs/native-base/components/Footer.ts b/src/libs/native-base/components/Footer.ts new file mode 100644 index 0000000..4a4a02c --- /dev/null +++ b/src/libs/native-base/components/Footer.ts @@ -0,0 +1,110 @@ +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + + const iconCommon = { + 'NativeBase.Icon': { + color: variables.tabBarActiveTextColor, + }, + }; + const iconNBCommon = { + 'NativeBase.IconNB': { + color: variables.tabBarActiveTextColor, + }, + }; + const textCommon = { + 'NativeBase.Text': { + color: variables.tabBarActiveTextColor, + }, + }; + const footerTheme = { + 'NativeBase.Left': { + 'NativeBase.Button': { + '.transparent': { + backgroundColor: 'transparent', + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + ...iconCommon, + ...iconNBCommon, + ...textCommon, + }, + alignSelf: null, + ...iconCommon, + ...iconNBCommon, + // ...textCommon + }, + flex: 1, + alignSelf: 'center', + alignItems: 'flex-start', + }, + 'NativeBase.Body': { + flex: 1, + alignItems: 'center', + alignSelf: 'center', + flexDirection: 'row', + 'NativeBase.Button': { + alignSelf: 'center', + '.transparent': { + backgroundColor: 'transparent', + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + ...iconCommon, + ...iconNBCommon, + ...textCommon, + }, + '.full': { + height: variables.footerHeight, + paddingBottom: variables.footerPaddingBottom, + flex: 1, + }, + ...iconCommon, + ...iconNBCommon, + // ...textCommon + }, + }, + 'NativeBase.Right': { + 'NativeBase.Button': { + '.transparent': { + backgroundColor: 'transparent', + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + ...iconCommon, + ...iconNBCommon, + ...textCommon, + }, + alignSelf: null, + ...iconCommon, + ...iconNBCommon, + // ...textCommon + }, + flex: 1, + alignSelf: 'center', + alignItems: 'flex-end', + }, + backgroundColor: variables.footerDefaultBg, + flexDirection: 'row', + justifyContent: 'center', + borderTopWidth: platform === OS.IOS ? variables.borderWidth : undefined, + borderColor: platform === OS.IOS ? '#cbcbcb' : undefined, + height: variables.footerHeight, + paddingBottom: variables.footerPaddingBottom, + elevation: 3, + left: 0, + right: 0, + }; + return footerTheme; +}; diff --git a/src/libs/native-base/components/FooterTab.ts b/src/libs/native-base/components/FooterTab.ts new file mode 100644 index 0000000..08c9b82 --- /dev/null +++ b/src/libs/native-base/components/FooterTab.ts @@ -0,0 +1,77 @@ +import { Platform } from 'react-native'; + +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + + const footerTabTheme = { + 'NativeBase.Button': { + '.active': { + 'NativeBase.Text': { + color: variables.tabBarActiveTextColor, + fontSize: variables.tabBarTextSize, + lineHeight: 16, + }, + 'NativeBase.Icon': { + color: variables.tabBarActiveTextColor, + }, + 'NativeBase.IconNB': { + color: variables.tabBarActiveTextColor, + }, + backgroundColor: variables.tabActiveBgColor, + }, + flexDirection: null, + backgroundColor: 'transparent', + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + alignSelf: 'center', + flex: 1, + height: variables.footerHeight, + justifyContent: 'center', + '.badge': { + 'NativeBase.Badge': { + 'NativeBase.Text': { + fontSize: 11, + fontWeight: platform === OS.IOS ? '600' : undefined, + lineHeight: 14, + }, + top: -3, + alignSelf: 'center', + left: 10, + zIndex: 99, + height: 18, + padding: 1.7, + paddingHorizontal: 3, + }, + 'NativeBase.Icon': { + marginTop: -18, + }, + }, + 'NativeBase.Icon': { + color: variables.tabBarTextColor, + }, + 'NativeBase.IconNB': { + color: variables.tabBarTextColor, + }, + 'NativeBase.Text': { + color: variables.tabBarTextColor, + fontSize: variables.tabBarTextSize, + lineHeight: 16, + }, + }, + backgroundColor: + Platform.OS === OS.Android ? variables.footerDefaultBg : undefined, + flexDirection: 'row', + justifyContent: 'space-between', + flex: 1, + alignSelf: 'stretch', + }; + + return footerTabTheme; +}; diff --git a/src/libs/native-base/components/Form.ts b/src/libs/native-base/components/Form.ts new file mode 100644 index 0000000..366e10e --- /dev/null +++ b/src/libs/native-base/components/Form.ts @@ -0,0 +1,84 @@ +export default () => { + const theme = { + 'NativeBase.Item': { + '.fixedLabel': { + 'NativeBase.Label': { + paddingLeft: null, + }, + marginLeft: 15, + }, + '.inlineLabel': { + 'NativeBase.Label': { + paddingLeft: null, + }, + marginLeft: 15, + }, + '.placeholderLabel': { + 'NativeBase.Input': {}, + }, + '.stackedLabel': { + 'NativeBase.Label': { + top: 5, + paddingLeft: null, + }, + 'NativeBase.Input': { + paddingLeft: null, + marginLeft: null, + }, + 'NativeBase.Icon': { + marginTop: 36, + }, + marginLeft: 15, + }, + '.floatingLabel': { + 'NativeBase.Input': { + paddingLeft: null, + top: 10, + marginLeft: null, + }, + 'NativeBase.Label': { + left: 0, + top: 6, + }, + 'NativeBase.Icon': { + top: 6, + }, + marginTop: 15, + marginLeft: 15, + }, + '.regular': { + 'NativeBase.Label': { + left: 0, + }, + marginLeft: 0, + }, + '.rounded': { + 'NativeBase.Label': { + left: 0, + }, + marginLeft: 0, + }, + '.underline': { + 'NativeBase.Label': { + left: 0, + top: 0, + position: 'relative', + }, + 'NativeBase.Input': { + left: -15, + }, + marginLeft: 15, + }, + '.last': { + marginLeft: 0, + paddingLeft: 15, + }, + 'NativeBase.Label': { + paddingRight: 5, + }, + marginLeft: 15, + }, + }; + + return theme; +}; diff --git a/src/libs/native-base/components/H1.ts b/src/libs/native-base/components/H1.ts new file mode 100644 index 0000000..06f5c87 --- /dev/null +++ b/src/libs/native-base/components/H1.ts @@ -0,0 +1,11 @@ +import variable from '../variables/platform'; + +export default (variables /* : * */ = variable) => { + const h1Theme = { + color: variables.textColor, + fontSize: variables.fontSizeH1, + lineHeight: variables.lineHeightH1, + }; + + return h1Theme; +}; diff --git a/src/libs/native-base/components/H2.ts b/src/libs/native-base/components/H2.ts new file mode 100644 index 0000000..ab228e9 --- /dev/null +++ b/src/libs/native-base/components/H2.ts @@ -0,0 +1,11 @@ +import variable from '../variables/platform'; + +export default (variables /* : * */ = variable) => { + const h2Theme = { + color: variables.textColor, + fontSize: variables.fontSizeH2, + lineHeight: variables.lineHeightH2, + }; + + return h2Theme; +}; diff --git a/src/libs/native-base/components/H3.ts b/src/libs/native-base/components/H3.ts new file mode 100644 index 0000000..e38f779 --- /dev/null +++ b/src/libs/native-base/components/H3.ts @@ -0,0 +1,11 @@ +import variable from '../variables/platform'; + +export default (variables /* : * */ = variable) => { + const h3Theme = { + color: variables.textColor, + fontSize: variables.fontSizeH3, + lineHeight: variables.lineHeightH3, + }; + + return h3Theme; +}; diff --git a/src/libs/native-base/components/Header.ts b/src/libs/native-base/components/Header.ts new file mode 100644 index 0000000..7efb14f --- /dev/null +++ b/src/libs/native-base/components/Header.ts @@ -0,0 +1,374 @@ +import { PixelRatio, StatusBar } from 'react-native'; + +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + + const headerTheme = { + '.span': { + height: 128, + 'NativeBase.Left': { + alignSelf: 'flex-start', + }, + 'NativeBase.Body': { + alignSelf: 'flex-end', + alignItems: 'flex-start', + justifyContent: 'center', + paddingBottom: 26, + }, + 'NativeBase.Right': { + alignSelf: 'flex-start', + }, + }, + '.hasSubtitle': { + 'NativeBase.Body': { + 'NativeBase.Title': { + fontSize: variables.titleFontSize - 2, + fontFamily: variables.titleFontFamily, + textAlign: 'center', + fontWeight: '500', + paddingBottom: 3, + }, + 'NativeBase.Subtitle': { + fontSize: variables.subTitleFontSize, + fontFamily: variables.titleFontFamily, + color: variables.subtitleColor, + textAlign: 'center', + }, + }, + }, + '.transparent': { + backgroundColor: 'transparent', + borderBottomColor: 'transparent', + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + paddingTop: platform === OS.Android ? StatusBar.currentHeight : undefined, + height: + platform === OS.Android + ? variables.toolbarHeight + (StatusBar.currentHeight ?? 0) + : variables.toolbarHeight, + }, + '.noShadow': { + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + }, + '.hasTabs': { + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + borderBottomWidth: null, + }, + '.hasSegment': { + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + borderBottomWidth: null, + 'NativeBase.Left': { + flex: 0.3, + }, + 'NativeBase.Right': { + flex: 0.3, + }, + 'NativeBase.Body': { + flex: 1, + 'NativeBase.Segment': { + marginRight: 0, + alignSelf: 'center', + 'NativeBase.Button': { + paddingLeft: 0, + paddingRight: 0, + }, + }, + }, + }, + '.noLeft': { + 'NativeBase.Left': { + width: platform === OS.IOS ? undefined : 0, + flex: platform === OS.IOS ? 1 : 0, + }, + 'NativeBase.Body': { + 'NativeBase.Title': { + paddingLeft: platform === OS.IOS ? undefined : 10, + }, + 'NativeBase.Subtitle': { + paddingLeft: platform === OS.IOS ? undefined : 10, + }, + }, + }, + 'NativeBase.Button': { + justifyContent: 'center', + alignSelf: 'center', + alignItems: 'center', + '.transparent': { + 'NativeBase.Text': { + color: variables.toolbarBtnTextColor, + fontWeight: '600', + }, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor, + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor, + }, + paddingHorizontal: variables.buttonPadding, + }, + paddingHorizontal: 15, + }, + '.searchBar': { + 'NativeBase.Item': { + 'NativeBase.Icon': { + backgroundColor: 'transparent', + color: variables.dropdownLinkColor, + fontSize: variables.toolbarSearchIconSize, + alignItems: 'center', + marginTop: 2, + paddingRight: 10, + paddingLeft: 10, + }, + 'NativeBase.IconNB': { + backgroundColor: 'transparent', + color: null, + alignSelf: 'center', + }, + 'NativeBase.Input': { + alignSelf: 'center', + lineHeight: null, + height: variables.searchBarInputHeight, + }, + alignSelf: 'center', + alignItems: 'center', + justifyContent: 'flex-start', + flex: 1, + height: variables.searchBarHeight, + borderColor: 'transparent', + backgroundColor: variables.toolbarInputColor, + }, + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontWeight: '500', + }, + paddingHorizontal: null, + paddingLeft: platform === OS.IOS ? 10 : null, + }, + paddingHorizontal: platform === OS.IOS ? undefined : null, + width: platform === OS.IOS ? undefined : 0, + height: platform === OS.IOS ? undefined : 0, + }, + }, + '.rounded': { + 'NativeBase.Item': { + borderRadius: platform === OS.IOS ? 25 : 3, + }, + }, + 'NativeBase.Left': { + 'NativeBase.Button': { + '.hasText': { + marginLeft: -10, + height: 30, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize, + marginTop: 2, + marginRight: 5, + marginLeft: 2, + }, + 'NativeBase.Text': { + color: variables.toolbarBtnTextColor, + fontSize: platform === OS.IOS ? 17 : 0, + marginLeft: 7, + lineHeight: 19.5, + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize, + marginTop: 2, + marginRight: 5, + marginLeft: 2, + }, + }, + '.transparent': { + marginLeft: platform === OS.IOS ? -3 : 0, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor, + fontSize: + platform === OS.IOS + ? variables.iconHeaderSize + 1 + : variables.iconHeaderSize, + marginTop: 0, + marginRight: 2, + marginLeft: 1, + paddingTop: 1, + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor, + fontSize: + platform === OS.IOS + ? variables.iconHeaderSize + 1 + : variables.iconHeaderSize - 2, + marginTop: 0, + marginRight: 2, + marginLeft: 1, + paddingTop: 1, + }, + 'NativeBase.Text': { + color: variables.toolbarBtnTextColor, + fontSize: platform === OS.IOS ? 17 : 14, + top: platform === OS.IOS ? 1 : -1.5, + paddingLeft: platform === OS.IOS ? 2 : 5, + paddingRight: platform === OS.IOS ? undefined : 10, + }, + backgroundColor: 'transparent', + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + }, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor, + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor, + }, + alignSelf: null, + paddingRight: variables.buttonPadding, + paddingLeft: platform === OS.IOS ? 4 : 8, + }, + flex: platform === OS.IOS ? 1 : 0.4, + alignSelf: 'center', + alignItems: 'flex-start', + }, + 'NativeBase.Body': { + flex: 1, + alignItems: platform === OS.IOS ? 'center' : 'flex-start', + alignSelf: 'center', + 'NativeBase.Segment': { + borderWidth: 0, + alignSelf: 'flex-end', + marginRight: platform === OS.IOS ? -40 : -55, + }, + 'NativeBase.Button': { + alignSelf: 'center', + '.transparent': { + backgroundColor: 'transparent', + }, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor, + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor, + }, + 'NativeBase.Text': { + color: variables.inverseTextColor, + backgroundColor: 'transparent', + }, + }, + }, + 'NativeBase.Right': { + 'NativeBase.Button': { + '.hasText': { + height: 30, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize - 2, + marginTop: 2, + marginRight: 2, + marginLeft: 5, + }, + 'NativeBase.Text': { + color: variables.toolbarBtnTextColor, + fontSize: platform === OS.IOS ? 17 : 14, + lineHeight: 19.5, + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize - 2, + marginTop: 2, + marginRight: 2, + marginLeft: 5, + }, + }, + '.transparent': { + marginRight: platform === OS.IOS ? -9 : -5, + paddingLeft: 15, + paddingRight: 12, + paddingHorizontal: 15, + borderRadius: 50, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize - 2, + marginTop: 0, + marginLeft: 2, + marginRight: 0, + // paddingTop: 0 + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor, + fontSize: variables.iconHeaderSize - 2, + marginTop: 0, + marginLeft: 2, + marginRight: 0, + // paddingTop: 0 + }, + 'NativeBase.Text': { + color: variables.toolbarBtnTextColor, + fontSize: platform === OS.IOS ? 17 : 14, + top: platform === OS.IOS ? 1 : -1.5, + paddingRight: platform === OS.IOS ? 0 : undefined, + }, + backgroundColor: 'transparent', + borderColor: null, + elevation: 0, + shadowColor: null, + shadowOffset: null, + shadowRadius: null, + shadowOpacity: null, + }, + 'NativeBase.Icon': { + color: variables.toolbarBtnColor, + }, + 'NativeBase.IconNB': { + color: variables.toolbarBtnColor, + }, + alignSelf: null, + paddingHorizontal: variables.buttonPadding, + }, + flex: 1, + alignSelf: 'center', + alignItems: 'flex-end', + flexDirection: 'row', + justifyContent: 'flex-end', + }, + backgroundColor: variables.toolbarDefaultBg, + flexDirection: 'row', + // paddingHorizontal: 10, + paddingLeft: platform === OS.IOS ? 6 : 10, + paddingRight: 10, + justifyContent: 'center', + // paddingTop: platform === PLATFORM.IOS ? 18 : 0, + borderBottomWidth: + platform === OS.IOS ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0, + borderBottomColor: variables.toolbarDefaultBorder, + height: variables.toolbarHeight, + elevation: 3, + top: 0, + left: 0, + right: 0, + }; + + return headerTheme; +}; diff --git a/src/libs/native-base/components/Icon.ts b/src/libs/native-base/components/Icon.ts new file mode 100644 index 0000000..f0431ea --- /dev/null +++ b/src/libs/native-base/components/Icon.ts @@ -0,0 +1,10 @@ +import variable from '../variables/platform'; + +export default (variables /* : * */ = variable) => { + const iconTheme = { + fontSize: variables.iconFontSize, + color: variables.textColor, + }; + + return iconTheme; +}; diff --git a/src/libs/native-base/components/Input.ts b/src/libs/native-base/components/Input.ts new file mode 100644 index 0000000..14e03bf --- /dev/null +++ b/src/libs/native-base/components/Input.ts @@ -0,0 +1,17 @@ +import variable from '../variables/platform'; + +export default (variables /* : * */ = variable) => { + const inputTheme = { + '.multiline': { + height: null, + }, + height: variables.inputHeightBase, + color: variables.inputColor, + paddingLeft: 5, + paddingRight: 5, + flex: 1, + fontSize: variables.inputFontSize, + }; + + return inputTheme; +}; diff --git a/src/libs/native-base/components/InputGroup.ts b/src/libs/native-base/components/InputGroup.ts new file mode 100644 index 0000000..231b214 --- /dev/null +++ b/src/libs/native-base/components/InputGroup.ts @@ -0,0 +1,130 @@ +import variable from '../variables/platform'; + +export default (variables /* : * */ = variable) => { + const inputGroupTheme = { + 'NativeBase.Icon': { + fontSize: 24, + color: variables.sTabBarActiveTextColor, + paddingHorizontal: 5, + }, + 'NativeBase.IconNB': { + fontSize: 24, + color: variables.sTabBarActiveTextColor, + paddingHorizontal: 5, + }, + 'NativeBase.Input': { + height: variables.inputHeightBase, + color: variables.inputColor, + paddingLeft: 5, + paddingRight: 5, + flex: 1, + fontSize: variables.inputFontSize, + lineHeight: variables.inputLineHeight, + }, + '.underline': { + '.success': { + borderColor: variables.inputSuccessBorderColor, + }, + '.error': { + borderColor: variables.inputErrorBorderColor, + }, + paddingLeft: 5, + borderWidth: variables.borderWidth, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputBorderColor, + }, + '.regular': { + '.success': { + borderColor: variables.inputSuccessBorderColor, + }, + '.error': { + borderColor: variables.inputErrorBorderColor, + }, + paddingLeft: 5, + borderWidth: variables.borderWidth, + borderColor: variables.inputBorderColor, + }, + '.rounded': { + '.success': { + borderColor: variables.inputSuccessBorderColor, + }, + '.error': { + borderColor: variables.inputErrorBorderColor, + }, + paddingLeft: 5, + borderWidth: variables.borderWidth, + borderRadius: variables.inputGroupRoundedBorderRadius, + borderColor: variables.inputBorderColor, + }, + + '.success': { + 'NativeBase.Icon': { + color: variables.inputSuccessBorderColor, + }, + 'NativeBase.IconNB': { + color: variables.inputSuccessBorderColor, + }, + '.rounded': { + borderRadius: 30, + borderColor: variables.inputSuccessBorderColor, + }, + '.regular': { + borderColor: variables.inputSuccessBorderColor, + }, + '.underline': { + borderWidth: variables.borderWidth, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputSuccessBorderColor, + }, + borderColor: variables.inputSuccessBorderColor, + }, + + '.error': { + 'NativeBase.Icon': { + color: variables.inputErrorBorderColor, + }, + 'NativeBase.IconNB': { + color: variables.inputErrorBorderColor, + }, + '.rounded': { + borderRadius: 30, + borderColor: variables.inputErrorBorderColor, + }, + '.regular': { + borderColor: variables.inputErrorBorderColor, + }, + '.underline': { + borderWidth: variables.borderWidth, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputErrorBorderColor, + }, + borderColor: variables.inputErrorBorderColor, + }, + '.disabled': { + 'NativeBase.Icon': { + color: '#384850', + }, + 'NativeBase.IconNB': { + color: '#384850', + }, + }, + + paddingLeft: 5, + borderWidth: variables.borderWidth, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputBorderColor, + backgroundColor: 'transparent', + flexDirection: 'row', + alignItems: 'center', + }; + + return inputGroupTheme; +}; diff --git a/src/libs/native-base/components/Item.ts b/src/libs/native-base/components/Item.ts new file mode 100644 index 0000000..b2fbddc --- /dev/null +++ b/src/libs/native-base/components/Item.ts @@ -0,0 +1,240 @@ +import { Platform } from 'react-native'; + +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +export default (variables /* : * */ = variable) => { + const itemTheme = { + '.floatingLabel': { + 'NativeBase.Input': { + height: 50, + top: 8, + paddingTop: 3, + paddingBottom: 7, + '.multiline': { + minHeight: variables.inputHeightBase, + paddingTop: Platform.OS === OS.IOS ? 10 : 3, + paddingBottom: Platform.OS === OS.IOS ? 14 : 10, + }, + }, + 'NativeBase.Label': { + paddingTop: 5, + }, + 'NativeBase.Icon': { + top: 6, + paddingTop: 8, + }, + 'NativeBase.IconNB': { + top: 6, + paddingTop: 8, + }, + }, + '.fixedLabel': { + 'NativeBase.Label': { + position: null, + top: null, + left: null, + right: null, + flex: 1, + height: null, + width: null, + fontSize: variables.inputFontSize, + }, + 'NativeBase.Input': { + flex: 2, + fontSize: variables.inputFontSize, + }, + }, + '.stackedLabel': { + 'NativeBase.Label': { + position: null, + top: null, + left: null, + right: null, + paddingTop: 5, + alignSelf: 'flex-start', + fontSize: variables.inputFontSize - 2, + }, + 'NativeBase.Icon': { + marginTop: 36, + }, + 'NativeBase.Input': { + // alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start', + alignSelf: 'stretch', + flex: 1, + // width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25, + fontSize: variables.inputFontSize, + lineHeight: variables.inputLineHeight - 6, + '.secureTextEntry': { + fontSize: variables.inputFontSize, + }, + '.multiline': { + paddingTop: Platform.OS === OS.IOS ? 9 : undefined, + paddingBottom: Platform.OS === OS.IOS ? 9 : undefined, + }, + }, + flexDirection: null, + minHeight: variables.inputHeightBase + 15, + }, + '.inlineLabel': { + 'NativeBase.Label': { + position: null, + top: null, + left: null, + right: null, + paddingRight: 20, + height: null, + width: null, + fontSize: variables.inputFontSize, + }, + 'NativeBase.Input': { + paddingLeft: 5, + fontSize: variables.inputFontSize, + }, + flexDirection: 'row', + }, + 'NativeBase.Label': { + fontSize: variables.inputFontSize, + color: variables.inputColorPlaceholder, + paddingRight: 5, + }, + 'NativeBase.Icon': { + fontSize: 24, + paddingRight: 8, + }, + 'NativeBase.IconNB': { + fontSize: 24, + paddingRight: 8, + }, + 'NativeBase.Input': { + '.multiline': { + height: null, + }, + height: variables.inputHeightBase, + color: variables.inputColor, + flex: 1, + top: Platform.OS === OS.IOS ? 1.5 : undefined, + fontSize: variables.inputFontSize, + }, + '.underline': { + 'NativeBase.Input': { + paddingLeft: 15, + }, + '.success': { + borderColor: variables.inputSuccessBorderColor, + }, + '.error': { + borderColor: variables.inputErrorBorderColor, + }, + borderWidth: variables.borderWidth * 2, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputBorderColor, + }, + '.regular': { + 'NativeBase.Input': { + paddingLeft: 8, + }, + 'NativeBase.Icon': { + paddingLeft: 10, + }, + '.success': { + borderColor: variables.inputSuccessBorderColor, + }, + '.error': { + borderColor: variables.inputErrorBorderColor, + }, + borderWidth: variables.borderWidth * 2, + borderColor: variables.inputBorderColor, + }, + '.rounded': { + 'NativeBase.Input': { + paddingLeft: 8, + }, + 'NativeBase.Icon': { + paddingLeft: 10, + }, + '.success': { + borderColor: variables.inputSuccessBorderColor, + }, + '.error': { + borderColor: variables.inputErrorBorderColor, + }, + borderWidth: variables.borderWidth * 2, + borderRadius: 30, + borderColor: variables.inputBorderColor, + }, + + '.success': { + 'NativeBase.Icon': { + color: variables.inputSuccessBorderColor, + }, + 'NativeBase.IconNB': { + color: variables.inputSuccessBorderColor, + }, + '.rounded': { + borderRadius: 30, + borderColor: variables.inputSuccessBorderColor, + }, + '.regular': { + borderColor: variables.inputSuccessBorderColor, + }, + '.underline': { + borderWidth: variables.borderWidth * 2, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputSuccessBorderColor, + }, + borderColor: variables.inputSuccessBorderColor, + }, + + '.error': { + 'NativeBase.Icon': { + color: variables.inputErrorBorderColor, + }, + 'NativeBase.IconNB': { + color: variables.inputErrorBorderColor, + }, + '.rounded': { + borderRadius: 30, + borderColor: variables.inputErrorBorderColor, + }, + '.regular': { + borderColor: variables.inputErrorBorderColor, + }, + '.underline': { + borderWidth: variables.borderWidth * 2, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputErrorBorderColor, + }, + borderColor: variables.inputErrorBorderColor, + }, + '.disabled': { + 'NativeBase.Icon': { + color: '#384850', + }, + 'NativeBase.IconNB': { + color: '#384850', + }, + }, + '.picker': { + marginLeft: 0, + }, + + borderWidth: variables.borderWidth * 2, + borderTopWidth: 0, + borderRightWidth: 0, + borderLeftWidth: 0, + borderColor: variables.inputBorderColor, + backgroundColor: 'transparent', + flexDirection: 'row', + alignItems: 'center', + marginLeft: 2, + }; + + return itemTheme; +}; diff --git a/src/libs/native-base/components/Label.ts b/src/libs/native-base/components/Label.ts new file mode 100644 index 0000000..170413e --- /dev/null +++ b/src/libs/native-base/components/Label.ts @@ -0,0 +1,10 @@ +export default () => { + const labelTheme = { + '.focused': { + width: 0, + }, + fontSize: 17, + }; + + return labelTheme; +}; diff --git a/src/libs/native-base/components/Left.ts b/src/libs/native-base/components/Left.ts new file mode 100644 index 0000000..c6eb653 --- /dev/null +++ b/src/libs/native-base/components/Left.ts @@ -0,0 +1,9 @@ +export default () => { + const leftTheme = { + flex: 1, + alignSelf: 'center', + alignItems: 'flex-start', + }; + + return leftTheme; +}; diff --git a/src/libs/native-base/components/ListItem.ts b/src/libs/native-base/components/ListItem.ts new file mode 100644 index 0000000..899322b --- /dev/null +++ b/src/libs/native-base/components/ListItem.ts @@ -0,0 +1,443 @@ +import { Platform, PixelRatio } from 'react-native'; + +import pickerTheme from './Picker'; +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + const selectedStyle = { + 'NativeBase.Text': { + color: variables.listItemSelected, + }, + 'NativeBase.Icon': { + color: variables.listItemSelected, + }, + }; + + const listItemTheme = { + 'NativeBase.InputGroup': { + 'NativeBase.Icon': { + paddingRight: 5, + }, + 'NativeBase.IconNB': { + paddingRight: 5, + }, + 'NativeBase.Input': { + paddingHorizontal: 5, + }, + flex: 1, + borderWidth: null, + margin: -10, + borderBottomColor: 'transparent', + }, + '.searchBar': { + 'NativeBase.Item': { + 'NativeBase.Icon': { + backgroundColor: 'transparent', + color: variables.dropdownLinkColor, + fontSize: + platform === OS.IOS + ? variables.iconFontSize - 10 + : variables.iconFontSize - 5, + alignItems: 'center', + marginTop: 2, + paddingRight: 8, + }, + 'NativeBase.IconNB': { + backgroundColor: 'transparent', + color: null, + alignSelf: 'center', + }, + 'NativeBase.Input': { + alignSelf: 'center', + }, + alignSelf: 'center', + alignItems: 'center', + justifyContent: 'flex-start', + flex: 1, + height: platform === OS.IOS ? 30 : 40, + borderColor: 'transparent', + backgroundColor: '#fff', + borderRadius: 5, + }, + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontWeight: '500', + }, + paddingHorizontal: null, + paddingLeft: platform === OS.IOS ? 10 : null, + }, + paddingHorizontal: platform === OS.IOS ? undefined : null, + width: platform === OS.IOS ? undefined : 0, + height: platform === OS.IOS ? undefined : 0, + }, + backgroundColor: variables.toolbarInputColor, + padding: 10, + marginLeft: null, + }, + 'NativeBase.CheckBox': { + marginLeft: -10, + marginRight: 10, + }, + '.first': { + '.itemHeader': { + paddingTop: variables.listItemPadding + 3, + }, + }, + '.itemHeader': { + '.first': { + paddingTop: variables.listItemPadding + 3, + }, + borderBottomWidth: platform === OS.IOS ? variables.borderWidth : null, + marginLeft: null, + padding: variables.listItemPadding, + paddingLeft: variables.listItemPadding + 5, + paddingTop: + platform === OS.IOS ? variables.listItemPadding + 25 : undefined, + paddingBottom: + platform === OS.Android ? variables.listItemPadding + 20 : undefined, + flexDirection: 'row', + borderColor: variables.listBorderColor, + 'NativeBase.Text': { + fontSize: 14, + color: platform === OS.IOS ? undefined : variables.listNoteColor, + }, + }, + '.itemDivider': { + borderBottomWidth: null, + marginLeft: null, + padding: variables.listItemPadding, + paddingLeft: variables.listItemPadding + 5, + backgroundColor: variables.listDividerBg, + flexDirection: 'row', + borderColor: variables.listBorderColor, + }, + '.selected': { + 'NativeBase.Left': { + ...selectedStyle, + }, + 'NativeBase.Body': { + ...selectedStyle, + }, + 'NativeBase.Right': { + ...selectedStyle, + }, + ...selectedStyle, + }, + 'NativeBase.Left': { + 'NativeBase.Body': { + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '200', + }, + fontWeight: '600', + }, + marginLeft: 10, + alignItems: null, + alignSelf: null, + }, + 'NativeBase.Icon': { + width: variables.iconFontSize - 10, + fontSize: variables.iconFontSize - 10, + }, + 'NativeBase.IconNB': { + width: variables.iconFontSize - 10, + fontSize: variables.iconFontSize - 10, + }, + 'NativeBase.Text': { + alignSelf: 'center', + }, + flexDirection: 'row', + }, + 'NativeBase.Body': { + 'NativeBase.Text': { + marginHorizontal: variables.listItemPadding, + '.note': { + color: variables.listNoteColor, + fontWeight: '200', + }, + }, + alignSelf: null, + alignItems: null, + }, + 'NativeBase.Right': { + 'NativeBase.Badge': { + alignSelf: null, + }, + 'NativeBase.PickerNB': { + 'NativeBase.Button': { + marginRight: -15, + 'NativeBase.Text': { + color: variables.topTabBarActiveTextColor, + }, + }, + }, + 'NativeBase.Button': { + alignSelf: null, + '.transparent': { + 'NativeBase.Text': { + color: variables.topTabBarActiveTextColor, + }, + }, + }, + 'NativeBase.Icon': { + alignSelf: null, + fontSize: variables.iconFontSize - 8, + color: '#c9c8cd', + }, + 'NativeBase.IconNB': { + alignSelf: null, + fontSize: variables.iconFontSize - 8, + color: '#c9c8cd', + }, + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '200', + }, + alignSelf: null, + }, + 'NativeBase.Thumbnail': { + alignSelf: null, + }, + 'NativeBase.Image': { + alignSelf: null, + }, + 'NativeBase.Radio': { + alignSelf: null, + }, + 'NativeBase.Checkbox': { + alignSelf: null, + }, + 'NativeBase.Switch': { + alignSelf: null, + }, + padding: null, + flex: 0.28, + }, + 'NativeBase.Text': { + '.note': { + color: variables.listNoteColor, + fontWeight: '200', + }, + alignSelf: 'center', + }, + '.last': { + marginLeft: -(variables.listItemPadding + 5), + paddingLeft: (variables.listItemPadding + 5) * 2, + top: 1, + }, + '.avatar': { + 'NativeBase.Left': { + flex: 0, + alignSelf: 'flex-start', + paddingTop: 14, + }, + 'NativeBase.Body': { + 'NativeBase.Text': { + marginLeft: null, + }, + flex: 1, + paddingVertical: variables.listItemPadding, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor, + marginLeft: variables.listItemPadding + 5, + }, + 'NativeBase.Right': { + 'NativeBase.Text': { + '.note': { + fontSize: variables.noteFontSize - 2, + }, + }, + flex: 0, + paddingRight: variables.listItemPadding + 5, + alignSelf: 'stretch', + paddingVertical: variables.listItemPadding, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor, + }, + '.noBorder': { + 'NativeBase.Body': { + borderBottomWidth: null, + }, + 'NativeBase.Right': { + borderBottomWidth: null, + }, + }, + borderBottomWidth: null, + paddingVertical: null, + paddingRight: null, + }, + '.thumbnail': { + 'NativeBase.Left': { + flex: 0, + }, + 'NativeBase.Body': { + 'NativeBase.Text': { + marginLeft: null, + }, + flex: 1, + paddingVertical: variables.listItemPadding + 8, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor, + marginLeft: variables.listItemPadding + 5, + }, + 'NativeBase.Right': { + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontSize: variables.listNoteSize, + color: variables.sTabBarActiveTextColor, + }, + }, + height: null, + }, + flex: 0, + justifyContent: 'center', + alignSelf: 'stretch', + paddingRight: variables.listItemPadding + 5, + paddingVertical: variables.listItemPadding + 5, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor, + }, + '.noBorder': { + 'NativeBase.Body': { + borderBottomWidth: null, + }, + 'NativeBase.Right': { + borderBottomWidth: null, + }, + }, + borderBottomWidth: null, + paddingVertical: null, + paddingRight: null, + }, + '.icon': { + '.last': { + 'NativeBase.Body': { + borderBottomWidth: null, + }, + 'NativeBase.Right': { + borderBottomWidth: null, + }, + borderBottomWidth: variables.borderWidth, + borderColor: variables.listBorderColor, + }, + 'NativeBase.Left': { + 'NativeBase.Button': { + 'NativeBase.IconNB': { + marginHorizontal: null, + fontSize: variables.iconFontSize - 5, + }, + 'NativeBase.Icon': { + marginHorizontal: null, + fontSize: variables.iconFontSize - 8, + }, + alignSelf: 'center', + height: 29, + width: 29, + borderRadius: 6, + paddingVertical: null, + paddingHorizontal: null, + alignItems: 'center', + justifyContent: 'center', + }, + 'NativeBase.Icon': { + width: variables.iconFontSize - 5, + fontSize: variables.iconFontSize - 2, + }, + 'NativeBase.IconNB': { + width: variables.iconFontSize - 5, + fontSize: variables.iconFontSize - 2, + }, + paddingRight: variables.listItemPadding + 5, + flex: 0, + height: 44, + justifyContent: 'center', + alignItems: 'center', + }, + 'NativeBase.Body': { + 'NativeBase.Text': { + marginLeft: null, + fontSize: 17, + }, + flex: 1, + height: 44, + justifyContent: 'center', + borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + borderColor: variables.listBorderColor, + }, + 'NativeBase.Right': { + 'NativeBase.Text': { + textAlign: 'center', + color: '#8F8E95', + fontSize: 17, + }, + 'NativeBase.IconNB': { + color: '#C8C7CC', + fontSize: variables.iconFontSize - 10, + alignSelf: 'center', + paddingLeft: 10, + paddingTop: 3, + }, + 'NativeBase.Icon': { + color: '#C8C7CC', + fontSize: variables.iconFontSize - 10, + alignSelf: 'center', + paddingLeft: 10, + paddingTop: 3, + }, + 'NativeBase.Switch': { + marginRight: Platform.OS === OS.IOS ? undefined : -5, + alignSelf: null, + }, + 'NativeBase.PickerNB': { + ...pickerTheme(), + }, + flexDirection: 'row', + alignItems: 'center', + flex: 0, + alignSelf: 'stretch', + height: 44, + justifyContent: 'flex-end', + borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + borderColor: variables.listBorderColor, + paddingRight: variables.listItemPadding + 5, + }, + '.noBorder': { + 'NativeBase.Body': { + borderBottomWidth: null, + }, + 'NativeBase.Right': { + borderBottomWidth: null, + }, + }, + borderBottomWidth: null, + paddingVertical: null, + paddingRight: null, + height: 44, + justifyContent: 'center', + }, + '.noBorder': { + borderBottomWidth: null, + }, + '.noIndent': { + marginLeft: null, + padding: variables.listItemPadding, + paddingLeft: variables.listItemPadding + 6, + }, + alignItems: 'center', + flexDirection: 'row', + paddingRight: variables.listItemPadding + 6, + paddingVertical: variables.listItemPadding + 3, + marginLeft: variables.listItemPadding + 6, + borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + backgroundColor: variables.listBg, + borderColor: variables.listBorderColor, + }; + + return listItemTheme; +}; diff --git a/src/libs/native-base/components/Picker.android.ts b/src/libs/native-base/components/Picker.android.ts new file mode 100644 index 0000000..53fa89f --- /dev/null +++ b/src/libs/native-base/components/Picker.android.ts @@ -0,0 +1,12 @@ +export default () => { + const pickerTheme = { + '.note': { + color: '#8F8E95', + }, + // width: 90, + marginRight: -4, + flexGrow: 1, + }; + + return pickerTheme; +}; diff --git a/src/libs/native-base/components/Picker.ios.ts b/src/libs/native-base/components/Picker.ios.ts new file mode 100644 index 0000000..6422a0f --- /dev/null +++ b/src/libs/native-base/components/Picker.ios.ts @@ -0,0 +1,5 @@ +export default () => { + const pickerTheme = {}; + + return pickerTheme; +}; diff --git a/src/libs/native-base/components/Picker.ts b/src/libs/native-base/components/Picker.ts new file mode 100644 index 0000000..53fa89f --- /dev/null +++ b/src/libs/native-base/components/Picker.ts @@ -0,0 +1,12 @@ +export default () => { + const pickerTheme = { + '.note': { + color: '#8F8E95', + }, + // width: 90, + marginRight: -4, + flexGrow: 1, + }; + + return pickerTheme; +}; diff --git a/src/libs/native-base/components/Radio.ts b/src/libs/native-base/components/Radio.ts new file mode 100644 index 0000000..bb3bb16 --- /dev/null +++ b/src/libs/native-base/components/Radio.ts @@ -0,0 +1,27 @@ +import { Platform } from 'react-native'; + +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +export default (variables /* : * */ = variable) => { + const radioTheme = { + '.selected': { + 'NativeBase.IconNB': { + color: + Platform.OS === OS.IOS + ? variables.radioColor + : variables.radioSelectedColorAndroid, + lineHeight: Platform.OS === OS.IOS ? 25 : variables.radioBtnLineHeight, + height: Platform.OS === OS.IOS ? 20 : undefined, + }, + }, + 'NativeBase.IconNB': { + color: Platform.OS === OS.IOS ? 'transparent' : undefined, + lineHeight: + Platform.OS === OS.IOS ? undefined : variables.radioBtnLineHeight, + fontSize: Platform.OS === OS.IOS ? undefined : variables.radioBtnSize, + }, + }; + + return radioTheme; +}; diff --git a/src/libs/native-base/components/Right.ts b/src/libs/native-base/components/Right.ts new file mode 100644 index 0000000..c76f05e --- /dev/null +++ b/src/libs/native-base/components/Right.ts @@ -0,0 +1,12 @@ +export default () => { + const rightTheme = { + 'NativeBase.Button': { + alignSelf: null, + }, + flex: 1, + alignSelf: 'center', + alignItems: 'flex-end', + }; + + return rightTheme; +}; diff --git a/src/libs/native-base/components/Segment.ts b/src/libs/native-base/components/Segment.ts new file mode 100644 index 0000000..e48c5ba --- /dev/null +++ b/src/libs/native-base/components/Segment.ts @@ -0,0 +1,55 @@ +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + + const segmentTheme = { + height: 45, + borderColor: variables.segmentBorderColorMain, + flexDirection: 'row', + justifyContent: 'center', + backgroundColor: variables.segmentBackgroundColor, + 'NativeBase.Button': { + alignSelf: 'center', + borderRadius: 0, + paddingTop: 3, + paddingBottom: 3, + height: 30, + backgroundColor: 'transparent', + borderWidth: 1, + borderLeftWidth: 0, + borderColor: variables.segmentBorderColor, + elevation: 0, + '.active': { + backgroundColor: variables.segmentActiveBackgroundColor, + 'NativeBase.Text': { + color: variables.segmentActiveTextColor, + }, + 'NativeBase.Icon': { + color: variables.segmentActiveTextColor, + }, + }, + '.first': { + borderTopLeftRadius: platform === OS.IOS ? 5 : undefined, + borderBottomLeftRadius: platform === OS.IOS ? 5 : undefined, + borderLeftWidth: 1, + }, + '.last': { + borderTopRightRadius: platform === OS.IOS ? 5 : undefined, + borderBottomRightRadius: platform === OS.IOS ? 5 : undefined, + }, + 'NativeBase.Text': { + color: variables.segmentTextColor, + fontSize: 14, + }, + 'NativeBase.Icon': { + fontSize: 22, + paddingTop: 0, + color: variables.segmentTextColor, + }, + }, + }; + + return segmentTheme; +}; diff --git a/src/libs/native-base/components/Separator.ts b/src/libs/native-base/components/Separator.ts new file mode 100644 index 0000000..2f4ebf5 --- /dev/null +++ b/src/libs/native-base/components/Separator.ts @@ -0,0 +1,47 @@ +import variable from '../variables/platform'; + +export default (variables /* : * */ = variable) => { + const theme = { + '.group': { + height: 50, + paddingVertical: variables.listItemPadding - 8, + paddingTop: variables.listItemPadding + 12, + '.bordered': { + height: 50, + paddingVertical: variables.listItemPadding - 8, + paddingTop: variables.listItemPadding + 12, + }, + }, + '.bordered': { + '.noTopBorder': { + borderTopWidth: 0, + }, + '.noBottomBorder': { + borderBottomWidth: 0, + }, + height: 35, + paddingTop: variables.listItemPadding + 2, + paddingBottom: variables.listItemPadding, + borderBottomWidth: variables.borderWidth, + borderTopWidth: variables.borderWidth, + borderColor: variables.listBorderColor, + }, + 'NativeBase.Text': { + fontSize: variables.tabBarTextSize - 2, + color: '#777', + }, + '.noTopBorder': { + borderTopWidth: 0, + }, + '.noBottomBorder': { + borderBottomWidth: 0, + }, + height: 38, + backgroundColor: '#F0EFF5', + flex: 1, + justifyContent: 'center', + paddingLeft: variables.listItemPadding + 5, + }; + + return theme; +}; diff --git a/src/libs/native-base/components/Spinner.ts b/src/libs/native-base/components/Spinner.ts new file mode 100644 index 0000000..1acad25 --- /dev/null +++ b/src/libs/native-base/components/Spinner.ts @@ -0,0 +1,7 @@ +export default () => { + const spinnerTheme = { + height: 80, + }; + + return spinnerTheme; +}; diff --git a/src/libs/native-base/components/Subtitle.ts b/src/libs/native-base/components/Subtitle.ts new file mode 100644 index 0000000..ed6b827 --- /dev/null +++ b/src/libs/native-base/components/Subtitle.ts @@ -0,0 +1,17 @@ +import { Platform } from 'react-native'; + +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +export default (variables /* : * */ = variable) => { + const subtitleTheme = { + fontSize: variables.subTitleFontSize, + fontFamily: variables.titleFontFamily, + color: variables.subtitleColor, + textAlign: Platform.OS === OS.IOS ? 'center' : 'left', + paddingLeft: Platform.OS === OS.IOS ? 4 : 0, + marginLeft: Platform.OS === OS.IOS ? undefined : -3, + }; + + return subtitleTheme; +}; diff --git a/src/libs/native-base/components/SwipeRow.ts b/src/libs/native-base/components/SwipeRow.ts new file mode 100644 index 0000000..0e4f61a --- /dev/null +++ b/src/libs/native-base/components/SwipeRow.ts @@ -0,0 +1,44 @@ +export default () => { + const swipeRowTheme = { + 'NativeBase.ListItem': { + '.list': { + backgroundColor: '#FFF', + }, + marginLeft: 0, + }, + 'NativeBase.Left': { + flex: 0, + alignSelf: null, + alignItems: null, + 'NativeBase.Button': { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'stretch', + borderRadius: 0, + }, + }, + 'NativeBase.Right': { + flex: 0, + alignSelf: null, + alignItems: null, + 'NativeBase.Button': { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'stretch', + borderRadius: 0, + }, + }, + 'NativeBase.Button': { + flex: 1, + height: null, + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'stretch', + borderRadius: 0, + }, + }; + + return swipeRowTheme; +}; diff --git a/src/libs/native-base/components/Switch.ts b/src/libs/native-base/components/Switch.ts new file mode 100644 index 0000000..6992712 --- /dev/null +++ b/src/libs/native-base/components/Switch.ts @@ -0,0 +1,7 @@ +export default () => { + const switchTheme = { + marginVertical: -5, + }; + + return switchTheme; +}; diff --git a/src/libs/native-base/components/Tab.ts b/src/libs/native-base/components/Tab.ts new file mode 100644 index 0000000..e83337e --- /dev/null +++ b/src/libs/native-base/components/Tab.ts @@ -0,0 +1,8 @@ +export default () => { + const tabTheme = { + flex: 1, + backgroundColor: '#FFF', + }; + + return tabTheme; +}; diff --git a/src/libs/native-base/components/TabBar.ts b/src/libs/native-base/components/TabBar.ts new file mode 100644 index 0000000..0c63c3a --- /dev/null +++ b/src/libs/native-base/components/TabBar.ts @@ -0,0 +1,55 @@ +import variable from '../variables/platform'; + +export default (variables /* : * */ = variable) => { + const tabBarTheme = { + '.tabIcon': { + height: undefined, + }, + '.vertical': { + height: 60, + }, + 'NativeBase.Button': { + '.transparent': { + 'NativeBase.Text': { + fontSize: variables.tabFontSize, + color: variables.sTabBarActiveTextColor, + fontWeight: '400', + }, + 'NativeBase.IconNB': { + color: variables.sTabBarActiveTextColor, + }, + }, + 'NativeBase.IconNB': { + color: variables.sTabBarActiveTextColor, + }, + 'NativeBase.Text': { + fontSize: variables.tabFontSize, + color: variables.sTabBarActiveTextColor, + fontWeight: '400', + }, + '.isTabActive': { + 'NativeBase.Text': { + fontWeight: '900', + }, + }, + flex: 1, + alignSelf: 'stretch', + alignItems: 'center', + justifyContent: 'center', + borderRadius: null, + borderBottomColor: 'transparent', + backgroundColor: variables.tabBgColor, + }, + height: 45, + flexDirection: 'row', + justifyContent: 'space-around', + borderWidth: 1, + borderTopWidth: 0, + borderLeftWidth: 0, + borderRightWidth: 0, + borderBottomColor: '#ccc', + backgroundColor: variables.tabBgColor, + }; + + return tabBarTheme; +}; diff --git a/src/libs/native-base/components/TabContainer.ts b/src/libs/native-base/components/TabContainer.ts new file mode 100644 index 0000000..1df6f98 --- /dev/null +++ b/src/libs/native-base/components/TabContainer.ts @@ -0,0 +1,17 @@ +import { Platform } from 'react-native'; + +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +export default (variables /* : * */ = variable) => { + const tabContainerTheme = { + elevation: 3, + height: 50, + flexDirection: 'row', + justifyContent: 'space-around', + borderBottomWidth: Platform.OS === OS.IOS ? variables.borderWidth : 0, + borderColor: variables.topTabBarBorderColor, + }; + + return tabContainerTheme; +}; diff --git a/src/libs/native-base/components/TabHeading.ts b/src/libs/native-base/components/TabHeading.ts new file mode 100644 index 0000000..e6137ee --- /dev/null +++ b/src/libs/native-base/components/TabHeading.ts @@ -0,0 +1,38 @@ +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + + const tabHeadingTheme = { + flexDirection: 'row', + backgroundColor: variables.tabDefaultBg, + flex: 1, + alignItems: 'center', + justifyContent: 'center', + '.scrollable': { + paddingHorizontal: 20, + flex: platform === OS.Android ? 0 : 1, + minWidth: platform === OS.Android ? undefined : 60, + }, + 'NativeBase.Text': { + color: variables.topTabBarTextColor, + marginHorizontal: 7, + }, + 'NativeBase.Icon': { + color: variables.topTabBarTextColor, + fontSize: platform === OS.IOS ? 26 : undefined, + }, + '.active': { + 'NativeBase.Text': { + color: variables.topTabBarActiveTextColor, + fontWeight: '600', + }, + 'NativeBase.Icon': { + color: variables.topTabBarActiveTextColor, + }, + }, + }; + + return tabHeadingTheme; +}; diff --git a/src/libs/native-base/components/Text.ts b/src/libs/native-base/components/Text.ts new file mode 100644 index 0000000..9ca9473 --- /dev/null +++ b/src/libs/native-base/components/Text.ts @@ -0,0 +1,15 @@ +import variable from '../variables/platform'; + +export default (variables /* : * */ = variable) => { + const textTheme = { + fontSize: variables.DefaultFontSize, + fontFamily: variables.fontFamily, + color: variables.textColor, + '.note': { + color: '#a7a7a7', + fontSize: variables.noteFontSize, + }, + }; + + return textTheme; +}; diff --git a/src/libs/native-base/components/Textarea.ts b/src/libs/native-base/components/Textarea.ts new file mode 100644 index 0000000..85011bd --- /dev/null +++ b/src/libs/native-base/components/Textarea.ts @@ -0,0 +1,23 @@ +import variable from '../variables/platform'; + +export default (variables /* : * */ = variable) => { + const textAreaTheme = { + '.underline': { + borderBottomWidth: variables.borderWidth, + marginTop: 5, + borderColor: variables.inputBorderColor, + }, + '.bordered': { + borderWidth: 1, + marginTop: 5, + borderColor: variables.inputBorderColor, + }, + color: variables.textColor, + paddingLeft: 10, + paddingRight: 5, + fontSize: 15, + textAlignVertical: 'top', + }; + + return textAreaTheme; +}; diff --git a/src/libs/native-base/components/Thumbnail.ts b/src/libs/native-base/components/Thumbnail.ts new file mode 100644 index 0000000..e045f7d --- /dev/null +++ b/src/libs/native-base/components/Thumbnail.ts @@ -0,0 +1,38 @@ +export default () => { + const thumbnailTheme = { + '.square': { + borderRadius: 0, + '.small': { + width: 36, + height: 36, + borderRadius: 0, + }, + '.large': { + width: 80, + height: 80, + borderRadius: 0, + }, + }, + '.small': { + width: 36, + height: 36, + borderRadius: 18, + '.square': { + borderRadius: 0, + }, + }, + '.large': { + width: 80, + height: 80, + borderRadius: 40, + '.square': { + borderRadius: 0, + }, + }, + width: 56, + height: 56, + borderRadius: 28, + }; + + return thumbnailTheme; +}; diff --git a/src/libs/native-base/components/Title.ts b/src/libs/native-base/components/Title.ts new file mode 100644 index 0000000..834bfca --- /dev/null +++ b/src/libs/native-base/components/Title.ts @@ -0,0 +1,19 @@ +import { Platform } from 'react-native'; + +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +export default (variables /* : * */ = variable) => { + const titleTheme = { + fontSize: variables.titleFontSize, + fontFamily: variables.titleFontFamily, + color: variables.titleFontColor, + fontWeight: Platform.OS === OS.IOS ? '700' : undefined, + textAlign: Platform.OS === OS.IOS ? 'center' : 'left', + paddingLeft: Platform.OS === OS.IOS ? 4 : 0, + marginLeft: Platform.OS === OS.IOS ? undefined : -3, + paddingTop: 1, + }; + + return titleTheme; +}; diff --git a/src/libs/native-base/components/Toast.ts b/src/libs/native-base/components/Toast.ts new file mode 100644 index 0000000..b3d3513 --- /dev/null +++ b/src/libs/native-base/components/Toast.ts @@ -0,0 +1,39 @@ +import variable from '../variables/platform'; +import { OS } from '../variables/types'; + +export default (variables /* : * */ = variable) => { + const platform = variables.platform; + + const toastTheme = { + '.danger': { + backgroundColor: variables.brandDanger, + }, + '.warning': { + backgroundColor: variables.brandWarning, + }, + '.success': { + backgroundColor: variables.brandSuccess, + }, + backgroundColor: 'rgba(0,0,0,0.8)', + borderRadius: platform === OS.IOS ? 5 : 0, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + padding: 10, + minHeight: 50, + 'NativeBase.Text': { + color: '#fff', + flex: 1, + }, + 'NativeBase.Button': { + backgroundColor: 'transparent', + height: 30, + elevation: 0, + 'NativeBase.Text': { + fontSize: 14, + }, + }, + }; + + return toastTheme; +}; diff --git a/src/libs/native-base/components/View.ts b/src/libs/native-base/components/View.ts new file mode 100644 index 0000000..2bbb33a --- /dev/null +++ b/src/libs/native-base/components/View.ts @@ -0,0 +1,11 @@ +import variable from '../variables/platform'; + +export default (variables /* : * */ = variable) => { + const viewTheme = { + '.padder': { + padding: variables.contentPadding, + }, + }; + + return viewTheme; +}; diff --git a/src/libs/native-base/components/index.ts b/src/libs/native-base/components/index.ts new file mode 100644 index 0000000..ac3ef2e --- /dev/null +++ b/src/libs/native-base/components/index.ts @@ -0,0 +1,250 @@ +import { forEach } from 'lodash'; + +import bodyTheme from './Body'; +import leftTheme from './Left'; +import rightTheme from './Right'; +import headerTheme from './Header'; +import switchTheme from './Switch'; +import thumbnailTheme from './Thumbnail'; +import containerTheme from './Container'; +import contentTheme from './Content'; +import buttonTheme from './Button'; +import titleTheme from './Title'; +import subtitleTheme from './Subtitle'; +import inputGroupTheme from './InputGroup'; +import badgeTheme from './Badge'; +import checkBoxTheme from './CheckBox'; +import cardTheme from './Card'; +import radioTheme from './Radio'; +import h3Theme from './H3'; +import h2Theme from './H2'; +import h1Theme from './H1'; +import footerTheme from './Footer'; +import footerTabTheme from './FooterTab'; +import fabTheme from './Fab'; +import itemTheme from './Item'; +import labelTheme from './Label'; +import textAreaTheme from './Textarea'; +import textTheme from './Text'; +import toastTheme from './Toast'; +import tabTheme from './Tab'; +import tabBarTheme from './TabBar'; +import tabContainerTheme from './TabContainer'; +import viewTheme from './View'; +import tabHeadingTheme from './TabHeading'; +import iconTheme from './Icon'; +import inputTheme from './Input'; +import swipeRowTheme from './SwipeRow'; +import segmentTheme from './Segment'; +import spinnerTheme from './Spinner'; +import cardItemTheme from './CardItem'; +import listItemTheme from './ListItem'; +import formTheme from './Form'; +import separatorTheme from './Separator'; +import pickerTheme from './Picker'; +import variable from '../variables/platform'; + +export const createTheme = (variables /* : * */ = variable) => { + const theme = { + variables, + 'NativeBase.Left': { + ...leftTheme(), + }, + 'NativeBase.Right': { + ...rightTheme(), + }, + 'NativeBase.Body': { + ...bodyTheme(), + }, + + 'NativeBase.Header': { + ...headerTheme(variables), + }, + + 'NativeBase.Button': { + ...buttonTheme(variables), + }, + + 'NativeBase.Title': { + ...titleTheme(variables), + }, + 'NativeBase.Subtitle': { + ...subtitleTheme(variables), + }, + + 'NativeBase.InputGroup': { + ...inputGroupTheme(variables), + }, + + 'NativeBase.Input': { + ...inputTheme(variables), + }, + + 'NativeBase.Badge': { + ...badgeTheme(variables), + }, + + 'NativeBase.CheckBox': { + ...checkBoxTheme(variables), + }, + + 'NativeBase.Radio': { + ...radioTheme(variables), + }, + + 'NativeBase.Card': { + ...cardTheme(variables), + }, + + 'NativeBase.CardItem': { + ...cardItemTheme(variables), + }, + + 'NativeBase.Toast': { + ...toastTheme(variables), + }, + + 'NativeBase.H1': { + ...h1Theme(variables), + }, + 'NativeBase.H2': { + ...h2Theme(variables), + }, + 'NativeBase.H3': { + ...h3Theme(variables), + }, + 'NativeBase.Form': { + ...formTheme(), + }, + + 'NativeBase.Container': { + ...containerTheme(variables), + }, + 'NativeBase.Content': { + ...contentTheme(), + }, + + 'NativeBase.Footer': { + ...footerTheme(variables), + }, + + 'NativeBase.Tabs': { + flex: 1, + }, + + 'NativeBase.FooterTab': { + ...footerTabTheme(variables), + }, + + 'NativeBase.ListItem': { + ...listItemTheme(variables), + }, + + 'NativeBase.ListItem1': { + ...listItemTheme(variables), + }, + + 'NativeBase.Icon': { + ...iconTheme(variables), + }, + 'NativeBase.IconNB': { + ...iconTheme(variables), + }, + 'NativeBase.Text': { + ...textTheme(variables), + }, + 'NativeBase.Spinner': { + ...spinnerTheme(), + }, + + 'NativeBase.Fab': { + ...fabTheme(), + }, + + 'NativeBase.Item': { + ...itemTheme(variables), + }, + + 'NativeBase.Label': { + ...labelTheme(), + }, + + 'NativeBase.Textarea': { + ...textAreaTheme(variables), + }, + + 'NativeBase.PickerNB': { + ...pickerTheme(), + 'NativeBase.Button': { + 'NativeBase.Text': {}, + }, + }, + + 'NativeBase.Tab': { + ...tabTheme(), + }, + + 'NativeBase.Segment': { + ...segmentTheme(variables), + }, + + 'NativeBase.TabBar': { + ...tabBarTheme(variables), + }, + 'NativeBase.ViewNB': { + ...viewTheme(variables), + }, + 'NativeBase.TabHeading': { + ...tabHeadingTheme(variables), + }, + 'NativeBase.TabContainer': { + ...tabContainerTheme(variables), + }, + 'NativeBase.Switch': { + ...switchTheme(), + }, + 'NativeBase.Separator': { + ...separatorTheme(variables), + }, + 'NativeBase.SwipeRow': { + ...swipeRowTheme(), + }, + 'NativeBase.Thumbnail': { + ...thumbnailTheme(), + }, + }; + + const cssifyTheme = ( + grandparent: any, + parent: any, + parentKey: string | null, + ) => { + forEach(parent, (style, styleName) => { + if ( + styleName.indexOf('.') === 0 && + parentKey && + parentKey.indexOf('.') === 0 + ) { + if (grandparent) { + if (!grandparent[styleName]) { + grandparent[styleName] = {}; + } else { + grandparent[styleName][parentKey] = style; + } + } + } + if ( + style && + typeof style === 'object' && + styleName !== 'fontVariant' && + styleName !== 'transform' + ) { + cssifyTheme(parent, style, styleName); + } + }); + }; + + cssifyTheme(null, theme, null); + + return theme; +}; diff --git a/src/libs/native-base/index.ts b/src/libs/native-base/index.ts new file mode 100644 index 0000000..70aaf4f --- /dev/null +++ b/src/libs/native-base/index.ts @@ -0,0 +1,4 @@ +export * from './components'; +export { default as variables } from './variables/platform'; +export * from './variables/types'; +export * from './useVariables'; diff --git a/src/libs/native-base/useVariables.ts b/src/libs/native-base/useVariables.ts new file mode 100644 index 0000000..ac30733 --- /dev/null +++ b/src/libs/native-base/useVariables.ts @@ -0,0 +1,5 @@ +import platform from './variables/platform'; + +export const useVariables = () => { + return platform; +}; diff --git a/src/libs/native-base/variables/platform.ts b/src/libs/native-base/variables/platform.ts new file mode 100644 index 0000000..8913c12 --- /dev/null +++ b/src/libs/native-base/variables/platform.ts @@ -0,0 +1,326 @@ +import color from 'color'; +import { Dimensions, PixelRatio, Platform } from 'react-native'; +import { OS, Variables } from './types'; + +const deviceHeight = Dimensions.get('window').height; +const deviceWidth = Dimensions.get('window').width; +const platform = Platform.OS; +const isIphoneX = + platform === OS.IOS && + (deviceHeight === 812 || + deviceWidth === 812 || + deviceHeight === 896 || + deviceWidth === 896); + +export default { + platform, + + // Accordion + accordionBorderColor: '#d3d3d3', + accordionContentPadding: 10, + accordionIconFontSize: 18, + contentStyle: '#f5f4f5', + expandedIconStyle: '#000', + headerStyle: '#edebed', + iconStyle: '#000', + disableRow: '#a9a9a9', + + // ActionSheet + elevation: 4, + containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)', + innerTouchableBackgroundColor: '#fff', + listItemHeight: 50, + listItemBorderColor: 'transparent', + marginHorizontal: -15, + marginLeft: 14, + marginTop: 15, + minHeight: 56, + padding: 15, + touchableTextColor: '#757575', + + // Android + androidRipple: true, + androidRippleColor: 'rgba(256, 256, 256, 0.3)', + androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', + buttonUppercaseAndroidText: true, + + // Badge + badgeBg: '#ED1727', + badgeColor: '#fff', + badgePadding: platform === OS.IOS ? 3 : 0, + + // Button + buttonFontFamily: platform === OS.IOS ? 'System' : 'Roboto_medium', + buttonDisabledBg: '#b5b5b5', + buttonPadding: 6, + buttonDefaultActiveOpacity: 0.5, + buttonDefaultFlex: 1, + buttonDefaultBorderRadius: 2, + buttonDefaultBorderWidth: 1, + get buttonPrimaryBg() { + return this.brandPrimary; + }, + get buttonPrimaryColor() { + return this.inverseTextColor; + }, + get buttonInfoBg() { + return this.brandInfo; + }, + get buttonInfoColor() { + return this.inverseTextColor; + }, + get buttonSuccessBg() { + return this.brandSuccess; + }, + get buttonSuccessColor() { + return this.inverseTextColor; + }, + get buttonDangerBg() { + return this.brandDanger; + }, + get buttonDangerColor() { + return this.inverseTextColor; + }, + get buttonWarningBg() { + return this.brandWarning; + }, + get buttonWarningColor() { + return this.inverseTextColor; + }, + get buttonTextSize() { + return platform === OS.IOS + ? this.fontSizeBase * 1.1 + : this.fontSizeBase - 1; + }, + get buttonTextSizeLarge() { + return this.fontSizeBase * 1.5; + }, + get buttonTextSizeSmall() { + return this.fontSizeBase * 0.8; + }, + get borderRadiusLarge() { + return this.fontSizeBase * 3.8; + }, + get iconSizeLarge() { + return this.iconFontSize * 1.5; + }, + get iconSizeSmall() { + return this.iconFontSize * 0.6; + }, + + // Card + cardDefaultBg: '#fff', + cardBorderColor: '#ccc', + cardBorderRadius: 2, + cardItemPadding: platform === OS.IOS ? 10 : 12, + + // CheckBox + CheckboxRadius: platform === OS.IOS ? 13 : 0, + CheckboxBorderWidth: platform === OS.IOS ? 1 : 2, + CheckboxPaddingLeft: platform === OS.IOS ? 4 : 2, + CheckboxPaddingBottom: platform === OS.IOS ? 0 : 5, + CheckboxIconSize: platform === OS.IOS ? 19 : 16, + CheckboxIconMarginTop: platform === OS.IOS ? undefined : 1, + CheckboxFontSize: platform === OS.IOS ? 12 / 0.9 : 17, + checkboxBgColor: '#039BE5', + checkboxSize: 20, + checkboxTickColor: '#fff', + checkboxDefaultColor: 'transparent', + checkboxTextShadowRadius: 0, + + // Color + brandPrimary: '#448AFF', + brandInfo: '#62B1F6', + brandSuccess: '#5cb85c', + brandDanger: '#d9534f', + brandWarning: '#f0ad4e', + brandDark: '#000', + brandLight: '#a9a9a9', + + // Container + containerBgColor: '#fff', + + // Date Picker + datePickerFlex: 1, + datePickerPadding: 10, + datePickerTextColor: '#000', + datePickerBg: 'transparent', + + // FAB + fabBackgroundColor: 'blue', + fabBorderRadius: 28, + fabBottom: 0, + fabButtonBorderRadius: 20, + fabButtonHeight: 40, + fabButtonLeft: 7, + fabButtonMarginBottom: 10, + fabContainerBottom: 20, + fabDefaultPosition: 20, + fabElevation: 4, + fabIconColor: '#fff', + fabIconSize: 24, + fabShadowColor: '#000', + fabShadowOffsetHeight: 2, + fabShadowOffsetWidth: 0, + fabShadowOpacity: 0.4, + fabShadowRadius: 2, + fabWidth: 56, + + // Font + DefaultFontSize: 16, + fontFamily: platform === OS.IOS ? 'System' : 'Roboto', + fontSizeBase: 15, + get fontSizeH1() { + return this.fontSizeBase * 1.8; + }, + get fontSizeH2() { + return this.fontSizeBase * 1.6; + }, + get fontSizeH3() { + return this.fontSizeBase * 1.4; + }, + + // Footer + footerHeight: 55, + footerDefaultBg: platform === OS.IOS ? '#F8F8F8' : '#3F51B5', + footerPaddingBottom: 0, + + // FooterTab + tabBarTextColor: platform === OS.IOS ? '#6b6b6b' : '#b3c7f9', + tabBarTextSize: platform === OS.IOS ? 14 : 11, + activeTab: platform === OS.IOS ? '#007aff' : '#fff', + sTabBarActiveTextColor: '#007aff', + tabBarActiveTextColor: platform === OS.IOS ? '#007aff' : '#fff', + tabActiveBgColor: platform === OS.IOS ? '#cde1f9' : '#3F51B5', + + // Header + toolbarBtnColor: platform === OS.IOS ? '#007aff' : '#fff', + toolbarDefaultBg: platform === OS.IOS ? '#F8F8F8' : '#3F51B5', + toolbarHeight: platform === OS.IOS ? 64 : 56, + toolbarSearchIconSize: platform === OS.IOS ? 20 : 23, + toolbarInputColor: platform === OS.IOS ? '#CECDD2' : '#fff', + searchBarHeight: platform === OS.IOS ? 30 : 40, + searchBarInputHeight: platform === OS.IOS ? 30 : 50, + toolbarBtnTextColor: platform === OS.IOS ? '#007aff' : '#fff', + toolbarDefaultBorder: platform === OS.IOS ? '#a7a6ab' : '#3F51B5', + iosStatusbar: platform === OS.IOS ? 'dark-content' : 'light-content', + get statusBarColor() { + return color(this.toolbarDefaultBg).darken(0.2).hex(); + }, + get darkenHeader() { + return color(this.tabBgColor).darken(0.03).hex(); + }, + + // Icon + iconFamily: 'Ionicons', + iconFontSize: platform === OS.IOS ? 30 : 28, + iconHeaderSize: platform === OS.IOS ? 33 : 24, + + // InputGroup + inputFontSize: 17, + inputBorderColor: '#D9D5DC', + inputSuccessBorderColor: '#2b8339', + inputErrorBorderColor: '#ed2f2f', + inputHeightBase: 50, + get inputColor() { + return this.textColor; + }, + get inputColorPlaceholder() { + return '#575757'; + }, + + // Line Height + buttonLineHeight: 19, + lineHeightH1: 32, + lineHeightH2: 27, + lineHeightH3: 25, + lineHeight: platform === OS.IOS ? 20 : 24, + listItemSelected: platform === OS.IOS ? '#007aff' : '#3F51B5', + + // List + listBg: 'transparent', + listBorderColor: '#c9c9c9', + listDividerBg: '#f4f4f4', + listBtnUnderlayColor: '#DDD', + listItemPadding: platform === OS.IOS ? 10 : 12, + listNoteColor: '#808080', + listNoteSize: 13, + + // Progress Bar + defaultProgressColor: '#E4202D', + inverseProgressColor: '#1A191B', + + // Radio Button + radioBtnSize: platform === OS.IOS ? 25 : 23, + radioSelectedColorAndroid: '#3F51B5', + radioBtnLineHeight: platform === OS.IOS ? 29 : 24, + get radioColor() { + return this.brandPrimary; + }, + + // Segment + segmentBackgroundColor: platform === OS.IOS ? '#F8F8F8' : '#3F51B5', + segmentActiveBackgroundColor: platform === OS.IOS ? '#007aff' : '#fff', + segmentTextColor: platform === OS.IOS ? '#007aff' : '#fff', + segmentActiveTextColor: platform === OS.IOS ? '#fff' : '#3F51B5', + segmentBorderColor: platform === OS.IOS ? '#007aff' : '#fff', + segmentBorderColorMain: platform === OS.IOS ? '#a7a6ab' : '#3F51B5', + + // Spinner + defaultSpinnerColor: '#45D56E', + inverseSpinnerColor: '#1A191B', + + // Tab + tabBarDisabledTextColor: '#BDBDBD', + tabDefaultBg: platform === OS.IOS ? '#F8F8F8' : '#3F51B5', + topTabBarTextColor: platform === OS.IOS ? '#6b6b6b' : '#b3c7f9', + topTabBarActiveTextColor: platform === OS.IOS ? '#007aff' : '#fff', + topTabBarBorderColor: platform === OS.IOS ? '#a7a6ab' : '#fff', + topTabBarActiveBorderColor: platform === OS.IOS ? '#007aff' : '#fff', + + // Tabs + tabBgColor: '#F8F8F8', + tabFontSize: 15, + + // Text + textColor: '#000', + inverseTextColor: '#fff', + noteFontSize: 14, + get defaultTextColor() { + return this.textColor; + }, + + // Title + titleFontFamily: platform === OS.IOS ? 'System' : 'Roboto_medium', + titleFontSize: platform === OS.IOS ? 17 : 19, + subTitleFontSize: platform === OS.IOS ? 11 : 14, + subtitleColor: platform === OS.IOS ? '#8e8e93' : '#FFF', + titleFontColor: platform === OS.IOS ? '#000' : '#FFF', + + // Other + borderRadiusBase: platform === OS.IOS ? 5 : 2, + borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + contentPadding: 10, + dropdownLinkColor: '#414142', + inputLineHeight: 24, + deviceWidth, + deviceHeight, + isIphoneX, + inputGroupRoundedBorderRadius: 30, + + // iPhoneX SafeArea + Inset: { + portrait: { + topInset: 24, + leftInset: 0, + rightInset: 0, + bottomInset: 34, + }, + landscape: { + topInset: 0, + leftInset: 44, + rightInset: 44, + bottomInset: 21, + }, + }, +} as Variables; diff --git a/src/libs/native-base/variables/types.ts b/src/libs/native-base/variables/types.ts new file mode 100644 index 0000000..ccd9e78 --- /dev/null +++ b/src/libs/native-base/variables/types.ts @@ -0,0 +1,215 @@ +import { Platform } from 'react-native'; + +export type Portrait = { + topInset: number; + leftInset: number; + rightInset: number; + bottomInset: number; +}; + +export type Landscape = { + topInset: number; + leftInset: number; + rightInset: number; + bottomInset: number; +}; + +export type Inset = { + portrait: Portrait; + landscape: Landscape; +}; + +export type Variables = { + platform: typeof Platform.OS; + accordionBorderColor: string; + accordionContentPadding: number; + accordionIconFontSize: number; + contentStyle: string; + expandedIconStyle: string; + headerStyle: string; + iconStyle: string; + disableRow: string; + elevation: number; + containerTouchableBackgroundColor: string; + innerTouchableBackgroundColor: string; + listItemHeight: number; + listItemBorderColor: string; + marginHorizontal: number; + marginLeft: number; + marginTop: number; + minHeight: number; + padding: number; + touchableTextColor: string; + androidRipple: boolean; + androidRippleColor: string; + androidRippleColorDark: string; + buttonUppercaseAndroidText: boolean; + badgeBg: string; + badgeColor: string; + badgePadding: number; + buttonFontFamily: string; + buttonDisabledBg: string; + buttonPadding: number; + buttonDefaultActiveOpacity: number; + buttonDefaultFlex: number; + buttonDefaultBorderRadius: number; + buttonDefaultBorderWidth: number; + buttonPrimaryBg: string; + buttonPrimaryColor: string; + buttonInfoBg: string; + buttonInfoColor: string; + buttonSuccessBg: string; + buttonSuccessColor: string; + buttonDangerBg: string; + buttonDangerColor: string; + buttonWarningBg: string; + buttonWarningColor: string; + buttonTextSize: number; + buttonTextSizeLarge: number; + buttonTextSizeSmall: number; + borderRadiusLarge: number; + iconSizeLarge: number; + iconSizeSmall: number; + cardDefaultBg: string; + cardBorderColor: string; + cardBorderRadius: number; + cardItemPadding: number; + CheckboxRadius: number; + CheckboxBorderWidth: number; + CheckboxPaddingLeft: number; + CheckboxPaddingBottom: number; + CheckboxIconSize: number; + CheckboxIconMarginTop: number; + CheckboxFontSize: number; + checkboxBgColor: string; + checkboxSize: number; + checkboxTickColor: string; + checkboxDefaultColor: string; + checkboxTextShadowRadius: number; + brandPrimary: string; + brandInfo: string; + brandSuccess: string; + brandDanger: string; + brandWarning: string; + brandDark: string; + brandLight: string; + containerBgColor: string; + datePickerFlex: number; + datePickerPadding: number; + datePickerTextColor: string; + datePickerBg: string; + fabBackgroundColor: string; + fabBorderRadius: number; + fabBottom: number; + fabButtonBorderRadius: number; + fabButtonHeight: number; + fabButtonLeft: number; + fabButtonMarginBottom: number; + fabContainerBottom: number; + fabDefaultPosition: number; + fabElevation: number; + fabIconColor: string; + fabIconSize: number; + fabShadowColor: string; + fabShadowOffsetHeight: number; + fabShadowOffsetWidth: number; + fabShadowOpacity: number; + fabShadowRadius: number; + fabWidth: number; + DefaultFontSize: number; + fontFamily: string; + fontSizeBase: number; + fontSizeH1: number; + fontSizeH2: number; + fontSizeH3: number; + footerHeight: number; + footerDefaultBg: string; + footerPaddingBottom: number; + tabBarTextColor: string; + tabBarTextSize: number; + activeTab: string; + sTabBarActiveTextColor: string; + tabBarActiveTextColor: string; + tabActiveBgColor: string; + toolbarBtnColor: string; + toolbarDefaultBg: string; + toolbarHeight: number; + toolbarSearchIconSize: number; + toolbarInputColor: string; + searchBarHeight: number; + searchBarInputHeight: number; + toolbarBtnTextColor: string; + toolbarDefaultBorder: string; + iosStatusbar: string; + statusBarColor: string; + darkenHeader: string; + iconFamily: string; + iconFontSize: number; + iconHeaderSize: number; + inputFontSize: number; + inputBorderColor: string; + inputSuccessBorderColor: string; + inputErrorBorderColor: string; + inputHeightBase: number; + inputColor: string; + inputColorPlaceholder: string; + buttonLineHeight: number; + lineHeightH1: number; + lineHeightH2: number; + lineHeightH3: number; + lineHeight: number; + listItemSelected: string; + listBg: string; + listBorderColor: string; + listDividerBg: string; + listBtnUnderlayColor: string; + listItemPadding: number; + listNoteColor: string; + listNoteSize: number; + defaultProgressColor: string; + inverseProgressColor: string; + radioBtnSize: number; + radioSelectedColorAndroid: string; + radioBtnLineHeight: number; + radioColor: string; + segmentBackgroundColor: string; + segmentActiveBackgroundColor: string; + segmentTextColor: string; + segmentActiveTextColor: string; + segmentBorderColor: string; + segmentBorderColorMain: string; + defaultSpinnerColor: string; + inverseSpinnerColor: string; + tabBarDisabledTextColor: string; + tabDefaultBg: string; + topTabBarTextColor: string; + topTabBarActiveTextColor: string; + topTabBarBorderColor: string; + topTabBarActiveBorderColor: string; + tabBgColor: string; + tabFontSize: number; + textColor: string; + inverseTextColor: string; + noteFontSize: number; + defaultTextColor: string; + titleFontFamily: string; + titleFontSize: number; + subTitleFontSize: number; + subtitleColor: string; + titleFontColor: string; + borderRadiusBase: number; + borderWidth: number; + contentPadding: number; + dropdownLinkColor: string; + inputLineHeight: number; + deviceWidth: number; + deviceHeight: number; + isIphoneX: boolean; + inputGroupRoundedBorderRadius: number; + Inset: Inset; +}; + +export enum OS { + Android = 'android', + IOS = 'ios', +} diff --git a/src/screens/App.tsx b/src/screens/App.tsx index fb2db94..586ad5e 100644 --- a/src/screens/App.tsx +++ b/src/screens/App.tsx @@ -5,8 +5,11 @@ import RNBootSplash from 'react-native-bootsplash'; import { createClient } from 'libs/graphql'; import { API_URI } from 'config/api'; import Navigation from './Navigation'; +import { StyleProvider } from 'native-base'; +import { createTheme, variables } from '../libs/native-base'; const App = () => { + const theme = useRef(createTheme(variables)).current; const client = useRef(createClient(API_URI)).current; useEffect(() => { RNBootSplash.hide({ fade: true }); @@ -14,7 +17,9 @@ const App = () => { return ( - + + + ); }; diff --git a/yarn.lock b/yarn.lock index 54535fa..66656f6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1995,6 +1995,25 @@ dependencies: "@babel/types" "^7.3.0" +"@types/color-convert@*": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-2.0.0.tgz#8f5ee6b9e863dcbee5703f5a517ffb13d3ea4e22" + integrity sha512-m7GG7IKKGuJUXvkZ1qqG3ChccdIM/qBBo913z+Xft0nKCX4hAU/IxKwZBU4cpRZ7GS5kV4vOblUkILtSShCPXQ== + dependencies: + "@types/color-name" "*" + +"@types/color-name@*": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" + integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ== + +"@types/color@^3.0.1": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@types/color/-/color-3.0.1.tgz#2900490ed04da8116c5058cd5dba3572d5a25071" + integrity sha512-oeUWVaAwI+xINDUx+3F2vJkl/vVB03VChFF/Gl3iQCdbcakjuoJyMOba+3BXRtnBhxZ7uBYqQBi9EpLnvSoztA== + dependencies: + "@types/color-convert" "*" + "@types/eslint-visitor-keys@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"