svelte-pdf-resize-fix/utils/classes.js

svelte-pdf provides a component for rendering PDF documents using PDF.js ! Fixed resizing makes PDF disappear bug

const noDepth = ["white", "black", "transparent"];

function getClass(prop, color, depth, defaultDepth) {
  if (noDepth.includes(color)) {
    return `${prop}-${color}`;
  }
  return `${prop}-${color}-${depth || defaultDepth} `;
}

export default function utils(color, defaultDepth = 500) {
  return {
    bg: (depth) => getClass("bg", color, depth, defaultDepth),
    border: (depth) => getClass("border", color, depth, defaultDepth),
    txt: (depth) => getClass("text", color, depth, defaultDepth),
    caret: (depth) => getClass("caret", color, depth, defaultDepth),
  };
}

export class ClassBuilder {
  constructor(classes, defaultClasses) {
    this.defaults =
      typeof classes === "function" ? classes(defaultClasses) : classes;

    this.classes = this.defaults;
  }

  flush() {
    this.classes = this.defaults;

    return this;
  }

  extend(...fns) {
    return this;
  }

  get() {
    return this.classes;
  }

  replace(classes, cond = true) {
    if (cond && classes) {
      this.classes = Object.keys(classes).reduce(
        (acc, from) => acc.replace(new RegExp(from, "g"), classes[from]),
        this.classes,
      );
    }

    return this;
  }

  remove(classes, cond = true) {
    if (cond && classes) {
      this.classes = classes
        .split(" ")
        .reduce(
          (acc, cur) => acc.replace(new RegExp(cur, "g"), ""),
          this.classes,
        );
    }

    return this;
  }

  add(className, cond = true, defaultValue) {
    if (!cond || !className) return this;

    switch (typeof className) {
      case "string":
      default:
        this.classes += ` ${className} `;
        return this;
      case "function":
        this.classes += ` ${className(defaultValue || this.classes)} `;
        return this;
    }
  }
}

const defaultReserved = ["class", "add", "remove", "replace", "value"];

export function filterProps(reserved, props) {
  const r = [...reserved, ...defaultReserved];

  return Object.keys(props).reduce(
    (acc, cur) =>
      cur.includes("$$") || cur.includes("Class") || reserved.includes(cur)
        ? acc
        : { ...acc, [cur]: props[cur] },
    {},
  );
}