From b8ce30035a195e743747e0e0862d3bc44794c379 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Tue, 2 Jul 2024 01:19:31 +0800 Subject: [PATCH 01/14] feat(collapse): add transition for collapse --- src/collapse/collapse-animation.ts | 52 +++++++++++++++++++++++++++ src/collapse/collapse-panel.tsx | 58 +++++++++++++++++++++++++----- src/collapse/index.ts | 2 +- src/style/index.js | 14 ++++++-- 4 files changed, 115 insertions(+), 11 deletions(-) create mode 100644 src/collapse/collapse-animation.ts diff --git a/src/collapse/collapse-animation.ts b/src/collapse/collapse-animation.ts new file mode 100644 index 0000000..14bbe8c --- /dev/null +++ b/src/collapse/collapse-animation.ts @@ -0,0 +1,52 @@ +/* eslint-disable no-param-reassign */ +export function getCollapseAnimation() { + const beforeEnter = (el: HTMLElement) => { + el.dataset.oldPaddingTop = el.style.paddingTop; + el.dataset.oldPaddingBottom = el.style.paddingBottom; + + el.style.height = '0'; + el.style.paddingTop = '0'; + el.style.paddingBottom = '0'; + }; + const enter = (el: HTMLElement) => { + el.dataset.oldOverflow = el.style.overflow; + el.style.height = `${el.scrollHeight}px`; + el.style.paddingTop = el.dataset.oldPaddingTop; + el.style.paddingBottom = el.dataset.oldPaddingBottom; + el.style.overflow = 'hidden'; + }; + const afterEnter = (el: HTMLElement) => { + el.style.height = ''; + el.style.overflow = el.dataset.oldOverflow; + }; + const beforeLeave = (el: HTMLElement) => { + el.dataset.oldPaddingTop = el.style.paddingTop; + el.dataset.oldPaddingBottom = el.style.paddingBottom; + el.dataset.oldOverflow = el.style.overflow; + + el.style.height = `${el.scrollHeight}px`; + el.style.overflow = 'hidden'; + }; + const leave = (el: HTMLElement) => { + if (el.scrollHeight !== 0) { + el.style.height = '0'; + el.style.paddingTop = '0'; + el.style.paddingBottom = '0'; + } + }; + const afterLeave = (el: HTMLElement) => { + el.style.height = ''; + el.style.overflow = el.dataset.oldOverflow; + el.style.paddingTop = el.dataset.oldPaddingTop; + el.style.paddingBottom = el.dataset.oldPaddingBottom; + }; + + return { + beforeEnter, + enter, + afterEnter, + beforeLeave, + leave, + afterLeave, + }; +} diff --git a/src/collapse/collapse-panel.tsx b/src/collapse/collapse-panel.tsx index 8654565..245a900 100644 --- a/src/collapse/collapse-panel.tsx +++ b/src/collapse/collapse-panel.tsx @@ -1,23 +1,45 @@ import '../common/fake-arrow'; +import 'omi-transition'; import { bind, Component, computed, signal, tag } from 'omi'; import classname, { classPrefix } from '../_util/classname'; import { StyledProps, TNode } from '../common'; +import { getCollapseAnimation } from './collapse-animation'; import type { TdCollapsePanelProps } from './type'; export interface CollapsePanelProps extends TdCollapsePanelProps, StyledProps {} +const { beforeEnter, enter, afterEnter, beforeLeave, leave, afterLeave } = getCollapseAnimation(); + @tag('t-collapse-panel') export default class CollapsePanel extends Component { static isLightDom = true; + // static css = ` + // .t-slide-down-leave-to, + // .t-slide-down-enter-from { + // height: 0; + // } + + // .t-slide-down-leave-from, + // .t-slide-down-enter-to { + // height: 100%; + // } + + // .t-slide-down-leave-active, + // .t-slide-down-enter-active { + // // transition: all 500ms ease-in; + // }` + innerValue = signal(0); className = `${classPrefix}-collapse-panel`; isDisabled = signal(false); + afterLeaved = signal(false); + install(): void { const { getUniqId, updateCollapseValue, defaultExpandAll } = this.injection; @@ -76,6 +98,18 @@ export default class CollapsePanel extends Component { event.stopPropagation(); } + @bind + afterLeave(dom) { + afterLeave(dom); + this.afterLeaved.value = true; + } + + @bind + beforeEnter(dom) { + beforeEnter(dom); + this.afterLeaved.value = false; + } + renderIcon() { const { expandIconPlacement, collapseValue } = this.injection; const isActive = collapseValue.value.includes(this.innerValue.value); @@ -120,15 +154,23 @@ export default class CollapsePanel extends Component { renderBody() { const isActive = this.injection.collapseValue.value.includes(this.innerValue.value); + const { destroyOnCollapse } = this.props; - const { destroyOnCollapse, children } = this.props; - - return destroyOnCollapse && !isActive ? null : ( -
-
- {this.getDefaultSlot()} - {children} -
+ return destroyOnCollapse && !isActive && this.afterLeaved.value ? null : ( +
+
{this.getDefaultSlot()}
); } diff --git a/src/collapse/index.ts b/src/collapse/index.ts index f78300b..8f7e988 100644 --- a/src/collapse/index.ts +++ b/src/collapse/index.ts @@ -4,7 +4,7 @@ import _Collapse from './collapse'; export * from './type'; export type { CollapseProps } from './collapse'; -export { default as CollapsePanel, CollapsePanelProps } from './collapse-panel'; +export { default as CollapsePanel, type CollapsePanelProps } from './collapse-panel'; export const Collapse = _Collapse; export default Collapse; diff --git a/src/style/index.js b/src/style/index.js index c37842b..bfec423 100644 --- a/src/style/index.js +++ b/src/style/index.js @@ -1,2 +1,12 @@ -import '../_common/style/web/_global.less'; -import '../_common/style/web/theme/_index.less'; +import { css, globalCSS } from 'omi'; + +import globalStye from '../_common/style/web/_global.less'; +import themeStyle from '../_common/style/web/theme/_index.less'; + + +export const styleSheet = css` + ${globalStye} + ${themeStyle} +`; + +globalCSS(styleSheet); From 75f2ed9901731312bdef68f208f808bb2cf1c9c3 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Tue, 2 Jul 2024 09:53:56 +0800 Subject: [PATCH 02/14] feat(collapse): update disabled status --- src/collapse/_example/icon.tsx | 30 ++++++++++++++++++++++++++++-- src/collapse/_example/mutex.tsx | 2 +- src/collapse/_example/other.tsx | 2 +- src/collapse/collapse-panel.tsx | 5 ++--- 4 files changed, 32 insertions(+), 7 deletions(-) diff --git a/src/collapse/_example/icon.tsx b/src/collapse/_example/icon.tsx index 7957928..8fc4fbb 100644 --- a/src/collapse/_example/icon.tsx +++ b/src/collapse/_example/icon.tsx @@ -7,6 +7,10 @@ import { bind, Component, signal } from 'omi'; export default class Demo extends Component { checked = signal(true); + isLeftIcon = signal(true); + + expandOnRowClick = signal(true); + @bind onChange(value) { console.log('onChange.value', value); @@ -14,8 +18,12 @@ export default class Demo extends Component { render() { return ( - - + +
这是一个折叠标题
这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 @@ -31,6 +39,24 @@ export default class Demo extends Component { 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 +
+
+ 图标是否在左侧 + (this.isLeftIcon.value = !this.isLeftIcon.value)} + /> +
+
+ 是否仅图标响应点击 + (this.expandOnRowClick.value = !this.expandOnRowClick.value)} + /> +
+
); } diff --git a/src/collapse/_example/mutex.tsx b/src/collapse/_example/mutex.tsx index dbb6aba..86deb39 100644 --- a/src/collapse/_example/mutex.tsx +++ b/src/collapse/_example/mutex.tsx @@ -14,7 +14,7 @@ export default class Demo extends Component { render() { return ( - +
这是一个折叠标题
diff --git a/src/collapse/_example/other.tsx b/src/collapse/_example/other.tsx index f384d38..d11e889 100644 --- a/src/collapse/_example/other.tsx +++ b/src/collapse/_example/other.tsx @@ -27,7 +27,7 @@ export default class Demo extends Component { render() { const { borderless, expandIcon, disabled } = this; return ( - +
这是一个折叠标题
diff --git a/src/collapse/collapse-panel.tsx b/src/collapse/collapse-panel.tsx index 245a900..d7fd149 100644 --- a/src/collapse/collapse-panel.tsx +++ b/src/collapse/collapse-panel.tsx @@ -119,10 +119,9 @@ export default class CollapsePanel extends Component { className={classname(`${this.className}__icon`, [`${this.className}__icon--${expandIconPlacement.value}`], { [`${this.className}__icon--active`]: isActive, })} + onClick={this.handleClick} > - {this.getChild('expandIcon') || ( - - )} + {this.getChild('expandIcon') || }
); } From d77605266bd292cdb6c9530bca45d9621c519927 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Tue, 2 Jul 2024 10:54:50 +0800 Subject: [PATCH 03/14] =?UTF-8?q?feat(collapse):=20=E5=8A=A8=E7=94=BB?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 14 +++++++------- package.json | 2 +- src/collapse/collapse-panel.tsx | 4 +++- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 270aac4..5425be6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "copy-to-clipboard": "^3.3.3", "lodash": "~4.17.15", "omi": "7.6.7", - "omi-transition": "^0.1.7", + "omi-transition": "^0.1.8", "tailwind-merge": "^2.2.1" }, "devDependencies": { @@ -9727,9 +9727,9 @@ } }, "node_modules/omi-transition": { - "version": "0.1.7", - "resolved": "https://mirrors.tencent.com/npm/omi-transition/-/omi-transition-0.1.7.tgz", - "integrity": "sha512-nbps2ChxyQ7qq5dFakxVFyWo9shORQmM6CAAvCLfnKb4a3wbkFihtlcO8F4AQss2Ofo38exkXqX2jVJzfddOyw==", + "version": "0.1.8", + "resolved": "https://mirrors.tencent.com/npm/omi-transition/-/omi-transition-0.1.8.tgz", + "integrity": "sha512-5OncdwZSDoczL6WtLxirl2L4BP3UPL6UvvtlTNHOGJZ4HmJ6MOMxvTCiafEzewVL0Yq1MGSBreLZwJRLG6JDJQ==", "dependencies": { "omi": "latest" } @@ -20983,9 +20983,9 @@ } }, "omi-transition": { - "version": "0.1.7", - "resolved": "https://mirrors.tencent.com/npm/omi-transition/-/omi-transition-0.1.7.tgz", - "integrity": "sha512-nbps2ChxyQ7qq5dFakxVFyWo9shORQmM6CAAvCLfnKb4a3wbkFihtlcO8F4AQss2Ofo38exkXqX2jVJzfddOyw==", + "version": "0.1.8", + "resolved": "https://mirrors.tencent.com/npm/omi-transition/-/omi-transition-0.1.8.tgz", + "integrity": "sha512-5OncdwZSDoczL6WtLxirl2L4BP3UPL6UvvtlTNHOGJZ4HmJ6MOMxvTCiafEzewVL0Yq1MGSBreLZwJRLG6JDJQ==", "requires": { "omi": "latest" } diff --git a/package.json b/package.json index 2596de2..7c16bc6 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "copy-to-clipboard": "^3.3.3", "lodash": "~4.17.15", "omi": "7.6.7", - "omi-transition": "^0.1.7", + "omi-transition": "^0.1.8", "tailwind-merge": "^2.2.1" }, "devDependencies": { diff --git a/src/collapse/collapse-panel.tsx b/src/collapse/collapse-panel.tsx index d7fd149..fd7480d 100644 --- a/src/collapse/collapse-panel.tsx +++ b/src/collapse/collapse-panel.tsx @@ -38,7 +38,7 @@ export default class CollapsePanel extends Component { isDisabled = signal(false); - afterLeaved = signal(false); + afterLeaved: Omi.SignalValue = signal(null); install(): void { const { getUniqId, updateCollapseValue, defaultExpandAll } = this.injection; @@ -100,12 +100,14 @@ export default class CollapsePanel extends Component { @bind afterLeave(dom) { + if (this.afterLeaved.value) return; afterLeave(dom); this.afterLeaved.value = true; } @bind beforeEnter(dom) { + if (this.afterLeaved.value === false) return; beforeEnter(dom); this.afterLeaved.value = false; } From 41b3e371e9af623b793028e94405ce56537c075b Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Tue, 2 Jul 2024 11:32:03 +0800 Subject: [PATCH 04/14] =?UTF-8?q?feat(collapse):=20=E4=BC=98=E5=8C=96slot?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/collapse/README.md | 14 +++++--- src/collapse/_example/base.tsx | 17 ++++----- src/collapse/_example/icon.tsx | 28 +++++++-------- src/collapse/_example/mutex.tsx | 32 ++++++++--------- src/collapse/_example/other.tsx | 28 ++++++++++----- src/collapse/_example/rightSlot.tsx | 28 ++++++++------- src/collapse/collapse-panel.tsx | 56 ++++++++--------------------- src/collapse/collapse.tsx | 12 +++---- src/collapse/type.ts | 16 +++++++-- 9 files changed, 115 insertions(+), 116 deletions(-) diff --git a/src/collapse/README.md b/src/collapse/README.md index 5150e5a..cbff341 100644 --- a/src/collapse/README.md +++ b/src/collapse/README.md @@ -53,8 +53,12 @@ spline: data ### CollapsePanel Props -| 名称 | 类型 | 默认值 | 说明 | 必传 | -| ----------------- | --------------- | --------- | ---------------------------------------------------------------- | ---- | -| destroyOnCollapse | Boolean | false | 当前面板处理折叠状态时，是否销毁面板内容 | N | -| disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N | -| value | String / Number | - | 必需。当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | Y | +| 名称 | 类型 | 默认值 | 说明 | 必传 | +| ------------------ | ------------------------- | --------- | -------------------------------------------------------------------- | ---- | +| destroyOnCollapse | Boolean | false | 当前面板处理折叠状态时，是否销毁面板内容 | N | +| disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N | +| value | String / Number | - | 必需。当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | Y | +| expandIcon | Boolean / Slot / Function | undefined | 当前折叠面板展开图标。TS 类型：`boolean \| TNode`。 | N | +| header | String / Slot / Function | - | 面板头内容。TS 类型：`string \| TNode`。 | N | +| headerRightContent | String / Slot / Function | - | 面板头的右侧区域，一般用于呈现面板操作。TS 类型：`string \| TNode`。 | N | +| content | String / Slot / Function | - | 折叠面板内容。TS 类型：`string \| TNode`。 | N | diff --git a/src/collapse/_example/base.tsx b/src/collapse/_example/base.tsx index 9d77317..961c4dd 100644 --- a/src/collapse/_example/base.tsx +++ b/src/collapse/_example/base.tsx @@ -13,14 +13,15 @@ export default class Demo extends Component { render() { return ( - -
这是一个折叠标题
- 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 - - -
这是一个折叠标题
- 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 - + + ); } diff --git a/src/collapse/_example/icon.tsx b/src/collapse/_example/icon.tsx index 8fc4fbb..1a8e491 100644 --- a/src/collapse/_example/icon.tsx +++ b/src/collapse/_example/icon.tsx @@ -24,20 +24,20 @@ export default class Demo extends Component { expandIconPlacement={this.isLeftIcon.value ? 'left' : 'right'} expandOnRowClick={this.expandOnRowClick.value} > - -
这是一个折叠标题
- 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 - - -
自定义图标
- - 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 - - -
自定义图标
- - 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 - + + } + content="这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。" + /> + } + content="这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。" + />
diff --git a/src/collapse/_example/mutex.tsx b/src/collapse/_example/mutex.tsx index 86deb39..649d720 100644 --- a/src/collapse/_example/mutex.tsx +++ b/src/collapse/_example/mutex.tsx @@ -16,22 +16,22 @@ export default class Demo extends Component { return ( - -
这是一个折叠标题
- 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 - - -
这是一个折叠标题
- 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 - - -
这是一个折叠标题
- 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 - - -
这是一个折叠标题
- 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 - + + + +
当前展开项：{this.currentItem.value}
 diff --git a/src/collapse/_example/other.tsx b/src/collapse/_example/other.tsx index d11e889..057578d 100644 --- a/src/collapse/_example/other.tsx +++ b/src/collapse/_example/other.tsx @@ -28,15 +28,17 @@ export default class Demo extends Component { const { borderless, expandIcon, disabled } = this; return ( - - -
这是一个折叠标题
- 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 - - -
这是一个折叠标题
- 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 - + + +
@@ -47,6 +49,14 @@ export default class Demo extends Component { 无边框 (this.borderless.value = !this.borderless.value)} />
+
+ 显示 Icon + (this.expandIcon.value = !this.expandIcon.value)} + /> +
); diff --git a/src/collapse/_example/rightSlot.tsx b/src/collapse/_example/rightSlot.tsx index c530ed7..b8431ad 100644 --- a/src/collapse/_example/rightSlot.tsx +++ b/src/collapse/_example/rightSlot.tsx @@ -13,25 +13,27 @@ export default class Demo extends Component { render() { return ( - - -
这是一个折叠标题
-
+ + 操作 -
- 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 - - -
禁用状态
-
+ } + /> + 操作 -
- 这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。 - + } + /> ); } diff --git a/src/collapse/collapse-panel.tsx b/src/collapse/collapse-panel.tsx index fd7480d..c3b5833 100644 --- a/src/collapse/collapse-panel.tsx +++ b/src/collapse/collapse-panel.tsx @@ -14,23 +14,11 @@ const { beforeEnter, enter, afterEnter, beforeLeave, leave, afterLeave } = getCo @tag('t-collapse-panel') export default class CollapsePanel extends Component { - static isLightDom = true; + static isLightDOM = true; - // static css = ` - // .t-slide-down-leave-to, - // .t-slide-down-enter-from { - // height: 0; - // } - - // .t-slide-down-leave-from, - // .t-slide-down-enter-to { - // height: 100%; - // } - - // .t-slide-down-leave-active, - // .t-slide-down-enter-active { - // // transition: all 500ms ease-in; - // }` + static defaultProps = { + expandIcon: true, + }; innerValue = signal(0); @@ -66,26 +54,6 @@ export default class CollapsePanel extends Component { 'expandOnRowClick', ]; - @bind - getChild(name) { - const children = this.props.children || []; - - if (!Array.isArray(children)) { - return; - } - const child = children.find((item) => item?.attributes?.slot === name); - return child; - } - - @bind - getDefaultSlot() { - const children = this.props.children || []; - if (!Array.isArray(children)) { - return children; - } - return children.find((item) => !item?.attributes?.slot); - } - @bind handleClick(event, fromHeader = false) { if (this.isDisabled.value) { @@ -115,7 +83,9 @@ export default class CollapsePanel extends Component { renderIcon() { const { expandIconPlacement, collapseValue } = this.injection; const isActive = collapseValue.value.includes(this.innerValue.value); - + if (this.props.expandIcon === false) { + return null; + } return (
{ })} onClick={this.handleClick} > - {this.getChild('expandIcon') || } + {typeof this.props.expandIcon !== 'boolean' ? ( + this.props.expandIcon + ) : ( + + )}
); } @@ -141,11 +115,11 @@ export default class CollapsePanel extends Component { {expandIconPlacement.value === 'left' && this.renderIcon()}
-
{this.getChild('header')}
+
{this.props.header}
e.stopPropagation()}> - {this.getChild('headerRightContent')} + {this.props.headerRightContent}
{expandIconPlacement.value === 'right' && this.renderIcon()}
@@ -171,7 +145,7 @@ export default class CollapsePanel extends Component { className={`${this.className}__body`} show={isActive} > -
{this.getDefaultSlot()}
+
{this.props.content}
); } diff --git a/src/collapse/collapse.tsx b/src/collapse/collapse.tsx index 8acfa01..b0114eb 100644 --- a/src/collapse/collapse.tsx +++ b/src/collapse/collapse.tsx @@ -1,4 +1,4 @@ -import { bind, Component, signal, tag } from 'omi'; +import { bind, Component, OmiProps, signal, tag } from 'omi'; import classname, { classPrefix } from '../_util/classname'; import { StyledProps, TNode } from '../common'; @@ -75,17 +75,13 @@ export default class Collapse extends Component { return true; } - render(props: TdCollapseProps): TNode { - const { className, borderless } = props; + render(props: OmiProps): TNode { + const { className, borderless, children } = props; const classes = classname(`${classPrefix}-collapse`, className, { [`${classPrefix}--border-less`]: !!borderless, }); - return ( -
- -
- ); + return
{children}
; } } diff --git a/src/collapse/type.ts b/src/collapse/type.ts index fbf9518..7efff11 100644 --- a/src/collapse/type.ts +++ b/src/collapse/type.ts @@ -73,9 +73,21 @@ export interface TdCollapsePanelProps { */ value?: string | number; /** - * 内容 + * 当前折叠面板展开图标 */ - children?: TNode; + expandIcon?: boolean | TNode; + /** + * 面板头内容 + */ + header?: string | TNode; + /** + * 折叠面板内容 + */ + content?: string | TNode; + /** + * 面板头的右侧区域，一般用于呈现面板操作 + */ + headerRightContent?: string | TNode; } export type CollapseValue = Array; From c8a5ff2a88a2c6ce0cf93d615e8d52fbd6985f70 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Tue, 2 Jul 2024 17:31:31 +0800 Subject: [PATCH 05/14] feat(collapse): expand icon --- src/collapse/_example/mutex.tsx | 1 - src/common/fake-arrow.tsx | 5 ++++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/collapse/_example/mutex.tsx b/src/collapse/_example/mutex.tsx index 649d720..755b86e 100644 --- a/src/collapse/_example/mutex.tsx +++ b/src/collapse/_example/mutex.tsx @@ -33,7 +33,6 @@ export default class Demo extends Component { content="这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。" /> -
当前展开项：{this.currentItem.value}
); } diff --git a/src/common/fake-arrow.tsx b/src/common/fake-arrow.tsx index 627e7fd..5ddf04b 100644 --- a/src/common/fake-arrow.tsx +++ b/src/common/fake-arrow.tsx @@ -39,7 +39,10 @@ export default class FakeArrow extends Component { viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" - style={props.isActive ? 'transform: rotate(0deg);' : 'transform: rotate(-90deg);'} + style={{ + transition: 'all 0.2s cubic-bezier(0.38, 0, 0.24, 1)', + transform: props.isActive ? 'rotate(-180deg)' : 'rotate(-90deg)', + }} > From b751eb49a273780059f679379d14fd6babe7e6b3 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Thu, 4 Jul 2024 12:21:32 +0800 Subject: [PATCH 06/14] =?UTF-8?q?refactor(collapse):=20=E4=BC=98=E5=8C=96c?= =?UTF-8?q?ollapse?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/collapse/_example/mutex.tsx | 1 + src/collapse/collapse-panel.tsx | 2 -- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/collapse/_example/mutex.tsx b/src/collapse/_example/mutex.tsx index 755b86e..649d720 100644 --- a/src/collapse/_example/mutex.tsx +++ b/src/collapse/_example/mutex.tsx @@ -33,6 +33,7 @@ export default class Demo extends Component { content="这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。" /> +
当前展开项：{this.currentItem.value}
); } diff --git a/src/collapse/collapse-panel.tsx b/src/collapse/collapse-panel.tsx index c3b5833..5edccf5 100644 --- a/src/collapse/collapse-panel.tsx +++ b/src/collapse/collapse-panel.tsx @@ -14,8 +14,6 @@ const { beforeEnter, enter, afterEnter, beforeLeave, leave, afterLeave } = getCo @tag('t-collapse-panel') export default class CollapsePanel extends Component { - static isLightDOM = true; - static defaultProps = { expandIcon: true, }; From 72bee41bf8477c4e939ff270ec1e152daa1ed941 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Thu, 4 Jul 2024 12:28:54 +0800 Subject: [PATCH 07/14] =?UTF-8?q?refactor(collapse):=20=E4=BC=98=E5=8C=96c?= =?UTF-8?q?ollapse?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/collapse/_example/base.tsx | 11 +++++++++++ src/collapse/collapse-panel.tsx | 10 ++++++++++ 2 files changed, 21 insertions(+) diff --git a/src/collapse/_example/base.tsx b/src/collapse/_example/base.tsx index 961c4dd..5342c07 100644 --- a/src/collapse/_example/base.tsx +++ b/src/collapse/_example/base.tsx @@ -22,6 +22,17 @@ export default class Demo extends Component { header="这是一个折叠标题" content="这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。" /> + + + + + + + } + /> ); } diff --git a/src/collapse/collapse-panel.tsx b/src/collapse/collapse-panel.tsx index 5edccf5..fd65577 100644 --- a/src/collapse/collapse-panel.tsx +++ b/src/collapse/collapse-panel.tsx @@ -14,6 +14,16 @@ const { beforeEnter, enter, afterEnter, beforeLeave, leave, afterLeave } = getCo @tag('t-collapse-panel') export default class CollapsePanel extends Component { + static css = [ + `.t-collapse-panel__wrapper--border-less .t-collapse-panel__header { + border-bottom: none; +} +.t-collapse-panel__wrapper--border-less .t-collapse-panel__body { + background: var(--td-bg-color-container); + border: none; +}`, + ]; + static defaultProps = { expandIcon: true, }; From 8fdfd6b8341460a87fd0611a195017660b9ab086 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Fri, 5 Jul 2024 20:45:01 +0800 Subject: [PATCH 08/14] refactor(collapse): update css --- src/_common | 2 +- src/collapse/collapse-panel.tsx | 12 +----------- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/src/_common b/src/_common index a3e26cf..26299fe 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit a3e26cf8ce5053ac790b6dcdaee7190cc39a4281 +Subproject commit 26299fef514131890f78fbb48b531fdafb66c5b8 diff --git a/src/collapse/collapse-panel.tsx b/src/collapse/collapse-panel.tsx index fd65577..59bb832 100644 --- a/src/collapse/collapse-panel.tsx +++ b/src/collapse/collapse-panel.tsx @@ -14,16 +14,6 @@ const { beforeEnter, enter, afterEnter, beforeLeave, leave, afterLeave } = getCo @tag('t-collapse-panel') export default class CollapsePanel extends Component { - static css = [ - `.t-collapse-panel__wrapper--border-less .t-collapse-panel__header { - border-bottom: none; -} -.t-collapse-panel__wrapper--border-less .t-collapse-panel__body { - background: var(--td-bg-color-container); - border: none; -}`, - ]; - static defaultProps = { expandIcon: true, }; @@ -169,7 +159,7 @@ export default class CollapsePanel extends Component { >
{this.renderHeader()} From 9b98b936a5d676b929903c9173cc718994cec271 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Mon, 8 Jul 2024 10:51:00 +0800 Subject: [PATCH 09/14] chore: remove theme --- src/style/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/style/index.js b/src/style/index.js index bfec423..5df2615 100644 --- a/src/style/index.js +++ b/src/style/index.js @@ -1,12 +1,10 @@ import { css, globalCSS } from 'omi'; import globalStye from '../_common/style/web/_global.less'; -import themeStyle from '../_common/style/web/theme/_index.less'; export const styleSheet = css` ${globalStye} - ${themeStyle} `; globalCSS(styleSheet); From 18e8f41203f586d8db58727e17c4880b48667641 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Mon, 8 Jul 2024 10:52:21 +0800 Subject: [PATCH 10/14] chore: remove theme --- src/style/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/style/index.js b/src/style/index.js index 5df2615..3ff82ad 100644 --- a/src/style/index.js +++ b/src/style/index.js @@ -1,5 +1,6 @@ import { css, globalCSS } from 'omi'; +import '../_common/style/web/theme/_index.less'; import globalStye from '../_common/style/web/_global.less'; From 239f3cf72a64038cf55d31744f2af663f4d23044 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Mon, 8 Jul 2024 10:54:56 +0800 Subject: [PATCH 11/14] chore: add proptype --- src/collapse/collapse.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/collapse/collapse.tsx b/src/collapse/collapse.tsx index b0114eb..82cf02f 100644 --- a/src/collapse/collapse.tsx +++ b/src/collapse/collapse.tsx @@ -8,6 +8,15 @@ export interface CollapseProps extends TdCollapseProps, StyledProps {} @tag('t-collapse') export default class Collapse extends Component { + static propsType = { + borderless: false, + defaultExpandAll: false, + disabled: false, + expandIconPlacement: 'left', + expandMutex: false, + expandOnRowClick: true, + }; + collapseValue = signal([]); innerBorderless = signal(false); From 118d54cc5112861bdeb2dba1d1681cd5fc730a25 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Mon, 8 Jul 2024 11:00:01 +0800 Subject: [PATCH 12/14] chore: add propsType --- src/collapse/collapse-panel.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/collapse/collapse-panel.tsx b/src/collapse/collapse-panel.tsx index 59bb832..a72dc0c 100644 --- a/src/collapse/collapse-panel.tsx +++ b/src/collapse/collapse-panel.tsx @@ -18,6 +18,11 @@ export default class CollapsePanel extends Component { expandIcon: true, }; + static propsType = { + destroyOnCollapse: false, + disabled: false, + }; + innerValue = signal(0); className = `${classPrefix}-collapse-panel`; From 7e12e85b07027ae7906f7a79ab3904457d6a2245 Mon Sep 17 00:00:00 2001 From: novlan1 <1576271227@qq.com> Date: Mon, 8 Jul 2024 11:24:23 +0800 Subject: [PATCH 13/14] fix(collapse): change event --- src/collapse/_example/base.tsx | 2 +- src/collapse/collapse-panel.tsx | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/collapse/_example/base.tsx b/src/collapse/_example/base.tsx index 5342c07..3cf9fc9 100644 --- a/src/collapse/_example/base.tsx +++ b/src/collapse/_example/base.tsx @@ -12,7 +12,7 @@ export default class Demo extends Component { render() { return ( - + { renderBody() { const isActive = this.injection.collapseValue.value.includes(this.innerValue.value); const { destroyOnCollapse } = this.props; + if (this.afterLeaved.value === null && !isActive) { + return null; + } return destroyOnCollapse && !isActive && this.afterLeaved.value ? null : (
Date: Mon, 8 Jul 2024 12:30:19 +0800 Subject: [PATCH 14/14] fix(collapse): update icon rotate --- src/common/fake-arrow.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/common/fake-arrow.tsx b/src/common/fake-arrow.tsx index 5ddf04b..c986717 100644 --- a/src/common/fake-arrow.tsx +++ b/src/common/fake-arrow.tsx @@ -27,7 +27,6 @@ export default class FakeArrow extends Component { render(props) { const classes = classname(this.componentName, { - [`${this.componentName}--active`]: props.isActive, [`${classPrefix}-is-disabled`]: props.disabled, }); @@ -41,7 +40,7 @@ export default class FakeArrow extends Component { xmlns="http://www.w3.org/2000/svg" style={{ transition: 'all 0.2s cubic-bezier(0.38, 0, 0.24, 1)', - transform: props.isActive ? 'rotate(-180deg)' : 'rotate(-90deg)', + transform: props.isActive ? 'rotate(0deg)' : 'rotate(-90deg)', }} >