Use strings instead of numbers in internal input state

Closes #87

src/TimeInput.jsx

@@ -112,9 +112,9 @@ export default class TimeInput extends PureComponent {
  ) {
  if (nextValue) {
  [, nextState.amPm] = convert24to12(getHours(nextValue));
- nextState.hour = getHours(nextValue);
- nextState.minute = getMinutes(nextValue);
- nextState.second = getSeconds(nextValue);
+ nextState.hour = getHours(nextValue).toString();
+ nextState.minute = getMinutes(nextValue).toString();
+ nextState.second = getSeconds(nextValue).toString();
  } else {
  nextState.amPm = null;
  nextState.hour = null;
@@ -297,22 +297,22 @@ export default class TimeInput extends PureComponent {
  case 'hour12': {
  this.setState(
  (prevState) => ({
- hour: value ? convert12to24(parseInt(value, 10), prevState.amPm) : null,
+ hour: value ? convert12to24(parseInt(value, 10), prevState.amPm).toString() : '',
  }),
  this.onChangeExternal,
  );
  break;
  }
  case 'hour24': {
  this.setState(
- { hour: value ? parseInt(value, 10) : null },
+ { hour: value },
  this.onChangeExternal,
  );
  break;
  }
  default: {
  this.setState(
- { [name]: value ? parseInt(value, 10) : null },
+ { [name]: value },
  this.onChangeExternal,
  );
  }

src/TimeInput.spec.jsx

@@ -116,9 +116,9 @@ describe('TimeInput', () => {
  const customInputs = component.find('input[data-input]');
 
  expect(nativeInput.prop('value')).toBe(date);
- expect(customInputs.at(0).prop('value')).toBe(10);
- expect(customInputs.at(1).prop('value')).toBe(17);
- expect(customInputs.at(2).prop('value')).toBe(0);
+ expect(customInputs.at(0).prop('value')).toBe('10');
+ expect(customInputs.at(1).prop('value')).toBe('17');
+ expect(customInputs.at(2).prop('value')).toBe('0');
  });
 
  itIfFullICU('shows a given time in all inputs correctly (24-hour format)', () => {
@@ -137,9 +137,9 @@ describe('TimeInput', () => {
  const customInputs = component.find('input[data-input]');
 
  expect(nativeInput.prop('value')).toBe(date);
- expect(customInputs.at(0).prop('value')).toBe(22);
- expect(customInputs.at(1).prop('value')).toBe(17);
- expect(customInputs.at(2).prop('value')).toBe(0);
+ expect(customInputs.at(0).prop('value')).toBe('22');
+ expect(customInputs.at(1).prop('value')).toBe('17');
+ expect(customInputs.at(2).prop('value')).toBe('0');
  });
 
  it('shows empty value in all inputs correctly given null', () => {
@@ -665,7 +665,7 @@ describe('TimeInput', () => {
  expect(onChange).toHaveBeenCalledWith('20:17:00', false);
  });
 
- it('triggers onChange correctly when cleared custom inputs', () => {
+ it.only('triggers onChange correctly when cleared custom inputs', () => {
  const onChange = jest.fn();
  const date = '22:17:00';
 

src/TimeInput/Hour12Input.jsx

@@ -44,7 +44,7 @@ export default function Hour12Input({
  return minHourResult;
  })());
 
- const value12 = value !== null ? convert24to12(value)[0] : null;
+ const value12 = value ? convert24to12(value)[0].toString() : '';
 
  return (
  <Input
@@ -63,7 +63,7 @@ Hour12Input.propTypes = {
  ariaLabel: PropTypes.string,
  className: PropTypes.string.isRequired,
  disabled: PropTypes.bool,
- hour: PropTypes.number,
+ hour: PropTypes.string,
  itemRef: PropTypes.func,
  maxTime: isTime,
  minTime: isTime,
@@ -73,5 +73,5 @@ Hour12Input.propTypes = {
  placeholder: PropTypes.string,
  required: PropTypes.bool,
  showLeadingZeros: PropTypes.bool,
- value: PropTypes.number,
+ value: PropTypes.string,
 };

src/TimeInput/Hour12Input.spec.jsx

@@ -77,7 +77,7 @@ describe('Hour12Input', () => {
  });
 
  it('displays given value properly (am)', () => {
- const value = 11;
+ const value = '11';
 
  const component = mount(
  <Hour12Input
@@ -92,7 +92,7 @@ describe('Hour12Input', () => {
  });
 
  it('displays given value properly (pm)', () => {
- const value = 22;
+ const value = '22';
 
  const component = mount(
  <Hour12Input
@@ -103,7 +103,7 @@ describe('Hour12Input', () => {
 
  const input = component.find('input');
 
- expect(input.prop('value')).toBe(value - 12);
+ expect(input.prop('value')).toBe(`${value - 12}`);
  });
 
  it('does not disable input by default', () => {

src/TimeInput/Hour24Input.jsx

@@ -31,7 +31,7 @@ Hour24Input.propTypes = {
  ariaLabel: PropTypes.string,
  className: PropTypes.string.isRequired,
  disabled: PropTypes.bool,
- hour: PropTypes.number,
+ hour: PropTypes.string,
  itemRef: PropTypes.func,
  maxTime: isTime,
  minTime: isTime,
@@ -41,5 +41,5 @@ Hour24Input.propTypes = {
  placeholder: PropTypes.string,
  required: PropTypes.bool,
  showLeadingZeros: PropTypes.bool,
- value: PropTypes.number,
+ value: PropTypes.string,
 };

src/TimeInput/Hour24Input.spec.jsx

@@ -76,7 +76,7 @@ describe('Hour24Input', () => {
  });
 
  it('displays given value properly', () => {
- const value = 11;
+ const value = '11';
 
  const component = mount(
  <Hour24Input

src/TimeInput/Input.jsx

@@ -92,8 +92,13 @@ export default function Input({
  step,
  value,
 }) {
- const hasLeadingZero = showLeadingZeros && value !== null && value < 10;
- const maxLength = max.toString().length;
+ const hasLeadingZero = (
+ showLeadingZeros
+ && value
+ && value < 10
+ && !value.toString().startsWith('0')
+ );
+ const maxLength = max ? max.toString().length : null;
 
  return [
  (hasLeadingZero && <span key="leadingZero" className={`${className}__leadingZero`}>0</span>),
@@ -160,5 +165,5 @@ Input.propTypes = {
  required: PropTypes.bool,
  showLeadingZeros: PropTypes.bool,
  step: PropTypes.number,
- value: PropTypes.number,
+ value: PropTypes.string,
 };

src/TimeInput/MinuteInput.jsx

@@ -15,7 +15,7 @@ export default function MinuteInput({
  ...otherProps
 }) {
  function isSameHour(date) {
- return date && hour === getHours(date);
+ return date && hour === getHours(date).toString();
  }
 
  const maxMinute = safeMin(59, isSameHour(maxTime) && getMinutes(maxTime));
@@ -36,7 +36,7 @@ MinuteInput.propTypes = {
  ariaLabel: PropTypes.string,
  className: PropTypes.string.isRequired,
  disabled: PropTypes.bool,
- hour: PropTypes.number,
+ hour: PropTypes.string,
  itemRef: PropTypes.func,
  maxTime: isTime,
  minTime: isTime,
@@ -46,5 +46,5 @@ MinuteInput.propTypes = {
  placeholder: PropTypes.string,
  required: PropTypes.bool,
  showLeadingZeros: PropTypes.bool,
- value: PropTypes.number,
+ value: PropTypes.string,
 };

src/TimeInput/MinuteInput.spec.jsx

@@ -53,7 +53,7 @@ describe('MinuteInput', () => {
  const component = mount(
  <MinuteInput
  {...defaultProps}
- value={9}
+ value="9"
  />,
  );
 
@@ -63,11 +63,26 @@ describe('MinuteInput', () => {
  expect(input.prop('className')).toContain(`${defaultProps.className}__input--hasLeadingZero`);
  });
 
+ it('does not render "0" given showLeadingZeros if minute is <10 with leading zero already', () => {
+ const component = mount(
+ <MinuteInput
+ {...defaultProps}
+ showLeadingZeros
+ value="09"
+ />,
+ );
+
+ const input = component.find('input');
+
+ expect(component.text()).not.toContain('0');
+ expect(input.prop('className')).not.toContain(`${defaultProps.className}__input--hasLeadingZero`);
+ });
+
  it('does not render "0" if minute is >=10', () => {
  const component = mount(
  <MinuteInput
  {...defaultProps}
- value={10}
+ value="10"
  />,
  );
 
@@ -104,7 +119,7 @@ describe('MinuteInput', () => {
  });
 
  it('displays given value properly', () => {
- const value = 11;
+ const value = '11';
 
  const component = mount(
  <MinuteInput
@@ -192,7 +207,7 @@ describe('MinuteInput', () => {
  const component = mount(
  <MinuteInput
  {...defaultProps}
- hour={22}
+ hour="22"
  minTime="21:40"
  />,
  );
@@ -206,7 +221,7 @@ describe('MinuteInput', () => {
  const component = mount(
  <MinuteInput
  {...defaultProps}
- hour={22}
+ hour="22"
  minTime="22:40"
  />,
  );
@@ -230,7 +245,7 @@ describe('MinuteInput', () => {
  const component = mount(
  <MinuteInput
  {...defaultProps}
- hour={22}
+ hour="22"
  maxTime="23:40"
  />,
  );
@@ -244,7 +259,7 @@ describe('MinuteInput', () => {
  const component = mount(
  <MinuteInput
  {...defaultProps}
- hour={22}
+ hour="22"
  maxTime="22:40"
  />,
  );

src/TimeInput/SecondInput.jsx

@@ -16,7 +16,7 @@ export default function SecondInput({
  ...otherProps
 }) {
  function isSameMinute(date) {
- return date && hour === getHours(date) && minute === getMinutes(date);
+ return date && hour === getHours(date).toString() && minute === getMinutes(date).toString();
  }
 
  const maxSecond = safeMin(59, isSameMinute(maxTime) && getSeconds(maxTime));
@@ -37,16 +37,16 @@ SecondInput.propTypes = {
  ariaLabel: PropTypes.string,
  className: PropTypes.string.isRequired,
  disabled: PropTypes.bool,
- hour: PropTypes.number,
+ hour: PropTypes.string,
  itemRef: PropTypes.func,
  maxTime: isTime,
  minTime: isTime,
- minute: PropTypes.number,
+ minute: PropTypes.string,
  onChange: PropTypes.func,
  onKeyDown: PropTypes.func,
  onKeyUp: PropTypes.func,
  placeholder: PropTypes.string,
  required: PropTypes.bool,
  showLeadingZeros: PropTypes.bool,
- value: PropTypes.number,
+ value: PropTypes.string,
 };