From c298b684547acda5d7e99557550b0ba0b425715f Mon Sep 17 00:00:00 2001 From: Asad ali Date: Mon, 30 Sep 2024 13:57:36 +0500 Subject: [PATCH] remove deprecated defaultProps from function components --- src/AnimatedModal.tsx | 6 +----- src/CountryFilter.tsx | 11 ++++------- src/CountryList.tsx | 15 ++++----------- src/CountryModal.tsx | 13 ++++--------- src/CountryPicker.tsx | 18 +++++------------- src/Flag.tsx | 9 ++------- src/FlagButton.tsx | 18 +++++------------- src/HeaderModal.tsx | 6 +----- src/index.tsx | 7 +------ 9 files changed, 27 insertions(+), 76 deletions(-) diff --git a/src/AnimatedModal.tsx b/src/AnimatedModal.tsx index c7a6b55a..3f56a4e3 100644 --- a/src/AnimatedModal.tsx +++ b/src/AnimatedModal.tsx @@ -11,7 +11,7 @@ interface Props { children: React.ReactNode } -export const AnimatedModal = ({ children, visible }: Props) => { +export const AnimatedModal = ({ children, visible = false }: Props) => { const translateY = new Animated.Value(height) const showModal = Animated.timing(translateY, { @@ -46,7 +46,3 @@ export const AnimatedModal = ({ children, visible }: Props) => { ) } - -AnimatedModal.defaultProps = { - visible: false, -} diff --git a/src/CountryFilter.tsx b/src/CountryFilter.tsx index a185e03c..4c0d217a 100644 --- a/src/CountryFilter.tsx +++ b/src/CountryFilter.tsx @@ -18,7 +18,7 @@ const styles = StyleSheet.create({ export type CountryFilterProps = TextInputProps -export const CountryFilter = (props: CountryFilterProps) => { +export const CountryFilter = ({ autoFocus = false, placeholder= 'Enter country name', ...rest }: CountryFilterProps) => { const { filterPlaceholderTextColor, fontFamily, @@ -34,12 +34,9 @@ export const CountryFilter = (props: CountryFilterProps) => { styles.input, { fontFamily, fontSize, color: onBackgroundTextColor }, ]} - {...props} + autoFocus={autoFocus} + placeholder={placeholder} + {...rest} /> ) } - -CountryFilter.defaultProps = { - autoFocus: false, - placeholder: 'Enter country name', -} diff --git a/src/CountryList.tsx b/src/CountryList.tsx index 15878369..fac01634 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,7 @@ const CountryItem = (props: CountryItemProps) => { ) } -CountryItem.defaultProps = { - withFlag: true, - withCallingCode: false, -} + const MemoCountryItem = memo(CountryItem) const renderItem = @@ -181,7 +178,7 @@ export const CountryList = (props: CountryListProps) => { onSelect, filter, flatListProps, - filterFocus, + filterFocus = undefined, } = props const flatListRef = useRef>(null) @@ -256,7 +253,3 @@ export const CountryList = (props: CountryListProps) => { ) } - -CountryList.defaultProps = { - filterFocus: undefined, -} diff --git a/src/CountryModal.tsx b/src/CountryModal.tsx index 68a7e058..8e8c3896 100644 --- a/src/CountryModal.tsx +++ b/src/CountryModal.tsx @@ -13,8 +13,10 @@ const styles = StyleSheet.create({ export const CountryModal = ({ children, - withModal, - disableNativeModal, + withModal = true, + disableNativeModal = false, + animationType = 'slide', + animated = true, ...props }: ModalProps & { children: React.ReactNode @@ -44,10 +46,3 @@ export const CountryModal = ({ } return content } - -CountryModal.defaultProps = { - animationType: 'slide', - animated: true, - withModal: true, - disableNativeModal: false, -} diff --git a/src/CountryPicker.tsx b/src/CountryPicker.tsx index 73a2d078..c675938d 100644 --- a/src/CountryPicker.tsx +++ b/src/CountryPicker.tsx @@ -89,7 +89,7 @@ interface CountryPickerProps { export const CountryPicker = (props: CountryPickerProps) => { const { - allowFontScaling, + allowFontScaling = true, countryCode, region, subregion, @@ -107,11 +107,11 @@ export const CountryPicker = (props: CountryPickerProps) => { withCallingCodeButton, withCurrencyButton, containerButtonStyle, - withAlphaFilter, - withCallingCode, + withAlphaFilter = false, + withCallingCode = false, withCurrency, withFlag, - withModal, + withModal = true, disableNativeModal, withFlagButton, onClose: handleClose, @@ -120,7 +120,7 @@ export const CountryPicker = (props: CountryPickerProps) => { closeButtonStyle, closeButtonImageStyle, excludeCountries, - placeholder, + placeholder = 'Select Country', preferredCountries, } = props const [state, setState] = useState({ @@ -243,11 +243,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..12599c9d 100644 --- a/src/Flag.tsx +++ b/src/Flag.tsx @@ -79,8 +79,8 @@ const EmojiFlag = memo(({ countryCode, flagSize }: FlagType) => { export const Flag = ({ countryCode, - withEmoji, - withFlagButton, + withEmoji = true, + withFlagButton = true, flagSize, }: FlagType) => withFlagButton ? ( @@ -92,8 +92,3 @@ export const Flag = ({ )} ) : null - -Flag.defaultProps = { - withEmoji: true, - withFlagButton: true, -} diff --git a/src/FlagButton.tsx b/src/FlagButton.tsx index 27b333a9..472ea0cb 100644 --- a/src/FlagButton.tsx +++ b/src/FlagButton.tsx @@ -124,11 +124,11 @@ export interface FlagButtonProps { export const FlagButton = ({ allowFontScaling, - withEmoji, - withCountryNameButton, - withCallingCodeButton, - withCurrencyButton, - withFlagButton, + withEmoji = true, + withCountryNameButton = false, + withCallingCodeButton = false, + withCurrencyButton = false, + withFlagButton = true, countryCode, containerButtonStyle, onOpen, @@ -161,11 +161,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..5f56ec4f 100644 --- a/src/HeaderModal.tsx +++ b/src/HeaderModal.tsx @@ -28,7 +28,7 @@ interface HeaderModalProps { export const HeaderModal = (props: HeaderModalProps) => { const { withFilter, - withCloseButton, + withCloseButton = true, closeButtonImage, closeButtonStyle, closeButtonImageStyle, @@ -49,7 +49,3 @@ export const HeaderModal = (props: HeaderModalProps) => { ) } - -HeaderModal.defaultProps = { - withCloseButton: true, -} diff --git a/src/index.tsx b/src/index.tsx index e03538d4..5e7c20c2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -49,7 +49,7 @@ interface Props { onClose?(): void } -const Main = ({ theme, translation, ...props }: Props) => { +const Main = ({ theme, translation, withEmoji = true, onSelect = () => {}, ...props }: Props) => { return ( @@ -59,11 +59,6 @@ const Main = ({ theme, translation, ...props }: Props) => { ) } -Main.defaultProps = { - onSelect: () => {}, - withEmoji: true, -} - export default Main export { getCountriesAsync as getAllCountries,