Merge pull request #478 from Lemoncode/feature/#413-Time-Picker-does-…

…not-accept-inline-editing

Feature/#413 time picker does not accept inline editing

src/common/components/mock-components/front-components/datepickerinput-shape.tsx

@@ -111,6 +111,16 @@ export const DatepickerInputShape = forwardRef<any, ShapeProps>(
           ellipsis={true}
           wrap="none"
         />
+
+        <Text
+          text="Date"
+          x={13}
+          y={20}
+          fontSize={10}
+          fill="red"
+          align="center"
+          color={stroke}
+        />
         {/* Calendar Icon */}
         <Image
           image={calendarIcon}

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

@@ -7,7 +7,7 @@ export * from './progressbar-shape';
 export * from './listbox';
 export * from './datepickerinput-shape';
 export * from './button-shape';
-export * from './timepickerinput-shape';
+export * from './timepickerinput/timepickerinput-shape';
 export * from './radiobutton-shape';
 export * from './icon';
 export * from './verticalscrollbar-shape';

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

@@ -0,0 +1 @@
+export * from './timepickerinput-shape.tsx';

src/common/components/mock-components/front-components/timepickerinput/timepickerinput-shape.business.ts

@@ -0,0 +1,33 @@
+const MAX_DIGITS = 2;
+const MAX_HOURS = '23';
+const MAX_MINUTES = '59';
+const HOUR_MASK = 'hh';
+const MINUTES_MASK = 'mm';
+
+export const splitCSVContent = (csvContent: string): string[] => {
+  const splitedCsvContent = csvContent
+    .trim()
+    .split(/[:|,]/)
+    .map(el => el.trim());
+  return splitedCsvContent;
+};
+
+export const setTime = (csvData: string[]) => {
+  let [hour, minutes] = csvData;
+  if (csvData.length < 2) {
+    return true;
+  }
+  if (csvData[0] !== HOUR_MASK || csvData[1] !== MINUTES_MASK) {
+    if (
+      csvData.length > MAX_DIGITS ||
+      hour.length !== MAX_DIGITS ||
+      hour === '' ||
+      hour > MAX_HOURS ||
+      minutes.length !== MAX_DIGITS ||
+      minutes === '' ||
+      minutes > MAX_MINUTES
+    ) {
+      return true;
+    }
+  }
+};

src/common/components/mock-components/front-components/timepickerinput/timepickerinput-shape.tsx

@@ -0,0 +1,148 @@
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+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 { BASIC_SHAPE } from '../shape.const';
+import { useShapeProps } from '../../../shapes/use-shape-props.hook';
+import { useGroupShapeProps } from '../../mock-components.utils';
+import { splitCSVContent, setTime } from './timepickerinput-shape.business';
+
+import clockIconSrc from '/icons/clock.svg';
+
+const timepickerInputShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 100,
+  minHeight: 50,
+  maxWidth: -1,
+  maxHeight: 50,
+  defaultWidth: 220,
+  defaultHeight: 50,
+};
+
+const shapeType: ShapeType = 'timepickerinput';
+
+export const getTimepickerInputShapeSizeRestrictions =
+  (): ShapeSizeRestrictions => timepickerInputShapeRestrictions;
+
+export const TimepickerInputShape = forwardRef<any, ShapeProps>(
+  (props, ref) => {
+    const {
+      x,
+      y,
+      width,
+      height,
+      id,
+      text,
+      onSelected,
+      otherProps,
+      ...shapeProps
+    } = props;
+
+    const restrictedSize = fitSizeToShapeSizeRestrictions(
+      timepickerInputShapeRestrictions,
+      width,
+      height
+    );
+    const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+    const { stroke, strokeStyle, fill, borderRadius } = useShapeProps(
+      otherProps,
+      BASIC_SHAPE
+    );
+
+    const commonGroupProps = useGroupShapeProps(
+      props,
+      restrictedSize,
+      shapeType,
+      ref
+    );
+
+    const csvData = splitCSVContent(text);
+    let isError = setTime(csvData);
+
+    const iconWidth = 25;
+    const availableWidth = restrictedWidth - iconWidth - 20;
+    const fontSize = Math.min(
+      availableWidth * 0.2,
+      restrictedHeight * 0.35,
+      20
+    );
+    const labelFontSize = Math.min(restrictedHeight * 0.3, 12);
+
+    const clockIcon = new window.Image();
+    clockIcon.src = clockIconSrc;
+
+    return (
+      <Group {...commonGroupProps} {...shapeProps}>
+        {/* External Rectangle */}
+        <Rect
+          x={0}
+          y={0}
+          width={restrictedWidth}
+          height={restrictedHeight}
+          cornerRadius={borderRadius}
+          stroke={stroke}
+          dash={strokeStyle}
+          strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
+          fill={fill}
+        />
+        {/* Background of Time Label */}
+        <Rect
+          x={10}
+          y={-5}
+          width={labelFontSize + 20}
+          height={labelFontSize}
+          cornerRadius={borderRadius}
+          strokeWidth={BASIC_SHAPE.DEFAULT_STROKE_WIDTH}
+          fill="white"
+        />
+        {/* Label "Time" */}
+        <Text
+          text="Time"
+          x={13}
+          y={-5}
+          fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
+          fontSize={BASIC_SHAPE.DEFAULT_FONT_SIZE - 4}
+          fill={stroke}
+          align="center"
+          color={stroke}
+        />
+        {/* Main Text */}
+        <Text
+          text={text}
+          x={10}
+          y={(restrictedHeight - fontSize) / 2 + 2}
+          width={availableWidth}
+          fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
+          fontSize={BASIC_SHAPE.DEFAULT_FONT_SIZE}
+          lineHeight={BASIC_SHAPE.DEFAULT_LINE_HEIGHT}
+          align="left"
+          ellipsis={true}
+          wrap="none"
+        />
+        {/* Error Text */}
+        {isError && (
+          <Text
+            text="Error, valid format hh:mm"
+            x={10}
+            y={35}
+            fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
+            fontSize={10}
+            fill="red"
+            align="center"
+            color={stroke}
+          />
+        )}
+
+        {/* Clock Icon */}
+        <Image
+          image={clockIcon}
+          x={restrictedWidth - iconWidth - 5}
+          y={(restrictedHeight - 20) / 2}
+          width={20}
+          height={20}
+        />
+      </Group>
+    );
+  }
+);

src/pods/canvas/model/inline-editable.model.ts

@@ -30,6 +30,7 @@ const inlineEditableShapes = new Set<ShapeType>([
   'buttonBar',
   'tabsBar',
   'tooltip',
+  'timepickerinput',
   'datepickerinput',
   'browser',
 ]);
@@ -66,6 +67,7 @@ const shapeTypesWithDefaultText = new Set<ShapeType>([
   'appBar',
   'buttonBar',
   'tabsBar',
+  'timepickerinput',
   'datepickerinput',
   'browser',
 ]);
@@ -99,6 +101,7 @@ const defaultTextValueMap: Partial<Record<ShapeType, string>> = {
   appBar: 'AppBar',
   buttonBar: 'Button 1, Button 2, Button 3',
   tabsBar: 'Tab 1, Tab 2, Tab 3',
+  timepickerinput: 'hh:mm',
   datepickerinput: new Date().toLocaleDateString(),
   browser: 'https://example.com',
 };

src/pods/canvas/shape-renderer/simple-component/timepickerinput.renderer.tsx

@@ -25,6 +25,8 @@ export const renderTimepickerinput = (
       onDragEnd={handleDragEnd(shape.id)}
       onTransform={handleTransform}
       onTransformEnd={handleTransform}
+      isEditable={shape.allowsInlineEdition}
+      text={shape.text}
       otherProps={shape.otherProps}
     />
   );

src/pods/properties/components/active-element-selector/active-element-selector.component.tsx

@@ -27,7 +27,7 @@ export const ActiveElementSelector: React.FC<Props> = ({
 
   // Checking whether the type is tabsBar and parsing the text
   const isElementTypeSupported =
-    type === 'tabsBar' || 'buttonBar' || 'horizontal-menu';
+    type === 'tabsBar' || 'buttonBar' || 'horizontal-menu' || 'timepickerinput';
   const elementNames =
     isElementTypeSupported && text ? extractElementNames(text) : [];