ferns-ui 0.47.10 → 1.0.0-beta.0

package/src/PickerSelect.tsx

@@ -38,31 +38,21 @@ import {
   View,
 } from "react-native";
 
+import {Icon} from "./Icon";
+import {useTheme} from "./Theme";
+
 export const defaultStyles = StyleSheet.create({
   viewContainer: {
     alignSelf: "stretch",
-  },
-  iconContainer: {
-    position: "absolute",
-    right: 0,
-  },
-  modalViewTop: {
-    flex: 1,
-  },
-  modalViewMiddle: {
-    height: 45,
     flexDirection: "row",
-    justifyContent: "space-between",
+    justifyContent: "center",
     alignItems: "center",
-    paddingHorizontal: 10,
-    backgroundColor: "#f8f8f8",
-    borderTopWidth: 1,
-    borderTopColor: "#dedede",
-    zIndex: 2,
-  },
-  chevronContainer: {
-    flexDirection: "row",
+    minHeight: 40,
+    width: "100%",
+    borderWidth: 1,
+    borderRadius: 4,
   },
+
   chevron: {
     width: 15,
     height: 15,
@@ -71,41 +61,10 @@ export const defaultStyles = StyleSheet.create({
     borderTopWidth: 1.5,
     borderRightWidth: 1.5,
   },
-  chevronUp: {
-    marginLeft: 11,
-    transform: [{translateY: 4}, {rotate: "-45deg"}],
-  },
-  chevronDown: {
-    marginLeft: 22,
-    transform: [{translateY: -5}, {rotate: "135deg"}],
-  },
+
   chevronActive: {
     borderColor: "#007aff",
   },
-  done: {
-    color: "#007aff",
-    fontWeight: "600",
-    fontSize: 17,
-    paddingTop: 1,
-    paddingRight: 11,
-  },
-  doneDepressed: {
-    fontSize: 19,
-  },
-  modalViewBottom: {
-    justifyContent: "center",
-    backgroundColor: "#d0d4da",
-  },
-  placeholder: {
-    color: "#c7c7cd",
-  },
-  headlessAndroidPicker: {
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    color: "transparent",
-    opacity: 0,
-  },
 });
 
 export interface RNPickerSelectProps {
@@ -115,7 +74,6 @@ export interface RNPickerSelectProps {
   placeholder?: any;
   disabled?: boolean;
   itemKey?: string | number;
-  style?: any;
   children?: any;
   onOpen?: () => void;
   useNativeAndroidPickerStyle?: boolean;
@@ -134,17 +92,12 @@ export interface RNPickerSelectProps {
   // TextInput props
   textInputProps?: any;
 
-  // Picker props
-  pickerProps?: any;
-
   // Touchable Done props (iOS only)
   touchableDoneProps?: any;
 
   // Touchable wrapper props
   touchableWrapperProps?: any;
 
-  // Custom Icon
-  Icon?: any;
   InputAccessoryView?: any;
 }
 
@@ -152,14 +105,9 @@ export function RNPickerSelect({
   onValueChange,
   value,
   items,
-  placeholder = {
-    label: "Select an item...",
-    value: null,
-    color: "#9EA0A4",
-  },
+  placeholder,
   disabled = false,
   itemKey,
-  style = defaultStyles,
   children,
   useNativeAndroidPickerStyle = true,
   fixAndroidTouchableBug = false,
@@ -171,10 +119,9 @@ export function RNPickerSelect({
   onClose,
   modalProps,
   textInputProps,
-  pickerProps,
   touchableDoneProps,
   touchableWrapperProps,
-  Icon,
+
   InputAccessoryView,
 }: RNPickerSelectProps) {
   const [selectedItem, setSelectedItem] = useState<any>();
@@ -182,6 +129,7 @@ export function RNPickerSelect({
   const [animationType, setAnimationType] = useState(undefined);
   const [orientation, setOrientation] = useState<"portrait" | "landscape">("portrait");
   const [doneDepressed, setDoneDepressed] = useState<boolean>(false);
+  const {theme} = useTheme();
 
   const options = useMemo(() => {
     if (isEqual(placeholder, {})) {
@@ -234,16 +182,6 @@ export function RNPickerSelect({
     setOrientation(nativeEvent.orientation);
   };
 
-  const getPlaceholderStyle = () => {
-    if (!isEqual(placeholder, {}) && selectedItem?.label === placeholder?.label) {
-      return {
-        ...defaultStyles.placeholder,
-        ...style?.placeholder,
-      };
-    }
-    return {};
-  };
-
   const triggerOpenCloseCallbacks = () => {
     if (!showPicker && onOpen) {
       onOpen();
@@ -295,38 +233,62 @@ export function RNPickerSelect({
 
     return (
       <View
-        style={[defaultStyles.modalViewMiddle, style.modalViewMiddle]}
+        style={{
+          height: 45,
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          paddingHorizontal: 10,
+          backgroundColor: "#f8f8f8",
+          borderTopWidth: 1,
+          borderTopColor: "#dedede",
+          zIndex: 2,
+        }}
         testID="input_accessory_view"
       >
-        <View style={[defaultStyles.chevronContainer, style.chevronContainer]}>
-          <TouchableOpacity
-            activeOpacity={onUpArrow ? 0.5 : 1}
-            onPress={onUpArrow ? onUpArrowEvent : undefined}
-          >
-            <View
-              style={[
-                defaultStyles.chevron,
-                style.chevron,
-                defaultStyles.chevronUp,
-                style.chevronUp,
-                onUpArrow ? [defaultStyles.chevronActive, style.chevronActive] : {},
-              ]}
-            />
-          </TouchableOpacity>
-          <TouchableOpacity
-            activeOpacity={onDownArrow ? 0.5 : 1}
-            onPress={onDownArrow ? onDownArrowEvent : undefined}
-          >
-            <View
-              style={[
-                defaultStyles.chevron,
-                style.chevron,
-                defaultStyles.chevronDown,
-                style.chevronDown,
-                onDownArrow ? [defaultStyles.chevronActive, style.chevronActive] : {},
-              ]}
-            />
-          </TouchableOpacity>
+        <View
+          style={{
+            flexDirection: "row",
+          }}
+        >
+          {Boolean(onUpArrow) && (
+            <TouchableOpacity
+              accessibilityRole="button"
+              activeOpacity={onUpArrow ? 0.5 : 1}
+              onPress={onUpArrow ? onUpArrowEvent : undefined}
+            >
+              <View
+                // chevron up
+                style={[
+                  defaultStyles.chevron,
+                  {
+                    marginLeft: 11,
+                    transform: [{translateY: 4}, {rotate: "-45deg"}],
+                  },
+                  onUpArrow ? [defaultStyles.chevronActive] : {},
+                ]}
+              />
+            </TouchableOpacity>
+          )}
+          {Boolean(onDownArrow) && (
+            <TouchableOpacity
+              accessibilityRole="button"
+              activeOpacity={onDownArrow ? 0.5 : 1}
+              onPress={onDownArrow ? onDownArrowEvent : undefined}
+            >
+              <View
+                // chevron down
+                style={[
+                  defaultStyles.chevron,
+                  {
+                    marginLeft: 22,
+                    transform: [{translateY: -5}, {rotate: "135deg"}],
+                  },
+                  onDownArrow ? [defaultStyles.chevronActive] : {},
+                ]}
+              />
+            </TouchableOpacity>
+          )}
         </View>
         <Pressable
           hitSlop={{top: 4, right: 4, bottom: 4, left: 4}}
@@ -346,9 +308,18 @@ export function RNPickerSelect({
             <Text
               allowFontScaling={false}
               style={[
-                defaultStyles.done,
-                style.done,
-                doneDepressed ? [defaultStyles.doneDepressed, style.doneDepressed] : {},
+                {
+                  color: "#007aff",
+                  fontWeight: "600",
+                  fontSize: 17,
+                  paddingTop: 1,
+                  paddingRight: 11,
+                },
+                doneDepressed
+                  ? {
+                      fontSize: 19,
+                    }
+                  : {},
               ]}
               testID="done_text"
             >
@@ -361,41 +332,35 @@ export function RNPickerSelect({
   };
 
   const renderIcon = () => {
-    if (!Icon) {
+    // Icon only needed for iOS, web and android use default icons
+    if (Platform.OS !== "ios") {
       return null;
     }
 
     return (
-      <View
-        pointerEvents="none"
-        style={[defaultStyles.iconContainer, style.iconContainer]}
-        testID="icon_container"
-      >
-        <Icon testID="icon" />
+      <View style={{pointerEvents: "none"}} testID="icon_container">
+        <Icon color={disabled ? "secondaryLight" : "primary"} iconName="angle-down" size="sm" />
       </View>
     );
   };
 
   const renderTextInputOrChildren = () => {
-    const containerStyle =
-      Platform.OS === "ios" ? style.inputIOSContainer : style.inputAndroidContainer;
-
     if (children) {
-      return (
-        <View pointerEvents="box-only" style={containerStyle}>
-          {children}
-        </View>
-      );
+      return <View style={{pointerEvents: "box-only"}}>{children}</View>;
     }
 
     return (
-      <View pointerEvents="box-only" style={containerStyle}>
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          pointerEvents: "box-only",
+          width: "100%",
+        }}
+      >
         <TextInput
           editable={false}
-          style={[
-            Platform.OS === "ios" ? style.inputIOS : style.inputAndroid,
-            getPlaceholderStyle(),
-          ]}
+          style={{color: disabled ? theme.text.secondaryLight : theme.text.primary}}
           testID="text_input"
           value={selectedItem?.inputLabel ? selectedItem?.inputLabel : selectedItem?.label}
           {...textInputProps}
@@ -407,15 +372,26 @@ export function RNPickerSelect({
 
   const renderIOS = () => {
     return (
-      <View style={[defaultStyles.viewContainer, style.viewContainer]}>
+      <View
+        style={[
+          defaultStyles.viewContainer,
+          {
+            borderColor: theme.border.dark,
+            backgroundColor: theme.surface.base,
+          },
+          disabled && {
+            backgroundColor: theme.surface.neutralLight,
+          },
+        ]}
+      >
         <Pressable
           activeOpacity={1}
           style={{
             flexDirection: "row",
             justifyContent: "center",
             alignItems: "center",
-            minHeight: style?.minHeight || 50,
-            width: "100%",
+            minHeight: 40,
+            width: "95%",
           }}
           testID="ios_touchable_wrapper"
           onPress={() => {
@@ -435,7 +411,10 @@ export function RNPickerSelect({
           {...modalProps}
         >
           <Pressable
-            style={[defaultStyles.modalViewTop, style.modalViewTop]}
+            accessibilityRole="button"
+            style={{
+              flex: 1,
+            }}
             testID="ios_modal_top"
             onPress={() => {
               togglePicker(true);
@@ -444,16 +423,17 @@ export function RNPickerSelect({
           {renderInputAccessoryView()}
           <View
             style={[
-              defaultStyles.modalViewBottom,
+              {
+                justifyContent: "center",
+                backgroundColor: "#d0d4da",
+              },
               {height: orientation === "portrait" ? 215 : 162},
-              style.modalViewBottom,
             ]}
           >
             <Picker
               selectedValue={selectedItem?.value}
               testID="ios_picker"
               onValueChange={onValueChangeEvent}
-              {...pickerProps}
             >
               {renderPickerItems()}
             </Picker>
@@ -472,19 +452,23 @@ export function RNPickerSelect({
         onPress={onOpen}
         {...touchableWrapperProps}
       >
-        <View style={style.headlessAndroidContainer}>
+        <View>
           {renderTextInputOrChildren()}
           <Picker
             enabled={!disabled}
             selectedValue={selectedItem?.value}
             style={[
-              Icon ? {backgroundColor: "transparent"} : {}, // to hide native icon
-              defaultStyles.headlessAndroidPicker,
-              style.headlessAndroidPicker,
+              Platform.OS !== "web" ? {backgroundColor: "transparent"} : {}, // to hide native icon
+              {
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                color: "transparent",
+                opacity: 0,
+              },
             ]}
             testID="android_picker_headless"
             onValueChange={onValueChangeEvent}
-            {...pickerProps}
           >
             {renderPickerItems()}
           </Picker>
@@ -495,41 +479,75 @@ export function RNPickerSelect({
 
   const renderAndroidNativePickerStyle = () => {
     return (
-      <View style={[defaultStyles.viewContainer, style.viewContainer]}>
+      <View
+        style={[
+          defaultStyles.viewContainer,
+          {
+            height: 40,
+            borderColor: theme.border.dark,
+            backgroundColor: theme.surface.base,
+          },
+          disabled && {
+            backgroundColor: theme.surface.neutralLight,
+          },
+        ]}
+      >
         <Picker
           enabled={!disabled}
           selectedValue={selectedItem?.value}
           style={[
-            Icon ? {backgroundColor: "transparent"} : {}, // to hide native icon
-            style.inputAndroid,
-            {width: "100%"},
-            getPlaceholderStyle(),
+            Platform.OS !== "web" ? {backgroundColor: "transparent"} : {}, // to hide native icon
+            {width: "100%", color: theme.text.primary},
           ]}
           testID="android_picker"
           onValueChange={onValueChangeEvent}
-          {...pickerProps}
         >
           {renderPickerItems()}
         </Picker>
-        {renderIcon()}
       </View>
     );
   };
 
+  // TODO: Create custom React component for web in order to apply library style rules
   const renderWeb = () => {
     return (
-      <View style={[defaultStyles.viewContainer, style.viewContainer]}>
+      <View
+        style={[
+          defaultStyles.viewContainer,
+          {
+            borderColor: theme.border.dark,
+            backgroundColor: theme.surface.base,
+          },
+          disabled && {
+            backgroundColor: theme.surface.neutralLight,
+          },
+        ]}
+      >
         <Picker
           enabled={!disabled}
           selectedValue={selectedItem?.value}
-          style={[{width: "100%", height: "100%", border: "none"}, style.inputWeb]}
+          style={[
+            {
+              width: "100%",
+              height: "100%",
+              borderWidth: 0,
+              paddingHorizontal: 8,
+              paddingVertical: 8,
+              borderRadius: 4,
+              backgroundColor: theme.surface.base,
+              borderColor: "black",
+            },
+            disabled && {
+              color: theme.text.secondaryLight,
+              backgroundColor: theme.surface.neutralLight,
+              opacity: 1,
+            },
+          ]}
           testID="web_picker"
           onValueChange={onValueChangeEvent}
-          {...pickerProps}
         >
           {renderPickerItems()}
         </Picker>
-        {renderIcon()}
       </View>
     );
   };

package/src/Radio.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import {View} from "react-native";
+
+import {RadioProps} from "./Common";
+import {useTheme} from "./Theme";
+
+export const Radio = ({selected}: RadioProps): React.ReactElement => {
+  const {theme} = useTheme();
+  return (
+    <View
+      style={{
+        height: 16,
+        width: 16,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: theme.text.secondaryDark,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {selected ? (
+        <View
+          style={{
+            height: 10,
+            width: 10,
+            borderRadius: 6,
+            backgroundColor: theme.text.secondaryDark,
+          }}
+        />
+      ) : null}
+    </View>
+  );
+};

package/src/RadioField.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import {TouchableOpacity, View} from "react-native";
+
+import {RadioFieldProps} from "./Common";
+import {Heading} from "./Heading";
+import {isMobileDevice} from "./MediaQuery";
+import {Radio} from "./Radio";
+import {Text} from "./Text";
+
+export const RadioField = ({
+  title,
+  options,
+  value,
+  onChange,
+  variant = "rightText",
+}: RadioFieldProps): React.ReactElement => {
+  return (
+    <View style={{gap: isMobileDevice() ? 16 : 8}}>
+      <Heading size="sm">{title}</Heading>
+      {options.map((option) => (
+        <TouchableOpacity
+          key={option.key ?? option.value}
+          accessibilityHint={`Select ${option} from list of options`}
+          accessibilityLabel={option.label ?? option.value}
+          accessibilityRole="button"
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}
+          onPress={() => onChange(option.value)}
+        >
+          {variant === "leftText" && <Text>{option.label ?? option.value}</Text>}
+          <Radio key={option.key ?? option.value} selected={option.value === value} />
+          {variant === "rightText" && (
+            <View style={{marginRight: 0}}>
+              <Text>{option.label ?? option.value}</Text>
+            </View>
+          )}
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};