diff options
Diffstat (limited to 'src/ui/Selection.js')
| -rw-r--r-- | src/ui/Selection.js | 93 |
1 files changed, 0 insertions, 93 deletions
diff --git a/src/ui/Selection.js b/src/ui/Selection.js deleted file mode 100644 index d8dfa88..0000000 --- a/src/ui/Selection.js +++ /dev/null @@ -1,93 +0,0 @@ -import { h } from 'preact'; -import { useState, useEffect } from 'preact/hooks'; -import cn from 'classnames'; -import css from './css'; -import { Note } from './Note'; - -css` -.drawer { - position: fixed; - inset: 0; - top: auto; - - z-index: 200; - background: var(--theme-note-fg); - - /* wtf webkit */ - -webkit-backface-visibility: hidden; -} - -.drawer .handle { - height: 1.5rem; - margin-bottom: 1rem; -} - -.drawer .handle button { - display: block; - - height: 1rem; - line-height: 1rem; - margin: -1rem auto 0; - padding: 0.25rem; - background: var(--theme-note-bg); - border-radius: 0.2rem; -} - -.drawer .scroller { - display: flex; - overflow: auto; - width: 100%; - - transition: max-height 0.3s; -} - -.drawer .contents { - display: flex; - - align-items: flex-start; - - gap: 1rem; - padding: 0 1.5rem; -} - -.drawer .contents > * { - flex: 0 0 auto; -} -`; - -export const Drawer = ({ height, children }) => { - const [ hidden, setHidden ] = useState(true); - - return ( - <div class="drawer"> - <div class="handle"> - <button onClick={() => setHidden(!hidden)}> - ### - </button> - </div> - <div - class="scroller" - style={{ - height, - 'max-height': hidden ? '1rem' : height, - }} - > - <div class="contents"> - {children} - </div> - </div> - </div> - ); -}; - -export const Selection = ({ items, toggleSelected }) => ( - <Drawer height="8.55rem" > - {items.map((item) => ( - <Note - {...item} - ellipsis - onSelect={toggleSelected} - /> - ))} - </Drawer> -); |
