fix: fixed most of the issue was not closed

- close #658
- close #664
- close #665
- close #668
- close #680
- close #681

packages/react-vant/src/components/area/Area.tsx

@@ -84,6 +84,12 @@ const Area = forwardRef<AreaInstance, AreaProps<AreaColumnOption>>((p, ref) => {
   const props = mergeProps(p, {
     areaList: {},
     columnsNum: 3,
+    itemHeight: 44,
+    visibleItemCount: 5,
+    swipeDuration: 300,
+    showToolbar: true,
+    placeholder: true,
+    toolbarPosition: 'top',
   })
   const columns = useMemo(
     () => props.columns ?? parseVanAreaList(props.areaList, +props.columnsNum),

packages/react-vant/src/components/dialog/demo/base.tsx

@@ -11,13 +11,9 @@ export default () => {
           Dialog.confirm({
             title: '标题',
             message: '代码是写出来给人看的，附带能在机器上运行',
+            onCancel: () => console.log('cancel'),
+            onConfirm: () => console.log('confirm'),
           })
-            .then(() => {
-              console.log('confirm')
-            })
-            .catch(() => {
-              console.log('catch')
-            })
         }
       />
       <Cell

packages/react-vant/src/components/dropdown-menu/DropdownMenu.tsx

@@ -37,6 +37,7 @@ const DropdownMenu = forwardRef<DropdownMenuInstance, DropdownMenuProps>(
       closeOnClickOverlay: true,
       direction: 'down' as const,
       defaultValue: {},
+      teleport: () => document.body,
     })
     const [innerValue = {}, setInnerValue] = useMergedState({
       value: props.value,

packages/react-vant/src/components/dropdown-menu/DropdownMenuItem.tsx

@@ -141,7 +141,6 @@ const DropdownMenuItem = forwardRef<
       >
         <Popup
           {...attrs}
-          teleport={null}
           visible={props.showPopup}
           className={clsx(bem('content'))}
           position={direction === 'down' ? 'top' : 'bottom'}

packages/react-vant/src/components/flex/Flex.tsx

@@ -20,7 +20,7 @@ const Flex: React.FC<FlexProps> = props => {
     ...rest
   } = props
   const getGutter: [number, number] = useMemo(
-    () => (Array.isArray(gutter) ? gutter : [gutter, 0]),
+    () => (Array.isArray(gutter) ? gutter : [gutter, gutter]),
     [gutter]
   )
 
@@ -34,7 +34,7 @@ const Flex: React.FC<FlexProps> = props => {
     ...(getGutter[1]! > 0
       ? {
           marginTop: getGutter[1]! / -2,
-          marginBottom: getGutter[1]! / 2,
+          marginBottom: getGutter[1]! / -2,
         }
       : {}),
     ...style,

packages/react-vant/src/components/flex/demo/gutter.tsx

@@ -5,7 +5,10 @@ import './style.less'
 export default () => {
   return (
     <div className='demo-flex'>
-      <Flex gutter={16}>
+      <Flex gutter={16} wrap='wrap'>
+        <Flex.Item span={8}>span: 8</Flex.Item>
+        <Flex.Item span={8}>span: 8</Flex.Item>
+        <Flex.Item span={8}>span: 8</Flex.Item>
         <Flex.Item span={8}>span: 8</Flex.Item>
         <Flex.Item span={8}>span: 8</Flex.Item>
         <Flex.Item span={8}>span: 8</Flex.Item>

packages/react-vant/src/components/input/Input.tsx

@@ -73,7 +73,6 @@ const Input = forwardRef<InputInstance, InputProps>((p, ref) => {
       const trigger =
         props.clearTrigger === 'always' ||
         (props.clearTrigger === 'focus' && inputFocus)
-
       return hasValue && trigger
     }
     return false
@@ -186,10 +185,13 @@ const Input = forwardRef<InputInstance, InputProps>((p, ref) => {
       )}
       {renderInput()}
       {showClear &&
-        React.cloneElement(props.clearIcon as React.ReactElement, {
-          className: clsx(bem('clear')),
-          onTouchStart: handleClear,
-        })}
+        React.cloneElement(
+          (props.clearIcon || <Clear />) as React.ReactElement,
+          {
+            className: clsx(bem('clear')),
+            onTouchStart: handleClear,
+          }
+        )}
       {props.suffix && (
         <div className={clsx(bem('suffix'))}>{props.suffix}</div>
       )}

packages/react-vant/src/components/input/demo/base.tsx

@@ -16,6 +16,7 @@ export default () => {
           value={state.text}
           onChange={text => updateState({ text })}
           placeholder='请输入文本'
+          clearable
         />
       </Cell>
       <Cell>

packages/react-vant/src/components/search/README.md

@@ -25,7 +25,7 @@ import { Search } from 'react-vant';
 
 export default () => {
   const [value, setValue] = useState('');
-  return <Search value={value} onChange={setValue} placeholder="请输入搜索关键词" />;
+  return <Search value={value} onChange={setValue} clearable placeholder="请输入搜索关键词" />;
 };
 ```
 

packages/react-vant/src/components/search/Search.tsx

@@ -22,6 +22,7 @@ const [bem] = createNamespace('search')
 const Search = forwardRef<SearchInstance, SearchProps>((p, ref) => {
   const props = mergeProps(p, {
     shape: 'square',
+    clearTrigger: 'focus',
     leftIcon: <SearchIco />,
   })
   const { locale } = useContext(ConfigProviderContext)

packages/react-vant/src/components/share-sheet/ShareSheet.tsx

@@ -32,6 +32,7 @@ const ShareSheet: React.FC<ShareSheetProps> = p => {
     closeOnPopstate: true,
     safeAreaInsetBottom: true,
     closeOnClickOverlay: true,
+    duration: 300,
   })
   const { locale } = useContext(ConfigProviderContext)
 

packages/react-vant/src/components/space/Space.tsx

@@ -11,7 +11,7 @@ const [bem] = createNamespace('space')
 const Space: React.FC<SpaceProps> = props => {
   const { wrap, block, direction = 'horizontal', align, justify } = props
   const style = React.useMemo(() => {
-    if (props.gap) {
+    if (props.gap !== undefined && props.gap !== null) {
       if (Array.isArray(props.gap)) {
         const [gapV, gapH] = props.gap
         return {

packages/react-vant/src/components/tabs/Tabs.tsx

@@ -101,7 +101,7 @@ const Tabs = forwardRef<TabsInstance, TabsProps>((p, ref) => {
 
   const navStyle = useMemo(
     () => ({
-      borderColor: props.type === 'card' && color,
+      borderColor: props.type === 'card' ? color : undefined,
       background,
     }),
     [color, background]