HotamovFO/Web-Fuel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DriverForm: licenses transition on open

Browse Source
This commit is contained in:
popovspiridon99
2025-07-28 08:50:09 +09:00
parent 30ec6147a5
commit 52ba424a83
1 changed files with 25 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/pages/DriverForm.tsx
View File

@ -1,6 +1,6 @@
import 'dayjs/locale/ru' import 'dayjs/locale/ru'
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { Button, TextInput, Table, ActionIcon, Modal, Checkbox, Tabs, Flex } from "@mantine/core" import { Button, TextInput, Table, ActionIcon, Modal, Checkbox, Tabs, Flex, Transition } from "@mantine/core"
import { useForm } from "@mantine/form" import { useForm } from "@mantine/form"
import { IconEdit, IconLinkPlus, IconPlus, IconTrash } from "@tabler/icons-react" import { IconEdit, IconLinkPlus, IconPlus, IconTrash } from "@tabler/icons-react"
import { fetchDictionary, createDictionaryItem, updateDictionaryItem, deleteDictionaryItem } from "../api/api" import { fetchDictionary, createDictionaryItem, updateDictionaryItem, deleteDictionaryItem } from "../api/api"
@ -30,7 +30,7 @@ const Driver = ({ driver, handleEditDriver, handleDeleteDriver }: { driver: any,
return ( return (
<> <>
<Table.Tr style={{cursor: 'pointer'}} onClick={() => setOpened(!opened)}> <Table.Tr style={{ cursor: 'pointer' }} onClick={() => setOpened(!opened)}>
<Table.Td>{driver.fullname}</Table.Td> <Table.Td>{driver.fullname}</Table.Td>
<Table.Td>{stringToSnils(driver.snils)}</Table.Td> <Table.Td>{stringToSnils(driver.snils)}</Table.Td>
<Table.Td>{dateToDDMMYYYY(driver.birthday)}</Table.Td> <Table.Td>{dateToDDMMYYYY(driver.birthday)}</Table.Td>
@ -45,16 +45,29 @@ const Driver = ({ driver, handleEditDriver, handleDeleteDriver }: { driver: any,
</Table.Td> </Table.Td>
</Table.Tr> </Table.Tr>
{opened && <Transition
<Table.Tr> mounted={opened}
<Table.Td colSpan={5}> transition={{
<Flex justify='space-evenly'> in: { opacity: 1, transform: 'scaleY(1)' },
<Button leftSection={<IconPlus />}>Добавить водительские права</Button> out: { opacity: 0, transform: 'scaleY(0)' },
<Button leftSection={<IconLinkPlus />}>Привязать водительские права</Button> common: { transformOrigin: 'top' },
</Flex> transitionProperty: 'transform, opacity',
</Table.Td> }}
</Table.Tr> duration={200}
} timingFunction='ease'
keepMounted
>
{(transitionStyle) => (
<Table.Tr style={{ ...transitionStyle }}>
<Table.Td colSpan={5}>
<Flex justify='space-evenly'>
<Button leftSection={<IconPlus />}>Добавить водительские права</Button>
<Button leftSection={<IconLinkPlus />}>Привязать водительские права</Button>
</Flex>
</Table.Td>
</Table.Tr>
)}
</Transition>
{driver.license && Array.isArray(driver.license) && driver.license.map((dr: IDriver) => ( {driver.license && Array.isArray(driver.license) && driver.license.map((dr: IDriver) => (
<Table.Tr> <Table.Tr>