Diff
checker
Texte
Texte
Images
Documents
Excel
Dossiers
Legal
Enterprise
Application de bureau
Prix
Se connecter
Télécharger Diffchecker Desktop
Comparer le texte
Trouver la différence entre deux fichiers texte
Outils
Historique
Éditeur live
Cacher identiques
Sans retour à la ligne
Vue
Divisé
Unifié
Niveau de précision
Intelligent
Mot
Caractère
Coloration syntaxique
Choisir la syntaxe
Ignorer
Transformer le texte
Aller au premier écart
Modifier l'entrée
Diffchecker Desktop
La façon la plus sécurisée d'utiliser Diffchecker. Obtenez l'application Diffchecker Desktop : vos diffs ne quittent jamais votre ordinateur !
Obtenir Desktop
View.js
Créé
il y a 4 ans
Le diff n'expire jamais
Effacer
Exporter
Partager
Expliquer
153 suppressions
Lignes
Total
Supprimé
Caractères
Total
Supprimé
Pour continuer à utiliser cette fonctionnalité, passez à
Diff
checker
Pro
Voir les prix
189 lignes
Copier tout
113 ajouts
Lignes
Total
Ajouté
Caractères
Total
Ajouté
Pour continuer à utiliser cette fonctionnalité, passez à
Diff
checker
Pro
Voir les prix
203 lignes
Copier tout
/**
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
*
* This source code is licensed under the MIT license found in the
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
* LICENSE file in the root directory of this source tree.
*
*
* @format
* @format
* @flow strict-local
* @flow strict-local
*/
*/
import type {ViewProps} from './ViewPropTypes';
import type {ViewProps} from './ViewPropTypes';
import flattenStyle from '../../StyleSheet/flattenStyle';
import flattenStyle from '../../StyleSheet/flattenStyle';
import TextAncestor from '../../Text/TextAncestor';
import TextAncestor from '../../Text/TextAncestor';
import ViewNativeComponent from './ViewNativeComponent';
import ViewNativeComponent from './ViewNativeComponent';
import * as React from 'react';
import * as React from 'react';
export type Props = ViewProps;
export type Props = ViewProps;
Copier
Copié
Copier
Copié
let didWarnAboutGap = false;
/**
/**
* The most fundamental component for building a UI, View is a container that
* The most fundamental component for building a UI, View is a container that
* supports layout with flexbox, style, some touch handling, and accessibility
* supports layout with flexbox, style, some touch handling, and accessibility
* controls.
* controls.
*
*
* @see https://reactnative.dev/docs/view
* @see https://reactnative.dev/docs/view
*/
*/
const View: React.AbstractComponent<
const View: React.AbstractComponent<
ViewProps,
ViewProps,
Copier
Copié
Copier
Copié
React.ElementRef<typeof ViewNativeComponent>
,
React.ElementRef<typeof ViewNativeComponent>
> = React.forwardRef(
> = React.forwardRef(
(props: ViewProps, forwardedRef) => {
(
const
{
{
accessibilityElementsHidden,
accessibilityElementsHidden,
accessibilityLabel,
accessibilityLabel,
accessibilityLabelledBy,
accessibilityLabelledBy,
accessibilityLiveRegion,
accessibilityLiveRegion,
accessibilityRole,
accessibilityRole,
accessibilityState,
accessibilityState,
accessibilityValue,
accessibilityValue,
'aria-busy': ariaBusy,
'aria-busy': ariaBusy,
'aria-checked': ariaChecked,
'aria-checked': ariaChecked,
'aria-disabled': ariaDisabled,
'aria-disabled': ariaDisabled,
'aria-expanded': ariaExpanded,
'aria-expanded': ariaExpanded,
'aria-hidden': ariaHidden,
'aria-hidden': ariaHidden,
'aria-label': ariaLabel,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
'aria-labelledby': ariaLabelledBy,
'aria-live': ariaLive,
'aria-live': ariaLive,
'aria-selected': ariaSelected,
'aria-selected': ariaSelected,
'aria-valuemax': ariaValueMax,
'aria-valuemax': ariaValueMax,
'aria-valuemin': ariaValueMin,
'aria-valuemin': ariaValueMin,
'aria-valuenow': ariaValueNow,
'aria-valuenow': ariaValueNow,
'aria-valuetext': ariaValueText,
'aria-valuetext': ariaValueText,
focusable,
focusable,
id,
id,
importantForAccessibility,
importantForAccessibility,
nativeID,
nativeID,
pointerEvents,
pointerEvents,
role,
role,
style,
style,
tabIndex,
tabIndex,
gap,
...otherProps
rowGap,
}: ViewProps,
columnGap,
forwardedRef,
...otherProps
) => {
} = props;
const _accessibilityLabelledBy =
ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
Copier
Copié
Copier
Copié
const _accessibilityState = {
if (__DEV__) {
busy: ariaBusy ?? accessibilityState?.busy,
if (
checked: ariaChecked ?? accessibilityState?.checked,
('gap' in props || 'columnGap' in props || 'rowGap' in props) &&
disabled: ariaDisabled ?? accessibilityState?.disabled,
!didWarnAboutGap
expanded: ariaExpanded ?? accessibilityState?.expanded,
) {
selected: ariaSelected ?? accessibilityState?.selected,
console.warn(
}
;
'<View> was passed prop either `gap`, `columnGap`, `rowGap`. ' +
'Currently this is a no-op, but in future versions, this will ' +
'apply these props as styles.'
);
didWarnAboutGap = true;
}
}
Copier
Copié
Copier
Copié
const _accessibilityValue = {
const _accessibilityLabelledBy =
max: ariaValueMax ?? accessibilityValue?.max,
ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
min: ariaValueMin ?? accessibilityValue?.min,
now: ariaValueNow ?? accessibilityValue?.now,
text: ariaValueText ?? accessibilityValue?.text,
};
Copier
Copié
Copier
Copié
// Map role values to AccessibilityRole values
const _accessibilityState = {
const roleToAccessibilityRoleMapping = {
busy: ariaBusy ?? accessibilityState?.busy,
alert: 'alert',
checked: ariaChecked ?? accessibilityState?.checked,
alertdialog: undefined,
disabled: ariaDisabled ?? accessibilityState?.disabled,
application: undefined,
expanded: ariaExpanded ?? accessibilityState?.expanded,
article: undefined,
selected: ariaSelected ?? accessibilityState?.selected,
banner: undefined,
};
button: 'button',
cell: undefined,
checkbox: 'checkbox',
columnheader: undefined,
combobox: 'combobox',
complementary: undefined,
contentinfo: undefined,
definition: undefined,
dialog: undefined,
directory: undefined,
document: undefined,
feed: undefined,
figure: undefined,
form: undefined,
grid: 'grid',
group: undefined,
heading: 'header',
img: 'image',
link: 'link',
list: 'list',
listitem: undefined,
log: undefined,
main: undefined,
marquee: undefined,
math: undefined,
menu: 'menu',
menubar: 'menubar',
menuitem: 'menuitem',
meter: undefined,
navigation: undefined,
none: 'none',
note: undefined,
presentation: 'none',
progressbar: 'progressbar',
radio: 'radio',
radiogroup: 'radiogroup',
region: undefined,
row: undefined,
rowgroup: undefined,
rowheader: undefined,
scrollbar: 'scrollbar',
searchbox: 'search',
separator: undefined,
slider: 'adjustable',
spinbutton: 'spinbutton',
status: undefined,
summary: 'summary',
switch: 'switch',
tab: 'tab',
table: undefined,
tablist: 'tablist',
tabpanel: undefined,
term: undefined,
timer: 'timer',
toolbar: 'toolbar',
tooltip: undefined,
tree: undefined,
treegrid: undefined,
treeitem: undefined,
};
Copier
Copié
Copier
Copié
const flattenedStyle = flattenStyle(style);
const _accessibilityValue = {
const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
max: ariaValueMax ?? accessibilityValue?.max,
min: ariaValueMin ?? accessibilityValue?.min,
now: ariaValueNow ?? accessibilityValue?.now,
text: ariaValueText ?? accessibilityValue?.text,
};
Copier
Copié
Copier
Copié
return (
// Map role values to AccessibilityRole values
<TextAncestor.Provider value={false}>
const roleToAccessibilityRoleMapping = {
<ViewNativeComponent
alert: 'alert',
{...otherProps}
alertdialog: undefined,
accessibilityLiveRegion={
application: undefined,
ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
article: undefined,
}
banner: undefined,
accessibilityLabel={ariaLabel ?? accessibilityLabel}
button: 'button',
focusable={tabIndex !== undefined ? !tabIndex : focusable}
cell: undefined,
accessibilityState={_accessibilityState}
checkbox: 'checkbox',
accessibilityRole={
columnheader: undefined,
role ? roleToAccessibilityRoleMapping[role] : accessibilityRole
combobox: 'combobox',
}
complementary: undefined,
accessibilityElementsHidden={
contentinfo: undefined,
ariaHidden ?? accessibilityElementsHidden
definition: undefined,
}
dialog: undefined,
accessibilityLabelledBy={_accessibilityLabelledBy}
directory: undefined,
accessibilityValue={_accessibilityValue}
document: undefined,
importantForAccessibility={
feed: undefined,
ariaHidden === true
figure: undefined,
? 'no-hide-descendants'
form: undefined,
: importantForAccessibility
grid: 'grid',
}
group: undefined,
nativeID={id ?? nativeID}
heading: 'header',
style={style}
img: 'image',
pointerEvents={newPointerEvents}
link: 'link',
ref={forwardedRef}
list: 'list',
/>
listitem: undefined,
</TextAncestor.Provider>
log: undefined,
);
main: undefined,
},
marquee: undefined,
);
math: undefined,
menu: 'menu',
menubar: 'menubar',
menuitem: 'menuitem',
meter: undefined,
navigation: undefined,
none: 'none',
note: undefined,
presentation: 'none',
progressbar: 'progressbar',
radio: 'radio',
radiogroup: 'radiogroup',
region: undefined,
row: undefined,
rowgroup: undefined,
rowheader: undefined,
scrollbar: 'scrollbar',
searchbox: 'search',
separator: undefined,
slider: 'adjustable',
spinbutton: 'spinbutton',
status: undefined,
summary: 'summary',
switch: 'switch',
tab: 'tab',
table: undefined,
tablist: 'tablist',
tabpanel: undefined,
term: undefined,
timer: 'timer',
toolbar: 'toolbar',
tooltip: undefined,
tree: undefined,
treegrid: undefined,
treeitem: undefined,
};
const flattenedStyle = flattenStyle(style);
const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
return (
<TextAncestor.Provider value={false}>
<ViewNativeComponent
{...otherProps}
accessibilityLiveRegion={
ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
}
accessibilityLabel={ariaLabel ?? accessibilityLabel}
focusable={tabIndex !== undefined ? !tabIndex : focusable}
accessibilityState={_accessibilityState}
accessibilityRole={
role ? roleToAccessibilityRoleMapping[role] : accessibilityRole
}
accessibilityElementsHidden={
ariaHidden ?? accessibilityElementsHidden
}
accessibilityLabelledBy={_accessibilityLabelledBy}
accessibilityValue={_accessibilityValue}
importantForAccessibility={
ariaHidden === true
? 'no-hide-descendants'
: importantForAccessibility
}
nativeID={id ?? nativeID}
style={style}
pointerEvents={newPointerEvents}
ref={forwardedRef}
/>
</TextAncestor.Provider>
);
}
);
View.displayName = 'View';
View.displayName = 'View';
module.exports = View;
module.exports = View;
Différences enregistrées
Texte d'origine
Ouvrir un fichier
/** * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * * @format * @flow strict-local */ import type {ViewProps} from './ViewPropTypes'; import flattenStyle from '../../StyleSheet/flattenStyle'; import TextAncestor from '../../Text/TextAncestor'; import ViewNativeComponent from './ViewNativeComponent'; import * as React from 'react'; export type Props = ViewProps; /** * The most fundamental component for building a UI, View is a container that * supports layout with flexbox, style, some touch handling, and accessibility * controls. * * @see https://reactnative.dev/docs/view */ const View: React.AbstractComponent< ViewProps, React.ElementRef<typeof ViewNativeComponent>, > = React.forwardRef( ( { accessibilityElementsHidden, accessibilityLabel, accessibilityLabelledBy, accessibilityLiveRegion, accessibilityRole, accessibilityState, accessibilityValue, 'aria-busy': ariaBusy, 'aria-checked': ariaChecked, 'aria-disabled': ariaDisabled, 'aria-expanded': ariaExpanded, 'aria-hidden': ariaHidden, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-live': ariaLive, 'aria-selected': ariaSelected, 'aria-valuemax': ariaValueMax, 'aria-valuemin': ariaValueMin, 'aria-valuenow': ariaValueNow, 'aria-valuetext': ariaValueText, focusable, id, importantForAccessibility, nativeID, pointerEvents, role, style, tabIndex, ...otherProps }: ViewProps, forwardedRef, ) => { const _accessibilityLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy; const _accessibilityState = { busy: ariaBusy ?? accessibilityState?.busy, checked: ariaChecked ?? accessibilityState?.checked, disabled: ariaDisabled ?? accessibilityState?.disabled, expanded: ariaExpanded ?? accessibilityState?.expanded, selected: ariaSelected ?? accessibilityState?.selected, }; const _accessibilityValue = { max: ariaValueMax ?? accessibilityValue?.max, min: ariaValueMin ?? accessibilityValue?.min, now: ariaValueNow ?? accessibilityValue?.now, text: ariaValueText ?? accessibilityValue?.text, }; // Map role values to AccessibilityRole values const roleToAccessibilityRoleMapping = { alert: 'alert', alertdialog: undefined, application: undefined, article: undefined, banner: undefined, button: 'button', cell: undefined, checkbox: 'checkbox', columnheader: undefined, combobox: 'combobox', complementary: undefined, contentinfo: undefined, definition: undefined, dialog: undefined, directory: undefined, document: undefined, feed: undefined, figure: undefined, form: undefined, grid: 'grid', group: undefined, heading: 'header', img: 'image', link: 'link', list: 'list', listitem: undefined, log: undefined, main: undefined, marquee: undefined, math: undefined, menu: 'menu', menubar: 'menubar', menuitem: 'menuitem', meter: undefined, navigation: undefined, none: 'none', note: undefined, presentation: 'none', progressbar: 'progressbar', radio: 'radio', radiogroup: 'radiogroup', region: undefined, row: undefined, rowgroup: undefined, rowheader: undefined, scrollbar: 'scrollbar', searchbox: 'search', separator: undefined, slider: 'adjustable', spinbutton: 'spinbutton', status: undefined, summary: 'summary', switch: 'switch', tab: 'tab', table: undefined, tablist: 'tablist', tabpanel: undefined, term: undefined, timer: 'timer', toolbar: 'toolbar', tooltip: undefined, tree: undefined, treegrid: undefined, treeitem: undefined, }; const flattenedStyle = flattenStyle(style); const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents; return ( <TextAncestor.Provider value={false}> <ViewNativeComponent {...otherProps} accessibilityLiveRegion={ ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion } accessibilityLabel={ariaLabel ?? accessibilityLabel} focusable={tabIndex !== undefined ? !tabIndex : focusable} accessibilityState={_accessibilityState} accessibilityRole={ role ? roleToAccessibilityRoleMapping[role] : accessibilityRole } accessibilityElementsHidden={ ariaHidden ?? accessibilityElementsHidden } accessibilityLabelledBy={_accessibilityLabelledBy} accessibilityValue={_accessibilityValue} importantForAccessibility={ ariaHidden === true ? 'no-hide-descendants' : importantForAccessibility } nativeID={id ?? nativeID} style={style} pointerEvents={newPointerEvents} ref={forwardedRef} /> </TextAncestor.Provider> ); }, ); View.displayName = 'View'; module.exports = View;
Texte modifié
Ouvrir un fichier
/** * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * * @format * @flow strict-local */ import type {ViewProps} from './ViewPropTypes'; import flattenStyle from '../../StyleSheet/flattenStyle'; import TextAncestor from '../../Text/TextAncestor'; import ViewNativeComponent from './ViewNativeComponent'; import * as React from 'react'; export type Props = ViewProps; let didWarnAboutGap = false; /** * The most fundamental component for building a UI, View is a container that * supports layout with flexbox, style, some touch handling, and accessibility * controls. * * @see https://reactnative.dev/docs/view */ const View: React.AbstractComponent< ViewProps, React.ElementRef<typeof ViewNativeComponent> > = React.forwardRef((props: ViewProps, forwardedRef) => { const { accessibilityElementsHidden, accessibilityLabel, accessibilityLabelledBy, accessibilityLiveRegion, accessibilityRole, accessibilityState, accessibilityValue, 'aria-busy': ariaBusy, 'aria-checked': ariaChecked, 'aria-disabled': ariaDisabled, 'aria-expanded': ariaExpanded, 'aria-hidden': ariaHidden, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-live': ariaLive, 'aria-selected': ariaSelected, 'aria-valuemax': ariaValueMax, 'aria-valuemin': ariaValueMin, 'aria-valuenow': ariaValueNow, 'aria-valuetext': ariaValueText, focusable, id, importantForAccessibility, nativeID, pointerEvents, role, style, tabIndex, gap, rowGap, columnGap, ...otherProps } = props; if (__DEV__) { if ( ('gap' in props || 'columnGap' in props || 'rowGap' in props) && !didWarnAboutGap ) { console.warn( '<View> was passed prop either `gap`, `columnGap`, `rowGap`. ' + 'Currently this is a no-op, but in future versions, this will ' + 'apply these props as styles.' ); didWarnAboutGap = true; } } const _accessibilityLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy; const _accessibilityState = { busy: ariaBusy ?? accessibilityState?.busy, checked: ariaChecked ?? accessibilityState?.checked, disabled: ariaDisabled ?? accessibilityState?.disabled, expanded: ariaExpanded ?? accessibilityState?.expanded, selected: ariaSelected ?? accessibilityState?.selected, }; const _accessibilityValue = { max: ariaValueMax ?? accessibilityValue?.max, min: ariaValueMin ?? accessibilityValue?.min, now: ariaValueNow ?? accessibilityValue?.now, text: ariaValueText ?? accessibilityValue?.text, }; // Map role values to AccessibilityRole values const roleToAccessibilityRoleMapping = { alert: 'alert', alertdialog: undefined, application: undefined, article: undefined, banner: undefined, button: 'button', cell: undefined, checkbox: 'checkbox', columnheader: undefined, combobox: 'combobox', complementary: undefined, contentinfo: undefined, definition: undefined, dialog: undefined, directory: undefined, document: undefined, feed: undefined, figure: undefined, form: undefined, grid: 'grid', group: undefined, heading: 'header', img: 'image', link: 'link', list: 'list', listitem: undefined, log: undefined, main: undefined, marquee: undefined, math: undefined, menu: 'menu', menubar: 'menubar', menuitem: 'menuitem', meter: undefined, navigation: undefined, none: 'none', note: undefined, presentation: 'none', progressbar: 'progressbar', radio: 'radio', radiogroup: 'radiogroup', region: undefined, row: undefined, rowgroup: undefined, rowheader: undefined, scrollbar: 'scrollbar', searchbox: 'search', separator: undefined, slider: 'adjustable', spinbutton: 'spinbutton', status: undefined, summary: 'summary', switch: 'switch', tab: 'tab', table: undefined, tablist: 'tablist', tabpanel: undefined, term: undefined, timer: 'timer', toolbar: 'toolbar', tooltip: undefined, tree: undefined, treegrid: undefined, treeitem: undefined, }; const flattenedStyle = flattenStyle(style); const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents; return ( <TextAncestor.Provider value={false}> <ViewNativeComponent {...otherProps} accessibilityLiveRegion={ ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion } accessibilityLabel={ariaLabel ?? accessibilityLabel} focusable={tabIndex !== undefined ? !tabIndex : focusable} accessibilityState={_accessibilityState} accessibilityRole={ role ? roleToAccessibilityRoleMapping[role] : accessibilityRole } accessibilityElementsHidden={ariaHidden ?? accessibilityElementsHidden} accessibilityLabelledBy={_accessibilityLabelledBy} accessibilityValue={_accessibilityValue} importantForAccessibility={ ariaHidden === true ? 'no-hide-descendants' : importantForAccessibility } nativeID={id ?? nativeID} style={style} pointerEvents={newPointerEvents} ref={forwardedRef} /> </TextAncestor.Provider> ); }); View.displayName = 'View'; module.exports = View;
Trouver la différence