-
Notifications
You must be signed in to change notification settings - Fork 617
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
689 additions
and
172 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import type { ReactNode } from 'react' | ||
| import React from 'react' | ||
| import { StyleProp, ViewStyle } from 'react-native' | ||
| import { SliderStyle } from './style' | ||
|
|
||
| export type SliderMarks = { | ||
| [key: number]: React.ReactNode | ||
| } | ||
|
|
||
| export type SliderValue = number | [number, number] | ||
|
|
||
| export type SliderProps = { | ||
| min?: number | ||
| max?: number | ||
| value?: SliderValue | ||
| defaultValue?: SliderValue | ||
| step?: number | ||
| marks?: SliderMarks | ||
| ticks?: boolean | ||
| disabled?: boolean | ||
| range?: boolean | ||
| icon?: ReactNode | ||
| // TODO-luokun | ||
| // popover?: boolean | ((value: number) => ReactNode) | ||
| // residentPopover?: boolean | ||
| onChange?: (value: SliderValue) => void | ||
| onAfterChange?: (value: SliderValue) => void | ||
| style?: StyleProp<ViewStyle> | ||
| styles?: Partial<SliderStyle> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,93 +1,61 @@ | ||
| import React from 'react' | ||
| import { Text, View } from 'react-native' | ||
| import { Slider } from '../../' | ||
|
|
||
| export default class BasicSliderExample extends React.Component<any, any> { | ||
| constructor(props: any) { | ||
| super(props) | ||
| this.state = { | ||
| changingValue: 0.25, | ||
| changedValue: 0.15, | ||
| minMaxValue: 0, | ||
| slideCompletionCount: 0, | ||
| } | ||
| } | ||
|
|
||
| handleChange = (value: any) => { | ||
| this.setState({ | ||
| changingValue: value, | ||
| }) | ||
| } | ||
|
|
||
| onAfterChange = (value: any) => { | ||
| this.setState({ | ||
| changedValue: value, | ||
| }) | ||
| import { ScrollView } from 'react-native' | ||
|
|
||
| import { List, Slider, Toast } from '../../' | ||
|
|
||
| export default function StepperExample() { | ||
| const marks = { | ||
| 0: 0, | ||
| 20: 20, | ||
| 40: 40, | ||
| 60: 60, | ||
| 80: 80, | ||
| 100: 100, | ||
| } | ||
|
|
||
| minMaxChange = (value: any) => { | ||
| this.setState({ | ||
| minMaxValue: value, | ||
| }) | ||
| const toastValue = (value: number | [number, number]) => { | ||
| let text = '' | ||
| if (typeof value === 'number') { | ||
| text = `${value}` | ||
| } else { | ||
| text = `[${value.join(',')}]` | ||
| } | ||
| Toast.show({ content: `当前选中值为：${text}`, position: 'top' }) | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <View> | ||
| <View> | ||
| <Text>Default settings</Text> | ||
| <Slider /> | ||
| </View> | ||
|
|
||
| <View style={{ marginTop: 20 }}> | ||
| <Text>Initial value: 0.5</Text> | ||
| <Slider defaultValue={0.5} /> | ||
| </View> | ||
|
|
||
| <View style={{ marginTop: 20 }}> | ||
| <Text>min: 0, max: 1, current Value: {this.state.minMaxValue}</Text> | ||
| return ( | ||
| <ScrollView> | ||
| <List renderHeader={'基础用法'}> | ||
| <List.Item> | ||
| <Slider onAfterChange={toastValue} /> | ||
| </List.Item> | ||
| </List> | ||
| <List renderHeader={'显示刻度(ticks)并指定步距(step)'}> | ||
| <List.Item> | ||
| <Slider ticks step={10} defaultValue={40} /> | ||
| </List.Item> | ||
| </List> | ||
| <List renderHeader={'传入刻度标记(marks)'}> | ||
| <List.Item> | ||
| <Slider marks={marks} ticks step={20} /> | ||
| </List.Item> | ||
| </List> | ||
| <List renderHeader={'最大(max)/最小值(min)'}> | ||
| <List.Item> | ||
| <Slider | ||
| min={0} | ||
| max={1} | ||
| onAfterChange={(value: any) => this.minMaxChange(value)} | ||
| step={100} | ||
| min={100} | ||
| max={1000} | ||
| ticks | ||
| onAfterChange={toastValue} | ||
| /> | ||
| </View> | ||
|
|
||
| <View style={{ marginTop: 20 }}> | ||
| <Text>step: 0.25</Text> | ||
| <Slider step={0.25} value={0.25} /> | ||
| </View> | ||
|
|
||
| <View style={{ marginTop: 20 }}> | ||
| <Text>disabled</Text> | ||
| <Slider disabled defaultValue={0.25} /> | ||
| </View> | ||
|
|
||
| <View style={{ marginTop: 20 }}> | ||
| <Text>onChange value: {this.state.changingValue}</Text> | ||
| <Slider | ||
| defaultValue={0.25} | ||
| onChange={(value: any) => this.handleChange(value)} | ||
| /> | ||
| </View> | ||
|
|
||
| <View style={{ marginTop: 20 }}> | ||
| <Text>onAfterChange value: {this.state.changedValue}</Text> | ||
| <Slider | ||
| defaultValue={0.15} | ||
| onAfterChange={(value: any) => this.onAfterChange(value)} | ||
| /> | ||
| </View> | ||
|
|
||
| <View style={{ marginTop: 20 }}> | ||
| <Text>custom color: </Text> | ||
| <Slider | ||
| defaultValue={0.15} | ||
| minimumTrackTintColor="red" | ||
| maximumTrackTintColor="blue" | ||
| /> | ||
| </View> | ||
| </View> | ||
| ) | ||
| } | ||
| </List.Item> | ||
| </List> | ||
| <List renderHeader={'双滑块(range)'}> | ||
| <List.Item> | ||
| <Slider marks={marks} ticks range defaultValue={[60, 40]} /> | ||
| </List.Item> | ||
| </List> | ||
| </ScrollView> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,65 +1,5 @@ | ||
| import React from 'react' | ||
| import { View } from 'react-native' | ||
| import Slider from '@react-native-community/slider' | ||
| import { WithTheme } from '../style' | ||
| import { Slider } from './slider' | ||
|
|
||
| export interface SliderProps { | ||
| maximumTrackTintColor?: string | ||
| minimumTrackTintColor?: string | ||
| onChange?: (value?: number) => void | ||
| onAfterChange?: (value?: number) => void | ||
| defaultValue?: number | ||
| tipFormatter?: (value?: string) => React.ReactNode | ||
| value?: number | ||
| min?: number | ||
| max?: number | ||
| step?: number | ||
| disabled?: boolean | ||
| } | ||
| export type { SliderProps, SliderValue } from './PropsType' | ||
|
|
||
| export default class SliderAntm extends React.Component<SliderProps, any> { | ||
| static defaultProps = { | ||
| onChange() {}, | ||
| onAfterChange() {}, | ||
| defaultValue: 0, | ||
| disabled: false, | ||
| } | ||
|
|
||
| render() { | ||
| const { | ||
| defaultValue, | ||
| value, | ||
| min, | ||
| max, | ||
| step, | ||
| disabled, | ||
| onChange, | ||
| onAfterChange, | ||
| maximumTrackTintColor, | ||
| minimumTrackTintColor, | ||
| } = this.props | ||
| return ( | ||
| <WithTheme> | ||
| {(_, theme) => ( | ||
| <View> | ||
| <Slider | ||
| value={defaultValue || value} | ||
| minimumValue={min} | ||
| maximumValue={max} | ||
| step={step} | ||
| minimumTrackTintColor={ | ||
| minimumTrackTintColor || theme.brand_primary | ||
| } | ||
| maximumTrackTintColor={ | ||
| maximumTrackTintColor || theme.border_color_base | ||
| } | ||
| disabled={disabled} | ||
| onValueChange={onChange} | ||
| onSlidingComplete={onAfterChange} | ||
| /> | ||
| </View> | ||
| )} | ||
| </WithTheme> | ||
| ) | ||
| } | ||
| } | ||
| export default Slider |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import type { FC, ReactNode } from 'react' | ||
| import React from 'react' | ||
| import { View } from 'react-native' | ||
| import AntmView from '../view' | ||
| import { SliderStyle } from './style' | ||
|
|
||
| export type SliderMarks = { | ||
| [key: number]: ReactNode | ||
| } | ||
|
|
||
| type MarksProps = { | ||
| marks: SliderMarks | ||
| max: number | ||
| min: number | ||
| upperBound: number | ||
| lowerBound: number | ||
| styles: Partial<SliderStyle> | ||
| } | ||
|
|
||
| const Marks: FC<MarksProps> = ({ | ||
| marks, | ||
| upperBound, | ||
| lowerBound, | ||
| max, | ||
| min, | ||
| styles, | ||
| }) => { | ||
| const marksKeys = Object.keys(marks) | ||
|
|
||
| const range = max - min | ||
| const elements = marksKeys | ||
| .map(parseFloat) | ||
| .sort((a, b) => a - b) | ||
| .filter((point) => point >= min && point <= max) | ||
| .map((point) => { | ||
| const markPoint = marks[point] | ||
| if (!markPoint && markPoint !== 0) { | ||
| return null | ||
| } | ||
|
|
||
| const isActive = point <= upperBound && point >= lowerBound | ||
|
|
||
| const style = { | ||
| left: `${((point - min) / range) * 100}%`, | ||
| } | ||
| return ( | ||
| <View style={[{ position: 'absolute' }, style]} key={point}> | ||
| <AntmView | ||
| style={[styles.markText, isActive && styles.markTextActive]}> | ||
| {markPoint} | ||
| </AntmView> | ||
| </View> | ||
| ) | ||
| }) | ||
|
|
||
| return <View style={styles.mark}>{elements}</View> | ||
| } | ||
|
|
||
| export default Marks |
Oops, something went wrong.