META-INF.resources.components.item_finder.AddOrCreate.js Maven / Gradle / Ivy

Go to download
/**
 * SPDX-FileCopyrightText: (c) 2000 Liferay, Inc. https://liferay.com
 * SPDX-License-Identifier: LGPL-2.1-or-later OR LicenseRef-Liferay-DXP-EULA-2.0.0-2023-06
 */

import ClayButton from '@clayui/button';
import ClayIcon from '@clayui/icon';
import ClayList from '@clayui/list';
import {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar';
import ClayTable from '@clayui/table';
import {getFDSInternalCellRenderer} from '@liferay/frontend-data-set-web';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React, {Component} from 'react';

import {getValueFromItem} from '../../utilities/index';
import Expose from './Expose';

function Item(props) {
	return (
		
			{props.fields.map((field, i) => {
				const value = getValueFromItem(props.itemData, field.fieldName);

				const cellRenderer = getFDSInternalCellRenderer(
					field.contentRenderer
				);

				const CellRendererComponent = cellRenderer.component;

				return (
					
						
					
				);
			})}

			
				
					{Liferay.Language.get('select')}
				
			
		
	);
}

class AddOrCreateBase extends Component {
	constructor(props) {
		super(props);
		this.state = {
			focus: false,
			selected: 0,
		};
	}

	focus() {
		this.setState({
			focus: true,
		});
		if (this.props.onFocusIn) {
			this.props.onFocusIn();
		}
	}

	handleFocusIn(_e) {
		clearTimeout(this._timeoutID);
	}

	render() {
		return (
			 this.handleFocusIn(event)}
			>
				
					{this.props.panelHeaderLabel}
				

				
					
						
							
									this.props.onInputSearchChange(
										event.target.value
									)
								}
								onFocus={(event) => this.focus(event)}
								placeholder={this.props.inputPlaceholder}
								ref={this.input}
								type="text"
								value={this.props.inputSearchValue}
							/>

							
								{this.props.inputSearchValue && (
									
								)}
							
						
					
				

				{this.props.active &&
					(this.props.inputSearchValue ||
						(this.props.items && !!this.props.items.length)) && (
						
							
								{this.props.itemCreation &&
									this.props.inputSearchValue && (
										<>
											
												{this.props.createNewItemLabel}
											
											
												
													
														"
														{
															this.props
																.inputSearchValue
														}
														"
													
												

												
													
														{Liferay.Language.get(
															'create-new'
														)}
													
												
											
										
									)}

								{this.props.items &&
									!this.props.items.length &&
									!this.props.itemCreation && (
										
											{Liferay.Language.get(
												'no-items-were-found'
											)}
										
									)}
							

							{this.props.items && !!this.props.items.length ? (
								<>
									{this.props.itemCreation && (
										
											{this.props.titleLabel}
										
									)}
									
										
											{this.props.items.map((item, i) => (
												
														this.props.onItemSelected(
															item[
																this.props
																	.itemsKey
															]
														)
													}
													selected={this.props.selectedItems.includes(
														item[
															this.props.itemsKey
														]
													)}
												/>
											))}
										
									
									{this.props.itemsCount > 0 && (
										 {
												this.props.updateCurrentPage(1);
												this.props.updatePageSize(
													deltaVal
												);
											}}
											onPageChange={
												this.props.updateCurrentPage
											}
											totalItems={this.props.itemsCount}
										/>
									)}
								
							) : null}
						
					)}
			
		);
	}
}

AddOrCreateBase.propTypes = {
	createNewItemLabel: PropTypes.string,
	currentPage: PropTypes.number,
	deltas: PropTypes.arrayOf(
		PropTypes.shape({
			label: PropTypes.number,
		})
	),
	inputPlaceholder: PropTypes.string,
	inputSearchValue: PropTypes.string,
	itemsCount: PropTypes.number,
	itemsKey: PropTypes.string,
	onAddItem: PropTypes.func,
	onCreateItem: PropTypes.func,
	onFocusIn: PropTypes.func,
	onFocusOut: PropTypes.func,
	onInputSearchChange: PropTypes.func,
	onItemSelected: PropTypes.func,
	onSubmit: PropTypes.func,
	pageSize: PropTypes.number,
	panelHeaderLabel: PropTypes.string,
	schema: PropTypes.arrayOf(
		PropTypes.shape({
			contentRenderer: PropTypes.string,
			fieldName: PropTypes.oneOfType([
				PropTypes.string,
				PropTypes.arrayOf(PropTypes.string),
			]).isRequired,
		})
	),
	selectedItems: PropTypes.arrayOf(
		PropTypes.oneOfType([PropTypes.number, PropTypes.string])
	),
	titleLabel: PropTypes.string,
	updateCurrentPage: PropTypes.func,
	updatePageSize: PropTypes.func,
};

AddOrCreateBase.defaultProps = {
	createNewItemLabel: Liferay.Language.get('create-new-item'),
	deltas: [
		{
			label: 5,
		},
		{
			label: 10,
		},
		{
			label: 20,
		},
		{
			label: 30,
		},
		{
			label: 50,
		},
		{
			label: 75,
		},
	],
	inputPlaceholder: Liferay.Language.get('find-an-option-or-create-one'),
	inputSearchValue: '',
	panelHeaderLabel: Liferay.Language.get('add-new'),
	titleLabel: Liferay.Language.get('select-an-existing-one'),
};

export default React.forwardRef((props, ref) => {
	const [active, setActive] = React.useState(false);

	function closeAndSubmit(event) {
		props.onSubmit(event);
		setActive(false);
	}

	return (
		 setActive(false)}>
			 setActive(true)}
				onFocusOut={() => setActive(false)}
				onSubmit={closeAndSubmit}
			/>
		
	);
});