@fluentui-react-native/tester 0.170.13 → 0.170.15

package/src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { View, TextInput, Platform } from 'react-native';
+
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import type { Theme } from '@fluentui-react-native/theme-types';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+
+import { commonTestStyles as commonStyles } from '../Common/styles';
+
+function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
+  console.log(isChecked);
+}
+
+const CircleColorCheckbox = Checkbox.customize({
+  checked: {
+    checkboxBackgroundColor: 'green',
+    checkboxBorderColor: 'green',
+    checkmarkColor: 'white',
+  },
+});
+
+const HoverCheckbox = Checkbox.customize({
+  hovered: {
+    checkmarkOpacity: 1,
+  },
+});
+
+const BigLabelCheckbox = Checkbox.customize({
+  label: {
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+});
+
+const ComposedCheckbox = Checkbox.compose({
+  slotProps: {
+    label: { style: { color: 'hotpink' } },
+  },
+});
+
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
+});
+
+export const TokenCheckbox: React.FunctionComponent = () => {
+  const [checkboxColor, setCheckboxColor] = React.useState('blue');
+  const [checkmarkColor, setCheckmarkColor] = React.useState('white');
+
+  const BlueCheckbox = Checkbox.customize({
+    checked: {
+      checkboxBackgroundColor: checkboxColor,
+      checkboxBorderColor: checkboxColor,
+      checkmarkColor: checkmarkColor,
+    },
+  });
+
+  const theme = useTheme();
+  const textBoxBorderStyle = getThemedStyles(theme);
+
+  return (
+    <View>
+      {Platform.OS !== 'android' && (
+        <>
+          <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} />
+          <CircleColorCheckbox
+            label="A circular token-customized checkbox"
+            shape="circular"
+            onChange={onChangeUncontrolled}
+            defaultChecked
+          />
+        </>
+      )}
+
+      <BigLabelCheckbox label="A checkbox with a bold large font label" />
+      <ComposedCheckbox label="A checkbox with a hot pink label and no padding" />
+
+      <BlueCheckbox
+        label="Token-customized checkbox. Customizable below."
+        onChange={onChangeUncontrolled}
+        labelPosition="before"
+        defaultChecked={false}
+      />
+      <TextInput
+        accessibilityLabel="Background color"
+        style={textBoxBorderStyle.textbox}
+        placeholder="Background color"
+        blurOnSubmit={true}
+        onSubmitEditing={(e) => {
+          setCheckboxColor(e.nativeEvent.text);
+        }}
+      />
+
+      <TextInput
+        accessibilityLabel="Checkmark color"
+        style={textBoxBorderStyle.textbox}
+        placeholder="Checkmark color"
+        blurOnSubmit={true}
+        onSubmitEditing={(e) => {
+          setCheckmarkColor(e.nativeEvent.text);
+        }}
+      />
+    </View>
+  );
+};