@onehat/ui 0.1.3 → 0.2.0

package/src/Data/Hoc/withRedux.js

@@ -0,0 +1,48 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import actionCreators from '../../../Models/actions/ActionCreators';
+import _ from 'lodash';
+
+// Usage:
+// At top of file: 
+// import withRedux from '../../OneHat/Data/hoc/WithData';
+// 
+// At the bottom of your component that needs a CrudStore, do this:
+// export default withRedux(MyComponent, ['Users', 'Equipment']);
+
+export default function withRedux(WrappedComponent, properties = null) {
+	
+	if (_.isString(properties)) {
+		properties = [properties];
+	}
+
+	function WrapperComponent(props) {
+		return <WrappedComponent {...props} />;
+	}
+
+	// What portion of the global Redux state should be routed to this component as props?
+	function mapStateToProps(state) {
+		let obj = {};
+		const reducers = _.keys(state);
+		_.forEach(properties, (property) => {
+			_.forEach(reducers, (reducer) => {
+				if (state[reducer].hasOwnProperty(property)) {
+					obj[property] = state[reducer][property];
+				}
+			});
+		});
+		return obj;
+	}
+
+	// Pass action creators down to a component as props,
+	// so the component doesn't have to directly make use of Redux or store.dispatch()
+	function mapDispatchToProps(dispatch) {
+		return {
+			actions: bindActionCreators(actionCreators, dispatch)
+		};
+	}
+
+	// Create "Reduxed" HOC so everything connects together correctly
+	return connect(mapStateToProps, mapDispatchToProps)( WrapperComponent );
+
+}

package/src/Data/useOneHatData.js

@@ -0,0 +1,75 @@
+import { useState, useEffect, useRef, } from 'react';
+import oneHatData from '@onehat/data';
+import _ from 'lodash';
+
+/**
+ * NOTE: This file will *NOT* work as a direct import to your project,
+ * since 'React' is not in scope within the @onehat/data module.
+ * This file is provided as an example only!
+ * You will need to copy this file into your own project and import it from there.
+ */
+
+/**
+ * Custom React Hook.
+ * Enables two-way communication between a React component and OneHatData.
+ * @param {[string|object]} config - The name of the Schema you want to use. 
+ * Alternately, this can be a Repository config object, in which case a unique Repository will be created
+ * @param {boolean} uniqueRepository - Create and use a unique Repository 
+ * for just this one component, or get the Repository bound to the supplied Schema?
+ * @return {array} [entities, repository] - *entities* contains the activeEntities 
+ * of the repository. *repository* is the repository itself, which the component
+ * can use to call actions on the repository, like refresh() or sort() or filter()
+ */
+export default function useOneHatData(config, uniqueRepository = false) {
+	
+	const [entities, setEntities] = useState([]),
+		repository = useRef(), // use 'ref' instead of 'state' so onChangeData sees non-stale repository
+		setRepository = (r) => {
+			repository.current = r;
+		};
+
+	let schemaName;
+
+	// normalize config and schemaName
+	if (_.isString(config)) {
+		schemaName = config;
+		config = {
+			schema: config,
+		};
+	} else {
+		schemaName = config.id;
+	}
+ 
+	useEffect(() => {
+ 
+		const onChangeData = () => {
+			setEntities(repository.current.entities);
+		};
+		
+		(async () => {
+ 
+			const repository = uniqueRepository ? 
+				await oneHatData.createRepository(config) : 
+				oneHatData.getRepository(schemaName);
+	 
+			setRepository(repository);
+			setEntities(repository.entities);
+	
+			// Create & assign event handler for 'changeData'
+			repository.on('changeData', onChangeData);
+ 
+		})();
+ 
+		return () => {
+			if (repository.current) {
+				repository.current.off('changeData', onChangeData);
+			}
+			if (uniqueRepository) {
+				oneHatData.deleteRepository(schemaName);
+			}
+		};
+		
+	}, []); // '[]' to make this effect run only once
+ 
+	return [entities, repository.current];
+}

package/src/Functions/BankersRound.js

@@ -0,0 +1,11 @@
+import round from 'locutus/php/math/round'; // Port of PHP functions to JS
+
+// Rounds to the nearest EVEN integer. This means it is unbiased (doesn't always round up, doesn't always round down)
+export function BankersRound($x) {
+	return round($x, 0, 'PHP_ROUND_HALF_EVEN');
+}
+
+// Rounds half-cent amounts to nearest cent, using algorithm similar to above
+export default function BankersRoundCents($x) {
+	return round($x, 2, 'PHP_ROUND_HALF_EVEN');
+}

package/src/Functions/Timer.js

@@ -0,0 +1,92 @@
+import prettyMilliseconds from 'pretty-ms';
+
+// From https://stackoverflow.com/a/57981688
+
+// const timer = new Timer();
+// timer.start();
+// setInterval(() => {
+//   const timeInSeconds = Math.round(timer.getTime() / 1000);
+//   document.getElementById('time').innerText = timeInSeconds;
+// }, 100)
+
+export default class Timer {
+	constructor(echo = false) {
+		this.echo = echo;
+		this.isRunning = false;
+		this.startTime = 0;
+		this.overallTime = 0;
+		this.lapTime = 0;
+	}
+
+	_getTimeElapsedSinceLastStart() {
+		if (!this.startTime) {
+			return 0;
+		}
+
+		return Date.now() - this.startTime;
+	}
+
+	_getTimeElapsedSinceLastLap() {
+		if (!this.lapTime) {
+			return 0;
+		}
+
+		return Date.now() - this.lapTime;
+	}
+
+	start() {
+		if (this.isRunning) {
+			return console.error('Timer is already running');
+		}
+
+		this.isRunning = true;
+
+		this.startTime = Date.now();
+	}
+
+	stop() {
+		if (!this.isRunning) {
+			return console.error('Timer is already stopped');
+		}
+
+		this.isRunning = false;
+
+		this.overallTime = this.overallTime + this._getTimeElapsedSinceLastStart();
+	}
+
+	reset() {
+		this.overallTime = 0;
+
+		if (this.isRunning) {
+		this.startTime = Date.now();
+			return;
+		}
+
+		this.startTime = 0;
+	}
+
+	getTime() {
+		if (!this.startTime) {
+			return 0;
+		}
+
+		if (this.isRunning) {
+			return this.overallTime + this._getTimeElapsedSinceLastStart();
+		}
+
+		return this.overallTime;
+	}
+
+	lap(name) {
+		const lapTime = this._getTimeElapsedSinceLastLap();
+		this.lapTime = Date.now();
+		if (this.echo) {
+			console.log(name, prettyMilliseconds(lapTime), prettyMilliseconds(this._getTimeElapsedSinceLastStart()));
+		}
+		return lapTime;
+	}
+
+	prettify(ms) {
+		return 
+	}
+}

package/src/Functions/deleteSecure.js

@@ -0,0 +1,6 @@
+import oneHatData from '@onehat/data';
+
+export default async function deleteSecure(key) {
+	const Secure = oneHatData.getRepository('Secure');
+	await Secure.deleteById(key);
+}

package/src/Functions/emptyFn.js

@@ -0,0 +1 @@
+export default function emptyFn() {}

package/src/Functions/getComponentFromType.js

@@ -0,0 +1,106 @@
+import {
+	Column,
+} from 'native-base';
+// import AccordionGridPanel from '../Components/Panel/AccordionGridPanel';
+import ArrayCheckboxGroup from '../Components/Form/Field/CheckboxGroup/ArrayCheckboxGroup';
+import ArrayCombo from '../Components/Form/Field/Combo/ArrayCombo';
+import ArrayRadioGroup from '../Components/Form/Field/RadioGroup/ArrayRadioGroup';
+// import BackButton from '../Components/Buttons/BackButton';
+import Blank from '../Components/Blank';
+import BooleanCombo from '../Components/Form/Field/Combo/BooleanCombo';
+// import CartButtonWithBadge from '../Components/Buttons/CartButtonWithBadge';
+import CheckboxGroup from '../Components/Form/Field/CheckboxGroup/CheckboxGroup';
+import CKEditor from '../Components/Form/Field/CKEditor/CKEditor';
+import Color from '../Components/Form/Field/Color';
+import Combo from '../Components/Form/Field/Combo/Combo';
+// import ComboEditor from '../Components/Form/Field/Combo/ComboEditor';
+import Container from '../Components/Container/Container';
+import DataMgt from '../Components/Screens/DataMgt';
+import Date from '../Components/Form/Field/Date';
+import DateRange from '../Components/Filter/DateRange';
+import DisplayField from '../Components/Form/Field/DisplayField';
+import FieldSet from '../Components/Form/FieldSet';
+import File from '../Components/Form/Field/File';
+import FiltersForm from '../Components/Form/FiltersForm';
+// import FiltersToolbar from '../Components/Toolbar/FiltersToolbar';
+import Form from '../Components/Form/Form';
+import Grid from '../Components/Grid/Grid';
+import GridPanel from '../Components/Panel/GridPanel';
+import IconButton from '../Components/Buttons/IconButton';
+import Input from '../Components/Form/Field/Input';
+import IntervalsCombo from '../Components/Form/Field/Combo/IntervalsCombo';
+import Label from '../Components/Form/Label';
+import MonthsCombo from '../Components/Form/Field/Combo/MonthsCombo';
+import Number from '../Components/Form/Field/Number';
+import NumberRange from '../Components/Filter/NumberRange';
+import Panel from '../Components/Panel/Panel';
+// import Picker from '../Components/Panel/Picker';
+import RadioGroup from '../Components/Form/Field/RadioGroup/RadioGroup';
+import TabPanel from '../Components/Panel/TabPanel';
+import Tag from '../Components/Form/Field/Combo/Tag';
+import TextArea from '../Components/Form/Field/TextArea';
+import Text from '../Components/Form/Field/Text';
+import TimezonesCombo from '../Components/Form/Field/Combo/TimezonesCombo';
+import Toggle from '../Components/Form/Field/Toggle';
+import Toolbar from '../Components/Toolbar/Toolbar';
+import YearsCombo from '../Components/Form/Field/Combo/YearsCombo';
+import _ from 'lodash';
+
+const
+	mapping = {
+		// AccordionGridPanel,
+		ArrayCheckboxGroup,
+		ArrayCombo,
+		ArrayRadioGroup,
+		// BackButton,
+		Blank,
+		BooleanCombo,
+		// CartButtonWithBadge,
+		CheckboxGroup,
+		CKEditor,
+		Color,
+		Column,
+		Combo,
+		// ComboEditor,
+		Container,
+		DataMgt,
+		Date,
+		DateRange,
+		DisplayField,
+		FieldSet,
+		File,
+		FiltersForm,
+		// FiltersToolbar,
+		Form,
+		Grid,
+		GridPanel,
+		IconButton,
+		Input,
+		IntervalsCombo,
+		Label,
+		MonthsCombo,
+		Number,
+		NumberRange,
+		Panel,
+		// Picker,
+		RadioGroup,
+		TabPanel,
+		Tag,
+		Text,
+		TextArea,
+		TimezonesCombo,
+		Toggle,
+		Toolbar,
+		YearsCombo,
+	};
+
+export default function getComponentFromType(type) {
+	if (_.isString(type)) {
+		return mapping[type];
+	}
+	return type;
+}
+
+export function registerComponents(newMapping) {
+	_.merge(mapping, newMapping);
+}

package/src/Functions/getIsMobile.js

@@ -0,0 +1,5 @@
+import { Platform } from 'react-native';
+
+export default function getIsMobile() {
+	return Platform.OS === 'ios' || Platform.OS === 'android';
+}

package/src/Functions/getPref.js

@@ -0,0 +1,7 @@
+import oneHatData from '@onehat/data';
+
+export default function getPref(key) {
+	const Prefs = oneHatData.getRepository('Prefs'),
+		pref = Prefs.getById(key);
+	return pref && pref.value;
+}

package/src/Functions/getSecure.js

@@ -0,0 +1,21 @@
+import oneHatData from '@onehat/data';
+
+export default async function getSecure(key) {
+	const Secure = oneHatData.getRepository('Secure'),
+		secure = Secure.getById(key);
+
+	if (!secure) {
+		return null;
+	}
+
+	let value = secure.value;
+
+	if (secure.isJson) {
+		value = JSON.parse(value);
+		if (secure.isOneBuild) {
+			const Repository = oneHatData.getRepository(secure.model);
+			value = await Repository.createStandaloneEntity(value);
+		}
+	}
+	return value;
+}

package/src/Functions/getTokenHeaders.js

@@ -0,0 +1,13 @@
+import AppGlobals from '../../AppGlobals';
+
+export default function(clearAll = false) {
+	const reduxState = AppGlobals.redux.getState();
+	if (!reduxState.App.user || (!reduxState.App.user.token && !reduxState.App.user.users__token)) {
+		return {};
+	}
+	const token = reduxState.App.user.token || reduxState.App.user.users__token;
+	return {
+		Authentication: clearAll ? null : `Token ${token}`,
+		// Cookie: null,
+	};
+}

package/src/Functions/inArray.js

@@ -0,0 +1,5 @@
+import _ from 'lodash';
+
+export default function inArray(needle, haystack) {
+	return _.indexOf(haystack, needle) !== -1;
+}

package/src/Functions/isJson.js

@@ -0,0 +1,8 @@
+export default function isJson(value) {
+	try {
+		JSON.parse(value);
+	} catch (e) {
+		return false;
+	}
+	return true;
+}

package/src/Functions/processImage.js

@@ -0,0 +1,16 @@
+import * as ImageManipulator from 'expo-image-manipulator';
+
+export default async function processImage(uri) {
+	const file = await ImageManipulator.manipulateAsync(uri,
+		[{
+			resize: {
+				width: 1000
+			}
+		}],
+		{
+			compress: 0.3,
+			format: ImageManipulator.SaveFormat.JPEG,
+			base64: true,
+		});
+	return file;
+}

package/src/Functions/setPref.js

@@ -0,0 +1,14 @@
+import oneHatData from '@onehat/data';
+
+export default function setPref(key, value) {
+	const Prefs = oneHatData.getRepository('Prefs'),
+		pref = Prefs.getById(key);
+	if (pref) {
+		pref.properties.value.setValue(value);
+	} else {
+		Prefs.add({
+			key,
+			value,
+		});
+	}
+}

package/src/Functions/setProgress.js

@@ -0,0 +1,49 @@
+
+import {
+	SET_PROGRESS_MESSAGE,
+	SET_PROGRESS_PERCENTAGE,
+} from '../../Models/actions/AppActions';
+import AppGlobals from '../../AppGlobals';
+
+let totalSegments = 1,
+	currentSegment = 1;
+
+function setTotalSegments(total) {
+	totalSegments = total;
+}
+function setCurrentSegment(segment) {
+	currentSegment = segment;
+}
+
+
+export function setProgressMessage(message, segments = 1) {
+	// Reset progress
+	setTotalSegments(segments);
+	setCurrentSegment(1);
+
+	const Store = AppGlobals.redux;
+	Store.dispatch({
+		type: SET_PROGRESS_MESSAGE,
+		message,
+	});
+}
+
+export function setProgressPercentage(percentage = 100, segment = null) {
+	if (segment !== null) {
+		setCurrentSegment(segment);
+	}
+
+	// Calculate the percentage of this segment
+	let totalPercentage = percentage;
+	if (totalSegments > 1) {
+		const progressPerSegment = 100 / totalSegments,
+			accumulatedProgress = (currentSegment - 1) * progressPerSegment;
+		totalPercentage = accumulatedProgress + (percentage * progressPerSegment);
+	}
+
+	const Store = AppGlobals.redux;
+	Store.dispatch({
+		type: SET_PROGRESS_PERCENTAGE,
+		percentage: totalPercentage,
+	});
+}

package/src/Functions/setSecure.js

@@ -0,0 +1,35 @@
+import oneHatData from '@onehat/data';
+
+export default async function setSecure(key, value) {
+	const Secure = oneHatData.getRepository('Secure'),
+		secure = Secure.getById(key);
+	let isOneBuild = false,
+		isJson = false,
+		model = null;
+	if (typeof value !== 'string') {
+		if (value.getDataForNewEntity) {
+			model = value.repository.name;
+			value = value.getDataForNewEntity();
+			isOneBuild = true;
+		}
+		value = JSON.stringify(value);
+		isJson = true;
+	}
+	if (secure) {
+		secure.setValues({
+			value,
+			isOneBuild,
+			isJson,
+			model,
+		});
+		await Secure.save(secure);
+	} else {
+		await Secure.add({
+			key,
+			value,
+			isOneBuild,
+			isJson,
+			model,
+		});
+	}
+}

package/src/Functions/setUiMode.js

@@ -0,0 +1,5 @@
+import UiConfig from '../UiConfig';
+
+export default function setUiMode(mode) {
+	UiConfig.mode = mode;
+}

package/src/Functions/sleep.js

@@ -0,0 +1,3 @@
+export default function(ms = 1000) {
+	return new Promise(resolve => setTimeout(resolve, ms));
+}

package/src/Functions/testProps.js

@@ -0,0 +1,24 @@
+import { Platform } from "react-native";
+
+export default function testProps(id) {
+	if (typeof __DEV__ !== 'undefined' && !__DEV__) {
+		return {};
+	}
+	if (!window && Platform.OS === 'android') {
+		return {
+			accessibilityLabel: id,
+			accessible: true,
+		};
+	}
+	return {
+		testID: id,
+	};
+}
+
+export function pickerTestProps(id) {
+	return {
+		pickerProps: {...testProps(id + 'Picker')},
+		touchableWrapperProps: {...testProps(id + 'Trigger')},
+		touchableDoneProps: {...testProps(id + 'Done')},
+	};
+}

package/src/Functions/trackEngagementHit.js

@@ -0,0 +1,11 @@
+export default function trackEngagementHit(repository, data) {
+	const method = 'POST',
+		url = 'Engagements/trackEngagementHit';
+
+	return repository._send(method, url, data)
+					.then((result) => {
+						if (repository.debugMode) {
+							console.log(url + ' result', result);
+						}
+					});
+}

package/src/Functions/verifyCompleted.js

@@ -0,0 +1,18 @@
+export default function verifyCompleted(completed, expectedNum, timeoutAfterTries = 60) {
+	let attempts = 0;
+	return new Promise((resolve, reject) => {
+		function check() {
+			if (attempts === timeoutAfterTries) {
+				reject(false);
+				return;
+			}
+			attempts++;
+			if (completed.length === expectedNum) {
+				resolve(true);
+				return;
+			}
+			setTimeout(check, 100);
+		}
+		check();
+	});
+}

package/src/Functions/waitFor.js

@@ -0,0 +1,16 @@
+import sleep from './sleep';
+
+export default async function waitFor(fn, pollingFrequencyMs = 1000, timeoutMs = null) {
+	let timeElapsed = 0;
+	const isTimedOut = () => {
+		if (!timeoutMs) {
+			return false;
+		}
+		timeElapsed += pollingFrequencyMs;
+		return timeElapsed > timeoutMs;
+	};
+    while(!fn() && !isTimedOut()) {
+		await sleep(pollingFrequencyMs);
+	}
+    return fn();
+}

package/src/Hooks/useAppState.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+import { AppState } from 'react-native';
+
+// DEPRECATED: Use @react-native-community/Hooks instead.
+
+// Copied from react-native-appstate-hook found here: https://github.com/amrlabib/react-native-appstate-hook
+export default function useAppState(settings) {
+	const {
+			onChange,
+			onForeground,
+			onBackground } = settings || {},
+		[appState, setAppState] = useState(AppState.currentState);
+
+	useEffect(() => {
+		function handleAppStateChange(nextAppState) {
+			if (nextAppState === 'active' && appState !== 'active') {
+				isValidFunction(onForeground) && onForeground();
+			} else if (appState === 'active' && nextAppState.match(/inactive|background/)) {
+				isValidFunction(onBackground) && onBackground();
+			}
+			setAppState(nextAppState);
+			isValidFunction(onChange) && onChange(nextAppState);
+		}
+		AppState.addEventListener('change', handleAppStateChange);
+		
+		return () => AppState.removeEventListener('change', handleAppStateChange);
+	}, [onChange, onForeground, onBackground, appState]);
+
+	// settings validation
+	function isValidFunction(func) {
+		return func && typeof func === 'function';
+	}
+	return { appState };
+}

package/src/Hooks/useAsync.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+// From https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component
+
+export default function useAsync(asyncFn, onSuccess) {
+	useEffect(() => {
+		let isActive = true;
+		asyncFn().then(data => {
+			if (isActive) onSuccess(data);
+		});
+		return () => { isActive = false };
+	}, [asyncFn, onSuccess]);
+}