Picker组件增强的一些想法，便于columns数据是异步获取的场景

[damonyoungcc]

现在的问题：

源于这个issue: [Picker]组件增加loading属性，目前大部分用户异步获取columns数据的时机应该是两个：

1. 在页面挂载时就发起异步请求然后更新state，点击按钮展示Picker，传入columns
2. 点击按钮时，触发异步请求，成功后展示Picker

我想用户想要loading属性，大致是想在点击按钮后触发接口请求，而不是在一开始页面mount时就加载过多数据。

解决方案讨论

之前对于antd 的Select做过一些二次封装，利用了Select组件的两个API: notFoundContent 和 onDropdownVisibleChange，效果点这里
思路就是：

1. 用户在点击Select，先展示下拉框
2. onDropdownVisibleChange监听到open为true时发起异步请求，此时loading状态置为为true
3. 然后给notFoundContent传一个加载中的样式占位，等异步请求结束，则展示正常的内容。

综上，是否可以给Picker组件增加notFoundContent 和 onPopupVisibleChange属性，这样用户在点击Picker后，可以正常弹出Picker，异步数据请求成功前，展示columns的地方可以展示用户传入的骨架屏或loading组件，这样体验可能会更好。

[awmleer]

onPopupVisibleChange 感觉可以换成 onOpen，对应着已有的 onClose

notFoundContent 可以叫 placeholder，显示的时机是如果 columns 为 [] 空数组？

[xiaoyao96]

notFoundContent 可以叫 placeholder，显示的时机是如果 columns 为 [] 空数组？

如果接口返回的结果也是空数组，就会一直展示 placeholder ，这个似乎不太适用于用来传 loading 效果。

placeholder 语义应该更偏向于，当picker未选择任何值时，提示用户请选择。

所以总结下来两个问题：
1、placeholder 命名问题
2、如何解决接口返回也是空数组的问题

可以详细讨论下...

[awmleer]

有一种边界情况需要考虑，如果用户初次点开 Picker，此时 columns 为 []，显示 placeholder 占位提示，这时用户立刻点击确定按钮，要触发 onChange 吗？如果触发的话，onChange 里的值应该是多少？

[xiaohuoni]

默认值？

[awmleer]

或者也可以在加载过程中禁用掉确定按钮，避免用户点击

[damonyoungcc]

notFoundContent相当于就是空数组的一个占位，就像现在点开Picker是一个空数组时不展示空白，展示一个没有数据的占位

加载过程中禁用掉确定按钮，避免用户点击

我以上说的这些都是像Select一样只提供给用户可二次封装的可能性，具体这种异步逻辑Select是不提供的，Picker我觉得可以参考一下，这个禁用掉确定按钮可以只提供功能，具体控制交给用户，或者官网提供一个例子。

[damonyoungcc]

基于上面我写了一点用法的伪代码

function BasicDemo() {
  const [ visible, setVisible ] = useState(false);
  const [ loading, setLoading ] = useState(false);
  const [columns, setColumns] = useState([]);

  const onOpen = async () => {
    // 1、开启，2、columns长度为0，3、loading为false时请求
    if(!columns.length && !loading) {
      setLoading(true)
      const data = await mockdata();
      setColumns(data)
      setLoading(false)
    }
  }

  return (
    <>
      <Button
        onClick={() => {
          setVisible(true)
        }}
      >
        选择
      </Button>
      <Picker
        confirmDisabled={!loading}
        placeholder={<div>loading...</div>} // 只有在传的情况下展示，不传保持原先样式不变
        onOpen={onOpen}
        columns={columns}
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
      />
    </>
  )
}

[awmleer]

loading为true时也不应该发起请求，避免用户点击后loading时间长，直接关闭掉Picker，下次再点开就会重复请求。

这可以用 ahooks 的 useLockFn 来解决，就很简单了，都不需要再额外维护一个 loading 状态：

function BasicDemo() {
  const [ visible, setVisible ] = useState(false);
  const [columns, setColumns] = useState([]);

  const lazyLoadColumns = useLockFn(async () => {
    if(!columns.length) {
      setColumns(await mockdata())
    }
  })

  return (
    <>
      <Button
        onClick={() => {
          setVisible(true)
        }}
      >
        选择
      </Button>
      <Picker
        placeholder={<div>loading...</div>} // 只有在传的情况下展示，不传保持原先样式不变
        onOpen={lazyLoadColumns}
        columns={columns}
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
      />
    </>
  )
}

[damonyoungcc]

嗯嗯，我试着改一下，这个pr我来试试吧

[damonyoungcc]

confirmDisabled这个我觉得也不用提供，原因有两点：

1. 源码中，confirmText是由a标签包裹，上面加disabled属性TS会报错，更改标签会造成breakchange，万一用户魔改了这个a标签的样式
2. 当前的Picker其实已经存在这样的场景： 用户在页面挂载时发起异步请求，请求时间很长，这时候用户点开了Picker直接点确定。所以这个我感觉不提供也行。

[damonyoungcc]

onOpen也不需要，因为Popup已经有了afterShow😄

[awmleer]

afterShow 触发的时机会晚一些（动画完全结束之后），还是得需要onShow 或者 onOpen 的（如果考虑到和已有的 afterShow 命名一致，那叫 onShow 比较合适一些了）