UNPKG

one

Version:

One is a React framework for web, iOS, and Android apps.

github.com/onejs/one

onejs/one

1 lines • 10.9 kB
1
{"version":3,"file":"Pager.js","names":[],"sources":["esm/platform/ui/Pager.js"],"sourcesContent":["import {\n Children,\n isValidElement,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n useState\n} from \"react\";\nimport { validatePage, validatePager } from \"./pagerTypes\";\nimport { domStyle } from \"../web/DomView\";\nimport { jsx } from \"react/jsx-runtime\";\nfunction event(nativeEvent) {\n return { nativeEvent };\n}\nconst Pager = forwardRef(function Pager2({\n children,\n initialPage = 0,\n scrollEnabled = true,\n orientation = \"horizontal\",\n layoutDirection = \"ltr\",\n pageMargin = 0,\n onPageScroll,\n onPageSelected,\n onPageScrollStateChanged,\n keyboardDismissMode = \"none\",\n style,\n testID,\n ...props\n}, ref) {\n validatePager({\n ...props,\n initialPage,\n orientation,\n layoutDirection,\n pageMargin,\n keyboardDismissMode\n });\n const container = useRef(null);\n const callbacks = useRef({ onPageScroll, onPageSelected, onPageScrollStateChanged });\n callbacks.current = { onPageScroll, onPageSelected, onPageScrollStateChanged };\n const pointer = useRef(null);\n const selected = useRef(initialPage);\n const initialized = useRef(false);\n const state = useRef(\"idle\");\n const [enabled, setEnabled] = useState(scrollEnabled);\n const vertical = orientation === \"vertical\";\n const count = Children.count(children);\n const dimensions = useRef({\n vertical,\n rtl: layoutDirection === \"rtl\",\n pageMargin,\n count\n });\n dimensions.current = { vertical, rtl: layoutDirection === \"rtl\", pageMargin, count };\n function setState(next) {\n if (state.current === next) return;\n state.current = next;\n callbacks.current.onPageScrollStateChanged?.(event({ pageScrollState: next }));\n }\n function scroll() {\n const node = container.current;\n if (!node || !count) return;\n const stride = (vertical ? node.clientHeight : node.clientWidth) + pageMargin;\n if (!stride) return;\n const value = Math.max(\n 0,\n Math.min(\n count - 1,\n (vertical ? node.scrollTop : Math.abs(node.scrollLeft)) / stride\n )\n );\n callbacks.current.onPageScroll?.(\n event({ position: Math.floor(value), offset: value - Math.floor(value) })\n );\n }\n function settle() {\n const node = container.current;\n if (!node || !count) return;\n const stride = (vertical ? node.clientHeight : node.clientWidth) + pageMargin;\n if (!stride) return;\n const page = Math.max(\n 0,\n Math.min(\n count - 1,\n Math.round((vertical ? node.scrollTop : Math.abs(node.scrollLeft)) / stride)\n )\n );\n if (page !== selected.current || !initialized.current) {\n selected.current = page;\n callbacks.current.onPageSelected?.(event({ position: page }));\n }\n initialized.current = true;\n callbacks.current.onPageScroll?.(event({ position: page, offset: 0 }));\n setState(\"idle\");\n }\n function goTo(index, animated) {\n validatePage(index);\n const node = container.current;\n const d = dimensions.current;\n if (!node || index >= d.count) return;\n const offset = index * ((d.vertical ? node.clientHeight : node.clientWidth) + d.pageMargin);\n if (animated && index !== selected.current) setState(\"settling\");\n node.scrollTo({\n left: d.vertical ? 0 : offset * (d.rtl ? -1 : 1),\n top: d.vertical ? offset : 0,\n behavior: animated ? \"smooth\" : \"instant\"\n });\n if (!animated) settle();\n }\n useImperativeHandle(ref, () => ({\n setPage: (index) => goTo(index, true),\n setPageWithoutAnimation: (index) => goTo(index, false),\n setScrollEnabled: setEnabled\n }));\n useEffect(() => setEnabled(scrollEnabled), [scrollEnabled]);\n useLayoutEffect(() => {\n const node = container.current;\n if (!node) return;\n const resize = new ResizeObserver(\n () => goTo(Math.min(selected.current, Math.max(0, count - 1)), false)\n );\n resize.observe(node);\n goTo(Math.min(selected.current, Math.max(0, count - 1)), false);\n node.addEventListener(\"scrollend\", settle);\n return () => {\n resize.disconnect();\n node.removeEventListener(\"scrollend\", settle);\n };\n }, [count, orientation, layoutDirection, pageMargin]);\n const css = {\n ...domStyle(style),\n display: \"flex\",\n position: \"relative\",\n flexDirection: vertical ? \"column\" : \"row\",\n direction: layoutDirection,\n overflowX: enabled && !vertical ? \"auto\" : \"hidden\",\n overflowY: enabled && vertical ? \"auto\" : \"hidden\",\n scrollSnapType: `${vertical ? \"y\" : \"x\"} mandatory`,\n gap: pageMargin,\n scrollbarWidth: \"none\",\n overscrollBehavior: \"contain\"\n };\n return /* @__PURE__ */ jsx(\n \"div\",\n {\n ref: container,\n style: css,\n \"data-testid\": testID,\n onScroll: scroll,\n onPointerDown: (e) => {\n const node = container.current;\n if (!enabled || !node) return;\n pointer.current = {\n x: e.clientX,\n y: e.clientY,\n offset: vertical ? node.scrollTop : node.scrollLeft\n };\n },\n onPointerMove: (e) => {\n const start = pointer.current;\n if (!start || !enabled || state.current === \"dragging\") return;\n const distance = vertical ? Math.abs(e.clientY - start.y) : Math.abs(e.clientX - start.x);\n if (distance < 8) return;\n setState(\"dragging\");\n if (keyboardDismissMode === \"on-drag\" && document.activeElement instanceof HTMLElement)\n document.activeElement.blur();\n },\n onPointerUp: () => {\n const start = pointer.current;\n const node = container.current;\n pointer.current = null;\n if (state.current !== \"dragging\" || !node) return;\n if ((vertical ? node.scrollTop : node.scrollLeft) === start?.offset) settle();\n else setState(\"settling\");\n },\n onPointerCancel: () => {\n pointer.current = null;\n if (state.current === \"dragging\") setState(\"settling\");\n },\n onWheel: () => {\n if (enabled) setState(\"dragging\");\n },\n children: Children.map(children, (child, index) => {\n if (!isValidElement(child))\n throw new Error(\"Pager children must be React Native views\");\n return /* @__PURE__ */ jsx(\n \"div\",\n {\n style: {\n flex: \"0 0 100%\",\n display: \"flex\",\n flexDirection: \"column\",\n width: vertical ? \"100%\" : void 0,\n height: vertical ? void 0 : \"100%\",\n scrollSnapAlign: \"start\",\n position: \"relative\",\n overflow: \"hidden\"\n },\n children: child\n },\n index\n );\n })\n }\n );\n});\nexport {\n Pager\n};\n//# sourceMappingURL=Pager.js.map\n"],"mappings":";;;;;;AAaA,SAAS,MAAM,aAAa;CAC1B,OAAO,EAAE,YAAY;AACvB;AACA,MAAM,QAAQ,WAAW,SAAS,OAAO,EACvC,UACA,cAAc,GACd,gBAAgB,MAChB,cAAc,cACd,kBAAkB,OAClB,aAAa,GACb,cACA,gBACA,0BACA,sBAAsB,QACtB,OACA,QACA,GAAG,SACF,KAAK;CACN,cAAc;EACZ,GAAG;EACH;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,MAAM,YAAY,OAAO,IAAI;CAC7B,MAAM,YAAY,OAAO;EAAE;EAAc;EAAgB;CAAyB,CAAC;CACnF,UAAU,UAAU;EAAE;EAAc;EAAgB;CAAyB;CAC7E,MAAM,UAAU,OAAO,IAAI;CAC3B,MAAM,WAAW,OAAO,WAAW;CACnC,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,QAAQ,OAAO,MAAM;CAC3B,MAAM,CAAC,SAAS,cAAc,SAAS,aAAa;CACpD,MAAM,WAAW,gBAAgB;CACjC,MAAM,QAAQ,SAAS,MAAM,QAAQ;CACrC,MAAM,aAAa,OAAO;EACxB;EACA,KAAK,oBAAoB;EACzB;EACA;CACF,CAAC;CACD,WAAW,UAAU;EAAE;EAAU,KAAK,oBAAoB;EAAO;EAAY;CAAM;CACnF,SAAS,SAAS,MAAM;EACtB,IAAI,MAAM,YAAY,MAAM;EAC5B,MAAM,UAAU;EAChB,UAAU,QAAQ,2BAA2B,MAAM,EAAE,iBAAiB,KAAK,CAAC,CAAC;CAC/E;CACA,SAAS,SAAS;EAChB,MAAM,OAAO,UAAU;EACvB,IAAI,CAAC,QAAQ,CAAC,OAAO;EACrB,MAAM,UAAU,WAAW,KAAK,eAAe,KAAK,eAAe;EACnE,IAAI,CAAC,QAAQ;EACb,MAAM,QAAQ,KAAK,IACjB,GACA,KAAK,IACH,QAAQ,IACP,WAAW,KAAK,YAAY,KAAK,IAAI,KAAK,UAAU,KAAK,MAC5D,CACF;EACA,UAAU,QAAQ,eAChB,MAAM;GAAE,UAAU,KAAK,MAAM,KAAK;GAAG,QAAQ,QAAQ,KAAK,MAAM,KAAK;EAAE,CAAC,CAC1E;CACF;CACA,SAAS,SAAS;EAChB,MAAM,OAAO,UAAU;EACvB,IAAI,CAAC,QAAQ,CAAC,OAAO;EACrB,MAAM,UAAU,WAAW,KAAK,eAAe,KAAK,eAAe;EACnE,IAAI,CAAC,QAAQ;EACb,MAAM,OAAO,KAAK,IAChB,GACA,KAAK,IACH,QAAQ,GACR,KAAK,OAAO,WAAW,KAAK,YAAY,KAAK,IAAI,KAAK,UAAU,KAAK,MAAM,CAC7E,CACF;EACA,IAAI,SAAS,SAAS,WAAW,CAAC,YAAY,SAAS;GACrD,SAAS,UAAU;GACnB,UAAU,QAAQ,iBAAiB,MAAM,EAAE,UAAU,KAAK,CAAC,CAAC;EAC9D;EACA,YAAY,UAAU;EACtB,UAAU,QAAQ,eAAe,MAAM;GAAE,UAAU;GAAM,QAAQ;EAAE,CAAC,CAAC;EACrE,SAAS,MAAM;CACjB;CACA,SAAS,KAAK,OAAO,UAAU;EAC7B,aAAa,KAAK;EAClB,MAAM,OAAO,UAAU;EACvB,MAAM,IAAI,WAAW;EACrB,IAAI,CAAC,QAAQ,SAAS,EAAE,OAAO;EAC/B,MAAM,SAAS,UAAU,EAAE,WAAW,KAAK,eAAe,KAAK,eAAe,EAAE;EAChF,IAAI,YAAY,UAAU,SAAS,SAAS,SAAS,UAAU;EAC/D,KAAK,SAAS;GACZ,MAAM,EAAE,WAAW,IAAI,UAAU,EAAE,MAAM,CAAC,IAAI;GAC9C,KAAK,EAAE,WAAW,SAAS;GAC3B,UAAU,WAAW,WAAW;EAClC,CAAC;EACD,IAAI,CAAC,UAAU,OAAO;CACxB;CACA,oBAAoB,YAAY;EAC9B,UAAU,UAAU,KAAK,OAAO,IAAI;EACpC,0BAA0B,UAAU,KAAK,OAAO,KAAK;EACrD,kBAAkB;CACpB,EAAE;CACF,gBAAgB,WAAW,aAAa,GAAG,CAAC,aAAa,CAAC;CAC1D,sBAAsB;EACpB,MAAM,OAAO,UAAU;EACvB,IAAI,CAAC,MAAM;EACX,MAAM,SAAS,IAAI,qBACX,KAAK,KAAK,IAAI,SAAS,SAAS,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAC,GAAG,KAAK,CACtE;EACA,OAAO,QAAQ,IAAI;EACnB,KAAK,KAAK,IAAI,SAAS,SAAS,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAC,GAAG,KAAK;EAC9D,KAAK,iBAAiB,aAAa,MAAM;EACzC,aAAa;GACX,OAAO,WAAW;GAClB,KAAK,oBAAoB,aAAa,MAAM;EAC9C;CACF,GAAG;EAAC;EAAO;EAAa;EAAiB;CAAU,CAAC;CACpD,MAAM,MAAM;EACV,GAAG,SAAS,KAAK;EACjB,SAAS;EACT,UAAU;EACV,eAAe,WAAW,WAAW;EACrC,WAAW;EACX,WAAW,WAAW,CAAC,WAAW,SAAS;EAC3C,WAAW,WAAW,WAAW,SAAS;EAC1C,gBAAgB,GAAG,WAAW,MAAM,IAAI;EACxC,KAAK;EACL,gBAAgB;EAChB,oBAAoB;CACtB;CACA,OAAuB,oBACrB,OACA;EACE,KAAK;EACL,OAAO;EACP,eAAe;EACf,UAAU;EACV,gBAAgB,MAAM;GACpB,MAAM,OAAO,UAAU;GACvB,IAAI,CAAC,WAAW,CAAC,MAAM;GACvB,QAAQ,UAAU;IAChB,GAAG,EAAE;IACL,GAAG,EAAE;IACL,QAAQ,WAAW,KAAK,YAAY,KAAK;GAC3C;EACF;EACA,gBAAgB,MAAM;GACpB,MAAM,QAAQ,QAAQ;GACtB,IAAI,CAAC,SAAS,CAAC,WAAW,MAAM,YAAY,YAAY;GACxD,MAAM,WAAW,WAAW,KAAK,IAAI,EAAE,UAAU,MAAM,CAAC,IAAI,KAAK,IAAI,EAAE,UAAU,MAAM,CAAC;GACxF,IAAI,WAAW,GAAG;GAClB,SAAS,UAAU;GACnB,IAAI,wBAAwB,aAAa,SAAS,yBAAyB,aACzE,SAAS,cAAc,KAAK;EAChC;EACA,mBAAmB;GACjB,MAAM,QAAQ,QAAQ;GACtB,MAAM,OAAO,UAAU;GACvB,QAAQ,UAAU;GAClB,IAAI,MAAM,YAAY,cAAc,CAAC,MAAM;GAC3C,KAAK,WAAW,KAAK,YAAY,KAAK,gBAAgB,OAAO,QAAQ,OAAO;QACvE,SAAS,UAAU;EAC1B;EACA,uBAAuB;GACrB,QAAQ,UAAU;GAClB,IAAI,MAAM,YAAY,YAAY,SAAS,UAAU;EACvD;EACA,eAAe;GACb,IAAI,SAAS,SAAS,UAAU;EAClC;EACA,UAAU,SAAS,IAAI,WAAW,OAAO,UAAU;GACjD,IAAI,CAAC,eAAe,KAAK,GACvB,MAAM,IAAI,MAAM,2CAA2C;GAC7D,OAAuB,oBACrB,OACA;IACE,OAAO;KACL,MAAM;KACN,SAAS;KACT,eAAe;KACf,OAAO,WAAW,SAAS,KAAK;KAChC,QAAQ,WAAW,KAAK,IAAI;KAC5B,iBAAiB;KACjB,UAAU;KACV,UAAU;IACZ;IACA,UAAU;GACZ,GACA,KACF;EACF,CAAC;CACH,CACF;AACF,CAAC"}