diff --git a/website/plasma-theme-builder/package-lock.json b/website/plasma-theme-builder/package-lock.json
index dabafc1f13..e68be29aaa 100644
--- a/website/plasma-theme-builder/package-lock.json
+++ b/website/plasma-theme-builder/package-lock.json
@@ -1,14 +1,14 @@
{
"name": "@salutejs/plasma-theme-builder",
- "version": "1.234.0",
+ "version": "1.235.0-dev.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@salutejs/plasma-theme-builder",
- "version": "1.234.0",
+ "version": "1.235.0-dev.0",
"dependencies": {
- "@salutejs/plasma-b2c": "1.381.0",
+ "@salutejs/plasma-b2c": "1.382.0-dev.0",
"@salutejs/plasma-colors": "0.13.0",
"@salutejs/plasma-icons": "1.203.0",
"@salutejs/plasma-tokens-b2b": "1.41.0",
@@ -3650,14 +3650,14 @@
"integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
},
"node_modules/@salutejs/plasma-b2c": {
- "version": "1.378.1-dev.0",
- "resolved": "https://registry.npmjs.org/@salutejs/plasma-b2c/-/plasma-b2c-1.378.1-dev.0.tgz",
- "integrity": "sha512-c4dadHyKv8inXf/xre9dugLBpy7DHaxn6aFmYW8ajYyi1mk3JnD2AoDb4WZLKLG4t4DPNpR3bVxKmTYnWXhk5g==",
- "dependencies": {
- "@salutejs/plasma-core": "1.175.0-dev.0",
- "@salutejs/plasma-hope": "1.304.0-dev.0",
- "@salutejs/plasma-new-hope": "0.130.1-dev.0",
- "@salutejs/plasma-themes": "0.15.0-dev.0",
+ "version": "1.382.0-dev.0",
+ "resolved": "https://registry.npmjs.org/@salutejs/plasma-b2c/-/plasma-b2c-1.382.0-dev.0.tgz",
+ "integrity": "sha512-uvFJCbQZERpyRHxTN//xZ3vqFkH1qsgZS4FQ7c5UeHuqjfR8IRQTsFmiGwojwmp+R31jg+gK2+qwoW+q/3/5Dg==",
+ "dependencies": {
+ "@salutejs/plasma-core": "1.176.0",
+ "@salutejs/plasma-hope": "1.306.0",
+ "@salutejs/plasma-new-hope": "0.134.0-dev.0",
+ "@salutejs/plasma-themes": "0.16.0",
"@salutejs/plasma-tokens-b2c": "0.51.0",
"@salutejs/plasma-tokens-web": "1.56.0",
"@salutejs/plasma-typo": "0.40.0"
@@ -3675,9 +3675,9 @@
"integrity": "sha512-EUhA9QJ2/uTwGVrqH0He3qq+d7h3x5aEVb8VfOwDlT9oF5gpT6DMWfQ6dzJcEAnXIAY8TSXLYQJI4iWAwCAd+w=="
},
"node_modules/@salutejs/plasma-core": {
- "version": "1.175.0-dev.0",
- "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.175.0-dev.0.tgz",
- "integrity": "sha512-R0UPvzmHEI6fg+u6+wTDahjdgv61AHnXtObcVGfB80lgirQwjeU86yHK7vICBRf/dTypyLnUgvITwZpOL/4N4Q==",
+ "version": "1.176.0",
+ "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.176.0.tgz",
+ "integrity": "sha512-8CaYJ/Ey+FqH7Mi/LjAdosKlnhFAQ/BsRgwNk8ZN3H/CgxuOTyh3rmaFAmci7q9TjYkSHf+pDk8vcO2KVImhAg==",
"dependencies": {
"@popperjs/core": "2.9.2",
"@salutejs/plasma-typo": "0.40.0",
@@ -3693,12 +3693,12 @@
}
},
"node_modules/@salutejs/plasma-hope": {
- "version": "1.304.0-dev.0",
- "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.304.0-dev.0.tgz",
- "integrity": "sha512-/WIA4pSBP7kkBOOyaGcD6EPSScdYS78uRbhClto0Bj4aPOBRGvpBKaRmMdUUWTClE7G03XDasStc3FbYcvsWsQ==",
+ "version": "1.306.0",
+ "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.306.0.tgz",
+ "integrity": "sha512-/y7eNTmV9sC2Sy3TS3vR19laxdTZGRRnSYBa2k6bkpisu0mmVlzHuxXg792HTVaAyurXugvDwBNSTlsbWM1fwQ==",
"dependencies": {
"@popperjs/core": "2.9.2",
- "@salutejs/plasma-core": "1.175.0-dev.0",
+ "@salutejs/plasma-core": "1.176.0",
"@salutejs/plasma-typo": "0.40.0",
"react-file-drop": "3.1.6",
"react-popper": "2.3.0",
@@ -3713,9 +3713,9 @@
}
},
"node_modules/@salutejs/plasma-icons": {
- "version": "1.202.0-dev.0",
- "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.202.0-dev.0.tgz",
- "integrity": "sha512-BCU+p0h/953sjFAPAelbQwZhWZedA1zkTPI4Ppwo0TlrttoEhj7IjQKOJKK9ndgIl8e32lcXR1cCG36U1UDM1g==",
+ "version": "1.203.0",
+ "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.203.0.tgz",
+ "integrity": "sha512-wDg8Ix5JPLhOh5g1+uyPzEuABRkWzpJzBFSdI5ypSXnNYkryvAI7SX/SluJLLmQGGKOq0rDwsij+LIuXZd3UIw==",
"peerDependencies": {
"react": ">=16.13.1",
"react-dom": ">=16.13.1",
@@ -3723,14 +3723,14 @@
}
},
"node_modules/@salutejs/plasma-new-hope": {
- "version": "0.130.1-dev.0",
- "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.130.1-dev.0.tgz",
- "integrity": "sha512-FT4Kd+7i6d43b6F6ZlSM4+/SIC3vrxg2THZBnv9MMZ7U5pidKlFmcTc5iTTnu29uitqemTDpV9DA172MvArp9Q==",
+ "version": "0.134.0-dev.0",
+ "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.134.0-dev.0.tgz",
+ "integrity": "sha512-PpFnEnBJpNezxS/E9SazmdEAPc7gv5rU6Fr3Ex7aRN0WgDKYCfjQH762kXUMQL6Vf79kdHUhDD3eXjKSElUs/g==",
"dependencies": {
"@linaria/core": "5.0.2",
"@linaria/react": "5.0.3",
"@popperjs/core": "2.11.8",
- "@salutejs/plasma-core": "1.175.0-dev.0",
+ "@salutejs/plasma-core": "1.176.0",
"dayjs": "1.11.11",
"focus-visible": "5.2.0",
"lodash.throttle": "4.1.1",
@@ -3773,9 +3773,9 @@
}
},
"node_modules/@salutejs/plasma-themes": {
- "version": "0.15.0-dev.0",
- "resolved": "https://registry.npmjs.org/@salutejs/plasma-themes/-/plasma-themes-0.15.0-dev.0.tgz",
- "integrity": "sha512-8zm6TORYQH591/m544VVYNEB77mm9Pds3mwOv2qe8B81Qu6pZuCfrTvHGeu4yirYZVj0pN2wPqP2xlctSAZBPw=="
+ "version": "0.16.0",
+ "resolved": "https://registry.npmjs.org/@salutejs/plasma-themes/-/plasma-themes-0.16.0.tgz",
+ "integrity": "sha512-BhAAD1G2q1A74B8CdGxgtzrN1C1nzZcUnbL1yCBbkL9vHSIecvUOHBHGFqgA6z/IAdhIH1cxchP2udl8x675bA=="
},
"node_modules/@salutejs/plasma-tokens-b2b": {
"version": "1.41.0",
@@ -25296,14 +25296,14 @@
}
},
"@salutejs/plasma-b2c": {
- "version": "1.378.1-dev.0",
- "resolved": "https://registry.npmjs.org/@salutejs/plasma-b2c/-/plasma-b2c-1.378.1-dev.0.tgz",
- "integrity": "sha512-c4dadHyKv8inXf/xre9dugLBpy7DHaxn6aFmYW8ajYyi1mk3JnD2AoDb4WZLKLG4t4DPNpR3bVxKmTYnWXhk5g==",
- "requires": {
- "@salutejs/plasma-core": "1.175.0-dev.0",
- "@salutejs/plasma-hope": "1.304.0-dev.0",
- "@salutejs/plasma-new-hope": "0.130.1-dev.0",
- "@salutejs/plasma-themes": "0.15.0-dev.0",
+ "version": "1.382.0-dev.0",
+ "resolved": "https://registry.npmjs.org/@salutejs/plasma-b2c/-/plasma-b2c-1.382.0-dev.0.tgz",
+ "integrity": "sha512-uvFJCbQZERpyRHxTN//xZ3vqFkH1qsgZS4FQ7c5UeHuqjfR8IRQTsFmiGwojwmp+R31jg+gK2+qwoW+q/3/5Dg==",
+ "requires": {
+ "@salutejs/plasma-core": "1.176.0",
+ "@salutejs/plasma-hope": "1.306.0",
+ "@salutejs/plasma-new-hope": "0.134.0-dev.0",
+ "@salutejs/plasma-themes": "0.16.0",
"@salutejs/plasma-tokens-b2c": "0.51.0",
"@salutejs/plasma-tokens-web": "1.56.0",
"@salutejs/plasma-typo": "0.40.0"
@@ -25315,9 +25315,9 @@
"integrity": "sha512-EUhA9QJ2/uTwGVrqH0He3qq+d7h3x5aEVb8VfOwDlT9oF5gpT6DMWfQ6dzJcEAnXIAY8TSXLYQJI4iWAwCAd+w=="
},
"@salutejs/plasma-core": {
- "version": "1.175.0-dev.0",
- "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.175.0-dev.0.tgz",
- "integrity": "sha512-R0UPvzmHEI6fg+u6+wTDahjdgv61AHnXtObcVGfB80lgirQwjeU86yHK7vICBRf/dTypyLnUgvITwZpOL/4N4Q==",
+ "version": "1.176.0",
+ "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.176.0.tgz",
+ "integrity": "sha512-8CaYJ/Ey+FqH7Mi/LjAdosKlnhFAQ/BsRgwNk8ZN3H/CgxuOTyh3rmaFAmci7q9TjYkSHf+pDk8vcO2KVImhAg==",
"requires": {
"@popperjs/core": "2.9.2",
"@salutejs/plasma-typo": "0.40.0",
@@ -25328,12 +25328,12 @@
}
},
"@salutejs/plasma-hope": {
- "version": "1.304.0-dev.0",
- "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.304.0-dev.0.tgz",
- "integrity": "sha512-/WIA4pSBP7kkBOOyaGcD6EPSScdYS78uRbhClto0Bj4aPOBRGvpBKaRmMdUUWTClE7G03XDasStc3FbYcvsWsQ==",
+ "version": "1.306.0",
+ "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.306.0.tgz",
+ "integrity": "sha512-/y7eNTmV9sC2Sy3TS3vR19laxdTZGRRnSYBa2k6bkpisu0mmVlzHuxXg792HTVaAyurXugvDwBNSTlsbWM1fwQ==",
"requires": {
"@popperjs/core": "2.9.2",
- "@salutejs/plasma-core": "1.175.0-dev.0",
+ "@salutejs/plasma-core": "1.176.0",
"@salutejs/plasma-typo": "0.40.0",
"react-file-drop": "3.1.6",
"react-popper": "2.3.0",
@@ -25342,19 +25342,19 @@
}
},
"@salutejs/plasma-icons": {
- "version": "1.202.0-dev.0",
- "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.202.0-dev.0.tgz",
- "integrity": "sha512-BCU+p0h/953sjFAPAelbQwZhWZedA1zkTPI4Ppwo0TlrttoEhj7IjQKOJKK9ndgIl8e32lcXR1cCG36U1UDM1g=="
+ "version": "1.203.0",
+ "resolved": "https://registry.npmjs.org/@salutejs/plasma-icons/-/plasma-icons-1.203.0.tgz",
+ "integrity": "sha512-wDg8Ix5JPLhOh5g1+uyPzEuABRkWzpJzBFSdI5ypSXnNYkryvAI7SX/SluJLLmQGGKOq0rDwsij+LIuXZd3UIw=="
},
"@salutejs/plasma-new-hope": {
- "version": "0.130.1-dev.0",
- "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.130.1-dev.0.tgz",
- "integrity": "sha512-FT4Kd+7i6d43b6F6ZlSM4+/SIC3vrxg2THZBnv9MMZ7U5pidKlFmcTc5iTTnu29uitqemTDpV9DA172MvArp9Q==",
+ "version": "0.134.0-dev.0",
+ "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.134.0-dev.0.tgz",
+ "integrity": "sha512-PpFnEnBJpNezxS/E9SazmdEAPc7gv5rU6Fr3Ex7aRN0WgDKYCfjQH762kXUMQL6Vf79kdHUhDD3eXjKSElUs/g==",
"requires": {
"@linaria/core": "5.0.2",
"@linaria/react": "5.0.3",
"@popperjs/core": "2.11.8",
- "@salutejs/plasma-core": "1.175.0-dev.0",
+ "@salutejs/plasma-core": "1.176.0",
"dayjs": "1.11.11",
"focus-visible": "5.2.0",
"lodash.throttle": "4.1.1",
@@ -25376,9 +25376,9 @@
}
},
"@salutejs/plasma-themes": {
- "version": "0.15.0-dev.0",
- "resolved": "https://registry.npmjs.org/@salutejs/plasma-themes/-/plasma-themes-0.15.0-dev.0.tgz",
- "integrity": "sha512-8zm6TORYQH591/m544VVYNEB77mm9Pds3mwOv2qe8B81Qu6pZuCfrTvHGeu4yirYZVj0pN2wPqP2xlctSAZBPw=="
+ "version": "0.16.0",
+ "resolved": "https://registry.npmjs.org/@salutejs/plasma-themes/-/plasma-themes-0.16.0.tgz",
+ "integrity": "sha512-BhAAD1G2q1A74B8CdGxgtzrN1C1nzZcUnbL1yCBbkL9vHSIecvUOHBHGFqgA6z/IAdhIH1cxchP2udl8x675bA=="
},
"@salutejs/plasma-tokens-b2b": {
"version": "1.41.0",
diff --git a/website/plasma-theme-builder/src/components/App.tsx b/website/plasma-theme-builder/src/components/App.tsx
index 6b96c6fc88..4fe216d4b5 100644
--- a/website/plasma-theme-builder/src/components/App.tsx
+++ b/website/plasma-theme-builder/src/components/App.tsx
@@ -1,17 +1,19 @@
import React, { useCallback, useEffect, useState } from 'react';
import styled, { css } from 'styled-components';
-import { Footer } from './Footer/Footer';
-import { Main } from './Main/Main';
-import { Generator } from './Generator/Generator';
-import { Theme } from './Theme/Theme';
-import { Error } from './Error/Error';
-import { PullRequest } from './PullRequest/PullRequest';
+// import { Footer } from './Footer/Footer';
+// import { Main } from './Main/Main';
+// import { Generator } from './Generator/Generator';
+// import { Theme } from './Theme/Theme';
+// import { Error } from './Error/Error';
+// import { PullRequest } from './PullRequest/PullRequest';
import { useDefaultThemeData, useFetchTheme } from '../hooks';
import { multipleMediaQuery } from './mixins';
import { getURLParams, pushHistoryState } from '../utils';
import type { Theme as ThemeType } from '../types';
+// import { ColorGenerator } from './ColorGenerator/ColorGenerator';
+import { ColorGenerator2 } from './ColorGenerator/ColorGenerator2';
const StyledRoot = styled.div`
min-width: 35rem;
@@ -89,25 +91,27 @@ const App = () => {
setData(data);
}, []);
- return (
-
- {state === PAGE_TYPE.MAIN && }
- {state === PAGE_TYPE.GENERATOR && }
- {state === PAGE_TYPE.THEME && (
-
- )}
- {state === PAGE_TYPE.PULL_REQUEST && }
- {state === PAGE_TYPE.ERROR && }
-
-
- );
+ return ;
+
+ // return (
+ //
+ // {state === PAGE_TYPE.MAIN && }
+ // {/* {state === PAGE_TYPE.GENERATOR && } */}
+ // {state === PAGE_TYPE.THEME && (
+ //
+ // )}
+ // {state === PAGE_TYPE.PULL_REQUEST && }
+ // {state === PAGE_TYPE.ERROR && }
+ // {/* */}
+ //
+ // );
};
export default App;
diff --git a/website/plasma-theme-builder/src/components/ColorGenerator/ColorGenerator2.tsx b/website/plasma-theme-builder/src/components/ColorGenerator/ColorGenerator2.tsx
new file mode 100644
index 0000000000..922801eb57
--- /dev/null
+++ b/website/plasma-theme-builder/src/components/ColorGenerator/ColorGenerator2.tsx
@@ -0,0 +1,290 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+import { general } from '@salutejs/plasma-colors';
+
+const NoScroll = createGlobalStyle`
+ html, body {
+ overscroll-behavior: none;
+ }
+`;
+
+const PaletteContainer = styled.div`
+ width: 100%;
+ height: 100vh;
+ box-sizing: border-box;
+ background-color: #000;
+
+ position: relative;
+`;
+
+export interface BackgroundGradient {
+ 1000: string;
+ 800: string;
+ 500: string;
+ 250: string;
+ 100: string;
+}
+
+const PaletteWrapper = styled.div`
+ position: absolute;
+ inset: 20px;
+ border-radius: 0.5rem;
+
+ overflow: scroll;
+
+ ::-webkit-scrollbar {
+ display: none;
+ }
+ scrollbar-width: none;
+
+ .transitionOpacity {
+ opacity: 1;
+ }
+`;
+
+const PaletteColors = styled.div<{ colors: BackgroundGradient }>`
+ position: absolute;
+ inset: 0;
+
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+
+ /* stylelint-disable */
+ background: linear-gradient(
+ 90deg,
+ ${({ colors }) => colors[1000]} 5%,
+ ${({ colors }) => colors[800]} 30%,
+ ${({ colors }) => colors[500]} 50%,
+ ${({ colors }) => colors[250]} 70%,
+ ${({ colors }) => colors[100]} 95%
+ );
+
+ padding: 2rem;
+ color: #ffffff17;
+ font-size: 4rem;
+`;
+
+const GradientScrollHeight2 = styled.div<{ colors: string[] }>`
+ width: 0.25rem;
+ position: absolute;
+
+ top: 7.375rem;
+ bottom: 4.125rem;
+ left: 1.25rem;
+ border-radius: 0.125rem;
+
+ filter: blur(32px);
+ opacity: 0.6;
+
+ background: linear-gradient(
+ 180deg,
+ ${({ colors }) =>
+ colors.map((color: string, index: number) => `${color} ${(100 / colors.length) * index}%`).join(',')}
+ );
+`;
+
+const GradientScrollHeight = styled.div<{ colors: string[] }>`
+ width: 0.25rem;
+ position: relative;
+
+ --private-gradient-scroll-height: calc(100vh - 4 * 2.875rem);
+ top: 6.125rem;
+ height: var(--private-gradient-scroll-height);
+ left: 1.5rem;
+
+ border-radius: 0.125rem;
+
+ background: linear-gradient(
+ 180deg,
+ ${({ colors }) =>
+ colors.map((color: string, index: number) => `${color} ${(100 / colors.length) * index}%`).join(',')}
+ );
+`;
+
+const Slider = styled.input`
+ appearance: none;
+ background: transparent;
+ cursor: pointer;
+ margin: 0;
+ opacity: 0;
+
+ position: absolute;
+ transform: rotate(90deg);
+ transform-origin: 0 0;
+
+ left: 12px;
+ height: 20px;
+ padding: 0 8px;
+ width: calc(var(--private-gradient-scroll-height) - 16px);
+
+ :focus {
+ outline: none;
+ }
+
+ /* slider thumb */
+ ::-webkit-slider-thumb {
+ appearance: none;
+ position: relative;
+
+ /*custom styles*/
+ border-radius: 0.5rem;
+ height: 0.25rem;
+ width: 0.25rem;
+ outline: 0.5rem solid white;
+ }
+
+ /* slider thumb */
+ ::-moz-range-thumb {
+ border: none;
+ border-radius: 0;
+ background: transparent;
+
+ /*custom styles*/
+ border-radius: 0.5rem;
+ height: 0.25rem;
+ width: 0.25rem;
+ outline: 0.5rem solid white;
+ }
+`;
+
+const Pseudo = styled.div`
+ transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
+ will-change: transform;
+
+ top: 18px;
+
+ position: absolute;
+ border-radius: 0.5rem;
+ height: 0.25rem;
+ width: 0.25rem;
+ outline: 0.5rem solid white;
+`;
+
+// [ ] - придумать как определять мышь или трекапд и в зависимости от этого задавать velocity
+// [x] - придумать как обойти баг, когда при быстром скроле туда/сюда классы не успевают удаляться
+
+const isTrackPad = (e: any) => {
+ // console.log('e.deltaY', e);
+
+ return e.deltaY && !Number.isInteger(e.deltaY) ? false : true;
+};
+
+export const ColorGenerator2: React.FC = () => {
+ const refs = useRef([]);
+ const sliderRef = useRef(null);
+ const delta = useRef(0);
+ const pseudoRef = useRef(null);
+ const velocityRef = useRef(15);
+
+ const [colorIndexValue, setColorIndexValue] = useState(0);
+
+ const gradients = Object.entries(general)
+ .map(([shade, saturation]) => ({
+ shade,
+ colors: {
+ 1000: saturation['1000'],
+ 800: saturation['800'],
+ 500: saturation['500'],
+ 250: saturation['250'],
+ 100: saturation['100'],
+ },
+ }))
+ .slice(0, -2);
+
+ useEffect(() => {
+ refs.current?.[0]?.classList.add('transitionOpacity');
+
+ // document.addEventListener('DOMMouseScroll', (e: any) => {
+ // // var isTouchPad = e.wheelDeltaY ? e.wheelDeltaY === -3 * e.deltaY : e.deltaMode === 0;
+
+ // console.log('test DOMMouseScroll', e);
+ // });
+ }, []);
+
+ useEffect(() => {
+ const MIN = 0;
+ const MAX = 15;
+ const thumbWidth = 20;
+ const de = ((colorIndexValue - MIN) / (MAX - MIN)).toFixed(3);
+
+ pseudoRef.current!.style.transform = `translateY(calc(${de} * calc(var(--private-gradient-scroll-height) - ${thumbWidth}px) - 10px))`;
+ }, [colorIndexValue]);
+
+ const onChangeSliderValue = (event: React.ChangeEvent) => {
+ const selectShadeIndex = Number(event.target.value);
+
+ if (selectShadeIndex < colorIndexValue) {
+ for (let a = 15; a > selectShadeIndex; a--) {
+ refs.current?.[a]?.classList.remove('transitionOpacity');
+ }
+ } else {
+ for (let a = 0; a <= selectShadeIndex; a++) {
+ refs.current?.[a]?.classList.add('transitionOpacity');
+ }
+ }
+
+ delta.current = selectShadeIndex * velocityRef.current;
+ setColorIndexValue(selectShadeIndex);
+ };
+
+ return (
+
+ {
+ console.log('onTouchStart');
+ }}
+ onWheel={(e: React.WheelEvent) => {
+ velocityRef.current = isTrackPad(e) ? 15 : 2; // 2 - для мыши, 15 - для тачпада
+
+ console.log('velocityRef.current', e.deltaY, velocityRef.current);
+
+ const min = 0;
+ const max = 15 * velocityRef.current;
+ if (e.deltaY < 0) {
+ if (delta.current <= min) {
+ delta.current = min;
+ } else {
+ delta.current -= 1;
+ }
+ } else {
+ if (delta.current >= max) {
+ delta.current = max;
+ } else {
+ delta.current += 1;
+ }
+ }
+ const selectShadeIndex = Math.floor(delta.current / velocityRef.current);
+
+ if (e.deltaY > 0) {
+ refs.current?.[selectShadeIndex]?.classList.add('transitionOpacity');
+ } else {
+ refs.current?.[selectShadeIndex + 1]?.classList.remove('transitionOpacity');
+ }
+
+ setColorIndexValue(selectShadeIndex);
+ }}
+ >
+ {gradients.map(({ colors, shade }, index) => (
+ {
+ if (refs.current) {
+ refs.current[index] = el;
+ }
+ }}
+ colors={colors}
+ >
+ {shade}
+
+ ))}
+ item.colors[500])} />
+ item.colors[500])}>
+
+
+
+ {/* */}
+
+
+
+
+ );
+};