diff --git a/packages/overlayscrollbars-react/package.json b/packages/overlayscrollbars-react/package.json index e247367..c893210 100644 --- a/packages/overlayscrollbars-react/package.json +++ b/packages/overlayscrollbars-react/package.json @@ -16,6 +16,7 @@ "overlayscrollbars", "react", "component", + "hook", "hooks", "styleable", "scrollbar", diff --git a/packages/overlayscrollbars-svelte/CHANGELOG.md b/packages/overlayscrollbars-svelte/CHANGELOG.md new file mode 100644 index 0000000..7dd197a --- /dev/null +++ b/packages/overlayscrollbars-svelte/CHANGELOG.md @@ -0,0 +1,6 @@ +# Changelog + +## 0.4.0 + +The component was created. +Depends on `OverlayScrollbars` version `^2.0.0` and `Svelte` version `^3.44.0`. diff --git a/packages/overlayscrollbars-vue/README.md b/packages/overlayscrollbars-vue/README.md index 724e5cb..076c46c 100644 --- a/packages/overlayscrollbars-vue/README.md +++ b/packages/overlayscrollbars-vue/README.md @@ -115,9 +115,26 @@ import { useOverlayScrollbars } from "overlayscrollbars-vue"; // example usage const Component = { setup() { + const div = ref(null); const reactiveParams = reactive({ options, events }); const [initialize, instance] = useOverlayScrollbars(reactiveParams); - const div = ref(null); + + /** + * or: + * + * const params = ref<{ options?: PartialOptions; events?: EventListeners } | undefined>(); + * const [initialize, instance] = useOverlayScrollbars(params); + * + * or: + * + * const options = ref(); + * const events = ref(); + * const [initialize, instance] = useOverlayScrollbars({ + * options, + * events, + * }); + * + */ onMounted(() => { initialize({ target: div.value }); diff --git a/packages/overlayscrollbars-vue/src/useOverlayScrollbars.ts b/packages/overlayscrollbars-vue/src/useOverlayScrollbars.ts index e9ef414..087d296 100644 --- a/packages/overlayscrollbars-vue/src/useOverlayScrollbars.ts +++ b/packages/overlayscrollbars-vue/src/useOverlayScrollbars.ts @@ -1,20 +1,21 @@ import { shallowRef, unref, watch } from 'vue'; import { OverlayScrollbars } from 'overlayscrollbars'; -import type { Ref } from 'vue'; +import type { Ref, UnwrapRef } from 'vue'; import type { InitializationTarget } from 'overlayscrollbars'; import type { OverlayScrollbarsComponentProps, OverlayScrollbarsComponentRef, } from './OverlayScrollbarsComponent.types'; -type Options = OverlayScrollbarsComponentProps['options']; -type Events = OverlayScrollbarsComponentProps['events']; - export interface UseOverlayScrollbarsParams { /** OverlayScrollbars options. */ - options?: Options | Ref; + options?: + | OverlayScrollbarsComponentProps['options'] + | Ref; /** OverlayScrollbars events. */ - events?: Events | Ref; + events?: + | OverlayScrollbarsComponentProps['events'] + | Ref; } export type UseOverlayScrollbarsInitialization = ( @@ -33,25 +34,17 @@ export type UseOverlayScrollbarsInstance = () => ReturnType< * The second value is a function which returns the current OverlayScrollbars instance or `null` if not initialized. */ export const useOverlayScrollbars = ( - params?: UseOverlayScrollbarsParams | Ref + params?: UseOverlayScrollbarsParams | Ref ): [UseOverlayScrollbarsInitialization, UseOverlayScrollbarsInstance] => { + let instance: ReturnType = null; + let options: UnwrapRef; + let events: UnwrapRef; const paramsRef = shallowRef(params || {}); - const variables = shallowRef<{ - instance: ReturnType; - options?: Options; - events?: Events; - }>({ - instance: null, - }); watch( - () => unref(paramsRef.value.options), - (options) => { - const { - value: { instance }, - } = variables; - - variables.value.options = options; + () => unref(paramsRef.value?.options), + (currOptions) => { + options = currOptions; if (OverlayScrollbars.valid(instance)) { instance.options(options || {}, true); @@ -61,13 +54,9 @@ export const useOverlayScrollbars = ( ); watch( - () => unref(paramsRef.value.events), - (events) => { - const { - value: { instance }, - } = variables; - - variables.value.events = events; + () => unref(paramsRef.value?.events), + (currEvents) => { + events = currEvents; if (OverlayScrollbars.valid(instance)) { instance.on( @@ -83,23 +72,12 @@ export const useOverlayScrollbars = ( return [ (target: InitializationTarget): OverlayScrollbars => { // if already initialized return the current instance - const { - value: { instance, options, events }, - } = variables; if (OverlayScrollbars.valid(instance)) { return instance; } - const currOptions = options || {}; - const currEvents = events || {}; - const osInstance = (variables.value.instance = OverlayScrollbars( - target, - currOptions, - currEvents - )); - - return osInstance; + return (instance = OverlayScrollbars(target, options || {}, events || {})); }, - () => variables.value.instance, + () => instance, ]; }; diff --git a/packages/overlayscrollbars-vue/test/useOverlayScrollbars.test.tsx b/packages/overlayscrollbars-vue/test/useOverlayScrollbars.test.tsx index 4d070bf..92ab45b 100644 --- a/packages/overlayscrollbars-vue/test/useOverlayScrollbars.test.tsx +++ b/packages/overlayscrollbars-vue/test/useOverlayScrollbars.test.tsx @@ -100,7 +100,7 @@ describe('useOverlayScrollbars', () => { render({ setup() { const div = ref(null); - const params = ref<{ options?: PartialOptions; events?: EventListeners }>({}); + const params = ref<{ options?: PartialOptions; events?: EventListeners } | undefined>(); const [initialize, instance] = useOverlayScrollbars(params); onMounted(() => { @@ -108,7 +108,7 @@ describe('useOverlayScrollbars', () => { }); watchPostEffect(() => { - if (params.value.events?.updated) { + if (params.value?.events?.updated) { instance()?.update(true); } }); @@ -118,6 +118,7 @@ describe('useOverlayScrollbars', () => {