mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Drop unused code + minor lint fixes (#44645)
Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/44645 Changelog: [Internal] As per title. Reviewed By: NickGerleman Differential Revision: D57664819 fbshipit-source-id: 2388bd01c00d814a12de7f2e285b78f207e6012c
This commit is contained in:
committed by
Facebook GitHub Bot
parent
b8f3478b37
commit
95de14dc53
@@ -41,7 +41,6 @@ type PathCheckResult = {
|
||||
export function isOnPath(dep: string, description: string): PathCheckResult {
|
||||
const cmd = isWindows ? ['where', [dep]] : ['command', ['-v', dep]];
|
||||
try {
|
||||
const args = isWindows ? ['where', [dep]] : ['command', ['-v', dep]];
|
||||
return {
|
||||
dep,
|
||||
description,
|
||||
|
||||
@@ -9,8 +9,6 @@
|
||||
* @oncall react_native
|
||||
*/
|
||||
|
||||
import type {TargetCapabilityFlags} from '../inspector-proxy/types';
|
||||
|
||||
import {allowSelfSignedCertsInNodeFetch} from './FetchUtils';
|
||||
import {
|
||||
createAndConnectTarget,
|
||||
|
||||
@@ -19,8 +19,6 @@ import {createDeviceMock} from './InspectorDeviceUtils';
|
||||
import {withAbortSignalForEachTest} from './ResourceUtils';
|
||||
import {withServerForEachTest} from './ServerUtils';
|
||||
|
||||
import nullthrows from 'nullthrows';
|
||||
|
||||
// Must be greater than or equal to PAGES_POLLING_INTERVAL in `InspectorProxy.js`.
|
||||
const PAGES_POLLING_DELAY = 1000;
|
||||
|
||||
|
||||
-82
@@ -15,7 +15,6 @@
|
||||
|
||||
const {danger, fail, /*message,*/ warn} = require('danger');
|
||||
const includes = require('lodash.includes');
|
||||
const fetch = require('node-fetch');
|
||||
const {validate: validateChangelog} =
|
||||
require('@rnx-kit/rn-changelog-generator').default;
|
||||
|
||||
@@ -101,84 +100,3 @@ if (isMergeRefStable) {
|
||||
labels: ['Pick Request'],
|
||||
});
|
||||
}
|
||||
|
||||
// Wait for statuses and post a message if there are failures.
|
||||
async function handleStatuses() {
|
||||
const regex = /Test Suites: \d+ failed/;
|
||||
let startChecking = Date.now();
|
||||
let done = false;
|
||||
while (!done) {
|
||||
let now = Date.now();
|
||||
if (now - startChecking > 90 * 60 * 1000) {
|
||||
warn(
|
||||
"One hour and a half have passed and the E2E jobs haven't finished yet.",
|
||||
);
|
||||
done = true;
|
||||
continue;
|
||||
}
|
||||
|
||||
const githubBaseURL = `https://api.github.com/repos/${danger.github.pr.base.repo.owner.login}/${danger.github.pr.base.repo.name}`;
|
||||
const statusesURL = `${githubBaseURL}/commits/${danger.github.pr.head.sha}/statuses?per_page=100`;
|
||||
|
||||
const response = await fetch(statusesURL, {
|
||||
headers: {
|
||||
Accept: 'application/vnd.github+json',
|
||||
'X-GitHub-Api-Version': '2022-11-28',
|
||||
Authorization: `Bearer ${process.env.DANGER_GITHUB_API_TOKEN}`,
|
||||
},
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
const e2e_jobs = data.filter(job => {
|
||||
return (
|
||||
job.context === 'ci/circleci: test_e2e_ios'
|
||||
// test_e2e_android does not currently tun
|
||||
// || job.context === 'ci/circleci: test_e2e_android'
|
||||
);
|
||||
});
|
||||
if (e2e_jobs.length <= 0) {
|
||||
console.log('No e2e jobs found yet, retrying in 5 minutes.');
|
||||
await new Promise(resolve => setTimeout(resolve, 5 * 60 * 1000));
|
||||
continue;
|
||||
}
|
||||
|
||||
const jobFinished = e2e_jobs.every(job => job.state !== 'pending');
|
||||
if (!jobFinished) {
|
||||
console.log("E2E jobs haven't finished yet, retrying in 5 minutes.");
|
||||
await new Promise(resolve => setTimeout(resolve, 5 * 60 * 1000));
|
||||
continue;
|
||||
}
|
||||
|
||||
e2e_jobs.forEach(async job => {
|
||||
const url = job.target_url;
|
||||
const components = url.split('/');
|
||||
const jobId = components[components.length - 1];
|
||||
const jobUrl = `https://circleci.com/api/v2/project/gh/facebook/react-native/${jobId}`;
|
||||
const artifactUrl = `${jobUrl}/artifacts`;
|
||||
const artifactResponse = await fetch(artifactUrl);
|
||||
const artifactData = await artifactResponse.json();
|
||||
const testLogs = artifactData.items.filter(
|
||||
item => item.path === 'tmp/test_log',
|
||||
);
|
||||
if (testLogs.length !== 1) {
|
||||
warn(
|
||||
`Can't find the E2E test log for ${job.context}. <a href=${jobUrl}>Job link</a>`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const logUrl = testLogs[0].url;
|
||||
const logResponseText = await fetch(logUrl);
|
||||
const logText = await logResponseText.text();
|
||||
|
||||
if (regex.test(logText)) {
|
||||
warn(
|
||||
`E2E tests for ${job.context} failed with errors. See the <a href="${logUrl}">logs for details<a/>`,
|
||||
);
|
||||
}
|
||||
});
|
||||
done = true;
|
||||
}
|
||||
}
|
||||
|
||||
// handleStatuses();
|
||||
|
||||
@@ -71,7 +71,7 @@ class ElementProperties extends React.Component<Props> {
|
||||
<View style={styles.col}>
|
||||
<StyleInspector style={style} />
|
||||
</View>
|
||||
{<BoxInspector style={style} frame={this.props.frame} />}
|
||||
<BoxInspector style={style} frame={this.props.frame} />
|
||||
</View>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
|
||||
@@ -232,7 +232,7 @@ class Interceptor {
|
||||
const event: LoadingFinishedEvent = {
|
||||
requestId: String(id),
|
||||
timestamp: JSInspector.getTimestamp(),
|
||||
encodedDataLength: encodedDataLength,
|
||||
encodedDataLength,
|
||||
};
|
||||
this._agent.sendEvent('loadingFinished', event);
|
||||
}
|
||||
|
||||
@@ -36,7 +36,7 @@ const HeaderIOS = ({
|
||||
<View
|
||||
style={[styles.header, {backgroundColor: theme.SystemBackgroundColor}]}>
|
||||
<View style={styles.headerCenter}>
|
||||
<Text style={{...styles.title, ...{color: theme.LabelColor}}}>
|
||||
<Text style={{...styles.title, color: theme.LabelColor}}>
|
||||
{title}
|
||||
</Text>
|
||||
{documentationURL && (
|
||||
|
||||
@@ -20,13 +20,6 @@ const RNTesterPage = require('../../components/RNTesterPage');
|
||||
const React = require('react');
|
||||
const {PanResponder, StyleSheet, View} = require('react-native');
|
||||
|
||||
type CircleStyles = {
|
||||
backgroundColor?: string,
|
||||
left?: number,
|
||||
top?: number,
|
||||
...
|
||||
};
|
||||
|
||||
const CIRCLE_SIZE = 80;
|
||||
|
||||
type Props = $ReadOnly<{||}>;
|
||||
@@ -39,7 +32,6 @@ type State = {|
|
||||
class PanResponderExample extends React.Component<Props, State> {
|
||||
_previousLeft: number = 20;
|
||||
_previousTop: number = 84;
|
||||
_circleStyles: {|style: CircleStyles|} = {style: {}};
|
||||
circle: ?React.ElementRef<typeof View> = null;
|
||||
|
||||
state: State = {
|
||||
@@ -147,7 +139,7 @@ exports.description =
|
||||
exports.examples = [
|
||||
{
|
||||
title: 'Basic gesture handling',
|
||||
render: function (): React.Element<typeof PanResponderExample> {
|
||||
render(): React.Element<typeof PanResponderExample> {
|
||||
return <PanResponderExample />;
|
||||
},
|
||||
},
|
||||
|
||||
@@ -265,7 +265,7 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
title: '<ScrollView> (horizontal = true)\n',
|
||||
description:
|
||||
"You can display <ScrollView>'s child components horizontally rather than vertically",
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<View>
|
||||
<HorizontalScrollView direction="ltr" />
|
||||
@@ -278,7 +278,7 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
title: '<ScrollView> (horizontal = true) in RTL\n',
|
||||
description:
|
||||
"You can display <ScrollView>'s child components horizontally rather than vertically",
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<View>
|
||||
<HorizontalScrollView direction="rtl" />
|
||||
@@ -289,14 +289,14 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
{
|
||||
title: '<ScrollView> enable & disable\n',
|
||||
description: 'ScrollView scrolling behaviour can be disabled and enabled',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <EnableDisableList />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '<ScrollView> Content\n',
|
||||
description: 'Adjust properties of content inside ScrollView.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <ContentExample />;
|
||||
},
|
||||
},
|
||||
@@ -304,7 +304,7 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
title: '<ScrollView> Deceleration Rate\n',
|
||||
description:
|
||||
'Determines how quickly the scroll view decelerates after the user lifts their finger.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <DecelerationRateExample />;
|
||||
},
|
||||
},
|
||||
@@ -312,7 +312,7 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
title: '<ScrollView> Enable & Disable Scrolling Behavior\n',
|
||||
description:
|
||||
'DirectionalLockEnabled (iOS), disableIntervalMomentum, disableScrollViewPanResponder can be enabled or disabled.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <DisableEnable />;
|
||||
},
|
||||
},
|
||||
@@ -321,7 +321,7 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
title: '<ScrollView> Invert Sticky Headers\n',
|
||||
description:
|
||||
'If sticky headers should stick at the bottom instead of the top of the ScrollView. This is usually used with inverted ScrollViews.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <InvertStickyHeaders />;
|
||||
},
|
||||
},
|
||||
@@ -330,7 +330,7 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
title: '<ScrollView> Multiple Sticky Headers\n',
|
||||
description:
|
||||
'Scroll down to see 3 sticky headers stick when they get to the top.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <MultipleStickyHeaders />;
|
||||
},
|
||||
},
|
||||
@@ -339,7 +339,7 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
title: '<ScrollView> Pressable Sticky Header\n',
|
||||
description:
|
||||
'Press the blue box to toggle it between blue and yellow. The box should remain Pressable after scrolling.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<View style={{height: 400}}>
|
||||
<ScrollViewPressableStickyHeaderExample />
|
||||
@@ -352,7 +352,7 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
title: '<ScrollView> Keyboard Options\n',
|
||||
description:
|
||||
'Toggle the keyboard using the search bar and determine keyboard behavior in response to drag and tap.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <KeyboardExample />;
|
||||
},
|
||||
},
|
||||
@@ -360,7 +360,7 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
title: '<ScrollView> OnContentSizeChange\n',
|
||||
description:
|
||||
'The text below will change when scrollable content view of the ScrollView changes.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <OnContentSizeChange />;
|
||||
},
|
||||
},
|
||||
@@ -368,7 +368,7 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
title: '<ScrollView> OnMomentumScroll\n',
|
||||
description:
|
||||
'An alert will be called when the momentum scroll starts or ends.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <OnMomentumScroll />;
|
||||
},
|
||||
},
|
||||
@@ -376,14 +376,14 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
title: '<ScrollView> OnScroll Options\n',
|
||||
description:
|
||||
'Change the behavior of onScroll using these options: onScrollBeginDrag, onScrollEndDrag, onScrollToTop (iOS), and overScrollMode (Android).',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <OnScrollOptions />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '<ScrollView> RefreshControl\n',
|
||||
description: 'Pull down to see RefreshControl indicator.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <RefreshControlExample />;
|
||||
},
|
||||
},
|
||||
@@ -391,28 +391,28 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
title: '<ScrollView> Remove Clipped Subviews\n',
|
||||
description:
|
||||
'When true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <RemoveClippedSubviews />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '<ScrollView> Scroll Indicator\n',
|
||||
description: 'Adjust properties of the scroll indicator.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <ScrollIndicatorExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '<ScrollView> SnapTo Options\n',
|
||||
description: 'Adjust properties of snapping to the scroll view.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <SnapToOptions />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '<ScrollView> (contentOffset = {x: 100, y: 0})\n',
|
||||
description: 'Initial contentOffset can be set on ScrollView.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <ContentOffsetList />;
|
||||
},
|
||||
},
|
||||
@@ -421,7 +421,7 @@ const examples: Array<RNTesterModuleExample> = [
|
||||
description:
|
||||
'The `maintainVisibleContentPosition` prop allows insertions to either end of the content ' +
|
||||
'without causing the visible content to jump. Re-ordering is not supported.',
|
||||
render: function () {
|
||||
render() {
|
||||
return <AppendingList />;
|
||||
},
|
||||
},
|
||||
@@ -432,14 +432,14 @@ if (Platform.OS === 'ios') {
|
||||
title: '<ScrollView> (centerContent = true)\n',
|
||||
description:
|
||||
'ScrollView puts its content in the center if the content is smaller than scroll view',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <CenterContentList />;
|
||||
},
|
||||
});
|
||||
examples.push({
|
||||
title: '<ScrollView> Always Bounces\n',
|
||||
description: 'Always bounce vertically or horizontally.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<>
|
||||
<Text style={styles.text}>Vertical</Text>
|
||||
@@ -453,28 +453,28 @@ if (Platform.OS === 'ios') {
|
||||
examples.push({
|
||||
title: '<ScrollView> Bounces & Bounces Zoom\n',
|
||||
description: 'There are different options for bouncing behavior.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <BouncesExample />;
|
||||
},
|
||||
});
|
||||
examples.push({
|
||||
title: '<ScrollView> Indicator Style\n',
|
||||
description: 'There are different options for indicator style colors.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <IndicatorStyle />;
|
||||
},
|
||||
});
|
||||
examples.push({
|
||||
title: '<ScrollView> Maximum & Minimum Zoom Scale\n',
|
||||
description: 'Set the maximum and minimum allowed zoom scale.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <MaxMinZoomScale />;
|
||||
},
|
||||
});
|
||||
examples.push({
|
||||
title: '<ScrollView> Maximum & Minimum Zoom Scale\n',
|
||||
description: 'Set the maximum and minimum allowed zoom scale.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <MaxMinZoomScale />;
|
||||
},
|
||||
});
|
||||
@@ -482,7 +482,7 @@ if (Platform.OS === 'ios') {
|
||||
title: '<ScrollView> ScrollTo Options\n',
|
||||
description:
|
||||
'Toggle scrollToOverflowEnabled and scrollsToTop. When scrollToOverflowEnabled is true, the scroll view can be programmatically scrolled beyond its content size. When scrollsToTop is true, the scroll view scrolls to top when the status bar is tapped.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <ScrollToOptions />;
|
||||
},
|
||||
});
|
||||
@@ -490,14 +490,14 @@ if (Platform.OS === 'ios') {
|
||||
examples.push({
|
||||
title: '<ScrollView> EndFillColor & FadingEdgeLength\n',
|
||||
description: 'Toggle to set endFillColor and fadingEdgeLength.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <EndFillColorFadingEdgeLen />;
|
||||
},
|
||||
});
|
||||
examples.push({
|
||||
title: '<ScrollView> persistentScrollBar\n',
|
||||
description: 'Toggle to set persistentScrollbar option.',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <AndroidScrollBarOptions />;
|
||||
},
|
||||
});
|
||||
@@ -968,7 +968,7 @@ const InvertStickyHeaders = () => {
|
||||
invertStickyHeaders={invertStickyHeaders}
|
||||
nestedScrollEnabled
|
||||
testID="scroll_sticky_header">
|
||||
{<Text>STICKY HEADER</Text>}
|
||||
<Text>STICKY HEADER</Text>
|
||||
{ITEMS.map(createItemRow)}
|
||||
</ScrollView>
|
||||
<View>
|
||||
@@ -1009,11 +1009,11 @@ const MultipleStickyHeaders = () => {
|
||||
stickyHeaderIndices={[0, 13, 26]}
|
||||
nestedScrollEnabled
|
||||
testID="scroll_multiple_sticky_headers">
|
||||
{<Item msg={'Sticky Header 1'} style={stickyHeaderStyle} />}
|
||||
<Item msg={'Sticky Header 1'} style={stickyHeaderStyle} />
|
||||
{ITEMS.map(createItemRow)}
|
||||
{<Item msg={'Sticky Header 2'} style={stickyHeaderStyle} />}
|
||||
<Item msg={'Sticky Header 2'} style={stickyHeaderStyle} />
|
||||
{ITEMS.map(createItemRow)}
|
||||
{<Item msg={'Sticky Header 3'} style={stickyHeaderStyle} />}
|
||||
<Item msg={'Sticky Header 3'} style={stickyHeaderStyle} />
|
||||
{ITEMS.map(createItemRow)}
|
||||
</ScrollView>
|
||||
<View>
|
||||
@@ -1290,7 +1290,7 @@ class Item extends React.PureComponent<{|
|
||||
}
|
||||
}
|
||||
|
||||
let ITEMS = [...Array(12)].map((_, i) => `Item ${i}`);
|
||||
const ITEMS = [...Array(12)].map((_, i) => `Item ${i}`);
|
||||
|
||||
const createItemRow = (msg: string, index: number) => (
|
||||
<Item key={index} msg={msg} />
|
||||
|
||||
@@ -16,8 +16,6 @@ import TextLegend from '../../components/TextLegend';
|
||||
import TextAdjustsDynamicLayoutExample from './TextAdjustsDynamicLayoutExample';
|
||||
import TextInlineViewsExample from './TextInlineViewsExample';
|
||||
|
||||
const RNTesterBlock = require('../../components/RNTesterBlock');
|
||||
const RNTesterPage = require('../../components/RNTesterPage');
|
||||
const TextInlineView = require('../../components/TextInlineView');
|
||||
const React = require('react');
|
||||
const {LayoutAnimation, StyleSheet, Text, View} = require('react-native');
|
||||
@@ -968,21 +966,21 @@ const examples = [
|
||||
{
|
||||
title: 'Dynamic Font Size Adjustment',
|
||||
name: 'ajustingFontSize',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <AdjustingFontSize />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Font Size Adjustment with Dynamic Layout',
|
||||
name: 'textAdjustsDynamicLayout',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <TextAdjustsDynamicLayoutExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Wrap',
|
||||
name: 'wrap',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<Text style={styles.wrappedText}>
|
||||
The text should wrap if it goes on multiple lines. See, this is going
|
||||
@@ -994,14 +992,14 @@ const examples = [
|
||||
{
|
||||
title: 'Hyphenation',
|
||||
name: 'hyphenation',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <HyphenationExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Padding',
|
||||
name: 'padding',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<Text style={{padding: 10}}>
|
||||
This text is indented by 10px padding on all sides.
|
||||
@@ -1012,35 +1010,35 @@ const examples = [
|
||||
{
|
||||
title: 'Text metrics legend',
|
||||
name: 'textMetricLegend',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <TextLegend />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Font Family',
|
||||
name: 'fontFamily',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <FontFamilyExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Android Material Design Fonts',
|
||||
name: 'androidMaterialDesignFonts',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <AndroidMaterialDesignFonts />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Custom Fonts',
|
||||
name: 'customFonts',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <CustomFontsExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Font Size',
|
||||
name: 'fontSize',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<>
|
||||
<Text style={{fontSize: 23}}>Size 23</Text>
|
||||
@@ -1052,7 +1050,7 @@ const examples = [
|
||||
{
|
||||
title: 'Color',
|
||||
name: 'color',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<>
|
||||
<Text style={{color: 'red'}}>Red color</Text>
|
||||
@@ -1064,14 +1062,14 @@ const examples = [
|
||||
{
|
||||
title: 'Font Weight',
|
||||
name: 'fontWeight',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <FontWeightExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Font Style',
|
||||
name: 'fontStyle',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<>
|
||||
<Text style={{fontStyle: 'italic'}}>Move fast and be italic</Text>
|
||||
@@ -1083,7 +1081,7 @@ const examples = [
|
||||
{
|
||||
title: 'Font Style and Weight',
|
||||
name: 'fontStyleAndWeight',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<Text style={{fontStyle: 'italic', fontWeight: 'bold'}}>
|
||||
Move fast and be both bold and italic
|
||||
@@ -1094,35 +1092,35 @@ const examples = [
|
||||
{
|
||||
title: 'Text Decoration',
|
||||
name: 'textDecoration',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <TextDecorationExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Nested',
|
||||
name: 'nested',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <NestedExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Text Align',
|
||||
name: 'textAlign',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <TextAlignExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Unicode',
|
||||
name: 'unicode',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <UnicodeExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Spaces',
|
||||
name: 'spaces',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<Text>
|
||||
A {'generated'} {'string'} and some spaces
|
||||
@@ -1133,63 +1131,63 @@ const examples = [
|
||||
{
|
||||
title: 'Line Height',
|
||||
name: 'lineHeight',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <LineHeightExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Letter Spacing',
|
||||
name: 'letterSpacing',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <LetterSpacingExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Empty Text',
|
||||
name: 'emptyText',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <Text />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Toggling Attributes',
|
||||
name: 'togglingAttributes',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <AttributeToggler />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'backgroundColor attribute',
|
||||
name: 'backgroundColorAttribute',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <BackgroundColorExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'containerBackgroundColor attribute',
|
||||
name: 'containerBackgroundColorAttribute',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <ContainerBackgroundColorExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'numberOfLines attribute',
|
||||
name: 'numberOfLines',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <NumberOfLinesExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'allowFontScaling attribute',
|
||||
name: 'allowFontScaling',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <AllowFontScalingExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'selectable attribute',
|
||||
name: 'selectable',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<Text selectable>
|
||||
This text is selectable if you click-and-hold, and will offer the
|
||||
@@ -1201,7 +1199,7 @@ const examples = [
|
||||
{
|
||||
title: 'selectionColor attribute',
|
||||
name: 'selectionColor',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<Text selectable selectionColor="orange">
|
||||
This text will have a orange highlight on selection.
|
||||
@@ -1212,84 +1210,84 @@ const examples = [
|
||||
{
|
||||
title: 'Inline views',
|
||||
name: 'inlineViewsBasic',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <TextInlineView.Basic />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Inline views with multiple nested texts',
|
||||
name: 'inlineViewsMultiple',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <TextInlineView.NestedTexts />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Inline image/view clipped by <Text>',
|
||||
name: 'inlineViewsClipped',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <TextInlineView.ClippedByText />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Relayout inline image',
|
||||
name: 'relayoutInlineImage',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <TextInlineView.ChangeImageSize />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Relayout inline view',
|
||||
name: 'relayoutInlineView',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <TextInlineView.ChangeViewSize />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Relayout nested inline view',
|
||||
name: 'relayoutNestedInlineView',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <TextInlineView.ChangeInnerViewSize />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Text shadow',
|
||||
name: 'textShadow',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <TextShadowExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Ellipsize mode',
|
||||
name: 'ellipsizeMode',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <EllipsizeModeExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Font variants',
|
||||
name: 'fontVariants',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <FontVariantsExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Include Font Padding',
|
||||
name: 'includeFontPadding',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <IncludeFontPaddingExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Text Transform',
|
||||
name: 'textTransform',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <TextTransformExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Substring Emoji (should only see "test")',
|
||||
name: 'substringEmoji',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <Text>{'test🙃'.substring(0, 5)}</Text>;
|
||||
},
|
||||
},
|
||||
@@ -1297,21 +1295,21 @@ const examples = [
|
||||
{
|
||||
title: 'Text linkify',
|
||||
name: 'textLinkify',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <TextLinkifyExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Text `alignItems: 'baseline'` style",
|
||||
name: 'alignItemsBaseline',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return <TextBaseLineLayoutExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Selectable Text',
|
||||
name: 'selectableText',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<View>
|
||||
<Text style={{userSelect: 'auto'}}>Text element is selectable</Text>
|
||||
@@ -1322,7 +1320,7 @@ const examples = [
|
||||
{
|
||||
title: 'Text alignment',
|
||||
name: 'textAlignment',
|
||||
render: function (): React.Node {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<View>
|
||||
<Text style={{textAlignVertical: 'top', borderWidth: 1, height: 75}}>
|
||||
|
||||
@@ -14,8 +14,6 @@ import VirtualizedList from './VirtualizedList';
|
||||
import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
|
||||
import invariant from 'invariant';
|
||||
import * as React from 'react';
|
||||
import {View} from 'react-native';
|
||||
|
||||
type Item = any;
|
||||
|
||||
export type SectionBase<SectionItemT> = {
|
||||
|
||||
Reference in New Issue
Block a user