diff --git a/src/common/components/mock-components/front-components/shape.const.ts b/src/common/components/mock-components/front-components/shape.const.ts index 63656560..163d2222 100644 --- 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 index f3d79f85..7ff7d990 100644 --- 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 index c4580e2c..97a63845 100644 --- 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/';