sp-app-react
Version:
React based Controls and Utilities for building applications in SharePoint
129 lines (128 loc) • 6.31 kB
JavaScript
"use strict";
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SPDateField = void 0;
var react_1 = __importDefault(require("react"));
var react_2 = require("@fluentui/react");
var SPDisplayDate_1 = require("../SPDisplayDate");
var useSPField_1 = require("../hooks/useSPField");
var SPDateField = function (_a) {
var label = _a.label, name = _a.name, required = _a.required, disabled = _a.disabled, onSelectDate = _a.onSelectDate, showTime = _a.showTime, minDate = _a.minDate, maxDate = _a.maxDate, readOnly = _a.readOnly;
var _b = __read(useSPField_1.useSPField({ name: name }), 4), field = _b[0], meta = _b[1], helpers = _b[2], spProps = _b[3];
// const listContext = useContext(SPListContext);
// const listProps = (listContext && listContext.getFieldProps && name) ? listContext.getFieldProps(name) : {}
if (spProps && spProps.label)
label = spProps.label;
// const [field, meta, helpers] = useField(name);
var error = meta.touched && meta.error && typeof (meta.error) == 'string' ? meta.error : undefined;
var controlClass = react_2.mergeStyleSets({
control: {
margin: '0 0 15px 0',
maxWidth: '300px'
}
});
var DayPickerStrings = {
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
goToToday: 'Go to today',
prevMonthAriaLabel: 'Go to previous month',
nextMonthAriaLabel: 'Go to next month',
prevYearAriaLabel: 'Go to previous year',
nextYearAriaLabel: 'Go to next year',
closeButtonAriaLabel: 'Close date picker',
isRequiredErrorMessage: error,
invalidInputErrorMessage: 'Invalid date format.'
};
var _onSelectDate = function (date) {
if (date) {
var dateStr_1 = date.toISOString();
setTimeout(function () { helpers.setValue(dateStr_1); });
}
if (onSelectDate)
onSelectDate(date);
// setTimeout(() => {
// helpers.setValue("test");
// })
//formikContext.setFieldValue(name, "test")
};
var _onBlur = function () {
helpers.setTouched(true);
};
var onHourChange = function (event, option, index) {
if (option && typeof option.key == "number") {
var value = new Date(new Date(field.value).setHours(option.key));
helpers.setValue(value.toISOString());
}
};
var onMinuteChange = function (event, option, index) {
if (option && typeof option.key == "number") {
var value = new Date(new Date(field.value).setMinutes(option.key));
helpers.setValue(value.toISOString());
}
};
return (react_1.default.createElement(react_1.default.Fragment, null, readOnly
? react_1.default.createElement("div", null,
react_1.default.createElement(react_2.Label, null, label),
react_1.default.createElement(react_2.Text, null, field.value ? react_1.default.createElement(SPDisplayDate_1.SPDisplayDate, { isoDate: field.value, showTime: showTime }) : null))
: react_1.default.createElement(react_2.Stack, { horizontal: true, verticalAlign: "end" },
react_1.default.createElement(react_2.DatePicker, { label: label, disabled: disabled, minDate: minDate, maxDate: maxDate, className: controlClass.control, firstDayOfWeek: react_2.DayOfWeek.Sunday, strings: DayPickerStrings, placeholder: "Select a date...", ariaLabel: "Select a date", showMonthPickerAsOverlay: true, onSelectDate: _onSelectDate, isRequired: required, value: (field.value) ? new Date(field.value) : undefined, textField: {
errorMessage: error,
//name: field.name
}, onAfterMenuDismiss: _onBlur }),
showTime && field.value ? react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_2.Dropdown, { options: hourOptions, onChange: onHourChange, selectedKey: new Date(field.value).getHours(), style: { marginBottom: error ? 36 : 15 } }),
react_1.default.createElement(react_2.Dropdown, { options: minuteOptions, onChange: onMinuteChange, selectedKey: new Date(field.value).getMinutes(), style: { marginBottom: error ? 36 : 15 } })) : null)));
};
exports.SPDateField = SPDateField;
var hourOptions = [
{ key: 0, text: '12 AM' },
{ key: 1, text: '1 AM' },
{ key: 2, text: '2 AM' },
{ key: 3, text: '3 AM' },
{ key: 4, text: '4 AM' },
{ key: 5, text: '5 AM' },
{ key: 6, text: '6 AM' },
{ key: 7, text: '7 AM' },
{ key: 8, text: '8 AM' },
{ key: 9, text: '9 AM' },
{ key: 10, text: '10 AM' },
{ key: 11, text: '11 AM' },
{ key: 12, text: '12 PM' },
{ key: 13, text: '1 PM' },
{ key: 14, text: '2 PM' },
{ key: 15, text: '3 PM' },
{ key: 16, text: '4 PM' },
{ key: 17, text: '5 PM' },
{ key: 18, text: '6 PM' },
{ key: 19, text: '7 PM' },
{ key: 20, text: '8 PM' },
{ key: 21, text: '9 PM' },
{ key: 22, text: '10 PM' },
{ key: 23, text: '11 PM' }
];
var minuteOptions = [
{ key: 0, text: '00' },
{ key: 15, text: '15' },
{ key: 30, text: '30' },
{ key: 45, text: '45' },
];