ghost-portal/packages/ui-app/src/Toggle.tsx
kwingram25 43cb425b56 Vote for council candidates (#1427)
* Change council to collective/elections

* fix proposal type

* package

* Submit candidacy

* update index

* Minor eslint cleanups

* rename back to council

* blank line

* council voting

* interface

* Cleanup

* tslint

* retract vote

* travis ci

* rv console

* SetIndex type

* types.ts SetIndex import

* bump api & fix retractVoter
2019-07-26 12:21:05 +02:00

60 lines
1.4 KiB
TypeScript

// Copyright 2017-2019 @polkadot/ui-app authors & contributors
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import { BareProps } from './types';
import React from 'react';
import SUICheckbox from 'semantic-ui-react/dist/commonjs/modules/Checkbox';
import styled from 'styled-components';
interface Props extends BareProps {
asSwitch?: boolean;
defaultValue?: boolean;
isDisabled?: boolean;
label: React.ReactNode;
onChange?: (isChecked: boolean) => void;
value?: boolean;
}
class Toggle extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, asSwitch, defaultValue, isDisabled, value, label } = this.props;
return (
<div className={className}>
<SUICheckbox
checked={value}
disabled={isDisabled}
defaultChecked={defaultValue}
onChange={this.onChange}
toggle={asSwitch}
/>
<label>{label}</label>
</div>
);
}
private onChange = (_: React.FormEvent<HTMLInputElement>, { checked }: any): void => {
const { onChange } = this.props;
onChange && onChange(checked);
}
}
export default styled(Toggle)`
> label {
display: inline-block;
margin-left: 0.5rem;
}
> label,
> .ui.checkbox {
vertical-align: middle;
}
.ui.checkbox + label {
color: rgba(78, 78, 78, 0.75);
}
`;