add animation attribute to theme

Author: joelmeiller

src/components/Button.tsx

@@ -1,10 +1,12 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { CSSProperties } from 'styled-components'
-import { getThemeContext, AppTheme } from '../theme/theme'
+import { useDebouncedCallback } from 'use-debounce/lib'
+import { P } from '../html'
+import { AppTheme, getThemeContext } from '../theme/theme'
 import { createStyled, useCSSStyles, useInlineStyle } from '../theme/util'
-import { IconProps, Icon } from './Icon'
+import { Icon, IconProps } from './Icon'
 import { Loading } from './Loading'
-import { P } from '../html'
+
 
 const ButtonWrapper = createStyled('button')
 
@@ -35,21 +37,39 @@ export type Props = {
 }
 
 export const Button = (props: Props) => {
-  const { disabled } = props
+  /* Style hooks */
   const type = props.type || ButtonType.Secondary
   const theme = React.useContext(getThemeContext())
 
   const getStyle = useInlineStyle(theme, 'button')(props.style)
   const getCSSStyle = useCSSStyles(theme, 'button')(props.style)
 
+  /* Click handler */
+  const [isClicked, setIsClicked] = useState(false)
+
+  const handleClicked =
+    props.disabled || props.loading
+      ? undefined
+      : () => {
+          setIsClicked(true)
+          onClicked()
+        }
+
+  const onClicked = useDebouncedCallback(() => {
+    props.onClick()
+    setIsClicked(false)
+  }, 300)
+
   return (
     <ButtonWrapper
+      className={isClicked ? 'animate' : ''}
       data-test-id={props.dataTestId}
-      onClick={disabled || props.loading ? undefined : props.onClick}
-      cssStyles={getCSSStyle(['common', mapTypeToStyleKey[type]], {
-        ...(disabled ? { opacity: 0.4, pointerEvents: 'none' } : {}),
-        ...(props.override || {}),
-      })}
+      onClick={handleClicked}
+      disabled={props.disabled}
+      cssStyles={getCSSStyle(
+        ['common', mapTypeToStyleKey[type]],
+        props.override,
+      )}
     >
       {props.icon && <Icon {...props.icon} />}
       <P

src/theme/theme.ts

@@ -8,6 +8,7 @@ export type CSSProperties = sc_CSSProperties & {
   ':disabled'?: CSSProperties
   ':readonly'?: CSSProperties
   '@media-mobile'?: CSSProperties
+  '@animation'?: string
 }
 
 export type AppTheme = {

src/theme/util.ts

@@ -1,5 +1,5 @@
+import styled, { css, CSSProperties } from 'styled-components'
 import { AppTheme, MediaQuery } from './theme'
-import styled, { CSSProperties, css } from 'styled-components'
 
 export const omitKeys = <T extends { [k: string]: unknown }>(
   obj: T,
@@ -20,14 +20,24 @@ export const dynamicStyleKeys = [
   '@media-mobile',
 ]
 
-const nonPixelKeys = ['flexGrow', 'flexShrink', 'lineHeight', 'fontWeight']
+const animationKeys = ['@animation']
 
-export const mapStylesToCSS = style =>
+const nonPixelKeys = [
+  'flexGrow',
+  'flexShrink',
+  'fontWeight',
+  'lineHeight',
+  'opacity',
+]
+
+export const mapStylesToCSS = (style) =>
   Object.entries(style)
     .map(
       ([cssKey, cssValue]) =>
-        `${cssKey.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)}: ${
-          isNaN(cssValue as any) || nonPixelKeys.includes(cssKey) ? cssValue : `${cssValue}px`
+        `${cssKey.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)}: ${
+          isNaN(cssValue as any) || nonPixelKeys.includes(cssKey)
+            ? cssValue
+            : `${cssValue}px`
         };`,
     )
     .join(' ')
@@ -36,15 +46,6 @@ export const mapStylesToCSS = style =>
  * Creates a styled component with support for pseudo elements and media query styles provided from a style object
  */
 
-export type StyledCSSProperties = {
-  css: CSSProperties
-  ':hover'?: CSSProperties
-  ':focus'?: CSSProperties
-  ':invalid'?: CSSProperties
-  ':readonly'?: CSSProperties
-  ':disabled'?: CSSProperties
-  '@media-mobile'?: CSSProperties
-}
 export const createStyled = (type: any) =>
   typeof type === 'string'
     ? styled[type]`
@@ -93,10 +94,14 @@ export const getUseCSSStyles = <Theme>() => <C extends keyof Theme>(
   elementKeys: Array<K> | K,
   internalOverride?: CSSProperties,
 ): string => {
+  const keys = Array.isArray(elementKeys)
+    ? elementKeys
+    : ([elementKeys] as Array<K>)
+
   const styles = {
     css: omitKeys(
       {
-        ...((Array.isArray(elementKeys) ? elementKeys : [elementKeys]).reduce(
+        ...(keys.reduce(
           (obj, elementKey) => ({
             ...obj,
             ...theme[componentKey][elementKey],
@@ -106,12 +111,12 @@ export const getUseCSSStyles = <Theme>() => <C extends keyof Theme>(
         ) as any),
         ...(internalOverride || {}),
       },
-      dynamicStyleKeys as any,
+      dynamicStyleKeys.concat(animationKeys) as any,
     ),
     ...dynamicStyleKeys.reduce(
       (obj, k) => ({
         ...obj,
-        [k]: (Array.isArray(elementKeys) ? elementKeys : [elementKeys]).reduce(
+        [k]: keys.reduce(
           (obj, elementKey) => ({
             ...obj,
             ...(theme[componentKey][elementKey][k] || {}),
@@ -126,6 +131,14 @@ export const getUseCSSStyles = <Theme>() => <C extends keyof Theme>(
     ),
   }
 
+  const animationKey = keys.find(
+    (elementKey) => !!theme[componentKey][elementKey]['@animation'],
+  )
+  let animation
+  if (animationKey) {
+    animation = theme[componentKey][animationKey]['@animation']
+  }
+
   const cssStyles = `
     ${mapStylesToCSS(styles.css || {})}
 
@@ -152,6 +165,8 @@ export const getUseCSSStyles = <Theme>() => <C extends keyof Theme>(
     @media ${MediaQuery.Mobile} {
       ${mapStylesToCSS(styles['@media-mobile'] || {})}
     }
+
+    ${animation ? `&.animate { animation: ${animation}; }` : ''}
   `
 
   return cssStyles