@jetbrains/ring-ui 4.1.12 → 5.0.0-beta.11

package/components/date-picker/consts.d.ts

@@ -0,0 +1,99 @@
+import { ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import type { Locale } from 'date-fns';
+declare const units: {
+    unit: number;
+    cellSize: number;
+    calHeight: number;
+    yearHeight: number;
+};
+export default units;
+export declare const YEAR = 12;
+export declare const WEEK = 7;
+export declare const weekdays: {
+    MO: number;
+    TU: number;
+    WE: number;
+    TH: number;
+    FR: number;
+    SA: number;
+    SU: number;
+};
+export declare const MIDDLE_DAY = 15;
+export declare const yearDuration: number;
+export declare const yearScrollSpeed: number;
+export declare const DOUBLE = 2;
+export declare const HALF = 0.5;
+export declare const dateType: PropTypes.Requireable<string | number | Date>;
+export declare function parseTime(time: string): string | null;
+export interface DateInputTranslations {
+    addFirstDate: string;
+    addSecondDate: string;
+    addTime: string;
+    selectName: string;
+}
+export interface DateSpecificPopupProps {
+    withTime?: false | undefined;
+    range?: false | undefined;
+    onChange: (date: Date | null | undefined) => void;
+}
+export interface DatePickerChange {
+    from?: Date | null | undefined;
+    to?: Date | null | undefined;
+    date?: Date | null | undefined;
+    time?: string | null | undefined;
+}
+export interface TimeSpecificPopupProps {
+    withTime: true;
+    range?: false | undefined;
+    onChange: (change: DatePickerChange) => void;
+}
+export interface RangeSpecificPopupProps {
+    withTime?: false | undefined;
+    range: true;
+    onChange: (change: DatePickerChange) => void;
+}
+export interface DatePopupState {
+    active: Field;
+    text: string | null;
+    hoverDate: Date | null;
+    scrollDate: number | null;
+}
+export interface DatePopupBaseProps {
+    date?: Date | number | string | null | undefined;
+    time?: string | null | undefined;
+    from?: Date | number | string | null | undefined;
+    to?: Date | number | string | null | undefined;
+    minDate?: string | null | undefined;
+    maxDate?: string | null | undefined;
+    translations: DateInputTranslations;
+    fromPlaceholder?: string | null | undefined;
+    toPlaceholder?: string | null | undefined;
+    timePlaceholder?: string | null | undefined;
+    hidden: boolean;
+    locale?: Locale | undefined;
+    parseDateInput: (text: Date | number | string | null | undefined) => Date | null;
+    displayFormat: (date: Date, locale: Locale | undefined) => string;
+    onComplete: () => void;
+    onClear?: ((e: React.MouseEvent<HTMLButtonElement>) => void) | null | undefined;
+    renderAfterCalendar?: ((state: DatePopupState) => ReactNode) | undefined;
+}
+export interface Dates {
+    from?: Date | null | undefined;
+    to?: Date | null | undefined;
+    date?: Date | null | undefined;
+    time?: never;
+}
+export interface CalendarProps extends Omit<DatePopupBaseProps, 'date' | 'from' | 'to' | 'time'>, Dates {
+    activeDate: Date | null;
+    scrollDate: number | Date;
+    currentRange: [Date, Date] | null;
+    activeRange: [Date, Date] | null;
+    onScroll: (to: number) => void;
+    onScrollChange: (date: number) => void;
+}
+export interface MonthsProps extends CalendarProps {
+    onSelect: (date: Date) => void;
+    onHover: (date: Date) => void;
+}
+export declare type Field = 'date' | 'time' | 'from' | 'to';

package/components/date-picker/consts.js

@@ -1,71 +1,44 @@
 import PropTypes from 'prop-types';
 import add from 'date-fns/add';
-
 const unit = 8; // px;
 const units = {
-  unit,
-  /* eslint-disable no-magic-numbers */
-  cellSize: unit * 3,
-  calHeight: unit * 36,
-  yearHeight: unit * 4
-  /* eslint-enable */
+    unit,
+    /* eslint-disable @typescript-eslint/no-magic-numbers */
+    cellSize: unit * 3,
+    calHeight: unit * 36,
+    yearHeight: unit * 4
+    /* eslint-enable */
 };
-
 export default units;
-
 export const YEAR = 12;
 export const WEEK = 7;
 export const weekdays = {
-  MO: 1,
-  TU: 2,
-  WE: 3,
-  TH: 4,
-  FR: 5,
-  SA: 6,
-  SU: 0
+    MO: 1,
+    TU: 2,
+    WE: 3,
+    TH: 4,
+    FR: 5,
+    SA: 6,
+    SU: 0
 };
 export const MIDDLE_DAY = 15;
-
-const durationToMillis = duration => +add(0, duration);
-
-export const yearDuration = durationToMillis({years: 1});
+const durationToMillis = (duration) => +add(0, duration);
+export const yearDuration = durationToMillis({ years: 1 });
 export const yearScrollSpeed = yearDuration / (YEAR * units.cellSize);
-
 export const DOUBLE = 2;
 export const HALF = 0.5;
-
-export function linear(x0, y0, a) {
-  return {
-    y(x) {
-      return +y0 + (x - x0) * a;
-    },
-
-    x(y) {
-      return +x0 + (y - y0) / a;
-    }
-  };
-}
-
-export const deprecatedPropType = replacement => (props, propName) => {
-  if (propName in props) {
-    return new Error(`"${propName}" prop is deprecated and will be removed in 5.0. ${replacement} instead. See https://github.com/JetBrains/ring-ui/blob/master/CHANGELOG.md#310 for details`);
-  }
-  return undefined;
-};
-
 export const dateType = PropTypes.oneOfType([
-  PropTypes.instanceOf(Date),
-  PropTypes.string,
-  PropTypes.number
+    PropTypes.instanceOf(Date),
+    PropTypes.string,
+    PropTypes.number
 ]);
-
 export function parseTime(time) {
-  let result = null;
-  if (/^([01][0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
-    result = time;
-  } else if (/^([0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
-    result = `0${time}`;
-  }
-
-  return result;
+    let result = null;
+    if (/^([01][0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
+        result = time;
+    }
+    else if (/^([0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
+        result = `0${time}`;
+    }
+    return result;
 }

package/components/date-picker/date-input.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DatePopupBaseProps, Field } from './consts';
+export interface UpdateInputConfig {
+    active: boolean;
+    text: string | null;
+}
+export interface DateInputProps extends DatePopupBaseProps, UpdateInputConfig {
+    divider: boolean;
+    name: Field;
+    hoverDate: Date | null;
+    date: Date | null | undefined;
+    time?: string | null | undefined;
+    onInput: (value: string, name: Field) => void;
+    onActivate: () => void;
+    onConfirm: () => void;
+}
+export default class DateInput extends React.PureComponent<DateInputProps> {
+    static propTypes: {
+        active: PropTypes.Requireable<boolean>;
+        divider: PropTypes.Requireable<boolean>;
+        name: PropTypes.Requireable<string>;
+        text: PropTypes.Requireable<string>;
+        hoverDate: PropTypes.Requireable<string | number | Date>;
+        date: PropTypes.Requireable<string | number | Date>;
+        time: PropTypes.Requireable<string>;
+        displayFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        hidden: PropTypes.Requireable<boolean>;
+        translations: PropTypes.Requireable<object>;
+        fromPlaceholder: PropTypes.Requireable<string>;
+        toPlaceholder: PropTypes.Requireable<string>;
+        timePlaceholder: PropTypes.Requireable<string>;
+        onInput: PropTypes.Requireable<(...args: any[]) => any>;
+        onActivate: PropTypes.Requireable<(...args: any[]) => any>;
+        onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        locale: PropTypes.Requireable<object>;
+    };
+    static defaultProps: {
+        fromPlaceholder: null;
+        toPlaceholder: null;
+        timePlaceholder: null;
+        translations: {
+            addFirstDate: string;
+            addSecondDate: string;
+            addTime: string;
+            selectName: string;
+        };
+    };
+    componentDidUpdate(prevProps: DateInputProps): void;
+    input?: HTMLInputElement | null;
+    inputRef: (el: HTMLInputElement | null) => void;
+    updateInput({ text, active }: UpdateInputConfig): void;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleKeyDown: (e: React.KeyboardEvent) => false | void;
+    render(): JSX.Element;
+}

package/components/date-picker/date-input.js

@@ -1,132 +1,98 @@
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-
 import Input from '../input/input';
-
-import {dateType} from './consts';
+import { ControlsHeight } from '../global/controls-height';
+import { dateType } from './consts';
 import styles from './date-picker.css';
-
 export default class DateInput extends React.PureComponent {
-  static propTypes = {
-    active: PropTypes.bool,
-    divider: PropTypes.bool,
-    name: PropTypes.string,
-    text: PropTypes.string,
-    hoverDate: dateType,
-    date: dateType,
-    time: PropTypes.string,
-    displayFormat: PropTypes.func,
-    hidden: PropTypes.bool,
-    translations: PropTypes.object,
-    fromPlaceholder: PropTypes.string,
-    toPlaceholder: PropTypes.string,
-    timePlaceholder: PropTypes.string,
-    onInput: PropTypes.func,
-    onActivate: PropTypes.func,
-    onConfirm: PropTypes.func,
-    onClear: PropTypes.func,
-    locale: PropTypes.object
-  };
-
-  static defaultProps = {
-    fromPlaceholder: null,
-    toPlaceholder: null,
-    timePlaceholder: null,
-    translations: {
-      addFirstDate: 'Add first date',
-      addSecondDate: 'Add second date',
-      addTime: 'Add time',
-      selectName: 'Select %name%'
+    static propTypes = {
+        active: PropTypes.bool,
+        divider: PropTypes.bool,
+        name: PropTypes.string,
+        text: PropTypes.string,
+        hoverDate: dateType,
+        date: dateType,
+        time: PropTypes.string,
+        displayFormat: PropTypes.func,
+        hidden: PropTypes.bool,
+        translations: PropTypes.object,
+        fromPlaceholder: PropTypes.string,
+        toPlaceholder: PropTypes.string,
+        timePlaceholder: PropTypes.string,
+        onInput: PropTypes.func,
+        onActivate: PropTypes.func,
+        onConfirm: PropTypes.func,
+        onClear: PropTypes.func,
+        locale: PropTypes.object
+    };
+    static defaultProps = {
+        fromPlaceholder: null,
+        toPlaceholder: null,
+        timePlaceholder: null,
+        translations: {
+            addFirstDate: 'Add first date',
+            addSecondDate: 'Add second date',
+            addTime: 'Add time',
+            selectName: 'Select %name%'
+        }
+    };
+    componentDidUpdate(prevProps) {
+        const { hidden, text, active } = this.props;
+        if (!hidden && prevProps.hidden || text !== prevProps.text || active !== prevProps.active) {
+            this.updateInput({ text, active });
+        }
     }
-  };
-
-  componentDidUpdate(prevProps) {
-    const {hidden, text, active} = this.props;
-    if (!hidden && prevProps.hidden || text !== prevProps.text || active !== prevProps.active) {
-      this.updateInput({text, active});
+    input;
+    inputRef = (el) => {
+        this.input = el;
+        this.updateInput(this.props);
+    };
+    updateInput({ text, active }) {
+        const el = this.input;
+        if (!el) {
+            return;
+        }
+        if (active) {
+            el.focus();
+            if (!text) {
+                el.select();
+            }
+        }
+        else {
+            el.blur();
+        }
     }
-  }
-
-  inputRef = el => {
-    this.input = el;
-    this.updateInput(this.props);
-  };
-
-  updateInput({text, active}) {
-    const el = this.input;
-    if (!el) {
-      return;
+    handleChange = (e) => this.props.onInput(e.currentTarget.value, e.currentTarget.dataset.name);
+    handleKeyDown = (e) => e.key === 'Enter' && this.props.onConfirm();
+    render() {
+        const { active, divider, text, time, name, hoverDate, date, displayFormat, translations, onActivate, onClear, fromPlaceholder, toPlaceholder, timePlaceholder, locale } = this.props;
+        let displayText = '';
+        if (active && hoverDate) {
+            displayText = displayFormat(hoverDate, locale);
+        }
+        else if (active && text != null) {
+            displayText = text;
+        }
+        else if (date) {
+            displayText = displayFormat(date, locale);
+        }
+        else if (name === 'time') {
+            displayText = time || '';
+        }
+        const placeholder = (() => {
+            switch (name) {
+                case 'from':
+                    return fromPlaceholder || translations.addFirstDate;
+                case 'to':
+                    return toPlaceholder || translations.addSecondDate;
+                case 'time':
+                    return timePlaceholder || translations.addTime;
+                default:
+                    return translations.selectName.replace('%name%', name);
+            }
+        })();
+        const classes = classNames(styles.filter, styles[`${name}Input`], divider && styles[`${name}InputWithDivider`], 'ring-js-shortcuts');
+        return (<Input autoComplete="off" borderless height={ControlsHeight.L} data-name={name} inputRef={this.inputRef} className={classes} value={displayText} onChange={this.handleChange} onFocus={onActivate} onKeyDown={this.handleKeyDown} onClear={onClear} placeholder={placeholder}/>);
     }
-
-    if (active) {
-      el.focus();
-      if (!text) {
-        el.select();
-      }
-    } else {
-      el.blur();
-    }
-  }
-
-  handleChange = e => this.props.onInput(e.target.value, e.target.dataset.name);
-
-  handleKeyDown = e => e.key === 'Enter' && this.props.onConfirm();
-
-  render() {
-    const {
-      active, divider, text,
-      time, name, hoverDate,
-      date, displayFormat, translations,
-      onActivate, onClear,
-      fromPlaceholder, toPlaceholder, timePlaceholder, locale
-    } = this.props;
-
-    let displayText = '';
-    if (active && hoverDate) {
-      displayText = displayFormat(hoverDate, locale);
-    } else if (active && text != null) {
-      displayText = text;
-    } else if (date) {
-      displayText = displayFormat(date, locale);
-    } else if (name === 'time') {
-      displayText = time || '';
-    }
-
-    const placeholder = (() => {
-      switch (name) {
-        case 'from':
-          return fromPlaceholder || translations.addFirstDate;
-        case 'to':
-          return toPlaceholder || translations.addSecondDate;
-        case 'time':
-          return timePlaceholder || translations.addTime;
-        default:
-          return translations.selectName.replace('%name%', name);
-      }
-    })();
-
-    const classes = classNames(
-      styles.filter,
-      styles[`${name}Input`],
-      divider && styles[`${name}InputWithDivider`],
-      'ring-js-shortcuts'
-    );
-
-    return (
-      <Input
-        autoComplete="off"
-        borderless
-        data-name={name}
-        inputRef={this.inputRef}
-        className={classes}
-        value={displayText}
-        onChange={this.handleChange}
-        onFocus={onActivate}
-        onKeyDown={this.handleKeyDown}
-        onClear={onClear}
-        placeholder={placeholder}
-      />
-    );
-  }
 }

package/components/date-picker/date-picker.css

@@ -94,6 +94,7 @@
 .fromInputWithDivider {
   &::after {
     position: absolute;
+    top: 0;
     right: unit;
 
     content: "—";
@@ -243,7 +244,7 @@
 }
 
 .current.current {
-  color: var(--ring-dark-text-color);
+  color: var(--ring-white-text-color);
   border-radius: var(--ring-border-radius);
   background-color: var(--ring-main-color);
 }

package/components/date-picker/date-picker.d.ts

@@ -0,0 +1,70 @@
+import { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import type { Locale } from 'date-fns';
+import Popup from '../popup/popup';
+import { DropdownAttrs } from '../dropdown/dropdown';
+import { DatePopupProps } from './date-popup';
+import { DateInputTranslations, DatePickerChange } from './consts';
+export interface DatePickerTranslations extends Partial<DateInputTranslations> {
+    setDate: string;
+    setDateTime: string;
+    setPeriod: string;
+}
+export declare type DatePickerProps = Omit<DatePopupProps, 'translations' | 'parseDateInput' | 'onComplete' | 'hidden'> & {
+    className: string;
+    clear: boolean;
+    popupClassName?: string | null | undefined;
+    dropdownProps?: DropdownAttrs;
+    translations: DatePickerTranslations;
+    displayMonthFormat: (date: Date, locale: Locale | undefined) => string;
+    displayDayFormat: (date: Date, locale: Locale | undefined) => string;
+    displayTimeFormat: (date: Date, locale: Locale | undefined) => string;
+    applyTimeInput: (date: Date, time: string | null | undefined) => Date;
+    datePlaceholder: string;
+    dateTimePlaceholder: string;
+    rangePlaceholder: string;
+    disabled?: boolean | null | undefined;
+    parseDateInput: (input: string | null | undefined) => Date | null;
+};
+/**
+ * @name Date Picker
+ */
+export default class DatePicker extends PureComponent<DatePickerProps> {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        popupClassName: PropTypes.Requireable<string>;
+        date: PropTypes.Requireable<string | number | Date>;
+        withTime: PropTypes.Requireable<boolean>;
+        range: PropTypes.Requireable<boolean>;
+        from: PropTypes.Requireable<string | number | Date>;
+        to: PropTypes.Requireable<string | number | Date>;
+        clear: PropTypes.Requireable<boolean>;
+        displayFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        displayMonthFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        displayDayFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        displayTimeFormat: PropTypes.Requireable<(...args: any[]) => any>;
+        parseDateInput: PropTypes.Requireable<(...args: any[]) => any>;
+        applyTimeInput: PropTypes.Requireable<(...args: any[]) => any>;
+        datePlaceholder: PropTypes.Requireable<string>;
+        dateTimePlaceholder: PropTypes.Requireable<string>;
+        rangePlaceholder: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        dropdownProps: PropTypes.Requireable<object>;
+        disabled: PropTypes.Requireable<boolean>;
+        minDate: PropTypes.Requireable<string | number | Date>;
+        maxDate: PropTypes.Requireable<string | number | Date>;
+        translations: PropTypes.Requireable<object>;
+        locale: PropTypes.Requireable<object>;
+    };
+    static defaultProps: DatePickerProps;
+    handleChange: (change: DatePickerChange | Date | null | undefined) => void;
+    clear: () => void;
+    popup?: Popup | null;
+    popupRef: (el: Popup | null) => void;
+    closePopup: () => void;
+    parse: (arg: string | number | Date | null | undefined) => Date | null;
+    formatTime(): string | null;
+    getAnchorText: () => string;
+    render(): JSX.Element;
+}
+export declare type DatePickerAttrs = JSX.LibraryManagedAttributes<typeof DatePicker, DatePickerProps>;