diff options
Diffstat (limited to 'packages/website/ts/components/ui/pointer.tsx')
-rw-r--r-- | packages/website/ts/components/ui/pointer.tsx | 72 |
1 files changed, 0 insertions, 72 deletions
diff --git a/packages/website/ts/components/ui/pointer.tsx b/packages/website/ts/components/ui/pointer.tsx deleted file mode 100644 index c97b1e700..000000000 --- a/packages/website/ts/components/ui/pointer.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { colors } from '@0x/react-shared'; -import * as React from 'react'; -import { styled } from 'ts/style/theme'; - -export enum PointerDirection { - Top = 'top', - Right = 'right', - Bottom = 'bottom', - Left = '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'; |