@desynova-digital/components 8.19.63 → 9.0.0

package/molecules/filter/filter.story.js

@@ -17,232 +17,232 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 console.log(_filter2.default);
 
 var dataSetSelected = {
-  "date": {
-    "label": "Week",
-    "value": {
-      "fromDate": 1615311626936,
-      "toDate": 1615916426936,
-      "key": "week"
+  date: {
+    label: 'Week',
+    value: {
+      fromDate: 1615311626936,
+      toDate: 1615916426936,
+      key: 'week'
     }
   },
-  "formAction": {
-    "label": "Statistics",
-    "value": ["ingest", "archive", "tagging", "restore"]
+  formAction: {
+    label: 'Statistics',
+    value: ['ingest', 'archive', 'tagging', 'restore']
   },
-  "content_type": {
-    "label": "All",
-    "value": ""
+  content_type: {
+    label: 'All',
+    value: ''
   }
 };
 
 var dataSet = {
-  "response": true,
-  "data": [{
-    "index": 1,
-    "field": "date",
-    "title": "Date",
-    "display_format": "datepicker",
-    "format": "date",
-    "select_type": "select",
-    "default_option_index": "1",
-    "api_based": true,
-    "is_active": true,
-    "options": [{
-      "title": "Day",
-      "field": "day"
+  response: true,
+  data: [{
+    index: 1,
+    field: 'date',
+    title: 'Date',
+    display_format: 'datepicker',
+    format: 'date',
+    select_type: 'select',
+    default_option_index: '1',
+    api_based: true,
+    is_active: true,
+    options: [{
+      title: 'Day',
+      field: 'day'
     }, {
-      "title": "Week",
-      "field": "week"
+      title: 'Week',
+      field: 'week'
     }, {
-      "title": "Month",
-      "field": "month"
+      title: 'Month',
+      field: 'month'
     }, {
-      "title": "Select Range",
-      "field": "date_range"
+      title: 'Select Range',
+      field: 'date_range'
     }, {
-      "title": "Select date",
-      "field": "date"
+      title: 'Select date',
+      field: 'date'
     }],
-    "required": false
+    required: false
   }, {
-    "index": 2,
-    "field": "formAction",
-    "title": "Statistics",
-    "format": "array",
-    "display_format": "CheckboxGroup",
-    "select_type": "multiselect",
-    "api_based": false,
-    "is_active": true,
-    "options": [{
-      "title": "Ingest",
-      "field": "ingest"
+    index: 2,
+    field: 'formAction',
+    title: 'Statistics',
+    format: 'array',
+    display_format: 'CheckboxGroup',
+    select_type: 'multiselect',
+    api_based: false,
+    is_active: true,
+    options: [{
+      title: 'Ingest',
+      field: 'ingest'
     }, {
-      "title": "Archive",
-      "field": "archive"
+      title: 'Archive',
+      field: 'archive'
     }, {
-      "title": "Tagging",
-      "field": "tagging"
+      title: 'Tagging',
+      field: 'tagging'
     }, {
-      "title": "Restore",
-      "field": "restore"
+      title: 'Restore',
+      field: 'restore'
     }],
-    "required": true
+    required: true
   }, {
-    "index": 3,
-    "field": "content_type",
-    "title": "Content Type",
-    "format": "string",
-    "display_format": "CheckboxGroup",
-    "select_type": "select",
-    "api_based": true,
-    "default_option_index": "0",
-    "is_active": true,
-    "options": [{
-      "title": "All",
-      "field": ""
+    index: 3,
+    field: 'content_type',
+    title: 'Content Type',
+    format: 'string',
+    display_format: 'CheckboxGroup',
+    select_type: 'select',
+    api_based: true,
+    default_option_index: '0',
+    is_active: true,
+    options: [{
+      title: 'All',
+      field: ''
     }, {
-      "title": "Show",
-      "field": "show"
+      title: 'Show',
+      field: 'show'
     }, {
-      "title": "Promo",
-      "field": "promo"
+      title: 'Promo',
+      field: 'promo'
     }, {
-      "title": "Tvc",
-      "field": "tvc"
+      title: 'Tvc',
+      field: 'tvc'
     }, {
-      "title": "Agency feeds",
-      "field": "agency_feeds"
+      title: 'Agency feeds',
+      field: 'agency_feeds'
     }, {
-      "title": "Clip",
-      "field": "clip"
+      title: 'Clip',
+      field: 'clip'
     }, {
-      "title": "Story",
-      "field": "story"
+      title: 'Story',
+      field: 'story'
     }, {
-      "title": "Rushes",
-      "field": "rushes"
+      title: 'Rushes',
+      field: 'rushes'
     }],
-    "required": false
+    required: false
   }],
-  "errorcode": null,
-  "errormessage": null,
-  "popupmessage": false
+  errorcode: null,
+  errormessage: null,
+  popupmessage: false
 };
 
 var dataSet2 = {
-  "response": true,
-  "data": [{
-    "index": 2,
-    "field": "upload_status_filter",
-    "title": "UPLOAD",
-    "format": "array",
-    "display_format": "CheckboxGroup",
-    "select_type": "multiselect",
-    "api_based": false,
-    "is_active": true,
-    "options": [{
-      "title": "Pending",
-      "field": "0"
+  response: true,
+  data: [{
+    index: 2,
+    field: 'upload_status_filter',
+    title: 'UPLOAD',
+    format: 'array',
+    display_format: 'CheckboxGroup',
+    select_type: 'multiselect',
+    api_based: false,
+    is_active: true,
+    options: [{
+      title: 'Pending',
+      field: '0'
     }, {
-      "title": "Finished",
-      "field": "1"
+      title: 'Finished',
+      field: '1'
     }, {
-      "title": "Failed",
-      "field": "2"
+      title: 'Failed',
+      field: '2'
     }, {
-      "title": "Paused",
-      "field": "3"
+      title: 'Paused',
+      field: '3'
     }, {
-      "title": "Cancelled",
-      "field": "4"
+      title: 'Cancelled',
+      field: '4'
     }, {
-      "title": "Error",
-      "field": "5"
+      title: 'Error',
+      field: '5'
     }, {
-      "title": "In Progress",
-      "field": "6"
+      title: 'In Progress',
+      field: '6'
     }, {
-      "title": "In Queue",
-      "field": "7"
+      title: 'In Queue',
+      field: '7'
     }],
-    "required": true
+    required: true
   }, {
-    "index": 2,
-    "title": "TRANSCODE",
-    "field": "trans_status_filter",
-    "format": "array",
-    "display_format": "CheckboxGroup",
-    "select_type": "multiselect",
-    "api_based": false,
-    "is_active": true,
-    "options": [{
-      "title": "In Queue",
-      "field": "0,4"
+    index: 2,
+    title: 'TRANSCODE',
+    field: 'trans_status_filter',
+    format: 'array',
+    display_format: 'CheckboxGroup',
+    select_type: 'multiselect',
+    api_based: false,
+    is_active: true,
+    options: [{
+      title: 'In Queue',
+      field: '0,4'
     }, {
-      "title": "Finished",
-      "field": "1"
+      title: 'Finished',
+      field: '1'
     }, {
-      "title": "Failed",
-      "field": "2"
+      title: 'Failed',
+      field: '2'
     }, {
-      "title": "In Progress",
-      "field": "3"
+      title: 'In Progress',
+      field: '3'
     }],
-    "required": true
+    required: true
   }, {
-    "index": 3,
-    "field": "content_type",
-    "title": "Content Type",
-    "format": "string",
-    "display_format": "CheckboxGroup",
-    "select_type": "select",
-    "api_based": true,
-    "default_option_index": "0",
-    "is_active": true,
-    "options": [{
-      "title": "All",
-      "field": ""
+    index: 3,
+    field: 'content_type',
+    title: 'Content Type',
+    format: 'string',
+    display_format: 'CheckboxGroup',
+    select_type: 'select',
+    api_based: true,
+    default_option_index: '0',
+    is_active: true,
+    options: [{
+      title: 'All',
+      field: ''
     }, {
-      "title": "Show",
-      "field": "show"
+      title: 'Show',
+      field: 'show'
     }, {
-      "title": "Promo",
-      "field": "promo"
+      title: 'Promo',
+      field: 'promo'
     }, {
-      "title": "Tvc",
-      "field": "tvc"
+      title: 'Tvc',
+      field: 'tvc'
     }, {
-      "title": "Agency feeds",
-      "field": "agency_feeds"
+      title: 'Agency feeds',
+      field: 'agency_feeds'
     }, {
-      "title": "Clip",
-      "field": "clip"
+      title: 'Clip',
+      field: 'clip'
     }, {
-      "title": "Story",
-      "field": "story"
+      title: 'Story',
+      field: 'story'
     }, {
-      "title": "Rushes",
-      "field": "rushes"
+      title: 'Rushes',
+      field: 'rushes'
     }],
-    "required": false
+    required: false
   }],
-  "errorcode": null,
-  "errormessage": null,
-  "popupmessage": false
+  errorcode: null,
+  errormessage: null,
+  popupmessage: false
 };
 
 var dataSetSelected2 = {
-  "trans_status_filter": {
-    "label": "TRANSCODE",
-    "value": ["1", "3"]
+  trans_status_filter: {
+    label: 'TRANSCODE',
+    value: ['1', '3']
   },
-  "upload_status_filter": {
-    "label": "UPLOAD",
-    "value": ["1", "3", "2"]
+  upload_status_filter: {
+    label: 'UPLOAD',
+    value: ['1', '3', '2']
   },
-  "content_type": {
-    "label": "All",
-    "value": ""
+  content_type: {
+    label: 'All',
+    value: ''
   }
 };
 
@@ -255,12 +255,11 @@ var dataSetSelected2 = {
       null,
       _react2.default.createElement(
         'div',
-        { style: { display: "flex", justifyContent: 'space-between' } },
+        { style: { display: 'flex', justifyContent: 'space-between' } },
         _react2.default.createElement(
           'div',
-          { style: { display: "block" } },
+          { style: { display: 'block' } },
           _react2.default.createElement(_filter2.default, {
-
             initialFilters: dataSetSelected,
             filtersStructure: dataSet.data,
             selectedFilters: dataSetSelected,
@@ -272,9 +271,52 @@ var dataSetSelected2 = {
         ),
         _react2.default.createElement(
           'div',
-          { style: { display: "block" } },
+          { style: { display: 'block' } },
           _react2.default.createElement(_filter2.default, {
+            initialFilters: dataSetSelected2,
+            filtersStructure: dataSet2.data,
+            selectedFilters: dataSetSelected2,
+            applyFilters: function applyFilters(selectedDataSet) {
+              console.log('applyFilters() :: ', selectedDataSet);
+            },
+            showSelectedFiltersAsChip: false,
+            filterMessage: 'Select one category of filter at a time for better results.'
+          })
+        )
+      )
+    )
+  );
+});
 
+(0, _react3.storiesOf)('Filter').add('nexc', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'default', background: 'dark' },
+    _react2.default.createElement(
+      'div',
+      null,
+      _react2.default.createElement(
+        'div',
+        { style: { display: 'flex', justifyContent: 'space-between' } },
+        _react2.default.createElement(
+          'div',
+          { style: { display: 'block' } },
+          _react2.default.createElement(_filter2.default, {
+            theme: 'nexc',
+            initialFilters: dataSetSelected,
+            filtersStructure: dataSet.data,
+            selectedFilters: dataSetSelected,
+            applyFilters: function applyFilters(selectedDataSet) {
+              console.log('applyFilters() :: ', selectedDataSet);
+            },
+            showSelectedFiltersAsChip: true
+          })
+        ),
+        _react2.default.createElement(
+          'div',
+          { style: { display: 'block' } },
+          _react2.default.createElement(_filter2.default, {
+            theme: 'nexc',
             initialFilters: dataSetSelected2,
             filtersStructure: dataSet2.data,
             selectedFilters: dataSetSelected2,
@@ -282,7 +324,7 @@ var dataSetSelected2 = {
               console.log('applyFilters() :: ', selectedDataSet);
             },
             showSelectedFiltersAsChip: false,
-            filterMessage: "Select one category of filter at a time for better results."
+            filterMessage: 'Select one category of filter at a time for better results.'
           })
         )
       )