react-graph-grid 0.0.1 → 0.0.2

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/FieldEdit.jsx +101 -84
  3. package/src/GridFE.jsx +0 -23
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "author": "Mikhail Razumtsev",
4
4
  "description": "A React package containing a grid that can communicate with other grids through a connection graph",
5
5
  "private": false,
6
- "version": "0.0.1",
6
+ "version": "0.0.2",
7
7
  "type": "module",
8
8
  "scripts": {
9
9
  "dev": "vite --port 4000",
package/src/FieldEdit.jsx CHANGED
@@ -43,8 +43,6 @@ export function FieldEdit(props) {
43
43
  fe.selectClass = props.selectClass || BaseComponent.theme.selectClass || '';
44
44
  fe.divContainerClass = props.divContainerClass || '';
45
45
 
46
- fe.datePickerDateFormat = props.datePickerDateFormat || 'dd.MM.yyyy';
47
-
48
46
  fe.w = props.w;
49
47
  fe.maxW = props.maxW;
50
48
  fe.h = fe.h || props.h || '1.6em';
@@ -120,33 +118,22 @@ export class FieldEditClass extends BaseComponent {
120
118
  }
121
119
  // -------------------------------------------------------------------------------------------------------------------------------------------------------------
122
120
  static _seq = 0;
123
- static _autoFocusColumn;
124
121
  // -------------------------------------------------------------------------------------------------------------------------------------------------------------
125
122
  render() {
126
123
  const fe = this;
127
124
 
128
- const isLookup = fe.column.type === 'lookup';
129
- const isReadonly = fe.column.readonly;
130
- const hasValue = fe.value != null && fe.value !== '';
131
- const noClear = fe.column.required || fe.column.readonly || !fe.multi && !hasValue;
132
-
133
- const needFocus = FieldEditClass._autoFocusColumn === fe.column;
134
- if (needFocus) {
135
- //FieldEditClass._autoFocusColumn = null;
136
- }
137
-
138
125
  return (
139
126
  <>
140
127
  <div
141
128
  key={`fieldEditDiv_${fe.id}_${fe.column.id}_`}
142
- className={fe.divContainerClass ? fe.divContainerClass : fe.large ? 'field-edit' : isLookup && !isReadonly ? 'grid-cell-lookup' : 'grid-cell-edit'}
129
+ className={fe.divContainerClass ? fe.divContainerClass : fe.large ? 'field-edit' : fe.column.type === 'lookup' && !fe.column.readonly ? 'grid-cell-lookup' : 'grid-cell-edit'}
143
130
  style={{
144
131
  border: 'none',
145
132
  height: !fe.inputClass ? fe.h : '',
146
133
  width: '100%',
147
134
  display: 'grid',
148
135
  gridColumn: fe.gridColumn || '',
149
- gridTemplateColumns: fe.large ? 'calc(100% - 4.6em) 2.2em 2.2em' : 'calc(100% - 2.8em) 1.4em 1.4em',
136
+ gridTemplateColumns: fe.getDivGridTemplateColumns(),
150
137
  maxWidth: fe.maxW ? fe.maxW : '',
151
138
  minHeight: fe.large ? '2.5em' : '',
152
139
  columnGap: fe.large ? '0.2em' : '',
@@ -155,86 +142,23 @@ export class FieldEditClass extends BaseComponent {
155
142
  }}
156
143
  >
157
144
  {
158
- isLookup && !isReadonly ?
159
- <>
160
- <input
161
- key={`fieldLookupTitle_${fe.id}_${fe.column.id}_`}
162
- style={{
163
- width: '100%',
164
- gridColumn: noClear ? !fe.comboboxValues ? 'span 2' : 'span 3' : 'span 1',
165
- overflowX: 'hidden',
166
- height: !fe.large ? '1.7em' : '2.2em',
167
- minHeight: !fe.inputClass ? fe.textareaH : fe.h,
168
- boxSizing: 'border-box',
169
- }}
170
- disabled={true}
171
- className={fe.large ? fe.inputClassLG : fe.inputClass || ''}
172
- value={!hasValue ? '' : fe.text != null && fe.text !== '' ? fe.text : fe.value}
173
- >
174
- </input>
175
- <button
176
- key={`fieldLookupButton_${fe.id}_${fe.column.id}_`}
177
- className={`${fe.large ? 'graph-filter-button' : 'grid-cell-button'} ${fe.clearButtonClass}`}
178
- style={{ width: !fe.large ? '1.6em' : '', height: !fe.large ? '1.6em' : '' }}
179
- onClick={(e) => {
180
- fe.openLookupField(e);
181
- }}
182
- disabled={fe.disabled}
183
- >
184
- {!fe.large ? '...' : Images.images.filterSelect()}
185
- </button>
186
- </>
187
- : //autoFocus={needFocus}
188
- <textarea
189
- key={`fieldTextarea_${fe.id}_${fe.column.id}_`}
190
- ref={fe.textareaRef}
191
- className={`${fe.large ? fe.inputClassLG : fe.inputClass}`}
192
- value={isLookup ? fe.text : fe.value || ''}
193
- style={{
194
- width: noClear ? 'calc(100% - 2px)' : '100%',
195
- minHeight: !fe.inputClass ? fe.textareaH : fe.minH,
196
- height: fe.h ? fe.h : !fe.large ? '1.7em' : '2.2em',
197
- padding: '0',
198
- boxSizing: 'border-box',
199
- gridColumn: noClear ? 'span 3' : 'span 2',
200
- resize: 'vertical',
201
- overflowX: 'hidden',
202
- }}
203
- onChange={(e) => {
204
- e.value = e.text = e.target.value;
205
- fe.value = fe.text = e.target.value;
206
- e.fe = fe;
207
- FieldEditClass._autoFocusColumn = fe.column;
208
-
209
- fe.selectionStart = e.target.selectionStart;
210
- fe._refocus = true;
211
-
212
- fe.onChange(e);
213
- fe.refreshState();
214
- }}
215
- disabled={fe.disabled || fe.column.readonly}
216
- >
217
- </textarea>
145
+ fe.renderInput()
218
146
  }
219
147
  {
220
- noClear || fe.column.readonly ? <></>
221
- :
148
+ fe.canClear() ?
222
149
  <button
223
150
  key={`fieldClearButton_${fe.id}_${fe.column.id}_`}
224
151
  className={`${fe.large ? 'graph-filter-clear' : 'grid-cell-button'} ${fe.clearButtonClass || ''}`}
225
152
  style={{ width: !fe.large ? '1.6em' : '', height: !fe.large ? '1.6em' : '' }}
226
153
  onClick={(e) => {
227
- e.value = e.text = '';
228
- fe.value = fe.text = '';
229
- e.fe = fe;
230
- fe.onChange(e);
231
- fe.refreshState();
154
+ fe.onClearClick(e);
232
155
  }}
233
156
  disabled={fe.disabled}
234
157
  >
235
158
  {!fe.large ? '×' : Images.images.filterClear()}
236
159
  </button>
237
-
160
+ :
161
+ <></>
238
162
  }
239
163
  </div >
240
164
  {
@@ -259,6 +183,79 @@ export class FieldEditClass extends BaseComponent {
259
183
  )
260
184
  }
261
185
  // -------------------------------------------------------------------------------------------------------------------------------------------------------------
186
+ renderInput() {
187
+ const fe = this;
188
+
189
+ const isLookup = fe.column.type === 'lookup';
190
+ const noClear = !fe.canClear();
191
+
192
+ return (
193
+ <>
194
+ {
195
+ isLookup && !fe.column.readonly ?
196
+ <>
197
+ <input
198
+ key={`fieldLookupTitle_${fe.id}_${fe.column.id}_`}
199
+ style={{
200
+ width: '100%',
201
+ gridColumn: noClear ? 'span 2' : 'span 1',
202
+ overflowX: 'hidden',
203
+ height: !fe.large ? '1.7em' : '2.2em',
204
+ minHeight: !fe.inputClass ? fe.textareaH : fe.h,
205
+ boxSizing: 'border-box',
206
+ }}
207
+ disabled={true}
208
+ className={fe.large ? fe.inputClassLG : fe.inputClass || ''}
209
+ value={fe.value == null || fe.value == '' ? '' : fe.text != null && fe.text !== '' ? fe.text : fe.value}
210
+ >
211
+ </input>
212
+ <button
213
+ key={`fieldLookupButton_${fe.id}_${fe.column.id}_`}
214
+ className={`${fe.large ? 'graph-filter-button' : 'grid-cell-button'} ${fe.clearButtonClass}`}
215
+ style={{ width: !fe.large ? '1.6em' : '', height: !fe.large ? '1.6em' : '' }}
216
+ onClick={(e) => {
217
+ fe.openLookupField(e);
218
+ }}
219
+ disabled={fe.disabled}
220
+ >
221
+ {!fe.large ? '...' : Images.images.filterSelect()}
222
+ </button>
223
+ </>
224
+ :
225
+ <textarea
226
+ key={`fieldTextarea_${fe.id}_${fe.column.id}_`}
227
+ ref={fe.textareaRef}
228
+ className={`${fe.large ? fe.inputClassLG : fe.inputClass}`}
229
+ value={isLookup ? fe.text : fe.value || ''}
230
+ style={{
231
+ width: noClear ? 'calc(100% - 2px)' : '100%',
232
+ minHeight: !fe.inputClass ? fe.textareaH : fe.minH,
233
+ height: fe.h ? fe.h : !fe.large ? '1.7em' : '2.2em',
234
+ padding: '0',
235
+ boxSizing: 'border-box',
236
+ gridColumn: noClear ? 'span 3' : 'span 2',
237
+ resize: 'vertical',
238
+ overflowX: 'hidden',
239
+ }}
240
+ onChange={(e) => {
241
+ e.value = e.text = e.target.value;
242
+ fe.value = fe.text = e.target.value;
243
+ e.fe = fe;
244
+
245
+ fe.selectionStart = e.target.selectionStart;
246
+ fe._refocus = true;
247
+
248
+ fe.onChange(e);
249
+ fe.refreshState();
250
+ }}
251
+ disabled={fe.disabled || fe.column.readonly}
252
+ >
253
+ </textarea>
254
+ }
255
+ </>
256
+ );
257
+ }
258
+ // -------------------------------------------------------------------------------------------------------------------------------------------------------------
262
259
  renderLookupGrid(wnd) {
263
260
  const fe = this;
264
261
 
@@ -273,7 +270,7 @@ export class FieldEditClass extends BaseComponent {
273
270
  findGrid={() => { return fe.grid; }}
274
271
  onSelectValue={(e) => {
275
272
  fe._selectedOptions = e.values || [];
276
-
273
+
277
274
  fe.value = e.value;
278
275
  fe.text = e.text;
279
276
 
@@ -312,6 +309,26 @@ export class FieldEditClass extends BaseComponent {
312
309
  );
313
310
  }
314
311
  // -------------------------------------------------------------------------------------------------------------------------------------------------------------
312
+ getDivGridTemplateColumns() {
313
+ const fe = this;
314
+ return fe.large ? 'calc(100% - 4.6em) 2.2em 2.2em' : 'calc(100% - 2.8em) 1.4em 1.4em';
315
+ }
316
+ // -------------------------------------------------------------------------------------------------------------------------------------------------------------
317
+ canClear() {
318
+ const fe = this;
319
+ return !fe.column.required && !fe.column.readonly && (fe.multi || fe.value != null && fe.value !== '');
320
+ }
321
+ // -------------------------------------------------------------------------------------------------------------------------------------------------------------
322
+ onClearClick(e) {
323
+ const fe = this;
324
+
325
+ e.value = e.text = '';
326
+ fe.value = fe.text = '';
327
+ e.fe = fe;
328
+ fe.onChange(e);
329
+ fe.refreshState();
330
+ }
331
+ // -------------------------------------------------------------------------------------------------------------------------------------------------------------
315
332
  closeLookupField() {
316
333
  const fe = this;
317
334
  fe.lookupIsShowing = false;
package/src/GridFE.jsx CHANGED
@@ -77,7 +77,6 @@ export class GridFEClass extends GridFLClass {
77
77
  grid.onSelectValue = props.onSelectValue || (() => { });
78
78
 
79
79
  const shift = (grid.level + 1) * 20;
80
-
81
80
  grid.popupPos = { x: 100 + shift, y: 100 + shift, w: 800, h: 600 };
82
81
 
83
82
  grid.addToolbarButtons();
@@ -130,17 +129,6 @@ export class GridFEClass extends GridFLClass {
130
129
  return <></>;
131
130
  }
132
131
  // -------------------------------------------------------------------------------------------------------------------------------------------------------------
133
- onClosePopup() {
134
- const grid = this;
135
-
136
- super.onClosePopup();
137
-
138
- if (grid.isNewRecord) {
139
- grid.isNewRecord = false;
140
- grid.refresh();
141
- }
142
- }
143
- // -------------------------------------------------------------------------------------------------------------------------------------------------------------
144
132
  renderCell(grid, col, row, selected) {
145
133
  if (!grid.allowEditGrid && !col.allowVerticalResize || !selected || grid.isDisabled()) return super.renderCell(grid, col, row);
146
134
 
@@ -495,17 +483,6 @@ export class GridFEClass extends GridFLClass {
495
483
  return selected ? '1' : grid.stateind;
496
484
  }
497
485
  // -------------------------------------------------------------------------------------------------------------------------------------------------------------
498
- selectedText(delim) {
499
- const grid = this;
500
- let res = super.selectedText(delim);
501
-
502
- if (res != null && res !== '') return res;
503
-
504
- if (grid.status === NodeStatus.filter && grid.value != null && grid.value !== '' && grid._selectedText != null && grid._selectedText !== '') return grid._selectedText;
505
-
506
- return res;
507
- }
508
- // -------------------------------------------------------------------------------------------------------------------------------------------------------------
509
486
  isRowChanged(row) {
510
487
  const grid = this;
511
488
  if (!grid.changedRow) return false;