Skip to content

Commit

Permalink
feat(ColumnToggler): 增加弹窗样式和布局相关属性
Browse files Browse the repository at this point in the history 
- 在 columns-toggler 属性表中添加了 modalSize、modalWidth、modalHeight 和 modalColumnCount 属性
- 实现列弹窗尺寸与自定义宽高配置
- 实现弹窗内每行显示列数配置
- 更新了相关的 SCSS 样式文件，增加了对新属性的样式处理
  • Loading branch information
Song Mingxu committed Feb 16, 2025
1 parent 1265861 commit 78407c1
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 22 deletions.
42 changes: 23 additions & 19 deletions docs/zh-CN/components/crud.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4496,25 +4496,29 @@ itemAction 里的 onClick 还能通过 `data` 参数拿到当前行的数据，

### columns-toggler 属性表

| 属性名 | 类型 | 默认值 | 说明 |
| --------------- | ------------------------------ | --------- | -------------------------------------- |
| label | `string` | | 按钮文字 |
| tooltip | `string` | | 按钮提示文字 |
| disabledTip | `string` | | 按钮禁用状态下的提示 |
| align | `"left" \| "right"` | `"left"` | 点击内容是否关闭 |
| size | `"xs" \| "sm" \| "md" \| "lg"` | | 按钮大小，参考[按钮](./action) |
| footerBtnSize | `"xs" \| "sm" \| "md" \| "lg"` | | 弹窗底部按钮大小，参考[按钮](./action) |
| level | `string` | `default` | 按钮样式，参考[按钮](./action) |
| draggable | `boolean` | `false` | 是否可通过拖拽排序 |
| defaultIsOpened | `boolean` | `false` | 默认是否展开 |
| hideExpandIcon | `boolean` | `true` | 是否隐藏展开的图标 |
| overlay | `boolean` | `false` | 是否显示遮罩层 |
| closeOnOutside | `boolean` | | 点击外部是否关闭 |
| closeOnClick | `boolean` | | 点击内容是否关闭 |
| iconOnly | `boolean` | `false` | 是否只显示图标。 |
| icon | `string` | | 按钮的图标 |
| className | `string` | | 外层 CSS 类名 |
| btnClassName | `string` | | 按钮的 CSS 类名 |
| 属性名 | 类型 | 默认值 | 说明 |
| ---------------- | ------------------------------ | --------- | -------------------------------------- |
| label | `string` | | 按钮文字 |
| tooltip | `string` | | 按钮提示文字 |
| disabledTip | `string` | | 按钮禁用状态下的提示 |
| align | `"left" \| "right"` | `"left"` | 点击内容是否关闭 |
| size | `"xs" \| "sm" \| "md" \| "lg"` | | 按钮大小，参考[按钮](./action) |
| footerBtnSize | `"xs" \| "sm" \| "md" \| "lg"` | | 弹窗底部按钮大小，参考[按钮](./action) |
| level | `string` | `default` | 按钮样式，参考[按钮](./action) |
| draggable | `boolean` | `false` | 是否可通过拖拽排序 |
| defaultIsOpened | `boolean` | `false` | 默认是否展开 |
| hideExpandIcon | `boolean` | `true` | 是否隐藏展开的图标 |
| overlay | `boolean` | `false` | 是否显示遮罩层 |
| closeOnOutside | `boolean` | | 点击外部是否关闭 |
| closeOnClick | `boolean` | | 点击内容是否关闭 |
| iconOnly | `boolean` | `false` | 是否只显示图标。 |
| icon | `string` | | 按钮的图标 |
| className | `string` | | 外层 CSS 类名 |
| btnClassName | `string` | | 按钮的 CSS 类名 |
| modalSize | `string` | | 弹窗大小，参考[弹窗](./dialog) |
| modalWidth | `string` | | 弹窗宽度 |
| modalHeight | `string` | | 弹窗高度 |
| modalColumnCount | `number` | | 弹窗内每行显示的列数 |

## 事件表

Expand Down
6 changes: 6 additions & 0 deletions packages/amis-ui/scss/components/_column-toggler.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,12 @@
cursor: move;
}
}

@for $i from 1 through 10 {
&--column-#{$i} > .#{$ns}ColumnToggler-menuItem {
width: calc((100% - var(--ColumnToggler-item-margin) * $i * 2) / $i);
}
}
}

&-footer {
Expand Down
29 changes: 26 additions & 3 deletions packages/amis/src/renderers/Table/ColumnToggler.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import {findDOMNode} from 'react-dom';
import Sortable from 'sortablejs';
import cloneDeep from 'lodash/cloneDeep';
import {isMobile, RendererProps} from 'amis-core';
import {RendererProps} from 'amis-core';
import {Overlay} from 'amis-core';
import {PopOver} from 'amis-core';
import {Modal} from 'amis-ui';
Expand All @@ -13,7 +13,6 @@ import {TooltipWrapper} from 'amis-ui';
import {noop, autobind, anyChanged, createObject} from 'amis-core';
import {filter} from 'amis-core';
import {Icon} from 'amis-ui';
import {getIcon} from 'amis-ui';
import {RootClose} from 'amis-core';
import type {TooltipObject} from 'amis-ui/lib/components/TooltipWrapper';
import {IColumn} from 'amis-core';
Expand Down Expand Up @@ -124,6 +123,10 @@ export interface ColumnTogglerProps extends RendererProps {
onColumnToggle: (columns: Array<IColumn>) => void;
modalContainer?: () => HTMLElement;
tooltipContainer?: any;
modalSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'full' | 'custom';
modalWidth?: string;
modalHeight?: string;
modalColumnCount?: number;
}

export interface ColumnTogglerState {
Expand Down Expand Up @@ -375,11 +378,28 @@ export default class ColumnToggler<
translate: __,
footerBtnSize,
children,
modalSize,
modalWidth,
modalHeight,
modalColumnCount,
env
} = this.props;

const {enableSorting, tempColumns} = this.state;
const inDragging = enableSorting && draggable && tempColumns.length > 1;
const style = {
width: !modalSize
? undefined
: modalSize === 'custom'
? modalWidth
: 'unset',
height: modalSize !== 'custom' ? undefined : modalHeight
};
const listClasses = ['ColumnToggler-modal-content'];
if (modalColumnCount)
listClasses.push(
`ColumnToggler-modal-content--column-${modalColumnCount}`
);
return (
<>
<Modal
Expand All @@ -389,6 +409,9 @@ export default class ColumnToggler<
contentClassName={cx('ColumnToggler-modal')}
container={modalContainer || this.target}
overlay={typeof overlay === 'boolean' ? overlay : false}
draggable={true}
size={modalSize}
style={style}
>
<header className={cx('ColumnToggler-modal-header')}>
<span className={cx('ColumnToggler-modal-title')}>
Expand All @@ -406,7 +429,7 @@ export default class ColumnToggler<
{!inDragging && (
<ul className={cx('ColumnToggler-modal-content')}>{children}</ul>
)}
<ul className={cx('ColumnToggler-modal-content')} ref={this.dragRef}>
<ul className={cx(listClasses)} ref={this.dragRef}>
{Array.isArray(tempColumns)
? tempColumns.map((column, index) => (
<TooltipWrapper
Expand Down

0 comments on commit 78407c1

Please sign in to comment.