@trap_stevo/legendarybuilderproreact-ui
Version:
The legendary UI & utility API that makes your application a legendary application. ~ Created by Steven Compton
118 lines • 7.89 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import * as React from "react";
import { useState, useEffect, useRef } from "react";
function HUDSilhouette(_ref) {
var _ref$silhouetteContai = _ref.silhouetteContainerConfigurationSettings,
silhouetteContainerConfigurationSettings = _ref$silhouetteContai === void 0 ? {} : _ref$silhouetteContai,
_ref$silhouetteConfig = _ref.silhouetteConfigurationSettings,
silhouetteConfigurationSettings = _ref$silhouetteConfig === void 0 ? {} : _ref$silhouetteConfig,
_ref$silhouetteContai2 = _ref.silhouetteContainerConfigurations,
silhouetteContainerConfigurations = _ref$silhouetteContai2 === void 0 ? {} : _ref$silhouetteContai2,
_ref$silhouetteConfig2 = _ref.silhouetteConfigurations,
silhouetteConfigurations = _ref$silhouetteConfig2 === void 0 ? {} : _ref$silhouetteConfig2,
_ref$gradientColors = _ref.gradientColors,
gradientColors = _ref$gradientColors === void 0 ? ["#1A73E8", "#0F4C81"] : _ref$gradientColors,
_ref$orientations = _ref.orientations,
orientations = _ref$orientations === void 0 ? ["bottom"] : _ref$orientations,
_ref$fillColor = _ref.fillColor,
fillColor = _ref$fillColor === void 0 ? "#1A73E8" : _ref$fillColor,
_ref$gradient = _ref.gradient,
gradient = _ref$gradient === void 0 ? false : _ref$gradient,
_ref$animation = _ref.animation,
animation = _ref$animation === void 0 ? true : _ref$animation,
_ref$type = _ref.type,
type = _ref$type === void 0 ? "wave" : _ref$type,
children = _ref.children;
var _useState = useState(""),
_useState2 = _slicedToArray(_useState, 2),
clipPath = _useState2[0],
setClipPath = _useState2[1];
var contentRef = useRef(null);
var clipPaths = {
wave: {
"bottom-top": "polygon(0% 10%, 25% 0%, 75% 15%, 100% 5%, 100% 90%, 75% 85%, 25% 100%, 0% 90%)",
"left-right": "polygon(10% 0%, 0% 25%, 15% 75%, 5% 100%, 90% 100%, 100% 75%, 85% 25%, 95% 0%)",
all: "polygon(10% 10%, 0% 25%, 15% 75%, 5% 90%, 25% 100%, 75% 85%, 95% 90%, 85% 25%, 95% 10%)",
bottom: "polygon(0% 90%, 25% 100%, 75% 85%, 100% 95%, 100% 0%, 0% 0%)",
right: "polygon(90% 0%, 100% 25%, 85% 75%, 95% 100%, 0% 100%, 0% 0%)",
left: "polygon(10% 0%, 0% 25%, 15% 75%, 5% 100%, 100% 100%, 100% 0%)",
top: "polygon(0% 10%, 25% 0%, 75% 15%, 100% 5%, 100% 100%, 0% 100%)"
},
peak: {
"bottom-top": "polygon(0% 90%, 25% 80%, 50% 95%, 75% 80%, 100% 90%, 100% 10%, 75% 20%, 50% 5%, 25% 20%, 0% 10%)",
"left-right": "polygon(0% 0%, 20% 50%, 0% 100%, 90% 100%, 100% 50%, 90% 0%)",
all: "polygon(10% 100%, 50% 80%, 90% 100%, 80% 50%, 50% 10%, 20% 50%, 10% 100%)",
bottom: "polygon(0% 80%, 50% 100%, 100% 80%, 100% 0%, 0% 0%)",
right: "polygon(100% 0%, 80% 50%, 100% 100%, 0% 100%, 0% 0%)",
left: "polygon(0% 0%, 20% 50%, 0% 100%, 100% 100%, 100% 0%)",
top: "polygon(0% 100%, 50% 80%, 100% 100%, 100% 100%, 0% 100%)"
},
curve: {
"bottom-top": "polygon(0% 20%, 50% 0%, 100% 20%, 100% 90%, 50% 100%, 0% 90%)",
"left-right": "polygon(20% 0%, 0% 50%, 20% 100%, 80% 100%, 100% 50%, 80% 0%)",
all: "polygon(20% 20%, 50% 5%, 80% 20%, 80% 80%, 50% 95%, 20% 80%)",
bottom: "polygon(0% 90%, 50% 100%, 100% 90%, 100% 0%, 0% 0%)",
right: "polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 0% 0%)",
left: "polygon(20% 0%, 0% 50%, 20% 100%, 100% 100%, 100% 0%)",
top: "polygon(0% 20%, 50% 0%, 100% 20%, 100% 100%, 0% 100%)"
},
deepCurve: {
"bottom-top": "polygon(0% 95%, 15% 90%, 35% 85%, 57% 97%, 70% 85%, 81% 90%, 100% 97%, 100% 3%, 87% 10%, 77% 15%, 45% 3%, 25% 15%, 15% 10%, 0% 5%)",
"left-right": "polygon(0% 0%, 20% 20%, 15% 50%, 25% 80%, 0% 100%, 90% 100%, 95% 80%, 85% 50%, 80% 20%, 100% 0%)",
all: "polygon(10% 90%, 25% 70%, 50% 100%, 75% 70%, 90% 90%, 80% 50%, 50% 10%, 20% 50%, 10% 90%)",
bottom: "polygon(0% 100%, 25% 90%, 50% 100%, 75% 90%, 100% 100%, 100% 0%, 0% 0%)",
right: "polygon(100% 0%, 80% 20%, 85% 50%, 75% 80%, 100% 100%, 0% 100%, 0% 0%)",
left: "polygon(0% 0%, 20% 20%, 15% 50%, 25% 80%, 0% 100%, 100% 100%, 100% 0%)",
top: "polygon(0% 90%, 25% 70%, 50% 100%, 75% 70%, 100% 90%, 100% 100%, 0% 100%)"
},
jagged: {
"bottom-top": "polygon(0% 15%, 20% 5%, 40% 25%, 60% 5%, 80% 25%, 100% 10%, 100% 90%, 80% 85%, 60% 100%, 40% 85%, 20% 100%, 0% 85%)",
"left-right": "polygon(0% 0%, 10% 20%, 5% 40%, 20% 60%, 10% 80%, 0% 100%, 90% 100%, 95% 80%, 80% 60%, 95% 40%, 90% 20%, 100% 0%)",
all: "polygon(10% 90%, 25% 70%, 50% 100%, 75% 70%, 90% 90%, 80% 50%, 50% 10%, 20% 50%, 10% 90%)",
bottom: "polygon(0% 90%, 20% 85%, 40% 100%, 60% 85%, 80% 100%, 100% 85%, 100% 0%, 0% 0%)",
right: "polygon(100% 0%, 90% 20%, 95% 40%, 80% 60%, 90% 80%, 100% 100%, 0% 100%, 0% 0%)",
left: "polygon(0% 0%, 10% 20%, 5% 40%, 20% 60%, 10% 80%, 0% 100%, 100% 100%, 100% 0%)",
top: "polygon(0% 15%, 20% 5%, 40% 25%, 60% 5%, 80% 25%, 100% 10%, 100% 100%, 0% 100%)"
},
fade: {
"bottom-top": "linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 27%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.6) 69%, rgba(0, 0, 0, 0) 100%)",
"left-right": "linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 27%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.6) 69%, rgba(0, 0, 0, 0) 100%)",
"all": "radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.369) 47%, rgba(0, 0, 0, 0) 69%)",
bottom: "linear-gradient(to top, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 90%)",
right: "linear-gradient(to left, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 90%)",
left: "linear-gradient(to right, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 90%)",
top: "linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 90%)"
}
};
useEffect(function () {
var sortedOrientations = orientations.sort().join("-");
var shape = clipPaths[type][sortedOrientations] || clipPaths[type]["bottom"];
setClipPath(shape);
}, [type, orientations]);
return /*#__PURE__*/React.createElement("div", _extends({
ref: contentRef,
style: _objectSpread({
position: "relative",
overflow: "hidden",
clipPath: clipPath,
WebkitMaskImage: type === "fade" ? clipPath : undefined,
maskImage: type === "fade" ? clipPath : undefined,
transition: animation ? "clip-path 0.4s ease-in-out, mask-image 0.4s ease-in-out" : "none",
borderRadius: "15px",
boxShadow: "0px 10px 20px rgba(0, 0, 0, 0.69)",
background: gradient ? "linear-gradient(90deg, ".concat(gradientColors[0], ", ").concat(gradientColors[1], ")") : fillColor,
margin: "20px 0"
}, silhouetteContainerConfigurationSettings)
}, silhouetteContainerConfigurations), /*#__PURE__*/React.createElement("div", _extends({
style: _objectSpread({
padding: "80px",
color: "#fff",
textAlign: "center"
}, silhouetteConfigurationSettings)
}, silhouetteConfigurations), children));
}
export default HUDSilhouette;