react-native-dates-picker/lib/commonjs/components/Day.js

Customizable date picker for React Native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.daySize = exports.EmptyDay = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _enums = require("../enums");
var _utils = require("../utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const daySize = exports.daySize = 46;
function EmptyDayPure({
  height
}) {
  const style = styles(height || _enums.CONTAINER_HEIGHT);
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: style.dayCell
  });
}
const EmptyDay = exports.EmptyDay = /*#__PURE__*/(0, _react.memo)(EmptyDayPure);
const Day = ({
  date,
  text,
  disabled,
  isCurrentMonth,
  isToday,
  isSelected,
  inRange,
  leftCrop,
  rightCrop,
  onSelectDate,
  theme,
  height
}) => {
  const onPress = (0, _react.useCallback)(() => {
    onSelectDate(date);
  }, [onSelectDate, date]);
  const {
    calendarTextStyle,
    dayContainerStyle,
    selectedItemColor,
    selectedTextStyle,
    todayContainerStyle,
    todayTextStyle,
    selectedRangeBackgroundColor
  } = theme;

  //const bothWays = inRange && leftCrop && rightCrop;
  const isCrop = inRange && (leftCrop || rightCrop) && !(leftCrop && rightCrop);
  const containerStyle = isCurrentMonth ? dayContainerStyle : {
    opacity: 0.3
  };
  const todayItemStyle = isToday ? {
    borderWidth: 2,
    borderColor: selectedItemColor || '#0047FF',
    ...todayContainerStyle
  } : null;
  const activeItemStyle = isSelected ? {
    borderColor: selectedItemColor || '#0047FF',
    backgroundColor: selectedItemColor || '#0047FF'
  } : null;
  const textStyle = isSelected ? {
    color: '#fff',
    ...selectedTextStyle
  } : isToday ? {
    ...calendarTextStyle,
    color: selectedItemColor || '#0047FF',
    ...todayTextStyle
  } : calendarTextStyle;
  const rangeRootBackground = selectedRangeBackgroundColor ?? (0, _utils.addColorAlpha)(selectedItemColor, 0.15);
  const style = styles(height || _enums.CONTAINER_HEIGHT);
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: style.dayCell
  }, inRange && !isCrop ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [style.rangeRoot, {
      backgroundColor: rangeRootBackground
    }]
  }) : null, isCrop && leftCrop ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [style.rangeRoot, {
      left: '50%',
      backgroundColor: rangeRootBackground
    }]
  }) : null, isCrop && rightCrop ? /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [style.rangeRoot, {
      right: '50%',
      backgroundColor: rangeRootBackground
    }]
  }) : null, /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
    disabled: disabled,
    onPress: disabled ? undefined : onPress,
    style: [style.dayContainer, containerStyle, todayItemStyle, activeItemStyle, disabled && style.disabledDay],
    accessibilityRole: "button",
    accessibilityLabel: text
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [style.dayTextContainer]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: [textStyle]
  }, text))));
};
const styles = height => _reactNative.StyleSheet.create({
  dayCell: {
    position: 'relative',
    width: '14.2%',
    height: height / 7
  },
  dayContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 1.5,
    borderRadius: 100
  },
  dayTextContainer: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  disabledDay: {
    opacity: 0.3
  },
  rangeRoot: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 2,
    bottom: 2
  }
});
const customComparator = (prevProps, nextProps) => {
  return prevProps.date === nextProps.date && prevProps.text === nextProps.text && prevProps.disabled === nextProps.disabled && prevProps.isCurrentMonth === nextProps.isCurrentMonth && prevProps.isToday === nextProps.isToday && prevProps.isSelected === nextProps.isSelected && prevProps.inRange === nextProps.inRange && prevProps.leftCrop === nextProps.leftCrop && prevProps.rightCrop === nextProps.rightCrop && prevProps.onSelectDate === nextProps.onSelectDate && prevProps.height === nextProps.height && (0, _utils.isEqual)(prevProps.theme, nextProps.theme);
};
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(Day, customComparator);
//# sourceMappingURL=Day.js.map