@zohodesk/library-platform 1.0.0-exp.1

package/examples/library/src/table-list/EmptyList.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { TableList } from '@zohodesk/library-platform/es/library';
+import { data } from './data/empty_data';
+
+export default class EmptyList extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div style={{ height: '100%' }}>
+        <TableList
+          isLoading={false}
+          data={data}
+        />
+      </div>
+    );
+  }
+}

package/examples/library/src/table-list/FlexibleList.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import { TableList } from '@zohodesk/library-platform/es/library';
+import { data } from './data/simple_data';
+
+export default class FlexibleList extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div style={{ height: '100%' }}>
+        <TableList
+          isLoading={false}
+          data={data}
+          isFlexibleColumns
+        />
+      </div>
+    );
+  }
+}

package/examples/library/src/table-list/InitialLoadingList.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { TableList } from '@zohodesk/library-platform/es/library';
+
+export default class InitialLoadingList extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div style={{ height: '100%' }}>
+        <TableList
+          isLoading={true}
+          data={{
+            headers: [],
+            rows: []
+          }}
+        />
+      </div>
+    );
+  }
+}

package/examples/library/src/table-list/ItemsInitialLoadingList.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { TableList } from '@zohodesk/library-platform/es/library';
+import { data } from './data/empty_data';
+
+export default class InitialLoadingList extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div style={{ height: '100%' }}>
+        <TableList
+          isLoading={true}
+          data={data}
+        />
+      </div>
+    );
+  }
+}

package/examples/library/src/table-list/ListWithoutActions.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { TableList } from '@zohodesk/library-platform/es/library';
+import { data } from './data/all_fields_without_actions';
+
+export default class ListWithoutActions extends Component {
+  constructor(props) {
+    super(props);
+  }
+  
+  render() {
+    return (
+      <div style={{ height: '100%' }}>
+        <TableList
+          isLoading={false}
+          data={data}
+        />
+      </div>
+    );
+  }
+}

package/examples/library/src/table-list/MassSelectionList.js

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import { TableList } from '@zohodesk/library-platform/es/library';
+import { data } from './data/all_fields';
+
+export default class MassSelectionList extends Component {
+  constructor(props) {
+    super(props);
+  }
+  
+  render() {
+    return (
+      <div style={{ height: '100%' }}>
+        <TableList
+          isLoading={false}
+          data={data}
+          selectionConfig={{
+            isEnabled: true,
+            maxLimit: 10
+          }}
+        />
+      </div>
+    );
+  }
+}

package/examples/library/src/table-list/MoreLoadingList.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { TableList } from '@zohodesk/library-platform/es/library';
+import { data } from './data/all_fields';
+
+export default class MoreLoadingList extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div style={{ height: '100%' }}>
+        <TableList
+          isLoading={true}
+          data={data}
+        />
+      </div>
+    );
+  }
+}

package/examples/library/src/table-list/ResizerList.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import { TableList } from '@zohodesk/library-platform/es/library';
+import { data } from './data/all_fields';
+
+const boxStyle = {
+  width: '10vw',
+  backgroundColor: '#ebf0f5',
+  border: '1px solid #d5dde7',
+  padding: '8px 10px',
+  borderRadius: '6px',
+  flexShrink: '0',
+  height: '100%'
+};
+export default class ResizerList extends Component {
+  render() {
+    return (
+      <div
+        style={{
+          height: '100%',
+          padding: '10px',
+          display: 'flex',
+          columnGap: '10px'
+        }}
+      >
+        <div style={boxStyle}>left box</div>
+        <div style={{ flex: '1 1 0%', minWidth: '0', height: '100%', border: '1px solid #d5dde7', borderRadius: '6px', overflow: 'hidden' }}>
+          <TableList
+            data={data}
+            resizerConfig={{
+              isEnabled: true,
+              minWidth: 120,
+              maxWidth: 500
+            }}
+          />
+        </div>
+        <div style={boxStyle}>right box</div>
+      </div>
+    );
+  }
+}

package/examples/library/src/table-list/SimpleList.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { TableList } from '@zohodesk/library-platform/es/library';
+import { data } from './data/simple_data';
+
+export default class SimpleList extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div style={{ height: '100%' }}>
+        <TableList
+          isLoading={false}
+          data={data}
+        />
+      </div>
+    );
+  }
+}

package/examples/library/src/table-list/SortableList.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { TableList } from '@zohodesk/library-platform/es/library';
+import { data } from './data/all_sortable_fields';
+
+export default class SortableList extends Component {
+  constructor(props) {
+    super(props);
+  }
+  
+  render() {
+    return (
+      <div style={{ height: '100%' }}>
+        <TableList
+          isLoading={false}
+          data={data}
+        />
+      </div>
+    );
+  }
+}

package/examples/library/src/table-list/data/all_fields.js

@@ -0,0 +1,192 @@
+export const data = {
+  headers: [
+    {
+      id: 'textColumn',
+      text: 'Text',
+      size: 'medium',
+      alignment: 'left'
+    },
+    {
+      id: 'emailColumn',
+      text: 'Email',
+      size: 'large',
+      alignment: 'left'
+    },
+    {
+      id: 'tagsColumn_default',
+      text: 'Tags - default',
+      size: 'xlarge',
+      alignment: 'left'
+    },
+    {
+      id: 'switchColumn',
+      text: 'Switch',
+      size: 'medium',
+      alignment: 'center'
+    },
+    {
+      id: 'linkColumn',
+      text: 'Link',
+      size: 'medium',
+      alignment: 'left'
+    },
+    {
+      id: 'tagsColumn_color',
+      text: 'Tags - color',
+      size: 'xlarge',
+      alignment: 'left'
+    },
+    {
+      id: 'checkboxColumn',
+      text: 'Checkbox',
+      size: 'medium',
+      alignment: 'center'
+    },
+    {
+      id: 'labeledAvatarColumn',
+      text: 'Avatar (with label)',
+      size: 'large',
+      alignment: 'left'
+    },
+    {
+      id: 'tagsColumn_avatar',
+      text: 'Tags - avatar',
+      size: 'xlarge',
+      alignment: 'left'
+    },
+    {
+      id: 'statusboxColumn',
+      text: 'HighlightedValue',
+      size: 'large',
+      alignment: 'left'
+    },
+    {
+      id: 'avatarColumn',
+      text: 'Avatar',
+      size: 'medium',
+      alignment: 'center'
+    }
+  ],
+  rows: Array.from({ length: 30 }).map((_, i) => ({
+    id: '3760000000046024_' + i,
+    columns: [
+      {
+        type: 'SingleLineField',
+        value: 'Lorem ipsum'
+      },
+      {
+        type: 'EmailField',
+        value: 'don.edwar@zylkers.com'
+      },
+      {
+        type: 'MultiSelectField',
+        value: ['Chennai', 'Mumbai', 'Bangalore', 'Delhi', 'Kolkata']
+      },
+      {
+        type: 'SwitchField',
+        value: i % 4 == 0
+      },
+      {
+        type: 'URLField',
+        value: 'https://www.zoho.com'
+      },
+      {
+        type: 'SingleLineField',
+        value: 'Tags - Color'
+      },
+      // {
+      //   "type": "Tags",
+      //   "title": "Tags - Color",
+      //   "tags": [
+      //     { id: "1", label: "Red", color: "#de3535" },
+      //     { id: "2", label: "Green", color: "#26a942" },
+      //     { id: "3", label: "Blue", color: "#0a73eb" },
+      //     { id: "4", label: "Orange", color: "#e57717" },
+      //     { id: "5", label: "Purple", color: "#9b36c7" },
+      //     { id: "6", label: "Gray", color: "#ababab" }
+      //   ]
+      // },
+      {
+        type: 'CheckboxField',
+        value: i % 5 == 0
+      },
+      {
+        type: 'LookUpField',
+        value: {
+          id: i,
+          photoURL: '',
+          name: 'Vimalesan'
+        }
+      },
+      {
+        type: 'SingleLineField',
+        value: 'Tags - Avatar'
+      },
+      {
+        type: 'SingleLineField',
+        value: 'HighlightedValue'
+      },
+      {
+        type: 'SingleLineField',
+        value: 'Avatar'
+      }
+      // {
+      //   "type": "Tags",
+      //   "title": "Tags - Avatar",
+      //   "tags": [
+      //     { id: "1", label: "John Abraham", imageAltText: "John Abraham", imageSrc: "" },
+      //     { id: "2", label: "Edwards", imageAltText: "Edwards", imageSrc: "" },
+      //     { id: "3", label: "Arun Kumar", imageAltText: "Arun Kumar", imageSrc: "" },
+      //     { id: "4", label: "Dinesh Kanna", imageAltText: "Dinesh Kanna", imageSrc: "https://contacts.zoho.com/file?fs=thumb&nocache=1722334958831" },
+      //     { id: "5", label: "Alexander", imageAltText: "Alexander", imageSrc: "" },
+      //     { id: "6", label: "George Mariam", imageAltText: "George Mariam", imageSrc: "" }
+      //   ]
+      // },
+      // {
+      //   "type": "HighlightedValue",
+      //   "text": "Open",
+      //   "color": "blue",
+      //   "tooltip": "HighlightedValue field"
+      // },
+      // {
+      //   "type": "Avatar",
+      //   "imageSrc": "",
+      //   "size": "xsmall",
+      //   "name": "Vimalesan",
+      //   "tooltip": "Avatar field"
+      // }
+    ],
+    rowActions: [
+      {
+        name: 'Edit',
+        label: 'Edit Page',
+        actionName: 'NAVIGATATION',
+        actionPayload: {
+          url: '/agent/arunalocal/arunalocal/raises/edit/3760000000046024'
+        },
+        buttonType: 'primary',
+        icon: 'ZD-GN-edit'
+      },
+      {
+        name: 'Delete',
+        label: 'Delete',
+        actionName: 'DELETE',
+        actionPayload: {
+          id: '3760000000046024'
+        },
+        buttonType: 'danger',
+        icon: 'ZD-GN-delete'
+      }
+    ],
+    clickAction: {
+      id: 'Click',
+      label: 'Detail Page',
+      actionName: 'NAVIGATATION',
+      actionPayload: {
+        url: '/agent/arunalocal/arunalocal/raises/details/3760000000046024'
+      },
+      buttonType: 'Primary|Secondary',
+      icon: 'ZD-GN-edit'
+    }
+  }))
+};

package/examples/library/src/table-list/data/all_fields_without_actions.js

@@ -0,0 +1,109 @@
+export const data = {
+  "headers": [
+    {
+      "id": "textColumn",
+      "text": "Text",
+      "size": "medium",
+      "alignment": "left"
+    },
+    {
+      "id": "emailColumn",
+      "text": "Email",
+      "size": "large",
+      "alignment": "left"
+    },
+    {
+      "id": "switchColumn",
+      "text": "Switch",
+      "size": "medium",
+      "alignment": "center"
+    },
+    {
+      "id": "linkColumn",
+      "text": "Link",
+      "size": "medium",
+      "alignment": "left"
+    },
+    {
+      "id": "checkboxColumn",
+      "text": "Checkbox",
+      "size": "medium",
+      "alignment": "center"
+    },
+    {
+      "id": "labeledAvatarColumn",
+      "text": "Avatar (with label)",
+      "size": "large",
+      "alignment": "left"
+    },
+    {
+      "id": "statusboxColumn",
+      "text": "HighlightedValue",
+      "size": "large",
+      "alignment": "left"
+    },
+    {
+      "id": "avatarColumn",
+      "text": "Avatar",
+      "size": "medium",
+      "alignment": "left"
+    }
+  ],
+  "rows": Array.from({length: 30}).map((_, i) => (
+    {
+      "id": "3760000000046024_"+i,
+      "columns": [
+        {
+          "type": "SingleLineField",
+          "value": "Lorem ipsum"
+        },
+        {
+          "type": "EmailField",
+          "value": "don.edwar@zylkers.com"
+        },
+        {
+          "type": "SwitchField",
+          "value": i % 4 == 0
+        },
+        {
+          "type": "URLField",
+          "value": "https://www.zoho.com"
+        },
+        {
+          "type": "CheckboxField",
+          "value": i % 5 == 0
+        },
+        {
+          "type": "LookUpField",
+          "value": {
+            "id": i,
+            "photoURL": "",
+            "name": "Vimalesan"
+          }
+        },
+        {
+          "type": "SingleLineField",
+          "value": "HighlightedValue"
+        },
+        {
+          "type": "SingleLineField",
+          "value": "Avatar"
+        }
+        // {
+        //   "type": "HighlightedValue",
+        //   "text": "Open",
+        //   "color": "blue",
+        //   "tooltip": "HighlightedValue field"
+        // },
+        // {
+        //   "type": "Avatar",
+        //   "imageSrc": "",
+        //   "size": "xsmall",
+        //   "name": "Vimalesan",
+        //   "tooltip": "Avatar field"
+        // }
+      ],
+      "rowActions": []
+    }
+  ))
+};

package/examples/library/src/table-list/data/all_sortable_fields.js

@@ -0,0 +1,142 @@
+export const data = {
+  "headers": [
+    {
+      "id": "textColumn",
+      "text": "Text",
+      "sortable": true,
+      "size": "medium",
+      "alignment": "left"
+    },
+    {
+      "id": "emailColumn",
+      "text": "Email",
+      "sortable": true,
+      "size": "large",
+      "alignment": "left"
+    },
+    {
+      "id": "switchColumn",
+      "text": "Switch",
+      "size": "medium",
+      "alignment": "center"
+    },
+    {
+      "id": "linkColumn",
+      "text": "Link",
+      "size": "medium",
+      "alignment": "left"
+    },
+    {
+      "id": "checkboxColumn",
+      "text": "Checkbox",
+      "size": "medium",
+      "alignment": "center"
+    },
+    {
+      "id": "labeledAvatarColumn",
+      "text": "Avatar (with label)",
+      "size": "large",
+      "alignment": "left"
+    },
+    {
+      "id": "statusboxColumn",
+      "text": "HighlightedValue",
+      "size": "large",
+      "alignment": "left"
+    },
+    {
+      "id": "avatarColumn",
+      "text": "Avatar",
+      "size": "medium",
+      "alignment": "center"
+    }
+  ],
+  "rows": Array.from({length: 30}).map((_, i) => (
+    {
+      "id": "3760000000046024_"+i,
+      "columns": [
+        {
+          "type": "SingleLineField",
+          "value": "Lorem ipsum"
+        },
+        {
+          "type": "EmailField",
+          "value": "don.edwar@zylkers.com"
+        },
+        {
+          "type": "SwitchField",
+          "value": i % 4 == 0
+        },
+        {
+          "type": "URLField",
+          "value": "https://www.zoho.com"
+        },
+        {
+          "type": "CheckboxField",
+          "value": i % 5 == 0
+        },
+        {
+          "type": "LookUpField",
+          "value": {
+            "id": i,
+            "photoURL": "",
+            "name": "Vimalesan"
+          }
+        },
+        {
+          "type": "SingleLineField",
+          "value": "HighlightedValue"
+        },
+        {
+          "type": "SingleLineField",
+          "value": "Avatar"
+        }
+        // {
+        //   "type": "HighlightedValue",
+        //   "text": "Open",
+        //   "color": "blue",
+        //   "tooltip": "HighlightedValue field"
+        // },
+        // {
+        //   "type": "Avatar",
+        //   "imageSrc": "",
+        //   "size": "xsmall",
+        //   "name": "Vimalesan",
+        //   "tooltip": "Avatar field"
+        // }
+      ],
+      "rowActions": [
+        {
+          "name": "Edit",
+          "label": "Edit Page",
+          "actionName": "NAVIGATATION",
+          "actionPayload": {
+            "url": "/agent/arunalocal/arunalocal/raises/edit/3760000000046024"
+          },
+          "buttonType": "primary",
+          "icon": "ZD-GN-edit"
+        },
+        {
+          "name": "Delete",
+          "label": "Delete",
+          "actionName": "DELETE",
+          "actionPayload": {
+            "id": "3760000000046024"
+          },
+          "buttonType": "danger",
+          "icon": "ZD-GN-delete"
+        }
+      ],
+      "clickAction": {
+        "id": "Click",
+        "label": "Detail Page",
+        "actionName": "NAVIGATATION",
+        "actionPayload": {
+          "url": "/agent/arunalocal/arunalocal/raises/details/3760000000046024"
+        },
+        "buttonType": "Primary|Secondary",
+        "icon": "ZD-GN-edit"
+      }
+    }
+  ))
+};