diff --git a/components/select/select.tsx b/components/select/select.tsx index 32fa8a4..bbeb3eb 100644 --- a/components/select/select.tsx +++ b/components/select/select.tsx @@ -1,4 +1,4 @@ -import React, { useMemo, useRef, useState } from 'react' +import React, { useEffect, useMemo, useRef, useState } from 'react' import { NormalSizes } from '../utils/prop-types' import useClickAway from '../utils/use-click-away' import { pickChildByProps, pickChildrenFirst } from '../utils/collections' @@ -12,6 +12,7 @@ import { getSizes } from './styles' interface Props { disabled?: boolean size?: NormalSizes + value?: string initialValue?: string placeholder?: React.ReactNode | string icon?: React.ReactNode @@ -32,8 +33,8 @@ type NativeAttrs = Omit, keyof Props> export type SelectProps = Props & typeof defaultProps & NativeAttrs const Select: React.FC> = ({ - children, size, disabled, initialValue: init, placeholder, - icon: Icon, onChange, className, pure, ...props + children, size, disabled, initialValue: init, value: customValue, + icon: Icon, onChange, className, pure, placeholder, ...props }) => { const theme = useTheme() const ref = useRef(null) @@ -63,6 +64,11 @@ const Select: React.FC> = ({ useClickAway(ref, () => setVisible(false)) + useEffect(() => { + if (customValue === undefined) return + setValue(customValue) + }, [customValue]) + const selectedChild = useMemo(() => { const [, optionChildren] = pickChildByProps(children, 'value', value) const child = pickChildrenFirst(optionChildren) diff --git a/components/shared/dropdown.tsx b/components/shared/dropdown.tsx index 1e1f415..2b4b080 100644 --- a/components/shared/dropdown.tsx +++ b/components/shared/dropdown.tsx @@ -1,4 +1,4 @@ -import React, { MutableRefObject, useState } from 'react' +import React, { MutableRefObject, useEffect, useState } from 'react' import { createPortal } from 'react-dom' import usePortal from '../utils/use-portal' import useResize from '../utils/use-resize' @@ -54,6 +54,14 @@ const Dropdown: React.FC> = React.memo(({ if (!shouldUpdatePosition) return updateRect() }) + useEffect(() => { + if (!parent || !parent.current) return + parent.current.addEventListener('mouseenter', updateRect) + return () => { + if (!parent || !parent.current) return + parent.current.removeEventListener('mouseenter', updateRect) + } + }, [parent]) const clickHandler = (event: React.MouseEvent) => { event.stopPropagation() diff --git a/lib/components/controls.tsx b/lib/components/controls.tsx index 2276ee8..0f5bd60 100644 --- a/lib/components/controls.tsx +++ b/lib/components/controls.tsx @@ -21,6 +21,8 @@ const Controls: React.FC<{}> = React.memo(({ const switchThemes = (type: 'dark' | 'light') => { updateCustomTheme({ type }) + if (typeof window === 'undefined' || !window.localStorage) return + window.localStorage.setItem('theme', type) } const switchLanguages = () => { updateChineseState(!isChinese) @@ -41,7 +43,7 @@ const Controls: React.FC<{}> = React.memo(({ onClick={redirectGithub} title={isChinese? '代码仓库' : 'Github Repository'}>{isChinese ? '代码仓库' : 'Github'} -