@pnp/spfx-controls-react
Version:
Reusable React controls for SharePoint Framework solutions
216 lines • 14.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LocationPicker = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var ILocationPicker_1 = require("./ILocationPicker");
var LocationPicker_module_scss_1 = tslib_1.__importDefault(require("./LocationPicker.module.scss"));
var sp_http_1 = require("@microsoft/sp-http");
var Text_1 = require("@fluentui/react/lib/Text");
var Persona_1 = require("@fluentui/react/lib/Persona");
var ComboBox_1 = require("@fluentui/react/lib/ComboBox");
var Icon_1 = require("@fluentui/react/lib/Icon");
var Button_1 = require("@fluentui/react/lib/Button");
var strings = tslib_1.__importStar(require("ControlStrings"));
var sp_lodash_subset_1 = require("@microsoft/sp-lodash-subset");
var LocationPicker = /** @class */ (function (_super) {
tslib_1.__extends(LocationPicker, _super);
/**
* Constructor method
*/
function LocationPicker(props) {
var _this = _super.call(this, props) || this;
_this._token = null;
_this.focusRef = null; // eslint-disable-line @typescript-eslint/no-explicit-any
_this.onRenderOption = function (item) {
var _a = item, text = _a.text, locationItem = _a.locationItem;
if (locationItem.EntityType === "Custom") {
return React.createElement(Persona_1.Persona, { text: text, imageAlt: locationItem.EntityType, secondaryText: locationItem.DisplayName, size: Persona_1.PersonaSize.size40, onRenderInitials: _this.customRenderInitials });
}
else
return React.createElement(Persona_1.Persona, { text: text, imageAlt: locationItem.EntityType, secondaryText: _this.getLocationText(locationItem, "full"), size: Persona_1.PersonaSize.size40, onRenderInitials: _this.customRenderInitials });
};
_this.getMainContent = function () {
var _a = _this.state, options = _a.options, selectedItem = _a.selectedItem, currentMode = _a.currentMode;
var _b = _this.props, className = _b.className, disabled = _b.disabled, placeholder = _b.placeholder, errorMessage = _b.errorMessage;
switch (currentMode) {
case ILocationPicker_1.Mode.empty:
return React.createElement(ComboBox_1.ComboBox, { className: className, disabled: disabled, placeholder: placeholder, allowFreeform: true, autoComplete: "on", options: options, onRenderOption: _this.onRenderOption, calloutProps: { className: LocationPicker_module_scss_1.default.callout }, buttonIconProps: { iconName: "MapPin" }, useComboBoxAsMenuWidth: true, openOnKeyboardFocus: true, scrollSelectedToTop: true, isButtonAriaHidden: true, onInput: function (e) { return _this.getLocatios(e.target.value); }, onChange: _this.onChange, errorMessage: errorMessage });
case ILocationPicker_1.Mode.editView:
if (selectedItem.EntityType === "Custom") {
return React.createElement("div", { ref: _this.focusRef, "data-selection-index": 0, "data-is-focusable": true, role: "listitem", className: LocationPicker_module_scss_1.default.pickerItemContainer, onBlur: _this.onBlur, tabIndex: 0 },
React.createElement(Persona_1.Persona, { "data-is-focusable": "false", imageAlt: selectedItem.EntityType, tabIndex: 0, text: selectedItem.DisplayName, title: "Location", className: LocationPicker_module_scss_1.default.persona, size: Persona_1.PersonaSize.size40, onRenderInitials: _this.customRenderInitials }),
React.createElement(Button_1.IconButton, { "data-is-focusable": "false", tabIndex: 0, iconProps: { iconName: "Cancel" }, title: "Clear", ariaLabel: "Clear", disabled: disabled, className: LocationPicker_module_scss_1.default.closeButton, onClick: _this.onIconButtonClick }));
}
return React.createElement("div", { ref: _this.focusRef, "data-selection-index": 0, "data-is-focusable": true, role: "listitem", className: LocationPicker_module_scss_1.default.pickerItemContainer, onBlur: _this.onBlur, tabIndex: 0 },
React.createElement(Persona_1.Persona, { "data-is-focusable": "false", imageAlt: selectedItem.EntityType, tabIndex: 0, text: selectedItem.DisplayName, title: "Location", className: LocationPicker_module_scss_1.default.persona, secondaryText: _this.getLocationText(selectedItem, "full"), size: Persona_1.PersonaSize.size40, onRenderInitials: _this.customRenderInitials }),
!disabled ?
React.createElement(Button_1.IconButton, { "data-is-focusable": "false", tabIndex: 0, iconProps: { iconName: "Cancel" }, title: "Clear", ariaLabel: "Clear", disabled: disabled, className: LocationPicker_module_scss_1.default.closeButton, onClick: _this.onIconButtonClick }) : null);
case ILocationPicker_1.Mode.view:
if (selectedItem.EntityType === 'Custom') {
return React.createElement("div", { className: LocationPicker_module_scss_1.default.locationAddressContainer, onClick: _this.onClick },
React.createElement("div", { className: LocationPicker_module_scss_1.default.locationContainer, tabIndex: 0 },
React.createElement("div", { className: LocationPicker_module_scss_1.default.locationDisplayName }, selectedItem.DisplayName)));
}
return React.createElement("div", { className: LocationPicker_module_scss_1.default.locationAddressContainer, onClick: _this.onClick },
React.createElement("div", { className: LocationPicker_module_scss_1.default.locationContainer, tabIndex: 0 },
React.createElement("div", { className: LocationPicker_module_scss_1.default.locationDisplayName }, selectedItem.DisplayName),
React.createElement("div", { className: LocationPicker_module_scss_1.default.locationContent },
React.createElement("div", { className: LocationPicker_module_scss_1.default.locationAddress }, _this.getLocationText(selectedItem, "street")),
React.createElement("div", { className: LocationPicker_module_scss_1.default.locationAddress }, _this.getLocationText(selectedItem, "noStreet")))));
}
};
_this.getLocationText = function (item, mode) {
if (!item.Address) {
return '';
}
var address = item.Address;
switch (mode) {
case "street":
return address.Street || "";
case "noStreet":
return "".concat(address.City ? address.City + ", " : '').concat(address.State ? address.State + ", " : "").concat(address.CountryOrRegion || "");
}
return "".concat(address.Street ? address.Street + ", " : '').concat(address.City ? address.City + ", " : "").concat(address.State ? address.State + ", " : '').concat(address.CountryOrRegion || "");
};
_this.onIconButtonClick = function () {
_this.setState({ currentMode: ILocationPicker_1.Mode.empty, selectedItem: null });
if (_this.props.onChange) {
_this.props.onChange(null);
}
};
_this.onClick = function () {
_this.setState({ currentMode: ILocationPicker_1.Mode.editView }, function () {
if (_this.focusRef.current !== null)
_this.focusRef.current.focus();
});
};
_this.onBlur = function (ev) {
try {
if (ev !== null && ev.relatedTarget && ev.relatedTarget.title !== "Location" && ev.relatedTarget.title !== "Clear") { // eslint-disable-line dot-notation
_this.setState({ currentMode: ILocationPicker_1.Mode.view });
}
}
catch ( /* no-op; */_a) { /* no-op; */ }
};
_this.onChange = function (ev, option) {
var locationOption = option;
_this.setState({ selectedItem: locationOption.locationItem, currentMode: ILocationPicker_1.Mode.editView }, function () {
if (_this.focusRef.current !== null)
_this.focusRef.current.focus();
});
if (_this.props.onChange) {
_this.props.onChange(locationOption.locationItem);
}
};
_this.getToken().then(function () { }).catch(function () { });
_this.focusRef = React.createRef();
if (props.defaultValue) {
_this.state = {
options: [],
currentMode: ILocationPicker_1.Mode.view,
searchText: null,
isCalloutVisible: true,
selectedItem: props.defaultValue,
};
}
else {
_this.state = {
options: [],
currentMode: ILocationPicker_1.Mode.empty,
searchText: null,
isCalloutVisible: true,
selectedItem: props.defaultValue,
};
}
return _this;
}
LocationPicker.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
if (!(0, sp_lodash_subset_1.isEqual)(nextProps.defaultValue, this.props.defaultValue)) {
if (nextProps.defaultValue) {
this.setState({ selectedItem: nextProps.defaultValue, currentMode: ILocationPicker_1.Mode.view });
}
}
};
/**
* Renders the LocationPicker controls with Office UI Fabric
*/
LocationPicker.prototype.render = function () {
var label = this.props.label;
return (React.createElement("div", null,
label ? React.createElement(Text_1.Text, null, label) : null,
this.getMainContent()));
};
LocationPicker.prototype.customRenderInitials = function (props) {
if (props.imageAlt === "Custom")
return React.createElement(Icon_1.FontIcon, { "aria-label": "Poi", iconName: "Poi", style: { fontSize: "14pt" } });
else
return React.createElement(Icon_1.FontIcon, { "aria-label": "EMI", iconName: "EMI", style: { fontSize: "14pt" } });
};
LocationPicker.prototype.getToken = function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var requestHeaders, spOpts, response, PrimaryQueryResult;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
requestHeaders = new Headers();
requestHeaders.append("Content-type", "application/json");
requestHeaders.append("Cache-Control", "no-cache");
spOpts = {
body: "{\"resource\":\"https://outlook.office365.com\"}",
headers: requestHeaders
};
return [4 /*yield*/, this.props.context.spHttpClient.post("".concat(this.props.context.pageContext.web.absoluteUrl, "/_api/SP.OAuth.Token/Acquire"), sp_http_1.SPHttpClient.configurations.v1, spOpts)];
case 1:
response = _a.sent();
return [4 /*yield*/, response.json()];
case 2:
PrimaryQueryResult = _a.sent();
this._token = PrimaryQueryResult.access_token;
return [2 /*return*/];
}
});
});
};
LocationPicker.prototype.getLocatios = function (searchText) {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var optionsForCustomRender_1, requestHeaders, spOpts, response1, json, error_1;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
_a.trys.push([0, 3, , 4]);
optionsForCustomRender_1 = [];
requestHeaders = new Headers();
requestHeaders.append("Content-type", "application/json");
requestHeaders.append("Cache-Control", "no-cache");
requestHeaders.append("Authorization", "Bearer ".concat(this._token));
spOpts = {
body: "{\"QueryConstraint\":{\"Query\":\"".concat(searchText, "\"},\"LocationProvider\":32,\"BingMarket\":\"en-IN\"}"),
headers: requestHeaders
};
return [4 /*yield*/, this.props.context.httpClient.post("https://outlook.office365.com/SchedulingB2/api/v1.0/me/findmeetinglocations", sp_http_1.HttpClient.configurations.v1, spOpts)];
case 1:
response1 = _a.sent();
return [4 /*yield*/, response1.json()];
case 2:
json = _a.sent();
json.MeetingLocations.forEach(function (v, i) {
var loc = v["MeetingLocation"]; // eslint-disable-line dot-notation
optionsForCustomRender_1.push({ text: v.MeetingLocation["DisplayName"], key: i, locationItem: loc }); // eslint-disable-line dot-notation
});
optionsForCustomRender_1.push({ text: strings.customDisplayName, key: 7, locationItem: { DisplayName: searchText, EntityType: "Custom" } });
this.setState({ options: optionsForCustomRender_1 });
return [3 /*break*/, 4];
case 3:
error_1 = _a.sent();
console.log("Error get Items", error_1);
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
});
};
return LocationPicker;
}(React.Component));
exports.LocationPicker = LocationPicker;
//# sourceMappingURL=LocationPicker.js.map