apphouse/dist/styles/getSelectCustomStyle.ts

Component library for React that uses observable state management and theme-able components.

import { BoxSizeStyles } from './defaults/themes.interface';

const getIconPadding = (variant: keyof BoxSizeStyles) => {
  switch (variant) {
    case 'xs':
      return 2;
    case 's':
      return 6;
    case 'm':
      return 6;
    case 'l':
      return 10;
    case 'xl':
      return 12;
    default:
      return 4;
  }
};

const getSeparatorPos = (variant: keyof BoxSizeStyles) => {
  switch (variant) {
    case 'xs':
      return 'calc(100% - 26px) 2px';
    case 's':
      return 'calc(100% - 32px) 4px';
    case 'm':
      return 'calc(100% - 32px) 12px';
    case 'l':
      return 'calc(100% - 38px) 16px';
    case 'xl':
      return 'calc(100% - 42px) 24px';
    default:
      return 'calc(100% - 1px) 0';
  }
};

const getArrowLeftPos = (variant: keyof BoxSizeStyles) => {
  const padding = getIconPadding(variant);
  const size = 5;

  switch (variant) {
    case 'xs':
      return `calc(100% - 12px) calc(1em + -2px)`;
    case 's':
      return `calc(100% - 16px) calc(1em + 0px)`;
    case 'm':
      return `calc(100% - 16px) calc(1em + 8px)`;
    case 'l':
      return `calc(100% - 16px) calc(1em + 8px)`;
    case 'xl':
      return `calc(100% - 20px) calc(1em + 18px)`;
    default:
      return `calc(100% - ${padding + size * 2}px) calc(1em + ${
        padding * 1.5
      }px)`;
  }
};

const getArrowRightPos = (variant: keyof BoxSizeStyles) => {
  const padding = getIconPadding(variant);
  const size = 5;
  switch (variant) {
    case 'xs':
      return `calc(100% - 7px) calc(1em + -2px)`;
    case 's':
      return `calc(100% - 11px) calc(1em + 0px)`;
    case 'm':
      return `calc(100% - 11px) calc(1em + 8px)`;
    case 'l':
      return `calc(100% - 11px) calc(1em + 8px)`;
    case 'xl':
      return `calc(100% - 15px) calc(1em + 18px)`;
    default:
      return `calc(100% - ${padding + size}px) calc(1em + ${padding * 1.5}px)`;
  }
};

export const getSelectCustomStyle = (
  color: string,
  variant: keyof BoxSizeStyles
) => {
  const separatorPos = getSeparatorPos(variant);
  const separatorSize = `1px 1.5em`;

  // ARROW SIZE
  const size = 5;
  const arrowSize = `${size}px`;
  const arrowLeftSideSize = `${arrowSize} ${arrowSize}`;
  const arrowRightSideSize = `${arrowSize} ${arrowSize}`;

  // ARROW POSITION
  const arrowLeftSidePos = getArrowLeftPos(variant);
  const arrowRightSidePos = getArrowRightPos(variant);

  return {
    paddingRight: 0,
    height: 'auto',
    border: `1px solid`,
    boxSizing: 'border-box',
    width: '200px',
    appearance: 'none',
    backgroundImage: `linear-gradient(45deg, transparent 50%, ${color} 50%), linear-gradient(135deg, ${color} 50%, transparent 50%), linear-gradient(to right, ${color}, ${color})`,
    backgroundPosition: `${arrowLeftSidePos}, ${arrowRightSidePos}, ${separatorPos}`,
    backgroundSize: `${arrowLeftSideSize}, ${arrowRightSideSize}, ${separatorSize}`,
    backgroundRepeat: `no-repeat`
  };
};