@onehat/ui 0.1.2 → 0.2.0

package/src/Components/Hoc/withPresetButtons.js

@@ -0,0 +1,239 @@
+import React, { useState, useEffect, } from 'react';
+import Clipboard from '../Icons/Clipboard';
+import Duplicate from '../Icons/Duplicate';
+import Edit from '../Icons/Edit';
+import Eye from '../Icons/Eye';
+import Trash from '../Icons/Trash';
+import Plus from '../Icons/Plus';
+import Print from '../Icons/Print';
+import _ from 'lodash';
+import inArray from '../../Functions/inArray';
+
+// Note: A 'present button' will create both a context menu item 
+// and a toolbar button that match in text label, icon, and handler.
+
+const presetButtons = [
+	'add',
+	'edit',
+	'delete',
+	'copy',
+	'view',
+	'duplicate',
+	// 'print',
+];
+
+export default function withPresetButtons(WrappedComponent) {
+	return (props) => {
+		const {
+				// extract and pass
+				contextMenuItems,
+				additionalToolbarButtons,
+				onChangeColumnsConfig,
+				...propsToPass
+			} = props,
+			{
+				// for local use
+				selection,
+				onAdd,
+				onEdit,
+				onDelete,
+				onView,
+				onDuplicate,
+				useEditor = true,
+				disableAdd = false,
+				disableEdit = false,
+				disableDelete = false,
+				disableView = false,
+				disableCopy = false,
+				disableDuplicate = false,
+				disablePrint = false,
+
+				// withEditor
+				userCanEdit = true,
+				userCanView = true,
+			} = props,
+			[isReady, setIsReady] = useState(false),
+			[localContextMenuItems, setLocalContextMenuItems] = useState([]),
+			[localAdditionalToolbarButtons, setLocalAdditionalToolbarButtons] = useState([]),
+			[localColumnsConfig, setLocalColumnsConfig] = useState([]),
+			onChangeColumnsConfigDecorator = (columnsConfig) => {
+				setLocalColumnsConfig(columnsConfig);
+				if (onChangeColumnsConfig) {
+					onChangeColumnsConfig(columnsConfig);
+				}
+			},
+			isTypeDisabledCompletely = (type) => {
+				let isDisabled = false;
+				switch(type) {
+					case 'add':
+						if (disableAdd || !useEditor) {
+							isDisabled = true;
+						}
+						break;
+					case 'edit':
+						if (disableEdit || !useEditor) {
+							isDisabled = true;
+						}
+						break;
+					case 'delete':
+						if (disableDelete || !useEditor) {
+							isDisabled = true;
+						}
+						break;
+					case 'view':
+						if (disableView) {
+							isDisabled = true;
+						}
+						break;
+					case 'copy':
+						if (disableCopy) {
+							isDisabled = true;
+						}
+						break;
+					case 'duplicate':
+						if (disableDuplicate || !useEditor) {
+							isDisabled = true;
+						}
+						break;
+					case 'print':
+						if (disablePrint) {
+							isDisabled = true;
+						}
+						break;
+					default:
+				}
+				return isDisabled;
+			},
+			getPresetButtonProps = (type) => {
+				let text,
+					handler,
+					icon = null,
+					isDisabled = false;
+				switch(type) {
+					case 'add':
+						text = 'Add';
+						handler = onAdd;
+						icon = <Plus />;
+						break;
+					case 'edit':
+						text = 'Edit';
+						handler = onEdit;
+						icon = <Edit />;
+						break;
+					case 'delete':
+						text = 'Delete';
+						handler = onDelete;
+						icon = <Trash />;
+						break;
+					case 'view':
+						text = 'View';
+						handler = onView;
+						icon = <Eye />;
+						isDisabled = !selection.length || selection.length !== 1;
+						break;
+					case 'copy':
+						text = 'Copy to Clipboard';
+						handler = onCopyToClipboard;
+						icon = <Clipboard />;
+						isDisabled = !selection.length;
+						break;
+					case 'duplicate':
+						text = 'Duplicate';
+						handler = onDuplicate;
+						icon = <Duplicate />;
+						isDisabled = !selection.length || selection.length !== 1;
+						break;
+					// case 'print':
+					// 	text = 'Print';
+					// 	handler = onPrint;
+					// 	icon = <Print />;
+					// 	break;
+					default:
+				}
+				return {
+					text,
+					handler,
+					icon,
+					isDisabled,
+				};
+			},
+			generatePresetButtons = () => {
+				const
+					localContextMenuItems = [],
+					localAdditionalToolbarButtons = [];
+				
+				_.each(presetButtons, (type) => {
+					if (isTypeDisabledCompletely(type)) { // i.e. not just temporarily disabled because of selection
+						return;
+					}
+					if ((!userCanEdit && inArray(type, ['add', 'edit', 'delete', 'duplicate',])) ||
+						(!userCanView && type === 'view')) {
+						return;
+					}
+	
+					const config = getPresetButtonProps(type);
+	
+					localContextMenuItems.push(config);
+					localAdditionalToolbarButtons.push(config);
+				});
+	
+				setLocalContextMenuItems(localContextMenuItems);
+				setLocalAdditionalToolbarButtons(localAdditionalToolbarButtons);
+			},
+			onCopyToClipboard = () => {
+				// Get text of all selected rows
+				let text;
+				if (selection.length) {
+					const
+						headerText = _.map(localColumnsConfig, (config) => config.header).join("\t"),
+						rowTexts = _.map(selection, (entity) => {
+							const values = [];
+							_.each(localColumnsConfig, (config) => {
+								values.push(entity[config.fieldName]);
+							});
+							return values.join("\t");
+						});
+					text = [headerText, ...rowTexts].join("\n");
+				} else {
+					text = 'Nothing selected to copy!';
+				}
+	
+				// Send it to clipboard
+				navigator.clipboard.writeText(text);
+			};
+			// onPrint = () => {
+			// 	debugger;
+			// };
+
+		useEffect(() => {
+			generatePresetButtons();
+			if (!isReady) {
+				setIsReady(true);
+			}
+		}, [selection, localColumnsConfig]);
+
+		if (!isReady) {
+			return null;
+		}
+	
+		const
+			contextMenuItemsToPass = [
+				...localContextMenuItems,
+			],
+			additionalToolbarButtonsToPass = [
+				...localAdditionalToolbarButtons,
+			];
+		if (contextMenuItems) {
+			contextMenuItemsToPass.concat(contextMenuItems);
+		}
+		if (additionalToolbarButtons) {
+			additionalToolbarButtonsToPass.concat(additionalToolbarButtons);
+		}
+		return <WrappedComponent
+					{...propsToPass}
+					contextMenuItems={contextMenuItemsToPass}
+					additionalToolbarButtons={additionalToolbarButtonsToPass}
+					onChangeColumnsConfig={onChangeColumnsConfigDecorator}
+				/>;
+	};
+}

package/src/Components/Hoc/withSelection.js

@@ -0,0 +1,332 @@
+import { useState, useEffect, } from 'react';
+import {
+	SELECTION_MODE_SINGLE,
+	SELECTION_MODE_MULTI,
+	SELECT_UP,
+	SELECT_DOWN,
+} from '../../Constants/Selection';
+import inArray from '../../Functions/inArray';
+import _ from 'lodash';
+
+export default function withSelection(WrappedComponent) {
+	return (props) => {
+
+		if (props.setSelection) {
+			// bypass everything, since we're already using withSelection() in hierarchy.
+			// For example, Combo has withSelection(), and intenally it uses Grid which also has withSelection(),
+			// but we only need it defined once for the whole thing.
+			return <WrappedComponent {...props} />;
+		}
+
+		const
+			{
+				selection,
+				defaultSelection,
+				onChangeSelection,
+				selectionMode = SELECTION_MODE_SINGLE, // SELECTION_MODE_MULTI, SELECTION_MODE_SINGLE
+				autoSelectFirstItem = false,
+				fireEvent,
+
+				// withValue
+				value,
+				setValue,
+
+				// withData
+				Repository,
+				data,
+				idIx,
+				displayIx,
+			} = props,
+			usesWithValue = !!setValue,
+			[localSelection, setLocalSelection] = useState(selection || defaultSelection || []),
+			[isReady, setIsReady] = useState(selection || false), // if selection is already defined, or value is not null and we don't need to load repository, it's ready
+			setSelection = (selection) => {
+				setLocalSelection(selection);
+				if (onChangeSelection) {
+					onChangeSelection(selection);
+				}
+				if (fireEvent) {
+					fireEvent('changeSelection', selection);
+				}
+			},
+			selectNext = () => {
+				selectDirection(SELECT_DOWN);
+			},
+			selectPrev = () => {
+				selectDirection(SELECT_UP);
+			},
+			selectDirection = (which) => {
+				const { items, max, min, noSelection, } = getMaxMinSelectionIndices();
+				let newIx;
+				if (which === SELECT_DOWN) {
+					if (noSelection || max === items.length -1) {
+						// select first
+						newIx = 0;
+					} else {
+						newIx = max +1;
+					}
+				} else if (which === SELECT_UP) {
+					if (noSelection || min === 0) {
+						// select last
+						newIx = items.length -1;
+					} else {
+						newIx = min -1;
+					}
+				}
+				if (items[newIx]) {
+					setSelection([items[newIx]]);
+				}
+			},
+			addToSelection = (item) => {
+				let newSelection = [];
+				newSelection = _.clone(localSelection); // so we get a new object, so descendants rerender
+				newSelection.push(item);
+				setSelection(newSelection);
+			},
+			removeFromSelection = (item) => {
+				let newSelection = [];
+				if (Repository) {
+					newSelection = _.remove(localSelection, (sel) => sel !== item);
+				} else {
+					newSelection = _.remove(localSelection, (sel) => sel[idIx] !== item[idIx]);
+				}
+				setSelection(newSelection);
+			},
+			deselectAll = () => {
+				if (!_.isEmpty(localSelection)) {
+					setSelection([]);
+				}
+			},
+			getMaxMinSelectionIndices = () => {
+				let items,
+					currentlySelectedRowIndices = [];
+				if (Repository) {
+					items = Repository.getEntitiesOnPage();
+				} else {
+					items = data;
+				}
+				_.each(items, (item, ix) => {
+					if (isInSelection(item)) {
+						currentlySelectedRowIndices.push(ix);
+					}
+				});
+				if (currentlySelectedRowIndices.length === 0) {
+					return { items, noSelection: true, };
+				}
+				const
+					max = Math.max(...currentlySelectedRowIndices),
+					min = Math.min(...currentlySelectedRowIndices);
+				
+				return { items, max, min, noSelection: false, };
+			},
+			selectRangeTo = (item) => {
+				// Select above max or below min to this one
+				const
+					currentSelectionLength = localSelection.length,
+					index = getIndexOfSelectedItem(item);
+				let newSelection = _.clone(localSelection); // so we get a new object, so descendants rerender
+
+				if (currentSelectionLength) {
+					const { items, max, min, } = getMaxMinSelectionIndices();
+					let i,
+						itemAtIx;
+					if (max < index) {
+						// all other selections are below the current;
+						// Range is from max+1 up to index
+						for (i = max +1; i < index; i++) {
+							itemAtIx = items[i];
+							newSelection.push(itemAtIx);
+						}
+					} else if (min > index) {
+						// all other selections are above the current;
+						// Range is from min-1 down to index
+						for (i = min -1; i > index; i--) {
+							itemAtIx = items[i];
+							newSelection.push(itemAtIx);
+						}
+					}
+				}
+				newSelection.push(item);
+				setSelection(newSelection);
+			},
+			isInSelection = (item) => {
+				if (Repository) {
+					return inArray(item, localSelection);
+				}
+
+				const found = _.find(localSelection, (selectedItem) => {
+						return selectedItem[idIx] === item[idIx];
+					});
+				return !!found;
+			},
+			getIndexOfSelectedItem = (item) => {
+				// Gets ix of entity on page, or element in data array
+				if (Repository) {
+					const entities = Repository.getEntitiesOnPage();
+					return entities.indexOf(item);
+				}
+				
+				let found;
+				_.each(data, (datum, ix) => {
+					if (datum[idIx] === item[idIx]) {
+						found = ix;
+						return false; // break loop
+					}
+				});
+				return found;
+			},
+			getIdFromSelection = () => {
+				if (!localSelection[0]) {
+					return null;
+				}
+				const values = _.map(localSelection, (item) => {
+					if (Repository) {
+						return item.id;
+					}
+					return item[idIx];
+				});
+				if (values.length === 1) {
+					return values[0];
+				}
+				return values;
+			},
+			getDisplayFromSelection = (selection) => {
+				if (!selection[0]) {
+					return '';
+				}
+
+				return _.map(selection, (item) => {
+							if (Repository) {
+								return item.displayValue;
+							}
+							return item[displayIx];
+						})
+						.join(', ');
+			},
+			conformValueToSelection = () => {
+				if (!setValue) {
+					return;
+				}
+				// Adjust the value to match the selection
+				const localValue = getIdFromSelection();
+				if (!_.isEqual(localValue, value)) {
+					setValue(localValue);
+				}
+			},
+			conformSelectionToValue = () => {
+				// adjust the selection to match the value
+				let newSelection = [];
+				if (Repository) {
+					// Get entity or entities that match value
+					if ((_.isArray(value) && !_.isEmpty(value)) || !!value) {
+						if (_.isArray(value)) {
+							newSelection = Repository.getBy((entity) => inArray(entity.id, value));
+						} else {
+							const found = Repository.getById(value);
+							if (found) {
+								newSelection.push(found);
+							}
+						}
+					}
+				} else {
+					// Get data item or items that match value
+					if (!_.isNil(value) && (_.isBoolean(value) || _.isNumber(value) || !_.isEmpty(value))) {
+						let currentValue = value;
+						if (!_.isArray(currentValue)) {
+							currentValue = [currentValue];
+						}
+						_.each(currentValue, (val) => {
+							// Search through data
+							const found = _.find(data, (item) => {
+								if (_.isString(item[idIx]) && _.isString(val)) {
+									return item[idIx].toLowerCase() === val.toLowerCase();
+								}
+								return item[idIx] === val;
+							});
+							if (found) {
+								newSelection.push(found);
+							}
+						});
+					}
+				}
+
+				if (!_.isEqual(newSelection, localSelection)) {
+					setSelection(newSelection);
+				}
+			};
+
+		useEffect(() => {
+			if (isReady) {
+				return () => {};
+			}
+
+			(async () => {
+
+				if (Repository && usesWithValue && !Repository.isLoaded && Repository.isRemote && !Repository.isAutoLoad && !Repository.isLoading) {
+					// on initialization, we can't conformSelectionToValue if the repository is not yet loaded, 
+					// so first load repo, then conform to value
+					await Repository.load();
+				}
+
+				if (usesWithValue && !_.isNil(value)) {
+
+					conformSelectionToValue();
+
+				} else if (autoSelectFirstItem) {
+					let newSelection = [];
+					if (Repository) {
+						const entitiesOnPage = Repository.getEntitiesOnPage();
+						newSelection = entitiesOnPage[0] ? [entitiesOnPage[0]] : [];
+					} else {
+						newSelection = data[0] ? [data[0]] : [];
+					}
+					setSelection(newSelection);
+				}
+
+				setIsReady(true);
+
+			})();
+
+		}, []);
+
+
+		if (usesWithValue) {
+			useEffect(() => {
+				if (!isReady) {
+					return () => {};
+				}
+	
+				conformSelectionToValue();
+	
+			}, [value, isReady]);
+	
+			useEffect(() => {
+				if (!isReady) {
+					return () => {};
+				}
+	
+				conformValueToSelection();
+			}, [selection, isReady]);
+		}
+
+		if (!isReady) {
+			return null;
+		}
+		
+		return <WrappedComponent
+					{...props}
+					selection={localSelection}
+					setSelection={setSelection}
+					selectionMode={selectionMode}
+					selectNext={selectNext}
+					selectPrev={selectPrev}
+					removeFromSelection={removeFromSelection}
+					addToSelection={addToSelection}
+					deselectAll={deselectAll}
+					selectRangeTo={selectRangeTo}
+					isInSelection={isInSelection}
+					getIdFromSelection={getIdFromSelection}
+					getDisplayFromSelection={getDisplayFromSelection}
+				/>;
+	};
+}

package/src/Components/Hoc/withTooltip.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {
+	Tooltip,
+} from 'native-base';
+
+// NOTE: Can't seem to get this working for some elements like Combo or File
+
+export default function withTooltip(WrappedComponent) {
+	return (props) => {
+		const {
+				tooltip,
+				tooltipPlacement = 'bottom',
+			} = props;
+		if (!tooltip) {
+			return <WrappedComponent {...props} />;
+		}
+		return <Tooltip label={tooltip} placement={tooltipPlacement}>
+					<WrappedComponent {...props} />
+				</Tooltip>;
+	};
+}

package/src/Components/Hoc/withValue.js

@@ -0,0 +1,87 @@
+import { useState, useEffect, } from 'react';
+import isJson from '../../Functions/isJson';
+import _ from 'lodash';
+
+// This HOC gives the component value props, primarily for a Form Field.
+
+export default function withValue(WrappedComponent) {
+	return (props) => {
+
+		if (props.setValue) {
+			// bypass everything, since we're already using withValue() in hierarchy.
+			// For example, Combo has withValue(), and intenally it uses Input which also has withValue(),
+			// but we only need it defined once for the whole thing.
+			return <WrappedComponent {...props} />;
+		}
+
+		const
+			{
+				onChangeValue,
+				value,
+				startingValue = null,
+
+				// withData
+				Repository,
+				idIx,
+			} = props,
+			[localValue, setLocalValue] = useState(startingValue || value),
+			setValue = (newValue) => {
+				if (newValue === localValue) {
+					return;
+				}
+
+				setLocalValue(newValue);
+				
+				if (onChangeValue) {
+					if (_.isArray(newValue)) {
+						// convert from inner value to outer value
+						newValue = JSON.stringify(newValue);
+					}
+					onChangeValue(newValue);
+				}
+			},
+			onChangeSelection = (selection) => {
+				let value = null,
+					values;
+				if (selection.length) {
+					if (Repository) {
+						if (selection.length === 1) {
+							value = selection[0].id;
+						} else {
+							values = _.map(selection, (entity) => entity.id);
+						}
+					} else {
+						if (selection.length === 1) {
+							value = selection[0][idIx];
+						} else {
+							values = _.map(selection, (item) => item[idIx]);
+						}
+					}
+				}
+				if (values) {
+					value = values;
+				}
+				setValue(value);
+			};
+
+		useEffect(() => {
+			if (!_.isEqual(value, localValue)) {
+				setLocalValue(value);
+			}
+		}, [value]);
+
+		
+		let convertedValue = localValue;
+		if (_.isString(localValue) && isJson(localValue) && !_.isNil(localValue)) {
+			// convert from outer value to inner value
+			convertedValue = JSON.parse(localValue);
+		}
+
+		return <WrappedComponent
+					{...props}
+					value={convertedValue}
+					setValue={setValue}
+					onChangeSelection={onChangeSelection}
+				/>;
+	};
+}