@amalto/key-value-editor
Version:
A form input that can build a custom key value object.
182 lines • 10.1 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 __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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var helpers_1 = require("@amalto/helpers");
var wordings_1 = require("@amalto/wordings");
var KeyValueEditor = (function (_super) {
__extends(KeyValueEditor, _super);
function KeyValueEditor(props) {
var _this = _super.call(this, props) || this;
_this.downloadFile = function (key) {
(0, helpers_1.downloadDataFile)(_this.props.keyValues[key].contentBytes, _this.props.keyValues[key].contentType, key);
};
_this.addKeyValue = function (file) {
var keyValueStore = _this.getKeyValueStore(_this.props.keyValues);
var idx = Object.keys(keyValueStore).length;
keyValueStore[(idx + 1).toString()] = {
key: '',
contentType: file === true ? 'application/octet-stream' : 'text/plain',
contentBytes: '',
};
_this.props.handleChange(_this.getKeyValuesObject(keyValueStore));
};
_this.removeKeyValue = function (event) {
var keyValuesUpdate = JSON.parse(JSON.stringify(_this.props.keyValues));
var key = event.currentTarget.getAttribute('data-key');
delete keyValuesUpdate[key];
_this.props.handleChange(keyValuesUpdate);
};
_this.handleKeyChange = function (event) {
if ((0, helpers_1.isValidKeyChar)(event.target.value) || !event.target.value) {
var idx = event.currentTarget.getAttribute('data-idx');
var keyValueStore = _this.getKeyValueStore(_this.props.keyValues);
keyValueStore[idx] = {
key: event.target.value,
contentType: keyValueStore[idx].contentType,
contentBytes: keyValueStore[idx].contentBytes,
};
_this.props.handleChange(_this.getKeyValuesObject(keyValueStore));
}
};
_this.handleValueChange = function (event) {
var keyValuesUpdate = JSON.parse(JSON.stringify(_this.props.keyValues));
var key = event.currentTarget.getAttribute('data-key');
keyValuesUpdate[key].contentBytes = event.target.value;
_this.props.handleChange(keyValuesUpdate);
};
_this.handleFileUpload = function (event) {
var key = event.currentTarget.getAttribute('data-key');
var idx = event.currentTarget.getAttribute('data-idx');
var reader = new FileReader();
var file = event.target.files[0];
var isTextPlain = file.type && file.type === 'text/plain';
reader.onload = function () {
try {
var fileContent = reader.result;
var fileData = '';
if (isTextPlain) {
fileData = fileContent;
}
else if (fileContent.split(',').length === 2) {
fileData = fileContent.split(',')[1];
}
var keyValueStore = _this.getKeyValueStore(_this.props.keyValues);
keyValueStore[idx].key = file.name || 'default_file_' + idx;
keyValueStore[idx].contentBytes = fileData;
if (file.type) {
keyValueStore[idx].contentType = file.type;
}
_this.props.handleChange(_this.getKeyValuesObject(keyValueStore));
}
catch (error) {
console.log('File reading error: ', error);
}
};
if (file) {
if (isTextPlain) {
reader.readAsText(file);
}
else {
reader.readAsDataURL(file);
}
}
};
_this.getKeyValueStore = function (keyValues) {
var kvStore = {};
var i = 0;
for (var key in keyValues) {
i++;
kvStore[i] = {
key: key,
contentType: keyValues[key].contentType,
contentBytes: keyValues[key].contentBytes,
};
}
return kvStore;
};
_this.getKeyValuesObject = function (keyValueStore) {
var keyValues = {};
for (var idx in keyValueStore) {
var keyVal = keyValueStore[idx];
keyValues[keyVal.key] = {
contentType: keyVal.contentType,
contentBytes: keyVal.contentBytes,
};
}
return keyValues;
};
_this.state = {
wordings: (0, helpers_1.compileWordings)(wordings_1.MULTILANGUAGE_WORDINGS, props.locale),
};
return _this;
}
KeyValueEditor.prototype.render = function () {
var _this = this;
var wordings = this.state.wordings;
var readonly = this.props.readonly;
var keyValueStore = this.getKeyValueStore(this.props.keyValues);
var inputs = Object.keys(keyValueStore).map(function (idx) {
var keyVal = keyValueStore[idx];
return (React.createElement("div", { className: "row", key: idx },
!readonly ? (React.createElement("div", { className: "form-group col-xs-2 text-center", style: { paddingRight: 0 } },
React.createElement("span", { className: "fas fa-minus-circle danger-color control-align click-pointer", "data-key": keyVal.key, onClick: _this.removeKeyValue }))) : null,
React.createElement("div", { className: "form-group col-xs-5" }, keyVal.contentType === 'text/plain' ? (React.createElement("input", { type: "text", className: "form-control", value: keyVal.key, disabled: readonly, onChange: _this.handleKeyChange, "data-idx": idx, placeholder: wordings.key })) : (React.createElement("span", { className: "control-align" }, keyVal.key || wordings.selectFile))),
React.createElement("div", { className: "form-group col-xs-5" }, keyVal.contentType === 'text/plain' ? (React.createElement("textarea", { className: "form-control", value: keyVal.contentBytes, disabled: readonly, onChange: _this.handleValueChange, "data-key": keyVal.key, placeholder: wordings.value })) : keyVal.contentBytes ? (React.createElement("button", { type: "button", className: "btn btn-info btn-trans", onClick: function () { return _this.downloadFile(keyVal.key); } },
React.createElement("span", { className: "fas fa-download right-spaced" }),
React.createElement("span", null, wordings.download))) : (React.createElement("span", { className: "btn btn-block upload-btn btn-font btn-trans" },
React.createElement("span", { className: "fas fa-upload right-spaced" }),
React.createElement("span", null, wordings.uploadFile),
React.createElement("input", { type: "file", className: "upload-input", onChange: _this.handleFileUpload, "data-idx": idx, "data-key": keyVal.key }))))));
});
return (React.createElement("div", null,
inputs,
!readonly ? (React.createElement("div", null,
React.createElement("button", { type: "button", className: "btn btn-trans btn-info right-margin", onClick: this.addKeyValue.bind(this), "data-toggle": "tooltip", "data-original-title": wordings.addTextProperty },
React.createElement("span", { className: "fas fa-plus right-spaced" }),
React.createElement("span", { className: "fas fa-font" })),
React.createElement("button", { type: "button", className: "btn btn-trans btn-info", onClick: this.addKeyValue.bind(this, true), "data-toggle": "tooltip", "data-original-title": wordings.addFileProperty },
React.createElement("span", { className: "fas fa-plus right-spaced" }),
React.createElement("span", { className: "far fa-file" })))) : null));
};
return KeyValueEditor;
}(React.Component));
exports.default = KeyValueEditor;
//# sourceMappingURL=index.js.map