@titaui/pc 1.16.43-beta.25 → 1.16.43-beta.26

package/lib/components/picker/components/panels/date-panel/date-body.js

@@ -35,7 +35,7 @@ var DatePanelBody = function DatePanelBody(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])(_utils.PickerBodyClass)
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])("".concat(_utils.PickerBodyClass, "__cell-container"))
+    className: (0, _classnames["default"])("".concat(_utils.PickerBodyClass, "__calendar-header"))
   }, weekStartDaySun && /*#__PURE__*/_react["default"].createElement("div", {
     className: _utils.PickerCellClass
   }, (0, _getLocale.getLocale)('Mod_Sun')), getWeekDayData().slice(1).map(function (day) {

package/lib/components/picker/components/panels/date-panel/index.css

@@ -1,23 +1,54 @@
-.tita-ui__picker-panel__date .tita-ui__picker-head {
-  margin-bottom: 15px;
+.tita-ui__picker-panel__date {
+  display: grid;
+  grid-template: 26px 1fr / 100%;
+  gap: 12px;
 }
 
 .tita-ui__picker-panel__date .tita-ui__picker-head-btn__prev {
   margin-right: 0 !important;
 }
 
-.tita-ui__picker-panel__date .tita-ui__picker-body__cell-container {
-  display: flex;
+.tita-ui__picker-panel__date .tita-ui__picker-body {
+  display: grid;
+  grid-template: 24px / 1fr;
+  gap: 4px;
 }
 
-.tita-ui__picker-panel__date .tita-ui__picker-body__cell-container .tita-ui__picker-cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.tita-ui__picker-panel__date .tita-ui__picker-body__calendar-header {
+  display: grid;
+  grid-template: 24px/repeat(7, 1fr);
+  justify-items: center;
+}
+
+.tita-ui__picker-panel__date .tita-ui__picker-body__calendar-header .tita-ui__picker-cell {
+  padding: 0;
+  line-height: 24px;
+  text-align: center;
 }
 
 .tita-ui__picker-panel__date .tita-ui__picker-body__calendar {
   height: 192px;
+  position: relative;
+}
+
+.tita-ui__picker-panel__date .tita-ui__picker-body__calendar::before, .tita-ui__picker-panel__date .tita-ui__picker-body__calendar::after {
+  content: "";
+  width: 100%;
+  height: 10px;
+  display: block;
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.tita-ui__picker-panel__date .tita-ui__picker-body__calendar::before {
+  background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
+  top: 0;
+}
+
+.tita-ui__picker-panel__date .tita-ui__picker-body__calendar::after {
+  background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
+  bottom: 0;
 }
 
 .tita-ui__picker-panel__date .tita-ui__picker-body__calendar-item {

package/lib/components/picker/range-picker/components/operations/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _button = _interopRequireDefault(require("../../../../button"));
+
+var _getLocale = require("../../../../../utils/getLocale");
+
+var _utils = require("../../../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Operations = function Operations(props) {
+  var disabled = props.disabled,
+      onCancel = props.onCancel,
+      onClear = props.onClear,
+      onOk = props.onOk;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(_utils.PickerRangesClass, "__operations"))
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(_utils.PickerRangesClass, "__operations-left"))
+  }, /*#__PURE__*/_react["default"].createElement(_button["default"].Text, {
+    onClick: onClear,
+    text: (0, _getLocale.getLocale)('Mod_Empty')
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(_utils.PickerRangesClass, "__operations-right"))
+  }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    onClick: onCancel,
+    size: "small"
+  }, (0, _getLocale.getLocale)('Mod_Cancel')), /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    disable: disabled,
+    onClick: onOk,
+    size: "small",
+    type: "primary"
+  }, (0, _getLocale.getLocale)('Mod_Determiness'))));
+};
+
+var _default = Operations;
+exports["default"] = _default;

package/lib/components/picker/range-picker/components/picker-trigger/index.css

@@ -15,10 +15,6 @@
   border-color: #2879ff;
 }
 
-.tita-ui__picker-ranges-trigger--focused .tita-ui__picker-ranges-trigger__operation .tu-icon-caret-down::before {
-  transform: scale(0.5) rotate(-180deg);
-}
-
 .tita-ui__picker-ranges-trigger__input {
   font-size: 14px;
   line-height: 22px;
@@ -79,7 +75,7 @@
 
 .tita-ui__picker-ranges-trigger__operation .tu-icon-caret-down::before {
   transform: scale(0.5);
-  transition: all 0.3s ease;
+  transition: all 0.5s cubic-bezier(0.32, 0.28, 0.58, 1.12);
   display: inline-block;
 }
 

package/lib/components/picker/range-picker/components/picker-trigger/index.js

@@ -34,19 +34,22 @@ var RangePickerTrigger = function RangePickerTrigger(props) {
 
   var children = props.children,
       focused = props.focused,
-      viewDate = props.viewDate,
       _props$triggerClassNa = props.triggerClassName,
       triggerClassName = _props$triggerClassNa === void 0 ? '' : _props$triggerClassNa,
       disabled = props.disabled,
       allowClear = props.allowClear,
       placeholder = props.placeholder,
-      _onClick = props.onClick;
+      onClick = props.onClick;
 
   var _useContext = (0, _react.useContext)(_context.RangePickerContext),
       picker = _useContext.picker,
       format = _useContext.format,
       values = _useContext.values;
 
+  var onChildrenClick = function onChildrenClick() {
+    return !disabled && (onClick === null || onClick === void 0 ? void 0 : onClick());
+  };
+
   var currFormat = format;
 
   switch (picker) {
@@ -75,14 +78,10 @@ var RangePickerTrigger = function RangePickerTrigger(props) {
     /*#__PURE__*/
     // eslint-disable-next-line react/jsx-no-useless-fragment
     _react["default"].createElement(_react["default"].Fragment, null, children ? /*#__PURE__*/_react["default"].createElement("div", {
-      onClick: function onClick() {
-        return !disabled && _onClick();
-      }
+      onClick: onChildrenClick
     }, children) : /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])(_utils.PickerRangeTriggerClass, (_classNames = {}, _defineProperty(_classNames, "".concat(_utils.PickerRangeTriggerClass, "--disabled"), disabled), _defineProperty(_classNames, "".concat(_utils.PickerRangeTriggerClass, "--focused"), focused), _classNames), triggerClassName),
-      onClick: function onClick() {
-        return !disabled && _onClick();
-      }
+      onClick: onChildrenClick
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])("".concat(_utils.PickerRangeTriggerClass, "__input"), _defineProperty({}, "".concat(_utils.PickerRangeTriggerClass, "__input--placeholder"), !viewDateEnable && placeholder))
     }, startDate && /*#__PURE__*/_react["default"].createElement("p", {

package/lib/components/picker/range-picker/components/shortcuts/index.js

@@ -22,22 +22,65 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var Shortcuts = function Shortcuts(props) {
-  var onSelect = props.onSelect;
+  var onChange = props.onChange;
 
   var _useContext = (0, _react.useContext)(_context.RangePickerContext),
       picker = _useContext.picker;
 
-  var shortcuts = picker && picker === 'week' ? (0, _utils.RangeWeekPickerShortcutsKeysMapping)() : (0, _utils.RangePickerShortcutsKeysMapping)();
+  var shortcutsData = (0, _react.useMemo)(function () {
+    return picker === 'week' ? (0, _utils.RangeWeekPickerShortcutsKeysMapping)() : (0, _utils.RangePickerShortcutsKeysMapping)();
+  }, []);
+
+  var onItemClick = function onItemClick(shortCuts) {
+    var date;
+
+    switch (shortCuts.key) {
+      case _utils.SHORTCUTS.CURRENT_YEAR:
+        date = (0, _utils.getCurrentValues)('year');
+        break;
+
+      case _utils.SHORTCUTS.CURRENT_MONTH:
+        date = (0, _utils.getCurrentValues)('month');
+        break;
+
+      case _utils.SHORTCUTS.CURRENT_WEEKDAY:
+        date = (0, _utils.getCurrentWeekDay)();
+        break;
+
+      case _utils.SHORTCUTS.CURRENT_WEEK:
+        date = (0, _utils.getCurrentValues)('week');
+        break;
+
+      case _utils.SHORTCUTS.PREVIOUS_WEEK:
+        date = (0, _utils.getPreviousValues)('week');
+        break;
+
+      case _utils.SHORTCUTS.NEXT_WEEK:
+        date = (0, _utils.getNextValues)('week');
+        break;
+
+      case _utils.SHORTCUTS.TODAY:
+        date = (0, _utils.getCurrentValues)('date');
+        break;
+
+      default:
+        date = ['', ''];
+        break;
+    }
+
+    onChange(date);
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])("".concat(_utils.PickerRangesClass, "__shortcuts"))
-  }, shortcuts.map(function (shortcuts) {
+  }, shortcutsData.map(function (item) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])("".concat(_utils.PickerRangesClass, "__shortcuts-item")),
-      key: shortcuts.key,
+      key: item.key,
       onClick: function onClick() {
-        return onSelect(shortcuts);
+        return onItemClick(item);
       }
-    }, shortcuts.title);
+    }, item.title);
   }));
 };
 

package/lib/components/picker/range-picker/index.css

@@ -105,7 +105,7 @@
   color: #2879ff;
 }
 
-.tita-ui__picker-ranges__actions {
+.tita-ui__picker-ranges__operations {
   height: 27px;
   padding: 12px 16px;
   border-top: 1px solid #e9ecf0;
@@ -114,44 +114,44 @@
   justify-content: space-between;
 }
 
-.tita-ui__picker-ranges__actions-left, .tita-ui__picker-ranges__actions-right {
+.tita-ui__picker-ranges__operations-left, .tita-ui__picker-ranges__operations-right {
   flex: 1;
   display: flex;
   align-items: center;
 }
 
-.tita-ui__picker-ranges__actions-right {
+.tita-ui__picker-ranges__operations-right {
   justify-content: flex-end;
 }
 
-.tita-ui__picker-ranges__actions-right .tita-button-small {
+.tita-ui__picker-ranges__operations-right .tita-button-small {
   margin-left: 10px;
 }
 
-.tita-ui__picker-ranges__actions .tita-button-default,
-    .tita-ui__picker-ranges__actions .tita-button-primary {
+.tita-ui__picker-ranges__operations .tita-button-default,
+    .tita-ui__picker-ranges__operations .tita-button-primary {
   font-size: 13px;
   border-radius: 14px;
   transition: all 0.3s ease;
 }
 
-.tita-ui__picker-ranges__actions .tita-button-default {
+.tita-ui__picker-ranges__operations .tita-button-default {
   border-color: #dfe3ea;
   color: #6f7886;
 }
 
-.tita-ui__picker-ranges__actions .tita-button-default:hover {
+.tita-ui__picker-ranges__operations .tita-button-default:hover {
   background-color: #ffffff;
   border-color: #2879ff;
   color: #2879ff;
 }
 
-.tita-ui__picker-ranges__actions .titaui-text-btn {
+.tita-ui__picker-ranges__operations .titaui-text-btn {
   transition: color 0.3s ease;
   color: #2879ff;
 }
 
-.tita-ui__picker-ranges__actions .titaui-text-btn:hover {
+.tita-ui__picker-ranges__operations .titaui-text-btn:hover {
   color: #5c8eff;
 }
 

package/lib/components/picker/range-picker/index.js

@@ -15,17 +15,13 @@ var _moment = _interopRequireDefault(require("moment"));
 
 var _getLocale = require("../../../utils/getLocale");
 
-var _button = _interopRequireDefault(require("../../button"));
-
 var _popup = _interopRequireDefault(require("../../popup"));
 
 var _context = require("../context");
 
 var _utils = require("../utils");
 
-require("./index.css");
-
-var _shortcuts = _interopRequireDefault(require("./components/shortcuts"));
+var _operations = _interopRequireDefault(require("./components/operations"));
 
 var _placeholder = _interopRequireDefault(require("./components/placeholder"));
 
@@ -33,6 +29,10 @@ var _picker = _interopRequireDefault(require("../picker"));
 
 var _pickerTrigger = _interopRequireDefault(require("./components/picker-trigger"));
 
+var _shortcuts = _interopRequireDefault(require("./components/shortcuts"));
+
+require("./index.css");
+
 var _excluded = ["onChange", "format", "values", "picker", "children", "popupPlacement", "direction", "onPopupVisibleChange", "visible", "canEmpty", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -135,41 +135,8 @@ var RangePicker = function RangePicker(props) {
     return true;
   };
 
-  var onShortcutsSelect = function onShortcutsSelect(shortCuts) {
-    var newDate;
-
-    switch (shortCuts.key) {
-      case _utils.SHORTCUTS.CURRENT_YEAR:
-        newDate = (0, _utils.getCurrentValues)('year');
-        break;
-
-      case _utils.SHORTCUTS.CURRENT_MONTH:
-        newDate = (0, _utils.getCurrentValues)('month');
-        break;
-
-      case _utils.SHORTCUTS.CURRENT_WEEKDAY:
-        newDate = (0, _utils.getCurrentWeekDay)();
-        break;
-
-      case _utils.SHORTCUTS.CURRENT_WEEK:
-        newDate = (0, _utils.getCurrentValues)('week');
-        break;
-
-      case _utils.SHORTCUTS.PREVIOUS_WEEK:
-        newDate = (0, _utils.getPreviousValues)('week');
-        break;
-
-      case _utils.SHORTCUTS.NEXT_WEEK:
-        newDate = (0, _utils.getNextValues)('week');
-
-      case _utils.SHORTCUTS.TODAY:
-        newDate = (0, _utils.getCurrentValues)('date');
-
-      default:
-        break;
-    }
-
-    setViewDate(newDate);
+  var onShortcutsDateChange = function onShortcutsDateChange(date) {
+    setViewDate(date);
     setSettingType(_utils.RangeSettingTypes.RESET);
   };
 
@@ -229,7 +196,7 @@ var RangePicker = function RangePicker(props) {
     settingTypeRef.current = settingType;
   }, [settingType]);
   var popContent = (0, _react.useMemo)(function () {
-    var okBtnDisabled = canEmpty ? viewDate.filter(function (v) {
+    var okBtnDisabled = canEmpty ? viewDate.length === 1 || viewDate.filter(function (v) {
       return !v;
     }).length === 1 : viewDate.filter(function (v) {
       return !!v;
@@ -243,7 +210,7 @@ var RangePicker = function RangePicker(props) {
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])("".concat(_utils.PickerRangesClass, "__main"))
     }, /*#__PURE__*/_react["default"].createElement(_shortcuts["default"], {
-      onSelect: onShortcutsSelect
+      onChange: onShortcutsDateChange
     }), /*#__PURE__*/_react["default"].createElement(_picker["default"], _extends({
       onChange: onChangeHandler,
       picker: picker,
@@ -252,26 +219,12 @@ var RangePicker = function RangePicker(props) {
     }, restProps, {
       displayMode: "tiled",
       multiple: true
-    }))), /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(_utils.PickerRangesClass, "__actions"))
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(_utils.PickerRangesClass, "__actions-left"))
-    }, /*#__PURE__*/_react["default"].createElement(_button["default"].Text, {
-      onClick: onClearHandler,
-      text: (0, _getLocale.getLocale)('Mod_Empty')
-    })), /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])("".concat(_utils.PickerRangesClass, "__actions-right"))
-    }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
-      onClick: onClose,
-      size: "small"
-    }, (0, _getLocale.getLocale)('Mod_Cancel')), /*#__PURE__*/_react["default"].createElement(_button["default"], {
-      disable: okBtnDisabled,
-      onClick: function onClick() {
-        return !okBtnDisabled && onConfirmHandler();
-      },
-      size: "small",
-      type: "primary"
-    }, (0, _getLocale.getLocale)('Mod_Determiness')))));
+    }))), /*#__PURE__*/_react["default"].createElement(_operations["default"], {
+      disabled: okBtnDisabled,
+      onCancel: onClose,
+      onClear: onClearHandler,
+      onOk: onConfirmHandler
+    }));
   }, [canEmpty, settingType, viewDate]);
   return /*#__PURE__*/_react["default"].createElement(_context.RangePickerContext.Provider, {
     value: {
@@ -290,10 +243,7 @@ var RangePicker = function RangePicker(props) {
   }, restProps), /*#__PURE__*/_react["default"].createElement(_pickerTrigger["default"], _extends({
     focused: popupVisible,
     placeholder: (0, _getLocale.getLocale)('Rep_NewS_All'),
-    viewDate: values,
-    onClick: function onClick() {
-      return setPopupVisible(true);
-    }
+    viewDate: values
   }, restProps), children)));
 };
 

package/lib/components/picker/utils.js

@@ -97,7 +97,7 @@ exports.RangeSettingTypes = RangeSettingTypes;
 var RangePickerShortcutsKeysMapping = function RangePickerShortcutsKeysMapping() {
   return [{
     key: SHORTCUTS.TODAY,
-    title: _getLocale.isEn ? 'Today' : '今天'
+    title: (0, _getLocale.getLocale)('Mod_Today')
   }, {
     key: SHORTCUTS.CURRENT_WEEKDAY,
     title: (0, _getLocale.getLocale)('Feed_Tab_Title_Thisweek')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titaui/pc",
-  "version": "1.16.43-beta.25",
+  "version": "1.16.43-beta.26",
   "nameCN": "",
   "description": "",
   "main": "lib/index.js",

package/lib/components/picker/components/cross.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>切片</title>
-    <g id="10、日期时间组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="日期范围选择器-Date" transform="translate(-411.000000, -3250.000000)" fill="#BFC7D5">
-            <g id="编组-4" transform="translate(254.000000, 3190.000000)">
-                <g id="日期基础组件" transform="translate(0.000000, 36.000000)">
-                    <g id="编组-6" transform="translate(20.000000, 16.000000)">
-                        <g id="cross" transform="translate(137.000000, 8.000000)">
-                            <path d="M8,1.33333333 C9.84066667,1.33333333 11.5073333,2.07966667 12.7143333,3.286 C13.9206667,4.49233333 14.6666667,6.159 14.6666667,8 C14.6666667,9.84066667 13.9206667,11.5073333 12.7143333,12.7143333 C11.5073333,13.9206667 9.84066667,14.6666667 8,14.6666667 C6.159,14.6666667 4.49233333,13.9206667 3.286,12.7143333 C2.07966667,11.5073333 1.33333333,9.84066667 1.33333333,8 C1.33333333,6.159 2.07966667,4.49233333 3.286,3.286 C4.49233333,2.07966667 6.159,1.33333333 8,1.33333333 Z M6.00687497,5.25130819 C5.79859535,5.04302857 5.46090736,5.04302857 5.25262774,5.25130819 C5.04434812,5.45958782 5.04434812,5.7972758 5.25262774,6.00555543 L5.25262774,6.00555543 L7.23241802,7.98509848 L5.25262774,9.9653534 L5.19091526,10.0392178 C5.04691947,10.2470772 5.0674903,10.5344632 5.25262774,10.7196006 L5.25262774,10.7196006 L5.32649215,10.7813131 C5.5343515,10.9253089 5.82173753,10.9047381 6.00687497,10.7196006 L6.00687497,10.7196006 L7.98641802,8.73909848 L9.96667295,10.7196006 C10.1749526,10.9278803 10.5126406,10.9278803 10.7209202,10.7196006 C10.9291998,10.511321 10.9291998,10.173633 10.7209202,9.9653534 L10.7209202,9.9653534 L8.74041802,7.98509848 L10.7209202,6.00555543 L10.7826327,5.93169101 C10.9266284,5.72383166 10.9060576,5.43644564 10.7209202,5.25130819 L10.7209202,5.25130819 L10.6470558,5.18959571 C10.4391964,5.04559992 10.1518104,5.06617075 9.96667295,5.25130819 L9.96667295,5.25130819 L7.98641802,7.23109848 Z" id="形状结合"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>