@campxdev/shared 1.4.15 → 1.4.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.4.15",
+  "version": "1.4.16",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/FilterComponents/FilterButton.tsx

@@ -0,0 +1,39 @@
+import { Tune } from '@mui/icons-material'
+import { Box, styled } from '@mui/material'
+
+const StyledButtonWrapper = styled(Box)<{ size: 'regular' | 'large' }>(
+  ({ theme, size }) => ({
+    width: size === 'regular' ? '40px' : '50px',
+    height: size === 'regular' ? '40px' : '50px',
+    border: theme.borders.grayLight,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '10px',
+    cursor: 'pointer',
+    '&:active': {
+      border: `1px solid ${theme.palette.primary.main}`,
+    },
+    transition: 'border 0.1s ease-in-out',
+  }),
+)
+
+export default function FilterButton({
+  onClick,
+  size = 'large',
+  ...props
+}: {
+  onClick: (e: any) => void
+  size?: 'regular' | 'large'
+}) {
+  const handleClick = (e) => {
+    e.stopPropagation()
+    if (!onClick) return
+    onClick(e)
+  }
+  return (
+    <StyledButtonWrapper size={size} {...props} onClick={handleClick}>
+      <Tune />
+    </StyledButtonWrapper>
+  )
+}

package/src/components/FilterComponents/SearchBar.tsx

@@ -0,0 +1,40 @@
+import { Search } from '@mui/icons-material'
+import { InputAdornment } from '@mui/material'
+import _ from 'lodash'
+import { useMemo, useState } from 'react'
+import { TextField } from '../Input'
+import { ITextFieldProps } from '../Input/TextField'
+
+interface SearchBarProps {
+  onSearch: (v: string) => void
+  textFieldProps?: ITextFieldProps
+}
+
+export default function SearchBar({ onSearch, ...restProps }: SearchBarProps) {
+  const [, setSearch] = useState('')
+
+  const debouncedChangeHandler = useMemo(
+    () =>
+      _.debounce((e) => {
+        setSearch(e.target.value)
+        onSearch(e.target.value)
+      }, 300),
+    [],
+  )
+
+  return (
+    <TextField
+      label="Search"
+      placeholder="Search"
+      onChange={debouncedChangeHandler}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <Search />
+          </InputAdornment>
+        ),
+      }}
+      {...restProps.textFieldProps}
+    />
+  )
+}

package/src/components/Input/TextField.tsx

@@ -18,7 +18,7 @@ const StyledTextField = styled(MuiTextField)(({ theme }) => ({
   },
 }))
 
-type TextFieldProps = {
+export type ITextFieldProps = {
   containerProps?: BoxProps
 } & MuiTextFieldProps
 
@@ -30,7 +30,7 @@ export default function TextField({
   required = false,
   containerProps,
   ...rest
-}: TextFieldProps) {
+}: ITextFieldProps) {
   return (
     <Box width="100%" {...containerProps}>
       <FieldLabel label={label} required={required} name={name} />

package/src/components/ModalButtons/DialogButton.tsx

@@ -71,7 +71,7 @@ export default function DialogButton({
         fullWidth
         onClose={onClose}
         open={open}
-        transitionDuration={100}
+        transitionDuration={140}
         TransitionComponent={Transition}
         sx={{
           '& .MuiBackdrop-root': {

package/src/components/ModalButtons/DrawerButton.tsx

@@ -1,6 +1,5 @@
 import { Close } from '@mui/icons-material'
 import {
-  alpha,
   Box,
   ButtonProps,
   DialogTitle,
@@ -54,7 +53,7 @@ export default function DrawerButton({
       {anchor({ open: onOpen })}
       <Drawer
         anchor="right"
-        elevation={10}
+        elevation={2}
         onClose={onClose}
         open={open}
         PaperProps={{
@@ -70,7 +69,7 @@ export default function DrawerButton({
             backgroundColor: 'rgba(0, 0, 0, 0.4)',
           },
         }}
-        transitionDuration={200}
+        transitionDuration={140}
       >
         <StyledDrawerHeader>
           <DialogTitle>{title}</DialogTitle>

package/src/components/index.ts

@@ -4,7 +4,7 @@ import ImageUpload from './ImageUpload'
 import FloatingContainer from './FloatingContainer'
 import TabsContainer from './Tabs/TabsContainer'
 import { StyledTableContainer } from './StyledTableContainer'
-import SearchBar from './SearchBar'
+import SearchBar from './FilterComponents/SearchBar'
 import { DrawerButton, DialogButton } from './ModalButtons'
 import DetailsGrid from './DetailsGrid'
 import AppHeader from './Layout/Header'

package/src/components/SearchBar.tsx

@@ -1,61 +0,0 @@
-import { Search, Tune } from '@mui/icons-material'
-import { Box, InputAdornment, styled } from '@mui/material'
-import { useMemo, useState } from 'react'
-import _ from 'lodash'
-import { TextField } from './Input'
-
-interface SearchBarProps {
-  onSearch: (v: string) => void
-  filters?: {
-    onClick: () => void
-  }
-}
-
-const StyledButtonWrapper = styled(Box)(({ theme }) => ({
-  width: '52px',
-  border: theme.borders.grayLight,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '10px',
-  cursor: 'pointer',
-  '&:active': {
-    border: `1px solid ${theme.palette.primary.main}`,
-  },
-  transition: 'border 0.1s ease-in-out',
-}))
-
-export default function SearchBar({ onSearch, filters }: SearchBarProps) {
-  const [, setSearch] = useState('')
-
-  const debouncedChangeHandler = useMemo(
-    () =>
-      _.debounce((e) => {
-        setSearch(e.target.value)
-        setSearch(e.target.value)
-      }, 300),
-    [],
-  )
-
-  return (
-    <Box sx={{ display: 'flex', gap: '20px' }}>
-      <TextField
-        sx={{ maxWidth: '600px' }}
-        label="Search"
-        onChange={debouncedChangeHandler}
-        InputProps={{
-          endAdornment: (
-            <InputAdornment position="end">
-              <Search />
-            </InputAdornment>
-          ),
-        }}
-      />
-      {filters && (
-        <StyledButtonWrapper onClick={filters?.onClick}>
-          <Tune />
-        </StyledButtonWrapper>
-      )}
-    </Box>
-  )
-}