From ff2cd7dd86fad4872a10b4a32e683318d7c72b8c Mon Sep 17 00:00:00 2001 From: Siyeop Date: Thu, 18 Jul 2024 15:44:00 +0900 Subject: [PATCH 01/23] bugfix. Bugfix regarding text trim --- src/components/input/text-field/TTextField.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/input/text-field/TTextField.tsx b/src/components/input/text-field/TTextField.tsx index 759c728b..6fd889c6 100644 --- a/src/components/input/text-field/TTextField.tsx +++ b/src/components/input/text-field/TTextField.tsx @@ -24,7 +24,7 @@ const TTextField = forwardRef((props: TTextFieldProps, ref: Ref) const [isPasswordVisible, setIsPasswordVisible] = useState(false); const [hasFocus, setHasFocus] = useState(false); - const validator = useValidator(props.noTrim ? props.value : props.value?.trim(), props.rules, props.successMessage); + const validator = useValidator(props.noTrim ? props.value : props.value?.toString().trim(), props.rules, props.successMessage); const inputRef = useRef(null); const textareaRef = useRef(null); const inputUuid = uniqueId(); @@ -138,7 +138,7 @@ const TTextField = forwardRef((props: TTextFieldProps, ref: Ref) if (props.noTrim) { return props.value?.length; } - return props.value?.trim().length; + return props.value?.toString().trim().length; }, [props.noTrim, props.value]); From c2c2dd660875d4bbdf0a4ee97a5fb2bb17b6adb7 Mon Sep 17 00:00:00 2001 From: Siyeop Date: Thu, 18 Jul 2024 15:44:31 +0900 Subject: [PATCH 02/23] 0.7.18 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index acb24480..2a58a83b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tksui-components", - "version": "0.7.17", + "version": "0.7.18", "private": false, "type": "module", "module": "lib/esm/index.js", From 9796579493275fdfa0517152e7e0a03a04c97a20 Mon Sep 17 00:00:00 2001 From: Siyeop Date: Fri, 19 Jul 2024 13:51:08 +0900 Subject: [PATCH 03/23] feature. Versionup storybook: v7 -> v8 --- package.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 2a58a83b..7dbd33e9 100644 --- a/package.json +++ b/package.json @@ -29,13 +29,13 @@ "@babel/preset-env": "^7.22.10", "@babel/preset-react": "^7.22.5", "@babel/preset-typescript": "^7.22.5", - "@storybook/addon-actions": "^7.5.1", - "@storybook/addon-essentials": "^7.5.1", - "@storybook/addon-interactions": "^7.5.1", - "@storybook/addon-links": "^7.5.1", + "@storybook/addon-actions": "^8.2.4", + "@storybook/addon-essentials": "^8.2.4", + "@storybook/addon-interactions": "^8.2.4", + "@storybook/addon-links": "^8.2.4", "@storybook/preset-scss": "^1.0.3", - "@storybook/react": "^7.5.1", - "@storybook/react-vite": "^7.5.1", + "@storybook/react": "^8.2.4", + "@storybook/react-vite": "^8.2.4", "@storybook/testing-library": "^0.2.2", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", @@ -46,7 +46,7 @@ "@types/react-slick": "^0.23.11", "@typescript-eslint/eslint-plugin": "^5.59.0", "@typescript-eslint/parser": "^5.59.0", - "@vitejs/plugin-react": "^4.0.0", + "@vitejs/plugin-react": "^4.3.1", "esbuild": "^0.19.5", "eslint": "^8.38.0", "eslint-config-airbnb-base": "^15.0.0", @@ -67,12 +67,12 @@ "rimraf": "^5.0.1", "rollup-plugin-visualizer": "^5.9.2", "sass": "^1.69.1", - "storybook": "^7.5.1", + "storybook": "^8.2.4", "ts-jest": "^29.1.1", "tsc-alias": "^1.8.7", "typescript": "^5.0.2", "typescript-plugin-css-modules": "^5.0.2", - "vite": "^5.0.10", + "vite": "^5.3.3", "vite-plugin-compression2": "^0.10.4" }, "peerDependencies": { From c0efebefb04c5e98608a923d3aba6a44eff21ecc Mon Sep 17 00:00:00 2001 From: Siyeop Date: Fri, 19 Jul 2024 14:00:16 +0900 Subject: [PATCH 04/23] feature. Avoid scss nested violation rule --- .../component/data-container/form-section/TFormSection.scss | 5 +++-- .../component/input/text-array-field/TTextArrayField.scss | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/styles/component/data-container/form-section/TFormSection.scss b/src/styles/component/data-container/form-section/TFormSection.scss index 5ae6b520..44683c8b 100644 --- a/src/styles/component/data-container/form-section/TFormSection.scss +++ b/src/styles/component/data-container/form-section/TFormSection.scss @@ -13,8 +13,6 @@ .t-form-section__content__info { - .t-icon {margin-top: $t-spacing-2;} - display: flex; align-items: center; gap: $t-spacing-6; @@ -22,6 +20,9 @@ color: $t-gray-color-5; background: $t-gray-color-1; @include typo-element-3; + + .t-icon {margin-top: $t-spacing-2;} + } } diff --git a/src/styles/component/input/text-array-field/TTextArrayField.scss b/src/styles/component/input/text-array-field/TTextArrayField.scss index 8b7d1846..5c3e41d7 100644 --- a/src/styles/component/input/text-array-field/TTextArrayField.scss +++ b/src/styles/component/input/text-array-field/TTextArrayField.scss @@ -12,6 +12,7 @@ gap: $t-spacing-4; cursor: text; padding: $t-spacing-4 $t-spacing-16; + .t-chip { height: 24px; } .t-chip + .t-chip { margin-left: 0; } } @@ -19,14 +20,14 @@ .t-text-field { margin-left: 4px; flex: 1 0 80px; + width: auto; + min-width: 80px; .t-text-field__container { border: none; padding: 0; height: 24px; } - width: auto; - min-width: 80px; } From 193b923ce5f2029753366b803cd225232404a43d Mon Sep 17 00:00:00 2001 From: Siyeop Date: Fri, 19 Jul 2024 14:02:11 +0900 Subject: [PATCH 05/23] 0.7.19 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7dbd33e9..15ca0591 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tksui-components", - "version": "0.7.18", + "version": "0.7.19", "private": false, "type": "module", "module": "lib/esm/index.js", From 466786f04ae5e553aae6c2c8f77e3d3a2057a1be Mon Sep 17 00:00:00 2001 From: Siyeop Date: Fri, 19 Jul 2024 14:04:45 +0900 Subject: [PATCH 06/23] feature. Version up ag-grid: v30 -> v32 --- package.json | 4 ++-- .../data-container/data-grid/TDataGrid.interface.ts | 5 +++-- src/components/data-container/data-grid/TDataGrid.tsx | 3 +-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 15ca0591..f8969590 100644 --- a/package.json +++ b/package.json @@ -80,8 +80,8 @@ }, "dependencies": { "@material-symbols/font-300": "^0.14.5", - "ag-grid-community": "^30.0.6", - "ag-grid-react": "^30.0.6", + "ag-grid-community": "^32.0.2", + "ag-grid-react": "^32.0.2", "lodash": "^4.17.21", "react-modal": "^3.16.1", "react-slick": "^0.29.0", diff --git a/src/components/data-container/data-grid/TDataGrid.interface.ts b/src/components/data-container/data-grid/TDataGrid.interface.ts index c08ac8b5..6247ba9c 100644 --- a/src/components/data-container/data-grid/TDataGrid.interface.ts +++ b/src/components/data-container/data-grid/TDataGrid.interface.ts @@ -1,5 +1,6 @@ -import {AgReactUiProps} from 'ag-grid-react/lib/shared/interfaces'; + import {ReactElement, ReactNode} from 'react'; +import {AgGridReactProps} from 'ag-grid-react'; import {TBaseProps} from '@/common/base/TBase.interface'; @@ -14,7 +15,7 @@ export interface TPageResponseVO extends TPageRequestVO { } -export interface TDataGridProps extends TBaseProps, AgReactUiProps { +export interface TDataGridProps extends TBaseProps, AgGridReactProps { height?: string, maxRowsWithoutScroll?: number, minRowsVisible?: number, diff --git a/src/components/data-container/data-grid/TDataGrid.tsx b/src/components/data-container/data-grid/TDataGrid.tsx index e445698f..53932d0f 100644 --- a/src/components/data-container/data-grid/TDataGrid.tsx +++ b/src/components/data-container/data-grid/TDataGrid.tsx @@ -1,7 +1,6 @@ -import {DomLayoutType} from 'ag-grid-community/dist/lib/entities/gridOptions'; import {CSSProperties, forwardRef, Ref, useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react'; import {AgGridReact} from 'ag-grid-react'; -import {SelectionChangedEvent} from 'ag-grid-community'; +import {DomLayoutType, SelectionChangedEvent} from 'ag-grid-community'; import {TDataGridProps} from '@/components'; import TPagination from '../pagination/TPagination'; import TActionBar from '~/data-container/action-bar/TActionBar'; From 411cfe3374e3901ba31e37548f891ba0f2e7d07a Mon Sep 17 00:00:00 2001 From: Siyeop Date: Fri, 19 Jul 2024 14:27:19 +0900 Subject: [PATCH 07/23] feature. Version up some dev dependencies to latest versions --- package.json | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index f8969590..3962dac9 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ "@storybook/preset-scss": "^1.0.3", "@storybook/react": "^8.2.4", "@storybook/react-vite": "^8.2.4", - "@storybook/testing-library": "^0.2.2", + "@storybook/test": "^8.2.4", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.3", @@ -59,12 +59,12 @@ "eslint-plugin-storybook": "^0.6.15", "eslint-plugin-testing-library": "^5.10.2", "fs-extra": "^11.1.1", - "glob": "^10.3.10", - "jest": "^29.6.3", - "jest-environment-jsdom": "^29.6.3", + "glob": "^11.0.0", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "rimraf": "^5.0.1", + "rimraf": "^6.0.1", "rollup-plugin-visualizer": "^5.9.2", "sass": "^1.69.1", "storybook": "^8.2.4", @@ -95,6 +95,5 @@ "bugs": { "url": "https://github.com/openinfradev/tksui-components/issues" }, - "license": "MIT", - "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610" + "license": "MIT" } From e00d201e5db7c9f6b4fe007f5c647cee39d9633b Mon Sep 17 00:00:00 2001 From: Siyeop Date: Fri, 19 Jul 2024 14:41:41 +0900 Subject: [PATCH 08/23] 0.7.20 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3962dac9..ed039e5d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tksui-components", - "version": "0.7.19", + "version": "0.7.20", "private": false, "type": "module", "module": "lib/esm/index.js", From caa563e79cdeef3252bc7ba66a6f5efb3c874e3a Mon Sep 17 00:00:00 2001 From: Siyeop Date: Fri, 19 Jul 2024 14:44:20 +0900 Subject: [PATCH 09/23] feature. Prepare to upgrade React to version 19 --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ed039e5d..918cd90c 100644 --- a/package.json +++ b/package.json @@ -62,8 +62,8 @@ "glob": "^11.0.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", "rimraf": "^6.0.1", "rollup-plugin-visualizer": "^5.9.2", "sass": "^1.69.1", From 68953b709477aa86f74c5603a052f7193b72b52f Mon Sep 17 00:00:00 2001 From: Siyeop Date: Mon, 22 Jul 2024 10:07:50 +0900 Subject: [PATCH 10/23] feature. [React version up] Remove default props on LoadingIndicator --- .../loading-indicator/TLoadingIndicator.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/components/guide/loading-indicator/TLoadingIndicator.tsx b/src/components/guide/loading-indicator/TLoadingIndicator.tsx index a4ce342f..3b325bb6 100644 --- a/src/components/guide/loading-indicator/TLoadingIndicator.tsx +++ b/src/components/guide/loading-indicator/TLoadingIndicator.tsx @@ -4,9 +4,20 @@ import TDefaultSpinner from '~/guide/loading-indicator/variant/TDefaultSpinner'; import TSunSpinner from '~/guide/loading-indicator/variant/TSunSpinner'; -const TLoadingIndicator = (props: TLoadingIndicatorProps) => { +const TLoadingIndicator = ({ + variant = 'default', + size = 'medium', + ...restProps +}: TLoadingIndicatorProps) => { + // region [Hooks] + + const props: TLoadingIndicatorProps = {variant, size, ...restProps}; + + + // endregion + // region [Styles] const rootClass: string = useMemo((): string => { @@ -64,9 +75,5 @@ const TLoadingIndicator = (props: TLoadingIndicatorProps) => { ); }; -TLoadingIndicator.defaultProps = { - variant: 'default', - size: 'medium', -}; export default memo(TLoadingIndicator); From 4efcfca061fa4856efddbe4fd2cc7230af8a986b Mon Sep 17 00:00:00 2001 From: Siyeop Date: Mon, 22 Jul 2024 11:32:24 +0900 Subject: [PATCH 11/23] feature. [React version up] Remove default props on ButtonGroup, Icon --- .../button/button-group/TButtonGroup.tsx | 71 +++++++++++++------ src/components/icon/TIcon.tsx | 7 +- 2 files changed, 52 insertions(+), 26 deletions(-) diff --git a/src/components/button/button-group/TButtonGroup.tsx b/src/components/button/button-group/TButtonGroup.tsx index c8d1fdb0..bb8a95af 100644 --- a/src/components/button/button-group/TButtonGroup.tsx +++ b/src/components/button/button-group/TButtonGroup.tsx @@ -3,16 +3,33 @@ import TButton from '../button/TButton'; import {buttonGroupSize, TButtonGroupProps, TButtonGroupValue} from '@/components'; -const TButtonGroup = (props: TButtonGroupProps) => { +const TButtonGroup = ({ + disabled = false, + + onChange, + ...restProps +}: TButtonGroupProps) => { + + const props: TButtonGroupProps = {disabled, onChange, ...restProps}; // region [Styles] const $_size = useMemo(() => { - if (props.size && props.size in buttonGroupSize) { return props.size; } - if (props.xsmall) { return buttonGroupSize.xsmall; } - if (props.small) { return buttonGroupSize.small; } - if (props.medium) { return buttonGroupSize.medium; } - if (props.large) { return buttonGroupSize.large; } + if (props.size && props.size in buttonGroupSize) { + return props.size; + } + if (props.xsmall) { + return buttonGroupSize.xsmall; + } + if (props.small) { + return buttonGroupSize.small; + } + if (props.medium) { + return buttonGroupSize.medium; + } + if (props.large) { + return buttonGroupSize.large; + } return buttonGroupSize.medium; }, [props.size, props.xsmall, props.small, props.medium, props.large]); @@ -25,13 +42,25 @@ const TButtonGroup = (props: TButtonGroupProps) => { // } clazz.push(`t-button-group--${$_size}`); - if (props.className) { clazz.push(props.className); } - if (props.variant) { clazz.push(`t-button-group--${props.variant}`); } - if (props.primary) { clazz.push('t-button-group--primary'); } - if (props.main) { clazz.push('t-button-group--main'); } + if (props.className) { + clazz.push(props.className); + } + if (props.variant) { + clazz.push(`t-button-group--${props.variant}`); + } + if (props.primary) { + clazz.push('t-button-group--primary'); + } + if (props.main) { + clazz.push('t-button-group--main'); + } - if (props.multiSelect) { clazz.push('t-button-group--multi-select'); } - if (props.disabled) { clazz.push('t-button-group--disabled'); } + if (props.multiSelect) { + clazz.push('t-button-group--multi-select'); + } + if (props.disabled) { + clazz.push('t-button-group--disabled'); + } return clazz.join(' '); }, [props.variant, props.primary, props.main, props.className, props.multiSelect, props.disabled, $_size]); @@ -39,7 +68,9 @@ const TButtonGroup = (props: TButtonGroupProps) => { const rootStyle = useMemo((): CSSProperties => { let style: CSSProperties = {}; - if (props.style) { style = {...props.style}; } + if (props.style) { + style = {...props.style}; + } return style; }, [props.style]); @@ -55,17 +86,17 @@ const TButtonGroup = (props: TButtonGroupProps) => { const updateMultiSelectValue = useCallback((value: TButtonGroupValue, currentStatus: boolean) => { if (currentStatus) { const newValue = props.value.filter((val) => JSON.stringify(val) !== JSON.stringify(value)); - props.onChange(newValue); + onChange(newValue); } else { const newValue = props.value.concat(value); - props.onChange(newValue); + onChange(newValue); } return value; - }, [props]); + }, [onChange, props.value]); const updateSingleSelectValue = useCallback((value: TButtonGroupValue) => { - props.onChange(value); - }, [props]); + onChange(value); + }, [onChange]); const isActive = useCallback((value) => { if (props.multiSelect) { @@ -117,9 +148,5 @@ const TButtonGroup = (props: TButtonGroupProps) => { TButtonGroup.displayName = 'TButtonGroup'; -TButtonGroup.defaultProps = { - disabled: false, -}; - export default TButtonGroup; diff --git a/src/components/icon/TIcon.tsx b/src/components/icon/TIcon.tsx index e2b5a7c2..4d2c7e02 100644 --- a/src/components/icon/TIcon.tsx +++ b/src/components/icon/TIcon.tsx @@ -1,8 +1,7 @@ - import '@material-symbols/font-300/outlined.css'; import {CSSProperties, KeyboardEvent, memo, MouseEvent, ReactElement, useCallback, useMemo} from 'react'; -import {TIconSource, TIconProps, iconSize} from './TIcon.interface'; +import {iconSize, TIconProps, TIconSource} from './TIcon.interface'; import TOriginalImage from './TIconOriginal'; import TooltipUtil from '@/common/util/TooltipUtil'; @@ -12,6 +11,7 @@ import TooltipUtil from '@/common/util/TooltipUtil'; */ const TIcon = (props: TIconProps): ReactElement => { + // region [Styles] const iconSource: TIconSource = useMemo((): TIconSource => { @@ -103,8 +103,8 @@ const TIcon = (props: TIconProps): ReactElement => { return ( { }; -TIcon.defaultProps = {}; export default memo(TIcon); From 24f2b28d223fec0ffb25068c729e1eb0f29e9727 Mon Sep 17 00:00:00 2001 From: Siyeop Date: Mon, 22 Jul 2024 15:54:00 +0900 Subject: [PATCH 12/23] feature. [React version up] Remove default props on Tooltip --- src/components/guide/tooltip/TTooltip.tsx | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/guide/tooltip/TTooltip.tsx b/src/components/guide/tooltip/TTooltip.tsx index 33c85d9c..18f1644d 100644 --- a/src/components/guide/tooltip/TTooltip.tsx +++ b/src/components/guide/tooltip/TTooltip.tsx @@ -1,20 +1,24 @@ import {PlacesType, Tooltip as ReactTooltip} from 'react-tooltip'; -import {TTooltipProps} from './TTooltip.interface'; +import {TTooltipProps} from '@/components'; // region [Tooltip] -const TTooltip = (props: TTooltipProps) => ( - -); +const TTooltip = ({ + place = 'bottom' as PlacesType, + ...restProps +}: TTooltipProps) => { -TTooltip.defaultProps = { - place: 'bottom' as PlacesType, - offset: '16', + const props: TTooltipProps = {place, ...restProps}; + + return ( + + ); }; + // endregion From ca7ae6f69cd28f74e42b61a07f8cb0feaf19b0b2 Mon Sep 17 00:00:00 2001 From: Siyeop Date: Mon, 22 Jul 2024 16:46:59 +0900 Subject: [PATCH 13/23] feature. [React version up] Remove default props on Card --- .../data-container/action-bar/TActionBar.tsx | 2 +- src/components/data-container/card/TCard.tsx | 19 ++++++++++++------- .../data-container/card/TCardContent.tsx | 17 ++++++++--------- .../data-container/card/TCardHeader.tsx | 18 +++++++++--------- 4 files changed, 30 insertions(+), 26 deletions(-) diff --git a/src/components/data-container/action-bar/TActionBar.tsx b/src/components/data-container/action-bar/TActionBar.tsx index 4e52f943..dbed6e85 100644 --- a/src/components/data-container/action-bar/TActionBar.tsx +++ b/src/components/data-container/action-bar/TActionBar.tsx @@ -1,5 +1,5 @@ import {CSSProperties, useMemo} from 'react'; -import {TActionBarProps} from './TActionBar.interface'; +import {TActionBarProps} from '@/components'; function TActionBar(props: TActionBarProps) { diff --git a/src/components/data-container/card/TCard.tsx b/src/components/data-container/card/TCard.tsx index ff080187..21cdb914 100644 --- a/src/components/data-container/card/TCard.tsx +++ b/src/components/data-container/card/TCard.tsx @@ -1,9 +1,19 @@ import {CSSProperties, useMemo} from 'react'; import {TIcon} from '~/icon'; -import {TCardProps} from './TCard.interface'; +import {TCardProps} from '@/components'; import TooltipUtil from '@/common/util/TooltipUtil'; -const TCard = (props: TCardProps) => { +const TCard = ({ + iconSize = 'xlarge', + ...restProps +}: TCardProps) => { + + // region [Hooks] + + const props = {iconSize, ...restProps}; + + // endregion + // region [Templates] @@ -67,11 +77,6 @@ const TCard = (props: TCardProps) => { ); }; -TCard.defaultProps = { - iconSize: 'xlarge', - iconType: 'outlined', -}; - TCard.displayName = 'TCard'; diff --git a/src/components/data-container/card/TCardContent.tsx b/src/components/data-container/card/TCardContent.tsx index 70f973cb..cdb1b075 100644 --- a/src/components/data-container/card/TCardContent.tsx +++ b/src/components/data-container/card/TCardContent.tsx @@ -1,11 +1,11 @@ import {CSSProperties, useMemo} from 'react'; -import {TCardContentProps} from './TCard.interface'; +import {TCardContentProps} from '@/components'; -const TCardContent = (props: TCardContentProps) => { - - // region [Hooks] - - const {className, style} = props; +const TCardContent = ({ + className, + style, + ...restProps +}: TCardContentProps) => { // region [Templates] @@ -26,13 +26,12 @@ const TCardContent = (props: TCardContentProps) => { // endregion return ( -
- {props.children} +
+ {restProps.children}
); }; -TCardContent.defaultProps = {}; TCardContent.displayName = 'TCard'; diff --git a/src/components/data-container/card/TCardHeader.tsx b/src/components/data-container/card/TCardHeader.tsx index 8c70d8fa..80dc2f34 100644 --- a/src/components/data-container/card/TCardHeader.tsx +++ b/src/components/data-container/card/TCardHeader.tsx @@ -2,11 +2,16 @@ import {CSSProperties, useMemo} from 'react'; import {TCardHeaderProps} from './TCard.interface'; import {TIcon} from '~/icon'; -const TCardHeader = (props: TCardHeaderProps) => { +const TCardHeader = ({ + className, + style, + iconSize = 'large', + ...restProps +}: TCardHeaderProps) => { // region [Hooks] - const {className, style} = props; + const props: TCardHeaderProps = {className, style, iconSize, ...restProps}; // region [Privates] @@ -22,7 +27,7 @@ const TCardHeader = (props: TCardHeaderProps) => { if (props.icon) { clazz.push('t-card-header--with-icon'); } return clazz.join(' '); - }, [className]); + }, [className, props.icon]); const rootStyle = useMemo((): CSSProperties => { if (style) { return style; } @@ -54,12 +59,7 @@ const TCardHeader = (props: TCardHeaderProps) => { ); }; -TCardHeader.defaultProps = { - iconSize: 'large', - iconType: 'outlined', -}; - -TCardHeader.displayName = 'TCard'; +TCardHeader.displayName = 'TCardHeader'; export default TCardHeader; From 9cd9dcb49723f8e0ec79c82582fde3297760d232 Mon Sep 17 00:00:00 2001 From: Siyeop Date: Mon, 22 Jul 2024 17:07:48 +0900 Subject: [PATCH 14/23] feature. [React version up] Remove default props on Section, Toast --- .../form-section/TFormSection.tsx | 24 ++++++++---- .../form-section/TFormSectionItem.tsx | 12 +++--- .../form-section/TFormSectionRow.tsx | 10 +++-- .../data-container/section/TSection.tsx | 1 - src/components/guide/toast/TToast.tsx | 37 ++++++++++++------- 5 files changed, 52 insertions(+), 32 deletions(-) diff --git a/src/components/data-container/form-section/TFormSection.tsx b/src/components/data-container/form-section/TFormSection.tsx index 6b4245b5..c1132460 100644 --- a/src/components/data-container/form-section/TFormSection.tsx +++ b/src/components/data-container/form-section/TFormSection.tsx @@ -1,11 +1,24 @@ import {CSSProperties, useMemo} from 'react'; import TIcon from '~/icon/TIcon'; import {TFormSectionProps} from '@/components'; -import TFormSectionContext from './TFormSectionContext'; import TSection from '~/data-container/section/TSection'; +import TFormSectionContext from '~/data-container/form-section/TFormSectionContext'; -const TFormSection = (props: TFormSectionProps) => { +const TFormSection = ({ + column = 2, + labelWidth = '104px', + formLabelItemAlign = 'horizontal', + formRowVerticalAlign = 'middle', + ...restProps +}: TFormSectionProps) => { + + // region [Hooks] + + + const props: TFormSectionProps = {column, labelWidth, formLabelItemAlign, formRowVerticalAlign, ...restProps}; + + // endregion // region [Styles] @@ -65,10 +78,5 @@ const TFormSection = (props: TFormSectionProps) => { }; -TFormSection.defaultProps = { - column: 2, - labelWidth: '104px', - formLabelItemAlign: 'horizontal', - formRowVerticalAlign: 'middle', -}; + export default TFormSection; diff --git a/src/components/data-container/form-section/TFormSectionItem.tsx b/src/components/data-container/form-section/TFormSectionItem.tsx index 59b526bc..e8f10c62 100644 --- a/src/components/data-container/form-section/TFormSectionItem.tsx +++ b/src/components/data-container/form-section/TFormSectionItem.tsx @@ -8,11 +8,16 @@ import themeToken from '~style/designToken/ThemeToken.module.scss'; const gapSize = Number(themeToken.tSpacing40?.replace(/[^0-9]/g, '')) * 2 || 80; -const TFormSectionItem = (props: TFormSectionItemProps) => { +const TFormSectionItem = ({ + span = 1, + ...restProps +}: TFormSectionItemProps) => { // region [Hooks] + const props: TFormSectionItemProps = {span, ...restProps}; + const rootRef = useRef(null); const {column, labelWidth, rowVerticalAlign} = useContext(TFormSectionContext); @@ -121,11 +126,6 @@ const TFormSectionItem = (props: TFormSectionItemProps) => { {props.information && ()} ); - -}; - -TFormSectionItem.defaultProps = { - span: 1, }; export default memo(TFormSectionItem); diff --git a/src/components/data-container/form-section/TFormSectionRow.tsx b/src/components/data-container/form-section/TFormSectionRow.tsx index d87b9db0..4918e739 100644 --- a/src/components/data-container/form-section/TFormSectionRow.tsx +++ b/src/components/data-container/form-section/TFormSectionRow.tsx @@ -3,10 +3,15 @@ import {TFormSectionRowProps} from '@/components'; import TFormSectionContext from '~/data-container/form-section/TFormSectionContext'; -const TFormSectionRow = (props: TFormSectionRowProps) => { +const TFormSectionRow = ({ + verticalAlign = 'middle', + ...restProps +}: TFormSectionRowProps) => { // region [Hooks] + const props: TFormSectionRowProps = {verticalAlign, ...restProps}; + const formContext = useContext(TFormSectionContext); // endregion @@ -44,8 +49,5 @@ const TFormSectionRow = (props: TFormSectionRowProps) => { TFormSectionRow.displayName = 'TFormSectionRow'; -TFormSectionRow.defaultProps = { - verticalAlign: 'middle', -}; export default TFormSectionRow; diff --git a/src/components/data-container/section/TSection.tsx b/src/components/data-container/section/TSection.tsx index a5c5796a..4b34ca36 100644 --- a/src/components/data-container/section/TSection.tsx +++ b/src/components/data-container/section/TSection.tsx @@ -56,5 +56,4 @@ function TSection(props: TSectionProps) { } -TSection.defaultProps = {}; export default TSection; diff --git a/src/components/guide/toast/TToast.tsx b/src/components/guide/toast/TToast.tsx index 8420c41f..18379145 100644 --- a/src/components/guide/toast/TToast.tsx +++ b/src/components/guide/toast/TToast.tsx @@ -3,23 +3,34 @@ import {Theme, toast, ToastContainer} from 'react-toastify'; import {ToastPosition} from 'react-toastify/dist/types'; import {TToastProps} from './TToast.interface'; -function TToast(props: TToastProps) { +function TToast({ + theme = 'light' as Theme, + className = 'tks-toast-container', + autoClose = 5000, + toastClassName = 'tks-toast', + bodyClassName = 'tks-toast__body', + progressClassName = 'tks-toast__progress', + position = 'top-right' as ToastPosition, + draggable = false, + ...restProps +}: TToastProps) { + + const props = { + theme, + className, + autoClose, + toastClassName, + bodyClassName, + progressClassName, + position, + draggable, + ...restProps, + }; + return ( ); } -TToast.defaultProps = { - theme: 'light' as Theme, - className: 'tks-toast-container', - autoClose: 5000, - toastClassName: 'tks-toast', - bodyClassName: 'tks-toast__body', - progressClassName: 'tks-toast__progress', - position: 'top-right' as ToastPosition, - draggable: false, -}; - - export const notify = toast; export default TToast; From 165a84033d435905a1a895f9dc0c54e1ef855bb1 Mon Sep 17 00:00:00 2001 From: Siyeop Date: Tue, 23 Jul 2024 11:54:09 +0900 Subject: [PATCH 15/23] feature. [React version up] Remove default props on StepBox --- .../data-container/step-box/TStepBox.tsx | 19 +++++++++++-------- .../step-box/TStepBoxHeader.tsx | 3 +-- .../data-container/step-box/TStepBoxItem.tsx | 9 +++++---- 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/src/components/data-container/step-box/TStepBox.tsx b/src/components/data-container/step-box/TStepBox.tsx index 8d2fc7af..213e09dd 100644 --- a/src/components/data-container/step-box/TStepBox.tsx +++ b/src/components/data-container/step-box/TStepBox.tsx @@ -4,11 +4,20 @@ import TStepBoxContext from './TStepBoxContext'; import TStepBoxHeader from '~/data-container/step-box/TStepBoxHeader'; import TStepBoxItem from '~/data-container/step-box/TStepBoxItem'; -const TStepBox = (props: TStepBoxProps) => { +const TStepBox = ({ + prevButtonLabel = 'Previous', + nextButtonLabel = 'Next', + completeButtonLabel = 'Complete', + value, + children, + style, + className, + ...restProps +}: TStepBoxProps) => { // region [Hooks] - const {value, children, style, className} = props; + const props: TStepBoxProps = {prevButtonLabel, nextButtonLabel, completeButtonLabel, value, children, style, className, ...restProps}; // endregion @@ -100,12 +109,6 @@ const TStepBox = (props: TStepBoxProps) => { ); }; -TStepBox.defaultProps = { - prevButtonLabel: 'Previous', - nextButtonLabel: 'Next', - completeButtonLabel: 'Complete', -}; - TStepBox.displayName = 'TStepBox'; diff --git a/src/components/data-container/step-box/TStepBoxHeader.tsx b/src/components/data-container/step-box/TStepBoxHeader.tsx index de39e4e7..d9e8d3f8 100644 --- a/src/components/data-container/step-box/TStepBoxHeader.tsx +++ b/src/components/data-container/step-box/TStepBoxHeader.tsx @@ -91,9 +91,8 @@ const TStepBoxHeader = (props: TStepBoxHeaderProps) => { ); }; -TStepBoxHeader.defaultProps = {}; -TStepBoxHeader.displayName = 'TStepBox'; +TStepBoxHeader.displayName = 'TStepBoxHeader'; export default TStepBoxHeader; diff --git a/src/components/data-container/step-box/TStepBoxItem.tsx b/src/components/data-container/step-box/TStepBoxItem.tsx index 813ece3b..b61837fb 100644 --- a/src/components/data-container/step-box/TStepBoxItem.tsx +++ b/src/components/data-container/step-box/TStepBoxItem.tsx @@ -3,10 +3,14 @@ import {TStepBoxItemProps} from '@/components'; import TStepBoxFooter from '~/data-container/step-box/TStepBoxFooter'; import TStepBoxContext from '~/data-container/step-box/TStepBoxContext'; -const TStepBoxItem = (props: TStepBoxItemProps) => { +const TStepBoxItem = ({ + contentDirection = 'top-bottom', + ...restProps +}: TStepBoxItemProps) => { // region [Hooks] + const props: TStepBoxItemProps = {contentDirection, ...restProps}; const stepBoxContext = useContext(TStepBoxContext); // endregion @@ -61,9 +65,6 @@ const TStepBoxItem = (props: TStepBoxItemProps) => { }; TStepBoxItem.displayName = 'TStepBoxItem'; -TStepBoxItem.defaultProps = { - contentDirection: 'top-bottom', -}; export default TStepBoxItem; From 914a146036a237f778256cccac24ca718c25e227 Mon Sep 17 00:00:00 2001 From: Siyeop Date: Tue, 23 Jul 2024 11:56:01 +0900 Subject: [PATCH 16/23] feature. [React version up] Remove default props on TabBox --- src/components/data-container/tab-box/TTabBox.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/data-container/tab-box/TTabBox.tsx b/src/components/data-container/tab-box/TTabBox.tsx index d159757e..ef3b3aac 100644 --- a/src/components/data-container/tab-box/TTabBox.tsx +++ b/src/components/data-container/tab-box/TTabBox.tsx @@ -2,11 +2,14 @@ import {cloneElement, CSSProperties, useCallback, useMemo, memo} from 'react'; import {TTabBoxProps, TTabBoxValue} from '@/components'; import TTabBoxContext from './TTabBoxContext'; -const TTabBox = (props: TTabBoxProps) => { +const TTabBox = ({ + onChange, value, children, style, className, + ...restProps +}: TTabBoxProps) => { // region [Hooks] - const {onChange, value, children, style, className} = props; + const props: TTabBoxProps = {onChange, value, children, style, className, ...restProps}; // endregion @@ -72,7 +75,6 @@ const TTabBox = (props: TTabBoxProps) => { ); }; -TTabBox.defaultProps = {}; TTabBox.displayName = 'TTabBox'; From 372e179eb8bdf235f9f5c6af7a3cd7d77a5639d1 Mon Sep 17 00:00:00 2001 From: Siyeop Date: Tue, 23 Jul 2024 12:03:15 +0900 Subject: [PATCH 17/23] feature. [React version up] Remove default props on Badge, Modal, Progress --- package.json | 1 + src/components/guide/badge/TBadge.tsx | 7 +++---- src/components/guide/progress/TProgress.tsx | 21 ++++++++++++++------ src/components/screen/modal/TModal.tsx | 22 +++++++++++---------- 4 files changed, 31 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 918cd90c..fc48bc6e 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "@types/jest": "^29.5.4", "@types/react": "^18.0.37", "@types/react-dom": "^18.0.11", + "@types/react-modal": "^3.16.3", "@types/react-slick": "^0.23.11", "@typescript-eslint/eslint-plugin": "^5.59.0", "@typescript-eslint/parser": "^5.59.0", diff --git a/src/components/guide/badge/TBadge.tsx b/src/components/guide/badge/TBadge.tsx index 0a234685..df96a15c 100644 --- a/src/components/guide/badge/TBadge.tsx +++ b/src/components/guide/badge/TBadge.tsx @@ -1,6 +1,6 @@ import 'react-toastify/dist/ReactToastify.css'; import {CSSProperties, useMemo} from 'react'; -import {TBadgeProps} from './TBadge.interface'; +import {TBadgeProps} from '@/components'; const TBadge = (props: TBadgeProps) => { @@ -10,7 +10,7 @@ const TBadge = (props: TBadgeProps) => { let style: CSSProperties = {}; - if (props.style) style = {...style, ...props.style}; + if (props.style) { style = {...style, ...props.style}; } return style; }, [props.style]); @@ -43,7 +43,7 @@ const TBadge = (props: TBadgeProps) => { let style: CSSProperties = {}; - if (props.color) style = {...style, backgroundColor: props.color}; + if (props.color) { style = {...style, backgroundColor: props.color}; } return style; }, [props.color]); @@ -79,6 +79,5 @@ const TBadge = (props: TBadgeProps) => { ); }; -TBadge.defaultProps = {}; export default TBadge; diff --git a/src/components/guide/progress/TProgress.tsx b/src/components/guide/progress/TProgress.tsx index 036395b1..855d1f26 100644 --- a/src/components/guide/progress/TProgress.tsx +++ b/src/components/guide/progress/TProgress.tsx @@ -3,7 +3,20 @@ import TModal from '../../screen/modal/TModal'; import {TProgressProps, TLoadingIndicator} from '@/components'; -function TProgress(props: TProgressProps) { +function TProgress({ + message = '잠시만 기다려 주십시오', + containerId = 'root', + ...restProps + +}: TProgressProps) { + + // region [Hooks] + + const props: TProgressProps = {message, containerId, ...restProps}; + + // endregion + + // region [Styles] const rootClass: string = useMemo((): string => { const clazz: string[] = []; @@ -21,6 +34,7 @@ function TProgress(props: TProgressProps) { return style; }, [props.style]); + // endregion return ( { const clazz: string[] = []; - if (props.bodyClassName) clazz.push(props.bodyClassName); + if (props.bodyClassName) { clazz.push(props.bodyClassName); } clazz.push(`t-modal__overlay__body--${$_size}`); return clazz.join(' '); - }, [$_size, props]); + }, [$_size, props.bodyClassName]); // endregion @@ -105,7 +111,3 @@ export default function TModal(props: TModalProps): JSX.Element { ); } -TModal.defaultProps = { - containerId: 'root', -}; - From 903d90d9d75891f857ab2ae3a2fbb58198f3727e Mon Sep 17 00:00:00 2001 From: Siyeop Date: Tue, 23 Jul 2024 12:06:26 +0900 Subject: [PATCH 18/23] feature. [React version up] Remove default props on Switch --- src/components/input/switch/TSwitch.tsx | 27 ++++++++++++++++--------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/src/components/input/switch/TSwitch.tsx b/src/components/input/switch/TSwitch.tsx index 37f9a6d1..381c69d7 100644 --- a/src/components/input/switch/TSwitch.tsx +++ b/src/components/input/switch/TSwitch.tsx @@ -1,15 +1,27 @@ import {CSSProperties, KeyboardEvent, useCallback, useMemo} from 'react'; -import {TSwitchProps} from './TSwitch.interface'; +import {TSwitchProps} from '@/components'; -function TSwitch(props: TSwitchProps) { +function TSwitch({ + positiveValue = true, + negativeValue = false, + onChange, + ...restProps +}: TSwitchProps) { + + // region [Hooks] + + const props = {positiveValue, negativeValue, ...restProps}; + + // endregion + // region [Privates] const emitChange = useCallback((): void => { const next = props.value === props.positiveValue ? props.negativeValue : props.positiveValue; - props.onChange(next); - }, [props]); + onChange(next); + }, [onChange, props.negativeValue, props.positiveValue, props.value]); // endregion @@ -38,7 +50,7 @@ function TSwitch(props: TSwitchProps) { const getRootStyle = useMemo((): CSSProperties => { let style: CSSProperties = {}; - if (props.style) style = {...props.style}; + if (props.style) { style = {...props.style}; } return style; }, [props.style]); @@ -83,11 +95,6 @@ function TSwitch(props: TSwitchProps) { ); } -TSwitch.defaultProps = { - positiveValue: true, - negativeValue: false, -}; - TSwitch.displayName = 'TSwitch'; From b5289010559f7cf438c7cd0d204a0f2c96466b14 Mon Sep 17 00:00:00 2001 From: Siyeop Date: Tue, 23 Jul 2024 12:18:25 +0900 Subject: [PATCH 19/23] feature. [React version up] Remove default props on Page, Radio --- src/components/input/radio/TRadio.tsx | 10 ++++------ src/components/screen/page/TPage.tsx | 25 +++++++++++++------------ 2 files changed, 17 insertions(+), 18 deletions(-) diff --git a/src/components/input/radio/TRadio.tsx b/src/components/input/radio/TRadio.tsx index c37d9137..39dfebc7 100644 --- a/src/components/input/radio/TRadio.tsx +++ b/src/components/input/radio/TRadio.tsx @@ -12,8 +12,8 @@ const TRadio = (props: TRadioProps) => { const getRootClass = useCallback(() => { const clazz: string[] = []; - if (props.className) clazz.push(props.className); - if (props.disabled) clazz.push('t-radio--disabled'); + if (props.className) { clazz.push(props.className); } + if (props.disabled) { clazz.push('t-radio--disabled'); } return clazz.join(' '); }, [props.className, props.disabled]); @@ -37,12 +37,12 @@ const TRadio = (props: TRadioProps) => { // region [Events] const onClickRadio = useCallback(() => { - if (props.disabled) return; + if (props.disabled) { return; } emitSelect(); }, [props.disabled, emitSelect]); const onKeyDown = useCallback((event: KeyboardEvent) => { - if (props.disabled) return; + if (props.disabled) { return; } if (event.key === 'Enter' || event.key === ' ') { emitSelect(); } @@ -100,8 +100,6 @@ const TRadio = (props: TRadioProps) => { // endregion }; -TRadio.defaultProps = {}; - TRadio.displayName = 'TRadio'; diff --git a/src/components/screen/page/TPage.tsx b/src/components/screen/page/TPage.tsx index cf88c300..babe03bc 100644 --- a/src/components/screen/page/TPage.tsx +++ b/src/components/screen/page/TPage.tsx @@ -1,15 +1,20 @@ -import {MouseEvent, MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState} from 'react'; -import TIcon from '../../icon/TIcon'; -import {TPageProps} from '@/components'; +import {EventHandler, MouseEvent, MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState} from 'react'; +import {TIcon, TPageProps} from '@/components'; import themeToken from '~style/designToken/ThemeToken.module.scss'; + const defaultPanelWidth = '280px'; -const TPage = (props: TPageProps) => { +const TPage = ({ + contentDirection = 'top-bottom', + ...restProps +}: TPageProps) => { // region [Hooks] + const props:TPageProps = {contentDirection, ...restProps}; + const [isInfoPanelOpened, setIsInfoPanelOpened] = useState(false); const [isInfoPanelResizing, setIsInfoPanelResizing] = useState(false); @@ -30,7 +35,7 @@ const TPage = (props: TPageProps) => { const onMouseDown = ((clickEvent: MouseEvent): void => { clickEvent.stopPropagation(); - const mouseMoveHandler = (mouseEvent): void => { + const mouseMoveHandler = (mouseEvent: MouseEvent): void => { const width: number = window.innerWidth - mouseEvent.pageX; setIsInfoPanelResizing(true); @@ -42,16 +47,16 @@ const TPage = (props: TPageProps) => { if (width <= 200) { setPanelWidth(defaultPanelWidth); setIsInfoPanelOpened(false); - document.removeEventListener('mousemove', mouseMoveHandler); + document.removeEventListener('mousemove', mouseMoveHandler as EventHandler); } }; const mouseUpHandler = () => { - document.removeEventListener('mousemove', mouseMoveHandler); + document.removeEventListener('mousemove', mouseMoveHandler as EventHandler); setIsInfoPanelResizing(false); }; - document.addEventListener('mousemove', mouseMoveHandler); + document.addEventListener('mousemove', mouseMoveHandler as EventHandler); document.addEventListener('mouseup', mouseUpHandler, {once: true}); }) as MouseEventHandler; @@ -173,10 +178,6 @@ const TPage = (props: TPageProps) => { ); }; -TPage.defaultProps = { - contentDirection: 'top-bottom', -}; - TPage.displayName = 'TPage'; From 3016d31e771a36874ec100e8202898caa1eb87b3 Mon Sep 17 00:00:00 2001 From: Siyeop Date: Tue, 23 Jul 2024 12:21:17 +0900 Subject: [PATCH 20/23] feature. [React version up] Remove default props on Checkbox --- src/components/input/checkbox/TCheckbox.tsx | 26 +++++++++++---------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/components/input/checkbox/TCheckbox.tsx b/src/components/input/checkbox/TCheckbox.tsx index 11f800ad..dd646ddf 100644 --- a/src/components/input/checkbox/TCheckbox.tsx +++ b/src/components/input/checkbox/TCheckbox.tsx @@ -14,10 +14,19 @@ const checkboxIcons = { indeterminate: 't_checkbox_indeterminate', }; -const TCheckbox = forwardRef((props: TCheckboxProps, ref: Ref) => { +const TCheckbox = forwardRef(({ + positiveValue = true, + negativeValue = false, + checked = null, + lazy = true, + onChange, + ...restProps +}: TCheckboxProps, ref: Ref) => { // region [Hooks] + const props: TCheckboxProps = {positiveValue, negativeValue, checked, lazy, onChange, ...restProps}; + const validator = useValidator(props.value, props.rules, props.successMessage); const rootRef = useRef(null); const containerRef = useRef(null); @@ -68,17 +77,17 @@ const TCheckbox = forwardRef((props: TCheckboxProps, ref: Ref) => // region [Privates] const emitChange = useCallback(() => { - if (typeof props.onChange !== 'function') { + if (typeof onChange !== 'function') { return; } if (status === 'check') { - props.onChange(props.negativeValue, props.positiveValue); + onChange(props.negativeValue, props.positiveValue); } else { - props.onChange(props.positiveValue); + onChange(props.positiveValue); } - }, [props, status]); + }, [onChange, props.negativeValue, props.positiveValue, status]); const modifyStatus = useCallback(() => { if (props.checked === true) { @@ -191,13 +200,6 @@ const TCheckbox = forwardRef((props: TCheckboxProps, ref: Ref) => }); -TCheckbox.defaultProps = { - positiveValue: true, - negativeValue: false, - checked: null, - lazy: true, -}; - TCheckbox.displayName = 'TCheckbox'; export default TCheckbox; From 306882b53fa9c19b21912a599268389d97601233 Mon Sep 17 00:00:00 2001 From: Siyeop Date: Tue, 23 Jul 2024 14:23:45 +0900 Subject: [PATCH 21/23] feature. [React version up] Remove default props on NumberField, DatePicker --- .../input/date-picker/TDatePicker.tsx | 23 +++--- .../date-picker/selector/TDaySelector.tsx | 1 - .../date-picker/selector/TMonthSelector.tsx | 1 - .../date-picker/selector/TYearSelector.tsx | 2 - .../input/number-field/TNumberField.tsx | 72 +++++++++++-------- 5 files changed, 57 insertions(+), 42 deletions(-) diff --git a/src/components/input/date-picker/TDatePicker.tsx b/src/components/input/date-picker/TDatePicker.tsx index c07a2e81..0505f309 100644 --- a/src/components/input/date-picker/TDatePicker.tsx +++ b/src/components/input/date-picker/TDatePicker.tsx @@ -12,10 +12,17 @@ import TDateContext from '~/input/date-picker/TDatePickerContext'; import TDatePickerHelpers from '~/input/date-picker/TDatePickerHelpers'; -const TDatePicker = forwardRef((props: TDatePickerProps, ref: Ref) => { +const TDatePicker = forwardRef(({ + value = '', + valueType = 'date', + separator = '-', + ...restProps +}: TDatePickerProps, ref: Ref) => { // region [Hooks] + const props:TDatePickerProps = {value, valueType, separator, ...restProps}; + const rootRef = useRef(null); const textFieldRef = useRef(null); const dropHolderRef = useRef(null); @@ -72,12 +79,12 @@ const TDatePicker = forwardRef((props: TDatePickerProps, ref: Ref { + const modifyCurrentSelector = useCallback((val: TDatePickerMode) => { if (props.valueType === 'date') { - setCurrentSelector(value); - } else if (props.valueType === 'month' && value !== 'date') { - setCurrentSelector(value); + setCurrentSelector(val); + } else if (props.valueType === 'month' && val !== 'date') { + setCurrentSelector(val); } }, [props.valueType]); @@ -297,11 +304,7 @@ const TDatePicker = forwardRef((props: TDatePickerProps, ref: Ref { // endregion }; -TDaySelector.defaultProps = {}; TDaySelector.displayName = 'TDaySelector'; diff --git a/src/components/input/date-picker/selector/TMonthSelector.tsx b/src/components/input/date-picker/selector/TMonthSelector.tsx index 276f8a73..1c09ee96 100644 --- a/src/components/input/date-picker/selector/TMonthSelector.tsx +++ b/src/components/input/date-picker/selector/TMonthSelector.tsx @@ -164,7 +164,6 @@ const TMonthSelector = () => { // endregion }; -TMonthSelector.defaultProps = {}; TMonthSelector.displayName = 'TMonthSelector'; diff --git a/src/components/input/date-picker/selector/TYearSelector.tsx b/src/components/input/date-picker/selector/TYearSelector.tsx index 9a0db8d3..c41d97c4 100644 --- a/src/components/input/date-picker/selector/TYearSelector.tsx +++ b/src/components/input/date-picker/selector/TYearSelector.tsx @@ -153,8 +153,6 @@ const TYearSelector = () => { // endregion }; -TYearSelector.defaultProps = {}; - TYearSelector.displayName = 'TYearSelector'; diff --git a/src/components/input/number-field/TNumberField.tsx b/src/components/input/number-field/TNumberField.tsx index 6cc59cea..0fa1d537 100644 --- a/src/components/input/number-field/TNumberField.tsx +++ b/src/components/input/number-field/TNumberField.tsx @@ -1,13 +1,36 @@ -import {CSSProperties, forwardRef, KeyboardEvent, Ref, useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react'; +import { + ChangeEvent, + CSSProperties, + forwardRef, + KeyboardEvent, + Ref, + useCallback, + useImperativeHandle, + useMemo, + useRef, + useState, +} from 'react'; import useValidator from '@/common/hook/UseValidator'; import {TNumberFieldProps, TNumberFieldRef} from '@/components'; -const TNumberField = forwardRef((props: TNumberFieldProps, ref: Ref) => { +const TNumberField = forwardRef(({ + type = 'outline', + lazy = true, + min = -100000000000, + max = 100000000000, + step = 1, + onChange, + onKeyDown, + onKeyDownEnter, + ...restProps +}: TNumberFieldProps, ref: Ref) => { // region [Hooks] + const props: TNumberFieldProps = {type, lazy, min, max, step, onChange, onKeyDown, onKeyDownEnter, ...restProps}; + const [hasFocus, setHasFocus] = useState(false); const validator = useValidator(props.value, props.rules, props.successMessage); const inputRef = useRef(null); @@ -104,17 +127,17 @@ const TNumberField = forwardRef((props: TNumberFieldProps, ref: Ref { if (props.label && !hasFocus) { return ''; } @@ -156,50 +179,50 @@ const TNumberField = forwardRef((props: TNumberFieldProps, ref: Ref { + const onChangeInput = useCallback((e: ChangeEvent): void => { if (isInputtableValue(e.target.value)) { - props.onChange(e.target.value); + onChange(e.target.value); } - }, [isInputtableValue, props]); + }, [isInputtableValue, onChange]); const onClickStepUp = useCallback((): void => { inputRef.current.stepUp(); if (props.value !== inputRef.current.value) { - props.onChange(inputRef.current.value); + onChange(inputRef.current.value); } - }, [props]); + }, [onChange, props.value]); const onClickStepDown = useCallback((): void => { inputRef.current.stepDown(); if (props.value !== inputRef.current.value) { - props.onChange(inputRef.current.value); + onChange(inputRef.current.value); } - }, [props]); + }, [onChange, props.value]); - const onKeyDown = useCallback((event: KeyboardEvent): void => { + const onKeyDownInput = useCallback((event: KeyboardEvent): void => { if (event.key === '-' && props.min >= -1) { event.preventDefault(); - props.onChange(`${props.min}`); + onChange(`${props.min}`); } if (event.key === '+') { event.preventDefault(); } - if (event.key === 'Enter' && props.onKeyDownEnter) { - props.onKeyDownEnter(event); + if (event.key === 'Enter' && onKeyDownEnter) { + onKeyDownEnter(event); } - if (props.onKeyDown) { - props.onKeyDown(event); + if (onKeyDown) { + onKeyDown(event); } - }, [props]); + }, [onChange, onKeyDown, onKeyDownEnter, props.min]); // endregion @@ -227,8 +250,8 @@ const TNumberField = forwardRef((props: TNumberFieldProps, ref: Ref ); }); -TNumberField.defaultProps = { - type: 'outline', - lazy: true, - min: -100000000000, - max: 100000000000, - step: 1, -}; TNumberField.displayName = 'TNumberField'; From 22b11f7659779da67b60d128d950dadc7ad0c497 Mon Sep 17 00:00:00 2001 From: Siyeop Date: Tue, 23 Jul 2024 15:05:17 +0900 Subject: [PATCH 22/23] feature. [React version up] Remove default props on CheckboxGroup, Chip, DataGrid, Dropdown, DropHolder, IconButton, Pagination, RadioGroup, TextArrayField, TextField --- .../button/icon-button/TIconButton.tsx | 30 +++--- .../data-container/data-grid/TDataGrid.tsx | 61 ++++++++----- .../drop-holder/TDropHolder.tsx | 35 +++++-- .../data-container/pagination/TPagination.tsx | 11 ++- .../input/checkbox-group/TCheckboxGroup.tsx | 58 ++++++------ src/components/input/chip/TChip.tsx | 12 ++- src/components/input/dropdown/TDropdown.tsx | 77 ++++++++++------ .../input/radio-group/TRadioGroup.tsx | 91 ++++++++++--------- .../text-array-field/TTextArrayField.tsx | 24 ++--- .../input/text-field/TTextField.tsx | 79 +++++++++------- 10 files changed, 274 insertions(+), 204 deletions(-) diff --git a/src/components/button/icon-button/TIconButton.tsx b/src/components/button/icon-button/TIconButton.tsx index 0177fa8d..298bc208 100644 --- a/src/components/button/icon-button/TIconButton.tsx +++ b/src/components/button/icon-button/TIconButton.tsx @@ -1,15 +1,22 @@ import {CSSProperties, forwardRef, KeyboardEvent, MouseEvent, Ref, useCallback, useImperativeHandle, useMemo, useRef} from 'react'; -import {TIconButtonProps, TIconButtonRef} from './TIconButton.interface'; +import {TIconButtonProps, TIconButtonRef} from '@/components'; import useRipple from '@/common/hook/UseRipple'; import TIcon from '../../icon/TIcon'; import themeToken from '~style/designToken/ThemeToken.module.scss'; import TooltipUtil from '@/common/util/TooltipUtil'; -const TIconButton = forwardRef((props: TIconButtonProps, ref: Ref) => { +const TIconButton = forwardRef(({ + shape = 'circle', + outline = 'elevation', + onClick, + ...restProps +}: TIconButtonProps, ref: Ref) => { // region [Hooks] + const props: TIconButtonProps = {shape, outline, onClick, ...restProps}; + const rootRef = useRef(null); const ripple = useRipple(rootRef); @@ -19,8 +26,8 @@ const TIconButton = forwardRef((props: TIconButtonProps, ref: Ref | KeyboardEvent): void => { ripple.remove(); - if (!props.disabled && props.onClick) { - props.onClick(event); + if (!props.disabled && onClick) { + onClick(event); } - }, [props, ripple]); + }, [onClick, props.disabled, ripple]); const onMouseLeave = useCallback((): void => { ripple.remove(); @@ -81,9 +88,9 @@ const TIconButton = forwardRef((props: TIconButtonProps, ref: Ref { if (event.key === 'Enter' || event.key === ' ') { ripple.remove(); - if (props.onClick) { props.onClick(event); } + if (onClick) { onClick(event); } } - }, [props, ripple]); + }, [onClick, ripple]); // endregion @@ -112,9 +119,4 @@ const TIconButton = forwardRef((props: TIconButtonProps, ref: Ref) => { +const TDataGrid = forwardRef(({ + maxRowsWithoutScroll = 10.5, + defaultColDef = { + sortable: false, + resizable: true, + showDisabledCheckboxes: true, + }, + animateRows = true, + popupParent = document.body, + suppressRowClickSelection = true, + enableCellTextSelection = true, + headerHeight = DEFAULT_HEADER_HEIGHT, + rowHeight = DEFAULT_ROW_HEIGHT, + onChange, + onSelectionChanged, + ...restProps +}: TDataGridProps, ref: Ref) => { // region [Hooks] + const props: TDataGridProps = { + maxRowsWithoutScroll, + defaultColDef, + animateRows, + popupParent, + suppressRowClickSelection, + enableCellTextSelection, + headerHeight, + rowHeight, + onChange, + onSelectionChanged, + ...restProps, + }; + const [selectedRows, setSelectedRows] = useState([]); const gridRef = useRef(null); @@ -73,20 +103,20 @@ const TDataGrid = forwardRef((props: TDataGridProps, ref: Ref) => { // region [Events] - const onSelectionChanged = useCallback((event: SelectionChangedEvent) => { + const onSelectionChangedAgGrid = useCallback((event: SelectionChangedEvent) => { const rows = gridRef.current.api.getSelectedRows(); setSelectedRows(rows); - if (props.onChange) { - props.onChange(rows); + if (onChange) { + onChange(rows); } - if (props.onSelectionChanged) { - props.onSelectionChanged(event); + if (onSelectionChanged) { + onSelectionChanged(event); } - }, [props]); + }, [onChange, onSelectionChanged]); // endregion @@ -138,7 +168,7 @@ const TDataGrid = forwardRef((props: TDataGridProps, ref: Ref) => { style={{height: generatedHeightProps.height}}> ) => { }); -TDataGrid.defaultProps = { - maxRowsWithoutScroll: 10.5, - defaultColDef: { - sortable: false, - resizable: true, - showDisabledCheckboxes: true, - }, - animateRows: true, - popupParent: document.body, - suppressRowClickSelection: true, - enableCellTextSelection: true, - headerHeight: DEFAULT_HEADER_HEIGHT, - rowHeight: DEFAULT_ROW_HEIGHT, -}; - TDataGrid.displayName = 'TDataGrid'; diff --git a/src/components/data-container/drop-holder/TDropHolder.tsx b/src/components/data-container/drop-holder/TDropHolder.tsx index d504a1ec..6a262cfc 100644 --- a/src/components/data-container/drop-holder/TDropHolder.tsx +++ b/src/components/data-container/drop-holder/TDropHolder.tsx @@ -1,15 +1,35 @@ // eslint-disable-next-line max-len -import {CSSProperties, ForwardedRef, forwardRef, MouseEvent, MouseEventHandler, ReactNode, useCallback, useImperativeHandle, useMemo, useRef, useState} from 'react'; +import { + CSSProperties, + ForwardedRef, + forwardRef, + MouseEvent, + MouseEventHandler, + ReactNode, + useCallback, + useImperativeHandle, + useMemo, + useRef, + useState, +} from 'react'; import {DropHolderAlignment, TDropHolderItem, TDropHolderProps, TDropHolderRef} from '@/components'; import useClickOutside from '@/common/hook/UseClickOutside'; import {TIcon} from '~/icon'; import themeToken from '~style/designToken/ThemeToken.module.scss'; -const TDropHolder = forwardRef((props: TDropHolderProps, ref: ForwardedRef) => { +const TDropHolder = forwardRef(({ + alignment = 'bottom-center' as DropHolderAlignment, + textKey = 'text', + offset = '4px', + itemTemplate, + ...restProps +}: TDropHolderProps, ref: ForwardedRef) => { // region [Hooks] + const props: TDropHolderProps = {alignment, textKey, offset, itemTemplate, ...restProps}; + const [isOpened, setIsOpened] = useState(false); const rootRef = useRef(null); useClickOutside(rootRef, () => close()); @@ -120,8 +140,8 @@ const TDropHolder = forwardRef((props: TDropHolderProps, ref: ForwardedRef @@ -137,7 +157,7 @@ const TDropHolder = forwardRef((props: TDropHolderProps, ref: ForwardedRef); - }, [props]); + }, [itemTemplate, props.textKey]); // endregion @@ -193,11 +213,6 @@ const TDropHolder = forwardRef((props: TDropHolderProps, ref: ForwardedRef) => { +const TPagination = forwardRef(({ + jumperText = '바로가기', + onChangePageNumber, + ...restProps +}: TPaginationProps, ref: Ref) => { // region [Hooks] - const {onChangePageNumber} = props; + const props: TPaginationProps = {jumperText, onChangePageNumber, ...restProps}; useImperativeHandle(ref, () => ({ nextPage(): void { onClickNextPage(); }, @@ -198,9 +202,6 @@ const TPagination = forwardRef((props: TPaginationProps, ref: Ref ); }); -TPagination.defaultProps = { - jumperText: '바로가기', -}; TPagination.displayName = 'TPagination'; diff --git a/src/components/input/checkbox-group/TCheckboxGroup.tsx b/src/components/input/checkbox-group/TCheckboxGroup.tsx index 6fd7a846..b24fadbc 100644 --- a/src/components/input/checkbox-group/TCheckboxGroup.tsx +++ b/src/components/input/checkbox-group/TCheckboxGroup.tsx @@ -1,13 +1,21 @@ -import {forwardRef, Ref, useCallback, useImperativeHandle, useMemo, useRef} from 'react'; +import {FocusEvent, forwardRef, Ref, useCallback, useImperativeHandle, useMemo, useRef} from 'react'; import useValidator from '@/common/hook/UseValidator'; import {TCheckboxGroupProps, TCheckboxGroupRef, TCheckboxGroupValue, TCheckboxValue} from '@/components'; import TCheckbox from '../checkbox/TCheckbox'; -const TCheckboxGroup = forwardRef((props: TCheckboxGroupProps, ref: Ref) => { +const TCheckboxGroup = forwardRef(({ + textKey = 'text', + valueKey = 'value', + lazy = true, + onChange, + ...restProps +}: TCheckboxGroupProps, ref: Ref) => { // region [Hooks] + const props: TCheckboxGroupProps = {textKey, valueKey, lazy, onChange, ...restProps}; + const validator = useValidator(props.value, props.rules, props.successMessage); const rootRef = useRef(null); @@ -33,7 +41,7 @@ const TCheckboxGroup = forwardRef((props: TCheckboxGroupProps, ref: Ref { return props.style || {}; @@ -41,6 +49,21 @@ const TCheckboxGroup = forwardRef((props: TCheckboxGroupProps, ref: Ref { + onChange(value); + }, [onChange]); + + const removeValue = useCallback((value: TCheckboxValue) => { + emitChange(props.value.filter((v) => v !== value)); + }, [emitChange, props.value]); + + const addValue = useCallback((value: TCheckboxValue) => { + emitChange([...props.value, value]); + }, [emitChange, props.value]); + + // endregion // region [Events] @@ -50,15 +73,15 @@ const TCheckboxGroup = forwardRef((props: TCheckboxGroupProps, ref: Ref { if (props.rules) { validator.clearValidation(); } - }, [props.rules]); + }, [props.rules, validator]); - const onBlur = useCallback((event) => { + const onBlur = useCallback((event: FocusEvent) => { const next = event.relatedTarget; if (props.rules && !props.lazy && !rootRef.current.contains(next)) { @@ -69,23 +92,6 @@ const TCheckboxGroup = forwardRef((props: TCheckboxGroupProps, ref: Ref { - props.onChange(value); - }, [props.onChange]); - - const removeValue = useCallback((value: TCheckboxValue) => { - emitChange(props.value.filter((v) => v !== value)); - }, [emitChange]); - - const addValue = useCallback((value: TCheckboxValue) => { - emitChange([...props.value, value]); - }, [emitChange]); - - // endregion - - // region [Templates] return ( @@ -127,12 +133,6 @@ const TCheckboxGroup = forwardRef((props: TCheckboxGroupProps, ref: Ref) => { +const TChip = forwardRef(({ + prevIconSize = 'xsmall', + ...restProps +}: TChipProps, ref: Ref) => { // region [Hooks] + const props:TChipProps = {prevIconSize, ...restProps}; + const rootRef = useRef(null); useImperativeHandle(ref, () => ({ @@ -99,9 +104,6 @@ const TChip = forwardRef((props: TChipProps, ref: Ref) => { }); -TChip.defaultProps = { - prevIconSize: 'xsmall', -}; TChip.displayName = 'TChip'; diff --git a/src/components/input/dropdown/TDropdown.tsx b/src/components/input/dropdown/TDropdown.tsx index 7665efa8..66a7fd63 100644 --- a/src/components/input/dropdown/TDropdown.tsx +++ b/src/components/input/dropdown/TDropdown.tsx @@ -21,10 +21,40 @@ import TIcon from '~/icon/TIcon'; import TChip from '~/input/chip/TChip'; import themeToken from '~style/designToken/ThemeToken.module.scss'; -const TDropdown = forwardRef((props: TDropdownProps, ref: Ref) => { +const TDropdown = forwardRef(({ + type = 'outline', + valueKey = 'value', + textKey = 'text', + placeholder = '선택', + filterPlaceholder = '검색', + chip = true, + lazy = true, + noClearButton = false, + itemTemplate, + onOpen, + onClose, + onChange, + ...restProps +}: TDropdownProps, ref: Ref) => { // region [Hooks] + const props:TDropdownProps = { + type, + valueKey, + textKey, + placeholder, + filterPlaceholder, + chip, + lazy, + noClearButton, + itemTemplate, + onOpen, + onClose, + onChange, + ...restProps, + }; + const validator = useValidator(props.value, props.rules, props.successMessage); const inputRef = useRef(null); @@ -65,19 +95,19 @@ const TDropdown = forwardRef((props: TDropdownProps, ref: Ref) => if (props.multiple) { if (props.value.includes(newItem)) { - props.onChange((props.value as string[]).filter((v) => v !== newItem)); + onChange((props.value as string[]).filter((v) => v !== newItem)); } else { - props.onChange([...props.value, newItem]); + onChange([...props.value, newItem]); } } else { - props.onChange(newItem); + onChange(newItem); } - }, [props]); + }, [onChange, props.multiple, props.value]); const clearValue = useCallback((): void => { - props.onChange(''); + onChange(''); - }, [props]); + }, [onChange]); const initItemMap = useCallback(() => { const map = new Map(); @@ -89,18 +119,18 @@ const TDropdown = forwardRef((props: TDropdownProps, ref: Ref) => const close = useCallback((setFocus: boolean): void => { setIsOpened(false); - props.onClose?.(); + onClose?.(); setFilterText(''); if (setFocus) { focusToControl(); } - }, [focusToControl, props]); + }, [focusToControl, onClose]); const open = useCallback((): void => { setIsOpened(true); - props.onOpen?.(); + onOpen?.(); validator.clearValidation(); - }, [props, validator]); + }, [onOpen, validator]); const toggleIsOpened = useCallback((): void => { if (isOpened) { @@ -120,8 +150,8 @@ const TDropdown = forwardRef((props: TDropdownProps, ref: Ref) => return ''; } - return props.itemTemplate ? props.itemTemplate(item) : item[props.textKey]; - }, [props]); + return itemTemplate ? itemTemplate(item) : item[props.textKey]; + }, [itemTemplate, props.textKey]); const getFilteredItems = useCallback((): TDropdownItem[] => { @@ -164,7 +194,7 @@ const TDropdown = forwardRef((props: TDropdownProps, ref: Ref) => clazz.push(`t-dropdown--${props.type}`); return clazz.join(' '); - }, [isOpened, props.className, props.disabled, props.type, validator.message, validator.result]); + }, [isOpened, props.className, props.dense, props.disabled, props.readOnly, props.type, validator.message, validator.result]); const selectedClass = useMemo((): string => { const clazz: string[] = []; @@ -268,9 +298,9 @@ const TDropdown = forwardRef((props: TDropdownProps, ref: Ref) => const onClearFilterText = useCallback((): void => { if (!props.multiple) { - props.onChange(''); + onChange(''); } - }, [props]); + }, [onChange, props.multiple]); // endregion @@ -278,7 +308,7 @@ const TDropdown = forwardRef((props: TDropdownProps, ref: Ref) => // region [Templates] - const placeholder = useMemo((): string => { + const calculatedPlaceholder = useMemo((): string => { if (props.value?.length === 0) { return props.placeholder; @@ -320,7 +350,7 @@ const TDropdown = forwardRef((props: TDropdownProps, ref: Ref) =>
{/* Placeholder */} - {placeholder} + {calculatedPlaceholder} {/* Multiple Chip */} { @@ -427,17 +457,6 @@ const TDropdown = forwardRef((props: TDropdownProps, ref: Ref) => ); }); -TDropdown.defaultProps = { - type: 'outline', - valueKey: 'value', - textKey: 'text', - placeholder: '선택', - filterPlaceholder: '검색', - chip: true, - lazy: true, - noClearButton: false, -}; - TDropdown.displayName = 'TDropdown'; diff --git a/src/components/input/radio-group/TRadioGroup.tsx b/src/components/input/radio-group/TRadioGroup.tsx index 71477f15..7a4d60f8 100644 --- a/src/components/input/radio-group/TRadioGroup.tsx +++ b/src/components/input/radio-group/TRadioGroup.tsx @@ -1,90 +1,95 @@ import {CSSProperties, forwardRef, Ref, useImperativeHandle, useRef} from 'react'; import useValidator from '@/common/hook/UseValidator'; - - import TRadio from '../radio/TRadio'; import {TRadioGroupProps, TRadioGroupRef, TRadioGroupValue, TRadioValue} from '@/components'; -const TRadioGroup = forwardRef((props: TRadioGroupProps, ref: Ref) => { - +const TRadioGroup = forwardRef(({ + textKey = 'text', + valueKey = 'value', + lazy = true, + ...restProps +}: TRadioGroupProps, ref: Ref) => { + // region [Hooks] - + + const props: TRadioGroupProps = {textKey, valueKey, lazy, ...restProps}; + const validator = useValidator(props.value, props.rules, props.successMessage); const rootRef = useRef(null); - - + + useImperativeHandle(ref, () => ({ validate() { return validator.validate(); }, scrollToComponent(options: ScrollIntoViewOptions = {behavior: 'smooth', block: 'center'}) { rootRef?.current?.scrollIntoView(options); }, })); - + // endregion - - + + // region [Styles] - + function getRootClass(): string { const clazz: string[] = []; - + if (props.className) { clazz.push(props.className); } if (props.disabled) { clazz.push('t-radio-group--disabled'); } if (!validator.result) { clazz.push('t-radio-group--failure'); } if (validator.result && validator.message) { clazz.push('t-radio-group--success'); } - + return clazz.join(' '); } - + function getRootStyle(): CSSProperties { let style: CSSProperties = {}; - + if (props.style) { style = {...props.style}; } - + return style; } - + // endregion - - + + // region [Events] - + function onSelectRadio(value: TRadioValue): void { - + emitChange(value); } - + function onFocus(): void { if (props.rules) { validator.clearValidation(); } } - + function onBlur(event): void { const next = event.relatedTarget; - + if (props.rules && !props.lazy && !rootRef.current.contains(next)) { validator.validate(); } } - + // endregion - - + + // region [ETC] - - + + function emitChange(value: TRadioGroupValue): void { props.onChange(value); } - - + + // endregion - - + + // region [Templates] - + return (
- + {props.labelTemplate ? props.labelTemplate(item) : item[props.textKey]} )) @@ -115,17 +120,17 @@ const TRadioGroup = forwardRef((props: TRadioGroupProps, ref: Ref ); - + // endregion - - + + }); -TRadioGroup.defaultProps = { - textKey: 'text', - valueKey: 'value', - lazy: true, -}; +// TRadioGroup.defaultProps = { +// textKey = 'text', +// valueKey = 'value', +// lazy = true, +// }; TRadioGroup.displayName = 'TRadioGroup'; diff --git a/src/components/input/text-array-field/TTextArrayField.tsx b/src/components/input/text-array-field/TTextArrayField.tsx index e2cd1225..b5b2087d 100644 --- a/src/components/input/text-array-field/TTextArrayField.tsx +++ b/src/components/input/text-array-field/TTextArrayField.tsx @@ -4,11 +4,19 @@ import {TTextArrayFieldProps, TTextArrayFieldRef} from '~/input/text-array-field import useValidator from '../../../common/hook/UseValidator'; -const TTextArrayField = forwardRef((props: TTextArrayFieldProps, ref: Ref) => { +const TTextArrayField = forwardRef(({ + lazy = true, + duplicateMessage = '이미 입력된 값입니다.', + placeholder = '값을 입력하고 엔터를 눌러주세요.', + onChange, + ...restProps +}: TTextArrayFieldProps, ref: Ref) => { // region [Hooks] + const props: TTextArrayFieldProps = {lazy, duplicateMessage, placeholder, onChange, ...restProps}; + const validator = useValidator(props.value, props.rules, props.successMessage); const [currentInput, setCurrentInput] = useState(''); @@ -89,17 +97,17 @@ const TTextArrayField = forwardRef((props: TTextArrayFieldProps, ref: Ref 0) { - props.onChange([...props.value, candidateItem]); + onChange([...props.value, candidateItem]); setCurrentInput(''); } - }, [currentInput, isDuplicatedItem, props, validator]); + }, [currentInput, isDuplicatedItem, onChange, props.duplicateMessage, props.value, validator]); const onRemoveItem = useCallback((targetIndex: number) => { - props.onChange( + onChange( props.value.filter((item, index) => index !== targetIndex), ); - }, [props]); + }, [onChange, props.value]); const onChangeText = useCallback((value: string) => { validator.clearValidation(); @@ -146,12 +154,6 @@ const TTextArrayField = forwardRef((props: TTextArrayFieldProps, ref: Ref) => { +const TTextField = forwardRef(({ + lazy = true, + rows = 1, + onClear, + onBlur, + onFocus, + onKeyDown, + onChange, + onKeyDownEnter, + onClickSearch, + ...restProps +}: TTextFieldProps, ref: Ref) => { // region [Hooks] + const props: TTextFieldProps = {lazy, rows, onClear, onBlur, onFocus, onKeyDown, onChange, onKeyDownEnter, onClickSearch, ...restProps}; + const [isPasswordVisible, setIsPasswordVisible] = useState(false); const [hasFocus, setHasFocus] = useState(false); const validator = useValidator(props.noTrim ? props.value : props.value?.toString().trim(), props.rules, props.successMessage); @@ -64,59 +77,59 @@ const TTextField = forwardRef((props: TTextFieldProps, ref: Ref) // region [Events] - const onChange = useCallback((event): void => { + const onChangeInput = useCallback((event): void => { const newLength = props.noTrim ? event.target.value.length : event.target.value.trim().length; if (props.counter) { if (newLength > props.counter) { - props.onChange(event.target.value.substring(0, props.counter)); + onChange(event.target.value.substring(0, props.counter)); return; } } - props.onChange(event.target.value); - }, [props]); - const onFocus = useCallback((): void => { + onChange(event.target.value); + }, [onChange, props.counter, props.noTrim]); + const onFocusInput = useCallback((): void => { validator.clearValidation(); setHasFocus(true); - if (props.onFocus) { - props.onFocus(); + if (onFocus) { + onFocus(); } - }, [props, validator]); + }, [onFocus, validator]); - const onBlur = useCallback((): void => { + const onBlurInput = useCallback((): void => { if (!props.noTrim && props.value !== props.value.trim()) { - props.onChange(props.value.trim()); + onChange(props.value.trim()); } if (!props.lazy) { validator.validate(); } setHasFocus(false); - if (props.onBlur) { - props.onBlur(); + if (onBlur) { + onBlur(); } - }, [props, validator]); + }, [onBlur, onChange, props.lazy, props.noTrim, props.value, validator]); - const onKeyDown = useCallback((event: KeyboardEvent): void => { + const onKeyDownInput = useCallback((event: KeyboardEvent): void => { if (event.nativeEvent.isComposing) { return; } - if (event.key === 'Enter' && props.onKeyDownEnter) { - props.onKeyDownEnter(event); + if (event.key === 'Enter' && onKeyDownEnter) { + onKeyDownEnter(event); } - if (props.onKeyDown) { - props.onKeyDown(event); + if (onKeyDown) { + onKeyDown(event); } - }, [props]); + }, [onKeyDown, onKeyDownEnter]); const onClickClear = useCallback((event: MouseEvent): void => { event?.stopPropagation(); - if (props.onChange) { props.onChange(''); } - if (props.onClear) { props.onClear(); } - }, [props]); + if (onChange) { onChange(''); } + if (onClear) { onClear(); } + }, [onChange, onClear]); // endregion @@ -211,10 +224,10 @@ const TTextField = forwardRef((props: TTextFieldProps, ref: Ref) disabled={props.disabled || props.readOnly} placeholder={(props.disabled || props.readOnly) ? '' : props.placeholder} value={props.value} - onChange={onChange} - onKeyDown={onKeyDown} - onFocus={onFocus} - onBlur={onBlur} + onChange={onChangeInput} + onKeyDown={onKeyDownInput} + onFocus={onFocusInput} + onBlur={onBlurInput} autoComplete={props.autoComplete} data-testid={'text-field-input'} /> @@ -226,10 +239,10 @@ const TTextField = forwardRef((props: TTextFieldProps, ref: Ref) disabled={props.disabled || props.readOnly} placeholder={(props.disabled || props.readOnly) ? '' : props.placeholder} value={props.value} - onChange={onChange} - onKeyDown={onKeyDown} - onFocus={onFocus} - onBlur={onBlur} + onChange={onChangeInput} + onKeyDown={onKeyDownInput} + onFocus={onFocusInput} + onBlur={onBlurInput} autoComplete={props.autoComplete} data-testid={'text-field-text-area'} rows={props.rows} @@ -304,10 +317,6 @@ const TTextField = forwardRef((props: TTextFieldProps, ref: Ref) ); }); -TTextField.defaultProps = { - lazy: true, - rows: 1, -}; TTextField.displayName = 'TTextField'; From c3fa8c4f58d971a58e0115dd9022e535e0c204fe Mon Sep 17 00:00:00 2001 From: Siyeop Date: Tue, 23 Jul 2024 15:31:19 +0900 Subject: [PATCH 23/23] 0.8.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fc48bc6e..d1b6b4c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tksui-components", - "version": "0.7.20", + "version": "0.8.0", "private": false, "type": "module", "module": "lib/esm/index.js",