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",
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) {