chore: fix codereview problems

This commit is contained in:
qishaoxuan
2022-07-27 19:51:36 +08:00
parent a881556ad3
commit 4c35337dbb
2 changed files with 10 additions and 13 deletions

View File

@@ -63,7 +63,6 @@ export const BasicSelect = ({
}) => { }) => {
const [options, setOptions] = useState<OptionType[]>(initialOptions); const [options, setOptions] = useState<OptionType[]>(initialOptions);
const [selectIds, setSelectIds] = useState<OptionIdType[]>(initialValue); const [selectIds, setSelectIds] = useState<OptionIdType[]>(initialValue);
const [focusedId, setFocusedId] = useState<OptionIdType>();
const insertOption = (insertId: OptionIdType) => { const insertOption = (insertId: OptionIdType) => {
const newOption = genBasicOption({ const newOption = genBasicOption({
@@ -115,10 +114,6 @@ export const BasicSelect = ({
onPropertyChange?.([...options.filter(o => o.name)]); onPropertyChange?.([...options.filter(o => o.name)]);
}, [options, onPropertyChange]); }, [options, onPropertyChange]);
useEffect(() => {
setFocusedId(options[options.length - 1].id);
}, [options.length]);
return ( return (
<div className=""> <div className="">
{options.map((option, index) => { {options.map((option, index) => {
@@ -127,7 +122,7 @@ export const BasicSelect = ({
return ( return (
<OptionItem <OptionItem
key={option.id} key={option.id}
focused={focusedId === option.id} focused={index === options.length - 1}
isMulti={isMulti} isMulti={isMulti}
checked={checked} checked={checked}
option={option} option={option}
@@ -205,13 +200,13 @@ const OptionItem = ({
const theme = useTheme(); const theme = useTheme();
const inputRef = useRef<HTMLInputElement>(); const inputRef = useRef<HTMLInputElement>();
useEffect(() => { useEffect(() => {
inputRef.current?.focus(); focused && inputRef.current?.focus();
}, [focused]); }, [focused]);
return ( return (
<HighLightIconInput <HighLightIconInput
componentsProps={{ componentsProps={{
input: { input: {
ref: ref => (inputRef.current = ref), ref: inputRef,
}, },
}} }}
iconName={iconConfig?.name} iconName={iconConfig?.name}
@@ -219,12 +214,14 @@ const OptionItem = ({
background={iconConfig?.background} background={iconConfig?.background}
value={option.name} value={option.name}
placeholder="Option content" placeholder="Option content"
onKeyDown={e => { onKeyDown={(e: KeyboardEvent) => {
if (e.keyCode === 13) { if (e.code === 'Enter') {
onEnter?.(e); onEnter?.(e);
e.preventDefault();
} }
if (e.ctrlKey && e.keyCode === 8) { if (e.ctrlKey && e.code === 'Backspace') {
onDelete?.(option.id); onDelete?.(option.id);
e.preventDefault();
} }
}} }}
onChange={e => { onChange={e => {

View File

@@ -59,12 +59,12 @@ export const PendantRender = ({ block }: { block: AsyncBlock }) => {
property={property} property={property}
hasDelete={false} hasDelete={false}
onSure={() => { onSure={() => {
popoverHandlerRef.current[id].setVisible( popoverHandlerRef?.current[id].setVisible(
false false
); );
}} }}
onCancel={() => { onCancel={() => {
popoverHandlerRef.current[id].setVisible( popoverHandlerRef?.current[id].setVisible(
false false
); );
}} }}