Skip to content

Commit

Permalink
Fix select
Browse files Browse the repository at this point in the history
  • Loading branch information
Paul Naszalyi committed Dec 5, 2024
1 parent 629b208 commit cebd9d1
Show file tree
Hide file tree
Showing 7 changed files with 138 additions and 160 deletions.
100 changes: 51 additions & 49 deletions examples/react-template/screens/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,45 +18,47 @@ export const SelectView = (): JSX.Element => {
<Spacer size={20} />
<Title level={TitleLevels.FOUR}>Not nullable</Title>
<Select
custom
disabled
name='option'
label='label'
id='id'
name="option"
label="label"
id="id"
iconName={IconName.ALERT}
selected={option}
onChange={(e) => {
setOption(e.selectValue)
}}
>
<SelectOption id='id_four' value='disabled' label='disabled' disabled iconName='tri-bell' />
<SelectOption id='id_one' value='opt_one' label='Virgile' iconName='tri-bell' />
<SelectOption id='id_two' value='opt_two' label='Toto' iconName='tri-bell' />
<SelectOption id='id_three' value='Venus' label='Venus' iconName='tri-bell' />
<SelectOption id="id_four" value="disabled" label="disabled" disabled iconName="tri-bell" />
<SelectOption id="id_one" value="opt_one" label="Virgile" iconName="tri-bell" />
<SelectOption id="id_two" value="opt_two" label="Toto" iconName="tri-bell" />
<SelectOption id="id_three" value="Venus" label="Venus" iconName="tri-bell" />
</Select>
<Button onClick={() => setOption('Venus')} variant='PRIMARY'>
<Button onClick={() => setOption('Venus')} variant="PRIMARY">
Set value 3
</Button>
<Spacer size={20} />

<Title level={TitleLevels.FOUR}>nullable</Title>
<Select
name='option'
label='label'
id='id'
custom
name="option"
label="label"
id="id"
selected={optionNullable}
onChange={(e) => {
setOptionNullable(e.selectValue)
}}
>
<SelectOption id='id_one' value='opt_one' label='Virgile' />
<SelectOption id='id_four' value='disabled' label='disabled' disabled />
<SelectOption id='id_two' value='opt_two' label='Toto' />
<SelectOption id='id_three' value='Venus' label='Venus' />
<SelectOption id="id_one" value="opt_one" label="Virgile" />
<SelectOption id="id_four" value="disabled" label="disabled" disabled />
<SelectOption id="id_two" value="opt_two" label="Toto" />
<SelectOption id="id_three" value="Venus" label="Venus" />
</Select>
<Button onClick={() => setOptionNullable(undefined)} variant='PRIMARY'>
<Button onClick={() => setOptionNullable(undefined)} variant="PRIMARY">
Set Null
</Button>
<Button onClick={() => setOptionNullable('opt_one')} variant='PRIMARY'>
<Button onClick={() => setOptionNullable('opt_one')} variant="PRIMARY">
Set One
</Button>
<Spacer size={20} />
Expand All @@ -66,45 +68,45 @@ export const SelectView = (): JSX.Element => {
<Title level={TitleLevels.FOUR}>Not nullable</Title>
<Select
multiple
name='option'
label='label'
id='id'
name="option"
label="label"
id="id"
selected={options}
onChange={(e) => {
e?.selectedOptions && setOptions(e.selectedOptions)
}}
>
<SelectOption id='id_one' value='opt_one' label='Virgile' />
<SelectOption id='id_two' value='opt_two' label='Toto' />
<SelectOption id='id_four' value='disabled' label='disabled' disabled />
<SelectOption id='id_three' value='Venus' label='Venus' />
<SelectOption id="id_one" value="opt_one" label="Virgile" />
<SelectOption id="id_two" value="opt_two" label="Toto" />
<SelectOption id="id_four" value="disabled" label="disabled" disabled />
<SelectOption id="id_three" value="Venus" label="Venus" />
</Select>
<Button onClick={() => setOptions((prev) => [...prev, 'Venus'])} variant='PRIMARY'>
<Button onClick={() => setOptions((prev) => [...prev, 'Venus'])} variant="PRIMARY">
Set Venus
</Button>

<Spacer size={20} />
<Title level={TitleLevels.FOUR}>nullable</Title>
<Select
multiple
name='option'
label='label'
id='id'
name="option"
label="label"
id="id"
iconName={IconName.ALERT}
selected={optionsNullable}
onChange={(e) => {
e?.selectedOptions && setOptionsNullable(e.selectedOptions)
}}
>
<SelectOption id='id_one' value='opt_one' label='Virgile' />
<SelectOption id='id_two' value='opt_two' label='Toto' />
<SelectOption id='id_three' value='Venus' label='Venus' />
<SelectOption id='id_four' value='disabled' label='disabled' disabled />
<SelectOption id="id_one" value="opt_one" label="Virgile" iconName={IconName.EYE_SLASH} />
<SelectOption id="id_two" value="opt_two" label="Toto" />
<SelectOption id="id_three" value="Venus" label="Venus" />
<SelectOption id="id_four" value="disabled" label="disabled" disabled />
</Select>
<Button onClick={() => setOptionsNullable([])} variant='PRIMARY'>
<Button onClick={() => setOptionsNullable([])} variant="PRIMARY">
Set Null
</Button>
<Button onClick={() => setOptionsNullable(['opt_one', 'opt_two'])} variant='PRIMARY'>
<Button onClick={() => setOptionsNullable(['opt_one', 'opt_two'])} variant="PRIMARY">
Set one & two
</Button>
</Section>
Expand All @@ -116,36 +118,36 @@ export const SelectView = (): JSX.Element => {
<Title level={TitleLevels.FOUR}>Not icon</Title>
<Select
native
name='option'
label='label'
id='select-native-id'
name="option"
label="label"
id="select-native-id"
selected={option}
onChange={(e) => {
e?.selectValue && setOption(e.selectValue)
}}
>
<SelectOption id='id_one' value='opt_one' label='Virgile' />
<SelectOption id='id_two' value='opt_two' label='Toto' />
<SelectOption id='id_three' value='Venus' label='Venus' />
<SelectOption id='id_four' value='disabled' label='disabled' disabled />
<SelectOption id="id_one" value="opt_one" label="Virgile" />
<SelectOption id="id_two" value="opt_two" label="Toto" />
<SelectOption id="id_three" value="Venus" label="Venus" />
<SelectOption id="id_four" value="disabled" label="disabled" disabled />
</Select>

<Title level={TitleLevels.FOUR}>With icon</Title>
<Select
iconName='tri-alert'
iconName="tri-alert"
native
name='option'
label='label'
id='select-native-id'
name="option"
label="label"
id="select-native-id"
selected={option}
onChange={(e) => {
e?.selectValue && setOption(e.selectValue)
}}
>
<SelectOption id='id_one' value='opt_one' label='Virgile' />
<SelectOption id='id_two' value='opt_two' label='Toto' />
<SelectOption id='id_three' value='Venus' label='Venus' />
<SelectOption id='id_four' value='disabled' label='disabled' disabled />
<SelectOption id="id_one" value="opt_one" label="Virgile" />
<SelectOption id="id_two" value="opt_two" label="Toto" />
<SelectOption id="id_three" value="Venus" label="Venus" />
<SelectOption id="id_four" value="disabled" label="disabled" disabled />
</Select>
</Section>
</>
Expand Down
8 changes: 4 additions & 4 deletions packages/react/components/select/Select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ import { SelectDynamic, SelectNative } from './web'
* Select Component
* @param children {React.ReactNode} Children for Select
* - -------------------------- WEB PROPERTIES -------------------------------
* @param native {boolean} Display native-old select web
* @param custom {boolean} Display native-old select web
* * - -------------------------- NATIVE PROPERTIES -------------------------------
*/
const Select = ({ native, ...props }: SelectProps): JSX.Element => {
if (native) return <SelectNative {...props} />
return <SelectDynamic {...props} />
const Select = ({ custom, multiple, ...props }: SelectProps): JSX.Element => {
if (custom || multiple) return <SelectDynamic {...props} />
return <SelectNative {...props} />
}

export default Select
2 changes: 1 addition & 1 deletion packages/react/components/select/SelectProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,5 +32,5 @@ export interface SelectProps<T = SelectChangeEvent> extends Accessibility, Dev,
name?: string
multiple?: boolean
placeholder?: string
native?: boolean
custom?: boolean
}
42 changes: 31 additions & 11 deletions packages/react/components/select/option/SelectOption.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import clsx from 'clsx'
import { RadioTile } from '@/components/radio'
import * as React from 'react'
import { SelectOptionProps } from './SelectOptionProps'
import { hashClass } from '@/helpers'
import { useTrilogyContext } from '@/context'
import { Icon } from '@/components/icon'
import { is } from '@/lib/services/classify'

/**
* Select Option Component
Expand Down Expand Up @@ -30,8 +33,9 @@ const SelectOption = ({
...others
}: SelectOptionProps) => {

const { styled } = useTrilogyContext()
const { checked, native, focused, ...props } = others as { checked: boolean, native: boolean, focused: boolean }
const selectClasses = React.useMemo(() => clsx(focused && 'focus', className), [focused, className])
const selectClasses = React.useMemo(() => hashClass(styled, clsx('option', focused && 'focus', disabled && is('disabled'), className)), [focused, className])

if (native) {
return (
Expand All @@ -50,18 +54,34 @@ const SelectOption = ({
)
}

// return (
// <RadioTile
// checked={checked}
// horizontal
// className={selectClasses}
// value={value}
// disabled={disabled}
// onChange={onClick}
// icon={iconName}
// description={label || children}
// {...others}
// />
// )

return (
<RadioTile
checked={checked}
horizontal
<li
id={id}
className={selectClasses}
value={value}
disabled={disabled}
onChange={onClick}
icon={iconName}
description={label || children}
data-selected={checked}
role="option"
aria-selected={checked}
data-value={value}
onClick={!disabled ? onClick : null}
{...others}
/>
>
{iconName && <Icon name={iconName} />}
{label || children}
</li>
)
}

Expand Down
57 changes: 2 additions & 55 deletions packages/react/components/select/web/SelectDynamic.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,59 +110,6 @@ const SelectDynamic = ({
setSelectedValues(selected)
}, [selected])

React.useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
const childs = children as React.ReactElement[]
const child = childs[focusedIndex]
e.preventDefault()
switch (true) {
case e.key === 'ArrowDown':
options &&
setFocusedIndex((prev) => {
let nextIndex = (prev + 1) % options.length
if (childs[nextIndex].props.disabled) nextIndex++
return nextIndex % options.length
})
break
case e.key === 'ArrowUp' && focusedIndex !== -1:
options &&
setFocusedIndex((prev) => {
let nextIndex = (prev - 1 + options.length) % options.length
if (childs[nextIndex].props.disabled) nextIndex--
if (nextIndex === -1) nextIndex = options.length - 1
return nextIndex % options.length
})
break
case e.key === 'ArrowUp' && focusedIndex === -1:
options &&
setFocusedIndex(() => {
let nextIndex = options.length - 1
if (childs[nextIndex].props.disabled) nextIndex--
return nextIndex
})
break
case ['Enter'].includes(e.key) && focusedIndex !== -1 && !child.props.disabled:
const isCheckedOption = isChecked(child.props.value)
setNewSelectedValues({
children: child.props.children,
label: child.props.label,
value: child.props.value,
isChecked: isCheckedOption,
})
break
case e.key === 'Escape':
setFocusedIndex(-1)
setIsFocused(false)
break
default:
return
}
}
focused && document.addEventListener('keydown', onKeyDown)
!focused && setFocusedIndex(-1)
return () => document.removeEventListener('keydown', onKeyDown)
}, [focused, focusedIndex, children, isChecked])

const modal = useMemo(
() => <div role='presentation' className='select-trilogy_modal_open' onClick={() => setIsFocused(false)} />,
[],
Expand Down Expand Up @@ -227,9 +174,9 @@ const SelectDynamic = ({
e.preventDefault()
onKeyPressInput(e.inputKeyCode)
}}
{...{ readOnly: true, id, role: 'listbox' }}
{...{ readOnly: true, id, role: 'combobox' }}
/>
{focused && <div className={hashClass(styled, clsx('select-options'))}>{options}</div>}
{focused && <ul role="listbox" className={hashClass(styled, clsx('select-options'))}>{options}</ul>}
{focused && ReactDOM.createPortal(modal, document.body)}
</div>
)
Expand Down
4 changes: 2 additions & 2 deletions packages/styles/framework/src/components/_autolayout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ body:not(.is-tight) {
margin-bottom: 12px;
}
.radio-tiles:not(:last-child) {
margin-bottom: 24px;
margin-bottom: 16px;
}
:not(.radio-tiles) > .radio-tile:not(:last-child) {
margin-bottom: 24px;
Expand Down Expand Up @@ -253,7 +253,7 @@ body:not(.is-tight) {
margin-bottom: 12px;
}
.radio-tiles:not(:last-child) {
margin-bottom: 16px;
margin-bottom: 12px;
}
:not(.radio-tiles) > .radio-tile:not(:last-child) {
margin-bottom: 16px;
Expand Down
Loading

0 comments on commit cebd9d1

Please sign in to comment.