ferns-ui 0.4.3 → 0.6.0

package/src/Pog.tsx

@@ -5,125 +5,6 @@ import {Box} from "./Box";
 import {AllColors, IconPrefix, IconSize} from "./Common";
 import {Icon} from "./Icon";
 
-/*
-Originally based on https://github.com/pinterest/gestalt
-Forked, added type definitions, and added features.
-*/
-// TOOD: create styles
-// :root {
-//   --lightGray: #efefef;
-//   --gray: #8e8e8e;
-//   --darkGray: #111;
-// }
-
-// .pog {
-//   composes: circle from "./Borders.module.css";
-//   composes: flex from "./Layout.module.css";
-//   composes: itemsCenter from "./Layout.module.css";
-//   composes: justifyCenter from "./Layout.module.css";
-// }
-
-// .focused {
-//   composes: accessibilityOutlineFocus from "./Focus.module.css";
-// }
-
-// .selected {
-//   composes: darkGrayBg from "./Colors.module.css";
-// }
-
-// .transparent {
-//   composes: transparentBg from "./Colors.module.css";
-// }
-
-// .transparentDarkGray {
-//   composes: transparentDarkGrayBg from "./Colors.module.css";
-// }
-
-// .transparent.hovered,
-// .transparent.focused,
-// .white.hovered,
-// .white.focused {
-//   background-color: rgba(0, 0, 0, 0.06);
-// }
-
-// .transparent.active,
-// .white.active {
-//   background-color: rgba(0, 0, 0, 0.1);
-// }
-
-// .transparentDarkGray.hovered,
-// .transparentDarkGray.focused {
-//   background-color: var(--darkGray);
-// }
-
-// .transparentDarkGray.active {
-//   background-color: var(--darkGray);
-// }
-
-// .white {
-//   composes: whiteBg from "./Colors.module.css";
-// }
-
-// .white.hovered,
-// .white.focused {
-//   background-color: #f0f0f0;
-// }
-
-// .white.active {
-//   background-color: #e5e5e5;
-// }
-
-// .lightGray {
-//   composes: lightGrayBg from "./Colors.module.css";
-// }
-
-// .lightGray.hovered,
-// .lightGray.focused {
-//   background-color: #e2e2e2;
-// }
-
-// .lightGray.active {
-//   background-color: #dadada;
-// }
-
-// .gray {
-//   composes: grayBg from "./Colors.module.css";
-// }
-
-// .gray.hovered,
-// .gray.focused {
-//   background-color: #878787;
-// }
-
-// .gray.active {
-//   background-color: #828282;
-// }
-
-// .darkGray {
-//   composes: darkGrayBg from "./Colors.module.css";
-// }
-
-// .blue {
-//   composes: blueBg from "./Colors.module.css";
-// }
-
-// .blue.hovered,
-// .blue.focused {
-//   background-color: #4a8ad4;
-// }
-
-// .blue.active {
-//   background-color: #4a85c9;
-// }
-
-const styles = {
-  pog: "",
-  selected: "",
-  active: "",
-  focused: "",
-  hovered: "",
-};
-
 const SIZE_NAME_TO_PIXEL = {
   xs: 24,
   sm: 32,
@@ -132,7 +13,6 @@ const SIZE_NAME_TO_PIXEL = {
   xl: 56,
 };
 
-// type PogColor = "gray" | "darkGray" | "red" | "blue" | "white" | "orange";
 interface Props {
   active?: boolean;
   bgColor?: "transparent" | "transparentDarkGray" | "gray" | "lightGray" | "white" | "blue";
@@ -157,10 +37,7 @@ const defaultIconButtonIconColors = {
 
 export default function Pog(props: Props) {
   const {
-    active = false,
     bgColor = "transparent",
-    focused = false,
-    hovered = false,
     iconColor,
     icon,
     iconPrefix = "fas",
@@ -168,7 +45,6 @@ export default function Pog(props: Props) {
     size = "md",
   } = props;
 
-  const iconSize = SIZE_NAME_TO_PIXEL[size] / 2;
   const color =
     (selected && "white") ||
     iconColor ||

package/src/SelectList.tsx

@@ -5,7 +5,7 @@ import RNPickerSelect from "./PickerSelect";
 import {Unifier} from "./Unifier";
 
 // Use "" if you want to have an "unset" value.
-export type SelectListOptions = {label: string; value: string | number}[];
+export type SelectListOptions = {label: string; value: string}[];
 export interface SelectListProps extends FieldWithLabelsProps {
   id?: string;
   name?: string;
@@ -17,33 +17,29 @@ export interface SelectListProps extends FieldWithLabelsProps {
   placeholder?: string;
 }
 
-export class SelectList extends React.Component<SelectListProps, {}> {
-  state = {showing: false};
-
-  render() {
-    return (
-      <RNPickerSelect
-        items={this.props.options}
-        placeholder={{}}
-        style={{
-          viewContainer: {
-            flexDirection: "row",
-            justifyContent: "center",
-            alignItems: "center",
-            minHeight: 50,
-            width: "100%",
-            // Add padding so the border doesn't mess up layouts
-            paddingHorizontal: 6,
-            paddingVertical: 4,
-            borderColor: Unifier.theme.gray,
-            borderWidth: 1,
-            borderRadius: 5,
-            backgroundColor: Unifier.theme.white,
-          },
-        }}
-        value={this.props.value}
-        onValueChange={this.props.onChange}
-      />
-    );
-  }
+export function SelectList({options, value, onChange}: SelectListProps) {
+  return (
+    <RNPickerSelect
+      items={options}
+      placeholder={{}}
+      style={{
+        viewContainer: {
+          flexDirection: "row",
+          justifyContent: "center",
+          alignItems: "center",
+          minHeight: 50,
+          width: "100%",
+          // Add padding so the border doesn't mess up layouts
+          paddingHorizontal: 6,
+          paddingVertical: 4,
+          borderColor: Unifier.theme.gray,
+          borderWidth: 1,
+          borderRadius: 5,
+          backgroundColor: Unifier.theme.white,
+        },
+      }}
+      value={value}
+      onValueChange={onChange}
+    />
+  );
 }

package/src/SplitPage.tsx

@@ -3,9 +3,7 @@ import {ListRenderItemInfo, View} from "react-native";
 
 import {Box} from "./Box";
 import {Color} from "./Common";
-import {ErrorBoundary} from "./ErrorBoundary";
 import {FlatList} from "./FlatList";
-import {Icon} from "./Icon";
 import {IconButton} from "./IconButton";
 import {mediaQueryLargerThan} from "./MediaQuery";
 import {Spinner} from "./Spinner";

package/src/TapToEdit.tsx

@@ -1,48 +1,118 @@
-import React from "react";
+import React, {ReactElement, useState} from "react";
 
 import {Box} from "./Box";
 import {Button} from "./Button";
-import {TextFieldProps} from "./Common";
+import {BoxProps} from "./Common";
+import {Field, FieldProps} from "./Field";
 import {Icon} from "./Icon";
 import {Text} from "./Text";
-import {TextField} from "./TextField";
 
-interface TapToEditState {
-  showEdit: boolean;
+export interface TapToEditProps extends Omit<FieldProps, "handleChange"> {
+  title: string;
+  // Not required if not editable.
+  onSave?: (value: any) => void | Promise<void>;
+  // Defaults to true
+  editable?: boolean;
+  // For changing how the non-editing row renders
+  rowBoxProps?: Partial<BoxProps>;
+  transform?: (value: any) => string;
+  fieldComponent?: (setValue: () => void) => ReactElement;
 }
 
-export class TapToEdit extends React.Component<TextFieldProps, TapToEditState> {
-  state = {showEdit: false};
+export const TapToEdit = (props: TapToEditProps): ReactElement => {
+  const [editing, setEditing] = useState(false);
+  const [value, setValue] = useState(props.initialValue);
 
-  render() {
-    if (!this.state.showEdit) {
-      return (
-        <Box direction="row" display="flex" onClick={() => this.setState({showEdit: true})}>
-          <Box marginRight={2}>
-            <Icon color="primaryDark" name="edit" prefix="far" size="lg" />
-          </Box>
-          <Text>{this.props.children}</Text>
-        </Box>
-      );
-    } else {
-      return (
-        <Box>
-          <TextField {...this.props} />
-          <Box paddingY={1} width={100}>
+  const {title, editable = true, rowBoxProps, transform, fieldComponent, ...fieldProps} = props;
+  if (editing) {
+    return (
+      <Box direction="column" maxWidth="100%" paddingX={3} paddingY={2} width="100%">
+        {fieldComponent ? (
+          fieldComponent(setValue as any)
+        ) : (
+          <Field
+            handleChange={(_: string, val: any): void => setValue(val)}
+            label={props.title}
+            {...fieldProps}
+          />
+        )}
+        <Box direction="row">
+          <Button
+            color="blue"
+            inline
+            text="Save"
+            onClick={async (): Promise<void> => {
+              if (!props.onSave) {
+                console.error("No onSave provided for editable TapToEdit");
+              } else {
+                await props.onSave(value);
+              }
+              setEditing(false);
+            }}
+          />
+          <Box marginLeft={2}>
             <Button
-              color="primary"
+              color="red"
               inline
-              text="Save"
-              onClick={() => {
-                this.setState({showEdit: false});
-                if (this.props.onSubmitEditing) {
-                  this.props.onSubmitEditing();
-                }
+              text="Cancel"
+              onClick={(): void => {
+                setEditing(false);
               }}
             />
           </Box>
         </Box>
-      );
+      </Box>
+    );
+  } else {
+    let displayValue = value;
+    // If transform is present, that takes priority
+    if (transform) {
+      displayValue = transform(value);
+    } else {
+      // If no transform, try and display the value reasonably.
+      if (fieldProps?.type === "boolean") {
+        displayValue = value ? "Yes" : "No";
+      } else if (fieldProps?.type === "percent") {
+        // Prevent floating point errors from showing up by using parseFloat and precision. Pass through parseFloat again
+        // to trim off insignificant zeroes.
+        displayValue = `${parseFloat(parseFloat(String(value * 100)).toPrecision(7))}%`;
+      } else if (fieldProps?.type === "currency") {
+        // TODO: support currencies other than USD in Field and related components.
+        const formatter = new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency: "USD",
+          minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
+        });
+        displayValue = formatter.format(value);
+      } else if (fieldProps?.type === "multiselect") {
+        // ???
+        displayValue = value.join(", ");
+      }
     }
+    return (
+      <Box
+        direction="row"
+        justifyContent="between"
+        maxWidth="100%"
+        paddingX={3}
+        paddingY={2}
+        width="100%"
+        {...rowBoxProps}
+      >
+        <Box>
+          <Text weight="bold">{title}:</Text>
+        </Box>
+        <Box direction="row" flex="shrink" marginLeft={2}>
+          <Box flex="shrink">
+            <Text overflow="breakWord">{displayValue}</Text>
+          </Box>
+          {editable && (
+            <Box marginLeft={2} onClick={(): void => setEditing(true)}>
+              <Icon color="darkGray" name="edit" size="lg" />
+            </Box>
+          )}
+        </Box>
+      </Box>
+    );
   }
-}
+};

package/src/Unifier.ts

@@ -366,6 +366,4 @@ class UnifierClass {
   };
 }
 
-const NOTIFICATION_TAB_KEY = "@unifier/tabNotifications";
-
 export const Unifier = new UnifierClass();