@quillsql/react 1.6.6 → 1.6.7

package/src/QuillProvider.tsx

@@ -33,8 +33,9 @@ export interface QuillTheme {
   chartTickColor: string;
   chartColors: string[];
   borderColor: string;
-  primaryButtonColor: string;
+  primaryButtonColor?: string;
   borderWidth: number;
+  buttonFontWeight?: number;
 }
 
 const defaultTheme = {

package/src/ReportBuilder.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useContext, useCallback, useEffect } from 'react';
 // import './nightOwlLight.css';
 import axios from 'axios';
-import { TailSpin } from 'react-loader-spinner';
 import { ClientContext, SchemaContext, ThemeContext } from './Context';
 import {
   ChevronDownIcon,
@@ -55,14 +54,40 @@ interface ReportBuilderProps {
   onChangeColumns: (columns: object[]) => void;
   onChangeLoading: (loading: boolean) => void;
   onError: (error: string) => void;
-  SelectComponent: (props: SelectComponentProps) => JSX.Element;
-  ButtonComponent: (props: ButtonComponentProps) => JSX.Element;
-  ModalComponent: (props: ModalComponentProps) => JSX.Element;
-  ModalTriggerComponent: (props: ModalTriggerComponentProps) => JSX.Element;
-  TextInputComponent: (props: TextInputComponentProps) => JSX.Element;
+  SelectComponent?: (props: SelectComponentProps) => JSX.Element;
+  ButtonComponent?: (props: ButtonComponentProps) => JSX.Element;
+  ModalComponent?: (props: ModalComponentProps) => JSX.Element;
+  ModalTriggerComponent?: (props: ModalTriggerComponentProps) => JSX.Element;
+  TextInputComponent?: (props: TextInputComponentProps) => JSX.Element;
   tagStyle: React.CSSProperties;
 }
 
+function QuillModal({ children, isOpen, onClose, title, theme }) {
+  if (!isOpen) {
+    return null;
+  }
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 45,
+        minWidth: 300,
+        left: 0,
+        backgroundColor: theme.backgroundColor || 'white',
+        padding: '20px',
+        zIndex: '1000',
+        borderRadius: 8,
+        boxShadow: '0 1px 8px 0 rgba(0,0,0,.09)',
+        borderWidth: theme.borderWidth,
+        borderStyle: 'solid',
+        borderColor: theme.borderColor,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
 export default function ReportBuilder({
   onChangeQuery,
   onChangeData,
@@ -193,11 +218,152 @@ export default function ReportBuilder({
       schema={schema}
       onChangeQuery={onChangeQuery}
       runQuery={runQuery}
-      SelectComponent={SelectComponent}
-      ButtonComponent={ButtonComponent}
-      ModalComponent={ModalComponent}
-      ModalTriggerComponent={ModalTriggerComponent}
-      TextInputComponent={TextInputComponent}
+      SelectComponent={
+        SelectComponent
+          ? SelectComponent
+          : ({ onChange, value, options }: SelectComponentProps) => {
+              return (
+                <select
+                  onChange={event => onChange(event.target.value)}
+                  value={value}
+                  id={'reportbuilderdropdown'}
+                  style={{
+                    width: '100%',
+                    minWidth: 230,
+                    outline: 'none',
+                    textAlign: 'left',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    borderRadius: 6,
+                    paddingLeft: 12,
+                    paddingRight: 12,
+                    height: 38,
+                    borderWidth: theme.borderWidth,
+                    borderColor: theme.borderColor,
+                    background: theme.backgroundColor,
+                    color: theme.primaryTextColor,
+                    boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+                    fontFamily: theme.fontFamily,
+                  }}
+                >
+                  {options.map((option, index) => (
+                    <option key={option.label + index} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
+              );
+            }
+      }
+      ButtonComponent={
+        ButtonComponent
+          ? ButtonComponent
+          : ({ onClick, label }: ButtonComponentProps) => {
+              return (
+                <div
+                  style={{
+                    height: 32,
+                    background: theme.primaryButtonColor,
+                    borderWidth: theme.borderWidth,
+                    borderColor: theme.borderColor,
+                    color: theme.backgroundColor,
+                    display: 'flex',
+                    borderRadius: 6,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    outline: 'none',
+                    cursor: 'pointer',
+                    fontFamily: theme.fontFamily,
+                    fontWeight: theme.buttonFontWeight || 600,
+                  }}
+                  onClick={onClick}
+                >
+                  {label}
+                </div>
+              );
+            }
+      }
+      ModalComponent={
+        ModalComponent
+          ? ModalComponent
+          : ({ children, isOpen, onClose, title }: ModalComponentProps) => {
+              return (
+                <QuillModal
+                  isOpen={isOpen}
+                  theme={theme}
+                  onClose={onClose}
+                  title={title}
+                >
+                  {children}
+                </QuillModal>
+              );
+            }
+      }
+      ModalTriggerComponent={
+        ModalTriggerComponent
+          ? ModalTriggerComponent
+          : ({ onClick, label }: ModalTriggerComponentProps) => {
+              return (
+                <div
+                  style={{
+                    height: 32,
+                    background: theme.backgroundColor,
+                    borderWidth: theme.borderWidth,
+                    borderColor: theme.borderColor,
+                    borderStyle: 'solid',
+                    outline: 'none',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    borderRadius: 6,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+                    paddingRight: 12,
+                    paddingLeft: 12,
+                    fontSize: 14,
+                    color: theme.primaryTextColor,
+                    fontWeight: theme.buttonFontWeight || 600,
+                    fontFamily: theme.fontFamily,
+                  }}
+                  onClick={onClick}
+                >
+                  {label}
+                </div>
+              );
+            }
+      }
+      TextInputComponent={
+        TextInputComponent
+          ? TextInputComponent
+          : ({ onChange, value, id }: TextInputComponentProps) => {
+              return (
+                <input
+                  style={{
+                    outline: 'none',
+                    textAlign: 'left',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    borderRadius: 6,
+                    paddingLeft: 12,
+                    paddingRight: 12,
+                    height: 38,
+                    borderWidth: theme.borderWidth,
+                    borderColor: theme.borderColor,
+                    borderStyle: 'solid',
+                    background: theme.backgroundColor,
+                    color: theme.primaryTextColor,
+                    boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+                    fontFamily: theme.fontFamily,
+                  }}
+                  id={id}
+                  onChange={onChange}
+                  value={value}
+                />
+              );
+            }
+      }
       tagStyle={tagStyle}
     />
   );
@@ -694,7 +860,7 @@ function ReportingTool({
   // USE EFFECT HOOK THAT TRANSFORMS "FILTERS ARRAY INTO AST"
   useEffect(() => {
     if (filters.length || groupBys.length || aggregations.length) {
-      let newAST = {
+      const newAST = {
         with: null,
         type: 'select',
         options: null,
@@ -1301,13 +1467,11 @@ const SortByModal = ({
   return (
     <div style={{ display: 'flex', flexDirection: 'column', marginTop: 12 }}>
       <div
-        style={
-          {
-            // position: 'relative',
-            // display: 'inline-block',
-            // textAlign: 'left',
-          }
-        }
+        style={{
+          position: 'relative',
+          display: 'inline-block',
+          textAlign: 'left',
+        }}
       >
         <div
           style={{
@@ -1318,7 +1482,7 @@ const SortByModal = ({
         >
           <ModalTriggerComponent
             onClick={() => setIsOpen(isOpen => !isOpen)}
-            label="Add sort +"
+            label="Sort"
           />
           <div
             style={{
@@ -1467,173 +1631,183 @@ const GroupByModal2 = ({
     <div style={{ display: 'flex', flexDirection: 'column' }}>
       <div
         style={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
+          position: 'relative',
+          display: 'inline-block',
+          textAlign: 'left',
         }}
       >
-        <ModalTriggerComponent
-          onClick={() => setIsOpen(isOpen => !isOpen)}
-          label="Add group by +"
-        />
         <div
           style={{
-            overflowX: 'scroll',
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
           }}
         >
-          {groupBys.map((elem, index) => (
-            <FilterTag
-              id="group-tag"
-              label={elem.tag}
-              removeFilter={removeGroupBy}
-              selectFilter={selectGroupBy}
-              setIsOpen={setIsOpen}
-              index={index}
-              theme={theme}
-              tagStyle={tagStyle}
-              key={'groupby' + index}
-            />
-          ))}
+          <ModalTriggerComponent
+            onClick={() => setIsOpen(isOpen => !isOpen)}
+            label="Group by"
+          />
+          <div
+            style={{
+              overflowX: 'scroll',
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            {groupBys.map((elem, index) => (
+              <FilterTag
+                id="group-tag"
+                label={elem.tag}
+                removeFilter={removeGroupBy}
+                selectFilter={selectGroupBy}
+                setIsOpen={setIsOpen}
+                index={index}
+                theme={theme}
+                tagStyle={tagStyle}
+                key={'groupby' + index}
+              />
+            ))}
+          </div>
         </div>
-      </div>
-      <ModalComponent
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        title="Add group by"
-      >
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <ModalComponent
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Add group by"
+        >
           <div style={{ display: 'flex', flexDirection: 'column' }}>
-            {/* select column */}
-            <div
-              style={{
-                fontSize: '14px',
-                marginBottom: '6px',
-                fontWeight: '600',
-                fontFamily: theme?.fontFamily,
-                color: theme.secondaryTextColor,
-              }}
-            >
-              Column
-            </div>
-            <SelectComponent
-              label="Column"
-              value={selectedGroupByColumn.name}
-              onChange={e => {
-                const column = selectedTable.columns.find(c => c.name === e);
-                setSelectedGroupByColumn(column);
-              }}
-              options={selectedTable.columns.map(elem => {
-                return { label: elem.name, value: elem.name };
-              })}
-            />
-          </div>
-          {groupByColumnType === 'date' && (
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                // marginLeft: 12,
-              }}
-            >
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              {/* select column */}
               <div
                 style={{
                   fontSize: '14px',
                   marginBottom: '6px',
                   fontWeight: '600',
-                  color: theme.secondaryTextColor,
                   fontFamily: theme?.fontFamily,
-                  marginTop: 20,
+                  color: theme.secondaryTextColor,
                 }}
               >
-                Bucket
+                Column
               </div>
               <SelectComponent
-                label="Bucket"
-                value={dateBucket}
+                label="Column"
+                value={selectedGroupByColumn.name}
                 onChange={e => {
-                  setDateBucket(e);
+                  const column = selectedTable.columns.find(c => c.name === e);
+                  setSelectedGroupByColumn(column);
                 }}
-                options={[
-                  { label: 'month', value: 'month' },
-                  { label: 'day', value: 'day' },
-                  { label: 'week', value: 'week' },
-                ]}
+                options={selectedTable.columns.map(elem => {
+                  return { label: elem.name, value: elem.name };
+                })}
               />
             </div>
-          )}
-          {/* Select bucket (if date) */}
+            {groupByColumnType === 'date' && (
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  // marginLeft: 12,
+                }}
+              >
+                <div
+                  style={{
+                    fontSize: '14px',
+                    marginBottom: '6px',
+                    fontWeight: '600',
+                    color: theme.secondaryTextColor,
+                    fontFamily: theme?.fontFamily,
+                    marginTop: 20,
+                  }}
+                >
+                  Bucket
+                </div>
+                <SelectComponent
+                  label="Bucket"
+                  value={dateBucket}
+                  onChange={e => {
+                    setDateBucket(e);
+                  }}
+                  options={[
+                    { label: 'month', value: 'month' },
+                    { label: 'day', value: 'day' },
+                    { label: 'week', value: 'week' },
+                  ]}
+                />
+              </div>
+            )}
+            {/* Select bucket (if date) */}
 
-          {/* Select aggregations */}
-          <div
-            style={{
-              fontSize: 14,
-              marginBottom: '6px',
-              fontWeight: '600',
-              marginTop: 20,
-              color: theme.secondaryTextColor,
-              fontFamily: theme?.fontFamily,
-            }}
-          >
-            Aggregations
-          </div>
-          {/* select column */}
-          {aggregations.map((aggregation, index) => (
-            // setAggregationType
+            {/* Select aggregations */}
             <div
-              key={'agg' + index}
               style={{
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
+                fontSize: 14,
+                marginBottom: '6px',
+                fontWeight: '600',
+                marginTop: 20,
+                color: theme.secondaryTextColor,
+                fontFamily: theme?.fontFamily,
               }}
             >
-              <SelectComponent
-                value={aggregation.column?.name}
-                onChange={e => {
-                  const column = selectedTable.columns.find(c => c.name === e);
-                  setAggregationColumn(column, index);
-                }}
-                options={selectedTable.columns.map(elem => {
-                  return { label: elem.name, value: elem.name };
-                })}
-              />
-              <div style={{ width: 16 }} />
-              <SelectComponent
-                value={aggregation.aggregationType}
-                onChange={e => {
-                  setAggregationType(e, index);
-                }}
-                options={[
-                  { label: 'sum', value: 'sum' },
-                  { label: 'average', value: 'average' },
-                  { label: 'count', value: 'count' },
-                ]}
-              />
+              Aggregations
             </div>
-          ))}
-          <div style={{ height: 20 }} />
-          <ButtonComponent
-            id="custom-button"
-            onClick={() => {
-              if (groupByIndexBeingEdited > -1) {
-                updateGroupBy(groupByIndexBeingEdited);
+            {/* select column */}
+            {aggregations.map((aggregation, index) => (
+              // setAggregationType
+              <div
+                key={'agg' + index}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                }}
+              >
+                <SelectComponent
+                  value={aggregation.column?.name}
+                  onChange={e => {
+                    const column = selectedTable.columns.find(
+                      c => c.name === e
+                    );
+                    setAggregationColumn(column, index);
+                  }}
+                  options={selectedTable.columns.map(elem => {
+                    return { label: elem.name, value: elem.name };
+                  })}
+                />
+                <div style={{ width: 16 }} />
+                <SelectComponent
+                  value={aggregation.aggregationType}
+                  onChange={e => {
+                    setAggregationType(e, index);
+                  }}
+                  options={[
+                    { label: 'sum', value: 'sum' },
+                    { label: 'average', value: 'average' },
+                    { label: 'count', value: 'count' },
+                  ]}
+                />
+              </div>
+            ))}
+            <div style={{ height: 20 }} />
+            <ButtonComponent
+              id="custom-button"
+              onClick={() => {
+                if (groupByIndexBeingEdited > -1) {
+                  updateGroupBy(groupByIndexBeingEdited);
+                  setIsOpen(false);
+                  // close();
+                  return;
+                }
+                addGroupBy();
                 setIsOpen(false);
                 // close();
-                return;
+              }}
+              label={
+                groupByIndexBeingEdited > -1 ? 'Edit group by' : 'Add group by'
               }
-              addGroupBy();
-              setIsOpen(false);
-              // close();
-            }}
-            label={
-              groupByIndexBeingEdited > -1 ? 'Edit group by' : 'Add group by'
-            }
-          />
-        </div>
-      </ModalComponent>
+            />
+          </div>
+        </ModalComponent>
+      </div>
     </div>
   );
 };
@@ -1688,7 +1862,7 @@ const AddFilterModal2 = ({
         >
           <ModalTriggerComponent
             onClick={() => setIsOpen(isOpen => !isOpen)}
-            label="Add filter +"
+            label="Filter"
           />
           <div
             style={{