mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-28 20:25:29 +08:00
6da0509316
* feat: optimize fonts rendering on windows (#385) * feat(styles): set Inter to highest font * docs(fonts): add guide for fonts rendering on windows * test: udpate snapshots * chore: release v2.1.0-canary.0 * feat(table): add update row action to Table (#378) * feat: add update to Table's actions. add test and doc fix(table): fix comments * feat(table): improve type for table actions chore: update docs chore: remove unused types chore(table): improve docs Co-authored-by: William Castandet <williamcastandet@williams-air.home> Co-authored-by: unix <unix.bio@gmail.com> * refactor(use-theme): move use-theme to the top directory (#397) * refactor(use-theme): move use-theme to the top directory * chore(jest): ignore use-theme of forwarding * chore: release v2.1.0-canary.1 * feat(select): add clearable option to select multiple with test and english doc (#396) * docs: add clearable option to select multiple with test and english doc * fix: fix types for onClear * fix: fix import path for use-theme add more test for coverage * docs(select): add chinese document Co-authored-by: unix <unix.bio@gmail.com> * chore: release v2.1.0-canary.2 * fix(tabs): scrollable (#404) docs(tabs): scroll behavior * feat(textarea): resize prop (#416) * feat: add resize prop to textarea * docs: add resize prop for textarea * docs(textarea): improve docs and attributes for cn * test(textarea): update snapshots Co-authored-by: unix <unix.bio@gmail.com> * fix(types): replace path aliases in type files (#432) * fix(types): replace path aliases in type files * chore(lint): upgrade eslint and optimize code style * chore: fix type error for context handler * test: update snapshots * fix: use ttsc to identify aliases in type paths * feat(hooks): add a tool hooks for react context (#439) * feat(hooks): add a tool hooks for react context * chore: move use-context-state to internal tools style: fix lint warning * chore: simplify the structure of the catalog * refactor(themes): refactor theme module to keep multiple themes (#440) * refactor(themes): refactor theme module to keep multiple themes * chore: migrate APIs to be compatible with new theme system * test: update snapshots * chore: migrate the path of the theme module * feat(themes): append static methods of themes * chore: hide custom theme when no custom content in the context * chore: manually add flush to preload styles in html * docs(themes): update to fit the new theme system * chore: release v2.1.0-canary.3 (#450) * docs: add link to GH discussions * chore: upgrade deps * chore: update code style for prettier * chore: release v2.1.0-canary.3 * chore(deps): upgrade babel * chore: replace enzyme adapter with community repo to fit react.17 * test: updatee snapshots for auto typesetting * test(config): ignore unexported parts of the tools Co-authored-by: William <wcastand@gmail.com> Co-authored-by: William Castandet <williamcastandet@williams-air.home> Co-authored-by: Vaibhav Acharya <vaibhavacharya111@gmail.com> Co-authored-by: Paul van Dyk <39598117+PaulPCIO@users.noreply.github.com>
55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import React, { useMemo } from 'react'
|
|
import useTheme from '../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 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" 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: calc(0.86 * var(--checkbox-size));
|
|
height: calc(0.86 * var(--checkbox-size));
|
|
user-select: none;
|
|
opacity: ${disabled ? 0.4 : 1};
|
|
cursor: ${disabled ? 'not-allowed' : 'pointer'};
|
|
}
|
|
`}</style>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const MemoCheckboxIcon = React.memo(CheckboxIcon)
|
|
|
|
export default MemoCheckboxIcon
|