@skbkontur/react-ui 0.0.0-a8f1c3e7a1 → 0.0.0-aa4659ca48

package/components/Checkbox/Checkbox.md

@@ -1,171 +0,0 @@
-### Базовый пример чекбокса
-
-```jsx harmony
-const [checked, setChecked] = React.useState(false);
-
-<Checkbox checked={checked} onValueChange={setChecked}>
-  Обычный чекбокс
-</Checkbox>;
-```
-
-### Cостояния
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-const CheckboxWithState = ({children, ...props}) => {
-  const [checked, setChecked] = React.useState(false);
-
-  return (
-    <Checkbox checked={checked} onValueChange={setChecked} {...props}>
-      {children}
-    </Checkbox>
-  )
-};
-
-<Gapped vertical>
-  <CheckboxWithState>
-    Обычный чекбокс
-  </CheckboxWithState>
-  <CheckboxWithState error>
-    Чекбокс в состоянии ошибки
-  </CheckboxWithState>
-  <CheckboxWithState warning>
-    Чекбокс в состоянии предупреждения
-  </CheckboxWithState>
-</Gapped>
-```
-
-### Размер
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped vertical>
-  <Checkbox size="small" checked>
-    Маленький
-  </Checkbox>
-  <Checkbox size="medium" checked>
-    Средний
-  </Checkbox>
-  <Checkbox size="large" checked>
-    Большой
-  </Checkbox>
-</Gapped>
-```
-
-### focus и blur
-
-```jsx harmony
-import { Button, Checkbox, Gapped } from '@skbkontur/react-ui';
-
-const [checked, setChecked] = React.useState(false);
-
-let checkboxInstance = React.useRef(null);
-
-<Gapped vertical>
-  <Checkbox
-    ref={el => checkboxInstance = el}
-    checked={checked}
-    onValueChange={setChecked}
-    >
-    Пример чекбокса с программным фокусом
-  </Checkbox>
-  <Gapped gap={12}>
-    <Button
-      onClick={() => {
-        checkboxInstance.focus();
-      }}
-    >
-      Дать фокус
-    </Button>
-    <Button
-      onClick={() => {
-        checkboxInstance.blur();
-      }}
-    >
-      Забрать фокус
-    </Button>
-  </Gapped>
-</Gapped>
-```
-
-### Неопределенное состояние
-Чекбокс может находится в неопределённом состоянии. <br/> Это состояние полностью копирует поведение состояния `indeterminate` ([подробнее](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)) из HTML.
-
-Это состояние влияет только на внешний вид и не влияет на состояние `checked`.
-
-```jsx harmony
-import { Button, Checkbox, Gapped } from '@skbkontur/react-ui';
-
-const [checked, setChecked] = React.useState(false);
-
-let checkboxInstance = React.useRef(null);
-
-<Gapped vertical>
-  <Checkbox
-    initialIndeterminate
-    checked={checked}
-    onValueChange={setChecked}
-    ref={el => checkboxInstance = el}
-  >
-    Неопределённый чекбокс
-  </Checkbox>
-  <Gapped>
-    <Button onClick={() => checkboxInstance.setIndeterminate()}>
-      Перевести в неопределённое состояние
-    </Button>
-    <Button onClick={() => checkboxInstance.resetIndeterminate()}>
-      Сбросить неопределённое состояние
-    </Button>
-  </Gapped>
-</Gapped>
-```
-
-### Пример использования неопределённого состояния чекбокса
-
-```jsx harmony
-const [checkedSiblings, setCheckedSiblings] = React.useState([]);
-const siblingCheckboxes = [1, 2];
-
-let parentCheckboxRef;
-
-React.useEffect(() => {
-  if (checkedSiblings.length === 0 || checkedSiblings.length === siblingCheckboxes.length) {
-    parentCheckboxRef.resetIndeterminate();
-  } else if (checkedSiblings.length !== 0) {
-    parentCheckboxRef.setIndeterminate();
-  }
-}, [JSON.stringify(checkedSiblings)]);
-
-<>
-  <Checkbox checked={checkedSiblings.length === siblingCheckboxes.length} ref={(el) => (parentCheckboxRef = el)}>
-    Родитель
-  </Checkbox>
-  <div style={{ display: 'flex', flexDirection: 'column', marginLeft: '20px' }}>
-    {siblingCheckboxes.map((id) => {
-      return (
-        <Checkbox
-          key={id}
-          checked={checkedSiblings.includes(id)}
-          onValueChange={() => {
-            const siblingIndex = checkedSiblings.indexOf(id);
-
-            if (siblingIndex === -1) {
-              setCheckedSiblings((prev) => [...prev, id]);
-            } else {
-              setCheckedSiblings((prev) =>
-                prev.filter((siblingId) => {
-                  return siblingId !== id;
-                }),
-              );
-            }
-          }}
-        >
-          Ребёнок ({id})
-        </Checkbox>
-      );
-    })}
-  </div>
-</>
-```