@onehat/ui 0.1.2 → 0.2.0

package/src/Hooks/useBlocking.js

@@ -0,0 +1,18 @@
+import { useRef, } from 'react';
+
+// Handy utility that will set isBlocked.current as true for 100ms,
+// then will set it back to false. Use this to block mouse events
+// for a brief time.
+// let isBlocked = { current: false };
+
+export default function useBlocking() {
+	const
+		isBlocked = useRef(),
+		block = () => {
+			isBlocked.current = true;
+			setTimeout(() => {
+				isBlocked.current = false;
+			}, 200);
+		};
+	return { isBlocked, block };
+}

package/src/Hooks/useCameraRoll.js

@@ -0,0 +1,41 @@
+import { useCallback, useState } from 'react';
+import * as MediaLibrary from 'expo-media-library';
+// import { CameraRoll } from 'react-native';
+// import CameraRoll from '@react-native-community/cameraroll';
+
+// This is taken from https://dev.to/atalkwithdev/resolving-expo-multi-select-photos-with-react-hooks-487k
+export default function useCameraRoll({
+	first = 40,
+	assetType = 'Photos',
+	groupTypes = 'All',
+}) {
+	const [photos, setPhotos] = useState([]),
+		[after, setAfter] = useState(null),
+		[hasNextPage, setHasNextPage] = useState(true);
+
+	const getPhotos = useCallback(async () => {
+		if (!hasNextPage) {
+			return;
+		}
+
+		// BUG::This dies because the RN library isn't linked to Native CameraRoll code.
+		const { edges, page_info: pageInfo } = await CameraRoll.getPhotos({
+			first,
+			assetType,
+			groupTypes,
+			...(after && { after }),
+		});
+
+		if (after === pageInfo.end_cursor) {
+			return;
+		}
+
+		const images = edges.map(i => i.node).map(i => i.image);
+
+		setPhotos([...photos, ...images]);
+		setAfter(pageInfo.end_cursor);
+		setHasNextPage(pageInfo.has_next_page);
+	}, [after, hasNextPage, photos]);
+
+	return [photos, getPhotos];
+}

package/src/Hooks/useForceUpdate.js

@@ -0,0 +1,14 @@
+/**
+ * This file is categorized as "Proprietary Framework Code"
+ * and is subject to the terms and conditions defined in
+ * file 'LICENSE.txt', which is part of this source code package.
+ */
+import { useState, useCallback } from 'react'
+
+export default function useForceUpdate() {
+	const [, setTick] = useState(0);
+	const update = useCallback(() => {
+		setTick(tick => tick + 1);
+	}, [])
+	return update;
+}

package/src/Hooks/useIsMounted.js

@@ -0,0 +1,14 @@
+import { useRef, useEffect } from 'react';
+
+// From https://stackoverflow.com/a/65152534
+
+export default function useIsMounted() {
+	const isMounted = useRef(false);
+
+	useEffect(() => {
+		isMounted.current = true;
+		return () => isMounted.current = false;
+	}, []);
+
+	return isMounted;
+}

package/src/Hooks/useNotifications.js

@@ -0,0 +1,279 @@
+import { useEffect, useState, } from 'react';
+import * as TaskManager from 'expo-task-manager';
+import * as Notifications from 'expo-notifications';
+import * as Device from 'expo-device';
+import AppGlobals from '../../AppGlobals';
+import { Alert } from 'react-native';
+import { BACKGROUND_NOTIFICATION_TASK } from '../../Constants/Tasks';
+import moment from 'moment';
+
+
+// Much of this was adapted from react-native-hook-use-notification found here: https://github.com/dameyerdave/react-native-hook-use-notification#readme
+
+export const askForNotificationPermission = async () => {
+
+	// Get notification permissions
+	// (Not sure if I need this code, so it's commented out)
+	// const result = await Notifications.requestPermissionsAsync({
+	// 	android: {},
+	// 	ios: {
+	// 		allowAlert: true,
+	// 		allowBadge: false,
+	// 		allowSound: true,
+	// 		allowDisplayInCarPlay: false,
+	// 		allowCriticalAlerts: true,
+	// 		provideAppNotificationSettings: true,
+	// 		allowProvisional: true,
+	// 		allowAnnouncements: true,
+	// 	},
+	// });
+
+
+	const {
+			status: existingStatus
+		} = await Notifications.getPermissionsAsync();
+	let finalStatus = existingStatus;
+
+	if (existingStatus !== 'granted') {
+		const {
+			status
+		} = await Notifications.requestPermissionsAsync();
+		finalStatus = status;
+	}
+
+	if (finalStatus !== 'granted') {
+		return false;
+	}
+
+	if (Platform.OS === 'android') {
+		Notifications.setNotificationChannelAsync('default', {
+			name: 'default',
+			importance: Notifications.AndroidImportance.MAX,
+			vibrationPattern: [0, 250, 250, 250],
+			// lightColor: '#FF231F7C',
+		});
+	}
+
+	return true;
+};
+
+export const notify = async (title = 'Notification', body = 'Hello', data = {}, trigger = null, sound = true, vibrate = true) => {
+	if (!Array.isArray(trigger)) {
+		trigger = [trigger]
+	}
+	for (let _trigger of trigger) {
+		try {
+			await Notifications.scheduleNotificationAsync({
+				// identifier: title + body + JSON.stringify(data) + JSON.stringify(trigger),
+				content: {
+					title: title,
+					body: body,
+					data: data,
+					sound: sound,
+					vibrate: vibrate,
+					// attachments: [
+					//     {
+					//         // identifier: new Date().getTime().toString(),
+					//         url: 'http://www.clipartbest.com/cliparts/ncB/Mrp/ncBMrpy7i.jpg',
+					//         // type: 'Image'
+					//         // typeHint: 'Image',
+					//         hideThumbnail: false,
+					//         // thumbnailClipArea: { x: 0, y: 0, width: 10, height: 10 }
+					//     }
+					// ]
+				},
+				trigger: _trigger,
+			})
+		} catch (err) {
+			console.log(err)
+		}
+	}
+};
+
+export const getScheduledNotifications = async () => {
+	try {
+		return Notifications.getAllScheduledNotificationsAsync()
+	} catch (err) {
+		console.log(err)
+	}
+
+};
+
+export const clearScheduledNotifications = async () => {
+	try {
+		await Notifications.cancelAllScheduledNotificationsAsync()
+	} catch (err) {
+		console.log(err)
+	}
+};
+
+export const parseResponse = (notification) => {
+	if (notification.notification) {
+		notification = notification.notification;
+	}
+	const body = notification?.request?.content?.body,
+		title = notification?.request?.content?.title,
+		data = notification?.request?.content?.data;
+	return {
+		body,
+		title,
+		data,
+	};
+};
+
+export const useNotifications = (args) => {
+
+	const {
+			onNotificationReceived,
+			onNotificationDropped,
+			onNotificationResponseReceived,
+			onBackgroundNotificationTaskReceived,
+			getExpoPushToken,
+			options = {
+				alert: true,
+				sound: true,
+				badge: false,
+			},
+		} = args,
+		[askedPermissions, setAskedPermissions] = useState(false);
+
+		// if (onBackgroundNotificationTaskReceived && !TaskManager.isTaskDefined(BACKGROUND_NOTIFICATION_TASK)) {
+		// 	TaskManager.defineTask(BACKGROUND_NOTIFICATION_TASK, onBackgroundNotificationTaskReceived);
+		// 	debugger;
+		// 	Notifications.registerTaskAsync(BACKGROUND_NOTIFICATION_TASK);
+		// }
+
+	if (Device.isDevice) {
+
+		useEffect(() => {
+			
+			askForNotificationPermission()
+				.then((granted) => {
+					if (!granted) {
+						Alert.alert('Notifications', 'Notifications are not allowed. This functionality will be disabled until permissions are given.');
+						return;
+					}
+
+					let responseListener = null,
+						responseDroppedListener = null,
+						responseReceivedListener = null;
+					if (onNotificationReceived) { // For whenever a new notification is received
+						responseListener = Notifications.addNotificationReceivedListener((notification) => {
+							const response = parseResponse(notification);
+							onNotificationReceived(response);
+						});
+					}
+					if (onNotificationDropped) { // For whenever some notifications have been dropped
+						responseDroppedListener = Notifications.addNotificationsDroppedListener((notification) => {
+							const response = parseResponse(notification);
+							onNotificationDropped(response);
+						});
+					}
+					if (onNotificationResponseReceived) { // For whenever user interacts with a notification
+						responseReceivedListener = Notifications.addNotificationResponseReceivedListener((notification) => {
+							const response = parseResponse(notification);
+							onNotificationResponseReceived(response);
+						});
+					}
+					if (getExpoPushToken) {
+						Notifications.getExpoPushTokenAsync({
+							experienceId: AppGlobals.experienceId,
+						}).then((token) => {
+							getExpoPushToken(token);
+						}).catch((err) => {
+							Alert.alert('Debug', err.toString());
+							console.log(err);
+						});
+					}
+					
+					return () => {
+						if (responseListener) {
+							Notifications.removeNotificationSubscription(responseListener);
+						}
+						if (responseDroppedListener) {
+							Notifications.removeNotificationSubscription(responseDroppedListener);
+						}
+						if (responseReceivedListener) {
+							Notifications.removeNotificationSubscription(responseReceivedListener);
+						}
+					};
+				}).catch((err) => {
+					console.log(err);
+				}).finally(() => {
+					setAskedPermissions(true);
+				});
+			
+			Notifications.setNotificationHandler({
+				handleNotification: async () => ({
+					shouldShowAlert: options.alert,
+					shouldPlaySound: options.sound,
+					shouldSetBadge: options.badge,
+				}),
+			});
+		}, []);
+	}
+
+	return [
+		notify,
+		askedPermissions,
+	];
+};
+
+
+
+// Triggers
+
+export const intervalTrigger = (seconds, repeats = true) => {
+	return {
+		repeats: repeats,
+		seconds: seconds
+	}
+};
+
+export const dailyTrigger = (hour, minute) => {
+	return {
+		repeats: true,
+		hour: hour,
+		minute: minute
+	}
+};
+
+export const cronTrigger = (cron) => {
+	const now = moment().milliseconds(0)
+
+	let triggers = []
+	const cron_parts = cron.split(' ')
+	if (cron_parts.length === 5) {
+		let [__minute, __hour, __dom, __month, __dow] = cron_parts
+
+		const minute = __minute == '*' ? now.minute().toString() : __minute
+		const hour = __hour == '*' ? now.hour().toString() : __hour
+		const dom = __dom == '*' ? now.date().toString() : __dom
+		const month = __month == '*' ? now.month().toString() : __month.split(',').map(m => m - 1).join(',')
+		const dow = __dow
+
+		for (let _minute of minute.split(',')) {
+			for (let _hour of hour.split(',')) {
+				for (let _dom of dom.split(',')) {
+					for (let _month of month.split(',')) {
+						for (let _dow of dow.split(',')) {
+							const runtime = moment(now).minute(_minute).hour(_hour).date(_dom).month(_month)
+							triggers.push({
+								repeats: true,
+								second: 0,
+								minute: __minute != '*' ? runtime.minute() : undefined,
+								hour: __hour != '*' ? runtime.hour() : undefined,
+								day: __dom != '*' ? runtime.date() : undefined,
+								month: __month != '*' ? runtime.month() : undefined,
+								weekday: __dow != '*' ? Number(_dow) + 1 : undefined
+							})
+						}
+					}
+				}
+			}
+		}
+	} else {
+		console.log('Error in cron_definition of schedule ' + schedule.description + ' (' + schedule.cron_definition + ')')
+	}
+	return triggers
+};

package/src/Styles/StyleSheets.js

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = {
+	nsResize: {
+		cursor: 'ns-resize',
+	},
+	ewResize: {
+		cursor: 'ew-resize',
+	},
+	shiftUpAbove: {
+		transform: 'translateY(-100%)',
+	},
+};
+export default StyleSheet.create(styles);

package/src/Styles/ThemeOverrides.js

@@ -0,0 +1,264 @@
+const ThemeOverrides = {
+	colors: {
+		primary: {
+			100: '#4D89CC',
+			200: '#467DBA',
+			300: '#3F71A8',
+			400: '#396799',
+			500: '#335C89', // default for buttons
+			600: '#2E527A',
+			700: '#28486B',
+			800: '#203A57',
+			900: '#182C42',
+		},
+		// secondary: {
+		// 	500: '#1F3854', // default for buttons
+		// },
+		selected: '#ffc',
+		hover: '#eee',
+		selectedHover: '#eeb',
+		unselected: '#bbb',
+		disabled: '#ccc',
+		control: '#1B518C',
+		vip: '#3a78bc',
+		navBlue: '#3b82f6',
+		warning: '#d92b2b',
+		orange: '#de9000',
+		greens: {
+			100: '#4CAF50',
+			200: '#449E48',
+			300: '#3d8C40',
+			400: '#357A38',
+			500: '#2E6930',
+			600: '#265828',
+			700: '#1E4620',
+			800: '#173518',
+			900: '#0F2310',
+		},
+	},
+	// config: {
+	// 	initialColorMode: 'dark',
+	// },
+	Components: {
+		Select: {
+			defaultProps: {
+				h: 50,
+				flex: 1,
+				bg: '#fff',
+				borderWidth: 1,
+				borderColor: '#000',
+				isDisabled: false,
+			},
+		},
+		Icon: {
+			defaultProps: {
+				size: 'md',
+				color: '#fff',
+			},
+		},
+		Input: {
+			variants: {
+				form: (props) => {
+					const c = props.colorScheme,
+						m = props.colorMode,
+						isLightMode = m === 'light';
+					return {
+						autoCapitalize: 'none',
+						mb: 4,
+						w: '100%',
+						h: '50px',
+
+						// BEGIN Taken from variant 'filled'
+						bg: props.bg || (isLightMode ? 'muted.200' : 'muted.600'),
+						borderWidth: '1',
+						borderColor: 'transparent',
+						_hover: {
+							bg: isLightMode ? 'muted.200' : 'muted.700',
+						},
+						// END
+					};
+				},
+			},
+			defaultProps: {
+				size: 'xl',
+			},
+		},
+		Button: {
+			variants: {
+				footer: (props) => {
+					const c = props.colorScheme,
+						m = props.colorMode,
+						isLightMode = m === 'light';
+					
+					return {
+						flex: 1,
+						_text: {
+							color: '#fff',
+						},
+						alignSelf: 'center',
+						alignItems: 'center',
+						justifyContent: 'center',
+
+						// BEGIN Taken from variant 'solid'
+						_web: {
+							outlineWidth: '0'
+						},
+						bg: c + '.800',
+						_hover: {
+							bg: c + '.600'
+						},
+						_pressed: {
+							bg: c + '.700'
+						},
+						_focus: {
+							bg: c + '.600'
+						},
+						_loading: {
+							bg: isLightMode ? 'warmGray.50' : c + '.300',
+							opacity: '50'
+						},
+						_disabled: {
+							_text: {
+								color: '#000',
+							},
+							bg: isLightMode ? 'trueGray.400' : 'trueGray.600',
+						},
+						// END
+					};
+				},
+				solid2: (props) => {
+					const c = props.colorScheme,
+						m = props.colorMode,
+						isLightMode = m === 'light';
+					
+					return {
+						_text: {
+							color: '#fff',
+						},
+						// BEGIN Taken from variant 'solid'
+						_web: {
+							outlineWidth: '0'
+						},
+						bg: 'trueGray.200',
+						borderColor: c + '.800',
+						borderWidth: 1,
+						_hover: {
+							bg: 'trueGray.400'
+						},
+						_pressed: {
+							bg: 'trueGray.700'
+						},
+						_focus: {
+							bg: 'trueGray.600',
+						},
+						_loading: {
+							bg: isLightMode ? 'warmGray.50' : c + '.300',
+							opacity: '50'
+						},
+						_disabled: {
+							_text: {
+								color: '#000',
+							},
+							bg: isLightMode ? 'trueGray.400' : 'trueGray.600',
+						},
+						// END
+					};
+				},
+				money: (props) => {
+					const c = props.colorScheme,
+						m = props.colorMode,
+						isLightMode = m === 'light';
+					
+					return {
+						alignSelf: 'center',
+						alignItems: 'center',
+						justifyContent: 'center',
+						color: 'greens.200',
+						borderColor: 'greens.200',
+						borderWidth: 2,
+						borderRadius: 'xl',
+						bg: '#fff',
+					};
+				},
+			},
+			defaultProps: {
+				size: 'lg',
+			},
+		},
+		IconButton: {
+			variants: {
+				footer: (props) => {
+					const c = props.colorScheme,
+						m = props.colorMode,
+						isLightMode = m === 'light';
+					
+					return {
+						flex: 1,
+						alignSelf: 'center',
+						alignItems: 'center',
+						justifyContent: 'center',
+
+						// BEGIN Taken from variant 'solid'
+						_web: {
+							outlineWidth: '0'
+						},
+						bg: c + '.800',
+						_hover: {
+							bg: c + '.600'
+						},
+						_pressed: {
+							bg: c + '.700'
+						},
+						_focus: {
+							bg: c + '.600'
+						},
+						_loading: {
+							bg: isLightMode ? 'warmGray.50' : c + '.300',
+							opacity: '50'
+						},
+						_disabled: {
+							bg: isLightMode ? 'trueGray.400' : 'trueGray.600',
+						},
+						// END
+					};
+				},
+				solid2: (props) => {
+					const c = props.colorScheme,
+						m = props.colorMode,
+						isLightMode = m === 'light';
+					
+					return {
+						// BEGIN Taken from variant 'solid'
+						_web: {
+							outlineWidth: '0'
+						},
+						bg: 'trueGray.200',
+						borderColor: c + '.800',
+						borderWidth: 1,
+						_hover: {
+							bg: 'trueGray.400'
+						},
+						_pressed: {
+							bg: 'trueGray.700'
+						},
+						_focus: {
+							bg: 'trueGray.600',
+						},
+						_loading: {
+							bg: isLightMode ? 'warmGray.50' : c + '.300',
+							opacity: '50'
+						},
+						_disabled: {
+							bg: isLightMode ? 'trueGray.400' : 'trueGray.600',
+						},
+						// END
+					};
+				},
+			},
+			defaultProps: {
+				size: 'lg',
+			},
+		},
+	},
+};
+export default ThemeOverrides;

package/src/UiConfig.js

@@ -0,0 +1,19 @@
+import { isBrowser, isNode, isWebWorker, isJsDom, isDeno } from "browser-or-node";
+import {
+	UI_MODE_WEB,
+	UI_MODE_REACT_NATIVE,
+} from './Constants/UiModes';
+
+
+const UiConfig = {
+	mode: null,
+};
+
+if (isBrowser || isWebWorker) {
+	UiConfig.mode = UI_MODE_WEB;
+} else
+if (isNode) {
+	UiConfig.mode = UI_MODE_REACT_NATIVE;
+}
+
+export default UiConfig;