npm - @talxis/base-controls - Versions diffs - 1.2406.2 → 1.2406.4 - Mend

@talxis/base-controls 1.2406.2 → 1.2406.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (214) hide show

package/examples/TwoOptions/package.json DELETED Viewed

@@ -1,29 +0,0 @@
-{
-  "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 DELETED Viewed

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

package/examples/TwoOptions/tsconfig.json DELETED Viewed

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

package/public/index.html DELETED Viewed

@@ -1,43 +0,0 @@
-<!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 DELETED Viewed

@@ -1,25 +0,0 @@
-{
-  "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 DELETED Viewed

@@ -1,44 +0,0 @@
-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 DELETED Viewed

@@ -1,97 +0,0 @@
-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 DELETED Viewed

@@ -1,80 +0,0 @@
-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 DELETED Viewed

@@ -1,144 +0,0 @@
-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 DELETED Viewed

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

package/src/components/DateTime/interfaces.ts DELETED Viewed

@@ -1,22 +0,0 @@
-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 DELETED Viewed

@@ -1,37 +0,0 @@
-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 DELETED Viewed

@@ -1,18 +0,0 @@
-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,
-    };
-};