210 lines
5.6 KiB
TypeScript
210 lines
5.6 KiB
TypeScript
/* eslint-disable object-curly-newline */
|
||
import Link from 'Elements/Link';
|
||
import Tooltip from 'Elements/Tooltip';
|
||
import type { ReactNode } from 'react';
|
||
import styled from 'styled-components';
|
||
import { Flex } from 'UIKit/grid';
|
||
import { min } from 'UIKit/mq';
|
||
import buildReadonly from '../builders/build-readonly';
|
||
import builders from './elements-builders';
|
||
import components from './elements-components';
|
||
import elementsProps from './elements-props';
|
||
import titles from './elements-titles';
|
||
import map from './map';
|
||
|
||
const ElementTitle = styled.h5`
|
||
color: rgba(0, 0, 0, 0.75);
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
margin: 0 8px 3px 0;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
|
||
${min('laptop')} {
|
||
font-size: 14px;
|
||
}
|
||
`;
|
||
|
||
function Head({ title, addon }: { title: string; addon?: ReactNode }) {
|
||
return (
|
||
<Flex
|
||
flexDirection={['column', 'row']}
|
||
justifyContent={['', 'space-between']}
|
||
alignItems={['', 'center']}
|
||
>
|
||
<ElementTitle>{title}</ElementTitle>
|
||
{addon}
|
||
</Flex>
|
||
);
|
||
}
|
||
|
||
function Container({ children }: { children: ReactNode }) {
|
||
return <Flex flexDirection="column">{children}</Flex>;
|
||
}
|
||
|
||
type RenderProps = { render: () => JSX.Element };
|
||
|
||
const renderElements = (Object.keys(map) as (keyof typeof map)[]).reduce((acc, elementName) => {
|
||
const title = titles[elementName];
|
||
const valueName = map[elementName];
|
||
const Component = components[elementName];
|
||
const props = elementsProps[elementName];
|
||
const builder = builders[elementName];
|
||
|
||
const Element = builder(Component, {
|
||
elementName,
|
||
valueName,
|
||
});
|
||
|
||
acc[elementName] = {
|
||
render: () => (
|
||
<Container key={elementName}>
|
||
<Head title={title} />
|
||
<Element {...props} />
|
||
</Container>
|
||
),
|
||
};
|
||
|
||
return acc;
|
||
}, {} as Record<keyof typeof map, RenderProps>);
|
||
|
||
const defaultLinkProps = {
|
||
text: 'Открыть в CRM',
|
||
type: 'link',
|
||
};
|
||
|
||
const overrideRenderElements: Partial<Record<keyof typeof map, RenderProps>> = {
|
||
selectLead: {
|
||
render: () => {
|
||
const title = titles.selectLead;
|
||
const valueName = map.selectLead;
|
||
const Component = components.selectLead;
|
||
const props = elementsProps.selectLead;
|
||
const builder = builders.selectLead;
|
||
|
||
const Element = builder(Component, {
|
||
elementName: 'selectLead',
|
||
valueName,
|
||
});
|
||
|
||
const LinkComponent = buildReadonly(Link, {
|
||
elementName: 'linkLeadUrl',
|
||
valueName: 'leadUrl',
|
||
});
|
||
|
||
return (
|
||
<Container key="selectLead">
|
||
<Head title={title} addon={<LinkComponent {...defaultLinkProps} />} />
|
||
<Element {...props} />
|
||
</Container>
|
||
);
|
||
},
|
||
},
|
||
|
||
selectOpportunity: {
|
||
render: () => {
|
||
const title = titles.selectOpportunity;
|
||
const valueName = map.selectOpportunity;
|
||
const Component = components.selectOpportunity;
|
||
const props = elementsProps.selectOpportunity;
|
||
const builder = builders.selectOpportunity;
|
||
|
||
const Element = builder(Component, {
|
||
elementName: 'selectOpportunity',
|
||
valueName,
|
||
});
|
||
|
||
const LinkComponent = buildReadonly(Link, {
|
||
elementName: 'linkOpportunityUrl',
|
||
valueName: 'opportunityUrl',
|
||
});
|
||
|
||
return (
|
||
<Container key="selectOpportunity">
|
||
<Head title={title} addon={<LinkComponent {...defaultLinkProps} />} />
|
||
<Element {...props} />
|
||
</Container>
|
||
);
|
||
},
|
||
},
|
||
|
||
selectQuote: {
|
||
render: () => {
|
||
const title = titles.selectQuote;
|
||
const valueName = map.selectQuote;
|
||
const Component = components.selectQuote;
|
||
const props = elementsProps.selectQuote;
|
||
const builder = builders.selectQuote;
|
||
|
||
const Element = builder(Component, {
|
||
elementName: 'selectQuote',
|
||
valueName,
|
||
});
|
||
|
||
const LinkComponent = buildReadonly(Link, {
|
||
elementName: 'linkQuoteUrl',
|
||
valueName: 'quoteUrl',
|
||
});
|
||
|
||
return (
|
||
<Container key="selectQuote">
|
||
<Head title={title} addon={<LinkComponent {...defaultLinkProps} />} />
|
||
<Element {...props} />
|
||
</Container>
|
||
);
|
||
},
|
||
},
|
||
|
||
tbxVehicleTaxInYear: {
|
||
render: () => {
|
||
const title = titles.tbxVehicleTaxInYear;
|
||
const valueName = map.tbxVehicleTaxInYear;
|
||
const Component = components.tbxVehicleTaxInYear;
|
||
const props = elementsProps.tbxVehicleTaxInYear;
|
||
const builder = builders.tbxVehicleTaxInYear;
|
||
|
||
const Element = builder(Component, {
|
||
elementName: 'tbxVehicleTaxInYear',
|
||
valueName,
|
||
});
|
||
|
||
return (
|
||
<Tooltip title="Без учета налога на роскошь" placement="topLeft">
|
||
<Container>
|
||
<Head title={title} />
|
||
<Element {...props} />
|
||
</Container>
|
||
</Tooltip>
|
||
);
|
||
},
|
||
},
|
||
|
||
selectHighSeasonStart: {
|
||
render: () => {
|
||
const title = titles.selectHighSeasonStart;
|
||
const valueName = map.selectHighSeasonStart;
|
||
const Component = components.selectHighSeasonStart;
|
||
const props = elementsProps.selectHighSeasonStart;
|
||
const builder = builders.selectHighSeasonStart;
|
||
|
||
const Element = builder(Component, {
|
||
elementName: 'selectHighSeasonStart',
|
||
valueName,
|
||
});
|
||
|
||
return (
|
||
<Tooltip title="С какого платежа начинается полный высокий сезон" placement="topLeft">
|
||
<Container>
|
||
<Head title={title} />
|
||
<Element {...props} />
|
||
</Container>
|
||
</Tooltip>
|
||
);
|
||
},
|
||
},
|
||
};
|
||
|
||
export default Object.assign(renderElements, overrideRenderElements);
|