@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
106 lines • 4.57 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyFieldDateTimePicker = PropertyFieldDateTimePicker;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const ReactDom = tslib_1.__importStar(require("react-dom"));
const sp_property_pane_1 = require("@microsoft/sp-property-pane");
const DateTimeUtilities_1 = require("@fluentui/react/lib/DateTimeUtilities");
const PropertyFieldDateTimePickerHost_1 = tslib_1.__importDefault(require("./PropertyFieldDateTimePickerHost"));
const IPropertyFieldDateTimePicker_1 = require("./IPropertyFieldDateTimePicker");
/**
* Represents a PropertyFieldDateTimePicker object
*/
class PropertyFieldDateTimePickerBuilder {
/**
* Constructor
*/
constructor(_targetProperty, _properties) {
// Properties defined by IPropertyPaneField
this.type = sp_property_pane_1.PropertyPaneFieldType.Custom;
this.disabled = false;
this.deferredValidationTime = 200;
this.showLabels = true;
this.render = this.render.bind(this);
this.targetProperty = _properties.targetProperty;
this.properties = _properties;
this.label = _properties.label;
this.initialDate = _properties.initialDate;
this.properties.onDispose = this.dispose;
this.properties.onRender = this.render;
this.onPropertyChange = _properties.onPropertyChange;
this.formatDate = _properties.formatDate;
this.customProperties = _properties.properties;
this.key = _properties.key;
this.onGetErrorMessage = _properties.onGetErrorMessage;
if (_properties.deferredValidationTime) {
this.deferredValidationTime = _properties.deferredValidationTime;
}
if (typeof _properties.disabled !== 'undefined') {
this.disabled = _properties.disabled;
}
if (typeof _properties.dateConvention !== 'undefined') {
this.dateConvention = _properties.dateConvention;
}
else {
this.dateConvention = IPropertyFieldDateTimePicker_1.DateConvention.DateTime;
}
if (typeof _properties.timeConvention !== 'undefined') {
this.timeConvention = _properties.timeConvention;
}
else {
this.timeConvention = IPropertyFieldDateTimePicker_1.TimeConvention.Hours24;
}
if (typeof _properties.firstDayOfWeek !== 'undefined') {
this.firstDayOfWeek = _properties.firstDayOfWeek;
}
else {
this.firstDayOfWeek = DateTimeUtilities_1.DayOfWeek.Sunday;
}
this.showLabels = _properties.showLabels;
}
/**
* Renders the DatePicker field content
*/
render(elem, ctx, changeCallback) {
// Construct the JSX properties
const element = React.createElement(PropertyFieldDateTimePickerHost_1.default, {
label: this.label,
disabled: this.disabled,
initialDate: this.initialDate,
targetProperty: this.targetProperty,
formatDate: this.formatDate,
dateConvention: this.dateConvention,
timeConvention: this.timeConvention,
firstDayOfWeek: this.firstDayOfWeek,
onDispose: this.dispose,
onRender: this.render,
onPropertyChange: this.onPropertyChange,
onChange: changeCallback,
properties: this.customProperties,
key: this.key,
onGetErrorMessage: this.onGetErrorMessage,
deferredValidationTime: this.deferredValidationTime,
showLabels: this.showLabels
});
// Calls the REACT content generator
ReactDom.render(element, elem);
}
/**
* Disposes the current object
*/
dispose(elem) {
ReactDom.unmountComponentAtNode(elem);
}
}
/**
* Helper method to create the customer field on the PropertyPane.
* @param targetProperty - Target property the custom field is associated to.
* @param properties - Strongly typed custom field properties.
*/
function PropertyFieldDateTimePicker(targetProperty, properties) {
// Calls the PropertyFieldDateTimePicker builder object
// This object will simulate a PropertyFieldCustom to manage his rendering process
return new PropertyFieldDateTimePickerBuilder(targetProperty, Object.assign(Object.assign({}, properties), { targetProperty: targetProperty, onDispose: null, onRender: null }));
}
//# sourceMappingURL=PropertyFieldDateTimePicker.js.map