mirror of https://github.com/apache/superset.git
refactor: HighligthedSQL into functional component with Typescript (#13098)
This commit is contained in:
parent
aa50161933
commit
9489f0b8f4
|
@ -1,119 +0,0 @@
|
||||||
/**
|
|
||||||
* 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 React from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
|
|
||||||
import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
|
|
||||||
import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
|
|
||||||
import { t } from '@superset-ui/core';
|
|
||||||
|
|
||||||
import ModalTrigger from '../../components/ModalTrigger';
|
|
||||||
|
|
||||||
SyntaxHighlighter.registerLanguage('sql', sql);
|
|
||||||
|
|
||||||
const defaultProps = {
|
|
||||||
maxWidth: 50,
|
|
||||||
maxLines: 5,
|
|
||||||
shrink: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
const propTypes = {
|
|
||||||
sql: PropTypes.string.isRequired,
|
|
||||||
rawSql: PropTypes.string,
|
|
||||||
maxWidth: PropTypes.number,
|
|
||||||
maxLines: PropTypes.number,
|
|
||||||
shrink: PropTypes.bool,
|
|
||||||
};
|
|
||||||
|
|
||||||
class HighlightedSql extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
modalBody: null,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
shrinkSql() {
|
|
||||||
const ssql = this.props.sql || '';
|
|
||||||
let lines = ssql.split('\n');
|
|
||||||
if (lines.length >= this.props.maxLines) {
|
|
||||||
lines = lines.slice(0, this.props.maxLines);
|
|
||||||
lines.push('{...}');
|
|
||||||
}
|
|
||||||
return lines
|
|
||||||
.map(line => {
|
|
||||||
if (line.length > this.props.maxWidth) {
|
|
||||||
return `${line.slice(0, this.props.maxWidth)}{...}`;
|
|
||||||
}
|
|
||||||
return line;
|
|
||||||
})
|
|
||||||
.join('\n');
|
|
||||||
}
|
|
||||||
|
|
||||||
triggerNode() {
|
|
||||||
const shownSql = this.props.shrink
|
|
||||||
? this.shrinkSql(this.props.sql)
|
|
||||||
: this.props.sql;
|
|
||||||
return (
|
|
||||||
<SyntaxHighlighter language="sql" style={github}>
|
|
||||||
{shownSql}
|
|
||||||
</SyntaxHighlighter>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
generateModal() {
|
|
||||||
let rawSql;
|
|
||||||
if (this.props.rawSql && this.props.rawSql !== this.props.sql) {
|
|
||||||
rawSql = (
|
|
||||||
<div>
|
|
||||||
<h4>{t('Raw SQL')}</h4>
|
|
||||||
<SyntaxHighlighter language="sql" style={github}>
|
|
||||||
{this.props.rawSql}
|
|
||||||
</SyntaxHighlighter>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
this.setState({
|
|
||||||
modalBody: (
|
|
||||||
<div>
|
|
||||||
<h4>{t('Source SQL')}</h4>
|
|
||||||
<SyntaxHighlighter language="sql" style={github}>
|
|
||||||
{this.props.sql}
|
|
||||||
</SyntaxHighlighter>
|
|
||||||
{rawSql}
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<ModalTrigger
|
|
||||||
modalTitle={t('SQL')}
|
|
||||||
triggerNode={this.triggerNode()}
|
|
||||||
modalBody={this.state.modalBody}
|
|
||||||
beforeOpen={this.generateModal.bind(this)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
HighlightedSql.propTypes = propTypes;
|
|
||||||
HighlightedSql.defaultProps = defaultProps;
|
|
||||||
|
|
||||||
export default HighlightedSql;
|
|
|
@ -0,0 +1,116 @@
|
||||||
|
/**
|
||||||
|
* 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 React from 'react';
|
||||||
|
import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
|
||||||
|
import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
|
||||||
|
import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
|
||||||
|
import { t } from '@superset-ui/core';
|
||||||
|
|
||||||
|
import ModalTrigger from '../../components/ModalTrigger';
|
||||||
|
|
||||||
|
SyntaxHighlighter.registerLanguage('sql', sql);
|
||||||
|
|
||||||
|
interface HighlightedSqlProps {
|
||||||
|
sql: string;
|
||||||
|
rawSql?: string;
|
||||||
|
maxWidth?: number;
|
||||||
|
maxLines?: number;
|
||||||
|
shrink?: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface HighlightedSqlModalTypes {
|
||||||
|
rawSql?: string;
|
||||||
|
sql: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TriggerNodeProps {
|
||||||
|
shrink: boolean;
|
||||||
|
sql: string;
|
||||||
|
maxLines: number;
|
||||||
|
maxWidth: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const shrinkSql = (sql: string, maxLines: number, maxWidth: number) => {
|
||||||
|
const ssql = sql || '';
|
||||||
|
let lines = ssql.split('\n');
|
||||||
|
if (lines.length >= maxLines) {
|
||||||
|
lines = lines.slice(0, maxLines);
|
||||||
|
lines.push('{...}');
|
||||||
|
}
|
||||||
|
return lines
|
||||||
|
.map(line => {
|
||||||
|
if (line.length > maxWidth) {
|
||||||
|
return `${line.slice(0, maxWidth)}{...}`;
|
||||||
|
}
|
||||||
|
return line;
|
||||||
|
})
|
||||||
|
.join('\n');
|
||||||
|
};
|
||||||
|
|
||||||
|
function TriggerNode({ shrink, sql, maxLines, maxWidth }: TriggerNodeProps) {
|
||||||
|
return (
|
||||||
|
<SyntaxHighlighter language="sql" style={github}>
|
||||||
|
{shrink ? shrinkSql(sql, maxLines, maxWidth) : sql}
|
||||||
|
</SyntaxHighlighter>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function HighlightSqlModal({ rawSql, sql }: HighlightedSqlModalTypes) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h4>{t('Source SQL')}</h4>
|
||||||
|
<SyntaxHighlighter language="sql" style={github}>
|
||||||
|
{sql}
|
||||||
|
</SyntaxHighlighter>
|
||||||
|
{rawSql && rawSql !== sql && (
|
||||||
|
<div>
|
||||||
|
<h4>{t('Raw SQL')}</h4>
|
||||||
|
<SyntaxHighlighter language="sql" style={github}>
|
||||||
|
{rawSql}
|
||||||
|
</SyntaxHighlighter>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function HighlightedSql({
|
||||||
|
sql,
|
||||||
|
rawSql,
|
||||||
|
maxWidth = 50,
|
||||||
|
maxLines = 5,
|
||||||
|
shrink = false,
|
||||||
|
}: HighlightedSqlProps) {
|
||||||
|
return (
|
||||||
|
<ModalTrigger
|
||||||
|
modalTitle={t('SQL')}
|
||||||
|
modalBody={<HighlightSqlModal rawSql={rawSql} sql={sql} />}
|
||||||
|
triggerNode={
|
||||||
|
<TriggerNode
|
||||||
|
shrink={shrink}
|
||||||
|
sql={sql}
|
||||||
|
maxLines={maxLines}
|
||||||
|
maxWidth={maxWidth}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HighlightedSql;
|
Loading…
Reference in New Issue