#585 define disabled property

Lemoncode · Dec 23, 2024 · 3fddd6e · 3fddd6e
1 parent 537d333
commit 3fddd6e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/src/common/components/mock-components/front-components/shape.const.ts b/src/common/components/mock-components/front-components/shape.const.ts
@@ -16,6 +16,7 @@ const DEFAULT_FONT_VARIANT = 'normal';
 const DEFAULT_FONT_STYLE = 'normal';
 const DEFAULT_TEXT_DECORATION = 'none';
 const DEFAULT_TEXT_ALIGNMENT = 'left';
+const DEFAULT_DISABLED = false;
 
 export interface DefaultStyleShape {
   DEFAULT_CORNER_RADIUS: number;
@@ -34,6 +35,7 @@ export interface DefaultStyleShape {
   DEFAULT_FONT_STYLE: string;
   DEFAULT_TEXT_DECORATION: string;
   DEFAULT_TEXT_ALIGNMENT: 'left' | 'center' | 'right';
+  DEFAULT_DISABLED: boolean;
 }
 
 export const BASIC_SHAPE: DefaultStyleShape = {
@@ -53,6 +55,7 @@ export const BASIC_SHAPE: DefaultStyleShape = {
   DEFAULT_FONT_STYLE,
   DEFAULT_TEXT_DECORATION,
   DEFAULT_TEXT_ALIGNMENT,
+  DEFAULT_DISABLED,
 };
 
 export const INPUT_SHAPE: DefaultStyleShape = {
@@ -72,6 +75,7 @@ export const INPUT_SHAPE: DefaultStyleShape = {
   DEFAULT_FONT_STYLE,
   DEFAULT_TEXT_DECORATION,
   DEFAULT_TEXT_ALIGNMENT,
+  DEFAULT_DISABLED,
 };
 
 //! maybe a function to calc max height base on the text
@@ -92,6 +96,7 @@ export const POSTIT_SHAPE: DefaultStyleShape = {
   DEFAULT_FONT_STYLE,
   DEFAULT_TEXT_DECORATION,
   DEFAULT_TEXT_ALIGNMENT,
+  DEFAULT_DISABLED,
 };
 
 interface FontValues {
@@ -114,6 +119,18 @@ export const FONT_SIZE_VALUES: FontValues = {
   LINK: 20,
 };
 
+interface DisabledValues {
+  DEFAULT_STROKE_COLOR: string;
+  DEFAULT_BACKGROUND_COLOR: string;
+  DEFAULT_TEXT_COLOR: string;
+}
+
+export const DISABLED_COLOR_VALUES: DisabledValues = {
+  DEFAULT_STROKE_COLOR: '#D9D9D9',
+  DEFAULT_BACKGROUND_COLOR: '#F5F5F5',
+  DEFAULT_TEXT_COLOR: '#B0B0B0',
+};
+
 export const LINK_SHAPE: DefaultStyleShape = {
   ...BASIC_SHAPE,
   DEFAULT_FILL_TEXT: '#0000FF',

diff --git a/src/common/components/shapes/use-shape-props.hook.ts b/src/common/components/shapes/use-shape-props.hook.ts
@@ -73,6 +73,11 @@ export const useShapeProps = (
     [otherProps?.selectedBackgroundColor]
   );
 
+  const disabled = useMemo(
+    () => otherProps?.disabled ?? defaultStyleShape.DEFAULT_DISABLED,
+    [otherProps?.disabled]
+  );
+
   return {
     stroke,
     fill,
@@ -87,5 +92,6 @@ export const useShapeProps = (
     fontSize,
     textDecoration,
     textAlignment,
+    disabled,
   };
 };
diff --git a/src/core/model/index.ts b/src/core/model/index.ts
@@ -175,6 +175,7 @@ export interface OtherProps {
   activeElement?: number;
   selectedBackgroundColor?: string;
   textAlignment?: 'left' | 'center' | 'right';
+  disabled?: boolean;
 }
 
 export const BASE_ICONS_URL = '/icons/';