@nativescript-community/ui-material-ripple
Version:
The Material Design Ripple component provides a radial action in the form of a visual ripple expanding outward from the user's touch. Ripple is a visual form of feedback for touch events providing users a clear signal that an element is being touched.
216 lines • 9.49 kB
JavaScript
import { getRippleColor, rippleColorAlphaProperty, rippleColorProperty, themer } from '@nativescript-community/ui-material-core';
import { createRippleDrawable, getColorStateList, isPostLollipopMR1, isPostMarshmallow } from '@nativescript-community/ui-material-core/android/utils';
import { Length, backgroundInternalProperty } from '@nativescript/core';
import { RippleBase } from './ripple-common';
let MDStackLayout;
const DEFAULT_STROKE_VALUE = -1;
function initMDStackLayout() {
if (!MDStackLayout) {
if (isPostLollipopMR1) {
MDStackLayout = org.nativescript.widgets.StackLayout;
}
else {
initializePreLollipopStackLayout();
MDStackLayout = PreLollipopStackLayout;
}
}
}
// eslint-disable-next-line no-redeclare
let PreLollipopStackLayout;
function initializePreLollipopStackLayout() {
if (PreLollipopStackLayout) {
return;
}
var PreLollipopStackLayoutImpl = /** @class */ (function (_super) {
__extends(PreLollipopStackLayoutImpl, _super);
function PreLollipopStackLayoutImpl(context) {
var _this = _super.call(this, context) || this;
_this.mSelfBounds = new android.graphics.Rect();
_this.mOverlayBounds = new android.graphics.Rect();
_this.mForegroundGravity = android.view.Gravity.FILL;
_this.mForegroundInPadding = true;
_this.mForegroundBoundsChanged = false;
return global.__native(_this);
}
/**
* Describes how the foreground is positioned.
*
* @return foreground gravity.
* @see #setForegroundGravity(int)
*/
PreLollipopStackLayoutImpl.prototype.getForegroundGravity = function () {
return this.mForegroundGravity;
};
/**
* Describes how the foreground is positioned. Defaults to START and TOP.
*
* @param foregroundGravity See {@link android.view.Gravity}
* @see #getForegroundGravity()
*/
PreLollipopStackLayoutImpl.prototype.setForegroundGravity = function (foregroundGravity) {
if (this.mForegroundGravity !== foregroundGravity) {
if ((foregroundGravity & android.view.Gravity.RELATIVE_HORIZONTAL_GRAVITY_MASK) === 0) {
foregroundGravity |= android.view.Gravity.START;
}
if ((foregroundGravity & android.view.Gravity.VERTICAL_GRAVITY_MASK) === 0) {
foregroundGravity |= android.view.Gravity.TOP;
}
this.mForegroundGravity = foregroundGravity;
if (this.mForegroundGravity === android.view.Gravity.FILL && this.mForeground != null) {
var padding = new android.graphics.Rect();
this.mForeground.getPadding(padding);
}
this.requestLayout();
}
};
PreLollipopStackLayoutImpl.prototype.verifyDrawable = function (who) {
return _super.prototype.verifyDrawable.call(this, who) || who === this.mForeground;
};
PreLollipopStackLayoutImpl.prototype.jumpDrawablesToCurrentState = function () {
_super.prototype.jumpDrawablesToCurrentState.call(this);
if (this.mForeground != null) {
this.mForeground.jumpToCurrentState();
}
};
PreLollipopStackLayoutImpl.prototype.drawableStateChanged = function () {
_super.prototype.drawableStateChanged.call(this);
if (this.mForeground != null && this.mForeground.isStateful()) {
this.mForeground.setState(this.getDrawableState());
}
};
/**
* Supply a Drawable that is to be rendered on top of all of the child
* views in the frame Utils.layout. Any padding in the Drawable will be taken
* into account by ensuring that the children are inset to be placed
* inside of the padding area.
*
* @param drawable The Drawable to be drawn on top of the children.
*/
PreLollipopStackLayoutImpl.prototype.setForeground = function (drawable) {
if (this.mForeground !== drawable) {
if (this.mForeground != null) {
this.mForeground.setCallback(null);
this.unscheduleDrawable(this.mForeground);
}
this.mForeground = drawable;
if (drawable != null) {
this.setWillNotDraw(false);
drawable.setCallback(this);
if (drawable.isStateful()) {
drawable.setState(this.getDrawableState());
}
if (this.mForegroundGravity === android.view.Gravity.FILL) {
var padding = new android.graphics.Rect();
drawable.getPadding(padding);
}
}
else {
this.setWillNotDraw(true);
}
this.requestLayout();
this.invalidate();
}
};
/**
* Returns the drawable used as the foreground of this FrameLayout. The
* foreground drawable, if non-null, is always drawn on top of the children.
*
* @return A Drawable or null if no foreground was set.
*/
PreLollipopStackLayoutImpl.prototype.getForeground = function () {
return this.mForeground;
};
PreLollipopStackLayoutImpl.prototype.onLayout = function (changed, left, top, right, bottom) {
_super.prototype.onLayout.call(this, changed, left, top, right, bottom);
this.mForegroundBoundsChanged = this.mForegroundBoundsChanged || changed;
};
PreLollipopStackLayoutImpl.prototype.onSizeChanged = function (w, h, oldw, oldh) {
_super.prototype.onSizeChanged.call(this, w, h, oldw, oldh);
this.mForegroundBoundsChanged = true;
};
PreLollipopStackLayoutImpl.prototype.draw = function (canvas) {
_super.prototype.draw.call(this, canvas);
if (this.mForeground != null) {
var foreground = this.mForeground;
if (this.mForegroundBoundsChanged) {
this.mForegroundBoundsChanged = false;
var selfBounds = this.mSelfBounds;
var overlayBounds = this.mOverlayBounds;
var w = this.getRight() - this.getLeft();
var h = this.getBottom() - this.getTop();
if (this.mForegroundInPadding) {
selfBounds.set(0, 0, w, h);
}
else {
selfBounds.set(this.getPaddingLeft(), this.getPaddingTop(), w - this.getPaddingRight(), h - this.getPaddingBottom());
}
android.view.Gravity.apply(this.mForegroundGravity, foreground.getIntrinsicWidth(), foreground.getIntrinsicHeight(), selfBounds, overlayBounds);
foreground.setBounds(overlayBounds);
}
foreground.draw(canvas);
}
};
PreLollipopStackLayoutImpl.prototype.drawableHotspotChanged = function (x, y) {
_super.prototype.drawableHotspotChanged.call(this, x, y);
if (this.mForeground != null) {
this.mForeground.setHotspot(x, y);
}
};
return PreLollipopStackLayoutImpl;
}(org.nativescript.widgets.StackLayout));
PreLollipopStackLayout = PreLollipopStackLayoutImpl;
}
export class Ripple extends RippleBase {
createNativeView() {
// initMDStackLayout();
const view = super.createNativeView();
// view.setClickable(true);
this.setRippleDrawable(view); // set default ripple
return view;
}
getRippleColor() {
if (this.rippleColor) {
return getRippleColor(this.rippleColor);
}
return getRippleColor(themer.getAccentColor());
}
setRippleDrawable(view, topLeftRadius = 0, topRightRadius = 0, bottomRightRadius = 0, bottomLeftRadius = 0) {
if (!this.rippleDrawable) {
this.rippleDrawable = createRippleDrawable(this.getRippleColor(), topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius);
if (isPostMarshmallow) {
view.setForeground(this.rippleDrawable);
}
}
}
[rippleColorProperty.setNative](color) {
if (!this.rippleDrawable) {
this.setRippleDrawable(this.nativeViewProtected, Length.toDevicePixels(this.style.borderTopLeftRadius), Length.toDevicePixels(this.style.borderTopRightRadius), Length.toDevicePixels(this.style.borderBottomRightRadius), Length.toDevicePixels(this.style.borderBottomLeftRadius));
}
else {
const nColor = getRippleColor(color, this.rippleColorAlpha);
if (isPostLollipopMR1) {
this.rippleDrawable.setColor(color ? getColorStateList(nColor) : null);
}
else {
this.rippleDrawable.rippleShape.getPaint().setColor(nColor);
}
}
}
[rippleColorAlphaProperty.setNative](value) {
if (this.rippleColor) {
this[rippleColorProperty.setNative](this.rippleColor);
}
}
[backgroundInternalProperty.setNative](value) {
super[backgroundInternalProperty.setNative](value);
if (this.nativeViewProtected) {
if (value instanceof android.graphics.drawable.Drawable) {
}
else {
this.rippleDrawable = null;
this.setRippleDrawable(this.nativeViewProtected, value.borderTopLeftRadius, value.borderTopRightRadius, value.borderBottomRightRadius, value.borderBottomLeftRadius);
}
}
}
}
//# sourceMappingURL=ripple.android.js.map