diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-12-04 08:47:52 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-06 18:58:37 +0800 |
commit | c47b42d7c177d360efa2e9639424fa495a22cc4e (patch) | |
tree | 07de053ffc745173a2ea40c5c79683d6db2b05db /packages/website/ts/pages/instant/fee_percentage_slider.tsx | |
parent | 3bdcf7857f59b18579dc9de159776b86c7b57bdf (diff) | |
download | dexon-0x-contracts-c47b42d7c177d360efa2e9639424fa495a22cc4e.tar dexon-0x-contracts-c47b42d7c177d360efa2e9639424fa495a22cc4e.tar.gz dexon-0x-contracts-c47b42d7c177d360efa2e9639424fa495a22cc4e.tar.bz2 dexon-0x-contracts-c47b42d7c177d360efa2e9639424fa495a22cc4e.tar.lz dexon-0x-contracts-c47b42d7c177d360efa2e9639424fa495a22cc4e.tar.xz dexon-0x-contracts-c47b42d7c177d360efa2e9639424fa495a22cc4e.tar.zst dexon-0x-contracts-c47b42d7c177d360efa2e9639424fa495a22cc4e.zip |
feat: create more dank slider
Diffstat (limited to 'packages/website/ts/pages/instant/fee_percentage_slider.tsx')
-rw-r--r-- | packages/website/ts/pages/instant/fee_percentage_slider.tsx | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/packages/website/ts/pages/instant/fee_percentage_slider.tsx b/packages/website/ts/pages/instant/fee_percentage_slider.tsx new file mode 100644 index 000000000..e57319ed5 --- /dev/null +++ b/packages/website/ts/pages/instant/fee_percentage_slider.tsx @@ -0,0 +1,81 @@ +import Slider from 'rc-slider'; +import 'rc-slider/assets/index.css'; +import * as React from 'react'; + +import { Text } from 'ts/components/ui/text'; +import { colors } from 'ts/style/colors'; +import { injectGlobal, styled } from 'ts/style/theme'; + +const SliderWithTooltip = (Slider as any).createSliderWithTooltip(Slider); + +injectGlobal` + .rc-slider-tooltip-inner { + box-shadow: none !important; + background-color: ${colors.white} !important; + border-radius: 4px !important; + padding: 3px 12px !important; + height: auto !important; + position: relative; + top: 7px; + &: after { + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(136, 183, 213, 0); + border-width: 6px; + bottom: 100%; + left: 100%; + border-bottom-color: ${colors.white}; + margin-left: -60%; + } + } +`; + +const StyledSlider = styled(SliderWithTooltip)` + .rc-slider-tooltip-inner { + background-color: ${colors.white}; + box-shadow: none; + padding: 3px; + } +`; + +export interface FeePercentageSliderProps { + value: number; + onChange: (value: number) => void; +} + +export class FeePercentageSlider extends React.Component<FeePercentageSliderProps> { + public render(): React.ReactNode { + return ( + <SliderWithTooltip + min={0} + max={0.05} + step={0.0025} + value={this.props.value} + onChange={this.props.onChange} + tipFormatter={this._feePercentageSliderFormatter} + tipProps={{ placement: 'bottom' }} + trackStyle={{ + backgroundColor: '#b4b4b4', + }} + railStyle={{ + backgroundColor: '#696969', + }} + handleStyle={{ + border: 'none', + boxShadow: 'none', + }} + activeDotStyle={{ + boxShadow: 'none', + border: 'none', + }} + /> + ); + } + private readonly _feePercentageSliderFormatter = (value: number): React.ReactNode => { + return <Text fontColor={colors.black} fontSize="14px" fontWeight={700}>{`${(value * 100).toFixed(2)}%`}</Text>; + }; +} |