@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
72 lines • 4.41 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CollectionIconField = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const PropertyFieldCollectionDataHost_module_scss_1 = tslib_1.__importDefault(require("../PropertyFieldCollectionDataHost.module.scss"));
const react_1 = require("@fluentui/react");
const IconSelector_1 = require("../../../common/iconSelector/IconSelector");
class CollectionIconField extends React.Component {
constructor(props) {
super(props);
this._onSelectIconClick = () => {
this.setState({
isPanelOpen: true
});
};
this._onIconChage = (iconName) => tslib_1.__awaiter(this, void 0, void 0, function* () {
const { field } = this.props;
this.setState({
isPanelOpen: false
});
yield this.props.fOnValueChange(field.id, iconName);
const errorMessage = yield this.props.fValidation(field, iconName);
this.setState({
errorMessage: errorMessage
});
});
this._onPanelDismiss = () => {
this.setState({
isPanelOpen: false
});
};
this.state = {
isPanelOpen: false
};
}
render() {
const { field, item, renderMode } = this.props;
const iconName = item[field.id] ? item[field.id] : '';
const label = iconName || field.placeholder || field.title;
return (React.createElement(React.Fragment, null,
renderMode !== 'picker' &&
React.createElement("div", { className: `PropertyFieldCollectionData__panel__icon-field ${PropertyFieldCollectionDataHost_module_scss_1.default.iconField}` },
React.createElement(react_1.TextField, { placeholder: field.placeholder || field.title, className: PropertyFieldCollectionDataHost_module_scss_1.default.collectionDataField, value: iconName, required: field.required, onChange: (e, value) => tslib_1.__awaiter(this, void 0, void 0, function* () { return yield this.props.fOnValueChange(field.id, value); }), deferredValidationTime: field.deferredValidationTime || field.deferredValidationTime >= 0 ? field.deferredValidationTime : 200, onGetErrorMessage: (value) => tslib_1.__awaiter(this, void 0, void 0, function* () { return yield this.props.fValidation(this.props.field, value); }), disabled: this.props.disableEdit }),
React.createElement(react_1.Icon, { iconName: item[field.id] ? item[field.id] : "" })),
renderMode === 'picker' &&
React.createElement("div", { className: `PropertyFieldCollectionData__panel__icon-field ${PropertyFieldCollectionDataHost_module_scss_1.default.collectionDataField} ${PropertyFieldCollectionDataHost_module_scss_1.default.iconPicker}` },
React.createElement(react_1.ActionButton, { required: field.required, disabled: this.props.disableEdit, onClick: this._onSelectIconClick, title: label, ariaLabel: label, styles: {
root: {
padding: '0px',
textAlign: 'left',
},
icon: {
marginLeft: '0px'
},
label: {
whiteSpace: 'nowrap',
marginLeft: iconName ? 'inherit' : '0px',
display: 'block',
overflow: 'hidden',
textOverflow: 'ellipsis',
maxWidth: '80px'
}
}, iconProps: {
iconName: iconName
} }, label),
field.required && React.createElement("span", { className: PropertyFieldCollectionDataHost_module_scss_1.default.requiredField }, "*"),
React.createElement(IconSelector_1.IconSelector, { currentIcon: iconName, renderOption: 'panel', isOpen: this.state.isPanelOpen, onSave: this._onIconChage, onDismiss: this._onPanelDismiss }))));
}
}
exports.CollectionIconField = CollectionIconField;
//# sourceMappingURL=CollectionIconField.js.map