@office-iss/react-native-win32 0.0.0-canary.27 → 0.0.0-canary.271

package/src-win/Libraries/Components/TextInput/Tests/TextInputTest.tsx

@@ -0,0 +1,185 @@
+'use strict';
+import React from 'react'
+import { StyleSheet, Text, TextInput, View } from 'react-native';
+
+// Disabling no-jsx-lambda so functional components are more convenient to use
+
+const AutoFocusingTextInputTest: React.FC<{}> = () => {
+  return (
+    <View>
+      <Text>This TextInput auto focuses</Text>
+      <TextInput
+        autoFocus
+        maxLength={140}
+        multiline
+        style={styles.input}
+      />
+    </View>
+  );
+};
+
+const PlaceholderTextInputTest: React.FC<{}> = () => {
+  return (
+    <View>
+      <Text>This TextInput demonstrates placeholders</Text>
+      <TextInput
+        maxLength={140}
+        multiline
+        placeholder="I am a blue placeholder, type in me for something magical"
+        placeholderTextColor="blue"
+        style={styles.green}
+      />
+    </View>
+  );
+};
+
+const ControllingTextInputTest: React.FC<{}> = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <View>
+      <Text>This TextInput inserts spaces between characters</Text>
+      <TextInput
+        multiline
+        onChangeText={(text) => setValue(text.endsWith(' ') ? value : (text + ' '))}
+        style={styles.blue}
+        value={value}
+      />
+    </View>
+  );
+};
+
+const BlurringAndFocusingTextInputTest: React.FC<{}> = () => {
+  const [isFocused, setIsFocused] = React.useState(false);
+  return (
+    <View>
+      <Text>This TextInput is currently focused: + {isFocused ? 'true' : 'false'}</Text>
+      <TextInput
+        multiline
+        onBlur={() => setIsFocused(false)}
+        onFocus={() => setIsFocused(true)}
+        style={styles.input}
+      />
+    </View>
+  );
+};
+
+const LayoutListeningTextInputTest: React.FC<{}> = () => {
+  const [eventCounter, setEventCounter] = React.useState(0);
+
+  return (
+    <View>
+      <Text>The number of onContentSizeChanges is listed here + {eventCounter}</Text>
+      <TextInput
+        multiline
+        onContentSizeChange={() => setEventCounter(eventCounter + 1)}
+        style={styles.input}
+      />
+    </View>
+  );
+};
+
+const KeyPressListeningTextInputTest: React.FC<{}> = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <View>
+      <Text>This TextInput uses onKeyPress to maintain state: it is slow</Text>
+      <TextInput
+        multiline
+        onKeyPress={(e) => setValue(value + e.nativeEvent.key)}
+        style={styles.input}
+        value={value}
+      />
+    </View>
+  );
+};
+
+const StyleTextInputTest: React.FC<{}> = () => {
+  return (
+    <View>
+      <Text>This TextInput is styled differently</Text>
+      <TextInput
+        multiline
+        style={styles.superInput}
+      />
+    </View>
+  );
+};
+
+export const title = 'TextInput';
+export const displayName = 'TextInput';
+export const description = 'TextInput Examples and Tests';
+export const examples = [
+    {
+      title: 'Autofocus Example',
+      description: 'autoFocus in action',
+      render(): JSX.Element {
+        return (<AutoFocusingTextInputTest />);
+      },
+    },
+    {
+      title: 'Placeholders Example',
+      description: 'placeholder in action',
+      render(): JSX.Element {
+        return (<PlaceholderTextInputTest />);
+      },
+    },
+    {
+      title: 'Controlled Example',
+      description: 'Controlling inputs in action',
+      render(): JSX.Element {
+        return (<ControllingTextInputTest />);
+      },
+    },
+    {
+      title: 'Focus and Blur Example',
+      description: 'onFocus/onBlur in action',
+      render(): JSX.Element {
+        return (<BlurringAndFocusingTextInputTest />);
+      },
+    },
+    {
+      title: 'ContentSizeChange Example',
+      description: 'onContentSizeChange in action',
+      render(): JSX.Element {
+        return (<LayoutListeningTextInputTest />);
+      },
+    },
+    {
+      title: 'Control via onKeyPress Example',
+      description: 'onKeyPress in action',
+      render(): JSX.Element {
+        return (<KeyPressListeningTextInputTest />);
+      },
+    },
+    {
+      title: 'Super Styling Example',
+      description: 'Styling in action',
+      render(): JSX.Element {
+        return (<StyleTextInputTest />);
+      },
+    },
+  ];
+
+const styles = StyleSheet.create({
+  input: {
+    height: 20,
+  },
+  blue: {
+    color: 'blue',
+    height: 20,
+  },
+  green: {
+    color: 'green',
+    height: 20,
+  },
+  superInput: {
+    color: 'purple',
+    fontSize: 24,
+    fontStyle: 'italic',
+    fontWeight: 'bold',
+    fontFamily: 'times-new-roman',
+    height: 100,
+  },
+});

package/src-win/Libraries/Components/Touchable/Tests/TouchableWin32Test.tsx

@@ -0,0 +1,502 @@
+'use strict';
+
+import React from 'react'
+import {NativeSyntheticEvent, StyleSheet, Text, ViewStyle } from 'react-native';
+import {Insets} from 'react-native/types/public/Insets';
+import { ViewWin32 } from '../../View/ViewWin32';
+import { IViewWin32Props, IKeyboardEvent } from '../../View/ViewPropTypes';
+import { TouchableWin32 } from '../TouchableWin32';
+import { IPressEvent, IRenderChild } from '../TouchableWin32.Types';
+import { ITouchableWin32State } from '../TouchableWin32.Props';
+
+/**
+ * Styles used across both examples
+ */
+const styles = StyleSheet.create({
+  largeContainer: {
+    height: 200,
+    width: 600,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  smallContainer: {
+    height: 90,
+    width: 90,
+    justifyContent: 'center',
+    alignContent: 'center',
+  },
+  highlight: {
+    height: 150,
+    width: 150,
+    justifyContent: 'space-around',
+    alignContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  outerTouch: {
+    height: 150,
+    width: 150,
+    justifyContent: 'space-around',
+    alignContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  innerTouch: {
+    height: 90,
+    width: 90,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+/**
+ * Constant press rect offset, used to demonstrate press geometry
+ */
+const PRESS_RETENTION_OFFSET: Insets = {
+  top: 100,
+  left: 100,
+  right: 100,
+  bottom: 100,
+};
+
+interface ITouchableWin32WithoutFeedbackProps extends IViewWin32Props {
+  delayLongPress?: number;
+  delayPressIn?: number;
+  delayPressOut?: number;
+  onPress?: (e: IPressEvent) => void;
+  onPressIn?: (e: IPressEvent) => void;
+  onPressOut?: (e: IPressEvent) => void;
+  onLongPress?: (e: IPressEvent) => void;
+  pressRetentionOffset?: Insets;
+  rejectResponderTermination?: boolean;
+}
+
+interface ITouchableWin32WithoutFeedbackState {
+  isFocused: boolean;
+}
+
+/**
+ * Example implementation of TouchableWithoutFeedback - not meant for use outside these examples
+ * This is mainly there to show the ability to respond to touches without providing visual feedback,
+ * though we do show a red border on focus to know where starts start and end and whether press rect
+ * offsets are respected.
+ */
+class TouchableWin32WithoutFeedback extends React.Component<ITouchableWin32WithoutFeedbackProps, ITouchableWin32WithoutFeedbackState> {
+  constructor(props) {
+    super(props);
+
+    this.state = { isFocused: false };
+  }
+
+  public render() {
+    return (
+      <TouchableWin32
+        focusable
+        rejectResponderTermination={true}
+        disabled={false}
+        touchableHandleActivePressIn={this._touchableHandleActivePressIn}
+        touchableHandleActivePressOut={this._touchableHandleActivePressOut}
+        touchableHandlePress={this._touchableHandlePress}
+        touchableHandleLongPress={this._touchableHandleLongPress}
+        touchableGetHighlightDelayMS={this._touchableGetHighlightDelayMS}
+        touchableGetPressRectOffset={this._touchableGetPressRectOffset}
+        touchableGetLongPressDelayMS={this._touchableGetLongPressDelayMS}
+        touchableGetPressOutDelayMS={this._touchableGetPressOutDelayMS}
+        touchableGetHitSlop={this._touchableGetHitSlop}
+        onFocus={this._onFocus}
+        onBlur={this._onBlur}
+        renderStyle={this._generateStyle}
+      >
+        {React.Children.only(this.props.children)}
+      </TouchableWin32>
+    );
+  }
+
+  private readonly _touchableHandlePress = (e: IPressEvent) => {
+    this.props.onPress && this.props.onPress(e);
+  };
+
+  private readonly _touchableHandleActivePressIn = (e: IPressEvent) => {
+    this.props.onPressIn && this.props.onPressIn(e);
+  };
+
+  private readonly _touchableHandleActivePressOut = (e: IPressEvent) => {
+    this.props.onPressOut && this.props.onPressOut(e);
+  };
+
+  private readonly _touchableHandleLongPress = (e: IPressEvent) => {
+    this.props.onLongPress && this.props.onLongPress(e);
+  };
+
+  private readonly _touchableGetPressRectOffset = (): Insets => {
+    return this.props.pressRetentionOffset || PRESS_RETENTION_OFFSET;
+  };
+
+  private readonly _touchableGetHitSlop = (): Insets => {
+    return this.props.hitSlop as Insets;
+  };
+
+  private readonly _touchableGetHighlightDelayMS = (): number => {
+    return this.props.delayPressIn || 0;
+  };
+
+  private readonly _touchableGetLongPressDelayMS = (): number => {
+    return this.props.delayLongPress === 0 ? 0 : this.props.delayLongPress || 500;
+  };
+
+  private readonly _touchableGetPressOutDelayMS = (): number => {
+    return this.props.delayPressOut || 0;
+  };
+
+  private readonly _onFocus = () => {
+    this.setState({ isFocused: true });
+  };
+
+  private readonly _onBlur = () => {
+    this.setState({ isFocused: false });
+  };
+
+  /**
+   * The generated style uses hard-coded border width values
+   */
+  private readonly _generateStyle = (state: ITouchableWin32State): ViewStyle => {
+    const finalStyle: ViewStyle = {
+      borderWidth: state.isFocused ? 5 : 0,
+      borderColor: 'red',
+    };
+    return Object.assign({}, this.props.style, finalStyle);
+  };
+}
+
+interface ITouchableWin32HighlightProps extends Omit <IViewWin32Props, 'children'> {
+  delayLongPress?: number;
+  delayLongPressIn?: number;
+  delayPressOut?: number;
+  onPress?: (e: IPressEvent) => void;
+  onPressIn?: (e: IPressEvent) => void;
+  onPressOut?: (e: IPressEvent) => void;
+  onLongPress?: (e: IPressEvent) => void;
+  onKeyPress?: (e: IKeyboardEvent) => void;
+  onKeyPressDown?: (e: IKeyboardEvent) => void;
+  pressRetentionOffset?: Insets;
+  rejectResponderTermination?: boolean;
+  underlayColor?: string;
+  children?: IRenderChild<ITouchableWin32State>;
+}
+
+interface ITouchableWin32HighlightComponentProps extends ITouchableWin32HighlightProps {
+  // Used as an imperative handle to the TouchableWin32 interface - primarily for focus()
+  innerRef?: React.Ref<TouchableWin32>;
+}
+
+/**
+ * Example implementation of TouchableHighlight - not meant for use outside these examples
+ * The main difference between a full TouchableHighlight implementation and this example is that
+ * TouchableHighlight should manipulate the opacity of the wrapped view to display the underlay color.
+ * This example merely uses hard coded color values to distinguish between different control states
+ */
+class TouchableWin32HighlightComponent extends React.Component<ITouchableWin32HighlightComponentProps, {}> {
+
+  public render() {
+    return (
+      <TouchableWin32
+        focusable
+        rejectResponderTermination={this.props.rejectResponderTermination}
+        disabled={false}
+        touchableHandleActivePressIn={this._touchableHandleActivePressIn}
+        touchableHandleActivePressOut={this._touchableHandleActivePressOut}
+        touchableHandlePress={this._touchableHandlePress}
+        touchableHandleLongPress={this._touchableHandleLongPress}
+        touchableGetHighlightDelayMS={this._touchableGetHighlightDelayMS}
+        touchableGetPressRectOffset={this._touchableGetPressRectOffset}
+        touchableGetLongPressDelayMS={this._touchableGetLongPressDelayMS}
+        touchableGetPressOutDelayMS={this._touchableGetPressOutDelayMS}
+        touchableGetHitSlop={this._touchableGetHitSlop}
+        touchableHandleKeyPress={this._touchableHandleKeyPress}
+        touchableHandleKeyPressDown={this._touchableHandleKeyPressDown}
+        onFocus={this._onFocus}
+        onBlur={this._onBlur}
+        onMouseEnter={this._mouseEnter}
+        onMouseLeave={this._mouseLeave}
+        renderStyle={this._generateStyle}
+        children={this.props.children}
+        ref={this.props.innerRef}
+      />
+    );
+  }
+
+  private readonly _touchableHandlePress = (e: IPressEvent) => {
+    this.props.onPress && this.props.onPress(e);
+    this.setState({ isPressed: false });
+  };
+  private readonly _touchableHandleActivePressIn = (e: IPressEvent) => {
+    this.props.onPressIn && this.props.onPressIn(e);
+    this.setState({ isPressed: true });
+  };
+  private readonly _touchableHandleActivePressOut = (e: IPressEvent) => {
+    this.props.onPressOut && this.props.onPressOut(e);
+    this.setState({ isPressed: false });
+  };
+  private readonly _touchableHandleLongPress = (e: IPressEvent) => {
+    this.props.onLongPress && this.props.onLongPress(e);
+  };
+  private readonly _touchableGetPressRectOffset = (): Insets => {
+    return this.props.pressRetentionOffset || PRESS_RETENTION_OFFSET;
+  };
+  private readonly _touchableGetHitSlop = (): Insets => {
+    return { left: 100, right: 100, top: 100, bottom: 100 };
+  };
+  private readonly _touchableGetHighlightDelayMS = (): number => {
+    return this.props.delayLongPressIn || 0;
+  };
+  private readonly _touchableGetLongPressDelayMS = (): number => {
+    return this.props.delayLongPress || 500;
+  };
+  private readonly _touchableGetPressOutDelayMS = (): number => {
+    return this.props.delayPressOut || 0;
+  };
+  private readonly _touchableHandleKeyPress = (ev: IKeyboardEvent) => {
+    this.props.onKeyPress && this.props.onKeyPress(ev);
+  }
+  private readonly _touchableHandleKeyPressDown = (ev: IKeyboardEvent) => {
+    this.props.onKeyPressDown && this.props.onKeyPressDown(ev);
+  }
+  private readonly _mouseEnter = (mouseEvent): void => {
+    this.props.onMouseEnter && this.props.onMouseEnter(mouseEvent);
+    this.setState({ isMouseIn: true });
+  };
+  private readonly _mouseLeave = (mouseEvent): void => {
+    this.props.onMouseLeave && this.props.onMouseLeave(mouseEvent);
+    this.setState({ isMouseIn: false });
+  };
+  private readonly _onFocus = (ev: NativeSyntheticEvent<{}>): void => {
+    this.props.onFocus && this.props.onFocus(ev);
+    this.setState({ isFocused: true });
+  };
+  private readonly _onBlur = (ev: NativeSyntheticEvent<{}>): void => {
+    this.props.onBlur && this.props.onBlur(ev);
+    this.setState({ isFocused: false });
+  };
+
+  /**
+   * The generated style uses hard-coded color values,
+   * though it is trivial to pass these values as props.
+   * This is an example of a render style (one that is a
+   * function passed on to TouchableWin32 and resolved according
+   * to the internal state of TouchableWin32).
+   */
+  private readonly _generateStyle = (state: ITouchableWin32State): ViewStyle => {
+    const finalStyle: ViewStyle = {};
+    finalStyle.borderColor = state.isFocused ? 'red' : 'blue';
+    finalStyle.borderWidth = state.isFocused ? 10 : 5;
+    if (state.isHovered) {
+      if (state.isPressed) {
+        finalStyle.backgroundColor = 'black';
+      } else {
+        finalStyle.backgroundColor = 'gray';
+      }
+    } else {
+      if (state.isPressed) {
+        finalStyle.backgroundColor = 'green';
+      } else {
+        finalStyle.backgroundColor = 'white';
+      }
+    }
+    return Object.assign({}, this.props.style, finalStyle);
+  };
+}
+
+// Demonstrating ref forwarding - forwarding a ref using an innerRef prop on a class component
+const TouchableWin32Highlight = React.forwardRef<TouchableWin32, ITouchableWin32HighlightProps>(
+  (props, ref) => {
+    return (
+      <TouchableWin32HighlightComponent innerRef={ref} {...props} />
+    );
+  }
+);
+
+/**
+ * Both examples merely track number of presses
+ */
+interface IExampleState {
+  numberOfPresses: number;
+}
+
+/**
+ * TouchableHighlightExamples
+ */
+class TouchableWithoutFeedbackExample extends React.Component<{}, IExampleState> {
+  constructor(props) {
+    super(props);
+    this.state = { numberOfPresses: 0 };
+  }
+
+  public render() {
+    return (
+      <ViewWin32 style={styles.largeContainer}>
+        <TouchableWin32WithoutFeedback style={styles.outerTouch} onPress={this._onPress}>
+          <ViewWin32>
+            <Text>Press me</Text>
+          </ViewWin32>
+        </TouchableWin32WithoutFeedback>
+
+        <TouchableWin32WithoutFeedback style={styles.outerTouch} onPress={this._onPress}>
+          <ViewWin32 style={styles.smallContainer}>
+            <TouchableWin32WithoutFeedback style={styles.innerTouch} onPress={this._onPress}>
+              <ViewWin32>
+                <Text>You can also have nested Touchables</Text>
+              </ViewWin32>
+            </TouchableWin32WithoutFeedback>
+          </ViewWin32>
+        </TouchableWin32WithoutFeedback>
+        <Text>{'Number of Recognized Presses: ' + this.state.numberOfPresses}</Text>
+      </ViewWin32>
+    );
+  }
+
+  private readonly _onPress = () => {
+    this.setState({ numberOfPresses: this.state.numberOfPresses + 1 });
+  };
+}
+
+/**
+ * TouchableHighlightExamples
+ */
+class TouchableHighlightExample extends React.Component<{}, IExampleState> {
+  constructor(props) {
+    super(props);
+    this.state = { numberOfPresses: 0 };
+  }
+
+  public render() {
+    return (
+      <ViewWin32 style={styles.largeContainer}>
+        <TouchableWin32Highlight style={styles.outerTouch} onPress={this._onPress}>
+          <ViewWin32>
+            <Text>Press me</Text>
+          </ViewWin32>
+        </TouchableWin32Highlight>
+
+        <TouchableWin32Highlight style={styles.outerTouch} onPress={this._onPress}>
+          <ViewWin32 style={styles.smallContainer}>
+            <TouchableWin32Highlight style={styles.innerTouch} onPress={this._onPress} children={this._getChildrenOfInnerTouchable} />
+          </ViewWin32>
+        </TouchableWin32Highlight>
+        <Text style={{ color: 'red' }} textStyle="None">
+          {'Number of Recognized Presses: ' + this.state.numberOfPresses}
+        </Text>
+      </ViewWin32>
+    );
+  }
+
+  /**
+   * This is primarily to demonstrate render children as a function
+   * of state, here we change text color depending on interaction state.
+   */
+  private readonly _getChildrenOfInnerTouchable = (state: ITouchableWin32State) => {
+    return (
+      <ViewWin32
+        style={{
+          borderColor: state.isFocused ? 'green' : 'pink',
+          borderWidth: state.isHovered ? 10 : 5,
+          height: 70,
+          width: 70,
+        }}
+      >
+        <Text
+          style={{
+            color: this._pickColor(state.isHovered, state.isPressed),
+            fontSize: state.isFocused ? 8 : 10,
+          }}
+          textStyle="None"
+        >
+          Press Me!
+        </Text>
+      </ViewWin32>
+    );
+  };
+
+  private _pickColor(hovered: boolean, pressed: boolean) {
+    if (hovered) {
+      if (pressed) {
+        return 'white';
+      } else {
+        return 'red';
+      }
+    } else {
+      if (pressed) {
+        return 'purple';
+      } else {
+        return 'black';
+      }
+    }
+  }
+
+  private readonly _onPress = () => {
+    this.setState({ numberOfPresses: this.state.numberOfPresses + 1 });
+  };
+}
+
+const TouchableFocusExample = () => {
+  const [focused, setFocused] = React.useState(false);
+  const focusableRef = React.useRef<TouchableWin32>(null);
+
+  // onPress callback
+  const focusOnPress = React.useCallback(() => {
+    focusableRef.current && focusableRef.current.focus();
+    focused || setFocused(true);
+  }, [focused]);
+
+  // onFocus and onBlur callbacks
+  const onFocus = React.useCallback(() => {
+    setFocused(true);
+  }, []);
+  const onBlur = React.useCallback(() => {
+    setFocused(false);
+  }, []);
+
+  return (
+    <ViewWin32 style={styles.largeContainer}>
+      <TouchableWin32Highlight onPress={focusOnPress}>
+        <Text>Press me to focus my friend</Text>
+      </TouchableWin32Highlight>
+
+      <TouchableWin32Highlight
+        ref={focusableRef}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      >
+        <Text>{'Focused: ' + focused}</Text>
+      </TouchableWin32Highlight>
+    </ViewWin32>
+  );
+}
+
+export const displayName = 'TouchableWin32 Examples';
+export const title = 'TouchableWin32';
+export const description = 'Demonstration of touchable + focus + hover behavior all in one component';
+
+export const examples = [
+  {
+    title: 'TouchableWithoutFeedback Example',
+    description: 'A simple example implementation of without feedback behavior',
+    render(): JSX.Element {
+      return <TouchableWithoutFeedbackExample />;
+    },
+  },
+  {
+    title: 'TouchableHighlight Example',
+    description: 'A simple example implementation of highlight behavior',
+    render(): JSX.Element {
+      return <TouchableHighlightExample />;
+    },
+  },
+  {
+    title: 'Imperative Focus on TouchableWin32 Example',
+    description: 'A simple example implementation of imperative focus behavior',
+    render(): JSX.Element {
+      return <TouchableFocusExample />;
+    },
+  }
+];