remove propTypes

client/src/components/advancedSearch/Condition.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect, FC } from 'react';
-import PropTypes from 'prop-types';
 import {
   makeStyles,
   Theme,
@@ -215,26 +214,6 @@ const Condition: FC<ConditionProps> = props => {
   );
 };
 
-Condition.propTypes = {
-  /**
-   * Function will be called if delete button is clicked.
-   */
-  onDelete: PropTypes.func.isRequired,
-  /**
-   * Function will be called if input value is changed.
-   */
-  triggerChange: PropTypes.func.isRequired,
-  // fields: PropTypes.arrayOf(
-  //   PropTypes.shape({
-  //     name: PropTypes.string.isRequired,
-  //     type: PropTypes.oneOf(['int', 'float']).isRequired,
-  //   }).isRequired
-  // ).isRequired,
-  id: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  others: PropTypes.object,
-};
-
 Condition.defaultProps = {
   onDelete: () => {},
   triggerChange: () => {},

client/src/components/advancedSearch/ConditionGroup.tsx

@@ -1,5 +1,4 @@
 import React, { useState, FC } from 'react';
-import PropTypes from 'prop-types';
 import { makeStyles, Theme, createStyles, Button } from '@material-ui/core';
 import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 import ConditionItem from './Condition';
@@ -192,16 +191,6 @@ const ConditionGroup = React.forwardRef((props: ConditionGroupProps, ref) => {
   );
 });
 
-ConditionGroup.propTypes = {
-  others: PropTypes.object,
-  // fields: PropTypes.arrayOf(PropTypes.shape({
-  //   name: PropTypes.string.isRequired,
-  //   type: PropTypes.oneOf(['int', 'float']).isRequired,
-  // }).isRequired).isRequired,
-  handleConditions: PropTypes.object.isRequired,
-  conditions: PropTypes.array.isRequired,
-};
-
 ConditionGroup.defaultProps = {
   fields: [],
 };

client/src/components/advancedSearch/CopyButton.tsx

@@ -1,5 +1,4 @@
 import React, { useState, FC } from 'react';
-import PropTypes from 'prop-types';
 import {
   makeStyles,
   Theme,
@@ -76,14 +75,6 @@ const CopyButton: FC<CopyButtonProps> = props => {
   );
 };
 
-CopyButton.propTypes = {
-  className: PropTypes.string,
-  icon: PropTypes.element,
-  label: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  others: PropTypes.object,
-};
-
 CopyButton.defaultProps = {
   label: 'copy button',
   value: '',

client/src/components/advancedSearch/Dialog.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
 import {
   makeStyles,
   Theme,
@@ -16,6 +15,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import CachedIcon from '@material-ui/icons/Cached';
 import ConditionGroup from './ConditionGroup';
 import CopyBtn from './CopyButton';
+import DialogTemplate from '../customDialog/DialogTemplate';
 
 interface DialogProps {
   others?: object;
@@ -64,7 +64,7 @@ const AdvancedDialog = React.forwardRef((props: DialogProps, ref) => {
 
   return (
     <>
-      <Dialog
+      {/* <Dialog
         onClose={onClose}
         aria-labelledby="customized-dialog-title"
         open={open}
@@ -92,7 +92,9 @@ const AdvancedDialog = React.forwardRef((props: DialogProps, ref) => {
             } testcopy`}
           >
             {`${isLegal ? filterExpression : 'Filter Expression'}`}
-            {isLegal && (<CopyBtn label="copy expression" value={filterExpression} />)}
+            {isLegal && (
+              <CopyBtn label="copy expression" value={filterExpression} />
+            )}
           </div>
           <div className={classes.expWrapper}>
             <ConditionGroup
@@ -133,25 +135,51 @@ const AdvancedDialog = React.forwardRef((props: DialogProps, ref) => {
             </Button>
           </div>
         </DialogActions>
-      </Dialog>
+      </Dialog> */}
+      <DialogTemplate
+        title={title}
+        handleClose={onClose}
+        showCloseIcon
+        handleConfirm={onSubmit}
+        confirmLabel="Apply Filters"
+        confirmDisabled={!isLegal}
+        handleCancel={onCancel}
+        cancelLabel="Cancel"
+        leftActions={
+          <Button
+            onClick={onReset}
+            color="primary"
+            className={classes.resetBtn}
+            size="small"
+          >
+            <CachedIcon />
+            Reset
+          </Button>
+        }
+      >
+        <div
+          className={`${classes.expResult} ${
+            !isLegal && 'disable-exp'
+          } testcopy`}
+        >
+          {`${isLegal ? filterExpression : 'Filter Expression'}`}
+          {isLegal && (
+            <CopyBtn label="copy expression" value={filterExpression} />
+          )}
+        </div>
+        <div className={classes.expWrapper}>
+          <ConditionGroup
+            // ref={childRef}
+            fields={fields}
+            handleConditions={handleConditions}
+            conditions={flatConditions}
+          />
+        </div>
+      </DialogTemplate>
     </>
   );
 });
 
-AdvancedDialog.propTypes = {
-  others: PropTypes.object,
-  open: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  onReset: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  handleConditions: PropTypes.object.isRequired,
-  conditions: PropTypes.array.isRequired,
-  isLegal: PropTypes.bool.isRequired,
-  expression: PropTypes.string.isRequired,
-};
-
 AdvancedDialog.defaultProps = {
   open: false,
   onClose: () => {},

client/src/components/advancedSearch/Filter.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import {
   makeStyles,
   Theme,
@@ -348,20 +347,6 @@ const Filter = React.forwardRef(function Filter(props: FilterProps, ref) {
   );
 });
 
-Filter.propTypes = {
-  className: PropTypes.string,
-  /**
-   * Specify the title content
-   */
-  title: PropTypes.string.isRequired,
-  /**
-   * Specify whether the title should be visiable
-   */
-  showTitle: PropTypes.bool,
-  onSubmit: PropTypes.func.isRequired,
-  tooltipPlacement: PropTypes.oneOf(['left', 'right', 'bottom', 'top']),
-};
-
 Filter.defaultProps = {
   className: '',
   showTitle: true,