mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 14:10:04 +02:00
support and proxy native component attributes (fixes #53)
This commit is contained in:
parent
7712d20523
commit
6faa75f36b
@ -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;
|
||||||
|
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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
|
||||||
};
|
};
|
||||||
|
@ -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
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user