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 ( +