# All files / src/SuperSelect/presets filterPreset.tsx

29.03% Statements 9/31
0% Branches 0/26
0% Functions 0/7
29.03% Lines 9/31

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    1042x
    2x
    2x
    2x
    2x

    2x

    2x

    2x

    2x

     import React from 'react'
    import { Popover } from '../../Popover'
    import { Typography } from '../../Typography'
    import { StyledFilterPresetPopoverContent } from '../SuperSelect.presets.styles'
    import { StyledLabel, StyledTrigger } from '../SuperSelect.styles'
    import { SuperSelectConfig, SuperSelectPresetProps } from '../SuperSelect.types'
    import { useSuperSelectContext } from '../useSuperSelect'

    const getFilterPresetProps = (props?: SuperSelectPresetProps) => {
      return props?.filter ?? {}
    }

    const getValueLabel = (
      isValueEmpty: boolean,
      value?: string,
      placeholder?: string,
      filterName?: string
    ) => {
      const prefixLabel = isValueEmpty ? placeholder || filterName : filterName
      const valueLabel = value ? `${prefixLabel ? ': ' : ''}${value}` : ''
      return `${prefixLabel}${valueLabel}`
    }

    export const filterPreset: SuperSelectConfig = {
      components: {
        Label: React.forwardRef(() => {
          const ctx = useSuperSelectContext()
          const presetProps = getFilterPresetProps(ctx.config.presetProps)
          const isValueEmpty = ['', null, undefined].includes(
            ctx.state.value as string
          )

          return (
            <StyledLabel $hoverable={false}>
              {getValueLabel(
                isValueEmpty,
                ctx.state.selectedLabel,
                ctx.config.placeholder,
                presetProps.filterName
              )}
            </StyledLabel>
          )
        }),
        TriggerContainer: React.forwardRef((props, ref) => {
          const ctx = useSuperSelectContext()

          Iif (!Array.isArray(ctx.state.value)) {
            return <StyledTrigger $block={ctx.config.block} {...props} ref={ref} />
          }

          return (
            <Popover
              placement="top"
              trigger={ctx.state.value.length > 1 ? 'hover' : 'none'}
              overlay={
                <StyledFilterPresetPopoverContent>
                  <Typography>
                    {ctx.state.value
                      .map((v) => {
                        const option = ctx.state.options.find(
                          (option) => ctx.option.value(option) === v
                        )
                        return option ? ctx.option.label(option) : ''
                      })
                      .join(', ')}
                  </Typography>
                </StyledFilterPresetPopoverContent>
              }
            >
              <StyledTrigger $block={ctx.config.block} {...props} ref={ref} />
            </Popover>
          )
        }),
        MultiValueContainer: () => {
          const ctx = useSuperSelectContext()
          const presetProps = getFilterPresetProps(ctx.config.presetProps)

          Iif (Array.isArray(ctx.state.value)) {
            const isValueEmpty = !ctx.state.value.length
            const value =
              ctx.state.value.length > 1
                ? `(${ctx.state.value.length})`
                : ctx.state.value.length === 1
                ? `${ctx.state.selectedLabel}`
                : ''

            return (
              <StyledLabel $hoverable={false}>
                {getValueLabel(
                  isValueEmpty,
                  value,
                  ctx.config.placeholder,
                  presetProps.filterName
                )}
              </StyledLabel>
            )
          }

          return <div>Value is not an array</div>
        },
      },
      selectionStyle: 'highlight',
    }