@flatbiz/antd/dist/mention-editor-GK6I91p1.js

/*! @flatjs/forge MIT @flatbiz/antd */

import { _ as _objectWithoutProperties, b as _objectSpread2 } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { hooks } from '@wove/react/hooks';
import { useRef, useMemo } from 'react';
import { Flex, Button } from 'antd';
import { M as MentionsWrapper } from './mentions-CZv5lHej.js';
import { jsxs, jsx } from 'react/jsx-runtime';

var _excluded = ["prefix", "operations"];
/**
 * 基于MentionWrapper封装的模版字符串配置组件
 * 1. 提供变量，数字，链接等可选的模版参数
 * 2. 不同类型模版参数可配置多个
 * 3. mention 会根据 传入的params自动推断出关键字
 * 4. 模版参数建议都以${_xxx}为格式
 * 5. Demo: https://fex.qa.tcshuke.com/docs/admin/main/widget?key=mention-editor
 */
var MentionEditor = function MentionEditor(props) {
  var iMap = useRef({});
  var mentionRef = useRef();
  var curPosition = useRef(0);
  var prefix = props.prefix,
    _props$operations = props.operations,
    operations = _props$operations === void 0 ? [] : _props$operations,
    otherProps = _objectWithoutProperties(props, _excluded);
  var onAddParam = function onAddParam(opt) {
    var _opt$codeAdapter, _props$onChange;
    var content = props.value || '';
    var position = (inputInstance === null || inputInstance === void 0 ? void 0 : inputInstance.selectionStart) || curPosition.current;
    var param = ((_opt$codeAdapter = opt.codeAdapter) === null || _opt$codeAdapter === void 0 ? void 0 : _opt$codeAdapter.call(opt)) || "".concat(opt.codePrefix).concat(getIndex(opt.codePrefix));
    var addPos = param.length + ((prefix === null || prefix === void 0 ? void 0 : prefix.length) || 0) + 2;
    if (content) {
      content = content.slice(0, position) + getOptionCode(param) + content.slice(position);
    } else {
      content = getOptionCode(param);
    }
    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, content);
    if (props.onSelectParam) {
      props.onSelectParam({
        code: param,
        type: opt.type,
        value: undefined
      }, prefix);
    }
    curPosition.current += addPos;
  };
  var onInputBlur = function onInputBlur(e) {
    var _props$value;
    curPosition.current = ((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) || 0;
    if (props.onBlur) {
      props.onBlur(e);
    }
  };
  var getOptionCode = hooks.useCallbackRef(function (code) {
    return (prefix || '') + '{' + code + '}';
  });
  var getIndex = hooks.useCallbackRef(function (code) {
    var indexMap = iMap.current;
    if (indexMap[code] >= 0) {
      indexMap[code] += 1;
    } else {
      indexMap[code] = 0;
    }
    return indexMap[code];
  });
  var inputInstance = useMemo(function () {
    return mentionRef.current ? mentionRef.current.getInputInstance() : null;
  }, [mentionRef.current]);
  var options = useMemo(function () {
    var options = (props.params || []).map(function (item) {
      return getOptionCode(item.code);
    });
    var optionSet = new Set(options);
    return Array.from(optionSet);
  }, [props.params]);
  return /*#__PURE__*/jsxs("div", {
    children: [operations && operations.length > 0 && /*#__PURE__*/jsx(Flex, {
      gap: 4,
      style: {
        marginBottom: 8
      },
      children: operations.map(function (operation) {
        return /*#__PURE__*/jsx(Button, {
          type: "text",
          icon: operation.icon,
          onClick: function onClick() {
            return onAddParam(operation);
          },
          children: operation.label && /*#__PURE__*/jsx("span", {
            children: operation.label
          })
        }, operation.type);
      })
    }), /*#__PURE__*/jsx(MentionsWrapper, _objectSpread2(_objectSpread2({}, otherProps), {}, {
      ref: mentionRef,
      prefix: prefix,
      options: options,
      value: props.value,
      onBlur: onInputBlur,
      onChange: props.onChange,
      onCursorChange: function onCursorChange(position) {
        curPosition.current = position;
      }
    }))]
  });
};

export { MentionEditor as M };
//# sourceMappingURL=mention-editor-GK6I91p1.js.map