diff --git a/src/lib/components/FormChipCell/FormChip/formChip.scss b/src/lib/components/FormChipCell/FormChip/formChip.scss index 70b44364..61e67e50 100644 --- a/src/lib/components/FormChipCell/FormChip/formChip.scss +++ b/src/lib/components/FormChipCell/FormChip/formChip.scss @@ -45,6 +45,7 @@ &.chips_button { padding: 8px 7px; + width: max-content; } &-background { diff --git a/src/lib/components/FormChipCell/FormChipCell.jsx b/src/lib/components/FormChipCell/FormChipCell.jsx index e928f673..54e8dcda 100644 --- a/src/lib/components/FormChipCell/FormChipCell.jsx +++ b/src/lib/components/FormChipCell/FormChipCell.jsx @@ -21,7 +21,7 @@ import PropTypes from 'prop-types' import FormChipCellView from './FormChipCellView' -import { CHIP_OPTIONS } from '../../types' +import { CHIP_OPTIONS, VISIBLE_CHIPS_MAX_LENGTH } from '../../types' import { CLICK, TAB, TAB_SHIFT } from '../../constants' import { areArraysEqual } from '../../utils/common.util' import { checkPatternsValidity } from '../../utils/validation.util' @@ -388,6 +388,7 @@ let FormChipCell = ({ showHiddenChips={showHiddenChips} validateFields={validateFields} validationRules={validationRules} + visibleChipsMaxLength={visibleChipsMaxLength} /> @@ -408,7 +409,7 @@ FormChipCell.propTypes = { shortChips: PropTypes.bool, validationRules: PropTypes.object, validator: PropTypes.func, - visibleChipsMaxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + visibleChipsMaxLength: VISIBLE_CHIPS_MAX_LENGTH, withInitialParentWidth: PropTypes.bool } diff --git a/src/lib/components/FormChipCell/FormChipCellView.jsx b/src/lib/components/FormChipCell/FormChipCellView.jsx index 810f191c..d7b4c48f 100644 --- a/src/lib/components/FormChipCell/FormChipCellView.jsx +++ b/src/lib/components/FormChipCell/FormChipCellView.jsx @@ -25,7 +25,7 @@ import HiddenChipsBlock from './HiddenChipsBlock/HiddenChipsBlock' import TextTooltipTemplate from '../TooltipTemplate/TextTooltipTemplate' import Tooltip from '../Tooltip/Tooltip' -import { CHIP_OPTIONS } from '../../types' +import { CHIP_OPTIONS, VISIBLE_CHIPS_MAX_LENGTH } from '../../types' import { isEveryObjectValueEmpty } from '../../utils/common.util' import { uniquenessError } from './formChipCell.util' @@ -58,7 +58,8 @@ let FormChipCellView = ( showChips, showHiddenChips, validateFields, - validationRules = {} + validationRules = {}, + visibleChipsMaxLength = null }, { chipsCellRef, chipsWrapperRef, hiddenChipsCounterRef, hiddenChipsPopUpRef } ) => { @@ -72,7 +73,8 @@ let FormChipCellView = ( const wrapperClassNames = classnames( 'chips-wrapper', isEditable && 'fixed-max-width', - chips.visibleChips?.length > 0 && !chipSizeIsRecalculated && 'chip_invisible' + chips.visibleChips?.length > 0 && !chipSizeIsRecalculated && 'chip_invisible', + visibleChipsMaxLength === 'all' && 'chips-wrapper_all-visible' ) const chipClassNames = classnames( 'chip', @@ -230,7 +232,8 @@ FormChipCellView.propTypes = { showChips: PropTypes.bool.isRequired, showHiddenChips: PropTypes.bool.isRequired, validateFields: PropTypes.func.isRequired, - validationRules: PropTypes.object + validationRules: PropTypes.object, + visibleChipsMaxLength: VISIBLE_CHIPS_MAX_LENGTH } export default FormChipCellView diff --git a/src/lib/components/FormChipCell/formChipCell.scss b/src/lib/components/FormChipCell/formChipCell.scss index f72de368..684f3d50 100644 --- a/src/lib/components/FormChipCell/formChipCell.scss +++ b/src/lib/components/FormChipCell/formChipCell.scss @@ -5,6 +5,7 @@ & { height: auto; + min-width: 0; } &__wrapper { @@ -13,8 +14,14 @@ &-wrapper { display: flex; - flex-flow: row wrap; + flex-flow: row; align-items: center; + overflow: hidden; + + &.chips-wrapper_all-visible { + flex-wrap: wrap; + overflow: auto; + } } &-cell { diff --git a/src/lib/hooks/useChipCell.hook.js b/src/lib/hooks/useChipCell.hook.js index 1f5ff014..9070713a 100644 --- a/src/lib/hooks/useChipCell.hook.js +++ b/src/lib/hooks/useChipCell.hook.js @@ -118,31 +118,42 @@ export const useChipCell = (isEditMode, visibleChipsMaxLength, withInitialParent const parentSize = withInitialParentWidth ? chipCellInitialWidth : chipsCellRef.current?.getBoundingClientRect().width + const hiddenChipsCounterWidth = + (hiddenChipsCounterRef.current?.getBoundingClientRect().width ?? 0) + chipBlockMarginRight - let maxLength = 0 + let chipsLengthSum = 0 let chipIndex = 0 - const padding = 65 - - Object.values(chipsSizes).every((chipSize, index) => { - // Check if adding chipSize to maxLength exceeds parentSize - // or if adding chipSize and padding exceeds parentSize when there are multiple chips - if ( - maxLength + chipSize > parentSize || - (Object.values(chipsSizes).length > 1 && - maxLength + chipSize + chipBlockMarginRight + padding > parentSize) - ) { - chipIndex = index + const chipsSizesList = Object.values(chipsSizes) + + chipsSizesList.every((chipSize, index) => { + const chipSizeWithMargin = chipSize + chipBlockMarginRight + const isLastChip = index === chipsSizesList.length - 1 + const newChipsLengthSum = chipsLengthSum + chipSizeWithMargin + const wouldExceedWithCounter = newChipsLengthSum + hiddenChipsCounterWidth > parentSize + const wouldExceedWithoutCounter = newChipsLengthSum > parentSize + + // If we've exceeded the limit + if (wouldExceedWithCounter) { + // Special case: last chip might fit without the counter + if (isLastChip && !wouldExceedWithoutCounter) { + chipsLengthSum = newChipsLengthSum + chipIndex = chipsSizesList.length + return true + } + // Stop here - this chip doesn't fit + chipIndex = index return false - } else { - maxLength += chipSize + } - if (index === Object.values(chipsSizes).length - 1) { - chipIndex = 8 - } + // Chip fits, add it + chipsLengthSum = newChipsLengthSum - return true + if (isLastChip) { + chipIndex = chipsSizesList.length } + + return true }) setVisibleChipsCount(chipIndex) diff --git a/src/lib/types.js b/src/lib/types.js index 0b2e863d..fe7d238f 100644 --- a/src/lib/types.js +++ b/src/lib/types.js @@ -85,6 +85,11 @@ export const CHIP_OPTIONS = PropTypes.shape({ export const CHIPS = PropTypes.arrayOf(CHIP) +export const VISIBLE_CHIPS_MAX_LENGTH = PropTypes.oneOfType([ + PropTypes.number, + PropTypes.oneOf(['all']) +]) + export const POP_UP_CUSTOM_POSITION = PropTypes.shape({ element: PropTypes.shape({}), position: PropTypes.oneOf(['top-left', 'top-right', 'bottom-left', 'bottom-right']),