Popup

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.