fix #113

paljs · Feb 17, 2021 · 9094055 · 9094055
1 parent 1977d5a
commit 9094055
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 77 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -42,12 +42,12 @@
     "@babel/preset-typescript": "^7.12.16",
     "@paljs/icons": "^1.0.5",
     "@types/node": "14.14.28",
-    "@types/react": "17.0.2",
+    "@types/react": "*",
     "@types/react-dom": "17.0.1",
     "@types/react-select": "4.0.13",
     "@types/styled-components": "5.1.7",
-    "@typescript-eslint/eslint-plugin": "4.15.0",
-    "@typescript-eslint/parser": "4.15.0",
+    "@typescript-eslint/eslint-plugin": "4.15.1",
+    "@typescript-eslint/parser": "4.15.1",
     "babel-plugin-module-resolver": "^4.1.0",
     "eslint": "7.20.0",
     "eslint-config-prettier": "7.2.0",

diff --git a/packages/ui/src/Popover/index.tsx b/packages/ui/src/Popover/index.tsx
@@ -5,13 +5,14 @@
  */
 
 import React from 'react';
-import { withTheme, DefaultTheme } from 'styled-components';
+import { ThemeContext } from 'styled-components';
 import PopoverStyle from './style';
 import Overlay from '../PopoverLay';
 import { Trigger, Placement } from '../types';
 
 const Popover: React.FC<PopoverProps> = (props) => {
-  const arrowSize = parseInt(props.theme.popoverArrowSize as string);
+  const theme = React.useContext(ThemeContext);
+  const arrowSize = parseInt(theme.popoverArrowSize as string);
   const arrowRound = Math.round(-arrowSize - arrowSize / 2);
   return (
     <Overlay
@@ -23,7 +24,7 @@ const Popover: React.FC<PopoverProps> = (props) => {
       eventListener={props.eventListener}
       transformSize={15}
       arrowRound={arrowRound}
-      arrowSize={props.theme.popoverArrowSize as string}
+      arrowSize={theme.popoverArrowSize as string}
     >
       <PopoverStyle>
         <span className="arrow" />
@@ -41,12 +42,6 @@ export interface PopoverProps {
   children: React.ReactNode;
   style?: React.CSSProperties;
   className?: string;
-  theme: DefaultTheme;
 }
-const PopoverWithTheme = withTheme(Popover);
 
-const Popover2: React.FC<Omit<PopoverProps, 'theme'>> = (props) => {
-  return <PopoverWithTheme {...props} />;
-};
-
-export default Popover2;
+export default Popover;
diff --git a/packages/ui/src/PopoverLay/index.tsx b/packages/ui/src/PopoverLay/index.tsx
@@ -42,7 +42,7 @@ const Overlay: React.FC<OverlayProps> = (props) => {
   const targetRef = React.useRef<HTMLDivElement>(null);
   const { position, placement, show, setShow, positionHandle } = usePopoverPosition(props, targetRef, overlayRef);
 
-  let timeOut: number;
+  let timeOut: NodeJS.Timeout;
   const onMouseLeave = () => {
     timeOut = setTimeout(() => {
       setShow(false);

diff --git a/packages/ui/src/Select/index.tsx b/packages/ui/src/Select/index.tsx
@@ -1,17 +1,27 @@
-import { DefaultTheme, withTheme } from 'styled-components';
+import { DefaultTheme, ThemeContext } from 'styled-components';
 import Select, { Props, StylesConfig } from 'react-select';
 import React from 'react';
 import { Shape, Status, Size } from '../types';
 import { ThemeKey } from '@paljs/theme';
+import { GroupTypeBase, OptionTypeBase } from 'react-select/src/types';
 
-interface SelectMainProps {
-  theme: DefaultTheme;
+interface CustomProps {
   shape?: Shape;
   status?: Status;
   size?: Size;
 }
 
-const customStyles: (props: SelectMainProps) => StylesConfig = ({ theme, status, shape, size }) => {
+type SelectMainProps<
+  OptionType extends OptionTypeBase = { label: string; value: string },
+  IsMulti extends boolean = false,
+  GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
+> = CustomProps & Props<OptionType, IsMulti, GroupType>;
+
+function customStyles<
+  OptionType extends OptionTypeBase = { label: string; value: string },
+  IsMulti extends boolean = false,
+  GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
+>({ theme, status, shape, size }: CustomProps & { theme: DefaultTheme }): StylesConfig<OptionType, IsMulti, GroupType> {
   const getThemeKey = (key: string) => {
     return theme[key as ThemeKey].toString();
   };
@@ -155,10 +165,23 @@ const customStyles: (props: SelectMainProps) => StylesConfig = ({ theme, status,
       };
     },
   };
-};
+}
 
-const SelectMain: React.FC<Props & SelectMainProps> = (props) => {
-  return <Select {...props} isRtl={props.theme.dir === 'rtl'} styles={customStyles(props)} />;
+const SelectMain = <
+  OptionType extends OptionTypeBase = { label: string; value: string },
+  IsMulti extends boolean = false,
+  GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
+>(
+  props: React.PropsWithChildren<SelectMainProps<OptionType, IsMulti, GroupType>>,
+) => {
+  const theme = React.useContext(ThemeContext);
+  return (
+    <Select<OptionType, IsMulti, GroupType>
+      {...props}
+      isRtl={props.defaultTheme.dir === 'rtl'}
+      styles={customStyles<OptionType, IsMulti, GroupType>({ ...props, theme })}
+    />
+  );
 };
 
 SelectMain.defaultProps = {
@@ -167,10 +190,4 @@ SelectMain.defaultProps = {
   size: 'Medium',
 };
 
-const SelectMainWithTheme = withTheme(SelectMain);
-
-const SelectWithTheme: React.FC<Props & Partial<SelectMainProps>> = (props) => {
-  return <SelectMainWithTheme {...props} />;
-};
-
-export default SelectWithTheme;
+export default SelectMain;
diff --git a/yarn.lock b/yarn.lock
@@ -2273,14 +2273,6 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
-"@types/[email protected]":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8"
-  integrity sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==
-  dependencies:
-    "@types/prop-types" "*"
-    csstype "^3.0.2"
-
 "@types/[email protected]":
   version "5.1.7"
   resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.7.tgz#3cd10b088c1cb1acde2e4b166b3e8275a3083710"
@@ -2290,74 +2282,74 @@
     "@types/react" "*"
     csstype "^3.0.2"
 
-"@typescript-eslint/[email protected].0":
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.15.0.tgz#13a5a07cf30d0d5781e43480aa2a8d38d308b084"
-  integrity sha512-DJgdGZW+8CFUTz5C/dnn4ONcUm2h2T0itWD85Ob5/V27Ndie8hUoX5HKyGssvR8sUMkAIlUc/AMK67Lqa3kBIQ==
+"@typescript-eslint/[email protected].1":
+  version "4.15.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.15.1.tgz#835f64aa0a403e5e9e64c10ceaf8d05c3f015180"
+  integrity sha512-yW2epMYZSpNJXZy22Biu+fLdTG8Mn6b22kR3TqblVk50HGNV8Zya15WAXuQCr8tKw4Qf1BL4QtI6kv6PCkLoJw==
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.15.0"
-    "@typescript-eslint/scope-manager" "4.15.0"
+    "@typescript-eslint/experimental-utils" "4.15.1"
+    "@typescript-eslint/scope-manager" "4.15.1"
     debug "^4.1.1"
     functional-red-black-tree "^1.0.1"
     lodash "^4.17.15"
     regexpp "^3.0.0"
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/[email protected].0":
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.15.0.tgz#b87c36410a9b23f637689427be85007a2ec1a9c6"
-  integrity sha512-V4vaDWvxA2zgesg4KPgEGiomWEBpJXvY4ZX34Y3qxK8LUm5I87L+qGIOTd9tHZOARXNRt9pLbblSKiYBlGMawg==
+"@typescript-eslint/[email protected].1":
+  version "4.15.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.15.1.tgz#d744d1ac40570a84b447f7aa1b526368afd17eec"
+  integrity sha512-9LQRmOzBRI1iOdJorr4jEnQhadxK4c9R2aEAsm7WE/7dq8wkKD1suaV0S/JucTL8QlYUPU1y2yjqg+aGC0IQBQ==
   dependencies:
     "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/scope-manager" "4.15.0"
-    "@typescript-eslint/types" "4.15.0"
-    "@typescript-eslint/typescript-estree" "4.15.0"
+    "@typescript-eslint/scope-manager" "4.15.1"
+    "@typescript-eslint/types" "4.15.1"
+    "@typescript-eslint/typescript-estree" "4.15.1"
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
-"@typescript-eslint/[email protected].0":
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.15.0.tgz#8df94365b4b7161f9e8514fe28aef19954810b6b"
-  integrity sha512-L6Dtbq8Bc7g2aZwnIBETpmUa9XDKCMzKVwAArnGp5Mn7PRNFjf3mUzq8UeBjL3K8t311hvevnyqXAMSmxO8Gpg==
+"@typescript-eslint/[email protected].1":
+  version "4.15.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.15.1.tgz#4c91a0602733db63507e1dbf13187d6c71a153c4"
+  integrity sha512-V8eXYxNJ9QmXi5ETDguB7O9diAXlIyS+e3xzLoP/oVE4WCAjssxLIa0mqCLsCGXulYJUfT+GV70Jv1vHsdKwtA==
   dependencies:
-    "@typescript-eslint/scope-manager" "4.15.0"
-    "@typescript-eslint/types" "4.15.0"
-    "@typescript-eslint/typescript-estree" "4.15.0"
+    "@typescript-eslint/scope-manager" "4.15.1"
+    "@typescript-eslint/types" "4.15.1"
+    "@typescript-eslint/typescript-estree" "4.15.1"
     debug "^4.1.1"
 
-"@typescript-eslint/[email protected].0":
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.15.0.tgz#c42703558ea6daaaba51a9c3a86f2902dbab9432"
-  integrity sha512-CSNBZnCC2jEA/a+pR9Ljh8Y+5TY5qgbPz7ICEk9WCpSEgT6Pi7H2RIjxfrrbUXvotd6ta+i27sssKEH8Azm75g==
+"@typescript-eslint/[email protected].1":
+  version "4.15.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.15.1.tgz#f6511eb38def2a8a6be600c530c243bbb56ac135"
+  integrity sha512-ibQrTFcAm7yG4C1iwpIYK7vDnFg+fKaZVfvyOm3sNsGAerKfwPVFtYft5EbjzByDJ4dj1WD8/34REJfw/9wdVA==
   dependencies:
-    "@typescript-eslint/types" "4.15.0"
-    "@typescript-eslint/visitor-keys" "4.15.0"
+    "@typescript-eslint/types" "4.15.1"
+    "@typescript-eslint/visitor-keys" "4.15.1"
 
-"@typescript-eslint/[email protected].0":
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.15.0.tgz#3011ae1ac3299bb9a5ac56bdd297cccf679d3662"
-  integrity sha512-su4RHkJhS+iFwyqyXHcS8EGPlUVoC+XREfy5daivjLur9JP8GhvTmDipuRpcujtGC4M+GYhUOJCPDE3rC5NJrg==
+"@typescript-eslint/[email protected].1":
+  version "4.15.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.15.1.tgz#da702f544ef1afae4bc98da699eaecd49cf31c8c"
+  integrity sha512-iGsaUyWFyLz0mHfXhX4zO6P7O3sExQpBJ2dgXB0G5g/8PRVfBBsmQIc3r83ranEQTALLR3Vko/fnCIVqmH+mPw==
 
-"@typescript-eslint/[email protected].0":
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.15.0.tgz#402c86a7d2111c1f7a2513022f22a38a395b7f93"
-  integrity sha512-jG6xTmcNbi6xzZq0SdWh7wQ9cMb2pqXaUp6bUZOMsIlu5aOlxGxgE/t6L/gPybybQGvdguajXGkZKSndZJpksA==
+"@typescript-eslint/[email protected].1":
+  version "4.15.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.15.1.tgz#fa9a9ff88b4a04d901ddbe5b248bc0a00cd610be"
+  integrity sha512-z8MN3CicTEumrWAEB2e2CcoZa3KP9+SMYLIA2aM49XW3cWIaiVSOAGq30ffR5XHxRirqE90fgLw3e6WmNx5uNw==
   dependencies:
-    "@typescript-eslint/types" "4.15.0"
-    "@typescript-eslint/visitor-keys" "4.15.0"
+    "@typescript-eslint/types" "4.15.1"
+    "@typescript-eslint/visitor-keys" "4.15.1"
     debug "^4.1.1"
     globby "^11.0.1"
     is-glob "^4.0.1"
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/[email protected].0":
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.15.0.tgz#2a07768df30c8a5673f1bce406338a07fdec38ca"
-  integrity sha512-RnDtJwOwFucWFAMjG3ghCG/ikImFJFEg20DI7mn4pHEx3vC48lIAoyjhffvfHmErRDboUPC7p9Z2il4CLb7qxA==
+"@typescript-eslint/[email protected].1":
+  version "4.15.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.15.1.tgz#c76abbf2a3be8a70ed760f0e5756bf62de5865dd"
+  integrity sha512-tYzaTP9plooRJY8eNlpAewTOqtWW/4ff/5wBjNVaJ0S0wC4Gpq/zDVRTJa5bq2v1pCNQ08xxMCndcvR+h7lMww==
   dependencies:
-    "@typescript-eslint/types" "4.15.0"
+    "@typescript-eslint/types" "4.15.1"
     eslint-visitor-keys "^2.0.0"
 
 "@zkochan/cmd-shim@^3.1.0":