diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-06-15 09:19:07 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-06-15 09:19:07 +0800 |
commit | d0a3779091661cfa099ec84f12e5d944287d1e3f (patch) | |
tree | ec7b641895aa497d8b1d449d010c61f5750406db /packages/website/ts/components/ui | |
parent | e7eb220c503118631a6b23071c71b4b55df5b5cf (diff) | |
download | dexon-sol-tools-d0a3779091661cfa099ec84f12e5d944287d1e3f.tar dexon-sol-tools-d0a3779091661cfa099ec84f12e5d944287d1e3f.tar.gz dexon-sol-tools-d0a3779091661cfa099ec84f12e5d944287d1e3f.tar.bz2 dexon-sol-tools-d0a3779091661cfa099ec84f12e5d944287d1e3f.tar.lz dexon-sol-tools-d0a3779091661cfa099ec84f12e5d944287d1e3f.tar.xz dexon-sol-tools-d0a3779091661cfa099ec84f12e5d944287d1e3f.tar.zst dexon-sol-tools-d0a3779091661cfa099ec84f12e5d944287d1e3f.zip |
Add Pointer component
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r-- | packages/website/ts/components/ui/pointer.tsx | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx new file mode 100644 index 000000000..dcd1b8e54 --- /dev/null +++ b/packages/website/ts/components/ui/pointer.tsx @@ -0,0 +1,68 @@ +import { colors } from '@0xproject/react-shared'; +import { Island } from 'ts/components/ui/island'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; + +export type PointerDirection = 'top' | 'right' | 'bottom' | 'left'; + +export interface PointerProps { + className?: string; + color?: string; + size?: number; + direction: PointerDirection; +} + +const PlainPointer: React.StatelessComponent<PointerProps> = props => <div {...props}/>; + +const positionToCss = (props: PointerProps) => { + const position = { + top: `bottom: 100%; left: 50%;`, + right: `left: 100%; top: 50%;`, + bottom: `top: 100%; left: 50%;`, + left: `right: 100%; top: 50%;`, + }[props.direction]; + + const borderColorSide = { + top: 'border-bottom-color', + right: 'border-left-color', + bottom: 'border-top-color', + left: 'border-right-color', + }[props.direction]; + const border = `${borderColorSide}: ${props.color};`; + const marginSide = { + top: 'margin-left', + right: 'margin-top', + bottom: 'margin-left', + left: 'margin-top', + }[props.direction]; + const margin = `${marginSide}: -${props.size}px`; + return { + position, + border, + margin, + }; +}; + +export const Pointer = styled(PlainPointer)` + position: relative; + &:after { + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(136, 183, 213, 0); + border-width: ${props => `${props.size}px`}; + ${props => positionToCss(props).position} + ${props => positionToCss(props).border} + ${props => positionToCss(props).margin} + } +`; + +Pointer.defaultProps = { + color: colors.white, + size: 16, +}; + +Pointer.displayName = 'Pointer'; |