@dbosoft/nextjs-uicore 1.0.3 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/package.json +10 -6
- package/src/subnav/index.tsx +14 -28
- package/src/subnav/partials/CtaLinks/index.tsx +2 -2
- package/src/subnav/partials/MenuItemsDefault/index.tsx +1 -12
- package/src/subnav/partials/MenuItemsOverflow/index.tsx +3 -2
- package/src/subnav/partials/nav-item-text/index.tsx +2 -2
- package/src/tabs/Tabs.tsx +50 -0
- package/src/tabs/TabsClient.tsx +75 -0
- package/src/tabs/index.ts +3 -0
- package/src/tabs/server.ts +2 -0
- package/src/themeselector/index.tsx +119 -0
- package/src/tabs/hooks/use-scroll-left.ts +0 -27
- package/src/tabs/hooks/use-window-size.js +0 -33
- package/src/tabs/icons/chevron-right.svg +0 -1
- package/src/tabs/icons/tooltip.svg +0 -1
- package/src/tabs/index.tsx +0 -102
- package/src/tabs/partials/tab-trigger/index.tsx +0 -66
- package/src/tabs/partials/tab-trigger/style.module.scss +0 -69
- package/src/tabs/partials/tab-triggers/index.tsx +0 -241
- package/src/tabs/partials/tab-triggers/style.module.scss +0 -193
- package/src/tabs/partials/tooltip/index.tsx +0 -112
- package/src/tabs/partials/tooltip/style.module.scss +0 -38
- package/src/tabs/provider.js +0 -18
- package/src/tabs/style.module.css +0 -4
- package/src/tabs/utils/smooth-scroll.js +0 -88
package/src/tabs/provider.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { createContext, useState, useContext, useMemo } from 'react'
|
|
2
|
-
|
|
3
|
-
export function useTabGroups() {
|
|
4
|
-
return useContext(TabContext)
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
const TabContext = createContext()
|
|
8
|
-
|
|
9
|
-
export default function TabProvider({ children }) {
|
|
10
|
-
const [activeTabGroup, setActiveTabGroup] = useState()
|
|
11
|
-
const contextValue = useMemo(() => ({ activeTabGroup, setActiveTabGroup }), [
|
|
12
|
-
activeTabGroup,
|
|
13
|
-
])
|
|
14
|
-
|
|
15
|
-
return (
|
|
16
|
-
<TabContext.Provider value={contextValue}>{children}</TabContext.Provider>
|
|
17
|
-
)
|
|
18
|
-
}
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Animate a smooth scroll to the target element.
|
|
3
|
-
*
|
|
4
|
-
* Process:
|
|
5
|
-
* 1. Determine target distance change, using current and target positions passed
|
|
6
|
-
* Determine target duration of scroll animation, using minDuration and speedPxPerSecond
|
|
7
|
-
* 2. Set startTime of animation using current millis.
|
|
8
|
-
* 3. Request animation frame for step update
|
|
9
|
-
* 4. On step update, calculate elapsed time (t) - currentMillis - startTime
|
|
10
|
-
* Plug t, startPosn, distance, and duration into easeFunction to determine current position.
|
|
11
|
-
* Update scroll position of target element (X and Y)
|
|
12
|
-
* Request another animation frame
|
|
13
|
-
* Repeat step 3 & 4 until animation is complete
|
|
14
|
-
*
|
|
15
|
-
* @param {*} window Window element
|
|
16
|
-
* @param {*} elem target elem to scroll to (HTML Element)
|
|
17
|
-
* @param {object} targetPosnInput {x: number, y: number}
|
|
18
|
-
* @param {object} [optionsIn] {speedPxPerSecond: number, minDuration: number}
|
|
19
|
-
*/
|
|
20
|
-
function smoothScroll(window, elem, targetPosnInput, optionsIn) {
|
|
21
|
-
const elemIsWindow = elem.toString() === '[object Window]'
|
|
22
|
-
|
|
23
|
-
// Parse options or fall back to defaults
|
|
24
|
-
const options = {
|
|
25
|
-
speedPxPerSecond: (optionsIn && optionsIn.speedPxPerSecond) || 900,
|
|
26
|
-
minDuration: (optionsIn && optionsIn.minDuration) || 200,
|
|
27
|
-
maxDuration: (optionsIn && optionsIn.maxDuration) || 600,
|
|
28
|
-
}
|
|
29
|
-
const { speedPxPerSecond, minDuration, maxDuration } = options
|
|
30
|
-
// Determine target distance change, using current and target positions passed
|
|
31
|
-
const startPosn = {
|
|
32
|
-
x: elemIsWindow ? elem.scrollX : elem.scrollLeft,
|
|
33
|
-
y: elemIsWindow ? elem.scrollY : elem.scrollTop,
|
|
34
|
-
}
|
|
35
|
-
const targetPosn = {
|
|
36
|
-
x: targetPosnInput.x || startPosn.x,
|
|
37
|
-
y: targetPosnInput.y || startPosn.y,
|
|
38
|
-
}
|
|
39
|
-
const { x, y } = targetPosn
|
|
40
|
-
const deltaX = x - startPosn.x
|
|
41
|
-
const deltaY = y - startPosn.y
|
|
42
|
-
// Determine target duration of scroll animation, using minDuration and speedPxPerSecond
|
|
43
|
-
const durationCalc =
|
|
44
|
-
(Math.max(Math.abs(deltaX), Math.abs(deltaY)) * 1000) / speedPxPerSecond
|
|
45
|
-
// Account for minDuration option
|
|
46
|
-
const duration = Math.min(Math.max(durationCalc, minDuration), maxDuration)
|
|
47
|
-
// Set startTime of animation using current millis.
|
|
48
|
-
const startTime = Date.now()
|
|
49
|
-
// Define step function
|
|
50
|
-
function smoothScrollStep() {
|
|
51
|
-
const elapsedTime = Date.now() - startTime
|
|
52
|
-
const atEnd = elapsedTime >= duration
|
|
53
|
-
const targetXPosn = atEnd
|
|
54
|
-
? startPosn.x + deltaX
|
|
55
|
-
: easeInOutQuad(elapsedTime, startPosn.x, deltaX, duration)
|
|
56
|
-
const targetYPosn = atEnd
|
|
57
|
-
? startPosn.y + deltaY
|
|
58
|
-
: easeInOutQuad(elapsedTime, startPosn.y, deltaY, duration)
|
|
59
|
-
if (elemIsWindow) {
|
|
60
|
-
elem.scroll(targetXPosn, targetYPosn)
|
|
61
|
-
} else {
|
|
62
|
-
elem.scrollLeft = targetXPosn
|
|
63
|
-
elem.scrollTop = targetYPosn
|
|
64
|
-
}
|
|
65
|
-
if (!atEnd) {
|
|
66
|
-
window.requestAnimationFrame(smoothScrollStep)
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
// Request animation frame for initial step
|
|
70
|
-
window.requestAnimationFrame(smoothScrollStep)
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* Quadratic easing function
|
|
75
|
-
* From https://github.com/danro/jquery-easing/blob/master/jquery.easing.js
|
|
76
|
-
*
|
|
77
|
-
* @param {number} t current time
|
|
78
|
-
* @param {number} b beginning value
|
|
79
|
-
* @param {number} c change in value
|
|
80
|
-
* @param {number} d duration
|
|
81
|
-
* @returns {number} eased value
|
|
82
|
-
*/
|
|
83
|
-
const easeInOutQuad = function (t, b, c, d) {
|
|
84
|
-
if ((t /= d / 2) < 1) return (c / 2) * t * t + b
|
|
85
|
-
return (-c / 2) * (--t * (t - 2) - 1) + b
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
export default smoothScroll
|