From 0a97e0bb219937603096ff5ec10d2ce20d93e77e Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Thu, 14 Dec 2023 20:30:35 +0100 Subject: [PATCH 1/5] ref: migrate ConfirmPopover --- src/components/ConfirmPopover.js | 85 ------------------- src/components/ConfirmPopover.tsx | 133 ++++++++++++++++++++++++++++++ src/components/Popover/types.ts | 8 +- 3 files changed, 137 insertions(+), 89 deletions(-) delete mode 100644 src/components/ConfirmPopover.js create mode 100644 src/components/ConfirmPopover.tsx diff --git a/src/components/ConfirmPopover.js b/src/components/ConfirmPopover.js deleted file mode 100644 index 83001736b471..000000000000 --- a/src/components/ConfirmPopover.js +++ /dev/null @@ -1,85 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import ConfirmContent from './ConfirmContent'; -import Popover from './Popover'; -import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; - -const propTypes = { - /** Title of the modal */ - title: PropTypes.string.isRequired, - - /** A callback to call when the form has been submitted */ - onConfirm: PropTypes.func.isRequired, - - /** A callback to call when the form has been closed */ - onCancel: PropTypes.func, - - /** Modal visibility */ - isVisible: PropTypes.bool.isRequired, - - /** Confirm button text */ - confirmText: PropTypes.string, - - /** Cancel button text */ - cancelText: PropTypes.string, - - /** Is the action destructive */ - danger: PropTypes.bool, - - /** Whether we should show the cancel button */ - shouldShowCancelButton: PropTypes.bool, - - /** Modal content text/element */ - prompt: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - - /** Where the popover should be positioned */ - anchorPosition: PropTypes.shape({ - top: PropTypes.number, - left: PropTypes.number, - }).isRequired, - - /** Styles for view */ - // eslint-disable-next-line react/forbid-prop-types - contentStyles: PropTypes.arrayOf(PropTypes.object), - - ...windowDimensionsPropTypes, -}; - -const defaultProps = { - confirmText: '', - cancelText: '', - danger: false, - onCancel: () => {}, - shouldShowCancelButton: true, - prompt: '', - contentStyles: [], -}; - -function ConfirmPopover(props) { - return ( - - - - ); -} - -ConfirmPopover.propTypes = propTypes; -ConfirmPopover.defaultProps = defaultProps; -ConfirmPopover.displayName = 'ConfirmPopover'; -export default withWindowDimensions(ConfirmPopover); diff --git a/src/components/ConfirmPopover.tsx b/src/components/ConfirmPopover.tsx new file mode 100644 index 000000000000..9d285e144551 --- /dev/null +++ b/src/components/ConfirmPopover.tsx @@ -0,0 +1,133 @@ +import PropTypes from 'prop-types'; +import React, {RefObject} from 'react'; +import {StyleProp, View, ViewStyle} from 'react-native'; +import ConfirmContent from './ConfirmContent'; +import {PopoverAnchorPosition} from './Modal/types'; +import Popover from './Popover'; +import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; +import {WindowDimensionsContextData} from './withWindowDimensions/types'; + +const propTypes = { + /** Title of the modal */ + title: PropTypes.string.isRequired, + + /** A callback to call when the form has been submitted */ + onConfirm: PropTypes.func.isRequired, + + /** A callback to call when the form has been closed */ + onCancel: PropTypes.func, + + /** Modal visibility */ + isVisible: PropTypes.bool.isRequired, + + /** Confirm button text */ + confirmText: PropTypes.string, + + /** Cancel button text */ + cancelText: PropTypes.string, + + /** Is the action destructive */ + danger: PropTypes.bool, + + /** Whether we should show the cancel button */ + shouldShowCancelButton: PropTypes.bool, + + /** Modal content text/element */ + prompt: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), + + /** Where the popover should be positioned */ + anchorPosition: PropTypes.shape({ + top: PropTypes.number, + left: PropTypes.number, + }).isRequired, + + /** Styles for view */ + // eslint-disable-next-line react/forbid-prop-types + contentStyles: PropTypes.arrayOf(PropTypes.object), + + ...windowDimensionsPropTypes, +}; + +const defaultProps = { + confirmText: '', + cancelText: '', + danger: false, + onCancel: () => {}, + shouldShowCancelButton: true, + prompt: '', + contentStyles: [], +}; + +type ConfirmPopoverProps = { + /** Title of the modal */ + title: string; + + /** A callback to call when the form has been submitted */ + onConfirm: () => void; + + /** A callback to call when the form has been closed */ + onCancel?: () => void; + + /** Modal visibility */ + isVisible: boolean; + + /** Confirm button text */ + confirmText?: string; + + /** Cancel button text */ + cancelText?: string; + + /** Is the action destructive */ + danger?: boolean; + + /** Whether we should show the cancel button */ + shouldShowCancelButton?: boolean; + + /** Modal content text/element */ + prompt?: string | React.ReactNode; + + /** Where the popover should be positioned */ + anchorPosition?: PopoverAnchorPosition; + + /** Styles for view */ + contentStyles?: StyleProp; +} & WindowDimensionsContextData; + +function ConfirmPopover({ + onConfirm, + onCancel = () => {}, + isVisible, + anchorPosition, + contentStyles, + title, + prompt = '', + confirmText = '', + cancelText = '', + danger = false, + shouldShowCancelButton = true, +}: ConfirmPopoverProps) { + return ( + + + + ); +} + +ConfirmPopover.displayName = 'ConfirmPopover'; +export default withWindowDimensions(ConfirmPopover); diff --git a/src/components/Popover/types.ts b/src/components/Popover/types.ts index 7f7e2829770c..8c1291a56f6e 100644 --- a/src/components/Popover/types.ts +++ b/src/components/Popover/types.ts @@ -13,16 +13,16 @@ type PopoverProps = BaseModalProps & { anchorPosition?: PopoverAnchorPosition; /** The anchor alignment of the popover */ - anchorAlignment: AnchorAlignment; + anchorAlignment?: AnchorAlignment; /** The anchor ref of the popover */ - anchorRef: React.RefObject; + anchorRef?: React.RefObject; /** Whether disable the animations */ - disableAnimation: boolean; + disableAnimation?: boolean; /** Whether we don't want to show overlay */ - withoutOverlay: boolean; + withoutOverlay?: boolean; /** The dimensions of the popover */ popoverDimensions?: PopoverDimensions; From 6b73d7e67c31721256a59c9c77542554619e8f86 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Thu, 14 Dec 2023 20:32:17 +0100 Subject: [PATCH 2/5] fix: removed proptypes --- src/components/ConfirmPopover.tsx | 53 +------------------------------ 1 file changed, 1 insertion(+), 52 deletions(-) diff --git a/src/components/ConfirmPopover.tsx b/src/components/ConfirmPopover.tsx index 9d285e144551..37edcf17f859 100644 --- a/src/components/ConfirmPopover.tsx +++ b/src/components/ConfirmPopover.tsx @@ -4,60 +4,9 @@ import {StyleProp, View, ViewStyle} from 'react-native'; import ConfirmContent from './ConfirmContent'; import {PopoverAnchorPosition} from './Modal/types'; import Popover from './Popover'; -import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; +import withWindowDimensions from './withWindowDimensions'; import {WindowDimensionsContextData} from './withWindowDimensions/types'; -const propTypes = { - /** Title of the modal */ - title: PropTypes.string.isRequired, - - /** A callback to call when the form has been submitted */ - onConfirm: PropTypes.func.isRequired, - - /** A callback to call when the form has been closed */ - onCancel: PropTypes.func, - - /** Modal visibility */ - isVisible: PropTypes.bool.isRequired, - - /** Confirm button text */ - confirmText: PropTypes.string, - - /** Cancel button text */ - cancelText: PropTypes.string, - - /** Is the action destructive */ - danger: PropTypes.bool, - - /** Whether we should show the cancel button */ - shouldShowCancelButton: PropTypes.bool, - - /** Modal content text/element */ - prompt: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), - - /** Where the popover should be positioned */ - anchorPosition: PropTypes.shape({ - top: PropTypes.number, - left: PropTypes.number, - }).isRequired, - - /** Styles for view */ - // eslint-disable-next-line react/forbid-prop-types - contentStyles: PropTypes.arrayOf(PropTypes.object), - - ...windowDimensionsPropTypes, -}; - -const defaultProps = { - confirmText: '', - cancelText: '', - danger: false, - onCancel: () => {}, - shouldShowCancelButton: true, - prompt: '', - contentStyles: [], -}; - type ConfirmPopoverProps = { /** Title of the modal */ title: string; From 18add33496c6fccb8915b04296926c7a4268eaf6 Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Fri, 15 Dec 2023 10:07:29 +0100 Subject: [PATCH 3/5] fix: removed unused hoc from a file --- src/components/ConfirmPopover.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/ConfirmPopover.tsx b/src/components/ConfirmPopover.tsx index 37edcf17f859..4ec261a13b71 100644 --- a/src/components/ConfirmPopover.tsx +++ b/src/components/ConfirmPopover.tsx @@ -1,11 +1,8 @@ -import PropTypes from 'prop-types'; -import React, {RefObject} from 'react'; -import {StyleProp, View, ViewStyle} from 'react-native'; +import React from 'react'; +import {StyleProp, ViewStyle} from 'react-native'; import ConfirmContent from './ConfirmContent'; import {PopoverAnchorPosition} from './Modal/types'; import Popover from './Popover'; -import withWindowDimensions from './withWindowDimensions'; -import {WindowDimensionsContextData} from './withWindowDimensions/types'; type ConfirmPopoverProps = { /** Title of the modal */ @@ -40,7 +37,7 @@ type ConfirmPopoverProps = { /** Styles for view */ contentStyles?: StyleProp; -} & WindowDimensionsContextData; +}; function ConfirmPopover({ onConfirm, @@ -79,4 +76,5 @@ function ConfirmPopover({ } ConfirmPopover.displayName = 'ConfirmPopover'; -export default withWindowDimensions(ConfirmPopover); + +export default ConfirmPopover; From e184d891d6152c2c5847314dbf2fd1fc8b55751f Mon Sep 17 00:00:00 2001 From: Jakub Butkiewicz Date: Wed, 20 Dec 2023 09:43:27 +0100 Subject: [PATCH 4/5] chore: added todo --- src/components/ConfirmPopover.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/ConfirmPopover.tsx b/src/components/ConfirmPopover.tsx index 4ec261a13b71..49cc64b57731 100644 --- a/src/components/ConfirmPopover.tsx +++ b/src/components/ConfirmPopover.tsx @@ -60,8 +60,10 @@ function ConfirmPopover({ anchorPosition={anchorPosition} > Date: Wed, 20 Dec 2023 15:23:58 +0100 Subject: [PATCH 5/5] chore: remove ConfirnPopover component becuase its not used anywhere --- src/components/ConfirmPopover.tsx | 82 ------------------------------- src/components/Popover/types.ts | 8 +-- 2 files changed, 4 insertions(+), 86 deletions(-) delete mode 100644 src/components/ConfirmPopover.tsx diff --git a/src/components/ConfirmPopover.tsx b/src/components/ConfirmPopover.tsx deleted file mode 100644 index 49cc64b57731..000000000000 --- a/src/components/ConfirmPopover.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React from 'react'; -import {StyleProp, ViewStyle} from 'react-native'; -import ConfirmContent from './ConfirmContent'; -import {PopoverAnchorPosition} from './Modal/types'; -import Popover from './Popover'; - -type ConfirmPopoverProps = { - /** Title of the modal */ - title: string; - - /** A callback to call when the form has been submitted */ - onConfirm: () => void; - - /** A callback to call when the form has been closed */ - onCancel?: () => void; - - /** Modal visibility */ - isVisible: boolean; - - /** Confirm button text */ - confirmText?: string; - - /** Cancel button text */ - cancelText?: string; - - /** Is the action destructive */ - danger?: boolean; - - /** Whether we should show the cancel button */ - shouldShowCancelButton?: boolean; - - /** Modal content text/element */ - prompt?: string | React.ReactNode; - - /** Where the popover should be positioned */ - anchorPosition?: PopoverAnchorPosition; - - /** Styles for view */ - contentStyles?: StyleProp; -}; - -function ConfirmPopover({ - onConfirm, - onCancel = () => {}, - isVisible, - anchorPosition, - contentStyles, - title, - prompt = '', - confirmText = '', - cancelText = '', - danger = false, - shouldShowCancelButton = true, -}: ConfirmPopoverProps) { - return ( - - - - ); -} - -ConfirmPopover.displayName = 'ConfirmPopover'; - -export default ConfirmPopover; diff --git a/src/components/Popover/types.ts b/src/components/Popover/types.ts index 8c1291a56f6e..7f7e2829770c 100644 --- a/src/components/Popover/types.ts +++ b/src/components/Popover/types.ts @@ -13,16 +13,16 @@ type PopoverProps = BaseModalProps & { anchorPosition?: PopoverAnchorPosition; /** The anchor alignment of the popover */ - anchorAlignment?: AnchorAlignment; + anchorAlignment: AnchorAlignment; /** The anchor ref of the popover */ - anchorRef?: React.RefObject; + anchorRef: React.RefObject; /** Whether disable the animations */ - disableAnimation?: boolean; + disableAnimation: boolean; /** Whether we don't want to show overlay */ - withoutOverlay?: boolean; + withoutOverlay: boolean; /** The dimensions of the popover */ popoverDimensions?: PopoverDimensions;