@quillsql/react 1.6.6 → 1.6.7

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 (22) hide show
  1. package/.vscode/settings.json +10 -0
  2. package/lib/Chart.js.map +1 -1
  3. package/lib/QuillProvider.d.ts +2 -1
  4. package/lib/QuillProvider.js.map +1 -1
  5. package/lib/ReportBuilder.d.ts +5 -5
  6. package/lib/ReportBuilder.js +191 -74
  7. package/lib/ReportBuilder.js.map +1 -1
  8. package/lib/SQLEditor.d.ts +0 -11
  9. package/lib/SQLEditor.js +4 -322
  10. package/lib/SQLEditor.js.map +1 -1
  11. package/lib/Table.d.ts +17 -1
  12. package/lib/Table.js +349 -5
  13. package/lib/Table.js.map +1 -1
  14. package/package.json +1 -1
  15. package/src/Chart.tsx +0 -22
  16. package/src/QuillProvider.tsx +2 -1
  17. package/src/ReportBuilder.tsx +328 -154
  18. package/src/SQLEditor.tsx +4 -576
  19. package/src/Table.tsx +620 -21
  20. package/prefix-classnames.js +0 -50
  21. package/src/continue_logs.txt +0 -75
  22. package/src/styles.css +0 -0
package/src/SQLEditor.tsx CHANGED
@@ -4,7 +4,6 @@ import React, { useState, useContext, useMemo, useEffect } from 'react';
4
4
  import MonacoEditor from '@monaco-editor/react';
5
5
  // import './nightOwlLight.css';
6
6
  import axios from 'axios';
7
- import { TailSpin } from 'react-loader-spinner';
8
7
  import { ClientContext, SchemaContext, ThemeContext } from './Context';
9
8
  import {
10
9
  ChevronDownIcon,
@@ -13,6 +12,8 @@ import {
13
12
  MagnifyingGlassIcon,
14
13
  } from '@heroicons/react/20/solid';
15
14
  import { QuillTheme } from './QuillProvider';
15
+ import { SpecialTable } from './Table';
16
+ import { TailSpin } from 'react-loader-spinner';
16
17
 
17
18
  export function convertPostgresColumn(column) {
18
19
  let format;
@@ -170,6 +171,7 @@ const QuillTextInput = ({
170
171
  color: theme?.primaryTextColor,
171
172
  borderWidth: '1px',
172
173
  borderColor: theme?.borderColor || '#E7E7E7',
174
+ borderStyle: 'solid',
173
175
  borderRadius: '6px',
174
176
  }}
175
177
  id={id}
@@ -532,6 +534,7 @@ export default function QueryEditor({
532
534
  height="calc(100% - 70px)"
533
535
  LoadingComponent={LoadingComponent}
534
536
  loading={sqlQueryLoading}
537
+ theme={theme}
535
538
  />
536
539
  )}
537
540
  <div
@@ -793,581 +796,6 @@ const styles = {
793
796
  },
794
797
  };
795
798
 
796
- export function SpecialTable({
797
- columns,
798
- rows,
799
- height,
800
- containerStyle,
801
- loading,
802
- LoadingComponent,
803
- theme,
804
- showDownloadCsvButton,
805
- csvFilename,
806
- }: {
807
- columns: any[];
808
- rows: any[];
809
- height: string;
810
- containerStyle?: React.CSSProperties;
811
- loading?: boolean;
812
- LoadingComponent?: () => JSX.Element;
813
- theme?: any;
814
- showDownloadCsvButton?: boolean;
815
- csvFilename?: string;
816
- }) {
817
- const downloadCSV = () => {
818
- // report.rows
819
- if (!rows.length) {
820
- return;
821
- }
822
- const json = rows; // JSON data passed as a prop
823
- const fields = Object.keys(json[0]); // Assumes all objects have same keys
824
- const csvRows = [];
825
-
826
- // Header row
827
- csvRows.push(fields.join(','));
828
-
829
- // Data rows
830
- for (const row of json) {
831
- const values = fields.map(field => JSON.stringify(row[field] || ''));
832
- csvRows.push(values.join(','));
833
- }
834
-
835
- // Create CSV string and create a 'blob' with it
836
- const csvString = csvRows.join('\r\n');
837
- const csvBlob = new Blob([csvString], { type: 'text/csv' });
838
-
839
- // Create a download link and click it
840
- const downloadLink = document.createElement('a');
841
- downloadLink.download = `${csvFilename}.csv`;
842
- downloadLink.href = URL.createObjectURL(csvBlob);
843
- downloadLink.style.display = 'none';
844
-
845
- document.body.appendChild(downloadLink);
846
- downloadLink.click();
847
- document.body.removeChild(downloadLink);
848
- };
849
- if (loading) {
850
- return (
851
- <div
852
- style={{
853
- ...containerStyle,
854
- // paddingLeft: 25,
855
- // paddingRight: 25,
856
- // borderRadius: 8,
857
- // marginTop: 25,
858
- // overflow: 'visible',
859
- width: '100%',
860
- height: height,
861
- // overflow: 'hidden',
862
- // @ts-ignore
863
- // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
864
- }}
865
- >
866
- <div
867
- style={{
868
- height: '100%',
869
- overflow: 'scroll',
870
- borderRadius: 6,
871
- border: '1px solid rgb(229, 231, 235)',
872
- padding: 0,
873
- margin: 0,
874
- // border: 'none',
875
- boxSizing: 'border-box',
876
- outline: 'none',
877
- display: 'flex',
878
- flexDirection: 'column',
879
- justifyContent: 'center',
880
- alignItems: 'center',
881
- // maxHeight: 600,
882
- }}
883
- >
884
- {LoadingComponent && <LoadingComponent />}
885
- {!LoadingComponent && (
886
- <TailSpin height={36} width={36} color="#364153" />
887
- )}
888
- </div>
889
- </div>
890
- );
891
- }
892
- if (!columns || !columns.length || !rows) {
893
- return null;
894
- }
895
-
896
- if (showDownloadCsvButton) {
897
- return (
898
- <div
899
- style={{
900
- ...containerStyle,
901
- // paddingLeft: 25,
902
- // paddingRight: 25,
903
- // borderRadius: 8,
904
- // marginTop: 25,
905
- overflow: 'visible',
906
- height: height,
907
- // overflow: 'hidden',
908
- // @ts-ignore
909
- // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
910
- }}
911
- >
912
- <div style={{ height: 50, background: 'white' }} className="thead">
913
- <div
914
- role="row"
915
- className="tr"
916
- style={{
917
- display: 'flex',
918
- flex: '1 0 auto',
919
- minWidth: '100px',
920
- boxSizing: 'border-box',
921
- alignItems: 'center',
922
- height: 50,
923
- // position: 'absolute',
924
- // bottom: 0,
925
- }}
926
- >
927
- <div
928
- onClick={downloadCSV}
929
- style={{
930
- height: 40,
931
- minHeight: 40,
932
- color: theme?.primaryTextColor,
933
- boxSizing: 'content-box',
934
- fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
935
- fontSize: theme?.fontSizeSmall || '14px',
936
- fontWeight: theme?.fontWeightMedium || '500',
937
- // marginTop: 8,
938
- marginLeft: 20,
939
- alignItems: 'center',
940
- display: 'flex',
941
- cursor: 'pointer',
942
- }}
943
- >
944
- Download CSV
945
- </div>
946
- </div>
947
- </div>
948
- <div
949
- style={{
950
- height: 'calc(100% - 50px)',
951
- overflow: 'scroll',
952
- borderRadius: 6,
953
- border: '1px solid rgb(229, 231, 235)',
954
- padding: 0,
955
- margin: 0,
956
- // border: 'none',
957
- boxSizing: 'border-box',
958
- outline: 'none',
959
- // maxHeight: 600,
960
- }}
961
- >
962
- <div role="table" className="table" style={{ minWidth: '0px' }}>
963
- <div className="thead">
964
- <div
965
- role="row"
966
- className="tr"
967
- style={{
968
- display: 'flex',
969
- flex: '1 0 auto',
970
- minWidth: '100px',
971
- boxSizing: 'border-box',
972
- }}
973
- >
974
- {/* @ts-ignore */}
975
- {columns.map((column, index) => (
976
- <div
977
- key={'sqlcol' + index}
978
- // @ts-ignore
979
- style={{
980
- boxSizing: 'border-box',
981
- flex: '150 0 auto',
982
- minWidth: '50px',
983
- width: '150px',
984
- position: 'relative',
985
- cursor: 'pointer',
986
- background: 'rgb(249, 250, 251)',
987
- borderRight: '1px solid rgb(229, 231, 235)',
988
- whiteSpace: 'nowrap',
989
- display: 'flex',
990
- alignItems: 'center',
991
- overflowX: 'visible',
992
- margin: '0px',
993
- textOverflow: 'ellipsis',
994
- minHeight: '36px',
995
- }}
996
- >
997
- <div style={{ width: 16 }} />
998
- <div
999
- aria-haspopup="dialog"
1000
- aria-expanded="false"
1001
- aria-controls="mantine-r6-dropdown"
1002
- // @ts-ignore
1003
- style={{
1004
- // fontFamily:
1005
- // 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
1006
- WebkitTapHighlightColor: 'transparent',
1007
- fontFamily: theme?.fontFamily,
1008
- // color: 'rgb(55, 65, 81)',
1009
- color: theme?.primaryTextColor,
1010
- textDecoration: 'none',
1011
- fontSize: theme?.fontSizeSmall || '14px',
1012
- fontWeight: theme?.fontWeightMedium || '500',
1013
- lineHeight: '20px', // 1.25rem * 16px = 20px
1014
- textOverflow: 'ellipsis',
1015
- whiteSpace: 'nowrap',
1016
- overflow: 'hidden',
1017
- }}
1018
- >
1019
- {column.label}
1020
- </div>
1021
- </div>
1022
- ))}
1023
- </div>
1024
- </div>
1025
- <div role="rowgroup" className="tbody">
1026
- {/* @ts-ignore */}
1027
- {!rows.length ? (
1028
- <div
1029
- key={'sqlrow0'}
1030
- role="row"
1031
- className="tr"
1032
- style={{
1033
- display: 'flex',
1034
- flex: '1 0 auto',
1035
- minWidth: '100px',
1036
- boxSizing: 'border-box',
1037
- }}
1038
- >
1039
- <div
1040
- key={'sqlcell0'}
1041
- role="cell"
1042
- className="td airplane-1h7muk6"
1043
- style={{
1044
- boxSizing: 'border-box',
1045
- flex: '150 0 auto',
1046
- minWidth: '50px',
1047
- width: '150px',
1048
- display: 'flex',
1049
- margin: '0px',
1050
- textOverflow: 'ellipsis',
1051
- minHeight: '36px',
1052
- borderRight: '1px solid rgb(229, 231, 235)',
1053
- overflow: 'hidden',
1054
- borderTop: '1px solid rgb(229, 231, 235)',
1055
- }}
1056
- >
1057
- <div
1058
- style={{
1059
- lineHeight: '24px',
1060
- width: '100%',
1061
- display: 'flex',
1062
- cursor: 'default',
1063
- position: 'relative',
1064
- }}
1065
- className="airplane-gowkln"
1066
- data-testid="static-cell"
1067
- >
1068
- <div
1069
- className="airplane-Text-root airplane-mzqt6k"
1070
- aria-haspopup="dialog"
1071
- aria-expanded="false"
1072
- aria-controls="mantine-r8-dropdown"
1073
- id="mantine-r8-target"
1074
- style={{
1075
- fontFamily:
1076
- theme?.fontFamily ||
1077
- 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
1078
- WebkitTapHighlightColor: 'transparent',
1079
- // color: 'rgb(55, 65, 81)',
1080
- color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
1081
- textDecoration: 'none',
1082
- fontWeight: 400,
1083
- fontSize: theme?.fontSizeSmall || '14px',
1084
- lineHeight: '20px',
1085
- textOverflow: 'ellipsis',
1086
- whiteSpace: 'nowrap',
1087
- overflow: 'hidden',
1088
- padding: '8px 16px',
1089
- }}
1090
- >
1091
- No rows returned
1092
- </div>
1093
- </div>
1094
- </div>
1095
- </div>
1096
- ) : (
1097
- rows.map((row, rowIndex) => (
1098
- <div
1099
- key={'sqlrow' + rowIndex}
1100
- role="row"
1101
- className="tr"
1102
- style={{
1103
- display: 'flex',
1104
- flex: '1 0 auto',
1105
- minWidth: '100px',
1106
- boxSizing: 'border-box',
1107
- }}
1108
- >
1109
- {/* @ts-ignore */}
1110
- {columns.map((column, columnIndex) => (
1111
- <div
1112
- key={'sqlcell' + columnIndex}
1113
- role="cell"
1114
- className="td airplane-1h7muk6"
1115
- style={{
1116
- boxSizing: 'border-box',
1117
- flex: '150 0 auto',
1118
- minWidth: '50px',
1119
- width: '150px',
1120
- display: 'flex',
1121
- margin: '0px',
1122
- textOverflow: 'ellipsis',
1123
- minHeight: '36px',
1124
- borderRight: '1px solid rgb(229, 231, 235)',
1125
- overflow: 'hidden',
1126
- borderTop: '1px solid rgb(229, 231, 235)',
1127
- }}
1128
- >
1129
- <div
1130
- style={{
1131
- lineHeight: '24px',
1132
- width: '100%',
1133
- display: 'flex',
1134
- cursor: 'default',
1135
- position: 'relative',
1136
- }}
1137
- className="airplane-gowkln"
1138
- data-testid="static-cell"
1139
- >
1140
- <div
1141
- className="airplane-Text-root airplane-mzqt6k"
1142
- aria-haspopup="dialog"
1143
- aria-expanded="false"
1144
- aria-controls="mantine-r8-dropdown"
1145
- id="mantine-r8-target"
1146
- style={{
1147
- fontFamily:
1148
- theme?.fontFamily ||
1149
- 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
1150
- WebkitTapHighlightColor: 'transparent',
1151
- // color: 'rgb(55, 65, 81)',
1152
- color:
1153
- theme?.secondaryTextColor || 'rgb(55, 65, 81)',
1154
- textDecoration: 'none',
1155
- fontWeight: 400,
1156
- fontSize: theme?.fontSizeSmall || '14px',
1157
- lineHeight: '20px',
1158
- textOverflow: 'ellipsis',
1159
- whiteSpace: 'nowrap',
1160
- overflow: 'hidden',
1161
- padding: '8px 16px',
1162
- }}
1163
- >
1164
- {typeof row[column.field] === 'object'
1165
- ? JSON.stringify(row[column.field]).length > 55
1166
- ? JSON.stringify(row[column.field]).substring(
1167
- 0,
1168
- 52
1169
- ) + '...'
1170
- : JSON.stringify(row[column.field])
1171
- : row[column.field].length > 55
1172
- ? row[column.field].substring(0, 52) + '...'
1173
- : row[column.field]}
1174
- </div>
1175
- </div>
1176
- </div>
1177
- ))}
1178
- </div>
1179
- ))
1180
- )}
1181
- </div>
1182
- </div>
1183
- </div>
1184
- </div>
1185
- );
1186
- }
1187
-
1188
- return (
1189
- <div
1190
- style={{
1191
- ...containerStyle,
1192
- // paddingLeft: 25,
1193
- // paddingRight: 25,
1194
- // borderRadius: 8,
1195
- // marginTop: 25,
1196
- overflow: 'visible',
1197
- height: height,
1198
- // overflow: 'hidden',
1199
- // @ts-ignore
1200
- // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
1201
- }}
1202
- >
1203
- <div
1204
- style={{
1205
- height: '100%',
1206
- overflow: 'scroll',
1207
- borderRadius: 6,
1208
- border: '1px solid rgb(229, 231, 235)',
1209
- padding: 0,
1210
- margin: 0,
1211
- // border: 'none',
1212
- boxSizing: 'border-box',
1213
- outline: 'none',
1214
- // maxHeight: 600,
1215
- }}
1216
- >
1217
- <div role="table" className="table" style={{ minWidth: '0px' }}>
1218
- <div className="thead">
1219
- <div
1220
- role="row"
1221
- className="tr"
1222
- style={{
1223
- display: 'flex',
1224
- flex: '1 0 auto',
1225
- minWidth: '100px',
1226
- boxSizing: 'border-box',
1227
- }}
1228
- >
1229
- {/* @ts-ignore */}
1230
- {columns.map((column, index) => (
1231
- <div
1232
- key={'sqlcol' + index}
1233
- // @ts-ignore
1234
- style={{
1235
- boxSizing: 'border-box',
1236
- flex: '150 0 auto',
1237
- minWidth: '50px',
1238
- width: '150px',
1239
- position: 'relative',
1240
- cursor: 'pointer',
1241
- background: 'rgb(249, 250, 251)',
1242
- borderRight: '1px solid rgb(229, 231, 235)',
1243
- whiteSpace: 'nowrap',
1244
- display: 'flex',
1245
- alignItems: 'center',
1246
- overflowX: 'visible',
1247
- margin: '0px',
1248
- textOverflow: 'ellipsis',
1249
- minHeight: '36px',
1250
- }}
1251
- >
1252
- <div style={{ width: 16 }} />
1253
- <div
1254
- aria-haspopup="dialog"
1255
- aria-expanded="false"
1256
- aria-controls="mantine-r6-dropdown"
1257
- // @ts-ignore
1258
- style={{
1259
- // fontFamily:
1260
- // 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
1261
- WebkitTapHighlightColor: 'transparent',
1262
- fontFamily: theme?.fontFamily,
1263
- // color: 'rgb(55, 65, 81)',
1264
- color: theme?.primaryTextColor,
1265
- textDecoration: 'none',
1266
- fontSize: theme?.fontSizeSmall || '14px',
1267
- fontWeight: theme?.fontWeightMedium || '500',
1268
- lineHeight: '20px', // 1.25rem * 16px = 20px
1269
- textOverflow: 'ellipsis',
1270
- whiteSpace: 'nowrap',
1271
- overflow: 'hidden',
1272
- }}
1273
- >
1274
- {column.label}
1275
- </div>
1276
- </div>
1277
- ))}
1278
- </div>
1279
- </div>
1280
- <div role="rowgroup" className="tbody">
1281
- {/* @ts-ignore */}
1282
- {rows.map((row, rowIndex) => (
1283
- <div
1284
- key={'sqlrow' + rowIndex}
1285
- role="row"
1286
- className="tr"
1287
- style={{
1288
- display: 'flex',
1289
- flex: '1 0 auto',
1290
- minWidth: '100px',
1291
- boxSizing: 'border-box',
1292
- }}
1293
- >
1294
- {/* @ts-ignore */}
1295
- {columns.map((column, columnIndex) => (
1296
- <div
1297
- key={'sqlcell' + columnIndex}
1298
- role="cell"
1299
- className="td airplane-1h7muk6"
1300
- style={{
1301
- boxSizing: 'border-box',
1302
- flex: '150 0 auto',
1303
- minWidth: '50px',
1304
- width: '150px',
1305
- display: 'flex',
1306
- margin: '0px',
1307
- textOverflow: 'ellipsis',
1308
- minHeight: '36px',
1309
- borderRight: '1px solid rgb(229, 231, 235)',
1310
- overflow: 'hidden',
1311
- borderTop: '1px solid rgb(229, 231, 235)',
1312
- }}
1313
- >
1314
- <div
1315
- style={{
1316
- lineHeight: '24px',
1317
- width: '100%',
1318
- display: 'flex',
1319
- cursor: 'default',
1320
- position: 'relative',
1321
- }}
1322
- className="airplane-gowkln"
1323
- data-testid="static-cell"
1324
- >
1325
- <div
1326
- className="airplane-Text-root airplane-mzqt6k"
1327
- aria-haspopup="dialog"
1328
- aria-expanded="false"
1329
- aria-controls="mantine-r8-dropdown"
1330
- id="mantine-r8-target"
1331
- style={{
1332
- fontFamily:
1333
- theme?.fontFamily ||
1334
- 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
1335
- WebkitTapHighlightColor: 'transparent',
1336
- // color: 'rgb(55, 65, 81)',
1337
- color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
1338
- textDecoration: 'none',
1339
- fontWeight: 400,
1340
- fontSize: theme?.fontSizeSmall || '14px',
1341
- lineHeight: '20px',
1342
- textOverflow: 'ellipsis',
1343
- whiteSpace: 'nowrap',
1344
- overflow: 'hidden',
1345
- padding: '8px 16px',
1346
- }}
1347
- >
1348
- {typeof row[column.field] === 'object'
1349
- ? JSON.stringify(row[column.field]).length > 55
1350
- ? JSON.stringify(row[column.field]).substring(
1351
- 0,
1352
- 52
1353
- ) + '...'
1354
- : JSON.stringify(row[column.field])
1355
- : row[column.field].length > 55
1356
- ? row[column.field].substring(0, 52) + '...'
1357
- : row[column.field]}
1358
- </div>
1359
- </div>
1360
- </div>
1361
- ))}
1362
- </div>
1363
- ))}
1364
- </div>
1365
- </div>
1366
- </div>
1367
- </div>
1368
- );
1369
- }
1370
-
1371
799
  const SchemaListComponent = ({ schema, theme, loading, LoadingComponent }) => {
1372
800
  if (loading) {
1373
801
  return (