Skip to content

Commit

Permalink
feat: Radio component
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Jan 26, 2021
1 parent 4f23379 commit 464a669
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 0 deletions.
114 changes: 114 additions & 0 deletions src/tailwind-mobile/components/Radio.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
import React from 'react';
import { cls } from '../shared/cls';
import { useTheme } from '../shared/use-theme';
import RadioIcon from './icons/RadioIcon';

const Radio = (props) => {
const {
tag = 'label',
className,
colors: colorsProp,

defaultChecked,
checked,
name,
value,
disabled,
readOnly,
onChange,

// Theme
ios,
material,

// Children
children,

// Rest
...rest
} = props;

const Component = tag;

const attrs = {
...rest,
};

const { theme, themeClasses } = useTheme({ ios, material });

const colors = {
borderIos: 'border-gray-300',
borderMaterial: 'border-gray-500',
bgChecked: 'bg-primary',
borderChecked: 'border-primary',
...colorsProp,
};

const state =
checked || (defaultChecked && !onChange) ? 'checked' : 'notChecked';

const c = {
base: {
initial: `cursor-pointer inline-block align-middle relative`,
},
iconWrap: {
initial: 'flex items-center justify-center rounded-full',
ios: 'w-5.5 h-5.5 border',
material: 'w-5 h-5 border-2',
notChecked: {
ios: colors.borderIos,
material: colors.borderMaterial,
},
checked: {
initial: colors.borderChecked,
},
},
icon: {
initial: `w-3/5 h-3/5`,
ios: 'text-primary fill-current',
material: `rounded-full ${colors.bgChecked}`,
notChecked: 'opacity-0',
checked: 'opacity-100',
},
indeterminateIcon: {
initial: 'bg-white w-3/4',
ios: 'h-0.25',
material: 'h-0.5',
},
input: {
initial: 'hidden',
},
};

const classes = cls(themeClasses(c.base), className);
const iconWrapClasses = themeClasses(c.iconWrap, state);
const iconClasses = themeClasses(c.icon, state);
const inputClasses = themeClasses(c.input);

return (
<Component className={classes} {...attrs}>
<input
type="radio"
name={name}
value={value}
disabled={disabled}
readOnly={readOnly}
checked={checked}
defaultChecked={defaultChecked}
onChange={onChange}
className={inputClasses}
/>

<i className={iconWrapClasses}>
{theme === 'ios' ? (
<RadioIcon className={iconClasses} />
) : (
<span className={iconClasses} />
)}
</i>
{children}
</Component>
);
};

export default Radio;
22 changes: 22 additions & 0 deletions src/tailwind-mobile/components/icons/RadioIcon.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from 'react';

const RadioIcon = (props) => {
const { fill, ...rest } = props;

return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="13"
height="10"
viewBox="0 0 13 10"
{...rest}
>
<polygon
fill={fill}
points="11.6 0 4.4 7.2 1.4 4.2 0 5.6 4.4 10 4.4 10 4.4 10 13 1.4"
/>
</svg>
);
};

export default RadioIcon;

0 comments on commit 464a669

Please sign in to comment.