@onehat/ui 0.1.2 → 0.2.0

package/src/Components/Grid/SenchaGrid.js

@@ -0,0 +1,421 @@
+import { useState, useEffect, } from 'react';
+import {
+	Column,
+	Row,
+	Text,
+} from 'native-base';
+import {
+	SenchaGrid,
+	AddressColumn,
+	BooleanColumn,
+	CheckboxColumn,
+	ColorColumn,
+	Column as Col,
+	DateColumn,
+	DecimalColumn,
+	EmailColumn,
+	FloatColumn,
+	IntegerColumn,
+	MoneyColumn,
+	NumberColumn,
+	PercentageColumn,
+	PhoneColumn,
+	TreeColumn,
+} from '@sencha/sencha-grid'; // https://www.npmjs.com/package/@sencha/sencha-grid
+import '@sencha/sencha-grid/dist/themes/grui.css';
+import testProps from '../../Functions/testProps';
+import useForceUpdate from '../../Hooks/useForceUpdate';
+import Loading from '../Messages/Loading';
+import Toolbar from '../Toolbar/Toolbar';
+import PaginationToolbar from '../Toolbar/PaginationToolbar';
+import NoRecordsFound from './NoRecordsFound';
+import AngleRight from '../Icons/AngleRight';
+import _ from 'lodash';
+
+// This grid makes use of @sencha/sencha-grid
+
+export default function Grid(props) {
+	const {
+			Repository,
+			topToolbar,
+			bottomToolbar = 'pagination',
+			columnsConfig = [], // json configurations for each column
+			showSummaries = false,
+			showEditors = false,
+			showFilters = false,
+			showRowExpander = false,
+			cellEditing = false,
+			rowEditing = false,
+			// columnProps = {},
+			// getRowProps = () => {
+			// 	return {
+			// 		bg: '#fff',
+			// 		p: 2,
+			// 	};
+			// },
+			gridProps = {},
+			pullToRefresh = true,
+			hideRightColumn = true,
+			disableLoadingIndicator = false,
+			noneFoundText,
+			disableReloadOnChangeFilters = false,
+
+			// properties
+			data,
+			treeData,
+			columnLines = true,
+			grouped = false,
+			groupFooter = false,
+			groupField,
+			hideHeaders = false,
+			scrollable = false,
+			itemConfig, // { body: <RowBodyComponent /> },
+			itemRipple, // { color: 'green' },
+			hideRowLines = false,
+			rowNumbers = false,
+			selectable = {
+				cells: false,
+				checkbox: true,
+				// checkboxColumnIndex: 0,
+				columns: true,
+				deselectable: true,
+				disabled: false,
+				drag: true,
+				extensible: true,
+				headerCheckbox: true,
+				mode: 'multi', // single | multi
+				reducible: true,
+				rows: true,
+			},
+			shadow = false,
+			sortable = true,
+			variableHeights = true,
+
+
+			// events
+			onBeforeComplete,
+			onBeforeEdit,
+			onBeforeGroupCollapse,
+			onBeforeGroupExpand,
+			onBeforeStartEdit,
+			onBeforeCancelEdit,
+			onCellSelection,
+			onColumnAdd,
+			onColumnHide,
+			onColumnMenuCreated,
+			onColumnMove,
+			onColumnResize,
+			onColumnSelection,
+			onColumnSort,
+			onCompleteEdit,
+			onDeselect,
+			onEdit,
+			onEditRestrict,
+			onInitialized,
+			onPainted,
+			onSelect,
+			onStartEdit,
+			onUpdateData,
+			onValidateEdit,
+
+		} = props,
+		entities = Repository.entities,
+		[isLoading, setIsLoading] = useState(false),
+		forceUpdate = useForceUpdate(),
+		onRefresh = () => Repository.load(),
+		generateColumnComponents = () => {
+			const columnComponents = [];
+			_.each(columnsConfig, (column, ix) => {
+
+				// This destructuring sets the default values
+				const {
+						type, // specify which sencha column type to use
+
+						align = 'left',
+						dateTimeFormatLocales = 'en-US',
+						editable = false,
+						editor, // BooleanEditor | CheckboxEditor | ColorEditor | DateEditor | IEditor | NumberEditor | PhoneEditor | SelectEditor | TextEditor | 
+						flex,
+						field, // required
+						format,
+						groupable = false,
+						hideable = false,
+						hidden = false,
+						locked = false,
+						menu, // [{ text: 'menu1' }, { text: 'menu2' }]
+						menuDisabled = false,
+						minWidth,
+						renderer, // React component will render the output
+						resizable = true,
+						sortable = true,
+						style,
+						summary, // sum, min, max, average, variance, variancep, stddev, stddevp
+						summaryCell, // 'numbercell'
+						summaryRenderer, // fn that returns value as formatted string, like (value) => 'Maximum Cost: ' + value;
+						text, // i.e. header
+						width,
+					} = column,
+
+					// This var incorporates the default values, and puts them back in an obj we pass to column
+					propsToPass = {
+						align,
+						dateTimeFormatLocales,
+						editable,
+						field,
+						groupable,
+						hideable,
+						hidden,
+						locked,
+						menuDisabled,
+						resizable,
+						sortable,
+					},
+					propsToCheck = {
+						editor,
+						format,
+						menu,
+						minWidth,
+						renderer,
+						style,
+						summary,
+						summaryCell,
+						summaryRenderer,
+						text,
+					};
+				_.each(propsToCheck, (prop, name) => {
+					if (!_.isEmpty(prop)) {
+						propsToPass[name] = prop;
+					}
+				});
+
+				if (!flex && !width) {
+					propsToPass.flex = 1;
+				} else if (flex) {
+					propsToPass.flex = flex;
+				} else if (width) {
+					propsToPass.width = width;
+				}
+
+				let ColumnType;
+				switch(type) {
+					case 'address':
+						ColumnType = AddressColumn;
+						break;
+					case 'bool':
+						ColumnType = BooleanColumn;
+						break;
+					case 'checkbox':
+						ColumnType = CheckboxColumn;
+						break;
+					case 'color':
+						ColumnType = ColorColumn;
+						break;
+					case 'date':
+					case 'datetime':
+					// case 'time':
+						ColumnType = DateColumn;
+						break;
+					case 'decimal':
+						ColumnType = DecimalColumn;
+						break;
+					case 'email':
+						ColumnType = EmailColumn;
+						break;
+					case 'float':
+						ColumnType = FloatColumn;
+						break;
+					case 'int':
+						ColumnType = IntegerColumn;
+						break;
+					case 'currency':
+						ColumnType = MoneyColumn;
+						break;
+					case 'percentInt':
+						ColumnType = NumberColumn;
+						break;
+					case 'percent':
+						ColumnType = PercentageColumn;
+						break;
+					case 'phone':
+						ColumnType = PhoneColumn;
+						break;
+					case 'tree':
+						ColumnType = TreeColumn;
+						break;
+					default:
+						ColumnType = Col;
+				}
+
+				if (!_.isEmpty(editor)) {
+					propsToPass.editor = editor;
+				}
+
+				columnComponents.push(<ColumnType key={ix} {...propsToPass} />);
+			});
+
+			if (!hideRightColumn) {
+				columnComponents.push(<AngleRight
+					key={columnComponents.length} 
+					color="#aaa"
+					variant="ghost"
+					w={30}
+					alignSelf="center"
+					ml={3}
+				/>);
+			}
+			return columnComponents;
+		},
+		convertEntitiesToSenchaGrid = () => {
+			return _.map(Repository.entities, (entity) => {
+				const rec = {};
+				_.each(columnsConfig, (config) => {
+					rec[config.field] = entity[config.field];
+				});
+				return rec;
+			});
+		},
+		getPlugins = () => {
+			const plugins = {};
+			if (showSummaries) {
+				plugins.gridsummaryrow = true;
+			}
+			if (showEditors) {
+				plugins.gridcellediting = true;
+			}
+			if (rowEditing) {
+				plugins.rowedit = { autoConfirm: false, };
+			}
+			if (showRowExpander) {
+				plugins.rowexpander = true;
+			}
+			if (cellEditing) {
+				plugins.cellediting = { clicksToEdit: 2, };
+			}
+			if (showFilters) {
+				plugins.gridfilters = true;
+			}
+			if (grouped) {
+				plugins.groupingpanel = true;
+			}
+			if (pullToRefresh) {
+				// plugins.pullrefresh = true; // causes a crash!
+			}
+			return plugins;
+		};
+
+	useEffect(() => {
+		if (!Repository || !Repository.on) {
+			return;
+		}
+		if (disableLoadingIndicator) {
+			return;
+		}
+		const
+			setTrue = () => setIsLoading(true),
+			setFalse = () => setIsLoading(false),
+			onChangeFilters = () => {
+				if (!Repository.isAutoLoad && Repository.isLoaded && !disableReloadOnChangeFilters) {
+					Repository.reload();
+				}
+			};
+
+		Repository.on('beforeLoad', setTrue);
+		Repository.on('load', setFalse);
+		Repository.ons(['changePage', 'changePageSize', 'changeData', 'change'], forceUpdate);
+		Repository.on('changeFilters', onChangeFilters);
+
+		// LEFT OFF HERE.
+		// If changing the pageSize to 5, it says that it's showing page 1, but it doesn't show the first item.
+		// Nav to other pages doesn't work right yet.
+		
+		return () => {
+			Repository.off('beforeLoad', setTrue);
+			Repository.off('load', setFalse);
+			Repository.offs(['changePage', 'changePageSize', 'changeData', 'change'], forceUpdate);
+			Repository.off('changeFilters', onChangeFilters);
+		};
+	}, [Repository, disableLoadingIndicator, disableReloadOnChangeFilters, forceUpdate]);
+	
+	if (!props.Repository) {
+		return null;
+	}
+
+	const propsToPass = {
+			columnLines,
+			grouped,
+			groupFooter,
+			hideHeaders,
+			scrollable,
+			hideRowLines,
+			rowNumbers,
+			selectable,
+			shadow,
+			sortable,
+			variableHeights,
+		},
+		columnComponents = generateColumnComponents(),
+		plugins = getPlugins(),
+		propsToCheck = {
+			plugins,
+			groupField,
+			itemConfig,
+			itemRipple,
+			onBeforeComplete,
+			onBeforeEdit,
+			onBeforeGroupCollapse,
+			onBeforeGroupExpand,
+			onBeforeStartEdit,
+			onBeforeCancelEdit,
+			onCellSelection,
+			onColumnAdd,
+			onColumnHide,
+			onColumnMenuCreated,
+			onColumnMove,
+			onColumnResize,
+			onColumnSelection,
+			onColumnSort,
+			onCompleteEdit,
+			onDeselect,
+			onEdit,
+			onEditRestrict,
+			onInitialized,
+			onPainted,
+			onSelect,
+			onStartEdit,
+			onUpdateData,
+			onValidateEdit,
+		}
+	_.each(propsToCheck, (prop, name) => {
+		if (!_.isEmpty(prop)) {
+			propsToPass[name] = prop;
+		}
+	});
+	if (!_.isEmpty(data)) {
+		propsToPass.data = data;
+	} else if (!_.isEmpty(treeData)) {
+		propsToPass.treeData = treeData;
+	} else {
+		propsToPass.data = convertEntitiesToSenchaGrid();
+	}
+
+	return <Column
+				{...testProps('GridPanelContainer')}
+				flex={1}
+				w="100%"
+			>
+				{topToolbar && <Toolbar>{topToolbar}</Toolbar>}
+
+				{isLoading && <Column flex={1}><Loading /></Column>}
+
+				{!isLoading && (!entities.length ? <NoRecordsFound text={noneFoundText} onRefresh={onRefresh} /> : 
+				
+					<SenchaGrid {...propsToPass} style={{ width: "100%", height: "100%", flex: 1, }} {...gridProps}>
+						{columnComponents}
+					</SenchaGrid>)}
+
+				{bottomToolbar && (bottomToolbar === 'pagination' ?
+					<PaginationToolbar Repository={Repository} />:
+						<Toolbar>{bottomToolbar}</Toolbar>)}
+			</Column>;
+
+}

package/src/Components/Grid/reactgrid.css

@@ -0,0 +1,6 @@
+.reactgrid {
+	flex: 1;
+	width: 100% !important;
+	height: auto;
+	overflow: scroll;
+}

package/src/Components/Hoc/withAlert.js

@@ -0,0 +1,176 @@
+import React, { useState, useRef, useEffect, } from 'react';
+import {
+	Button,
+	Column,
+	Icon,
+	Modal,
+	Row,
+	Text,
+} from 'native-base';
+import {
+	ALERT_MODE_OK,
+	ALERT_MODE_YES_NO,
+	ALERT_MODE_CUSTOM,
+} from '../../Constants/Alert';
+import Panel from '../Panel/Panel';
+import Footer from '../Panel/Footer';
+import TriangleExclamation from '../Icons/TriangleExclamation';
+import _ from 'lodash';
+
+export default function withAlert(WrappedComponent) {
+	return (props) => {
+		const
+			[isAlertShown, setIsAlertShown] = useState(false),
+			[title, setTitle] = useState(''),
+			[message, setMessage] = useState(''),
+			[includeCancel, setIncludeCancel] = useState(false),
+			[okCallback, setOkCallback] = useState(),
+			[yesCallback, setYesCallback] = useState(),
+			[noCallback, setNoCallback] = useState(),
+			[customButtons, setCustomButtons] = useState(),
+			[mode, setMode] = useState(ALERT_MODE_OK),
+			autoFocusRef = useRef(null),
+			onAlert = (arg1, callback, includeCancel = false) => {
+				clearAll();
+				if (_.isString(arg1)) {
+					setMode(ALERT_MODE_OK);
+					setTitle('Alert');
+					setMessage(arg1);
+					setOkCallback(() => callback);
+				} else if (_.isPlainObject(arg1)) {
+					// custom
+					const {
+							title = 'Alert',
+							message,
+							buttons,
+						} = arg1;
+					setMode(ALERT_MODE_CUSTOM);
+					setTitle(title);
+					setMessage(message);
+					setCustomButtons(buttons);
+				}
+				setIncludeCancel(includeCancel);
+				showAlert();
+			},
+			onConfirm = (message, callback, includeCancel = false) => {
+				clearAll();
+				setMode(ALERT_MODE_YES_NO);
+				setTitle('Confirm');
+				setMessage(message);
+				setIncludeCancel(includeCancel);
+				setYesCallback(() => callback);
+				showAlert();
+			},
+			onCancel = () => {
+				setIsAlertShown(false);
+			},
+			onOk = () => {
+				const callback = okCallback;
+				hideAlert();
+				if (callback) {
+					callback();
+				}
+			},
+			onYes = () => {
+				const callback = yesCallback;
+				hideAlert();
+				if (callback) {
+					callback();
+				}
+			},
+			onNo = () => {
+				const callback = noCallback;
+				hideAlert();
+				if (callback) {
+					callback();
+				}
+			},
+			showAlert = () => {
+				setIsAlertShown(true);
+			},
+			hideAlert = () => {
+				setIsAlertShown(false);
+			},
+			clearAll = () => {
+				setOkCallback();
+				setYesCallback();
+				setNoCallback();
+				setCustomButtons();
+			};
+
+		let buttons = [];
+		if (includeCancel) {
+			buttons.push(<Button
+								key="cancelBtn"
+								onPress={onCancel}
+								color="#fff"
+								variant="ghost"
+							>Cancel</Button>);
+		}
+		switch(mode) {
+			case ALERT_MODE_OK:
+				buttons.push(<Button
+								key="okBtn"
+								ref={autoFocusRef}
+								onPress={onOk}
+								color="#fff"
+							>OK</Button>);
+				break;
+			case ALERT_MODE_YES_NO:
+				buttons.push(<Button
+								key="noBtn"
+								onPress={onNo}
+								color="#fff"
+								variant="ghost"
+							>No</Button>);
+				buttons.push(<Button
+								key="yesBtn"
+								ref={autoFocusRef}
+								onPress={onYes}
+								color="#fff"
+							>Yes</Button>);
+				break;
+			case ALERT_MODE_CUSTOM:
+				buttons = customButtons;
+				break;
+			default:
+		}
+
+		return <>
+					<WrappedComponent
+						{...props}
+						alert={onAlert}
+						confirm={onConfirm}
+					/>
+					<Modal
+						isOpen={isAlertShown}
+						onOpen={() => {debugger;}}
+						onClose={() => setIsAlertShown(false)}
+					>
+						<Column bg="#fff" w={400} onLayout={() => {
+							if (autoFocusRef.current) {
+								autoFocusRef.current.focus();
+							}
+						}}>
+							<Panel
+								title={title}
+								isCollapsible={false}
+								p={5}
+								footer={<Footer justifyContent="flex-end" >
+											<Button.Group space={2}>
+												{buttons}
+											</Button.Group>
+										</Footer>}
+								>
+								<Row flex={1}>
+									<Column w={50} p={0} mr={5}>
+										<Icon as={TriangleExclamation} size={10}/>
+									</Column>
+									<Text>{message}</Text>
+								</Row>
+							</Panel>
+						</Column>
+					</Modal>
+				</>;
+	};
+}

package/src/Components/Hoc/withBlank.js

@@ -0,0 +1,12 @@
+import {
+} from 'native-base';
+import _ from 'lodash';
+
+export default function withBlank(WrappedComponent) {
+	return (props) => {
+		const {
+
+			} = props;
+		return <WrappedComponent {...props} />;
+	};
+}

package/src/Components/Hoc/withCollapsible.js

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+export default function withCollapsible(WrappedComponent) {
+	return (props) => {
+		const
+			{
+				isCollapsed = false,
+				startsCollapsed = false,
+				setIsCollapsed,
+			} = props,
+			bypass = !!setIsCollapsed,
+			[localIsCollapsed, setLocalIsCollapsed] = useState(startsCollapsed);
+
+		return <WrappedComponent
+					isCollapsed={bypass ? isCollapsed : localIsCollapsed}
+					setIsCollapsed={bypass ? setIsCollapsed : setLocalIsCollapsed}
+					{...props}
+				/>;
+	};
+}