Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: minor single-select issues #1152

Merged
merged 9 commits into from
Jul 14, 2023
Merged

fix: minor single-select issues #1152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
aa279b5
feat: add react-select component
hiddeottens Jul 4, 2023
07620f7
feat: implement new single select component
hiddeottens Jul 12, 2023
e3582df
chore: remove row select component
hiddeottens Jul 12, 2023
5c7fe0d
chore: fix single select prop types
hiddeottens Jul 12, 2023
7fa126a
chore: add deprecated select component
hiddeottens Jul 12, 2023
69ebc52
chore: merge branch 'master' of https://github.com/TimeChimp/tacugama…
hiddeottens Jul 12, 2023
479101b
fix: minor single select issues
hiddeottens Jul 14, 2023
09ee098
chore: merge branch 'master' of https://github.com/TimeChimp/tacugama…
hiddeottens Jul 14, 2023
2658480
chore: bump version
hiddeottens Jul 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"version": "9.0.1",
"version": "9.0.2",
"license": "MIT",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
Expand Down
11 changes: 9 additions & 2 deletions src/components/modal/Modal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';

import { Modal, ModalHeader, ModalBody, ModalFooter, ModalProps, ModalSize } from './';
import { Button } from 'components';
import { ButtonKind, ButtonType } from 'models';
import { Button, MultiSelect, SingleSelect } from '../';
import { ButtonKind } from '../../models';

export default {
title: 'Components/Modal',
Expand All @@ -26,6 +26,13 @@ const Template: Story<ModalProps> = (args) => (
Maecenas aliquet mauris ut tempus. Proin ut dui sed metus pharetra hend rerit vel non mi. Nulla ornare faucibus
ex, non facilisis nisl. Maecenas aliquet mauris ut tempus. Proin ut dui sed metus pharetra hend rerit vel non mi.
Nulla ornare faucibus ex, non facilisis nisl. Maecenas aliquet mauris ut tempus.
<SingleSelect
options={[
{ id: '1', name: 'test' },
{ id: '2', name: 'test 2' },
]}
creatable
/>
</ModalBody>
<ModalFooter>
<Button kind={ButtonKind.secondary}>Cancel</Button>
Expand Down
6 changes: 3 additions & 3 deletions src/components/select/Select.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React from 'react';
import { Story, Meta } from '@storybook/react/types-6-0';

import { Select } from './multi-select';
import { MultiSelect } from './multi-select';
import { SingleSelect as SingleSelectComponent, SingleSelectProps } from './single-select';
import { OPTIONS } from './test-data';
import { SelectProps } from './multi-select/types';
import { MultiSelectProps } from './multi-select/types';

export default {
title: 'Components/Select',
} as Meta;

const Template: Story<SelectProps> = (args) => <Select {...args} />;
const Template: Story<MultiSelectProps> = (args) => <MultiSelect {...args} />;
Template.parameters = {
design: {
type: 'figma',
Expand Down
27 changes: 24 additions & 3 deletions src/components/select/single-select/SingleSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,18 @@ import {
getInputBorderColor,
getInputBackgroundColor,
padding,
margin,
} from '../../../utils';
import { SingleSelectProps, Option } from './types';

export const DEFAULT_VALUE_KEY = 'id';
export const DEFAULT_LABEL_KEY = 'name';

export const SingleSelect = <ValueType extends string, ValueKey extends string, LabelKey extends string>({
export const SingleSelect = <
ValueType extends string | number | Date,
ValueKey extends string,
LabelKey extends string,
>({
valueKey,
labelKey,
defaultValue,
Expand All @@ -33,6 +38,7 @@ export const SingleSelect = <ValueType extends string, ValueKey extends string,
onChange,
placeholder,
createText = (inputValue: string) => `Create ${inputValue}`,
noOptionsMessage = () => 'No options',
onCreateOption,
}: SingleSelectProps<ValueType, ValueKey, LabelKey>) => {
const {
Expand Down Expand Up @@ -83,7 +89,12 @@ export const SingleSelect = <ValueType extends string, ValueKey extends string,
return option[labelKey ?? DEFAULT_LABEL_KEY];
},
getOptionValue: (option: Option<ValueType, ValueKey, LabelKey>) => option[valueKey ?? DEFAULT_VALUE_KEY],
noOptionsMessage,
styles: {
container: (provided) => ({
...provided,
width: '100%',
}),
control: (provided, { isFocused }) => ({
...provided,
backgroundColor: getInputBackgroundColor({ disabled, customColors, colors }),
Expand Down Expand Up @@ -135,15 +146,19 @@ export const SingleSelect = <ValueType extends string, ValueKey extends string,
}),
menu: (provided) => ({
...provided,
zIndex: 99999,
...borderRadius(radius200),
...border(border300),
boxShadow: 'none',
...margin(scale100, '0'),
}),
menuList: (provided) => ({
...provided,
...padding(),
}),
menuPortal: (provided) => ({
...provided,
zIndex: 99999,
}),
option: (provided, { isSelected }) => ({
...provided,
...borderBottom(border300),
Expand Down Expand Up @@ -188,7 +203,13 @@ export const SingleSelect = <ValueType extends string, ValueKey extends string,
{showSkeleton ? (
<Skeleton width="100%" height={scale975} animation />
) : (
<>{creatable ? <SelectCreatable {...props} onCreateOption={onCreateOption} /> : <Select {...props} />}</>
<>
{creatable ? (
<SelectCreatable {...props} onCreateOption={onCreateOption} menuPortalTarget={document.body} />
) : (
<Select {...props} menuPortalTarget={document.body} />
)}
</>
)}
</>
);
Expand Down
1 change: 1 addition & 0 deletions src/components/select/single-select/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,6 @@ export interface SingleSelectProps<ValueType, ValueKey extends string, LabelKey
error?: boolean;
success?: boolean;
createText?: (inputValue: string) => string;
noOptionsMessage?: () => string;
onCreateOption?: (inputValue: string) => void;
}
42 changes: 42 additions & 0 deletions src/components/select/test-data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,46 @@ export const OPTIONS = [
{ name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
{ name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
{ name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
{ name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
{ name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
{ name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
{ name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
{ name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
{ name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
{ name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
{ name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
{ name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
{ name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
{ name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
{ name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
{ name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
{ name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
{ name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
{ name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
{ name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
{ name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
{ name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
{ name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
{ name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
{ name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
{ name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
{ name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
{ name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
{ name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
{ name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
{ name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
{ name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
{ name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
{ name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
{ name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
{ name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
{ name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
{ name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
{ name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
{ name: 'Beige', id: '#F5F5DC', color: '#F5F5DC' },
{ name: 'AliceBlue', id: '#F0F8FF', color: '#F0F8FF' },
{ name: 'AntiqueWhite', id: '#FAEBD7', color: '#FAEBD7' },
{ name: 'Aqua', id: '#00FFFF', color: '#00FFFF' },
{ name: 'Aquamarine', id: '#7FFFD4', color: '#7FFFD4' },
{ name: 'Azure', id: '#F0FFFF', color: '#F0FFFF' },
];
Loading