### Basic Table Usage Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/table/index.md Demonstrates the fundamental setup of a Table component with two columns and a simple data source. Ensure you have the '@alifd/next' library installed. ```javascript import { Table } from '@alifd/next'; const dataSource = [{id: 1, time: '2016'}]; ReactDOM.render(
, mountNode); ``` -------------------------------- ### Clone Repository and Install Dependencies Source: https://github.com/aliyun/cloud-design/blob/master/base-components/docs/CONTRIBUTING.md Clone the cloud-design repository, navigate into the directory, and install dependencies to set up the development environment. ```bash git clone git@github.com:aliyun/cloud-design.git cd cloud-design npm run boot cd base-components/ ``` -------------------------------- ### TreeSelect Data Structure Example Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/tree-select/index.md Example of the data structure for TreeSelect. ```APIDOC ## TreeSelect Data Structure Example ### Description Example of the data structure for TreeSelect. ### Data Structure ```js const dataSource = [ { label: '服装', value: '1', key: '1', selectable: false, children: [ { label: '男装', value: '2', key: '2', children: [ { label: '外套', value: '4', key: '4', disableCheckbox: true }, { label: '夹克', value: '5', key: '5', disabled: true } ] }, { label: '女装', value: '3', key: '3', children: [ { label: '裙子', value: '6', key: '6' } ] } ] } ]; ``` If `key` is not provided, TreeSelect will use an internally calculated position string as the key. If you want to specify properties like `treeDefaultExpandedKeys`, it is a good practice to provide a custom key that is the same as the value. ``` -------------------------------- ### ConfigProvider Get Current Language Source: https://github.com/aliyun/cloud-design/blob/master/config/dev-docs/contents/config-provider.md Retrieve the key of the currently set language. ```javascript const currentLanguage = ConfigProvider.getLanguage(); ``` -------------------------------- ### ConfigProvider Get Context Source: https://github.com/aliyun/cloud-design/blob/master/config/dev-docs/contents/config-provider.md Access the merged context properties from ConfigProvider, prioritizing settings from closer nested providers. ```javascript const context = ConfigProvider.getContext(); // context will be like: // { // prefix: nextPrefix, // locale: nextLocale, // pure: nextPure, // warning: nextWarning // } ``` -------------------------------- ### ConfigProvider Get Context Properties Source: https://github.com/aliyun/cloud-design/blob/master/config/dev-docs/contents/config-provider.md Retrieve context properties like prefix, locale, and pure mode by passing component props and display name. Useful for generating components outside the component tree. ```javascript const contextProps = ConfigProvider.getContextProps(props, 'MyComponent'); ``` -------------------------------- ### ConfigProvider Get Current Locale Source: https://github.com/aliyun/cloud-design/blob/master/config/dev-docs/contents/config-provider.md Retrieve the currently active language pack object. ```javascript const currentLocale = ConfigProvider.getLocale(); ``` -------------------------------- ### DatePicker Controlled with Moment Object Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/date-picker/index.md Example of a controlled DatePicker that uses a Moment object for its value prop and returns a Moment object when the date changes. ```jsx console.log(val)} /> ``` -------------------------------- ### ConfigProvider Get Current Direction Source: https://github.com/aliyun/cloud-design/blob/master/config/dev-docs/contents/config-provider.md Retrieve the currently set display direction ('ltr' or 'rtl'). ```javascript const currentDirection = ConfigProvider.getDirection(); ``` -------------------------------- ### DatePicker Controlled with Timestamp Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/date-picker/index.md Example of a controlled DatePicker initialized with a Unix timestamp. The component manages Moment object conversions and returns a string on change. ```jsx console.log(val)} /> ``` -------------------------------- ### ConfigProvider.initLocales(locales) Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Initializes all available language packs for the application. This method should be called before setting the language. ```APIDOC ## ConfigProvider.initLocales(locales) ### Description This static method is used to configure all available language packs for the application. It takes an object where keys are language codes and values are the corresponding locale data. ### Method `ConfigProvider.initLocales(locales)` ### Parameters #### locales - **locales** (Object) - An object containing language packs. Example: `{ 'zh-cn': {}, 'en-us': {} }`. ``` -------------------------------- ### Common Development Commands Source: https://github.com/aliyun/cloud-design/blob/master/base-components/docs/CONTRIBUTING.md A list of frequently used npm commands for developing and building the base components. ```bash npm run dev ``` ```bash npm run prepare ``` ```bash npm run build ``` ```bash npm run build-css ``` ```bash npm run update-theme ``` ```bash npm publish ``` ```bash npm run demos-deploy ``` -------------------------------- ### Multi-Header Table Configuration Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/table/index.md Illustrates how to create a table with multiple header rows using `Table.ColumnGroup`. Each `Table.ColumnGroup` can contain nested `Table.Column` components to form complex header structures. ```javascript import { Table } from '@alifd/next'; const dataSource = [{id: 1, time: '2016'}]; ReactDOM.render(
, mountNode); ``` -------------------------------- ### ConfigProvider Device Responsiveness Source: https://github.com/aliyun/cloud-design/blob/master/config/dev-docs/contents/config-provider.md Set the device type to enable responsive changes in components. Supported values are 'tablet', 'desktop', and 'phone'. ```javascript device: 'phone' ``` -------------------------------- ### ConfigProvider.getContext() Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Retrieves the current ConfigProvider context. If multiple ConfigProviders are nested, it returns a merged result with higher priority given to the nearest ancestor. ```APIDOC ## ConfigProvider.getContext() ### Description This static method allows you to access the current context provided by the nearest `ConfigProvider`. If there are nested `ConfigProvider` instances, it merges their configurations, prioritizing the settings from the closest ancestor. ### Method `ConfigProvider.getContext()` ### Response #### Success Response - **prefix** (string) - The prefix for component class names. - **locale** (Object) - The current locale configuration object. - **pure** (Boolean) - Indicates if Pure Render mode is enabled. - **warning** (Boolean) - Indicates if deprecation warnings are enabled. ``` -------------------------------- ### ConfigProvider RTL Mode Source: https://github.com/aliyun/cloud-design/blob/master/config/dev-docs/contents/config-provider.md Enable Right-to-Left (RTL) mode for components, suitable for languages like Arabic. ```javascript rtl: true ``` -------------------------------- ### DatePicker Uncontrolled with Timestamp Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/date-picker/index.md Example of an uncontrolled DatePicker initialized with a Unix timestamp. The component converts it to a Moment object, and returns a string upon selection. ```jsx console.log(val)} /> ``` -------------------------------- ### Select Component Properties Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/select/index.md Configuration options for the Select component, including event handlers, display settings, and data handling. ```APIDOC ## Select Component API ### Description Provides a configurable Select component with various options for user interaction, display, and data management. ### Properties - **onChange** (Function) - Callback triggered when the select value changes. Signature: `Function(value: mixed, actionType: String, item: mixed) => void`. Parameters: `_value_`: The selected value. `_actionType_`: The trigger type ('itemClick', 'enter', 'tag'). `_item_`: The object data of the selected value (effective when `useDetailValue` is false). - **hasBorder** (Boolean) - Determines if the select component should have a border. - **hasArrow** (Boolean) - Determines if a dropdown arrow should be displayed. Defaults to `true`. - **showSearch** (Boolean) - Enables search functionality within the dropdown. Defaults to `false` (always true in tag mode). - **onSearch** (Function) - Callback triggered when the search input value changes. Signature: `Function(value: String) => void`. Parameter: `_value_`: The current search string. - **onSearchClear** (Function) - Callback triggered when the search input is cleared. Signature: `Function(actionType: String) => void`. Parameter: `_actionType_`: The trigger type ('select' for selection clear, 'popupClose' for popup close clear). - **hasSelectAll** (Boolean/String) - Enables a 'select all' option in multi-select mode. - **fillProps** (String) - Specifies the key to be used for filling values in the select input. - **useDetailValue** (Boolean) - If true, the `value` will be an object `{value, label}`, and the `onChange` first parameter will also return the object from `dataSource`. - **cacheValue** (Boolean) - Retains selected content when `dataSource` changes. Defaults to `true`. - **valueRender** (Function) - A method to render the displayed content of the Select. Signature: `Function(item: Object) => ReactNode`. Parameter: `_item_`: The item object for rendering. Returns: The ReactNode for display. Defaults to rendering `item.label || item.value`. - **searchValue** (String) - Controlled search input value. Generally not needed. - **tagInline** (Boolean) - If true, tags are displayed inline. Only effective when `mode` is 'multiple'. Defaults to `false`. ``` -------------------------------- ### DatePicker Uncontrolled with Moment Object Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/date-picker/index.md Example of an uncontrolled DatePicker that accepts a Moment object as its default value and returns a Moment object upon selection. ```jsx console.log(val)} /> ``` -------------------------------- ### DatePicker Uncontrolled with String Value Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/date-picker/index.md Example of an uncontrolled DatePicker that accepts a date string as its default value. The component internally converts it to a Moment object, and returns a string upon selection. ```jsx console.log(val)} /> ``` -------------------------------- ### Tab Component Properties Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/tab/index.md Configuration options for the main Tab component. ```APIDOC ## Tab Component Properties ### Description Properties that can be passed to the main Tab component to control its behavior and appearance. ### Parameters #### Query Parameters - **disableKeyboard** (Boolean) - Optional - Prohibits keyboard events, preventing navigation between selected tabs using arrow keys. - **onClick** (Function) - Optional - Callback triggered when an individual tab is clicked. Signature: Function() => void. - **onChange** (Function) - Optional - Callback triggered when the selected tab changes. Signature: Function(key: String/Number) => void. Parameter `_key_`: The key of the changed tab (String/Number). - **onClose** (Function) - Optional - Callback triggered when a tab is closed. Signature: Function(key: String/Number) => void. Parameter `_key_`: The key of the closed tab (String/Number). - **tabRender** (Function) - Optional - Custom function to render the tab template. Signature: Function(key: String, props: Object) => ReactNode. Parameters `_key_`: The key of the current Tab.Item (String), `_props_`: All properties passed to Tab.Item (Object). Returns: Custom component (ReactNode). - **popupProps** (Object) - Optional - Props passed to the popup, effective only when `excessMode` is 'dropdown'. - **icons** (Object) - Optional - Custom icons within the component. Default: {}. ### Response #### Success Response (200) - **N/A** - This section describes component properties, not an API endpoint response. ``` -------------------------------- ### DatePicker Controlled with String Value Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/date-picker/index.md Example of a controlled DatePicker that uses a date string for its value prop. The component internally handles Moment object conversion and returns a string upon change. ```jsx console.log(val)} /> ``` -------------------------------- ### Access HOC Internal Component Instance Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Use the `getInstance` method provided by the HOC generated by ConfigProvider to access and invoke methods of the internal component, bypassing HOC limitations. ```javascript class App extends React.Component { componentDidMount() { this.refs.hoc.getInstance().someMethod(); } render() { return ; } } ``` -------------------------------- ### Initialize Locales for ConfigProvider Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Configures all available language packs for the ConfigProvider. This is typically used in conjunction with `setLanguage` to define the component's active language. ```javascript ConfigProvider.initLocales({ 'zh-cn': {}, 'en-us': {} }); ``` -------------------------------- ### ConfigProvider.getLanguage() Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Retrieves the currently set language code. ```APIDOC ## ConfigProvider.getLanguage() ### Description Retrieves the language code that is currently set for the application. ### Method `ConfigProvider.getLanguage()` ### Response #### Success Response - **language** (string) - The current language code (e.g., 'zh-cn'). ``` -------------------------------- ### Nav.Item Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/nav/index.md Represents an individual navigation item. Inherits capabilities from Menu.Item. ```APIDOC ## Nav.Item ### Description Represents an individual navigation item. Inherits capabilities from Menu.Item. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Parameters | 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | -------- | -------- | | icon | 自定义图标，可以使用 Icon 的 type，也可以使用组件 `` | String/ReactNode | - | | children | 导航内容 | ReactNode | - | ``` -------------------------------- ### Button Component Source: https://github.com/aliyun/cloud-design/blob/master/config/dev-docs/contents/button.md Configuration options for the Button component. ```APIDOC ## Button Component Properties ### Parameters - **size** (Enum) - Optional - Button size. Possible values: 'small', 'medium', 'large'. Defaults to 'medium'. - **type** (Enum) - Optional - Button type. Possible values: 'primary', 'secondary', 'normal'. Defaults to 'normal'. - **icons** (Object) - Optional - Configurable icons for the button, e.g., { loading: }. - **iconSize** (Enum/Number) - Optional - Size of the icon within the button, overrides default icon size. - **htmlType** (Enum) - Optional - Sets the type attribute for the button tag when component is 'button'. Possible values: 'submit', 'reset', 'button'. Defaults to 'button'. - **component** (Enum) - Optional - Sets the tag type for the button. Possible values: 'button', 'a', 'div', 'span'. Defaults to 'button'. - **loading** (Boolean) - Optional - Sets the loading state of the button. Defaults to false. - **ghost** (Enum) - Optional - Renders the button as a ghost button. Possible values: true, false, 'light', 'dark'. Defaults to false. - **text** (Boolean) - Optional - Renders the button as a text button. Defaults to false. - **warning** (Boolean) - Optional - Renders the button as a warning button. Defaults to false. - **disabled** (Boolean) - Optional - Disables the button. Defaults to false. - **onClick** (Function) - Optional - Callback function executed when the button is clicked. Signature: Function(e: Object) => void. Parameter: e: {Object} Event Object. ``` -------------------------------- ### ConfigProvider.setLocale(locale) Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Directly sets the locale data, effectively performing both initialization and language setting. ```APIDOC ## ConfigProvider.setLocale(locale) ### Description This method allows you to directly set the locale data for components. It is a convenience method that combines the functionality of `ConfigProvider.initLocales` and `ConfigProvider.setLanguage`. ### Method `ConfigProvider.setLocale(locale)` ### Parameters #### locale - **locale** (Object) - An object containing locale data for specific components (e.g., `{ DatePicker: {}, Dialog: {} }`). ``` -------------------------------- ### Time Picker Properties Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/time-picker/index.md Configuration options for the Time Picker component. ```APIDOC ## Time Picker Properties ### disabled - **Type**: Boolean - **Default**: false - **Description**: Whether the time picker is disabled. ### isPreview - **Type**: Boolean - **Description**: Whether the time picker is in preview mode. ### renderPreview - **Type**: Function(value: MomentObject) => void - **Description**: Content to render in preview mode. - **Parameters**: - `_value_` (MomentObject): The time value. ### onChange - **Type**: Function(value: Object/String) => void - **Description**: Callback function when the time value changes. - **Parameters**: - `_value_` (Object/String): The new time value as an object or string. ``` -------------------------------- ### ARIA and Keyboard Navigation Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/time-picker/index.md Keyboard shortcuts and accessibility features for the Time Picker. ```APIDOC ## ARIA and KeyBoard | Key | Description | | :-- | :---------- | | Enter | Opens the time selection dialog. | | Esc | Closes the time selection dialog. | | Up | Advances the time by one second (or minute/hour if `disabledMinutes` is true). | | Down | Decreases the time by one second (or minute/hour if `disabledMinutes` is true). | | Page Up | Advances the time by one minute. | | Page Down | Decreases the time by one minute. | | Alt + Page Up | Advances the time by one hour. | | Alt + Page Down | Decreases the time by one hour. | ``` -------------------------------- ### VirtualList Component Properties Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/virtual-list/index.md This section details the properties available for configuring the VirtualList component to manage large lists efficiently. ```APIDOC ## VirtualList Component Properties ### Description This component is designed to address rendering speed issues with large datasets. It optimizes performance by only rendering visible items and a buffer. ### Properties #### `children` - **Type**: `any` - **Description**: The child nodes to be rendered within the list. - **Default**: `-` #### `minSize` - **Type**: `Number` - **Description**: The minimum number of items to load. - **Default**: `1` #### `pageSize` - **Type**: `Number` - **Description**: The number of items to render per screen. - **Default**: `10` #### `itemsRenderer` - **Type**: `Function` - **Description**: A parent rendering function. It receives the items to render and a ref. The default renders items within a `
    ` tag. - **Signature**: `Function(items, ref) => void` - **Default**: `(items, ref) =>
      {items}
    ` #### `threshold` - **Type**: `Number` - **Description**: The height of the buffer zone around the visible items. - **Default**: `100` #### `itemSizeGetter` - **Type**: `Function` - **Description**: A function to retrieve the height of each item. This is required for `jumpIndex` to work correctly when items have variable heights. - **Signature**: `Function() => void` - **Default**: `-` #### `jumpIndex` - **Type**: `Number` - **Description**: Sets the scroll position to a specific index. Requires `itemSizeGetter` to be effective. If not set, it assumes all items have equal height and uses the first item's height as the default. - **Default**: `0` ``` -------------------------------- ### Upload Component Properties Source: https://github.com/aliyun/cloud-design/blob/master/config/dev-docs/contents/upload.md Configuration options for the Upload component, including file handling, display styles, and event callbacks. ```APIDOC ## Upload Component API ### Description This section details the properties available for configuring the Upload component. These properties allow for customization of file selection, upload process, display format, and event handling. ### Properties - **name** (String) - File name field. - **onSelect** (Function) - Callback function invoked when files are selected. Signature: `Function() => void`. - **onDrop** (Function) - Callback function invoked when files are dropped. Signature: `Function() => void`. - **value** (Array) - The list of files currently uploaded or selected. - **defaultValue** (Array) - The initial list of files to display. - **listType** (Enum) - Specifies the display style for the uploaded file list. Optional values: 'text', 'image', 'card'. - **formatter** (Function) - A data formatting function used in conjunction with custom actions. It receives the server's response data and the file object. Signature: `Function(response: Object, file: File) => void`. Parameters: `response` (Object) - The server response. `file` (File) - The file object. - **limit** (Number) - The maximum number of files that can be uploaded. Defaults to Infinity. - **dragable** (Boolean) - Enables or disables drag-and-drop upload functionality. Supported in `ie10+`. - **useDataURL** (Boolean) - Enables local preview of files. - **disabled** (Boolean) - Disables the upload functionality. - **onChange** (Function) - Callback function triggered when the file list changes. Signature: `Function(info: Object) => void`. Parameter: `info` (Object) - The file event object. - **afterSelect** (Function) - Optional function for file validation. Only effective when `autoUpload` is `false`. If `autoUpload` is `true`, `beforeUpload` can serve the same purpose. Signature: `Function(file: Object) => Boolean`. Parameter: `file` (Object) - The file object. Returns `false` to prevent upload, otherwise proceeds. - **onRemove** (Function) - Callback function invoked when a file is removed. Signature: `Function(file: Object) => Boolean/Promise`. Parameter: `file` (Object) - The file object. Return value: `Boolean/Promise` - Returning `false`, `Promise.resolve(false)`, or `Promise.reject()` will prevent the file from being deleted. - **autoUpload** (Boolean) - Determines whether files are uploaded automatically after selection. Defaults to `true`. - **progressProps** (Object) - Props to be passed down to the Progress component. ``` -------------------------------- ### ConfigProvider Pure Render Mode Source: https://github.com/aliyun/cloud-design/blob/master/config/dev-docs/contents/config-provider.md Enable Pure Render mode for performance optimization. This mode uses shallow comparison for props and state to prevent unnecessary re-renders. ```javascript pure: true ``` -------------------------------- ### Switch Component API Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/switch/index.md This section details the properties and event handlers available for the Switch component, allowing for customization of its appearance, behavior, and state management. ```APIDOC ## Switch Component API ### Description Provides a detailed reference for the properties and event handlers of the Switch component. ### Properties - **checkedChildren** (any) - Required - Content to display when the switch is on. - **size** (Enum) - Optional - The size of the switch. Optional values: 'medium' (normal size), 'small' (smaller version). Defaults to 'medium'. - **unCheckedChildren** (any) - Required - Content to display when the switch is off. - **onChange** (Function) - Optional - Triggered when the switch state changes. Signature: Function(checked: Boolean, e: Event) => void. Parameters: _checked_: Boolean (whether the switch is on), _e_: Event (DOM event object). - **checked** (Boolean) - Optional - The current value of the switch (for controlled components). - **defaultChecked** (Boolean) - Optional - The default value of the switch (for uncontrolled components). Defaults to false. - **disabled** (Boolean) - Optional - Indicates if the switch is disabled. Defaults to false. - **onClick** (Function) - Optional - Mouse click event handler. Signature: Function(e: Event) => void. Parameter: _e_: Event (DOM event object). - **onKeyDown** (Function) - Optional - Keyboard key press event handler. Signature: Function(e: Event) => void. Parameter: _e_: Event (DOM event object). - **isPreview** (Boolean) - Optional - Indicates if the component is in preview mode. Defaults to false. - **renderPreview** (Function) - Optional - Content to render in preview mode. Signature: Function(value: number) => void. Parameter: _value_: number (the rating value). ### Keyboard Support - Supports keyboard control. Press Enter after focusing with Tab to toggle the state. | Key | Description | | :---- | :----------------- | | Enter | Toggle checked state | | SPACE | Toggle checked state | ``` -------------------------------- ### ConfigProvider.config(Component) Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Generates a Higher-Order Component (HOC) for a given component, making it controlled by ConfigProvider. It automatically adds a `shouldComponentUpdate` method if one is not present to support the `pure` prop. ```APIDOC ## ConfigProvider.config(Component) ### Description This static method takes a component and returns a Higher-Order Component (HOC) that is controlled by the `ConfigProvider`. It ensures that the component respects the `pure` prop by adding a `shouldComponentUpdate` method if it doesn't exist. ### Method `ConfigProvider.config(Component)` ### Parameters #### Component - **Component** (React Component) - The component to be wrapped by the HOC. ``` -------------------------------- ### Set ConfigProvider Locale Directly Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Directly sets a specific locale, effectively performing both initialization and language setting for the ConfigProvider. ```javascript // 相当于 同时用ConfigProvider.initLocales 和 ConfigProvider.setLanguage ConfigProvider.setLocale({ DatePicker: {}, Dialog: {} }); ``` -------------------------------- ### ConfigProvider.setLanguage(language) Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Sets the current language for all components. The provided language code must exist in the locales initialized by `ConfigProvider.initLocales`. ```APIDOC ## ConfigProvider.setLanguage(language) ### Description Sets the active language for all components within the `ConfigProvider`. The specified language must have been previously initialized using `ConfigProvider.initLocales`. ### Method `ConfigProvider.setLanguage(language)` ### Parameters #### language - **language** (string) - The language code to set (e.g., 'zh-cn', 'en-us'). Defaults to 'zh-cn'. ``` -------------------------------- ### Table Expansion Configuration Source: https://github.com/aliyun/cloud-design/blob/master/config/dev-docs/contents/table.md Configuration options for controlling the expanded row behavior in the Table component. ```APIDOC ## Table Expansion Properties ### Description Properties to configure the expandable rows feature of the Table component. ### Properties #### expandedRowRender - **Type**: Function(record: Object, index: Number) => Element - **Description**: A function that renders custom content for an expanded row. It receives the record and index of the row. - **Parameters**: - `record` (Object) - The data record for the row. - `index` (Number) - The index of the row. #### rowExpandable - **Type**: Function(record: Object, index: Number) => Boolean - **Description**: A function that determines if a row can be expanded. Returns `true` if the row is expandable, `false` otherwise. - **Parameters**: - `record` (Object) - The data record for the row. - `index` (Number) - The index of the row. #### expandedRowIndent - **Type**: Array - **Description**: Defines the indentation for the expanded row content. #### hasExpandedRowCtrl - **Type**: Boolean - **Description**: Controls whether the '+' button to expand/collapse rows is displayed. #### getExpandedColProps - **Type**: Function() => void - **Description**: A function that returns properties for the expanded column. ``` -------------------------------- ### Nav.SubNav Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/nav/index.md Represents a sub-navigation menu. Inherits capabilities from Menu.SubMenu. ```APIDOC ## Nav.SubNav ### Description Represents a sub-navigation menu. Inherits capabilities from Menu.SubMenu. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Parameters | 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | -------- | -------- | | icon | 自定义图标，可以使用 Icon 的 type，也可以使用组件 `` | String/ReactNode | - | | label | 标签内容 | ReactNode | - | | selectable | 是否可选 | Boolean | false | | children | 导航项和子导航 | ReactNode | - | ``` -------------------------------- ### ConfigProvider shouldComponentUpdate Logic Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md This snippet shows the `shouldComponentUpdate` method added by ConfigProvider.config to components when the `pure` prop is enabled, utilizing shallowEqual for performance optimization. ```javascript Component.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) { if (this.props.pure) { return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState); } return true; }; ``` -------------------------------- ### ButtonGroup Component Source: https://github.com/aliyun/cloud-design/blob/master/config/dev-docs/contents/button.md Configuration options for the Button.Group component. ```APIDOC ## Button.Group Component Properties ### Parameters - **size** (String) - Optional - Uniformly sets the button size for all Button components within the group. Defaults to 'medium'. ``` -------------------------------- ### ConfigProvider.getDirection() Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Retrieves the currently set display direction. ```APIDOC ## ConfigProvider.getDirection() ### Description Retrieves the current display direction setting for the components. ### Method `ConfigProvider.getDirection()` ### Response #### Success Response - **direction** (string) - The current direction ('ltr' or 'rtl'). ``` -------------------------------- ### ConfigProvider.getLocale() Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Retrieves the currently set locale data. ```APIDOC ## ConfigProvider.getLocale() ### Description This static method returns the currently active locale data that has been set for the application. ### Method `ConfigProvider.getLocale()` ### Response #### Success Response - **locale** (Object) - The current locale data. ``` -------------------------------- ### ConfigProvider Context Properties Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Retrieves computed context properties (prefix, locale, pure) for child components, useful for generating components outside the component tree. ```javascript { prefix: nextPrefix, locale: nextLocale, pure: nextPure, warning: nextWarning } ``` -------------------------------- ### Moment.js Locale Persistence Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/date-picker/index.md Demonstrates that changing the global Moment.js locale does not affect existing Moment instances. New instances created after locale changes will reflect the new locale. ```javascript moment.locale('fr'); const m = moment(1316116057189); m.fromNow(); // il y a une heure moment.locale('en'); m.fromNow(); // il y a une heure moment(1316116057189).fromNow(); // an hour ago ``` -------------------------------- ### TreeSelect Props Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/tree-select/index.md Configuration options for the TreeSelect component. ```APIDOC ## TreeSelect Props ### Description Configuration options for the TreeSelect component. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Parameters Table | Parameter | Description | Type | Default | |---|---|---|---| | `popupStyle` | Dropdown custom style object | Object | - | | `popupClassName` | Dropdown custom class name | String | - | | `popupContainer` | Dropdown container node | any | - | | `popupProps` | Props passed to Popup | Object | - | | `followTrigger` | Whether to follow scrolling | Boolean | - | | `isPreview` | Whether it is in preview mode | Boolean | - | | `renderPreview` | Content rendered in preview mode

    **Signature**:
    Function(value: Array) => void
    **Parameters**:
    _value_: {Array} Selected values { label: , value:} | Function | - | | `useVirtual` | Whether to enable virtual scrolling | Boolean | false | ``` -------------------------------- ### ConfigProvider Popup Container Source: https://github.com/aliyun/cloud-design/blob/master/config/dev-docs/contents/config-provider.md Specify the parent DOM node for floating elements like dropdowns or tooltips. This can be a string ID or a function returning a DOM node. ```javascript popupContainer: '#my-container-id' ``` -------------------------------- ### Set ConfigProvider Direction Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Sets the display direction for components. When 'rtl' is passed, it adds `dir="rtl"` to the root DOM element and applies RTL visual styles, suitable for right-to-left languages. ```javascript ConfigProvider.setDirection('rtl'); ``` -------------------------------- ### Overlay.Popup Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/overlay/index.md The Overlay.Popup component provides a way to display content in a popup that is triggered by user interaction with another element. It inherits all APIs from the base Overlay component and adds specific configurations for triggers, visibility, and positioning. ```APIDOC ## Overlay.Popup ### Description Provides a configurable popup component that extends the base Overlay functionality. It allows for defining how the popup is triggered, its visibility state, and how it behaves in relation to its trigger element. ### Props #### children - **type**: ReactNode - The content to be displayed within the popup. - **default**: - #### trigger - **type**: ReactElement - The element that will trigger the popup's display or hide. - **default**: - #### triggerType - **type**: String/Array - Specifies the type of interaction that triggers the popup. Can be 'click', 'hover', 'focus', or a combination (e.g., ['hover', 'focus']). - **default**: 'hover' #### triggerClickKeycode - **type**: Number/Array - Defines the keyboard codes that trigger the popup when `triggerType` is 'click'. - **default**: [KEYCODE.SPACE, KEYCODE.ENTER] #### visible - **type**: Boolean - Controls whether the popup is currently visible. - **default**: - #### defaultVisible - **type**: Boolean - Sets the initial visibility state of the popup when it first renders. - **default**: false #### onVisibleChange - **type**: Function - A callback function that is invoked when the popup's visibility changes. It receives the new visibility state, the trigger type, and the event object. - **Signature**: `Function(visible: Boolean, type: String, e: Object) => void` - **Parameters**: - `visible`: Boolean - Indicates if the popup is now visible. - `type`: String - The source of the visibility change ('fromTrigger' or 'docClick'). - `e`: Object - The DOM event object. - **default**: `func.noop` #### disabled - **type**: Boolean - If set to true, the popup cannot be shown or hidden. - **default**: false #### delay - **type**: Number - The delay in milliseconds before the popup appears or disappears. This is effective when `triggerType` is 'hover'. - **default**: 200 #### canCloseByTrigger - **type**: Boolean - Determines if the trigger element itself can close the popup. - **default**: true #### target - **type**: any - The element to which the popup will be positioned. Defaults to the trigger element. - **default**: The trigger element itself. #### followTrigger - **type**: Boolean - If true, the popup will follow the trigger element's scroll position. - **default**: false ``` -------------------------------- ### DatePicker.WeekPicker Props Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/date-picker/index.md This section details the configurable properties for the DatePicker.WeekPicker component, including event handlers, display options, and state management. ```APIDOC ## DatePicker.WeekPicker ### Description Provides a component for selecting a week, with various customization options. ### Props #### footerRender - **Type**: Function() => Node - **Description**: Customizes the footer of the panel. Returns a custom node. #### onChange - **Type**: Function(value: MomentObject/String) => void - **Description**: Callback function triggered when the date value changes. Receives the new date value as an argument. #### disabled - **Type**: Boolean - **Description**: Determines if the component is disabled. #### hasClear - **Type**: Boolean - **Description**: Controls the visibility of the clear button. Defaults to true. #### visible - **Type**: Boolean - **Description**: Manages the visibility state of the popup panel. #### defaultVisible - **Type**: Boolean - **Description**: Sets the initial visibility state of the popup panel. Defaults to false. #### onVisibleChange - **Type**: Function(visible: Boolean, type: String) => void - **Description**: Callback function executed when the popup panel's visibility changes. Arguments include the new visibility state and the source of the change (e.g., 'calendarSelect', 'okBtnClick', 'fromTrigger', 'docClick'). #### popupTriggerType - **Type**: Enum - **Description**: Specifies the type of interaction that triggers the popup. Optional values: 'click', 'hover'. Defaults to 'click'. #### popupAlign - **Type**: String - **Description**: Defines the alignment of the popup relative to its trigger. Refer to Overlay documentation for details. Defaults to 'tl tl'. #### popupContainer - **Type**: any - **Description**: Specifies the container element for the popup. #### popupStyle - **Type**: Object - **Description**: Allows custom styling for the popup. #### popupClassName - **Type**: String - **Description**: Assigns custom CSS classes to the popup for styling. #### popupProps - **Type**: Object - **Description**: Passes additional properties to the popup component. #### followTrigger - **Type**: Boolean - **Description**: Determines whether the popup should follow the trigger element during scrolling. #### inputProps - **Type**: Object - **Description**: Passes additional properties to the input element within the component. ``` -------------------------------- ### Reduce Moment.js Bundle Size with Webpack Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Configure Webpack to only bundle specified locale files for moment.js to reduce application size. Ensure you import the necessary locales in your application. ```javascript const webpack = require('webpack'); module.exports = { // ... plugins: [ // 打包指定需要的语言文件 new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn|ja/) // 只打包有过引用的语言文件，应用中需要添加如：`import 'moment/locale/zh-cn';` // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) ] }; ``` -------------------------------- ### Set ConfigProvider Language Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/config-provider/index.md Sets the active language for components managed by ConfigProvider. The provided language key must exist in the locales initialized by `initLocales`. ```javascript ConfigProvider.setLanguage('zh-cn'); ``` -------------------------------- ### TreeSelect Properties Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/tree-select/index.md This section details the configurable properties for the TreeSelect component. ```APIDOC ## TreeSelect Properties ### onChange - **Description**: Callback function triggered when the selected value changes. - **Signature**: `Function(value: String/Array, data: Object/Array) => void` - **Parameters**: - `value` (String/Array): The selected value(s). Returns a single value for single selection, or an array for multi-selection. - `data` (Object/Array): The selected data, including `value`, `label`, `pos`, and `key` properties. Returns a single value for single selection, or an array for multi-selection. When parent and child nodes are selected associatively, only the parent node is returned. ### showSearch - **Description**: Whether to display the search box. - **Type**: Boolean - **Default**: `false` ### onSearch - **Description**: Callback function triggered when typing in the search box. - **Signature**: `Function(keyword: String) => void` - **Parameters**: - `keyword` (String): The input keyword. ### notFoundContent - **Description**: Content to display when no data is found. - **Type**: ReactNode - **Default**: `'Not Found'` ### multiple - **Description**: Whether to support multi-selection. - **Type**: Boolean - **Default**: `false` ### treeCheckable - **Description**: Whether the tree in the dropdown supports checkboxes for nodes. - **Type**: Boolean - **Default**: `false` ### treeCheckStrictly - **Description**: Whether the checkboxes for nodes in the dropdown tree are fully controlled (parent and child node selection states are no longer associated). - **Type**: Boolean - **Default**: `false` ### treeCheckedStrategy - **Description**: Defines the strategy for returning values when selected. - **Type**: Enum - **Options**: `'all'` (returns all selected nodes), `'parent'` (returns only parent nodes if both parent and child are selected), `'child'` (returns only child nodes if both parent and child are selected). - **Default**: `'parent'` ### treeDefaultExpandAll - **Description**: Whether to expand all nodes in the tree by default. - **Type**: Boolean - **Default**: `false` ### treeDefaultExpandedKeys - **Description**: An array of keys for nodes to be expanded by default in the tree. - **Type**: Array<String> - **Default**: `[]` ### treeLoadData - **Description**: Function for asynchronously loading data in the tree. Refer to the [Tree asynchronous loading data Demo](https://fusion.design/pc/component/basic/tree#%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E6%95%B0%E6%8D%AE) for usage. - **Signature**: `Function(node: ReactElement) => void` - **Parameters**: - `node` (ReactElement): The node that was clicked to expand. ### treeProps - **Description**: An object for passing properties to the Tree component. - **Type**: Object - **Default**: `{}` ### defaultVisible - **Description**: Whether the dropdown is visible by default. - **Type**: Boolean - **Default**: `false` ### visible - **Description**: Whether the dropdown is currently visible. - **Type**: Boolean - **Default**: `-` ### onVisibleChange - **Description**: Callback function triggered when the dropdown is shown or hidden. - **Signature**: `Function(visible: Boolean, type: String) => void` - **Parameters**: - `visible` (Boolean): Whether it is visible. - `type` (String): The type of operation that triggered the show/hide. - **Default**: `() => {}` ``` -------------------------------- ### Transfer Component Properties Source: https://github.com/aliyun/cloud-design/blob/master/base-components/src/transfer/index.md This section details the configurable properties of the Transfer component. ```APIDOC ## Transfer Component Properties ### Description Details the configurable properties of the Transfer component. ### Properties - **rightDisabled** (Boolean) - Optional - Whether to disable the right panel. - **itemRender** (Function) - Optional - A function to render list items. Signature: `Function(data: Object) => ReactNode`. Parameters: `_data_`: {Object} item data. Returns: {ReactNode} item content. - **showSearch** (Boolean) - Optional - Whether to display the search box. - **filter** (Function) - Optional - A custom search function. Signature: `Function(searchedValue: String, data: Object) => Boolean`. Parameters: `_searchedValue_`: {String} search term, `_data_`: {Object} item data. Returns: {Boolean} whether the item matches. - **onSearch** (Function) - Optional - Callback function triggered when the search input changes. Signature: `Function(searchedValue: String, position: String) => void`. Parameters: `_searchedValue_`: {String} search term, `_position_`: {String} panel position. - **searchPlaceholder** (String) - Optional - Placeholder text for the search input. - **notFoundContent** (ReactNode) - Optional - Content to display when the list is empty. - **titles** (Array) - Optional - Titles for the left and right panels. - **operations** (Array) - Optional - Content for the move buttons between panels. ```