diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-11-02 07:13:43 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-02 07:13:43 +0800 |
commit | 695d1453ac941fd7ef79ff1c4a255630eb76c764 (patch) | |
tree | 8e18b543df236ce7ef00d33770ed71f91e6b7d67 /packages/instant/src/components/ui/icon.tsx | |
parent | ce19ec207b07696a675bdadf71ea39d933ea2715 (diff) | |
parent | 7c30fd4b2da83c9522f9137f4d18e6c308f2b66f (diff) | |
download | dexon-sol-tools-695d1453ac941fd7ef79ff1c4a255630eb76c764.tar dexon-sol-tools-695d1453ac941fd7ef79ff1c4a255630eb76c764.tar.gz dexon-sol-tools-695d1453ac941fd7ef79ff1c4a255630eb76c764.tar.bz2 dexon-sol-tools-695d1453ac941fd7ef79ff1c4a255630eb76c764.tar.lz dexon-sol-tools-695d1453ac941fd7ef79ff1c4a255630eb76c764.tar.xz dexon-sol-tools-695d1453ac941fd7ef79ff1c4a255630eb76c764.tar.zst dexon-sol-tools-695d1453ac941fd7ef79ff1c4a255630eb76c764.zip |
Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/instant/maker-asset-datas-interface
Diffstat (limited to 'packages/instant/src/components/ui/icon.tsx')
-rw-r--r-- | packages/instant/src/components/ui/icon.tsx | 76 |
1 files changed, 55 insertions, 21 deletions
diff --git a/packages/instant/src/components/ui/icon.tsx b/packages/instant/src/components/ui/icon.tsx index 61b382760..574cb26b7 100644 --- a/packages/instant/src/components/ui/icon.tsx +++ b/packages/instant/src/components/ui/icon.tsx @@ -1,5 +1,8 @@ +import * as _ from 'lodash'; import * as React from 'react'; +import { styled } from '../../style/theme'; + type svgRule = 'evenodd' | 'nonzero' | 'inherit'; interface IconInfo { viewBox: string; @@ -13,11 +16,19 @@ interface IconInfo { strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit'; } interface IconInfoMapping { + closeX: IconInfo; failed: IconInfo; success: IconInfo; chevron: IconInfo; } const ICONS: IconInfoMapping = { + closeX: { + viewBox: '0 0 11 11', + fillRule: 'evenodd', + clipRule: 'evenodd', + path: + 'M10.45 10.449C10.7539 10.1453 10.7539 9.65282 10.45 9.34909L6.60068 5.49999L10.45 1.65093C10.7538 1.3472 10.7538 0.854765 10.45 0.551038C10.1462 0.24731 9.65378 0.24731 9.34995 0.551038L5.50058 4.40006L1.65024 0.549939C1.34641 0.246212 0.853973 0.246212 0.550262 0.549939C0.246429 0.853667 0.246429 1.34611 0.550262 1.64983L4.40073 5.49995L0.55014 9.35019C0.246307 9.65392 0.246307 10.1464 0.55014 10.4501C0.853851 10.7538 1.34628 10.7538 1.65012 10.4501L5.5007 6.59987L9.35007 10.449C9.6539 10.7527 10.1463 10.7527 10.45 10.449Z', + }, failed: { viewBox: '0 0 34 34', fillRule: 'evenodd', @@ -44,33 +55,56 @@ const ICONS: IconInfoMapping = { }; export interface IconProps { + className?: string; width: number; height?: number; color?: string; icon: keyof IconInfoMapping; + onClick?: (event: React.MouseEvent<HTMLElement>) => void; + padding?: string; } -export const Icon: React.SFC<IconProps> = props => { +const PlainIcon: React.SFC<IconProps> = props => { const iconInfo = ICONS[props.icon]; - return ( - <svg - width={props.width} - height={props.height} - viewBox={iconInfo.viewBox} - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - <path - d={iconInfo.path} - fill={props.color} - fillRule={iconInfo.fillRule || 'nonzero'} - clipRule={iconInfo.clipRule || 'nonzero'} - stroke={iconInfo.stroke} - strokeOpacity={iconInfo.strokeOpacity} - strokeWidth={iconInfo.strokeWidth} - strokeLinecap={iconInfo.strokeLinecap} - strokeLinejoin={iconInfo.strokeLinejoin} - /> - </svg> + <div onClick={props.onClick} className={props.className}> + <svg + width={props.width} + height={props.height} + viewBox={iconInfo.viewBox} + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d={iconInfo.path} + fill={props.color} + fillRule={iconInfo.fillRule || 'nonzero'} + clipRule={iconInfo.clipRule || 'nonzero'} + stroke={iconInfo.stroke} + strokeOpacity={iconInfo.strokeOpacity} + strokeWidth={iconInfo.strokeWidth} + strokeLinecap={iconInfo.strokeLinecap} + strokeLinejoin={iconInfo.strokeLinejoin} + /> + </svg> + </div> ); }; + +export const Icon = styled(PlainIcon)` + cursor: ${props => (!_.isUndefined(props.onClick) ? 'pointer' : 'default')}; + transition: opacity 0.5s ease; + padding: ${props => props.padding}; + opacity: ${props => (!_.isUndefined(props.onClick) ? 0.7 : 1)}; + &:hover { + opacity: 1; + } + &:active { + opacity: 1; + } +`; + +Icon.defaultProps = { + padding: '0em 0em', +}; + +Icon.displayName = 'Icon'; |