refactor(text-input): 添加外层view以解决小程序BUG

[sylingd]

描述

经过确认，阿里小程序底层框架存在BUG。 当textarea同时设置了padding、box-sizing=border-box、width时，会导致文字溢出输入框。例如：

.test {
  width: 200px;
  height: 100px;
  padding-left: 30px;
  box-sizing: border-box;
  background: rgba(255, 0, 0, 0.2);
  font-size: 18px;
}

支付宝的同学已经确认相关问题，建议先在外层嵌套view，将相关样式设置到外层view来绕过这个问题。

更改

• 外层嵌套view，class命名为rax-textinput-container。
• 部分样式（如padding、背景色等）移动到外层的view上去。
• 作用于组件的className，现在会作用到外层嵌套的view上。

Break changes

这个修复会导致样式上的Break change，主要表现为：

• 单行输入时，默认的display会从inline-block变成flex。
• 如果业务有使用CSS覆盖样式，可能需要重新适配。原因：
  • 部分样式（如padding、背景色等）移动到了外层的view
  • className属性现在直接对应外层view

/* 举个🌰 */
/* 之前编写的 */
.my-textinput {
  width: 160px;
  font-size: 18px;
  background-color: #fff;
}

/* 需要更改为 */
.my-textinput {
  width: 160px;
  background-color: #fff;
}
.my-textinput .rax-textinput {
  font-size: 18px;
}