@quillsql/react 1.6.5 → 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 (25) hide show
  1. package/.vscode/settings.json +10 -0
  2. package/lib/Chart.js.map +1 -1
  3. package/lib/PieChart.js +8 -8
  4. package/lib/PieChart.js.map +1 -1
  5. package/lib/QuillProvider.d.ts +2 -1
  6. package/lib/QuillProvider.js.map +1 -1
  7. package/lib/ReportBuilder.d.ts +5 -5
  8. package/lib/ReportBuilder.js +191 -74
  9. package/lib/ReportBuilder.js.map +1 -1
  10. package/lib/SQLEditor.d.ts +0 -11
  11. package/lib/SQLEditor.js +4 -285
  12. package/lib/SQLEditor.js.map +1 -1
  13. package/lib/Table.d.ts +31 -3
  14. package/lib/Table.js +352 -5
  15. package/lib/Table.js.map +1 -1
  16. package/package.json +1 -1
  17. package/src/Chart.tsx +0 -22
  18. package/src/PieChart.tsx +8 -8
  19. package/src/QuillProvider.tsx +2 -1
  20. package/src/ReportBuilder.tsx +328 -154
  21. package/src/SQLEditor.tsx +4 -505
  22. package/src/Table.tsx +650 -16
  23. package/prefix-classnames.js +0 -50
  24. package/src/continue_logs.txt +0 -75
  25. 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,510 +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.map((row, rowIndex) => (
1028
- <div
1029
- key={'sqlrow' + rowIndex}
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
- {/* @ts-ignore */}
1040
- {columns.map((column, columnIndex) => (
1041
- <div
1042
- key={'sqlcell' + columnIndex}
1043
- role="cell"
1044
- className="td airplane-1h7muk6"
1045
- style={{
1046
- boxSizing: 'border-box',
1047
- flex: '150 0 auto',
1048
- minWidth: '50px',
1049
- width: '150px',
1050
- display: 'flex',
1051
- margin: '0px',
1052
- textOverflow: 'ellipsis',
1053
- minHeight: '36px',
1054
- borderRight: '1px solid rgb(229, 231, 235)',
1055
- overflow: 'hidden',
1056
- borderTop: '1px solid rgb(229, 231, 235)',
1057
- }}
1058
- >
1059
- <div
1060
- style={{
1061
- lineHeight: '24px',
1062
- width: '100%',
1063
- display: 'flex',
1064
- cursor: 'default',
1065
- position: 'relative',
1066
- }}
1067
- className="airplane-gowkln"
1068
- data-testid="static-cell"
1069
- >
1070
- <div
1071
- className="airplane-Text-root airplane-mzqt6k"
1072
- aria-haspopup="dialog"
1073
- aria-expanded="false"
1074
- aria-controls="mantine-r8-dropdown"
1075
- id="mantine-r8-target"
1076
- style={{
1077
- fontFamily:
1078
- theme?.fontFamily ||
1079
- 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
1080
- WebkitTapHighlightColor: 'transparent',
1081
- // color: 'rgb(55, 65, 81)',
1082
- color:
1083
- theme?.secondaryTextColor || 'rgb(55, 65, 81)',
1084
- textDecoration: 'none',
1085
- fontWeight: 400,
1086
- fontSize: theme?.fontSizeSmall || '14px',
1087
- lineHeight: '20px',
1088
- textOverflow: 'ellipsis',
1089
- whiteSpace: 'nowrap',
1090
- overflow: 'hidden',
1091
- padding: '8px 16px',
1092
- }}
1093
- >
1094
- {typeof row[column.field] === 'object'
1095
- ? JSON.stringify(row[column.field]).length > 55
1096
- ? JSON.stringify(row[column.field]).substring(
1097
- 0,
1098
- 52
1099
- ) + '...'
1100
- : JSON.stringify(row[column.field])
1101
- : row[column.field].length > 55
1102
- ? row[column.field].substring(0, 52) + '...'
1103
- : row[column.field]}
1104
- </div>
1105
- </div>
1106
- </div>
1107
- ))}
1108
- </div>
1109
- ))}
1110
- </div>
1111
- </div>
1112
- </div>
1113
- </div>
1114
- );
1115
- }
1116
-
1117
- return (
1118
- <div
1119
- style={{
1120
- ...containerStyle,
1121
- // paddingLeft: 25,
1122
- // paddingRight: 25,
1123
- // borderRadius: 8,
1124
- // marginTop: 25,
1125
- overflow: 'visible',
1126
- height: height,
1127
- // overflow: 'hidden',
1128
- // @ts-ignore
1129
- // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
1130
- }}
1131
- >
1132
- <div
1133
- style={{
1134
- height: '100%',
1135
- overflow: 'scroll',
1136
- borderRadius: 6,
1137
- border: '1px solid rgb(229, 231, 235)',
1138
- padding: 0,
1139
- margin: 0,
1140
- // border: 'none',
1141
- boxSizing: 'border-box',
1142
- outline: 'none',
1143
- // maxHeight: 600,
1144
- }}
1145
- >
1146
- <div role="table" className="table" style={{ minWidth: '0px' }}>
1147
- <div className="thead">
1148
- <div
1149
- role="row"
1150
- className="tr"
1151
- style={{
1152
- display: 'flex',
1153
- flex: '1 0 auto',
1154
- minWidth: '100px',
1155
- boxSizing: 'border-box',
1156
- }}
1157
- >
1158
- {/* @ts-ignore */}
1159
- {columns.map((column, index) => (
1160
- <div
1161
- key={'sqlcol' + index}
1162
- // @ts-ignore
1163
- style={{
1164
- boxSizing: 'border-box',
1165
- flex: '150 0 auto',
1166
- minWidth: '50px',
1167
- width: '150px',
1168
- position: 'relative',
1169
- cursor: 'pointer',
1170
- background: 'rgb(249, 250, 251)',
1171
- borderRight: '1px solid rgb(229, 231, 235)',
1172
- whiteSpace: 'nowrap',
1173
- display: 'flex',
1174
- alignItems: 'center',
1175
- overflowX: 'visible',
1176
- margin: '0px',
1177
- textOverflow: 'ellipsis',
1178
- minHeight: '36px',
1179
- }}
1180
- >
1181
- <div style={{ width: 16 }} />
1182
- <div
1183
- aria-haspopup="dialog"
1184
- aria-expanded="false"
1185
- aria-controls="mantine-r6-dropdown"
1186
- // @ts-ignore
1187
- style={{
1188
- // fontFamily:
1189
- // 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
1190
- WebkitTapHighlightColor: 'transparent',
1191
- fontFamily: theme?.fontFamily,
1192
- // color: 'rgb(55, 65, 81)',
1193
- color: theme?.primaryTextColor,
1194
- textDecoration: 'none',
1195
- fontSize: theme?.fontSizeSmall || '14px',
1196
- fontWeight: theme?.fontWeightMedium || '500',
1197
- lineHeight: '20px', // 1.25rem * 16px = 20px
1198
- textOverflow: 'ellipsis',
1199
- whiteSpace: 'nowrap',
1200
- overflow: 'hidden',
1201
- }}
1202
- >
1203
- {column.label}
1204
- </div>
1205
- </div>
1206
- ))}
1207
- </div>
1208
- </div>
1209
- <div role="rowgroup" className="tbody">
1210
- {/* @ts-ignore */}
1211
- {rows.map((row, rowIndex) => (
1212
- <div
1213
- key={'sqlrow' + rowIndex}
1214
- role="row"
1215
- className="tr"
1216
- style={{
1217
- display: 'flex',
1218
- flex: '1 0 auto',
1219
- minWidth: '100px',
1220
- boxSizing: 'border-box',
1221
- }}
1222
- >
1223
- {/* @ts-ignore */}
1224
- {columns.map((column, columnIndex) => (
1225
- <div
1226
- key={'sqlcell' + columnIndex}
1227
- role="cell"
1228
- className="td airplane-1h7muk6"
1229
- style={{
1230
- boxSizing: 'border-box',
1231
- flex: '150 0 auto',
1232
- minWidth: '50px',
1233
- width: '150px',
1234
- display: 'flex',
1235
- margin: '0px',
1236
- textOverflow: 'ellipsis',
1237
- minHeight: '36px',
1238
- borderRight: '1px solid rgb(229, 231, 235)',
1239
- overflow: 'hidden',
1240
- borderTop: '1px solid rgb(229, 231, 235)',
1241
- }}
1242
- >
1243
- <div
1244
- style={{
1245
- lineHeight: '24px',
1246
- width: '100%',
1247
- display: 'flex',
1248
- cursor: 'default',
1249
- position: 'relative',
1250
- }}
1251
- className="airplane-gowkln"
1252
- data-testid="static-cell"
1253
- >
1254
- <div
1255
- className="airplane-Text-root airplane-mzqt6k"
1256
- aria-haspopup="dialog"
1257
- aria-expanded="false"
1258
- aria-controls="mantine-r8-dropdown"
1259
- id="mantine-r8-target"
1260
- style={{
1261
- fontFamily:
1262
- theme?.fontFamily ||
1263
- 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
1264
- WebkitTapHighlightColor: 'transparent',
1265
- // color: 'rgb(55, 65, 81)',
1266
- color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
1267
- textDecoration: 'none',
1268
- fontWeight: 400,
1269
- fontSize: theme?.fontSizeSmall || '14px',
1270
- lineHeight: '20px',
1271
- textOverflow: 'ellipsis',
1272
- whiteSpace: 'nowrap',
1273
- overflow: 'hidden',
1274
- padding: '8px 16px',
1275
- }}
1276
- >
1277
- {typeof row[column.field] === 'object'
1278
- ? JSON.stringify(row[column.field]).length > 55
1279
- ? JSON.stringify(row[column.field]).substring(
1280
- 0,
1281
- 52
1282
- ) + '...'
1283
- : JSON.stringify(row[column.field])
1284
- : row[column.field].length > 55
1285
- ? row[column.field].substring(0, 52) + '...'
1286
- : row[column.field]}
1287
- </div>
1288
- </div>
1289
- </div>
1290
- ))}
1291
- </div>
1292
- ))}
1293
- </div>
1294
- </div>
1295
- </div>
1296
- </div>
1297
- );
1298
- }
1299
-
1300
799
  const SchemaListComponent = ({ schema, theme, loading, LoadingComponent }) => {
1301
800
  if (loading) {
1302
801
  return (