@fluentui-react-native/tester 0.170.50 → 0.170.52

package/src/TestComponents/NativeDatePicker/NativeDatePickerTest.tsx

@@ -1,369 +0,0 @@
-import * as React from 'react';
-import { Platform, Switch, View } from 'react-native';
-
-import { Text } from '@fluentui/react-native';
-import { Button } from '@fluentui-react-native/button';
-import { NativeDatePicker } from '@fluentui-react-native/experimental-native-date-picker';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { NATIVEDATEPICKER_TESTPAGE } from './consts';
-import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
-import type { PlatformStatus, TestSection } from '../Test';
-import { Test } from '../Test';
-
-const NativeDatePickerAndroidUsage: React.FunctionComponent = () => {
-  const today = new Date();
-  const [startDate, setStartDate] = React.useState<Date>(today);
-  const [endDate, setEndDate] = React.useState<Date>(today);
-
-  return (
-    <Stack style={stackStyle}>
-      <Text variant="headerStandard">Selected Start Date/Time</Text>
-      <Text variant="subheaderStandard">
-        {startDate?.toString()} {'\n'}
-      </Text>
-
-      <Text variant="headerStandard">Selected End Date/Time</Text>
-      <Text variant="subheaderStandard">
-        {endDate?.toString() ?? 'N/A'} {'\n'}
-      </Text>
-
-      <Button
-        content="Date Picker"
-        onClick={() => {
-          NativeDatePicker.present({
-            mode: 'date',
-            startDate: startDate,
-            endDate: endDate,
-            callback: (date1: string, date2: string) => {
-              console.warn(`${date1} - ${date2}`);
-              setStartDate(NativeDatePicker.parseISOString(date1));
-            },
-          });
-        }}
-      />
-      <Text variant="headerStandard">Ranged Datepicker</Text>
-      <View style={{ flexDirection: 'row' }}>
-        <Button
-          content="Start Date"
-          onClick={() => {
-            NativeDatePicker.present({
-              mode: 'dateRange',
-              dateRangeMode: 'start',
-              startDate: startDate,
-              endDate: endDate,
-              callback: (date1: string, date2: string) => {
-                console.warn(`${date1} - ${date2}`);
-                setStartDate(NativeDatePicker.parseISOString(date1));
-                setEndDate(NativeDatePicker.parseISOString(date2));
-              },
-            });
-          }}
-        />
-
-        <Button
-          content="End Date"
-          onClick={() => {
-            NativeDatePicker.present({
-              mode: 'dateRange',
-              dateRangeMode: 'end',
-              startDate: startDate,
-              endDate: endDate,
-              callback: (date1: string, date2: string) => {
-                console.warn(`${date1} - ${date2}`);
-                setStartDate(NativeDatePicker.parseISOString(date1));
-                setEndDate(NativeDatePicker.parseISOString(date2));
-              },
-            });
-          }}
-        />
-      </View>
-
-      <Text variant="headerStandard">Date and Time</Text>
-      <Button
-        content="Date Time Picker"
-        onClick={() => {
-          NativeDatePicker.present({
-            mode: 'dateTime',
-            startDate: startDate,
-            endDate: endDate,
-            callback: (date1: string, date2: string) => {
-              console.warn(`${date1} - ${date2}`);
-              setStartDate(NativeDatePicker.parseISOString(date1));
-            },
-          });
-        }}
-      />
-
-      <Text variant="headerStandard">Ranged Date Time Picker</Text>
-      <View style={{ flexDirection: 'row' }}>
-        <Button
-          content="Date Time Range"
-          onClick={() => {
-            NativeDatePicker.present({
-              mode: 'dateTimeRange',
-              dateRangeMode: 'start',
-              startDate: startDate,
-              endDate: endDate,
-              callback: (date1: string, date2: string) => {
-                console.warn(`${date1} - ${date2}`);
-                setStartDate(NativeDatePicker.parseISOString(date1));
-                setEndDate(NativeDatePicker.parseISOString(date2));
-              },
-            });
-          }}
-        />
-      </View>
-    </Stack>
-  );
-};
-
-const NativeDatePickeriOSUsage: React.FunctionComponent = () => {
-  const [startDate, setStartDate] = React.useState<Date>(new Date());
-  const [endDate, setEndDate] = React.useState<Date>(null);
-  const [customCalendarConfiguration, setCustomCalendarConfiguration] = React.useState(false);
-
-  function didPickDates(pickedStartDate: string, pickedEndDate: string) {
-    setStartDate(NativeDatePicker.parseISOString(pickedStartDate));
-    setEndDate(NativeDatePicker.parseISOString(pickedEndDate));
-  }
-
-  const today = new Date();
-
-  // Here we set up some common options and use the spread operator to copy them repeatedly into examples.
-  const fixedDates = {
-    startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7),
-    endDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 14),
-  };
-
-  const customReferenceStartDate = today;
-  const customReferenceEndDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
-  const defaultReferenceStartDate = new Date(today.getFullYear() - 3, 1, 1);
-  const defaultReferenceEndDate = new Date(defaultReferenceStartDate.getFullYear() + 10, 1, 1);
-
-  const referenceStartDate = customCalendarConfiguration ? customReferenceStartDate : defaultReferenceStartDate;
-  const referenceEndDate = customCalendarConfiguration ? customReferenceEndDate : defaultReferenceEndDate;
-
-  const titles = {
-    startTitle: 'Start Title',
-    startSubitle: 'Start Subtitle',
-    startTab: 'Start Tab',
-    endTitle: 'End Title',
-    endSubtitle: 'End Subtitle',
-    endTab: 'End Tab',
-    dateTitle: 'Date Title',
-    dateSubtitle: 'Date Subtitle',
-    timeTitle: 'Time Title',
-    timeSubtitle: 'Time Subtitle',
-  };
-
-  return (
-    <Stack style={stackStyle}>
-      <Text variant="headerStandard">Selected Start Date/Time</Text>
-      <Text variant="subheaderStandard">
-        {startDate?.toString()} {'\n'}
-      </Text>
-
-      <Text variant="headerStandard">Selected End Date/Time</Text>
-      <Text variant="subheaderStandard">
-        {endDate?.toString() ?? 'N/A'} {'\n'}
-      </Text>
-
-      <Button
-        content="Date picker"
-        onClick={() =>
-          NativeDatePicker.present({
-            referenceStartDate: referenceStartDate,
-            referenceEndDate: referenceEndDate,
-            callback: didPickDates,
-          })
-        }
-      />
-      <Button
-        content="Date time picker"
-        onClick={() =>
-          NativeDatePicker.present({
-            mode: 'dateTime',
-            referenceStartDate: referenceStartDate,
-            referenceEndDate: referenceEndDate,
-            callback: didPickDates,
-          })
-        }
-      />
-      <Button
-        content="Preselected date"
-        onClick={() =>
-          NativeDatePicker.present({
-            startDate: fixedDates.startDate,
-            referenceStartDate: referenceStartDate,
-            referenceEndDate: referenceEndDate,
-            callback: didPickDates,
-          })
-        }
-      />
-      <Button
-        content="Date range (tabbed)"
-        onClick={() =>
-          NativeDatePicker.present({
-            mode: 'dateRange',
-            referenceStartDate: referenceStartDate,
-            referenceEndDate: referenceEndDate,
-            callback: didPickDates,
-          })
-        }
-      />
-      <Button
-        content="Date range (tabbed) remembering last selection"
-        onClick={() =>
-          NativeDatePicker.present({
-            mode: 'dateRange',
-            startDate: startDate,
-            endDate: endDate,
-            referenceStartDate: referenceStartDate,
-            referenceEndDate: referenceEndDate,
-            callback: didPickDates,
-          })
-        }
-      />
-
-      {/* Shows 'Date Title' and 'Date Subtitle' only.  Other titles are ignored. */}
-      <Button
-        content="Date with custom titles"
-        onClick={() =>
-          NativeDatePicker.present({
-            ...fixedDates,
-            referenceStartDate: referenceStartDate,
-            referenceEndDate: referenceEndDate,
-            ...titles,
-            callback: didPickDates,
-          })
-        }
-      />
-
-      {/* Shows 'Date Title' and 'Date Subtitle' on the first page;
-          shows 'Time Title' and 'Time Subtitle' on the second page. */}
-      <Button
-        content="Date time with custom titles"
-        onClick={() =>
-          NativeDatePicker.present({
-            mode: 'dateTime',
-            ...fixedDates,
-            referenceStartDate: referenceStartDate,
-            referenceEndDate: referenceEndDate,
-            ...titles,
-            callback: didPickDates,
-          })
-        }
-      />
-
-      {/* Shows 'Start Title' and 'Start Subtitle' on the first page;
-          shows 'End Title' and 'End Subtitle' on the second page. */}
-      <Button
-        content="Date range with custom titles (paged)"
-        onClick={() =>
-          NativeDatePicker.present({
-            mode: 'dateRange',
-            dateRangePresentation: 'paged',
-            ...fixedDates,
-            referenceStartDate: referenceStartDate,
-            referenceEndDate: referenceEndDate,
-            ...titles,
-            callback: didPickDates,
-          })
-        }
-      />
-
-      {/* Shows 'Date Title', 'Date Subtitle', 'Start Tab' and 'End Tab'. */}
-      <Button
-        content="Date range with custom titles (tabbed)"
-        onClick={() =>
-          NativeDatePicker.present({
-            mode: 'dateRange',
-            ...fixedDates,
-            referenceStartDate: referenceStartDate,
-            referenceEndDate: referenceEndDate,
-            ...titles,
-            callback: didPickDates,
-          })
-        }
-      />
-
-      {/* WARNING:  The paged presentation mode of the date time range picker is bugged.
-                    It shows only a time picker with start and end tabs. */}
-      {/* <Button
-        content="Date time range with custom titles (paged)"
-        onClick={() =>
-          NativeDatePicker.present({
-            mode: 'dateTimeRange',
-            dateRangePresentation: 'paged',
-            ...fixedDates,
-            referenceStartDate: referenceStartDate,
-            referenceEndDate: referenceEndDate,
-            ...titles,
-            callback: didPickDates,
-          })
-        }
-      /> */}
-
-      {/* Shows 'Date Title', 'Date Subtitle', 'Start Tab' and 'End Tab' on the first page;
-          shows 'Time Title', 'Time Subtitle', 'Start Tab' and 'End Tab' on the second page */}
-      <Button
-        content="Date time range with custom titles (tabbed)"
-        onClick={() =>
-          NativeDatePicker.present({
-            mode: 'dateTimeRange',
-            ...fixedDates,
-            referenceStartDate: referenceStartDate,
-            referenceEndDate: referenceEndDate,
-            ...titles,
-            callback: didPickDates,
-          })
-        }
-      />
-
-      <View style={commonStyles.switch}>
-        <Text variant="headerStandard">Custom calendar configuration</Text>
-        <Switch
-          value={customCalendarConfiguration}
-          onValueChange={(value) => {
-            setCustomCalendarConfiguration(value);
-          }}
-        />
-      </View>
-      <Text variant="subheaderStandard">Reference start date: {customReferenceStartDate.toDateString()}</Text>
-      <Text variant="subheaderStandard">Reference end date: {customReferenceEndDate.toDateString()}</Text>
-    </Stack>
-  );
-};
-
-const nativeDatePickerSections: TestSection[] = [
-  ...Platform.select({
-    android: [
-      {
-        name: 'Native Date Picker',
-        component: NativeDatePickerAndroidUsage,
-      },
-    ],
-    default: [
-      {
-        name: 'Native Date Picker',
-        testID: NATIVEDATEPICKER_TESTPAGE,
-        component: NativeDatePickeriOSUsage,
-      },
-    ],
-  }),
-];
-
-export const NativeDatePickerTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'N/A',
-    uwpStatus: 'N/A',
-    iosStatus: 'Experimental',
-    macosStatus: 'N/A',
-    androidStatus: 'Experimental',
-  };
-
-  const description = 'A Native date picker component using the Fluent Design System.';
-
-  return <Test name="Native Date Picker Test" description={description} sections={nativeDatePickerSections} status={status}></Test>;
-};

package/src/TestComponents/NativeDatePicker/consts.ts

@@ -1,2 +0,0 @@
-export const HOMEPAGE_NATIVEDATEPICKER_BUTTON = 'Homepage_NativeDatePicker_Button';
-export const NATIVEDATEPICKER_TESTPAGE = 'NativeDatePicker_TestPage';

package/src/TestComponents/NativeDatePicker/index.ts

@@ -1,2 +0,0 @@
-export * from './NativeDatePickerTest';
-export * from './consts';

package/src/TestComponents/Notification/NotificationTest.tsx

@@ -1,292 +0,0 @@
-import * as React from 'react';
-import { Animated, StyleSheet, Switch, TextInput, View } from 'react-native';
-
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import type { SvgIconProps } from '@fluentui-react-native/icon';
-import type { NotificationVariant } from '@fluentui-react-native/notification';
-import { Notification, NotificationVariants } from '@fluentui-react-native/notification';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import PlayButton from '../../../assets/play_button.svg';
-import { StyledPicker } from '../Common/StyledPicker';
-import { commonTestStyles as commonStyles } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const svgProps: SvgIconProps = {
-  src: PlayButton,
-};
-const iconProps = { svgSource: svgProps };
-
-const SHOW_HEIGHT = -50;
-const BAR_SHOW_DURATION = 300;
-const HIDE_DURATION = 250;
-const AUTO_HIDE_DURATION = 3000;
-const USE_NATIVE_DRIVER_IOS = true;
-
-const styles = StyleSheet.create({
-  button: {
-    alignSelf: 'center',
-    marginBottom: 50,
-  },
-  notification: {
-    marginTop: 10,
-  },
-  textInput: {
-    borderWidth: 1,
-  },
-});
-
-const CustomToast: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState<NotificationVariant>('primary');
-  const [title, setTitle] = React.useState("Kat's iPhoneX");
-  const [message, setMessage] = React.useState('Listen to Emails • 7 mins');
-  const [action, setAction] = React.useState('Listen');
-
-  const [showIcon, setShowIcon] = React.useState(true);
-  const [showTitle, setShowTitle] = React.useState(true);
-
-  return (
-    <View>
-      <StyledPicker
-        prompt="Variant"
-        selected={variant}
-        onChange={setVariant}
-        collection={NotificationVariants.filter((variant) => !variant.endsWith('Bar'))}
-      />
-      <TextInput value={title} onChangeText={setTitle} style={styles.textInput} />
-      <TextInput value={message} onChangeText={setMessage} style={styles.textInput} />
-      <TextInput value={action} onChangeText={setAction} style={styles.textInput} />
-      <View style={commonStyles.switch}>
-        <Text>Show icon </Text>
-        <Switch value={showIcon} onValueChange={setShowIcon} />
-      </View>
-      <View style={commonStyles.switch}>
-        <Text>Show title </Text>
-        <Switch value={showTitle} onValueChange={setShowTitle} />
-      </View>
-      <View style={styles.notification}>
-        <Notification
-          variant={variant}
-          icon={showIcon ? iconProps : undefined}
-          title={showTitle ? title : undefined}
-          action={action}
-          onPress={() => {
-            console.log('Notification tapped');
-          }}
-          onActionPress={() => {
-            console.log('Notification action tapped');
-          }}
-        >
-          {message}
-        </Notification>
-      </View>
-    </View>
-  );
-};
-
-const CustomBar: React.FunctionComponent = () => {
-  const [variant, setVariant] = React.useState<NotificationVariant>('primaryBar');
-  const [message, setMessage] = React.useState('Updating...');
-
-  return (
-    <View>
-      <StyledPicker
-        prompt="Variant"
-        selected={variant}
-        onChange={setVariant}
-        collection={NotificationVariants.filter((variant) => variant.endsWith('Bar'))}
-      />
-      <TextInput value={message} onChangeText={setMessage} style={styles.textInput} />
-      <View style={styles.notification}>
-        <Notification
-          variant={variant}
-          onPress={() => {
-            console.log('Notification tapped');
-          }}
-        >
-          {message}
-        </Notification>
-      </View>
-    </View>
-  );
-};
-
-const PrimaryWithAutoHide: React.FunctionComponent = () => {
-  const [visible, setVisible] = React.useState(true);
-  const onButtonPress = () => setVisible(!visible);
-
-  const [hidden, setHidden] = React.useState<boolean>(!visible);
-  const height = React.useRef(new Animated.Value(0)).current;
-
-  const show = React.useCallback(() => {
-    setHidden(false);
-    Animated.sequence([
-      Animated.spring(height, {
-        toValue: SHOW_HEIGHT,
-        bounciness: 16,
-        speed: 20,
-        useNativeDriver: USE_NATIVE_DRIVER_IOS,
-      }),
-      Animated.delay(AUTO_HIDE_DURATION),
-      Animated.timing(height, {
-        toValue: 0,
-        duration: HIDE_DURATION,
-        useNativeDriver: USE_NATIVE_DRIVER_IOS,
-      }),
-    ]).start(() => {
-      setHidden(true);
-      setVisible(false);
-    });
-  }, [height]);
-
-  const hide = React.useCallback(() => {
-    Animated.timing(height, {
-      toValue: 0,
-      duration: HIDE_DURATION,
-      useNativeDriver: USE_NATIVE_DRIVER_IOS,
-    }).start(() => {
-      setHidden(true);
-    });
-  }, [height]);
-
-  React.useLayoutEffect(() => {
-    if (visible) {
-      show();
-    } else {
-      hide();
-    }
-  }, [visible, show, hide]);
-
-  const animatedViewProps = {
-    transform: [{ translateY: height }],
-  };
-
-  return (
-    <View>
-      <Button appearance="subtle" onClick={onButtonPress} style={styles.button}>
-        {visible ? 'Hide' : 'Show'}
-      </Button>
-      {!hidden && (
-        <Animated.View style={animatedViewProps}>
-          <Notification
-            variant={'primary'}
-            action="Undo"
-            onPress={() => {
-              console.log('Notification tapped');
-            }}
-            onActionPress={() => {
-              console.log('Undo tapped');
-            }}
-          >
-            Mail Archived
-          </Notification>
-        </Animated.View>
-      )}
-    </View>
-  );
-};
-const PrimaryBarWithAutoHide: React.FunctionComponent = () => {
-  const [visible, setVisible] = React.useState(true);
-  const onButtonPress = () => setVisible(!visible);
-
-  const [hidden, setHidden] = React.useState<boolean>(!visible);
-  const height = React.useRef(new Animated.Value(0)).current;
-
-  const show = () => {
-    setHidden(false);
-    Animated.sequence([
-      Animated.timing(height, {
-        toValue: SHOW_HEIGHT,
-        duration: BAR_SHOW_DURATION,
-        useNativeDriver: USE_NATIVE_DRIVER_IOS,
-      }),
-      Animated.delay(AUTO_HIDE_DURATION),
-      Animated.timing(height, {
-        toValue: 0,
-        duration: HIDE_DURATION,
-        useNativeDriver: USE_NATIVE_DRIVER_IOS,
-      }),
-    ]).start(() => {
-      setHidden(true);
-      setVisible(false);
-    });
-  };
-
-  const hide = () => {
-    Animated.timing(height, {
-      toValue: 0,
-      duration: HIDE_DURATION,
-      useNativeDriver: USE_NATIVE_DRIVER_IOS,
-    }).start(() => {
-      setHidden(true);
-    });
-  };
-
-  React.useLayoutEffect(() => {
-    if (visible) {
-      show();
-    } else {
-      hide();
-    }
-  }, [visible, height]);
-
-  const animatedViewProps = {
-    transform: [{ translateY: height }],
-  };
-
-  return (
-    <View>
-      <Button appearance="subtle" onClick={onButtonPress} style={styles.button}>
-        {visible ? 'Hide' : 'Show'}
-      </Button>
-      {!hidden && (
-        <Animated.View style={animatedViewProps}>
-          <Notification
-            variant={'primaryBar'}
-            onPress={() => {
-              console.log('Notification tapped');
-            }}
-          >
-            Mail Sent
-          </Notification>
-        </Animated.View>
-      )}
-    </View>
-  );
-};
-
-const notificationSections: TestSection[] = [
-  {
-    name: 'Custom Toast',
-    component: CustomToast,
-  },
-  {
-    name: 'Custom Bar',
-    component: CustomBar,
-  },
-  {
-    name: 'Primary with auto-hide',
-    component: PrimaryWithAutoHide,
-  },
-  {
-    name: 'Primary Bar with auto-hide',
-    component: PrimaryBarWithAutoHide,
-  },
-];
-
-export const NotificationTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Backlog',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Production',
-    macosStatus: 'Backlog',
-    androidStatus: 'Backlog',
-  };
-
-  const description = 'Testing notification component';
-
-  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Notification/SPEC.md';
-
-  return <Test name="Notification Test" description={description} spec={spec} sections={notificationSections} status={status} />;
-};

package/src/TestComponents/Notification/consts.ts

@@ -1,2 +0,0 @@
-export const HOMEPAGE_NOTIFICATION_BUTTON = 'Homepage_Notification_Button';
-export const NOTIFICATION_TESTPAGE = 'Notification_TestPage';

package/src/TestComponents/Notification/index.ts

@@ -1,2 +0,0 @@
-export * from './NotificationTest';
-export * from './consts';