@flatbiz/antd
Version:
281 lines (275 loc) • 11.3 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { _ as _objectWithoutProperties, a as _slicedToArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { hooks } from '@wove/react/hooks';
import { forwardRef, useRef, useState, useMemo, useImperativeHandle } from 'react';
import { useEventListener } from 'ahooks';
import { Mentions } from 'antd';
import { toArray } from '@flatbiz/utils';
import { fbaHooks } from './fba-hooks/index.js';
import { jsx } from 'react/jsx-runtime';
var getOverallKeyWordsPosition = function getOverallKeyWordsPosition(params) {
if (!params.value || !params.overallKeyWords.length) return [];
var overallKeyWordsNew = Array.from(new Set(params.overallKeyWords || []));
var positionItem = [];
overallKeyWordsNew.forEach(function (item) {
var _params$value;
if (!((_params$value = params.value) !== null && _params$value !== void 0 && _params$value.includes(item))) return;
var newItem = item.replace(/\$/g, '\\$').replace(/\{/g, '\\{').replace(/\}/g, '\\}').replace(/\]/g, '\\]').replace(/\[/g, '\\[');
var regex = new RegExp(newItem, 'g');
var positions = [];
var match;
while ((match = regex.exec(params.value)) !== null) {
positions.push(match.index);
}
var innerList = [];
positions.forEach(function (temp) {
innerList.push({
start: temp + 1,
end: temp + item.length
});
});
positionItem.push(innerList);
});
return positionItem;
};
/**
* 判断光标是否处在关键词位置内
*/
var judgmentCursorInKeyWordsPosition = function judgmentCursorInKeyWordsPosition(params) {
for (var index = 0; index < params.keyWordsPosition.length; index++) {
var element = params.keyWordsPosition[index].find(function (temp) {
return params.cursorPosition >= temp.start && params.cursorPosition < temp.end;
});
if (element) return element;
}
return undefined;
};
var _excluded = ["value", "onChange", "onClick", "onCursorChange", "onSelect", "options", "prefix"];
/**
* 基于Antd Mentions进行二次封装，可实现输入内关键字整体控制，包括光标移动、关键词删除等
* ```
* 可实现
* 1. 控制光标输入
* 2. 可设置关键词，光标不会出现在关键词内部
* 3. 可整体删除关键词
*
* 应用场景例如：
* 1. 公式输入
* (【xx金额1】+【xx金额2】)*2
* <MentionsWrapper prefix="$" options={['【xx金额1】', '【xx金额2】']}/>
*
* 2. 短信模板设置
* 您的订单号为${订单号}，订单交易时间为${订单时间}
* <MentionsWrapper prefix="$" options={['${订单号}', '${订单时间}']}/>
*
* demo：https://fex.qa.tcshuke.com/docs/admin/main/other/widget
* ```
*
*/
var MentionsWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
var value = props.value,
onChange = props.onChange,
onClick = props.onClick,
onCursorChange = props.onCursorChange,
onSelect = props.onSelect,
options = props.options,
prefix = props.prefix,
otherProps = _objectWithoutProperties(props, _excluded);
var id = hooks.useId(undefined, 'overall-input');
var inputInnerRef = useRef();
var _useState = useState(0),
_useState2 = _slicedToArray(_useState, 2),
cursorPosition = _useState2[0],
setCursorPosition = _useState2[1];
var invalidOnChangeRef = useRef(false);
var valueNew = value || '';
/** 关键词位置 */
var overallKeyWordsPosition = useMemo(function () {
if (options) {
return getOverallKeyWordsPosition({
overallKeyWords: options || [],
value: valueNew
});
}
return [];
}, [options, valueNew]);
var getInputInstance = function getInputInstance() {
var _inputInnerRef$curren;
return (_inputInnerRef$curren = inputInnerRef.current) === null || _inputInnerRef$curren === void 0 ? void 0 : _inputInnerRef$curren.textarea;
};
fbaHooks.useEffectCustom(function () {
onCursorChange === null || onCursorChange === void 0 || onCursorChange(cursorPosition || 0);
}, [cursorPosition]);
useEventListener('keydown', function (ev) {
var _getInputInstance, _getInputInstance2;
var selectionStart = (_getInputInstance = getInputInstance()) === null || _getInputInstance === void 0 ? void 0 : _getInputInstance.selectionStart;
var selectionEnd = (_getInputInstance2 = getInputInstance()) === null || _getInputInstance2 === void 0 ? void 0 : _getInputInstance2.selectionEnd;
if (['ArrowLeft', 'ArrowRight'].includes(ev.code)) {
var positionValue = 0;
if (ev.code === 'ArrowLeft') {
if (selectionStart - 1 < 0) return;
positionValue = selectionStart - 1;
setCursorPosition(positionValue);
var targret = judgmentCursorInKeyWordsPosition({
keyWordsPosition: overallKeyWordsPosition,
cursorPosition: positionValue
});
if (targret) {
var _getInputInstance3;
(_getInputInstance3 = getInputInstance()) === null || _getInputInstance3 === void 0 || _getInputInstance3.setSelectionRange(targret.start, targret.start);
}
} else if (ev.code === 'ArrowRight') {
if (selectionStart + 1 > valueNew.length) return;
positionValue = selectionStart + 1;
setCursorPosition(positionValue);
var _targret = judgmentCursorInKeyWordsPosition({
keyWordsPosition: overallKeyWordsPosition,
cursorPosition: positionValue
});
if (_targret) {
var _getInputInstance4;
(_getInputInstance4 = getInputInstance()) === null || _getInputInstance4 === void 0 || _getInputInstance4.setSelectionRange(_targret.end - 1, _targret.end - 1);
}
}
} else if (ev.code === 'Backspace') {
/** 选中关键字/关键字+文字 的情况，直接删除 */
if (selectionStart !== selectionEnd) {
return;
}
var _targret2 = judgmentCursorInKeyWordsPosition({
keyWordsPosition: overallKeyWordsPosition,
cursorPosition: selectionStart - 1
});
if (_targret2) {
invalidOnChangeRef.current = true;
var result = valueNew.substring(0, _targret2.start - 1) + valueNew.substring(_targret2.end);
setTimeout(function () {
var _getInputInstance5;
(_getInputInstance5 = getInputInstance()) === null || _getInputInstance5 === void 0 || _getInputInstance5.setSelectionRange(_targret2.start - 1, _targret2.start - 1);
}, 50);
if (!result) {
invalidOnChangeRef.current = false;
}
onChange === null || onChange === void 0 || onChange(result);
}
}
}, {
target: function target() {
return document.querySelector("#".concat(id));
}
});
useEventListener('keyup', function (ev) {
var _getInputInstance6;
var selectionStart = ((_getInputInstance6 = getInputInstance()) === null || _getInputInstance6 === void 0 ? void 0 : _getInputInstance6.selectionStart) || 0;
if (['ArrowUp', 'ArrowDown'].includes(ev.code)) {
setCursorPosition(selectionStart);
var targret = judgmentCursorInKeyWordsPosition({
keyWordsPosition: overallKeyWordsPosition,
cursorPosition: selectionStart
});
if (targret) {
if (selectionStart - targret.start < targret.end - selectionStart) {
var _getInputInstance7;
(_getInputInstance7 = getInputInstance()) === null || _getInputInstance7 === void 0 || _getInputInstance7.setSelectionRange(targret.start - 1, targret.start - 1);
} else {
var _getInputInstance8;
(_getInputInstance8 = getInputInstance()) === null || _getInputInstance8 === void 0 || _getInputInstance8.setSelectionRange(targret.end, targret.end);
}
}
}
}, {
target: function target() {
return document.querySelector("#".concat(id));
}
});
var onInputChange = hooks.useCallbackRef(function (value) {
var _getInputInstance9;
if (otherProps.disabled) return;
if (invalidOnChangeRef.current) {
invalidOnChangeRef.current = false;
return;
}
var selectionStart = ((_getInputInstance9 = getInputInstance()) === null || _getInputInstance9 === void 0 ? void 0 : _getInputInstance9.selectionStart) || 0;
setCursorPosition(selectionStart);
onChange === null || onChange === void 0 || onChange(value);
});
var onInputClick = hooks.useCallbackRef(function (event) {
var _getInputInstance10;
var selectionStart = ((_getInputInstance10 = getInputInstance()) === null || _getInputInstance10 === void 0 ? void 0 : _getInputInstance10.selectionStart) || 0;
setCursorPosition(selectionStart);
onClick === null || onClick === void 0 || onClick(event.target.value);
var targret = judgmentCursorInKeyWordsPosition({
keyWordsPosition: overallKeyWordsPosition,
cursorPosition: selectionStart
});
if (targret) {
if (selectionStart - targret.start < targret.end - selectionStart) {
var _getInputInstance11;
(_getInputInstance11 = getInputInstance()) === null || _getInputInstance11 === void 0 || _getInputInstance11.setSelectionRange(targret.start - 1, targret.start - 1);
} else {
var _getInputInstance12;
(_getInputInstance12 = getInputInstance()) === null || _getInputInstance12 === void 0 || _getInputInstance12.setSelectionRange(targret.end, targret.end);
}
}
});
var onHandleSelect = function onHandleSelect(options, prefix) {
var _options$value;
var addPos = ((_options$value = options.value) === null || _options$value === void 0 ? void 0 : _options$value.length) || 0;
setCursorPosition(function (prePos) {
return prePos + addPos;
});
if (onSelect) {
onSelect(options, prefix);
}
};
var mentionOptions = useMemo(function () {
var prefixList = toArray(prefix);
return (options === null || options === void 0 ? void 0 : options.map(function (item) {
var opValue = item;
for (var index = 0; index < prefixList.length; index++) {
var element = prefixList[index];
if (opValue.startsWith(element)) {
opValue = opValue.replace(element, '');
break;
}
}
return {
label: opValue,
value: opValue
};
})) || [];
}, [options, prefix]);
useImperativeHandle(ref, function () {
return {
getInputInstance: getInputInstance
};
});
return /*#__PURE__*/jsx(Mentions, _objectSpread2(_objectSpread2({
notFoundContent: /*#__PURE__*/jsx("div", {
children: "\u6682\u65E0\u6570\u636E"
}),
rows: 3
}, otherProps), {}, {
prefix: prefix,
style: _objectSpread2({
width: '100%'
}, otherProps.style),
id: id,
value: valueNew,
ref: inputInnerRef,
onSelect: onHandleSelect,
onChange: onInputChange,
onClick: onInputClick,
split: "",
validateSearch: function validateSearch(text) {
if (!mentionOptions.length) return false;
var target = mentionOptions.find(function (item) {
return text.indexOf(item.value) >= 0;
});
return target && text.length > target.value.length ? false : true;
},
options: mentionOptions
}));
});
export { MentionsWrapper as M };
//# sourceMappingURL=mentions-CZv5lHej.js.map