diff --git a/Components/Calculation/builders/build-options.tsx b/Components/Calculation/builders/build-options.tsx
new file mode 100644
index 0000000..ce973d9
--- /dev/null
+++ b/Components/Calculation/builders/build-options.tsx
@@ -0,0 +1,30 @@
+import { observer } from 'mobx-react-lite';
+import { useOptions } from 'stores/calculation/options/hooks';
+import { useStatus } from 'stores/calculation/statuses/hooks';
+import { useValidation } from 'stores/calculation/validation/hooks';
+import { useValue } from 'stores/calculation/values/hooks';
+import { getValueName } from '../config/map';
+import type { BuilderProps } from './types';
+
+export default function buildValueElement({ elementName, Component, ...props }: BuilderProps) {
+ const valueName = getValueName(elementName);
+
+ return observer(() => {
+ const { value, setValue } = useValue(valueName);
+ const { status } = useStatus(elementName);
+ const { isValid, help } = useValidation(elementName);
+ const { options } = useOptions(elementName);
+
+ return (
+
+ );
+ });
+}
diff --git a/Components/Calculation/builders/build-readonly.tsx b/Components/Calculation/builders/build-readonly.tsx
new file mode 100644
index 0000000..5a48756
--- /dev/null
+++ b/Components/Calculation/builders/build-readonly.tsx
@@ -0,0 +1,14 @@
+import { observer } from 'mobx-react-lite';
+import { useValue } from 'stores/calculation/values/hooks';
+import { getValueName } from '../config/map';
+import type { BuilderProps } from './types';
+
+export default function buildValueElement({ elementName, Component, ...props }: BuilderProps) {
+ const valueName = getValueName(elementName);
+
+ return observer(() => {
+ const { value } = useValue(valueName);
+
+ return ;
+ });
+}
diff --git a/Components/Calculation/builders/build-value.tsx b/Components/Calculation/builders/build-value.tsx
new file mode 100644
index 0000000..7efea46
--- /dev/null
+++ b/Components/Calculation/builders/build-value.tsx
@@ -0,0 +1,27 @@
+import { observer } from 'mobx-react-lite';
+import { useStatus } from 'stores/calculation/statuses/hooks';
+import { useValidation } from 'stores/calculation/validation/hooks';
+import { useValue } from 'stores/calculation/values/hooks';
+import { getValueName } from '../config/map';
+import type { BuilderProps } from './types';
+
+export default function buildValueElement({ elementName, Component, ...props }: BuilderProps) {
+ const valueName = getValueName(elementName);
+
+ return observer(() => {
+ const { value, setValue } = useValue(valueName);
+ const { status } = useStatus(elementName);
+ const { isValid, help } = useValidation(elementName);
+
+ return (
+
+ );
+ });
+}
diff --git a/Components/Calculation/builders/types.ts b/Components/Calculation/builders/types.ts
new file mode 100644
index 0000000..4612989
--- /dev/null
+++ b/Components/Calculation/builders/types.ts
@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+import type { Elements } from '../config/map';
+
+export interface BuilderProps {
+ elementName: Elements;
+ Component: FC;
+ style: React.CSSProperties;
+}
diff --git a/Elements/Checkbox.tsx b/Elements/Checkbox.tsx
new file mode 100644
index 0000000..6e4c72c
--- /dev/null
+++ b/Elements/Checkbox.tsx
@@ -0,0 +1,27 @@
+import type { CheckboxProps } from 'antd';
+import { Checkbox, Form } from 'antd';
+import type { BaseElementProps } from './types';
+
+const { Item: FormItem } = Form;
+
+export default function Element({
+ value,
+ setValue,
+ status,
+ isValid,
+ help,
+ ...props
+}: BaseElementProps) {
+ return (
+
+ setValue(e.target.value)}
+ disabled={status === 'Disabled'}
+ {...props}
+ />
+
+ );
+}
+
+export type { CheckboxProps };
diff --git a/Elements/Input.tsx b/Elements/Input.tsx
new file mode 100644
index 0000000..3757659
--- /dev/null
+++ b/Elements/Input.tsx
@@ -0,0 +1,27 @@
+import type { InputProps } from 'antd';
+import { Form, Input } from 'antd';
+import type { BaseElementProps } from './types';
+
+const { Item: FormItem } = Form;
+
+export default function Element({
+ value,
+ setValue,
+ status,
+ isValid,
+ help,
+ ...props
+}: BaseElementProps) {
+ return (
+
+ setValue(e.target.value)}
+ disabled={status === 'Disabled'}
+ {...props}
+ />
+
+ );
+}
+
+export type { InputProps };
diff --git a/Elements/InputNumber.tsx b/Elements/InputNumber.tsx
new file mode 100644
index 0000000..ed5db40
--- /dev/null
+++ b/Elements/InputNumber.tsx
@@ -0,0 +1,34 @@
+import type { InputNumberProps } from 'antd';
+import { Form, InputNumber } from 'antd';
+import type { BaseElementProps } from './types';
+
+const { Item: FormItem } = Form;
+
+const parser = (val?: string): number => {
+ const res = val?.replace(/[^0-9.,]+/, '');
+ if (!res || res === '') return 0;
+ return parseFloat(res);
+};
+
+export default function Element({
+ value = 0,
+ setValue,
+ status,
+ isValid,
+ help,
+ ...props
+}: BaseElementProps) {
+ return (
+
+ setValue(val)}
+ disabled={status === 'Disabled'}
+ parser={parser}
+ {...props}
+ />
+
+ );
+}
+
+export type { InputNumberProps };
diff --git a/Elements/Link.tsx b/Elements/Link.tsx
new file mode 100644
index 0000000..4525c9b
--- /dev/null
+++ b/Elements/Link.tsx
@@ -0,0 +1,20 @@
+import DownloadOutlined from '@ant-design/icons/lib/icons/DownloadOutlined';
+import type { ButtonProps } from 'antd';
+import { Button } from 'antd';
+import type { BaseElementProps } from './types';
+
+export default function Element({ value, setValue, status, ...props }: BaseElementProps) {
+ return (
+ }
+ {...props}
+ />
+ );
+}
+
+export type { ButtonProps as LinkProps };
diff --git a/Elements/Radio.tsx b/Elements/Radio.tsx
new file mode 100644
index 0000000..c494615
--- /dev/null
+++ b/Elements/Radio.tsx
@@ -0,0 +1,33 @@
+import type { RadioProps } from 'antd';
+import { Form, Radio } from 'antd';
+import type { BaseElementProps, BaseOption } from './types';
+
+const { Item: FormItem } = Form;
+
+type ElementProps = BaseElementProps & {
+ options: BaseOption[];
+};
+
+export default function Element({
+ value = null,
+ setValue,
+ options,
+ status,
+ isValid,
+ help,
+ ...props
+}: ElementProps) {
+ return (
+
+ setValue(e.target.value)}
+ disabled={status === 'Disabled'}
+ {...props}
+ />
+
+ );
+}
+
+export type { RadioProps };
diff --git a/Elements/Select.tsx b/Elements/Select.tsx
new file mode 100644
index 0000000..9018450
--- /dev/null
+++ b/Elements/Select.tsx
@@ -0,0 +1,40 @@
+import type { SelectProps } from 'antd';
+import { Form, Select } from 'antd';
+import type { BaseElementProps, BaseOption } from './types';
+
+const { Item: FormItem } = Form;
+
+type ElementProps = BaseElementProps & {
+ options: BaseOption[];
+};
+
+export default function Element({
+ value = null,
+ setValue,
+ options,
+ status,
+ isValid,
+ help,
+ ...props
+}: ElementProps) {
+ return (
+
+
+ );
+}
+
+export type { SelectProps };
diff --git a/Elements/Switch.tsx b/Elements/Switch.tsx
new file mode 100644
index 0000000..bbda85e
--- /dev/null
+++ b/Elements/Switch.tsx
@@ -0,0 +1,27 @@
+import type { SwitchProps } from 'antd';
+import { Form, Switch } from 'antd';
+import type { BaseElementProps } from './types';
+
+const { Item: FormItem } = Form;
+
+export default function Element({
+ value,
+ setValue,
+ status,
+ isValid,
+ help,
+ ...props
+}: BaseElementProps) {
+ return (
+
+ setValue(enabled)}
+ disabled={status === 'Disabled'}
+ {...props}
+ />
+
+ );
+}
+
+export type { SwitchProps };
diff --git a/Elements/Text.tsx b/Elements/Text.tsx
new file mode 100644
index 0000000..e6ed35e
--- /dev/null
+++ b/Elements/Text.tsx
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import type { BaseElementProps } from './types';
+
+const Text = styled.span`
+ margin-bottom: 18px;
+ font-size: 0.85rem;
+`;
+
+export default function Element({ value, ...props }: BaseElementProps) {
+ return {value};
+}
+
+type TextProps = {
+ middleware: (value: any) => string;
+};
+
+export type { TextProps };
diff --git a/Elements/types.ts b/Elements/types.ts
new file mode 100644
index 0000000..fce032b
--- /dev/null
+++ b/Elements/types.ts
@@ -0,0 +1,15 @@
+export type Status = 'Default' | 'Disabled' | 'Loading' | 'Hidden';
+
+export type BaseElementProps = {
+ value: ValueType;
+ setValue: (value: ValueType) => void;
+ status: Status;
+ isValid: boolean;
+ help: string;
+};
+
+export type BaseOption = {
+ name: string;
+ label: string;
+ value: any;
+};
diff --git a/stores/calculation/options/index.ts b/stores/calculation/options/index.ts
index d1c6119..f54cc96 100644
--- a/stores/calculation/options/index.ts
+++ b/stores/calculation/options/index.ts
@@ -4,10 +4,11 @@
/* eslint-disable object-curly-newline */
/* eslint-disable import/no-cycle */
import type { Elements } from 'Components/Calculation/config/map';
+import type { BaseOption } from 'Elements/types';
import { mergeWith } from 'lodash';
import { makeAutoObservable } from 'mobx';
import RootStore from 'stores/root';
-import { CalculationOptions, Filter, Options, OptionsFilters } from './types';
+import type { CalculationOptions, Filter, OptionsFilters } from './types';
const EXCLUDE_RESET_ELEMENTS: Elements[] = ['selectTechnicalCard', 'selectTownRegistration'];
@@ -59,7 +60,7 @@ export default class OptionsStore {
return filter ? options && filter(options) : options;
}
- setOptions = (elementName: Elements, options: Options) => {
+ setOptions = (elementName: Elements, options: BaseOption[]) => {
this.options[elementName] = options;
};
diff --git a/stores/calculation/options/types.ts b/stores/calculation/options/types.ts
index 9eab488..d2b0a2b 100644
--- a/stores/calculation/options/types.ts
+++ b/stores/calculation/options/types.ts
@@ -1,12 +1,7 @@
import type { Elements } from 'Components/Calculation/config/map';
+import type { BaseOption } from 'Elements/types';
-export type BaseOption = {
- name: string;
- value: any;
-};
+export type CalculationOptions = Record;
-export type Options = BaseOption[];
-export type CalculationOptions = Record;
-
-export type Filter = (options: Options) => Options;
+export type Filter = (options: BaseOption[]) => BaseOption[];
export type OptionsFilters = Record;
diff --git a/stores/calculation/statuses/index.ts b/stores/calculation/statuses/index.ts
index 2fc8764..d951b99 100644
--- a/stores/calculation/statuses/index.ts
+++ b/stores/calculation/statuses/index.ts
@@ -1,9 +1,10 @@
/* eslint-disable object-curly-newline */
/* eslint-disable import/no-cycle */
import type { Elements } from 'Components/Calculation/config/map';
+import type { Status } from 'Elements/types';
import { makeAutoObservable } from 'mobx';
import RootStore from 'stores/root';
-import type { CalculationStatuses, Status } from './types';
+import type { CalculationStatuses } from './types';
export default class StatusStore {
root: RootStore;
diff --git a/stores/calculation/statuses/types.ts b/stores/calculation/statuses/types.ts
index cd71f1e..8d311b2 100644
--- a/stores/calculation/statuses/types.ts
+++ b/stores/calculation/statuses/types.ts
@@ -1,5 +1,4 @@
import type { Elements } from 'Components/Calculation/config/map';
-
-export type Status = 'Default' | 'Disabled' | 'Loading' | 'Hidden';
+import type { Status } from 'Elements/types';
export type CalculationStatuses = Partial>;
diff --git a/stores/calculation/validation/hooks.js b/stores/calculation/validation/hooks.js
index 1ff08af..49dfe04 100644
--- a/stores/calculation/validation/hooks.js
+++ b/stores/calculation/validation/hooks.js
@@ -11,5 +11,8 @@ export function useValidation(elementName) {
[$calculation.$validation, elementName]
);
- return validationResult.get();
+ return {
+ ...validationResult.get(),
+ help: 'Некорректные данные',
+ };
}