nice-ui
Version:
React design system, components, and utilities
44 lines (43 loc) • 1.37 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const nano_theme_1 = require("nano-theme");
const { useRef, useEffect } = React;
const css = {
ff: 'Arial, Helvetica, Linux Libertine, Times, Times New Roman, sans-serif',
fz: '24px',
ta: 'center',
canvas: {
verticalAlign: 'bottom',
},
};
const bigClass = (0, nano_theme_1.rule)(css);
const smallClass = (0, nano_theme_1.rule)({
...css,
fz: '18px',
});
const CharChemStructuralFormula = ({ source }) => {
const ref = useRef(null);
useEffect(() => {
const div = ref.current;
if (!ref.current)
return;
const ChemSys = window.ChemSys;
if (!ChemSys) {
// tslint:disable-next-line
console.error('ChemSys not loaded.');
return;
}
ChemSys.draw(div, ChemSys.compile(source));
const canvas = div.querySelectorAll('canvas');
if (!canvas.length)
div.innerHTML = source;
return () => {
while (div.firstChild)
div.removeChild(div.firstChild);
};
}, [ref.current, source]);
const isBig = source.length > 130;
return React.createElement("div", { ref: ref, className: isBig ? smallClass : bigClass });
};
exports.default = CharChemStructuralFormula;