mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-28 20:25:29 +08:00
d4a1e02430
* feat(scaleable): add scaleable props to each component * chore(scaleable): update the exported type * feat: apply scaleable to components chore: remove with-default test: improve testcase for scaleable chore: resolve test warning ci: upgrade nodejs to latest lts docs: fix type error in document site * docs: update documents to be compatible with scaleable chore: fix build errors * chore: remove all size-related attributes docs: improve guide document * docs: add scaleable documentation test: update snapshots chore: remove unused * feat: add scaleable to grid components * docs: improve docs * test: update snapshots * fix(grid): fix basic component props
84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import React, { useMemo } from 'react'
|
|
import useTheme from '../use-theme'
|
|
import { useAutoCompleteContext } from './auto-complete-context'
|
|
import Ellipsis from '../shared/ellipsis'
|
|
import useScaleable, { withScaleable } from '../use-scaleable'
|
|
|
|
interface Props {
|
|
value: string
|
|
// The 'isLabelOnly' is only used inside the component,
|
|
// Automatically adjust width when only label children is included.
|
|
isLabelOnly?: boolean
|
|
}
|
|
|
|
const defaultProps = {}
|
|
|
|
export type AutoCompleteItemProps = Props & React.HTMLAttributes<any>
|
|
|
|
const AutoCompleteItemComponent: React.FC<
|
|
React.PropsWithChildren<AutoCompleteItemProps>
|
|
> = ({
|
|
value: identValue,
|
|
children,
|
|
isLabelOnly,
|
|
}: React.PropsWithChildren<AutoCompleteItemProps> & typeof defaultProps) => {
|
|
const theme = useTheme()
|
|
const { SCALES } = useScaleable()
|
|
const { value, updateValue, updateVisible } = useAutoCompleteContext()
|
|
const selectHandler = () => {
|
|
updateValue && updateValue(identValue)
|
|
updateVisible && updateVisible(false)
|
|
}
|
|
const isActive = useMemo(() => value === identValue, [identValue, value])
|
|
|
|
return (
|
|
<div className={`item ${isActive ? 'active' : ''}`} onClick={selectHandler}>
|
|
{isLabelOnly ? <Ellipsis height={SCALES.height(2)}>{children}</Ellipsis> : children}
|
|
<style jsx>{`
|
|
.item {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
font-weight: normal;
|
|
white-space: pre;
|
|
background-color: ${theme.palette.background};
|
|
color: ${theme.palette.foreground};
|
|
user-select: none;
|
|
border: 0;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
|
|
font-size: ${SCALES.font(0.875)};
|
|
width: ${SCALES.width(1, 'auto')};
|
|
height: ${isLabelOnly ? SCALES.height(2.5) : SCALES.height(1, 'auto')};
|
|
padding: ${SCALES.pt(0)} ${SCALES.pr(0.75)} ${SCALES.pb(0)} ${SCALES.pl(0.75)};
|
|
margin: ${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)};
|
|
}
|
|
|
|
.item:first-of-type {
|
|
border-top-left-radius: ${theme.layout.radius};
|
|
border-top-right-radius: ${theme.layout.radius};
|
|
}
|
|
|
|
.item:last-of-type {
|
|
border-bottom-left-radius: ${theme.layout.radius};
|
|
border-bottom-right-radius: ${theme.layout.radius};
|
|
}
|
|
|
|
.item:hover {
|
|
background-color: ${theme.palette.accents_1};
|
|
}
|
|
|
|
.item.active {
|
|
background-color: ${theme.palette.accents_1};
|
|
color: ${theme.palette.success};
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
AutoCompleteItemComponent.defaultProps = defaultProps
|
|
AutoCompleteItemComponent.displayName = 'GeistAutoCompleteItem'
|
|
const AutoCompleteItem = withScaleable(AutoCompleteItemComponent)
|
|
export default AutoCompleteItem
|