general-assistant
Version:
General Assistant components
131 lines (130 loc) • 6.66 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useRef, useState, useContext } from 'react';
import { useTranslation } from 'react-i18next';
import { useStore } from 'zustand';
import StoreContext from '../../../_store/StoreContext';
import classNames from 'classnames';
import './index.css';
import { find, get } from 'lodash';
function getHighLightlabel(text) {
return `<mark class='app-mark'>${text}</mark>`;
}
function getHighLightList(_fStr, _oList) {
const _findList = _oList.filter(item => (item.ItemName.toString()).includes(_fStr));
return _findList.map((option) => {
const { ItemName, ItemDesc } = option;
const _label = getHighLightlabel(_fStr);
return Object.assign({}, option, {
ItemName: ItemName.split(_fStr).join(_label),
});
});
}
export default function CautionContent({ search, cancel, confirm, inputRef }) {
const dataStore = useContext(StoreContext);
const { getConfig, GlobalCtxs, MyHandlers, setSelectedAite, isShowAite, getShowAite, setShowAite, setConfirmAite, } = useStore(dataStore, (state) => ({
getConfig: state.getConfig,
GlobalCtxs: state.GlobalCtxs,
MyHandlers: state.MyHandlers,
setSelectedAite: state.setSelectedAite,
isShowAite: state.isShowAite,
getShowAite: state.getShowAite,
setShowAite: state.setShowAite,
setConfirmAite: state.setConfirmAite,
}));
const { inputOrderCaution } = getConfig();
const { onConfirmAite } = MyHandlers;
const list = useMemo(() => {
return inputOrderCaution?.list || [];
}, [inputOrderCaution]);
const ListRender = inputOrderCaution?.ListRender;
const { t } = useTranslation();
const myContainer = useRef(null);
useEffect(() => {
if (isShowAite)
setSelected(0);
}, [isShowAite]);
const showList = useMemo(() => {
const _findstr = search.replace(/^@/, '');
if (_findstr === '') {
return [...list];
}
const _findAll = getHighLightList(_findstr, list);
return _findAll;
}, [list, search]);
const [selected, setSelected] = useState(0);
const selectedItemShow = useMemo(() => {
return get(showList, [selected]);
}, [showList, selected]);
const selectedItem = useMemo(() => {
return find(list, (item) => item.key === selectedItemShow?.key);
}, [list, selectedItemShow]);
useEffect(() => {
if (myContainer && myContainer.current) {
const itemCurr = myContainer.current.children[selected];
if (itemCurr) {
itemCurr.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}
}, [selected]);
useEffect(() => {
if (showList.length) {
setSelected(0);
}
else {
cancel();
}
}, [showList]);
const handleConfirmSelect = useCallback((key) => {
const itemConfirm = key ? find(list, (item) => item.key === key) : selectedItem;
setConfirmAite(itemConfirm), confirm(itemConfirm);
typeof onConfirmAite === 'function' && onConfirmAite(itemConfirm, GlobalCtxs);
}, [list, confirm, selectedItem, setConfirmAite, onConfirmAite]);
useEffect(() => {
if (!inputOrderCaution) {
return;
}
const handleKeyDown = (event) => {
if (event.which === 229) {
event.stopPropagation();
event.preventDefault();
return false;
}
if (!isShowAite)
return;
let _index = selected;
if (event.key === 'ArrowUp') {
event.stopPropagation();
event.preventDefault();
if (showList.length < 2)
return false;
_index = _index === 0 ? showList.length - 1 : _index - 1;
setSelected(_index);
return false;
}
if (event.key === 'ArrowDown') {
event.stopPropagation();
event.preventDefault();
if (showList.length < 2)
return false;
_index = _index === showList.length - 1 ? 0 : _index + 1;
setSelected(_index);
return false;
}
if (event.key === 'Enter') {
event.stopPropagation();
event.preventDefault();
const _find = showList.filter((e, i) => i === _index);
handleConfirmSelect();
inputRef.current.value = inputRef.current.value.replace(/[\u000A]$/, '');
return false;
}
};
inputRef.current.addEventListener('keydown', handleKeyDown);
return () => inputRef.current.removeEventListener('keydown', handleKeyDown);
}, [selected, isShowAite, showList]);
return (inputOrderCaution && isShowAite &&
_jsxs("div", { className: 'DS-GA-absolute DS-GA-bottom-full DS-GA-w-full DS-GA-h-fit DS-GA-max-h-56 DS-GA-mb-2 DS-GA-p-3 DS-GA-rounded-lg DS-GA-shadow-full-shal DS-GA-bg-text-reverse-10 DS-GA-flex DS-GA-flex-col DS-GA-gap-2', children: [_jsxs("div", { className: "DS-GA-flex DS-GA-justify-between DS-GA-items-center", children: [_jsx("div", { children: inputOrderCaution.title }), _jsx("i", { className: 'iconfont-assistant icon-del DS-GA-text-xs DS-GA-cursor-pointer', onClick: cancel })] }), _jsx("div", { className: 'DS-GA-flex DS-GA-flex-col DS-GA-overflow-y-auto', ref: myContainer, children: Array.isArray(showList) && showList.length > 0 && showList.map((option, index) => {
const { ItemIcon, ItemName, ItemDesc } = option;
return _jsxs("div", { className: classNames('DS-GA-flex-shrink-0 DS-GA-p-2 DS-GA-rounded-md DS-GA-flex DS-GA-gap-2 DS-GA-justify-start DS-GA-items-center DS-GA-cursor-pointer o-text', 'hover:DS-GA-bg-theme-shal-1', selected === index ? 'DS-GA-bg-theme-shal-1' : ''), onClick: () => handleConfirmSelect(option.key), children: [" ", typeof ListRender === 'function' ? ListRender(option) : (_jsxs(_Fragment, { children: [ItemIcon && _jsx("div", { className: 'DS-GA-h-7 DS-GA-w-7 DS-GA-rounded-full DS-GA-text-lg DS-GA-flex DS-GA-justify-center DS-GA-items-center', children: ItemIcon }), _jsx("div", { className: 'DS-GA-text-sm', dangerouslySetInnerHTML: { __html: ItemName } }), _jsx("div", { className: 'DS-GA-text-xs DS-GA-text-gray-500', dangerouslySetInnerHTML: { __html: ItemDesc } })] }))] }, option.key);
}) })] }));
}