@seafile/seafile-calendar 1.0.9 → 1.0.10-alpha.0

package/assets/index.css

@@ -83,23 +83,22 @@
   overflow: hidden;
   width: 20px;
   height: 20px;
-  text-align: center;
-  line-height: 20px;
   top: 6px;
   margin: 0;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+      justify-content: center;
+  -ms-flex-align: center;
+      align-items: center;
 }
-.rc-calendar-clear-btn:after {
-  content: 'x';
-  font-size: 12px;
-  color: #aaa;
-  display: inline-block;
-  line-height: 1;
-  width: 20px;
-  transition: color 0.3s ease;
-}
-.rc-calendar-clear-btn:hover:after {
+.rc-calendar-clear-btn svg {
   color: #666;
 }
+.rc-calendar-clear-btn:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+}
 .rc-calendar-picker {
   position: absolute;
   left: -9999px;

package/es/Calendar.js

@@ -131,13 +131,15 @@ var Calendar = function (_React$Component) {
     };
     var dateOnlyFormats = Array.isArray(this.getFormat()) ? this.getFormat().map(stripTime) : [stripTime(this.getFormat())];
 
+    var shouldShowClear = mode !== 'month';
+
     var dateInputElement = props.showDateInput ? React.createElement(DateInput, {
       format: dateOnlyFormats,
       key: 'date-input',
       value: value,
       locale: locale,
       placeholder: headerDatePlaceholder,
-      showClear: false,
+      showClear: shouldShowClear,
       disabledTime: disabledTime,
       disabledDate: disabledDate,
       onClear: this.onClear,

package/es/date/DateInput.js

@@ -8,6 +8,7 @@ import KeyCode from 'rc-util/es/KeyCode';
 import { polyfill } from 'react-lifecycles-compat';
 import dayjs from 'dayjs';
 import { formatDate, initializeStr } from '../util';
+import { CloseIcon } from '../icons';
 
 var customParseFormat = require('dayjs/plugin/customParseFormat');
 
@@ -109,7 +110,11 @@ var DateInput = function (_React$Component) {
           title: locale.clear,
           onClick: this.onClear
         },
-        clearIcon || React.createElement('span', { className: prefixCls + '-clear-btn' })
+        clearIcon || React.createElement(
+          'span',
+          { className: prefixCls + '-clear-btn' },
+          React.createElement(CloseIcon, null)
+        )
       )
     );
   };

package/es/icons.js

@@ -34,4 +34,12 @@ var DoubleArrowRightIcon = function DoubleArrowRightIcon() {
   );
 };
 
-export { ArrowLeftIcon, ArrowRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon };
+var CloseIcon = function CloseIcon() {
+  return React.createElement(
+    "svg",
+    { width: "12", height: "12", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M489.6 444.8l294.4-294.4 67.2 67.2-294.4 294.4 294.4 294.4-67.2 67.2-294.4-294.4-272 272-67.2-67.2 272-272-272-272 67.2-67.2z", "p-id": "18369", fill: "currentColor" })
+  );
+};
+
+export { ArrowLeftIcon, ArrowRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, CloseIcon };

package/lib/Calendar.js

@@ -195,13 +195,15 @@ var Calendar = function (_React$Component) {
     };
     var dateOnlyFormats = Array.isArray(this.getFormat()) ? this.getFormat().map(stripTime) : [stripTime(this.getFormat())];
 
+    var shouldShowClear = mode !== 'month';
+
     var dateInputElement = props.showDateInput ? _react2['default'].createElement(_DateInput2['default'], {
       format: dateOnlyFormats,
       key: 'date-input',
       value: value,
       locale: locale,
       placeholder: headerDatePlaceholder,
-      showClear: false,
+      showClear: shouldShowClear,
       disabledTime: disabledTime,
       disabledDate: disabledDate,
       onClear: this.onClear,

package/lib/date/DateInput.js

@@ -38,6 +38,8 @@ var _dayjs2 = _interopRequireDefault(_dayjs);
 
 var _util = require('../util');
 
+var _icons = require('../icons');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 var customParseFormat = require('dayjs/plugin/customParseFormat');
@@ -140,7 +142,11 @@ var DateInput = function (_React$Component) {
           title: locale.clear,
           onClick: this.onClear
         },
-        clearIcon || _react2['default'].createElement('span', { className: prefixCls + '-clear-btn' })
+        clearIcon || _react2['default'].createElement(
+          'span',
+          { className: prefixCls + '-clear-btn' },
+          _react2['default'].createElement(_icons.CloseIcon, null)
+        )
       )
     );
   };

package/lib/icons.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.DoubleArrowRightIcon = exports.DoubleArrowLeftIcon = exports.ArrowRightIcon = exports.ArrowLeftIcon = undefined;
+exports.CloseIcon = exports.DoubleArrowRightIcon = exports.DoubleArrowLeftIcon = exports.ArrowRightIcon = exports.ArrowLeftIcon = undefined;
 
 var _react = require("react");
 
@@ -43,7 +43,16 @@ var DoubleArrowRightIcon = function DoubleArrowRightIcon() {
   );
 };
 
+var CloseIcon = function CloseIcon() {
+  return _react2["default"].createElement(
+    "svg",
+    { width: "12", height: "12", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg" },
+    _react2["default"].createElement("path", { d: "M489.6 444.8l294.4-294.4 67.2 67.2-294.4 294.4 294.4 294.4-67.2 67.2-294.4-294.4-272 272-67.2-67.2 272-272-272-272 67.2-67.2z", "p-id": "18369", fill: "currentColor" })
+  );
+};
+
 exports.ArrowLeftIcon = ArrowLeftIcon;
 exports.ArrowRightIcon = ArrowRightIcon;
 exports.DoubleArrowLeftIcon = DoubleArrowLeftIcon;
-exports.DoubleArrowRightIcon = DoubleArrowRightIcon;
+exports.DoubleArrowRightIcon = DoubleArrowRightIcon;
+exports.CloseIcon = CloseIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/seafile-calendar",
-  "version": "1.0.9",
+  "version": "1.0.10-alpha.0",
   "description": "React Calendar",
   "keywords": [
     "react",