mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-02 09:08:52 +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
68 lines
1.5 KiB
TypeScript
68 lines
1.5 KiB
TypeScript
import React from 'react'
|
|
|
|
interface Props {
|
|
isRight?: boolean
|
|
isSingle?: boolean
|
|
className?: string
|
|
}
|
|
|
|
const defaultProps = {
|
|
isRight: false,
|
|
className: '',
|
|
}
|
|
|
|
type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
|
|
export type ButtonIconProps = Props & NativeAttrs
|
|
|
|
const ButtonIcon: React.FC<React.PropsWithChildren<ButtonIconProps>> = ({
|
|
isRight,
|
|
isSingle,
|
|
children,
|
|
className,
|
|
...props
|
|
}: ButtonIconProps & typeof defaultProps) => {
|
|
return (
|
|
<span
|
|
className={`icon ${isRight ? 'right' : ''} ${
|
|
isSingle ? 'single' : ''
|
|
} ${className}`}
|
|
{...props}>
|
|
{children}
|
|
<style jsx>{`
|
|
.icon {
|
|
position: absolute;
|
|
left: var(--geist-ui-button-icon-padding);
|
|
right: auto;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: var(--geist-ui-button-color);
|
|
z-index: 1;
|
|
}
|
|
|
|
.right {
|
|
right: var(--geist-ui-button-icon-padding);
|
|
left: auto;
|
|
}
|
|
|
|
.icon :global(svg) {
|
|
background: transparent;
|
|
height: calc(var(--geist-ui-button-height) / 2.35);
|
|
width: calc(var(--geist-ui-button-height) / 2.35);
|
|
}
|
|
|
|
.single {
|
|
position: static;
|
|
transform: none;
|
|
}
|
|
`}</style>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
ButtonIcon.defaultProps = defaultProps
|
|
ButtonIcon.displayName = 'GeistButtonIcon'
|
|
export default ButtonIcon
|