mirrors/thatmattlove-hyperglass
1
0
Fork 1
mirror of https://github.com/thatmattlove/hyperglass.git synced 2026-01-17 08:48:05 +00:00
Code Issues Activity

improve custom select component [skip ci]

Browse source
This commit is contained in:
checktheroads 2020-12-31 21:53:49 -07:00
parent d46d3317f0
commit 3f6b4ea516
3 changed files with 14 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
hyperglass/ui/components/select/select.tsx
View file

@ -1,6 +1,6 @@
import { createContext, useContext, useMemo } from 'react';
import ReactSelect from 'react-select';
import { Box, useDisclosure } from '@chakra-ui/react';
import { chakra, useDisclosure } from '@chakra-ui/react';
import { useColorMode } from '~/context';
import {
useRSTheme,
@ -18,15 +18,15 @@ import {
} from './styles';
import type { TSelectOption } from '~/types';
import type { TSelectBase, TSelectContext, TBoxAsReactSelect } from './types';
import type { TSelectBase, TSelectContext, TReactSelectChakra } from './types';
const SelectContext = createContext<TSelectContext>(Object());
export const useSelectContext = () => useContext(SelectContext);
const ReactSelectAsBox = (props: TBoxAsReactSelect) => <Box as={ReactSelect} {...props} />;
const ReactSelectChakra = chakra<typeof ReactSelect, TReactSelectChakra>(ReactSelect);
export const Select = (props: TSelectBase) => {
const { ctl, options, multi, onSelect, isError = false, ...rest } = props;
const { options, multi, onSelect, isError = false, ...rest } = props;
const { isOpen, onOpen, onClose } = useDisclosure();
const { colorMode } = useColorMode();
@ -37,7 +37,7 @@ export const Select = (props: TSelectBase) => {
isOpen,
]);
const handleChange = (changed: TSelectOption | TSelectOption[]) => {
const defaultOnChange = (changed: TSelectOption | TSelectOption[]) => {
if (!Array.isArray(changed)) {
changed = [changed];
}
@ -54,15 +54,14 @@ export const Select = (props: TSelectBase) => {
return (
<SelectContext.Provider value={selectContext}>
<ReactSelectAsBox
onChange={handleChange}
<ReactSelectChakra
onChange={defaultOnChange}
onMenuClose={onClose}
onMenuOpen={onOpen}
isClearable={true}
options={options}
as={ReactSelect}
isMulti={multi}
theme={rsTheme}
ref={ctl}
styles={{
menuPortal,
multiValue,

4
hyperglass/ui/components/select/types.ts
View file

@ -18,10 +18,10 @@ export interface TSelectState {
export type TOptions = Array<TSelectOptionGroup | TSelectOption>;
export type TBoxAsReactSelect = Omit<IReactSelect, 'isMulti' | 'onSelect' | 'onChange'> &
export type TReactSelectChakra = Omit<IReactSelect, 'isMulti' | 'onSelect' | 'onChange'> &
Omit<BoxProps, 'onChange' | 'onSelect'>;
export interface TSelectBase extends TBoxAsReactSelect {
export interface TSelectBase extends TReactSelectChakra {
name: string;
multi?: boolean;
isError?: boolean;

4
hyperglass/ui/types/common.ts
View file

@ -1,3 +1,5 @@
import { State } from '@hookstate/core';
export type TSelectOptionBase = {
label: string;
value: string;
@ -8,6 +10,8 @@ export type TSelectOption = TSelectOptionBase | null;
export type TSelectOptionMulti = TSelectOptionBase[] | null;
export type TSelectOptionState = State<TSelectOption>;
export type TSelectOptionGroup = {
label: string;
options: TSelectOption[];