Merge pull request #557 from captain-Akshay/master

feat(button): action button

Author: aabidsofi19

src/base/Grow/Grow.tsx

@@ -0,0 +1,5 @@
+import { Grow as MuiGrow, GrowProps as MuiGrowProps } from '@mui/material';
+
+export function Grow(props: MuiGrowProps): JSX.Element {
+  return <MuiGrow {...props} />;
+}

src/base/Grow/index.tsx

@@ -0,0 +1 @@
+export { Grow } from './Grow';

src/base/index.tsx

@@ -31,6 +31,7 @@ export * from './FormControl';
 export * from './FormControlLabel';
 export * from './FormGroup';
 export * from './Grid';
+export * from './Grow';
 export * from './IconButton';
 export * from './Input';
 export * from './InputLabel';

src/custom/ActionButton/ActionButton.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import {
+  Button,
+  ButtonGroup,
+  ClickAwayListener,
+  MenuItem,
+  MenuList,
+  Paper,
+  Popper
+} from '../../base';
+import { DropDownIcon } from '../../icons';
+interface Option {
+  icon: React.ReactNode;
+  label: string;
+  onClick: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, index: number) => void;
+}
+
+interface ActionButtonProps {
+  defaultActionClick: () => void;
+  options: Option[];
+  label: string;
+}
+
+export default function ActionButton({
+  defaultActionClick,
+  options,
+  label
+}: ActionButtonProps): JSX.Element {
+  const [open, setOpen] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const handleMenuItemClick = () => {
+    setOpen(false);
+  };
+
+  const handleToggle = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    setOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      <ButtonGroup
+        variant="contained"
+        style={{ boxShadow: 'none' }}
+        aria-label="Button group with a nested menu"
+      >
+        <Button onClick={defaultActionClick} variant="contained">
+          {label}
+        </Button>
+        <Button size="small" onClick={handleToggle} variant="contained">
+          <DropDownIcon />
+        </Button>
+      </ButtonGroup>
+      <Popper
+        sx={{
+          zIndex: 1
+        }}
+        open={open}
+        anchorEl={anchorEl}
+        role={undefined}
+      >
+        <Paper>
+          <ClickAwayListener onClickAway={handleClose}>
+            <MenuList id="split-button-menu" autoFocusItem>
+              {options.map((option, index) => (
+                <MenuItem
+                  key={index}
+                  onClick={(event) => {
+                    handleMenuItemClick();
+                    option.onClick(event, index);
+                  }}
+                >
+                  <div style={{ marginRight: '1rem' }}>{option.icon}</div>
+                  {option.label}
+                </MenuItem>
+              ))}
+            </MenuList>
+          </ClickAwayListener>
+        </Paper>
+      </Popper>
+    </React.Fragment>
+  );
+}

src/custom/ActionButton/index.tsx

@@ -0,0 +1,3 @@
+import ActionButton from './ActionButton';
+
+export { ActionButton };

src/custom/Feedback/FeedbackButton.tsx

@@ -1,5 +1,5 @@
 import Typography from '@mui/material/Typography';
-import React, { CSSProperties, useRef, useState } from 'react';
+import React, { CSSProperties, useState } from 'react';
 import {
   CalenderIcon,
   CloseIcon,
@@ -107,21 +107,23 @@ interface FeedbackComponentProps {
     | 'right-top'
     | 'right-middle'
     | 'right-bottom';
+  defaultMessage?: string;
+  defaultOpen?: boolean;
 }
 
 const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
   onSubmit,
   containerStyles,
   feedbackOptionStyles,
-  renderPosition
+  renderPosition,
+  defaultMessage = undefined,
+  defaultOpen = false
 }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
   const [submitted, setSubmitted] = useState<boolean>(false);
-  const [category, setCategory] = useState<FeedbackDataItem | undefined>();
-  const [messageValue, setMessageValue] = useState<string | undefined>();
-  const feedbackTextRef = useRef<HTMLTextAreaElement>(null);
-  const [isChecked, setIsChecked] = useState<boolean>(false);
-
+  const [category, setCategory] = useState<FeedbackDataItem | undefined>(feedbackData[0]);
+  const [messageValue, setMessageValue] = useState<string | undefined>(defaultMessage);
+  const [isChecked, setIsChecked] = useState<boolean>(!!defaultMessage);
   const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setIsChecked(event.target.checked);
   };
@@ -229,7 +231,6 @@ const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
                         onChange={(e) => {
                           setMessageValue(e.target.value);
                         }}
-                        ref={feedbackTextRef}
                         required
                         placeholder={category.placeholder}
                         rows={5}

src/custom/index.tsx

@@ -1,3 +1,4 @@
+import { ActionButton } from './ActionButton';
 import CatalogFilter, { CatalogFilterProps } from './CatalogFilter/CatalogFilter';
 import { ConnectionChip } from './ConnectionChip';
 import {
@@ -34,6 +35,7 @@ import UniversalFilter, { UniversalFilterProps } from './UniversalFilter';
 export { StyledChartDialog } from './ChartDialog';
 export { StyledSearchBar } from './StyledSearchBar';
 export {
+  ActionButton,
   CatalogFilter,
   ConnectionChip,
   CustomColumnVisibilityControl,

src/icons/DropDownIcon/DropDownIcon.tsx

@@ -0,0 +1,23 @@
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const DropDownIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  ...props
+}: IconProps): JSX.Element => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="-6.5 0 32 32"
+      width={width}
+      height={height}
+      fill={props.fill || 'currentColor'}
+      {...props}
+    >
+      <path d="M18.813 11.406l-7.906 9.906c-0.75 0.906-1.906 0.906-2.625 0l-7.906-9.906c-0.75-0.938-0.375-1.656 0.781-1.656h16.875c1.188 0 1.531 0.719 0.781 1.656z"></path>
+    </svg>
+  );
+};
+
+export default DropDownIcon;

src/icons/DropDownIcon/index.ts

@@ -0,0 +1 @@
+export { default as DropDownIcon } from './DropDownIcon';

src/icons/index.ts

@@ -22,6 +22,7 @@ export * from './Delete';
 export * from './Deploy';
 export * from './Designer';
 export * from './Detail';
+export * from './DropDownIcon';
 export * from './Error';
 export * from './Favorite';
 export * from './Filter';