#585 define components behavior when disabled

Lemoncode · Dec 23, 2024 · 5c8064e · 5c8064e
1 parent d05da12
commit 5c8064e
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 57 deletions.
diff --git a/src/common/components/mock-components/front-components/button-shape.tsx b/src/common/components/mock-components/front-components/button-shape.tsx
@@ -6,6 +6,7 @@ import { Group, Rect, Text } from 'react-konva';
 import { BASIC_SHAPE } from './shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
+import { DISABLED_COLOR_VALUES } from '@/common/components/mock-components/front-components/shape.const';
 
 const buttonShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 50,
@@ -41,10 +42,8 @@ export const ButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { stroke, strokeStyle, fill, textColor, borderRadius, disabled } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,10 +60,10 @@ export const ButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke={stroke}
+        stroke={disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke}
         dash={strokeStyle}
         strokeWidth={1.5}
-        fill={fill}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill}
       />
       <Text
         x={0}
@@ -75,7 +74,7 @@ export const ButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}
         lineHeight={1.25}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="center"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/mock-components/front-components/checkbox-shape.tsx b/src/common/components/mock-components/front-components/checkbox-shape.tsx
@@ -4,7 +4,7 @@ import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Line, Text } from 'react-konva';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
-import { BASIC_SHAPE } from './shape.const';
+import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from './shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const CHECKBOX_DEFAULT_HEIGHT = 20;
@@ -48,7 +48,7 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { isOn, textColor } = useShapeProps(otherProps, BASIC_SHAPE);
+  const { isOn, textColor, disabled } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -65,9 +65,15 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={boxTickWidth}
         height={restrictedHeight}
         cornerRadius={BASIC_SHAPE.DEFAULT_CORNER_RADIUS}
-        stroke={BASIC_SHAPE.DEFAULT_STROKE_COLOR}
+        stroke={
+          disabled
+            ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR
+            : BASIC_SHAPE.DEFAULT_STROKE_COLOR
+        }
         strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
-        fill="white"
+        fill={
+          disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : 'white'
+        }
       />
       {isOn && (
         <Line
@@ -81,7 +87,11 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
             tickWidth - marginTick,
             marginTick,
           ]}
-          stroke={BASIC_SHAPE.DEFAULT_STROKE_COLOR}
+          stroke={
+            disabled
+              ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR
+              : BASIC_SHAPE.DEFAULT_STROKE_COLOR
+          }
           strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
           lineCap="round"
           lineJoin="round"
@@ -95,7 +105,7 @@ export const CheckBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
         text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="left"
         verticalAlign="middle"
         ellipsis={true}

diff --git a/src/common/components/mock-components/front-components/combobox-shape.tsx b/src/common/components/mock-components/front-components/combobox-shape.tsx
@@ -4,7 +4,7 @@ import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Text, Rect, Line } from 'react-konva';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
-import { BASIC_SHAPE } from './shape.const';
+import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from './shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const comboBoxShapeRestrictions: ShapeSizeRestrictions = {
@@ -40,10 +40,8 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { stroke, strokeStyle, fill, textColor, borderRadius, disabled } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -60,10 +58,10 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke={stroke}
+        stroke={disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke}
         dash={strokeStyle}
         strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
-        fill={fill}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill}
       />
       <Text
         x={BASIC_SHAPE.DEFAULT_PADDING}
@@ -73,7 +71,7 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}
         lineHeight={BASIC_SHAPE.DEFAULT_LINE_HEIGHT}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="left"
         ellipsis={true}
         wrap="none"
@@ -89,7 +87,7 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>((props, ref) => {
           restrictedWidth - 15,
           0,
         ]}
-        fill="black"
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : 'black'}
         closed={true}
       />
     </Group>

diff --git a/src/common/components/mock-components/front-components/datepickerinput-shape.tsx b/src/common/components/mock-components/front-components/datepickerinput-shape.tsx
@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Text, Image } from 'react-konva';
-import { INPUT_SHAPE } from './shape.const';
+import { DISABLED_COLOR_VALUES, INPUT_SHAPE } from './shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
 
@@ -44,7 +44,7 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
 
     const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-    const { stroke, fill, textColor, strokeStyle, borderRadius } =
+    const { stroke, fill, textColor, strokeStyle, borderRadius, disabled } =
       useShapeProps(otherProps, INPUT_SHAPE);
 
     const commonGroupProps = useGroupShapeProps(
@@ -75,10 +75,14 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
           width={restrictedWidth}
           height={restrictedHeight}
           cornerRadius={borderRadius}
-          stroke={stroke}
+          stroke={
+            disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke
+          }
           dash={strokeStyle}
           strokeWidth={2}
-          fill={fill}
+          fill={
+            disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill
+          }
         />
         {/* Background of Date Label */}
         <Rect
@@ -95,14 +99,14 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
           x={13}
           y={-5}
           fontSize={labelFontSize}
-          fill={stroke}
+          fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : stroke}
           align="center"
           color={stroke}
         />
         {/* Main Text */}
         <Text
           text={text}
-          fill={textColor}
+          fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
           x={10}
           y={(restrictedHeight - fontSize) / 2 + 2}
           width={availableWidth}

diff --git a/src/common/components/mock-components/front-components/input-shape.tsx b/src/common/components/mock-components/front-components/input-shape.tsx
@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Text } from 'react-konva';
-import { INPUT_SHAPE } from './shape.const';
+import { DISABLED_COLOR_VALUES, INPUT_SHAPE } from './shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
 
@@ -41,10 +41,8 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, fill, textColor, strokeStyle, borderRadius } = useShapeProps(
-    otherProps,
-    INPUT_SHAPE
-  );
+  const { stroke, fill, textColor, strokeStyle, borderRadius, disabled } =
+    useShapeProps(otherProps, INPUT_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,10 +59,10 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke={stroke}
+        stroke={disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke}
         dash={strokeStyle}
         strokeWidth={INPUT_SHAPE.DEFAULT_STROKE_WIDTH}
-        fill={fill}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill}
       />
       <Text
         x={INPUT_SHAPE.DEFAULT_PADDING}
@@ -74,7 +72,7 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
         fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE}
         lineHeight={INPUT_SHAPE.DEFAULT_LINE_HEIGHT}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="left"
         ellipsis={true}
         wrap="none"

diff --git a/src/common/components/mock-components/front-components/radiobutton-shape.tsx b/src/common/components/mock-components/front-components/radiobutton-shape.tsx
@@ -4,7 +4,7 @@ import { Group, Circle, Text } from 'react-konva';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
-import { BASIC_SHAPE } from './shape.const';
+import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from './shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
 const RADIO_BUTTON_DEFAULT_HEIGHT = 18;
@@ -45,7 +45,7 @@ export const RadioButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
 
   const radius = restrictedHeight / 2;
 
-  const { isOn, textColor } = useShapeProps(otherProps, BASIC_SHAPE);
+  const { isOn, textColor, disabled } = useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -61,7 +61,11 @@ export const RadioButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
         x={radius}
         y={radius}
         radius={radius}
-        stroke={BASIC_SHAPE.DEFAULT_STROKE_COLOR}
+        stroke={
+          disabled
+            ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR
+            : BASIC_SHAPE.DEFAULT_STROKE_COLOR
+        }
         strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
       />
 
@@ -70,7 +74,13 @@ export const RadioButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
         x={radius}
         y={radius}
         radius={radius * 0.6}
-        fill={isOn ? 'black' : 'white'}
+        fill={
+          isOn
+            ? disabled
+              ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR
+              : 'black'
+            : 'white'
+        }
       />
 
       {/* Text */}
@@ -82,7 +92,7 @@ export const RadioButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
         height={restrictedHeight}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="left"
         verticalAlign="middle"
         ellipsis={true}

diff --git a/src/common/components/mock-components/front-components/textarea-shape.tsx b/src/common/components/mock-components/front-components/textarea-shape.tsx
@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { ShapeProps } from '../shape.model';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { Group, Rect, Text } from 'react-konva';
-import { BASIC_SHAPE } from './shape.const';
+import { BASIC_SHAPE, DISABLED_COLOR_VALUES } from './shape.const';
 import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { useGroupShapeProps } from '../mock-components.utils';
 
@@ -40,10 +40,8 @@ export const TextAreaShape = forwardRef<any, ShapeProps>((props, ref) => {
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
 
-  const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const { stroke, strokeStyle, fill, textColor, borderRadius, disabled } =
+    useShapeProps(otherProps, BASIC_SHAPE);
 
   const commonGroupProps = useGroupShapeProps(
     props,
@@ -60,9 +58,9 @@ export const TextAreaShape = forwardRef<any, ShapeProps>((props, ref) => {
         width={restrictedWidth}
         height={restrictedHeight}
         cornerRadius={borderRadius}
-        stroke={stroke}
+        stroke={disabled ? DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR : stroke}
         strokeWidth={2}
-        fill={fill}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill}
         dash={strokeStyle}
       />
       <Text
@@ -73,7 +71,7 @@ export const TextAreaShape = forwardRef<any, ShapeProps>((props, ref) => {
         text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}
-        fill={textColor}
+        fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
         align="left"
         ellipsis={true}
       />