@map-colonies/react-components 3.12.2 → 3.13.0

package/src/lib/date-picker/date-picker.tsx

@@ -1,90 +1,90 @@
-import React, { useState } from 'react';
-import { he, enUS } from 'date-fns/locale';
-import {
-  MuiPickersUtilsProvider,
-  KeyboardDateTimePicker,
-  KeyboardDatePicker,
-  KeyboardDatePickerProps,
-} from '@material-ui/pickers';
-import { ParsableDate } from '@material-ui/pickers/constants/prop-types';
-import { WrapperVariant } from '@material-ui/pickers/wrappers/Wrapper';
-import DateFnsUtils from '@date-io/date-fns';
-import { ThemeProvider } from '@material-ui/core';
-
-import { useTheme } from '@map-colonies/react-core';
-import { SupportedLocales } from '../models/enums';
-import DEFAULTS from '../models/defaults';
-import { useMappedMuiTheme } from '../theme';
-
-import '@map-colonies/react-core/dist/button/styles';
-import './date-picker.css';
-
-interface DatePickerProps extends KeyboardDatePickerProps {
-  local?: {
-    placeHolderText?: string;
-    calendarLocale?: SupportedLocales;
-  };
-  showTime?: boolean;
-}
-
-export const DateTimePicker: React.FC<DatePickerProps> = (props) => {
-  const theme: { [key: string]: string } = useTheme();
-  const themeMui = useMappedMuiTheme(theme);
-
-  const [value, setValue] = useState<ParsableDate>(props.value);
-
-  const {
-    format = DEFAULTS.DATE_PICKER.dateFormat,
-    variant = DEFAULTS.DATE_PICKER.variant,
-    disableFuture = DEFAULTS.DATE_PICKER.disableFuture,
-    local,
-    onChange,
-    showTime = DEFAULTS.DATE_PICKER.showTime,
-    value: propValue,
-    ...resProps
-  } = props;
-
-  const {
-    placeHolderText = DEFAULTS.DATE_PICKER.local.placeHolderText,
-    calendarLocale,
-  } = local ?? {
-    placeHolderText: DEFAULTS.DATE_PICKER.local.placeHolderText,
-    calendarLocale: SupportedLocales.EN,
-  };
-
-  const locale = calendarLocale === SupportedLocales.HE ? he : enUS;
-
-  const handleOnChange = (e: any): void => {
-    setValue(e);
-    onChange(e as Date);
-  };
-
-  return (
-    <ThemeProvider theme={themeMui}>
-      <MuiPickersUtilsProvider utils={DateFnsUtils} locale={locale}>
-        {showTime && (
-          <KeyboardDateTimePicker
-            variant={variant as WrapperVariant}
-            placeholder={placeHolderText}
-            onChange={handleOnChange}
-            value={value}
-            disableFuture={disableFuture}
-            format={format}
-            {...resProps}
-          />
-        )}
-        {!showTime && (
-          <KeyboardDatePicker
-            variant={variant as WrapperVariant}
-            placeholder={placeHolderText}
-            onChange={handleOnChange}
-            value={value}
-            disableFuture={disableFuture}
-            format={format}
-            {...resProps}
-          />
-        )}
-      </MuiPickersUtilsProvider>
-    </ThemeProvider>
-  );
-};
+import React, { useState } from 'react';
+import { he, enUS } from 'date-fns/locale';
+import {
+  MuiPickersUtilsProvider,
+  KeyboardDateTimePicker,
+  KeyboardDatePicker,
+  KeyboardDatePickerProps,
+} from '@material-ui/pickers';
+import { ParsableDate } from '@material-ui/pickers/constants/prop-types';
+import { WrapperVariant } from '@material-ui/pickers/wrappers/Wrapper';
+import DateFnsUtils from '@date-io/date-fns';
+import { ThemeProvider } from '@material-ui/core';
+
+import { useTheme } from '@map-colonies/react-core';
+import { SupportedLocales } from '../models/enums';
+import DEFAULTS from '../models/defaults';
+import { useMappedMuiTheme } from '../theme';
+
+import '@map-colonies/react-core/dist/button/styles';
+import './date-picker.css';
+
+interface DatePickerProps extends KeyboardDatePickerProps {
+  local?: {
+    placeHolderText?: string;
+    calendarLocale?: SupportedLocales;
+  };
+  showTime?: boolean;
+}
+
+export const DateTimePicker: React.FC<DatePickerProps> = (props) => {
+  const theme: { [key: string]: string } = useTheme();
+  const themeMui = useMappedMuiTheme(theme);
+
+  const [value, setValue] = useState<ParsableDate>(props.value);
+
+  const {
+    format = DEFAULTS.DATE_PICKER.dateFormat,
+    variant = DEFAULTS.DATE_PICKER.variant,
+    disableFuture = DEFAULTS.DATE_PICKER.disableFuture,
+    local,
+    onChange,
+    showTime = DEFAULTS.DATE_PICKER.showTime,
+    value: propValue,
+    ...resProps
+  } = props;
+
+  const {
+    placeHolderText = DEFAULTS.DATE_PICKER.local.placeHolderText,
+    calendarLocale,
+  } = local ?? {
+    placeHolderText: DEFAULTS.DATE_PICKER.local.placeHolderText,
+    calendarLocale: SupportedLocales.EN,
+  };
+
+  const locale = calendarLocale === SupportedLocales.HE ? he : enUS;
+
+  const handleOnChange = (e: any): void => {
+    setValue(e);
+    onChange(e as Date);
+  };
+
+  return (
+    <ThemeProvider theme={themeMui}>
+      <MuiPickersUtilsProvider utils={DateFnsUtils} locale={locale}>
+        {showTime && (
+          <KeyboardDateTimePicker
+            variant={variant as WrapperVariant}
+            placeholder={placeHolderText}
+            onChange={handleOnChange}
+            value={value}
+            disableFuture={disableFuture}
+            format={format}
+            {...resProps}
+          />
+        )}
+        {!showTime && (
+          <KeyboardDatePicker
+            variant={variant as WrapperVariant}
+            placeholder={placeHolderText}
+            onChange={handleOnChange}
+            value={value}
+            disableFuture={disableFuture}
+            format={format}
+            {...resProps}
+          />
+        )}
+      </MuiPickersUtilsProvider>
+    </ThemeProvider>
+  );
+};

package/src/lib/date-picker/index.ts

@@ -1 +1 @@
-export * from './date-picker';
+export * from './date-picker';

package/src/lib/date-range-picker/date-range-picker.css

@@ -1,9 +1,9 @@
-body[dir='rtl'] .drpContainer .MuiInputLabel-formControl {
-  right: 0px;
-  left: unset;
-}
-
-body[dir='rtl'] .drpContainer .MuiInputBase-input {
-  direction: ltr;
-  text-align: end;
-}
+body[dir='rtl'] .drpContainer .MuiInputLabel-formControl {
+  right: 0px;
+  left: unset;
+}
+
+body[dir='rtl'] .drpContainer .MuiInputBase-input {
+  direction: ltr;
+  text-align: end;
+}

package/src/lib/date-range-picker/date-range-picker.form-control.css

@@ -1,3 +1,3 @@
-body[dir='rtl'] .drpOpener .mdc-text-field {
-  direction: ltr;
-}
+body[dir='rtl'] .drpOpener .mdc-text-field {
+  direction: ltr;
+}

package/src/lib/date-range-picker/date-range-picker.form-control.spec.tsx

@@ -1,58 +1,58 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { KeyboardDateTimePicker } from '@material-ui/pickers';
-import { Button } from '@map-colonies/react-core';
-import { DateTimeRangePickerFormControl } from './date-range-picker.form-control';
-
-const date = new Date(1990, 1, 1);
-
-it('set the values of to and from to the props of the date pickers when changed', () => {
-  const wrapper = mount(
-    <DateTimeRangePickerFormControl
-      onChange={() => {
-        // do nothing for linitng
-      }}
-    />
-  );
-  wrapper.setProps({ from: date, to: date });
-  // eslint-disable-next-line
-  wrapper.find(Button).first().simulate('click', { currentTarget: {} });
-
-  wrapper.update();
-  const pickers = wrapper.find(KeyboardDateTimePicker);
-  const fromRangePicker = pickers.first();
-  const toRangePicker = pickers.at(1);
-
-  expect(fromRangePicker.prop('value')?.valueOf()).toBe(date.getTime());
-  expect(toRangePicker.prop('value')?.valueOf()).toBe(date.getTime());
-});
-
-it('calls on change with right argumnets when inner set button is clicked', () => {
-  const onChangeMock = jest.fn();
-  const wrapper = mount(
-    <DateTimeRangePickerFormControl
-      from={date}
-      to={date}
-      onChange={onChangeMock}
-    />
-  );
-
-  // eslint-disable-next-line
-  wrapper.find(Button).at(1).props().onClick?.();
-
-  expect(onChangeMock).toHaveBeenCalledWith({ from: date, to: date });
-
-  wrapper.setProps({ to: null });
-  wrapper.update();
-
-  // eslint-disable-next-line
-  wrapper.find(Button).at(1).props().onClick?.();
-  expect(onChangeMock).toHaveBeenCalledWith({ from: date });
-
-  wrapper.setProps({ to: date, from: null });
-  wrapper.update();
-
-  // eslint-disable-next-line
-  wrapper.find(Button).at(1).props().onClick?.();
-  expect(onChangeMock).toHaveBeenCalledWith({ to: date });
-});
+import React from 'react';
+import { mount } from 'enzyme';
+import { KeyboardDateTimePicker } from '@material-ui/pickers';
+import { Button } from '@map-colonies/react-core';
+import { DateTimeRangePickerFormControl } from './date-range-picker.form-control';
+
+const date = new Date(1990, 1, 1);
+
+it('set the values of to and from to the props of the date pickers when changed', () => {
+  const wrapper = mount(
+    <DateTimeRangePickerFormControl
+      onChange={() => {
+        // do nothing for linitng
+      }}
+    />
+  );
+  wrapper.setProps({ from: date, to: date });
+  // eslint-disable-next-line
+  wrapper.find(Button).first().simulate('click', { currentTarget: {} });
+
+  wrapper.update();
+  const pickers = wrapper.find(KeyboardDateTimePicker);
+  const fromRangePicker = pickers.first();
+  const toRangePicker = pickers.at(1);
+
+  expect(fromRangePicker.prop('value')?.valueOf()).toBe(date.getTime());
+  expect(toRangePicker.prop('value')?.valueOf()).toBe(date.getTime());
+});
+
+it('calls on change with right argumnets when inner set button is clicked', () => {
+  const onChangeMock = jest.fn();
+  const wrapper = mount(
+    <DateTimeRangePickerFormControl
+      from={date}
+      to={date}
+      onChange={onChangeMock}
+    />
+  );
+
+  // eslint-disable-next-line
+  wrapper.find(Button).at(1).props().onClick?.();
+
+  expect(onChangeMock).toHaveBeenCalledWith({ from: date, to: date });
+
+  wrapper.setProps({ to: null });
+  wrapper.update();
+
+  // eslint-disable-next-line
+  wrapper.find(Button).at(1).props().onClick?.();
+  expect(onChangeMock).toHaveBeenCalledWith({ from: date });
+
+  wrapper.setProps({ to: date, from: null });
+  wrapper.update();
+
+  // eslint-disable-next-line
+  wrapper.find(Button).at(1).props().onClick?.();
+  expect(onChangeMock).toHaveBeenCalledWith({ to: date });
+});

package/src/lib/date-range-picker/date-range-picker.form-control.tsx

@@ -1,150 +1,150 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { format as formatDateFns } from 'date-fns';
-import { Button, TextField } from '@map-colonies/react-core';
-import '@map-colonies/react-core/dist/textfield/styles';
-
-import { SupportedLocales } from '../models/enums';
-import DEFAULTS from '../models/defaults';
-import { Popover } from '../popover';
-import { DateTimeRangePicker } from './date-range-picker';
-import './date-range-picker.form-control.css';
-
-interface DateRangePickerProps {
-  onChange: (dateRange: { from?: Date; to?: Date }) => void;
-  from?: Date;
-  to?: Date;
-  dateFormat?: string;
-  renderAsButton?: boolean;
-  width?: string | number;
-  controlsLayout?: 'column' | 'row';
-  offset?: number;
-  disableFuture?: boolean;
-  maxDate?: string | number | Date | null | undefined;
-  minDate?: string | number | Date | null | undefined;
-  local?: {
-    setText?: string;
-    startPlaceHolderText?: string;
-    endPlaceHolderText?: string;
-    calendarLocale?: SupportedLocales;
-  };
-}
-export const DateTimeRangePickerFormControl: React.FC<DateRangePickerProps> = (
-  props
-) => {
-  const [from, setFrom] = useState<Date | null>(null);
-  const [to, setTo] = useState<Date | null>(null);
-  const [dateFormat, setDateFormat] = useState<string>(
-    DEFAULTS.DATE_RANGE_PICKER.dateFormat
-  );
-  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
-    null
-  );
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClickInput = (
-    event: React.MouseEvent<HTMLInputElement>
-  ): void => {
-    if (event.currentTarget.tagName === 'I')
-      setAnchorEl(
-        event.currentTarget.previousElementSibling as HTMLButtonElement
-      );
-    else setAnchorEl(event.currentTarget as HTMLButtonElement);
-  };
-  const handleClose = (): void => {
-    setAnchorEl(null);
-  };
-  const open = Boolean(anchorEl);
-  const controlsLayout = props.controlsLayout ?? 'column';
-
-  useEffect(() => {
-    setFrom(props.from ?? null);
-  }, [props.from]);
-
-  useEffect(() => {
-    setTo(props.to ?? null);
-  }, [props.to]);
-
-  useEffect(() => {
-    setDateFormat(props.dateFormat ?? DEFAULTS.DATE_RANGE_PICKER.dateFormat);
-  }, [props.dateFormat]);
-
-  const startPlaceHolderText =
-    props.local?.startPlaceHolderText ??
-    DEFAULTS.DATE_RANGE_PICKER.local.startPlaceHolderText;
-  const endPlaceHolderText =
-    props.local?.endPlaceHolderText ??
-    DEFAULTS.DATE_RANGE_PICKER.local.endPlaceHolderText;
-  const renderAsButton =
-    props.renderAsButton === undefined
-      ? DEFAULTS.DATE_RANGE_PICKER.renderAsButton
-      : props.renderAsButton;
-  const offset =
-    props.offset === undefined
-      ? DEFAULTS.DATE_RANGE_PICKER.offset
-      : props.offset;
-  const disableFuture =
-    props.disableFuture === undefined
-      ? DEFAULTS.DATE_RANGE_PICKER.disableFuture
-      : props.disableFuture;
-
-  const controlText = useMemo(() => {
-    return `${
-      from ? formatDateFns(from, dateFormat) : startPlaceHolderText
-    } - ${to ? formatDateFns(to, dateFormat) : endPlaceHolderText}`;
-  }, [from, to, dateFormat, startPlaceHolderText, endPlaceHolderText]);
-
-  return (
-    <>
-      {renderAsButton ? (
-        <Button
-          style={{ width: props.width }}
-          raised
-          onClick={handleClick}
-          className="drpOpener"
-        >
-          {controlText}
-        </Button>
-      ) : (
-        <TextField
-          className="drpOpener"
-          readOnly
-          style={{ width: props.width }}
-          value={controlText}
-          onClick={handleClickInput}
-          trailingIcon={{
-            icon: 'date_range',
-            tabIndex: 0,
-            onClick: handleClickInput,
-          }}
-        />
-      )}
-
-      <Popover
-        open={open}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-        keepMounted
-      >
-        <DateTimeRangePicker
-          controlsLayout={controlsLayout}
-          contentWidth={(anchorEl?.clientWidth ?? 0) - offset}
-          dateFormat={dateFormat}
-          disableFuture={disableFuture}
-          minDate={props.minDate}
-          maxDate={props.maxDate}
-          local={props.local}
-          from={from ?? undefined}
-          to={to ?? undefined}
-          onChange={({ from, to }): void => {
-            setFrom(from ?? null);
-            setTo(to ?? null);
-            props.onChange({ from, to });
-            handleClose();
-          }}
-        />
-      </Popover>
-    </>
-  );
-};
+import React, { useState, useEffect, useMemo } from 'react';
+import { format as formatDateFns } from 'date-fns';
+import { Button, TextField } from '@map-colonies/react-core';
+import '@map-colonies/react-core/dist/textfield/styles';
+
+import { SupportedLocales } from '../models/enums';
+import DEFAULTS from '../models/defaults';
+import { Popover } from '../popover';
+import { DateTimeRangePicker } from './date-range-picker';
+import './date-range-picker.form-control.css';
+
+interface DateRangePickerProps {
+  onChange: (dateRange: { from?: Date; to?: Date }) => void;
+  from?: Date;
+  to?: Date;
+  dateFormat?: string;
+  renderAsButton?: boolean;
+  width?: string | number;
+  controlsLayout?: 'column' | 'row';
+  offset?: number;
+  disableFuture?: boolean;
+  maxDate?: string | number | Date | null | undefined;
+  minDate?: string | number | Date | null | undefined;
+  local?: {
+    setText?: string;
+    startPlaceHolderText?: string;
+    endPlaceHolderText?: string;
+    calendarLocale?: SupportedLocales;
+  };
+}
+export const DateTimeRangePickerFormControl: React.FC<DateRangePickerProps> = (
+  props
+) => {
+  const [from, setFrom] = useState<Date | null>(null);
+  const [to, setTo] = useState<Date | null>(null);
+  const [dateFormat, setDateFormat] = useState<string>(
+    DEFAULTS.DATE_RANGE_PICKER.dateFormat
+  );
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
+    null
+  );
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClickInput = (
+    event: React.MouseEvent<HTMLInputElement>
+  ): void => {
+    if (event.currentTarget.tagName === 'I')
+      setAnchorEl(
+        event.currentTarget.previousElementSibling as HTMLButtonElement
+      );
+    else setAnchorEl(event.currentTarget as HTMLButtonElement);
+  };
+  const handleClose = (): void => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  const controlsLayout = props.controlsLayout ?? 'column';
+
+  useEffect(() => {
+    setFrom(props.from ?? null);
+  }, [props.from]);
+
+  useEffect(() => {
+    setTo(props.to ?? null);
+  }, [props.to]);
+
+  useEffect(() => {
+    setDateFormat(props.dateFormat ?? DEFAULTS.DATE_RANGE_PICKER.dateFormat);
+  }, [props.dateFormat]);
+
+  const startPlaceHolderText =
+    props.local?.startPlaceHolderText ??
+    DEFAULTS.DATE_RANGE_PICKER.local.startPlaceHolderText;
+  const endPlaceHolderText =
+    props.local?.endPlaceHolderText ??
+    DEFAULTS.DATE_RANGE_PICKER.local.endPlaceHolderText;
+  const renderAsButton =
+    props.renderAsButton === undefined
+      ? DEFAULTS.DATE_RANGE_PICKER.renderAsButton
+      : props.renderAsButton;
+  const offset =
+    props.offset === undefined
+      ? DEFAULTS.DATE_RANGE_PICKER.offset
+      : props.offset;
+  const disableFuture =
+    props.disableFuture === undefined
+      ? DEFAULTS.DATE_RANGE_PICKER.disableFuture
+      : props.disableFuture;
+
+  const controlText = useMemo(() => {
+    return `${
+      from ? formatDateFns(from, dateFormat) : startPlaceHolderText
+    } - ${to ? formatDateFns(to, dateFormat) : endPlaceHolderText}`;
+  }, [from, to, dateFormat, startPlaceHolderText, endPlaceHolderText]);
+
+  return (
+    <>
+      {renderAsButton ? (
+        <Button
+          style={{ width: props.width }}
+          raised
+          onClick={handleClick}
+          className="drpOpener"
+        >
+          {controlText}
+        </Button>
+      ) : (
+        <TextField
+          className="drpOpener"
+          readOnly
+          style={{ width: props.width }}
+          value={controlText}
+          onClick={handleClickInput}
+          trailingIcon={{
+            icon: 'date_range',
+            tabIndex: 0,
+            onClick: handleClickInput,
+          }}
+        />
+      )}
+
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        keepMounted
+      >
+        <DateTimeRangePicker
+          controlsLayout={controlsLayout}
+          contentWidth={(anchorEl?.clientWidth ?? 0) - offset}
+          dateFormat={dateFormat}
+          disableFuture={disableFuture}
+          minDate={props.minDate}
+          maxDate={props.maxDate}
+          local={props.local}
+          from={from ?? undefined}
+          to={to ?? undefined}
+          onChange={({ from, to }): void => {
+            setFrom(from ?? null);
+            setTo(to ?? null);
+            props.onChange({ from, to });
+            handleClose();
+          }}
+        />
+      </Popover>
+    </>
+  );
+};