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

improve search ui & ux

Browse Source
This commit is contained in:
ammarahm-ed
2020-11-04 20:29:45 +05:00
parent 6e9366d308
commit 3f46d26a80
4 changed files with 203 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,84 +5,84 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {useTracked} from '../../provider';
import {getElevation} from '../../utils';
import {PressableButton} from '../PressableButton';
import {pv, SIZE, WEIGHT} from "../../utils/SizeUtils";
import {DDS} from "../../services/DeviceDetection";
import {normalize, pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
import {DDS} from '../../services/DeviceDetection';
export const ContainerBottomButton = ({title, onPress, color}) => {
const [state,] = useTracked();
const {colors} = state;
const [buttonHide, setButtonHide] = useState(false);
const insets = useSafeAreaInsets();
const [state] = useTracked();
const {colors} = state;
const [buttonHide, setButtonHide] = useState(false);
const insets = useSafeAreaInsets();
const onKeyboardHide = () => {
if (DDS.isTab) return;
setButtonHide(false);
}
const onKeyboardHide = () => {
if (DDS.isTab) return;
setButtonHide(false);
};
const onKeyboardShow = () => {
if (DDS.isTab) return;
setButtonHide(true);
}
const onKeyboardShow = () => {
if (DDS.isTab) return;
setButtonHide(true);
};
useEffect(() => {
Keyboard.addListener('keyboardDidShow', onKeyboardShow);
Keyboard.addListener('keyboardDidHide', onKeyboardHide);
return () => {
Keyboard.removeListener('keyboardDidShow', onKeyboardShow);
Keyboard.removeListener('keyboardDidHide', onKeyboardHide);
};
}, []);
useEffect(() => {
Keyboard.addListener('keyboardDidShow', onKeyboardShow);
Keyboard.addListener('keyboardDidHide', onKeyboardHide);
return () => {
Keyboard.removeListener('keyboardDidShow', onKeyboardShow);
Keyboard.removeListener('keyboardDidHide', onKeyboardHide);
};
}, []);
return (
return (
<View
style={{
width: '100%',
opacity: buttonHide ? 0 : 1,
position: 'absolute',
paddingHorizontal: 12,
bottom: Platform.OS === 'ios' ? insets.bottom - 10 : insets.bottom + 20,
zIndex: 10,
transform: [
{
translateY: buttonHide ? 200 : 0,
},
],
}}>
<PressableButton
testID={'container_bottom_btn'}
color={color || colors.accent}
selectedColor={color || colors.accent}
customStyle={{
...getElevation(5),
}}
onPress={onPress}>
<View
style={{
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
width: '100%',
padding: pv,
borderRadius: 5,
height: normalize(60),
}}>
<Icon
name={title === 'Clear all trash' ? 'delete' : 'plus'}
color="white"
size={SIZE.xl}
/>
<Text
testID="container_bottom_btn_text"
style={{
width: '100%',
opacity: buttonHide ? 0 : 1,
position: 'absolute',
paddingHorizontal: 12,
bottom: Platform.OS === 'ios' ? insets.bottom - 10 : insets.bottom + 20,
zIndex: 10,
transform: [
{
translateY: buttonHide ? 200 : 0,
},
],
fontSize: SIZE.md,
color: 'white',
fontFamily: WEIGHT.regular,
textAlignVertical: 'center',
}}>
<PressableButton
testID={'container_bottom_btn'}
color={color || colors.accent}
selectedColor={color || colors.accent}
customStyle={{
...getElevation(5),
}}
onPress={onPress}>
<View
style={{
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
width: '100%',
padding: pv,
borderRadius: 5,
paddingVertical: pv + 5,
}}>
<Icon
name={title === 'Clear all trash' ? 'delete' : 'plus'}
color="white"
size={SIZE.xl}
/>
<Text
testID="container_bottom_btn_text"
style={{
fontSize: SIZE.md,
color: 'white',
fontFamily: WEIGHT.regular,
textAlignVertical: 'center',
}}>
{' ' + title}
</Text>
</View>
</PressableButton>
{' ' + title}
</Text>
</View>
);
</PressableButton>
</View>
);
};