Merge pull request #305 from unix/auto-complete

fix(auto-complete): fix the height of custom options

components/auto-complete/auto-complete-item.tsx

@@ -7,6 +7,7 @@ import Ellipsis from '../shared/ellipsis'
 
 interface Props {
   value: string
+  isLabelOnly?: boolean
 }
 
 const defaultProps = {}
@@ -26,6 +27,7 @@ const getSizes = (size: NormalSizes) => {
 const AutoCompleteItem: React.FC<React.PropsWithChildren<AutoCompleteItemProps>> = ({
   value: identValue,
   children,
+  isLabelOnly,
 }) => {
   const theme = useTheme()
   const { value, updateValue, size, updateVisible } = useAutoCompleteContext()
@@ -37,9 +39,20 @@ const AutoCompleteItem: React.FC<React.PropsWithChildren<AutoCompleteItemProps>>
   const isActive = useMemo(() => value === identValue, [identValue, value])
   const fontSize = useMemo(() => getSizes(size), [size])
 
+  // The 'isLabelOnly' is only used inside the component,
+  // Automatically adjust width when only label children is included.
+  const itemHeight = useMemo(() => {
+    if (isLabelOnly) return `calc(1.688 * ${theme.layout.gap})`
+    return 'auto'
+  }, [isLabelOnly, theme.layout.gap])
+
   return (
     <div className={`item ${isActive ? 'active' : ''}`} onClick={selectHandler}>
-      <Ellipsis height={`calc(1.688 * ${theme.layout.gap})`}>{children}</Ellipsis>
+      {isLabelOnly ? (
+        <Ellipsis height={`calc(1.688 * ${theme.layout.gap})`}>{children}</Ellipsis>
+      ) : (
+        children
+      )}
       <style jsx>{`
         .item {
           display: flex;
@@ -49,7 +62,7 @@ const AutoCompleteItem: React.FC<React.PropsWithChildren<AutoCompleteItemProps>>
           white-space: pre;
           font-size: ${fontSize};
           padding: 0 ${theme.layout.gapHalf};
-          height: calc(1.688 * ${theme.layout.gap});
+          height: ${itemHeight};
           background-color: ${theme.palette.background};
           color: ${theme.palette.foreground};
           user-select: none;

components/auto-complete/auto-complete.tsx

@@ -56,7 +56,7 @@ const childrenToOptionsNode = (options: Array<AutoCompleteOption>) =>
     if (React.isValidElement(item)) return React.cloneElement(item, { key })
     const validItem = item as AutoCompleteOption
     return (
-      <AutoCompleteItem key={key} value={validItem.value}>
+      <AutoCompleteItem key={key} value={validItem.value} isLabelOnly>
         {validItem.label}
       </AutoCompleteItem>
     )

pages/en-us/components/auto-complete.mdx

@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { AutoComplete, Spacer, Badge, Row } from 'components'
+import { AutoComplete, Spacer, Badge, Grid, Text } from 'components'
 import { useState, useRef, useEffect } from 'react'
 
 export const meta = {
@@ -155,19 +155,18 @@ AutoComplete control of input field.
 <Playground
   title="custom option"
   desc="You can rewrite each item of the `AutoComplete` to express more."
-  scope={{ AutoComplete, useState, Spacer, Badge, Row }}
+  scope={{ AutoComplete, useState, Text, Badge, Grid }}
   code={`
 () => {
   const makeOption = (label, value) => (
     <AutoComplete.Option value={value}>
-      <div style={{ width: '100%' }}>
-        <div style={{ display: 'flex-inline', width: '100%', alignItems: 'space-between' }}>
-          <h4>Recent search results </h4>
-          <Badge type="success" style={{ float: 'right' }}>Recommended</Badge>
-        </div>
-        <Spacer y={.5} />
-        <span>{label}</span>
-      </div>
+      <Grid.Container style={{ padding: '10pt 0' }}>
+        <Grid xs={24}><Text span b size="1.2rem">Recent search results </Text></Grid>
+        <Grid.Container xs={24}>
+          <Grid xs><Text span>{label}</Text></Grid>
+          <Grid xs={4}><Badge type="success">Recommended</Badge></Grid>
+        </Grid.Container>
+      </Grid.Container>
     </AutoComplete.Option>
   )
   const allOptions = [

pages/zh-cn/components/auto-complete.mdx

@@ -1,5 +1,5 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { AutoComplete, Spacer, Badge, Row } from 'components'
+import { AutoComplete, Spacer, Badge, Text, Grid } from 'components'
 import { useState, useRef, useEffect } from 'react'
 
 export const meta = {
@@ -156,19 +156,18 @@ export const meta = {
 <Playground
   title="定制选项"
   desc="你可以详细定制每一个备选项，让 `自动完成` 组件表达更多的信息。"
-  scope={{ AutoComplete, useState, Spacer, Badge, Row }}
+  scope={{ AutoComplete, useState, Text, Badge, Grid }}
   code={`
 () => {
   const makeOption = (label, value) => (
     <AutoComplete.Option value={value}>
-      <div style={{ width: '100%' }}>
-        <div style={{ display: 'flex-inline', width: '100%', alignItems: 'space-between' }}>
-          <h4>最近的搜索结果</h4>
-          <Badge type="success" style={{ float: 'right' }}>推荐的</Badge>
-        </div>
-        <Spacer y={.5} />
-        <span>{label}</span>
-      </div>
+      <Grid.Container style={{ padding: '10pt 0' }}>
+        <Grid xs={24}><Text span b size="1.2rem">最近的搜索结果</Text></Grid>
+        <Grid.Container xs={24}>
+          <Grid xs><Text span>{label}</Text></Grid>
+          <Grid xs={4}><Badge type="success">推荐的</Badge></Grid>
+        </Grid.Container>
+      </Grid.Container>
     </AutoComplete.Option>
   )
   const allOptions = [