|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- import styled from 'styled-components';
- import {ChangeEventHandler, FC, ReactChild} from 'react';
-
- const Base = styled('div')({
- height: '3rem',
- borderRadius: '0.25rem',
- overflow: 'hidden',
- position: 'relative',
- '::after': {
- content: "''",
- borderWidth: 1,
- borderStyle: 'solid',
- borderColor: 'inherit',
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height: '100%',
- borderRadius: 'inherit',
- boxSizing: 'border-box',
- pointerEvents: 'none',
- opacity: 0.5,
- },
- })
-
- const ClickArea = styled('label')({
- display: 'block',
- width: '100%',
- height: '100%',
- margin: 0,
- padding: '0 1rem',
- boxSizing: 'border-box',
- font: 'inherit',
- border: 0,
- backgroundColor: 'transparent',
- color: 'inherit',
- outline: 0,
- textTransform: 'uppercase',
- fontWeight: 'bolder',
- position: 'relative',
- borderRadius: 'inherit',
- })
-
- const Input = styled('input')({
- position: 'absolute',
- left: -999999,
- })
-
- const ButtonWrapper = styled('span')({
- display: 'grid',
- placeContent: 'center',
- borderRadius: 'inherit',
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height: '100%',
- lineHeight: 0,
- cursor: 'pointer',
- [`${Input}:disabled + &`]: {
- cursor: 'not-allowed',
- },
- [`${Input}:checked + &`]: {
- backgroundColor: 'Highlight !important',
- },
- })
-
- const VARIANTS = {
- default: {
- backgroundColor: 'var(--color-bg, white)',
- borderColor: 'var(--color-fg, black)',
- color: 'var(--color-fg, black)',
- },
- primary: {
- backgroundColor: 'var(--color-fg, black)',
- borderColor: 'var(--color-fg, black)',
- color: 'var(--color-bg, white)',
- },
- }
-
- type Props = {
- children?: ReactChild,
- className?: string,
- type?: 'checkbox' | 'radio',
- block?: boolean,
- variant?: keyof typeof VARIANTS,
- name?: string,
- value?: string,
- defaultChecked?: boolean,
- onChange?: ChangeEventHandler<HTMLInputElement>,
- disabled?: boolean,
- }
-
- const ToggleButton: FC<Props> = ({
- children,
- className,
- type = 'checkbox',
- block,
- variant = 'default',
- ...etcProps
- }) => {
- return (
- <Base
- className={className}
- style={{
- display: block ? 'block' : 'inline-block',
- width: block ? '100%' : undefined,
- }}
- >
- <ClickArea>
- <Input
- {...etcProps}
- type={type}
- />
- <ButtonWrapper
- style={VARIANTS[variant]}
- >
- {children}
- </ButtonWrapper>
- </ClickArea>
- </Base>
- )
- }
-
- export default ToggleButton
|