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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/es/index.less +9 -7
  2. package/es/libro-formatter-sql-magic-contribution.d.ts +1 -1
  3. package/es/libro-sql-cell-view.d.ts.map +1 -1
  4. package/es/libro-sql-cell-view.js +31 -47
  5. package/package.json +5 -5
  6. package/src/index.less +9 -7
  7. package/src/libro-sql-cell-view.tsx +37 -40
package/es/index.less CHANGED
@@ -16,14 +16,10 @@
16
16
  border-right: 1px solid var(--mana-libro-cell-border-color);
17
17
  }
18
18
 
19
- .libro-sql-input-warning-text,
20
- .libro-sql-variable-name-input {
21
- display: block !important;
22
- }
23
-
24
19
  .libro-sql-variable-name-input {
25
20
  width: 120px !important;
26
21
  height: 32px;
22
+ margin-left: 6px;
27
23
  border: 1px solid #d6d8da !important;
28
24
  border-radius: 6px !important;
29
25
  box-shadow: unset !important;
@@ -53,8 +49,14 @@
53
49
  letter-spacing: 0;
54
50
  }
55
51
 
52
+ .libro-sql-variable-content {
53
+ padding-left: 18px;
54
+ }
55
+
56
56
  .libro-sql-variable-name {
57
+ display: flex;
57
58
  margin-left: 8px;
59
+ align-items: center;
58
60
 
59
61
  svg {
60
62
  margin-left: 4px;
@@ -99,8 +101,8 @@
99
101
  }
100
102
 
101
103
  .libro-sql-input-warning-text {
102
- width: 112px;
103
- height: 20px;
104
+ display: flex;
105
+ align-items: center;
104
106
  margin-top: 4px;
105
107
  color: #faad14;
106
108
  font-weight: 400;
package/es/libro-formatter-sql-magic-contribution.d.ts CHANGED
@@ -6,7 +6,7 @@ export interface SqlDecodedFormatter extends DefaultDecodedFormatter {
6
6
  export declare class FormatterSqlMagicContribution implements FormatterContribution<SqlDecodedFormatter> {
7
7
  formatter: string;
8
8
  formatterOptions?: object;
9
- canHandle: (libroFormatter: string) => 1 | 100;
9
+ canHandle: (libroFormatter: string) => 100 | 1;
10
10
  encode: (source: SqlDecodedFormatter) => {
11
11
  source: string;
12
12
  metadata: {
package/es/libro-sql-cell-view.d.ts.map CHANGED
@@ -1 +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"}
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;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 CHANGED
@@ -35,7 +35,7 @@ import { isOutput } from '@difizen/libro-common';
35
35
  import { CellService, EditorStatus, LibroContextKey, LibroEditableExecutableCellView, LibroViewTracker, VirtualizedManagerHelper, KernelError, LibroJupyterModel, LibroOutputArea } from '@difizen/libro-jupyter';
36
36
  import { Deferred, getOrigin, inject, prop, transient, useInject, view, ViewInstance, ViewManager, ViewOption, ViewRender } from '@difizen/mana-app';
37
37
  import { l10n } from '@difizen/mana-l10n';
38
- import { Input, Popover } from 'antd';
38
+ import { Input } from 'antd';
39
39
  import React from 'react';
40
40
  import { useCallback, useEffect, useRef, useState } from 'react';
41
41
  import "./index.less";
@@ -86,6 +86,8 @@ var CellEditor = function CellEditor() {
86
86
  var LibroSqlVariableNameInput = function LibroSqlVariableNameInput(_ref) {
87
87
  var handCancel = _ref.handCancel;
88
88
  var cellView = useInject(ViewInstance);
89
+ var contextKey = useInject(LibroContextKey);
90
+ var inputRef = useRef(null);
89
91
  var _useState = useState(true),
90
92
  _useState2 = _slicedToArray(_useState, 2),
91
93
  resultVariableAvailable = _useState2[0],
@@ -104,6 +106,13 @@ var LibroSqlVariableNameInput = function LibroSqlVariableNameInput(_ref) {
104
106
  }
105
107
  setVariableName(e.target.value);
106
108
  }, [cellView.parent.model.cells]);
109
+ useEffect(function () {
110
+ if (inputRef.current !== null) {
111
+ inputRef.current.focus({
112
+ cursor: 'end'
113
+ });
114
+ }
115
+ });
107
116
  var handValueSave = useCallback(function () {
108
117
  cellView.model.resultVariable = getDfVariableName(cellView.parent.model.cells.filter(function (cell) {
109
118
  return cell.model.type === 'sql';
@@ -119,34 +128,28 @@ var LibroSqlVariableNameInput = function LibroSqlVariableNameInput(_ref) {
119
128
  status: "".concat(resultVariableAvailable ? '' : 'warning'),
120
129
  className: "libro-sql-variable-name-input",
121
130
  onChange: handleValueChange,
131
+ onBlur: handValueSave,
132
+ onFocus: function onFocus() {
133
+ contextKey.disableCommandMode();
134
+ },
135
+ ref: inputRef,
122
136
  defaultValue: cellView.model.resultVariable
123
137
  }), !resultVariableAvailable && /*#__PURE__*/_jsx("span", {
124
138
  className: "libro-sql-input-warning-text",
125
139
  children: l10n.t('当前变量名已存在')
126
- }), /*#__PURE__*/_jsxs("div", {
127
- className: "libro-sql-input-button",
128
- children: [/*#__PURE__*/_jsx("span", {
129
- onClick: handCancel,
130
- className: "libro-sql-input-cancel",
131
- children: l10n.t('取消')
132
- }), /*#__PURE__*/_jsx("span", {
133
- onClick: handValueSave,
134
- className: "libro-sql-input-save",
135
- children: l10n.t('保存')
136
- })]
137
140
  })]
138
141
  });
139
142
  };
140
143
  export var LibroSqlCell = /*#__PURE__*/React.forwardRef(function SqlEditorViewComponent(props, ref) {
141
- var _useState5 = useState(false),
142
- _useState6 = _slicedToArray(_useState5, 2),
143
- isVariableNameEdit = _useState6[0],
144
- setIsVariableNameEdit = _useState6[1];
145
144
  var instance = useInject(ViewInstance);
146
145
  var contextKey = useInject(LibroContextKey);
146
+ var _useState5 = useState(false),
147
+ _useState6 = _slicedToArray(_useState5, 2),
148
+ edit = _useState6[0],
149
+ setEdit = _useState6[1];
147
150
  var handCancelEdit = function handCancelEdit() {
148
151
  contextKey.enableCommandMode();
149
- setIsVariableNameEdit(false);
152
+ setEdit(false);
150
153
  };
151
154
  return /*#__PURE__*/_jsxs("div", {
152
155
  tabIndex: 10,
@@ -168,38 +171,19 @@ export var LibroSqlCell = /*#__PURE__*/React.forwardRef(function SqlEditorViewCo
168
171
  children: [/*#__PURE__*/_jsx("span", {
169
172
  className: "libro-sql-variable-name-title",
170
173
  children: "Name: "
171
- }), /*#__PURE__*/_jsx("span", {
174
+ }), edit ? /*#__PURE__*/_jsx(LibroSqlVariableNameInput, {
175
+ handCancel: handCancelEdit
176
+ }) : /*#__PURE__*/_jsx("span", {
172
177
  className: "libro-sql-variable-content",
173
- children: instance.model.resultVariable
174
- }), /*#__PURE__*/_jsx("div", {
175
- className: "libro-sql-variable-name-popover",
176
- style: {
177
- display: 'inline-block'
178
+ onDoubleClick: function onDoubleClick() {
179
+ setEdit(true);
178
180
  },
179
- children: /*#__PURE__*/_jsx(Popover, {
180
- content: /*#__PURE__*/_jsx(LibroSqlVariableNameInput, {
181
- handCancel: handCancelEdit
182
- }),
183
- placement: "bottomLeft",
184
- open: instance.parent.model.inputEditable ? isVariableNameEdit : false,
185
- onOpenChange: function onOpenChange(visible) {
186
- if (visible) {
187
- contextKey.disableCommandMode();
188
- } else {
189
- contextKey.enableCommandMode();
190
- }
191
- setIsVariableNameEdit(visible);
192
- },
193
- getPopupContainer: function getPopupContainer() {
194
- var _instance$container;
195
- 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];
196
- },
197
- trigger: "click",
198
- overlayClassName: "libro-sql-popover-container",
199
- children: /*#__PURE__*/_jsx(EditFilled, {
200
- className: "libro-sql-edit-icon"
201
- })
202
- })
181
+ children: instance.model.resultVariable
182
+ }), !edit && /*#__PURE__*/_jsx(EditFilled, {
183
+ className: "libro-sql-edit-icon",
184
+ onClick: function onClick() {
185
+ setEdit(true);
186
+ }
203
187
  })]
204
188
  })]
205
189
  }), /*#__PURE__*/_jsx(CellEditor, {})]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@difizen/libro-sql-cell",
3
- "version": "0.2.35-next.0",
3
+ "version": "0.2.35",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "libro",
@@ -32,10 +32,10 @@
32
32
  "src"
33
33
  ],
34
34
  "dependencies": {
35
- "@difizen/libro-code-editor": "^0.2.35-next.0",
36
- "@difizen/libro-jupyter": "^0.2.35-next.0",
37
- "@difizen/libro-rendermime": "^0.2.35-next.0",
38
- "@difizen/libro-common": "^0.2.35-next.0",
35
+ "@difizen/libro-code-editor": "^0.2.35",
36
+ "@difizen/libro-jupyter": "^0.2.35",
37
+ "@difizen/libro-rendermime": "^0.2.35",
38
+ "@difizen/libro-common": "^0.2.35",
39
39
  "@ant-design/icons": "^5.1.0",
40
40
  "@difizen/mana-app": "latest",
41
41
  "@difizen/mana-l10n": "latest"
package/src/index.less CHANGED
@@ -16,14 +16,10 @@
16
16
  border-right: 1px solid var(--mana-libro-cell-border-color);
17
17
  }
18
18
 
19
- .libro-sql-input-warning-text,
20
- .libro-sql-variable-name-input {
21
- display: block !important;
22
- }
23
-
24
19
  .libro-sql-variable-name-input {
25
20
  width: 120px !important;
26
21
  height: 32px;
22
+ margin-left: 6px;
27
23
  border: 1px solid #d6d8da !important;
28
24
  border-radius: 6px !important;
29
25
  box-shadow: unset !important;
@@ -53,8 +49,14 @@
53
49
  letter-spacing: 0;
54
50
  }
55
51
 
52
+ .libro-sql-variable-content {
53
+ padding-left: 18px;
54
+ }
55
+
56
56
  .libro-sql-variable-name {
57
+ display: flex;
57
58
  margin-left: 8px;
59
+ align-items: center;
58
60
 
59
61
  svg {
60
62
  margin-left: 4px;
@@ -99,8 +101,8 @@
99
101
  }
100
102
 
101
103
  .libro-sql-input-warning-text {
102
- width: 112px;
103
- height: 20px;
104
+ display: flex;
105
+ align-items: center;
104
106
  margin-top: 4px;
105
107
  color: #faad14;
106
108
  font-weight: 400;
package/src/libro-sql-cell-view.tsx CHANGED
@@ -35,7 +35,8 @@ import {
35
35
  ViewRender,
36
36
  } from '@difizen/mana-app';
37
37
  import { l10n } from '@difizen/mana-l10n';
38
- import { Input, Popover } from 'antd';
38
+ import type { InputRef } from 'antd';
39
+ import { Input } from 'antd';
39
40
  import React from 'react';
40
41
  import { useCallback, useEffect, useRef, useState } from 'react';
41
42
 
@@ -94,6 +95,8 @@ const LibroSqlVariableNameInput: React.FC<LibroSqlVariableProps> = ({
94
95
  handCancel,
95
96
  }: LibroSqlVariableProps) => {
96
97
  const cellView = useInject<LibroSqlCellView>(ViewInstance);
98
+ const contextKey = useInject<LibroContextKey>(LibroContextKey);
99
+ const inputRef = useRef<InputRef>(null);
97
100
  const [resultVariableAvailable, setVariableNameAvailable] = useState(true);
98
101
  const [resultVariable, setVariableName] = useState(cellView.model.resultVariable);
99
102
  const handleValueChange = useCallback(
@@ -114,6 +117,14 @@ const LibroSqlVariableNameInput: React.FC<LibroSqlVariableProps> = ({
114
117
  [cellView.parent.model.cells],
115
118
  );
116
119
 
120
+ useEffect(() => {
121
+ if (inputRef.current !== null) {
122
+ inputRef.current.focus({
123
+ cursor: 'end',
124
+ });
125
+ }
126
+ });
127
+
117
128
  const handValueSave = useCallback(() => {
118
129
  cellView.model.resultVariable = getDfVariableName(
119
130
  cellView.parent.model.cells.filter(
@@ -133,6 +144,11 @@ const LibroSqlVariableNameInput: React.FC<LibroSqlVariableProps> = ({
133
144
  status={`${resultVariableAvailable ? '' : 'warning'}`}
134
145
  className="libro-sql-variable-name-input"
135
146
  onChange={handleValueChange}
147
+ onBlur={handValueSave}
148
+ onFocus={() => {
149
+ contextKey.disableCommandMode();
150
+ }}
151
+ ref={inputRef}
136
152
  defaultValue={cellView.model.resultVariable}
137
153
  />
138
154
 
@@ -141,28 +157,19 @@ const LibroSqlVariableNameInput: React.FC<LibroSqlVariableProps> = ({
141
157
  {l10n.t('当前变量名已存在')}
142
158
  </span>
143
159
  )}
144
-
145
- <div className="libro-sql-input-button">
146
- <span onClick={handCancel} className="libro-sql-input-cancel">
147
- {l10n.t('取消')}
148
- </span>
149
- <span onClick={handValueSave} className="libro-sql-input-save">
150
- {l10n.t('保存')}
151
- </span>
152
- </div>
153
160
  </>
154
161
  );
155
162
  };
156
163
 
157
164
  export const LibroSqlCell = React.forwardRef<HTMLDivElement>(
158
165
  function SqlEditorViewComponent(props, ref) {
159
- const [isVariableNameEdit, setIsVariableNameEdit] = useState(false);
160
166
  const instance = useInject<LibroSqlCellView>(ViewInstance);
161
167
  const contextKey = useInject(LibroContextKey);
168
+ const [edit, setEdit] = useState(false);
162
169
 
163
170
  const handCancelEdit = () => {
164
171
  contextKey.enableCommandMode();
165
- setIsVariableNameEdit(false);
172
+ setEdit(false);
166
173
  };
167
174
 
168
175
  return (
@@ -182,36 +189,26 @@ export const LibroSqlCell = React.forwardRef<HTMLDivElement>(
182
189
  </div>
183
190
  <div className="libro-sql-variable-name">
184
191
  <span className="libro-sql-variable-name-title">Name: </span>
185
- <span className="libro-sql-variable-content">
186
- {instance.model.resultVariable}
187
- </span>
188
- <div
189
- className="libro-sql-variable-name-popover"
190
- style={{ display: 'inline-block' }}
191
- >
192
- <Popover
193
- content={<LibroSqlVariableNameInput handCancel={handCancelEdit} />}
194
- placement="bottomLeft"
195
- open={instance.parent.model.inputEditable ? isVariableNameEdit : false}
196
- onOpenChange={(visible) => {
197
- if (visible) {
198
- contextKey.disableCommandMode();
199
- } else {
200
- contextKey.enableCommandMode();
201
- }
202
- setIsVariableNameEdit(visible);
203
- }}
204
- getPopupContainer={() => {
205
- return instance.container?.current?.getElementsByClassName(
206
- 'libro-sql-variable-name',
207
- )[0] as HTMLElement;
192
+ {edit ? (
193
+ <LibroSqlVariableNameInput handCancel={handCancelEdit} />
194
+ ) : (
195
+ <span
196
+ className="libro-sql-variable-content"
197
+ onDoubleClick={() => {
198
+ setEdit(true);
208
199
  }}
209
- trigger="click"
210
- overlayClassName="libro-sql-popover-container"
211
200
  >
212
- <EditFilled className="libro-sql-edit-icon" />
213
- </Popover>
214
- </div>
201
+ {instance.model.resultVariable}
202
+ </span>
203
+ )}
204
+ {!edit && (
205
+ <EditFilled
206
+ className="libro-sql-edit-icon"
207
+ onClick={() => {
208
+ setEdit(true);
209
+ }}
210
+ />
211
+ )}
215
212
  </div>
216
213
  </div>
217
214
  <CellEditor />