From 06d2f431173506fe6de7b4da4cfae75a1818b5e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8A=9B=E7=9A=93?= Date: Mon, 11 Jan 2021 15:47:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=20Panel=20/=20Widget?= =?UTF-8?q?=20/=20PanelDock=20=E7=AD=89=E7=B1=BB=E5=9E=8B=E7=9A=84?= =?UTF-8?q?=E9=9D=A2=E6=9D=BF=20disable=20/=20enable=20=E6=96=B9=E6=B3=95,?= =?UTF-8?q?=20=E4=BB=A5=E5=8F=8A=E7=9B=B8=E5=BA=94=E7=9A=84=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E8=A7=A6=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/widget-views/index.less | 6 +++++ .../src/components/widget-views/index.tsx | 24 ++++++++++++++++++- packages/editor-skeleton/src/skeleton.ts | 2 ++ packages/editor-skeleton/src/widget/dock.ts | 19 +++++++++++++++ .../editor-skeleton/src/widget/panel-dock.ts | 5 ++-- packages/editor-skeleton/src/widget/widget.ts | 22 +++++++++++++++++ 6 files changed, 74 insertions(+), 4 deletions(-) diff --git a/packages/editor-skeleton/src/components/widget-views/index.less b/packages/editor-skeleton/src/components/widget-views/index.less index 1241b0dde..239885900 100644 --- a/packages/editor-skeleton/src/components/widget-views/index.less +++ b/packages/editor-skeleton/src/components/widget-views/index.less @@ -5,4 +5,10 @@ &.hidden { display: none; } + } + +.lc-widget-disabled { + pointer-events: none; + opacity: 0.4; +} \ No newline at end of file diff --git a/packages/editor-skeleton/src/components/widget-views/index.tsx b/packages/editor-skeleton/src/components/widget-views/index.tsx index 5fc11c324..4a6a38d94 100644 --- a/packages/editor-skeleton/src/components/widget-views/index.tsx +++ b/packages/editor-skeleton/src/components/widget-views/index.tsx @@ -73,7 +73,6 @@ export class PanelDockView extends Component { ...props, className: classNames(className, { actived: dock.actived, - disabled: dock.disabled, }), onClick: () => { onClick && onClick(); @@ -260,13 +259,16 @@ export class WidgetView extends Component<{ widget: IWidget }> { componentDidMount() { this.checkVisible(); + this.checkDisabled(); } componentDidUpdate() { this.checkVisible(); + this.checkDisabled(); } private lastVisible = false; + private lastDisabled = false; checkVisible() { const { widget } = this.props; @@ -281,11 +283,31 @@ export class WidgetView extends Component<{ widget: IWidget }> { } } + checkDisabled() { + const { widget } = this.props; + const currentDisabled = widget.disabled; + if (currentDisabled !== this.lastDisabled) { + this.lastDisabled = currentDisabled; + if (this.lastDisabled) { + widget.skeleton.postEvent(SkeletonEvents.WIDGET_DISABLE, widget.name, widget); + } else { + widget.skeleton.postEvent(SkeletonEvents.WIDGET_ENABLE, widget.name, widget); + } + } + } + render() { const { widget } = this.props; if (!widget.visible) { return null; } + if (widget.disabled) { + return ( +
+ {widget.body} +
+ ); + } return widget.body; } } diff --git a/packages/editor-skeleton/src/skeleton.ts b/packages/editor-skeleton/src/skeleton.ts index d259701cf..26804294b 100644 --- a/packages/editor-skeleton/src/skeleton.ts +++ b/packages/editor-skeleton/src/skeleton.ts @@ -31,6 +31,8 @@ export enum SkeletonEvents { PANEL_HIDE = 'skeleton.panel.hide', WIDGET_SHOW = 'skeleton.widget.show', WIDGET_HIDE = 'skeleton.widget.hide', + WIDGET_DISABLE = 'skeleton.widget.disable', + WIDGET_ENABLE = 'skeleton.widget.enable', } export class Skeleton { diff --git a/packages/editor-skeleton/src/widget/dock.ts b/packages/editor-skeleton/src/widget/dock.ts index db15167bf..f402239e9 100644 --- a/packages/editor-skeleton/src/widget/dock.ts +++ b/packages/editor-skeleton/src/widget/dock.ts @@ -24,6 +24,8 @@ export default class Dock implements IWidget { return this._visible; } + @obx.ref private _disabled = false; + get content(): ReactNode { return createElement(WidgetView, { widget: this, @@ -76,6 +78,23 @@ export default class Dock implements IWidget { } } + private setDisabled(flag: boolean) { + if (this._disabled === flag) return; + this._disabled = flag; + } + + disable() { + this.setDisabled(true); + } + + enable() { + this.setDisabled(false); + } + + get disabled(): boolean { + return this._disabled; + } + getContent() { return this.content; } diff --git a/packages/editor-skeleton/src/widget/panel-dock.ts b/packages/editor-skeleton/src/widget/panel-dock.ts index 44634f661..9f58a6c22 100644 --- a/packages/editor-skeleton/src/widget/panel-dock.ts +++ b/packages/editor-skeleton/src/widget/panel-dock.ts @@ -125,6 +125,7 @@ export default class PanelDock implements IWidget { } private setDisabled(flag: boolean) { + if (this._disabled === flag) return; this._disabled = flag; } @@ -141,9 +142,7 @@ export default class PanelDock implements IWidget { } togglePanel() { - if (!this._disabled) { - this.panel?.toggle(); - } + this.panel?.toggle(); } getName() { diff --git a/packages/editor-skeleton/src/widget/widget.ts b/packages/editor-skeleton/src/widget/widget.ts index ab2c3d3dd..b7b565070 100644 --- a/packages/editor-skeleton/src/widget/widget.ts +++ b/packages/editor-skeleton/src/widget/widget.ts @@ -12,6 +12,7 @@ export interface IWidget { readonly align?: string; readonly isWidget: true; readonly visible: boolean; + readonly disabled: boolean; readonly body: ReactNode; readonly skeleton: Skeleton; readonly config: IWidgetBaseConfig; @@ -21,6 +22,8 @@ export interface IWidget { show(): void; hide(): void; toggle(): void; + enable?(): void; + disable?(): void; } export default class Widget implements IWidget { @@ -40,6 +43,8 @@ export default class Widget implements IWidget { @obx.ref inited = false; + @obx.ref private _disabled = false; + private _body: ReactNode; get body() { @@ -109,6 +114,23 @@ export default class Widget implements IWidget { toggle() { this.setVisible(!this._visible); } + + private setDisabled(flag: boolean) { + if (this._disabled === flag) return; + this._disabled = flag; + } + + disable() { + this.setDisabled(true); + } + + enable() { + this.setDisabled(false); + } + + get disabled(): boolean { + return this._disabled; + } } export function isWidget(obj: any): obj is IWidget {