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.

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

Allow to add custom node before or after select items #10831

Closed
ybning opened this Issue Jun 7, 2018 · 18 comments

Comments

Projects
None yet
8 participants
@ybning

ybning commented Jun 7, 2018

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

有这样一个场景:单位Select,在选项下可以放组件,如:按钮——“新增”。
如图:
select

What does the proposed API look like?

Select,在选项下区域,可以允许自定义组件,有考虑支持这样吗?

@rainke

This comment has been minimized.

rainke commented Jun 7, 2018

让产品改需求吧,比如把新增按钮放下拉框后边

@ybning

This comment has been minimized.

ybning commented Jun 7, 2018

@rainke
”用户在Select下拉项中没有找到想要的项,直接在下拉项的视线内,点击新增,方便操作,保证了操作的连贯性。新增放到外面,跳出了下拉项的视线,在一定程度上,中断了操作,体验不好!“——援引自xx产品

@chenshuai2144

This comment has been minimized.

Contributor

chenshuai2144 commented Jun 8, 2018

你可以组合一个,我们 antd 是组件。这个已经是业务或者产品了

@afc163

This comment has been minimized.

Member

afc163 commented Jun 8, 2018

感觉可以提供类似 dropdownRender(menu) => ReactNode 的东西。

@chenshuai2144

This comment has been minimized.

Contributor

chenshuai2144 commented Jun 8, 2018

新增再谈一个表单? 我感觉这个我们做不合适

@afc163

This comment has been minimized.

Member

afc163 commented Jun 8, 2018

用户做什么不管,提供的是前后插入自定义 node 的能力。

@ybning

This comment has been minimized.

ybning commented Jun 8, 2018

用户做什么不管,提供的是前后插入自定义 node 的能力。

@afc163 good!

@ybning

This comment has been minimized.

ybning commented Jun 21, 2018

这是遇到的类似场景:
gif
@chenshuai2144 @afc163

@chenshuai2144

This comment has been minimized.

Contributor

chenshuai2144 commented Jun 21, 2018

这个是级联框吧

@ybning

This comment has been minimized.

ybning commented Jun 21, 2018

像类似这种Select衍生交互,还是希望Select有插入自定义node的能力。

@afc163 afc163 changed the title from 关于Select的一个优化 to Allow to add custom node before or after select items Jun 23, 2018

@chillyistkult

This comment has been minimized.

chillyistkult commented Aug 31, 2018

@afc163 Any decision on the topic as you closed both issues? I think it's very useful and commonly supported by many other select libraries.

https://react-select.com/creatable does it perfectly.

@afc163

This comment has been minimized.

Member

afc163 commented Aug 31, 2018

It is not closed.

I am indented to solution of #10831 (comment)

Welcome to help us and send us PR~

@m1n0s

This comment has been minimized.

m1n0s commented Sep 3, 2018

Hi @afc163!
Any chances it'll be available in closest week or two? I assume you haven't started developing this feature yet. So if I'll add PR for that what could be ETA of fix to be available for using?

Are there any possible workarounds to add button before options?

Sorry for messy questions but I need this feature ASAP.

Thank you!

@zombieJ

This comment has been minimized.

Member

zombieJ commented Sep 3, 2018

下拉新增感觉可以这么做? https://codesandbox.io/s/v87kr0mlyy

@zombieJ

This comment has been minimized.

Member

zombieJ commented Sep 3, 2018

@m1n0s , I guess you can combine cascader with the sample above to do as the workaround

@m1n0s

This comment has been minimized.

m1n0s commented Sep 3, 2018

@zombieJ thank you and I can even add custom styling because Option propagates className to li element. But the problem that Select decorated with getFieldDecorator which has own onChange and I don't know the way how to catch it earlier or stop propagation to decorated onChange unfortunately.

@m1n0s

This comment has been minimized.

m1n0s commented Sep 4, 2018

@zombieJ eventually your sandbox example helps me made the magic. Thank you!
image

Code example to all who reach this issue:

<Select
  mode="multiple"
  dropdownClassName="select-with-button"
  value={value}
  onDeselect={this.handleDeselect}
  onSelect={this.handleSelect}
>
  <Option key={ADD_NEW_ITEM} className="custom-class-for-option">
    <Button type="primary" icon="plus">
      add new item
    </Button>
  </Option>
  {
	options.map((id) => <Option key={id}>{name}</Option>)
  }
</Select>

and within handleSelect method all magic done with if (key === ADD_NEW_ITEM) {.

zombieJ added a commit to react-component/select that referenced this issue Nov 26, 2018

zombieJ added a commit that referenced this issue Nov 26, 2018

zy410419243 added a commit to zy410419243/ant-design that referenced this issue Nov 26, 2018

afc163 added a commit that referenced this issue Nov 27, 2018

@afc163

This comment has been minimized.

Member

afc163 commented Nov 27, 2018

@afc163 afc163 closed this Nov 27, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment