Source: ItemSelectorDialog.es.js

  1. /**
  2.  * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
  3.  *
  4.  * This library is free software; you can redistribute it and/or modify it under
  5.  * the terms of the GNU Lesser General Public License as published by the Free
  6.  * Software Foundation; either version 2.1 of the License, or (at your option)
  7.  * any later version.
  8.  *
  9.  * This library is distributed in the hope that it will be useful, but WITHOUT
  10.  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  11.  * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
  12.  * details.
  13.  */
  15. import Component from 'metal-component';
  16. import {Config} from 'metal-state';
  18. import toggleDisabled from './util/toggle_disabled';
  20. /**
  21.  * Shows a dialog and handles the selected item.
  22.  * @deprecated As of Cavanaugh (7.4.x), replaced by `openSelectionModal`
  23.  */
  24. class ItemSelectorDialog extends Component {
  26. 	/**
  27. 	 * Closes the dialog.
  28. 	 */
  29. 	close() {
  30. 		Liferay.Util.getWindow(this.eventName).hide();
  31. 	}
  33. 	/**
  34. 	 * Opens the dialog.
  35. 	 */
  36. 	open() {
  37. 		this._currentItem = null;
  38. 		this._selectedItem = null;
  40. 		const eventName = this.eventName;
  42. 		const dialogConfig = this._getDialogConfig();
  44. 		const dialogEvents = {
  45. 			on: {
  46. 				click: (event) => {
  47. 					event.domEvent.preventDefault();
  48. 				},
  49. 				visibleChange: (event) => {
  50. 					if (!event.newVal) {
  51. 						this.selectedItem = this._selectedItem;
  53. 						this.emit('selectedItemChange', {
  54. 							selectedItem: this.selectedItem,
  55. 						});
  56. 					}
  58. 					this.emit('visibleChange', {visible: event.newVal});
  59. 				},
  60. 			},
  61. 		};
  63. 		Liferay.Util.selectEntity(
  64. 			{
  65. 				dialog: {...dialogConfig, ...dialogEvents},
  66. 				eventName,
  67. 				id: eventName,
  68. 				stack: !this.zIndex,
  69. 				title: this.title,
  70. 				uri: this.url,
  71. 			},
  72. 			this._onItemSelected.bind(this)
  73. 		);
  74. 	}
  76. 	_getDialogConfig() {
  77. 		const dialogConfig = {
  78. 			constrain: true,
  79. 			cssClass: this.dialogClasses,
  80. 			destroyOnHide: true,
  81. 			modal: true,
  82. 			zIndex: this.zIndex,
  83. 		};
  85. 		if (!this.singleSelect) {
  86. 			const dialogFooter = [
  87. 				{
  88. 					cssClass: 'btn-secondary close-modal',
  89. 					id: 'cancelButton',
  90. 					label: this.buttonCancelLabel,
  91. 					on: {
  92. 						click: () => {
  93. 							this.close();
  94. 						},
  95. 					},
  96. 				},
  97. 				{
  98. 					cssClass: 'btn-primary',
  99. 					disabled: true,
  100. 					id: 'addButton',
  101. 					label: this.buttonAddLabel,
  102. 					on: {
  103. 						click: () => {
  104. 							this._selectedItem = this._currentItem;
  105. 							this.close();
  106. 						},
  107. 					},
  108. 				},
  109. 			];
  111. 			dialogConfig['toolbars.footer'] = dialogFooter;
  112. 		}
  114. 		return dialogConfig;
  115. 	}
  117. 	/**
  118. 	 * Saves the current selected item in the dialog and disables the Add
  119. 	 * button.
  120. 	 *
  121. 	 * @param {EventFacade} event The event.
  122. 	 * @private
  123. 	 */
  124. 	_onItemSelected(event) {
  125. 		const currentItem = event.data;
  127. 		if (this.singleSelect) {
  128. 			this._selectedItem = currentItem;
  129. 			this.close();
  130. 		}
  131. 		else {
  132. 			const dialog = Liferay.Util.getWindow(this.eventName);
  134. 			const addButton = dialog
  135. 				.getToolbar('footer')
  136. 				.get('boundingBox')
  137. 				.one('#addButton');
  139. 			toggleDisabled(addButton, !currentItem);
  140. 		}
  142. 		this._currentItem = currentItem;
  143. 	}
  144. }
  146. /**
  147.  * State definition.
  148.  *
  149.  * @static
  150.  * @type {!Object}
  151.  */
  152. ItemSelectorDialog.STATE = {
  154. 	/**
  155. 	 * Label for the Add button.
  156. 	 *
  157. 	 * @instance
  158. 	 * @memberof ItemSelectorDialog
  159. 	 * @type {String}
  160. 	 */
  161. 	buttonAddLabel: Config.string().value(Liferay.Language.get('add')),
  163. 	/**
  164. 	 * Label for the Cancel button.
  165. 	 *
  166. 	 * @instance
  167. 	 * @memberof ItemSelectorDialog
  168. 	 * @type {String}
  169. 	 */
  170. 	buttonCancelLabel: Config.string().value(Liferay.Language.get('cancel')),
  172. 	/**
  173. 	 * CSS classes to pass to the dialog.
  174. 	 *
  175. 	 * @instance
  176. 	 * @memberof ItemSelectorDialog
  177. 	 * @type {String}
  178. 	 */
  179. 	dialogClasses: Config.string(),
  181. 	/**
  182. 	 * Event name.
  183. 	 *
  184. 	 * @instance
  185. 	 * @memberof ItemSelectorDialog
  186. 	 * @type {String}
  187. 	 */
  188. 	eventName: Config.string().required(),
  190. 	/**
  191. 	 * The selected item(s) in the dialog.
  192. 	 *
  193. 	 * @instance
  194. 	 * @memberof ItemSelectorDialog
  195. 	 * @type {Object|Object[]}
  196. 	 */
  197. 	selectedItem: Config.oneOfType([
  198. 		Config.object(),
  199. 		Config.arrayOf(Config.object()),
  200. 	]),
  202. 	/**
  203. 	 * Enables single selection of item.
  204. 	 * @type {boolean}
  205. 	 */
  207. 	singleSelect: Config.bool().value(false),
  209. 	/**
  210. 	 * Dialog's title.
  211. 	 *
  212. 	 * @instance
  213. 	 * @memberof ItemSelectorDialog
  214. 	 * @type {String}
  215. 	 */
  216. 	title: Config.string().value(Liferay.Language.get('select-file')),
  218. 	/**
  219. 	 * URL that opens the dialog.
  220. 	 *
  221. 	 * @instance
  222. 	 * @memberof ItemSelectorDialog
  223. 	 * @type {String}
  224. 	 */
  225. 	url: Config.string().required(),
  227. 	/**
  228. 	 * Dialog's zIndex.
  229. 	 *
  230. 	 * @instance
  231. 	 * @memberof ItemSelectorDialog
  232. 	 * @type {Number}
  233. 	 */
  234. 	zIndex: Config.number(),
  235. };
  237. export default ItemSelectorDialog;