Skip to content

Commit

Permalink
sp-action-menu for folder-picker
Browse files Browse the repository at this point in the history
  • Loading branch information
Predrag Markovic committed Feb 12, 2025
1 parent 8c10054 commit f6e0657
Showing 1 changed file with 53 additions and 164 deletions.
217 changes: 53 additions & 164 deletions studio/src/mas-folder-picker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,109 +5,43 @@ import StoreController from './reactivity/store-controller.js';
export class MasFolderPicker extends LitElement {
static styles = css`
:host {
display: block;
position: relative;
width: 200px;
}
.picker-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 4px 12px;
border-radius: 4px;
background-color: transparent;
cursor: pointer;
box-sizing: border-box;
--mod-actionbutton-min-width: 100%;
--swc-menu-width: 171px;
}
.picker-button:hover {
border-color: var(--spectrum-global-color-gray-500, #6e6e6e);
sp-action-menu {
width: 100%;
}
.button-content {
.folder-picker-wrapper {
display: flex;
padding-left: 12px;
align-items: center;
gap: 8px;
flex-grow: 1;
min-width: 0;
}
.button-content span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.chevron {
width: 16px;
height: 16px;
color: var(--spectrum-alias-text-color, #000);
padding-right: 5px;
flex-shrink: 0;
}
sp-popover {
position: absolute;
z-index: 1;
width: 100%;
margin-top: 4px;
box-sizing: border-box;
background-color: transparent;
border: none;
}
sp-menu {
width: 100%;
max-height: none;
overflow: visible;
background-color: var(--spectrum-white, #fff);
sp-action-menu [slot='icon'] {
order: 2;
margin-left: auto;
}
sp-menu-item[selected] {
font-weight: bold;
}
sp-menu-item[selected] {
font-weight: bold;
&::after {
display: none;
}
}
`;

static properties = {
open: { state: true },
};

constructor() {
super();
this.open = false;
}

foldersLoaded = new StoreController(this, Store.folders.loaded);
folders = new StoreController(this, Store.folders.data);
search = new StoreController(this, Store.search);
selecting = new StoreController(this, Store.selecting);

toggleDropdown() {
this.open = !this.open;
}

closeDropdown() {
this.open = false;
}

handleSelection(event) {
const value = event.target.value;
Store.search.set((prev) => ({ ...prev, path: value }));
this.closeDropdown();
_handleSelection(selectedValue) {
Store.search.set((prev) => ({ ...prev, path: selectedValue }));
}

render() {
Expand All @@ -119,95 +53,50 @@ export class MasFolderPicker extends LitElement {
(option) => option.value === this.search.value.path,
);
return html`
<div
class="picker-button"
@click=${this.toggleDropdown}
role="button"
aria-haspopup="true"
aria-expanded=${this.open ? 'true' : 'false'}
tabindex="0"
@keydown=${this.handleKeyDown}
@focusout=${this.handleFocusOut}
>
<span class="button-content">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
viewBox="0 0 30 26"
width="18px"
xml:space="preserve"
role="img"
aria-label="Adobe"
>
<path
fill="#292929"
d="M19 0h11v26zM11.1 0H0v26zM15 9.6L22.1 26h-4.6l-2.1-5.2h-5.2z"
></path>
</svg>
<span class="surface-selection"
>${currentFolder?.label}</span
>
</span>
<sp-icon-chevron-down
dir="ltr"
class="chevron"
></sp-icon-chevron-down>
<div class="folder-picker-wrapper">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
viewBox="0 0 30 26"
width="18px"
xml:space="preserve"
role="img"
aria-label="Adobe"
slot="icon"
class="icon"
>
<path
fill="#292929"
d="M19 0h11v26zM11.1 0H0v26zM15 9.6L22.1 26h-4.6l-2.1-5.2h-5.2z"
></path>
</svg>
<sp-action-menu size="m" value=${this.search.value.path} quiet>
<sp-icon-chevron-down
dir="ltr"
class="chevron"
slot="icon"
></sp-icon-chevron-down>
<span slot="label">${currentFolder?.label}</span>
<sp-menu size="m">
${options.map(({ value, label }) => {
return html`
<sp-menu-item
.value=${value}
?selected=${this.search.value.path ===
value}
@click=${() => this._handleSelection(value)}
>
<div class="test">${label}</div>
</sp-menu-item>
`;
})}
</sp-menu>
</sp-action-menu>
</div>
${this.open
? html`
<sp-popover placement="bottom-start" open>
<sp-menu
@change=${this.handleSelection}
selects="single"
role="listbox"
>
${options.map(({ value, label }) => {
const selected =
this.search.value.path === value;
return html`
<sp-menu-item
.value=${value}
?selected=${selected}
>
${label}
</sp-menu-item>
`;
})}
</sp-menu>
</sp-popover>
`
: ''}
`;
}

handleFocusOut(event) {
if (this.shadowRoot.contains(event.relatedTarget)) {
return;
} else {
this.closeDropdown();
}
}

handleKeyDown(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
this.toggleDropdown();
} else if (event.key === 'ArrowDown') {
event.preventDefault();
this.open = true;
this.updateComplete.then(() => {
const firstMenuItem =
this.renderRoot.querySelector('sp-menu-item');
if (firstMenuItem) {
firstMenuItem.focus();
}
});
} else if (event.key === 'Escape' || event.key === 'Tab') {
this.closeDropdown();
}
}
}

customElements.define('mas-folder-picker', MasFolderPicker);

0 comments on commit f6e0657

Please sign in to comment.