Skip to content

Commit 74f3f4c

Browse files
cuilanxincuilanxin
committed
chore(Stepper): Stepper组件重新优化构思
1 parent c36a264 commit 74f3f4c

File tree

9 files changed

+580
-654
lines changed

9 files changed

+580
-654
lines changed

‎example/examples/src/routes/SegmentedControl/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default class SegmentedControlView extends React.Component<SegmentedContr
4242
'设置自定义文本颜色 textColor?: {actived?: string, unactived?: string}'
4343
}>
4444
<SegmentedControl
45-
textColor={['#333', '#ccc']}
45+
textColor={{actived: '#333', unactived: '#ccc'}}
4646
color="#999"
4747
selectedIndex={2}
4848
value={['申请', '审批', '提交']}

‎example/examples/src/routes/Stepper/index.tsx‎

Lines changed: 124 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,138 @@
1-
/* tslint:disable:no-console */
21
import React from 'react';
32
import {View} from 'react-native';
4-
import {List, Stepper} from '@uiw/react-native';
5-
import Layout from '../../Layout';
6-
const {Header} = Layout;
3+
import {List, Stepper, Pagination, Button} from '@uiw/react-native';
4+
import Layout, {Container} from '../../Layout';
5+
6+
import {ComProps} from '../../routes';
7+
8+
const {Header, Body, Card, Footer} = Layout;
79

810
function onChange(value: any) {
9-
console.log('changed', value);
11+
// console.log('changed', value);
1012
}
11-
12-
export default class StepperExample extends React.Component<any, any> {
13+
export interface IndexProps extends ComProps {}
14+
export interface IndexState {
15+
value: number;
16+
value1: number;
17+
value2: number;
18+
}
19+
export default class StepperExample extends React.Component<
20+
IndexProps,
21+
IndexState
22+
> {
23+
state = {
24+
value: 0,
25+
value1: 2,
26+
value2: 0,
27+
};
1328
render() {
1429
const {route} = this.props;
1530
const description = route.params.description;
1631
const title = route.params.title;
32+
// const { value, value1, value2} = this.state
33+
const size = 'small';
34+
// 'small' | 'default' | 'large';
1735

18-
const readOnly = (
19-
<Stepper
20-
key="1"
21-
max={999}
22-
min={1}
23-
readOnly={false}
24-
defaultValue={888}
25-
onChange={onChange}
26-
/>
27-
);
2836
return (
29-
<View style={{flex: 1}}>
30-
<Header title={title} description={description} />
31-
<List>
32-
<List.Item
33-
extra={
34-
<Stepper
35-
key="0"
36-
max={9999}
37-
min={0}
38-
defaultValue={3}
39-
onChange={onChange}
40-
/>
41-
}>
42-
请选择您要购买iPhone 12 的数量：
43-
</List.Item>
44-
<List.Item extra={readOnly}>您当前选择的数量为: </List.Item>
45-
<List.Item
46-
extra={
47-
<Stepper
48-
key="2"
49-
disabled
50-
max={100}
51-
min={0}
52-
defaultValue={0}
53-
onChange={onChange}
54-
/>
55-
}>
56-
暂无库存：
57-
</List.Item>
58-
</List>
59-
</View>
37+
<Container>
38+
<Layout>
39+
<Header title={title} description={description} />
40+
<Body>
41+
<List flat={false} extra="test">
42+
<List.Item
43+
extra={
44+
<Stepper
45+
value={this.state.value}
46+
onChange={value => {
47+
this.setState({value});
48+
}}
49+
/>
50+
}>
51+
基本使用：
52+
</List.Item>
53+
<List.Item
54+
extra={
55+
<Stepper
56+
size="small"
57+
value={this.state.value}
58+
onChange={value => {
59+
this.setState({value});
60+
}}
61+
/>
62+
}>
63+
尺寸控制(size: small | default | large)：
64+
</List.Item>
65+
<List.Item
66+
extra={
67+
<Stepper
68+
disabledLongPress={true}
69+
value={this.state.value2}
70+
onChange={value2 => {
71+
this.setState({value2});
72+
}}
73+
/>
74+
}>
75+
按钮开启长按(disabledLongPress: boolean)：
76+
</List.Item>
77+
<List.Item
78+
extra={
79+
<Stepper
80+
width={120}
81+
value={this.state.value2}
82+
onChange={value2 => {
83+
this.setState({value2});
84+
}}
85+
/>
86+
}>
87+
自定义宽度(width: number)：
88+
</List.Item>
89+
<List.Item
90+
extra={
91+
<Stepper
92+
value={this.state.value}
93+
color={{
94+
color: '#ccc',
95+
borderColor: '#999',
96+
controlColor: 'red',
97+
valueColor: '#000',
98+
}}
99+
onChange={value => {
100+
this.setState({value});
101+
}}
102+
/>
103+
}>
104+
自定义颜色(color: Color)：
105+
</List.Item>
106+
<List.Item
107+
extra={
108+
<Stepper
109+
disabledInput={false}
110+
value={this.state.value1}
111+
onChange={value1 => {
112+
this.setState({value1});
113+
}}
114+
/>
115+
}>
116+
不禁止输入(disabledInput: boolean)：
117+
</List.Item>
118+
<List.Item
119+
extra={
120+
<Stepper
121+
disabled={true}
122+
disabledInput={false}
123+
value={this.state.value1}
124+
onChange={value1 => {
125+
this.setState({value1});
126+
}}
127+
/>
128+
}>
129+
禁止点击(disabled: boolean)：
130+
</List.Item>
131+
</List>
132+
</Body>
133+
<Footer />
134+
</Layout>
135+
</Container>
60136
);
61137
}
62138
}

‎packages/core/src/SegmentedControl/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,15 +71,15 @@ function Demo() {
7171
| `style` | 自定义样式 | Object | {} |
7272
| `value` | 初始值 | String[] | [] |
7373
| `color` | 组件主色调 | String | `#108ee9` |
74-
| `textColor` | 文本颜色 | Object: textColorType | - |
74+
| `textColor` | 文本颜色 | Object: TextColorType | - |
7575
| `size` | 按钮尺寸 | `small`, `default`, `large` | `default` |
7676
| `disabled` | 是否启用 | Boolean | `false` |
7777
| `selectedIndex` | 选中项在数组中的索引 | Number | 0 |
7878
| `renderItem` | 自定义单元格 | (data, index, rowNum): void | - |
7979
| `onValueChange` | 回调函数 | (label, selectedIndex): void | - |
8080

8181

82-
## textColorType
82+
## TextColorType
8383

8484
| 参数 | 说明 | 类型 | 默认值 |
8585
|------|------|-----|------|

‎packages/core/src/SegmentedControl/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ViewStyle, TextStyle, Text } from 'react-native';
33
import ButtonGroup, { ButtonGroupProps } from '../ButtonGroup';
44
import Button from '../Button';
55

6-
interface textColorType {
6+
export interface TextColorType {
77
actived?: string;
88
unactived?: string;
99
}
@@ -12,7 +12,7 @@ export interface SegmentedControlProps<T> extends ButtonGroupProps {
1212
selectedIndex?: number;
1313
renderItem?: (label: string | T, selectedIndex: number, props: ButtonGroupProps) => JSX.Element;
1414
onValueChange?: (label: string | T, selectedIndex: number) => void;
15-
textColor?: textColorType;
15+
textColor?: TextColorType;
1616
}
1717

1818
export interface SegmentedControlState {

‎packages/core/src/Stepper/ControlValue.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import React, { useRef } from 'react';
2+
import { TouchableOpacity, StyleSheet, Text } from 'react-native';
3+
import { Size, Color } from './index';
4+
5+
export interface ControlValueProps {
6+
size: Size;
7+
action: 'increase' | 'decrease';
8+
color: Color;
9+
disabled: boolean;
10+
disabledLongPress: boolean;
11+
delayLong: number;
12+
control: (type: 'increase' | 'decrease') => void;
13+
}
14+
15+
function ControlValue(props: ControlValueProps) {
16+
const { size, control, action, color, disabled, disabledLongPress, delayLong } = props;
17+
const timer = useRef<NodeJS.Timeout>();
18+
19+
const onLongPress = () => {
20+
if (!disabledLongPress) return;
21+
timer.current = setInterval(() => {
22+
control(action);
23+
}, delayLong);
24+
};
25+
const onPressOut = () => {
26+
if (typeof timer.current === 'undefined') {
27+
control(action);
28+
} else {
29+
clearInterval(timer.current);
30+
timer.current = undefined;
31+
}
32+
};
33+
return (
34+
<TouchableOpacity
35+
onLongPress={onLongPress}
36+
onPressOut={onPressOut}
37+
delayLongPress={delayLong}
38+
style={[
39+
styles[size],
40+
styles.elementCenter,
41+
styles.borderRadius,
42+
styles[`border-${action}`],
43+
{ borderColor: color.borderColor || color.color },
44+
]}
45+
disabled={disabled}
46+
>
47+
<Text
48+
style={[
49+
styles[`${size}Text`],
50+
styles.textWeight,
51+
{ color: color.controlColor || color.color, opacity: disabled ? 0.3 : 1 },
52+
]}
53+
>
54+
{action === 'increase' ? '+' : '-'}
55+
</Text>
56+
</TouchableOpacity>
57+
);
58+
}
59+
export const styles = StyleSheet.create({
60+
elementCenter: {
61+
flexDirection: 'row',
62+
justifyContent: 'center',
63+
alignItems: 'center',
64+
},
65+
textWeight: {
66+
fontWeight: '300',
67+
},
68+
borderRadius: {
69+
borderWidth: 1,
70+
borderRadius: 6,
71+
},
72+
'border-decrease': {
73+
borderTopRightRadius: 0,
74+
borderBottomRightRadius: 0,
75+
},
76+
'border-increase': {
77+
borderTopLeftRadius: 0,
78+
borderBottomLeftRadius: 0,
79+
},
80+
small: {
81+
height: 30,
82+
width: 30,
83+
},
84+
default: {
85+
height: 36,
86+
width: 36,
87+
},
88+
large: {
89+
height: 44,
90+
width: 44,
91+
},
92+
smallText: {
93+
fontSize: 24,
94+
lineHeight: 26,
95+
},
96+
defaultText: {
97+
fontSize: 30,
98+
lineHeight: 34,
99+
},
100+
largeText: {
101+
fontSize: 38,
102+
lineHeight: 42,
103+
},
104+
});
105+
106+
export default ControlValue;

0 commit comments

Comments
 (0)