@talend/react-forms
Version:
React forms library based on json schema form.
236 lines (227 loc) • 7.83 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ListViewWidget = void 0;
var _react = require("react");
var _reactI18next = require("react-i18next");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _constants = require("../../../constants");
var _translate = _interopRequireDefault(require("../../../translate"));
var _generateId = require("../../Message/generateId");
var _FieldTemplate = _interopRequireDefault(require("../FieldTemplate"));
var _ListView = require("./ListView.utils");
var _reactComponents = require("@talend/react-components");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const DISPLAY_MODE_DEFAULT = 'DISPLAY_MODE_DEFAULT';
const DISPLAY_MODE_SEARCH = 'DISPLAY_MODE_SEARCH';
const DEFAULT_ITEM_HEIGHT = 33;
class ListViewWidget extends _react.Component {
constructor(props) {
super(props);
const {
t
} = props;
this.defaultHeaderActions = [{
id: `${props.id}-search`,
icon: 'talend-search',
label: t('LISTVIEW_WIDGET_SEARCH', {
defaultValue: 'Search for specific values'
}),
onClick: this.switchToSearchMode.bind(this)
}];
this.defaultSearchHeaderActions = [{
id: 'abort',
icon: 'talend-cross',
label: t('LISTVIEW_WIDGET_REMOVE', {
defaultValue: 'Remove filter'
}),
onClick: this.switchToDefaultMode.bind(this)
}];
this.state = {
...(0, _ListView.initItems)(props.schema, props.value, null, this.onToggleItem.bind(this)),
getItemHeight: () => DEFAULT_ITEM_HEIGHT,
headerDefault: this.defaultHeaderActions,
onAddKeyDown: this.onInputKeyDown.bind(this),
onInputChange: this.onInputChange.bind(this),
onToggleAll: this.onToggleAll.bind(this)
};
}
/**
* On new schema : we redefine the items
* On new value : we update the check status
*/
componentDidUpdate(prevProps) {
const {
schema: prevSchema,
value: prevValue
} = prevProps;
const {
schema: nextSchema,
value: nextValue
} = this.props;
if (prevSchema !== nextSchema) {
this.setState(oldState => (0, _ListView.initItems)(nextSchema, nextValue, oldState.searchCriteria, this.onToggleItem.bind(this)));
} else if (prevValue !== nextValue) {
this.setState(oldState => (0, _ListView.updateItems)(oldState.items, nextValue, oldState.searchCriteria));
}
}
/**
* Propagate a ListView value change
* @param { Object } event The event that triggered the change
* @param { Array } newValue The new Value
*/
onChange(event, newValue) {
const value = newValue.length ? newValue : undefined;
const payload = {
schema: this.props.schema,
value
};
this.props.onChange(event, payload);
this.props.onFinish(event, payload);
}
/**
* Search input change
* @param { Object } event The change event
* @param { Array } value
*/
onInputChange(event, {
value
}) {
clearTimeout(this.timerSearch);
this.timerSearch = setTimeout(() => {
this.setState(oldState => (0, _ListView.getItemsProps)(oldState.items, value));
}, 400);
}
/**
* Search input ENTER/ESC management
* @param { Object } event The keydown event
*/
onInputKeyDown(event) {
if (event.key === 'Enter') {
event.stopPropagation();
event.preventDefault();
} else if (event.key === 'Esc' || event.key === 'Escape') {
clearTimeout(this.timerSearch);
event.stopPropagation();
event.preventDefault();
this.switchToDefaultMode();
}
}
/**
* Toggle an item
* @param { Object } event The toggle event
* @param { Object } changedItem The item to toggle
*/
onToggleItem(event, changedItem) {
const value = this.state.items.filter(item => {
if (changedItem === item) {
return !item.checked;
}
return item.checked;
}).map(item => item.value);
this.onChange(event, value);
}
/**
* Toggle all displayed items
* - Filtered items : toggle only the displayed items
* - No filter : toggle all items
* @param { Object } event the toggle event
*/
onToggleAll(event) {
let checkedItems;
if (this.state.searchCriteria && this.state.toggleAllChecked) {
// User uncheck with filter : we remove filtered items from checked list
checkedItems = this.state.items.filter(item => item.checked && !this.state.displayedItems.includes(item));
} else if (this.state.searchCriteria && !this.state.toggleAllChecked) {
// User check with filter : we add filtered items in checked list
checkedItems = this.state.items.filter(item => item.checked || this.state.displayedItems.includes(item));
} else if (this.state.toggleAllChecked) {
// User uncheck all items
checkedItems = [];
} else {
// User check all items
checkedItems = this.state.items;
}
this.onChange(event, checkedItems.map(item => item.value));
}
/**
* Switch header to search mode
*/
switchToSearchMode() {
this.setState({
headerInput: this.defaultSearchHeaderActions,
displayMode: DISPLAY_MODE_SEARCH
});
}
/**
* Switch header to default mode.
* Reset display to no filter
*/
switchToDefaultMode() {
this.setState(oldState => ({
...(0, _ListView.getItemsProps)(oldState.items),
headerInput: this.defaultHeaderActions,
displayMode: DISPLAY_MODE_DEFAULT
}));
}
render() {
const descriptionId = (0, _generateId.generateDescriptionId)(this.props.id);
const errorId = (0, _generateId.generateErrorId)(this.props.id);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldTemplate.default, {
description: this.props.schema.description,
descriptionId: descriptionId,
errorId: errorId,
errorMessage: this.props.errorMessage,
id: this.props.id,
isValid: this.props.isValid,
required: this.props.schema.required,
labelProps: this.props.schema.labelProps,
valueIsUpdating: this.props.valueIsUpdating,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactComponents.ListView, {
...this.state,
id: this.props.id,
items: this.state.displayedItems,
t: this.props.t,
containerProps: {
'aria-describedby': `${descriptionId} ${errorId}`
},
dataTest: this.props.schema.dataTest
})
});
}
}
exports.ListViewWidget = ListViewWidget;
ListViewWidget.defaultProps = {
value: [],
t: (0, _translate.default)()
};
// eslint-disable-next-line no-undef
if (process.env.NODE_ENV !== 'production') {
ListViewWidget.propTypes = {
id: _propTypes.default.string,
isValid: _propTypes.default.bool,
errorMessage: _propTypes.default.string,
onChange: _propTypes.default.func.isRequired,
onFinish: _propTypes.default.func.isRequired,
schema: _propTypes.default.shape({
description: _propTypes.default.string,
disabled: _propTypes.default.bool,
placeholder: _propTypes.default.string,
required: _propTypes.default.bool,
title: _propTypes.default.string,
labelProps: _propTypes.default.object,
dataTest: _propTypes.default.string,
titleMap: _propTypes.default.arrayOf(_propTypes.default.shape({
name: _propTypes.default.string.isRequired,
value: _propTypes.default.string.isRequired
}))
}),
value: _propTypes.default.arrayOf(_propTypes.default.string),
valueIsUpdating: _propTypes.default.bool,
t: _propTypes.default.func
};
}
var _default = exports.default = (0, _reactI18next.withTranslation)(_constants.I18N_DOMAIN_FORMS)(ListViewWidget);
//# sourceMappingURL=ListView.component.js.map