@qsxy/element-plus-react 1.0.1 → 1.0.2
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.
- package/dist/Calendar/Calendar.js +12 -3
- package/dist/Calendar/Footer.js +4 -2
- package/dist/Calendar/QuarterPanel.d.ts +4 -0
- package/dist/Calendar/QuarterPanel.js +109 -0
- package/dist/Calendar/WeekPanel.js +1 -1
- package/dist/Calendar/typings.d.ts +1 -1
- package/dist/Card/Card.js +9 -4
- package/dist/Card/typings.d.ts +1 -1
- package/dist/Cascader/Cascader.js +1 -1
- package/dist/DatePicker/DatePicker.js +38 -12
- package/dist/DatePicker/DateRangePicker.js +27 -9
- package/dist/DatePicker/main.js +1 -1
- package/dist/DatePicker/typings.d.ts +1 -1
- package/dist/DateTimePicker/DateTimePicker.js +2 -2
- package/dist/Input/Input.1.d.ts +16 -0
- package/dist/Input/Input.1.js +376 -0
- package/dist/Input/Input.js +137 -121
- package/dist/Input/InputRange.js +1 -1
- package/dist/Input/TextArea.js +87 -12
- package/dist/Input/typings.d.ts +15 -5
- package/dist/Input/useComposition.d.ts +23 -0
- package/dist/Input/useComposition.js +63 -0
- package/dist/Input/utils.d.ts +6 -0
- package/dist/Input/utils.js +91 -0
- package/dist/InputNumber/InputNumber.js +1 -1
- package/dist/InputNumber/typings.d.ts +1 -1
- package/dist/Select/Option.js +30 -14
- package/dist/Select/SelectContext.d.ts +3 -4
- package/dist/Select/SelectCore.d.ts +2 -2
- package/dist/Select/SelectCore.js +164 -447
- package/dist/Select/SelectDropdown.js +67 -145
- package/dist/Select/typings.d.ts +47 -21
- package/dist/Select/useSelect.d.ts +125 -0
- package/dist/Select/useSelect.js +516 -0
- package/dist/Table/util.js +6 -5
- package/dist/Tag/Tag.js +22 -17
- package/dist/TimePicker/TimePicker.js +2 -2
- package/dist/TreeSelect/TreeSelect.js +2 -2
- package/dist/Util/aria.d.ts +25 -0
- package/dist/Util/aria.js +118 -0
- package/dist/hooks/useCalcInputWidth.d.ts +8 -0
- package/dist/hooks/useCalcInputWidth.js +30 -0
- package/dist/hooks/useComposition.d.ts +16 -0
- package/dist/hooks/useComposition.js +39 -0
- package/dist/hooks/useCursor.d.ts +2 -0
- package/dist/hooks/useCursor.js +52 -0
- package/dist/hooks/useFocusController.d.ts +27 -0
- package/dist/hooks/useFocusController.js +72 -0
- package/dist/index.css +1 -1
- package/dist/locale/en.d.ts +15 -0
- package/dist/locale/en.js +15 -0
- package/dist/locale/zhCn.d.ts +15 -0
- package/dist/locale/zhCn.js +15 -0
- package/package.json +1 -1
- package/theme-chalk/calendar/index.scss +1 -0
- package/theme-chalk/calendar/quarter-table.scss +78 -0
- package/theme-chalk/common/var.scss +1 -1
- package/theme-chalk/input/input.scss +424 -578
- package/theme-chalk/input/input.scss--bak +578 -0
- package/theme-chalk/select/index.scss +272 -247
- package/theme-chalk/select/index.scss--bak +247 -0
- package/theme-chalk/select/option-group.scss +2 -2
- package/theme-chalk/select/option.scss +2 -2
- package/theme-chalk/select/select-dropdown.scss +2 -2
- package/theme-chalk/tag.scss +181 -203
- package/theme-chalk/tag.scss--bak +203 -0
|
@@ -27,6 +27,7 @@ import Footer from "./Footer";
|
|
|
27
27
|
import Header from "./Header";
|
|
28
28
|
import MonthPanel from "./MonthPanel";
|
|
29
29
|
import MonthRangePanel from "./MonthRangePanel";
|
|
30
|
+
import QuarterPanel from "./QuarterPanel";
|
|
30
31
|
import ShortCuts from "./ShortCuts";
|
|
31
32
|
import WeekPanel from "./WeekPanel";
|
|
32
33
|
import YearPanel from "./YearPanel";
|
|
@@ -119,7 +120,7 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
119
120
|
|
|
120
121
|
// 是否要选择月份
|
|
121
122
|
var hasMonth = useMemo(function () {
|
|
122
|
-
return
|
|
123
|
+
return !['year', 'quarter'].includes(dateType);
|
|
123
124
|
}, [dateType]);
|
|
124
125
|
|
|
125
126
|
// 当前面板是否是范围组件
|
|
@@ -213,7 +214,12 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
213
214
|
}
|
|
214
215
|
popperInstRef === null || popperInstRef === void 0 || (_popperInstRef$curren2 = popperInstRef.current) === null || _popperInstRef$curren2 === void 0 || _popperInstRef$curren2.update();
|
|
215
216
|
} else {
|
|
216
|
-
|
|
217
|
+
if (dateType === 'quarter') {
|
|
218
|
+
setView('quarter');
|
|
219
|
+
setValue(date);
|
|
220
|
+
} else {
|
|
221
|
+
onChange === null || onChange === void 0 || onChange(date);
|
|
222
|
+
}
|
|
217
223
|
}
|
|
218
224
|
}, [dateType, hasMonth, onChange, popperInstRef, rangePosition, valueRange]);
|
|
219
225
|
|
|
@@ -315,7 +321,7 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
315
321
|
lng: locale
|
|
316
322
|
}),
|
|
317
323
|
showMonth: ['date', 'dates', 'week'].includes(view),
|
|
318
|
-
border: ['year', 'month'].includes(view),
|
|
324
|
+
border: ['year', 'month', 'quarter'].includes(view),
|
|
319
325
|
onToggleView: onToggleView,
|
|
320
326
|
onMoveBackward: function onMoveBackward() {
|
|
321
327
|
return switchDate(-1, 'M');
|
|
@@ -338,6 +344,9 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
338
344
|
}), view === 'date' && /*#__PURE__*/React.createElement(DatePanel, {
|
|
339
345
|
value: defaultValue,
|
|
340
346
|
onPickDate: onPickDate
|
|
347
|
+
}), view === 'quarter' && /*#__PURE__*/React.createElement(QuarterPanel, {
|
|
348
|
+
value: defaultValue,
|
|
349
|
+
onPickDate: onPickDate
|
|
341
350
|
}), view === 'week' && /*#__PURE__*/React.createElement(WeekPanel, {
|
|
342
351
|
value: defaultValue,
|
|
343
352
|
valueRange: valueRange,
|
package/dist/Calendar/Footer.js
CHANGED
|
@@ -44,14 +44,16 @@ var Footer = function Footer() {
|
|
|
44
44
|
}, t('el.datepicker.today', {
|
|
45
45
|
lng: locale
|
|
46
46
|
})), showNow && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
|
|
47
|
-
type: "
|
|
48
|
-
|
|
47
|
+
type: "default",
|
|
48
|
+
size: "small",
|
|
49
|
+
text: true,
|
|
49
50
|
className: e(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["link-btn"]))),
|
|
50
51
|
onClick: onPickToday
|
|
51
52
|
}, t('el.datepicker.now', {
|
|
52
53
|
lng: locale
|
|
53
54
|
})), /*#__PURE__*/React.createElement(Button, {
|
|
54
55
|
type: "default",
|
|
56
|
+
size: "small",
|
|
55
57
|
className: e(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["link-btn"]))),
|
|
56
58
|
onClick: close
|
|
57
59
|
}, t('el.datepicker.confirm', {
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import classNames from 'classnames';
|
|
2
|
+
import dayjs from 'dayjs';
|
|
3
|
+
import React, { useCallback, useContext, useMemo } from 'react';
|
|
4
|
+
import { useTranslation } from 'react-i18next';
|
|
5
|
+
import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
|
|
6
|
+
import { useClassNames } from "../hooks";
|
|
7
|
+
import CalendarContext from "./CalendarContext";
|
|
8
|
+
import { initDate } from "./util";
|
|
9
|
+
var QuarterPanel = function QuarterPanel(props) {
|
|
10
|
+
var value = props.value,
|
|
11
|
+
onPickDate = props.onPickDate;
|
|
12
|
+
var _useClassNames = useClassNames('quarter-table'),
|
|
13
|
+
b = _useClassNames.b,
|
|
14
|
+
be = _useClassNames.be;
|
|
15
|
+
var _useContext = useContext(CalendarContext),
|
|
16
|
+
valueProp = _useContext.value,
|
|
17
|
+
disabledDate = _useContext.disabledDate,
|
|
18
|
+
formatter = _useContext.formatter;
|
|
19
|
+
var _useConfigProvider = useConfigProvider(),
|
|
20
|
+
locale = _useConfigProvider.locale;
|
|
21
|
+
var _useTranslation = useTranslation(),
|
|
22
|
+
t = _useTranslation.t;
|
|
23
|
+
|
|
24
|
+
// 当前日期
|
|
25
|
+
var currentDate = useMemo(function () {
|
|
26
|
+
if (value.isValid()) {
|
|
27
|
+
return value;
|
|
28
|
+
}
|
|
29
|
+
return initDate();
|
|
30
|
+
}, [value]);
|
|
31
|
+
|
|
32
|
+
// 今天
|
|
33
|
+
var today = useMemo(function () {
|
|
34
|
+
return dayjs();
|
|
35
|
+
}, []);
|
|
36
|
+
var rows = useMemo(function () {
|
|
37
|
+
return Array.from({
|
|
38
|
+
length: 4
|
|
39
|
+
}).map(function (row, i) {
|
|
40
|
+
return {
|
|
41
|
+
text: i + 1,
|
|
42
|
+
type: 'current',
|
|
43
|
+
disabled: disabledDate && disabledDate(currentDate.month(i * 3).date(1).toDate())
|
|
44
|
+
};
|
|
45
|
+
});
|
|
46
|
+
}, [currentDate, disabledDate]);
|
|
47
|
+
var getFormattedDate = useCallback(function (quarter, type) {
|
|
48
|
+
switch (type) {
|
|
49
|
+
case 'current':
|
|
50
|
+
return currentDate.month((quarter - 1) * 3).date(1);
|
|
51
|
+
}
|
|
52
|
+
}, [currentDate]);
|
|
53
|
+
var getCellClass = useCallback(function (_ref) {
|
|
54
|
+
var text = _ref.text,
|
|
55
|
+
type = _ref.type,
|
|
56
|
+
disabled = _ref.disabled;
|
|
57
|
+
var date = getFormattedDate(text, type);
|
|
58
|
+
var classes = [];
|
|
59
|
+
if (type === 'current') {
|
|
60
|
+
classes.push(disabled ? 'normal disabled' : 'available');
|
|
61
|
+
if (date.isSame(today, 'day')) {
|
|
62
|
+
classes.push('today');
|
|
63
|
+
}
|
|
64
|
+
} else {
|
|
65
|
+
classes.push(disabled ? 'normal disabled' : "".concat(type, "-month"));
|
|
66
|
+
}
|
|
67
|
+
if (valueProp && date.isSame(valueProp, 'day')) {
|
|
68
|
+
classes.push('current');
|
|
69
|
+
}
|
|
70
|
+
return classNames.apply(void 0, classes);
|
|
71
|
+
}, [getFormattedDate, today, valueProp]);
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* 选中日期回调
|
|
75
|
+
* @param param0
|
|
76
|
+
*/
|
|
77
|
+
var handlePickDate = useCallback(function (_ref2) {
|
|
78
|
+
var text = _ref2.text,
|
|
79
|
+
type = _ref2.type,
|
|
80
|
+
disabled = _ref2.disabled;
|
|
81
|
+
if (disabled) {
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
var date = getFormattedDate(text, type);
|
|
85
|
+
onPickDate === null || onPickDate === void 0 || onPickDate(date);
|
|
86
|
+
}, [getFormattedDate, onPickDate]);
|
|
87
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
88
|
+
className: classNames(be('picker-panel', 'content', false), props.className)
|
|
89
|
+
}, props.children, /*#__PURE__*/React.createElement("table", {
|
|
90
|
+
cellSpacing: "0",
|
|
91
|
+
cellPadding: "0",
|
|
92
|
+
className: classNames(b(), 'is-week-mode')
|
|
93
|
+
}, /*#__PURE__*/React.createElement("tbody", null, rows.map(function (cell) {
|
|
94
|
+
return /*#__PURE__*/React.createElement("td", {
|
|
95
|
+
key: cell.text,
|
|
96
|
+
className: getCellClass(cell),
|
|
97
|
+
onClick: function onClick() {
|
|
98
|
+
return handlePickDate(cell);
|
|
99
|
+
}
|
|
100
|
+
}, formatter ? formatter(getFormattedDate(cell.text, cell.type), cell.text) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
|
|
101
|
+
className: "cell"
|
|
102
|
+
}, t('el.datepicker.quarter', {
|
|
103
|
+
lng: locale,
|
|
104
|
+
quarter: cell.text
|
|
105
|
+
}))));
|
|
106
|
+
}))));
|
|
107
|
+
};
|
|
108
|
+
QuarterPanel.displayName = 'Calendar.QuarterPanel';
|
|
109
|
+
export default QuarterPanel;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Dayjs } from 'dayjs';
|
|
2
2
|
import { BaseProps, ComponentChildren, NativeProps } from '../types/common';
|
|
3
|
-
export type DateType = 'year' | 'month' | 'date' | 'dates' | 'week' | 'datetime' | 'datetimerange' | 'time';
|
|
3
|
+
export type DateType = 'year' | 'month' | 'date' | 'dates' | 'week' | 'datetime' | 'datetimerange' | 'time' | 'quarter';
|
|
4
4
|
export type DateRangeType = 'daterange' | 'monthrange' | 'yearrange';
|
|
5
5
|
export type RangePosition = 'left' | 'right';
|
|
6
6
|
export type ValueRagne = [value: Dayjs, value: Dayjs];
|
package/dist/Card/Card.js
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3;
|
|
2
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3;
|
|
3
|
+
var _excluded = ["header", "footer", "bodyStyle", "shadow", "classPrefix"];
|
|
4
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
5
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
4
6
|
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
7
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
8
|
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); }
|
|
9
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
10
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
7
11
|
import classNames from 'classnames';
|
|
8
12
|
import React, { forwardRef, memo } from 'react';
|
|
9
13
|
import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
|
|
@@ -23,16 +27,17 @@ var Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
23
27
|
bodyStyle = _props.bodyStyle,
|
|
24
28
|
shadow = _props.shadow,
|
|
25
29
|
_props$classPrefix = _props.classPrefix,
|
|
26
|
-
classPrefix = _props$classPrefix === void 0 ? 'card' : _props$classPrefix
|
|
30
|
+
classPrefix = _props$classPrefix === void 0 ? 'card' : _props$classPrefix,
|
|
31
|
+
rest = _objectWithoutProperties(_props, _excluded);
|
|
27
32
|
var _useClassNames = useClassNames(classPrefix),
|
|
28
33
|
b = _useClassNames.b,
|
|
29
34
|
e = _useClassNames.e,
|
|
30
35
|
is = _useClassNames.is;
|
|
31
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
36
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
|
32
37
|
ref: ref,
|
|
33
38
|
className: classNames(b(), is(_defineProperty({}, "".concat(shadow, "-shadow"), ['always', 'hover'].includes(shadow))), props.className),
|
|
34
39
|
style: props.style
|
|
35
|
-
}, header && /*#__PURE__*/React.createElement("div", {
|
|
40
|
+
}, rest), header && /*#__PURE__*/React.createElement("div", {
|
|
36
41
|
className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["header"])))
|
|
37
42
|
}, header), /*#__PURE__*/React.createElement("div", {
|
|
38
43
|
className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["body"]))),
|
package/dist/Card/typings.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BaseProps, NativeProps } from '../types/common';
|
|
3
|
-
export interface CardProps extends BaseProps, NativeProps<'--el-card-border-color' | '--el-card-border-radius' | '--el-card-padding' | '--el-card-bg-color'> {
|
|
3
|
+
export interface CardProps extends BaseProps, NativeProps<'--el-card-border-color' | '--el-card-border-radius' | '--el-card-padding' | '--el-card-bg-color'>, Omit<React.AllHTMLAttributes<HTMLInputElement>, 'style' | 'children'> {
|
|
4
4
|
/** 卡片的标题 你可以通过设置 header 来修改标题 */
|
|
5
5
|
header?: string | React.ReactElement<any>;
|
|
6
6
|
/** 卡片页脚。 你既可以通过设置 footer 来修改卡片底部内容 */
|
|
@@ -16,11 +16,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
16
16
|
import classNames from 'classnames';
|
|
17
17
|
import dayjs from 'dayjs';
|
|
18
18
|
import advancedFormat from 'dayjs/plugin/advancedFormat';
|
|
19
|
+
import quarterOfYear from 'dayjs/plugin/quarterOfYear';
|
|
19
20
|
import weekOfYear from 'dayjs/plugin/weekOfYear';
|
|
20
21
|
import noop from 'lodash/noop';
|
|
21
22
|
import omit from 'lodash/omit';
|
|
22
23
|
import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
24
|
+
import { useTranslation } from 'react-i18next';
|
|
23
25
|
import { Calendar, CalendarContext, initDate, toDayjs } from "../Calendar";
|
|
26
|
+
import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
|
|
24
27
|
import Icon from "../Icon/Icon";
|
|
25
28
|
import Input from "../Input/Input";
|
|
26
29
|
import Popper from "../Popper/Popper";
|
|
@@ -29,6 +32,7 @@ import { partitionAnimationProps, partitionHTMLProps, partitionPopperPropsUtils,
|
|
|
29
32
|
import { namespace } from "../hooks/prefix";
|
|
30
33
|
dayjs.extend(advancedFormat);
|
|
31
34
|
dayjs.extend(weekOfYear);
|
|
35
|
+
dayjs.extend(quarterOfYear);
|
|
32
36
|
var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
|
|
33
37
|
props = mergeDefaultProps({
|
|
34
38
|
readonly: true,
|
|
@@ -67,6 +71,10 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
|
|
|
67
71
|
var currentDate = useRef(null);
|
|
68
72
|
var disabled = useDisabled(props.disabled);
|
|
69
73
|
var size = useSize(props.size);
|
|
74
|
+
var _useConfigProvider = useConfigProvider(),
|
|
75
|
+
locale = _useConfigProvider.locale;
|
|
76
|
+
var _useTranslation = useTranslation(),
|
|
77
|
+
t = _useTranslation.t;
|
|
70
78
|
var _partitionHTMLProps = partitionHTMLProps(rest),
|
|
71
79
|
_partitionHTMLProps2 = _slicedToArray(_partitionHTMLProps, 1),
|
|
72
80
|
htmlInputProps = _partitionHTMLProps2[0];
|
|
@@ -89,6 +97,8 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
|
|
|
89
97
|
return 'YYYY-MM';
|
|
90
98
|
case 'week':
|
|
91
99
|
return 'YYYY[w]ww';
|
|
100
|
+
case 'quarter':
|
|
101
|
+
return 'YYYY-[Q]Q';
|
|
92
102
|
default:
|
|
93
103
|
return 'YYYY-MM-DD';
|
|
94
104
|
}
|
|
@@ -112,22 +122,34 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
|
|
|
112
122
|
} else {
|
|
113
123
|
switch (type) {
|
|
114
124
|
case 'year':
|
|
115
|
-
return '
|
|
125
|
+
return t('el.datepicker.placeholder.year', {
|
|
126
|
+
lng: locale
|
|
127
|
+
});
|
|
116
128
|
case 'month':
|
|
117
|
-
return '
|
|
129
|
+
return t('el.datepicker.placeholder.month', {
|
|
130
|
+
lng: locale
|
|
131
|
+
});
|
|
118
132
|
case 'week':
|
|
119
|
-
return '
|
|
133
|
+
return t('el.datepicker.placeholder.week', {
|
|
134
|
+
lng: locale
|
|
135
|
+
});
|
|
136
|
+
case 'quarter':
|
|
137
|
+
return t('el.datepicker.placeholder.quarter', {
|
|
138
|
+
lng: locale
|
|
139
|
+
});
|
|
120
140
|
default:
|
|
121
|
-
return '
|
|
141
|
+
return t('el.datepicker.placeholder.date', {
|
|
142
|
+
lng: locale
|
|
143
|
+
});
|
|
122
144
|
}
|
|
123
145
|
}
|
|
124
|
-
}, [props.placeholder, type]);
|
|
146
|
+
}, [locale, props.placeholder, t, type]);
|
|
125
147
|
|
|
126
148
|
/** 日期参数转成dayjs对象 */
|
|
127
149
|
var dateProp = useMemo(function () {
|
|
128
150
|
var result = initDate();
|
|
129
151
|
if (isNotEmpty(value)) {
|
|
130
|
-
if (type === 'week') {
|
|
152
|
+
if (type === 'week' || type === 'quarter') {
|
|
131
153
|
if (currentDate.current) {
|
|
132
154
|
result = currentDate.current;
|
|
133
155
|
} else if (value instanceof Date) {
|
|
@@ -148,6 +170,10 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
|
|
|
148
170
|
result = toDayjs(value, (_props$valueFormat2 = props.valueFormat) !== null && _props$valueFormat2 !== void 0 ? _props$valueFormat2 : format);
|
|
149
171
|
}
|
|
150
172
|
}
|
|
173
|
+
if (type === 'quarter') {
|
|
174
|
+
var quarter = result.quarter();
|
|
175
|
+
result = result.month((quarter - 1) * 3).date(1);
|
|
176
|
+
}
|
|
151
177
|
}
|
|
152
178
|
return result;
|
|
153
179
|
}, [format, props.valueFormat, type, value]);
|
|
@@ -178,14 +204,14 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
|
|
|
178
204
|
setValue(val ? val.format(format) : '');
|
|
179
205
|
currentDate.current = val;
|
|
180
206
|
if (valueFormat == 'x') {
|
|
181
|
-
onChange(val ? val.toDate().getTime() : '');
|
|
207
|
+
onChange(val ? val.toDate().getTime() : '', formatValue);
|
|
182
208
|
} else if (isNotEmpty(props.valueFormat)) {
|
|
183
|
-
onChange === null || onChange === void 0 || onChange(val ? val.format(valueFormat) : '');
|
|
209
|
+
onChange === null || onChange === void 0 || onChange(val ? val.format(valueFormat) : '', formatValue);
|
|
184
210
|
} else {
|
|
185
|
-
onChange === null || onChange === void 0 || onChange(val ? val.toDate() : '');
|
|
211
|
+
onChange === null || onChange === void 0 || onChange(val ? val.toDate() : '', formatValue);
|
|
186
212
|
}
|
|
187
213
|
setVisible(false);
|
|
188
|
-
}, [format, onChange, props.valueFormat, setValue, valueFormat]);
|
|
214
|
+
}, [format, formatValue, onChange, props.valueFormat, setValue, valueFormat]);
|
|
189
215
|
useImperativeHandle(ref, function () {
|
|
190
216
|
return {
|
|
191
217
|
input: inputRef,
|
|
@@ -220,7 +246,7 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
|
|
|
220
246
|
onClear: function onClear() {
|
|
221
247
|
return handleChange === null || handleChange === void 0 ? void 0 : handleChange(null);
|
|
222
248
|
},
|
|
223
|
-
className: classNames(_defineProperty(_defineProperty({}, "".concat(namespace, "-date"), readonly), 'is-
|
|
249
|
+
className: classNames(_defineProperty(_defineProperty({}, "".concat(namespace, "-date"), readonly), 'is-focus', visible)),
|
|
224
250
|
style: props.style,
|
|
225
251
|
error: error,
|
|
226
252
|
warning: warning,
|
|
@@ -228,7 +254,7 @@ var DatePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref
|
|
|
228
254
|
append: append,
|
|
229
255
|
plain: plain,
|
|
230
256
|
size: size
|
|
231
|
-
}, omit(htmlInputProps, ['style', 'prefix', 'readOnly', 'size', 'onClick', 'onInput', 'onChange', 'disabled', 'className', 'type', 'maxLength', 'minLength', 'name']))), /*#__PURE__*/React.createElement(Popper, _extends({
|
|
257
|
+
}, omit(htmlInputProps, ['value', 'defaultValue', 'style', 'prefix', 'readOnly', 'size', 'onClick', 'onInput', 'onChange', 'disabled', 'className', 'type', 'maxLength', 'minLength', 'name']))), /*#__PURE__*/React.createElement(Popper, _extends({
|
|
232
258
|
visible: visible,
|
|
233
259
|
referenceElement: function referenceElement() {
|
|
234
260
|
var _inputRef$current;
|
|
@@ -19,7 +19,9 @@ import head from 'lodash/head';
|
|
|
19
19
|
import last from 'lodash/last';
|
|
20
20
|
import noop from 'lodash/noop';
|
|
21
21
|
import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
|
|
22
|
+
import { useTranslation } from 'react-i18next';
|
|
22
23
|
import { Calendar, CalendarContext, initDateRange, toDayjs } from "../Calendar";
|
|
24
|
+
import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
|
|
23
25
|
import Icon from "../Icon/Icon";
|
|
24
26
|
import { InputGroup } from "../Input";
|
|
25
27
|
import Popper from "../Popper/Popper";
|
|
@@ -72,6 +74,10 @@ var DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props
|
|
|
72
74
|
var endInputRef = useRef(null);
|
|
73
75
|
var disabled = useDisabled(props.disabled);
|
|
74
76
|
var size = useSize(props.size);
|
|
77
|
+
var _useConfigProvider = useConfigProvider(),
|
|
78
|
+
locale = _useConfigProvider.locale;
|
|
79
|
+
var _useTranslation = useTranslation(),
|
|
80
|
+
t = _useTranslation.t;
|
|
75
81
|
|
|
76
82
|
/** 没有指定格式时,根据日期类型初始格式 */
|
|
77
83
|
var format = useMemo(function () {
|
|
@@ -110,14 +116,20 @@ var DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props
|
|
|
110
116
|
} else {
|
|
111
117
|
switch (props.type) {
|
|
112
118
|
case 'monthrange':
|
|
113
|
-
return '
|
|
119
|
+
return t('el.datepicker.startMonth', {
|
|
120
|
+
lng: locale
|
|
121
|
+
});
|
|
114
122
|
case 'yearrange':
|
|
115
|
-
return '
|
|
123
|
+
return t('el.datepicker.startYear', {
|
|
124
|
+
lng: locale
|
|
125
|
+
});
|
|
116
126
|
default:
|
|
117
|
-
return '
|
|
127
|
+
return t('el.datepicker.startDate', {
|
|
128
|
+
lng: locale
|
|
129
|
+
});
|
|
118
130
|
}
|
|
119
131
|
}
|
|
120
|
-
}, [props.startPlaceholder, props.type]);
|
|
132
|
+
}, [locale, props.startPlaceholder, props.type, t]);
|
|
121
133
|
|
|
122
134
|
/** 根据日期类型设定占位符 */
|
|
123
135
|
var endPlaceholder = useMemo(function () {
|
|
@@ -126,14 +138,20 @@ var DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props
|
|
|
126
138
|
} else {
|
|
127
139
|
switch (props.type) {
|
|
128
140
|
case 'monthrange':
|
|
129
|
-
return '
|
|
141
|
+
return t('el.datepicker.endMonth', {
|
|
142
|
+
lng: locale
|
|
143
|
+
});
|
|
130
144
|
case 'yearrange':
|
|
131
|
-
return '
|
|
145
|
+
return t('el.datepicker.endYear', {
|
|
146
|
+
lng: locale
|
|
147
|
+
});
|
|
132
148
|
default:
|
|
133
|
-
return '
|
|
149
|
+
return t('el.datepicker.endDate', {
|
|
150
|
+
lng: locale
|
|
151
|
+
});
|
|
134
152
|
}
|
|
135
153
|
}
|
|
136
|
-
}, [props.endPlaceholder, props.type]);
|
|
154
|
+
}, [locale, props.endPlaceholder, props.type, t]);
|
|
137
155
|
|
|
138
156
|
/** 日期参数转成dayjs对象 */
|
|
139
157
|
var dateProp = useMemo(function () {
|
|
@@ -213,7 +231,7 @@ var DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props
|
|
|
213
231
|
var content = useMemo(function () {
|
|
214
232
|
return /*#__PURE__*/React.createElement("div", {
|
|
215
233
|
className: classNames(b('date-editor', 'date-editor--daterange', false), b(_templateObject || (_templateObject = _taggedTemplateLiteral(["editor"]))), be('input', 'wrapper', false), be('tooltip', 'trigger', false), _defineProperty({}, bm('editor', size), size), is({
|
|
216
|
-
|
|
234
|
+
focus: visible,
|
|
217
235
|
disabled: disabled,
|
|
218
236
|
error: error,
|
|
219
237
|
warning: warning
|
package/dist/DatePicker/main.js
CHANGED
|
@@ -6,7 +6,7 @@ import DateRangePicker from "./DateRangePicker";
|
|
|
6
6
|
var Index = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
7
7
|
var _props$type = props.type,
|
|
8
8
|
type = _props$type === void 0 ? 'date' : _props$type;
|
|
9
|
-
if (['year', 'years', 'month', 'months', 'date', 'dates', 'week'].includes(type)) {
|
|
9
|
+
if (['year', 'years', 'month', 'months', 'date', 'dates', 'week', 'quarter'].includes(type)) {
|
|
10
10
|
return /*#__PURE__*/React.createElement(DatePicker, _extends({
|
|
11
11
|
ref: ref
|
|
12
12
|
}, props));
|
|
@@ -53,7 +53,7 @@ export interface DatePickerProps extends Omit<FormControlBaseProps, 'name' | 'va
|
|
|
53
53
|
appendToBody?: boolean;
|
|
54
54
|
/** 点击确定按钮的回调 */
|
|
55
55
|
onOk?: () => void;
|
|
56
|
-
onChange?: (value: string | Date | number,
|
|
56
|
+
onChange?: (value: string | Date | number, formatDate?: string) => void;
|
|
57
57
|
/** 格式化 */
|
|
58
58
|
formatter?: (value: Dayjs, text: number) => React.ReactElement;
|
|
59
59
|
}
|
|
@@ -195,7 +195,7 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
|
|
|
195
195
|
}
|
|
196
196
|
},
|
|
197
197
|
className: classNames(_defineProperty({}, b('date', false), readonly), is({
|
|
198
|
-
|
|
198
|
+
focus: visible
|
|
199
199
|
})),
|
|
200
200
|
style: props.style,
|
|
201
201
|
error: error,
|
|
@@ -203,7 +203,7 @@ var DateTimePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props,
|
|
|
203
203
|
prepend: prepend,
|
|
204
204
|
append: append,
|
|
205
205
|
plain: props.plain
|
|
206
|
-
}, omit(htmlInputProps, ['style', 'prefix', 'readOnly', 'disabled', 'size', 'onInput', 'onClick', 'onChange', 'className', 'type', 'maxLength', 'minLength', 'name']))), /*#__PURE__*/React.createElement(Popper, _extends({
|
|
206
|
+
}, omit(htmlInputProps, ['value', 'defaultValue', 'style', 'prefix', 'readOnly', 'disabled', 'size', 'onInput', 'onClick', 'onChange', 'className', 'type', 'maxLength', 'minLength', 'name']))), /*#__PURE__*/React.createElement(Popper, _extends({
|
|
207
207
|
visible: visible,
|
|
208
208
|
referenceElement: function referenceElement() {
|
|
209
209
|
var _inputRef$current;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React, { RefObject } from 'react';
|
|
2
|
+
import InputRange from './InputRange';
|
|
3
|
+
import TextArea from './TextArea';
|
|
4
|
+
import { InputProps, InputRef } from './typings';
|
|
5
|
+
declare const ForwardInput: (props: InputProps & {
|
|
6
|
+
ref?: RefObject<InputRef> | React.ForwardedRef<InputRef>;
|
|
7
|
+
}) => React.ReactElement;
|
|
8
|
+
type InternalInputType = typeof ForwardInput;
|
|
9
|
+
interface InputInterface extends InternalInputType {
|
|
10
|
+
displayName?: string;
|
|
11
|
+
defaultProps?: Partial<InputProps>;
|
|
12
|
+
TextArea: typeof TextArea;
|
|
13
|
+
Range: typeof InputRange;
|
|
14
|
+
}
|
|
15
|
+
declare const Input: InputInterface;
|
|
16
|
+
export default Input;
|