How to use reduce-css-calc - 4 common examples

To help you get started, we’ve selected a few reduce-css-calc examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github recharts / recharts / src / component / Text.tsx View on Github external
if (!isNumOrStr(textProps.x) || !isNumOrStr(textProps.y)) { return null; }
    const x = (textProps.x as number) + (isNumber(dx as number) ? (dx as number) : 0);
    const y = (textProps.y as number) + (isNumber(dy as number) ? (dy as number) : 0);

    let startDy: number;
    switch (verticalAnchor) {
      case 'start':
        startDy = reduceCSSCalc(`calc(${capHeight})`);
        break;
      case 'middle':
        startDy = reduceCSSCalc(
          `calc(${(wordsByLines.length - 1) / 2} * -${lineHeight} + (${capHeight} / 2))`
        );
        break;
      default:
        startDy = reduceCSSCalc(`calc(${wordsByLines.length - 1} * -${lineHeight})`);
        break;
    }

    const transforms = [];
    if (scaleToFit) {
      const lineWidth = wordsByLines[0].width;
      const width = this.props.width;
      transforms.push(`scale(${(isNumber(width as number) ? (width as number) / lineWidth : 1) / lineWidth})`);
    }
    if (angle) {
      transforms.push(`rotate(${angle}, ${x}, ${y})`);
    }
    if (transforms.length) {
      textProps.transform = transforms.join(' ');
    }
github techniq / react-svg-text / src / Text.js View on Github external
verticalAnchor,
      scaleToFit,
      angle,
      lineHeight,
      capHeight,
      ...textProps
    } = this.props;
    const { wordsByLines } = this.state;

    const x = textProps.x + dx;
    const y = textProps.y + dy;

    let startDy;
    switch (verticalAnchor) {
      case 'start':
        startDy = reduceCSSCalc(`calc(${capHeight})`);
        break;
      case 'middle':
        startDy = reduceCSSCalc(
          `calc(${(wordsByLines.length - 1) / 2} * -${lineHeight} + (${capHeight} / 2))`
        );
        break;
      default:
        startDy = reduceCSSCalc(`calc(${wordsByLines.length - 1} * -${lineHeight})`);
        break;
    }

    const transforms = [];
    if (scaleToFit && wordsByLines.length) {
      const lineWidth = wordsByLines[0].width;
      const sx = this.props.width / lineWidth;
      const sy = sx;
github hshoff / vx / packages / vx-text / src / Text.js View on Github external
scaleToFit,
      angle,
      lineHeight,
      capHeight,
      innerRef,
      ...textProps
    } = this.props;
    const { wordsByLines } = this.state;

    const x = textProps.x;
    const y = textProps.y;

    let startDy;
    switch (verticalAnchor) {
      case 'start':
        startDy = reduceCSSCalc(`calc(${capHeight})`);
        break;
      case 'middle':
        startDy = reduceCSSCalc(
          `calc(${(wordsByLines.length - 1) / 2} * -${lineHeight} + (${capHeight} / 2))`
        );
        break;
      default:
        startDy = reduceCSSCalc(`calc(${wordsByLines.length - 1} * -${lineHeight})`);
        break;
    }

    const transforms = [];
    if (scaleToFit && wordsByLines.length) {
      const lineWidth = wordsByLines[0].width;
      const sx = this.props.width / lineWidth;
      const sy = sx;
github robinweser / bredon / packages / bredon-plugin-calc / src / index.js View on Github external
FunctionExpression({ node, replaceNode }) {
      if (node.callee === 'calc') {
        replaceNode(parse(reduceCalc(generate(node), precision)))
      }
    },
  })

reduce-css-calc

Reduce CSS calc() function to the maximum

MIT
Latest version published 3 years ago

Package Health Score

77 / 100
Full package analysis

Popular reduce-css-calc functions