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

Comparing version 1.20.0 to 1.22.0

docs/Dialog.md

@@ -21,3 +21,7 @@ # [Dialog](https://material.google.com/components/dialogs.html#dialogs-behavior)
           <DialogDefaultActions
-             actions={['Dismiss', 'Keep']}
+             actions={['cancel', 'ok']}
+             /**
+             * this will disable the button for "ok"
+             */
+             options={{ ok: { disabled: true } }}
              onActionPress={() => {}}
@@ -31,7 +35,18 @@ />
 ### API
+
+### DialogDefaultActions/DialogStackedActions props
 ```js
-...
+const propTypes = {
+    actions: PropTypes.arrayOf(PropTypes.string).isRequired,
+    options: PropTypes.shape({
+      actionName: { disabled: PropTypes.bool }
+    }),
+    onActionPress: PropTypes.func.isRequired,
+    style: PropTypes.shape({
+        defaultActionsContainer: ViewPropTypes.style,
+    }),
+};
 ```
 
 ##### TODO
-- [ ] Add API to doc
+- [X] Add API to doc

docs/Toolbar.md

@@ -42,2 +42,6 @@ # [Toolbar](https://material.google.com/components/toolbars.html)
         /**
+        * Called when action to close search was requested.
+        */
+        onSearchCloseRequested: PropTypes.func,
+        /**
         * Called when search was opened.
@@ -44,0 +48,0 @@ */

package.json

 {
   "name": "react-native-material-ui",
-  "version": "1.20.0",
+  "version": "1.22.0",
   "description": "React Native Material Design Components",
@@ -5,0 +5,0 @@ "main": "./index.js",

src/ActionButton/ActionButton.react.js

 /* eslint-disable import/no-unresolved, import/extensions */
+import Color from 'color';
 import React, { PureComponent } from 'react';
@@ -21,2 +22,7 @@ import {
 
+function darkenOrLighten(color, ratio = 0.5) {
+    const c = Color(color);
+    return c.luminosity() > 0.5 ? c.darken(ratio) : c.lighten(ratio);
+}
+
 const propTypes = {
@@ -83,3 +89,3 @@ /**
     hidden: false,
-    rippleColor: '#AAF',
+    rippleColor: null,
 };
@@ -226,2 +232,15 @@ const contextTypes = {
     }
+    getRippleColor() {
+        const { rippleColor } = this.props;
+
+        if (rippleColor) {
+            return rippleColor;
+        }
+
+        const styles = getStyles(this.props, this.context, this.state);
+
+        const { backgroundColor } = StyleSheet.flatten(styles.container);
+
+        return darkenOrLighten(backgroundColor).toString();
+    }
     toggleState = () => {
@@ -318,3 +337,3 @@ const { transition } = this.props;
                     style={getRippleContainerStyle(styles.container)}
-                    color={this.props.rippleColor}
+                    color={this.getRippleColor()}
                     onPress={() => this.onPress('main-button')}
@@ -336,3 +355,3 @@ onLongPress={onLongPress}
                 <RippleFeedback
-                    color={this.props.rippleColor}
+                    color={this.getRippleColor()}
                     onPress={() => this.onPress(key)}
@@ -384,3 +403,3 @@ delayPressIn={20}
                         style={getRippleContainerStyle(styles.speedDialActionIcon)}
-                        color={this.props.rippleColor}
+                        color={this.getRippleColor()}
                         onPress={() => this.onPress(key)}
@@ -387,0 +406,0 @@ delayPressIn={20}

src/Badge/Badge.react.js

@@ -40,5 +40,10 @@ /* eslint-disable import/no-unresolved, import/extensions */
     stroke: PropTypes.number,
-    style: PropTypes.shape({
-        container: ViewPropTypes.style,
-    }),
+    style: PropTypes.oneOfType([
+        PropTypes.shape({
+            container: ViewPropTypes.style,
+            strokeContainer: ViewPropTypes.style,
+            content: Text.propTypes.style,
+        }),
+        PropTypes.array,
+    ]),
 };
@@ -45,0 +50,0 @@ const defaultProps = {

src/Dialog/DialogDefaultActions.react.js

@@ -11,2 +11,3 @@ /* eslint-disable import/no-unresolved, import/extensions */
     actions: PropTypes.arrayOf(PropTypes.string).isRequired,
+    options: PropTypes.objectOf(PropTypes.object),
     onActionPress: PropTypes.func.isRequired,
@@ -19,2 +20,3 @@ style: PropTypes.shape({
     style: {},
+    options: {},
 };
@@ -49,5 +51,24 @@ const contextTypes = {
     }
+    renderAction(action) {
+        const { options } = this.props;
+        const isButtonDisabled = options[`${action}`] && options[`${action}`].disabled;
+
+        return (
+            <Button
+                key={action}
+                primary
+                disabled={isButtonDisabled}
+                text={action}
+                onPress={this.onActionPressed}
+                style={{
+                    container: {
+                        marginLeft: 8,
+                        paddingHorizontal: 8,
+                    },
+                }}
+            />
+        );
+    }
     render() {
         const { actions } = this.props;
-
         const styles = getStyles(this.props, this.context);
@@ -58,14 +79,3 @@
                 {actions.map(action => (
-                    <Button
-                        key={action}
-                        primary
-                        text={action}
-                        onPress={this.onActionPressed}
-                        style={{
-                            container: {
-                                marginLeft: 8,
-                                paddingHorizontal: 8,
-                            },
-                        }}
-                    />
+                    this.renderAction(action)
                 ))}
@@ -72,0 +82,0 @@ </View>

src/Dialog/DialogStackedActions.react.js

@@ -12,2 +12,3 @@ /* eslint-disable import/no-unresolved, import/extensions */
     onActionPress: PropTypes.func.isRequired,
+    options: PropTypes.objectOf(PropTypes.object),
     style: PropTypes.shape({
@@ -19,2 +20,3 @@ stackedActionsContainer: ViewPropTypes.style,
     style: {},
+    options: {},
 };
@@ -37,4 +39,23 @@ const contextTypes = {
 class DialogStackedActions extends PureComponent {
+    renderAction(action) {
+        const { options, onActionPress } = this.props;
+        const isButtonDisabled = options[`${action}`] && options[`${action}`].disabled;
+
+        return (
+            <Button
+                key={action}
+                primary
+                disabled={isButtonDisabled}
+                text={action}
+                onPress={onActionPress}
+                style={{
+                    container: {
+                        justifyContent: 'flex-end',
+                    },
+                }}
+            />
+        );
+    }
     render() {
-        const { actions, onActionPress } = this.props;
+        const { actions } = this.props;
 
@@ -46,13 +67,3 @@ const styles = getStyles(this.props, this.context);
                 {actions.map(action => (
-                    <Button
-                        key={action}
-                        primary
-                        text={action}
-                        onPress={onActionPress}
-                        style={{
-                            container: {
-                                justifyContent: 'flex-end',
-                            },
-                        }}
-                    />
+                    this.renderAction(action)
                 ))}
@@ -59,0 +70,0 @@ </View>

src/IconToggle/IconToggle.react.js

@@ -37,3 +37,3 @@ /* eslint-disable import/no-unresolved, import/extensions */
     */
-    name: PropTypes.string.isRequired,
+    name: PropTypes.string,
     /**
@@ -61,2 +61,3 @@ * It'll be used instead of icon (see props name) if exists
     size: 24,
+    name: null,
     disabled: false,
@@ -63,0 +64,0 @@ percent: 90,

src/Snackbar/Snackbar.react.js

@@ -102,3 +102,3 @@ /* eslint-disable import/no-unresolved, import/extensions */
         if (nextProps.style !== style) {
-            this.setState({ styles: getStyles(this.props, this.context) });
+            this.setState({ styles: getStyles(nextProps, this.context) });
         }
@@ -105,0 +105,0 @@

src/styles/typography.js

@@ -0,5 +1,7 @@
+import { Platform } from 'react-native';
+
 export const fontWeight = {
     light: '300',
     normal: '400',
-    medium: '500',
+    medium: Platform.OS === 'android' ? '500' : '800',
 };
@@ -6,0 +8,0 @@

src/Toolbar/Toolbar.react.js

@@ -37,2 +37,6 @@ /* eslint-disable import/no-unresolved, import/extensions */
         /**
+        * Called when action to close search was requested.
+        */
+        onSearchCloseRequested: PropTypes.func,
+        /**
         * Called when search was opened.
@@ -269,2 +273,6 @@ */
     onSearchCloseRequested = () => {
+        if (this.props.searchable.onSearchCloseRequested) {
+            this.props.searchable.onSearchCloseRequested();
+        }
+
         this.setState({
@@ -271,0 +279,0 @@ isSearchActive: false,

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

298971

increased by0.73%

Lines of code

5714

increased by0.85%

No dependency changes