You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.8 KiB
66 lines
1.8 KiB
6 years ago
|
import { IconLabel, Left, Label } from 'ui';
|
||
|
|
import { shortcut, store } from '@core/core';
|
||
|
|
import { CollapseModel, CollapseModelXtype } from './collapse.model';
|
||
|
|
|
||
|
|
export const EVENT_CHANGE = 'EVENT_CHANGE';
|
||
|
|
export const CollapseXtype = 'dec.dcm.components.collapse';
|
||
|
|
@shortcut(CollapseXtype)
|
||
|
|
@store(CollapseModelXtype)
|
||
|
|
export class Collapse extends BI.BasicButton {
|
||
|
|
props = {
|
||
|
|
name: '',
|
||
|
|
isCollapse: true,
|
||
|
|
}
|
||
|
|
|
||
|
|
rightFont: any;
|
||
|
|
downFont: any;
|
||
|
|
|
||
|
|
model: CollapseModel['model'];
|
||
|
|
store: CollapseModel['store'];
|
||
|
|
|
||
|
|
watch = {
|
||
|
|
isCollapse: (isCollapse: boolean) => {
|
||
|
|
this.rightFont.setVisible(isCollapse);
|
||
|
|
this.downFont.setVisible(!isCollapse);
|
||
|
|
this.fireEvent(EVENT_CHANGE, isCollapse);
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
this.store.setCollapse(this.options.isCollapse);
|
||
|
|
|
||
|
|
return {
|
||
|
|
type: Left,
|
||
|
|
items: [
|
||
|
|
{
|
||
|
|
type: IconLabel,
|
||
|
|
height: 17,
|
||
|
|
cls: 'pull-right-font',
|
||
|
|
ref: (_ref: any) => {
|
||
|
|
this.rightFont = _ref;
|
||
|
|
},
|
||
|
|
invisible: !this.model.isCollapse,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: IconLabel,
|
||
|
|
height: 17,
|
||
|
|
cls: 'pull-down-font',
|
||
|
|
ref: (_ref: any) => {
|
||
|
|
this.downFont = _ref;
|
||
|
|
},
|
||
|
|
invisible: this.model.isCollapse,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: Label,
|
||
|
|
lgap: 2,
|
||
|
|
text: this.options.name,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
doClick() {
|
||
|
|
this.store.setCollapse(!this.model.isCollapse);
|
||
|
|
}
|
||
|
|
}
|