@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
72 lines (71 loc) • 3.23 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 interface SelectCommonProps {
/**
* Error message
*
* Note: if it exists the select will be in error state
*/
errorText?: string | ReactNode;
/** Select Label */
label?: string | React.JSX.Element;
/** To be used as an attribute in htmlFor */
'aria-label'?: string;
/** Help text */
helpText?: string | ReactNode;
/** Size of the component */
size?: 'small' | 'medium' | 'large';
/** Displays with fluid width */
isFluid?: boolean;
/** Displays border */
hasBorder?: boolean;
/** Disabled state */
isDisabled?: boolean;
className?: string;
style?: React.CSSProperties;
}
type ReactSelectProps<OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>> = {
type: 'select';
selectProps: Props<OptionType, IsMulti, GroupType>;
} & SelectCommonProps;
type ReactSelectAsyncProps<OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>> = {
type: 'async';
selectProps: AsyncProps<OptionType, IsMulti, GroupType>;
} & SelectCommonProps;
type ReactSelectCreatableProps<OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>> = {
type: 'creatable';
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' | 'hasBorder'>;
export {};