@auraxy/react-select/README-CN.md

A react select component

# @auraxy/react-select
[![NPM Version](http://img.shields.io/npm/v/@auraxy/react-select.svg?style=flat-square)](https://www.npmjs.com/package/@auraxy/react-select)
[![Download Month](http://img.shields.io/npm/dm/@auraxy/react-select.svg?style=flat-square)](https://www.npmjs.com/package/@auraxy/react-select)
![gzip with dependencies: kb](https://img.shields.io/badge/gzip--with--dependencies-kb-brightgreen.svg "gzip with dependencies: kb")
![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")

> `pkg.module supported`, 天然支持 tree-shaking, 使用 es module 引用即可

[English Document](./README.md)

A react select component

## Installation
```bash
npm i -S @auraxy/react-select
```

## Global name - The variable the module exported in `umd` bundle
`ReactSelect`

## Interface
去 [index.d.ts](./index.d.ts) 查看可用方法和参数

## Usage
```typescript jsx
import React from 'react'
import { SelectBase, Cascader, SelectBaseOption } from '@auraxy/react-select'
import 'node_modules/@livelybone/react-popper/lib/css/index.scss'
import 'node_modules/react-perfect-scrollbar/dist/css/styles.css'
import 'node_modules/@auraxy/react-select/lib/css/index.scss'

const Options = [
  { label: 'place 1', value: 1, children: [{ label: 'child 1', value: 1 }] },
  { label: 'place 2', value: 2 },
  { label: 'place 3', value: 3 },
  { label: 'place 4', value: 4 },
  { label: 'place 5', value: 5 },
  { label: 'place 6', value: 6 },
  { label: 'place 7', value: 7 },
  { label: 'place 8', value: 8 },
  { label: 'place 9', value: 9 },
  { label: 'place 10', value: 10 },
  { label: 'place 11', value: 11 },
  { label: 'place 12', value: 12 },
  { label: 'place 13', value: 13 },
  { label: 'place 14', value: 14 },
  { label: 'place 15', value: 15 },
  { label: 'place 16', value: 16 },
  { label: 'place 17', value: 17 },
]
const Page = () => {
  const [value, set] = React.useState('')
  const [options, setOptions] = React.useState(Options)
  
  return (
    <div>
      {/*SelectBase*/}
      <SelectBase
        value={value}
        options={options}
        scrollBarProps={{
          style: {
            maxHeight: '50vh',
          },
        }}
        onChange={set}
        onSearch={ev => {
          const value = ev.target.value
          setOptions(Options.filter(op => op.label.includes(value)))
        }}
      >
        extra content
      </SelectBase>
      
      {/*SelectBase with SelectBaseOption*/}
      <SelectBase
        value={value}
        scrollBarProps={{
          style: {
            maxHeight: '50vh',
          },
        }}
        onChange={set}
        onSearch={ev => {
          const value = ev.target.value
          setOptions(Options.filter(op => op.label.includes(value)))
        }}
      >
        {options.map(op => <SelectBaseOption {...op}>{op.label}</SelectBaseOption>)}
        extra content
      </SelectBase>
      
      {/*Cascader*/}
      <Cascader
        options={options}
        scrollBarProps={{
          style: {
            maxHeight: '50vh',
          },
        }}
        onChange={set}
        onSearch={ev => {
          const value = ev.target.value
          setOptions(Options.filter(op => op.label.includes(value)))
        }}
      />
    </div>
  )
}
```

在 HTML 文件中直接引用，你可以在 [CDN: unpkg](https://unpkg.com/@livelybone/form/lib/umd/) 看到你能用到的所有 js 脚本
```html
<-- 然后使用你需要的 -->
<script src="https://unpkg.com/@livelybone/form/lib/umd/<--module-->.js"></script>
```

## style
你可能需要主动引入样式文件来应用组件的样式：
```js
// scss
import 'node_modules/@auraxy/react-select/lib/css/index.scss'

// css
import 'node_modules/@auraxy/react-select/lib/css/index.css'
```
Or
```scss
// scss
@import 'node_modules/@auraxy/react-select/lib/css/index.scss'

// css
@import 'node_modules/@auraxy/react-select/lib/css/index.css'
```

你也可以通过引入自定义的组件样式文件来自定义样式，文件可以通过复制并修改 `node_modules/@auraxy/react-select/lib/css/index.scss` 得到

### Warning: 你需要手动引用 scrollbar 和 react-popper 的样式文件
由于 index.css 不包含 scrollbar 和 react-popper 的样式, 你需要在你的项目中手动引用他们
```js
import 'node_modules/@livelybone/react-popper/lib/css/index.scss'
import 'node_modules/react-perfect-scrollbar/dist/css/styles.css'
```
Or
```scss
@import 'node_modules/@livelybone/react-popper/lib/css/index.scss';
@import 'node_modules/react-perfect-scrollbar/dist/css/styles.css';
```

## QA

1. Error `Error: spawn node-sass ENOENT`

> 你可能需要全局安装 node-sass，`npm i -g node-sass`