@dock365/reform-fabric-fields
Version:
fabric fields reform
194 lines • 9.02 kB
JavaScript
"use strict";
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 (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
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 __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var Button_1 = require("office-ui-fabric-react/lib/Button");
var styles = {
optionItem: {
height: "30px",
margin: "2px",
width: "140px",
border: "0",
padding: "0",
position: "relative",
},
optionItemInput: {
verticalAlign: "top",
width: "calc(100% - 10px)",
padding: "5px",
border: "solid 1px #ccc",
boxSizing: "border-box",
},
optionContainer: {
padding: "5px",
height: "140px",
display: "flex",
flexDirection: "column",
flexWrap: "wrap",
alignContent: "flex-start",
boxSizing: "content-box",
},
colorPicker: {
backgroundColor: "#fff",
},
colorBtn: {
display: "inline-block",
height: "20px",
width: "20px",
margin: "5px",
border: "0",
},
applyChangesBtn: {
display: "inline-block",
width: "50%",
},
cancelChangesBtn: {
display: "inline-block",
width: "50%",
},
colorIndicator: {},
newOptionItem: {},
deleteOptionBtn: {},
};
var Editor = /** @class */ (function (_super) {
__extends(Editor, _super);
function Editor(props) {
var _this = _super.call(this, props) || this;
_this.state = {
options: props.options,
deletedOptions: [],
availableColors: Object.keys(_this.props.colors),
};
_this._onColorSelect = _this._onColorSelect.bind(_this);
_this._saveChanges = _this._saveChanges.bind(_this);
_this._cancelChanges = _this._cancelChanges.bind(_this);
_this._onStatusRemoveClick = _this._onStatusRemoveClick.bind(_this);
return _this;
}
Editor.prototype.componentDidMount = function () {
var _this = this;
if (this.props.options.length > 0)
this.setState({ options: this.props.options }, function () { return _this._calculateAvailableColors(); });
};
Editor.prototype.componentDidUpdate = function (prevProps, prevState) {
var _this = this;
if (prevProps.options.length !== this.props.options.length)
this.setState({ options: this.props.options }, function () { return _this._calculateAvailableColors(); });
};
Editor.prototype.render = function () {
var _this = this;
var options = this.state.options;
var widthOfAStatus = 150;
var noOfStatusesInAColumn = 4;
var noOfStatuses = options.length;
var width = (Math.ceil(noOfStatuses / noOfStatusesInAColumn) * widthOfAStatus) +
(noOfStatuses % noOfStatusesInAColumn === 0 ? widthOfAStatus : 0);
width = width < widthOfAStatus * 2 ? widthOfAStatus * 2 : width;
return (React.createElement("div", { style: { width: width + "px" }, className: "optionsPickerEditMenu" },
React.createElement("div", { className: "" + styles.optionContainer },
options.map(function (status) {
return React.createElement("div", { style: styles.optionItem, key: status.color, className: "optionsPickerEditMenuItem" },
React.createElement("div", { style: __assign({ backgroundColor: status.color && _this.props.colors[status.color] || status.color }, styles.colorIndicator) }),
React.createElement("input", { onChange: function (e) { return _this._onStatusValueChange(e.target.value, status.color || ""); }, value: status.title, placeholder: "Label...", disabled: status.protected }),
!status.protected ?
React.createElement(Button_1.ActionButton, { type: "button", disabled: status.protected, iconProps: { iconName: "ChromeClose" }, className: "" + styles.deleteOptionBtn, value: status.color, onClick: _this._onStatusRemoveClick }) : null);
}),
this.state.availableColors.length > 0 ?
React.createElement("div", { className: styles.optionItem + " " + styles.newOptionItem + " " }) :
null),
React.createElement("div", { style: styles.colorPicker }, this.state.availableColors.map(function (color) {
return React.createElement("button", { key: color, type: "button", value: color, style: __assign({ backgroundColor: _this.props.colors[color] }, styles.colorBtn), onClick: _this._onColorSelect });
})),
React.createElement(Button_1.DefaultButton, { text: "Cancel", onClick: this._cancelChanges, style: styles.cancelChangesBtn, type: "button" }),
React.createElement(Button_1.DefaultButton, { text: "Apply", onClick: this._saveChanges, style: styles.applyChangesBtn, type: "button" })));
};
Editor.prototype._onColorSelect = function (e) {
var _this = this;
var color = e.currentTarget.value;
if (color)
this.setState(function (prevState) { return ({
options: prevState.options.concat([{
title: "",
sortingOrder: _this.state.options.length + 1,
color: color,
}]),
}); }, function () { return _this._calculateAvailableColors(); });
};
Editor.prototype._onStatusValueChange = function (value, color) {
this.setState(function (prevState) { return ({
options: prevState.options.map(function (option) { return option.color === color ? __assign({}, option, { title: value }) : option; }),
}); });
};
Editor.prototype._saveChanges = function () {
if (this.props.onSaveChanges)
this.props.onSaveChanges(this.state.options, this.state.deletedOptions);
if (this.props.toggleEdit)
this.props.toggleEdit();
};
Editor.prototype._cancelChanges = function () {
if (this.props.toggleEdit)
this.props.toggleEdit();
};
Editor.prototype._onStatusRemoveClick = function (e) {
var _this = this;
var color = e.currentTarget.value;
this.setState(function (prevState) {
var deletedOption = prevState.options.find(function (option) { return option.color === color; });
return {
options: prevState.options.filter(function (status) { return status.color !== color; }),
deletedOptions: deletedOption && deletedOption.id ? prevState.deletedOptions.concat([deletedOption.id]) :
prevState.deletedOptions,
};
}, function () { return _this._calculateAvailableColors(color); });
};
Editor.prototype._calculateAvailableColors = function (newColor) {
this.setState(function (prevState) {
var availableColors = prevState.availableColors;
if (newColor) {
availableColors.push(newColor);
}
else {
prevState.options.forEach(function (_a) {
var color = _a.color;
var indexOfColor = color && availableColors.indexOf(color);
if (indexOfColor !== undefined && indexOfColor !== "" && indexOfColor >= 0)
availableColors.splice(indexOfColor, 1);
});
}
return { availableColors: availableColors };
});
};
return Editor;
}(React.Component));
exports.default = Editor;
//# sourceMappingURL=Editor.js.map