react-select#OptionsType TypeScript Examples

The following examples show how to use react-select#OptionsType. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: utils.ts    From utopia with MIT License 7 votes vote down vote up 
/**
 * A type guard for React Select's onChange values, which can either be a value
 * or an array of values.
 */
export function isOptionsType<T extends OptionTypeBase>(
  value: ValueType<T>,
): value is OptionsType<T> {
  return Array.isArray(value)
}
Example #2
Source File: flex-container-controls.tsx    From utopia with MIT License 6 votes vote down vote up 
FlexWrapOptions: OptionsType<SelectOption> = [
  {
    value: FlexWrap.NoWrap,
    label: 'No Wrap',
  },
  {
    value: FlexWrap.Wrap,
    label: 'Wrap',
  },
  {
    value: FlexWrap.WrapReverse,
    label: 'Wrap Reverse',
  },
]
Example #3
Source File: radius-row.tsx    From utopia with MIT License 6 votes vote down vote up 
radiusTypeOptions: OptionsType<SelectOption> = [
  {
    value: 'all',
    label: 'Radius',
  },
  {
    value: 'individual',
    label: 'Corners',
  },
]
Example #4
Source File: popup-list.tsx    From utopia with MIT License 6 votes vote down vote up 
getIndexOfValue = (
  value: ValueType<SelectOption>,
  options: OptionsType<SelectOption>,
): number => {
  const firstValue = getValueOfValueType(value)

  let allOptions: SelectOption[] = []
  options.forEach((option) => {
    allOptions.push(option)
    if (option.options != null) {
      allOptions.push(...option.options)
    }
  })

  const index = allOptions.findIndex((option) => option.value === firstValue)
  return Math.max(0, index)
}
Example #5
Source File: component-section.tsx    From utopia with MIT License 5 votes vote down vote up 
RowForUnionControl = React.memo((props: RowForUnionControlProps) => {
  const { propPath, controlDescription } = props
  const title = labelForControl(propPath, controlDescription)

  const suitableControl = useControlForUnionControl(propPath, controlDescription)
  const [controlToUse, setControlToUse] = React.useState(suitableControl)

  const labelOptions: OptionsType<SelectOption> = controlDescription.controls.map((control) => {
    const label = control.label ?? control.control
    return {
      value: control,
      label: label,
    }
  })

  const onLabelChangeValue = React.useCallback(
    (option: SelectOption) => {
      if (option.value !== controlToUse) {
        setControlToUse(option.value)
      }
    },
    [controlToUse, setControlToUse],
  )

  const simpleControlStyles = getControlStyles('simple')

  const label = React.useMemo(
    () => (
      <PopupList
        value={{
          value: controlToUse,
          label: title,
        }}
        options={labelOptions}
        onSubmitValue={onLabelChangeValue}
        containerMode='showBorderOnHover'
        controlStyles={simpleControlStyles}
        style={{
          maxWidth: '100%',
          overflow: 'hidden',
        }}
      />
    ),
    [controlToUse, labelOptions, onLabelChangeValue, simpleControlStyles, title],
  )

  const labelAsRenderProp = React.useCallback(() => label, [label])

  if (controlToUse == null) {
    return null
  } else if (isBaseControlDescription(controlToUse)) {
    return (
      <RowForBaseControl
        {...props}
        label={labelAsRenderProp}
        controlDescription={controlToUse}
        focusOnMount={false}
      />
    )
  } else {
    return (
      <React.Fragment>
        {label}
        <RowForControl {...props} controlDescription={controlToUse} focusOnMount={false} />
      </React.Fragment>
    )
  }
})
Example #6
Source File: className-subsection.tsx    From utopia with MIT License 5 votes vote down vote up 
function isOptionsType<T>(valueType: T | OptionsType<T>): valueType is OptionsType<T> {
  return Array.isArray(valueType)
}
Example #7
Source File: font-variant-select.tsx    From utopia with MIT License 5 votes vote down vote up 
FontVariantSelect = React.memo(() => {
  const { value, controlStyles, onUnsetValues, useSubmitValueFactory } = useInspectorInfo(
    weightAndStylePaths,
    identity,
    identity,
    stylePropPathMappingFn,
  )

  const { value: fontFamilyValue } = useInspectorStyleInfo('fontFamily')
  const primaryFont = fontFamilyValue[0]

  const fontWeightAndStyleContextMenuItems = utils.stripNulls([
    controlStyles.unsettable ? addOnUnsetValues(['fontWeight', 'fontStyle'], onUnsetValues) : null,
  ])
  const fontWeightAndStyleOptions: OptionsType<FontWeightAndStyleSelectOption> =
    React.useMemo(() => {
      const variantsToMap =
        googleFontsList.find((font) => font.name === primaryFont)?.variants ??
        defaultWebFontWeightsAndStyles
      return variantsToMap.map((variant) => {
        return {
          value: webFontFamilyVariant(primaryFont, variant),
          label: prettyNameForFontVariant(variant),
          style: { fontWeight: variant.webFontWeight, fontStyle: variant.webFontStyle },
        }
      })
    }, [primaryFont])

  const { useSubmitValueFactory: useResourcesSubmitValueFactory } = useExternalResources()
  const [onSubmitNewFontVariantToResources] =
    useResourcesSubmitValueFactory(updateAddNewFontVariant)
  const [onSubmitFontWeightAndStyle] = useSubmitValueFactory(updateFontWeightAndStyle)
  const onSubmitValue = React.useCallback(
    (newValue: FontWeightAndStyleSelectOption) => {
      onSubmitNewFontVariantToResources(newValue)
      onSubmitFontWeightAndStyle(newValue)
    },
    [onSubmitNewFontVariantToResources, onSubmitFontWeightAndStyle],
  )

  const selectValue = fontWeightAndStyleOptions.find(
    (v) =>
      v.value.fontVariant.webFontStyle === value.fontStyle &&
      v.value.fontVariant.webFontWeight === value.fontWeight,
  )

  return (
    <InspectorContextMenuWrapper
      id='fontWeightAndStyle-context-menu'
      items={fontWeightAndStyleContextMenuItems}
      data={null}
      style={{ gridColumn: '1' }}
    >
      <Tooltip title='Font Weight and Style' placement='top'>
        <PopupList
          id={'fontWeightAndStyle'}
          onSubmitValue={onSubmitValue}
          value={selectValue}
          options={fontWeightAndStyleOptions}
          controlStyles={controlStyles}
        />
      </Tooltip>
    </InspectorContextMenuWrapper>
  )
})
Example #8
Source File: popup-list.tsx    From utopia with MIT License 4 votes vote down vote up 
getPortalPosition = (
  referenceTop: number,
  options: OptionsType<SelectOption>,
  value: ValueType<SelectOption>,
  scrollIndexOffset: number,
): {
  menuTop: number
  menuHeight: number
  scrollTop: number
  croppedTop: boolean
  croppedBottom: boolean
} => {
  const optionsLength = options.reduce((working, o) => {
    if (o.options == null) {
      return working + 1
    } else {
      return working + 1 + o.options.length
    }
  }, 0)
  const windowHeight = window.innerHeight
  const indexOfValue = getIndexOfValue(value, options)
  const centredIndex = indexOfValue + scrollIndexOffset

  const windowHeightAboveReference = referenceTop - WindowEdgePadding
  const windowHeightBelowReference =
    windowHeight - (windowHeightAboveReference + OptionHeight) - WindowEdgePadding

  const optionPaddingElements = 1
  const optionPaddingAboveSelected = OptionHeight * Math.min(optionPaddingElements, optionsLength)
  const optionPaddingBelowSelected =
    OptionHeight * Math.min(optionPaddingElements, optionsLength - centredIndex)

  if (
    windowHeightAboveReference > optionPaddingAboveSelected &&
    windowHeightBelowReference > optionPaddingBelowSelected
  ) {
    const numberCroppedTop = calculateOptionsToCutOff(
      optionsLength,
      windowHeightAboveReference,
      optionsLength - centredIndex - 1,
    )
    const howManyElementsToShowAboveSelected = centredIndex - numberCroppedTop
    const numberCroppedBottom = calculateOptionsToCutOff(
      optionsLength,
      windowHeightBelowReference,
      centredIndex,
    )
    const howManyElementsToShowBelowSelected =
      optionsLength - 1 - centredIndex - numberCroppedBottom
    const croppedMenuHeight =
      (howManyElementsToShowAboveSelected + howManyElementsToShowBelowSelected + 1) * OptionHeight
    return {
      menuTop:
        referenceTop - 2 * menuVerticalPadding - howManyElementsToShowAboveSelected * OptionHeight,
      menuHeight: croppedMenuHeight,
      scrollTop: numberCroppedTop * OptionHeight,
      croppedTop: numberCroppedTop > 0,
      croppedBottom: numberCroppedBottom > 0,
    }
  } else {
    if (windowHeightAboveReference > windowHeightBelowReference) {
      const numberCroppedTop = calculateOptionsToCutOff(optionsLength, windowHeightAboveReference)
      const numberCroppedBottom = calculateOptionsToCutOff(
        optionsLength,
        windowHeightBelowReference,
      )
      const menuHeight = Math.min(
        optionsLength * OptionHeight,
        windowHeightAboveReference - numberCroppedTop * OptionHeight,
      )
      return {
        menuTop: referenceTop - 2 * menuVerticalPadding - menuHeight,
        menuHeight: menuHeight,
        scrollTop: 0,
        croppedTop: numberCroppedTop > 0,
        croppedBottom: numberCroppedBottom > 0,
      }
    } else {
      const numberCroppedTop = calculateOptionsToCutOff(optionsLength, windowHeightAboveReference)
      const numberCroppedBottom = calculateOptionsToCutOff(
        optionsLength,
        windowHeightBelowReference,
      )
      const menuHeight = Math.min(
        optionsLength * OptionHeight,
        windowHeightBelowReference - numberCroppedBottom * OptionHeight,
      )
      return {
        menuTop: referenceTop - 2 * menuVerticalPadding + OptionHeight,
        menuHeight: menuHeight,
        scrollTop: 0,
        croppedTop: numberCroppedTop > 0,
        croppedBottom: numberCroppedBottom > 0,
      }
    }
  }
}