Create ~/ui/Form/Checkbox component (#5543)

js/src/shell/Dapps/dapps.js

@@ -15,13 +15,12 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 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';

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';
 

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 <http://www.gnu.org/licenses/>.
 
-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';

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 <http://www.gnu.org/licenses/>.
+
+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 (
+    <SemCheckbox
+      checked={ checked }
+      className={ className }
+      label={ <label>{ label }</label> }
+      onClick={ onClick }
+      style={ style }
+    />
+  );
+}
+
+Checkbox.propTypes = {
+  checked: PropTypes.bool,
+  className: PropTypes.string,
+  label: nodeOrStringProptype(),
+  onClick: PropTypes.func,
+  style: PropTypes.object
+};

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 <http://www.gnu.org/licenses/>.
+
+export default from './checkbox';

js/src/ui/Form/index.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 export AddressSelect from './AddressSelect';
+export Checkbox from './Checkbox';
 export DappUrlInput from './DappUrlInput';
 export FileSelect from './FileSelect';
 export FormWrap from './FormWrap';

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';

js/src/views/Account/Shapeshift/OptionsStep/optionsStep.js

@@ -15,12 +15,11 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 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';

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 <http://www.gnu.org/licenses/>.
 
-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 }
             />
           </div>

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';
 

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';

js/src/views/Contract/ExecuteContract/DetailsStep/detailsStep.js

@@ -15,11 +15,10 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 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';
 

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';
 

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';
 

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 <http://www.gnu.org/licenses/>.
 
-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';