chore: fix codereview problems
This commit is contained in:
@@ -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 => {
|
||||||
|
|||||||
@@ -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
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user