gd-sprest-js
Version:
SharePoint 2013/Online js components.
216 lines (215 loc) • 7.32 kB
JavaScript
;
var _this = this;
Object.defineProperty(exports, "__esModule", { value: true });
var _1 = require(".");
/**
* Dropdown
*/
exports.Dropdown = function (props) {
var isMulti = typeof (props.multi) === "boolean" ? props.multi : false;
var isSorted = typeof (props.isUnsorted) === "boolean" ? !props.isUnsorted : true;
// Method to find the option
var findOption = function (options, value) {
// Parse the options
for (var i = 0; i < options.length; i++) {
var option = options[i];
// See if this is the target item, and return it
if (option.value == value) {
// Return the option
return option;
}
// See if options exist
if (option.options) {
// Find the option
var subOption = findOption(option.options, value);
if (subOption) {
return subOption;
}
}
}
// Option not found
return null;
};
// Method to get the toggle element
var get = function () {
// Returns the toggle element
return props.el.querySelector(".ms-ContextualMenu");
};
// Method to get the fabric component
var getFabricComponent = function () {
// Return the menu
return _menu;
};
// Method to set the options
var setOptions = function (options) {
// Clear the textbox value
_tb.setValue("");
// Set the value
value = options;
// Render the options
renderValues(value);
// Return this object
return _this;
};
// Method to render the values
var renderValues = function (values) {
if (values === void 0) { values = []; }
// See if we are sorting the dropdown values
if (isSorted) {
// Sort the values
values = values.sort(function (a, b) {
if (a.text < b.text) {
return -1;
}
if (a.text > b.text) {
return 1;
}
return 0;
});
}
// Render the personas
var elPersonas = _1.Personas({
el: props.el.querySelector(".value"),
userInfo: toUserInfo(values),
onCancel: function (userInfo) {
// Parse the values
for (var i = 0; i < value.length; i++) {
// See if this is the target value
if (value[i].text == userInfo.DisplayText) {
// Remove this value
value.splice(i, 1);
}
}
}
});
// See if this is a single-select and a value exists
if (!isMulti && elPersonas.children.length > 0) {
var tbPos = _tb.get()._textField.getBoundingClientRect();
var personaPos = elPersonas.children[0].getBoundingClientRect();
var offset = tbPos.top - personaPos.top;
// Ensure the textbox is visible
if (tbPos.top == 0 && tbPos.bottom == 0 && tbPos.height == 0) {
// Default the offset
offset = -45;
}
// Update the position
elPersonas.children[0].style.top = offset + "px";
}
};
// Method to convert the options to menu options
var toItems = function (options) {
var items = [];
// Ensure options exist
if (options && options.length > 0) {
// Parse the options
for (var i = 0; i < options.length; i++) {
var option = options[i];
// Append the item
items.push({
data: option.data,
menu: option.options ? toItems(option.options) : null,
text: option.text,
value: option.value
});
}
}
// Return the items
return items;
};
// Method to convert the options to user information
var toUserInfo = function (options) {
var userInfo = [];
// Ensure options exists
if (options && options.length > 0) {
// Parse the values
for (var i = 0; i < options.length; i++) {
// Append the persona
userInfo.push({
DisplayText: options[i].text,
Key: options[i].value
});
}
}
// Return the user information
return userInfo;
};
// Render the dropdown
props.el.innerHTML = [
'<div class="dropdown ' + (props.className || '') + '">',
'<div class="textfield"></div>',
'<div class="menu"></div>',
'<div class="value"></div>',
'</div>'
].join('\n');
// Render the textfield
var _tb = _1.TextField({
el: props.el.querySelector(".textfield"),
disable: true,
label: props.label,
required: props.required,
type: _1.TextFieldTypes.Underline
});
// Create the contextual menu
var _menu = _1.ContextualMenu({
className: (props.className || "") + " ddl-menu",
el: props.el.querySelector(".menu"),
elTarget: props.el.querySelector(".textfield"),
items: toItems(props.options),
onClick: function (ev, item) {
// Get the option
var option = findOption(props.options, item.value);
if (option) {
// Parse the current values
for (var i = 0; i < value.length; i++) {
// Ensure this value isn't already selected
if (value[i].value == option.value) {
// Close the menu
_menu.close();
return;
}
}
// See if this is a multi-select
if (isMulti) {
// Append the value
value.push(option);
}
else {
// Set the value
value = [option];
}
// Render the values
renderValues(value);
// See if a change event exists
if (props.onChange) {
// Call the event
props.onChange(value);
}
}
// Close the menu
_menu.close();
}
});
// See if the value exists
var value = [];
if (props.value) {
var values = typeof (props.value) === "string" ? [props.value] : props.value;
// Parse the values
for (var i = 0; i < values.length; i++) {
// Find the option
var option = findOption(props.options, values[i]);
if (option) {
// Append the option
value.push(option);
}
}
// Render the values
renderValues(value);
}
// Return the dropdown
return {
get: get,
getFabricComponent: getFabricComponent,
getValue: function () { return value; },
setOptions: setOptions
};
};