glide-data-grid-cells-fork 6.0.4-alpha8

package/dist/esm/cells/multi-select-cell.js

@@ -0,0 +1,441 @@
+import * as React from "react";
+import { measureTextCached, getMiddleCenterBias, useTheme, GridCellKind, roundedRect, getLuminance } from "@glideapps/glide-data-grid";
+import { styled } from "@linaria/react";
+import Select, { components } from "react-select";
+import CreatableSelect from "react-select/creatable";
+const BUBBLE_HEIGHT = 20;
+const BUBBLE_PADDING = 6;
+const BUBBLE_MARGIN = 4;
+/* This prefix is used when allowDuplicates is enabled to make sure that
+all underlying values are unique. */
+const VALUE_PREFIX = "__value";
+const VALUE_PREFIX_REGEX = new RegExp(`^${VALUE_PREFIX}\\d+__`);
+const Wrap = /*#__PURE__*/styled('div')({
+  name: "Wrap",
+  class: "gdg-w1i61rz",
+  propsAsIs: false
+});
+const PortalWrap = /*#__PURE__*/styled('div')({
+  name: "PortalWrap",
+  class: "gdg-phbadu4",
+  propsAsIs: false
+});
+/**
+ * Prepares the options for usage with the react-select component.
+ *
+ * @param options The options to prepare.
+ * @returns The prepared options in the format required by react-select.
+ */
+export const prepareOptions = options => {
+  return options.map(option => {
+    if (typeof option === "string" || option === null || option === undefined) {
+      return {
+        value: option,
+        label: option ?? "",
+        color: undefined
+      };
+    }
+    return {
+      value: option.value,
+      label: option.label ?? option.value ?? "",
+      color: option.color ?? undefined
+    };
+  });
+};
+/**
+ * Resolve a list values to values compatible with react-select.
+ * If allowDuplicates is true, the values will be prefixed with a numbered prefix to
+ * make sure that all values are unique.
+ *
+ * @param values The values to resolve.
+ * @param options The options to use for the resolution.
+ * @param allowDuplicates If true, the values can contain duplicates.
+ * @returns The list of values compatible with react-select.
+ */
+export const resolveValues = (values, options, allowDuplicates) => {
+  if (values === undefined || values === null) {
+    return [];
+  }
+  return values.map((value, index) => {
+    const valuePrefix = allowDuplicates ? `${VALUE_PREFIX}${index}__` : "";
+    const matchedOption = options.find(option => {
+      return option.value === value;
+    });
+    if (matchedOption) {
+      return {
+        ...matchedOption,
+        value: `${valuePrefix}${matchedOption.value}`
+      };
+    }
+    return {
+      value: `${valuePrefix}${value}`,
+      label: value
+    };
+  });
+};
+const CustomMenu = p => {
+  const {
+    Menu
+  } = components;
+  const {
+    children,
+    ...rest
+  } = p;
+  return React.createElement(Menu, {
+    ...rest
+  }, children);
+};
+const Editor = p => {
+  const {
+    value: cell,
+    initialValue,
+    onChange,
+    onFinishedEditing
+  } = p;
+  const {
+    options: optionsIn,
+    values: valuesIn,
+    allowCreation,
+    allowDuplicates
+  } = cell.data;
+  const theme = useTheme();
+  const [value, setValue] = React.useState(valuesIn);
+  const [menuOpen, setMenuOpen] = React.useState(true);
+  const [inputValue, setInputValue] = React.useState(initialValue ?? "");
+  const options = React.useMemo(() => {
+    return prepareOptions(optionsIn ?? []);
+  }, [optionsIn]);
+  const menuDisabled = allowCreation && allowDuplicates && options.length === 0;
+  // Prevent the grid from handling the keydown as long as the menu is open:
+  // This allows usage of enter without triggering the grid to finish editing.
+  const onKeyDown = React.useCallback(e => {
+    if (menuOpen) {
+      e.stopPropagation();
+    }
+  }, [menuOpen]);
+  // Apply styles to the react-select component.
+  // All components: https://react-select.com/components
+  const colorStyles = {
+    control: base => ({
+      ...base,
+      border: 0,
+      boxShadow: "none",
+      backgroundColor: theme.bgCell
+    }),
+    menu: styles => ({
+      ...styles,
+      backgroundColor: theme.bgCell
+    }),
+    option: (styles, state) => {
+      return {
+        ...styles,
+        fontSize: theme.editorFontSize,
+        fontFamily: theme.fontFamily,
+        color: theme.textDark,
+        ...(state.isFocused ? {
+          backgroundColor: theme.accentLight,
+          cursor: "pointer"
+        } : {}),
+        ":active": {
+          ...styles[":active"],
+          color: theme.accentFg,
+          backgroundColor: theme.accentColor
+        }
+      };
+    },
+    input: (styles, {
+      isDisabled
+    }) => {
+      if (isDisabled) {
+        return {
+          display: "none"
+        };
+      }
+      return {
+        ...styles,
+        fontSize: theme.editorFontSize,
+        fontFamily: theme.fontFamily,
+        color: theme.textDark
+      };
+    },
+    placeholder: styles => {
+      return {
+        ...styles,
+        fontSize: theme.editorFontSize,
+        fontFamily: theme.fontFamily,
+        color: theme.textLight
+      };
+    },
+    noOptionsMessage: styles => {
+      return {
+        ...styles,
+        fontSize: theme.editorFontSize,
+        fontFamily: theme.fontFamily,
+        color: theme.textLight
+      };
+    },
+    clearIndicator: styles => {
+      return {
+        ...styles,
+        color: theme.textLight,
+        ":hover": {
+          color: theme.textDark,
+          cursor: "pointer"
+        }
+      };
+    },
+    multiValue: (styles, {
+      data
+    }) => {
+      return {
+        ...styles,
+        backgroundColor: data.color ?? theme.bgBubble,
+        borderRadius: `${theme.roundingRadius ?? BUBBLE_HEIGHT / 2}px`
+      };
+    },
+    multiValueLabel: (styles, {
+      data,
+      isDisabled
+    }) => {
+      return {
+        ...styles,
+        paddingRight: isDisabled ? BUBBLE_PADDING : 0,
+        paddingLeft: BUBBLE_PADDING,
+        paddingTop: 0,
+        paddingBottom: 0,
+        color: data.color ?
+        // If a color is set for this option,
+        // we use it to determine the text color.
+        getLuminance(data.color) > 0.5 ? "black" : "white" : theme.textBubble,
+        fontSize: theme.editorFontSize,
+        fontFamily: theme.fontFamily,
+        justifyContent: "center",
+        alignItems: "center",
+        display: "flex",
+        height: BUBBLE_HEIGHT
+      };
+    },
+    multiValueRemove: (styles, {
+      data,
+      isDisabled,
+      isFocused
+    }) => {
+      if (isDisabled) {
+        return {
+          display: "none"
+        };
+      }
+      return {
+        ...styles,
+        color: data.color ?
+        // If a color is set for this option,
+        // we use it to determine the text color.
+        getLuminance(data.color) > 0.5 ? "black" : "white" : theme.textBubble,
+        backgroundColor: undefined,
+        borderRadius: isFocused ? `${theme.roundingRadius ?? BUBBLE_HEIGHT / 2}px` : undefined,
+        ":hover": {
+          cursor: "pointer"
+        }
+      };
+    }
+  };
+  // This is used to submit the values to the grid.
+  const submitValues = React.useCallback(values => {
+    // Change the list of values to the actual values by removing the prefix.
+    // This is only relevant in the case of allowDuplicates being true.
+    const mappedValues = values.map(v => {
+      return allowDuplicates && v.startsWith(VALUE_PREFIX) ? v.replace(new RegExp(VALUE_PREFIX_REGEX), "") : v;
+    });
+    setValue(mappedValues);
+    onChange({
+      ...cell,
+      data: {
+        ...cell.data,
+        values: mappedValues
+      }
+    });
+  }, [cell, onChange, allowDuplicates]);
+  const handleKeyDown = event => {
+    switch (event.key) {
+      case "Enter":
+      case "Tab":
+        if (!inputValue) {
+          // If the user pressed enter or tab without entering anything,
+          // we finish editing based on the current state.
+          onFinishedEditing(cell, [0, 1]);
+          return;
+        }
+        if (allowDuplicates && allowCreation) {
+          // This is a workaround to allow the user to enter new values
+          // multiple times.
+          setInputValue("");
+          submitValues([...(value ?? []), inputValue]);
+          setMenuOpen(false);
+          event.preventDefault();
+        }
+    }
+  };
+  const SelectComponent = allowCreation ? CreatableSelect : Select;
+  return React.createElement(Wrap, {
+    onKeyDown: onKeyDown,
+    "data-testid": "multi-select-cell"
+  }, React.createElement(SelectComponent, {
+    className: "gdg-multi-select",
+    isMulti: true,
+    isDisabled: cell.readonly,
+    isClearable: true,
+    isSearchable: true,
+    inputValue: inputValue,
+    onInputChange: setInputValue,
+    options: options,
+    placeholder: cell.readonly ? "" : allowCreation ? "Add..." : undefined,
+    noOptionsMessage: input => {
+      return allowCreation && allowDuplicates && input.inputValue ? `Create "${input.inputValue}"` : undefined;
+    },
+    menuIsOpen: cell.readonly ? false : menuOpen,
+    onMenuOpen: () => setMenuOpen(true),
+    onMenuClose: () => setMenuOpen(false),
+    value: resolveValues(value, options, allowDuplicates),
+    onKeyDown: cell.readonly ? undefined : handleKeyDown,
+    menuPlacement: "auto",
+    menuPortalTarget: document.getElementById("portal"),
+    autoFocus: true,
+    openMenuOnFocus: true,
+    openMenuOnClick: true,
+    closeMenuOnSelect: true,
+    backspaceRemovesValue: true,
+    escapeClearsValue: false,
+    styles: colorStyles,
+    components: {
+      DropdownIndicator: () => null,
+      IndicatorSeparator: () => null,
+      Menu: props => {
+        if (menuDisabled) {
+          return null;
+        }
+        return React.createElement(PortalWrap, null, React.createElement(CustomMenu, {
+          className: "click-outside-ignore",
+          ...props
+        }));
+      }
+    },
+    onChange: async e => {
+      if (e === null) {
+        return;
+      }
+      submitValues(e.map(x => x.value));
+    }
+  }));
+};
+const renderer = {
+  kind: GridCellKind.Custom,
+  isMatch: c => c.data.kind === "multi-select-cell",
+  draw: (args, cell) => {
+    const {
+      ctx,
+      theme,
+      rect,
+      highlighted
+    } = args;
+    const {
+      values,
+      options: optionsIn
+    } = cell.data;
+    if (values === undefined || values === null) {
+      return true;
+    }
+    const options = prepareOptions(optionsIn ?? []);
+    const drawArea = {
+      x: rect.x + theme.cellHorizontalPadding,
+      y: rect.y + theme.cellVerticalPadding,
+      width: rect.width - 2 * theme.cellHorizontalPadding,
+      height: rect.height - 2 * theme.cellVerticalPadding
+    };
+    const rows = Math.max(1, Math.floor(drawArea.height / (BUBBLE_HEIGHT + BUBBLE_PADDING)));
+    let {
+      x
+    } = drawArea;
+    let row = 1;
+    let y = rows === 1 ? drawArea.y + (drawArea.height - BUBBLE_HEIGHT) / 2 : drawArea.y + (drawArea.height - rows * BUBBLE_HEIGHT - (rows - 1) * BUBBLE_PADDING) / 2;
+    for (const value of values) {
+      const matchedOption = options.find(t => t.value === value);
+      const color = matchedOption?.color ?? (highlighted ? theme.bgBubbleSelected : theme.bgBubble);
+      const displayText = matchedOption?.label ?? value;
+      const metrics = measureTextCached(displayText, ctx);
+      const width = metrics.width + BUBBLE_PADDING * 2;
+      const textY = BUBBLE_HEIGHT / 2;
+      if (x !== drawArea.x && x + width > drawArea.x + drawArea.width && row < rows) {
+        row++;
+        y += BUBBLE_HEIGHT + BUBBLE_PADDING;
+        x = drawArea.x;
+      }
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      roundedRect(ctx, x, y, width, BUBBLE_HEIGHT, theme.roundingRadius ?? BUBBLE_HEIGHT / 2);
+      ctx.fill();
+      // If a color is set for this option, we use either black or white as the text color depending on the background.
+      // Otherwise, use the configured textBubble color.
+      ctx.fillStyle = matchedOption?.color ? getLuminance(color) > 0.5 ? "#000000" : "#ffffff" : theme.textBubble;
+      ctx.fillText(displayText, x + BUBBLE_PADDING, y + textY + getMiddleCenterBias(ctx, theme));
+      x += width + BUBBLE_MARGIN;
+      if (x > drawArea.x + drawArea.width + theme.cellHorizontalPadding && row >= rows) {
+        break;
+      }
+    }
+    return true;
+  },
+  measure: (ctx, cell, t) => {
+    const {
+      values,
+      options
+    } = cell.data;
+    if (!values) {
+      return t.cellHorizontalPadding * 2;
+    }
+    // Resolve the values to the actual display labels:
+    const labels = resolveValues(values, prepareOptions(options ?? []), cell.data.allowDuplicates).map(x => x.label ?? x.value);
+    return labels.reduce((acc, data) => ctx.measureText(data).width + acc + BUBBLE_PADDING * 2 + BUBBLE_MARGIN, 0) + 2 * t.cellHorizontalPadding - 4;
+  },
+  provideEditor: () => ({
+    editor: Editor,
+    disablePadding: true,
+    deletedValue: v => ({
+      ...v,
+      copyData: "",
+      data: {
+        ...v.data,
+        values: []
+      }
+    })
+  }),
+  onPaste: (val, cell) => {
+    if (!val || !val.trim()) {
+      // Empty values should result in empty strings
+      return {
+        ...cell,
+        values: []
+      };
+    }
+    let values = val.split(",").map(s => s.trim());
+    if (!cell.allowDuplicates) {
+      // Remove all duplicates
+      values = values.filter((v, index) => values.indexOf(v) === index);
+    }
+    if (!cell.allowCreation) {
+      // Only allow values that are part of the options:
+      const options = prepareOptions(cell.options ?? []);
+      values = values.filter(v => options.find(o => o.value === v));
+    }
+    if (values.length === 0) {
+      // We were not able to parse any values, return undefined to
+      // not change the cell value.
+      return undefined;
+    }
+    return {
+      ...cell,
+      values
+    };
+  }
+};
+export default renderer;
+

package/dist/esm/cells/multi-select-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-select-cell.js","sourceRoot":"","sources":["../../../src/cells/multi-select-cell.tsx"],"names":[],"mappings":"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"}

package/dist/esm/cells/range-cell.js

@@ -0,0 +1,88 @@
+import { measureTextCached, getMiddleCenterBias, GridCellKind, } from "@glideapps/glide-data-grid";
+import * as React from "react";
+import { roundedRect } from "../draw-fns.js";
+const RANGE_HEIGHT = 6;
+const inputStyle = {
+    marginRight: 8,
+};
+const wrapperStyle = {
+    display: "flex",
+    alignItems: "center",
+    flexGrow: 1,
+};
+const renderer = {
+    kind: GridCellKind.Custom,
+    isMatch: (c) => c.data.kind === "range-cell",
+    draw: (args, cell) => {
+        const { ctx, theme, rect } = args;
+        const { min, max, value, label, measureLabel } = cell.data;
+        const x = rect.x + theme.cellHorizontalPadding;
+        const yMid = rect.y + rect.height / 2;
+        const rangeSize = max - min;
+        const fillRatio = (value - min) / rangeSize;
+        ctx.save();
+        let labelWidth = 0;
+        if (label !== undefined) {
+            ctx.font = `12px ${theme.fontFamily}`; // fixme this is slow
+            labelWidth =
+                measureTextCached(measureLabel ?? label, ctx, `12px ${theme.fontFamily}`).width +
+                    theme.cellHorizontalPadding;
+        }
+        const rangeWidth = rect.width - theme.cellHorizontalPadding * 2 - labelWidth;
+        if (rangeWidth >= RANGE_HEIGHT) {
+            const gradient = ctx.createLinearGradient(x, yMid, x + rangeWidth, yMid);
+            gradient.addColorStop(0, theme.accentColor);
+            gradient.addColorStop(fillRatio, theme.accentColor);
+            gradient.addColorStop(fillRatio, theme.bgBubble);
+            gradient.addColorStop(1, theme.bgBubble);
+            ctx.beginPath();
+            ctx.fillStyle = gradient;
+            roundedRect(ctx, x, yMid - RANGE_HEIGHT / 2, rangeWidth, RANGE_HEIGHT, RANGE_HEIGHT / 2);
+            ctx.fill();
+            ctx.beginPath();
+            roundedRect(ctx, x + 0.5, yMid - RANGE_HEIGHT / 2 + 0.5, rangeWidth - 1, RANGE_HEIGHT - 1, (RANGE_HEIGHT - 1) / 2);
+            ctx.strokeStyle = theme.accentLight;
+            ctx.lineWidth = 1;
+            ctx.stroke();
+        }
+        if (label !== undefined) {
+            ctx.textAlign = "right";
+            ctx.fillStyle = theme.textDark;
+            ctx.fillText(label, rect.x + rect.width - theme.cellHorizontalPadding, yMid + getMiddleCenterBias(ctx, `12px ${theme.fontFamily}`));
+        }
+        ctx.restore();
+        return true;
+    },
+    provideEditor: () => {
+        // eslint-disable-next-line react/display-name
+        return p => {
+            const { data, readonly } = p.value;
+            const strValue = data.value.toString();
+            const strMin = data.min.toString();
+            const strMax = data.max.toString();
+            const strStep = data.step.toString();
+            const onChange = (e) => {
+                p.onChange({
+                    ...p.value,
+                    data: {
+                        ...data,
+                        value: Number(e.target.value),
+                    },
+                });
+            };
+            return (React.createElement("label", { style: wrapperStyle },
+                React.createElement("input", { style: inputStyle, type: "range", value: strValue, min: strMin, max: strMax, step: strStep, onChange: onChange, disabled: readonly }),
+                strValue));
+        };
+    },
+    onPaste: (v, d) => {
+        let num = Number.parseFloat(v);
+        num = Number.isNaN(num) ? d.value : Math.max(d.min, Math.min(d.max, num));
+        return {
+            ...d,
+            value: num,
+        };
+    },
+};
+export default renderer;
+//# sourceMappingURL=range-cell.js.map

package/dist/esm/cells/range-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range-cell.js","sourceRoot":"","sources":["../../../src/cells/range-cell.tsx"],"names":[],"mappings":"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"}

package/dist/esm/cells/sparkline-cell.js

@@ -0,0 +1,114 @@
+import { parseToRgba, GridCellKind } from "@glideapps/glide-data-grid";
+const renderer = {
+    kind: GridCellKind.Custom,
+    isMatch: (cell) => cell.data.kind === "sparkline-cell",
+    needsHover: true,
+    needsHoverPosition: true,
+    draw: (args, cell) => {
+        const { ctx, theme, rect, hoverAmount, hoverX } = args;
+        // eslint-disable-next-line prefer-const
+        let { values, yAxis, color, graphKind = "area", displayValues, hideAxis } = cell.data;
+        const [minY, maxY] = yAxis;
+        if (values.length === 0)
+            return true;
+        values = values.map(x => Math.min(1, Math.max(0, (x - minY) / (maxY - minY))));
+        const padX = theme.cellHorizontalPadding;
+        const drawX = padX + rect.x;
+        const y = rect.y + 3;
+        const height = rect.height - 6;
+        const width = rect.width - padX * 2;
+        const delta = maxY - minY;
+        const zeroY = maxY <= 0 ? y : minY >= 0 ? y + height : y + height * (maxY / delta);
+        // draw zero
+        if (!hideAxis && minY <= 0 && maxY >= 0) {
+            ctx.beginPath();
+            ctx.moveTo(drawX, zeroY);
+            ctx.lineTo(drawX + width, zeroY);
+            ctx.globalAlpha = 0.4;
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = theme.textLight;
+            ctx.stroke();
+            ctx.globalAlpha = 1;
+        }
+        if (graphKind === "bar") {
+            ctx.beginPath();
+            const margin = 2;
+            const spacing = (values.length - 1) * margin;
+            const barWidth = (width - spacing) / values.length;
+            let x = drawX;
+            for (const val of values) {
+                const barY = y + height - val * height;
+                ctx.moveTo(x, zeroY);
+                ctx.lineTo(x + barWidth, zeroY);
+                ctx.lineTo(x + barWidth, barY);
+                ctx.lineTo(x, barY);
+                x += barWidth + margin;
+            }
+            ctx.fillStyle = cell.data.color ?? theme.accentColor;
+            ctx.fill();
+        }
+        else {
+            if (values.length === 1) {
+                values = [values[0], values[0]];
+                if (displayValues) {
+                    displayValues = [displayValues[0], displayValues[0]];
+                }
+            }
+            // draw line
+            ctx.beginPath();
+            const xStep = (rect.width - 16) / (values.length - 1);
+            const points = values.map((val, ind) => {
+                return {
+                    x: drawX + xStep * ind,
+                    y: y + height - val * height,
+                };
+            });
+            ctx.moveTo(points[0].x, points[0].y);
+            let i = 0;
+            if (points.length > 2) {
+                for (i = 1; i < points.length - 2; i++) {
+                    const xControl = (points[i].x + points[i + 1].x) / 2;
+                    const yControl = (points[i].y + points[i + 1].y) / 2;
+                    ctx.quadraticCurveTo(points[i].x, points[i].y, xControl, yControl);
+                }
+            }
+            ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
+            ctx.strokeStyle = color ?? theme.accentColor;
+            ctx.lineWidth = 1 + hoverAmount * 0.5;
+            ctx.stroke();
+            ctx.lineTo(rect.x + rect.width - padX, zeroY);
+            ctx.lineTo(rect.x + padX, zeroY);
+            ctx.closePath();
+            if (graphKind === "area") {
+                ctx.globalAlpha = 0.2 + 0.2 * hoverAmount;
+                const grad = ctx.createLinearGradient(0, y, 0, y + height * 1.4);
+                grad.addColorStop(0, color ?? theme.accentColor);
+                const [r, g, b] = parseToRgba(color ?? theme.accentColor);
+                grad.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
+                ctx.fillStyle = grad;
+                ctx.fill();
+                ctx.globalAlpha = 1;
+            }
+            if (hoverX !== undefined && (graphKind === "line" || graphKind === "area") && displayValues !== undefined) {
+                ctx.beginPath();
+                const closest = Math.min(values.length - 1, Math.max(0, Math.round((hoverX - padX) / xStep)));
+                ctx.moveTo(drawX + closest * xStep, rect.y + 1);
+                ctx.lineTo(drawX + closest * xStep, rect.y + rect.height);
+                ctx.lineWidth = 1;
+                ctx.strokeStyle = theme.textLight;
+                ctx.stroke();
+                ctx.save();
+                ctx.font = `8px ${theme.fontFamily}`;
+                ctx.fillStyle = theme.textMedium;
+                ctx.textBaseline = "top";
+                ctx.fillText(displayValues[closest], drawX, rect.y + theme.cellVerticalPadding);
+                ctx.restore();
+            }
+        }
+        return true;
+    },
+    provideEditor: () => undefined,
+    onPaste: (_v, d) => d,
+};
+export default renderer;
+//# sourceMappingURL=sparkline-cell.js.map