Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Example: Theme switching migration #27346

Closed
wants to merge 21 commits into from
Closed

Example: Theme switching migration #27346

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
8155438
Merge branch 'main' into @chrispader/re-structure-theme-styles
Sep 13, 2023
53504a2
fix: migrate Button component
Sep 13, 2023
fea40c8
fix: remove duplicate "this.props"
Sep 13, 2023
04fc811
feat(selection-list): add tooltip
thiagobrez Aug 28, 2023
7e6248e
fix(selection-list): accountID to number
thiagobrez Aug 28, 2023
f930478
refactor(selection-list): rename CheckboxListItem to UserListItem
thiagobrez Aug 30, 2023
c05092b
fix(selection-list): make showTooltip required
thiagobrez Aug 30, 2023
5da11dd
[TS migration] Migrate 'CurrentDate.js' lib to TypeScript
BartoszGrajdek Sep 10, 2023
be7f644
Remove void return
BartoszGrajdek Sep 12, 2023
90f5261
fix: add GH issue link to TODO comments
Sep 13, 2023
ddfab35
fix: add one more comment
Sep 13, 2023
2e990b3
fix: update comment
Sep 13, 2023
2c932e5
fix: remove weird change
Sep 13, 2023
2550086
feat: add theme switching example for functional component
Sep 13, 2023
2afe04c
Merge branch 'main' into @chrispader/theme-switching-migration-example
Sep 13, 2023
a9e823e
fix: remove weird change
Sep 13, 2023
243bf76
fix: use hook instead of HOC
Sep 13, 2023
3fb67c2
fix: missing parantheses
Sep 13, 2023
1744c44
Merge branch 'main' into @chrispader/theme-switching-migration-example
Sep 14, 2023
db1545d
fix: improve readability
Sep 14, 2023
0c32041
fix: rename themeStyles to styles
Sep 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 45 additions & 38 deletions src/components/Button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React, {Component} from 'react';
import {ActivityIndicator, View} from 'react-native';
import PropTypes from 'prop-types';
import styles from '../../styles/styles';
import themeColors from '../../styles/themes/default';
import Text from '../Text';
import KeyboardShortcut from '../../libs/KeyboardShortcut';
import Icon from '../Icon';
Expand All @@ -16,6 +14,8 @@ import withNavigationFocus from '../withNavigationFocus';
import validateSubmitShortcut from './validateSubmitShortcut';
import PressableWithFeedback from '../Pressable/PressableWithFeedback';
import refPropTypes from '../refPropTypes';
import withTheme, {withThemePropTypes} from '../withTheme';
import withThemeStyles, {withThemeStylesPropTypes} from '../withThemeStyles';

const propTypes = {
/** The text for the button label */
Expand Down Expand Up @@ -77,10 +77,10 @@ const propTypes = {
/** The priority to assign the enter key event listener. 0 is the highest priority. */
enterKeyEventListenerPriority: PropTypes.number,

/** Additional styles to add after local styles. Applied to Pressable portion of button */
/** Additional styles to add after local this.props.themeStyles. Applied to Pressable portion of button */
style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),

/** Additional button styles. Specific to the OpacityView of button */
/** Additional button this.props.themeStyles. Specific to the OpacityView of button */
// eslint-disable-next-line react/forbid-prop-types
innerStyles: PropTypes.arrayOf(PropTypes.object),

Expand Down Expand Up @@ -120,14 +120,17 @@ const propTypes = {

/** A ref to forward the button */
forwardedRef: refPropTypes,

...withThemePropTypes,
...withThemeStylesPropTypes,
};

const defaultProps = {
text: '',
shouldShowRightIcon: false,
icon: null,
iconRight: Expensicons.ArrowRight,
iconFill: themeColors.textLight,
iconFill: undefined,
grgia marked this conversation as resolved.
Show resolved Hide resolved
iconStyles: [],
iconRightStyles: [],
isLoading: false,
Expand Down Expand Up @@ -202,20 +205,22 @@ class Button extends Component {
return this.props.children;
}

const defaultIconFill = this.props.theme.textLight;

const textComponent = (
<Text
numberOfLines={1}
selectable={false}
style={[
this.props.isLoading && styles.opacity0,
styles.pointerEventsNone,
styles.buttonText,
this.props.small && styles.buttonSmallText,
this.props.medium && styles.buttonMediumText,
this.props.large && styles.buttonLargeText,
this.props.success && styles.buttonSuccessText,
this.props.danger && styles.buttonDangerText,
this.props.icon && styles.textAlignLeft,
this.props.isLoading && this.props.this.props.themeStyles.opacity0,
chrispader marked this conversation as resolved.
Show resolved Hide resolved
this.props.themeStyles.pointerEventsNone,
this.props.themeStyles.buttonText,
this.props.small && this.props.themeStyles.buttonSmallText,
this.props.medium && this.props.themeStyles.buttonMediumText,
this.props.large && this.props.themeStyles.buttonLargeText,
this.props.success && this.props.themeStyles.buttonSuccessText,
this.props.danger && this.props.themeStyles.buttonDangerText,
this.props.icon && this.props.themeStyles.textAlignLeft,
...this.props.textStyles,
]}
>
Expand All @@ -225,21 +230,21 @@ class Button extends Component {

if (this.props.icon || this.props.shouldShowRightIcon) {
return (
<View style={[styles.justifyContentBetween, styles.flexRow]}>
<View style={[styles.alignItemsCenter, styles.flexRow, styles.flexShrink1]}>
<View style={[this.props.themeStyles.justifyContentBetween, this.props.themeStyles.flexRow]}>
<View style={[this.props.themeStyles.alignItemsCenter, this.props.themeStyles.flexRow, this.props.themeStyles.flexShrink1]}>
{this.props.icon && (
<View style={[styles.mr1, ...this.props.iconStyles]}>
<View style={[this.props.themeStyles.mr1, ...this.props.iconStyles]}>
<Icon
src={this.props.icon}
fill={this.props.iconFill}
fill={this.props.iconFill || defaultIconFill}
small={this.props.small}
/>
</View>
)}
{textComponent}
</View>
{this.props.shouldShowRightIcon && (
<View style={[styles.justifyContentCenter, styles.ml1, ...this.props.iconRightStyles]}>
<View style={[this.props.themeStyles.justifyContentCenter, this.props.themeStyles.ml1, ...this.props.iconRightStyles]}>
<Icon
src={this.props.iconRight}
fill={this.props.iconFill}
Expand Down Expand Up @@ -279,29 +284,29 @@ class Button extends Component {
onMouseDown={this.props.onMouseDown}
disabled={this.props.isLoading || this.props.isDisabled}
wrapperStyle={[
this.props.isDisabled ? {...styles.cursorDisabled, ...styles.noSelect} : {},
styles.buttonContainer,
this.props.shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
this.props.shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
this.props.isDisabled ? {...this.props.themeStyles.cursorDisabled, ...this.props.themeStyles.noSelect} : {},
this.props.themeStyles.buttonContainer,
this.props.shouldRemoveRightBorderRadius ? this.props.themeStyles.noRightBorderRadius : undefined,
this.props.shouldRemoveLeftBorderRadius ? this.props.themeStyles.noLeftBorderRadius : undefined,
...StyleUtils.parseStyleAsArray(this.props.style),
]}
style={[
styles.button,
this.props.small ? styles.buttonSmall : undefined,
this.props.medium ? styles.buttonMedium : undefined,
this.props.large ? styles.buttonLarge : undefined,
this.props.success ? styles.buttonSuccess : undefined,
this.props.danger ? styles.buttonDanger : undefined,
this.props.isDisabled && (this.props.success || this.props.danger) ? styles.buttonOpacityDisabled : undefined,
this.props.isDisabled && !this.props.danger && !this.props.success ? styles.buttonDisabled : undefined,
this.props.shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
this.props.shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
this.props.themeStyles.button,
chrispader marked this conversation as resolved.
Show resolved Hide resolved
this.props.small ? this.props.themeStyles.buttonSmall : undefined,
this.props.medium ? this.props.themeStyles.buttonMedium : undefined,
this.props.large ? this.props.themeStyles.buttonLarge : undefined,
this.props.success ? this.props.themeStyles.buttonSuccess : undefined,
this.props.danger ? this.props.themeStyles.buttonDanger : undefined,
this.props.isDisabled && (this.props.success || this.props.danger) ? this.props.themeStyles.buttonOpacityDisabled : undefined,
this.props.isDisabled && !this.props.danger && !this.props.success ? this.props.themeStyles.buttonDisabled : undefined,
this.props.shouldRemoveRightBorderRadius ? this.props.themeStyles.noRightBorderRadius : undefined,
this.props.shouldRemoveLeftBorderRadius ? this.props.themeStyles.noLeftBorderRadius : undefined,
...this.props.innerStyles,
]}
hoverStyle={[
this.props.shouldUseDefaultHover && !this.props.isDisabled ? styles.buttonDefaultHovered : undefined,
this.props.success && !this.props.isDisabled ? styles.buttonSuccessHovered : undefined,
this.props.danger && !this.props.isDisabled ? styles.buttonDangerHovered : undefined,
this.props.shouldUseDefaultHover && !this.props.isDisabled ? this.props.themeStyles.buttonDefaultHovered : undefined,
this.props.success && !this.props.isDisabled ? this.props.themeStyles.buttonSuccessHovered : undefined,
this.props.danger && !this.props.isDisabled ? this.props.themeStyles.buttonDangerHovered : undefined,
]}
nativeID={this.props.nativeID}
accessibilityLabel={this.props.accessibilityLabel}
Expand All @@ -310,8 +315,8 @@ class Button extends Component {
{this.renderContent()}
{this.props.isLoading && (
<ActivityIndicator
color={this.props.success || this.props.danger ? themeColors.textLight : themeColors.text}
style={[styles.pAbsolute, styles.l0, styles.r0]}
color={this.props.success || this.props.danger ? this.props.theme.textLight : this.props.theme.text}
style={[this.props.themeStyles.pAbsolute, this.props.themeStyles.l0, this.props.themeStyles.r0]}
/>
)}
</PressableWithFeedback>
Expand All @@ -325,6 +330,8 @@ Button.defaultProps = defaultProps;
export default compose(
withNavigationFallback,
withNavigationFocus,
withTheme,
withThemeStyles,
)(
React.forwardRef((props, ref) => (
<Button
Expand Down
2 changes: 1 addition & 1 deletion src/libs/ReportUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2627,7 +2627,7 @@ function buildTransactionThread(reportAction, moneyRequestReportID) {
participantAccountIDs,
getTransactionReportName(reportAction),
'',
lodashGet(getReport(reportAction.reportID), 'policyID', CONST.POLICY.OWNER_EMAIL_FAKE),
lodashGet(getReport(moneyRequestReportID), 'policyID', CONST.POLICY.OWNER_EMAIL_FAKE),
CONST.POLICY.OWNER_ACCOUNT_ID_FAKE,
false,
'',
Expand Down
Loading