@abtnode/ux 1.8.21 → 1.8.23
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.
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = FormTextInput;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _Box = _interopRequireDefault(require("@mui/material/Box"));
|
|
13
|
+
|
|
14
|
+
var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
|
|
15
|
+
|
|
16
|
+
var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
|
|
17
|
+
|
|
18
|
+
var _EditIcon = _interopRequireDefault(require("@arcblock/icons/lib/EditIcon"));
|
|
19
|
+
|
|
20
|
+
var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
|
|
21
|
+
|
|
22
|
+
var _Done = _interopRequireDefault(require("@mui/icons-material/Done"));
|
|
23
|
+
|
|
24
|
+
var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
|
|
25
|
+
|
|
26
|
+
var _required = _interopRequireDefault(require("./required"));
|
|
27
|
+
|
|
28
|
+
var _formWrapper = _interopRequireDefault(require("./form-wrapper"));
|
|
29
|
+
|
|
30
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
31
|
+
|
|
32
|
+
const _excluded = ["label", "disabled", "required", "initialValue", "onChange", "placeholder", "style", "onSubmit"];
|
|
33
|
+
|
|
34
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
35
|
+
|
|
36
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
37
|
+
|
|
38
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
39
|
+
|
|
40
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
41
|
+
|
|
42
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
43
|
+
|
|
44
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
45
|
+
|
|
46
|
+
function FormTextInput(_ref) {
|
|
47
|
+
let {
|
|
48
|
+
label,
|
|
49
|
+
disabled,
|
|
50
|
+
required,
|
|
51
|
+
initialValue,
|
|
52
|
+
onChange,
|
|
53
|
+
placeholder,
|
|
54
|
+
style,
|
|
55
|
+
onSubmit
|
|
56
|
+
} = _ref,
|
|
57
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
58
|
+
|
|
59
|
+
const [editing, setEditing] = (0, _react.useState)(false);
|
|
60
|
+
const [loading, setLoading] = (0, _react.useState)(false);
|
|
61
|
+
const [defaultValue, setDefaultValue] = (0, _react.useState)(initialValue);
|
|
62
|
+
const [value, setValue] = (0, _react.useState)(defaultValue);
|
|
63
|
+
|
|
64
|
+
const handleSubmit = async () => {
|
|
65
|
+
setLoading(true);
|
|
66
|
+
|
|
67
|
+
try {
|
|
68
|
+
await onSubmit(value);
|
|
69
|
+
setDefaultValue(value);
|
|
70
|
+
} catch (err) {
|
|
71
|
+
setValue(defaultValue);
|
|
72
|
+
} finally {
|
|
73
|
+
setLoading(false);
|
|
74
|
+
setEditing(false);
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
const onInputChange = changeValue => {
|
|
79
|
+
setValue(changeValue);
|
|
80
|
+
onChange(changeValue);
|
|
81
|
+
}; // enter keydown
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
const handleKeydown = e => {
|
|
85
|
+
if (e.key === 'Enter') {
|
|
86
|
+
handleSubmit();
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
const input = editing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, _objectSpread({
|
|
91
|
+
style: {
|
|
92
|
+
flex: 1
|
|
93
|
+
},
|
|
94
|
+
fullWidth: true,
|
|
95
|
+
value: value,
|
|
96
|
+
onChange: e => {
|
|
97
|
+
onInputChange(e.target.value);
|
|
98
|
+
},
|
|
99
|
+
autoFocus: true,
|
|
100
|
+
size: "small",
|
|
101
|
+
variant: "outlined",
|
|
102
|
+
placeholder: placeholder,
|
|
103
|
+
onKeyDown: handleKeydown,
|
|
104
|
+
disabled: disabled
|
|
105
|
+
}, rest)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
|
|
106
|
+
px: 1,
|
|
107
|
+
className: "form-item-input slot",
|
|
108
|
+
children: value
|
|
109
|
+
});
|
|
110
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_formWrapper.default, {
|
|
111
|
+
className: "form",
|
|
112
|
+
style: style,
|
|
113
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
|
|
114
|
+
className: "form-item",
|
|
115
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
|
|
116
|
+
className: "form-item-label",
|
|
117
|
+
children: [label, required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_required.default, {})]
|
|
118
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
|
|
119
|
+
className: "form-item-body",
|
|
120
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
|
|
121
|
+
className: "form-item-input",
|
|
122
|
+
children: input
|
|
123
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
|
|
124
|
+
className: "form-item-action",
|
|
125
|
+
children: editing ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
126
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
|
|
127
|
+
"data-cy": "schema-form-item-confirm",
|
|
128
|
+
onClick: handleSubmit,
|
|
129
|
+
disabled: disabled || loading,
|
|
130
|
+
size: "large",
|
|
131
|
+
children: loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
|
|
132
|
+
size: 24
|
|
133
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Done.default, {})
|
|
134
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
|
|
135
|
+
"data-cy": "schema-form-item-cancel",
|
|
136
|
+
onClick: () => {
|
|
137
|
+
setValue(defaultValue);
|
|
138
|
+
setEditing(false);
|
|
139
|
+
},
|
|
140
|
+
disabled: disabled || loading,
|
|
141
|
+
size: "large",
|
|
142
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {})
|
|
143
|
+
})]
|
|
144
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
|
|
145
|
+
"data-cy": "schema-form-item-edit",
|
|
146
|
+
onClick: () => setEditing(true),
|
|
147
|
+
disabled: disabled,
|
|
148
|
+
size: "large",
|
|
149
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditIcon.default, {})
|
|
150
|
+
})
|
|
151
|
+
})]
|
|
152
|
+
})]
|
|
153
|
+
})
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
FormTextInput.propTypes = {
|
|
158
|
+
style: _propTypes.default.object,
|
|
159
|
+
onSubmit: _propTypes.default.func,
|
|
160
|
+
onChange: _propTypes.default.func,
|
|
161
|
+
label: _propTypes.default.string,
|
|
162
|
+
initialValue: _propTypes.default.string,
|
|
163
|
+
placeholder: _propTypes.default.string,
|
|
164
|
+
required: _propTypes.default.bool,
|
|
165
|
+
disabled: _propTypes.default.bool
|
|
166
|
+
};
|
|
167
|
+
FormTextInput.defaultProps = {
|
|
168
|
+
style: {},
|
|
169
|
+
onSubmit: () => {},
|
|
170
|
+
onChange: () => {},
|
|
171
|
+
label: '',
|
|
172
|
+
initialValue: '',
|
|
173
|
+
placeholder: '',
|
|
174
|
+
required: false,
|
|
175
|
+
disabled: false
|
|
176
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
9
|
+
|
|
10
|
+
var _Box = _interopRequireDefault(require("@mui/material/Box"));
|
|
11
|
+
|
|
12
|
+
var _templateObject;
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
17
|
+
|
|
18
|
+
var _default = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n flex-grow: 1;\n overflow-y: auto;\n ", " {\n width: 100%;\n flex-shrink: 0;\n padding: 0 24px;\n transform: translate(0, 0);\n /* max-height: 60vh; */\n }\n\n .form-item {\n width: 100%;\n margin-bottom: 24px;\n position: relative;\n ", " {\n flex-wrap: wrap;\n justify-content: space-between;\n width: 100%;\n flex-shrink: 0;\n }\n }\n\n .form-item-body {\n display: flex;\n align-items: center;\n width: 100%;\n margin-top: 4px;\n }\n\n .form-item-label {\n line-height: 1.2;\n font-size: 14px;\n color: #888;\n font-weight: bold;\n\n ", " {\n text-align: left;\n width: auto;\n flex-grow: 1;\n }\n }\n\n .form-item-input {\n flex-grow: 1;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n &.slot {\n height: 40px;\n line-height: 40px;\n background: #f8f8f8;\n font-size: 16px;\n }\n }\n\n .form-item-action {\n // width: 100px;\n text-align: left;\n margin-left: 12px;\n flex-shrink: 0;\n ", " {\n width: auto;\n margin-left: 0px;\n }\n .MuiIconButton-root {\n padding: 8px;\n svg {\n fill: #888;\n }\n &.Mui-disabled {\n opacity: 0.4;\n }\n }\n }\n"])), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'), props => props.theme.breakpoints.down('md'));
|
|
19
|
+
|
|
20
|
+
exports.default = _default;
|
|
File without changes
|
package/lib/schema-form/index.js
CHANGED
|
@@ -29,7 +29,9 @@ var _textInput = _interopRequireDefault(require("./text-input"));
|
|
|
29
29
|
|
|
30
30
|
var _passportInput = _interopRequireDefault(require("./passport-input"));
|
|
31
31
|
|
|
32
|
-
var _required = _interopRequireDefault(require("
|
|
32
|
+
var _required = _interopRequireDefault(require("../form/required"));
|
|
33
|
+
|
|
34
|
+
var _formWrapper = _interopRequireDefault(require("../form/form-wrapper"));
|
|
33
35
|
|
|
34
36
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
35
37
|
|
|
@@ -149,7 +151,7 @@ function SchemaForm(_ref2) {
|
|
|
149
151
|
return currentValue;
|
|
150
152
|
}
|
|
151
153
|
|
|
152
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
154
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFormWrapper, {
|
|
153
155
|
className: "form",
|
|
154
156
|
style: style,
|
|
155
157
|
children: schema === null || schema === void 0 ? void 0 : schema.map(x => {
|
|
@@ -254,4 +256,4 @@ SchemaForm.defaultProps = {
|
|
|
254
256
|
style: {},
|
|
255
257
|
disabled: false
|
|
256
258
|
};
|
|
257
|
-
const
|
|
259
|
+
const StyledFormWrapper = (0, _styled.default)(_formWrapper.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 80%;\n"])));
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "1.8.
|
|
6
|
+
"version": "1.8.23",
|
|
7
7
|
"description": "UX components shared across abtnode packages",
|
|
8
8
|
"main": "lib/index.js",
|
|
9
9
|
"files": [
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
|
|
22
22
|
"license": "MIT",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@abtnode/auth": "1.8.
|
|
25
|
-
"@abtnode/constant": "1.8.
|
|
26
|
-
"@arcblock/did-connect": "^2.4.
|
|
27
|
-
"@arcblock/icons": "^2.4.
|
|
28
|
-
"@arcblock/ux": "^2.4.
|
|
29
|
-
"@blocklet/meta": "1.8.
|
|
24
|
+
"@abtnode/auth": "1.8.23",
|
|
25
|
+
"@abtnode/constant": "1.8.23",
|
|
26
|
+
"@arcblock/did-connect": "^2.4.28",
|
|
27
|
+
"@arcblock/icons": "^2.4.28",
|
|
28
|
+
"@arcblock/ux": "^2.4.28",
|
|
29
|
+
"@blocklet/meta": "1.8.23",
|
|
30
30
|
"@emotion/react": "^11.10.0",
|
|
31
31
|
"@emotion/styled": "^11.10.0",
|
|
32
32
|
"@mui/icons-material": "^5.8.4",
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"@babel/preset-react": "^7.18.6",
|
|
51
51
|
"babel-plugin-inline-react-svg": "^1.1.2"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "539a32437cf0d01d4cf12afd0dd8276716467527"
|
|
54
54
|
}
|