"Fossies" - the Fresh Open Source Software Archive

Member "graylog2-server-4.2.0/graylog2-web-interface/src/views/components/searchbar/date-time-picker/AbsoluteTimestamp.tsx" (13 Oct 2021, 2233 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.

    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 AbsoluteDateInput from './AbsoluteDateInput';
   25 
   26 type Props = {
   27   disabled: boolean,
   28   range: 'to' | 'from',
   29   nextTimeRange: AbsoluteTimeRange,
   30 };
   31 
   32 const ErrorMessage = styled.span(({ theme }) => css`
   33   color: ${theme.colors.variant.dark.danger};
   34   font-size: ${theme.fonts.size.small};
   35   font-style: italic;
   36   padding: 3px 3px 9px;
   37   height: 1.5em;
   38 `);
   39 
   40 const AbsoluteTimestamp = ({ disabled, nextTimeRange, range }: Props) => {
   41   return (
   42     <Field name={`nextTimeRange[${range}]`}>
   43       {({ field: { value, onChange, name }, meta: { error } }) => {
   44         const _onChange = (newValue) => onChange({ target: { name, value: newValue } });
   45         const dateTime = error ? nextTimeRange[range] : value || nextTimeRange[range];
   46 
   47         return (
   48           <>
   49             <AbsoluteDateInput name={name}
   50                                disabled={disabled}
   51                                value={dateTime}
   52                                onChange={_onChange} />
   53 
   54             <ErrorMessage>{error}</ErrorMessage>
   55           </>
   56         );
   57       }}
   58     </Field>
   59   );
   60 };
   61 
   62 AbsoluteTimestamp.propTypes = {
   63   disabled: PropTypes.bool,
   64   nextTimeRange: PropTypes.shape({ from: PropTypes.string, to: PropTypes.string }).isRequired,
   65   range: PropTypes.oneOf(['to', 'from']).isRequired,
   66 };
   67 
   68 AbsoluteTimestamp.defaultProps = {
   69   disabled: false,
   70 };
   71 
   72 export default AbsoluteTimestamp;