@onehat/ui 0.1.2 → 0.2.0

package/src/Components/Screens/DataMgt.js

@@ -0,0 +1,250 @@
+import React, { useState, useMemo, } from 'react';
+import {
+	HORIZONTAL,
+	VERTICAL,
+} from '../../Constants/Directions';
+import {
+	SELECTION_MODE_SINGLE,
+	SELECTION_MODE_MULTI,
+} from '../../Constants/Selection';
+import getComponentFromType from '../../Functions/getComponentFromType';
+import Container from '../Container/Container';
+import Panel from '../Panel/Panel';
+import TabPanel from '../Panel/TabPanel';
+import UploadDownload from '../Panel/UploadDownload';
+import _ from 'lodash';
+
+export default function DataMgt(props) {
+	let {
+			showSelector = false,
+			showDownload = false,
+			westElementType,
+			westTitle,
+			westStartsCollapsed = false,
+			westWidth = 300,
+			westProps = {},
+			westSelector_id, // the foreign id of west records that center and some associated panels listen to
+			// westPermission,
+			centerElementType,
+			centerTitle,
+			centerNoSelectorMeansNoResults = true,
+			centerProps = {},
+			centerSelector_id, // the foreign id of center records that some associated panels listen to
+			onAddCenterRecord,
+			onSearchCenterText,
+			eastStartsCollapsed = false,
+			eastWidth = 340,
+			associatedPanels = [], // array of React components
+			associatedPanelsPerTab = 3,
+			additionalTabButtons = [],
+		} = props;
+
+	const
+		// westRef = useRef(),
+		[isWestCollapsed, setIsWestCollapsed] = useState(westStartsCollapsed),
+		[isEastCollapsed, setIsEastCollapsed] = useState(eastStartsCollapsed),
+		[isFullscreen, setIsFullscreen] = useState(false),
+		[westSelected, setWestSelectedRaw] = useState([]),
+		[centerSelected, setCenterSelected] = useState([]),
+		setWestSelected = (selected) => {
+			setWestSelectedRaw(selected);
+			setCenterSelected(); // clear selection in center
+		},
+		onToggleFullscreen = () => {
+			const newIsFullScreen = !isFullscreen;
+			setIsFullscreen(!newIsFullScreen);
+			if (newIsFullScreen) {
+				setIsWestCollapsed(true);
+				setIsEastCollapsed(true);
+			} else {
+				setIsWestCollapsed(false);
+				setIsEastCollapsed(false);
+			}
+		},
+		onNavigateTo = (path) => {
+			debugger;
+		},
+		onBatchUpload = (path) => {
+			debugger;
+			// How do I route this back to center?
+			// Maybe don't, but look at the props on CenterElementType??
+
+		},
+		onEvent = (e, arg1) => {
+			switch(e) {
+				case 'toggleFullscreen': // from center
+					onToggleFullscreen();
+					break;
+				case 'navigateTo':
+					onNavigateTo(arg1);
+					break;
+				case 'batchUpload': // from uploadDownload
+					onBatchUpload(arg1);
+					break;
+				default:
+			}
+		};
+
+
+	//   REGIONS -------------------------------------------------------
+	// 	[				] [							] [					]
+	// 	[	  west  	] [		   center			] [	  east		]
+	// 	[				] [							] [					]
+	//   PANELS ---------------------------------------------------------
+	// 	[				] [							] [	associated1		]
+	// 	[				] [							] [	associated2		]
+	// 	[				] [							] [	associated3...	]
+	// 	[				] [							] [	uploadDownload	]
+	//   ---------------------------------------------------------------
+
+
+	// 'west' section, AKA 'selector', the far-left column
+	const west = useMemo(() => {
+		if (!showSelector || !westElementType) {
+			return null;
+		}
+		const WestElementType = getComponentFromType(westElementType);
+		return <WestElementType
+					reference="west"
+					title={westTitle}
+					w={westWidth}
+					// maxWidth="230px" // this breaks drag resize!
+					startsCollapsed={westStartsCollapsed}
+					collapseDirection={HORIZONTAL}
+					isResizable={true}
+					frame={false}
+					disablePagination={true}
+					autoLoad={true}
+					canColumnsReorder={false}
+					canColumnsResize={false}
+					uniqueRepository={true}
+					selectionMode={SELECTION_MODE_SINGLE}
+					selection={westSelected}
+					onChangeSelection={setWestSelected}
+					onEvent={onEvent}
+					{...westProps}
+				/>;
+	}, [
+		showSelector,
+		westElementType,
+		westTitle,
+		westWidth,
+		westStartsCollapsed,
+		westSelected,
+		westSelected?.hash,
+		westProps,
+	]);
+
+	// 'center' section, the main Grid
+	const center = useMemo(() => {
+		if (!centerElementType) {
+			return null;
+		}
+
+		if (!showSelector && centerNoSelectorMeansNoResults) {
+			centerNoSelectorMeansNoResults = false;
+		}
+		const CenterElementType = getComponentFromType(centerElementType);
+		return <CenterElementType
+					reference="center"
+					title={centerTitle}
+					isCollapsible={false}
+					isFullscreen={isFullscreen}
+					frame={false}
+					isResizable={false}
+					// disablePagination={true}
+					autoLoad={!showSelector}
+					uniqueRepository={true}
+					selectorId={showSelector ? westSelector_id : null}
+					selectorSelected={westSelected}
+					noSelectorMeansNoResults={centerNoSelectorMeansNoResults}
+					onChangeSelection={setCenterSelected}
+					onEvent={onEvent}
+					{...centerProps}
+				/>;
+	}, [
+		centerTitle,
+		isFullscreen,
+		showSelector,
+		westSelected,
+		westSelected?.hash,
+		centerNoSelectorMeansNoResults,
+		// {...centerProps}
+	])
+
+	// 'east' section, contains associated panels
+	let east;
+	if (showDownload) {
+		associatedPanels.push(<UploadDownload key="ud" reference="uploadDownload" onEvent={onEvent} />);
+	}
+	if (associatedPanels.length) {
+		const
+			tabs = [],
+			allAssociatedPanelProps = {
+				// isCollapsible: false,
+				onEvent,
+				noSelectorMeansNoResults: true,
+				disablePagination: true,
+			},
+			panels = _.map(associatedPanels, (associatedPanel, ix) => {
+				const
+					controlledByCenter = typeof associatedPanel.props.controlledByCenter === 'undefined' ? true : associatedPanel.props.controlledByCenter,
+					thisAssociatedPanelProps = {
+						selectorId: controlledByCenter ? centerSelector_id : westSelector_id,
+						selectorSelected: controlledByCenter ? centerSelected : westSelected,
+						...associatedPanel.props,
+					};
+				return React.cloneElement(associatedPanel, { key: ix, reference: 'associatedPanel' + ix, ...allAssociatedPanelProps, ...thisAssociatedPanelProps, });
+			});
+		
+			
+		if (panels.length > associatedPanelsPerTab) {
+			// Tab panel holds them
+			let tabIx = 0,
+				panelIx = 0;
+			_.each(panels, (associatedPanel, ix) => {
+				if (panelIx === associatedPanelsPerTab) {
+					// New tab
+					panelIx = 0;
+					tabIx++;
+				}
+				if (panelIx === 0) {
+					tabs[tabIx] = {
+						title: 'Page ' + (tabIx +1),
+						items: [],
+					};
+				}
+				tabs[tabIx].items.push(associatedPanel);
+				panelIx++;
+			});
+			east = <TabPanel
+							title="Associated Information"
+							w={eastWidth}
+							startsCollapsed={eastStartsCollapsed}
+							frame={true}
+							isResizable={true}
+							tabs={tabs}
+							additionalButtons={additionalTabButtons}
+						/>;
+		} else {
+			// Single container holds them
+			east = <Panel
+							title="Associated Information"
+							w={eastWidth}
+							startsCollapsed={eastStartsCollapsed}
+							frame={true}
+							isResizable={true}
+						>{panels}</Panel>;
+		}
+	}
+
+	return <Container
+				west={west}
+				isWestCollapsed={isWestCollapsed}
+				setIsWestCollapsed={setIsWestCollapsed}
+				center={center}
+				east={east}
+				isEastCollapsed={isEastCollapsed}
+				setIsEastCollapsed={setIsEastCollapsed}
+			/>;
+}

package/src/Components/Toolbar/FilterToolbar.js

@@ -0,0 +1,20 @@
+import {
+	Row,
+} from 'native-base';
+import Toolbar from './Toolbar'
+import _ from 'lodash';
+
+export default function FilterToolbar(props) {
+	const {
+			toolbarItems = [],
+		} = props,
+		propsToPass = _.omit(props, 'toolbarItems');
+	return <Toolbar
+				bg="trueGray.200"
+				borderTopWidth={1}
+				borderTopColor="trueGray.400"
+				w="100%"
+			>
+				{toolbarItems.length ? <Row flex={1} borderLeftWidth={1} borderLeftColor="trueGray.100">{toolbarItems}</Row> : null}
+			</Toolbar>;
+};

package/src/Components/Toolbar/Pagination.js

@@ -0,0 +1,146 @@
+import { useEffect, useMemo, } from 'react';
+import {
+	Icon,
+	Row,
+	Text,
+} from 'native-base';
+import useForceUpdate from '../../Hooks/useForceUpdate';
+import IconButton from '../Buttons/IconButton';
+import AngleLeft from '../Icons/AngleLeft';
+import AnglesLeft from '../Icons/AnglesLeft';
+import AngleRight from '../Icons/AngleRight';
+import AnglesRight from '../Icons/AnglesRight';
+import Rotate from '../Icons/Rotate';
+import Input from '../Form/Field/Input';
+import PageSizeCombo from '../Form/Field/Combo/PageSizeCombo';
+
+export default function Pagination(props) {
+	const {
+			// withData
+			Repository,
+		} = props,
+		{
+			page,
+			pageSize,
+			total,
+			totalPages,
+			pageStart,
+			pageEnd,
+		} = Repository,
+		forceUpdate = useForceUpdate();
+
+	useEffect(() => {
+		Repository.ons(['changePage', 'changePageSize', 'changeData', ], forceUpdate);
+		return () => {
+			Repository.offs(['changePage', 'changePageSize', 'changeData', ], forceUpdate);
+		};
+	}, [Repository]);
+
+	return useMemo(() => {
+		const
+			iconButtonProps = {
+				_hover: {
+					bg: 'trueGray.400',
+				},
+				// mx: 1,
+			},
+			iconProps = {
+				// position: 'absolute',
+				alignSelf: 'center',
+				size: 'sm',
+				color: 'trueGray.500',
+				h: 20,
+				w: 20,
+			};
+		let items = [],
+			isDisabled = page === 1;
+		items.push(<IconButton
+						key="first"
+						{...iconButtonProps}
+						isDisabled={isDisabled}
+						icon={<Icon as={AnglesLeft} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+						onPress={() => Repository.setPage(1)}
+						tooltip="First Page"
+					/>);
+		items.push(<IconButton
+						key="prev"
+						{...iconButtonProps}
+						isDisabled={isDisabled}
+						icon={<Icon as={AngleLeft} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+						onPress={() => Repository.prevPage()}
+						tooltip="Previous Page"
+					/>);
+		items.push(<Row
+						key="pageSelector"
+						mx={3}
+						justifyContent="center"
+						alignItems="center"
+					>
+						<Text mr={2}>Page</Text>
+						<Input
+							value={page}
+							onChangeValue={(value) => Repository.setPage(value)}
+							maxValue={totalPages}
+							isDisabled={totalPages === 1}
+							w={10}
+							tooltip="Set Page"
+						/>
+						<Text ml={2}>of {totalPages}</Text>
+					</Row>);
+
+		isDisabled = page === totalPages || totalPages <= 1;
+		items.push(<IconButton
+						key="next"
+						{...iconButtonProps}
+						isDisabled={isDisabled}
+						icon={<Icon as={AngleRight} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+						onPress={() => Repository.nextPage()}
+						tooltip="Next Page"
+					/>);
+		items.push(<IconButton
+						key="last"
+						{...iconButtonProps}
+						isDisabled={isDisabled}
+						icon={<Icon as={AnglesRight} {...iconProps} color={isDisabled ? 'disabled' : 'trueGray.600'} />}
+						onPress={() => Repository.setPage(totalPages)}
+						tooltip="Last Page"
+					/>);
+		if (!Repository.isLocal) {
+			items.push(<IconButton
+							key="reload"
+							{...iconButtonProps}
+							icon={<Icon as={Rotate} {...iconProps} color="trueGray.600" />}
+							onPress={() => Repository.reload()}
+							tooltip="Reload"
+						/>);
+		}
+
+		items.push(<PageSizeCombo key="pageSize" pageSize={pageSize} Repository={Repository} />);
+
+		let pageSpan = `${pageStart} – ${pageEnd}`;
+		if (pageStart === pageEnd) {
+			pageSpan = pageStart;
+		}
+		
+		return <Row
+					justifyContent="flex-start"
+					alignItems="center"
+					px={2}
+					style={{ userSelect: 'none', }}
+					{...props}
+				>
+					{items}
+					<Text ml={3}>Displaying {pageSpan} of {total}</Text>
+				</Row>;
+	}, [
+		// Repository,
+		page,
+		pageSize,
+		total,
+		totalPages,
+		pageStart,
+		pageEnd,
+	])
+
+
+};

package/src/Components/Toolbar/PaginationToolbar.js

@@ -0,0 +1,22 @@
+import {
+	Row,
+} from 'native-base';
+import Pagination from './Pagination'
+import Toolbar from './Toolbar'
+import _ from 'lodash';
+
+export default function PaginationToolbar(props) {
+	const {
+			toolbarItems = [],
+		} = props,
+		propsToPass = _.omit(props, 'toolbarItems');
+	return <Toolbar
+				bg="trueGray.200"
+				borderTopWidth={1}
+				borderTopColor="trueGray.400"
+				w="100%"
+			>
+				<Pagination {...propsToPass} w={toolbarItems.length ? null : '100%'} />
+				{toolbarItems.length ? <Row flex={1} borderLeftWidth={1} borderLeftColor="trueGray.400" pl={3} ml={3}>{toolbarItems}</Row> : null}
+			</Toolbar>;
+};

package/src/Components/Toolbar/Toolbar.js

@@ -0,0 +1,18 @@
+import {
+	Row,
+} from 'native-base';
+
+export default function Toolbar(props) {
+	return <Row
+				w="100%"
+				justifyContent="flex-start"
+				bg="trueGray.200"
+				borderBottomWidth={1}
+				borderBottomColor="trueGray.400"
+				p={2}
+				overflow="scroll"
+				{...props}
+			>
+				{props.children}
+			</Row>;
+};

package/src/Components/WaitModal.js

@@ -0,0 +1,31 @@
+import {
+	Modal,
+	Row,
+	Text,
+} from 'native-base';
+import withRedux from '../Data/hoc/withRedux';
+import Loading from './Loading';
+import _ from 'lodash';
+
+export function WaitModal(props) {
+	const {
+			textMessage = 'Please wait...',
+			waitStack,
+		} = props;
+
+	return <Modal {...props} _backdrop={{ bg: "#000" }}>
+				<Modal.Content maxWidth="400px">
+					<Modal.Body>
+						<Row justifyContent="center" alignItems="center">
+							<Loading minHeight="auto" h={5} w={5} mr={2} />
+							<Text color="#000">{textMessage}</Text>
+							{/* {!!waitStack ? <Text color="#000">{_.keys(waitStack).join(', ')}</Text> : null} */}
+						</Row>
+					</Modal.Body>
+				</Modal.Content>
+			</Modal>;
+}
+
+export default withRedux(WaitModal, [
+	'waitStack',
+]);

package/src/Components/Window/Editor.js

@@ -0,0 +1,19 @@
+import {
+	Box,
+	Column,
+	Row,
+} from 'native-base';
+import Container from '../Container/Container';
+import emptyFn from '../../Functions/emptyFn';
+import _ from 'lodash';
+
+export default function EditorWindow(props) {
+	const {
+			title,
+			isOpen = false,
+			onClose = emptyFn,
+			...propsToPass
+		} = props;
+	
+	
+}

package/src/Constants/Alert.js

@@ -0,0 +1,3 @@
+export const ALERT_MODE_OK = 'ALERT_MODE_OK';
+export const ALERT_MODE_YES_NO = 'ALERT_MODE_YES_NO';
+export const ALERT_MODE_CUSTOM = 'ALERT_MODE_CUSTOM';

package/src/Constants/Date.js

@@ -0,0 +1,3 @@
+export const DATE = 'DATE';
+export const TIME = 'TIME';
+export const DATETIME = 'DATETIME';

package/src/Constants/Directions.js

@@ -0,0 +1,8 @@
+export const HORIZONTAL = 'HORIZONTAL';
+export const VERTICAL = 'VERTICAL';
+export const LEFT = 'LEFT';
+export const RIGHT = 'RIGHT';
+export const NORTH = 'NORTH';
+export const SOUTH = 'SOUTH';
+export const EAST = 'EAST';
+export const WEST = 'WEST';

package/src/Constants/EditorTypes.js

@@ -0,0 +1,4 @@
+export const EDITOR_TYPE_INLINE = 'EDITOR_TYPE_INLINE';
+export const EDITOR_TYPE_WINDOWED = 'EDITOR_TYPE_WINDOWED';
+export const EDITOR_TYPE_SMART = 'EDITOR_TYPE_SMART';
+export const EDITOR_TYPE_PLAIN = 'EDITOR_TYPE_PLAIN';

package/src/Constants/File.js

@@ -0,0 +1,2 @@
+export const FILE_MODE_IMAGE = 'FILE_MODE_IMAGE';
+export const FILE_MODE_FILE = 'FILE_MODE_FILE';

package/src/Constants/Grid.js

@@ -0,0 +1,4 @@
+export const SORT_ASCENDING = 'ASC'; // This is what RestTrait expects
+export const SORT_DESCENDING = 'DESC'; // This is what RestTrait expects
+export const DROP_POSITION_BEFORE = 'before'; // This is what RestTrait expects
+export const DROP_POSITION_AFTER = 'after'; // This is what RestTrait expects

package/src/Constants/Input.js

@@ -0,0 +1 @@
+export const AUTO_SUBMIT_DELAY = 500;

package/src/Constants/Selection.js

@@ -0,0 +1,5 @@
+export const SELECTION_MODE_ALL = 'SELECTION_MODE_ALL';
+export const SELECTION_MODE_SINGLE = 'SELECTION_MODE_SINGLE';
+export const SELECTION_MODE_MULTI = 'SELECTION_MODE_MULTI';
+export const SELECT_UP = 'SELECT_UP';
+export const SELECT_DOWN = 'SELECT_DOWN';

package/src/Constants/Styles.js

@@ -0,0 +1,86 @@
+import * as appStyles from '../../Constants/Styles';
+import _ from 'lodash';
+
+const
+	DEFAULT_FONTSIZE = 15,
+	WHITE = '#fff',
+	FOCUS = '#ffd';
+
+const defaults = {
+	FORM_COLOR_READOUT_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_COLOR_INPUT_BG: WHITE,
+	FORM_COLOR_INPUT_FOCUS_BG: FOCUS,
+	FORM_COMBO_HEIGHT: '40px',
+	FORM_COMBO_INPUT_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_COMBO_INPUT_BG: WHITE,
+	FORM_COMBO_INPUT_FOCUS_BG: FOCUS,
+	FORM_COMBO_TRIGGER_BG: WHITE,
+	FORM_COMBO_TRIGGER_HOVER_BG: 'trueGray.300',
+	FORM_DATE_ICON_BG: 'primary.200',
+	FORM_DATE_ICON_BG_HOVER: 'primary.400',
+	FORM_DATE_ICON_COLOR: WHITE,
+	FORM_DATE_INPUT_BG: WHITE,
+	FORM_DATE_INPUT_FOCUS_BG: FOCUS,
+	FORM_DATE_READOUT_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_FIELDSET_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_FIELDSET_BG: '#f6f6f6',
+	FORM_FILE_ICON_BG: 'primary.200',
+	FORM_FILE_ICON_BG_HOVER: 'primary.400',
+	FORM_FILE_ICON_COLOR: WHITE,
+	FORM_FILE_INPUT_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_FILE_READOUT_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_FILE_READOUT_BG: WHITE,
+	FORM_INPUT_BG: WHITE,
+	FORM_INPUT_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_INPUT_FOCUS_BG: FOCUS,
+	FORM_LABEL_WIDTH: '170px',
+	FORM_LABEL_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_NUMBER_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_TEXT_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_TEXT_BG: WHITE,
+	FORM_TEXTAREA_BG: WHITE,
+	FORM_TEXTAREA_FONTSIZE: DEFAULT_FONTSIZE,
+	FORM_TEXTAREA_HEIGHT: 130,
+	FORM_TOGGLE_BG: null,
+	FORM_TOGGLE_SIZE: 'md',
+	FORM_TOGGLE_ON_COLOR: '#0b0',
+	FORM_TOGGLE_ON_HOVER_COLOR: '#090',
+	FORM_TOGGLE_OFF_COLOR: '#f00',
+	FORM_TOGGLE_OFF_HOVER_COLOR: '#c00',
+	GRID_CELL_FONTSIZE: DEFAULT_FONTSIZE,
+	GRID_HEADER_BG: '#eee',
+	GRID_HEADER_HOVER_BG: '#ddd',
+	GRID_HEADER_FONTSIZE: DEFAULT_FONTSIZE,
+	GRID_INLINE_EDITOR_BORDER_COLOR: 'primary.100',
+	GRID_NAV_COLUMN_COLOR: '#aaa',
+	GRID_ROW_BG: WHITE,
+	GRID_ROW_HOVER_BG: 'hover',
+	GRID_ROW_SELECTED_BG: 'selected',
+	GRID_ROW_SELECTED_HOVER_BG: 'selectedHover',
+	GRID_TOOLBAR_ITEMS_COLOR: 'trueGray.800',
+	GRID_TOOLBAR_ITEMS_DISABLED_COLOR: 'disabled',
+	GRID_TOOLBAR_ITEMS_ICON_SIZE: 'sm',
+	PANEL_FOOTER_BG: 'primary.100', // :alpha.50
+	PANEL_HEADER_BG: 'primary.100',
+	PANEL_HEADER_BG_VERTICAL: 'primary.100',
+	PANEL_HEADER_ICON_COLOR: WHITE,
+	PANEL_HEADER_ICON_SIZE: 13,
+	PANEL_HEADER_TEXT_COLOR: WHITE,
+	PANEL_HEADER_TEXT_FONTSIZE: 15,
+	PANEL_HEADER_PX: 3,
+	PANEL_HEADER_PY: 1,
+	TAB_ACTIVE_BG: 'trueGray.200',
+	TAB_ACTIVE_HOVER_BG: 'trueGray.200',
+	TAB_ACTIVE_COLOR: 'primary.800',
+	TAB_ICON_COLOR: WHITE,
+	TAB_ACTIVE_ICON_COLOR: '#000',
+	TAB_BAR_BG: 'primary.700',
+	TAB_BG: 'primary.300',
+	TAB_HOVER_BG: 'primary.500',
+	TAB_COLOR: WHITE,
+	TAB_FONTSIZE: DEFAULT_FONTSIZE,
+	TEXT_FONTSIZE: DEFAULT_FONTSIZE,
+};
+
+export default _.merge(defaults, appStyles);
+

package/src/Constants/UiModes.js

@@ -0,0 +1,2 @@
+export const UI_MODE_WEB = 'UI_MODE_WEB';
+export const UI_MODE_REACT_NATIVE = 'UI_MODE_REACT_NATIVE';