import { Box, type BoxProps } from '@mui/material';

import { styled } from '../Theme';

export interface AutoHiddenProps extends BoxProps {
  height: number | string;
}

/**
 * 一个容器组件, 当子元素 width 超出该容器时自动隐藏子元素, 必须设置明确的 height 值
 */
function AutoHidden({ height, ...rest }: AutoHiddenProps) {
  return <Root height={height} {...rest} />;
}

const Root = styled(Box)`
  overflow: hidden;
  &:before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 100%;
    float: left;
  }
  > * {
    float: left;
    white-space: nowrap;
  }
`;

export default AutoHidden;
