@difizen/libro-sql-cell 0.2.35-next.0 → 0.2.36

package/es/index.less

@@ -16,15 +16,13 @@
   border-right: 1px solid var(--mana-libro-cell-border-color);
 }
 
-.libro-sql-input-warning-text,
-.libro-sql-variable-name-input {
-  display: block !important;
-}
-
 .libro-sql-variable-name-input {
   width: 120px !important;
   height: 32px;
-  border: 1px solid #d6d8da !important;
+  margin-left: 6px;
+  color: var(--mana-libro-cell-header-content);
+  border: 1px solid var(--mana-libro-cell-border-color) !important;
+  background: var(--mana-libro-popover-background-color);
   border-radius: 6px !important;
   box-shadow: unset !important;
   &.@{ant-prefix}-input-status-warning {
@@ -53,8 +51,14 @@
   letter-spacing: 0;
 }
 
+.libro-sql-variable-content {
+  padding-left: 18px;
+}
+
 .libro-sql-variable-name {
+  display: flex;
   margin-left: 8px;
+  align-items: center;
 
   svg {
     margin-left: 4px;
@@ -99,8 +103,8 @@
 }
 
 .libro-sql-input-warning-text {
-  width: 112px;
-  height: 20px;
+  display: flex;
+  align-items: center;
   margin-top: 4px;
   color: #faad14;
   font-weight: 400;

package/es/libro-formatter-sql-magic-contribution.d.ts

@@ -6,7 +6,7 @@ export interface SqlDecodedFormatter extends DefaultDecodedFormatter {
 export declare class FormatterSqlMagicContribution implements FormatterContribution<SqlDecodedFormatter> {
     formatter: string;
     formatterOptions?: object;
-    canHandle: (libroFormatter: string) => 1 | 100;
+    canHandle: (libroFormatter: string) => 100 | 1;
     encode: (source: SqlDecodedFormatter) => {
         source: string;
         metadata: {

package/es/libro-sql-cell-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"libro-sql-cell-view.d.ts","sourceRoot":"","sources":["../src/libro-sql-cell-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,KAAK,EACV,eAAe,EAGf,SAAS,EACT,aAAa,EACd,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,WAAW,EACX,YAAY,EAEZ,+BAA+B,EAC/B,gBAAgB,EAIhB,eAAe,EAChB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EACL,QAAQ,EAQR,WAAW,EAGZ,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAgHvD,eAAO,MAAM,YAAY,sEAgExB,CAAC;AAEF,qBAEa,gBAAiB,SAAQ,+BAA+B;IAC1D,IAAI,uEAAgB;IACrB,KAAK,EAAE,iBAAiB,CAAC;IACjC,gBAAgB,EAAE,gBAAgB,CAAC;IAEnC,OAAO,EAAE,OAAO,EAAE,CAAC;IAGnB,cAAc,CAAC,EAAE,cAAc,CAAC;IAGvB,YAAY,EAAE,YAAY,CAA0B;IAG7D,gBAAgB,SAAK;IAGZ,kBAAkB,SAAK;IAEb,SAAS,EAAE,SAAS,CAAC;IAExC,SAAS,CAAC,uBAAuB,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAwB;IAEzE,IAAI,WAAW,kBAEd;IAEQ,YAAY,uDAMnB;IAGO,gBAAgB;IAIzB,oBAAoB;IAuBpB,SAAS,CAAC,kBAAkB,4BAAmC;IAC/D,IAAI,eAAe,6BAElB;gBAGqB,OAAO,EAAE,eAAe,EACvB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACnB,gBAAgB,EAAE,gBAAgB,EACjC,iBAAiB,EAAE,iBAAiB;IAsCxD,WAAW,sBAElB;IAEF,aAAa,CAAC,GAAG,EAAE,GAAG;IAKb,YAAY,SAAU,QAAQ,KAAG,IAAI,CAK5C;IAEO,MAAM,IAAI,SAAS;IASnB,KAAK,WAAY,OAAO,UAU/B;IAEO,cAAc,aAGrB;IAEa,GAAG;IAqElB,KAAK,YACM,cAAc,kBAAkB,CAAC,SAAS,CAAC,oBAClC,cAAc,aAAa,KAAK,GAAG,6CAUrD;IAEF,mBAAmB,aACP,cAAc,aAAa,eACxB,MAAM,KAAK,IAAI,UA6B5B;IAEF,iBAAiB,gDAef;CACH"}
+{"version":3,"file":"libro-sql-cell-view.d.ts","sourceRoot":"","sources":["../src/libro-sql-cell-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,KAAK,EAAa,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,KAAK,EACV,eAAe,EAGf,SAAS,EACT,aAAa,EACd,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,WAAW,EACX,YAAY,EAEZ,+BAA+B,EAC/B,gBAAgB,EAIhB,eAAe,EAChB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EACL,QAAQ,EAQR,WAAW,EAGZ,MAAM,mBAAmB,CAAC;AAI3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAsHvD,eAAO,MAAM,YAAY,sEAsDxB,CAAC;AAEF,qBAEa,gBAAiB,SAAQ,+BAA+B;IAC1D,IAAI,uEAAgB;IACrB,KAAK,EAAE,iBAAiB,CAAC;IACjC,gBAAgB,EAAE,gBAAgB,CAAC;IAEnC,OAAO,EAAE,OAAO,EAAE,CAAC;IAGnB,cAAc,CAAC,EAAE,cAAc,CAAC;IAGvB,YAAY,EAAE,YAAY,CAA0B;IAG7D,gBAAgB,SAAK;IAGZ,kBAAkB,SAAK;IAEb,SAAS,EAAE,SAAS,CAAC;IAExC,SAAS,CAAC,uBAAuB,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAwB;IAEzE,IAAI,WAAW,kBAEd;IAEQ,YAAY,uDAMnB;IAGO,gBAAgB;IAIzB,oBAAoB;IAuBpB,SAAS,CAAC,kBAAkB,4BAAmC;IAC/D,IAAI,eAAe,6BAElB;gBAGqB,OAAO,EAAE,eAAe,EACvB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,WAAW,EACnB,gBAAgB,EAAE,gBAAgB,EACjC,iBAAiB,EAAE,iBAAiB;IAsCxD,WAAW,sBAElB;IAEF,aAAa,CAAC,GAAG,EAAE,GAAG;IAKb,YAAY,SAAU,QAAQ,KAAG,IAAI,CAK5C;IAEO,MAAM,IAAI,SAAS;IASnB,KAAK,WAAY,OAAO,UAU/B;IAEO,cAAc,aAGrB;IAEa,GAAG;IAqElB,KAAK,YACM,cAAc,kBAAkB,CAAC,SAAS,CAAC,oBAClC,cAAc,aAAa,KAAK,GAAG,6CAUrD;IAEF,mBAAmB,aACP,cAAc,aAAa,eACxB,MAAM,KAAK,IAAI,UA6B5B;IAEF,iBAAiB,gDAef;CACH"}

package/es/libro-sql-cell-view.js

@@ -35,7 +35,7 @@ import { isOutput } from '@difizen/libro-common';
 import { CellService, EditorStatus, LibroContextKey, LibroEditableExecutableCellView, LibroViewTracker, VirtualizedManagerHelper, KernelError, LibroJupyterModel, LibroOutputArea } from '@difizen/libro-jupyter';
 import { Deferred, getOrigin, inject, prop, transient, useInject, view, ViewInstance, ViewManager, ViewOption, ViewRender } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
-import { Input, Popover } from 'antd';
+import { Input } from 'antd';
 import React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import "./index.less";
@@ -86,6 +86,8 @@ var CellEditor = function CellEditor() {
 var LibroSqlVariableNameInput = function LibroSqlVariableNameInput(_ref) {
   var handCancel = _ref.handCancel;
   var cellView = useInject(ViewInstance);
+  var contextKey = useInject(LibroContextKey);
+  var inputRef = useRef(null);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     resultVariableAvailable = _useState2[0],
@@ -104,6 +106,13 @@ var LibroSqlVariableNameInput = function LibroSqlVariableNameInput(_ref) {
     }
     setVariableName(e.target.value);
   }, [cellView.parent.model.cells]);
+  useEffect(function () {
+    if (inputRef.current !== null) {
+      inputRef.current.focus({
+        cursor: 'end'
+      });
+    }
+  });
   var handValueSave = useCallback(function () {
     cellView.model.resultVariable = getDfVariableName(cellView.parent.model.cells.filter(function (cell) {
       return cell.model.type === 'sql';
@@ -119,34 +128,28 @@ var LibroSqlVariableNameInput = function LibroSqlVariableNameInput(_ref) {
       status: "".concat(resultVariableAvailable ? '' : 'warning'),
       className: "libro-sql-variable-name-input",
       onChange: handleValueChange,
+      onBlur: handValueSave,
+      onFocus: function onFocus() {
+        contextKey.disableCommandMode();
+      },
+      ref: inputRef,
       defaultValue: cellView.model.resultVariable
     }), !resultVariableAvailable && /*#__PURE__*/_jsx("span", {
       className: "libro-sql-input-warning-text",
       children: l10n.t('当前变量名已存在')
-    }), /*#__PURE__*/_jsxs("div", {
-      className: "libro-sql-input-button",
-      children: [/*#__PURE__*/_jsx("span", {
-        onClick: handCancel,
-        className: "libro-sql-input-cancel",
-        children: l10n.t('取消')
-      }), /*#__PURE__*/_jsx("span", {
-        onClick: handValueSave,
-        className: "libro-sql-input-save",
-        children: l10n.t('保存')
-      })]
     })]
   });
 };
 export var LibroSqlCell = /*#__PURE__*/React.forwardRef(function SqlEditorViewComponent(props, ref) {
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isVariableNameEdit = _useState6[0],
-    setIsVariableNameEdit = _useState6[1];
   var instance = useInject(ViewInstance);
   var contextKey = useInject(LibroContextKey);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    edit = _useState6[0],
+    setEdit = _useState6[1];
   var handCancelEdit = function handCancelEdit() {
     contextKey.enableCommandMode();
-    setIsVariableNameEdit(false);
+    setEdit(false);
   };
   return /*#__PURE__*/_jsxs("div", {
     tabIndex: 10,
@@ -161,45 +164,26 @@ export var LibroSqlCell = /*#__PURE__*/React.forwardRef(function SqlEditorViewCo
           children: /*#__PURE__*/_jsx(DatabaseOutlined, {})
         }), /*#__PURE__*/_jsx("span", {
           className: "libro-sql-source-content",
-          children: instance.databaseConfig ? instance.databaseConfig.db_type + ': ' + instance.databaseConfig.database : '暂未配置数据库'
+          children: instance.databaseConfig ? instance.databaseConfig.db_type + ': ' + instance.databaseConfig.database : l10n.t('暂未配置数据库')
         })]
       }), /*#__PURE__*/_jsxs("div", {
         className: "libro-sql-variable-name",
         children: [/*#__PURE__*/_jsx("span", {
           className: "libro-sql-variable-name-title",
           children: "Name: "
-        }), /*#__PURE__*/_jsx("span", {
+        }), edit ? /*#__PURE__*/_jsx(LibroSqlVariableNameInput, {
+          handCancel: handCancelEdit
+        }) : /*#__PURE__*/_jsx("span", {
           className: "libro-sql-variable-content",
-          children: instance.model.resultVariable
-        }), /*#__PURE__*/_jsx("div", {
-          className: "libro-sql-variable-name-popover",
-          style: {
-            display: 'inline-block'
+          onDoubleClick: function onDoubleClick() {
+            setEdit(true);
           },
-          children: /*#__PURE__*/_jsx(Popover, {
-            content: /*#__PURE__*/_jsx(LibroSqlVariableNameInput, {
-              handCancel: handCancelEdit
-            }),
-            placement: "bottomLeft",
-            open: instance.parent.model.inputEditable ? isVariableNameEdit : false,
-            onOpenChange: function onOpenChange(visible) {
-              if (visible) {
-                contextKey.disableCommandMode();
-              } else {
-                contextKey.enableCommandMode();
-              }
-              setIsVariableNameEdit(visible);
-            },
-            getPopupContainer: function getPopupContainer() {
-              var _instance$container;
-              return (_instance$container = instance.container) === null || _instance$container === void 0 || (_instance$container = _instance$container.current) === null || _instance$container === void 0 ? void 0 : _instance$container.getElementsByClassName('libro-sql-variable-name')[0];
-            },
-            trigger: "click",
-            overlayClassName: "libro-sql-popover-container",
-            children: /*#__PURE__*/_jsx(EditFilled, {
-              className: "libro-sql-edit-icon"
-            })
-          })
+          children: instance.model.resultVariable
+        }), !edit && /*#__PURE__*/_jsx(EditFilled, {
+          className: "libro-sql-edit-icon",
+          onClick: function onClick() {
+            setEdit(true);
+          }
         })]
       })]
     }), /*#__PURE__*/_jsx(CellEditor, {})]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@difizen/libro-sql-cell",
-  "version": "0.2.35-next.0",
+  "version": "0.2.36",
   "description": "",
   "keywords": [
     "libro",
@@ -32,10 +32,10 @@
     "src"
   ],
   "dependencies": {
-    "@difizen/libro-code-editor": "^0.2.35-next.0",
-    "@difizen/libro-jupyter": "^0.2.35-next.0",
-    "@difizen/libro-rendermime": "^0.2.35-next.0",
-    "@difizen/libro-common": "^0.2.35-next.0",
+    "@difizen/libro-code-editor": "^0.2.35",
+    "@difizen/libro-jupyter": "^0.2.36",
+    "@difizen/libro-rendermime": "^0.2.35",
+    "@difizen/libro-common": "^0.2.35",
     "@ant-design/icons": "^5.1.0",
     "@difizen/mana-app": "latest",
     "@difizen/mana-l10n": "latest"

package/src/index.less

@@ -16,15 +16,13 @@
   border-right: 1px solid var(--mana-libro-cell-border-color);
 }
 
-.libro-sql-input-warning-text,
-.libro-sql-variable-name-input {
-  display: block !important;
-}
-
 .libro-sql-variable-name-input {
   width: 120px !important;
   height: 32px;
-  border: 1px solid #d6d8da !important;
+  margin-left: 6px;
+  color: var(--mana-libro-cell-header-content);
+  border: 1px solid var(--mana-libro-cell-border-color) !important;
+  background: var(--mana-libro-popover-background-color);
   border-radius: 6px !important;
   box-shadow: unset !important;
   &.@{ant-prefix}-input-status-warning {
@@ -53,8 +51,14 @@
   letter-spacing: 0;
 }
 
+.libro-sql-variable-content {
+  padding-left: 18px;
+}
+
 .libro-sql-variable-name {
+  display: flex;
   margin-left: 8px;
+  align-items: center;
 
   svg {
     margin-left: 4px;
@@ -99,8 +103,8 @@
 }
 
 .libro-sql-input-warning-text {
-  width: 112px;
-  height: 20px;
+  display: flex;
+  align-items: center;
   margin-top: 4px;
   color: #faad14;
   font-weight: 400;

package/src/libro-sql-cell-view.tsx

@@ -35,7 +35,8 @@ import {
   ViewRender,
 } from '@difizen/mana-app';
 import { l10n } from '@difizen/mana-l10n';
-import { Input, Popover } from 'antd';
+import type { InputRef } from 'antd';
+import { Input } from 'antd';
 import React from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
@@ -94,6 +95,8 @@ const LibroSqlVariableNameInput: React.FC<LibroSqlVariableProps> = ({
   handCancel,
 }: LibroSqlVariableProps) => {
   const cellView = useInject<LibroSqlCellView>(ViewInstance);
+  const contextKey = useInject<LibroContextKey>(LibroContextKey);
+  const inputRef = useRef<InputRef>(null);
   const [resultVariableAvailable, setVariableNameAvailable] = useState(true);
   const [resultVariable, setVariableName] = useState(cellView.model.resultVariable);
   const handleValueChange = useCallback(
@@ -114,6 +117,14 @@ const LibroSqlVariableNameInput: React.FC<LibroSqlVariableProps> = ({
     [cellView.parent.model.cells],
   );
 
+  useEffect(() => {
+    if (inputRef.current !== null) {
+      inputRef.current.focus({
+        cursor: 'end',
+      });
+    }
+  });
+
   const handValueSave = useCallback(() => {
     cellView.model.resultVariable = getDfVariableName(
       cellView.parent.model.cells.filter(
@@ -133,6 +144,11 @@ const LibroSqlVariableNameInput: React.FC<LibroSqlVariableProps> = ({
         status={`${resultVariableAvailable ? '' : 'warning'}`}
         className="libro-sql-variable-name-input"
         onChange={handleValueChange}
+        onBlur={handValueSave}
+        onFocus={() => {
+          contextKey.disableCommandMode();
+        }}
+        ref={inputRef}
         defaultValue={cellView.model.resultVariable}
       />
 
@@ -141,28 +157,19 @@ const LibroSqlVariableNameInput: React.FC<LibroSqlVariableProps> = ({
           {l10n.t('当前变量名已存在')}
         </span>
       )}
-
-      <div className="libro-sql-input-button">
-        <span onClick={handCancel} className="libro-sql-input-cancel">
-          {l10n.t('取消')}
-        </span>
-        <span onClick={handValueSave} className="libro-sql-input-save">
-          {l10n.t('保存')}
-        </span>
-      </div>
     </>
   );
 };
 
 export const LibroSqlCell = React.forwardRef<HTMLDivElement>(
   function SqlEditorViewComponent(props, ref) {
-    const [isVariableNameEdit, setIsVariableNameEdit] = useState(false);
     const instance = useInject<LibroSqlCellView>(ViewInstance);
     const contextKey = useInject(LibroContextKey);
+    const [edit, setEdit] = useState(false);
 
     const handCancelEdit = () => {
       contextKey.enableCommandMode();
-      setIsVariableNameEdit(false);
+      setEdit(false);
     };
 
     return (
@@ -177,41 +184,31 @@ export const LibroSqlCell = React.forwardRef<HTMLDivElement>(
                 ? instance.databaseConfig.db_type +
                   ': ' +
                   instance.databaseConfig.database
-                : '暂未配置数据库'}
+                : l10n.t('暂未配置数据库')}
             </span>
           </div>
           <div className="libro-sql-variable-name">
             <span className="libro-sql-variable-name-title">Name: </span>
-            <span className="libro-sql-variable-content">
-              {instance.model.resultVariable}
-            </span>
-            <div
-              className="libro-sql-variable-name-popover"
-              style={{ display: 'inline-block' }}
-            >
-              <Popover
-                content={<LibroSqlVariableNameInput handCancel={handCancelEdit} />}
-                placement="bottomLeft"
-                open={instance.parent.model.inputEditable ? isVariableNameEdit : false}
-                onOpenChange={(visible) => {
-                  if (visible) {
-                    contextKey.disableCommandMode();
-                  } else {
-                    contextKey.enableCommandMode();
-                  }
-                  setIsVariableNameEdit(visible);
-                }}
-                getPopupContainer={() => {
-                  return instance.container?.current?.getElementsByClassName(
-                    'libro-sql-variable-name',
-                  )[0] as HTMLElement;
+            {edit ? (
+              <LibroSqlVariableNameInput handCancel={handCancelEdit} />
+            ) : (
+              <span
+                className="libro-sql-variable-content"
+                onDoubleClick={() => {
+                  setEdit(true);
                 }}
-                trigger="click"
-                overlayClassName="libro-sql-popover-container"
               >
-                <EditFilled className="libro-sql-edit-icon" />
-              </Popover>
-            </div>
+                {instance.model.resultVariable}
+              </span>
+            )}
+            {!edit && (
+              <EditFilled
+                className="libro-sql-edit-icon"
+                onClick={() => {
+                  setEdit(true);
+                }}
+              />
+            )}
           </div>
         </div>
         <CellEditor />