You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by yj...@apache.org on 2020/11/23 22:15:39 UTC
[incubator-superset] branch master updated: fix: style multiselect
input (#11732)
This is an automated email from the ASF dual-hosted git repository.
yjc pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new fd7e6c7 fix: style multiselect input (#11732)
fd7e6c7 is described below
commit fd7e6c77fc086da1d07a13c6aa0ffdd7d6f60d60
Author: Elizabeth Thompson <es...@gmail.com>
AuthorDate: Mon Nov 23 14:15:11 2020 -0800
fix: style multiselect input (#11732)
* style multiselect input
* add autocomplete and move input styles to styles file
---
.../src/components/Select/SupersetStyledSelect.tsx | 12 ++++----
superset-frontend/src/components/Select/styles.tsx | 33 ++++++++++++++++++----
2 files changed, 34 insertions(+), 11 deletions(-)
diff --git a/superset-frontend/src/components/Select/SupersetStyledSelect.tsx b/superset-frontend/src/components/Select/SupersetStyledSelect.tsx
index 1fc1293..ee8ee95 100644
--- a/superset-frontend/src/components/Select/SupersetStyledSelect.tsx
+++ b/superset-frontend/src/components/Select/SupersetStyledSelect.tsx
@@ -57,6 +57,8 @@ import {
VALUE_LABELED_STYLES,
PartialThemeConfig,
PartialStylesConfig,
+ SelectComponentsType,
+ InputProps,
} from './styles';
import { findValue } from './utils';
@@ -223,11 +225,11 @@ function styled<
// Handle onPaste event
if (onPaste) {
- const Input = components.Input || defaultComponents.Input;
- components.Input = props => (
- <div onPaste={onPaste}>
- <Input {...props} />
- </div>
+ const Input =
+ (components.Input as SelectComponentsType['Input']) ||
+ (defaultComponents.Input as SelectComponentsType['Input']);
+ components.Input = (props: InputProps) => (
+ <Input {...props} onPaste={onPaste} />
);
}
// for CreaTable
diff --git a/superset-frontend/src/components/Select/styles.tsx b/superset-frontend/src/components/Select/styles.tsx
index ecf59a9..d426a62 100644
--- a/superset-frontend/src/components/Select/styles.tsx
+++ b/superset-frontend/src/components/Select/styles.tsx
@@ -30,6 +30,8 @@ import { Props as SelectProps } from 'react-select/src/Select';
import { colors as reactSelectColros } from 'react-select/src/theme';
import { supersetColors } from 'src/components/styles';
import { DeepNonNullable } from 'react-select/src/components';
+import { OptionType } from 'antd/lib/select';
+import { SupersetStyledSelectProps } from './SupersetStyledSelect';
export const DEFAULT_CLASS_NAME = 'Select';
export const DEFAULT_CLASS_NAME_PREFIX = 'Select';
@@ -128,7 +130,7 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
clearIndicator: provider => [
provider,
css`
- padding-right: 0;
+ padding: 4px 0 4px 6px;
`,
],
control: (
@@ -156,6 +158,7 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
border-color: ${borderColor};
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
+ flex-wrap: nowrap;
`,
];
},
@@ -245,24 +248,38 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
input: (provider, { selectProps }) => [
provider,
css`
- padding: ${selectProps?.isMulti && selectProps?.value?.length
- ? '0 6px'
- : '0'};
margin-left: 0;
vertical-align: middle;
+ ${selectProps?.isMulti && selectProps?.value?.length
+ ? 'padding: 0 6px; width: 100%'
+ : 'padding: 0; flex: 1 1 auto;'};
`,
],
};
-type SelectComponentsType = Omit<SelectComponentsConfig<any>, 'Input'> & {
+const inputTagStyles = {
+ background: 'none',
+ border: 'none',
+ outline: 'none',
+ padding: 0,
+ width: '100%',
+};
+
+export type SelectComponentsType = Omit<
+ SelectComponentsConfig<any>,
+ 'Input'
+> & {
Input: ComponentType<InputProps>;
};
// react-select is missing selectProps from their props type
// so overwriting it here to avoid errors
-type InputProps = ReactSelectInputProps & {
+export type InputProps = ReactSelectInputProps & {
placeholder?: ReactNode;
selectProps: SelectProps;
+ autocomplete?: string;
+ onPaste?: SupersetStyledSelectProps<OptionType>['onPaste'];
+ inputStyle?: object;
};
const {
@@ -312,6 +329,8 @@ export const DEFAULT_COMPONENTS: SelectComponentsType = {
{...props}
placeholder={isMultiWithValue ? placeholder : undefined}
css={getStyles('input', props)}
+ autocomplete="chrome-off"
+ inputStyle={inputTagStyles}
/>
);
},
@@ -325,10 +344,12 @@ export const VALUE_LABELED_STYLES: PartialStylesConfig = {
theme: {
spacing: { baseUnit },
},
+ isMulti,
},
) => ({
...provider,
paddingLeft: getValue().length > 0 ? 1 : baseUnit * 3,
+ overflow: isMulti && getValue().length > 0 ? 'visible' : 'hidden',
}),
// render single value as is they are multi-value
singleValue: (provider, props) => {