useGetGradientEndDirection.ts 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import { useCallback } from 'react';
  2. import { useGetBoneDimensions } from './useGetBoneDimensions';
  3. import type {
  4. ISkeletonProps,
  5. ICustomViewStyle,
  6. IComponentSize,
  7. } from '../constants';
  8. type UseGetGradientEndDirectionProps = Pick<
  9. ISkeletonProps,
  10. 'animationType' | 'animationDirection'
  11. > & {
  12. boneLayout: ICustomViewStyle;
  13. };
  14. export const useGetGradientEndDirection = (componentSize: IComponentSize) => {
  15. const getBoneDimensions = useGetBoneDimensions(componentSize);
  16. return useCallback(
  17. ({
  18. animationType,
  19. animationDirection,
  20. boneLayout,
  21. }: UseGetGradientEndDirectionProps) => {
  22. let direction = { x: 0, y: 0 };
  23. if (animationType === 'shiver') {
  24. switch (animationDirection) {
  25. case 'horizontalLeft':
  26. case 'horizontalRight':
  27. direction = { x: 1, y: 0 };
  28. break;
  29. case 'verticalTop':
  30. case 'verticalDown':
  31. direction = { x: 0, y: 1 };
  32. break;
  33. case 'diagonalTopRight':
  34. case 'diagonalDownRight':
  35. case 'diagonalDownLeft':
  36. case 'diagonalTopLeft': {
  37. const { height, width } = getBoneDimensions(boneLayout);
  38. return width && height && width > height
  39. ? { x: 0, y: 1 }
  40. : { x: 1, y: 0 };
  41. }
  42. }
  43. }
  44. return direction;
  45. },
  46. [getBoneDimensions],
  47. );
  48. };