mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-11 17:21:06 +08:00
7facec3849
* 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
53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import React from 'react'
|
|
import useTheme from '../use-theme'
|
|
import Grid from '../grid'
|
|
import SelectClearIcon from './select-icon-clear'
|
|
|
|
interface Props {
|
|
disabled: boolean
|
|
onClear: (() => void) | null
|
|
}
|
|
|
|
const SelectMultipleValue: React.FC<React.PropsWithChildren<Props>> = ({
|
|
disabled,
|
|
onClear,
|
|
children,
|
|
}) => {
|
|
const theme = useTheme()
|
|
|
|
return (
|
|
<Grid>
|
|
<div className="item">
|
|
{children}
|
|
{!!onClear && <SelectClearIcon onClick={onClear} />}
|
|
</div>
|
|
<style jsx>{`
|
|
.item {
|
|
display: inline-flex;
|
|
justify-items: center;
|
|
align-items: center;
|
|
line-height: 1;
|
|
padding: 0 0.5em;
|
|
font-size: var(--select-font-size);
|
|
height: calc(var(--select-font-size) * 2);
|
|
border-radius: ${theme.layout.radius};
|
|
background-color: ${theme.palette.accents_2};
|
|
color: ${disabled ? theme.palette.accents_4 : theme.palette.accents_6};
|
|
}
|
|
|
|
.item > :global(div:not(.clear-icon)),
|
|
.item > :global(div:not(.clear-icon):hover) {
|
|
border-radius: 0;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
margin: 0;
|
|
color: inherit;
|
|
}
|
|
`}</style>
|
|
</Grid>
|
|
)
|
|
}
|
|
|
|
SelectMultipleValue.displayName = 'GeistSelectMultipleValue'
|
|
export default SelectMultipleValue
|