@pisell/date-picker 1.0.134 → 1.0.135

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/es/ActionBar/index.js +17 -9
  2. package/es/ActionBar/index.less +31 -9
  3. package/es/locales/index.js +16 -16
  4. package/es/utils/index.d.ts +2 -2
  5. package/es/utils/index.js +4 -4
  6. package/lib/ActionBar/index.js +9 -9
  7. package/lib/ActionBar/index.less +31 -9
  8. package/lib/locales/index.js +5 -5
  9. package/lib/utils/index.d.ts +2 -2
  10. package/lib/utils/index.js +1 -1
  11. package/package.json +2 -2
package/es/ActionBar/index.js CHANGED
@@ -20,7 +20,7 @@ import dayjs from 'dayjs';
20
20
  import { getText, pLocaleMap } from "../locales";
21
21
  import "./index.less";
22
22
  var ActionBar = function ActionBar(props) {
23
- var _value$, _value$2;
23
+ var _value$, _value$2, _value$3, _value$4;
24
24
  var ownerState = props.ownerState,
25
25
  onCancel = props.onCancel,
26
26
  onOk = props.onOk,
@@ -102,15 +102,19 @@ var ActionBar = function ActionBar(props) {
102
102
  popupClassName: "date-picker-action-bar-time-picker-popup",
103
103
  onChange: handleStartChange,
104
104
  inputReadOnly: true
105
- })) : /*#__PURE__*/React.createElement("input", {
105
+ })) : /*#__PURE__*/React.createElement("div", {
106
+ className: "date-picker-time-wrapper"
107
+ }, /*#__PURE__*/React.createElement("div", {
108
+ className: "date-picker-time-display"
109
+ }, ((_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.format('HH:mm')) || '--:--'), /*#__PURE__*/React.createElement("input", {
106
110
  type: "time",
107
111
  onChange: function onChange(e) {
108
112
  var val = e.target.value;
109
113
  handleStartChange(dayjs(val, 'HH:mm'));
110
114
  },
111
- className: "date-picker-input-time",
112
- value: (_value$ = value[0]) === null || _value$ === void 0 ? void 0 : _value$.format('HH:mm')
113
- })), /*#__PURE__*/React.createElement("div", {
115
+ className: "date-picker-input-time-native",
116
+ value: (_value$2 = value[0]) === null || _value$2 === void 0 ? void 0 : _value$2.format('HH:mm')
117
+ }))), /*#__PURE__*/React.createElement("div", {
114
118
  className: "date-picker-action-time-item"
115
119
  }, /*#__PURE__*/React.createElement("div", {
116
120
  className: "date-picker-action-time-item-label"
@@ -123,15 +127,19 @@ var ActionBar = function ActionBar(props) {
123
127
  popupClassName: "date-picker-action-bar-time-picker-popup",
124
128
  onChange: handleEndChange,
125
129
  inputReadOnly: true
126
- })) : /*#__PURE__*/React.createElement("input", {
130
+ })) : /*#__PURE__*/React.createElement("div", {
131
+ className: "date-picker-time-wrapper"
132
+ }, /*#__PURE__*/React.createElement("div", {
133
+ className: "date-picker-time-display"
134
+ }, ((_value$3 = value[1]) === null || _value$3 === void 0 ? void 0 : _value$3.format('HH:mm')) || '--:--'), /*#__PURE__*/React.createElement("input", {
127
135
  type: "time",
128
136
  onChange: function onChange(e) {
129
137
  var val = e.target.value;
130
138
  handleEndChange(dayjs(val, 'HH:mm'));
131
139
  },
132
- className: "date-picker-input-time",
133
- value: (_value$2 = value[1]) === null || _value$2 === void 0 ? void 0 : _value$2.format('HH:mm')
134
- }))) : null, /*#__PURE__*/React.createElement("div", {
140
+ className: "date-picker-input-time-native",
141
+ value: (_value$4 = value[1]) === null || _value$4 === void 0 ? void 0 : _value$4.format('HH:mm')
142
+ })))) : null, /*#__PURE__*/React.createElement("div", {
135
143
  className: classNames(props.className, 'date-picker-action-bar')
136
144
  }, /*#__PURE__*/React.createElement("div", {
137
145
  className: "date-picker-action-bar-right",
package/es/ActionBar/index.less CHANGED
@@ -27,17 +27,39 @@
27
27
  flex-direction: column;
28
28
  gap: 8px;
29
29
  flex: 1;
30
- .date-picker-input-time {
31
- padding: 6.5px 11px 6.5px;
32
- background: #ffffff;
33
- border: 1px solid #D0D5DD;
34
- border-radius: 8px;
35
- height: 40px;
36
- line-height: 40px;
30
+ .date-picker-time-wrapper {
31
+ position: relative;
37
32
  width: 100%;
38
- display: block;
39
33
  min-width: 160px;
40
- font-size: 16px;
34
+
35
+ .date-picker-time-display {
36
+ display: flex;
37
+ align-items: center;
38
+ height: 40px;
39
+ padding: 0 11px;
40
+ background: #ffffff;
41
+ border: 1px solid #D0D5DD;
42
+ border-radius: 8px;
43
+ font-size: 16px;
44
+ color: rgba(0, 0, 0, 0.88);
45
+ pointer-events: none;
46
+ }
47
+
48
+ .date-picker-input-time-native {
49
+ position: absolute;
50
+ top: 0;
51
+ left: 0;
52
+ width: 100%;
53
+ height: 100%;
54
+ opacity: 0;
55
+ cursor: pointer;
56
+ -webkit-appearance: none;
57
+ appearance: none;
58
+ border: none;
59
+ padding: 0;
60
+ margin: 0;
61
+ font-size: 16px; // 防止 iOS focus 时页面缩放
62
+ }
41
63
  }
42
64
  .date-picker-action-time-item-label {
43
65
  color: var(--Gray-700, #344054);
package/es/locales/index.js CHANGED
@@ -5,23 +5,23 @@ import ja from "./ja";
5
5
  import pt from "./pt";
6
6
  import { getCurrentLocale } from "../utils";
7
7
  var langMap = {
8
- "zh-CN": zhCN,
9
- "en-US": enUS,
10
- "zh-TW": zhTW,
11
- "zh-HK": zhTW,
12
- "ja": ja,
13
- "pt": pt
8
+ 'zh-CN': zhCN,
9
+ 'en-US': enUS,
10
+ 'zh-TW': zhTW,
11
+ 'zh-HK': zhTW,
12
+ ja: ja,
13
+ pt: pt
14
14
  };
15
15
  export var pLocaleMap = {
16
- "en": "en-US",
17
- "zh-cn": "zh-CN",
18
- "zh-tw": "zh-TW",
19
- "en-US": "en-US",
20
- "zh-CN": "zh-CN",
21
- "zh-TW": "zh-TW",
22
- "zh-HK": "zh-TW",
23
- "ja": "ja",
24
- "pt": "pt"
16
+ en: 'en-US',
17
+ 'zh-cn': 'zh-CN',
18
+ 'zh-tw': 'zh-TW',
19
+ 'en-US': 'en-US',
20
+ 'zh-CN': 'zh-CN',
21
+ 'zh-TW': 'zh-TW',
22
+ 'zh-HK': 'zh-TW',
23
+ ja: 'ja',
24
+ pt: 'pt'
25
25
  };
26
26
  export var getText = function getText(id, pLocale) {
27
27
  if (!id) {
@@ -31,7 +31,7 @@ export var getText = function getText(id, pLocale) {
31
31
  //@ts-ignore
32
32
  return langMap[pLocale][id] || id;
33
33
  }
34
- var locale = getCurrentLocale() || "en-US";
34
+ var locale = getCurrentLocale() || 'en-US';
35
35
  //@ts-ignore
36
36
  return langMap[locale][id] || langMap['en-US'][id] || id;
37
37
  };
package/es/utils/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { PresetType } from "../Shortcuts";
2
- import { Dayjs } from "dayjs";
1
+ import { PresetType } from '../Shortcuts';
2
+ import { Dayjs } from 'dayjs';
3
3
  export declare const getCurrentLocale: () => string;
4
4
  export declare const isBrowser: boolean;
5
5
  export declare const isMobile: () => boolean;
package/es/utils/index.js CHANGED
@@ -4,14 +4,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
4
4
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
5
  function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
6
6
  function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
7
- import { isFunction, isMobile as isMobileUtils, isString } from "@pisell/utils";
7
+ import { isFunction, isMobile as isMobileUtils, isString } from '@pisell/utils';
8
8
  import { defaultPresets, presetDetailMap, presetValueArr } from "../constants";
9
9
  export var getCurrentLocale = function getCurrentLocale() {
10
- var locale = localStorage.getItem("umi_locale") || "en-US";
10
+ var locale = localStorage.getItem('umi_locale') || 'en-US';
11
11
  //@ts-ignore
12
12
  return locale;
13
13
  };
14
- export var isBrowser = !!(typeof window !== "undefined" && window.document && window.document.createElement);
14
+ export var isBrowser = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
15
15
  export var isMobile = function isMobile() {
16
16
  if (isBrowser) {
17
17
  return window.innerWidth <= 768 || isMobileUtils();
@@ -82,7 +82,7 @@ export var getShortcutValue = function getShortcutValue(value, preset) {
82
82
  var _preset$find;
83
83
  return ((_preset$find = preset.find(function (item) {
84
84
  return item.value === value || item.label === value;
85
- })) === null || _preset$find === void 0 ? void 0 : _preset$find.getValue()) || [null, null];
85
+ })) === null || _preset$find === void 0 ? void 0 : _preset$find.getValue()) || [];
86
86
  };
87
87
 
88
88
  /**
package/lib/ActionBar/index.js CHANGED
@@ -41,7 +41,7 @@ var import_dayjs = __toESM(require("dayjs"));
41
41
  var import_locales = require("../locales");
42
42
  var import_index = require("./index.less");
43
43
  var ActionBar = (props) => {
44
- var _a, _b;
44
+ var _a, _b, _c, _d;
45
45
  const {
46
46
  ownerState,
47
47
  onCancel,
@@ -123,7 +123,7 @@ var ActionBar = (props) => {
123
123
  onChange: handleStartChange,
124
124
  inputReadOnly: true
125
125
  }
126
- ) : /* @__PURE__ */ import_react.default.createElement(
126
+ ) : /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-time-wrapper" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-time-display" }, ((_a = value[0]) == null ? void 0 : _a.format("HH:mm")) || "--:--"), /* @__PURE__ */ import_react.default.createElement(
127
127
  "input",
128
128
  {
129
129
  type: "time",
@@ -131,10 +131,10 @@ var ActionBar = (props) => {
131
131
  const val = e.target.value;
132
132
  handleStartChange((0, import_dayjs.default)(val, "HH:mm"));
133
133
  },
134
- className: "date-picker-input-time",
135
- value: (_a = value[0]) == null ? void 0 : _a.format("HH:mm")
134
+ className: "date-picker-input-time-native",
135
+ value: (_b = value[0]) == null ? void 0 : _b.format("HH:mm")
136
136
  }
137
- )), /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time-item-label" }, (0, import_locales.getText)("action-bar-end.time", import_locales.pLocaleMap[locale])), isDesktop ? /* @__PURE__ */ import_react.default.createElement(
137
+ ))), /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-action-time-item-label" }, (0, import_locales.getText)("action-bar-end.time", import_locales.pLocaleMap[locale])), isDesktop ? /* @__PURE__ */ import_react.default.createElement(
138
138
  import_antd.TimePicker,
139
139
  {
140
140
  placeholder: (0, import_locales.getText)("action-bar-end.time", import_locales.pLocaleMap[locale]),
@@ -146,7 +146,7 @@ var ActionBar = (props) => {
146
146
  onChange: handleEndChange,
147
147
  inputReadOnly: true
148
148
  }
149
- ) : /* @__PURE__ */ import_react.default.createElement(
149
+ ) : /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-time-wrapper" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "date-picker-time-display" }, ((_c = value[1]) == null ? void 0 : _c.format("HH:mm")) || "--:--"), /* @__PURE__ */ import_react.default.createElement(
150
150
  "input",
151
151
  {
152
152
  type: "time",
@@ -154,10 +154,10 @@ var ActionBar = (props) => {
154
154
  const val = e.target.value;
155
155
  handleEndChange((0, import_dayjs.default)(val, "HH:mm"));
156
156
  },
157
- className: "date-picker-input-time",
158
- value: (_b = value[1]) == null ? void 0 : _b.format("HH:mm")
157
+ className: "date-picker-input-time-native",
158
+ value: (_d = value[1]) == null ? void 0 : _d.format("HH:mm")
159
159
  }
160
- ))) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(props.className, "date-picker-action-bar") }, /* @__PURE__ */ import_react.default.createElement(
160
+ )))) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(props.className, "date-picker-action-bar") }, /* @__PURE__ */ import_react.default.createElement(
161
161
  "div",
162
162
  {
163
163
  className: "date-picker-action-bar-right",
package/lib/ActionBar/index.less CHANGED
@@ -27,17 +27,39 @@
27
27
  flex-direction: column;
28
28
  gap: 8px;
29
29
  flex: 1;
30
- .date-picker-input-time {
31
- padding: 6.5px 11px 6.5px;
32
- background: #ffffff;
33
- border: 1px solid #D0D5DD;
34
- border-radius: 8px;
35
- height: 40px;
36
- line-height: 40px;
30
+ .date-picker-time-wrapper {
31
+ position: relative;
37
32
  width: 100%;
38
- display: block;
39
33
  min-width: 160px;
40
- font-size: 16px;
34
+
35
+ .date-picker-time-display {
36
+ display: flex;
37
+ align-items: center;
38
+ height: 40px;
39
+ padding: 0 11px;
40
+ background: #ffffff;
41
+ border: 1px solid #D0D5DD;
42
+ border-radius: 8px;
43
+ font-size: 16px;
44
+ color: rgba(0, 0, 0, 0.88);
45
+ pointer-events: none;
46
+ }
47
+
48
+ .date-picker-input-time-native {
49
+ position: absolute;
50
+ top: 0;
51
+ left: 0;
52
+ width: 100%;
53
+ height: 100%;
54
+ opacity: 0;
55
+ cursor: pointer;
56
+ -webkit-appearance: none;
57
+ appearance: none;
58
+ border: none;
59
+ padding: 0;
60
+ margin: 0;
61
+ font-size: 16px; // 防止 iOS focus 时页面缩放
62
+ }
41
63
  }
42
64
  .date-picker-action-time-item-label {
43
65
  color: var(--Gray-700, #344054);
package/lib/locales/index.js CHANGED
@@ -44,19 +44,19 @@ var langMap = {
44
44
  "en-US": import_en_US.default,
45
45
  "zh-TW": import_zh_TW.default,
46
46
  "zh-HK": import_zh_TW.default,
47
- "ja": import_ja.default,
48
- "pt": import_pt.default
47
+ ja: import_ja.default,
48
+ pt: import_pt.default
49
49
  };
50
50
  var pLocaleMap = {
51
- "en": "en-US",
51
+ en: "en-US",
52
52
  "zh-cn": "zh-CN",
53
53
  "zh-tw": "zh-TW",
54
54
  "en-US": "en-US",
55
55
  "zh-CN": "zh-CN",
56
56
  "zh-TW": "zh-TW",
57
57
  "zh-HK": "zh-TW",
58
- "ja": "ja",
59
- "pt": "pt"
58
+ ja: "ja",
59
+ pt: "pt"
60
60
  };
61
61
  var getText = (id, pLocale) => {
62
62
  if (!id) {
package/lib/utils/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { PresetType } from "../Shortcuts";
2
- import { Dayjs } from "dayjs";
1
+ import { PresetType } from '../Shortcuts';
2
+ import { Dayjs } from 'dayjs';
3
3
  export declare const getCurrentLocale: () => string;
4
4
  export declare const isBrowser: boolean;
5
5
  export declare const isMobile: () => boolean;
package/lib/utils/index.js CHANGED
@@ -85,7 +85,7 @@ var getPresetLabel = (currentShortcut, presets, locale) => {
85
85
  };
86
86
  var getShortcutValue = (value, preset) => {
87
87
  var _a;
88
- return ((_a = preset.find((item) => item.value === value || item.label === value)) == null ? void 0 : _a.getValue()) || [null, null];
88
+ return ((_a = preset.find((item) => item.value === value || item.label === value)) == null ? void 0 : _a.getValue()) || [];
89
89
  };
90
90
  var getDatePickerValueByShortcut = (value, preset) => {
91
91
  const p = formatPresets(preset || import_constants.defaultPresets);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pisell/date-picker",
3
- "version": "1.0.134",
3
+ "version": "1.0.135",
4
4
  "sideEffects": [
5
5
  "*.less"
6
6
  ],
@@ -30,7 +30,7 @@
30
30
  "prop-types": "^15.8.1",
31
31
  "react": "^18.0.0",
32
32
  "react-dom": "^18.0.0",
33
- "@pisell/utils": "1.0.61"
33
+ "@pisell/utils": "1.0.62"
34
34
  },
35
35
  "files": [
36
36
  "es",