diff --git a/node_modules/react-native-skeleton-content/lib/BoneContainer.d.ts b/node_modules/react-native-skeleton-content/lib/BoneContainer.d.ts new file mode 100644 index 0000000..eb6d650 --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/BoneContainer.d.ts @@ -0,0 +1,11 @@ +import React from 'react'; +import { ICustomViewStyle } from './Constants'; +type BoneContainerProps = { + layoutStyle: ICustomViewStyle; + childrenBones: JSX.Element[]; + id: number | string; + container?: React.ComponentType; + containerProps?: any; +}; +declare const BoneContainer: ({ layoutStyle, childrenBones, id, container, containerProps }: BoneContainerProps) => React.JSX.Element; +export default BoneContainer; diff --git a/node_modules/react-native-skeleton-content/lib/BoneContainer.js b/node_modules/react-native-skeleton-content/lib/BoneContainer.js new file mode 100644 index 0000000..6f51a42 --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/BoneContainer.js @@ -0,0 +1,14 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importDefault(require("react")); +const react_native_1 = require("react-native"); +const BoneContainer = ({ layoutStyle, childrenBones, id, container, containerProps }) => { + const Wrapper = container || react_native_1.View; + return ( + {childrenBones} + ); +}; +exports.default = BoneContainer; diff --git a/node_modules/react-native-skeleton-content/lib/BoneHelper.d.ts b/node_modules/react-native-skeleton-content/lib/BoneHelper.d.ts new file mode 100644 index 0000000..1810265 --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/BoneHelper.d.ts @@ -0,0 +1,17 @@ +import { AnimatedTransform, SharedValue } from 'react-native-reanimated'; +import { ICustomViewStyle, ISize, AnimationType, AnimationDirection, IDirection } from './Constants'; +declare const BoneHelper: { + getBoneWidth: (boneLayout: ICustomViewStyle, componentSize: { + width: number; + height: number; + }) => number; + getBoneHeight: (boneLayout: ICustomViewStyle, componentSize: { + width: number; + height: number; + }) => number; + getBoneStyle: (boneLayout: ICustomViewStyle, componentSize: ISize, animationType: AnimationType, animationDirection: AnimationDirection, boneColor: string) => ICustomViewStyle; + getGradientSize: (boneLayout: ICustomViewStyle, componentSize: ISize, animationDirection: AnimationDirection) => ICustomViewStyle; + getGradientTransform: (boneLayout: ICustomViewStyle, componentSize: ISize, animationValue: SharedValue<0 | 1>, animationDirection: AnimationDirection) => AnimatedTransform; + getGradientEndDirection: (boneLayout: ICustomViewStyle, componentSize: ISize, animationType: AnimationType, animationDirection: AnimationDirection) => IDirection; +}; +export default BoneHelper; diff --git a/node_modules/react-native-skeleton-content/lib/BoneHelper.js b/node_modules/react-native-skeleton-content/lib/BoneHelper.js new file mode 100644 index 0000000..b23ae92 --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/BoneHelper.js @@ -0,0 +1,193 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_native_reanimated_1 = require("react-native-reanimated"); +const Constants_1 = require("./Constants"); +const getBoneWidth = (boneLayout, componentSize) => { + 'worklet'; + // if (typeof boneLayout.width === 'string') + // boneLayout.width + // else + // boneLayout.width + // return componentSize.width; + return ((typeof boneLayout.width === 'string' + ? componentSize.width + : boneLayout.width) || 0); +}; +const getBoneHeight = (boneLayout, componentSize) => { + 'worklet'; + return componentSize.height; + // return ( + // (typeof boneLayout.height === 'string' + // ? componentSize.height + // : boneLayout.height) || 0 + // ); +}; +const getBoneStyle = (boneLayout, componentSize, animationType, animationDirection, boneColor) => { + const { backgroundColor, borderRadius } = boneLayout; + const boneWidth = getBoneWidth(boneLayout, componentSize); + const boneHeight = getBoneHeight(boneLayout, componentSize); + const boneStyle = Object.assign({ width: boneWidth, height: boneHeight, borderRadius: borderRadius || Constants_1.DEFAULT_BORDER_RADIUS }, boneLayout); + if (animationType !== 'pulse') { + boneStyle.overflow = 'hidden'; + boneStyle.backgroundColor = backgroundColor || boneColor; + } + if (animationDirection === 'diagonalDownRight' || + animationDirection === 'diagonalDownLeft' || + animationDirection === 'diagonalTopRight' || + animationDirection === 'diagonalTopLeft') { + boneStyle.justifyContent = 'center'; + boneStyle.alignItems = 'center'; + } + return boneStyle; +}; +const getGradientSize = (boneLayout, componentSize, animationDirection) => { + 'worklet'; + const boneWidth = getBoneWidth(boneLayout, componentSize); + const boneHeight = getBoneHeight(boneLayout, componentSize); + const gradientStyle = {}; + if (animationDirection === 'diagonalDownRight' || + animationDirection === 'diagonalDownLeft' || + animationDirection === 'diagonalTopRight' || + animationDirection === 'diagonalTopLeft') { + gradientStyle.width = boneWidth; + gradientStyle.height = boneHeight; + if (boneHeight >= boneWidth) { + gradientStyle.height *= 1.5; + } + else { + gradientStyle.width *= 1.5; + } + } + return gradientStyle; +}; +const getPositionRange = (boneLayout, componentSize, animationDirection) => { + 'worklet'; + // use layout dimensions for percentages (string type) + const boneWidth = getBoneWidth(boneLayout, componentSize); + const boneHeight = getBoneHeight(boneLayout, componentSize); + if (animationDirection === 'horizontalRight') { + return [-boneWidth, +boneWidth]; + } + if (animationDirection === 'horizontalLeft') { + return [+boneWidth, -boneWidth]; + } + if (animationDirection === 'verticalDown') { + return [-boneHeight, +boneHeight]; + } + if (animationDirection === 'verticalTop') { + return [+boneHeight, -boneHeight]; + } + return []; +}; +const getGradientTransform = (boneLayout, componentSize, animationValue, animationDirection) => { + 'worklet'; + let transform = []; + const boneWidth = getBoneWidth(boneLayout, componentSize); + const boneHeight = getBoneHeight(boneLayout, componentSize); + if (animationDirection === 'verticalTop' || + animationDirection === 'verticalDown' || + animationDirection === 'horizontalLeft' || + animationDirection === 'horizontalRight') { + const interpolatedPosition = (0, react_native_reanimated_1.interpolate)(animationValue.value, [0, 1], getPositionRange(boneLayout, componentSize, animationDirection)); + if (animationDirection === 'verticalTop' || + animationDirection === 'verticalDown') { + transform = [{ translateY: interpolatedPosition }]; + } + else { + transform = [{ translateX: interpolatedPosition }]; + } + } + else if (animationDirection === 'diagonalDownRight' || + animationDirection === 'diagonalTopRight' || + animationDirection === 'diagonalDownLeft' || + animationDirection === 'diagonalTopLeft') { + const diagonal = Math.sqrt(boneHeight * boneHeight + boneWidth * boneWidth); + const mainDimension = Math.max(boneHeight, boneWidth); + const oppositeDimension = mainDimension === boneWidth ? boneHeight : boneWidth; + const diagonalAngle = Math.acos(mainDimension / diagonal); + let rotateAngle = animationDirection === 'diagonalDownRight' || + animationDirection === 'diagonalTopLeft' + ? Math.PI / 2 - diagonalAngle + : Math.PI / 2 + diagonalAngle; + const additionalRotate = animationDirection === 'diagonalDownRight' || + animationDirection === 'diagonalTopLeft' + ? 2 * diagonalAngle + : -2 * diagonalAngle; + const distanceFactor = (diagonal + oppositeDimension) / 2; + if (mainDimension === boneWidth && boneWidth !== boneHeight) { + rotateAngle += additionalRotate; + } + const sinComponent = Math.sin(diagonalAngle) * distanceFactor; + const cosComponent = Math.cos(diagonalAngle) * distanceFactor; + let xOutputRange = [0, 0]; + let yOutputRange = [0, 0]; + if (animationDirection === 'diagonalDownRight' || + animationDirection === 'diagonalTopLeft') { + xOutputRange = + animationDirection === 'diagonalDownRight' + ? [-sinComponent, sinComponent] + : [sinComponent, -sinComponent]; + yOutputRange = + animationDirection === 'diagonalDownRight' + ? [-cosComponent, cosComponent] + : [cosComponent, -cosComponent]; + } + else { + xOutputRange = + animationDirection === 'diagonalDownLeft' + ? [-sinComponent, sinComponent] + : [sinComponent, -sinComponent]; + yOutputRange = + animationDirection === 'diagonalDownLeft' + ? [cosComponent, -cosComponent] + : [-cosComponent, cosComponent]; + if (mainDimension === boneHeight && boneWidth !== boneHeight) { + xOutputRange.reverse(); + yOutputRange.reverse(); + } + } + let translateX = (0, react_native_reanimated_1.interpolate)(animationValue.value, [0, 1], xOutputRange); + let translateY = (0, react_native_reanimated_1.interpolate)(animationValue.value, [0, 1], yOutputRange); + // swapping the translates if width is the main dim + if (mainDimension === boneWidth) { + [translateX, translateY] = [translateY, translateX]; + } + const rotate = `${rotateAngle}rad`; + transform = [{ translateX }, { translateY }, { rotate }]; + } + return transform; +}; +const getGradientEndDirection = (boneLayout, componentSize, animationType, animationDirection) => { + let direction = { x: 0, y: 0 }; + if (animationType === 'shiver') { + if (animationDirection === 'horizontalLeft' || + animationDirection === 'horizontalRight') { + direction = { x: 1, y: 0 }; + } + else if (animationDirection === 'verticalTop' || + animationDirection === 'verticalDown') { + direction = { x: 0, y: 1 }; + } + else if (animationDirection === 'diagonalTopRight' || + animationDirection === 'diagonalDownRight' || + animationDirection === 'diagonalDownLeft' || + animationDirection === 'diagonalTopLeft') { + const boneWidth = getBoneWidth(boneLayout, componentSize); + const boneHeight = getBoneHeight(boneLayout, componentSize); + if (boneWidth && boneHeight && boneWidth > boneHeight) { + return { x: 0, y: 1 }; + } + return { x: 1, y: 0 }; + } + } + return direction; +}; +const BoneHelper = { + getBoneWidth, + getBoneHeight, + getBoneStyle, + getGradientSize, + getGradientTransform, + getGradientEndDirection, +}; +exports.default = BoneHelper; diff --git a/node_modules/react-native-skeleton-content/lib/Bones/BoneContainer.d.ts b/node_modules/react-native-skeleton-content/lib/Bones/BoneContainer.d.ts new file mode 100644 index 0000000..1760475 --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/Bones/BoneContainer.d.ts @@ -0,0 +1,11 @@ +import React from 'react'; +import { ICustomViewStyle } from '../Constants'; +type BoneContainerProps = { + layoutStyle: ICustomViewStyle; + childrenBones: JSX.Element[]; + id: number | string; + container?: React.ComponentType; + containerProps?: any; +}; +declare const BoneContainer: ({ layoutStyle, childrenBones, id, container, containerProps }: BoneContainerProps) => React.JSX.Element; +export default BoneContainer; diff --git a/node_modules/react-native-skeleton-content/lib/Bones/BoneContainer.js b/node_modules/react-native-skeleton-content/lib/Bones/BoneContainer.js new file mode 100644 index 0000000..6f51a42 --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/Bones/BoneContainer.js @@ -0,0 +1,14 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importDefault(require("react")); +const react_native_1 = require("react-native"); +const BoneContainer = ({ layoutStyle, childrenBones, id, container, containerProps }) => { + const Wrapper = container || react_native_1.View; + return ( + {childrenBones} + ); +}; +exports.default = BoneContainer; diff --git a/node_modules/react-native-skeleton-content/lib/Bones/Bones.d.ts b/node_modules/react-native-skeleton-content/lib/Bones/Bones.d.ts new file mode 100644 index 0000000..b15e85b --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/Bones/Bones.d.ts @@ -0,0 +1,7 @@ +import { ICustomViewStyle } from '../Constants'; +type BonesProps = { + bonesLayout: ICustomViewStyle[] | undefined; + childrenItems: any; +}; +declare const Bones: ({ bonesLayout, childrenItems }: BonesProps) => any; +export default Bones; diff --git a/node_modules/react-native-skeleton-content/lib/Bones/Bones.js b/node_modules/react-native-skeleton-content/lib/Bones/Bones.js new file mode 100644 index 0000000..edf72ad --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/Bones/Bones.js @@ -0,0 +1,76 @@ +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; +var __rest = (this && this.__rest) || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importStar(require("react")); +const BoneContainer_1 = __importDefault(require("./BoneContainer")); +const ShiverBone_1 = __importDefault(require("./ShiverBone")); +const StaticBone_1 = __importDefault(require("./StaticBone")); +const SkeletonContentContext_1 = require("../SkeletonContentContext"); +const Bones = ({ bonesLayout, childrenItems }) => { + const { animationType, prefix } = (0, react_1.useContext)(SkeletonContentContext_1.SkeletonContentContext); + if (bonesLayout === null || bonesLayout === void 0 ? void 0 : bonesLayout.length) { + return Array(bonesLayout.length) + .fill(undefined) + .map((_, i) => { + var _a; + // has a nested layout + if ((_a = bonesLayout[i].children) === null || _a === void 0 ? void 0 : _a.length) { + const containerPrefix = bonesLayout[i].key || `bone_container_${i}`; + const _b = bonesLayout[i], { children: childBones, container, containerProps } = _b, layoutStyle = __rest(_b, ["children", "container", "containerProps"]); + return ( (Object.assign(Object.assign({}, it), { key: `nested_${index}` }))), + childrenItems: [] + })} id={containerPrefix} container={container} containerProps={containerProps}/>); + } + if (animationType === 'pulse' || animationType === 'none') { + return (); + } + return (); + }); + // no layout, matching children's layout + } + return react_1.default.Children.map(childrenItems, (child, i) => { + const styling = child.props.style || {}; + if (animationType === 'pulse' || animationType === 'none') { + return ; + } + return ; + }); +}; +exports.default = Bones; diff --git a/node_modules/react-native-skeleton-content/lib/Bones/ShiverBone.d.ts b/node_modules/react-native-skeleton-content/lib/Bones/ShiverBone.d.ts new file mode 100644 index 0000000..450bde5 --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/Bones/ShiverBone.d.ts @@ -0,0 +1,8 @@ +/// +import { ICustomViewStyle } from '../Constants'; +type ShiverBoneProps = { + layoutStyle: ICustomViewStyle; + id: number | string; +}; +declare const ShiverBone: ({ layoutStyle, id }: ShiverBoneProps) => JSX.Element; +export default ShiverBone; diff --git a/node_modules/react-native-skeleton-content/lib/Bones/ShiverBone.js b/node_modules/react-native-skeleton-content/lib/Bones/ShiverBone.js new file mode 100644 index 0000000..cc09d1e --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/Bones/ShiverBone.js @@ -0,0 +1,56 @@ +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importStar(require("react")); +const react_native_1 = require("react-native"); +const expo_linear_gradient_1 = require("expo-linear-gradient"); +const react_native_reanimated_1 = __importStar(require("react-native-reanimated")); +const BoneHelper_1 = __importDefault(require("../BoneHelper")); +const SkeletonContentContext_1 = require("../SkeletonContentContext"); +const styles = react_native_1.StyleSheet.create({ + absoluteGradient: { + height: '100%', + position: 'absolute', + width: '100%' + }, + gradientChild: { + flex: 1 + } +}); +const { getBoneStyle, getGradientTransform, getGradientSize, getGradientEndDirection } = BoneHelper_1.default; +const ShiverBone = ({ layoutStyle, id }) => { + const { animationValue, animationType, animationDirection, componentSize, boneColor, highlightColor } = (0, react_1.useContext)(SkeletonContentContext_1.SkeletonContentContext); + const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => (Object.assign({ transform: getGradientTransform(layoutStyle, componentSize, animationValue, animationDirection) }, getGradientSize(layoutStyle, componentSize, animationDirection)))); + const gradientEndDirection = react_1.default.useMemo(() => getGradientEndDirection(layoutStyle, componentSize, animationType, animationDirection), [layoutStyle, componentSize, animationType, animationDirection]); + return ( + + + + ); +}; +exports.default = ShiverBone; diff --git a/node_modules/react-native-skeleton-content/lib/Bones/StaticBone.d.ts b/node_modules/react-native-skeleton-content/lib/Bones/StaticBone.d.ts new file mode 100644 index 0000000..f2228b6 --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/Bones/StaticBone.d.ts @@ -0,0 +1,8 @@ +/// +import { ICustomViewStyle } from '../Constants'; +type StaticBoneProps = { + layoutStyle: ICustomViewStyle; + id: number | string; +}; +declare const StaticBone: ({ layoutStyle, id }: StaticBoneProps) => JSX.Element; +export default StaticBone; diff --git a/node_modules/react-native-skeleton-content/lib/Bones/StaticBone.js b/node_modules/react-native-skeleton-content/lib/Bones/StaticBone.js new file mode 100644 index 0000000..cbf85d7 --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/Bones/StaticBone.js @@ -0,0 +1,47 @@ +"use strict"; +var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); +}) : (function(o, m, k, k2) { + if (k2 === undefined) k2 = k; + o[k2] = m[k]; +})); +var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { + Object.defineProperty(o, "default", { enumerable: true, value: v }); +}) : function(o, v) { + o["default"] = v; +}); +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); + __setModuleDefault(result, mod); + return result; +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importStar(require("react")); +const react_native_reanimated_1 = __importStar(require("react-native-reanimated")); +const BoneHelper_1 = __importDefault(require("../BoneHelper")); +const SkeletonContentContext_1 = require("../SkeletonContentContext"); +const useStaticBoneStyle = (props) => { + const animatedPulseStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({ + backgroundColor: (0, react_native_reanimated_1.interpolateColor)(props.animationValue.value, [0, 1], [props.boneColor, props.highlightColor]) + })); + return [ + BoneHelper_1.default.getBoneStyle(props.layoutStyle, props.componentSize, props.animationType, props.animationDirection, props.boneColor), + ...(props.animationType === 'none' ? [] : [animatedPulseStyle]) + ]; +}; +const StaticBone = ({ layoutStyle, id }) => { + const contextProps = (0, react_1.useContext)(SkeletonContentContext_1.SkeletonContentContext); + const style = useStaticBoneStyle(Object.assign({ layoutStyle }, contextProps)); + return ; +}; +exports.default = StaticBone; diff --git a/node_modules/react-native-skeleton-content/lib/Constants.d.ts b/node_modules/react-native-skeleton-content/lib/Constants.d.ts index f19a1a6..8e387f9 100644 --- a/node_modules/react-native-skeleton-content/lib/Constants.d.ts +++ b/node_modules/react-native-skeleton-content/lib/Constants.d.ts @@ -1,33 +1,39 @@ +/// import { StyleProp, ViewStyle } from 'react-native'; -import Animated from 'react-native-reanimated'; -declare type _animationType = 'none' | 'shiver' | 'pulse' | undefined; -declare type _animationDirection = 'horizontalLeft' | 'horizontalRight' | 'verticalTop' | 'verticalDown' | 'diagonalDownLeft' | 'diagonalDownRight' | 'diagonalTopLeft' | 'diagonalTopRight' | undefined; +import { EasingFn, EasingFunctionFactory } from 'react-native-reanimated'; +export type AnimationType = 'none' | 'shiver' | 'pulse' | undefined; +export type AnimationDirection = 'horizontalLeft' | 'horizontalRight' | 'verticalTop' | 'verticalDown' | 'diagonalDownLeft' | 'diagonalDownRight' | 'diagonalTopLeft' | 'diagonalTopRight' | undefined; export interface ICustomViewStyle extends ViewStyle { children?: ICustomViewStyle[]; key?: number | string; + container?: React.ComponentType; + containerProps?: any; } export interface ISkeletonContentProps { isLoading: boolean; layout?: ICustomViewStyle[]; duration?: number; containerStyle?: StyleProp; - animationType?: _animationType; - animationDirection?: _animationDirection; + animationType?: AnimationType; + animationDirection?: AnimationDirection; boneColor?: string; highlightColor?: string; - easing?: Animated.EasingNodeFunction; + easing?: EasingFn; children?: any; } export interface IDirection { x: number; y: number; } +export interface ISize { + width: number; + height: number; +} export declare const DEFAULT_BORDER_RADIUS = 4; export declare const DEFAULT_DURATION = 1200; -export declare const DEFAULT_ANIMATION_TYPE: _animationType; -export declare const DEFAULT_ANIMATION_DIRECTION: _animationDirection; +export declare const DEFAULT_ANIMATION_TYPE: AnimationType; +export declare const DEFAULT_ANIMATION_DIRECTION: AnimationDirection; export declare const DEFAULT_BONE_COLOR = "#E1E9EE"; export declare const DEFAULT_HIGHLIGHT_COLOR = "#F2F8FC"; -export declare const DEFAULT_EASING: Animated.EasingNodeFunction; +export declare const DEFAULT_EASING: EasingFunctionFactory; export declare const DEFAULT_LOADING = true; -export {}; diff --git a/node_modules/react-native-skeleton-content/lib/Constants.js b/node_modules/react-native-skeleton-content/lib/Constants.js index 27b1cf6..dc5fc26 100644 --- a/node_modules/react-native-skeleton-content/lib/Constants.js +++ b/node_modules/react-native-skeleton-content/lib/Constants.js @@ -8,5 +8,5 @@ exports.DEFAULT_ANIMATION_TYPE = 'shiver'; exports.DEFAULT_ANIMATION_DIRECTION = 'horizontalRight'; exports.DEFAULT_BONE_COLOR = '#E1E9EE'; exports.DEFAULT_HIGHLIGHT_COLOR = '#F2F8FC'; -exports.DEFAULT_EASING = react_native_reanimated_1.EasingNode.bezier(0.5, 0, 0.25, 1); +exports.DEFAULT_EASING = react_native_reanimated_1.Easing.bezier(0.5, 0, 0.25, 1); exports.DEFAULT_LOADING = true; diff --git a/node_modules/react-native-skeleton-content/lib/SkeletonContent.d.ts b/node_modules/react-native-skeleton-content/lib/SkeletonContent.d.ts index 107005c..9a7df7e 100644 --- a/node_modules/react-native-skeleton-content/lib/SkeletonContent.d.ts +++ b/node_modules/react-native-skeleton-content/lib/SkeletonContent.d.ts @@ -1,4 +1,4 @@ -import * as React from 'react'; +import React from 'react'; import { ISkeletonContentProps } from './Constants'; declare const _default: React.NamedExoticComponent; export default _default; diff --git a/node_modules/react-native-skeleton-content/lib/SkeletonContent.js b/node_modules/react-native-skeleton-content/lib/SkeletonContent.js index 8e17c25..f76a556 100644 --- a/node_modules/react-native-skeleton-content/lib/SkeletonContent.js +++ b/node_modules/react-native-skeleton-content/lib/SkeletonContent.js @@ -1,7 +1,11 @@ "use strict"; var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { if (k2 === undefined) k2 = k; - Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); + var desc = Object.getOwnPropertyDescriptor(m, k); + if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { + desc = { enumerable: true, get: function() { return m[k]; } }; + } + Object.defineProperty(o, k2, desc); }) : (function(o, m, k, k2) { if (k2 === undefined) k2 = k; o[k2] = m[k]; @@ -18,289 +22,59 @@ var __importStar = (this && this.__importStar) || function (mod) { __setModuleDefault(result, mod); return result; }; -var __rest = (this && this.__rest) || function (s, e) { - var t = {}; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) - t[p] = s[p]; - if (s != null && typeof Object.getOwnPropertySymbols === "function") - for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { - if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) - t[p[i]] = s[p[i]]; - } - return t; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); -const React = __importStar(require("react")); +const react_1 = __importStar(require("react")); const react_native_1 = require("react-native"); -const expo_linear_gradient_1 = require("expo-linear-gradient"); -const react_native_reanimated_1 = __importStar(require("react-native-reanimated")); -const v1_1 = require("react-native-redash/lib/module/v1"); +const react_native_reanimated_1 = require("react-native-reanimated"); +const Bones_1 = __importDefault(require("./Bones/Bones")); const Constants_1 = require("./Constants"); -const { useCode, set, cond, eq } = react_native_reanimated_1.default; -const { useState, useCallback } = React; +const SkeletonContentContextProvider_1 = __importDefault(require("./SkeletonContentContextProvider")); +const useLayout_1 = require("./useLayout"); // eslint-disable-line const styles = react_native_1.StyleSheet.create({ - absoluteGradient: { - height: '100%', - position: 'absolute', - width: '100%', - }, container: { alignItems: 'center', flex: 1, - justifyContent: 'center', - }, - gradientChild: { - flex: 1, - }, + justifyContent: 'center' + } }); -const useLayout = () => { - const [size, setSize] = useState({ width: 0, height: 0 }); - const onLayout = useCallback((event) => { - const { width, height } = event.nativeEvent.layout; - setSize({ width, height }); +const SkeletonContent = ({ containerStyle = styles.container, easing = Constants_1.DEFAULT_EASING, duration = Constants_1.DEFAULT_DURATION, layout = [], animationType = Constants_1.DEFAULT_ANIMATION_TYPE, animationDirection = Constants_1.DEFAULT_ANIMATION_DIRECTION, isLoading = Constants_1.DEFAULT_LOADING, boneColor = Constants_1.DEFAULT_BONE_COLOR, highlightColor = Constants_1.DEFAULT_HIGHLIGHT_COLOR, children }) => { + const shiverValue = animationType === 'shiver' ? 1 : 0; + const [componentSize, onLayout] = (0, useLayout_1.useLayout)(); + const animationValue = (0, react_native_reanimated_1.useSharedValue)(0); + // const animationValue = useDerivedValue(() => { + // if (isLoading) { + // if (shiverValue === 1) { + // return withRepeat(withTiming(1, { duration, easing }), -1); + // } + // return withRepeat( + // withTiming(1, { duration: duration / 2, easing }), + // -1, + // true + // ); + // } + // return 0; + // }); + (0, react_1.useEffect)(() => { + animationValue.value = (0, react_native_reanimated_1.withRepeat)((0, react_native_reanimated_1.withTiming)(1, { + duration, + easing, + }), -1); }, []); - return [size, onLayout]; -}; -const SkeletonContent = ({ containerStyle = styles.container, easing = Constants_1.DEFAULT_EASING, duration = Constants_1.DEFAULT_DURATION, layout = [], animationType = Constants_1.DEFAULT_ANIMATION_TYPE, animationDirection = Constants_1.DEFAULT_ANIMATION_DIRECTION, isLoading = Constants_1.DEFAULT_LOADING, boneColor = Constants_1.DEFAULT_BONE_COLOR, highlightColor = Constants_1.DEFAULT_HIGHLIGHT_COLOR, children, }) => { - const animationValue = (0, v1_1.useValue)(0); - const loadingValue = (0, v1_1.useValue)(isLoading ? 1 : 0); - const shiverValue = (0, v1_1.useValue)(animationType === 'shiver' ? 1 : 0); - const [componentSize, onLayout] = useLayout(); - useCode(() => cond(eq(loadingValue, 1), [ - cond(eq(shiverValue, 1), [ - set(animationValue, (0, v1_1.loop)({ - duration, - easing, - })), - ], [ - set(animationValue, (0, v1_1.loop)({ - duration: duration / 2, - easing, - boomerang: true, - })), - ]), - ]), [loadingValue, shiverValue, animationValue]); - const getBoneWidth = (boneLayout) => (typeof boneLayout.width === 'string' - ? componentSize.width - : boneLayout.width) || 0; - const getBoneHeight = (boneLayout) => (typeof boneLayout.height === 'string' - ? componentSize.height - : boneLayout.height) || 0; - const getGradientEndDirection = (boneLayout) => { - let direction = { x: 0, y: 0 }; - if (animationType === 'shiver') { - if (animationDirection === 'horizontalLeft' || - animationDirection === 'horizontalRight') { - direction = { x: 1, y: 0 }; - } - else if (animationDirection === 'verticalTop' || - animationDirection === 'verticalDown') { - direction = { x: 0, y: 1 }; - } - else if (animationDirection === 'diagonalTopRight' || - animationDirection === 'diagonalDownRight' || - animationDirection === 'diagonalDownLeft' || - animationDirection === 'diagonalTopLeft') { - const boneWidth = getBoneWidth(boneLayout); - const boneHeight = getBoneHeight(boneLayout); - if (boneWidth && boneHeight && boneWidth > boneHeight) - return { x: 0, y: 1 }; - return { x: 1, y: 0 }; - } - } - return direction; - }; - const getBoneStyles = (boneLayout) => { - const { backgroundColor, borderRadius } = boneLayout; - const boneWidth = getBoneWidth(boneLayout); - const boneHeight = getBoneHeight(boneLayout); - const boneStyle = Object.assign({ width: boneWidth, height: boneHeight, borderRadius: borderRadius || Constants_1.DEFAULT_BORDER_RADIUS }, boneLayout); - if (animationType !== 'pulse') { - boneStyle.overflow = 'hidden'; - boneStyle.backgroundColor = backgroundColor || boneColor; - } - if (animationDirection === 'diagonalDownRight' || - animationDirection === 'diagonalDownLeft' || - animationDirection === 'diagonalTopRight' || - animationDirection === 'diagonalTopLeft') { - boneStyle.justifyContent = 'center'; - boneStyle.alignItems = 'center'; - } - return boneStyle; - }; - const getGradientSize = (boneLayout) => { - const boneWidth = getBoneWidth(boneLayout); - const boneHeight = getBoneHeight(boneLayout); - const gradientStyle = {}; - if (animationDirection === 'diagonalDownRight' || - animationDirection === 'diagonalDownLeft' || - animationDirection === 'diagonalTopRight' || - animationDirection === 'diagonalTopLeft') { - gradientStyle.width = boneWidth; - gradientStyle.height = boneHeight; - if (boneHeight >= boneWidth) - gradientStyle.height *= 1.5; - else - gradientStyle.width *= 1.5; - } - return gradientStyle; - }; - const getStaticBoneStyles = (boneLayout) => { - const pulseStyles = [ - getBoneStyles(boneLayout), - { - backgroundColor: (0, v1_1.interpolateColor)(animationValue, { - inputRange: [0, 1], - outputRange: [boneColor, highlightColor], - }), - }, - ]; - if (animationType === 'none') - pulseStyles.pop(); - return pulseStyles; - }; - const getPositionRange = (boneLayout) => { - const outputRange = []; - // use layout dimensions for percentages (string type) - const boneWidth = getBoneWidth(boneLayout); - const boneHeight = getBoneHeight(boneLayout); - if (animationDirection === 'horizontalRight') { - outputRange.push(-boneWidth, +boneWidth); - } - else if (animationDirection === 'horizontalLeft') { - outputRange.push(+boneWidth, -boneWidth); - } - else if (animationDirection === 'verticalDown') { - outputRange.push(-boneHeight, +boneHeight); - } - else if (animationDirection === 'verticalTop') { - outputRange.push(+boneHeight, -boneHeight); - } - return outputRange; - }; - const getGradientTransform = (boneLayout) => { - let transform = {}; - const boneWidth = getBoneWidth(boneLayout); - const boneHeight = getBoneHeight(boneLayout); - if (animationDirection === 'verticalTop' || - animationDirection === 'verticalDown' || - animationDirection === 'horizontalLeft' || - animationDirection === 'horizontalRight') { - const interpolatedPosition = (0, react_native_reanimated_1.interpolateNode)(animationValue, { - inputRange: [0, 1], - outputRange: getPositionRange(boneLayout), - }); - if (animationDirection === 'verticalTop' || - animationDirection === 'verticalDown') { - transform = { translateY: interpolatedPosition }; - } - else { - transform = { translateX: interpolatedPosition }; - } - } - else if (animationDirection === 'diagonalDownRight' || - animationDirection === 'diagonalTopRight' || - animationDirection === 'diagonalDownLeft' || - animationDirection === 'diagonalTopLeft') { - const diagonal = Math.sqrt(boneHeight * boneHeight + boneWidth * boneWidth); - const mainDimension = Math.max(boneHeight, boneWidth); - const oppositeDimension = mainDimension === boneWidth ? boneHeight : boneWidth; - const diagonalAngle = Math.acos(mainDimension / diagonal); - let rotateAngle = animationDirection === 'diagonalDownRight' || - animationDirection === 'diagonalTopLeft' - ? Math.PI / 2 - diagonalAngle - : Math.PI / 2 + diagonalAngle; - const additionalRotate = animationDirection === 'diagonalDownRight' || - animationDirection === 'diagonalTopLeft' - ? 2 * diagonalAngle - : -2 * diagonalAngle; - const distanceFactor = (diagonal + oppositeDimension) / 2; - if (mainDimension === boneWidth && boneWidth !== boneHeight) - rotateAngle += additionalRotate; - const sinComponent = Math.sin(diagonalAngle) * distanceFactor; - const cosComponent = Math.cos(diagonalAngle) * distanceFactor; - let xOutputRange; - let yOutputRange; - if (animationDirection === 'diagonalDownRight' || - animationDirection === 'diagonalTopLeft') { - xOutputRange = - animationDirection === 'diagonalDownRight' - ? [-sinComponent, sinComponent] - : [sinComponent, -sinComponent]; - yOutputRange = - animationDirection === 'diagonalDownRight' - ? [-cosComponent, cosComponent] - : [cosComponent, -cosComponent]; - } - else { - xOutputRange = - animationDirection === 'diagonalDownLeft' - ? [-sinComponent, sinComponent] - : [sinComponent, -sinComponent]; - yOutputRange = - animationDirection === 'diagonalDownLeft' - ? [cosComponent, -cosComponent] - : [-cosComponent, cosComponent]; - if (mainDimension === boneHeight && boneWidth !== boneHeight) { - xOutputRange.reverse(); - yOutputRange.reverse(); - } - } - let translateX = (0, react_native_reanimated_1.interpolateNode)(animationValue, { - inputRange: [0, 1], - outputRange: xOutputRange, - }); - let translateY = (0, react_native_reanimated_1.interpolateNode)(animationValue, { - inputRange: [0, 1], - outputRange: yOutputRange, - }); - // swapping the translates if width is the main dim - if (mainDimension === boneWidth) - [translateX, translateY] = [translateY, translateX]; - const rotate = `${rotateAngle}rad`; - transform = { translateX, translateY, rotate }; - } - return transform; - }; - const getBoneContainer = (layoutStyle, childrenBones, key) => ( - {childrenBones} - ); - const getStaticBone = (layoutStyle, key) => (); - const getShiverBone = (layoutStyle, key) => { - const animatedStyle = Object.assign({ transform: [getGradientTransform(layoutStyle)] }, getGradientSize(layoutStyle)); - return ( - - - - ); - }; - const getBones = (bonesLayout, childrenItems, prefix = '') => { - if (bonesLayout && bonesLayout.length > 0) { - const iterator = new Array(bonesLayout.length).fill(0); - return iterator.map((_, i) => { - // has a nested layout - if (bonesLayout[i].children && bonesLayout[i].children.length > 0) { - const containerPrefix = bonesLayout[i].key || `bone_container_${i}`; - const _a = bonesLayout[i], { children: childBones } = _a, layoutStyle = __rest(_a, ["children"]); - return getBoneContainer(layoutStyle, getBones(childBones, [], containerPrefix), containerPrefix); - } - if (animationType === 'pulse' || animationType === 'none') { - return getStaticBone(bonesLayout[i], prefix ? `${prefix}_${i}` : i); - } - return getShiverBone(bonesLayout[i], prefix ? `${prefix}_${i}` : i); - }); - // no layout, matching children's layout - } - return React.Children.map(childrenItems, (child, i) => { - const styling = child.props.style || {}; - if (animationType === 'pulse' || animationType === 'none') { - return getStaticBone(styling, i); - } - return getShiverBone(styling, i); - }); + const contextProps = { + animationValue, + animationType, + animationDirection, + componentSize, + boneColor, + highlightColor }; return ( - {isLoading ? getBones(layout, children) : children} - ); + {isLoading ? ( + + ) : (children)} + ); }; -exports.default = React.memo(SkeletonContent); +exports.default = react_1.default.memo(SkeletonContent); diff --git a/node_modules/react-native-skeleton-content/lib/SkeletonContentContext.d.ts b/node_modules/react-native-skeleton-content/lib/SkeletonContentContext.d.ts new file mode 100644 index 0000000..5ce1e8f --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/SkeletonContentContext.d.ts @@ -0,0 +1,13 @@ +/// +import { SharedValue } from 'react-native-reanimated'; +import { AnimationDirection, AnimationType, ISize } from './Constants'; +export type SkeletonContextProps = { + animationValue: SharedValue<0 | 1>; + animationType: AnimationType; + animationDirection: AnimationDirection; + componentSize: ISize; + boneColor: string; + highlightColor: string; + prefix?: string | number; +}; +export declare const SkeletonContentContext: import("react").Context; diff --git a/node_modules/react-native-skeleton-content/lib/SkeletonContentContext.js b/node_modules/react-native-skeleton-content/lib/SkeletonContentContext.js new file mode 100644 index 0000000..fc35003 --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/SkeletonContentContext.js @@ -0,0 +1,5 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.SkeletonContentContext = void 0; +const react_1 = require("react"); +exports.SkeletonContentContext = (0, react_1.createContext)(undefined); diff --git a/node_modules/react-native-skeleton-content/lib/SkeletonContentContextProvider.d.ts b/node_modules/react-native-skeleton-content/lib/SkeletonContentContextProvider.d.ts new file mode 100644 index 0000000..53e8f78 --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/SkeletonContentContextProvider.d.ts @@ -0,0 +1,4 @@ +import React, { ProviderProps } from 'react'; +import { SkeletonContextProps } from './SkeletonContentContext'; +declare const SkeletonContentContextProvider: ({ value, children }: ProviderProps) => React.JSX.Element; +export default SkeletonContentContextProvider; diff --git a/node_modules/react-native-skeleton-content/lib/SkeletonContentContextProvider.js b/node_modules/react-native-skeleton-content/lib/SkeletonContentContextProvider.js new file mode 100644 index 0000000..4522bd2 --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/SkeletonContentContextProvider.js @@ -0,0 +1,11 @@ +"use strict"; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const react_1 = __importDefault(require("react")); +const SkeletonContentContext_1 = require("./SkeletonContentContext"); +const SkeletonContentContextProvider = ({ value, children }) => ( + {children} + ); +exports.default = SkeletonContentContextProvider; diff --git a/node_modules/react-native-skeleton-content/lib/__tests__/SkeletonContent.test.d.ts b/node_modules/react-native-skeleton-content/lib/__tests__/SkeletonContent.test.d.ts deleted file mode 100644 index cb0ff5c..0000000 --- a/node_modules/react-native-skeleton-content/lib/__tests__/SkeletonContent.test.d.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/node_modules/react-native-skeleton-content/lib/__tests__/SkeletonContent.test.js b/node_modules/react-native-skeleton-content/lib/__tests__/SkeletonContent.test.js deleted file mode 100644 index 85276d6..0000000 --- a/node_modules/react-native-skeleton-content/lib/__tests__/SkeletonContent.test.js +++ /dev/null @@ -1,309 +0,0 @@ -"use strict"; -var __importDefault = (this && this.__importDefault) || function (mod) { - return (mod && mod.__esModule) ? mod : { "default": mod }; -}; -Object.defineProperty(exports, "__esModule", { value: true }); -const react_native_1 = require("react-native"); -const react_1 = __importDefault(require("react")); -const react_native_reanimated_1 = __importDefault(require("react-native-reanimated")); -const expo_linear_gradient_1 = require("expo-linear-gradient"); -const react_test_renderer_1 = require("react-test-renderer"); -const SkeletonContent_1 = __importDefault(require("../SkeletonContent")); -const Constants_1 = require("../Constants"); -const staticStyles = { - borderRadius: Constants_1.DEFAULT_BORDER_RADIUS, - overflow: 'hidden', - backgroundColor: Constants_1.DEFAULT_BONE_COLOR, -}; -describe('SkeletonComponent test suite', () => { - it('should render empty alone', () => { - const tree = (0, react_test_renderer_1.create)().toJSON(); - expect(tree).toMatchSnapshot(); - }); - it('should have the correct layout when loading', () => { - const layout = [ - { - width: 240, - height: 100, - marginBottom: 10, - }, - { - width: 180, - height: 40, - borderRadius: 20, - backgroundColor: 'grey', - }, - ]; - const props = { - layout, - isLoading: true, - animationType: 'none', - }; - const instance = (0, react_test_renderer_1.create)(); - const component = instance.root; - const bones = component.findAllByType(react_native_reanimated_1.default.View); - // two bones and parent component - expect(bones.length).toEqual(layout.length + 1); - expect(bones[0].props.style).toEqual({ - alignItems: 'center', - flex: 1, - justifyContent: 'center', - }); - // default props that are not set - expect(bones[1].props.style).toEqual([Object.assign(Object.assign({}, layout[0]), staticStyles)]); - expect(bones[2].props.style).toEqual([ - Object.assign({ overflow: 'hidden' }, layout[1]), - ]); - expect(instance.toJSON()).toMatchSnapshot(); - }); - it('should render the correct bones for children', () => { - const props = { - isLoading: true, - animationType: 'shiver', - }; - const w1 = { height: 100, width: 200 }; - const w2 = { height: 120, width: 20 }; - const w3 = { height: 80, width: 240 }; - const children = [w1, w2, w3]; - function TestComponent({ isLoading, animationType, }) { - return ( - {children.map((c) => ())} - ); - } - const instance = (0, react_test_renderer_1.create)(); - let component = instance.root; - // finding children count - let bones = component.findAllByType(expo_linear_gradient_1.LinearGradient); - expect(bones.length).toEqual(children.length); - // finding styles of wrapper views - bones = component.findAllByType(react_native_reanimated_1.default.View); - expect(bones[1].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), w1)); - expect(bones[3].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), w2)); - expect(bones[5].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), w3)); - // re-update with pulse animation - instance.update(); - component = instance.root; - bones = component.findAllByType(react_native_reanimated_1.default.View); - // cannot test interpolated background color - expect(bones[1].props.style).toEqual([ - Object.assign(Object.assign({}, w1), { borderRadius: Constants_1.DEFAULT_BORDER_RADIUS }), - { backgroundColor: { ' __value': 4278190080 } }, - ]); - expect(bones[2].props.style).toEqual([ - Object.assign(Object.assign({}, w2), { borderRadius: Constants_1.DEFAULT_BORDER_RADIUS }), - { backgroundColor: { ' __value': 4278190080 } }, - ]); - expect(bones[3].props.style).toEqual([ - Object.assign(Object.assign({}, w3), { borderRadius: Constants_1.DEFAULT_BORDER_RADIUS }), - { backgroundColor: { ' __value': 4278190080 } }, - ]); - expect(instance.toJSON()).toMatchSnapshot(); - }); - it('should have correct props and layout between loading states', () => { - const w1 = { width: 240, height: 100, marginBottom: 10 }; - const w2 = { width: 180, height: 40 }; - const layout = [w1, w2]; - const props = { - layout, - isLoading: true, - animationType: 'shiver', - }; - const childStyle = { fontSize: 24 }; - const instance = (0, react_test_renderer_1.create)( - - ); - const component = instance.root; - let bones = component.findAllByType(expo_linear_gradient_1.LinearGradient); - // one animated view child for each bone + parent - expect(bones.length).toEqual(layout.length); - bones = component.findAllByType(react_native_reanimated_1.default.View); - expect(bones[1].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), w1)); - expect(bones[3].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), w2)); - let children = component.findAllByType(react_native_1.Text); - // no child since it's loading - expect(children.length).toEqual(0); - // update props - instance.update( - - ); - bones = instance.root.findAllByType(expo_linear_gradient_1.LinearGradient); - expect(bones.length).toEqual(0); - children = instance.root.findAllByType(react_native_1.Text); - expect(children.length).toEqual(1); - expect(children[0].props.style).toEqual(childStyle); - // re-update to loading state - instance.update( - - ); - bones = instance.root.findAllByType(expo_linear_gradient_1.LinearGradient); - expect(bones.length).toEqual(layout.length); - bones = component.findAllByType(react_native_reanimated_1.default.View); - expect(bones[1].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), w1)); - expect(bones[3].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), w2)); - children = instance.root.findAllByType(react_native_1.Text); - // no child since it's loading - expect(children.length).toEqual(0); - // snapshot - expect(instance.toJSON()).toMatchSnapshot(); - }); - it('should support nested layouts', () => { - const layout = [ - { - flexDirection: 'row', - width: 320, - height: 300, - children: [ - { - width: 200, - height: 120, - }, - { - width: 180, - height: 100, - }, - ], - }, - { - width: 180, - height: 40, - borderRadius: 20, - backgroundColor: 'grey', - }, - ]; - const props = { - layout, - isLoading: true, - animationType: 'shiver', - }; - const instance = (0, react_test_renderer_1.create)(); - const component = instance.root; - let bones = component.findAllByType(expo_linear_gradient_1.LinearGradient); - // three overall bones - expect(bones.length).toEqual(3); - bones = component.findAllByType(react_native_reanimated_1.default.View); - expect(bones[1].props.style).toEqual({ - flexDirection: 'row', - width: 320, - height: 300, - }); - // testing that styles for nested layout and last child persist - expect(bones[2].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), layout[0].children[0])); - expect(bones[4].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), layout[0].children[1])); - expect(bones[6].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), layout[1])); - expect(instance.toJSON()).toMatchSnapshot(); - }); - it('should support percentage for child size', () => { - const parentHeight = 300; - const parentWidth = 320; - const containerStyle = { - width: parentWidth, - height: parentHeight, - }; - const layout = [ - { - width: '20%', - height: '50%', - borderRadius: 20, - backgroundColor: 'grey', - }, - { - width: '50%', - height: '10%', - borderRadius: 10, - }, - ]; - const props = { - layout, - isLoading: true, - animationType: 'shiver', - containerStyle, - }; - const instance = (0, react_test_renderer_1.create)(); - const component = instance.root; - let bones = component.findAllByType(expo_linear_gradient_1.LinearGradient); - expect(bones.length).toEqual(layout.length); - // get parent - bones = component.findAllByType(react_native_reanimated_1.default.View); - // testing that styles of childs corresponds to percentages - expect(bones[1].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), layout[0])); - expect(bones[3].props.style).toEqual(Object.assign(Object.assign({}, staticStyles), layout[1])); - expect(instance.toJSON()).toMatchSnapshot(); - }); - it('should have the correct gradient properties', () => { - let customProps = { - layout: [ - { - width: 240, - height: 100, - marginBottom: 10, - }, - ], - isLoading: true, - animationDirection: 'diagonalDownLeft', - }; - function TestComponent(props) { - return ( - - ); - } - const component = (0, react_test_renderer_1.create)(); - let gradient = component.root.findByType(expo_linear_gradient_1.LinearGradient); - expect(gradient).toBeDefined(); - expect(gradient.props.start).toEqual({ x: 0, y: 0 }); - expect(gradient.props.end).toEqual({ x: 0, y: 1 }); - // change layout on diagonal component - customProps = Object.assign(Object.assign({}, customProps), { layout: [ - { - width: 240, - height: 300, - }, - ] }); - component.update( - - ); - gradient = component.root.findByType(expo_linear_gradient_1.LinearGradient); - expect(gradient).toBeDefined(); - expect(gradient.props.start).toEqual({ x: 0, y: 0 }); - expect(gradient.props.end).toEqual({ x: 1, y: 0 }); - component.update( - - ); - gradient = component.root.findByType(expo_linear_gradient_1.LinearGradient); - expect(gradient).toBeDefined(); - expect(gradient.props.start).toEqual({ x: 0, y: 0 }); - expect(gradient.props.end).toEqual({ x: 1, y: 0 }); - component.update( - - ); - gradient = component.root.findByType(expo_linear_gradient_1.LinearGradient); - expect(gradient).toBeDefined(); - expect(gradient.props.start).toEqual({ x: 0, y: 0 }); - expect(gradient.props.end).toEqual({ x: 0, y: 1 }); - component.update( - - ); - gradient = component.root.findByType(expo_linear_gradient_1.LinearGradient); - expect(gradient).toBeDefined(); - expect(gradient.props.start).toEqual({ x: 0, y: 0 }); - expect(gradient.props.end).toEqual({ x: 0, y: 1 }); - component.update( - - ); - gradient = component.root.findByType(expo_linear_gradient_1.LinearGradient); - expect(gradient).toBeDefined(); - expect(gradient.props.start).toEqual({ x: 0, y: 0 }); - expect(gradient.props.end).toEqual({ x: 1, y: 0 }); - component.update( - - ); - gradient = component.root.findByType(expo_linear_gradient_1.LinearGradient); - expect(gradient).toBeDefined(); - expect(gradient.props.start).toEqual({ x: 0, y: 0 }); - expect(gradient.props.end).toEqual({ x: 1, y: 0 }); - expect(gradient.props.colors).toEqual([ - Constants_1.DEFAULT_BONE_COLOR, - Constants_1.DEFAULT_HIGHLIGHT_COLOR, - Constants_1.DEFAULT_BONE_COLOR, - ]); - }); -}); diff --git a/node_modules/react-native-skeleton-content/lib/useLayout.d.ts b/node_modules/react-native-skeleton-content/lib/useLayout.d.ts new file mode 100644 index 0000000..d99ba69 --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/useLayout.d.ts @@ -0,0 +1,16 @@ +import type { ViewProps } from 'react-native'; +import { ISize } from './Constants'; +type OnLayout = ViewProps['onLayout']; +export type ViewLayout = { + x: number; + y: number; + width: number; + height: number; +}; +export type ViewLayoutEvent = { + nativeEvent: { + layout: ViewLayout; + }; +}; +export declare const useLayout: () => [ISize, OnLayout]; +export {}; diff --git a/node_modules/react-native-skeleton-content/lib/useLayout.js b/node_modules/react-native-skeleton-content/lib/useLayout.js new file mode 100644 index 0000000..1f1e285 --- /dev/null +++ b/node_modules/react-native-skeleton-content/lib/useLayout.js @@ -0,0 +1,13 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.useLayout = void 0; +const react_1 = require("react"); +const useLayout = () => { + const [size, setSize] = (0, react_1.useState)({ width: 0, height: 0 }); + const onLayout = (0, react_1.useCallback)((event) => { + const { width, height } = event.nativeEvent.layout; + setSize({ width, height }); + }, []); + return [size, onLayout]; +}; +exports.useLayout = useLayout;