Commit 9b483e76 by Andrej Ocenas Committed by GitHub

UX: Fix empty space in select (#19713)

parent f7ad5803
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withKnobs, object } from '@storybook/addon-knobs';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { UseState } from '../../utils/storybook/UseState';
import { SelectableValue } from '@grafana/data';
import { Select } from './Select';
const SelectStories = storiesOf('UI/Select/Select', module);
SelectStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
SelectStories.add('default', () => {
const intialState: SelectableValue<string> = { label: 'A label', value: 'A value' };
const value = object<SelectableValue<string>>('Selected Value:', intialState);
const options = object<Array<SelectableValue<string>>>('Options:', [
intialState,
{ label: 'Another label', value: 'Another value' },
]);
return (
<UseState initialState={value}>
{(value, updateValue) => {
return (
<Select
value={value}
options={options}
onChange={value => {
action('onChanged fired')(value);
updateValue(value);
}}
/>
);
}}
</UseState>
);
});
...@@ -7,6 +7,7 @@ import { components } from '@torkelo/react-select'; ...@@ -7,6 +7,7 @@ import { components } from '@torkelo/react-select';
import { FadeTransition, Spinner } from '..'; import { FadeTransition, Spinner } from '..';
import { useDelayedSwitch } from '../../utils/useDelayedSwitch'; import { useDelayedSwitch } from '../../utils/useDelayedSwitch';
import { stylesFactory } from '../../themes'; import { stylesFactory } from '../../themes';
import { SlideOutTransition } from '../transitions/SlideOutTransition';
const getStyles = stylesFactory(() => { const getStyles = stylesFactory(() => {
const container = css` const container = css`
...@@ -16,6 +17,7 @@ const getStyles = stylesFactory(() => { ...@@ -16,6 +17,7 @@ const getStyles = stylesFactory(() => {
margin-right: 10px; margin-right: 10px;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
overflow: hidden;
`; `;
const item = css` const item = css`
...@@ -44,18 +46,32 @@ export const SingleValue = (props: Props) => { ...@@ -44,18 +46,32 @@ export const SingleValue = (props: Props) => {
return ( return (
<components.SingleValue {...props}> <components.SingleValue {...props}>
<div className={cx('gf-form-select-box__img-value')}> <div className={cx('gf-form-select-box__img-value')}>
<div className={styles.container}> {data.imgUrl ? (
<FadeTransition duration={150} visible={loading}> <FadeWithImage loading={loading} imgUrl={data.imgUrl} />
<Spinner className={styles.item} inline /> ) : (
</FadeTransition> <SlideOutTransition horizontal size={16} visible={loading} duration={150}>
{data.imgUrl && ( <div className={styles.container}>
<FadeTransition duration={150} visible={!loading}> <Spinner className={styles.item} inline />
<img className={styles.item} src={data.imgUrl} /> </div>
</FadeTransition> </SlideOutTransition>
)} )}
</div>
{children} {children}
</div> </div>
</components.SingleValue> </components.SingleValue>
); );
}; };
const FadeWithImage = (props: { loading: boolean; imgUrl: string }) => {
const styles = getStyles();
return (
<div className={styles.container}>
<FadeTransition duration={150} visible={props.loading}>
<Spinner className={styles.item} inline />
</FadeTransition>
<FadeTransition duration={150} visible={!props.loading}>
<img className={styles.item} src={props.imgUrl} />
</FadeTransition>
</div>
);
};
...@@ -89,6 +89,6 @@ export { ErrorBoundary, ErrorBoundaryAlert } from './ErrorBoundary/ErrorBoundary ...@@ -89,6 +89,6 @@ export { ErrorBoundary, ErrorBoundaryAlert } from './ErrorBoundary/ErrorBoundary
export { AlphaNotice } from './AlphaNotice/AlphaNotice'; export { AlphaNotice } from './AlphaNotice/AlphaNotice';
export { Spinner } from './Spinner/Spinner'; export { Spinner } from './Spinner/Spinner';
export { FadeTransition } from './transitions/FadeTransition'; export { FadeTransition } from './transitions/FadeTransition';
export { SlideOutTransition } from './transitions/SlideOutTransition';
// Segment // Segment
export { Segment, SegmentAsync, SegmentSelect } from './Segment/'; export { Segment, SegmentAsync, SegmentSelect } from './Segment/';
import React from 'react';
import { css } from 'emotion';
import { CSSTransition } from 'react-transition-group';
import { stylesFactory } from '../../themes';
const getStyles = stylesFactory((duration: number, measurement: 'width' | 'height', size: number) => {
return {
enter: css`
label: enter;
${measurement}: 0;
opacity: 0;
`,
enterActive: css`
label: enterActive;
${measurement}: ${size}px;
opacity: 1;
transition: opacity ${duration}ms ease-out, ${measurement} ${duration}ms ease-out;
`,
exit: css`
label: exit;
${measurement}: ${size}px;
opacity: 1;
`,
exitActive: css`
label: exitActive;
opacity: 0;
${measurement}: 0;
transition: opacity ${duration}ms ease-out, ${measurement} ${duration}ms ease-out;
`,
};
});
type Props = {
children: React.ReactNode;
visible: boolean;
size: number;
duration?: number;
horizontal?: boolean;
};
export function SlideOutTransition(props: Props) {
const { visible, children, duration = 250, horizontal, size } = props;
const styles = getStyles(duration, horizontal ? 'width' : 'height', size);
return (
<CSSTransition in={visible} mountOnEnter={true} unmountOnExit={true} timeout={duration} classNames={styles}>
{children}
</CSSTransition>
);
}
...@@ -318,9 +318,6 @@ Array [ ...@@ -318,9 +318,6 @@ Array [
<div <div
className="gf-form-select-box__img-value" className="gf-form-select-box__img-value"
> >
<div
className="css-zyq2zu"
/>
stackdriver auto stackdriver auto
</div> </div>
</div> </div>
......
Markdown is supported
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