Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/#585 create disabled property #627

Merged
merged 7 commits into from
Dec 25, 2024
+187 −64
Merged

Feature/#585 create disabled property #627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3fddd6e
#585 define disabled property
oleojake Dec 23, 2024
50654f9
#585 create disabled option on rigth panel
oleojake Dec 23, 2024
d05da12
#585 add disabled property to proper components
oleojake Dec 23, 2024
5c8064e
#585 define components behavior when disabled
oleojake Dec 23, 2024
b06e7e7
listbox disabled
brauliodiez Dec 25, 2024
78d81af
added disabled to common properties
brauliodiez Dec 25, 2024
c4748e5
Merge branch 'dev' into feature/#585-create-disabled-property
brauliodiez Dec 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions src/common/components/mock-components/front-components/button-shape.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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}
Expand All @@ -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"
Expand Down
22 changes: 16 additions & 6 deletions src/common/components/mock-components/front-components/checkbox-shape.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand All @@ -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
Expand All @@ -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"
Expand All @@ -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}
Expand Down
16 changes: 7 additions & 9 deletions src/common/components/mock-components/front-components/combobox-shape.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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,
Expand All @@ -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}
Expand All @@ -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"
Expand All @@ -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>
Expand Down
16 changes: 10 additions & 6 deletions src/common/components/mock-components/front-components/datepickerinput-shape.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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
Expand All @@ -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}
Expand Down
14 changes: 6 additions & 8 deletions src/common/components/mock-components/front-components/input-shape.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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,
Expand All @@ -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}
Expand All @@ -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"
Expand Down
24 changes: 18 additions & 6 deletions src/common/components/mock-components/front-components/listbox/listbox-shape.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
calculateDynamicContentSizeRestriction,
mapListboxTextToItems,
} from './listbox-shape.business';
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';

Expand Down Expand Up @@ -76,6 +76,7 @@ export const ListBoxShape = forwardRef<any, ListBoxShapeProps>((props, ref) => {
borderRadius,
textColor,
selectedBackgroundColor,
disabled,
} = useShapeProps(otherProps, BASIC_SHAPE);

const commonGroupProps = useGroupShapeProps(
Expand All @@ -85,6 +86,19 @@ export const ListBoxShape = forwardRef<any, ListBoxShapeProps>((props, ref) => {
ref
);

const calculateItemBackground = (index: number) => {
if (disabled) return DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR;

return selectedItem === index ? selectedBackgroundColor : fill;
};

const calculateItemStroke = (index: number) => {
if (disabled && selectedItem === index)
return DISABLED_COLOR_VALUES.DEFAULT_STROKE_COLOR;

return selectedItem === index ? selectedBackgroundColor : 'transparent';
};

return (
<Group {...commonGroupProps} {...shapeProps}>
{/* Listbox Item rectanble */}
Expand All @@ -98,7 +112,7 @@ export const ListBoxShape = forwardRef<any, ListBoxShapeProps>((props, ref) => {
stroke={stroke}
strokeWidth={2}
dash={strokeStyle}
fill={fill}
fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_BACKGROUND_COLOR : fill}
/>

{/* Listbox Items */}
Expand All @@ -110,10 +124,8 @@ export const ListBoxShape = forwardRef<any, ListBoxShapeProps>((props, ref) => {
y={0 + index * singleHeaderHeight}
width={restrictedWidth}
height={singleHeaderHeight}
fill={selectedItem === index ? selectedBackgroundColor : fill}
stroke={
selectedItem === index ? selectedBackgroundColor : 'transparent'
}
fill={calculateItemBackground(index)}
stroke={calculateItemStroke(index)}
strokeWidth={selectedItem === index ? 1 : 0}
/>
<Text
Expand Down
20 changes: 15 additions & 5 deletions src/common/components/mock-components/front-components/radiobutton-shape.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand All @@ -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}
/>

Expand All @@ -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 */}
Expand All @@ -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}
Expand Down
Loading
Loading