Skip to content

Commit

Permalink
allow editing the item of already existing restriction entries
Browse files Browse the repository at this point in the history
  • Loading branch information
@matthias-luger
matthias-luger committed Apr 23, 2024
1 parent d4166cb commit ac49433
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 33 deletions.
4 changes: 4 additions & 0 deletions components/Flipper/FlipRestrictionList/FlipRestrictionList.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@
gap: 5px;
}

.restriction {
max-height: 100%;
}

@media all and (max-width: 1024px) {
.restriction {
width: 100%;
Expand Down
82 changes: 53 additions & 29 deletions components/Flipper/FlipRestrictionList/FlipRestrictionList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import Image from 'next/image'
import AutoSizer from 'react-virtualized-auto-sizer'
import { VariableSizeGrid as Grid } from 'react-window'
import { v4 as generateUUID } from 'uuid'
import ApiSearchField from '../../Search/ApiSearchField'

interface Props {
onRestrictionsChange(restrictions: FlipRestriction[], type: 'whitelist' | 'blacklist'): void
Expand Down Expand Up @@ -538,36 +539,59 @@ function FlipRestrictionList(props: Props) {
{restriction.type.toUpperCase()}
</Badge>
)}
{restriction.item ? (
<div className="ellipse" style={{ width: '-webkit-fill-available', float: 'left' }}>
<Image
crossOrigin="anonymous"
src={restriction.item?.iconUrl || ''}
height="24"
width="24"
alt=""
style={{ marginRight: '5px' }}
loading="lazy"
<div style={{ width: '-webkit-fill-available', float: 'left' }}>
{restriction.isEdited ? (
<ApiSearchField
multiple={false}
className={styles.multiSearch}
onChange={items => {
console.log(items)
let newItem: Item | undefined =
items && items.length > 0
? {
tag: items[0].id,
name: items[0].dataItem.name,
iconUrl: items[0].dataItem.iconUrl
}
: undefined
let newRestrictions = [...restrictions]
newRestrictions[restriction.originalIndex!].item = newItem
setRestrictions(newRestrictions)
recalculateListHeight()
}}
searchFunction={api.itemSearch}
defaultSelected={
restriction.item
? [
{
dataItem: {
iconUrl: restriction.item.iconUrl || '',
name: restriction.item.name || '-'
},
id: restriction.item.tag || '',
label: restriction.item.name || '-'
} as unknown as SearchResultItem
]
: undefined
}
/>
<span style={getStyleForTier(restriction.item?.tier)}>{restriction.item?.name}</span>
{restriction.isEdited ? (
<Tooltip
type="hover"
content={
<RemoveIcon
style={{ cursor: 'pointer' }}
onClick={() => {
removeItemOfRestriction(restrictions, restriction.originalIndex!)
}}
/>
}
tooltipContent={<p>Remove item</p>}
/>
) : null}
</div>
) : (
<div className="ellipse" style={{ width: '-webkit-fill-available', float: 'left' }}></div>
)}
) : (
restriction.item && (
<>
<Image
crossOrigin="anonymous"
src={restriction.item?.iconUrl || ''}
height="24"
width="24"
alt=""
style={{ marginRight: '5px' }}
loading="lazy"
/>
<span style={getStyleForTier(restriction.item?.tier)}>{restriction.item?.name}</span>
</>
)
)}
</div>
<div style={{ display: 'flex' }}>
{restriction.isEdited ? (
<div
Expand Down
5 changes: 3 additions & 2 deletions components/Flipper/FlipRestrictionList/NewRestriction/NewRestriction.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import api from '../../../../api/ApiHelper'
import ItemFilter from '../../../ItemFilter/ItemFilter'
import TagSelect from '../TagSelect/TagSelect'
import styles from './NewRestriction.module.css'
import { MultiSearch } from '../../../Search/MultiSearch'
import ApiSearchField from '../../../Search/ApiSearchField'
import { CopyButton } from '../../../CopyButton/CopyButton'

interface Props {
Expand Down Expand Up @@ -107,7 +107,8 @@ function NewRestriction(props: Props) {
</ToggleButton>
</ToggleButtonGroup>
<div className={styles.newRestrictionSearchbarContainer}>
<MultiSearch
<ApiSearchField
multiple
className={styles.multiSearch}
onChange={items => {
setCreateState({
Expand Down
7 changes: 5 additions & 2 deletions components/Search/MultiSearch.tsx → components/Search/ApiSearchField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@ interface Props {
defaultValue?: string
searchFunction?(searchText: string): Promise<SearchResultItem[]>
selected?: SearchResultItem[]
defaultSelected?: SearchResultItem[]
className?: string
multiple: boolean
}

export let MultiSearch = forwardRef((props: Props, ref: Ref<Typeahead>) => {
export default forwardRef((props: Props, ref: Ref<Typeahead>) => {
let [uuid] = useState(generateUUID())
let [results, setResults] = useState<SearchResultItem[]>([])
let [isLoading, setIsLoading] = useState(false)
Expand Down Expand Up @@ -72,6 +74,7 @@ export let MultiSearch = forwardRef((props: Props, ref: Ref<Typeahead>) => {
</>
)
}}
defaultSelected={props.defaultSelected}
minLength={1}
onSearch={handleSearch}
defaultInputValue={props.defaultValue}
Expand All @@ -80,7 +83,7 @@ export let MultiSearch = forwardRef((props: Props, ref: Ref<Typeahead>) => {
placeholder={props.placeholder || 'Search item...'}
onChange={_onChange}
ref={ref}
multiple={true}
multiple={props.multiple}
/>
)
})

0 comments on commit ac49433

Please sign in to comment.