@woocommerce/components
Version:
UI components for WooCommerce.
75 lines (74 loc) • 2.38 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
* External dependencies
*/
const clsx_1 = __importDefault(require("clsx"));
const element_1 = require("@wordpress/element");
const lodash_1 = require("lodash");
const prop_types_1 = __importDefault(require("prop-types"));
/**
* Internal dependencies
*/
const spinner_1 = __importDefault(require("../spinner"));
/**
* WebPreview component to display an iframe of another page.
*/
class WebPreview extends element_1.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
};
this.iframeRef = (0, element_1.createRef)();
this.setLoaded = this.setLoaded.bind(this);
}
componentDidMount() {
this.iframeRef.current.addEventListener('load', this.setLoaded);
}
setLoaded() {
this.setState({ isLoading: false });
this.props.onLoad();
}
render() {
const { className, loadingContent, src, title } = this.props;
const { isLoading } = this.state;
const classes = (0, clsx_1.default)('woocommerce-web-preview', className, {
'is-loading': isLoading,
});
return ((0, element_1.createElement)("div", { className: classes },
isLoading && loadingContent,
(0, element_1.createElement)("div", { className: "woocommerce-web-preview__iframe-wrapper" },
(0, element_1.createElement)("iframe", { ref: this.iframeRef, title: title, src: src }))));
}
}
WebPreview.propTypes = {
/**
* Additional class name to style the component.
*/
className: prop_types_1.default.string,
/**
* Content shown when iframe is still loading.
*/
loadingContent: prop_types_1.default.node,
/**
* Function to fire when iframe content is loaded.
*/
onLoad: prop_types_1.default.func,
/**
* Iframe src to load.
*/
src: prop_types_1.default.string.isRequired,
/**
* Iframe title.
*/
title: prop_types_1.default.string.isRequired,
};
WebPreview.defaultProps = {
loadingContent: (0, element_1.createElement)(spinner_1.default, null),
onLoad: lodash_1.noop,
};
exports.default = WebPreview;