import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import React, { isValidElement, useCallback } from 'react';
import { toJS } from 'mobx';
import { observer } from 'mobx-react-lite';
import ObserverTextField from '../../../../pro/es/text-field/TextField';
import { getHeader } from '../../utils';

var ItemTitle = function ItemTitle(props) {
  var record = props.record,
      provided = props.provided;
  var editing = record.getState('editing');
  var handleEditBlur = useCallback(function () {
    record.setState('editing', false);
  }, []);
  var handleHeaderChange = useCallback(function (value) {
    record.set('title', value);
  }, [record]);
  var title = record.get('title');
  var header = getHeader({
    tab: record.get('tab'),
    title: title
  });
  var spanProps = provided ? _objectSpread(_objectSpread({}, provided.dragHandleProps), {}, {
    style: {
      cursor: 'move'
    }
  }) : {};
  return /*#__PURE__*/React.createElement(React.Fragment, null, editing ? /*#__PURE__*/React.createElement(ObserverTextField, {
    onBlur: handleEditBlur,
    value: /*#__PURE__*/isValidElement(header) ? title : header,
    onChange: handleHeaderChange,
    autoFocus: true
  }) : /*#__PURE__*/React.createElement("span", _extends({}, spanProps), toJS(header)));
};

ItemTitle.displayName = 'ItemTitle';
export default observer(ItemTitle);
//# sourceMappingURL=ItemTitle.js.map
