@up-group-ui/react-controls
Version:
Up shared react controls
151 lines • 7.81 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var ContextMenu_1 = require("../../Display/ContextMenu");
var SvgIcon_1 = (0, tslib_1.__importDefault)(require("../../Display/SvgIcon"));
var Box_1 = (0, tslib_1.__importDefault)(require("../../Containers/Box"));
var typestyle_1 = require("typestyle");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var utils_1 = require("../../../Common/utils");
var eventListener_1 = require("../../../Common/utils/eventListener");
var UpTimePicker = (function (_super) {
(0, tslib_1.__extends)(UpTimePicker, _super);
function UpTimePicker(p, c) {
var _this = _super.call(this, p, c) || this;
_this.hourContextMenuId = "hour-time-picker-" + (0, utils_1.generateId)();
_this.minuteContextMenuId = "minute-time-picker-" + (0, utils_1.generateId)();
_this.setHour = function (e, selectedOption) {
_this.onchangeHour(selectedOption.value);
};
_this.setMinute = function (e, selectedOption) {
_this.onchangeMin(selectedOption.value);
};
_this.onFocusMinute = function (e) {
_this.setState({ focusedMinute: true });
};
_this.onchangeHourEvent = function (e) {
_this.onchangeHour(e.target.value);
};
_this.onchangeHour = function (value) {
var hour = Number(value);
if (isNaN(hour)) {
hour = 0;
}
else if (hour < 0) {
hour = 23;
}
else if (hour > 23) {
hour = 0;
}
_this.setState({ hour: hour }, _this.sendChange);
};
_this.onKeyDownHour = function (e) {
if (e.keyCode == 38) {
_this.onchangeHour(Number(e.target.value) + 1);
}
else if (e.keyCode == 40) {
_this.onchangeHour(Number(e.target.value) - 1);
}
};
_this.onchangeMinEvent = function (e) {
_this.onchangeMin(e.target.value);
};
_this.onchangeMin = function (value) {
var minute = Number(value);
if (isNaN(minute)) {
minute = 0;
}
else if (minute < 0) {
minute = 59;
}
else if (minute > 59) {
minute = 0;
}
_this.setState({ minute: minute }, _this.sendChange);
};
_this.onKeyDownMin = function (e) {
if (e.keyCode == 38) {
_this.onchangeMin(Number(e.target.value) + 1);
}
else if (e.keyCode == 40) {
_this.onchangeMin(Number(e.target.value) - 1);
}
};
_this.sendChange = function () {
if (_this.props.onChange != null) {
var value = _this.state.hour + ':' + _this.state.minute;
_this.props.onChange((0, eventListener_1.eventFactory)(_this.props.name, value), value);
}
};
_this.state = {
hour: _this.props.value ? parseInt(_this.props.value.split(':')[0]) : 0,
minute: _this.props.value ? parseInt(_this.props.value.split(':')[1]) : 0,
};
return _this;
}
UpTimePicker.prototype.render = function () {
var _this = this;
var minuteSteps = [];
var currentStep = 0;
while (currentStep < 60) {
minuteSteps.push(currentStep);
currentStep += this.props.minuteStep;
}
var hourSteps = [];
currentStep = 1;
while (currentStep < 24) {
hourSteps.push(currentStep);
currentStep += 1;
}
var wrapperStyles = (0, typestyle_1.style)({
$nest: {
'& div': {
display: 'inline-block',
},
'& .up-time-separator': {
marginLeft: 10,
marginRight: 10,
},
'& input, & .up-time-separator': {
fontSize: '14px',
color: '#354052',
},
'& svg, & svg g, & svg path, & svg polygon, & svg polyline': {
fill: '#354052',
},
},
});
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Box_1.default, (0, tslib_1.__assign)({ className: (0, classnames_1.default)(wrapperStyles, 'up-timepicker up-form-control'), flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-end', style: {
borderColor: this.props.hasError === true ? 'red' : 'inherit',
borderBottomWidth: '1px',
borderBottomStyle: 'solid',
width: '160px',
padding: '2px',
display: 'flex',
} }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: this.state.hour.toString(), onKeyDown: this.onKeyDownHour, onChange: this.onchangeHourEvent, style: {
border: 'none',
width: '2em',
textAlign: 'center',
} }, void 0), (0, jsx_runtime_1.jsx)(ContextMenu_1.UpContextMenuTrigger, (0, tslib_1.__assign)({ rightClick: false, id: this.hourContextMenuId, holdToDisplay: 1000 }, { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: 'caret-down', style: { cursor: 'pointer' } }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'up-time-separator' }, { children: ":" }), void 0), (0, jsx_runtime_1.jsx)("input", { type: "text", value: this.state.minute.toString(), onKeyDown: this.onKeyDownMin, onChange: this.onchangeMinEvent, onFocus: this.onFocusMinute, tabIndex: this.props.tabIndex, style: {
border: 'none',
width: '2em',
textAlign: 'center',
} }, void 0), (0, jsx_runtime_1.jsx)(ContextMenu_1.UpContextMenuTrigger, (0, tslib_1.__assign)({ rightClick: false, id: this.minuteContextMenuId, holdToDisplay: 1000 }, { children: (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: 'caret-down', style: { cursor: 'pointer' } }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(SvgIcon_1.default, { iconName: 'timer', style: {
marginLeft: 10,
marginTop: 5,
} }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(ContextMenu_1.UpContextMenu, (0, tslib_1.__assign)({ id: this.minuteContextMenuId }, { children: minuteSteps.map(function (step, i) {
return ((0, jsx_runtime_1.jsx)(ContextMenu_1.UpContextMenuItem, (0, tslib_1.__assign)({ onClick: _this.setMinute, data: { value: step } }, { children: step }), i));
}) }), void 0), (0, jsx_runtime_1.jsx)(ContextMenu_1.UpContextMenu, (0, tslib_1.__assign)({ id: this.hourContextMenuId }, { children: hourSteps.map(function (step, i) {
return ((0, jsx_runtime_1.jsx)(ContextMenu_1.UpContextMenuItem, (0, tslib_1.__assign)({ onClick: _this.setHour, data: { value: step } }, { children: step }), i));
}) }), void 0)] }, void 0));
};
UpTimePicker.defaultProps = {
minuteStep: 5,
withIcon: true,
};
return UpTimePicker;
}(react_1.default.Component));
exports.default = UpTimePicker;
//# sourceMappingURL=UpTimePicker.js.map