diff --git a/app/vmui/packages/vmui/src/components/Main/Select/MultipleSelectedValue/MultipleSelectedValue.tsx b/app/vmui/packages/vmui/src/components/Main/Select/MultipleSelectedValue/MultipleSelectedValue.tsx new file mode 100644 index 0000000000..50bb6f8b8f --- /dev/null +++ b/app/vmui/packages/vmui/src/components/Main/Select/MultipleSelectedValue/MultipleSelectedValue.tsx @@ -0,0 +1,42 @@ +import React, { FC } from "preact/compat"; +import useDeviceDetect from "../../../../hooks/useDeviceDetect"; +import { CloseIcon } from "../../Icons"; +import { MouseEvent } from "react"; + +interface MultipleSelectedValueProps { + values: string[] + onRemoveItem: (val: string) => void +} + +const MultipleSelectedValue: FC = ({ values, onRemoveItem }) => { + const { isMobile } = useDeviceDetect(); + + const createHandleClick = (value: string) => (e: MouseEvent) => { + onRemoveItem(value); + e.stopPropagation(); + }; + + if (isMobile) { + return ( + + selected {values.length} + + ); + } + + return <> + {values.map(item => ( +
+ {item} +
+ +
+
+ ))} + ; +}; + +export default MultipleSelectedValue; diff --git a/app/vmui/packages/vmui/src/components/Main/Select/Select.tsx b/app/vmui/packages/vmui/src/components/Main/Select/Select.tsx index f0c45cacd3..dba043960e 100644 --- a/app/vmui/packages/vmui/src/components/Main/Select/Select.tsx +++ b/app/vmui/packages/vmui/src/components/Main/Select/Select.tsx @@ -6,6 +6,7 @@ import Autocomplete from "../Autocomplete/Autocomplete"; import { useAppState } from "../../../state/common/StateContext"; import "./style.scss"; import useDeviceDetect from "../../../hooks/useDeviceDetect"; +import MultipleSelectedValue from "./MultipleSelectedValue/MultipleSelectedValue"; interface SelectProps { value: string | string[] @@ -39,8 +40,9 @@ const Select: FC = ({ const inputRef = useRef(null); - const isMultiple = useMemo(() => Array.isArray(value), [value]); - const selectedValues = useMemo(() => Array.isArray(value) ? value : undefined, [isMultiple, value]); + const isMultiple = Array.isArray(value); + const selectedValues = Array.isArray(value) ? value : undefined; + const hideInput = isMobile && isMultiple && !!selectedValues?.length; const textFieldValue = useMemo(() => { if (openList) return search; @@ -124,23 +126,13 @@ const Select: FC = ({ ref={autocompleteAnchorEl} >
- {!isMobile && selectedValues && selectedValues.map(item => ( -
- {item} -
- -
-
- ))} - {isMobile && !!selectedValues?.length && ( - - selected {selectedValues.length} - + {!!selectedValues?.length && ( + )} - {!isMobile || (isMobile && (!selectedValues || !selectedValues?.length)) && ( + {!hideInput && (