poanetwork
/
poa-dapps-voting
mirror of https://github.com/poanetwork/poa-dapps-voting.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

(add) form select component - (add) form input component - (add) form input title component - (add) form textarea component

This commit is contained in:
Gabriel Rodriguez Alsina 2019-01-03 16:06:36 -03:00
parent 744f3a1ff5
commit e8b7a066bb
16 changed files with 219 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/stylesheets/base/_forms.scss
View File

@ -11,9 +11,11 @@ label {
}
input {
// TODO: delete
@include form-element-base-style();
height: $input-height;
// TODO: keep
&[type='radio'] {
display: none;
}
@ -29,6 +31,7 @@ textarea {
}
select {
// TODO: delete
@include form-element-base-style();
@include image-2x('#{ $base-images-path }/Base/select@2x.png', 8px, 4px);
appearance: none;

13
src/assets/stylesheets/components/_BallotKeysMetadata.scss Normal file
View File

@ -0,0 +1,13 @@
.frm-BallotKeysMetadata_Row {
margin-bottom: $base-grid-gap;
&:last-child {
margin-bottom: 0;
}
@media (min-width: $breakpoint-md) {
display: grid;
grid-column-gap: $base-grid-gap;
grid-template-columns: 1fr 1fr;
}
}

3
src/assets/stylesheets/components/_ButtonAddBallot.scss
View File

@ -1,7 +1,8 @@
$sw-ButtonAddBallot-height: 36px;
$sw-ButtonAddBallot-height: 44px;
.sw-ButtonAddBallot {
align-items: center;
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;

7
src/assets/stylesheets/components/_FormFieldTitle.scss Normal file
View File

@ -0,0 +1,7 @@
.frm-FormFieldTitle {
color: $gray-text-color;
display: inline-block;
font-size: 14px;
line-height: 1.2;
margin-bottom: 15px;
}

4
src/assets/stylesheets/components/_FormInput.scss Normal file
View File

@ -0,0 +1,4 @@
.frm-FormInput_Field {
@include form-element-base-style();
height: $input-height;
}

10
src/assets/stylesheets/components/_FormSelect.scss Normal file
View File

@ -0,0 +1,10 @@
.frm-FormSelect {
@include form-element-base-style();
@include image-2x('#{ $base-images-path }/Base/select@2x.png', 8px, 4px);
appearance: none;
background-image: url('#{ $base-images-path }/Base/select.png');
background-position: right 13px center;
background-repeat: no-repeat;
height: $input-height;
padding-right: 30px;
}

8
src/assets/stylesheets/components/_FormTextarea.scss Normal file
View File

@ -0,0 +1,8 @@
.frm-FormTextarea_Field {
@include form-element-base-style();
height: 70px;
padding-bottom: 10px;
padding-top: 10px;
resize: none;
width: 100%;
}

7
src/assets/stylesheets/components/_index.scss
View File

@ -4,6 +4,7 @@
@import "BallotDataPair";
@import "BallotFooter";
@import "BallotInfoContainer";
@import "BallotKeysMetadata";
@import "Ballots";
@import "BaseLoader";
@import "ButtonAddBallot";
@ -12,7 +13,11 @@
@import "ButtonNewBallot";
@import "ButtonVoting";
@import "Footer";
@import "FormFieldTitle";
@import "FormHint";
@import "FormInput";
@import "FormSelect";
@import "FormTextarea";
@import "Header";
@import "IconActive";
@import "IconAdd";
@ -41,4 +46,4 @@
@import "Separator";
@import "SocialIcons";
@import "VoteProgressBar";
@import "Votes";
@import "Votes";

2
src/assets/stylesheets/index.css
View File

File diff suppressed because one or more lines are too long

104
src/components/BallotKeysMetadata/index.js
View File

@ -1,18 +1,22 @@
import React from 'react'
import Select from 'react-select'
import { FormInput } from '../FormInput'
import { FormSelect } from '../FormSelect'
import { Separator } from '../Separator'
import { inject, observer } from 'mobx-react'
@inject('ballotStore', 'contractsStore')
@observer
export class BallotKeysMetadata extends React.Component {
render() {
const { ballotStore, contractsStore } = this.props
const { ballotStore, contractsStore, networkBranch } = this.props
let options = []
for (var key in contractsStore.validatorsMetadata) {
if (contractsStore.validatorsMetadata.hasOwnProperty(key)) {
options.push(contractsStore.validatorsMetadata[key])
}
}
let newVotingPayoutKeys = ''
if (
ballotStore.isNewValidatorPersonalData &&
@ -56,62 +60,50 @@ export class BallotKeysMetadata extends React.Component {
</div>
)
}
return (
<div>
<div>
<div className="left">
<div className="form-el">
<label htmlFor="key">{ballotStore.isNewValidatorPersonalData ? 'New Mining Key' : 'Affected Key'}</label>
<input
type="text"
id="key"
value={ballotStore.ballotKeys.affectedKey}
onChange={e => ballotStore.changeBallotMetadata(e, 'affectedKey', 'ballotKeys')}
/>
<p className="hint">
{ballotStore.isNewValidatorPersonalData
? 'Mining key address of new validator.'
: 'Affected key address of validator to vote for.'}
<br />
Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
</p>
</div>
</div>
<div className="right">
<div className="form-el">
<label htmlFor="mining-key">Mining Key</label>
<Select.Creatable
name="form-field-name"
id="mining-key"
value={ballotStore.ballotKeys.miningKey}
onChange={ballotStore.setMiningKey}
options={options}
disabled={ballotStore.isNewValidatorPersonalData}
/>
<p className="hint">
Mining key address of validator to vote for.
<br />
Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
</p>
</div>
</div>
<div className="clearfix"> </div>
{newVotingPayoutKeys}
<div className="left">
<div className="form-el">
<label htmlFor="datetime-local">Ballot End</label>
<input
type="datetime-local"
id="datetime-local"
value={ballotStore.endTime}
min={ballotStore.endTime}
onChange={e => ballotStore.changeBallotMetadata(e, 'endTime')}
/>
<p className="hint">Ballot's end time.</p>
</div>
</div>
<div className="frm-BallotKeysMetadata">
<div className="frm-BallotKeysMetadata_Row">
<FormInput
id="key"
networkBranch={networkBranch}
onChange={e => ballotStore.changeBallotMetadata(e, 'affectedKey', 'ballotKeys')}
title={ballotStore.isNewValidatorPersonalData ? 'New Mining Key' : 'Affected Key'}
value={ballotStore.ballotKeys.affectedKey}
hint={`${
ballotStore.isNewValidatorPersonalData
? 'Mining key address of new validator.'
: 'Affected key address of validator to vote for.'
}
<br>Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.`}
/>
<FormSelect
disabled={ballotStore.isNewValidatorPersonalData}
hint="Mining key address of validator to vote for.<br />Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee."
id="mining-key"
name="form-field-name"
networkBranch={networkBranch}
onChange={ballotStore.setMiningKey}
options={options}
title="Mining Key"
value={ballotStore.ballotKeys.miningKey}
/>
</div>
<hr />
<div className="clearfix"> </div>
{newVotingPayoutKeys}
<div className="frm-BallotKeysMetadata_Row">
<FormInput
hint="Ballot's end time."
id="datetime-local"
min={ballotStore.endTime}
networkBranch={networkBranch}
onChange={e => ballotStore.changeBallotMetadata(e, 'endTime')}
title="Ballot End"
type="datetime-local"
value={ballotStore.endTime}
/>
</div>
<Separator />
</div>
)
}

9
src/components/FormFieldTitle/index.js Normal file
View File

@ -0,0 +1,9 @@
import React from 'react'
export const FormFieldTitle = ({ extraClassName = '', text, htmlFor }) => {
return (
<label className={`frm-FormFieldTitle ${extraClassName}`} htmlFor={htmlFor}>
{text}
</label>
)
}

7
src/components/FormHint/index.js
View File

@ -1,5 +1,10 @@
import React from 'react'
export const FormHint = ({ extraClassName = '', networkBranch, text }) => {
return <p className={`frm-FormHint frm-FormHint-${networkBranch} ${extraClassName}`}>{text}</p>
return (
<p
className={`frm-FormHint frm-FormHint-${networkBranch} ${extraClassName}`}
dangerouslySetInnerHTML={{ __html: text }}
/>
)
}

34
src/components/FormInput/index.js Normal file
View File

@ -0,0 +1,34 @@
import React from 'react'
import { FormFieldTitle } from '../FormFieldTitle'
import { FormHint } from '../FormHint'
export const FormInput = ({
disabled = false,
extraClassName = '',
hint,
id,
min,
networkBranch,
onChange,
placeholder,
title,
type = 'text',
value
}) => {
return (
<div className={`frm-FormInput ${extraClassName}`}>
<FormFieldTitle htmlFor={id} text={title} />
<input
className="frm-FormInput_Field"
disabled={disabled}
id={id}
min={min}
onChange={onChange}
placeholder={placeholder}
type={type}
value={value}
/>
{hint ? <FormHint text={hint} networkBranch={networkBranch} /> : null}
</div>
)
}

28
src/components/FormSelect/index.js Normal file
View File

@ -0,0 +1,28 @@
import React from 'react'
import Select from 'react-select'
import { FormFieldTitle } from '../FormFieldTitle'
import { FormHint } from '../FormHint'
export const FormSelect = ({
disabled = false,
extraClassName = '',
hint,
id,
name = '',
networkBranch,
onChange,
options,
title,
value
}) => {
return (
<div className={`frm-FormSelect ${extraClassName}`}>
<FormFieldTitle htmlFor={id} text={title} />
<label className="frm-FormSelect_Title" htmlFor={id}>
{title}
</label>
<Select.Creatable name={name} id={id} value={value} onChange={onChange} options={options} disabled={disabled} />
{hint ? <FormHint text={hint} networkBranch={networkBranch} /> : null}
</div>
)
}

31
src/components/FormTextarea/index.js Normal file
View File

@ -0,0 +1,31 @@
import React from 'react'
import { FormFieldTitle } from '../FormFieldTitle'
import { FormHint } from '../FormHint'
export const FormTextarea = ({
disabled = false,
extraClassName = '',
hint,
id,
networkBranch,
onChange,
placeholder,
title,
value
}) => {
return (
<div className={`frm-FormTextarea ${extraClassName}`}>
<FormFieldTitle htmlFor={id} text={title} />
<textarea
className="frm-FormTextarea_Field"
disabled={disabled}
id={id}
onChange={onChange}
placeholder={placeholder}
rows="4"
value={value}
/>
{hint ? <FormHint text={hint} networkBranch={networkBranch} /> : null}
</div>
)
}

14
src/components/NewBallot/index.js
View File

@ -6,6 +6,7 @@ import { BallotKeysMetadata } from '../BallotKeysMetadata'
import { BallotMinThresholdMetadata } from '../BallotMinThresholdMetadata'
import { BallotProxyMetadata } from '../BallotProxyMetadata'
import { ButtonAddBallot } from '../ButtonAddBallot'
import { FormTextarea } from '../FormTextarea'
import { KeysTypes } from '../KeysTypes'
import { NewBallotMenu } from '../NewBallotMenu'
import { NewBallotMenuInfo } from '../NewBallotMenuInfo'
@ -425,7 +426,7 @@ export class NewBallot extends React.Component {
switch (ballotStore.ballotType) {
case ballotStore.BallotType.keys:
metadata = <BallotKeysMetadata />
metadata = <BallotKeysMetadata networkBranch={networkBranch} />
minThreshold = contractsStore.keysBallotThreshold
break
case ballotStore.BallotType.minThreshold:
@ -458,10 +459,13 @@ export class NewBallot extends React.Component {
/>
</div>
<div className="new-NewBallot_FormContent">
<div className="form-el">
<label>Description of the ballot</label>
<textarea rows="4" value={ballotStore.memo} onChange={e => ballotStore.setMemo(e)} />
</div>
<FormTextarea
id="datetime-local"
networkBranch={networkBranch}
onChange={e => ballotStore.setMemo(e)}
title="Description of the ballot"
value={ballotStore.memo}
/>
<Separator />
{ballotStore.isBallotForKey ? <KeysTypes networkBranch={networkBranch} /> : null}
{ballotStore.isNewValidatorPersonalData ? <Validator /> : null}