react-native-pro-accordion 1.0.1
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/README.md +476 -0
- package/index.js +3 -0
- package/lib/commonjs/components/Accordion.js +130 -0
- package/lib/commonjs/components/Accordion.js.map +1 -0
- package/lib/commonjs/components/AccordionContent.js +125 -0
- package/lib/commonjs/components/AccordionContent.js.map +1 -0
- package/lib/commonjs/components/AccordionItem.js +146 -0
- package/lib/commonjs/components/AccordionItem.js.map +1 -0
- package/lib/commonjs/components/AccordionSeparator.js +159 -0
- package/lib/commonjs/components/AccordionSeparator.js.map +1 -0
- package/lib/commonjs/core/AccordionContext.js +82 -0
- package/lib/commonjs/core/AccordionContext.js.map +1 -0
- package/lib/commonjs/core/AccordionRef.js +64 -0
- package/lib/commonjs/core/AccordionRef.js.map +1 -0
- package/lib/commonjs/core/types.js +6 -0
- package/lib/commonjs/core/types.js.map +1 -0
- package/lib/commonjs/hooks/useAccordion.js +18 -0
- package/lib/commonjs/hooks/useAccordion.js.map +1 -0
- package/lib/commonjs/hooks/useAccordionAccessibility.js +39 -0
- package/lib/commonjs/hooks/useAccordionAccessibility.js.map +1 -0
- package/lib/commonjs/hooks/useAccordionAnimation.js +135 -0
- package/lib/commonjs/hooks/useAccordionAnimation.js.map +1 -0
- package/lib/commonjs/hooks/useAccordionKeyboard.js +43 -0
- package/lib/commonjs/hooks/useAccordionKeyboard.js.map +1 -0
- package/lib/commonjs/hooks/useAccordionState.js +96 -0
- package/lib/commonjs/hooks/useAccordionState.js.map +1 -0
- package/lib/commonjs/index.js +176 -0
- package/lib/commonjs/index.js.map +1 -0
- package/lib/commonjs/package.json +1 -0
- package/lib/commonjs/theme/ThemeContext.js +48 -0
- package/lib/commonjs/theme/ThemeContext.js.map +1 -0
- package/lib/commonjs/theme/defaultTheme.js +79 -0
- package/lib/commonjs/theme/defaultTheme.js.map +1 -0
- package/lib/commonjs/theme/types.js +6 -0
- package/lib/commonjs/theme/types.js.map +1 -0
- package/lib/commonjs/utils/animations.js +41 -0
- package/lib/commonjs/utils/animations.js.map +1 -0
- package/lib/commonjs/utils/layout.js +155 -0
- package/lib/commonjs/utils/layout.js.map +1 -0
- package/lib/commonjs/utils/validators.js +26 -0
- package/lib/commonjs/utils/validators.js.map +1 -0
- package/lib/module/components/Accordion.js +125 -0
- package/lib/module/components/Accordion.js.map +1 -0
- package/lib/module/components/AccordionContent.js +120 -0
- package/lib/module/components/AccordionContent.js.map +1 -0
- package/lib/module/components/AccordionItem.js +141 -0
- package/lib/module/components/AccordionItem.js.map +1 -0
- package/lib/module/components/AccordionSeparator.js +155 -0
- package/lib/module/components/AccordionSeparator.js.map +1 -0
- package/lib/module/core/AccordionContext.js +75 -0
- package/lib/module/core/AccordionContext.js.map +1 -0
- package/lib/module/core/AccordionRef.js +59 -0
- package/lib/module/core/AccordionRef.js.map +1 -0
- package/lib/module/core/types.js +136 -0
- package/lib/module/core/types.js.map +1 -0
- package/lib/module/hooks/useAccordion.js +14 -0
- package/lib/module/hooks/useAccordion.js.map +1 -0
- package/lib/module/hooks/useAccordionAccessibility.js +34 -0
- package/lib/module/hooks/useAccordionAccessibility.js.map +1 -0
- package/lib/module/hooks/useAccordionAnimation.js +131 -0
- package/lib/module/hooks/useAccordionAnimation.js.map +1 -0
- package/lib/module/hooks/useAccordionKeyboard.js +38 -0
- package/lib/module/hooks/useAccordionKeyboard.js.map +1 -0
- package/lib/module/hooks/useAccordionState.js +92 -0
- package/lib/module/hooks/useAccordionState.js.map +1 -0
- package/lib/module/index.js +43 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/theme/ThemeContext.js +41 -0
- package/lib/module/theme/ThemeContext.js.map +1 -0
- package/lib/module/theme/defaultTheme.js +75 -0
- package/lib/module/theme/defaultTheme.js.map +1 -0
- package/lib/module/theme/types.js +66 -0
- package/lib/module/theme/types.js.map +1 -0
- package/lib/module/utils/animations.js +35 -0
- package/lib/module/utils/animations.js.map +1 -0
- package/lib/module/utils/layout.js +147 -0
- package/lib/module/utils/layout.js.map +1 -0
- package/lib/module/utils/validators.js +20 -0
- package/lib/module/utils/validators.js.map +1 -0
- package/package.json +25 -0
- package/src/components/Accordion.js +164 -0
- package/src/components/AccordionContent.js +149 -0
- package/src/components/AccordionItem.js +146 -0
- package/src/components/AccordionSeparator.js +168 -0
- package/src/core/AccordionContext.js +86 -0
- package/src/core/AccordionRef.js +69 -0
- package/src/core/types.js +133 -0
- package/src/hooks/useAccordion.js +14 -0
- package/src/hooks/useAccordionAccessibility.js +30 -0
- package/src/hooks/useAccordionAnimation.js +165 -0
- package/src/hooks/useAccordionKeyboard.js +38 -0
- package/src/hooks/useAccordionState.js +119 -0
- package/src/index.js +56 -0
- package/src/theme/ThemeContext.js +40 -0
- package/src/theme/defaultTheme.js +73 -0
- package/src/theme/types.js +63 -0
- package/src/utils/animations.js +38 -0
- package/src/utils/layout.js +138 -0
- package/src/utils/validators.js +20 -0
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useEffect, useRef } from "react";
|
|
4
|
+
import { Platform } from "react-native";
|
|
5
|
+
export const useAccordionKeyboard = props => {
|
|
6
|
+
const {
|
|
7
|
+
onPress,
|
|
8
|
+
disabled = false
|
|
9
|
+
} = props;
|
|
10
|
+
const elementRef = useRef(null);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (Platform.OS !== "web") return;
|
|
13
|
+
const handleKeyPress = event => {
|
|
14
|
+
if (disabled) return;
|
|
15
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
16
|
+
event.preventDefault();
|
|
17
|
+
onPress();
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
const element = elementRef.current;
|
|
21
|
+
if (element) {
|
|
22
|
+
element.addEventListener("keydown", handleKeyPress);
|
|
23
|
+
}
|
|
24
|
+
return () => {
|
|
25
|
+
if (element) {
|
|
26
|
+
element.removeEventListener("keydown", handleKeyPress);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
}, [onPress, disabled]);
|
|
30
|
+
const keyboardProps = Platform.OS === "web" ? {
|
|
31
|
+
tabIndex: disabled ? -1 : 0,
|
|
32
|
+
ref: elementRef
|
|
33
|
+
} : {};
|
|
34
|
+
return {
|
|
35
|
+
keyboardProps
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=useAccordionKeyboard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","Platform","useAccordionKeyboard","props","onPress","disabled","elementRef","OS","handleKeyPress","event","key","preventDefault","element","current","addEventListener","removeEventListener","keyboardProps","tabIndex","ref"],"sourceRoot":"..\\..\\..\\src","sources":["hooks/useAccordionKeyboard.js"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACzC,SAASC,QAAQ,QAAQ,cAAc;AAEvC,OAAO,MAAMC,oBAAoB,GAAIC,KAAK,IAAK;EAC7C,MAAM;IAAEC,OAAO;IAAEC,QAAQ,GAAG;EAAM,CAAC,GAAGF,KAAK;EAC3C,MAAMG,UAAU,GAAGN,MAAM,CAAC,IAAI,CAAC;EAE/BD,SAAS,CAAC,MAAM;IACd,IAAIE,QAAQ,CAACM,EAAE,KAAK,KAAK,EAAE;IAE3B,MAAMC,cAAc,GAAIC,KAAK,IAAK;MAChC,IAAIJ,QAAQ,EAAE;MAEd,IAAII,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,EAAE;QAC9CD,KAAK,CAACE,cAAc,CAAC,CAAC;QACtBP,OAAO,CAAC,CAAC;MACX;IACF,CAAC;IAED,MAAMQ,OAAO,GAAGN,UAAU,CAACO,OAAO;IAClC,IAAID,OAAO,EAAE;MACXA,OAAO,CAACE,gBAAgB,CAAC,SAAS,EAAEN,cAAc,CAAC;IACrD;IAEA,OAAO,MAAM;MACX,IAAII,OAAO,EAAE;QACXA,OAAO,CAACG,mBAAmB,CAAC,SAAS,EAAEP,cAAc,CAAC;MACxD;IACF,CAAC;EACH,CAAC,EAAE,CAACJ,OAAO,EAAEC,QAAQ,CAAC,CAAC;EAEvB,MAAMW,aAAa,GACjBf,QAAQ,CAACM,EAAE,KAAK,KAAK,GACjB;IAAEU,QAAQ,EAAEZ,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC;IAAEa,GAAG,EAAEZ;EAAW,CAAC,GAChD,CAAC,CAAC;EAER,OAAO;IAAEU;EAAc,CAAC;AAC1B,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useState, useCallback, useRef, useEffect } from "react";
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Hook for managing accordion state with controlled/uncontrolled modes
|
|
7
|
+
* @param {Object} options
|
|
8
|
+
* @param {string[]} options.value - Controlled expanded values
|
|
9
|
+
* @param {string[]} options.defaultValue - Default expanded values for uncontrolled mode
|
|
10
|
+
* @param {Function} options.onChange - Callback when expanded values change
|
|
11
|
+
* @param {string} options.mode - 'single' or 'multiple' mode
|
|
12
|
+
* @returns {Object} State management utilities
|
|
13
|
+
*/
|
|
14
|
+
export const useAccordionState = ({
|
|
15
|
+
value,
|
|
16
|
+
defaultValue = [],
|
|
17
|
+
onChange,
|
|
18
|
+
mode = "multiple"
|
|
19
|
+
}) => {
|
|
20
|
+
const isControlled = value !== undefined;
|
|
21
|
+
const [internalExpandedValues, setInternalExpandedValues] = useState(defaultValue);
|
|
22
|
+
const expandedValues = isControlled ? value : internalExpandedValues;
|
|
23
|
+
const expandedValuesRef = useRef(expandedValues);
|
|
24
|
+
expandedValuesRef.current = expandedValues;
|
|
25
|
+
const setExpandedValues = useCallback(newValues => {
|
|
26
|
+
if (!isControlled) {
|
|
27
|
+
setInternalExpandedValues(newValues);
|
|
28
|
+
}
|
|
29
|
+
onChange?.(newValues);
|
|
30
|
+
}, [isControlled, onChange]);
|
|
31
|
+
const isExpanded = useCallback(itemValue => {
|
|
32
|
+
return expandedValues.includes(itemValue);
|
|
33
|
+
}, [expandedValues]);
|
|
34
|
+
const openItem = useCallback(itemValue => {
|
|
35
|
+
if (expandedValues.includes(itemValue)) return;
|
|
36
|
+
let newValues;
|
|
37
|
+
if (mode === "single") {
|
|
38
|
+
newValues = [itemValue];
|
|
39
|
+
} else {
|
|
40
|
+
newValues = [...expandedValues, itemValue];
|
|
41
|
+
}
|
|
42
|
+
setExpandedValues(newValues);
|
|
43
|
+
return newValues;
|
|
44
|
+
}, [expandedValues, mode, setExpandedValues]);
|
|
45
|
+
const closeItem = useCallback(itemValue => {
|
|
46
|
+
if (!expandedValues.includes(itemValue)) return;
|
|
47
|
+
const newValues = expandedValues.filter(v => v !== itemValue);
|
|
48
|
+
setExpandedValues(newValues);
|
|
49
|
+
return newValues;
|
|
50
|
+
}, [expandedValues, setExpandedValues]);
|
|
51
|
+
const toggleItem = useCallback(itemValue => {
|
|
52
|
+
if (expandedValues.includes(itemValue)) {
|
|
53
|
+
return closeItem(itemValue);
|
|
54
|
+
} else {
|
|
55
|
+
return openItem(itemValue);
|
|
56
|
+
}
|
|
57
|
+
}, [expandedValues, openItem, closeItem]);
|
|
58
|
+
const expandAll = useCallback(() => {
|
|
59
|
+
if (mode !== "multiple") return;
|
|
60
|
+
// Note: This requires access to all registered items
|
|
61
|
+
console.warn("expandAll requires all item values to be accessible");
|
|
62
|
+
}, [mode]);
|
|
63
|
+
const collapseAll = useCallback(() => {
|
|
64
|
+
setExpandedValues([]);
|
|
65
|
+
}, [setExpandedValues]);
|
|
66
|
+
const toggleAll = useCallback(() => {
|
|
67
|
+
if (mode !== "multiple") return;
|
|
68
|
+
if (expandedValues.length > 0) {
|
|
69
|
+
collapseAll();
|
|
70
|
+
} else {
|
|
71
|
+
expandAll();
|
|
72
|
+
}
|
|
73
|
+
}, [mode, expandedValues.length, collapseAll, expandAll]);
|
|
74
|
+
const getExpandedItems = useCallback(() => {
|
|
75
|
+
return [...expandedValues];
|
|
76
|
+
}, [expandedValues]);
|
|
77
|
+
return {
|
|
78
|
+
expandedValues,
|
|
79
|
+
expandedValuesRef,
|
|
80
|
+
setExpandedValues,
|
|
81
|
+
isExpanded,
|
|
82
|
+
openItem,
|
|
83
|
+
closeItem,
|
|
84
|
+
toggleItem,
|
|
85
|
+
expandAll,
|
|
86
|
+
collapseAll,
|
|
87
|
+
toggleAll,
|
|
88
|
+
getExpandedItems,
|
|
89
|
+
isControlled
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
//# sourceMappingURL=useAccordionState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useState","useCallback","useRef","useEffect","useAccordionState","value","defaultValue","onChange","mode","isControlled","undefined","internalExpandedValues","setInternalExpandedValues","expandedValues","expandedValuesRef","current","setExpandedValues","newValues","isExpanded","itemValue","includes","openItem","closeItem","filter","v","toggleItem","expandAll","console","warn","collapseAll","toggleAll","length","getExpandedItems"],"sourceRoot":"..\\..\\..\\src","sources":["hooks/useAccordionState.js"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// src/index.js
|
|
4
|
+
// export { Accordion } from "./Accordion";
|
|
5
|
+
// export { AccordionItem } from "./AccordionItem";
|
|
6
|
+
|
|
7
|
+
// Main components
|
|
8
|
+
export { Accordion } from "./components/Accordion.js";
|
|
9
|
+
export { AccordionItem } from "./components/AccordionItem.js";
|
|
10
|
+
export { AccordionContent } from "./components/AccordionContent.js";
|
|
11
|
+
export { AccordionSeparator, NestedAccordionSeparator, DashedSeparator, GradientSeparator } from "./components/AccordionSeparator.js";
|
|
12
|
+
|
|
13
|
+
// Context
|
|
14
|
+
export { useAccordion, AccordionContext } from "./core/AccordionContext.js";
|
|
15
|
+
|
|
16
|
+
// Hooks
|
|
17
|
+
export { useAccordionAccessibility } from "./hooks/useAccordionAccessibility.js";
|
|
18
|
+
export { useAccordionKeyboard } from "./hooks/useAccordionKeyboard.js";
|
|
19
|
+
export { useAccordionState } from "./hooks/useAccordionState.js";
|
|
20
|
+
export { useAccordionAnimation } from "./hooks/useAccordionAnimation.js";
|
|
21
|
+
|
|
22
|
+
// Theme
|
|
23
|
+
export { defaultLightTheme, defaultDarkTheme } from "./theme/defaultTheme.js";
|
|
24
|
+
export { ThemeProvider, useTheme } from "./theme/ThemeContext.js";
|
|
25
|
+
|
|
26
|
+
// Utilities
|
|
27
|
+
export { getAnimatedHeight, getAnimatedOpacity } from "./utils/animations.js";
|
|
28
|
+
export { validateAnimationConfig, validateAccordionMode } from "./utils/validators.js";
|
|
29
|
+
export { useContentHeight, useMultipleContentHeights, animateLayout, scrollToAccordionItem, getElementPosition } from "./utils/layout.js";
|
|
30
|
+
|
|
31
|
+
// Re-export types for JSDoc (for documentation purposes)
|
|
32
|
+
/**
|
|
33
|
+
* @typedef {import('./core/types').AccordionProps} AccordionProps
|
|
34
|
+
* @typedef {import('./core/types').AccordionItemProps} AccordionItemProps
|
|
35
|
+
* @typedef {import('./core/types').AccordionRef} AccordionRef
|
|
36
|
+
* @typedef {import('./core/types').AccordionTheme} AccordionTheme
|
|
37
|
+
* @typedef {import('./core/types').AnimationConfig} AnimationConfig
|
|
38
|
+
* @typedef {import('./core/types').TimingAnimationConfig} TimingAnimationConfig
|
|
39
|
+
* @typedef {import('./core/types').SpringAnimationConfig} SpringAnimationConfig
|
|
40
|
+
* @typedef {import('./core/types').AnimationType} AnimationType
|
|
41
|
+
* @typedef {import('./core/types').AccordionEventHandlers} AccordionEventHandlers
|
|
42
|
+
*/
|
|
43
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Accordion","AccordionItem","AccordionContent","AccordionSeparator","NestedAccordionSeparator","DashedSeparator","GradientSeparator","useAccordion","AccordionContext","useAccordionAccessibility","useAccordionKeyboard","useAccordionState","useAccordionAnimation","defaultLightTheme","defaultDarkTheme","ThemeProvider","useTheme","getAnimatedHeight","getAnimatedOpacity","validateAnimationConfig","validateAccordionMode","useContentHeight","useMultipleContentHeights","animateLayout","scrollToAccordionItem","getElementPosition"],"sourceRoot":"..\\..\\src","sources":["index.js"],"mappings":";;AAAA;AACA;AACA;;AAEA;AACA,SAASA,SAAS,QAAQ,2BAAwB;AAClD,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,gBAAgB,QAAQ,kCAA+B;AAChE,SACEC,kBAAkB,EAClBC,wBAAwB,EACxBC,eAAe,EACfC,iBAAiB,QACZ,oCAAiC;;AAExC;AACA,SAASC,YAAY,EAAEC,gBAAgB,QAAQ,4BAAyB;;AAExE;AACA,SAASC,yBAAyB,QAAQ,sCAAmC;AAC7E,SAASC,oBAAoB,QAAQ,iCAA8B;AACnE,SAASC,iBAAiB,QAAQ,8BAA2B;AAC7D,SAASC,qBAAqB,QAAQ,kCAA+B;;AAErE;AACA,SAASC,iBAAiB,EAAEC,gBAAgB,QAAQ,yBAAsB;AAC1E,SAASC,aAAa,EAAEC,QAAQ,QAAQ,yBAAsB;;AAE9D;AACA,SAASC,iBAAiB,EAAEC,kBAAkB,QAAQ,uBAAoB;AAE1E,SACEC,uBAAuB,EACvBC,qBAAqB,QAChB,uBAAoB;AAE3B,SACEC,gBAAgB,EAChBC,yBAAyB,EACzBC,aAAa,EACbC,qBAAqB,EACrBC,kBAAkB,QACb,mBAAgB;;AAEvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import React, { createContext, useContext, useMemo } from "react";
|
|
4
|
+
import { defaultLightTheme, defaultDarkTheme } from "./defaultTheme.js";
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
const ThemeContext = /*#__PURE__*/createContext(undefined);
|
|
7
|
+
export const ThemeProvider = ({
|
|
8
|
+
children,
|
|
9
|
+
theme: customTheme,
|
|
10
|
+
darkMode = false,
|
|
11
|
+
onDarkModeChange
|
|
12
|
+
}) => {
|
|
13
|
+
const baseTheme = darkMode ? defaultDarkTheme : defaultLightTheme;
|
|
14
|
+
const theme = useMemo(() => ({
|
|
15
|
+
...baseTheme,
|
|
16
|
+
...customTheme,
|
|
17
|
+
colors: {
|
|
18
|
+
...baseTheme.colors,
|
|
19
|
+
...customTheme?.colors
|
|
20
|
+
}
|
|
21
|
+
}), [baseTheme, customTheme]);
|
|
22
|
+
const setDarkMode = dark => {
|
|
23
|
+
onDarkModeChange?.(dark);
|
|
24
|
+
};
|
|
25
|
+
return /*#__PURE__*/_jsx(ThemeContext.Provider, {
|
|
26
|
+
value: {
|
|
27
|
+
theme,
|
|
28
|
+
darkMode,
|
|
29
|
+
setDarkMode
|
|
30
|
+
},
|
|
31
|
+
children: children
|
|
32
|
+
});
|
|
33
|
+
};
|
|
34
|
+
export const useTheme = () => {
|
|
35
|
+
const context = useContext(ThemeContext);
|
|
36
|
+
if (!context) {
|
|
37
|
+
throw new Error("useTheme must be used within a ThemeProvider");
|
|
38
|
+
}
|
|
39
|
+
return context;
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=ThemeContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","createContext","useContext","useMemo","defaultLightTheme","defaultDarkTheme","jsx","_jsx","ThemeContext","undefined","ThemeProvider","children","theme","customTheme","darkMode","onDarkModeChange","baseTheme","colors","setDarkMode","dark","Provider","value","useTheme","context","Error"],"sourceRoot":"..\\..\\..\\src","sources":["theme/ThemeContext.js"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AACjE,SAASC,iBAAiB,EAAEC,gBAAgB,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAErE,MAAMC,YAAY,gBAAGP,aAAa,CAACQ,SAAS,CAAC;AAE7C,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAC5BC,QAAQ;EACRC,KAAK,EAAEC,WAAW;EAClBC,QAAQ,GAAG,KAAK;EAChBC;AACF,CAAC,KAAK;EACJ,MAAMC,SAAS,GAAGF,QAAQ,GAAGT,gBAAgB,GAAGD,iBAAiB;EAEjE,MAAMQ,KAAK,GAAGT,OAAO,CACnB,OAAO;IACL,GAAGa,SAAS;IACZ,GAAGH,WAAW;IACdI,MAAM,EAAE;MAAE,GAAGD,SAAS,CAACC,MAAM;MAAE,GAAGJ,WAAW,EAAEI;IAAO;EACxD,CAAC,CAAC,EACF,CAACD,SAAS,EAAEH,WAAW,CACzB,CAAC;EAED,MAAMK,WAAW,GAAIC,IAAI,IAAK;IAC5BJ,gBAAgB,GAAGI,IAAI,CAAC;EAC1B,CAAC;EAED,oBACEZ,IAAA,CAACC,YAAY,CAACY,QAAQ;IAACC,KAAK,EAAE;MAAET,KAAK;MAAEE,QAAQ;MAAEI;IAAY,CAAE;IAAAP,QAAA,EAC5DA;EAAQ,CACY,CAAC;AAE5B,CAAC;AAED,OAAO,MAAMW,QAAQ,GAAGA,CAAA,KAAM;EAC5B,MAAMC,OAAO,GAAGrB,UAAU,CAACM,YAAY,CAAC;EACxC,IAAI,CAACe,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,8CAA8C,CAAC;EACjE;EACA,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
export const defaultLightTheme = {
|
|
4
|
+
colors: {
|
|
5
|
+
background: "#FFFFFF",
|
|
6
|
+
surface: "#F5F5F5",
|
|
7
|
+
primary: "#2196F3",
|
|
8
|
+
text: "#000000",
|
|
9
|
+
textSecondary: "#666666",
|
|
10
|
+
border: "#E0E0E0",
|
|
11
|
+
disabled: "#BDBDBD",
|
|
12
|
+
icon: "#666666"
|
|
13
|
+
},
|
|
14
|
+
spacing: {
|
|
15
|
+
xs: 4,
|
|
16
|
+
sm: 8,
|
|
17
|
+
md: 16,
|
|
18
|
+
lg: 24,
|
|
19
|
+
xl: 32
|
|
20
|
+
},
|
|
21
|
+
typography: {
|
|
22
|
+
header: {
|
|
23
|
+
fontSize: 16,
|
|
24
|
+
fontWeight: "500",
|
|
25
|
+
color: "#000000"
|
|
26
|
+
},
|
|
27
|
+
content: {
|
|
28
|
+
fontSize: 14,
|
|
29
|
+
lineHeight: 20,
|
|
30
|
+
color: "#333333"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
borderRadius: {
|
|
34
|
+
sm: 4,
|
|
35
|
+
md: 8,
|
|
36
|
+
lg: 12
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
export const defaultDarkTheme = {
|
|
40
|
+
colors: {
|
|
41
|
+
background: "#121212",
|
|
42
|
+
surface: "#1E1E1E",
|
|
43
|
+
primary: "#64B5F6",
|
|
44
|
+
text: "#FFFFFF",
|
|
45
|
+
textSecondary: "#B0B0B0",
|
|
46
|
+
border: "#2C2C2C",
|
|
47
|
+
disabled: "#6B6B6B",
|
|
48
|
+
icon: "#B0B0B0"
|
|
49
|
+
},
|
|
50
|
+
spacing: {
|
|
51
|
+
xs: 4,
|
|
52
|
+
sm: 8,
|
|
53
|
+
md: 16,
|
|
54
|
+
lg: 24,
|
|
55
|
+
xl: 32
|
|
56
|
+
},
|
|
57
|
+
typography: {
|
|
58
|
+
header: {
|
|
59
|
+
fontSize: 16,
|
|
60
|
+
fontWeight: "500",
|
|
61
|
+
color: "#FFFFFF"
|
|
62
|
+
},
|
|
63
|
+
content: {
|
|
64
|
+
fontSize: 14,
|
|
65
|
+
lineHeight: 20,
|
|
66
|
+
color: "#E0E0E0"
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
borderRadius: {
|
|
70
|
+
sm: 4,
|
|
71
|
+
md: 8,
|
|
72
|
+
lg: 12
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
//# sourceMappingURL=defaultTheme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["defaultLightTheme","colors","background","surface","primary","text","textSecondary","border","disabled","icon","spacing","xs","sm","md","lg","xl","typography","header","fontSize","fontWeight","color","content","lineHeight","borderRadius","defaultDarkTheme"],"sourceRoot":"..\\..\\..\\src","sources":["theme/defaultTheme.js"],"mappings":";;AAAA,OAAO,MAAMA,iBAAiB,GAAG;EAC/BC,MAAM,EAAE;IACNC,UAAU,EAAE,SAAS;IACrBC,OAAO,EAAE,SAAS;IAClBC,OAAO,EAAE,SAAS;IAClBC,IAAI,EAAE,SAAS;IACfC,aAAa,EAAE,SAAS;IACxBC,MAAM,EAAE,SAAS;IACjBC,QAAQ,EAAE,SAAS;IACnBC,IAAI,EAAE;EACR,CAAC;EACDC,OAAO,EAAE;IACPC,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE,EAAE;IACNC,EAAE,EAAE,EAAE;IACNC,EAAE,EAAE;EACN,CAAC;EACDC,UAAU,EAAE;IACVC,MAAM,EAAE;MACNC,QAAQ,EAAE,EAAE;MACZC,UAAU,EAAE,KAAK;MACjBC,KAAK,EAAE;IACT,CAAC;IACDC,OAAO,EAAE;MACPH,QAAQ,EAAE,EAAE;MACZI,UAAU,EAAE,EAAE;MACdF,KAAK,EAAE;IACT;EACF,CAAC;EACDG,YAAY,EAAE;IACZX,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE;EACN;AACF,CAAC;AAED,OAAO,MAAMU,gBAAgB,GAAG;EAC9BvB,MAAM,EAAE;IACNC,UAAU,EAAE,SAAS;IACrBC,OAAO,EAAE,SAAS;IAClBC,OAAO,EAAE,SAAS;IAClBC,IAAI,EAAE,SAAS;IACfC,aAAa,EAAE,SAAS;IACxBC,MAAM,EAAE,SAAS;IACjBC,QAAQ,EAAE,SAAS;IACnBC,IAAI,EAAE;EACR,CAAC;EACDC,OAAO,EAAE;IACPC,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE,EAAE;IACNC,EAAE,EAAE,EAAE;IACNC,EAAE,EAAE;EACN,CAAC;EACDC,UAAU,EAAE;IACVC,MAAM,EAAE;MACNC,QAAQ,EAAE,EAAE;MACZC,UAAU,EAAE,KAAK;MACjBC,KAAK,EAAE;IACT,CAAC;IACDC,OAAO,EAAE;MACPH,QAAQ,EAAE,EAAE;MACZI,UAAU,EAAE,EAAE;MACdF,KAAK,EAAE;IACT;EACF,CAAC;EACDG,YAAY,EAAE;IACZX,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE;EACN;AACF,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Theme type definitions for JSDoc
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* @typedef {Object} ThemeColors
|
|
9
|
+
* @property {string} background - Background color
|
|
10
|
+
* @property {string} surface - Surface/card color
|
|
11
|
+
* @property {string} primary - Primary accent color
|
|
12
|
+
* @property {string} text - Primary text color
|
|
13
|
+
* @property {string} textSecondary - Secondary text color
|
|
14
|
+
* @property {string} border - Border color
|
|
15
|
+
* @property {string} disabled - Disabled state color
|
|
16
|
+
* @property {string} icon - Icon color
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* @typedef {Object} ThemeSpacing
|
|
21
|
+
* @property {number} xs - Extra small spacing (4px)
|
|
22
|
+
* @property {number} sm - Small spacing (8px)
|
|
23
|
+
* @property {number} md - Medium spacing (16px)
|
|
24
|
+
* @property {number} lg - Large spacing (24px)
|
|
25
|
+
* @property {number} xl - Extra large spacing (32px)
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* @typedef {Object} ThemeTypography
|
|
30
|
+
* @property {Object} header - Header text style
|
|
31
|
+
* @property {Object} content - Content text style
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* @typedef {Object} ThemeBorderRadius
|
|
36
|
+
* @property {number} sm - Small border radius (4px)
|
|
37
|
+
* @property {number} md - Medium border radius (8px)
|
|
38
|
+
* @property {number} lg - Large border radius (12px)
|
|
39
|
+
*/
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* @typedef {Object} CompleteAccordionTheme
|
|
43
|
+
* @property {ThemeColors} colors
|
|
44
|
+
* @property {ThemeSpacing} spacing
|
|
45
|
+
* @property {ThemeTypography} typography
|
|
46
|
+
* @property {ThemeBorderRadius} borderRadius
|
|
47
|
+
*/
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* @typedef {Object} ThemeContextValue
|
|
51
|
+
* @property {CompleteAccordionTheme} theme
|
|
52
|
+
* @property {boolean} darkMode
|
|
53
|
+
* @property {Function} setDarkMode
|
|
54
|
+
* @property {Function} toggleDarkMode
|
|
55
|
+
*/
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* @typedef {Object} ThemeProviderProps
|
|
59
|
+
* @property {React.ReactNode} children
|
|
60
|
+
* @property {Partial<CompleteAccordionTheme>} [theme]
|
|
61
|
+
* @property {boolean} [darkMode]
|
|
62
|
+
* @property {Function} [onDarkModeChange]
|
|
63
|
+
*/
|
|
64
|
+
|
|
65
|
+
export {};
|
|
66
|
+
//# sourceMappingURL=types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["theme/types.js"],"mappings":";;AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA","ignoreList":[]}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { withTiming, withSpring, Easing } from "react-native-reanimated";
|
|
4
|
+
export const getAnimatedHeight = (expanded, contentHeight, config) => {
|
|
5
|
+
const toValue = expanded ? contentHeight : 0;
|
|
6
|
+
if (config.type === "spring") {
|
|
7
|
+
return withSpring(toValue, {
|
|
8
|
+
damping: config.damping ?? 10,
|
|
9
|
+
mass: config.mass ?? 1,
|
|
10
|
+
stiffness: config.stiffness ?? 100,
|
|
11
|
+
overshootClamping: config.overshootClamping ?? false,
|
|
12
|
+
restSpeedThreshold: config.restSpeedThreshold ?? 0.01,
|
|
13
|
+
restDisplacementThreshold: config.restDisplacementThreshold ?? 0.01
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
return withTiming(toValue, {
|
|
17
|
+
duration: config.duration ?? 300,
|
|
18
|
+
easing: config.easing ?? Easing.inOut(Easing.ease)
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
export const getAnimatedOpacity = (expanded, config) => {
|
|
22
|
+
const toValue = expanded ? 1 : 0;
|
|
23
|
+
if (config.type === "spring") {
|
|
24
|
+
return withSpring(toValue, {
|
|
25
|
+
damping: config.damping ?? 10,
|
|
26
|
+
mass: config.mass ?? 1,
|
|
27
|
+
stiffness: config.stiffness ?? 100
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
return withTiming(toValue, {
|
|
31
|
+
duration: (config.duration ?? 300) * 0.6,
|
|
32
|
+
easing: config.easing ?? Easing.inOut(Easing.ease)
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
//# sourceMappingURL=animations.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["withTiming","withSpring","Easing","getAnimatedHeight","expanded","contentHeight","config","toValue","type","damping","mass","stiffness","overshootClamping","restSpeedThreshold","restDisplacementThreshold","duration","easing","inOut","ease","getAnimatedOpacity"],"sourceRoot":"..\\..\\..\\src","sources":["utils/animations.js"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,UAAU,EAAEC,MAAM,QAAQ,yBAAyB;AAExE,OAAO,MAAMC,iBAAiB,GAAGA,CAACC,QAAQ,EAAEC,aAAa,EAAEC,MAAM,KAAK;EACpE,MAAMC,OAAO,GAAGH,QAAQ,GAAGC,aAAa,GAAG,CAAC;EAE5C,IAAIC,MAAM,CAACE,IAAI,KAAK,QAAQ,EAAE;IAC5B,OAAOP,UAAU,CAACM,OAAO,EAAE;MACzBE,OAAO,EAAEH,MAAM,CAACG,OAAO,IAAI,EAAE;MAC7BC,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,CAAC;MACtBC,SAAS,EAAEL,MAAM,CAACK,SAAS,IAAI,GAAG;MAClCC,iBAAiB,EAAEN,MAAM,CAACM,iBAAiB,IAAI,KAAK;MACpDC,kBAAkB,EAAEP,MAAM,CAACO,kBAAkB,IAAI,IAAI;MACrDC,yBAAyB,EAAER,MAAM,CAACQ,yBAAyB,IAAI;IACjE,CAAC,CAAC;EACJ;EAEA,OAAOd,UAAU,CAACO,OAAO,EAAE;IACzBQ,QAAQ,EAAET,MAAM,CAACS,QAAQ,IAAI,GAAG;IAChCC,MAAM,EAAEV,MAAM,CAACU,MAAM,IAAId,MAAM,CAACe,KAAK,CAACf,MAAM,CAACgB,IAAI;EACnD,CAAC,CAAC;AACJ,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAGA,CAACf,QAAQ,EAAEE,MAAM,KAAK;EACtD,MAAMC,OAAO,GAAGH,QAAQ,GAAG,CAAC,GAAG,CAAC;EAEhC,IAAIE,MAAM,CAACE,IAAI,KAAK,QAAQ,EAAE;IAC5B,OAAOP,UAAU,CAACM,OAAO,EAAE;MACzBE,OAAO,EAAEH,MAAM,CAACG,OAAO,IAAI,EAAE;MAC7BC,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,CAAC;MACtBC,SAAS,EAAEL,MAAM,CAACK,SAAS,IAAI;IACjC,CAAC,CAAC;EACJ;EAEA,OAAOX,UAAU,CAACO,OAAO,EAAE;IACzBQ,QAAQ,EAAE,CAACT,MAAM,CAACS,QAAQ,IAAI,GAAG,IAAI,GAAG;IACxCC,MAAM,EAAEV,MAAM,CAACU,MAAM,IAAId,MAAM,CAACe,KAAK,CAACf,MAAM,CAACgB,IAAI;EACnD,CAAC,CAAC;AACJ,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useState, useCallback, useRef, useEffect } from "react";
|
|
4
|
+
import { LayoutAnimation, Platform, UIManager } from "react-native";
|
|
5
|
+
|
|
6
|
+
// Enable LayoutAnimation on Android
|
|
7
|
+
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
|
|
8
|
+
UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Hook for measuring content height
|
|
13
|
+
* @returns {Object} Height measurement utilities
|
|
14
|
+
*/
|
|
15
|
+
export const useContentHeight = () => {
|
|
16
|
+
const [height, setHeight] = useState(0);
|
|
17
|
+
const [isMeasured, setIsMeasured] = useState(false);
|
|
18
|
+
const measuredHeightRef = useRef(0);
|
|
19
|
+
const onLayout = useCallback(event => {
|
|
20
|
+
const newHeight = event.nativeEvent.layout.height;
|
|
21
|
+
if (newHeight !== measuredHeightRef.current && newHeight > 0) {
|
|
22
|
+
measuredHeightRef.current = newHeight;
|
|
23
|
+
setHeight(newHeight);
|
|
24
|
+
setIsMeasured(true);
|
|
25
|
+
}
|
|
26
|
+
}, []);
|
|
27
|
+
const resetHeight = useCallback(() => {
|
|
28
|
+
setHeight(0);
|
|
29
|
+
setIsMeasured(false);
|
|
30
|
+
measuredHeightRef.current = 0;
|
|
31
|
+
}, []);
|
|
32
|
+
return {
|
|
33
|
+
height,
|
|
34
|
+
isMeasured,
|
|
35
|
+
onLayout,
|
|
36
|
+
resetHeight
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Hook for measuring multiple content heights
|
|
42
|
+
* @returns {Object} Map of heights for multiple items
|
|
43
|
+
*/
|
|
44
|
+
export const useMultipleContentHeights = () => {
|
|
45
|
+
const [heights, setHeights] = useState({});
|
|
46
|
+
const measuredRefs = useRef({});
|
|
47
|
+
const onLayout = useCallback((id, event) => {
|
|
48
|
+
const newHeight = event.nativeEvent.layout.height;
|
|
49
|
+
if (newHeight !== measuredRefs.current[id] && newHeight > 0) {
|
|
50
|
+
measuredRefs.current[id] = newHeight;
|
|
51
|
+
setHeights(prev => ({
|
|
52
|
+
...prev,
|
|
53
|
+
[id]: newHeight
|
|
54
|
+
}));
|
|
55
|
+
}
|
|
56
|
+
}, []);
|
|
57
|
+
const getHeight = useCallback(id => {
|
|
58
|
+
return heights[id] || 0;
|
|
59
|
+
}, [heights]);
|
|
60
|
+
const resetHeights = useCallback(() => {
|
|
61
|
+
setHeights({});
|
|
62
|
+
measuredRefs.current = {};
|
|
63
|
+
}, []);
|
|
64
|
+
return {
|
|
65
|
+
heights,
|
|
66
|
+
getHeight,
|
|
67
|
+
onLayout,
|
|
68
|
+
resetHeights
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* Animates layout changes
|
|
74
|
+
* @param {Object} config - Animation configuration
|
|
75
|
+
*/
|
|
76
|
+
export const animateLayout = (config = {}) => {
|
|
77
|
+
const {
|
|
78
|
+
duration = 300,
|
|
79
|
+
type = "easeInEaseOut",
|
|
80
|
+
property = "all"
|
|
81
|
+
} = config;
|
|
82
|
+
LayoutAnimation.configureNext(LayoutAnimation.create(duration, type, property));
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Smooth scroll to an accordion item
|
|
87
|
+
* @param {Object} scrollViewRef - Reference to ScrollView
|
|
88
|
+
* @param {number} yPosition - Y position to scroll to
|
|
89
|
+
* @param {Object} options - Scroll options
|
|
90
|
+
*/
|
|
91
|
+
export const scrollToAccordionItem = (scrollViewRef, yPosition, options = {}) => {
|
|
92
|
+
const {
|
|
93
|
+
animated = true,
|
|
94
|
+
duration = 300,
|
|
95
|
+
offset = 0
|
|
96
|
+
} = options;
|
|
97
|
+
if (!scrollViewRef?.current) return;
|
|
98
|
+
const targetY = yPosition - offset;
|
|
99
|
+
if (Platform.OS === "ios") {
|
|
100
|
+
scrollViewRef.current.scrollTo({
|
|
101
|
+
y: targetY,
|
|
102
|
+
animated
|
|
103
|
+
});
|
|
104
|
+
} else {
|
|
105
|
+
if (animated && duration) {
|
|
106
|
+
// For Android with custom duration
|
|
107
|
+
scrollViewRef.current.scrollTo({
|
|
108
|
+
y: targetY,
|
|
109
|
+
animated: false
|
|
110
|
+
});
|
|
111
|
+
// You might need a custom scroll animation library for smooth Android scrolling
|
|
112
|
+
} else {
|
|
113
|
+
scrollViewRef.current.scrollTo({
|
|
114
|
+
y: targetY,
|
|
115
|
+
animated
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* Get element position relative to parent
|
|
123
|
+
* @param {Object} elementRef - Reference to element
|
|
124
|
+
* @returns {Promise<Object>} Position information
|
|
125
|
+
*/
|
|
126
|
+
export const getElementPosition = elementRef => {
|
|
127
|
+
return new Promise(resolve => {
|
|
128
|
+
if (!elementRef?.current) {
|
|
129
|
+
resolve({
|
|
130
|
+
x: 0,
|
|
131
|
+
y: 0,
|
|
132
|
+
width: 0,
|
|
133
|
+
height: 0
|
|
134
|
+
});
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
elementRef.current.measure((x, y, width, height, pageX, pageY) => {
|
|
138
|
+
resolve({
|
|
139
|
+
x: pageX,
|
|
140
|
+
y: pageY,
|
|
141
|
+
width,
|
|
142
|
+
height
|
|
143
|
+
});
|
|
144
|
+
});
|
|
145
|
+
});
|
|
146
|
+
};
|
|
147
|
+
//# sourceMappingURL=layout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useState","useCallback","useRef","useEffect","LayoutAnimation","Platform","UIManager","OS","setLayoutAnimationEnabledExperimental","useContentHeight","height","setHeight","isMeasured","setIsMeasured","measuredHeightRef","onLayout","event","newHeight","nativeEvent","layout","current","resetHeight","useMultipleContentHeights","heights","setHeights","measuredRefs","id","prev","getHeight","resetHeights","animateLayout","config","duration","type","property","configureNext","create","scrollToAccordionItem","scrollViewRef","yPosition","options","animated","offset","targetY","scrollTo","y","getElementPosition","elementRef","Promise","resolve","x","width","measure","pageX","pageY"],"sourceRoot":"..\\..\\..\\src","sources":["utils/layout.js"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
export const validateAnimationConfig = config => {
|
|
4
|
+
if (config.type === "timing") {
|
|
5
|
+
return !(config.duration !== undefined && config.duration <= 0);
|
|
6
|
+
}
|
|
7
|
+
if (config.type === "spring") {
|
|
8
|
+
const {
|
|
9
|
+
damping,
|
|
10
|
+
mass,
|
|
11
|
+
stiffness
|
|
12
|
+
} = config;
|
|
13
|
+
return !(damping !== undefined && damping <= 0 || mass !== undefined && mass <= 0 || stiffness !== undefined && stiffness <= 0);
|
|
14
|
+
}
|
|
15
|
+
return false;
|
|
16
|
+
};
|
|
17
|
+
export const validateAccordionMode = mode => {
|
|
18
|
+
return mode === "single" || mode === "multiple";
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=validators.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["validateAnimationConfig","config","type","duration","undefined","damping","mass","stiffness","validateAccordionMode","mode"],"sourceRoot":"..\\..\\..\\src","sources":["utils/validators.js"],"mappings":";;AAAA,OAAO,MAAMA,uBAAuB,GAAIC,MAAM,IAAK;EACjD,IAAIA,MAAM,CAACC,IAAI,KAAK,QAAQ,EAAE;IAC5B,OAAO,EAAED,MAAM,CAACE,QAAQ,KAAKC,SAAS,IAAIH,MAAM,CAACE,QAAQ,IAAI,CAAC,CAAC;EACjE;EAEA,IAAIF,MAAM,CAACC,IAAI,KAAK,QAAQ,EAAE;IAC5B,MAAM;MAAEG,OAAO;MAAEC,IAAI;MAAEC;IAAU,CAAC,GAAGN,MAAM;IAC3C,OAAO,EACJI,OAAO,KAAKD,SAAS,IAAIC,OAAO,IAAI,CAAC,IACrCC,IAAI,KAAKF,SAAS,IAAIE,IAAI,IAAI,CAAE,IAChCC,SAAS,KAAKH,SAAS,IAAIG,SAAS,IAAI,CAAE,CAC5C;EACH;EAEA,OAAO,KAAK;AACd,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAIC,IAAI,IAAK;EAC7C,OAAOA,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,UAAU;AACjD,CAAC","ignoreList":[]}
|
package/package.json
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "react-native-pro-accordion",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"main": "./lib/commonjs/index.js",
|
|
5
|
+
"module": "./lib/module/index.js",
|
|
6
|
+
"react-native": "./lib/module/index.js",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"files": [
|
|
9
|
+
"lib",
|
|
10
|
+
"src",
|
|
11
|
+
"index.js",
|
|
12
|
+
"README.md"
|
|
13
|
+
],
|
|
14
|
+
"scripts": {
|
|
15
|
+
"build": "bob build"
|
|
16
|
+
},
|
|
17
|
+
"peerDependencies": {
|
|
18
|
+
"react": ">=19.0.0",
|
|
19
|
+
"react-native": ">=0.81.4",
|
|
20
|
+
"react-native-reanimated": ">=3.0.0"
|
|
21
|
+
},
|
|
22
|
+
"devDependencies": {
|
|
23
|
+
"react-native-builder-bob": "^0.30.0"
|
|
24
|
+
}
|
|
25
|
+
}
|