@trionesdev/antd-mobile-react 0.0.2-beta.0 → 0.0.2-beta.10
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/LICENSE +21 -21
- 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/Avatar/demo/base.js +2 -2
- package/dist/Avatar/demo/style.scss +6 -6
- package/dist/Badge/demo/base.js +2 -2
- package/dist/Badge/demo/base.scss +6 -6
- package/dist/Button/demo/base.js +2 -2
- package/dist/Button/style.scss +234 -231
- package/dist/Calendar/calendar-grid.js +2 -2
- package/dist/Calendar/calendar-range.js +2 -2
- package/dist/Calendar/calendar.js +2 -1
- package/dist/Calendar/style.scss +85 -85
- package/dist/Calendar/touchable-calendar-grid.js +9 -9
- package/dist/CalendarDatetimePicker/CalendarDatetimePicker.d.ts +5 -6
- package/dist/CalendarDatetimePicker/CalendarDatetimePicker.js +37 -132
- package/dist/CalendarDatetimePicker/demo/base.js +5 -21
- package/dist/CalendarDatetimePicker/index.d.ts +2 -2
- package/dist/CalendarDatetimePicker/style.scss +10 -54
- 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 +136 -0
- package/dist/CalendarDatetimePopup/demo/base.js +41 -0
- package/dist/CalendarDatetimePopup/index.d.ts +3 -0
- package/dist/CalendarDatetimePopup/index.js +2 -0
- package/dist/CalendarDatetimePopup/style.scss +54 -0
- package/dist/CalendarDatetimePopup/types.d.ts +5 -0
- package/dist/CalendarDatetimePopup/types.js +6 -0
- package/dist/CalendarPopup/calendar-popup.d.ts +4 -0
- package/dist/{CalendarPicker/calendar-picker.js → CalendarPopup/calendar-popup.js} +2 -2
- package/dist/CalendarPopup/calendar-range-popup.d.ts +4 -0
- package/dist/{CalendarPicker/calendar-range-picker.js → CalendarPopup/calendar-range-popup.js} +8 -7
- package/dist/{CalendarPicker → CalendarPopup}/demo/base.js +3 -3
- package/dist/CalendarPopup/index.d.ts +9 -0
- package/dist/CalendarPopup/index.js +5 -0
- package/dist/CalendarPopup/style.scss +31 -0
- package/dist/{CalendarPicker → CalendarPopup}/types.d.ts +2 -2
- package/dist/Card/demo/base.js +2 -2
- package/dist/Card/demo/base.scss +18 -18
- package/dist/CascaderPicker/CascaderPicker.d.ts +25 -0
- package/dist/CascaderPicker/CascaderPicker.js +78 -0
- package/dist/CascaderPicker/demo/base.js +6 -18
- 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/demo/base.d.ts +3 -0
- package/dist/CascaderPopup/demo/base.js +82 -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/Cell/demo/base.js +41 -2
- package/dist/Checkbox/demo/base.js +11 -6
- package/dist/Checkbox/demo/disabled.js +2 -1
- package/dist/ConfigProvider/demo/base.js +2 -2
- package/dist/DemoBlock/index.d.ts +6 -0
- package/dist/DemoBlock/index.js +9 -2
- package/dist/DemoBlock/index.scss +20 -20
- package/dist/DemoDescription/index.scss +3 -3
- package/dist/Divider/demo/base.js +2 -2
- package/dist/Ellipsis/demo/base.js +2 -2
- package/dist/Empty/demo/base.js +2 -2
- package/dist/ErrorBlock/demo/base.js +2 -2
- package/dist/Footer/demo/base.js +2 -2
- package/dist/Form/FormItem/form-item-input.d.ts +15 -0
- package/dist/Form/FormItem/form-item-input.js +39 -0
- package/dist/Form/FormItem/form-item-label.d.ts +13 -0
- package/dist/Form/FormItem/form-item-label.js +27 -0
- package/dist/Form/FormItem/form-item.d.ts +22 -0
- package/dist/Form/FormItem/form-item.js +73 -0
- package/dist/Form/FormItem/index.d.ts +5 -0
- package/dist/Form/FormItem/index.js +3 -0
- package/dist/Form/demo/input.js +1 -1
- package/dist/Form/index.d.ts +8 -1
- package/dist/Form/index.js +5 -1
- package/dist/Form/style.scss +67 -0
- package/dist/Grid/demo/base.js +2 -2
- package/dist/Grid/demo/base.scss +7 -7
- package/dist/Icon/demo/base.js +4 -4
- package/dist/Image/demo/base.js +2 -2
- package/dist/Image/demo/base.scss +4 -4
- package/dist/Image/style.scss +30 -30
- package/dist/ImagesPreview/ImagesPreview.js +2 -2
- package/dist/ImagesPreview/style.scss +34 -34
- package/dist/ImagesWall/CameraModal.js +2 -2
- package/dist/ImagesWall/ImagesWall.js +1 -1
- package/dist/ImagesWall/style.scss +70 -70
- package/dist/Input/base-input.d.ts +13 -0
- package/dist/Input/base-input.js +41 -0
- package/dist/Input/demo/base.js +89 -13
- package/dist/Input/index.d.ts +14 -2
- package/dist/Input/index.js +11 -1
- package/dist/Input/index.scss +223 -0
- package/dist/Input/input-affix-wrapper.d.ts +11 -0
- package/dist/Input/input-affix-wrapper.js +37 -0
- package/dist/Input/input-opt.d.ts +16 -0
- package/dist/Input/input-opt.js +87 -0
- package/dist/Input/input-password.d.ts +7 -0
- package/dist/Input/input-password.js +48 -0
- package/dist/Input/input.d.ts +18 -0
- package/dist/Input/input.js +63 -0
- package/dist/Input/textarea.d.ts +15 -0
- package/dist/Input/textarea.js +51 -0
- package/dist/Input/types.d.ts +3 -0
- package/dist/Input/types.js +2 -0
- package/dist/NavBar/demo/base.scss +5 -5
- package/dist/NoticeBar/demo/base.js +2 -2
- package/dist/Overlay/Overlay.d.ts +16 -0
- package/dist/Overlay/Overlay.js +117 -0
- package/dist/Overlay/demo/base.d.ts +3 -0
- package/dist/{Mask → Overlay}/demo/base.js +14 -16
- package/dist/Overlay/index.d.ts +4 -0
- package/dist/Overlay/index.js +3 -0
- package/dist/Overlay/style.scss +20 -0
- package/dist/PageIndicator/demo/base.js +2 -2
- package/dist/Picker/index.d.ts +1 -1
- package/dist/Picker/index.js +1 -1
- package/dist/Picker/picker.d.ts +19 -0
- package/dist/Picker/picker.js +97 -0
- package/dist/Picker/style.scss +44 -0
- package/dist/PickerView/index.d.ts +2 -1
- package/dist/PickerView/index.js +1 -1
- package/dist/PickerView/picker-view-column-item.d.ts +7 -0
- package/dist/PickerView/picker-view-column-item.js +11 -0
- package/dist/PickerView/picker-view-column.d.ts +10 -0
- package/dist/PickerView/picker-view-column.js +117 -0
- package/dist/PickerView/picker-view.d.ts +12 -0
- package/dist/PickerView/picker-view.js +60 -0
- package/dist/PickerView/style.scss +72 -0
- package/dist/PickerView/types.d.ts +4 -0
- package/dist/PickerView/types.js +1 -0
- package/dist/Popup/demo/base.js +109 -27
- package/dist/Popup/index.d.ts +2 -1
- package/dist/Popup/index.js +2 -1
- package/dist/Popup/popup.d.ts +31 -0
- package/dist/Popup/popup.js +87 -0
- package/dist/Popup/style.scss +129 -0
- package/dist/Progress/index.d.ts +1 -1
- package/dist/Progress/index.js +1 -1
- package/dist/Radio/demo/base.js +2 -2
- package/dist/Radio/demo/base.scss +4 -4
- package/dist/Result/demo/base.js +2 -2
- package/dist/SafeArea/demo/base.scss +18 -18
- package/dist/ScrollView/index.d.ts +2 -1
- package/dist/ScrollView/index.js +1 -1
- package/dist/ScrollView/scroll-view.d.ts +4 -0
- package/dist/ScrollView/scroll-view.js +55 -0
- package/dist/ScrollView/style.scss +19 -0
- package/dist/ScrollView/types.d.ts +26 -0
- package/dist/ScrollView/types.js +1 -0
- package/dist/SideBar/index.d.ts +1 -1
- package/dist/SideBar/side-bar.js +6 -6
- package/dist/SideBar/style.scss +85 -85
- package/dist/Space/demo/base.js +2 -2
- package/dist/Swiper/style.scss +54 -54
- package/dist/Switch/demo/base.js +2 -2
- package/dist/TabBar/demo/base.js +2 -2
- package/dist/Tag/demo/base.js +2 -2
- package/dist/Tag/demo/style.scss +8 -8
- package/dist/Toast/style.scss +63 -63
- package/dist/Toast/toast-modal.js +4 -4
- package/dist/VerificationCodeInput/demo/base.js +2 -2
- package/dist/VerificationCodeInput/index.d.ts +2 -2
- package/dist/VerificationCodeInput/index.js +1 -1
- package/dist/VerificationCodeInput/style.scss +20 -0
- package/dist/VerificationCodeInput/verification-code-input.d.ts +24 -0
- package/dist/VerificationCodeInput/verification-code-input.js +99 -0
- package/dist/WaterMark/demo/demo1.js +2 -2
- package/dist/WaterMark/demo/demo1.scss +6 -6
- package/dist/WaterMark/demo/demo2.js +2 -2
- package/dist/index.d.ts +9 -7
- package/dist/index.js +4 -3
- package/dist/style/variable.scss +1 -0
- package/dist/types.d.ts +0 -8
- package/dist/types.js +0 -1
- package/dist/utils/type.js +36 -36
- package/dist/utils/use-isomorphic-update-layout-effect.d.ts +1 -1
- package/dist/utils/with-default-props.js +4 -4
- package/package.json +13 -14
- package/readme.md +43 -43
- 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/CalendarPicker/style.scss +0 -31
- package/dist/Mask/index.d.ts +0 -3
- package/dist/Mask/index.js +0 -2
- package/dist/Progress/Progress.d.ts +0 -37
- package/dist/Progress/Progress.js +0 -52
- package/dist/Progress/ProgressCircle.d.ts +0 -17
- package/dist/Progress/ProgressCircle.js +0 -148
- package/dist/Progress/ProgressLine.d.ts +0 -15
- package/dist/Progress/ProgressLine.js +0 -87
- package/dist/Progress/style.scss +0 -33
- package/dist/Progress/types.d.ts +0 -4
- package/dist/Progress/types.js +0 -2
- /package/dist/{CalendarDatetimePicker → CalendarDatetimePopup}/DateTimeSwitch.d.ts +0 -0
- /package/dist/{CalendarDatetimePicker → CalendarDatetimePopup}/DateTimeSwitch.js +0 -0
- /package/dist/{CalendarPicker → CalendarDatetimePopup}/demo/base.d.ts +0 -0
- /package/dist/{Mask → CalendarPopup}/demo/base.d.ts +0 -0
- /package/dist/{CalendarPicker → CalendarPopup}/types.js +0 -0
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
|
+
import './index.scss';
|
|
3
|
+
import { variantType } from './types';
|
|
4
|
+
export type InputTextareaProps = {
|
|
5
|
+
className?: string;
|
|
6
|
+
style?: React.CSSProperties;
|
|
7
|
+
placeholder?: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
allowClear?: boolean;
|
|
10
|
+
variant?: variantType;
|
|
11
|
+
rows?: number;
|
|
12
|
+
value?: any;
|
|
13
|
+
onChange?: (e: any) => void;
|
|
14
|
+
};
|
|
15
|
+
export declare const Textarea: FC<InputTextareaProps>;
|
|
@@ -0,0 +1,51 @@
|
|
|
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 _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
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
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
|
+
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
|
+
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
|
+
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
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
+
import React, { useEffect } from 'react';
|
|
12
|
+
import "./index.scss";
|
|
13
|
+
import { inputCls } from "./types";
|
|
14
|
+
import classNames from 'classnames';
|
|
15
|
+
export var Textarea = function Textarea(_ref) {
|
|
16
|
+
var className = _ref.className,
|
|
17
|
+
style = _ref.style,
|
|
18
|
+
placeholder = _ref.placeholder,
|
|
19
|
+
disabled = _ref.disabled,
|
|
20
|
+
allowClear = _ref.allowClear,
|
|
21
|
+
_ref$variant = _ref.variant,
|
|
22
|
+
variant = _ref$variant === void 0 ? 'borderless' : _ref$variant,
|
|
23
|
+
rows = _ref.rows,
|
|
24
|
+
value = _ref.value,
|
|
25
|
+
onChange = _ref.onChange;
|
|
26
|
+
var _React$useState = React.useState(value),
|
|
27
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
28
|
+
internalValue = _React$useState2[0],
|
|
29
|
+
setInternalValue = _React$useState2[1];
|
|
30
|
+
useEffect(function () {
|
|
31
|
+
if (value === undefined) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
if (value === internalValue) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
setInternalValue(value);
|
|
38
|
+
}, [value]);
|
|
39
|
+
return /*#__PURE__*/React.createElement("textarea", {
|
|
40
|
+
className: classNames("".concat(inputCls, "-textarea"), _defineProperty({}, "".concat(inputCls, "-").concat(variant), variant), className),
|
|
41
|
+
style: style,
|
|
42
|
+
placeholder: placeholder,
|
|
43
|
+
disabled: disabled,
|
|
44
|
+
rows: rows,
|
|
45
|
+
value: internalValue,
|
|
46
|
+
onInput: function onInput(e) {
|
|
47
|
+
setInternalValue(e.target.value);
|
|
48
|
+
onChange === null || onChange === void 0 || onChange(e.target.value);
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
.my-nav-bar {
|
|
2
|
-
&-subtitle {
|
|
3
|
-
font-size: 12px;
|
|
4
|
-
}
|
|
5
|
-
}
|
|
1
|
+
.my-nav-bar {
|
|
2
|
+
&-subtitle {
|
|
3
|
+
font-size: 12px;
|
|
4
|
+
}
|
|
5
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React, { FC, PropsWithChildren } from 'react';
|
|
2
|
+
export type OverlayProps = {
|
|
3
|
+
className?: string;
|
|
4
|
+
style?: React.CSSProperties;
|
|
5
|
+
open: boolean;
|
|
6
|
+
zIndex?: number;
|
|
7
|
+
closeOnOverlayClick?: boolean;
|
|
8
|
+
destroyOnHidden?: boolean;
|
|
9
|
+
onClick?: (e: any) => void;
|
|
10
|
+
onClose?: () => void;
|
|
11
|
+
afterClose?: () => void;
|
|
12
|
+
afterOpenChange?: (open: boolean) => void;
|
|
13
|
+
duration?: number;
|
|
14
|
+
getContainer?: () => HTMLElement;
|
|
15
|
+
};
|
|
16
|
+
export declare const Overlay: FC<PropsWithChildren<OverlayProps>>;
|
|
@@ -0,0 +1,117 @@
|
|
|
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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
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
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
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
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
|
+
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."); }
|
|
9
|
+
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); }
|
|
10
|
+
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; }
|
|
11
|
+
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; } }
|
|
12
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
+
import classNames from 'classnames';
|
|
14
|
+
import React, { useEffect, useState } from 'react';
|
|
15
|
+
import { createPortal } from 'react-dom';
|
|
16
|
+
var cls = 'triones-antm-overlay';
|
|
17
|
+
export var Overlay = function Overlay(_ref) {
|
|
18
|
+
var children = _ref.children,
|
|
19
|
+
className = _ref.className,
|
|
20
|
+
style = _ref.style,
|
|
21
|
+
open = _ref.open,
|
|
22
|
+
_ref$zIndex = _ref.zIndex,
|
|
23
|
+
zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
|
|
24
|
+
_ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
|
|
25
|
+
closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
|
|
26
|
+
_ref$destroyOnHidden = _ref.destroyOnHidden,
|
|
27
|
+
destroyOnHidden = _ref$destroyOnHidden === void 0 ? false : _ref$destroyOnHidden,
|
|
28
|
+
onClick = _ref.onClick,
|
|
29
|
+
onClose = _ref.onClose,
|
|
30
|
+
afterClose = _ref.afterClose,
|
|
31
|
+
afterOpenChange = _ref.afterOpenChange,
|
|
32
|
+
_ref$duration = _ref.duration,
|
|
33
|
+
duration = _ref$duration === void 0 ? 300 : _ref$duration,
|
|
34
|
+
getContainer = _ref.getContainer;
|
|
35
|
+
var mountRef = React.useRef(null);
|
|
36
|
+
var rootContainer = (getContainer === null || getContainer === void 0 ? void 0 : getContainer()) || document.body;
|
|
37
|
+
var _useState = useState(false),
|
|
38
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
39
|
+
active = _useState2[0],
|
|
40
|
+
setActive = _useState2[1];
|
|
41
|
+
var _useState3 = useState(open),
|
|
42
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
43
|
+
render = _useState4[0],
|
|
44
|
+
setRender = _useState4[1];
|
|
45
|
+
var _useState5 = useState(open),
|
|
46
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
47
|
+
internalOpen = _useState6[0],
|
|
48
|
+
setInternalOpen = _useState6[1];
|
|
49
|
+
var handleDestroy = function handleDestroy() {
|
|
50
|
+
if (rootContainer && mountRef.current) {
|
|
51
|
+
rootContainer.removeChild(mountRef.current);
|
|
52
|
+
}
|
|
53
|
+
mountRef.current = null;
|
|
54
|
+
};
|
|
55
|
+
var handleClose = function handleClose() {
|
|
56
|
+
setInternalOpen(false);
|
|
57
|
+
onClose === null || onClose === void 0 || onClose();
|
|
58
|
+
if (destroyOnHidden) {
|
|
59
|
+
handleDestroy();
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
var handleClick = function handleClick(e) {
|
|
63
|
+
// 只在点击遮罩层本身时触发,忽略子元素冒泡上来的点击
|
|
64
|
+
if (e.target === e.currentTarget) {
|
|
65
|
+
onClick === null || onClick === void 0 || onClick(e);
|
|
66
|
+
if (closeOnOverlayClick) {
|
|
67
|
+
handleClose();
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
useEffect(function () {
|
|
72
|
+
if (open === undefined) {
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
if (open !== internalOpen) {
|
|
76
|
+
setInternalOpen(open);
|
|
77
|
+
}
|
|
78
|
+
}, [open]);
|
|
79
|
+
useEffect(function () {
|
|
80
|
+
if (internalOpen) {
|
|
81
|
+
setRender(true);
|
|
82
|
+
afterOpenChange === null || afterOpenChange === void 0 || afterOpenChange(true);
|
|
83
|
+
// Next tick to allow render before transition
|
|
84
|
+
var timer = setTimeout(function () {
|
|
85
|
+
setActive(true);
|
|
86
|
+
}, 50);
|
|
87
|
+
return function () {
|
|
88
|
+
return clearTimeout(timer);
|
|
89
|
+
};
|
|
90
|
+
} else {
|
|
91
|
+
setActive(false);
|
|
92
|
+
afterOpenChange === null || afterOpenChange === void 0 || afterOpenChange(false);
|
|
93
|
+
var _timer = setTimeout(function () {
|
|
94
|
+
setRender(false);
|
|
95
|
+
afterClose === null || afterClose === void 0 || afterClose();
|
|
96
|
+
}, duration);
|
|
97
|
+
return function () {
|
|
98
|
+
return clearTimeout(_timer);
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
}, [internalOpen, duration]);
|
|
102
|
+
if (!render) return null;
|
|
103
|
+
if (render) {
|
|
104
|
+
if (!mountRef.current) {
|
|
105
|
+
mountRef.current = document.createElement('div');
|
|
106
|
+
rootContainer === null || rootContainer === void 0 || rootContainer.appendChild(mountRef.current);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
return render && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
|
|
110
|
+
className: classNames(cls, _defineProperty({}, "".concat(cls, "-active"), active), className),
|
|
111
|
+
onClick: handleClick,
|
|
112
|
+
style: _objectSpread(_objectSpread({}, style), {}, {
|
|
113
|
+
zIndex: zIndex,
|
|
114
|
+
transitionDuration: "".concat(duration, "ms")
|
|
115
|
+
})
|
|
116
|
+
}, children), mountRef.current);
|
|
117
|
+
};
|
|
@@ -4,26 +4,24 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
4
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
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
6
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
7
|
-
import React from 'react';
|
|
7
|
+
import React, { useState } from 'react';
|
|
8
8
|
import { DemoBlock } from "../../DemoBlock";
|
|
9
|
-
import { Button } from "../../index";
|
|
10
|
-
import Mask from "../index";
|
|
9
|
+
import { Button, Overlay } from "../../index";
|
|
11
10
|
export default (function () {
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
open =
|
|
15
|
-
setOpen =
|
|
16
|
-
return /*#__PURE__*/React.createElement(
|
|
11
|
+
var _useState = useState(false),
|
|
12
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
13
|
+
open = _useState2[0],
|
|
14
|
+
setOpen = _useState2[1];
|
|
15
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DemoBlock, {
|
|
17
16
|
title: "\u57FA\u672C\u4F7F\u7528"
|
|
18
|
-
}, /*#__PURE__*/React.createElement(
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
onMaskClick: function onMaskClick() {
|
|
22
|
-
setOpen(false);
|
|
17
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
18
|
+
onClick: function onClick() {
|
|
19
|
+
return setOpen(true);
|
|
23
20
|
}
|
|
24
|
-
}), /*#__PURE__*/React.createElement(
|
|
21
|
+
}, "\u70B9\u51FB\u6309\u94AE\u663E\u793A\u906E\u7F69\u5C42"), /*#__PURE__*/React.createElement(Overlay, {
|
|
22
|
+
open: open,
|
|
25
23
|
onClick: function onClick() {
|
|
26
|
-
setOpen(
|
|
24
|
+
return setOpen(false);
|
|
27
25
|
}
|
|
28
|
-
}
|
|
26
|
+
})));
|
|
29
27
|
});
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
@use "../style/variable" as variable;
|
|
2
|
+
|
|
3
|
+
$trionesOverlayCls: 'triones-antm-overlay';
|
|
4
|
+
|
|
5
|
+
.#{$trionesOverlayCls} {
|
|
6
|
+
position: fixed;
|
|
7
|
+
top: 0;
|
|
8
|
+
left: 0;
|
|
9
|
+
right: 0;
|
|
10
|
+
bottom: 0;
|
|
11
|
+
background-color: rgba(0, 0, 0, .55);
|
|
12
|
+
opacity: 0;
|
|
13
|
+
transition: opacity 0.3s ease;
|
|
14
|
+
pointer-events: none; // 初始状态不可点击
|
|
15
|
+
|
|
16
|
+
&-active {
|
|
17
|
+
opacity: 1;
|
|
18
|
+
pointer-events: auto;
|
|
19
|
+
}
|
|
20
|
+
}
|
package/dist/Picker/index.d.ts
CHANGED
package/dist/Picker/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { Picker } from "
|
|
1
|
+
import { Picker } from "./picker";
|
|
2
2
|
export default Picker;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
|
+
import { PickerColumnOption } from '../PickerView';
|
|
3
|
+
import './style.scss';
|
|
4
|
+
export type PickerProps = {
|
|
5
|
+
open?: boolean;
|
|
6
|
+
afterOpenChange?: (open: boolean) => void;
|
|
7
|
+
title?: React.ReactNode;
|
|
8
|
+
columns?: PickerColumnOption[][];
|
|
9
|
+
/**
|
|
10
|
+
* @description 是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 string 变为 { value: string, label: ReactNode } 的格式
|
|
11
|
+
* @default false
|
|
12
|
+
*/
|
|
13
|
+
labelInValue?: boolean;
|
|
14
|
+
value?: any[];
|
|
15
|
+
onOk: (value: any[]) => void;
|
|
16
|
+
onCancel?: () => void;
|
|
17
|
+
onClose?: () => void;
|
|
18
|
+
};
|
|
19
|
+
export declare const Picker: FC<PickerProps>;
|
|
@@ -0,0 +1,97 @@
|
|
|
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 classNames from 'classnames';
|
|
8
|
+
import { size } from 'lodash-es';
|
|
9
|
+
import React, { useEffect, useState } from 'react';
|
|
10
|
+
import ConfigProvider from "../ConfigProvider";
|
|
11
|
+
import PickerView from "../PickerView";
|
|
12
|
+
import Popup from "../Popup";
|
|
13
|
+
import "./style.scss";
|
|
14
|
+
var pickerCls = 'triones-antm-picker';
|
|
15
|
+
export var Picker = /*#__PURE__*/React.memo(function (_ref) {
|
|
16
|
+
var open = _ref.open,
|
|
17
|
+
afterOpenChange = _ref.afterOpenChange,
|
|
18
|
+
title = _ref.title,
|
|
19
|
+
columns = _ref.columns,
|
|
20
|
+
_ref$labelInValue = _ref.labelInValue,
|
|
21
|
+
labelInValue = _ref$labelInValue === void 0 ? false : _ref$labelInValue,
|
|
22
|
+
value = _ref.value,
|
|
23
|
+
onOk = _ref.onOk,
|
|
24
|
+
onCancel = _ref.onCancel,
|
|
25
|
+
onClose = _ref.onClose;
|
|
26
|
+
var _ConfigProvider$useCo = ConfigProvider.useConfig(),
|
|
27
|
+
locale = _ConfigProvider$useCo.locale;
|
|
28
|
+
var _useState = useState(value || Array.from({
|
|
29
|
+
length: size(columns)
|
|
30
|
+
}).map(function () {
|
|
31
|
+
return null;
|
|
32
|
+
})),
|
|
33
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
34
|
+
internalValue = _useState2[0],
|
|
35
|
+
setInternalValue = _useState2[1];
|
|
36
|
+
var _React$useState = React.useState(open || false),
|
|
37
|
+
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
38
|
+
innerOpen = _React$useState2[0],
|
|
39
|
+
setInnerOpen = _React$useState2[1];
|
|
40
|
+
var handleClose = function handleClose() {
|
|
41
|
+
setInnerOpen(false);
|
|
42
|
+
onClose === null || onClose === void 0 || onClose();
|
|
43
|
+
};
|
|
44
|
+
var handleOk = function handleOk() {
|
|
45
|
+
onOk === null || onOk === void 0 || onOk(internalValue);
|
|
46
|
+
handleClose();
|
|
47
|
+
};
|
|
48
|
+
var handelCancel = function handelCancel() {
|
|
49
|
+
onCancel === null || onCancel === void 0 || onCancel();
|
|
50
|
+
handleClose();
|
|
51
|
+
};
|
|
52
|
+
useEffect(function () {
|
|
53
|
+
afterOpenChange === null || afterOpenChange === void 0 || afterOpenChange(innerOpen);
|
|
54
|
+
}, [innerOpen]);
|
|
55
|
+
useEffect(function () {
|
|
56
|
+
if (open === undefined) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
if (open === innerOpen) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
setInnerOpen(open);
|
|
63
|
+
}, [open]);
|
|
64
|
+
return /*#__PURE__*/React.createElement(Popup, {
|
|
65
|
+
open: innerOpen,
|
|
66
|
+
onClose: function onClose() {
|
|
67
|
+
setInnerOpen(false);
|
|
68
|
+
},
|
|
69
|
+
styles: {
|
|
70
|
+
body: {
|
|
71
|
+
borderTopLeftRadius: 6,
|
|
72
|
+
borderTopRightRadius: 6
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
76
|
+
className: classNames(pickerCls)
|
|
77
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
78
|
+
className: classNames("".concat(pickerCls, "-header"))
|
|
79
|
+
}, /*#__PURE__*/React.createElement("a", {
|
|
80
|
+
className: classNames("".concat(pickerCls, "-header-button")),
|
|
81
|
+
onClick: handelCancel
|
|
82
|
+
}, locale.common.cancel), title && /*#__PURE__*/React.createElement("div", {
|
|
83
|
+
className: classNames("".concat(pickerCls, "-header-title"))
|
|
84
|
+
}, title), /*#__PURE__*/React.createElement("a", {
|
|
85
|
+
className: classNames("".concat(pickerCls, "-header-button"), "".concat(pickerCls, "-header-button-ok")),
|
|
86
|
+
onClick: handleOk
|
|
87
|
+
}, locale.common.confirm)), /*#__PURE__*/React.createElement("div", {
|
|
88
|
+
className: classNames("".concat(pickerCls, "-body"))
|
|
89
|
+
}, /*#__PURE__*/React.createElement(PickerView, {
|
|
90
|
+
columns: columns,
|
|
91
|
+
labelInValue: labelInValue,
|
|
92
|
+
value: internalValue,
|
|
93
|
+
onChange: function onChange(v) {
|
|
94
|
+
setInternalValue(v);
|
|
95
|
+
}
|
|
96
|
+
}))));
|
|
97
|
+
});
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
@use "../style/variable" as variable;
|
|
2
|
+
$pickerCls: 'triones-antm-picker';
|
|
3
|
+
|
|
4
|
+
.#{$pickerCls} {
|
|
5
|
+
width: 100%;
|
|
6
|
+
height: 300Px;
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
position: relative;
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
|
|
12
|
+
&-header {
|
|
13
|
+
display: flex;
|
|
14
|
+
justify-content: space-between;
|
|
15
|
+
align-items: center;
|
|
16
|
+
border-bottom: 1Px solid #eee;
|
|
17
|
+
padding: 4Px;
|
|
18
|
+
|
|
19
|
+
&-button {
|
|
20
|
+
padding: 8Px;
|
|
21
|
+
font-size: 12Px;
|
|
22
|
+
&-cancel{
|
|
23
|
+
color: variable.$trionesColorTextSecondary;
|
|
24
|
+
}
|
|
25
|
+
&-ok{
|
|
26
|
+
color: variable.$trionesColorPrimary;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&-title {
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&-body {
|
|
35
|
+
flex: 1 1;
|
|
36
|
+
width: 100%;
|
|
37
|
+
height: 100%;
|
|
38
|
+
pointer-events: unset;
|
|
39
|
+
}
|
|
40
|
+
&-view{
|
|
41
|
+
--height: 100%;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import { PickerView, PickerViewProps
|
|
1
|
+
import { PickerView, PickerViewProps } from "./picker-view";
|
|
2
|
+
import { PickerColumnOption } from "./types";
|
|
2
3
|
export type { PickerViewProps, PickerColumnOption };
|
|
3
4
|
export default PickerView;
|
package/dist/PickerView/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { PickerView } from "
|
|
1
|
+
import { PickerView } from "./picker-view";
|
|
2
2
|
export default PickerView;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import classNames from "classnames";
|
|
2
|
+
import React from "react";
|
|
3
|
+
var pickerViewCls = "triones-antm-picker-view";
|
|
4
|
+
export var PickerViewColumnItem = function PickerViewColumnItem(_ref) {
|
|
5
|
+
var option = _ref.option;
|
|
6
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
7
|
+
className: classNames("".concat(pickerViewCls, "-column-item"))
|
|
8
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
9
|
+
className: "".concat(pickerViewCls, "-column-item-label")
|
|
10
|
+
}, option.label));
|
|
11
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import { PickerColumnOption } from "./types";
|
|
3
|
+
type PickerViewColumnProps = {
|
|
4
|
+
options?: PickerColumnOption[];
|
|
5
|
+
labelInValue?: boolean;
|
|
6
|
+
value?: any;
|
|
7
|
+
onChange?: (value: any, index?: number) => void;
|
|
8
|
+
};
|
|
9
|
+
export declare const PickerViewColumn: FC<PickerViewColumnProps>;
|
|
10
|
+
export {};
|