1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-13 06:40: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 styles = require('./style.css');
const Avatar = ({ const Avatar = ({
color, alt,
src,
name = '',
className, className,
color,
crossorigin,
longdesc,
name = '',
sizes,
src,
srcset,
style style
}) => { }) => {
@ -25,9 +30,13 @@ const Avatar = ({
const letter = name.split('')[0]; const letter = name.split('')[0];
const av = src ? ( const av = src ? (
<img <img
alt={name} alt={alt || name}
className={styles.picture} className={styles.picture}
crossOrigin={crossorigin}
longdesc={longdesc}
sizes={sizes}
src={src} src={src}
srcSet={srcset}
style={style} style={style}
/> />
) : ( ) : (
@ -47,11 +56,18 @@ const Avatar = ({
}; };
Avatar.propTypes = { Avatar.propTypes = {
alt: React.PropTypes.string,
className: React.PropTypes.string, className: React.PropTypes.string,
color: React.PropTypes.string, color: React.PropTypes.string,
crossorigin: React.PropTypes.string,
longdesc: React.PropTypes.string,
name: React.PropTypes.string, name: React.PropTypes.string,
sizes: React.PropTypes.string,
src: React.PropTypes.string, src: React.PropTypes.string,
srcset: React.PropTypes.string,
style: React.PropTypes.object style: React.PropTypes.object
}; };
module.exports = Avatar; module.exports = Avatar;

View File

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

View File

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

View File

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

View File

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