From 2f9e05830b31d974809065840f8b71219c7b0655 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Wed, 3 May 2017 13:37:32 +0200 Subject: [PATCH] Create ~/ui/Form/Checkbox component (#5543) --- js/src/shell/Dapps/dapps.js | 3 +- js/src/shell/FirstRun/TnC/tnc.js | 3 +- js/src/ui/Features/features.js | 3 +- js/src/ui/Form/Checkbox/checkbox.js | 40 +++++++++++++++++++ js/src/ui/Form/Checkbox/index.js | 17 ++++++++ js/src/ui/Form/index.js | 1 + js/src/ui/index.js | 2 +- .../Shapeshift/OptionsStep/optionsStep.js | 3 +- .../views/Account/Transfer/Details/details.js | 5 +-- .../Verification/GatherData/gatherData.js | 3 +- .../RecoveryPhrase/recoveryPhrase.js | 3 +- .../DetailsStep/detailsStep.js | 3 +- .../DeployContract/DetailsStep/detailsStep.js | 3 +- js/src/views/Settings/Views/views.js | 3 +- js/src/views/Vaults/VaultMeta/vaultMeta.js | 3 +- 15 files changed, 73 insertions(+), 22 deletions(-) create mode 100644 js/src/ui/Form/Checkbox/checkbox.js create mode 100644 js/src/ui/Form/Checkbox/index.js diff --git a/js/src/shell/Dapps/dapps.js b/js/src/shell/Dapps/dapps.js index b02a55e86..f92d0e8ac 100644 --- a/js/src/shell/Dapps/dapps.js +++ b/js/src/shell/Dapps/dapps.js @@ -15,13 +15,12 @@ // along with Parity. If not, see . import { omitBy } from 'lodash'; -import { Checkbox } from 'semantic-ui-react'; import { observer } from 'mobx-react'; import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; -import { Actionbar, Button, DappCard, Page, SectionList } from '~/ui'; +import { Actionbar, Button, Checkbox, DappCard, Page, SectionList } from '~/ui'; import { LockedIcon, VisibleIcon } from '~/ui/Icons'; import DappsVisible from '../DappsVisible'; diff --git a/js/src/shell/FirstRun/TnC/tnc.js b/js/src/shell/FirstRun/TnC/tnc.js index a8cc6623f..a15b36834 100644 --- a/js/src/shell/FirstRun/TnC/tnc.js +++ b/js/src/shell/FirstRun/TnC/tnc.js @@ -16,7 +16,8 @@ import React, { PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; -import { Checkbox } from 'semantic-ui-react'; + +import { Checkbox } from '~/ui'; import styles from '../firstRun.css'; diff --git a/js/src/ui/Features/features.js b/js/src/ui/Features/features.js index bcce90c93..de81426e2 100644 --- a/js/src/ui/Features/features.js +++ b/js/src/ui/Features/features.js @@ -14,11 +14,12 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import { Checkbox } from 'semantic-ui-react'; import { observer } from 'mobx-react'; import { List, ListItem } from 'material-ui/List'; import React, { Component } from 'react'; +import Checkbox from '~/ui/Form/Checkbox'; + import defaults, { MODES } from './defaults'; import Store from './store'; import styles from './features.css'; diff --git a/js/src/ui/Form/Checkbox/checkbox.js b/js/src/ui/Form/Checkbox/checkbox.js new file mode 100644 index 000000000..adf10592b --- /dev/null +++ b/js/src/ui/Form/Checkbox/checkbox.js @@ -0,0 +1,40 @@ +// Copyright 2015-2017 Parity Technologies (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +import React, { PropTypes } from 'react'; +import { Checkbox as SemCheckbox } from 'semantic-ui-react'; + +import { nodeOrStringProptype } from '~/util/proptypes'; + +export default function Checkbox ({ checked = false, className, label, onClick, style }) { + return ( + { label } } + onClick={ onClick } + style={ style } + /> + ); +} + +Checkbox.propTypes = { + checked: PropTypes.bool, + className: PropTypes.string, + label: nodeOrStringProptype(), + onClick: PropTypes.func, + style: PropTypes.object +}; diff --git a/js/src/ui/Form/Checkbox/index.js b/js/src/ui/Form/Checkbox/index.js new file mode 100644 index 000000000..d6b18d795 --- /dev/null +++ b/js/src/ui/Form/Checkbox/index.js @@ -0,0 +1,17 @@ +// Copyright 2015-2017 Parity Technologies (UK) Ltd. +// This file is part of Parity. + +// Parity is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. + +// Parity is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. + +// You should have received a copy of the GNU General Public License +// along with Parity. If not, see . + +export default from './checkbox'; diff --git a/js/src/ui/Form/index.js b/js/src/ui/Form/index.js index 8c8c7e1f2..32d824aab 100644 --- a/js/src/ui/Form/index.js +++ b/js/src/ui/Form/index.js @@ -15,6 +15,7 @@ // along with Parity. If not, see . export AddressSelect from './AddressSelect'; +export Checkbox from './Checkbox'; export DappUrlInput from './DappUrlInput'; export FileSelect from './FileSelect'; export FormWrap from './FormWrap'; diff --git a/js/src/ui/index.js b/js/src/ui/index.js index 3d24d98ca..cb547cf64 100644 --- a/js/src/ui/index.js +++ b/js/src/ui/index.js @@ -33,7 +33,7 @@ export DappIcon from './DappIcon'; export DappLink from './DappLink'; export Errors from './Errors'; export Features, { FEATURES, FeaturesStore } from './Features'; -export Form, { AddressSelect, DappUrlInput, FileSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput, VaultSelect } from './Form'; +export Form, { AddressSelect, Checkbox, DappUrlInput, FileSelect, FormWrap, Input, InputAddress, InputAddressSelect, InputChip, InputDate, InputInline, InputTime, Label, RadioButtons, Select, TypedInput, VaultSelect } from './Form'; export GasPriceEditor from './GasPriceEditor'; export GasPriceSelector from './GasPriceSelector'; export IconCache from './IconCache'; diff --git a/js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js b/js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js index 424f14461..e09373e12 100644 --- a/js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js +++ b/js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js @@ -15,12 +15,11 @@ // along with Parity. If not, see . import { MenuItem } from 'material-ui'; -import { Checkbox } from 'semantic-ui-react'; import { observer } from 'mobx-react'; import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; -import { Form, Input, Select, Warning } from '~/ui'; +import { Checkbox, Form, Input, Select, Warning } from '~/ui'; import Price from '../Price'; import { WARNING_NO_PRICE } from '../store'; diff --git a/js/src/views/Account/Transfer/Details/details.js b/js/src/views/Account/Transfer/Details/details.js index d2a384cb0..ecc102718 100644 --- a/js/src/views/Account/Transfer/Details/details.js +++ b/js/src/views/Account/Transfer/Details/details.js @@ -14,11 +14,10 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import { Checkbox } from 'semantic-ui-react'; import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; -import Form, { Input, InputAddressSelect, AddressSelect } from '~/ui/Form'; +import Form, { Input, InputAddressSelect, AddressSelect, Checkbox } from '~/ui/Form'; import { nullableProptype } from '~/util/proptypes'; import TokenSelect from './tokenSelect'; @@ -129,7 +128,7 @@ export default class Details extends Component { defaultMessage='advanced sending options' /> } - onCheck={ this.onCheckExtras } + onClick={ this.onCheckExtras } style={ CHECK_STYLE } /> diff --git a/js/src/views/Account/Verification/GatherData/gatherData.js b/js/src/views/Account/Verification/GatherData/gatherData.js index edf0fca64..12369359f 100644 --- a/js/src/views/Account/Verification/GatherData/gatherData.js +++ b/js/src/views/Account/Verification/GatherData/gatherData.js @@ -17,11 +17,10 @@ import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; import BigNumber from 'bignumber.js'; -import { Checkbox } from 'semantic-ui-react'; import { fromWei } from '@parity/api/util/wei'; -import { Form, Input } from '~/ui'; +import { Checkbox, Form, Input } from '~/ui'; import { DoneIcon, ErrorIcon, InfoIcon } from '~/ui/Icons'; import { nullableProptype } from '~/util/proptypes'; diff --git a/js/src/views/Accounts/CreateAccount/RecoveryPhrase/recoveryPhrase.js b/js/src/views/Accounts/CreateAccount/RecoveryPhrase/recoveryPhrase.js index 30abfec38..6e3923484 100644 --- a/js/src/views/Accounts/CreateAccount/RecoveryPhrase/recoveryPhrase.js +++ b/js/src/views/Accounts/CreateAccount/RecoveryPhrase/recoveryPhrase.js @@ -17,9 +17,8 @@ import { observer } from 'mobx-react'; import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; -import { Checkbox } from 'semantic-ui-react'; -import { Form, Input } from '~/ui'; +import { Checkbox, Form, Input } from '~/ui'; import PasswordStrength from '~/ui/Form/PasswordStrength'; import ChangeVault from '../ChangeVault'; diff --git a/js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js b/js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js index abe6e3583..9bb5ab3bc 100644 --- a/js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js +++ b/js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js @@ -15,11 +15,10 @@ // along with Parity. If not, see . import { MenuItem } from 'material-ui'; -import { Checkbox } from 'semantic-ui-react'; import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; -import { AddressSelect, Form, Input, Select, TypedInput } from '~/ui'; +import { AddressSelect, Checkbox, Form, Input, Select, TypedInput } from '~/ui'; import styles from '../executeContract.css'; diff --git a/js/src/views/Contracts/DeployContract/DetailsStep/detailsStep.js b/js/src/views/Contracts/DeployContract/DetailsStep/detailsStep.js index 57f15723d..7f0976d5d 100644 --- a/js/src/views/Contracts/DeployContract/DetailsStep/detailsStep.js +++ b/js/src/views/Contracts/DeployContract/DetailsStep/detailsStep.js @@ -17,9 +17,8 @@ import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; import { MenuItem } from 'material-ui'; -import { Checkbox } from 'semantic-ui-react'; -import { AddressSelect, Form, Input, Select } from '~/ui'; +import { AddressSelect, Checkbox, Form, Input, Select } from '~/ui'; import { validateAbi } from '~/util/validation'; import { parseAbiType } from '~/util/abi'; diff --git a/js/src/views/Settings/Views/views.js b/js/src/views/Settings/Views/views.js index 3ca9e69a6..771ecdf04 100644 --- a/js/src/views/Settings/Views/views.js +++ b/js/src/views/Settings/Views/views.js @@ -18,9 +18,8 @@ import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; -import { Checkbox } from 'semantic-ui-react'; -import { Container } from '~/ui'; +import { Checkbox, Container } from '~/ui'; import { toggleView } from '~/redux/providers/settings/actions'; diff --git a/js/src/views/Vaults/VaultMeta/vaultMeta.js b/js/src/views/Vaults/VaultMeta/vaultMeta.js index d28c2f69a..a87b57494 100644 --- a/js/src/views/Vaults/VaultMeta/vaultMeta.js +++ b/js/src/views/Vaults/VaultMeta/vaultMeta.js @@ -14,7 +14,6 @@ // You should have received a copy of the GNU General Public License // along with Parity. If not, see . -import { Checkbox } from 'semantic-ui-react'; import { observer } from 'mobx-react'; import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; @@ -22,7 +21,7 @@ import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { newError } from '~/redux/actions'; -import { Button, Form, Input, Portal, VaultCard } from '~/ui'; +import { Button, Checkbox, Form, Input, Portal, VaultCard } from '~/ui'; import PasswordStrength from '~/ui/Form/PasswordStrength'; import { CheckIcon, CloseIcon } from '~/ui/Icons';