@parkassist/pa-ui-library
Version:
INX Platform elements
59 lines • 1.88 kB
JavaScript
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import Slider from "rc-slider";
import 'rc-slider/assets/index.css';
import styled from "styled-components";
import { Column } from "../Layout/Flex";
const RangeWrapper = styled(Column)(() => ({
padding: "8px 24px"
}));
const Title = styled.h4(() => ({
marginLeft: -8
}));
export const getHourRangeMarks = (isStandardFormat, isMobile = false) => {
let marks = {};
for (let i = 0; i <= 24; i++) {
if (isStandardFormat) marks[i] = `${i}hr`;else {
if (i === 0 || i === 24) marks[i] = `${12}am`;else if (i === 12) marks[i] = `${12}pm`;else marks[i] = i < 13 ? `${i}am` : `${i - 12}pm`;
}
if (isMobile && i % 6 !== 0) {
marks[i] = ``;
}
}
return marks;
};
const HourRangePickerComponent = _a => {
var {
isStandardFormat = false,
isMobile,
label = "Time of Day"
} = _a,
props = __rest(_a, ["isStandardFormat", "isMobile", "label"]);
return _jsxs(RangeWrapper, {
children: [_jsx(Title, {
children: label
}), _jsx(Slider, Object.assign({
range: true,
style: {
width: "97%",
fontSize: 6,
marginLeft: "1.5%"
},
defaultValue: [0, 24],
max: 24,
pushable: true,
step: 6,
allowCross: true,
marks: getHourRangeMarks(isStandardFormat, isMobile)
}, props))]
});
};
export default HourRangePickerComponent;