fix: minor improvements

PrabhuKathiresan · Feb 24, 2022 · 0caf609 · 0caf609
1 parent e68c359
commit 0caf609
Show file tree

Hide file tree

Showing 27 changed files with 618 additions and 326 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -90,7 +90,7 @@
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
     "react-transition-group": "^4.4.1",
-    "yup": "^0.30.0"
+    "yup": "^0.32.11"
   },
   "publishConfig": {
     "access": "public"

diff --git a/src/ButtonGroup/index.tsx b/src/ButtonGroup/index.tsx
@@ -3,9 +3,10 @@ import cx from 'classnames'
 import Button from '../Button'
 import Dropdown from '../Dropdown'
 import { ButtonGroupProps, ButtonGroupActionProps } from './props'
+import { noop } from '../utils'
 
 export default function ButtonGroup(props: ButtonGroupProps) {
-  const {
+  let {
     align = 'center',
     justify = 'left',
     gap = '',
@@ -17,7 +18,7 @@ export default function ButtonGroup(props: ButtonGroupProps) {
     containerClass = ''
   } = props
 
-  const computedGroupClass = {}
+  let computedGroupClass = {}
   if (gap) {
     computedGroupClass[`ui-kit-btn-group__has-gap gap__${gap}`] = true
   }
@@ -26,35 +27,42 @@ export default function ButtonGroup(props: ButtonGroupProps) {
     computedGroupClass[`ui-kit-btn-group__space-${verticalSpacing}`] = true
   }
 
-  const renderItem = (action: ButtonGroupActionProps) => {
-    if (action.type === 'dropdown') {
+  let renderItem = (action: ButtonGroupActionProps) => {
+    let {
+      type,
+      onClick = noop,
+      label,
+      extraProps = {},
+      component
+    } = action;
+    if (type === 'dropdown') {
       return (
         <Dropdown
-          textContent={action.label}
-          onClick={(item: any) => action.onClick(item)}
+          textContent={label}
+          onClick={(item: any) => onClick(item)}
           options={action.options || []}
           position={action.dropdownPosition || 'right'}
           theme={theme}
           variant={variant}
           triggerSize={size}
-          {...action.extraProps}
+          {...extraProps}
         />
       )
     }
     if (action.type === 'custom') {
-      return action.component
+      return component
     }
 
     return (
       <Button
-        onClick={(e: any) => action.onClick(e)}
+        onClick={(e: any) => onClick(e)}
         theme={theme}
         variant={variant}
         size={size}
-        component={action.component || 'button'}
-        {...action.extraProps}
+        component={component || 'button'}
+        {...extraProps}
       >
-        {action.label}
+        {label}
       </Button>
     )
   }

diff --git a/src/ButtonGroup/props.ts b/src/ButtonGroup/props.ts
@@ -9,7 +9,7 @@ export declare type ButtonGroupActionType = 'button' | 'dropdown' | 'custom'
 
 export interface ButtonGroupActionProps {
   label: any
-  onClick: Function
+  onClick?: Function
   type?: ButtonGroupActionType
   extraProps?: {
     [k: string]: any

diff --git a/src/DatePicker/DatePickerElement.tsx b/src/DatePicker/DatePickerElement.tsx
@@ -19,7 +19,8 @@ function DatePickerElement(props: DatePickerElementProps, ref: any) {
     endDate,
     monthMenuRef,
     yearMenuRef,
-    onChange
+    onChange,
+    id
   } = props
   let [menuState, setMenuState] = useState({ month: false, year: false })
 
@@ -42,6 +43,7 @@ function DatePickerElement(props: DatePickerElementProps, ref: any) {
       >
         <div className='ui-kit-select--popup ui-kit-datepicker_element--popup'>
           <DatePickerHeader
+            id={id}
             selectedMonth={month}
             selectedYear={year}
             startDate={startDate}

diff --git a/src/DatePicker/DatePickerHeader.tsx b/src/DatePicker/DatePickerHeader.tsx
@@ -15,7 +15,8 @@ export default function DatePickerHeader(props: DatePickerHeaderProps) {
     yearMenuRef,
     onChange,
     onMenuClose,
-    onMenuOpen
+    onMenuOpen,
+    id
   } = props
 
   let startYear = startDate.getFullYear()
@@ -50,6 +51,8 @@ export default function DatePickerHeader(props: DatePickerHeaderProps) {
         className='element-flex-justify-around mb-0'
         inputSize='small'
         tabIndex={-1}
+        id={id}
+        inputClass='sub-select-input'
       />
       <Button tabIndex={-1} size='tiny' variant='plain' className='px-4' disabled={disableNext} onClick={() => onChange({ changeType: 'month', offset: 1 })}><Next /></Button>
     </div>

diff --git a/src/DatePicker/index.tsx b/src/DatePicker/index.tsx
@@ -48,8 +48,8 @@ export default class Datepicker extends Component<DatePickerProps, DatePickerSta
     let date = new Date()
     let startDate = new Date((date.getFullYear() - 10), 0, 1)
     let endDate = new Date((date.getFullYear() + 10), 11, 31)
-    if (props.min) startDate = props.min
-    if (props.max) endDate = props.max
+    if (props.min instanceof Date) startDate = props.min
+    if (props.max instanceof Date) endDate = props.max
     let year = endDate.getFullYear()
     let month = endDate.getMonth()
     let value = props.value instanceof Date ? dayjs(props.value).startOf('d').toDate().getTime() : ''
@@ -92,6 +92,10 @@ export default class Datepicker extends Component<DatePickerProps, DatePickerSta
     window.removeEventListener('click', this.addBackDrop, false)
   }
 
+  get dateFormat() {
+    return this.props.format || 'yyyy-mm-dd';
+  }
+
   addListener = () => {
     window.addEventListener('click', this.addBackDrop, false)
     window.addEventListener('resize', this.handleResize, false)
@@ -313,10 +317,8 @@ export default class Datepicker extends Component<DatePickerProps, DatePickerSta
 
   getDateStringFromTimestamp = (timestamp: any) => {
     if (!timestamp) return '';
-    let dateObject = new Date(timestamp)
-    let month = dateObject.getMonth() + 1
-    let date = dateObject.getDate()
-    return dateObject.getFullYear() + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date)
+    let date = new Date(timestamp)
+    return dayjs(date).format(this.dateFormat);
   }
 
   setDateToInput = (timestamp: any) => {
@@ -450,6 +452,7 @@ export default class Datepicker extends Component<DatePickerProps, DatePickerSta
       year = endDate.getFullYear(),
     } = this.state
     let {
+      id,
       animate = true,
       transitionDuration = animate ? TRANSITION_DURATION : 0,
     } = this.props
@@ -470,6 +473,7 @@ export default class Datepicker extends Component<DatePickerProps, DatePickerSta
           {
             (transitionState: TransitionState) => (
               <DatePickerElement
+                id={id}
                 transitionState={transitionState}
                 transitionDuration={transitionDuration}
                 position={pickerPosition}
@@ -498,6 +502,7 @@ export default class Datepicker extends Component<DatePickerProps, DatePickerSta
       container,
       label = null,
       className = '',
+      inputContainerClass = '',
       message,
       error,
       labelClass,
@@ -535,6 +540,7 @@ export default class Datepicker extends Component<DatePickerProps, DatePickerSta
           hint={hint}
           hintPosition={hintPosition}
           onRightIconClick={this.triggerOpen}
+          containerClass={inputContainerClass}
           className={cx({ 'cursor-pointer': !disabled, 'cursor-not-allowed': disabled })}
         />
         {

diff --git a/src/DatePicker/props.ts b/src/DatePicker/props.ts
@@ -10,7 +10,7 @@ export interface DatePickerProps extends InputProps {
   max?: Date
   closeOnSelect?: boolean
   format?: string
-  className?: string
+  inputContainerClass?: string
   transitionDuration?: number
   value?: Date
   defaultValue?: Date
@@ -34,6 +34,7 @@ export interface DatePickerState {
 }
 
 export interface DatePickerElementProps {
+  id?: string
   transitionState: TransitionState
   transitionDuration?: number
   position?: any
@@ -48,6 +49,7 @@ export interface DatePickerElementProps {
 }
 
 export interface DatePickerHeaderProps {
+  id?: string
   selectedMonth: number
   selectedYear: number
   startDate: Date

diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
@@ -113,7 +113,7 @@ export default function Dialog(props: DialogProps) {
             tabIndex={0}
             onClick={() => onClose()}
             data-testid={`close-${id}`}
-            className='ui-kit-dialog-close cursor-pointer element-flex-center has-hover-effect radius-circle'
+            className='ui-kit-dialog-close cursor-pointer element-flex-center has-hover-effect border-radius'
           >
             <Close width={20} height={20} />
           </span>