diff --git a/src/components/1-atoms/Autocomplete.jsx b/src/components/1-atoms/Autocomplete.jsx index 063b3fe..fbece12 100644 --- a/src/components/1-atoms/Autocomplete.jsx +++ b/src/components/1-atoms/Autocomplete.jsx @@ -28,7 +28,8 @@ const Autocomplete = (props) => { isMultiple = false, ignoreReset = false, label, - fullWidth, + fixedWidth = false, + ...rest } = props; const matchMultipleOptions = useCallback( @@ -66,17 +67,7 @@ const Autocomplete = (props) => { ); const classes = useStyles({ - labelLength: - inputValue.length + - (isMultiple - ? selectedOption.reduce( - (accLength, currentValue) => - accLength + currentValue.label.length, - 0 - ) - : 0), - selectedOptions: isMultiple ? value.length : 0, - fullWidth: fullWidth, + inputLength: fixedWidth ? undefined : inputValue.length, }); const [updateFlag, setUpdateFlag] = useState(false); @@ -184,6 +175,7 @@ const Autocomplete = (props) => { style={{ width: 'fit-content' }} /> )} + {...rest} /> ); }; @@ -204,7 +196,7 @@ Autocomplete.propTypes = { error: PropTypes.bool, ignoreReset: PropTypes.bool, label: PropTypes.string, - fullWidth: PropTypes.bool, + fixedWidth: PropTypes.bool, }; export default Autocomplete; diff --git a/src/components/1-atoms/AutocompleteStyles.js b/src/components/1-atoms/AutocompleteStyles.js index a01e6ef..91114e9 100644 --- a/src/components/1-atoms/AutocompleteStyles.js +++ b/src/components/1-atoms/AutocompleteStyles.js @@ -7,16 +7,13 @@ import makeStyles from '@mui/styles/makeStyles'; -const FONT_SIZE = '0.875em'; +const FONT_SIZE = 0.875; // em const MINIMUM_WIDTH = '150px'; export const useStyles = makeStyles((theme) => ({ - inputWidth: ({ labelLength, selectedOptions, fullWidth }) => { - return { - width: fullWidth - ? '100%' - : `max(${MINIMUM_WIDTH},calc(${FONT_SIZE} * ${labelLength} + 80px * ${selectedOptions} + ${ - selectedOptions !== 0 ? 1 : 0 - } * 50px))`, - }; - }, + inputWidth: ({ inputLength }) => ({ + minWidth: MINIMUM_WIDTH, + width: inputLength + ? `calc(${inputLength} * ${FONT_SIZE} * 16px)` + : 'auto', + }), })); diff --git a/src/components/1-atoms/buttons/index.jsx b/src/components/1-atoms/buttons/index.jsx index 3c66f26..aeb99bb 100644 --- a/src/components/1-atoms/buttons/index.jsx +++ b/src/components/1-atoms/buttons/index.jsx @@ -17,6 +17,7 @@ import LoopIcon from '@mui/icons-material/Loop'; import RestartAltIcon from '@mui/icons-material/RestartAlt'; import DoneIcon from '@mui/icons-material/Done'; import DoneAllIcon from '@mui/icons-material/DoneAll'; +import SaveAsIcon from '@mui/icons-material/SaveAs'; export const AddIconButton = (props) => ( } {...props} /> @@ -55,3 +56,6 @@ export const ApplyOneButton = (props) => ( export const ApplyAllButton = (props) => ( } {...props} /> ); +export const EditButton = (props) => ( + } {...props} /> +); diff --git a/src/components/2-molecules/AttachDialog.jsx b/src/components/2-molecules/AttachDialog.jsx index 1f67290..4ab8f08 100644 --- a/src/components/2-molecules/AttachDialog.jsx +++ b/src/components/2-molecules/AttachDialog.jsx @@ -67,6 +67,7 @@ const AttachDialog = (props) => { }))} value={networkId} onChange={setNetworkId} + fixedWidth /> @@ -97,6 +98,7 @@ const AttachDialog = (props) => {