app-base-react/lib/library/generator/components/Sidebar/Element.js

react development common base package.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDnd = require('react-dnd');

var _reactI18next = require('react-i18next');

var _utils = require('../../utils');

var _hooks = require('../../utils/hooks');

require('../../../../../css/generator/Element.css');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

var Element = function Element(_ref) {
  var text = _ref.text,
      name = _ref.name,
      schema = _ref.schema,
      icon = _ref.icon,
      fixedName = _ref.fixedName;

  var setGlobal = (0, _hooks.useGlobal)();

  var _useStore = (0, _hooks.useStore)(),
      selected = _useStore.selected,
      flatten = _useStore.flatten,
      errorFields = _useStore.errorFields,
      userProps = _useStore.userProps,
      onFlattenChange = _useStore.onFlattenChange,
      elementRender = _useStore.elementRender;

  var getId = userProps.getId;

  var _useDrag = (0, _reactDnd.useDrag)({
    type: 'box',
    item: {
      dragItem: {
        parent: '#',
        schema: schema,
        children: []
      },
      $id: fixedName ? '#/' + name : '#/' + getId(name)
    },
    collect: function collect(monitor) {
      return {
        isDragging: monitor.isDragging()
      };
    }
  }),
      _useDrag2 = _slicedToArray(_useDrag, 2),
      isDragging = _useDrag2[0].isDragging,
      dragRef = _useDrag2[1];

  var handleElementClick = function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
      var _addItem, newId, newFlatten;

      return _regenerator2.default.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!errorFields.length) {
                _context.next = 2;
                break;
              }

              return _context.abrupt('return');

            case 2:
              if (!(selected && !flatten[selected])) {
                _context.next = 5;
                break;
              }

              setGlobal({ selected: '#' });
              return _context.abrupt('return');

            case 5:
              _addItem = (0, _utils.addItem)({
                selected: selected,
                name: name,
                schema: schema,
                flatten: flatten,
                fixedName: fixedName,
                getId: getId
              }), newId = _addItem.newId, newFlatten = _addItem.newFlatten;

              onFlattenChange(newFlatten);
              setGlobal({ selected: newId });

            case 8:
            case 'end':
              return _context.stop();
          }
        }
      }, _callee, undefined);
    }));

    return function handleElementClick() {
      return _ref2.apply(this, arguments);
    };
  }();

  var widgetProps = {
    text: text,
    icon: icon,
    onClick: handleElementClick
  };

  var originNode = _react2.default.createElement(WidgetUI, widgetProps);

  return _react2.default.createElement(
    'div',
    { ref: dragRef },
    elementRender ? elementRender(schema, widgetProps, originNode) : originNode
  );
};

exports.default = Element;

// 目前没有用icon，但是可以补上

var WidgetUI = function WidgetUI(_ref3) {
  var onClick = _ref3.onClick,
      text = _ref3.text,
      icon = _ref3.icon;

  var _useTranslation = (0, _reactI18next.useTranslation)(["components"]),
      t = _useTranslation.t;

  return _react2.default.createElement(
    'li',
    { className: 'left-item', onClick: onClick },
    icon,
    t(text)
  );
};