react-native-curved-bottom-bar/lib/module/CurvedBottomBar/utils/pathUp.js

A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.

import * as shape from 'd3-shape';
import { scale } from 'react-native-size-scaling';

//** Path Line */
const line = (width, height, centerWidth) => {
  const path = shape.line().x(d => d.x).y(d => d.y)([{
    x: width / 2 - scale(centerWidth) - scale(20),
    y: scale(30)
  }, {
    x: 0,
    y: scale(30)
  }, {
    x: 0,
    y: height
  }, {
    x: width,
    y: height
  }, {
    x: width,
    y: scale(30)
  }, {
    x: width / 2 + scale(centerWidth) + scale(20),
    y: scale(30)
  }]);
  return path;
};

//** Path Line Left*/
const lineLeft = (width, height, centerWidth) => {
  const path = shape.line().x(d => d.x).y(d => d.y)([{
    x: 0,
    y: scale(30)
  }, {
    x: 0,
    y: scale(30)
  }, {
    x: 0,
    y: height
  }, {
    x: width,
    y: height
  }, {
    x: width,
    y: scale(30)
  }, {
    x: scale(centerWidth * 1.9) + scale(20),
    y: scale(30)
  }]);
  return path;
};

//** Path Line Right*/
const lineRight = (width, height, centerWidth) => {
  const path = shape.line().x(d => d.x).y(d => d.y)([{
    x: width - scale(centerWidth * 1.9) - scale(20),
    y: scale(30)
  }, {
    x: 0,
    y: scale(30)
  }, {
    x: 0,
    y: height
  }, {
    x: width,
    y: height
  }, {
    x: width,
    y: scale(30)
  }]);
  return path;
};

//** Path Line Border Left Right Up */
const lineBorder = (width, height, centerWidth) => {
  const border = shape.line().x(d => d.x).y(d => d.y).curve(shape.curveBasis)([
  // right
  {
    x: width / 2 + scale(centerWidth) + scale(20),
    y: scale(30)
  }, {
    x: width - scale(20),
    y: scale(30)
  }, {
    x: width - scale(10),
    y: scale(32)
  }, {
    x: width - scale(2),
    y: scale(40)
  }, {
    x: width,
    y: scale(50)
  }, {
    x: width,
    y: height
  }, {
    x: width,
    y: height
  },
  // bottom
  {
    x: width,
    y: height
  }, {
    x: 0,
    y: height
  },
  // left
  {
    x: 0,
    y: height
  }, {
    x: 0,
    y: height
  }, {
    x: 0,
    y: scale(50)
  }, {
    x: 0 + scale(2),
    y: scale(40)
  }, {
    x: 0 + scale(10),
    y: scale(32)
  }, {
    x: 0 + scale(20),
    y: scale(30)
  }, {
    x: width / 2 - scale(centerWidth) - scale(20),
    y: scale(30)
  }]);
  return border;
};

//** Path Line Border Left Right Down */
const lineBorderRight = (width, height, centerWidth) => {
  const border = shape.line().x(d => d.x).y(d => d.y).curve(shape.curveBasis)([
  // right
  {
    x: width,
    y: scale(30)
  }, {
    x: width,
    y: height
  }, {
    x: width,
    y: height
  },
  // bottom
  {
    x: width,
    y: height
  }, {
    x: 0,
    y: height
  },
  // left
  {
    x: 0,
    y: height
  }, {
    x: 0,
    y: height
  }, {
    x: 0,
    y: scale(50)
  }, {
    x: 0 + scale(2),
    y: scale(40)
  }, {
    x: 0 + scale(10),
    y: scale(32)
  }, {
    x: 0 + scale(20),
    y: scale(30)
  }, {
    x: width - scale(centerWidth * 1.9) - scale(20),
    y: scale(30)
  }]);
  return border;
};

//** Path Line Border Left Right Down */
const lineBorderLeft = (width, height, centerWidth) => {
  const border = shape.line().x(d => d.x).y(d => d.y).curve(shape.curveBasis)([
  // right
  {
    x: scale(centerWidth * 1.9) + scale(20),
    y: scale(30)
  }, {
    x: width - scale(20),
    y: scale(30)
  }, {
    x: width - scale(10),
    y: scale(32)
  }, {
    x: width - scale(2),
    y: scale(40)
  }, {
    x: width,
    y: scale(50)
  }, {
    x: width,
    y: height
  }, {
    x: width,
    y: height
  },
  // bottom
  {
    x: width,
    y: height
  }, {
    x: 0,
    y: height
  },
  // left
  {
    x: 0,
    y: height
  }, {
    x: 0,
    y: height
  }, {
    x: 0,
    y: scale(30)
  }]);
  return border;
};

//** Path Curved Up */
const lineCurved = (iPosition, circle) => {
  const position = iPosition;
  const circleWidth = circle + position;
  const trim = (position + circleWidth) / 2;
  const curved = shape.line().x(d => d.x).y(d => d.y).curve(shape.curveBasis)([{
    x: position - scale(50),
    y: scale(30)
  }, {
    x: position - scale(8),
    y: scale(30)
  }, {
    x: position - scale(3),
    y: scale(10)
  }, {
    x: trim,
    y: 0
  }, {
    x: circleWidth + scale(3),
    y: scale(10)
  }, {
    x: circleWidth + scale(8),
    y: scale(30)
  }, {
    x: circleWidth + scale(50),
    y: scale(30)
  }]);
  return curved;
};
export const getPathUp = function (width, iHeight) {
  let centerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 50;
  let borderTopLeftRight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  let position = arguments.length > 4 ? arguments[4] : undefined;
  const height = scale(iHeight);
  const circleWidth = scale(centerWidth);
  if (borderTopLeftRight && position === 'LEFT') {
    return `${lineBorderLeft(width, height, centerWidth)} ${lineCurved(circleWidth / 1.7, circleWidth)}`;
  }
  if (borderTopLeftRight && position === 'RIGHT') {
    return `${lineBorderRight(width, height, centerWidth)} ${lineCurved(width - circleWidth * 1.6, circleWidth)}`;
  }
  if (borderTopLeftRight && position === 'CENTER') {
    return `${lineBorder(width, height, centerWidth)} ${lineCurved(width / 2 - circleWidth / 2, circleWidth)}`;
  }
  if (position === 'LEFT') {
    return `${lineLeft(width, height, centerWidth)} ${lineCurved(circleWidth / 1.7, circleWidth)}`;
  }
  if (position === 'RIGHT') {
    return `${lineRight(width, height, centerWidth)} ${lineCurved(width - circleWidth * 1.6, circleWidth)}`;
  }
  return `${line(width, height, centerWidth)} ${lineCurved(width / 2 - circleWidth / 2, circleWidth)}`;
};
//# sourceMappingURL=pathUp.js.map