24jieqi / react-native-xiaoshu

🌈 React Native UI library
https://24jieqi.github.io/react-native-xiaoshu/
Apache License 2.0
235 stars 23 forks source link

Selector 可以设置多选数量上限么 #74

Open YuGer26 opened 3 weeks ago

YuGer26 commented 3 weeks ago

看了文档没找到相应设置字段,多选的时候最好可以有个字段可以设置选择数量上限,未设置就不设限

onlyling commented 3 weeks ago

暂时没有支持这个功能,这个需求有点偏向业务或者不通用。

YuGer26 commented 3 weeks ago

我觉得可以增加一个是否支持全选,这个功能是为了满足选项少时方便一键多选;再加个设置最小最大选择数量,这功能是为了和selector的搜索功能共同使用;最后我觉得可以根据value,每次打开selector时把已选择的排最上面,这样方便用户取消选择,否则一旦选项多几十上百的话很难选

YuGer26 commented 3 weeks ago

最后一点,先自己实现了,贴下代码 `const hobbyList = [ { label: "篮球", value: 0, disabled: true }, { label: "足球", value: 1 }, { label: "羽毛球", value: 2 }, { label: "乒乓球", value: 3 }, { label: "网球", value: 4 }, { label: "橄榄球", value: 5 }, { label: "排球", value: 6 }, { label: "棒球", value: 7 }, { label: "高尔夫", value: 8 }, { label: "游泳", value: 9 }, { label: "跑步", value: 10 }, { label: "健身", value: 11 }, { label: "瑜伽", value: 12 }, { label: "舞蹈", value: 13 }, { label: "音乐", value: 14 }, { label: "电影", value: 15 }, { label: "旅游", value: 16 }, { label: "摄影", value: 17 }, { label: "美食", value: 18 }, { label: "阅读", value: 19 }, { label: "游戏", value: 20 }, { label: "编程", value: 21 }, { label: "桌游", value: 22 }, { label: "狼人杀", value: 23 }, { label: "剧本杀", value: 24 }, ]; // 将hobbyList转换为Map,方便后续查找 const hobbyMap = new Map( hobbyList.map((item) => [item.label, item.value]) ); // 将userInfo.hobby转换为数组 const selectedHobbies = userInfo.hobby.split("、"); // 将selectedHobbies转换为数组 const selectedValues = selectedHobbies .map((hobby) => hobbyMap.get(hobby)) .filter(Boolean); // 对hobbyList进行排序,将已选择的排在前面 const sortedHobbyList = [ ...hobbyList.filter((item) => selectedValues.includes(item.value) ), ...hobbyList.filter( (item) => !selectedValues.includes(item.value) ), ]; // 弹出选择框 Selector({ multiple: true, title: "选择爱好", options: sortedHobbyList, value: selectedValues, search: true, }) .then((newSelectedValues) => { const newSelectedHobbies = hobbyList .filter((item) => newSelectedValues.includes(item.value)) .map((item) => item.label) .join("、");

                setUserInfo((prevInfo) => ({
                  ...prevInfo,
                  hobby: newSelectedHobbies,
                }));
              })
              .catch(() => {});`