Skip to content

Commit

Permalink
chore: update menu list props and comps
Browse files Browse the repository at this point in the history
  • Loading branch information
@enesozturk
enesozturk committed Mar 3, 2021
1 parent ab78708 commit 61212ef
Show file tree
Hide file tree
Showing 14 changed files with 174 additions and 108 deletions.
12 changes: 6 additions & 6 deletions example/src/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,42 +6,42 @@ const IS_IOS = Platform.OS === 'ios';

const MenuItems = [
{
title: 'Reply',
text: 'Reply',
icon: null,
onPress: () => {
console.log('[ACTION]: Reply');
},
},
{
title: 'Copy',
text: 'Copy',
icon: null,
onPress: () => {
console.log('[ACTION]: Copy');
},
},
{
title: 'Edit',
text: 'Edit',
icon: null,
onPress: () => {
console.log('[ACTION]: Edit');
},
},
{
title: 'Pin',
text: 'Pin',
icon: null,
onPress: () => {
console.log('[ACTION]: Pin');
},
},
{
title: 'Forward',
text: 'Forward',
icon: null,
onPress: () => {
console.log('[ACTION]: Forward');
},
},
{
title: 'Delete',
text: 'Delete',
icon: null,
onPress: () => {
console.log('[ACTION]: Delete');
Expand Down
4 changes: 2 additions & 2 deletions example/src/screens/Clubhouse/ClubhouseNavButtonLeft.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ const ClubhouseNavButtonLeft = () => {
<View style={styles.container}>
<HoldItem
items={[
{ title: '@enesozt', onProfile: () => {} },
{ title: 'All Rooms', onProfile: () => {} },
{ text: '@enesozt', onPress: () => {} },
{ text: 'All Rooms', onPress: () => {} },
]}
>
<Icons name="chevron-left" size={32} style={styles.icon} />
Expand Down
26 changes: 17 additions & 9 deletions example/src/screens/Playground/Playground.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,51 +11,59 @@ import Icon from 'react-native-vector-icons/Feather';
interface PlaygroundProps {}

const Playground = ({}: PlaygroundProps) => {
const { theme } = useAppContext();
const { theme, toggleTheme } = useAppContext();

// [TODO]: MenuItem does not render icon
const items = useMemo(
() => [
{
title: 'Action 1',
isTitle: true,
text: 'Actions',
onPress: () => {
console.log('[ACTION]: Action 1');
},
},
{
text: 'Theme Change',
icon: () => (
<Icon
name="star"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {
console.log('[ACTION]: Action 1');
toggleTheme();
},
},
{
title: 'Action 2',
text: 'Action 2',
icon: () => (
<Icon
name="smile"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {
console.log('[ACTION]: Action 2');
},
},
{
title: 'Action 3',
text: 'Action 3',
onPress: () => {
console.log('[ACTION]: Action 3');
},
},
{
title: 'Action 4',
text: 'Action 4',
onPress: () => {
console.log('[ACTION]: Action 4');
},
isDestructive: true,
},
],
[theme]
[theme, toggleTheme]
);

const themeStyles = useMemo(() => {
Expand Down
12 changes: 6 additions & 6 deletions example/src/screens/Telegram/Telegram.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,25 @@ const Telegram = ({}: TelegramProps) => {
const profileMenu = useMemo(
() => [
{
title: 'Add Account',
text: 'Add Account',
icon: () => (
<Icon
name="plus"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {
console.log('[ACTION]: Add Account');
},
},
{
title: 'Enes Ozturk',
text: 'Enes Ozturk',
icon: () => (
<Icon
name="user"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {
Expand All @@ -50,12 +50,12 @@ const Telegram = ({}: TelegramProps) => {
const chatMenu = useMemo(
() => [
{
title: 'Add Folder',
text: 'Add Folder',
icon: () => (
<Icon
name="plus"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {
Expand Down
44 changes: 22 additions & 22 deletions example/src/screens/Whatsapp/ChatPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,71 +17,71 @@ const ChatPage = () => {
const myMenu = useMemo(
() => [
{
title: 'Reply',
text: 'Reply',
icon: () => (
<Icon
name="corner-down-left"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {
console.log('[ACTION]: Reply');
},
},
{
title: 'Copy',
text: 'Copy',
icon: () => (
<Icon
name="copy"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {
console.log('[ACTION]: Copy');
},
},
{
title: 'Edit',
text: 'Edit',
icon: () => (
<Icon
name="edit"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {},
},
{
title: 'Pin',
text: 'Pin',
icon: () => (
<Icon
name="map-pin"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {},
},
{
title: 'Forward',
text: 'Forward',
icon: () => (
<Icon
name="corner-up-right"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {},
},
{
title: 'Delete',
text: 'Delete',
icon: () => (
<Icon
name="trash-2"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {},
Expand All @@ -93,60 +93,60 @@ const ChatPage = () => {
const otherMenu = useMemo(
() => [
{
title: 'Reply',
text: 'Reply',
icon: () => (
<Icon
name="corner-down-left"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {
console.log('[ACTION]: Reply');
},
},
{
title: 'Copy',
text: 'Copy',
icon: () => (
<Icon
name="copy"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {
console.log('[ACTION]: Copy');
},
},
{
title: 'Pin',
text: 'Pin',
icon: () => (
<Icon
name="map-pin"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {},
},
{
title: 'Forward',
text: 'Forward',
icon: () => (
<Icon
name="corner-up-right"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {},
},
{
title: 'Delete',
text: 'Delete',
icon: () => (
<Icon
name="trash-2"
size={18}
color={theme == 'light' ? 'black' : 'white'}
color={theme === 'light' ? 'black' : 'white'}
/>
),
onPress: () => {},
Expand Down
14 changes: 10 additions & 4 deletions src/components/backdrop/Backdrop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ import {
HOLD_ITEM_TRANSFORM_DURATION,
WINDOW_HEIGHT,
} from '../../constants';
import {
BACKDROP_LIGHT_BACKGROUND_COLOR,
BACKDROP_DARK_BACKGROUND_COLOR,
} from './constants';
import { useInternal } from '../../hooks';

const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
Expand Down Expand Up @@ -85,10 +89,12 @@ const BackdropComponent = () => {
});

const animatedInnerContainerStyle = useAnimatedStyle(() => {
return {
backgroundColor:
theme.value === 'light' ? 'rgba(0,0,0,0.2)' : 'rgba(0,0,0,0.75)',
};
const backgroundColor =
theme.value === 'light'
? BACKDROP_LIGHT_BACKGROUND_COLOR
: BACKDROP_DARK_BACKGROUND_COLOR;

return { backgroundColor };
}, [theme]);

return (
Expand Down
2 changes: 2 additions & 0 deletions src/components/backdrop/constants.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export const BACKDROP_LIGHT_BACKGROUND_COLOR = 'rgba(0,0,0,0.2)';
export const BACKDROP_DARK_BACKGROUND_COLOR = 'rgba(0,0,0,0.75)';
Loading

0 comments on commit 61212ef

Please sign in to comment.