From 01e90713172ef2e3c2f739a384aefe030db48e03 Mon Sep 17 00:00:00 2001 From: Matthias Giger Date: Wed, 3 Apr 2024 22:01:39 +0200 Subject: [PATCH] fix(modern): remove sketch implementation and reference separate plugin release-npm --- README.md | 3 ++ demo-ssr/package.json | 14 ++--- demo/modern.tsx | 48 ----------------- demo/package.json | 6 +-- demo/test.tsx | 3 -- modern/index.tsx | 118 ------------------------------------------ package.json | 12 ++--- 7 files changed, 17 insertions(+), 187 deletions(-) delete mode 100644 demo/modern.tsx delete mode 100644 modern/index.tsx diff --git a/README.md b/README.md index b4d80f7..5b8eba7 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,9 @@ Indicates possible scroll using a fade effect in elements with overflow. [![npm](https://img.shields.io/npm/v/indicate)](https://npmjs.com/indicate) +> [!TIP] +> A modern React version of this library, called [overflow-scroll-fade](https://github.com/tobua/overflow-scroll-fade), is currently under development. It is much smaller and more performant; however, it does have some limitations, as it requires support for [`scroll-timeline`](https://caniuse.com/mdn-css_properties_scroll-timeline). + ## Installation & Usage ``` diff --git a/demo-ssr/package.json b/demo-ssr/package.json index d1d5277..bc7c11d 100644 --- a/demo-ssr/package.json +++ b/demo-ssr/package.json @@ -17,17 +17,17 @@ "root": true }, "dependencies": { - "next": "14.0.4", + "next": "14.1.4", "react": "18.2.0", "react-dom": "18.2.0", "indicate": "file:.." }, "devDependencies": { - "@types/node": "20.10.5", - "@types/react": "18.2.45", - "@types/react-dom": "18.2.18", - "eslint": "8.56.0", - "eslint-config-next": "14.0.4", - "typescript": "5.3.3" + "@types/node": "20.12.3", + "@types/react": "18.2.74", + "@types/react-dom": "18.2.23", + "eslint": "8.57.0", + "eslint-config-next": "14.1.4", + "typescript": "5.4.3" } } diff --git a/demo/modern.tsx b/demo/modern.tsx deleted file mode 100644 index 986c13b..0000000 --- a/demo/modern.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { Indicate } from 'indicate/modern' -import { Tiles } from 'react-preview' - -export function Modern() { - return ( - <> -

Narrow

- - - -

Wide

- - - -

No overflow

- - - -

Vertical

- -
- -
- - - ) -} diff --git a/demo/package.json b/demo/package.json index 8231752..877f036 100644 --- a/demo/package.json +++ b/demo/package.json @@ -7,9 +7,9 @@ "dependencies": { "exmpl": "^3.1.0", "konfi": "^1.0.0", - "mobx": "^6.12.0", - "mobx-react-lite": "^4.0.5", - "papua": "^5.9.7", + "mobx": "^6.12.3", + "mobx-react-lite": "^4.0.7", + "papua": "^6.0.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/demo/test.tsx b/demo/test.tsx index be4c840..0663bf8 100644 --- a/demo/test.tsx +++ b/demo/test.tsx @@ -5,7 +5,6 @@ import { indicate, remove, Indicate } from 'indicate' import youtube from 'indicate/theme/youtube' import className from 'indicate/theme/class-name' import { Button } from 'markup/Button' -import { Modern } from 'modern' const TableHeader = (name) => ( {

Server-Side Rendering

-

Modern React Implementation

- ) } diff --git a/modern/index.tsx b/modern/index.tsx deleted file mode 100644 index d495398..0000000 --- a/modern/index.tsx +++ /dev/null @@ -1,118 +0,0 @@ -import type { CSSProperties } from 'react' - -type Direction = 'top' | 'right' | 'bottom' | 'left' - -const wrapperStyles: CSSProperties = { - position: 'relative', -} - -const overflowStyles: CSSProperties = { - display: 'flex', - overflow: 'auto', - scrollTimelineName: '--indicate-scroll-element', - scrollTimelineAxis: 'inline', // TODO possibly only one direction supported. -} - -const indicatorStyles = (direction: Direction, horizontal: boolean): CSSProperties => ({ - display: 'flex', - position: 'absolute', - outline: 'none', - border: 'none', - cursor: 'pointer', - padding: 0, - height: horizontal ? '100%' : 20, - width: horizontal ? 20 : '100%', - background: 'red', - animationTimeline: '--indicate-scroll-element', - animationTimingFunction: 'linear', - animationFillMode: 'forwards', - animationName: `indicate-${direction}`, - left: direction === 'left' ? 0 : 'auto', - right: direction === 'right' ? 0 : 'auto', - top: direction === 'top' ? 0 : 'auto', - bottom: direction === 'bottom' ? 0 : 'auto', - opacity: direction === 'left' || direction === 'top' ? 0 : 1, -}) - -const keyframes = `@keyframes indicate-top { - 20% { opacity: 1; } - 100% { opacity: 1; } -} -@keyframes indicate-right { - 80% { opacity: 1; } - 100% { opacity: 0; } -} -@keyframes indicate-bottom { - 80% { opacity: 1; } - 100% { opacity: 0; } -} -@keyframes indicate-left { - 20% { opacity: 1; } - 100% { opacity: 1; } -}` - -const scrollByDirection = { - top: (container: HTMLDivElement) => ({ top: container.scrollTop - container.scrollHeight * 0.2 }), - right: (container: HTMLDivElement) => ({ - left: container.scrollLeft + container.scrollWidth * 0.2, - }), - bottom: (container: HTMLDivElement) => ({ - top: container.scrollTop + container.scrollHeight * 0.2, - }), - left: (container: HTMLDivElement) => ({ - left: container.scrollLeft - container.scrollWidth * 0.2, - }), -} - -function Indicator({ direction, style }: { direction: Direction; style?: CSSProperties }) { - const horizontal = direction === 'left' || direction === 'right' - - return ( -