feat: allow selection through datepicker only (#134)

* Add support for date picker only mode

Signed-off-by: Jinjia Lin <lin_jinjia@edb.gov.sg>

* Add datePickerOnly to ownProps in readme. Update tests according to pr comments

Signed-off-by: James Cheng <zcheng@pivotal.io>

Author: pivotal-james-zcheng

README.md

@@ -78,6 +78,7 @@ More examples [here](https://react-semantic-ui-datepickers.now.sh).
 | onChange             | function | no       | () => {}     | Callback fired when the value changes                                                                           |
 | pointing             | string   | no       | 'left'       | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right'      |
 | type                 | string   | no       | basic        | Type of input to render. Available options: 'basic' and 'range'                                                 |
+| datePickerOnly       | boolean  | no       | false        | Allows the date to be selected only via the date picker, and disables the text input                            |
 
 ### Form.Input Props
 

src/__tests__/datepicker.test.tsx

@@ -20,6 +20,8 @@ const setup = (props?: Partial<SemanticDatepickerProps>) => {
       options.rerender(
         <DatePicker onChange={jest.fn()} {...props} {...newProps} />
       ),
+    datePickerInput: options.getByTestId('datepicker-input')
+      .firstChild as HTMLInputElement,
   };
 };
 
@@ -28,6 +30,54 @@ describe('Basic datepicker', () => {
     expect(setup()).toBeTruthy();
   });
 
+  describe('not read only or date picker only', () => {
+    it('accepts input', async () => {
+      const { datePickerInput } = setup();
+      fireEvent.input(datePickerInput, { target: { value: '23' } });
+
+      expect(datePickerInput.value).toBe('23');
+    });
+
+    it('opens date picker', async () => {
+      const { getByTestId, openDatePicker } = setup();
+      openDatePicker();
+
+      expect(getByTestId('datepicker-today-button')).toBeDefined();
+    });
+  });
+
+  describe('is read only', () => {
+    it('does not accept input', async () => {
+      const { datePickerInput } = setup({ readOnly: true });
+
+      expect(datePickerInput.readOnly).toBeTruthy();
+    });
+
+    it('does not open date picker', async () => {
+      const { queryByTestId, openDatePicker } = setup({ readOnly: true });
+      openDatePicker();
+
+      expect(queryByTestId('datepicker-today-button')).toBeNull();
+    });
+  });
+
+  describe('is date picker only', () => {
+    it('does not accept input', async () => {
+      const { getByTestId } = setup({ readOnly: true });
+      const datePickerInput = getByTestId('datepicker-input')
+        .firstChild as HTMLInputElement;
+
+      expect(datePickerInput.readOnly).toBeTruthy();
+    });
+
+    it('opens date picker', async () => {
+      const { getByTestId, openDatePicker } = setup();
+      openDatePicker();
+
+      expect(getByTestId('datepicker-today-button')).toBeDefined();
+    });
+  });
+
   it('updates the locale if the prop changes', async () => {
     const { getByTestId, openDatePicker, rerender } = setup();
 

src/components/input.tsx

@@ -14,6 +14,7 @@ const CustomInput = ({
   ...rest
 }: InputProps) => (
   <Form.Input
+    data-testid="datepicker-input"
     {...rest}
     icon={
       <Icon

src/index.tsx

@@ -83,6 +83,7 @@ class SemanticDatepicker extends React.Component<
     placeholder: null,
     pointing: 'left',
     readOnly: false,
+    datePickerOnly: false,
     required: false,
     showOutsideDays: false,
     type: 'basic',
@@ -369,7 +370,13 @@ class SemanticDatepicker extends React.Component<
       selectedDateFormatted,
       typedValue,
     } = this.state;
-    const { clearable, pointing, filterDate, readOnly } = this.props;
+    const {
+      clearable,
+      pointing,
+      filterDate,
+      readOnly,
+      datePickerOnly,
+    } = this.props;
 
     return (
       <div className="field" style={style} ref={this.el}>
@@ -382,6 +389,7 @@ class SemanticDatepicker extends React.Component<
           onClick={readOnly ? null : this.showCalendar}
           onKeyDown={this.handleKeyDown}
           value={typedValue || selectedDateFormatted}
+          readOnly={readOnly || datePickerOnly}
         />
         {isVisible && (
           <this.Component

src/types/index.ts

@@ -69,6 +69,7 @@ export type SemanticDatepickerProps = PickedDayzedProps &
     ) => void;
     pointing: 'left' | 'right' | 'top left' | 'top right';
     type: 'basic' | 'range';
+    datePickerOnly: boolean;
     value: DayzedProps['selected'];
   };
 

stories/basic.stories.tsx

@@ -28,6 +28,12 @@ export const withReadOnly = () => (
   </Content>
 );
 
+export const withDatePickerOnly = () => (
+  <Content>
+    <SemanticDatepicker onChange={action('selected date')} datePickerOnly />
+  </Content>
+);
+
 export const withoutClearOnSameDateClick = () => (
   <Content>
     <SemanticDatepicker