ferns-ui 0.36.4 → 0.37.0

package/src/FlatList.tsx

@@ -0,0 +1,2 @@
+import {FlatList} from "react-native";
+export {FlatList};

package/src/Form.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {IconButton} from "./IconButton";
+import {SelectList} from "./SelectList";
+import {Switch} from "./Switch";
+import {Text} from "./Text";
+import {TextArea} from "./TextArea";
+import {TextField} from "./TextField";
+
+function objToJoinedString(obj: any) {
+  return Object.keys(obj || {})
+    .map((k) => (obj[k] ? k : undefined))
+    .filter((v) => v)
+    .join(", ");
+}
+
+interface FormLineProps {
+  name: string;
+  value: any;
+  onSave: (value: any) => void;
+  kind: "boolean" | "string" | "textarea" | "select" | "multiboolean";
+  options?: string[];
+}
+
+interface FormLineState {
+  editing: boolean;
+  value: any;
+}
+
+export class FormLine extends React.Component<FormLineProps, FormLineState> {
+  constructor(props: FormLineProps) {
+    super(props);
+    this.state = {editing: false, value: ""};
+  }
+
+  renderMultiBoolean() {
+    return (
+      <>
+        <Box marginRight={2}>
+          <Text weight="bold">{this.props.name}</Text>
+        </Box>
+        <Box direction="column" display="flex">
+          {Object.keys(this.props.value).map((k) => (
+            <>
+              <Text weight="bold">{k}</Text>
+              <Switch
+                id={k}
+                switched={this.state.value[k]}
+                onChange={() => {
+                  this.setState({value: {...this.state.value, [k]: !this.state.value[k]}});
+                }}
+              />
+            </>
+          ))}
+        </Box>
+      </>
+    );
+  }
+
+  renderBooleanField() {
+    return (
+      <>
+        <Box marginRight={2}>
+          <Text weight="bold">{this.props.name}</Text>
+        </Box>
+        <Switch
+          id={this.props.name}
+          switched={this.state.value}
+          onChange={() => this.setState({value: !this.state.value})}
+        />
+      </>
+    );
+  }
+
+  renderTextField() {
+    return (
+      <>
+        <Box marginRight={2}>
+          <Text weight="bold">{this.props.name}</Text>
+        </Box>
+        <TextField
+          id={this.props.name}
+          value={this.state.value}
+          onChange={(result) => this.setState({value: result.value})}
+        />
+      </>
+    );
+  }
+
+  renderTextArea() {
+    return (
+      <>
+        <Box marginRight={2}>
+          <Text weight="bold">{this.props.name}</Text>
+        </Box>
+        <TextArea
+          id={this.props.name}
+          value={this.state.value}
+          onChange={(result) => this.setState({value: result.value})}
+        />
+        <Button size="sm" text="Save" onClick={() => this.props.onSave(this.state.value)} />
+      </>
+    );
+  }
+
+  renderSelect() {
+    return (
+      <>
+        <Box marginRight={2}>
+          <Text weight="bold">{this.props.name}</Text>
+        </Box>
+        <SelectList
+          id={this.props.name}
+          options={(this.props.options || []).map((o) => ({label: o ?? "---", value: o}))}
+          value={this.state.value}
+          onChange={(result) => {
+            this.setState({value: result});
+          }}
+        />
+      </>
+    );
+  }
+
+  render() {
+    if (!this.state.editing) {
+      let text = this.props.value;
+      if (text === undefined) {
+        text = " - ";
+      }
+      if (typeof text === "object") {
+        text = objToJoinedString(text);
+      }
+      return (
+        <Box direction="row" display="flex">
+          <IconButton
+            accessibilityLabel="edit"
+            icon="edit"
+            iconColor="darkGray"
+            prefix="far"
+            size="xs"
+            onClick={() => this.setState({editing: true, value: this.props.value})}
+          />
+          <Box marginRight={2}>
+            <Text weight="bold">{this.props.name}: </Text>
+          </Box>
+          <Text>{text}</Text>
+        </Box>
+      );
+    }
+    return (
+      <Box direction="row" display="flex">
+        <IconButton
+          accessibilityLabel="edit"
+          icon="times"
+          iconColor="darkGray"
+          prefix="far"
+          size="xs"
+          onClick={() => this.setState({editing: false})}
+        />
+        {this.props.kind === "boolean" && this.renderBooleanField()}
+        {this.props.kind === "multiboolean" && this.renderMultiBoolean()}
+
+        {this.props.kind === "string" && this.renderTextField()}
+        {this.props.kind === "textarea" && this.renderTextArea()}
+        {this.props.kind === "select" && this.renderSelect()}
+        <Box width={60}>
+          <Button
+            color="blue"
+            size="sm"
+            text="Save"
+            onClick={() => {
+              this.props.onSave(this.state.value);
+              this.setState({editing: false});
+            }}
+          />
+        </Box>
+      </Box>
+    );
+  }
+}

package/src/HeaderButtons.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {BackButtonInterface, SearchButtonProps} from "./Common";
+import {IconButton} from "./IconButton";
+import {Text} from "./Text";
+import {Unifier} from "./Unifier";
+
+interface HeaderButtonProps {
+  onClick: () => void;
+  text: string;
+}
+
+interface HeaderButtonState {}
+
+export class HeaderButton extends React.Component<HeaderButtonProps, HeaderButtonState> {
+  constructor(props: HeaderButtonProps) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <Box marginRight={2}>
+        <Button color="primary" text={this.props.text} type="ghost" onClick={this.props.onClick} />
+      </Box>
+    );
+  }
+}
+
+export class SearchButton extends React.Component<SearchButtonProps, {}> {
+  render() {
+    return (
+      <Box>
+        <IconButton
+          accessibilityLabel="search"
+          icon="search"
+          iconColor={this.props.color || "white"}
+          prefix="fas"
+          onClick={this.props.onClick}
+        />
+      </Box>
+    );
+  }
+}
+
+export class BackButton extends React.Component<BackButtonInterface, {}> {
+  render() {
+    return (
+      <Box alignItems="center" justifyContent="center" paddingX={3} width={50}>
+        <IconButton
+          accessibilityLabel=""
+          icon="chevron-left"
+          iconColor="white"
+          prefix="fas"
+          size="md"
+          onClick={() => this.props.onBack && this.props.onBack()}
+        />
+      </Box>
+    );
+  }
+}
+
+export class FilterButton extends React.Component<SearchButtonProps, {}> {
+  render() {
+    return <Button color="white" text="Filter" type="ghost" onClick={this.props.onClick} />;
+  }
+}
+
+export class EditButton extends React.Component<SearchButtonProps, {}> {
+  render() {
+    return (
+      <IconButton
+        accessibilityLabel="edit"
+        icon="pen"
+        iconColor={this.props.color}
+        prefix="fas"
+        onClick={this.props.onClick}
+      />
+    );
+  }
+}
+
+export class UseButton extends React.Component<SearchButtonProps, {}> {
+  render() {
+    return (
+      <Button
+        text="Use"
+        onClick={() => {
+          Unifier.utils.haptic();
+          this.props.onClick();
+        }}
+      />
+    );
+  }
+}
+
+export class AddTabButton extends React.Component<SearchButtonProps, {}> {
+  render() {
+    return (
+      <Box color="blue" height={62} width={62} onClick={this.props.onClick}>
+        <Text color="darkGray">Add</Text>
+      </Box>
+    );
+  }
+}

package/src/Heading.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import {Text as NativeText} from "react-native";
+
+import {HeadingProps} from "./Common";
+import {Unifier} from "./Unifier";
+
+export class Heading extends React.Component<HeadingProps, {}> {
+  fontSizes = {
+    sm: 20,
+    md: 28,
+    lg: 36,
+  };
+
+  propsToStyle(): any {
+    const style: any = {};
+
+    // let font = this.props.font || "primary";
+    // if (this.props.bold) {
+    //   font += "Bold";
+    // }
+    style.fontFamily = Unifier.theme.titleFont;
+
+    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() {
+    const lines = 0;
+    // if (this.props.numberOfLines) {
+    //   lines = this.props.numberOfLines;
+    // } else if (this.props.inline) {
+    //   lines = 1;
+    // }
+    return (
+      <NativeText numberOfLines={lines} style={this.propsToStyle()}>
+        {this.props.children}
+      </NativeText>
+    );
+  }
+}

package/src/HeightActionSheet.tsx

@@ -0,0 +1,104 @@
+import {Picker} from "@react-native-picker/picker";
+import range from "lodash/range";
+import React from "react";
+
+import {ActionSheet} from "./ActionSheet";
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {OnChangeCallback} from "./Common";
+
+const PICKER_HEIGHT = 104;
+
+interface HeightActionSheetProps {
+  value?: string;
+  onChange: OnChangeCallback;
+  actionSheetRef: React.RefObject<any>;
+}
+
+interface HeightActionSheetState {
+  feet: string;
+  inches: string;
+}
+
+export class HeightActionSheet extends React.Component<
+  HeightActionSheetProps,
+  HeightActionSheetState
+> {
+  constructor(props: HeightActionSheetProps) {
+    super(props);
+    this.state = {
+      feet: String(Math.floor(Number(props.value) / 12)),
+      inches: String(Number(props.value) % 12),
+    };
+  }
+
+  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="Close"
+                type="ghost"
+                onClick={() => {
+                  this.props.actionSheetRef?.current?.setModalVisible(false);
+                }}
+              />
+            </Box>
+          </Box>
+          <Box direction="row" width="100%">
+            <Box width="50%">
+              <Picker
+                itemStyle={{
+                  height: PICKER_HEIGHT,
+                }}
+                selectedValue={this.state.feet}
+                style={{
+                  height: PICKER_HEIGHT,
+                  backgroundColor: "#FFFFFF",
+                }}
+                onValueChange={(feet) => {
+                  this.setState({feet: String(feet)});
+                  this.props.onChange({
+                    value: String(Number(feet) * 12 + Number(this.state.inches)),
+                  });
+                }}
+              >
+                {range(4, 8).map((n) => {
+                  // console.log("FIRST", String(n));
+                  return <Picker.Item key={String(n)} label={`${String(n)}ft`} value={String(n)} />;
+                })}
+              </Picker>
+            </Box>
+            <Box width="50%">
+              <Picker
+                itemStyle={{
+                  height: PICKER_HEIGHT,
+                }}
+                selectedValue={this.state.inches}
+                style={{
+                  height: PICKER_HEIGHT,
+                  backgroundColor: "#FFFFFF",
+                }}
+                onValueChange={(inches) => {
+                  this.setState({inches: String(inches)});
+                  this.props.onChange({
+                    value: String(Number(this.state.feet) * 12 + Number(inches)),
+                  });
+                }}
+              >
+                {range(0, 12).map((n) => {
+                  // console.log("N", n);
+                  return <Picker.Item key={String(n)} label={`${String(n)}in`} value={String(n)} />;
+                })}
+              </Picker>
+            </Box>
+          </Box>
+        </Box>
+      </ActionSheet>
+    );
+  }
+}

package/src/Hyperlink.tsx

@@ -0,0 +1,181 @@
+/**
+ * @providesModule Hyperlink
+ *
+ * Forked from https://github.com/obipawan/react-native-hyperlink
+ *
+ *
+ * MIT License
+ *
+ * Copyright (c) 2019 Pawan
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+
+import mdurl from "mdurl";
+import React from "react";
+import {Linking, Platform, StyleProp, Text, View} from "react-native";
+
+const linkifyLib = require("linkify-it")();
+
+const {OS} = Platform;
+
+interface Props {
+  linkDefault?: boolean;
+  linkify?: any;
+  linkStyle?: StyleProp<any>;
+  linkText?: string | ((url: string) => string);
+  onPress?: (url: string) => void;
+  onLongPress?: (url: string, text: string) => void;
+  injectViewProps?: (url: string) => any;
+  children?: React.ReactNode;
+  style?: StyleProp<any>;
+}
+
+// Leaving this as a class component because it was easier to handle the `pasrse(this)` in `render()`
+class HyperlinkComponent extends React.Component<Props> {
+  isTextNested = (component: any) => {
+    if (!React.isValidElement(component)) throw new Error("Invalid component");
+    const {type: {displayName} = {} as any} = component;
+    if (displayName !== "Text") throw new Error("Not a Text component");
+    return typeof (component.props as any).children !== "string";
+  };
+
+  linkify = (component: any) => {
+    const linkifyIt = this.props.linkify || linkifyLib;
+
+    if (!linkifyIt.pretest(component.props.children) || !linkifyIt.test(component.props.children))
+      return component;
+
+    const elements = [];
+    let _lastIndex = 0;
+
+    const componentProps = {
+      ...component.props,
+      ref: undefined,
+      key: undefined,
+    };
+
+    try {
+      linkifyIt.match(component.props.children).forEach(({index, lastIndex, text, url}: any) => {
+        const nonLinkedText = component.props.children.substring(_lastIndex, index);
+        nonLinkedText && elements.push(nonLinkedText);
+        _lastIndex = lastIndex;
+        if (this.props.linkText)
+          text =
+            typeof this.props.linkText === "function"
+              ? this.props.linkText(url)
+              : this.props.linkText;
+
+        const clickHandlerProps: any = {};
+        if (OS !== "web") {
+          if (this.props.onLongPress) {
+            clickHandlerProps.onLongPress = () => (this.props as any).onLongPress(url, text);
+          }
+        }
+        if (this.props.onPress) {
+          clickHandlerProps.onPress = () => (this.props as any).onPress(url, text);
+        }
+
+        let injected: any = {};
+        if (this.props.injectViewProps) {
+          injected = this.props.injectViewProps(url);
+        }
+
+        elements.push(
+          <Text
+            {...componentProps}
+            {...clickHandlerProps}
+            key={url + index}
+            style={[component.props.style, this.props.linkStyle]}
+            {...injected}
+          >
+            {text}
+          </Text>
+        );
+      });
+      elements.push(
+        component.props.children.substring(_lastIndex, component.props.children.length)
+      );
+      return React.cloneElement(component, componentProps, elements);
+    } catch (err) {
+      return component;
+    }
+  };
+
+  parse = (component: any): React.ReactElement => {
+    const {props: {children} = {} as any} = component || {};
+    if (!children) return component;
+
+    const componentProps = {
+      ...component.props,
+      ref: undefined,
+      key: undefined,
+    };
+
+    const linkifyIt = this.props.linkify || linkifyLib;
+
+    return React.cloneElement(
+      component,
+      componentProps,
+      React.Children.map(children, (child) => {
+        const {type: {displayName} = {} as any} = child || {};
+        if (typeof child === "string" && linkifyIt.pretest(child))
+          return this.linkify(
+            <Text {...componentProps} style={component.props.style}>
+              {child}
+            </Text>
+          );
+        if (displayName === "Text" && !this.isTextNested(child)) return this.linkify(child);
+        return this.parse(child);
+      })
+    );
+  };
+
+  render() {
+    const {...viewProps} = this.props;
+    delete viewProps.onPress;
+    delete viewProps.linkDefault;
+    delete viewProps.onLongPress;
+    delete viewProps.linkStyle;
+
+    return (
+      <View {...viewProps} style={this.props.style}>
+        {!this.props.onPress && !this.props.onLongPress && !this.props.linkStyle
+          ? this.props.children
+          : this.parse(this).props.children}
+      </View>
+    );
+  }
+}
+
+export function Hyperlink(props: Props) {
+  const handleLink = (url: string) => {
+    const urlObject = mdurl.parse(url);
+    urlObject.protocol = urlObject.protocol.toLowerCase();
+    const normalizedURL = mdurl.format(urlObject);
+
+    Linking.canOpenURL(normalizedURL).then(
+      (supported) => supported && Linking.openURL(normalizedURL)
+    );
+  };
+
+  const onPress = handleLink || props.onPress;
+  if (props.linkDefault) return <HyperlinkComponent {...props} onPress={onPress} />;
+  return <HyperlinkComponent {...props} />;
+}

package/src/Icon.tsx

@@ -0,0 +1,24 @@
+import {FontAwesome5} from "@expo/vector-icons";
+import React from "react";
+
+import {IconProps, iconSizeToNumber} from "./Common";
+import {Unifier} from "./Unifier";
+
+export function initIcons() {
+  console.debug("Initializing icons");
+}
+
+// TODO: Update <Icon /> to be closer to Expo's Vector Icon, letting multiple icon packs be used, etc.
+export function Icon({color, size, name, prefix}: IconProps): React.ReactElement {
+  const iconColor = Unifier.theme[color || "primary"];
+  const iconSize = iconSizeToNumber(size);
+  return (
+    <FontAwesome5
+      color={iconColor}
+      name={name}
+      regular={prefix === "far"}
+      size={iconSize}
+      solid={!prefix || prefix === "fas"}
+    />
+  );
+}