diff --git a/Components/Calculation/builders/build-computed.tsx b/Components/Calculation/builders/build-computed.tsx new file mode 100644 index 0000000..26329a3 --- /dev/null +++ b/Components/Calculation/builders/build-computed.tsx @@ -0,0 +1,20 @@ +import { observer } from 'mobx-react-lite'; +import { useStatus } from 'stores/calculation/statuses/hooks'; +import { useValidation } from 'stores/calculation/validation/hooks'; +import { useComputedValue } from 'stores/calculation/values/hooks'; +import { getComputedValueName } from '../config/map-computed'; +import type { BuilderProps } from './types'; + +export default function buildComputedValue({ elementName, Component, ...props }: BuilderProps) { + const computedValueName = getComputedValueName(elementName); + + return observer(() => { + const { computedValue } = useComputedValue(computedValueName); + const { status } = useStatus(elementName); + const { isValid, help } = useValidation(elementName); + + return ( + + ); + }); +} diff --git a/Components/Calculation/builders/build-options.tsx b/Components/Calculation/builders/build-options.tsx index ce973d9..11f54a0 100644 --- a/Components/Calculation/builders/build-options.tsx +++ b/Components/Calculation/builders/build-options.tsx @@ -3,7 +3,7 @@ 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 { getValueName } from '../config/map-values'; import type { BuilderProps } from './types'; export default function buildValueElement({ elementName, Component, ...props }: BuilderProps) { diff --git a/Components/Calculation/builders/build-readonly.tsx b/Components/Calculation/builders/build-readonly.tsx index 5a48756..23edf34 100644 --- a/Components/Calculation/builders/build-readonly.tsx +++ b/Components/Calculation/builders/build-readonly.tsx @@ -1,6 +1,6 @@ import { observer } from 'mobx-react-lite'; import { useValue } from 'stores/calculation/values/hooks'; -import { getValueName } from '../config/map'; +import { getValueName } from '../config/map-values'; import type { BuilderProps } from './types'; export default function buildValueElement({ elementName, Component, ...props }: BuilderProps) { diff --git a/Components/Calculation/builders/build-value.tsx b/Components/Calculation/builders/build-value.tsx index 7efea46..485cbe0 100644 --- a/Components/Calculation/builders/build-value.tsx +++ b/Components/Calculation/builders/build-value.tsx @@ -2,7 +2,7 @@ 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 { getValueName } from '../config/map-values'; import type { BuilderProps } from './types'; export default function buildValueElement({ elementName, Component, ...props }: BuilderProps) { diff --git a/Components/Calculation/builders/types.ts b/Components/Calculation/builders/types.ts index 4612989..c1d8743 100644 --- a/Components/Calculation/builders/types.ts +++ b/Components/Calculation/builders/types.ts @@ -1,5 +1,5 @@ import type { FC } from 'react'; -import type { Elements } from '../config/map'; +import type { Elements } from '../config/map-values'; export interface BuilderProps { elementName: Elements; diff --git a/Components/Calculation/config/map-computed.ts b/Components/Calculation/config/map-computed.ts new file mode 100644 index 0000000..602e322 --- /dev/null +++ b/Components/Calculation/config/map-computed.ts @@ -0,0 +1,14 @@ +import type { ComputedValues } from 'stores/calculation/values/computed'; + +export const elementsToComputed: Record = { + labelLeaseObjectRisk: 'leaseObjectRiskName', + tbxInsKaskoPriceLeasePeriod: 'insKaskoPriceLeasePeriod', + labelIrrInfo: 'irrInfo', + labelRegistrationDescription: 'registrationDescription', +}; + +export type Elements = keyof typeof elementsToComputed; + +export function getComputedValueName(elementName: Elements) { + return elementsToComputed[elementName]; +} diff --git a/Components/Calculation/config/map.ts b/Components/Calculation/config/map-values.ts similarity index 98% rename from Components/Calculation/config/map.ts rename to Components/Calculation/config/map-values.ts index 8b78c67..c912e39 100644 --- a/Components/Calculation/config/map.ts +++ b/Components/Calculation/config/map-values.ts @@ -1,4 +1,4 @@ -import { Values, ValuesTypes } from 'stores/calculation/values/types'; +import type { Values, ValuesTypes } from 'stores/calculation/values/types'; function wrapElementsMap>(arg: T) { return arg; @@ -150,14 +150,14 @@ export const elementsToValues = wrapElementsMap({ linkDownloadKp: 'kpUrl', }); -export type ElementsValues = typeof elementsToValues; +type ElementsValues = typeof elementsToValues; export type ElementsTypes = { [Key in keyof ElementsValues]: ValuesTypes[ElementsValues[Key]]; }; +export type Elements = keyof ElementsValues; + export function getValueName(elementName: Elements) { return elementsToValues[elementName]; } - -export type Elements = keyof ElementsValues; diff --git a/stores/calculation/options/index.ts b/stores/calculation/options/index.ts index f54cc96..e3aeb3c 100644 --- a/stores/calculation/options/index.ts +++ b/stores/calculation/options/index.ts @@ -3,7 +3,7 @@ /* eslint-disable no-confusing-arrow */ /* eslint-disable object-curly-newline */ /* eslint-disable import/no-cycle */ -import type { Elements } from 'Components/Calculation/config/map'; +import type { Elements } from 'Components/Calculation/config/map-values'; import type { BaseOption } from 'Elements/types'; import { mergeWith } from 'lodash'; import { makeAutoObservable } from 'mobx'; diff --git a/stores/calculation/options/types.ts b/stores/calculation/options/types.ts index d2b0a2b..2946c27 100644 --- a/stores/calculation/options/types.ts +++ b/stores/calculation/options/types.ts @@ -1,4 +1,4 @@ -import type { Elements } from 'Components/Calculation/config/map'; +import type { Elements } from 'Components/Calculation/config/map-values'; import type { BaseOption } from 'Elements/types'; export type CalculationOptions = Record; diff --git a/stores/calculation/statuses/index.ts b/stores/calculation/statuses/index.ts index d951b99..1cd812c 100644 --- a/stores/calculation/statuses/index.ts +++ b/stores/calculation/statuses/index.ts @@ -1,6 +1,6 @@ /* eslint-disable object-curly-newline */ /* eslint-disable import/no-cycle */ -import type { Elements } from 'Components/Calculation/config/map'; +import type { Elements } from 'Components/Calculation/config/map-values'; import type { Status } from 'Elements/types'; import { makeAutoObservable } from 'mobx'; import RootStore from 'stores/root'; diff --git a/stores/calculation/statuses/types.ts b/stores/calculation/statuses/types.ts index 8d311b2..d4202c3 100644 --- a/stores/calculation/statuses/types.ts +++ b/stores/calculation/statuses/types.ts @@ -1,4 +1,4 @@ -import type { Elements } from 'Components/Calculation/config/map'; +import type { Elements } from 'Components/Calculation/config/map-values'; import type { Status } from 'Elements/types'; export type CalculationStatuses = Partial>; diff --git a/stores/calculation/validation/index.ts b/stores/calculation/validation/index.ts index afd6872..dbb250c 100644 --- a/stores/calculation/validation/index.ts +++ b/stores/calculation/validation/index.ts @@ -1,7 +1,7 @@ /* eslint-disable import/no-cycle */ /* eslint-disable implicit-arrow-linebreak */ /* eslint-disable object-curly-newline */ -import type { Elements } from 'Components/Calculation/config/map'; +import type { Elements } from 'Components/Calculation/config/map-values'; import { makeAutoObservable, observable } from 'mobx'; import RootStore from 'stores/root'; import type { Error, Messages } from './types'; diff --git a/stores/calculation/validation/types.ts b/stores/calculation/validation/types.ts index bffacdd..d5ccfb3 100644 --- a/stores/calculation/validation/types.ts +++ b/stores/calculation/validation/types.ts @@ -1,4 +1,4 @@ -import type { Elements } from 'Components/Calculation/config/map'; +import type { Elements } from 'Components/Calculation/config/map-values'; import type { IObservableArray } from 'mobx'; export type Error = { name: string; text: string }; diff --git a/stores/calculation/values/computed.ts b/stores/calculation/values/computed.ts new file mode 100644 index 0000000..18a6f92 --- /dev/null +++ b/stores/calculation/values/computed.ts @@ -0,0 +1,30 @@ +/* eslint-disable import/no-cycle */ +import { makeAutoObservable } from 'mobx'; +import RootStore from 'stores/root'; + +export default class Computed { + root: RootStore; + + constructor(rootStore: RootStore) { + makeAutoObservable(this); + this.root = rootStore; + } + + get leaseObjectRiskName() { + return ''; + } + + get irrInfo() { + return ''; + } + + get registrationDescription() { + return ''; + } + + get insKaskoPriceLeasePeriod() { + return ''; + } +} + +export type ComputedValues = Exclude; diff --git a/stores/calculation/values/hooks.js b/stores/calculation/values/hooks.js index eed4937..999591a 100644 --- a/stores/calculation/values/hooks.js +++ b/stores/calculation/values/hooks.js @@ -15,9 +15,7 @@ export function useValue(valueName) { ); const setStoreValue = useDebouncedCallback( - (value) => { - $calculation.$values.setValue(valueName, value); - }, + (value) => $calculation.$values.setValue(valueName, value), DEBOUNCE_DELAY, { maxWait: 2000, @@ -29,3 +27,13 @@ export function useValue(valueName) { setValue: setStoreValue, }; } + +export function useComputedValue(valueName) { + const { $calculation } = useStore(); + + const computedValue = $calculation.$values.$computed[valueName]; + + return { + computedValue, + }; +} diff --git a/stores/calculation/values/index.ts b/stores/calculation/values/index.ts index 464f816..920e9cd 100644 --- a/stores/calculation/values/index.ts +++ b/stores/calculation/values/index.ts @@ -1,19 +1,22 @@ /* eslint-disable implicit-arrow-linebreak */ /* eslint-disable object-curly-newline */ /* eslint-disable import/no-cycle */ -import type { Elements, ElementsTypes } from 'Components/Calculation/config/map'; -import { getValueName } from 'Components/Calculation/config/map'; +import type { Elements, ElementsTypes } from 'Components/Calculation/config/map-values'; +import { getValueName } from 'Components/Calculation/config/map-values'; import { makeAutoObservable } from 'mobx'; import RootStore from '../../root'; +import Computed from './computed'; import type { CalculationValues, Values, ValuesTypes } from './types'; export default class ValuesStore { root: RootStore; values: CalculationValues = {}; + $computed: Computed; constructor(rootStore: RootStore) { makeAutoObservable(this); this.root = rootStore; + this.$computed = new Computed(rootStore); } hydrate = (initialValues: CalculationValues) => {