From 41356ab096d592583eff00e7f7ff6ecde247ad38 Mon Sep 17 00:00:00 2001 From: vbojilova Date: Tue, 6 Aug 2024 13:39:36 -0700 Subject: [PATCH] updating formik fields and formik utils to better reflect form fields #556 --- app/components/formik/ControlCheckbox.js | 6 +- app/components/formik/ControlSelect.js | 3 +- app/components/formik/ControlTextArea.js | 3 +- .../formik/DateControl/InputComponent.js | 1 - app/components/formik/DateControl/index.js | 122 ++++- .../formik/ImportFileSelectControl/index.js | 17 +- .../TextareaMarkdownWrapper.js | 311 ----------- .../formik/MarkdownControl/index.js | 311 ++++++++++- .../formik/MultiSelectControl/MultiSelect.js | 480 ---------------- .../formik/MultiSelectControl/OptionList.js | 2 +- .../formik/MultiSelectControl/index.js | 515 ++++++++++++++++-- .../formik/MultiSelectField/index.js | 8 +- app/components/formik/UploadControl/Upload.js | 206 ------- app/components/formik/UploadControl/index.js | 214 +++++++- .../formik/validators/validate-date-format.js | 21 + app/utils/formik.js | 32 +- 16 files changed, 1102 insertions(+), 1150 deletions(-) delete mode 100644 app/components/formik/MarkdownControl/TextareaMarkdownWrapper.js delete mode 100644 app/components/formik/MultiSelectControl/MultiSelect.js delete mode 100644 app/components/formik/UploadControl/Upload.js create mode 100644 app/components/formik/validators/validate-date-format.js diff --git a/app/components/formik/ControlCheckbox.js b/app/components/formik/ControlCheckbox.js index 8d5f92c06..701ea5869 100644 --- a/app/components/formik/ControlCheckbox.js +++ b/app/components/formik/ControlCheckbox.js @@ -1,8 +1,8 @@ -import { Control } from 'react-redux-form/immutable'; +import React from 'react'; import styled from 'styled-components'; -const ControlCheckbox = styled(Control.checkbox)` +const ControlCheckbox = styled.input` margin-right: 5px; `; -export default ControlCheckbox; +export default ; diff --git a/app/components/formik/ControlSelect.js b/app/components/formik/ControlSelect.js index 463fcd7ff..8688bed47 100644 --- a/app/components/formik/ControlSelect.js +++ b/app/components/formik/ControlSelect.js @@ -1,7 +1,6 @@ -import { Control } from 'react-redux-form/immutable'; import styled from 'styled-components'; -const ControlSelect = styled(Control.select)` +const ControlSelect = styled.select` background:#ffffff; border:1px solid #E0E1E2; color:#000; diff --git a/app/components/formik/ControlTextArea.js b/app/components/formik/ControlTextArea.js index 2129873fe..1dcdfecdf 100644 --- a/app/components/formik/ControlTextArea.js +++ b/app/components/formik/ControlTextArea.js @@ -1,8 +1,7 @@ -import { Control } from 'react-redux-form/immutable'; import styled from 'styled-components'; import { palette } from 'styled-theme'; -const ControlTextArea = styled(Control.textarea)` +const ControlTextArea = styled.textarea` background-color: ${palette('background', 0)}; width: 100%; border: 1px solid ${palette('light', 1)}; diff --git a/app/components/formik/DateControl/InputComponent.js b/app/components/formik/DateControl/InputComponent.js index 722b2338b..87c4e5cfd 100644 --- a/app/components/formik/DateControl/InputComponent.js +++ b/app/components/formik/DateControl/InputComponent.js @@ -15,7 +15,6 @@ class InputComponent extends React.Component { focus = () => { this.input.focus(); } - render() { return ( cprops.onChange, - error: ({ fieldValue }) => !fieldValue.valid, - }} +// eslint-disable-next-line import/no-unresolved +import { isValid, format, parse, startOfToday, getYear, getMonth } from 'date-fns'; +import validateDateFormat from 'components/forms/validators/validate-date-format'; +import { DayPicker } from 'react-day-picker'; +import { useField, useFormikContext } from "formik"; + +import { DATE_FORMAT, DB_DATE_FORMAT } from 'themes/config'; + +import InputComponent from './InputComponent'; +import DatePickerStyle from './styles'; + +const DateControl = (props) => { + const { value, onChange } = props; + const { setFieldValue } = useFormikContext(); + const [field] = useField(props); + + const inputRef = useRef(null); + const [showDayPicker, setShowDayPicker] = useState(false); + + const handleDateChange = (valueDate) => { + if (valueDate) { + const formattedDB = format(valueDate, DB_DATE_FORMAT); + if (formattedDB) { + setShowDayPicker(false); + setFieldValue(field.name, formattedDB); + return onChange(formattedDB); + } + } + return null; + }; + + const handleInputChange = ({ target }) => { + const inputValue = target.value; + // if it's the right format, store as db format + if (inputValue !== '' && validateDateFormat(inputValue, DATE_FORMAT)) { + // parse from input format to db format + const formattedDB = format( + parse(inputValue, DATE_FORMAT, new Date()), + DB_DATE_FORMAT, + ); + onChange(formattedDB); + } else { + // wrong format but store value for input field + onChange(inputValue); + } + }; + + const formattedDay = value + && validateDateFormat(value, DB_DATE_FORMAT) + ? format(parse(value, DB_DATE_FORMAT, new Date()), DATE_FORMAT) + : value; + + const selected = value && validateDateFormat(value, DB_DATE_FORMAT) ? parse(value, DB_DATE_FORMAT, new Date()) : null; + + const handleInputFocus = () => { + setShowDayPicker(true); + }; + + const handleInputBlur = (event) => { + // on click outside, close day picker + if (!event.currentTarget.contains(event.relatedTarget)) { + setShowDayPicker(false); + } + }; + const getDefaultMonth = (selectedDate) => { + const defaultDate = isValid(selectedDate) ? selectedDate : startOfToday(); + const year = getYear(defaultDate); + const month = getMonth(defaultDate); + return new Date(year, month); + }; + + return ( +
+ - ); - } -} + {showDayPicker && ( + + )} + +
+ ); +}; DateControl.propTypes = { - model: PropTypes.string.isRequired, + value: PropTypes.string, + onChange: PropTypes.func.isRequired, }; export default DateControl; diff --git a/app/components/formik/ImportFileSelectControl/index.js b/app/components/formik/ImportFileSelectControl/index.js index 0f5160627..d85d4f35b 100644 --- a/app/components/formik/ImportFileSelectControl/index.js +++ b/app/components/formik/ImportFileSelectControl/index.js @@ -1,21 +1,6 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { Control } from 'react-redux-form/immutable'; import SelectFile from './SelectFile'; -const ImportFileSelectControl = (props) => { - const { model, ...otherProps } = props; - return ( - - ); -}; - -ImportFileSelectControl.propTypes = { - model: PropTypes.string.isRequired, -}; +const ImportFileSelectControl = (props) => ; export default ImportFileSelectControl; diff --git a/app/components/formik/MarkdownControl/TextareaMarkdownWrapper.js b/app/components/formik/MarkdownControl/TextareaMarkdownWrapper.js deleted file mode 100644 index 44f12eaae..000000000 --- a/app/components/formik/MarkdownControl/TextareaMarkdownWrapper.js +++ /dev/null @@ -1,311 +0,0 @@ -import React, { - useRef, useState, useEffect, -} from 'react'; -import PropTypes from 'prop-types'; -import { FormattedMessage, useIntl } from 'react-intl'; -import { palette } from 'styled-theme'; -import styled, { withTheme } from 'styled-components'; -import { Box, Text, Button } from 'grommet'; - -import { - Bold, - Italic, - Link as LinkIcon, - List, -} from 'grommet-icons'; - -import TextareaMarkdown from 'textarea-markdown-editor'; -import MarkdownField from 'components/fields/MarkdownField'; -import InfoOverlay from 'components/InfoOverlay'; -import A from 'components/styled/A'; -import messages from './messages'; - -const MIN_TEXTAREA_HEIGHT = 320; - -const MarkdownHint = styled.div` - text-align: right; - color: ${palette('text', 1)}; - font-size: 0.85em; - @media print { - font-size: ${(props) => props.theme.sizes.print.smaller}; - } -`; - -const StyledTextareaMarkdown = styled( - React.forwardRef((p, ref) => ) -)` - background-color: ${palette('background', 0)}; - width: 100%; - border: 1px solid ${palette('light', 1)}; - padding: 0.7em; - border-radius: 0.5em; - color: ${palette('text', 0)}; - min-height: ${MIN_TEXTAREA_HEIGHT}px; - resize: "none"; -`; -const Preview = styled((p) => )` - background-color: ${palette('background', 0)}; - width: 100%; - border: 1px solid ${palette('light', 1)}; - padding: 0.7em; - color: ${palette('text', 0)}; - min-height: ${MIN_TEXTAREA_HEIGHT}px; -`; - -const MDButton = styled((p) => ( -