mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-03 22:43:21 +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
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
|
|
export interface InputIconProps {
|
|
icon: React.ReactNode
|
|
clickable: boolean
|
|
onClick: (e: React.MouseEvent<HTMLDivElement>) => void
|
|
}
|
|
|
|
const InputIconComponent: React.FC<InputIconProps> = ({ icon, clickable, onClick }) => {
|
|
return (
|
|
<span className="input-icon" onClick={onClick}>
|
|
{icon}
|
|
<style jsx>{`
|
|
.input-icon {
|
|
box-sizing: border-box;
|
|
display: inline-flex;
|
|
width: calc(var(--input-height) - 2px);
|
|
flex-shrink: 0;
|
|
height: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 1;
|
|
position: relative;
|
|
cursor: ${clickable ? 'pointer' : 'default'};
|
|
pointer-events: ${clickable ? 'auto' : 'none'};
|
|
}
|
|
.input-icon :global(svg) {
|
|
width: calc(var(--input-height) - 2px);
|
|
height: calc(var(--input-height) - 2px);
|
|
transform: scale(0.44);
|
|
}
|
|
`}</style>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
InputIconComponent.displayName = 'GeistInputIcon'
|
|
const InputIcon = React.memo(InputIconComponent)
|
|
export default InputIcon
|