@glideappsfinal/glide-data-grid-cells 6.0.9

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

@@ -0,0 +1,456 @@
+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";
+/* 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,
+    portalElementRef
+  } = 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, state) => ({
+      ...base,
+      border: 0,
+      boxShadow: "none",
+      backgroundColor: theme.bgCell,
+      // Allow interaction (e.g. wheel scrolling) even when the select is disabled
+      pointerEvents: state.isDisabled ? "auto" : base.pointerEvents,
+      cursor: state.isDisabled ? "default" : base.cursor
+    }),
+    valueContainer: base => ({
+      ...base,
+      // Keep default wrapping so multiple chips can move to new lines
+      flexWrap: base.flexWrap ?? "wrap",
+      overflowX: "auto",
+      overflowY: "hidden"
+    }),
+    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 ?? theme.bubbleHeight / 2}px`,
+        flexShrink: 0,
+        whiteSpace: "nowrap"
+      };
+    },
+    multiValueLabel: (styles, {
+      data,
+      isDisabled
+    }) => {
+      return {
+        ...styles,
+        paddingRight: isDisabled ? theme.bubblePadding : 0,
+        paddingLeft: theme.bubblePadding,
+        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: theme.bubbleHeight,
+        whiteSpace: "nowrap"
+      };
+    },
+    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 ?? theme.bubbleHeight / 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: portalElementRef?.current ?? 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 / (theme.bubbleHeight + theme.bubblePadding)));
+    let {
+      x
+    } = drawArea;
+    let row = 1;
+    let y = rows === 1 ? drawArea.y + (drawArea.height - theme.bubbleHeight) / 2 : drawArea.y + (drawArea.height - rows * theme.bubbleHeight - (rows - 1) * theme.bubblePadding) / 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 + theme.bubblePadding * 2;
+      const textY = theme.bubbleHeight / 2;
+      if (x !== drawArea.x && x + width > drawArea.x + drawArea.width && row < rows) {
+        row++;
+        y += theme.bubbleHeight + theme.bubblePadding;
+        x = drawArea.x;
+      }
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      roundedRect(ctx, x, y, width, theme.bubbleHeight, theme.roundingRadius ?? theme.bubbleHeight / 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 + theme.bubblePadding, y + textY + getMiddleCenterBias(ctx, theme));
+      x += width + theme.bubbleMargin;
+      if (x > drawArea.x + drawArea.width + theme.cellHorizontalPadding && row >= rows) {
+        break;
+      }
+    }
+    return true;
+  },
+  measure: (ctx, cell, theme) => {
+    const {
+      values,
+      options
+    } = cell.data;
+    if (!values) {
+      return theme.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);
+    const bubblesWidth = labels.reduce((acc, data) => ctx.measureText(data).width + acc + theme.bubblePadding * 2 + theme.bubbleMargin, 0);
+    if (labels.length === 0) {
+      return theme.cellHorizontalPadding * 2;
+    }
+    return bubblesWidth + 2 * theme.cellHorizontalPadding - theme.bubbleMargin;
+  },
+  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,101 @@
+import { measureTextCached, getMiddleCenterBias, GridCellKind, getEmHeight, } from "@glideapps/glide-data-grid";
+import * as React from "react";
+import { roundedRect } from "../draw-fns.js";
+function adaptFontSize(font, percentage) {
+    const regex = /(\d+\.?\d*)\s*(px|rem|em|%|pt)/;
+    const match = font.match(regex);
+    if (match) {
+        const value = parseFloat(match[1]);
+        const unit = match[2];
+        const scaledValue = value * percentage;
+        return font.replace(regex, `${Number(scaledValue.toPrecision(3))}${unit}`);
+    }
+    return font;
+}
+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, color } = cell.data;
+        const x = rect.x + theme.cellHorizontalPadding;
+        const yMid = rect.y + rect.height / 2;
+        const rangeSize = max - min;
+        const fillRatio = (value - min) / rangeSize;
+        // Only use 90% of the base font size for the label
+        const labelFont = `${adaptFontSize(theme.baseFontStyle, 0.9)} ${theme.fontFamily}`;
+        const emHeight = getEmHeight(ctx, labelFont);
+        const rangeHeight = emHeight / 2;
+        ctx.save();
+        let labelWidth = 0;
+        if (label !== undefined) {
+            ctx.font = labelFont; // fixme this is slow
+            labelWidth = measureTextCached(measureLabel ?? label, ctx, labelFont).width + theme.cellHorizontalPadding;
+        }
+        const rangeWidth = rect.width - theme.cellHorizontalPadding * 2 - labelWidth;
+        if (rangeWidth >= rangeHeight) {
+            const gradient = ctx.createLinearGradient(x, yMid, x + rangeWidth, yMid);
+            const fillColor = color ?? theme.accentColor;
+            gradient.addColorStop(0, fillColor);
+            gradient.addColorStop(fillRatio, fillColor);
+            gradient.addColorStop(fillRatio, theme.bgBubble);
+            gradient.addColorStop(1, theme.bgBubble);
+            ctx.beginPath();
+            ctx.fillStyle = gradient;
+            roundedRect(ctx, x, yMid - rangeHeight / 2, rangeWidth, rangeHeight, rangeHeight / 2);
+            ctx.fill();
+            ctx.beginPath();
+            roundedRect(ctx, x + 0.5, yMid - rangeHeight / 2 + 0.5, rangeWidth - 1, rangeHeight - 1, (rangeHeight - 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, labelFont));
+        }
+        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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"}