mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-25 04:45:42 +08:00
55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import React, { useMemo } from 'react'
|
|
import useTheme from '../styles/use-theme'
|
|
|
|
interface Props {
|
|
disabled?: boolean
|
|
checked?: boolean
|
|
}
|
|
|
|
const CheckboxIcon: React.FC<Props> = ({
|
|
disabled, checked,
|
|
}) => {
|
|
const theme = useTheme()
|
|
|
|
const { fill, bg, stroke } = useMemo(() => {
|
|
return {
|
|
fill: theme.palette.foreground,
|
|
bg: theme.palette.background,
|
|
stroke: theme.palette.accents_5
|
|
}
|
|
}, [theme.palette])
|
|
|
|
return (
|
|
<>
|
|
{checked
|
|
? (<svg width="12px" height="12px" viewBox="0 0 17 16" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M12.1429 0H3.85714C1.7269 0 0 1.79086 0 4V12C0 14.2091 1.7269 16 3.85714 16H12.1429C14.2731 16 16 14.2091 16 12V4C16 1.79086 14.2731 0 12.1429 0Z"
|
|
fill={fill} />
|
|
<path d="M16 3L7.72491 11L5 8" stroke={bg} strokeWidth="1.5" />
|
|
</svg>)
|
|
: (<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" viewBox="0 0 12 12" fill="none">
|
|
<path
|
|
d="M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z"
|
|
stroke={stroke} />
|
|
</svg>)
|
|
}
|
|
<style jsx>{`
|
|
svg {
|
|
display: inline-flex;
|
|
width: 12px;
|
|
height: 12px;
|
|
user-select: none;
|
|
opacity: ${disabled ? 0.4 : 1};
|
|
cursor: ${disabled ? 'not-allowed' : 'pointer'};
|
|
}
|
|
`}</style>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const MemoCheckboxIcon = React.memo(CheckboxIcon)
|
|
|
|
export default MemoCheckboxIcon
|