# All files / composer/components UpdateSaverItem.jsx

36.84% Statements 7/19
64.29% Branches 9/14
16.67% Functions 1/6
36.84% Lines 7/19

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133

    8x

    8x

    8x

    8x

    8x

    2x

    6x

     import React from 'react';
    import PropTypes from 'prop-types';
    import AppActionCreators from '../action-creators/AppActionCreators';
    import { SaveButtonTypes, ButtonsQueuingTypesMap } from '../AppConstants';
    import Dropdown, { DropdownTrigger, DropdownContent } from '../components/Dropdown';
    import DateTimeSlotPicker from '../components/DateTimeSlotPicker';
    import Button from '../components/Button';

    import styles from './css/UpdateSaver.css';

    class UpdateSaverItem extends React.Component {
      static propTypes = {
        type: PropTypes.oneOf(Object.keys(SaveButtonTypes)).isRequired,
        children: PropTypes.node.isRequired,
        appState: PropTypes.object.isRequired,
        userData: PropTypes.object.isRequired,
        isInlineSchedulerDisplayed: PropTypes.bool.isRequired,
        disabled: PropTypes.bool,
        timezone: PropTypes.string,
        isMenuItem: PropTypes.bool,
        isSecondaryItem: PropTypes.bool,
        weekStartsMonday: PropTypes.bool.isRequired,
      };

      static defaultProps = {
        disabled: false,
        isMenuItem: false,
        isSecondaryItem: false,
      };

      onButtonClick = (e) => {
        const { type } = this.props;
        const queuingType = ButtonsQueuingTypesMap.get(type);

        AppActionCreators.saveDrafts(queuingType, { shouldSkipEmptyTextAlert: false });

        e.stopPropagation();
      };

      /**
       * DateTimeSlotPicker is displayed within a DropDown component, which takes care
       * of showing/hiding it when necessary. To do that, the DropDown component
       * listens to clicks in the whole document, and when a click happens on a
       * DOM element outside of DropdownContent, it is hidden. That's awesome, but
       * in some situations with DateTimeSlotPicker, users will click on buttons, and
       * the UI will change in such a way that the buttons that were clicked will
       * disappear: when that's the case, the DropDown component will wrongly deduct
       * that the click happened outside of the DropDown, and will proceed to hiding
       * the DateTimeSlotPicker. E.g. http://cl.ly/1R071e0i191e
       * To prevent this, we stop click event bubbling at the DateTimeSlotPicker level :)
       */
      onDateTimeSlotPickerClick = (e) => e.stopPropagation();

      onDateTimeSlotPickerSubmit = (timestamp) => {
        const { type } = this.props;
        const queuingType = ButtonsQueuingTypesMap.get(type);

        AppActionCreators.saveDrafts(queuingType, {
          customScheduleTime: timestamp,
          shouldSkipEmptyTextAlert: false,
        });
      };

      onMouseEnter = () => {
        if (!this.props.appState.isSavingPossible) {
          AppActionCreators.trackUserAction(['composer', 'hovered_over_disabled_add_to_queue']);
        }
      };

      onMouseDown = () => {
        if (!this.props.appState.isSavingPossible) {
          AppActionCreators.trackUserAction(['composer', 'clicked_on_disabled_add_to_queue']);
        }
      };

      render() {
        const {
          type, children, userData, disabled, timezone, isMenuItem,
          isSecondaryItem, weekStartsMonday, isInlineSchedulerDisplayed,
        } = this.props;

        const buttonClassName =
          isMenuItem ? styles.dropdownMenuItem :
          isSecondaryItem ? styles.secondaryButton :
          styles.button;

        const schedulishSaveButtonTypes = [
          SaveButtonTypes.SCHEDULE_POST,
          SaveButtonTypes.SCHEDULE_DRAFT,
        ];

        const internalButtonType =
          (schedulishSaveButtonTypes.includes(type) && !isInlineSchedulerDisplayed) ?
          'SCHEDULE_POST_DROPDOWN' : 'BUTTON';

        switch (internalButtonType) {
          case 'SCHEDULE_POST_DROPDOWN':
            return (
              <Dropdown className={styles.dropdownContainerAsMenuItem}>
                <DropdownTrigger className={styles.dropdownTriggerAsMenuItem}>
                  {children}
                </DropdownTrigger>
                <DropdownContent className={styles.dropdownContentAsMenuItem}>
                  <DateTimeSlotPicker
                    onClick={this.onDateTimeSlotPickerClick}
                    onSubmit={this.onDateTimeSlotPickerSubmit}
                    shouldUse24hTime={userData.uses24hTime}
                    timezone={timezone}
                    weekStartsMonday={weekStartsMonday}
                  />
                </DropdownContent>
              </Dropdown>
            );

          default:
            return (
              <Button
                type="button"
                className={buttonClassName}
                disabled={disabled}
                onClick={this.onButtonClick}
                onMouseEnter={this.onMouseEnter}
                onMouseDown={this.onMouseDown}
              >
                {children}
              </Button>
            );
        }
      }
    }

    export default UpdateSaverItem;