@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
52 lines • 2.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyFieldMultiSelect = PropertyFieldMultiSelect;
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 PropertyFieldMultiSelectHost_1 = tslib_1.__importDefault(require("./PropertyFieldMultiSelectHost"));
const sp_lodash_subset_1 = require("@microsoft/sp-lodash-subset");
const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
class PropertyFieldMultiSelectBuilder {
constructor(_targetProperty, _properties) {
this.type = sp_property_pane_1.PropertyPaneFieldType.Custom;
this.targetProperty = _targetProperty;
this.properties = _properties;
this.properties.onRender = this._render.bind(this);
this.properties.onDispose = this._dispose.bind(this);
}
_render(elem, context, changeCallback) {
const props = this.properties;
const element = React.createElement(PropertyFieldMultiSelectHost_1.default, Object.assign(Object.assign({}, (0, omit_1.default)(props, ['options', 'ariaPositionInSet', 'ariaSetSize'])), { options: props.options || [], onChanged: this._onChanged.bind(this) }));
ReactDOM.render(element, elem);
if (changeCallback) {
this._onChangeCallback = changeCallback;
}
}
_dispose(elem) {
ReactDOM.unmountComponentAtNode(elem);
}
_onChanged(item) {
if (this._onChangeCallback) {
// Get all the selected keys
const updateSelectedKeys = this.properties.selectedKeys ? (0, sp_lodash_subset_1.cloneDeep)(this.properties.selectedKeys) : [];
// Check if item got selected
if (item.selected) {
updateSelectedKeys.push(item.key);
}
else {
// Remove the item from the selected keys list
const itemIdx = updateSelectedKeys.indexOf(item.key);
if (itemIdx > -1) {
updateSelectedKeys.splice(itemIdx, 1);
}
}
this._onChangeCallback(this.targetProperty, updateSelectedKeys);
}
}
}
function PropertyFieldMultiSelect(targetProperty, properties) {
return new PropertyFieldMultiSelectBuilder(targetProperty, Object.assign(Object.assign({}, properties), { onRender: null, onDispose: null }));
}
//# sourceMappingURL=PropertyFieldMultiSelect.js.map