chore: improve filter (#8262)

src/address-edit/index.tsx

@@ -139,7 +139,7 @@ export default createComponent({
         if (province && province === city) {
           arr.splice(1, 1);
         }
-        return arr.filter((text) => text).join('/');
+        return arr.filter(Boolean).join('/');
       }
       return '';
     });
@@ -223,7 +223,7 @@ export default createComponent({
     };
 
     const onAreaConfirm = (values: AreaColumnOption[]) => {
-      values = values.filter((value) => !!value);
+      values = values.filter(Boolean);
 
       if (values.some((value) => !value.code)) {
         Toast(t('areaEmpty'));

src/area/index.tsx

@@ -221,9 +221,7 @@ export default createComponent({
 
     const getValues = () => {
       if (pickerRef.value) {
-        const values = pickerRef.value
+        const values = pickerRef.value.getValues().filter(Boolean);
-          .getValues()
-          .filter((value: AreaColumnOption) => !!value);
         return parseValues(values);
       }
       return [];
@@ -244,7 +242,7 @@ export default createComponent({
       }
 
       const names = values.map((item) => item.name);
-      const validValues = values.filter((value) => !!value.code);
+      const validValues = values.filter((value) => value.code);
 
       area.code = validValues.length
         ? validValues[validValues.length - 1].code

src/cascader/index.tsx

@@ -98,11 +98,11 @@ export default createComponent({
               selectedOption: option,
             };
 
-            const next = optionsCursor.filter(
+            const next = optionsCursor.find(
               (item) => item[valueKey] === option[valueKey]
             );
-            if (next.length) {
+            if (next) {
-              optionsCursor = next[0][childrenKey];
+              optionsCursor = next[childrenKey];
             }
 
             return tab;
@@ -157,7 +157,7 @@ export default createComponent({
 
       const selectedOptions = state.tabs
         .map((tab) => tab.selectedOption)
-        .filter((item) => !!item);
+        .filter(Boolean);
 
       const eventParams = {
         value: option[valueKey],

src/datetime-picker/DatePicker.tsx

@@ -167,10 +167,9 @@ export default createComponent({
 
     const originColumns = computed(() =>
       ranges.value.map(({ type, range: rangeArr }) => {
-        let values = times(rangeArr[1] - rangeArr[0] + 1, (index) => {
+        let values = times(rangeArr[1] - rangeArr[0] + 1, (index) =>
-          const value = padZero(rangeArr[0] + index);
+          padZero(rangeArr[0] + index)
-          return value;
+        );
-        });
 
         if (props.filter) {
           values = props.filter(type, values);
@@ -290,10 +289,7 @@ export default createComponent({
       emit('update:modelValue', oldValue ? value : null)
     );
 
-    watch(
+    watch(() => [props.filter, props.minDate, props.maxDate], updateInnerValue);
-      [() => props.filter, () => props.minDate, () => props.maxDate],
-      updateInnerValue
-    );
 
     watch(
       () => props.modelValue,

src/datetime-picker/TimePicker.tsx

@@ -137,12 +137,12 @@ export default createComponent({
     watch(columns, updateColumnValue);
 
     watch(
-      [
+      () => [
-        () => props.filter,
+        props.filter,
-        () => props.minHour,
+        props.minHour,
-        () => props.maxHour,
+        props.maxHour,
-        () => props.minMinute,
+        props.minMinute,
-        () => props.maxMinute,
+        props.maxMinute,
       ],
       updateInnerValue
     );

src/dropdown-item/index.tsx

@@ -106,11 +106,11 @@ export default createComponent({
         return props.title;
       }
 
-      const match = props.options.filter(
+      const match = props.options.find(
         (option) => option.value === props.modelValue
       );
 
-      return match.length ? match[0].text : '';
+      return match ? match.text : '';
     };
 
     const renderOption = (option: DropdownItemOption) => {

src/form/index.tsx

@@ -87,7 +87,7 @@ export default createComponent({
       new Promise<void>((resolve, reject) => {
         const fields = getFieldsByNames(names);
         Promise.all(fields.map((item) => item.validate())).then((errors) => {
-          errors = errors.filter((item) => item);
+          errors = errors.filter(Boolean);
 
           if (errors.length) {
             reject(errors);
@@ -98,11 +98,11 @@ export default createComponent({
       });
 
     const validateField = (name: string) => {
-      const matched = children.filter((item) => item.name === name);
+      const matched = children.find((item) => item.name === name);
 
-      if (matched.length) {
+      if (matched) {
         return new Promise<void>((resolve, reject) => {
-          matched[0].validate().then((error?: FieldValidateError) => {
+          matched.validate().then((error?: FieldValidateError) => {
             if (error) {
               reject(error);
             } else {

src/index-bar/index.tsx

@@ -206,16 +206,16 @@ export default createComponent({
         return;
       }
 
-      const match = children.filter((item) => String(item.index) === index);
+      const match = children.find((item) => String(item.index) === index);
 
-      if (match[0]) {
+      if (match) {
-        match[0].$el.scrollIntoView();
+        match.$el.scrollIntoView();
 
         if (props.sticky && props.stickyOffsetTop) {
           setRootScrollTop(getRootScrollTop() - props.stickyOffsetTop);
         }
 
-        emit('select', match[0].index);
+        emit('select', match.index);
       }
     };
 

src/tabs/index.tsx

@@ -256,11 +256,11 @@ export default createComponent({
 
     // correct the index of active tab
     const setCurrentIndexByName = (name: number | string) => {
-      const matched = children.filter(
+      const matched = children.find(
         (tab, index) => getTabName(tab, index) === name
       );
 
-      const index = matched[0] ? children.indexOf(matched[0]) : 0;
+      const index = matched ? children.indexOf(matched) : 0;
       setCurrentIndex(index);
     };
 

src/uploader/index.tsx

@@ -240,7 +240,7 @@ export default createComponent({
         const imageFiles = props.modelValue.filter(isImageFile);
         const images = imageFiles
           .map((item) => item.content || item.url)
-          .filter((item) => !!item) as string[];
+          .filter(Boolean) as string[];
 
         imagePreview = ImagePreview({
           images,