@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
102 lines • 4.46 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var strings = tslib_1.__importStar(require("ControlStrings"));
var React = tslib_1.__importStar(require("react"));
var DateTimeConventions_1 = require("./DateTimeConventions");
var TextField_1 = require("@fluentui/react/lib/TextField");
var TimeHelper_1 = require("./TimeHelper");
var Dropdown_1 = require("@fluentui/react/lib/Dropdown");
var TimeDisplayControlType_1 = require("./TimeDisplayControlType");
/**
* Hours component, this renders the hours dropdown
*/
var HoursComponent = /** @class */ (function (_super) {
tslib_1.__extends(HoursComponent, _super);
function HoursComponent(props) {
var _this = _super.call(this, props) || this;
_this._initHoursOptions();
return _this;
}
HoursComponent.prototype.render = function () {
var _a = this.props, disabled = _a.disabled, timeConvention = _a.timeConvention, value = _a.value, timeDisplayControlType = _a.timeDisplayControlType, onChange = _a.onChange;
var renderDropdown = timeDisplayControlType === TimeDisplayControlType_1.TimeDisplayControlType.Dropdown;
if (renderDropdown) {
return (React.createElement(Dropdown_1.Dropdown, { disabled: disabled, label: '', options: this._hours, selectedKey: value, onChanged: function (option) {
onChange(option.text);
}, dropdownWidth: 110 }));
}
else {
return (React.createElement(TextField_1.MaskedTextField, { disabled: disabled, label: "", value: value ? TimeHelper_1.TimeHelper.hoursValue(value, timeConvention) : "".concat(timeConvention === DateTimeConventions_1.TimeConvention.Hours24 ? "00" : "12 AM"), mask: timeConvention === DateTimeConventions_1.TimeConvention.Hours24 ? "29" : "19 AM", maskFormat: {
'1': /[0-1]/,
'2': /[0-2]/,
'9': /[0-9]/,
'A': /[AaPp]/,
'M': /[Mm]/
}, onChange: function (e, val) {
if (onChange) {
onChange(val);
}
}, onGetErrorMessage: function (val) {
var message = "";
var hours = parseInt(val);
if (isNaN(hours)) {
message = strings.DateTimePickerHourValueInvalid;
}
if (!message && timeConvention === DateTimeConventions_1.TimeConvention.Hours24) {
message = hours > 23 ? strings.DateTimePickerHourValueInvalid : "";
}
else {
message = hours > 12 ? strings.DateTimePickerHourValueInvalid : "";
}
/*if (!message) {
onChange(val);
}*/
return message;
} }));
}
};
HoursComponent.prototype._initHoursOptions = function () {
var amDesignator = 'AM';
var pmDesignator = 'PM';
var hours = [];
for (var i = 0; i < 24; i++) {
var digit = void 0;
if (this.props.timeConvention === DateTimeConventions_1.TimeConvention.Hours24) {
// 24 hours time convention
if (i < 10) {
digit = '0' + i;
}
else {
digit = i.toString();
}
}
else {
// 12 hours time convention
if (i === 0) {
digit = "12 ".concat(amDesignator);
}
else if (i < 12) {
digit = "".concat(i, " ").concat(amDesignator);
}
else {
if (i === 12) {
digit = "12 ".concat(pmDesignator);
}
else {
digit = "".concat((i % 12), " ").concat(pmDesignator);
}
}
}
/*let selected: boolean = false;
if (i === value) {
selected = true;
}*/
hours.push({ key: i, text: digit });
}
this._hours = hours;
};
return HoursComponent;
}(React.Component));
exports.default = HoursComponent;
//# sourceMappingURL=HoursComponent.js.map