单行 <Input /> 是否可以增加带有图标、清空、loading 等功能

[ystarlongzi]

如题：

1. 如果具有图标功能，实现这样的搜索框就很简单了，目前官方也已经给出了实现
   

2. 如果具有清空功能，可以快速清空文本框内容
   

3. 如果具有 loading 提示，就可以表示当前正在搜索、加载....

[afc163]

<Input suffix={<Icon type="search" />} />

I like it.

[ystarlongzi]

期待

[afc163]

别期待，来帮我们做这个特性如何？

[ystarlongzi]

好，今晚我读下代码，理下思路，随时和你保持联系

[ystarlongzi]

@afc163

1. 是否有必要在组件内部封装 search、allowClear、loading 接口？如下：

<Input
  search
  loading
  allowClear
  suffix={<Icon />}
/>

其中

1. 当 search 为真时，是否有必要暴露 onSearch 接口？
2. 当 search 为真、且 suffix 有传入值时，展示 suffix 状态
3. 当文本框无值、或文本框不是 hover、focus 时，展示 search 或 suffix 状态
4. 当 allowClear 为真、且文本框有值、且文本框 hover、focus 时，展示 allowClear 状态
5. 当 loading 为真，展示 loading 状态，忽略其它状态

2. 如果编译后的 html 结构、class 命名如下，是否合理？

<span class="ant-input-wrapper ant-input-suffix">
  <input type="text" class="ant-input" />
  <span class="ant-input-suffix-anticon">
    <i class="anticon"></i>
  </span>
</span>

3. 另外在/components/input/style/mixin.less#L87-L101有看到 .input-with-icon 命名，但是全局搜索后，发现并没有在其它地方有用到。

[afc163]

1. search loading allowClear 这几个功能就不做了，需求和引入的 API 略多，感觉做也做不完。不如只用 suffix 简单展现 UI，由开发者自行绑定具体事件和二次封装。

2. 至于 html 结构，不如这样就行。ant-input-suffix-anticon 不是很合适，因为 suffix 不只是图标，可以传任何节点。

   <span class="ant-input-wrapper">
     <input type="text" class="ant-input" />
     <span class="ant-input-suffix">
       <i class="anticon"></i>
     </span>
   </span>

3. .input-with-icon 应该是一个历史遗留，之前都没用到，你可以使用或参考其实现。

[ystarlongzi]

好的，谢谢！那我今天开始做。

[jokemmy]

@ystarlongzi

不止是后面，前面也可以加，类似登录框

[ystarlongzi]

@afc163 刚才提交了一个 pr，我感觉可能和你的思路有偏差，麻烦你看下。

1. 最开始我的需求点是希望输入框可以拥有图标，然后这个图标会覆盖在输入框上，它和addons区别的一个点是，它不会占据输入框所在的空间。然后，我最后又仔细看你的留言，你希望suffix不仅仅是个图标，可以是任何一个节点，然后这里应该有偏差

2. 还有 html 结构，在开发中发现要考虑在addons场景下也可以使用suffix时，还是需要嵌套一层，这样可以更方便控制suffix图标的位置，然后我把结构改成了如下：

<span class="ant-input-suffix-wrapper">
  <input type="text" class="ant-input" />
  <span class="ant-input-suffix">
    <i class="anticon"></i>
  </span>
</span>

3. 还有 @xutou12 的需求点，是否也需要考虑。我们在应用中也有碰到过这样的需求，如下图，是我们在封装表格组件过滤功能时有用到。

[benjycui]

@ystarlongzi

Input[suffix] 和 Input[prefix] 都可以支持，但是我觉得内嵌元素暂时可以只考虑 文本 和 Icon。

主要是这两种情况比较常见，也比较好处理。

其他变式碰到再讨论吧。

[ystarlongzi]

嗯，好的。我在修改下

[afc163]

感谢 @ystarlongzi 非常给力的贡献，邮件给我地址，我给你发个纪念品吧。

[ystarlongzi]

@afc163
地址发你邮箱了，还有礼品拿，太开心啦啦啦 😄

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.