From 5de38ac568918359826ca3f2bf0703e960a908bc Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Fri, 25 Dec 2020 00:13:14 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/table.md | 26 ++++++++++- examples/components/CRUD/PopOver.tsx | 3 +- scss/_properties.scss | 13 +----- scss/components/form/_combo.scss | 64 ++++++++++++---------------- scss/components/form/_tree.scss | 11 ++--- scss/themes/_cxd-variables.scss | 3 ++ src/renderers/Form/Combo.tsx | 27 +++--------- src/renderers/PopOver.tsx | 60 +++++++++++++++++++++----- src/renderers/Table/TableCell.tsx | 4 +- 9 files changed, 122 insertions(+), 89 deletions(-) diff --git a/docs/components/table.md b/docs/components/table.md index 417c75509..4a1472015 100755 --- a/docs/components/table.md +++ b/docs/components/table.md @@ -560,7 +560,31 @@ order: 67 - `mode` 可配置成 `popOver`、`dialog` 或者 `drawer`。 默认为 `popOver`。 - `size` 当配置成 `dialog` 或者 `drawer` 的时候有用。 -- `position` 配置弹出位置，只有 `popOver` 模式有用。可选参数：`center`、`left-top`、`right-top`、`left-bottom`、`right-bottom`、`fixed-center`、`fixed-left-top`、`fixed-right-top`、`fixed-left-bottom`、`fixed-right-bottom`。 +- `position` 配置弹出位置，只有 `popOver` 模式有用。 + 可选参数： + + - `center` + + - `left-top` + - `right-top` + - `left-bottom` + - `right-bottom` + + atX-atY-myX-myY + 即：对齐目标的位置-对齐自己的位置 + + - `left-top-right-bottom` 在目标位置的左上角显示。 + - `left-center-right-center` 在目标的左侧显示，垂直对齐。 + - ... + + 固定位置 + + - `fixed-center` + - `fixed-left-top` + - `fixed-right-top` + - `fixed-left-bottom` + - `fixed-right-bottom`。 + - `offset` 默认 `{top: 0, left: 0}`，如果要来一定的便宜请设置这个。 - `trigger` 触发弹出的条件。可配置为 `click` 或者 `hover`。默认为 `click`。 - `showIcon` 是否显示图标。默认会有个放大形状的图标出现在列里面。如果配置成 false，则触发事件出现在列上就会触发弹出。 diff --git a/examples/components/CRUD/PopOver.tsx b/examples/components/CRUD/PopOver.tsx index 7814ca487..59fe35dd0 100644 --- a/examples/components/CRUD/PopOver.tsx +++ b/examples/components/CRUD/PopOver.tsx @@ -21,7 +21,8 @@ export default { trigger: 'hover', showIcon: false, body: 'Popover 内容：${platform}', - position: 'right-bottom' + popOverClassName: 'min-w-0', + position: 'left-center-right-center right-center-left-center' } }, { diff --git a/scss/_properties.scss b/scss/_properties.scss index 9d9c475d2..f43f49461 100644 --- a/scss/_properties.scss +++ b/scss/_properties.scss @@ -459,18 +459,7 @@ --Combo--vertical-item-onHover-borderColor: var(--info); --Combo--vertical-item-paddingX: #{px2rem(10px)}; --Combo--vertical-item-paddingY: #{px2rem(10px)}; - --Combo--vertical-itemToolbar-bg: var(--info); - --Combo--vertical-itemToolbar-borderColor: #{darken($info, 5%)}; - --Combo--vertical-itemToolbar-borderRadius: #{px2rem(3px)}; - --Combo--vertical-itemToolbar-borderWidth: var(--borderWidth); - --Combo--vertical-itemToolbar-color: #{darken($white, 5%)}; - --Combo--vertical-itemToolbar-height: #{px2rem(25px)}; - --Combo--vertical-itemToolbar-onHover-color: var(--white); - --Combo--vertical-itemToolbar-positionRight: #{px2rem(5px)}; - --Combo--vertical-itemToolbar-positionTop: var( - --Combo--vertical-itemToolbar-height - ); - --Combo--vertical-itemToolbar-transion: all 0.25s ease-in-out; + --Combo-addBtn-bg: var(--Button--info-bg); --Combo-addBtn-border: var(--Button--info-border); --Combo-addBtn-borderRadius: var(--Button-borderRadius); diff --git a/scss/components/form/_combo.scss b/scss/components/form/_combo.scss index c6a2e2160..b0ee777c5 100644 --- a/scss/components/form/_combo.scss +++ b/scss/components/form/_combo.scss @@ -56,6 +56,27 @@ } } + &-delBtn { + color: var(--icon-color); + cursor: pointer; + + &:hover { + color: var(--icon-onHover-color); + } + } + + &-tab-delBtn { + color: var(--icon-color); + cursor: pointer; + position: absolute; + top: -8px; + right: 4px; + + &:hover { + color: var(--icon-onHover-color); + } + } + &-items { &:empty { display: none; @@ -115,14 +136,14 @@ } } - .#{$ns}Combo-itemToolbar { + .#{$ns}Combo-delBtn { margin-left: var(--gap-xs); display: flex; white-space: nowrap; align-items: flex-start; padding-top: var(--Form-label-paddingTop); - > .is-disabled { + &.is-disabled { pointer-events: none; opacity: var(--Button-onDisabled-opacity); } @@ -178,39 +199,11 @@ margin: calc(var(--Combo--vertical-item-gap) * 2); } - > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar, - > .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-itemToolbar { - opacity: 0; + > .#{$ns}Combo-items > .#{$ns}Combo-item > .#{$ns}Combo-delBtn { position: absolute; - right: var(--Combo--vertical-itemToolbar-positionRight); - top: calc(var(--Combo--vertical-itemToolbar-positionTop) / 2); - transition: var(--Combo--vertical-itemToolbar-transion); - height: var(--Combo--vertical-itemToolbar-height); - line-height: var(--Combo--vertical-itemToolbar-height); - background: var(--Combo--vertical-itemToolbar-bg); - color: var(--Combo--vertical-itemToolbar-color); - border-top-left-radius: var(--Combo--vertical-itemToolbar-borderRadius); - border-top-right-radius: var(--Combo--vertical-itemToolbar-borderRadius); - padding: 0 px2rem(3px); - border-style: solid; - border-color: var(--Combo--vertical-itemToolbar-borderColor); - border-width: var(--Combo--vertical-itemToolbar-borderWidth) - var(--Combo--vertical-itemToolbar-borderWidth) 0 - var(--Combo--vertical-itemToolbar-borderWidth); - // margin-top: px2rem(-1px); - - .#{$ns}Combo-toolbarBtn { - color: inherit; - line-height: var(--Combo--vertical-itemToolbar-height); - // font-size: px2rem(14px); - - &:hover { - color: var(--Combo--vertical-itemToolbar-onHover-color); - } - } - - // top: var(--Combo--vertical-itemToolbar-positionTop); - // opacity: 1; + opacity: 0; + top: var(--gap-xs); + right: var(--gap-xs); } &:not(.is-disabled) > .#{$ns}Combo-item:hover, @@ -218,8 +211,7 @@ border-color: var(--Combo--vertical-item-onHover-borderColor); // border-style: solid; - > .#{$ns}Combo-itemToolbar { - top: var(--Combo--vertical-itemToolbar-positionTop); + > .#{$ns}Combo-delBtn { opacity: 1; } } diff --git a/scss/components/form/_tree.scss b/scss/components/form/_tree.scss index 3633927e2..2aec00429 100644 --- a/scss/components/form/_tree.scss +++ b/scss/components/form/_tree.scss @@ -169,7 +169,7 @@ &-itemArrow { cursor: pointer; width: var(--Tree-itemArrowWidth); - display: inline-block; + display: inline-flex; margin-right: px2rem(5px); // &:before { @@ -180,7 +180,7 @@ > svg { width: var(--Tree-itemArrowWidth); height: var(--Tree-itemArrowWidth); - display: inline-block; + display: block; transition: transform 0.2s; top: 0; transform: rotate(90deg); @@ -197,7 +197,7 @@ } &-itemIcon { - display: inline-block; + display: inline-flex; margin-right: px2rem(5px); } @@ -205,6 +205,7 @@ &-folderIcon, &-leafIcon { > svg { + top: 0; width: px2rem(14px); height: px2rem(14px); } @@ -223,8 +224,8 @@ } > .#{$ns}Checkbox { - line-height: 1; - display: inline-block; + display: inline-flex; + align-self: center; } } diff --git a/scss/themes/_cxd-variables.scss b/scss/themes/_cxd-variables.scss index 223f78c90..19f6f63a4 100644 --- a/scss/themes/_cxd-variables.scss +++ b/scss/themes/_cxd-variables.scss @@ -153,6 +153,9 @@ $Wizard-steps-liAfterBorder: none !important; --Checkbox-size: #{px2rem(14px)}; --Checkbox-inner-size: #{px2rem(8px)}; --Checkbox--full-inner-size: #{px2rem(10px)}; + --Checkbox--sm-size: #{px2rem(14px)}; + --Checkbox--sm-inner-size: #{px2rem(8px)}; + --Checkbox--sm--full-inner-size: #{px2rem(10px)}; --Radio-size: #{px2rem(16px)}; --Radio-inner-size: #{px2rem(10px)}; diff --git a/src/renderers/Form/Combo.tsx b/src/renderers/Form/Combo.tsx index 0b53f6205..9af473636 100644 --- a/src/renderers/Form/Combo.tsx +++ b/src/renderers/Form/Combo.tsx @@ -997,7 +997,7 @@ export default class ComboControl extends React.Component { onClick={this.removeItem.bind(this, index)} key="remove" className={cx( - `Combo-toolbarBtn ${!store.removable ? 'is-disabled' : ''}` + `Combo-tab-delBtn ${!store.removable ? 'is-disabled' : ''}` )} data-tooltip={__('删除')} data-position="bottom" @@ -1163,34 +1163,19 @@ export default class ComboControl extends React.Component {
{Array.isArray(value) && value.length ? ( value.map((value, index, thelist) => { - const toolbar: Array = []; - - // if (!disabled && draggable && thelist.length > 1) { - // toolbar.push( - // - // - // - // ); - // } + let delBtn: any = null; if ( finnalRemovable && // 表达式判断单条是否可删除 (!itemRemovableOn || evalExpression(itemRemovableOn, value) !== false) ) { - toolbar.push( + delBtn = ( { )}
- {toolbar.length ? ( -
{toolbar}
- ) : null} + {delBtn} ); }) diff --git a/src/renderers/PopOver.tsx b/src/renderers/PopOver.tsx index 83b93ed6f..26e0397be 100644 --- a/src/renderers/PopOver.tsx +++ b/src/renderers/PopOver.tsx @@ -41,9 +41,45 @@ export interface SchemaPopOverObject { position?: | 'center' | 'left-top' + | 'left-top-left-top' + | 'left-top-left-center' + | 'left-top-left-bottom' + | 'left-top-center-top' + | 'left-top-center-center' + | 'left-top-center-bottom' + | 'left-top-right-top' + | 'left-top-right-center' + | 'left-top-right-bottom' | 'right-top' + | 'right-top-left-top' + | 'right-top-left-center' + | 'right-top-left-bottom' + | 'right-top-center-top' + | 'right-top-center-center' + | 'right-top-center-bottom' + | 'right-top-right-top' + | 'right-top-right-center' + | 'right-top-right-bottom' | 'left-bottom' + | 'left-bottom-left-top' + | 'left-bottom-left-center' + | 'left-bottom-left-bottom' + | 'left-bottom-center-top' + | 'left-bottom-center-center' + | 'left-bottom-center-bottom' + | 'left-bottom-right-top' + | 'left-bottom-right-center' + | 'left-bottom-right-bottom' | 'right-bottom' + | 'right-bottom-left-top' + | 'right-bottom-left-center' + | 'right-bottom-left-bottom' + | 'right-bottom-center-top' + | 'right-bottom-center-center' + | 'right-bottom-center-bottom' + | 'right-bottom-right-top' + | 'right-bottom-right-center' + | 'right-bottom-right-bottom' | 'fixed-center' | 'fixed-left-top' | 'fixed-right-top' @@ -90,9 +126,11 @@ export interface PopOverState { isOpened: boolean; } -export const HocPopOver = (config: Partial = {}) => ( - Component: React.ComponentType -): any => { +export const HocPopOver = ( + config: { + targetOutter?: boolean; // 定位目标为整个外层 + } = {} +) => (Component: React.ComponentType): any => { let lastOpenedInstance: PopOverComponent | null = null; class PopOverComponent extends React.Component { target: HTMLElement; @@ -304,7 +342,7 @@ export const HocPopOver = (config: Partial = {}) => ( className={cx(`Field--popOverAble`, className, { in: this.state.isOpened })} - ref={this.targetRef} + ref={config.targetOutter ? this.targetRef : undefined} > {(popOver as SchemaPopOverObject)?.showIcon !== false ? ( <> @@ -313,6 +351,7 @@ export const HocPopOver = (config: Partial = {}) => ( key="popover-btn" className={cx('Field-popOverBtn')} {...triggerProps} + ref={config.targetOutter ? undefined : this.targetRef} > @@ -320,13 +359,12 @@ export const HocPopOver = (config: Partial = {}) => ( ) : ( <> -
- +
+
{this.state.isOpened ? this.renderPopOver() : null} diff --git a/src/renderers/Table/TableCell.tsx b/src/renderers/Table/TableCell.tsx index 94a3faf2f..306c324eb 100644 --- a/src/renderers/Table/TableCell.tsx +++ b/src/renderers/Table/TableCell.tsx @@ -112,7 +112,9 @@ export class TableCell extends React.Component { name: 'table-cell' }) @QuickEdit() -@PopOverable() +@PopOverable({ + targetOutter: true +}) @Copyable() @observer export class TableCellRenderer extends TableCell {