test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-03 04:18:29 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

combo拖拽交互优化

Browse Source
This commit is contained in:
rickcole 2020-04-10 15:53:40 +08:00
parent 4c97a58e06
commit 544283b422
6 changed files with 72 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
scss/_variables.scss
View File

@ -1184,6 +1184,7 @@ $Combo--vertical-itemToolbar-positionTop: -$Combo--vertical-itemToolbar-height !
$Combo--vertical-itemToolbar-positionRight: px2rem(5px) !default;
$Combo--horizontal-item-gap: px2rem(5px);
$Combo--horizontal-dragger-top: px2rem(8px) !default;
// Sub Form
$SubForm--addBtn-bg: $Button--info-bg !default;

33
scss/components/form/_combo.scss
View File

@ -67,6 +67,16 @@
background: $white;
}
&-itemDrager {
cursor: move;
svg {
width: px2rem(20px);
height: px2rem(20px);
top: $Combo--horizontal-dragger-top;
}
}
&--hor {
.#{$ns}Combo-item {
display: flex;
@ -103,6 +113,14 @@
opacity: $Button-onDisabled-opacity;
}
}
&.is-draggable .#{$ns}Combo-toolbar {
padding-left: px2rem(24px);
}
.#{$ns}Combo-itemDrager {
padding: 0 px2rem(6px) 0 0;
}
}
&--ver:not(&--noBorder) {
@ -183,6 +201,21 @@
opacity: 1;
}
}
.#{$ns}Combo-itemDrager {
position: absolute;
top: 0;
left: px2rem(-30px);
}
&.is-draggable {
.#{$ns}Combo-item {
margin-left: px2rem(35px);
}
.#{$ns}Combo-toolbar {
padding-left: px2rem(25px);
}
}
}
&-item--dragging {

3
scss/themes/cxd.scss
View File

@ -487,6 +487,9 @@ $Card-actions-onHover-bg: white;
$Card-actions-onHover-color: $primary;
$Card-actions-onChecked-onHover-bg: $white;
// Combo
$Combo--horizontal-dragger-top: px2rem(5px);
@import '../variables';
@import '../mixins';
@import '../base/reset';

4
src/components/icons.tsx
View File

@ -63,6 +63,9 @@ import InfoIcon from '../icons/info.svg';
// @ts-ignore
import LocationIcon from '../icons/location.svg';
// @ts-ignore
import ComboDraggerIcon from '../icons/combo-dragger.svg';
// 兼容原来的用法，后续不直接试用。
// @ts-ignore
export const closeIcon = <CloseIcon />;
@ -125,6 +128,7 @@ registerIcon('back', BackIcon);
registerIcon('move', MoveIcon);
registerIcon('info', InfoIcon);
registerIcon('location', LocationIcon);
registerIcon('combo-dragger', ComboDraggerIcon);
export function Icon({
icon,

1
src/icons/combo-dragger.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1586501480188" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1509" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M469.333333 256a85.333333 85.333333 0 1 1-85.333333-85.333333 85.333333 85.333333 0 0 1 85.333333 85.333333z m-85.333333 170.666667a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m256-341.333334a85.333333 85.333333 0 1 0-85.333333-85.333333 85.333333 85.333333 0 0 0 85.333333 85.333333z m0 85.333334a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z m0 256a85.333333 85.333333 0 1 0 85.333333 85.333333 85.333333 85.333333 0 0 0-85.333333-85.333333z" p-id="1510" data-spm-anchor-id="a313x.7781069.0.i6" class="selected" fill="#999999"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

47
src/renderers/Form/Combo.tsx
View File

@ -22,6 +22,7 @@ import {dataMapping, resolveVariable} from '../../utils/tpl-builtin';
import {isEffectiveApi} from '../../utils/api';
import {Alert2} from '../../components';
import memoize from 'lodash/memoize';
import {Icon}from '../../components/icons'
export interface Condition {
test: string;
controls: Array<Schema>;
@ -91,8 +92,8 @@ export default class ComboControl extends React.Component<ComboProps> {
addButtonText: '新增',
canAccessSuperData: false,
addIcon: 'fa fa-plus',
dragIcon: 'glyphicon glyphicon-sort',
deleteIcon: 'glyphicon glyphicon-remove',
dragIcon: '',
deleteIcon: '',
tabsMode: false,
tabsStyle: '',
placeholder: '<空>'
@ -751,7 +752,7 @@ export default class ComboControl extends React.Component<ComboProps> {
data-tooltip="删除"
data-position="bottom"
>
<i className={deleteIcon} />
{deleteIcon ? <i className={deleteIcon} /> : <Icon icon="close" /> }
</a>
);
}
@ -888,7 +889,8 @@ export default class ComboControl extends React.Component<ComboProps> {
`Combo Combo--multi`,
multiLine ? `Combo--ver` : `Combo--hor`,
noBorder ? `Combo--noBorder` : '',
disabled ? 'is-disabled' : ''
disabled ? 'is-disabled' : '',
(!disabled && draggable && Array.isArray(value) && value.length > 1) ? 'is-draggable' : '',
)}
>
<div className={cx(`Combo-items`)}>
@ -896,18 +898,18 @@ export default class ComboControl extends React.Component<ComboProps> {
? value.map((value, index, thelist) => {
const toolbar: Array<any> = [];
if (!disabled && draggable && thelist.length > 1) {
toolbar.push(
<a
key="drag"
className={cx(`Combo-toolbarBtn Combo-itemDrager`)}
data-tooltip="拖拽排序"
data-position="bottom"
>
<i className={dragIcon} />
</a>
);
}
// if (!disabled && draggable && thelist.length > 1) {
// toolbar.push(
// <a
// key="drag"
// className={cx(`Combo-toolbarBtn Combo-itemDrager`)}
// data-tooltip="拖拽排序"
// data-position="bottom"
// >
// <i className={dragIcon} />
// </a>
// );
// }
if (
finnalRemovable && // 表达式判断单条是否可删除
@ -926,7 +928,7 @@ export default class ComboControl extends React.Component<ComboProps> {
data-tooltip="删除"
data-position="bottom"
>
<i className={deleteIcon} />
{deleteIcon ? <i className={deleteIcon} /> : <Icon icon="close" /> }
</a>
);
}
@ -954,6 +956,17 @@ export default class ComboControl extends React.Component<ComboProps> {
className={cx(`Combo-item`)}
key={this.keys[index] || (this.keys[index] = guid())}
>
{!disabled && draggable && thelist.length > 1 ? (
<div className={cx('Combo-itemDrager')}>
<a
key="drag"
data-tooltip="拖拽排序"
data-position="bottom"
>
{dragIcon ? ( <i className={dragIcon} /> ): <Icon icon="combo-dragger"/> }
</a>
</div>
): null}
{condition && typeSwitchable !== false ? (
<div className={cx('Combo-itemTag')}>
<label>类型</label>