ProDescriptions

/**
 * Enhanced descriptions component with data fetching and editing capabilities
 * @param props - ProDescriptions props with generic typing for data structure
 * @returns JSX.Element - Rendered descriptions component
 */
function ProDescriptions<RecordType = Record<string, any>, ValueType = 'text'>(
  props: ProDescriptionsProps<RecordType, ValueType>
): JSX.Element;

interface ProDescriptionsProps<RecordType = Record<string, any>, ValueType = 'text'> 
  extends DescriptionsProps {
  /** Data source for the descriptions */
  dataSource?: RecordType;
  /** Controlled data source change handler */
  onDataSourceChange?: (value: RecordType) => void;
  /** Async data fetching function */
  request?: (params: Record<string, any> | undefined) => Promise<RequestData>;
  /** Request parameters - triggers reload when changed */
  params?: Record<string, any>;
  /** Network request error handler */
  onRequestError?: (e: Error) => void;
  /** Column configuration for schema-based rendering */
  columns?: ProDescriptionsItemProps<RecordType, ValueType>[];
  /** Action reference for imperative control */
  actionRef?: React.MutableRefObject<ProDescriptionsActionType | undefined>;
  /** Loading state control */
  loading?: boolean;
  onLoadingChange?: (loading?: boolean) => void;
  /** Tooltip configuration */
  tooltip?: LabelTooltipType | string;
  /** Form props for editable mode */
  formProps?: FormProps;
  /** Inline editing configuration */
  editable?: RowEditableConfig<RecordType>;
  /** Empty state placeholder */
  emptyText?: React.ReactNode;
}

import { ProDescriptions } from "@ant-design/pro-components";

// Basic static descriptions
const BasicDescriptions = () => (
  <ProDescriptions
    dataSource={{
      name: "John Doe",
      email: "john@example.com",
      role: "Admin"
    }}
    columns={[
      {
        title: "Name",
        dataIndex: "name",
        valueType: "text"
      },
      {
        title: "Email", 
        dataIndex: "email",
        valueType: "text",
        copyable: true
      },
      {
        title: "Role",
        dataIndex: "role", 
        valueType: "select",
        valueEnum: {
          Admin: { text: "Administrator", status: "Success" },
          User: { text: "Regular User", status: "Default" }
        }
      }
    ]}
  />
);

// Remote data loading
const RemoteDescriptions = () => {
  const actionRef = useRef<ProDescriptionsActionType>();
  
  return (
    <ProDescriptions
      actionRef={actionRef}
      request={async (params) => {
        const response = await fetch(`/api/user/${params?.id}`);
        const data = await response.json();
        return { success: true, data };
      }}
      params={{ id: userId }}
      columns={[
        { title: "Name", dataIndex: "name" },
        { title: "Created", dataIndex: "createdAt", valueType: "dateTime" },
        { title: "Status", dataIndex: "status", valueType: "badge" }
      ]}
    />
  );
};

// Inline editing
const EditableDescriptions = () => (
  <ProDescriptions
    editable={{
      type: 'multiple',
      onSave: async (values) => {
        await updateUser(values);
        return true;
      }
    }}
    columns={[
      {
        title: "Name",
        dataIndex: "name",
        formItemProps: {
          rules: [{ required: true, message: "Name is required" }]
        }
      },
      {
        title: "Email",
        dataIndex: "email", 
        valueType: "text",
        fieldProps: {
          placeholder: "Enter email address"
        }
      }
    ]}
  />
);

/**
 * Description item component with ProField value type support
 * @param props - Item props with field configuration
 * @returns JSX.Element - Rendered description item
 */
function ProDescriptionsItem<T = Record<string, any>, ValueType = 'text'>(
  props: ProDescriptionsItemProps<T, ValueType>
): JSX.Element;

interface ProDescriptionsItemProps<T = Record<string, any>, ValueType = 'text'> 
  extends Omit<DescriptionsItemProps, 'children'> {
  /** Field data index for data extraction */
  dataIndex?: keyof T | (keyof T)[];
  /** Field value type for rendering */
  valueType?: ProFieldValueType;
  /** Value enumeration for select/badge types */
  valueEnum?: ProSchemaValueEnumType;
  /** Hide this field conditionally */
  hide?: boolean;
  /** Plain text rendering without styling */
  plain?: boolean;
  /** Enable copy functionality */
  copyable?: boolean;
  /** Text ellipsis configuration */
  ellipsis?: boolean | { showTitle?: boolean };
  /** Rendering mode (read/edit) */
  mode?: ProFieldFCMode;
  /** Custom render function for read mode */
  render?: (text: any, record: T, index: number) => React.ReactNode;
  /** Custom render function for edit mode */
  renderFormItem?: (text: any, record: T, index: number) => React.ReactNode;
  /** Field props passed to underlying input */
  fieldProps?: any;
  /** Form item props for validation */
  formItemProps?: FormItemProps;
  /** Item sort order */
  order?: number;
  /** Item index */
  index?: number;
  /** Child content */
  children?: React.ReactNode;
}

import { ProDescriptions } from "@ant-design/pro-components";

// JSX children pattern
const ItemDescriptions = () => (
  <ProDescriptions dataSource={userData}>
    <ProDescriptions.Item 
      label="Full Name" 
      dataIndex="name"
      valueType="text"
    />
    <ProDescriptions.Item 
      label="Salary" 
      dataIndex="salary"
      valueType="money"
      render={(value) => `$${value?.toLocaleString()}`}
    />
    <ProDescriptions.Item 
      label="Join Date"
      dataIndex="joinDate" 
      valueType="date"
    />
    <ProDescriptions.Item 
      label="Department"
      dataIndex="department"
      valueType="select"
      valueEnum={{
        engineering: { text: "Engineering", status: "Processing" },
        sales: { text: "Sales", status: "Success" },
        marketing: { text: "Marketing", status: "Warning" }
      }}
    />
    <ProDescriptions.Item 
      label="Profile"
      dataIndex="avatar"
      valueType="avatar"
    />
  </ProDescriptions>
);

// Complex field with custom rendering
const CustomFieldItem = () => (
  <ProDescriptions.Item
    label="Skills"
    dataIndex="skills"
    render={(skills: string[]) => (
      <Space wrap>
        {skills?.map(skill => (
          <Tag key={skill} color="blue">{skill}</Tag>
        ))}
      </Space>
    )}
  />
);

/**
 * Action reference interface for ProDescriptions imperative control
 */
interface ProDescriptionsActionType {
  /** Reload data from request function */
  reload: () => Promise<void>;
  /** Get current form values in editable mode */
  getFieldsValue?: () => Record<string, any>;
  /** Set form field values in editable mode */
  setFieldsValue?: (values: Record<string, any>) => void;
  /** Validate form fields in editable mode */
  validateFields?: () => Promise<Record<string, any>>;
}

/**
 * Request data interface for async operations
 */
interface RequestData<T = any> {
  /** Response data */
  data?: T;
  /** Request success status */
  success?: boolean;
  /** Additional response properties */
  [key: string]: any;
}

/**
 * Editable row configuration for inline editing
 */
interface RowEditableConfig<T> {
  /** Editing type - single or multiple rows */
  type?: 'single' | 'multiple';
  /** Form instance for edit mode */
  form?: FormInstance;
  /** Save handler for edited values */
  onSave?: (values: T) => Promise<boolean | void>;
  /** Cancel handler for edit cancellation */
  onCancel?: () => void;
  /** Change handler for edit state */
  onChange?: (editableKeys: React.Key[]) => void;
  /** Default editable keys */
  editableKeys?: React.Key[];
}

const MasterDetail = () => {
  const [selectedRecord, setSelectedRecord] = useState(null);
  
  return (
    <ProCard split="vertical">
      <ProCard>
        <ProTable
          onRow={(record) => ({
            onClick: () => setSelectedRecord(record)
          })}
          // ... table configuration
        />
      </ProCard>
      <ProCard>
        {selectedRecord && (
          <ProDescriptions
            dataSource={selectedRecord}
            columns={detailColumns}
            editable={{
              onSave: async (values) => {
                await updateRecord(values);
                return true;
              }
            }}
          />
        )}
      </ProCard>
    </ProCard>
  );
};

const FormWithDescription = () => {
  const [formRef] = Form.useForm();
  
  return (
    <ProCard>
      <ProForm form={formRef} onFinish={handleSubmit}>
        {/* Form fields */}
      </ProForm>
      
      <Divider />
      
      <ProDescriptions
        dataSource={formRef.getFieldsValue()}
        columns={previewColumns}
        title="Preview"
      />
    </ProCard>
  );
};

const ConditionalDescriptions = () => (
  <ProDescriptions
    columns={[
      {
        title: "Admin Actions",
        dataIndex: "adminActions",
        hide: !isAdmin, // Conditionally hide based on permissions
        valueType: "option",
        render: () => [
          <Button key="edit">Edit</Button>,
          <Button key="delete" danger>Delete</Button>
        ]
      }
    ]}
  />
);

const EmptyStateDescriptions = () => (
  <ProDescriptions
    request={fetchUserData}
    emptyText={
      <Empty
        image={Empty.PRESENTED_IMAGE_SIMPLE}
        description="No user data available"
      >
        <Button type="primary" onClick={createUser}>
          Create User
        </Button>
      </Empty>
    }
  />
);

// Field value types supported by ProDescriptions
type ProFieldValueType = 
  | 'text' | 'textarea' | 'password' | 'money' | 'percent' | 'digit'
  | 'date' | 'dateTime' | 'dateRange' | 'time' | 'select' | 'checkbox'
  | 'radio' | 'switch' | 'progress' | 'rate' | 'color' | 'image'
  | 'avatar' | 'code' | 'jsonCode' | 'badge' | 'tags' | 'option';

// Label tooltip configuration
type LabelTooltipType = {
  tooltip?: React.ReactNode;
  icon?: React.ReactNode;
};

// ProField rendering mode
type ProFieldFCMode = 'read' | 'edit';

// Schema value enumeration for select/badge types
type ProSchemaValueEnumType = {
  [key: string]: {
    text: React.ReactNode;
    status?: 'Success' | 'Error' | 'Processing' | 'Warning' | 'Default';
    color?: string;
    disabled?: boolean;
  };
};