mirror of https://github.com/apache/superset.git
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;
|
||||
extraButtons?: ReactNode;
|
||||
itemGenerator?: () => any;
|
||||
itemCellProps?: ((
|
||||
val: unknown,
|
||||
label: string,
|
||||
record: any,
|
||||
) => React.DetailedHTMLProps<
|
||||
React.TdHTMLAttributes<HTMLTableCellElement>,
|
||||
HTMLTableCellElement
|
||||
>)[];
|
||||
itemRenderers?: ((
|
||||
val: unknown,
|
||||
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) {
|
||||
const renderer = this.props.itemRenderers && this.props.itemRenderers[col];
|
||||
const val = record[col];
|
||||
|
@ -366,7 +380,9 @@ export default class CRUDCollection extends React.PureComponent<
|
|||
}
|
||||
tds = tds.concat(
|
||||
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) {
|
||||
|
|
|
@ -235,6 +235,7 @@ function ColumnCollectionTable({
|
|||
<TextAreaControl
|
||||
language="markdown"
|
||||
offerEditInModal={false}
|
||||
resize="vertical"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
@ -848,7 +849,11 @@ class DatasourceEditor extends React.PureComponent {
|
|||
fieldKey="description"
|
||||
label={t('Description')}
|
||||
control={
|
||||
<TextAreaControl language="markdown" offerEditInModal={false} />
|
||||
<TextAreaControl
|
||||
language="markdown"
|
||||
offerEditInModal={false}
|
||||
resize="vertical"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Field
|
||||
|
@ -882,6 +887,7 @@ class DatasourceEditor extends React.PureComponent {
|
|||
language="sql"
|
||||
controlId="fetch_values_predicate"
|
||||
minLines={5}
|
||||
resize="vertical"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
@ -901,6 +907,7 @@ class DatasourceEditor extends React.PureComponent {
|
|||
controlId="extra"
|
||||
language="json"
|
||||
offerEditInModal={false}
|
||||
resize="vertical"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
@ -1081,6 +1088,7 @@ class DatasourceEditor extends React.PureComponent {
|
|||
minLines={20}
|
||||
maxLines={20}
|
||||
readOnly={!this.state.isEditMode}
|
||||
resize="both"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
@ -1233,6 +1241,7 @@ class DatasourceEditor extends React.PureComponent {
|
|||
controlId="warning_markdown"
|
||||
language="markdown"
|
||||
offerEditInModal={false}
|
||||
resize="vertical"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
@ -1247,6 +1256,11 @@ class DatasourceEditor extends React.PureComponent {
|
|||
verbose_name: '',
|
||||
expression: '',
|
||||
})}
|
||||
itemCellProps={{
|
||||
expression: () => ({
|
||||
width: '240px',
|
||||
}),
|
||||
}}
|
||||
itemRenderers={{
|
||||
metric_name: (v, onChange, _, record) => (
|
||||
<FlexRowContainer>
|
||||
|
@ -1276,6 +1290,8 @@ class DatasourceEditor extends React.PureComponent {
|
|||
language="sql"
|
||||
offerEditInModal={false}
|
||||
minLines={5}
|
||||
textAreaStyles={{ minWidth: '200px', maxWidth: '450px' }}
|
||||
resize="both"
|
||||
/>
|
||||
),
|
||||
description: (v, onChange, label) => (
|
||||
|
|
|
@ -45,6 +45,16 @@ const propTypes = {
|
|||
]),
|
||||
aboveEditorSection: PropTypes.node,
|
||||
readOnly: PropTypes.bool,
|
||||
resize: PropTypes.oneOf([
|
||||
null,
|
||||
'block',
|
||||
'both',
|
||||
'horizontal',
|
||||
'inline',
|
||||
'none',
|
||||
'vertical',
|
||||
]),
|
||||
textAreaStyles: PropTypes.object,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
@ -55,6 +65,8 @@ const defaultProps = {
|
|||
maxLines: 10,
|
||||
offerEditInModal: true,
|
||||
readOnly: false,
|
||||
resize: null,
|
||||
textAreaStyles: {},
|
||||
};
|
||||
|
||||
class TextAreaControl extends React.Component {
|
||||
|
@ -72,18 +84,23 @@ class TextAreaControl extends React.Component {
|
|||
if (this.props.language) {
|
||||
const style = {
|
||||
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) {
|
||||
style.backgroundColor = '#f2f2f2';
|
||||
}
|
||||
|
||||
return (
|
||||
<TextAreaEditor
|
||||
mode={this.props.language}
|
||||
style={style}
|
||||
minLines={minLines}
|
||||
maxLines={inModal ? 1000 : this.props.maxLines}
|
||||
width="100%"
|
||||
height={`${minLines}em`}
|
||||
editorProps={{ $blockScrolling: true }}
|
||||
defaultValue={this.props.initialValue}
|
||||
readOnly={this.props.readOnly}
|
||||
|
@ -106,10 +123,10 @@ class TextAreaControl extends React.Component {
|
|||
|
||||
renderModalBody() {
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<div>{this.props.aboveEditorSection}</div>
|
||||
{this.renderEditor(true)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue