@looker/embed-components
Version:
89 lines • 2.84 kB
JavaScript
import React, { useEffect, useState } from 'react';
import { Button, ButtonOutline, CopyToClipboard, Heading, InputText, Label, Section, Space, SpaceVertical, Span, ToggleSwitch } from '@looker/components';
import { Link } from '@styled-icons/material-outlined';
import { EmbedUrl } from '@looker/embed-services';
import { SelectTheme, useThemeActions, useThemesStoreState } from '../Theme';
export var QuickEmbed = _ref => {
var {
onClose,
onCopy
} = _ref;
var service = new EmbedUrl();
var [toggleValue, setToggle] = useState(false);
var [embedUrl, setEmbedUrl] = useState(service.embedUrl(false));
var {
selectedTheme
} = useThemesStoreState();
var {
selectThemeAction
} = useThemeActions();
var handleCopy = () => {
if (onCopy) {
onCopy();
}
};
var handleToggle = () => {
var newToggleValue = !toggleValue;
if (newToggleValue) {
var urlThemeName = service.searchParams.theme;
if (urlThemeName) {
selectThemeAction({
key: urlThemeName
});
}
}
setToggle(newToggleValue);
};
useEffect(() => {
var overrides;
if (service.isThemable) {
overrides = {
theme: selectedTheme.name
};
}
var newUrl = service.embedUrl(toggleValue, overrides);
setEmbedUrl(newUrl);
}, [toggleValue, selectedTheme]);
return React.createElement(Section, {
padding: "large"
}, React.createElement(Heading, {
as: "h3",
fontWeight: "medium"
}, "Get embed URL"), React.createElement(SpaceVertical, {
pt: "medium",
pb: "medium",
gap: "xsmall"
}, service.isThemable && React.createElement(React.Fragment, null, React.createElement(Span, {
fontWeight: "normal",
fontSize: "xsmall"
}, "Apply theme to ", service.contentType.toLocaleLowerCase(), " URL"), React.createElement(SelectTheme, null)), React.createElement(React.Fragment, null, React.createElement(Label, {
htmlFor: "embed-url",
fontWeight: "normal",
fontSize: "xsmall"
}, "Embed URL"), React.createElement(InputText, {
id: "embed-url",
iconBefore: React.createElement(Link, null),
readOnly: true,
value: embedUrl
}))), React.createElement(Space, {
gap: "xxsmall",
fontWeight: "normal",
fontSize: "small"
}, React.createElement(ToggleSwitch, {
onChange: handleToggle,
on: toggleValue
}), "Include current params in URL"), React.createElement(Space, {
mt: "large",
between: true
}, React.createElement(Space, {
onClick: handleCopy,
width: "fit-content"
}, React.createElement(CopyToClipboard, {
content: embedUrl
}, React.createElement(ButtonOutline, {
iconBefore: React.createElement(Link, null)
}, "Copy Link"))), React.createElement(Button, {
onClick: onClose
}, "Close")));
};
//# sourceMappingURL=QuickEmbed.js.map