TypeScript elaborate.mediaquery函數代碼示例

export const Gutters = (
  gutters: string | number | GuttersProps,
  gutterType: string = 'margin',
  gutterPosition: string[] = ['right', 'left'],
  negative: boolean = false,
): string[] => {
  // Output our margin gutters.
  if (typeof gutters === 'object') {
    const strings: string[] = [];

    for (const key in gutters) {
      if (typeof gutters[key] === 'number' || typeof gutters[key] === 'string') {
        strings.push(
          mediaquery(key)`${cssBuilder(
            gutters[key],
            negative,
            gutterType,
            gutterPosition,
          )}`,
        );
      }
    }

    return strings;
  }

  return [cssBuilder(gutters, negative, gutterType, gutterPosition)];
};

const ResponsiveCellCss = (props: ResponsiveCellCssProps): string[] => {
  let css: string[] = [];
  const types = ['auto', 'full', 'grow', 'shrink'];
  const hasGutterType = props.gutterType !== undefined;

  css.push(CellBase(props.cellType || 'full'));
  css = css.concat(
    CellStatic(
      props.cellType || props.gridColumns,
      hasGutterType,
      props.gutterSizes,
      props.gutterType || 'padding',
      'small',
      props.vertical,
    ),
  );

  for (const breakpoint in Breakpoints) {
    if (typeof props[breakpoint] === 'string' && types.includes(props[breakpoint])) {
      css = css.concat(mediaquery(breakpoint)`
        ${CellBase(props[breakpoint])}
        ${CellStatic(
          props[breakpoint],
          hasGutterType,
          props.gutterSizes,
          props.gutterType || 'padding',
          'small',
          props.vertical,
        )}
      `);
    }
  }

  return css;
};

const BreakpointGutterCss = (props: GutterCssProps): string[] => {
  let breakpoints: string[] = [];
  let lastBreakpoint;

  for (const breakpoint in Breakpoints) {
    if (
      props[breakpoint] !== undefined &&
      typeof props[breakpoint] === 'number' &&
      props[breakpoint] !== 0
    ) {
      if (props.gutterSizes[breakpoint] !== undefined) {
        lastBreakpoint = breakpoint;
      }

      breakpoints = breakpoints.concat(
        mediaquery(breakpoint)`${CellStatic(
          props[breakpoint],
          props.gutterType !== undefined,
          props.gutterSizes,
          props.gutterType || 'padding',
          lastBreakpoint,
          props.vertical,
        )}`,
      );
    }
  }

  if (breakpoints.length !== 0) {
    breakpoints.push('flex-basis: auto;');
  }

  return breakpoints;
};

export const CellOffset = (
  size: number | string,
  breakpoint: string,
  gutterType: string = 'margin',
  vertical: boolean = false,
  rtl: boolean = false,
  gutters: GuttersProps = DefaultGutters,
  mediaQueryOptions: MediaQueryOptionsProps = MediaQueryOptions,
): string => {
  let direction;

  if (vertical) {
    direction = 'top';
  } else if (rtl) {
    direction = 'right';
  } else {
    direction = 'left';
  }

  let lastBreakpointName = 'small';

  if (gutters[breakpoint] === undefined) {
    for (const breakpointName in mediaQueryOptions.breakpoints) {
      if (typeof breakpointName === 'string' && gutters[breakpointName] !== undefined) {
        lastBreakpointName = breakpointName;
      }
    }
  } else {
    lastBreakpointName = breakpoint;
  }

  let lastBreakpoint: number;

  if (typeof gutters[lastBreakpointName] === 'string') {
    lastBreakpoint = +stripUnit(`${gutters[lastBreakpointName]}`);
  } else {
    lastBreakpoint = +gutters[lastBreakpointName];
  }

  const gutter = rem(lastBreakpoint / 2);
  const gutterSize =
    gutterType === 'margin' ? `calc(${CellSize(size)} + ${gutter})` : CellSize(size);
  const css = `margin-${direction}: ${gutterSize};`;

  return mediaquery(breakpoint, mediaQueryOptions)`${css}`;
};

const calcHeading = (
  heading: number,
  fontSize: string,
  lineHeight: number,
  breakpoints: {},
  mediaQuery: MediaQueryOptionsProps,
): FlattenSimpleInterpolation => {
  if (Object.entries(breakpoints).length === 0) {
    throw new Error('Cant be empty @todo error message');
  }

  const size = stripUnit(em(fontSize));
  const lineHeightSpacing = (factor = 1): number => {
    return size * lineHeight * factor;
  };
  const spacingValue = lineHeightSpacing();
  const mediaqueries: string[] = [];

  for (const key in breakpoints) {
    if (Array.isArray(breakpoints[key])) {
      const calcSize = size * breakpoints[key][heading];
      let calcLineHeight = 0;
      let multiplier = 1;

      if (calcSize <= spacingValue) {
        calcLineHeight = spacingValue / calcSize;
      } else {
        while (lineHeightSpacing(multiplier) < calcSize) {
          multiplier += 0.5;
        }

        calcLineHeight = lineHeightSpacing(multiplier) / calcSize;
      }

      mediaqueries.push(mediaquery(key, mediaQuery)`
        font-size: ${em(calcSize, size)};
        line-height: ${calcLineHeight};
        font-weight: 700;
      `);
    }
  }

  return css`
    ${mediaqueries}
  `;
};

export const BreakpointCell = (
  size: number,
  breakpoint: string,
  vertical: boolean,
): string[] => {
  if (size === 0) {
    return [];
  }

  if (DefaultGutters[breakpoint] === undefined) {
    return [];
  }

  return mediaquery(breakpoint)`${CellStatic(
    size,
    false,
    DefaultGutters,
    'margin',
    breakpoint,
    vertical,
  )}`;
};