Skip to content
Snippets Groups Projects
Unverified Commit b0db3bfb authored by Mahatthana (Kelvin) Nomsawadi's avatar Mahatthana (Kelvin) Nomsawadi Committed by GitHub
Browse files

Migrate ParameterFieldWidget to TippyPopover (#21545)

parent 64ecfafc
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/metabase/parameters/components/ParameterValueWidget.jsx
+ 5
− 0
View file @ b0db3bfb
...@@ -165,6 +165,7 @@ export default class ParameterValueWidget extends Component { ...@@ -165,6 +165,7 @@ export default class ParameterValueWidget extends Component {
isEnabled={isDashParamWithoutMapping} isEnabled={isDashParamWithoutMapping}
> >
<div <div
ref={this.trigger}
className={cx(S.parameter, S.noPopover, className, { className={cx(S.parameter, S.noPopover, className, {
[S.selected]: hasValue, [S.selected]: hasValue,
[S.isEditing]: isEditing, [S.isEditing]: isEditing,
...@@ -173,6 +174,7 @@ export default class ParameterValueWidget extends Component { ...@@ -173,6 +174,7 @@ export default class ParameterValueWidget extends Component {
{showTypeIcon && <ParameterTypeIcon parameter={parameter} />} {showTypeIcon && <ParameterTypeIcon parameter={parameter} />}
<Widget <Widget
{...this.props} {...this.props}
target={this.getTargetRef()}
onFocusChanged={this.onFocusChanged} onFocusChanged={this.onFocusChanged}
onPopoverClose={this.onPopoverClose} onPopoverClose={this.onPopoverClose}
disabled={isDashParamWithoutMapping} disabled={isDashParamWithoutMapping}
...@@ -228,6 +230,7 @@ export default class ParameterValueWidget extends Component { ...@@ -228,6 +230,7 @@ export default class ParameterValueWidget extends Component {
> >
<Widget <Widget
{...this.props} {...this.props}
target={this.getTargetRef()}
onFocusChanged={this.onFocusChanged} onFocusChanged={this.onFocusChanged}
onPopoverClose={this.onPopoverClose} onPopoverClose={this.onPopoverClose}
disabled={isDashParamWithoutMapping} disabled={isDashParamWithoutMapping}
...@@ -270,6 +273,7 @@ function Widget({ ...@@ -270,6 +273,7 @@ function Widget({
parameters, parameters,
dashboard, dashboard,
disabled, disabled,
target,
}) { }) {
const DateWidget = DATE_WIDGETS[parameter.type]; const DateWidget = DATE_WIDGETS[parameter.type];
const fields = getFields(metadata, parameter); const fields = getFields(metadata, parameter);
...@@ -291,6 +295,7 @@ function Widget({ ...@@ -291,6 +295,7 @@ function Widget({
} else if (fields.length > 0 && parameter.hasOnlyFieldTargets) { } else if (fields.length > 0 && parameter.hasOnlyFieldTargets) {
return ( return (
<ParameterFieldWidget <ParameterFieldWidget
target={target}
parameter={parameter} parameter={parameter}
parameters={parameters} parameters={parameters}
dashboard={dashboard} dashboard={dashboard}
......
frontend/src/metabase/parameters/components/widgets/ParameterFieldWidget/ParameterFieldWidget.jsx
+ 71
− 61
View file @ b0db3bfb
...@@ -7,7 +7,7 @@ import _ from "underscore"; ...@@ -7,7 +7,7 @@ import _ from "underscore";
import FieldValuesWidget from "metabase/components/FieldValuesWidget"; import FieldValuesWidget from "metabase/components/FieldValuesWidget";
import ParameterFieldWidgetValue from "./ParameterFieldWidgetValue/ParameterFieldWidgetValue"; import ParameterFieldWidgetValue from "./ParameterFieldWidgetValue/ParameterFieldWidgetValue";
import Popover from "metabase/components/Popover"; import TippyPopover from "metabase/components/Popover/TippyPopover";
import Button from "metabase/core/components/Button"; import Button from "metabase/core/components/Button";
import { normalizeValue } from "./normalizeValue"; import { normalizeValue } from "./normalizeValue";
...@@ -30,6 +30,7 @@ const propTypes = { ...@@ -30,6 +30,7 @@ const propTypes = {
placeholder: PropTypes.string.isRequired, placeholder: PropTypes.string.isRequired,
setValue: PropTypes.func.isRequired, setValue: PropTypes.func.isRequired,
value: PropTypes.string, value: PropTypes.string,
target: PropTypes.instanceOf(Element).isRequired,
}; };
const BORDER_WIDTH = 1; const BORDER_WIDTH = 1;
...@@ -118,69 +119,78 @@ export default class ParameterFieldWidget extends Component { ...@@ -118,69 +119,78 @@ export default class ParameterFieldWidget extends Component {
); );
} else { } else {
return ( return (
<Popover hasArrow={false} onClose={() => focusChanged(false)}> <TippyPopover
<div reference={this.props.target}
className={cx("relative PopoverBody--marginBottom", { placement="bottom-start"
p2: !isEqualsOp, visible
})} onClose={() => focusChanged(false)}
> content={
{verboseName && !isEqualsOp && ( <div
<div className="text-bold mb1">{verboseName}...</div> className={cx("relative PopoverBody--marginBottom", {
)} p2: !isEqualsOp,
})}
{_.times(numFields, index => { >
const value = multi ? unsavedValue : [unsavedValue[index]]; {verboseName && !isEqualsOp && (
const onValueChange = multi <div className="text-bold mb1">{verboseName}...</div>
? newValues => this.setState({ value: newValues }) )}
: ([value]) => {
const newValues = [...unsavedValue]; {_.times(numFields, index => {
newValues[index] = value; const value = multi ? unsavedValue : [unsavedValue[index]];
this.setState({ value: newValues }); const onValueChange = multi
}; ? newValues => this.setState({ value: newValues })
return ( : ([value]) => {
<FieldValuesWidget const newValues = [...unsavedValue];
key={index} newValues[index] = value;
className={cx("input", numFields - 1 !== index && "mb1")} this.setState({ value: newValues });
value={value} };
parameter={parameter} return (
parameters={parameters} <FieldValuesWidget
dashboard={dashboard} key={index}
onChange={onValueChange} className={cx("input", numFields - 1 !== index && "mb1")}
placeholder={placeholder} value={value}
fields={fields} parameter={parameter}
autoFocus={index === 0} parameters={parameters}
multi={multi} dashboard={dashboard}
disableSearch={disableSearch} onChange={onValueChange}
formatOptions={ placeholder={placeholder}
operator && getFilterArgumentFormatOptions(operator, index) fields={fields}
autoFocus={index === 0}
multi={multi}
disableSearch={disableSearch}
formatOptions={
operator &&
getFilterArgumentFormatOptions(operator, index)
}
color="brand"
style={{
borderWidth: BORDER_WIDTH,
minWidth: widgetWidth
? widgetWidth + BORDER_WIDTH * 2
: null,
}}
minWidth={300}
maxWidth={400}
/>
);
})}
<div className={footerClassName}>
<Button
primary
className="ml-auto"
disabled={
savedValue.length === 0 && unsavedValue.length === 0
} }
color="brand" onClick={() => {
style={{ setValue(unsavedValue.length > 0 ? unsavedValue : null);
borderWidth: BORDER_WIDTH, focusChanged(false);
minWidth: widgetWidth
? widgetWidth + BORDER_WIDTH * 2
: null,
}} }}
minWidth={300} >
maxWidth={400} {savedValue.length > 0 ? t`Update filter` : t`Add filter`}
/> </Button>
); </div>
})}
<div className={footerClassName}>
<Button
primary
className="ml-auto"
disabled={savedValue.length === 0 && unsavedValue.length === 0}
onClick={() => {
setValue(unsavedValue.length > 0 ? unsavedValue : null);
focusChanged(false);
}}
>
{savedValue.length > 0 ? t`Update filter` : t`Add filter`}
</Button>
</div> </div>
</div> }
</Popover> />
); );
} }
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment