var _excluded = ["list", "onClick", "onShowedLeft", "onShowedRight"];

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
import Instance from './instance';
import Button from './../Button'; // 函数组件因为没有实例, 所以也没有ref, 必须通过forwardRef回调ref

var ListPull = forwardRef(function (_ref, ref) {
  var list = _ref.list,
      onClick = _ref.onClick,
      onShowedLeft = _ref.onShowedLeft,
      onShowedRight = _ref.onShowedRight,
      others = _objectWithoutPropertiesLoose(_ref, _excluded);

  var rootRef = useRef(null);
  useImperativeHandle(ref, function () {
    return rootRef.current;
  });
  var instance = useRef(null); // 更新句柄, 防止synchronization模式, 每次组件在render的时候都生成上次render的state、function、effects

  if (instance.current) {
    instance.current.params.onClick = handleClick;
  } // useEffect(() => {
  //   instance.current.params.onClick = onClick;
  // }, [onClick]) // eslint-disable-line


  useEffect(function () {
    if (!rootRef || !rootRef.current) return;
    instance.current = new Instance(rootRef.current, {
      onClick: handleClick,
      onShowedLeft: onShowedLeft,
      onShowedRight: onShowedRight
    });
  }, []); // eslint-disable-line

  function handleClick(s) {
    var e = s.event;
    var index = s.target.closest('.list-pull-li').getAttribute('data-index');
    var option = list[index];
    var item = null;
    var i = e.target.getAttribute('data-i');
    var direction = e.target.getAttribute('data-direction');

    if (i && direction) {
      if (direction === 'left') {
        item = option.lButtons[i];
      } else {
        item = option.rButtons[i];
      }
    } else {
      item = option.container;
    }

    if (onClick) onClick(s, item, index, option);
  }

  return /*#__PURE__*/React.createElement("ul", {
    ref: rootRef,
    className: "list-pull" + (others.className ? ' ' + others.className : '')
  }, list.map(function (item, index) {
    return /*#__PURE__*/React.createElement("li", {
      key: "button" + index,
      "data-index": "" + index,
      className: "border-b list-pull-li"
    }, item.lButtons && item.lButtons.length && /*#__PURE__*/React.createElement("div", {
      className: "list-pull-left"
    }, item.lButtons.map(function (button, i) {
      return /*#__PURE__*/React.createElement(Button, {
        key: "button" + i,
        "data-index": "" + index,
        "data-i": "" + i,
        "data-direction": "left",
        className: "list-pull-button" + (button.className ? ' ' + button.className : ''),
        style: button.style
      }, button.caption);
    })), /*#__PURE__*/React.createElement("div", {
      className: "list-pull-handler",
      "data-index": "" + index
    }, item.container), item.rButtons && item.rButtons.length && /*#__PURE__*/React.createElement("div", {
      className: "list-pull-right"
    }, item.rButtons.map(function (button, i) {
      return /*#__PURE__*/React.createElement(Button, {
        key: "button" + i,
        "data-index": "" + index,
        "data-i": "" + i,
        "data-direction": "right",
        className: "list-pull-button" + (button.className ? ' ' + button.className : ''),
        style: button.style
      }, button.caption);
    })));
  }));
});
export default ListPull;