Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-22 22:49:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor Pressable Button

Browse Source
This commit is contained in:
ammarahm-ed
2020-12-01 17:51:39 +05:00
parent 116307de7b
commit 470f5c90c0
22 changed files with 132 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/mobile/src/components/ActionIcon/index.js
View File

@@ -27,15 +27,11 @@ export const ActionIcon = ({
testID={testID}
onPress={onPress}
hitSlop={{top: top, left: left, right: right, bottom: bottom}}
color="transparent"
disabled={disabled}
selectedColor={colors.nav}
alpha={!colors.night ? -0.02 : 0.02}
opacity={1}
type="gray"
customStyle={{
width: 40,
height: 40,
backgroundColor: disabled ? colors.bg : null,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 100,

3
apps/mobile/src/components/ActionSheet/index.js
View File

@@ -72,6 +72,7 @@ export default class ActionSheet extends Component {
this.isRecoiling = false;
this.targetId = null;
this.offsetY = 0;
this.borderRadius = new Animated.Value(10);
}
waitAsync = (ms) =>
@@ -574,6 +575,8 @@ export default class ActionSheet extends Component {
translateY: this.transformValue,
},
],
borderTopRightRadius:this.borderRadius,
borderTopLeftRadius:this.borderRadius
},
]}>
{gestureEnabled || headerAlwaysVisible ? (

10
apps/mobile/src/components/ActionSheetComponent/ActionSheetColorsSection.js
View File

@@ -43,13 +43,9 @@ export const ActionSheetColorsSection = ({item,close}) => {
return (
<PressableButton
color={RGB_Linear_Shade(
!colors.night ? -0.2 : 0.2,
hexToRGBA(color.value, 1),
)}
selectedColor={color.value}
alpha={!colors.night ? -0.1 : 0.1}
opacity={1}
type="accent"
accentColor={color.name.toLowerCase()}
testID={'icon-color-' + c}
key={color.value}
onPress={async () => {
await PremiumService.verify(async () => {

15
apps/mobile/src/components/Container/ContainerBottomButton.js
View File

@@ -3,6 +3,7 @@ import {Keyboard, Platform, View} from 'react-native';
import Animated, {Easing} from 'react-native-reanimated';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {notesnook} from '../../../e2e/test.ids';
import {useTracked} from '../../provider';
import {DDS} from '../../services/DeviceDetection';
import {getElevation, showContext} from '../../utils';
@@ -10,7 +11,12 @@ import {normalize, SIZE} from '../../utils/SizeUtils';
import {PressableButton} from '../PressableButton';
const translateY = new Animated.Value(0);
export const ContainerBottomButton = ({title, onPress, color,shouldShow =false}) => {
export const ContainerBottomButton = ({
title,
onPress,
color = 'accent',
shouldShow = false,
}) => {
const [state] = useTracked();
const {colors} = state;
const insets = useSafeAreaInsets();
@@ -59,9 +65,10 @@ export const ContainerBottomButton = ({title, onPress, color,shouldShow =false})
],
}}>
<PressableButton
testID={'container_bottom_btn'}
color={color || colors.accent}
selectedColor={color || colors.accent}
testID={notesnook.ids.default.addBtn}
type="accent"
accentColor={color || 'accent'}
accentText="light"
customStyle={{
...getElevation(5),
borderRadius: 100,

19
apps/mobile/src/components/DialogManager/index.js
View File

@@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Platform} from 'react-native';
import {Dimensions, Platform} from 'react-native';
import {
eSendEvent,
eSubscribeEvent,
@@ -48,6 +48,7 @@ import SortDialog from '../SortDialog';
import JumpToDialog from '../JumpToDialog';
import {GetPremium, translatePrem} from '../ActionSheetComponent/GetPremium';
import {sleep} from '../../utils/TimeUtils';
import { dHeight } from '../../utils';
export class DialogManager extends Component {
constructor(props) {
@@ -95,12 +96,7 @@ export class DialogManager extends Component {
};
_hideActionSheet = () => {
this.actionSheet._setModalVisible();
sleep(200).then(() => {
this.setState({
actionSheetVisible: false,
});
});
this.actionSheet._setModalVisible(false);
};
_showMoveNote = () => {
@@ -313,10 +309,12 @@ export class DialogManager extends Component {
ref={(ref) => (this.actionSheet = ref)}
containerStyle={{
backgroundColor: colors.bg,
width: DDS.isTab ? 500 : '100%',
width: DDS.isLargeTablet() ? 500 : '100%',
alignSelf: 'center',
borderRadius: 10,
marginBottom: DDS.isTab ? 50 : 0,
marginBottom: DDS.isLargeTablet() ? 50 : 0,
borderBottomRightRadius: DDS.isLargeTablet() ? 10 : 1,
borderBottomLeftRadius: DDS.isLargeTablet() ? 10 : 1,
}}
extraScroll={DDS.isTab ? 50 : 0}
indicatorColor={
@@ -350,6 +348,9 @@ export class DialogManager extends Component {
onClose={() => {
translatePrem.setValue(-800);
this.onActionSheetHide();
this.setState({
actionSheetVisible: false,
});
}}>
<ActionSheetComponent
item={item}

9
apps/mobile/src/components/Header/HeaderRightMenu.js
View File

@@ -18,8 +18,8 @@ export const HeaderRightMenu = () => {
<ActionIcon
onPress={async () => {
Navigation.navigate('Search',{
menu:false
Navigation.navigate('Search', {
menu: false,
});
}}
name="magnify"
@@ -99,9 +99,10 @@ const styles = StyleSheet.create({
},
rightBtn: {
justifyContent: 'center',
alignItems: 'flex-end',
alignItems: 'center',
height: 40,
width: 50,
width: 40,
marginLeft: 10,
paddingRight: 0,
},
});

7
apps/mobile/src/components/JumpToDialog/index.js
View File

@@ -128,12 +128,7 @@ const JumpToDialog = () => {
<PressableButton
key={item.title}
onPress={() => onPress(item, index)}
color={currentIndex === index ? colors.shade : 'transparent'}
selectedColor={
currentIndex === index ? colors.accent : colors.nav
}
alpha={!colors.night ? -0.02 : 0.02}
opacity={currentIndex === index ? 0.12 : 1}
type={currentIndex === index? 'shade' : 'gray'}
customStyle={{
minWidth: '20%',
maxWidth: '46%',

4
apps/mobile/src/components/Menu/ColorSection.js
View File

@@ -73,12 +73,12 @@ const ColorItem = ({item, index}) => {
return (
<PressableButton
key={item.id}
color={
customColor={
headerTextState?.id === item.id && item.type === headerTextState?.type
? COLORS_NOTE[item.title]
: 'transparent'
}
selectedColor={COLORS_NOTE[item.title]}
customSelectedColor={COLORS_NOTE[item.title]}
alpha={!colors.night ? -0.02 : 0.02}
opacity={0.12}
onPress={() => onPress(item)}

7
apps/mobile/src/components/Menu/MenuListItem.js
View File

@@ -53,14 +53,11 @@ export const MenuListItem = ({item, index, noTextMode, testID}) => {
testID={testID}
key={item.name + index}
onPress={_onPress}
color={
type={
headerTextState?.id === item.name.toLowerCase() + '_navigation'
? colors.shade
? 'shade'
: 'transparent'
}
selectedColor={colors.accent}
alpha={!colors.night ? -0.02 : 0.02}
opacity={0.12}
customStyle={{
width: noTextMode ? 50 : '100%',
alignSelf: 'center',

66
apps/mobile/src/components/Menu/TagsSection.js
View File

@@ -4,7 +4,11 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {useTracked} from '../../provider';
import {Actions} from '../../provider/Actions';
import {DDS} from '../../services/DeviceDetection';
import {eSendEvent, eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
import {
eSendEvent,
eSubscribeEvent,
eUnSubscribeEvent,
} from '../../services/EventManager';
import Navigation from '../../services/Navigation';
import {getElevation} from '../../utils';
import {db} from '../../utils/DB';
@@ -26,7 +30,6 @@ export const TagsSection = () => {
dispatch({type: Actions.MENU_PINS});
}, []);
const onPress = (item) => {
let params;
if (item.type === 'notebook') {
@@ -42,7 +45,6 @@ export const TagsSection = () => {
type: item.type,
});
rootNavigatorRef.current?.setParams(params);
} else if (item.type === 'tag') {
params = params = {
title: item.title,
@@ -118,8 +120,6 @@ const PinItem = ({item, index, onPress}) => {
const [visible, setVisible] = useState(false);
const [headerTextState, setHeaderTextState] = useState(null);
const onHeaderStateChange = (event) => {
if (event?.id === item.name) {
setHeaderTextState(event);
@@ -162,14 +162,11 @@ const PinItem = ({item, index, onPress}) => {
</BaseDialog>
)}
<PressableButton
color={
type={
headerTextState?.id === item.id && headerTextState?.type === item.type
? colors.shade
? 'shade'
: 'transparent'
}
selectedColor={colors.accent}
alpha={!colors.night ? -0.02 : 0.02}
opacity={0.12}
onLongPress={() => setVisible(true)}
onPress={() => onPress(item)}
customStyle={{
@@ -226,53 +223,4 @@ const PinItem = ({item, index, onPress}) => {
);
};
/*
{tags
.filter((o) => o.noteIds.length > 1)
.slice(0, tags.length > 10 ? 10 : tags.length)
.map((item) => (
<PressableButton
key={item.id}
color={
currentScreen === item.title.toLowerCase()
? colors.shade
: 'transparent'
}
selectedColor={colors.accent}
alpha={!colors.night ? -0.02 : 0.02}
opacity={0.12}
onPress={() => onPress(item)}
customStyle={{
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
width: '100%',
borderRadius: 0,
paddingHorizontal: 10,
height: 50,
}}>
<View
style={{
width: 35,
height: 35,
justifyContent: 'center',
alignItems: 'flex-start',
}}>
<Paragraph color={colors.accent} size={SIZE.md}>
#
</Paragraph>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '85%',
}}>
<Paragraph color={colors.heading}>{item.title}</Paragraph>
</View>
</PressableButton>
))}
*/

12
apps/mobile/src/components/Menu/TimeSince.js
View File

@@ -1,22 +1,22 @@
import React, {useEffect, useState} from 'react';
import {timeSince} from "../../utils/TimeUtils";
import {timeSince} from '../../utils/TimeUtils';
import Paragraph from '../Typography/Paragraph';
export const TimeSince = ({time}) => {
export const TimeSince = ({time, style,updateFrequency=30000}) => {
const [timeAgo, setTimeAgo] = useState(null);
useEffect(() => {
let t = timeSince(time);
setTimeAgo(t);
setTimeAgo(t);
let interval = setInterval(() => {
t = timeSince(time);
setTimeAgo(t);
}, 60000);
}, updateFrequency);
return () => {
clearInterval(interval);
interval = null;
};
},[]);
}, [time,updateFrequency]);
return <Paragraph>{timeAgo}</Paragraph>;
return <Paragraph style={style}>{timeAgo}</Paragraph>;
};

25
apps/mobile/src/components/Menu/UserSection.js
View File

@@ -1,16 +1,16 @@
import React from 'react';
import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
import {ActivityIndicator, TouchableOpacity, View} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { useTracked } from '../../provider';
import { Actions } from '../../provider/Actions';
import { eSendEvent, ToastEvent } from '../../services/EventManager';
import { SUBSCRIPTION_STATUS_STRINGS } from '../../utils';
import { db } from '../../utils/DB';
import { eOpenLoginDialog } from '../../utils/Events';
import { pv, SIZE } from '../../utils/SizeUtils';
import { PressableButton } from '../PressableButton';
import {useTracked} from '../../provider';
import {Actions} from '../../provider/Actions';
import {eSendEvent, ToastEvent} from '../../services/EventManager';
import {SUBSCRIPTION_STATUS_STRINGS} from '../../utils';
import {db} from '../../utils/DB';
import {eOpenLoginDialog} from '../../utils/Events';
import {pv, SIZE} from '../../utils/SizeUtils';
import {PressableButton} from '../PressableButton';
import Paragraph from '../Typography/Paragraph';
import { TimeSince } from './TimeSince';
import {TimeSince} from './TimeSince';
export const UserSection = ({noTextMode}) => {
const [state, dispatch] = useTracked();
@@ -116,10 +116,7 @@ export const UserSection = ({noTextMode}) => {
onPress={() => {
eSendEvent(eOpenLoginDialog);
}}
color={colors.accent}
selectedColor={colors.accent}
alpha={!colors.night ? -0.02 : 0.1}
opacity={0.12}
type="shade"
customStyle={{
paddingVertical: 12,
marginVertical: 5,

13
apps/mobile/src/components/MoveNoteDialog/index.js
View File

@@ -224,12 +224,7 @@ const MoveNoteDialog = () => {
onPress={() => {
setExpanded(item.id === expanded ? null : item.id);
}}
color={expanded === item.id ? colors.shade : 'transparent'}
selectedColor={
expanded === item.id ? colors.accent : colors.nav
}
alpha={colors.night ? 0.02 : -0.02}
opacity={expanded === item.id ? 0.12 : 1}
type={expanded === item.id ? 'shade' : 'transparent'}
customStyle={{
height: 50,
width: '100%',
@@ -365,9 +360,7 @@ const MoveNoteDialog = () => {
'success',
);
}}
color="transparent"
selectedColor={colors.nav}
alpha={colors.night ? 0.02 : -0.02}
type="gray"
customStyle={{
height: 50,
borderTopWidth: index === 0 ? 0 : 1,
@@ -398,7 +391,7 @@ const MoveNoteDialog = () => {
<View
style={{
paddingHorizontal: 12,
width:"100%"
width: '100%',
}}>
<DialogButtons negativeTitle="Cancel" onPressNegative={close} />
</View>

36
apps/mobile/src/components/NoteItem/index.js
View File

@@ -1,14 +1,16 @@
import React from 'react';
import { TouchableOpacity, View } from 'react-native';
import {TouchableOpacity, View} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { Actions } from '../../provider/Actions';
import {notesnook} from '../../../e2e/test.ids';
import {Actions} from '../../provider/Actions';
import Navigation from '../../services/Navigation';
import { COLORS_NOTE } from '../../utils/Colors';
import { db } from '../../utils/DB';
import { SIZE } from '../../utils/SizeUtils';
import { timeSince } from '../../utils/TimeUtils';
import { ActionIcon } from '../ActionIcon';
import { ActionSheetEvent, updateEvent } from '../DialogManager/recievers';
import {COLORS_NOTE} from '../../utils/Colors';
import {db} from '../../utils/DB';
import {SIZE} from '../../utils/SizeUtils';
import {timeSince} from '../../utils/TimeUtils';
import {ActionIcon} from '../ActionIcon';
import {ActionSheetEvent, updateEvent} from '../DialogManager/recievers';
import {TimeSince} from '../Menu/TimeSince';
import Heading from '../Typography/Heading';
import Paragraph from '../Typography/Paragraph';
@@ -191,15 +193,14 @@ export default class NoteItem extends React.Component {
color="orange"
/>
) : null}
<Paragraph
color={colors.icon}
size={SIZE.xs}
style={{
textAlignVertical: 'center',
marginRight: 10,
}}>
{timeSince(item.dateCreated)}
</Paragraph>
<TimeSince
style={{fontSize: SIZE.xs, color: colors.icon}}
time={item.dateCreated}
updateFrequency={
Date.now() - item.dateCreated < 60000 ? 2000 : 60000
}
/>
</>
) : null}
@@ -253,6 +254,7 @@ export default class NoteItem extends React.Component {
<ActionIcon
color={colors.heading}
name="dots-horizontal"
testID={notesnook.ids.note.menu}
size={SIZE.xl}
onPress={() => {
ActionSheetEvent(

6
apps/mobile/src/components/PressableButton/index.js
View File

@@ -26,16 +26,18 @@ export const PressableButton = ({
noborder,
accentColor = 'accent',
accentText = 'light',
customColor,
customSelectedColor
}) => {
const [state] = useTracked();
const {colors} = state;
const selectedColor =
const selectedColor = customSelectedColor ||
colors[
type === 'accent'
? BUTTON_TYPES[type](accentColor, accentText).selected
: BUTTON_TYPES[type].selected
];
const primaryColor =
const primaryColor = customColor ||
colors[
type === 'accent'
? BUTTON_TYPES[type](accentColor, accentText).primary

8
apps/mobile/src/components/SelectionWrapper/index.js
View File

@@ -36,7 +36,7 @@ const SelectionWrapper = ({
}
}, [selectedItemsList]);
const onPressPin = async () => {
/* const onPressPin = async () => {
let func = async () => {
if (!item.id) return;
if (item.type === 'note') {
@@ -61,11 +61,11 @@ const SelectionWrapper = ({
},
'Undo',
);
};
}; */
return (
<PressableButton
color={
customColor={
currentEditingNote === item.id
? item.type === 'note' && item.colors[0]
? COLORS_NOTE[item.colors[0]]
@@ -76,7 +76,7 @@ const SelectionWrapper = ({
}
onLongPress={onLongPress}
onPress={onPress}
selectedColor={currentEditingNote ? colors.accent : colors.nav}
customSelectedColor={currentEditingNote ? colors.accent : colors.nav}
alpha={!colors.night ? -0.02 : 0.02}
opacity={currentEditingNote ? 0.15 : 1}
customStyle={{

1
apps/mobile/src/components/SortDialog/index.js
View File

@@ -155,6 +155,7 @@ class SortDialog extends React.Component {
{Object.keys(SORT).map((item, index) => (
<PressableButton
key={item}
testID={'btn-' + item}
color={
this.state.settings.sort === item
? colors.shade

28
apps/mobile/src/utils/Colors.js
View File

@@ -6,6 +6,17 @@ export const ACCENT = {
color: '#0560FF',
shade: '#0560FF12',
};
export const COLORS_NOTE = {
red: '#f44336',
orange: '#FF9800',
yellow: '#FFD600',
green: '#4CAF50',
blue: '#2196F3',
purple: '#673AB7',
gray: '#9E9E9E',
};
const fixedColors = {
accent: ACCENT.color,
shade: ACCENT.shade,
@@ -18,6 +29,13 @@ const fixedColors = {
successText: '#4F8A10',
warningBg: '#FEEFB3',
warningText: '#9F6000',
red: '#f44336',
orange: '#FF9800',
yellow: '#FFD600',
green: '#4CAF50',
blue: '#2196F3',
purple: '#673AB7',
gray: '#9E9E9E',
};
export var COLOR_SCHEME = {
...fixedColors,
@@ -54,15 +72,7 @@ export const COLOR_SCHEME_DARK = {
sec: 'black',
light: '#ffffff',
};
export const COLORS_NOTE = {
red: '#f44336',
orange: '#FF9800',
yellow: '#FFD600',
green: '#4CAF50',
blue: '#2196F3',
purple: '#673AB7',
gray: '#9E9E9E',
};
export function setColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
COLOR_SCHEME = {...colors, accent: accent.color, shade: accent.shade};

2
apps/mobile/src/utils/index.js
View File

@@ -169,7 +169,7 @@ export const BUTTON_TYPES = {
accent: (themeColor, text) => ({
primary: themeColor,
text: text,
selected: 'accent',
selected: themeColor,
}),
inverted: {
primary: 'bg',

32
apps/mobile/src/views/Editor/Functions.js
View File

@@ -1,25 +1,25 @@
import {createRef} from 'react';
import {Linking, Platform} from 'react-native';
import { createRef } from 'react';
import { Linking, Platform } from 'react-native';
import SplashScreen from 'react-native-splash-screen';
import {updateEvent} from '../../components/DialogManager/recievers';
import {Actions} from '../../provider/Actions';
import {DDS} from '../../services/DeviceDetection';
import {eSendEvent, sendNoteEditedEvent} from '../../services/EventManager';
import { updateEvent } from '../../components/DialogManager/recievers';
import { Actions } from '../../provider/Actions';
import { DDS } from '../../services/DeviceDetection';
import { eSendEvent, sendNoteEditedEvent } from '../../services/EventManager';
import IntentService from '../../services/IntentService';
import {editing} from '../../utils';
import {COLORS_NOTE, COLOR_SCHEME} from '../../utils/Colors';
import {hexToRGBA} from '../../utils/ColorUtils';
import {db} from '../../utils/DB';
import { editing } from '../../utils';
import { COLORS_NOTE, COLOR_SCHEME } from '../../utils/Colors';
import { hexToRGBA } from '../../utils/ColorUtils';
import { db } from '../../utils/DB';
import {
eOnLoadNote,
eOpenPremiumDialog,
eShowGetPremium,
refreshNotesPage,
refreshNotesPage
} from '../../utils/Events';
import {MMKV} from '../../utils/mmkv';
import {sideMenuRef, tabBarRef} from '../../utils/Refs';
import {normalize} from '../../utils/SizeUtils';
import {sleep, timeConverter} from '../../utils/TimeUtils';
import { MMKV } from '../../utils/mmkv';
import { sideMenuRef, tabBarRef } from '../../utils/Refs';
import { normalize } from '../../utils/SizeUtils';
import { sleep, timeConverter } from '../../utils/TimeUtils';
export const EditorWebView = createRef();

2
apps/mobile/src/views/Notes/index.js
View File

@@ -187,7 +187,7 @@ export const Notes = ({route, navigation}) => {
<ContainerBottomButton
title="Create a new note"
onPress={_onPressBottomButton}
color={params.type == 'color' ? COLORS_NOTE[params.title] : null}
color={params.type == 'color' ? params.title : null}
/>
</>
);

12
apps/mobile/src/views/Settings/index.js
View File

@@ -207,12 +207,8 @@ const CustomButton = ({
}) => {
const [state] = useTracked();
const {colors} = state;
const [visible, setVisible] = useState(false);
return (
<PressableButton
color="transparent"
selectedColor={colors.nav}
alpha={!colors.night ? -0.02 : 0.02}
onPress={onPress}
customStyle={{
minHeight: 50,
@@ -416,13 +412,9 @@ const SettingsUserSection = () => {
paddingHorizontal: 0,
}}>
<PressableButton
color="transparent"
selectedColor={colors.nav}
alpha={!colors.night ? -0.02 : 0.1}
onPress={() => {
eSendEvent(eOpenLoginDialog);
}}
activeOpacity={opacity / 2}
customStyle={{
paddingVertical: 12,
width: '100%',
@@ -550,7 +542,7 @@ const SettingsAppearanceSection = () => {
].map((item) => (
<PressableButton
key={item}
color={
customColor={
colors.accent === item
? RGB_Linear_Shade(
!colors.night ? -0.2 : 0.2,
@@ -558,7 +550,7 @@ const SettingsAppearanceSection = () => {
)
: item
}
selectedColor={item}
customSelectedColor={item}
alpha={!colors.night ? -0.1 : 0.1}
opacity={1}
onPress={async () => {