@lumx/react 3.1.0 → 3.1.2

package/dist/src/components/date-picker/DatePickerField.test.tsx

@@ -1,47 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { Wrapper } from '@lumx/react/testing/utils';
-
-import { DatePickerField, DatePickerFieldProps } from './DatePickerField';
-
-const mockedDate = new Date(
-    new Date(1487721600).toLocaleString('en-US', {
-        timeZone: 'America/Toronto',
-    }),
-);
-Date.now = jest.fn(() => mockedDate.valueOf());
-
-type SetupProps = Partial<DatePickerFieldProps>;
-
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: DatePickerFieldProps = {
-        label: 'DatePickerField',
-        locale: 'fr',
-        onChange: jest.fn(),
-        value: mockedDate,
-        nextButtonProps: { label: 'Next month' },
-        previousButtonProps: { label: 'Previous month' },
-        ...propsOverride,
-    };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<DatePickerField {...props} />);
-
-    return { props, wrapper };
-};
-
-describe(`<${DatePickerField.displayName}>`, () => {
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-        });
-
-        it('should render correctly when passed a date object', () => {
-            const { wrapper } = setup({ value: new Date('January 18, 1970') });
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-});

package/dist/src/components/date-picker/DatePickerField.tsx

@@ -1,141 +0,0 @@
-import { DatePicker, Placement, Popover, TextField, IconButtonProps } from '@lumx/react';
-import { useFocusTrap } from '@lumx/react/hooks/useFocusTrap';
-
-import moment from 'moment';
-
-import React, { forwardRef, SyntheticEvent, useCallback, useRef, useState } from 'react';
-
-import { useFocus } from '@lumx/react/hooks/useFocus';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-
-/**
- * Defines the props of the component.
- */
-export interface DatePickerFieldProps extends GenericProps {
-    /** Default month. */
-    defaultMonth?: Date;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Locale (language or region) to use. */
-    locale: string;
-    /** Date after which dates can't be selected. */
-    maxDate?: Date;
-    /** Date before which dates can't be selected. */
-    minDate?: Date;
-    /** Native input name property. */
-    name?: string;
-    /** Props to pass to the next month button (minus those already set by the DatePickerControlled props). */
-    nextButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
-    /** Props to pass to the previous month button (minus those already set by the DatePickerControlled props). */
-    previousButtonProps: Pick<IconButtonProps, 'label'> &
-        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis'>;
-    /** Currently selected date. */
-    value: Date | undefined;
-    /** On change callback. */
-    onChange(value: Date | undefined, name?: string, event?: SyntheticEvent): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'DatePickerField';
-
-/**
- * DatePickerField component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const DatePickerField: Comp<DatePickerFieldProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const {
-        defaultMonth,
-        disabled,
-        isDisabled = disabled,
-        locale,
-        maxDate,
-        minDate,
-        name,
-        nextButtonProps,
-        onChange,
-        previousButtonProps,
-        value,
-        ...forwardedProps
-    } = props;
-    const [wrapperElement, setWrapperElement] = useState<HTMLDivElement | null>(null);
-    const anchorRef = useRef(null);
-
-    const [isOpen, setIsOpen] = useState(false);
-
-    const toggleSimpleMenu = () => {
-        setIsOpen(!isOpen);
-    };
-
-    const onClose = useCallback(() => {
-        setIsOpen(false);
-    }, []);
-
-    useFocus(anchorRef.current, isOpen);
-    const handleKeyboardNav = (evt: React.KeyboardEvent) => {
-        if ((evt.key === 'Enter' || evt.key === ' ') && toggleSimpleMenu) {
-            toggleSimpleMenu();
-        }
-    };
-
-    // Handle focus trap.
-    const [todayOrSelectedDate, setTodayOrSelectedDate] = useState<HTMLButtonElement | null>(null);
-    useFocusTrap(isOpen && wrapperElement, todayOrSelectedDate);
-
-    const onTextFieldChange = (textFieldValue: string, textFieldName?: string, event?: SyntheticEvent) => {
-        if (!textFieldValue) {
-            onChange(undefined, textFieldName, event);
-        }
-    };
-
-    const onDatePickerChange = (newDate?: Date) => {
-        onChange(newDate, name);
-        onClose();
-    };
-
-    return (
-        <>
-            <TextField
-                ref={ref}
-                {...forwardedProps}
-                name={name}
-                forceFocusStyle={isOpen}
-                textFieldRef={anchorRef}
-                value={value ? moment(value).locale(locale).format('LL') : ''}
-                onClick={toggleSimpleMenu}
-                onChange={onTextFieldChange}
-                onKeyPress={handleKeyboardNav}
-                isDisabled={isDisabled}
-                readOnly
-            />
-            {isOpen ? (
-                <Popover
-                    anchorRef={anchorRef}
-                    placement={Placement.BOTTOM_START}
-                    isOpen={isOpen}
-                    onClose={onClose}
-                    closeOnClickAway
-                    closeOnEscape
-                >
-                    <DatePicker
-                        ref={setWrapperElement}
-                        locale={locale}
-                        maxDate={maxDate}
-                        minDate={minDate}
-                        value={value}
-                        onChange={onDatePickerChange}
-                        todayOrSelectedDateRef={setTodayOrSelectedDate}
-                        defaultMonth={defaultMonth}
-                        nextButtonProps={nextButtonProps}
-                        previousButtonProps={previousButtonProps}
-                    />
-                </Popover>
-            ) : null}
-        </>
-    );
-});
-DatePickerField.displayName = COMPONENT_NAME;

package/dist/src/components/date-picker/__snapshots__/DatePicker.test.tsx.snap

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<DatePicker> Snapshots and structure should render correctly 1`] = `
-<DatePickerControlled
-  locale="fr"
-  nextButtonProps={
-    {
-      "label": "Next month",
-    }
-  }
-  onChange={[Function]}
-  onNextMonthChange={[Function]}
-  onPrevMonthChange={[Function]}
-  previousButtonProps={
-    {
-      "label": "Previous month",
-    }
-  }
-  selectedMonth={1970-01-17T23:15:21.000Z}
-  value={1970-01-17T23:15:21.000Z}
-/>
-`;