@talend/react-forms
Version:
React forms library based on json schema form.
253 lines (252 loc) • 6.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _FieldTemplate = _interopRequireDefault(require("../FieldTemplate"));
var _generateId = require("../../Message/generateId");
var _constants = require("./constants");
var _reactComponents = require("@talend/react-components");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
class ResourcePicker extends _react.Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.onFilter = this.onFilter.bind(this);
this.nameFilterChanged = this.nameFilterChanged.bind(this);
this.stateFilterChanged = this.stateFilterChanged.bind(this);
this.sortOptionChanged = this.sortOptionChanged.bind(this);
this.isItemSelected = this.isItemSelected.bind(this);
this.onRowClick = this.onRowClick.bind(this);
this.state = {
filters: {
name: '',
certified: false,
favorites: false,
selection: false,
selected: []
}
};
}
componentDidMount() {
this.onFilter();
}
onChange(event, value) {
const {
schema
} = this.props;
this.props.onChange(event, {
schema,
value
});
this.props.onFinish(event, {
schema,
value
});
}
onFilter(event) {
this.setState({
isLoading: true
}, () => {
this.onTrigger(event, _constants.FILTER, {
filters: this.state.filters
}).then(data => this.setState(data)).finally(() => this.setState({
isLoading: false
}));
});
}
onTrigger(event, eventName, payload) {
const {
schema,
properties,
errors
} = this.props;
const trigger = schema.triggers && schema.triggers.find(trig => trig.onEvent === eventName);
if (trigger) {
return this.props.onTrigger(event, {
trigger,
schema,
properties,
errors,
...payload
});
}
return Promise.resolve();
}
onRowClick(event, {
id
}) {
let selected = [...this.state.filters.selected];
const index = selected.findIndex(i => i === id);
const {
multi
} = this.props.schema;
if (!multi) {
selected = [];
}
if (index > -1) {
if (multi || !this.props.schema.required) {
selected.splice(index, 1);
} else {
// in single selection if the resource is already selected do nothing
return;
}
} else {
selected.push(id);
}
const value = multi ? selected : selected[0];
this.setState(oldState => ({
filters: {
...oldState.filters,
selected
}
}));
this.onChange(event, value);
this.onTrigger(event, _constants.CHANGE, {
value
});
}
isItemSelected({
id
}) {
return this.state.filters.selected.includes(id);
}
stateFilterChanged(option, value) {
this.setState(state => ({
...state,
filters: {
...state.filters,
[option]: value
}
}), () => this.onFilter(null));
}
nameFilterChanged(event) {
const {
target
} = event;
if (target) {
this.setState(state => ({
...state,
filters: {
...state.filters,
name: target.value || ''
}
}), () => this.onFilter(null));
}
}
sortOptionChanged(option, value) {
this.setState(state => ({
...state,
filters: {
...state.filters,
orders: {
...state.orders,
[option]: value
}
}
}), () => this.onFilter(null, this.state));
}
render() {
const {
orders
} = this.state.filters;
const {
id,
schema,
isValid,
errorMessage
} = this.props;
const descriptionId = (0, _generateId.generateDescriptionId)(id);
const errorId = (0, _generateId.generateErrorId)(id);
const toolbar = {
name: {
label: schema.placeholder,
value: this.state.filters.name,
onChange: this.nameFilterChanged
},
state: {
onChange: this.stateFilterChanged
},
sort: {
onChange: this.sortOptionChanged,
orders
}
};
if (schema.options) {
const {
filters,
sort
} = schema.options;
if (filters) {
filters.forEach(filter => {
toolbar.state[filter] = this.state.filters[filter];
});
// only display the filter which are defined in the schema
toolbar.state.types = [...filters];
}
if (sort) {
// only display the filter which are defined in the schema
toolbar.sort.types = [...sort];
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldTemplate.default, {
description: schema.description,
descriptionId: descriptionId,
errorId: errorId,
errorMessage: errorMessage,
id: id,
isValid: isValid,
label: schema.title,
labelProps: schema.labelProps,
required: schema.required,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactComponents.ResourcePicker, {
...this.props,
...this.state,
toolbar: toolbar,
isSelected: this.isItemSelected,
onRowClick: this.onRowClick
// eslint-disable-next-line jsx-a11y/aria-proptypes
,
"aria-invalid": !isValid,
"aria-required": schema.required,
"aria-describedby": `${descriptionId} ${errorId}`
})
});
}
}
ResourcePicker.displayName = 'ResourcePicker field';
if (process.env.NODE_ENV !== 'production') {
ResourcePicker.propTypes = {
id: _propTypes.default.string,
isValid: _propTypes.default.bool,
errorMessage: _propTypes.default.string,
onChange: _propTypes.default.func.isRequired,
onFinish: _propTypes.default.func.isRequired,
onTrigger: _propTypes.default.func,
properties: _propTypes.default.object,
errors: _propTypes.default.object,
schema: _propTypes.default.shape({
schema: _propTypes.default.shape({
type: _propTypes.default.string
}),
description: _propTypes.default.string,
options: _propTypes.default.shape({
filters: _propTypes.default.array,
sort: _propTypes.default.array
}),
placeholder: _propTypes.default.string,
required: _propTypes.default.bool,
title: _propTypes.default.string,
labelProps: _propTypes.default.object,
triggers: _propTypes.default.arrayOf(_propTypes.default.shape({
onEvent: _propTypes.default.string
})),
multi: _propTypes.default.bool
})
};
}
var _default = exports.default = ResourcePicker;
//# sourceMappingURL=ResourcePicker.component.js.map