mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-16 10:19:03 +05:30
Create Button component
This commit is contained in:
parent
eb9937bf7d
commit
a8af63b46c
@ -3,10 +3,8 @@ import React, { Component } from 'react';
|
||||
import { FormattedMessage as Message } from 'react-intl';
|
||||
import { Link } from 'react-router';
|
||||
import Helmet from 'react-helmet';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { LabeledInput } from 'components/ui/Form';
|
||||
import buttons from 'components/ui/buttons.scss';
|
||||
import { LabeledInput, Button } from 'components/ui/Form';
|
||||
|
||||
import styles from 'components/profile/profileForm.scss';
|
||||
import messages from './ChangePassword.messages';
|
||||
@ -55,9 +53,7 @@ export default class ChangePassword extends Component {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className={classNames(buttons.green, buttons.block)}>
|
||||
<Message {...messages.changePasswordButton} />
|
||||
</button>
|
||||
<Button color="green" block label={messages.changePasswordButton} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -5,6 +5,7 @@ import { intlShape } from 'react-intl';
|
||||
|
||||
import icons from './icons.scss';
|
||||
import styles from './form.scss';
|
||||
import buttons from './buttons.scss';
|
||||
|
||||
export class Input extends Component {
|
||||
static displayName = 'Input';
|
||||
@ -160,6 +161,46 @@ export class Checkbox extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export class Button extends Component {
|
||||
static displayName = 'Button';
|
||||
|
||||
static propTypes = {
|
||||
label: PropTypes.oneOfType([
|
||||
PropTypes.shape({
|
||||
id: PropTypes.string
|
||||
}),
|
||||
PropTypes.string
|
||||
]).isRequired,
|
||||
block: PropTypes.bool,
|
||||
color: PropTypes.oneOf(['green', 'blue', 'red', 'lightViolet', 'darkBlue'])
|
||||
};
|
||||
|
||||
static contextTypes = {
|
||||
intl: intlShape.isRequired
|
||||
};
|
||||
|
||||
render() {
|
||||
const { color = 'green', block } = this.props;
|
||||
|
||||
const props = {
|
||||
...this.props
|
||||
};
|
||||
|
||||
if (props.label.id) {
|
||||
props.label = this.context.intl.formatMessage(props.label);
|
||||
}
|
||||
|
||||
return (
|
||||
<button className={classNames(buttons[color], {
|
||||
[buttons.block]: block
|
||||
})} {...props}>
|
||||
{props.label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class Form extends Component {
|
||||
static displayName = 'Form';
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user