From 26560a57cdd3db8ba06d64bdc63ea977cefac17a Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Thu, 20 Jan 2022 10:59:45 +0300 Subject: [PATCH] upgrade all react native packages --- .../app/react-native/.expo-shared/assets.json | 4 + templates/app/react-native/.gitignore | 6 +- templates/app/react-native/App.js | 104 ++++- templates/app/react-native/app.json | 6 +- .../app/react-native/assets/adaptive-icon.png | Bin 0 -> 17547 bytes templates/app/react-native/babel.config.js | 3 +- templates/app/react-native/package.json | 69 +-- .../app/react-native/src/api/AccountAPI.js | 9 +- .../react-native/src/api/AuditLoggingAPI.js | 7 + .../app/react-native/src/api/IdentityAPI.js | 7 +- .../src/components/AddIcon/AddIcon.js | 16 + .../components/AppContainer/AppContainer.js | 88 ---- .../src/components/DataList/DataList.js | 104 +++-- .../components/DrawerContent/DrawerContent.js | 87 ++-- .../src/components/FormButtons/FormButtons.js | 18 +- .../src/components/FormButtons/index.js | 1 + .../components/HamburgerIcon/HamburgerIcon.js | 17 + .../src/components/Loading/Loading.js | 23 +- .../components/LoadingButton/LoadingButton.js | 21 +- .../src/components/MenuIcon/MenuIcon.js | 19 - .../src/components/TenantBox/TenantBox.js | 125 ++--- .../ValidationMessage/ValidationMessage.js | 8 +- .../src/interceptors/APIInterceptor.js | 18 +- .../src/navigators/AuthNavigator.js | 12 +- .../src/navigators/DrawerNavigator.js | 37 +- .../src/navigators/HomeNavigator.js | 13 +- .../src/navigators/SettingsNavigator.js | 14 +- .../src/navigators/TenantsNavigator.js | 19 +- .../src/navigators/UsersNavigator.js | 14 +- .../ChangePassword/ChangePasswordForm.js | 152 +++--- .../CreateUpdateTenantForm.js | 203 ++++---- .../CreateUpdateTenantScreen.js | 12 +- .../CreateUpdateUser/CreateUpdateUserForm.js | 344 ++++++++------ .../src/screens/CreateUpdateUser/UserRoles.js | 22 +- .../src/screens/Home/HomeScreen.js | 34 +- .../src/screens/Login/LoginScreen.js | 166 ++++--- .../ManageProfile/ManageProfileForm.js | 199 ++++---- .../src/screens/Settings/SettingsScreen.js | 132 +++--- .../src/screens/Tenants/TenantsScreen.js | 68 ++- .../src/screens/Users/UsersScreen.js | 81 ++-- templates/app/react-native/src/store/index.js | 6 +- .../react-native/src/store/reducers/index.js | 2 +- .../react-native/src/store/sagas/AppSaga.js | 6 +- .../src/theme/components/Badge.js | 39 -- .../react-native/src/theme/components/Body.js | 11 - .../src/theme/components/Button.js | 384 --------------- .../react-native/src/theme/components/Card.js | 37 -- .../src/theme/components/CardItem.js | 198 -------- .../src/theme/components/CheckBox.js | 38 -- .../src/theme/components/Container.js | 17 - .../src/theme/components/Content.js | 14 - .../react-native/src/theme/components/Fab.js | 25 - .../src/theme/components/Footer.js | 117 ----- .../src/theme/components/FooterTab.js | 78 ---- .../react-native/src/theme/components/Form.js | 86 ---- .../react-native/src/theme/components/H1.js | 13 - .../react-native/src/theme/components/H2.js | 13 - .../react-native/src/theme/components/H3.js | 13 - .../src/theme/components/Header.js | 389 --------------- .../react-native/src/theme/components/Icon.js | 12 - .../src/theme/components/Input.js | 19 - .../src/theme/components/InputGroup.js | 132 ------ .../react-native/src/theme/components/Item.js | 241 ---------- .../src/theme/components/Label.js | 15 - .../react-native/src/theme/components/Left.js | 11 - .../src/theme/components/ListItem.js | 441 ------------------ .../src/theme/components/Picker.android.js | 14 - .../src/theme/components/Picker.ios.js | 7 - .../src/theme/components/Picker.js | 14 - .../src/theme/components/Radio.js | 26 -- .../src/theme/components/Right.js | 14 - .../src/theme/components/Segment.js | 57 --- .../src/theme/components/Separator.js | 49 -- .../src/theme/components/Spinner.js | 9 - .../src/theme/components/Subtitle.js | 19 - .../src/theme/components/SwipeRow.js | 46 -- .../src/theme/components/Switch.js | 9 - .../react-native/src/theme/components/Tab.js | 10 - .../src/theme/components/TabBar.js | 57 --- .../src/theme/components/TabContainer.js | 25 - .../src/theme/components/TabHeading.js | 40 -- .../react-native/src/theme/components/Text.js | 20 - .../src/theme/components/Textarea.js | 25 - .../src/theme/components/Thumbnail.js | 40 -- .../src/theme/components/Title.js | 21 - .../src/theme/components/Toast.js | 41 -- .../react-native/src/theme/components/View.js | 13 - .../src/theme/components/index.js | 247 ---------- .../src/theme/overrides/Button.js | 20 - .../src/theme/overrides/Content.js | 14 - .../react-native/src/theme/overrides/Icon.js | 35 -- .../react-native/src/theme/overrides/Input.js | 21 - .../src/theme/overrides/InputGroup.js | 19 - .../react-native/src/theme/overrides/Item.js | 24 - .../react-native/src/theme/overrides/Label.js | 18 - .../react-native/src/theme/overrides/Text.js | 31 -- .../react-native/src/theme/overrides/index.js | 39 -- .../src/theme/variables/CommonColor.js | 304 ------------ .../src/theme/variables/Material.js | 299 ------------ .../src/theme/variables/Platform.js | 333 ------------- .../react-native/src/theme/variables/index.js | 10 - 101 files changed, 1192 insertions(+), 5417 deletions(-) create mode 100644 templates/app/react-native/.expo-shared/assets.json create mode 100644 templates/app/react-native/assets/adaptive-icon.png create mode 100644 templates/app/react-native/src/api/AuditLoggingAPI.js create mode 100644 templates/app/react-native/src/components/AddIcon/AddIcon.js delete mode 100644 templates/app/react-native/src/components/AppContainer/AppContainer.js create mode 100644 templates/app/react-native/src/components/FormButtons/index.js create mode 100644 templates/app/react-native/src/components/HamburgerIcon/HamburgerIcon.js delete mode 100644 templates/app/react-native/src/components/MenuIcon/MenuIcon.js delete mode 100644 templates/app/react-native/src/theme/components/Badge.js delete mode 100644 templates/app/react-native/src/theme/components/Body.js delete mode 100644 templates/app/react-native/src/theme/components/Button.js delete mode 100644 templates/app/react-native/src/theme/components/Card.js delete mode 100644 templates/app/react-native/src/theme/components/CardItem.js delete mode 100644 templates/app/react-native/src/theme/components/CheckBox.js delete mode 100644 templates/app/react-native/src/theme/components/Container.js delete mode 100644 templates/app/react-native/src/theme/components/Content.js delete mode 100644 templates/app/react-native/src/theme/components/Fab.js delete mode 100644 templates/app/react-native/src/theme/components/Footer.js delete mode 100644 templates/app/react-native/src/theme/components/FooterTab.js delete mode 100644 templates/app/react-native/src/theme/components/Form.js delete mode 100644 templates/app/react-native/src/theme/components/H1.js delete mode 100644 templates/app/react-native/src/theme/components/H2.js delete mode 100644 templates/app/react-native/src/theme/components/H3.js delete mode 100644 templates/app/react-native/src/theme/components/Header.js delete mode 100644 templates/app/react-native/src/theme/components/Icon.js delete mode 100644 templates/app/react-native/src/theme/components/Input.js delete mode 100644 templates/app/react-native/src/theme/components/InputGroup.js delete mode 100644 templates/app/react-native/src/theme/components/Item.js delete mode 100644 templates/app/react-native/src/theme/components/Label.js delete mode 100644 templates/app/react-native/src/theme/components/Left.js delete mode 100644 templates/app/react-native/src/theme/components/ListItem.js delete mode 100644 templates/app/react-native/src/theme/components/Picker.android.js delete mode 100644 templates/app/react-native/src/theme/components/Picker.ios.js delete mode 100644 templates/app/react-native/src/theme/components/Picker.js delete mode 100644 templates/app/react-native/src/theme/components/Radio.js delete mode 100644 templates/app/react-native/src/theme/components/Right.js delete mode 100644 templates/app/react-native/src/theme/components/Segment.js delete mode 100644 templates/app/react-native/src/theme/components/Separator.js delete mode 100644 templates/app/react-native/src/theme/components/Spinner.js delete mode 100644 templates/app/react-native/src/theme/components/Subtitle.js delete mode 100644 templates/app/react-native/src/theme/components/SwipeRow.js delete mode 100644 templates/app/react-native/src/theme/components/Switch.js delete mode 100644 templates/app/react-native/src/theme/components/Tab.js delete mode 100644 templates/app/react-native/src/theme/components/TabBar.js delete mode 100644 templates/app/react-native/src/theme/components/TabContainer.js delete mode 100644 templates/app/react-native/src/theme/components/TabHeading.js delete mode 100644 templates/app/react-native/src/theme/components/Text.js delete mode 100644 templates/app/react-native/src/theme/components/Textarea.js delete mode 100644 templates/app/react-native/src/theme/components/Thumbnail.js delete mode 100644 templates/app/react-native/src/theme/components/Title.js delete mode 100644 templates/app/react-native/src/theme/components/Toast.js delete mode 100644 templates/app/react-native/src/theme/components/View.js delete mode 100644 templates/app/react-native/src/theme/components/index.js delete mode 100644 templates/app/react-native/src/theme/overrides/Button.js delete mode 100644 templates/app/react-native/src/theme/overrides/Content.js delete mode 100644 templates/app/react-native/src/theme/overrides/Icon.js delete mode 100644 templates/app/react-native/src/theme/overrides/Input.js delete mode 100644 templates/app/react-native/src/theme/overrides/InputGroup.js delete mode 100644 templates/app/react-native/src/theme/overrides/Item.js delete mode 100644 templates/app/react-native/src/theme/overrides/Label.js delete mode 100644 templates/app/react-native/src/theme/overrides/Text.js delete mode 100644 templates/app/react-native/src/theme/overrides/index.js delete mode 100644 templates/app/react-native/src/theme/variables/CommonColor.js delete mode 100644 templates/app/react-native/src/theme/variables/Material.js delete mode 100644 templates/app/react-native/src/theme/variables/Platform.js delete mode 100644 templates/app/react-native/src/theme/variables/index.js diff --git a/templates/app/react-native/.expo-shared/assets.json b/templates/app/react-native/.expo-shared/assets.json new file mode 100644 index 0000000000..1e6decfbb5 --- /dev/null +++ b/templates/app/react-native/.expo-shared/assets.json @@ -0,0 +1,4 @@ +{ + "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, + "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true +} diff --git a/templates/app/react-native/.gitignore b/templates/app/react-native/.gitignore index c409cf6af4..ec8a36a257 100644 --- a/templates/app/react-native/.gitignore +++ b/templates/app/react-native/.gitignore @@ -1,5 +1,6 @@ -node_modules/**/* -.expo/* +node_modules/ +.expo/ +dist/ npm-debug.* *.jks *.p8 @@ -8,7 +9,6 @@ npm-debug.* *.mobileprovision *.orig.* web-build/ -web-report/ # macOS .DS_Store diff --git a/templates/app/react-native/App.js b/templates/app/react-native/App.js index 7f8330f775..6505569f2b 100644 --- a/templates/app/react-native/App.js +++ b/templates/app/react-native/App.js @@ -1,39 +1,101 @@ -import { Ionicons } from '@expo/vector-icons'; -import * as Font from 'expo-font'; -import { StyleProvider } from 'native-base'; -import React, { useEffect, useState } from 'react'; +import { NavigationContainer } from '@react-navigation/native'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import i18n from 'i18n-js'; +import { NativeBaseProvider } from 'native-base'; +import React, { useEffect, useMemo, useState } from 'react'; import { enableScreens } from 'react-native-screens'; import { Provider } from 'react-redux'; import { PersistGate } from 'redux-persist/integration/react'; -import AppContainer from './src/components/AppContainer/AppContainer'; +import { getEnvVars } from './Environment'; +import Loading from './src/components/Loading/Loading'; +import { LocalizationContext } from './src/contexts/LocalizationContext'; import { initAPIInterceptor } from './src/interceptors/APIInterceptor'; +import AuthNavigator from './src/navigators/AuthNavigator'; +import DrawerNavigator from './src/navigators/DrawerNavigator'; import { persistor, store } from './src/store'; -import getTheme from './src/theme/components'; -import { activeTheme } from './src/theme/variables'; +import AppActions from './src/store/actions/AppActions'; +import PersistentStorageActions from './src/store/actions/PersistentStorageActions'; +import { createLanguageSelector } from './src/store/selectors/AppSelectors'; +import { createTokenSelector } from './src/store/selectors/PersistentStorageSelectors'; +import { connectToRedux } from './src/utils/ReduxConnect'; +import { isTokenValid } from './src/utils/TokenUtils'; + +const Stack = createNativeStackNavigator(); + +const { localization } = getEnvVars(); + +i18n.defaultSeparator = '::'; + +const cloneT = i18n.t; +i18n.t = (key, ...args) => { + if (key.slice(0, 2) === '::') { + key = localization.defaultResourceName + key; + } + return cloneT(key, ...args); +}; enableScreens(); initAPIInterceptor(store); export default function App() { + const language = createLanguageSelector()(store.getState()); const [isReady, setIsReady] = useState(false); + const localizationContextValue = useMemo( + () => ({ + t: i18n.t, + locale: (language || {}).cultureName, + }), + [language] + ); + useEffect(() => { - Font.loadAsync({ - Roboto: require('native-base/Fonts/Roboto.ttf'), - Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'), - ...Ionicons.font, - }).then(() => setIsReady(true)); + store.dispatch( + AppActions.fetchAppConfigAsync({ + callback: () => setIsReady(true), + showLoading: true, + }) + ); }, []); return ( - - - {isReady ? ( - - - - ) : null} - - + + + + + {isReady ? ( + + + + ) : null} + + + + + ); } + +function AppContainer({token, setToken}) { + const isValid = useMemo(() => isTokenValid(token), [token]); + + useEffect(() => { + if (!isValid && token && token.access_token) { + setToken({}) + } + }, [isValid]); + + + return isValid ? : +} + + +const ConnectedAppContainer = connectToRedux({ + component: AppContainer, + stateProps: (state) => ({ + token: createTokenSelector()(state), + }), + dispatchProps: { + setToken: PersistentStorageActions.setToken, + }, +}); diff --git a/templates/app/react-native/app.json b/templates/app/react-native/app.json index 9bfd9cdad8..5b78afa519 100644 --- a/templates/app/react-native/app.json +++ b/templates/app/react-native/app.json @@ -21,7 +21,11 @@ }, "android": { "package": "com.MyCompanyName.MyProjectName", - "versionCode": 1 + "versionCode": 1, + "adaptiveIcon": { + "foregroundImage": "./assets/adaptive-icon.png", + "backgroundColor": "#FFFFFF" + } }, "web": { "favicon": "./assets/icon.png" diff --git a/templates/app/react-native/assets/adaptive-icon.png b/templates/app/react-native/assets/adaptive-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..03d6f6b6c6727954aec1d8206222769afd178d8d GIT binary patch literal 17547 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 { - return api({ +export const login = ({ username, password }) => + api({ method: 'POST', url: '/connect/token', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: `grant_type=password&scope=${oAuthConfig.scope}&username=${username}&password=${password}&client_id=${oAuthConfig.clientId}&client_secret=${oAuthConfig.clientSecret}`, baseURL: oAuthConfig.issuer, - }).then(({ data }) => data) -}; + }).then(({ data }) => data); -export const logout = () => +export const Logout = () => api({ method: 'GET', url: '/api/account/logout', diff --git a/templates/app/react-native/src/api/AuditLoggingAPI.js b/templates/app/react-native/src/api/AuditLoggingAPI.js new file mode 100644 index 0000000000..0fd8d1d86f --- /dev/null +++ b/templates/app/react-native/src/api/AuditLoggingAPI.js @@ -0,0 +1,7 @@ +import api from './API'; + +export function getErrorRateStatistics(params = {}) { + return api + .get('/api/audit-logging/audit-logs/statistics/error-rate', { params }) + .then(({ data }) => data); +} diff --git a/templates/app/react-native/src/api/IdentityAPI.js b/templates/app/react-native/src/api/IdentityAPI.js index 45e191033c..9ae81ad2b5 100644 --- a/templates/app/react-native/src/api/IdentityAPI.js +++ b/templates/app/react-native/src/api/IdentityAPI.js @@ -1,6 +1,5 @@ import api from './API'; -export const getProfileDetail = () => api.get('/api/identity/my-profile').then(({ data }) => data); export const getAllRoles = () => api.get('/api/identity/roles/all').then(({ data }) => data.items); @@ -19,8 +18,10 @@ export const updateUser = (body, id) => export const removeUser = id => api.delete(`/api/identity/users/${id}`); +export const getProfileDetail = () => api.get('/api/account/my-profile').then(({ data }) => data); + export const updateProfileDetail = body => - api.put('/api/identity/my-profile', body).then(({ data }) => data); + api.put('/api/account/my-profile', body).then(({ data }) => data); export const changePassword = body => - api.post('/api/identity/my-profile/change-password', body).then(({ data }) => data); + api.post('/api/account/my-profile/change-password', body).then(({ data }) => data); diff --git a/templates/app/react-native/src/components/AddIcon/AddIcon.js b/templates/app/react-native/src/components/AddIcon/AddIcon.js new file mode 100644 index 0000000000..b4cc26f36f --- /dev/null +++ b/templates/app/react-native/src/components/AddIcon/AddIcon.js @@ -0,0 +1,16 @@ +import { Ionicons } from '@expo/vector-icons'; +import { Icon } from 'native-base'; +import React from 'react'; + +export default function AddIcon({ onPress, ...iconProps }) { + return ( + + ); +} diff --git a/templates/app/react-native/src/components/AppContainer/AppContainer.js b/templates/app/react-native/src/components/AppContainer/AppContainer.js deleted file mode 100644 index 3879c54844..0000000000 --- a/templates/app/react-native/src/components/AppContainer/AppContainer.js +++ /dev/null @@ -1,88 +0,0 @@ -import { NavigationContainer } from '@react-navigation/native'; -import i18n from 'i18n-js'; -import { Root } from 'native-base'; -import PropTypes from 'prop-types'; -import React, { useEffect, useMemo } from 'react'; -import { Platform, StatusBar } from 'react-native'; -import { getEnvVars } from '../../../Environment'; -import { LocalizationContext } from '../../contexts/LocalizationContext'; -import AuthNavigator from '../../navigators/AuthNavigator'; -import DrawerNavigator from '../../navigators/DrawerNavigator'; -import AppActions from '../../store/actions/AppActions'; -import PersistentStorageActions from '../../store/actions/PersistentStorageActions'; -import { createLanguageSelector } from '../../store/selectors/AppSelectors'; -import { createTokenSelector } from '../../store/selectors/PersistentStorageSelectors'; -import { connectToRedux } from '../../utils/ReduxConnect'; -import { isTokenValid } from '../../utils/TokenUtils'; -import Loading from '../Loading/Loading'; - -const { localization } = getEnvVars(); - -i18n.defaultSeparator = '::'; - -const cloneT = i18n.t; -i18n.t = (key, ...args) => { - if (key.slice(0, 2) === '::') { - key = localization.defaultResourceName + key; - } - return cloneT(key, ...args); -}; - -function AppContainer({ language, fetchAppConfig, token, setToken }) { - const platform = Platform.OS; - - const localizationContext = useMemo( - () => ({ - t: i18n.t, - locale: (language || {}).cultureName, - }), - [language], - ); - - const isValid = useMemo(() => isTokenValid(token), [token]); - - useEffect(() => { - if (!isValid && token && token.access_token) { - setToken({}); - } - }, [isValid]); - - useEffect(() => { - fetchAppConfig(); - }, []); - - return ( - <> - - - {language ? ( - - - {isValid ? : } - - - ) : null} - - - - ); -} - -AppContainer.propTypes = { - language: PropTypes.object, - token: PropTypes.object.isRequired, - fetchAppConfig: PropTypes.func.isRequired, - setToken: PropTypes.func.isRequired, -}; - -export default connectToRedux({ - component: AppContainer, - stateProps: state => ({ - language: createLanguageSelector()(state), - token: createTokenSelector()(state), - }), - dispatchProps: { - fetchAppConfig: AppActions.fetchAppConfigAsync, - setToken: PersistentStorageActions.setToken, - }, -}); diff --git a/templates/app/react-native/src/components/DataList/DataList.js b/templates/app/react-native/src/components/DataList/DataList.js index 7c837ec83f..9dce6d9562 100644 --- a/templates/app/react-native/src/components/DataList/DataList.js +++ b/templates/app/react-native/src/components/DataList/DataList.js @@ -1,17 +1,16 @@ +import { Ionicons } from '@expo/vector-icons'; import { useFocusEffect } from '@react-navigation/native'; import i18n from 'i18n-js'; -import { connectStyle, Icon, Input, InputGroup, Item, List, Spinner, Text } from 'native-base'; +import { Box, Center, FlatList, Icon, Input, Spinner, Text } from 'native-base'; import PropTypes from 'prop-types'; import React, { forwardRef, useCallback, useEffect, useState } from 'react'; -import { RefreshControl, StyleSheet, View } from 'react-native'; +import { StyleSheet, View } from 'react-native'; import LoadingActions from '../../store/actions/LoadingActions'; -import { activeTheme } from '../../theme/variables'; import { debounce } from '../../utils/Debounce'; import { connectToRedux } from '../../utils/ReduxConnect'; import LoadingButton from '../LoadingButton/LoadingButton'; function DataList({ - style, navigation, fetchFn, render, @@ -44,56 +43,67 @@ function DataList({ if (loading || records.length === totalCount) return; setButtonLoading(true); - fetch(skipCount + maxResultCount, false).finally(() => setButtonLoading(false)); + fetch(skipCount + maxResultCount, false).finally(() => + setButtonLoading(false) + ); }; useFocusEffect( useCallback(() => { setSkipCount(0); fetch(0, false); - }, []), + }, []) ); useEffect(() => { function searchFetch() { setSearchLoading(true); - return fetch(0, false).finally(() => setTimeout(() => setSearchLoading(false), 150)); + return fetch(0, false).finally(() => + setTimeout(() => setSearchLoading(false), 150) + ); } debounce(searchFetch, debounceTime)(); }, [filter]); return ( - <> - - - - {searchLoading ? ( - - - - ) : ( - - )} - - - - } - dataArray={records} - renderRow={(data, sectionID, rowId, ...args) => ( +
+ + + ) : ( + + ) + } + /> + ( <> - {render(data, sectionID, rowId, ...args)} - {rowId + 1 === skipCount + maxResultCount && totalCount > records.length ? ( - - fetchPartial()}> + {render(...args)} + {args.index + 1 === skipCount + maxResultCount && + totalCount > records.length ? ( + + fetchPartial()} + > {i18n.t('AbpUi::LoadMore')} @@ -102,14 +112,13 @@ function DataList({ )} {...props} /> - - + +
); } DataList.propTypes = { - ...List.propTypes, - style: PropTypes.any.isRequired, + ...FlatList.propTypes, fetchFn: PropTypes.func.isRequired, render: PropTypes.func.isRequired, maxResultCount: PropTypes.number, @@ -119,19 +128,14 @@ DataList.propTypes = { const styles = StyleSheet.create({ container: { flex: 1 }, list: {}, - spinner: { - transform: [{ scale: 0.5 }], - position: 'absolute', - right: 8, - top: -40, - color: activeTheme.brandInfo, - }, }); -const Forwarded = forwardRef((props, ref) => ); +const Forwarded = forwardRef((props, ref) => ( + +)); export default connectToRedux({ - component: connectStyle('ABP.DataList', styles)(Forwarded), + component: Forwarded, dispatchProps: { startLoading: LoadingActions.start, stopLoading: LoadingActions.stop, diff --git a/templates/app/react-native/src/components/DrawerContent/DrawerContent.js b/templates/app/react-native/src/components/DrawerContent/DrawerContent.js index 1725abaee3..598f05a8c7 100644 --- a/templates/app/react-native/src/components/DrawerContent/DrawerContent.js +++ b/templates/app/react-native/src/components/DrawerContent/DrawerContent.js @@ -1,73 +1,65 @@ -import { Text, View, List, ListItem, Left, Icon, Body } from 'native-base'; -import React from 'react'; -import { Image, StyleSheet } from 'react-native'; -import SafeAreaView from 'react-native-safe-area-view'; +import { Ionicons } from '@expo/vector-icons'; +import Constants from 'expo-constants'; import i18n from 'i18n-js'; +import { List, Text, View } from 'native-base'; import PropTypes from 'prop-types'; -import Constants from 'expo-constants'; +import React from 'react'; +import { Image, StyleSheet } from 'react-native'; +import { SafeAreaView } from 'react-native-safe-area-context'; import { withPermission } from '../../hocs/PermissionHOC'; const screens = { - Home: { label: '::Menu:Home', iconName: 'home' }, - Users: { + HomeStack: { label: '::Menu:Home', iconName: 'home' }, + UsersStack: { label: 'AbpIdentity::Users', - iconName: 'contacts', + iconName: 'people', requiredPolicy: 'AbpIdentity.Users', }, - Tenants: { + TenantsStack: { label: 'AbpTenantManagement::Tenants', - iconName: 'people', + iconName: 'book-outline', requiredPolicy: 'AbpTenantManagement.Tenants', }, - Settings: { label: 'AbpSettingManagement::Settings', iconName: 'cog' }, + SettingsStack: { label: 'AbpSettingManagement::Settings', iconName: 'cog' }, }; -const ListItemWithPermission = withPermission(ListItem); +const ListItemWithPermission = withPermission(List.Item); -function DrawerContent({ navigation, state: { routeNames, index: currentScreenIndex } }) { - const navigate = screen => { +function DrawerContent({ + navigation, + state: { routeNames, index: currentScreenIndex }, +}) { + const navigate = (screen) => { navigation.navigate(screen); navigation.closeDrawer(); }; return ( - + - + - item} - renderRow={name => ( + + {routeNames.map((name) => ( navigate(name)} - style={{ - ...styles.navItem, - backgroundColor: name === routeNames[currentScreenIndex] ? '#38003c' : '#f2f2f2', - }}> - - - - - - {i18n.t(screens[name].label)} - - + my="0" + > + + {i18n.t(screens[name].label)} - )} - /> + ))} + @@ -90,17 +82,8 @@ const styles = StyleSheet.create({ marginBottom: 15, }, headerView: { - borderBottomWidth: 1, - borderColor: '#eee', alignItems: 'center', }, - navItem: { - marginLeft: 0, - marginBottom: 3, - paddingLeft: 10, - width: '100%', - backgroundColor: '#f2f2f2', - }, footer: { backgroundColor: '#eee', flexDirection: 'row', diff --git a/templates/app/react-native/src/components/FormButtons/FormButtons.js b/templates/app/react-native/src/components/FormButtons/FormButtons.js index 5bbdb388f8..d844f7747a 100644 --- a/templates/app/react-native/src/components/FormButtons/FormButtons.js +++ b/templates/app/react-native/src/components/FormButtons/FormButtons.js @@ -1,11 +1,10 @@ -import React, { forwardRef } from 'react'; -import PropTypes from 'prop-types'; -import { Button, Text, connectStyle } from 'native-base'; -import { View, StyleSheet, Alert } from 'react-native'; import i18n from 'i18n-js'; +import { Button, Text } from 'native-base'; +import PropTypes from 'prop-types'; +import React, { forwardRef } from 'react'; +import { Alert, StyleSheet, View } from 'react-native'; function FormButtons({ - style, submit, remove, removeMessage, @@ -30,11 +29,10 @@ function FormButtons({ }; return ( - + {isShowRemove ? ( ); } @@ -19,13 +19,4 @@ LoadingButton.propTypes = { const styles = StyleSheet.create({ button: { marginTop: 20, marginBottom: 30, height: 30 }, - spinner: { - transform: [{ scale: 0.5 }], - color: 'white', - marginRight: 5, - }, -}); - -const Forwarded = forwardRef((props, ref) => ); - -export default connectStyle('ABP.LoadingButton', styles)(Forwarded); +}); \ No newline at end of file diff --git a/templates/app/react-native/src/components/MenuIcon/MenuIcon.js b/templates/app/react-native/src/components/MenuIcon/MenuIcon.js deleted file mode 100644 index c820d30a7f..0000000000 --- a/templates/app/react-native/src/components/MenuIcon/MenuIcon.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { TouchableOpacity } from 'react-native'; -import { Icon } from 'native-base'; -import PropTypes from 'prop-types'; - -function MenuIcon({ onPress, iconName = 'menu' }) { - return ( - - - - ); -} - -MenuIcon.propTypes = { - onPress: PropTypes.func.isRequired, - iconName: PropTypes.string, -}; - -export default MenuIcon; diff --git a/templates/app/react-native/src/components/TenantBox/TenantBox.js b/templates/app/react-native/src/components/TenantBox/TenantBox.js index dc13fae309..7534b9a8f4 100644 --- a/templates/app/react-native/src/components/TenantBox/TenantBox.js +++ b/templates/app/react-native/src/components/TenantBox/TenantBox.js @@ -1,23 +1,19 @@ import i18n from 'i18n-js'; -import { - Button, - connectStyle, - Content, - Input, - InputGroup, - Label, - Segment, - Text, -} from 'native-base'; +import { Box, Button, FormControl, Input, Text } from 'native-base'; import PropTypes from 'prop-types'; import React, { forwardRef, useState } from 'react'; -import { StyleSheet, View, Alert } from 'react-native'; +import { Alert, StyleSheet, View } from 'react-native'; import { getTenant } from '../../api/AccountAPI'; import PersistentStorageActions from '../../store/actions/PersistentStorageActions'; -import { connectToRedux } from '../../utils/ReduxConnect'; import { createTenantSelector } from '../../store/selectors/PersistentStorageSelectors'; +import { connectToRedux } from '../../utils/ReduxConnect'; -function TenantBox({ style, tenant = {}, setTenant, showTenantSelection, toggleTenantSelection }) { +function TenantBox({ + tenant = {}, + setTenant, + showTenantSelection, + toggleTenantSelection, +}) { const [tenantName, setTenantName] = useState(tenant.name); const findTenant = () => { @@ -34,7 +30,7 @@ function TenantBox({ style, tenant = {}, setTenant, showTenantSelection, toggleT i18n.t('AbpUiMultiTenancy::GivenTenantIsNotAvailable', { 0: tenantName, }), - [{ text: i18n.t('AbpUi::Ok') }], + [{ text: i18n.t('AbpUi::Ok') }] ); return; } @@ -45,42 +41,74 @@ function TenantBox({ style, tenant = {}, setTenant, showTenantSelection, toggleT return ( <> - - - {i18n.t('AbpUiMultiTenancy::Tenant')} - - {tenant.name ? tenant.name : i18n.t('AbpUiMultiTenancy::NotSelected')} + + + + {i18n.t('AbpUiMultiTenancy::Tenant')} + + + {tenant.name + ? tenant.name + : i18n.t('AbpUiMultiTenancy::NotSelected')} - + {showTenantSelection ? ( - - - - - - {i18n.t('AbpUiMultiTenancy::SwitchTenantHint')} - - - - + ) : null} ); } TenantBox.propTypes = { - style: PropTypes.any.isRequired, setTenant: PropTypes.func.isRequired, showTenantSelection: PropTypes.bool.isRequired, toggleTenantSelection: PropTypes.func.isRequired, @@ -88,26 +116,11 @@ TenantBox.propTypes = { }; const styles = StyleSheet.create({ - container: { - paddingHorizontal: 20, - alignItems: 'center', - justifyContent: 'space-between', - height: 70, - }, button: { marginTop: 20, width: '49%' }, - switchButton: { - borderTopWidth: 0, - borderRightWidth: 0, - borderBottomWidth: 0, - borderLeftWidth: 0, - borderRadius: 10, - backgroundColor: '#38003c', - height: 35, - }, + tenant: { color: '#777' }, title: { marginRight: 10, - color: '#777', fontSize: 13, fontWeight: '600', textTransform: 'uppercase', @@ -115,14 +128,16 @@ const styles = StyleSheet.create({ hint: { color: '#bbb', textAlign: 'left' }, }); -const Forwarded = forwardRef((props, ref) => ); +const Forwarded = forwardRef((props, ref) => ( + +)); export default connectToRedux({ - component: connectStyle('ABP.TenantBox', styles)(Forwarded), + component: Forwarded, dispatchProps: { setTenant: PersistentStorageActions.setTenant, }, - stateProps: state => ({ + stateProps: (state) => ({ tenant: createTenantSelector()(state), }), }); diff --git a/templates/app/react-native/src/components/ValidationMessage/ValidationMessage.js b/templates/app/react-native/src/components/ValidationMessage/ValidationMessage.js index 30e7087762..c2a398f379 100644 --- a/templates/app/react-native/src/components/ValidationMessage/ValidationMessage.js +++ b/templates/app/react-native/src/components/ValidationMessage/ValidationMessage.js @@ -1,18 +1,16 @@ import i18n from 'i18n-js'; -import { connectStyle } from 'native-base'; import React, { forwardRef } from 'react'; import { Text } from 'react-native'; const ValidationMessage = ({ children, ...props }) => - children ? {i18n.t(children)} : null; + children ? {i18n.t(children)} : null; const styles = { fontSize: 12, - marginHorizontal: 10, - marginTop: -5, + marginTop: 3, color: '#ed2f2f', }; const Forwarded = forwardRef((props, ref) => ); -export default connectStyle('ABP.ValidationMessage', styles)(Forwarded); +export default Forwarded diff --git a/templates/app/react-native/src/interceptors/APIInterceptor.js b/templates/app/react-native/src/interceptors/APIInterceptor.js index 6060dca2b3..b5ffc56a3c 100644 --- a/templates/app/react-native/src/interceptors/APIInterceptor.js +++ b/templates/app/react-native/src/interceptors/APIInterceptor.js @@ -1,8 +1,8 @@ -import { Toast } from 'native-base'; import i18n from 'i18n-js'; +import { Toast } from 'native-base'; import api from '../api/API'; -import PersistentStorageActions from '../store/actions/PersistentStorageActions'; import LoadingActions from '../store/actions/LoadingActions'; +import PersistentStorageActions from '../store/actions/PersistentStorageActions'; export function initAPIInterceptor(store) { api.interceptors.request.use( @@ -45,11 +45,10 @@ export function initAPIInterceptor(store) { showError({ error: errorRes.data.error || {}, status: errorRes.status }); } else { Toast.show({ - text: 'An unexpected error has occurred', - buttonText: 'x', + title: 'An unexpected error has occurred', + isClosable: true, duration: 10000, - type: 'danger', - textStyle: { textAlign: 'center' }, + backgroundColor: 'danger.500', }); } @@ -93,10 +92,9 @@ function showError({ error = {}, status }) { } Toast.show({ - text: `${title}\n${message}`, - buttonText: 'x', + title: `${title}\n${message}`, + isClosable: true, duration: 10000, - type: 'danger', - textStyle: { textAlign: 'center' }, + backgroundColor: 'danger.500', }); } diff --git a/templates/app/react-native/src/navigators/AuthNavigator.js b/templates/app/react-native/src/navigators/AuthNavigator.js index b6b06d11b5..0311556deb 100644 --- a/templates/app/react-native/src/navigators/AuthNavigator.js +++ b/templates/app/react-native/src/navigators/AuthNavigator.js @@ -1,15 +1,15 @@ -import { createStackNavigator } from '@react-navigation/stack'; -import React from 'react'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import React, { useContext } from 'react'; import { LocalizationContext } from '../contexts/LocalizationContext'; import LoginScreen from '../screens/Login/LoginScreen'; -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); -export default function AuthStackNavigator() { - const { t } = React.useContext(LocalizationContext); +export default function AuthNavigator() { + const {t} = useContext(LocalizationContext); return ( - + - - - - + ({ + title: t('::Menu:Home'), + headerLeft: () => , + })} + /> + null }} + /> + null }} + /> + null }} + /> ); } diff --git a/templates/app/react-native/src/navigators/HomeNavigator.js b/templates/app/react-native/src/navigators/HomeNavigator.js index 7ba440f510..8f9e588edd 100644 --- a/templates/app/react-native/src/navigators/HomeNavigator.js +++ b/templates/app/react-native/src/navigators/HomeNavigator.js @@ -1,23 +1,16 @@ +import { createNativeStackNavigator } from '@react-navigation/native-stack'; import React from 'react'; -import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from '../screens/Home/HomeScreen'; -import MenuIcon from '../components/MenuIcon/MenuIcon'; -import { LocalizationContext } from '../contexts/LocalizationContext'; -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); export default function HomeStackNavigator() { - const { t } = React.useContext(LocalizationContext); - return ( ({ - headerLeft: () => navigation.openDrawer()} />, - title: t('::Menu:Home'), - })} + options={{header: () => null}} /> ); diff --git a/templates/app/react-native/src/navigators/SettingsNavigator.js b/templates/app/react-native/src/navigators/SettingsNavigator.js index 7bfd996e2d..370da97b93 100644 --- a/templates/app/react-native/src/navigators/SettingsNavigator.js +++ b/templates/app/react-native/src/navigators/SettingsNavigator.js @@ -1,13 +1,13 @@ -import React from 'react'; -import { createStackNavigator } from '@react-navigation/stack'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; import i18n from 'i18n-js'; -import SettingsScreen from '../screens/Settings/SettingsScreen'; +import React from 'react'; +import HamburgerIcon from '../components/HamburgerIcon/HamburgerIcon'; +import { LocalizationContext } from '../contexts/LocalizationContext'; import ChangePasswordScreen from '../screens/ChangePassword/ChangePasswordScreen'; import ManageProfileScreen from '../screens/ManageProfile/ManageProfileScreen'; -import MenuIcon from '../components/MenuIcon/MenuIcon'; -import { LocalizationContext } from '../contexts/LocalizationContext'; +import SettingsScreen from '../screens/Settings/SettingsScreen'; -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); export default function SettingsStackNavigator() { const { t } = React.useContext(LocalizationContext); @@ -18,7 +18,7 @@ export default function SettingsStackNavigator() { name="Settings" component={SettingsScreen} options={({ navigation }) => ({ - headerLeft: () => navigation.openDrawer()} />, + headerLeft: () => , title: t('AbpSettingManagement::Settings'), })} /> diff --git a/templates/app/react-native/src/navigators/TenantsNavigator.js b/templates/app/react-native/src/navigators/TenantsNavigator.js index 7e38b82674..94ae711d42 100644 --- a/templates/app/react-native/src/navigators/TenantsNavigator.js +++ b/templates/app/react-native/src/navigators/TenantsNavigator.js @@ -1,11 +1,13 @@ + +import { createNativeStackNavigator } from '@react-navigation/native-stack'; import React from 'react'; -import { createStackNavigator } from '@react-navigation/stack'; -import TenantsScreen from '../screens/Tenants/TenantsScreen'; -import CreateUpdateTenantScreen from '../screens/CreateUpdateTenant/CreateUpdateTenantScreen'; -import MenuIcon from '../components/MenuIcon/MenuIcon'; +import AddIcon from '../components/AddIcon/AddIcon'; +import HamburgerIcon from '../components/HamburgerIcon/HamburgerIcon'; import { LocalizationContext } from '../contexts/LocalizationContext'; +import CreateUpdateTenantScreen from '../screens/CreateUpdateTenant/CreateUpdateTenantScreen'; +import TenantsScreen from '../screens/Tenants/TenantsScreen'; -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); export default function TenantsStackNavigator() { const { t } = React.useContext(LocalizationContext); @@ -16,17 +18,16 @@ export default function TenantsStackNavigator() { name="Tenants" component={TenantsScreen} options={({ navigation }) => ({ - headerLeft: () => navigation.openDrawer()} />, title: t('AbpTenantManagement::Tenants'), + headerLeft: () => , + headerRight: () => navigation.navigate('CreateUpdateTenant')}/>, })} /> ({ - title: t( - route.params?.tenantId ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant', - ), + title: t(route.params?.tenantId ? 'AbpTenantManagement::Edit' : 'AbpTenantManagement::NewTenant'), })} /> diff --git a/templates/app/react-native/src/navigators/UsersNavigator.js b/templates/app/react-native/src/navigators/UsersNavigator.js index 222dfe1550..537129be14 100644 --- a/templates/app/react-native/src/navigators/UsersNavigator.js +++ b/templates/app/react-native/src/navigators/UsersNavigator.js @@ -1,11 +1,12 @@ +import { createNativeStackNavigator } from '@react-navigation/native-stack'; import React from 'react'; -import { createStackNavigator } from '@react-navigation/stack'; -import UsersScreen from '../screens/Users/UsersScreen'; -import CreateUpdateUserScreen from '../screens/CreateUpdateUser/CreateUpdateUserScreen'; -import MenuIcon from '../components/MenuIcon/MenuIcon'; +import AddIcon from '../components/AddIcon/AddIcon'; +import HamburgerIcon from '../components/HamburgerIcon/HamburgerIcon'; import { LocalizationContext } from '../contexts/LocalizationContext'; +import CreateUpdateUserScreen from '../screens/CreateUpdateUser/CreateUpdateUserScreen'; +import UsersScreen from '../screens/Users/UsersScreen'; -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); export default function UsersStackNavigator() { const { t } = React.useContext(LocalizationContext); @@ -16,8 +17,9 @@ export default function UsersStackNavigator() { name="Users" component={UsersScreen} options={({ navigation }) => ({ - headerLeft: () => navigation.openDrawer()} />, title: t('AbpIdentity::Users'), + headerLeft: () => , + headerRight: () => navigation.navigate('CreateUpdateUser')}/>, })} /> { + const onSubmit = (values) => { submit({ ...values, newPasswordConfirm: values.newPassword, }); }; + const formik = useFormik({ + enableReinitialize: true, + validationSchema: ValidationSchema, + initialValues: { + currentPassword: '', + newPassword: '', + }, + onSubmit, + }); + return ( - onSubmit(values)}> - {({ handleChange, handleBlur, handleSubmit, values, errors, isValid }) => ( - <> - - -
- - - - newPasswordRef.current._root.focus()} - returnKeyType="next" - onChangeText={handleChange('currentPassword')} - onBlur={handleBlur('currentPassword')} - value={values.currentPassword} - textContentType="password" - secureTextEntry={!showCurrentPassword} - /> - setShowCurrentPassword(!showCurrentPassword)} - /> - - - {errors.currentPassword} - - - - - setShowNewPassword(!showNewPassword)} - /> - - - {errors.newPassword} -
- - - - - )} - + <> + + + + + {i18n.t('AbpIdentity::DisplayName:CurrentPassword')} + + newPasswordRef?.current?.focus()} + returnKeyType="next" + onChangeText={formik.handleChange('currentPassword')} + onBlur={formik.handleBlur('currentPassword')} + value={formik.values.currentPassword} + textContentType="password" + secureTextEntry={!showCurrentPassword} + InputRightElement={ + setShowCurrentPassword(!showCurrentPassword)} + /> + } + /> + + {formik.errors.currentPassword} + + + + + + + + {i18n.t('AbpIdentity::DisplayName:NewPassword')} + + setShowNewPassword(!showNewPassword)} + /> + } + /> + {formik.errors.newPassword} + + + + + ); } diff --git a/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantForm.js b/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantForm.js index bb1a2105fc..b76f356062 100644 --- a/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantForm.js +++ b/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantForm.js @@ -1,11 +1,11 @@ -import { Formik } from 'formik'; +import { Ionicons } from '@expo/vector-icons'; +import { useFormik } from 'formik'; import i18n from 'i18n-js'; -import { Container, Content, Input, InputGroup, Label, Item, Icon } from 'native-base'; +import { Box, FormControl, Icon, Input, Stack } from 'native-base'; import PropTypes from 'prop-types'; import React, { useRef, useState } from 'react'; -import { StyleSheet } from 'react-native'; import * as Yup from 'yup'; -import FormButtons from '../../components/FormButtons/FormButtons'; +import { FormButtons } from '../../components/FormButtons'; import ValidationMessage from '../../components/ValidationMessage/ValidationMessage'; import { usePermission } from '../../hooks/UsePermission'; @@ -21,13 +21,6 @@ function CreateUpdateTenantForm({ editingTenant = {}, submit, remove }) { const [showAdminPassword, setShowAdminPassword] = useState(false); const hasRemovePermission = usePermission('AbpTenantManagement.Tenants.Delete'); - const onSubmit = values => { - submit({ - ...editingTenant, - ...values, - }); - }; - const adminEmailAddressValidation = Yup.lazy(() => Yup.string() .required('AbpAccount::ThisFieldIsRequired.') @@ -38,95 +31,107 @@ function CreateUpdateTenantForm({ editingTenant = {}, submit, remove }) { Yup.string().required('AbpAccount::ThisFieldIsRequired.'), ); + const onSubmit = values => { + submit({ + ...editingTenant, + ...values, + }); + }; + + const formik = useFormik({ + enableReinitialize: true, + validationSchema: Yup.object().shape({ + ...validations, + ...(!editingTenant.id && { + adminEmailAddress: adminEmailAddressValidation, + adminPassword: adminPasswordValidation, + }), + }), + initialValues: { + lockoutEnabled: false, + twoFactorEnabled: false, + ...editingTenant, + }, + onSubmit, + }); + return ( - onSubmit(values)}> - {({ handleChange, handleBlur, handleSubmit, values, errors, isValid }) => ( - <> - - - - + <> + + + + {i18n.t('AbpTenantManagement::TenantName')} + + {formik.errors.name} + + + + {!editingTenant.id ? ( + <> + + + + {i18n.t('AbpTenantManagement::DisplayName:AdminEmailAddress')} + - !editingTenant.id ? adminEmailRef.current._root.focus() : null - } - returnKeyType={!editingTenant.id ? 'next' : 'done'} - onChangeText={handleChange('name')} - onBlur={handleBlur('name')} - value={values.name} - autoCapitalize = 'none' + ref={adminEmailRef} + onChangeText={formik.handleChange('adminEmailAddress')} + onBlur={formik.handleBlur('adminEmailAddress')} + value={formik.values.adminEmailAddress} + autoCapitalize="none" + onSubmitEditing={() => adminPasswordRef?.current?.focus()} + returnKeyType="next" /> - - {errors.name} - {!editingTenant.id ? ( - <> - - - adminPasswordRef.current._root.focus()} - returnKeyType="next" - onChangeText={handleChange('adminEmailAddress')} - onBlur={handleBlur('adminEmailAddress')} - value={values.adminEmailAddress} - autoCapitalize = 'none' + {formik.errors.adminEmailAddress} + + + + + + + {i18n.t('AbpTenantManagement::DisplayName:AdminPassword')} + + setShowAdminPassword(!showAdminPassword)} /> - - {errors.adminEmailAddress} - - - - - setShowAdminPassword(!showAdminPassword)} - /> - - - {errors.adminPassword} - - ) : null} - - - - - )} - + } + /> + {formik.errors.adminPassword} + + + + ) : null} + + + ); } @@ -136,10 +141,4 @@ CreateUpdateTenantForm.propTypes = { remove: PropTypes.func.isRequired, }; -const styles = StyleSheet.create({ - container: { - marginBottom: 50, - }, -}); - export default CreateUpdateTenantForm; diff --git a/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantScreen.js b/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantScreen.js index eacbb98a2c..a3f59a8cf7 100644 --- a/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantScreen.js +++ b/templates/app/react-native/src/screens/CreateUpdateTenant/CreateUpdateTenantScreen.js @@ -1,11 +1,11 @@ -import PropTypes from 'prop-types'; -import React, { useState, useCallback } from 'react'; import { useFocusEffect } from '@react-navigation/native'; +import PropTypes from 'prop-types'; +import React, { useCallback, useState } from 'react'; import { createTenant, getTenantById, removeTenant, - updateTenant, + updateTenant } from '../../api/TenantManagementAPI'; import LoadingActions from '../../store/actions/LoadingActions'; import { createLoadingSelector } from '../../store/selectors/LoadingSelectors'; @@ -48,7 +48,11 @@ function CreateUpdateTenantScreen({ navigation, route, startLoading, stopLoading }; const renderForm = () => ( - + ); if (tenantId && tenant) { diff --git a/templates/app/react-native/src/screens/CreateUpdateUser/CreateUpdateUserForm.js b/templates/app/react-native/src/screens/CreateUpdateUser/CreateUpdateUserForm.js index b20233f431..81621ff87e 100644 --- a/templates/app/react-native/src/screens/CreateUpdateUser/CreateUpdateUserForm.js +++ b/templates/app/react-native/src/screens/CreateUpdateUser/CreateUpdateUserForm.js @@ -1,25 +1,21 @@ -import { Formik } from 'formik'; +import { Ionicons } from '@expo/vector-icons'; +import { useFormik } from 'formik'; import i18n from 'i18n-js'; import { - Body, + Box, Button, - CheckBox, - Container, - Content, - Input, - InputGroup, - Item, + Checkbox, + FormControl, Icon, - Label, - ListItem, - Segment, - Text, + Input, + KeyboardAvoidingView, + Stack } from 'native-base'; import PropTypes from 'prop-types'; import React, { useRef, useState } from 'react'; -import { StyleSheet, TouchableOpacity, View } from 'react-native'; +import { Platform } from 'react-native'; import * as Yup from 'yup'; -import FormButtons from '../../components/FormButtons/FormButtons'; +import { FormButtons } from '../../components/FormButtons'; import ValidationMessage from '../../components/ValidationMessage/ValidationMessage'; import { usePermission } from '../../hooks/UsePermission'; import UserRoles from './UserRoles'; @@ -50,7 +46,7 @@ function CreateUpdateUserForm({ editingUser = {}, submit, remove }) { const hasRemovePermission = usePermission('AbpIdentity.Users.Delete'); - const onSubmit = values => { + const onSubmit = (values) => { submit({ ...editingUser, ...values, @@ -65,157 +61,219 @@ function CreateUpdateUserForm({ editingUser = {}, submit, remove }) { return Yup.string().required('AbpAccount::ThisFieldIsRequired.'); }); + const formik = useFormik({ + enableReinitialize: true, + validationSchema: Yup.object().shape({ + ...validations, + password: passwordValidation, + }), + initialValues: { + isActive: true, + lockoutEnabled: false, + ...editingUser, + }, + onSubmit, + }); + return ( - onSubmit(values)}> - {({ handleChange, handleBlur, handleSubmit, values, errors, isValid, setFieldValue }) => ( - <> - - - - - - - - - - + + + {selectedTab === 0 ? ( + <> + + + + {i18n.t('AbpIdentity::UserName')} + nameRef.current._root.focus()} + onSubmitEditing={() => nameRef.current.focus()} returnKeyType="next" - onChangeText={handleChange('userName')} - onBlur={handleBlur('userName')} - value={values.userName} - autoCapitalize = 'none' + onChangeText={formik.handleChange('userName')} + onBlur={formik.handleBlur('userName')} + value={formik.values.userName} + autoCapitalize="none" /> - - {errors.userName} - - + + {formik.errors.userName} + + + + + + + + {i18n.t('AbpIdentity::DisplayName:Name')} + surnameRef.current._root.focus()} + onSubmitEditing={() => surnameRef.current.focus()} returnKeyType="next" - onChangeText={handleChange('name')} - onBlur={handleBlur('name')} - value={values.name} + onChangeText={formik.handleChange('name')} + onBlur={formik.handleBlur('name')} + value={formik.values.name} /> - - - + + + + + + + {i18n.t('AbpIdentity::DisplayName:Surname')} + emailRef.current._root.focus()} + onSubmitEditing={() => emailRef.current.focus()} returnKeyType="next" - onChangeText={handleChange('surname')} - onBlur={handleBlur('surname')} - value={values.surname} + onChangeText={formik.handleChange('surname')} + onBlur={formik.handleBlur('surname')} + value={formik.values.surname} /> - - - + + + + + + + {i18n.t('AbpIdentity::EmailAddress')} + phoneNumberRef.current._root.focus()} + onSubmitEditing={() => phoneNumberRef.current.focus()} returnKeyType="next" - onChangeText={handleChange('email')} - onBlur={handleBlur('email')} - value={values.email} - autoCapitalize = 'none' + onChangeText={formik.handleChange('email')} + onBlur={formik.handleBlur('email')} + value={formik.values.email} + autoCapitalize="none" /> - - {errors.email} - - + {formik.errors.email} + + + + + + + {i18n.t('AbpIdentity::PhoneNumber')} + passwordRef.current._root.focus()} + onSubmitEditing={() => passwordRef?.current?.focus()} returnKeyType={!editingUser.id ? 'next' : 'default'} - onChangeText={handleChange('phoneNumber')} - onBlur={handleBlur('phoneNumber')} - value={values.phoneNumber} - autoCapitalize = 'none' + onChangeText={formik.handleChange('phoneNumber')} + onBlur={formik.handleBlur('phoneNumber')} + value={formik.values.phoneNumber} /> - - {!editingUser.id ? ( - <> - - - - + + + + {!editingUser.id ? ( + + + + {i18n.t('AbpIdentity::Password')} + + setShowPassword(!showPassword)} /> - - - {errors.password} - - ) : null} - - setFieldValue('lockoutEnabled', !values.lockoutEnabled)} - /> - - setFieldValue('lockoutEnabled', !values.lockoutEnabled)}> - {i18n.t('AbpIdentity::DisplayName:LockoutEnabled')} - - - - - - - - - - - - )} - + } + /> + + {formik.errors.password} + + + + ) : null} + + + + + formik.setFieldValue('isActive', !formik.values.isActive) + } + > + {i18n.t('AbpIdentity::DisplayName:IsActive')} + + + + + + + + formik.setFieldValue( + 'lockoutEnabled', + !formik.values.lockoutEnabled + ) + } + > + {i18n.t('AbpIdentity::DisplayName:LockoutEnabled')} + + + + + ) : ( + + )} + + + + ); } @@ -225,10 +283,4 @@ CreateUpdateUserForm.propTypes = { remove: PropTypes.func.isRequired, }; -const styles = StyleSheet.create({ - container: { - marginBottom: 50, - }, -}); - export default CreateUpdateUserForm; diff --git a/templates/app/react-native/src/screens/CreateUpdateUser/UserRoles.js b/templates/app/react-native/src/screens/CreateUpdateUser/UserRoles.js index 052134c32c..25db76afee 100644 --- a/templates/app/react-native/src/screens/CreateUpdateUser/UserRoles.js +++ b/templates/app/react-native/src/screens/CreateUpdateUser/UserRoles.js @@ -1,7 +1,6 @@ -import React, { useEffect, useState } from 'react'; +import { Box, Checkbox, List } from 'native-base'; import PropTypes from 'prop-types'; -import { List, ListItem, CheckBox, Body, Text } from 'native-base'; -import { TouchableOpacity } from 'react-native'; +import React, { useEffect, useState } from 'react'; import { getAllRoles, getUserRoles } from '../../api/IdentityAPI'; function UserRoles({ editingUser = {}, onChangeRoles }) { @@ -37,18 +36,17 @@ function UserRoles({ editingUser = {}, onChangeRoles }) { }, [roles]); return ( - + + {roles.map((role, index) => ( - - onPress(index)} /> - - onPress(index)}> - {role.name} - - - + + onPress(index)} > + {role.name} + + ))} + ); } diff --git a/templates/app/react-native/src/screens/Home/HomeScreen.js b/templates/app/react-native/src/screens/Home/HomeScreen.js index 63140d9a8a..82ca221e2d 100644 --- a/templates/app/react-native/src/screens/Home/HomeScreen.js +++ b/templates/app/react-native/src/screens/Home/HomeScreen.js @@ -1,33 +1,29 @@ import i18n from 'i18n-js'; -import { Text } from 'native-base'; +import { Box, Center, Heading, Text } from 'native-base'; import React from 'react'; -import { StyleSheet, View } from 'react-native'; +import { StyleSheet } from 'react-native'; function HomeScreen() { return ( - - {i18n.t('::Welcome')} - {i18n.t('::LongWelcomeMessage')} - +
+ + {i18n.t('::Welcome')} + + {i18n.t('::LongWelcomeMessage')} + + +
); } const styles = StyleSheet.create({ - container: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - paddingHorizontal: 20, - backgroundColor: '#fff', - }, centeredText: { textAlign: 'center', - }, - title: { - marginBottom: 30, - fontSize: 32, - fontWeight: '300', - textAlign: 'center', + marginBottom: 5 }, }); diff --git a/templates/app/react-native/src/screens/Login/LoginScreen.js b/templates/app/react-native/src/screens/Login/LoginScreen.js index f43ef6a35b..acb72076fa 100644 --- a/templates/app/react-native/src/screens/Login/LoginScreen.js +++ b/templates/app/react-native/src/screens/Login/LoginScreen.js @@ -1,21 +1,17 @@ -import { Formik } from 'formik'; +import { useFormik } from 'formik'; import i18n from 'i18n-js'; import { + Box, Button, - Container, - Content, - Form, - Input, - InputGroup, - Item, - Label, - Text, - Icon, + Center, + FormControl, Image, Input, + Stack, + WarningOutlineIcon } from 'native-base'; import PropTypes from 'prop-types'; -import React, { useState, useRef } from 'react'; +import React, { useRef, useState } from 'react'; import { View } from 'react-native'; -import * as Yup from 'yup'; +import { object, string } from 'yup'; import { login } from '../../api/AccountAPI'; import TenantBox from '../../components/TenantBox/TenantBox'; import ValidationMessage from '../../components/ValidationMessage/ValidationMessage'; @@ -24,15 +20,14 @@ import LoadingActions from '../../store/actions/LoadingActions'; import PersistentStorageActions from '../../store/actions/PersistentStorageActions'; import { connectToRedux } from '../../utils/ReduxConnect'; -const ValidationSchema = Yup.object().shape({ - username: Yup.string().required('AbpAccount::ThisFieldIsRequired.'), - password: Yup.string().required('AbpAccount::ThisFieldIsRequired.'), +const ValidationSchema = object().shape({ + username: string().required('AbpAccount::ThisFieldIsRequired.'), + password: string().required('AbpAccount::ThisFieldIsRequired.'), }); function LoginScreen({ startLoading, stopLoading, setToken, fetchAppConfig }) { const [showTenantSelection, setShowTenantSelection] = useState(false); - const [showPassword, setShowPassword] = useState(false); - const passwordRef = useRef(null) + const passwordRef = useRef(null); const toggleTenantSelection = () => { setShowTenantSelection(!showTenantSelection); @@ -41,78 +36,103 @@ function LoginScreen({ startLoading, stopLoading, setToken, fetchAppConfig }) { const submit = ({ username, password }) => { startLoading({ key: 'login' }); login({ username, password }) - .then(data => + .then((data) => setToken({ ...data, expire_time: new Date().valueOf() + data.expires_in, scope: undefined, - }), + }) ) .then( () => - new Promise(resolve => - fetchAppConfig({ showLoading: false, callback: () => resolve(true) }), - ), + new Promise((resolve) => + fetchAppConfig({ + showLoading: false, + callback: () => resolve(true), + }) + ) ) .finally(() => stopLoading({ key: 'login' })); }; + const formik = useFormik({ + validationSchema: ValidationSchema, + initialValues: { username: '', password: '' }, + onSubmit: submit, + }); + return ( - +
+ + Image + + - {!showTenantSelection ? ( - - - {({ handleChange, handleBlur, handleSubmit, values, errors }) => ( -
- - - passwordRef.current._root.focus()} - returnKeyType="next" - autoCapitalize = 'none' - /> - - {errors.username} - - - - - setShowPassword(!showPassword)} - /> - - - {errors.password} - - - -
- )} - - - ) : null} - + + + + + {i18n.t('AbpAccount::UserNameOrEmailAddress')} + + passwordRef?.current?.focus()} + size="lg" + /> + {formik.errors.username} + + + + + + + {i18n.t('AbpAccount::Password')} + + + } + > + {formik.errors.password} + + + + + + + + +
); } diff --git a/templates/app/react-native/src/screens/ManageProfile/ManageProfileForm.js b/templates/app/react-native/src/screens/ManageProfile/ManageProfileForm.js index 9135df2ade..4254acc93f 100644 --- a/templates/app/react-native/src/screens/ManageProfile/ManageProfileForm.js +++ b/templates/app/react-native/src/screens/ManageProfile/ManageProfileForm.js @@ -1,6 +1,12 @@ -import { Formik } from 'formik'; +import { useFormik } from 'formik'; import i18n from 'i18n-js'; -import { Container, Content, Form, Input, InputGroup, Label } from 'native-base'; +import { + Box, + FormControl, + Input, + KeyboardAvoidingView, + Stack, +} from 'native-base'; import PropTypes from 'prop-types'; import React, { useRef } from 'react'; import * as Yup from 'yup'; @@ -21,95 +27,120 @@ function ManageProfileForm({ editingUser = {}, submit, cancel }) { const emailRef = useRef(); const phoneNumberRef = useRef(); - const onSubmit = values => { + const onSubmit = (values) => { submit({ ...editingUser, ...values, }); }; + const formik = useFormik({ + enableReinitialize: true, + validationSchema: ValidationSchema, + initialValues: { + ...editingUser, + }, + onSubmit, + }); + return ( - onSubmit(values)}> - {({ handleChange, handleBlur, handleSubmit, values, errors, isValid }) => ( - <> - - -
- - - nameRef.current._root.focus()} - returnKeyType="next" - onChangeText={handleChange('userName')} - onBlur={handleBlur('userName')} - value={values.userName} - abpInput - /> - - {errors.userName} - - - surnameRef.current._root.focus()} - returnKeyType="next" - onChangeText={handleChange('name')} - onBlur={handleBlur('name')} - value={values.name} - /> - - - - phoneNumberRef.current._root.focus()} - returnKeyType="next" - onChangeText={handleChange('surname')} - onBlur={handleBlur('surname')} - value={values.surname} - /> - - - - emailRef.current._root.focus()} - returnKeyType="next" - onChangeText={handleChange('phoneNumber')} - onBlur={handleBlur('phoneNumber')} - value={values.phoneNumber} - /> - - - - - - {errors.email} -
- - - - - )} - + <> + + + + + + {i18n.t('AbpIdentity::UserName')} + + nameRef?.current?.focus()} + returnKeyType="next" + onChangeText={formik.handleChange('userName')} + onBlur={formik.handleBlur('userName')} + value={formik.values.userName} + /> + {formik.errors.userName} + + + + + + + {i18n.t('AbpIdentity::DisplayName:Name')} + + surnameRef?.current?.focus()} + returnKeyType="next" + onChangeText={formik.handleChange('name')} + onBlur={formik.handleBlur('name')} + value={formik.values.name} + /> + + + + + + + {i18n.t('AbpIdentity::DisplayName:Surname')} + + phoneNumberRef?.current?.focus()} + returnKeyType="next" + onChangeText={formik.handleChange('surname')} + onBlur={formik.handleBlur('surname')} + value={formik.values.surname} + /> + + + + + + + {i18n.t('AbpIdentity::PhoneNumber')} + + emailRef?.current?.focus()} + returnKeyType="next" + onChangeText={formik.handleChange('phoneNumber')} + onBlur={formik.handleBlur('phoneNumber')} + value={formik.values.phoneNumber} + /> + + + + + + + {i18n.t('AbpIdentity::PhoneNumber')} + + + {formik.errors.email} + + + + + + ); } diff --git a/templates/app/react-native/src/screens/Settings/SettingsScreen.js b/templates/app/react-native/src/screens/Settings/SettingsScreen.js index 80fc93e0b4..cc8fb4aa9f 100644 --- a/templates/app/react-native/src/screens/Settings/SettingsScreen.js +++ b/templates/app/react-native/src/screens/Settings/SettingsScreen.js @@ -1,29 +1,17 @@ +import { Ionicons } from '@expo/vector-icons'; +import { useFocusEffect } from '@react-navigation/native'; import i18n from 'i18n-js'; -import { - Body, - Button, - Icon, - Label, - Left, - List, - ListItem, - Picker, - Right, - Text, - Thumbnail, -} from 'native-base'; +import { Avatar, Button, Divider, FormControl, List, Select, Stack, Text, View } from 'native-base'; import PropTypes from 'prop-types'; import React, { useCallback, useState } from 'react'; -import { View } from 'react-native'; -import { useFocusEffect } from '@react-navigation/native'; import { getProfileDetail } from '../../api/IdentityAPI'; import AppActions from '../../store/actions/AppActions'; import { createLanguageSelector, - createLanguagesSelector, + createLanguagesSelector } from '../../store/selectors/AppSelectors'; -import { connectToRedux } from '../../utils/ReduxConnect'; import { createTenantSelector } from '../../store/selectors/PersistentStorageSelectors'; +import { connectToRedux } from '../../utils/ReduxConnect'; function SettingsScreen({ navigation, @@ -49,74 +37,72 @@ function SettingsScreen({ return ( - - - + navigation.navigate('ManageProfile')}> - - - - - {tenant.name ? `${tenant.name} / ` : ''} + + + + + {tenant.name ? `${tenant.name}/` : ''} {user.userName ? `${user.userName}` : ''} - {user.email} - - + - - - - - - + + + + navigation.navigate('ChangePassword')}> - - {i18n.t('AbpUi::ChangePassword')} - - - - - - - - - - - - } - onValueChange={value => setLanguageAsync(value)} - selectedValue={language.cultureName} - textStyle={{ paddingLeft: 0 }}> - {languages.map(lang => ( - - ))} - - - - + + {i18n.t('AbpUi::ChangePassword')} + + + + + + + + + {i18n.t('AbpUi::Language')} + + + + + diff --git a/templates/app/react-native/src/screens/Tenants/TenantsScreen.js b/templates/app/react-native/src/screens/Tenants/TenantsScreen.js index e937175dfa..da3dac53af 100644 --- a/templates/app/react-native/src/screens/Tenants/TenantsScreen.js +++ b/templates/app/react-native/src/screens/Tenants/TenantsScreen.js @@ -1,38 +1,44 @@ +import { Box, HStack, Pressable, Text } from 'native-base'; import React from 'react'; -import i18n from 'i18n-js'; -import { ListItem, Text, Icon, Left, Body, Fab } from 'native-base'; -import { StyleSheet } from 'react-native'; import { getTenants } from '../../api/TenantManagementAPI'; -import { activeTheme } from '../../theme/variables'; import DataList from '../../components/DataList/DataList'; -import { withPermission } from '../../hocs/PermissionHOC'; - -const CreateTenantButtonWithPermission = withPermission(Fab, 'AbpTenantManagement.Tenants.Create'); +import { LocalizationContext } from '../../contexts/LocalizationContext'; function TenantsScreen({ navigation }) { + const { t } = React.useContext(LocalizationContext); + return ( - <> + ( - navigateToCreateUpdateTenantScreen(navigation, tenant)}> - - - {tenant.name} - - - + render={({ item }) => ( + navigateToCreateUpdateTenantScreen(navigation, item)} + > + + + {t('AbpTenantManagement::TenantName')}: + + {item.name} + + + + )} /> - - navigation.navigate('CreateUpdateTenant')}> - - - + ); } @@ -42,18 +48,4 @@ const navigateToCreateUpdateTenantScreen = (navigation, tenant = {}) => { }); }; -const styles = StyleSheet.create({ - listItem: { - alignItems: 'center', - marginVertical: 3, - marginLeft: -15, - paddingTop: 5, - paddingBottom: 5, - paddingLeft: 15, - backgroundColor: '#f9f9f9', - width: '110%', - minHeight: 50, - }, -}); - export default TenantsScreen; diff --git a/templates/app/react-native/src/screens/Users/UsersScreen.js b/templates/app/react-native/src/screens/Users/UsersScreen.js index 4dc25dc646..b49658cb24 100644 --- a/templates/app/react-native/src/screens/Users/UsersScreen.js +++ b/templates/app/react-native/src/screens/Users/UsersScreen.js @@ -1,40 +1,55 @@ +import { Box, HStack, Pressable, Text } from 'native-base'; import React from 'react'; -import { ListItem, Text, Icon, Left, Thumbnail, Body, Fab } from 'native-base'; -import { StyleSheet } from 'react-native'; import { getUsers } from '../../api/IdentityAPI'; -import { activeTheme } from '../../theme/variables'; import DataList from '../../components/DataList/DataList'; -import { withPermission } from '../../hocs/PermissionHOC'; - -const CreateUserButtonWithPermission = withPermission(Fab, 'AbpIdentity.Users.Create'); +import { LocalizationContext } from '../../contexts/LocalizationContext'; function UsersScreen({ navigation }) { + const { t } = React.useContext(LocalizationContext); + return ( - <> ( - navigateToCreateUpdateUserScreen(navigation, user)}> - - - - {user.userName} - {user.email} - - - + render={({item}) => ( + navigateToCreateUpdateUserScreen(navigation, item)} + > + + + {t('AbpIdentity::UserName')}: + + {item.userName} + + + + {t('AbpIdentity::EmailAddress')}: + + {item.email} + + + + {t('AbpIdentity::DisplayName:Name')}: + + {item.name} + + + + {t('AbpIdentity::DisplayName:Surname')}: + + {item.surname} + + + + )} /> - - navigation.navigate('CreateUpdateUser')}> - - - ); } @@ -44,18 +59,4 @@ const navigateToCreateUpdateUserScreen = (navigation, user = {}) => { }); }; -const styles = StyleSheet.create({ - container: { flex: 1 }, - listItem: { - alignItems: 'center', - marginVertical: 3, - marginLeft: -15, - paddingTop: 5, - paddingBottom: 5, - paddingLeft: 15, - backgroundColor: '#f9f9f9', - width: '110%', - }, -}); - export default UsersScreen; diff --git a/templates/app/react-native/src/store/index.js b/templates/app/react-native/src/store/index.js index b038d82cf4..d30a0890dd 100644 --- a/templates/app/react-native/src/store/index.js +++ b/templates/app/react-native/src/store/index.js @@ -1,9 +1,9 @@ +import AsyncStorage from '@react-native-async-storage/async-storage'; import { configureStore } from '@reduxjs/toolkit'; +import { persistReducer, persistStore } from 'redux-persist'; import createSagaMiddleware from 'redux-saga'; -import { persistStore, persistReducer } from 'redux-persist'; -import { rootSaga } from './sagas'; import rootReducer from './reducers'; -import AsyncStorage from '@react-native-async-storage/async-storage'; +import { rootSaga } from './sagas'; const sagaMiddleware = createSagaMiddleware(); diff --git a/templates/app/react-native/src/store/reducers/index.js b/templates/app/react-native/src/store/reducers/index.js index 8784be3042..0479999c14 100644 --- a/templates/app/react-native/src/store/reducers/index.js +++ b/templates/app/react-native/src/store/reducers/index.js @@ -1,6 +1,6 @@ import { combineReducers } from '@reduxjs/toolkit'; -import LoadingReducer from './LoadingReducer'; import AppReducer from './AppReducer'; +import LoadingReducer from './LoadingReducer'; import PersistentStorageReducer from './PersistentStorageReducer'; const rootReducer = combineReducers({ diff --git a/templates/app/react-native/src/store/sagas/AppSaga.js b/templates/app/react-native/src/store/sagas/AppSaga.js index 8a1d3211df..8fc0145309 100644 --- a/templates/app/react-native/src/store/sagas/AppSaga.js +++ b/templates/app/react-native/src/store/sagas/AppSaga.js @@ -1,6 +1,6 @@ -import { call, put, takeLatest, all } from 'redux-saga/effects'; +import { all, call, put, takeLatest } from 'redux-saga/effects'; +import { Logout } from '../../api/AccountAPI'; import { getApplicationConfiguration } from '../../api/ApplicationConfigurationAPI'; -import { logout as logoutAsync } from '../../api/AccountAPI'; import AppActions from '../actions/AppActions'; import LoadingActions from '../actions/LoadingActions'; import PersistentStorageActions from '../actions/PersistentStorageActions'; @@ -20,7 +20,7 @@ function* setLanguage(action) { } function* logout() { - yield call(logoutAsync); + yield call(Logout); yield put(PersistentStorageActions.setToken({})); yield put(AppActions.fetchAppConfigAsync()); } diff --git a/templates/app/react-native/src/theme/components/Badge.js b/templates/app/react-native/src/theme/components/Badge.js deleted file mode 100644 index 7db8c886ec..0000000000 --- a/templates/app/react-native/src/theme/components/Badge.js +++ /dev/null @@ -1,39 +0,0 @@ -// @flow - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -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: variables.platform === PLATFORM.IOS ? 'center' : undefined, - borderRadius: 13.5, - height: 27, - }; - return badgeTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Body.js b/templates/app/react-native/src/theme/components/Body.js deleted file mode 100644 index 9bf2b99268..0000000000 --- a/templates/app/react-native/src/theme/components/Body.js +++ /dev/null @@ -1,11 +0,0 @@ -// @flow - -export default () => { - const bodyTheme = { - flex: 1, - alignItems: 'center', - alignSelf: 'center', - }; - - return bodyTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Button.js b/templates/app/react-native/src/theme/components/Button.js deleted file mode 100644 index e1f106b18b..0000000000 --- a/templates/app/react-native/src/theme/components/Button.js +++ /dev/null @@ -1,384 +0,0 @@ -// @flow - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -export default (variables /* : * */ = variable) => { - const { platformStyle } = variables; - const { platform } = variables; - 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 === PLATFORM.IOS ? 2 : undefined, - }, - 'NativeBase.IconNB': { - color: variables.inverseTextColor, - fontSize: 24, - marginHorizontal: 16, - paddingTop: platform === PLATFORM.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, - shadowColor: platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined, - shadowOffset: platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, - shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, - shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, - alignItems: 'center', - justifyContent: 'space-between', - }; - return buttonTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Card.js b/templates/app/react-native/src/theme/components/Card.js deleted file mode 100644 index c8e726336f..0000000000 --- a/templates/app/react-native/src/theme/components/Card.js +++ /dev/null @@ -1,37 +0,0 @@ -// @flow - -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/templates/app/react-native/src/theme/components/CardItem.js b/templates/app/react-native/src/theme/components/CardItem.js deleted file mode 100644 index 745714bb03..0000000000 --- a/templates/app/react-native/src/theme/components/CardItem.js +++ /dev/null @@ -1,198 +0,0 @@ -// @flow - -import { StyleSheet } from 'react-native'; - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -export default (variables /* : * */ = variable) => { - const { platform } = variables; - 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 === PLATFORM.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 === PLATFORM.IOS ? '600' : '500', - }, - '.bordered': { - 'NativeBase.Text': { - color: variables.brandPrimary, - fontWeight: platform === PLATFORM.IOS ? '600' : '500', - }, - borderBottomWidth: variables.borderWidth, - }, - borderBottomWidth: null, - paddingVertical: variables.cardItemPadding + 5, - }, - '.footer': { - 'NativeBase.Text': { - fontSize: 16, - fontWeight: platform === PLATFORM.IOS ? '600' : '500', - }, - '.bordered': { - 'NativeBase.Text': { - color: variables.brandPrimary, - fontWeight: platform === PLATFORM.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/templates/app/react-native/src/theme/components/CheckBox.js b/templates/app/react-native/src/theme/components/CheckBox.js deleted file mode 100644 index ac280de985..0000000000 --- a/templates/app/react-native/src/theme/components/CheckBox.js +++ /dev/null @@ -1,38 +0,0 @@ -// @flow - -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, - }, - borderRadius: variables.CheckboxRadius, - 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/templates/app/react-native/src/theme/components/Container.js b/templates/app/react-native/src/theme/components/Container.js deleted file mode 100644 index f2f57afa41..0000000000 --- a/templates/app/react-native/src/theme/components/Container.js +++ /dev/null @@ -1,17 +0,0 @@ -// @flow - -import { Platform, Dimensions } from 'react-native'; - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -const deviceHeight = Dimensions.get('window').height; -export default (variables /* : * */ = variable) => { - const theme = { - flex: 1, - height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20, - backgroundColor: variables.containerBgColor, - }; - - return theme; -}; diff --git a/templates/app/react-native/src/theme/components/Content.js b/templates/app/react-native/src/theme/components/Content.js deleted file mode 100644 index e09a22a8a5..0000000000 --- a/templates/app/react-native/src/theme/components/Content.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const contentTheme = { - flex: 1, - backgroundColor: 'transparent', - 'NativeBase.Segment': { - borderWidth: 0, - backgroundColor: 'transparent', - }, - }; - - return contentTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Fab.js b/templates/app/react-native/src/theme/components/Fab.js deleted file mode 100644 index 87520a690b..0000000000 --- a/templates/app/react-native/src/theme/components/Fab.js +++ /dev/null @@ -1,25 +0,0 @@ -// @flow - -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/templates/app/react-native/src/theme/components/Footer.js b/templates/app/react-native/src/theme/components/Footer.js deleted file mode 100644 index 49101fc0d9..0000000000 --- a/templates/app/react-native/src/theme/components/Footer.js +++ /dev/null @@ -1,117 +0,0 @@ -// @flow - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -export default (variables /* : * */ = variable) => { - const { platformStyle } = variables; - const { platform } = variables; - - 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 === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? variables.borderWidth - : undefined, - borderColor: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? '#cbcbcb' : undefined, - height: variables.footerHeight, - paddingBottom: variables.footerPaddingBottom, - elevation: 3, - left: 0, - right: 0, - }; - return footerTheme; -}; diff --git a/templates/app/react-native/src/theme/components/FooterTab.js b/templates/app/react-native/src/theme/components/FooterTab.js deleted file mode 100644 index 39e50fa891..0000000000 --- a/templates/app/react-native/src/theme/components/FooterTab.js +++ /dev/null @@ -1,78 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -export default (variables /* : * */ = variable) => { - const { platform } = variables; - - 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 === PLATFORM.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 === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined, - flexDirection: 'row', - justifyContent: 'space-between', - flex: 1, - alignSelf: 'stretch', - }; - - return footerTabTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Form.js b/templates/app/react-native/src/theme/components/Form.js deleted file mode 100644 index 48a638fff4..0000000000 --- a/templates/app/react-native/src/theme/components/Form.js +++ /dev/null @@ -1,86 +0,0 @@ -// @flow - -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/templates/app/react-native/src/theme/components/H1.js b/templates/app/react-native/src/theme/components/H1.js deleted file mode 100644 index 0f45abc872..0000000000 --- a/templates/app/react-native/src/theme/components/H1.js +++ /dev/null @@ -1,13 +0,0 @@ -// @flow - -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/templates/app/react-native/src/theme/components/H2.js b/templates/app/react-native/src/theme/components/H2.js deleted file mode 100644 index 4763fdf92d..0000000000 --- a/templates/app/react-native/src/theme/components/H2.js +++ /dev/null @@ -1,13 +0,0 @@ -// @flow - -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/templates/app/react-native/src/theme/components/H3.js b/templates/app/react-native/src/theme/components/H3.js deleted file mode 100644 index 0765853f15..0000000000 --- a/templates/app/react-native/src/theme/components/H3.js +++ /dev/null @@ -1,13 +0,0 @@ -// @flow - -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/templates/app/react-native/src/theme/components/Header.js b/templates/app/react-native/src/theme/components/Header.js deleted file mode 100644 index ebb9f5b331..0000000000 --- a/templates/app/react-native/src/theme/components/Header.js +++ /dev/null @@ -1,389 +0,0 @@ -// @flow - -import { PixelRatio, StatusBar } from 'react-native'; - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -export default (variables /* : * */ = variable) => { - const { platformStyle } = variables; - const { platform } = variables; - - 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 === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined, - height: - platform === PLATFORM.ANDROID - ? variables.toolbarHeight + StatusBar.currentHeight - : 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 === PLATFORM.IOS ? undefined : 0, - flex: platform === PLATFORM.IOS ? 1 : 0, - }, - 'NativeBase.Body': { - 'NativeBase.Title': { - paddingLeft: platform === PLATFORM.IOS ? undefined : 10, - }, - 'NativeBase.Subtitle': { - paddingLeft: platform === PLATFORM.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 === PLATFORM.IOS ? 10 : null, - }, - paddingHorizontal: platform === PLATFORM.IOS ? undefined : null, - width: platform === PLATFORM.IOS ? undefined : 0, - height: platform === PLATFORM.IOS ? undefined : 0, - }, - }, - '.rounded': { - 'NativeBase.Item': { - borderRadius: platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? 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 === PLATFORM.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 === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? -3 : 0, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor, - fontSize: - platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL - ? variables.iconHeaderSize + 1 - : variables.iconHeaderSize, - marginTop: 0, - marginRight: 2, - marginLeft: 1, - paddingTop: 1, - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor, - fontSize: - platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL - ? variables.iconHeaderSize + 1 - : variables.iconHeaderSize - 2, - marginTop: 0, - marginRight: 2, - marginLeft: 1, - paddingTop: 1, - }, - 'NativeBase.Text': { - color: variables.toolbarBtnTextColor, - fontSize: platform === PLATFORM.IOS ? 17 : 0, - top: platform === PLATFORM.IOS ? 1 : -1.5, - paddingLeft: platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? 2 : 5, - paddingRight: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? 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 === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? 4 : 8, - }, - flex: platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? 1 : 0.4, - alignSelf: 'center', - alignItems: 'flex-start', - }, - 'NativeBase.Body': { - flex: 1, - alignItems: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL ? 'center' : 'flex-start', - alignSelf: 'center', - 'NativeBase.Segment': { - borderWidth: 0, - alignSelf: 'flex-end', - marginRight: platform === PLATFORM.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 === PLATFORM.IOS ? 17 : 14, - lineHeight: 19.5, - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor, - fontSize: variables.iconHeaderSize - 2, - marginTop: 2, - marginRight: 2, - marginLeft: 5, - }, - }, - '.transparent': { - marginRight: platform === PLATFORM.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 === PLATFORM.IOS ? 17 : 14, - top: platform === PLATFORM.IOS ? 1 : -1.5, - paddingRight: - platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL - ? 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 === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL ? 6 : 10, - paddingRight: 10, - justifyContent: 'center', - paddingTop: platform === PLATFORM.IOS ? 18 : 0, - borderBottomWidth: platform === PLATFORM.IOS ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0, - borderBottomColor: variables.toolbarDefaultBorder, - height: - variables.platform === PLATFORM.IOS && variables.platformStyle === PLATFORM.MATERIAL - ? variables.toolbarHeight + 10 - : variables.toolbarHeight, - elevation: 3, - shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined, - shadowOffset: platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, - shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, - shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, - top: 0, - left: 0, - right: 0, - }; - - return headerTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Icon.js b/templates/app/react-native/src/theme/components/Icon.js deleted file mode 100644 index d233562deb..0000000000 --- a/templates/app/react-native/src/theme/components/Icon.js +++ /dev/null @@ -1,12 +0,0 @@ -// @flow - -import variable from '../variables/Platform'; - -export default (variables /* : * */ = variable) => { - const iconTheme = { - fontSize: variables.iconFontSize, - color: variable.textColor, - }; - - return iconTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Input.js b/templates/app/react-native/src/theme/components/Input.js deleted file mode 100644 index bc5b5b7da2..0000000000 --- a/templates/app/react-native/src/theme/components/Input.js +++ /dev/null @@ -1,19 +0,0 @@ -// @flow - -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/templates/app/react-native/src/theme/components/InputGroup.js b/templates/app/react-native/src/theme/components/InputGroup.js deleted file mode 100644 index 9638ad20b2..0000000000 --- a/templates/app/react-native/src/theme/components/InputGroup.js +++ /dev/null @@ -1,132 +0,0 @@ -// @flow - -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/templates/app/react-native/src/theme/components/Item.js b/templates/app/react-native/src/theme/components/Item.js deleted file mode 100644 index 997504a084..0000000000 --- a/templates/app/react-native/src/theme/components/Item.js +++ /dev/null @@ -1,241 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -export default (variables /* : * */ = variable) => { - const itemTheme = { - '.floatingLabel': { - 'NativeBase.Input': { - height: 50, - top: 8, - paddingTop: 3, - paddingBottom: 7, - '.multiline': { - minHeight: variables.inputHeightBase, - paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3, - paddingBottom: Platform.OS === PLATFORM.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', - 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 === PLATFORM.IOS ? 9 : undefined, - paddingBottom: Platform.OS === PLATFORM.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 === PLATFORM.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/templates/app/react-native/src/theme/components/Label.js b/templates/app/react-native/src/theme/components/Label.js deleted file mode 100644 index cbefe9d449..0000000000 --- a/templates/app/react-native/src/theme/components/Label.js +++ /dev/null @@ -1,15 +0,0 @@ -// @flow - -export default () => { - const labelTheme = { - '.focused': { - width: 0, - }, - '.textPrimary': { - color: 'gray', - }, - fontSize: 17, - }; - - return labelTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Left.js b/templates/app/react-native/src/theme/components/Left.js deleted file mode 100644 index 5a1b8b09b6..0000000000 --- a/templates/app/react-native/src/theme/components/Left.js +++ /dev/null @@ -1,11 +0,0 @@ -// @flow - -export default () => { - const leftTheme = { - flex: 1, - alignSelf: 'center', - alignItems: 'flex-start', - }; - - return leftTheme; -}; diff --git a/templates/app/react-native/src/theme/components/ListItem.js b/templates/app/react-native/src/theme/components/ListItem.js deleted file mode 100644 index ab1e38002a..0000000000 --- a/templates/app/react-native/src/theme/components/ListItem.js +++ /dev/null @@ -1,441 +0,0 @@ -// @flow - -import { Platform, PixelRatio } from 'react-native'; - -import pickerTheme from './Picker'; -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -export default (variables /* : * */ = variable) => { - const { platform } = variables; - 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 === PLATFORM.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 === PLATFORM.IOS ? 30 : 40, - borderColor: 'transparent', - backgroundColor: '#fff', - borderRadius: 5, - }, - 'NativeBase.Button': { - '.transparent': { - 'NativeBase.Text': { - fontWeight: '500', - }, - paddingHorizontal: null, - paddingLeft: platform === PLATFORM.IOS ? 10 : null, - }, - paddingHorizontal: platform === PLATFORM.IOS ? undefined : null, - width: platform === PLATFORM.IOS ? undefined : 0, - height: platform === PLATFORM.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 === PLATFORM.IOS ? variables.borderWidth : null, - marginLeft: null, - padding: variables.listItemPadding, - paddingLeft: variables.listItemPadding + 5, - paddingTop: platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined, - paddingBottom: platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined, - flexDirection: 'row', - borderColor: variables.listBorderColor, - 'NativeBase.Text': { - fontSize: 14, - color: platform === PLATFORM.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 === PLATFORM.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/templates/app/react-native/src/theme/components/Picker.android.js b/templates/app/react-native/src/theme/components/Picker.android.js deleted file mode 100644 index 0b499a6537..0000000000 --- a/templates/app/react-native/src/theme/components/Picker.android.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const pickerTheme = { - '.note': { - color: '#8F8E95', - }, - // width: 90, - marginRight: -4, - flexGrow: 1, - }; - - return pickerTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Picker.ios.js b/templates/app/react-native/src/theme/components/Picker.ios.js deleted file mode 100644 index b81b0568e2..0000000000 --- a/templates/app/react-native/src/theme/components/Picker.ios.js +++ /dev/null @@ -1,7 +0,0 @@ -// @flow - -export default () => { - const pickerTheme = {}; - - return pickerTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Picker.js b/templates/app/react-native/src/theme/components/Picker.js deleted file mode 100644 index 0b499a6537..0000000000 --- a/templates/app/react-native/src/theme/components/Picker.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const pickerTheme = { - '.note': { - color: '#8F8E95', - }, - // width: 90, - marginRight: -4, - flexGrow: 1, - }; - - return pickerTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Radio.js b/templates/app/react-native/src/theme/components/Radio.js deleted file mode 100644 index a50e70deb7..0000000000 --- a/templates/app/react-native/src/theme/components/Radio.js +++ /dev/null @@ -1,26 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -export default (variables /* : * */ = variable) => { - const radioTheme = { - '.selected': { - 'NativeBase.IconNB': { - color: - Platform.OS === PLATFORM.IOS ? variables.radioColor : variables.radioSelectedColorAndroid, - lineHeight: Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight, - height: Platform.OS === PLATFORM.IOS ? 20 : undefined, - }, - }, - 'NativeBase.IconNB': { - color: Platform.OS === PLATFORM.IOS ? 'transparent' : undefined, - lineHeight: Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnLineHeight, - fontSize: Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnSize, - }, - }; - - return radioTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Right.js b/templates/app/react-native/src/theme/components/Right.js deleted file mode 100644 index 25b4c604f3..0000000000 --- a/templates/app/react-native/src/theme/components/Right.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const rightTheme = { - 'NativeBase.Button': { - alignSelf: null, - }, - flex: 1, - alignSelf: 'center', - alignItems: 'flex-end', - }; - - return rightTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Segment.js b/templates/app/react-native/src/theme/components/Segment.js deleted file mode 100644 index b78c0f391d..0000000000 --- a/templates/app/react-native/src/theme/components/Segment.js +++ /dev/null @@ -1,57 +0,0 @@ -// @flow - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -export default (variables /* : * */ = variable) => { - const { platform } = variables; - - 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 === PLATFORM.IOS ? 5 : undefined, - borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined, - borderLeftWidth: 1, - }, - '.last': { - borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined, - borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined, - }, - 'NativeBase.Text': { - color: variables.segmentTextColor, - fontSize: 14, - }, - 'NativeBase.Icon': { - fontSize: 22, - paddingTop: 0, - color: variables.segmentTextColor, - }, - }, - }; - - return segmentTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Separator.js b/templates/app/react-native/src/theme/components/Separator.js deleted file mode 100644 index 8892181faf..0000000000 --- a/templates/app/react-native/src/theme/components/Separator.js +++ /dev/null @@ -1,49 +0,0 @@ -// @flow - -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/templates/app/react-native/src/theme/components/Spinner.js b/templates/app/react-native/src/theme/components/Spinner.js deleted file mode 100644 index f52a4d0aef..0000000000 --- a/templates/app/react-native/src/theme/components/Spinner.js +++ /dev/null @@ -1,9 +0,0 @@ -// @flow - -export default () => { - const spinnerTheme = { - height: 80, - }; - - return spinnerTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Subtitle.js b/templates/app/react-native/src/theme/components/Subtitle.js deleted file mode 100644 index 9d6ec5022c..0000000000 --- a/templates/app/react-native/src/theme/components/Subtitle.js +++ /dev/null @@ -1,19 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -export default (variables /* : * */ = variable) => { - const subtitleTheme = { - fontSize: variables.subTitleFontSize, - fontFamily: variables.titleFontfamily, - color: variables.subtitleColor, - textAlign: 'center', - paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0, - marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3, - }; - - return subtitleTheme; -}; diff --git a/templates/app/react-native/src/theme/components/SwipeRow.js b/templates/app/react-native/src/theme/components/SwipeRow.js deleted file mode 100644 index 16de874ecf..0000000000 --- a/templates/app/react-native/src/theme/components/SwipeRow.js +++ /dev/null @@ -1,46 +0,0 @@ -// @flow - -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/templates/app/react-native/src/theme/components/Switch.js b/templates/app/react-native/src/theme/components/Switch.js deleted file mode 100644 index d4edad8cc7..0000000000 --- a/templates/app/react-native/src/theme/components/Switch.js +++ /dev/null @@ -1,9 +0,0 @@ -// @flow - -export default () => { - const switchTheme = { - marginVertical: -5, - }; - - return switchTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Tab.js b/templates/app/react-native/src/theme/components/Tab.js deleted file mode 100644 index 0498253251..0000000000 --- a/templates/app/react-native/src/theme/components/Tab.js +++ /dev/null @@ -1,10 +0,0 @@ -// @flow - -export default () => { - const tabTheme = { - flex: 1, - backgroundColor: '#FFF', - }; - - return tabTheme; -}; diff --git a/templates/app/react-native/src/theme/components/TabBar.js b/templates/app/react-native/src/theme/components/TabBar.js deleted file mode 100644 index 0c2b51da4f..0000000000 --- a/templates/app/react-native/src/theme/components/TabBar.js +++ /dev/null @@ -1,57 +0,0 @@ -// @flow - -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/templates/app/react-native/src/theme/components/TabContainer.js b/templates/app/react-native/src/theme/components/TabContainer.js deleted file mode 100644 index 1b42d58a0e..0000000000 --- a/templates/app/react-native/src/theme/components/TabContainer.js +++ /dev/null @@ -1,25 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -export default (variables /* : * */ = variable) => { - const { platformStyle } = variables; - - const tabContainerTheme = { - elevation: 3, - height: 50, - flexDirection: 'row', - shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined, - shadowOffset: platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, - shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, - shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, - justifyContent: 'space-around', - borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0, - borderColor: variables.topTabBarBorderColor, - }; - - return tabContainerTheme; -}; diff --git a/templates/app/react-native/src/theme/components/TabHeading.js b/templates/app/react-native/src/theme/components/TabHeading.js deleted file mode 100644 index 37bb15350a..0000000000 --- a/templates/app/react-native/src/theme/components/TabHeading.js +++ /dev/null @@ -1,40 +0,0 @@ -// @flow - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -export default (variables /* : * */ = variable) => { - const { platform } = variables; - - const tabHeadingTheme = { - flexDirection: 'row', - backgroundColor: variables.tabDefaultBg, - flex: 1, - alignItems: 'center', - justifyContent: 'center', - '.scrollable': { - paddingHorizontal: 20, - flex: platform === PLATFORM.ANDROID ? 0 : 1, - minWidth: platform === PLATFORM.ANDROID ? undefined : 60, - }, - 'NativeBase.Text': { - color: variables.topTabBarTextColor, - marginHorizontal: 7, - }, - 'NativeBase.Icon': { - color: variables.topTabBarTextColor, - fontSize: platform === PLATFORM.IOS ? 26 : undefined, - }, - '.active': { - 'NativeBase.Text': { - color: variables.topTabBarActiveTextColor, - fontWeight: '600', - }, - 'NativeBase.Icon': { - color: variables.topTabBarActiveTextColor, - }, - }, - }; - - return tabHeadingTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Text.js b/templates/app/react-native/src/theme/components/Text.js deleted file mode 100644 index 2e6bea0e06..0000000000 --- a/templates/app/react-native/src/theme/components/Text.js +++ /dev/null @@ -1,20 +0,0 @@ -// @flow - -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, - }, - '.textPrimary': { - color: '#333', - }, - }; - - return textTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Textarea.js b/templates/app/react-native/src/theme/components/Textarea.js deleted file mode 100644 index 8022d3093b..0000000000 --- a/templates/app/react-native/src/theme/components/Textarea.js +++ /dev/null @@ -1,25 +0,0 @@ -// @flow - -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/templates/app/react-native/src/theme/components/Thumbnail.js b/templates/app/react-native/src/theme/components/Thumbnail.js deleted file mode 100644 index b3152fdcbb..0000000000 --- a/templates/app/react-native/src/theme/components/Thumbnail.js +++ /dev/null @@ -1,40 +0,0 @@ -// @flow - -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/templates/app/react-native/src/theme/components/Title.js b/templates/app/react-native/src/theme/components/Title.js deleted file mode 100644 index 02d28aafaa..0000000000 --- a/templates/app/react-native/src/theme/components/Title.js +++ /dev/null @@ -1,21 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -export default (variables /* : * */ = variable) => { - const titleTheme = { - fontSize: variables.titleFontSize, - fontFamily: variables.titleFontfamily, - color: variables.titleFontColor, - fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined, - textAlign: 'center', - paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0, - marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3, - paddingTop: 1, - }; - - return titleTheme; -}; diff --git a/templates/app/react-native/src/theme/components/Toast.js b/templates/app/react-native/src/theme/components/Toast.js deleted file mode 100644 index 6246a049f0..0000000000 --- a/templates/app/react-native/src/theme/components/Toast.js +++ /dev/null @@ -1,41 +0,0 @@ -// @flow - -import variable from '../variables/Platform'; -import { PLATFORM } from '../variables/CommonColor'; - -export default (variables /* : * */ = variable) => { - const { platform } = variables; - - const toastTheme = { - '.danger': { - backgroundColor: variables.brandDanger, - }, - '.warning': { - backgroundColor: variables.brandWarning, - }, - '.success': { - backgroundColor: variables.brandSuccess, - }, - backgroundColor: 'rgba(0,0,0,0.8)', - borderRadius: platform === PLATFORM.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/templates/app/react-native/src/theme/components/View.js b/templates/app/react-native/src/theme/components/View.js deleted file mode 100644 index a01a86939e..0000000000 --- a/templates/app/react-native/src/theme/components/View.js +++ /dev/null @@ -1,13 +0,0 @@ -// @flow - -import variable from '../variables/Platform'; - -export default (variables /* : * */ = variable) => { - const viewTheme = { - '.padder': { - padding: variables.contentPadding, - }, - }; - - return viewTheme; -}; diff --git a/templates/app/react-native/src/theme/components/index.js b/templates/app/react-native/src/theme/components/index.js deleted file mode 100644 index 921980bb8a..0000000000 --- a/templates/app/react-native/src/theme/components/index.js +++ /dev/null @@ -1,247 +0,0 @@ -/* eslint-disable no-param-reassign */ -// @flow - -import _ 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'; -import getOverrides from '../overrides'; - -export default (variables /* : * */ = variable) => { - const theme = { - variables, - 'NativeBase.Left': { - ...leftTheme(variables), - }, - 'NativeBase.Right': { - ...rightTheme(variables), - }, - 'NativeBase.Body': { - ...bodyTheme(variables), - }, - - '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(variables), - }, - - 'NativeBase.Container': { - ...containerTheme(variables), - }, - 'NativeBase.Content': { - ...contentTheme(variables), - }, - - '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(variables), - }, - - 'NativeBase.Fab': { - ...fabTheme(variables), - }, - - 'NativeBase.Item': { - ...itemTheme(variables), - }, - - 'NativeBase.Label': { - ...labelTheme(variables), - }, - - 'NativeBase.Textarea': { - ...textAreaTheme(variables), - }, - - 'NativeBase.PickerNB': { - ...pickerTheme(variables), - 'NativeBase.Button': { - 'NativeBase.Text': {}, - }, - }, - - 'NativeBase.Tab': { - ...tabTheme(variables), - }, - - 'NativeBase.Segment': { - ...segmentTheme(variables), - }, - - 'NativeBase.TabBar': { - ...tabBarTheme(variables), - }, - 'NativeBase.ViewNB': { - ...viewTheme(variables), - }, - 'NativeBase.TabHeading': { - ...tabHeadingTheme(variables), - }, - 'NativeBase.TabContainer': { - ...tabContainerTheme(variables), - }, - 'NativeBase.Switch': { - ...switchTheme(variables), - }, - 'NativeBase.Separator': { - ...separatorTheme(variables), - }, - 'NativeBase.SwipeRow': { - ...swipeRowTheme(variables), - }, - 'NativeBase.Thumbnail': { - ...thumbnailTheme(variables), - }, - ...getOverrides(variables), - }; - - const cssifyTheme = (grandparent, parent, parentKey) => { - _.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/templates/app/react-native/src/theme/overrides/Button.js b/templates/app/react-native/src/theme/overrides/Button.js deleted file mode 100644 index 9597871ba2..0000000000 --- a/templates/app/react-native/src/theme/overrides/Button.js +++ /dev/null @@ -1,20 +0,0 @@ -// @flow -import buttonTheme from '../components/Button'; - -export default variables => { - const buttonOverrides = { - ...buttonTheme(variables), - '.abpButton': { - display: 'flex', - justifyContent: 'center', - borderRadius: 15, - width: '100%', - 'NativeBase.Text': { - fontWeight: '600', - textTransform: 'uppercase', - }, - }, - }; - - return buttonOverrides; -}; diff --git a/templates/app/react-native/src/theme/overrides/Content.js b/templates/app/react-native/src/theme/overrides/Content.js deleted file mode 100644 index a3baf45b2c..0000000000 --- a/templates/app/react-native/src/theme/overrides/Content.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow -import contentTheme from '../components/Content'; - -export default variables => { - const override = { - ...contentTheme(variables), - backgroundColor: '#f8f8f8', - '.px20': { - paddingHorizontal: 20, - }, - }; - - return override; -}; diff --git a/templates/app/react-native/src/theme/overrides/Icon.js b/templates/app/react-native/src/theme/overrides/Icon.js deleted file mode 100644 index ee602f9049..0000000000 --- a/templates/app/react-native/src/theme/overrides/Icon.js +++ /dev/null @@ -1,35 +0,0 @@ -// @flow -import iconTheme from '../components/Icon'; - -export default variables => { - const iconOverrides = { - ...iconTheme(variables), - '.primary': { - color: variables.brandPrimary, - }, - '.success': { - color: variables.brandSuccess, - }, - '.info': { - color: variables.brandInfo, - }, - '.danger': { - color: variables.brandDanger, - }, - '.warning': { - color: variables.brandWarning, - }, - '.dark': { - color: variables.brandDark, - }, - '.light': { - color: variables.brandLight, - }, - '.navElement': { - marginHorizontal: 15, - fontSize: 35, - }, - }; - - return iconOverrides; -}; diff --git a/templates/app/react-native/src/theme/overrides/Input.js b/templates/app/react-native/src/theme/overrides/Input.js deleted file mode 100644 index 5ff4b86a9d..0000000000 --- a/templates/app/react-native/src/theme/overrides/Input.js +++ /dev/null @@ -1,21 +0,0 @@ -import inputTheme from '../components/Input'; - -export default variables => { - const inputOverrides = { - ...inputTheme(variables), - '.abpInput': { - paddingVertical: 0, - paddingHorizontal: 20, - borderWidth: 1, - borderColor: '#e6e6e6', - borderRadius: 15, - width: '100%', - height: 40, - backgroundColor: '#fff', - color: '#000', - lineHeight: 22, - }, - }; - - return inputOverrides; -}; diff --git a/templates/app/react-native/src/theme/overrides/InputGroup.js b/templates/app/react-native/src/theme/overrides/InputGroup.js deleted file mode 100644 index e673b7e052..0000000000 --- a/templates/app/react-native/src/theme/overrides/InputGroup.js +++ /dev/null @@ -1,19 +0,0 @@ -// @flow -import inputGroupTheme from '../components/InputGroup'; - -export default variables => { - const inputGroupOverrides = { - ...inputGroupTheme(variables), - '.abpInputGroup': { - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - padding: 0, - marginVertical: 10, - borderBottomWidth: 0, - height: 60, - }, - }; - - return inputGroupOverrides; -}; diff --git a/templates/app/react-native/src/theme/overrides/Item.js b/templates/app/react-native/src/theme/overrides/Item.js deleted file mode 100644 index c5fd1d2397..0000000000 --- a/templates/app/react-native/src/theme/overrides/Item.js +++ /dev/null @@ -1,24 +0,0 @@ -import itemTheme from '../components/Item'; - -export default variables => { - const itemOverrides = { - ...itemTheme(variables), - '.abpInput': { - paddingVertical: 0, - paddingHorizontal: 5, - borderTopWidth: 1, - borderRightWidth: 1, - borderBottomWidth: 1, - borderLeftWidth: 1, - borderWidth: 1, - borderColor: '#e6e6e6', - borderRadius: 15, - width: '100%', - height: 40, - backgroundColor: '#fff', - color: '#000', - }, - }; - - return itemOverrides; -}; diff --git a/templates/app/react-native/src/theme/overrides/Label.js b/templates/app/react-native/src/theme/overrides/Label.js deleted file mode 100644 index fbc68c661d..0000000000 --- a/templates/app/react-native/src/theme/overrides/Label.js +++ /dev/null @@ -1,18 +0,0 @@ -// @flow -import labelTheme from '../components/Label'; - -export default variables => { - const labelOverrides = { - ...labelTheme(variables), - '.abpLabel': { - alignSelf: 'flex-start', - marginBottom: 5, - color: '#8F8F8F', - fontWeight: '600', - fontSize: 13, - textTransform: 'uppercase', - }, - }; - - return labelOverrides; -}; diff --git a/templates/app/react-native/src/theme/overrides/Text.js b/templates/app/react-native/src/theme/overrides/Text.js deleted file mode 100644 index 811c694011..0000000000 --- a/templates/app/react-native/src/theme/overrides/Text.js +++ /dev/null @@ -1,31 +0,0 @@ -// @flow -import textTheme from '../components/Text'; - -export default variables => { - const textOverrides = { - ...textTheme(variables), - '.primary': { - color: variables.brandPrimary, - }, - '.success': { - color: variables.brandSuccess, - }, - '.info': { - color: variables.brandInfo, - }, - '.danger': { - color: variables.brandDanger, - }, - '.warning': { - color: variables.brandWarning, - }, - '.dark': { - color: variables.brandDark, - }, - '.light': { - color: variables.brandLight, - }, - }; - - return textOverrides; -}; diff --git a/templates/app/react-native/src/theme/overrides/index.js b/templates/app/react-native/src/theme/overrides/index.js deleted file mode 100644 index e44c56805d..0000000000 --- a/templates/app/react-native/src/theme/overrides/index.js +++ /dev/null @@ -1,39 +0,0 @@ -import textTheme from './Text'; -import iconTheme from './Icon'; -import inputTheme from './Input'; -import inputGroupTheme from './InputGroup'; -import labelTheme from './Label'; -import buttonTheme from './Button'; -import contentTheme from './Content'; -import itemTheme from './Item'; - -export default variables => { - const theme = { - 'NativeBase.Text': { - ...textTheme(variables), - }, - 'NativeBase.Icon': { - ...iconTheme(variables), - }, - 'NativeBase.Input': { - ...inputTheme(variables), - }, - 'NativeBase.InputGroup': { - ...inputGroupTheme(variables), - }, - 'NativeBase.Label': { - ...labelTheme(variables), - }, - 'NativeBase.Button': { - ...buttonTheme(variables), - }, - 'NativeBase.Content': { - ...contentTheme(variables), - }, - 'NativeBase.Item': { - ...itemTheme(variables), - }, - }; - - return theme; -}; diff --git a/templates/app/react-native/src/theme/variables/CommonColor.js b/templates/app/react-native/src/theme/variables/CommonColor.js deleted file mode 100644 index dd28eb1531..0000000000 --- a/templates/app/react-native/src/theme/variables/CommonColor.js +++ /dev/null @@ -1,304 +0,0 @@ -import color from 'color'; -import { Platform, Dimensions, PixelRatio } from 'react-native'; - -export const PLATFORM = { - ANDROID: 'android', - IOS: 'ios', - MATERIAL: 'material', - WEB: 'web', -}; - -const deviceHeight = Dimensions.get('window').height; -const deviceWidth = Dimensions.get('window').width; -const platform = Platform.OS; -const platformStyle = undefined; -const isIphoneX = - platform === PLATFORM.IOS && - (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); - -export default { - platformStyle, - platform, - - // Accordion - headerStyle: '#edebed', - iconStyle: '#000', - contentStyle: '#f5f4f5', - expandedIconStyle: '#000', - accordionBorderColor: '#d3d3d3', - - // 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 === PLATFORM.IOS ? 3 : 0, - - // Button - buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - buttonDisabledBg: '#b5b5b5', - buttonPadding: 6, - 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 === PLATFORM.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 === PLATFORM.IOS ? 10 : 12, - - // CheckBox - CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0, - CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2, - CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2, - CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5, - CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16, - CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1, - CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17, - checkboxBgColor: '#039BE5', - checkboxSize: 20, - checkboxTickColor: '#fff', - - // Color - brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5', - brandInfo: '#62B1F6', - brandSuccess: '#5cb85c', - brandDanger: '#d9534f', - brandWarning: '#f0ad4e', - brandDark: '#000', - brandLight: '#f4f4f4', - - // Container - containerBgColor: '#fff', - - // Date Picker - datePickerTextColor: '#000', - datePickerBg: 'transparent', - - // FAB - fabWidth: 56, - - // Font - DefaultFontSize: 16, - fontFamily: platform === PLATFORM.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 === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - footerPaddingBottom: 0, - - // FooterTab - tabBarTextColor: platform === PLATFORM.IOS ? '#737373' : '#bfc6ea', - tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11, - activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff', - sTabBarActiveTextColor: '#007aff', - tabBarActiveTextColor: platform === PLATFORM.IOS ? '#2874F0' : '#fff', - tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5', - - // Header - toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - toolbarHeight: platform === PLATFORM.IOS ? 64 : 56, - toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23, - toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff', - searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, - searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50, - toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - iosStatusbar: 'dark-content', - toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', - 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 === PLATFORM.IOS ? 30 : 28, - iconHeaderSize: platform === PLATFORM.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: 22, - lineHeight: platform === PLATFORM.IOS ? 20 : 24, - - // List - listBg: 'transparent', - listBorderColor: '#c9c9c9', - listDividerBg: '#f4f4f4', - listBtnUnderlayColor: '#DDD', - listItemPadding: platform === PLATFORM.IOS ? 10 : 12, - listNoteColor: '#808080', - listNoteSize: 13, - listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5', - - // Progress Bar - defaultProgressColor: '#E4202D', - inverseProgressColor: '#1A191B', - - // Radio Button - radioBtnSize: platform === PLATFORM.IOS ? 25 : 23, - radioSelectedColorAndroid: '#3F51B5', - radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24, - get radioColor() { - return this.brandPrimary; - }, - - // Segment - segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5', - segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', - - // Spinner - defaultSpinnerColor: '#45D56E', - inverseSpinnerColor: '#1A191B', - - // Tab - tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', - topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff', - topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - - // Tabs - tabBgColor: '#F8F8F8', - tabFontSize: 15, - - // Text - textColor: '#000', - inverseTextColor: '#fff', - noteFontSize: 14, - get defaultTextColor() { - return this.textColor; - }, - - // Title - titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - titleFontSize: platform === PLATFORM.IOS ? 17 : 19, - subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14, - subtitleColor: platform === PLATFORM.IOS ? '#000' : '#fff', - titleFontColor: platform === PLATFORM.IOS ? '#000' : '#fff', - - // Other - borderRadiusBase: platform === PLATFORM.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, - }, - }, -}; diff --git a/templates/app/react-native/src/theme/variables/Material.js b/templates/app/react-native/src/theme/variables/Material.js deleted file mode 100644 index 8382482c96..0000000000 --- a/templates/app/react-native/src/theme/variables/Material.js +++ /dev/null @@ -1,299 +0,0 @@ -import color from 'color'; -import { Platform, Dimensions, PixelRatio } from 'react-native'; - -import { PLATFORM } from './CommonColor'; - -const deviceHeight = Dimensions.get('window').height; -const deviceWidth = Dimensions.get('window').width; -const platform = Platform.OS; -const platformStyle = PLATFORM.MATERIAL; -const isIphoneX = - platform === PLATFORM.IOS && - (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); - -export default { - platformStyle, - platform, - - // Accordion - headerStyle: '#edebed', - iconStyle: '#000', - contentStyle: '#f5f4f5', - expandedIconStyle: '#000', - accordionBorderColor: '#d3d3d3', - - // 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: 0, - - // Button - buttonFontFamily: 'Roboto', - buttonDisabledBg: '#b5b5b5', - buttonPadding: 6, - 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 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 === PLATFORM.IOS ? 10 : 12, - - // CheckBox - CheckboxRadius: 0, - CheckboxBorderWidth: 2, - CheckboxPaddingLeft: 2, - CheckboxPaddingBottom: 5, - CheckboxIconSize: 16, - CheckboxIconMarginTop: 1, - CheckboxFontSize: 17, - checkboxBgColor: '#039BE5', - checkboxSize: 20, - checkboxTickColor: '#fff', - - // Color - brandPrimary: '#3F51B5', - brandInfo: '#62B1F6', - brandSuccess: '#5cb85c', - brandDanger: '#d9534f', - brandWarning: '#f0ad4e', - brandDark: '#000', - brandLight: '#f4f4f4', - - // Container - containerBgColor: '#fff', - - // Date Picker - datePickerTextColor: '#000', - datePickerBg: 'transparent', - - // FAB - fabWidth: 56, - - // Font - DefaultFontSize: 16, - fontFamily: '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: '#3F51B5', - footerPaddingBottom: 0, - - // FooterTab - tabBarTextColor: '#bfc6ea', - tabBarTextSize: 11, - activeTab: '#fff', - sTabBarActiveTextColor: '#007aff', - tabBarActiveTextColor: '#fff', - tabActiveBgColor: '#3F51B5', - - // Header - toolbarBtnColor: '#fff', - toolbarDefaultBg: '#3F51B5', - toolbarHeight: 56, - toolbarSearchIconSize: 23, - toolbarInputColor: '#fff', - searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, - searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50, - toolbarBtnTextColor: '#fff', - toolbarDefaultBorder: '#3F51B5', - iosStatusbar: '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: 28, - iconHeaderSize: 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: 22, - lineHeight: 24, - - // List - listBg: 'transparent', - listBorderColor: '#c9c9c9', - listDividerBg: '#f4f4f4', - listBtnUnderlayColor: '#DDD', - listItemPadding: 12, - listNoteColor: '#808080', - listNoteSize: 13, - listItemSelected: '#3F51B5', - - // Progress Bar - defaultProgressColor: '#E4202D', - inverseProgressColor: '#1A191B', - - // Radio Button - radioBtnSize: 23, - radioSelectedColorAndroid: '#3F51B5', - radioBtnLineHeight: 24, - get radioColor() { - return this.brandPrimary; - }, - - // Segment - segmentBackgroundColor: '#3F51B5', - segmentActiveBackgroundColor: '#fff', - segmentTextColor: '#fff', - segmentActiveTextColor: '#3F51B5', - segmentBorderColor: '#fff', - segmentBorderColorMain: '#3F51B5', - - // Spinner - defaultSpinnerColor: '#45D56E', - inverseSpinnerColor: '#1A191B', - - // Tab - tabDefaultBg: '#3F51B5', - topTabBarTextColor: '#b3c7f9', - topTabBarActiveTextColor: '#fff', - topTabBarBorderColor: '#fff', - topTabBarActiveBorderColor: '#fff', - - // Tabs - tabBgColor: '#F8F8F8', - tabFontSize: 15, - - // Text - textColor: '#000', - inverseTextColor: '#fff', - noteFontSize: 14, - get defaultTextColor() { - return this.textColor; - }, - - // Title - titleFontfamily: 'Roboto', - titleFontSize: 19, - subTitleFontSize: 14, - subtitleColor: '#FFF', - titleFontColor: '#FFF', - - // Other - borderRadiusBase: 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, - }, - }, -}; diff --git a/templates/app/react-native/src/theme/variables/Platform.js b/templates/app/react-native/src/theme/variables/Platform.js deleted file mode 100644 index db8fccab92..0000000000 --- a/templates/app/react-native/src/theme/variables/Platform.js +++ /dev/null @@ -1,333 +0,0 @@ -// @flow - -import color from 'color'; -import { Platform, Dimensions, PixelRatio } from 'react-native'; - -import { PLATFORM } from './CommonColor'; - -const deviceHeight = Dimensions.get('window').height; -const deviceWidth = Dimensions.get('window').width; -const platform = Platform.OS; -const platformStyle = undefined; -const isIphoneX = - platform === PLATFORM.IOS && - (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); - -export default { - platformStyle, - platform, - - // Accordion - accordionBorderColor: '#d3d3d3', - accordionContentPadding: 10, - accordionIconFontSize: 18, - contentStyle: '#f5f4f5', - expandedIconStyle: '#000', - headerStyle: '#edebed', - iconStyle: '#000', - - // 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 === PLATFORM.IOS ? 3 : 0, - - // Button - buttonFontFamily: platform === PLATFORM.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 === PLATFORM.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 === PLATFORM.IOS ? 10 : 12, - - // CheckBox - CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0, - CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2, - CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2, - CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5, - CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16, - CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1, - CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17, - get checkboxBgColor() { - return this.brandPrimary; - }, - checkboxSize: 20, - checkboxTickColor: '#fff', - checkboxDefaultColor: 'transparent', - checkboxTextShadowRadius: 0, - - // Color - brandPrimary: '#38003c', - brandInfo: '#54B9F1', - brandSuccess: '#42B87F', - brandDanger: '#A83232', - brandWarning: '#FFC42E', - brandDark: '#2A2A2A', - brandLight: '#E8E8E8', - - // 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 === PLATFORM.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 === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - footerPaddingBottom: 0, - - // FooterTab - tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', - tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11, - activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff', - sTabBarActiveTextColor: '#007aff', - tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5', - - // Header - toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - toolbarHeight: platform === PLATFORM.IOS ? 64 : 56, - toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23, - toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff', - searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, - searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50, - toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', - iosStatusbar: '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 === PLATFORM.IOS ? 30 : 28, - iconHeaderSize: platform === PLATFORM.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: 22, - lineHeight: platform === PLATFORM.IOS ? 20 : 24, - listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5', - - // List - listBg: 'transparent', - listBorderColor: '#c9c9c9', - listDividerBg: '#f4f4f4', - listBtnUnderlayColor: '#DDD', - listItemPadding: platform === PLATFORM.IOS ? 10 : 12, - listNoteColor: '#808080', - listNoteSize: 13, - - // Progress Bar - defaultProgressColor: '#E4202D', - inverseProgressColor: '#1A191B', - - // Radio Button - radioBtnSize: platform === PLATFORM.IOS ? 25 : 23, - radioSelectedColorAndroid: '#3F51B5', - radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24, - get radioColor() { - return this.brandPrimary; - }, - - // Segment - segmentBackgroundColor: '#f8f8f8', - segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentTextColor: '#333', - segmentActiveTextColor: '#fff', - get segmentBorderColor() { - return this.brandPrimary; - }, - segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', - - // Spinner - defaultSpinnerColor: '#45D56E', - inverseSpinnerColor: '#1A191B', - - // Tab - tabBarDisabledTextColor: '#BDBDBD', - tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', - topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff', - topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - - // Tabs - tabBgColor: '#F8F8F8', - tabFontSize: 15, - - // Text - textColor: '#000', - inverseTextColor: '#fff', - noteFontSize: 14, - get defaultTextColor() { - return this.textColor; - }, - - // Title - titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - titleFontSize: platform === PLATFORM.IOS ? 17 : 19, - subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14, - subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF', - titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF', - - // Other - borderRadiusBase: platform === PLATFORM.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, - }, - }, -}; diff --git a/templates/app/react-native/src/theme/variables/index.js b/templates/app/react-native/src/theme/variables/index.js deleted file mode 100644 index d200bbdb83..0000000000 --- a/templates/app/react-native/src/theme/variables/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import platform from './Platform'; - -export const customVariables = { - zIndex: { - overlay: 50, - loaders: 150, - }, -}; - -export const activeTheme = { ...platform, ...customVariables };