@glideapps/glide-data-grid - npm Package Compare versions

Comparing version 2.2.10 to 2.2.11

dist/js/common/styles.js

@@ -16,2 +16,5 @@ "use strict";
   overlayName: "LightTheme",
+  // Derived from CoreTheme found in glide/app/src/sharedUI/styles.ts
+  b300: "rgba(79,118,255,0.5)",
+  b400: "#4F5DFF",
   darkGrey: "#313139",
@@ -18,0 +21,0 @@ fgColorDarkest: "#000000",

dist/js/common/utils.js

@@ -11,3 +11,3 @@ "use strict";
 exports.useDebouncedMemo = useDebouncedMemo;
-exports.EditPencil = exports.disabledProps = void 0;
+exports.Checkmark = exports.EditPencil = exports.disabledProps = void 0;
 
@@ -98,20 +98,25 @@ var React = _interopRequireWildcard(require("react"));
 var EditPencil = function EditPencil(props) {
-  var _props$bgColor, _props$fgColor;
+  var _props$fgColor;
 
-  var bg = (_props$bgColor = props.bgColor) !== null && _props$bgColor !== void 0 ? _props$bgColor : "currentColor";
-  var fg = (_props$fgColor = props.fgColor) !== null && _props$fgColor !== void 0 ? _props$fgColor : "#ffffff";
+  var fg = (_props$fgColor = props.fgColor) !== null && _props$fgColor !== void 0 ? _props$fgColor : "currentColor";
   return /*#__PURE__*/React.createElement("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
+    viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "8",
-    cy: "8",
-    r: "8",
-    fill: bg
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12.7073 7.05029C7.87391 11.8837 10.4544 9.30322 6.03024 13.7273C5.77392 13.9836 5.58981 14.3071 5.50189 14.6587L4.52521 18.5655C4.38789 19.1148 4.88543 19.6123 5.43472 19.475L9.34146 18.4983C9.69313 18.4104 10.0143 18.2286 10.2706 17.9722L16.9499 11.2929",
+    stroke: fg,
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    vectorEffect: "non-scaling-stroke"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M4.25 10.1874V11.7499H5.8125L10.4208 7.14161L8.85833 5.57911L4.25 10.1874ZM11.6292 5.93328C11.7917 5.77078 11.7917 5.50828 11.6292 5.34578L10.6542 4.37078C10.4917 4.20828 10.2292 4.20828 10.0667 4.37078L9.30417 5.13328L10.8667 6.69578L11.6292 5.93328V5.93328Z",
-    fill: fg
+    d: "M20.4854 4.92901L19.0712 3.5148C18.2901 2.73375 17.0238 2.73375 16.2428 3.5148L14.475 5.28257C15.5326 7.71912 16.4736 8.6278 18.7176 9.52521L20.4854 7.75744C21.2665 6.97639 21.2665 5.71006 20.4854 4.92901Z",
+    stroke: fg,
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    vectorEffect: "non-scaling-stroke"
   }));
@@ -122,2 +127,22 @@ };
 
+var Checkmark = function Checkmark(props) {
+  var _props$fgColor2;
+
+  var fg = (_props$fgColor2 = props.fgColor) !== null && _props$fgColor2 !== void 0 ? _props$fgColor2 : "currentColor";
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19 6L10.3802 17L5.34071 11.8758",
+    vectorEffect: "non-scaling-stroke",
+    stroke: fg,
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+exports.Checkmark = Checkmark;
+
 function useDebouncedMemo(factory, deps, time) {
@@ -124,0 +149,0 @@ var _React$useState = React.useState(factory()),

dist/js/data-editor/data-editor.js

@@ -345,3 +345,3 @@ "use strict";
       });
-    } else if (c.kind === _dataGridTypes.GridCellKind.Boolean) {
+    } else if (c.kind === _dataGridTypes.GridCellKind.Boolean && c.allowEdit) {
       mangledOnCellEdited === null || mangledOnCellEdited === void 0 ? void 0 : mangledOnCellEdited([col - rowMarkerOffset, row], _objectSpread(_objectSpread({}, c), {}, {
@@ -348,0 +348,0 @@ data: !c.data

dist/js/data-grid-overlay-editor/data-grid-overlay-editor.js

@@ -189,2 +189,3 @@ "use strict";
       editor = /*#__PURE__*/React.createElement(_markdownOverlayEditor.default, {
+        onFinishEditing: onFinishEditing,
         targetRect: target,
@@ -191,0 +192,0 @@ readonly: targetValue.readonly === true,

dist/js/data-grid-overlay-editor/private/markdown-overlay-editor-style.js

@@ -11,3 +11,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n    min-width: ", "px;\n    display: flex;\n    position: relative;\n    color: ", ";\n\n    .edit-icon {\n        position: absolute;\n        top: 0px;\n        right: -3px;\n        width: 24px;\n        height: 24px;\n        color: ", ";\n\n        cursor: pointer;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        > * {\n            width: 24px;\n            height: 24px;\n        }\n    }\n\n    textarea {\n        position: absolute;\n        top: 0px;\n        left: 0px;\n        width: 0px;\n        height: 0px;\n\n        opacity: 0;\n    }\n"]);
+  var data = _taggedTemplateLiteral(["\n    min-width: ", "px;\n    width: 100%;\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    position: relative;\n    color: ", ";\n\n    .edit-icon {\n        position: relative;\n        cursor: pointer;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        color: ", ";\n\n        padding: 0;\n\n        height: 24px;\n        width: 24px;\n        flex-shrink: 0;\n\n        transition: all \"0.125s ease\";\n\n        border-radius: 6px;\n\n        > * {\n            width: 16px;\n            height: 16px;\n        }\n    }\n\n    .edit-hover {\n        :hover {\n            background-color: ", ";\n        }\n    }\n\n    .checkmark-hover {\n        :hover {\n            color: #ffffff;\n            background-color: ", ";\n        }\n    }\n\n    .md-edit-textarea {\n        position: relative;\n        top: 0px;\n        left: 0px;\n        width: 0px;\n        height: 0px;\n        margin-top: 25px;\n        opacity: 0;\n        padding: 0;\n    }\n\n    .ml-6 {\n        margin-left: 6px;\n    }\n"]);
 
@@ -23,2 +23,9 @@ _templateObject = function _templateObject() {
 
+/* buttonVNext 
+        variant: accent
+        style:   minimal
+        size:    xsm
+        iconOnly
+        toggle to primary
+    */
 var MarkdownOverlayEditorStyle = _styles.styled.div(_templateObject(), function (p) {
@@ -29,5 +36,9 @@ return p.targetRect.width;
 }, function (p) {
-  return p.theme.acceptColor;
+  return p.theme.b400;
+}, function (p) {
+  return p.theme.b300;
+}, function (p) {
+  return p.theme.b400;
 });
 
 exports.MarkdownOverlayEditorStyle = MarkdownOverlayEditorStyle;

dist/js/data-grid-overlay-editor/private/markdown-overlay-editor.js

@@ -45,3 +45,4 @@ "use strict";
       targetRect = p.targetRect,
-      readonly = p.readonly;
+      readonly = p.readonly,
+      onFinishEditing = p.onFinishEditing;
 
@@ -54,7 +55,12 @@ var _React$useState = React.useState(markdown === "" || forceEditMode),
   var onEditClick = React.useCallback(function () {
-    setEditMode(true);
+    setEditMode(function (e) {
+      return !e;
+    });
   }, []);
+  var addLeftPad = markdown ? "ml-6" : "";
 
   if (editMode) {
-    return /*#__PURE__*/React.createElement(_growingEntry.default, {
+    return /*#__PURE__*/React.createElement(_markdownOverlayEditorStyle.MarkdownOverlayEditorStyle, {
+      targetRect: targetRect
+    }, /*#__PURE__*/React.createElement(_growingEntry.default, {
       autoFocus: true,
@@ -64,3 +70,9 @@ onKeyDown: onKeyDown,
       onChange: onChange
-    });
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "edit-icon checkmark-hover ".concat(addLeftPad),
+      onClick: function onClick() {
+        onEditClick();
+        onFinishEditing(undefined, [0, 1]);
+      }
+    }, /*#__PURE__*/React.createElement(_utils.Checkmark, null)));
   }
@@ -74,5 +86,6 @@
   }), !readonly && /*#__PURE__*/React.createElement("div", {
-    className: "edit-icon",
+    className: "edit-icon edit-hover ".concat(addLeftPad),
     onClick: onEditClick
   }, /*#__PURE__*/React.createElement(_utils.EditPencil, null)), /*#__PURE__*/React.createElement("textarea", {
+    className: "md-edit-textarea",
     autoFocus: true,
@@ -79,0 +92,0 @@ onKeyDown: onKeyDown

dist/js/data-grid/data-grid-lib.js

@@ -270,5 +270,6 @@ "use strict";
 
-function drawBoolean(ctx, theme, data, x, y, width, height, highlighted) {
+function drawBoolean(ctx, theme, data, x, y, width, height, highlighted, canEdit) {
   var centerX = x + width / 2;
   var centerY = y + height / 2;
+  ctx.globalAlpha = canEdit ? 1 : 0.5;
 
@@ -296,2 +297,4 @@ if (data) {
   }
+
+  ctx.globalAlpha = 1;
 }
@@ -298,0 +301,0 @@

dist/js/data-grid/data-grid.js

@@ -252,3 +252,3 @@ "use strict";
         if (cell.data || cell.showUnchecked) {
-          (0, _dataGridLib.drawBoolean)(ctx, theme, cell.data, x, y, w, h, highlighted);
+          (0, _dataGridLib.drawBoolean)(ctx, theme, cell.data, x, y, w, h, highlighted, cell.allowEdit);
         }
@@ -255,0 +255,0 @@ } else if (cell.kind === _dataGridTypes.GridCellKind.Bubble) {

dist/js/growing-entry/growing-entry-style.js

@@ -13,3 +13,3 @@ "use strict";
 function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n    position: relative;\n    margin-top: 5px;\n\n    min-width: 100%;\n"]);
+  var data = _taggedTemplateLiteral(["\n    position: relative;\n    margin-top: 6px;\n"]);
 
@@ -16,0 +16,0 @@ _templateObject4 = function _templateObject4() {

dist/js/growing-entry/growing-entry.js

@@ -28,3 +28,3 @@ "use strict";
 
-var GrowingEntryImpl = function GrowingEntryImpl(props) {
+var GrowingEntry = function GrowingEntry(props) {
   var placeholder = props.placeholder,
@@ -58,4 +58,3 @@ value = props.value,
 
-var GrowingEntry = /*#__PURE__*/React.memo(GrowingEntryImpl);
 var _default = GrowingEntry;
 exports.default = _default;

dist/js/markdown-div/private/markdown-container.js

@@ -13,3 +13,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n    word-break: break-word;\n    -webkit-touch-callout: default;\n\n    padding-right: 26px;\n\n    & *:last-child {\n        margin-bottom: 0;\n    }\n\n    & p img {\n        width: 100%;\n    }\n"]);
+  var data = _taggedTemplateLiteral(["\n    word-break: break-word;\n    -webkit-touch-callout: default;\n    padding-top: 6px;\n\n    > * {\n        margin: 0;\n    }\n\n    & *:last-child {\n        margin-bottom: 0;\n    }\n\n    & p img {\n        width: 100%;\n    }\n"]);
 
@@ -16,0 +16,0 @@ _templateObject = function _templateObject() {

dist/ts/common/styles.d.ts

 import { ThemedStyledInterface } from "styled-components";
 declare const builderThemeBase: {
     overlayName: string;
+    b300: string;
+    b400: string;
     darkGrey: string;
@@ -50,2 +52,4 @@ fgColorDarkest: string;
     overlayName: string;
+    b300: string;
+    b400: string;
     darkGrey: string;
@@ -52,0 +56,0 @@ fgColorDarkest: string;

dist/ts/common/utils.d.ts

@@ -11,2 +11,3 @@ import * as React from "react";
 export declare const EditPencil: React.FunctionComponent<IconProps>;
+export declare const Checkmark: React.FunctionComponent<IconProps>;
 export declare function useDebouncedMemo<T>(factory: () => T, deps: React.DependencyList | undefined, time: number): T;

dist/ts/data-grid-overlay-editor/data-grid-overlay-editor-style.d.ts

@@ -7,2 +7,4 @@ import { Rectangle } from "../data-grid/data-grid-types";
     overlayName: string;
+    b300: string;
+    b400: string;
     darkGrey: string;
@@ -9,0 +11,0 @@ fgColorDarkest: string;

dist/ts/data-grid-overlay-editor/private/bubbles-overlay-editor-style.d.ts

 export declare const BubblesOverlayEditorStyle: import("styled-components").StyledComponent<"div", {
     overlayName: string;
+    b300: string;
+    b400: string;
     darkGrey: string;
@@ -4,0 +6,0 @@ fgColorDarkest: string;

dist/ts/data-grid-overlay-editor/private/image-overlay-editor-style.d.ts

 export declare const ImageOverlayEditorStyle: import("styled-components").StyledComponent<"div", {
     overlayName: string;
+    b300: string;
+    b400: string;
     darkGrey: string;
@@ -4,0 +6,0 @@ fgColorDarkest: string;

dist/ts/data-grid-overlay-editor/private/markdown-overlay-editor-style.d.ts

@@ -7,2 +7,4 @@ import { Rectangle } from "data-grid/data-grid-types";
     overlayName: string;
+    b300: string;
+    b400: string;
     darkGrey: string;
@@ -9,0 +11,0 @@ fgColorDarkest: string;

dist/ts/data-grid-overlay-editor/private/markdown-overlay-editor.d.ts

 import * as React from "react";
-import { Rectangle } from "data-grid/data-grid-types";
+import { GridCell, Rectangle } from "data-grid/data-grid-types";
 interface Props {
@@ -9,2 +9,3 @@ readonly targetRect: Rectangle;
     readonly forceEditMode: boolean;
+    readonly onFinishEditing: (newCell: GridCell | undefined, movement: readonly [-1 | 0 | 1, -1 | 0 | 1]) => void;
     readonly readonly: boolean;
@@ -11,0 +12,0 @@ createNode?: (content: string) => DocumentFragment;

dist/ts/data-grid-overlay-editor/private/number-overlay-editor-style.d.ts

 export declare const NumberOverlayEditorStyle: import("styled-components").StyledComponent<"div", {
     overlayName: string;
+    b300: string;
+    b400: string;
     darkGrey: string;
@@ -4,0 +6,0 @@ fgColorDarkest: string;

dist/ts/data-grid-overlay-editor/private/uri-overlay-editor-style.d.ts

 export declare const UriOverlayEditorStyle: import("styled-components").StyledComponent<"div", {
     overlayName: string;
+    b300: string;
+    b400: string;
     darkGrey: string;
@@ -4,0 +6,0 @@ fgColorDarkest: string;

dist/ts/data-grid-search/data-grid-search-style.d.ts

 export declare const SearchWrapper: import("styled-components").StyledComponent<"div", {
     overlayName: string;
+    b300: string;
+    b400: string;
     darkGrey: string;
@@ -4,0 +6,0 @@ fgColorDarkest: string;

dist/ts/data-grid/data-grid-lib.d.ts

@@ -17,3 +17,3 @@ import { Theme } from "../common/styles";
 export declare function drawProtectedCell(ctx: CanvasRenderingContext2D, theme: Theme, x: number, y: number, width: number, height: number, drawBackground: boolean): void;
-export declare function drawBoolean(ctx: CanvasRenderingContext2D, theme: Theme, data: boolean, x: number, y: number, width: number, height: number, highlighted: boolean): void;
+export declare function drawBoolean(ctx: CanvasRenderingContext2D, theme: Theme, data: boolean, x: number, y: number, width: number, height: number, highlighted: boolean, canEdit: boolean): void;
 export declare function drawBubbles(ctx: CanvasRenderingContext2D, theme: Theme, data: string[], x: number, y: number, width: number, height: number, highlighted: boolean): void;
@@ -20,0 +20,0 @@ export declare function drawDrilldownCell(ctx: CanvasRenderingContext2D, theme: Theme, data: readonly DrilldownCellData[], col: number, row: number, x: number, y: number, width: number, height: number, imageLoader: ImageWindowLoader): void;

dist/ts/growing-entry/growing-entry-style.d.ts

 export declare const InputBox: import("styled-components").StyledComponent<"textarea", {
     overlayName: string;
+    b300: string;
+    b400: string;
     darkGrey: string;
@@ -48,2 +50,4 @@ fgColorDarkest: string;
     overlayName: string;
+    b300: string;
+    b400: string;
     darkGrey: string;
@@ -94,2 +98,4 @@ fgColorDarkest: string;
     overlayName: string;
+    b300: string;
+    b400: string;
     darkGrey: string;
@@ -96,0 +102,0 @@ fgColorDarkest: string;

dist/ts/growing-entry/growing-entry.d.ts

@@ -5,3 +5,3 @@ import * as React from "react";
 }
-declare const GrowingEntry: React.NamedExoticComponent<Props>;
+declare const GrowingEntry: React.FunctionComponent<Props>;
 export default GrowingEntry;

dist/ts/scroll-region/scroll-region-style.d.ts

 export declare const ScrollRegionStyle: import("styled-components").StyledComponent<"div", {
     overlayName: string;
+    b300: string;
+    b400: string;
     darkGrey: string;
@@ -4,0 +6,0 @@ fgColorDarkest: string;

package.json

 {
     "name": "@glideapps/glide-data-grid",
-    "version": "2.2.10",
+    "version": "2.2.11",
     "description": "Super fast, pure canvas Data Grid Editor",
@@ -5,0 +5,0 @@ "main": "dist/js/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

351912

increased by0.89%

Lines of code

6180

increased by1.31%

No dependency changes