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) {
  56. 		defaultValue = 0;
  57. 	}
  58. 	else if (type === PROPERTY_TYPES.DOUBLE) {
  59. 		defaultValue = '0.00';
  60. 	}
  62. 	return defaultValue;
  63. }
  65. /**
  66.  * Filters properties by label
  67.  */
  68. function filterProperties(properties, searchValue) {
  69. 	return properties.filter(property => {
  70. 		const propertyLabel = property.label.toLowerCase();
  72. 		return propertyLabel.indexOf(searchValue.toLowerCase()) !== -1;
  73. 	});
  74. }
  76. const CriteriaSidebarCollapse = ({
  77. 	onCollapseClick,
  78. 	propertyGroups,
  79. 	propertyKey,
  80. 	searchValue,
  81. }) => {
  82. 	const _handleClick = (key, editing) => () => onCollapseClick(key, editing);
  84. 	return (
  85. 		<ul className="list-unstyled sidebar-collapse-groups">
  86. 			{propertyGroups.map(propertyGroup => {
  87. 				const key = propertyGroup.propertyKey;
  89. 				const active = key === propertyKey;
  90. 				const properties = propertyGroup
  91. 					? propertyGroup.properties
  92. 					: [];
  94. 				const filteredProperties = searchValue
  95. 					? filterProperties(properties, searchValue)
  96. 					: properties;
  98. 				const activeClasses = getCN({
  99. 					active,
  100. 				});
  102. 				const propertyListClasses = getCN(
  103. 					'properties-list',
  104. 					activeClasses
  105. 				);
  107. 				return (
  108. 					<li
  109. 						className={`sidebar-collapse-${propertyGroup.propertyKey}`}
  110. 						key={key}
  111. 					>
  112. 						<div
  113. 							className="sidebar-collapse-header-root"
  114. 							onClick={_handleClick(key, active)}
  115. 						>
  116. 							<a className="d-flex justify-content-between sidebar-collapse-header">
  117. 								{propertyGroup.name}
  119. 								{searchValue && (
  120. 									<ClayBadge
  121. 										className="ml-auto mr-2"
  122. 										displayType="secondary"
  123. 										label={filteredProperties.length}
  124. 									/>
  125. 								)}
  127. 								<span className="collapse-icon">
  128. 									<ClayIcon
  129. 										className={activeClasses}
  130. 										symbol="angle-right"
  131. 									/>
  132. 								</span>
  133. 							</a>
  134. 						</div>
  135. 						<ul className={propertyListClasses}>
  136. 							{active && filteredProperties.length === 0 && (
  137. 								<li className="empty-message">
  138. 									{Liferay.Language.get(
  139. 										'no-results-were-found'
  140. 									)}
  141. 								</li>
  142. 							)}
  144. 							{active &&
  145. 								filteredProperties.length > 0 &&
  146. 								filteredProperties.map(
  147. 									({label, name, options, type}) => {
  148. 										const defaultValue = getDefaultValue({
  149. 											label,
  150. 											name,
  151. 											options,
  152. 											type,
  153. 										});
  155. 										return (
  156. 											<CriteriaSidebarItem
  157. 												className={`color--${key}`}
  158. 												defaultValue={defaultValue}
  159. 												key={name}
  160. 												label={label}
  161. 												name={name}
  162. 												propertyKey={key}
  163. 												type={type}
  164. 											/>
  165. 										);
  166. 									}
  167. 								)}
  168. 						</ul>
  169. 					</li>
  170. 				);
  171. 			})}
  172. 		</ul>
  173. 	);
  174. };
  176. CriteriaSidebarCollapse.propTypes = {
  177. 	onCollapseClick: PropTypes.func,
  178. 	propertyGroups: PropTypes.arrayOf(propertyGroupShape),
  179. 	propertyKey: PropTypes.string,
  180. 	searchValue: PropTypes.string,
  181. };
  183. export default CriteriaSidebarCollapse;