Skip to content

Commit 3c9a5bc

Browse files
belltalionbelltalion
committed
Fix select componenet
1 parent df94872 commit 3c9a5bc

File tree

4 files changed

+60
-21
lines changed

4 files changed

+60
-21
lines changed

‎packages/components/src/components/Select/Select.stories.tsx‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -54,12 +54,9 @@ function DefaultComponent(
5454
props: Omit<ComponentProps<typeof Select>, 'children'>,
5555
) {
5656
return (
57-
<Select {...props} defaultValue={['Option 1']} onValueChange={() => {}}>
57+
<Select {...props} defaultValue={['Option 1']} onChange={() => {}}>
5858
<SelectTrigger>Select2</SelectTrigger>
59-
<SelectContainer
60-
// x={10}
61-
// y={10}
62-
>
59+
<SelectContainer x={10} y={10}>
6360
<SelectOption disabled value="Option 1">
6461
Option 1
6562
</SelectOption>
@@ -107,19 +104,15 @@ function ControlledCheckbox() {
107104
}
108105

109106
return (
110-
<Select onValueChange={handleChange} type="checkbox" value={value}>
107+
<Select onChange={handleChange} type="checkbox" value={value}>
111108
<SelectTrigger>Select {value}</SelectTrigger>
112109
<SelectContainer showConfirmButton>
113110
<SelectOption value="Option 1">Option 1</SelectOption>
114111
<SelectOption value="Option 2">Option 2</SelectOption>
115112
<SelectDivider />
116113
<SelectOption value="Option 3">Option 3</SelectOption>
117114
<SelectOption value="Option 4">Option 4</SelectOption>
118-
<Select
119-
onValueChange={handleSubChange}
120-
type="checkbox"
121-
value={subValue}
122-
>
115+
<Select onChange={handleSubChange} type="checkbox" value={subValue}>
123116
<SelectTrigger asChild>
124117
<SelectOption showCheck={false}>
125118
<Flex alignItems="center" justifyContent="space-between" w="100%">
@@ -153,15 +146,15 @@ function ControlledRadio() {
153146
setSubValue(value)
154147
}
155148
return (
156-
<Select onValueChange={handleChange} type="radio" value={value}>
149+
<Select onChange={handleChange} type="radio" value={value}>
157150
<SelectTrigger>Select {value}</SelectTrigger>
158151
<SelectContainer>
159152
<SelectOption value="Option 1">Option 1</SelectOption>
160153
<SelectOption value="Option 2">Option 2</SelectOption>
161154
<SelectDivider />
162155
<SelectOption value="Option 3">Option 3</SelectOption>
163156
<SelectOption value="Option 4">Option 4</SelectOption>
164-
<Select onValueChange={handleSubChange} type="radio" value={subValue}>
157+
<Select onChange={handleSubChange} type="radio" value={subValue}>
165158
<SelectTrigger asChild>
166159
<SelectOption showCheck={false}>
167160
<Flex alignItems="center" justifyContent="space-between" w="100%">
@@ -214,7 +207,7 @@ function SelectWithOptions() {
214207
label: 'Option 3',
215208
value: 'Option 3',
216209
onClick: () => {
217-
console.log('Option 3')
210+
console.info('Option 3')
218211
},
219212
},
220213
]}

‎packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,28 @@ exports[`Select > should render 1`] = `
2424
</div>
2525
</div>
2626
`;
27+
28+
exports[`Select > should render with x and y properties 1`] = `
29+
<div>
30+
<div
31+
class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1 "
32+
>
33+
<button
34+
aria-expanded="false"
35+
aria-label="Select toggle"
36+
class="border-radius-0-8px--2 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
37+
type="button"
38+
>
39+
<div
40+
class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
41+
>
42+
<div
43+
class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
44+
>
45+
Select
46+
</div>
47+
</div>
48+
</button>
49+
</div>
50+
</div>
51+
`;

‎packages/components/src/components/Select/__tests__/index.browser.test.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -383,4 +383,17 @@ describe('Select', () => {
383383
const option1 = container.querySelector('[data-value="Option 1"]')
384384
expect(option1).toBeInTheDocument()
385385
})
386+
387+
it('should render with x and y properties', () => {
388+
const { container } = render(
389+
<Select>
390+
<SelectTrigger>Select</SelectTrigger>
391+
<SelectContainer x={10} y={10}>
392+
<SelectOption value="Option 1">Option 1</SelectOption>
393+
<SelectOption value="Option 2">Option 2</SelectOption>
394+
</SelectContainer>
395+
</Select>,
396+
)
397+
expect(container).toMatchSnapshot()
398+
})
386399
})

‎packages/components/src/components/Select/index.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -205,11 +205,15 @@ export function SelectTrigger({
205205
interface SelectContainerProps extends ComponentProps<'div'> {
206206
showConfirmButton?: boolean
207207
confirmButtonText?: string
208+
x?: number
209+
y?: number
208210
}
209211
export function SelectContainer({
210212
children,
211213
showConfirmButton,
212214
confirmButtonText = '완료',
215+
x = 0,
216+
y = 0,
213217
...props
214218
}: SelectContainerProps) {
215219
const { open, setOpen, type, ref } = useSelect()
@@ -223,14 +227,18 @@ export function SelectContainer({
223227

224228
// 요소가 움직일 때마다(스크롤, 리사이즈 등) 위치를 갱신하도록 이벤트를 등록합니다.
225229
const updatePosition = () => {
226-
const { height, x, y } = combobox.getBoundingClientRect()
230+
const {
231+
height,
232+
x: comboboxX,
233+
y: comboboxY,
234+
} = combobox.getBoundingClientRect()
227235

228-
if (el.offsetHeight + y > window.innerHeight)
229-
el.style.bottom = `${window.innerHeight - y + 10}px`
230-
else el.style.top = `${y + height + 10}px`
231-
if (el.offsetWidth + x > window.innerWidth)
232-
el.style.left = `${x - el.offsetWidth + combobox.offsetWidth}px`
233-
else el.style.left = `${x}px`
236+
if (el.offsetHeight + comboboxY + y > window.innerHeight)
237+
el.style.bottom = `${window.innerHeight - comboboxY + 10}px`
238+
else el.style.top = `${comboboxY + height + 10 + y}px`
239+
if (el.offsetWidth + comboboxX + x > window.innerWidth)
240+
el.style.left = `${comboboxX - el.offsetWidth + combobox.offsetWidth + x}px`
241+
else el.style.left = `${comboboxX + x}px`
234242
}
235243

236244
// 최초 위치 설정

0 commit comments

Comments
 (0)