Merge pull request #239 from data-driven-forms/fix-another-hrefs-in-demo

Fixed missing HREF on rest of anchor tags.

Author: rvsia

packages/react-renderer-demo/src/app/pages/index.js

@@ -25,6 +25,9 @@ const useStyles = makeStyles(theme => ({
     textAlign: 'center',
     marginTop: 48,
   },
+  getStartedAnchor: {
+    textDecoration: 'none',
+  },
   getStartedButton: {
     border: `1px solid ${theme.palette.common.white}`,
     borderRadius: 2,
@@ -47,9 +50,11 @@ const LandingPage = () => {
         </Typography>
         <div className={ classes.getStartedLink }>
           <Link href="/renderer/installation">
-            <Button variant="outlined" className={ classes.getStartedButton }>
-              Get started
-            </Button>
+            <a className={ classes.getStartedAnchor }>
+              <Button variant="outlined" className={ classes.getStartedButton }>
+                Get started
+              </Button>
+            </a>
           </Link>
         </div>
       </div>

packages/react-renderer-demo/src/app/src/components/common/example-link.js

@@ -1,19 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import RouterLink from 'next/link';
-import Link from '@material-ui/core/Link';
 import Button from '@material-ui/core/Button';
+import makeStyles from '@material-ui/core/styles/makeStyles';
 
-const ExampleLink = ({ to, text = 'To example' }) => (
-  <React.Fragment>
-    <div style={{ float: 'right' }}>
-      <RouterLink href={ `/component-example/${to}` }>
-        <Button><Link>{ text }</Link></Button>
-      </RouterLink>
-    </div>
-    <br/>
-  </React.Fragment>
-);
+const useStyles = makeStyles({
+  toExampleLink: {
+    textDecoration: 'none',
+  },
+});
+
+const ExampleLink = ({ to, text = 'To example' }) => {
+  const classes = useStyles();
+  return (
+    <React.Fragment>
+      <div style={{ float: 'right' }}>
+        <RouterLink href={ `/component-example/${to}` }>
+          <a className={ classes.toExampleLink }>
+            <Button color="primary" >{ text }</Button>
+          </a>
+        </RouterLink>
+      </div>
+      <br/>
+    </React.Fragment>
+  );};
 
 ExampleLink.propTypes = {
   to: PropTypes.string.isRequired,

packages/react-renderer-demo/src/app/src/components/mdx/share-button.js

@@ -10,13 +10,11 @@ const HashTagSvg = (props) => (
 
 const ShareButton = ({ path }) => (
   <CopyToClipboard text={ path }>
-    <a href={ path }>
-      <IconButton size="medium">
-        <SvgIcon fontSize="small" viewBox="0 0 48 48">
-          <HashTagSvg />
-        </SvgIcon>
-      </IconButton>
-    </a>
+    <IconButton size="medium">
+      <SvgIcon fontSize="small" viewBox="0 0 48 48">
+        <HashTagSvg />
+      </SvgIcon>
+    </IconButton>
   </CopyToClipboard>
 );
 

packages/react-renderer-demo/src/app/src/doc-components/component-mapper/form-fields-mapper.js

@@ -1,3 +1,4 @@
+/* eslint react/prop-types: "off" */
 import React, { Fragment } from 'react';
 import FormRender, { layoutComponents, componentTypes } from '@data-driven-forms/react-form-renderer';
 
@@ -30,17 +31,12 @@ const Button = ({ children, label, variant, ...props }) => <button style={ getBu
 const layoutComponent = {
   [layoutComponents.FORM_WRAPPER]: FormWrapper,
   [layoutComponents.BUTTON]: Button,
-  [layoutComponents.COL]: Fragment,
-  [layoutComponents.FORM_GROUP]: Fragment,
-  [layoutComponents.BUTTON_GROUP]: Fragment,
-  [layoutComponents.ICON]: Fragment,
-  [layoutComponents.ARRAY_FIELD_WRAPPER]: Fragment,
-  [layoutComponents.HELP_BLOCK]: Fragment,
+  [layoutComponents.BUTTON_GROUP]: ({ key, children }) => <Fragment key={ key }>{ children }</Fragment>,
   [layoutComponents.TITLE]: Title,
   [layoutComponents.DESCRIPTION]: Description,
 };
 
-const TextField = ({ formOptions, customProp, label, input, isRequired, meta: { error, touched }, FieldProvider, dataType, ...props }) => (
+const TextField = ({ formOptions, customProp, label, input, isRequired, meta: { error, touched }, FieldProvider, FieldArrayProvider, dataType, ...props }) => (
   <div className={ `ddorg__demo-formGroup ${isRequired ? 'required' : ''} ${error ? 'error' : ''}` }>
     <label htmlFor={ input.name }>{ label }</label>
     <input id={ input.name } { ...input } { ...props } />

packages/react-renderer-demo/src/app/src/doc-components/component-mapper/layout-mapper.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import FormRender, { layoutComponents } from '@data-driven-forms/react-form-renderer';
 
 const wrapperStyles = {

packages/react-renderer-demo/src/app/src/doc-components/field-array/form-fields-mapper.js

@@ -1,3 +1,4 @@
+/* eslint react/prop-types: "off" */
 import React, { Fragment, useState } from 'react';
 import FormRender, { layoutComponents, componentTypes } from '@data-driven-forms/react-form-renderer';
 
@@ -30,7 +31,7 @@ const Button = ({ children, label, variant, ...props }) => <button style={ getBu
 const layoutComponent = {
   [layoutComponents.FORM_WRAPPER]: FormWrapper,
   [layoutComponents.BUTTON]: Button,
-  [layoutComponents.BUTTON_GROUP]: Fragment,
+  [layoutComponents.BUTTON_GROUP]: ({ key, children }) => <Fragment key={ key }>{ children }</Fragment>,
   [layoutComponents.TITLE]: Fragment,
   [layoutComponents.DESCRIPTION]: Fragment,
 };

packages/react-renderer-demo/src/app/src/helpers/list-of-contents.js

@@ -86,25 +86,31 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const scrollListener = (setActive) => {
-  const min = -10;
-  const max = 20;
-  const elem = Array.from(document.querySelectorAll('[data-mdlink]'))
-  .find(elem => {
-    const { top } = elem.getBoundingClientRect();
-    return top > min && top < max;
-  });
-  if (elem) {
-    setActive(elem.id);
-  }
-};
-
 const ListOfContents = ({ file }) => {
   const [ activeItem, setActive ] = useState();
+  let isMounted = true;
+
+  const scrollListener = (setActive) => {
+    const min = -10;
+    const max = 20;
+    const elem = Array.from(document.querySelectorAll('[data-mdlink]'))
+    .find(elem => {
+      const { top } = elem.getBoundingClientRect();
+      return top > min && top < max;
+    });
+    if (isMounted && elem) {
+      setActive(elem.id);
+    }
+  };
+
   useEffect(() => {
     document.addEventListener('scroll', () => scrollListener(setActive));
     scrollListener(setActive);
-    return () => document.removeEventListener('scroll', scrollListener);
+
+    return () => {
+      isMounted = false;
+      document.removeEventListener('scroll', scrollListener);
+    };
   }, []);
   const classes = useStyles();
   const text = reqSource(`./${file}.md`).default;