feat(bee-datepicker): 交互修改

tinper-bee · Feb 21, 2019 · 08a8264 · 08a8264
1 parent f8d3a88
commit 08a8264
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 85 deletions.
diff --git a/build/DatePicker.css b/build/DatePicker.css
@@ -169,7 +169,8 @@
     padding-right: 23px; }
 
 .rc-calendar {
-  box-sizing: border-box; }
+  box-sizing: border-box;
+  color: #212121; }
 
 .rc-calendar * {
   box-sizing: border-box; }
@@ -537,7 +538,7 @@
   text-align: center; }
 
 .rc-calendar-date:hover {
-  background: rgb(227,242,253);
+  background: #EBECF0;
   cursor: pointer; }
 
 .rc-calendar-selected-day .rc-calendar-date {
@@ -571,7 +572,7 @@
 
 .rc-calendar-last-month-cell .rc-calendar-date,
 .rc-calendar-next-month-btn-day .rc-calendar-date {
-  color: #C1C7D0; }
+  color: #909090; }
 
 .rc-calendar-footer {
   border-top: 1px solid #ccc;
@@ -628,12 +629,12 @@
 .rc-calendar-today-btn-disabled,
 .rc-calendar-ok-btn-disabled,
 .rc-calendar-time-picker-btn-disabled {
-  color: #C1C7D0; }
+  color: #909090; }
 
 .rc-calendar-today-btn-disabled:hover,
 .rc-calendar-ok-btn-disabled:hover,
 .rc-calendar-time-picker-btn-disabled:hover {
-  color: #C1C7D0; }
+  color: #909090; }
 
 .rc-calendar-today-btn {
   padding-left: 10px; }
@@ -828,7 +829,7 @@
   text-align: center; }
 
 .rc-calendar-month-panel-cell .rc-calendar-month-panel-month:hover {
-  background: rgb(227,242,253);
+  background: #EBECF0;
   cursor: pointer; }
 
 .rc-calendar-month-panel-cell-disabled .rc-calendar-month-panel-month {
@@ -884,7 +885,7 @@
 
 .rc-calendar-year-panel-header > a {
   display: inline-block;
-  padding: 4px 5px;
+  padding: 1px 5px;
   text-align: center;
   width: 30px; }
 
@@ -954,7 +955,7 @@
   text-align: center; }
 
 .rc-calendar-year-panel-year:hover {
-  background: rgb(227,242,253);
+  background: #EBECF0;
   cursor: pointer; }
 
 .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year {
@@ -1005,7 +1006,7 @@
 .rc-calendar-decade-panel-header > a {
   font-weight: bold;
   display: inline-block;
-  padding: 1px 5px;
+  padding: 0px 5px;
   text-align: center;
   width: 30px; }
 
@@ -1068,7 +1069,7 @@
   text-align: center; }
 
 .rc-calendar-decade-panel-decade:hover {
-  background: rgb(227,242,253);
+  background: #EBECF0;
   cursor: pointer; }
 
 .rc-calendar-decade-panel-selected-cell .rc-calendar-decade-panel-decade {
@@ -1278,62 +1279,6 @@
   border-top-color: #3FC7FA;
   color: #3FC7FA; }
 
-.calendar-picker.u-input-group .uf-close-c {
-  color: #424242;
-  opacity: .7; }
-
-.rc-calendar .rc-calendar-year-panel {
-  position: relative; }
-
-.datepicker-input-group.u-input-group {
-  display: block;
-  cursor: pointer; }
-
-.datepicker-input-group .u-input-group-btn .uf-close-c {
-  color: #424242;
-  opacity: .7; }
-
-.rc-calendar-year-panel .rc-calendar-decade-panel {
-  top: 35px; }
-
-.rc-calendar-month-header-wrap {
-  position: relative;
-  height: 274px; }
-
-.week-calendar-footer-button {
-  padding: 3px 5px;
-  color: rgb(30,136,229);
-  position: relative;
-  display: inline-block;
-  font-weight: 500;
-  line-height: 1;
-  letter-spacing: 0;
-  overflow: hidden;
-  will-change: box-shadow, transform;
-  outline: none;
-  cursor: pointer;
-  text-decoration: none;
-  text-align: center;
-  vertical-align: middle;
-  font-size: 12px;
-  line-height: 32px; }
-
-.week-calendar .rc-calendar-tbody > tr:hover
-.rc-calendar-date {
-  background: rgb(227,242,253); }
-
-.week-calendar .rc-calendar-tbody > tr:hover
-.rc-calendar-selected-day .rc-calendar-date {
-  background: rgb(30,136,229); }
-
-.week-calendar .week-calendar-footer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  border-right: 1px solid #ccc; }
-
 .rc-time-picker {
   display: inline-block;
   position: relative;
@@ -1489,3 +1434,73 @@ li.rc-time-picker-panel-select-option-disabled {
 li.rc-time-picker-panel-select-option-disabled:hover {
   background: transparent;
   cursor: not-allowed; }
+
+.calendar-picker.u-input-group .uf-close-c {
+  color: #424242;
+  opacity: .7; }
+
+.rc-calendar > .rc-calendar-year-panel {
+  position: relative;
+  border: 1px solid #ccc;
+  box-shadow: 0 1px 5px #ccc; }
+
+.datepicker-input-group.u-input-group {
+  display: block;
+  cursor: pointer; }
+
+.datepicker-input-group .u-input-group-btn .uf-close-c {
+  color: #424242;
+  opacity: .7; }
+
+.rc-calendar-year-panel .rc-calendar-decade-panel {
+  color: #212121; }
+
+.rc-calendar-month-header-wrap {
+  position: relative;
+  height: 274px; }
+
+.week-calendar-footer-button {
+  padding: 3px 5px;
+  color: rgb(30,136,229);
+  position: relative;
+  display: inline-block;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0;
+  overflow: hidden;
+  will-change: box-shadow, transform;
+  outline: none;
+  cursor: pointer;
+  text-decoration: none;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 12px;
+  line-height: 32px; }
+
+.week-calendar .rc-calendar-tbody > tr:hover
+.rc-calendar-date {
+  background: #EBECF0; }
+
+.week-calendar .rc-calendar-tbody > tr:hover
+.rc-calendar-selected-day .rc-calendar-date {
+  background: rgb(30,136,229); }
+
+.week-calendar .week-calendar-footer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  border-right: 1px solid #ccc; }
+
+.rc-calendar-btn-ok {
+  padding: 0;
+  min-width: 40px;
+  position: relative;
+  top: -2px; }
+
+.datepicker-input-group.u-input-group:hover > input {
+  border-color: rgb(30,136,229); }
+
+.calendar-picker.u-input-group:hover > input {
+  border-color: rgb(30,136,229); }
diff --git a/build/DatePicker.js b/build/DatePicker.js
@@ -337,7 +337,8 @@ DatePicker.defaultProps = {
   defultSelect: false,
   onOpenChange: function onOpenChange() {},
   onChange: function onChange() {},
-  locale: _zh_CN2["default"]
+  locale: _zh_CN2["default"],
+  showMonthInput: false
 };
 
 exports["default"] = DatePicker;

diff --git a/build/rc-calendar/Calendar.js b/build/rc-calendar/Calendar.js
@@ -117,7 +117,8 @@ var Calendar = function (_React$Component) {
         timePicker = props.timePicker,
         disabledTime = props.disabledTime,
         clearIcon = props.clearIcon,
-        renderFooter = props.renderFooter;
+        renderFooter = props.renderFooter,
+        showMonthInput = props.showMonthInput;
     var value = state.value,
         selectedValue = state.selectedValue,
         mode = state.mode;
@@ -184,7 +185,8 @@ var Calendar = function (_React$Component) {
           onPanelChange: this.onPanelChange,
           renderFooter: renderFooter,
           showTimePicker: showTimePicker,
-          prefixCls: prefixCls
+          prefixCls: prefixCls,
+          showMonthInput: showMonthInput
         }),
         timePicker && showTimePicker ? _react2["default"].createElement(
           'div',

diff --git a/build/rc-calendar/MonthCalendar.js b/build/rc-calendar/MonthCalendar.js
@@ -171,6 +171,8 @@ MonthCalendar.propTypes = _extends({}, _CalendarMixin.calendarMixinPropTypes, _C
   defaultSelectedValue: _propTypes2["default"].object,
   disabledDate: _propTypes2["default"].func
 });
-MonthCalendar.defaultProps = _extends({}, _CommonMixin.defaultProp, _CalendarMixin.calendarMixinDefaultProps);
+MonthCalendar.defaultProps = _extends({
+  showDateInput: false
+}, _CommonMixin.defaultProp, _CalendarMixin.calendarMixinDefaultProps);
 exports["default"] = (0, _CalendarMixin.calendarMixinWrapper)((0, _CommonMixin.commonMixinWrapper)(MonthCalendar));
 module.exports = exports['default'];
diff --git a/build/rc-calendar/RangeCalendar.js b/build/rc-calendar/RangeCalendar.js
@@ -252,7 +252,7 @@ var RangeCalendar = function (_React$Component) {
             title: locale.clear,
             onClick: this.clear
           },
-          clearIcon || _react2["default"].createElement('span', { className: prefixCls + '-clear-btn' })
+          clearIcon || _react2["default"].createElement('span', { className: prefixCls + '-clear-btn uf uf-close-c' })
         ) : null,
         _react2["default"].createElement(
           'div',

diff --git a/build/rc-calendar/calendar/CalendarHeader.js b/build/rc-calendar/calendar/CalendarHeader.js
@@ -87,14 +87,16 @@ var CalendarHeader = function (_React$Component) {
         disabledMonth = props.disabledMonth,
         renderFooter = props.renderFooter,
         onChange = props.onChange,
-        onClear = props.onClear;
+        onClear = props.onClear,
+        showMonthInput = props.showMonthInput;
 
 
     var panel = null;
     if (mode === 'month') {
       panel = _react2["default"].createElement(_MonthPanel2["default"], {
         showDateInput: true,
         locale: locale,
+        showMonthInput: showMonthInput,
         defaultValue: value,
         rootPrefixCls: prefixCls,
         onSelect: this.onMonthSelect,

diff --git a/build/rc-calendar/calendar/OkButton.js b/build/rc-calendar/calendar/OkButton.js
@@ -1,14 +1,18 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = OkButton;
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _beeButton = require('bee-button');
+
+var _beeButton2 = _interopRequireDefault(_beeButton);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function OkButton(_ref) {
@@ -17,18 +21,19 @@ function OkButton(_ref) {
       okDisabled = _ref.okDisabled,
       onOk = _ref.onOk;
 
-  var className = prefixCls + "-ok-btn";
-  if (okDisabled) {
-    className += " " + prefixCls + "-ok-btn-disabled";
-  }
+  var className = prefixCls + '-btn-ok';
+  // if (okDisabled) {
+  //   className += ` ${prefixCls}-ok-btn-disabled`;
+  // }
   return _react2["default"].createElement(
-    "a",
+    _beeButton2["default"],
     {
       className: className,
-      role: "button",
+      size: 'sm', colors: 'primary',
+      disabled: okDisabled,
       onClick: okDisabled ? null : onOk
     },
     locale.ok
   );
 }
-module.exports = exports["default"];
+module.exports = exports['default'];
diff --git a/build/rc-calendar/month/MonthPanel.js b/build/rc-calendar/month/MonthPanel.js
@@ -122,6 +122,7 @@ var MonthPanel = function (_React$Component) {
     var locale = props.locale,
         cellRender = props.cellRender,
         contentRender = props.contentRender,
+        showMonthInput = props.showMonthInput,
         renderFooter = props.renderFooter,
         showDateInput = props.showDateInput,
         format = props.format,
@@ -138,7 +139,7 @@ var MonthPanel = function (_React$Component) {
       _react2["default"].createElement(
         'div',
         null,
-        showDateInput ? _react2["default"].createElement(_DateInput2["default"], {
+        showDateInput && showMonthInput ? _react2["default"].createElement(_DateInput2["default"], {
           value: value,
           prefixCls: rootPrefixCls,
           showClear: true,
@@ -220,7 +221,8 @@ MonthPanel.propTypes = {
 MonthPanel.defaultProps = {
   onChange: noop,
   onSelect: noop,
-  format: 'YYYY-MM'
+  format: 'YYYY-MM',
+  showMonthInput: true
 };
 
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "bee-datepicker",
- "version": "2.0.0-beta2",
+ "version": "2.0.0-beta3",
  "description": "DatePicker ui component for react",
  "keywords": [
   "react",
@@ -64,4 +64,4 @@
   "react-addons-test-utils": "15.3.2",
   "react-dom": "~15.3.0"
  }
-}
+}