@skbkontur/react-ui 0.0.0-fed57d84fb → 0.7.0-beta.1

package/cjs/components/ComboBox/ComboBox.md

@@ -1,445 +0,0 @@
-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

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

package/cjs/components/ComboBox/index.js

@@ -1 +0,0 @@
-"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

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

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

@@ -1,35 +0,0 @@
-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

@@ -1,211 +0,0 @@
-"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) };