refactor(*): apply remainingProps to components

topheman · Apr 24, 2018 · 9a602d7 · 9a602d7
1 parent 0fd99c7
commit 9a602d7
Show file tree

Hide file tree

Showing 28 changed files with 164 additions and 118 deletions.
diff --git a/src/components/CodeBlock.js b/src/components/CodeBlock.js
@@ -15,16 +15,16 @@ class CodeBlock extends PureComponent {
     highlightBlock(this.codeEl);
   }
   render() {
-    const { className, style } = this.props;
+    const { value, language } = this.props;
     return (
-      <pre className={className} style={style}>
+      <pre {...this.props}>
         <code
           ref={ref => {
             this.codeEl = ref;
           }}
-          className={`language-${this.props.language}`}
+          className={`language-${language}`}
         >
-          {this.props.value}
+          {value}
         </code>
       </pre>
     );
@@ -33,14 +33,10 @@ class CodeBlock extends PureComponent {
 
 CodeBlock.propTypes = {
   value: PropTypes.string.isRequired,
-  language: PropTypes.string,
-  className: PropTypes.string,
-  style: PropTypes.object
+  language: PropTypes.string
 };
 CodeBlock.defaultProps = {
-  language: "",
-  className: undefined,
-  style: undefined
+  language: ""
 };
 
 export default CodeBlock;
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -15,8 +15,14 @@ const styles = {
   }
 };
 
-const Footer = ({ classes, fromFullYear, toFullYear, className, style }) => (
-  <footer className={classNames(classes.root, className)} style={style}>
+const Footer = ({
+  classes,
+  fromFullYear,
+  toFullYear,
+  className,
+  ...remainingProps
+}) => (
+  <footer className={classNames(classes.root, className)} {...remainingProps}>
     <p>
       ©{fromFullYear === toFullYear
         ? toFullYear
@@ -45,13 +51,11 @@ Footer.propTypes = {
   toFullYear: PropTypes.number,
   fromFullYear: PropTypes.number.isRequired,
   classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
+  className: PropTypes.string
 };
 Footer.defaultProps = {
   toFullYear: new Date().getFullYear(),
-  className: undefined,
-  style: undefined
+  className: undefined
 };
 
 export default withStyles(styles)(Footer);
diff --git a/src/components/Gravatar.js b/src/components/Gravatar.js
@@ -4,13 +4,13 @@ import Avatar from "material-ui/Avatar";
 
 import md5 from "js-md5";
 
-const Gravatar = ({ email, size, ...props }) => (
+const Gravatar = ({ email, size, ...remainingProps }) => (
   <Avatar
     src={`https://s.gravatar.com/avatar/${md5(email)}${
       size ? `?s=${size}` : ""
     }`}
     alt="avatar"
-    {...props}
+    {...remainingProps}
   />
 );
 

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -56,10 +56,19 @@ const styles = theme => ({
 });
 
 const Header = props => {
-  const { classes, drawerOpen, toggleDrawer, className, style } = props;
+  const {
+    classes,
+    drawerOpen,
+    toggleDrawer,
+    className,
+    ...remainingProps
+  } = props;
   return (
     <Fragment>
-      <header className={classNames(classes.root, className)} style={style}>
+      <header
+        className={classNames(classes.root, className)}
+        {...remainingProps}
+      >
         <AppBar position="absolute">
           <Toolbar>
             <IconButton

diff --git a/src/components/KeywordsList.js b/src/components/KeywordsList.js
@@ -38,10 +38,10 @@ const styles = {
   }
 };
 
-const KeywordsList = ({ keywords, classes, className, style }) => {
+const KeywordsList = ({ keywords, classes, className, ...remainingProps }) => {
   if (keywords && keywords.length > 0) {
     return (
-      <div className={classNames(classes.root, className)} style={style}>
+      <div className={classNames(classes.root, className)} {...remainingProps}>
         <LocalOfferIcon />
         {keywords.map((keyword, index) => (
           <Link
@@ -60,14 +60,12 @@ const KeywordsList = ({ keywords, classes, className, style }) => {
 KeywordsList.propTypes = {
   classes: PropTypes.object.isRequired,
   keywords: PropTypes.array,
-  className: PropTypes.string,
-  style: PropTypes.object
+  className: PropTypes.string
 };
 
 KeywordsList.defaultProps = {
   keywords: [],
-  className: undefined,
-  style: undefined
+  className: undefined
 };
 
 export default withStyles(styles)(KeywordsList);
diff --git a/src/components/Loader.js b/src/components/Loader.js
@@ -40,15 +40,15 @@ CustomLoader.defaultProps = {
   message: "Loading"
 };
 
-const Loader = ({ message, classes, overrideClasses, ...props }) => {
+const Loader = ({ message, classes, overrideClasses, ...remainingProps }) => {
   const loaderClasses = {
     ...classes,
     ...overrideClasses
   };
   return (
     <Waiting
       loader={<CustomLoader message={message} classes={loaderClasses} />}
-      {...props}
+      {...remainingProps}
     />
   );
 };

diff --git a/src/components/MainDrawer.js b/src/components/MainDrawer.js
@@ -29,7 +29,7 @@ const styles = {
   }
 };
 
-const MainDrawer = ({ classes, anchor, open, onClose }) => {
+const MainDrawer = ({ classes, anchor, open, onClose, ...remainingProps }) => {
   const sideList = (
     <div
       className={
@@ -85,7 +85,12 @@ const MainDrawer = ({ classes, anchor, open, onClose }) => {
   );
 
   return (
-    <MuiDrawer anchor={anchor} open={open} onClose={onClose}>
+    <MuiDrawer
+      anchor={anchor}
+      open={open}
+      onClose={onClose}
+      {...remainingProps}
+    >
       <div
         tabIndex={0}
         role="button"

diff --git a/src/components/Markdown.js b/src/components/Markdown.js
@@ -116,9 +116,9 @@ LinkRenderer.defaultProps = {
 
 /** Markdown component */
 
-const Markdown = ({ repository, ...props }) => (
+const Markdown = ({ repository, source, ...remainingProps }) => (
   <ReactMarkdown
-    {...props}
+    source={source}
     renderers={{
       code: CodeBlock,
       heading: HeadingRenderer,
@@ -127,6 +127,7 @@ const Markdown = ({ repository, ...props }) => (
     escapeHtml={false}
     transformLinkUri={makeTransformLinkUri({ repository })}
     transformImageUri={makeTransformImageUri({ repository })}
+    {...remainingProps}
   />
 );
 Markdown.propTypes = {

diff --git a/src/components/Package/DependenciesTab.js b/src/components/Package/DependenciesTab.js
@@ -47,8 +47,7 @@ const DependenciesTab = ({
   version,
   packageInfos,
   classes,
-  className,
-  style
+  ...remainingProps
 }) => {
   const dependencies =
     (packageInfos &&
@@ -77,7 +76,7 @@ const DependenciesTab = ({
     [`Peer Dependencies`]: peerDependencies
   };
   return (
-    <div className={className} style={style}>
+    <div {...remainingProps}>
       <ExpansionPanel>
         <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
           <Typography>Dependencies ({dependencies.length})</Typography>
@@ -111,13 +110,7 @@ const DependenciesTab = ({
 DependenciesTab.propTypes = {
   version: PropTypes.string.isRequired,
   packageInfos: PropTypes.object.isRequired,
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
-};
-DependenciesTab.defaultProps = {
-  className: undefined,
-  style: undefined
+  classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(DependenciesTab);
diff --git a/src/components/Package/InfosContents.js b/src/components/Package/InfosContents.js
@@ -31,7 +31,12 @@ const styles = {
   maintainers: {}
 };
 
-const InfosContent = ({ packageInfos, version, classes, className, style }) => {
+const InfosContent = ({
+  packageInfos,
+  version,
+  classes,
+  ...remainingProps
+}) => {
   const licenseInfos = extractLicenseInfos(packageInfos, version);
   const homepage = extractUrl(
     safeExtractVersion(packageInfos, version).homepage
@@ -47,7 +52,7 @@ const InfosContent = ({ packageInfos, version, classes, className, style }) => {
       relativeDate(new Date(packageInfos.time[version]))) ||
     undefined;
   return (
-    <div className={className} style={style}>
+    <div {...remainingProps}>
       {datePublishedRelative && (
         <div>
           <strong>v{version}</strong> published <i>{datePublishedRelative}</i>
@@ -106,13 +111,7 @@ const InfosContent = ({ packageInfos, version, classes, className, style }) => {
 InfosContent.propTypes = {
   packageInfos: PropTypes.object.isRequired,
   version: PropTypes.string.isRequired,
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
-};
-InfosContent.defaultProps = {
-  className: undefined,
-  style: undefined
+  classes: PropTypes.object.isRequired
 };
 
 export default withStyles(styles)(InfosContent);
diff --git a/src/components/Package/NotFound.js b/src/components/Package/NotFound.js
@@ -15,8 +15,8 @@ const styles = {
   }
 };
 
-const NotFound = ({ classes, packageName, className, style }) => (
-  <div className={classNames(classes.root, className)} style={style}>
+const NotFound = ({ classes, packageName, className, ...remainingProps }) => (
+  <div className={classNames(classes.root, className)} {...remainingProps}>
     <h2>Not Found</h2>
     <p>Package &quot;{packageName}&quot; not found</p>
     <p>
@@ -30,12 +30,10 @@ const NotFound = ({ classes, packageName, className, style }) => (
 NotFound.propTypes = {
   packageName: PropTypes.string.isRequired,
   classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
+  className: PropTypes.string
 };
 NotFound.defaultProps = {
-  className: undefined,
-  style: undefined
+  className: undefined
 };
 
 export default withStyles(styles)(NotFound);
diff --git a/src/components/Package/Package.js b/src/components/Package/Package.js
@@ -88,9 +88,9 @@ const Package = ({
   loadRegistryInfos,
   classes,
   className,
-  style
+  ...remainingProps
 }) => (
-  <section className={classNames(classes.root, className)} style={style}>
+  <section className={classNames(classes.root, className)} {...remainingProps}>
     <header className={`${classes.blocks} ${classes.areaHeader}`}>
       <Title
         scope={scope}
@@ -242,16 +242,14 @@ Package.propTypes = {
   loadApiInfos: PropTypes.func.isRequired,
   loadRegistryInfos: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
+  className: PropTypes.string
 };
 Package.defaultProps = {
   scope: undefined,
   version: undefined,
   packageInfos: undefined,
   downloads: undefined,
-  className: undefined,
-  style: undefined
+  className: undefined
 };
 
 export default withStyles(styles)(Package);
diff --git a/src/components/Package/PackageJsonTab.js b/src/components/Package/PackageJsonTab.js
@@ -33,7 +33,7 @@ const styles = theme => ({
   }
 });
 
-const PackageJson = ({ value, classes, className, style }) => {
+const PackageJson = ({ value, classes, className, ...remainingProps }) => {
   const { version } = value;
   const formattedValue = JSON.stringify(
     value,
@@ -42,7 +42,7 @@ const PackageJson = ({ value, classes, className, style }) => {
     "  "
   );
   return (
-    <div className={classNames(classes.root, className)} style={style}>
+    <div className={classNames(classes.root, className)} {...remainingProps}>
       <ExpansionPanel>
         <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
           <Typography className={classes.heading}>
@@ -63,12 +63,10 @@ const PackageJson = ({ value, classes, className, style }) => {
 PackageJson.propTypes = {
   value: PropTypes.object.isRequired,
   classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  style: PropTypes.object
+  className: PropTypes.string
 };
 PackageJson.defaultProps = {
-  className: undefined,
-  style: undefined
+  className: undefined
 };
 
 export default withStyles(styles)(PackageJson);