elephant-com/Head.js

the general component for elephant washing shoes

import React from 'react';
import { View, Text, TouchableOpacity, StatusBar, StyleSheet } from 'react-native';
import { Icon, Modal } from 'antd-mobile';
import { createAction, statusHeight } from './utils';

const { alert, prompt } = Modal;
const ns = StyleSheet.create({
  box: {
    height: 48 + statusHeight,
    flexDirection: 'row',
    backgroundColor: '#00abea',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingTop: statusHeight,
  },
  back: { marginLeft: 5, paddingRight: 20 },
  titleBox: { flex: 1, borderWidth: 1, borderColor: '#00abea' },
  title: {
    color: '#fff',
    fontSize: 18,
    textAlign: 'center',
    // marginLeft: -53,
  },
  rightBox: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginRight: 10 },
  mr: { marginRight: 10 },
});

export default (props) => {
  const {
    navigation, title, showBack = true, children,
    showResetCode, showAccident, showAddItem, onBack = () => true,
  } = props;
  return (<View style={ns.box}>
    <StatusBar translucent backgroundColor="rgba(0,0,0,0)" />
    {
      showBack && <TouchableOpacity
        style={ns.back}
        onPress={() => {
          if (onBack()) navigation.goBack();
        }}
      >
        <Icon type={'\ue620'} color="#fff" size={28} />
      </TouchableOpacity>
    }

    <View style={ns.titleBox}>
      <Text style={ns.title}>{title || navigation.state.params.title}</Text>
    </View>
    <View style={ns.rightBox}>
      {
        showAddItem && <TouchableOpacity
          style={ns.mr}
          onPress={() => prompt('新建增项任务', '请简要描述要增项内容', [{
            text: '确定',
            onPress: (nextMemo) => {
              navigation.dispatch(createAction('misc/insertTask')({
                taskId: navigation.state.params.id,
                actionName: '增项',
                nextMemo,
              }));
            },
          }, { text: '取消' }])}
        >
          <Icon type={'\ue626'} color="#fff" size={28} />
        </TouchableOpacity>
      }
      {
        showResetCode && <TouchableOpacity
          style={ns.mr}
          onPress={() => alert('补码确认', '确定要新增补码任务吗？', [{
            text: '确定',
            onPress: () => {
              navigation.dispatch(createAction('misc/insertTask')({
                taskId: navigation.state.params.id,
                actionName: '补码',
              }));
            },
          }, { text: '取消' }])}
        >
          <Icon type={'\ue67c'} color="#fff" size={28} />
        </TouchableOpacity>
      }
      {
        showAccident && <TouchableOpacity
          style={ns.mr}
          onPress={() => {
            navigation.navigate('SubmitAccident', { taskId: navigation.state.params.id });
          }}
        >
          <Icon type={'\ue62c'} color="#fff" size={28} />
        </TouchableOpacity>
      }
      {
        children
      }
    </View>
  </View>);
};