@trionesdev/antd-taro-react 0.0.2-beta.7 → 0.0.2-beta.8
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/ActionSheet/ActionSheet.d.ts +25 -0
- package/dist/ActionSheet/ActionSheet.js +77 -0
- package/dist/ActionSheet/index.d.ts +1 -1
- package/dist/ActionSheet/index.js +1 -1
- package/dist/ActionSheet/style.scss +52 -0
- package/dist/Calendar/calendar-grid.js +0 -1
- package/dist/Calendar/calendar.js +5 -5
- package/dist/CalendarDatetimePicker/CalendarDatetimePicker.d.ts +4 -4
- package/dist/CalendarDatetimePicker/CalendarDatetimePicker.js +42 -159
- package/dist/CalendarDatetimePicker/style.scss +13 -51
- package/dist/CalendarDatetimePicker/types.d.ts +0 -4
- package/dist/CalendarDatetimePicker/types.js +1 -6
- package/dist/CalendarDatetimePopup/CalendarDatetimePopup.d.ts +10 -0
- package/dist/CalendarDatetimePopup/CalendarDatetimePopup.js +163 -0
- package/dist/CalendarDatetimePopup/index.d.ts +3 -0
- package/dist/CalendarDatetimePopup/index.js +2 -0
- package/dist/CalendarDatetimePopup/style.scss +62 -0
- package/dist/CalendarDatetimePopup/types.d.ts +5 -0
- package/dist/CalendarDatetimePopup/types.js +6 -0
- package/dist/CalendarPopup/CalendarPopup.d.ts +4 -0
- package/dist/{CalendarPicker/calendar-picker.js → CalendarPopup/CalendarPopup.js} +4 -3
- package/dist/CalendarPopup/CalendarRangePopup.d.ts +4 -0
- package/dist/{CalendarPicker/calendar-range-picker.js → CalendarPopup/CalendarRangePopup.js} +5 -4
- package/dist/CalendarPopup/index.d.ts +8 -0
- package/dist/CalendarPopup/index.js +5 -0
- package/dist/{CalendarPicker → CalendarPopup}/style.scss +4 -3
- package/dist/{CalendarPicker → CalendarPopup}/types.d.ts +3 -2
- package/dist/CalendarPopup/types.js +1 -0
- package/dist/CascaderPicker/CascaderPicker.d.ts +25 -0
- package/dist/CascaderPicker/CascaderPicker.js +78 -0
- package/dist/CascaderPicker/index.d.ts +1 -1
- package/dist/CascaderPicker/index.js +1 -1
- package/dist/CascaderPicker/style.scss +24 -0
- package/dist/CascaderPopup/cascader-popup.d.ts +27 -0
- package/dist/CascaderPopup/cascader-popup.js +90 -0
- package/dist/CascaderPopup/index.d.ts +3 -0
- package/dist/CascaderPopup/index.js +2 -0
- package/dist/CascaderPopup/style.scss +45 -0
- package/dist/DatePicker/DatePicker.d.ts +15 -0
- package/dist/DatePicker/DatePicker.js +85 -0
- package/dist/DatePicker/DatePickerPopup.d.ts +18 -0
- package/dist/DatePicker/DatePickerPopup.js +329 -0
- package/dist/DatePicker/index.d.ts +3 -0
- package/dist/DatePicker/index.js +3 -0
- package/dist/DatePicker/style.scss +64 -0
- package/dist/DatePicker/types.d.ts +1 -0
- package/dist/ImagesPreview/ImagesPreview.js +2 -2
- package/dist/Overlay/Overlay.d.ts +16 -0
- package/dist/Overlay/Overlay.js +95 -0
- package/dist/Overlay/index.d.ts +4 -0
- package/dist/Overlay/index.js +3 -0
- package/dist/Overlay/style.scss +20 -0
- package/dist/Picker/Picker.d.ts +19 -0
- package/dist/Picker/Picker.js +75 -0
- package/dist/Picker/index.d.ts +1 -1
- package/dist/Picker/index.js +1 -1
- package/dist/Picker/style.scss +41 -0
- package/dist/PickerView/PickerView.d.ts +4 -0
- package/dist/PickerView/PickerView.js +71 -0
- package/dist/PickerView/index.d.ts +2 -2
- package/dist/PickerView/index.js +1 -1
- package/dist/PickerView/style.scss +13 -0
- package/dist/PickerView/types.d.ts +15 -0
- package/dist/PickerView/types.js +1 -0
- package/dist/Popup/Popup.d.ts +26 -1
- package/dist/Popup/Popup.js +66 -18
- package/dist/Popup/index.d.ts +2 -2
- package/dist/Popup/index.js +1 -0
- package/dist/Popup/style.scss +114 -0
- package/dist/SideBar/side-bar.js +3 -2
- package/dist/Toast/Toast.d.ts +18 -0
- package/dist/Toast/Toast.js +112 -0
- package/dist/Toast/index.d.ts +1 -1
- package/dist/Toast/index.js +1 -1
- package/dist/Toast/style.scss +63 -0
- package/dist/index.d.ts +9 -4
- package/dist/index.js +5 -2
- package/package.json +7 -6
- package/dist/CalendarPicker/calendar-picker.d.ts +0 -4
- package/dist/CalendarPicker/calendar-range-picker.d.ts +0 -4
- package/dist/CalendarPicker/index.d.ts +0 -9
- package/dist/CalendarPicker/index.js +0 -5
- package/dist/Mask/index.d.ts +0 -3
- package/dist/Mask/index.js +0 -2
- /package/dist/{CalendarDatetimePicker → CalendarDatetimePopup}/DateTimeSwitch.d.ts +0 -0
- /package/dist/{CalendarDatetimePicker → CalendarDatetimePopup}/DateTimeSwitch.js +0 -0
- /package/dist/{CalendarPicker → DatePicker}/types.js +0 -0
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React, { FC } from "react";
|
|
2
|
+
import "./style.scss";
|
|
3
|
+
type ActionSheetActionItemType = {
|
|
4
|
+
key?: any;
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
};
|
|
8
|
+
export type ActionSheetProps = {
|
|
9
|
+
className?: string;
|
|
10
|
+
style?: React.CSSProperties;
|
|
11
|
+
open?: boolean;
|
|
12
|
+
afterOpenChange?: (open: boolean) => void;
|
|
13
|
+
title?: React.ReactNode;
|
|
14
|
+
actions?: ActionSheetActionItemType[];
|
|
15
|
+
cancel?: React.ReactNode | false;
|
|
16
|
+
onCancel?: () => void;
|
|
17
|
+
onClose?: () => void;
|
|
18
|
+
/**
|
|
19
|
+
* @description 点击操作项后是否关闭
|
|
20
|
+
* @default true
|
|
21
|
+
*/
|
|
22
|
+
closeAfterClickAction?: boolean;
|
|
23
|
+
};
|
|
24
|
+
export declare const ActionSheet: FC<ActionSheetProps>;
|
|
25
|
+
export {};
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
+
import React from "react";
|
|
8
|
+
import Popup from "../Popup";
|
|
9
|
+
import classNames from "classnames";
|
|
10
|
+
import "./style.scss";
|
|
11
|
+
var cls = 'triones-antm-action-sheet';
|
|
12
|
+
export var ActionSheet = function ActionSheet(_ref) {
|
|
13
|
+
var className = _ref.className,
|
|
14
|
+
style = _ref.style,
|
|
15
|
+
open = _ref.open,
|
|
16
|
+
afterOpenChange = _ref.afterOpenChange,
|
|
17
|
+
title = _ref.title,
|
|
18
|
+
actions = _ref.actions,
|
|
19
|
+
cancel = _ref.cancel,
|
|
20
|
+
onCancel = _ref.onCancel,
|
|
21
|
+
onClose = _ref.onClose,
|
|
22
|
+
_ref$closeAfterClickA = _ref.closeAfterClickAction,
|
|
23
|
+
closeAfterClickAction = _ref$closeAfterClickA === void 0 ? true : _ref$closeAfterClickA;
|
|
24
|
+
var _React$useState = React.useState(open || false),
|
|
25
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
26
|
+
innerOpen = _React$useState2[0],
|
|
27
|
+
setInnerOpen = _React$useState2[1];
|
|
28
|
+
var handleClose = function handleClose() {
|
|
29
|
+
setInnerOpen(false);
|
|
30
|
+
onClose === null || onClose === void 0 || onClose();
|
|
31
|
+
};
|
|
32
|
+
React.useEffect(function () {
|
|
33
|
+
if (open === undefined) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
if (open === innerOpen) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
setInnerOpen(open);
|
|
40
|
+
}, [open]);
|
|
41
|
+
React.useEffect(function () {
|
|
42
|
+
afterOpenChange === null || afterOpenChange === void 0 || afterOpenChange(innerOpen);
|
|
43
|
+
}, [innerOpen]);
|
|
44
|
+
return /*#__PURE__*/React.createElement(Popup, {
|
|
45
|
+
open: open,
|
|
46
|
+
afterClose: function afterClose() {
|
|
47
|
+
setInnerOpen(false);
|
|
48
|
+
}
|
|
49
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
50
|
+
className: classNames(cls, className),
|
|
51
|
+
style: style
|
|
52
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
53
|
+
className: classNames("".concat(cls, "-body"))
|
|
54
|
+
}, title && /*#__PURE__*/React.createElement("div", {
|
|
55
|
+
className: classNames("".concat(cls, "-title"))
|
|
56
|
+
}, title), actions && /*#__PURE__*/React.createElement("div", {
|
|
57
|
+
className: classNames("".concat(cls, "-actions"))
|
|
58
|
+
}, actions.map(function (action) {
|
|
59
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
60
|
+
className: "".concat(cls, "-actions-item"),
|
|
61
|
+
key: action.key,
|
|
62
|
+
onClick: function onClick() {
|
|
63
|
+
var _action$onClick;
|
|
64
|
+
(_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action);
|
|
65
|
+
if (closeAfterClickAction) {
|
|
66
|
+
handleClose();
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}, action.children);
|
|
70
|
+
}))), cancel !== false && /*#__PURE__*/React.createElement("div", {
|
|
71
|
+
className: classNames("".concat(cls, "-cancel")),
|
|
72
|
+
onClick: function onClick() {
|
|
73
|
+
onCancel === null || onCancel === void 0 || onCancel();
|
|
74
|
+
handleClose();
|
|
75
|
+
}
|
|
76
|
+
}, cancel || /*#__PURE__*/React.createElement("div", null, "\u53D6\u6D88"))));
|
|
77
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { ActionSheet } from "
|
|
1
|
+
import { ActionSheet } from "./ActionSheet";
|
|
2
2
|
export default ActionSheet;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
@use "../style/variable" as variable;
|
|
2
|
+
|
|
3
|
+
$actionSheetCls: 'triones-antm-action-sheet';
|
|
4
|
+
|
|
5
|
+
.#{$actionSheetCls} {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
background-color: variable.$trionesColorFill;
|
|
9
|
+
border-top-left-radius: variable.$trionesBorderRadius;
|
|
10
|
+
border-top-right-radius: variable.$trionesBorderRadius;
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
gap: 2Px;
|
|
13
|
+
&-body{
|
|
14
|
+
|
|
15
|
+
}
|
|
16
|
+
&-title{
|
|
17
|
+
display: flex;
|
|
18
|
+
justify-content: center;
|
|
19
|
+
align-items: center;
|
|
20
|
+
min-height: 48Px;
|
|
21
|
+
background-color: white;
|
|
22
|
+
font-size: 18Px;
|
|
23
|
+
border-bottom: 1Px solid variable.$trionesBorderColor;
|
|
24
|
+
}
|
|
25
|
+
&-actions{
|
|
26
|
+
&-item{
|
|
27
|
+
display: flex;
|
|
28
|
+
justify-content: center;
|
|
29
|
+
align-items: center;
|
|
30
|
+
min-height: 48Px;
|
|
31
|
+
background-color: white;
|
|
32
|
+
cursor: default;
|
|
33
|
+
position: relative;
|
|
34
|
+
font-size: 18Px;
|
|
35
|
+
&:hover{
|
|
36
|
+
opacity: 0.8;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
&-cancel{
|
|
41
|
+
display: flex;
|
|
42
|
+
justify-content: center;
|
|
43
|
+
align-items: center;
|
|
44
|
+
min-height: 48Px;
|
|
45
|
+
font-size: 18Px;
|
|
46
|
+
background-color: white;
|
|
47
|
+
cursor: default;
|
|
48
|
+
&:hover{
|
|
49
|
+
opacity: 0.8;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -44,7 +44,6 @@ var CalendarCell = /*#__PURE__*/memo(function (_ref) {
|
|
|
44
44
|
if (range) {
|
|
45
45
|
var startDate = value === null || value === void 0 ? void 0 : value[0];
|
|
46
46
|
var endDate = value === null || value === void 0 ? void 0 : value[1];
|
|
47
|
-
console.log('value', value);
|
|
48
47
|
return date.getTime() === (startDate === null || startDate === void 0 ? void 0 : startDate.getTime()) || date.getTime() === (endDate === null || endDate === void 0 ? void 0 : endDate.getTime());
|
|
49
48
|
} else {
|
|
50
49
|
var _value$3;
|
|
@@ -10,16 +10,16 @@ import React, { forwardRef, memo, useState } from 'react';
|
|
|
10
10
|
import { CalendarHeader } from "./calendar-header";
|
|
11
11
|
import "./style.scss";
|
|
12
12
|
import { TouchableCalendarGrid } from "./touchable-calendar-grid";
|
|
13
|
+
import { cloneDeep } from "lodash-es";
|
|
13
14
|
var calendarCls = 'triones-antm-calendar';
|
|
14
15
|
export var Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
15
|
-
var
|
|
16
|
-
mouth = _ref$mouth === void 0 ? new Date() : _ref$mouth,
|
|
16
|
+
var mouth = _ref.mouth,
|
|
17
17
|
value = _ref.value,
|
|
18
18
|
_onChange = _ref.onChange,
|
|
19
19
|
_onMouthChange = _ref.onMouthChange,
|
|
20
20
|
_ref$slideable = _ref.slideable,
|
|
21
21
|
slideable = _ref$slideable === void 0 ? false : _ref$slideable;
|
|
22
|
-
var _useState = useState(mouth),
|
|
22
|
+
var _useState = useState(mouth || new Date()),
|
|
23
23
|
_useState2 = _slicedToArray(_useState, 2),
|
|
24
24
|
currentMouth = _useState2[0],
|
|
25
25
|
setCurrentMouth = _useState2[1];
|
|
@@ -31,7 +31,7 @@ export var Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref,
|
|
|
31
31
|
onChange: setCurrentMouth
|
|
32
32
|
}), slideable ? /*#__PURE__*/React.createElement(TouchableCalendarGrid, {
|
|
33
33
|
mouth: currentMouth,
|
|
34
|
-
value: value ? [value] : [],
|
|
34
|
+
value: value ? [cloneDeep(value)] : [],
|
|
35
35
|
onMouthChange: function onMouthChange(newMouth) {
|
|
36
36
|
setCurrentMouth(newMouth);
|
|
37
37
|
_onMouthChange === null || _onMouthChange === void 0 || _onMouthChange(newMouth);
|
|
@@ -41,7 +41,7 @@ export var Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref,
|
|
|
41
41
|
}
|
|
42
42
|
}) : /*#__PURE__*/React.createElement(CalendarGrid, {
|
|
43
43
|
mouth: currentMouth,
|
|
44
|
-
value: value ? [value] : [],
|
|
44
|
+
value: value ? [cloneDeep(value)] : [],
|
|
45
45
|
onChange: function onChange(value) {
|
|
46
46
|
_onChange === null || _onChange === void 0 || _onChange(value === null || value === void 0 ? void 0 : value[0]);
|
|
47
47
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import './style.scss';
|
|
3
3
|
export type CalendarDatetimePickerProps = {
|
|
4
|
-
|
|
5
|
-
afterOpenChange?: (open: boolean) => void;
|
|
4
|
+
placeholder?: string;
|
|
6
5
|
value?: Date;
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
format?: string;
|
|
7
|
+
onChange?: (value?: Date) => void;
|
|
8
|
+
align?: 'left' | 'right' | 'center';
|
|
9
9
|
};
|
|
10
10
|
export declare const CalendarDatetimePicker: FC<CalendarDatetimePickerProps>;
|
|
@@ -1,184 +1,67 @@
|
|
|
1
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
|
-
function
|
|
3
|
-
function
|
|
4
|
-
function
|
|
2
|
+
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; }
|
|
3
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
4
|
+
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); }
|
|
5
5
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
6
6
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
7
7
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
8
8
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
9
9
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
10
10
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
-
import { CustomWrapper, PickerView, PickerViewColumn, View } from '@tarojs/components';
|
|
12
|
-
import Taro from '@tarojs/taro';
|
|
13
11
|
import classNames from 'classnames';
|
|
14
|
-
import React, { useEffect,
|
|
15
|
-
import Calendar from "../Calendar";
|
|
16
|
-
import ConfigProvider from "../ConfigProvider";
|
|
17
|
-
import { useTaro } from "../hooks";
|
|
18
|
-
import Popup from "../Popup";
|
|
19
|
-
import { DateTimeSwitch } from "./DateTimeSwitch";
|
|
12
|
+
import React, { useEffect, useState } from 'react';
|
|
20
13
|
import "./style.scss";
|
|
21
|
-
import { cls
|
|
22
|
-
import
|
|
14
|
+
import { cls } from "./types";
|
|
15
|
+
import CalendarDatetimePopup from "../CalendarDatetimePopup";
|
|
16
|
+
import dayjs from "dayjs";
|
|
23
17
|
export var CalendarDatetimePicker = function CalendarDatetimePicker(_ref) {
|
|
24
|
-
var
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
_ref$
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
var _useTaro = useTaro(),
|
|
34
|
-
isTaroEnv = _useTaro.isTaroEnv,
|
|
35
|
-
isTaroWeApp = _useTaro.isTaroWeApp;
|
|
36
|
-
var _React$useState = React.useState(open || false),
|
|
18
|
+
var _ref$placeholder = _ref.placeholder,
|
|
19
|
+
placeholder = _ref$placeholder === void 0 ? '请选择' : _ref$placeholder,
|
|
20
|
+
value = _ref.value,
|
|
21
|
+
_ref$format = _ref.format,
|
|
22
|
+
format = _ref$format === void 0 ? 'YYYY-MM-DD HH:mm' : _ref$format,
|
|
23
|
+
onChange = _ref.onChange,
|
|
24
|
+
_ref$align = _ref.align,
|
|
25
|
+
align = _ref$align === void 0 ? 'left' : _ref$align;
|
|
26
|
+
var _React$useState = React.useState(false),
|
|
37
27
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
38
28
|
innerOpen = _React$useState2[0],
|
|
39
29
|
setInnerOpen = _React$useState2[1];
|
|
40
|
-
var _useState = useState(
|
|
30
|
+
var _useState = useState(value),
|
|
41
31
|
_useState2 = _slicedToArray(_useState, 2),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
var
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
var _useState3 = useState(300),
|
|
48
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
49
|
-
bodyHeight = _useState4[0],
|
|
50
|
-
setBodyHeight = _useState4[1];
|
|
51
|
-
var handleClose = function handleClose() {
|
|
52
|
-
setInnerOpen(false);
|
|
53
|
-
_onClose === null || _onClose === void 0 || _onClose();
|
|
54
|
-
};
|
|
55
|
-
var handleOk = function handleOk() {
|
|
56
|
-
onOk === null || onOk === void 0 || onOk(valueRef.current);
|
|
57
|
-
handleClose();
|
|
58
|
-
};
|
|
59
|
-
var handleComputeBodyHeight = /*#__PURE__*/function () {
|
|
60
|
-
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
|
|
61
|
-
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
62
|
-
while (1) switch (_context.prev = _context.next) {
|
|
63
|
-
case 0:
|
|
64
|
-
if (!(isTaroEnv && isTaroWeApp)) {
|
|
65
|
-
_context.next = 2;
|
|
66
|
-
break;
|
|
67
|
-
}
|
|
68
|
-
return _context.abrupt("return", new Promise(function (resolve) {
|
|
69
|
-
Taro.createSelectorQuery().in(bodyRef.current.ctx).select(".".concat(cls, "-body")).boundingClientRect()
|
|
70
|
-
// .fields({ node: true, size: true })
|
|
71
|
-
.exec(function (res) {
|
|
72
|
-
var _res$;
|
|
73
|
-
console.log(res);
|
|
74
|
-
resolve(res === null || res === void 0 || (_res$ = res[0]) === null || _res$ === void 0 ? void 0 : _res$.height);
|
|
75
|
-
});
|
|
76
|
-
}));
|
|
77
|
-
case 2:
|
|
78
|
-
return _context.abrupt("return", Promise.resolve(bodyRef.current.offsetHeight));
|
|
79
|
-
case 3:
|
|
80
|
-
case "end":
|
|
81
|
-
return _context.stop();
|
|
82
|
-
}
|
|
83
|
-
}, _callee);
|
|
84
|
-
}));
|
|
85
|
-
return function handleComputeBodyHeight() {
|
|
86
|
-
return _ref2.apply(this, arguments);
|
|
87
|
-
};
|
|
88
|
-
}();
|
|
89
|
-
useEffect(function () {
|
|
90
|
-
afterOpenChange === null || afterOpenChange === void 0 || afterOpenChange(innerOpen);
|
|
91
|
-
if (!innerOpen) {
|
|
92
|
-
_onClose === null || _onClose === void 0 || _onClose();
|
|
32
|
+
internalValue = _useState2[0],
|
|
33
|
+
setInternalValue = _useState2[1];
|
|
34
|
+
var handleValueRender = function handleValueRender() {
|
|
35
|
+
if (internalValue) {
|
|
36
|
+
return dayjs(internalValue).format(format);
|
|
93
37
|
}
|
|
94
|
-
|
|
38
|
+
return null;
|
|
39
|
+
};
|
|
95
40
|
useEffect(function () {
|
|
96
|
-
if (
|
|
41
|
+
if (value === undefined) {
|
|
97
42
|
return;
|
|
98
43
|
}
|
|
99
|
-
if (
|
|
100
|
-
|
|
44
|
+
if (value !== internalValue) {
|
|
45
|
+
setInternalValue(value);
|
|
101
46
|
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
useEffect(function () {
|
|
105
|
-
if (datetimeSwitchRef.current) {
|
|
106
|
-
datetimeSwitchRef.current.setDatetime(valueRef.current);
|
|
107
|
-
}
|
|
108
|
-
}, []);
|
|
109
|
-
var bodyRender = function bodyRender() {
|
|
110
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, mode === Mode.date && /*#__PURE__*/React.createElement("div", {
|
|
111
|
-
style: {}
|
|
112
|
-
}, /*#__PURE__*/React.createElement(Calendar, {
|
|
113
|
-
mouth: value,
|
|
114
|
-
value: value,
|
|
115
|
-
onChange: function onChange(date) {
|
|
116
|
-
var _datetimeSwitchRef$cu;
|
|
117
|
-
valueRef.current = new Date(date.getFullYear(), date.getMonth(), date.getDate(), valueRef.current.getHours(), valueRef.current.getMinutes());
|
|
118
|
-
(_datetimeSwitchRef$cu = datetimeSwitchRef.current) === null || _datetimeSwitchRef$cu === void 0 || _datetimeSwitchRef$cu.setDatetime(valueRef.current);
|
|
119
|
-
}
|
|
120
|
-
})), mode === Mode.time && /*#__PURE__*/React.createElement("div", {
|
|
121
|
-
style: {
|
|
122
|
-
height: bodyHeight
|
|
123
|
-
}
|
|
124
|
-
}, /*#__PURE__*/React.createElement(PickerView, {
|
|
125
|
-
className: "time-picker",
|
|
126
|
-
indicatorStyle: "height: 32Px;",
|
|
127
|
-
style: {
|
|
128
|
-
height: bodyHeight
|
|
129
|
-
},
|
|
130
|
-
value: [valueRef === null || valueRef === void 0 ? void 0 : valueRef.current.getHours(), valueRef === null || valueRef === void 0 ? void 0 : valueRef.current.getMinutes()],
|
|
131
|
-
onChange: function onChange(e) {
|
|
132
|
-
var _datetimeSwitchRef$cu2;
|
|
133
|
-
var v = e.detail.value;
|
|
134
|
-
valueRef.current = new Date(valueRef.current.getFullYear(), valueRef.current.getMonth(), valueRef.current.getDate(), v[0], v[1]);
|
|
135
|
-
(_datetimeSwitchRef$cu2 = datetimeSwitchRef.current) === null || _datetimeSwitchRef$cu2 === void 0 || _datetimeSwitchRef$cu2.setDatetime(valueRef.current);
|
|
136
|
-
}
|
|
137
|
-
}, /*#__PURE__*/React.createElement(PickerViewColumn, null, Array(24).fill(0).map(function (_, i) {
|
|
138
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
139
|
-
key: "hour-".concat(i),
|
|
140
|
-
className: "time-item"
|
|
141
|
-
}, DatetimeUtils.twoDigits(i));
|
|
142
|
-
})), /*#__PURE__*/React.createElement(PickerViewColumn, null, Array(60).fill(0).map(function (_, i) {
|
|
143
|
-
return /*#__PURE__*/React.createElement(View, {
|
|
144
|
-
key: "minute-".concat(i),
|
|
145
|
-
className: "time-item"
|
|
146
|
-
}, DatetimeUtils.twoDigits(i));
|
|
147
|
-
})))));
|
|
148
|
-
};
|
|
149
|
-
return /*#__PURE__*/React.createElement(Popup, {
|
|
47
|
+
}, [value]);
|
|
48
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CalendarDatetimePopup, {
|
|
150
49
|
open: innerOpen,
|
|
50
|
+
value: internalValue,
|
|
151
51
|
onClose: function onClose() {
|
|
152
52
|
setInnerOpen(false);
|
|
153
|
-
_onClose === null || _onClose === void 0 || _onClose();
|
|
154
|
-
}
|
|
155
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
156
|
-
className: classNames(cls)
|
|
157
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
158
|
-
className: "".concat(cls, "-header")
|
|
159
|
-
}, /*#__PURE__*/React.createElement(DateTimeSwitch, {
|
|
160
|
-
ref: datetimeSwitchRef,
|
|
161
|
-
mode: mode,
|
|
162
|
-
value: valueRef.current,
|
|
163
|
-
onDateTabTap: function onDateTabTap() {
|
|
164
|
-
return setMode(Mode.date);
|
|
165
53
|
},
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
54
|
+
onOk: function onOk(date) {
|
|
55
|
+
setInternalValue(date);
|
|
56
|
+
setInnerOpen(false);
|
|
57
|
+
onChange === null || onChange === void 0 || onChange(date);
|
|
58
|
+
}
|
|
59
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
60
|
+
className: classNames(cls, _defineProperty({}, "".concat(cls, "-").concat(align), true)),
|
|
61
|
+
onClick: function onClick() {
|
|
62
|
+
setInnerOpen(true);
|
|
171
63
|
}
|
|
172
|
-
}
|
|
173
|
-
className:
|
|
174
|
-
|
|
175
|
-
}, locale.common.confirm)), isTaroEnv ? /*#__PURE__*/React.createElement(CustomWrapper, {
|
|
176
|
-
ref: bodyRef
|
|
177
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
178
|
-
className: "".concat(cls, "-body")
|
|
179
|
-
}, bodyRender())) : /*#__PURE__*/React.createElement("div", {
|
|
180
|
-
className: "".concat(cls, "-body"),
|
|
181
|
-
ref: bodyRef,
|
|
182
|
-
id: (_bodyRef$current = bodyRef.current) === null || _bodyRef$current === void 0 ? void 0 : _bodyRef$current.uid
|
|
183
|
-
}, bodyRender())));
|
|
64
|
+
}, !internalValue ? /*#__PURE__*/React.createElement("div", {
|
|
65
|
+
className: "".concat(cls, "-placeholder")
|
|
66
|
+
}, placeholder) : /*#__PURE__*/React.createElement("div", null, handleValueRender())));
|
|
184
67
|
};
|
|
@@ -1,62 +1,24 @@
|
|
|
1
1
|
@use "../style/variable" as variable;
|
|
2
|
-
|
|
3
2
|
$calendarDatetimePickerCls: 'triones-antm-calendar-datetime-picker';
|
|
4
3
|
|
|
5
4
|
.#{$calendarDatetimePickerCls} {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
&-header {
|
|
10
|
-
display: flex;
|
|
11
|
-
justify-content: space-between;
|
|
12
|
-
border-bottom: 1Px solid variable.$trionesBorderColor;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
&-display {
|
|
16
|
-
display: flex;
|
|
17
|
-
padding-left: 8Px;
|
|
18
|
-
|
|
19
|
-
&-date {
|
|
20
|
-
padding-inline: 8Px;
|
|
21
|
-
cursor: default;
|
|
22
|
-
display: flex;
|
|
23
|
-
align-items: center;
|
|
24
|
-
}
|
|
5
|
+
width: 100%;
|
|
6
|
+
line-height: 1.4;
|
|
7
|
+
display: flex;
|
|
25
8
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
align-items: center;
|
|
30
|
-
cursor: default;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
&-active {
|
|
34
|
-
color: variable.$trionesColorText;
|
|
35
|
-
font-weight: bold;
|
|
36
|
-
background-color: variable.$trionesColorBgTextActive;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
&-button {
|
|
41
|
-
padding: 12Px 16Px;
|
|
9
|
+
&-left {
|
|
10
|
+
justify-content: flex-start;
|
|
11
|
+
}
|
|
42
12
|
|
|
43
|
-
|
|
13
|
+
&-center {
|
|
14
|
+
justify-content: center;
|
|
15
|
+
}
|
|
44
16
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
}
|
|
17
|
+
&-right {
|
|
18
|
+
justify-content: flex-end;
|
|
49
19
|
}
|
|
50
20
|
|
|
51
|
-
&-
|
|
52
|
-
|
|
53
|
-
.time-item {
|
|
54
|
-
flex-shrink: 0;
|
|
55
|
-
display: flex;
|
|
56
|
-
align-items: center;
|
|
57
|
-
justify-content: center;
|
|
58
|
-
height: 32Px;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
21
|
+
&-placeholder {
|
|
22
|
+
color: variable.$trionesColorTextPlaceholder;
|
|
61
23
|
}
|
|
62
24
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import './style.scss';
|
|
3
|
+
export type CalendarDatetimePopupProps = {
|
|
4
|
+
open?: boolean;
|
|
5
|
+
afterOpenChange?: (open: boolean) => void;
|
|
6
|
+
value?: Date;
|
|
7
|
+
onOk?: (value?: Date) => void;
|
|
8
|
+
onClose?: () => void;
|
|
9
|
+
};
|
|
10
|
+
export declare const CalendarDatetimePopup: FC<CalendarDatetimePopupProps>;
|