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

package/cjs/components/ComboBox/ComboBox.md

@@ -0,0 +1,445 @@
+Combobox with error handling
+
+```jsx harmony
+import { Tooltip } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+let maybeReject = x => (Math.random() * 3 < 1 ? Promise.reject() : Promise.resolve(x));
+
+let getItems = q =>
+  Promise.resolve(
+    [
+      { value: 1, label: 'First' },
+      { value: 2, label: 'Second' },
+      { value: 3, label: 'Third' },
+      { value: 4, label: 'Fourth' },
+      { value: 5, label: 'Fifth' },
+      { value: 6, label: 'Sixth' },
+    ].filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
+  )
+    .then(delay(500))
+    .then(maybeReject);
+
+const [selected, setSelected] = React.useState({ value: 3, label: 'Third' });
+const [error, setError] = React.useState(false);
+
+let handleValueChange = value => {
+  setSelected(value);
+  setError(false);
+};
+
+let handleUnexpectedInput = () => {
+  setSelected(null);
+  setError(true);
+};
+
+let handleFocus = () => setError(false);
+
+<Tooltip closeButton={false} render={() => 'Item must be selected!'} trigger={error ? 'opened' : 'closed'}>
+  <ComboBox
+    error={error}
+    getItems={getItems}
+    onValueChange={handleValueChange}
+    onFocus={handleFocus}
+    onUnexpectedInput={handleUnexpectedInput}
+    placeholder="Enter number"
+    value={selected}
+  />
+</Tooltip>;
+```
+
+ComboBox with popular values, complex menu items and total count message
+
+```jsx harmony
+import { getCities } from './__mocks__/getCities';
+import { Gapped, MenuHeader, MenuSeparator } from '@skbkontur/react-ui';
+
+let popularItems = [
+  { Id: 956, City: 'Махачкала' },
+  { Id: 4974, City: 'Верхняя-Пышма' },
+  { Id: 4980, City: 'Екатеринбург' },
+];
+
+const [value, setValue] = React.useState(null);
+
+let mapCity = ({ Id, City }) => ({
+  value: Id,
+  label: City,
+});
+
+let hasSelectedItem = itemsSets => itemsSets.some(items => items.find(item => value.value === item.Id));
+
+let shouldInsertSelectedItem = (query, items) => value && !query && !hasSelectedItem([items, popularItems]);
+
+let getPopularItems = query => (query ? [] : popularItems.map(mapCity));
+let renderSeparator = query => (query ? [] : <MenuSeparator />);
+let getSelectedItem = (query, items) => (!shouldInsertSelectedItem(query, items) ? [] : value);
+
+let prepareItems = (query, items) =>
+  (!shouldInsertSelectedItem(query, items) ? items : items.slice(0, -1)).map(mapCity);
+
+let renderTotalCount = (foundCount, totalCount) =>
+  foundCount < totalCount ? (
+    <MenuHeader>
+      Показано {foundCount} из {totalCount} найденных городов.
+    </MenuHeader>
+  ) : (
+    []
+  );
+
+let getItems = query =>
+  getCities(query).then(({ foundItems, totalCount }) =>
+    [].concat(
+      getPopularItems(query),
+      renderSeparator(query),
+      getSelectedItem(query, foundItems),
+      prepareItems(query, foundItems),
+      renderTotalCount(foundItems.length, totalCount),
+    ),
+  );
+
+let renderItem = item => (
+  <Gapped>
+    <div style={{ width: 40 }}>{item.value}</div>
+    <div style={{ width: 210, whiteSpace: 'normal' }}>{item.label}</div>
+  </Gapped>
+);
+
+<ComboBox
+  onValueChange={setValue}
+  getItems={getItems}
+  placeholder="Начните вводить название"
+  value={value}
+  renderItem={renderItem}
+/>;
+```
+
+Переопределение renderValue и renderItem:
+
+```jsx harmony
+import OkIcon from '@skbkontur/react-icons/Ok';
+import { Tooltip } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const getItems = q =>
+  Promise.resolve(
+    [
+      { approved: true, value: 1, label: 'Леонид Долецкий', email: 'first@skbkontur.ru' },
+      { approved: true, value: 2, label: 'Владислав Нашкодивший', email: 'second@skbkontur.ru' },
+      { approved: false, value: 3, label: 'Розенкранц Харитонов', email: 'third@skbkontur.ru' },
+      { approved: false, value: 4, label: 'Надежда Дубова', email: 'fourth@skbkontur.ru' },
+      { approved: true, value: 5, label: 'Владислав Сташкеевич', email: 'fifth@skbkontur.ru' },
+      { approved: true, value: 6, label: 'Василиса Поволоцкая', email: 'sixth@skbkontur.ru' },
+    ].filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
+  ).then(delay(500));
+
+const [selected, setSelected] = React.useState({
+  approved: false,
+  value: 3,
+  label: 'Розенкранц Харитонов',
+  email: 'third@skbkontur.ru',
+});
+const [error, setError] = React.useState(false);
+
+const handleValueChange = value => {
+  setSelected(value);
+  setError(false);
+};
+
+const handleUnexpectedInput = () => {
+  setSelected(null);
+  setError(true);
+};
+
+const handleFocus = () => setError(false);
+
+const customRenderItem = item => (
+  <div
+    style={{
+      display: 'flex',
+    }}
+  >
+    <div
+      style={{
+        minWidth: '55%',
+        display: 'flex',
+      }}
+    >
+      <span
+        style={{
+          minWidth: '20px',
+        }}
+      >
+        {item.approved ? <OkIcon size={14} /> : null}
+      </span>
+      <span
+        style={{
+          flexGrow: '1',
+        }}
+      >
+        {item.label}
+      </span>
+    </div>
+    <div
+      style={{
+        opacity: '0.6',
+        paddingLeft: '10px',
+        boxSizing: 'border-box',
+      }}
+    >
+      {item.email}
+    </div>
+  </div>
+);
+
+const customRenderValue = item => (
+  <div
+    style={{
+      display: 'flex',
+    }}
+  >
+    <div
+      style={{
+        minWidth: '55%',
+      }}
+    >
+      {item.label}
+    </div>
+    <div
+      style={{
+        opacity: '0.6',
+        paddingLeft: '10px',
+        boxSizing: 'border-box',
+      }}
+    >
+      {item.email}
+    </div>
+  </div>
+);
+
+<Tooltip closeButton={false} render={() => 'Item must be selected!'} trigger={error ? 'opened' : 'closed'}>
+  <ComboBox
+    error={error}
+    getItems={getItems}
+    onValueChange={handleValueChange}
+    onFocus={handleFocus}
+    onUnexpectedInput={handleUnexpectedInput}
+    placeholder="Enter number"
+    value={selected}
+    renderItem={customRenderItem}
+    renderValue={customRenderValue}
+    width="400px"
+  />
+</Tooltip>;
+```
+
+С подсветкой результата поиска:
+
+```jsx harmony
+import { Tooltip } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+const getItems = query =>
+  Promise.resolve(
+    [
+      { value: 1, label: 'First' },
+      { value: 2, label: 'Second' },
+      { value: 3, label: 'Third' },
+      { value: 4, label: 'Fourth' },
+      { value: 5, label: 'Fifth' },
+      { value: 6, label: 'Sixth' },
+    ]
+      .filter(x => x.label.toLowerCase().includes(query.toLowerCase()) || x.value.toString(10) === query)
+      .map(({ label, ...rest }) => {
+        const start = label.toLowerCase().indexOf(query.toLowerCase());
+        const end = start + query.length;
+
+        return {
+          ...rest,
+          label,
+          highlightedLabel:
+            start >= 0 ? (
+              <span>
+                {label.substring(0, start)}
+                <strong
+                  style={{
+                    fontSize: '1.1em',
+                  }}
+                >
+                  {label.substring(start, end)}
+                </strong>
+                {label.substring(end)}
+              </span>
+            ) : null,
+        };
+      }),
+  ).then(delay(500));
+
+const [selected, setSelected] = React.useState({ value: 3, label: 'Third' });
+const [error, setError] = React.useState(false);
+
+let handleValueChange = value => {
+  setSelected(value);
+  setError(false);
+};
+
+let handleUnexpectedInput = () => {
+  setSelected(null);
+  setError(true);
+};
+
+let handleFocus = () => setError(false);
+
+const renderItem = item => {
+  if (item.highlightedLabel) {
+    return item.highlightedLabel;
+  }
+
+  return item.label;
+};
+
+<Tooltip closeButton={false} render={() => 'Item must be selected!'} trigger={error ? 'opened' : 'closed'}>
+  <ComboBox
+    error={error}
+    getItems={getItems}
+    onValueChange={handleValueChange}
+    onFocus={handleFocus}
+    onUnexpectedInput={handleUnexpectedInput}
+    placeholder="Enter number"
+    value={selected}
+    renderItem={renderItem}
+  />
+</Tooltip>;
+```
+
+Добавление элементов в меню
+
+```jsx harmony
+import { MenuItem } from '@skbkontur/react-ui';
+
+const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
+
+class ComboboxExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      items: [
+        { value: 1, label: 'First' },
+        { value: 2, label: 'Second' },
+        { value: 3, label: 'Third' },
+        { value: 4, label: 'Fourth' },
+        { value: 5, label: 'Fifth' },
+        { value: 6, label: 'Sixth' },
+      ],
+      query: '',
+      selected: { value: 3, label: 'Third' },
+      error: false,
+      shouldRenderAddButton: false,
+    };
+
+    this.comboBoxElement = null;
+
+    this.getItems = this.getItems.bind(this);
+    this.handleValueChange = this.handleValueChange.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleInputValueChange = this.handleInputValueChange.bind(this);
+    this.renderAddButton = this.renderAddButton.bind(this);
+    this.refComboBox = this.refComboBox.bind(this);
+    this.addItem = this.addItem.bind(this);
+  }
+
+  render() {
+    return (
+      <ComboBox
+        error={this.state.error}
+        getItems={this.getItems}
+        onValueChange={this.handleValueChange}
+        onFocus={this.handleFocus}
+        placeholder="Enter number"
+        value={this.state.selected}
+        onInputValueChange={this.handleInputValueChange}
+        renderAddButton={this.renderAddButton}
+        ref={this.refComboBox}
+      />
+    );
+  }
+
+  getItems(q) {
+    return Promise.resolve(
+      this.state.items.filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
+    ).then(delay(500));
+  }
+
+  handleInputValueChange(query) {
+    const isItemExists = this.state.items.find(x => x.label.toLowerCase() == query.toLowerCase());
+    this.setState({ query, shouldRenderAddButton: !isItemExists });
+  }
+
+  handleValueChange(value) {
+    this.setState({ selected: value, error: false, shouldRenderAddButton: false });
+  }
+
+  handleFocus() {
+    this.setState({ error: false });
+  }
+
+  renderAddButton() {
+    if (!this.state.shouldRenderAddButton) {
+      return null;
+    }
+    return (
+      <MenuItem link onClick={this.addItem}>
+        + Добавить "{this.state.query}"
+      </MenuItem>
+    );
+  }
+
+  refComboBox(element) {
+    this.comboBoxElement = element;
+  }
+
+  addItem() {
+    this.setState(currentState => {
+      const newItem = {
+        value: Math.max(...currentState.items.map(({ value }) => value)) + 1,
+        label: currentState.query,
+      };
+
+      return {
+        items: [...currentState.items, newItem],
+        selected: newItem,
+        error: false,
+        shouldRenderAddButton: false,
+      };
+    });
+  }
+}
+
+<ComboboxExample />;
+```
+
+#### Локали по умолчанию
+
+```typescript static
+interface ComboBoxLocale {
+  notFound?: string;
+  errorNetworkButton?: string;
+  errorNetworkMessage?: string;
+}
+
+const ru_RU = {
+  notFound: 'Не найдено',
+  errorNetworkButton: 'Обновить',
+  errorNetworkMessage: 'Что-то пошло не так. Проверьте соединение с интернетом и попробуйте еще раз',
+};
+
+const en_GB = {
+  notFound: 'Not found',
+  errorNetworkButton: 'Refresh',
+  errorNetworkMessage: 'Something went wrong. Check your internet connection and try again',
+};
+```

package/cjs/components/ComboBox/index.d.ts

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

package/cjs/components/ComboBox/index.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;var _ComboBox = require("./ComboBox");Object.keys(_ComboBox).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _ComboBox[key]) return;exports[key] = _ComboBox[key];});

package/cjs/components/ComboBox/index.js.map

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

package/cjs/components/CurrencyInput/CurrencyHelper.d.ts

@@ -0,0 +1,35 @@
+import { Nullable } from '../../typings/utility-types';
+import { DecimalOptions } from './CurrencyInputHelper';
+import { CursorMap } from './CursorHelper';
+export interface DecimalFormattingOptions {
+    fractionDigits?: Nullable<number>;
+    hideTrailingZeros?: boolean;
+    thousandsDelimiter?: string;
+    minusSign?: string;
+}
+declare type DecimalFormattingOptionsInternal = Required<DecimalFormattingOptions>;
+export interface FormattingInfo {
+    raw: string;
+    formatted: string;
+    cursorMap: CursorMap;
+}
+export declare class CurrencyHelper {
+    static defaultOptions: DecimalFormattingOptionsInternal;
+    static getOptions(options?: Nullable<DecimalFormattingOptions>): DecimalFormattingOptionsInternal;
+    static getInfo(value: string, options?: Nullable<DecimalFormattingOptions>): FormattingInfo;
+    static getCursorMap(formatted: string, formattingOptions?: Nullable<DecimalFormattingOptions>): CursorMap;
+    static format(value: Nullable<number>, options?: Nullable<DecimalFormattingOptions>): string;
+    static parse(value: string): Nullable<number>;
+    static unformatString(value: string): string;
+    static formatForClipboard(value: string): string;
+    static formatString(value: string, formattingOptions?: Nullable<DecimalFormattingOptions>): string;
+    static isValidString(value: string, options: DecimalOptions): boolean;
+    static extractValid(value: string, options: DecimalOptions): string;
+    static destructString(value: string): {
+        sign: string;
+        integer: string;
+        delimiter: string;
+        fraction: string;
+    } | null;
+}
+export {};

package/cjs/components/CurrencyInput/CurrencyHelper.js

@@ -0,0 +1,211 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.CurrencyHelper = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _utils = require("../../lib/utils");
+
+var _client = require("../../lib/client");
+
+
+
+var _constants = require("./constants");var
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+CurrencyHelper = /*#__PURE__*/function () {function CurrencyHelper() {}CurrencyHelper.
+
+
+
+
+
+
+
+  getOptions = function getOptions(options) {
+    return (0, _extends2.default)({}, CurrencyHelper.defaultOptions, options);
+  };CurrencyHelper.
+
+  getInfo = function getInfo(value, options) {
+    var raw = CurrencyHelper.unformatString(value);
+    var formatted = CurrencyHelper.formatString(value, options);
+    var cursorMap = CurrencyHelper.getCursorMap(formatted, options);
+
+    return { raw: raw, formatted: formatted, cursorMap: cursorMap };
+  };CurrencyHelper.
+
+  getCursorMap = function getCursorMap(formatted, formattingOptions) {
+    var options = CurrencyHelper.getOptions(formattingOptions);
+    var regexp = new RegExp(options.thousandsDelimiter);
+    var cursorMap = [];
+
+    var index = formatted.length;
+    var cursor = formatted.length;
+    var skip = 0;
+
+    while (index >= 0) {
+      cursorMap[index] = cursor;
+
+      var ignoredSymbol = regexp.exec(formatted[index - 1]);
+      if (ignoredSymbol) {
+        ++skip;
+      } else {
+        cursor = cursor - skip - 1;
+        skip = 0;
+      }
+      --index;
+    }
+    return cursorMap;
+  };CurrencyHelper.
+
+  format = function format(value, options) {
+    if ((0, _utils.isNullable)(value)) {
+      return '';
+    }
+
+    return CurrencyHelper.formatString(value.toString(), options);
+  };CurrencyHelper.
+
+  parse = function parse(value) {
+    var cleaned = CurrencyHelper.unformatString(value);
+    if (!cleaned) {
+      return null;
+    }
+
+    var destructed = CurrencyHelper.destructString(cleaned);
+    if (!destructed) {
+      return null;
+    }
+
+    var result =
+    destructed.sign + (destructed.integer || '0') + (destructed.delimiter || '.') + (destructed.fraction || '0');
+
+    return parseFloat(result);
+  };CurrencyHelper.
+
+  unformatString = function unformatString(value) {
+    return value.
+    replace(/\s/g, '').
+    replace(',', '.').
+    replace(/[\u2212\u002D\uFE63\uFF0D\u2012\u2013\u2014\u2015]/g, '-');
+  };CurrencyHelper.
+
+  formatForClipboard = function formatForClipboard(value) {
+    return CurrencyHelper.unformatString(value).replace('.', ',');
+  };CurrencyHelper.
+
+  formatString = function formatString(value, formattingOptions) {
+    var unformattedValue = CurrencyHelper.unformatString(value);
+    var destructed = CurrencyHelper.destructString(unformattedValue) || {
+      sign: '',
+      integer: '',
+      delimiter: '',
+      fraction: '' };
+
+
+    var sign = destructed.sign,integer = destructed.integer,delimiter = destructed.delimiter;
+    var fraction = destructed.fraction;
+    var fractionDigits = fraction.length;
+
+    var options = CurrencyHelper.getOptions(formattingOptions);
+    if (options.hideTrailingZeros) {
+      fraction = fraction.replace(/0+$/, '');
+      fractionDigits = fraction.length;
+    } else if (options.fractionDigits !== null) {
+      fractionDigits = options.fractionDigits;
+    }
+
+    var parts = [];
+
+    var blockSize = 3;
+    var start = (integer.length - 1) % blockSize - blockSize + 1;
+    for (var i = start; i < integer.length; i += blockSize) {
+      parts.push(integer.substring(Math.max(i, 0), i + blockSize));
+    }
+
+    var result = parts.join(options.thousandsDelimiter);
+
+    if (delimiter || fractionDigits) {
+      result += ',';
+      result += fraction.padEnd(Math.min(fractionDigits, _constants.MAX_SAFE_DIGITS), '0');
+    }
+
+    if (sign) {
+      result = options.minusSign + result;
+    }
+
+    return result;
+  };CurrencyHelper.
+
+  isValidString = function isValidString(value, options) {
+    var unformattedValue = CurrencyHelper.unformatString(value);
+    var destructed = CurrencyHelper.destructString(unformattedValue);
+
+    if (!destructed) {
+      return false;
+    }
+
+    var sign = destructed.sign,integer = destructed.integer,delimiter = destructed.delimiter,fraction = destructed.fraction;
+
+    if (options.unsigned && sign) {
+      return false;
+    }
+
+    if (options.fractionDigits === 0 && delimiter) {
+      return false;
+    }
+
+    var integerDigits = integer === '0' ? 0 : integer.length;
+    var fractionDigits = fraction.length;
+
+    if ((0, _utils.isNonNullable)(options.integerDigits) && integerDigits > options.integerDigits) {
+      return false;
+    }
+
+    if ((0, _utils.isNullable)(options.integerDigits) && integerDigits > _constants.MAX_SAFE_DIGITS - (options.fractionDigits || 0)) {
+      return false;
+    }
+
+    if ((0, _utils.isNonNullable)(options.fractionDigits) && fractionDigits > options.fractionDigits) {
+      return false;
+    }
+
+    return integerDigits + fractionDigits <= _constants.MAX_SAFE_DIGITS;
+  };CurrencyHelper.
+
+  extractValid = function extractValid(value, options) {
+    var unformattedValue = CurrencyHelper.unformatString(value);
+
+    var match = /[-.\d]+/.exec(unformattedValue);
+
+    if (!match) {
+      return '';
+    }
+
+    var token = match[0].substr(0, _constants.MAX_ALLOWED_CHARS);
+
+    for (var i = token.length; i >= 0; --i) {
+      var result = token.substr(0, i);
+      if (CurrencyHelper.isValidString(result, options)) {
+        return result;
+      }
+    }
+
+    return '';
+  };CurrencyHelper.
+
+  destructString = function destructString(value) {
+    var match = /^(-)?(\d*)?(\.)?(\d*)?$/.exec(value);
+    if (!match) {
+      return null;
+    }
+    var _match$ = match[1],sign = _match$ === void 0 ? '' : _match$,_match$2 = match[2],integer = _match$2 === void 0 ? '' : _match$2,_match$3 = match[3],delimiter = _match$3 === void 0 ? '' : _match$3,_match$4 = match[4],fraction = _match$4 === void 0 ? '' : _match$4;
+    return { sign: sign, integer: integer, delimiter: delimiter, fraction: fraction };
+  };return CurrencyHelper;}();exports.CurrencyHelper = CurrencyHelper;CurrencyHelper.defaultOptions = { fractionDigits: null, hideTrailingZeros: false, thousandsDelimiter: String.fromCharCode(_client.isSafari ? 0x0020 : 0x2009), minusSign: String.fromCharCode(0x2212) };