@office-iss/react-native-win32 0.73.1 → 0.74.0-preview.1

package/Libraries/Components/Button/ButtonWin32.js

@@ -1,83 +1,83 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonWin32 = void 0;
-const react_1 = __importDefault(require("react"));
-const RN = require("react-native");
-var SelectState;
-(function (SelectState) {
-    SelectState[SelectState["NotSelected"] = 0] = "NotSelected";
-    SelectState[SelectState["Selected"] = 1] = "Selected";
-})(SelectState || (SelectState = {}));
-/**
- * React-native <Button> control with additional Win32-specific functionality.
- */
-class ButtonWin32 extends react_1.default.Component {
-    constructor(props) {
-        super(props);
-        this._makeState = (select) => {
-            return {
-                accessibilityState: {
-                    disabled: this.props.disabled,
-                    selected: select === SelectState.Selected,
-                },
-            };
-        };
-        this._setState = (select) => {
-            const state = this._makeState(select);
-            this.setState(state);
-        };
-        this._onFocus = () => {
-            this._setState(SelectState.Selected);
-            if (this.props.onFocus) {
-                this.props.onFocus();
-            }
-        };
-        this._onBlur = () => {
-            this._setState(SelectState.NotSelected);
-            if (this.props.onBlur) {
-                this.props.onBlur();
-            }
-        };
-        this._onTouchEnd = (event) => {
-            if (!this.props.disabled) {
-                if (this.props.onPress) {
-                    this.props.onPress(event);
-                }
-            }
-            if (this.props.onTouchEnd) {
-                this.props.onTouchEnd(event);
-            }
-        };
-        this.state = this._makeState(SelectState.NotSelected);
-    }
-    render() {
-        const viewProps = {
-            accessible: true,
-            accessibilityLabel: this.props.accessibilityLabel || this.props.title,
-            accessibilityRole: 'button',
-            accessibilityState: this.state.accessibilityState,
-            focusable: true,
-            onFocus: this._onFocus,
-            onBlur: this._onBlur,
-            onMouseEnter: this.props.onMouseEnter,
-            onMouseLeave: this.props.onMouseLeave,
-            onTouchStart: this.props.onTouchStart,
-            onTouchEnd: this._onTouchEnd,
-            testID: this.props.testID,
-            style: this.props.style,
-        };
-        const textProps = {
-            textStyle: 'None',
-        };
-        if (this.props.color) {
-            textProps.style = { color: this.props.color };
-        }
-        return (react_1.default.createElement(RN.ViewWin32, { ...viewProps },
-            react_1.default.createElement(RN.TextWin32, { ...textProps }, this.props.title)));
-    }
-}
-exports.ButtonWin32 = ButtonWin32;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonWin32 = void 0;
+const react_1 = __importDefault(require("react"));
+const RN = require("react-native");
+var SelectState;
+(function (SelectState) {
+    SelectState[SelectState["NotSelected"] = 0] = "NotSelected";
+    SelectState[SelectState["Selected"] = 1] = "Selected";
+})(SelectState || (SelectState = {}));
+/**
+ * React-native <Button> control with additional Win32-specific functionality.
+ */
+class ButtonWin32 extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this._makeState = (select) => {
+            return {
+                accessibilityState: {
+                    disabled: this.props.disabled,
+                    selected: select === SelectState.Selected,
+                },
+            };
+        };
+        this._setState = (select) => {
+            const state = this._makeState(select);
+            this.setState(state);
+        };
+        this._onFocus = () => {
+            this._setState(SelectState.Selected);
+            if (this.props.onFocus) {
+                this.props.onFocus();
+            }
+        };
+        this._onBlur = () => {
+            this._setState(SelectState.NotSelected);
+            if (this.props.onBlur) {
+                this.props.onBlur();
+            }
+        };
+        this._onTouchEnd = (event) => {
+            if (!this.props.disabled) {
+                if (this.props.onPress) {
+                    this.props.onPress(event);
+                }
+            }
+            if (this.props.onTouchEnd) {
+                this.props.onTouchEnd(event);
+            }
+        };
+        this.state = this._makeState(SelectState.NotSelected);
+    }
+    render() {
+        const viewProps = {
+            accessible: true,
+            accessibilityLabel: this.props.accessibilityLabel || this.props.title,
+            accessibilityRole: 'button',
+            accessibilityState: this.state.accessibilityState,
+            focusable: true,
+            onFocus: this._onFocus,
+            onBlur: this._onBlur,
+            onMouseEnter: this.props.onMouseEnter,
+            onMouseLeave: this.props.onMouseLeave,
+            onTouchStart: this.props.onTouchStart,
+            onTouchEnd: this._onTouchEnd,
+            testID: this.props.testID,
+            style: this.props.style,
+        };
+        const textProps = {
+            textStyle: 'None',
+        };
+        if (this.props.color) {
+            textProps.style = { color: this.props.color };
+        }
+        return (react_1.default.createElement(RN.ViewWin32, { ...viewProps },
+            react_1.default.createElement(RN.Text, { ...textProps }, this.props.title)));
+    }
+}
+exports.ButtonWin32 = ButtonWin32;
 //# sourceMappingURL=ButtonWin32.js.map

package/Libraries/Components/Button/ButtonWin32.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonWin32.js","sourceRoot":"","sources":["../../../src/Libraries/Components/Button/ButtonWin32.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport RN = require('react-native');\nimport type { IViewWin32Props } from '../View/ViewPropTypes';\nimport type { ITextWin32Props } from '../Text/TextWin32.Props';\nimport type { IButtonWin32Props } from './ButtonWin32.Props';\n\nconst enum SelectState {\n  NotSelected,\n  Selected\n}\n\ninterface IButtonWin32State {\n  accessibilityState: RN.AccessibilityState;\n}\n\n/**\n * React-native <Button> control with additional Win32-specific functionality.\n */\nexport class ButtonWin32 extends React.Component<IButtonWin32Props, IButtonWin32State> {\n  constructor(props: IButtonWin32Props) {\n    super(props);\n    this.state = this._makeState(SelectState.NotSelected);\n  }\n\n  public render() {\n    const viewProps: IViewWin32Props = {\n      accessible: true,\n      accessibilityLabel: this.props.accessibilityLabel || this.props.title,\n      accessibilityRole: 'button',\n      accessibilityState: this.state.accessibilityState,\n      focusable: true,\n      onFocus: this._onFocus,\n      onBlur: this._onBlur,\n      onMouseEnter: this.props.onMouseEnter,\n      onMouseLeave: this.props.onMouseLeave,\n      onTouchStart: this.props.onTouchStart,\n      onTouchEnd: this._onTouchEnd,\n      testID: this.props.testID,\n      style: this.props.style as RN.StyleProp<RN.ViewStyle>,\n    };\n\n    const textProps: ITextWin32Props = {\n      textStyle: 'None',\n    };\n    if (this.props.color) {\n      textProps.style = { color: this.props.color };\n    }\n\n    return (\n      <RN.ViewWin32 {...viewProps}>\n        <RN.TextWin32 {...textProps}>{this.props.title}</RN.TextWin32>\n      </RN.ViewWin32>\n    );\n  }\n\n  private readonly _makeState = (select: SelectState): IButtonWin32State => {\n    return {\n      accessibilityState: {\n        disabled: this.props.disabled,\n        selected: select === SelectState.Selected,\n      },\n    };\n  };\n\n  private readonly _setState = (select: SelectState): void => {\n    const state = this._makeState(select);\n    this.setState(state);\n  };\n\n  private readonly _onFocus = (): void => {\n    this._setState(SelectState.Selected);\n    if (this.props.onFocus) {\n      this.props.onFocus();\n    }\n  };\n\n  private readonly _onBlur = (): void => {\n    this._setState(SelectState.NotSelected);\n    if (this.props.onBlur) {\n      this.props.onBlur();\n    }\n  };\n\n  private readonly _onTouchEnd = (event: RN.GestureResponderEvent): void => {\n    if (!this.props.disabled) {\n      if (this.props.onPress) {\n        this.props.onPress(event);\n      }\n    }\n    if (this.props.onTouchEnd) {\n      this.props.onTouchEnd(event);\n    }\n  };\n}\n"]}
+{"version":3,"file":"ButtonWin32.js","sourceRoot":"","sources":["../../../src-win/Libraries/Components/Button/ButtonWin32.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport RN = require('react-native');\nimport type { IViewWin32Props } from '../View/ViewPropTypes';\nimport type { TextProps } from '../../Text/Text';\nimport type { IButtonWin32Props } from './ButtonWin32.Props';\n\nconst enum SelectState {\n  NotSelected,\n  Selected\n}\n\ninterface IButtonWin32State {\n  accessibilityState: RN.AccessibilityState;\n}\n\n/**\n * React-native <Button> control with additional Win32-specific functionality.\n */\nexport class ButtonWin32 extends React.Component<IButtonWin32Props, IButtonWin32State> {\n  constructor(props: IButtonWin32Props) {\n    super(props);\n    this.state = this._makeState(SelectState.NotSelected);\n  }\n\n  public render() {\n    const viewProps: IViewWin32Props = {\n      accessible: true,\n      accessibilityLabel: this.props.accessibilityLabel || this.props.title,\n      accessibilityRole: 'button',\n      accessibilityState: this.state.accessibilityState,\n      focusable: true,\n      onFocus: this._onFocus,\n      onBlur: this._onBlur,\n      onMouseEnter: this.props.onMouseEnter,\n      onMouseLeave: this.props.onMouseLeave,\n      onTouchStart: this.props.onTouchStart,\n      onTouchEnd: this._onTouchEnd,\n      testID: this.props.testID,\n      style: this.props.style as RN.StyleProp<RN.ViewStyle>,\n    };\n\n    const textProps: TextProps = {\n      textStyle: 'None',\n    };\n    if (this.props.color) {\n      textProps.style = { color: this.props.color };\n    }\n\n    return (\n      <RN.ViewWin32 {...viewProps}>\n        <RN.Text {...textProps}>{this.props.title}</RN.Text>\n      </RN.ViewWin32>\n    );\n  }\n\n  private readonly _makeState = (select: SelectState): IButtonWin32State => {\n    return {\n      accessibilityState: {\n        disabled: this.props.disabled,\n        selected: select === SelectState.Selected,\n      },\n    };\n  };\n\n  private readonly _setState = (select: SelectState): void => {\n    const state = this._makeState(select);\n    this.setState(state);\n  };\n\n  private readonly _onFocus = (): void => {\n    this._setState(SelectState.Selected);\n    if (this.props.onFocus) {\n      this.props.onFocus();\n    }\n  };\n\n  private readonly _onBlur = (): void => {\n    this._setState(SelectState.NotSelected);\n    if (this.props.onBlur) {\n      this.props.onBlur();\n    }\n  };\n\n  private readonly _onTouchEnd = (event: RN.GestureResponderEvent): void => {\n    if (!this.props.disabled) {\n      if (this.props.onPress) {\n        this.props.onPress(event);\n      }\n    }\n    if (this.props.onTouchEnd) {\n      this.props.onTouchEnd(event);\n    }\n  };\n}\n"]}

package/Libraries/Components/Button.js

@@ -6,14 +6,12 @@
  *
  * @format
  * @flow
- * @generate-docs
  */
 
 'use strict';
 
 import type {TextStyleProp, ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {PressEvent} from '../Types/CoreEventTypes';
-import type {Button as ButtonType} from './Button.flow';
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
@@ -282,113 +280,111 @@ type ButtonProps = $ReadOnly<{|
   ```
  */
 
-class Button extends React.Component<ButtonProps> {
-  render(): React.Node {
-    const {
-      accessibilityLabel,
-      accessibilityState,
-      'aria-busy': ariaBusy,
-      'aria-checked': ariaChecked,
-      'aria-disabled': ariaDisabled,
-      'aria-expanded': ariaExpanded,
-      'aria-label': ariaLabel,
-      'aria-selected': ariaSelected,
-      importantForAccessibility,
-      color,
-      onPress,
-      touchSoundDisabled,
-      title,
-      hasTVPreferredFocus,
-      nextFocusDown,
-      nextFocusForward,
-      nextFocusLeft,
-      nextFocusRight,
-      nextFocusUp,
-      testID,
-      accessible,
-      accessibilityActions,
-      accessibilityHint,
-      accessibilityLanguage,
-      onAccessibilityAction,
-    } = this.props;
-    const buttonStyles: Array<ViewStyleProp> = [styles.button];
-    const textStyles: Array<TextStyleProp> = [styles.text];
-    if (color) {
-      if (Platform.OS === 'ios') {
-        textStyles.push({color: color});
-      } else {
-        buttonStyles.push({backgroundColor: color});
-      }
-    }
-
-    let _accessibilityState = {
-      busy: ariaBusy ?? accessibilityState?.busy,
-      checked: ariaChecked ?? accessibilityState?.checked,
-      disabled: ariaDisabled ?? accessibilityState?.disabled,
-      expanded: ariaExpanded ?? accessibilityState?.expanded,
-      selected: ariaSelected ?? accessibilityState?.selected,
-    };
-
-    const disabled =
-      this.props.disabled != null
-        ? this.props.disabled
-        : _accessibilityState?.disabled;
-
-    _accessibilityState =
-      disabled !== _accessibilityState?.disabled
-        ? {..._accessibilityState, disabled}
-        : _accessibilityState;
-
-    if (disabled) {
-      buttonStyles.push(styles.buttonDisabled);
-      textStyles.push(styles.textDisabled);
+const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
+  const {
+    accessibilityLabel,
+    accessibilityState,
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-label': ariaLabel,
+    'aria-selected': ariaSelected,
+    importantForAccessibility,
+    color,
+    onPress,
+    touchSoundDisabled,
+    title,
+    hasTVPreferredFocus,
+    nextFocusDown,
+    nextFocusForward,
+    nextFocusLeft,
+    nextFocusRight,
+    nextFocusUp,
+    testID,
+    accessible,
+    accessibilityActions,
+    accessibilityHint,
+    accessibilityLanguage,
+    onAccessibilityAction,
+  } = props;
+  const buttonStyles: Array<ViewStyleProp> = [styles.button];
+  const textStyles: Array<TextStyleProp> = [styles.text];
+  if (color) {
+    if (Platform.OS === 'ios') {
+      textStyles.push({color: color});
+    } else {
+      buttonStyles.push({backgroundColor: color});
     }
+  }
 
-    invariant(
-      typeof title === 'string',
-      'The title prop of a Button must be a string',
-    );
-    const formattedTitle =
-      Platform.OS === 'android' ? title.toUpperCase() : title;
-    const Touchable =
-      Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
-
-    // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
-    const _importantForAccessibility =
-      importantForAccessibility === 'no'
-        ? 'no-hide-descendants'
-        : importantForAccessibility;
-
-    return (
-      <Touchable
-        accessible={accessible}
-        accessibilityActions={accessibilityActions}
-        onAccessibilityAction={onAccessibilityAction}
-        accessibilityLabel={ariaLabel || accessibilityLabel}
-        accessibilityHint={accessibilityHint}
-        accessibilityLanguage={accessibilityLanguage}
-        accessibilityRole="button"
-        accessibilityState={_accessibilityState}
-        importantForAccessibility={_importantForAccessibility}
-        hasTVPreferredFocus={hasTVPreferredFocus}
-        nextFocusDown={nextFocusDown}
-        nextFocusForward={nextFocusForward}
-        nextFocusLeft={nextFocusLeft}
-        nextFocusRight={nextFocusRight}
-        nextFocusUp={nextFocusUp}
-        testID={testID}
-        disabled={disabled}
-        onPress={onPress}
-        touchSoundDisabled={touchSoundDisabled}>
-        <View style={buttonStyles}>
-          <Text style={textStyles} disabled={disabled}>
-            {formattedTitle}
-          </Text>
-        </View>
-      </Touchable>
-    );
+  let _accessibilityState = {
+    busy: ariaBusy ?? accessibilityState?.busy,
+    checked: ariaChecked ?? accessibilityState?.checked,
+    disabled: ariaDisabled ?? accessibilityState?.disabled,
+    expanded: ariaExpanded ?? accessibilityState?.expanded,
+    selected: ariaSelected ?? accessibilityState?.selected,
+  };
+
+  const disabled =
+    props.disabled != null ? props.disabled : _accessibilityState?.disabled;
+
+  _accessibilityState =
+    disabled !== _accessibilityState?.disabled
+      ? {..._accessibilityState, disabled}
+      : _accessibilityState;
+
+  if (disabled) {
+    buttonStyles.push(styles.buttonDisabled);
+    textStyles.push(styles.textDisabled);
   }
-}
+
+  invariant(
+    typeof title === 'string',
+    'The title prop of a Button must be a string',
+  );
+  const formattedTitle =
+    Platform.OS === 'android' ? title.toUpperCase() : title;
+  const Touchable =
+    Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+
+  // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
+  const _importantForAccessibility =
+    importantForAccessibility === 'no'
+      ? 'no-hide-descendants'
+      : importantForAccessibility;
+
+  return (
+    <Touchable
+      accessible={accessible}
+      accessibilityActions={accessibilityActions}
+      onAccessibilityAction={onAccessibilityAction}
+      accessibilityLabel={ariaLabel || accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityLanguage={accessibilityLanguage}
+      accessibilityRole="button"
+      accessibilityState={_accessibilityState}
+      importantForAccessibility={_importantForAccessibility}
+      hasTVPreferredFocus={hasTVPreferredFocus}
+      nextFocusDown={nextFocusDown}
+      nextFocusForward={nextFocusForward}
+      nextFocusLeft={nextFocusLeft}
+      nextFocusRight={nextFocusRight}
+      nextFocusUp={nextFocusUp}
+      testID={testID}
+      disabled={disabled}
+      onPress={onPress}
+      touchSoundDisabled={touchSoundDisabled}>
+      <View style={buttonStyles}>
+        <Text style={textStyles} disabled={disabled}>
+          {formattedTitle}
+        </Text>
+      </View>
+    </Touchable>
+  );
+};
+
+Button.displayName = 'Button';
 
 const styles = StyleSheet.create({
   button: Platform.select({
@@ -432,4 +428,4 @@ const styles = StyleSheet.create({
   }),
 });
 
-module.exports = (Button: ButtonType);
+export default Button;