Skip to content

Commit

Permalink
BREAKING CHANGE(FormLayout): remove component
Browse files Browse the repository at this point in the history
  • Loading branch information
@BlackySoul
BlackySoul committed Dec 18, 2023
1 parent fe2d02d commit b2033bf
Show file tree
Hide file tree
Showing 20 changed files with 329 additions and 411 deletions.
192 changes: 95 additions & 97 deletions packages/vkui/src/components/Calendar/Readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,104 +18,102 @@ const Example = () => {
const [listenDayChangesForUpdate, setListenDayChangesForUpdate] = useState(false);

return (
<FormLayout>
<FormLayoutGroup mode="vertical">
<FormItem top="Выбранная дата">{format(value, 'YYYY-MM-DD HH:mm:ss')}</FormItem>
<FormItem top="Выбор времени">
<Checkbox checked={enableTime} onChange={(e) => setEnableTime(e.target.checked)}>
Включено
</Checkbox>
</FormItem>
<FormItem top="Запрет выбора прошлых дат">
<Checkbox checked={disablePast} onChange={(e) => setDisablePast(e.target.checked)}>
Включено
</Checkbox>
</FormItem>
<FormItem top="Запрет выбора будущих дат">
<Checkbox checked={disableFuture} onChange={(e) => setDisableFuture(e.target.checked)}>
Включено
</Checkbox>
</FormItem>
<FormItem top="Отключить селекты выбора месяца/года">
<Checkbox checked={disablePickers} onChange={(e) => setDisablePickers(e.target.checked)}>
Включено
</Checkbox>
</FormItem>
<FormItem top="Отображать даты с прошлого и следующего месяца">
<Checkbox
checked={showNeighboringMonth}
onChange={(e) => setShowNeighboringMonth(e.target.checked)}
>
Включено
</Checkbox>
</FormItem>
<FormItem top="Переключать сегодняшний день в 00:00">
<Checkbox
checked={listenDayChangesForUpdate}
onChange={(e) => setListenDayChangesForUpdate(e.target.checked)}
>
Включено
</Checkbox>
</FormItem>
<FormItem top="Локаль">
<Select
style={{ width: 100 }}
value={locale}
onChange={(e) => setLocale(e.target.value)}
options={[
{
label: 'ru',
value: 'ru',
},
{
label: 'en',
value: 'en',
},
{
label: 'ar',
value: 'ar',
},
{
label: 'fr',
value: 'fr',
},
]}
<FormLayoutGroup mode="vertical">
<FormItem top="Выбранная дата">{format(value, 'YYYY-MM-DD HH:mm:ss')}</FormItem>
<FormItem top="Выбор времени">
<Checkbox checked={enableTime} onChange={(e) => setEnableTime(e.target.checked)}>
Включено
</Checkbox>
</FormItem>
<FormItem top="Запрет выбора прошлых дат">
<Checkbox checked={disablePast} onChange={(e) => setDisablePast(e.target.checked)}>
Включено
</Checkbox>
</FormItem>
<FormItem top="Запрет выбора будущих дат">
<Checkbox checked={disableFuture} onChange={(e) => setDisableFuture(e.target.checked)}>
Включено
</Checkbox>
</FormItem>
<FormItem top="Отключить селекты выбора месяца/года">
<Checkbox checked={disablePickers} onChange={(e) => setDisablePickers(e.target.checked)}>
Включено
</Checkbox>
</FormItem>
<FormItem top="Отображать даты с прошлого и следующего месяца">
<Checkbox
checked={showNeighboringMonth}
onChange={(e) => setShowNeighboringMonth(e.target.checked)}
>
Включено
</Checkbox>
</FormItem>
<FormItem top="Переключать сегодняшний день в 00:00">
<Checkbox
checked={listenDayChangesForUpdate}
onChange={(e) => setListenDayChangesForUpdate(e.target.checked)}
>
Включено
</Checkbox>
</FormItem>
<FormItem top="Локаль">
<Select
style={{ width: 100 }}
value={locale}
onChange={(e) => setLocale(e.target.value)}
options={[
{
label: 'ru',
value: 'ru',
},
{
label: 'en',
value: 'en',
},
{
label: 'ar',
value: 'ar',
},
{
label: 'fr',
value: 'fr',
},
]}
/>
</FormItem>
<FormItem top="Размер">
<Select
style={{ width: 100 }}
value={size}
onChange={(e) => setSize(e.target.value)}
options={[
{
label: 's',
value: 's',
},
{
label: 'm',
value: 'm',
},
]}
/>
</FormItem>
<FormItem>
<LocaleProvider value={locale}>
<Calendar
value={value}
onChange={setValue}
enableTime={enableTime}
disablePast={disablePast}
disableFuture={disableFuture}
disablePickers={disablePickers}
showNeighboringMonth={showNeighboringMonth}
size={size}
listenDayChangesForUpdate={listenDayChangesForUpdate}
/>
</FormItem>
<FormItem top="Размер">
<Select
style={{ width: 100 }}
value={size}
onChange={(e) => setSize(e.target.value)}
options={[
{
label: 's',
value: 's',
},
{
label: 'm',
value: 'm',
},
]}
/>
</FormItem>
<FormItem>
<LocaleProvider value={locale}>
<Calendar
value={value}
onChange={setValue}
enableTime={enableTime}
disablePast={disablePast}
disableFuture={disableFuture}
disablePickers={disablePickers}
showNeighboringMonth={showNeighboringMonth}
size={size}
listenDayChangesForUpdate={listenDayChangesForUpdate}
/>
</LocaleProvider>
</FormItem>
</FormLayoutGroup>
</FormLayout>
</LocaleProvider>
</FormItem>
</FormLayoutGroup>
);
};

Expand Down
112 changes: 55 additions & 57 deletions packages/vkui/src/components/CalendarRange/Readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,64 +14,62 @@ const Example = () => {
const [locale, setLocale] = useState('ru');

return (
<FormLayout>
<FormLayoutGroup mode="vertical">
<FormItem top="Выбранная дата">
{format(value[0], 'YYYY-MM-DD')} - {format(value[1], 'YYYY-MM-DD')}
</FormItem>
<FormItem top="Запрет выбора прошлых дат">
<Checkbox checked={disablePast} onChange={(e) => setDisablePast(e.target.checked)}>
Включено
</Checkbox>
</FormItem>
<FormItem top="Запрет выбора будущих дат">
<Checkbox checked={disableFuture} onChange={(e) => setDisableFuture(e.target.checked)}>
Включено
</Checkbox>
</FormItem>
<FormItem top="Отключить селекты выбора месяца/года">
<Checkbox checked={disablePickers} onChange={(e) => setDisablePickers(e.target.checked)}>
Включено
</Checkbox>
</FormItem>
<FormItem top="Локаль">
<Select
style={{ width: 100 }}
value={locale}
onChange={(e) => setLocale(e.target.value)}
options={[
{
label: 'ru',
value: 'ru',
},
{
label: 'en',
value: 'en',
},
{
label: 'ar',
value: 'ar',
},
{
label: 'fr',
value: 'fr',
},
]}
<FormLayoutGroup mode="vertical">
<FormItem top="Выбранная дата">
{format(value[0], 'YYYY-MM-DD')} - {format(value[1], 'YYYY-MM-DD')}
</FormItem>
<FormItem top="Запрет выбора прошлых дат">
<Checkbox checked={disablePast} onChange={(e) => setDisablePast(e.target.checked)}>
Включено
</Checkbox>
</FormItem>
<FormItem top="Запрет выбора будущих дат">
<Checkbox checked={disableFuture} onChange={(e) => setDisableFuture(e.target.checked)}>
Включено
</Checkbox>
</FormItem>
<FormItem top="Отключить селекты выбора месяца/года">
<Checkbox checked={disablePickers} onChange={(e) => setDisablePickers(e.target.checked)}>
Включено
</Checkbox>
</FormItem>
<FormItem top="Локаль">
<Select
style={{ width: 100 }}
value={locale}
onChange={(e) => setLocale(e.target.value)}
options={[
{
label: 'ru',
value: 'ru',
},
{
label: 'en',
value: 'en',
},
{
label: 'ar',
value: 'ar',
},
{
label: 'fr',
value: 'fr',
},
]}
/>
</FormItem>
<FormItem>
<LocaleProvider value={locale}>
<CalendarRange
value={value}
onChange={setValue}
disablePast={disablePast}
disableFuture={disableFuture}
disablePickers={disablePickers}
/>
</FormItem>
<FormItem>
<LocaleProvider value={locale}>
<CalendarRange
value={value}
onChange={setValue}
disablePast={disablePast}
disableFuture={disableFuture}
disablePickers={disablePickers}
/>
</LocaleProvider>
</FormItem>
</FormLayoutGroup>
</FormLayout>
</LocaleProvider>
</FormItem>
</FormLayoutGroup>
);
};

Expand Down
Loading

0 comments on commit b2033bf

Please sign in to comment.