@dartech/arsenal-ui 1.3.22 → 1.3.24

package/index.js

@@ -11,7 +11,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import { __rest, __awaiter } from 'tslib';
 import { useController, useWatch, useFormContext, useFieldArray } from 'react-hook-form';
 import TextField from '@mui/material/TextField';
-import React, { useRef, useEffect, useState, useCallback, useMemo, createElement, forwardRef, createContext, useContext, Suspense } from 'react';
+import React, { useRef, useEffect, useState, useCallback, useMemo, createElement, forwardRef, createContext, useContext, memo, Suspense } from 'react';
 import MenuItem from '@mui/material/MenuItem';
 import ClearIcon from '@mui/icons-material/Clear';
 import IconButton from '@mui/material/IconButton';
@@ -74,7 +74,6 @@ import StepContent from '@mui/material/StepContent';
 import StepConnector from '@mui/material/StepConnector';
 import Select from '@mui/material/Select';
 import CloseIcon from '@mui/icons-material/Close';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import classnames from 'classnames';
 import { toast } from 'react-toastify';
 import CssBaseline from '@mui/material/CssBaseline';
@@ -4792,7 +4791,7 @@ const CreatePropertiesList = ({
       }, {
         children: error.message
       }))
-    })), properties && properties.map((property, index) => jsx(Grid$1, Object.assign({
+    })), Array.isArray(properties) && properties.map((property, index) => jsx(Grid$1, Object.assign({
       sm: 12,
       ref: ref => refs.current[index] = ref
     }, {
@@ -4906,6 +4905,201 @@ const CreateDefinition = ({
   }));
 };
 
+const labels = {
+  name: 'Name',
+  key: 'Key',
+  propertyType: 'Property Type',
+  defaultValue: 'Default Value',
+  defaultValues: 'Default Values',
+  sortOrder: 'Sort Order',
+  isRequired: 'Required',
+  isMultiple: 'Multiple',
+  isEnabled: 'Enabled',
+  isViewableInList: 'Is Viewable In List',
+  precisionScale: 'Precision Scale',
+  roundingMode: 'Rounding Mode',
+  format: 'Format',
+  definitionCode: 'Definition Code',
+  definitionVersion: 'Definition Version',
+  labelPropertyCode: 'Label Property Code',
+  valuePropertyCode: 'Value Property Code',
+  restrictedValues: 'Restricted Values',
+  value: 'Value',
+  values: 'Values',
+  uiSettings: 'UI Settings',
+  validationNode: 'Validation Node'
+};
+const ValueDisplay = ({
+  value,
+  type
+}) => {
+  if ((type === PropertyType.JSON || type === PropertyType.ENTITY || type === PropertyType.ANY) && value) {
+    return jsx(JsonView, {
+      value: value
+    });
+  } else {
+    return jsx(Typography, Object.assign({
+      variant: "subtitle1",
+      display: "inline",
+      style: {
+        wordBreak: 'break-word'
+      }
+    }, {
+      children: value === null ? 'null' : value.toString()
+    }));
+  }
+};
+const formatDiplayValue = (value, key, type) => {
+  switch (key) {
+    case 'isRequired':
+    case 'isMultiple':
+    case 'isEnabled':
+    case 'isViewableInList':
+      return value ? jsx(SvgIcon, Object.assign({
+        color: "primary",
+        fontSize: "small"
+      }, {
+        children: jsx("path", {
+          d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+        })
+      })) : null;
+    case 'restrictedValues':
+      return value ? jsx(Box, Object.assign({
+        display: "flex",
+        flexWrap: "wrap"
+      }, {
+        children: value.map(restrictedValue => jsx(Chip, {
+          label: restrictedValue,
+          style: {
+            wordBreak: 'break-word',
+            maxWidth: '500px'
+          }
+        }, restrictedValue))
+      })) : null;
+    case 'defaultValue':
+    case 'value':
+      return jsx(ValueDisplay, {
+        value: value,
+        type: type
+      });
+    case 'values':
+    case 'defaultValues':
+      if (!Array.isArray(value) || type === PropertyType.ENTITY || type === PropertyType.JSON || type === PropertyType.ANY) {
+        return jsx(JsonView, {
+          value: value
+        });
+      } else {
+        return jsxs("div", {
+          children: ["[", value === null || value === void 0 ? void 0 : value.map((v, index) => jsx("div", {
+            children: jsx(ValueDisplay, {
+              value: v,
+              type: type
+            })
+          }, index)), "]"]
+        });
+      }
+    case 'uiSettings':
+    case 'validationNode':
+      return value ? jsx(JsonView, {
+        value: value
+      }) : null;
+    default:
+      return jsx(Typography, Object.assign({
+        variant: "subtitle1",
+        display: "inline",
+        style: {
+          wordBreak: 'break-word'
+        }
+      }, {
+        children: value
+      }));
+  }
+};
+const PropertyDataTable = ({
+  property
+}) => {
+  const propertyData = useMemo(() => {
+    if (property) {
+      if (property.isMultiple) {
+        delete property.defaultValue;
+        delete property['value'];
+      } else {
+        delete property.defaultValues;
+        delete property['values'];
+      }
+    }
+    return property;
+  }, [property]);
+  return jsx(MuiTable, Object.assign({
+    size: "small"
+  }, {
+    children: jsx(TableBody, {
+      children: Object.keys(labels).map(key => key in propertyData ? jsxs(TableRow, {
+        children: [jsx(TableCell, Object.assign({
+          width: "30%"
+        }, {
+          children: jsx(Typography, {
+            children: labels[key]
+          })
+        })), jsx(TableCell, {
+          children: formatDiplayValue(propertyData[key], key, propertyData.propertyType)
+        })]
+      }, key) : null)
+    })
+  }));
+};
+var PropertyDataTable$1 = PropertyDataTable;
+
+const EntityPropertiesView = ({
+  properties,
+  parentNames: _parentNames = []
+}) => {
+  const hasProperties = useMemo(() => {
+    let hasProps = false;
+    properties.every(property => {
+      if (property.propertyType === PropertyType.ENTITY) {
+        hasProps = true;
+        return false;
+      }
+      return true;
+    });
+    return hasProps;
+  }, [properties]);
+  return jsxs(Box, Object.assign({
+    mt: 4
+  }, {
+    children: [jsx(Typography, Object.assign({
+      variant: "h6"
+    }, {
+      children: "Properties"
+    })), jsxs(Stepper, Object.assign({
+      orientation: "vertical",
+      style: {
+        paddingLeft: '4px'
+      }
+    }, {
+      children: [properties.map(property => jsxs(Step, Object.assign({
+        expanded: true
+      }, {
+        children: [jsx(StepLabel, {
+          StepIconProps: {
+            icon: '',
+            completed: false,
+            active: true
+          }
+        }), jsx(StepContent, {
+          children: jsx(ViewProperty, {
+            property: property,
+            parentNames: [..._parentNames],
+            defaultExpanded: false
+          })
+        })]
+      }), property.key)), hasProperties && jsx(Step, {})]
+    }))]
+  }));
+};
+var EntityPropertiesView$1 = /*#__PURE__*/memo(EntityPropertiesView);
+
 const ViewProperty = ({
   property,
   parentNames: _parentNames = [],
@@ -4924,7 +5118,11 @@ const ViewProperty = ({
     onChange: () => setExpanded(prevState => !prevState)
   }, {
     children: [jsx(AccordionSummary, Object.assign({
-      expandIcon: jsx(ExpandMoreIcon, {})
+      expandIcon: jsx(SvgIcon, {
+        children: jsx("path", {
+          d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+        })
+      })
     }, {
       children: jsx(Typography, Object.assign({
         style: {
@@ -4935,9 +5133,16 @@ const ViewProperty = ({
         children: property.name
       }))
     })), jsx(AccordionDetails, {
-      children: jsx(Box, {
+      children: jsxs(Box, Object.assign({
         width: "100%"
-      })
+      }, {
+        children: [jsx(PropertyDataTable$1, {
+          property: property
+        }), property.propertyType === PropertyType.ENTITY && jsx(EntityPropertiesView$1, {
+          properties: propertiesObjectToArray(property.properties),
+          parentNames: [..._parentNames, property.name]
+        })]
+      }))
     })]
   }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dartech/arsenal-ui",
-  "version": "1.3.22",
+  "version": "1.3.24",
   "author": "DAR",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"