qt-public-ui/lib/EditName/index.js

新设计规范下业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _ = require("..");
require("./style");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var EditNameCheckName = function EditNameCheckName(text) {
  var err = '';
  if (text === '') {
    err = '名称不能为空，请重新输入！';
  } else if (/ \s+/g.test(text)) {
    err = '显示名称不能出现连续空格，请重新输入';
  } else if (text.length > 40) {
    err = '名称长度不能大于40个字符';
  } else {
    err = '';
  }
  return err;
};
var EditName = function EditName(props) {
  var _props$title = props.title,
    title = _props$title === void 0 ? '' : _props$title,
    _props$value = props.value,
    value = _props$value === void 0 ? '' : _props$value,
    _props$width = props.width,
    width = _props$width === void 0 ? '240px' : _props$width,
    _props$iconType = props.iconType,
    iconType = _props$iconType === void 0 ? 'umicon-edit' : _props$iconType,
    _props$okText = props.okText,
    okText = _props$okText === void 0 ? '确认' : _props$okText,
    _props$cancelText = props.cancelText,
    cancelText = _props$cancelText === void 0 ? '取消' : _props$cancelText,
    _props$placeholder = props.placeholder,
    placeholder = _props$placeholder === void 0 ? '请输入' : _props$placeholder,
    _props$placement = props.placement,
    placement = _props$placement === void 0 ? 'top' : _props$placement,
    checkName = props.checkName,
    onChange = props.onChange;
  var containerRef = (0, _react.useRef)();
  var _useState = (0, _react.useState)('' || value),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    curValue = _useState2[0],
    setCurValue = _useState2[1];
  var _useState3 = (0, _react.useState)(''),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    errText = _useState4[0],
    setErrText = _useState4[1];
  var handleEditAction = function handleEditAction() {
    setCurValue(value);
  };
  var handleEditValue = function handleEditValue(e) {
    var changeValue = e.target.value.replace(/(^\s*)/g, '');
    setCurValue(changeValue);
    if (checkName) {
      setErrText(checkName(changeValue));
    } else {
      setErrText(EditNameCheckName(changeValue));
    }
  };
  var handleEditPost = function handleEditPost() {
    if (errText) {
      _antd.message.error(errText);
      setErrText('');
      setCurValue('');
      return false;
    }
    onChange(curValue);
    setErrText('');
    setCurValue('');
  };
  var handleEditCancel = function handleEditCancel() {
    setErrText('');
    setCurValue('');
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-edit-name",
    ref: containerRef
  }, /*#__PURE__*/_react["default"].createElement(_antd.Popconfirm, {
    title: /*#__PURE__*/_react["default"].createElement("div", null, title.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
      className: "edit-name-title"
    }, title), /*#__PURE__*/_react["default"].createElement(_antd.Input, {
      placeholder: placeholder,
      style: {
        width: width
      },
      value: curValue,
      onChange: function onChange(e) {
        return handleEditValue(e);
      }
    }), /*#__PURE__*/_react["default"].createElement("span", {
      className: "edit-name-error-style"
    }, errText)),
    placement: placement,
    onConfirm: handleEditPost,
    onCancel: handleEditCancel,
    okText: okText,
    cancelText: cancelText,
    icon: /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
      style: {
        display: 'none'
      }
    }),
    getPopupContainer: function getPopupContainer() {
      return containerRef.current || document.body;
    }
  }, /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
    onClick: handleEditAction,
    type: iconType,
    className: "edit-name-icon-style"
  })));
};
EditName.displayName = 'EditName';
var _default = exports["default"] = EditName;