@boarteam/boar-pack-common-frontend 3.0.0 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-common-frontend",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Common frontend package for Boar Pack",
   "repository": "git@github.com:boarteam/boar-pack.git",
   "author": "Andrew Balakirev <balakirev.andrey@gmail.com>",
@@ -47,5 +47,5 @@
   "scripts": {
     "yalc:push": "yalc push"
   },
-  "gitHead": "36339bec16a3d1966bab8df4e10f3fa0ad49f4e4"
+  "gitHead": "008e1d42d47532005e1af1909d40befdebff5197"
 }

package/src/components/Descriptions/Descriptions.tsx

@@ -1,6 +1,6 @@
 import { ActionType } from "@ant-design/pro-table";
 import React, { Key, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { Badge, Button, Result, Tabs, TabsProps, Tooltip } from "antd";
+import { Badge, Button, Form, Result, Tabs, TabsProps, Tooltip } from "antd";
 import { DeleteOutlined, StopOutlined } from "@ant-design/icons";
 import { FormattedMessage, useIntl } from "react-intl";
 import { DescriptionsRefType, FieldsEdit, TDescriptionsProps, TGetOneParams } from "./descriptionTypes";
@@ -21,7 +21,7 @@ import { debounce } from "lodash";
 import { NamePath } from "antd/lib/form/interface";
 import { FieldData } from "rc-field-form/lib/interface";
 
-const useStyles = createStyles(({css}) => {
+const useStyles = createStyles(({ css }) => {
   return {
     antDescriptionsStyles: css`
       .ant-descriptions-item-content {
@@ -62,6 +62,7 @@ const DescriptionsComponent = <Entity extends Record<string | symbol, any>,
     columns,
     params,
     onEntityChange,
+    conditionalFieldsConfig,
     ...rest
   }: TDescriptionsProps<Entity,
     CreateDto,
@@ -80,13 +81,36 @@ const DescriptionsComponent = <Entity extends Record<string | symbol, any>,
   }
   form = editable.form;
 
+  const watchedValue = conditionalFieldsConfig
+    ? Form.useWatch(conditionalFieldsConfig.field, form)
+    : undefined;
+
+  const filteredColumns = React.useMemo(() => {
+    if (!conditionalFieldsConfig) {
+      return columns;
+    }
+
+    const { field, deps } = conditionalFieldsConfig;
+    const depsList = deps[watchedValue as string];
+
+    if (!depsList?.length) {
+      return columns;
+    }
+
+    // Always include the watched field itself
+    return columns.filter(col => {
+      const idx = col.dataIndex as string;
+      return idx === field || depsList.includes(idx);
+    });
+  }, [columns, watchedValue, conditionalFieldsConfig]);
+
   const actionRefComponent = useRef<ActionType>();
   const actionRef = actionRefProp || actionRefComponent;
   const intl = useIntl();
   const [data, setData] = useState<Partial<Entity> | undefined>(entity);
   const [loading, setLoading] = useState(false);
 
-  const sections = columnsToDescriptionItemProps(columns, mainTitle);
+  const sections = columnsToDescriptionItemProps(filteredColumns, mainTitle);
 
   const columnDataIndexToSection = sections.reduce((acc, section) => {
     section.columns.forEach(column => {

package/src/components/Descriptions/descriptionTypes.ts

@@ -35,7 +35,15 @@ export enum FieldsEdit {
   All = 'all'
 }
 
+export interface ConditionalFieldsConfig {
+  /** Which field to watch */
+  field: string;
+  /** Map of watched-value → array of dataIndex you want to show */
+  deps: Record<string, string[]>;
+}
+
 export type TDescriptionsProps<Entity, CreateDto, UpdateDto, TPathParams = object> = {
+  conditionalFieldsConfig?: ConditionalFieldsConfig;
   mainTitle?: ProColumns<Entity>['title'] | null,
   entity?: Partial<Entity>,
   getOne?: ({}: TGetOneParams & TPathParams) => Promise<Entity | null>,

package/src/components/Table/CreateEntityModal.tsx

@@ -1,7 +1,7 @@
 import { ProColumns } from "@ant-design/pro-components";
 import { Button, Modal } from "antd";
 import { MutableRefObject, useRef } from "react";
-import { Descriptions, DescriptionsRefType } from "../Descriptions";
+import { ConditionalFieldsConfig, Descriptions, DescriptionsRefType } from "../Descriptions";
 import { buildFieldsFromColumnsForDescriptionsDisplay } from "./tableTools";
 
 export interface CreateEntityModalProps<Entity> {
@@ -24,6 +24,8 @@ export interface CreateEntityModalProps<Entity> {
    * Receives the validated form data.
    */
   onSubmit: (data: any, descriptionsRef: MutableRefObject<DescriptionsRefType<Entity>>) => Promise<void>;
+  /** Configuration for conditional fields */
+  conditionalFieldsConfig?: ConditionalFieldsConfig
 }
 
 export function CreateEntityModal<
@@ -40,6 +42,7 @@ export function CreateEntityModal<
   idColumnName,
   onCancel,
   onSubmit,
+  conditionalFieldsConfig,
 }: CreateEntityModalProps<Entity>) {
   const descriptionsRef = useRef<DescriptionsRefType<Entity>>(null);
 
@@ -79,6 +82,7 @@ export function CreateEntityModal<
           editableKeys,
           actionRender: () => [],
         }}
+        conditionalFieldsConfig={conditionalFieldsConfig}
       />
     </Modal>
   );

package/src/components/Table/Table.tsx

@@ -55,6 +55,7 @@ const Table = <Entity extends Record<string | symbol, any>,
     columnsState: managedColumnsState,
     columnsSetSelect: managedColumnsSetSelect,
     popupCreation = false,
+    conditionalFieldsConfig,
     toolBarRender,
     params,
     editPopupTitle,
@@ -120,6 +121,7 @@ const Table = <Entity extends Record<string | symbol, any>,
     createButtonSize: rest.size,
     popupCreation,
     createNewDefaultParams,
+    conditionalFieldsConfig,
   });
 
   const { exportButton, importButton, setLastQueryParams } = useImportExport<TPathParams>({

package/src/components/Table/tableTypes.ts

@@ -6,6 +6,7 @@ import { TColumnsSet } from "./useColumnsSets";
 import { ColumnStateType } from "@ant-design/pro-table/es/typing";
 import { RowEditableConfig } from "@ant-design/pro-utils";
 import { ProColumns } from "@ant-design/pro-components";
+import { ConditionalFieldsConfig } from "../Descriptions";
 
 export type IWithId = {
   id: string | number,
@@ -96,6 +97,7 @@ interface BaseProps<Entity,
   viewOnly?: boolean;
   columnsSets?: TColumnsSet<Entity>[];
   popupCreation?: boolean;
+  conditionalFieldsConfig?: ConditionalFieldsConfig;
   columnsState?: ColumnStateType;
   columnsSetSelect?: () => React.ReactNode;
   editPopupTitle?: string;

package/src/components/Table/useCreation.tsx

@@ -32,6 +32,7 @@ export function useCreation<Entity, CreateDto, TPathParams = {}>({
   createButtonSize,
   popupCreation,
   createNewDefaultParams,
+  conditionalFieldsConfig,
 }: {
   actionRef?: MutableRefObject<ActionType | undefined>;
   pathParams: TPathParams;
@@ -105,6 +106,7 @@ export function useCreation<Entity, CreateDto, TPathParams = {}>({
       setCreatePopupData(undefined);
     }}
     onSubmit={onCreateSubmit}
+    conditionalFieldsConfig={conditionalFieldsConfig}
   />;
 
   return {