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.
72 lines
2.4 KiB
72 lines
2.4 KiB
var _ = require('underscore');
|
|
var ko = require('knockout');
|
|
var dom = require('../lib/dom');
|
|
var dispose = require('../lib/dispose');
|
|
var kd = require('../lib/koDom');
|
|
var AbstractWidget = require('./AbstractWidget');
|
|
var modelUtil = require('../models/modelUtil');
|
|
|
|
const {fromKoSave} = require('app/client/lib/fromKoSave');
|
|
const {alignmentSelect, buttonToggleSelect} = require('app/client/ui2018/buttonSelect');
|
|
const {testId} = require('app/client/ui2018/cssVars');
|
|
const {cssRow} = require('app/client/ui/RightPanel');
|
|
const {Computed} = require('grainjs');
|
|
|
|
/**
|
|
* TextBox - The most basic widget for displaying text information.
|
|
*/
|
|
function TextBox(field) {
|
|
AbstractWidget.call(this, field);
|
|
this.alignment = this.options.prop('alignment');
|
|
let wrap = this.options.prop('wrap');
|
|
this.wrapping = this.autoDispose(ko.computed({
|
|
read: () => {
|
|
let w = wrap();
|
|
if (w === null || w === undefined) {
|
|
// When user has yet to specify a desired wrapping state, GridView and DetailView have
|
|
// different default states. GridView defaults to wrapping disabled, while DetailView
|
|
// defaults to wrapping enabled.
|
|
return (this.field.viewSection().parentKey() === 'record') ? false : true;
|
|
} else {
|
|
return w;
|
|
}
|
|
},
|
|
write: val => wrap(val)
|
|
}));
|
|
modelUtil.addSaveInterface(this.wrapping, val => wrap.saveOnly(val));
|
|
|
|
this.autoDispose(this.wrapping.subscribe(() =>
|
|
this.field.viewSection().events.trigger('rowHeightChange')
|
|
));
|
|
|
|
}
|
|
dispose.makeDisposable(TextBox);
|
|
_.extend(TextBox.prototype, AbstractWidget.prototype);
|
|
|
|
TextBox.prototype.buildConfigDom = function() {
|
|
const wrapping = Computed.create(null, use => use(this.wrapping));
|
|
wrapping.onWrite((val) => modelUtil.setSaveValue(this.wrapping, Boolean(val)));
|
|
|
|
return dom('div',
|
|
cssRow(
|
|
dom.autoDispose(wrapping),
|
|
alignmentSelect(fromKoSave(this.alignment)),
|
|
dom('div', {style: 'margin-left: 8px;'},
|
|
buttonToggleSelect(wrapping, [{value: true, icon: 'Wrap'}]),
|
|
testId('tb-wrap-text')
|
|
)
|
|
)
|
|
);
|
|
};
|
|
|
|
TextBox.prototype.buildDom = function(row) {
|
|
let value = row[this.field.colId()];
|
|
return dom('div.field_clip',
|
|
kd.style('text-align', this.alignment),
|
|
kd.toggleClass('text_wrapping', this.wrapping),
|
|
kd.text(() => row._isAddRow() ? '' : this.valueFormatter().format(value()))
|
|
);
|
|
};
|
|
|
|
module.exports = TextBox;
|