@etsoo/materialui 1.5.18 → 1.5.19

package/lib/cjs/ViewContainer.d.ts

@@ -31,6 +31,7 @@ export type ViewPageGridItemProps = GridProps & {
     data: React.ReactNode;
     label?: React.ReactNode;
     singleRow?: ViewPageRowType;
+    horizontal?: boolean;
 };
 /**
  * View page grid item
@@ -58,6 +59,10 @@ export interface ViewPageField<T extends object> extends GridProps {
      * Display as single row
      */
     singleRow?: ViewPageRowType;
+    /**
+     * Render as horizontal or not
+     */
+    horizontal?: boolean;
     /**
      * Render props
      */

package/lib/cjs/ViewContainer.js

@@ -42,7 +42,7 @@ function getResp(singleRow) {
 }
 function getItemField(app, field, data) {
     // Item data and label
-    let itemData, itemLabel, gridProps = {}, size;
+    let itemData, itemLabel, gridProps = {}, size, isHorizontal;
     if (Array.isArray(field)) {
         const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
         itemData = (0, GridDataFormat_1.GridDataFormat)(data[fieldData], fieldType, renderProps);
@@ -52,7 +52,9 @@ function getItemField(app, field, data) {
     }
     else if (typeof field === "object") {
         // Destruct
-        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = "default", ...rest } = field;
+        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = "default", horizontal, ...rest } = field;
+        // Horizontal or not
+        isHorizontal = horizontal;
         // Size
         size = getResp(singleRow);
         gridProps = {
@@ -85,7 +87,7 @@ function getItemField(app, field, data) {
         size = ViewPageSize.small;
         gridProps = { size };
     }
-    return [itemData, itemLabel, gridProps, size];
+    return [itemData, itemLabel, gridProps, size, isHorizontal];
 }
 function getItemSize(bp, size) {
     const v = size[bp];
@@ -149,7 +151,7 @@ var ViewPageSize;
  */
 function ViewPageGridItem(props) {
     // Destruct
-    const { data, label, singleRow, ...gridProps } = props;
+    const { data, label, singleRow, horizontal = false, ...gridProps } = props;
     // Default options
     let options = {};
     if (gridProps.size == null) {
@@ -159,7 +161,7 @@ function ViewPageGridItem(props) {
         options = getResp(singleRow ?? "small");
     }
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { ...gridProps, ...options, children: [label != null && ((0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", children: data }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { ...gridProps, ...options, children: [label != null && ((0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "caption", component: horizontal ? "span" : "div", children: [label, ":"] })), typeof data === "object" ? (data) : horizontal ? ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", component: "span", marginLeft: 0.5, children: data })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", children: data }))] }));
 }
 function ViewContainer(props) {
     // Global app
@@ -196,12 +198,12 @@ function ViewContainer(props) {
                 }
             }
             else {
-                const [itemData, itemLabel, gridProps, size] = getItemField(app, field, data);
+                const [itemData, itemLabel, gridProps, size, horizontal] = getItemField(app, field, data);
                 // Some callback function may return '' instead of undefined
                 if (itemData == null || itemData === "")
                     continue;
                 oneSize = size;
-                oneItem = ((0, react_1.createElement)(ViewPageGridItem, { ...gridProps, key: i, data: itemData, label: itemLabel }));
+                oneItem = ((0, react_1.createElement)(ViewPageGridItem, { ...gridProps, key: i, data: itemData, label: itemLabel, horizontal: horizontal }));
             }
             // Max lines
             if (maxItems > 0) {

package/lib/mjs/ViewContainer.d.ts

@@ -31,6 +31,7 @@ export type ViewPageGridItemProps = GridProps & {
     data: React.ReactNode;
     label?: React.ReactNode;
     singleRow?: ViewPageRowType;
+    horizontal?: boolean;
 };
 /**
  * View page grid item
@@ -58,6 +59,10 @@ export interface ViewPageField<T extends object> extends GridProps {
      * Display as single row
      */
     singleRow?: ViewPageRowType;
+    /**
+     * Render as horizontal or not
+     */
+    horizontal?: boolean;
     /**
      * Render props
      */

package/lib/mjs/ViewContainer.js

@@ -34,7 +34,7 @@ function getResp(singleRow) {
 }
 function getItemField(app, field, data) {
     // Item data and label
-    let itemData, itemLabel, gridProps = {}, size;
+    let itemData, itemLabel, gridProps = {}, size, isHorizontal;
     if (Array.isArray(field)) {
         const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
         itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
@@ -44,7 +44,9 @@ function getItemField(app, field, data) {
     }
     else if (typeof field === "object") {
         // Destruct
-        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = "default", ...rest } = field;
+        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = "default", horizontal, ...rest } = field;
+        // Horizontal or not
+        isHorizontal = horizontal;
         // Size
         size = getResp(singleRow);
         gridProps = {
@@ -77,7 +79,7 @@ function getItemField(app, field, data) {
         size = ViewPageSize.small;
         gridProps = { size };
     }
-    return [itemData, itemLabel, gridProps, size];
+    return [itemData, itemLabel, gridProps, size, isHorizontal];
 }
 function getItemSize(bp, size) {
     const v = size[bp];
@@ -141,7 +143,7 @@ export var ViewPageSize;
  */
 export function ViewPageGridItem(props) {
     // Destruct
-    const { data, label, singleRow, ...gridProps } = props;
+    const { data, label, singleRow, horizontal = false, ...gridProps } = props;
     // Default options
     let options = {};
     if (gridProps.size == null) {
@@ -151,7 +153,7 @@ export function ViewPageGridItem(props) {
         options = getResp(singleRow ?? "small");
     }
     // Layout
-    return (_jsxs(Grid, { ...gridProps, ...options, children: [label != null && (_jsxs(Typography, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : (_jsx(Typography, { variant: "subtitle2", children: data }))] }));
+    return (_jsxs(Grid, { ...gridProps, ...options, children: [label != null && (_jsxs(Typography, { variant: "caption", component: horizontal ? "span" : "div", children: [label, ":"] })), typeof data === "object" ? (data) : horizontal ? (_jsx(Typography, { variant: "subtitle2", component: "span", marginLeft: 0.5, children: data })) : (_jsx(Typography, { variant: "subtitle2", children: data }))] }));
 }
 export function ViewContainer(props) {
     // Global app
@@ -188,12 +190,12 @@ export function ViewContainer(props) {
                 }
             }
             else {
-                const [itemData, itemLabel, gridProps, size] = getItemField(app, field, data);
+                const [itemData, itemLabel, gridProps, size, horizontal] = getItemField(app, field, data);
                 // Some callback function may return '' instead of undefined
                 if (itemData == null || itemData === "")
                     continue;
                 oneSize = size;
-                oneItem = (_createElement(ViewPageGridItem, { ...gridProps, key: i, data: itemData, label: itemLabel }));
+                oneItem = (_createElement(ViewPageGridItem, { ...gridProps, key: i, data: itemData, label: itemLabel, horizontal: horizontal }));
             }
             // Max lines
             if (maxItems > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.18",
+  "version": "1.5.19",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/ViewContainer.tsx

@@ -40,12 +40,13 @@ function getItemField<T extends object>(
   app: ReactAppType,
   field: ViewPageFieldTypeNarrow<T>,
   data: T
-): [React.ReactNode, React.ReactNode, GridProps, ViewPageItemSize] {
+): [React.ReactNode, React.ReactNode, GridProps, ViewPageItemSize, boolean?] {
   // Item data and label
   let itemData: React.ReactNode,
     itemLabel: React.ReactNode,
     gridProps: GridProps = {},
-    size: ViewPageItemSize;
+    size: ViewPageItemSize,
+    isHorizontal: boolean | undefined;
 
   if (Array.isArray(field)) {
     const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
@@ -61,9 +62,13 @@ function getItemField<T extends object>(
       label: fieldLabel,
       renderProps,
       singleRow = "default",
+      horizontal,
       ...rest
     } = field;
 
+    // Horizontal or not
+    isHorizontal = horizontal;
+
     // Size
     size = getResp(singleRow);
 
@@ -96,7 +101,7 @@ function getItemField<T extends object>(
     gridProps = { size };
   }
 
-  return [itemData, itemLabel, gridProps, size];
+  return [itemData, itemLabel, gridProps, size, isHorizontal];
 }
 
 function getItemSize(bp: Breakpoint, size: ViewPageItemSize) {
@@ -180,6 +185,7 @@ export type ViewPageGridItemProps = GridProps & {
   data: React.ReactNode;
   label?: React.ReactNode;
   singleRow?: ViewPageRowType;
+  horizontal?: boolean;
 };
 
 /**
@@ -189,7 +195,7 @@ export type ViewPageGridItemProps = GridProps & {
  */
 export function ViewPageGridItem(props: ViewPageGridItemProps) {
   // Destruct
-  const { data, label, singleRow, ...gridProps } = props;
+  const { data, label, singleRow, horizontal = false, ...gridProps } = props;
 
   // Default options
   let options = {};
@@ -203,12 +209,16 @@ export function ViewPageGridItem(props: ViewPageGridItemProps) {
   return (
     <Grid {...gridProps} {...options}>
       {label != null && (
-        <Typography variant="caption" component="div">
+        <Typography variant="caption" component={horizontal ? "span" : "div"}>
           {label}:
         </Typography>
       )}
       {typeof data === "object" ? (
         data
+      ) : horizontal ? (
+        <Typography variant="subtitle2" component="span" marginLeft={0.5}>
+          {data}
+        </Typography>
       ) : (
         <Typography variant="subtitle2">{data}</Typography>
       )}
@@ -240,6 +250,11 @@ export interface ViewPageField<T extends object> extends GridProps {
    */
   singleRow?: ViewPageRowType;
 
+  /**
+   * Render as horizontal or not
+   */
+  horizontal?: boolean;
+
   /**
    * Render props
    */
@@ -352,11 +367,8 @@ export function ViewContainer<T extends DataTypes.StringRecord>(
             oneItem = createdResult;
           }
         } else {
-          const [itemData, itemLabel, gridProps, size] = getItemField(
-            app,
-            field,
-            data
-          );
+          const [itemData, itemLabel, gridProps, size, horizontal] =
+            getItemField(app, field, data);
 
           // Some callback function may return '' instead of undefined
           if (itemData == null || itemData === "") continue;
@@ -368,6 +380,7 @@ export function ViewContainer<T extends DataTypes.StringRecord>(
               key={i}
               data={itemData}
               label={itemLabel}
+              horizontal={horizontal}
             />
           );
         }