@talxis/base-controls 1.2406.2

package/examples/TwoOptions/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "pcf-project",
+  "version": "1.2406.2",
+  "description": "Project containing your PowerApps Component Framework (PCF) control.",
+  "scripts": {
+    "build": "pcf-scripts build",
+    "clean": "pcf-scripts clean",
+    "lint": "pcf-scripts lint",
+    "lint:fix": "pcf-scripts lint fix",
+    "rebuild": "pcf-scripts rebuild",
+    "start": "pcf-scripts start",
+    "start:watch": "pcf-scripts start watch",
+    "refreshTypes": "pcf-scripts refreshTypes"
+  },
+  "devDependencies": {
+    "@microsoft/eslint-plugin-power-apps": "^0.2.6",
+    "@types/node": "^18.8.2",
+    "@types/powerapps-component-framework": "^1.3.4",
+    "@typescript-eslint/eslint-plugin": "^5.39.0",
+    "@typescript-eslint/parser": "^5.39.0",
+    "eslint": "^8.24.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.0.1",
+    "pcf-scripts": "^1",
+    "pcf-start": "^1",
+    "typescript": "^4.9.5"
+  }
+}

package/examples/TwoOptions/pcfconfig.json

@@ -0,0 +1,3 @@
+{
+    "outDir": "./out/controls"
+}

package/examples/TwoOptions/tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "extends": "./node_modules/pcf-scripts/tsconfig_base.json",
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "typeRoots": ["node_modules/@types"]
+    }
+}

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@talxis/base-controls",
+  "version": "1.2406.2",
+  "description": "Set of React components that natively work with Power Apps Component Framework API's",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "license": "MIT",
+  "types": "dist/index.d.ts",
+  "devDependencies": {
+    "@babel/core": "^7.16.12",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/color": "^3.0.6",
+    "@types/jest": "^27.4.0",
+    "@types/lodash.clonedeep": "^4.5.7",
+    "@types/node": "^17.0.14",
+    "@types/numeral": "^2.0.5",
+    "@types/powerapps-component-framework": "^1.3.5",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
+    "babel-loader": "^8.2.3",
+    "esbuild": "^0.13.9",
+    "postcss": "^8.3.11",
+    "react-scripts": "5.0.0",
+    "rollup": "^2.58.1",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^4.0.0",
+    "rollup-plugin-esbuild": "^4.6.0",
+    "rollup-plugin-multi-input": "^1.3.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^4.5.2",
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.68.0",
+    "@types/validator": "^13.11.9"
+  },
+  "peerDependencies": {
+    "@fluentui/react": "8.51.0 || 8.29.0",
+    "@talxis/client-libraries": "^1.2402.3",
+    "color": "^4.2.3",
+    "dayjs": "^1.11.10",
+    "external-svg-loader": "^1.7.1",
+    "fast-deep-equal": "^3.1.3",
+    "humanize-duration": "^3.32.0",
+    "liquidjs": "^9.43.0",
+    "lodash.clonedeep": "^4.5.0",
+    "merge-anything": "^5.1.7",
+    "numeral": "^2.0.6",
+    "react": "^16.8.6 || ^17.0.2",
+    "react-dom": "^16.8.6 || ^17.0.2",
+    "use-debounce": "^10.0.1",
+    "validator": "^13.11.9",
+    "@talxis/react-components": "^1.2404.1"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "documentation": "start-storybook -p 6006",
+    "sandbox": "react-scripts start",
+    "build-documentation": "build-storybook",
+    "lint": "eslint \"./src/**\"",
+    "lint:fix": "eslint \"./src/**\" --fix"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@ag-grid-community/client-side-row-model": "^31.3.2",
+    "@ag-grid-community/core": "^31.3.2",
+    "@ag-grid-community/react": "^31.3.2",
+    "@ag-grid-community/styles": "^31.3.2"
+  }
+}

package/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/rollup.config.js

@@ -0,0 +1,44 @@
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import { terser } from 'rollup-plugin-terser';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+import dts from 'rollup-plugin-dts';
+import resolve from '@rollup/plugin-node-resolve';
+import multiInput from 'rollup-plugin-multi-input';
+import del from 'rollup-plugin-delete';
+
+export default [
+    {
+        input: [
+            'src/components/*/*.tsx',
+            'src/hooks/*.ts'
+        ],
+        output: [
+            {
+                dir: 'dist',
+                format: 'esm',
+            }
+        ],
+        plugins: [
+            commonjs(),
+            peerDepsExternal('./package.json'),
+            resolve(),
+            typescript({
+                tsconfig: './tsconfig.json',
+            }),
+            postcss(),
+            multiInput(),
+            terser()
+        ],
+    },
+    {
+        input: ['dist/index.d.ts'],
+        output: [{ file: 'dist/index.d.ts', format: "esm"}],
+        external: [/\.css$/],
+        plugins: [
+            dts(),
+            del({ hook: "buildEnd", targets: ['dist/stories', 'dist/sandbox'] })
+        ],
+    },
+];

package/src/components/DateTime/DateTime.tsx

@@ -0,0 +1,97 @@
+
+import { IDateTime } from "./interfaces";
+import { IDatePicker, useTheme } from "@fluentui/react";
+import { useEffect, useRef } from "react";
+import { getDateTimeStyles } from "./styles";
+import { useDateTime } from "./hooks/useDateTime";
+import dayjs from 'dayjs';
+import { Calendar } from "./components/Calendar";
+import { DatePicker } from "@talxis/react-components/dist/components/DatePicker";
+import React from 'react';
+
+export const DateTime = (componentProps: IDateTime) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const datePickerRef = useRef<IDatePicker>(null);
+    const theme = useTheme();
+    const styles = getDateTimeStyles(theme);
+    const context = componentProps.context;
+    const parameters = componentProps.parameters;
+    const [date, stringDate, isDateTime, patterns, labels, setStringDate, selectDate, clearDate] = useDateTime(componentProps, ref);
+
+    useEffect(() => {
+        if(componentProps.parameters.AutoFocus?.raw === true) {
+            datePickerRef.current?.showDatePickerPopup();
+        }
+    }, []);
+    return (
+        <div ref={ref}>
+            <DatePicker
+                className={styles.datePicker}
+                componentRef={datePickerRef}
+                keepCalendarOpenAfterDaySelect={isDateTime}
+                allowTextInput
+                calendarProps={{
+                    //needs to be here as the internal picker does not call the function passed in calendarAs
+                    onSelectDate: (date) => selectDate(date),
+                }}
+                // Lowest date supported by CDS: https://learn.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide/dn996866(v=crm.8)?redirectedfrom=MSDN
+                minDate={new Date('1753-01-01T00:00:00.000Z')}
+                firstDayOfWeek={componentProps.context.userSettings.dateFormattingInfo.firstDayOfWeek}
+                calendarAs={(props) =>
+                    <Calendar {...props}
+                        strings={{
+                            goToToday: labels.goToToday(),
+                            days: JSON.parse(labels.days()),
+                            months: JSON.parse(labels.months()),
+                            shortDays: JSON.parse(labels.shortDays()),
+                            shortMonths: JSON.parse(labels.shortMonths())
+                        }}
+                        timePickerProps={{
+                            autoComplete: "off",
+                            autoCapitalize: "off",
+                            timeFormat: patterns.shortTimePattern,
+                            label: labels.time(),
+                            visible: isDateTime && !parameters.value.errorMessage,
+                            useHour12: patterns.shortTimePattern.endsWith('A'),
+                            onChange: (e, date) => selectDate(undefined, dayjs(date).format('HH:mm')),
+                            defaultValue: date
+                        }} />
+                }
+                textField={{
+                    value: stringDate ?? "",
+                    onChange: (e, value) => setStringDate(value),
+                    placeholder: '---',
+                    onNotifyValidationResult: () => null,
+                    noValidate: true,
+                    borderless: parameters.EnableBorder?.raw === false,
+                    errorMessage: parameters.value.errorMessage,
+                    styles:{
+                        fieldGroup: {
+                            height: context.mode.allocatedHeight || undefined,
+                            width: context.mode.allocatedWidth || undefined
+                        }
+                    },
+                    //@ts-ignore - TODO: fix types in shared components
+                    deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {
+                        key: 'Delete',
+                        onClick: clearDate,
+                        showOnlyOnHover: true,
+                        iconProps: {
+                            iconName: 'Cancel'
+                        }
+                    } : undefined,
+                    clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {
+                        key: 'copy',
+                        showOnlyOnHover: true,
+                        iconProps: {
+                            iconName: 'Copy'
+                        }
+                    } : undefined
+                }
+                }
+                //undefined will break the calendar => it wont reflect date change in it's UI
+                value={date ?? new Date()}
+            />
+        </div>
+    );
+};

package/src/components/DateTime/components/Calendar.tsx

@@ -0,0 +1,80 @@
+import { ICalendarProps } from "@fluentui/react/lib/components/Calendar/Calendar.types";
+import { IAutofill } from "@fluentui/react/lib/components/pickers/AutoFill/BaseAutoFill.types";
+import { ITimePickerProps } from "@fluentui/react/lib/components/TimePicker/TimePicker.types";
+import { useTheme } from "@fluentui/react/lib/utilities/ThemeProvider/useTheme";
+import { Calendar as CalendarBase } from '@fluentui/react/lib/Calendar';
+import { useEffect, useRef, useState } from "react";
+import { getDateTimeStyles } from "../styles";
+import { TimePicker } from "@talxis/react-components/dist/components/TimePicker";
+import { Text } from '@fluentui/react/lib/Text';
+import dayjs from "dayjs";
+import React from 'react';
+import { FocusTrapZone } from "@fluentui/react";
+
+interface IInternalTimePickerProps extends ITimePickerProps {
+    visible: boolean;
+    timeFormat: string;
+}
+
+interface IInternalCalendarProps extends ICalendarProps {
+    timePickerProps: IInternalTimePickerProps;
+}
+
+export const Calendar = (props: IInternalCalendarProps) => {
+    const theme = useTheme();
+    const styles = getDateTimeStyles(theme);
+    const timePickerRef = useRef<IAutofill>(null);
+    const [isTimePickerControlled, setIsTimePickerControlled] = useState<boolean>(true);
+    useEffect(() => {
+        //@ts-ignore - we need to use the internal method to display exact time, otherwise the shown value would always get rounded to the next 15 min
+        timePickerRef.current?._updateValue(getFormattedTime());
+        setIsTimePickerControlled(false);
+
+    }, [props.timePickerProps.defaultValue]);
+
+    const getFormattedTime = () => {
+        return dayjs(props.timePickerProps.defaultValue).format(props.timePickerProps.timeFormat);
+    };
+
+    useEffect(() => {
+        //hack to focus the selected date for keyboard support
+        const day = document.querySelector('.ms-CalendarDay-daySelected') as HTMLButtonElement;
+        day?.focus();
+    }, [props]);
+
+    return (
+        <div className={styles.calendarCallout}>
+            <CalendarBase {...props} />
+            <hr />
+            {props.timePickerProps.visible &&
+                <TimePicker
+                    {...props.timePickerProps}
+                    onChange={(e, time) => {
+                        setIsTimePickerControlled(true);
+                        props.timePickerProps.onChange!(e, time);
+                    }}
+                    defaultValue={dayjs(new Date()).startOf('day').toDate()}
+                    useComboBoxAsMenuWidth
+                    styles={{
+                        callout: {
+                            maxHeight: '300px !important'
+                        }
+                    }}
+                    autofill={{
+                        componentRef: timePickerRef,
+                        //hack to prevent blinking on prop updates
+                        value: isTimePickerControlled ? getFormattedTime() : undefined
+                    }}
+                    buttonIconProps={{
+                        iconName: 'Clock'
+                    }}
+                    onRenderOption={(option) => {
+                        //the timepicker displays 24 instead of 00 during the option displaying for some reason
+                        return <Text>{option?.text.replace('24', '00')}</Text>;
+                    }}
+                    increments={15}
+                    allowFreeform />
+            }
+        </div>
+    );
+};

package/src/components/DateTime/hooks/useDateTime.ts

@@ -0,0 +1,144 @@
+import { useEffect, useMemo } from "react";
+import { useInputBasedComponent } from "../../../hooks/useInputBasedComponent";
+import { IDateTime, IDateTimeOutputs, IDateTimeParameters, IDateTimeTranslations } from "../interfaces";
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { getDefaultDateTimeTranslations } from "../translations";
+import { StringProps } from "../../../types";
+dayjs.extend(customParseFormat);
+dayjs.extend(utc);
+
+export const useDateTime = (props: IDateTime, ref: React.RefObject<HTMLDivElement>): [
+    Date | undefined,
+    string | undefined,
+    boolean,
+    {
+        shortDatePattern: string
+        shortTimePattern: string;
+    },
+    Required<StringProps<IDateTimeTranslations>>,
+    (value: string | undefined) => void,
+    (date: Date | undefined, time?: string) => void,
+    () => void
+
+] => {
+
+    const boundValue = props.parameters.value;
+    const context = props.context;
+    const behavior = boundValue.attributes.Behavior;
+    const format = boundValue.attributes.Format;
+    const dateFormattingInfo = context.userSettings.dateFormattingInfo;
+    
+    const isDateTime = (() => {
+        switch (format) {
+            case 'DateAndTime':
+            case 'Date and Time':
+            case 'DateAndTime.DateAndTime':
+            case 'datetime': {
+                return true;
+            }
+            default: {
+                return false;
+            }
+        }
+    })();
+
+    //MS returns the pattern without correct separator and they do this during formatting
+    const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\//g, dateFormattingInfo.dateSeparator).toUpperCase();
+    const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');
+    const formatting = (() => {
+        if (isDateTime) {
+            return `${shortDatePattern} ${shortTimePattern}`;
+        }
+        return shortDatePattern;
+    })();
+
+    const formatDate = (date: Date | undefined | null | string): string | undefined => {
+        if (date == undefined) {
+            return undefined;
+        }
+        if (typeof date === 'string') {
+            const dayjsDate = dayjs(date, formatting);
+            //error situation
+            if (!dayjsDate.isValid()) {
+                return date;
+            }
+            date = dayjsDate.toDate();
+        }
+        if (isDateTime) {
+            //should handle the time zone conversion
+            return context.formatting.formatTime(date, behavior);
+        }
+        return context.formatting.formatDateShort(date);
+    };
+
+    const [dateStringValue, labels, setDateStringValue, notifyOutputChanged] = useInputBasedComponent<string | undefined, IDateTimeParameters, IDateTimeOutputs, IDateTimeTranslations>('DateTime', props, {
+        formatter: formatDate,
+        defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)
+    });
+
+    useEffect(() => {
+        const onBlur = () => {
+            if (formatDate(boundValue.raw) === dateStringValue) {
+                return;
+            }
+            notifyOutputChanged({
+                value: dateExtractor(dateStringValue!) as any
+            });
+        };
+        const input = ref.current?.querySelector('input');
+        input?.addEventListener('blur', onBlur);
+        return () => {
+            input?.removeEventListener('blur', onBlur);
+        };
+    }, [dateStringValue]);
+
+    const getDate = (): Date | undefined => {
+        if (boundValue.raw instanceof Date) {
+            if (behavior === 3) {
+                //the date in javascript gets automatically adjusted to local time zone
+                //this will make it think that the date already came in local time, thus not adjusting the time
+                const date = new Date(boundValue.raw.toISOString().replace('Z', ''));
+                return date;
+            }
+            return boundValue.raw;
+        }
+        //this scenario should only happen in cases of error or null value
+        return undefined;
+    };
+
+    const dateExtractor = (value: string | Date): Date | string => {
+        if (value instanceof Date) {
+            return value;
+        }
+        const dayjsDate = dayjs(value, formatting);
+        if (!dayjsDate.isValid()) {
+            return value;
+        }
+        return dayjsDate.toDate();
+    };
+
+    const clearDate = () => {
+        notifyOutputChanged({
+            value: undefined
+        });
+    };
+
+    const selectDate = (date?: Date, time?: string) => {
+        let dayjsDate = dayjs(date ?? getDate());
+        let _time = time;
+        //date selected from calendar, keep the original time
+        if (!_time) {
+            _time = dayjs(getDate()).format('HH:mm');
+        }
+        const [hours, minutes] = _time.split(':');
+        dayjsDate = dayjsDate.hour(parseInt(hours));
+        dayjsDate = dayjsDate.minute(parseInt(minutes));
+        notifyOutputChanged({
+            value: dayjsDate.toDate()
+        });
+    };
+
+    return [getDate(), dateStringValue, isDateTime, { shortDatePattern, shortTimePattern }, labels, setDateStringValue, selectDate, clearDate];
+};

package/src/components/DateTime/index.ts

@@ -0,0 +1,2 @@
+export * from './DateTime';
+export * from './interfaces';

package/src/components/DateTime/interfaces.ts

@@ -0,0 +1,22 @@
+import { IDateTimeProperty } from "../../interfaces";
+import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
+import { IBaseParameters, IInputParameters } from "../../interfaces/parameters";
+
+export interface IDateTime extends IComponent<IDateTimeParameters, IDateTimeOutputs, IDateTimeTranslations> {
+}
+
+export interface IDateTimeParameters extends IInputParameters {
+    value: IDateTimeProperty;
+}
+
+export interface IDateTimeOutputs extends IOutputs {
+    value?: Date;
+}
+export interface IDateTimeTranslations extends ITranslations {
+    time?: {[LCID: number]: string}
+    goToToday?: {[LCID: number]: string}
+    days?: {[LCID: number]: string[]} | string[];
+    months?: {[LCID: number]: string[]} | string[];
+    shortDays?: {[LCID: number]: string[]} | string[];
+    shortMonths?: {[LCID: number]: string[]} | string[];
+}

package/src/components/DateTime/styles.ts

@@ -0,0 +1,37 @@
+import { ITheme, mergeStyleSets } from "@fluentui/react";
+
+export const getDateTimeStyles = (theme: ITheme) => {
+    return mergeStyleSets({
+        datePicker: {
+            '[class^="statusMessage"]': {
+                display: 'none'
+            }
+        },
+        calendarCallout: {
+            '.TALXIS__timepicker__root': {
+                padding: 12,
+                'label': {
+                    paddingTop: 0
+                },
+                'i': {
+                    fontSize: 16
+                }
+            },
+            'hr': {
+                margin: 0,
+                border: 'none',
+                height: 1,
+                backgroundColor: theme.semanticColors.bodyDivider
+            },
+            '[class^="monthAndYear"], [class*="weekDayLabelCell"]': {
+                animationDuration: '0s'
+            },
+            '[class^="dayCell"]:focus': {
+               outline: `solid 1px !important`
+            },
+            '.ms-DatePicker': {
+                animationDuration: '0s'
+            }
+        }
+    });
+};

package/src/components/DateTime/translations.ts

@@ -0,0 +1,18 @@
+import { IDateTimeTranslations } from "./interfaces";
+
+export const getDefaultDateTimeTranslations = (dateFormattingInfo: ComponentFramework.UserSettingApi.DateFormattingInfo): Required<IDateTimeTranslations> => {
+    return {
+        time: {
+            1029: 'Čas',
+            1033: 'Time'
+        },
+        goToToday: {
+            1029: 'Přejít na dnešek',
+            1033: 'Go to today'
+        },
+        days: dateFormattingInfo.dayNames,
+        months: dateFormattingInfo.monthNames,
+        shortDays: dateFormattingInfo.shortestDayNames,
+        shortMonths: dateFormattingInfo.abbreviatedMonthNames,
+    };
+};