From dc2b12641b5b1dd91599dd1d0724708d1e31f805 Mon Sep 17 00:00:00 2001 From: Cody Olsen Date: Tue, 1 Dec 2020 08:48:51 +0100 Subject: [PATCH] fix: API cleanup --- .eslintignore | 7 + .eslintrc.js | 9 + TODO.md | 81 +- docs/StickyNugget.tsx | 3 +- docs/fixtures/Container.tsx | 2 +- docs/style.css | 4 + next.config.js | 1 + package-lock.json | 1320 +++++++++++++++++++++++++++++++- package.json | 12 + pages/fixtures/aside.tsx | 2 +- pages/fixtures/experiments.tsx | 164 ++++ pages/fixtures/scrollable.tsx | 10 +- pages/fixtures/simple.tsx | 2 +- pages/fixtures/sticky.tsx | 4 +- postcss.config.js | 1 + src/BottomSheet.tsx | 517 +++++++++++++ src/DraggableBottomSheet.tsx | 620 --------------- src/hooks.tsx | 200 ++--- src/index.tsx | 118 +-- src/style.css | 8 + src/types.ts | 83 +- src/utils.ts | 18 + tailwind.config.js | 3 + tsconfig.json | 1 + 24 files changed, 2273 insertions(+), 917 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc.js create mode 100644 next.config.js create mode 100644 pages/fixtures/experiments.tsx create mode 100644 src/BottomSheet.tsx delete mode 100644 src/DraggableBottomSheet.tsx diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..afaabb13 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,7 @@ +# Ignore nested node_modules +node_modules/ +coverage/ +dist/ +.cache +.next +.vercel diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..d778d3cf --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,9 @@ +const { version: reactVersion } = require('react/package.json') + +module.exports = { + extends: ['react-app'], + settings: { react: { version: reactVersion } }, + rules: { + 'jsx-a11y/anchor-is-valid': ['off'], + }, +} diff --git a/TODO.md b/TODO.md index 1e77ca94..561821ae 100644 --- a/TODO.md +++ b/TODO.md @@ -3,12 +3,31 @@ Stop relying on memo stuff. If react's render loop triggers, communicate to outside fn's via refs and the like. A change to snap points affects how far one can drag. -- minHeight should be renamed safeHeight or similar, as it denotes the smallest height while still being able to render the drag handle. Isn't it header height technically? -- maxHeight renamed to contentHeight, as that's what it is. -- rename initialHeight to initialSnapPoint. -- rename viewportHeight to maxHeight? -- rename isOpen to open, like the
tag works. -- rename setHeight to setSnapPoint +``` +max-content + The intrinsic preferred width. +min-content + The intrinsic minimum width. +fit-content() + Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, )). + +``` + +hmmmm + +- currentHeight => height +- footerHeight => added +- headerHeight => added +- maxHeight => minHeight, includes header and footer heights, it tries to avoid a scrollbar +- minHeight => gone, used to be header + footer +- viewportHeight => maxHeight +- snap points array is optional + +footerHeight +headerHeight +height +maxHeight +minHeight ## package.json stuffs @@ -21,3 +40,53 @@ A change to snap points affects how far one can drag. - Play icon: https://fontawesome.com/icons/play-circle?style=regular - Phone frame used in logo: https://www.figma.com/community/file/896042888090872154/Mono-Devices-1.0 - iPhone frame used to wrap examples: https://www.figma.com/community/file/858143367356468985/(Variants)-iOS-%26-iPadOS-14-UI-Kit-for-Figma + +# Ok let's map this nonsense + +Consider using a + +```js +const [, nextTick] = useState(0) +nextTick((_) => ++_) +``` + +to force updates. +Fast way to check if there's new snapPoints generated: + +```js +var arr1 = [1, 2, 3, 4, 5] +var arr2 = [1, 2, 3, 4, 5] + +if (JSON.stringify(arr1) === JSON.stringify(arr2)) { + console.log('They are equal!') +} +``` + +Faux plugin architecture. "Plugins" or "hooks" can register in an es6 map if they want to do work before the animation starts, while the bottom sheet is resting in the final state but opacity: 0. This allows setting up focus lock, scroll lock and more ahead of time. Hopefully alleviating a lot of jank. + +a transition to close can be cancelled if the open state is changed back to `true`. +open/close is fairly easy and stabl. snap to snap on the other hand, require diligence in making sure whoever cancels a snap transition, makes sure to send the animation on the right direction. + +## Changes that can happen from React's side of things at any time by means of a prop change + +And that may affect side effects that are running atm + +- isOpen +- snapPoints +- initialHeight + +## Big picture state machines + +- transitioning from closed to open. +- transition to closed while opening but not open. +- transition to open while closing. +- transition to closed after finished opening. +- while opening the user interrupts and starts dragging (should be fine, all work should be done by now.). +- while opening the user keyboard navs, maybe even fucks the scroll. + +- Some hooks care only about if we're on our way to open, or on our way to close. +- Other hooks care about the current drag state. +- Dragging is king, should not be interruptible, but may allow side effects that affect where/how dragging happens. +- Except if the window changes height, maybe respond to header and footer height changes too by interrupting. +- Focus set by keyboard nav or a screen reader can fuck things up. +- Consider two drag modes? One fast, but can get scroll fuckups, one that's like the current one, safe because it changes the height property. diff --git a/docs/StickyNugget.tsx b/docs/StickyNugget.tsx index 5449b6cb..dbb82590 100644 --- a/docs/StickyNugget.tsx +++ b/docs/StickyNugget.tsx @@ -10,7 +10,7 @@ export default function StickyNugget({ example, }: { flip?: boolean - heading: React.ReactNode + heading: string lead: React.ReactNode example: string }) { @@ -64,6 +64,7 @@ export default function StickyNugget({
{active && (