Skip to content

Commit

Permalink
revert: pr7235 (#7619) (#7656)
Browse files Browse the repository at this point in the history
* Revert "fix(CustomSelect): fix custom select cursor updating (#7508)"

This reverts commit dd77217.

* Revert "fix(CustomSelect): a11y allow NVDA to read selected option (#7235)"

This reverts commit 13258fe.
  • Loading branch information
SevereCloud authored Sep 24, 2024
1 parent ac31671 commit bcc3811
Show file tree
Hide file tree
Showing 15 changed files with 250 additions and 438 deletions.
137 changes: 3 additions & 134 deletions packages/vkui/src/components/CustomSelect/CustomSelect.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,8 @@
import * as React from 'react';
import { Meta, StoryObj } from '@storybook/react';
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';
import { Icon24User } from '@vkontakte/icons';
import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
import { cities, getRandomUsers } from '../../testing/mock';
import { Avatar } from '../Avatar/Avatar';
import { CustomSelectOption } from '../CustomSelectOption/CustomSelectOption';
import { Div } from '../Div/Div';
import { FormItem } from '../FormItem/FormItem';
import { FormLayoutGroup } from '../FormLayoutGroup/FormLayoutGroup';
import { Header } from '../Header/Header';
import { CustomSelect, SelectProps } from './CustomSelect';
import { cities } from '../../testing/mock';
import { CustomSelect, type SelectProps } from './CustomSelect';

const story: Meta<SelectProps> = {
title: 'Forms/CustomSelect',
Expand All @@ -29,126 +21,3 @@ export const Playground: Story = {
options: cities,
},
};

function getUsers(usersArray: ReturnType<typeof getRandomUsers>) {
return usersArray.map((user) => ({
label: user.name,
value: `${user.id}`,
avatar: user.photo_100,
description: user.screen_name,
}));
}

export const QAPlayground: Story = {
render: function Render() {
const selectTypes = [
{
label: 'default',
value: 'default',
},
{
label: 'plain',
value: 'plain',
},
{
label: 'accent',
value: 'accent',
},
];

const [selectType, setSelectType] = React.useState<undefined | SelectProps['selectType']>(
undefined,
);
const users = [...getUsers(getRandomUsers(10))];
return (
<Div style={{ minWidth: '500px' }}>
<Header Component="h1">Custom Select на десктопе</Header>
<Header>Базовые примеры использования</Header>

<FormLayoutGroup mode="horizontal">
<FormItem
top="Администратор"
htmlFor="administrator-select-id"
style={{ flexGrow: 1, flexShrink: 1 }}
>
<CustomSelect
id="administrator-select-id"
placeholder="Не выбран"
options={users}
defaultValue={users[2].value}
selectType={selectType}
allowClearButton
/>
</FormItem>

<FormItem
top="Вид выпадающего списка"
htmlFor="select-type-select-id"
style={{ flexBasis: '200px', flexGrow: 0 }}
>
<CustomSelect
id="select-type-select-id"
value={selectType}
placeholder="Не задан"
options={selectTypes}
defaultValue={selectTypes[0].value}
onChange={(e) => setSelectType(e.target.value as SelectProps['selectType'])}
renderOption={({ option, ...restProps }) => (
<CustomSelectOption {...restProps} description={`"${option.value}"`} />
)}
/>
</FormItem>
</FormLayoutGroup>

<FormItem
top="Администратор"
bottom="Кастомный дизайн элементов списка"
htmlFor="administrator-select-id-2"
>
<CustomSelect
id="administrator-select-id-2"
placeholder="Не выбран"
options={users}
renderOption={({ option, ...restProps }) => (
<CustomSelectOption
{...restProps}
before={<Avatar size={24} src={option.avatar} />}
description={option.description}
/>
)}
/>
</FormItem>

<FormItem
top="Администратор"
htmlFor="administrator-select-id-3"
bottom="Ползунок скроллбара по умолчанию скрыт"
>
<CustomSelect
id="administrator-select-id-3"
placeholder="Не выбран"
options={users}
selectType={selectType}
autoHideScrollbar
/>
</FormItem>

<Header>Поиск</Header>
<FormItem
top="Администратор"
htmlFor="administrator-select-searchable-id-3"
bottom="Поиск по списку"
>
<CustomSelect
before={<Icon24User />}
placeholder="Введите имя пользователя"
searchable
id="administrator-select-searchable-id-3"
options={users}
allowClearButton
/>
</FormItem>
</Div>
);
},
};
Loading

0 comments on commit bcc3811

Please sign in to comment.