react-native-persian-calendar-modal/src/style.js

Persian Calendar Modal Component for React Native

/**
 * Persian Calendar Picker Component
 *
 * Copyright 2016 Reza (github.com/rghorbani)
 * Licensed under the terms of the MIT license. See LICENSE file in the project root for terms.
 *
 * @flow
 */

'use strict';



const DEFAULT_SELECTED_BACKGROUND_COLOR = '#5ce600';
const DEFAULT_SELECTED_TEXT_COLOR = '#000000';
const DEFAULT_TODAY_BACKGROUD_COLOR = '#CCCCCC';

function makeStyles({
  isRTL,
  initialScale: scaler,
  backgroundColor,
  textColor,
  todayBackgroundColor,
}) {
  const SELECTED_BG_COLOR = backgroundColor
    ? backgroundColor
    : DEFAULT_SELECTED_BACKGROUND_COLOR;
  const SELECTED_TEXT_COLOR = textColor
    ? textColor
    : DEFAULT_SELECTED_TEXT_COLOR;
  const TODAY_BG_COLOR = todayBackgroundColor
    ? todayBackgroundColor
    : DEFAULT_TODAY_BACKGROUD_COLOR;

  return {
    calendar: {
      height: 340 * scaler,
      // marginTop: 5 * scaler,
        width:400,
        // backgroundColor:'rgba(213,123,114,0.9)'
        // flex:1

    },

    dayButton: {
      width: 30 * scaler,
      height: 30 * scaler,
      borderRadius: 30 * scaler,
      alignSelf: 'center',
      justifyContent: 'center',
    },

    dayLabel: {
      fontSize: 14 * scaler,
      color: '#000',
      alignSelf: 'center',
    },

    selectedDayLabel: {
      color: SELECTED_TEXT_COLOR,
    },

    dayLabelsWrapper: {
      flexDirection: isRTL ? 'row-reverse' : 'row',
      borderBottomWidth: 1,
      borderTopWidth: 1,
      paddingTop: 10 * scaler,
      paddingBottom: 10 * scaler,
      alignSelf: 'center',
      justifyContent: 'center',
      backgroundColor: 'rgba(0, 0, 0, 0.0)',
      borderColor: 'rgba(0, 0, 0, 0.2)',
    },

    daysWrapper: {
      alignSelf: 'center',
      justifyContent: 'center',
      // height:250
    },

    dayLabels: {
      width: 50 * scaler,
      fontSize: 12 * scaler,
      color: '#000',
      textAlign: 'center',
    },

    selectedDay: {
      width: 30 * scaler,
      height: 30 * scaler,
      borderRadius: 30 * scaler,
      alignSelf: 'center',
      justifyContent: 'center',
    },

    selectedDayBackground: {
      backgroundColor: SELECTED_BG_COLOR,
    },

    selectedToday: {
      width: 30 * scaler,
      height: 30 * scaler,
      backgroundColor: TODAY_BG_COLOR,
      borderRadius: 30 * scaler,
      alignSelf: 'center',
      justifyContent: 'center',
    },

    dayWrapper: {
      alignItems: 'center',
      justifyContent: 'center',
      width: 50 * scaler,
      height: 40 * scaler,
      backgroundColor: 'rgba(0, 0, 0, 0.0)',
    },

    startDayWrapper: {
      width: 50 * scaler,
      height: 30 * scaler,
      borderTopLeftRadius: 20 * scaler,
      borderBottomLeftRadius: 20 * scaler,
      backgroundColor: SELECTED_BG_COLOR,
      alignSelf: 'center',
      justifyContent: 'center',
    },

    endDayWrapper: {
      width: 50 * scaler,
      height: 30 * scaler,
      borderTopRightRadius: 20 * scaler,
      borderBottomRightRadius: 20 * scaler,
      backgroundColor: SELECTED_BG_COLOR,
      alignSelf: 'center',
      justifyContent: 'center',
    },

    inRangeDay: {
      width: 50 * scaler,
      height: 30 * scaler,
      backgroundColor: SELECTED_BG_COLOR,
      alignSelf: 'center',
      justifyContent: 'center',
    },

    monthLabel: {
      fontSize: 16 * scaler,
      color: '#000',
      // marginBottom: 10 * scaler,
      // width: 180 * scaler,
      textAlign: 'center',
    },

    headerWrapper: {
      alignItems: 'center',
      flexDirection: isRTL ? 'row-reverse' : 'row',
     alignSelf: 'center',
      padding: 5 * scaler,
      paddingBottom: 3 * scaler,
      justifyContent:'space-between',
  width:'75%',
      // backgroundColor: 'rgba(0, 0, 0, 0.0)',
      // backgroundColor: 'red',
    },

    monthSelector: {
      // marginBottom: 10 * scaler,
      // fontSize: 14 * scaler,
      // width: 80 * scaler,
      width:60
    },

    prev: {
      flexDirection: 'row-reverse',
      justifyContent:'flex-end'
    },

    next: {
      flexDirection: 'row-reverse',
      justifyContent:'flex-start'
      // textAlign: isRTL ? 'left' : 'right',
    },
    iconSelect:{
      color:'gray'
    },

    yearLabel: {
      fontSize: 14 * scaler,
      fontWeight: 'bold',
      color: '#000',
      textAlign: 'center',
    },

    weeks: {
      flexDirection: 'column',
    },

    weekRow: {
      flexDirection: isRTL ? 'row-reverse' : 'row',
    },

    disabledText: {
      fontSize: 14 * scaler,
      color: '#BBBBBB',
      alignSelf: 'center',
      justifyContent: 'center',
    },

    row:{
      flexDirection: isRTL ? 'row-reverse' : 'row',
      // backgroundColor:'#bad',
      alignItems: 'center',

    },
    iconMonth:{
      fontSize:22,
      color:'gray',
      marginLeft:10
    },
    iconYear:{
      fontSize:22,
      color:'gray',
      marginRight:10
    },

  };
}

module.exports = makeStyles;