36c10f1a-e614-479e-8065-a6ee4ffe0d2e

import {
  containerCSS,
  ContainerProps,
  indicatorsContainerCSS,
  IndicatorsContainerProps,
  valueContainerCSS,
  ValueContainerProps,
} from './components/containers';
import { ControlProps, css as controlCSS } from './components/Control';
import {
  groupCSS,
  groupHeadingCSS,
  GroupHeadingProps,
  GroupProps,
} from './components/Group';
import {
  clearIndicatorCSS,
  dropdownIndicatorCSS,
  loadingIndicatorCSS,
  indicatorSeparatorCSS,
  ClearIndicatorProps,
  DropdownIndicatorProps,
  IndicatorSeparatorProps,
  LoadingIndicatorProps,
} from './components/indicators';
import { inputCSS, InputProps } from './components/Input';
import { placeholderCSS, PlaceholderProps } from './components/Placeholder';
import { optionCSS, OptionProps } from './components/Option';
import {
  menuCSS,
  menuListCSS,
  menuPortalCSS,
  noOptionsMessageCSS,
  loadingMessageCSS,
  NoticeProps,
  MenuProps,
  MenuListProps,
  PortalStyleArgs,
} from './components/Menu';
import {
  css as singleValueCSS,
  SingleValueProps,
} from './components/SingleValue';
import {
  multiValueCSS,
  multiValueLabelCSS,
  MultiValueProps,
  multiValueRemoveCSS,
} from './components/MultiValue';
import { CSSObjectWithLabel, GroupBase } from './types';

export interface StylesProps<
  Option,
  IsMulti extends boolean,
  Group extends GroupBase<Option>
> {
  clearIndicator: ClearIndicatorProps<Option, IsMulti, Group>;
  container: ContainerProps<Option, IsMulti, Group>;
  control: ControlProps<Option, IsMulti, Group>;
  dropdownIndicator: DropdownIndicatorProps<Option, IsMulti, Group>;
  group: GroupProps<Option, IsMulti, Group>;
  groupHeading: GroupHeadingProps<Option, IsMulti, Group>;
  indicatorsContainer: IndicatorsContainerProps<Option, IsMulti, Group>;
  indicatorSeparator: IndicatorSeparatorProps<Option, IsMulti, Group>;
  input: InputProps<Option, IsMulti, Group>;
  loadingIndicator: LoadingIndicatorProps<Option, IsMulti, Group>;
  loadingMessage: NoticeProps<Option, IsMulti, Group>;
  menu: MenuProps<Option, IsMulti, Group>;
  menuList: MenuListProps<Option, IsMulti, Group>;
  menuPortal: PortalStyleArgs;
  multiValue: MultiValueProps<Option, IsMulti, Group>;
  multiValueLabel: MultiValueProps<Option, IsMulti, Group>;
  multiValueRemove: MultiValueProps<Option, IsMulti, Group>;
  noOptionsMessage: NoticeProps<Option, IsMulti, Group>;
  option: OptionProps<Option, IsMulti, Group>;
  placeholder: PlaceholderProps<Option, IsMulti, Group>;
  singleValue: SingleValueProps<Option, IsMulti, Group>;
  valueContainer: ValueContainerProps<Option, IsMulti, Group>;
}

export const defaultStyles: {
  [K in keyof StylesProps<any, any, any>]: (
    props: StylesProps<unknown, boolean, GroupBase<unknown>>[K],
    unstyled: boolean
  ) => CSSObjectWithLabel;
} = {
  clearIndicator: clearIndicatorCSS,
  container: containerCSS,
  control: controlCSS,
  dropdownIndicator: dropdownIndicatorCSS,
  group: groupCSS,
  groupHeading: groupHeadingCSS,
  indicatorsContainer: indicatorsContainerCSS,
  indicatorSeparator: indicatorSeparatorCSS,
  input: inputCSS,
  loadingIndicator: loadingIndicatorCSS,
  loadingMessage: loadingMessageCSS,
  menu: menuCSS,
  menuList: menuListCSS,
  menuPortal: menuPortalCSS,
  multiValue: multiValueCSS,
  multiValueLabel: multiValueLabelCSS,
  multiValueRemove: multiValueRemoveCSS,
  noOptionsMessage: noOptionsMessageCSS,
  option: optionCSS,
  placeholder: placeholderCSS,
  singleValue: singleValueCSS,
  valueContainer: valueContainerCSS,
};

export type StylesConfig<
  Option = unknown,
  IsMulti extends boolean = boolean,
  Group extends GroupBase<Option> = GroupBase<Option>
> = {
  [K in keyof StylesProps<Option, IsMulti, Group>]?: (
    base: CSSObjectWithLabel,
    props: StylesProps<Option, IsMulti, Group>[K]
  ) => CSSObjectWithLabel;
};

export type ClassNamesConfig<
  Option = unknown,
  IsMulti extends boolean = boolean,
  Group extends GroupBase<Option> = GroupBase<Option>
> = {
  [K in keyof StylesProps<Option, IsMulti, Group>]?: (
    props: StylesProps<Option, IsMulti, Group>[K]
  ) => string;
};

// Merge Utility
// Allows consumers to extend a base Select with additional styles

export function mergeStyles<
  Option,
  IsMulti extends boolean,
  Group extends GroupBase<Option>
>(
  source: StylesConfig<Option, IsMulti, Group>,
  target: StylesConfig<Option, IsMulti, Group> = {}
) {
  // initialize with source styles
  const styles = { ...source };

  // massage in target styles
  Object.keys(target).forEach((keyAsString) => {
    const key = keyAsString as keyof StylesConfig<Option, IsMulti, Group>;
    if (source[key]) {
      styles[key] = (rsCss: any, props: any) => {
        return target[key]!(source[key]!(rsCss, props), props);
      };
    } else {
      styles[key] = target[key] as any;
    }
  });

  return styles;
}

1	import {
2	containerCSS,
3	ContainerProps,
4	indicatorsContainerCSS,
5	IndicatorsContainerProps,
6	valueContainerCSS,
7	ValueContainerProps,
8	} from './components/containers';
9	import { ControlProps, css as controlCSS } from './components/Control';
10	import {
11	groupCSS,
12	groupHeadingCSS,
13	GroupHeadingProps,
14	GroupProps,
15	} from './components/Group';
16	import {
17	clearIndicatorCSS,
18	dropdownIndicatorCSS,
19	loadingIndicatorCSS,
20	indicatorSeparatorCSS,
21	ClearIndicatorProps,
22	DropdownIndicatorProps,
23	IndicatorSeparatorProps,
24	LoadingIndicatorProps,
25	} from './components/indicators';
26	import { inputCSS, InputProps } from './components/Input';
27	import { placeholderCSS, PlaceholderProps } from './components/Placeholder';
28	import { optionCSS, OptionProps } from './components/Option';
29	import {
30	menuCSS,
31	menuListCSS,
32	menuPortalCSS,
33	noOptionsMessageCSS,
34	loadingMessageCSS,
35	NoticeProps,
36	MenuProps,
37	MenuListProps,
38	PortalStyleArgs,
39	} from './components/Menu';
40	import {
41	css as singleValueCSS,
42	SingleValueProps,
43	} from './components/SingleValue';
44	import {
45	multiValueCSS,
46	multiValueLabelCSS,
47	MultiValueProps,
48	multiValueRemoveCSS,
49	} from './components/MultiValue';
50	import { CSSObjectWithLabel, GroupBase } from './types';
51
52	export interface StylesProps<
53	Option,
54	IsMulti extends boolean,
55	Group extends GroupBase<Option>
56	> {
57	clearIndicator: ClearIndicatorProps<Option, IsMulti, Group>;
58	container: ContainerProps<Option, IsMulti, Group>;
59	control: ControlProps<Option, IsMulti, Group>;
60	dropdownIndicator: DropdownIndicatorProps<Option, IsMulti, Group>;
61	group: GroupProps<Option, IsMulti, Group>;
62	groupHeading: GroupHeadingProps<Option, IsMulti, Group>;
63	indicatorsContainer: IndicatorsContainerProps<Option, IsMulti, Group>;
64	indicatorSeparator: IndicatorSeparatorProps<Option, IsMulti, Group>;
65	input: InputProps<Option, IsMulti, Group>;
66	loadingIndicator: LoadingIndicatorProps<Option, IsMulti, Group>;
67	loadingMessage: NoticeProps<Option, IsMulti, Group>;
68	menu: MenuProps<Option, IsMulti, Group>;
69	menuList: MenuListProps<Option, IsMulti, Group>;
70	menuPortal: PortalStyleArgs;
71	multiValue: MultiValueProps<Option, IsMulti, Group>;
72	multiValueLabel: MultiValueProps<Option, IsMulti, Group>;
73	multiValueRemove: MultiValueProps<Option, IsMulti, Group>;
74	noOptionsMessage: NoticeProps<Option, IsMulti, Group>;
75	option: OptionProps<Option, IsMulti, Group>;
76	placeholder: PlaceholderProps<Option, IsMulti, Group>;
77	singleValue: SingleValueProps<Option, IsMulti, Group>;
78	valueContainer: ValueContainerProps<Option, IsMulti, Group>;
79	}
80
81	export const defaultStyles: {
82	[K in keyof StylesProps<any, any, any>]: (
83	props: StylesProps<unknown, boolean, GroupBase<unknown>>[K],
84	unstyled: boolean
85	) => CSSObjectWithLabel;
86	} = {	5✔
87	clearIndicator: clearIndicatorCSS,
88	container: containerCSS,
89	control: controlCSS,
90	dropdownIndicator: dropdownIndicatorCSS,
91	group: groupCSS,
92	groupHeading: groupHeadingCSS,
93	indicatorsContainer: indicatorsContainerCSS,
94	indicatorSeparator: indicatorSeparatorCSS,
95	input: inputCSS,
96	loadingIndicator: loadingIndicatorCSS,
97	loadingMessage: loadingMessageCSS,
98	menu: menuCSS,
99	menuList: menuListCSS,
100	menuPortal: menuPortalCSS,
101	multiValue: multiValueCSS,
102	multiValueLabel: multiValueLabelCSS,
103	multiValueRemove: multiValueRemoveCSS,
104	noOptionsMessage: noOptionsMessageCSS,
105	option: optionCSS,
106	placeholder: placeholderCSS,
107	singleValue: singleValueCSS,
108	valueContainer: valueContainerCSS,
109	};
110
111	export type StylesConfig<
112	Option = unknown,
113	IsMulti extends boolean = boolean,
114	Group extends GroupBase<Option> = GroupBase<Option>
115	> = {
116	[K in keyof StylesProps<Option, IsMulti, Group>]?: (
117	base: CSSObjectWithLabel,
118	props: StylesProps<Option, IsMulti, Group>[K]
119	) => CSSObjectWithLabel;
120	};
121
122	export type ClassNamesConfig<
123	Option = unknown,
124	IsMulti extends boolean = boolean,
125	Group extends GroupBase<Option> = GroupBase<Option>
126	> = {
127	[K in keyof StylesProps<Option, IsMulti, Group>]?: (
128	props: StylesProps<Option, IsMulti, Group>[K]
129	) => string;
130	};
131
132	// Merge Utility
133	// Allows consumers to extend a base Select with additional styles
134
135	export function mergeStyles<
136	Option,
137	IsMulti extends boolean,
138	Group extends GroupBase<Option>
139	>(
140	source: StylesConfig<Option, IsMulti, Group>,
141	target: StylesConfig<Option, IsMulti, Group> = {}	×
142	) {
143	// initialize with source styles
144	const styles = { ...source };	×
145
146	// massage in target styles
147	Object.keys(target).forEach((keyAsString) => {	×
148	const key = keyAsString as keyof StylesConfig<Option, IsMulti, Group>;	×
149	if (source[key]) {	×
150	styles[key] = (rsCss: any, props: any) => {	×
151	return target[key]!(source[key]!(rsCss, props), props);	×
152	};
153	} else {
154	styles[key] = target[key] as any;	×
155	}
156	});
157
158	return styles;	×
159	}

JedWatson / react-select / 36c10f1a-e614-479e-8065-a6ee4ffe0d2e

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous