From 7095bf4a6c2ba2070e780c6333ec4aaa85460b70 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 16 Jun 2020 16:06:50 -0400 Subject: [PATCH] feat: sort documents list --- examples/stories/src/blogs/home-page.mdx | 1 + .../controls-editors-starter.stories.tsx | 1 + .../src/stories/controls-editors.stories.jsx | 1 + .../src/stories/inherit-from-doc.stories.tsx | 1 + .../src/stories/smart-prop-type.stories.js | 1 + .../src/stories/smart-typescript.stories.js | 1 + .../src/stories/stories-csf.stories.js | 1 + ui/app/src/DocumentsList/DocumentsList.tsx | 60 +++++++++++++++---- ui/components/src/ThemeContext/theme.ts | 26 +++++++- 9 files changed, 78 insertions(+), 15 deletions(-) diff --git a/examples/stories/src/blogs/home-page.mdx b/examples/stories/src/blogs/home-page.mdx index 097728368..871ffe6bc 100644 --- a/examples/stories/src/blogs/home-page.mdx +++ b/examples/stories/src/blogs/home-page.mdx @@ -2,6 +2,7 @@ title: Home route: / type: page +author: atanasster fullPage: true --- diff --git a/examples/stories/src/stories/controls-editors-starter.stories.tsx b/examples/stories/src/stories/controls-editors-starter.stories.tsx index 2bacb5538..bcac4aeb6 100644 --- a/examples/stories/src/stories/controls-editors-starter.stories.tsx +++ b/examples/stories/src/stories/controls-editors-starter.stories.tsx @@ -5,6 +5,7 @@ import { ControlTypes } from '@component-controls/core'; export default { title: 'Introduction/Starter', component: Button, + author: 'atanasster', }; interface DocsControlsTable { diff --git a/examples/stories/src/stories/controls-editors.stories.jsx b/examples/stories/src/stories/controls-editors.stories.jsx index 9b242adf8..ceb413376 100644 --- a/examples/stories/src/stories/controls-editors.stories.jsx +++ b/examples/stories/src/stories/controls-editors.stories.jsx @@ -4,6 +4,7 @@ import { ControlTypes } from '@component-controls/core'; export default { title: 'Introduction/Controls', + author: 'atanasster', }; export const textDefaultProp = ({ text }) => text; diff --git a/examples/stories/src/stories/inherit-from-doc.stories.tsx b/examples/stories/src/stories/inherit-from-doc.stories.tsx index 6c79185b5..9b3882e05 100644 --- a/examples/stories/src/stories/inherit-from-doc.stories.tsx +++ b/examples/stories/src/stories/inherit-from-doc.stories.tsx @@ -3,6 +3,7 @@ import { ControlTypes } from '@component-controls/core'; export default { title: 'Introduction/Doc', + author: 'atanasster', controls: { name: { type: ControlTypes.TEXT, diff --git a/examples/stories/src/stories/smart-prop-type.stories.js b/examples/stories/src/stories/smart-prop-type.stories.js index e0f389b29..60cae3ae4 100644 --- a/examples/stories/src/stories/smart-prop-type.stories.js +++ b/examples/stories/src/stories/smart-prop-type.stories.js @@ -3,6 +3,7 @@ import { Button } from '../components/PropTypesButton'; export default { title: 'Introduction/Smart PropTypes', + author: 'atanasster', parameters: { component: Button, }, diff --git a/examples/stories/src/stories/smart-typescript.stories.js b/examples/stories/src/stories/smart-typescript.stories.js index e8aee93a9..457dd0702 100644 --- a/examples/stories/src/stories/smart-typescript.stories.js +++ b/examples/stories/src/stories/smart-typescript.stories.js @@ -3,6 +3,7 @@ import { Button } from '../components/Button'; export default { title: 'Introduction/Smart Typescript', + author: 'atanasster', parameters: { component: Button, }, diff --git a/examples/stories/src/stories/stories-csf.stories.js b/examples/stories/src/stories/stories-csf.stories.js index 499e7545f..68cd5cec7 100644 --- a/examples/stories/src/stories/stories-csf.stories.js +++ b/examples/stories/src/stories/stories-csf.stories.js @@ -5,6 +5,7 @@ import { customStory as customStoryDeconstructedProps } from './external/externa export default { title: 'Introduction/CSF', + author: 'atanasster', }; export const simple = () =>
test
; diff --git a/ui/app/src/DocumentsList/DocumentsList.tsx b/ui/app/src/DocumentsList/DocumentsList.tsx index 93e1bb1c8..bb76c0acd 100644 --- a/ui/app/src/DocumentsList/DocumentsList.tsx +++ b/ui/app/src/DocumentsList/DocumentsList.tsx @@ -1,4 +1,6 @@ -import React, { FC, useContext } from 'react'; +/** @jsx jsx */ +import { FC, useContext, useState, useMemo } from 'react'; +import { jsx, Select, Label, Box } from 'theme-ui'; import { Pages } from '@component-controls/core'; import { BlockContext } from '@component-controls/blocks'; import { DocumentsListItem } from './DocumentsListItem'; @@ -10,22 +12,56 @@ export interface DocumentsListProps { pages: Pages; } +type SortOrder = 'date' | 'dateModified' | 'title'; /** * displays a list of the provided document pages */ export const DocumentsList: FC = ({ pages }) => { const { storeProvider } = useContext(BlockContext); + const [sortOrder, setSortOrder] = useState('date'); + const sortedPages = useMemo(() => { + return pages.sort((p1, p2) => { + const v1: any | undefined = p1[sortOrder]; + const v2: any | undefined = p2[sortOrder]; + if (v1 && v2) { + return sortOrder.startsWith('date') + ? -v1.localeCompare(v2) + : v1.localeCompare(v2); + } + if (!v1 && !v2) { + return 0; + } + return v1 ? -1 : 1; + }); + }, [pages, sortOrder]); return ( -
    - {pages.map(page => ( -
  • - -
    • - ))} -
+ + + + + +
    + {sortedPages.map(page => ( +
  • + +
    • + ))} +
+ ); }; diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts index 58cd8815b..66a9ae799 100644 --- a/ui/components/src/ThemeContext/theme.ts +++ b/ui/components/src/ThemeContext/theme.ts @@ -186,7 +186,7 @@ export const theme: Theme = { }, }, thead: { - borderBottom: '1px solid #999', + borderBottom: (t: Theme) => ` 1px solid ${t.colors?.shadow}`, backgroundColor: 'header', color: 'text', }, @@ -203,7 +203,7 @@ export const theme: Theme = { fontFamily: 'monospace', }, tr: { - borderBottom: '1px solid rgba(0, 0, 0, 0.1)', + borderBottom: (t: Theme) => ` 1px solid ${t.colors?.shadow}`, }, }, actionbar: { @@ -618,7 +618,16 @@ export const theme: Theme = { }, }, documentlistitem: { - container: { display: 'flex', flexDirection: 'column' }, + container: { + display: 'flex', + flexDirection: 'column', + py: 1, + my: 3, + p: { + my: 0, + }, + borderBottom: (t: Theme) => ` 1px solid ${t.colors?.shadow}`, + }, info: { container: { display: 'flex', @@ -663,6 +672,17 @@ export const theme: Theme = { container: {}, pagination: { py: 4 }, }, + documentslist: { + container: {}, + sortrow: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + pb: 3, + }, + sortlabel: { width: 'unset', pr: 2 }, + sortselect: { minWidth: '300px' }, + }, }; export const useTheme = (): Theme => {