Merge pull request #81 from dmapper/fix-div

[ui -> Div] add opacity to bg on press
dmapper · Feb 17, 2020 · 4e39c29 · 4e39c29
2 parents c1fd3e6 + 065c0d8
commit 4e39c29
Show file tree

Hide file tree

Showing 23 changed files with 40 additions and 35 deletions.
diff --git a/packages/ui/components/Avatar/index.js b/packages/ui/components/Avatar/index.js
@@ -45,7 +45,7 @@ Avatar.defaultProps = {
 }
 
 Avatar.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   url: propTypes.string,
   size: propTypes.oneOf(['xxl', 'xl', 'l', 'm', 's', 'xs']),
   status: propTypes.oneOf(['online', 'away']),

diff --git a/packages/ui/components/Br/index.js b/packages/ui/components/Br/index.js
@@ -19,7 +19,7 @@ Br.defaultProps = {
 }
 
 Br.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   half: propTypes.bool,
   lines: propTypes.number
 

diff --git a/packages/ui/components/Button/index.js b/packages/ui/components/Button/index.js
@@ -119,7 +119,7 @@ Button.defaultProps = {
 }
 
 Button.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   color: propTypes.string,
   children: propTypes.node,
   disabled: propTypes.bool,

diff --git a/packages/ui/components/Card/index.js b/packages/ui/components/Card/index.js
@@ -28,7 +28,7 @@ Card.defaultProps = {
 }
 
 Card.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   children: propTypes.node,
   level: propTypes.oneOf(SHADOWS.map((key, index) => index).slice(1)),
   onPress: propTypes.func

diff --git a/packages/ui/components/Collapse/index.js b/packages/ui/components/Collapse/index.js
@@ -34,7 +34,7 @@ Collapse.defaultProps = {
 }
 
 Collapse.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   children: propTypes.node.isRequired,
   title: propTypes.string.isRequired,
   open: propTypes.bool

diff --git a/packages/ui/components/Div/index.js b/packages/ui/components/Div/index.js
@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react'
+import { View, TouchableOpacity } from 'react-native'
 import propTypes from 'prop-types'
-import { TouchableOpacity, View } from 'react-native'
 import { observer } from 'startupjs'
 import config from '../../config/rootConfig'
 import { colorToRGBA } from '../../config/helpers'
@@ -25,21 +25,26 @@ function Div ({
   const _backgroundColor = backgroundColor || (level ? colors.white : null)
 
   const [hover, setHover] = useState()
+  const [active, setActive] = useState()
   const wrapperExtraStyles = useMemo(() => {
     if (!_backgroundColor) return {}
-    if (!hover) return { backgroundColor: _backgroundColor }
-    return { backgroundColor: colorToRGBA(_backgroundColor, hoverOpacity) }
-  }, [hover, _backgroundColor])
+    if (active) {
+      return {
+        backgroundColor: colorToRGBA(_backgroundColor, activeStateOpacity)
+      }
+    }
+    if (hover) {
+      return { backgroundColor: colorToRGBA(_backgroundColor, hoverOpacity) }
+    }
+    return { backgroundColor: _backgroundColor }
+  }, [hover, active, _backgroundColor])
 
   const isClickable = typeof onPress === 'function' && !disabled
-  let Wrapper = isClickable
-    ? TouchableOpacity
-    : View
 
   const extraProps = {}
 
   if (isClickable) {
-    extraProps.activeOpacity = activeStateOpacity
+    extraProps.activeOpacity = 1
     extraProps.onPress = onPress
 
     extraProps.onMouseEnter = (...args) => {
@@ -50,8 +55,13 @@ function Div ({
       setHover()
       onMouseLeave && onMouseLeave(...args)
     }
+
+    extraProps.onPressIn = () => setActive(true)
+    extraProps.onPressOut = () => setActive()
   }
 
+  const Wrapper = isClickable ? TouchableOpacity : View
+
   return pug`
     Wrapper.root(
       style=[style, SHADOWS[level], wrapperExtraStyles]
@@ -71,7 +81,7 @@ Div.defaultProps = {
 }
 
 Div.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   children: propTypes.node,
   backgroundColor: propTypes.string,
   disabled: propTypes.bool,

diff --git a/packages/ui/components/Div/index.styl b/packages/ui/components/Div/index.styl
@@ -1,5 +0,0 @@
-.root
-  &.clickable
-      +web()
-        &:active
-          opacity $UI.Div.activeStateOpacity !important

diff --git a/packages/ui/components/Drawer/index.js b/packages/ui/components/Drawer/index.js
@@ -59,7 +59,7 @@ Drawer.defaultProps = {
 }
 
 Drawer.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   children: propTypes.node,
   backgroundColor: propTypes.string,
   position: propTypes.oneOf(Object.values(DrawerLayout.positions)),

diff --git a/packages/ui/components/Headers/index.js b/packages/ui/components/Headers/index.js
@@ -26,7 +26,7 @@ function generateTag (tag) {
   }
 
   header.propTypes = {
-    style: propTypes.object,
+    style: propTypes.oneOfType([propTypes.object, propTypes.array]),
     children: propTypes.node,
     bold: propTypes.bool
   }

diff --git a/packages/ui/components/Hr/index.js b/packages/ui/components/Hr/index.js
@@ -25,7 +25,7 @@ Hr.defaultProps = {
 }
 
 Hr.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   children: propTypes.node,
   align: propTypes.oneOf(['left', 'center', 'right'])
 }

diff --git a/packages/ui/components/Icon/index.js b/packages/ui/components/Icon/index.js
@@ -41,7 +41,7 @@ Icon.defaultProps = {
 }
 
 Icon.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   icon: propTypes.object,
   color: propTypes.string,
   size: propTypes.oneOf(Object.keys(SIZES)),

diff --git a/packages/ui/components/Layout/index.js b/packages/ui/components/Layout/index.js
@@ -14,7 +14,7 @@ function Layout ({ style, children }) {
 }
 
 Layout.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   children: propTypes.node
 }
 

diff --git a/packages/ui/components/Modal/index.js b/packages/ui/components/Modal/index.js
@@ -10,7 +10,7 @@ Modal.defaultProps = {
 }
 
 Modal.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   children: propTypes.node,
   visible: propTypes.bool,
   title: propTypes.string,

diff --git a/packages/ui/components/Progress/index.js b/packages/ui/components/Progress/index.js
@@ -49,7 +49,7 @@ Progress.defaultProps = {
 }
 
 Progress.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   value: propTypes.number,
   label: propTypes.string,
   variant: propTypes.oneOf(['full', 'compact'])

diff --git a/packages/ui/components/Rating/index.js b/packages/ui/components/Rating/index.js
@@ -33,7 +33,7 @@ Rating.defaultProps = {
 }
 
 Rating.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   value: propTypes.number,
   readonly: propTypes.bool,
   onChange: propTypes.func

diff --git a/packages/ui/components/Row/index.js b/packages/ui/components/Row/index.js
@@ -24,7 +24,7 @@ function Row ({
 }
 
 Row.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   children: propTypes.node,
   wrap: propTypes.bool,
   reverse: propTypes.bool,

diff --git a/packages/ui/components/Sidebar/index.js b/packages/ui/components/Sidebar/index.js
@@ -96,7 +96,7 @@ Sidebar.defaultProps = {
 }
 
 Sidebar.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   children: propTypes.node,
   backgroundColor: propTypes.string,
   position: propTypes.oneOf(['left', 'right']),

diff --git a/packages/ui/components/SmartSidebar/index.js b/packages/ui/components/SmartSidebar/index.js
@@ -64,7 +64,7 @@ SmartSidebar.defaultProps = {
 }
 
 SmartSidebar.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   children: propTypes.node,
   backgroundColor: propTypes.string,
   fixedLayoutBreakpoint: propTypes.number,

diff --git a/packages/ui/components/Span/index.js b/packages/ui/components/Span/index.js
@@ -29,7 +29,7 @@ Span.defaultProps = {
 }
 
 Span.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   children: propTypes.node,
   size: propTypes.oneOf(['xxl', 'xl', 'l', 'm', 's', 'xs']),
   bold: propTypes.bool,

diff --git a/packages/ui/components/StatusBar/index.js b/packages/ui/components/StatusBar/index.js
@@ -31,7 +31,7 @@ function StatusBar ({
 }
 
 StatusBar.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   children: propTypes.node,
   backgroundColor: propTypes.string
 }

diff --git a/packages/ui/components/Tag/index.js b/packages/ui/components/Tag/index.js
@@ -56,7 +56,7 @@ Tag.defaultProps = {
 }
 
 Tag.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   children: propTypes.node,
   color: propTypes.string,
   textColor: propTypes.string,

diff --git a/packages/ui/components/TextInput/index.js b/packages/ui/components/TextInput/index.js
@@ -71,7 +71,7 @@ TextInput.defaultProps = {
 }
 
 TextInput.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   label: propTypes.string,
   placeholder: propTypes.string.isRequired,
   value: propTypes.string,

diff --git a/packages/ui/components/User/index.js b/packages/ui/components/User/index.js
@@ -72,7 +72,7 @@ User.defaultProps = {
 }
 
 User.propTypes = {
-  style: propTypes.object,
+  style: propTypes.oneOfType([propTypes.object, propTypes.array]),
   avatarUrl: propTypes.string,
   description: propTypes.string,
   name: propTypes.string.isRequired,