diff options
author | Remco Bloemen <remco@wicked.ventures> | 2018-11-09 01:32:40 +0800 |
---|---|---|
committer | Remco Bloemen <remco@wicked.ventures> | 2018-11-09 01:32:40 +0800 |
commit | d71362af993d3797dbdbfcac245ad57f0086bce3 (patch) | |
tree | 888826fe23c2d06d6c9191fb3a238e14f9fe4aac /packages/dev-tools-pages/ts/components/ui/button.tsx | |
parent | a5665a68756c905637c551fc48c9b7011a55c237 (diff) | |
parent | f6abc007ffb249e4bbf85b8a7a77309d43e0a147 (diff) | |
download | dexon-sol-tools-d71362af993d3797dbdbfcac245ad57f0086bce3.tar dexon-sol-tools-d71362af993d3797dbdbfcac245ad57f0086bce3.tar.gz dexon-sol-tools-d71362af993d3797dbdbfcac245ad57f0086bce3.tar.bz2 dexon-sol-tools-d71362af993d3797dbdbfcac245ad57f0086bce3.tar.lz dexon-sol-tools-d71362af993d3797dbdbfcac245ad57f0086bce3.tar.xz dexon-sol-tools-d71362af993d3797dbdbfcac245ad57f0086bce3.tar.zst dexon-sol-tools-d71362af993d3797dbdbfcac245ad57f0086bce3.zip |
Merge remote-tracking branch 'origin/development' into feature/utils/prettybignum
Diffstat (limited to 'packages/dev-tools-pages/ts/components/ui/button.tsx')
-rw-r--r-- | packages/dev-tools-pages/ts/components/ui/button.tsx | 59 |
1 files changed, 59 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx new file mode 100644 index 000000000..754eca40e --- /dev/null +++ b/packages/dev-tools-pages/ts/components/ui/button.tsx @@ -0,0 +1,59 @@ +import { darken, saturate } from 'polished'; +import * as React from 'react'; +import styled from 'styled-components'; + +/** + * AN EXAMPLE OF HOW TO CREATE A STYLED COMPONENT USING STYLED-COMPONENTS + * SEE: https://www.styled-components.com/docs/basics#coming-from-css + */ +export interface ButtonProps { + backgroundColor?: string; + borderColor?: string; + width?: string; + padding?: string; + type?: string; + isDisabled?: boolean; + onClick?: (event: React.MouseEvent<HTMLElement>) => void; + className?: string; +} + +const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( + <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}> + {children} + </button> +); + +const darkenOnHoverAmount = 0.1; +const darkenOnActiveAmount = 0.2; +const saturateOnFocusAmount = 0.2; +export const Button = styled(PlainButton)` + cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; + transition: background-color, opacity 0.5s ease; + padding: ${props => props.padding}; + border-radius: 3px; + outline: none; + width: ${props => props.width}; + background-color: ${props => (props.backgroundColor ? props.backgroundColor : 'none')}; + border: ${props => (props.borderColor ? `1px solid ${props.backgroundColor}` : 'none')}; + &:hover { + background-color: ${props => + !props.isDisabled ? darken(darkenOnHoverAmount, props.backgroundColor) : ''} !important; + } + &:active { + background-color: ${props => (!props.isDisabled ? darken(darkenOnActiveAmount, props.backgroundColor) : '')}; + } + &:disabled { + opacity: 0.5; + } + &:focus { + background-color: ${props => saturate(saturateOnFocusAmount, props.backgroundColor)}; + } +`; + +Button.defaultProps = { + backgroundColor: 'red', + width: 'auto', + isDisabled: false, + padding: '1em 2.2em', +}; +Button.displayName = 'Button'; |