@map-colonies/react-components 3.15.1 → 4.0.1

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

@@ -1,81 +0,0 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { KeyboardDateTimePicker } from '@material-ui/pickers';
-import { Button } from '@map-colonies/react-core';
-import { DateTimeRangePicker } from './date-range-picker';
-
-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(
-    <DateTimeRangePicker
-      onChange={() => {
-        // do nothing for linitng
-      }}
-    />
-  );
-  wrapper.setProps({ from: date, to: date });
-
-  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 when button is clicked', () => {
-  const onChangeMock = jest.fn();
-  const wrapper = mount(
-    <DateTimeRangePicker from={date} to={date} onChange={onChangeMock} />
-  );
-
-  // eslint-disable-next-line
-  wrapper.find(Button).props().onClick?.();
-
-  expect(onChangeMock).toHaveBeenCalledWith({ from: date, to: date });
-
-  wrapper.setProps({ to: null });
-  wrapper.update();
-
-  // eslint-disable-next-line
-  wrapper.find(Button).props().onClick?.();
-  expect(onChangeMock).toHaveBeenCalledWith({ from: date });
-
-  wrapper.setProps({ to: date, from: null });
-  wrapper.update();
-
-  // eslint-disable-next-line
-  wrapper.find(Button).props().onClick?.();
-  expect(onChangeMock).toHaveBeenCalledWith({ to: date });
-});
-
-it('enables and disables the button based on the validity of the dates', () => {
-  const wrapper = shallow(
-    <DateTimeRangePicker
-      onChange={() => {
-        // do nothing for linitng
-      }}
-    />
-  );
-  const fromPicker = wrapper.find(KeyboardDateTimePicker).first();
-  const toPicker = wrapper.find(KeyboardDateTimePicker).at(1);
-
-  expect(wrapper.find(Button).prop('disabled')).toBe(true);
-
-  fromPicker.prop('onChange')(date);
-  wrapper.update();
-
-  expect(wrapper.find(Button).prop('disabled')).toBe(false);
-
-  toPicker.prop('onChange')(date);
-  wrapper.update();
-
-  expect(wrapper.find(Button).prop('disabled')).toBe(true);
-
-  toPicker.prop('onChange')(new Date(1994, 1));
-  wrapper.update();
-
-  expect(wrapper.find(Button).prop('disabled')).toBe(false);
-});

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

@@ -1,207 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { Story } from '@storybook/react/types-6-0';
-import { CSFStory } from '../utils/story';
-import { SupportedLocales } from '../models/enums';
-import { DateTimeRangePicker } from './date-range-picker';
-import { DateTimeRangePickerFormControl } from './date-range-picker.form-control';
-
-export default {
-  title: 'Date Range Picker',
-  component: DateTimeRangePicker,
-};
-
-export const DateTime: CSFStory<JSX.Element> = () => (
-  <DateTimeRangePicker onChange={action('date changed')} />
-);
-
-DateTime.story = {
-  name: 'Date time range',
-};
-
-export const DateNoFutureLimitTime: CSFStory<JSX.Element> = () => (
-  <DateTimeRangePicker
-    disableFuture={false}
-    onChange={action('date changed')}
-  />
-);
-
-DateNoFutureLimitTime.story = {
-  name: 'Date time range no future limit',
-};
-
-export const DateMinMaxLimitTime: CSFStory<JSX.Element> = () => {
-  const minDate = new Date();
-  const maxDate = new Date();
-  const deltaInDays = 6;
-  minDate.setDate(maxDate.getDate() - deltaInDays);
-  maxDate.setDate(maxDate.getDate() + deltaInDays);
-  return (
-    <DateTimeRangePicker
-      onChange={action('date changed')}
-      disableFuture={false}
-      minDate={minDate}
-      maxDate={maxDate}
-    />
-  );
-};
-
-DateMinMaxLimitTime.story = {
-  name: 'Date time range with minDate & maxDate ',
-};
-
-export const DateTimeFormControl: Story = (args: unknown) => {
-  return (
-    <DateTimeRangePickerFormControl
-      {...args}
-      onChange={action('date changed')}
-    />
-  );
-};
-
-DateTimeFormControl.storyName = 'Date time range form control';
-
-DateTimeFormControl.argTypes = {
-  controlsLayout: {
-    defaultValue: 'column',
-    control: {
-      type: 'select',
-      options: ['row', 'column'],
-    },
-  },
-  local: {
-    control: {
-      type: 'object',
-    },
-  },
-  offset: {
-    defaultValue: 32,
-    control: {
-      type: 'number',
-    },
-  },
-};
-
-export const DateTimeLocalizedFormControl: Story = (args: unknown) => {
-  const local = {
-    setText: 'MySet',
-    startPlaceHolderText: 'MyStart',
-    endPlaceHolderText: 'MyEnd',
-  };
-  return (
-    <DateTimeRangePickerFormControl
-      local={local}
-      from={new Date(1990, 1, 1)}
-      to={new Date(1990, 1, 1)}
-      width={360}
-      {...args}
-      onChange={action('date changed')}
-    />
-  );
-};
-
-DateTimeLocalizedFormControl.storyName =
-  'Date time range localized form control';
-
-DateTimeLocalizedFormControl.argTypes = {
-  controlsLayout: {
-    defaultValue: 'column',
-    control: {
-      type: 'select',
-      options: ['row', 'column'],
-    },
-  },
-  local: {
-    control: {
-      type: 'object',
-    },
-  },
-  offset: {
-    defaultValue: 32,
-    control: {
-      type: 'number',
-    },
-  },
-};
-
-export const DateTimeLocalizedAsFormControl: Story = (args: unknown) => {
-  const local = {
-    setText: 'MySet',
-    startPlaceHolderText: 'MyStart',
-    endPlaceHolderText: 'MyEnd',
-  };
-  return (
-    <DateTimeRangePickerFormControl
-      local={local}
-      renderAsButton={false}
-      width={360}
-      {...args}
-      onChange={action('date changed')}
-    />
-  );
-};
-
-DateTimeLocalizedAsFormControl.storyName = 'Date time range looks like input';
-
-DateTimeLocalizedAsFormControl.argTypes = {
-  controlsLayout: {
-    defaultValue: 'column',
-    control: {
-      type: 'select',
-      options: ['row', 'column'],
-    },
-  },
-  local: {
-    control: {
-      type: 'object',
-    },
-  },
-  offset: {
-    defaultValue: 32,
-    control: {
-      type: 'number',
-    },
-  },
-};
-
-export const DateTimeHebrewLocalizedAsFormControl: Story = (args: unknown) => {
-  const local = {
-    setText: 'MySet',
-    startPlaceHolderText: 'MyStart',
-    endPlaceHolderText: 'MyEnd',
-    calendarLocale: SupportedLocales.HE,
-  };
-  return (
-    <DateTimeRangePickerFormControl
-      local={local}
-      renderAsButton={false}
-      width={360}
-      {...args}
-      onChange={action('date changed')}
-    />
-  );
-};
-
-DateTimeHebrewLocalizedAsFormControl.storyName =
-  'Date time range looks like input with Hebrew calendar';
-
-DateTimeHebrewLocalizedAsFormControl.argTypes = {
-  controlsLayout: {
-    defaultValue: 'column',
-    control: {
-      type: 'select',
-      options: ['row', 'column'],
-    },
-  },
-  local: {
-    control: {
-      type: 'object',
-    },
-  },
-  offset: {
-    defaultValue: 32,
-    control: {
-      type: 'number',
-    },
-  },
-};

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

@@ -1,156 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { isValid, isBefore } from 'date-fns';
-import { he, enUS } from 'date-fns/locale';
-import {
-  MuiPickersUtilsProvider,
-  KeyboardDateTimePicker,
-} from '@material-ui/pickers';
-import DateFnsUtils from '@date-io/date-fns';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
-import { ThemeProvider } from '@material-ui/core';
-
-import { Button, useTheme } from '@map-colonies/react-core';
-import '@map-colonies/react-core/dist/button/styles';
-import { ThemeProvider as RmwcThemeProvider } from '@map-colonies/react-core';
-import { SupportedLocales } from '../models/enums';
-import DEFAULTS from '../models/defaults';
-import { Box } from '../box';
-import { useMappedMuiTheme } from '../theme';
-import './date-range-picker.css';
-
-const CONTAINER_SPACING_FACTOR = 2;
-const MARGIN_LEFT_FACTOR = 0.5;
-
-const useStyle = makeStyles((theme: Theme) =>
-  createStyles({
-    container: {
-      padding: theme.spacing(CONTAINER_SPACING_FACTOR),
-      alignItems: 'center',
-    },
-    setButton: {
-      marginTop: theme.spacing(1),
-    },
-    margin: {
-      marginLeft: theme.spacing(MARGIN_LEFT_FACTOR),
-    },
-  })
-);
-
-interface DateRangePickerProps {
-  onChange: (dateRange: { from?: Date; to?: Date }) => void;
-  from?: Date;
-  to?: Date;
-  dateFormat?: string;
-  controlsLayout?: string;
-  contentWidth?: 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 DateTimeRangePicker: React.FC<DateRangePickerProps> = (props) => {
-  const classes = useStyle();
-  const theme: { [key: string]: string } = useTheme();
-  const themeMui = useMappedMuiTheme(theme);
-  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 flexDirection =
-    props.controlsLayout ?? DEFAULTS.DATE_RANGE_PICKER.controlsLayout;
-  const disableFuture =
-    props.disableFuture ?? DEFAULTS.DATE_RANGE_PICKER.disableFuture;
-  const startPlaceHolderText =
-    props.local?.startPlaceHolderText ??
-    DEFAULTS.DATE_RANGE_PICKER.local.startPlaceHolderText;
-  const endPlaceHolderText =
-    props.local?.endPlaceHolderText ??
-    DEFAULTS.DATE_RANGE_PICKER.local.endPlaceHolderText;
-  const setText =
-    props.local?.setText ?? DEFAULTS.DATE_RANGE_PICKER.local.setText;
-  const calendarLocale =
-    props.local?.calendarLocale ??
-    DEFAULTS.DATE_RANGE_PICKER.local.calendarLocale;
-
-  const locale = calendarLocale === SupportedLocales.HE ? he : enUS;
-
-  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 isRangeValid = Boolean(
-    (isValid(from) && !to) ||
-      (isValid(to) && !from) ||
-      (from && to && isValid(from) && isValid(to) && isBefore(from, to))
-  );
-
-  const onChange = (): void => {
-    props.onChange({
-      from: from && isValid(from) ? from : undefined,
-      to: to && isValid(to) ? to : undefined,
-    });
-  };
-
-  return (
-    <ThemeProvider theme={themeMui}>
-      <Box
-        className={`${classes.container} drpContainer`}
-        display="flex"
-        flexDirection={flexDirection}
-        width={flexDirection === 'column' ? props.contentWidth : 'unset'}
-      >
-        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={locale}>
-          <KeyboardDateTimePicker
-            variant="inline"
-            placeholder={startPlaceHolderText}
-            onChange={(date): void => setFrom(date as Date)}
-            value={from}
-            disableFuture={disableFuture}
-            format={dateFormat}
-            maxDate={props.maxDate}
-            minDate={props.minDate}
-          />
-          <KeyboardDateTimePicker
-            variant="inline"
-            placeholder={endPlaceHolderText}
-            className={classes.margin}
-            onChange={(date): void => setTo(date as Date)}
-            value={to}
-            disableFuture={disableFuture}
-            format={dateFormat}
-            maxDate={props.maxDate}
-            minDate={props.minDate}
-          />
-          <RmwcThemeProvider options={theme}>
-            <Button
-              className={`${classes.setButton} ${classes.margin}`}
-              raised
-              // variant="outlined"
-              // size="large"
-              onClick={onChange}
-              disabled={!isRangeValid}
-            >
-              {setText}
-            </Button>
-          </RmwcThemeProvider>
-        </MuiPickersUtilsProvider>
-      </Box>
-    </ThemeProvider>
-  );
-};

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

@@ -1,2 +0,0 @@
-export * from './date-range-picker';
-export * from './date-range-picker.form-control';

package/src/lib/file-picker/file-picker.css

@@ -1,63 +0,0 @@
-body[dir='rtl'] .chonky-fileListWrapper [class^='listContainer-'] {
-  direction: rtl !important;
-}
-
-body[dir='rtl']
-  .chonky-fileEntryClickableWrapper
-  [class^='listFileEntryProperty-'],
-body[dir='rtl'] .chonky-navbarContainer {
-  direction: ltr !important;
-}
-
-body[dir='rtl'] .chonky-chonkyRoot {
-  text-align: right;
-}
-
-body[dir='rtl'] .chonky-infoText {
-  margin-left: unset;
-  margin-right: 12px;
-}
-
-body[dir='rtl'] .chonky-contextMenuList .MuiListItemText-root,
-body[dir='rtl'] .chonky-dropdownList .MuiListItemText-root {
-  text-align: right;
-}
-
-body[dir='rtl'] .chonky-icon {
-  margin-right: unset;
-  margin-left: 8px;
-}
-
-.chonky-chonkyRoot div[class^='folderBackSide'] {
-  box-shadow: unset;
-}
-
-.chonky-chonkyRoot div[class^='folderBackSide']::after {
-  border-color: var(--fp-theme-background, #fff)
-    var(--fp-theme-background, #fff) transparent transparent;
-}
-
-.chonky-chonkyRoot div[class^='listFileEntryIcon-'] {
-  color: #d5d5d5;
-}
-
-.chonky-chonkyRoot div[class*='previewFile-d'] {
-  background-color: #d5d5d5;
-}
-
-.chonky-chonkyRoot div[class^='selectionIndicator-'] {
-  background: var(--fp-theme-selection-background, #455570);
-}
-
-.chonky-chonkyRoot {
-  background-color: var(--fp-theme-background, #fff) !important;
-}
-
-.chonky-contextMenuList {
-  background-color: var(--fp-theme-surface, #fff) !important;
-}
-
-button[class*='chonky-activeButton'],
-.chonky-selectionSizeText {
-  color: var(--fp-theme-primary, #24aee9) !important;
-}