From 91368aa3c77b29afd4134d1a5cbd0b462aafa639 Mon Sep 17 00:00:00 2001 From: evan-moon Date: Mon, 1 Feb 2021 01:09:52 +0900 Subject: [PATCH 1/3] =?UTF-8?q?fix(ui-kit):=20=ED=83=AD=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=83=80=EC=9E=85=20=EA=B9=A8?= =?UTF-8?q?=EC=A7=80=EB=8A=94=20=EB=B6=80=EB=B6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/components/Tabs/TabNavList.tsx | 44 ++++++++++++----------- ui-kit/src/components/Tabs/TabPane.tsx | 32 +++++++++++------ ui-kit/src/components/Tabs/Tabs.tsx | 7 ++-- ui-kit/src/hooks/useMergedState.ts | 4 +-- ui-kit/src/hooks/useRefs.ts | 2 +- ui-kit/src/utils/index.ts | 1 - ui-kit/src/utils/toArray.ts | 26 -------------- 7 files changed, 50 insertions(+), 66 deletions(-) delete mode 100644 ui-kit/src/utils/toArray.ts diff --git a/ui-kit/src/components/Tabs/TabNavList.tsx b/ui-kit/src/components/Tabs/TabNavList.tsx index 645ac16d..3472fa81 100644 --- a/ui-kit/src/components/Tabs/TabNavList.tsx +++ b/ui-kit/src/components/Tabs/TabNavList.tsx @@ -18,17 +18,20 @@ export interface TabNavListProps { children?: (node: React.ReactElement) => React.ReactElement; } -function TabNavList(props: TabNavListProps, ref: React.Ref) { +function TabNavList( + { animated = true, ...props }: TabNavListProps, + ref: React.Ref +) { const { tabs } = useContext(TabContext); - const { id, activeKey, animated, tabWidth, onTabClick } = props; + const { id, activeKey, tabWidth, onTabClick } = props; - const tabsWrapperRef = useRef(); - const tabListRef = useRef(); + const tabsWrapperRef = useRef(null); + const tabListRef = useRef(null); const getTabRef = useRefs(); const [wrapperScrollWidth, setWrapperScrollWidth] = useState(0); - const [wrapperContentWidth, setWrapperContentWidth] = useState(0); - const [wrapperWidth, setWrapperWidth] = useState(0); + const [, setWrapperContentWidth] = useState(0); + const [, setWrapperWidth] = useState(0); const [barStyle, setBarStyle] = useState(); const [tabSizes, setTabSizes] = useState(new Map()); @@ -38,18 +41,19 @@ function TabNavList(props: TabNavListProps, ref: React.Ref) { const lastOffset = tabSizes.get(tabs[0].key) ?? DEFAULT_SIZE; const rightOffset = lastOffset.left + lastOffset.width; - for (let i = 0; i < tabs.length; i += 1) { - const { key } = tabs[i]; + tabs.forEach(({ key }, i) => { + const prevTab = tabs[i - 1]; + let data = tabSizes.get(key); if (!data) { - data = tabSizes.get(tabs[i - 1]?.key) || DEFAULT_SIZE; + data = tabSizes.get(prevTab?.key) ?? DEFAULT_SIZE; } - const entity = (map.get(key) || { ...data }) as TabOffset; + const entity = (map.get(key) ?? { ...data }) as TabOffset; entity.right = rightOffset - entity.left - entity.width; map.set(key, entity); - } + }); return map; }, [tabs.map((tab) => tab.key).join('_'), tabSizes, wrapperScrollWidth]); @@ -61,18 +65,18 @@ function TabNavList(props: TabNavListProps, ref: React.Ref) { if (activeTabOffset) { newBarStyle.left = activeTabOffset.left; - newBarStyle.width = tabWidth ? tabWidth : activeTabOffset.width; + newBarStyle.width = tabWidth ?? activeTabOffset.width; } setBarStyle(newBarStyle); }, [activeTabOffset, tabWidth]); useEffect(() => { - const offsetWidth = tabsWrapperRef.current?.offsetWidth || 0; + const offsetWidth = tabsWrapperRef.current?.offsetWidth ?? 0; setWrapperWidth(offsetWidth); - const newWrapperScrollWidth = tabListRef.current?.offsetWidth || 0; + const newWrapperScrollWidth = tabListRef.current?.offsetWidth ?? 0; setWrapperScrollWidth(newWrapperScrollWidth); @@ -81,7 +85,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref) { setTabSizes(() => { const newSizes: TabSizeMap = new Map(); tabs.forEach(({ key }) => { - const tabNode = getTabRef(key).current; + const tabNode = getTabRef(key)?.current; if (tabNode) { newSizes.set(key, { @@ -97,8 +101,6 @@ function TabNavList(props: TabNavListProps, ref: React.Ref) { }); }, []); - function scrollToTab(key = activeKey) {} - const tabNodes: React.ReactElement[] = tabs.map((tab) => { const { key } = tab; return ( @@ -113,9 +115,9 @@ function TabNavList(props: TabNavListProps, ref: React.Ref) { onTabClick(key, e); }} onFocus={() => { - scrollToTab(key); - - tabsWrapperRef.current.scrollToLeft = 0; + if (tabsWrapperRef?.current != null) { + tabsWrapperRef.current.scrollLeft = 0; + } }} /> ); @@ -130,7 +132,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref) {
diff --git a/ui-kit/src/components/Tabs/TabPane.tsx b/ui-kit/src/components/Tabs/TabPane.tsx index 476191fa..ce230ab2 100644 --- a/ui-kit/src/components/Tabs/TabPane.tsx +++ b/ui-kit/src/components/Tabs/TabPane.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import classnames from 'classnames'; export interface TabPaneProps { @@ -9,17 +9,27 @@ export interface TabPaneProps { disabled?: boolean; } -export default function TabPane({ active, animated, children }: TabPaneProps) { - const mergedStyle: React.CSSProperties = {}; - if (!active) { - if (animated) { - mergedStyle.visibility = 'hidden'; - mergedStyle.height = 0; - mergedStyle.overflowY = 'hidden'; +const animatedInvisibleStyle = { + visibility: 'hidden', + height: 0, + overflowY: 'hidden', +}; +const notAnimatedInvisibleStyle = { + display: 'none', +}; + +export default function TabPane({ active = false, animated, children }: TabPaneProps) { + const style = useMemo(() => { + if (active) { + return {}; } else { - mergedStyle.display = 'none'; + if (animated === true) { + return animatedInvisibleStyle; + } else { + return notAnimatedInvisibleStyle; + } } - } + }, [active, animated]); return (
{active && children}
diff --git a/ui-kit/src/components/Tabs/Tabs.tsx b/ui-kit/src/components/Tabs/Tabs.tsx index e14289cf..343f351f 100644 --- a/ui-kit/src/components/Tabs/Tabs.tsx +++ b/ui-kit/src/components/Tabs/Tabs.tsx @@ -1,10 +1,9 @@ import React from 'react'; import classnames from 'classnames'; -import TabPane, { TabPaneProps } from './TabPane'; +import TabPane from './TabPane'; import TabNavList from './TabNavList'; import { Tab } from './types'; import { useMergedState } from '../../hooks'; -import { toArray } from '../../utils'; import TabContext from './TabContext'; import TabPanelList from './TabPanelList'; @@ -19,8 +18,8 @@ export interface TabsProps extends Omit, 'o } function parseTabList(children: React.ReactNode): Tab[] { - return toArray(children) - .map((node: React.ReactElement) => { + return React.Children.toArray(children) + .map((node) => { if (React.isValidElement(node)) { const key = node.key !== undefined ? String(node.key) : undefined; return { diff --git a/ui-kit/src/hooks/useMergedState.ts b/ui-kit/src/hooks/useMergedState.ts index ec9755dd..56d73f53 100644 --- a/ui-kit/src/hooks/useMergedState.ts +++ b/ui-kit/src/hooks/useMergedState.ts @@ -9,7 +9,7 @@ export default function useMergedState( postState?: (value: T) => T; } ): [R, (value: T) => void] { - const { defaultValue, value, onChange, postState } = option || {}; + const { defaultValue, value, onChange, postState } = option ?? {}; const [innerValue, setInnerValue] = React.useState(() => { if (value !== undefined) { return value; @@ -42,7 +42,7 @@ export default function useMergedState( } if (value === undefined) { - setInnerValue(value); + setInnerValue(value as any); } }, [value]); diff --git a/ui-kit/src/hooks/useRefs.ts b/ui-kit/src/hooks/useRefs.ts index 2bf63d2e..ac4d2e4d 100644 --- a/ui-kit/src/hooks/useRefs.ts +++ b/ui-kit/src/hooks/useRefs.ts @@ -1,7 +1,7 @@ import React, { useRef } from 'react'; // Key 기반으로 RefObject 저장하고 캐시로 성능 향상화 -export default function useRefs(): (key: React.Key) => React.RefObject { +export default function useRefs() { const cacheRefs = useRef(new Map>()); function getRef(key: React.Key) { diff --git a/ui-kit/src/utils/index.ts b/ui-kit/src/utils/index.ts index d19a89a2..14be0d6d 100644 --- a/ui-kit/src/utils/index.ts +++ b/ui-kit/src/utils/index.ts @@ -1,2 +1 @@ export { generateID } from './generateID'; -export { default as toArray } from './toArray'; diff --git a/ui-kit/src/utils/toArray.ts b/ui-kit/src/utils/toArray.ts deleted file mode 100644 index 4c3bc451..00000000 --- a/ui-kit/src/utils/toArray.ts +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -export interface Option { - keepEmpty?: boolean; -} - -export default function toArray( - children: React.ReactNode, - option: Option = {} -): React.ReactElement[] { - let ret: React.ReactElement[] = []; - - React.Children.forEach(children, (child: any) => { - if ((child === undefined || child === null) && !option.keepEmpty) { - return; - } - - if (Array.isArray(child)) { - ret = ret.concat(toArray(child)); - } else { - ret.push(child); - } - }); - - return ret; -} From 9d369411d4ea08aa5aaa4cfc802e3cd6ddc4990a Mon Sep 17 00:00:00 2001 From: evan-moon Date: Mon, 1 Feb 2021 01:24:49 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix(ui-kit):=20=ED=83=AD=EC=9D=B4=20?= =?UTF-8?q?=EC=B4=88=EA=B8=B0=ED=99=94=20=EB=90=A0=20=EB=95=8C=20=EC=9E=90?= =?UTF-8?q?=EB=8F=99=20=EC=84=A0=ED=83=9D=EB=90=98=EC=A7=80=20=EC=95=8A?= =?UTF-8?q?=EB=8A=94=20=EC=9D=B4=EC=8A=88=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui-kit/src/components/Tabs/Tabs.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui-kit/src/components/Tabs/Tabs.tsx b/ui-kit/src/components/Tabs/Tabs.tsx index 343f351f..53a8b7e7 100644 --- a/ui-kit/src/components/Tabs/Tabs.tsx +++ b/ui-kit/src/components/Tabs/Tabs.tsx @@ -21,7 +21,7 @@ function parseTabList(children: React.ReactNode): Tab[] { return React.Children.toArray(children) .map((node) => { if (React.isValidElement(node)) { - const key = node.key !== undefined ? String(node.key) : undefined; + const key = node.key !== undefined ? String(node.key).replace(/\.\$/, '') : undefined; return { key, ...node.props, @@ -39,6 +39,7 @@ function Tabs( ref: React.Ref ) { const tabs = parseTabList(children); + console.log(tabs); const [mergedActiveKey, setMergedActiveKey] = useMergedState(() => tabs[0]?.key, { value: activeKey, From 6a975d2732cbddf0986dd958a6065d5b4a7c0d32 Mon Sep 17 00:00:00 2001 From: evan-moon Date: Mon, 1 Feb 2021 01:28:08 +0900 Subject: [PATCH 3/3] remove console --- ui-kit/src/components/Tabs/Tabs.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/ui-kit/src/components/Tabs/Tabs.tsx b/ui-kit/src/components/Tabs/Tabs.tsx index 53a8b7e7..523249fb 100644 --- a/ui-kit/src/components/Tabs/Tabs.tsx +++ b/ui-kit/src/components/Tabs/Tabs.tsx @@ -39,7 +39,6 @@ function Tabs( ref: React.Ref ) { const tabs = parseTabList(children); - console.log(tabs); const [mergedActiveKey, setMergedActiveKey] = useMergedState(() => tabs[0]?.key, { value: activeKey,