react-contacts-new

react-contacts-noDept

Analysis of the Contacts Component

The Contacts component is a React functional component that integrates user search, selection, and display functionalities. It uses Ant Design components (Spin, message, Typography) for UI elements and provides extensive props for customization and localization.

Below is an updated README based on the component's parameters:

---

README: Contacts Component

Overview

The Contacts component allows users to search, filter, and select users from a list. It supports multi-selection, department filtering, role filtering, and internationalization.

Props

Prop Name	Type	Default Value	Description
deptTree	array	Required	Department tree structure for filtering.
roleList	array	Required	List of roles for filtering.
users	object	{ records: [] }	User data with pagination support.
loading	bool	false	Indicates whether the component is in a loading state.
searchResult	object	{ records: [] }	Search results displayed in the table.
handleSearchUser	func	Required	Callback function triggered when a user searches.
updateSelectUsers	func	Required	Callback function to update selected users.
updateSelectDept	func	Required	Callback function to update selected departments.
deptTitle	string	'部门'	Label for the department filter.
roleTitle	string	'角色'	Label for the role filter.
notFoundContent	string	''	Message displayed when no data is found.
deptPlaceholder	string	'请选择部门'	Placeholder text for the department dropdown.
rolePlaceholder	string	'请选择角色'	Placeholder text for the role dropdown.
searchTitle	string	'查询'	Text for the search button.
resetTitle	string	'重置'	Text for the reset button.
defaultUserSelected	array	[]	Pre-selected users.
debug	bool	false	Enables debug mode.
selectAllText	string	'全选'	Text for the "Select All" button.
totalShowText	string	'共选择了$个'	Text displaying the total number of selected users.
radio	bool	false	Enables radio button selection instead of checkboxes.
radioShowText	string	'已经选择'	Text indicating a selected item in radio mode.
returnReducedNode	bool	false	Returns only parent nodes if all child nodes are selected.
locale	string	'zh-CN'	System/user language setting.
zhIntl	func	(res) => res	Function for internationalization.
multiple	bool	true	Allows multiple selections.
allUserList	array	[]	List of all users for "Select All" functionality.
handleAllUser	func	Required	Callback function triggered when "Select All" is clicked.
fromByLogin	string	sessionStorage	Login source (e.g., cloud for cloud service).
deptCascade	bool	false	Enables cascading selection for departments.

Usage Example

import React from 'react';
import Contacts from './components/contacts';

const App = () => {
  const handleSearchUser = (searchInfo) => {
    console.log('Search Info:', searchInfo);
  };

  const updateSelectUsers = (selectedUsers) => {
    console.log('Selected Users:', selectedUsers);
  };

  return (
    <Contacts
      deptTree={[{ id: 1, name: 'Department 1' }]}
      roleList={[{ id: 1, name: 'Role 1' }]}
      handleSearchUser={handleSearchUser}
      updateSelectUsers={updateSelectUsers}
      updateSelectDept={(selectedDepts) => console.log('Selected Depts:', selectedDepts)}
    />
  );
};

export default App;

Notes

• Ensure all required props (deptTree, roleList, handleSearchUser, updateSelectUsers, updateSelectDept, handleAllUser) are provided.
• Use the zhIntl prop for localization if supporting multiple languages.
• The allUserList prop is necessary for enabling the "Select All" feature.

Customization

• Modify deptTitle, roleTitle, searchTitle, and other string props for custom labels.
• Adjust notFoundContent for customized empty state messages.
• Enable or disable cascading department selection via the deptCascade prop.

---

This README provides a clear overview of the component's functionality, props, and usage examples.