Merge pull request #241 from data-driven-forms/added-documentation-search-input

rvsia · web-flow · commit 0ec608372931 · 2019-11-25T09:51:33.000+01:00
Added doc search input to documentation.
diff --git a/package.json b/package.json
@@ -70,7 +70,5 @@
       }
     ]
   },
-  "dependencies": {
-    "n": "^6.0.1"
-  }
+  "dependencies": {}
 }
diff --git a/packages/react-renderer-demo/src/app/pages/_document.js b/packages/react-renderer-demo/src/app/pages/_document.js
@@ -26,10 +26,12 @@ class MyDocument extends Document {
             integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
             crossOrigin="anonymous"
           />
+          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
         </Head>
         <body>
           <Main />
           <NextScript />
+          <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
         </body>
       </html>
     );
diff --git a/packages/react-renderer-demo/src/app/src/components/docsearch.js b/packages/react-renderer-demo/src/app/src/components/docsearch.js
@@ -0,0 +1,69 @@
+import React, { useEffect } from 'react';
+import TextField from '@material-ui/core/TextField'
+import InputAdornment from '@material-ui/core/InputAdornment'
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import Search from '@material-ui/icons/Search';
+
+const useStyles = makeStyles(() => ({
+  docSearchWrapper: {
+    marginRight: 16,
+    '& .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main.algolia-docsearch-suggestion__secondary': {
+      textDecoration: 'none'
+    },
+    '& .algolia-autocomplete .algolia-docsearch-suggestion--title': {
+      marginBottom: 0
+    },
+    '& .ds-dropdown-menu': {
+      '& [class^=ds-dataset-]': {
+        borderRadius: 0,
+      },
+      '&:before': {
+        display: 'none'
+      }
+    },
+  },
+  docSearchInput: {
+    '& input': {
+      color: 'white'
+    },
+    '& .MuiInput-underline:hover:not(.Mui-disabled):before': {
+      borderBottomColor: 'white',
+    },
+    '& .MuiInput-underline:after': {
+      borderBottomColor: 'white',
+    },
+    '& .MuiInput-underline:before': {
+      borderBottomColor: 'transparent',
+    },
+  },
+  docSearchIcon: {
+    fill: 'white'
+  }
+}));
+
+const DocSearch = () => {
+  const classes = useStyles()
+  useEffect(() => {
+    window.docsearch({
+      apiKey: '5e9dbd314423e38339595e183d1ae7b6',
+      indexName: 'data-driven-forms',
+      inputSelector: '#data-driven-forms-search',
+      debug: false
+    });
+  }, []);
+  return (
+    <form className={ classes.docSearchWrapper }>
+      <TextField
+        id="data-driven-forms-search"
+        type="search"
+        placeholder="Search..."
+        className={ classes.docSearchInput }
+        InputProps={{
+          startAdornment: <InputAdornment position="start"><Search className={ classes.docSearchIcon } /></InputAdornment>,
+        }}
+      />
+    </form>
+  );
+};
+
+export default DocSearch;
diff --git a/packages/react-renderer-demo/src/app/src/components/layout.js b/packages/react-renderer-demo/src/app/src/components/layout.js
@@ -20,6 +20,7 @@ import MenuContext from './navigation/menu-context';
 import findConnectedLinks from './navigation/find-connected-links';
 import ConnectedLinks from './common/connected-links';
 import Footer from './footer';
+import DocSearch from './docsearch';
 
 export const drawerWidth = 240;
 
@@ -190,6 +191,7 @@ const Layout = ({ children }) => {
           <div className={ clsx(classes.drawerHeader, classes.appBar, classes.rightAppBar, {
             [classes.appBarShift]: open,
           }) }>
+            <DocSearch />
             <a href="https://github.com/data-driven-forms/react-forms" rel="noopener noreferrer" target="_blank">
               <IconButton
                 color="inherit"
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,5 @@`
`70`	`70`	`}`
`71`	`71`	`]`
`72`	`72`	`},`
`73`		`- "dependencies": {`
`74`		`- "n": "^6.0.1"`
`75`		`- }`
	`73`	`+ "dependencies": {}`
`76`	`74`	`}`