"use strict";

require("./demo8.css");

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

var _reactDom = _interopRequireDefault(require("react-dom"));

var _ = _interopRequireDefault(require(".."));

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

var tabs = [{
  tab: 'Home',
  key: 0,
  content: 'This is home page'
}, {
  tab: 'Document',
  key: 1,
  content: 'This is document page'
}, {
  tab: 'API',
  key: 2,
  content: 'This is api page'
}];

function onChange(key) {
  console.log('change', key);
}

function handleClick(key) {
  console.log('click', key);
}

function onMouseEnter(e) {
  console.log('enter', e.target);
}

function onMouseLeave(e) {
  console.log('leave', e.target);
}

_reactDom["default"].render( /*#__PURE__*/_react["default"].createElement("div", {
  className: "fusion-demo"
}, /*#__PURE__*/_react["default"].createElement("div", {
  className: "demo-item-title"
}, "Click to change"), /*#__PURE__*/_react["default"].createElement(_["default"], {
  triggerType: "click",
  onChange: onChange
}, tabs.map(function (item) {
  return /*#__PURE__*/_react["default"].createElement(_["default"].Item, {
    key: item.key,
    title: item.tab,
    onClick: handleClick
  }, item.content);
})), /*#__PURE__*/_react["default"].createElement("div", {
  className: "demo-item-title"
}, "Hover to change"), /*#__PURE__*/_react["default"].createElement(_["default"], {
  triggerType: "hover",
  onChange: onChange
}, tabs.map(function (item) {
  return /*#__PURE__*/_react["default"].createElement(_["default"].Item, {
    key: item.key,
    title: item.tab,
    onClick: handleClick,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave
  }, item.content);
}))), document.getElementById('tab-demo-8'));