ferns-ui 0.2.0

package/src/NumberPickerActionSheet.tsx

@@ -0,0 +1,66 @@
+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 NumberPickerActionSheetProps {
+  value: string;
+  min: number;
+  max: number;
+  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="Close"
+                type="ghost"
+                onClick={() => {
+                  this.props.actionSheetRef?.current?.setModalVisible(false);
+                }}
+              />
+            </Box>
+          </Box>
+          <Picker
+            itemStyle={{
+              height: PICKER_HEIGHT,
+            }}
+            selectedValue={String(this.props.value)}
+            style={{
+              height: PICKER_HEIGHT,
+              backgroundColor: "#FFFFFF",
+            }}
+            onValueChange={(itemValue) => this.props.onChange({value: String(itemValue)})}
+          >
+            {range(this.props.min, this.props.max).map((n) => (
+              <Picker.Item key={String(n)} label={String(n)} value={String(n)} />
+            ))}
+          </Picker>
+        </Box>
+      </ActionSheet>
+    );
+  }
+}

package/src/Page.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+
+import {Box} from "./Box";
+import {Button} from "./Button";
+import {Color, UnsignedUpTo12} from "./Common";
+import {ErrorBoundary} from "./ErrorBoundary";
+import {Heading} from "./Heading";
+import {IconButton} from "./IconButton";
+// import {KeyboardAccessoryNavigation} from "react-native-keyboard-accessory";
+import {Spinner} from "./Spinner";
+import {Unifier} from "./Unifier";
+
+interface PageProps {
+  // TODO: figure out navigation
+  navigation: any;
+  scroll?: boolean;
+  loading?: boolean;
+  display?: "flex" | "none" | "block" | "inlineBlock";
+  title?: string;
+  backButton?: boolean;
+  closeButton?: boolean;
+  direction?: "row" | "column";
+  padding?: UnsignedUpTo12;
+  color?: Color;
+  maxWidth?: number | string;
+  keyboardOffset?: number;
+  footer?: any;
+  rightButton?: string;
+  rightButtonOnClick?: () => void;
+  children?: any;
+}
+
+export class Page extends React.Component<PageProps, {}> {
+  actionSheetRef: React.RefObject<any> = React.createRef();
+
+  renderHeader() {
+    if (!this.props.title && !this.props.backButton) {
+      return null;
+    }
+    return (
+      <Box direction="row" display="flex" width="100%">
+        {this.props.backButton && (
+          <Box alignItems="center" display="block" justifyContent="center" paddingY={3}>
+            <IconButton
+              accessibilityLabel=""
+              icon="chevron-left"
+              iconColor="darkGray"
+              prefix="fas"
+              size="md"
+              onClick={() => this.props.navigation.goBack()}
+            />
+          </Box>
+        )}
+        {this.props.closeButton && (
+          <Box alignItems="center" display="block" justifyContent="center" paddingY={3}>
+            <IconButton
+              accessibilityLabel=""
+              icon="times"
+              iconColor="darkGray"
+              prefix="fas"
+              size="md"
+              onClick={() => this.props.navigation.goBack()}
+            />
+          </Box>
+        )}
+        {Boolean(this.props.title) && (
+          <Box direction="column" display="flex" flex="grow" justifyContent="center">
+            <Heading align="center">{this.props.title}</Heading>
+          </Box>
+        )}
+        {this.props.rightButton && (
+          <Box alignItems="center" display="block" justifyContent="center" paddingY={3}>
+            <Button
+              color="gray"
+              text={this.props.rightButton}
+              type="ghost"
+              onClick={() => this.props.rightButtonOnClick && this.props.rightButtonOnClick()}
+            />
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
+  render() {
+    return (
+      <ErrorBoundary>
+        <Box
+          alignSelf="center"
+          avoidKeyboard
+          color={this.props.color || "lightGray"}
+          direction={this.props.direction || "column"}
+          display={this.props.display || "flex"}
+          flex="grow"
+          keyboardOffset={this.props.keyboardOffset}
+          maxWidth={this.props.maxWidth || 800}
+          padding={this.props.padding !== undefined ? this.props.padding : 2}
+          scroll={this.props.scroll === undefined ? true : this.props.scroll}
+          width="100%"
+          // color="ligh"
+        >
+          {this.renderHeader()}
+          {this.props.loading === true && (
+            <Spinner color={Unifier.theme.darkGray as any} size="md" />
+          )}
+          {/* <KeyboardAccessoryNavigation
+          avoidKeyboard
+          doneButton={true}
+          nextButton={true}
+          previousButton={true}
+        /> */}
+
+          {this.props.children}
+        </Box>
+        {Boolean(this.props.footer) && (
+          <Box
+            alignSelf="center"
+            color={this.props.color || "lightGray"}
+            direction={this.props.direction || "column"}
+            display={this.props.display || "flex"}
+            flex="shrink"
+            marginBottom={8}
+            maxWidth={this.props.maxWidth || 800}
+            paddingX={this.props.padding !== undefined ? this.props.padding : 6}
+            paddingY={this.props.padding !== undefined ? this.props.padding : 2}
+            width="100%"
+          >
+            {this.props.footer}
+          </Box>
+        )}
+      </ErrorBoundary>
+    );
+  }
+}

package/src/Permissions.ts

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// import {Tracking} from "./Tracking";
+// import capitalize from "lodash/capitalize";
+// 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) => {
+    return "denied";
+  });
+  // const userPropertyKey = `PermissionsFor${capitalize(kind)}`;
+
+  //   let k = kind;
+  //   let options: any = undefined;
+  //   if (kind === "locationAlways") {
+  //     k = "location";
+  //     options = { type: "always" };
+  //   }
+  //   if (Platform.OS === "android" && k === "notification") {
+  //     return;
+  //   }
+
+  //   // TODO check soft request status.
+
+  //   const current = await Permissions.check(MAP[k] as any);
+  //   // Tracking.log(`[permissions] ${k} permissions are ${current}`);
+  //   if (current === "denied" || current === "limited") {
+  //     // Tracking.setUserProperty(userPropertyKey, "false");
+  //     return reject(MAP_RESULTS[current]);
+  //   } else if (current === "granted") {
+  //     // Tracking.setUserProperty(userPropertyKey, "true");
+  //     return resolve("authorized");
+  //   }
+
+  //   const response = await Permissions.request(MAP[k] as any, options);
+  //   if (response === "granted") {
+  //     // Tracking.setUserProperty(userPropertyKey, "true");
+  //     return resolve("authorized");
+  //   } else {
+  //     // Tracking.setUserProperty(userPropertyKey, "false");
+  //     return reject(MAP_RESULTS[response]);
+  //   }
+  // });
+}