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.
97 lines
2.9 KiB
97 lines
2.9 KiB
4 years ago
|
var commands = require('../components/commands');
|
||
|
|
var dispose = require('../lib/dispose');
|
||
|
|
var kd = require('../lib/koDom');
|
||
|
|
var _ = require('underscore');
|
||
|
|
var TextBox = require('./TextBox');
|
||
|
|
|
||
|
|
const {fromKoSave} = require('app/client/lib/fromKoSave');
|
||
|
|
const {ListEntry} = require('app/client/lib/listEntry');
|
||
|
|
const {alignmentSelect} = require('app/client/ui2018/buttonSelect');
|
||
|
|
const {colors, testId} = require('app/client/ui2018/cssVars');
|
||
|
|
const {icon} = require('app/client/ui2018/icons');
|
||
|
|
const {menu, menuItem} = require('app/client/ui2018/menus');
|
||
|
|
const {cssLabel, cssRow} = require('app/client/ui/RightPanel');
|
||
|
|
const {dom, Computed, styled} = require('grainjs');
|
||
|
|
|
||
|
|
/**
|
||
|
|
* ChoiceTextBox - A textbox for choice values.
|
||
|
|
*/
|
||
|
|
function ChoiceTextBox(field) {
|
||
|
|
TextBox.call(this, field);
|
||
|
|
|
||
|
|
this.docData = field._table.docModel.docData;
|
||
|
|
this.colId = field.column().colId;
|
||
|
|
this.tableId = field.column().table().tableId;
|
||
|
|
|
||
|
|
this.choices = this.options.prop('choices');
|
||
|
|
this.choiceValues = Computed.create(this, (use) => use(this.choices) || [])
|
||
|
|
}
|
||
|
|
dispose.makeDisposable(ChoiceTextBox);
|
||
|
|
_.extend(ChoiceTextBox.prototype, TextBox.prototype);
|
||
|
|
|
||
|
|
|
||
|
|
ChoiceTextBox.prototype.buildDom = function(row) {
|
||
|
|
let value = row[this.field.colId()];
|
||
|
|
return cssChoiceField(
|
||
|
|
cssChoiceText(
|
||
|
|
kd.style('text-align', this.alignment),
|
||
|
|
kd.text(() => row._isAddRow() ? '' : this.valueFormatter().format(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')
|
||
|
|
)
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
ChoiceTextBox.prototype.buildConfigDom = function() {
|
||
|
|
return [
|
||
|
|
cssRow(
|
||
|
|
alignmentSelect(fromKoSave(this.alignment))
|
||
|
|
),
|
||
|
|
cssLabel('OPTIONS'),
|
||
|
|
cssRow(
|
||
|
|
dom.create(ListEntry, this.choiceValues, (values) => this.choices.saveOnly(values))
|
||
|
|
)
|
||
|
|
];
|
||
|
|
};
|
||
|
|
|
||
|
|
ChoiceTextBox.prototype.buildTransformConfigDom = function() {
|
||
|
|
return this.buildConfigDom();
|
||
|
|
};
|
||
|
|
|
||
|
|
ChoiceTextBox.prototype._hasChoices = function() {
|
||
|
|
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;
|
||
|
|
`);
|
||
|
|
|
||
|
|
module.exports = ChoiceTextBox;
|