Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 为 ColumnToggler 增加弹窗样式和布局相关属性 #11615

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: 为 ColumnToggler 增加弹窗样式和布局相关属性 #11615

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 23 additions & 19 deletions docs/zh-CN/components/crud.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading