mirror of
https://github.com/apache/superset.git
synced 2026-04-19 08:04:53 +00:00
92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
/**
|
|
* Licensed to the Apache Software Foundation (ASF) under one
|
|
* or more contributor license agreements. See the NOTICE file
|
|
* distributed with this work for additional information
|
|
* regarding copyright ownership. The ASF licenses this file
|
|
* to you under the Apache License, Version 2.0 (the
|
|
* "License"); you may not use this file except in compliance
|
|
* with the License. You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing,
|
|
* software distributed under the License is distributed on an
|
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
* KIND, either express or implied. See the License for the
|
|
* specific language governing permissions and limitations
|
|
* under the License.
|
|
*/
|
|
import { SafeMarkdown, styled } from '@superset-ui/core';
|
|
import Handlebars from 'handlebars';
|
|
import moment from 'moment';
|
|
import React, { useMemo, useState } from 'react';
|
|
import { isPlainObject } from 'lodash';
|
|
import Helpers from 'just-handlebars-helpers';
|
|
|
|
export interface HandlebarsViewerProps {
|
|
templateSource: string;
|
|
data: any;
|
|
}
|
|
|
|
export const HandlebarsViewer = ({
|
|
templateSource,
|
|
data,
|
|
}: HandlebarsViewerProps) => {
|
|
const [renderedTemplate, setRenderedTemplate] = useState('');
|
|
const [error, setError] = useState('');
|
|
const appContainer = document.getElementById('app');
|
|
const { common } = JSON.parse(
|
|
appContainer?.getAttribute('data-bootstrap') || '{}',
|
|
);
|
|
const htmlSanitization = common?.conf?.HTML_SANITIZATION ?? true;
|
|
const htmlSchemaOverrides =
|
|
common?.conf?.HTML_SANITIZATION_SCHEMA_EXTENSIONS || {};
|
|
|
|
useMemo(() => {
|
|
try {
|
|
const template = Handlebars.compile(templateSource);
|
|
const result = template(data);
|
|
setRenderedTemplate(result);
|
|
setError('');
|
|
} catch (error) {
|
|
setRenderedTemplate('');
|
|
setError(error.message);
|
|
}
|
|
}, [templateSource, data]);
|
|
|
|
const Error = styled.pre`
|
|
white-space: pre-wrap;
|
|
`;
|
|
|
|
if (error) {
|
|
return <Error>{error}</Error>;
|
|
}
|
|
|
|
if (renderedTemplate) {
|
|
return (
|
|
<SafeMarkdown
|
|
source={renderedTemplate}
|
|
htmlSanitization={htmlSanitization}
|
|
htmlSchemaOverrides={htmlSchemaOverrides}
|
|
/>
|
|
);
|
|
}
|
|
return <p>Loading...</p>;
|
|
};
|
|
|
|
// usage: {{dateFormat my_date format="MMMM YYYY"}}
|
|
Handlebars.registerHelper('dateFormat', function (context, block) {
|
|
const f = block.hash.format || 'YYYY-MM-DD';
|
|
return moment(context).format(f);
|
|
});
|
|
|
|
// usage: {{ }}
|
|
Handlebars.registerHelper('stringify', (obj: any, obj2: any) => {
|
|
// calling without an argument
|
|
if (obj2 === undefined)
|
|
throw Error('Please call with an object. Example: `stringify myObj`');
|
|
return isPlainObject(obj) ? JSON.stringify(obj) : String(obj);
|
|
});
|
|
|
|
Helpers.registerHelpers(Handlebars);
|