Components/Calculation: add build-action

Components/Calculation/builders/build-action.tsx

@@ -0,0 +1,20 @@
+import { observer } from 'mobx-react-lite';
+import { useStatus } from 'stores/calculation/statuses/hooks';
+import { getAction } from '../config/map-actions';
+import type { BuilderProps } from './types';
+
+export default function buildAction({ elementName, Component, ...props }: BuilderProps) {
+  const actionName = getAction(elementName);
+
+  return observer(() => {
+    const { status } = useStatus(elementName);
+
+    return (
+      <Component
+        status={status}
+        {...props}
+        action={() => import(`process/${actionName}`).then((m) => m.default())}
+      />
+    );
+  });
+}

Components/Calculation/config/map-actions.ts

@@ -0,0 +1,11 @@
+export const elementsToActions: Record<string, string> = {
+  btnCalculate: 'calculate',
+  btnCreateKP: 'create-kp',
+};
+
+export type Elements = keyof typeof elementsToActions;
+
+export function getAction(elementName: Elements) {
+  const actionName = elementsToActions[elementName];
+  return actionName;
+}

Elements/Button.tsx

@@ -0,0 +1,28 @@
+import type { ButtonProps } from 'antd';
+import { Button } from 'antd';
+import { throttle } from 'lodash';
+import type { Status } from './types';
+
+type ElementProps = {
+  status: Status;
+  action: () => void;
+  text: string;
+};
+
+export default function Element({ status, action, text }: ElementProps) {
+  const throttledAction = throttle(action, 1200, {
+    trailing: false,
+  });
+
+  return (
+    <Button
+      disabled={status === 'Disabled'}
+      loading={status === 'Loading'}
+      onClick={throttledAction}
+    >
+      {text}
+    </Button>
+  );
+}
+
+export type { ButtonProps };

process/calculate/index.ts

@@ -0,0 +1 @@
+export default () => {};

process/create-kp/index.ts

@@ -0,0 +1 @@
+export default () => {};