@beisen-phoenix/select/src/components/StyledSelect.ts

## 概述

import styled, { css } from 'styled-components';
import { SelectValue } from './PropsInterface';
import { Item } from './PropsInterface';
import {
  $convertStyleTokenToNumber,
  $Fs1,
  $Fs2,
  $M1,
  $M5,
  $M6,
  $M7,
  $M9,
  $Ra2,
  $Sp1,
  $Sp2,
  $Sp3,
  $Sp8,
  $S4,
  $S5,
  $alpha,
  $M2,
  $red,
  $family,
  $scrollBar,
  $Ra3
} from '@beisen-phoenix/style-token';

export function getHeightStyle(size?: string): string {
  if (size === 'large') {
    return '32px';
  }
  if (size === 'small') {
    return '26px;';
  }
  if (size === 'normal') {
    return '30px';
  }
  return 'auto';
}

export function getPaddingStyle(size?: string): string {
  if (size === 'large') {
    return css`
        padding-top: 5px;
        padding-bottom: 1px;
    `;
  }
  if (size === 'small') {
    return css`
        padding-top: 2px;
        padding-bottom: 0px;
    `;
  }
  if (size === 'normal') {
    return css`
        padding-top: 4px;
        padding-bottom: 0px;
    `;
  }
  return css`
        padding-top: 4px;
        padding-bottom: 0px;
    `;
}

export interface styledCommonProps extends SelectValue {
  disabled?: boolean;
  isMultiSelect?: boolean;
  size?: any;
  isSearch?: boolean;
  isFocus?: boolean;
  visibleTxt?: boolean;
  multiValueLength?: number;
  isShowDeleteIcon?: boolean;
  isActive?: boolean;
}

export interface PlaceHolderProps extends styledCommonProps {
  isShowPlaceHolder?: boolean;
}

export interface InputProps extends styledCommonProps {
  inputWidth?: number;
  propsValue?: string | Array<Item>;
}

export interface StyledProps extends styledCommonProps {
  inputValue?: string;
  error?: boolean;
  isSingleLine?: boolean;
}

export interface SelectIconWrapperProps {
  disabled?: boolean;
}

export interface ChosenProps {
  itemDisabled?: boolean;
  selectDisabled?: boolean;
}

export const PlaceHolder = styled.div`
  position: absolute;
  top: 50%;
  left: 8px;
  max-width: calc(100% - 32px);
  height: 20px;
  margin-top: -10px;
  overflow: hidden;
  color: ${$M5};
  ${$Fs1} line-height: 20px;
  white-space: nowrap;
  text-align: left;
  display: ${(props: PlaceHolderProps) => (props.isShowPlaceHolder ? 'block' : 'none')};
  ${(props: PlaceHolderProps) => (props.size === 'large' ? `${$Fs2}` : `${$Fs1}`)};
  text-overflow: ${(props: PlaceHolderProps) => (props.isFocus ? '' : 'ellipsis')};
`;

export const Chosen = styled.li`
  box-sizing: border-box;
  height: 20px;
  line-height: 20px;
  position: relative;
  float: left;
  max-width: 99%;
  margin: 0 ${$Sp2} ${$Sp2} 0;
  padding: 0 ${$Sp3} 0 ${$Sp3};
  overflow: hidden;
  ${$Fs1} background-color: ${$M7};
  border-radius: ${$Ra2};
  cursor: default;
  ${(props: ChosenProps) => {
    if (props.itemDisabled) {
      return css`
        padding-right: ${$Sp3};
        cursor: not-allowed;
      `;
    }
  }};
  ${(props: ChosenProps) => {
    if (props.selectDisabled) {
      return css`
        color: ${$M2};
        cursor: not-allowed;
      `;
    }
  }};
  ${(props: ChosenProps) => {
    if (props.size === 'small') {
      return css`
        margin-bottom: 3px;
      `;
    }
  }};
`;

export const IconWrapper = styled.span`
  margin-left: ${$Sp2};
  padding-top: 2px;
  float: right;
  cursor: pointer;
  ${(props: ChosenProps) => {
    if (props.selectDisabled) {
      return css`
        cursor: not-allowed;
      `;
    }
  }};
`;

export const InputWrapper = styled.li`
  position: relative;
  float: left;
  overflow: hidden;
  max-width: 100%;
  width: auto;
  ${$Fs1};
  ${(props: styledCommonProps) => {
    if (!props.multiValueLength) {
      return css`
        height: 26px;
        width: 99%;
      `;
    }
  }};
`;

export const StyledInput = styled.input`
  display: inline-block;
  font-family: ${$family};
  padding: 0;
  margin: 0;
  max-width: 100%;
  background: transparent;
  border-width: 0;
  outline: 0;
  border: none;
  min-width: 10px;
  &::-ms-clear {
    display: none;
  }
  color: ${$M1};
  height: 26px;
  
  ${(props: InputProps) => (props.size === 'large' ? `${$Fs2}` : `${$Fs1}`)};
  line-height: 26px;
  ${(props: InputProps) => {
    if (!props.isSearch) {
      return css`
        cursor: pointer;
        color: transparent;
        text-shadow: 0 0 0 ${$M1};
      `;
    }
  }};

  ${(props: InputProps) => {
    if (props.disabled) {
      return css`
        &[disabled] {
          cursor: not-allowed;
        }
      `;
    }
  }};
  ${(props: InputProps) => {
    const { propsValue } = props;

    if (props.isMultiSelect && Array.isArray(propsValue) && propsValue.length) {
      return css`
      width: 10px;
      height: 20px;
    `;
    }

    return css`
      width: 100%;
    `;
  }};
`;
export const SelectIconWrapper = styled.div`
  ${(props: SelectIconWrapperProps) => {
    if (props.disabled) {
      return css`
        cursor: not-allowed;
      `;
    }
  }};
  /* z-index: 1; */
  font-size: 12px;
  height: 12px;
  margin-left: ${$Sp2};
  position: absolute;
  right: ${$Sp3};
  top: 50%;
  transform: translateY(-50%);
`;

export const StyledUl = styled.ul`
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 ${$Sp8} 0 8px;
  ${$scrollBar};
`;

export const Wrapper = styled.div`
  font-family: ${$family};
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: ${$M9};
  background: ${$M9};
  min-height: 26px;
  min-width: 100px;
  margin-bottom: ${$Sp2};
  overflow: hidden;
  box-sizing: border-box;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: ${$Ra2};
    border: 1px solid ${$M6};
    box-sizing: border-box;
    content: '';
    ${(props: StyledProps) => {
      if (!props.isMultiSelect) {
        return css`
          z-index: 1;
        `;
      }
    }};
    ${(props: StyledProps) => {
      if (props.error) {
        return css`
          border-color: ${$red};
        `;
      }
    }};
    ${(props: StyledProps) => {
      if ((props.isFocus || props.isActive) && !props.error) {
        return css`
          border-color: ${$S4};
        `;
      }
    }};

  }
  ${(props: styledCommonProps) => {
    const {multiValueLength,size } = props;
    if (multiValueLength) {
      return getPaddingStyle(size)
    }
  }};
  ${(props: StyledProps) => {
    if (props.multiValueLength && !props.isSingleLine) {
      return css`
        min-height: ${getHeightStyle(props.size)};
        height: auto;
      `;
    }
    return css`
      height: ${getHeightStyle(props.size)};
    `;
  }};
  ${(props: StyledProps) => {
    if (props.disabled) {
      return css`
        color: ${$M5};
        background-color: ${$alpha($M6, '0.3')};
        cursor: not-allowed;
      `;
    }
  }};

  &:hover {
    &::before {
      cursor: pointer;
      ${(props: StyledProps) => {
        if (!props.disabled && !props.error) {
          return css`
            border-color: ${$S5};
          `;
        }
      }};
      ${(props: StyledProps) => {
        if (props.disabled) {
          return css`
            cursor: not-allowed;
          `;
        }
      }};
    }
    
    .SwitchArrow {
      cursor: pointer;
      ${(props: StyledProps) => {
        if (props.disabled) {
          return css`
            cursor: not-allowed;
          `;
        }
        if (props.isShowDeleteIcon) {
          return css`
            display: none;
          `;
        }
      }};
    }
    .DeleteInputTxt {
      ${(props: StyledProps) => {
        if (props.isShowDeleteIcon) {
          return css`
            display: block;
          `;
        }
      }};
    }
  }
  &:active::before,
  &:focus::before {
    ${(props: StyledProps) => {
      if (!props.disabled && !props.error) {
        return css`
          border-color: ${$S4};
        `;
      }
    }};
  }
`;

export const StyledSpan = styled.span`
  display: flex;
  align-items: center;
  font-family: ${$family};
  box-sizing: border-box;
  color: ${$M1};
  width: 100%;
  background-color: #fff;
  pointer-events: none;
  padding-right: ${$Sp8};
  padding-left: ${$Sp3};
  left: 0;
  position: absolute;
  height: 100%;
  opacity: ${(props: styledCommonProps) => (props.visibleTxt ? 1 : 0)};
  ${(props: styledCommonProps) => (props.size === 'large' ? `${$Fs2}` : `${$Fs1}`)};

  cursor: ${(props: styledCommonProps) => (props.isSearch ? 'text' : 'pointer')};
  ${(props: styledCommonProps) => {
    if (props.disabled) {
      return css`
        color: ${$M2};
        background-color: transparent;
      `;
    }

    if (props.isFocus && props.isSearch) {
      return `color:${$M5}`;
    }
  }};
`;

export const StyledWrapper = styled.div`
  position: relative;
  zoom: 1;
  cursor: text;
`;

export const StyledHiddenSpan = styled.span`
  display: inline-block;
  opacity: 0;
  z-index: -1;
  position: absolute;
  font-size: 12px;
`;

export const StyledDeleteIcon = styled.div`
  z-index: 1;
  display: none;
  font-size: 12px;
  height: 12px;
  margin-left: ${$Sp2};
  position: absolute;
  right: ${$Sp3};
  top: 47%;
  transform: translateY(-50%);
  &:hover {
    cursor: pointer;
  }
`;

export const StyledTagSpan = styled.span`
  max-width: 120px;
  display: inline-block;
  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  color: ${$M2};
`;

export const TipsSapn = styled.span`
  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
`;