@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
50 lines • 2.31 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CollectionDropdownField = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("@fluentui/react");
const PropertyFieldCollectionDataHost_module_scss_1 = tslib_1.__importDefault(require("../PropertyFieldCollectionDataHost.module.scss"));
const CollectionDropdownField = ({ field, item, disableEdit, fOnValueChange, fValidation }) => {
const [options, setOptions] = React.useState();
const [errorMessage, setErrorMessage] = React.useState();
const onValueChange = React.useCallback((value) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
if (!field) {
return;
}
if (fOnValueChange) {
yield fOnValueChange(field.id, value);
}
if (fValidation) {
const error = yield fValidation(field, value);
setErrorMessage(error);
}
}), [field, fOnValueChange, fValidation]);
React.useEffect(() => {
if (!field || !field.options) {
return;
}
let newOptions = [];
if (typeof (field.options) === 'function') {
if (!item) {
return;
}
newOptions = field.options(field.id, item);
}
else {
newOptions = field.options.slice();
}
setOptions(newOptions);
}, [field, item, field.options]);
React.useEffect(() => {
if (item && field) {
onValueChange(item[field.id]).then(() => { }).catch(() => { });
}
}, []);
if (!field || !item) {
return React.createElement(React.Fragment, null);
}
return React.createElement(react_1.Dropdown, { placeHolder: field.placeholder || field.title, options: options, selectedKey: item[field.id], required: field.required, disabled: disableEdit, onChange: (e, i) => { onValueChange(i.key).then(() => { }).catch(() => { }); }, onRenderOption: field.onRenderOption, className: `PropertyFieldCollectionData__panel__dropdown-field ${errorMessage ? PropertyFieldCollectionDataHost_module_scss_1.default.invalidField : ''}` });
};
exports.CollectionDropdownField = CollectionDropdownField;
//# sourceMappingURL=CollectionDropdownField.js.map