@amalto/data-line
Version:
Line used in DataGrid component.
193 lines • 10 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var classnames_1 = __importDefault(require("classnames"));
var STRING_MAX_LENGTH = 300;
var DataItem = (function (_super) {
__extends(DataItem, _super);
function DataItem(props) {
var _this = _super.call(this, props) || this;
_this.closeTextareaDisplay = function (event) {
if (event.keyCode === 27) {
_this.setState({
showAsTextarea: false,
});
}
};
_this.toggleTextareaDisplay = function () {
_this.setState({ showAsTextarea: !_this.state.showAsTextarea });
};
_this.handleEdit = function (event) {
var _a = _this.props, columnId = _a.columnId, editCallback = _a.editCallback, validate = _a.validate;
var value = event.target.value;
var invalidMsg = (validate === null || validate === void 0 ? void 0 : validate(value)) || undefined;
if (invalidMsg !== _this.state.invalidMsg) {
_this.setState({ invalidMsg: invalidMsg }, function () {
return editCallback(columnId, value);
});
}
else {
editCallback(columnId, value);
}
};
_this.keyPressHandler = function (event) {
if (event.charCode === 13) {
event.preventDefault();
if (!_this.state.invalidMsg &&
_this.props.enterPressCallback &&
_this.props.isEdited) {
_this.props.enterPressCallback();
}
}
};
_this.handleTabPress = function (event) {
if (event.keyCode === 9) {
event.preventDefault();
_this.props.tabOnLastCellCallback();
}
};
_this.displayContextMenu = function (e) {
e.preventDefault();
_this.props.displayContextMenu(_this.props.columnId, _this.props.displayValue, e.clientX, e.clientY);
};
_this.truncateDisplayValue = function (displayValue) {
if (!displayValue)
return '-';
if (typeof displayValue !== 'string')
return displayValue;
var _a = _this.state, contentTooLong = _a.contentTooLong, valueMaxLength = _a.valueMaxLength;
var truncatedValue = contentTooLong
? displayValue.substring(0, valueMaxLength) + '...'
: displayValue;
return truncatedValue;
};
_this.state = {
showAsTextarea: false,
invalidMsg: undefined,
valueMaxLength: props.displayValueMaxLength || STRING_MAX_LENGTH,
contentTooLong: false,
};
return _this;
}
DataItem.prototype.componentDidMount = function () {
var displayValueLimit = this.props.displayValueMaxLength || STRING_MAX_LENGTH;
if (typeof this.props.displayValue === 'string' &&
this.props.displayValue.length > displayValueLimit) {
this.setState({ contentTooLong: true });
}
};
DataItem.prototype.componentDidUpdate = function (prevProps) {
if (prevProps.displayValueMaxLength !== this.props.displayValueMaxLength ||
prevProps.displayValue !== this.props.displayValue) {
var valueMaxLength = this.props.displayValueMaxLength || STRING_MAX_LENGTH;
this.setState({
contentTooLong: typeof this.props.displayValue === 'string' &&
this.props.displayValue.length > valueMaxLength,
valueMaxLength: valueMaxLength,
});
}
};
DataItem.prototype.render = function () {
var _a = this.props, options = _a.options, editCallback = _a.editCallback, editMode = _a.editMode, readOnly = _a.readOnly, allowDisplayAsTextAreaOnReadonly = _a.allowDisplayAsTextAreaOnReadonly, isEdited = _a.isEdited, lastEditable = _a.lastEditable, tabOnLastCellCallback = _a.tabOnLastCellCallback, displayContextMenu = _a.displayContextMenu, displayTemplate = _a.displayTemplate, displayValue = _a.displayValue, columnId = _a.columnId, cssClass = _a.cssClass, displayMode = _a.displayMode, label = _a.label;
var itemDisplaySettings = displayTemplate
? displayTemplate[columnId]
: null;
var userStyles = displayMode === 'mobile'
? {}
: itemDisplaySettings && itemDisplaySettings[displayMode]
? {
width: itemDisplaySettings[displayMode].width,
textAlign: itemDisplaySettings[displayMode].textAlign,
color: itemDisplaySettings.color,
}
: {
width: 150,
};
var additionalProps = {};
var editable = editCallback && editMode && !readOnly;
var tabPressHandler = isEdited && lastEditable && tabOnLastCellCallback
? {
onKeyDown: this.handleTabPress,
}
: {};
var _displayValue = editable ? (options && options.length ? (React.createElement("div", { className: "form-inline" },
React.createElement("select", { className: "form-control form-control-sm", onChange: this.handleEdit }, options.map(function (opt, idx) { return (React.createElement("option", { key: idx, value: opt.value, disabled: opt.disabled }, opt.label || opt.value)); })))) : (React.createElement("div", null,
React.createElement("div", { className: "form-inline" },
React.createElement("textarea", __assign({ className: (0, classnames_1.default)('form-control form-control-sm', {
invalid: !!this.state.invalidMsg,
}), value: displayValue || '', onChange: this.handleEdit, onKeyPress: this.keyPressHandler }, tabPressHandler))),
!this.state.invalidMsg ? null : (React.createElement("span", { className: "danger-color text-xsmall" }, this.state.invalidMsg))))) : (React.createElement("div", { onContextMenu: displayContextMenu && this.displayContextMenu }, this.truncateDisplayValue(displayValue)));
if (allowDisplayAsTextAreaOnReadonly &&
readOnly &&
typeof displayValue === 'string') {
additionalProps.onDoubleClick = this.toggleTextareaDisplay;
if (this.state.showAsTextarea) {
_displayValue = (React.createElement("div", { className: "form-inline" },
React.createElement("textarea", { className: "form-control form-control-sm", value: displayValue || '', onKeyUp: this.closeTextareaDisplay, disabled: true, readOnly: true })));
}
}
return (React.createElement("div", __assign({ "data-testId": "grid-cell-".concat(columnId), className: (0, classnames_1.default)(cssClass, {
'card-item-value inline-item-value': displayMode !== 'mobile',
'inline-block mgb-10 mgr-20 align-top break-word': displayMode === 'mobile' && columnId !== 'actions',
'mgt-10 mgb-10 text-center mobile-action-buttons': displayMode === 'mobile' && columnId === 'actions',
'dg-cell-edited': isEdited,
}), style: userStyles }, additionalProps),
displayMode === 'mobile' && columnId !== 'actions' ? (React.createElement("label", { className: "dimmed" }, label || columnId)) : null,
_displayValue));
};
return DataItem;
}(React.Component));
exports.default = DataItem;
//# sourceMappingURL=DataItem.js.map