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.
90 lines
2.8 KiB
90 lines
2.8 KiB
import * as commands from 'app/client/components/commands';
|
|
import {ListEntry} from 'app/client/lib/listEntry';
|
|
import {DataRowModel} from 'app/client/models/DataRowModel';
|
|
import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
|
|
import {KoSaveableObservable} from 'app/client/models/modelUtil';
|
|
import {cssLabel, cssRow} from 'app/client/ui/RightPanel';
|
|
import {alignmentSelect} from 'app/client/ui2018/buttonSelect';
|
|
import {colors, testId} from 'app/client/ui2018/cssVars';
|
|
import {icon} from 'app/client/ui2018/icons';
|
|
import {menu, menuItem} from 'app/client/ui2018/menus';
|
|
import {NTextBox} from 'app/client/widgets/NTextBox';
|
|
import {Computed, dom, styled} from 'grainjs';
|
|
|
|
/**
|
|
* ChoiceTextBox - A textbox for choice values.
|
|
*/
|
|
export class ChoiceTextBox extends NTextBox {
|
|
private _choices: KoSaveableObservable<string[]>;
|
|
private _choiceValues: Computed<string[]>;
|
|
|
|
constructor(field: ViewFieldRec) {
|
|
super(field);
|
|
this._choices = this.options.prop('choices');
|
|
this._choiceValues = Computed.create(this, (use) => use(this._choices) || []);
|
|
}
|
|
|
|
public buildDom(row: DataRowModel) {
|
|
const value = row.cells[this.field.colId()];
|
|
return cssChoiceField(
|
|
cssChoiceText(
|
|
dom.style('text-align', this.alignment),
|
|
dom.text((use) => use(row._isAddRow) ? '' : use(this.valueFormatter).format(use(value))),
|
|
),
|
|
cssDropdownIcon('Dropdown',
|
|
// When choices exist, click dropdown icon to open edit autocomplete.
|
|
dom.on('click', () => this._hasChoices() && commands.allCommands.editField.run()),
|
|
// When choices do not exist, open a single-item menu to open the sidepane choice option editor.
|
|
menu(() => [
|
|
menuItem(commands.allCommands.fieldTabOpen.run, 'Add Choice Options')
|
|
], {
|
|
trigger: [(elem, ctl) => {
|
|
// Only open this menu if there are no choices.
|
|
dom.onElem(elem, 'click', () => this._hasChoices() || ctl.open());
|
|
}]
|
|
}),
|
|
testId('choice-dropdown')
|
|
)
|
|
);
|
|
}
|
|
|
|
public buildConfigDom() {
|
|
return [
|
|
cssRow(
|
|
alignmentSelect(this.alignment)
|
|
),
|
|
cssLabel('OPTIONS'),
|
|
cssRow(
|
|
dom.create(ListEntry, this._choiceValues, (values) => this._choices.saveOnly(values))
|
|
)
|
|
];
|
|
}
|
|
|
|
public buildTransformConfigDom() {
|
|
return this.buildConfigDom();
|
|
}
|
|
|
|
private _hasChoices() {
|
|
return this._choiceValues.get().length > 0;
|
|
}
|
|
}
|
|
|
|
const cssChoiceField = styled('div.field_clip', `
|
|
display: flex;
|
|
justify-content: space-between;
|
|
`);
|
|
|
|
const cssChoiceText = styled('div', `
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
`);
|
|
|
|
const cssDropdownIcon = styled(icon, `
|
|
cursor: pointer;
|
|
background-color: ${colors.lightGreen};
|
|
min-width: 16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
`);
|