diff --git a/src/components/event/EventWindowHeader.tsx b/src/components/event/EventWindowHeader.tsx index 9ae70a70..1d26b22a 100644 --- a/src/components/event/EventWindowHeader.tsx +++ b/src/components/event/EventWindowHeader.tsx @@ -24,9 +24,9 @@ import { EventListArrowNav } from './EventListNavigation'; import useEventsDataStore from '../../hooks/useEventsDataStore'; import { isEventsStore } from '../../helpers/stores'; import { EventsIntervalInput } from './EventsIntervalInput'; -import Select from '../util/Select'; import { useBooksStore } from '../../hooks/useBooksStore'; import { SearchDirection } from '../../models/search/SearchDirection'; +import MultiSelect from '../util/MultiSelect'; function EventWindowHeader() { const eventStore = useWorkspaceEventStore(); @@ -58,15 +58,15 @@ function EventWindowHeader() { - + {partialSelect === 0 ? '0 Selected' : `${selectedValues.length} Selected`} + + +
  • + + Select All +
  • + + {options.map(option => ( +
  • handleSelect(option)}> + handleSelect(option)} + /> + {option} +
  • + ))} + + + + + ); +} + +export default MultiSelect; diff --git a/src/styles/multiselect.scss b/src/styles/multiselect.scss new file mode 100644 index 00000000..32113230 --- /dev/null +++ b/src/styles/multiselect.scss @@ -0,0 +1,107 @@ +/****************************************************************************** + * Copyright 2020-2020 Exactpro (Exactpro Systems Limited) + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + ******************************************************************************/ + +@import './common/vars'; + +.multiselect { + border: 1px solid #ccc; + padding: 0; + border-radius: 4px; + position: relative; + cursor: pointer; + user-select: none; + color: $primaryTextColor; + font-size: 14px; +} + +.dropdown-header { + border-bottom: 1px solid #eee; + background: { + image: url(../../resources/icons/arr1-down.svg); + color: transparent; + repeat: no-repeat; + size: 15px; + position-x: 95%; + position-y: 50%; + } + width: 150px; + height: 24px; + display: flex; + justify-content: flex-start; + align-items: center; + padding-left: 4px; + + &__text { + width: 130px; + height: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } +} + +.dropdown-menu { + position: absolute; + top: 102%; + left: 0; + right: 0; + z-index: 1000; + padding: 5px; + background: white; + border: 1px solid #ccc; + border-radius: 4px; + max-height: 400px; + min-width: min-content; + width: fit-content; + max-width: 600px; + overflow-y: auto; + overflow-x: hidden; + @include scrollbar(); +} + +.dropdown-list { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + align-items: stretch; +} + +.dropdown-item { + padding: 2px 5px 2px 2px; + cursor: pointer; + display: flex; + align-items: center; + border-radius: 4px; + white-space: nowrap; +} +.dropdown-item:first-child { + margin-bottom: 5px; +} + +.dropdown-item input[type='checkbox'] { + margin-right: 5px; +} + +.dropdown-item.selected { + background-color: #f0f0f0; +} + +.dropdown-item:hover { + background-color: #e9e9e9; +} +