Set days, hours, minutes, seconds in the counter

[deadcoder0904]

I am unable to figure how to set days, hours, minutes & seconds in the counter.

I tried every transform but either it makes the counter stop or it places days, hours at awkward places like before or after the comma.

Currently I see 9,13,59,20 but what I want is 9 days, 13 hours, 59 minutes & 20 seconds where the numbers flip & the text remains static :)

Would love to know the answer to this as well?

Code & Sandbox is the same as issue #10

[deadcoder0904]

I got a little closer but I want days, hours next to the numbers where , is https://codesandbox.io/s/flip-padding-not-working-bqmwg?file=/src/EventCountdown.js

[deadcoder0904]

Got close. No idea how to split the values? Probably need a new transform to split array values.

import React, { useRef, useEffect, useState } from "react";
import Tick from "@pqina/flip";

export const EventCountdown = ({ value }) => {
  const divRef = useRef();
  const tickRef = useRef();

  const [tickValue, setTickValue] = useState(value);

  // Make the Tick instance and store it in the refs
  useEffect(() => {
    const didInit = tick => {
      tickRef.current = tick;
    };

    const currDiv = divRef.current;
    const tickValue = tickRef.current;
    Tick.DOM.create(currDiv, {
      value,
      didInit
    });
    return () => Tick.DOM.destroy(tickValue);
  }, [value]);

  // Start the Tick.down process
  useEffect(() => {
    const counter = Tick.count.down(value, {
      format: ["d", "h", "m", "s"]
    });

    // When the counter updates, update React's state value
    counter.onupdate = function(value) {
      setTickValue(value);
    };

    return () => {
      counter.timer.stop();
    };
  }, [value]);

  // When the tickValue is updated, update the Tick.DOM element
  useEffect(() => {
    if (tickRef.current) {
      tickRef.current.value = tickValue;
    }
  }, [tickValue]);

  return (
    <div className="tick">
      <div data-repeat="true" data-layout="horizontal fit">
        <div className="tick-group">
          <div ref={divRef}>
            <span data-view="flip" />
            <span className="tick-text-inline">Days</span>
            <span data-view="flip" />
            <span className="tick-text-inline">Hours</span>
            <span data-view="flip" />
            <span className="tick-text-inline">Minutes</span>
            <span data-view="flip" />
            <span className="tick-text-inline">Seconds</span>
          </div>
        </div>
      </div>
    </div>
  );
};

[deadcoder0904]

Ahh jeez got it working. Always happens after I post an issue 🤦

import React, { useRef, useEffect, useState } from "react";
import Tick from "@pqina/flip";

export const EventCountdown = ({ value }) => {
  const divRef = useRef();
  const tickRef = useRef();

  const [tickValue, setTickValue] = useState(value);

  // Make the Tick instance and store it in the refs
  useEffect(() => {
    const didInit = tick => {
      tickRef.current = tick;
    };

    const currDiv = divRef.current;
    const tickValue = tickRef.current;
    Tick.DOM.create(currDiv, {
      value,
      didInit
    });
    return () => Tick.DOM.destroy(tickValue);
  }, [value]);

  // Start the Tick.down process
  useEffect(() => {
    const counter = Tick.count.down(value, {
      format: ["d", "h", "m", "s"]
    });

    // When the counter updates, update React's state value
    counter.onupdate = function(value) {
      setTickValue(value);
    };

    return () => {
      counter.timer.stop();
    };
  }, [value]);

  // When the tickValue is updated, update the Tick.DOM element
  useEffect(() => {
    if (tickRef.current) {
      tickRef.current.value = {
        days: tickValue[0],
        hours: tickValue[1],
        minutes: tickValue[2],
        seconds: tickValue[3]
      };
    }
  }, [tickValue]);

  return (
    <div className="tick">
      <div data-repeat="true" data-layout="horizontal fit">
        <div className="tick-group">
          <div ref={divRef}>
            <span data-key="days" data-transform="pad(00)" data-view="flip" />
            <span className="tick-text-inline">Days</span>
            <span data-key="hours" data-transform="pad(00)" data-view="flip" />
            <span className="tick-text-inline">Hours</span>
            <span
              data-key="minutes"
              data-transform="pad(00)"
              data-view="flip"
            />
            <span className="tick-text-inline">Minutes</span>
            <span
              data-key="seconds"
              data-transform="pad(00)"
              data-view="flip"
            />
            <span className="tick-text-inline">Seconds</span>
          </div>
        </div>
      </div>
    </div>
  );
};