Skip to content

Commit

Permalink
Impl [Select] Add tooltip to the Select component (#113)
Browse files Browse the repository at this point in the history
  • Loading branch information
@illia-prokopchuk
illia-prokopchuk authored Mar 6, 2023
1 parent 529ca6c commit cd7f422
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 120 deletions.
247 changes: 127 additions & 120 deletions src/lib/components/FormSelect/FormSelect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const FormSelect = ({
required,
search,
selectedItemAction,
tooltip,
withoutBorder,
withSelectedIcon
}) => {
Expand Down Expand Up @@ -185,131 +186,135 @@ const FormSelect = ({
return (
<Field name={name} validate={validateField}>
{({ input, meta }) => (
<div
data-testid="select"
ref={selectRef}
className={`form-field-select ${className}`}
onClick={toggleOpen}
>
{label && (
<div className={selectLabelClassName}>
<label data-testid="select-label">
{label}
{meta.error && <span className="form-field__label-mandatory"> *</span>}
</label>
</div>
)}
<div data-testid="select-header" className={selectWrapperClassNames}>
<div className="form-field__control">
{!hideSelectedOption && (
<div data-testid="selected-option" className="form-field__select">
<span className={selectValueClassName}>{getSelectValue()}</span>
</div>
)}
</div>
<div className="form-field__icons">
{input.value && selectedItemAction && (
<>
{selectedItemAction.handler ? (
<Tooltip template={<TextTooltipTemplate text={selectedItemAction.tooltip} />}>
<button
onClick={(event) => {
if (selectedItemAction.confirm) {
setConfirmDialogOpen(true)
} else {
selectedItemAction.handler(input.value)
}
<Tooltip className="select-tooltip" template={<TextTooltipTemplate text={tooltip} />} hidden={!tooltip}>
<div
data-testid="select"
ref={selectRef}
className={`form-field-select ${className}`}
onClick={toggleOpen}
>
{label && (
<div className={selectLabelClassName}>
<label data-testid="select-label">
{label}
{meta.error && <span className="form-field__label-mandatory"> *</span>}
</label>
</div>
)}
<div data-testid="select-header" className={selectWrapperClassNames}>
<div className="form-field__control">
{!hideSelectedOption && (
<div data-testid="selected-option" className="form-field__select">
<span className={selectValueClassName}>{getSelectValue()}</span>
</div>
)}
</div>
<div className="form-field__icons">
{input.value && selectedItemAction && (
<>
{selectedItemAction.handler ? (
<Tooltip template={<TextTooltipTemplate text={selectedItemAction.tooltip} />}>
<button
onClick={(event) => {
if (selectedItemAction.confirm) {
setConfirmDialogOpen(true)
} else {
selectedItemAction.handler(input.value)
}

event.stopPropagation()
}}
>
{selectedItemAction.icon}
</button>
</Tooltip>
) : (
<span>{selectedItemAction.icon}</span>
)}
</>
)}
<span>
<Caret className="form-field__caret" />
</span>
event.stopPropagation()
}}
>
{selectedItemAction.icon}
</button>
</Tooltip>
) : (
<span>{selectedItemAction.icon}</span>
)}
</>
)}
<span>
<Caret className="form-field__caret" />
</span>
</div>
</div>
</div>
{isConfirmDialogOpen && (
<ConfirmDialog
cancelButton={{
handler: () => {
setConfirmDialogOpen(false)
},
label: 'Cancel',
variant: TERTIARY_BUTTON
}}
closePopUp={() => {
setConfirmDialogOpen(false)
}}
confirmButton={{
handler: () => {
selectedItemAction.handler(input.value)
{isConfirmDialogOpen && (
<ConfirmDialog
cancelButton={{
handler: () => {
setConfirmDialogOpen(false)
},
label: 'Cancel',
variant: TERTIARY_BUTTON
}}
closePopUp={() => {
setConfirmDialogOpen(false)
},
label: selectedItemAction.confirm.btnConfirmLabel,
variant: selectedItemAction.confirm.btnConfirmType
}}
header={selectedItemAction.confirm.title}
isOpen={isConfirmDialogOpen}
message={selectedItemAction.confirm.message}
/>
)}
{isOpen && (
<PopUpDialog
className="form-field form-field-select__options-list"
headerIsHidden
customPosition={{
element: selectRef,
position: 'bottom-right'
}}
style={{ width: `${dropdownWidth}px` }}
>
<div
data-testid="select-body"
className="options-list__body"
onClick={handleCloseSelectBody}
}}
confirmButton={{
handler: () => {
selectedItemAction.handler(input.value)
setConfirmDialogOpen(false)
},
label: selectedItemAction.confirm.btnConfirmLabel,
variant: selectedItemAction.confirm.btnConfirmType
}}
header={selectedItemAction.confirm.title}
isOpen={isConfirmDialogOpen}
message={selectedItemAction.confirm.message}
/>
)}
{isOpen && (
<PopUpDialog
className="form-field form-field-select__options-list"
headerIsHidden
customPosition={{
element: selectRef,
position: 'bottom-right'
}}
style={{ width: `${dropdownWidth}px` }}
>
{search && (
<div className="options-list__search">
<input
type="text"
placeholder="Search..."
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
/>
</div>
)}
{options
.filter((option) => {
return !search || option.label.toLowerCase().includes(searchValue.toLowerCase())
})
.map((option) => {
return (
<SelectOption
item={option}
key={option.id}
name={name}
onClick={(selectedOption) => {
handleSelectOptionClick(selectedOption, option)
}}
multiple={multiple}
selectedId={!multiple ? input.value : ''}
withSelectedIcon={withSelectedIcon}
<div
data-testid="select-body"
className="options-list__body"
onClick={handleCloseSelectBody}
>
{search && (
<div className="options-list__search">
<input
type="text"
placeholder="Search..."
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
/>
)
})}
</div>
</PopUpDialog>
)}
<input {...input} type="hidden" />
</div>
</div>
)}
{options
.filter((option) => {
return (
!search || option.label.toLowerCase().includes(searchValue.toLowerCase())
)
})
.map((option) => {
return (
<SelectOption
item={option}
key={option.id}
name={name}
onClick={(selectedOption) => {
handleSelectOptionClick(selectedOption, option)
}}
multiple={multiple}
selectedId={!multiple ? input.value : ''}
withSelectedIcon={withSelectedIcon}
/>
)
})}
</div>
</PopUpDialog>
)}
<input {...input} type="hidden" />
</div>
</Tooltip>
)}
</Field>
)
Expand All @@ -323,6 +328,7 @@ FormSelect.defaultProps = {
label: '',
onClick: null,
search: false,
tooltip: '',
multiple: false,
withoutBorder: false,
withSelectedIcon: true
Expand All @@ -338,6 +344,7 @@ FormSelect.propTypes = {
onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
options: SELECT_OPTIONS.isRequired,
search: PropTypes.bool,
tooltip: PropTypes.string,
multiple: PropTypes.bool,
withoutBorder: PropTypes.bool,
withSelectedIcon: PropTypes.bool
Expand Down
4 changes: 4 additions & 0 deletions src/lib/components/FormSelect/formSelect.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
@import '../../scss/colors';
@import '../../scss/shadows';

.select-tooltip {
width: 100%;
}

.form-field-select {
width: 100%;

Expand Down

0 comments on commit cd7f422

Please sign in to comment.