@geezee/react-ui
Version:
Modern and minimalist React UI library.
87 lines (82 loc) • 7.14 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import Link from '../link';
import useTheme from '../styles/use-theme';
import withDefaults from '../utils/with-defaults';
import ImageBrowserHttpsIcon from './image-browser-https-icon';
import { getBrowserColors } from './styles';
var defaultProps = {
className: '',
showFullLink: false,
anchorProps: {},
invert: false
};
var getHostFromUrl = function getHostFromUrl(url) {
try {
return new URL(url).host;
} catch (e) {
return url;
}
};
var getTitle = function getTitle(title, colors) {
return /*#__PURE__*/React.createElement("div", {
className: _JSXStyle.dynamic([["3602594722", [colors.titleColor]]]) + " " + "title"
}, title, /*#__PURE__*/React.createElement(_JSXStyle, {
id: "3602594722",
dynamic: [colors.titleColor]
}, ".title.__jsx-style-dynamic-selector{color:".concat(colors.titleColor, ";font-size:0.75rem;}")));
};
var getAddressInput = function getAddressInput(url, showFullLink, colors, anchorProps) {
return /*#__PURE__*/React.createElement("div", {
className: _JSXStyle.dynamic([["792752195", [colors.inputBgColor]]]) + " " + "address-input"
}, /*#__PURE__*/React.createElement("span", {
className: _JSXStyle.dynamic([["792752195", [colors.inputBgColor]]]) + " " + "https"
}, /*#__PURE__*/React.createElement(ImageBrowserHttpsIcon, null)), /*#__PURE__*/React.createElement(Link, _extends({
href: url,
title: url,
target: "_blank"
}, anchorProps), showFullLink ? url : getHostFromUrl(url)), /*#__PURE__*/React.createElement(_JSXStyle, {
id: "792752195",
dynamic: [colors.inputBgColor]
}, ".address-input.__jsx-style-dynamic-selector{height:1.75rem;max-width:60%;min-width:40%;background-color:".concat(colors.inputBgColor, ";color:inherit;border-radius:3px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:0 10px;overflow:hidden;position:relative;}.address-input.__jsx-style-dynamic-selector *{font-size:0.75rem;color:inherit;}.address-input.__jsx-style-dynamic-selector a{max-width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;color:inherit;}.https.__jsx-style-dynamic-selector{width:12px;height:12px;margin-right:5px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-top:-1px;color:inherit;}")));
};
var ImageBrowser = React.forwardRef(function (_ref, ref) {
var url = _ref.url,
title = _ref.title,
children = _ref.children,
showFullLink = _ref.showFullLink,
invert = _ref.invert,
anchorProps = _ref.anchorProps,
className = _ref.className,
props = _objectWithoutProperties(_ref, ["url", "title", "children", "showFullLink", "invert", "anchorProps", "className"]);
var theme = useTheme();
var colors = useMemo(function () {
return getBrowserColors(invert, theme.palette);
}, [invert, theme.palette]);
var input = useMemo(function () {
if (url) return getAddressInput(url, showFullLink, colors, anchorProps);
if (title) return getTitle(title, colors);
return null;
}, [url, showFullLink, title, colors, anchorProps]);
return /*#__PURE__*/React.createElement("div", _extends({
ref: ref
}, props, {
className: _JSXStyle.dynamic([["2685682961", [theme.expressiveness.shadowLarge, theme.expressiveness.R2, colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + (props && props.className != null && props.className || "bowser ".concat(className))
}), /*#__PURE__*/React.createElement("header", {
className: _JSXStyle.dynamic([["2685682961", [theme.expressiveness.shadowLarge, theme.expressiveness.R2, colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]])
}, /*#__PURE__*/React.createElement("div", {
className: _JSXStyle.dynamic([["2685682961", [theme.expressiveness.shadowLarge, theme.expressiveness.R2, colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + "traffic"
}, /*#__PURE__*/React.createElement("span", {
className: _JSXStyle.dynamic([["2685682961", [theme.expressiveness.shadowLarge, theme.expressiveness.R2, colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + "close"
}), /*#__PURE__*/React.createElement("span", {
className: _JSXStyle.dynamic([["2685682961", [theme.expressiveness.shadowLarge, theme.expressiveness.R2, colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + "mini"
}), /*#__PURE__*/React.createElement("span", {
className: _JSXStyle.dynamic([["2685682961", [theme.expressiveness.shadowLarge, theme.expressiveness.R2, colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]]]) + " " + "full"
})), input), children, /*#__PURE__*/React.createElement(_JSXStyle, {
id: "2685682961",
dynamic: [theme.expressiveness.shadowLarge, theme.expressiveness.R2, colors.color, colors.barBgColor, colors.borderColor, theme.layout.gapHalf]
}, ".bowser.__jsx-style-dynamic-selector{background-color:transparent;box-shadow:".concat(theme.expressiveness.shadowLarge, ";width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100%;margin:0 auto;border-radius:").concat(theme.expressiveness.R2, ";overflow:hidden;}.bowser.__jsx-style-dynamic-selector .image{border-top-left-radius:0;border-top-right-radius:0;}header.__jsx-style-dynamic-selector{height:2.5rem;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:relative;color:").concat(colors.color, ";background-color:").concat(colors.barBgColor, ";border-bottom:1px solid ").concat(colors.borderColor, ";}.traffic.__jsx-style-dynamic-selector{width:auto;position:absolute;left:").concat(theme.layout.gapHalf, ";top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);bottom:0;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.traffic.__jsx-style-dynamic-selector span.__jsx-style-dynamic-selector{border-radius:50%;width:0.75rem;height:0.75rem;display:inline-block;margin-right:0.5rem;}.close.__jsx-style-dynamic-selector{background-color:#ff5f56;}.mini.__jsx-style-dynamic-selector{background-color:#ffbd2e;}.full.__jsx-style-dynamic-selector{background-color:#27c93f;}")));
});
export default withDefaults(ImageBrowser, defaultProps);