var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useRef, useState } from 'react';
import { Input } from "./";
import { IconButton } from "../button";
import "./style/input-animation.css";
import classNames from 'classnames';
var prefixCls = 'dmc-input-animation';

var InputAnimation = function InputAnimation(props) {
  var _a;

  var _b = useState(!!props.value),
      enable = _b[0],
      setEnable = _b[1];

  var ref = useRef(null);

  var onClick = function onClick() {
    setEnable(true);
    ref.current && ref.current.focus();
  };

  var onBlur = function onBlur(e) {
    var _a;

    if (e.target.value) return;
    setEnable(false);
    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
  };

  var cls = classNames((_a = {}, _a["" + prefixCls] = true, _a[prefixCls + "-open"] = enable, _a), props.className);
  return _jsxs("div", __assign({
    className: cls
  }, {
    children: [_jsx(Input, __assign({}, props, {
      ref: ref,
      prefixIcon: "search",
      className: prefixCls + "-input",
      onBlur: onBlur
    }), void 0), _jsx("div", __assign({
      className: prefixCls + "-icon"
    }, {
      children: _jsx(IconButton, {
        type: "only-icon",
        icon: "search",
        ghost: true,
        onClick: onClick,
        tabIndex: -1
      }, void 0)
    }), void 0)]
  }), void 0);
};

InputAnimation.displayName = 'InputAnimation';
export default InputAnimation;
var InputAnimationMemo = /*#__PURE__*/React.memo(InputAnimation);
InputAnimationMemo.displayName = 'InputAnimationMemo';
export { InputAnimationMemo };

