diff --git a/src/client/lazy-app/Compress/Flyout/index.tsx b/src/client/lazy-app/Compress/Flyout/index.tsx index f13e0e48..c52c7099 100644 --- a/src/client/lazy-app/Compress/Flyout/index.tsx +++ b/src/client/lazy-app/Compress/Flyout/index.tsx @@ -18,7 +18,7 @@ type Direction = 'left' | 'right' | 'up' | 'down'; const has = (haystack: string | string[] | undefined, needle: string) => Array.isArray(haystack) ? haystack.includes(needle) : haystack === needle; -interface Props extends ComponentProps<'aside'> { +interface Props extends Omit, 'ref'> { showing?: boolean; direction?: Direction | Direction[]; anchor?: Anchor; @@ -53,16 +53,24 @@ export default class Flyout extends Component { this.setShowing(false); }; + hide = () => { + this.setShowing(false); + }; + + show = () => { + this.setShowing(true); + }; + + toggle = () => { + this.setShowing(!this.state.showing); + }; + private setShowing = (showing?: boolean) => { this.shown = Date.now(); if (showing) this.setState({ showing: true, hasShown: true }); else this.setState({ showing: false }); }; - private toggle = () => { - this.setShowing(!this.state.showing); - }; - private reposition = () => { const menu = this.menu.current; const wrap = this.wrap.current; diff --git a/src/client/lazy-app/Compress/Options/index.tsx b/src/client/lazy-app/Compress/Options/index.tsx index ee0efb1b..021bfb42 100644 --- a/src/client/lazy-app/Compress/Options/index.tsx +++ b/src/client/lazy-app/Compress/Options/index.tsx @@ -1,4 +1,4 @@ -import { h, Component } from 'preact'; +import { h, Component, createRef } from 'preact'; import * as style from './style.css'; import 'add-css:./style.css'; @@ -65,6 +65,8 @@ export default class Options extends Component { supportedEncoderMap: undefined, }; + menu = createRef(); + constructor() { super(); supportedEncoderMapP.then((supportedEncoderMap) => @@ -111,10 +113,12 @@ export default class Options extends Component { private onCopyCliClick = () => { this.props.onCopyCliClick(this.props.index); + if (this.menu.current) this.menu.current.hide(); }; private onCopyToOtherSideClick = () => { this.props.onCopyToOtherSideClick(this.props.index); + if (this.menu.current) this.menu.current.hide(); }; render( @@ -139,6 +143,7 @@ export default class Options extends Component {

Edit