Popup

Last Updated on : 2024-06-05 03:14:33download

Overview

Popup is a collection of commonly used pop-up windows for displaying business-related components.

Code demo

Note: for more information, see Demo.

Countdown popup

Popup.countdown({ title: "Countdown", cancelText: "Cancel", confirmText: "Confirm", hourText: "Hour", minuteText: "Minute", value: this.state.countdown, onMaskPress: ({ close }) => { close(); }, onConfirm: (data, { close }) => { this.setState({ countdown: data.hour * 60 + data.minute }); close(); }, });

Date selection popup

Popup.datePicker({ title: "Birthday", cancelText: "Cancel", confirmText: "Confirm", hourText: "Hour", minuteText: "Minute", defaultDate: this.state.date, mode: "datetime", minDate: new Date(1918, 0, 1, 0, 0, 0), maxDate: new Date(2018, 11, 31, 23, 59, 59), onMaskPress: ({ close }) => { close(); }, onConfirm: (date, { close }) => { this.setState({ date }); close(); }, });

Time period selection popup

Popup.timerPicker({ title: "Time period selection", cancelText: "Cancel", confirmText: "Confirm", startTime: this.state.timerPickerValue[0], endTime: this.state.timerPickerValue[1], is12Hours: true, onMaskPress: ({ close }) => { close(); }, onConfirm: ({ startTime, endTime }, { close }) => { this.setState({ timerPickerValue: [startTime, endTime] }); close(); }, });

Value selection popup

Popup.numberSelector({ title: "Temperature adjustment (°C)", cancelText: "Cancel", confirmText: "Confirm", value: this.state.numberValue, min: 0, max: 50, onMaskPress: ({ close }) => { close(); }, onConfirm: (value, { close }) => { this.setState({ numberValue: value }); close(); }, });

List selection popup

Popup.list({ type: "switch", dataSource: [ { key: "1", title: "1", value: "1", }, { key: "2", title: "2", value: "2", }, ], title: "List", cancelText: "Cancel", confirmText: "Confirm", showBack: true, onBack: ({ close }) => { console.log('I am Popup.list.radio'); close(); }, value: this.state.listValue, onMaskPress: ({ close }) => { close(); }, onConfirm:(value, { close }) => { this.setState({ listValue: value }); close(); }, });

Picker selection popup

  • Single picker
Popup.picker({ dataSource: [ { label: "1", value: "1", }, { label: "2", value: "2", }, ], title: "Picker", cancelText: "Cancel", confirmText: "Confirm", value: this.state.pickerValue, label: "haha", onMaskPress: ({ close }) => { close(); }, onConfirm: (value, idx, { close })=> { this.setState({ pickerValue: value }); close(); }, });
  • Multiple picker
Popup.picker({ dataSource: [ [ { label: "a", value: "a", }, { label: "b", value: "b", }, { label: "c", value: "c", }, ], [ { label: "1", value: "1", }, { label: "2", value: "2", }, { label: "3", value: "3", }, ], [ { label: "m", value: "m", }, { label: "x", value: "x", }, { label: "d", value: "d", }, ], ], singlePicker: false, title: "Picker", cancelText: "Cancel", confirmText: "Confirm", value: this.state.pickerValues, label: ["$", "%"], onMaskPress: ({ close }) => { close(); }, onConfirm: (value) => { this.setState({ pickerValues: value }); Popup.close(); }, });

Custom popup

A custom content dialog box pops up.

Popup.custom({ content: ( <View style={{ height: 200, alignItems: "center", justifyContent: "center", backgroundColor: "#fff", }} > <Text style={{ fontSize: 36, color: "#000" }}>Custom Content</Text> </View> ), title: "Custom", cancelText: "Cancel", confirmText: "Confirm", onMaskPress: ({ close }) => { close(); }, onConfirm: (date, { close }) => { Popup.close(); }, });

Toast popup

Popup.toast({ message: "I am Toast", });

API

Note: besides close, the first parameter of Popup API is the props of the component, and the second parameter is the props of Modal. For example, Popup.someMethod(props: Object, modalProps? : Object).

Popup general

Property Description Type Default value Required
wrApperStyle Container style ViewPropTypes.style null No
title Popup header title string | ReactElement Modal No
titleTextStyle Popup header title style Text.propTypes.style null No
titleWrapperStyle Popup header style ViewPropTypes.style null No
switchValue The status of the header bar button. If the value exists, the header bar will display the Switch button. boolean undefined No
onSwitchValueChange Callback of switching the header bar button value => void null No
footer Custom footer ReactElement null No
footerType footer container display status.
  • Show all: both
  • Show confirm only: singleConfirm
  • Show cancel only: singleCancel
both | singleConfirm | singleCancel both No
footerWrapperStyle footer wrapper style ViewPropTypes.style null No
cancelText Cancellation text string '' No
cancelTextStyle Cancellation text style Text.propTypes.style null No
confirmText Confirmation text string '' No
confirmTextStyle Confirmation text style Text.propTypes.style null No
onCancel Callback of clicking the cancel button function null No
onConfirm Callback of clicking the confirm button function null No
motionType Animation type string PullUp No
motionConfig Animation configuration object null No
showBack Whether to show the back button boolean false No
onBack Callback of the back button function null No

Popup.countdown

Countdown popup. In addition to general properties, the following properties are included.

Property Description Type Default value Required
value Specific value of countdown number null Yes
onlyone Whether to show only minutes boolean false No
min The minimum value of the countdown, in minutes number 0 No
max The maximum value of the countdown, in minutes number 1440 No
step Step length of the countdown number 1 No
hourText Hour text string Hour No
minuteText Minute text string Minute No

Popup.datePicker

Date selection popup. See the Popup general properties and DatePicker component.

Popup.timerPicker

Time period selection popup. See the Popup general properties and TimerPicker component.

Popup.numberSelector

Value selection popup. In addition to general properties, the following properties are included.

Property Description Type Default value Required
type Value selection popup type basic | slider basic No
value Specific value number null Yes
max The maximum available value number 100 No
min The minimum available value number 0 No
step Step length number 1 No
scale Multiple number 0 No
onValueChange Value change event value => void () => {} No

Popup.list

List selection popup. Popup.list inherits from TYFlatList. In addition to general properties, it also contains TYFlatList Prop and the following properties.

Property Description Type Default value Required
listItemStyle Set the style of each listItem ViewPropTypes.style null No
maxItemNum Maximum number of lists number 5 No
dataSource Data source, inherited from TYFlatList.Item array [] No
selectedIcon The icon selected when type is set to radio ReactElement null No
type List selection popup type switch | radio radio No
iconTintColor Color of the icon selected when type is set to radio ColoPropType #44DB5E No
contentCenter Whether the content is centered boolean true No
value The selected value. Multiple selection type is array, and single selection is string or number array | string | number -1 No
onSelect Callback of selecting the event value => void () => {} No

Popup.picker

Picker selection popup. In addition to general properties, the following properties are included.

Property Description Type Default value Required
pickerWrapperStyle Picker wrapper style ViewPropTypes.style null No
pickerStyle Picker style ViewPropTypes.style null No
label Picker label string | array ‘’ No
dataSource Picker data source array [] No
onValueChange Value change event (value, idx)=> void () => {} No
singlePicker Whether to show only one picker boolean true No
spacing The spacing on both sides of the picker boolean 0 No
labelOffset The offset of the label from picker number 22 No
pickerFontColor Font color of picker ColorPropType #333 No
pickerUnitColor Unit color of picker ColorPropType #333 No

Note: the specific types of picker data sources are as follows.

PropTypes.arrayOf( PropTypes.shape({ value: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.bool, PropTypes.array, // In case of multiple picker, it must be an array ]), label: PropTypes.oneOfType([ PropTypes.string, PropTypes.array, // In case of multiple picker, it must be an array ]), }) );

Popup.custom

Custom dialog box. In addition to the general properties of Popup, Popup.custom also contains the following properties.

Property Description Type Default value Required
content Custom content any null Yes

Popup.toast

Custom dialog box. In addition to the general properties of Popup, Dialog.custom also contains the following properties.

Property Description Type Default value Required
style Container style ViewPropTypes.style null No
theme Theme configuration Object {<br /> background: '#fff5e5',<br /> text: '#F56351',<br /> closeIcon: 'rgba(0, 0, 0, 0.3)',
noticeIcon: '#F56361',
}
No
enableClose Whether to enable active close boolean true No
onClose Callback of close event () => void null No
children Child element any null No

Popup.close

Close the current popup.