[WIP] Add support for second fractions in SecondInput

Closes #56
wojtekmaj · Sep 27, 2021 · 231090e · 231090e
1 parent 5371ef0
commit 231090e
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 7 deletions.
diff --git a/src/TimeInput.jsx b/src/TimeInput.jsx
@@ -52,7 +52,7 @@ function focus(element) {
 function renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances) {
  const usedFunctions = [];
  const pattern = new RegExp(
- Object.keys(elementFunctions).map((el) => `${el}+`).join('|'), 'g',
+ Object.keys(elementFunctions).join('|'), 'g',
  );
  const matches = placeholder.match(pattern);
 
@@ -488,7 +488,19 @@ export default class TimeInput extends PureComponent {
  throw new Error(`Unsupported token: ${currentMatch}`);
  }
 
- const showLeadingZeros = currentMatch ? currentMatch.length === 2 : true;
+ const showFractions = /S+/.test(currentMatch);
+ const showLeadingZeros = !showFractions && currentMatch ? currentMatch.length === 2 : true;
+
+ /**
+ * Returns "0.1" given "S"
+ * Returns "0.01" given "SS"
+ * Returns "0.001" given "SSS"
+ * and so on
+ */
+ function getStepFromFormat(format) {
+ const step = Math.pow(10, -format.length + 1);
+ return step;
+ }
 
  return (
  <SecondInput
@@ -500,6 +512,7 @@ export default class TimeInput extends PureComponent {
  inputRef={this.secondInput}
  minute={minute}
  placeholder={secondPlaceholder}
+ step={showFractions ? getStepFromFormat(currentMatch.match(/S+/)) : undefined}
  showLeadingZeros={showLeadingZeros}
  value={second}
  />
@@ -529,11 +542,11 @@ export default class TimeInput extends PureComponent {
  const { format } = this.props;
 
  const elementFunctions = {
- h: this.renderHour,
- H: this.renderHour,
- m: this.renderMinute,
- s: this.renderSecond,
- a: this.renderAmPm,
+ 'h+': this.renderHour,
+ 'H+': this.renderHour,
+ 'm+': this.renderMinute,
+ 's+(\\.S+)?': this.renderSecond,
+ 'a+': this.renderAmPm,
  };
 
  const allowMultipleInstances = typeof format !== 'undefined';

diff --git a/src/TimeInput.spec.jsx b/src/TimeInput.spec.jsx
@@ -404,6 +404,8 @@ describe('TimeInput', () => {
 
  expect(componentInput).toHaveLength(1);
  expect(customInputs).toHaveLength(1);
+ expect(componentInput.prop('showLeadingZeros')).toBeFalsy();
+ expect(componentInput.prop('step')).toBeUndefined();
  });
 
  it('renders "ss" properly', () => {
@@ -420,6 +422,41 @@ describe('TimeInput', () => {
  expect(componentInput).toHaveLength(1);
  expect(customInputs).toHaveLength(1);
  expect(componentInput.prop('showLeadingZeros')).toBeTruthy();
+ expect(componentInput.prop('step')).toBeUndefined();
+ });
+
+ it('renders "ss.S" properly', () => {
+ const component = mount(
+ <TimeInput
+ {...defaultProps}
+ format="ss"
+ />,
+ );
+
+ const componentInput = component.find('SecondInput');
+ const customInputs = component.find('input[data-input]');
+
+ expect(componentInput).toHaveLength(1);
+ expect(customInputs).toHaveLength(1);
+ expect(componentInput.prop('showLeadingZeros')).toBeTruthy();
+ expect(componentInput.prop('step')).toBe('0.1');
+ });
+
+ it('renders "ss.SS" properly', () => {
+ const component = mount(
+ <TimeInput
+ {...defaultProps}
+ format="ss"
+ />,
+ );
+
+ const componentInput = component.find('SecondInput');
+ const customInputs = component.find('input[data-input]');
+
+ expect(componentInput).toHaveLength(1);
+ expect(customInputs).toHaveLength(1);
+ expect(componentInput.prop('showLeadingZeros')).toBeTruthy();
+ expect(componentInput.prop('step')).toBe('0.01');
  });
 
  it('throws error for "sss"', () => {