UNPKG

@neo4j-ndl/react

Version:

React implementation of Neo4j Design System

80 lines 3.92 kB
/** * * Copyright (c) "Neo4j" * Neo4j Sweden AB [http://neo4j.com] * * This file is part of Neo4j. * * Neo4j is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see <http://www.gnu.org/licenses/>. */ import { type ReactNode } from 'react'; import { type GroupBase, type Props } from 'react-select'; import { type AsyncProps } from 'react-select/async'; import { type CreatableProps } from 'react-select/creatable'; export type SelectCommonProps = { /** Error message, if it exists the select will be in error state */ errorText?: string | ReactNode; /** Help text of the select component */ helpText?: string | ReactNode; /** Size of the component */ size?: 'small' | 'medium' | 'large'; /** Whether the select component is fluid */ isFluid?: boolean; /** Whether the select component is clean. If true, the select component will have a transparent background, no border and be hug the width of the content. */ isClean?: boolean; /** Whether the select component is disabled */ isDisabled?: boolean; /** Additional class name */ className?: string; /** Additional style */ style?: React.CSSProperties; } & ({ /** Label of the select component. If not provided, please provide an ariaLabel. */ label?: undefined; /** Aria label of the select component */ ariaLabel: string; } | { label: React.ReactNode; ariaLabel?: string; }); type ReactSelectProps<OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>> = { /** Type of the select component */ type: 'select'; /** Props of the select component, based of React Select props */ selectProps: Props<OptionType, IsMulti, GroupType>; } & SelectCommonProps; type ReactSelectAsyncProps<OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>> = { /** Type of the select component */ type: 'async'; /** Props of the select component, based of React Select props */ selectProps: AsyncProps<OptionType, IsMulti, GroupType>; } & SelectCommonProps; type ReactSelectCreatableProps<OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>> = { /** Type of the select component */ type: 'creatable'; /** Props of the select component, based of React Select props */ selectProps: CreatableProps<OptionType, IsMulti, GroupType>; } & SelectCommonProps; /** * We will provide a wrapper to the three distinct select components * the library provides: * 1. Select (the most simple component) * 2. Creatable (for creating new values in our options) * 3. Async for fetching while typing, useful for cases that we avoid storing things * in browser */ export type SelectProps<OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>> = ReactSelectProps<OptionType, IsMulti, GroupType> | ReactSelectCreatableProps<OptionType, IsMulti, GroupType> | ReactSelectAsyncProps<OptionType, IsMulti, GroupType>; export type SelectOverrideCustomProps<OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>> = Pick<SelectProps<OptionType, IsMulti, GroupType>, 'size' | 'errorText' | 'isClean'>; export {}; //# sourceMappingURL=types.d.ts.map