canner/lib/components/toolbar/sort.js

Build CMS in few lines of code for different data sources

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

require("antd/lib/icon/style");

var _icon = _interopRequireDefault(require("antd/lib/icon"));

var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

require("antd/lib/select/style");

var _select = _interopRequireDefault(require("antd/lib/select"));

var _react = _interopRequireWildcard(require("react"));

var _antd = require("antd");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _reactIntl = require("react-intl");

function _templateObject4() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n  width: 150px;\n  margin: 0 15px;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var Option = _select.default.Option;
var Selector = (0, _styledComponents.default)(_select.default)(_templateObject());

var OrderSwitch = _styledComponents.default.div(_templateObject2());

var UpIcon = (0, _styledComponents.default)(_icon.default)(_templateObject3(), function (props) {
  return props.order > 0 ? '#333' : '#ccc';
});
var DownIcon = (0, _styledComponents.default)(_icon.default)(_templateObject4(), function (props) {
  return props.order > 0 ? '#ccc' : '#333';
});

var Sort =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(Sort, _Component);

  function Sort(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Sort);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Sort).call(this, props));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "onChange", function (value) {
      _this.setState({
        key: value
      }, _this.submit);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "changeOrder", function () {
      _this.setState({
        order: !_this.state.order
      }, _this.submit);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "submit", function () {
      var changeOrder = _this.props.changeOrder;
      var _this$state = _this.state,
          key = _this$state.key,
          order = _this$state.order;
      changeOrder({
        orderField: key,
        orderType: order ? 'ASC' : 'DESC'
      });
    });
    _this.state = {
      order: order(props.orderType || 'ASC'),
      key: props.orderField || ''
    };
    return _this;
  }

  (0, _createClass2.default)(Sort, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          options = _this$props.options,
          defaultField = _this$props.defaultField;
      var _this$state2 = this.state,
          key = _this$state2.key,
          order = _this$state2.order;
      return _react.default.createElement("div", {
        style: {
          display: 'flex'
        }
      }, _react.default.createElement(Selector, {
        onChange: this.onChange,
        value: key,
        defaultValue: defaultField,
        allowClear: true,
        placeholder: _react.default.createElement(_reactIntl.FormattedMessage, {
          id: "query.sort.placeholder"
        }),
        "data-testid": "sorter-select"
      }, (options || []).map(function (option, i) {
        return _react.default.createElement(Option, {
          key: i,
          value: option.field
        }, option.label);
      })), _react.default.createElement(OrderSwitch, {
        onClick: this.changeOrder
      }, _react.default.createElement(UpIcon, {
        order: order,
        type: "caret-up",
        "data-testid": "sorter-up"
      }), _react.default.createElement(DownIcon, {
        order: order,
        type: "caret-down",
        "data-testid": "sorter-down"
      })));
    }
  }]);
  return Sort;
}(_react.Component);

exports.default = Sort;

function order(orderType) {
  return orderType === 'ASC';
}