@office-iss/react-native-win32 0.0.0-canary.28 → 0.0.0-canary.281

package/RNTester/js/examples/Layout/LayoutExample.js

@@ -1,206 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its 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
- */
-
-'use strict';
-
-const RNTesterBlock = require('../../components/RNTesterBlock');
-const RNTesterPage = require('../../components/RNTesterPage');
-const React = require('react');
-
-const {StyleSheet, Text, View} = require('react-native');
-
-class Circle extends React.Component<$FlowFixMeProps> {
-  render() {
-    const size = this.props.size || 20;
-    const backgroundColor = this.props.bgColor || '#527fe4';
-    return (
-      <View
-        style={{
-          borderRadius: size / 2,
-          backgroundColor: backgroundColor,
-          width: size,
-          height: size,
-          margin: 1,
-        }}
-      />
-    );
-  }
-}
-
-class CircleBlock extends React.Component<$FlowFixMeProps> {
-  render() {
-    const circleStyle = {
-      flexDirection: 'row',
-      backgroundColor: '#f6f7f8',
-      borderWidth: 0.5,
-      borderColor: '#d6d7da',
-      marginBottom: 2,
-    };
-    return (
-      <View style={[circleStyle, this.props.style]}>{this.props.children}</View>
-    );
-  }
-}
-
-class LayoutExample extends React.Component<$FlowFixMeProps> {
-  render(): React.Node {
-    const fiveColoredCircles = [
-      <Circle bgColor="#527fe4" key="blue" />,
-      <Circle bgColor="#D443E3" key="violet" />,
-      <Circle bgColor="#FF9049" key="orange" />,
-      <Circle bgColor="#FFE649" key="yellow" />,
-      <Circle bgColor="#7FE040" key="green" />,
-    ];
-
-    return (
-      <RNTesterPage title={this.props.navigator ? null : 'Layout'}>
-        <RNTesterBlock title="Flex Direction">
-          <Text>row</Text>
-          <CircleBlock style={{flexDirection: 'row'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <Text>row-reverse</Text>
-          <CircleBlock style={{flexDirection: 'row-reverse'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <Text>column</Text>
-          <CircleBlock style={{flexDirection: 'column'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <Text>column-reverse</Text>
-          <CircleBlock style={{flexDirection: 'column-reverse'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <View
-            style={[
-              styles.overlay,
-              {position: 'absolute', top: 15, left: 160},
-            ]}>
-            <Text>{'top: 15, left: 160'}</Text>
-          </View>
-        </RNTesterBlock>
-
-        <RNTesterBlock title="Justify Content - Main Direction">
-          <Text>flex-start</Text>
-          <CircleBlock style={{justifyContent: 'flex-start'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <Text>center</Text>
-          <CircleBlock style={{justifyContent: 'center'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <Text>flex-end</Text>
-          <CircleBlock style={{justifyContent: 'flex-end'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <Text>space-between</Text>
-          <CircleBlock style={{justifyContent: 'space-between'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-          <Text>space-around</Text>
-          <CircleBlock style={{justifyContent: 'space-around'}}>
-            {fiveColoredCircles}
-          </CircleBlock>
-        </RNTesterBlock>
-        <RNTesterBlock title="Align Items - Other Direction">
-          <Text>flex-start</Text>
-          <CircleBlock style={{alignItems: 'flex-start', height: 30}}>
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={8} />
-          </CircleBlock>
-          <Text>center</Text>
-          <CircleBlock style={{alignItems: 'center', height: 30}}>
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={8} />
-          </CircleBlock>
-          <Text>flex-end</Text>
-          <CircleBlock style={{alignItems: 'flex-end', height: 30}}>
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={10} />
-            <Circle size={20} />
-            <Circle size={17} />
-            <Circle size={12} />
-            <Circle size={15} />
-            <Circle size={8} />
-          </CircleBlock>
-        </RNTesterBlock>
-        <RNTesterBlock title="Flex Wrap">
-          <CircleBlock style={{flexWrap: 'wrap'}}>
-            {'oooooooooooooooo'.split('').map((char, i) => (
-              <Circle key={i} />
-            ))}
-          </CircleBlock>
-        </RNTesterBlock>
-      </RNTesterPage>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  overlay: {
-    backgroundColor: '#aaccff',
-    borderRadius: 10,
-    borderWidth: 0.5,
-    opacity: 0.5,
-    padding: 5,
-  },
-});
-
-exports.title = 'Layout - Flexbox';
-exports.description = 'Examples of using the flexbox API to layout views.';
-exports.displayName = 'LayoutExample';
-exports.examples = [
-  {
-    title: 'Simple layout using flexbox',
-    render: function(): React.Element<typeof LayoutExample> {
-      return <LayoutExample />;
-    },
-  },
-];

package/RNTester/js/examples/Linking/LinkingExample.js

@@ -1,128 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
-'use strict';
-
-const React = require('react');
-const {
-  Linking,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  ToastAndroid,
-  View,
-} = require('react-native');
-
-const RNTesterBlock = require('../../components/RNTesterBlock');
-
-type Props = $ReadOnly<{|
-  url?: ?string,
-|}>;
-
-class OpenURLButton extends React.Component<Props> {
-  handleClick = () => {
-    Linking.canOpenURL(this.props.url).then(supported => {
-      if (supported) {
-        Linking.openURL(this.props.url);
-      } else {
-        console.log("Don't know how to open URI: " + this.props.url);
-      }
-    });
-  };
-
-  render() {
-    return (
-      <TouchableOpacity onPress={this.handleClick}>
-        <View style={styles.button}>
-          <Text style={styles.text}>Open {this.props.url}</Text>
-        </View>
-      </TouchableOpacity>
-    );
-  }
-}
-
-class SendIntentButton extends React.Component<Props> {
-  handleIntent = async () => {
-    try {
-      await Linking.sendIntent(this.props.action, this.props.extras);
-    } catch (e) {
-      ToastAndroid.show(e.message, ToastAndroid.LONG);
-    }
-  };
-
-  render() {
-    return (
-      <TouchableOpacity onPress={this.handleIntent}>
-        <View style={[styles.button, styles.buttonIntent]}>
-          <Text style={styles.text}>{this.props.action}</Text>
-        </View>
-      </TouchableOpacity>
-    );
-  }
-}
-
-class IntentAndroidExample extends React.Component {
-  render() {
-    return (
-      <View>
-        <RNTesterBlock title="Open external URLs">
-          <OpenURLButton url={'https://www.facebook.com'} />
-          <OpenURLButton url={'http://www.facebook.com'} />
-          <OpenURLButton url={'http://facebook.com'} />
-          <OpenURLButton url={'fb://notifications'} />
-          <OpenURLButton url={'geo:37.484847,-122.148386'} />
-          <OpenURLButton url={'tel:9876543210'} />
-        </RNTesterBlock>
-        {Platform.OS === 'android' && (
-          <RNTesterBlock title="Send intents">
-            <SendIntentButton action="android.intent.action.POWER_USAGE_SUMMARY" />
-            <Text style={styles.textSeparator}>
-              Next one will crash if Facebook app is not installed.
-            </Text>
-            <SendIntentButton
-              action="android.settings.APP_NOTIFICATION_SETTINGS"
-              extras={[
-                {'android.provider.extra.APP_PACKAGE': 'com.facebook.katana'},
-              ]}
-            />
-          </RNTesterBlock>
-        )}
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  button: {
-    padding: 10,
-    backgroundColor: '#3B5998',
-    marginBottom: 10,
-  },
-  buttonIntent: {
-    backgroundColor: '#009688',
-  },
-  text: {
-    color: 'white',
-  },
-  textSeparator: {
-    paddingBottom: 8,
-  },
-});
-
-exports.title = 'Linking';
-exports.description = 'Shows how to use Linking to open URLs.';
-exports.examples = [
-  {
-    title: 'Simple list of items',
-    render: function(): React.Element<typeof IntentAndroidExample> {
-      return <IntentAndroidExample />;
-    },
-  },
-];

package/RNTester/js/examples/MaskedView/MaskedViewExample.js

@@ -1,236 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its 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
- */
-
-'use strict';
-
-const React = require('react');
-
-const {
-  Animated,
-  Image,
-  MaskedViewIOS,
-  StyleSheet,
-  Text,
-  View,
-} = require('react-native');
-
-type Props = $ReadOnly<{||}>;
-type ChangingChildrenState = {|
-  alternateChildren: boolean,
-|};
-
-class AnimatedMaskExample extends React.Component<Props> {
-  _maskRotateAnimatedValue = new Animated.Value(0);
-  _maskScaleAnimatedValue = new Animated.Value(1);
-
-  componentDidMount() {
-    Animated.loop(
-      Animated.sequence([
-        Animated.timing(this._maskScaleAnimatedValue, {
-          toValue: 1.3,
-          duration: 750,
-          useNativeDriver: true,
-        }),
-        Animated.timing(this._maskScaleAnimatedValue, {
-          toValue: 1,
-          duration: 750,
-          useNativeDriver: true,
-        }),
-      ]),
-    ).start();
-
-    Animated.loop(
-      Animated.timing(this._maskRotateAnimatedValue, {
-        toValue: 360,
-        duration: 2000,
-        useNativeDriver: true,
-      }),
-    ).start();
-  }
-
-  render(): React.Node {
-    return (
-      <View style={styles.exampleWrapperStyle}>
-        <MaskedViewIOS
-          style={styles.flexStyle}
-          maskElement={
-            <Animated.View
-              style={[
-                styles.maskContainerStyle,
-                {transform: [{scale: this._maskScaleAnimatedValue}]},
-              ]}>
-              <Text style={styles.maskTextStyle}>Basic Mask</Text>
-            </Animated.View>
-          }>
-          <Animated.View
-            style={{
-              flex: 1,
-              transform: [
-                {
-                  rotate: this._maskRotateAnimatedValue.interpolate({
-                    inputRange: [0, 360],
-                    /* $FlowFixMe(>=0.38.0) - Flow error detected during the
-                     * deployment of v0.38.0. To see the error, remove this
-                     * comment and run flow */
-                    outputRange: ['0deg', '360deg'],
-                  }),
-                },
-              ],
-            }}>
-            <View style={styles.blueStyle} />
-            <View style={styles.redStyle} />
-          </Animated.View>
-        </MaskedViewIOS>
-      </View>
-    );
-  }
-}
-
-class ChangingChildrenMaskExample extends React.Component<
-  Props,
-  ChangingChildrenState,
-> {
-  state: ChangingChildrenState = {
-    alternateChildren: true,
-  };
-
-  componentDidMount() {
-    setInterval(() => {
-      this.setState(state => ({
-        alternateChildren: !state.alternateChildren,
-      }));
-    }, 1000);
-  }
-
-  render(): React.Node {
-    return (
-      <View style={styles.exampleWrapperStyle}>
-        <MaskedViewIOS
-          style={styles.flexStyle}
-          maskElement={
-            <View style={styles.maskContainerStyle}>
-              <Text style={styles.maskTextStyle}>Basic Mask</Text>
-            </View>
-          }>
-          {this.state.alternateChildren
-            ? [
-                <View key={1} style={styles.blueStyle} />,
-                <View key={2} style={styles.redStyle} />,
-              ]
-            : null}
-        </MaskedViewIOS>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  exampleWrapperStyle: {
-    width: 340,
-    height: 300,
-    alignSelf: 'center',
-  },
-  imageStyle: {
-    height: 200,
-    width: 200,
-  },
-  maskContainerStyle: {
-    flex: 1,
-    backgroundColor: 'transparent',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  maskTextStyle: {
-    backgroundColor: 'transparent',
-    fontSize: 40,
-    fontWeight: 'bold',
-  },
-  blueStyle: {
-    flex: 1,
-    backgroundColor: 'blue',
-  },
-  redStyle: {
-    flex: 1,
-    backgroundColor: 'red',
-  },
-  grayStyle: {
-    backgroundColor: '#eeeeee',
-  },
-  flexStyle: {
-    flex: 1,
-  },
-});
-
-exports.title = '<MaskedViewIOS>';
-exports.description =
-  'Renders the child view with a mask specified in the `renderMask` prop.';
-exports.examples = [
-  {
-    title: 'Basic Mask',
-    render: function(): React.Element<typeof View> {
-      return (
-        <View style={styles.exampleWrapperStyle}>
-          <MaskedViewIOS
-            style={styles.flexStyle}
-            maskElement={
-              <View style={styles.maskContainerStyle}>
-                <Text style={styles.maskTextStyle}>Basic Mask</Text>
-              </View>
-            }>
-            <View style={styles.blueStyle} />
-            <View style={styles.redStyle} />
-          </MaskedViewIOS>
-        </View>
-      );
-    },
-  },
-  {
-    title: 'Image Mask',
-    render: function(): React.Element<typeof View> {
-      return (
-        <View style={[styles.exampleWrapperStyle, styles.grayStyle]}>
-          <MaskedViewIOS
-            style={styles.flexStyle}
-            maskElement={
-              <View style={styles.maskContainerStyle}>
-                <Image
-                  style={styles.imageStyle}
-                  source={require('../../assets/imageMask.png')}
-                />
-              </View>
-            }>
-            <View style={styles.maskContainerStyle}>
-              <Image
-                resizeMode="cover"
-                style={styles.imageStyle}
-                source={{
-                  uri:
-                    'https://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif',
-                }}
-              />
-            </View>
-          </MaskedViewIOS>
-        </View>
-      );
-    },
-  },
-  {
-    title: 'Animated Mask',
-    render: function(): React.Element<typeof AnimatedMaskExample> {
-      return <AnimatedMaskExample />;
-    },
-  },
-  {
-    title: 'Mask w/ Changing Children',
-    render: function(): React.Element<typeof ChangingChildrenMaskExample> {
-      return <ChangingChildrenMaskExample />;
-    },
-  },
-];