Skip to content
This repository has been archived by the owner on Mar 29, 2023. It is now read-only.

Commit

Permalink
feat: improve mouse + keyboard interaction
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikku
nikku committed Mar 26, 2022
1 parent e971679 commit b88885e
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 89 deletions.
32 changes: 10 additions & 22 deletions src/append-menu/AppendMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,9 +188,7 @@ function AppendMenuComponent(props) {
const [ value, setValue ] = useState('');

const [ templates, setTemplates ] = useState(props.entries);
const [ keyboardSelectedTemplate, setKeyboardSelectedTemplate ] = useState(null);
const [ mouseSelectedTemplate, setMouseSelectedTemplate ] = useState(null);
const [ selectedTemplate, setSelectedTemplate ] = useState(null);
const [ selectedTemplate, setSelectedTemplate ] = useState(templates[0]);

useEffect(() => {

Expand All @@ -212,16 +210,12 @@ function AppendMenuComponent(props) {

const templates = entries.filter(filter);

if (!templates.includes(keyboardSelectedTemplate)) {
setKeyboardSelectedTemplate(templates[0]);
}

if (!templates.includes(mouseSelectedTemplate)) {
setMouseSelectedTemplate(null);
if (!templates.includes(selectedTemplate)) {
setSelectedTemplate(templates[0]);
}

setTemplates(templates);
}, [ value, keyboardSelectedTemplate, mouseSelectedTemplate, props.templates ]);
}, [ value, selectedTemplate, props.templates ]);

// focus input on initial mount
useLayoutEffect(() => {
Expand All @@ -238,16 +232,11 @@ function AppendMenuComponent(props) {
if (selectedEl) {
selectedEl.scrollIntoViewIfNeeded();
}
}, [ keyboardSelectedTemplate ]);

useEffect(() => {
setSelectedTemplate(mouseSelectedTemplate || keyboardSelectedTemplate);
}, [ keyboardSelectedTemplate, mouseSelectedTemplate ]);

}, [ selectedTemplate ]);

const keyboardSelect = useCallback(direction => {

const idx = templates.indexOf(keyboardSelectedTemplate);
const idx = templates.indexOf(selectedTemplate);

let nextIdx = idx + direction;

Expand All @@ -259,8 +248,8 @@ function AppendMenuComponent(props) {
nextIdx = 0;
}

setKeyboardSelectedTemplate(templates[nextIdx]);
}, [ templates, keyboardSelectedTemplate ]);
setSelectedTemplate(templates[nextIdx]);
}, [ templates, selectedTemplate ]);

const handleKeyDown = useCallback(event => {

Expand Down Expand Up @@ -319,9 +308,8 @@ function AppendMenuComponent(props) {
${templates.map(template => html`
<li
key=${template.id}
class=${ clsx('cmd-change-menu__entry', { selected: !mouseSelectedTemplate && template === keyboardSelectedTemplate }) }
onMouseEnter=${ () => setMouseSelectedTemplate(template) }
onMouseLeave=${ () => setMouseSelectedTemplate(null) }
class=${ clsx('cmd-change-menu__entry', { selected: template === selectedTemplate }) }
onMouseEnter=${ () => setSelectedTemplate(template) }
draggable
onDragStart=${ (event) => { event.stopPropagation(); event.preventDefault(); onSelect(event, template, true); } }
onClick=${ (event) => { event.stopPropagation(); onSelect(event, template); } }
Expand Down
3 changes: 1 addition & 2 deletions src/change-menu/ChangeMenu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,8 +153,7 @@
color: var(--text-muted-color);
}

.cmd-change-menu__results:not(:hover) .cmd-change-menu__entry.selected,
.cmd-change-menu__entry:hover {
.cmd-change-menu__entry.selected {
background-color: var(--hover-background-color);
}

Expand Down
31 changes: 10 additions & 21 deletions src/create-menu/CreateMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,9 +171,7 @@ function CreateMenuComponent(props) {
const [ value, setValue ] = useState('');

const [ templates, setTemplates ] = useState(props.entries);
const [ keyboardSelectedTemplate, setKeyboardSelectedTemplate ] = useState(null);
const [ mouseSelectedTemplate, setMouseSelectedTemplate ] = useState(null);
const [ selectedTemplate, setSelectedTemplate ] = useState(null);
const [ selectedTemplate, setSelectedTemplate ] = useState(templates[0]);

useEffect(() => {

Expand All @@ -195,16 +193,12 @@ function CreateMenuComponent(props) {

const templates = entries.filter(filter);

if (!templates.includes(keyboardSelectedTemplate)) {
setKeyboardSelectedTemplate(templates[0]);
}

if (!templates.includes(mouseSelectedTemplate)) {
setMouseSelectedTemplate(null);
if (!templates.includes(selectedTemplate)) {
setSelectedTemplate(templates[0]);
}

setTemplates(templates);
}, [ value, keyboardSelectedTemplate, mouseSelectedTemplate, props.templates ]);
}, [ value, selectedTemplate, props.templates ]);

// focus input on initial mount
useLayoutEffect(() => {
Expand All @@ -221,16 +215,12 @@ function CreateMenuComponent(props) {
if (selectedEl) {
selectedEl.scrollIntoViewIfNeeded();
}
}, [ keyboardSelectedTemplate ]);

useEffect(() => {
setSelectedTemplate(mouseSelectedTemplate || keyboardSelectedTemplate);
}, [ keyboardSelectedTemplate, mouseSelectedTemplate ]);
}, [ selectedTemplate ]);


const keyboardSelect = useCallback(direction => {

const idx = templates.indexOf(keyboardSelectedTemplate);
const idx = templates.indexOf(selectedTemplate);

let nextIdx = idx + direction;

Expand All @@ -242,8 +232,8 @@ function CreateMenuComponent(props) {
nextIdx = 0;
}

setKeyboardSelectedTemplate(templates[nextIdx]);
}, [ templates, keyboardSelectedTemplate ]);
setSelectedTemplate(templates[nextIdx]);
}, [ templates, selectedTemplate ]);

const handleKeyDown = useCallback(event => {

Expand Down Expand Up @@ -302,9 +292,8 @@ function CreateMenuComponent(props) {
${templates.map(template => html`
<li
key=${template.id}
class=${ clsx('cmd-change-menu__entry', { selected: !mouseSelectedTemplate && template === keyboardSelectedTemplate }) }
onMouseEnter=${ () => setMouseSelectedTemplate(template) }
onMouseLeave=${ () => setMouseSelectedTemplate(null) }
class=${ clsx('cmd-change-menu__entry', { selected: template === selectedTemplate }) }
onMouseEnter=${ () => setSelectedTemplate(template) }
draggable
onDragStart=${ (event) => { event.stopPropagation(); event.preventDefault(); onSelect(event, template, true); } }
onClick=${ (event) => { event.stopPropagation(); onSelect(event, template); } }
Expand Down
35 changes: 13 additions & 22 deletions src/element-template-chooser/ElementTemplateChooser.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,9 +99,7 @@ function TemplateComponent(props) {
const [ value, setValue ] = useState('');

const [ templates, setTemplates ] = useState(props.entries);
const [ keyboardSelectedTemplate, setKeyboardSelectedTemplate ] = useState(null);
const [ mouseSelectedTemplate, setMouseSelectedTemplate ] = useState(null);
const [ selectedTemplate, setSelectedTemplate ] = useState(null);
const [ selectedTemplate, setSelectedTemplate ] = useState(templates[0]);

useEffect(() => {

Expand All @@ -110,21 +108,19 @@ function TemplateComponent(props) {
return true;
}

return [ template.name, template.description || '' ].join('---').toLowerCase().includes(value.toLowerCase());
return [
template.name, template.description || ''
].join('---').toLowerCase().includes(value.toLowerCase());
};

const templates = props.entries.filter(filter);

if (!templates.includes(keyboardSelectedTemplate)) {
setKeyboardSelectedTemplate(templates[0]);
}

if (!templates.includes(mouseSelectedTemplate)) {
setMouseSelectedTemplate(null);
if (!templates.includes(selectedTemplate)) {
setSelectedTemplate(templates[0]);
}

setTemplates(templates);
}, [ value, keyboardSelectedTemplate, mouseSelectedTemplate, props.entries ]);
}, [ value, selectedTemplate, props.entries ]);


// focus input on initial mount
Expand All @@ -142,15 +138,11 @@ function TemplateComponent(props) {
if (selectedEl) {
selectedEl.scrollIntoViewIfNeeded();
}
}, [ keyboardSelectedTemplate ]);

useEffect(() => {
setSelectedTemplate(mouseSelectedTemplate || keyboardSelectedTemplate);
}, [ keyboardSelectedTemplate, mouseSelectedTemplate ]);
}, [ selectedTemplate ]);

const keyboardSelect = useCallback(direction => {

const idx = templates.indexOf(keyboardSelectedTemplate);
const idx = templates.indexOf(selectedTemplate);

let nextIdx = idx + direction;

Expand All @@ -162,8 +154,8 @@ function TemplateComponent(props) {
nextIdx = 0;
}

setKeyboardSelectedTemplate(templates[nextIdx]);
}, [ templates, keyboardSelectedTemplate ]);
setSelectedTemplate(templates[nextIdx]);
}, [ templates, selectedTemplate ]);

const handleKeyDown = useCallback(event => {

Expand Down Expand Up @@ -220,9 +212,8 @@ function TemplateComponent(props) {
${templates.map(template => html`
<li
key=${template.id}
class=${ clsx('cmd-change-menu__entry', { selected: !mouseSelectedTemplate && template === keyboardSelectedTemplate }) }
onMouseEnter=${ () => setMouseSelectedTemplate(template) }
onMouseLeave=${ () => setMouseSelectedTemplate(null) }
class=${ clsx('cmd-change-menu__entry', { selected: template === selectedTemplate }) }
onMouseEnter=${ () => setSelectedTemplate(template) }
onClick=${ () => onClose(template) }
data-entry-id=${template.id}
>
Expand Down
32 changes: 10 additions & 22 deletions src/replace-menu/ReplaceMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,9 +155,7 @@ function ReplaceMenuComponent(props) {
const [ value, setValue ] = useState('');

const [ templates, setTemplates ] = useState(props.entries);
const [ keyboardSelectedTemplate, setKeyboardSelectedTemplate ] = useState(null);
const [ mouseSelectedTemplate, setMouseSelectedTemplate ] = useState(null);
const [ selectedTemplate, setSelectedTemplate ] = useState(null);
const [ selectedTemplate, setSelectedTemplate ] = useState(templates[0]);

useEffect(() => {

Expand All @@ -179,16 +177,12 @@ function ReplaceMenuComponent(props) {

const templates = props.entries.filter(filter);

if (!templates.includes(keyboardSelectedTemplate)) {
setKeyboardSelectedTemplate(templates[0]);
}

if (!templates.includes(mouseSelectedTemplate)) {
setMouseSelectedTemplate(null);
if (!templates.includes(selectedTemplate)) {
setSelectedTemplate(templates[0]);
}

setTemplates(templates);
}, [ value, keyboardSelectedTemplate, mouseSelectedTemplate, props.templates ]);
}, [ value, selectedTemplate, props.templates ]);


// focus input on initial mount
Expand All @@ -206,16 +200,11 @@ function ReplaceMenuComponent(props) {
if (selectedEl) {
selectedEl.scrollIntoViewIfNeeded();
}
}, [ keyboardSelectedTemplate ]);

useEffect(() => {
setSelectedTemplate(mouseSelectedTemplate || keyboardSelectedTemplate);
}, [ keyboardSelectedTemplate, mouseSelectedTemplate ]);

}, [ selectedTemplate ]);

const keyboardSelect = useCallback(direction => {

const idx = templates.indexOf(keyboardSelectedTemplate);
const idx = templates.indexOf(selectedTemplate);

let nextIdx = idx + direction;

Expand All @@ -227,8 +216,8 @@ function ReplaceMenuComponent(props) {
nextIdx = 0;
}

setKeyboardSelectedTemplate(templates[nextIdx]);
}, [ templates, keyboardSelectedTemplate ]);
setSelectedTemplate(templates[nextIdx]);
}, [ templates, selectedTemplate ]);

const handleKeyDown = useCallback(event => {

Expand Down Expand Up @@ -292,9 +281,8 @@ function ReplaceMenuComponent(props) {
${templates.map(template => html`
<li
key=${template.id}
class=${ clsx('cmd-change-menu__entry', { selected: !mouseSelectedTemplate && template === keyboardSelectedTemplate }) }
onMouseEnter=${ () => setMouseSelectedTemplate(template) }
onMouseLeave=${ () => setMouseSelectedTemplate(null) }
class=${ clsx('cmd-change-menu__entry', { selected: template === selectedTemplate }) }
onMouseEnter=${ () => setSelectedTemplate(template) }
onClick=${ (event) => onSelect(event, template) }
data-entry-id=${ template.id }
>
Expand Down

0 comments on commit b88885e

Please sign in to comment.