From 916b33bf171a363e55d06f3a7fce61af25fcf712 Mon Sep 17 00:00:00 2001 From: Yauheni Pasiukevich Date: Wed, 13 Dec 2023 15:24:41 +0100 Subject: [PATCH] [TS migration] Migrate 'PinButton.js' component to TypeScript --- src/components/PinButton.js | 49 ------------------------------------ src/components/PinButton.tsx | 43 +++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 49 deletions(-) delete mode 100644 src/components/PinButton.js create mode 100644 src/components/PinButton.tsx diff --git a/src/components/PinButton.js b/src/components/PinButton.js deleted file mode 100644 index 182e49054100..000000000000 --- a/src/components/PinButton.js +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import useTheme from '@hooks/useTheme'; -import useThemeStyles from '@hooks/useThemeStyles'; -import reportPropTypes from '@pages/reportPropTypes'; -import * as Report from '@userActions/Report'; -import * as Session from '@userActions/Session'; -import CONST from '@src/CONST'; -import Icon from './Icon'; -import * as Expensicons from './Icon/Expensicons'; -import PressableWithFeedback from './Pressable/PressableWithFeedback'; -import Tooltip from './Tooltip'; -import withLocalize, {withLocalizePropTypes} from './withLocalize'; - -const propTypes = { - /** Report to pin */ - report: reportPropTypes, - ...withLocalizePropTypes, -}; - -const defaultProps = { - report: null, -}; - -function PinButton(props) { - const theme = useTheme(); - const styles = useThemeStyles(); - return ( - - Report.togglePinnedState(props.report.reportID, props.report.isPinned))} - style={[styles.touchableButtonImage]} - ariaChecked={props.report.isPinned} - accessibilityLabel={props.report.isPinned ? props.translate('common.unPin') : props.translate('common.pin')} - role={CONST.ROLE.BUTTON} - > - - - - ); -} - -PinButton.displayName = 'PinButton'; -PinButton.propTypes = propTypes; -PinButton.defaultProps = defaultProps; - -export default withLocalize(PinButton); diff --git a/src/components/PinButton.tsx b/src/components/PinButton.tsx new file mode 100644 index 000000000000..2ae74853d571 --- /dev/null +++ b/src/components/PinButton.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import useLocalize from '@hooks/useLocalize'; +import useTheme from '@hooks/useTheme'; +import useThemeStyles from '@hooks/useThemeStyles'; +import * as ReportActions from '@userActions/Report'; +import * as Session from '@userActions/Session'; +import CONST from '@src/CONST'; +import type {Report} from '@src/types/onyx'; +import Icon from './Icon'; +import * as Expensicons from './Icon/Expensicons'; +import PressableWithFeedback from './Pressable/PressableWithFeedback'; +import Tooltip from './Tooltip'; + +type PinButtonProps = { + /** Report to pin */ + report: Report; +}; + +function PinButton({report}: PinButtonProps) { + const theme = useTheme(); + const styles = useThemeStyles(); + const {translate} = useLocalize(); + + return ( + + ReportActions.togglePinnedState(report.reportID, report.isPinned ?? false))} + style={styles.touchableButtonImage} + accessibilityLabel={report.isPinned ? translate('common.unPin') : translate('common.pin')} + role={CONST.ROLE.BUTTON} + > + + + + ); +} + +PinButton.displayName = 'PinButton'; + +export default PinButton;