ferns-ui 2.0.0-beta.2 → 2.0.0-beta.5

package/src/Modal.tsx

@@ -1,14 +1,11 @@
 import React, {FC, useEffect, useRef} from "react";
-import {Dimensions, DimensionValue, Modal as RNModal, Pressable, View} from "react-native";
+import {Dimensions, DimensionValue, Pressable, Modal as RNModal, View} from "react-native";
 import ActionSheet, {ActionSheetRef} from "react-native-actions-sheet";
-import {
-  PanGestureHandler,
-  PanGestureHandlerStateChangeEvent,
-  State,
-} from "react-native-gesture-handler";
+import {Gesture, GestureDetector} from "react-native-gesture-handler";
+import {runOnJS} from "react-native-reanimated";
 
 import {Button} from "./Button";
-import {ModalProps} from "./Common";
+import type {ModalProps} from "./Common";
 import {Heading} from "./Heading";
 import {Icon} from "./Icon";
 import {isMobileDevice} from "./MediaQuery";
@@ -129,7 +126,13 @@ const ModalContent: FC<{
         </View>
       )}
       {children && (
-        <View style={{marginTop: text ? 0 : 12, width: "100%", flex: isMobile ? undefined : 1}}>
+        <View
+          style={{
+            marginTop: text ? 0 : 12,
+            width: "100%",
+            flex: isMobile ? undefined : 1,
+          }}
+        >
           {children}
         </View>
       )}
@@ -163,6 +166,7 @@ const ModalContent: FC<{
 
 export const Modal: FC<ModalProps> = ({
   children,
+  persistOnBackgroundClick = false,
   primaryButtonDisabled = false,
   primaryButtonText,
   secondaryButtonText,
@@ -184,23 +188,28 @@ export const Modal: FC<ModalProps> = ({
     }
   };
 
-  const handlePrimaryButtonClick = (value?: Parameters<NonNullable<ModalProps["primaryButtonOnClick"]>>[0]) => {
+  const handlePrimaryButtonClick = (
+    value?: Parameters<NonNullable<ModalProps["primaryButtonOnClick"]>>[0]
+  ) => {
     if (visible && primaryButtonOnClick) {
       return primaryButtonOnClick(value);
     }
   };
 
-  const handleSecondaryButtonClick = (value?: Parameters<NonNullable<ModalProps["secondaryButtonOnClick"]>>[0]) => {
+  const handleSecondaryButtonClick = (
+    value?: Parameters<NonNullable<ModalProps["secondaryButtonOnClick"]>>[0]
+  ) => {
     if (visible && secondaryButtonOnClick) {
       return secondaryButtonOnClick(value);
     }
   };
 
-  const onHandlerStateChange = ({nativeEvent}: PanGestureHandlerStateChangeEvent) => {
-    if (nativeEvent.state === State.END && nativeEvent.translationY > 100) {
-      handleDismiss();
+  const dragToClose = Gesture.Pan().onEnd((event) => {
+    if (event.translationY > 20) {
+      // Gesture callbacks run on the UI thread, runOnJS is required to safely invoke handleDismiss on the JS thread
+      runOnJS(handleDismiss)();
     }
-  };
+  });
 
   // Open the action sheet ref when the visible prop changes.
   useEffect(() => {
@@ -213,6 +222,7 @@ export const Modal: FC<ModalProps> = ({
   const sizePx = getModalSize(size);
 
   const modalContentProps = {
+    persistOnBackgroundClick,
     title,
     subtitle,
     text,
@@ -229,13 +239,22 @@ export const Modal: FC<ModalProps> = ({
 
   if (isMobile) {
     return (
-      <ActionSheet ref={actionSheetRef} onClose={handleDismiss}>
-        <PanGestureHandler onHandlerStateChange={onHandlerStateChange}>
-          <View>
+      <ActionSheet
+        ref={actionSheetRef}
+        closeOnTouchBackdrop={!persistOnBackgroundClick}
+        // Disable ActionSheet's built-in gestures to avoid conflicts with scrolling
+        gestureEnabled={false}
+        onClose={handleDismiss}
+      >
+        <View>
+          {/* Attach our own swipe-to-dismiss gesture to the top handle */}
+          <GestureDetector gesture={dragToClose}>
             <View
               accessibilityHint="Pull down to close the modal"
               aria-label="Pull down bar"
               aria-role="adjustable"
+              // add hitSlop to make the bar easier to hit since it's small
+              hitSlop={{top: 20, bottom: 20, left: 50, right: 50}}
               style={{
                 justifyContent: "center",
                 alignItems: "center",
@@ -248,15 +267,33 @@ export const Modal: FC<ModalProps> = ({
                 marginTop: 10,
               }}
             />
-            <ModalContent {...modalContentProps}>{children}</ModalContent>
-          </View>
-        </PanGestureHandler>
+          </GestureDetector>
+
+          <ModalContent {...modalContentProps}>{children}</ModalContent>
+        </View>
       </ActionSheet>
     );
   } else {
     return (
       <RNModal animationType="slide" transparent visible={visible} onRequestClose={handleDismiss}>
-        <ModalContent {...modalContentProps}>{children}</ModalContent>
+        <Pressable
+          style={{
+            flex: 1,
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+          onPress={persistOnBackgroundClick ? undefined : handleDismiss}
+        >
+          <Pressable
+            style={{cursor: "auto"}}
+            onPress={(e) => {
+              persistOnBackgroundClick ? null : e.stopPropagation();
+            }}
+          >
+            <ModalContent {...modalContentProps}>{children}</ModalContent>
+          </Pressable>
+        </Pressable>
       </RNModal>
     );
   }

package/src/NumberField.tsx

@@ -24,8 +24,8 @@ export const NumberField: FC<NumberFieldProps> = ({
       if (!v) {
         return;
       }
-      const num = type === "number" ? parseInt(v) : parseFloat(v);
-      if (isNaN(num) || (type === "number" && v.match(/[^0-9]/) !== null)) {
+      const num = type === "number" ? parseInt(v, 10) : parseFloat(v);
+      if (Number.isNaN(num) || (type === "number" && v.match(/[^0-9]/) !== null)) {
         return "Value must be an integer";
       } else if (
         (type === "decimal" && v.match(/[^0-9.]+/) !== null) ||
@@ -47,13 +47,19 @@ export const NumberField: FC<NumberFieldProps> = ({
   // Only return the value if it is a valid number
   const localOnChange = useCallback(
     (v: string) => {
-      setValue(v);
+      if (type === "decimal" && v === ".") {
+        // if type is decimal and dot is the first character add 0 before it
+        setValue("0.");
+        rest.onChange("0.");
+        return;
+      }
       const err = getError(v);
       if (!err) {
+        setValue(v);
         rest.onChange(v);
       }
     },
-    [getError, rest]
+    [getError, rest, type]
   );
 
   return <TextField {...rest} errorText={error} value={value} onChange={localOnChange} />;

package/src/NumberPickerActionSheet.tsx

@@ -9,16 +9,12 @@ import {NumberPickerActionSheetProps} from "./Common";
 
 const PICKER_HEIGHT = 104;
 
-interface NumberPickerActionSheetState {}
+type NumberPickerActionSheetState = {};
 
 export class NumberPickerActionSheet extends React.Component<
   NumberPickerActionSheetProps,
   NumberPickerActionSheetState
 > {
-  constructor(props: NumberPickerActionSheetProps) {
-    super(props);
-  }
-
   render() {
     return (
       <ActionSheet ref={this.props.actionSheetRef} bounceOnOpen gestureEnabled>

package/src/Page.tsx

@@ -47,7 +47,7 @@ export class Page extends React.Component<PageProps, {}> {
             <Button
               text={this.props.rightButton}
               variant="muted"
-              onClick={() => this.props.rightButtonOnClick && this.props.rightButtonOnClick()}
+              onClick={() => this.props.rightButtonOnClick?.()}
             />
           </Box>
         )}

package/src/Pagination.tsx

@@ -11,12 +11,7 @@ const PaginationButton: FC<{
   onClick: () => void;
   totalPages?: number;
   page?: number;
-}> = ({
-  type,
-  onClick,
-  totalPages = 1,
-  page = 1,
-}) => {
+}> = ({type, onClick, totalPages = 1, page = 1}) => {
   let icon: IconName;
   let disabled = false;
 
@@ -56,11 +51,7 @@ const PaginationNumber: FC<{
   number: number | "more";
   current: boolean;
   onClick: () => void;
-}> = ({
-  number,
-  current,
-  onClick,
-}) => {
+}> = ({number, current, onClick}) => {
   // Shortcut to make rendering the number buttons easier.
   if (number === "more") {
     return <PaginationButton type="more" onClick={() => {}} />;

package/src/Permissions.ts

@@ -4,8 +4,8 @@
 // import Permissions from "react-native-permissions";
 import {PermissionKind, PermissionStatus} from "./Common";
 
-export async function requestPermissions(kind: PermissionKind): Promise<PermissionStatus> {
-  return new Promise(async (resolve, reject) => {
+export async function requestPermissions(_kind: PermissionKind): Promise<PermissionStatus> {
+  return new Promise((_resolve, _reject) => {
     return "denied";
   });
   // const userPropertyKey = `PermissionsFor${capitalize(kind)}`;

package/src/PickerSelect.tsx

@@ -201,7 +201,7 @@ export function RNPickerSelect({
       Keyboard.dismiss();
     }
 
-    setAnimationType(modalProps && modalProps?.animationType ? modalProps?.animationType : "slide");
+    setAnimationType(modalProps?.animationType ? modalProps?.animationType : "slide");
 
     triggerOpenCloseCallbacks();
 

package/src/SectionDivider.tsx

@@ -1,6 +1,6 @@
-import {useTheme} from "./Theme";
 import React from "react";
 import {View} from "react-native";
+import {useTheme} from "./Theme";
 
 export const SectionDivider: React.FC<{}> = () => {
   const {theme} = useTheme();

package/src/SegmentedControl.tsx

@@ -24,7 +24,9 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
   }, []);
 
   const handleNext = useCallback(() => {
-    setStartIndex((prev) => Math.min(items.length - (maxItems ?? items.length), prev + (maxItems ?? 4)));
+    setStartIndex((prev) =>
+      Math.min(items.length - (maxItems ?? items.length), prev + (maxItems ?? 4))
+    );
   }, [items.length, maxItems]);
 
   const visibleItems = maxItems ? items.slice(startIndex, startIndex + maxItems) : items;

package/src/Signature.native.tsx

@@ -21,14 +21,14 @@ export const Signature: FC<Props> = ({onChange, onStart, onEnd}: Props) => {
   };
 
   const onBegin = () => {
-    onStart && onStart();
+    onStart?.();
   };
 
   // Called after end of stroke. Kind of goofy if you ask me,
   // but you need this in order to trigger the 'onOK' callback that gives us the actual image.
   const handleEnd = () => {
     ref.current?.readSignature();
-    onEnd && onEnd();
+    onEnd?.();
   };
 
   return (

package/src/SignatureField.tsx

@@ -64,10 +64,10 @@ export const SignatureField = ({
         <Signature
           onChange={onChange}
           onEnd={() => {
-            onEnd && onEnd();
+            onEnd?.();
           }}
           onStart={() => {
-            onStart && onStart();
+            onStart?.();
           }}
         />
       </View>

package/src/Slider.tsx

@@ -1,6 +1,5 @@
 import SliderComponent from "@react-native-community/slider";
 import React, {FC} from "react";
-import {View} from "react-native";
 
 import {Box} from "./Box";
 import {IconName, SliderProps, ValueMappingItem} from "./Common";
@@ -16,11 +15,11 @@ const getCurrentMapping = (map: ValueMappingItem[], value: number) => {
   if (!map || map.length === 0) {
     return null;
   }
-  
+
   // Find the option with the closest value
   let closestOption = map[0];
   let closestDistance = Math.abs(value - closestOption.value);
-  
+
   for (const option of map) {
     const distance = Math.abs(value - option.value);
     if (distance < closestDistance) {
@@ -28,7 +27,7 @@ const getCurrentMapping = (map: ValueMappingItem[], value: number) => {
       closestOption = option;
     }
   }
-  
+
   return closestOption;
 };
 
@@ -49,9 +48,9 @@ const getCenterContent = (
       </Text>
     );
   }
-  
+
   const currentOption = getCurrentMapping(valueMapping, value);
-  
+
   if (useIcons) {
     return (
       <Icon
@@ -61,7 +60,7 @@ const getCenterContent = (
       />
     );
   }
-  
+
   return (
     <Text align="center" color={disabled ? "secondaryLight" : "primary"} size="2xl">
       {currentOption?.label}
@@ -72,7 +71,7 @@ const getCenterContent = (
 const getSliderContent = (
   slider: React.ReactElement,
   inlineLabels: boolean,
-  labels?: SliderProps['labels']
+  labels?: SliderProps["labels"]
 ): React.ReactElement => {
   if (inlineLabels && labels?.min && labels?.max) {
     return (
@@ -154,9 +153,9 @@ export const Slider: FC<SliderProps> = ({
     thumbStyle: {
       width: 48,
       height: 48,
-      backgroundColor: 'white',
+      backgroundColor: "white",
       borderRadius: 24,
-      shadowColor: '#000',
+      shadowColor: "#000",
       shadowOffset: {
         width: 0,
         height: 2,
@@ -189,11 +188,7 @@ export const Slider: FC<SliderProps> = ({
     <Box>
       {Boolean(title) && <FieldTitle text={title!} />}
       <Box direction="column" gap={showSelection ? 2 : 0}>
-        {showSelection && (
-          <Box alignItems="center">
-            {centerContent}
-          </Box>
-        )}
+        {showSelection && <Box alignItems="center">{centerContent}</Box>}
         {sliderContent}
       </Box>
       {Boolean(helperText && !errorText) && <FieldHelperText text={helperText!} />}
@@ -201,5 +196,3 @@ export const Slider: FC<SliderProps> = ({
     </Box>
   );
 };
-
-

package/src/SplitPage.native.tsx

@@ -9,7 +9,6 @@ import {SplitPageProps} from "./Common";
 import {FlatList} from "./FlatList";
 import {IconButton} from "./IconButton";
 import {Spinner} from "./Spinner";
-import {useTheme} from "./Theme";
 import {Unifier} from "./Unifier";
 
 export const SplitPage = ({
@@ -26,7 +25,6 @@ export const SplitPage = ({
   bottomNavBarHeight,
   showItemList,
 }: SplitPageProps) => {
-  const {theme} = useTheme();
   const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
 
   // flattenChildren is necessary to pull children from a React Fragment. Without this,
@@ -92,7 +90,7 @@ export const SplitPage = ({
           paddingBottom: bottomNavBarHeight,
         }}
       >
-        {renderListViewHeader && renderListViewHeader()}
+        {renderListViewHeader?.()}
         <FlatList
           data={listViewData}
           extraData={listViewExtraData}
@@ -117,7 +115,7 @@ export const SplitPage = ({
             onClick={() => onItemDeselect()}
           />
         </Box>
-        {renderContent && renderContent(selectedId)}
+        {renderContent?.(selectedId)}
       </Box>
     );
   };

package/src/SplitPage.tsx

@@ -95,7 +95,7 @@ export const SplitPage = ({
           flexDirection: "column",
         }}
       >
-        {renderListViewHeader && renderListViewHeader()}
+        {renderListViewHeader?.()}
         <FlatList
           data={listViewData}
           extraData={listViewExtraData}
@@ -109,7 +109,7 @@ export const SplitPage = ({
   const renderListContent = () => {
     return (
       <Box flex="grow" padding={2}>
-        {renderContent && renderContent(selectedId)}
+        {renderContent?.(selectedId)}
       </Box>
     );
   };
@@ -205,7 +205,7 @@ export const SplitPage = ({
           flexDirection: "column",
         }}
       >
-        {renderListViewHeader && renderListViewHeader()}
+        {renderListViewHeader?.()}
         <FlatList
           data={listViewData}
           extraData={listViewExtraData}
@@ -234,7 +234,7 @@ export const SplitPage = ({
             />
           </Box>
         )}
-        {renderContent && renderContent(selectedId)}
+        {renderContent?.(selectedId)}
       </Box>
     );
   };

package/src/TapToEdit.tsx

@@ -13,11 +13,7 @@ const TapToEditTitle: FC<{
   onlyShowHelperTextWhileEditing?: boolean;
   title: string;
   helperText?: string;
-}> = ({
-  title,
-  helperText,
-  onlyShowHelperTextWhileEditing,
-}) => {
+}> = ({title, helperText, onlyShowHelperTextWhileEditing}) => {
   return (
     <View style={{flex: 1, justifyContent: "center"}}>
       <Text bold>{title}</Text>
@@ -117,7 +113,7 @@ export const TapToEdit: FC<TapToEditProps> = ({
         </View>
         <View style={{gap: 16}}>
           <Field
-            grow={fieldProps?.type === "textarea" ? fieldProps.grow ?? true : undefined}
+            grow={fieldProps?.type === "textarea" ? (fieldProps.grow ?? true) : undefined}
             helperText={helperText}
             inputRef={
               ["text", "textarea", "url", "email", "number"].includes(fieldProps?.type)
@@ -210,7 +206,7 @@ export const TapToEdit: FC<TapToEditProps> = ({
         try {
           const url = new URL(value);
           displayValue = url?.hostname ?? value;
-        } catch (error) {
+        } catch (_error) {
           // Don't print an error message for empty values.
           if (value) {
             console.debug(`Invalid URL: $value`);

package/src/Text.tsx

@@ -8,7 +8,7 @@ import {
   useFonts,
 } from "@expo-google-fonts/nunito";
 import React from "react";
-import {Platform, Text as NativeText, TextStyle} from "react-native";
+import {Text as NativeText, Platform, TextStyle} from "react-native";
 
 import {TextProps} from "./Common";
 import {Hyperlink} from "./Hyperlink";