Skip to content

Commit

Permalink
feat: remove prop statusBarIsTranslucent
Browse files Browse the repository at this point in the history
  • Loading branch information
Hoà Phan authored and Hoà Phan committed Mar 5, 2023
1 parent 9727517 commit 796148e
Show file tree
Hide file tree
Showing 14 changed files with 29 additions and 31 deletions.
2 changes: 0 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ or
| onBlur | () => void | No | Callback that is called when the dropdown is blurred |
| keyboardAvoiding | Boolean | No | keyboardAvoiding default is true |
| backgroundColor | String | No | Set background color |
| statusBarIsTranslucent | Boolean | No | Only Android, set true when StatusBar set Translucent is true |
| confirmSelectItem | Boolean | No | Turn On confirm select item. Refer example/src/dropdown/example3 |
| onConfirmSelectItem | (item: object) => void | No | Selection callback. Refer example/src/dropdown/example3 |
| testID | String | No | Used to locate this view in end-to-end tests |
Expand Down Expand Up @@ -126,7 +125,6 @@ or
| keyboardAvoiding | Boolean | No | keyboardAvoiding default is true |
| inside | Boolean | No | inside default is false |
| backgroundColor | String | No | Set background color |
| statusBarIsTranslucent| Boolean | No | Only Android, set true when StatusBar set Translucent is true |
| confirmSelectItem | Boolean | No | Turn On confirm select item. Refer example/src/dropdown/example7 |
| confirmUnSelectItem | Boolean | No | Turn On confirm un-select item. Refer example/src/dropdown/example7 |
| onConfirmSelectItem | (item: any) => void | No | Selection callback. Refer example/src/dropdown/example7 |
Expand Down
1 change: 0 additions & 1 deletion example/src/dropdown/CountrySelect1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ const SelectCountryScreen = () => {

return (
<SelectCountry
statusBarIsTranslucent={true}
style={styles.dropdown}
selectedTextStyle={styles.selectedTextStyle}
placeholderStyle={styles.placeholderStyle}
Expand Down
1 change: 0 additions & 1 deletion example/src/dropdown/CountrySelect2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ const SelectCountryScreen = () => {
return (
<SelectCountry
search
statusBarIsTranslucent={true}
style={styles.dropdown}
selectedTextStyle={styles.selectedTextStyle}
placeholderStyle={styles.placeholderStyle}
Expand Down
1 change: 0 additions & 1 deletion example/src/dropdown/Dropdown1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ const DropdownComponent = () => {
<View style={styles.container}>
{renderLabel()}
<Dropdown
statusBarIsTranslucent={true}
style={[styles.dropdown, isFocus && { borderColor: 'blue' }]}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
Expand Down
1 change: 0 additions & 1 deletion example/src/dropdown/Dropdown2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ const DropdownComponent = () => {
<View>
<Dropdown
ref={ref}
statusBarIsTranslucent={true}
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
Expand Down
1 change: 0 additions & 1 deletion example/src/dropdown/DropdownLazyLoad.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ const DropdownComponent = () => {
<Dropdown
ref={ref}
style={styles.dropdown}
statusBarIsTranslucent={true}
containerStyle={styles.container}
backgroundColor={'rgba(0,0,0,0.2)'}
data={data}
Expand Down
1 change: 0 additions & 1 deletion example/src/dropdown/DropdownWithConfirm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ const DropdownComponent = () => {
return (
<Dropdown
ref={ref}
statusBarIsTranslucent={true}
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
Expand Down
1 change: 0 additions & 1 deletion example/src/dropdown/Menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ const DropdownComponent = () => {
return (
<Dropdown
ref={ref}
statusBarIsTranslucent={true}
style={styles.dropdown}
containerStyle={styles.containerStyle}
iconStyle={styles.iconStyle}
Expand Down
1 change: 0 additions & 1 deletion example/src/dropdown/MultiSelectAll.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ const MultiSelectComponent = () => {
<View style={styles.container}>
<MultiSelect
inside
statusBarIsTranslucent={true}
ref={ref}
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
Expand Down
1 change: 0 additions & 1 deletion example/src/dropdown/MultiSelectWithConfirm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ const MultiSelectComponent = () => {
return (
<View style={styles.container}>
<MultiSelect
statusBarIsTranslucent={true}
style={styles.dropdown}
placeholderStyle={styles.placeholderStyle}
selectedTextStyle={styles.selectedTextStyle}
Expand Down
24 changes: 15 additions & 9 deletions src/components/Dropdown/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
TouchableWithoutFeedback,
View,
ViewStyle,
StatusBar,
} from 'react-native';
import { useDetectDevice } from '../../toolkits';
import { useDeviceOrientation } from '../../useDeviceOrientation';
Expand All @@ -33,6 +34,8 @@ import { styles } from './styles';
const { isTablet } = useDetectDevice;
const ic_down = require('../../assets/down.png');

const statusBarHeight: number = StatusBar.currentHeight || 0;

const DropdownComponent: <T>(
props: DropdownProps<T>
) => ReactElement<any, string | JSXElementConstructor<any>> | null =
Expand Down Expand Up @@ -77,7 +80,6 @@ const DropdownComponent: <T>(
dropdownPosition = 'auto',
flatListProps,
searchQuery,
statusBarIsTranslucent,
backgroundColor,
onChangeText,
confirmSelectItem,
Expand Down Expand Up @@ -157,17 +159,17 @@ const DropdownComponent: <T>(

const _measure = useCallback(() => {
if (ref && ref?.current) {
ref.current.measure((_x, _y, width, height, pageX, pageY) => {
ref.current.measureInWindow((pageX, pageY, width, height) => {
const isFull = orientation === 'LANDSCAPE' && !isTablet;
const top = isFull ? 20 : height + pageY + 2;
const bottom = H - top;
const bottom = H - top + height;
const left = I18nManager.isRTL ? W - width - pageX : pageX;

setPosition({
isFull,
width: Math.floor(width),
top: Math.floor(top),
bottom: Math.floor(bottom),
top: Math.floor(top + statusBarHeight),
bottom: Math.floor(bottom - statusBarHeight),
left: Math.floor(left),
height: Math.floor(height),
});
Expand Down Expand Up @@ -569,15 +571,20 @@ const DropdownComponent: <T>(

let keyboardStyle: ViewStyle = {};

let extendHeight = !isTopPosition ? top : bottom + height;
if (keyboardAvoiding && keyboardHeight > 0 && isTopPosition) {
let extendHeight = !isTopPosition ? top : bottom;
if (
keyboardAvoiding &&
keyboardHeight > 0 &&
isTopPosition &&
dropdownPosition === 'auto'
) {
extendHeight = keyboardHeight;
}

return (
<Modal
transparent
statusBarTranslucent={statusBarIsTranslucent}
statusBarTranslucent
visible={visible}
supportedOrientations={['landscape', 'portrait']}
onRequestClose={showOrClose}
Expand Down Expand Up @@ -632,7 +639,6 @@ const DropdownComponent: <T>(
minHeight,
dropdownPosition,
keyboardAvoiding,
statusBarIsTranslucent,
showOrClose,
styleContainerVertical,
backgroundColor,
Expand Down
1 change: 0 additions & 1 deletion src/components/Dropdown/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ export interface DropdownProps<T> {
dropdownPosition?: 'auto' | 'top' | 'bottom';
flatListProps?: Omit<FlatListProps<any>, 'renderItem' | 'data'>;
keyboardAvoiding?: boolean;
statusBarIsTranslucent?: boolean;
backgroundColor?: string;
confirmSelectItem?: boolean;
accessibilityLabel?: string;
Expand Down
23 changes: 14 additions & 9 deletions src/components/MultiSelect/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
TouchableWithoutFeedback,
View,
ViewStyle,
StatusBar,
} from 'react-native';
import { useDetectDevice } from '../../toolkits';
import { useDeviceOrientation } from '../../useDeviceOrientation';
Expand All @@ -32,6 +33,7 @@ import { styles } from './styles';

const { isTablet } = useDetectDevice;
const ic_down = require('../../assets/down.png');
const statusBarHeight: number = StatusBar.currentHeight || 0;

const MultiSelectComponent: <T>(
props: MultiSelectProps<T>
Expand Down Expand Up @@ -80,7 +82,6 @@ const MultiSelectComponent: <T>(
flatListProps,
alwaysRenderSelectedItem = false,
searchQuery,
statusBarIsTranslucent,
backgroundColor,
onChangeText,
confirmSelectItem,
Expand Down Expand Up @@ -161,17 +162,17 @@ const MultiSelectComponent: <T>(

const _measure = useCallback(() => {
if (ref && ref?.current) {
ref.current.measure((_x, _y, width, height, pageX, pageY) => {
ref.current.measureInWindow((pageX, pageY, width, height) => {
const isFull = orientation === 'LANDSCAPE' && !isTablet;
const top = isFull ? 20 : height + pageY + 2;
const bottom = H - top;
const bottom = H - top + height;
const left = I18nManager.isRTL ? W - width - pageX : pageX;

setPosition({
isFull,
width: Math.floor(width),
top: Math.floor(top),
bottom: Math.floor(bottom),
top: Math.floor(top + statusBarHeight),
bottom: Math.floor(bottom - statusBarHeight),
left: Math.floor(left),
height: Math.floor(height),
});
Expand Down Expand Up @@ -560,15 +561,20 @@ const MultiSelectComponent: <T>(

let keyboardStyle: ViewStyle = {};

let extendHeight = !isTopPosition ? top : bottom + height;
if (keyboardAvoiding && keyboardHeight > 0 && isTopPosition) {
let extendHeight = !isTopPosition ? top : bottom;
if (
keyboardAvoiding &&
keyboardHeight > 0 &&
isTopPosition &&
dropdownPosition === 'auto'
) {
extendHeight = keyboardHeight;
}

return (
<Modal
transparent
statusBarTranslucent={statusBarIsTranslucent}
statusBarTranslucent
visible={visible}
supportedOrientations={['landscape', 'portrait']}
onRequestClose={showOrClose}
Expand Down Expand Up @@ -623,7 +629,6 @@ const MultiSelectComponent: <T>(
minHeight,
dropdownPosition,
keyboardAvoiding,
statusBarIsTranslucent,
showOrClose,
styleContainerVertical,
backgroundColor,
Expand Down
1 change: 0 additions & 1 deletion src/components/MultiSelect/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ export interface MultiSelectProps<T> {
visibleSelectedItem?: boolean;
keyboardAvoiding?: boolean;
inside?: boolean;
statusBarIsTranslucent?: boolean;
backgroundColor?: string;
confirmSelectItem?: boolean;
confirmUnSelectItem?: boolean;
Expand Down

0 comments on commit 796148e

Please sign in to comment.