canner/lib/components/toolbar/actions/index.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;

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

var _dropdown = _interopRequireDefault(require("antd/lib/dropdown"));

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

var _button = _interopRequireDefault(require("antd/lib/button"));

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

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

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

var _menu = _interopRequireDefault(require("antd/lib/menu"));

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 _getPrototypeOf3 = _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"));

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

var _antd = require("antd");

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

var _exportModal = _interopRequireDefault(require("./exportModal"));

var _importModal = _interopRequireDefault(require("./importModal"));

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

  function Actions() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, Actions);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(Actions)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
      exportModalVisible: false,
      importModalVisible: false
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "triggerExportModal", function () {
      _this.setState({
        exportModalVisible: !_this.state.exportModalVisible
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "triggerImportModal", function () {
      _this.setState({
        importModalVisible: !_this.state.importModalVisible
      });
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "addFilter", function (e) {
      var _this$props = _this.props,
          displayedFilters = _this$props.displayedFilters,
          addFilter = _this$props.addFilter;
      var index = Number(e.key);

      if (displayedFilters.indexOf(index) === -1) {
        addFilter(index);
      }
    });
    return _this;
  }

  (0, _createClass2.default)(Actions, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          filters = _this$props2.filters,
          value = _this$props2.value,
          selectedValue = _this$props2.selectedValue,
          query = _this$props2.query,
          keyName = _this$props2.keyName,
          items = _this$props2.items,
          filter = _this$props2.filter,
          request = _this$props2.request,
          deploy = _this$props2.deploy;
      var exp = this.props.export || {};
      var imp = this.props.import || {};
      var exportFields = exp.fields || Object.keys(items).map(function (keyName) {
        return items[keyName];
      });
      var importFields = exp.fields || Object.keys(items).map(function (keyName) {
        return items[keyName];
      }); // in csv format, it's difficult to write array or object type

      importFields = importFields.filter(function (item) {
        return ['string', 'number', 'boolean'].indexOf(item.type) >= 0;
      });
      var _this$state = this.state,
          exportModalVisible = _this$state.exportModalVisible,
          importModalVisible = _this$state.importModalVisible;

      var menu = _react.default.createElement(_menu.default, {
        onClick: this.addFilter
      }, filters.map(function (filter, index) {
        return _react.default.createElement(_menu.default.Item, {
          key: index,
          "data-testid": "actions-filter-dropdown-menu-".concat(index)
        }, filter.label);
      }));

      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_button.default.Group, null, this.props.export && _react.default.createElement(_button.default, {
        onClick: this.triggerExportModal,
        "data-testid": "actions-export-button"
      }, _react.default.createElement(_icon.default, {
        type: "download"
      }), _react.default.createElement(_reactIntl.FormattedMessage, {
        id: "query.actions.export"
      })), this.props.import && _react.default.createElement(_button.default, {
        onClick: this.triggerImportModal,
        "data-testid": "actions-import-button"
      }, _react.default.createElement(_icon.default, {
        type: "upload"
      }), _react.default.createElement(_reactIntl.FormattedMessage, {
        id: "query.actions.import"
      })), filter && _react.default.createElement(_dropdown.default, {
        overlay: menu,
        "data-testid": "actions-filter-dropdown"
      }, _react.default.createElement(_button.default, {
        "data-testid": "actions-filter-button"
      }, _react.default.createElement(_icon.default, {
        type: "filter"
      }), _react.default.createElement(_reactIntl.FormattedMessage, {
        id: "query.actions.filter"
      })))), _react.default.createElement(_exportModal.default, {
        visible: exportModalVisible,
        triggerModal: this.triggerExportModal,
        title: exp.title || '',
        value: value || [],
        selectedValue: selectedValue || [],
        fields: exportFields || [],
        fileName: exp.filename || exp.title || 'export',
        query: query,
        keyName: keyName
      }), _react.default.createElement(_importModal.default, {
        visible: importModalVisible,
        triggerModal: this.triggerImportModal,
        title: imp.title || '',
        request: request,
        deploy: deploy,
        fields: importFields || [],
        fileName: imp.filename || imp.title || 'import',
        query: query,
        items: items,
        keyName: keyName
      }));
    }
  }]);
  return Actions;
}(_react.Component);

exports.default = Actions;