diff --git a/packages/app/src/components/Layout/drawer/index.jsx b/packages/app/src/components/Layout/drawer/index.jsx index b9eacdb0..2a71cbc8 100755 --- a/packages/app/src/components/Layout/drawer/index.jsx +++ b/packages/app/src/components/Layout/drawer/index.jsx @@ -7,19 +7,18 @@ import "./index.less" export default class DrawerController extends React.Component { constructor(props) { super(props) + this.state = { addresses: {}, refs: {}, drawers: [], } - this.DrawerController = { + window.app["DrawerController"] = { open: this.open, close: this.close, closeAll: this.closeAll, } - - window.app["DrawerController"] = this.DrawerController } sendEvent = (id, ...context) => { @@ -60,33 +59,31 @@ export default class DrawerController extends React.Component { this.setState({ refs, addresses, drawers }) } - destroy = (id) => { + close = (id) => { let { addresses, drawers, refs } = this.state + const index = addresses[id] + const ref = this.state.refs[id]?.current + + if (typeof ref === "undefined") { + return console.warn("This drawer not exists") + } + + if (ref.state.locked && ref.state.visible) { + return console.warn("This drawer is locked and cannot be closed") + } + if (typeof drawers[index] !== "undefined") { drawers = drawers.filter((value, i) => i !== index) } + delete addresses[id] delete refs[id] this.setState({ addresses, drawers }) } - close = (id) => { - const ref = this.state.refs[id]?.current - - if (typeof ref !== "undefined") { - if (ref.state.locked && ref.state.visible) { - return console.warn("This drawer is locked and cannot be closed") - } else { - return ref.close() - } - } else { - return console.warn("This drawer not exists") - } - } - closeAll = () => { this.state.drawers.forEach((drawer) => { drawer.ref.current.close() @@ -100,12 +97,19 @@ export default class DrawerController extends React.Component { export class Drawer extends React.Component { options = this.props.options ?? {} + events = new EventBus() + state = { visible: true, + locked: false, } componentDidMount = async () => { + if (this.options.defaultLocked) { + this.setState({ locked: true }) + } + if (typeof this.props.controller === "undefined") { throw new Error(`Cannot mount an drawer without an controller`) } @@ -118,8 +122,21 @@ export class Drawer extends React.Component { this.setState({ visible: to ?? !this.state.visible }) } + lock = async () => { + return await this.setState({ locked: true }) + } + + unlock = async () => { + return await this.setState({ locked: false }) + } + close = () => { + if (this.state.locked) { + return console.warn("Cannot close a locked drawer") + } + this.toogleVisibility(false) + this.events.emit("beforeClose") setTimeout(() => { @@ -127,7 +144,7 @@ export class Drawer extends React.Component { this.options.onClose() } - this.props.controller.destroy(this.props.id) + this.props.controller.close(this.props.id) }, 500) }