\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e \u043e\u0434\u0438\u043d \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 – Compound components.<\/p>\n\n\n\n\n\n\n\n
Compound components \u044d\u0442\u043e \u043f\u043e\u0434\u0445\u043e\u0434, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432\u044b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043e\u0434\u043d\u043e\u0439 \u043e\u0431\u0449\u0435\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u043e\u0431\u0449\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c. \u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 \u044d\u0442\u043e\u0439 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438 \u0432\u044b \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435, \u0442\u043a \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u044b\u043c \u0446\u0435\u043b\u044b\u043c. \u042d\u0442\u043e \u043a\u0430\u043a \u0432 BEM \u043d\u0435\u043b\u044c\u0437\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c E – \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043e\u0442 B – \u0431\u043b\u043e\u043a\u0430.<\/p>\n\n\n\n
\u0421\u0430\u043c\u044b\u0439 \u043d\u0430\u0433\u043b\u044f\u0434\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u043d\u0430\u044e\u0442 \u0432\u0441\u0435 \u0444\u0440\u043e\u043d\u0442\u044b – \u044d\u0442\u043e select \u0441 \u0435\u0433\u043e option \u0432 \u043e\u0431\u044b\u0447\u043d\u043e\u043c HTML.<\/p>\n\n\n\n
<select name=\"meals\">\n <option value=\"pizza\">Pizza<\/option>\n <option value=\"pasta\">Pasta<\/option>\n <option value=\"borsch\">Borsch<\/option>\n <option value=\"fries\">Fries<\/option>\n<\/select><\/code><\/pre>\n\n\n\n\u0412 \u00ab\u0441\u043b\u043e\u0436\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435\u00bb \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0433\u043e\u0434\u043d\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u043d\u043e \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0438\u0445 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0442\u044c \u043e\u0434\u043d\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438 \u043e\u0434\u043d\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n\n\n\n
\u041a\u043e\u0433\u0434\u0430 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0443\u043c\u0430\u0442\u044c\u0441\u044f \u043e\u0431 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 Compound components<\/h3>\n\n\n\n
\u042f \u043c\u043e\u0433\u0443 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c 2 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u0433\u0434\u0435 \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/p>\n\n\n\n
\u041a\u043e\u0433\u0434\u0430 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u043e \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u044c\u044e \u0447\u0435\u0433\u043e-\u0442\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u044b \u043e\u0434\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439 (\u043a\u0430\u043a select \u0432 HTML).<\/p>\n\n\n\n
\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u0431\u0443\u043b\u044f\u0446\u0438\u044e, \u044f\u0441\u043d\u043e\u0435 \u0434\u0435\u043b\u043e, \u0447\u0442\u043e \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0442\u0430\u0431 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u0442\u0435 \u0438 \u0432\u043e\u0442 \u0442\u0443\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 Compound components.<\/p>\n\n\n\n
import React from 'react';\n\nimport { Tabs } from 'tabs';\n\nfunction MyTabs() {\n return (\n <Tabs onChange={()=> console.log('Tab is changed')}>\n <Tabs.Tab>Pie<\/Tabs.Tab>\n <Tabs.Tab className=\"custom-tab\">Cake<\/Tabs.Tab>\n <Tabs.Tab disabled={true} >Candies<\/Tabs.Tab>\n <Tabs.Tab>Cookies<\/Tabs.Tab>\n <\/Tabs>\n );\n}\n\nexport default MyTabs;<\/code><\/pre>\n\n\n\n\u041f\u043e \u043c\u043e\u0435\u043c\u0443 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u0435\u0441\u044c\u043c\u0430 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e, \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u0438 \u043f\u043e \u0440\u0435\u0430\u043a\u0442\u043e\u0432\u0441\u043a\u0438) \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0442\u0430\u0431, \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u043b\u044e\u0431\u044b\u0435 \u043f\u0440\u043e\u043f\u0441\u044b, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0442\u0430\u0431\u043e\u0432 \u0441\u0440\u0430\u0437\u0443, \u043d\u0443 \u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Tabs \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0430 \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u043e\u0431\u0449\u0430\u044f \u043b\u043e\u0433\u0438\u043a\u0430. <\/p>\n\n\n\n
\u0421\u0440\u0430\u0432\u043d\u0438\u0442\u0435 \u0441 \u0442\u0435\u043c, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0433\u043b\u043e \u0431\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0431\u0435\u0437 Compound components:<\/p>\n\n\n\n
import React from 'react';\n\nimport { Tabs } from 'TabsWithoutCC';\n\nfunction MyTabs() {\n return (\n <Tabs\n onChange={()=> console.log('Tab is changed')}\n tabs={[\n { name: \"Pie\" },\n { name: \"Cake\", className: 'custom-tab' },\n { name: \"Candies\", disabled: true },\n { name: \"Cookies\" }\n ]}\n \/>\n );\n}\n\nexport default MyTabs;<\/code><\/pre>\n\n\n\n\u0410 \u0432\u043e\u0442 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u044f \u043c\u043e\u0449\u044c Compound Components.<\/p>\n\n\n\n
\u041f\u0440\u0438\u0432\u0435\u0434\u0443 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 \u0436\u0438\u0437\u043d\u0438: \u044f \u0434\u0435\u043b\u0430\u043b \u0444\u043e\u0440\u043c\u0443 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0431\u0430\u043d\u043a\u0435, \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e \u043e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a: \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u043b\u043e\u0433\u0438\u043d\u0430, \u043f\u0430\u0440\u043e\u043b\u044f, \u0443 \u043d\u0438\u0445 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0442\u0430\u0439\u0442\u043b, \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0432\u043e\u0439\u0442\u0438\u00bb, \u0438 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0442\u0435\u043c\u043d\u0443\u044e \u0442\u0435\u043c\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u0444\u043e\u0440\u043c\u0443 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430\u0445 \u0438 \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0447\u0435\u0440\u0435\u0437 web-view<\/p>\n\n\n\n
import React from 'react';\n\nimport { Form, Input, Button, Title } from 'our-design-system';\n\nfunction AuthForm({ theme }) {\n return (\n <div>\n <Form theme={ theme }>\n \t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<Title theme={ theme }>\u041b\u043e\u0433\u0438\u043d<\/Title>\n \t\t\t\t\t\t<Input theme={ theme } placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043b\u043e\u0433\u0438\u043d\" type=\"text\"\/>\n \t\t\t\t\t<div>\n \t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t<Title theme={ theme }>\u041f\u0430\u0440\u043e\u043b\u044c<\/Title>\n\t <Input theme={ theme } placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0430\u0440\u043e\u043b\u044c\" type=\"password\"\/>\n \t\t\t\t\t<div>\n <Button theme={ theme } type=\"submit\">\u0412\u043e\u0439\u0442\u0438<\/Button>\n <\/Form>\n <\/div>\n );\n}\n\nexport default AuthForm;<\/code><\/pre>\n\n\n\n\u041d\u043e \u043f\u043e\u043c\u0438\u043c\u043e \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e \u043b\u043e\u0433\u0438\u043d\u0443\/\u043f\u0430\u0440\u043e\u043b\u044e \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0435\u0449\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043b\u043e\u0433\u0438\u043d\u0438\u0442\u044c\u0441\u044f \u043f\u043e \u043d\u043e\u043c\u0435\u0440\u0443 \u043a\u0430\u0440\u0442\u044b \u0438\u043b\u0438 \u043f\u043e \u043d\u043e\u043c\u0435\u0440\u0443 \u0441\u0447\u0435\u0442\u0430. \u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c? \u041d\u0443 \u043d\u0430\u0432\u0435\u0440\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0443\u0441\u043b\u043e\u0432\u0438\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0442\u0438\u043f \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438:<\/p>\n\n\n\n
import React from 'react';\n\nimport { Form, Input, Button, Title } from 'our-design-system';\n\nfunction AuthForm({ isAccountAuth, theme }) {\n return (\n <div>\n <Form theme={ theme }>\n isAccountAuth ? (\n\t\t\t\t\t\t\t\t\t\t<div>\n <Title theme={ theme }>\u041d\u043e\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b \u0438\u043b\u0438 \u0441\u0447\u0435\u0442\u0430<\/Title>\n\t\t\t\t\t\t\t\t\t\t\t<Input theme={ theme } placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b \u0438\u043b\u0438 \u0441\u0447\u0435\u0442\u0430\" type=\"number\"\/>\n <div>\n ) : (\n <div>\n <Title theme={ theme }>\u041b\u043e\u0433\u0438\u043d<\/Title>\n <Input theme={ theme } placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043b\u043e\u0433\u0438\u043d\" type=\"text\"\/>\n <div>\n <div>\n <Title theme={ theme }>\u041f\u0430\u0440\u043e\u043b\u044c<\/Title>\n <Input theme={ theme } placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0430\u0440\u043e\u043b\u044c\" type=\"password\"\/>\n <div>\n )\n <Button theme={ theme } type=\"submit\">\u0412\u043e\u0439\u0442\u0438<\/Button>\n <\/Form>\n <\/div>\n );\n}\n\nexport default AuthForm;<\/code><\/pre>\n\n\n\n\u041f\u043e\u0442\u043e\u043c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0431\u0438\u0437\u043d\u0435\u0441 \u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442, \u0447\u0442\u043e \u0432 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u043a\u0430\u0440\u0442\u044b \u0438\u043b\u0438 \u0441\u0447\u0435\u0442\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u0442\u0430\u0439\u0442\u043b\u0430 \u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u043a \u0431\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0430\u044f \u043a\u0430\u0440\u0442\u0430 (\u0441\u043b\u0430\u0432\u0430 \u0431\u043e\u0433\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0432 \u0432\u0438\u0434\u0435 \u043a\u0430\u0440\u0442\u044b \u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u043d\u0435 \u043d\u0430\u0434\u043e, \u043e\u043d \u0435\u0441\u0442\u044c \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043d\u043e \u0435\u0449\u0435 \u043e\u0434\u043d\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f).<\/p>\n\n\n\n
import React from 'react';\n\nimport { Form, Input, Button, CardInput, Title } from 'our-design-system';\n\nfunction AuthForm({ isAccountAuth, isWebview, theme }) {\n return (\n <div>\n <Form theme={ theme }>\n { isAccountAuth && !isWebview && (\n \t\t<div>\n <Title theme={ theme }>\u041d\u043e\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b \u0438\u043b\u0438 \u0441\u0447\u0435\u0442\u0430<\/Title>\n\t\t\t\t\t\t\t\t\t\t\t<Input theme={ theme } placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b \u0438\u043b\u0438 \u0441\u0447\u0435\u0442\u0430\" type=\"number\"\/>\n <div>\n ) }\n\n { isAccountAuth && isWebview && <CardInput theme={ theme } placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b \u0438\u043b\u0438 \u0441\u0447\u0435\u0442\u0430\"\/> }\n\n { !isAccountAuth && (\n <div>\n <Title theme={ theme }>\u041b\u043e\u0433\u0438\u043d<\/Title>\n <Input theme={ theme } placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043b\u043e\u0433\u0438\u043d\" type=\"text\"\/>\n <div>\n <div>\n <Title theme={ theme }>\u041f\u0430\u0440\u043e\u043b\u044c<\/Title>\n <Input theme={ theme } placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0430\u0440\u043e\u043b\u044c\" type=\"password\"\/>\n <div>\n )}\n <Button theme={ theme } type=\"submit\">\u0412\u043e\u0439\u0442\u0438<\/Button>\n <\/Form>\n <\/div>\n );\n}\n\nexport default AuthForm;\n<\/code><\/pre>\n\n\n\n\u0417\u0430\u043c\u0435\u0442\u0438\u043b\u0438 \u0447\u0442\u043e \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043d\u043e\u0432\u043e\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0438 \u0443 \u043d\u0430\u0441 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u043f\u0441\u044b \u0442\u0438\u043f\u0430: isAccountAuth, isWebview<\/code>. \u0418 \u044d\u0442\u043e \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0443\u0447\u0435\u0441\u0442\u044c \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f, \u044f \u0432\u0438\u0434\u0435\u043b \u0438 \u043f\u043e\u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0445 “\u0443\u0441\u043b\u043e\u0432\u043d\u044b\u0445” \u043f\u0440\u043e\u043f\u0441\u043e\u0432. \u0412 \u043e\u0431\u0449\u0435\u043c \u0441\u0443\u0442\u044c \u044f \u0434\u0443\u043c\u0430\u044e \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438, \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0440\u0430\u0437\u0434\u0443\u0432\u0430\u0435\u0442\u0441\u044f \u0438 \u043e\u0431\u0440\u0430\u0441\u0442\u0430\u0435\u0442 \u043a\u0443\u0447\u0435\u0439 \u0443\u0441\u043b\u043e\u0432\u0438\u0439, \u043a\u043e\u0434 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0447\u0435\u0433\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u044f\u0435\u0442 \u0431\u043e\u043b\u044c \u0438 \u0441\u0442\u0440\u0430\u0434\u0430\u043d\u0438\u044f (\u0432\u0430\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0447\u0442\u043e \u043c\u043e\u043b \u043d\u043e\u0440\u043c \u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f, \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u043d\u043e \u0442\u0443\u0442 \u044f \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u043b \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u043f\u0441\u043e\u0432, \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u043d\u0435 \u0434\u0438\u0441\u043f\u0430\u0442\u0447\u0438\u043b \u043d\u0438\u0447\u0435\u0433\u043e, \u0442\u0443\u0442 \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u0441\u0442\u0430\u0442\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f \u0440\u0430\u0437\u043d\u044b\u0435, \u0432 \u043e\u0431\u0449\u0435\u043c \u043f\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u043c\u043d\u0435, \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0430\u0431\u043e\u0447\u0438\u0439 \u043f\u0440\u043e\u0434\u043e\u0432\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0443\u0441\u0442\u0440\u0430\u0448\u0430\u044e\u0449\u0435).<\/p>\n\n\n\n\u0414\u0443\u043c\u0430\u044e \u0443\u0436\u0435 \u043f\u0440\u0438\u0448\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c, \u043a\u0430\u043a \u0432\u043e\u043e\u0431\u0449\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c Compound Component, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0430\u0448\u0435\u0439 \u0444\u043e\u0440\u043c\u044b:<\/p>\n\n\n\n
import React from 'react';\n\nimport { Form, Input, Button, Title, CardInput } from 'our-design-system';\n\nconst AuthFormContext = React.createContext(undefined);\n\nfunction AuthForm(props) {\n const { theme } = props;\n const memoizedContextValue = React.useMemo(\n () => ({\n theme,\n }),\n [theme],\n );\n\n return (\n <AuthFormContext.Provider value={ memoizedContextValue }>\n <Form>\n { props.children }\n <\/Form>\n <\/AuthFormContext.Provider>\n );\n}\n\nfunction useAuthForm() {\n const context = React.useContext(AuthFormContext);\n\n if (!context) {\n throw new Error('This component must be used within a <AuthForm> component.');\n }\n\n return context;\n}\n\nAuthForm.Input = function FormInput(props) {\n const { theme } = useAuthForm();\n return <Input theme={theme} {...props} \/>\n};\nAuthForm.CardInput = function FormCardInput(props) {\n const { theme } = useAuthForm();\n return <CardInput theme={theme} {...props} \/>\n};\nAuthForm.Field = function Field({ children, title }) {\n const { theme } = useAuthForm();\n return (\n <div>\n <Title theme={ theme }>{ title }<\/Title>\n { children }\n <\/div>\n )\n};\nAuthForm.SubmitButton = function SubmitButton(props) {\n const { theme } = useAuthForm();\n return <Button theme={theme} {...props} type=\"submit\" \/>\n};\n\n\nexport default AuthForm;\n<\/code><\/pre>\n\n\n\n\u042f \u0432\u0441\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435, \u043d\u043e \u0432\u0430\u043c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043c\u0435\u0448\u0430\u0435\u0442 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u043a\u0430\u0436\u0434\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b.<\/em><\/p>\n\n\n\n\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u0442\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. <\/p>\n\n\n\n
\u0412\u043e \u043f\u0435\u0440\u0432\u044b\u0445 \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0432 Compound Components \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u043f\u0441\u044b \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u043c\u0443, \u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442. \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u0430, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0443 \u0441\u0430\u043c\u044b\u0445 \u043d\u0438\u0436\u043d\u0438\u0445 \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e.<\/p>\n\n\n\n
\u0412 \u043d\u0430\u0448\u0435\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438 \u0432\u0430\u0436\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0442\u043a \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 AuthForm.Field<\/code> , \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0439 \u0435\u043c\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0440\u0435\u0431\u0435\u043d\u043a\u0430 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u0435\u043c\u0443 \u0442\u0430\u0439\u0442\u043b. \u0418\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430.<\/p>\n\n\n\n\u0422\u0430\u043a \u0432\u043e\u0442, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0434\u0435\u0442\u0438 \u0438\u043c\u0435\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0443, \u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0445\u0443\u043a useAuthForm.<\/p>\n\n\n\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0442\u0435\u043c\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 AuthForm<\/code> \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043d\u0430\u0448\u0435\u0433\u043e Compound \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442.<\/p>\n\n\n\n\u0427\u0442\u043e\u0431\u044b \u0443 \u043d\u0430\u0441 \u043d\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u043b\u043e \u043b\u0438\u0448\u043d\u0438\u0445 \u0440\u0435\u0440\u0435\u043d\u0434\u0435\u0440\u043e\u0432, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c useMemo \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n\n\n\n
\u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0448\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c.<\/p>\n\n\n\n
\u0422\u0430\u043a \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0442\u0430\u043c, \u0433\u0434\u0435 \u043d\u0443\u0436\u043d\u0430 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u043e \u043b\u043e\u0433\u0438\u043d\u0443\/\u043f\u0430\u0440\u043e\u043b\u044e:<\/p>\n\n\n\n
import React from 'react';\n\nimport AuthForm from \".\/compound-form\";\n\nexport default function LoginAuth() {\n return (\n <AuthForm theme={'dark'}>\n <AuthForm.Field title=\"\u041b\u043e\u0433\u0438\u043d\">\n <AuthForm.Input type=\"text\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043b\u043e\u0433\u0438\u043d\" \/>\n <\/AuthForm.Field>\n <AuthForm.Field title=\"\u041f\u0430\u0440\u043e\u043b\u044c\">\n <AuthForm.Input placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u0430\u0440\u043e\u043b\u044c\" type=\"password\" \/>\n <\/AuthForm.Field>\n <AuthForm.SubmitButton \/>\n <\/AuthForm>\n )\n}\n<\/code><\/pre>\n\n\n\n\u0422\u0430\u043a, \u0442\u0430\u043c \u0433\u0434\u0435 \u0432\u0445\u043e\u0434 \u043f\u043e \u043a\u0430\u0440\u0442\u0435 \u0438 \u0441\u0447\u0435\u0442\u0443 \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430:<\/p>\n\n\n\n
import React from 'react';\n\nimport AuthForm from \".\/compound-form\";\n\nexport default function AccountAuth() {\n return (\n <AuthForm theme={'dark'}>\n <AuthForm.Field title=\"\u041d\u043e\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b \u0438\u043b\u0438 \u0441\u0447\u0435\u0442\u0430\">\n <AuthForm.Input\n type=\"text\"\n placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b \u0438\u043b\u0438 \u0441\u0447\u0435\u0442\u0430\"\n \/>\n <\/AuthForm.Field>\n <AuthForm.SubmitButton \/>\n <\/AuthForm>\n )\n}<\/code><\/pre>\n\n\n\n\u0422\u0430\u043a, \u0442\u0430\u043c \u0433\u0434\u0435 \u0432\u0445\u043e\u0434 \u043f\u043e \u043a\u0430\u0440\u0442\u0435 \u0438 \u0441\u0447\u0435\u0442\u0443 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044b:<\/p>\n\n\n\n
import React from 'react';\n\nimport AuthForm from \".\/compound-form\";\n\nexport default function AccountAuth() {\n return (\n <AuthForm theme={'dark'}>\n <AuthForm.CardInput\n type=\"text\"\n placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u043e\u043c\u0435\u0440 \u043a\u0430\u0440\u0442\u044b \u0438\u043b\u0438 \u0441\u0447\u0435\u0442\u0430\"\n \/>\n <AuthForm.SubmitButton \/>\n <\/AuthForm>\n )\n}<\/code><\/pre>\n\n\n\n\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e Compound Components \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 React \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0441 \u0435\u0434\u0438\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u043e\u0439, \u043d\u043e \u0447\u0430\u0441\u0442\u0438 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0438\u043b\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043e\u043e\u0431\u0449\u0435. \u0410 \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043d\u043e\u0432\u043e\u0439 \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0438 \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0443\u0436\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0434\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n\n\n\n
\n\n\n\n\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u044e\u0434\u0430 \u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0434\u043b\u044f Compound Components, \u0433\u0434\u0435 \u0441 \u0435\u0433\u043e \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0430\u043a\u043a\u043e\u0440\u0434\u0435\u043e\u043d:<\/p>\n\n\n\n
import React, {\n createContext,\n useContext,\n useState,\n useCallback,\n useMemo\n} from \"react\";\nimport styled from \"styled-components\";\nimport { Icon } from \"semantic-ui-react\";\n\nconst StyledAccordion = styled.div`\n border: solid 1px black;\n border-radius: 4px;\n margin: 10px;\n`;\n\nconst StyledAccordionItem = styled.button`\n align-items: center;\n background: none;\n border: none;\n display: flex;\n font-weight: normal;\n font-size: 1em;\n justify-content: space-between;\n padding: 10px;\n text-align: left;\n width: 100%;\n\n &:focus {\n box-shadow: 0 0 2px 1px black;\n }\n`;\n\nconst Item = styled.div`\n border-top: 1px solid black;\n\n &:first-child {\n border-top: 0;\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n }\n\n &:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n }\n\n &:nth-child(odd) {\n background-color: ${({ striped }) => (striped ? \"\t#F0F0F0\" : \"transparent\")};\n }\n`;\n\nconst ExpandableSection = styled.section`\n background: #e8f4f8;\n border-top: solid 1px black;\n padding: 10px;\n padding-left: 20px;\n`;\n\nconst AccordionContext = createContext();\n\nfunction useAccordionContext() {\n const context = useContext(AccordionContext);\n if (!context) {\n \/\/ Error message should be more descriptive\n throw new Error(\"No context found for Accordion\");\n }\n return context;\n}\n\nfunction Accordion({ children, defaultExpanded = \"wine\", striped = true }) {\n const [activeItem, setActiveItem] = useState(defaultExpanded);\n const setToggle = useCallback(\n (value) => {\n setActiveItem(() => {\n if (activeItem !== value) return value;\n return \"\";\n });\n },\n [setActiveItem, activeItem]\n );\n\n const value = useMemo(\n () => ({\n activeItem,\n setToggle,\n defaultExpanded,\n striped\n }),\n [setToggle, activeItem, striped, defaultExpanded]\n );\n\n return (\n <AccordionContext.Provider value={value}>\n <StyledAccordion>{children}<\/StyledAccordion>\n <\/AccordionContext.Provider>\n );\n}\n\nfunction ChevronComponent({ isExpanded }) {\n return isExpanded ? <Icon name=\"chevron up\" \/> : <Icon name=\"chevron down\" \/>;\n}\n\nAccordion.Item = function AccordionItem({ value, children }) {\n const { activeItem, setToggle, striped } = useAccordionContext();\n\n return (\n <Item striped={striped}>\n <StyledAccordionItem\n aria-controls={`${value}-panel`}\n aria-disabled=\"false\"\n aria-expanded={value === activeItem}\n id={`${value}-header`}\n onClick={() => setToggle(value)}\n selected={value === activeItem}\n type=\"button\"\n value={value}\n >\n {children}\n <ChevronComponent isExpanded={activeItem === value} \/>\n <\/StyledAccordionItem>\n <ExpandableSection\n aria-hidden={activeItem !== value}\n aria-labelledby={`${value}-header`}\n expanded\n hidden={activeItem !== value}\n id={`${value}-panel`}\n >\n Showing expanded content about {value}\n <\/ExpandableSection>\n <\/Item>\n );\n}\n\nexport { Accordion };\n<\/code><\/pre>\n\n\n\n\u0418 \u0432\u043e\u0442 \u043a\u0430\u043a \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f:<\/p>\n\n\n\n
import React from \"react\";\nimport { Accordion } from \".\/Accordion\";\nimport \".\/styles.css\";\n\nexport default function App() {\n return (\n <div className=\"App\">\n <Accordion defaultExpanded=\"beer\" striped>\n <Accordion.Item value=\"cider\">Cider<\/Accordion.Item>\n <Accordion.Item value=\"beer\">Beer<\/Accordion.Item>\n <Accordion.Item value=\"wine\">Wine<\/Accordion.Item>\n <Accordion.Item value=\"milk\">Milk<\/Accordion.Item>\n <Accordion.Item value=\"patron\">Caf\u00e9 Patron<\/Accordion.Item>\n <\/Accordion>\n <\/div>\n );\n}<\/code><\/pre>\n\n\n\n\u041f\u043e\u0434\u044b\u0442\u043e\u0436\u0438\u043c<\/h2>\n\n\n\n
\u041f\u0430\u0442\u0442\u0435\u0440\u043d Compound Components \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442, \u0435\u0441\u043b\u0438 \u0432\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0435\u0434\u0438\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0447\u0430\u0441\u0442\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u043a \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043d\u043e \u0432 \u043e\u0442\u0440\u044b\u0432\u0435 \u043e\u0442 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0443\u0442.<\/p>\n\n\n\n
\u0422\u0430\u043a \u0436\u0435, \u0435\u0441\u043b\u0438 \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0443 \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0443\u0447\u0430 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u0442\u0438\u043f\u0430: has\u0427\u0442\u043e\u0422\u043e\u041e\u0434\u043d\u043e=true, with\u0427\u0442\u043e\u0422\u043e\u0414\u0440\u0443\u0433\u043e\u0435=true, show\u0427\u0442\u043e\u0422\u043e\u0422\u0440\u0435\u0442\u044c\u0435=true, \u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0438\u043b\u043b\u0438\u043e\u043d \u0443\u0441\u043b\u043e\u0432\u0438\u0439, \u0447\u0442\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0430 \u0447\u0442\u043e \u043d\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c, \u0442\u043e \u044d\u0442\u043e \u044f\u0432\u043d\u044b\u0439 \u0437\u043d\u0430\u043a, \u0447\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Compound Components.<\/p>\n","protected":false},"excerpt":{"rendered":"
\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0445\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e \u043e\u0434\u0438\u043d \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0439 \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 React \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 – Compound components.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[188,65],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2279"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2279"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2279\/revisions"}],"predecessor-version":[{"id":2280,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2279\/revisions\/2280"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}