react-base-guide/lib/components/link/index.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const react_router_dom_1 = require("react-router-dom");
const add_custom_style_1 = __importDefault(require("../../utils/add-custom-style"));
const scProps = (props) => {
    let newProps = Object.assign({}, props);
    delete newProps.styled;
    delete newProps.variant;
    delete newProps.color;
    delete newProps.disabled;
    return newProps;
};
const Link = (0, styled_components_1.default)((props) => props.to ? (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, scProps(props))) : (0, jsx_runtime_1.jsx)("a", Object.assign({}, scProps(props)))) `
  display: inline-block;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  color: ${p => p.theme.palette.text[p.color] || p.theme.palette.text.active};
  font-size: 14px;
  line-height: 1.5;
  transition: background 0.3s;
  opacity: ${p => p.disabled ? "0.5" : 1};
  pointer-events: ${p => p.disabled ? "none" : "all"};
  
  ${p => (0, add_custom_style_1.default)(p.styled)}

  &::after {
    content: "";
    display: ${p => p.variant === "simple" ? "none" : "block"};
    position: absolute;
    width: ${p => p.variant === "underline" ? "100%" : "0"};
    height: 1px;
    left: 0;
    background: ${p => p.theme.palette.text[p.color] || p.theme.palette.text.active};
    opacity: 0.6;
    transition: width 0.3s, opacity 0.3s;
  }

  &:hover {
    &::after {
      width: 100%;
      ${p => p.variant === "underline" && "opacity: 1;"}
    }
  }
`;
exports.default = Link;
//# sourceMappingURL=index.js.map