fix: recurrence widget (#444)

* fix: recurrence widget * fix: imports * fix: import DatetimeWidget * fix: imports
RedTurtle · Dec 21, 2023 · 73f0763 · 73f0763
1 parent f7f4175
commit 73f0763
Show file tree

Hide file tree

Showing 2 changed files with 1,158 additions and 0 deletions.
diff --git a/src/customizations/volto/components/manage/Widgets/RecurrenceWidget/EndField.jsx b/src/customizations/volto/components/manage/Widgets/RecurrenceWidget/EndField.jsx
@@ -0,0 +1,133 @@
+/**
+ * EndField component.
+ * @module components/manage/Widgets/RecurrenceWidget/EndField
+ *
+ *
+ * CUSTOMIZATIONS:
+ * - added customization to have this changes https://github.com/plone/volto/pull/5555/files
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, injectIntl } from 'react-intl';
+import { Form, Grid, Input, Radio } from 'semantic-ui-react';
+import DatetimeWidget from '@plone/volto/components/manage/Widgets/DatetimeWidget';
+
+const messages = defineMessages({
+  recurrenceEnds: { id: 'Recurrence ends', defaultMessage: 'Ends' },
+  recurrenceEndsCount: { id: 'Recurrence ends after', defaultMessage: 'after' },
+  recurrenceEndsUntil: { id: 'Recurrence ends on', defaultMessage: 'on' },
+  occurrences: { id: 'Occurences', defaultMessage: 'occurrence(s)' },
+});
+/**
+ * EndField component class.
+ * @function EndField
+ * @returns {string} Markup of the component.
+ */
+const EndField = ({ value, count, until, onChange, intl }) => {
+  return (
+    <Form.Field inline className="text">
+      <Grid>
+        <Grid.Row stretched>
+          <Grid.Column width="4">
+            <div className="wrapper">
+              <label htmlFor="recurrenceEnds">
+                {intl.formatMessage(messages.recurrenceEnds)}
+              </label>
+            </div>
+          </Grid.Column>
+          <Grid.Column width="8">
+            <Form.Group inline>
+              <Form.Field>
+                <Radio
+                  label=""
+                  name="recurrenceEnds"
+                  id="recurrenceEndsCount"
+                  value="count"
+                  checked={value === 'count'}
+                  onChange={(e, { value }) => onChange('recurrenceEnds', value)}
+                />
+              </Form.Field>
+              <Form.Field disabled={value !== 'count'}>
+                {intl.formatMessage(messages.recurrenceEndsCount)}
+              </Form.Field>
+              <Form.Field disabled={value !== 'count'}>
+                <Input
+                  id="count"
+                  name="count"
+                  value={count || ''}
+                  onChange={({ target }) => {
+                    onChange(
+                      target.id,
+                      target.value === '' ? undefined : target.value,
+                    );
+                  }}
+                />
+              </Form.Field>
+              <Form.Field disabled={value !== 'count'}>
+                {intl.formatMessage(messages.occurrences)}
+              </Form.Field>
+            </Form.Group>
+            <Form.Group inline>
+              <Form.Field>
+                <Radio
+                  id="recurrenceEndsUntil"
+                  label=""
+                  name="recurrenceEnds"
+                  value="until"
+                  checked={value === 'until'}
+                  onChange={(e, { value }) => onChange('recurrenceEnds', value)}
+                />
+              </Form.Field>
+
+              <Form.Field disabled={value !== 'until'}>
+                <DatetimeWidget
+                  id="until"
+                  title={intl.formatMessage(messages.recurrenceEndsUntil)}
+                  dateOnly={true}
+                  value={
+                    until
+                      ? typeof until === 'string'
+                        ? until
+                        : until?.toISOString()
+                      : ''
+                  }
+                  resettable={false}
+                  onChange={(id, value) => {
+                    onChange(id, value === '' ? undefined : value);
+                  }}
+                />
+              </Form.Field>
+            </Form.Group>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </Form.Field>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+EndField.propTypes = {
+  value: PropTypes.string,
+  count: PropTypes.any,
+  until: PropTypes.any,
+  onChange: PropTypes.func,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+EndField.defaultProps = {
+  value: null,
+  count: null,
+  until: null,
+  onChange: null,
+};
+
+export default injectIntl(EndField);