@desynova-digital/components 8.19.63 → 9.0.1

package/molecules/table/table.story.js

@@ -1,207 +1,217 @@
-"use strict";
+'use strict';
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _react3 = require("@storybook/react");
+var _react3 = require('@storybook/react');
 
-var _storyHelpers = require("../../_helpers/story-helpers");
+var _storyHelpers = require('../../_helpers/story-helpers');
 
-var _components = require("../../components");
+var _components = require('../../components');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var dataOld = {
   page_no: 1,
   total_entries: 4,
-  table_type: "multi-select",
+  table_type: 'multi-select',
   entries_per_page: 4,
   columns: [{
-    title: "Asset Name",
-    field: "filename",
-    type: "string"
+    title: 'Asset Name',
+    field: 'filename',
+    type: 'string'
   }, {
-    title: "Format",
-    field: "extension",
-    type: "string"
+    title: 'Format',
+    field: 'extension',
+    type: 'string'
   }, {
-    title: "Story Name",
-    field: "story_name",
-    type: "string"
+    title: 'Story Name',
+    field: 'story_name',
+    type: 'string'
   }, {
-    title: "Location",
-    field: "story_location",
-    type: "string"
+    title: 'Location',
+    field: 'story_location',
+    type: 'string'
   }, {
-    title: "Ingest Date",
-    field: "creation",
-    type: "date"
+    title: 'Ingest Date',
+    field: 'creation',
+    type: 'date'
   }, {
-    title: "Ingest Time",
-    field: "creation",
-    type: "time"
+    title: 'Ingest Time',
+    field: 'creation',
+    type: 'time'
   }, {
-    title: "Reporter",
-    field: "reporter_profile",
-    type: "avatar"
+    title: 'Reporter',
+    field: 'reporter_profile',
+    type: 'avatar'
+    // {
+    //     "title": "Ingest Status",
+    //     "field": "trans_status",
+    //     "type": "string"
+    // },
+    // {
+    //     "title": "Actions",
+    //     "field": "actions",
+    //     "type": "actionIcon"
+    // }
   }],
   rows: [{
-    filename: "Rupee_US_dollar_conversion_rate",
-    extension: "MP4",
-    story_name: "Rupee touches 71.56 against US",
-    story_location: "Mumbai",
+    filename: 'Rupee_US_dollar_conversion_rate',
+    extension: 'MP4',
+    story_name: 'Rupee touches 71.56 against US',
+    story_location: 'Mumbai',
     creation: 1539756125000,
     reporter_profile: {
-      name: "Abc Pan",
-      email: "abc@gmail.com",
-      user_image: ""
+      name: 'Abc Pan',
+      email: 'abc@gmail.com',
+      user_image: ''
     },
-    trans_status: "FINISHED",
+    trans_status: 'FINISHED',
     arch_status: {
-      status: "inprogess",
+      status: 'inprogess',
       total: 33,
       completed: 12
     },
-    actions: ["play", "archieve", "restore", "delete"]
+    actions: ['play', 'archieve', 'restore', 'delete']
   }, {
-    filename: "Rupee_US_dollar_conversion_rate",
-    extension: "AVI",
-    story_name: "Rupee touches 71.56 against US",
-    story_location: "Mumbai",
+    filename: 'Rupee_US_dollar_conversion_rate',
+    extension: 'AVI',
+    story_name: 'Rupee touches 71.56 against US',
+    story_location: 'Mumbai',
     creation: 1539756125000,
     reporter_profile: {
-      name: "Abc Pan",
-      email: "abc@gmail.com",
-      user_image: ""
+      name: 'Abc Pan',
+      email: 'abc@gmail.com',
+      user_image: ''
     },
-    trans_status: "INQUEUE",
+    trans_status: 'INQUEUE',
     arch_status: {
-      status: "inprogess",
+      status: 'inprogess',
       total: 33,
       completed: 12
     },
-    actions: ["play", "archieve", "restore", "delete"]
+    actions: ['play', 'archieve', 'restore', 'delete']
   }, {
-    filename: "Rupee_US_dollar_conversion_rate",
-    extension: "MXF",
-    story_name: "Rupee touches 71.56 against US",
-    story_location: "Mumbai",
+    filename: 'Rupee_US_dollar_conversion_rate',
+    extension: 'MXF',
+    story_name: 'Rupee touches 71.56 against US',
+    story_location: 'Mumbai',
     creation: 1539756125000,
     reporter_profile: {
-      name: "Abc Pan",
-      email: "abc@gmail.com",
-      user_image: ""
+      name: 'Abc Pan',
+      email: 'abc@gmail.com',
+      user_image: ''
     },
-    trans_status: "STARTED",
+    trans_status: 'STARTED',
     arch_status: {
-      status: "inprogess",
+      status: 'inprogess',
       total: 33,
       completed: 12
     },
-    actions: ["play", "archieve", "restore", "delete"]
+    actions: ['play', 'archieve', 'restore', 'delete']
   }, {
-    filename: "Rupee_US_dollar_conversion_rate",
-    extension: "WAV",
-    story_name: "Rupee touches 71.56 against US",
-    story_location: "Mumbai",
+    filename: 'Rupee_US_dollar_conversion_rate',
+    extension: 'WAV',
+    story_name: 'Rupee touches 71.56 against US',
+    story_location: 'Mumbai',
     creation: 1539756125000,
     reporter_profile: {
-      name: "Abc Pan",
-      email: "abc@gmail.com",
-      user_image: ""
+      name: 'Abc Pan',
+      email: 'abc@gmail.com',
+      user_image: ''
     },
-    trans_status: "PENDING",
+    trans_status: 'PENDING',
     arch_status: {
-      status: "inprogess",
+      status: 'inprogess',
       total: 33,
       completed: 12
     },
-    actions: ["play", "archieve", "restore", "delete"]
+    actions: ['play', 'archieve', 'restore', 'delete']
   }]
 };
 
 var data = {
   page_no: 1,
   total_entries: 4,
-  table_type: "default",
+  table_type: 'default',
   entries_per_page: 15,
   columns: {
-    action_elements: ["play", "task_assignment", "editprocess_initiate"],
-    common_elements: ["play", "task_assignment", "editprocess_initiate"],
+    action_elements: ['play', 'task_assignment', 'editprocess_initiate'],
+    common_elements: ['play', 'task_assignment', 'editprocess_initiate'],
     column_elements: [{
-      title: "Asset Name",
-      field: "asset_name",
-      access: "read",
-      type: "link_text",
+      title: 'Asset Name',
+      field: 'asset_name',
+      access: 'read',
+      type: 'link_text',
       index: 1
     }, {
-      title: "Details",
-      field: "details",
-      access: "read",
-      type: "string",
+      title: 'Details',
+      field: 'details',
+      access: 'read',
+      type: 'string',
       index: 2
     }, {
-      title: "S&P Status",
-      field: "snp_status",
-      access: "read",
-      type: "label",
+      title: 'S&P Status',
+      field: 'snp_status',
+      access: 'read',
+      type: 'label',
       index: 3
     }, {
-      title: "Language",
-      field: "language_tracks",
-      access: "read",
-      type: "dubbing_status",
+      title: 'Language',
+      field: 'language_tracks',
+      access: 'read',
+      type: 'dubbing_status',
       index: 4
     }, {
-      title: "PGM Status",
-      field: "pgm_status",
-      access: "read",
-      type: "label",
+      title: 'PGM Status',
+      field: 'pgm_status',
+      access: 'read',
+      type: 'label',
       index: 5
     }, {
-      title: "Edit Status",
-      field: "edit_process_status",
-      access: "read",
-      type: "label",
+      title: 'Edit Status',
+      field: 'edit_process_status',
+      access: 'read',
+      type: 'label',
       index: 6
     }, {
-      title: "Actions",
-      field: "actions",
-      access: "write",
-      type: "action_icon",
+      title: 'Actions',
+      field: 'actions',
+      access: 'write',
+      type: 'action_icon',
       index: 7
     }, {
-      title: "Batch",
-      field: "batch_name",
-      access: "read",
-      type: "string",
-      admin_column: ["snp_edit_admin"],
+      title: 'Batch',
+      field: 'batch_name',
+      access: 'read',
+      type: 'string',
+      admin_column: ['snp_edit_admin'],
       index: 8
     }, {
-      title: "Delivery Location",
-      field: "batch_regions",
-      access: "read",
-      type: "string",
-      admin_column: ["snp_edit_admin"],
+      title: 'Delivery Location',
+      field: 'batch_regions',
+      access: 'read',
+      type: 'string',
+      admin_column: ['snp_edit_admin'],
       index: 9
     }, {
-      title: "Ingest Id",
-      field: "ingest_id",
-      access: "read",
-      type: "string",
+      title: 'Ingest Id',
+      field: 'ingest_id',
+      access: 'read',
+      type: 'string',
       index: 10
     }, {
-      access: "read",
-      field: "creation",
-      title: "Ingest Date",
-      type: "datetime",
+      access: 'read',
+      field: 'creation',
+      title: 'Ingest Date',
+      type: 'datetime',
       index: 11
     }, {
-      access: "read",
-      field: "assigned_to",
-      title: "",
-      type: "table",
+      access: 'read',
+      field: 'assigned_to',
+      title: '',
+      type: 'table',
       index: 12
     }],
     extra_column_elements: {
@@ -209,150 +219,146 @@ var data = {
     }
   },
   rows: [{
-    batch_db_id: "603bcbfb9926b8145c94fd63",
-    asset_name: "Monster Crocs Wrangler",
-    ingest_id: "DYN1178",
-    ingest_db_id: "5f52160726d887294064842e",
-    asset_type: "show",
-    asset_db_id: "5f51fe159926b8297fd057ba",
-    h1: "Monster Crocs Wrangler",
-    h2: "Sep 04 2020",
-    batch_name: "Review Master 1",
-    batch_regions: ["India Tx"],
-    season_no: "1",
-    episode_name: "",
+    batch_db_id: '603bcbfb9926b8145c94fd63',
+    asset_name: 'Monster Crocs Wrangler',
+    ingest_id: 'DYN1178',
+    ingest_db_id: '5f52160726d887294064842e',
+    asset_type: 'show',
+    asset_db_id: '5f51fe159926b8297fd057ba',
+    h1: 'Monster Crocs Wrangler',
+    h2: 'Sep 04 2020',
+    batch_name: 'Review Master 1',
+    batch_regions: ['India Tx'],
+    season_no: '1',
+    episode_name: '',
     episode_no: 5,
-    snp_status: "In Progress",
-    pgm_status: "Approval Pending",
-    edit_process_status: "Pending",
-    edit_process_initiated_by: "Pending",
+    snp_status: 'In Progress',
+    pgm_status: 'Approval Pending',
+    edit_process_status: 'Pending',
+    edit_process_initiated_by: 'Pending',
     creation: 1614531579000,
     batch_creation: 1614531579000,
-    details: "Show - S1 E5 - askfjlasjf laksjdflkajsldfk ajslfdkjalskdfj laksjflask",
-    actions: ["play", "editprocess_initiate", "qc"],
+    details: 'Show - S1 E5 - askfjlasjf laksjdflkajsldfk ajslfdkjalskdfj laksjflask',
+    actions: ['play', 'editprocess_initiate', 'qc'],
     language_tracks: [{
-      language: "Hindi",
-      review_status: "Pending"
+      language: 'Hindi',
+      review_status: 'Pending'
     }, {
-      language: "English",
-      review_status: "Pending"
+      language: 'English',
+      review_status: 'Pending'
     }],
     assigned_to: {
       column_elements: [{
-        title: "Language",
-        field: "language",
-        type: "string"
+        title: 'Language',
+        field: 'language',
+        type: 'string'
       }, {
-        title: "Status",
-        field: "status",
-        type: "label"
+        title: 'Status',
+        field: 'status',
+        type: 'label'
       }, {
-        title: "Batch Creation",
-        field: "batch_creation",
-        type: "datetime"
+        title: 'Batch Creation',
+        field: 'batch_creation',
+        type: 'datetime'
       }],
 
       rows: [{
-        language: "Hindi",
-        status: "In Progress",
+        language: 'Hindi',
+        status: 'In Progress',
         batch_creation: 1614531579000
       }]
     }
   }],
-  table_title: "Review History"
+  table_title: 'Review History'
 };
 
-(0, _react3.storiesOf)("Table").add("default", function () {
+(0, _react3.storiesOf)('Table').add('default', function () {
   return _react2.default.createElement(
     _storyHelpers.Example,
-    { title: "default" },
+    { title: 'default' },
     _react2.default.createElement(
       _components.Table,
       {
-        theme: "dark",
+        theme: 'dark',
         items: data.rows,
         showSearchBox: true,
         showTableHeader: false,
-        searchValue: "",
-        tableTitle: "Reports"
+        searchValue: '',
+        tableTitle: 'Reports'
         //videoPlayBtn={true}
         , showActions: true,
         maxShowNoOfColumns: data.columns.extra_column_elements.no_of_active_columns
         // selectable={true}
         , commonActions: data.columns.common_elements,
         commonActionClickHandler: function commonActionClickHandler(actionItem, e) {
-          console.log("actionClickHandler:::", actionItem, e);
+          console.log('actionClickHandler:::', actionItem, e);
         },
         actionClickHandler: function actionClickHandler(actionItem, e) {
-          console.log("actionClickHandler:::", actionItem, e);
+          console.log('actionClickHandler:::', actionItem, e);
         },
         onToggleExtraDetails: function onToggleExtraDetails(e, index) {
-          console.log("callback func : onToggleExtraDetails() ", index);
+          console.log('callback func : onToggleExtraDetails() ', index);
         },
         onVideoPlayClick: function onVideoPlayClick(e, index, obj) {
-          console.log("callback func : onVideoPlayClick() ", index, obj);
+          console.log('callback func : onVideoPlayClick() ', index, obj);
         }
         // selectable
         , rowSelectionChange: function rowSelectionChange(selectedRows) {
-          console.log("rowSelectionChange::::", selectedRows);
-        },
-        tableLoading: true,
+          console.log('rowSelectionChange::::', selectedRows);
+        }
+        // tableLoading={true}
+        , tableLoading: false,
         actionLable: {
-          play: "Play",
-          subtitle: "Subtitle",
-          clipping: "Clipping",
-          subtitle_request: "Request Subtitle",
-          clipping_request: "tv",
-          comment: "Comment",
-          reply: "Reply",
-          ingest_delete: "Delete",
-          tagging_ingest: "Tagging",
-          tagging: "Tagging",
-          tagging_request: "Request Tagging",
-          archive_ingest: "Archive",
-          archive: "Archive",
-          archive_request: "Request Archive",
-          restore_ingest: "Restore",
-          restore: "Restore",
-          restore_request: "Request Restore",
-          assign: "Assign",
-          dubbing_assign: "Assign",
-          restore_assign: "Assign",
-          tagging_assign: "Assign",
-          archive_assign: "Assign",
-          snp_edit_assign: "Assign",
-          qc: "QC",
-          editprocess_initiate: "Initiate Edit Process",
-          assign_box_id: "Assign Box ID",
-          initiate_tx_master: "Initiate TX Master",
-          snp_edit: "S&P",
-          pgm_edit: "PGM"
+          play: 'Play',
+          subtitle: 'Subtitle',
+          clipping: 'Clipping',
+          subtitle_request: 'Request Subtitle',
+          clipping_request: 'tv',
+          comment: 'Comment',
+          reply: 'Reply',
+          ingest_delete: 'Delete',
+          tagging_ingest: 'Tagging',
+          tagging: 'Tagging',
+          tagging_request: 'Request Tagging',
+          archive_ingest: 'Archive',
+          archive: 'Archive',
+          archive_request: 'Request Archive',
+          restore_ingest: 'Restore',
+          restore: 'Restore',
+          restore_request: 'Request Restore',
+          assign: 'Assign',
+          dubbing_assign: 'Assign',
+          restore_assign: 'Assign',
+          tagging_assign: 'Assign',
+          archive_assign: 'Assign',
+          snp_edit_assign: 'Assign',
+          qc: 'QC',
+          editprocess_initiate: 'Initiate Edit Process',
+          assign_box_id: 'Assign Box ID',
+          initiate_tx_master: 'Initiate TX Master',
+          snp_edit: 'S&P',
+          pgm_edit: 'PGM'
         },
         rowSelectedActions: _react2.default.createElement(
-          "div",
+          'div',
           {
             style: {
-              position: "relative",
-              height: "100%",
-              width: "100%"
+              position: 'relative',
+              height: '100%',
+              width: '100%'
             }
           },
           _react2.default.createElement(
-            "span",
+            'span',
             null,
-            "Hello!!!!"
+            'Hello!!!!'
           )
         )
       },
       data.columns.column_elements.sort(function (a, b) {
         return a.index - b.index;
       }).map(function (item) {
-        return _react2.default.createElement(_components.Table.Column, {
-          type: item.type,
-          field: item.field,
-          title: item.title,
-          key: item.index
-        });
+        return _react2.default.createElement(_components.Table.Column, { type: item.type, field: item.field, title: item.title, key: item.index });
       })
     )
   );
@@ -374,4 +380,194 @@ var data = {
 //     </Table>
 //     {/* </ThemeProvider> */}
 //   </Example>
-// ))
+// ))
+
+(0, _react3.storiesOf)('Table').add('light-theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'default' },
+    _react2.default.createElement(
+      _components.Table,
+      {
+        theme: 'light',
+        items: data.rows,
+        showSearchBox: true,
+        showTableHeader: false,
+        searchValue: '',
+        tableTitle: 'Reports'
+        //videoPlayBtn={true}
+        , showActions: true,
+        maxShowNoOfColumns: data.columns.extra_column_elements.no_of_active_columns
+        // selectable={true}
+        , commonActions: data.columns.common_elements,
+        commonActionClickHandler: function commonActionClickHandler(actionItem, e) {
+          console.log('actionClickHandler:::', actionItem, e);
+        },
+        actionClickHandler: function actionClickHandler(actionItem, e) {
+          console.log('actionClickHandler:::', actionItem, e);
+        },
+        onToggleExtraDetails: function onToggleExtraDetails(e, index) {
+          console.log('callback func : onToggleExtraDetails() ', index);
+        },
+        onVideoPlayClick: function onVideoPlayClick(e, index, obj) {
+          console.log('callback func : onVideoPlayClick() ', index, obj);
+        }
+        // selectable
+        , rowSelectionChange: function rowSelectionChange(selectedRows) {
+          console.log('rowSelectionChange::::', selectedRows);
+        }
+        // tableLoading={true}
+        , tableLoading: false,
+        actionLable: {
+          play: 'Play',
+          subtitle: 'Subtitle',
+          clipping: 'Clipping',
+          subtitle_request: 'Request Subtitle',
+          clipping_request: 'tv',
+          comment: 'Comment',
+          reply: 'Reply',
+          ingest_delete: 'Delete',
+          tagging_ingest: 'Tagging',
+          tagging: 'Tagging',
+          tagging_request: 'Request Tagging',
+          archive_ingest: 'Archive',
+          archive: 'Archive',
+          archive_request: 'Request Archive',
+          restore_ingest: 'Restore',
+          restore: 'Restore',
+          restore_request: 'Request Restore',
+          assign: 'Assign',
+          dubbing_assign: 'Assign',
+          restore_assign: 'Assign',
+          tagging_assign: 'Assign',
+          archive_assign: 'Assign',
+          snp_edit_assign: 'Assign',
+          qc: 'QC',
+          editprocess_initiate: 'Initiate Edit Process',
+          assign_box_id: 'Assign Box ID',
+          initiate_tx_master: 'Initiate TX Master',
+          snp_edit: 'S&P',
+          pgm_edit: 'PGM'
+        },
+        rowSelectedActions: _react2.default.createElement(
+          'div',
+          {
+            style: {
+              position: 'relative',
+              height: '100%',
+              width: '100%'
+            }
+          },
+          _react2.default.createElement(
+            'span',
+            null,
+            'Hello!!!!'
+          )
+        )
+      },
+      data.columns.column_elements.sort(function (a, b) {
+        return a.index - b.index;
+      }).map(function (item) {
+        return _react2.default.createElement(_components.Table.Column, { type: item.type, field: item.field, title: item.title, key: item.index });
+      })
+    )
+  );
+});
+
+(0, _react3.storiesOf)('Table').add('nexc theme', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'default' },
+    _react2.default.createElement(
+      _components.Table,
+      {
+        theme: 'nexc',
+        items: data.rows,
+        showSearchBox: true,
+        showTableHeader: false,
+        searchValue: '',
+        tableTitle: 'Reports'
+        //videoPlayBtn={true}
+        , showActions: true,
+        maxShowNoOfColumns: data.columns.extra_column_elements.no_of_active_columns
+        // selectable={true}
+        , commonActions: data.columns.common_elements,
+        commonActionClickHandler: function commonActionClickHandler(actionItem, e) {
+          console.log('actionClickHandler:::', actionItem, e);
+        },
+        actionClickHandler: function actionClickHandler(actionItem, e) {
+          console.log('actionClickHandler:::', actionItem, e);
+        },
+        onToggleExtraDetails: function onToggleExtraDetails(e, index) {
+          console.log('callback func : onToggleExtraDetails() ', index);
+        },
+        onVideoPlayClick: function onVideoPlayClick(e, index, obj) {
+          console.log('callback func : onVideoPlayClick() ', index, obj);
+        }
+        // selectable
+        , rowSelectionChange: function rowSelectionChange(selectedRows) {
+          console.log('rowSelectionChange::::', selectedRows);
+        }
+        // tableLoading={true}
+        , tableLoading: false,
+        actionLable: {
+          play: 'Play',
+          subtitle: 'Subtitle',
+          clipping: 'Clipping',
+          subtitle_request: 'Request Subtitle',
+          clipping_request: 'tv',
+          comment: 'Comment',
+          reply: 'Reply',
+          ingest_delete: 'Delete',
+          tagging_ingest: 'Tagging',
+          tagging: 'Tagging',
+          tagging_request: 'Request Tagging',
+          archive_ingest: 'Archive',
+          archive: 'Archive',
+          archive_request: 'Request Archive',
+          restore_ingest: 'Restore',
+          restore: 'Restore',
+          restore_request: 'Request Restore',
+          assign: 'Assign',
+          dubbing_assign: 'Assign',
+          restore_assign: 'Assign',
+          tagging_assign: 'Assign',
+          archive_assign: 'Assign',
+          snp_edit_assign: 'Assign',
+          qc: 'QC',
+          editprocess_initiate: 'Initiate Edit Process',
+          assign_box_id: 'Assign Box ID',
+          initiate_tx_master: 'Initiate TX Master',
+          snp_edit: 'S&P',
+          pgm_edit: 'PGM'
+        },
+        rowSelectedActions: _react2.default.createElement(
+          'div',
+          {
+            style: {
+              position: 'relative',
+              height: '100%',
+              width: '100%'
+            }
+          },
+          _react2.default.createElement(
+            'span',
+            null,
+            'Hello!!!!'
+          )
+        )
+      },
+      data.columns.column_elements.sort(function (a, b) {
+        return a.index - b.index;
+      }).map(function (item) {
+        return _react2.default.createElement(_components.Table.Column, {
+          theme: 'nexc',
+          type: item.type,
+          field: item.field,
+          title: item.title,
+          key: item.index
+        });
+      })
+    )
+  );
+});