From d74540705e1a44ed4ba2a8af8a7f6acf0cc84d46 Mon Sep 17 00:00:00 2001 From: kkusaeng Date: Tue, 16 Apr 2024 17:58:40 +0900 Subject: [PATCH 1/2] feature. Add checked and disabled Icon to Checkbox --- src/components/icon/TIconOriginal.tsx | 10 +++++++++- src/components/input/checkbox/TCheckbox.tsx | 22 ++++++++++++--------- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/components/icon/TIconOriginal.tsx b/src/components/icon/TIconOriginal.tsx index dfd27718..3a84f0cb 100644 --- a/src/components/icon/TIconOriginal.tsx +++ b/src/components/icon/TIconOriginal.tsx @@ -1,3 +1,4 @@ + /* eslint-disable max-len */ const TOriginalImage = { t_checkbox_on: ( @@ -11,10 +12,17 @@ const TOriginalImage = { ), + t_checkbox_disabled_on: ( + + + + + ), t_checkbox_disabled_off: ( - + ), diff --git a/src/components/input/checkbox/TCheckbox.tsx b/src/components/input/checkbox/TCheckbox.tsx index 3a7b7a68..d387bdc2 100644 --- a/src/components/input/checkbox/TCheckbox.tsx +++ b/src/components/input/checkbox/TCheckbox.tsx @@ -1,12 +1,13 @@ import {CSSProperties, forwardRef, KeyboardEvent, Ref, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react'; import TIcon from '../../icon/TIcon'; -import {TCheckboxProps, TCheckboxRef, TCheckBoxStatus} from './TCheckbox.interface'; +import {TCheckboxProps, TCheckboxRef, TCheckBoxStatus} from '@/components'; import useValidator from '@/common/hook/UseValidator'; import themeToken from '~style/designToken/ThemeToken.module.scss'; const checkboxIcons = { check: 't_checkbox_on', uncheck: 't_checkbox_off', + disabledCheck: 't_checkbox_disabled_on', disabledUnCheck: 't_checkbox_disabled_off', indeterminate: 't_checkbox_indeterminate', }; @@ -32,10 +33,10 @@ const TCheckbox = forwardRef((props: TCheckboxProps, ref: Ref) => const getRootClass = useCallback(() => { const clazz: string[] = []; - if (props.className) clazz.push(props.className); - if (props.disabled) clazz.push('t-checkbox--disabled'); - if (!validator.result) clazz.push('t-checkbox--failure'); - if (validator.result && validator.message) clazz.push('t-checkbox--success'); + if (props.className) { clazz.push(props.className); } + if (props.disabled) { clazz.push('t-checkbox--disabled'); } + if (!validator.result) { clazz.push('t-checkbox--failure'); } + if (validator.result && validator.message) { clazz.push('t-checkbox--success'); } return clazz.join(' '); }, [props.className, props.disabled, validator.result, validator.message]); @@ -43,16 +44,17 @@ const TCheckbox = forwardRef((props: TCheckboxProps, ref: Ref) => const getRootStyle = useCallback(() => { let style: CSSProperties = {}; - if (props.style) style = {...props.style}; + if (props.style) { style = {...props.style}; } return style; }, [props.style]); const iconColorByStatus = useMemo(() => { + if (props.disabled) { return themeToken.tGrayColor2; } if (status === 'check' || status === 'indeterminate') { return themeToken.tPrimaryColor; } - if (status === 'uncheck') { return themeToken.tGrayColor3; } + if (status === 'uncheck' || props.disabled) { return themeToken.tGrayColor3; } return ''; - }, [status]); + }, [status, props.disabled]); // endregion @@ -116,8 +118,10 @@ const TCheckbox = forwardRef((props: TCheckboxProps, ref: Ref) => if (status === 'indeterminate') { iconType = checkboxIcons.indeterminate; - } else if (status === 'check') { + } else if (status === 'check' && !props.disabled) { iconType = checkboxIcons.check; + } else if (status === 'check' && props.disabled) { + iconType = checkboxIcons.disabledCheck; } else if (status === 'uncheck' && props.disabled) { iconType = checkboxIcons.disabledUnCheck; } else if (status === 'uncheck' && !props.disabled) { From d13a3a65d6b8191a840851685c394ee82af9e24c Mon Sep 17 00:00:00 2001 From: Siyeop Date: Tue, 16 Apr 2024 18:04:18 +0900 Subject: [PATCH 2/2] 0.6.8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a8ad20da..ec9d811c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tksui-components", - "version": "0.6.7", + "version": "0.6.8", "private": false, "type": "module", "module": "lib/esm/index.js",