Skip to content

Commit 9094055

Browse files
AhmedElywaAhmedElywa
committed
fix #113 
1 parent 1977d5a commit 9094055

File tree

5 files changed

+81
-77
lines changed

5 files changed

+81
-77
lines changed

‎packages/ui/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,12 @@
4242
"@babel/preset-typescript": "^7.12.16",
4343
"@paljs/icons": "^1.0.5",
4444
"@types/node": "14.14.28",
45-
"@types/react": "17.0.2",
45+
"@types/react": "*",
4646
"@types/react-dom": "17.0.1",
4747
"@types/react-select": "4.0.13",
4848
"@types/styled-components": "5.1.7",
49-
"@typescript-eslint/eslint-plugin": "4.15.0",
50-
"@typescript-eslint/parser": "4.15.0",
49+
"@typescript-eslint/eslint-plugin": "4.15.1",
50+
"@typescript-eslint/parser": "4.15.1",
5151
"babel-plugin-module-resolver": "^4.1.0",
5252
"eslint": "7.20.0",
5353
"eslint-config-prettier": "7.2.0",

‎packages/ui/src/Popover/index.tsx

+5-10
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@
55
*/
66

77
import React from 'react';
8-
import { withTheme, DefaultTheme } from 'styled-components';
8+
import { ThemeContext } from 'styled-components';
99
import PopoverStyle from './style';
1010
import Overlay from '../PopoverLay';
1111
import { Trigger, Placement } from '../types';
1212

1313
const Popover: React.FC<PopoverProps> = (props) => {
14-
const arrowSize = parseInt(props.theme.popoverArrowSize as string);
14+
const theme = React.useContext(ThemeContext);
15+
const arrowSize = parseInt(theme.popoverArrowSize as string);
1516
const arrowRound = Math.round(-arrowSize - arrowSize / 2);
1617
return (
1718
<Overlay
@@ -23,7 +24,7 @@ const Popover: React.FC<PopoverProps> = (props) => {
2324
eventListener={props.eventListener}
2425
transformSize={15}
2526
arrowRound={arrowRound}
26-
arrowSize={props.theme.popoverArrowSize as string}
27+
arrowSize={theme.popoverArrowSize as string}
2728
>
2829
<PopoverStyle>
2930
<span className="arrow" />
@@ -41,12 +42,6 @@ export interface PopoverProps {
4142
children: React.ReactNode;
4243
style?: React.CSSProperties;
4344
className?: string;
44-
theme: DefaultTheme;
4545
}
46-
const PopoverWithTheme = withTheme(Popover);
4746

48-
const Popover2: React.FC<Omit<PopoverProps, 'theme'>> = (props) => {
49-
return <PopoverWithTheme {...props} />;
50-
};
51-
52-
export default Popover2;
47+
export default Popover;

‎packages/ui/src/PopoverLay/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const Overlay: React.FC<OverlayProps> = (props) => {
4242
const targetRef = React.useRef<HTMLDivElement>(null);
4343
const { position, placement, show, setShow, positionHandle } = usePopoverPosition(props, targetRef, overlayRef);
4444

45-
let timeOut: number;
45+
let timeOut: NodeJS.Timeout;
4646
const onMouseLeave = () => {
4747
timeOut = setTimeout(() => {
4848
setShow(false);

‎packages/ui/src/Select/index.tsx

+31-14
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,27 @@
1-
import { DefaultTheme, withTheme } from 'styled-components';
1+
import { DefaultTheme, ThemeContext } from 'styled-components';
22
import Select, { Props, StylesConfig } from 'react-select';
33
import React from 'react';
44
import { Shape, Status, Size } from '../types';
55
import { ThemeKey } from '@paljs/theme';
6+
import { GroupTypeBase, OptionTypeBase } from 'react-select/src/types';
67

7-
interface SelectMainProps {
8-
theme: DefaultTheme;
8+
interface CustomProps {
99
shape?: Shape;
1010
status?: Status;
1111
size?: Size;
1212
}
1313

14-
const customStyles: (props: SelectMainProps) => StylesConfig = ({ theme, status, shape, size }) => {
14+
type SelectMainProps<
15+
OptionType extends OptionTypeBase = { label: string; value: string },
16+
IsMulti extends boolean = false,
17+
GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
18+
> = CustomProps & Props<OptionType, IsMulti, GroupType>;
19+
20+
function customStyles<
21+
OptionType extends OptionTypeBase = { label: string; value: string },
22+
IsMulti extends boolean = false,
23+
GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
24+
>({ theme, status, shape, size }: CustomProps & { theme: DefaultTheme }): StylesConfig<OptionType, IsMulti, GroupType> {
1525
const getThemeKey = (key: string) => {
1626
return theme[key as ThemeKey].toString();
1727
};
@@ -155,10 +165,23 @@ const customStyles: (props: SelectMainProps) => StylesConfig = ({ theme, status,
155165
};
156166
},
157167
};
158-
};
168+
}
159169

160-
const SelectMain: React.FC<Props & SelectMainProps> = (props) => {
161-
return <Select {...props} isRtl={props.theme.dir === 'rtl'} styles={customStyles(props)} />;
170+
const SelectMain = <
171+
OptionType extends OptionTypeBase = { label: string; value: string },
172+
IsMulti extends boolean = false,
173+
GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
174+
>(
175+
props: React.PropsWithChildren<SelectMainProps<OptionType, IsMulti, GroupType>>,
176+
) => {
177+
const theme = React.useContext(ThemeContext);
178+
return (
179+
<Select<OptionType, IsMulti, GroupType>
180+
{...props}
181+
isRtl={props.defaultTheme.dir === 'rtl'}
182+
styles={customStyles<OptionType, IsMulti, GroupType>({ ...props, theme })}
183+
/>
184+
);
162185
};
163186

164187
SelectMain.defaultProps = {
@@ -167,10 +190,4 @@ SelectMain.defaultProps = {
167190
size: 'Medium',
168191
};
169192

170-
const SelectMainWithTheme = withTheme(SelectMain);
171-
172-
const SelectWithTheme: React.FC<Props & Partial<SelectMainProps>> = (props) => {
173-
return <SelectMainWithTheme {...props} />;
174-
};
175-
176-
export default SelectWithTheme;
193+
export default SelectMain;

‎yarn.lock

+41-49
Original file line numberDiff line numberDiff line change
@@ -2273,14 +2273,6 @@
22732273
"@types/prop-types" "*"
22742274
csstype "^2.2.0"
22752275

2276-
"@types/[email protected]":
2277-
version "17.0.2"
2278-
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8"
2279-
integrity sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==
2280-
dependencies:
2281-
"@types/prop-types" "*"
2282-
csstype "^3.0.2"
2283-
22842276
"@types/[email protected]":
22852277
version "5.1.7"
22862278
resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.7.tgz#3cd10b088c1cb1acde2e4b166b3e8275a3083710"
@@ -2290,74 +2282,74 @@
22902282
"@types/react" "*"
22912283
csstype "^3.0.2"
22922284

2293-
"@typescript-eslint/[email protected].0":
2294-
version "4.15.0"
2295-
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.15.0.tgz#13a5a07cf30d0d5781e43480aa2a8d38d308b084"
2296-
integrity sha512-DJgdGZW+8CFUTz5C/dnn4ONcUm2h2T0itWD85Ob5/V27Ndie8hUoX5HKyGssvR8sUMkAIlUc/AMK67Lqa3kBIQ==
2285+
"@typescript-eslint/[email protected].1":
2286+
version "4.15.1"
2287+
resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.15.1.tgz#835f64aa0a403e5e9e64c10ceaf8d05c3f015180"
2288+
integrity sha512-yW2epMYZSpNJXZy22Biu+fLdTG8Mn6b22kR3TqblVk50HGNV8Zya15WAXuQCr8tKw4Qf1BL4QtI6kv6PCkLoJw==
22972289
dependencies:
2298-
"@typescript-eslint/experimental-utils" "4.15.0"
2299-
"@typescript-eslint/scope-manager" "4.15.0"
2290+
"@typescript-eslint/experimental-utils" "4.15.1"
2291+
"@typescript-eslint/scope-manager" "4.15.1"
23002292
debug "^4.1.1"
23012293
functional-red-black-tree "^1.0.1"
23022294
lodash "^4.17.15"
23032295
regexpp "^3.0.0"
23042296
semver "^7.3.2"
23052297
tsutils "^3.17.1"
23062298

2307-
"@typescript-eslint/[email protected].0":
2308-
version "4.15.0"
2309-
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.15.0.tgz#b87c36410a9b23f637689427be85007a2ec1a9c6"
2310-
integrity sha512-V4vaDWvxA2zgesg4KPgEGiomWEBpJXvY4ZX34Y3qxK8LUm5I87L+qGIOTd9tHZOARXNRt9pLbblSKiYBlGMawg==
2299+
"@typescript-eslint/[email protected].1":
2300+
version "4.15.1"
2301+
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.15.1.tgz#d744d1ac40570a84b447f7aa1b526368afd17eec"
2302+
integrity sha512-9LQRmOzBRI1iOdJorr4jEnQhadxK4c9R2aEAsm7WE/7dq8wkKD1suaV0S/JucTL8QlYUPU1y2yjqg+aGC0IQBQ==
23112303
dependencies:
23122304
"@types/json-schema" "^7.0.3"
2313-
"@typescript-eslint/scope-manager" "4.15.0"
2314-
"@typescript-eslint/types" "4.15.0"
2315-
"@typescript-eslint/typescript-estree" "4.15.0"
2305+
"@typescript-eslint/scope-manager" "4.15.1"
2306+
"@typescript-eslint/types" "4.15.1"
2307+
"@typescript-eslint/typescript-estree" "4.15.1"
23162308
eslint-scope "^5.0.0"
23172309
eslint-utils "^2.0.0"
23182310

2319-
"@typescript-eslint/[email protected].0":
2320-
version "4.15.0"
2321-
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.15.0.tgz#8df94365b4b7161f9e8514fe28aef19954810b6b"
2322-
integrity sha512-L6Dtbq8Bc7g2aZwnIBETpmUa9XDKCMzKVwAArnGp5Mn7PRNFjf3mUzq8UeBjL3K8t311hvevnyqXAMSmxO8Gpg==
2311+
"@typescript-eslint/[email protected].1":
2312+
version "4.15.1"
2313+
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.15.1.tgz#4c91a0602733db63507e1dbf13187d6c71a153c4"
2314+
integrity sha512-V8eXYxNJ9QmXi5ETDguB7O9diAXlIyS+e3xzLoP/oVE4WCAjssxLIa0mqCLsCGXulYJUfT+GV70Jv1vHsdKwtA==
23232315
dependencies:
2324-
"@typescript-eslint/scope-manager" "4.15.0"
2325-
"@typescript-eslint/types" "4.15.0"
2326-
"@typescript-eslint/typescript-estree" "4.15.0"
2316+
"@typescript-eslint/scope-manager" "4.15.1"
2317+
"@typescript-eslint/types" "4.15.1"
2318+
"@typescript-eslint/typescript-estree" "4.15.1"
23272319
debug "^4.1.1"
23282320

2329-
"@typescript-eslint/[email protected].0":
2330-
version "4.15.0"
2331-
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.15.0.tgz#c42703558ea6daaaba51a9c3a86f2902dbab9432"
2332-
integrity sha512-CSNBZnCC2jEA/a+pR9Ljh8Y+5TY5qgbPz7ICEk9WCpSEgT6Pi7H2RIjxfrrbUXvotd6ta+i27sssKEH8Azm75g==
2321+
"@typescript-eslint/[email protected].1":
2322+
version "4.15.1"
2323+
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.15.1.tgz#f6511eb38def2a8a6be600c530c243bbb56ac135"
2324+
integrity sha512-ibQrTFcAm7yG4C1iwpIYK7vDnFg+fKaZVfvyOm3sNsGAerKfwPVFtYft5EbjzByDJ4dj1WD8/34REJfw/9wdVA==
23332325
dependencies:
2334-
"@typescript-eslint/types" "4.15.0"
2335-
"@typescript-eslint/visitor-keys" "4.15.0"
2326+
"@typescript-eslint/types" "4.15.1"
2327+
"@typescript-eslint/visitor-keys" "4.15.1"
23362328

2337-
"@typescript-eslint/[email protected].0":
2338-
version "4.15.0"
2339-
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.15.0.tgz#3011ae1ac3299bb9a5ac56bdd297cccf679d3662"
2340-
integrity sha512-su4RHkJhS+iFwyqyXHcS8EGPlUVoC+XREfy5daivjLur9JP8GhvTmDipuRpcujtGC4M+GYhUOJCPDE3rC5NJrg==
2329+
"@typescript-eslint/[email protected].1":
2330+
version "4.15.1"
2331+
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.15.1.tgz#da702f544ef1afae4bc98da699eaecd49cf31c8c"
2332+
integrity sha512-iGsaUyWFyLz0mHfXhX4zO6P7O3sExQpBJ2dgXB0G5g/8PRVfBBsmQIc3r83ranEQTALLR3Vko/fnCIVqmH+mPw==
23412333

2342-
"@typescript-eslint/[email protected].0":
2343-
version "4.15.0"
2344-
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.15.0.tgz#402c86a7d2111c1f7a2513022f22a38a395b7f93"
2345-
integrity sha512-jG6xTmcNbi6xzZq0SdWh7wQ9cMb2pqXaUp6bUZOMsIlu5aOlxGxgE/t6L/gPybybQGvdguajXGkZKSndZJpksA==
2334+
"@typescript-eslint/[email protected].1":
2335+
version "4.15.1"
2336+
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.15.1.tgz#fa9a9ff88b4a04d901ddbe5b248bc0a00cd610be"
2337+
integrity sha512-z8MN3CicTEumrWAEB2e2CcoZa3KP9+SMYLIA2aM49XW3cWIaiVSOAGq30ffR5XHxRirqE90fgLw3e6WmNx5uNw==
23462338
dependencies:
2347-
"@typescript-eslint/types" "4.15.0"
2348-
"@typescript-eslint/visitor-keys" "4.15.0"
2339+
"@typescript-eslint/types" "4.15.1"
2340+
"@typescript-eslint/visitor-keys" "4.15.1"
23492341
debug "^4.1.1"
23502342
globby "^11.0.1"
23512343
is-glob "^4.0.1"
23522344
semver "^7.3.2"
23532345
tsutils "^3.17.1"
23542346

2355-
"@typescript-eslint/[email protected].0":
2356-
version "4.15.0"
2357-
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.15.0.tgz#2a07768df30c8a5673f1bce406338a07fdec38ca"
2358-
integrity sha512-RnDtJwOwFucWFAMjG3ghCG/ikImFJFEg20DI7mn4pHEx3vC48lIAoyjhffvfHmErRDboUPC7p9Z2il4CLb7qxA==
2347+
"@typescript-eslint/[email protected].1":
2348+
version "4.15.1"
2349+
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.15.1.tgz#c76abbf2a3be8a70ed760f0e5756bf62de5865dd"
2350+
integrity sha512-tYzaTP9plooRJY8eNlpAewTOqtWW/4ff/5wBjNVaJ0S0wC4Gpq/zDVRTJa5bq2v1pCNQ08xxMCndcvR+h7lMww==
23592351
dependencies:
2360-
"@typescript-eslint/types" "4.15.0"
2352+
"@typescript-eslint/types" "4.15.1"
23612353
eslint-visitor-keys "^2.0.0"
23622354

23632355
"@zkochan/cmd-shim@^3.1.0":

0 commit comments

Comments
 (0)