@clayui/link
Version:
ClayLink component
133 lines (132 loc) • 4.32 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Link_exports = {};
__export(Link_exports, {
default: () => Link_default
});
module.exports = __toCommonJS(Link_exports);
var import_classnames = __toESM(require("classnames"));
var import_react = __toESM(require("react"));
var import_Context = __toESM(require("./Context"));
const LINK_PRESETS = {
danger: {
base: "c-link text-danger",
decoration: "underline"
},
primary: {
base: "c-link link-primary",
decoration: "underline"
},
secondary: {
base: "c-link link-secondary",
decoration: "underline"
},
tertiary: {
base: "c-link text-tertiary",
decoration: null
},
unstyled: {
base: "link-unstyled",
decoration: null
}
};
const FONT_WEIGHTS = {
"normal": "font-weight-normal",
"semi-bold": "font-weight-semi-bold"
};
const defaultMessages = {
opensNewWindow: "(Opens a new window)"
};
const Link = import_react.default.forwardRef(
({
block,
borderless,
button,
children,
className,
decoration,
displayType,
fontSize,
messages = defaultMessages,
monospaced,
outline,
rel,
small,
target,
weight,
...otherProps
}, ref) => {
const TagOrComponent = import_react.default.useContext(import_Context.default);
let classes;
if (button) {
button = button === true ? {} : button;
classes = {
"btn": !!button,
"btn-block": button.block || block,
"btn-monospaced": button.monospaced || monospaced,
"btn-outline-borderless": borderless,
"btn-sm": button.small || small,
[`btn-${displayType}`]: displayType && !outline && !borderless,
[`btn-outline-${displayType}`]: displayType && (outline || borderless),
[FONT_WEIGHTS[weight]]: weight,
[`text-${fontSize}`]: fontSize,
[`text-decoration-${decoration}`]: decoration
};
} else {
decoration = decoration === null || outline ? void 0 : decoration || LINK_PRESETS[displayType]?.decoration;
classes = {
"link-monospaced": monospaced,
"link-outline": outline,
"link-outline-borderless": borderless,
[LINK_PRESETS[displayType]?.base]: displayType && !outline,
[`link-outline-${displayType}`]: displayType && outline,
[FONT_WEIGHTS[weight]]: weight,
[`text-${fontSize}`]: fontSize,
[`text-decoration-${decoration}`]: decoration
};
}
if (target && !rel) {
rel = "noreferrer noopener";
}
return /* @__PURE__ */ import_react.default.createElement(
TagOrComponent,
{
className: (0, import_classnames.default)(className, classes),
ref,
rel,
target,
...otherProps
},
children,
target === "_blank" && /* @__PURE__ */ import_react.default.createElement("span", { className: "sr-only" }, messages.opensNewWindow)
);
}
);
Link.displayName = "ClayLink";
var Link_default = Link;