From ca7dcbecd1080adcea94222a16f40259244fe4e1 Mon Sep 17 00:00:00 2001
From: "S. Andrew Sheppard" <andrew@wq.io>
Date: Wed, 24 Feb 2021 01:25:28 -0600
Subject: [PATCH] various component improvements

 - useOutbox()
 - support custom <HorizontalView/> props
 - parse fieldset errors
---
 packages/material/src/components/HorizontalView.js |  8 ++++++--
 .../src/components/HorizontalView.native.js        | 12 +++++++++---
 packages/react/src/components/Form.js              |  7 ++++++-
 packages/react/src/components/HorizontalView.js    | 14 +++++++++++---
 packages/react/src/hooks.js                        | 13 ++++++++++---
 5 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/packages/material/src/components/HorizontalView.js b/packages/material/src/components/HorizontalView.js
index fd042f2a..11f5a22b 100644
--- a/packages/material/src/components/HorizontalView.js
+++ b/packages/material/src/components/HorizontalView.js
@@ -11,9 +11,13 @@ const useStyles = makeStyles(theme => ({
     }
 }));
 
-export default function HorizontalView({ children }) {
+export default function HorizontalView({ children, ...rest }) {
     const classes = useStyles();
-    return <div className={classes.root}>{children}</div>;
+    return (
+        <div className={classes.root} {...rest}>
+            {children}
+        </div>
+    );
 }
 
 HorizontalView.propTypes = {
diff --git a/packages/material/src/components/HorizontalView.native.js b/packages/material/src/components/HorizontalView.native.js
index 9933e761..1207503c 100644
--- a/packages/material/src/components/HorizontalView.native.js
+++ b/packages/material/src/components/HorizontalView.native.js
@@ -1,16 +1,22 @@
 import React from 'react';
 import { View } from 'react-native';
+import PropTypes from 'prop-types';
 
-export default function HorizontalView(props) {
+export default function HorizontalView({ style, ...rest }) {
     return (
         <View
             style={{
                 flexDirection: 'row',
                 justifyContent: 'space-between',
                 alignItems: 'center',
-                padding: 8
+                padding: 8,
+                ...style
             }}
-            {...props}
+            {...rest}
         />
     );
 }
+
+HorizontalView.propTypes = {
+    style: PropTypes.object
+};
diff --git a/packages/react/src/components/Form.js b/packages/react/src/components/Form.js
index ffc0dacb..f555a378 100644
--- a/packages/react/src/components/Form.js
+++ b/packages/react/src/components/Form.js
@@ -98,7 +98,12 @@ function parseApiError(error, values) {
             if (!(key in values)) {
                 key = '__other__';
             }
-            if (!Array.isArray(error)) {
+            if (Array.isArray(error)) {
+                // pass
+            } else if (typeof error === 'object') {
+                errors[key] = parseApiError(error, values[key] || {});
+                return;
+            } else {
                 error = [error];
             }
             if (errors[key]) {
diff --git a/packages/react/src/components/HorizontalView.js b/packages/react/src/components/HorizontalView.js
index b8037185..993e1481 100644
--- a/packages/react/src/components/HorizontalView.js
+++ b/packages/react/src/components/HorizontalView.js
@@ -1,14 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export default function HorizontalView({ children }) {
+export default function HorizontalView({ children, style, ...rest }) {
     return (
-        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <div
+            style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                ...style
+            }}
+            {...rest}
+        >
             {children}
         </div>
     );
 }
 
 HorizontalView.propTypes = {
-    children: PropTypes.node
+    children: PropTypes.node,
+    style: PropTypes.object
 };
diff --git a/packages/react/src/hooks.js b/packages/react/src/hooks.js
index c76a4ba3..4e71275b 100644
--- a/packages/react/src/hooks.js
+++ b/packages/react/src/hooks.js
@@ -349,13 +349,20 @@ export function useModel(name, filter) {
     return useSelector(selector);
 }
 
-export function useUnsynced(modelConf) {
+export function useOutbox() {
     const outbox = useSelector(state => state.offline.outbox) || [],
         {
-            outbox: { filterUnsynced, parseOutbox }
+            outbox: { parseOutbox }
         } = useApp();
+    return parseOutbox(outbox);
+}
 
-    return filterUnsynced(parseOutbox(outbox), modelConf);
+export function useUnsynced(modelConf) {
+    const outbox = useOutbox(),
+        {
+            outbox: { filterUnsynced }
+        } = useApp();
+    return filterUnsynced(outbox, modelConf);
 }
 
 export function useList() {