mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-07 09:09:30 +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.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import React from 'react'
|
|
import useTheme from '../use-theme'
|
|
|
|
export interface InputLabel {
|
|
isRight?: boolean
|
|
fontSize: string
|
|
}
|
|
|
|
const InputLabel: React.FC<React.PropsWithChildren<InputLabel>> = ({
|
|
children,
|
|
isRight,
|
|
fontSize,
|
|
}) => {
|
|
const theme = useTheme()
|
|
|
|
return (
|
|
<span className={isRight ? 'right' : ''}>
|
|
{children}
|
|
<style jsx>{`
|
|
span {
|
|
display: inline-flex;
|
|
width: initial;
|
|
height: 100%;
|
|
align-items: center;
|
|
pointer-events: none;
|
|
margin: 0;
|
|
padding: 0 ${theme.layout.gapHalf};
|
|
color: ${theme.palette.accents_4};
|
|
background-color: ${theme.palette.accents_1};
|
|
border-top-left-radius: ${theme.layout.radius};
|
|
border-bottom-left-radius: ${theme.layout.radius};
|
|
border-top: 1px solid ${theme.palette.border};
|
|
border-left: 1px solid ${theme.palette.border};
|
|
border-bottom: 1px solid ${theme.palette.border};
|
|
font-size: ${fontSize};
|
|
line-height: 1;
|
|
}
|
|
|
|
span.right {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-top-right-radius: ${theme.layout.radius};
|
|
border-bottom-right-radius: ${theme.layout.radius};
|
|
border-left: 0;
|
|
border-right: 1px solid ${theme.palette.border};
|
|
}
|
|
`}</style>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
const MemoInputLabel = React.memo(InputLabel)
|
|
|
|
export default MemoInputLabel
|