@fluentui-react-native/tester 0.170.50 → 0.170.51

package/src/TestComponents/Common/Slider.tsx

@@ -1,170 +0,0 @@
-import * as React from 'react';
-import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
-import { StyleSheet, Text, View } from 'react-native';
-
-import { Separator, Pressable } from '@fluentui/react-native';
-import type { IPressableState } from '@fluentui-react-native/interactive-hooks';
-
-const thumbSize = 20;
-const defaultMaximumValue = 100;
-const defaultMinimumValue = 1;
-
-interface ISliderProps extends ViewProps {
-  minimum?: number;
-  maximum?: number;
-  initialValue?: number;
-  onChange?: (value: number) => void;
-}
-
-const styles = StyleSheet.create({
-  root: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  slider: {
-    minWidth: thumbSize * 2,
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignContent: 'stretch',
-    height: thumbSize,
-    width: 200,
-  },
-  track: {
-    flexGrow: 1,
-  },
-  thumb: {
-    width: thumbSize,
-    height: thumbSize,
-    borderRadius: thumbSize,
-    borderWidth: 2,
-    borderColor: '#7A7574',
-    backgroundColor: '#FFFFFF',
-    position: 'absolute',
-  },
-  label: {
-    margin: 8,
-    fontSize: 12,
-  },
-});
-
-const Track = Separator.customize({ separatorWidth: 4 });
-
-function onThumbRenderStyle(state: IPressableState, thumbLocation: number): StyleProp<ViewStyle> {
-  return {
-    ...styles.thumb,
-    borderColor: state.pressed ? 'black' : state.hovered ? 'red' : '#7A7574',
-    marginLeft: thumbLocation,
-  };
-}
-
-function calculateThumbLocationAndValue(
-  startTouchThumbLocation: number,
-  startTouchPosition: number,
-  currentTouchPosition: number,
-  trackLength: number,
-  minimum: number,
-  maximum: number,
-): [number, number] {
-  let newThumbLocation = startTouchThumbLocation + currentTouchPosition - startTouchPosition;
-  newThumbLocation = Math.max(0, newThumbLocation);
-  newThumbLocation = Math.min(newThumbLocation, trackLength);
-
-  const newValue = minimum + (newThumbLocation / trackLength) * (maximum - minimum);
-  const intValue = Math.min(maximum, Math.floor(newValue + 0.3)); // snap to nearest integer value
-  newThumbLocation = (trackLength * (intValue - minimum)) / (maximum - minimum);
-
-  return [newThumbLocation, intValue];
-}
-
-function verifyProps(initialValue: number, minimum: number, maximum: number) {
-  if (minimum >= maximum) {
-    throw new Error(`'minimum' must not be greater than or equal 'maximum'.`);
-  }
-
-  if (initialValue < minimum) {
-    throw new Error(`'initialValue' must not be less than 'minimum'.`);
-  }
-
-  if (initialValue > maximum) {
-    throw new Error(`'initialValue' must not be greater than 'maximum'.`);
-  }
-}
-
-export const Slider: React.FunctionComponent<ISliderProps> = (props: ISliderProps) => {
-  let { minimum, maximum, initialValue } = props;
-  minimum = minimum || defaultMinimumValue;
-  maximum = maximum || defaultMaximumValue;
-  initialValue = initialValue || minimum;
-  verifyProps(initialValue, minimum, maximum);
-
-  const { style: userStyle, onChange } = props;
-
-  const [thumbLocation, setThumbLocation] = React.useState<number>(0);
-
-  const startTouchPosition = React.useRef<number>(-1);
-  const startTouchThumbLocation = React.useRef<number>(-1);
-  const trackLength = React.useRef<number>(-1);
-  const sliderValue = React.useRef<number>(initialValue);
-
-  const ref = React.useRef<View>(null);
-
-  React.useEffect(() => {
-    if (ref.current) {
-      ref.current.measure((_x, _y, width) => {
-        if (width <= 0) {
-          return;
-        }
-
-        // track length is the entire view width subtracted by the thumb size.
-        trackLength.current = Math.max(0, width - thumbSize);
-
-        const initialThumbLocation = (trackLength.current * (initialValue! - minimum!)) / (maximum! - minimum!);
-        setThumbLocation(initialThumbLocation);
-      });
-    }
-  }, [ref, initialValue, maximum, minimum]);
-
-  return (
-    <View style={[userStyle, styles.root]}>
-      <View ref={ref} {...props} style={styles.slider}>
-        <Track style={styles.track} />
-        {trackLength.current > 0 && (
-          <Pressable
-            renderStyle={(state) => onThumbRenderStyle(state, thumbLocation)}
-            onStartShouldSetResponder={() => trackLength.current > 0}
-            onResponderStart={(e) => {
-              startTouchPosition.current = e.nativeEvent.pageX;
-              startTouchThumbLocation.current = thumbLocation;
-            }}
-            onResponderMove={(e) => {
-              if (startTouchPosition.current !== -1 && trackLength.current > 0) {
-                const [newThumbLocation, newValue] = calculateThumbLocationAndValue(
-                  startTouchThumbLocation.current,
-                  startTouchPosition.current,
-                  e.nativeEvent.pageX,
-                  trackLength.current,
-                  minimum || defaultMinimumValue,
-                  maximum || defaultMaximumValue,
-                );
-
-                sliderValue.current = newValue;
-                setThumbLocation(newThumbLocation);
-              }
-            }}
-            onResponderEnd={() => {
-              startTouchPosition.current = -1;
-              startTouchThumbLocation.current = -1;
-            }}
-            onResponderRelease={() => {
-              if (onChange) {
-                onChange(sliderValue.current);
-              }
-            }}
-          />
-        )}
-      </View>
-
-      <Text style={styles.label}>{sliderValue.current}</Text>
-    </View>
-  );
-};

package/src/TestComponents/Common/Square.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import type { ViewProps, StyleProp, ViewStyle, ColorValue } from 'react-native';
-import { View } from 'react-native';
-
-export interface ISquareProps extends ViewProps {
-  color?: ColorValue;
-}
-
-export const Square: React.FunctionComponent<ISquareProps> = (props: ISquareProps) => {
-  const newStyle: ViewStyle = {
-    backgroundColor: props.color || '#ff0000',
-    borderColor: '#c3c3c3',
-    borderWidth: 1,
-    height: 40,
-    width: 40,
-  };
-
-  const style: StyleProp<ViewStyle> = props.style ? [props.style, newStyle] : newStyle;
-
-  return <View {...props} style={style} />;
-};

package/src/TestComponents/Common/StyledPicker.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { Platform } from 'react-native';
-import type { ColorValue } from 'react-native';
-
-import { useTheme } from '@fluentui-react-native/theme-types';
-
-import { MenuPicker } from './MenuPicker';
-import { commonTestStyles as commonStyles } from './styles';
-
-export const StyledPicker = (props) => {
-  const { prompt, selected, onChange, collection, style } = props;
-  const theme = useTheme();
-  const pickerStyles = {
-    color: theme.colors.inputText as ColorValue,
-    alignSelf: Platform.OS === 'ios' ? 'flex-start' : 'auto',
-    ...commonStyles.header,
-    ...style,
-  };
-  const styleCollection = collection.map((value) => {
-    return {
-      label: value,
-      value: value,
-    };
-  });
-  return <MenuPicker prompt={prompt} style={pickerStyles} selected={selected} onChange={onChange} collection={styleCollection} />;
-};

package/src/TestComponents/Common/TestProps.tsx

@@ -1,28 +0,0 @@
-import { Platform } from 'react-native';
-// Please read http://93days.me/testing-react-native-application/ to understand why we set accessibilityLabel here.
-
-/**
- * The underlying Android test drivers use accessibilityLabel to find elements. However, all other platforms use testID.
- * Because of this, we're adding the testProps function that takes in a unique identifier and returns the correct prop based on the platform
- * (testID for Win32, Windows, macOS, iOS; accessibilityId for Android).
- *
- * If explicit accessibilityLabel is being used for other platforms, apply testProps after it to override it for Android.
- * @param id The string to be used as the test identifier
- * @returns an object with the correct test identifier prop based on platform
- */
-export function testProps(id) {
-  return Platform.select({
-    android: {
-      accessible: true,
-      accessibilityLabel: id,
-    },
-    macos: {
-      accessible: true,
-      accessibilityLabel: id,
-      testID: id,
-    },
-    default: {
-      testID: id,
-    },
-  });
-}

package/src/TestComponents/Common/iconExamples.tsx

@@ -1,30 +0,0 @@
-import { Platform } from 'react-native';
-
-import type { SvgIconProps, FontIconProps, IconProps } from '@fluentui-react-native/icon';
-
-import TestSvg from '../../../assets/test.svg';
-
-export const svgProps: SvgIconProps = {
-  src: TestSvg,
-  viewBox: '0 0 500 500',
-};
-
-export const iconProps: IconProps = { svgSource: svgProps };
-
-export const testTtf = require('../../../assets/Font_Awesome_900.otf');
-
-export const fontProps: FontIconProps = Platform.select({
-  macos: {
-    fontFamily: 'Arial',
-    codepoint: 0x2663,
-    fontSize: 12,
-  },
-  default: {
-    fontFamily: `Font Awesome 5 Free`,
-    fontSrcFile: testTtf,
-    codepoint: 0xf083,
-    fontSize: 12,
-  },
-});
-
-export const testImage = require('../../../assets/icon_24x24.png');

package/src/TestComponents/Common/styles.ts

@@ -1,188 +0,0 @@
-import { Platform, StyleSheet } from 'react-native';
-
-import type { IStackProps } from '@fluentui-react-native/stack';
-
-export const commonTestStyles = StyleSheet.create({
-  root: {
-    marginTop: 16,
-    marginRight: 32,
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-  },
-  flex: { flex: 1 },
-  header: {
-    marginVertical: 6,
-    fontSize: 16,
-  },
-  section: {
-    fontSize: 20,
-    fontWeight: 'bold',
-    color: '#0B6A0B',
-    marginTop: 12,
-  },
-  separatorStack: {
-    height: 200,
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
-  settings: {
-    flexGrow: 1,
-  },
-  settingsPicker: {
-    flexDirection: 'column',
-    flex: 1,
-  },
-  pickerControlled: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  vmargin: {
-    marginVertical: 6,
-  },
-  stack: {
-    borderWidth: 2,
-    borderColor: '#bdbdbd',
-    padding: 12,
-    margin: 8,
-  },
-  switch: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  textBox: {
-    borderWidth: 1,
-    height: 25,
-    fontSize: 12,
-    width: 150,
-    marginBottom: 8,
-    paddingVertical: 0,
-  },
-  view: {
-    minHeight: 200,
-    justifyContent: 'space-between',
-  },
-  androidContainer: {
-    marginTop: 20,
-    justifyContent: 'space-between',
-  },
-});
-
-export const fluentTesterStyles = StyleSheet.create({
-  testRoot: {
-    flex: 1,
-    flexGrow: 1,
-    flexDirection: 'row',
-    minHeight: 550,
-    minWidth: 300,
-    justifyContent: 'flex-start',
-    alignItems: 'stretch',
-    padding: 4,
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  headerWithBackButton: {
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-  },
-  backButton: {
-    alignSelf: 'flex-start',
-    display: 'flex',
-  },
-  testHeader: {
-    marginBottom: 8,
-    marginTop: 4,
-  },
-  testList: {
-    minWidth: 160,
-    flexShrink: 0,
-    flexGrow: 0,
-    flexDirection: 'row',
-  },
-  testListContainerStyle: {
-    flexDirection: 'column',
-    alignItems: 'stretch',
-  },
-  scrollViewStyle: {
-    flexDirection: 'column',
-    alignItems: 'stretch',
-  },
-  scrollViewContainer: {
-    height: 250,
-    width: 150,
-    flexShrink: 0,
-    flexGrow: 0,
-    flexDirection: 'column',
-  },
-  testListItem: {
-    width: '100%',
-    borderRadius: 0,
-    ...(Platform.OS === 'macos' && {
-      borderColor: 'transparent',
-      borderRadius: 5,
-    }),
-    justifyContent: 'flex-start',
-  },
-  testListSeparator: { marginHorizontal: 8 },
-  testSection: {
-    width: '100%',
-    padding: 8,
-  },
-  noTest: {
-    alignSelf: 'center',
-    fontSize: 18,
-  },
-});
-
-export const stackStyle: IStackProps['style'] = {
-  borderWidth: 1,
-  borderColor: '#bdbdbd',
-  paddingVertical: 8,
-  paddingHorizontal: 12,
-  margin: 8,
-};
-
-export const separatorStackStyle: IStackProps['style'] = {
-  height: 200,
-  flexDirection: 'row',
-  justifyContent: 'space-evenly',
-};
-
-export const mobileStyles = StyleSheet.create({
-  header: {
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-  },
-  testVariants: {
-    flexDirection: 'row',
-    marginHorizontal: 5,
-    paddingTop: 10,
-    paddingBottom: 5,
-    flex: 1,
-    justifyContent: 'space-evenly',
-  },
-  pageStyle: {
-    padding: 5,
-  },
-  testList: {
-    width: '100%',
-  },
-  testListItem: {
-    width: '100%',
-    height: 'auto',
-    fontSize: 18,
-    paddingVertical: 8,
-  },
-  testSection: {
-    width: '100%',
-    marginVertical: 15,
-  },
-  containerSpacedEvenly: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-evenly',
-  },
-});
-
-export const testContentRootViewStyle = [stackStyle, commonTestStyles.view];