knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Components][l]: Update portal components

Browse Source
This commit is contained in:
Rising Odegua 2021-05-10 14:53:52 +01:00
parent 97f425c863
commit 12cfd0d54e
7 changed files with 277 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
dist/index.cjs.js vendored
View File

@ -393,27 +393,27 @@ Org.propTypes = {
/**
* Displays a blog post page
* @param {object} props
* {
* post = {
* title: <The title of the blog post>
* content: <The body of the blog post>
* modified: <The utc date when the post was last modified.
* featured_image: <Url/relative url to post cover image
* content: <The body of the blog post. Can be plain text or html>
* createdAt: <The utc date when the post was last modified>.
* featuredImage: <Url/relative url to post cover image>
* }
* @returns
*/
var Post = function Post(_ref) {
var page = _ref.page;
var title = page.title,
content = page.content,
modified = page.modified,
featured_image = page.featured_image;
var post = _ref.post;
var title = post.title,
content = post.content,
createdAt = post.createdAt,
featuredImage = post.featuredImage;
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("h1", {
className: "text-3xl font-semibold text-primary my-6 inline-block"
}, title), /*#__PURE__*/React__default['default'].createElement("p", {
className: "mb-6"
}, "Edited: ", modified), /*#__PURE__*/React__default['default'].createElement("img", {
src: featured_image,
}, "Posted: ", createdAt), /*#__PURE__*/React__default['default'].createElement("img", {
src: featuredImage,
className: "mb-6",
alt: "featured_img"
}), /*#__PURE__*/React__default['default'].createElement("div", null, parse__default['default'](content)));
@ -423,8 +423,8 @@ Post.propTypes = {
page: PropTypes__default['default'].shape({
title: PropTypes__default['default'].string.isRequired,
content: PropTypes__default['default'].string.isRequired,
modified: PropTypes__default['default'].string,
featured_image: PropTypes__default['default'].string
createdAt: PropTypes__default['default'].number,
featuredImage: PropTypes__default['default'].string
})
};
@ -442,9 +442,7 @@ Post.propTypes = {
var PostList = function PostList(_ref) {
var posts = _ref.posts;
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("h1", {
className: "text-3xl font-semibold text-primary my-6 inline-block"
}, posts.length, " posts found"), posts.map(function (post, index) {
return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, posts.map(function (post, index) {
return /*#__PURE__*/React__default['default'].createElement("div", {
key: index
}, /*#__PURE__*/React__default['default'].createElement("a", {
@ -601,9 +599,118 @@ Recent.propTypes = {
datasets: PropTypes__default['default'].array.isRequired
};
/**
* Search component form that can be customized with change and submit handlers
* @param {object} props
* {
* handleChange: A form input change event handler. This function is executed when the
* search input or order by input changes.
* handleSubmit: A form submit event handler. This function is executed when the
* search form is submitted.
* }
* @returns
*/
var Form = function Form(_ref) {
var handleSubmit = _ref.handleSubmit;
var _useState = React.useState(""),
_useState2 = _slicedToArray(_useState, 2),
searchQuery = _useState2[0],
setSearchQuery = _useState2[1];
return /*#__PURE__*/React__default['default'].createElement("form", {
onSubmit: function onSubmit(e) {
return e.preventDefault();
},
className: "items-center"
}, /*#__PURE__*/React__default['default'].createElement("div", {
className: "flex"
}, /*#__PURE__*/React__default['default'].createElement("input", {
type: "text",
name: "search#q",
value: searchQuery,
onChange: function onChange(e) {
setSearchQuery(e.target.value);
},
placeholder: "Search",
"aria-label": "Search",
className: "bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
}), /*#__PURE__*/React__default['default'].createElement("button", {
onClick: function onClick() {
return handleSubmit(searchQuery);
},
type: "button",
className: "inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
}, "Search")));
};
Form.propTypes = {
handleSubmit: PropTypes__default['default'].func.isRequired
};
/**
* Single item from a search result showing info about a dataset.
* @param {object} props data package with the following format:
* {
* organization: {name: <some name>, title: <some title> },
* title: <Data package title>
* name: <Data package name>
* description: <description of data package>
* notes: <Notes associated with the data package>
* }
* @returns React Component
*/
var Item = function Item(_ref) {
var dataset = _ref.dataset;
return /*#__PURE__*/React__default['default'].createElement("div", {
className: "mb-6"
}, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-xl font-semibold"
}, /*#__PURE__*/React__default['default'].createElement(Link__default['default'], {
href: "/@".concat(dataset.organization ? dataset.organization.name : 'dataset', "/").concat(dataset.name)
}, /*#__PURE__*/React__default['default'].createElement("a", {
className: "text-primary"
}, dataset.title || dataset.name))), /*#__PURE__*/React__default['default'].createElement(Link__default['default'], {
href: "/@".concat(dataset.organization ? dataset.organization.name : 'dataset')
}, /*#__PURE__*/React__default['default'].createElement("a", {
className: "text-gray-500 block mt-1"
}, dataset.organization ? dataset.organization.title : 'dataset')), /*#__PURE__*/React__default['default'].createElement("div", {
className: "leading-relaxed mt-2"
}, dataset.description || dataset.notes));
};
Item.propTypes = {
dataset: PropTypes__default['default'].object.isRequired
};
/**
* Displays the total search result
* @param {object} props
* {
* count: The total number of search results
* }
* @returns React Component
*/
var Total = function Total(_ref) {
var count = _ref.count;
return /*#__PURE__*/React__default['default'].createElement("h1", {
className: "text-3xl font-semibold text-primary my-6 inline-block"
}, count, " results found");
};
Total.propTypes = {
count: PropTypes__default['default'].number.isRequired
};
exports.CustomLink = CustomLink;
exports.DataExplorer = DataExplorer;
exports.Error = ErrorMessage;
exports.Form = Form;
exports.Item = Item;
exports.ItemTotal = Total;
exports.KeyInfo = KeyInfo;
exports.Nav = Nav;
exports.Org = Org;

138
dist/index.esm.js vendored
View File

@ -360,27 +360,27 @@ Org.propTypes = {
/**
* Displays a blog post page
* @param {object} props
* {
* post = {
* title: <The title of the blog post>
* content: <The body of the blog post>
* modified: <The utc date when the post was last modified.
* featured_image: <Url/relative url to post cover image
* content: <The body of the blog post. Can be plain text or html>
* createdAt: <The utc date when the post was last modified>.
* featuredImage: <Url/relative url to post cover image>
* }
* @returns
*/
var Post = function Post(_ref) {
var page = _ref.page;
var title = page.title,
content = page.content,
modified = page.modified,
featured_image = page.featured_image;
var post = _ref.post;
var title = post.title,
content = post.content,
createdAt = post.createdAt,
featuredImage = post.featuredImage;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", {
className: "text-3xl font-semibold text-primary my-6 inline-block"
}, title), /*#__PURE__*/React.createElement("p", {
className: "mb-6"
}, "Edited: ", modified), /*#__PURE__*/React.createElement("img", {
src: featured_image,
}, "Posted: ", createdAt), /*#__PURE__*/React.createElement("img", {
src: featuredImage,
className: "mb-6",
alt: "featured_img"
}), /*#__PURE__*/React.createElement("div", null, parse(content)));
@ -390,8 +390,8 @@ Post.propTypes = {
page: PropTypes.shape({
title: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
modified: PropTypes.string,
featured_image: PropTypes.string
createdAt: PropTypes.number,
featuredImage: PropTypes.string
})
};
@ -409,9 +409,7 @@ Post.propTypes = {
var PostList = function PostList(_ref) {
var posts = _ref.posts;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", {
className: "text-3xl font-semibold text-primary my-6 inline-block"
}, posts.length, " posts found"), posts.map(function (post, index) {
return /*#__PURE__*/React.createElement(React.Fragment, null, posts.map(function (post, index) {
return /*#__PURE__*/React.createElement("div", {
key: index
}, /*#__PURE__*/React.createElement("a", {
@ -568,4 +566,110 @@ Recent.propTypes = {
datasets: PropTypes.array.isRequired
};
export { CustomLink, DataExplorer, ErrorMessage as Error, KeyInfo, Nav, Org, PlotlyChart, Post, PostList, ReadMe, Recent, ResourcesInfo as ResourceInfo, Table };
/**
* Search component form that can be customized with change and submit handlers
* @param {object} props
* {
* handleChange: A form input change event handler. This function is executed when the
* search input or order by input changes.
* handleSubmit: A form submit event handler. This function is executed when the
* search form is submitted.
* }
* @returns
*/
var Form = function Form(_ref) {
var handleSubmit = _ref.handleSubmit;
var _useState = useState(""),
_useState2 = _slicedToArray(_useState, 2),
searchQuery = _useState2[0],
setSearchQuery = _useState2[1];
return /*#__PURE__*/React.createElement("form", {
onSubmit: function onSubmit(e) {
return e.preventDefault();
},
className: "items-center"
}, /*#__PURE__*/React.createElement("div", {
className: "flex"
}, /*#__PURE__*/React.createElement("input", {
type: "text",
name: "search#q",
value: searchQuery,
onChange: function onChange(e) {
setSearchQuery(e.target.value);
},
placeholder: "Search",
"aria-label": "Search",
className: "bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
}), /*#__PURE__*/React.createElement("button", {
onClick: function onClick() {
return handleSubmit(searchQuery);
},
type: "button",
className: "inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
}, "Search")));
};
Form.propTypes = {
handleSubmit: PropTypes.func.isRequired
};
/**
* Single item from a search result showing info about a dataset.
* @param {object} props data package with the following format:
* {
* organization: {name: <some name>, title: <some title> },
* title: <Data package title>
* name: <Data package name>
* description: <description of data package>
* notes: <Notes associated with the data package>
* }
* @returns React Component
*/
var Item = function Item(_ref) {
var dataset = _ref.dataset;
return /*#__PURE__*/React.createElement("div", {
className: "mb-6"
}, /*#__PURE__*/React.createElement("h3", {
className: "text-xl font-semibold"
}, /*#__PURE__*/React.createElement(Link, {
href: "/@".concat(dataset.organization ? dataset.organization.name : 'dataset', "/").concat(dataset.name)
}, /*#__PURE__*/React.createElement("a", {
className: "text-primary"
}, dataset.title || dataset.name))), /*#__PURE__*/React.createElement(Link, {
href: "/@".concat(dataset.organization ? dataset.organization.name : 'dataset')
}, /*#__PURE__*/React.createElement("a", {
className: "text-gray-500 block mt-1"
}, dataset.organization ? dataset.organization.title : 'dataset')), /*#__PURE__*/React.createElement("div", {
className: "leading-relaxed mt-2"
}, dataset.description || dataset.notes));
};
Item.propTypes = {
dataset: PropTypes.object.isRequired
};
/**
* Displays the total search result
* @param {object} props
* {
* count: The total number of search results
* }
* @returns React Component
*/
var Total = function Total(_ref) {
var count = _ref.count;
return /*#__PURE__*/React.createElement("h1", {
className: "text-3xl font-semibold text-primary my-6 inline-block"
}, count, " results found");
};
Total.propTypes = {
count: PropTypes.number.isRequired
};
export { CustomLink, DataExplorer, ErrorMessage as Error, Form, Item, Total as ItemTotal, KeyInfo, Nav, Org, PlotlyChart, Post, PostList, ReadMe, Recent, ResourcesInfo as ResourceInfo, Table };

20
src/components/blog/Post.js
View File

@ -5,24 +5,24 @@ import parse from 'html-react-parser';
/**
* Displays a blog post page
* @param {object} props
* {
* post = {
* title: <The title of the blog post>
* content: <The body of the blog post>
* modified: <The utc date when the post was last modified.
* featured_image: <Url/relative url to post cover image
* content: <The body of the blog post. Can be plain text or html>
* createdAt: <The utc date when the post was last modified>.
* featuredImage: <Url/relative url to post cover image>
* }
* @returns
*/
const Post = ({ page }) => {
const { title, content, modified, featured_image } = page;
const Post = ({ post }) => {
const { title, content, createdAt, featuredImage } = post;
return (
<>
<h1 className="text-3xl font-semibold text-primary my-6 inline-block">
{title}
</h1>
<p className="mb-6">Edited: {modified}</p>
<img src={featured_image} className="mb-6" alt="featured_img" />
<p className="mb-6">Posted: {createdAt}</p>
<img src={featuredImage} className="mb-6" alt="featured_img" />
<div>{parse(content)}</div>
</>
);
@ -33,8 +33,8 @@ Post.propTypes = {
page: PropTypes.shape({
title: PropTypes.string.isRequired,
content: PropTypes.string.isRequired,
modified: PropTypes.string,
featured_image: PropTypes.string,
createdAt: PropTypes.number,
featuredImage: PropTypes.string,
})
}

3
src/components/blog/PostList.js
View File

@ -16,9 +16,6 @@ import parse from 'html-react-parser';
const PostList = ({ posts }) => {
return (
<>
<h1 className="text-3xl font-semibold text-primary my-6 inline-block">
{posts.length} posts found
</h1>
{posts.map((post, index) => (
<div key={index}>
<a

35
src/components/search/Form.js
View File

@ -1,4 +1,4 @@
import React from 'react'
import React, { useState } from 'react'
import PropTypes from 'prop-types';
/**
@ -12,50 +12,33 @@ import PropTypes from 'prop-types';
* }
* @returns
*/
const Form = ({ handleChange, handleSubmit }) => {
const Form = ({ handleSubmit }) => {
const [searchQuery, setSearchQuery] = useState("")
return (
<form onSubmit={handleSubmit} className="items-center">
<form onSubmit={(e) => e.preventDefault()} className="items-center">
<div className="flex">
<input
type="text"
name="q"
value={q}
onChange={handleChange}
name="search#q"
value={searchQuery}
onChange={(e) => { setSearchQuery(e.target.value) }}
placeholder="Search"
aria-label="Search"
className="bg-white focus:outline-none focus:shadow-outline border border-gray-300 w-1/2 rounded-lg py-2 px-4 block appearance-none leading-normal"
/>
<button
onClick={handleSubmit}
onClick={() => handleSubmit(searchQuery)}
type="button"
className="inline-block text-sm px-4 py-3 mx-3 leading-none border rounded text-white bg-black border-black lg:mt-0"
>
Search
</button>
</div>
<div className="inline-block my-6 float-right">
<label htmlFor="field-order-by">Order by:</label>
<select
className="bg-white"
id="field-order-by"
name="sort"
onChange={handleChange}
onBlur={handleChange}
value={sort}
>
<option value="score:desc">Relevance</option>
<option value="title_string:asc">Name Ascending</option>
<option value="title_string:desc">Name Descending</option>
<option value="metadata_modified:desc">Last Modified</option>
<option value="views_recent:desc">Popular</option>
</select>
</div>
</form>
);
};
Form.propTypes = {
handleChange: PropTypes.func.isRequired,
handleSubmit: PropTypes.func.isRequired
}

10
src/index.js
View File

@ -21,6 +21,11 @@ import CustomLink from './components/misc/CustomLink'
import Nav from './components/ui/Nav'
import Recent from './components/ui/Recent'
//UI components
import Form from './components/search/Form'
import Item from './components/search/Item'
import ItemTotal from './components/search/Total'
export {
Table,
PlotlyChart,
@ -34,5 +39,8 @@ export {
PostList,
Org,
Error,
CustomLink
CustomLink,
Form,
Item,
ItemTotal
}

5
yarn.lock
View File

@ -4557,6 +4557,11 @@ data-urls@^2.0.0:
whatwg-mimetype "^2.3.0"
whatwg-url "^8.0.0"
dayjs@^1.10.4:
version "1.10.4"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
debug@2, debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"