UX-45 TimePicker

.storybook/main.js

@@ -79,7 +79,7 @@ module.exports = {
         path.resolve(__dirname, '../src/'),
       ],
     })
-  config.resolve.alias['@marklogic/design-system/es'] = path.resolve(__dirname, '../src')
+    config.resolve.alias['@marklogic/design-system/es'] = path.resolve(__dirname, '../src')
     config.resolve.alias['@marklogic/design-system/src'] = path.resolve(__dirname, '../src')
     config.resolve.alias['@marklogic/design-system'] = path.resolve(__dirname, '../src')
     config.resolve.alias.antd = path.resolve(__dirname, '../node_modules/antd')

__mocks__/moment.js

@@ -0,0 +1,5 @@
+const moment = jest.requireActual('moment')
+
+Date.now = () => new Date('2019-04-07T10:20:30Z').getTime()
+
+module.exports = moment

gulpfile.js/index.js

@@ -32,6 +32,7 @@ function compile(modules) {
           ['import', {
             libraryName: 'lodash-es',
             libraryDirectory: '',
+            camel2DashComponentName: false,
           }, 'lodash-es'],
           ['import', {
             libraryName: '@marklogic/design-system',
@@ -133,4 +134,9 @@ gulp.task('compile-watch', () => {
   ], gulp.series(['compile-less']))
 })
 
+gulp.task('compile-and-watch', gulp.series([
+  'compile-all',
+  'compile-watch',
+]))
+
 gulp.task('fix-and-compile', gulp.series(['fix-uniformity', 'compile-all']))

package.json

@@ -21,7 +21,7 @@
   "scripts": {
     "build": "gulp compile-all",
     "watch": "gulp compile-watch",
-    "test": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test": "cross-env CI=1 react-scripts test --colors --env=jsdom",
     "test:watch": "react-scripts test --env=jsdom",
     "predeploy": "cd playground && yarn && yarn run build",
     "prepublishOnly": "yarn run build",

playground/src/App.js

@@ -47,6 +47,7 @@ import {
   MLTabs,
   MLTag,
   MLTimeline,
+  MLTimePicker,
   MLTooltip,
   MLTreeSelect,
   MLUpload,
@@ -67,6 +68,7 @@ import {
 
 const configValues = {
   dateFormat: 'YYYY-MMM-DD', // Default for all dates, and DatePicker
+  timeFormat: 'hh:mm a',
   dateTimeFormat: 'YYYY-MMM-DD, HH:mm:ss', // default for all dates with times, and DatePicker with times
   monthFormat: 'YYYY-MM', // default for Month picker
   weekFormat: 'YYYY-wo', // default for Week picker
@@ -168,6 +170,10 @@ export default class App extends Component {
               <MLDatePicker size='small' />
               <MLDatePicker size='default' />
               <MLDatePicker size='large' />
+              <MLTimePicker /> {/* Use configProvider format */}
+              <MLTimePicker
+                format='HH:mm'
+              />
               <MLPagination
                 defaultCurrent={3}
                 defaultPageSize={10}

src/MLConfigProvider/MLConfigProvider.js

@@ -6,13 +6,7 @@ import classNames from 'classnames'
 const MLConfigProvider = React.forwardRef((props, ref) => {
   return (
     <MLConfigContext.Provider
-      value={{
-        dateFormat: props.dateFormat,
-        dateTimeFormat: props.dateTimeFormat,
-        monthFormat: props.monthFormat,
-        weekFormat: props.weekFormat,
-        yearFormat: props.yearFormat,
-      }}
+      value={props}
     >
       {/* Include Ant's normal config values as well, for Ant components to use */}
       <ConfigProvider
@@ -28,18 +22,18 @@ const MLConfigProvider = React.forwardRef((props, ref) => {
 
 MLConfigProvider.defaultProps = {
   dateFormat: 'YYYY-MMM-DD',
+  timeFormat: 'HH:mm:ss',
   dateTimeFormat: 'YYYY-MMM-DD, HH:mm:ss',
   monthFormat: 'YYYY-MM',
   weekFormat: 'YYYY-wo',
-  yearFormat: 'YYYY',
 }
 
 MLConfigProvider.propTypes = {
   dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  timeFormat: PropTypes.string,
   dateTimeFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   monthFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   weekFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-  yearFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
 }
 
 export const MLConfigContext = React.createContext(MLConfigProvider.defaultProps)

src/MLDatePicker/MLDatePicker.js

@@ -1,31 +1,50 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { DatePicker } from 'antd'
 import { MLConfigContext } from '../MLConfigProvider'
 import MLSizeContext from '../MLConfigProvider/MLSizeContext'
 import { pickerPropsFromContext } from './utils'
 import classNames from 'classnames'
+import uniqueId from 'lodash-es/uniqueId'
+
+const MLDatePicker = React.forwardRef(({ hourLabel, minuteLabel, secondLabel, ...props }, ref) => {
+  // Generate an unchanging unique ID to tie this to its specific style elements
+  const [componentId] = useState(uniqueId('ml-date-picker-'))
 
-const MLDatePicker = React.forwardRef((props, ref) => {
   return (
     <MLConfigContext.Consumer>
       {(pickerContext) => (
         <MLSizeContext.Consumer>
           {(contextSize) => {
             const contextProps = pickerPropsFromContext('date', pickerContext, props)
+
+            const unitPositions = [hourLabel, minuteLabel, secondLabel]
+            // Create the style tags to show the hr/min/sec labels in the relevant columns for just this component
+            const unitStyleTags = unitPositions.map((unitLabel, index) => (
+              <style key={unitLabel}>
+                {`.ml-date-picker-container.${componentId} .ant-calendar-time-picker-select:nth-child(${index + 1}) ul::before {
+                  content: '${unitLabel}'
+                }`}
+              </style>
+            ))
+
             const size = contextSize || props.size
             return (
-              <DatePicker
-                {...contextProps}
-                ref={ref}
-                {...props}
-                // The following have to go after props to override it properly
-                showTime={contextProps.showTime}
-                size={size}
-                className={classNames('ml-date-picker', props.className)}
-              >
-                {props.children}
-              </DatePicker>
+              <>
+                <DatePicker
+                  {...contextProps}
+                  {...props}
+                  ref={ref}
+                  // The following have to go after props to override it properly
+                  showTime={contextProps.showTime}
+                  size={size}
+                  className={classNames('ml-date-picker', componentId, props.className)}
+                  dropdownClassName={classNames('ml-date-picker-container', componentId, props.dropdownClassName)}
+                >
+                  {props.children}
+                </DatePicker>
+                {contextProps.showTime ? unitStyleTags : null}
+              </>
             )
           }}
         </MLSizeContext.Consumer>
@@ -37,9 +56,17 @@ const MLDatePicker = React.forwardRef((props, ref) => {
 MLDatePicker.defaultProps = {
   bordered: true,
   size: 'small',
+  hourLabel: 'Hr',
+  minuteLabel: 'Min',
+  secondLabel: 'Sec',
 }
 
 MLDatePicker.propTypes = {
+  hourLabel: PropTypes.string,
+  minuteLabel: PropTypes.string,
+  secondLabel: PropTypes.string,
+  className: PropTypes.string,
+  dropdownClassName: PropTypes.string,
   bordered: PropTypes.bool,
   size: PropTypes.string,
 }

src/MLDatePicker/MLMonthPicker.js

@@ -18,6 +18,7 @@ const MLMonthPicker = React.forwardRef((props, ref) => {
             {...props}
             showTime={contextProps.showTime}
             className={classNames('ml-date-picker-month-picker', props.className)}
+            dropdownClassName={classNames('ml-date-picker-month-picker-container', props.dropdownClassName)}
           >
             {props.children}
           </MonthPicker>

src/MLDatePicker/MLRangePicker.js

@@ -1,28 +1,55 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { DatePicker } from 'antd'
 import { MLConfigContext } from '../MLConfigProvider'
+import MLSizeContext from '../MLConfigProvider/MLSizeContext'
 import { pickerPropsFromContext } from './utils'
 import classNames from 'classnames'
+import uniqueId from 'lodash-es/uniqueId'
 const { RangePicker } = DatePicker
 
-const MLRangePicker = React.forwardRef((props, ref) => {
+const MLRangePicker = React.forwardRef(({ hourLabel, minuteLabel, secondLabel, ...props }, ref) => {
+  // Generate an unchanging unique ID to tie this to its specific style elements
+  const [componentId] = useState(uniqueId('ml-date-picker-range-picker-'))
+
   return (
     <MLConfigContext.Consumer>
-      {(context) => {
-        const contextProps = pickerPropsFromContext('range', context, props)
-        return (
-          <RangePicker
-            {...contextProps}
-            ref={ref}
-            {...props}
-            showTime={contextProps.showTime}
-            className={classNames('ml-date-picker-range-picker', props.className)}
-          >
-            {props.children}
-          </RangePicker>
-        )
-      }}
+      {(pickerContext) => (
+        <MLSizeContext.Consumer>
+          {(contextSize) => {
+            const contextProps = pickerPropsFromContext('range', pickerContext, props)
+
+            const unitPositions = [hourLabel, minuteLabel, secondLabel]
+            // Create the style tags to show the hr/min/sec labels in the relevant columns for just this component
+            const unitStyleTags = unitPositions.map((unitLabel, index) => (
+              <style key={unitLabel}>
+                {`.ml-date-picker-range-picker-container.${componentId} .ant-calendar-time-picker-select:nth-child(${index + 1}) ul::before {
+                  content: '${unitLabel}'
+                }`}
+              </style>
+            ))
+
+            const size = contextSize || props.size
+            return (
+              <>
+                <RangePicker
+                  {...contextProps}
+                  {...props}
+                  ref={ref}
+                  // The following have to go after props to override it properly
+                  showTime={contextProps.showTime}
+                  size={size}
+                  className={classNames('ml-date-picker-range-picker', componentId, props.className)}
+                  dropdownClassName={classNames('ml-date-picker-range-picker-container', componentId, props.dropdownClassName)}
+                >
+                  {props.children}
+                </RangePicker>
+                {contextProps.showTime ? unitStyleTags : null}
+              </>
+            )
+          }}
+        </MLSizeContext.Consumer>
+      )}
     </MLConfigContext.Consumer>
   )
 })
@@ -34,6 +61,9 @@ MLRangePicker.defaultProps = {
     <span className='ant-picker-separator'>–</span> // en-dash
   ),
   size: 'small',
+  hourLabel: 'Hr',
+  minuteLabel: 'Min',
+  secondLabel: 'Sec',
 }
 
 MLRangePicker.propTypes = {

src/MLDatePicker/MLWeekPicker.js

@@ -18,6 +18,7 @@ const MLWeekPicker = React.forwardRef((props, ref) => {
             {...props}
             showTime={contextProps.showTime}
             className={classNames('ml-date-picker-week-picker', props.className)}
+            dropdownClassName={classNames('ml-date-picker-week-picker-container', props.dropdownClassName)}
           >
             {props.children}
           </WeekPicker>

src/MLDatePicker/style/index.less

@@ -1,5 +1,42 @@
-@import '../../styles.less';
+.ml-date-picker-container, .ml-date-picker-range-picker-container {
+  .ant-calendar-time .ant-calendar-time-picker-select {
+    ul {
+      // Fix scroll height
+      max-height: unset;
 
-.ant-calendar-time-picker-select li:last-child::after {
-  height: 0; // So there isn't extra scroll space at the bottom
+      // Counter the translateY on the <li>s
+      margin-top: -24px;
+
+      // Remove the extra blank space below the numbers
+      padding-bottom: 0;
+
+      li {
+        // Adjust the position numbers scroll to after clicking on them
+        transform: translateY(24px)
+      }
+
+      &::before {
+        // Make it stick to the top of the column
+        position: sticky;
+        top: 0;
+        background-color: #f5f5f5;
+        font-weight: bold;
+
+        text-align: center; // Center in DatePicker/RangePicker (has wide columns)
+
+        display: list-item; // Make it a fake <li> so it sizes right
+
+        // Keep it sized properly, same as the other <li>s
+        line-height: 24px;
+        user-select: none;
+
+        // Bring it in front of the <li>s
+        z-index: 1;
+      }
+
+      li:last-child::after {
+        height: 0;
+      }
+    }
+  }
 }

src/MLDatePicker/utils.js

@@ -1,6 +1,6 @@
-import { get } from 'lodash-es'
+import { get, isArray } from 'lodash-es'
 
-export const pickerPropsFromContext = (picker, { dateFormat, dateTimeFormat, weekFormat, monthFormat, yearFormat }, props) => {
+export const pickerPropsFromContext = (picker, { dateFormat, dateTimeFormat, weekFormat, monthFormat }, props) => {
   let format
   let { showTime } = props
   if (props.showTime && !['date', 'range'].includes(picker)) {
@@ -14,9 +14,9 @@ export const pickerPropsFromContext = (picker, { dateFormat, dateTimeFormat, wee
       date: dateFormat,
       week: weekFormat,
       month: monthFormat,
-      year: yearFormat,
       // Nothing special for quarter or year pickers
     }, picker, dateFormat)
   }
-  return { format, showTime }
+  const primaryFormat = isArray(format) ? format[0] : format
+  return { primaryFormat, format, showTime }
 }