Skip to content

Commit

Permalink
feat: 🔥 add EDSelect
Browse files Browse the repository at this point in the history 
add EDSelect
  • Loading branch information
tal-rofe committed Aug 16, 2022
1 parent 921005a commit 605000c
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 101 deletions.
8 changes: 1 addition & 7 deletions apps/frontend/src/assets/icons.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,7 @@ const icons = {
arrowRight: [
'13 22',
`
<path d="M1 20.5L11.1237 11.7568C11.5855 11.358 11.5855 10.642 11.1237 10.2432L0.999999 1.5" stroke-width="2" stroke-linecap="round"/>
`,
],
arrowDown: [
'13 8',
`
<path d="M1 1L5.76285 6.19583C6.15918 6.6282 6.84082 6.6282 7.23715 6.19583L12 1" stroke-linecap="round"/>
<path d="M1 20.5L11.1237 11.7568C11.5855 11.358 11.5855 10.642 11.1237 10.2432L0.999999 1.5"/>
`,
],
};
Expand Down
78 changes: 29 additions & 49 deletions apps/frontend/src/components/ui/EDSelect/EDSelect.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,61 @@
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
border-radius: 10px;
box-shadow: (0 11.4496px 15.6131px #0000000d);
inset-inline-end: 0;
width: 200px;

.selectedOptionsVisible {
.buttonContainer {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 100%;
padding: 10px 14px;
white-space: nowrap;
background-color: #fefefe;
border: 2px solid #e7e7e7;

&--tooltipIsVisible {
border-start-start-radius: 10px;
border-start-end-radius: 10px;
}

&--tooltipIsInvisible {
border-radius: 10px;
}

&__text {
width: inherit;
overflow: hidden;
font-size: 1.5rem;
font-weight: 360;
color: #4b4a65;
text-overflow: ellipsis;
white-space: no-wrap;
}

.moreOptionsButton {
&__arrowDown {
width: 11px;
height: 8px;
fill: transparent;
stroke: #202428;
}

&__arrowRight {
width: 8px;
height: 11px;
fill: transparent;
stroke: #202428;
&__arrow {
width: auto;
height: 8px;
fill: transparent;
stroke: #202428;
stroke-linecap: round;
stroke-width: 2;
transition: transform 0.3s ease;

&--tooltipIsVisible {
transform: rotate(90deg);
}
}
}

.selectedOptionsInvisible {
position: absolute;
top: 40px;
z-index: 1;
.optionsContainer {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
padding: 10px 14px;
white-space: nowrap;
background-color: #fefefe;
border-radius: 0 0 10px 10px;

&__divider {
width: 100%;
margin-bottom: 9px;
border: 1px solid #e7e7e7;
}
border: 2px solid #e7e7e7;
border-top: none;
border-end-start-radius: 10px;
border-end-end-radius: 10px;

&__option {
width: calc(100% - 20px);
overflow: hidden;
font-size: 1.5rem;
font-weight: 360;
color: #4b4a65;
text-align: left;
text-overflow: ellipsis;
white-space: no-wrap;
}

&__option:not(:last-child) {
margin-bottom: 5px;
}
}
}
16 changes: 8 additions & 8 deletions apps/frontend/src/components/ui/EDSelect/EDSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import { useClickOutside } from '@/hooks/click-outside';
import EdSelectView from './EDSelect.view';

interface IProps {
readonly defaultValue?: string;
readonly className?: string;
readonly placeholder?: string;
readonly options: string[];
readonly selectedOptionIndex: number | null;
readonly optionsList: string[];
readonly onSelect: (index: number) => void;
readonly onOptionSelect: (index: number) => void;
}

const EDSelect: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
Expand All @@ -19,21 +19,21 @@ const EDSelect: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
toggleVisibility: toggleTooltipVisibility,
} = useClickOutside<HTMLDivElement>(false);

const onSelect = (index: number) => {
props.onSelect(index);
const onOptionSelect = (index: number) => {
props.onOptionSelect(index);
toggleTooltipVisibility();
};

return (
<EdSelectView
defaultValue={props.defaultValue}
className={props.className}
placeholder={props.placeholder}
options={props.options}
selectedOptionIndex={props.selectedOptionIndex}
optionsList={props.optionsList}
tooltopRef={tooltopRef}
isTooltipVisible={isTooltipVisible}
toggleTooltipVisibility={toggleTooltipVisibility}
onSelect={onSelect}
onOptionSelect={onOptionSelect}
/>
);
};
Expand Down
67 changes: 30 additions & 37 deletions apps/frontend/src/components/ui/EDSelect/EDSelect.view.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,55 @@
import React from 'react';

import { concatDiverseClasses } from '@/utils/component';
import { concatClasses, concatDiverseClasses } from '@/utils/component';
import EDSvg from '@/ui/EDSvg';

import classes from './EDSelect.module.scss';

interface IProps {
readonly defaultValue?: string;
readonly className?: string;
readonly placeholder?: string;
readonly options: string[];
readonly selectedOptionIndex: number | null;
readonly optionsList: string[];
readonly tooltopRef: React.RefObject<HTMLDivElement>;
readonly isTooltipVisible: boolean;
readonly toggleTooltipVisibility: () => void;
readonly onSelect: (index: number) => void;
readonly onOptionSelect: (index: number) => void;
}

const EDSelectView: React.FC<IProps> = (props: React.PropsWithChildren<IProps>) => {
const visibleClass = concatDiverseClasses(classes['selectedOptionsVisible'], props.className);
const inVisibleClass = concatDiverseClasses(classes['selectedOptionsInvisible'], props.className);
const containerClasses = concatDiverseClasses(classes['container'], props.className);

const buttonContainerClasses = concatClasses(
classes,
'buttonContainer',
props.isTooltipVisible ? 'buttonContainer--tooltipIsVisible' : 'buttonContainer--tooltipIsInvisible',
);

const selectArrowIconClasses = concatClasses(
classes,
'buttonContainer__arrow',
props.isTooltipVisible ? 'buttonContainer__arrow--tooltipIsVisible' : null,
);

const selectText = props.selectedOptionIndex
? props.options[props.selectedOptionIndex]
: props.placeholder ?? props.options[0];

return (
<div className={classes['container']}>
<div
className={visibleClass}
style={{
borderRadius: props.isTooltipVisible ? '10px 10px 0 0' : '10px',
}}
>
<span className={classes['selectedOptionsVisible__text']}>
{props.selectedOptionIndex !== null
? props.optionsList[props.selectedOptionIndex]
: props.defaultValue}
</span>
<div className={containerClasses}>
<button className={buttonContainerClasses} type="button" onClick={props.toggleTooltipVisibility}>
<span className={classes['buttonContainer__text']}>{selectText}</span>

<button
className={classes['moreOptionsButton']}
type="button"
onClick={props.toggleTooltipVisibility}
>
<EDSvg
className={
props.isTooltipVisible
? classes['moreOptionsButton__arrowDown']
: classes['moreOptionsButton__arrowRight']
}
name={props.isTooltipVisible ? 'arrowDown' : 'arrowRight'}
/>
</button>
</div>
<EDSvg className={selectArrowIconClasses} name="arrowRight" />
</button>
{props.isTooltipVisible && (
<div ref={props.tooltopRef} className={inVisibleClass}>
{props.optionsList.map((option, index) => (
<div ref={props.tooltopRef} className={classes['optionsContainer']}>
{props.options.map((option, index) => (
<button
key={index}
className={classes['selectedOptionsInvisible__option']}
className={classes['optionsContainer__option']}
type="button"
onClick={() => props.onSelect(index)}
onClick={() => props.onOptionSelect(index)}
>
{option}
</button>
Expand Down

0 comments on commit 605000c

Please sign in to comment.