evo/EvoCalculator.Client2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

html: add htmlfor for elements

Browse Source
This commit is contained in:
Chika 2022-07-17 10:22:11 +03:00
parent e6f6639366
commit ab0670ddf8
3 changed files with 48 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
Components/Calculation/config/elements-render/override.tsx
View File

@ -19,6 +19,7 @@ const defaultLinkProps: ComponentProps<typeof Link> = {
const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
selectLead: {
render: () => {
const elementName = 'selectLead';
const title = titles.selectLead;
const valueName = map.selectLead;
const Component = components.selectLead;
@ -26,7 +27,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
const builder = builders.selectLead;
const Element = builder(Component, {
elementName: 'selectLead',
elementName,
valueName,
});
@ -36,9 +37,13 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
});
return (
<Container key="selectLead">
<Head title={title} addon={<LinkComponent {...defaultLinkProps} />} />
<Element {...props} />
<Container key={elementName}>
<Head
htmlFor={elementName}
title={title}
addon={<LinkComponent {...defaultLinkProps} />}
/>
<Element {...props} id={elementName} />
</Container>
);
},
@ -46,6 +51,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
selectOpportunity: {
render: () => {
const elementName = 'selectOpportunity';
const title = titles.selectOpportunity;
const valueName = map.selectOpportunity;
const Component = components.selectOpportunity;
@ -53,7 +59,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
const builder = builders.selectOpportunity;
const Element = builder(Component, {
elementName: 'selectOpportunity',
elementName,
valueName,
});
@ -63,9 +69,13 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
});
return (
<Container key="selectOpportunity">
<Head title={title} addon={<LinkComponent {...defaultLinkProps} />} />
<Element {...props} />
<Container key={elementName}>
<Head
htmlFor={elementName}
title={title}
addon={<LinkComponent {...defaultLinkProps} />}
/>
<Element {...props} id={elementName} />
</Container>
);
},
@ -73,6 +83,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
selectQuote: {
render: () => {
const elementName = 'selectQuote';
const title = titles.selectQuote;
const valueName = map.selectQuote;
const Component = components.selectQuote;
@ -80,7 +91,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
const builder = builders.selectQuote;
const Element = builder(Component, {
elementName: 'selectQuote',
elementName,
valueName,
});
@ -90,9 +101,13 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
});
return (
<Container key="selectQuote">
<Head title={title} addon={<LinkComponent {...defaultLinkProps} />} />
<Element {...props} />
<Container key={elementName}>
<Head
htmlFor={elementName}
title={title}
addon={<LinkComponent {...defaultLinkProps} />}
/>
<Element {...props} id={elementName} />
</Container>
);
},
@ -100,6 +115,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
tbxVehicleTaxInYear: {
render: () => {
const elementName = 'tbxVehicleTaxInYear';
const title = titles.tbxVehicleTaxInYear;
const valueName = map.tbxVehicleTaxInYear;
const Component = components.tbxVehicleTaxInYear;
@ -107,15 +123,15 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
const builder = builders.tbxVehicleTaxInYear;
const Element = builder(Component, {
elementName: 'tbxVehicleTaxInYear',
elementName,
valueName,
});
return (
<Tooltip title="Без учета налога на роскошь" placement="topLeft">
<Container>
<Head title={title} />
<Element {...props} />
<Head htmlFor={elementName} title={title} />
<Element {...props} id={elementName} />
</Container>
</Tooltip>
);
@ -124,6 +140,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
selectHighSeasonStart: {
render: () => {
const elementName = 'selectHighSeasonStart';
const title = titles.selectHighSeasonStart;
const valueName = map.selectHighSeasonStart;
const Component = components.selectHighSeasonStart;
@ -131,15 +148,15 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
const builder = builders.selectHighSeasonStart;
const Element = builder(Component, {
elementName: 'selectHighSeasonStart',
elementName,
valueName,
});
return (
<Tooltip title="С какого платежа начинается полный высокий сезон" placement="topLeft">
<Container>
<Head title={title} />
<Element {...props} />
<Head htmlFor={elementName} title={title} />
<Element {...props} id={elementName} />
</Container>
</Tooltip>
);

4
Components/Calculation/config/elements-render/render.jsx
View File

@ -21,8 +21,8 @@ const render = Object.keys(map).reduce((acc, elementName) => {
acc[elementName] = {
render: () => (
<Container key={elementName}>
<Head title={title} />
<Element {...props} />
<Head title={title} htmlFor={elementName} />
<Element {...props} id={elementName} />
</Container>
),
};

14
Components/Layout/Element.tsx
View File

@ -3,7 +3,7 @@ import styled from 'styled-components';
import { Flex } from 'UIKit/grid';
import { min } from 'UIKit/mq';
const ElementTitle = styled.h5`
const ElementTitle = styled.label`
color: rgba(0, 0, 0, 0.75);
font-weight: 600;
font-size: 13px;
@ -18,10 +18,18 @@ const ElementTitle = styled.h5`
}
`;
export function Head({ title, addon }: { title: string; addon?: ReactNode }) {
export function Head({
title,
addon,
htmlFor,
}: {
title: string;
addon?: ReactNode;
htmlFor: string;
}) {
return (
<Flex flexDirection={['row']} justifyContent={['space-between']} alignItems={['center']}>
<ElementTitle>{title}</ElementTitle>
<ElementTitle htmlFor={htmlFor}>{title}</ElementTitle>
{addon}
</Flex>
);