# Scope 区间

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/scope/freepass)
- 平台：PC
- 维护者：赵俊飞
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys/#s36
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Scope]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React from "react";
import { constants, Scope, ScopeValue, Icon } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-scope`;

type ScopeDemoState = {
  value1?: ScopeValue;
}

class ScopeDemo extends React.Component<any, ScopeDemoState> {
  constructor(props: any) {
    super(props)
    this.state = {
      value1: {
        min: 1,
        max: 10
      }
    }
  }

  handleChange = (value: ScopeValue) => {
    this.setState({ value1: value }, () => {
      console.log(this.state.value1)
    })
  }

  handleBlur = (value: ScopeValue) => {
    console.log(value)
    this.setState({ value1: value })
  }

  render() {
    const { value1 } = this.state

    return (
      <div className={prefixCls}>
        <div>
          <Scope
            defaultValue={value1}
            onChange={this.handleChange}
            onBlur={this.handleBlur}
            range={{
              min: -10,
              max: 10
            }}
          />
        </div>
      </div>
    );
  }
}

export default ScopeDemo;
```

### 下划线样式

```jsx
import React from "react";
import { constants, Scope, ScopeValue } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-scope`;

type ScopeDemoState = {
  value2?: ScopeValue;
  underline: boolean
}

class ScopeDemo extends React.Component<any, ScopeDemoState> {
  constructor(props: any) {
    super(props)
    this.state = {
      value2: {
        min: 2,
        max: 10
      },
      underline: true
    }
  }

  handleChange2 = (value: ScopeValue) => {
    this.setState({ value2: value })
  }

  handleBlur2 = (value: ScopeValue) => {
    this.setState({ value2: value })
  }

  render() {
    const { value2, underline } = this.state

    return (
      <div className={prefixCls}>
        <div>
          <Scope underline={underline} value={value2} onChange={this.handleChange2} onBlur={this.handleBlur2} />
        </div>
      </div>
    );
  }
}

export default ScopeDemo;
```

### 设置范围（-10~10）

```jsx
import React from "react";
import { constants, Scope, ScopeValue } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-scope`;
type ScopeDemoState = {
  range?: ScopeValue;
  value3?: ScopeValue;
}

class ScopeDemo extends React.Component<any, ScopeDemoState> {
  constructor(props: any) {
    super(props)
    this.state = {
      range: {
        min: -10,
        max: 10
      },
      value3: {
        min: 2,
        max: 10
      }
    }

  }

  handleChange3 = (value: ScopeValue) => {
    this.setState({ value3: value })
  }

  handleBlur3 = (value: ScopeValue) => {
    this.setState({ value3: value })
  }

  render() {
    const { value3, range } = this.state

    return (
      <div className={prefixCls}>
        <div>
          <Scope
            range={{
              min: -10,
              max: 10
            }}
            defaultValue={value3}
            onChange={this.handleChange3}
            onBlur={this.handleBlur3}
          />
        </div>

      </div>
    );
  }
}

export default ScopeDemo;
```

### 只读

```jsx
import React from "react";
import { constants, Scope, ScopeValue } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-scope`;

type ScopeDemoState = {
  value4?: ScopeValue;
}

class ScopeDemo extends React.Component<any, ScopeDemoState> {
  constructor(props: any) {
    super(props)
    this.state = {
      value4: {
        min: 2,
        max: 10
      },
    }
  }

  handleChange4 = (value: ScopeValue) => {
    this.setState({ value4: value })
  }

  render() {
    const { value4 } = this.state

    return (
      <div className={prefixCls}>
        <div>
          <Scope readOnly value={value4} onChange={this.handleChange4} />
        </div>
      </div>
    );
  }
}

export default ScopeDemo;
```

### 禁用

```jsx
import React from "react";
import { constants, Scope, ScopeValue } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-scope`;

type ScopeDemoState = {
  value6?: ScopeValue;
}

class ScopeDemo extends React.Component<any, ScopeDemoState> {
  constructor(props: any) {
    super(props)
    this.state = {

      value6: {
        min: 2,
        max: 10
      },

    }
  }

  handleChange6 = (value: ScopeValue) => {
    this.setState({ value6: value })
  }

  render() {
    const { value6 } = this.state

    return (
      <div className={prefixCls}>
        <div>
          <Scope disabled value={value6} onChange={this.handleChange6} />
          <Scope disabled />
        </div>
      </div>
    );
  }
}

export default ScopeDemo;
```

### 受控

```jsx
import React from "react";
import { constants, Scope, ScopeValue, Icon } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-scope`;

class ScopeDemo extends React.Component {
  state = {
    value: {
      min: 1,
      max: 10
    }
  }

  handleChange = (value: ScopeValue) => {
    this.setState({ value }, () => {
      console.log(this.state.value)
    })
  }

  handleBlur = (value: ScopeValue) => {
    console.log(value)
    this.setState({ value })
  }

  render() {
    const { value } = this.state

    return (
      <div className={prefixCls}>
        <div>
          <Scope
            value={value}
            range={{
              min: -10,
              max: 10
            }}
            onChange={this.handleChange}
            onBlur={this.handleBlur}

          />
        </div>
      </div>
    );
  }
}

export default ScopeDemo;
```

### 接收input的参数

```jsx
import React from "react";
import { constants, Scope, ScopeValue, InputNumberProps } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-scope`;

type ScopeDemoState = {
  value1?: ScopeValue;
}

class ScopeDemo extends React.Component<any, ScopeDemoState> {
  constructor(props: any) {
    super(props)
    this.state = {
      value1: {
        min: 1,
        max: 10
      }
    }
  }

  handleChange = (value: ScopeValue) => {
      console.log(value)
  }

  handleBlur = (value: ScopeValue) => {
    console.log(value)
  }

  render() {
    const { value1 } = this.state
    const inputProps: InputNumberProps = { hideOps: false };
    const inputProps1: InputNumberProps = { hideOps: false, align: "right" };
    return (
      <div className={prefixCls}>
        <div>
          <h3>显示操作按钮</h3>
          <Scope
            defaultValue={value1}
            onChange={this.handleChange}
            range={{
              min: -10,
              max: 10
            }}
            inputProps={inputProps}
          />
        </div>
        <div>
          <h3>操作按钮右对齐</h3>
          <Scope
            defaultValue={value1}
            onChange={this.handleChange}
            range={{
              min: -10,
              max: 10
            }}
            inputProps={inputProps1}
          />
        </div>
      </div>
    );
  }
}

export default ScopeDemo;
```

### 自定义分隔符

```jsx
import React from "react";
import { constants, Scope, ScopeValue, Icon } from "@weapp/ui";

const prefixCls = `${constants.uiPcClsPrefix}-demo-scope`;

type ScopeDemoState = {
  value1?: ScopeValue;
}

class ScopeDemo extends React.Component<any, ScopeDemoState> {
  constructor(props: any) {
    super(props)
    this.state = {
      value1: {
        min: 1,
        max: 10
      }
    }
  }

  handleChange = (value: ScopeValue) => {
    this.setState({ value1: value }, () => {
      console.log(this.state.value1)
    })
  }

  handleBlur = (value: ScopeValue) => {
    console.log(value)
    this.setState({ value1: value })
  }

  render() {
    const { value1 } = this.state

    return (
      <div className={prefixCls}>
        <div>
          <Scope 
            defaultValue={value1}
            onChange={this.handleChange}
            onBlur={this.handleBlur}
            range={{
              min: -10,
              max: 10
            }}
            divider='--'
          />
        </div>
      </div>
    );
  }
}

export default ScopeDemo;
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 当前数(受控值) | ScopeValue | F |  |
| defaultValue | 默认值 | ScopeValue | F |  |
| range | 范围 | ScopeValue | F |  |
| precision | 数据精度 | number | F |  |
| underline | 是否下划线样式 | boolean | F |  |
| disabled | 是否禁用 | boolean | F |  |
| readOnly | 是否只读 | boolean | F |  |
| divider | 分割符 | ReactElement \| ReactNode | F | - |
| onChange | onChange 事件回调 | (value: ScopeValue) => {} | F |  |
| onFocus | onFocus 事件回调 | (value:ScopeValue) => {} | F |  |
| onBlur | onBlur 事件回调 | (value: ScopeValue) => {} | F |  |
| inputProps | 输入框属性 | InputNumberProps | F |  |
| leftInputProps | 左侧输入框属性, 优先级高于inputProps | InputNumberProps | F |  |
| rightInputProps | 右侧输入框属性, 优先级高于inputProps | InputNumberProps | F |  |
