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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-common-frontend",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "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": "008e1d42d47532005e1af1909d40befdebff5197"
+  "gitHead": "84d2c3f084f48afc57cb93f7eb2639c971bba5d2"
 }

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, Form, Result, Tabs, TabsProps, Tooltip } from "antd";
+import { Badge, Button, 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,7 +62,7 @@ const DescriptionsComponent = <Entity extends Record<string | symbol, any>,
     columns,
     params,
     onEntityChange,
-    conditionalFieldsConfig,
+    contentViewMode: contentViewModeProp,
     ...rest
   }: TDescriptionsProps<Entity,
     CreateDto,
@@ -81,36 +81,13 @@ 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(filteredColumns, mainTitle);
+  const sections = columnsToDescriptionItemProps(columns, mainTitle);
 
   const columnDataIndexToSection = sections.reduce((acc, section) => {
     section.columns.forEach(column => {
@@ -127,7 +104,7 @@ const DescriptionsComponent = <Entity extends Record<string | symbol, any>,
     contentViewModeButton,
     contentViewMode
   } = useContentViewMode({
-    mode: sections.length > 1 ? VIEW_MODE_TYPE.TABS : VIEW_MODE_TYPE.GENERAL
+    mode: contentViewModeProp || (sections.length > 1 ? VIEW_MODE_TYPE.TABS : VIEW_MODE_TYPE.GENERAL)
   });
   const [errorsPerSection, setErrorsPerSection] = useState<Map<TDescriptionSection<Entity>['key'], number>>(
     new Map(sections.map(section => [section.key, 0]))

package/src/components/Descriptions/descriptionTypes.ts

@@ -5,6 +5,7 @@ import { QueryJoin } from "@nestjsx/crud-request";
 import { ProColumns } from "@ant-design/pro-components";
 import { ProDescriptionsProps } from "@ant-design/pro-descriptions";
 import { FieldData } from "rc-field-form/lib/interface";
+import { VIEW_MODE_TYPE } from "./useContentViewMode";
 
 export type TGetOneParams = {
   /**
@@ -35,15 +36,7 @@ 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>,
@@ -65,6 +58,7 @@ export type TDescriptionsProps<Entity, CreateDto, UpdateDto, TPathParams = objec
   params?: TDescriptionGetRequestParams,
   columns: ProColumns<Entity>[],
   onEntityChange?: (entity: Entity | null) => void;
+  contentViewMode?: VIEW_MODE_TYPE,
   ref?: React.Ref<DescriptionsRefType<Entity>>,
 } & Omit<ProDescriptionsProps<Entity>, 'columns'>;
 

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 { ConditionalFieldsConfig, Descriptions, DescriptionsRefType } from "../Descriptions";
+import { Descriptions, DescriptionsRefType } from "../Descriptions";
 import { buildFieldsFromColumnsForDescriptionsDisplay } from "./tableTools";
 
 export interface CreateEntityModalProps<Entity> {
@@ -24,8 +24,6 @@ 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<
@@ -42,7 +40,6 @@ export function CreateEntityModal<
   idColumnName,
   onCancel,
   onSubmit,
-  conditionalFieldsConfig,
 }: CreateEntityModalProps<Entity>) {
   const descriptionsRef = useRef<DescriptionsRefType<Entity>>(null);
 
@@ -82,7 +79,6 @@ export function CreateEntityModal<
           editableKeys,
           actionRender: () => [],
         }}
-        conditionalFieldsConfig={conditionalFieldsConfig}
       />
     </Modal>
   );

package/src/components/Table/Table.tsx

@@ -55,7 +55,6 @@ const Table = <Entity extends Record<string | symbol, any>,
     columnsState: managedColumnsState,
     columnsSetSelect: managedColumnsSetSelect,
     popupCreation = false,
-    conditionalFieldsConfig,
     toolBarRender,
     params,
     editPopupTitle,
@@ -121,7 +120,6 @@ 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,7 +6,6 @@ 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,
@@ -97,7 +96,6 @@ 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,7 +32,6 @@ export function useCreation<Entity, CreateDto, TPathParams = {}>({
   createButtonSize,
   popupCreation,
   createNewDefaultParams,
-  conditionalFieldsConfig,
 }: {
   actionRef?: MutableRefObject<ActionType | undefined>;
   pathParams: TPathParams;
@@ -106,7 +105,6 @@ export function useCreation<Entity, CreateDto, TPathParams = {}>({
       setCreatePopupData(undefined);
     }}
     onSubmit={onCreateSubmit}
-    conditionalFieldsConfig={conditionalFieldsConfig}
   />;
 
   return {