Merge branch 'dev' into feature/#692add-a-placeholder-property-to-input-mock-shape

Author: brauliodiez

public/icons/moonalt.svg

@@ -15,3 +15,4 @@ export * from './buttonBar/buttonBar';
 export * from './tabsbar';
 export * from './audio-player';
 export * from './videoconference';
+export * from './togglelightdark-shape';

public/widgets/togglelightdark.svg

@@ -0,0 +1,83 @@
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { forwardRef } from 'react';
+import { ShapeProps } from '../shape.model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { Circle, Group, Rect, Image } from 'react-konva';
+import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import { BASIC_SHAPE } from '../front-components/shape.const';
+import { useGroupShapeProps } from '../mock-components.utils';
+import sunIconUrl from '/icons/sun.svg';
+import moonIconUrl from '/icons/moonalt.svg';
+
+const iconSize = 20;
+
+const toggleLightDarkShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 50,
+  minHeight: 25,
+  maxWidth: 50,
+  maxHeight: 25,
+  defaultWidth: 50,
+  defaultHeight: 25,
+};
+
+const shapeType: ShapeType = 'toggleLightDark';
+
+export const getToggleLightDarkShapeSizeRestrictions =
+  (): ShapeSizeRestrictions => toggleLightDarkShapeRestrictions;
+
+export const ToggleLightDark = forwardRef<any, ShapeProps>((props, ref) => {
+  const { x, y, width, height, id, onSelected, otherProps, ...shapeProps } =
+    props;
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    toggleLightDarkShapeRestrictions,
+    width,
+    height
+  );
+  const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+  const { isOn } = useShapeProps(otherProps, BASIC_SHAPE);
+
+  const circleX = isOn
+    ? restrictedHeight / 2
+    : restrictedWidth - restrictedHeight / 2;
+
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+
+  const toggleIcon = new window.Image();
+  toggleIcon.src = isOn ? sunIconUrl : moonIconUrl;
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps}>
+      <Rect
+        x={0}
+        y={0}
+        width={restrictedWidth}
+        height={restrictedHeight}
+        cornerRadius={50}
+        stroke="black"
+        strokeWidth={2}
+        fill={isOn ? 'white' : 'gray'}
+      />
+      <Circle
+        x={circleX}
+        y={restrictedHeight / 2}
+        radius={restrictedHeight / 2}
+        stroke="black"
+        strokeWidth={2}
+        fill={isOn ? 'white' : 'gray'}
+      />
+      <Image
+        image={toggleIcon}
+        x={circleX - iconSize / 2}
+        y={restrictedHeight / 2 - iconSize / 2}
+        width={iconSize}
+        height={iconSize}
+      />
+    </Group>
+  );
+});

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

@@ -15,6 +15,7 @@ export type ShapeType =
   | 'checkbox'
   | 'textarea'
   | 'toggleswitch'
+  | 'toggleLightDark'
   | 'progressbar'
   | 'listbox'
   | 'datepickerinput'
@@ -81,6 +82,7 @@ export const ShapeDisplayName: Record<ShapeType, string> = {
   checkbox: 'Checkbox',
   textarea: 'Textarea',
   toggleswitch: 'Toggle Switch',
+  toggleLightDark: 'Toggle Light/Dark',
   progressbar: 'Progress Bar',
   listbox: 'List Box',
   datepickerinput: 'Date Picker Input',

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

@@ -195,6 +195,7 @@ export const generateDefaultOtherProps = (
         textColor: '#000000',
       };
     case 'toggleswitch':
+    case 'toggleLightDark':
       return {
         checked: true,
       };

src/core/model/index.ts

@@ -57,6 +57,7 @@ import {
   getPieChartShapeSizeRestrictions,
   getTableSizeRestrictions,
   getTabsBarShapeSizeRestrictions,
+  getToggleLightDarkShapeSizeRestrictions,
   getVerticalMenuShapeSizeRestrictions,
   getVideoPlayerShapeSizeRestrictions,
   getVideoconferenceShapeSizeRestrictions,
@@ -90,6 +91,7 @@ const shapeSizeMap: Record<ShapeType, () => ShapeSizeRestrictions> = {
   combobox: getComboBoxShapeSizeRestrictions,
   input: getInputShapeSizeRestrictions,
   toggleswitch: getToggleSwitchShapeSizeRestrictions,
+  toggleLightDark: getToggleLightDarkShapeSizeRestrictions,
   textarea: getTextAreaSizeRestrictions,
   datepickerinput: getDatepickerInputShapeSizeRestrictions,
   button: getButtonShapeSizeRestrictions,

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

@@ -50,6 +50,7 @@ export const generateTypeOfTransformer = (shapeType: ShapeType): string[] => {
     case 'listbox':
     case 'checkbox':
     case 'toggleswitch':
+    case 'toggleLightDark':
     case 'progressbar':
     case 'timepickerinput':
     case 'radiobutton':

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

@@ -41,6 +41,7 @@ import {
   renderModal,
   renderButtonBar,
   renderTabsBar,
+  renderToggleLightDark,
   renderVideoconference,
 } from './simple-rich-components';
 import {
@@ -87,6 +88,8 @@ export const renderShapeComponent = (
       return renderTextArea(shape, shapeRenderedProps);
     case 'toggleswitch':
       return renderToggleSwitch(shape, shapeRenderedProps);
+    case 'toggleLightDark':
+      return renderToggleLightDark(shape, shapeRenderedProps);
     case 'progressbar':
       return renderProgressbar(shape, shapeRenderedProps);
     case 'listbox':

src/pods/canvas/model/transformer.model.ts

@@ -9,6 +9,7 @@ export * from './line-chart.renderer';
 export * from './vertical-menu.renderer';
 export * from './calendar.renderer';
 export * from './table.renderer';
+export * from './togglelightdark.renderer';
 export * from './modal.renderer';
 export * from './appBar.renderer';
 export * from './button-bar.renderer';