@fluentui-react-native/tester 0.170.27 → 0.170.29

package/lib/TestComponents/Overflow/OverflowTest.js

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { Divider } from '@fluentui-react-native/divider';
+import { OVERFLOW_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { Menu, MenuTrigger, MenuList, MenuPopover, MenuItem } from '@fluentui-react-native/menu';
+import { Overflow, OverflowItem, useOverflowMenu } from '@fluentui-react-native/overflow';
+import { TabList, Tab } from '@fluentui-react-native/tablist';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+import { E2EOverflowTest } from './OverflowE2ETest';
+import MoreHorizontalIcon from '../../../assets/MoreHorizontalFilled.svg';
+import { Test } from '../Test';
+const items = ['a', 'b', 'c', 'd', 'e'];
+const itemLabels = {
+    a: 'Item A',
+    b: 'Item B Item B Item B',
+    c: 'Item C Item C',
+    d: 'Item D',
+    e: 'Item E Item E Item E Item E',
+};
+const overflowTestPageStyles = StyleSheet.create({
+    containerStyle: {
+        paddingVertical: 4,
+    },
+    width100: {
+        width: 100,
+    },
+    width250: {
+        width: 250,
+    },
+    width400: {
+        width: 400,
+    },
+    menuTrigger: {
+        alignSelf: 'center',
+    },
+    dynamicAddRemoval: {
+        width: 400,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: 'black',
+    },
+});
+function OverflowMenu(props) {
+    const { showMenu, visibleMenuItems, menuTriggerRef, onMenuTriggerLayout } = useOverflowMenu();
+    if (showMenu) {
+        return (React.createElement(Menu, null,
+            React.createElement(MenuTrigger, null,
+                React.createElement(Button, { accessibilityLabel: "More options", onLayout: onMenuTriggerLayout, style: overflowTestPageStyles.menuTrigger, appearance: "subtle", iconOnly: true, icon: { svgSource: { src: MoreHorizontalIcon, viewBox: '0 0 20 20' } }, componentRef: menuTriggerRef })),
+            React.createElement(MenuPopover, null,
+                React.createElement(MenuList, null, visibleMenuItems.map((id) => (React.createElement(MenuItem, { onClick: () => props.onItemPress(id), key: id }, itemLabels[id] ?? 'Item ' + id)))))));
+    }
+    else {
+        return null;
+    }
+}
+function OverflowMainTest() {
+    return (React.createElement(View, { style: overflowTestPageStyles.containerStyle },
+        React.createElement(Overflow, { itemIDs: items },
+            items.map((item) => (React.createElement(OverflowItem, { key: item, overflowID: item },
+                React.createElement(Button, { onClick: () => console.log(item) }, itemLabels[item])))),
+            React.createElement(OverflowMenu, { onItemPress: console.log }))));
+}
+function OverflowTabTest() {
+    const [key, setKey] = React.useState('a');
+    return (React.createElement(View, { style: overflowTestPageStyles.containerStyle },
+        React.createElement(Overflow, { dontHideBeforeReady: true, itemIDs: items },
+            React.createElement(TabList, { selectedKey: key, onTabSelect: setKey },
+                items.map((item) => (React.createElement(OverflowItem, { priority: key === item ? 2 : 1, key: item, overflowID: item },
+                    React.createElement(Tab, { tabKey: item }, itemLabels[item])))),
+                React.createElement(OverflowMenu, { onItemPress: setKey })))));
+}
+function OverflowWidthExample(props) {
+    const style = React.useMemo(() => ({ width: props.width }), [props]);
+    return (React.createElement(View, { style: overflowTestPageStyles.containerStyle },
+        React.createElement(Text, { variant: "body1Strong" }, `Width: ${props.width}`),
+        React.createElement(Overflow, { dontHideBeforeReady: props.dontHideBeforeReady, style: style, itemIDs: items },
+            items.map((item) => (React.createElement(OverflowItem, { overflowID: item, key: item },
+                React.createElement(Button, null,
+                    "Item ",
+                    ' ' + item)))),
+            React.createElement(OverflowMenu, { onItemPress: console.log }))));
+}
+function OverflowDifferentWidthTest() {
+    return (React.createElement(View, null,
+        React.createElement(Text, { variant: "heroStandard" }, "Hidden Before Layout"),
+        React.createElement(OverflowWidthExample, { width: 100 }),
+        React.createElement(OverflowWidthExample, { width: 250 }),
+        React.createElement(OverflowWidthExample, { width: 400 }),
+        React.createElement(Divider, null),
+        React.createElement(Text, { variant: "heroStandard" }, "Visible Before Layout"),
+        React.createElement(OverflowWidthExample, { dontHideBeforeReady: true, width: 100 }),
+        React.createElement(OverflowWidthExample, { dontHideBeforeReady: true, width: 250 }),
+        React.createElement(OverflowWidthExample, { dontHideBeforeReady: true, width: 400 })));
+}
+function OverflowDynamicAddRemovalTest() {
+    const [ids, setIDs] = React.useState(['1', '2', '3']);
+    const addItem = React.useCallback(() => setIDs((prev) => {
+        const newItem = (parseInt(prev[prev.length - 1]) + 1).toString();
+        return [...prev, newItem];
+    }), []);
+    const removeItem = React.useCallback((item) => setIDs((prev) => prev.filter((x) => x !== item)), []);
+    return (React.createElement(View, { style: overflowTestPageStyles.containerStyle },
+        React.createElement(Text, null, "Add buttons using the button below. Remove by clicking on individual items in the Overflow container."),
+        React.createElement(Button, { onClick: addItem }, "Add item"),
+        React.createElement(Text, null,
+            "Overflow Items (raw): ",
+            ids.reduce((prev, curr) => prev + ', ' + curr)),
+        React.createElement(Divider, null),
+        React.createElement(Overflow, { padding: 4, style: overflowTestPageStyles.dynamicAddRemoval, itemIDs: ids },
+            ids.map((id) => {
+                return (React.createElement(OverflowItem, { key: id, overflowID: id },
+                    React.createElement(Button, { onClick: () => removeItem(id) }, 'Item ' + id)));
+            }),
+            React.createElement(OverflowMenu, { onItemPress: removeItem }))));
+}
+export const OverflowTest = () => {
+    const description = 'The `Overflow` and `OverflowItem` components, based off the same Fluent web v9 components of the same name, are low level utilities that enable users to create overflow experiences with any component. These components will detect and hide overflowing elements on screen and manage the overflow state.';
+    return (React.createElement(Test, { name: "Overflow Test", description: description, sections: [
+            {
+                name: 'Overflow',
+                component: OverflowMainTest,
+                testID: OVERFLOW_TESTPAGE,
+            },
+            {
+                name: 'Overflow TabList',
+                component: OverflowTabTest,
+            },
+            {
+                name: 'Overflow Dynamic Add/Removal of Items',
+                component: OverflowDynamicAddRemovalTest,
+            },
+            {
+                name: 'Overflow Variable Width',
+                component: OverflowDifferentWidthTest,
+            },
+        ], e2eSections: [
+            {
+                name: 'Overflow E2E Section',
+                component: E2EOverflowTest,
+            },
+        ], spec: "https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/Overflow/SPEC.md", status: {
+            win32Status: 'Experimental',
+            uwpStatus: 'Backlog',
+            iosStatus: 'Backlog',
+            macosStatus: 'Experimental',
+            androidStatus: 'Backlog',
+        } }));
+};
+//# sourceMappingURL=OverflowTest.js.map

package/lib/TestComponents/Overflow/OverflowTest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Overflow/OverflowTest.tsx"],"names":[],"mappings":"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"}

package/lib/TestComponents/Persona/CustomizeUsage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizeUsage.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Persona/CustomizeUsage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBA2FlC,CAAC"}

package/lib/TestComponents/Persona/CustomizeUsage.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { View, Text, Switch, TextInput } from 'react-native';
+import { Persona } from '@fluentui/react-native';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { michaelImageUrl } from './styles';
+import { Slider } from '../Common/Slider';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+const getThemedStyles = themedStyleSheet((t) => {
+    return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
+});
+export const CustomizeUsage = () => {
+    const [showImage, setShowImage] = React.useState(true);
+    const [coinColor, setCoinColor] = React.useState();
+    const [textColor, setTextColor] = React.useState();
+    const [textSize, setTextSize] = React.useState(23);
+    const [secondarySize, setSecondarySize] = React.useState(20);
+    const [tertiarySize, setTertiarySize] = React.useState(17);
+    const [optionalSize, setOptionalSize] = React.useState(14);
+    const [horizontalGap, setHorizontalGap] = React.useState();
+    const [verticalGap, setVerticalGap] = React.useState();
+    const theme = useTheme();
+    const textBoxBorderStyle = getThemedStyles(theme);
+    const CustomizedPersona = React.useMemo(() => {
+        const tokens = {
+            backgroundColor: coinColor,
+            color: textColor,
+            textFont: { fontSize: textSize },
+            secondaryFont: { fontSize: secondarySize },
+            tertiaryFont: { fontSize: tertiarySize },
+            optionalFont: { fontSize: optionalSize },
+            horizontalGap: horizontalGap,
+            verticalGap: verticalGap,
+        };
+        return Persona.customize({ tokens });
+    }, [coinColor, textColor, textSize, secondarySize, tertiarySize, optionalSize, horizontalGap, verticalGap]);
+    return (React.createElement(View, { style: commonStyles.root },
+        React.createElement(View, { style: commonStyles.settings },
+            React.createElement(View, { style: commonStyles.switch },
+                React.createElement(Text, null, "Show image"),
+                React.createElement(Switch, { value: showImage, onValueChange: setShowImage })),
+            React.createElement(TextInput, { accessibilityLabel: "Background color", style: textBoxBorderStyle.textbox, placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: (e) => {
+                    setCoinColor(e.nativeEvent.text);
+                } }),
+            React.createElement(TextInput, { accessibilityLabel: "Initials text color", style: textBoxBorderStyle.textbox, placeholder: "Initials text color", blurOnSubmit: true, onSubmitEditing: (e) => {
+                    setTextColor(e.nativeEvent.text);
+                } }),
+            React.createElement(Text, null, "Primary text size"),
+            React.createElement(Slider, { maximum: 50, minimum: 5, initialValue: textSize, style: commonStyles.vmargin, onChange: setTextSize }),
+            React.createElement(Text, null, "Secondary text size"),
+            React.createElement(Slider, { maximum: 50, minimum: 5, initialValue: secondarySize, style: commonStyles.vmargin, onChange: setSecondarySize }),
+            React.createElement(Text, null, "Tertiary text size"),
+            React.createElement(Slider, { maximum: 50, minimum: 5, initialValue: tertiarySize, style: commonStyles.vmargin, onChange: setTertiarySize }),
+            React.createElement(Text, null, "Optional text size"),
+            React.createElement(Slider, { maximum: 50, minimum: 5, initialValue: optionalSize, style: commonStyles.vmargin, onChange: setOptionalSize }),
+            React.createElement(Text, null, "Horizontal gap"),
+            React.createElement(Slider, { maximum: 100, initialValue: 5, minimum: 0, style: commonStyles.vmargin, onChange: setHorizontalGap }),
+            React.createElement(Text, null, "Vertical gap"),
+            React.createElement(Slider, { maximum: 20, initialValue: 5, minimum: 0, style: commonStyles.vmargin, onChange: setVerticalGap })),
+        React.createElement(CustomizedPersona, { initials: "MJ", size: "size72", text: "Michael Jackson", secondaryText: "Pop singer", tertiaryText: "King of pop", optionalText: "Indiana", imageDescription: "Legendary pop singer", presence: "offline", imageUrl: showImage ? michaelImageUrl : undefined })));
+};
+//# sourceMappingURL=CustomizeUsage.js.map

package/lib/TestComponents/Persona/CustomizeUsage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizeUsage.js","sourceRoot":"","sources":["../../../src/TestComponents/Persona/CustomizeUsage.tsx"],"names":[],"mappings":"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"}

package/lib/TestComponents/Persona/PersonaTest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonaTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Persona/PersonaTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAa/B,CAAC"}

package/lib/TestComponents/Persona/PersonaTest.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { PERSONA_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { CustomizeUsage } from './CustomizeUsage';
+import { StandardUsage } from './StandardUsage';
+import { Test } from '../Test';
+const personaSections = [
+    {
+        name: 'Standard Usage',
+        testID: PERSONA_TESTPAGE,
+        component: StandardUsage,
+    },
+    {
+        name: 'Customize Usage',
+        component: CustomizeUsage,
+    },
+];
+export const PersonaTest = () => {
+    const status = {
+        win32Status: 'Deprecated',
+        uwpStatus: 'Deprecated',
+        iosStatus: 'Deprecated',
+        macosStatus: 'Deprecated',
+        androidStatus: 'Deprecated',
+    };
+    const description = "Personas are used for rendering an individual's avatar and presence. Persona renders a PersonaCoin along with descriptive text components.";
+    return React.createElement(Test, { name: "Persona Test", description: description, sections: personaSections, status: status });
+};
+//# sourceMappingURL=PersonaTest.js.map

package/lib/TestComponents/Persona/PersonaTest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonaTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Persona/PersonaTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAEtE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,eAAe,GAAkB;IACrC;QACE,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,gBAAgB;QACxB,SAAS,EAAE,aAAa;KACzB;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,SAAS,EAAE,cAAc;KAC1B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAA4B,GAAG,EAAE;IACvD,MAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,YAAY;QACzB,SAAS,EAAE,YAAY;QACvB,SAAS,EAAE,YAAY;QACvB,WAAW,EAAE,YAAY;QACzB,aAAa,EAAE,YAAY;KAC5B,CAAC;IAEF,MAAM,WAAW,GACf,4IAA4I,CAAC;IAE/I,OAAO,oBAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AAC3G,CAAC,CAAC"}

package/lib/TestComponents/Persona/StandardUsage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardUsage.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Persona/StandardUsage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiD/B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,iBAuCjC,CAAC"}

package/lib/TestComponents/Persona/StandardUsage.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { View, Text, Switch } from 'react-native';
+import { Persona } from '@fluentui/react-native';
+import { satyaImageUrl } from './styles';
+import { MenuPicker } from '../Common/MenuPicker';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+import { undefinedText } from '../PersonaCoin/styles';
+const allSizes = [
+    undefinedText,
+    'size8',
+    'size24',
+    'size32',
+    'size40',
+    'size48',
+    'size56',
+    'size72',
+    'size100',
+    'size120',
+];
+const allSizesCollection = allSizes.map((size) => {
+    return {
+        label: size,
+        value: size,
+    };
+});
+function SwitchWithLabel(props) {
+    const { label, value, onValueChange } = props;
+    return (React.createElement(View, { style: commonStyles.switch },
+        React.createElement(Text, null, label),
+        React.createElement(Switch, { value: value, onValueChange: onValueChange })));
+}
+export const StandardUsage = () => {
+    const [showImage, setShowImage] = React.useState(true);
+    const [showPrimary, setShowPrimary] = React.useState(true);
+    const [showSecondary, setShowSecondary] = React.useState(true);
+    const [showTertiary, setShowTertiary] = React.useState(true);
+    const [showOptional, setShowOptional] = React.useState(true);
+    const [imageSize, setImageSize] = React.useState('size72');
+    return (React.createElement(View, { style: commonStyles.root },
+        React.createElement(View, { style: commonStyles.settings },
+            React.createElement(SwitchWithLabel, { label: "Show image", value: showImage, onValueChange: setShowImage }),
+            React.createElement(SwitchWithLabel, { label: "Show primary text", value: showPrimary, onValueChange: setShowPrimary }),
+            React.createElement(SwitchWithLabel, { label: "Show secondary text", value: showSecondary, onValueChange: setShowSecondary }),
+            React.createElement(SwitchWithLabel, { label: "Show tertiary text", value: showTertiary, onValueChange: setShowTertiary }),
+            React.createElement(SwitchWithLabel, { label: "Show optional text", value: showOptional, onValueChange: setShowOptional }),
+            React.createElement(MenuPicker, { prompt: "Size", style: commonStyles.header, selected: imageSize || undefinedText, onChange: (size) => setImageSize(size === undefinedText ? undefined : size), collection: allSizesCollection })),
+        React.createElement(Persona, { text: showPrimary ? 'Satya Nadella' : undefined, secondaryText: showSecondary ? 'CEO' : undefined, tertiaryText: showTertiary ? 'Microsoft' : undefined, optionalText: showOptional ? 'Office of the CEO' : undefined, size: imageSize, initials: "SN", imageUrl: showImage ? satyaImageUrl : undefined, imageDescription: "Profile photo of Satya Nadella", presence: 'away' })));
+};
+//# sourceMappingURL=StandardUsage.js.map

package/lib/TestComponents/Persona/StandardUsage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StandardUsage.js","sourceRoot":"","sources":["../../../src/TestComponents/Persona/StandardUsage.tsx"],"names":[],"mappings":"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"}

package/lib/TestComponents/Persona/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Persona/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/lib/TestComponents/Persona/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TestComponents/Persona/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/lib/TestComponents/Persona/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Persona/styles.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AAEtC,eAAO,MAAM,aAAa,gLACqJ,CAAC;AAEhL,eAAO,MAAM,eAAe,oFAAoF,CAAC"}

package/lib/TestComponents/Persona/styles.js

@@ -0,0 +1,4 @@
+export * from '../PersonaCoin/styles';
+export const satyaImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/MS-Exec-Nadella-Satya-2017-08-31-22_%28cropped%29.jpg/330px-MS-Exec-Nadella-Satya-2017-08-31-22_%28cropped%29.jpg';
+export const michaelImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/3/31/Michael_Jackson_in_1988.jpg';
+//# sourceMappingURL=styles.js.map

package/lib/TestComponents/Persona/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/TestComponents/Persona/styles.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AAEtC,MAAM,CAAC,MAAM,aAAa,GACxB,6KAA6K,CAAC;AAEhL,MAAM,CAAC,MAAM,eAAe,GAAG,iFAAiF,CAAC"}

package/lib/TestComponents/PersonaCoin/CustomizeUsage.android.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizeUsage.android.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/PersonaCoin/CustomizeUsage.android.tsx"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/lib/TestComponents/PersonaCoin/CustomizeUsage.android.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizeUsage.android.js","sourceRoot":"","sources":["../../../src/TestComponents/PersonaCoin/CustomizeUsage.android.tsx"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/lib/TestComponents/PersonaCoin/CustomizeUsage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizeUsage.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/PersonaCoin/CustomizeUsage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAsJlC,CAAC"}

package/lib/TestComponents/PersonaCoin/CustomizeUsage.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizeUsage.ios.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/PersonaCoin/CustomizeUsage.ios.tsx"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/lib/TestComponents/PersonaCoin/CustomizeUsage.ios.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizeUsage.ios.js","sourceRoot":"","sources":["../../../src/TestComponents/PersonaCoin/CustomizeUsage.ios.tsx"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}

package/lib/TestComponents/PersonaCoin/CustomizeUsage.js

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { Switch, View, Text, TextInput } from 'react-native';
+import { PersonaCoin } from '@fluentui/react-native';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { steveBallmerPhotoUrl } from './styles';
+import { AlignmentPicker } from '../Common/AlignmentPicker';
+import { Slider } from '../Common/Slider';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+const getThemedStyles = themedStyleSheet((t) => {
+    return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
+});
+export const CustomizeUsage = () => {
+    const [showImage, setShowImage] = React.useState(true);
+    const [coinColor, setCoinColor] = React.useState();
+    const [textColor, setTextColor] = React.useState();
+    const [physicalSize, setPhysicalSize] = React.useState(80);
+    const [iconSize, setIconSize] = React.useState(24);
+    const [iconStrokeWidth, setIconStrokeWidth] = React.useState(2);
+    const [iconStrokeColor, setIconStrokeColor] = React.useState(undefined);
+    const [initialsSize, setInitialsSize] = React.useState(14);
+    const [horizontalAlignment, setHorizontalAlignment] = React.useState();
+    const [verticalAlignment, setVerticalAlignment] = React.useState();
+    const [ringColor, setRingColor] = React.useState('red');
+    const [ringBackgroundColor, setRingBackgroundColor] = React.useState(undefined);
+    const [showRing, setShowRing] = React.useState(true);
+    const [transparent, setTransparent] = React.useState(false);
+    const theme = useTheme();
+    const textBoxBorderStyle = getThemedStyles(theme);
+    const CustomizedPersonaCoin = React.useMemo(() => {
+        const tokens = {
+            backgroundColor: coinColor,
+            color: textColor,
+            horizontalIconAlignment: horizontalAlignment,
+            verticalIconAlignment: verticalAlignment,
+            iconSize: iconSize,
+            iconStrokeWidth: iconStrokeWidth,
+            iconStrokeColor: iconStrokeColor,
+            initialsSize: initialsSize,
+            coinSize: physicalSize,
+        };
+        return PersonaCoin.customize({ tokens });
+    }, [
+        coinColor,
+        textColor,
+        horizontalAlignment,
+        verticalAlignment,
+        iconSize,
+        iconStrokeWidth,
+        iconStrokeColor,
+        initialsSize,
+        physicalSize,
+    ]);
+    return (React.createElement(View, { style: commonStyles.root },
+        React.createElement(View, { style: commonStyles.settings },
+            React.createElement(View, { style: commonStyles.switch },
+                React.createElement(Text, null, "Show image"),
+                React.createElement(Switch, { value: showImage, onValueChange: setShowImage })),
+            React.createElement(View, { style: commonStyles.switch },
+                React.createElement(Text, null, "Show rings"),
+                React.createElement(Switch, { value: showRing, onValueChange: setShowRing })),
+            React.createElement(View, { style: commonStyles.switch },
+                React.createElement(Text, null, "Transparent Ring"),
+                React.createElement(Switch, { value: transparent, onValueChange: setTransparent })),
+            React.createElement(TextInput, { accessibilityLabel: "Background color", style: textBoxBorderStyle.textbox, placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: (e) => {
+                    setCoinColor(e.nativeEvent.text);
+                } }),
+            React.createElement(TextInput, { accessibilityLabel: "Initials text color", style: textBoxBorderStyle.textbox, placeholder: "Initials text color", blurOnSubmit: true, onSubmitEditing: (e) => {
+                    setTextColor(e.nativeEvent.text);
+                } }),
+            React.createElement(TextInput, { accessibilityLabel: "Icon stroke color", style: textBoxBorderStyle.textbox, placeholder: "Icon stroke color", blurOnSubmit: true, onSubmitEditing: (e) => {
+                    setIconStrokeColor(e.nativeEvent.text);
+                } }),
+            React.createElement(TextInput, { accessibilityLabel: "Ring color", style: textBoxBorderStyle.textbox, placeholder: "Ring color", blurOnSubmit: true, onSubmitEditing: (e) => {
+                    setRingColor(e.nativeEvent.text);
+                } }),
+            React.createElement(TextInput, { accessibilityLabel: "Ring background color", style: textBoxBorderStyle.textbox, placeholder: "Ring background color", blurOnSubmit: true, onSubmitEditing: (e) => {
+                    setRingBackgroundColor(e.nativeEvent.text);
+                } }),
+            React.createElement(AlignmentPicker, { style: commonStyles.header, label: "Horizontal icon alignment", onSelectionChange: setHorizontalAlignment }),
+            React.createElement(AlignmentPicker, { style: commonStyles.header, label: "Vertical icon alignment", onSelectionChange: setVerticalAlignment }),
+            React.createElement(Text, null, "Coin size"),
+            React.createElement(Slider, { minimum: 8, maximum: 200, initialValue: 80, style: commonStyles.vmargin, onChange: setPhysicalSize }),
+            React.createElement(Text, null, "Icon size"),
+            React.createElement(Slider, { minimum: 8, maximum: 100, initialValue: 24, style: commonStyles.vmargin, onChange: setIconSize }),
+            React.createElement(Text, null, "Icon stroke width"),
+            React.createElement(Slider, { minimum: 0, maximum: 8, initialValue: 2, style: commonStyles.vmargin, onChange: setIconStrokeWidth }),
+            React.createElement(Text, null, "Font size"),
+            React.createElement(Slider, { minimum: 5, maximum: 50, initialValue: 14, style: commonStyles.vmargin, onChange: setInitialsSize })),
+        React.createElement(CustomizedPersonaCoin, { initials: "SB", imageDescription: "Former CEO of Microsoft", presence: "blocked", imageUrl: showImage ? steveBallmerPhotoUrl : undefined, ring: showRing
+                ? {
+                    ringColor,
+                    ringBackgroundColor,
+                    ringThickness: 4,
+                    innerGap: 4,
+                    transparent,
+                }
+                : undefined })));
+};
+//# sourceMappingURL=CustomizeUsage.js.map

package/lib/TestComponents/PersonaCoin/CustomizeUsage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizeUsage.js","sourceRoot":"","sources":["../../../src/TestComponents/PersonaCoin/CustomizeUsage.tsx"],"names":[],"mappings":"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"}

package/lib/TestComponents/PersonaCoin/CustomizeUsage.mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizeUsage.mobile.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuD/B,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAuGlC,CAAC"}

package/lib/TestComponents/PersonaCoin/CustomizeUsage.mobile.js

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { Switch, View, Text, TextInput, StyleSheet } from 'react-native';
+import { PersonaCoin } from '@fluentui/react-native';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import Slider from '@react-native-community/slider';
+import { steveBallmerPhotoUrl } from './styles';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+const styles = StyleSheet.create({ slider: { ...commonStyles.vmargin, flex: 1 } });
+const StyledSlider = (props) => {
+    const { title, min, max, initial, onChange, current, step } = props;
+    const theme = useTheme();
+    return (React.createElement(View, { style: { flexDirection: 'row' } },
+        React.createElement(Text, { style: { flex: 0.5, color: theme.colors.inputText } }, title),
+        React.createElement(Slider, { step: step || 1, minimumValue: min, maximumValue: max, value: initial, style: styles.slider, onValueChange: onChange }),
+        React.createElement(Text, { style: { flex: 0.2, color: theme.colors.inputText } }, current)));
+};
+const StyledTextInput = (props) => {
+    const theme = useTheme();
+    const textInputStyles = [
+        commonStyles.textBox,
+        { flex: 1, marginHorizontal: 5, borderColor: theme.colors.disabledBodyText, color: theme.colors.inputText },
+    ];
+    return (React.createElement(TextInput, { accessibilityLabel: props.placeholder, style: textInputStyles, placeholderTextColor: theme.colors.disabledBodyText, blurOnSubmit: true, ...props }));
+};
+const StyledSwitch = (props) => {
+    const { title, value, onChange } = props;
+    const theme = useTheme();
+    return (React.createElement(View, { style: commonStyles.switch },
+        React.createElement(Text, { style: { color: theme.colors.inputText, flex: 1 } }, title),
+        React.createElement(Switch, { style: { flex: 1 }, value: value, onValueChange: onChange })));
+};
+export const CustomizeUsage = () => {
+    const [showImage, setShowImage] = React.useState(true);
+    const [showRings, setShowRings] = React.useState(true);
+    const [showPresence, setShowPresence] = React.useState(true);
+    const [showColoredBackground, setShowColoredBackground] = React.useState(false);
+    const [transparent, setTransparent] = React.useState(false);
+    const [coinColor, setCoinColor] = React.useState('green');
+    const [textColor, setTextColor] = React.useState('white');
+    const [coinSize, setCoinsize] = React.useState(88);
+    const [ringThickness, setRingThickness] = React.useState(4);
+    const [innerGap, setInnerGap] = React.useState(4);
+    const [iconSize, setIconSize] = React.useState(20);
+    const [iconStrokeWidth, setIconStrokeWidth] = React.useState(4);
+    const [ringColor, setRingColor] = React.useState('green');
+    const [ringBackgroundColor, setRingBackgroundColor] = React.useState(undefined);
+    const CustomizedPersonaCoin = React.useMemo(() => {
+        const tokens = {
+            backgroundColor: coinColor,
+            color: textColor,
+            ring: { ringColor: 'red' },
+            coinSize: coinSize,
+            iconSize: iconSize,
+            iconStrokeWidth: iconStrokeWidth,
+        };
+        return PersonaCoin.customize({ tokens });
+    }, [coinColor, textColor, coinSize, iconSize, iconStrokeWidth]);
+    return (React.createElement(View, { style: { flexDirection: 'column', padding: 10, backgroundColor: showColoredBackground ? 'gray' : 'transparent' } },
+        React.createElement(View, { style: { flexDirection: 'row', padding: 20, alignItems: 'center' } },
+            React.createElement(View, { style: { width: '35%', alignItems: 'center' } },
+                React.createElement(CustomizedPersonaCoin, { initials: "SB", imageDescription: "Photo of Satya Nadella", imageUrl: showImage ? steveBallmerPhotoUrl : undefined, presence: showPresence && iconSize ? 'away' : undefined, ring: showRings && ringThickness
+                        ? {
+                            ringColor,
+                            ringBackgroundColor,
+                            ringThickness,
+                            innerGap,
+                            transparent,
+                        }
+                        : undefined })),
+            React.createElement(View, { style: { width: '50%', marginLeft: 30 } },
+                React.createElement(StyledSwitch, { title: "Change Background", value: showColoredBackground, onChange: setShowColoredBackground }),
+                React.createElement(StyledSwitch, { title: "Show Image", value: showImage, onChange: setShowImage }),
+                React.createElement(StyledSwitch, { title: "Show Presence", value: showPresence, onChange: setShowPresence }),
+                React.createElement(StyledSwitch, { title: "Show Rings", value: showRings, onChange: setShowRings }),
+                React.createElement(StyledSwitch, { title: "Show transparent rings", value: transparent, onChange: setTransparent }))),
+        React.createElement(View, null,
+            React.createElement(StyledSlider, { min: 8, max: 120, initial: 88, onChange: setCoinsize, current: coinSize, step: 8, title: "coinSize" }),
+            React.createElement(StyledSlider, { min: 0, max: 8, initial: 4, onChange: setRingThickness, current: ringThickness, title: "ringThickness" }),
+            React.createElement(StyledSlider, { min: 0, max: 8, initial: 4, onChange: setInnerGap, current: innerGap, title: "innerGap" }),
+            React.createElement(StyledSlider, { min: 0, max: 28, initial: 20, onChange: setIconSize, current: iconSize, step: 4, title: "iconSize" }),
+            React.createElement(StyledSlider, { min: 2, max: 8, initial: 4, onChange: setIconStrokeWidth, current: iconStrokeWidth, title: "iconStrokeWidth" }),
+            React.createElement(View, { style: { flexDirection: 'row' } },
+                React.createElement(StyledTextInput, { placeholder: "Ring glow color", onSubmitEditing: (e) => {
+                        setRingColor(e.nativeEvent.text);
+                    } }),
+                React.createElement(StyledTextInput, { placeholder: "Ring background color", onSubmitEditing: (e) => {
+                        setRingBackgroundColor(e.nativeEvent.text);
+                    } })),
+            React.createElement(View, { style: { flexDirection: 'row' } },
+                React.createElement(StyledTextInput, { placeholder: "Background color", onSubmitEditing: (e) => {
+                        setCoinColor(e.nativeEvent.text);
+                    } }),
+                React.createElement(StyledTextInput, { placeholder: "Initials text color", onSubmitEditing: (e) => {
+                        setTextColor(e.nativeEvent.text);
+                    } })))));
+};
+//# sourceMappingURL=CustomizeUsage.mobile.js.map

package/lib/TestComponents/PersonaCoin/CustomizeUsage.mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomizeUsage.mobile.js","sourceRoot":"","sources":["../../../src/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx"],"names":[],"mappings":"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"}

package/lib/TestComponents/PersonaCoin/PersonaCoinTest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonaCoinTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/PersonaCoin/PersonaCoinTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAYnC,CAAC"}