@trionesdev/antd-mobile-base-react 0.0.2-beta.2 → 0.0.2-beta.20
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/README.md +23 -23
- package/dist/Alert/alert.js +1 -1
- package/dist/Alert/style.scss +69 -69
- package/dist/Avatar/avatar.d.ts +4 -1
- package/dist/Avatar/avatar.js +19 -6
- package/dist/Avatar/style.scss +17 -16
- package/dist/Badge/style.scss +100 -100
- package/dist/Card/style.scss +35 -35
- package/dist/CascaderView/cascader-column-item.js +1 -1
- package/dist/CascaderView/style.scss +22 -22
- package/dist/Cell/CellGroup.js +53 -14
- package/dist/Cell/cell.js +52 -15
- package/dist/Cell/context.d.ts +19 -0
- package/dist/Cell/context.js +2 -0
- package/dist/Cell/styles.scss +81 -52
- package/dist/Cell/types.d.ts +30 -7
- package/dist/Checkbox/checkbox-button.d.ts +6 -2
- package/dist/Checkbox/checkbox-button.js +6 -18
- package/dist/Checkbox/checkbox-group.js +19 -4
- package/dist/Checkbox/checkbox-round.d.ts +8 -0
- package/dist/Checkbox/checkbox-round.js +35 -0
- package/dist/Checkbox/checkbox.js +49 -34
- package/dist/Checkbox/index.d.ts +0 -2
- package/dist/Checkbox/index.js +0 -2
- package/dist/Checkbox/index.scss +165 -151
- package/dist/Checkbox/types.d.ts +11 -1
- package/dist/ConfigProvider/config-provider.d.ts +1 -0
- package/dist/DemoBlock/index.scss +20 -20
- package/dist/DemoDescription/index.scss +3 -3
- package/dist/Descriptions/style.scss +65 -65
- package/dist/Divider/divider.d.ts +1 -1
- package/dist/Divider/divider.js +5 -3
- package/dist/Divider/style.scss +62 -62
- package/dist/Ellipsis/style.scss +13 -13
- package/dist/Empty/style.scss +29 -29
- package/dist/ErrorBlock/demo/base.js +2 -2
- package/dist/ErrorBlock/style.scss +62 -62
- package/dist/Footer/style.scss +55 -55
- package/dist/Form/ErrorList.d.ts +4 -0
- package/dist/Form/ErrorList.js +9 -0
- package/dist/Form/context.d.ts +5 -2
- package/dist/Form/context.js +2 -1
- package/dist/Form/form.d.ts +25 -12
- package/dist/Form/form.js +25 -13
- package/dist/Form/hooks/useForm.js +1 -8
- package/dist/Form/hooks/useFormContext.js +1 -2
- package/dist/Form/index.d.ts +8 -3
- package/dist/Form/index.js +7 -2
- package/dist/Form/styles.scss +11 -0
- package/dist/Form/types.d.ts +8 -0
- package/dist/FormCell/FormCell.d.ts +21 -0
- package/dist/FormCell/FormCell.js +56 -0
- package/dist/FormCell/index.d.ts +4 -0
- package/dist/FormCell/index.js +3 -0
- package/dist/FormCell/styles.scss +103 -0
- package/dist/Grid/style.scss +17 -17
- package/dist/Icon/demo/base.js +2 -2
- package/dist/IndexedStack/IndexedStack.d.ts +9 -0
- package/dist/IndexedStack/IndexedStack.js +27 -0
- package/dist/IndexedStack/index.d.ts +3 -0
- package/dist/IndexedStack/index.js +2 -0
- package/dist/InputNumber/input-number.d.ts +3 -2
- package/dist/InputNumber/input-number.js +48 -26
- package/dist/InputNumber/style.scss +100 -43
- package/dist/Loading/DotLoading.d.ts +7 -0
- package/dist/{Mask/mask-modal.js → Loading/DotLoading.js} +25 -25
- package/dist/{SpinLoading/spin-loading.d.ts → Loading/SpinLoading.d.ts} +0 -1
- package/dist/Loading/SpinLoading.js +69 -0
- package/dist/Loading/index.d.ts +6 -0
- package/dist/Loading/index.js +4 -0
- package/dist/Loading/style.scss +113 -0
- package/dist/NavBar/nav-bar.d.ts +1 -0
- package/dist/NavBar/nav-bar.js +3 -2
- package/dist/NavBar/style.scss +65 -61
- package/dist/NoticeBar/style.scss +130 -130
- package/dist/PageIndicator/style.scss +59 -59
- package/dist/Progress/Progress.d.ts +39 -0
- package/dist/Progress/Progress.js +56 -0
- package/dist/Progress/ProgressCircle.d.ts +15 -0
- package/dist/Progress/ProgressCircle.js +117 -0
- package/dist/Progress/ProgressLine.d.ts +15 -0
- package/dist/Progress/ProgressLine.js +87 -0
- package/dist/Progress/index.d.ts +3 -0
- package/dist/Progress/index.js +2 -0
- package/dist/Progress/style.scss +33 -0
- package/dist/Progress/types.d.ts +6 -0
- package/dist/Progress/types.js +2 -0
- package/dist/Radio/RadioGroup.js +3 -3
- package/dist/Radio/radio.js +1 -1
- package/dist/Radio/style.scss +154 -138
- package/dist/Radio/types.d.ts +6 -4
- package/dist/Rate/rate.js +1 -1
- package/dist/Rate/style.scss +37 -37
- package/dist/Result/demo/base.js +2 -2
- package/dist/Result/style.scss +73 -73
- package/dist/Result/use-result-icon.js +1 -1
- package/dist/SafeArea/style.scss +20 -18
- package/dist/Scaffold/style.scss +17 -16
- package/dist/Segmented/Segmented.d.ts +57 -0
- package/dist/Segmented/Segmented.js +82 -0
- package/dist/Segmented/index.d.ts +2 -0
- package/dist/Segmented/index.js +1 -0
- package/dist/Segmented/style.scss +75 -0
- package/dist/Skeleton/Skeleton.d.ts +86 -0
- package/dist/Skeleton/Skeleton.js +263 -0
- package/dist/Skeleton/index.d.ts +3 -0
- package/dist/Skeleton/index.js +2 -0
- package/dist/Skeleton/style.scss +215 -0
- package/dist/Space/space.d.ts +1 -0
- package/dist/Space/space.js +20 -6
- package/dist/Space/style.scss +101 -77
- package/dist/Stepper/index.d.ts +3 -0
- package/dist/Stepper/index.js +2 -0
- package/dist/Stepper/stepper.d.ts +14 -0
- package/dist/Stepper/stepper.js +92 -0
- package/dist/Stepper/style.scss +100 -0
- package/dist/Steps/HorizontalSteps.js +10 -3
- package/dist/Steps/VerticalSteps.js +5 -2
- package/dist/Steps/style.scss +153 -146
- package/dist/Steps/types.d.ts +2 -0
- package/dist/Switch/style.scss +127 -128
- package/dist/Switch/switch.d.ts +2 -0
- package/dist/Switch/switch.js +6 -5
- package/dist/TabBar/demo/base.js +2 -2
- package/dist/TabBar/index.js +2 -1
- package/dist/TabBar/index.scss +37 -36
- package/dist/Tabs/style.scss +108 -108
- package/dist/Tag/style.scss +110 -86
- package/dist/Tag/tag.d.ts +4 -1
- package/dist/Tag/tag.js +8 -2
- package/dist/WaterMark/style.scss +17 -17
- package/dist/index.d.ts +17 -26
- package/dist/index.js +8 -13
- package/dist/style/css-variable.scss +6 -0
- package/dist/style/style.scss +52 -52
- package/dist/style/theme-dark.scss +24 -24
- package/dist/style/theme-default.scss +54 -54
- package/dist/style/variable.scss +180 -168
- package/dist/types.d.ts +10 -1
- package/dist/utils/type.js +36 -36
- package/dist/utils/with-default-props.js +4 -4
- package/package.json +5 -8
- package/dist/ActionSheet/ActionSheet.d.ts +0 -25
- package/dist/ActionSheet/ActionSheet.js +0 -77
- package/dist/ActionSheet/index.d.ts +0 -3
- package/dist/ActionSheet/index.js +0 -2
- package/dist/ActionSheet/style.scss +0 -51
- package/dist/CascaderPicker/cascader-picker.d.ts +0 -27
- package/dist/CascaderPicker/cascader-picker.js +0 -88
- package/dist/CascaderPicker/index.d.ts +0 -3
- package/dist/CascaderPicker/index.js +0 -2
- package/dist/CascaderPicker/style.scss +0 -42
- package/dist/Form/FormItem/form-item-input.d.ts +0 -15
- package/dist/Form/FormItem/form-item-input.js +0 -39
- package/dist/Form/FormItem/form-item-label.d.ts +0 -13
- package/dist/Form/FormItem/form-item-label.js +0 -25
- package/dist/Form/FormItem/form-item.d.ts +0 -21
- package/dist/Form/FormItem/form-item.js +0 -70
- package/dist/Form/FormItem/index.d.ts +0 -5
- package/dist/Form/FormItem/index.js +0 -3
- package/dist/Form/style.scss +0 -45
- package/dist/Input/base-input.d.ts +0 -14
- package/dist/Input/base-input.js +0 -63
- package/dist/Input/index.d.ts +0 -12
- package/dist/Input/index.js +0 -9
- package/dist/Input/index.scss +0 -173
- package/dist/Input/input-affix-wrapper.d.ts +0 -8
- package/dist/Input/input-affix-wrapper.js +0 -50
- package/dist/Input/input-opt.d.ts +0 -16
- package/dist/Input/input-opt.js +0 -93
- package/dist/Input/input-password.d.ts +0 -7
- package/dist/Input/input-password.js +0 -47
- package/dist/Input/input.d.ts +0 -15
- package/dist/Input/input.js +0 -47
- package/dist/Input/textarea.d.ts +0 -13
- package/dist/Input/textarea.js +0 -45
- package/dist/Input/types.d.ts +0 -1
- package/dist/Input/types.js +0 -1
- package/dist/Mask/index.d.ts +0 -3
- package/dist/Mask/index.js +0 -2
- package/dist/Mask/mask-modal.d.ts +0 -45
- package/dist/Mask/mask.d.ts +0 -5
- package/dist/Mask/mask.js +0 -19
- package/dist/Mask/style.scss +0 -20
- package/dist/Picker/index.d.ts +0 -3
- package/dist/Picker/index.js +0 -2
- package/dist/Picker/picker.d.ts +0 -19
- package/dist/Picker/picker.js +0 -97
- package/dist/Picker/style.scss +0 -41
- package/dist/PickerView/index.d.ts +0 -4
- package/dist/PickerView/index.js +0 -2
- package/dist/PickerView/picker-view-column-item.d.ts +0 -7
- package/dist/PickerView/picker-view-column-item.js +0 -11
- package/dist/PickerView/picker-view-column.d.ts +0 -10
- package/dist/PickerView/picker-view-column.js +0 -117
- package/dist/PickerView/picker-view.d.ts +0 -12
- package/dist/PickerView/picker-view.js +0 -60
- package/dist/PickerView/style.scss +0 -72
- package/dist/PickerView/types.d.ts +0 -4
- package/dist/Popup/index.d.ts +0 -3
- package/dist/Popup/index.js +0 -2
- package/dist/Popup/popup-modal.d.ts +0 -52
- package/dist/Popup/popup-modal.js +0 -74
- package/dist/Popup/popup.d.ts +0 -4
- package/dist/Popup/popup.js +0 -56
- package/dist/Popup/style.scss +0 -53
- package/dist/ScrollView/index.d.ts +0 -4
- package/dist/ScrollView/index.js +0 -2
- package/dist/ScrollView/scroll-view.d.ts +0 -4
- package/dist/ScrollView/scroll-view.js +0 -55
- package/dist/ScrollView/style.scss +0 -19
- package/dist/ScrollView/types.d.ts +0 -26
- package/dist/ScrollView/types.js +0 -1
- package/dist/SideBar/SideBarContext.d.ts +0 -18
- package/dist/SideBar/SideBarContext.js +0 -2
- package/dist/SideBar/index.d.ts +0 -3
- package/dist/SideBar/index.js +0 -2
- package/dist/SideBar/side-bar.d.ts +0 -25
- package/dist/SideBar/side-bar.js +0 -351
- package/dist/SideBar/style.scss +0 -85
- package/dist/SideBar/types.d.ts +0 -7
- package/dist/SideBar/types.js +0 -1
- package/dist/SpinLoading/demo/base.d.ts +0 -3
- package/dist/SpinLoading/demo/base.js +0 -21
- package/dist/SpinLoading/index.d.ts +0 -3
- package/dist/SpinLoading/index.js +0 -2
- package/dist/SpinLoading/spin-loading.js +0 -59
- package/dist/SpinLoading/spin-loading.scss +0 -40
- package/dist/Tabs/demo/base.d.ts +0 -3
- package/dist/Tabs/demo/base.js +0 -59
- package/dist/Tag/demo/base.d.ts +0 -7
- package/dist/Tag/demo/base.js +0 -67
- package/dist/Tag/demo/style.scss +0 -8
- package/dist/Toast/index.d.ts +0 -5
- package/dist/Toast/index.js +0 -3
- package/dist/Toast/style.scss +0 -63
- package/dist/Toast/toast-modal.d.ts +0 -18
- package/dist/Toast/toast-modal.js +0 -112
- package/dist/Toast/toast.d.ts +0 -7
- package/dist/Toast/toast.js +0 -78
- package/dist/VerificationCodeInput/demo/base.d.ts +0 -3
- package/dist/VerificationCodeInput/demo/base.js +0 -11
- package/dist/VerificationCodeInput/index.d.ts +0 -3
- package/dist/VerificationCodeInput/index.js +0 -2
- package/dist/VerificationCodeInput/style.scss +0 -20
- package/dist/VerificationCodeInput/verification-code-input.d.ts +0 -24
- package/dist/VerificationCodeInput/verification-code-input.js +0 -99
- /package/dist/{PickerView → Form}/types.js +0 -0
package/dist/Cell/CellGroup.js
CHANGED
|
@@ -1,28 +1,53 @@
|
|
|
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); }
|
|
1
7
|
import classNames from 'classnames';
|
|
2
8
|
import React from 'react';
|
|
3
|
-
import Divider from "../Divider";
|
|
4
9
|
import { cls } from "./types";
|
|
10
|
+
import { CellGroupContext } from "./context";
|
|
11
|
+
import Cell from '.';
|
|
12
|
+
import { Cell as InternalCell } from "./cell";
|
|
5
13
|
export var CellGroup = function CellGroup(_ref) {
|
|
6
14
|
var className = _ref.className,
|
|
7
15
|
style = _ref.style,
|
|
8
16
|
children = _ref.children,
|
|
9
17
|
title = _ref.title,
|
|
10
18
|
extra = _ref.extra,
|
|
11
|
-
|
|
19
|
+
arrow = _ref.arrow,
|
|
20
|
+
labelCol = _ref.labelCol,
|
|
21
|
+
labelAlign = _ref.labelAlign,
|
|
22
|
+
contentAlign = _ref.contentAlign,
|
|
23
|
+
divider = _ref.divider,
|
|
24
|
+
size = _ref.size,
|
|
25
|
+
styles = _ref.styles;
|
|
12
26
|
var handleRender = function handleRender() {
|
|
13
27
|
if (children) {
|
|
14
28
|
if (Array.isArray(children)) {
|
|
29
|
+
var validChildren = React.Children.toArray(children).filter(function (child) {
|
|
30
|
+
return /*#__PURE__*/React.isValidElement(child) && (child.type == Cell || child.type == InternalCell);
|
|
31
|
+
});
|
|
15
32
|
var childrenArray = [];
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
33
|
+
validChildren.forEach(function (child, index) {
|
|
34
|
+
var _child$key;
|
|
35
|
+
childrenArray.push( /*#__PURE__*/React.cloneElement(child, {
|
|
36
|
+
key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : "cell-".concat(index)
|
|
37
|
+
}));
|
|
38
|
+
if (divider && index < validChildren.length - 1) {
|
|
19
39
|
if ( /*#__PURE__*/React.isValidElement(divider)) {
|
|
20
|
-
|
|
40
|
+
var _divider$key;
|
|
41
|
+
childrenArray.push( /*#__PURE__*/React.cloneElement(divider, {
|
|
42
|
+
key: (_divider$key = divider.key) !== null && _divider$key !== void 0 ? _divider$key : "divider-".concat(index)
|
|
43
|
+
}));
|
|
21
44
|
} else {
|
|
22
|
-
childrenArray.push( /*#__PURE__*/React.createElement(
|
|
45
|
+
childrenArray.push( /*#__PURE__*/React.createElement(React.Fragment, {
|
|
46
|
+
key: "divider-".concat(index)
|
|
47
|
+
}, divider));
|
|
23
48
|
}
|
|
24
49
|
}
|
|
25
|
-
}
|
|
50
|
+
});
|
|
26
51
|
return childrenArray;
|
|
27
52
|
} else {
|
|
28
53
|
return children;
|
|
@@ -30,12 +55,26 @@ export var CellGroup = function CellGroup(_ref) {
|
|
|
30
55
|
}
|
|
31
56
|
return null;
|
|
32
57
|
};
|
|
33
|
-
return /*#__PURE__*/React.createElement(
|
|
58
|
+
return /*#__PURE__*/React.createElement(CellGroupContext.Provider, {
|
|
59
|
+
value: {
|
|
60
|
+
labelCol: labelCol,
|
|
61
|
+
labelAlign: labelAlign,
|
|
62
|
+
contentAlign: contentAlign,
|
|
63
|
+
extra: extra,
|
|
64
|
+
arrow: arrow,
|
|
65
|
+
size: size,
|
|
66
|
+
styles: {
|
|
67
|
+
cell: styles === null || styles === void 0 ? void 0 : styles.cell,
|
|
68
|
+
label: styles === null || styles === void 0 ? void 0 : styles.label,
|
|
69
|
+
content: styles === null || styles === void 0 ? void 0 : styles.content,
|
|
70
|
+
extra: styles === null || styles === void 0 ? void 0 : styles.extra
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
34
74
|
className: classNames("".concat(cls, "-group"), className),
|
|
35
|
-
style: style
|
|
75
|
+
style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.container)
|
|
36
76
|
}, title && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
37
|
-
className: classNames("".concat(cls, "-group-title"))
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}, extra)), /*#__PURE__*/React.createElement(Divider, null)), handleRender());
|
|
77
|
+
className: classNames("".concat(cls, "-group-title")),
|
|
78
|
+
style: styles === null || styles === void 0 ? void 0 : styles.title
|
|
79
|
+
}, title)), handleRender()));
|
|
41
80
|
};
|
package/dist/Cell/cell.js
CHANGED
|
@@ -1,31 +1,68 @@
|
|
|
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 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); }
|
|
2
7
|
import classNames from 'classnames';
|
|
3
|
-
import React from 'react';
|
|
8
|
+
import React, { useContext, useMemo } from 'react';
|
|
4
9
|
import "./styles.scss";
|
|
10
|
+
import { CellGroupContext } from "./context";
|
|
11
|
+
import { assign } from "lodash-es";
|
|
12
|
+
import { RightOutline } from "@trionesdev/antd-mobile-icons-react";
|
|
5
13
|
var cls = 'triones-antm-cell';
|
|
6
14
|
export var Cell = function Cell(_ref) {
|
|
15
|
+
var _ref2, _ref3, _ref4;
|
|
7
16
|
var className = _ref.className,
|
|
8
17
|
style = _ref.style,
|
|
9
18
|
placeholder = _ref.placeholder,
|
|
10
19
|
children = _ref.children,
|
|
20
|
+
label = _ref.label,
|
|
11
21
|
extra = _ref.extra,
|
|
12
|
-
|
|
13
|
-
|
|
22
|
+
arrow = _ref.arrow,
|
|
23
|
+
labelCol = _ref.labelCol,
|
|
24
|
+
labelAlign = _ref.labelAlign,
|
|
25
|
+
contentAlign = _ref.contentAlign,
|
|
14
26
|
onClick = _ref.onClick,
|
|
15
|
-
|
|
27
|
+
styles = _ref.styles;
|
|
28
|
+
var _useContext = useContext(CellGroupContext),
|
|
29
|
+
ctxLabelCol = _useContext.labelCol,
|
|
30
|
+
ctxLabelAlign = _useContext.labelAlign,
|
|
31
|
+
ctxContentAlign = _useContext.contentAlign,
|
|
32
|
+
ctxSize = _useContext.size,
|
|
33
|
+
ctxArrow = _useContext.arrow,
|
|
34
|
+
ctxExtra = _useContext.extra,
|
|
35
|
+
ctxStyles = _useContext.styles;
|
|
36
|
+
var labelWidth = useMemo(function () {
|
|
37
|
+
return (labelCol === null || labelCol === void 0 ? void 0 : labelCol.flex) || (ctxLabelCol === null || ctxLabelCol === void 0 ? void 0 : ctxLabelCol.flex) || 'auto';
|
|
38
|
+
}, [labelCol, ctxLabelCol]);
|
|
39
|
+
var finalLabelAlign = (_ref2 = ctxLabelAlign !== null && ctxLabelAlign !== void 0 ? ctxLabelAlign : labelAlign) !== null && _ref2 !== void 0 ? _ref2 : 'start';
|
|
40
|
+
var finalContentAlign = (_ref3 = ctxContentAlign !== null && ctxContentAlign !== void 0 ? ctxContentAlign : contentAlign) !== null && _ref3 !== void 0 ? _ref3 : 'end';
|
|
41
|
+
var finalSize = ctxSize !== null && ctxSize !== void 0 ? ctxSize : 'medium';
|
|
42
|
+
var finalArrow = (_ref4 = ctxArrow !== null && ctxArrow !== void 0 ? ctxArrow : arrow) !== null && _ref4 !== void 0 ? _ref4 : false;
|
|
43
|
+
var mergedStyles = assign({}, ctxStyles, styles);
|
|
44
|
+
if (style) {
|
|
45
|
+
mergedStyles.cell = assign(mergedStyles.cell, style);
|
|
46
|
+
}
|
|
47
|
+
var sizePossible = ['small', 'medium', 'large'].includes(finalSize);
|
|
16
48
|
return /*#__PURE__*/React.createElement("div", {
|
|
17
|
-
className: classNames(cls, className),
|
|
18
|
-
style:
|
|
49
|
+
className: classNames(cls, _defineProperty({}, "".concat(cls, "-").concat(finalSize), sizePossible), className),
|
|
50
|
+
style: _objectSpread({}, mergedStyles.cell),
|
|
19
51
|
onClick: onClick
|
|
20
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
21
|
-
className: classNames("".concat(cls, "-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
52
|
+
}, label && /*#__PURE__*/React.createElement("div", {
|
|
53
|
+
className: classNames("".concat(cls, "-label"), "".concat(cls, "-label-").concat(finalLabelAlign)),
|
|
54
|
+
style: _objectSpread({
|
|
55
|
+
width: labelWidth
|
|
56
|
+
}, mergedStyles === null || mergedStyles === void 0 ? void 0 : mergedStyles.label)
|
|
57
|
+
}, label), /*#__PURE__*/React.createElement("div", {
|
|
58
|
+
className: classNames("".concat(cls, "-content"), "".concat(cls, "-content-").concat(finalContentAlign)),
|
|
59
|
+
style: _objectSpread({}, mergedStyles === null || mergedStyles === void 0 ? void 0 : mergedStyles.content)
|
|
60
|
+
}, children || placeholder && /*#__PURE__*/React.createElement("div", {
|
|
25
61
|
className: classNames("".concat(cls, "-placeholder"))
|
|
26
|
-
}, placeholder)), extra && /*#__PURE__*/React.createElement("div", {
|
|
27
|
-
className: classNames("".concat(cls, "-extra"))
|
|
28
|
-
|
|
62
|
+
}, placeholder)), (extra || ctxExtra) && /*#__PURE__*/React.createElement("div", {
|
|
63
|
+
className: classNames("".concat(cls, "-extra")),
|
|
64
|
+
style: mergedStyles === null || mergedStyles === void 0 ? void 0 : mergedStyles.extra
|
|
65
|
+
}, extra || ctxExtra), finalArrow && /*#__PURE__*/React.createElement("div", {
|
|
29
66
|
className: classNames("".concat(cls, "-arrow"))
|
|
30
67
|
}, /*#__PURE__*/React.createElement(RightOutline, null)));
|
|
31
68
|
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { AntSize, Col } from "../types";
|
|
3
|
+
import { align } from "./types";
|
|
4
|
+
type CellGroupContextType = {
|
|
5
|
+
labelCol?: Col;
|
|
6
|
+
labelAlign?: align;
|
|
7
|
+
contentAlign?: align;
|
|
8
|
+
arrow?: boolean;
|
|
9
|
+
extra?: React.ReactNode;
|
|
10
|
+
size?: AntSize;
|
|
11
|
+
styles?: {
|
|
12
|
+
cell?: React.CSSProperties;
|
|
13
|
+
label?: React.CSSProperties;
|
|
14
|
+
content?: React.CSSProperties;
|
|
15
|
+
extra?: React.CSSProperties;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
export declare const CellGroupContext: React.Context<CellGroupContextType>;
|
|
19
|
+
export {};
|
package/dist/Cell/styles.scss
CHANGED
|
@@ -1,52 +1,81 @@
|
|
|
1
|
-
@use "../style/variable" as
|
|
2
|
-
|
|
3
|
-
$cellCls: 'triones-antm-cell';
|
|
4
|
-
|
|
5
|
-
.#{$cellCls} {
|
|
6
|
-
display: flex;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
&-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
1
|
+
@use "../style/variable" as variable;
|
|
2
|
+
|
|
3
|
+
$cellCls: 'triones-antm-cell';
|
|
4
|
+
|
|
5
|
+
.#{$cellCls} {
|
|
6
|
+
display: flex;
|
|
7
|
+
gap: 4Px;
|
|
8
|
+
align-items: center;
|
|
9
|
+
|
|
10
|
+
&-small{
|
|
11
|
+
padding-block: variable.$trionesPaddingXxs;
|
|
12
|
+
}
|
|
13
|
+
&-medium{
|
|
14
|
+
padding-block: variable.$trionesPaddingXs;
|
|
15
|
+
}
|
|
16
|
+
&-large{
|
|
17
|
+
padding-block: variable.$trionesPaddingSm;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&-label {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
&-start{
|
|
24
|
+
justify-content: flex-start;
|
|
25
|
+
}
|
|
26
|
+
&-end{
|
|
27
|
+
justify-content: flex-end;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&-content {
|
|
32
|
+
flex: 1 auto;
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
min-height: 20Px;
|
|
36
|
+
&-start{
|
|
37
|
+
justify-content: flex-start;
|
|
38
|
+
}
|
|
39
|
+
&-end{
|
|
40
|
+
justify-content: flex-end;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&-extra {
|
|
45
|
+
display: flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
}
|
|
48
|
+
&-arrow{
|
|
49
|
+
font-size: variable.$trionesFontSize;
|
|
50
|
+
color: variable.$trionesColorTextPlaceholder;
|
|
51
|
+
.triones-antm-icon{
|
|
52
|
+
&::before{
|
|
53
|
+
font-size: 12Px;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&-placeholder {
|
|
59
|
+
font-size: variable.$trionesFontSize;
|
|
60
|
+
color: variable.$trionesColorTextPlaceholder;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.#{$cellCls}-group {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
border-radius: variable.$trionesBorderRadius;
|
|
68
|
+
|
|
69
|
+
&-title {
|
|
70
|
+
padding: 4Px 4Px;
|
|
71
|
+
display: flex;
|
|
72
|
+
justify-content: space-between;
|
|
73
|
+
|
|
74
|
+
&-text {
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&-extra {
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
}
|
|
81
|
+
}
|
package/dist/Cell/types.d.ts
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { AntSize, Col } from "../types";
|
|
2
3
|
export declare const cls = "triones-antm-cell";
|
|
4
|
+
export type align = 'start' | 'center' | 'end';
|
|
3
5
|
export type CellProps = {
|
|
4
6
|
className?: string;
|
|
5
7
|
style?: React.CSSProperties;
|
|
6
8
|
placeholder?: string;
|
|
7
9
|
children?: React.ReactNode;
|
|
10
|
+
/**
|
|
11
|
+
* @description 左侧内容
|
|
12
|
+
*/
|
|
13
|
+
label?: React.ReactNode;
|
|
8
14
|
/**
|
|
9
15
|
* @description 右侧内容
|
|
10
16
|
* @default
|
|
@@ -19,7 +25,15 @@ export type CellProps = {
|
|
|
19
25
|
* @description 点击事件
|
|
20
26
|
*/
|
|
21
27
|
onClick?: () => void;
|
|
22
|
-
|
|
28
|
+
labelCol?: Col;
|
|
29
|
+
labelAlign?: align;
|
|
30
|
+
contentAlign?: align;
|
|
31
|
+
size?: AntSize;
|
|
32
|
+
styles?: {
|
|
33
|
+
label?: React.CSSProperties;
|
|
34
|
+
content?: React.CSSProperties;
|
|
35
|
+
extra?: React.CSSProperties;
|
|
36
|
+
};
|
|
23
37
|
};
|
|
24
38
|
export type CellGroupProps = {
|
|
25
39
|
className?: string;
|
|
@@ -33,9 +47,18 @@ export type CellGroupProps = {
|
|
|
33
47
|
* @description 分组右侧内容
|
|
34
48
|
*/
|
|
35
49
|
extra?: React.ReactNode;
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
divider?:
|
|
50
|
+
arrow?: boolean;
|
|
51
|
+
labelCol?: Col;
|
|
52
|
+
labelAlign?: align;
|
|
53
|
+
contentAlign?: align;
|
|
54
|
+
divider?: ReactNode;
|
|
55
|
+
size?: AntSize;
|
|
56
|
+
styles?: {
|
|
57
|
+
container?: React.CSSProperties;
|
|
58
|
+
title?: React.CSSProperties;
|
|
59
|
+
cell?: React.CSSProperties;
|
|
60
|
+
label?: React.CSSProperties;
|
|
61
|
+
content?: React.CSSProperties;
|
|
62
|
+
extra?: React.CSSProperties;
|
|
63
|
+
};
|
|
41
64
|
};
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
-
import { CheckboxProps } from './types';
|
|
2
1
|
import { FC } from 'react';
|
|
3
|
-
|
|
2
|
+
import { CheckboxProps } from './types';
|
|
3
|
+
type CheckboxButtonProps = CheckboxProps & {
|
|
4
|
+
onClick: () => void;
|
|
5
|
+
};
|
|
6
|
+
export declare const CheckboxButton: FC<CheckboxButtonProps>;
|
|
7
|
+
export {};
|
|
@@ -2,39 +2,27 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
|
2
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
3
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
4
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
5
|
import React from 'react';
|
|
12
6
|
import { cls } from "./types";
|
|
13
|
-
import { useState } from 'react';
|
|
14
7
|
import classNames from 'classnames';
|
|
15
|
-
import { CheckOutline } from
|
|
8
|
+
import { CheckOutline } from '@trionesdev/antd-mobile-icons-react';
|
|
16
9
|
export var CheckboxButton = function CheckboxButton(_ref) {
|
|
17
|
-
var _ref2;
|
|
18
10
|
var children = _ref.children,
|
|
19
11
|
checked = _ref.checked,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
var _useState = useState((_ref2 = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
|
|
23
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
24
|
-
innerChecked = _useState2[0],
|
|
25
|
-
setInnerChecked = _useState2[1];
|
|
12
|
+
disabled = _ref.disabled,
|
|
13
|
+
_onClick = _ref.onClick;
|
|
26
14
|
var prefixCls = "".concat(cls, "-button");
|
|
27
15
|
return /*#__PURE__*/React.createElement("label", {
|
|
28
|
-
className: classNames("".concat(prefixCls), _defineProperty(_defineProperty({}, "".concat(
|
|
16
|
+
className: classNames("".concat(prefixCls), _defineProperty(_defineProperty({}, "".concat(cls, "-disabled"), disabled), "".concat(prefixCls, "-checked"), checked)),
|
|
29
17
|
onClick: function onClick() {
|
|
30
18
|
if (disabled) {
|
|
31
19
|
return;
|
|
32
20
|
}
|
|
33
|
-
|
|
21
|
+
_onClick === null || _onClick === void 0 || _onClick();
|
|
34
22
|
}
|
|
35
23
|
}, /*#__PURE__*/React.createElement("div", {
|
|
36
24
|
className: classNames("".concat(prefixCls, "-content"))
|
|
37
|
-
}, children),
|
|
25
|
+
}, children), checked && /*#__PURE__*/React.createElement("div", {
|
|
38
26
|
className: classNames("".concat(prefixCls, "-icon"))
|
|
39
27
|
}, /*#__PURE__*/React.createElement(CheckOutline, {
|
|
40
28
|
className: classNames("checkedIcon")
|
|
@@ -8,25 +8,40 @@ import classNames from 'classnames';
|
|
|
8
8
|
import React, { useState } from 'react';
|
|
9
9
|
import { CheckboxGroupContext } from "./group-context";
|
|
10
10
|
import { cls } from "./types";
|
|
11
|
+
import Checkbox from "./index";
|
|
12
|
+
import { isEmpty } from "lodash-es";
|
|
13
|
+
import Space from "../Space";
|
|
11
14
|
export var CheckboxGroup = function CheckboxGroup(_ref) {
|
|
12
15
|
var _ref2;
|
|
13
16
|
var value = _ref.value,
|
|
14
17
|
defaultValue = _ref.defaultValue,
|
|
15
18
|
onChange = _ref.onChange,
|
|
16
|
-
children = _ref.children
|
|
19
|
+
children = _ref.children,
|
|
20
|
+
shape = _ref.shape,
|
|
21
|
+
options = _ref.options,
|
|
22
|
+
direction = _ref.direction;
|
|
17
23
|
var _useState = useState((_ref2 = value !== null && value !== void 0 ? value : defaultValue) !== null && _ref2 !== void 0 ? _ref2 : []),
|
|
18
24
|
_useState2 = _slicedToArray(_useState, 2),
|
|
19
25
|
innerValue = _useState2[0],
|
|
20
26
|
setInnerValue = _useState2[1];
|
|
21
27
|
return /*#__PURE__*/React.createElement(CheckboxGroupContext.Provider, {
|
|
22
28
|
value: {
|
|
29
|
+
group: true,
|
|
23
30
|
value: innerValue,
|
|
24
|
-
|
|
31
|
+
onValueChange: function onValueChange(v) {
|
|
25
32
|
setInnerValue(v);
|
|
26
33
|
onChange === null || onChange === void 0 || onChange(v);
|
|
27
34
|
}
|
|
28
35
|
}
|
|
29
36
|
}, /*#__PURE__*/React.createElement("div", {
|
|
30
|
-
className: classNames("".concat(cls, "-group
|
|
31
|
-
},
|
|
37
|
+
className: classNames("".concat(cls, "-group"))
|
|
38
|
+
}, !isEmpty(options) && /*#__PURE__*/React.createElement(Space, {
|
|
39
|
+
direction: direction
|
|
40
|
+
}, options === null || options === void 0 ? void 0 : options.map(function (item, index) {
|
|
41
|
+
return /*#__PURE__*/React.createElement(Checkbox, {
|
|
42
|
+
key: "".concat(index),
|
|
43
|
+
shape: shape,
|
|
44
|
+
value: item.value
|
|
45
|
+
}, item.label);
|
|
46
|
+
})), isEmpty(options) && children));
|
|
32
47
|
};
|
|
@@ -0,0 +1,35 @@
|
|
|
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
|
+
import { CheckOutline } from '@trionesdev/antd-mobile-icons-react';
|
|
6
|
+
import classNames from 'classnames';
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import "./index.scss";
|
|
9
|
+
import { cls } from "./types";
|
|
10
|
+
export var CheckboxRound = function CheckboxRound(_ref) {
|
|
11
|
+
var children = _ref.children,
|
|
12
|
+
checked = _ref.checked,
|
|
13
|
+
disabled = _ref.disabled,
|
|
14
|
+
_onClick = _ref.onClick;
|
|
15
|
+
var prefixCls = "".concat(cls, "-round");
|
|
16
|
+
return /*#__PURE__*/React.createElement("label", {
|
|
17
|
+
className: classNames("".concat(prefixCls), _defineProperty({}, "".concat(cls, "-disabled"), disabled)),
|
|
18
|
+
onClick: function onClick() {
|
|
19
|
+
if (disabled) {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
_onClick === null || _onClick === void 0 || _onClick();
|
|
23
|
+
}
|
|
24
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
25
|
+
className: classNames("".concat(prefixCls))
|
|
26
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
27
|
+
className: classNames("".concat(prefixCls, "-fake"))
|
|
28
|
+
}, checked ? /*#__PURE__*/React.createElement("div", {
|
|
29
|
+
className: classNames("".concat(prefixCls, "-fake-checked"))
|
|
30
|
+
}, /*#__PURE__*/React.createElement(CheckOutline, null)) : /*#__PURE__*/React.createElement("div", {
|
|
31
|
+
className: classNames("".concat(prefixCls, "-fake-unchecked"))
|
|
32
|
+
}))), children && /*#__PURE__*/React.createElement("div", {
|
|
33
|
+
className: classNames("".concat(prefixCls, "-content"))
|
|
34
|
+
}, children));
|
|
35
|
+
};
|