Source: TagSelector.es.js

/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 2.1 of the License, or (at your option)
 * any later version.
 *
 * This library is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
 * details.
 */

import Component from 'metal-component';
import Soy from 'metal-soy';
import {Config} from 'metal-state';

import templates from './TagSelector.soy';

/**
 * TagSelector is a temporary Component wrapping the existing
 * AUI module liferay-commerce-frontend-asset-tag-selector
 */

class TagSelector extends Component {

	/**
	 * Focuses the input field (tagInput ref) used for adding new tags.
	 * @private
	 */

	focusTagInput_() {
		this.refs.tagInput.focus();
	}

	/**
	 * Updates the calculated rule fields for `queryValues` every time a new
	 * tag entry is added or removed to the selection
	 * @protected
	 */

	onEntriesChanged_() {
		this.rule.queryValues = this.tagsSelector_.entries.keys.join();
	}

	/**
	 * @inheritDoc
	 */

	rendered() {
		this.element.addEventListener('click', this.focusTagInput_.bind(this));

		AUI().use('liferay-commerce-frontend-asset-tag-selector', () => {
			const config = {
				allowAddEntry: true,
				contentBox: this.element,
				eventName: this.eventName,
				groupIds: this.groupIds,
				hiddenInput: `#${this.refs.hiddenInput.getAttribute('id')}`,
				input: `#${this.refs.tagInput.getAttribute('id')}`,
				portletURL: this.tagSelectorURL,
				tagNames: this.rule.queryValues || '',
			};

			this.tagsSelector_ = new Liferay.AssetTaglibTagsSelector(config);

			const entries = this.tagsSelector_.entries;

			entries.after('add', this.onEntriesChanged_, this);
			entries.after('remove', this.onEntriesChanged_, this);

			this.tagsSelector_.render();
			this.element.parentNode.removeAttribute('tabindex');
		});
	}
}

TagSelector.STATE = {

	/**
	 * Name of the event that will be fired when the tag selector dialog
	 * request being closed
	 */

	eventName: Config.string().value(''),

	/**
	 * Array of group ids (sites) where tags will be searched.
	 * It defaults to an empty array, which is the current site.
	 */

	groupIds: Config.string().value(''),

	/**
	 * Id of the hidden input used to pass the selected tags
	 */

	hiddenInput: Config.string().value(''),

	/**
	 * Number used for avoiding conflicts between different
	 * instances of the component/portlet.
	 */

	index: Config.number().value(0),

	/**
	 * String used for avoiding conflicts between different
	 * instances of the component/portlet.
	 */

	namespace: Config.string().value(''),

	/**
	 * Existing information of the form.
	 * Currently only rule.queryValues is present.
	 * @prop {string[]} queryValues Tags that are already selected.
	 *  This property is updated as the user selects new tags.
	 */

	rule: Config.object().value({}),

	/**
	 * When specified, this porlet (found for the given ID) will
	 * be used for tag selection as a popup. If no ID is given,
	 * the select button will not appear.
	 */

	tagSelectorURL: Config.string().value(''),
};

Soy.register(TagSelector, templates);

export {TagSelector};
export default TagSelector;