❌ Example - Remove Old JS Code
This commit is contained in:
Dominic Go
parent
6d830a1d1a
commit
2bf55f10eb
@ -1,183 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { StyleSheet, SafeAreaView, ScrollView, View, Text, Switch } from 'react-native';
|
||||
|
||||
import * as Colors from './constants/Colors';
|
||||
|
||||
import { ContextMenuViewSimpleExample01 } from './components/ContextMenuView/ContextMenuViewSimpleExample01';
|
||||
import { ContextMenuViewSimpleExample02 } from './components/ContextMenuView/ContextMenuViewSimpleExample02';
|
||||
import { ContextMenuViewSimpleExample03 } from './components/ContextMenuView/ContextMenuViewSimpleExample03';
|
||||
import { ContextMenuViewSimpleExample04 } from './components/ContextMenuView/ContextMenuViewSimpleExample04';
|
||||
import { ContextMenuViewSimpleExample05 } from './components/ContextMenuView/ContextMenuViewSimpleExample05';
|
||||
import { ContextMenuViewSimpleExample06 } from './components/ContextMenuView/ContextMenuViewSimpleExample06';
|
||||
import { ContextMenuViewSimpleExample07 } from './components/ContextMenuView/ContextMenuViewSimpleExample07';
|
||||
import { ContextMenuViewSimpleExample08 } from './components/ContextMenuView/ContextMenuViewSimpleExample08';
|
||||
import { ContextMenuViewSimpleExample09 } from './components/ContextMenuView/ContextMenuViewSimpleExample09';
|
||||
import { ContextMenuViewSimpleExample10 } from './components/ContextMenuView/ContextMenuViewSimpleExample10';
|
||||
import { ContextMenuViewSimpleExample11 } from './components/ContextMenuView/ContextMenuViewSimpleExample11';
|
||||
import { ContextMenuViewSimpleExample12 } from './components/ContextMenuView/ContextMenuViewSimpleExample12';
|
||||
import { ContextMenuViewSimpleExample13 } from './components/ContextMenuView/ContextMenuViewSimpleExample13';
|
||||
import { ContextMenuViewSimpleExample14 } from './components/ContextMenuView/ContextMenuViewSimpleExample14';
|
||||
import { ContextMenuViewSimpleExample15 } from './components/ContextMenuView/ContextMenuViewSimpleExample15';
|
||||
import { ContextMenuViewSimpleExample16 } from './components/ContextMenuView/ContextMenuViewSimpleExample16';
|
||||
import { ContextMenuViewSimpleExample17 } from './components/ContextMenuView/ContextMenuViewSimpleExample17';
|
||||
import { ContextMenuViewSimpleExample18 } from './components/ContextMenuView/ContextMenuViewSimpleExample18';
|
||||
|
||||
import { ContextMenuViewTest01 } from './components/ContextMenuView/ContextMenuViewTest01';
|
||||
import { ContextMenuViewTest02 } from './components/ContextMenuView/ContextMenuViewTest02';
|
||||
import { ContextMenuViewTest03 } from './components/ContextMenuView/ContextMenuViewTest03';
|
||||
import { ContextMenuViewTest04 } from './components/ContextMenuView/ContextMenuViewTest04';
|
||||
import { ContextMenuViewTest05 } from './components/ContextMenuView/ContextMenuViewTest05';
|
||||
import { ContextMenuViewTest06 } from './components/ContextMenuView/ContextMenuViewTest06';
|
||||
import { ContextMenuViewTest07 } from './components/ContextMenuView/ContextMenuViewTest07';
|
||||
import { ContextMenuViewTest08 } from './components/ContextMenuView/ContextMenuViewTest08';
|
||||
|
||||
import { ContextMenuButtonSimpleExample01 } from './components/ContextMenuButton/ContextMenuButtonSimpleExample01';
|
||||
import { ContextMenuButtonSimpleExample02 } from './components/ContextMenuButton/ContextMenuButtonSimpleExample02';
|
||||
|
||||
|
||||
const contextMenuViewItems = [
|
||||
ContextMenuViewSimpleExample01,
|
||||
ContextMenuViewSimpleExample02,
|
||||
ContextMenuViewSimpleExample03,
|
||||
ContextMenuViewSimpleExample04,
|
||||
ContextMenuViewSimpleExample05,
|
||||
ContextMenuViewSimpleExample06,
|
||||
ContextMenuViewSimpleExample07,
|
||||
ContextMenuViewSimpleExample08,
|
||||
ContextMenuViewSimpleExample09,
|
||||
ContextMenuViewSimpleExample10,
|
||||
ContextMenuViewSimpleExample11,
|
||||
ContextMenuViewSimpleExample12,
|
||||
ContextMenuViewSimpleExample13,
|
||||
ContextMenuViewSimpleExample14,
|
||||
ContextMenuViewSimpleExample15,
|
||||
ContextMenuViewSimpleExample16,
|
||||
ContextMenuViewSimpleExample17,
|
||||
ContextMenuViewSimpleExample18,
|
||||
ContextMenuViewTest01,
|
||||
ContextMenuViewTest02,
|
||||
ContextMenuViewTest03,
|
||||
ContextMenuViewTest04,
|
||||
ContextMenuViewTest05,
|
||||
ContextMenuViewTest06,
|
||||
ContextMenuViewTest07,
|
||||
ContextMenuViewTest08,
|
||||
];
|
||||
|
||||
const contextMenuButtonItems = [
|
||||
ContextMenuButtonSimpleExample01,
|
||||
ContextMenuButtonSimpleExample02,
|
||||
];
|
||||
|
||||
console.disableYellowBox = true;
|
||||
|
||||
export default function App() {
|
||||
const [contextMenuViewUseActionSheetFallback, setContextMenuViewUseActionSheetFallback] = React.useState(false);
|
||||
const toggleContextMenuViewUseActionSheetFallback = () =>
|
||||
setContextMenuViewUseActionSheetFallback(previousState => !previousState);
|
||||
|
||||
const [contextMenuButtonUseActionSheetFallback, setContextMenuButtonUseActionSheetFallback] = React.useState(false);
|
||||
const toggleContextMenuButtonUseActionSheetFallback = () =>
|
||||
setContextMenuButtonUseActionSheetFallback(previousState => !previousState);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.rootContainer}>
|
||||
<ScrollView contentContainerStyle={styles.scrollviewContainer}>
|
||||
<Text style={styles.textSectionTitle}>
|
||||
{'ContextMenuView'}
|
||||
</Text>
|
||||
<Text style={styles.textSectionSubtitle}>
|
||||
{'Examples and tests for `ContextMenuView`'}
|
||||
</Text>
|
||||
<View style={styles.headerContainer}>
|
||||
<Text>
|
||||
{'When the context menu is visible, the card wil turn purple.'}
|
||||
</Text>
|
||||
<View style={styles.headerRowContainer}>
|
||||
<Text style={styles.headerRowText}>
|
||||
{'useActionSheetFallback: '}
|
||||
</Text>
|
||||
<Switch
|
||||
onValueChange={toggleContextMenuViewUseActionSheetFallback}
|
||||
value={contextMenuViewUseActionSheetFallback}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
{contextMenuViewItems.map((element, index) =>
|
||||
React.createElement(element, {
|
||||
key : `context-menu-view-item-${index}`,
|
||||
index: (index + 1),
|
||||
// pass down props
|
||||
useActionSheetFallback: contextMenuViewUseActionSheetFallback,
|
||||
})
|
||||
)}
|
||||
<View style={{marginTop: 20}}/>
|
||||
<Text style={styles.textSectionTitle}>
|
||||
{'ContextMenuButton'}
|
||||
</Text>
|
||||
<Text style={styles.textSectionSubtitle}>
|
||||
{'Examples and tests for `ContextMenuButton`'}
|
||||
</Text>
|
||||
<View style={[styles.headerContainer, {backgroundColor: Colors.AMBER[50]}]}>
|
||||
<Text>
|
||||
{'When the context menu is visible, the button will turn yellow.'}
|
||||
</Text>
|
||||
<View style={styles.headerRowContainer}>
|
||||
<Text style={styles.headerRowText}>
|
||||
{'useActionSheetFallback: '}
|
||||
</Text>
|
||||
<Switch
|
||||
onValueChange={toggleContextMenuButtonUseActionSheetFallback}
|
||||
value={contextMenuButtonUseActionSheetFallback}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
{contextMenuButtonItems.map((element, index) =>
|
||||
React.createElement(element, {
|
||||
key : `context-menu-button-item-${index}`,
|
||||
index: (index + 1),
|
||||
// pass down props
|
||||
useActionSheetFallback: contextMenuButtonUseActionSheetFallback,
|
||||
})
|
||||
)}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
rootContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
scrollviewContainer: {
|
||||
paddingBottom: 30,
|
||||
},
|
||||
textSectionTitle: {
|
||||
fontSize: 32,
|
||||
fontWeight: 'bold',
|
||||
marginHorizontal: 10,
|
||||
},
|
||||
textSectionSubtitle: {
|
||||
marginHorizontal: 10,
|
||||
fontSize: 16,
|
||||
fontWeight: '300',
|
||||
color: Colors.GREY[600],
|
||||
marginBottom: 5,
|
||||
},
|
||||
headerContainer: {
|
||||
borderRadius: 10,
|
||||
padding: 15,
|
||||
marginTop: 10,
|
||||
marginHorizontal: 20,
|
||||
backgroundColor: Colors.BLUE[100]
|
||||
},
|
||||
headerRowContainer: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginTop: 7,
|
||||
},
|
||||
headerRowText: {
|
||||
flex: 1,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
});
|
||||
@ -1,37 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuButtonItem } from '../ExampleContextMenuButtonItem';
|
||||
|
||||
|
||||
export class ContextMenuButtonSimpleExample01 extends React.PureComponent {
|
||||
render(){
|
||||
return(
|
||||
<ExampleContextMenuButtonItem
|
||||
{...this.props}
|
||||
title={'Simple Example #1'}
|
||||
subtitle={'actions text-only'}
|
||||
desc={'Context menu button with 3 actions (no icon, just text). Long press on the button to show the context menu.'}
|
||||
// `ContextMenuButton` Props
|
||||
onPress={() => alert('TouchableOpacity - OnPress')}
|
||||
onPressMenuItem={({nativeEvent}) => alert(`onPressMenuItem nativeEvent: ${JSON.stringify(nativeEvent)}`)}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuButtonSimpleExample01',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: 'Action #1',
|
||||
}, {
|
||||
actionKey : 'key-02' ,
|
||||
actionTitle: 'Action #2',
|
||||
}, {
|
||||
actionKey : 'key-03' ,
|
||||
actionTitle: 'Action #3',
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,49 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuButtonItem } from '../ExampleContextMenuButtonItem';
|
||||
|
||||
|
||||
export class ContextMenuButtonSimpleExample02 extends React.PureComponent {
|
||||
render(){
|
||||
return(
|
||||
<ExampleContextMenuButtonItem
|
||||
{...this.props}
|
||||
title={'Simple Example #2'}
|
||||
subtitle={'actions text-only'}
|
||||
desc={'Context menu button but we set the `isMenuPrimaryAction` prop to true. Press button to show menu.'}
|
||||
// `ContextMenuButton` Props
|
||||
onPressMenuItem={({nativeEvent}) => alert(`onPressMenuItem nativeEvent: ${JSON.stringify(nativeEvent)}`)}
|
||||
isMenuPrimaryAction={true}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuButtonSimpleExample02',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: 'Action #1',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'folder',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-02' ,
|
||||
actionTitle: 'Action #2',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'dial.fill',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-03' ,
|
||||
actionTitle: 'Action #3',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'archivebox.fill',
|
||||
}
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,38 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
|
||||
export class ContextMenuViewSimpleExample01 extends React.PureComponent {
|
||||
render(){
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Simple Example #1'}
|
||||
subtitle={'actions text-only'}
|
||||
desc={'Context menu with 3 actions (no icon, just text)'}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={({nativeEvent}) => alert(`onPressMenuItem nativeEvent: ${JSON.stringify(nativeEvent)}`)}
|
||||
onPressMenuPreview={() => alert('onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample01',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: 'Action #1',
|
||||
}, {
|
||||
actionKey : 'key-02' ,
|
||||
actionTitle: 'Action #2',
|
||||
}, {
|
||||
actionKey : 'key-03' ,
|
||||
actionTitle: 'Action #3',
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,50 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export class ContextMenuViewSimpleExample02 extends React.PureComponent {
|
||||
render(){
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Simple Example #2'}
|
||||
subtitle={'actions w/ icons'}
|
||||
desc={'Context menu with 3 actions (text w/ system icon)'}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={({nativeEvent}) => alert(`onPressMenuItem nativeEvent: ${JSON.stringify(nativeEvent)}`)}
|
||||
onPressMenuPreview={() => alert('onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample02',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: 'Action #1',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'folder',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-02' ,
|
||||
actionTitle: 'Action #2',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'dial.fill',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-03' ,
|
||||
actionTitle: 'Action #3',
|
||||
imageValue : 'archivebox.fill',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'archivebox.fill',
|
||||
}
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,59 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export class ContextMenuViewSimpleExample03 extends React.PureComponent {
|
||||
render(){
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Simple Example #3'}
|
||||
subtitle={'submenu'}
|
||||
desc={"Context menu with 1 action and 1 submenu (with 3 submenu actions)"}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={({nativeEvent}) => alert(`onPressMenuItem nativeEvent: ${JSON.stringify(nativeEvent)}`)}
|
||||
onPressMenuPreview={() => alert('onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample03',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: 'Action #1',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'folder',
|
||||
}
|
||||
}, {
|
||||
menuTitle: 'Submenu...',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01-01',
|
||||
actionTitle: 'Submenu Action #1',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'star',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-01-02',
|
||||
actionTitle: 'Submenu Action #2',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'star.lefthalf.fill',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-01-03',
|
||||
actionTitle: 'Submenu Action #3',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'star.fill',
|
||||
}
|
||||
}]
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,60 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export class ContextMenuViewSimpleExample04 extends React.PureComponent {
|
||||
render(){
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Simple Example #4'}
|
||||
subtitle={'menuAttributes'}
|
||||
desc={'Context menu with a "disabled" action, a "destructive" action, a "hidden" action (which is not visible), and a disabled + destructive action'}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={({nativeEvent}) => alert(`onPressMenuItem nativeEvent: ${JSON.stringify(nativeEvent)}`)}
|
||||
onPressMenuPreview={() => alert('onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample04',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle : 'Disabled Action',
|
||||
menuAttributes: ['disabled'],
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'folder',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-02' ,
|
||||
actionTitle : 'Destructive Action',
|
||||
menuAttributes: ['destructive'],
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'trash',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-03' ,
|
||||
actionTitle : 'Hidden Action',
|
||||
menuAttributes: ['hidden'],
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'trash',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-04' ,
|
||||
actionTitle : 'Disabled/Destructive',
|
||||
menuAttributes: ['disabled', 'destructive'],
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'trash.fill',
|
||||
}
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,60 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export class ContextMenuViewSimpleExample05 extends React.PureComponent {
|
||||
render(){
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Simple Example #5'}
|
||||
subtitle={'inline submenu'}
|
||||
desc={`Same as Example #3 but the submenu has "displayInline" in it's menuOptions`}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={({nativeEvent}) => alert(`onPressMenuItem nativeEvent: ${JSON.stringify(nativeEvent)}`)}
|
||||
onPressMenuPreview={() => alert('onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample05',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: 'Action #1',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'folder',
|
||||
}
|
||||
}, {
|
||||
menuTitle: 'Submenu...',
|
||||
menuOptions: ['displayInline'],
|
||||
menuItems: [{
|
||||
actionKey : 'key-01-01',
|
||||
actionTitle: 'Submenu Action #1',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'star',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-01-02',
|
||||
actionTitle: 'Submenu Action #2',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'star.lefthalf.fill',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-01-03',
|
||||
actionTitle: 'Submenu Action #3',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'star.fill',
|
||||
}
|
||||
}]
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,60 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export class ContextMenuViewSimpleExample06 extends React.PureComponent {
|
||||
render(){
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Simple Example #6'}
|
||||
subtitle={'destructive submenu'}
|
||||
desc={`Same as Example #3 but the submenu has "destructive" in it's menuOptions`}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={({nativeEvent}) => alert(`onPressMenuItem nativeEvent: ${JSON.stringify(nativeEvent)}`)}
|
||||
onPressMenuPreview={() => alert('onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample06',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: 'Action #1',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'folder',
|
||||
}
|
||||
}, {
|
||||
menuTitle: 'Submenu...',
|
||||
menuOptions: ['destructive'],
|
||||
menuItems: [{
|
||||
actionKey : 'key-01-01',
|
||||
actionTitle: 'Submenu Action #1',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'star',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-01-02',
|
||||
actionTitle: 'Submenu Action #2',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'star.lefthalf.fill',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-01-03',
|
||||
actionTitle: 'Submenu Action #3',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'star.fill',
|
||||
}
|
||||
}]
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,60 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export class ContextMenuViewSimpleExample07 extends React.PureComponent {
|
||||
render(){
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Simple Example #7'}
|
||||
subtitle={'displayInline + destructive submenu'}
|
||||
desc={`Same as Example #3 but the submenu has "destructive" and "displayInline" in it's menuOptions. This looks the same as "displayInline" submenu (i.e Example #5)`}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={({nativeEvent}) => alert(`onPressMenuItem nativeEvent: ${JSON.stringify(nativeEvent)}`)}
|
||||
onPressMenuPreview={() => alert('onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample07',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: 'Action #1',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'folder',
|
||||
}
|
||||
}, {
|
||||
menuTitle: 'Submenu...',
|
||||
menuOptions: ['displayInline', 'destructive'],
|
||||
menuItems: [{
|
||||
actionKey : 'key-01-01',
|
||||
actionTitle: 'Submenu Action #1',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'star',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-01-02',
|
||||
actionTitle: 'Submenu Action #2',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'star.lefthalf.fill',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-01-03',
|
||||
actionTitle: 'Submenu Action #3',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'star.fill',
|
||||
}
|
||||
}]
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,52 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export class ContextMenuViewSimpleExample08 extends React.PureComponent {
|
||||
render(){
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Simple Example #8'}
|
||||
subtitle={'menuState'}
|
||||
desc={`Context menu with 3 actions that has "on", "off", and "mixed" menuState`}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={({nativeEvent}) => alert(`onPressMenuItem nativeEvent: ${JSON.stringify(nativeEvent)}`)}
|
||||
onPressMenuPreview={() => alert('onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample08',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: 'menuState: on',
|
||||
menuState : 'on',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'folder',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-02' ,
|
||||
actionTitle: 'menuState: off',
|
||||
menuState : 'off',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'dial',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-03' ,
|
||||
actionTitle: 'menuState: mixed',
|
||||
menuState : 'mixed',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'archivebox',
|
||||
}
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,66 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export class ContextMenuViewSimpleExample09 extends React.PureComponent {
|
||||
|
||||
_handleOnPressMenuItem = ({nativeEvent}) => {
|
||||
switch (nativeEvent.actionKey) {
|
||||
case 'save':
|
||||
alert('saving...');
|
||||
break;
|
||||
|
||||
case 'like':
|
||||
alert('liking...');
|
||||
break;
|
||||
|
||||
case 'play':
|
||||
alert('playing...');
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
||||
render(){
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Simple Example #9'}
|
||||
subtitle={'menu actions'}
|
||||
desc={'An example context menu for using the `onPressMenuItem` event.'}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={this._handleOnPressMenuItem}
|
||||
onPressMenuPreview={() => alert('onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample09',
|
||||
menuItems: [{
|
||||
actionKey : 'save',
|
||||
actionTitle: 'Save',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'square.and.arrow.down',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'like',
|
||||
actionTitle: 'Like',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'hand.thumbsup',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'play',
|
||||
actionTitle: 'Play',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'play',
|
||||
}
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,65 +0,0 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export function ContextMenuViewSimpleExample10(props) {
|
||||
|
||||
const [timer, setTimer] = useState(0);
|
||||
const increment = useRef(null);
|
||||
|
||||
const handleStart = () => {
|
||||
increment.current = setInterval(() => {
|
||||
setTimer((timer) => timer + 1);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
clearInterval(increment.current);
|
||||
setTimer(0);
|
||||
};
|
||||
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...props}
|
||||
title={'Simple Example #10'}
|
||||
subtitle={'Update Menu'}
|
||||
desc={`On iOS 14+ you can update the menu while it's visible. So you can control the menu via state. This is a simple demo with a counter incrementing every second.`}
|
||||
// `ContextMenuView` Props
|
||||
onMenuDidShow={() => handleStart()}
|
||||
onMenuDidHide={() => handleReset()}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample10',
|
||||
menuItems: [{
|
||||
actionKey : 'key-00',
|
||||
actionTitle: `Static Action`,
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'square.and.arrow.down',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-01',
|
||||
actionTitle: `timer: ${timer}`,
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: ((timer % 2 == 0)
|
||||
? 'heart'
|
||||
: 'heart.fill'
|
||||
),
|
||||
}
|
||||
}, (timer % 3 == 0) && {
|
||||
actionKey : 'key-02',
|
||||
actionTitle: `Dynamic Action`,
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'scissors.badge.ellipsis',
|
||||
}
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,42 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, View, Text } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export function ContextMenuViewSimpleExample11(props) {
|
||||
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...props}
|
||||
title={'Simple Example #11'}
|
||||
subtitle={'Custom Preview'}
|
||||
desc={`Show a custom preview for the context menu.`}
|
||||
// `ContextMenuView` Props
|
||||
previewConfig={{
|
||||
previewType: 'CUSTOM',
|
||||
previewSize: 'STRETCH',
|
||||
backgroundColor: 'white'
|
||||
}}
|
||||
renderPreview={() => (
|
||||
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Text style={{fontSize: 32}}>
|
||||
Hello World
|
||||
</Text>
|
||||
<Text style={{fontSize: 32}}>
|
||||
Hello World
|
||||
</Text>
|
||||
<Text style={{fontSize: 32}}>
|
||||
Hello World
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample11',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,84 +0,0 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { StyleSheet, View, Text } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export function ContextMenuViewSimpleExample12(props) {
|
||||
const [timer, setTimer] = useState(0);
|
||||
const increment = useRef(null);
|
||||
|
||||
const handleStart = () => {
|
||||
increment.current = setInterval(() => {
|
||||
setTimer((timer) => timer + 1);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const handleStop = () => {
|
||||
clearInterval(increment.current);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
clearInterval(increment.current);
|
||||
setTimer(0);
|
||||
};
|
||||
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...props}
|
||||
title={'Simple Example #12'}
|
||||
subtitle={'Custom Preview #2 - Counter'}
|
||||
desc={`Another custom preview example. Show counter in the context menu, configure menu with a menu action to add 100 to the counter and a action to reset the counter.`}
|
||||
// `ContextMenuView` Props
|
||||
previewConfig={{
|
||||
previewType: 'CUSTOM',
|
||||
backgroundColor: 'white'
|
||||
}}
|
||||
renderPreview={() => (
|
||||
<View style={{ padding: 20 }}>
|
||||
<Text style={{fontSize: 32}}>
|
||||
{`Counter: ${timer}`}
|
||||
</Text>
|
||||
<Text style={{fontSize: 32}}>
|
||||
{(timer % 2 == 0)? 'EVEN' : 'The number is: ODD'}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
onMenuDidShow={() => handleStart()}
|
||||
onMenuDidHide={() => handleStop()}
|
||||
onPressMenuItem={({nativeEvent}) => {
|
||||
switch (nativeEvent.actionKey) {
|
||||
case 'add':
|
||||
setTimer((timer) => timer + 100);
|
||||
break;
|
||||
|
||||
case 'reset':
|
||||
handleReset();
|
||||
break;
|
||||
};
|
||||
}}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample12',
|
||||
menuItems: [{
|
||||
actionKey : 'add',
|
||||
actionTitle : `Add 100`,
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'plus',
|
||||
}
|
||||
}, (timer > 0) && {
|
||||
actionKey : 'reset',
|
||||
actionTitle : `Reset Counter`,
|
||||
menuAttributes: ['destructive'],
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'trash',
|
||||
}
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,37 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
|
||||
export function ContextMenuViewSimpleExample13(props) {
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...props}
|
||||
title={'Simple Example #13'}
|
||||
subtitle={'discoverabilityTitle'}
|
||||
desc={'Context menu with 3 actions that has the `discoverabilityTitle` set.'}
|
||||
// `ContextMenuView` Props
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample13',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle : 'Action #1',
|
||||
discoverabilityTitle: 'Action subtitle',
|
||||
}, {
|
||||
actionKey : 'key-02' ,
|
||||
actionTitle : 'Action #2',
|
||||
discoverabilityTitle: 'Lorum ipsum sit amit dolor aspicing',
|
||||
}, {
|
||||
actionKey : 'key-03' ,
|
||||
actionTitle : 'Action #3',
|
||||
discoverabilityTitle: 'Very long `discoverabilityTitle` lorum ipsum sit amit',
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,43 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, View, Text } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export function ContextMenuViewSimpleExample14(props) {
|
||||
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...props}
|
||||
title={'Simple Example #14'}
|
||||
subtitle={'Custom Preview'}
|
||||
desc={`Show a custom preview for the context menu with the "preferredCommitStyle" property in the "PreviewConfig" prop set to "pop"`}
|
||||
// `ContextMenuView` Props
|
||||
previewConfig={{
|
||||
previewType: 'CUSTOM',
|
||||
previewSize: 'STRETCH',
|
||||
backgroundColor: 'rgba(255,255,255,0.75)',
|
||||
preferredCommitStyle: 'pop',
|
||||
}}
|
||||
renderPreview={() => (
|
||||
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Text style={{fontSize: 32}}>
|
||||
Hello World
|
||||
</Text>
|
||||
<Text style={{fontSize: 32}}>
|
||||
Hello World
|
||||
</Text>
|
||||
<Text style={{fontSize: 32}}>
|
||||
Hello World
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample14',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,65 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, View, Text, findNodeHandle } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export class ContextMenuViewSimpleExample15 extends React.PureComponent {
|
||||
constructor(props){
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
targetViewNode: null,
|
||||
};
|
||||
};
|
||||
|
||||
componentDidMount(){
|
||||
this.setState({
|
||||
targetViewNode: findNodeHandle(this.viewRef)
|
||||
});
|
||||
};
|
||||
|
||||
render(){
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Simple Example #15'}
|
||||
subtitle={'Preview Target'}
|
||||
desc={`Example context menu with a specific preview target`}
|
||||
// `ContextMenuView` Props
|
||||
previewConfig={{
|
||||
targetViewNode: this.state.targetViewNode,
|
||||
}}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample15',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: 'Action #1',
|
||||
}],
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={styles.targetContainer}
|
||||
ref={r => this.viewRef = r}
|
||||
>
|
||||
<Text style={styles.text}>
|
||||
{`Hello! Target Node: ${this.state.targetViewNode}`}
|
||||
</Text>
|
||||
</View>
|
||||
</ExampleContextMenuItem>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
targetContainer: {
|
||||
backgroundColor: 'rgba(255,255,255,0.5)',
|
||||
alignSelf: 'flex-start',
|
||||
padding: 10,
|
||||
borderRadius: 10,
|
||||
marginTop: 10,
|
||||
},
|
||||
text: {
|
||||
fontSize: 16,
|
||||
}
|
||||
});
|
||||
@ -1,46 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, Image, Text } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export function ContextMenuViewSimpleExample16(props) {
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...props}
|
||||
title={'Simple Example #16'}
|
||||
subtitle={'ImageType Icons'}
|
||||
desc={'Context menu with an action that uses a `ASSET` icon'}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={({nativeEvent}) => alert(`onPressMenuItem nativeEvent: ${JSON.stringify(nativeEvent)}`)}
|
||||
onPressMenuPreview={() => alert('onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample16',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: 'Action #1',
|
||||
discoverabilityTitle: 'No Icon',
|
||||
}, {
|
||||
actionKey : 'key-02' ,
|
||||
actionTitle: 'Action #2',
|
||||
discoverabilityTitle: 'Use "SYSTEM" icon',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'dial.fill',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-03' ,
|
||||
actionTitle: 'Action #3',
|
||||
discoverabilityTitle: 'Use "ASSET" icon',
|
||||
icon: {
|
||||
iconType : 'ASSET',
|
||||
iconValue: 'icon-rainbow-flag',
|
||||
}
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,60 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export function ContextMenuViewSimpleExample17(props) {
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...props}
|
||||
title={'Simple Example #17'}
|
||||
subtitle={'Icon colors'}
|
||||
desc={'Context menu icon colors example'}
|
||||
// `ContextMenuView` Props
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample17',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: 'Action #1',
|
||||
discoverabilityTitle: 'Blue Icon',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'cloud.heavyrain.fill',
|
||||
iconTint : 'blue',
|
||||
},
|
||||
}, {
|
||||
actionKey : 'key-02',
|
||||
actionTitle: 'Action #2',
|
||||
discoverabilityTitle: 'Orange Icon',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'exclamationmark.triangle.fill',
|
||||
iconTint : 'rgb(218,165,32)',
|
||||
},
|
||||
}, {
|
||||
actionKey : 'key-03',
|
||||
actionTitle: 'Action #3',
|
||||
discoverabilityTitle: 'Pink Icon',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'heart.fill',
|
||||
iconTint : '#FF1493',
|
||||
},
|
||||
}, {
|
||||
actionKey : 'key-04',
|
||||
actionTitle: 'Action #4',
|
||||
discoverabilityTitle: 'Green Icon',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'bubble.right.fill',
|
||||
iconTint : 'rgba(124,252,0,0.5)',
|
||||
},
|
||||
}]
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,59 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, Image } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
const iconA = Image.resolveAssetSource(
|
||||
require('../../assets/emoji-pleading-face.png')
|
||||
);
|
||||
|
||||
const iconB = Image.resolveAssetSource(
|
||||
require('../../assets/emoji-smiling-face-with-hearts.png')
|
||||
);
|
||||
|
||||
const iconC = Image.resolveAssetSource(
|
||||
require('../../assets/emoji-sparkling-heart.png')
|
||||
);
|
||||
|
||||
export function ContextMenuViewSimpleExample18(props) {
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...props}
|
||||
title={'Simple Example #18'}
|
||||
subtitle={'ImageType Icons'}
|
||||
desc={'Context menu with actions that uses `REQUIRE` icons'}
|
||||
// `ContextMenuView` Props
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewSimpleExample18',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01' ,
|
||||
actionTitle: 'Action #1',
|
||||
discoverabilityTitle: 'Use "REQUIRE" icon',
|
||||
icon: {
|
||||
iconType : 'REQUIRE',
|
||||
iconValue: iconA,
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-02' ,
|
||||
actionTitle: 'Action #2',
|
||||
discoverabilityTitle: 'Use "REQUIRE" icon',
|
||||
icon: {
|
||||
iconType : 'REQUIRE',
|
||||
iconValue: iconB,
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-03' ,
|
||||
actionTitle: 'Action #3',
|
||||
discoverabilityTitle: 'Use "REQUIRE" icon',
|
||||
icon: {
|
||||
iconType : 'REQUIRE',
|
||||
iconValue: iconC,
|
||||
}
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,134 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
|
||||
export class ContextMenuViewTest01 extends React.PureComponent {
|
||||
render(){
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Test #1'}
|
||||
subtitle={'nested menus'}
|
||||
desc={`Test for multiple nested/deep submenu's`}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={({nativeEvent}) => alert(`onPressMenuItem nativeEvent: ${JSON.stringify(nativeEvent)}`)}
|
||||
onPressMenuPreview={() => alert('onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewTest01',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01' ,
|
||||
actionTitle: 'Action #1',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'hare',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-02' ,
|
||||
actionTitle: 'Action #2',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'calendar',
|
||||
}
|
||||
}, {
|
||||
menuTitle: 'Submenu #1...',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'ant',
|
||||
},
|
||||
menuItems: [{
|
||||
actionKey : 'key-03-01' ,
|
||||
actionTitle: 'Submenu Action #3',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'moon',
|
||||
},
|
||||
}, {
|
||||
actionKey : 'key-03-02' ,
|
||||
actionTitle: 'Submenu Action #4',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'house',
|
||||
}
|
||||
}, {
|
||||
menuTitle: 'Submenu #5...',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'moon.stars',
|
||||
},
|
||||
menuItems: [{
|
||||
actionKey : 'key-03-03-01',
|
||||
actionTitle: 'Submenu Action #5',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'dial',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-03-03-02',
|
||||
actionTitle: 'Submenu Action #6',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'square.and.arrow.up.on.square',
|
||||
}
|
||||
}, {
|
||||
menuTitle: 'Submenu #3...',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'archivebox',
|
||||
},
|
||||
menuItems: [{
|
||||
actionKey : 'key-03-03-03-01',
|
||||
actionTitle: 'Submenu Action #7',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'folder',
|
||||
},
|
||||
}, {
|
||||
actionKey : 'key-03-03-03-02',
|
||||
actionTitle: 'Submenu Action #8',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'pencil.slash',
|
||||
}
|
||||
}, {
|
||||
menuTitle: 'Submenu #4...',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'rosette',
|
||||
},
|
||||
menuItems: [{
|
||||
actionKey : 'key-03-03-03-03-01',
|
||||
actionTitle: 'Submenu Action #9',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'lessthan.circle',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-03-03-03-03-02',
|
||||
actionTitle: 'Submenu Action #10',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'divide.square',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-03-03-03-03-03',
|
||||
actionTitle: 'Submenu Action #11',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'cloud.moon',
|
||||
}
|
||||
}],
|
||||
}],
|
||||
}],
|
||||
}],
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,106 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
|
||||
export class ContextMenuViewTest02 extends React.PureComponent {
|
||||
render(){
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Test #2'}
|
||||
subtitle={'inline menus'}
|
||||
desc={`Test for multiple inline menu's + nested submenu's`}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={({nativeEvent}) => alert(`onPressMenuItem nativeEvent: ${JSON.stringify(nativeEvent)}`)}
|
||||
onPressMenuPreview={() => alert('onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewTest02',
|
||||
menuItems: [{
|
||||
menuTitle: 'Inline Submenu #1',
|
||||
menuOptions: ['displayInline'],
|
||||
menuItems: [{
|
||||
actionKey : 'key-01' ,
|
||||
actionTitle: 'Inline Action #1',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'hare',
|
||||
}
|
||||
}, {
|
||||
menuTitle : 'Submenu #1...',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'calendar',
|
||||
},
|
||||
menuItems: [{
|
||||
actionKey : 'key-02-01',
|
||||
actionTitle: 'Submenu Action #1',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'paperclip',
|
||||
}
|
||||
}, {
|
||||
menuTitle: 'Inline Submenu #4',
|
||||
menuOptions: ['displayInline'],
|
||||
menuItems: [{
|
||||
actionKey : 'key-02-02',
|
||||
actionTitle: 'Inline Submenu Action #2',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'house',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-02-03',
|
||||
actionTitle: 'Inline Submenu Action #3',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'tag',
|
||||
}
|
||||
}],
|
||||
}, {
|
||||
actionKey : 'key-02-04',
|
||||
actionTitle: 'Submenu Action #4',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'sun.haze',
|
||||
}
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
menuTitle: 'Inline Submenu #2',
|
||||
menuOptions: ['displayInline'],
|
||||
menuItems: [{
|
||||
actionKey : 'key-03' ,
|
||||
actionTitle : 'Inline Submenu Action #2',
|
||||
menuAttributes: ['disabled'],
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'suit.heart',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-04' ,
|
||||
actionTitle: 'Inline Submenu Action #3',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'suit.club',
|
||||
}
|
||||
}],
|
||||
}, {
|
||||
actionKey : 'key-05' ,
|
||||
actionTitle : 'Action #4',
|
||||
menuAttributes: ['destructive'],
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'trash',
|
||||
}
|
||||
}]
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,110 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
|
||||
export class ContextMenuViewTest03 extends React.PureComponent {
|
||||
constructor(props){
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
actionState1: false,
|
||||
actionState2: false,
|
||||
actionState3: false,
|
||||
};
|
||||
};
|
||||
|
||||
_handleOnPressMenuItem = ({nativeEvent}) => {
|
||||
switch (nativeEvent.actionKey) {
|
||||
case 'key-01':
|
||||
this.setState((prevState) => ({
|
||||
actionState1: !prevState.actionState1
|
||||
}));
|
||||
break;
|
||||
|
||||
case 'key-02':
|
||||
this.setState((prevState) => ({
|
||||
actionState2: !prevState.actionState2
|
||||
}));
|
||||
break;
|
||||
|
||||
case 'key-03':
|
||||
this.setState((prevState) => ({
|
||||
actionState3: !prevState.actionState3
|
||||
}));
|
||||
break;
|
||||
|
||||
case 'key-04':
|
||||
this.setState({
|
||||
actionState1: false,
|
||||
actionState2: false,
|
||||
actionState3: false,
|
||||
});
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
||||
render(){
|
||||
const state = this.state;
|
||||
|
||||
const resetEnabled = (
|
||||
state.actionState1 ||
|
||||
state.actionState2 ||
|
||||
state.actionState3
|
||||
);
|
||||
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Test #3'}
|
||||
subtitle={'toggle menuState'}
|
||||
desc={`Test for toggling the menuState on/off`}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={this._handleOnPressMenuItem}
|
||||
onPressMenuPreview={() => alert('onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewTest03',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: `Action 1: ${state.actionState1? 'on' : 'off'}`,
|
||||
menuState : (state.actionState1? 'on' : 'off'),
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'heart',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-02',
|
||||
actionTitle: `Action 2: ${state.actionState2? 'on' : 'off'}`,
|
||||
menuState : (state.actionState2? 'on' : 'off'),
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'suit.club',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-03',
|
||||
actionTitle: `Action 3: ${state.actionState3? 'on' : 'off'}`,
|
||||
menuState : (state.actionState3? 'on' : 'off'),
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'suit.spade',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-04',
|
||||
actionTitle : `Reset All`,
|
||||
menuAttributes: [resetEnabled? 'destructive' : 'hidden'],
|
||||
menuState : 'off',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'trash',
|
||||
}
|
||||
}]
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,110 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export class ContextMenuViewTest04 extends React.PureComponent {
|
||||
constructor(props){
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
actionToggle1: false,
|
||||
actionToggle2: false,
|
||||
actionToggle3: false,
|
||||
};
|
||||
};
|
||||
|
||||
_handleOnPressMenuItem = ({nativeEvent}) => {
|
||||
switch (nativeEvent.actionKey) {
|
||||
case 'key-01':
|
||||
this.setState((prevState) => ({
|
||||
actionToggle1: !prevState.actionToggle1
|
||||
}));
|
||||
break;
|
||||
|
||||
case 'key-02':
|
||||
this.setState((prevState) => ({
|
||||
actionToggle2: !prevState.actionToggle2
|
||||
}));
|
||||
break;
|
||||
|
||||
case 'key-03':
|
||||
this.setState((prevState) => ({
|
||||
actionToggle3: !prevState.actionToggle3
|
||||
}));
|
||||
break;
|
||||
|
||||
case 'key-04':
|
||||
this.setState({
|
||||
actionToggle1: false,
|
||||
actionToggle2: false,
|
||||
actionToggle3: false,
|
||||
});
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
||||
render(){
|
||||
const state = this.state;
|
||||
|
||||
const resetEnabled = (
|
||||
state.actionToggle1 ||
|
||||
state.actionToggle2 ||
|
||||
state.actionToggle3
|
||||
);
|
||||
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Test #4'}
|
||||
subtitle={'toggle icons'}
|
||||
desc={`Test for toggling the menu icons from state`}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={this._handleOnPressMenuItem}
|
||||
onPressMenuPreview={() => alert('onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewTest04',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: `Action 1: ${state.actionToggle1? 'on' : 'off'}`,
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: (state.actionToggle1? 'heart.fill' : 'heart'),
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-02',
|
||||
actionTitle: `Action 2: ${state.actionToggle2? 'on' : 'off'}`,
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: (state.actionToggle2? 'suit.club.fill' : 'suit.club'),
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-03',
|
||||
actionTitle: `Action 3: ${state.actionToggle3? 'on' : 'off'}`,
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: (state.actionToggle3? 'suit.spade.fill' : 'suit.spade'),
|
||||
}
|
||||
}, {
|
||||
menuTitle : 'Inline Menu',
|
||||
menuOptions: ['displayInline'],
|
||||
menuItems : [{
|
||||
actionKey : 'key-04',
|
||||
actionTitle : `Reset All`,
|
||||
menuAttributes: [resetEnabled? 'destructive' : 'hidden'],
|
||||
menuState : 'off',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'trash',
|
||||
}
|
||||
}],
|
||||
}]
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,116 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, FlatList, View, Text } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
import * as Helpers from '../../functions/helpers';
|
||||
|
||||
|
||||
function handleEvent(that, event){
|
||||
const date = new Date();
|
||||
|
||||
const h = Helpers.pad(date.getHours ());
|
||||
const m = Helpers.pad(date.getMinutes());
|
||||
const s = Helpers.pad(date.getSeconds());
|
||||
|
||||
const ms = Helpers.pad(date.getMilliseconds(), 3);
|
||||
|
||||
that.setState((prevState) => ({
|
||||
events: [{
|
||||
timestamp: `${h}:${m}:${s}.${ms}`,
|
||||
type: event
|
||||
}, ...prevState.events]
|
||||
}));
|
||||
};
|
||||
|
||||
export class ContextMenuViewTest05 extends React.PureComponent {
|
||||
constructor(props){
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
events: [],
|
||||
};
|
||||
};
|
||||
|
||||
_renderItem = ({item, index}) => {
|
||||
const { events } = this.state;
|
||||
const eventCount = events.length;
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Text>
|
||||
{`${Helpers.pad(eventCount - index, 3)} - ${item.timestamp} - `}
|
||||
<Text style={{fontWeight: 'bold'}}>
|
||||
{item.type}
|
||||
</Text>
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
render(){
|
||||
const state = this.state;
|
||||
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
style={styles.exampleContextMenu}
|
||||
title={'Test #5'}
|
||||
subtitle={'context menu events'}
|
||||
desc={`Test for logging the menu events`}
|
||||
// `ContextMenuView` Props
|
||||
onMenuWillShow ={() => handleEvent(this, 'onMenuWillShow' )}
|
||||
onMenuWillHide ={() => handleEvent(this, 'onMenuWillHide' )}
|
||||
onMenuWillCancel ={() => handleEvent(this, 'onMenuWillCancel' )}
|
||||
onMenuDidShow ={() => handleEvent(this, 'onMenuDidShow' )}
|
||||
onMenuDidHide ={() => handleEvent(this, 'onMenuDidHide' )}
|
||||
onMenuDidCancel ={() => handleEvent(this, 'onMenuDidCancel' )}
|
||||
onPressMenuItem ={() => handleEvent(this, 'onPressMenuItem' )}
|
||||
onPressMenuPreview={() => handleEvent(this, 'onPressMenuPreview')}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewTest05',
|
||||
menuItems: [{
|
||||
actionKey : 'key-01',
|
||||
actionTitle: 'Action #1',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'folder',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-02' ,
|
||||
actionTitle: 'Action #2',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'dial.fill',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'key-03' ,
|
||||
actionTitle: 'Action #3',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'archivebox.fill',
|
||||
}
|
||||
}],
|
||||
}}
|
||||
>
|
||||
<FlatList
|
||||
style={styles.scrollview}
|
||||
data={state.events}
|
||||
renderItem={this._renderItem}
|
||||
keyExtractor={item => item.timestamp}
|
||||
/>
|
||||
</ExampleContextMenuItem>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
exampleContextMenu: {
|
||||
|
||||
},
|
||||
scrollview: {
|
||||
flex: 1,
|
||||
height: 100,
|
||||
marginTop: 7,
|
||||
},
|
||||
});
|
||||
@ -1,86 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export class ContextMenuViewTest06 extends React.PureComponent {
|
||||
constructor(props){
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
itemCount: 0,
|
||||
};
|
||||
};
|
||||
|
||||
_hanldeOnPressMenuItem = ({nativeEvent}) => {
|
||||
switch (nativeEvent.actionKey) {
|
||||
case 'add-action':
|
||||
this.setState((prevState) => ({
|
||||
itemCount: ((prevState.itemCount ?? 0) + 1)
|
||||
}));
|
||||
break;
|
||||
|
||||
case 'delete-all':
|
||||
this.setState({
|
||||
itemCount: 0,
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
alert(`onPressMenuItem: ${nativeEvent.actionKey}`);
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
||||
render(){
|
||||
const { itemCount } = this.state;
|
||||
const menuItems = [...Array(itemCount).keys()];
|
||||
|
||||
const hasItems = (itemCount > 0);
|
||||
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Test #6'}
|
||||
subtitle={'add menu action'}
|
||||
desc={`Test for programmatically adding a menu action`}
|
||||
// `ContextMenuView` Props
|
||||
onPressMenuItem={this._hanldeOnPressMenuItem}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewTest06',
|
||||
menuItems: [{
|
||||
actionKey : 'add-action',
|
||||
actionTitle: 'Add Action',
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'plus',
|
||||
}
|
||||
}, {
|
||||
actionKey : 'delete-all',
|
||||
actionTitle : 'Delete All',
|
||||
menuAttributes: [hasItems? 'destructive' : 'disabled'],
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'trash',
|
||||
}
|
||||
}, {
|
||||
menuTitle : 'submenu',
|
||||
menuOptions: ['displayInline'],
|
||||
menuItems : menuItems.map(item => ({
|
||||
actionKey : `item-key-${item}`,
|
||||
actionTitle: `Action #${item}`,
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: (item % 2 == 0)? 'heart.fill' : 'heart',
|
||||
}
|
||||
})),
|
||||
}],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,294 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, View, Text, Switch, findNodeHandle } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
class Test extends React.Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
};
|
||||
};
|
||||
|
||||
render(){
|
||||
return(
|
||||
<View
|
||||
ref={r => this.viewRef = r}
|
||||
style={{width: 100, height: 100, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center'}}
|
||||
>
|
||||
<Text>{this.state.node}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export class ContextMenuViewTest07 extends React.PureComponent {
|
||||
constructor(props){
|
||||
super(props);
|
||||
|
||||
this.interval = null;
|
||||
|
||||
this.state = {
|
||||
counter: 0,
|
||||
targetViewNode: null,
|
||||
// flags for switch
|
||||
isResizeAnimated : true ,
|
||||
togglePreviewType : false,
|
||||
togglePreviewSize : false,
|
||||
toggleBgTransparent : false,
|
||||
toggleTargetViewNode: false,
|
||||
togglePreferredCommitStyle: false,
|
||||
};
|
||||
};
|
||||
|
||||
render(){
|
||||
const state = this.state;
|
||||
|
||||
let opaque = 'white';
|
||||
let transp = 'rgba(255,255,255,0.5)';
|
||||
|
||||
const previewConfig = {
|
||||
previewType : (state.togglePreviewType ? 'CUSTOM' : 'DEFAULT'),
|
||||
previewSize : (state.togglePreviewSize ? 'STRETCH' : 'INHERIT'),
|
||||
backgroundColor: (state.toggleBgTransparent ? opaque : transp ),
|
||||
...(state.toggleTargetViewNode && {
|
||||
targetViewNode: state.targetViewNode,
|
||||
}),
|
||||
isResizeAnimated: state.isResizeAnimated,
|
||||
preferredCommitStyle: (state.togglePreferredCommitStyle? 'pop' : 'dismiss'),
|
||||
};
|
||||
|
||||
return(
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
title={'Test #7'}
|
||||
subtitle={'Custom Preview'}
|
||||
desc={`Test for the different possible custom menu preview config`}
|
||||
// `ContextMenuView` Props
|
||||
{...{previewConfig}}
|
||||
onMenuWillShow={() => {
|
||||
this.interval = setInterval(() => {
|
||||
this.setState((prevState) => ({
|
||||
counter: prevState.counter + 1,
|
||||
}));
|
||||
}, 1000);
|
||||
}}
|
||||
onMenuWillHide={() => {
|
||||
if(!this.interval) return;
|
||||
clearInterval(this.interval);
|
||||
}}
|
||||
renderPreview={() => (
|
||||
<View style={[styles.previewContainer]}>
|
||||
<Text style={{fontWeight: '700', fontSize: 32}}>
|
||||
{'Hello World'}
|
||||
</Text>
|
||||
{(state.counter % 2 == 0) && (
|
||||
<Text style={{fontWeight: '700', fontSize: 32, marginTop: 10}}>
|
||||
{`Counter: ${state.counter}`}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
onPressMenuItem={({nativeEvent}) => {
|
||||
switch (nativeEvent.actionKey) {
|
||||
case 'add':
|
||||
this.setState((prevState) => ({
|
||||
counter: (prevState.counter + 100)
|
||||
}));
|
||||
break;
|
||||
|
||||
case 'reset':
|
||||
this.setState({ counter: 0 });
|
||||
break;
|
||||
};
|
||||
}}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewTest07',
|
||||
menuItems: [{
|
||||
actionKey : 'add',
|
||||
actionTitle: `Add 100`,
|
||||
discoverabilityTitle: `Current counter ${state.counter}`,
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'plus',
|
||||
}
|
||||
},
|
||||
(state.counter > 0) && {
|
||||
actionKey : 'reset',
|
||||
actionTitle : `Reset Counter`,
|
||||
menuAttributes: ['destructive'],
|
||||
icon: {
|
||||
iconType : 'SYSTEM',
|
||||
iconValue: 'trash',
|
||||
}
|
||||
}],
|
||||
}}
|
||||
>
|
||||
{state.toggleTargetViewNode && (
|
||||
<View
|
||||
style={styles.targetViewContainer}
|
||||
ref={ref => {
|
||||
this.setState({
|
||||
targetViewNode: findNodeHandle(ref)
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Text style={styles.targetViewText}>
|
||||
{'Target View'}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.rowContainer}>
|
||||
<View style={styles.textRowContainer}>
|
||||
<Text style={styles.textRowTitle}>
|
||||
{'previewType'}
|
||||
</Text>
|
||||
<Text style={styles.textRowSubtitle}>
|
||||
<Text style={{fontWeight: 'bold'}}>
|
||||
{'Value: '}
|
||||
</Text>
|
||||
{previewConfig.previewType}
|
||||
</Text>
|
||||
</View>
|
||||
<Switch
|
||||
value={state.togglePreviewType}
|
||||
onValueChange={(flag) => {
|
||||
this.setState({togglePreviewType: flag});
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.rowContainer}>
|
||||
<View style={styles.textRowContainer}>
|
||||
<Text style={styles.textRowTitle}>
|
||||
{'previewSize'}
|
||||
</Text>
|
||||
<Text style={styles.textRowSubtitle}>
|
||||
<Text style={{fontWeight: 'bold'}}>
|
||||
{'Value: '}
|
||||
</Text>
|
||||
{previewConfig.previewSize}
|
||||
</Text>
|
||||
</View>
|
||||
<Switch
|
||||
value={state.togglePreviewSize}
|
||||
onValueChange={(flag) => {
|
||||
this.setState({togglePreviewSize: flag});
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.rowContainer}>
|
||||
<View style={styles.textRowContainer}>
|
||||
<Text style={styles.textRowTitle}>
|
||||
{'backgroundColor'}
|
||||
</Text>
|
||||
<Text style={styles.textRowSubtitle}>
|
||||
<Text style={{fontWeight: 'bold'}}>
|
||||
{'Value: '}
|
||||
</Text>
|
||||
{previewConfig.backgroundColor}
|
||||
</Text>
|
||||
</View>
|
||||
<Switch
|
||||
value={state.toggleBgTransparent}
|
||||
onValueChange={(flag) => {
|
||||
this.setState({toggleBgTransparent: flag});
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.rowContainer}>
|
||||
<View style={styles.textRowContainer}>
|
||||
<Text style={styles.textRowTitle}>
|
||||
{'isResizeAnimated'}
|
||||
</Text>
|
||||
<Text style={styles.textRowSubtitle}>
|
||||
<Text style={{fontWeight: 'bold'}}>
|
||||
{'Value: '}
|
||||
</Text>
|
||||
{previewConfig.isResizeAnimated? 'true' : 'false'}
|
||||
</Text>
|
||||
</View>
|
||||
<Switch
|
||||
value={state.isResizeAnimated}
|
||||
onValueChange={(flag) => {
|
||||
this.setState({isResizeAnimated: flag});
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.rowContainer}>
|
||||
<View style={styles.textRowContainer}>
|
||||
<Text style={styles.textRowTitle}>
|
||||
{'preferredCommitStyle'}
|
||||
</Text>
|
||||
<Text style={styles.textRowSubtitle}>
|
||||
<Text style={{fontWeight: 'bold'}}>
|
||||
{'Value: '}
|
||||
</Text>
|
||||
{previewConfig.preferredCommitStyle}
|
||||
</Text>
|
||||
</View>
|
||||
<Switch
|
||||
value={state.togglePreferredCommitStyle}
|
||||
onValueChange={(flag) => {
|
||||
this.setState({togglePreferredCommitStyle: flag});
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View style={styles.rowContainer}>
|
||||
<View style={styles.textRowContainer}>
|
||||
<Text style={styles.textRowTitle}>
|
||||
{'targetViewNode'}
|
||||
</Text>
|
||||
<Text style={styles.textRowSubtitle}>
|
||||
<Text style={{fontWeight: 'bold'}}>
|
||||
{'Value: '}
|
||||
</Text>
|
||||
{previewConfig.targetViewNode}
|
||||
</Text>
|
||||
</View>
|
||||
<Switch
|
||||
value={state.toggleTargetViewNode}
|
||||
onValueChange={(flag) => {
|
||||
this.setState({toggleTargetViewNode: flag});
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</ExampleContextMenuItem>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
rowContainer: {
|
||||
flexDirection: 'row',
|
||||
marginVertical: 10,
|
||||
alignItems: 'center',
|
||||
},
|
||||
textRowContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
textRowTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '400'
|
||||
},
|
||||
textRowSubtitle: {
|
||||
color: 'rgba(0,0,0,0.6)'
|
||||
},
|
||||
targetViewContainer: {
|
||||
padding: 15,
|
||||
backgroundColor: 'rgba(255,255,255,0.5)',
|
||||
borderRadius: 10,
|
||||
marginVertical: 10,
|
||||
alignItems: 'center',
|
||||
},
|
||||
targetViewText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '400',
|
||||
},
|
||||
previewContainer: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 20
|
||||
}
|
||||
});
|
||||
@ -1,76 +0,0 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { StyleSheet, View, Text } from 'react-native';
|
||||
|
||||
import { ExampleContextMenuItem } from '../ExampleContextMenuItem';
|
||||
|
||||
|
||||
export class ContextMenuViewTest08 extends React.PureComponent {
|
||||
constructor(props){
|
||||
super(props);
|
||||
|
||||
this.timer = null;
|
||||
|
||||
this.state = {
|
||||
counter: 0,
|
||||
};
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
this.resetTimer();
|
||||
};
|
||||
|
||||
startTimer = () => {
|
||||
this.timer = setInterval(() => {
|
||||
const { counter } = this.state;
|
||||
if (counter < 3){
|
||||
this.setState(prevState => ({
|
||||
counter: (prevState.counter + 1)
|
||||
}));
|
||||
|
||||
} else {
|
||||
const ref = this.contexMenuItemRef.getContextMenuRef()
|
||||
ref.dismissMenu();
|
||||
this.resetTimer();
|
||||
};
|
||||
}, 500);
|
||||
};
|
||||
|
||||
resetTimer = () => {
|
||||
if(this.timer){
|
||||
clearInterval(this.timer);
|
||||
this.setState({ counter: 0 });
|
||||
};
|
||||
};
|
||||
|
||||
render(){
|
||||
return (
|
||||
<ExampleContextMenuItem
|
||||
{...this.props}
|
||||
ref={r => this.contexMenuItemRef = r}
|
||||
title={'Test #8'}
|
||||
subtitle={'dismiss menu'}
|
||||
desc={`Test for programatically dismissing the menu.`}
|
||||
// `ContextMenuView` Props
|
||||
previewConfig={{
|
||||
previewType: 'CUSTOM',
|
||||
backgroundColor: 'white'
|
||||
}}
|
||||
renderPreview={() => (
|
||||
<View style={{ padding: 20 }}>
|
||||
<Text style={{fontSize: 32}}>
|
||||
{`Will Dismiss in: ${3 - this.state.counter}`}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
onMenuDidShow={() => this.startTimer()}
|
||||
onMenuDidHide={() => this.resetTimer()}
|
||||
menuConfig={{
|
||||
menuTitle: 'ContextMenuViewTest08',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
});
|
||||
@ -1,156 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, View, Text, Image } from 'react-native';
|
||||
import Proptypes from 'prop-types';
|
||||
|
||||
import * as Colors from '../constants/Colors';
|
||||
|
||||
import { ContextMenuButton } from 'react-native-ios-context-menu';
|
||||
|
||||
|
||||
function ContextMenuButtonContents(props){
|
||||
const rootContainerStyle = {
|
||||
backgroundColor: (props.menuVisible
|
||||
? Colors.AMBER .A700
|
||||
: Colors.ORANGE.A700
|
||||
)
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[styles.contextMenuButtonContentsContainer, rootContainerStyle]}>
|
||||
<Text style={styles.textContextMenuButton}>
|
||||
{props.buttonTitle}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export class ExampleContextMenuButtonItem extends React.Component {
|
||||
static proptypes = {
|
||||
title : Proptypes.string,
|
||||
subtitle : Proptypes.string,
|
||||
desc : Proptypes.string,
|
||||
index : Proptypes.number,
|
||||
buttonTitle: Proptypes.string,
|
||||
showButton : Proptypes.bool ,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
showButton: true,
|
||||
};
|
||||
|
||||
render(){
|
||||
const { title, subtitle, desc, index, buttonTitle, showButton, children, ...props } = this.props;
|
||||
|
||||
return(
|
||||
<View style={styles.rootContainer}>
|
||||
<View style={styles.titleContainer}>
|
||||
<Text style={styles.textTitleIndex}>
|
||||
{`${index ?? 0}. `}
|
||||
</Text>
|
||||
<Text style={styles.textTitle}>
|
||||
{title ?? 'N/A'}
|
||||
{subtitle && (
|
||||
<Text style={styles.textSubtitle}>
|
||||
{` (${subtitle})`}
|
||||
</Text>
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.subtitleContainer}>
|
||||
<Text style={styles.textDescription}>
|
||||
<Text style={styles.textDescriptionLabel}>
|
||||
{'Description: '}
|
||||
</Text>
|
||||
{desc ?? "N/A"}
|
||||
</Text>
|
||||
{children}
|
||||
</View>
|
||||
{showButton && (
|
||||
<View style={styles.buttonContainer}>
|
||||
<ContextMenuButton
|
||||
style={styles.contextMenuButtonA}
|
||||
{...props}
|
||||
>
|
||||
<ContextMenuButtonContents
|
||||
buttonTitle={buttonTitle ?? '⭐️ Context Menu Button'}
|
||||
/>
|
||||
</ContextMenuButton>
|
||||
<ContextMenuButton
|
||||
style={styles.contextMenuButtonB}
|
||||
{...props}
|
||||
>
|
||||
<ContextMenuButtonContents
|
||||
buttonTitle={'⭐️'}
|
||||
/>
|
||||
</ContextMenuButton>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
rootContainer: {
|
||||
borderRadius: 10,
|
||||
margin: 20,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: Colors.AMBER[50]
|
||||
},
|
||||
titleContainer: {
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: 15,
|
||||
paddingVertical: 8,
|
||||
alignItems: 'center',
|
||||
backgroundColor: Colors.AMBER.A700
|
||||
},
|
||||
textTitle: {
|
||||
flex: 1,
|
||||
fontSize: 17,
|
||||
fontWeight: '700',
|
||||
color: 'white',
|
||||
marginLeft: 2,
|
||||
},
|
||||
textTitleIndex: {
|
||||
fontSize: 17,
|
||||
fontWeight: '700',
|
||||
color: 'rgba(255,255,255,0.75)',
|
||||
},
|
||||
textSubtitle: {
|
||||
fontSize: 14,
|
||||
color: 'rgba(255,255,255,0.75)',
|
||||
fontWeight: '300',
|
||||
},
|
||||
subtitleContainer: {
|
||||
paddingHorizontal: 15,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
textDescription: {
|
||||
fontWeight: '300',
|
||||
color: 'rgba(0,0,0,0.75)'
|
||||
},
|
||||
textDescriptionLabel: {
|
||||
color: Colors.AMBER[1100],
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
buttonContainer: {
|
||||
flexDirection: 'row',
|
||||
margin: 10,
|
||||
},
|
||||
contextMenuButtonA: {
|
||||
flex: 1,
|
||||
},
|
||||
contextMenuButtonB: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginLeft: 10,
|
||||
},
|
||||
contextMenuButtonContentsContainer: {
|
||||
padding: 10,
|
||||
borderRadius: 10,
|
||||
},
|
||||
textContextMenuButton: {
|
||||
color: 'white',
|
||||
fontWeight: '500'
|
||||
},
|
||||
});
|
||||
@ -1,123 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, View, Text, Image } from 'react-native';
|
||||
import Proptypes from 'prop-types';
|
||||
|
||||
import * as Colors from '../constants/Colors';
|
||||
|
||||
import { ContextMenuView } from 'react-native-ios-context-menu';
|
||||
|
||||
function ContextMenuContent(props){
|
||||
const titleContainerStyle = {
|
||||
backgroundColor: (props.menuVisible
|
||||
? Colors.PURPLE.A700
|
||||
: Colors.BLUE .A700
|
||||
)
|
||||
};
|
||||
|
||||
const subtitleContainerStyle = {
|
||||
backgroundColor: (props.menuVisible
|
||||
? Colors.PURPLE[100]
|
||||
: Colors.BLUE [100]
|
||||
)
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<View style={[styles.titleContainer, titleContainerStyle]}>
|
||||
<Text style={styles.textTitleIndex}>
|
||||
{`${props.index ?? 0}. `}
|
||||
</Text>
|
||||
<Text style={styles.textTitle}>
|
||||
{props.title ?? 'N/A'}
|
||||
{props.subtitle && (
|
||||
<Text style={styles.textSubtitle}>
|
||||
{` (${props.subtitle})`}
|
||||
</Text>
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={[styles.subtitleContainer, subtitleContainerStyle]}>
|
||||
<Text style={styles.textDescription}>
|
||||
<Text style={styles.textDescriptionLabel}>
|
||||
{'Description: '}
|
||||
</Text>
|
||||
{props.desc ?? "N/A"}
|
||||
</Text>
|
||||
{props.children}
|
||||
</View>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export class ExampleContextMenuItem extends React.Component {
|
||||
static proptypes = {
|
||||
title : Proptypes.string,
|
||||
subtitle: Proptypes.string,
|
||||
desc : Proptypes.string,
|
||||
index : Proptypes.number,
|
||||
};
|
||||
|
||||
getContextMenuRef = () => {
|
||||
return this.contexMenuRef;
|
||||
};
|
||||
|
||||
render(){
|
||||
const { title, subtitle, desc, index, style, children, ...props } = this.props;
|
||||
|
||||
return(
|
||||
<ContextMenuView
|
||||
ref={r => this.contexMenuRef = r}
|
||||
style={[styles.rootContainer, style]}
|
||||
{...props}
|
||||
>
|
||||
<ContextMenuContent {...{title, subtitle, desc, index}}>
|
||||
{children}
|
||||
</ContextMenuContent>
|
||||
</ContextMenuView>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
rootContainer: {
|
||||
borderRadius: 10,
|
||||
margin: 20,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
titleContainer: {
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: 15,
|
||||
paddingVertical: 8,
|
||||
alignItems: 'center',
|
||||
},
|
||||
textTitle: {
|
||||
flex: 1,
|
||||
fontSize: 17,
|
||||
fontWeight: '700',
|
||||
color: 'white',
|
||||
marginLeft: 2,
|
||||
},
|
||||
textTitleIndex: {
|
||||
fontSize: 17,
|
||||
fontWeight: '700',
|
||||
color: 'rgba(255,255,255,0.75)',
|
||||
},
|
||||
textSubtitle: {
|
||||
fontSize: 14,
|
||||
color: 'rgba(255,255,255,0.75)',
|
||||
fontWeight: '300',
|
||||
},
|
||||
subtitleContainer: {
|
||||
paddingHorizontal: 15,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
textDescription: {
|
||||
fontWeight: '300',
|
||||
color: 'rgba(0,0,0,0.75)'
|
||||
},
|
||||
textDescriptionLabel: {
|
||||
color: Colors.BLUE[1100],
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user