Diff
checker
Text
Text
Bilder
Dokumente
Excel
Ordner
Legal
Enterprise
Desktop-App
Preise
Einloggen
Diffchecker Desktop herunterladen
Texte vergleichen
Finde den Unterschied zwischen zwei Textdateien
Werkzeuge
Verlauf
Anzeige
Ansicht
Zweispaltig
Einspaltig
Live-Editor
Leerzeichen ausblenden
Gleiches ausblenden
Zeilenumbruch aus
Vergleichsgenauigkeit
Intelligent
Syntax
Keine
Darstellung ändern
Verarbeitung
Ignorieren
Text umwandeln
Zur ersten Änderung
Eingabe bearbeiten
Diffchecker Desktop
Der sicherste Weg, Diffchecker zu nutzen. Hol dir die Desktop-App: Deine Diffs verlassen nie deinen Computer!
Desktop holen
View.js
Erstellt
vor 4 Jahren
Diff läuft nie ab
Löschen
Exportieren
Teilen
Erklären
154 Entfernungen
Zeilen
Gesamt
Entfernt
Zeichen
Gesamt
Entfernt
Um diese Funktion weiterhin zu nutzen, aktualisiere auf
Diff
checker
Pro
Preise anzeigen
189 Zeilen
Kopieren
24 Hinzufügungen
Zeilen
Gesamt
Hinzugefügt
Zeichen
Gesamt
Hinzugefügt
Um diese Funktion weiterhin zu nutzen, aktualisiere auf
Diff
checker
Pro
Preise anzeigen
203 Zeilen
Kopieren
/**
/**
* 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;
Kopieren
Kopiert
Kopieren
Kopiert
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,
Kopieren
Kopiert
Kopieren
Kopiert
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,
Kopieren
Kopiert
Kopieren
Kopiert
gap,
rowGap,
columnGap,
Kopieren
Kopiert
Kopieren
Kopiert
...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;
Kopieren
Kopiert
Kopieren
Kopiert
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,
};
};
Kopieren
Kopiert
Kopieren
Kopiert
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,
};
};
Kopieren
Kopiert
Kopieren
Kopiert
// 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,
};
};
Kopieren
Kopiert
Kopieren
Kopiert
const flattenedStyle = flattenStyle(style);
const flattenedStyle = flattenStyle(style);
const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
Kopieren
Kopiert
Kopieren
Kopiert
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;
Gespeicherte Diffs
Originaltext
Datei öffnen
/** * 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;
Bearbeitung
Datei öffnen
/** * 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;
Unterschied finden