@neovici/cosmoz-bottom-bar - npm Package Compare versions

Comparing version 4.0.2 to 4.0.3

CHANGELOG.md

@@ -0,1 +1,9 @@
+## [4.0.3](https://github.com/neovici/cosmoz-bottom-bar/compare/v4.0.2...v4.0.3) (2020-10-15)
+
+
+### Bug Fixes
+
+* don't recompute height ([7b52e06](https://github.com/neovici/cosmoz-bottom-bar/commit/7b52e068ed4e17cd3ac5259da5f09fce11237033))
+* restore cosmoz-bottom-bar-view animation behavior ([cf04651](https://github.com/neovici/cosmoz-bottom-bar/commit/cf04651f70a188bf99e80181402dd751684880f2))
+
 ## [4.0.2](https://github.com/neovici/cosmoz-bottom-bar/compare/v4.0.1...v4.0.2) (2020-10-15)
@@ -2,0 +10,0 @@

cosmoz-bottom-bar-view.js

@@ -36,4 +36,3 @@ import { component } from 'haunted';
 					flex: var(--cosmoz-bottom-bar-view-flex, auto);
-					-webkit-overflow-scrolling: touch;
-					overflow-y: auto;
+					overflow: hidden;
 				}
@@ -45,2 +44,4 @@
 					flex: auto;
+					-webkit-overflow-scrolling: touch;
+					overflow-y: auto;
 				}
@@ -51,3 +52,3 @@
 					box-shadow: var(--cosmoz-bottom-bar-view-bar-shadow, none);
-					position: sticky;
+					position: static;
 					flex: none;
@@ -61,4 +62,3 @@ }
 			</div>
-			<cosmoz-bottom-bar id="bar" ?active=${ active } bar-height=${ ifDefined(barHeight) } part="bar"
-				@computed-bar-height-changed=${ e => info.computedBarHeight = e.target.computedBarHeight } >
+			<cosmoz-bottom-bar id="bar" ?active=${ active } bar-height=${ ifDefined(barHeight) } part="bar">
 				<slot></slot>
@@ -65,0 +65,0 @@ ${ bottomBarSlots }

cosmoz-bottom-bar.html.js

@@ -20,3 +20,3 @@ import '@webcomponents/shadycss/entrypoints/apply-shim';
             background-color: inherit;
-            transition: transform 0.5s ease;
+            transition: max-height 0.3s ease;
             z-index: 10;
@@ -23,0 +23,0 @@ }

cosmoz-bottom-bar.js

@@ -404,3 +404,7 @@ /* eslint-disable max-lines */
 
-	_onResize() {
+	_onResize([entry]) {
+		const hidden = entry.borderBoxSize?.[0]?.inlineSize === 0 || entry.contentRect?.width === 0;
+		if (hidden) {
+			return;
+		}
 		this._computedBarHeightKicker += 1;
@@ -411,13 +415,21 @@ this._debounceLayoutActions();
 	_showHideBottomBar(visible) {
+		this.style.transitionDuration = 0;
 		this.style.display = '';
-		const translateY = visible ? 0 : '100%',
-			onEnd = () => {
-				clearTimeout(this._hideTimeout);
-				this._hideTimeout = null;
-				this.style.display = this.visible ? '' : 'none';
-			};
-		clearTimeout(this._hideTimeout);
+		this.style.maxHeight = '';
+
+		const height = this.computedBarHeight,
+			from = visible ? '0px' : height + 'px',
+			to = !visible ? '0px' : height + 'px';
+
+		this.style.maxHeight = from;
+
+		const onEnd = () => {
+			this.removeEventListener('transitionend', onEnd);
+			this.style.maxHeight = '';
+			this.style.display = this.visible ? '' : 'none';
+		};
 		requestAnimationFrame(() => {
-			this.style.transform = `translate3d(0px, ${ translateY }, 0px)`;
-			this._hideTimeout = setTimeout(onEnd, 510);
+			this.addEventListener('transitionend', onEnd);
+			this.style.transitionDuration = '';
+			this.style.maxHeight = to;
 		});
@@ -424,0 +436,0 @@ }

lib/use-bottom-bar-view.js

@@ -6,3 +6,2 @@ import {
 } from 'haunted';
-import { useHost } from '@neovici/cosmoz-utils/lib/hooks/use-host';
 import { useViewInfo } from '@neovici/cosmoz-viewinfo';
@@ -14,4 +13,3 @@
 }) => { /* eslint-disable no-return-assign */
-	const host = useHost(),
-		{ desktop } = useViewInfo(),
+	const { desktop } = useViewInfo(),
 		isFixed = fixed ?? desktop,
@@ -25,3 +23,5 @@ [active, setActive] = useState(initialActive),
 		}
-		const opts = { passive: true },
+		const
+			{ current: el } = info,
+			opts = { passive: true },
 			onScroll = () => {
@@ -32,7 +32,7 @@ if (info.raf) {
 				info.raf = requestAnimationFrame(() => info.raf = requestAnimationFrame(() => {
-					const { scrollTop } = host;
+					const { scrollTop } = el;
 					setActive(
-						scrollTop < 2 // ~ at top
+						scrollTop < 2 // at top
 						|| info.scrollTop > scrollTop // scrolling up
-						|| info.current.scrollHeight - scrollTop - host.clientHeight < info.computedBarHeight // at bottom
+						|| el.scrollHeight - scrollTop - el.offsetHeight < 3 // at bottom
 					);
@@ -45,6 +45,6 @@ Object.assign(info, {
 			};
-		host.addEventListener('scroll', onScroll, opts);
+		el.addEventListener('scroll', onScroll, opts);
 		onScroll();
 		return () => {
-			host.removeEventListener('scroll', onScroll, opts);
+			el.removeEventListener('scroll', onScroll, opts);
 			if (info.raf) {
@@ -51,0 +51,0 @@ cancelAnimationFrame(info.raf);

package.json

 {
 	"name": "@neovici/cosmoz-bottom-bar",
-	"version": "4.0.2",
+	"version": "4.0.3",
 	"description": "A responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40412

increased by1.34%

Lines of code

603

increased by1.52%

No dependency changes