Commit 43008ef4 authored by Amaury Martiny's avatar Amaury Martiny

Use a custom Form Field component

parent 35939359
......@@ -33,7 +33,9 @@
"dependencies": {
"react-blockies": "^1.3.0",
"react-content-loader": "^3.1.2",
"react-tooltip": "^3.6.1"
"react-tooltip": "^3.6.1",
"semantic-ui-css": "^2.3.2",
"semantic-ui-react": "^0.81.3"
},
"devDependencies": {
"@babel/cli": "^7.0.0-beta.49",
......
......@@ -4,22 +4,29 @@
// SPDX-License-Identifier: BSD-3-Clause
import React from 'react';
import PropTypes from 'prop-types';
import { Popup } from 'semantic-ui-react';
import 'semantic-ui-css/components/popup.min.css';
export const FormField = ({
className,
input: inputComponent,
export const Field = ({
as: T = 'input',
children,
input,
label,
meta,
...otherProps
}) => (
<div className={['form_field', className].join(' ')}>
<div className='form_field'>
<label>{label}</label>
{inputComponent || <input {...otherProps} />}
<Popup
content={meta.error}
inverted
on='click'
open={!meta.pristine && !meta.valid && meta.touched}
position='top center'
size='mini'
trigger={<T {...input} {...otherProps} />}
/>
{children}
</div>
);
FormField.propTypes = {
className: PropTypes.string,
input: PropTypes.node,
label: PropTypes.string
};
......@@ -3,4 +3,4 @@
//
// SPDX-License-Identifier: BSD-3-Clause
export * from './FormField';
export * from './Field';
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import { Field } from './Field';
import { Slider } from './Slider';
export const Form = {
Field,
Slider
};
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
import React from 'react';
import { Field } from '../Field';
export const Slider = ({
centerText,
input,
leftText,
rightText,
...otherProps
}) => (
<Field input={input} {...otherProps}>
<nav className='range-nav'>
<span className='range-nav_label'>{leftText}</span>
<span className='range-nav_value'>{centerText}</span>
<span className='range-nav_label'>{rightText}</span>
</nav>
</Field>
);
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
export * from './Slider';
// Copyright 2015-2018 Parity Technologies (UK) Ltd.
// This file is part of Parity.
//
// SPDX-License-Identifier: BSD-3-Clause
export * from './Form';
......@@ -7,7 +7,7 @@ export * from './AccountCard';
export * from './AccountHeader';
export * from './AddressShort';
export * from './Card';
export * from './FormField';
export * from './Form';
export * from './Header';
export * from './Placeholder';
export * from './TokenCard';
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment