mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
feat: Add resize drag handle to Dataset SQL fields (#20670)
* feat: Add resize drag handle to Dataset SQL fields * PR comments
This commit is contained in:
parent
9291ad5d4c
commit
dd353ca86a
@ -33,6 +33,14 @@ interface CRUDCollectionProps {
|
|||||||
expandFieldset?: ReactNode;
|
expandFieldset?: ReactNode;
|
||||||
extraButtons?: ReactNode;
|
extraButtons?: ReactNode;
|
||||||
itemGenerator?: () => any;
|
itemGenerator?: () => any;
|
||||||
|
itemCellProps?: ((
|
||||||
|
val: unknown,
|
||||||
|
label: string,
|
||||||
|
record: any,
|
||||||
|
) => React.DetailedHTMLProps<
|
||||||
|
React.TdHTMLAttributes<HTMLTableCellElement>,
|
||||||
|
HTMLTableCellElement
|
||||||
|
>)[];
|
||||||
itemRenderers?: ((
|
itemRenderers?: ((
|
||||||
val: unknown,
|
val: unknown,
|
||||||
onChange: () => void,
|
onChange: () => void,
|
||||||
@ -335,6 +343,12 @@ export default class CRUDCollection extends React.PureComponent<
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getCellProps(record: any, col: any) {
|
||||||
|
const cellPropsFn = this.props.itemCellProps?.[col];
|
||||||
|
const val = record[col];
|
||||||
|
return cellPropsFn ? cellPropsFn(val, this.getLabel(col), record) : {};
|
||||||
|
}
|
||||||
|
|
||||||
renderCell(record: any, col: any) {
|
renderCell(record: any, col: any) {
|
||||||
const renderer = this.props.itemRenderers && this.props.itemRenderers[col];
|
const renderer = this.props.itemRenderers && this.props.itemRenderers[col];
|
||||||
const val = record[col];
|
const val = record[col];
|
||||||
@ -366,7 +380,9 @@ export default class CRUDCollection extends React.PureComponent<
|
|||||||
}
|
}
|
||||||
tds = tds.concat(
|
tds = tds.concat(
|
||||||
tableColumns.map(col => (
|
tableColumns.map(col => (
|
||||||
<td key={col}>{this.renderCell(record, col)}</td>
|
<td {...this.getCellProps(record, col)} key={col}>
|
||||||
|
{this.renderCell(record, col)}
|
||||||
|
</td>
|
||||||
)),
|
)),
|
||||||
);
|
);
|
||||||
if (allowAddItem) {
|
if (allowAddItem) {
|
||||||
|
@ -235,6 +235,7 @@ function ColumnCollectionTable({
|
|||||||
<TextAreaControl
|
<TextAreaControl
|
||||||
language="markdown"
|
language="markdown"
|
||||||
offerEditInModal={false}
|
offerEditInModal={false}
|
||||||
|
resize="vertical"
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
@ -848,7 +849,11 @@ class DatasourceEditor extends React.PureComponent {
|
|||||||
fieldKey="description"
|
fieldKey="description"
|
||||||
label={t('Description')}
|
label={t('Description')}
|
||||||
control={
|
control={
|
||||||
<TextAreaControl language="markdown" offerEditInModal={false} />
|
<TextAreaControl
|
||||||
|
language="markdown"
|
||||||
|
offerEditInModal={false}
|
||||||
|
resize="vertical"
|
||||||
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<Field
|
<Field
|
||||||
@ -882,6 +887,7 @@ class DatasourceEditor extends React.PureComponent {
|
|||||||
language="sql"
|
language="sql"
|
||||||
controlId="fetch_values_predicate"
|
controlId="fetch_values_predicate"
|
||||||
minLines={5}
|
minLines={5}
|
||||||
|
resize="vertical"
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
@ -901,6 +907,7 @@ class DatasourceEditor extends React.PureComponent {
|
|||||||
controlId="extra"
|
controlId="extra"
|
||||||
language="json"
|
language="json"
|
||||||
offerEditInModal={false}
|
offerEditInModal={false}
|
||||||
|
resize="vertical"
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
@ -1081,6 +1088,7 @@ class DatasourceEditor extends React.PureComponent {
|
|||||||
minLines={20}
|
minLines={20}
|
||||||
maxLines={20}
|
maxLines={20}
|
||||||
readOnly={!this.state.isEditMode}
|
readOnly={!this.state.isEditMode}
|
||||||
|
resize="both"
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
@ -1233,6 +1241,7 @@ class DatasourceEditor extends React.PureComponent {
|
|||||||
controlId="warning_markdown"
|
controlId="warning_markdown"
|
||||||
language="markdown"
|
language="markdown"
|
||||||
offerEditInModal={false}
|
offerEditInModal={false}
|
||||||
|
resize="vertical"
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
@ -1247,6 +1256,11 @@ class DatasourceEditor extends React.PureComponent {
|
|||||||
verbose_name: '',
|
verbose_name: '',
|
||||||
expression: '',
|
expression: '',
|
||||||
})}
|
})}
|
||||||
|
itemCellProps={{
|
||||||
|
expression: () => ({
|
||||||
|
width: '240px',
|
||||||
|
}),
|
||||||
|
}}
|
||||||
itemRenderers={{
|
itemRenderers={{
|
||||||
metric_name: (v, onChange, _, record) => (
|
metric_name: (v, onChange, _, record) => (
|
||||||
<FlexRowContainer>
|
<FlexRowContainer>
|
||||||
@ -1276,6 +1290,8 @@ class DatasourceEditor extends React.PureComponent {
|
|||||||
language="sql"
|
language="sql"
|
||||||
offerEditInModal={false}
|
offerEditInModal={false}
|
||||||
minLines={5}
|
minLines={5}
|
||||||
|
textAreaStyles={{ minWidth: '200px', maxWidth: '450px' }}
|
||||||
|
resize="both"
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
description: (v, onChange, label) => (
|
description: (v, onChange, label) => (
|
||||||
|
@ -45,6 +45,16 @@ const propTypes = {
|
|||||||
]),
|
]),
|
||||||
aboveEditorSection: PropTypes.node,
|
aboveEditorSection: PropTypes.node,
|
||||||
readOnly: PropTypes.bool,
|
readOnly: PropTypes.bool,
|
||||||
|
resize: PropTypes.oneOf([
|
||||||
|
null,
|
||||||
|
'block',
|
||||||
|
'both',
|
||||||
|
'horizontal',
|
||||||
|
'inline',
|
||||||
|
'none',
|
||||||
|
'vertical',
|
||||||
|
]),
|
||||||
|
textAreaStyles: PropTypes.object,
|
||||||
};
|
};
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
@ -55,6 +65,8 @@ const defaultProps = {
|
|||||||
maxLines: 10,
|
maxLines: 10,
|
||||||
offerEditInModal: true,
|
offerEditInModal: true,
|
||||||
readOnly: false,
|
readOnly: false,
|
||||||
|
resize: null,
|
||||||
|
textAreaStyles: {},
|
||||||
};
|
};
|
||||||
|
|
||||||
class TextAreaControl extends React.Component {
|
class TextAreaControl extends React.Component {
|
||||||
@ -72,18 +84,23 @@ class TextAreaControl extends React.Component {
|
|||||||
if (this.props.language) {
|
if (this.props.language) {
|
||||||
const style = {
|
const style = {
|
||||||
border: `1px solid ${this.props.theme.colors.grayscale.light1}`,
|
border: `1px solid ${this.props.theme.colors.grayscale.light1}`,
|
||||||
|
minHeight: `${minLines}em`,
|
||||||
|
width: 'auto',
|
||||||
|
...this.props.textAreaStyles,
|
||||||
};
|
};
|
||||||
|
if (this.props.resize) {
|
||||||
|
style.resize = this.props.resize;
|
||||||
|
}
|
||||||
if (this.props.readOnly) {
|
if (this.props.readOnly) {
|
||||||
style.backgroundColor = '#f2f2f2';
|
style.backgroundColor = '#f2f2f2';
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TextAreaEditor
|
<TextAreaEditor
|
||||||
mode={this.props.language}
|
mode={this.props.language}
|
||||||
style={style}
|
style={style}
|
||||||
minLines={minLines}
|
minLines={minLines}
|
||||||
maxLines={inModal ? 1000 : this.props.maxLines}
|
maxLines={inModal ? 1000 : this.props.maxLines}
|
||||||
width="100%"
|
|
||||||
height={`${minLines}em`}
|
|
||||||
editorProps={{ $blockScrolling: true }}
|
editorProps={{ $blockScrolling: true }}
|
||||||
defaultValue={this.props.initialValue}
|
defaultValue={this.props.initialValue}
|
||||||
readOnly={this.props.readOnly}
|
readOnly={this.props.readOnly}
|
||||||
@ -106,10 +123,10 @@ class TextAreaControl extends React.Component {
|
|||||||
|
|
||||||
renderModalBody() {
|
renderModalBody() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<>
|
||||||
<div>{this.props.aboveEditorSection}</div>
|
<div>{this.props.aboveEditorSection}</div>
|
||||||
{this.renderEditor(true)}
|
{this.renderEditor(true)}
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user