import React from 'react';
import { css } from '@emotion/css';
var hoverColor = '#4477ee';
var listStyle = 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.createElement("div", {
    className: listStyle
  }, dataSource.map(function (v, index) {
    return /*#__PURE__*/React.createElement("div", {
      className: v.type && currentIcon && currentIcon.type && v.type.render === currentIcon.type.render ? 'active' : '',
      key: index,
      onClick: function onClick() {
        return iconChange(v);
      }
    }, v);
  }));
};

export default List;