Source: components/criteria_sidebar/CriteriaSidebarCollapse.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 ClayBadge from '@clayui/badge';
  16. import ClayIcon from '@clayui/icon';
  17. import getCN from 'classnames';
  18. import dateFns from 'date-fns';
  19. import PropTypes from 'prop-types';
  20. import React from 'react';
  22. import {PROPERTY_TYPES} from '../../utils/constants.es';
  23. import {propertyGroupShape} from '../../utils/types.es';
  24. import {jsDatetoYYYYMMDD} from '../../utils/utils.es';
  25. import CriteriaSidebarItem from './CriteriaSidebarItem.es';
  27. const INPUT_DATE_FORMAT = 'YYYY-MM-DD';
  29. /**
  30.  * Returns a default value for a property provided.
  31.  * @param {Object} property
  32.  * @returns {string}
  33.  */
  34. function getDefaultValue(property) {
  35. 	const {options, type} = property;
  37. 	let defaultValue = '';
  39. 	if (type === PROPERTY_TYPES.STRING && options && options.length) {
  40. 		defaultValue = options[0].value;
  41. 	}
  42. 	else if (type === PROPERTY_TYPES.DATE) {
  43. 		defaultValue = jsDatetoYYYYMMDD(new Date());
  44. 	}
  45. 	else if (type === PROPERTY_TYPES.DATE_TIME) {
  46. 		const simpleDate = jsDatetoYYYYMMDD(new Date());
  48. 		defaultValue = dateFns
  49. 			.parse(simpleDate, INPUT_DATE_FORMAT)
  50. 			.toISOString();
  51. 	}
  52. 	else if (type === PROPERTY_TYPES.BOOLEAN) {
  53. 		defaultValue = 'true';
  54. 	}
  55. 	else if (type === PROPERTY_TYPES.INTEGER && options && options.length) {
  56. 		defaultValue = options[0].value;
  57. 	}
  58. 	else if (type === PROPERTY_TYPES.INTEGER) {
  59. 		defaultValue = 0;
  60. 	}
  61. 	else if (type === PROPERTY_TYPES.DOUBLE && options && options.length) {
  62. 		defaultValue = options[0].value;
  63. 	}
  64. 	else if (type === PROPERTY_TYPES.DOUBLE) {
  65. 		defaultValue = '0.00';
  66. 	}
  68. 	return defaultValue;
  69. }
  71. /**
  72.  * Filters properties by label
  73.  */
  74. function filterProperties(properties, searchValue) {
  75. 	return properties.filter((property) => {
  76. 		const propertyLabel = property.label.toLowerCase();
  78. 		return propertyLabel.indexOf(searchValue.toLowerCase()) !== -1;
  79. 	});
  80. }
  82. const CriteriaSidebarCollapse = ({
  83. 	onCollapseClick,
  84. 	propertyGroups,
  85. 	propertyKey,
  86. 	searchValue,
  87. }) => {
  88. 	const _handleClick = (key, editing) => () => onCollapseClick(key, editing);
  90. 	return (
  91. 		<ul className="list-unstyled sidebar-collapse-groups">
  92. 			{propertyGroups.map((propertyGroup) => {
  93. 				const key = propertyGroup.propertyKey;
  95. 				const active = key === propertyKey;
  96. 				const properties = propertyGroup
  97. 					? propertyGroup.properties
  98. 					: [];
  100. 				const filteredProperties = searchValue
  101. 					? filterProperties(properties, searchValue)
  102. 					: properties;
  104. 				const activeClasses = getCN({
  105. 					active,
  106. 				});
  108. 				const propertyListClasses = getCN(
  109. 					'properties-list',
  110. 					activeClasses
  111. 				);
  113. 				return (
  114. 					<li
  115. 						className={`sidebar-collapse-${propertyGroup.propertyKey}`}
  116. 						key={key}
  117. 					>
  118. 						<div
  119. 							className="sidebar-collapse-header-root"
  120. 							onClick={_handleClick(key, active)}
  121. 						>
  122. 							<a className="d-flex justify-content-between sidebar-collapse-header">
  123. 								{propertyGroup.name}
  125. 								{searchValue && (
  126. 									<ClayBadge
  127. 										className="ml-auto mr-2"
  128. 										displayType="secondary"
  129. 										label={filteredProperties.length}
  130. 									/>
  131. 								)}
  133. 								<span className="collapse-icon">
  134. 									<ClayIcon
  135. 										className={activeClasses}
  136. 										symbol="angle-right"
  137. 									/>
  138. 								</span>
  139. 							</a>
  140. 						</div>
  141. 						<ul className={propertyListClasses}>
  142. 							{active && filteredProperties.length === 0 && (
  143. 								<li className="empty-message">
  144. 									{Liferay.Language.get(
  145. 										'no-results-were-found'
  146. 									)}
  147. 								</li>
  148. 							)}
  150. 							{active &&
  151. 								filteredProperties.length > 0 &&
  152. 								filteredProperties.map(
  153. 									({label, name, options, type}) => {
  154. 										const defaultValue = getDefaultValue({
  155. 											label,
  156. 											name,
  157. 											options,
  158. 											type,
  159. 										});
  161. 										return (
  162. 											<CriteriaSidebarItem
  163. 												className={`color--${key}`}
  164. 												defaultValue={defaultValue}
  165. 												key={name}
  166. 												label={label}
  167. 												name={name}
  168. 												propertyKey={key}
  169. 												type={type}
  170. 											/>
  171. 										);
  172. 									}
  173. 								)}
  174. 						</ul>
  175. 					</li>
  176. 				);
  177. 			})}
  178. 		</ul>
  179. 	);
  180. };
  182. CriteriaSidebarCollapse.propTypes = {
  183. 	onCollapseClick: PropTypes.func,
  184. 	propertyGroups: PropTypes.arrayOf(propertyGroupShape),
  185. 	propertyKey: PropTypes.string,
  186. 	searchValue: PropTypes.string,
  187. };
  189. export default CriteriaSidebarCollapse;