From 6ccd362c45918f3528d104725655080919f16209 Mon Sep 17 00:00:00 2001 From: "Laid Feggaa ( Rabi3 )" Date: Tue, 18 Jun 2024 16:35:50 +0400 Subject: [PATCH] change .defaultProps to props in function --- App.tsx | 3 +- src/AnimatedModal.tsx | 36 ++++++------ src/CountryFilter.tsx | 20 ++++--- src/CountryList.tsx | 38 +++++------- src/CountryModal.tsx | 16 ++---- src/CountryPicker.tsx | 131 ++++++++++++++++++------------------------ src/Flag.tsx | 12 ++-- src/FlagButton.tsx | 31 ++++------ src/HeaderModal.tsx | 26 ++++----- src/index.tsx | 13 ----- 10 files changed, 135 insertions(+), 191 deletions(-) diff --git a/App.tsx b/App.tsx index 550e4e74..da51b66a 100644 --- a/App.tsx +++ b/App.tsx @@ -7,10 +7,11 @@ import { Button, ScrollView, } from 'react-native' -import CountryPicker, { CountryModalProvider } from './src/' +import CountryPicker from './src/' import { CountryCode, Country } from './src/types' import { Row } from './src/Row' import { DARK_THEME } from './src/CountryTheme' +import { CountryModalProvider } from './src/CountryModalProvider' const styles = StyleSheet.create({ container: { diff --git a/src/AnimatedModal.tsx b/src/AnimatedModal.tsx index c7a6b55a..b6cd3ef1 100644 --- a/src/AnimatedModal.tsx +++ b/src/AnimatedModal.tsx @@ -11,20 +11,24 @@ interface Props { children: React.ReactNode } -export const AnimatedModal = ({ children, visible }: Props) => { - const translateY = new Animated.Value(height) - - const showModal = Animated.timing(translateY, { - toValue: 0, - duration, - useNativeDriver, - }).start - - const hideModal = Animated.timing(translateY, { - toValue: height, - duration, - useNativeDriver, - }).start +export const AnimatedModal = ({ children, visible = false }: Props) => { + const translateY = React.useRef(new Animated.Value(height)).current + + const showModal = () => { + Animated.timing(translateY, { + toValue: 0, + duration, + useNativeDriver, + }).start() + } + + const hideModal = () => { + Animated.timing(translateY, { + toValue: height, + duration, + useNativeDriver, + }).start() + } React.useEffect(() => { if (visible) { @@ -46,7 +50,3 @@ export const AnimatedModal = ({ children, visible }: Props) => { ) } - -AnimatedModal.defaultProps = { - visible: false, -} diff --git a/src/CountryFilter.tsx b/src/CountryFilter.tsx index a185e03c..bd690789 100644 --- a/src/CountryFilter.tsx +++ b/src/CountryFilter.tsx @@ -16,9 +16,16 @@ const styles = StyleSheet.create({ }, }) -export type CountryFilterProps = TextInputProps +export type CountryFilterProps = TextInputProps & { + autoFocus?: boolean + placeholder?: string +} -export const CountryFilter = (props: CountryFilterProps) => { +export const CountryFilter = ({ + autoFocus = false, + placeholder = 'Enter country name', + ...props +}: CountryFilterProps) => { const { filterPlaceholderTextColor, fontFamily, @@ -29,6 +36,8 @@ export const CountryFilter = (props: CountryFilterProps) => { { {...props} /> ) -} - -CountryFilter.defaultProps = { - autoFocus: false, - placeholder: 'Enter country name', -} +} \ No newline at end of file diff --git a/src/CountryList.tsx b/src/CountryList.tsx index 15878369..0912f109 100644 --- a/src/CountryList.tsx +++ b/src/CountryList.tsx @@ -94,9 +94,9 @@ const CountryItem = (props: CountryItemProps) => { const { country, onSelect, - withFlag, + withFlag = true, withEmoji, - withCallingCode, + withCallingCode = false, withCurrency, } = props const extraContent: string[] = [] @@ -136,10 +136,6 @@ const CountryItem = (props: CountryItemProps) => { ) } -CountryItem.defaultProps = { - withFlag: true, - withCallingCode: false, -} const MemoCountryItem = memo(CountryItem) const renderItem = @@ -170,20 +166,18 @@ const ItemSeparatorComponent = () => { const { height } = Dimensions.get('window') -export const CountryList = (props: CountryListProps) => { - const { - data, - withAlphaFilter, - withEmoji, - withFlag, - withCallingCode, - withCurrency, - onSelect, - filter, - flatListProps, - filterFocus, - } = props - +export const CountryList = ({ + data, + filterFocus, + withAlphaFilter, + withEmoji, + withFlag, + withCallingCode, + withCurrency, + onSelect, + filter, + flatListProps, +}: CountryListProps) => { const flatListRef = useRef>(null) const [letter, setLetter] = useState('') const { itemHeight, backgroundColor } = useTheme() @@ -256,7 +250,3 @@ export const CountryList = (props: CountryListProps) => { ) } - -CountryList.defaultProps = { - filterFocus: undefined, -} diff --git a/src/CountryModal.tsx b/src/CountryModal.tsx index 68a7e058..8b7101d4 100644 --- a/src/CountryModal.tsx +++ b/src/CountryModal.tsx @@ -13,8 +13,9 @@ const styles = StyleSheet.create({ export const CountryModal = ({ children, - withModal, - disableNativeModal, + withModal = true, + disableNativeModal = false, + animationType = 'slide', ...props }: ModalProps & { children: React.ReactNode @@ -35,19 +36,12 @@ export const CountryModal = ({ }, [disableNativeModal]) if (withModal) { if (Platform.OS === 'web') { - return {content} + return {content} } if (disableNativeModal) { return null } - return {content} + return {content} } return content } - -CountryModal.defaultProps = { - animationType: 'slide', - animated: true, - withModal: true, - disableNativeModal: false, -} diff --git a/src/CountryPicker.tsx b/src/CountryPicker.tsx index 73a2d078..466663f4 100644 --- a/src/CountryPicker.tsx +++ b/src/CountryPicker.tsx @@ -22,31 +22,19 @@ interface State { filterFocus?: boolean } -interface RenderFlagButtonProps - extends React.ComponentProps { +interface RenderFlagButtonProps extends React.ComponentProps { renderFlagButton?(props: React.ComponentProps): ReactNode } -interface RenderCountryFilterProps - extends React.ComponentProps { - renderCountryFilter?( - props: React.ComponentProps, - ): ReactNode +interface RenderCountryFilterProps extends React.ComponentProps { + renderCountryFilter?(props: React.ComponentProps): ReactNode } const renderFlagButton = (props: RenderFlagButtonProps): ReactNode => - props.renderFlagButton ? ( - props.renderFlagButton(props) - ) : ( - - ) + props.renderFlagButton ? props.renderFlagButton(props) : const renderFilter = (props: RenderCountryFilterProps): ReactNode => - props.renderCountryFilter ? ( - props.renderCountryFilter(props) - ) : ( - - ) + props.renderCountryFilter ? props.renderCountryFilter(props) : interface CountryPickerProps { allowFontScaling?: boolean @@ -79,50 +67,48 @@ interface CountryPickerProps { closeButtonStyle?: StyleProp closeButtonImageStyle?: StyleProp renderFlagButton?(props: React.ComponentProps): ReactNode - renderCountryFilter?( - props: React.ComponentProps, - ): ReactNode + renderCountryFilter?(props: React.ComponentProps): ReactNode onSelect(country: Country): void onOpen?(): void onClose?(): void } -export const CountryPicker = (props: CountryPickerProps) => { - const { - allowFontScaling, - countryCode, - region, - subregion, - countryCodes, - renderFlagButton: renderButton, - renderCountryFilter, - filterProps, - modalProps, - flatListProps, - onSelect, - withEmoji, - withFilter, - withCloseButton, - withCountryNameButton, - withCallingCodeButton, - withCurrencyButton, - containerButtonStyle, - withAlphaFilter, - withCallingCode, - withCurrency, - withFlag, - withModal, - disableNativeModal, - withFlagButton, - onClose: handleClose, - onOpen: handleOpen, - closeButtonImage, - closeButtonStyle, - closeButtonImageStyle, - excludeCountries, - placeholder, - preferredCountries, - } = props +export const CountryPicker = ({ + allowFontScaling = true, + countryCode, + region, + subregion, + countryCodes, + renderFlagButton: renderButton, + renderCountryFilter, + filterProps, + modalProps, + flatListProps, + onSelect, + withEmoji, + withFilter, + withCloseButton, + withCountryNameButton, + withCallingCodeButton, + withCurrencyButton, + containerButtonStyle, + withAlphaFilter = false, + withCallingCode = false, + withCurrency, + withFlag, + withModal = true, + disableNativeModal, + withFlagButton, + onClose: handleClose, + onOpen: handleOpen, + closeButtonImage, + closeButtonStyle, + closeButtonImageStyle, + excludeCountries, + placeholder = 'Select Country', + preferredCountries, + ...props +}: CountryPickerProps) => { const [state, setState] = useState({ visible: props.visible || false, countries: [], @@ -133,33 +119,34 @@ export const CountryPicker = (props: CountryPickerProps) => { const { visible, filter, countries, filterFocus } = state useEffect(() => { - if (state.visible !== props.visible) { - setState({ ...state, visible: props.visible || false }) + if (state.visible !== visible) { + setState((prevState) => ({ ...prevState, visible: visible || false })) } - }, [props.visible]) + }, [visible]) const onOpen = () => { - setState({ ...state, visible: true }) + setState((prevState) => ({ ...prevState, visible: true })) if (handleOpen) { handleOpen() } } + const onClose = () => { - setState({ ...state, filter: '', visible: false }) + setState((prevState) => ({ ...prevState, filter: '', visible: false })) if (handleClose) { handleClose() } } - const setFilter = (filter: string) => setState({ ...state, filter }) + const setFilter = (filter: string) => setState((prevState) => ({ ...prevState, filter })) const setCountries = (countries: Country[]) => - setState({ ...state, countries }) + setState((prevState) => ({ ...prevState, countries })) const onSelectClose = (country: Country) => { onSelect(country) onClose() } - const onFocus = () => setState({ ...state, filterFocus: true }) - const onBlur = () => setState({ ...state, filterFocus: false }) + const onFocus = () => setState((prevState) => ({ ...prevState, filterFocus: true })) + const onBlur = () => setState((prevState) => ({ ...prevState, filterFocus: false })) const flagProp = { allowFontScaling, countryCode, @@ -171,7 +158,7 @@ export const CountryPicker = (props: CountryPickerProps) => { renderFlagButton: renderButton, onOpen, containerButtonStyle, - placeholder: placeholder || 'Select Country', + placeholder, } useEffect(() => { @@ -186,7 +173,9 @@ export const CountryPicker = (props: CountryPickerProps) => { preferredCountries, withAlphaFilter, ) - .then((countries) => (cancel ? null : setCountries(countries))) + .then((countries) => { + if (!cancel) setCountries(countries) + }) .catch(console.warn) return () => { @@ -243,11 +232,3 @@ export const CountryPicker = (props: CountryPickerProps) => { ) } - -CountryPicker.defaultProps = { - withModal: true, - withAlphaFilter: false, - withCallingCode: false, - placeholder: 'Select Country', - allowFontScaling: true, -} diff --git a/src/Flag.tsx b/src/Flag.tsx index 448bc4dc..f2ac4ec0 100644 --- a/src/Flag.tsx +++ b/src/Flag.tsx @@ -45,9 +45,11 @@ interface FlagType { const ImageFlag = memo(({ countryCode, flagSize }: FlagType) => { const { getImageFlagAsync } = useContext() const asyncResult = useAsync(getImageFlagAsync, [countryCode]) + if (asyncResult.loading) { return } + return ( { if (asyncResult.loading) { return } + return ( { export const Flag = ({ countryCode, - withEmoji, - withFlagButton, + withEmoji = true, + withFlagButton = true, flagSize, }: FlagType) => withFlagButton ? ( @@ -92,8 +95,3 @@ export const Flag = ({ )} ) : null - -Flag.defaultProps = { - withEmoji: true, - withFlagButton: true, -} diff --git a/src/FlagButton.tsx b/src/FlagButton.tsx index 27b333a9..13459573 100644 --- a/src/FlagButton.tsx +++ b/src/FlagButton.tsx @@ -51,11 +51,11 @@ const FlagWithSomething = memo( ({ allowFontScaling, countryCode, - withEmoji, - withCountryNameButton, - withCurrencyButton, - withCallingCodeButton, - withFlagButton, + withEmoji = true, + withCountryNameButton = false, + withCurrencyButton = false, + withCallingCodeButton = false, + withFlagButton = true, flagSize, placeholder, }: FlagWithSomethingProp) => { @@ -66,6 +66,7 @@ const FlagWithSomething = memo( callingCode: '', }) const { countryName, currency, callingCode } = state + useEffect(() => { if (countryCode) { getCountryInfoAsync({ countryCode, translation }) @@ -123,12 +124,12 @@ export interface FlagButtonProps { } export const FlagButton = ({ - allowFontScaling, - withEmoji, - withCountryNameButton, - withCallingCodeButton, - withCurrencyButton, - withFlagButton, + allowFontScaling = true, + withEmoji = true, + withCountryNameButton = false, + withCallingCodeButton = false, + withCurrencyButton = false, + withFlagButton = true, countryCode, containerButtonStyle, onOpen, @@ -161,11 +162,3 @@ export const FlagButton = ({ ) } - -FlagButton.defaultProps = { - withEmoji: true, - withCountryNameButton: false, - withCallingCodeButton: false, - withCurrencyButton: false, - withFlagButton: true, -} diff --git a/src/HeaderModal.tsx b/src/HeaderModal.tsx index f7319f7a..b2c41d69 100644 --- a/src/HeaderModal.tsx +++ b/src/HeaderModal.tsx @@ -25,16 +25,16 @@ interface HeaderModalProps { onClose(): void renderFilter(props: HeaderModalProps): ReactNode } -export const HeaderModal = (props: HeaderModalProps) => { - const { - withFilter, - withCloseButton, - closeButtonImage, - closeButtonStyle, - closeButtonImageStyle, - onClose, - renderFilter, - } = props + +export const HeaderModal = ({ + withFilter = false, + withCloseButton = true, + closeButtonImage, + closeButtonStyle, + closeButtonImageStyle, + onClose, + renderFilter, +}: HeaderModalProps) => { return ( {withCloseButton && ( @@ -45,11 +45,7 @@ export const HeaderModal = (props: HeaderModalProps) => { onPress={() => onClose()} /> )} - {withFilter && renderFilter(props)} + {withFilter && renderFilter({ withFilter, withCloseButton, closeButtonImage, closeButtonStyle, closeButtonImageStyle, onClose, renderFilter })} ) } - -HeaderModal.defaultProps = { - withCloseButton: true, -} diff --git a/src/index.tsx b/src/index.tsx index e03538d4..e56688a9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -65,16 +65,3 @@ Main.defaultProps = { } export default Main -export { - getCountriesAsync as getAllCountries, - getCountryCallingCodeAsync as getCallingCode, -} from './CountryService' -export { CountryModal } from './CountryModal' -export { DARK_THEME, DEFAULT_THEME } from './CountryTheme' -export { CountryFilter } from './CountryFilter' -export { CountryList } from './CountryList' -export { FlagButton } from './FlagButton' -export { Flag } from './Flag' -export { HeaderModal } from './HeaderModal' -export { CountryModalProvider } from './CountryModalProvider' -export * from './types'