@zohodesk/library-platform 1.0.1 → 1.0.2-exp.4

package/es/cc/table-list/Properties.js

@@ -1,9 +1,25 @@
-import SelectionConfigSchema from "../../bc/list-selection/Properties";
+import { Alignment, SortedBy, Width } from "./data-types/Header";
+import RowCursor from "./data-types/RowCursor";
 import ResizerConfigSchema from "../../bc/table-column-resizer/Properties";
-import SortOrder from "../../bc/sort-by/SortOrderEnum";
+import { actionsSchema } from "../../platform/client-actions/cc/action-event-mediator/Properties";
+import PropertiesConverter from "../component/properties/PropertiesConverter";
+import BooleanProperties from "../fields/boolean/Properties";
+import CurrencyProperties from "../fields/currency/Properties";
+import DateProperties from "../fields/date/Properties";
+import DatetimeProperties from "../fields/datetime/Properties";
+import DecimalProperties from "../fields/decimal/Properties";
+import EmailProperties from "../fields/email/Properties";
+import LookupProperties from "../fields/lookup/Properties";
+import MultiSelectProperties from "../fields/multi-select/Properties";
+import NumberProperties from "../fields/number/Properties";
+import PercentProperties from "../fields/percent/Properties";
+import PhoneProperties from "../fields/phone/Properties";
+import PickListProperties from "../fields/pick-list/Properties";
+import TextProperties from "../fields/text/Properties";
+import UrlProperties from "../fields/url/Properties";
 const TableListProperties = {
   isLoading: {
-    required: true,
+    required: false,
     typeMetadata: {
       schema: {
         type: 'boolean'
@@ -20,12 +36,24 @@ const TableListProperties = {
     },
     defaultValue: ''
   },
-  hasRowActions: {
+  rowActionsConfig: {
     required: false,
-    defaultValue: false,
+    defaultValue: {
+      hasActions: false,
+      columnWidth: Width.XSmall
+    },
     typeMetadata: {
       schema: {
-        type: 'boolean'
+        type: 'object',
+        properties: {
+          hasActions: {
+            type: 'boolean'
+          },
+          columnWidth: {
+            type: 'number',
+            enum: Object.values(Width)
+          }
+        }
       }
     }
   },
@@ -38,30 +66,30 @@ const TableListProperties = {
       }
     }
   },
-  resizerConfig: {
+  rowCursor: {
     required: false,
-    defaultValue: {
-      isEnabled: false,
-      minWidth: 120,
-      maxWidth: 1000
-    },
+    defaultValue: 'pointer',
     typeMetadata: {
-      schema: ResizerConfigSchema
+      schema: {
+        type: 'string',
+        enum: Object.values(RowCursor)
+      }
     }
   },
-  selectionConfig: {
+  resizerConfig: {
     required: false,
     defaultValue: {
       isEnabled: false,
-      maxSelectionCount: 50,
-      limitExceedAlertMessage: 'Max records selected'
+      minWidth: 100,
+      maxWidth: 1000
     },
     typeMetadata: {
-      schema: SelectionConfigSchema
+      schema: ResizerConfigSchema
     }
   },
   data: {
-    required: true,
+    name: 'data',
+    required: false,
     defaultValue: {
       headers: [],
       rows: []
@@ -70,350 +98,107 @@ const TableListProperties = {
       schema: {
         $schema: 'http://json-schema.org/draft-07/schema#',
         definitions: {
-          Schema: {
-            type: 'object',
-            properties: {
-              type: {}
-            }
-          },
-          PayloadProperties: {
-            type: 'object',
-            properties: {
-              name: {
-                type: 'string'
-              },
-              label: {
-                type: 'string'
-              },
-              typeMetadata: {
-                type: 'object',
-                properties: {
-                  schema: {
-                    $ref: '#/definitions/Schema'
-                  }
-                }
-              }
-            },
-            required: ['name', 'typeMetadata']
-          },
-          Payload: {
-            type: 'object',
-            additionalProperties: {
-              $ref: '#/definitions/PayloadProperties'
-            }
-          },
-          DeclarativeAction: {
-            type: 'object',
-            properties: {
-              name: {
-                type: 'string'
-              },
-              label: {
-                type: 'string'
-              },
-              buttonType: {
-                defaultValue: 'primary',
-                type: 'string',
-                enum: ['primary', 'danger']
-              },
-              icon: {
-                type: 'string'
-              },
-              actionName: {
-                type: 'string'
-              },
-              actionPayload: {
-                $ref: '#/definitions/Payload'
-              },
-              metaData: {},
-              description: {
-                type: 'string'
-              }
-            },
-            required: ['name', 'label', 'buttonType', 'icon']
-          },
           HeaderMeta: {
             type: 'object',
             properties: {
               id: {
                 type: 'string'
               },
-              text: {
+              name: {
                 type: 'string'
               },
-              sortable: {
-                defaultValue: false,
-                type: 'boolean'
-              },
-              size: {
-                defaultValue: 'medium',
-                type: 'string',
-                enum: ['xsmall', 'small', 'medium', 'large', 'xlarge']
-              },
-              alignment: {
-                defaultValue: 'left',
-                type: 'string',
-                enum: ['left', 'center', 'right']
-              }
-            },
-            required: ['id', 'text', 'sortable', 'size', 'alignment']
-          },
-          Text: {
-            type: 'object',
-            properties: {
-              type: {
-                type: 'string',
-                const: 'Text'
-              },
               text: {
                 type: 'string'
               },
-              weight: {
-                type: 'string',
-                enum: ['light', 'regular', 'semibold', 'bold']
+              width: {
+                type: 'number',
+                enum: Object.values(Width)
               },
-              tooltip: {
-                type: 'string'
-              }
-            },
-            required: ['type', 'text']
-          },
-          Link: {
-            type: 'object',
-            properties: {
-              type: {
-                type: 'string',
-                const: 'Link'
-              },
-              href: {
-                type: 'string'
-              },
-              opensNewTab: {
-                type: 'boolean',
-                defaultValue: false
-              },
-              label: {
-                type: 'string'
-              },
-              variant: {
-                type: 'string',
-                enum: ['primary', 'secondary']
-              }
-            },
-            required: ['type', 'href', 'variant', 'opensNewTab', 'label']
-          },
-          CheckBox: {
-            type: 'object',
-            properties: {
-              type: {
-                type: 'string',
-                const: 'CheckBox'
-              },
-              checked: {
-                defaultValue: false,
-                type: 'boolean'
-              },
-              disabled: {
-                defaultValue: false,
-                type: 'boolean'
-              },
-              readonly: {
-                defaultValue: false,
-                type: 'boolean'
-              },
-              label: {
-                type: 'string'
-              },
-              tooltip: {
-                type: 'string'
-              }
-            },
-            required: ['type', 'checked', 'label']
-          },
-          Switch: {
-            type: 'object',
-            properties: {
-              type: {
-                type: 'string',
-                const: 'Switch'
-              },
-              checked: {
-                defaultValue: false,
-                type: 'boolean'
-              },
-              size: {
+              alignment: {
                 type: 'string',
-                enum: ['small', 'medium']
+                enum: Object.values(Alignment)
               },
-              disabled: {
-                defaultValue: false,
+              sortable: {
                 type: 'boolean'
               },
-              tooltip: {
-                type: 'string'
-              }
-            },
-            required: ['type', 'checked', 'size']
-          },
-          Email: {
-            type: 'object',
-            properties: {
-              type: {
-                type: 'string',
-                const: 'Email'
-              },
-              email: {
-                type: 'string'
-              }
-            },
-            required: ['type', 'email']
-          },
-          Avatar: {
-            type: 'object',
-            properties: {
-              type: {
-                type: 'string',
-                const: 'Avatar'
-              },
-              imageSrc: {
-                type: 'string'
-              },
-              name: {
-                type: 'string'
-              },
-              label: {
-                type: 'string'
-              },
-              size: {
+              sortOrder: {
                 type: 'string',
-                enum: ['xsmall', 'small', 'medium', 'large', 'xlarge']
+                enum: Object.values(SortedBy)
               },
-              tooltip: {
+              sortTooltip: {
                 type: 'string'
               }
             },
-            required: ['type', 'name', 'size']
+            required: ['id', 'name', 'text']
           },
-          HighlightedValue: {
-            type: 'object',
-            properties: {
-              type: {
-                type: 'string',
-                const: 'StatusBox'
-              },
-              text: {
-                type: 'string'
-              },
-              color: {
-                defaultValue: 'grey',
-                type: 'string',
-                enum: ['grey', 'red', 'orange', 'green', 'blue']
+          Column: {
+            anyOf: [PropertiesConverter.toJsonSchema(BooleanProperties), PropertiesConverter.toJsonSchema(CurrencyProperties), PropertiesConverter.toJsonSchema(DateProperties), PropertiesConverter.toJsonSchema(DatetimeProperties), PropertiesConverter.toJsonSchema(DecimalProperties), PropertiesConverter.toJsonSchema(EmailProperties), PropertiesConverter.toJsonSchema(LookupProperties), PropertiesConverter.toJsonSchema(MultiSelectProperties), PropertiesConverter.toJsonSchema(NumberProperties), PropertiesConverter.toJsonSchema(PercentProperties), PropertiesConverter.toJsonSchema(PhoneProperties), PropertiesConverter.toJsonSchema(PickListProperties), PropertiesConverter.toJsonSchema(TextProperties), PropertiesConverter.toJsonSchema(UrlProperties), // Below field is for the empty cell
+            {
+              type: 'object',
+              properties: {
+                type: {
+                  type: 'string'
+                },
+                value: {
+                  type: 'string'
+                }
               },
-              tooltip: {
-                type: 'string'
-              }
-            },
-            required: ['type', 'text', 'color']
+              required: ['type', 'value']
+            }]
           },
-          Tags: {
-            type: 'object',
+          ActionLocation: {
+            renderComponentType: 'object',
             properties: {
               type: {
-                type: 'string',
-                const: 'Tags'
-              },
-              title: {
                 type: 'string'
               },
-              tags: {
-                type: 'array'
-              }
+              actions: actionsSchema
             },
-            required: ['type', 'tags']
-          },
-          Cell: {
-            anyOf: [{
-              $ref: '#/definitions/Text'
-            }, {
-              $ref: '#/definitions/Link'
-            }, {
-              $ref: '#/definitions/CheckBox'
-            }, {
-              $ref: '#/definitions/Switch'
-            }, {
-              $ref: '#/definitions/Email'
-            }, {
-              $ref: '#/definitions/Avatar'
-            }, {
-              $ref: '#/definitions/Tags'
-            }, {
-              $ref: '#/definitions/HighlightedValue'
-            }]
+            required: ['actions']
           }
         },
         type: 'object',
         properties: {
-          data: {
-            type: 'object',
-            properties: {
-              headers: {
-                type: 'array',
-                items: {
-                  $ref: '#/definitions/HeaderMeta'
+          headers: {
+            type: 'array',
+            minIems: 0,
+            items: {
+              $ref: '#/definitions/HeaderMeta'
+            }
+          },
+          rows: {
+            type: 'array',
+            minIems: 0,
+            items: {
+              type: 'object',
+              properties: {
+                id: {
+                  type: 'string'
+                },
+                columns: {
+                  type: 'array',
+                  items: {
+                    $ref: '#/definitions/Column'
+                  }
+                },
+                rowActionLocation: {
+                  $ref: '#/definitions/ActionLocation'
+                },
+                isSelectable: {
+                  type: 'boolean'
+                },
+                isSelected: {
+                  type: 'boolean'
+                },
+                selectionTooltip: {
+                  type: 'string'
                 }
               },
-              rows: {
-                type: 'array',
-                items: {
-                  type: 'object',
-                  properties: {
-                    id: {
-                      type: 'string'
-                    },
-                    columns: {
-                      type: 'array',
-                      items: {
-                        $ref: '#/definitions/Cell'
-                      }
-                    },
-                    rowActions: {
-                      defaultValue: [],
-                      type: 'array',
-                      items: {
-                        $ref: '#/definitions/DeclarativeAction'
-                      }
-                    },
-                    clickAction: {
-                      $ref: '#/definitions/DeclarativeAction'
-                    }
-                  },
-                  required: ['id', 'columns', 'rowActions', 'clickAction']
-                }
-              }
-            },
-            required: ['headers', 'rows']
+              required: ['id', 'columns']
+            }
           }
-        }
-      }
-    }
-  },
-  sortBy: {
-    required: false,
-    defaultValue: {
-      id: '',
-      type: 'none'
-    },
-    typeMetadata: {
-      schema: {
-        id: {
-          required: true,
-          type: 'string'
         },
-        order: {
-          type: 'string',
-          enum: Object.values(SortOrder),
-          defaultValue: 'none'
-        }
+        required: ['headers', 'rows']
       }
     }
   }

package/es/cc/table-list/data-types/Header.js

@@ -4,17 +4,24 @@ export let SortedBy = /*#__PURE__*/function (SortedBy) {
   SortedBy["Descending"] = "descending";
   return SortedBy;
 }({});
-export let Size = /*#__PURE__*/function (Size) {
-  Size["XSmall"] = "xsmall";
-  Size["Small"] = "small";
-  Size["Medium"] = "medium";
-  Size["Large"] = "large";
-  Size["XLarge"] = "xlarge";
-  return Size;
+export let Width = /*#__PURE__*/function (Width) {
+  Width[Width["XSmall"] = 120] = "XSmall";
+  Width[Width["Small"] = 160] = "Small";
+  Width[Width["Medium"] = 200] = "Medium";
+  Width[Width["Large"] = 240] = "Large";
+  Width[Width["XLarge"] = 280] = "XLarge";
+  Width[Width["XXLarge"] = 320] = "XXLarge";
+  return Width;
 }({});
 export let Alignment = /*#__PURE__*/function (Alignment) {
   Alignment["Left"] = "left";
   Alignment["Center"] = "center";
   Alignment["Right"] = "right";
   return Alignment;
+}({});
+export let AlignmentOfFlex = /*#__PURE__*/function (AlignmentOfFlex) {
+  AlignmentOfFlex["left"] = "start";
+  AlignmentOfFlex["center"] = "center";
+  AlignmentOfFlex["right"] = "end";
+  return AlignmentOfFlex;
 }({});

package/es/cc/table-list/data-types/RowCursor.js

@@ -0,0 +1,8 @@
+var RowCursor = /*#__PURE__*/function (RowCursor) {
+  RowCursor["Default"] = "default";
+  RowCursor["Pointer"] = "pointer";
+  RowCursor["NotAllowed"] = "not-allowed";
+  return RowCursor;
+}(RowCursor || {});
+
+export default RowCursor;

package/es/cc/table-list/model/RowModel.js

@@ -2,13 +2,11 @@ export default function RowModel(_ref) {
   let {
     id,
     columns,
-    rowActions,
-    clickAction
+    rowActionLocation
   } = _ref;
   return {
     id,
     columns,
-    rowActions,
-    clickAction
+    rowActionLocation
   };
 }

package/es/cc/table-list/row/Properties.js

@@ -1,3 +1,5 @@
+import { Width } from "../data-types/Header";
+import RowCursor from "../data-types/RowCursor";
 const TableRowProperties = {
   isSelectionEnabled: {
     required: false,
@@ -44,7 +46,8 @@ const TableRowProperties = {
     }
   },
   columns: {
-    required: true,
+    required: false,
+    defaultValue: [],
     typeMetadata: {
       schema: {
         type: 'array' // TODO: Add Field Properties
@@ -52,21 +55,22 @@ const TableRowProperties = {
       }
     }
   },
-  clickAction: {
+  cursor: {
     required: false,
-    defaultValue: {},
+    defaultValue: 'pointer',
     typeMetadata: {
       schema: {
-        type: 'object'
+        type: 'string',
+        enum: Object.values(RowCursor)
       }
     }
   },
-  rowActions: {
+  rowActionLocation: {
     required: false,
-    defaultValue: [],
+    defaultValue: {},
     typeMetadata: {
       schema: {
-        type: 'array'
+        type: 'object'
       }
     }
   },
@@ -79,12 +83,13 @@ const TableRowProperties = {
       }
     }
   },
-  resizedColumnsWidth: {
+  rowActionsColumnWidth: {
     required: false,
-    defaultValue: false,
+    defaultValue: Width.XSmall,
     typeMetadata: {
       schema: {
-        type: 'object'
+        type: 'number',
+        enum: Object.values(Width)
       }
     }
   },