@v-miniapp/ui-react 1.0.41 → 1.0.47
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 +1 -1
- package/dist/components/app/types/app.d.ts +10 -0
- package/dist/components/app/utils/data-theme.d.ts +1 -2
- package/dist/components/carousel/index.d.ts +1 -0
- package/dist/external/index.js +2530 -2519
- package/dist/index.js +2308 -2297
- package/dist-storybook/assets/ANIMATION-DLCDVwPI.js +99 -0
- package/dist-storybook/assets/APP_FRAMEWORK-B9Mrudgl.js +197 -0
- package/dist-storybook/assets/BOTTOM_TAB_BAR-Bgfy-nnv.js +175 -0
- package/dist-storybook/assets/CUSTOM_ERROR_BOUNDARY-G_i_6aho.js +250 -0
- package/dist-storybook/assets/Color-AVL7NMMY-OD8SQvXt.js +1 -0
- package/dist-storybook/assets/DocsRenderer-PQXLIZUC-D8kbgtPd.js +2 -0
- package/dist-storybook/assets/GETTING_STARTED-Bf6ENjZo.js +77 -0
- package/dist-storybook/assets/INFINITE_SCROLL-O36i5W8i.js +111 -0
- package/dist-storybook/assets/KEEP_ALIVE-CicDtVw6.js +126 -0
- package/dist-storybook/assets/LOCALE-D_43J3RD.js +465 -0
- package/dist-storybook/assets/MIGRATION_GUIDE-Dn2gFk5v.js +449 -0
- package/dist-storybook/assets/MOBILE_BEHAVIOURS-D5jOxNiz.js +177 -0
- package/dist-storybook/assets/PAGE_LAYOUT-C0sW9iZo.js +192 -0
- package/dist-storybook/assets/ROUTING_NAVIGATION-Bpj_mu5r.js +335 -0
- package/dist-storybook/assets/TAILWIND_INTEGRATION-CVrohRXO.js +87 -0
- package/dist-storybook/assets/THEME_MODE-Sc8cgznR.js +111 -0
- package/dist-storybook/assets/_setToString-CjYxL0rS.js +1 -0
- package/dist-storybook/assets/alert-abKmNYys.js +1 -0
- package/dist-storybook/assets/alert.stories-XyvS4WTm.js +110 -0
- package/dist-storybook/assets/avatar-B-jvPnzm.js +1 -0
- package/dist-storybook/assets/avatar.stories-glTjw5Kd.js +136 -0
- package/dist-storybook/assets/axe-B8nlqekz.js +20 -0
- package/dist-storybook/assets/badge-Cc9u7jBX.js +1 -0
- package/dist-storybook/assets/badge.stories-CeNmmdtv.js +262 -0
- package/dist-storybook/assets/blocks-CpOj9FQ_.js +1243 -0
- package/dist-storybook/assets/bottom-tab-bar-BsPd0FD7.js +115 -0
- package/dist-storybook/assets/bottom-tab-bar.stories-BG1ee2eN.js +186 -0
- package/dist-storybook/assets/button-GtWXUngt.js +1 -0
- package/dist-storybook/assets/button.stories-3d_T0h_Z.js +287 -0
- package/dist-storybook/assets/calendar-CJ5_NxYx.js +1 -0
- package/dist-storybook/assets/calendar.stories-DEleEKoa.js +189 -0
- package/dist-storybook/assets/carousel-sbzGq2WF.js +37 -0
- package/dist-storybook/assets/carousel.stories-DY9nDa3M.js +217 -0
- package/dist-storybook/assets/checkbox-CMpJJxvm.js +1 -0
- package/dist-storybook/assets/checkbox.stories-BY8W9TRC.js +201 -0
- package/dist-storybook/assets/chip-zY6gJxDk.js +247 -0
- package/dist-storybook/assets/chip.stories-CXh30Tdq.js +442 -0
- package/dist-storybook/assets/classname-DoNrELT0.js +1 -0
- package/dist-storybook/assets/colors-_6nFGM3e.js +1 -0
- package/dist-storybook/assets/date-Ci5dIit0.js +1 -0
- package/dist-storybook/assets/date-field.stories-CerGwXZy.js +129 -0
- package/dist-storybook/assets/date-picker-BCIW_1-h.js +1 -0
- package/dist-storybook/assets/date-picker.stories-DUaL7sft.js +123 -0
- package/dist-storybook/assets/default-error-BcnD8fFO.png +0 -0
- package/dist-storybook/assets/dialog.stories-BtQMDA-1.js +212 -0
- package/dist-storybook/assets/dropdown.stories-DF69os0J.js +200 -0
- package/dist-storybook/assets/embla-carousel-react.esm-CCQjHA-d.js +1 -0
- package/dist-storybook/assets/en-Cs9O0XWn.js +15 -0
- package/dist-storybook/assets/icon-TJ3FHxUI.js +1 -0
- package/dist-storybook/assets/icon.stories-Ch36FMIn.js +365 -0
- package/dist-storybook/assets/iframe-CLEfhyJc.js +1071 -0
- package/dist-storybook/assets/iframe-yMKl6hJA.css +1 -0
- package/dist-storybook/assets/image-D6Yo4ht9.js +9 -0
- package/dist-storybook/assets/image.stories-CJPB43ys.js +255 -0
- package/dist-storybook/assets/index-7xlKHfV2.js +1 -0
- package/dist-storybook/assets/index-B-Ksafg0.js +1 -0
- package/dist-storybook/assets/index-CaMbLGUB.js +1 -0
- package/dist-storybook/assets/index-DRIh_SUo.js +1 -0
- package/dist-storybook/assets/input-wrapper-D_9hAdHZ.js +1 -0
- package/dist-storybook/assets/label-fI1oWVKU.js +27 -0
- package/dist-storybook/assets/label.stories-C3xDUHd-.js +138 -0
- package/dist-storybook/assets/matchers-7Z3WT2CE-Dw4MQV_s.js +14 -0
- package/dist-storybook/assets/navigation-bar-CiGSH7u8.js +79 -0
- package/dist-storybook/assets/navigation-bar.stories-BvGp7uJf.js +73 -0
- package/dist-storybook/assets/number-field-DNj4myBV.js +1 -0
- package/dist-storybook/assets/number-field.stories-B_Bj8RqE.js +167 -0
- package/dist-storybook/assets/omit-CStFhbPt.js +1 -0
- package/dist-storybook/assets/option-item-BloohEvW.js +1 -0
- package/dist-storybook/assets/option-item.stories-BjtolfPz.js +66 -0
- package/dist-storybook/assets/pagination-Dcazh6R_.js +1 -0
- package/dist-storybook/assets/pagination.stories-CrGsYeRw.js +91 -0
- package/dist-storybook/assets/pick-DbIUGM9R.js +1 -0
- package/dist-storybook/assets/preload-helper-PPVm8Dsz.js +1 -0
- package/dist-storybook/assets/radio-t2E8E0Oc.js +1 -0
- package/dist-storybook/assets/radio.stories-BEG-zTwI.js +183 -0
- package/dist-storybook/assets/rating-DsULci27.js +1 -0
- package/dist-storybook/assets/rating.stories-Dwk8Ov3Q.js +117 -0
- package/dist-storybook/assets/react-18-4mLDkQmf.js +9 -0
- package/dist-storybook/assets/react-mAVd1wAc.js +1 -0
- package/dist-storybook/assets/search-field-CuiHMy7j.js +1 -0
- package/dist-storybook/assets/search-field.stories-BnsT36yY.js +79 -0
- package/dist-storybook/assets/section-content-pkGNuEs6.js +1 -0
- package/dist-storybook/assets/section.stories-B5IhLkbG.js +69 -0
- package/dist-storybook/assets/sheet.stories-COzxyiqj.js +152 -0
- package/dist-storybook/assets/skeleton-Dn8rwbgX.js +1 -0
- package/dist-storybook/assets/skeleton.stories-B71MlMyi.js +139 -0
- package/dist-storybook/assets/store-D2RudmNr.js +18 -0
- package/dist-storybook/assets/store-DxAqU1JB.js +1 -0
- package/dist-storybook/assets/switch-BziC1t_8.js +1 -0
- package/dist-storybook/assets/switch.stories-DMBBwZef.js +250 -0
- package/dist-storybook/assets/tab-bar-DZ3oOU50.js +31 -0
- package/dist-storybook/assets/tab-bar.stories-Bp9w6nc3.js +136 -0
- package/dist-storybook/assets/text-area-CAmJ2yms.js +1 -0
- package/dist-storybook/assets/text-area.stories-BZ3HXtij.js +87 -0
- package/dist-storybook/assets/text-field-CjrgfYOZ.js +1 -0
- package/dist-storybook/assets/text-field.stories-vSXYvs0U.js +92 -0
- package/dist-storybook/assets/toast-provider-B9k1NBG6.js +9 -0
- package/dist-storybook/assets/toast.stories-DQKbk7dO.js +201 -0
- package/dist-storybook/assets/tooltip-VnA8Hy0S.js +1 -0
- package/dist-storybook/assets/tooltip.stories-wuthZ3Sv.js +153 -0
- package/dist-storybook/assets/typography-DoV67nnS.js +1 -0
- package/dist-storybook/assets/typography.stories-DD9HLY16.js +202 -0
- package/dist-storybook/assets/uploader.stories-sModULvT.js +65 -0
- package/dist-storybook/assets/use-app-pause-BQYQ2_kc.js +29 -0
- package/dist-storybook/assets/use-app-resume-BHDCAORn.js +29 -0
- package/dist-storybook/assets/use-custom-icon-event-BCGSFwaE.js +29 -0
- package/dist-storybook/assets/use-did-hide-Cosc0Bts.js +48 -0
- package/dist-storybook/assets/use-did-show-CTWe5NYk.js +49 -0
- package/dist-storybook/assets/use-histories-CAcE6nVz.js +50 -0
- package/dist-storybook/assets/use-history-FuEbPpap.js +67 -0
- package/dist-storybook/assets/use-location-CdUC1tic.js +56 -0
- package/dist-storybook/assets/use-navigate-DP9paY1K.js +84 -0
- package/dist-storybook/assets/use-navigation-type-BWVxMUtZ.js +44 -0
- package/dist-storybook/assets/use-page-config-5u8OF-8L.js +48 -0
- package/dist-storybook/assets/use-page-scroll-nPQcBn5B.js +69 -0
- package/dist-storybook/assets/use-page-state-CULl52gw.js +79 -0
- package/dist-storybook/assets/use-settings-changed-2GP5ZsJS.js +29 -0
- package/dist-storybook/assets/v-mini-icon-Dn1BmJzb.woff2 +0 -0
- package/dist-storybook/assets/visibility-sensor-huP-8j4n.js +1 -0
- package/dist-storybook/iframe.html +670 -0
- package/dist-storybook/index.html +132 -0
- package/dist-storybook/index.json +1 -0
- package/dist-storybook/project.json +1 -0
- package/dist-storybook/sb-addons/a11y-2/manager-bundle.js +5 -0
- package/dist-storybook/sb-addons/docs-1/manager-bundle.js +151 -0
- package/dist-storybook/sb-addons/storybook-build-3/manager-bundle.js +3 -0
- package/dist-storybook/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +971 -0
- package/dist-storybook/sb-manager/globals-module-info.js +799 -0
- package/dist-storybook/sb-manager/globals-runtime.js +69791 -0
- package/dist-storybook/sb-manager/globals.js +34 -0
- package/dist-storybook/sb-manager/runtime.js +13198 -0
- package/dist-storybook/stories-data.json +374 -0
- package/dist-storybook/vite-inject-mocker-entry.js +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import{j as e}from"./iframe-CLEfhyJc.js";import{useMDXComponents as o}from"./index-7xlKHfV2.js";import{b as r}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";function t(l){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...o(),...l.components};return e.jsxs(e.Fragment,{children:[`
|
|
2
|
+
`,`
|
|
3
|
+
`,e.jsx(r,{title:"Hooks/usePageScroll"}),`
|
|
4
|
+
`,e.jsx(n.h1,{id:"usepagescroll",children:"usePageScroll"}),`
|
|
5
|
+
`,e.jsx(n.p,{children:"Hook để lắng nghe sự kiện scroll của page."}),`
|
|
6
|
+
`,e.jsx(n.h2,{id:"import",children:"Import"}),`
|
|
7
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`import { usePageScroll } from '@v-miniapp/ui-react'
|
|
8
|
+
`})}),`
|
|
9
|
+
`,e.jsx(n.h2,{id:"parameters",children:"Parameters"}),`
|
|
10
|
+
`,e.jsxs(n.ul,{children:[`
|
|
11
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"callback: (target: HTMLDivElement, event: Event) => void"}),": Callback được gọi khi scroll"]}),`
|
|
12
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"options?: IUsePageScrollOptions"}),": Options cho throttle"]}),`
|
|
13
|
+
`]}),`
|
|
14
|
+
`,e.jsx(n.h2,{id:"type-definitions",children:"Type Definitions"}),`
|
|
15
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`type IUsePageScrollOptions = {
|
|
16
|
+
throttle?: ThrottleOptions
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
type ThrottleOptions = {
|
|
20
|
+
wait?: number
|
|
21
|
+
leading?: boolean
|
|
22
|
+
trailing?: boolean
|
|
23
|
+
}
|
|
24
|
+
`})}),`
|
|
25
|
+
`,e.jsx(n.h2,{id:"usage",children:"Usage"}),`
|
|
26
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { usePageScroll } from '@v-miniapp/ui-react'
|
|
27
|
+
|
|
28
|
+
const MyPage = () => {
|
|
29
|
+
usePageScroll((target, event) => {
|
|
30
|
+
console.log('Scroll position:', target.scrollTop)
|
|
31
|
+
// Handle scroll event
|
|
32
|
+
}, {
|
|
33
|
+
throttle: {
|
|
34
|
+
wait: 200, // Throttle 200ms
|
|
35
|
+
trailing: true,
|
|
36
|
+
}
|
|
37
|
+
})
|
|
38
|
+
|
|
39
|
+
return <div>Scroll me</div>
|
|
40
|
+
}
|
|
41
|
+
`})}),`
|
|
42
|
+
`,e.jsx(n.h3,{id:"với-throttle-options",children:"Với throttle options"}),`
|
|
43
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`usePageScroll(
|
|
44
|
+
(target, event) => {
|
|
45
|
+
const scrollTop = target.scrollTop
|
|
46
|
+
const scrollHeight = target.scrollHeight
|
|
47
|
+
const clientHeight = target.clientHeight
|
|
48
|
+
|
|
49
|
+
// Detect scroll to bottom
|
|
50
|
+
if (scrollTop + clientHeight >= scrollHeight - 10) {
|
|
51
|
+
loadMore()
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
throttle: {
|
|
56
|
+
wait: 100,
|
|
57
|
+
leading: false,
|
|
58
|
+
trailing: true,
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
)
|
|
62
|
+
`})}),`
|
|
63
|
+
`,e.jsx(n.h2,{id:"notes",children:"Notes"}),`
|
|
64
|
+
`,e.jsxs(n.ul,{children:[`
|
|
65
|
+
`,e.jsxs(n.li,{children:["Hook chỉ hoạt động khi page được hiển thị (",e.jsx(n.code,{children:"didShow === true"}),")"]}),`
|
|
66
|
+
`,e.jsxs(n.li,{children:["Sử dụng ",e.jsx(n.code,{children:"useThrottleFn"})," từ ",e.jsx(n.code,{children:"ahooks"})," để throttle scroll events (mặc định 200ms)"]}),`
|
|
67
|
+
`,e.jsxs(n.li,{children:["Scroll element là element có ",e.jsx(n.code,{children:'id="vsf-global-page"'})]}),`
|
|
68
|
+
`,e.jsxs(n.li,{children:["Callback nhận 2 parameters: ",e.jsx(n.code,{children:"target"})," (scroll element) và ",e.jsx(n.code,{children:"event"})," (scroll event)"]}),`
|
|
69
|
+
`]})]})}function d(l={}){const{wrapper:n}={...o(),...l.components};return n?e.jsx(n,{...l,children:e.jsx(t,{...l})}):t(l)}export{d as default};
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import{j as e}from"./iframe-CLEfhyJc.js";import{useMDXComponents as i}from"./index-7xlKHfV2.js";import{b as s}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";function a(t){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...i(),...t.components};return e.jsxs(e.Fragment,{children:[`
|
|
2
|
+
`,`
|
|
3
|
+
`,e.jsx(s,{title:"Hooks/usePageState"}),`
|
|
4
|
+
`,e.jsx(n.h1,{id:"usepagestate",children:"usePageState"}),`
|
|
5
|
+
`,e.jsx(n.p,{children:"Hook để quản lý state của page hiện tại."}),`
|
|
6
|
+
`,e.jsx(n.h2,{id:"import",children:"Import"}),`
|
|
7
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`import { usePageState } from '@v-miniapp/ui-react'
|
|
8
|
+
`})}),`
|
|
9
|
+
`,e.jsx(n.h2,{id:"returns",children:"Returns"}),`
|
|
10
|
+
`,e.jsxs(n.ul,{children:[`
|
|
11
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"pageState"}),": ",e.jsx(n.code,{children:"IPageState"})," của page hiện tại hoặc ",e.jsx(n.code,{children:"undefined"})]}),`
|
|
12
|
+
`,e.jsxs(n.li,{children:[e.jsx(n.code,{children:"setPageState"}),": ",e.jsx(n.code,{children:"Dispatch<SetStateAction<IPageState | undefined>>"})," - Function để update page state"]}),`
|
|
13
|
+
`]}),`
|
|
14
|
+
`,e.jsx(n.h2,{id:"type-definitions",children:"Type Definitions"}),`
|
|
15
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`type IPageState = Omit<IAppState, 'keepAlive'> & { keepAlive?: boolean }
|
|
16
|
+
|
|
17
|
+
type IAppState = {
|
|
18
|
+
animation?: IAppAnimationState
|
|
19
|
+
navigationBar?: IAppNavigationBarState
|
|
20
|
+
bottomTabBar?: IAppBottomTabBarState
|
|
21
|
+
keepAlive?: boolean | IAppKeepAliveState
|
|
22
|
+
pageLayout?: IAppPageLayoutState
|
|
23
|
+
}
|
|
24
|
+
`})}),`
|
|
25
|
+
`,e.jsx(n.h2,{id:"usage",children:"Usage"}),`
|
|
26
|
+
`,e.jsx(n.h3,{id:"update-navigation-bar",children:"Update navigation bar"}),`
|
|
27
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { usePageState } from '@v-miniapp/ui-react'
|
|
28
|
+
|
|
29
|
+
const MyPage = () => {
|
|
30
|
+
const { pageState, setPageState } = usePageState()
|
|
31
|
+
|
|
32
|
+
const updateTitle = () => {
|
|
33
|
+
setPageState({
|
|
34
|
+
navigationBar: {
|
|
35
|
+
title: 'New Title',
|
|
36
|
+
},
|
|
37
|
+
})
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
return <button onClick={updateTitle}>Update Title</button>
|
|
41
|
+
}
|
|
42
|
+
`})}),`
|
|
43
|
+
`,e.jsx(n.h3,{id:"update-với-function",children:"Update với function"}),`
|
|
44
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`const { setPageState } = usePageState()
|
|
45
|
+
|
|
46
|
+
setPageState(prevState => ({
|
|
47
|
+
...prevState,
|
|
48
|
+
navigationBar: {
|
|
49
|
+
...prevState?.navigationBar,
|
|
50
|
+
title: 'Updated Title',
|
|
51
|
+
},
|
|
52
|
+
}))
|
|
53
|
+
`})}),`
|
|
54
|
+
`,e.jsx(n.h3,{id:"update-animation",children:"Update animation"}),`
|
|
55
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`setPageState({
|
|
56
|
+
animation: {
|
|
57
|
+
type: 'fade_in',
|
|
58
|
+
},
|
|
59
|
+
})
|
|
60
|
+
`})}),`
|
|
61
|
+
`,e.jsx(n.h3,{id:"update-page-layout",children:"Update page layout"}),`
|
|
62
|
+
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`setPageState({
|
|
63
|
+
pageLayout: {
|
|
64
|
+
contentClassName: 'custom-class',
|
|
65
|
+
pullToRefresh: {
|
|
66
|
+
onRefresh: async () => {
|
|
67
|
+
await fetchData()
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
})
|
|
72
|
+
`})}),`
|
|
73
|
+
`,e.jsx(n.h2,{id:"notes",children:"Notes"}),`
|
|
74
|
+
`,e.jsxs(n.ul,{children:[`
|
|
75
|
+
`,e.jsxs(n.li,{children:["Page state được lưu theo ",e.jsx(n.code,{children:"location.key"}),", mỗi navigation instance có state riêng"]}),`
|
|
76
|
+
`,e.jsx(n.li,{children:"State được merge với app-level config và page-level config"}),`
|
|
77
|
+
`,e.jsxs(n.li,{children:["Có thể set ",e.jsx(n.code,{children:"undefined"})," để xóa page state"]}),`
|
|
78
|
+
`,e.jsx(n.li,{children:"State được persist trong navigation stack (với keep-alive)"}),`
|
|
79
|
+
`]})]})}function p(t={}){const{wrapper:n}={...i(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(a,{...t})}):a(t)}export{p as default};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import{j as n}from"./iframe-CLEfhyJc.js";import{useMDXComponents as r}from"./index-7xlKHfV2.js";import{b as d,M as i}from"./blocks-CpOj9FQ_.js";import{t as s}from"./store-D2RudmNr.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";function o(t){const e={code:"code",h1:"h1",h2:"h2",pre:"pre",...r(),...t.components};return n.jsxs(n.Fragment,{children:[`
|
|
2
|
+
`,`
|
|
3
|
+
`,n.jsx(d,{title:"Hooks/useSettingsChanged"}),`
|
|
4
|
+
`,n.jsx(e.h1,{id:"usesettingschanged",children:"useSettingsChanged"}),`
|
|
5
|
+
`,n.jsx(i,{children:s("hooks.useSettingsChanged.description")}),`
|
|
6
|
+
`,n.jsx(e.h2,{id:"import",children:"Import"}),`
|
|
7
|
+
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useSettingsChanged } from '@v-miniapp/ui-react'
|
|
8
|
+
`})}),`
|
|
9
|
+
`,n.jsx(e.h2,{id:"props",children:"Props"}),`
|
|
10
|
+
`,n.jsx(i,{children:`
|
|
11
|
+
| Name | Type | Required | Default | Description |
|
|
12
|
+
| ----------------- | ---------------------------------------- | -------- | ------- | ----------- |
|
|
13
|
+
| onSettingsChanged | (settings: ISettings) => void | Yes | - | ${s("hooks.useSettingsChanged.onSettingsChangedDescription")} |
|
|
14
|
+
`}),`
|
|
15
|
+
`,n.jsx(e.h2,{id:"",children:s("hooks.usageExample")}),`
|
|
16
|
+
`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useSettingsChanged } from '@v-miniapp/ui-react';
|
|
17
|
+
|
|
18
|
+
function MyComponent() {
|
|
19
|
+
useSettingsChanged((settings) => {
|
|
20
|
+
console.log('Settings changed:', settings);
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<div>
|
|
25
|
+
<h1>My Component</h1>
|
|
26
|
+
</div>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
`})})]})}function u(t={}){const{wrapper:e}={...r(),...t.components};return e?n.jsx(e,{...t,children:n.jsx(o,{...t})}):o(t)}export{u as default};
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as w,j as N}from"./iframe-CLEfhyJc.js";import{i as B,b as F,_ as V,c as P,d as C}from"./index-B-Ksafg0.js";function U(o,s){if(o===s)return!0;for(var a=0;a<o.length;a++)if(!Object.is(o[a],s[a]))return!1;return!0}function j(o){var s=w.useRef(o);return s.current=o,s}var W=function(o){var s=j(o);w.useEffect(function(){return function(){s.current()}},[])},H=!!(typeof window<"u"&&window.document&&window.document.createElement);function A(o,s){if(H){if(!o)return s;var a;return B(o)?a=o():"current"in o?a=o.current:a=o,a}}var z=function(o){var s=function(a,h,v){var d=w.useRef(!1),u=w.useRef([]),O=w.useRef([]),m=w.useRef(void 0);o(function(){var p,D=Array.isArray(v)?v:[v],E=D.map(function(b){return A(b)});if(!d.current){d.current=!0,u.current=E,O.current=h,m.current=a();return}(E.length!==u.current.length||!U(u.current,E)||!U(O.current,h))&&((p=m.current)===null||p===void 0||p.call(m),u.current=E,O.current=h,m.current=a())}),W(function(){var p;(p=m.current)===null||p===void 0||p.call(m),d.current=!1})};return s},$=z(w.useEffect),k={},q;function G(){return q||(q=1,(function(){if(typeof window!="object")return;if("IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype){"isIntersecting"in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return this.intersectionRatio>0}});return}function o(t){try{return t.defaultView&&t.defaultView.frameElement||null}catch{return null}}var s=(function(t){for(var e=t,r=o(e);r;)e=r.ownerDocument,r=o(e);return e})(window.document),a=[],h=null,v=null;function d(t){this.time=t.time,this.target=t.target,this.rootBounds=_(t.rootBounds),this.boundingClientRect=_(t.boundingClientRect),this.intersectionRect=_(t.intersectionRect||R()),this.isIntersecting=!!t.intersectionRect;var e=this.boundingClientRect,r=e.width*e.height,n=this.intersectionRect,i=n.width*n.height;r?this.intersectionRatio=Number((i/r).toFixed(4)):this.intersectionRatio=this.isIntersecting?1:0}function u(t,e){var r=e||{};if(typeof t!="function")throw new Error("callback must be a function");if(r.root&&r.root.nodeType!=1&&r.root.nodeType!=9)throw new Error("root must be a Document or Element");this._checkForIntersections=m(this._checkForIntersections.bind(this),this.THROTTLE_TIMEOUT),this._callback=t,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(r.rootMargin),this.thresholds=this._initThresholds(r.threshold),this.root=r.root||null,this.rootMargin=this._rootMarginValues.map(function(n){return n.value+n.unit}).join(" "),this._monitoringDocuments=[],this._monitoringUnsubscribes=[]}u.prototype.THROTTLE_TIMEOUT=100,u.prototype.POLL_INTERVAL=null,u.prototype.USE_MUTATION_OBSERVER=!0,u._setupCrossOriginUpdater=function(){return h||(h=function(t,e){!t||!e?v=R():v=x(t,e),a.forEach(function(r){r._checkForIntersections()})}),h},u._resetCrossOriginUpdater=function(){h=null,v=null},u.prototype.observe=function(t){var e=this._observationTargets.some(function(r){return r.element==t});if(!e){if(!(t&&t.nodeType==1))throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:t,entry:null}),this._monitorIntersections(t.ownerDocument),this._checkForIntersections()}},u.prototype.unobserve=function(t){this._observationTargets=this._observationTargets.filter(function(e){return e.element!=t}),this._unmonitorIntersections(t.ownerDocument),this._observationTargets.length==0&&this._unregisterInstance()},u.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorAllIntersections(),this._unregisterInstance()},u.prototype.takeRecords=function(){var t=this._queuedEntries.slice();return this._queuedEntries=[],t},u.prototype._initThresholds=function(t){var e=t||[0];return Array.isArray(e)||(e=[e]),e.sort().filter(function(r,n,i){if(typeof r!="number"||isNaN(r)||r<0||r>1)throw new Error("threshold must be a number between 0 and 1 inclusively");return r!==i[n-1]})},u.prototype._parseRootMargin=function(t){var e=t||"0px",r=e.split(/\s+/).map(function(n){var i=/^(-?\d*\.?\d+)(px|%)$/.exec(n);if(!i)throw new Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(i[1]),unit:i[2]}});return r[1]=r[1]||r[0],r[2]=r[2]||r[0],r[3]=r[3]||r[1],r},u.prototype._monitorIntersections=function(t){var e=t.defaultView;if(e&&this._monitoringDocuments.indexOf(t)==-1){var r=this._checkForIntersections,n=null,i=null;this.POLL_INTERVAL?n=e.setInterval(r,this.POLL_INTERVAL):(p(e,"resize",r,!0),p(t,"scroll",r,!0),this.USE_MUTATION_OBSERVER&&"MutationObserver"in e&&(i=new e.MutationObserver(r),i.observe(t,{attributes:!0,childList:!0,characterData:!0,subtree:!0}))),this._monitoringDocuments.push(t),this._monitoringUnsubscribes.push(function(){var l=t.defaultView;l&&(n&&l.clearInterval(n),D(l,"resize",r,!0)),D(t,"scroll",r,!0),i&&i.disconnect()});var f=this.root&&(this.root.ownerDocument||this.root)||s;if(t!=f){var c=o(t);c&&this._monitorIntersections(c.ownerDocument)}}},u.prototype._unmonitorIntersections=function(t){var e=this._monitoringDocuments.indexOf(t);if(e!=-1){var r=this.root&&(this.root.ownerDocument||this.root)||s,n=this._observationTargets.some(function(c){var l=c.element.ownerDocument;if(l==t)return!0;for(;l&&l!=r;){var g=o(l);if(l=g&&g.ownerDocument,l==t)return!0}return!1});if(!n){var i=this._monitoringUnsubscribes[e];if(this._monitoringDocuments.splice(e,1),this._monitoringUnsubscribes.splice(e,1),i(),t!=r){var f=o(t);f&&this._unmonitorIntersections(f.ownerDocument)}}}},u.prototype._unmonitorAllIntersections=function(){var t=this._monitoringUnsubscribes.slice(0);this._monitoringDocuments.length=0,this._monitoringUnsubscribes.length=0;for(var e=0;e<t.length;e++)t[e]()},u.prototype._checkForIntersections=function(){if(!(!this.root&&h&&!v)){var t=this._rootIsInDom(),e=t?this._getRootRect():R();this._observationTargets.forEach(function(r){var n=r.element,i=b(n),f=this._rootContainsTarget(n),c=r.entry,l=t&&f&&this._computeTargetAndRootIntersection(n,i,e),g=null;this._rootContainsTarget(n)?(!h||this.root)&&(g=e):g=R();var T=r.entry=new d({time:O(),target:n,boundingClientRect:i,rootBounds:g,intersectionRect:l});c?t&&f?this._hasCrossedThreshold(c,T)&&this._queuedEntries.push(T):c&&c.isIntersecting&&this._queuedEntries.push(T):this._queuedEntries.push(T)},this),this._queuedEntries.length&&this._callback(this.takeRecords(),this)}},u.prototype._computeTargetAndRootIntersection=function(t,e,r){if(window.getComputedStyle(t).display!="none"){for(var n=e,i=y(t),f=!1;!f&&i;){var c=null,l=i.nodeType==1?window.getComputedStyle(i):{};if(l.display=="none")return null;if(i==this.root||i.nodeType==9)if(f=!0,i==this.root||i==s)h&&!this.root?!v||v.width==0&&v.height==0?(i=null,c=null,n=null):c=v:c=r;else{var g=y(i),T=g&&b(g),L=g&&this._computeTargetAndRootIntersection(g,T,r);T&&L?(i=g,c=x(T,L)):(i=null,n=null)}else{var S=i.ownerDocument;i!=S.body&&i!=S.documentElement&&l.overflow!="visible"&&(c=b(i))}if(c&&(n=E(c,n)),!n)break;i=i&&y(i)}return n}},u.prototype._getRootRect=function(){var t;if(this.root&&!I(this.root))t=b(this.root);else{var e=I(this.root)?this.root:s,r=e.documentElement,n=e.body;t={top:0,left:0,right:r.clientWidth||n.clientWidth,width:r.clientWidth||n.clientWidth,bottom:r.clientHeight||n.clientHeight,height:r.clientHeight||n.clientHeight}}return this._expandRectByRootMargin(t)},u.prototype._expandRectByRootMargin=function(t){var e=this._rootMarginValues.map(function(n,i){return n.unit=="px"?n.value:n.value*(i%2?t.width:t.height)/100}),r={top:t.top-e[0],right:t.right+e[1],bottom:t.bottom+e[2],left:t.left-e[3]};return r.width=r.right-r.left,r.height=r.bottom-r.top,r},u.prototype._hasCrossedThreshold=function(t,e){var r=t&&t.isIntersecting?t.intersectionRatio||0:-1,n=e.isIntersecting?e.intersectionRatio||0:-1;if(r!==n)for(var i=0;i<this.thresholds.length;i++){var f=this.thresholds[i];if(f==r||f==n||f<r!=f<n)return!0}},u.prototype._rootIsInDom=function(){return!this.root||M(s,this.root)},u.prototype._rootContainsTarget=function(t){var e=this.root&&(this.root.ownerDocument||this.root)||s;return M(e,t)&&(!this.root||e==t.ownerDocument)},u.prototype._registerInstance=function(){a.indexOf(this)<0&&a.push(this)},u.prototype._unregisterInstance=function(){var t=a.indexOf(this);t!=-1&&a.splice(t,1)};function O(){return window.performance&&performance.now&&performance.now()}function m(t,e){var r=null;return function(){r||(r=setTimeout(function(){t(),r=null},e))}}function p(t,e,r,n){typeof t.addEventListener=="function"?t.addEventListener(e,r,n):typeof t.attachEvent=="function"&&t.attachEvent("on"+e,r)}function D(t,e,r,n){typeof t.removeEventListener=="function"?t.removeEventListener(e,r,n):typeof t.detachEvent=="function"&&t.detachEvent("on"+e,r)}function E(t,e){var r=Math.max(t.top,e.top),n=Math.min(t.bottom,e.bottom),i=Math.max(t.left,e.left),f=Math.min(t.right,e.right),c=f-i,l=n-r;return c>=0&&l>=0&&{top:r,bottom:n,left:i,right:f,width:c,height:l}||null}function b(t){var e;try{e=t.getBoundingClientRect()}catch{}return e?(e.width&&e.height||(e={top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.right-e.left,height:e.bottom-e.top}),e):R()}function R(){return{top:0,bottom:0,left:0,right:0,width:0,height:0}}function _(t){return!t||"x"in t?t:{top:t.top,y:t.top,bottom:t.bottom,left:t.left,x:t.left,right:t.right,width:t.width,height:t.height}}function x(t,e){var r=e.top-t.top,n=e.left-t.left;return{top:r,left:n,height:e.height,width:e.width,bottom:r+e.height,right:n+e.width}}function M(t,e){for(var r=e;r;){if(r==t)return!0;r=y(r)}return!1}function y(t){var e=t.parentNode;return t.nodeType==9&&t!=s?o(t):(e&&e.assignedSlot&&(e=e.assignedSlot.parentNode),e&&e.nodeType==11&&e.host?e.host:e)}function I(t){return t&&t.nodeType===9}window.IntersectionObserver=u,window.IntersectionObserverEntry=d})()),k}G();function J(o,s){var a=s||{},h=a.callback,v=F(a,["callback"]),d=V(w.useState(),2),u=d[0],O=d[1],m=V(w.useState(),2),p=m[0],D=m[1];return $(function(){var E=Array.isArray(o)?o:[o],b=E.map(function(_){return A(_)}).filter(Boolean);if(b.length){var R=new IntersectionObserver(function(_){var x,M;try{for(var y=P(_),I=y.next();!I.done;I=y.next()){var t=I.value;D(t.intersectionRatio),O(t.isIntersecting),h?.(t)}}catch(e){x={error:e}}finally{try{I&&!I.done&&(M=y.return)&&M.call(y)}finally{if(x)throw x.error}}},C(C({},v),{root:A(s?.root)}));return b.forEach(function(_){return R.observe(_)}),function(){R.disconnect()}}},[s?.rootMargin,s?.threshold,h],o),[u,p]}const K=({onActive:o,options:s,className:a,style:h})=>{const v=w.useRef(null),[d]=J(v,s);return w.useEffect(()=>{d&&o()},[d,o]),N.jsx("div",{className:a,style:h,ref:v})};K.__docgenInfo={description:"",methods:[],displayName:"VisibilitySensor",props:{onActive:{required:!0,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:""},options:{required:!1,tsType:{name:"Options"},description:""},className:{required:!1,tsType:{name:"string"},description:""},style:{required:!1,tsType:{name:"ReactCSSProperties",raw:"React.CSSProperties"},description:""}}};export{K as V};
|