feat (TimePicker): Added opportunity to clear value (#1246)

Co-authored-by: Viktor Beshentsev <[email protected]>

.changeset/timepicker-add-clearable-option.md

@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+feat(TimePicker): Added opportunity to clear Timepicker

packages/react-magma-dom/src/components/TimePicker/TimePicker.stories.tsx

@@ -3,6 +3,7 @@ import { TimePicker, TimePickerProps } from '.';
 import { Card, CardBody } from '../Card';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { LabelPosition } from '../Label';
+import { Button } from '../Button';
 
 const Template: Story<TimePickerProps> = args => (
   <TimePicker {...args} labelText="Time Due" />
@@ -57,3 +58,19 @@ Inverse.decorators = [
     </Card>
   ),
 ];
+
+export const Clearable = () => {
+  const [timeValue, setTimeValue] = React.useState<string | undefined>('');
+
+  function handleOnChange(value) {
+    setTimeValue(value);
+  }
+
+  return (
+    <>
+      <TimePicker labelText="Time Due" onChange={handleOnChange} value={timeValue} />
+      <br />
+      <Button onClick={() => handleOnChange(undefined)}>Clear Time</Button>
+    </>
+  );
+};

packages/react-magma-dom/src/components/TimePicker/TimePicker.test.js

@@ -372,6 +372,17 @@ describe('TimePicker', () => {
       expect(getByTestId('amPmTimeButton')).toHaveTextContent('AM');
     });
 
+    it('should allow for the undefined value', () => {
+      const value = undefined;
+      const { getByTestId } = render(
+        <TimePicker label="label" value={value} />
+      );
+
+      expect(getByTestId('hoursTimeInput').value).toEqual('');
+      expect(getByTestId('minutesTimeInput').value).toEqual('');
+      expect(getByTestId('amPmTimeButton')).toHaveTextContent('AM');
+    });
+
     it('should call the onChange when the passed in value is valid', () => {
       const onChange = jest.fn();
       const value = '12:30 PM';

packages/react-magma-dom/src/components/TimePicker/useTimePicker.ts

@@ -21,9 +21,9 @@ export interface UseTimePickerProps
    */
   minutesStep?: number;
   /**
-   * Full time value passed in and converted to use in hour, minute, and AM/PM fields
+   * Full time value passed in and converted to use in hour, minute, and AM/PM fields. To clear the TimePicker - send the undefined value.
    */
-  value?: string;
+  value?: string | undefined;
   /**
    * Function called when the component is changed to a new time
    */
@@ -48,7 +48,12 @@ export function useTimePicker(props: UseTimePickerProps) {
   const id = useGenerateId(props.id);
 
   React.useEffect(() => {
-    if (validTime(props.value)) {
+    if(typeof props.value === 'undefined') {
+      setHour('');
+      setMinute('');
+      setAmPm(am);
+      updateTime('');
+    } else if (validTime(props.value)) {
       convertPassedInTime(props.value);
     }
   }, [props.value]);

website/react-magma-docs/src/pages/api/time-picker.mdx

@@ -125,6 +125,31 @@ export function Example() {
 }
 ```
 
+## Clear value
+
+The `value` and `onChange` props can be used for clear value.
+
+```tsx
+import React from 'react';
+import { Button, TimePicker } from 'react-magma-dom';
+
+export function Example() {
+  const [timeValue, setTimeValue] = React.useState<string | undefined>('');
+
+  function handleOnChange(value) {
+    setTimeValue(value);
+  }
+
+  return (
+    <>
+      <TimePicker labelText="Time Due" onChange={handleOnChange} value={timeValue} />
+      <br />
+      <Button onClick={() => handleOnChange(undefined)}>Clear Time</Button>
+    </>
+  );
+}
+```
+
 ## Custom Styles
 
 The `containerStyle`, `inputStyle`, `labelStyle` and `messageStyle` props can be used for custom styling.