feat: 组件折叠面板collapse #2926

hy993658052 · 2021-11-11T12:21:57Z

这个变动的性质是？

需求背景和解决方案

设计文档：http://wiki.baidu.com/pages/viewpage.action?pageId=1693671823

更新日志

语言	更新描述
英文	A new Collapse component is added, and the function and style are improved and optimized on the basis of the original Collapse component
中文	增加新折叠面板组件，在原折叠面板组件的基础上对功能和样式进行了改进和优化

请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

[✓] 文档已补充或无须补充
[✓] 代码演示已提供或无须提供
[✓] TypeScript 定义已补充或无须补充
[✓] Changelog 已提供或无须提供

nwind · 2021-11-12T05:39:15Z

src/renderers/Collapse2.tsx

+  /**
+   * 内容区域
+   */
+  body?: Array<Schema>;


换成 SchemaCollection

yangwei9012 · 2021-11-12T10:14:47Z

src/renderers/Collapse2.tsx

@@ -0,0 +1,171 @@
+import React from 'react';
+import {Renderer, RendererProps} from '../factory';


把组件的部分抽象到component中，render只保留schema定义与映射相关

yangwei9012 · 2021-11-12T10:32:42Z

scss/components/_collapse-panel.scss

+
+  &-content-box {
+    padding: px2rem(16px) px2rem(16px);
+  }


颜色等信息，在主题中兼容吧

2betop · 2021-11-15T13:49:21Z

examples/components/Components.tsx

        label: 'Collapse 折叠器',
        path: '/zh-CN/components/collapse',
        getComponent: () =>
-          import('../../docs/zh-CN/components/collapse.md').then(


之前原来的文档上改？为何要加个新文档？

ts-ingore 已经不需要了，可以去掉

2betop · 2021-11-15T13:53:15Z

src/components/CollapsePanel.tsx

+} from '../Schema';
+import {SchemaNode} from '../types';
+
+export interface CollapsePanelProps extends RendererProps {


component 不应该 extends RendererProps

2betop · 2021-11-15T13:53:44Z

src/components/Collapse2.tsx

+import {SchemaNode} from '../types';
+import remove from 'lodash/remove';
+
+export interface Collapse2Props extends RendererProps {


既然是 component，就不应该 extends RendererProps

2betop · 2021-11-16T01:58:59Z

src/components/Collapse2.tsx

+  constructor(props: Collapse2Props) {
+    super(props);
+
+    let activeKey = props.$schema.defaultActiveKey || props.$schema.activeKey;


组件层应该不关注 $schema 这个属性。另外如果外部控制 activeKey，目前看来是不同步的，因为没看到 didUpdate props 同步 state 的逻辑。

2betop · 2021-11-16T02:01:50Z

src/components/Collapse2.tsx

+        onChange: (item: CollapsePanelProps, collapsed: boolean) => this.collapseChange(item, collapsed)
+      });
+
+      return this.props.render('panel-' + id, child, {


不要调用 props.render ，组件层不应该使用这个方法。如果要做到内容动态化，是由渲染器那层去控制的。这里你定义类型为 JSX.element 或者 () => JSX.element 即可。

yangwei9012 · 2021-11-18T08:24:18Z

src/components/CollapseGroup.tsx

+  CollapseGroupState
+> {
+  static propsList: Array<string> = [
+    'wrapperComponent',


先不要了

yangwei9012 · 2021-11-18T08:42:13Z

src/renderers/Collapse.tsx

+    * 自定义切换图标
+    */
+  expandIcon?: SchemaCollection;
+


SchemaObject

yangwei9012 · 2021-11-18T09:07:22Z

src/renderers/Collapse.tsx

+  /**
+   * 标题
+   */
+  header?: string | SchemaCollection;


整个组件还是需要从renderer中拆出去成为一个component，要不还是没法儿直接通过component的方式用了，拆过去的部分只用header即可，renderer部分留两个，给做title个兼容

yangwei9012 · 2021-11-19T13:50:16Z

src/components/Collapse.tsx

+  showArrow?: boolean;
+  expandIcon?: React.ReactElement | null;
+  headingClassName?: string;
+  collapseTitle?: React.ReactElement | null;


和header不是很呼应

yangwei9012 · 2021-11-19T13:50:38Z

src/components/Collapse.tsx

  className?: string;
  classPrefix: string;
  classnames: ClassNamesFn;
+  titlePosition?: 'top' | 'bottom';


title还是header？

2betop · 2021-11-22T04:13:44Z

src/components/Collapse.tsx

+  headerPosition?: 'top' | 'bottom';
+  header?: React.ReactElement;
+  body: any;
+  bodyClassName?: SchemaClassName;


应该是 string

2betop · 2021-11-22T04:16:00Z

src/components/Collapse.tsx

+
+export class Collapse extends React.Component<CollapseProps, CollapseState> {
+
+  static propsList: Array<string> = [


这东西是渲染器里面，配置下发属性黑名单的，在 component 里面没有意义

2betop · 2021-11-22T04:30:03Z

src/components/CollapseGroup.tsx

+  accordion?: boolean;
+  expandIcon?: SchemaNode;
+  expandIconPosition?: 'left' | 'right';
+  body?: SchemaCollection;


Body 应该是 Array<React.ReactElement> ?

2betop · 2021-11-22T04:30:29Z

src/components/CollapseGroup.tsx

+  CollapseGroupProps,
+  CollapseGroupState
+> {
+  static propsList: Array<string> = [


+1, 这个在 component 里面是无效的

2betop · 2021-11-22T04:32:35Z

src/components/CollapseGroup.tsx

+import cx from 'classnames';
+
+export interface CollapseGroupProps {
+  activeKey?: Array<string | number | never> | string | number;


这个属性好像没有用上？

2betop · 2021-11-22T04:35:52Z

src/renderers/Collapse.tsx

+          : body
+          ? render('body', body)
+          : null}
+        onChange={onChange}


这个 onChange 出去有点危险，这个不是表单项，上层接收到 onChange 后不知道该如何处理。建议去掉，不要触发。

* feat: 组件折叠面板collapse * feat: 组件折叠面板collapse * fix: collapse组件部分抽象到component * feat:增加collapse-group组件 * fix: 修复collapse样式 * feat: collapse组件扩充 * fix: 使用header兼容title * fix: collapse参数调整 * fix: 修改collapse的参数 * fix: collapse参数修改 * fix: update tests * fix: schema中去掉function Co-authored-by: hongyang03 <[email protected]>

feat: 组件折叠面板collapse

4a83d25

nwind reviewed Nov 12, 2021

View reviewed changes

hongyang03 added 2 commits November 12, 2021 14:38

feat: 组件折叠面板collapse

ec3d6f2

fix: 修改折叠面板types

b23f463

yangwei9012 reviewed Nov 12, 2021

View reviewed changes

fix: collapse组件部分抽象到component

a63cd7d

2betop reviewed Nov 15, 2021

View reviewed changes

2betop reviewed Nov 16, 2021

View reviewed changes

hongyang03 added 2 commits November 18, 2021 14:35

feat:增加collapse-group组件

7924357

fix: 修复collapse样式

bc14146

yangwei9012 reviewed Nov 18, 2021

View reviewed changes

feat: collapse组件扩充

33da615

yangwei9012 reviewed Nov 22, 2021

View reviewed changes

hongyang03 added 2 commits November 22, 2021 11:15

fix: 使用header兼容title

667aefb

fix: collapse参数调整

366f364

2betop reviewed Nov 22, 2021

View reviewed changes

hongyang03 added 5 commits November 22, 2021 15:02

fix: 修改collapse的参数

a695b15

feat: 合并master分支

1f6c736

fix: collapse参数修改

21f388a

fix: update tests

b09b9e4

fix: schema中去掉function

40f4205

2betop merged commit 4dfb286 into baidu:master Nov 23, 2021

wx123321 mentioned this pull request Nov 24, 2021

组件Collapse中的body不能使用数组了 #3048

Closed

		@@ -0,0 +1,171 @@
		import React from 'react';
		import {Renderer, RendererProps} from '../factory';


		export class Collapse extends React.Component<CollapseProps, CollapseState> {

		static propsList: Array<string> = [

feat: 组件折叠面板collapse #2926

feat: 组件折叠面板collapse #2926

Uh oh!

Conversation

hy993658052 commented Nov 11, 2021

这个变动的性质是？

需求背景和解决方案

更新日志

请求合并前的自查清单

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

yangwei9012 Nov 18, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

yangwei9012 Nov 18, 2021 •

edited

Loading