Skip to content

Commit 007cf45

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #699 from Lemoncode/dev
dark mode and input
2 parents ee22b03 + bcb553e commit 007cf45

File tree

23 files changed

+265
-4
lines changed

23 files changed

+265
-4
lines changed

‎public/icons/moonalt.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎public/widgets/togglelightdark.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎src/common/components/mock-components/front-components/input-shape.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,15 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
4141

4242
const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
4343

44-
const { stroke, fill, textColor, strokeStyle, borderRadius, disabled } =
45-
useShapeProps(otherProps, INPUT_SHAPE);
44+
const {
45+
stroke,
46+
fill,
47+
textColor,
48+
strokeStyle,
49+
borderRadius,
50+
disabled,
51+
isPlaceholder,
52+
} = useShapeProps(otherProps, INPUT_SHAPE);
4653

4754
const commonGroupProps = useGroupShapeProps(
4855
props,
@@ -72,7 +79,13 @@ export const InputShape = forwardRef<any, ShapeProps>((props, ref) => {
7279
fontFamily={INPUT_SHAPE.DEFAULT_FONT_FAMILY}
7380
fontSize={INPUT_SHAPE.DEFAULT_FONT_SIZE}
7481
lineHeight={INPUT_SHAPE.DEFAULT_LINE_HEIGHT}
75-
fill={disabled ? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR : textColor}
82+
fill={
83+
disabled
84+
? DISABLED_COLOR_VALUES.DEFAULT_TEXT_COLOR
85+
: isPlaceholder
86+
? '#8c8c8c'
87+
: textColor
88+
}
7689
align="left"
7790
ellipsis={true}
7891
wrap="none"

‎src/common/components/mock-components/front-components/shape.const.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const DEFAULT_FONT_SIZE = 16;
88
const DEFAULT_FILL_TEXT = '#000000';
99
const DEFAULT_PADDING = 10;
1010
const DEFAULT_LINE_HEIGHT = 1.25;
11-
const DEFAULT_FILL_TEXT_INPUT = '#8c8c8c';
11+
const DEFAULT_FILL_TEXT_INPUT = '#000000';
1212
const DEFAULT_FONT_SIZE_INPUT = 15;
1313
const DEFAULT_TEXT_WIDTH = 165;
1414
const DEFAULT_TEXT_HEIGHT = 38;

‎src/common/components/mock-components/front-rich-components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,4 @@ export * from './buttonBar/buttonBar';
1515
export * from './tabsbar';
1616
export * from './audio-player';
1717
export * from './videoconference';
18+
export * from './togglelightdark-shape';

‎src/common/components/mock-components/front-rich-components/togglelightdark-shape.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
2+
import { forwardRef } from 'react';
3+
import { ShapeProps } from '../shape.model';
4+
import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
5+
import { Circle, Group, Rect, Image } from 'react-konva';
6+
import { useShapeProps } from '../../shapes/use-shape-props.hook';
7+
import { BASIC_SHAPE } from '../front-components/shape.const';
8+
import { useGroupShapeProps } from '../mock-components.utils';
9+
import sunIconUrl from '/icons/sun.svg';
10+
import moonIconUrl from '/icons/moonalt.svg';
11+
12+
const iconSize = 20;
13+
14+
const toggleLightDarkShapeRestrictions: ShapeSizeRestrictions = {
15+
minWidth: 50,
16+
minHeight: 25,
17+
maxWidth: 50,
18+
maxHeight: 25,
19+
defaultWidth: 50,
20+
defaultHeight: 25,
21+
};
22+
23+
const shapeType: ShapeType = 'toggleLightDark';
24+
25+
export const getToggleLightDarkShapeSizeRestrictions =
26+
(): ShapeSizeRestrictions => toggleLightDarkShapeRestrictions;
27+
28+
export const ToggleLightDark = forwardRef<any, ShapeProps>((props, ref) => {
29+
const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } =
30+
props;
31+
const restrictedSize = fitSizeToShapeSizeRestrictions(
32+
toggleLightDarkShapeRestrictions,
33+
width,
34+
height
35+
);
36+
const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
37+
38+
const { isOn } = useShapeProps(otherProps, BASIC_SHAPE);
39+
40+
const circleX = isOn
41+
? restrictedHeight / 2
42+
: restrictedWidth - restrictedHeight / 2;
43+
44+
const commonGroupProps = useGroupShapeProps(
45+
props,
46+
restrictedSize,
47+
shapeType,
48+
ref
49+
);
50+
51+
const toggleIcon = new window.Image();
52+
toggleIcon.src = isOn ? sunIconUrl : moonIconUrl;
53+
54+
return (
55+
<Group {...commonGroupProps} {...shapeProps}>
56+
<Rect
57+
x={0}
58+
y={0}
59+
width={restrictedWidth}
60+
height={restrictedHeight}
61+
cornerRadius={50}
62+
stroke="black"
63+
strokeWidth={2}
64+
fill={isOn ? 'white' : 'gray'}
65+
/>
66+
<Circle
67+
x={circleX}
68+
y={restrictedHeight / 2}
69+
radius={restrictedHeight / 2}
70+
stroke="black"
71+
strokeWidth={2}
72+
fill={isOn ? 'white' : 'gray'}
73+
/>
74+
<Image
75+
image={toggleIcon}
76+
x={circleX - iconSize / 2}
77+
y={restrictedHeight / 2 - iconSize / 2}
78+
width={iconSize}
79+
height={iconSize}
80+
/>
81+
</Group>
82+
);
83+
});

‎src/common/components/shapes/use-shape-props.hook.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ export const useShapeProps = (
2222
[otherProps?.textColor]
2323
);
2424

25+
const isPlaceholder = useMemo(
26+
() => otherProps?.isPlaceholder ?? true,
27+
[otherProps?.isPlaceholder]
28+
);
29+
2530
const fontVariant = useMemo(
2631
() => otherProps?.fontVariant ?? defaultStyleShape.DEFAULT_FONT_VARIANT,
2732
[otherProps?.fontVariant]
@@ -93,5 +98,6 @@ export const useShapeProps = (
9398
textDecoration,
9499
textAlignment,
95100
disabled,
101+
isPlaceholder,
96102
};
97103
};

‎src/core/model/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export type ShapeType =
1515
| 'checkbox'
1616
| 'textarea'
1717
| 'toggleswitch'
18+
| 'toggleLightDark'
1819
| 'progressbar'
1920
| 'listbox'
2021
| 'datepickerinput'
@@ -81,6 +82,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
8182
checkbox: 'Checkbox',
8283
textarea: 'Textarea',
8384
toggleswitch: 'Toggle Switch',
85+
toggleLightDark: 'Toggle Light/Dark',
8486
progressbar: 'Progress Bar',
8587
listbox: 'List Box',
8688
datepickerinput: 'Date Picker Input',
@@ -182,6 +184,7 @@ export interface OtherProps {
182184
selectedBackgroundColor?: string;
183185
textAlignment?: 'left' | 'center' | 'right';
184186
disabled?: boolean;
187+
isPlaceholder?: boolean;
185188
}
186189

187190
export const BASE_ICONS_URL = '/icons/';

‎src/pods/canvas/model/shape-other-props.utils.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const generateDefaultOtherProps = (
1515
stroke: INPUT_SHAPE.DEFAULT_STROKE_COLOR,
1616
backgroundColor: INPUT_SHAPE.DEFAULT_FILL_BACKGROUND,
1717
textColor: INPUT_SHAPE.DEFAULT_FILL_TEXT,
18+
isPlaceholder: true,
1819
strokeStyle: [],
1920
borderRadius: `${INPUT_SHAPE.DEFAULT_CORNER_RADIUS}`,
2021
disabled: INPUT_SHAPE.DEFAULT_DISABLED,
@@ -194,6 +195,7 @@ export const generateDefaultOtherProps = (
194195
textColor: '#000000',
195196
};
196197
case 'toggleswitch':
198+
case 'toggleLightDark':
197199
return {
198200
checked: true,
199201
};

‎src/pods/canvas/model/shape-size.mapper.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ import {
5757
getPieChartShapeSizeRestrictions,
5858
getTableSizeRestrictions,
5959
getTabsBarShapeSizeRestrictions,
60+
getToggleLightDarkShapeSizeRestrictions,
6061
getVerticalMenuShapeSizeRestrictions,
6162
getVideoPlayerShapeSizeRestrictions,
6263
getVideoconferenceShapeSizeRestrictions,
@@ -90,6 +91,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
9091
combobox: getComboBoxShapeSizeRestrictions,
9192
input: getInputShapeSizeRestrictions,
9293
toggleswitch: getToggleSwitchShapeSizeRestrictions,
94+
toggleLightDark: getToggleLightDarkShapeSizeRestrictions,
9395
textarea: getTextAreaSizeRestrictions,
9496
datepickerinput: getDatepickerInputShapeSizeRestrictions,
9597
button: getButtonShapeSizeRestrictions,

0 commit comments

Comments
 (0)