bugfix: Remove duplicated apply button in DateInput & handle onChange…

… on date selection directly BUGFIX: Remove duplicated apply button in DateInput & handle onChange on date selection directly
neos · Mar 14, 2024 · fd57e26 · fd57e26
1 parent 5245d97
commit fd57e26
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 61 deletions.
diff --git a/packages/neos-ui-editors/src/Editors/DateTime/index.js b/packages/neos-ui-editors/src/Editors/DateTime/index.js
@@ -62,7 +62,6 @@ class DateTime extends PureComponent {
                 timeOnly={!hasDateFormat(options.format)}
                 placeholder={i18nRegistry.translate($get('placeholder', options) || 'Neos.Neos:Main:content.inspector.editors.dateTimeEditor.noDateSet')}
                 todayLabel={i18nRegistry.translate('content.inspector.editors.dateTimeEditor.today', 'Today', {}, 'Neos.Neos', 'Main')}
-                applyLabel={i18nRegistry.translate('content.inspector.editors.dateTimeEditor.apply', 'Apply', {}, 'Neos.Neos', 'Main')}
                 locale={interfaceLanguage}
                 disabled={options.disabled}
                 timeConstraints={timeConstraints}

diff --git a/packages/react-ui-components/src/DateInput/__snapshots__/dateInput.spec.tsx.snap b/packages/react-ui-components/src/DateInput/__snapshots__/dateInput.spec.tsx.snap
@@ -88,22 +88,6 @@ exports[`<DateInput/> should render correctly. 1`] = `
       timeFormat={true}
       utc={false}
     />
-    <ThemedButton
-      _refHandler={[Function]}
-      className="applyBtnClassName"
-      composeTheme="deeply"
-      disabled={false}
-      hoverStyle="brand"
-      isActive={false}
-      isFocused={false}
-      mapThemrProps={[Function]}
-      onClick={[Function]}
-      size="regular"
-      style="brand"
-      type="button"
-    >
-      applyLabel
-    </ThemedButton>
   </UnmountClosed>
 </div>
 `;
@@ -196,22 +180,6 @@ exports[`<DateInput/> should set "utc" on DatePickerComponent if "dateOnly" prop
       timeFormat={false}
       utc={true}
     />
-    <ThemedButton
-      _refHandler={[Function]}
-      className="applyBtnClassName"
-      composeTheme="deeply"
-      disabled={false}
-      hoverStyle="brand"
-      isActive={false}
-      isFocused={false}
-      mapThemrProps={[Function]}
-      onClick={[Function]}
-      size="regular"
-      style="brand"
-      type="button"
-    >
-      applyLabel
-    </ThemedButton>
   </UnmountClosed>
 </div>
 `;
diff --git a/packages/react-ui-components/src/DateInput/dateInput.spec.tsx b/packages/react-ui-components/src/DateInput/dateInput.spec.tsx
@@ -4,14 +4,12 @@ import toJson from 'enzyme-to-json';
 import moment from 'moment';
 import DatePicker from 'react-datetime';
 
-import Button from '../Button';
 import {DateInput} from './dateInput';
 
 describe('<DateInput/>', () => {
     const props: DateInput['props'] = {
         onChange: jest.fn(),
         locale: 'en-US',
-        applyLabel: 'applyLabel',
         todayLabel: 'todayLabel',
         theme: {
             'wrapper': 'wrapperClassName',
@@ -62,15 +60,13 @@ describe('<DateInput/>', () => {
         expect(onChange.mock.calls[0][0]).toBe(null);
     });
 
-    it('should call the "onChange" prop when triggering the change event on the "DatePicker" Component and clicking apply.', () => {
+    it('should call the "onChange" prop when triggering the change event on the "DatePicker".', () => {
         const onChange = jest.fn();
         const wrapper = shallow(<DateInput {...props} value={new Date()} onChange={onChange}/>);
         const picker = wrapper.find(DatePicker);
-        const applyButton = wrapper.find(Button);
         const newVal = moment();
 
         picker.simulate('change', newVal);
-        applyButton.simulate('click');
 
         expect(onChange.mock.calls.length).toBe(1);
         expect(onChange.mock.calls[0][0].toTimeString()).toBe(newVal.toDate().toTimeString());

diff --git a/packages/react-ui-components/src/DateInput/dateInput.tsx b/packages/react-ui-components/src/DateInput/dateInput.tsx
@@ -7,7 +7,6 @@ import Collapse from 'react-collapse';
 import DatePicker, {TimeConstraints} from 'react-datetime';
 
 import {PickDefaultProps} from '../utils-typescript';
-import Button from '../Button';
 import Icon from '../Icon';
 
 // WHY: Because momentJs locales are not bundled automatically, we have to explicitly add them.
@@ -39,11 +38,6 @@ export interface DateInputProps {
      */
     readonly todayLabel: string;
 
-    /**
-     * The label which will be displayed within the `Apply` btn.
-     */
-    readonly applyLabel: string;
-
     /**
      * The moment format string to use to format the passed value.
      */
@@ -137,7 +131,6 @@ export class DateInput extends PureComponent<DateInputProps, DateInputState> {
             className,
             id,
             todayLabel,
-            applyLabel,
             labelFormat,
             dateOnly,
             timeOnly,
@@ -223,15 +216,9 @@ export class DateInput extends PureComponent<DateInputProps, DateInputState> {
                         locale={locale}
                         timeFormat={!dateOnly}
                         onChange={this.handleChange}
+
                         timeConstraints={this.props.timeConstraints}
                     />
-                    <Button
-                        onClick={this.handleApply}
-                        className={theme!.applyBtn}
-                        style="brand"
-                    >
-                        {applyLabel}
-                    </Button>
                 </Collapse>
             </div>
         );
@@ -257,19 +244,13 @@ export class DateInput extends PureComponent<DateInputProps, DateInputState> {
         }
     }
 
-    private readonly handleApply = () => {
-        this.setState({
-            isOpen: false
-        }, () => {
-            this.props.onChange(this.state.transientDate);
-        });
-    }
-
     private readonly handleChange = (value: Moment | string) => {
         const momentVal: Moment = isMoment(value) ? value : moment(value);
+        const selectedDate = momentVal.toDate()
         this.setState({
-            transientDate: momentVal.toDate()
+            transientDate: selectedDate
         });
+        this.props.onChange(selectedDate);
     }
 
     private readonly handleSelectTodayBtnClick = () => {