"Fossies" - the Fresh Open Source Software Archive

Member "graylog2-server-4.2.0/graylog2-web-interface/src/views/components/searchbar/date-time-picker/AbsoluteCalendar.tsx" (13 Oct 2021, 2419 Bytes) of package /linux/misc/graylog2-server-4.2.0.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) TSX (TypeScript with React) source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file. See also the latest Fossies "Diffs" side-by-side code changes report for "AbsoluteCalendar.tsx": 4.1.6_vs_4.2.0.

    1 /*
    2  * Copyright (C) 2020 Graylog, Inc.
    3  *
    4  * This program is free software: you can redistribute it and/or modify
    5  * it under the terms of the Server Side Public License, version 1,
    6  * as published by MongoDB, Inc.
    7  *
    8  * This program is distributed in the hope that it will be useful,
    9  * but WITHOUT ANY WARRANTY; without even the implied warranty of
   10  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
   11  * Server Side Public License for more details.
   12  *
   13  * You should have received a copy of the Server Side Public License
   14  * along with this program. If not, see
   15  * <http://www.mongodb.com/licensing/server-side-public-license>.
   16  */
   17 import * as React from 'react';
   18 import PropTypes from 'prop-types';
   19 import styled, { css } from 'styled-components';
   20 import { Field } from 'formik';
   21 
   22 import { AbsoluteTimeRange } from 'views/logic/queries/Query';
   23 
   24 import AbsoluteDatePicker from './AbsoluteDatePicker';
   25 import AbsoluteTimeInput from './AbsoluteTimeInput';
   26 
   27 type Props = {
   28   startDate?: Date,
   29   range: 'to' | 'from',
   30   nextTimeRange: AbsoluteTimeRange,
   31 };
   32 
   33 const ErrorMessage = styled.span(({ theme }) => css`
   34   color: ${theme.colors.variant.dark.danger};
   35   font-size: ${theme.fonts.size.small};
   36   font-style: italic;
   37   padding: 3px 3px 9px;
   38   height: 1.5em;
   39 `);
   40 
   41 const AbsoluteCalendar = ({ startDate, nextTimeRange, range }: Props) => {
   42   return (
   43     <Field name={`nextTimeRange[${range}]`}>
   44       {({ field: { value, onChange, name }, meta: { error } }) => {
   45         const _onChange = (newValue) => onChange({ target: { name, value: newValue } });
   46         const dateTime = error ? nextTimeRange[range] : value || nextTimeRange[range];
   47 
   48         return (
   49           <>
   50             <AbsoluteDatePicker onChange={_onChange}
   51                                 startDate={startDate}
   52                                 dateTime={dateTime} />
   53 
   54             <AbsoluteTimeInput onChange={_onChange}
   55                                range={range}
   56                                dateTime={dateTime} />
   57 
   58             <ErrorMessage>{error}</ErrorMessage>
   59           </>
   60         );
   61       }}
   62     </Field>
   63   );
   64 };
   65 
   66 AbsoluteCalendar.propTypes = {
   67   nextTimeRange: PropTypes.shape({ from: PropTypes.string, to: PropTypes.string }).isRequired,
   68   startDate: PropTypes.instanceOf(Date),
   69   range: PropTypes.oneOf(['to', 'from']).isRequired,
   70 };
   71 
   72 AbsoluteCalendar.defaultProps = {
   73   startDate: undefined,
   74 };
   75 
   76 export default AbsoluteCalendar;