@amalto/time-picker
Version:
TimePicker component
143 lines • 7.03 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;
};
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 help_1 = __importDefault(require("@amalto/help"));
var TimePicker = (function (_super) {
__extends(TimePicker, _super);
function TimePicker(props) {
var _this = _super.call(this, props) || this;
_this.renderTimeInput = function () {
var _a = _this.props, value = _a.value, disabled = _a.disabled, minHour = _a.minHour;
var parsedTime = value && value.split(':');
var hours = parsedTime && parsedTime.length === 2
? parsedTime[0]
: minHour
? _this.pad(minHour)
: '00';
var minutes = parsedTime && parsedTime.length === 2 ? parsedTime[1] : '00';
return (React.createElement("div", { className: "combined-inputs" },
React.createElement("select", { className: "form-control input-left", value: hours, onChange: _this.handleHoursChange, disabled: disabled }, _this.state.hoursOptions.map(function (choice, idx) {
return (React.createElement("option", { key: idx, value: choice }, choice));
})),
React.createElement("span", { className: "form-control input-center", style: { fontWeight: 'bold' } }, ":"),
React.createElement("select", { className: "form-control input-right", value: minutes, onChange: _this.handleMinutesChange, disabled: disabled }, _this.state.minutesOptions.map(function (choice, idx) {
return (React.createElement("option", { key: idx, value: choice }, choice));
}))));
};
_this.handleHoursChange = function (event) {
_this.props.handleFieldChange(_this.getUpdatedTime(event.target.value), _this.props.name);
};
_this.handleMinutesChange = function (event) {
_this.props.handleFieldChange(_this.getUpdatedTime(undefined, event.target.value), _this.props.name);
};
_this.getHoursOptions = function () {
var _a = _this.props, minutesInterval = _a.minutesInterval, minHour = _a.minHour, maxHour = _a.maxHour;
var _minHour = minHour || 0;
var _maxHour = maxHour ? maxHour : 24;
if (_maxHour > 24 || _maxHour < _minHour) {
_maxHour = 24;
}
var hoursOptions = [];
for (var hours = _minHour; hours < _maxHour; hours += 1) {
hoursOptions.push(_this.pad(hours));
}
return hoursOptions;
};
_this.getMinutesOptions = function () {
var minutesInterval = _this.props.minutesInterval;
var interval = minutesInterval || 30;
var minutesOptions = [];
for (var mins = 0; mins < 60; mins += interval) {
minutesOptions.push(_this.pad(mins));
}
return minutesOptions;
};
_this.pad = function (num) {
return ('00' + num.toString()).slice(-2);
};
_this.getUpdatedTime = function (hours, minutes) {
var value = _this.props.value;
var parsedTime = value && value.split(':');
var _hours = parsedTime && parsedTime.length === 2 ? parsedTime[0] : '00';
var _minutes = parsedTime && parsedTime.length === 2 ? parsedTime[1] : '00';
if (hours) {
_hours = hours;
}
if (minutes) {
_minutes = minutes;
}
return _this.pad(_hours) + ':' + _this.pad(_minutes);
};
_this.state = {
hoursOptions: _this.getHoursOptions(),
minutesOptions: _this.getMinutesOptions(),
};
return _this;
}
TimePicker.prototype.render = function () {
var _a = this.props, name = _a.name, value = _a.value, label = _a.label, help = _a.help, containerClass = _a.containerClass, mandatory = _a.mandatory;
return (React.createElement("div", { className: (0, classnames_1.default)('form-group', containerClass, {
'mandatory pos-relative': mandatory,
}) },
label ? (React.createElement("label", null,
label,
help && React.createElement(help_1.default, { text: help }))) : null,
this.renderTimeInput(),
React.createElement("input", { type: "hidden", name: name, value: value })));
};
TimePicker.prototype.componentDidUpdate = function (prevProps) {
if (this.props.minutesInterval !== prevProps.minutesInterval ||
this.props.minHour !== prevProps.minHour ||
this.props.maxHour !== prevProps.maxHour) {
this.setState({
hoursOptions: this.getHoursOptions(),
minutesOptions: this.getMinutesOptions(),
});
}
};
return TimePicker;
}(React.Component));
exports.default = TimePicker;
//# sourceMappingURL=index.js.map