diff --git a/src/playground/src/app.component.tsx b/src/playground/src/app.component.tsx index 49d9bde4a..984a681c8 100644 --- a/src/playground/src/app.component.tsx +++ b/src/playground/src/app.component.tsx @@ -1,23 +1,246 @@ import React from 'react'; import { default as mapping } from '@eva/eva'; import { theme } from '@eva/theme-eva'; -import { ApplicationProvider } from '@kitten/theme'; -import { withNavigation } from './navigation'; -import * as Screens from './ui/screen'; +import { + ApplicationProvider, + ThemeType, +} from '@kitten/theme'; +import { + ThemeContext, + ContextType, +} from './ui/themeContext'; +import { Router } from './navigation'; + +interface State { + currentTheme: 'light' | 'dark'; + theme: ThemeType; +} export default class App extends React.Component { + public state: State = { + currentTheme: 'light', + theme: theme, + }; + + private toggleTheme = (themeName: 'light' | 'dark'): void => { + let newTheme: ThemeType = null; + if (themeName === 'light') { + newTheme = theme; + } else { + newTheme = darkTheme; + } + this.setState({ + currentTheme: themeName, + theme: newTheme, + }); + }; + public render(): React.ReactNode { - const { Home: RootScreen, ...screens } = Screens; - const Router: React.ComponentClass = withNavigation(RootScreen, screens); + const { currentTheme } = this.state; + const contextValue: ContextType = { + currentTheme: currentTheme, + toggleTheme: this.toggleTheme, + }; return ( - - - + + + + + ); } } +const darkTheme: ThemeType = { + 'color-basic-100': '#FFFFFF', + 'color-basic-200': '#F7F8FA', + 'color-basic-300': '#EDF0F4', + 'color-basic-400': '#DDE1EB', + 'color-basic-500': '#C8CEDB', + 'color-basic-600': '#A7B0C1', + 'color-basic-700': '#657084', + 'color-basic-800': '#2E384F', + 'color-basic-900': '#232A40', + 'color-basic-1000': '#1A1F33', + 'color-basic-1100': '#131729', + + 'color-primary-100': '#F2F6FF', + 'color-primary-200': '#D9E4FF', + 'color-primary-300': '#A6C1FF', + 'color-primary-400': '#598BFF', + 'color-primary-500': '#3366FF', + 'color-primary-600': '#284DE0', + 'color-primary-700': '#2541CC', + 'color-primary-800': '#192F9E', + 'color-primary-900': '#14236E', + + 'color-secondary-100': '#F7F2FF', + 'color-secondary-200': '#E0D1FF', + 'color-secondary-300': '#C5A8FF', + 'color-secondary-400': '#A375FF', + 'color-secondary-500': '#884DFF', + 'color-secondary-600': '#6A39DB', + 'color-secondary-700': '#4F28B8', + 'color-secondary-800': '#371B94', + 'color-secondary-900': '#26117A', + + 'color-tertiary-100': '#FFDED6', + 'color-tertiary-200': '#FFDED6', + 'color-tertiary-300': '#FFDED6', + 'color-tertiary-400': '#FFDED6', + 'color-tertiary-500': '#FFDED6', + 'color-tertiary-600': '#FFDED6', + 'color-tertiary-700': '#FFDED6', + 'color-tertiary-800': '#FFDED6', + 'color-tertiary-900': '#FFDED6', + + 'color-success-100': '#F0FFF5', + 'color-success-200': '#CCFCE3', + 'color-success-300': '#8CFAC7', + 'color-success-400': '#2CE69B', + 'color-success-500': '#00D68F', + 'color-success-600': '#00B887', + 'color-success-700': '#00997A', + 'color-success-800': '#007D6C', + 'color-success-900': '#004A42', + + 'color-info-100': '#F2F8FF', + 'color-info-200': '#C7E2FF', + 'color-info-300': '#94CBFF', + 'color-info-400': '#42AAFF', + 'color-info-500': '#0095FF', + 'color-info-600': '#006FD6', + 'color-info-700': '#0057C2', + 'color-info-800': '#0041A8', + 'color-info-900': '#002885', + + 'color-warning-100': '#FFFDF2', + 'color-warning-200': '#FFF1C2', + 'color-warning-300': '#FFE59E', + 'color-warning-400': '#FFC94D', + 'color-warning-500': '#FFAA00', + 'color-warning-600': '#DB8B00', + 'color-warning-700': '#B86E00', + 'color-warning-800': '#945400', + 'color-warning-900': '#703C00', + + 'color-danger-100': '#FFF2F2', + 'color-danger-200': '#FFD6D9', + 'color-danger-300': '#FFA8B4', + 'color-danger-400': '#FF708D', + 'color-danger-500': '#FF3D71', + 'color-danger-600': '#DB2C66', + 'color-danger-700': '#B81D5B', + 'color-danger-800': '#94124E', + 'color-danger-900': '#700940', + + 'background-color-default-1': '$color-basic-800', + 'background-color-default-2': '$color-basic-900', + 'background-color-default-3': '$color-basic-1000', + 'background-color-default-4': '$color-basic-1100', + + 'background-color-alternative-1': '$color-basic-100', + 'background-color-alternative-2': '$color-basic-200', + 'background-color-alternative-3': '$color-basic-300', + 'background-color-alternative-4': '$color-basic-400', + + 'background-color-primary-1': '$color-primary-500', + 'background-color-primary-2': '$color-primary-600', + 'background-color-primary-3': '$color-primary-700', + 'background-color-primary-4': '$color-primary-800', + + 'border-color-default-1': '$color-basic-800', + 'border-color-default-2': '$color-basic-900', + 'border-color-default-3': '$color-basic-1000', + 'border-color-default-4': '$color-basic-1100', + 'border-color-default-5': '$color-basic-1100', + + 'border-color-alternative-1': '$color-basic-100', + 'border-color-alternative-2': '$color-basic-200', + 'border-color-alternative-3': '$color-basic-3000', + 'border-color-alternative-4': '$color-basic-400', + 'border-color-alternative-5': '$color-basic-500', + + 'border-color-primary-1': '$color-primary-500', + 'border-color-primary-2': '$color-primary-600', + 'border-color-primary-3': '$color-primary-700', + 'border-color-primary-4': '$color-primary-800', + 'border-color-primary-5': '$color-primary-900', + + 'text-color-default': '$color-basic-100', + 'text-color-alternative': '$color-basic-1000', + 'text-color-control': '$color-basic-100', + 'text-color-disabled': '$color-basic-700', + 'text-color-hint': '$color-basic-600', + + 'text-color-primary': '$color-primary-default', + 'text-color-primary-active': '$color-primary-active', + 'text-color-primary-disabled': '$color-primary-disabled', + + 'text-color-success': '$color-success-default', + 'text-color-success-active': '$color-success-active', + 'text-color-success-disabled': '$color-success-disabled', + + 'text-color-info': '$color-info-default', + 'text-color-info-active': '$color-info-active', + 'text-color-info-disabled': '$color-info-disabled', + + 'text-color-warning': '$color-warning-default', + 'text-color-warning-active': '$color-warning-active', + 'text-color-warning-disabled': '$color-warning-disabled', + + 'text-color-danger': '$color-danger-default', + 'text-color-danger-active': '$color-danger-active', + 'text-color-danger-disabled': '$color-danger-disabled', + + 'icon-color-default': '$color-basic-500', + 'icon-color-active': '$color-basic-400', + 'icon-color-control': '$color-basic-100', + 'icon-color-hint': '$color-basic-700', + 'icon-color-disabled': '$color-basic-800', + + 'outline-color': '$color-basic-700', + + 'color-basic-default': '$color-basic-700', + 'color-basic-active': '$color-basic-900', + 'color-basic-focus': '$color-basic-1000', + 'color-basic-disabled': '$color-basic-600', + + 'color-primary-default': '$color-primary-500', + 'color-primary-active': '$color-primary-600', + 'color-primary-focus': '$color-primary-700', + 'color-primary-disabled': '$color-primary-200', + + 'color-success-default': '$color-success-500', + 'color-success-active': '$color-success-600', + 'color-success-focus': '$color-success-700', + 'color-success-disabled': '$color-success-200', + + 'color-info-default': '$color-info-500', + 'color-info-active': '$color-info-600', + 'color-info-focus': '$color-info-700', + 'color-info-disabled': '$color-info-300', + + 'color-warning-default': '$color-warning-500', + 'color-warning-active': '$color-warning-600', + 'color-warning-focus': '$color-warning-700', + 'color-warning-disabled': '$color-warning-300', + + 'color-danger-default': '$color-danger-500', + 'color-danger-active': '$color-danger-600', + 'color-danger-focus': '$color-danger-700', + 'color-danger-disabled': '$color-danger-300', + + 'color-alternative': '$color-basic-100', + + 'color-white': '#FFFFFF', + 'color-black': '#0D1C2E', + + 'font-primary-color': '#0D1C2E', + 'font-primary-inverse-color': '#FFFFFF', +}; + diff --git a/src/playground/src/navigation/index.ts b/src/playground/src/navigation/index.ts index 23c17df39..8d470efc6 100644 --- a/src/playground/src/navigation/index.ts +++ b/src/playground/src/navigation/index.ts @@ -1,5 +1,5 @@ export { - withNavigation, - Props as NavigatorProps, RouteType, + Router, + routes, } from './navigation.component'; diff --git a/src/playground/src/navigation/navigation.component.tsx b/src/playground/src/navigation/navigation.component.tsx index 978e441b2..72de20afb 100644 --- a/src/playground/src/navigation/navigation.component.tsx +++ b/src/playground/src/navigation/navigation.component.tsx @@ -1,70 +1,86 @@ import React from 'react'; import { - // @ts-ignore: createAppContainer is not exported createAppContainer, createStackNavigator, - NavigationRouteConfigMap, } from 'react-navigation'; -import hoistNonReactStatics from 'hoist-non-react-statics'; +import { + Home, + Avatar, + Button, + BottomNavigation, + ButtonGroup, + Checkbox, + Dialog, + Input, + Layout, + List, + Popover, + Radio, + RadioGroup, + TabBar, + TabView, + Tooltip, + Text, + Toggle, + ViewPager, + TopNavigation, + Modal, + OverflowMenu, +} from '../ui/screen'; export interface RouteType { name: string; } -export interface Props { - routes?: RouteType[]; -} - -const ROUTE_INITIAL = 'root'; - -export const withNavigation =

(Root: React.ComponentType

, routes: NavigationRouteConfigMap) => { - - type WrapperProps = Props & P; - - class RootWrapper extends React.Component { - - private getComponentName = (Component: React.ComponentType): string => { - return Component.displayName || Component.name; - }; - - private isComponentRoute = (name: string): boolean => { - const rootRouteName: string = this.getComponentName(Root); - const componentRouteName: string = this.getComponentName(routes[name]); - - return componentRouteName !== rootRouteName; - }; - - private createRoute = (name: string): RouteType => { - return { - name: name, - }; - }; - - private createRoutes = (): RouteType[] => { - return Object.keys(routes).filter(this.isComponentRoute).map(this.createRoute); - }; - - public render(): React.ReactNode { - return ( - - ); - } - } - - const routeConfig: NavigationRouteConfigMap = { - [ROUTE_INITIAL]: RootWrapper, - ...routes, - }; - const stackConfig: NavigationRouteConfigMap = { - initialRouteName: ROUTE_INITIAL, - }; +export const routes: RouteType[] = [ + { name: 'Avatar' }, + { name: 'Bottom Navigation' }, + { name: 'Button' }, + { name: 'Button Group' }, + { name: 'Checkbox' }, + { name: 'Dialog' }, + { name: 'Input' }, + { name: 'Layout' }, + { name: 'List' }, + { name: 'Popover' }, + { name: 'Radio' }, + { name: 'Radio Group' }, + { name: 'Tab Bar' }, + { name: 'Tab View' }, + { name: 'Tooltip' }, + { name: 'Text' }, + { name: 'Toggle' }, + { name: 'View Pager' }, + { name: 'Top Navigation' }, + { name: 'Modal' }, + { name: 'Overflow Menu' }, +]; - hoistNonReactStatics(RootWrapper, Root); +const AppNavigator = createStackNavigator({ + ['Home']: Home, + ['Avatar']: Avatar, + ['Bottom Navigation']: BottomNavigation, + ['Button']: Button, + ['Button Group']: ButtonGroup, + ['Checkbox']: Checkbox, + ['Dialog']: Dialog, + ['Input']: Input, + ['Layout']: Layout, + ['List']: List, + ['Popover']: Popover, + ['Radio']: Radio, + ['Radio Group']: RadioGroup, + ['Tab Bar']: TabBar, + ['Tab View']: TabView, + ['Tooltip']: Tooltip, + ['Text']: Text, + ['Toggle']: Toggle, + ['View Pager']: ViewPager, + ['Top Navigation']: TopNavigation, + ['Modal']: Modal, + ['Overflow Menu']: OverflowMenu, +}, { + initialRouteName: 'Home', +}); - // FIXME: - // @ts-ignore: createAppContainer is not exported - return createAppContainer(createStackNavigator(routeConfig, stackConfig)); -}; +export const Router: any = createAppContainer(AppNavigator); diff --git a/src/playground/src/ui/screen/avatar.component.tsx b/src/playground/src/ui/screen/avatar.component.tsx index 59b4dc6a3..ada5241a7 100644 --- a/src/playground/src/ui/screen/avatar.component.tsx +++ b/src/playground/src/ui/screen/avatar.component.tsx @@ -115,6 +115,8 @@ class AvatarScreen extends React.Component { export default withStyles(AvatarScreen, (theme: ThemeType) => ({ container: { + flex: 1, + backgroundColor: theme['background-color-default-1'], paddingVertical: 8, paddingHorizontal: 16, }, diff --git a/src/playground/src/ui/screen/avatar/avatar.container.tsx b/src/playground/src/ui/screen/avatar/avatar.container.tsx new file mode 100644 index 000000000..b2680cd3e --- /dev/null +++ b/src/playground/src/ui/screen/avatar/avatar.container.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { NavigationScreenProps } from 'react-navigation'; +import { + Avatar, + AvatarProps, +} from '@kitten/ui'; +import { Showcase } from '../common/showcase.component'; +import { avatarShowcase } from './type'; + +export class AvatarContainer extends React.Component { + + private renderItem = (props: AvatarProps): React.ReactElement => { + return ( + + ); + }; + + public render(): React.ReactNode { + return ( + + ); + } +} diff --git a/src/playground/src/ui/screen/avatar/type.ts b/src/playground/src/ui/screen/avatar/type.ts new file mode 100644 index 000000000..8e65b3b1d --- /dev/null +++ b/src/playground/src/ui/screen/avatar/type.ts @@ -0,0 +1,88 @@ +import { + ComponentShowcase, + ComponentShowcaseItem, + ComponentShowcaseSection, +} from '../common/type'; + +const giantAvatar: ComponentShowcaseItem = { + title: 'Giant', + props: { + size: 'giant', + }, +}; + +const largeAvatar: ComponentShowcaseItem = { + title: 'Large', + props: { + size: 'large', + }, +}; + +const mediumAvatar: ComponentShowcaseItem = { + title: 'Medium', + props: { + size: 'medium', + }, +}; + +const smallAvatar: ComponentShowcaseItem = { + title: 'Small', + props: { + size: 'small', + }, +}; + +const tinyAvatar: ComponentShowcaseItem = { + title: 'Tiny', + props: { + size: 'tiny', + }, +}; + +const roundAvatar: ComponentShowcaseItem = { + title: 'Round', + props: { + shape: 'round', + }, +}; + +const roundedAvatar: ComponentShowcaseItem = { + title: 'Rounded', + props: { + shape: 'rounded', + }, +}; + +const squareAvatar: ComponentShowcaseItem = { + title: 'Square', + props: { + shape: 'square', + }, +}; + +const shapeSection: ComponentShowcaseSection = { + title: 'Shape', + items: [ + roundAvatar, + roundedAvatar, + squareAvatar, + ], +}; + +const sizeSection: ComponentShowcaseSection = { + title: 'Size', + items: [ + giantAvatar, + largeAvatar, + mediumAvatar, + smallAvatar, + tinyAvatar, + ], +}; + +export const avatarShowcase: ComponentShowcase = { + sections: [ + sizeSection, + shapeSection, + ], +}; diff --git a/src/playground/src/ui/screen/bottomNavigation.component.tsx b/src/playground/src/ui/screen/bottomNavigation.component.tsx index 3c255b470..4e96beb81 100644 --- a/src/playground/src/ui/screen/bottomNavigation.component.tsx +++ b/src/playground/src/ui/screen/bottomNavigation.component.tsx @@ -19,12 +19,13 @@ import { BottomNavigationTab, } from '@kitten/ui'; import { StyleType } from '@kitten/theme'; +import { ThemeConsumer } from '../themeConsumer'; const APPEARANCE: string = 'default'; -const TabScreen1 = (): React.ReactElement<{}> => Tab Screen 1; -const TabScreen2 = (): React.ReactElement<{}> => Tab Screen 2; -const TabScreen3 = (): React.ReactElement<{}> => Tab Screen 3; +const TabScreen1 = (): React.ReactElement<{}> => Tab Screen 1; +const TabScreen2 = (): React.ReactElement<{}> => Tab Screen 2; +const TabScreen3 = (): React.ReactElement<{}> => Tab Screen 3; interface NavigationProps { navigation: NavigationScreenProp; diff --git a/src/playground/src/ui/screen/button/button.container.tsx b/src/playground/src/ui/screen/button/button.container.tsx new file mode 100644 index 000000000..7023c7848 --- /dev/null +++ b/src/playground/src/ui/screen/button/button.container.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; +import { NavigationScreenProps } from 'react-navigation'; +import { + Button, + ButtonProps, +} from '@kitten/ui'; +import { Showcase } from '../common/showcase.component'; +import { buttonShowcase } from './type'; + +export class ButtonContainer extends React.Component { + + private renderItem = (props: ButtonProps): React.ReactElement => { + return ( + + ); + }; + + public render(): React.ReactNode { + return ( + + ); + } +} + +const styles = StyleSheet.create({ + component: { + flex: 1, + }, +}); + diff --git a/src/playground/src/ui/screen/button/type.tsx b/src/playground/src/ui/screen/button/type.tsx new file mode 100644 index 000000000..2e3fac8c1 --- /dev/null +++ b/src/playground/src/ui/screen/button/type.tsx @@ -0,0 +1,202 @@ +import React from 'react'; +import { Image } from 'react-native'; +import { + ComponentShowcase, + ComponentShowcaseItem, + ComponentShowcaseSection, +} from '../common/type'; +import { StyleType } from '@kitten/theme'; + +const defaultButton: ComponentShowcaseItem = { + title: 'Default', + props: {}, +}; + +const disabledButton: ComponentShowcaseItem = { + title: 'Disabled', + props: { + disabled: true, + }, +}; + +const leftIconButton: ComponentShowcaseItem = { + title: 'Left Icon', + props: { + icon: (style: StyleType) => + , + }, +}; + +const rightIconButton: ComponentShowcaseItem = { + title: 'Right Icon', + props: { + icon: (style: StyleType) => + , + style: { + flex: 1, + flexDirection: 'row-reverse', + }, + }, +}; + +const filledButton: ComponentShowcaseItem = { + title: 'Filled', + props: { + appearance: 'filled', + }, +}; + +const outlineButton: ComponentShowcaseItem = { + title: 'Outline', + props: { + appearance: 'outline', + }, +}; + +const ghostButton: ComponentShowcaseItem = { + title: 'Ghost', + props: { + appearance: 'ghost', + }, +}; + +const giantButton: ComponentShowcaseItem = { + title: 'Giant', + props: { + size: 'giant', + }, +}; + +const largeButton: ComponentShowcaseItem = { + title: 'Large', + props: { + size: 'large', + }, +}; + +const mediumButton: ComponentShowcaseItem = { + title: 'Medium', + props: { + size: 'medium', + }, +}; + +const smallButton: ComponentShowcaseItem = { + title: 'Small', + props: { + size: 'small', + }, +}; + +const tinyButton: ComponentShowcaseItem = { + title: 'Tiny', + props: { + size: 'tiny', + }, +}; + +const primaryButton: ComponentShowcaseItem = { + title: 'Primary', + props: { + status: 'primary', + }, +}; + +const successButton: ComponentShowcaseItem = { + title: 'Success', + props: { + status: 'success', + }, +}; + +const warningButton: ComponentShowcaseItem = { + title: 'Warning', + props: { + status: 'warning', + }, +}; + +const dangerButton: ComponentShowcaseItem = { + title: 'Danger', + props: { + status: 'danger', + }, +}; + +const infoButton: ComponentShowcaseItem = { + title: 'Info', + props: { + status: 'info', + }, +}; + +const whiteButton: ComponentShowcaseItem = { + title: 'White', + props: { + status: 'white', + }, +}; + +const stateSection: ComponentShowcaseSection = { + title: 'State', + items: [ + defaultButton, + disabledButton, + ], +}; + +const accessoriesSection: ComponentShowcaseSection = { + title: 'Accessories', + items: [ + leftIconButton, + rightIconButton, + ], +}; + +const appearanceSection: ComponentShowcaseSection = { + title: 'Appearance', + items: [ + filledButton, + outlineButton, + ghostButton, + ], +}; + +const sizeSection: ComponentShowcaseSection = { + title: 'Size', + items: [ + giantButton, + largeButton, + mediumButton, + smallButton, + tinyButton, + ], +}; + +const statusSection: ComponentShowcaseSection = { + title: 'Status', + items: [ + primaryButton, + successButton, + warningButton, + dangerButton, + infoButton, + whiteButton, + ], +}; + +export const buttonShowcase: ComponentShowcase = { + sections: [ + stateSection, + accessoriesSection, + appearanceSection, + sizeSection, + statusSection, + ], +}; diff --git a/src/playground/src/ui/screen/buttonGroup.component.tsx b/src/playground/src/ui/screen/buttonGroup.component.tsx index c7b8748af..da4bc13f2 100644 --- a/src/playground/src/ui/screen/buttonGroup.component.tsx +++ b/src/playground/src/ui/screen/buttonGroup.component.tsx @@ -17,6 +17,7 @@ import { Button, ButtonGroup, } from '@kitten/ui'; +import { ThemeConsumer } from '../themeConsumer'; type Props = & ThemedComponentProps & NavigationScreenProps; @@ -47,190 +48,192 @@ class ButtonGroupScreen extends React.Component { const { themedStyle } = this.props; return ( - - - Icon - - - - - - - - - - - - - - - - - - - - - - - - - - + + Text + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - Outline Icon + Text - - - - - - - - - - - - - - - - - - - - - - - - - - + + Outline Icon + Text + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - Status - - - - - - - - - - - - - - - - - - - - - - - - - - + + Status + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + ); } } @@ -238,6 +241,7 @@ class ButtonGroupScreen extends React.Component { export default withStyles(ButtonGroupScreen, (theme: ThemeType) => ({ container: { flex: 1, + backgroundColor: theme['background-color-default-1'], }, content: { paddingVertical: 8, diff --git a/src/playground/src/ui/screen/checkbox/checkbox.container.tsx b/src/playground/src/ui/screen/checkbox/checkbox.container.tsx new file mode 100644 index 000000000..5f97b7013 --- /dev/null +++ b/src/playground/src/ui/screen/checkbox/checkbox.container.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { NavigationScreenProps } from 'react-navigation'; +import { + CheckBox, + CheckBoxProps, +} from '@kitten/ui'; +import { Showcase } from '../common/showcase.component'; +import { checkboxShowcase } from './type'; + +export class CheckBoxContainer extends React.Component { + + private renderItem = (props: CheckBoxProps): React.ReactElement => { + return ( + + ); + }; + + public render(): React.ReactNode { + return ( + + ); + } +} diff --git a/src/playground/src/ui/screen/checkbox/type.ts b/src/playground/src/ui/screen/checkbox/type.ts new file mode 100644 index 000000000..76caa17f7 --- /dev/null +++ b/src/playground/src/ui/screen/checkbox/type.ts @@ -0,0 +1,158 @@ +import { + ComponentShowcase, + ComponentShowcaseItem, + ComponentShowcaseSection, +} from '../common/type'; + +const checkedCheckBox: ComponentShowcaseItem = { + title: 'Checked', + props: { + checked: true, + }, +}; + +const uncheckedCheckBox: ComponentShowcaseItem = { + title: 'Unchecked', + props: { + checked: false, + }, +}; + +const indeterminateCheckBox: ComponentShowcaseItem = { + title: 'Indeterminate', + props: { + indeterminate: true, + }, +}; + +const disabledCheckBox: ComponentShowcaseItem = { + title: 'Disabled', + props: { + disabled: true, + }, +}; + +const textCheckBox: ComponentShowcaseItem = { + title: 'Text', + props: { + text: 'Place your text', + }, +}; + +const giantCheckBox: ComponentShowcaseItem = { + title: 'Giant', + props: { + size: 'giant', + }, +}; + +const largeCheckBox: ComponentShowcaseItem = { + title: 'Large', + props: { + size: 'large', + }, +}; + +const mediumCheckBox: ComponentShowcaseItem = { + title: 'Medium', + props: { + size: 'medium', + }, +}; + +const smallCheckBox: ComponentShowcaseItem = { + title: 'Small', + props: { + size: 'small', + }, +}; + +const tinyCheckBox: ComponentShowcaseItem = { + title: 'Tiny', + props: { + size: 'tiny', + }, +}; + +const primaryCheckBox: ComponentShowcaseItem = { + title: 'Primary', + props: { + status: 'primary', + }, +}; + +const successCheckBox: ComponentShowcaseItem = { + title: 'Success', + props: { + status: 'success', + }, +}; + +const warningCheckBox: ComponentShowcaseItem = { + title: 'Warning', + props: { + status: 'warning', + }, +}; + +const dangerCheckBox: ComponentShowcaseItem = { + title: 'Danger', + props: { + status: 'danger', + }, +}; + +const infoCheckBox: ComponentShowcaseItem = { + title: 'info', + props: { + status: 'info', + }, +}; + +const stateSection: ComponentShowcaseSection = { + title: 'State', + items: [ + checkedCheckBox, + uncheckedCheckBox, + indeterminateCheckBox, + disabledCheckBox, + ], +}; + +const accessoriesSection: ComponentShowcaseSection = { + title: 'Accessories', + items: [ + textCheckBox, + ], +}; + +const sizeSection: ComponentShowcaseSection = { + title: 'Size', + items: [ + giantCheckBox, + largeCheckBox, + mediumCheckBox, + smallCheckBox, + tinyCheckBox, + ], +}; + +const statusSection: ComponentShowcaseSection = { + title: 'Status', + items: [ + primaryCheckBox, + successCheckBox, + warningCheckBox, + dangerCheckBox, + infoCheckBox, + ], +}; + +export const checkboxShowcase: ComponentShowcase = { + sections: [ + stateSection, + accessoriesSection, + sizeSection, + statusSection, + ], +}; diff --git a/src/playground/src/ui/screen/common/showcase.component.tsx b/src/playground/src/ui/screen/common/showcase.component.tsx new file mode 100644 index 000000000..46f8caa0c --- /dev/null +++ b/src/playground/src/ui/screen/common/showcase.component.tsx @@ -0,0 +1,81 @@ +import React from 'react'; +import { + ScrollView, + ViewStyle, +} from 'react-native'; +import { + ThemedComponentProps, + ThemeType, + withStyles, +} from '@kitten/theme'; +import { + ShowcaseSection, + ShowcaseSectionProps, +} from './showcaseSection.component'; +import { + ComponentShowcase, + ComponentShowcaseSection, +} from './type'; +import { ThemeConsumer } from '../../themeConsumer'; + +interface ComponentProps { + showcase: ComponentShowcase; + renderItem: (props: any) => React.ReactElement; +} + +export type ShowcaseProps = ThemedComponentProps & ComponentProps; + +type ListItemElement = React.ReactElement; + +class ShowcaseComponent extends React.Component { + + private renderSectionElement = (item: ComponentShowcaseSection): ListItemElement => { + return ( + + ); + }; + + private renderItem = (item: ComponentShowcaseSection, index: number): ListItemElement => { + const { themedStyle, showcase } = this.props; + + const listItemElement: ListItemElement = this.renderSectionElement(item); + + const borderStyle: ViewStyle | null = index === showcase.sections.length - 1 ? null : themedStyle.itemBorder; + + return React.cloneElement(listItemElement, { + key: index, + style: [themedStyle.item, borderStyle, listItemElement.props.style], + }); + }; + + public render(): React.ReactNode { + const { themedStyle, showcase } = this.props; + + return ( + + + {showcase.sections.map(this.renderItem)} + + + ); + } +} + +export const Showcase = withStyles(ShowcaseComponent, (theme: ThemeType) => ({ + container: { + flex: 1, + backgroundColor: theme['background-color-default-1'], + }, + item: { + paddingHorizontal: 24, + paddingVertical: 16, + }, + itemBorder: { + borderBottomWidth: 1, + borderBottomColor: theme['border-color-default-2'], + }, +})); + diff --git a/src/playground/src/ui/screen/common/showcaseItem.component.tsx b/src/playground/src/ui/screen/common/showcaseItem.component.tsx new file mode 100644 index 000000000..656583cf0 --- /dev/null +++ b/src/playground/src/ui/screen/common/showcaseItem.component.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { + View, + ViewProps, +} from 'react-native'; +import { + ThemedComponentProps, + ThemeType, + withStyles, +} from '@kitten/theme'; +import { Text } from '@kitten/ui'; +import { ComponentShowcaseItem } from './type'; + +interface ComponentProps { + item: ComponentShowcaseItem; + renderItem: (props: any) => React.ReactElement; +} + +export type ShowcaseItemProps = ThemedComponentProps & ViewProps & ComponentProps; + +class ShowcaseItemComponent extends React.Component { + + private renderElement = (): React.ReactElement => { + const { themedStyle, item, renderItem } = this.props; + + const element: React.ReactElement = renderItem(item.props); + + return React.cloneElement(element, { + style: [themedStyle.element, element.props.style], + }); + }; + + public render(): React.ReactNode { + const { style, themedStyle, item } = this.props; + + return ( + + {item.title} + {this.renderElement()} + + ); + } +} + +export const ShowcaseItem = withStyles(ShowcaseItemComponent, (theme: ThemeType) => ({ + container: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + titleLabel: { + minWidth: 128, + fontSize: 13, + }, + element: {}, +})); diff --git a/src/playground/src/ui/screen/common/showcaseSection.component.tsx b/src/playground/src/ui/screen/common/showcaseSection.component.tsx new file mode 100644 index 000000000..8f9273888 --- /dev/null +++ b/src/playground/src/ui/screen/common/showcaseSection.component.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { + View, + ViewProps, +} from 'react-native'; +import { + ThemedComponentProps, + ThemeType, + withStyles, +} from '@kitten/theme'; +import { Text } from '@kitten/ui'; +import { + ShowcaseItem, + ShowcaseItemProps, +} from './showcaseItem.component'; +import { + ComponentShowcaseItem, + ComponentShowcaseSection as ComponentShowcaseSectionModel, +} from './type'; + +interface ComponentProps { + section: ComponentShowcaseSectionModel; + renderItem: (props: any) => React.ReactElement; +} + +export type ShowcaseSectionProps = ThemedComponentProps & ViewProps & ComponentProps; + +class ShowcaseSectionComponent extends React.Component { + + private renderItem = (item: ComponentShowcaseItem, index: number): React.ReactElement => { + const { themedStyle, renderItem } = this.props; + + return ( + + ); + }; + + public render(): React.ReactNode { + const { style, themedStyle, section } = this.props; + + return ( + + {section.title} + {section.items.map(this.renderItem)} + + ); + } +} + +export const ShowcaseSection = withStyles(ShowcaseSectionComponent, (theme: ThemeType) => ({ + container: {}, + titleLabel: { + marginVertical: 8, + fontSize: 20, + lineHeight: 28, + }, + item: { + marginVertical: 8, + }, +})); diff --git a/src/playground/src/ui/screen/common/type.ts b/src/playground/src/ui/screen/common/type.ts new file mode 100644 index 000000000..1ba83d179 --- /dev/null +++ b/src/playground/src/ui/screen/common/type.ts @@ -0,0 +1,13 @@ +export interface ComponentShowcase { + sections: ComponentShowcaseSection[]; +} + +export interface ComponentShowcaseSection { + title: string; + items: ComponentShowcaseItem[]; +} + +export interface ComponentShowcaseItem { + title: string; + props: any; +} diff --git a/src/playground/src/ui/screen/home.component.tsx b/src/playground/src/ui/screen/home.component.tsx index 44285403f..e57b6a40d 100644 --- a/src/playground/src/ui/screen/home.component.tsx +++ b/src/playground/src/ui/screen/home.component.tsx @@ -13,11 +13,11 @@ import { withStyles, } from '@kitten/theme'; import { - NavigatorProps, + routes, RouteType, } from '../../navigation'; -type Props = NavigatorProps & ThemedComponentProps & NavigationScreenProps; +type Props = ThemedComponentProps & NavigationScreenProps; class HomeScreen extends React.Component { @@ -47,7 +47,7 @@ class HomeScreen extends React.Component { ); diff --git a/src/playground/src/ui/screen/index.ts b/src/playground/src/ui/screen/index.ts index 0c9d97919..00a3f2fc8 100644 --- a/src/playground/src/ui/screen/index.ts +++ b/src/playground/src/ui/screen/index.ts @@ -1,21 +1,27 @@ -export { default as Avatar } from './avatar.component'; +// export { default as Avatar } from './avatar.component'; +export { AvatarContainer as Avatar} from './avatar/avatar.container'; export { default as BottomNavigation } from './bottomNavigation.component'; -export { default as Button } from './button.component'; +// export { default as Button } from './button.component'; +export { ButtonContainer as Button } from './button/button.container'; export { default as ButtonGroup } from './buttonGroup.component'; -export { default as CheckBox } from './checkbox.component'; +// export { default as CheckBox } from './checkbox.component'; +export { CheckBoxContainer as Checkbox} from './checkbox/checkbox.container'; export { default as Dialog } from './dialog.component'; export { default as Home } from './home.component'; -export { default as Input } from './input.component'; +// export { default as Input } from './input.component'; +export { InputContainer as Input } from './input/input.container'; export { default as Layout } from './layout.component'; export { default as List } from './list.component'; export { default as Popover } from './popover.component'; -export { default as Radio } from './radio.component'; +// export { default as Radio } from './radio.component'; +export { RadioContainer as Radio } from './radio/radio.container'; export { default as RadioGroup } from './radioGroup.component'; export { default as TabBar } from './tabBar.component'; export { default as TabView } from './tabView.component'; export { default as Tooltip } from './tooltip.component'; export { default as Text } from './text.component'; -export { default as Toggle } from './toggle.component'; +// export { default as Toggle } from './toggle.component'; +export { ToggleContainer as Toggle } from './toggle/toggle.container'; export { default as ViewPager } from './viewPager.component'; export { default as TopNavigation } from './topNavigation.component'; export { default as Modal } from './modal.component'; diff --git a/src/playground/src/ui/screen/input/input.container.tsx b/src/playground/src/ui/screen/input/input.container.tsx new file mode 100644 index 000000000..9a4a9752e --- /dev/null +++ b/src/playground/src/ui/screen/input/input.container.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { NavigationScreenProps } from 'react-navigation'; +import { + Input, + InputProps, +} from '@kitten/ui'; +import { Showcase } from '../common/showcase.component'; +import { inputShowcase } from './type'; +import { StyleSheet } from 'react-native'; + +export class InputContainer extends React.Component { + + private renderItem = (props: InputProps): React.ReactElement => { + return ( + + ); + }; + + public render(): React.ReactNode { + return ( + + ); + } +} + +const styles = StyleSheet.create({ + component: { + flex: 1, + }, +}); + diff --git a/src/playground/src/ui/screen/input/type.tsx b/src/playground/src/ui/screen/input/type.tsx new file mode 100644 index 000000000..05a9df21e --- /dev/null +++ b/src/playground/src/ui/screen/input/type.tsx @@ -0,0 +1,130 @@ +import React from 'react'; +import { Image } from 'react-native'; +import { StyleType } from '@kitten/theme'; +import { + ComponentShowcase, + ComponentShowcaseItem, + ComponentShowcaseSection, +} from '../common/type'; + + +const defaultInput: ComponentShowcaseItem = { + title: 'Default', + props: {}, +}; + +const disabledInput: ComponentShowcaseItem = { + title: 'Disabled', + props: { + disabled: true, + }, +}; + +const iconInput: ComponentShowcaseItem = { + title: 'Icon', + props: { + icon: (style: StyleType) => + , + }, +}; + +const labelInput: ComponentShowcaseItem = { + title: 'Label', + props: { + label: 'Place your text', + }, +}; + +const captionInput: ComponentShowcaseItem = { + title: 'Caption', + props: { + caption: 'Place your text', + }, +}; + +const captionIconInput: ComponentShowcaseItem = { + title: 'Caption Icon', + props: { + caption: 'Place your text', + captionIcon: (style: StyleType) => + , + }, +}; + +const primaryInput: ComponentShowcaseItem = { + title: 'Primary', + props: { + status: 'primary', + }, +}; + +const successInput: ComponentShowcaseItem = { + title: 'Success', + props: { + status: 'success', + }, +}; + +const warningInput: ComponentShowcaseItem = { + title: 'Warning', + props: { + status: 'warning', + }, +}; + +const dangerInput: ComponentShowcaseItem = { + title: 'Danger', + props: { + status: 'danger', + }, +}; + +const infoInput: ComponentShowcaseItem = { + title: 'Info', + props: { + status: 'info', + }, +}; + +const stateSection: ComponentShowcaseSection = { + title: 'State', + items: [ + defaultInput, + disabledInput, + ], +}; + +const accessoriesSection: ComponentShowcaseSection = { + title: 'Accessories', + items: [ + iconInput, + labelInput, + captionInput, + captionIconInput, + ], +}; + +const statusSection: ComponentShowcaseSection = { + title: 'Status', + items: [ + primaryInput, + successInput, + warningInput, + dangerInput, + infoInput, + ], +}; + +export const inputShowcase: ComponentShowcase = { + sections: [ + stateSection, + accessoriesSection, + statusSection, + ], +}; diff --git a/src/playground/src/ui/screen/layout.component.tsx b/src/playground/src/ui/screen/layout.component.tsx index a7f28b4ee..397dfd19c 100644 --- a/src/playground/src/ui/screen/layout.component.tsx +++ b/src/playground/src/ui/screen/layout.component.tsx @@ -13,6 +13,7 @@ import { Layout, Text, } from '@kitten/ui'; +import { ThemeConsumer } from '../themeConsumer'; type Props = & ThemedComponentProps & NavigationScreenProps; @@ -24,22 +25,26 @@ class LayoutScreen extends React.Component { public render(): React.ReactElement { return ( - - - Layout - - + + + + Layout + + + ); } } export default withStyles(LayoutScreen, (theme: ThemeType) => ({ container: { + flex: 1, + backgroundColor: theme['background-color-default-1'], paddingVertical: 8, paddingHorizontal: 16, }, layout: { height: 300, - backgroundColor: '#fff8e0', + backgroundColor: theme['background-color-default-2'], }, })); diff --git a/src/playground/src/ui/screen/list.component.tsx b/src/playground/src/ui/screen/list.component.tsx index 71bde16ae..6975dfc7c 100644 --- a/src/playground/src/ui/screen/list.component.tsx +++ b/src/playground/src/ui/screen/list.component.tsx @@ -11,6 +11,7 @@ import { ListItemProps, } from '@kitten/ui'; import { ListItemIconAccessoryShowcase as ListItem } from './listItem.showcase.component'; +import { ThemeConsumer } from '../themeConsumer'; interface ListItemModel { title: string; @@ -55,10 +56,12 @@ class ListScreen extends React.Component { public render(): React.ReactNode { return ( - + + + ); } } diff --git a/src/playground/src/ui/screen/overflowMenu.component.tsx b/src/playground/src/ui/screen/overflowMenu.component.tsx index b3354ca0e..afc83b645 100644 --- a/src/playground/src/ui/screen/overflowMenu.component.tsx +++ b/src/playground/src/ui/screen/overflowMenu.component.tsx @@ -17,6 +17,7 @@ import { OverflowMenu, OverflowMenuItemType, } from '@kitten/ui'; +import { ThemeConsumer } from '../themeConsumer'; type Props = & ThemedComponentProps & NavigationScreenProps; @@ -87,66 +88,68 @@ class OverflowMenuScreen extends React.Component { public render(): React.ReactNode { return ( - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - + ); } } @@ -156,16 +159,13 @@ export default withStyles(OverflowMenuScreen, (theme: ThemeType) => ({ flex: 1, paddingVertical: 8, paddingHorizontal: 16, - backgroundColor: '#DDE1EB', + backgroundColor: theme['background-color-default-1'], }, innerContainer: { flex: 1, flexDirection: 'row', justifyContent: 'space-between', }, - bottomContainer: { - alignItems: 'flex-end', - }, menu: { width: 300, }, @@ -174,8 +174,11 @@ export default withStyles(OverflowMenuScreen, (theme: ThemeType) => ({ height: 30, tintColor: '#3366FF', }, - menuContainer: { + menuContainerStart: { alignSelf: 'flex-start', }, + menuContainerEnd: { + alignSelf: 'flex-end', + }, })); diff --git a/src/playground/src/ui/screen/popover.component.tsx b/src/playground/src/ui/screen/popover.component.tsx index a2b5d3a75..8bb6cf7a8 100644 --- a/src/playground/src/ui/screen/popover.component.tsx +++ b/src/playground/src/ui/screen/popover.component.tsx @@ -12,6 +12,7 @@ import { ThemeType, } from '@kitten/theme'; import { Popover } from '@kitten/ui'; +import { ThemeConsumer } from '../themeConsumer'; type Props = & ThemedComponentProps & NavigationScreenProps; @@ -65,50 +66,52 @@ class PopoverScreen extends React.Component { const { container, componentContainer, component, tip, text } = this.props.themedStyle; return ( - - - - - {`${PLACEMENT} start`.toUpperCase()} - - + + + + + + {`${PLACEMENT} start`.toUpperCase()} + + + + + + + {`${PLACEMENT}`.toUpperCase()} + + + + + + + {`${PLACEMENT} end`.toUpperCase()} + + + - - - - {`${PLACEMENT}`.toUpperCase()} - - - - - - - {`${PLACEMENT} end`.toUpperCase()} - - - - + ); } } @@ -116,9 +119,9 @@ class PopoverScreen extends React.Component { export default withStyles(PopoverScreen, (theme: ThemeType) => ({ container: { flex: 1, + backgroundColor: theme['background-color-default-1'], alignItems: 'center', justifyContent: 'center', - backgroundColor: 'lightgray', }, componentContainer: { margin: 32, diff --git a/src/playground/src/ui/screen/radio/radio.container.tsx b/src/playground/src/ui/screen/radio/radio.container.tsx new file mode 100644 index 000000000..c025b19c8 --- /dev/null +++ b/src/playground/src/ui/screen/radio/radio.container.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { NavigationScreenProps } from 'react-navigation'; +import { + Radio, + RadioProps, +} from '@kitten/ui'; +import { Showcase } from '../common/showcase.component'; +import { radioShowcase } from './type'; + +export class RadioContainer extends React.Component { + + private renderItem = (props: RadioProps): React.ReactElement => { + return ( + + ); + }; + + public render(): React.ReactNode { + return ( + + ); + } +} diff --git a/src/playground/src/ui/screen/radio/type.ts b/src/playground/src/ui/screen/radio/type.ts new file mode 100644 index 000000000..740087a77 --- /dev/null +++ b/src/playground/src/ui/screen/radio/type.ts @@ -0,0 +1,150 @@ +import { + ComponentShowcase, + ComponentShowcaseItem, + ComponentShowcaseSection, +} from '../common/type'; + +const checkedRadio: ComponentShowcaseItem = { + title: 'Checked', + props: { + checked: true, + }, +}; + +const uncheckedRadio: ComponentShowcaseItem = { + title: 'Unchecked', + props: { + checked: false, + }, +}; + +const disabledRadio: ComponentShowcaseItem = { + title: 'Disabled', + props: { + disabled: true, + }, +}; + +const textRadio: ComponentShowcaseItem = { + title: 'Text', + props: { + text: 'Place your text', + }, +}; + +const giantRadio: ComponentShowcaseItem = { + title: 'Giant', + props: { + size: 'giant', + }, +}; + +const largeRadio: ComponentShowcaseItem = { + title: 'Large', + props: { + size: 'large', + }, +}; + +const mediumRadio: ComponentShowcaseItem = { + title: 'Medium', + props: { + size: 'medium', + }, +}; + +const smallRadio: ComponentShowcaseItem = { + title: 'Small', + props: { + size: 'small', + }, +}; + +const tinyRadio: ComponentShowcaseItem = { + title: 'Tiny', + props: { + size: 'tiny', + }, +}; + +const primaryRadio: ComponentShowcaseItem = { + title: 'Primary', + props: { + status: 'primary', + }, +}; + +const successRadio: ComponentShowcaseItem = { + title: 'Success', + props: { + status: 'success', + }, +}; + +const warningRadio: ComponentShowcaseItem = { + title: 'Warning', + props: { + status: 'warning', + }, +}; + +const dangerRadio: ComponentShowcaseItem = { + title: 'Danger', + props: { + status: 'danger', + }, +}; + +const infoRadio: ComponentShowcaseItem = { + title: 'Info', + props: { + status: 'info', + }, +}; + +const stateSection: ComponentShowcaseSection = { + title: 'State', + items: [ + checkedRadio, + uncheckedRadio, + disabledRadio, + ], +}; + +const accessoriesSection: ComponentShowcaseSection = { + title: 'Accessories', + items: [ + textRadio, + ], +}; + +const sizeSection: ComponentShowcaseSection = { + title: 'Size', + items: [ + giantRadio, + largeRadio, + mediumRadio, + smallRadio, + tinyRadio, + ], +}; + +const statusSection: ComponentShowcaseSection = { + title: 'Status', + items: [ + primaryRadio, + successRadio, + warningRadio, + dangerRadio, + infoRadio, + ], +}; + +export const radioShowcase: ComponentShowcase = { + sections: [ + stateSection, + accessoriesSection, + sizeSection, + statusSection, + ], +}; diff --git a/src/playground/src/ui/screen/radioGroup.component.tsx b/src/playground/src/ui/screen/radioGroup.component.tsx index 2160a740b..090360b83 100644 --- a/src/playground/src/ui/screen/radioGroup.component.tsx +++ b/src/playground/src/ui/screen/radioGroup.component.tsx @@ -13,6 +13,7 @@ import { RadioGroup, Radio, } from '@kitten/ui'; +import { ThemeConsumer } from '../themeConsumer'; type Props = & ThemedComponentProps & NavigationScreenProps; @@ -54,60 +55,64 @@ class RadioGroupScreen extends React.Component { public render(): React.ReactNode { return ( - - - Vertical - - - - - + + + + Vertical + + + + + + - - - Horizontal - - - - - + + Horizontal + + + + + + - - - Danger - - - - - - + + Danger + + + + + + + - + ); } } export default withStyles(RadioGroupScreen, (theme: ThemeType) => ({ container: { + flex: 1, + backgroundColor: theme['background-color-default-1'], paddingVertical: 8, paddingHorizontal: 16, }, diff --git a/src/playground/src/ui/screen/tabBar.component.tsx b/src/playground/src/ui/screen/tabBar.component.tsx index c26850007..dde1e6d8d 100644 --- a/src/playground/src/ui/screen/tabBar.component.tsx +++ b/src/playground/src/ui/screen/tabBar.component.tsx @@ -13,6 +13,7 @@ import { TabBar, Tab, } from '@kitten/ui'; +import { ThemeConsumer } from '../themeConsumer'; type Props = & ThemedComponentProps & NavigationScreenProps; @@ -51,45 +52,49 @@ class TabBarScreen extends React.Component { public render(): React.ReactNode { return ( - - - Default - - - - - - + + + + Default + + + + + + + - - - Custom - - - - - - + + Custom + + + + + + + - + ); } } export default withStyles(TabBarScreen, (theme: ThemeType) => ({ container: { + flex: 1, + backgroundColor: theme['background-color-default-1'], paddingVertical: 8, paddingHorizontal: 16, }, diff --git a/src/playground/src/ui/screen/tabView.component.tsx b/src/playground/src/ui/screen/tabView.component.tsx index 6d8848d0b..34d92f335 100644 --- a/src/playground/src/ui/screen/tabView.component.tsx +++ b/src/playground/src/ui/screen/tabView.component.tsx @@ -10,11 +10,13 @@ import { withStyles, ThemedComponentProps, StyleType, + ThemeType, } from '@kitten/theme'; import { Tab, TabView, } from '@kitten/ui'; +import { ThemeConsumer } from '../themeConsumer'; type Props = & ThemedComponentProps & NavigationScreenProps; @@ -50,34 +52,37 @@ class TabViewScreen extends React.Component { public render(): React.ReactNode { return ( - - - Tab 1 - - - Tab 2 - - - Tab 3 - - + + + + Tab 1 + + + Tab 2 + + + Tab 3 + + + ); } } -export default withStyles(TabViewScreen, () => ({ +export default withStyles(TabViewScreen, (theme: ThemeType) => ({ container: { flex: 1, + backgroundColor: theme['background-color-default-1'], }, icon: { width: 30, diff --git a/src/playground/src/ui/screen/text.component.tsx b/src/playground/src/ui/screen/text.component.tsx index 4f375a83d..a66e0200e 100644 --- a/src/playground/src/ui/screen/text.component.tsx +++ b/src/playground/src/ui/screen/text.component.tsx @@ -7,6 +7,7 @@ import { ThemedComponentProps, } from '@kitten/theme'; import { Text } from '@kitten/ui'; +import { ThemeConsumer } from '../themeConsumer'; type Props = & ThemedComponentProps & NavigationScreenProps; @@ -20,28 +21,32 @@ class TextScreen extends React.Component { const { container, component } = this.props.themedStyle; return ( - - H1 - H2 - H3 - H4 - H5 - H6 - S1 - S2 - C1 - C2 - P1 - P2 - OVERLINE - LABEL - + + + H1 + H2 + H3 + H4 + H5 + H6 + S1 + S2 + C1 + C2 + P1 + P2 + OVERLINE + LABEL + + ); } } export default withStyles(TextScreen, (theme: ThemeType) => ({ container: { + flex: 1, + backgroundColor: theme['background-color-default-1'], paddingVertical: 8, paddingHorizontal: 16, }, diff --git a/src/playground/src/ui/screen/toggle/toggle.container.tsx b/src/playground/src/ui/screen/toggle/toggle.container.tsx new file mode 100644 index 000000000..4e434706a --- /dev/null +++ b/src/playground/src/ui/screen/toggle/toggle.container.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { NavigationScreenProps } from 'react-navigation'; +import { + Toggle, + ToggleProps, +} from '@kitten/ui'; +import { Showcase } from '../common/showcase.component'; +import { toggleShowcase } from './type'; + +export class ToggleContainer extends React.Component { + + private renderItem = (props: ToggleProps): React.ReactElement => { + return ( + + ); + }; + + public render(): React.ReactNode { + return ( + + ); + } +} diff --git a/src/playground/src/ui/screen/toggle/type.ts b/src/playground/src/ui/screen/toggle/type.ts new file mode 100644 index 000000000..29b1102a3 --- /dev/null +++ b/src/playground/src/ui/screen/toggle/type.ts @@ -0,0 +1,135 @@ +import { + ComponentShowcase, + ComponentShowcaseItem, + ComponentShowcaseSection, +} from '../common/type'; + +const checkedToggle: ComponentShowcaseItem = { + title: 'Checked', + props: { + checked: true, + }, +}; + +const uncheckedToggle: ComponentShowcaseItem = { + title: 'Unchecked', + props: { + checked: false, + }, +}; + +const disabledToggle: ComponentShowcaseItem = { + title: 'Disabled', + props: { + disabled: true, + }, +}; + +const giantToggle: ComponentShowcaseItem = { + title: 'Giant', + props: { + size: 'giant', + }, +}; + +const largeToggle: ComponentShowcaseItem = { + title: 'Large', + props: { + size: 'large', + }, +}; + +const mediumToggle: ComponentShowcaseItem = { + title: 'Medium', + props: { + size: 'medium', + }, +}; + +const smallToggle: ComponentShowcaseItem = { + title: 'Small', + props: { + size: 'small', + }, +}; + +const tinyToggle: ComponentShowcaseItem = { + title: 'Tiny', + props: { + size: 'tiny', + }, +}; + +const primaryToggle: ComponentShowcaseItem = { + title: 'Primary', + props: { + status: 'primary', + }, +}; + +const successToggle: ComponentShowcaseItem = { + title: 'Success', + props: { + status: 'success', + }, +}; + +const warningToggle: ComponentShowcaseItem = { + title: 'Warning', + props: { + status: 'warning', + }, +}; + +const dangerToggle: ComponentShowcaseItem = { + title: 'Danger', + props: { + status: 'danger', + }, +}; + +const infoToggle: ComponentShowcaseItem = { + title: 'Info', + props: { + status: 'info', + }, +}; + +const stateSection: ComponentShowcaseSection = { + title: 'State', + items: [ + checkedToggle, + uncheckedToggle, + disabledToggle, + ], +}; + +const sizeSection: ComponentShowcaseSection = { + title: 'Size', + items: [ + giantToggle, + largeToggle, + mediumToggle, + smallToggle, + tinyToggle, + ], +}; + +const statusSection: ComponentShowcaseSection = { + title: 'Status', + items: [ + primaryToggle, + successToggle, + warningToggle, + dangerToggle, + infoToggle, + ], +}; + +export const toggleShowcase: ComponentShowcase = { + sections: [ + stateSection, + sizeSection, + statusSection, + ], +}; diff --git a/src/playground/src/ui/screen/tooltip.component.tsx b/src/playground/src/ui/screen/tooltip.component.tsx index 3a3f44b78..82fc7361f 100644 --- a/src/playground/src/ui/screen/tooltip.component.tsx +++ b/src/playground/src/ui/screen/tooltip.component.tsx @@ -15,6 +15,7 @@ import { StyleType, } from '@kitten/theme'; import { Tooltip } from '@kitten/ui'; +import { ThemeConsumer } from '../themeConsumer'; type Props = & ThemedComponentProps & NavigationScreenProps; @@ -85,65 +86,67 @@ class TooltipScreen extends React.Component { } = this.props.themedStyle; return ( - - - - - {`${PLACEMENT} start`.toUpperCase()} - - + + + + + + {`${PLACEMENT} start`.toUpperCase()} + + + + + + + {`${PLACEMENT}`.toUpperCase()} + + + + + + + {`${PLACEMENT} end`.toUpperCase()} + + + + + + + WITH ICON + + + - - - - {`${PLACEMENT}`.toUpperCase()} - - - - - - - {`${PLACEMENT} end`.toUpperCase()} - - - - - - - WITH ICON - - - - + ); } } @@ -151,6 +154,7 @@ class TooltipScreen extends React.Component { export default withStyles(TooltipScreen, (theme: ThemeType) => ({ container: { flex: 1, + backgroundColor: theme['background-color-default-1'], alignItems: 'center', justifyContent: 'center', }, diff --git a/src/playground/src/ui/screen/topNavigation.component.tsx b/src/playground/src/ui/screen/topNavigation.component.tsx index d8933b202..7f2563944 100644 --- a/src/playground/src/ui/screen/topNavigation.component.tsx +++ b/src/playground/src/ui/screen/topNavigation.component.tsx @@ -21,6 +21,7 @@ import { TopNavigationAction, TopNavigationActionProps, } from '@kitten/ui'; +import { ThemeConsumer } from '../themeConsumer'; type Props = & ThemedComponentProps & NavigationScreenProps; @@ -69,9 +70,11 @@ class TopNavigationScreen extends React.Component { public render(): React.ReactNode { return ( - - Top Navigation Bar Demo - + + + Top Navigation Bar Demo + + ); } } diff --git a/src/playground/src/ui/screen/viewPager.component.tsx b/src/playground/src/ui/screen/viewPager.component.tsx index 1212003d2..4930e37a5 100644 --- a/src/playground/src/ui/screen/viewPager.component.tsx +++ b/src/playground/src/ui/screen/viewPager.component.tsx @@ -10,6 +10,7 @@ import { ThemeType, } from '@kitten/theme'; import { ViewPager } from '@kitten/ui'; +import { ThemeConsumer } from '../themeConsumer'; type Props = & ThemedComponentProps & NavigationScreenProps; @@ -37,21 +38,23 @@ class ViewPagerScreen extends React.Component { public render(): React.ReactNode { return ( - - - Tab 1 - - - Tab 2 - - - Tab 3 - - + + + + Tab 1 + + + Tab 2 + + + Tab 3 + + + ); } } @@ -59,6 +62,8 @@ class ViewPagerScreen extends React.Component { export default withStyles(ViewPagerScreen, (theme: ThemeType) => ({ container: { padding: 16, + flex: 1, + backgroundColor: theme['background-color-default-1'], }, tabContainer: { flex: 1, diff --git a/src/playground/src/ui/themeConsumer.tsx b/src/playground/src/ui/themeConsumer.tsx new file mode 100644 index 000000000..d78cf19e9 --- /dev/null +++ b/src/playground/src/ui/themeConsumer.tsx @@ -0,0 +1,90 @@ +import React from 'react'; +import { + View, + ViewProps, + StyleSheet, + ImageProps, + Image, +} from 'react-native'; +import { Button } from '@kitten/ui'; +import { ThemeContext } from './themeContext'; +import { StyleType, ThemedComponentProps, ThemeType, withStyles } from '@kitten/theme'; + +interface Props extends ThemedComponentProps { + children: React.ReactElement; +} + +export class ThemeConsumerComponent extends React.Component { + + private isThemeButtonDisabled = (currentTheme: string, buttonResponsibility: string): boolean => { + if (currentTheme === 'light' && buttonResponsibility === 'light') { + return true; + } else if (currentTheme === 'dark' && buttonResponsibility === 'light') { + return false; + } else if (currentTheme === 'light' && buttonResponsibility === 'dark') { + return false; + } else if (currentTheme === 'dark' && buttonResponsibility === 'dark') { + return true; + } + }; + + private renderThemeButtonIcon = (style: StyleType, + disabled: boolean): React.ReactElement => { + + const iconUri: string = disabled ? + 'https://akveo.github.io/eva-icons/fill/png/128/checkmark.png' : + 'https://akveo.github.io/eva-icons/fill/png/128/plus.png'; + + return ( + + ); + }; + + private renderContent = ({ currentTheme, toggleTheme }): React.ReactElement => { + const lightBtnDis: boolean = this.isThemeButtonDisabled(currentTheme, 'light'); + const darkBtnDis: boolean = this.isThemeButtonDisabled(currentTheme, 'dark'); + + return ( + + + + + + {this.props.children} + + ); + }; + + public render(): React.ReactNode { + return ( + + {this.renderContent} + + ); + } +} + +export const ThemeConsumer = withStyles(ThemeConsumerComponent, (theme: ThemeType) => ({ + container: { + flex: 1, + }, + themeButtonsContainer: { + flexDirection: 'row', + justifyContent: 'space-evenly', + paddingVertical: 16, + backgroundColor: theme['background-color-default-2'], + }, +})); diff --git a/src/playground/src/ui/themeContext.ts b/src/playground/src/ui/themeContext.ts new file mode 100644 index 000000000..40a82c1f9 --- /dev/null +++ b/src/playground/src/ui/themeContext.ts @@ -0,0 +1,11 @@ +import React from 'react'; + +export interface ContextType { + currentTheme: 'light' | 'dark'; + toggleTheme: (theme: string) => void; +} + +export const ThemeContext: React.Context = React.createContext({ + currentTheme: 'light', + toggleTheme: (theme: 'light' | 'dark') => {}, +});