@skbkontur/react-ui 0.0.0-b0853da840 → 0.0.0-b08da15166

package/cjs/components/DateInput/DateInput.js

@@ -0,0 +1,442 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.DateInput = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+
+var _ConditionalHandler = require("../../lib/ConditionalHandler");
+var _constants = require("../../lib/date/constants");
+var _types = require("../../lib/date/types");
+
+var _locale = require("../DatePicker/locale");
+var _InputLikeText = require("../../internal/InputLikeText");
+var _decorators = require("../../lib/locale/decorators");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _px = require("../../internal/icons/16px");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNode = require("../../lib/rootNode");
+
+var _DateFragmentsView = require("./DateFragmentsView");
+var _DateInput = require("./DateInput.styles");
+var _DateInputKeyboardActions = require("./helpers/DateInputKeyboardActions");
+var _InternalDateMediator = require("./helpers/InternalDateMediator");var _dec, _class, _class2, _temp;var
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+DateInput = (_dec = (0, _decorators.locale)('DatePicker', _locale.DatePickerLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(DateInput, _React$Component);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  function DateInput(props) {var _this;
+    _this = _React$Component.call(this, props) || this;_this.iDateMediator = new _InternalDateMediator.InternalDateMediator();_this.inputLikeText = null;_this.dateFragmentsView = null;_this.isMouseDown = false;_this.isMouseFocus = false;_this.ignoringDelimiter = false;_this.blurEvent = null;_this.conditionalHandler = new _ConditionalHandler.ConditionalHandler().add(_DateInputKeyboardActions.Actions.MoveSelectionLeft, function () {return _this.shiftSelection(-1);}).add(_DateInputKeyboardActions.Actions.MoveSelectionRight, function () {return _this.shiftSelection(1);}).add(_DateInputKeyboardActions.Actions.Separator, function () {return _this.pressDelimiter();}).add(_DateInputKeyboardActions.Actions.MoveSelectionFirst, function () {return _this.selectDateComponent(_this.iDateMediator.getLeftmostType());}).add(_DateInputKeyboardActions.Actions.MoveSelectionLast, function () {return _this.selectDateComponent(_this.iDateMediator.getRightmostType());}).add(_DateInputKeyboardActions.Actions.Increment, function () {return _this.shiftDateComponent(1);}).add(_DateInputKeyboardActions.Actions.Decrement, function () {return _this.shiftDateComponent(-1);}).add(_DateInputKeyboardActions.Actions.Digit, function (e) {return _this.inputValue(e);}).add(_DateInputKeyboardActions.Actions.ClearSelection, function () {return _this.clearSelected();}).add(_DateInputKeyboardActions.Actions.ClearOneChar, function () {return _this.clearOneChar();}).add(_DateInputKeyboardActions.Actions.FullSelection, function () {return _this.fullSelection();}).add(_DateInputKeyboardActions.Actions.WrongInput, function () {return _this.blink();}).build();_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    selectNode = function () {
+      var type = _this.state.selected;
+      var dateFragmentsView = _this.dateFragmentsView && _this.dateFragmentsView.getRootNode();
+      if (type === null || !_this.inputLikeText || !dateFragmentsView) {
+        return;
+      }
+      if (type === _types.InternalDateComponentType.All) {
+        _this.inputLikeText.selectInnerNode(dateFragmentsView, 0, 5);
+        return;
+      }
+      var index = _this.iDateMediator.getTypesOrder().indexOf(type);
+      if (index > -1) {
+        _this.inputLikeText.selectInnerNode(dateFragmentsView, index * 2, index * 2 + 1);
+      }
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    renderIcon = function () {
+      var _this$props = _this.props,withIcon = _this$props.withIcon,size = _this$props.size,_this$props$disabled = _this$props.disabled,disabled = _this$props$disabled === void 0 ? false : _this$props$disabled;
+
+      if (withIcon) {var _cx;
+        var theme = _this.theme;
+        var iconStyles = (0, _Emotion.cx)((_cx = {}, _cx[
+        _DateInput.styles.icon(theme)] = true, _cx[
+        _DateInput.styles.iconSmall(theme)] = size === 'small', _cx[
+        _DateInput.styles.iconMedium(theme)] = size === 'medium', _cx[
+        _DateInput.styles.iconLarge(theme)] = size === 'large', _cx[
+        _DateInput.styles.iconDisabled(theme)] = disabled, _cx));
+
+        return /*#__PURE__*/(
+          _react.default.createElement("span", { className: iconStyles }, /*#__PURE__*/
+          _react.default.createElement(_px.CalendarIcon, null)));
+
+
+      }
+      return null;
+    };_this.
+
+    handleFocus = function (e) {
+      _this.setState(function (prevState) {return {
+          focused: true,
+          selected: _this.isMouseDown && !prevState.focused ? prevState.selected : _this.iDateMediator.getLeftmostType() };});
+
+
+      if (_this.props.onFocus) {
+        _this.props.onFocus(e);
+      }
+    };_this.
+
+    handleBlur = function (e) {
+      var restored = _this.iDateMediator.restore();
+      _this.updateValue({ focused: false, selected: null, inputMode: false });
+
+      if (_this.props.onBlur) {
+        if (restored) {
+          e.persist();
+          _this.blurEvent = e;
+        } else {
+          _this.props.onBlur(e);
+        }
+      }
+    };_this.
+
+    handleMouseDownCapture = function (e) {
+      var isFragment = _this.dateFragmentsView ? _this.dateFragmentsView.isFragment(e.target) : false;
+      if (_this.state.focused && !isFragment) {
+        e.preventDefault();
+      }
+      _this.isMouseFocus = !_this.state.focused;
+      _this.isMouseDown = isFragment;
+    };_this.
+
+    handleSelectDateComponent = function (type) {
+      if (!(_this.isMouseFocus && _this.iDateMediator.isEmpty())) {
+        _this.selectDateComponent(type);
+      }
+      _this.isMouseFocus = false;
+      _this.isMouseDown = false;
+    };_this.
+
+    handleMouseDragStart = function () {
+      _this.setState({ dragged: true, selected: null });
+    };_this.
+
+    handleMouseDragEnd = function () {
+      var selection = getSelection();
+      if (
+      selection &&
+      selection.toString().length === _constants.LENGTH_FULLDATE &&
+      _this.state.selected !== _types.InternalDateComponentType.All)
+      {
+        _this.selectDateComponent(_types.InternalDateComponentType.All);
+      }
+    };_this.
+
+    handleKeyDown = function (e) {
+      if (_this.conditionalHandler((0, _DateInputKeyboardActions.extractAction)(e), e)) {
+        e.preventDefault();
+      }
+      if (_this.props.onKeyDown) {
+        _this.props.onKeyDown(e);
+      }
+    };_this.
+
+    handlePaste = function (e) {
+      var pasted = e && e.clipboardData.getData('text').trim();
+      if (pasted && _this.iDateMediator.validateString(pasted)) {
+        _this.iDateMediator.paste(pasted);
+        _this.updateValue();
+      }
+    };_this.
+
+    handleDoubleClick = function () {
+      _this.selectDateComponent(_types.InternalDateComponentType.All);
+    };_this.
+
+    inputLikeTextRef = function (el) {
+      _this.inputLikeText = el;
+    };_this.
+
+    dateFragmentsViewRef = function (el) {
+      _this.dateFragmentsView = el;
+    };_this.
+
+    selectDateComponent = function (selected) {
+      _this.setState({ selected: selected, inputMode: false });
+    };_this.
+
+    updateValue = function (state) {if (state === void 0) {state = {};}
+      var valueFormatted = _this.iDateMediator.getString();
+
+      _this.setState((0, _extends2.default)({}, state, { valueFormatted: valueFormatted }), _this.emitChange);
+    };_this.
+
+    updateFromProps = function () {
+      _this.iDateMediator.update(_this.props, _this.locale);
+
+      _this.updateValue();
+    };_this.
+
+    fullSelection = function () {
+      _this.selectDateComponent(_types.InternalDateComponentType.All);
+    };_this.
+
+    pressDelimiter = function () {
+      var value = _this.iDateMediator.get(_this.state.selected);
+      if (value !== null && value !== '') {
+        if (!_this.ignoringDelimiter) {
+          _this.shiftSelection(1);
+        }
+        _this.ignoringDelimiter = false;
+      }
+    };_this.
+
+    emitChange = function () {
+      var value = _this.iDateMediator.getInternalString();
+      if (_this.props.value === value) {
+        return;
+      }
+      if (_this.props.onValueChange) {
+        _this.props.onValueChange(value);
+      }
+      if (_this.blurEvent && _this.props.onBlur) {
+        _this.props.onBlur(_this.blurEvent);
+        _this.blurEvent = null;
+      }
+    };_this.
+
+    clearSelected = function () {
+      var selected = _this.state.selected === null ? _this.iDateMediator.getLeftmostType() : _this.state.selected;
+      _this.iDateMediator.clear(selected);
+      _this.updateValue({
+        inputMode: false,
+        selected: selected === _types.InternalDateComponentType.All ? _this.iDateMediator.getLeftmostType() : selected });
+
+    };_this.
+
+    clearOneChar = function () {
+      var _this$state = _this.state,selected = _this$state.selected,inputMode = _this$state.inputMode;
+      var nextType = selected === null ? _this.iDateMediator.getRightmostType() : selected;
+      if (_this.iDateMediator.isNull(nextType)) {
+        _this.shiftSelection(-1);
+        return;
+      }
+      if (selected === _types.InternalDateComponentType.All) {
+        _this.iDateMediator.clear(_types.InternalDateComponentType.All);
+        _this.updateValue({ selected: _this.iDateMediator.getLeftmostType() });
+        return;
+      }
+      _this.iDateMediator.deleteOneCharRight(nextType, inputMode);
+      _this.updateValue({
+        inputMode: _this.iDateMediator.get(nextType) !== null,
+        selected: nextType });
+
+    };_this.
+
+    shiftDateComponent = function (step) {
+      var selected = _this.state.selected;
+      var changed = _this.iDateMediator.shiftDateComponent(selected, step);
+      if (!changed) {
+        _this.blink();
+        return;
+      }
+      _this.updateValue({
+        inputMode: false,
+        selected: selected === _types.InternalDateComponentType.All ? _this.iDateMediator.getLeftmostType() : selected });
+
+    };_this.
+
+    shiftSelection = function (step) {
+      var selected = _this.iDateMediator.getShiftedType(_this.state.selected, step);
+      if (selected !== _this.state.selected) {
+        _this.setState({ selected: selected, inputMode: false });
+      }
+    };_this.
+
+    inputValue = function (event) {
+      var selected = _this.state.selected;
+      if (selected === _types.InternalDateComponentType.All) {
+        selected = _this.iDateMediator.getLeftmostType();
+        _this.iDateMediator.clear(_types.InternalDateComponentType.All);
+        _this.setState({ selected: selected });
+      }
+      var inputMode = _this.iDateMediator.inputKey(event.key, selected, _this.state.inputMode);
+
+      if (!inputMode) {
+        _this.ignoringDelimiter = true;
+        _this.shiftSelection(1);
+      }
+      _this.updateValue({ inputMode: inputMode });
+    };_this.state = { valueFormatted: '', selected: null, inputMode: false, focused: false, dragged: false };return _this;}var _proto = DateInput.prototype;_proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {if (prevProps.value !== this.props.value || prevProps.minDate !== this.props.minDate || prevProps.maxDate !== this.props.maxDate || this.iDateMediator.isChangedLocale(this.locale)) {this.updateFromProps();}this.selectNode();};_proto.componentDidMount = function componentDidMount() {this.updateFromProps();if (this.props.autoFocus) {this.focus();}};_proto.blur = function blur() {if (this.inputLikeText) {this.inputLikeText.blur();}};_proto.focus = function focus() {if (this.inputLikeText) {this.inputLikeText.focus();}};_proto.blink = function blink() {if (this.inputLikeText) {this.inputLikeText.blink();}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx2;var _this$state2 = this.state,focused = _this$state2.focused,selected = _this$state2.selected,inputMode = _this$state2.inputMode,valueFormatted = _this$state2.valueFormatted;var showValue = Boolean(focused || valueFormatted);return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_InputLikeText.InputLikeText, { width: this.props.width, ref: this.inputLikeTextRef, size: this.props.size, disabled: this.props.disabled, error: this.props.error, warning: this.props.warning, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.props.onClick, onKeyDown: this.handleKeyDown, onMouseDownCapture: this.handleMouseDownCapture, onPaste: this.handlePaste, rightIcon: this.renderIcon(), onDoubleClickCapture: this.handleDoubleClick, onMouseDragStart: this.handleMouseDragStart, onMouseDragEnd: this.handleMouseDragEnd, value: this.iDateMediator.getInternalString(), inputMode: 'numeric', takeContentWidth: true }, /*#__PURE__*/_react.default.createElement("span", { className: (0, _Emotion.cx)(_DateInput.styles.value(), (_cx2 = {}, _cx2[_DateInput.styles.valueVisible()] = showValue, _cx2)) }, /*#__PURE__*/_react.default.createElement(_DateFragmentsView.DateFragmentsView, { ref: this.dateFragmentsViewRef, fragments: this.iDateMediator.getFragments(), onSelectDateComponent: this.handleSelectDateComponent, selected: selected, inputMode: inputMode }))));};return DateInput;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'DateInput', _class2.defaultProps = { value: '', minDate: _constants.MIN_FULLDATE, maxDate: _constants.MAX_FULLDATE, size: 'small', width: 125 }, _temp)) || _class) || _class);exports.DateInput = DateInput;

package/cjs/components/DateInput/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DateInput.tsx"],"names":["DateInput","DatePickerLocaleHelper","rootNode","props","iDateMediator","InternalDateMediator","inputLikeText","dateFragmentsView","isMouseDown","isMouseFocus","ignoringDelimiter","blurEvent","conditionalHandler","ConditionalHandler","add","Actions","MoveSelectionLeft","shiftSelection","MoveSelectionRight","Separator","pressDelimiter","MoveSelectionFirst","selectDateComponent","getLeftmostType","MoveSelectionLast","getRightmostType","Increment","shiftDateComponent","Decrement","Digit","e","inputValue","ClearSelection","clearSelected","ClearOneChar","clearOneChar","FullSelection","fullSelection","WrongInput","blink","build","selectNode","type","state","selected","getRootNode","InternalDateComponentType","All","selectInnerNode","index","getTypesOrder","indexOf","renderIcon","withIcon","size","disabled","theme","iconStyles","styles","icon","iconSmall","iconMedium","iconLarge","iconDisabled","handleFocus","setState","prevState","focused","onFocus","handleBlur","restored","restore","updateValue","inputMode","onBlur","persist","handleMouseDownCapture","isFragment","target","preventDefault","handleSelectDateComponent","isEmpty","handleMouseDragStart","dragged","handleMouseDragEnd","selection","getSelection","toString","length","LENGTH_FULLDATE","handleKeyDown","onKeyDown","handlePaste","pasted","clipboardData","getData","trim","validateString","paste","handleDoubleClick","inputLikeTextRef","el","dateFragmentsViewRef","valueFormatted","getString","emitChange","updateFromProps","update","locale","value","get","getInternalString","onValueChange","clear","nextType","isNull","deleteOneCharRight","step","changed","getShiftedType","event","inputKey","key","componentDidUpdate","prevProps","minDate","maxDate","isChangedLocale","componentDidMount","autoFocus","focus","blur","render","renderMain","showValue","Boolean","setRootNode","width","error","warning","onClick","valueVisible","getFragments","React","Component","__KONTUR_REACT_UI__","defaultProps","MIN_FULLDATE","MAX_FULLDATE"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ConditionalHandler } from '../../lib/ConditionalHandler';\nimport { LENGTH_FULLDATE, MAX_FULLDATE, MIN_FULLDATE } from '../../lib/date/constants';\nimport { InternalDateComponentType } from '../../lib/date/types';\nimport { Theme } from '../../lib/theming/Theme';\nimport { DatePickerLocale, DatePickerLocaleHelper } from '../DatePicker/locale';\nimport { InputLikeText } from '../../internal/InputLikeText';\nimport { locale } from '../../lib/locale/decorators';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CalendarIcon } from '../../internal/icons/16px';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { DateFragmentsView } from './DateFragmentsView';\nimport { styles } from './DateInput.styles';\nimport { Actions, extractAction } from './helpers/DateInputKeyboardActions';\nimport { InternalDateMediator } from './helpers/InternalDateMediator';\n\nexport interface DateInputState {\n  selected: InternalDateComponentType | null;\n  valueFormatted: string;\n  inputMode: boolean;\n  focused: boolean;\n  dragged: boolean;\n}\n\nexport interface DateInputProps extends CommonProps {\n  autoFocus?: boolean;\n  value: string;\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n  disabled?: boolean;\n  /**\n   * Минимальная дата.\n   * @default '01.01.1900'\n   */\n  minDate: string;\n  /**\n   * Максимальная дата\n   * @default '31.12.2099'\n   */\n  maxDate: string;\n  /**\n   * Ширина поля\n   * @default 125\n   */\n  width?: string | number;\n  withIcon?: boolean;\n  /**\n   * Размер поля\n   * @default 'small'\n   */\n  size: 'small' | 'large' | 'medium';\n  onBlur?: (x0: React.FocusEvent<HTMLElement>) => void;\n  onClick?: (x0: React.MouseEvent<HTMLElement>) => void;\n  onFocus?: (x0: React.FocusEvent<HTMLElement>) => void;\n  /**\n   * Вызывается при изменении `value`\n   *\n   * @param value - строка в формате `dd.mm.yyyy`.\n   */\n  onValueChange?: (value: string) => void;\n  onKeyDown?: (x0: React.KeyboardEvent<HTMLElement>) => void;\n}\n\n@rootNode\n@locale('DatePicker', DatePickerLocaleHelper)\nexport class DateInput extends React.Component<DateInputProps, DateInputState> {\n  public static __KONTUR_REACT_UI__ = 'DateInput';\n\n  public static defaultProps = {\n    value: '',\n    minDate: MIN_FULLDATE,\n    maxDate: MAX_FULLDATE,\n    size: 'small',\n    width: 125,\n  };\n\n  private iDateMediator: InternalDateMediator = new InternalDateMediator();\n  private inputLikeText: InputLikeText | null = null;\n  private dateFragmentsView: DateFragmentsView | null = null;\n  private isMouseDown = false;\n  private isMouseFocus = false;\n  private ignoringDelimiter = false;\n  private locale!: DatePickerLocale;\n  private blurEvent: React.FocusEvent<HTMLElement> | null = null;\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n  private conditionalHandler = new ConditionalHandler<Actions, [React.KeyboardEvent<HTMLElement>]>()\n    .add(Actions.MoveSelectionLeft, () => this.shiftSelection(-1))\n    .add(Actions.MoveSelectionRight, () => this.shiftSelection(1))\n    .add(Actions.Separator, () => this.pressDelimiter())\n    .add(Actions.MoveSelectionFirst, () => this.selectDateComponent(this.iDateMediator.getLeftmostType()))\n    .add(Actions.MoveSelectionLast, () => this.selectDateComponent(this.iDateMediator.getRightmostType()))\n    .add(Actions.Increment, () => this.shiftDateComponent(1))\n    .add(Actions.Decrement, () => this.shiftDateComponent(-1))\n    .add(Actions.Digit, (e) => this.inputValue(e))\n    .add(Actions.ClearSelection, () => this.clearSelected())\n    .add(Actions.ClearOneChar, () => this.clearOneChar())\n    .add(Actions.FullSelection, () => this.fullSelection())\n    .add(Actions.WrongInput, () => this.blink())\n    .build();\n\n  constructor(props: DateInputProps) {\n    super(props);\n\n    this.state = {\n      valueFormatted: '',\n      selected: null,\n      inputMode: false,\n      focused: false,\n      dragged: false,\n    };\n  }\n\n  public componentDidUpdate(prevProps: DateInputProps, prevState: DateInputState) {\n    if (\n      prevProps.value !== this.props.value ||\n      prevProps.minDate !== this.props.minDate ||\n      prevProps.maxDate !== this.props.maxDate ||\n      this.iDateMediator.isChangedLocale(this.locale)\n    ) {\n      this.updateFromProps();\n    }\n    this.selectNode();\n  }\n\n  public selectNode = () => {\n    const type = this.state.selected;\n    const dateFragmentsView = this.dateFragmentsView && this.dateFragmentsView.getRootNode();\n    if (type === null || !this.inputLikeText || !dateFragmentsView) {\n      return;\n    }\n    if (type === InternalDateComponentType.All) {\n      this.inputLikeText.selectInnerNode(dateFragmentsView, 0, 5);\n      return;\n    }\n    const index = this.iDateMediator.getTypesOrder().indexOf(type);\n    if (index > -1) {\n      this.inputLikeText.selectInnerNode(dateFragmentsView, index * 2, index * 2 + 1);\n    }\n  };\n\n  public componentDidMount(): void {\n    this.updateFromProps();\n    if (this.props.autoFocus) {\n      this.focus();\n    }\n  }\n\n  public blur() {\n    if (this.inputLikeText) {\n      this.inputLikeText.blur();\n    }\n  }\n\n  public focus() {\n    if (this.inputLikeText) {\n      this.inputLikeText.focus();\n    }\n  }\n\n  public blink() {\n    if (this.inputLikeText) {\n      this.inputLikeText.blink();\n    }\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { focused, selected, inputMode, valueFormatted } = this.state;\n    const showValue = Boolean(focused || valueFormatted);\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <InputLikeText\n          width={this.props.width}\n          ref={this.inputLikeTextRef}\n          size={this.props.size}\n          disabled={this.props.disabled}\n          error={this.props.error}\n          warning={this.props.warning}\n          onBlur={this.handleBlur}\n          onFocus={this.handleFocus}\n          onClick={this.props.onClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseDownCapture={this.handleMouseDownCapture}\n          onPaste={this.handlePaste}\n          rightIcon={this.renderIcon()}\n          onDoubleClickCapture={this.handleDoubleClick}\n          onMouseDragStart={this.handleMouseDragStart}\n          onMouseDragEnd={this.handleMouseDragEnd}\n          value={this.iDateMediator.getInternalString()}\n          inputMode={'numeric'}\n          takeContentWidth\n        >\n          <span className={cx(styles.value(), { [styles.valueVisible()]: showValue })}>\n            <DateFragmentsView\n              ref={this.dateFragmentsViewRef}\n              fragments={this.iDateMediator.getFragments()}\n              onSelectDateComponent={this.handleSelectDateComponent}\n              selected={selected}\n              inputMode={inputMode}\n            />\n          </span>\n        </InputLikeText>\n      </CommonWrapper>\n    );\n  }\n\n  private renderIcon = () => {\n    const { withIcon, size, disabled = false } = this.props;\n\n    if (withIcon) {\n      const theme = this.theme;\n      const iconStyles = cx({\n        [styles.icon(theme)]: true,\n        [styles.iconSmall(theme)]: size === 'small',\n        [styles.iconMedium(theme)]: size === 'medium',\n        [styles.iconLarge(theme)]: size === 'large',\n        [styles.iconDisabled(theme)]: disabled,\n      });\n      return (\n        <span className={iconStyles}>\n          <CalendarIcon />\n        </span>\n      );\n    }\n    return null;\n  };\n\n  private handleFocus = (e: React.FocusEvent<HTMLElement>) => {\n    this.setState((prevState) => ({\n      focused: true,\n      selected: this.isMouseDown && !prevState.focused ? prevState.selected : this.iDateMediator.getLeftmostType(),\n    }));\n\n    if (this.props.onFocus) {\n      this.props.onFocus(e);\n    }\n  };\n\n  private handleBlur = (e: React.FocusEvent<HTMLElement>) => {\n    const restored = this.iDateMediator.restore();\n    this.updateValue({ focused: false, selected: null, inputMode: false });\n\n    if (this.props.onBlur) {\n      if (restored) {\n        e.persist();\n        this.blurEvent = e;\n      } else {\n        this.props.onBlur(e);\n      }\n    }\n  };\n\n  private handleMouseDownCapture = (e: React.MouseEvent<HTMLSpanElement>) => {\n    const isFragment = this.dateFragmentsView ? this.dateFragmentsView.isFragment(e.target) : false;\n    if (this.state.focused && !isFragment) {\n      e.preventDefault();\n    }\n    this.isMouseFocus = !this.state.focused;\n    this.isMouseDown = isFragment;\n  };\n\n  private handleSelectDateComponent = (type: InternalDateComponentType) => {\n    if (!(this.isMouseFocus && this.iDateMediator.isEmpty())) {\n      this.selectDateComponent(type);\n    }\n    this.isMouseFocus = false;\n    this.isMouseDown = false;\n  };\n\n  private handleMouseDragStart = () => {\n    this.setState({ dragged: true, selected: null });\n  };\n\n  private handleMouseDragEnd = () => {\n    const selection = getSelection();\n    if (\n      selection &&\n      selection.toString().length === LENGTH_FULLDATE &&\n      this.state.selected !== InternalDateComponentType.All\n    ) {\n      this.selectDateComponent(InternalDateComponentType.All);\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (this.conditionalHandler(extractAction(e), e)) {\n      e.preventDefault();\n    }\n    if (this.props.onKeyDown) {\n      this.props.onKeyDown(e);\n    }\n  };\n\n  private handlePaste = (e: React.ClipboardEvent<HTMLElement>) => {\n    const pasted = e && e.clipboardData.getData('text').trim();\n    if (pasted && this.iDateMediator.validateString(pasted)) {\n      this.iDateMediator.paste(pasted);\n      this.updateValue();\n    }\n  };\n\n  private handleDoubleClick = () => {\n    this.selectDateComponent(InternalDateComponentType.All);\n  };\n\n  private inputLikeTextRef = (el: InputLikeText | null) => {\n    this.inputLikeText = el;\n  };\n\n  private dateFragmentsViewRef = (el: DateFragmentsView | null) => {\n    this.dateFragmentsView = el;\n  };\n\n  private selectDateComponent = (selected: InternalDateComponentType | null): void => {\n    this.setState({ selected, inputMode: false });\n  };\n\n  private updateValue = (state: Partial<DateInputState> = {}): void => {\n    const valueFormatted = this.iDateMediator.getString();\n\n    this.setState({ ...state, valueFormatted } as DateInputState, this.emitChange);\n  };\n\n  private updateFromProps = (): void => {\n    this.iDateMediator.update(this.props, this.locale);\n\n    this.updateValue();\n  };\n\n  private fullSelection = (): void => {\n    this.selectDateComponent(InternalDateComponentType.All);\n  };\n\n  private pressDelimiter = (): void => {\n    const value = this.iDateMediator.get(this.state.selected);\n    if (value !== null && value !== '') {\n      if (!this.ignoringDelimiter) {\n        this.shiftSelection(1);\n      }\n      this.ignoringDelimiter = false;\n    }\n  };\n\n  private emitChange = (): void => {\n    const value = this.iDateMediator.getInternalString();\n    if (this.props.value === value) {\n      return;\n    }\n    if (this.props.onValueChange) {\n      this.props.onValueChange(value);\n    }\n    if (this.blurEvent && this.props.onBlur) {\n      this.props.onBlur(this.blurEvent);\n      this.blurEvent = null;\n    }\n  };\n\n  private clearSelected = (): void => {\n    const selected = this.state.selected === null ? this.iDateMediator.getLeftmostType() : this.state.selected;\n    this.iDateMediator.clear(selected);\n    this.updateValue({\n      inputMode: false,\n      selected: selected === InternalDateComponentType.All ? this.iDateMediator.getLeftmostType() : selected,\n    });\n  };\n\n  private clearOneChar = (): void => {\n    const { selected, inputMode } = this.state;\n    const nextType = selected === null ? this.iDateMediator.getRightmostType() : selected;\n    if (this.iDateMediator.isNull(nextType)) {\n      this.shiftSelection(-1);\n      return;\n    }\n    if (selected === InternalDateComponentType.All) {\n      this.iDateMediator.clear(InternalDateComponentType.All);\n      this.updateValue({ selected: this.iDateMediator.getLeftmostType() });\n      return;\n    }\n    this.iDateMediator.deleteOneCharRight(nextType, inputMode);\n    this.updateValue({\n      inputMode: this.iDateMediator.get(nextType) !== null,\n      selected: nextType,\n    });\n  };\n\n  private shiftDateComponent = (step: number): void => {\n    const { selected } = this.state;\n    const changed = this.iDateMediator.shiftDateComponent(selected, step);\n    if (!changed) {\n      this.blink();\n      return;\n    }\n    this.updateValue({\n      inputMode: false,\n      selected: selected === InternalDateComponentType.All ? this.iDateMediator.getLeftmostType() : selected,\n    });\n  };\n\n  private shiftSelection = (step: number): void => {\n    const selected = this.iDateMediator.getShiftedType(this.state.selected, step);\n    if (selected !== this.state.selected) {\n      this.setState({ selected, inputMode: false });\n    }\n  };\n\n  private inputValue = (event: React.KeyboardEvent<HTMLElement>): void => {\n    let selected = this.state.selected;\n    if (selected === InternalDateComponentType.All) {\n      selected = this.iDateMediator.getLeftmostType();\n      this.iDateMediator.clear(InternalDateComponentType.All);\n      this.setState({ selected });\n    }\n    const inputMode = this.iDateMediator.inputKey(event.key, selected, this.state.inputMode);\n\n    if (!inputMode) {\n      this.ignoringDelimiter = true;\n      this.shiftSelection(1);\n    }\n    this.updateValue({ inputMode });\n  };\n}\n"]}

package/cjs/components/DateInput/DateInput.md

@@ -0,0 +1,106 @@
+```jsx harmony
+<DateInput value="27.04.1992" />
+```
+
+```jsx harmony
+const [value, setValue] = React.useState();
+
+<DateInput value={value} onValueChange={setValue} />
+```
+
+```jsx harmony
+<DateInput disabled value="27.04.1992" />
+```
+
+### Форматирование даты при смене локали
+
+```jsx harmony
+import { Gapped, LangCodes, LocaleContext, Select } from '@skbkontur/react-ui';
+
+class DateInputFormatting2 extends React.Component {
+  constructor() {
+    this.state = {
+      langCode: LangCodes.ru_RU,
+      value: '21.12.2012',
+    };
+  }
+
+  render() {
+    return (
+      <Gapped vertical gap={10}>
+        <div>
+          <span style={{ width: '300px', display: 'inline-block' }}>
+            Локаль (<tt>LangCodes</tt>)
+          </span>
+          <Select
+            value={this.state.langCode}
+            placeholder="Выбрать язык"
+            items={Object.values(LangCodes)}
+            onValueChange={langCode => this.setState({ langCode })}
+          />
+        </div>
+        <LocaleContext.Provider value={{ langCode: this.state.langCode }}>
+          <DateInput onValueChange={value => this.setState({ value })} value={this.state.value} />
+        </LocaleContext.Provider>
+      </Gapped>
+    );
+  }
+}
+
+<DateInputFormatting2 />;
+```
+
+### Ручное форматирование даты
+
+```jsx harmony
+import { DateOrder, DateSeparator, Gapped, LocaleContext, Select } from '@skbkontur/react-ui';
+
+class DateInputFormatting extends React.Component {
+  constructor() {
+    this.state = {
+      order: DateOrder.YMD,
+      separator: 'Dot',
+      value: '21.12.2012',
+    };
+  }
+
+  render() {
+    return (
+      <Gapped vertical gap={10}>
+        <div>
+          <span style={{ width: '300px', display: 'inline-block' }}>
+            Порядок компонентов (<tt>DateOrder</tt>)
+          </span>
+          <Select
+            value={this.state.order}
+            items={Object.keys(DateOrder)}
+            onValueChange={order => this.setState({ order })}
+          />
+        </div>
+        <div>
+          <span style={{ width: '300px', display: 'inline-block' }}>
+            Разделитель (<tt>DateSeparator</tt>)
+          </span>
+          <Select
+            value={this.state.separator}
+            items={Object.keys(DateSeparator)}
+            onValueChange={separator => this.setState({ separator })}
+          />
+        </div>
+        <LocaleContext.Provider value={{
+          locale:{
+            DatePicker: {
+              separator: DateSeparator[this.state.separator],
+              order: this.state.order,
+            },
+          }}}
+        >
+          <DateInput onValueChange={value => this.setState({ value })} value={this.state.value} />
+        </LocaleContext.Provider>
+      </Gapped>
+    );
+  }
+}
+
+<DateInputFormatting />;
+```

package/cjs/components/DateInput/DateInput.styles.d.ts

@@ -0,0 +1,10 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    icon(t: Theme): string;
+    iconSmall(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconLarge(t: Theme): string;
+    iconDisabled(t: Theme): string;
+    value(): string;
+    valueVisible(): string;
+};

package/cjs/components/DateInput/DateInput.styles.js

@@ -0,0 +1,47 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+
+var styles = {
+  icon: function icon(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: pointer;\n      color: ", ";\n    "])),
+
+    t.dateInputIconColor);
+
+  },
+
+  iconSmall: function iconSmall(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      font-size: ", ";\n    "])),
+    t.inputFontSizeSmall);
+
+  },
+
+  iconMedium: function iconMedium(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      font-size: ", ";\n    "])),
+    t.inputFontSizeMedium);
+
+  },
+
+  iconLarge: function iconLarge(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      font-size: ", ";\n    "])),
+    t.inputFontSizeLarge);
+
+  },
+
+  iconDisabled: function iconDisabled(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: default;\n      color: ", ";\n    "])),
+
+    t.textColorDisabled);
+
+  },
+
+  value: function value() {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      visibility: hidden;\n    "])));
+
+
+  },
+
+  valueVisible: function valueVisible() {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      visibility: visible;\n    "])));
+
+
+  } };exports.styles = styles;

package/cjs/components/DateInput/DateInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DateInput.styles.ts"],"names":["styles","icon","t","css","dateInputIconColor","iconSmall","inputFontSizeSmall","iconMedium","inputFontSizeMedium","iconLarge","inputFontSizeLarge","iconDisabled","textColorDisabled","value","valueVisible"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG;AACpBC,EAAAA,IADoB,gBACfC,CADe,EACL;AACb,eAAOC,YAAP;;AAEWD,IAAAA,CAAC,CAACE,kBAFb;;AAID,GANmB;;AAQpBC,EAAAA,SARoB,qBAQVH,CARU,EAQA;AAClB,eAAOC,YAAP;AACeD,IAAAA,CAAC,CAACI,kBADjB;;AAGD,GAZmB;;AAcpBC,EAAAA,UAdoB,sBAcTL,CAdS,EAcC;AACnB,eAAOC,YAAP;AACeD,IAAAA,CAAC,CAACM,mBADjB;;AAGD,GAlBmB;;AAoBpBC,EAAAA,SApBoB,qBAoBVP,CApBU,EAoBA;AAClB,eAAOC,YAAP;AACeD,IAAAA,CAAC,CAACQ,kBADjB;;AAGD,GAxBmB;;AA0BpBC,EAAAA,YA1BoB,wBA0BPT,CA1BO,EA0BG;AACrB,eAAOC,YAAP;;AAEWD,IAAAA,CAAC,CAACU,iBAFb;;AAID,GA/BmB;;AAiCpBC,EAAAA,KAjCoB,mBAiCZ;AACN,eAAOV,YAAP;;;AAGD,GArCmB;;AAuCpBW,EAAAA,YAvCoB,0BAuCL;AACb,eAAOX,YAAP;;;AAGD,GA3CmB,EAAf,C","sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = {\n  icon(t: Theme) {\n    return css`\n      cursor: pointer;\n      color: ${t.dateInputIconColor};\n    `;\n  },\n\n  iconSmall(t: Theme) {\n    return css`\n      font-size: ${t.inputFontSizeSmall};\n    `;\n  },\n\n  iconMedium(t: Theme) {\n    return css`\n      font-size: ${t.inputFontSizeMedium};\n    `;\n  },\n\n  iconLarge(t: Theme) {\n    return css`\n      font-size: ${t.inputFontSizeLarge};\n    `;\n  },\n\n  iconDisabled(t: Theme) {\n    return css`\n      cursor: default;\n      color: ${t.textColorDisabled};\n    `;\n  },\n\n  value() {\n    return css`\n      visibility: hidden;\n    `;\n  },\n\n  valueVisible() {\n    return css`\n      visibility: visible;\n    `;\n  },\n};\n"]}