29 lines
888 B
TypeScript
29 lines
888 B
TypeScript
import React from 'react';
|
|
import Spinner from '@/components/elements/Spinner';
|
|
import Fade from '@/components/elements/Fade';
|
|
import tw from 'twin.macro';
|
|
import styled, { css } from 'styled-components/macro';
|
|
import Select from '@/components/elements/Select';
|
|
|
|
const Container = styled.div<{ visible?: boolean }>`
|
|
${tw`relative`};
|
|
|
|
${props => props.visible && css`
|
|
& ${Select} {
|
|
background-image: none;
|
|
}
|
|
`};
|
|
`;
|
|
|
|
const InputSpinner = ({ visible, children }: { visible: boolean, children: React.ReactNode }) => (
|
|
<Container visible={visible}>
|
|
<Fade appear unmountOnExit in={visible} timeout={150}>
|
|
<div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
|
|
<Spinner size={'small'}/>
|
|
</div>
|
|
</Fade>
|
|
{children}
|
|
</Container>
|
|
);
|
|
|
|
export default InputSpinner;
|