1- import React from 'react' ;
1+ import React , { ReactElement } from 'react' ;
22import { I18nManager , Platform , StyleSheet , ViewProps } from 'react-native' ;
33import {
44 Button ,
5+ ButtonElement ,
56 CheckBox ,
7+ IndexPath ,
68 Layout ,
79 OverflowMenu ,
8- OverflowMenuItemType ,
10+ MenuItem ,
911} from '@ui-kitten/components' ;
1012import { ColorPaletteIcon , SettingsIcon , TrashIcon } from './icons' ;
1113import { ComponentShowcaseSetting } from '../model/showcase.model' ;
@@ -21,31 +23,38 @@ export interface ShowcaseSettingsProps extends ViewProps {
2123}
2224
2325export const ShowcaseSettings = ( props : ShowcaseSettingsProps ) : React . ReactElement => {
26+ const [ themesMenuVisible , setThemesMenuVisible ] = React . useState < boolean > (
27+ false ,
28+ ) ;
29+ const [ settingsMenuVisible , setSettingsMenuVisible ] = React . useState < boolean > (
30+ false ,
31+ ) ;
2432
25- const [ themesMenuVisible , setThemesMenuVisible ] = React . useState < boolean > ( false ) ;
26- const [ settingsMenuVisible , setSettingsMenuVisible ] = React . useState < boolean > ( false ) ;
27-
28- const createSettingMenuItem = ( setting : ComponentShowcaseSetting ) : OverflowMenuItemType => {
29- return {
30- title : setting . description || `${ setting . propertyName } ${ setting . value } ,
31- } ;
32- } ;
33+ const createSettingMenuItem = ( setting : ComponentShowcaseSetting , index : number ) : React . ReactElement => (
34+ < MenuItem
35+ key = { index }
36+ title = { setting . description || `${ setting . propertyName } ${ setting . value } }
37+ />
38+ ) ;
3339
34- const createThemeMenuItem = ( title : string ) : OverflowMenuItemType => {
35- return { title } ;
36- } ;
40+ const createThemeMenuItem = ( title : string , index : number ) : ReactElement => (
41+ < MenuItem
42+ key = { index }
43+ title = { title }
44+ />
45+ ) ;
3746
38- const onThemeSelect = ( index : number ) : void => {
39- props . onThemeSelect ( props . themes [ index ] ) ;
47+ const onThemeSelect = ( index : IndexPath ) : void => {
48+ props . onThemeSelect ( props . themes [ index . row ] ) ;
4049 setThemesMenuVisible ( false ) ;
4150 } ;
4251
4352 const onResetButtonPress = ( ) : void => {
4453 props . onReset ( ) ;
4554 } ;
4655
47- const onSettingSelect = ( index : number ) : void => {
48- const { [ index ] : setting } = props . settings ;
56+ const onSettingSelect = ( index : IndexPath ) : void => {
57+ const { [ index . row ] : setting } = props . settings ;
4958
5059 props . onSettingSelect ( {
5160 [ setting . propertyName ] : setting . value ,
@@ -54,11 +63,11 @@ export const ShowcaseSettings = (props: ShowcaseSettingsProps): React.ReactEleme
5463 setSettingsMenuVisible ( false ) ;
5564 } ;
5665
57- const createThemesMenuItems = ( ) : OverflowMenuItemType [ ] => {
66+ const createThemesMenuItems = ( ) : React . ReactElement [ ] => {
5867 return props . themes && props . themes . map ( createThemeMenuItem ) ;
5968 } ;
6069
61- const createSettingsMenuItems = ( ) : OverflowMenuItemType [ ] => {
70+ const createSettingsMenuItems = ( ) : React . ReactElement [ ] => {
6271 const settings = props . settings && props . settings . map ( createSettingMenuItem ) ;
6372 return settings || [ ] ;
6473 } ;
@@ -80,45 +89,51 @@ export const ShowcaseSettings = (props: ShowcaseSettingsProps): React.ReactEleme
8089 const renderRTLToggle = ( ) : React . ReactElement => (
8190 < CheckBox
8291 checked = { I18nManager . isRTL }
83- onChange = { toggleRtl }
84- text = 'RTL'
85- />
92+ onChange = { toggleRtl } >
93+ RTL
94+ </ CheckBox >
95+ ) ;
96+
97+ const renderButtonThemes = ( ) : ButtonElement => (
98+ < Button
99+ size = 'tiny'
100+ accessoryLeft = { ColorPaletteIcon }
101+ disabled = { ! props . themes }
102+ onPress = { toggleThemesMenu } >
103+ THEMES
104+ </ Button >
105+ ) ;
106+
107+ const renderButtonSettings = ( ) : ButtonElement => (
108+ < Button
109+ size = 'tiny'
110+ accessoryLeft = { SettingsIcon }
111+ disabled = { ! props . settings }
112+ onPress = { toggleSettingsMenu } >
113+ SETTINGS
114+ </ Button >
86115 ) ;
87116
88117 return (
89- < Layout
90- style = { [ styles . container , props . style ] }
91- level = '1' >
118+ < Layout style = { styles . container } level = '1' >
92119 < OverflowMenu
93120 visible = { themesMenuVisible }
94121 onSelect = { onThemeSelect }
95- data = { createThemesMenuItems ( ) }
96- onBackdropPress = { toggleThemesMenu } >
97- < Button
98- size = 'tiny'
99- icon = { ColorPaletteIcon }
100- disabled = { ! props . themes }
101- onPress = { toggleThemesMenu } >
102- THEMES
103- </ Button >
122+ onBackdropPress = { toggleThemesMenu }
123+ anchor = { renderButtonThemes } >
124+ { createThemesMenuItems ( ) }
104125 </ OverflowMenu >
105126 < OverflowMenu
106127 visible = { settingsMenuVisible }
107128 onSelect = { onSettingSelect }
108- data = { createSettingsMenuItems ( ) }
109- onBackdropPress = { toggleSettingsMenu } >
110- < Button
111- size = 'tiny'
112- icon = { SettingsIcon }
113- disabled = { ! props . settings }
114- onPress = { toggleSettingsMenu } >
115- SETTINGS
116- </ Button >
129+ onBackdropPress = { toggleSettingsMenu }
130+ anchor = { renderButtonSettings } >
131+ { createSettingsMenuItems ( ) }
117132 </ OverflowMenu >
118133 < Button
119134 size = 'tiny'
120135 status = 'danger'
121- icon = { TrashIcon }
136+ accessoryLeft = { TrashIcon }
122137 disabled = { ! props . settings }
123138 onPress = { onResetButtonPress } >
124139 RESET
0 commit comments