Skip to content

Commit

Permalink
refactor(Range): convert to TypeScript, impove docs and tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@wangw11056
wangw11056 committed Sep 27, 2024
1 parent 404c7cc commit 7c192b1
Show file tree
Hide file tree
Showing 21 changed files with 797 additions and 675 deletions.
13 changes: 12 additions & 1 deletion components/range/__docs__/adaptor/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { Types } from '@alifd/adaptor-helper';
import { Range } from '@alifd/next';
import type { RangeProps } from '@alifd/next/types/range';

export default {
name: 'Range',
Expand Down Expand Up @@ -70,6 +71,16 @@ export default {
end,
style,
...others
}: {
shape: 'basic' | 'scale';
level: RangeProps['slider'];
type: 'basic' | 'scale';
scalePosition: RangeProps['marksPosition'];
state: 'normal' | 'hover' | 'clicked' | 'disabled';
width: number;
start: number;
end: number;
style: React.CSSProperties;
}) => {
return (
<div {...others} style={{ width, ...style }}>
Expand All @@ -90,7 +101,7 @@ export default {
</div>
);
},
demoOptions: demo => {
demoOptions: (demo: any) => {
const { node } = demo;
const { props } = node;
if (props.level === 'double') {
Expand Down
1 change: 0 additions & 1 deletion components/range/__docs__/demo/basic/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ const Demo = () => {
<div style={{ width: 400 }}>
<Range defaultValue={30} disabled={disabled} style={style} />
<Range slider="double" defaultValue={[20, 70]} disabled={disabled} style={style} />

<div style={{ display: 'flex', alignItems: 'center' }}>
Disabled: <Switch checked={disabled} onChange={setDisabled} />
</div>
Expand Down
7 changes: 4 additions & 3 deletions components/range/__docs__/demo/change/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Range } from '@alifd/next';
import type { RangeValueType } from '@alifd/next/types/range';

const onProcess = value => {
const onProcess = (value: RangeValueType) => {
// This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.
console.log('onProcess: ', value);
};

const Demo = () => {
const [value, onChange] = React.useState(128);
const [doubleValue, onDoubleChange] = React.useState([200, 500]);
const [value, onChange] = React.useState<RangeValueType>(128);
const [doubleValue, onDoubleChange] = React.useState<RangeValueType>([200, 500]);

return (
<div style={{ width: 400 }}>
Expand Down
8 changes: 5 additions & 3 deletions components/range/__docs__/demo/control/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@ import ReactDOM from 'react-dom';
import { Range, NumberPicker, Icon } from '@alifd/next';

const Demo = () => {
const [valueInc, setValueInc] = React.useState(30);
const [valueInc, setValueInc] = React.useState<any>(30);

const colorCry = ``;
return (
<div style={{ width: 400 }}>
<div style={{ display: 'flex' }}>
Expand All @@ -22,7 +21,10 @@ const Demo = () => {
<div style={{ display: 'flex', marginTop: 20 }}>
<Icon
type="cry"
style={{ marginRight: 10, color: `rgba(50,50,50, ${(100 - valueInc) / 100})` }}
style={{
marginRight: 10,
color: `rgba(50,50,50, ${(100 - valueInc) / 100})`,
}}
/>
<Range
value={valueInc}
Expand Down
10 changes: 6 additions & 4 deletions components/range/__docs__/demo/fixedWidth/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Range } from '@alifd/next';
import type { RangeValueType } from '@alifd/next/types/range';

const style = {
marginBottom: '15px',
Expand All @@ -10,22 +11,23 @@ const styleX3 = {
marginBottom: '45px',
};

class App extends React.Component {
constructor(props) {
interface AppProps {}
class App extends React.Component<AppProps, { value: RangeValueType }> {
constructor(props: AppProps) {
super(props);
this.state = {
value: [10, 300],
};
}

//Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding
onChange(value) {
onChange(value: RangeValueType) {
console.log('onChange value:', value);
this.setState({ value });
}

// This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.
onProcess(value) {
onProcess(value: RangeValueType) {
// this.setState({value});
console.log('onProcess: ', value);
}
Expand Down
12 changes: 7 additions & 5 deletions components/range/__docs__/demo/tipRender/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,29 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Range } from '@alifd/next';
import type { RangeValueType } from '@alifd/next/types/range';

class App extends React.Component {
constructor(props) {
interface AppProps {}
class App extends React.Component<AppProps, { value: RangeValueType }> {
constructor(props: AppProps) {
super(props);
this.state = {
value: 128,
};
}

// This callback will be triggered when startValue and endValue aren't equal after moving.
onChange(value) {
onChange(value: RangeValueType) {
console.log('onChange value:', value);
}

// This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You can call setState here when using a controlled component.
onProcess(value) {
onProcess(value: RangeValueType) {
console.log('onProcess');
this.setState({ value });
}

formatter(value) {
formatter(value: RangeValueType) {
return `0 ~ ${value}`;
}
render() {
Expand Down
56 changes: 32 additions & 24 deletions components/range/__docs__/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,30 +23,38 @@ Range Component is used to select a value in a range by dragging slider. Normall

### Range

| Param | Descripiton | Type | Default Value |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | -------------- |
| slider | number of sliders<br><br>**option**:<br>'single'<br>'double' | Enum | 'single' |
| min | minimal value | Number | 0 |
| max | maximal value | Number | 100 |
| step | step of the range, which is positive integer and (max - min) can be divided by it | Number | 1 |
| value | current value. It's in the form of `Number` when `slider` is `single` otherwise `[Number, Number]` | Number/[Number, Number] | - |
| defaultValue | default value. It's in the form of `Number` when `slider` is `single` otherwise `[Number, Number]` | Number/[Number, Number] | - |
| marks | way to show the scale. (`false` means nothing, `array` means enum, `number` means equal division, and `object` means `key` as the mark with `value` as the value) | Boolean/Number/Array&lt;Number>/Object | false |
| marksPosition | position for the scale<br><br>**option**:<br>'above', 'below' | Enum | 'above' |
| disabled | disabled | Boolean | false |
| onChange | callback triggered when value changes | Function(value: Number/[Number, Number]) => void | func.noop |
| onProcess | callback triggered when slider being dragged, and used only for special need | Function(value: Number/[Number, Number]) => void | func.noop |
| hasTip | whether to show tip | Boolean | true |
| tipRender | custom tip content<br><br>**signature**:<br>Function(value?: Number/String) => ReactNode<br>**signature**:<br>_value_: {Number/String} value<br>**returns**:<br>{ReactNode} content<br> | Function | value => value |
| reverse | reverse the selected part | Boolean | false |
| pure | pure render or not | Boolean | false |
| fixedWidth | drag a line with fixed width. It considers `slider` as `double`, and `defaultValue` must be a interval. | Boolean | false |
| tooltipVisible| tooltip always be visible or not | Boolean | false |
| Param | Description | Type | Default Value | Required |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------------- | -------- |
| slider | Number of sliders<br><br>**option**:<br>'single'<br>'double' | 'single' \| 'double' | 'single' | |
| min | Minimal value | number | 0 | |
| max | Maximal value | number | 100 | |
| step | Step of the range, which is positive integer and (max | number | 1 | |
| value | Current value. It's in the form of `Number` when `slider` is `single` otherwise `[Number, Number]` | RangeValueType | - | |
| defaultValue | Default value. It's in the form of `Number` when `slider` is `single` otherwise `[Number, Number]` | RangeValueType | - | |
| marks | Way to show the scale. (`false` means nothing, `array` means enum, `number` means equal division, and `object` means `key` as the mark with `value` as the value) | false \| number \| Array\<number> \| Record\<number, string> | false | |
| marksPosition | Position for the scale<br><br>**option**:<br>'above', 'below' | 'above' \| 'below' | 'above' | |
| disabled | Disabled | boolean | false | |
| onChange | Callback triggered when value changes<br/><br/>**signature**:<br/>**params**:<br/>_value_: The changed value | (value: RangeValueType) => void | () =\> void | |
| onProcess | Callback triggered when slider being dragged, and used only for special need<br/><br/>**signature**:<br/>**params**:<br/>_value_: The changed value | (value: RangeValueType) => void | () =\> void | |
| hasTip | Whether to show tip | boolean | true | |
| tipRender | Custom tip content<br/><br/>**signature**:<br/>**params**:<br/>_value_: The changed value<br/>**return**:<br/>React.ReactNode | (value: number \| string) => React.ReactNode | (value) =\> value | |
| reverse | Reverse the selected part | boolean | false | |
| pure | Pure render or not | boolean | false | |
| fixedWidth | Drag a line with fixed width. It considers `slider` as `double`, and `defaultValue` must be a interval. | boolean | false | |
| tooltipVisible | Tooltip always be visible or not | boolean | false | |
| isPreview | Is preview or not | boolean | false | |
| renderPreview | Custom preview content<br/><br/>**signature**:<br/>**params**:<br/>_value_: The changed value<br/>_props_: RangeProps<br/>**return**:<br/>React.ReactNode | (value: RangeValueType \| undefined, props: RangeProps) => React.ReactNode | - | |

### RangeValueType

```typescript
export type RangeValueType = number | [number, number];
```

## ARIA and KeyBoard

| KeyBoard | Descripiton |
| :---------- | :------------------------------ |
| Right Arrow | control the slider to move to the right |
| Left Arrow | control the slider to move to the left |
| Tab | switch to other slider |
| KeyBoard | Descripiton |
| :---------- | :-------------------------------------- |
| Right Arrow | control the slider to move to the right |
| Left Arrow | control the slider to move to the left |
| Tab | switch to other slider |
Loading

0 comments on commit 7c192b1

Please sign in to comment.