@office-iss/react-native-win32 0.72.0-preview.4 → 0.72.0-preview.5

package/src/Libraries/Components/Touchable/TouchableNativeFeedback.win32.d.ts

@@ -1,119 +0,0 @@
-/**
- * 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
- */
-
-import type * as React from 'react';
-import {Constructor} from '../../../types/private/Utilities';
-import {ColorValue} from '../../StyleSheet/StyleSheet';
-import {TouchableMixin} from './Touchable';
-
-import type {TVProps} from './TouchableOpacity';
-import {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
-
-interface BaseBackgroundPropType {
-  type: string;
-  rippleRadius?: number | null | undefined;
-}
-
-interface RippleBackgroundPropType extends BaseBackgroundPropType {
-  type: 'RippleAndroid';
-  borderless: boolean;
-  color?: number | null | undefined;
-}
-
-interface ThemeAttributeBackgroundPropType extends BaseBackgroundPropType {
-  type: 'ThemeAttrAndroid';
-  attribute: string;
-}
-
-type BackgroundPropType =
-  | RippleBackgroundPropType
-  | ThemeAttributeBackgroundPropType;
-
-/**
- * @see https://reactnative.dev/docs/touchablenativefeedback#props
- */
-export interface TouchableNativeFeedbackProps
-  extends TouchableWithoutFeedbackProps,
-    TVProps {
-  /**
-   * Determines the type of background drawable that's going to be used to display feedback.
-   * It takes an object with type property and extra data depending on the type.
-   * It's recommended to use one of the following static methods to generate that dictionary:
-   *      1) TouchableNativeFeedback.SelectableBackground() - will create object that represents android theme's
-   *         default background for selectable elements (?android:attr/selectableItemBackground)
-   *      2) TouchableNativeFeedback.SelectableBackgroundBorderless() - will create object that represent android
-   *         theme's default background for borderless selectable elements
-   *         (?android:attr/selectableItemBackgroundBorderless). Available on android API level 21+
-   *      3) TouchableNativeFeedback.Ripple(color, borderless) - will create object that represents ripple drawable
-   *         with specified color (as a string). If property borderless evaluates to true the ripple will render
-   *         outside of the view bounds (see native actionbar buttons as an example of that behavior). This background
-   *         type is available on Android API level 21+
-   */
-  background?: BackgroundPropType | undefined;
-  useForeground?: boolean | undefined;
-
-  tooltip?: string; // Win32
-}
-
-/**
- * A wrapper for making views respond properly to touches (Android only).
- * On Android this component uses native state drawable to display touch feedback.
- * At the moment it only supports having a single View instance as a child node,
- * as it's implemented by replacing that View with another instance of RCTView node with some additional properties set.
- *
- * Background drawable of native feedback touchable can be customized with background property.
- *
- * @see https://reactnative.dev/docs/touchablenativefeedback#content
- */
-declare class TouchableNativeFeedbackComponent extends React.Component<TouchableNativeFeedbackProps> {}
-declare const TouchableNativeFeedbackBase: Constructor<TouchableMixin> &
-  typeof TouchableNativeFeedbackComponent;
-export class TouchableNativeFeedback extends TouchableNativeFeedbackBase {
-  /**
-   * Creates an object that represents android theme's default background for
-   * selectable elements (?android:attr/selectableItemBackground).
-   *
-   * @param rippleRadius The radius of ripple effect
-   */
-  static SelectableBackground(
-    rippleRadius?: number | null,
-  ): ThemeAttributeBackgroundPropType;
-
-  /**
-   * Creates an object that represent android theme's default background for borderless
-   * selectable elements (?android:attr/selectableItemBackgroundBorderless).
-   * Available on android API level 21+.
-   *
-   * @param rippleRadius The radius of ripple effect
-   */
-  static SelectableBackgroundBorderless(
-    rippleRadius?: number | null,
-  ): ThemeAttributeBackgroundPropType;
-
-  /**
-   * Creates an object that represents ripple drawable with specified color (as a
-   * string). If property `borderless` evaluates to true the ripple will
-   * render outside of the view bounds (see native actionbar buttons as an
-   * example of that behavior). This background type is available on Android
-   * API level 21+.
-   *
-   * @param color The ripple color
-   * @param borderless If the ripple can render outside it's bounds
-   * @param rippleRadius The radius of ripple effect
-   */
-  static Ripple(
-    color: ColorValue,
-    borderless: boolean,
-    rippleRadius?: number | null,
-  ): RippleBackgroundPropType;
-  static canUseNativeForeground(): boolean;
-}
-
-// For backcompat
-export type ITouchableNativeFeedbackProps = TouchableNativeFeedbackProps;

package/src/Libraries/Components/View/Tests/ViewWin32Test.tsx

@@ -1,333 +0,0 @@
-'use strict';
-import React from 'react'
-import { StyleSheet, Text, TouchableHighlight } from 'react-native';
-import { Cursor, IKeyboardEvent, IHandledKeyboardEvent, ViewWin32 } from '@office-iss/react-native-win32';
-
-const styles = StyleSheet.create({
-  border: {
-    borderStyle: 'dotted',
-    borderColor: 'black',
-  },
-  keyComponentRoot: {
-    borderWidth: 2,
-    flexDirection: 'row',
-    marginVertical: 5,
-    backgroundColor: 'whitesmoke',
-    justifyContent: 'space-around',
-  },
-  keyEnterVisualizer: {
-    margin: 5,
-    alignItems: 'center',
-    minWidth: 100,
-    minHeight: 30,
-  },
-  blackbox: { height: 30, width: 30, borderColor: 'black', borderWidth: 3 },
-});
-
-interface IFocusableComponentState {
-  hasFocus: boolean;
-}
-
-function FocusMoverTestComponent() {
-  const [hasFocus, setHasFocus] = React.useState<boolean>(false);
-
-  const labelId = React.useId();
-
-  const ref = React.useRef<ViewWin32>(null);
-  const onBtnPress = () => {
-    if (ref.current) {
-      ref.current.focus();
-    }
-  };
-
-  return (
-    <ViewWin32>
-      <ViewWin32 nativeID={labelId} accessibilityLabel="separate label for test" accessibilityItemType="Comment" />
-    <ViewWin32 style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 }}>
-      <TouchableHighlight onPress={onBtnPress}>
-        <ViewWin32 accessibilityLabelledBy={labelId} style={styles.blackbox} />
-      </TouchableHighlight>
-      <ViewWin32
-        ref={ref}
-        focusable
-        style={hasFocus ? { backgroundColor: '#aee8fcff' } : { backgroundColor: '#00000000' }}
-        onFocus={() => setHasFocus(true)}
-        onBlur={() => setHasFocus(false)}
-        enableFocusRing={false}
-      >
-        <Text>{hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>
-      </ViewWin32>
-    </ViewWin32>
-    </ViewWin32>
-  );
-}
-
-interface IKeyboardableComponentState {
-  lastKeyDown: string;
-  lastKeyUp: string;
-}
-
-const handledNativeKeyboardEvents: IHandledKeyboardEvent[] = [
-  { key: 'ArrowDown' },
-  { key: 'ArrowUp' },
-  { key: 'ArrowLeft' },
-  { key: 'ArrowRight' },
-  { key: 'Tab' },
-];
-
-class KeyboardTestComponent extends React.Component<{}, IFocusableComponentState & IKeyboardableComponentState> {
-  public constructor(props) {
-    super(props);
-    this.state = {
-      hasFocus: false,
-      lastKeyDown: null,
-      lastKeyUp: null,
-    };
-  }
-
-  public render() {
-    return (
-      <ViewWin32 keyDownEvents={handledNativeKeyboardEvents} keyUpEvents={handledNativeKeyboardEvents}>
-        <ViewWin32
-          style={this.state.hasFocus ? [styles.keyComponentRoot, styles.border] : styles.keyComponentRoot}
-          focusable
-          onKeyUp={this._onKeyUp}
-          onKeyDown={this._onKeyDown}
-          onFocus={this._onFocus}
-          onBlur={this._onBlur}
-          enableFocusRing={false}
-        >
-          <ViewWin32 style={styles.keyEnterVisualizer}>
-            <Text>OnKeyDown</Text>
-            <Text>----</Text>
-            <Text>{this.state.lastKeyDown !== null ? this.state.lastKeyDown : ' '}</Text>
-          </ViewWin32>
-          <ViewWin32 style={styles.keyEnterVisualizer}>
-            <Text>OnKeyUp</Text>
-            <Text>----</Text>
-            <Text>{this.state.lastKeyUp !== null ? this.state.lastKeyUp : ' '}</Text>
-          </ViewWin32>
-        </ViewWin32>
-      </ViewWin32>
-    );
-  }
-
-  private readonly _onFocus = () => {
-    this.setState({
-      hasFocus: true,
-    });
-  };
-
-  private readonly _onBlur = () => {
-    this.setState({
-      hasFocus: false,
-    });
-  };
-
-  private readonly _onKeyUp = (ev: IKeyboardEvent) => {
-    this.setState({ lastKeyUp: ev.nativeEvent.key, lastKeyDown: null });
-  };
-
-  private readonly _onKeyDown = (ev: IKeyboardEvent) => {
-    this.setState({ lastKeyDown: ev.nativeEvent.key, lastKeyUp: null });
-  };
-}
-
-interface IHoverComponentProps {
-  color: string;
-}
-class HoverTestComponent extends React.Component<IHoverComponentProps, IFocusableComponentState> {
-  public constructor(props) {
-    super(props);
-    this.state = {
-      hasFocus: false,
-    };
-  }
-
-  public render() {
-    return (
-      <ViewWin32
-        onMouseEnter={this._onMouseEnter}
-        onMouseLeave={this._onMouseLeave}
-        style={this.state.hasFocus ? [styles.blackbox, { backgroundColor: this.props.color }] : styles.blackbox}
-      />
-    );
-  }
-  private readonly _onMouseLeave = () => {
-    this.setState({ hasFocus: false });
-  };
-  private readonly _onMouseEnter = () => {
-    this.setState({ hasFocus: true });
-  };
-}
-
-class HoverExample extends React.Component {
-  public render() {
-    return (
-      <ViewWin32 style={{ flexDirection: 'row', marginHorizontal: 75, justifyContent: 'space-around' }}>
-        <HoverTestComponent color="red" />
-        <HoverTestComponent color="orange" />
-        <HoverTestComponent color="yellow" />
-        <HoverTestComponent color="green" />
-        <HoverTestComponent color="blue" />
-        <HoverTestComponent color="indigo" />
-        <HoverTestComponent color="violet" />
-      </ViewWin32>
-    );
-  }
-}
-
-const ToolTipExample: React.FunctionComponent<{}> = () => {
-  return (
-    <ViewWin32
-      style={{
-        backgroundColor: 'red',
-        height: 100,
-        width: 100,
-      }}
-      tooltip="Example tooltip"
-      cursor="pointer"
-    />
-  );
-};
-
-interface ICursorTestComponentProps {
-  cursor: Cursor
-}
-
-const CursorTestComponent: React.FunctionComponent<ICursorTestComponentProps> = (props) => {
-  return (
-    <ViewWin32 style={{flexDirection: 'column'}}>
-      <Text>{props.cursor}</Text>
-      <ViewWin32 cursor={props.cursor} style={styles.blackbox} />
-    </ViewWin32>
-  )
-}
-
-const CursorExample: React.FunctionComponent = () => {
-  return (
-    <ViewWin32 style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
-      <CursorTestComponent cursor='auto' />
-      <CursorTestComponent cursor='default' />
-      <CursorTestComponent cursor='help' />
-      <CursorTestComponent cursor='nesw-resize' />
-      <CursorTestComponent cursor='not-allowed' />
-      <CursorTestComponent cursor='ns-resize' />
-      <CursorTestComponent cursor='nwse-resize' />
-      <CursorTestComponent cursor='pointer' />
-      <CursorTestComponent cursor='wait' />
-      <CursorTestComponent cursor='move' />
-      <CursorTestComponent cursor='text' />
-      <CursorTestComponent cursor='we-resize' />
-    </ViewWin32>
-  );
-}
-class EnableFocusRingExample extends React.Component<{}, IFocusableComponentState> {
-  public constructor(props) {
-    super(props);
-    this.state = {
-      hasFocus: false,
-    };
-  }
-  
-  public render() {
-    return (
-      <ViewWin32 style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 5 }}>
-        <ViewWin32
-          style={{
-            backgroundColor: 'pink',
-            height: 100,
-            width: 100,
-          }}
-          enableFocusRing={true}
-          focusable
-        >
-          <Text>enableFocusRing set to true</Text>
-        </ViewWin32>
-        <ViewWin32
-          style={{
-            backgroundColor: 'pink',
-            height: 100,
-            width: 100,
-          }}
-          enableFocusRing={false}
-          focusable
-          onFocus={this._onFocus}
-          onBlur={this._onBlur}
-        >
-          <>
-            <Text>enableFocusRing set to false</Text>
-            <Text>{this.state.hasFocus ? 'Focus: Yes' : 'Focus: No'}</Text>
-          </>
-        </ViewWin32>
-      </ViewWin32>
-    );
-  }
-
-  private readonly _onFocus = () => {
-    this.setState({
-      hasFocus: true,
-    });
-  };
-
-  private readonly _onBlur = () => {
-    this.setState({
-      hasFocus: false,
-    });
-  };
-}
-
-
-export const title = 'ViewWin32';
-export const displayName = 'ViewWin32 Example';
-export const description = 'All the stock View props plus Win32 specific ones';
-export const examples = [
-  {
-    title: 'focus() method example',
-    description: 'Each of these black boxes moves focus to the ViewWin32 on the right',
-    render(): JSX.Element {
-      return (
-        <ViewWin32>
-          <FocusMoverTestComponent />
-          <FocusMoverTestComponent />
-          <FocusMoverTestComponent />
-        </ViewWin32>
-      );
-    },
-  },
-  {
-    title: 'KeyboardEvents example',
-    description: 'Native keyboarding has been prevented',
-    render(): JSX.Element {
-      return <KeyboardTestComponent />;
-    },
-  },
-  {
-    title: 'Hover example',
-    description: 'Hover a rainbow',
-    render(): JSX.Element {
-      return <HoverExample />;
-    },
-  },
-  {
-    title: 'Tooltip example',
-    description: 'Displays a tooltip on hover',
-    render(): JSX.Element {
-      return <ToolTipExample />;
-    },
-  },
-  {
-    title: 'Cursor example',
-    description: 'Each of these boxes should display a different cursor',
-    render(): JSX.Element {
-      return <CursorExample />;
-    },
-  },
-  {
-    title: 'EnableFocusRing example',
-    description: 'Displays focus visuals that are driven by native',
-    render(): JSX.Element {
-      return <EnableFocusRingExample />;
-    },
-  },
-];