@chayns-components/devalue-slider
Version:
A slider to devalue something.
88 lines (87 loc) • 3.85 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _chaynsApi = require("chayns-api");
var _Timer = require("./Timer.styles");
var _date = require("../../utils/date");
var _textStrings = _interopRequireDefault(require("../../constants/textStrings"));
var _textstring = require("@chayns-components/textstring");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const Timer = ({
devalueTime,
color,
textColor = 'white'
}) => {
const {
active: language
} = (0, _chaynsApi.getLanguage)();
const refDate = (0, _react.useRef)(new Date());
const [distance, setDistance] = (0, _react.useState)((0, _date.intervalToDuration)({
start: devalueTime,
end: new Date()
}));
const minutesShowValue = (0, _react.useMemo)(() => Math.max(distance.minutes ?? 0, 0).toString(), [distance.minutes]);
const secondsShowValue = (0, _react.useMemo)(() => Math.max(distance.seconds ?? 0, 0).toString(), [distance.seconds]);
(0, _react.useEffect)(() => {
refDate.current = new Date();
const interval = setInterval(() => {
refDate.current = new Date();
setDistance((0, _date.intervalToDuration)({
start: devalueTime,
end: refDate.current
}));
}, 500);
return () => clearInterval(interval);
}, [devalueTime]);
const handlePointerDownCapture = (0, _react.useCallback)(() => {
void (0, _chaynsApi.vibrate)({
pattern: [50],
iOSFeedbackVibration: 7
});
}, []);
const label = (0, _react.useMemo)(() => {
let text = _textStrings.default.components.timer.devalued;
if ((0, _date.differenceInHours)(refDate.current, devalueTime) > 0) {
text = _textStrings.default.components.timer.future;
} else if ((0, _date.differenceInMinutes)(refDate.current, devalueTime) > 0) {
text = _textStrings.default.components.timer.devaluedWithMinutes;
}
const formatTime = (date, formatString) => {
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
if (formatString === 'HH:mm') {
return `${hours}:${minutes}`;
}
return '';
};
const distanceLabel = (0, _date.getTimeTillNow)({
date: new Date(),
currentDate: devalueTime,
language
});
return /*#__PURE__*/_react.default.createElement(_textstring.Textstring, {
textstring: (0, _textstring.ttsToITextString)(text),
replacements: {
'##MINUTES##': minutesShowValue,
'##SECONDS##': secondsShowValue,
'##TIME##': formatTime(devalueTime, 'HH:mm'),
'##DISTANCE##': distanceLabel
}
});
}, [devalueTime, minutesShowValue, secondsShowValue, language]);
return /*#__PURE__*/_react.default.createElement(_Timer.Container, {
$baseFontSize: 17,
$borderSize: 2,
$height: 50,
$color: color,
$textColor: textColor,
$backgroundColor: color,
onPointerDownCapture: handlePointerDownCapture
}, /*#__PURE__*/_react.default.createElement(_Timer.Time, null, label));
};
var _default = exports.default = Timer;
//# sourceMappingURL=Timer.js.map