ferns-ui 0.2.0

package/src/Text.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import {Text as NativeText} from "react-native";
+import Hyperlink from "react-native-hyperlink";
+
+import {TextProps} from "./Common";
+import {Unifier} from "./Unifier";
+
+export class Text extends React.Component<TextProps, {}> {
+  fontSizes = {
+    sm: 12,
+    md: 14,
+    lg: 16,
+  };
+
+  propsToStyle(): any {
+    const style: any = {};
+
+    let font:
+      | "primaryFont"
+      | "primaryBoldFont"
+      | "secondaryFont"
+      | "secondaryBoldFont"
+      | "buttonFont"
+      | "accentFont"
+      | "accentBoldFont"
+      | "titleFont" = "primaryFont";
+    if (this.props.font === "primary") {
+      if (this.props.weight === "bold") {
+        font = "primaryBoldFont";
+      } else {
+        font = "primaryFont";
+      }
+    } else if (this.props.font === "secondary") {
+      if (this.props.weight === "bold") {
+        font = "secondaryBoldFont";
+      } else {
+        font = "secondaryFont";
+      }
+    } else if (this.props.font === "button") {
+      font = "buttonFont";
+    } else if (this.props.font === "title") {
+      font = "titleFont";
+    } else if (this.props.font === "accent") {
+      if (this.props.weight === "bold") {
+        font = "accentBoldFont";
+      } else {
+        font = "accentFont";
+      }
+    }
+
+    style.fontFamily = Unifier.theme[font];
+
+    style.fontSize = this.fontSizes[this.props.size || "md"];
+    if (this.props.align) {
+      style.textAlign = this.props.align;
+    }
+    if (this.props.color) {
+      style.color = Unifier.theme[this.props.color];
+    } else {
+      style.color = Unifier.theme.darkGray;
+    }
+    // TODO: might be useful for wrapping/truncating
+    // if (this.props.numberOfLines !== 1 && !this.props.inline) {
+    //   style.flexWrap = "wrap";
+    // }
+    return style;
+  }
+
+  render() {
+    let lines = 0;
+    if (this.props.numberOfLines) {
+      lines = this.props.numberOfLines;
+    } else if (this.props.inline) {
+      lines = 1;
+    }
+    const inner = (
+      <NativeText numberOfLines={lines} style={this.propsToStyle()}>
+        {this.props.children}
+      </NativeText>
+    );
+    if (this.props.skipLinking) {
+      return inner;
+    } else {
+      return (
+        // <Hyperlink linkDefault={true} linkStyle={{textDecorationLine: "underline"}}>
+        //   {inner}
+        // </Hyperlink>
+        <Hyperlink linkDefault>{inner}</Hyperlink>
+      );
+    }
+  }
+}

package/src/TextArea.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import {TextAreaProps} from "./Common";
+import {TextField} from "./TextField";
+
+export class TextArea extends React.Component<TextAreaProps, {}> {
+  constructor(props: TextAreaProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return <TextField {...this.props} height={100} multiline rows={4} />;
+  }
+}

package/src/TextField.tsx

@@ -0,0 +1,291 @@
+import moment from "moment-timezone";
+import React from "react";
+import {ActivityIndicator, KeyboardTypeOptions, Platform, TextInput, View} from "react-native";
+
+import {Box} from "./Box";
+import {TextFieldProps} from "./Common";
+import {DateTimeActionSheet} from "./DateTimeActionSheet";
+import {DecimalRangeActionSheet} from "./DecimalRangeActionSheet";
+import {HeightActionSheet} from "./HeightActionSheet";
+import {Icon} from "./Icon";
+import {NumberPickerActionSheet} from "./NumberPickerActionSheet";
+import {Unifier} from "./Unifier";
+import {WithLabel} from "./WithLabel";
+
+interface TextFieldState {
+  focused: boolean;
+  height: number;
+}
+
+export class TextField extends React.Component<TextFieldProps, TextFieldState> {
+  dateActionSheetRef: React.RefObject<any> = React.createRef();
+
+  numberRangeActionSheetRef: React.RefObject<any> = React.createRef();
+
+  decimalRangeActionSheetRef: React.RefObject<any> = React.createRef();
+
+  weightActionSheetRef: React.RefObject<any> = React.createRef();
+
+  constructor(props: TextFieldProps) {
+    super(props);
+    this.state = {focused: false, height: props.height || 40};
+  }
+
+  keyboardMap = {
+    date: "default",
+    email: "email-address",
+    number: "number-pad",
+    numberRange: "number-pad",
+    decimalRange: "decimal-pad",
+    decimal: "decimal-pad",
+    height: "default",
+    password: "default",
+    search: "default",
+    text: "default",
+    url: Platform.select({
+      ios: "url",
+      android: "default",
+    }),
+    username: "default",
+  };
+
+  textContentMap = {
+    date: "none",
+    email: "emailAddress",
+    number: "none",
+    decimal: "none",
+    decimalRange: "none",
+    height: "none",
+    password: "password",
+    search: "none",
+    text: "none",
+    url: Platform.select({
+      ios: "URL",
+      android: "none",
+    }),
+    username: "username",
+  };
+
+  renderIcon() {
+    if (this.props.type !== "search") {
+      return null;
+    }
+    if (this.props.searching === true) {
+      return (
+        <Box marginRight={4}>
+          <ActivityIndicator color={Unifier.theme.primary} size="small" />
+        </Box>
+      );
+    } else {
+      return (
+        <Box marginRight={2}>
+          <Icon name="search" prefix="far" size={14} />
+        </Box>
+      );
+    }
+  }
+
+  getBorderColor = () => {
+    if (this.props.errorMessage) {
+      return Unifier.theme.red;
+    } else if (this.state.focused) {
+      return Unifier.theme.blue;
+    } else {
+      return Unifier.theme.gray;
+    }
+  };
+
+  getHeight = () => {
+    if (this.props.grow) {
+      return Math.max(40, this.state.height);
+    } else if (this.props.multiline) {
+      return this.props.height || "100%";
+    } else {
+      return 40;
+    }
+  };
+
+  focus() {
+    // Empty
+  }
+
+  isEditable() {
+    return !this.props.disabled && !this.isHandledByModal();
+  }
+
+  isHandledByModal = () => {
+    return (
+      this.props.type === "date" ||
+      this.props.type === "numberRange" ||
+      this.props.type === "decimalRange" ||
+      this.props.type === "height"
+    );
+  };
+
+  render() {
+    const type = this.props.type || "text";
+    const keyboardType = this.keyboardMap[type];
+    // let textContentType = this.textContentMap[this.props.type || "text"];
+    const {errorMessage, ...props} = this.props;
+    let value = this.props.value;
+    if (this.props.type === "date") {
+      value = moment(this.props.value).format("MM/DD/YYYY");
+    } else if (this.props.type === "height") {
+      value = `${Math.floor(Number(this.props.value) / 12)} ft, ${
+        Number(this.props.value) % 12
+      } in`;
+    }
+    return (
+      <>
+        <WithLabel
+          label={errorMessage}
+          labelColor={this.props.errorMessageColor || "red"}
+          labelPlacement="after"
+          labelSize="sm"
+        >
+          <WithLabel {...props}>
+            <View
+              style={{
+                flexDirection: "row",
+                justifyContent: "center",
+                alignItems: "center",
+                // height: 40,
+                // minHeight: this.getHeight(),
+                minHeight: this.getHeight(),
+                width: "100%",
+                // Add padding so the border doesn't mess up layouts
+                paddingHorizontal: this.props.paddingX || this.state.focused ? 10 : 14,
+                paddingVertical: this.props.paddingY || this.state.focused ? 0 : 4,
+                borderColor: this.getBorderColor(),
+                borderWidth: this.state.focused && !this.props.errorMessage ? 5 : 1,
+                borderRadius: 16,
+                backgroundColor: this.props.disabled ? Unifier.theme.gray : Unifier.theme.white,
+                overflow: "hidden",
+              }}
+              onTouchEnd={() => {
+                if (this.props.type === "date") {
+                  this.dateActionSheetRef?.current?.setModalVisible(true);
+                } else if (this.props.type === "numberRange") {
+                  this.numberRangeActionSheetRef?.current?.setModalVisible(true);
+                } else if (this.props.type === "decimalRange") {
+                  this.decimalRangeActionSheetRef?.current?.setModalVisible(true);
+                } else if (this.props.type === "height") {
+                  this.weightActionSheetRef?.current?.setModalVisible(true);
+                }
+              }}
+            >
+              {this.renderIcon()}
+              <TextInput
+                ref={(ref) => {
+                  if (this.props.inputRef) {
+                    this.props.inputRef(ref);
+                  }
+                }}
+                autoCapitalize={type === "text" ? "sentences" : "none"}
+                autoFocus={this.props.autoFocus}
+                blurOnSubmit
+                // TODO: uncomment with upgrade to React 0.56.
+                // textContentType={textContentType}
+                editable={this.isEditable()}
+                keyboardType={keyboardType as KeyboardTypeOptions}
+                multiline={this.props.multiline}
+                numberOfLines={this.props.rows || 4}
+                placeholder={this.props.placeholder}
+                placeholderTextColor={Unifier.theme.gray}
+                returnKeyType={
+                  type === "number" || type === "decimal" ? "done" : this.props.returnKeyType
+                }
+                secureTextEntry={type === "password"}
+                // For react-native-autofocus
+                style={{
+                  flex: 1,
+                  paddingTop: 10,
+                  paddingRight: 10,
+                  paddingBottom: 10,
+                  paddingLeft: 0,
+                  height: this.getHeight(),
+                  width: "100%",
+                  color: Unifier.theme.darkGray,
+                  fontFamily: Unifier.theme.primaryFont,
+                  // Remove border in web.
+                  outlineWidth: 0,
+                  ...this.props.style,
+                }}
+                underlineColorAndroid="transparent"
+                value={value}
+                onBlur={() => {
+                  if (!this.isHandledByModal()) {
+                    this.setState({focused: false});
+                  }
+                  if (this.props.onBlur && this.props.value) {
+                    this.props.onBlur({value: this.props.value});
+                  }
+                  // if (this.props.type === "date") {
+                  //   this.actionSheetRef?.current?.setModalVisible(false);
+                  // }
+                }}
+                onChangeText={(text) => {
+                  this.props.onChange({value: text});
+                }}
+                onContentSizeChange={(event) => {
+                  if (!this.props.grow) {
+                    return;
+                  }
+                  this.setState({height: event.nativeEvent.contentSize.height});
+                }}
+                onFocus={() => {
+                  if (!this.isHandledByModal()) {
+                    this.setState({focused: true});
+                  }
+                }}
+                onSubmitEditing={() => {
+                  if (this.props.onEnter) {
+                    this.props.onEnter();
+                  }
+                  if (this.props.onSubmitEditing) {
+                    this.props.onSubmitEditing();
+                  }
+                }}
+              />
+            </View>
+          </WithLabel>
+        </WithLabel>
+        {this.props.type === "date" && (
+          <DateTimeActionSheet
+            actionSheetRef={this.dateActionSheetRef}
+            mode="date"
+            value={this.props.value}
+            onChange={(result) => this.props.onChange(result)}
+          />
+        )}
+        {this.props.type === "numberRange" && this.props.value && (
+          <NumberPickerActionSheet
+            actionSheetRef={this.numberRangeActionSheetRef}
+            max={this.props.max || (this.props.min || 0) + 100}
+            min={this.props.min || 0}
+            value={this.props.value}
+            onChange={(result) => this.props.onChange(result)}
+          />
+        )}
+        {this.props.type === "decimalRange" && this.props.value && (
+          <DecimalRangeActionSheet
+            actionSheetRef={this.decimalRangeActionSheetRef}
+            max={this.props.max || (this.props.min || 0) + 100}
+            min={this.props.min || 0}
+            value={this.props.value}
+            onChange={(result) => this.props.onChange(result)}
+          />
+        )}
+        {this.props.type === "height" && (
+          <HeightActionSheet
+            actionSheetRef={this.weightActionSheetRef}
+            value={this.props.value}
+            onChange={(result) => {
+              this.props.onChange(result);
+            }}
+          />
+        )}
+      </>
+    );
+  }
+}

package/src/TextFieldNumberActionSheet.tsx

@@ -0,0 +1,61 @@
+import DateTimePicker from "@react-native-community/datetimepicker";
+import moment from "moment-timezone";
+import React, {SyntheticEvent} from "react";
+
+import {ActionSheet} from "./ActionSheet";
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {OnChangeCallback} from "./Common";
+
+interface NumberPickerActionSheetProps {
+  value?: string;
+  mode?: "date" | "time";
+  onChange: OnChangeCallback;
+  actionSheetRef: React.RefObject<any>;
+}
+
+interface NumberPickerActionSheetState {}
+
+export class NumberPickerActionSheet extends React.Component<
+  NumberPickerActionSheetProps,
+  NumberPickerActionSheetState
+> {
+  constructor(props: NumberPickerActionSheetProps) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <ActionSheet ref={this.props.actionSheetRef} bounceOnOpen gestureEnabled>
+        <Box marginBottom={8} paddingX={4} width="100%">
+          <Box alignItems="end" display="flex" width="100%">
+            <Box width="33%">
+              <Button
+                color="blue"
+                size="lg"
+                text="Save"
+                type="ghost"
+                onClick={() => {
+                  this.props.actionSheetRef?.current?.setModalVisible(false);
+                }}
+              />
+            </Box>
+          </Box>
+          <DateTimePicker
+            display="spinner"
+            is24Hour
+            mode={this.props.mode}
+            testID="dateTimePicker"
+            value={moment(this.props.value).toDate()}
+            onChange={(event: any, date?: Date) => {
+              if (!date) {
+                return;
+              }
+              this.props.onChange({event, value: date.toString()});
+            }}
+          />
+        </Box>
+      </ActionSheet>
+    );
+  }
+}

package/src/UnifiedScreens.ts

@@ -0,0 +1,24 @@
+// import {Screens} from "./UnifiedScreens";
+
+export enum UnifierScreens {
+  // BarcodeView = "BarcodeView",
+  Contacts = "Contacts",
+  FullPageModal = "FullPageModal",
+  Auth = "Auth",
+  Spinner = "lib.Spinner",
+  Payment = "Payment",
+  Onboarding = "Onboarding",
+}
+let initialized = false;
+export function initializeUnifiedScreens() {
+  if (initialized) {
+    console.error("Cannot initialize screens multiple times.");
+    return;
+  }
+  initialized = true;
+  console.debug("[unifier] Registering unifier screens");
+  // Unifier.navigation.registerScreen(UnifierScreens.Auth, Auth, {url: "/auth"});
+  // registerScreen(Screens.BarcodeView, BarcodeView, {url: "/barcode"});
+  // Unifier.navigation.registerScreen(UnifierScreens.FullPageModal, FullPageModal, {url: "/item"});
+  // Unifier.navigation.registerScreen(UnifierScreens.Spinner, Spinner);
+}