@skbkontur/react-ui 0.0.0-dad43298ae → 0.0.0-db9f11da2a

package/components/TokenInput/TokenInput.md

@@ -1,308 +0,0 @@
-### Базовый пример
-```jsx harmony
-import { Token } from '@skbkontur/react-ui';
-import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
-
-const [selectedItems, setSelectedItems] = React.useState([]);
-
-const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
-
-const getItems = q =>
-  Promise.resolve(
-    ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(
-      x => x.toLowerCase().includes(q.toLowerCase()) || x.toString(10) === q,
-    ),
-  ).then(delay(500));
-
-const tokenColors = {
-  First: {
-    idle: 'grayIdle',
-    active: 'grayActive',
-  },
-  Second: {
-    idle: 'blueIdle',
-    active: 'blueActive',
-  },
-  Third: {
-    idle: 'greenIdle',
-    active: 'greenActive',
-  },
-  Fourth: {
-    idle: 'yellowIdle',
-    active: 'yellowActive',
-  },
-  Fifth: {
-    idle: 'redIdle',
-    active: 'redActive',
-  },
-  Sixth: {
-    idle: 'white',
-    active: 'black',
-  },
-  default: {
-    idle: 'defaultIdle',
-    active: 'defaultActive',
-  },
-};
-
-<div style={{ width: '300px' }}>
-  <TokenInput
-    type={TokenInputType.Combined}
-    getItems={getItems}
-    selectedItems={selectedItems}
-    onValueChange={setSelectedItems}
-    renderToken={(item, tokenProps) => (
-      <Token key={item.toString()} colors={tokenColors[item] || tokenColors.default} {...tokenProps}>
-        {item}
-      </Token>
-    )}
-  />
-</div>;
-```
-
-### Размер
-
-```jsx harmony
-import { Token } from '@skbkontur/react-ui';
-import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
-
-const [selectedItems, setSelectedItems] = React.useState([]);
-
-const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
-
-const getItems = q =>
-  Promise.resolve(
-    ['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].filter(
-      x => x.toLowerCase().includes(q.toLowerCase()) || x.toString(10) === q,
-    ),
-  ).then(delay(500));
-
-<div style={{ width: '300px' }}>
-  <TokenInput
-    size={'small'}
-    getItems={getItems}
-    selectedItems={selectedItems}
-    onValueChange={setSelectedItems}
-  />
-  <TokenInput
-    size={'medium'}
-    getItems={getItems}
-    selectedItems={selectedItems}
-    onValueChange={setSelectedItems}
-  />
-  <TokenInput
-    size={'large'}
-    getItems={getItems}
-    selectedItems={selectedItems}
-    onValueChange={setSelectedItems}
-  />
-</div>;
-```
-
-### Заблокированный TokenInput с кастомными Token
-
-```jsx harmony
-import { Token } from '@skbkontur/react-ui';
-import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
-
-const [selectedItems, setSelectedItems] = React.useState(['aaa', 'bbb', 'ccc']);
-
-async function getItems(query) {
-  return ['aaa', 'bbb', 'ccc'].filter((s) => s.includes(query));
-};
-
-<TokenInput
-  disabled
-  type={TokenInputType.Combined}
-  getItems={getItems}
-  selectedItems={selectedItems}
-  onValueChange={setSelectedItems}
-  renderToken={(item, tokenProps) => (
-    <Token key={item.toString()} {...tokenProps} disabled={item === 'bbb' || tokenProps.disabled} >
-      {item}
-    </Token>
-  )}
-/>
-```
-
-### Ограничение количества токенов в выпадающем списке
-
-```jsx harmony
-import { Token } from '@skbkontur/react-ui';
-import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
-
-
-const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
-const { cities } = require('../ComboBox/__mocks__/cities');
-
-const maxItems = 5;
-
-const [totalCount, setTotalCount] = React.useState(cities.length);
-const [value, setValue] = React.useState([]);
-
-const getItems = (query) => {
-  const items = cities
-    .map((x) => x.City)
-    .filter((x) => x.toLowerCase().includes(query.toLowerCase()) || x.toString() === query);
-  const result = items.slice(0, maxItems);
-  setTotalCount(items.length);
-
-  return Promise.resolve(result).then(delay(500));
-};
-
-const renderTotalCount = (foundCount, totalCount) => (
-  <span>
-    Показано {foundCount} из {totalCount} найденных городов
-  </span>
-);
-
-<div style={{ width: "300px" }}>
-  <TokenInput
-    type={TokenInputType.Combined}
-    selectedItems={value}
-    onValueChange={setValue}
-    getItems={getItems}
-    placeholder="Начните вводить название"
-    renderTotalCount={renderTotalCount}
-    totalCount={totalCount}
-  />
-</div>
-```
-
-### Кастомный тип элементов меню
-```jsx harmony
-import { Token } from '@skbkontur/react-ui';
-import { TokenInputType } from '@skbkontur/react-ui/components/TokenInput';
-
-const [selectedItems, setSelectedItems] = React.useState([]);
-
-const delay = time => args => new Promise(resolve => setTimeout(resolve, time, args));
-const getGenericItems = () => [
-  { id: '111', value: 'aaa' },
-  { id: '222', value: 'bbb' },
-  { id: '333', value: 'ccc' },
-  { id: '444', value: 'ddd' },
-];
-const renderItem = (item) => item.value;
-const renderValue = (value) => value.value;
-const valueToItem = (item) => ({
-  value: item,
-});
-const getModelItems = async (query) => {
-  await delay(400);
-  return getGenericItems().filter((s) => s.value.includes(query));
-}
-
-<div style={{ width: '300px' }}>
-  <TokenInput
-    selectedItems={selectedItems}
-    renderItem={renderItem}
-    renderValue={renderValue}
-    valueToItem={valueToItem}
-    valueToString={renderValue}
-    getItems={getModelItems}
-    onValueChange={setSelectedItems}
-    placeholder="placeholder"
-    type={TokenInputType.Combined}
-    renderToken={(item, tokenProps) => (
-      <Token
-        key={item.id}
-        {...tokenProps}
-      >
-        {item.value}
-      </Token>
-    )}
-  />
-</div>;
-```
-
-### Дебаунс функции getItems
-
-Функция debounce из lodash некорректно работает с async/promise, поэтому лучше использовать кастомную функцию, как в примере ниже.
-
-```jsx harmony
-import { TokenInput } from "@skbkontur/react-ui";
-import { TokenInputType } from "@skbkontur/react-ui/components/TokenInput";
-
-const [value, setValue] = React.useState([]);
-
-function debounceAsync(callback, wait) {
-  let timeoutId = null;
-
-  return (...args) => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-
-    return new Promise((resolve) => {
-      const timeoutPromise = new Promise((resolve) => {
-        timeoutId = setTimeout(resolve, wait);
-      });
-      timeoutPromise.then(async () => {
-        resolve(await callback(...args));
-      });
-    });
-  };
-}
-
-const items = ["kon", "kod", "kof", "kor", "kos"];
-
-const getItems = async (query) => {
-  console.log("query: ", query);
-  return items.filter((item) => item.includes(query));
-};
-
-<TokenInput
-  style={{ width: "300px" }}
-  type={TokenInputType.Combined}
-  selectedItems={value}
-  onValueChange={setValue}
-  getItems={debounceAsync(getItems, 300)}
-  placeholder="Начните вводить название"
-/>
-```
-
-### Типизированная версия функции
-
-```typescript static
-function debounceAsync<T, Callback extends (...args: any[]) => Promise<T>>(
-  callback: Callback,
-  wait: number,
-): (...args: Parameters<Callback>) => Promise<T> {
-  let timeoutId: number | null = null;
-
-  return (...args: any[]) => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-
-    return new Promise<T>((resolve) => {
-      const timeoutPromise = new Promise<void>((resolve) => {
-        timeoutId = setTimeout(resolve, wait);
-      });
-      timeoutPromise.then(async () => {
-        resolve(await callback(...args));
-      });
-    });
-  };
-}
-```
-
-### Локали по умолчанию
-
-```typescript static
-interface TokenInputLocale {
-  addButtonComment?: string;
-  addButtonTitle?: string;
-}
-
-const ru_RU = {
-  addButtonComment: 'Нажмите запятую',
-  addButtonTitle: 'Добавить',
-};
-
-const en_GB = {
-  addButtonComment: 'Type comma',
-  addButtonTitle: 'Add',
-};
-```

package/components/Tooltip/Tooltip.md

@@ -1,322 +0,0 @@
-### Базовый пример
-Отступы в тултипе подобраны так, чтобы базовая линия текста со шрифтом Segoe UI в тултипе совпадала с базовой линией стандартных контролов
-
-```jsx harmony
-import SearchIcon from '@skbkontur/react-icons/Search';
-import MenuIcon from '@skbkontur/react-icons/Menu';
-import HelpDotIcon from '@skbkontur/react-icons/HelpDot';
-import { Button, Gapped, Input, Select, Tooltip } from '@skbkontur/react-ui';
-
-const [size, setSize] = React.useState('small');
-
-const render = () => (
-  <div
-    style={{
-      width: 250,
-      fontSize: size === 'large' ? 16 : 14,
-      fontFamily: 'Segoe UI',
-    }}
-  >
-    Задача организации, в особенности же рамки и место обучения кадров влечет за собой процесс внедрения и модернизации
-    форм развития.
-  </div>
-);
-
-<div style={{ fontFamily: 'Segoe UI' }}>
-  <Gapped vertical>
-    <Gapped>
-      <div style={{ width: 40 }}>Size</div>
-      <Select width={120} value={size} items={['small', 'medium', 'large']} onValueChange={setSize} size={size} />
-    </Gapped>
-    <Tooltip render={render} pos="right top">
-      <Input size={size} leftIcon={<SearchIcon />} width={170} />
-    </Tooltip>
-    <Tooltip render={render} pos="right top">
-      <Button size={size} icon={<MenuIcon />}>
-        Menu
-      </Button>
-    </Tooltip>
-    <Tooltip render={render} pos="right top">
-      <HelpDotIcon />
-    </Tooltip>
-  </Gapped>
-</div>;
-```
-
-### Выравнивание базовой линии
-Выравнивание базовой линии с RadioGroup требует дополнительных отступов.
-
-```jsx harmony
-import { Gapped, Tooltip, RadioGroup, Radio } from '@skbkontur/react-ui';
-
-const render = () => (
-  <div
-    style={{
-      fontSize: 14,
-      fontFamily: 'Segoe UI',
-    }}
-  >
-    Выровнено по первому Radio
-  </div>
-);
-
-<div style={{ fontFamily: 'Segoe UI' }}>
-  <Tooltip useWrapper={false} render={render} pos="right top">
-    <div style={{ padding: '10px 0', display: 'inline-block' }}>
-      <RadioGroup>
-        <Gapped vertical gap={0}>
-          <Radio value="2">Two</Radio>
-          <Radio value="4">Four</Radio>
-          <Radio value="6">Six</Radio>
-          <Radio value="8">Eight</Radio>
-        </Gapped>
-      </RadioGroup>
-    </div>
-  </Tooltip>
-</div>;
-```
-
-### Расположение тултипа
-Тултип может располагаться в одной из 12 позиции и триггериться одним из 8 способов.
-
-```jsx harmony
-import { Button, Center, Gapped, Select, Tooltip } from '@skbkontur/react-ui';
-
-const S = 60;
-
-const Block = ({ pos, trigger, top, left, onMouseDown }) => (
-  <div
-    style={{
-      top,
-      left,
-      display: 'inline-block',
-      position: 'absolute',
-      cursor: trigger === 'click' ? 'pointer' : 'default',
-    }}
-  >
-    <Tooltip render={() => pos} pos={pos} trigger={trigger}>
-      <div
-        tabIndex={trigger === 'focus' || trigger === 'hover&focus' ? 0 : null}
-        style={{
-          height: S - 5,
-          width: S - 5,
-          background: 'gray',
-          border: 'solid 1px',
-          boxShadow: '0 1px 5px rgba(0, 0, 0, 0.3)',
-        }}
-      />
-    </Tooltip>
-  </div>
-);
-
-class UseManualTooltip extends React.Component {
-  constructor(props) {
-    super(props);
-    this.tooltip = null;
-  }
-
-  render() {
-    return (
-      <Gapped vertical>
-        <Gapped>
-          <Button width={1.5 * S - 5} onClick={this.handleClickOnShow.bind(this)}>
-            Show
-          </Button>
-          <Button width={1.5 * S - 5} onClick={this.handleClickOnHide.bind(this)}>
-            Hide
-          </Button>
-        </Gapped>
-        <Tooltip
-          render={() => 'Manual tooltip'}
-          pos="bottom center"
-          trigger="manual"
-          ref={element => {
-            this.tooltip = element;
-          }}
-        >
-          <div
-            style={{
-              width: 3 * S,
-              height: S,
-              lineHeight: `${S}px`,
-              background: 'gray',
-              border: 'solid 1px',
-              boxShadow: '0 1px 5px rgba(0, 0, 0, 0.3)',
-              textAlign: 'center',
-            }}
-          >
-            Manual control
-          </div>
-        </Tooltip>
-      </Gapped>
-    );
-  }
-
-  handleClickOnShow() {
-    if (this.tooltip) {
-      this.tooltip.show();
-    }
-  }
-  handleClickOnHide() {
-    if (this.tooltip) {
-      this.tooltip.hide();
-    }
-  }
-}
-
-const blocks = [
-  { top: S, left: S * 2, pos: 'top left' },
-  { top: S, left: S * 4, pos: 'top center' },
-  { top: S, left: S * 6, pos: 'top right' },
-  { top: S * 2, left: S * 7, pos: 'right top' },
-  { top: S * 4, left: S * 7, pos: 'right middle' },
-  { top: S * 6, left: S * 7, pos: 'right bottom' },
-  { top: S * 7, left: S * 6, pos: 'bottom right' },
-  { top: S * 7, left: S * 4, pos: 'bottom center' },
-  { top: S * 7, left: S * 2, pos: 'bottom left' },
-  { top: S * 6, left: S, pos: 'left bottom' },
-  { top: S * 4, left: S, pos: 'left middle' },
-  { top: S * 2, left: S, pos: 'left top' },
-];
-
-const [trigger, setTrigger] = React.useState('hover');
-
-const isManual = trigger === 'manual';
-
-<div
-  style={{
-    width: S * 9,
-    height: S * 9,
-    position: 'relative',
-    border: '1px solid',
-    background: `repeating-linear-gradient(
-                            45deg,
-                            #808080,
-                            #808080 ${S / 4}px,
-                            #d3d3d3 ${S / 4}px,
-                            #d3d3d3 ${S / 2}px
-                          )`,
-  }}
->
-  <Center>
-    <Gapped vertical>
-      <Gapped>
-        Trigger
-        <Select
-          width={S * 2}
-          size="small"
-          value={trigger}
-          items={['click', 'hover', 'focus', 'hover&focus', 'hoverAnchor', 'opened', 'closed', 'manual']}
-          onValueChange={setTrigger}
-        />
-      </Gapped>
-      {isManual ? <UseManualTooltip /> : null}
-    </Gapped>
-  </Center>
-
-  {!isManual && blocks.map((block, i) => <Block key={i} {...block} trigger={trigger} />)}
-</div>;
-```
-
-### anchorElement
-Есть возможность прицеплять тултип к любому HTML элементу на странице с помощью `anchorElement`. При этом сам `Tooltip` может рендериться в совершенно другом месте приложения.
-
-```jsx harmony
-import { Tooltip } from '@skbkontur/react-ui';
-
-const S = 60;
-const blockStyle = {
-  height: S - 5,
-  width: S - 5,
-  boxShadow: '0 1px 5px rgba(0, 0, 0, 0.3)',
-  background: 'gray',
-  border: '1px solid'
-};
-const containerStyle = {
-  width: S * 9,
-  height: S * 9,
-  position: 'relative',
-  background: `repeating-linear-gradient(
-                                45deg,
-                                #808080,
-                                #808080 ${S / 4}px,
-                                #d3d3d3 ${S / 4}px,
-                                #d3d3d3 ${S / 2}px
-                              )`,
-  border: '1px solid',
-};
-
-const blocks = [
-  { top: S, left: S * 2 },
-  { top: S, left: S * 4 },
-  { top: S, left: S * 6 },
-  { top: S * 2, left: S * 7 },
-  { top: S * 4, left: S * 7 },
-  { top: S * 6, left: S * 7 },
-  { top: S * 7, left: S * 6 },
-  { top: S * 7, left: S * 4 },
-  { top: S * 7, left: S * 2 },
-  { top: S * 6, left: S },
-  { top: S * 4, left: S },
-  { top: S * 2, left: S },
-];
-
-class AnchorTooltipExample extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      blocks,
-      anchor: null,
-    };
-  }
-
-  render() {
-    return (
-      <>
-        {this.state.anchor ? (
-          <Tooltip anchorElement={this.state.anchor} render={() => 'Hello React'} trigger="hover" />
-        ) : null}
-        <div style={containerStyle}>
-          {this.state.blocks.map(({ top, left }, i) => (
-            <div key={i} style={{ top, left, display: 'inline-block', position: 'absolute' }}>
-              <div
-                style={blockStyle}
-                onMouseEnter={event => this.setState({ anchor: event.target })}
-                onMouseLeave={() => this.setState({ anchor: null })}
-              />
-            </div>
-          ))}
-        </div>
-      </>
-    );
-  }
-}
-
-<AnchorTooltipExample />;
-```
-
-### Задержка перед появлением
-У тултипа можно переопределить задержку перед его появлением. Скрытие же происходит с задержкой по умолчанию.
-
-```jsx harmony
-import HelpDotIcon from '@skbkontur/react-icons/HelpDot';
-import { Input, Gapped, Tooltip } from '@skbkontur/react-ui';
-
-const [delay, setDelay] = React.useState(100);
-
-const render = () => (
-  <div>
-    {`Showed with ${delay}ms delay`}
-  </div>
-);
-
-<div>
-  <Gapped vertical>
-    <Gapped>Show delay: <Input value={delay} onValueChange={setDelay} /></Gapped>
-    <Tooltip render={render} delayBeforeShow={delay} pos="right top">
-      <HelpDotIcon />
-    </Tooltip>
-  </Gapped>
-</div>;
-```