"use strict";

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

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

var _css = require("@emotion/css");

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

var hoverColor = '#4477ee';
var listStyle = (0, _css.css)({
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'wrap',
  width: '90%',
  '> div': {
    width: '30px',
    height: '30px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    '> span': {
      fontSize: '22px',
      cursor: 'pointer',
      '&:hover': {
        color: hoverColor
      }
    },
    '&.active': {
      '> span': {
        color: hoverColor
      }
    }
  }
});

var List = function List(_ref) {
  var dataSource = _ref.dataSource,
      iconChange = _ref.iconChange,
      currentIcon = _ref.currentIcon;
  return /*#__PURE__*/_react.default.createElement("div", {
    className: listStyle
  }, dataSource.map(function (v, index) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: v.type && currentIcon && currentIcon.type && v.type.render === currentIcon.type.render ? 'active' : '',
      key: index,
      onClick: function onClick() {
        return iconChange(v);
      }
    }, v);
  }));
};

var _default = List;
exports.default = _default;