All files / buffer-web-components/ScheduleSetting/ScheduleTable/ScheduleTableColumn index.jsx

100% Statements 9/9
100% Branches 2/2
100% Functions 2/2
100% Lines 9/9
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                    1x   1x               1x                 1x         1x                 56x                       88x                       1x           1x                                              
import React from 'react';
import PropTypes from 'prop-types';
import { borderWidth } from '@bufferapp/components/style/border';
import {
  mystic,
  geyser,
} from '@bufferapp/components/style/color';
import ScheduleTableHeader from '../ScheduleTableHeader';
import ScheduleTableCell from '../ScheduleTableCell';
 
const columnHeight = '8rem';
 
const columnStyle = {
  width: 0,
  minHeight: columnHeight,
  textAlign: 'center',
  borderRight: `${borderWidth} solid ${mystic}`,
  flexGrow: 1,
};
 
const columnNoTimesStyle = {
  width: 0,
  minHeight: columnHeight,
  color: geyser,
  textAlign: 'center',
  borderRight: `${borderWidth} solid ${mystic}`,
  flexGrow: 1,
};
 
const columnWrapperStyle = {
  paddingTop: '0.5rem',
  paddingBottom: '0.5rem',
};
 
const ScheduleTableColumn = ({
  dayName,
  disabled,
  select24Hours,
  times,
  onPauseToggleClick,
  paused,
  profileId,
}) => (
  <div style={(times.length === 0) ? columnNoTimesStyle : columnStyle}>
    <ScheduleTableHeader
      dayName={dayName}
      postingTimesTotal={times.length}
      paused={paused}
      onPauseToggleClick={onPauseToggleClick}
      profileId={profileId}
      disabled={disabled}
    />
    <div style={columnWrapperStyle}>
      {
        times.map((time, index) =>
          <ScheduleTableCell
            disabled={disabled}
            key={index}
            select24Hours={select24Hours}
            time={time}
          />,
        )
      }
    </div>
  </div>
  );
 
ScheduleTableColumn.defaultProps = {
  disabled: false,
  select24Hours: false,
  paused: false,
};
 
ScheduleTableColumn.propTypes = {
  dayName: PropTypes.string.isRequired,
  disabled: PropTypes.bool.isRequired,
  select24Hours: PropTypes.bool.isRequired,
  paused: PropTypes.bool,
  times: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.oneOfType([
        PropTypes.shape({
          hours: PropTypes.number.isRequired,
          minutes: PropTypes.number.isRequired,
        }),
        PropTypes.string,
      ]),
      onChange: PropTypes.func.isRequired,
      onRemoveTimeClick: PropTypes.func.isRequired,
    }).isRequired,
  ).isRequired,
  onPauseToggleClick: PropTypes.func.isRequired,
  profileId: PropTypes.string.isRequired,
};
 
export default ScheduleTableColumn;