diff --git a/docs/src/app/@theme/services/tabbed.service.ts b/docs/src/app/@theme/services/tabbed.service.ts index 9b2b3e828..3ef923293 100644 --- a/docs/src/app/@theme/services/tabbed.service.ts +++ b/docs/src/app/@theme/services/tabbed.service.ts @@ -45,6 +45,10 @@ export class NgdTabbedService { return component.types && component.types.length > 0; } + componentHasParams(component: any): boolean { + return component.params && component.params.length > 0; + } + componentHasMethods(component): boolean { return component && component.methods && diff --git a/docs/src/app/blocks/blocks.module.ts b/docs/src/app/blocks/blocks.module.ts index ba9c25961..372fb0e59 100644 --- a/docs/src/app/blocks/blocks.module.ts +++ b/docs/src/app/blocks/blocks.module.ts @@ -31,6 +31,7 @@ import { NgdPagerBlockComponent, NgdComponentsOverviewBlockComponent, NgdTypesBlockComponent, + NgdHocParamsBlockComponent, } from './components/'; const blocks = [ @@ -55,6 +56,7 @@ const blocks = [ NgdPagerBlockComponent, NgdComponentsOverviewBlockComponent, NgdTypesBlockComponent, + NgdHocParamsBlockComponent, ]; @NgModule({ diff --git a/docs/src/app/blocks/components/api-block/api-block.component.ts b/docs/src/app/blocks/components/api-block/api-block.component.ts index 753f242bb..67d87ef50 100644 --- a/docs/src/app/blocks/components/api-block/api-block.component.ts +++ b/docs/src/app/blocks/components/api-block/api-block.component.ts @@ -20,6 +20,7 @@ import { NgdTabbedService } from '../../../@theme/services'; + `, @@ -44,4 +45,8 @@ export class NgdApiBlockComponent { hasTypes(component): boolean { return this.tabbedService.componentHasTypes(component); } + + hasParams(component: any): boolean { + return this.tabbedService.componentHasParams(component); + } } diff --git a/docs/src/app/blocks/components/hoc-params-block/hoc-params-block.component.ts b/docs/src/app/blocks/components/hoc-params-block/hoc-params-block.component.ts new file mode 100644 index 000000000..4b32e3c57 --- /dev/null +++ b/docs/src/app/blocks/components/hoc-params-block/hoc-params-block.component.ts @@ -0,0 +1,39 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { + ChangeDetectionStrategy, + Component, + Input, +} from '@angular/core'; +import { NgdMetadataService } from '../../../@theme/services'; + +@Component({ + selector: 'ngd-hoc-params-block', + template: ` + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class NgdHocParamsBlockComponent { + slag: string; + + params: any[] = []; + + @Input('source') + set setSource(source: any) { + this.params = source.params; + this.slag = source.slag; + } + + constructor(private metadataService: NgdMetadataService) { + } +} diff --git a/docs/src/app/blocks/components/index.ts b/docs/src/app/blocks/components/index.ts index df50cc121..1fdce1ffc 100644 --- a/docs/src/app/blocks/components/index.ts +++ b/docs/src/app/blocks/components/index.ts @@ -19,3 +19,4 @@ export * from './examples-block/examples-block.component'; export * from './pager-block/pager-block.component'; export * from './components-overview-block/components-overview-block.component'; export * from './types-block/types-block.component'; +export * from './hoc-params-block/hoc-params-block.component'; diff --git a/docs/src/app/blocks/components/overview-block/overview-block.component.ts b/docs/src/app/blocks/components/overview-block/overview-block.component.ts index 7d5560585..aa994e4c6 100644 --- a/docs/src/app/blocks/components/overview-block/overview-block.component.ts +++ b/docs/src/app/blocks/components/overview-block/overview-block.component.ts @@ -31,22 +31,7 @@ export class NgdOverviewBlockComponent { @Input('source') set setSource(source: any) { - this.source = this.prepareDescription(source); + this.source = source; } - private prepareDescription(source: any): any { - const description: string = source.description; - source.description = description - .replace(/./g, (character: string, index: number) => { - if (index === description.indexOf('`')) { - return ''; - } else if (index === description.lastIndexOf('`')) { - return ''; - } else { - return character; - - } - }); - return source; - } } diff --git a/docs/src/guides/theme-switching.md b/docs/src/guides/theme-switching.md new file mode 100644 index 000000000..49a4d749b --- /dev/null +++ b/docs/src/guides/theme-switching.md @@ -0,0 +1,55 @@ +# React Native UI Kitten Theme Switching + +React Native UI Kitten Theme System allows the developer to change the theme. +To do this, it is enough to replace the configuration object of the `theme` and pass it +through the property into the `ApplicationProvider`. + +
+ +### Changing Theme Example + +```tsx +import { mapping } from '@eva/eva'; +import { theme } from '@eva/theme-eva'; +import { customTheme } from './path-to/custom-theme; +import { + ApplicationProvider, + ThemeType, +} from '@kitten/theme'; +import { Application } from './path-to/root.component'; + +interface AppState { + theme: ThemeType; +} + +export default class App extends React.Component { + + public state: State = { + theme: theme, + }; + + private changeTheme = (): void => { + this.setState({ theme: customTheme }); + } + + public render(): React.ReactNode { + return ( + + + + ); + } +} +``` + +
+ +### Other theme management options + +This is not the only way to change the `theme` of the application. It is also possible to use one of the libraries that provide state management services, such as: + +- [MobX](https://mobx.js.org/getting-started.html) +- [Redux](https://redux.js.org/) + diff --git a/docs/src/structure.ts b/docs/src/structure.ts index f52193832..7bacd87cd 100644 --- a/docs/src/structure.ts +++ b/docs/src/structure.ts @@ -75,6 +75,17 @@ export const structure = [ }, ], }, + { + type: 'page', + name: 'Theme Switching', + children: [ + { + type: 'block', + block: 'markdown', + source: 'theme-switching.md', + }, + ], + }, ], }, { @@ -91,6 +102,34 @@ export const structure = [ }, ], }, + { + type: 'group', + name: 'Styling & Theming', + }, + { + type: 'tabs', + name: 'ApplicationProvider', + icon: 'layout.svg', + source: [ + 'ApplicationProvider', + ], + }, + { + type: 'tabs', + name: 'styled', + icon: 'layout.svg', + source: [ + 'styled', + ], + }, + { + type: 'tabs', + name: 'withStyles', + icon: 'layout.svg', + source: [ + 'withStyles', + ], + }, { type: 'group', name: 'Global', @@ -171,6 +210,14 @@ export const structure = [ 'Radio', ], }, + { + type: 'tabs', + name: 'RadioGroup', + icon: 'radio.svg', + source: [ + 'RadioGroup', + ], + }, { type: 'tabs', name: 'Toggle', diff --git a/src/framework/theme/application/applicationProvider.component.tsx b/src/framework/theme/application/applicationProvider.component.tsx index cc63423db..666290a5f 100644 --- a/src/framework/theme/application/applicationProvider.component.tsx +++ b/src/framework/theme/application/applicationProvider.component.tsx @@ -33,20 +33,20 @@ interface State { * The `ApplicationProvider` component is designed to be a root of the application. * * This does basically two things: - * - Provides styles for react-native-ui-kitten basic components (e.g `Button`); + * - Provides styles for react-native-ui-kitten basic components (e.g 'Button'); * - Renders modal window which is used to be common for all elements presented as modal; * * @extends React.Component * * @property {SchemaType} mapping - Determines the mapping for basic components. - * This is designed to be provided by developers team and can be imported from npm package (e.g `@eva/eva`). + * This is designed to be provided by developers team and can be imported from npm package (e.g. `@eva/eva`). * * @property {CustomSchemaType} customMapping - Determines the customization mapping. * This is merged with `mapping` property and designed to be used components customization. * Optional. * * @property {ThemeType} theme - Determines the theme for basic components. - * This is designed to be provided by developers team and can be imported from npm package (e.v `@eva/theme-eva`). + * This is designed to be provided by developers team and can be imported from npm package (e.g. `@eva/theme-eva`). * * @property {React.ReactNode} children - Determines application root component. * diff --git a/src/framework/theme/style/styleConsumer.component.tsx b/src/framework/theme/style/styleConsumer.component.tsx index 894632556..1cf2f0036 100644 --- a/src/framework/theme/style/styleConsumer.component.tsx +++ b/src/framework/theme/style/styleConsumer.component.tsx @@ -43,17 +43,19 @@ export type StyledComponentClass

= React.ComponentClass void} - Determines function * for dispatching current state of component. This is designed to be used as style request function. * Calls component re-render if style for requested state differ from current. * - * @param {React.ComponentClass} Component - Determines class of component to be styled. + * @param Component - Type: {React.ComponentClass}. Determines class of component to be styled. * * @example Declaring Styled Component * @@ -115,8 +117,8 @@ export type StyledComponentClass

= React.ComponentClass { @@ -125,8 +127,6 @@ export type StyledComponentClass

= React.ComponentClass(Component: React.ComponentClass

): StyledComponentClass

=> { diff --git a/src/framework/theme/theme/themeConsumer.component.tsx b/src/framework/theme/theme/themeConsumer.component.tsx index 7779dd348..040874346 100644 --- a/src/framework/theme/theme/themeConsumer.component.tsx +++ b/src/framework/theme/theme/themeConsumer.component.tsx @@ -33,14 +33,15 @@ export type ThemedComponentClass

= React.ComponentClass any} createStyles - Determines arrow function used to create styles + * @param Component - Type: {React.ComponentClass}. Determines class of component to be themed. + * + * @param createStyles - Type: {(theme: ThemeType) => any}. Determines arrow function used to create styles. * * @example Declaring Themed Component * @@ -88,8 +89,6 @@ export type ThemedComponentClass

= React.ComponentClass(Component: React.ComponentClass

, createStyles?: CreateStylesFunction): ThemedComponentClass

=> { diff --git a/src/framework/ui/avatar/avatar.component.tsx b/src/framework/ui/avatar/avatar.component.tsx index 0b3561491..6a914745b 100644 --- a/src/framework/ui/avatar/avatar.component.tsx +++ b/src/framework/ui/avatar/avatar.component.tsx @@ -42,12 +42,12 @@ export type AvatarProps = StyledComponentProps & ImageProps & ComponentProps; * * @property StyledComponentProps * - * @example Avatar API example + * @example Avatar API and usage example * * ``` * import { - * Avatar, - * AvatarProps, + * Avatar, + * AvatarProps, * } from '@kitten/ui'; * * public render(): React.ReactElement { diff --git a/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx b/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx index 5bb8616a6..67ee6277e 100644 --- a/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx +++ b/src/framework/ui/bottomNavigation/bottomNavigation.component.tsx @@ -46,13 +46,27 @@ export type BottomNavigationProps = StyledComponentProps & ViewProps & Component * @property {React.ReactElement | React.ReactElement[]} children - * Determines tabs of the navigator. Can be passed through JSX. * + * @property {StyleProp} indicatorStyle - Determines styles of the indicator. + * * @property {(index: number) => void} onSelect - Triggered on select value. * * @property ViewProps * * @property StyledComponentProps * - * @example with React Navigation usage example + * @example Inline styling example + * + * ``` + * navigateToTab(selectedIndex)}> + * {this.renderTabs()} + * + * ``` + * + * @example With React Navigation API and usage example * * ``` * import { Image } from 'react-native'; @@ -79,24 +93,24 @@ export type BottomNavigationProps = StyledComponentProps & ViewProps & Component * }); * * function renderBottomNavigation(props: CommonNavigationProps): React.ReactElement { - * const routes: NavigationRoute[] = props.navigation.state.routes; - * const index: number = props.navigation.state.index; + * const routes: NavigationRoute[] = props.navigation.state.routes; + * const index: number = props.navigation.state.index; * - * return ( - * navigateToTab(selectedIndex)}> - * }/> - * }/> - * }/> - * - * ); + * return ( + * navigateToTab(selectedIndex)}> + * }/> + * }/> + * }/> + * + * ); * } * ``` * */ diff --git a/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx b/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx index ad06d88e7..fc7ba4539 100644 --- a/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx +++ b/src/framework/ui/bottomNavigation/bottomNavigationTab.component.tsx @@ -60,14 +60,15 @@ export type BottomNavigationTabProps = StyledComponentProps & TouchableOpacityPr * * @example Simple usage example * - * ```tsx + * ``` * import { BottomNavigatorTab } from '@kitten/ui'; + * * * ``` * - * @example with React Navigation usage example + * @example With React Navigation usage and API example * - * ```tsx + * ``` * import { Image } from 'react-native'; * import { * BottomNavigation, @@ -91,27 +92,38 @@ export type BottomNavigationTabProps = StyledComponentProps & TouchableOpacityPr * tabBarComponent: (props: CommonNavigationProps) => renderBottomNavigation(props), * }); * - *function renderBottomNavigation(props: CommonNavigationProps): React.ReactElement { - * const routes: NavigationRoute[] = props.navigation.state.routes; - * const index: number = props.navigation.state.index; - * - * return ( - * navigateToTab(selectedIndex)}> - * }/> - * }/> - * }/> - * - * ); + * function renderBottomNavigation(props: CommonNavigationProps): React.ReactElement { + * const routes: NavigationRoute[] = props.navigation.state.routes; + * const index: number = props.navigation.state.index; + * + * return ( + * navigateToTab(selectedIndex)}> + * }/> + * }/> + * }/> + * + * ); * } * ``` + * + * @example Inline styling example + * + * ``` + * } + * /> + * ``` * */ export class BottomNavigationTabComponent extends React.Component { diff --git a/src/framework/ui/button/button.component.tsx b/src/framework/ui/button/button.component.tsx index 3c029dbce..dda88adc4 100644 --- a/src/framework/ui/button/button.component.tsx +++ b/src/framework/ui/button/button.component.tsx @@ -70,18 +70,19 @@ export type ButtonProps = StyledComponentProps & TouchableOpacityProps & Compone * * ``` * import { - * Button, - * ButtonProps, + * Button, + * ButtonProps, * } from '@kitten/ui'; + * * * ``` * - * @example Button API example + * @example Button usage and API example * * ``` * import { - * Button, - * ButtonProps, + * Button, + * ButtonProps, * } from '@kitten/ui'; * * private onButtonPress = () => { @@ -102,6 +103,18 @@ export type ButtonProps = StyledComponentProps & TouchableOpacityProps & Compone * ); * } * ``` + * + * @example Inline styling example + * + * ``` + * + * ``` * */ export class ButtonComponent extends React.Component { diff --git a/src/framework/ui/buttonGroup/buttonGroup.component.tsx b/src/framework/ui/buttonGroup/buttonGroup.component.tsx index 88f6387b7..6a817766d 100644 --- a/src/framework/ui/buttonGroup/buttonGroup.component.tsx +++ b/src/framework/ui/buttonGroup/buttonGroup.component.tsx @@ -48,14 +48,13 @@ export type ButtonGroupProps = StyledComponentProps & ViewProps & ComponentProps * @property {React.ReactElement[]} children - Determines buttons in group. Can be passed through jsx. * * @property {string} appearance - Determines the appearance of the component. - * Can be 'filled' | 'outline'. - * By default appearance is 'filled'. + * Can be 'filled' | 'outline'. By default appearance is 'filled'. * * @property ViewProps * * @property StyledComponentProps * - * @example ButtonGroup API example + * @example ButtonGroup API and usage example * * ``` * import { Button, ButtonGroup } from '@kitten/ui'; @@ -67,9 +66,9 @@ export type ButtonGroupProps = StyledComponentProps & ViewProps & ComponentProps * appearance='filled' * status='danger' * size='large'> - * - * - * + * + * + * * * ); * } diff --git a/src/framework/ui/checkbox/checkbox.component.tsx b/src/framework/ui/checkbox/checkbox.component.tsx index 28eedebb4..2ede309fe 100644 --- a/src/framework/ui/checkbox/checkbox.component.tsx +++ b/src/framework/ui/checkbox/checkbox.component.tsx @@ -75,10 +75,11 @@ export type CheckBoxProps = StyledComponentProps & TouchableOpacityProps & Compo * * ``` * import { Toggle } from '@kitten/ui'; + * * * ``` * - * @example Checkbox API example + * @example Checkbox usage and API example * * ``` * import { Checkbox } from '@kitten/ui'; @@ -99,10 +100,22 @@ export type CheckBoxProps = StyledComponentProps & TouchableOpacityProps & Compo * size='large' * text='Place your text' * textStyle={styles.checkboxText} - * onChange={this.onChange}/> + * onChange={this.onChange} + * /> * ); * } * ``` + * + * @example Inline styling example + * + * ``` + * + * ``` * */ class CheckBoxComponent extends React.Component { diff --git a/src/framework/ui/input/input.component.tsx b/src/framework/ui/input/input.component.tsx index 4a613f931..31e7809dc 100644 --- a/src/framework/ui/input/input.component.tsx +++ b/src/framework/ui/input/input.component.tsx @@ -86,10 +86,11 @@ export type InputProps = StyledComponentProps & TextInputProps & ComponentProps; * * ``` * import { Input } from '@kitten/ui'; + * * * ``` * - * @example Input API example + * @example Input usage and API example * * ``` * import { Input } from '@kitten/ui'; @@ -127,6 +128,20 @@ export type InputProps = StyledComponentProps & TextInputProps & ComponentProps; * ); * } * ``` + * + * @example Inline styling example + * + * ``` + * + * ``` * */ export class InputComponent extends React.Component { diff --git a/src/framework/ui/layout/layout.component.tsx b/src/framework/ui/layout/layout.component.tsx index 87a76cc33..d11fe973e 100644 --- a/src/framework/ui/layout/layout.component.tsx +++ b/src/framework/ui/layout/layout.component.tsx @@ -36,7 +36,7 @@ export type LayoutProps = StyledComponentProps & ViewProps & ComponentProps; * * @property StyledComponentProps * - * @example Layout API example + * @example Layout usage and API example * * ``` * import { @@ -46,7 +46,7 @@ export type LayoutProps = StyledComponentProps & ViewProps & ComponentProps; * * public render(): React.ReactNode { * return ( - * + * * Layout * * ); diff --git a/src/framework/ui/list/list.component.tsx b/src/framework/ui/list/list.component.tsx index b98610ec4..add0de1a1 100644 --- a/src/framework/ui/list/list.component.tsx +++ b/src/framework/ui/list/list.component.tsx @@ -42,7 +42,7 @@ export type ListProps = StyledComponentProps & FlatListProps & Compone * * @property StyledComponentProps * - * @example With ListItem Example + * @example With ListItem example * * ``` * import { @@ -83,15 +83,15 @@ export type ListProps = StyledComponentProps & FlatListProps & Compone * } * ``` * - * @example With Custom List Item Example + * @example With custom list item example * * ``` - * import { List } from '@kitten/ui'; + * import { List, ListItem } from '@kitten/ui'; * * private renderItem = (info: ListRenderItemInfo): React.ReactElement => { * * return ( - * + * * & Compone * Guns N'Roses * * - * + * * ); - * }; + * }; * * public render(): React.ReactNode { * return ( @@ -112,7 +112,7 @@ export type ListProps = StyledComponentProps & FlatListProps & Compone * renderItem={this.renderItem} * /> * ); - * } + * } * ``` * */ diff --git a/src/framework/ui/list/listItem.component.tsx b/src/framework/ui/list/listItem.component.tsx index 40c11070f..784bfa75e 100644 --- a/src/framework/ui/list/listItem.component.tsx +++ b/src/framework/ui/list/listItem.component.tsx @@ -114,6 +114,18 @@ export type ListItemProps = StyledComponentProps & TouchableIndexedProps & Compo * ); * }; * ``` + * + * @example Inline styling example + * + * ``` + * + * ``` * */ export class ListItemComponent extends React.Component { diff --git a/src/framework/ui/modal/modal.component.tsx b/src/framework/ui/modal/modal.component.tsx index af0297949..3d338631f 100644 --- a/src/framework/ui/modal/modal.component.tsx +++ b/src/framework/ui/modal/modal.component.tsx @@ -56,10 +56,10 @@ export type ModalProps = ViewProps & ComponentProps; * @property {ModalAnimationType} animationType - Controls how the modal showing animates. * Can be 'slideInUp' | 'fade' | 'none'. By default is 'none'. * - * @property ViewProps - * * @property {number} animationDuration - Time of the animation duration. * + * @property ViewProps + * * @example Simple usage example * * ``` @@ -68,7 +68,7 @@ export type ModalProps = ViewProps & ComponentProps; * Hello! I'm modal! * * ``` - * @example Modal API example + * @example Modal usage and API example * * ``` * import { Modal } from '@kitten/ui'; @@ -90,16 +90,16 @@ export type ModalProps = ViewProps & ComponentProps; * * - + ); }; diff --git a/src/playground/src/ui/screen/tabView.component.tsx b/src/playground/src/ui/screen/tabView.component.tsx index e1a6a9306..6d8848d0b 100644 --- a/src/playground/src/ui/screen/tabView.component.tsx +++ b/src/playground/src/ui/screen/tabView.component.tsx @@ -44,11 +44,16 @@ class TabViewScreen extends React.Component { ); }; + private shouldLoadTabContent = (index: number): boolean => { + return index === this.state.selectedIndex; + }; + public render(): React.ReactNode { return ( { }; private onIndexChange = (index: number) => { - this.state.selectedIndex = index; + this.setState({ selectedIndex: index }); + }; + + private shouldLoadPageContent = (index: number): boolean => { + return index === this.state.selectedIndex; }; public render(): React.ReactNode { @@ -36,6 +40,7 @@ class ViewPagerScreen extends React.Component { Tab 1