chore: optional chaining (#8283)

src/address-edit/index.tsx

@@ -145,10 +145,9 @@ export default createComponent({
     });
 
     // hide bottom field when use search && detail get focused
-    const hideBottomFields = computed(() => {
-      const { searchResult } = props;
-      return searchResult && searchResult.length && state.detailFocused;
-    });
+    const hideBottomFields = computed(
+      () => props.searchResult?.length && state.detailFocused
+    );
 
     const assignAreaValues = () => {
       if (areaRef.value) {

src/collapse-item/index.tsx

@@ -39,8 +39,8 @@ export default createComponent({
       return;
     }
 
-    const currentName = computed(() => props.name ?? index.value);
-    const expanded = computed(() => parent.isExpanded(currentName.value));
+    const name = computed(() => props.name ?? index.value);
+    const expanded = computed(() => parent.isExpanded(name.value));
 
     const show = ref(expanded.value);
     const lazyRender = useLazyRender(show);
@@ -86,8 +86,8 @@ export default createComponent({
       });
     });
 
-    const toggle = (value = !expanded.value) => {
-      parent.toggle(currentName.value, value);
+    const toggle = (newValue = !expanded.value) => {
+      parent.toggle(name.value, newValue);
     };
 
     const onClickTitle = () => {

src/field/index.tsx

@@ -283,7 +283,7 @@ export default createComponent({
         value = props.formatter(value);
       }
 
-      if (inputRef.value && value !== inputRef.value.value) {
+      if (inputRef.value && inputRef.value.value !== value) {
         inputRef.value.value = value;
       }
 
@@ -299,17 +299,8 @@ export default createComponent({
       }
     };
 
-    const focus = () => {
-      if (inputRef.value) {
-        inputRef.value.focus();
-      }
-    };
-
-    const blur = () => {
-      if (inputRef.value) {
-        inputRef.value.blur();
-      }
-    };
+    const blur = () => inputRef.value?.blur();
+    const focus = () => inputRef.value?.focus();
 
     const onFocus = (event: Event) => {
       state.focused = true;

src/image-preview/ImagePreview.tsx

@@ -29,7 +29,7 @@ import ImagePreviewItem from './ImagePreviewItem';
 
 const [createComponent, bem] = createNamespace('image-preview');
 
-export type ImagePreviewScaleEventParams = {
+export type ScaleEventParams = {
   scale: number;
   index: number;
 };
@@ -110,8 +110,7 @@ export default createComponent({
       }
     };
 
-    const emitScale = (args: ImagePreviewScaleEventParams) =>
-      emit('scale', args);
+    const emitScale = (args: ScaleEventParams) => emit('scale', args);
 
     const updateShow = (show: boolean) => emit('update:show', show);
 
@@ -191,11 +190,8 @@ export default createComponent({
 
     const onClosed = () => emit('closed');
 
-    const swipeTo = (index: number, options?: SwipeToOptions) => {
-      if (swipeRef.value) {
-        swipeRef.value.swipeTo(index, options);
-      }
-    };
+    const swipeTo = (index: number, options?: SwipeToOptions) =>
+      swipeRef.value?.swipeTo(index, options);
 
     useExpose({ swipeTo });
 
@@ -205,9 +201,7 @@ export default createComponent({
 
     watch(
       () => props.startPosition,
-      (value) => {
-        setActive(+value);
-      }
+      (value) => setActive(+value)
     );
 
     watch(

src/search/index.tsx

@@ -92,17 +92,8 @@ export default createComponent({
       }
     };
 
-    const focus = () => {
-      if (filedRef.value) {
-        filedRef.value.focus();
-      }
-    };
-
-    const blur = () => {
-      if (filedRef.value) {
-        filedRef.value.blur();
-      }
-    };
+    const blur = () => filedRef.value?.blur();
+    const focus = () => filedRef.value?.focus();
 
     const fieldPropNames = [
       'leftIcon',

src/stepper/index.tsx

@@ -208,8 +208,8 @@ export default createComponent({
 
     const onFocus = (event: Event) => {
       // readonly not work in lagacy mobile safari
-      if (props.disableInput && inputRef.value) {
-        inputRef.value.blur();
+      if (props.disableInput) {
+        inputRef.value?.blur();
       } else {
         emit('focus', event);
       }

src/swipe/index.tsx

@@ -388,9 +388,11 @@ export default createComponent({
 
     const renderDot = (_: number, index: number) => {
       const active = index === activeIndicator.value;
-      const style: CSSProperties = {
-        backgroundColor: active ? props.indicatorColor : undefined,
-      };
+      const style = active
+        ? {
+            backgroundColor: props.indicatorColor,
+          }
+        : undefined;
 
       return <i style={style} class={bem('indicator', { active })} />;
     };