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
Affichage
Vue
Divisé
Unifié
Éditeur live
Masquer les espaces
Cacher identiques
Sans retour à la ligne
Niveau de précision
Intelligent
Syntaxe
Aucun
Modifier l’apparence
Traitement
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
154 suppressions
Lignes
Total
Supprimé
Caractères
Total
Supprimé
Pour continuer à utiliser cette fonctionnalité, passez à
Diff
checker
Pro
Voir les prix
189 lignes
Copier tout
24 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,
Copier
Copié
Copier
Copié
gap,
rowGap,
columnGap,
Copier
Copié
Copier
Copié
...otherProps
...otherProps
}: ViewProps,
} = props;
forwardedRef,
) => {
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 =
const _accessibilityLabelledBy =
ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
Copier
Copié
Copier
Copié
const _accessibilityState = {
const _accessibilityState = {
busy: ariaBusy ?? accessibilityState?.busy,
busy: ariaBusy ?? accessibilityState?.busy,
checked: ariaChecked ?? accessibilityState?.checked,
checked: ariaChecked ?? accessibilityState?.checked,
disabled: ariaDisabled ?? accessibilityState?.disabled,
disabled: ariaDisabled ?? accessibilityState?.disabled,
expanded: ariaExpanded ?? accessibilityState?.expanded,
expanded: ariaExpanded ?? accessibilityState?.expanded,
selected: ariaSelected ?? accessibilityState?.selected,
selected: ariaSelected ?? accessibilityState?.selected,
};
};
Copier
Copié
Copier
Copié
const _accessibilityValue = {
const _accessibilityValue = {
max: ariaValueMax ?? accessibilityValue?.max,
max: ariaValueMax ?? accessibilityValue?.max,
min: ariaValueMin ?? accessibilityValue?.min,
min: ariaValueMin ?? accessibilityValue?.min,
now: ariaValueNow ?? accessibilityValue?.now,
now: ariaValueNow ?? accessibilityValue?.now,
text: ariaValueText ?? accessibilityValue?.text,
text: ariaValueText ?? accessibilityValue?.text,
};
};
Copier
Copié
Copier
Copié
// Map role values to AccessibilityRole values
// Map role values to AccessibilityRole values
const roleToAccessibilityRoleMapping = {
const roleToAccessibilityRoleMapping = {
alert: 'alert',
alert: 'alert',
alertdialog: undefined,
alertdialog: undefined,
application: undefined,
application: undefined,
article: undefined,
article: undefined,
banner: undefined,
banner: undefined,
button: 'button',
button: 'button',
cell: undefined,
cell: undefined,
checkbox: 'checkbox',
checkbox: 'checkbox',
columnheader: undefined,
columnheader: undefined,
combobox: 'combobox',
combobox: 'combobox',
complementary: undefined,
complementary: undefined,
contentinfo: undefined,
contentinfo: undefined,
definition: undefined,
definition: undefined,
dialog: undefined,
dialog: undefined,
directory: undefined,
directory: undefined,
document: undefined,
document: undefined,
feed: undefined,
feed: undefined,
figure: undefined,
figure: undefined,
form: undefined,
form: undefined,
grid: 'grid',
grid: 'grid',
group: undefined,
group: undefined,
heading: 'header',
heading: 'header',
img: 'image',
img: 'image',
link: 'link',
link: 'link',
list: 'list',
list: 'list',
listitem: undefined,
listitem: undefined,
log: undefined,
log: undefined,
main: undefined,
main: undefined,
marquee: undefined,
marquee: undefined,
math: undefined,
math: undefined,
menu: 'menu',
menu: 'menu',
menubar: 'menubar',
menubar: 'menubar',
menuitem: 'menuitem',
menuitem: 'menuitem',
meter: undefined,
meter: undefined,
navigation: undefined,
navigation: undefined,
none: 'none',
none: 'none',
note: undefined,
note: undefined,
presentation: 'none',
presentation: 'none',
progressbar: 'progressbar',
progressbar: 'progressbar',
radio: 'radio',
radio: 'radio',
radiogroup: 'radiogroup',
radiogroup: 'radiogroup',
region: undefined,
region: undefined,
row: undefined,
row: undefined,
rowgroup: undefined,
rowgroup: undefined,
rowheader: undefined,
rowheader: undefined,
scrollbar: 'scrollbar',
scrollbar: 'scrollbar',
searchbox: 'search',
searchbox: 'search',
separator: undefined,
separator: undefined,
slider: 'adjustable',
slider: 'adjustable',
spinbutton: 'spinbutton',
spinbutton: 'spinbutton',
status: undefined,
status: undefined,
summary: 'summary',
summary: 'summary',
switch: 'switch',
switch: 'switch',
tab: 'tab',
tab: 'tab',
table: undefined,
table: undefined,
tablist: 'tablist',
tablist: 'tablist',
tabpanel: undefined,
tabpanel: undefined,
term: undefined,
term: undefined,
timer: 'timer',
timer: 'timer',
toolbar: 'toolbar',
toolbar: 'toolbar',
tooltip: undefined,
tooltip: undefined,
tree: undefined,
tree: undefined,
treegrid: undefined,
treegrid: undefined,
treeitem: undefined,
treeitem: undefined,
};
};
Copier
Copié
Copier
Copié
const flattenedStyle = flattenStyle(style);
const flattenedStyle = flattenStyle(style);
const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
Copier
Copié
Copier
Copié
return (
return (
<TextAncestor.Provider value={false}>
<TextAncestor.Provider value={false}>
<ViewNativeComponent
<ViewNativeComponent
{...otherProps}
{...otherProps}
accessibilityLiveRegion={
accessibilityLiveRegion={
ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
}
}
accessibilityLabel={ariaLabel ?? accessibilityLabel}
accessibilityLabel={ariaLabel ?? accessibilityLabel}
focusable={tabIndex !== undefined ? !tabIndex : focusable}
focusable={tabIndex !== undefined ? !tabIndex : focusable}
accessibilityState={_accessibilityState}
accessibilityState={_accessibilityState}
accessibilityRole={
accessibilityRole={
role ? roleToAccessibilityRoleMapping[role] : accessibilityRole
role ? roleToAccessibilityRoleMapping[role] : accessibilityRole
}
}
accessibilityElementsHidden={
accessibilityElementsHidden={
ariaHidden ?? accessibilityElementsHidden
}
ariaHidden ?? accessibilityElementsHidden
}
accessibilityLabelledBy={_accessibilityLabelledBy}
accessibilityLabelledBy={_accessibilityLabelledBy}
accessibilityValue={_accessibilityValue}
accessibilityValue={_accessibilityValue}
importantForAccessibility={
importantForAccessibility={
ariaHidden === true
ariaHidden === true
? 'no-hide-descendants'
? 'no-hide-descendants'
: importantForAccessibility
: importantForAccessibility
}
}
nativeID={id ?? nativeID}
nativeID={id ?? nativeID}
style={style}
style={style}
pointerEvents={newPointerEvents}
pointerEvents={newPointerEvents}
ref={forwardedRef}
ref={forwardedRef}
/>
/>
</TextAncestor.Provider>
</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