Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/dev'
Browse files Browse the repository at this point in the history
  • Loading branch information
@snrs-art
snrs-art committed Jul 28, 2022
2 parents 41a4ccb + ad18985 commit 6cfe992
Show file tree
Hide file tree
Showing 49 changed files with 596 additions and 243 deletions.
3 changes: 3 additions & 0 deletions packages/components/card-tabs/src/CardTab/CardTab.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,9 @@ export const CardTabContainer = styled.div<CardTabContainerProps>`
justify-content: flex-start;
padding: 12px;
width: 180px;
@media (max-width: 588px) {
max-width: 145px;
}
height: 40px;
user-select: none;
background-color: ${({ theme, active, invalid, color, greyBackground, edited }): string => {
Expand Down
3 changes: 2 additions & 1 deletion packages/components/card-tabs/src/CardTab/CardTab.types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import { IntlShape } from 'react-intl';
import { DefaultColor } from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';

export enum prefixType {
TAG,
Expand Down Expand Up @@ -34,7 +35,7 @@ export interface CardTabProps {
tag: string;
prefix: prefixType;
colorDot: React.ReactNode;
color?: Color;
color?: Color | DefaultColor | string;
active?: boolean;
draggable?: boolean;
prefixIcon?: React.ReactNode;
Expand Down
8 changes: 8 additions & 0 deletions packages/components/card-tabs/src/CardTabs.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import styled from 'styled-components';
import * as CreatorStyles from '@synerise/ds-button/dist/Creator/Creator.styles';
import { CardTabContainer } from './CardTab/CardTab.styles';

// eslint-disable-next-line import/prefer-default-export
Expand Down Expand Up @@ -40,4 +41,11 @@ export const CardTabsContainer = styled.div`
visibility: hidden;
}
}
@media (max-width: 588px) {
.ds-button-creator {
${CreatorStyles.CreatorLabel} {
display: none;
}
}
}
`;
5 changes: 3 additions & 2 deletions packages/components/card-tabs/src/CardTabs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import * as React from 'react';
import { ReactSortable } from 'react-sortablejs-typescript';
import Button from '@synerise/ds-button';
import { defaultColorsOrder } from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
import * as S from './CardTabs.styles';
import { CardTabsProps } from './CardTabs.types';
import { COLORS_TABS } from './CardTab/ColorsTabs';

const SORTABLE_CONFIG = {
ghostClass: 'sortable-card-ghost-element',
Expand All @@ -30,7 +30,7 @@ const CardTabs: React.FC<CardTabsProps> = ({
const renderChildren = (): JSX.Element[] =>
React.Children.map(children, (child, i) =>
React.cloneElement(child, {
color: COLORS_TABS[i % COLORS_TABS.length],
...(child.props.color ? {} : { color: defaultColorsOrder[i % defaultColorsOrder.length] }),
draggable: Boolean(onChangeOrder) || child.props.draggable,
})
);
Expand All @@ -56,6 +56,7 @@ const CardTabs: React.FC<CardTabsProps> = ({
{onAddTab && (
<span data-testid="card-tabs-add-button">
<Button.Creator
block
disabled={!!maxTabsCount && React.Children.toArray(children).length >= maxTabsCount}
label={addTabLabel ?? ''}
onClick={onAddTab}
Expand Down
1 change: 1 addition & 0 deletions packages/components/card-tabs/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export { default } from './CardTabs';
export { default as CardTab } from './CardTab/CardTab';
54 changes: 26 additions & 28 deletions packages/components/date-range-picker/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,36 +41,34 @@ const value = {

## API

| Property | Description | Type | Default |
| -------------------- | ------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------- |
| disabledDate | Function to specify if particular dates are disabled or not | (date:Date)=>boolean | - |
| disabledDefaultTexts | Disables the default texts translations provided by `react-intl` | boolean | `false` |
| forceAbsolute | Force the outcome to be converted to an absolute date | boolean | `false` |
| format | Format of the value displayed in the footer | string | "MMM D, YYYY" |
| onApply | Callback executed after applying changes | (date:Date)=>void | - |
| ranges | An array containing custom ranges which may be used as a short-hand | DateRange[] | [] |
| popoverProps | Object representing props applied to the Antd Popover component | AntdPopoverProps | {} |
| rangeUnits | Units available in relative range picker | RelativeUnits[] | ['SECONDS','MINUTES','HOURS','DAYS','WEEKS','MONTHS','YEARS'] |
| relativePast | Enable relative filter for past ranges | boolean | `false` |
| relativeFuture | Enable relative filter for future ranges | boolean | `false` |
| showTime | Enable user to choose particular hour | boolean | `false` |
| showFilter | Enable range filtering | boolean | `false` |
| showCustomRange | Enable custom range form in relative range picker | boolean | `true` |
| validate | Function to specify if particular date ranges are correct | (date:Date)=>boolean | - |
| value | Value of the picker | DateRange | new Date() |
| onVisibleChange | Callback executed when popover with dateRangePicker changes its visibility | (visible: boolean) => void | - |
| Property | Description | Type | Default |
| -------------------- | ------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------- |
| disabledDate | Function to specify if particular dates are disabled or not | (date:Date)=>boolean | - |
| disabledDefaultTexts | Disables the default texts translations provided by `react-intl` | boolean | `false` |
| forceAbsolute | Force the outcome to be converted to an absolute date | boolean | `false` |
| format | Format of the value displayed in the footer | string | "MMM D, YYYY" |
| onApply | Callback executed after applying changes | (date:Date)=>void | - |
| ranges | An array containing custom ranges which may be used as a short-hand | DateRange[] | [] |
| popoverProps | Object representing props applied to the Antd Popover component | AntdPopoverProps | {} |
| rangeUnits | Units available in relative range picker | RelativeUnits[] | ['SECONDS','MINUTES','HOURS','DAYS','WEEKS','MONTHS','YEARS'] |
| relativePast | Enable relative filter for past ranges | boolean | `false` |
| relativeFuture | Enable relative filter for future ranges | boolean | `false` |
| showTime | Enable user to choose particular hour | boolean | `false` |
| showFilter | Enable range filtering | boolean | `false` |
| showCustomRange | Enable custom range form in relative range picker | boolean | `true` |
| validate | Function to specify if particular date ranges are correct | (date:Date)=>boolean | - |
| value | Value of the picker | DateRange | new Date() |
| startAlwaysOnTheLeft | Enable not to move month from left side to right side | boolean | `false` |
| onVisibleChange | Callback executed when popover with dateRangePicker changes its visibility | (visible: boolean) => void | - |


### DateRange

| Property | Description | Type | Default |
| -----------| ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------- |
| from | Start date | Date / string | - |
| to | End date | Date / string | - |
| type | String key for identifying the range type | 'ABSOLUTE' / 'RELATIVE' / 'SINCE' | - |
| duration | Duration of the relative range | {type: RelativeUnit, duration:number} | - |
| offset | Offset of the relative range from today's date | {type: RelativeUnit, duration:number} | - |
| arrowColor | Custom color arrow of popover when is footer | {['bottomLeft' | 'topLeft' | 'anyOtherPlacement']: 'white' | 'grey' | anyPaletteColorToken} | - |

| Property | Description | Type | Default |
| -------- | ---------------------------------------------- | ------------------------------------- | ------- |
| from | Start date | Date / string | - |
| to | End date | Date / string | - |
| type | String key for identifying the range type | 'ABSOLUTE' / 'RELATIVE' / 'SINCE' | - |
| duration | Duration of the relative range | {type: RelativeUnit, duration:number} | - |
| offset | Offset of the relative range from today's date | {type: RelativeUnit, duration:number} | - |

`RelativeUnit = 'SECONDS' | 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS' | 'YEARS'`
6 changes: 6 additions & 0 deletions packages/components/date-range-picker/src/DateRangePicker.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { PopoverProps } from 'antd/lib/popover';
import { DateFilter, DateRange, RelativeUnits } from './date.types';
import { FilterDefinition } from './RangeFilter/RangeFilter.types';
import { SavedFilter } from './RangeFilter/Shared/FilterDropdown/FilterDropdown.types';
import { Props as FooterProps } from './Footer/Footer.types';

export type CustomColorArrow =
| 'blue'
Expand All @@ -29,11 +30,16 @@ export type AdditionalMapper = {
rightBottom: CustomColorArrow;
};
export interface Props extends WrappedComponentProps {
/**
* overwrite default container's class. Default value is `ds-date-range-picker`.
*/
containerClass?: string;
disableDefaultTexts?: boolean;
disabledDate?: (date?: Date) => boolean;
format?: string;
forceAdjacentMonths?: boolean;
forceAbsolute?: boolean;
footerProps?: Partial<FooterProps>;
onValueChange?: (value: Partial<DateFilter> | undefined) => void;
onApply: (value: Partial<DateFilter> | undefined) => void;
onVisibleChange?: (visible: boolean) => void;
Expand Down
13 changes: 13 additions & 0 deletions packages/components/date-range-picker/src/Footer/Footer.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,16 @@ export const ChosenRange = styled.div`
fill: ${(props): string => props.theme.palette['grey-400']};
}
`;
/**
* This is mainly for unit-tests capabilitiess and WCAG compliancy, it is visible
* can be used for em-dashes (APA style) which will be recognized by screen-readers
* or in tests in `textContent` JS DOM property.
*
* Example usage:
*
* <S.InvisibleTextContent>{' – '}</S.InvisibleTextContent>
* <Icon component={<ArrowRightS/>}/>
*/
export const InvisibleTextContent = styled.span`
display: none;
`;
6 changes: 4 additions & 2 deletions packages/components/date-range-picker/src/Footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const Footer: React.FC<Props> = ({
value,
format,
showTime,
displayDateContainerClass = 'ds-date-range-picker-value',
...rest
}) => {
const footerFormat = format || (showTime ? 'MMM D, YYYY, HH:mm' : 'MMM D, YYYY');
Expand All @@ -35,17 +36,18 @@ const Footer: React.FC<Props> = ({
);
}
return (
<S.ChosenRange className="ds-date-range-picker-value">
<S.ChosenRange className={displayDateContainerClass}>
{!!value && !!value.from
? fnsFormat(getDateFromString(value?.from), footerFormat, intl.locale)
: texts.startDatePlaceholder}
<S.InvisibleTextContent>{' – '}</S.InvisibleTextContent>
<Icon component={<ArrowRightS />} />
{!!value && !!value.to
? fnsFormat(getDateFromString(value?.to), footerFormat, intl.locale)
: texts.endDatePlaceholder}
</S.ChosenRange>
);
}, [value, footerFormat, intl.locale, texts]);
}, [value, footerFormat, intl.locale, texts, displayDateContainerClass]);
return (
<S.Container className="ds-date-range-picker-footer" {...rest}>
{ChosenRange}
Expand Down
1 change: 1 addition & 0 deletions packages/components/date-range-picker/src/Footer/Footer.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,5 @@ export type Props = {
texts: Texts;
format?: string;
showTime?: boolean;
displayDateContainerClass?: string;
} & WrappedComponentProps;
57 changes: 38 additions & 19 deletions packages/components/date-range-picker/src/RangePicker/RangePicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { DateUtils, RangeModifier, DayModifiers } from 'react-day-picker';
import { DateUtils, DayModifiers } from 'react-day-picker';
import fnsIsSameDay from 'date-fns/isSameDay';
import fnsIsValid from 'date-fns/isValid';
import MonthPicker from '@synerise/ds-date-picker/dist/Elements/MonthPicker/MonthPicker';
Expand All @@ -17,20 +17,45 @@ import Icon, { CalendarM, ClockM } from '@synerise/ds-icon';
import { fnsDifferenceInYears } from '@synerise/ds-date-picker/dist/fns';
import fnsFormat from '@synerise/ds-date-picker/dist/format';
import { legacyParse } from '@date-fns/upgrade/v2';

import { Range } from '../RelativeRangePicker/RelativeRangePicker.styles';
import { fnsStartOfDay, fnsEndOfDay, fnsIsSameMonth, fnsIsAfter, fnsAddMinutes, fnsAddDays } from '../fns';
import * as S from './RangePicker.styles';
import { ABSOLUTE, COLUMNS, MODES } from '../constants';

import ADD from '../dateUtils/add';
import { DateFilter } from '../date.types';
import { AbsoluteDateRange, DateFilter, RelativeDateRange } from '../date.types';
import { Props, State, Side as SideType } from './RangePicker.types';
import getDateFromString from '../dateUtils/getDateFromString';
import { getSidesState, getDisabledTimeOptions, getModifiers } from './utils';

// eslint-disable-next-line @typescript-eslint/no-empty-function
const NOOP = (): void => {};
const TOOLTIP_FORMAT = 'MMM d, yyyy, HH:mm';

function replaceRange(value: AbsoluteDateRange | RelativeDateRange, day: Date): Omit<AbsoluteDateRange, 'type'> {
let { from, to } = value;
// arguments to DateUtils functions are casted to Date because function arguments require Date
if (!from) {
from = day;
} else if (from && to && DateUtils.isSameDay(from as Date, to as Date) && DateUtils.isSameDay(day, from as Date)) {
from = null;
to = null;
} else if (to && DateUtils.isSameDay(day, to as Date)) {
from = day;
to = day;
} else if (from && to) {
from = day;
to = null;
} else {
to = day;
if (DateUtils.isDayBefore(to, from as Date)) {
to = from;
from = day;
}
}
return { from, to };
}
export default class RangePicker extends React.PureComponent<Props, State> {
constructor(props: Props) {
super(props);
Expand All @@ -42,18 +67,18 @@ export default class RangePicker extends React.PureComponent<Props, State> {
}

getSnapshotBeforeUpdate(prevProps: Readonly<Props>): null {
const { value, forceAdjacentMonths } = this.props;
const { value, forceAdjacentMonths, startAlwaysOnTheLeft } = this.props;
const { left } = this.state;
const toDateChanged = !!value?.to && value?.to !== prevProps?.value?.to;
const fromDateChanged = !!value?.from && value?.from !== prevProps?.value?.from;
if (
(!!value?.to &&
value?.to !== prevProps?.value?.to &&
!fnsIsSameMonth(legacyParse(value.to), legacyParse(left.month))) ||
(!!value?.from &&
value?.from !== prevProps?.value?.from &&
!fnsIsSameMonth(legacyParse(value.from), legacyParse(left.month))) ||
(toDateChanged && !fnsIsSameMonth(legacyParse(value.to), legacyParse(left.month))) ||
(fromDateChanged && !fnsIsSameMonth(legacyParse(value.from), legacyParse(left.month))) ||
forceAdjacentMonths !== prevProps.forceAdjacentMonths
) {
this.setState(getSidesState(value, forceAdjacentMonths));
if (startAlwaysOnTheLeft) {
this.setState(getSidesState(value, forceAdjacentMonths));
}
}
return null;
}
Expand All @@ -72,15 +97,9 @@ export default class RangePicker extends React.PureComponent<Props, State> {
e.preventDefault();
const { value, onChange } = this.props;
if (modifiers.disabled) return;
let { from, to } = DateUtils.addDayToRange(day, value as RangeModifier);
from = from ? fnsStartOfDay(from) : from;
to = to ? fnsEndOfDay(to) : to;
if (to) {
const now = new Date();
if (fnsIsSameDay(legacyParse(to), legacyParse(now))) {
to = now;
}
}
let { from, to } = replaceRange(value, day);
from = from ? fnsStartOfDay(from as Date) : from;
to = to ? fnsEndOfDay(to as Date) : to;
onChange && onChange({ type: ABSOLUTE, from, to });
};

Expand Down
1 change: 1 addition & 0 deletions packages/components/date-range-picker/src/RangePicker/RangePicker.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export interface Props extends WrappedComponentProps {
texts: Texts;
forceAdjacentMonths?: boolean;
showCustomRange?: boolean;
startAlwaysOnTheLeft?: boolean;
}

export interface State {
Expand Down
Loading

0 comments on commit 6cfe992

Please sign in to comment.