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

100% Statements 8/8
100% Branches 2/2
100% Functions 2/2
100% Lines 8/8
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                  1x             1x                 1x           1x             7x               49x                                       1x         1x                                                      
import React from 'react';
import PropTypes from 'prop-types';
import {
  borderWidth,
  borderRadius,
} from '@bufferapp/components/style/border';
import { mystic } from '@bufferapp/components/style/color';
import ScheduleTableColumn from './ScheduleTableColumn';
 
const tableStyle = {
  display: 'flex',
  border: `${borderWidth} solid ${mystic}`,
  borderRadius,
  overflow: 'hidden',
};
 
const pausedColumnStyle = {
  display: 'flex',
  marginRight: '-1px',
  flexGrow: '1',
  backgroundColor: '#f8f8f8',
  borderLeft: `${borderWidth} solid ${mystic}`,
};
 
 
const tableColumnWrapperStyle = {
  display: 'flex',
  marginRight: '-1px',
  flexGrow: '1',
};
 
const ScheduleTable = ({
  day,
  disabled,
  select24Hours,
  onPauseToggleClick,
  profileId,
}) => (
  <div style={tableStyle}>
    {
      day.map(({
        dayName,
        postingTimesTotal,
        times,
        paused,
      }) =>
        <div
          key={dayName}
          style={paused ? pausedColumnStyle : tableColumnWrapperStyle}
        >
          <ScheduleTableColumn
            dayName={dayName}
            disabled={disabled}
            postingTimesTotal={postingTimesTotal}
            select24Hours={select24Hours}
            times={times}
            onPauseToggleClick={onPauseToggleClick}
            profileId={profileId}
            paused={paused}
          />
        </div>,
      )
    }
  </div>
);
 
ScheduleTable.defaultProps = {
  disabled: false,
  select24Hours: false,
};
 
ScheduleTable.propTypes = {
  day: PropTypes.arrayOf(
    PropTypes.shape({
      dayName: PropTypes.string,
      postingTimesTotal: PropTypes.number,
      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,
    }),
  ).isRequired,
  disabled: PropTypes.bool.isRequired,
  select24Hours: PropTypes.bool.isRequired,
  onPauseToggleClick: PropTypes.func.isRequired,
  profileId: PropTypes.string.isRequired,
};
 
export default ScheduleTable;