react-native-curved-bottom-bar
Version:
A high performance, beautiful and fully customizable curved bottom navigation bar for React Native.
289 lines (282 loc) • 9.06 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getPathUp = void 0;
var shape = _interopRequireWildcard(require("d3-shape"));
var _reactNativeSizeScaling = require("react-native-size-scaling");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
//** Path Line */
const line = (width, height, centerWidth) => {
const path = shape.line().x(d => d.x).y(d => d.y)([{
x: width / 2 - (0, _reactNativeSizeScaling.scale)(centerWidth) - (0, _reactNativeSizeScaling.scale)(20),
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: 0,
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: 0,
y: height
}, {
x: width,
y: height
}, {
x: width,
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: width / 2 + (0, _reactNativeSizeScaling.scale)(centerWidth) + (0, _reactNativeSizeScaling.scale)(20),
y: (0, _reactNativeSizeScaling.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: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: 0,
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: 0,
y: height
}, {
x: width,
y: height
}, {
x: width,
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: (0, _reactNativeSizeScaling.scale)(centerWidth * 1.9) + (0, _reactNativeSizeScaling.scale)(20),
y: (0, _reactNativeSizeScaling.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 - (0, _reactNativeSizeScaling.scale)(centerWidth * 1.9) - (0, _reactNativeSizeScaling.scale)(20),
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: 0,
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: 0,
y: height
}, {
x: width,
y: height
}, {
x: width,
y: (0, _reactNativeSizeScaling.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 + (0, _reactNativeSizeScaling.scale)(centerWidth) + (0, _reactNativeSizeScaling.scale)(20),
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: width - (0, _reactNativeSizeScaling.scale)(20),
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: width - (0, _reactNativeSizeScaling.scale)(10),
y: (0, _reactNativeSizeScaling.scale)(32)
}, {
x: width - (0, _reactNativeSizeScaling.scale)(2),
y: (0, _reactNativeSizeScaling.scale)(40)
}, {
x: width,
y: (0, _reactNativeSizeScaling.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: (0, _reactNativeSizeScaling.scale)(50)
}, {
x: 0 + (0, _reactNativeSizeScaling.scale)(2),
y: (0, _reactNativeSizeScaling.scale)(40)
}, {
x: 0 + (0, _reactNativeSizeScaling.scale)(10),
y: (0, _reactNativeSizeScaling.scale)(32)
}, {
x: 0 + (0, _reactNativeSizeScaling.scale)(20),
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: width / 2 - (0, _reactNativeSizeScaling.scale)(centerWidth) - (0, _reactNativeSizeScaling.scale)(20),
y: (0, _reactNativeSizeScaling.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: (0, _reactNativeSizeScaling.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: (0, _reactNativeSizeScaling.scale)(50)
}, {
x: 0 + (0, _reactNativeSizeScaling.scale)(2),
y: (0, _reactNativeSizeScaling.scale)(40)
}, {
x: 0 + (0, _reactNativeSizeScaling.scale)(10),
y: (0, _reactNativeSizeScaling.scale)(32)
}, {
x: 0 + (0, _reactNativeSizeScaling.scale)(20),
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: width - (0, _reactNativeSizeScaling.scale)(centerWidth * 1.9) - (0, _reactNativeSizeScaling.scale)(20),
y: (0, _reactNativeSizeScaling.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: (0, _reactNativeSizeScaling.scale)(centerWidth * 1.9) + (0, _reactNativeSizeScaling.scale)(20),
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: width - (0, _reactNativeSizeScaling.scale)(20),
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: width - (0, _reactNativeSizeScaling.scale)(10),
y: (0, _reactNativeSizeScaling.scale)(32)
}, {
x: width - (0, _reactNativeSizeScaling.scale)(2),
y: (0, _reactNativeSizeScaling.scale)(40)
}, {
x: width,
y: (0, _reactNativeSizeScaling.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: (0, _reactNativeSizeScaling.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 - (0, _reactNativeSizeScaling.scale)(50),
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: position - (0, _reactNativeSizeScaling.scale)(8),
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: position - (0, _reactNativeSizeScaling.scale)(3),
y: (0, _reactNativeSizeScaling.scale)(10)
}, {
x: trim,
y: 0
}, {
x: circleWidth + (0, _reactNativeSizeScaling.scale)(3),
y: (0, _reactNativeSizeScaling.scale)(10)
}, {
x: circleWidth + (0, _reactNativeSizeScaling.scale)(8),
y: (0, _reactNativeSizeScaling.scale)(30)
}, {
x: circleWidth + (0, _reactNativeSizeScaling.scale)(50),
y: (0, _reactNativeSizeScaling.scale)(30)
}]);
return curved;
};
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 = (0, _reactNativeSizeScaling.scale)(iHeight);
const circleWidth = (0, _reactNativeSizeScaling.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)}`;
};
exports.getPathUp = getPathUp;
//# sourceMappingURL=pathUp.js.map