Change how we extract a component props (#951)

* Change how we extract a component props

* Update src/commons/modifiers.ts

Co-authored-by: Miki <[email protected]>

Co-authored-by: Miki <[email protected]>

Author: ethanshar

src/commons/modifiers.ts

@@ -304,6 +304,10 @@ export function extractModifierProps(props: Dictionary<any>) {
   return modifierProps;
 }
 
+/**
+ * TODO:
+ * @deprecated switch to Modifiers#extractComponentProps
+ */
 export function extractOwnProps(props: Dictionary<any>, ignoreProps: string[]) {
   //@ts-ignore
   const ownPropTypes = this.propTypes;
@@ -315,6 +319,16 @@ export function extractOwnProps(props: Dictionary<any>, ignoreProps: string[]) {
   return ownProps;
 }
 
+export function extractComponentProps(component: any, props: Dictionary<any>, ignoreProps: string[]) {
+  const componentPropTypes = component.propTypes;
+  const componentProps = _.chain(props)
+    .pickBy((_value, key) => _.includes(Object.keys(componentPropTypes), key))
+    .omit(ignoreProps)
+    .value();
+
+  return componentProps;
+}
+
 //@ts-ignore
 export function getThemeProps(props = this.props, context = this.context) {
   //@ts-ignore

src/components/picker/PickerDialog.android.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import _ from 'lodash';
 
 import {BaseComponent} from '../../commons';
+import {extractComponentProps} from '../../commons/modifiers';
 import Dialog from '../dialog';
 import View from '../view';
 import Text from '../text';
@@ -80,7 +81,7 @@ class PickerDialog extends BaseComponent {
   }
 
   render() {
-    const dialogProps = Dialog.extractOwnProps(this.props);
+    const dialogProps = extractComponentProps(Dialog, this.props);
     return (
       <Dialog {...dialogProps} migrate height="50%" width="77%">
         <View style={styles.dialog}>

src/components/picker/PickerDialog.ios.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import _ from 'lodash';
 
 import {BaseComponent} from '../../commons';
+import {extractComponentProps} from '../../commons/modifiers';
 import Dialog from '../dialog';
 import View from '../view';
 import Text from '../text';
@@ -51,7 +52,7 @@ class PickerDialog extends BaseComponent {
   }
 
   render() {
-    const dialogProps = Dialog.extractOwnProps(this.props);
+    const dialogProps = extractComponentProps(Dialog, this.props);
     return (
       <Dialog {...dialogProps} height={250} width="100%" migrate bottom animationConfig={{duration: 300}}>
         <View flex bg-white>