@sis-cc/dotstatsuite-visions 12.18.0 → 12.20.0

package/lib/PeriodPicker/PeriodPicker.js

@@ -72,7 +72,8 @@ var Period = function Period(_ref) {
   var showFrequency = R.and(R.gt(R.length(frequencies), 1), R.not(frequencyDisabled));
   var destructuringDates = R.map(_lib.getDestructuringDate)(period);
 
-  var onChangeFrequency = function onChangeFrequency(value) {
+  var onClickFrequency = function onClickFrequency(e, value) {
+    console.log(value);
     if (R.is(Function, changeFrequency)) return changeFrequency(value);
   };
   var _getIsDisabled = function _getIsDisabled(getter) {
@@ -126,110 +127,114 @@ var Period = function Period(_ref) {
         className: classes.headerContainer,
         'data-testid': 'period-picker-frequency-test-id'
       },
-      _react2.default.createElement(
-        _material.Grid,
-        { container: true, direction: 'row' },
-        _react2.default.createElement(
-          _material.Grid,
-          { item: true, xs: 12 },
-          _react2.default.createElement(_.Select, {
-            id: labels.frequency,
-            label: labels.frequency,
-            onChange: onChangeFrequency,
-            value: frequency,
-            items: frequencies
-          })
-        )
-      )
+      R.map(function (freq) {
+        return _react2.default.createElement(
+          _.Button,
+          {
+            sx: { margin: 2 },
+            'aria-label': freq.label,
+            key: freq.value,
+            onClick: function onClick(e) {
+              return onClickFrequency(e, R.prop('value', freq));
+            },
+            selected: frequency
+          },
+          freq.label
+        );
+      })(frequencies)
     ),
-    R.not(isPeriodDisabled) && R.map(function (_ref3) {
-      var getter = _ref3.getter,
-          layout = _ref3.layout,
-          label = _ref3.label,
-          value = _ref3.value,
-          testId = _ref3.testId,
-          getIsDisabled = _ref3.getIsDisabled;
-      return _react2.default.createElement(
-        _material.Grid,
-        { key: getter, item: true, xs: 12, 'data-testid': testId },
-        _react2.default.createElement(
+    R.not(isPeriodDisabled) && _react2.default.createElement(
+      _material.Grid,
+      { container: true, xs: 12, justifyContent: 'space-between' },
+      R.map(function (_ref3) {
+        var getter = _ref3.getter,
+            layout = _ref3.layout,
+            label = _ref3.label,
+            value = _ref3.value,
+            testId = _ref3.testId,
+            getIsDisabled = _ref3.getIsDisabled;
+        return _react2.default.createElement(
           _material.Grid,
-          { container: true, direction: 'row' },
+          { key: getter, item: true, xs: 5, 'data-testid': testId, justifyContent: 'space-between' },
           _react2.default.createElement(
             _material.Grid,
-            { item: true, xs: 12, className: classes.sideLabel },
+            { container: true, direction: 'row' },
             _react2.default.createElement(
-              _material.Typography,
-              {
-                variant: 'body2',
-                tabIndex: 0 // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
-                , 'aria-label': label
-              },
-              label
+              _material.Grid,
+              { item: true, xs: 12, className: classes.sideLabel },
+              _react2.default.createElement(
+                _material.Typography,
+                {
+                  variant: 'body2',
+                  tabIndex: 0 // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+                  , 'aria-label': label
+                },
+                label
+              )
             )
-          )
-        ),
-        _react2.default.createElement(
-          _material.Grid,
-          { container: true, direction: 'row' },
+          ),
           _react2.default.createElement(
             _material.Grid,
-            { item: true, xs: 12 },
+            { container: true, direction: 'row' },
             _react2.default.createElement(
               _material.Grid,
-              { container: true, className: classes.headerContainer, spacing: 1 },
-              R.map(function (row) {
-                return R.map(function (_ref4) {
-                  var id = _ref4.id,
-                      values = _ref4.values;
+              { item: true, xs: 12 },
+              _react2.default.createElement(
+                _material.Grid,
+                { container: true, className: classes.headerContainer, spacing: 1 },
+                R.map(function (row) {
+                  return R.map(function (_ref4) {
+                    var id = _ref4.id,
+                        values = _ref4.values;
 
-                  var selectedValue = R.isNil(R.prop(id)(value)) ? R.head(values) : R.prop(id)(value);
-                  return _react2.default.createElement(
-                    _material.Grid,
-                    {
-                      key: id,
-                      item: true,
-                      xs: 12 / R.length(row),
-                      className: classes.selectContainer
-                    },
-                    _react2.default.createElement(_.Select, {
-                      onChange: onChangePeriod(getter, id),
-                      label: R.prop(id)(labels),
-                      id: id + '-' + label,
-                      dataTestId: id + '-' + label + '-test-id',
-                      value: selectedValue,
-                      disabled: disabled || false,
-                      items: R.map(function (option) {
-                        return {
-                          id: id,
-                          value: option,
-                          disabled: getIsDisabled(option, id),
-                          label: R.ifElse(R.is(String), R.identity, R.prop(id)(_lib.numeralFormat))(option)
-                        };
-                      })(values)
-                    })
-                  );
-                })(row);
-              })(layout)
+                    var selectedValue = R.isNil(R.prop(id)(value)) ? R.head(values) : R.prop(id)(value);
+                    return _react2.default.createElement(
+                      _material.Grid,
+                      {
+                        key: id,
+                        item: true,
+                        xs: 12 / R.length(row),
+                        className: classes.selectContainer
+                      },
+                      _react2.default.createElement(_.Select, {
+                        onChange: onChangePeriod(getter, id),
+                        label: R.prop(id)(labels),
+                        id: id + '-' + label,
+                        dataTestId: id + '-' + label + '-test-id',
+                        value: selectedValue,
+                        disabled: disabled || false,
+                        items: R.map(function (option) {
+                          return {
+                            id: id,
+                            value: option,
+                            disabled: getIsDisabled(option, id),
+                            label: R.ifElse(R.is(String), R.identity, R.prop(id)(_lib.numeralFormat))(option)
+                          };
+                        })(values)
+                      })
+                    );
+                  })(row);
+                })(layout)
+              )
             )
           )
-        )
-      );
-    })([{
-      getter: 'start',
-      testId: 'period-picker-start-period-test-id',
-      layout: (0, _lib.getLayout)(frequency, R.head(ranges)),
-      label: R.prop('start')(labels),
-      value: (0, _lib.getPeriodValue)(R.head(destructuringDates)),
-      getIsDisabled: _getIsDisabled('start')
-    }, {
-      getter: 'end',
-      testId: 'period-picker-end-period-test-id',
-      layout: (0, _lib.getLayout)(frequency, R.last(ranges), /*R.last(availableRanges)*/[]),
-      label: R.prop('end')(labels),
-      value: (0, _lib.getPeriodValue)(R.last(destructuringDates)),
-      getIsDisabled: _getIsDisabled('end')
-    }])
+        );
+      })([{
+        getter: 'start',
+        testId: 'period-picker-start-period-test-id',
+        layout: (0, _lib.getLayout)(frequency, R.head(ranges)),
+        label: R.prop('start')(labels),
+        value: (0, _lib.getPeriodValue)(R.head(destructuringDates)),
+        getIsDisabled: _getIsDisabled('start')
+      }, {
+        getter: 'end',
+        testId: 'period-picker-end-period-test-id',
+        layout: (0, _lib.getLayout)(frequency, R.last(ranges), /*R.last(availableRanges)*/[]),
+        label: R.prop('end')(labels),
+        value: (0, _lib.getPeriodValue)(R.last(destructuringDates)),
+        getIsDisabled: _getIsDisabled('end')
+      }])
+    )
   );
 };
 

package/lib/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 exports.__esModule = true;
-exports.T4_BREAKPOINTS = exports.innerPalette = exports.sisccTheme = exports.HierarchicalFilter = exports.AdvancedFilterDialog = exports.VirtualizedTree = exports.AuthDialog = exports.VerticalButton = exports.UserRightForm = exports.Tooltip = exports.ToggleButton = exports.Tag = exports.TablePreview = exports.TableLayout = exports.Cell = exports.TableHtml5 = exports.TableHeader = exports.TableFooter = exports.Spotlight = exports.SisccFooter = exports.ShortUrls = exports.Share = exports.Select = exports.reduceChildren = exports.spotlightScopeListEngine = exports.PeriodPicker = exports.Pagination = exports.Mode = exports.NoData = exports.Logo = exports.Loading = exports.LabelDivider = exports.InputNumber = exports.Input = exports.ExpansionPanel = exports.DataFooter = exports.DataHeader = exports.Dataflow = exports.DataEdit = exports.Contact = exports.CollapsibleTree = exports.CollapseButtons = exports.GroupedChips = exports.DeleteAllChip = exports.ChartsConfig = exports.Button = exports.Breadcrumbs = exports.ApiQueries = exports.Alert = undefined;
+exports.T4_BREAKPOINTS = exports.innerPalette = exports.sisccTheme = exports.HierarchicalFilter = exports.AdvancedFilterDialog = exports.VirtualizedTree = exports.AuthDialog = exports.VerticalButton = exports.UserRightForm = exports.Tooltip = exports.ToggleButton = exports.Tag = exports.TablePreview = exports.TableLayout = exports.Cell = exports.TableHtml5 = exports.TableHeader = exports.TableFooter = exports.Spotlight = exports.SisccFooter = exports.ShortUrls = exports.Share = exports.Select = exports.reduceChildren = exports.spotlightScopeListEngine = exports.PeriodPicker = exports.Pagination = exports.Mode = exports.NoData = exports.Logo = exports.Loading = exports.LabelDivider = exports.InputNumber = exports.Input = exports.ExpansionPanel = exports.DynamicDrawer = exports.DataFooter = exports.DataHeader = exports.Dataflow = exports.DataEdit = exports.Contact = exports.CollapsibleTree = exports.CollapseButtons = exports.GroupedChips = exports.DeleteAllChip = exports.ChartsConfig = exports.Button = exports.Breadcrumbs = exports.ApiQueries = exports.Alert = undefined;
 
 var _Alert = require('./Alert');
 
@@ -126,6 +126,15 @@ Object.defineProperty(exports, 'DataFooter', {
   }
 });
 
+var _DynamicDrawer = require('./DynamicDrawer');
+
+Object.defineProperty(exports, 'DynamicDrawer', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_DynamicDrawer).default;
+  }
+});
+
 var _ExpansionPanel = require('./ExpansionPanel');
 
 Object.defineProperty(exports, 'ExpansionPanel', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "12.18.0",
+  "version": "12.20.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",