();
36 |
37 | const getScrollRatio = useCallback(() => {
38 | const track = sliderTrackRef.current;
39 | if (track) {
40 | const newScrollRatio = track.scrollLeft / (track.scrollWidth - track.clientWidth);
41 | setScrollRatio(newScrollRatio);
42 | }
43 | }, [
44 | sliderTrackRef,
45 | setScrollRatio,
46 | ]);
47 |
48 | const onScroll = useCallback(() => {
49 | const track = sliderTrackRef.current;
50 |
51 | if (track) {
52 | // prevent compounding events
53 | if (animationFrameID.current) cancelAnimationFrame(animationFrameID.current);
54 | const requestID = requestAnimationFrame(getScrollRatio);
55 | animationFrameID.current = requestID;
56 | }
57 | }, [
58 | sliderTrackRef,
59 | getScrollRatio,
60 | ]);
61 |
62 | // NOTE: handle updates to the track's current scroll, which could originate from either the user or the program
63 | useEffect(() => {
64 | const track = sliderTrackRef.current;
65 |
66 | if (track && hasAddedScrollListener.current === false) {
67 | track.addEventListener('scroll', onScroll, false);
68 | hasAddedScrollListener.current = true;
69 | }
70 |
71 | return () => {
72 | hasAddedScrollListener.current = false;
73 | if (track) {
74 | track.removeEventListener('scroll', onScroll);
75 | }
76 | };
77 | }, [
78 | sliderTrackRef,
79 | onScroll,
80 | ]);
81 |
82 | // NOTE: if the user does not want scroll enabled, we need to remove the event listener without canceling programmatic scroll
83 | useEffect(() => {
84 | const track = sliderTrackRef.current;
85 |
86 | if (track) {
87 | if (!scrollable) {
88 | track.addEventListener('wheel', (e) => { e.preventDefault() })
89 | }
90 | }
91 |
92 | return () => {
93 | if (track) {
94 | track.removeEventListener('scroll', onScroll);
95 | }
96 | }
97 | }, [
98 | scrollable,
99 | onScroll,
100 | sliderTrackRef
101 | ])
102 |
103 | const ghostSlideWidth = getGhostSlideWidth(sliderContext);
104 |
105 | let scrollSnapType;
106 | if (scrollSnap && slideWidth) {
107 | scrollSnapType = !isDragging ? 'x mandatory' : 'none';
108 | }
109 |
110 | return (
111 | {
128 | if (pauseOnHover) setIsPaused(true);
129 | // TODO: fire external methods from props, too
130 | },
131 | onMouseLeave: () => {
132 | if (pauseOnHover) setIsPaused(false);
133 | // TODO: fire external methods from props, too
134 | },
135 | }}
136 | >
137 | {children && children}
138 | {alignLastSlide !== undefined && (
139 |
146 |
147 |
148 | )}
149 |
150 | );
151 | };
152 |
153 | export default SliderTrack;
154 |
--------------------------------------------------------------------------------
/src/index.test.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/faceless-ui/slider/393c5477fdb427879e819ef86480a82238c682ee/src/index.test.js
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { Slide } from './Slide/index.js';
2 | export { SliderProvider } from './SliderProvider/index.js';
3 | export { SliderContext } from './SliderProvider/context.js';
4 | export { SliderButton } from './SliderButton/index.js';
5 | export { SliderNav } from './SliderNav/index.js';
6 | export { SliderProgress } from './SliderProgress/index.js';
7 | export { SliderTrack } from './SliderTrack/index.js';
8 | export { useSlider } from './useSlider/index.js';
9 | export { withSlider } from './withSlider/index.js';
10 | export { DotNav } from './DotNav/index.js';
11 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | export type { ISliderContext } from './SliderProvider/context.js';
2 | export type { SliderSettings, SliderProviderProps } from './SliderProvider/index.js';
3 | export type { ISlide, SlideProps } from './Slide/index.js';
4 | export type { SliderProgressProps, ProgressIndicatorProps } from './SliderProgress/index.js';
5 | export type { SliderButtonProps } from './SliderButton/index.js';
6 | export type { SliderTrackProps } from './SliderTrack/index.js';
7 | export type { DotNavProps } from './DotNav/index.js';
8 |
--------------------------------------------------------------------------------
/src/useSlider/index.tsx:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react';
2 | import { SliderContext } from '../SliderProvider/context.js';
3 | import { ISliderContext } from '../SliderProvider/context.js';
4 |
5 | export const useSlider = (): ISliderContext => useContext(SliderContext);
6 |
--------------------------------------------------------------------------------
/src/withSlider/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useSlider } from '../useSlider/index.js';
3 |
4 | export const withSlider = >(
5 | PassedComponent: React.ComponentType
,
6 | ): React.FC
=> {
7 | const SliderContextWrap: React.FC
= (props) => {
8 | const sliderContext = useSlider();
9 |
10 | return (
11 |
17 | );
18 | };
19 |
20 | return SliderContextWrap;
21 | };
22 |
--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": [
4 | "src/**/*",
5 | ],
6 | }
7 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./dist",
4 | "allowJs": true,
5 | "target": "es6",
6 | "module": "NodeNext",
7 | "moduleResolution": "NodeNext",
8 | "resolveJsonModule": true,
9 | "strict": true,
10 | "sourceMap": true,
11 | "jsx": "react",
12 | "skipLibCheck": true,
13 | "esModuleInterop": true,
14 | "declaration": true,
15 | "declarationDir": "./dist",
16 | "paths": {
17 | "@faceless-ui/slider": ["./src/index.ts"],
18 | },
19 | },
20 | "include": [
21 | "src/**/*",
22 | "demo/**/*",
23 | ],
24 | "exclude": [
25 | "**/*.test.js",
26 | "node_modules"
27 | ]
28 | }
29 |
--------------------------------------------------------------------------------
/webpack.build-demo.config.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import HtmlWebPackPlugin from 'html-webpack-plugin';
3 | import { fileURLToPath } from 'node:url'
4 |
5 | const filename = fileURLToPath(import.meta.url)
6 | const dirname = path.dirname(filename)
7 |
8 | const config = {
9 | devtool: 'source-map',
10 | mode: 'production',
11 | entry: path.resolve(dirname, 'demo/index.tsx'),
12 | output: {
13 | filename: 'demo.bundle.js',
14 | path: path.resolve(dirname, 'dist-demo'),
15 | },
16 | module: {
17 | rules: [
18 | {
19 | test: /\.(js|jsx|ts|tsx)$/,
20 | exclude: /node_modules/,
21 | use: [{
22 | loader: 'ts-loader',
23 | options: {
24 | configFile: 'tsconfig.json',
25 | compilerOptions: {
26 | outDir: "./dist-demo",
27 | declarationDir: undefined,
28 | declaration: false
29 | },
30 | },
31 | }],
32 | },
33 | ],
34 | },
35 | resolve: {
36 | extensions: ['.ts', '.tsx', '.js', '.jsx'],
37 | alias: {
38 | '@faceless-ui/slider': path.resolve(dirname, 'src/index.ts'),
39 | },
40 | extensionAlias: {
41 | '.js': ['.ts', '.js', '.tsx', '.jsx'],
42 | '.mjs': ['.mts', '.mjs'],
43 | },
44 | },
45 | plugins: [
46 | new HtmlWebPackPlugin({
47 | template: 'demo/index.html',
48 | }),
49 | ],
50 | };
51 |
52 | export default config;
53 |
--------------------------------------------------------------------------------
/webpack.dev.config.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import HtmlWebPackPlugin from 'html-webpack-plugin';
3 | import { fileURLToPath } from 'node:url'
4 | import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
5 | import ESLintPlugin from 'eslint-webpack-plugin';
6 |
7 | const filename = fileURLToPath(import.meta.url)
8 | const dirname = path.dirname(filename)
9 |
10 | const config = {
11 | devtool: 'inline-source-map',
12 | mode: 'development',
13 | entry: path.resolve(dirname, 'demo/index.tsx'),
14 | output: {
15 | filename: 'demo.bundle.js',
16 | path: path.resolve(dirname, 'demo'),
17 | },
18 | module: {
19 | rules: [
20 | {
21 | test: /\.tsx?$/,
22 | loader: 'ts-loader',
23 | options: {
24 | transpileOnly: true,
25 | compilerOptions: {
26 | module: "ESNext",
27 | moduleResolution: "node",
28 | }
29 | },
30 | }
31 | ],
32 | },
33 | resolve: {
34 | extensions: ['.ts', '.tsx', '.js', '.jsx'],
35 | alias: {
36 | '@faceless-ui/slider': path.resolve(dirname, 'src/index.ts'),
37 | },
38 | extensionAlias: {
39 | '.js': ['.ts', '.js', '.tsx', '.jsx'],
40 | '.mjs': ['.mts', '.mjs'],
41 | },
42 | },
43 | plugins: [
44 | new ReactRefreshWebpackPlugin(),
45 | new HtmlWebPackPlugin({
46 | template: 'demo/index.html',
47 | }),
48 | new ESLintPlugin({
49 | fix: true,
50 | emitWarning: true,
51 | }),
52 | ],
53 | devServer: {
54 | port: 3000,
55 | host: '0.0.0.0',
56 | },
57 | };
58 |
59 | export default config;
60 |
--------------------------------------------------------------------------------