Merge pull request #736 from ShuyunFF2E/mly-featTabs

[CTable][Tabs]问题修改和功能新增
ShuyunFF2E · Jan 8, 2024 · c0871ad · c0871ad
2 parents 96fd287 + c8e56e8
commit c0871ad
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 10 deletions.
diff --git a/src/components/c-table/index.js b/src/components/c-table/index.js
@@ -168,7 +168,7 @@ class CTable extends Component {
       const btnNum = getBtnNum(item);
       const colClassName =
         align === 'right' && btnNum > 0 ? `padding-${btnNum}` : '';
-      return {
+      const column = {
         render: (val, row) => <ColumnTpl value={val} row={row} {...item} />,
         ...item,
         show: true,
@@ -177,6 +177,10 @@ class CTable extends Component {
           ? `${item.className} ${colClassName}`
           : colClassName,
       };
+      if (!item.dataIndex && !item.render) {
+        Object.assign(column, { render: () => '' });
+      }
+      return column;
     });
   };
 
@@ -466,10 +470,10 @@ class CTable extends Component {
    */
   setCheckedData = () => {
     // 更新叶子节点 leafNodesMap 的选中状态
-    this.props.checkedData.forEach((cNode) => {
+    this.props.checkedData?.forEach((cNode) => {
       const cNodeVal = this.getKeyFieldVal(cNode);
       if (this.leafNodesMap[cNodeVal]) {
-        this.leafNodesMap[cNodeVal].childNodes.forEach((node) => {
+        this.leafNodesMap[cNodeVal]?.childNodes?.forEach((node) => {
           Object.assign(node, { checked: true });
         });
       } else {
@@ -479,7 +483,7 @@ class CTable extends Component {
     });
     const leafNodeKeys = Object.keys(this.leafNodesMap);
     leafNodeKeys.forEach((key) => {
-      const isCheckedNode = !!this.props.checkedData.find(
+      const isCheckedNode = !!this.props?.checkedData.find(
         (node) => String(this.getKeyFieldVal(node)) === String(key),
       );
       // 不是已选节点 && （没有子节点被选中 或者 全部子节点都被选中）
@@ -489,7 +493,7 @@ class CTable extends Component {
           isEveryChecked(this.leafNodesMap[key].childNodes))
       ) {
         if (typeof this.leafNodesMap[key] === 'object') {
-          this.leafNodesMap[key].childNodes.forEach((node) => {
+          this.leafNodesMap[key]?.childNodes?.forEach((node) => {
             Object.assign(node, { checked: false });
           });
         } else {

diff --git a/src/components/c-table/index.md b/src/components/c-table/index.md
@@ -20,7 +20,7 @@ group:
 | -------------- | ---------------------- | ----------------- | ------ |
 | ajaxData | 表格数据源    | function/array   |   -   | |
 | columnData | 表格列描述，具体详见下表 **columnData**   | array   |   -   | |
-| rowKey | 表格数据的唯一标识    | string   |   'id'   | |
+| rowKey | 表格数据的唯一标识    | string/function   |   默认值是 `id`；如果 rowKey 是一个函数, 则 rowKey(record, index) 函数的返回值为唯一标识   | |
 | bordered | 是否展示表格边框   | boolean   |   false   | |
 | headerBordered | 表头带线条   | boolean   |   false   | |
 | size | 表格大小，可选 `default` `small` `large`    | string   |   `default`   | |

diff --git a/src/components/modal/demos/confirm.md b/src/components/modal/demos/confirm.md
@@ -35,6 +35,8 @@ class ModalDemo extends React.Component {
 			title: '基本确认对话框',
 			body: '杭州数云信息技术有限公司是国内领先的全域消费者增长方案提供商',
 			cancelBtnOpts: { type: 'secondary' },
+			// hasFooter: false,
+      //       className: "test",
 			onOk: () => {
 				this.handleOk();
 			},

diff --git a/src/components/modal/index.md b/src/components/modal/index.md
@@ -68,6 +68,8 @@ Modal.warning(config)
 | cancelText         | 取消按钮自定义文本                       | string              | `取消`  |
 | onOk       | 确定按钮回调函数，仅`Modal.confirm()`函数支持 | function | `--`   |
 | onClose    | 取消按钮回调函数                              | function | `--`   |
+| className          | 设置弹出框样式名称                       | string              | -       |
+| hasFooter          | 是否显示底部区域                         | boolean             | `true`  |
 
 `Modal.confirm()`函数的`onOk`回调函数支持返回`false`阻止关闭弹框，或者返回一个`promise`延迟关闭，具体使用见示例：确认对话框 Demo
 

diff --git a/src/components/modal/prompt.js b/src/components/modal/prompt.js
@@ -24,6 +24,8 @@ class Prompt extends React.Component {
     cancelText: '取消',
     onOk: noop,
     onCancel: noop,
+    hasFooter: true,
+    className: '',
   };
 
   static propTypes = {
@@ -37,6 +39,8 @@ class Prompt extends React.Component {
     okText: PropTypes.string,
     cancelText: PropTypes.string,
     onCancel: PropTypes.func,
+    hasFooter: PropTypes.bool,
+    className: PropTypes.string,
   };
 
   constructor(props) {
@@ -181,6 +185,8 @@ class Prompt extends React.Component {
           bodyStyle={promptBodyStyle}
           modalStyle={promptStyle}
           showConfirmLoading={this.state.showConfirmLoading}
+          hasFooter={this.props.hasFooter}
+          className={this.props.className}
         >
           <div>
             <header className="info-area">
@@ -232,6 +238,8 @@ function prompt({
   okBtnOpts,
   cancelBtnOpts,
   title,
+  hasFooter,
+  className,
 }) {
   // 创建一个关联id
   const rootDocument = getRootWindow().document;
@@ -251,6 +259,8 @@ function prompt({
       style={style}
       iconStyle={iconStyle}
       isShowIcon={isShowIcon}
+      hasFooter={hasFooter}
+      className={className}
       okText={okText}
       cancelText={cancelText}
       okBtnOpts={okBtnOpts}

diff --git a/src/components/tabs/demos/async.md b/src/components/tabs/demos/async.md
@@ -0,0 +1,51 @@
+---
+order: 1
+title: 基础用法
+desc: Tabs组件的基础用法
+---
+
+```jsx
+
+/**
+ * title: 异步获取选项卡列表
+ * desc: 异步获取选项卡列表
+ */
+import React, { Component } from 'react';
+import { Tabs } from 'cloud-react';
+
+class BasicTabsDemo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tabList: []
+    };
+
+    setTimeout(() => {
+      this.state.tabList.push(...[
+        { label: '选项normal', value: 1 },
+        { label: '选项active', value: 2 },
+        { label: '选项normal1', value: 3 },
+      ]);
+      this.setState({ tabList: [...this.state.tabList] });
+    }, 1500);
+  }
+
+  handleChange = key => {
+    console.log('当前激活面板key值为：' + key);
+  };
+
+  render() {
+    return (
+      <Tabs activeKey={this.state.tabList?.[0]?.value} onChange={this.handleChange} step={500}>
+        {this.state.tabList.map(tab => (
+          <Tabs.Panel tab={tab.label} key={tab.value}>
+            选项normal
+          </Tabs.Panel>
+        ))}
+      </Tabs>
+    );
+  }
+}
+
+export default BasicTabsDemo;
+```
diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js
@@ -43,7 +43,7 @@ export default class Tabs extends PureComponent {
     const { defaultActiveKey, activeKey, children } = props;
 
     const childList = Array.isArray(children) ? children : [ children ];
-    const activedKey = activeKey || defaultActiveKey || childList[0].key;
+    const activedKey = activeKey || defaultActiveKey || childList?.[0]?.key;
     const childCount = React.Children.count(children);
 
     this.state = {
@@ -271,7 +271,7 @@ export default class Tabs extends PureComponent {
 
   keyFilter = (key) => {
     // 使用form key会变为 0.$XXXX
-    const [ k1 = '', k2 = '' ] = key.split('.$');
+    const [ k1 = '', k2 = '' ] = `${key}`?.split('.$') || [];
     return k2 || k1;
   };
 
@@ -311,7 +311,7 @@ export default class Tabs extends PureComponent {
       linePrefixTpl,
     } = child.props;
     const { width } = tabBarStyle;
-    const { key } = child;
+    const key = child?.key;
 
     // class & style
     const className = cls(`${prefixCls}-tabs-item-${type}`, {
@@ -416,7 +416,7 @@ export default class Tabs extends PureComponent {
     Children.forEach(children, (child) => {
       if (!isValidElement(child)) return;
 
-      const isActived = this.keyFilter(child.key) === this.keyFilter(activedKey);
+      const isActived = this.keyFilter(child?.key) === this.keyFilter(activedKey);
       headers.push(this.renderTabHeader(child, isActived));
 
       if (type === 'card' && child.props.fixed) {

diff --git a/src/components/tabs/index.md b/src/components/tabs/index.md
@@ -60,3 +60,5 @@ group:
 <embed src="@components/tabs/demos/capsule.md" /> 
 
 <embed src="@components/tabs/demos/slide.md" /> 
+
+<embed src="@components/tabs/demos/async.md" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -60,3 +60,5 @@ group:
		<embed src="@components/tabs/demos/capsule.md" />

		<embed src="@components/tabs/demos/slide.md" />

		<embed src="@components/tabs/demos/async.md" />