aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui/labeled_switcher.tsx
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2017-12-18 16:15:12 +0800
committerFabio Berger <me@fabioberger.com>2017-12-18 16:15:12 +0800
commitdf9d3e3e16e5a00ea84369691c46a6e4a6a53049 (patch)
tree18dbcd29fa9f5dd41dc4c4072aaafe9e2026e5d6 /packages/website/ts/components/ui/labeled_switcher.tsx
parent98c01c2f8097c849c53d87a4946edfd4fba94495 (diff)
downloaddexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.tar.gz
dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.tar.zst
dexon-sol-tools-df9d3e3e16e5a00ea84369691c46a6e4a6a53049.zip
Consolidate all custom colors and material-ui colors into a colors module
Diffstat (limited to 'packages/website/ts/components/ui/labeled_switcher.tsx')
-rw-r--r--packages/website/ts/components/ui/labeled_switcher.tsx73
1 files changed, 0 insertions, 73 deletions
diff --git a/packages/website/ts/components/ui/labeled_switcher.tsx b/packages/website/ts/components/ui/labeled_switcher.tsx
deleted file mode 100644
index 80a8fbe94..000000000
--- a/packages/website/ts/components/ui/labeled_switcher.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
-import * as React from 'react';
-
-const CUSTOM_BLUE = '#63A6F1';
-
-interface LabeledSwitcherProps {
- labelLeft: string;
- labelRight: string;
- isLeftInitiallySelected: boolean;
- onLeftLabelClickAsync: () => Promise<boolean>;
- onRightLabelClickAsync: () => Promise<boolean>;
-}
-
-interface LabeledSwitcherState {
- isLeftSelected: boolean;
-}
-
-export class LabeledSwitcher extends React.Component<LabeledSwitcherProps, LabeledSwitcherState> {
- constructor(props: LabeledSwitcherProps) {
- super(props);
- this.state = {
- isLeftSelected: props.isLeftInitiallySelected,
- };
- }
- public render() {
- const isLeft = true;
- return (
- <div
- className="rounded clearfix"
- >
- {this.renderLabel(this.props.labelLeft, isLeft, this.state.isLeftSelected)}
- {this.renderLabel(this.props.labelRight, !isLeft, !this.state.isLeftSelected)}
- </div>
- );
- }
- private renderLabel(title: string, isLeft: boolean, isSelected: boolean) {
- const borderStyle = `2px solid ${isSelected ? '#4F8BCF' : '#DADADA'}`;
- const style = {
- cursor: 'pointer',
- backgroundColor: isSelected ? CUSTOM_BLUE : colors.grey200,
- color: isSelected ? 'white' : '#A5A5A5',
- boxShadow: isSelected ? `inset 0px 0px 4px #4083CE` : 'inset 0px 0px 4px #F7F6F6',
- borderTop: borderStyle,
- borderBottom: borderStyle,
- [isLeft ? 'borderLeft' : 'borderRight']: borderStyle,
- paddingTop: 12,
- paddingBottom: 12,
- };
- return (
- <div
- className={`col col-6 center p1 ${isLeft ? 'rounded-left' : 'rounded-right'}`}
- style={style}
- onClick={this.onLabelClickAsync.bind(this, isLeft)}
- >
- {title}
- </div>
- );
- }
- private async onLabelClickAsync(isLeft: boolean): Promise<void> {
- this.setState({
- isLeftSelected: isLeft,
- });
- const didSucceed = isLeft ?
- await this.props.onLeftLabelClickAsync() :
- await this.props.onRightLabelClickAsync();
- if (!didSucceed) {
- this.setState({
- isLeftSelected: !isLeft,
- });
- }
- }
-}