diff --git a/example/examples/src/routes/ActionSheet/index.tsx b/example/examples/src/routes/ActionSheet/index.tsx index 8cfc4a21b..79e8db0de 100644 --- a/example/examples/src/routes/ActionSheet/index.tsx +++ b/example/examples/src/routes/ActionSheet/index.tsx @@ -1,12 +1,12 @@ -import React, { Component } from 'react'; -import { StyleSheet, View, } from 'react-native'; -import Layout, { Container } from '../../Layout'; -import { ActionSheet, Button, ActionSheetItem, Toast } from '@uiw/react-native'; -import { ComProps } from '../../routes'; +import React, {Component} from 'react'; +import {StyleSheet, View} from 'react-native'; +import Layout, {Container} from '../../Layout'; +import {ActionSheet, Button, ActionSheetItem, Toast} from '@uiw/react-native'; +import {ComProps} from '../../routes'; -const { Header, Body, Card, Footer } = Layout; +const {Header, Body, Card, Footer} = Layout; -export interface IndexProps extends ComProps { } +export interface IndexProps extends ComProps {} export interface IndexState { visible: boolean; } @@ -20,13 +20,13 @@ export default class Index extends Component { }; } onOpen = () => { - this.setState({ visible: true }); - } + this.setState({visible: true}); + }; onCancel = () => { - this.setState({ visible: false }); + this.setState({visible: false}); }; render() { - const { route } = this.props; + const {route} = this.props; const description = route.params.description; const title = route.params.title; return ( @@ -36,12 +36,15 @@ export default class Index extends Component { - - Toast.info('你点击了按钮一', 2, 'info')}>按钮一 - Toast.info('你点击了按钮二', 2, 'info')}>按钮二 + + Toast.info('你点击了按钮一', 2, 'info')}> + 按钮一 + + Toast.info('你点击了按钮二', 2, 'info')}> + 按钮二 + 关闭 diff --git a/example/examples/src/routes/Button/index.tsx b/example/examples/src/routes/Button/index.tsx index cd61b255a..1ce14924e 100644 --- a/example/examples/src/routes/Button/index.tsx +++ b/example/examples/src/routes/Button/index.tsx @@ -1,15 +1,15 @@ import React from 'react'; -import { View, Text } from 'react-native'; -import { Button, Spacing, Icon, Flex } from '@uiw/react-native'; -import { ComProps } from '../../routes'; -import Layout, { Container } from '../../Layout'; -const { Header, Body, Card, Footer } = Layout; +import {View, Text} from 'react-native'; +import {Button, Spacing, Icon, Flex} from '@uiw/react-native'; +import {ComProps} from '../../routes'; +import Layout, {Container} from '../../Layout'; +const {Header, Body, Card, Footer} = Layout; -export interface ButtonViewProps extends ComProps { } +export interface ButtonViewProps extends ComProps {} export default class ButtonView extends React.Component { render() { - const { route } = this.props; + const {route} = this.props; const description = route.params.description; const title = route.params.title; return ( @@ -108,20 +108,20 @@ export default class ButtonView extends React.Component { - - - - diff --git a/example/examples/src/routes/Card/index.tsx b/example/examples/src/routes/Card/index.tsx index 1c15bd694..006dcd348 100644 --- a/example/examples/src/routes/Card/index.tsx +++ b/example/examples/src/routes/Card/index.tsx @@ -58,7 +58,7 @@ const CardDemo = (props: any) => { {basicRender} , diff --git a/example/examples/src/routes/CheckBox/index.tsx b/example/examples/src/routes/CheckBox/index.tsx index 0a735a4ca..a9b7b04e4 100644 --- a/example/examples/src/routes/CheckBox/index.tsx +++ b/example/examples/src/routes/CheckBox/index.tsx @@ -1,14 +1,14 @@ import React from 'react'; -import { List, CheckBox } from '@uiw/react-native'; -import { ComProps } from '../../routes'; -import Layout, { Container } from '../../Layout'; -const { Header, Body, Footer } = Layout; +import {List, CheckBox} from '@uiw/react-native'; +import {ComProps} from '../../routes'; +import Layout, {Container} from '../../Layout'; +const {Header, Body, Footer} = Layout; -export interface BadgeViewProps extends ComProps { } +export interface BadgeViewProps extends ComProps {} export default class BadgeView extends React.Component { render() { - const { route } = this.props; + const {route} = this.props; const description = route.params.description; const title = route.params.title; return ( @@ -17,81 +17,81 @@ export default class BadgeView extends React.Component {
- + { console.log(checked); }}> 默认点击选中 - + { console.log(checked); }}> 默认未选中 - + { console.log(checked); }}> 默认禁用未选中 - + { console.log(checked); }}> 默认禁用选中 - + { console.log(checked); }}> - 改变选择框颜色 {'color={}'} + 改变选择框颜色 {'color={}'} - + { console.log(checked); }}> - 改变选择框颜色 {'color={}'} + 改变选择框颜色 {'color={}'} - + { console.log(checked); }}> 改变文字颜色和大小 - + { console.log(checked); diff --git a/example/examples/src/routes/Pagination/index.tsx b/example/examples/src/routes/Pagination/index.tsx index ac05b7c55..a7bcd1fe4 100644 --- a/example/examples/src/routes/Pagination/index.tsx +++ b/example/examples/src/routes/Pagination/index.tsx @@ -1,15 +1,15 @@ -import React, { Component } from 'react'; -import { StyleSheet, View, } from 'react-native'; -import Layout, { Container } from '../../Layout'; -import { Pagination } from '@uiw/react-native'; -import { ComProps } from '../../routes'; +import React, {Component} from 'react'; +import {StyleSheet, View} from 'react-native'; +import Layout, {Container} from '../../Layout'; +import {Pagination} from '@uiw/react-native'; +import {ComProps} from '../../routes'; -const { Header, Body, Card, Footer } = Layout; +const {Header, Body, Card, Footer} = Layout; -export interface IndexProps extends ComProps { } +export interface IndexProps extends ComProps {} export interface IndexState { - current: number, - current1: number + current: number; + current1: number; } export default class Index extends Component { @@ -23,35 +23,35 @@ export default class Index extends Component { } render() { - const { route } = this.props; + const {route} = this.props; const description = route.params.description; const title = route.params.title; return (
- + - + { - this.setState({ current }) + this.setState({current}); }} /> - + { - this.setState({ current1 }) + this.setState({current1}); }} /> diff --git a/example/examples/src/routes/Progress/index.tsx b/example/examples/src/routes/Progress/index.tsx index ade728e30..3a73a377f 100644 --- a/example/examples/src/routes/Progress/index.tsx +++ b/example/examples/src/routes/Progress/index.tsx @@ -25,22 +25,22 @@ const ProgressDemo = (props: any) => {
- +
- - - - {val}% - - - + + + + {val}% + + + ); diff --git a/example/examples/src/routes/SearchBar/index.tsx b/example/examples/src/routes/SearchBar/index.tsx index 9d4230c42..8d9334ac0 100644 --- a/example/examples/src/routes/SearchBar/index.tsx +++ b/example/examples/src/routes/SearchBar/index.tsx @@ -1,39 +1,39 @@ -import React, { useState } from 'react'; -import { SafeAreaView } from 'react-native'; -import { SearchBar } from '@uiw/react-native'; -import { ComProps } from '../../routes'; +import React, {useState} from 'react'; +import {SafeAreaView} from 'react-native'; +import {SearchBar} from '@uiw/react-native'; +import {ComProps} from '../../routes'; import Layout from '../../Layout'; const datas = [ - { label: '上海', value: 1 }, - { label: '南京', value: 2 }, - { label: '天津', value: 3 }, - { label: '杭州', value: 4 }, - { label: '北京', value: 5 }, -] + {label: '上海', value: 1}, + {label: '南京', value: 2}, + {label: '天津', value: 3}, + {label: '杭州', value: 4}, + {label: '北京', value: 5}, +]; const SearchBarDemo = (props: ComProps) => { - const { Header } = Layout; - const { route } = props; + const {Header} = Layout; + const {route} = props; const description = route.params.description; const title = route.params.title; const [data, setData] = useState(datas); return ( - +
setData(datas)} - onChangeText={(text) => { - let search - if(text){ - search = data.filter(item => item.label === text) - }else { - search = datas + onChangeText={text => { + let search; + if (text) { + search = data.filter(item => item.label === text); + } else { + search = datas; } - setData(search) + setData(search); }} labelInValue options={data} - onChange={(val) => console.log('val', val)} + onChange={val => console.log('val', val)} /> ); diff --git a/example/examples/src/routes/SearchInputBar/index.tsx b/example/examples/src/routes/SearchInputBar/index.tsx index f39e0f442..9a3c5f044 100644 --- a/example/examples/src/routes/SearchInputBar/index.tsx +++ b/example/examples/src/routes/SearchInputBar/index.tsx @@ -1,35 +1,34 @@ -import React, { Component } from 'react'; -import { StyleSheet, View, } from 'react-native'; -import Layout, { Container } from '../../Layout'; -import { SearchInputBar, Toast } from '@uiw/react-native'; -import { ComProps } from '../../routes'; +import React, {Component} from 'react'; +import {StyleSheet, View} from 'react-native'; +import Layout, {Container} from '../../Layout'; +import {SearchInputBar, Toast} from '@uiw/react-native'; +import {ComProps} from '../../routes'; -const { Header, Body, Card, Footer } = Layout; +const {Header, Body, Card, Footer} = Layout; -export interface IndexProps extends ComProps { } +export interface IndexProps extends ComProps {} export interface IndexState { value?: string; value2?: string; } - export default class Index extends Component { static state: IndexState; constructor(props: IndexProps) { super(props); this.state = { value: '', - value2: '' + value2: '', }; } onChangeText = (val: string, key: 'value' | 'value2') => { - this.setState({ [key]: val }) - } + this.setState({[key]: val}); + }; onClear = (key: 'value' | 'value2') => { - this.setState({ [key]: '' }) - } + this.setState({[key]: ''}); + }; render() { - const { route } = this.props; + const {route} = this.props; const description = route.params.description; const title = route.params.title; return ( @@ -39,19 +38,19 @@ export default class Index extends Component { this.onChangeText(val, 'value')} - onClear={()=>this.onClear('value')} + onChangeText={val => this.onChangeText(val, 'value')} + onClear={() => this.onClear('value')} value={this.state.value} button={{ onPress() { - Toast.info('你点击了搜索', 2, 'info') - } + Toast.info('你点击了搜索', 2, 'info'); + }, }} /> - + this.onChangeText(val,'value2')} - onClear={()=>this.onClear('value2')} + onChangeText={val => this.onChangeText(val, 'value2')} + onClear={() => this.onClear('value2')} value={this.state.value2} placeholder="请输入搜索关键字" actionName=" 搜一下" @@ -59,8 +58,8 @@ export default class Index extends Component { buttonWidth={120} button={{ onPress() { - Toast.info('你点击了搜一下', 2, 'info') - } + Toast.info('你点击了搜一下', 2, 'info'); + }, }} /> diff --git a/packages/core/src/ActionSheet/index.tsx b/packages/core/src/ActionSheet/index.tsx index 5151301fe..b9b525c2f 100644 --- a/packages/core/src/ActionSheet/index.tsx +++ b/packages/core/src/ActionSheet/index.tsx @@ -6,25 +6,25 @@ let MainWidth = Dimensions.get('window').width; let MainHeight = Dimensions.get('window').height; export interface ActionSheetProps extends ModalProps { /** 点击蒙层是否关闭 */ - onCancel?: Boolean, + onCancel?: Boolean; /** 取消的文本 */ - cancelText?: React.ReactNode + cancelText?: React.ReactNode; } interface ActionSheetState { - animatedHeight: number, - stateVisible: boolean + animatedHeight: number; + stateVisible: boolean; } export default class ActionSheet extends React.Component { private fadeAnim: Animated.Value = new Animated.Value(0); - private animatedRef: React.RefObject = React.createRef() + private animatedRef: React.RefObject = React.createRef(); constructor(props: ActionSheetProps) { - super(props) + super(props); this.state = { animatedHeight: 0, - stateVisible: false - } + stateVisible: false, + }; } onClose = () => { @@ -33,35 +33,37 @@ export default class ActionSheet extends React.Component { - this.setState({ stateVisible: false }) + this.setState({ stateVisible: false }); }); - } + }; UNSAFE_componentWillReceiveProps(nextProps: ActionSheetProps) { if (nextProps.visible) { - this.setState({ stateVisible: true }) + this.setState({ stateVisible: true }); Animated.timing(this.fadeAnim, { toValue: 0, duration: 0, useNativeDriver: true, }).start(({ finished }) => { this.animatedRef.current && - this.animatedRef.current.measure((_frameOffsetX, _frameOffsetY, _width, _height, pageOffsetX, pageOffsetY) => { - this.setState({ animatedHeight: _height }, () => { - Animated.timing(this.fadeAnim, { - toValue: -_height, - duration: 150, - useNativeDriver: true, - }).start(); - }) - }) + this.animatedRef.current.measure( + (_frameOffsetX, _frameOffsetY, _width, _height, pageOffsetX, pageOffsetY) => { + this.setState({ animatedHeight: _height }, () => { + Animated.timing(this.fadeAnim, { + toValue: -_height, + duration: 150, + useNativeDriver: true, + }).start(); + }); + }, + ); }); } else { - this.onClose() + this.onClose(); } } render() { - const { children, visible, cancelText = '取消', onCancel, ...other } = this.props - const { stateVisible } = this.state + const { children, visible, cancelText = '取消', onCancel, ...other } = this.props; + const { stateVisible } = this.state; return ( - - onCancel && this.onClose()}> - - + onCancel && this.onClose()} + > + - { - React.Children.toArray(children).map((item, index) => ( - {index !== 0 && }{item} - )) - } - - {typeof cancelText !== 'object' ? - - {cancelText} + {React.Children.toArray(children).map((item, index) => ( + + {index !== 0 && } + {item} - : {cancelText} - } + ))} + + {typeof cancelText !== 'object' ? ( + + + {cancelText} + + + ) : ( + {cancelText} + )} ); @@ -112,11 +120,11 @@ const styles = StyleSheet.create({ }, backdrop: { backgroundColor: '#000', - opacity: .2 + opacity: 0.2, }, spread: { width: MainWidth, - height: MainHeight + height: MainHeight, }, actionSheet: { width: MainWidth, @@ -124,12 +132,12 @@ const styles = StyleSheet.create({ left: 0, right: 0, backgroundColor: '#fff', - zIndex: 9999 + zIndex: 9999, }, divider: { backgroundColor: 'rgba(197,217,232,.3)', width: MainWidth, - height: 6 + height: 6, }, actionSheetItemDivider: { borderBottomColor: 'rgba(197,217,232,.3)', @@ -145,5 +153,5 @@ const styles = StyleSheet.create({ actionSheetItemText: { fontSize: 20, fontWeight: '400', - } + }, }); diff --git a/packages/core/src/ActionSheet/item.tsx b/packages/core/src/ActionSheet/item.tsx index eea2ee483..b69ab940a 100644 --- a/packages/core/src/ActionSheet/item.tsx +++ b/packages/core/src/ActionSheet/item.tsx @@ -1,22 +1,19 @@ import React from 'react'; -import { View, Dimensions, StyleSheet, Text,TouchableOpacity, GestureResponderEvent } from 'react-native'; +import { View, Dimensions, StyleSheet, Text, TouchableOpacity, GestureResponderEvent } from 'react-native'; let MainWidth = Dimensions.get('window').width; export interface ActionSheetItemProps { - onPress?: ((event: GestureResponderEvent) => void), + onPress?: (event: GestureResponderEvent) => void; } -export interface ActionSheetItemState { - -} +export interface ActionSheetItemState {} export default class ActionSheetItem extends React.Component { - render() { - const { onPress=()=>{}, children } = this.props + const { onPress = () => {}, children } = this.props; return ( - + {children} @@ -34,5 +31,5 @@ const styles = StyleSheet.create({ actionSheetItemText: { fontSize: 20, fontWeight: '400', - } + }, }); diff --git a/packages/core/src/Card/Card.Actions.tsx b/packages/core/src/Card/Card.Actions.tsx index 48f5a3c90..c7a703d18 100644 --- a/packages/core/src/Card/Card.Actions.tsx +++ b/packages/core/src/Card/Card.Actions.tsx @@ -8,7 +8,7 @@ import { TextStyle, Platform, TouchableOpacity, - GestureResponderEvent + GestureResponderEvent, } from 'react-native'; import Divider from '../Divider'; import map from 'lodash/map'; @@ -19,17 +19,13 @@ export type CardActionsProps = { text?: string; icon?: JSX.Element; onPress?: (e: GestureResponderEvent, index: number) => void; - actionsTextStyle?: StyleProp + actionsTextStyle?: StyleProp; }>; - actionsContainerStyle?: StyleProp + actionsContainerStyle?: StyleProp; children?: React.ReactNode; }; -const CardActions = ({ - actions = [], - actionsContainerStyle, - children -}: CardActionsProps) => { +const CardActions = ({ actions = [], actionsContainerStyle, children }: CardActionsProps) => { return ( @@ -49,8 +45,8 @@ const CardActions = ({ })} - ) -} + ); +}; const styles = StyleSheet.create({ actionsContainer: { @@ -79,4 +75,4 @@ const styles = StyleSheet.create({ }, }); -export default CardActions \ No newline at end of file +export default CardActions; diff --git a/packages/core/src/Card/Card.Title.tsx b/packages/core/src/Card/Card.Title.tsx index 6efb1818c..d6e826714 100644 --- a/packages/core/src/Card/Card.Title.tsx +++ b/packages/core/src/Card/Card.Title.tsx @@ -1,26 +1,15 @@ import React from 'react'; -import { - View, - Text, - StyleSheet, - Platform, - TextStyle, - StyleProp -} from 'react-native'; +import { View, Text, StyleSheet, Platform, TextStyle, StyleProp } from 'react-native'; import { colors } from '../utils'; import Divider from '../Divider'; export type CardTitleProps = { title?: string; - titleStyle?: StyleProp + titleStyle?: StyleProp; children?: React.ReactNode; }; -const CardTitle = ({ - title, - titleStyle, - children -}: CardTitleProps) => { +const CardTitle = ({ title, titleStyle, children }: CardTitleProps) => { return ( {title && ( @@ -28,11 +17,11 @@ const CardTitle = ({ {title} )} - {React.isValidElement(children)?React.cloneElement(children):null} + {React.isValidElement(children) ? React.cloneElement(children) : null} - ) -} + ); +}; const styles = StyleSheet.create({ title: { @@ -52,7 +41,7 @@ const styles = StyleSheet.create({ }, divider: { marginBottom: 15, - } + }, }); -export default CardTitle \ No newline at end of file +export default CardTitle; diff --git a/packages/core/src/Card/index.tsx b/packages/core/src/Card/index.tsx index 642499168..d25f6e086 100644 --- a/packages/core/src/Card/index.tsx +++ b/packages/core/src/Card/index.tsx @@ -80,9 +80,7 @@ const Card = ({ }, ])} > - - {children} - + {children} {renderSelection()} ); @@ -126,10 +124,10 @@ const styles = StyleSheet.create({ }, wrapper: { backgroundColor: 'transparent', - } + }, }); -Card.Title = CardTitle -Card.Actions = CardActions +Card.Title = CardTitle; +Card.Actions = CardActions; export default Card; diff --git a/packages/core/src/Pagination/DirText.tsx b/packages/core/src/Pagination/DirText.tsx index 27bfc961f..1d8dc8ff0 100644 --- a/packages/core/src/Pagination/DirText.tsx +++ b/packages/core/src/Pagination/DirText.tsx @@ -1,8 +1,8 @@ import React, { useRef, useState, useEffect } from 'react'; import { View, ViewStyle, StyleSheet, Text, TouchableOpacity, Modal, ModalProps, Animated } from 'react-native'; -import Icon from '../Icon' -import Button from '../Button' -import { size } from './index' +import Icon from '../Icon'; +import Button from '../Button'; +import { size } from './index'; export enum containerSize { small = 30, @@ -15,34 +15,44 @@ export enum contentSize { large = 26, } export interface DirTextProps { - size: size, - direction: 'left' | 'right', - disabled: boolean, - icon: boolean, - onPageChange: (type: 'prev' | 'next')=>void + size: size; + direction: 'left' | 'right'; + disabled: boolean; + icon: boolean; + onPageChange: (type: 'prev' | 'next') => void; } const DirText = (props: DirTextProps) => { - const { size, direction, disabled, icon,onPageChange } = props; - const dirText: '上一页' | '下一页' = useRef<'上一页' | '下一页'>(direction === 'left' ? '上一页' : '下一页').current - const [disabledStyle, setDisabledStyle] = useState<'#d9d9d9' | '#3d3d3d'>('#3d3d3d') + const { size, direction, disabled, icon, onPageChange } = props; + const dirText: '上一页' | '下一页' = useRef<'上一页' | '下一页'>(direction === 'left' ? '上一页' : '下一页').current; + const [disabledStyle, setDisabledStyle] = useState<'#d9d9d9' | '#3d3d3d'>('#3d3d3d'); useEffect(() => { - setDisabledStyle(disabled ? '#d9d9d9' : '#3d3d3d') - }, [disabled]) - + setDisabledStyle(disabled ? '#d9d9d9' : '#3d3d3d'); + }, [disabled]); return ( - - ); -} +}; export const containerStyle: ViewStyle = { borderStyle: 'solid', @@ -53,8 +63,8 @@ export const containerStyle: ViewStyle = { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', -} +}; const styles = StyleSheet.create({ containerStyle, }); -export default DirText \ No newline at end of file +export default DirText; diff --git a/packages/core/src/Pagination/Page.tsx b/packages/core/src/Pagination/Page.tsx index 56d3843ab..fb071e5e4 100644 --- a/packages/core/src/Pagination/Page.tsx +++ b/packages/core/src/Pagination/Page.tsx @@ -1,33 +1,55 @@ import React from 'react'; import { View, StyleSheet, Text } from 'react-native'; -import { containerStyle, containerSize, contentSize } from './DirText' -import { size } from './index' -import Button from '../Button' +import { containerStyle, containerSize, contentSize } from './DirText'; +import { size } from './index'; +import Button from '../Button'; export interface PageProps { - size: size, - current: number, - currentColor?: string, - totalPage: number + size: size; + current: number; + currentColor?: string; + totalPage: number; } const Page = (props: PageProps) => { - const { size, currentColor, current, totalPage } = props - const textSize = size === 'small' ? 1 : 2 + const { size, currentColor, current, totalPage } = props; + const textSize = size === 'small' ? 1 : 2; return ( - - ); -} - +}; const styles = StyleSheet.create({ - containerStyle + containerStyle, }); -export default Page \ No newline at end of file +export default Page; diff --git a/packages/core/src/Pagination/index.tsx b/packages/core/src/Pagination/index.tsx index c7214888a..4367cbef4 100644 --- a/packages/core/src/Pagination/index.tsx +++ b/packages/core/src/Pagination/index.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react'; -import { View, StyleSheet, } from 'react-native'; -import DirText from './DirText' -import Page from './Page' +import { View, StyleSheet } from 'react-native'; +import DirText from './DirText'; +import Page from './Page'; export type size = 'small' | 'default' | 'large'; @@ -9,68 +9,55 @@ export interface PaginationProps { /** 尺寸 */ size?: size; /** 当前页 */ - current?: number, + current?: number; /** 当前页的颜色 */ - currentColor?: string + currentColor?: string; /** 数据总量 */ - total: number, + total: number; /** 每页数据量 */ - pageSize?: number, + pageSize?: number; /** 是否以 icon 形式展示按钮 */ - icon?: boolean, + icon?: boolean; /** 点击页码按钮时触发 */ - onPageChange?: (type: 'prev' | 'next', current: number) => void, + onPageChange?: (type: 'prev' | 'next', current: number) => void; } - const Pagination = (props: PaginationProps) => { - const { size = 'default', icon = false, currentColor, total, pageSize = 10 } = props - const [current, setCurrent] = useState(1) + const { size = 'default', icon = false, currentColor, total, pageSize = 10 } = props; + const [current, setCurrent] = useState(1); useEffect(() => { - setCurrent(props.current || 1) - }, [props.current]) + setCurrent(props.current || 1); + }, [props.current]); /** 页码 */ - const onPageChange = (type: 'prev' | 'next',) => { + const onPageChange = (type: 'prev' | 'next') => { if (current === 1 && type === 'prev') { - return false + return false; } if (current === Math.ceil(total / pageSize) && type === 'next') { - return false + return false; } - const present: number = type === 'prev' ? current - 1 : current + 1 - if(typeof props.onPageChange === 'function') { - props.onPageChange(type, present) - }else { - setCurrent(present) + const present: number = type === 'prev' ? current - 1 : current + 1; + if (typeof props.onPageChange === 'function') { + props.onPageChange(type, present); + } else { + setCurrent(present); } - } + }; return ( - - + + ); -} - +}; const styles = StyleSheet.create({ pagination: { @@ -78,6 +65,6 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', - } + }, }); -export default Pagination \ No newline at end of file +export default Pagination; diff --git a/packages/core/src/SearchBar/index.tsx b/packages/core/src/SearchBar/index.tsx index 7be485e62..17938e958 100644 --- a/packages/core/src/SearchBar/index.tsx +++ b/packages/core/src/SearchBar/index.tsx @@ -45,7 +45,7 @@ export default function SearchBar({ loading, placeholder, extra, - showClear = true + showClear = true, }: SearchBarProps) { const onHandleChangeText = (val: string) => { onChangeText && onChangeText(val); @@ -73,16 +73,19 @@ export default function SearchBar({ {textValue ? textValue : placeholder} {React.isValidElement(extra) ? ( extra - ) : - curValue && showClear ? - { - onChange && onChange(null) - setCurValue(null) - }} style={{ paddingRight: 3 }}> - - : - - } + ) : curValue && showClear ? ( + { + onChange && onChange(null); + setCurValue(null); + }} + style={{ paddingRight: 3 }} + > + + + ) : ( + + )} ) : ( @@ -123,9 +126,9 @@ export default function SearchBar({ const selectValue: | any | { - key: string; - label: string; - } = labelInValue ? { key: itm.value, label: itm.label } : itm.value; + key: string; + label: string; + } = labelInValue ? { key: itm.value, label: itm.label } : itm.value; onChange && onChange(selectValue); setCurValue(selectValue); setVisivble(false); diff --git a/packages/core/src/SearchInputBar/RightButton.tsx b/packages/core/src/SearchInputBar/RightButton.tsx index 3ba490a81..d777932d7 100644 --- a/packages/core/src/SearchInputBar/RightButton.tsx +++ b/packages/core/src/SearchInputBar/RightButton.tsx @@ -1,33 +1,31 @@ import React from 'react'; -import { View, StyleSheet, } from 'react-native'; -import Button,{ ButtonProps } from '../Button'; +import { View, StyleSheet } from 'react-native'; +import Button, { ButtonProps } from '../Button'; export interface RightButtonProps extends ButtonProps { // 是否显示 - isShow?: boolean, + isShow?: boolean; // 右侧按钮文案 - actionName?: string, + actionName?: string; /** 宽度 */ - width: number + width: number; } -interface RightButtonState { - -} +interface RightButtonState {} export default class RightButton extends React.PureComponent { - constructor(props: RightButtonProps) { - super(props) - this.state = { - } + super(props); + this.state = {}; } render() { - const { isShow=false, actionName='搜索',width, ...other } = this.props + const { isShow = false, actionName = '搜索', width, ...other } = this.props; return ( - - + + ); } diff --git a/packages/core/src/SearchInputBar/index.tsx b/packages/core/src/SearchInputBar/index.tsx index af83b4636..5f52b7eda 100644 --- a/packages/core/src/SearchInputBar/index.tsx +++ b/packages/core/src/SearchInputBar/index.tsx @@ -1,27 +1,37 @@ import React from 'react'; -import { View, StyleSheet, Text, TouchableOpacity, Animated, NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputProps } from 'react-native'; +import { + View, + StyleSheet, + Text, + TouchableOpacity, + Animated, + NativeSyntheticEvent, + TextInput, + TextInputFocusEventData, + TextInputProps, +} from 'react-native'; import Icon from '../Icon'; import { ButtonProps } from '../Button'; -import RightButton from './RightButton' +import RightButton from './RightButton'; export interface SearchInputBarProps extends TextInputProps { /** 点击清除按钮时触发事件 */ - onClear?: Function, + onClear?: Function; /** 右侧按钮 */ - button?: ButtonProps + button?: ButtonProps; /** 右侧按钮文案 */ - actionName?: string, + actionName?: string; /** 右侧按钮宽度默认70 */ - buttonWidth?: number, + buttonWidth?: number; /** 是否一直显示右侧按钮 */ - showActionButton?: boolean + showActionButton?: boolean; } interface SearchInputBarState { // isShow close icon - showIcon: boolean, + showIcon: boolean; // close style - showIconLeft: number, + showIconLeft: number; } export default class SearchInputBar extends React.Component { @@ -32,89 +42,98 @@ export default class SearchInputBar extends React.Component { - if('_value' in this.buttonAnimatedWidth){ - const _value = (this.buttonAnimatedWidth as any)._value - if(_value&&!flag ){ - return + if ('_value' in this.buttonAnimatedWidth) { + const _value = (this.buttonAnimatedWidth as any)._value; + if (_value && !flag) { + return; } } - const { buttonWidth = 70, showActionButton } = this.props + const { buttonWidth = 70, showActionButton } = this.props; Animated.timing(this.placeholderAnimated, { toValue: flag ? 1 : 0, duration: 50, useNativeDriver: true, - }).start() + }).start(); Animated.timing(this.buttonAnimated, { toValue: flag ? buttonWidth : 0, duration: 150, useNativeDriver: true, - }).start(() => { - }) - this.buttonAnimatedWidth.setValue(flag ? 0 : buttonWidth) + }).start(() => {}); + this.buttonAnimatedWidth.setValue(flag ? 0 : buttonWidth); - this.placeholderIcon.current && this.placeholderIcon.current.measure((_frameOffsetX, _frameOffsetY, _width, _height, pageOffsetX, pageOffsetY) => { - const num = showActionButton?0:buttonWidth - Animated.timing(this.moveLeft, { - toValue: flag ? 0 : -pageOffsetX + 20 + num / 2+10, - duration: 300, - useNativeDriver: true, - }).start(({ finished }) => { - flag || this.inputRef.current && this.inputRef.current.focus() - }); - }) - } + this.placeholderIcon.current && + this.placeholderIcon.current.measure( + (_frameOffsetX, _frameOffsetY, _width, _height, pageOffsetX, pageOffsetY) => { + const num = showActionButton ? 0 : buttonWidth; + Animated.timing(this.moveLeft, { + toValue: flag ? 0 : -pageOffsetX + 20 + num / 2 + 10, + duration: 300, + useNativeDriver: true, + }).start(({ finished }) => { + flag || (this.inputRef.current && this.inputRef.current.focus()); + }); + }, + ); + }; onChangeText = (value: string) => { - const { onChangeText = Function } = this.props - onChangeText(value) + const { onChangeText = Function } = this.props; + onChangeText(value); if (!value && this.state.showIcon) { - this.setState({ showIcon: false }) - return + this.setState({ showIcon: false }); + return; } if (value && !this.state.showIcon) { - this.inputRef.current && this.inputRef.current.measure((_frameOffsetX, _frameOffsetY, _width) => { - this.setState({ showIconLeft: _width - 40, showIcon: true }) - }) + this.inputRef.current && + this.inputRef.current.measure((_frameOffsetX, _frameOffsetY, _width) => { + this.setState({ showIconLeft: _width - 40, showIcon: true }); + }); } - } + }; componentDidMount() { - const { value, buttonWidth = 70, showActionButton } = this.props + const { value, buttonWidth = 70, showActionButton } = this.props; if (value) { - Animated.timing( - this.placeholderAnimated, - { - toValue: 1, - duration: 100, - useNativeDriver: true, - } - ).start(() => { - this.changeIconBoxStyle(false) - this.inputRef.current && this.inputRef.current.measure((_frameOffsetX, _frameOffsetY, _width) => { - let num = showActionButton ? 0 : buttonWidth - this.setState({ showIconLeft: _width - 40 - num!, showIcon: true }) - }) - }) + Animated.timing(this.placeholderAnimated, { + toValue: 1, + duration: 100, + useNativeDriver: true, + }).start(() => { + this.changeIconBoxStyle(false); + this.inputRef.current && + this.inputRef.current.measure((_frameOffsetX, _frameOffsetY, _width) => { + let num = showActionButton ? 0 : buttonWidth; + this.setState({ showIconLeft: _width - 40 - num!, showIcon: true }); + }); + }); } } onClose = () => { - const { onClear } = this.props - onClear?.() - this.setState({ showIcon: false }) - this.inputRef.current && this.inputRef.current.focus() - } + const { onClear } = this.props; + onClear?.(); + this.setState({ showIcon: false }); + this.inputRef.current && this.inputRef.current.focus(); + }; render() { - const { showIcon, showIconLeft } = this.state - const { value, onBlur, placeholder = '请输入', buttonWidth = 70, showActionButton = false, button, actionName, ...other } = this.props + const { showIcon, showIconLeft } = this.state; + const { + value, + onBlur, + placeholder = '请输入', + buttonWidth = 70, + showActionButton = false, + button, + actionName, + ...other + } = this.props; return ( @@ -126,9 +145,9 @@ export default class SearchInputBar extends React.Component) => { if (!value) { - this.changeIconBoxStyle(true) + this.changeIconBoxStyle(true); } - onBlur?.(event) + onBlur?.(event); }} /> @@ -138,16 +157,20 @@ export default class SearchInputBar extends React.Component - - { - this.changeIconBoxStyle(false) - }}> - + + { + this.changeIconBoxStyle(false); + }} + > + - + - + {placeholder} @@ -159,13 +182,17 @@ export default class SearchInputBar extends React.Component - + - {showIcon && - - + {showIcon && ( + + - } + )} ); } @@ -187,7 +214,7 @@ const styles = StyleSheet.create({ backgroundColor: 'transparent', position: 'relative', top: -40, - zIndex: 1 + zIndex: 1, }, centerBox: { display: 'flex', @@ -198,14 +225,14 @@ const styles = StyleSheet.create({ placeholderStyle: { paddingLeft: 10, fontSize: 18, - color: '#999' + color: '#999', }, searchInput: { height: 40, borderColor: 'gray', borderWidth: 1, borderRadius: 20, - backgroundColor: "#f7f7f7", + backgroundColor: '#f7f7f7', fontSize: 18, paddingHorizontal: 40, }, @@ -215,5 +242,5 @@ const styles = StyleSheet.create({ width: 40, top: -80, zIndex: 2, - } + }, }); diff --git a/packages/core/src/Tooltip/utils.ts b/packages/core/src/Tooltip/utils.ts index d8b2a8826..ff2d17f95 100644 --- a/packages/core/src/Tooltip/utils.ts +++ b/packages/core/src/Tooltip/utils.ts @@ -44,7 +44,7 @@ export function getLocation( // 得到 三角 x 位置 if (pageOffsetX === (MainWidth - width) / 2) { isStart = xLocation.center; - style.left = (MainWidth - _W) / 2 ; + style.left = (MainWidth - _W) / 2; } if (MainWidth - width - pageOffsetX > pageOffsetX) { isStart = xLocation.start; @@ -55,7 +55,7 @@ export function getLocation( style.left = pageOffsetX - halfWidth + 16; } // cloud 宽度超出屏幕 - if (_W+ pageOffsetX >= MainWidth - 40) { + if (_W + pageOffsetX >= MainWidth - 40) { style.width = MainWidth - 40; triangle = pageOffsetX + halfWidth - 20 - 10 - 6; style.left = 20;