mirror of
https://github.com/yldio/copilot.git
synced 2024-11-11 05:40:11 +02:00
creating textarea component
This commit is contained in:
parent
68b418c7d2
commit
56d9a5ba46
146
ui/src/components/textarea/index.js
Normal file
146
ui/src/components/textarea/index.js
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const composers = require('../../shared/composers');
|
||||||
|
const constants = require('../../shared/constants');
|
||||||
|
const fns = require('../../shared/functions');
|
||||||
|
const Styled = require('styled-components');
|
||||||
|
|
||||||
|
const {
|
||||||
|
boxes,
|
||||||
|
colors
|
||||||
|
} = constants;
|
||||||
|
|
||||||
|
const {
|
||||||
|
remcalc
|
||||||
|
} = fns;
|
||||||
|
|
||||||
|
const {
|
||||||
|
baseBox
|
||||||
|
} = composers;
|
||||||
|
|
||||||
|
const {
|
||||||
|
default: styled
|
||||||
|
} = Styled;
|
||||||
|
|
||||||
|
const Label = styled.label`
|
||||||
|
color: ${props => props.error ? colors.alert : colors.fonts.regular}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const InputField = styled.textarea`
|
||||||
|
background: ${colors.brandSecondary};
|
||||||
|
color: ${props => props.error ? colors.alert : colors.fonts.semibold}
|
||||||
|
display: block;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: ${remcalc('15 18')};
|
||||||
|
visibility: visible;
|
||||||
|
width: 100%;
|
||||||
|
min-height: ${remcalc(96)};
|
||||||
|
${baseBox()};
|
||||||
|
border-color: ${props => props.error ? colors.alert : ''};
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
border-color: ${boxes.border.checked};
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Error = styled.span`
|
||||||
|
float: right;
|
||||||
|
color: ${colors.alert};
|
||||||
|
font-size: ${remcalc(14)};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Textarea = ({
|
||||||
|
autoComplete,
|
||||||
|
autoFocus,
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
disabled = false,
|
||||||
|
error,
|
||||||
|
form,
|
||||||
|
id,
|
||||||
|
inputMode,
|
||||||
|
label,
|
||||||
|
labelledby,
|
||||||
|
list,
|
||||||
|
name,
|
||||||
|
onChange,
|
||||||
|
pattern,
|
||||||
|
placeholder,
|
||||||
|
readOnly,
|
||||||
|
required,
|
||||||
|
selectionDirection,
|
||||||
|
spellCheck,
|
||||||
|
style,
|
||||||
|
tabIndex,
|
||||||
|
type,
|
||||||
|
value
|
||||||
|
}) => {
|
||||||
|
const _label = label || children;
|
||||||
|
const _children = label && children ? children : null;
|
||||||
|
const _error = error ? (<Error>{error}</Error>) : null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Label
|
||||||
|
error={error}
|
||||||
|
htmlFor={id}
|
||||||
|
>
|
||||||
|
{_label}
|
||||||
|
</Label>
|
||||||
|
{_error}
|
||||||
|
<InputField
|
||||||
|
aria-labelledby={labelledby}
|
||||||
|
autoComplete={autoComplete}
|
||||||
|
autoFocus={autoFocus}
|
||||||
|
disabled={disabled}
|
||||||
|
error={error}
|
||||||
|
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}
|
||||||
|
/>
|
||||||
|
{_children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Textarea.propTypes = {
|
||||||
|
autoComplete: React.PropTypes.string,
|
||||||
|
autoFocus: React.PropTypes.bool,
|
||||||
|
children: React.PropTypes.node,
|
||||||
|
className: React.PropTypes.string,
|
||||||
|
disabled: React.PropTypes.bool,
|
||||||
|
error: React.PropTypes.string,
|
||||||
|
form: React.PropTypes.string,
|
||||||
|
id: React.PropTypes.string,
|
||||||
|
inputMode: React.PropTypes.string,
|
||||||
|
label: React.PropTypes.string,
|
||||||
|
labelledby: 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
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = Textarea;
|
60
ui/src/components/textarea/readme.md
Normal file
60
ui/src/components/textarea/readme.md
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
# Input
|
||||||
|
|
||||||
|
## demo
|
||||||
|
|
||||||
|
```embed
|
||||||
|
const React = require('react');
|
||||||
|
const ReactDOM = require('react-dom/server');
|
||||||
|
const Base = require('../base');
|
||||||
|
const Container = require('../container');
|
||||||
|
const Row = require('../row');
|
||||||
|
const Column = require('../column');
|
||||||
|
const Input = require('./index.js');
|
||||||
|
|
||||||
|
nmodule.exports = ReactDOM.renderToString(
|
||||||
|
<Base>
|
||||||
|
<Row>
|
||||||
|
<Column>
|
||||||
|
<Input
|
||||||
|
placeholder='Enter email'
|
||||||
|
label='Email Address'
|
||||||
|
type='email'
|
||||||
|
>
|
||||||
|
<small>We'll never share your email with anyone else.</small>
|
||||||
|
</Input>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Column>
|
||||||
|
<Input placeholder='Password' type='password'>
|
||||||
|
Password
|
||||||
|
</Input>
|
||||||
|
</Column>
|
||||||
|
</Row>
|
||||||
|
</Base>
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
## usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
const React = require('react');
|
||||||
|
const Input = require('ui/input');
|
||||||
|
|
||||||
|
module.exports = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Input
|
||||||
|
placeholder='Enter email'
|
||||||
|
label='Email Address'
|
||||||
|
type='email'
|
||||||
|
>
|
||||||
|
<small>We'll never share your email with anyone else.</small>
|
||||||
|
</Input>
|
||||||
|
<Input placeholder='Password' type='password'>
|
||||||
|
Password
|
||||||
|
</Input>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
24
ui/src/components/textarea/story.js
Normal file
24
ui/src/components/textarea/story.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
const React = require('react');
|
||||||
|
|
||||||
|
const {
|
||||||
|
storiesOf
|
||||||
|
} = require('@kadira/storybook');
|
||||||
|
|
||||||
|
const Base= require('../base');
|
||||||
|
const Textarea = require('./');
|
||||||
|
|
||||||
|
storiesOf('Textarea', module)
|
||||||
|
.add('Default', () => (
|
||||||
|
<Base>
|
||||||
|
<Textarea placeholder="I am the placeholder" />
|
||||||
|
</Base>
|
||||||
|
))
|
||||||
|
.add('Error', () => (
|
||||||
|
<Base>
|
||||||
|
<Textarea
|
||||||
|
error="Somethings missing"
|
||||||
|
placeholder="There was an error"
|
||||||
|
value="alexw/makeusproud.com"
|
||||||
|
/>
|
||||||
|
</Base>
|
||||||
|
));
|
@ -24,5 +24,6 @@ module.exports = {
|
|||||||
Tabs: require('./components/tabs'),
|
Tabs: require('./components/tabs'),
|
||||||
Toggle: require('./components/toggle'),
|
Toggle: require('./components/toggle'),
|
||||||
Tooltip: require('./components/tooltip'),
|
Tooltip: require('./components/tooltip'),
|
||||||
|
Textarea: require('./components/textarea'),
|
||||||
Widget: require('./components/widget'),
|
Widget: require('./components/widget'),
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user