✨ [feature] Add a function: Customize the header(lanjingling0510#16)

Author: lanjingling0510

.eslintignore

@@ -1,3 +1,8 @@
 dist/*
 node_modules/*
 test/*
+stories/*
+postcss.config.js
+rollup.config.js
+examples/*
+coverage/*

.eslintrc

@@ -1,28 +1,7 @@
-{
-    "extends": "airbnb",
-    "parser": "babel-eslint",
-    "rules": {
-        "camelcase": 0,
-        "indent": [2, 4, {"SwitchCase": 1}],
-        "no-use-before-define": 0,
-        "no-restricted-syntax": ["error", "WithStatement"],
-        "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
-        "no-param-reassign": 0,
-        "func-names": 0,
-        "new-cap": 0,
-        "no-underscore-dangle": 0,
-        "arrow-body-style": 0,
-        "no-console": 0,
-        "no-nested-ternary": 0,
-      "block-scoped-var": 0,
-      "global-require": 0,
-      "no-confusing-arrow": 0,
-      "react/jsx-indent-props": [2, 4],
-      "react/jsx-boolean-value": 0,
-      "react/jsx-indent": [2, 4],
-      "react/jsx-closing-bracket-location": [2, {"location": "after-props"}]
-    },
-    "env": {
-        "jquery": true
-    }
-}
+{
+  "extends": ["cqaso-kit"],
+  "rules": {
+      "flowtype/define-flow-type": 1,
+      "flowtype/use-flow-type": 1
+  }
+}

README.md

@@ -131,6 +131,8 @@ ReactDOM.render(<App />, document.getElementById('react-box'));
 | value | Date | new Date() | date value |
 | min  | Date | new Date(1970, 0, 1) | minimum date |
 | max | Date | new Date(2050, 0, 1) | maximum date |
+| showHeader | Boolean | true | whether to show the header |
+| customHeader | ReactElement | undefined | customize the header, if you set this property, it will replace `showFormat`|
 | confirmText  | String | 完成 | customize the selection time button text |
 | cancelText | String | 取消 | customize the cancel button text |
 | onSelect | Function | () => {} | the callback function after click button of done, Date object as a parameter |

config.js

@@ -12,6 +12,8 @@ type Props = {
     value: Object,
     min: Object,
     max: Object,
+    customHeader?: React.Element<*>,
+    showHeader: boolean,
     dateFormat: Array<*>,
     showFormat: string,
     confirmText: string,
@@ -82,7 +84,7 @@ class DatePicker extends Component<void, Props, State> {
      * @return {Object} JSX对象
      */
     render() {
-        const { min, max, theme, dateFormat, confirmText, cancelText, showFormat } = this.props;
+        const { min, max, theme, dateFormat, confirmText, cancelText, showFormat, showHeader, customHeader } = this.props;
         const value = this.state.value;
         const themeClassName =
             ['default', 'dark', 'ios', 'android', 'android-dark'].indexOf(theme) === -1 ?
@@ -91,7 +93,8 @@ class DatePicker extends Component<void, Props, State> {
         return (
             <div
                 className={`datepicker ${themeClassName}`}>
-                <div className="datepicker-header">{convertDate(value, showFormat)}</div>
+                {showHeader &&
+                    <div className="datepicker-header">{customHeader || convertDate(value, showFormat)}</div>}
                 <div className="datepicker-content">
                     {dateFormat.map((format, index) => (
                         <DatePickerItem
@@ -101,7 +104,7 @@ class DatePicker extends Component<void, Props, State> {
                             max={max}
                             format={format}
                             onSelect={this.handleDateSelect} />
-                        ))}
+                    ))}
                 </div>
                 <div className="datepicker-navbar">
                     <a

lib/DatePicker.js

@@ -43,7 +43,6 @@
     bottom: 0;
     width: 100%;
     z-index: 1;
-    height: 266px;
     font-size: 16px;
     text-align: center;
     font-family: arial,verdana,sans-serif;
@@ -56,7 +55,6 @@
         min-height: 2em;
         line-height: 2em;
         font-size: 1.125em;
-        display: none;
     }
 
     .datepicker-navbar {
@@ -123,6 +121,10 @@
     /* default */
     &.default {
         background-color: var(--default-bg);
+
+        .datepicker-header {
+            color: var(--default-theme);
+        }
         .datepicker-wheel {
             border-top: 1px solid var(--default-theme);
             border-bottom: 1px solid var(--default-theme);
@@ -144,6 +146,10 @@
     /* dark */
     &.dark {
         background-color: var(--dark-bg);
+
+        .datepicker-header {
+            color: var(--dark-theme);
+        }
         .datepicker-wheel {
             border-top: 1px solid var(--dark-theme);
             border-bottom: 1px solid var(--dark-theme);
@@ -166,6 +172,11 @@
     &.ios {
         background-color: var(--ios-bg);
         .datepicker-col-1 {margin: 0}
+
+        .datepicker-header {
+            color: var(--ios-color);
+            padding: 0 3.5em;
+        }
         .datepicker-viewport {
             &::after {
                 background: linear-gradient(#f7f7f7,rgba(245,245,245,0)52%,rgba(245,245,245,0)48%,#f7f7f7);
@@ -187,6 +198,7 @@
 
         .datepicker-navbar {
             position: absolute;
+            z-index: 2;
             top: 0;
             left: 0;
             width: 100%;
@@ -203,19 +215,20 @@
         .datepicker-content {
             padding-top: 48px;
         }
+
+        .datepicker-header + .datepicker-content {
+          padding-top: 0;
+        }
     }
 
 
     /* android */
-
     &.android, &.android-dark {
-        height: 294px;
         background-color: var(--android-bg);
 
         .datepicker-header {
             color: var(--android-theme);
             border-bottom: 2px solid var(--android-theme);
-            display: block;
         }
         .datepicker-col-1 {margin: 0 .625em}
         .datepicker-viewport {

lib/index.css

@@ -47,6 +47,7 @@ ModalDatePicker.defaultProps = {
     value: new Date(),
     min: new Date(1970, 0, 1),
     max: new Date(2050, 0, 1),
+    showHeader: true,
     dateFormat: ['YYYY', 'M', 'D'],
     showFormat: 'YYYY/MM/DD',
     confirmText: '完成',