@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
80 lines • 3.92 kB
TypeScript
/**
*
* 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