Merge pull request #89 from openinfradev/feature-checkbox-disabled-on

openinfradev · Apr 16, 2024 · 27e5756 · 27e5756
2 parents 996a0a6 + d13a3a6
commit 27e5756
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git 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
@@ -1,3 +1,4 @@
+
 /* eslint-disable max-len */
 const TOriginalImage = {
     t_checkbox_on: (
@@ -11,10 +12,17 @@ const TOriginalImage = {
             <rect x='0.5' y='0.5' width='15' height='15' rx='3.5'/>
         </svg>
     ),
+    t_checkbox_disabled_on: (
+        <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+            <rect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill='currentColor' stroke='#B8BABC' />
+            <path d='M6.58327 11.25L3.7666 8.41667L4.59993 7.58333L6.58327 9.55L11.3999 4.75L12.2333 5.6L6.58327 11.25Z' fill='#B8BABC'
+                  stroke='none'/>
+        </svg>
+    ),
     t_checkbox_disabled_off: (
         <svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
             <g>
-                <rect id='Rectangle 41976' x='0.5' y='0.5' width='15' height='15' rx='3.5' fill='#F4F4F4' stroke='#B8BABC'/>
+                <rect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill='#F4F4F4' stroke='#B8BABC'/>
             </g>
         </svg>
     ),

diff --git 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,27 +33,28 @@ const TCheckbox = forwardRef((props: TCheckboxProps, ref: Ref<TCheckboxRef>) =>
     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]);
 
     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<TCheckboxRef>) =>
 
         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) {