1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

support and proxy native component attributes (fixes #53)

This commit is contained in:
Sérgio Ramos 2016-10-31 16:02:33 +00:00
parent 7712d20523
commit 6faa75f36b
5 changed files with 126 additions and 11 deletions

View File

@ -5,10 +5,15 @@ const React = require('react');
const styles = require('./style.css');
const Avatar = ({
color,
src,
name = '',
alt,
className,
color,
crossorigin,
longdesc,
name = '',
sizes,
src,
srcset,
style
}) => {
@ -25,9 +30,13 @@ const Avatar = ({
const letter = name.split('')[0];
const av = src ? (
<img
alt={name}
alt={alt || name}
className={styles.picture}
crossOrigin={crossorigin}
longdesc={longdesc}
sizes={sizes}
src={src}
srcSet={srcset}
style={style}
/>
) : (
@ -47,11 +56,18 @@ const Avatar = ({
};
Avatar.propTypes = {
alt: React.PropTypes.string,
className: React.PropTypes.string,
color: React.PropTypes.string,
crossorigin: React.PropTypes.string,
longdesc: React.PropTypes.string,
name: React.PropTypes.string,
sizes: React.PropTypes.string,
src: React.PropTypes.string,
srcset: React.PropTypes.string,
style: React.PropTypes.object
};
module.exports = Avatar;

View File

@ -3,11 +3,21 @@ const React = require('react');
const styles = require('./style.css');
const Button = ({
disabled = false,
secondary = false,
autoFocus,
children,
className,
disabled = false,
form,
formAction,
formEncType,
formMethod,
formNoValidate,
formTarget,
name,
secondary = false,
style,
children
type,
value
}) => {
const cn = classNames(
className,
@ -18,9 +28,19 @@ const Button = ({
return (
<button
autoFocus={autoFocus}
className={cn}
disabled={disabled}
form={form}
formAction={formAction}
formEncType={formEncType}
formMethod={formMethod}
formNoValidate={formNoValidate}
formTarget={formTarget}
name={name}
style={style}
type={type}
value={value}
>
{children}
</button>
@ -28,11 +48,21 @@ const Button = ({
};
Button.propTypes = {
autoFocus: React.PropTypes.string,
children: React.PropTypes.node,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
form: React.PropTypes.string,
formAction: React.PropTypes.string,
formEncType: React.PropTypes.string,
formMethod: React.PropTypes.string,
formNoValidate: React.PropTypes.bool,
formTarget: React.PropTypes.string,
name: React.PropTypes.string,
secondary: React.PropTypes.bool,
style: React.PropTypes.object
style: React.PropTypes.object,
type: React.PropTypes.string,
value: React.PropTypes.string
};
module.exports = Button;

View File

@ -4,12 +4,18 @@ const styles = require('./style.css');
const Checkbox = ({
checked = false,
className,
children,
className,
disabled = false,
form,
id,
name,
onChange,
style
readOnly,
required,
selectionDirection,
style,
tabIndex
}) => {
const cn = classNames(
className,
@ -24,9 +30,15 @@ const Checkbox = ({
checked={checked}
className={cn}
disabled={disabled}
form={form}
id={id}
name={name}
onChange={onChange}
readOnly={readOnly}
required={required}
selectionDirection={selectionDirection}
style={style}
tabIndex={tabIndex}
type='checkbox'
/>
<span>{children}</span>
@ -39,9 +51,15 @@ Checkbox.propTypes = {
children: React.PropTypes.node,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
form: React.PropTypes.string,
id: React.PropTypes.string,
name: React.PropTypes.string,
onChange: React.PropTypes.func,
style: React.PropTypes.object
readOnly: React.PropTypes.bool,
required: React.PropTypes.bool,
selectionDirection: React.PropTypes.string,
style: React.PropTypes.object,
tabIndex: React.PropTypes.string
};
module.exports = Checkbox;

View File

@ -3,14 +3,26 @@ const React = require('react');
const styles = require('./style.css');
const Input = ({
autoComplete,
autoFocus,
children,
className,
disabled = false,
form,
id,
inputMode,
label,
list,
name,
onChange,
pattern,
placeholder,
readOnly,
required,
selectionDirection,
spellCheck,
style,
tabIndex,
type,
value
}) => {
@ -31,11 +43,23 @@ const Input = ({
</label>
<input
aria-labelledby={labelledby}
autoComplete={autoComplete}
autoFocus={autoFocus}
className={styles.input}
disabled={disabled}
form={form}
id={id}
inputMode={inputMode}
list={list}
name={name}
onChange={onChange}
pattern={pattern}
placeholder={placeholder}
readOnly={readOnly}
required={required}
selectionDirection={selectionDirection}
spellCheck={spellCheck}
tabIndex={tabIndex}
type={type}
value={value}
/>
@ -45,14 +69,26 @@ const Input = ({
};
Input.propTypes = {
autoComplete: React.PropTypes.string,
autoFocus: React.PropTypes.string,
children: React.PropTypes.node,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
form: React.PropTypes.string,
id: React.PropTypes.string,
inputMode: React.PropTypes.string,
label: React.PropTypes.string,
list: React.PropTypes.string,
name: React.PropTypes.string,
onChange: React.PropTypes.func,
pattern: React.PropTypes.string,
placeholder: React.PropTypes.string,
readOnly: React.PropTypes.bool,
required: React.PropTypes.bool,
selectionDirection: React.PropTypes.string,
spellCheck: React.PropTypes.bool,
style: React.PropTypes.object,
tabIndex: React.PropTypes.string,
type: React.PropTypes.string,
value: React.PropTypes.string
};

View File

@ -8,11 +8,16 @@ const Radio = ({
className,
defaultChecked,
disabled = false,
form,
id,
label,
name,
onChange,
readOnly,
required,
selectionDirection,
style,
tabIndex,
value
}) => {
const _label = label || children;
@ -34,9 +39,14 @@ const Radio = ({
className={styles.input}
defaultChecked={defaultChecked}
disabled={disabled}
form={form}
id={id}
name={name}
onChange={onChange}
readOnly={readOnly}
required={required}
selectionDirection={selectionDirection}
tabIndex={tabIndex}
type='radio'
value={value}
/>
@ -57,11 +67,16 @@ Radio.propTypes = {
className: React.PropTypes.string,
defaultChecked: React.PropTypes.bool,
disabled: React.PropTypes.bool,
form: React.PropTypes.string,
id: React.PropTypes.string,
label: React.PropTypes.string,
name: React.PropTypes.string.isRequired,
onChange: React.PropTypes.func,
readOnly: React.PropTypes.bool,
required: React.PropTypes.bool,
selectionDirection: React.PropTypes.string,
style: React.PropTypes.object,
tabIndex: React.PropTypes.string,
value: React.PropTypes.string.isRequired
};