github.com/minio/console@v1.4.1/web-app/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2021 MinIO, Inc.
     3  //
     4  // This program is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Affero General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // This program is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    12  // GNU Affero General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Affero General Public License
    15  // along with this program.  If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React, { Fragment } from "react";
    18  import {
    19    Button,
    20    SyncIcon,
    21    Grid,
    22    Box,
    23    breakPoints,
    24    TimeIcon,
    25    DateTimeInput,
    26  } from "mds";
    27  import { DateTime } from "luxon";
    28  
    29  interface IDateRangeSelector {
    30    timeStart: DateTime | null;
    31    setTimeStart: (value: DateTime | null) => void;
    32    timeEnd: DateTime | null;
    33    setTimeEnd: (value: DateTime | null) => void;
    34    triggerSync?: () => void;
    35    label?: string;
    36    startLabel?: string;
    37    endLabel?: string;
    38  }
    39  
    40  const DateRangeSelector = ({
    41    timeStart,
    42    setTimeStart,
    43    timeEnd,
    44    setTimeEnd,
    45    triggerSync,
    46    label = "Filter:",
    47    startLabel = "Start Time:",
    48    endLabel = "End Time:",
    49  }: IDateRangeSelector) => {
    50    return (
    51      <Grid
    52        item
    53        xs={12}
    54        sx={{
    55          "& .filter-date-input-label, .end-time-input-label": {
    56            display: "none",
    57          },
    58          "& .MuiInputBase-adornedEnd.filter-date-date-time-input": {
    59            width: "100%",
    60            border: "1px solid #eaeaea",
    61            paddingLeft: "8px",
    62            paddingRight: "8px",
    63            borderRadius: "1px",
    64          },
    65  
    66          "& .MuiInputAdornment-root button": {
    67            height: "20px",
    68            width: "20px",
    69            marginRight: "5px",
    70          },
    71          "& .filter-date-input-wrapper": {
    72            height: "30px",
    73            width: "100%",
    74  
    75            "& .MuiTextField-root": {
    76              height: "30px",
    77              width: "90%",
    78  
    79              "& input.Mui-disabled": {
    80                color: "#000000",
    81                WebkitTextFillColor: "#101010",
    82              },
    83            },
    84          },
    85        }}
    86      >
    87        <Box
    88          sx={{
    89            display: "grid",
    90            height: 40,
    91            alignItems: "center",
    92            gridTemplateColumns: "auto 2fr auto",
    93            padding: 0,
    94            [`@media (max-width: ${breakPoints.sm}px)`]: {
    95              padding: 5,
    96            },
    97            [`@media (max-width: ${breakPoints.md}px)`]: {
    98              gridTemplateColumns: "1fr",
    99              height: "auto",
   100            },
   101            gap: "5px",
   102          }}
   103        >
   104          <Box
   105            sx={{ fontSize: "14px", fontWeight: 500, marginRight: "5px" }}
   106            className={"muted"}
   107          >
   108            {label}
   109          </Box>
   110          <Box
   111            customBorderPadding={"0px"}
   112            sx={{
   113              display: "grid",
   114              height: 40,
   115              alignItems: "center",
   116              gridTemplateColumns: "1fr 1fr",
   117              gap: "8px",
   118              paddingLeft: "8px",
   119              paddingRight: "8px",
   120              [`@media (max-width: ${breakPoints.md}px)`]: {
   121                height: "auto",
   122                gridTemplateColumns: "1fr",
   123              },
   124            }}
   125          >
   126            <DateTimeInput
   127              value={timeStart}
   128              onChange={setTimeStart}
   129              id="stTime"
   130              secondsSelector={false}
   131              pickerStartComponent={
   132                <Fragment>
   133                  <TimeIcon />
   134                  <span>{startLabel}</span>
   135                </Fragment>
   136              }
   137            />
   138            <DateTimeInput
   139              value={timeEnd}
   140              onChange={setTimeEnd}
   141              id="endTime"
   142              secondsSelector={false}
   143              pickerStartComponent={
   144                <Fragment>
   145                  <TimeIcon />
   146                  <span>{endLabel}</span>
   147                </Fragment>
   148              }
   149            />
   150          </Box>
   151  
   152          {triggerSync && (
   153            <Box
   154              sx={{
   155                alignItems: "flex-end",
   156                display: "flex",
   157                justifyContent: "flex-end",
   158              }}
   159            >
   160              <Button
   161                id={"sync"}
   162                type="button"
   163                variant="callAction"
   164                onClick={triggerSync}
   165                icon={<SyncIcon />}
   166                label={"Sync"}
   167              />
   168            </Box>
   169          )}
   170        </Box>
   171      </Grid>
   172    );
   173  };
   174  
   175  export default DateRangeSelector;