Skip to content

Commit 8953d89

Browse files
liyuan-mengliyuan-meng
authored
Merge pull request #776 from ShuyunFF2E/feat-drawer-0529
抽屉支持全屏功能；其他组件问题修复
2 parents 4b4a5e2 + 681f150 commit 8953d89

21 files changed

Lines changed: 341 additions & 52 deletions

File tree

‎src/assets/images/foldScreen.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/images/fullScreen.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/components/badge/index.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@
6969
height: 6px;
7070
border-radius: 50%;
7171
margin-right: 8px;
72+
flex-shrink: 0;
7273
}
7374
}
7475

‎src/components/c-table/columnTpl/link.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,19 @@ import { isVoid } from '../util';
55
import Tooltip from '../../tooltip';
66
import './index.less';
77

8-
export default function LinkTpl({ value, row, linkKey, link, onClick, line = 1 }) {
8+
export default function LinkTpl({ value, row, linkKey, link, onClick, line = 1, tooltipValue }) {
99
const ref = useRef();
1010
const [tooltipContent, setTooltipContent] = useState('');
1111

1212
useEffect(() => {
13-
if (!isVoid(value)) {
13+
if (tooltipValue) {
14+
setTooltipContent(tooltipValue);
15+
} else if (!isVoid(value)) {
1416
if (ref.current.scrollHeight > ref.current.clientHeight + 4) {
1517
setTooltipContent(value);
1618
}
1719
}
18-
}, []);
20+
}, [tooltipValue]);
1921

2022
if (isVoid(value)) {
2123
return '-';

‎src/components/c-table/columnTpl/text.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,19 @@ import { isVoid } from '../util';
55
import Tooltip from '../../tooltip';
66
import './index.less';
77

8-
export default function TextTpl({ value, line = 1 }) {
8+
export default function TextTpl({ value, line = 1, tooltipValue }) {
99
const ref = useRef();
1010
const [tooltipContent, setTooltipContent] = useState('');
1111

1212
useEffect(() => {
13-
if (!isVoid(value)) {
13+
if (tooltipValue) {
14+
setTooltipContent(tooltipValue);
15+
} else if (!isVoid(value)) {
1416
if (ref.current.scrollHeight > ref.current.clientHeight + 4) {
1517
setTooltipContent(value);
1618
}
1719
}
18-
}, []);
20+
}, [tooltipValue]);
1921

2022
if (isVoid(value)) {
2123
return '-';

‎src/components/c-table/demos/config-column.md‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ export default function CTableDemo() {
125125
const [valid, setValid] = useState(false);
126126
const [isReloadGrid, setIsReloadGrid] = useState(true);
127127
const [supportResizeColumn, setSupportResizeColumn] = useState(false);
128+
const [defaultShowColumns, setDefaultShowColumns] = useState([]);
128129

129130
return (
130131
<div>
@@ -134,14 +135,19 @@ export default function CTableDemo() {
134135
supportPage
135136
columnData={columns}
136137
supportConfigColumn
137-
defaultShowColumns={[]}
138+
// 这里的值可以是：
139+
// 1、['id', 'name'] 这种数组形式 或者
140+
// 2、onColumnChange中透出的 columnData 这种对象数组形式，对象数组中的对象需要包含 show 和 dataIndex 属性
141+
// 如果使用第一种数组形式，在 onColumnChange 中不要执行 setDefaultShowColumns 给 defaultShowColumns 赋值，否则列排序会失效
142+
defaultShowColumns={defaultShowColumns}
138143
// defaultConfigColumns={['id', 'name', 'creator']}
139144
disabledSortColumns={['id']}
140145
hideConfigColumns={['operator']}
141146
disabledConfigColumns={['id']}
142147
configColumnType="complex"
148+
// configPanelMaxHeight={150}
143149
onColumnChange={({ columnData }) => {
144-
console.log(columnData);
150+
setDefaultShowColumns(columnData)
145151
}}
146152
ajaxData={(params) => {
147153
return new Promise(resolve => {

‎src/components/c-table/index.js‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
isFirefox,
1717
debounce,
1818
hasCustomScroll,
19-
getBtnNum, getScrollbarWidth, setConfig, isWindows,
19+
getBtnNum, getScrollbarWidth, setConfig, isWindows, isObjectStructure,
2020
} from './util';
2121
import {
2222
DRAG_ICON_SELECTOR,
@@ -184,12 +184,18 @@ class CTable extends Component {
184184

185185
resolveColumn = (columnData) => {
186186
const { defaultShowColumns, hideConfigColumns } = this.props;
187-
return columnData.map((item) => {
187+
188+
const isObject = isObjectStructure(defaultShowColumns);
189+
const _defaultShowColumns = isObject
190+
? defaultShowColumns.filter(item => item.show).map(item => item.dataIndex)
191+
: defaultShowColumns;
192+
193+
const resolveData = columnData.map((item) => {
188194
const align = item.type === NUMBER ? 'right' : item.align;
189195
const btnNum = getBtnNum(item);
190196
const colClassName =
191197
align === 'right' && btnNum > 0 ? `padding-${btnNum}` : '';
192-
const show = defaultShowColumns?.includes(item.dataIndex) || !defaultShowColumns?.length || hideConfigColumns?.includes(item.dataIndex);
198+
const show = _defaultShowColumns?.includes(item.dataIndex) || !_defaultShowColumns?.length || hideConfigColumns?.includes(item.dataIndex);
193199
const column = {
194200
render: (val, row) => <ColumnTpl value={val} row={row} {...item} />,
195201
...item,
@@ -205,6 +211,16 @@ class CTable extends Component {
205211
}
206212
return column;
207213
});
214+
if (isObject) {
215+
return defaultShowColumns.reduce((arr, item) => {
216+
const target = resolveData.find(item1 => item1.dataIndex === item.dataIndex);
217+
if (target) {
218+
arr.push(target);
219+
}
220+
return arr;
221+
}, [])
222+
}
223+
return resolveData;
208224
};
209225

210226
resolveOriginColumn = (columnData) => {
@@ -288,7 +304,7 @@ class CTable extends Component {
288304
if (bodyEle) {
289305
const { scrollWidth, clientWidth, scrollLeft } = bodyEle;
290306
const rootDom = this.ref.current.querySelector(`.${tablePrefixCls}`);
291-
if (!rootDom) {
307+
if (!rootDom) {
292308
return;
293309
}
294310
if (scrollLeft < scrollWidth - clientWidth) {

‎src/components/c-table/index.md‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ group:
1717

1818
### CTable 基础配置项
1919

20-
| 属性 | 说明 | 类型 | 默认值 |
20+
| 属性 | 说明 | 类型 | 默认值 | |
2121
| ---------------- | ------------------------------------------------------------------------------------- | -------------- | --------- | --- |
2222
| ajaxData | 表格数据源 | function/array | - | |
2323
| columnData | 表格列描述，具体详见下表 **columnData** | array | - | |
@@ -39,7 +39,7 @@ this.tableRef.current.refreshTable(gotoFirstPage?, params?);
3939

4040
_refreshTable 参数：_
4141

42-
| 属性 | 说明 | 类型 | 默认值 |
42+
| 属性 | 说明 | 类型 | 默认值 | |
4343
| ------------- | ---------------------------------------------- | ------- | ------ | --- |
4444
| gotoFirstPage | 表格刷新后，是否跳转到第一页 | boolean | true | |
4545
| params | 分页等表格查询参数（暂不支持传入额外查询参数） | object | {} | |
@@ -50,22 +50,22 @@ this.tableRef.current.setColumn(columnData, isReloadGrid?);
5050

5151
_setColumn 参数：_
5252

53-
| 属性 | 说明 | 类型 | 默认值 |
53+
| 属性 | 说明 | 类型 | 默认值 | |
5454
| ------------ | ---------------------------------- | ------- | ------ | --- |
5555
| columnData | 表格列数组 | array | [] | |
5656
| isReloadGrid | 重新设置表格列后，是否需要刷新表格 | boolean | false | |
5757

5858
### CTable 字段映射
5959

60-
| 属性 | 说明 | 类型 | 默认值 |
60+
| 属性 | 说明 | 类型 | 默认值 | |
6161
| ----------- | ----------------- | ------ | ---------- | --- |
6262
| totalsKey | total 映射字段 | string | 'totals' | |
6363
| dataKey | data 映射字段 | string | 'data' | |
6464
| childrenKey | children 映射字段 | string | 'children' | |
6565

6666
### CTable 分页相关配置
6767

68-
| 属性 | 说明 | 类型 | 默认值 |
68+
| 属性 | 说明 | 类型 | 默认值 | |
6969
| ----------- | ---------------------------------------------------------------------------------------------- | ------- | ------ | --- |
7070
| supportPage | 是否支持分页 | boolean | false | |
7171
| pageOpts | 分页信息，详见**Pagination**组件：https://cloud-react.shuyun.com/v1/cloud-react/nav/pagination | object | - | |
@@ -74,7 +74,7 @@ _setColumn 参数：_
7474

7575
### CTable 多级表格配置（树、展开行）
7676

77-
| 属性 | 说明 | 类型 | 默认值 |
77+
| 属性 | 说明 | 类型 | 默认值 | |
7878
| --------------------- | -------------------------------------------------------------------------- | -------- | ------ | --- |
7979
| supportTree | 是否支持树状表格 | boolean | false | |
8080
| supportExpend | 是否支持展开 | boolean | false | |
@@ -88,7 +88,7 @@ _setColumn 参数：_
8888

8989
### CTable 多选/单选配置
9090

91-
| 属性 | 说明 | 类型 | 默认值 |
91+
| 属性 | 说明 | 类型 | 默认值 | |
9292
| ----------------- | ----------------------------------------------------------------------------------------------- | -------- | ------ | --- |
9393
| supportCheckbox | 是否支持多选 | boolean | false | |
9494
| checkedData | 已选数据，支持两种写法。在 "多选表格（checkbox.md）" demo 中查看说明 | array | [] | |
@@ -101,7 +101,7 @@ _setColumn 参数：_
101101

102102
### CTable 表格拖拽配置
103103

104-
| 属性 | 说明 | 类型 | 默认值 |
104+
| 属性 | 说明 | 类型 | 默认值 | |
105105
| ------------ | -------------------- | -------- | ------ | --- |
106106
| supportDrag | 是否支持表格拖拽行 | bool | false | |
107107
| showDragIcon | 是否展示拖拽手柄 | bool | false | |
@@ -110,21 +110,21 @@ _setColumn 参数：_
110110

111111
### CTable 表格固定表头
112112

113-
| 属性 | 说明 | 类型 | 默认值 |
113+
| 属性 | 说明 | 类型 | 默认值 | |
114114
| ------------ | ------------------ | --------------------------------------------------------------------------- | ------ | --- |
115115
| sticky | 表头固定 | object { offsetHeader?: number, getContainer?: () => Window / HTMLElement } | {} | |
116116
| stickyFooter | 表尾固定在页面底部 | bool | false | |
117117

118118
### CTable 表格排序（此处是全局配置，配置每列的排序详看 columnData 配置）
119119

120-
| 属性 | 说明 | 类型 | 默认值 |
120+
| 属性 | 说明 | 类型 | 默认值 | |
121121
| --------------------- | ----------------------------------------------------------------------- | ------- | ------ | --- |
122122
| sortWidthOriginStatus | 表格排序状态分为升序和降序，配置该参数为 true，排序状态可以恢复原始状态 | boolean | false | |
123123
| sortMultiColumns | 是否支持多个列同时排序 | boolean | false | |
124124

125125
### CTable 表格配置列的显示和隐藏
126126

127-
| 属性 | 说明 | 类型 | 默认值 |
127+
| 属性 | 说明 | 类型 | 默认值 | |
128128
| --------------------- | -------------------------------------------------------------- | -------- | ------- | --- |
129129
| supportConfigColumn | 是否支持列的显示和隐藏 | boolean | false | |
130130
| configColumnType | 类型：`default` `complex` | string | default | |
@@ -134,10 +134,11 @@ _setColumn 参数：_
134134
| defaultConfigColumns | 默认列（恢复默认操作使用，type 为 `complex` 时可用） | Array | [] | |
135135
| disabledSortColumns | 不可移动顺序的列（只允许设置在列首，type 为 `complex` 时可用） | Array | [] | |
136136
| onColumnChange | 改变列后的回调函数 | function | - | |
137+
| configPanelMaxHeight | 面板最大高度 | number | - | |
137138

138139
### CTable 自定义模板配置
139140

140-
| 属性 | 说明 | 类型 | 默认值 |
141+
| 属性 | 说明 | 类型 | 默认值 | |
141142
| --------------- | ------------------------------------------------------------------------------------------------------------ | -------------------- | --------- | --- |
142143
| footerTpl | 自定义 footer | function | - | |
143144
| footerHeight | 分页部分高度，设置 footerTpl，需要设置 footerHeight | number | undefined | |
@@ -153,7 +154,7 @@ _setColumn 参数：_
153154

154155
### CTable 业务相关配置
155156

156-
| 属性 | 说明 | 类型 | 默认值 |
157+
| 属性 | 说明 | 类型 | 默认值 | |
157158
| -------------------- | ---------------------------------------------------------- | ------- | ------ | --- |
158159
| isDelay | 刷新表格时，是否延迟 loading，一般在纯前端表格中使用 | boolean | false | |
159160
| isCheckboxFixed | 是否固定多选框列或单选框列 | boolean | false | |
@@ -167,7 +168,7 @@ _setColumn 参数：_
167168

168169
### CTable 其他功能配置
169170

170-
| 属性 | 说明 | 类型 | 默认值 |
171+
| 属性 | 说明 | 类型 | 默认值 | |
171172
| ------------------- | ---------------------------------------------------------------- | ------- | ------ | --- |
172173
| supportResizeColumn | 是否支持配置列的拉伸 | boolean | false | |
173174
| summaryData | 表格合计（API 同 columnData） | array | [] | |
@@ -238,6 +239,7 @@ _setColumn 参数：_
238239
| ------------------- | -------------------------------------------- | --------------------------- | ---------------- |
239240
| value | 展示值，使用组件的形式必传，使用 typeConfig 忽略此字段 | string | - |
240241
| typeConfig.line | 展示行数 | number | 1 |
242+
| typeConfig.tooltipValue | 如果不想让 tooltip 展示 value 的值，可以单独配置 tooltipValue | string | - |
241243

242244
**（5）type 为 链接类型-`LINK`**
243245
（_可根据下表配置 typeConfig，查看 [Demo](https://cloud-react.shuyun.com/v1/cloud-react/data/c-table#标准化表格-文本类型)；也可以使用组件形式 <Table.LinkTpl/>，查看 [Demo](https://cloud-react.shuyun.com/v1/cloud-react/data/c-table#标准化表格-使用列模板形式)_）
@@ -248,6 +250,7 @@ _setColumn 参数：_
248250
| typeConfig.linkKey | 链接 key（取自 row 中的字段） | string | '' |
249251
| typeConfig.link | 链接值 | string | '' |
250252
| typeConfig.onClick | 点击链接的回调函数 | func | - |
253+
| typeConfig.tooltipValue | 如果不想让 tooltip 展示 value 的值，可以单独配置 tooltipValue | string | - |
251254

252255
**（6）type 为 标签类型-`TAG`**
253256
（_可根据下表配置 typeConfig，查看 [Demo](https://cloud-react.shuyun.com/v1/cloud-react/data/c-table#标准化表格-标签类型)；也可以使用组件形式 <Table.TagTpl/>，查看 [Demo](https://cloud-react.shuyun.com/v1/cloud-react/data/c-table#标准化表格-使用列模板形式)_）

0 commit comments

Comments
 (0)