From d7dcba0f7edc818af68e7a3eab17cd749a833d7d Mon Sep 17 00:00:00 2001 From: kkusaeng Date: Thu, 9 May 2024 18:01:12 +0900 Subject: [PATCH 1/3] feature. Modify TFormSectionRow props - Add VerticalAlign prop --- .../form-section/TFormSection.interface.ts | 4 +- .../form-section/TFormSectionContext.ts | 4 ++ .../form-section/TFormSectionItem.tsx | 37 ++++++------------- .../form-section/TFormSectionRow.tsx | 12 +++++- .../form-section/TFormSection.stories.tsx | 13 ++++--- .../form-section/TFormSectionItem.test.tsx | 20 ---------- .../form-section/TFormSectionRow.test.tsx | 24 ++++++++++++ 7 files changed, 62 insertions(+), 52 deletions(-) diff --git a/src/components/data-container/form-section/TFormSection.interface.ts b/src/components/data-container/form-section/TFormSection.interface.ts index f816fb11..23939fff 100644 --- a/src/components/data-container/form-section/TFormSection.interface.ts +++ b/src/components/data-container/form-section/TFormSection.interface.ts @@ -20,8 +20,11 @@ export interface TFormSectionProps extends TBaseProps { formLabelItemAlign?: 'horizontal' | 'vertical'; } +export type RowVerticalAlign = 'top' | 'middle'; + export interface TFormSectionRowProps extends TBaseProps { children: ReactNode, + verticalAlign?: RowVerticalAlign, } export interface TFormSectionItemProps extends TBaseProps { @@ -32,6 +35,5 @@ export interface TFormSectionItemProps extends TBaseProps { required?: boolean, label?: string, - labelMarginBottom?: string, contentStyle?: CSSProperties, } diff --git a/src/components/data-container/form-section/TFormSectionContext.ts b/src/components/data-container/form-section/TFormSectionContext.ts index 913cccd2..2b54460c 100644 --- a/src/components/data-container/form-section/TFormSectionContext.ts +++ b/src/components/data-container/form-section/TFormSectionContext.ts @@ -1,4 +1,5 @@ import {createContext} from 'react'; +import {RowVerticalAlign} from '@/components'; interface FormContext { @@ -8,5 +9,8 @@ interface FormContext { export const formSectionContext = createContext(null); + +export const formSectionRowContext = createContext<{verticalAlign: RowVerticalAlign}>(null); + export default formSectionContext; diff --git a/src/components/data-container/form-section/TFormSectionItem.tsx b/src/components/data-container/form-section/TFormSectionItem.tsx index d0670a50..a8bae700 100644 --- a/src/components/data-container/form-section/TFormSectionItem.tsx +++ b/src/components/data-container/form-section/TFormSectionItem.tsx @@ -1,8 +1,8 @@ -import {CSSProperties, useContext, useEffect, useId, useMemo, useRef, memo, useCallback} from 'react'; +import {CSSProperties, memo, useContext, useId, useMemo, useRef} from 'react'; import TIcon from '~/icon/TIcon'; import TTooltip from '~/guide/tooltip/TTooltip'; import {TFormSectionItemProps} from '@/components'; -import FormContext from './TFormSectionContext'; +import FormContext, {formSectionRowContext} from './TFormSectionContext'; import themeToken from '~style/designToken/ThemeToken.module.scss'; @@ -15,6 +15,7 @@ const TFormSectionItem = (props: TFormSectionItemProps) => { const rootRef = useRef(null); const {column, labelWidth} = useContext(FormContext); + const {verticalAlign} = useContext(formSectionRowContext); const tooltipId = useId(); @@ -62,13 +63,20 @@ const TFormSectionItem = (props: TFormSectionItemProps) => { const labelStyle = useMemo((): CSSProperties => { - const style: CSSProperties = {marginBottom: props.labelMarginBottom}; + const style: CSSProperties = {}; style.minWidth = labelWidth; style.maxWidth = labelWidth; + if (verticalAlign === 'middle') { + style.alignItems = 'center'; + } + if (verticalAlign === 'top') { + style.alignItems = 'flex-start'; + } + return style; - }, [labelWidth, props.labelMarginBottom]); + }, [labelWidth, verticalAlign]); const contentStyle = useMemo((): CSSProperties => { @@ -79,27 +87,6 @@ const TFormSectionItem = (props: TFormSectionItemProps) => { // endregion - // region [Privates] - - const adjustLabelAlignment = useCallback(() => { - if (rootRef.current?.clientHeight > 44) { - rootRef.current.style.alignItems = 'flex-start'; - } - }, []); - - // endregion - - - // region [Effects] - - useEffect(() => { - - adjustLabelAlignment(); - }, [adjustLabelAlignment]); - - // endregion - - return ( diff --git a/src/components/data-container/form-section/TFormSectionRow.tsx b/src/components/data-container/form-section/TFormSectionRow.tsx index 59dda694..c2be8dc7 100644 --- a/src/components/data-container/form-section/TFormSectionRow.tsx +++ b/src/components/data-container/form-section/TFormSectionRow.tsx @@ -1,5 +1,6 @@ import {CSSProperties, useMemo} from 'react'; import {TFormSectionRowProps} from '@/components'; +import {formSectionRowContext} from '~/data-container/form-section/TFormSectionContext'; const TFormSectionRow = (props: TFormSectionRowProps) => { @@ -21,11 +22,20 @@ const TFormSectionRow = (props: TFormSectionRowProps) => { // endregion + return (
- {props.children} + + {props.children} +
); }; + +TFormSectionRow.displayName = 'TFormSectionRow'; +TFormSectionRow.defaultProps = { + verticalAlign: 'middle', +}; + export default TFormSectionRow; diff --git a/stories/components/data-container/form-section/TFormSection.stories.tsx b/stories/components/data-container/form-section/TFormSection.stories.tsx index 0628786f..8255b0ec 100644 --- a/stories/components/data-container/form-section/TFormSection.stories.tsx +++ b/stories/components/data-container/form-section/TFormSection.stories.tsx @@ -149,9 +149,12 @@ const Template = (args: TFormSectionProps) => { - - - + + + + + + @@ -176,10 +179,10 @@ const Template = (args: TFormSectionProps) => { - + + counter={100} rows={5} {...description} /> diff --git a/tests/unit/react/tks/component/data-container/form-section/TFormSectionItem.test.tsx b/tests/unit/react/tks/component/data-container/form-section/TFormSectionItem.test.tsx index 00d39210..d2a7eb80 100644 --- a/tests/unit/react/tks/component/data-container/form-section/TFormSectionItem.test.tsx +++ b/tests/unit/react/tks/component/data-container/form-section/TFormSectionItem.test.tsx @@ -98,26 +98,6 @@ describe('TFormSectionItem', () => { }); - it('When labelMarginBottom prop is applied, it should be displayed on label area', () => { - - // Arrange - const labelMarginBottom = '10px'; - render( - - - content - - , - ); - - // eslint-disable-next-line testing-library/no-node-access - const root = screen.getByText('레이블').parentElement; - - // Assert - expect(root) - .toHaveStyle({marginBottom: labelMarginBottom}); - }); - it('When contentStyle prop is applied, it should be displayed on label content area', () => { // Arrange diff --git a/tests/unit/react/tks/component/data-container/form-section/TFormSectionRow.test.tsx b/tests/unit/react/tks/component/data-container/form-section/TFormSectionRow.test.tsx index aa0de30e..a16c3f8e 100644 --- a/tests/unit/react/tks/component/data-container/form-section/TFormSectionRow.test.tsx +++ b/tests/unit/react/tks/component/data-container/form-section/TFormSectionRow.test.tsx @@ -1,5 +1,8 @@ import {render, screen} from '@testing-library/react'; +import {TFormSection} from '@/components'; import TFormSectionRow from '~/data-container/form-section/TFormSectionRow'; +import TFormSectionItem from '~/data-container/form-section/TFormSectionItem'; + describe('TFormSectionRow', () => { @@ -28,5 +31,26 @@ describe('TFormSectionRow', () => { expect(root) .toHaveStyle({width: '100%'}); }); + + it('VerticalAlign prop applies to root', () => { + + // Arrange + const labelText = 'Test Label'; + + render( + + + Content + + , + ); + const itemRoot = screen.getByText(labelText); + + // Assert + // eslint-disable-next-line testing-library/no-node-access + expect(itemRoot.parentElement) + .toHaveStyle({alignItems: 'flex-start'}); + }); + }); }); From 4f067e9c21daf8a0d141ad3120358d849a2c15ec Mon Sep 17 00:00:00 2001 From: Siyeop Date: Mon, 13 May 2024 13:59:58 +0900 Subject: [PATCH 2/3] feature. Modify FormSectionVerticalAlign props --- .../form-section/TFormSection.interface.ts | 8 +++++--- .../form-section/TFormSection.tsx | 11 +++++++--- .../form-section/TFormSectionContext.ts | 13 ++++++++---- .../form-section/TFormSectionItem.tsx | 11 +++++----- .../form-section/TFormSectionRow.tsx | 20 ++++++++++++------- .../data-container/tab-box/TTabBoxContext.ts | 2 +- .../form-section/TFormSection.stories.tsx | 12 ++++++----- .../form-section/TFormSectionRow.test.tsx | 2 +- 8 files changed, 49 insertions(+), 30 deletions(-) diff --git a/src/components/data-container/form-section/TFormSection.interface.ts b/src/components/data-container/form-section/TFormSection.interface.ts index 23939fff..0a8afc18 100644 --- a/src/components/data-container/form-section/TFormSection.interface.ts +++ b/src/components/data-container/form-section/TFormSection.interface.ts @@ -1,6 +1,8 @@ import {ReactElement, ReactNode, CSSProperties} from 'react'; import {TBaseProps} from '@/common/base/TBase.interface'; +export type RowVerticalAlign = 'top' | 'middle'; +export type LabelItemAlign = 'horizontal' | 'vertical'; export interface TFormSectionProps extends TBaseProps { children: ReactNode, @@ -17,14 +19,14 @@ export interface TFormSectionProps extends TBaseProps { leftAction?: ReactElement, rightAction?: ReactElement, - formLabelItemAlign?: 'horizontal' | 'vertical'; + formLabelItemAlign?: LabelItemAlign; + formRowVerticalAlign?: RowVerticalAlign, } -export type RowVerticalAlign = 'top' | 'middle'; export interface TFormSectionRowProps extends TBaseProps { children: ReactNode, - verticalAlign?: RowVerticalAlign, + formRowVerticalAlign?: RowVerticalAlign, } export interface TFormSectionItemProps extends TBaseProps { diff --git a/src/components/data-container/form-section/TFormSection.tsx b/src/components/data-container/form-section/TFormSection.tsx index 7ad5a3d2..6b4245b5 100644 --- a/src/components/data-container/form-section/TFormSection.tsx +++ b/src/components/data-container/form-section/TFormSection.tsx @@ -1,7 +1,7 @@ import {CSSProperties, useMemo} from 'react'; import TIcon from '~/icon/TIcon'; import {TFormSectionProps} from '@/components'; -import FormContext from './TFormSectionContext'; +import TFormSectionContext from './TFormSectionContext'; import TSection from '~/data-container/section/TSection'; @@ -53,9 +53,13 @@ const TFormSection = (props: TFormSectionProps) => { ) } - + {props.children} - + ); @@ -65,5 +69,6 @@ TFormSection.defaultProps = { column: 2, labelWidth: '104px', formLabelItemAlign: 'horizontal', + formRowVerticalAlign: 'middle', }; export default TFormSection; diff --git a/src/components/data-container/form-section/TFormSectionContext.ts b/src/components/data-container/form-section/TFormSectionContext.ts index 2b54460c..b1d192b7 100644 --- a/src/components/data-container/form-section/TFormSectionContext.ts +++ b/src/components/data-container/form-section/TFormSectionContext.ts @@ -2,15 +2,20 @@ import {createContext} from 'react'; import {RowVerticalAlign} from '@/components'; -interface FormContext { +export interface TFormSectionContext { column: number, labelWidth: string, + + rowVerticalAlign: RowVerticalAlign } +export const TFormSectionContext = createContext({ + column: 2, + labelWidth: '104px', -export const formSectionContext = createContext(null); + rowVerticalAlign: 'middle', -export const formSectionRowContext = createContext<{verticalAlign: RowVerticalAlign}>(null); +}); -export default formSectionContext; +export default TFormSectionContext; diff --git a/src/components/data-container/form-section/TFormSectionItem.tsx b/src/components/data-container/form-section/TFormSectionItem.tsx index a8bae700..5016010c 100644 --- a/src/components/data-container/form-section/TFormSectionItem.tsx +++ b/src/components/data-container/form-section/TFormSectionItem.tsx @@ -2,7 +2,7 @@ import {CSSProperties, memo, useContext, useId, useMemo, useRef} from 'react'; import TIcon from '~/icon/TIcon'; import TTooltip from '~/guide/tooltip/TTooltip'; import {TFormSectionItemProps} from '@/components'; -import FormContext, {formSectionRowContext} from './TFormSectionContext'; +import TFormSectionContext from './TFormSectionContext'; import themeToken from '~style/designToken/ThemeToken.module.scss'; @@ -14,8 +14,7 @@ const TFormSectionItem = (props: TFormSectionItemProps) => { // region [Hooks] const rootRef = useRef(null); - const {column, labelWidth} = useContext(FormContext); - const {verticalAlign} = useContext(formSectionRowContext); + const {column, labelWidth, rowVerticalAlign} = useContext(TFormSectionContext); const tooltipId = useId(); @@ -68,15 +67,15 @@ const TFormSectionItem = (props: TFormSectionItemProps) => { style.minWidth = labelWidth; style.maxWidth = labelWidth; - if (verticalAlign === 'middle') { + if (rowVerticalAlign === 'middle') { style.alignItems = 'center'; } - if (verticalAlign === 'top') { + if (rowVerticalAlign === 'top') { style.alignItems = 'flex-start'; } return style; - }, [labelWidth, verticalAlign]); + }, [labelWidth, rowVerticalAlign]); const contentStyle = useMemo((): CSSProperties => { diff --git a/src/components/data-container/form-section/TFormSectionRow.tsx b/src/components/data-container/form-section/TFormSectionRow.tsx index c2be8dc7..41b054e6 100644 --- a/src/components/data-container/form-section/TFormSectionRow.tsx +++ b/src/components/data-container/form-section/TFormSectionRow.tsx @@ -1,9 +1,15 @@ -import {CSSProperties, useMemo} from 'react'; +import {CSSProperties, useContext, useMemo} from 'react'; import {TFormSectionRowProps} from '@/components'; -import {formSectionRowContext} from '~/data-container/form-section/TFormSectionContext'; +import TFormSectionContext from '~/data-container/form-section/TFormSectionContext'; + const TFormSectionRow = (props: TFormSectionRowProps) => { + // region [Hooks] + + const formContext = useContext(TFormSectionContext); + + // endregion // region [Styles] @@ -25,17 +31,17 @@ const TFormSectionRow = (props: TFormSectionRowProps) => { return (
- + {props.children} - +
); }; TFormSectionRow.displayName = 'TFormSectionRow'; -TFormSectionRow.defaultProps = { - verticalAlign: 'middle', -}; export default TFormSectionRow; diff --git a/src/components/data-container/tab-box/TTabBoxContext.ts b/src/components/data-container/tab-box/TTabBoxContext.ts index 6952e35c..f8731e04 100644 --- a/src/components/data-container/tab-box/TTabBoxContext.ts +++ b/src/components/data-container/tab-box/TTabBoxContext.ts @@ -1,4 +1,4 @@ -import {createContext, CSSProperties, MouseEvent} from 'react'; +import {createContext} from 'react'; import {TTabBoxValue} from './TTabBox.interface'; type tabBoxContext = { diff --git a/stories/components/data-container/form-section/TFormSection.stories.tsx b/stories/components/data-container/form-section/TFormSection.stories.tsx index 8255b0ec..02aeaca7 100644 --- a/stories/components/data-container/form-section/TFormSection.stories.tsx +++ b/stories/components/data-container/form-section/TFormSection.stories.tsx @@ -78,7 +78,7 @@ const Template = (args: TFormSectionProps) => { const verticalRightAction = useMemo(() => (<> notify.info('취소 이벤트 발생')}>취소 저장 - ), []); + ), [verticalValidate]); const noRowRightAction = useMemo(() => (<> notify.info('취소 이벤트 발생')}>취소 @@ -90,8 +90,10 @@ const Template = (args: TFormSectionProps) => { <>
- 앱 생성 양식 예제입니다.} - > + 앱 생성 양식 예제입니다.} formRowVerticalAlign={'top'}> @@ -149,7 +151,7 @@ const Template = (args: TFormSectionProps) => { - + @@ -179,7 +181,7 @@ const Template = (args: TFormSectionProps) => { - + diff --git a/tests/unit/react/tks/component/data-container/form-section/TFormSectionRow.test.tsx b/tests/unit/react/tks/component/data-container/form-section/TFormSectionRow.test.tsx index a16c3f8e..8a5c9a3c 100644 --- a/tests/unit/react/tks/component/data-container/form-section/TFormSectionRow.test.tsx +++ b/tests/unit/react/tks/component/data-container/form-section/TFormSectionRow.test.tsx @@ -39,7 +39,7 @@ describe('TFormSectionRow', () => { render( - + Content , From 8d74553804f119d4a3ef95a5ac98d80cc088a711 Mon Sep 17 00:00:00 2001 From: Siyeop Date: Mon, 13 May 2024 14:00:10 +0900 Subject: [PATCH 3/3] 0.6.22 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ea2676e9..312bb313 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tksui-components", - "version": "0.6.21", + "version": "0.6.22", "private": false, "type": "module", "module": "lib/esm/index.js",