@skbkontur/react-ui 0.0.0-3974a633b4 → 0.0.0-444dd4e7b3

package/internal/InternalMaskedInput/InternalMaskedInput/InternalMaskedInput.js

@@ -0,0 +1,221 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _excluded = ["maskChar", "alwaysShowMask", "hasLeftIcon", "hasRightIcon", "maxLength", "onValueChange", "onUnexpectedInput", "defaultValue", "style"]; // TODO: Enable this rule in functional components.
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import React from 'react';
+import ReactInputMask from 'react-input-mask';
+import { isNonNullable } from "../../../lib/utils";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { MaskCharLowLine } from "../../MaskCharLowLine";
+import { cx } from "../../../lib/theming/Emotion";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { styles } from "../InternalMaskedInput.styles";
+export var MaskedInputDataTids = {
+  root: 'MaskedInput__root'
+};
+/** @deprecated Со следующей мажорной версии Input перестанет поддерживать маску.
+ * todo: выпилить в 5 версии библиотеки.
+ * */
+
+export var InternalMaskedInput = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(InternalMaskedInput, _React$PureComponent);
+
+  function InternalMaskedInput(_props) {
+    var _this;
+
+    _this = _React$PureComponent.call(this, _props) || this;
+    _this.getProps = createPropsGetter(InternalMaskedInput.defaultProps);
+    _this.input = null;
+    _this.reactInputMask = null;
+
+    _this.getValue = function (props) {
+      if (isNonNullable(props.value)) {
+        return props.value.toString();
+      }
+
+      if (isNonNullable(props.defaultValue)) {
+        return props.defaultValue.toString();
+      }
+
+      return '';
+    };
+
+    _this.refInput = function (input) {
+      _this.input = input;
+    };
+
+    _this.refMaskedInput = function (reactInputMask) {
+      _this.reactInputMask = reactInputMask;
+    };
+
+    _this.handleChange = function (event) {
+      if (event.target.value === _this.state.value) {
+        _this.handleUnexpectedInput();
+      } else {
+        _this.setState({
+          value: event.target.value,
+          originValue: event.target.value
+        });
+
+        if (_this.props.onValueChange) {
+          _this.props.onValueChange(event.target.value);
+        }
+
+        if (_this.props.onChange) {
+          _this.props.onChange(event);
+        }
+      }
+    };
+
+    _this.handleFocus = function (event) {
+      _this.setState({
+        focused: true
+      });
+
+      if (_this.props.onFocus) {
+        _this.props.onFocus(event);
+      }
+    };
+
+    _this.handleBlur = function (event) {
+      _this.setState({
+        focused: false
+      });
+
+      if (_this.props.onBlur) {
+        _this.props.onBlur(event);
+      }
+    };
+
+    _this.preprocess = function (newState, oldState, userInput, options) {
+      var visibleMaskChars = new Array(options.mask.length).fill(_this.getProps().maskChar);
+
+      if (newState.value !== oldState.value && userInput === null) {
+        _this.setState({
+          value: newState.value,
+          originValue: newState.value
+        });
+      }
+
+      options.mask.split('').forEach(function (_char2, index) {
+        if (options.permanents.includes(index)) {
+          visibleMaskChars[index] = _char2;
+        }
+
+        if (newState.value[index]) {
+          visibleMaskChars[index] = newState.value[index];
+        }
+      });
+      var emptyValue = visibleMaskChars.join('');
+
+      if (_this.state.emptyValue !== emptyValue) {
+        _this.setState({
+          emptyValue: emptyValue
+        });
+      }
+
+      return newState;
+    };
+
+    _this.isMaskVisible = function () {
+      return _this.props.alwaysShowMask || _this.state.focused;
+    };
+
+    _this.handleUnexpectedInput = function () {
+      if (_this.props.onUnexpectedInput) {
+        _this.props.onUnexpectedInput(_this.state.value);
+      }
+    };
+
+    _this.state = {
+      value: _this.getValue(_props),
+      originValue: _this.getValue(_props),
+      emptyValue: '',
+      focused: false
+    };
+    return _this;
+  }
+
+  var _proto = InternalMaskedInput.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (this.reactInputMask) {
+      // FIXME: принудительно вызываем beforeMaskedValueChange, чтобы получить emptyValue
+      this.reactInputMask.forceUpdate();
+    }
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (this.props.value !== prevProps.value) {
+      this.setState({
+        value: this.props.value ? this.props.value.toString() : ''
+      });
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this$props = this.props,
+        maskChar = _this$props.maskChar,
+        alwaysShowMask = _this$props.alwaysShowMask,
+        hasLeftIcon = _this$props.hasLeftIcon,
+        hasRightIcon = _this$props.hasRightIcon,
+        maxLength = _this$props.maxLength,
+        onValueChange = _this$props.onValueChange,
+        onUnexpectedInput = _this$props.onUnexpectedInput,
+        defaultValue = _this$props.defaultValue,
+        style = _this$props.style,
+        inputProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+
+    var _this$state = this.state,
+        emptyValue = _this$state.emptyValue,
+        value = _this$state.value,
+        originValue = _this$state.originValue;
+    var leftHelper = (style == null ? void 0 : style.textAlign) !== 'right' && /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'transparent'
+      }
+    }, emptyValue.slice(0, originValue.length));
+    var leftClass = (style == null ? void 0 : style.textAlign) !== 'right' && styles.inputMaskLeft();
+    var rightHelper = emptyValue.slice(originValue.length).split('').map(function (_char, i) {
+      return _char === '_' ? /*#__PURE__*/React.createElement(MaskCharLowLine, {
+        key: i
+      }) : _char;
+    });
+    return /*#__PURE__*/React.createElement("span", {
+      "data-tid": MaskedInputDataTids.root,
+      className: styles.container(),
+      "x-ms-format-detection": "none"
+    }, /*#__PURE__*/React.createElement(ReactInputMask, _extends({}, inputProps, {
+      maskChar: null,
+      beforeMaskedValueChange: this.preprocess,
+      alwaysShowMask: false,
+      onChange: this.handleChange,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      value: value,
+      inputRef: this.refInput,
+      ref: this.refMaskedInput,
+      style: _extends({}, style)
+    })), this.isMaskVisible() && /*#__PURE__*/React.createElement("span", {
+      className: cx(styles.inputMask(this.theme), leftClass)
+    }, leftHelper, rightHelper));
+  };
+
+  return InternalMaskedInput;
+}(React.PureComponent);
+InternalMaskedInput.__KONTUR_REACT_UI__ = 'MaskedInput';
+InternalMaskedInput.defaultProps = {
+  maskChar: '_'
+};

package/internal/InternalMaskedInput/InternalMaskedInput/InternalMaskedInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InternalMaskedInput.tsx"],"names":["React","ReactInputMask","isNonNullable","ThemeContext","MaskCharLowLine","cx","createPropsGetter","styles","MaskedInputDataTids","root","InternalMaskedInput","props","getProps","defaultProps","input","reactInputMask","getValue","value","toString","defaultValue","refInput","refMaskedInput","handleChange","event","target","state","handleUnexpectedInput","setState","originValue","onValueChange","onChange","handleFocus","focused","onFocus","handleBlur","onBlur","preprocess","newState","oldState","userInput","options","visibleMaskChars","Array","mask","length","fill","maskChar","split","forEach","char","index","permanents","includes","emptyValue","join","isMaskVisible","alwaysShowMask","onUnexpectedInput","componentDidMount","forceUpdate","componentDidUpdate","prevProps","render","theme","renderMain","hasLeftIcon","hasRightIcon","maxLength","style","inputProps","leftHelper","textAlign","color","slice","leftClass","inputMaskLeft","rightHelper","map","_char","i","container","inputMask","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport ReactInputMask, { InputState, MaskOptions } from 'react-input-mask';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MaskCharLowLine } from '../MaskCharLowLine';\nimport { cx } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './InternalMaskedInput.styles';\n\nexport interface InternalMaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  mask: string;\n  maskChar?: string | null;\n  formatChars?: { [key: string]: string };\n  alwaysShowMask?: boolean;\n  hasLeftIcon?: boolean;\n  hasRightIcon?: boolean;\n  onUnexpectedInput?: (value: string) => void;\n  onValueChange?: (value: string) => void;\n}\n\ninterface MaskedInputState {\n  value: string;\n\n  // Users can unmask value themselves. In these cases we take origin value length\n  originValue: string;\n\n  emptyValue: string;\n  focused: boolean;\n}\n\ntype DefaultProps = Required<Pick<InternalMaskedInputProps, 'maskChar'>>;\n\nexport const MaskedInputDataTids = {\n  root: 'MaskedInput__root',\n} as const;\n\n/** @deprecated Со следующей мажорной версии Input перестанет поддерживать маску.\n * todo: выпилить в 5 версии библиотеки.\n * */\nexport class InternalMaskedInput extends React.PureComponent<InternalMaskedInputProps, MaskedInputState> {\n  public static __KONTUR_REACT_UI__ = 'MaskedInput';\n\n  public static defaultProps: DefaultProps = {\n    maskChar: '_',\n  };\n\n  private getProps = createPropsGetter(InternalMaskedInput.defaultProps);\n\n  public input: HTMLInputElement | null = null;\n  private theme!: Theme;\n  private reactInputMask: ReactInputMask | null = null;\n\n  public constructor(props: InternalMaskedInputProps) {\n    super(props);\n\n    this.state = {\n      value: this.getValue(props),\n      originValue: this.getValue(props),\n      emptyValue: '',\n      focused: false,\n    };\n  }\n\n  public componentDidMount() {\n    if (this.reactInputMask) {\n      // FIXME: принудительно вызываем beforeMaskedValueChange, чтобы получить emptyValue\n      this.reactInputMask.forceUpdate();\n    }\n  }\n\n  public componentDidUpdate(prevProps: InternalMaskedInputProps) {\n    if (this.props.value !== prevProps.value) {\n      this.setState({\n        value: this.props.value ? this.props.value.toString() : '',\n      });\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 {\n      maskChar,\n      alwaysShowMask,\n      hasLeftIcon,\n      hasRightIcon,\n      maxLength,\n      onValueChange,\n      onUnexpectedInput,\n      defaultValue,\n      style,\n      ...inputProps\n    } = this.props;\n    const { emptyValue, value, originValue } = this.state;\n\n    const leftHelper = style?.textAlign !== 'right' && (\n      <span style={{ color: 'transparent' }}>{emptyValue.slice(0, originValue.length)}</span>\n    );\n    const leftClass = style?.textAlign !== 'right' && styles.inputMaskLeft();\n\n    const rightHelper = emptyValue\n      .slice(originValue.length)\n      .split('')\n      .map((_char, i) => (_char === '_' ? <MaskCharLowLine key={i} /> : _char));\n\n    return (\n      <span data-tid={MaskedInputDataTids.root} className={styles.container()} x-ms-format-detection=\"none\">\n        <ReactInputMask\n          {...inputProps}\n          maskChar={null}\n          beforeMaskedValueChange={this.preprocess}\n          alwaysShowMask={false}\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          value={value}\n          inputRef={this.refInput}\n          ref={this.refMaskedInput}\n          style={{ ...style }}\n        />\n        {this.isMaskVisible() && (\n          <span className={cx(styles.inputMask(this.theme), leftClass)}>\n            {leftHelper}\n            {rightHelper}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  private getValue = (props: InternalMaskedInputProps): string => {\n    if (isNonNullable(props.value)) {\n      return props.value.toString();\n    }\n\n    if (isNonNullable(props.defaultValue)) {\n      return props.defaultValue.toString();\n    }\n\n    return '';\n  };\n\n  private refInput = (input: HTMLInputElement | null) => {\n    this.input = input;\n  };\n\n  private refMaskedInput = (reactInputMask: ReactInputMask) => {\n    this.reactInputMask = reactInputMask;\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (event.target.value === this.state.value) {\n      this.handleUnexpectedInput();\n    } else {\n      this.setState({ value: event.target.value, originValue: event.target.value });\n      if (this.props.onValueChange) {\n        this.props.onValueChange(event.target.value);\n      }\n      if (this.props.onChange) {\n        this.props.onChange(event);\n      }\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    this.setState({ focused: true });\n\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n  };\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    this.setState({ focused: false });\n\n    if (this.props.onBlur) {\n      this.props.onBlur(event);\n    }\n  };\n\n  private preprocess = (\n    newState: InputState,\n    oldState: InputState,\n    userInput: string,\n    options: MaskOptions & Pick<InternalMaskedInputProps, 'mask'>,\n  ) => {\n    const visibleMaskChars = new Array(options.mask.length).fill(this.getProps().maskChar);\n\n    if (newState.value !== oldState.value && userInput === null) {\n      this.setState({\n        value: newState.value,\n        originValue: newState.value,\n      });\n    }\n\n    options.mask.split('').forEach((char: string, index: number) => {\n      if (options.permanents.includes(index)) {\n        visibleMaskChars[index] = char;\n      }\n\n      if (newState.value[index]) {\n        visibleMaskChars[index] = newState.value[index];\n      }\n    });\n\n    const emptyValue = visibleMaskChars.join('');\n\n    if (this.state.emptyValue !== emptyValue) {\n      this.setState({\n        emptyValue,\n      });\n    }\n\n    return newState;\n  };\n\n  private isMaskVisible = () => this.props.alwaysShowMask || this.state.focused;\n\n  private handleUnexpectedInput = () => {\n    if (this.props.onUnexpectedInput) {\n      this.props.onUnexpectedInput(this.state.value);\n    }\n  };\n}\n"]}

package/internal/InternalMaskedInput/InternalMaskedInput/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/InternalMaskedInput/InternalMaskedInput.js",
+  "module": "InternalMaskedInput",
+  "types": "../InternalMaskedInput.d.ts",
+  "sideEffects": false
+}

package/internal/InternalMaskedInput/InternalMaskedInput.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+export interface InternalMaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    mask: string;
+    maskChar?: string | null;
+    formatChars?: {
+        [key: string]: string;
+    };
+    alwaysShowMask?: boolean;
+    hasLeftIcon?: boolean;
+    hasRightIcon?: boolean;
+    onUnexpectedInput?: (value: string) => void;
+    onValueChange?: (value: string) => void;
+}
+interface MaskedInputState {
+    value: string;
+    originValue: string;
+    emptyValue: string;
+    focused: boolean;
+}
+declare type DefaultProps = Required<Pick<InternalMaskedInputProps, 'maskChar'>>;
+export declare const MaskedInputDataTids: {
+    readonly root: "MaskedInput__root";
+};
+/** @deprecated Со следующей мажорной версии Input перестанет поддерживать маску.
+ * todo: выпилить в 5 версии библиотеки.
+ * */
+export declare class InternalMaskedInput extends React.PureComponent<InternalMaskedInputProps, MaskedInputState> {
+    static __KONTUR_REACT_UI__: string;
+    static defaultProps: DefaultProps;
+    private getProps;
+    input: HTMLInputElement | null;
+    private theme;
+    private reactInputMask;
+    constructor(props: InternalMaskedInputProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: InternalMaskedInputProps): void;
+    render(): JSX.Element;
+    private renderMain;
+    private getValue;
+    private refInput;
+    private refMaskedInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    private preprocess;
+    private isMaskVisible;
+    private handleUnexpectedInput;
+}
+export {};

package/internal/InternalMaskedInput/InternalMaskedInput.styles/InternalMaskedInput.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["InternalMaskedInput.styles.ts"],"names":["css","memoizeStyle","styles","container","inputMask","t","placeholderColor","inputMaskLeft"],"mappings":"wJAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,SADiC,uBACrB;AACV,WAAOH,GAAP;;;;;;AAMD,GARgC;AASjCI,EAAAA,SATiC,qBASvBC,CATuB,EASb;AAClB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACC,gBADb;;;;;;AAOD,GAjBgC;AAkBjCC,EAAAA,aAlBiC,2BAkBjB;AACd,WAAOP,GAAP;;;;;;AAMD,GAzBgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  container() {\n    return css`\n      display: inline-flex;\n      position: relative;\n      font-size: inherit;\n      flex: 100% 1 1;\n    `;\n  },\n  inputMask(t: Theme) {\n    return css`\n      color: ${t.placeholderColor};\n      pointer-events: none;\n      font-size: inherit;\n      z-index: 5;\n      user-select: none;\n    `;\n  },\n  inputMaskLeft() {\n    return css`\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n    `;\n  },\n});\n"]}

package/internal/InternalMaskedInput/InternalMaskedInput.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/InternalMaskedInput/InternalMaskedInput.styles.js",
+  "module": "InternalMaskedInput.styles",
+  "types": "../InternalMaskedInput.styles.d.ts",
+  "sideEffects": false
+}

package/internal/InternalMaskedInput/InternalMaskedInput.styles.d.ts

@@ -0,0 +1,6 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    container(): string;
+    inputMask(t: Theme): string;
+    inputMaskLeft(): string;
+};

package/internal/InternalMaskedInput/index/index.js

@@ -0,0 +1 @@
+export * from "../InternalMaskedInput";

package/internal/InternalMaskedInput/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,uBAAd","sourcesContent":["export * from './InternalMaskedInput';\n"]}

package/internal/InternalMaskedInput/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/InternalMaskedInput/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/internal/InternalMaskedInput/index.d.ts

@@ -0,0 +1 @@
+export * from './InternalMaskedInput';

package/internal/InternalMaskedInput/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/internal/InternalMaskedInput/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}