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:
parent
7712d20523
commit
6faa75f36b
@ -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;
|
||||
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
};
|
||||
|
@ -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
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user