react-native-material-ui - npm Package Compare versions

Comparing version 1.22.3 to 1.22.4

docs/Toolbar.md

@@ -19,2 +19,9 @@ # [Toolbar](https://material.google.com/components/toolbars.html)
         }}
+        rightElement={{
+            menu: {
+                icon: "more-vert",
+                labels: ["item 1", "item 2"]
+            }
+        }}
+        onRightElementPress={ (label) => { console.log(label) }}
       />
@@ -21,0 +28,0 @@ }

package.json

 {
   "name": "react-native-material-ui",
-  "version": "1.22.3",
+  "version": "1.22.4",
   "description": "React Native Material Design Components",
@@ -37,3 +37,3 @@ "main": "./index.js",
   "dependencies": {
-    "color": "2.0.1",
+    "color": "3.0.0",
     "lodash.merge": "^4.0.0",
@@ -40,0 +40,0 @@ "prop-types": "^15.5.10",

src/BottomNavigation/BottomNavigationAction.react.js

@@ -115,3 +115,3 @@ /* eslint-disable import/no-unresolved, import/extensions */
     render() {
-        const { onPress, testID } = this.props;
+        const { onPress, testID, disabled } = this.props;
 
@@ -121,3 +121,3 @@ const styles = getStyles(this.props, this.context);
         return (
-            <RippleFeedback testID={testID} onPress={onPress}>
+            <RippleFeedback disabled={disabled} testID={testID} onPress={onPress}>
                 <View style={styles.container} pointerEvents="box-only">
@@ -124,0 +124,0 @@ {this.renderIcon(styles)}

src/Dialog/Dialog.react.js

@@ -40,15 +40,25 @@ /* eslint-disable import/no-unresolved, import/extensions */
 class Dialog extends PureComponent {
-    render() {
-        const { onPress, children } = this.props;
-
+    renderContent = () => {
+        const { children } = this.props;
         const styles = getStyles(this.props, this.context);
 
         return (
-            <RippleFeedback onPress={onPress}>
-                <View style={styles.container}>
-                    {children}
-                </View>
-            </RippleFeedback>
+            <View style={styles.container} pointerEvents="auto">
+                {children}
+            </View>
         );
     }
+    render() {
+        const { onPress } = this.props;
+
+        if (onPress) {
+            return (
+                <RippleFeedback onPress={onPress}>
+                    {this.renderContent()}
+                </RippleFeedback>
+            );
+        }
+
+        return this.renderContent();
+    }
 }
@@ -55,0 +65,0 @@

src/IconToggle/IconToggle.react.js

@@ -195,3 +195,3 @@ /* eslint-disable import/no-unresolved, import/extensions */
         // https://material.google.com/components/buttons.html#buttons-toggle-buttons
-        this.maxOpacity = color.dark() ? 0.12 : 0.30;
+        this.maxOpacity = color.isDark() ? 0.12 : 0.30;
 
@@ -198,0 +198,0 @@ const top = (containerSize - rippleSize) / 2;

src/index.js

@@ -5,2 +5,3 @@ import * as COLOR from './styles/colors';
 export { default as ThemeProvider } from './styles/ThemeProvider.react';
+export { default as getPlatformElevation } from './styles/getPlatformElevation';
 export { default as RippleFeedback } from './RippleFeedback';
@@ -7,0 +8,0 @@ // components

src/RippleFeedback/RippleFeedbackAndroid.react.js

@@ -20,2 +20,5 @@ /* eslint-disable import/no-unresolved, import/extensions */
 
+const isRippleVisible = props =>
+    props.onPress || props.onLongPress || props.onPressIn || props.onPressOut;
+
 class RippleFeedback extends PureComponent {
@@ -27,2 +30,5 @@ render() {
 
+        if (!isRippleVisible(this.props)) {
+            return children;
+        }
         // we need to get underlayColor as props to this RippleFeedback component, because we can't
@@ -29,0 +35,0 @@ // TouchableNativeFeedback.Ripple function on iOS devices

src/RippleFeedback/RippleFeedbackIOS.react.js

@@ -63,2 +63,5 @@ /* eslint-disable import/no-unresolved, import/extensions */
 
+const isRippleVisible = props =>
+    props.onPress || props.onLongPress || props.onPressIn || props.onPressOut;
+
 class RippleFeedbackIOS extends PureComponent {
@@ -69,3 +72,3 @@ constructor(props, context) {
         // https://material.google.com/components/buttons.html#buttons-toggle-buttons
-        const maxOpacity = Color(props.color).dark() ? 0.12 : 0.30;
+        const maxOpacity = Color(props.color).isDark() ? 0.12 : 0.30;
 
@@ -271,2 +274,6 @@ this.state = {
 
+        if (!isRippleVisible(this.props)) {
+            return children;
+        }
+
         const parent = React.Children.only(children);
@@ -273,0 +280,0 @@

src/Snackbar/Snackbar.react.js

 /* eslint-disable import/no-unresolved, import/extensions */
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Text, Animated, Easing, StyleSheet } from 'react-native';
+import { Text, Animated, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
 import { ViewPropTypes } from '../utils';
@@ -52,2 +52,10 @@
     }),
+    /**
+    * The function to execute when the snackbar's height changes.
+    */
+    onHeightChange: PropTypes.func,
+    /**
+    * Callback for when the snackbar is pressed.
+    */
+    onPress: PropTypes.func,
 };
@@ -62,2 +70,4 @@ const defaultProps = {
     button: {},
+    onHeightChange: null,
+    onPress: null,
 };
@@ -78,2 +88,7 @@ const contextTypes = {
         ],
+        content: [
+            snackbar.content,
+            local.content,
+            props.style.content,
+        ],
         message: [
@@ -94,9 +109,18 @@ snackbar.message,
         super(props, context);
+
+        this.onTextLayout = this.onTextLayout.bind(this);
+
         const styles = getStyles(props, context);
+
         this.state = {
+            bottomPosition: 0,
             styles,
-            moveAnimated: new Animated.Value(StyleSheet.flatten(styles.container).height),
+            visible: props.visible,
         };
     }
 
+    componentWillMount() {
+        this.visibility = new Animated.Value(this.props.visible ? 1 : 0);
+    }
+
     componentWillReceiveProps(nextProps) {
@@ -106,14 +130,20 @@ const { style, visible, bottomNavigation } = this.props;
         if (nextProps.style !== style) {
-            this.setState({ styles: getStyles(nextProps, this.context) });
+            this.setState({ styles: getStyles(this.props, this.context) });
         }
 
         if (nextProps.visible !== visible) {
-            if (nextProps.visible === true) {
-                this.show(nextProps.bottomNavigation);
-                this.setHideTimer();
-            } else {
-                this.hide();
+            if (nextProps.visible) {
+                this.setState({ visible: true });
+                this.setHideTimer(nextProps);
             }
-        } else if ((nextProps.bottomNavigation !== bottomNavigation)
-        && nextProps.visible) {
+
+            Animated.timing(this.visibility, {
+                toValue: nextProps.visible ? 1 : 0,
+                duration: 300,
+            }).start(() => {
+                this.setState({ visible: nextProps.visible });
+            });
+        }
+
+        if (nextProps.bottomNavigation !== bottomNavigation) {
             this.move(nextProps.bottomNavigation);
@@ -127,5 +157,14 @@ }
 
-    setHideTimer() {
-        const { timeout, onRequestClose } = this.props;
+    onTextLayout({ nativeEvent: { layout: { height } } }) {
+        const { message, onHeightChange } = this.props;
+        const { styles } = this.state;
 
+        if (message && onHeightChange) {
+            onHeightChange(height + (StyleSheet.flatten(styles.message).marginVertical * 2));
+        }
+    }
+
+    setHideTimer(props) {
+        const { timeout, onRequestClose } = props;
+
         if (timeout > 0) {
@@ -139,43 +178,8 @@ clearTimeout(this.hideTimer);
 
-    show = (bottomNavigation) => {
-        const { container } = this.context.uiTheme.bottomNavigation;
-
-        let toValue = 0;
-        if (bottomNavigation) {
-            toValue = -StyleSheet.flatten(container).height;
-        }
-
-        Animated.timing(this.state.moveAnimated, {
-            toValue,
-            duration: 225,
-            easing: Easing.bezier(0.0, 0.0, 0.2, 1),
-            useNativeDriver: true,
-        }).start();
-    }
-
-    hide = () => {
-        const { moveAnimated, styles } = this.state;
-        Animated.timing(moveAnimated, {
-            toValue: (StyleSheet.flatten(styles.container).height),
-            duration: 195,
-            easing: Easing.bezier(0.4, 0.0, 1, 1),
-            useNativeDriver: true,
-        }).start();
-    }
-
     move = (bottomNavigation) => {
         const { container } = this.context.uiTheme.bottomNavigation;
 
-        const { moveAnimated } = this.state;
-        const toValue = bottomNavigation ? -StyleSheet.flatten(container).height : 0;
-        const duration = bottomNavigation ? 225 : 195;
-        const easing = bottomNavigation ?
-            Easing.bezier(0.0, 0.0, 0.2, 1) : Easing.bezier(0.4, 0.0, 0.6, 1);
+        const toValue = bottomNavigation ? StyleSheet.flatten(container).height : 0;
 
-        Animated.timing(moveAnimated, {
-            toValue,
-            duration,
-            easing,
-            useNativeDriver: true,
-        }).start();
+        this.setState({ bottomPosition: toValue });
     }
@@ -189,2 +193,5 @@
         if (actionText && (typeof onActionPress === 'function')) {
+            styles.container = snackbar.actionContainer;
+            styles.text = snackbar.actionText;
+
             if (button !== 'undefined' && 'style' in button) {
@@ -203,5 +210,2 @@ if ('container' in button.style) {
                 }
-            } else {
-                styles.container = snackbar.actionContainer;
-                styles.text = snackbar.actionText;
             }
@@ -222,15 +226,29 @@
     render() {
-        const { message } = this.props;
-        const { styles, moveAnimated } = this.state;
+        const { message, onPress } = this.props;
+        const { styles, bottomPosition } = this.state;
 
+        const containerStyle = {
+            opacity: this.visibility.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, 1],
+            }),
+        };
+
+        const combinedStyle = [containerStyle, styles.container, { bottom: bottomPosition }];
+
         return (
             <Animated.View
-                style={[styles.container, {
-                    transform: [{
-                        translateY: moveAnimated,
-                    }],
-                }]}
+                style={this.state.visible ? combinedStyle : containerStyle}
             >
-                <Text style={styles.message} >{ message }</Text>
-                {this.renderAction()}
+                <TouchableWithoutFeedback onPress={onPress}>
+                    <View style={styles.content}>
+                        <Text
+                            style={styles.message}
+                            onLayout={this.onTextLayout}
+                        >
+                            {message}
+                        </Text>
+                        {this.renderAction()}
+                    </View>
+                </TouchableWithoutFeedback>
             </Animated.View>
@@ -237,0 +255,0 @@ );

src/styles/getTheme.js

@@ -440,19 +440,28 @@ /* eslint-disable import/no-unresolved, import/extensions */
         }, theme.listItem)),
-        // https://material.io/guidelines/components/snackbars-toasts.html
+        // https://material.io/design/components/snackbars.html
         snackbar: StyleSheet.create(merge({
             container: {
+                flex: 1,
                 flexDirection: 'row',
-                height: spacing.snackbarHeight,
                 alignItems: 'center',
                 backgroundColor: snackbarColor,
-                paddingHorizontal: 24,
+                paddingHorizontal: 16,
                 ...getPlatformElevation(4),
                 zIndex: 4,
+                borderRadius: 4,
+                margin: 8,
+                position: 'absolute',
+                bottom: 0,
             },
+            content: {
+                flex: 1,
+                flexDirection: 'row',
+                alignItems: 'center',
+            },
             message: {
                 flex: 1,
-                marginVertical: 14,
+                marginVertical: 16,
                 color: white,
                 ...typography.body2,
-                lineHeight: 14,
+                lineHeight: 16,
             },
@@ -459,0 +468,0 @@ actionContainer: {

src/styles/spacing.js

@@ -6,3 +6,2 @@ export default {
     avatarSize: 40,
-    snackbarHeight: 48,
 };

src/Toolbar/RightElement.react.js

@@ -165,3 +165,3 @@ /* eslint-disable import/no-unresolved, import/extensions */
                     key="searchIcon"
-                    name="search"
+                    name={searchable.icon ? searchable.icon : 'search'}
                     color={flattenRightElement.color}
@@ -168,0 +168,0 @@ size={size}

src/Toolbar/Toolbar.react.js

@@ -64,2 +64,6 @@ /* eslint-disable import/no-unresolved, import/extensions */
         autoCorrect: PropTypes.bool,
+        /**
+        * Override default search icon
+        */
+        icon: PropTypes.string,
     }),
@@ -66,0 +70,0 @@ /**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

302838

increased by0.58%

Lines of code

5789

increased by0.75%

Dependency changes

• + Addedcolor@3.0.0(transitive)

• - Removedcolor@2.0.1(transitive)

• Updatedcolor@3.0.0