@abtnode/ux 1.7.25 → 1.8.0

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.
Files changed (7) hide show
  1. package/lib/schema-form/color-input.js +122 -0
  2. package/lib/schema-form/common-prop-types.js +24 -0
  3. package/lib/schema-form/index.js +233 -0
  4. package/lib/schema-form/passport-input.js +81 -0
  5. package/lib/schema-form/required.js +19 -0
  6. package/lib/schema-form/text-input.js +82 -0
  7. package/package.json +9 -7
package/lib/schema-form/color-input.js ADDED
@@ -0,0 +1,122 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = ColorInput;
7
+
8
+ var _react = _interopRequireWildcard(require("react"));
9
+
10
+ var _Box = _interopRequireDefault(require("@mui/material/Box"));
11
+
12
+ var _Popover = _interopRequireDefault(require("@mui/material/Popover"));
13
+
14
+ var _reactColor = require("react-color");
15
+
16
+ var _context = require("@arcblock/ux/lib/Locale/context");
17
+
18
+ var _commonPropTypes = _interopRequireDefault(require("./common-prop-types"));
19
+
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
+
22
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
+
24
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
+
26
+ function ColorInput(_ref) {
27
+ let {
28
+ editing,
29
+ value,
30
+ onChange
31
+ } = _ref;
32
+ const {
33
+ t
34
+ } = (0, _context.useLocaleContext)();
35
+ const [open, setOpen] = (0, _react.useState)(false);
36
+ const colorElm = (0, _react.useRef)();
37
+ const colorValue = (0, _react.useRef)(value); // auto open color picker when editing, should wait the useRef to be ready
38
+
39
+ (0, _react.useEffect)(() => {
40
+ let timer = null;
41
+
42
+ if (editing) {
43
+ timer = setTimeout(() => {
44
+ setOpen(true);
45
+ }, 50);
46
+ }
47
+
48
+ return () => {
49
+ clearTimeout(timer);
50
+ };
51
+ }, [editing]);
52
+
53
+ const onColorChange = color => {
54
+ colorValue.current = color;
55
+ onChange(color);
56
+ };
57
+
58
+ const handleEnterKeyDown = () => {
59
+ setOpen(false);
60
+ onChange(colorValue.current);
61
+ };
62
+
63
+ const ReadView = /*#__PURE__*/_react.default.createElement(_Box.default, {
64
+ className: "form-item-input slot",
65
+ px: 1
66
+ }, /*#__PURE__*/_react.default.createElement(_Box.default, {
67
+ display: "flex",
68
+ alignItems: "center"
69
+ }, value, value !== 'auto' && /*#__PURE__*/_react.default.createElement("div", {
70
+ style: {
71
+ marginLeft: 4,
72
+ backgroundColor: value,
73
+ width: '1em',
74
+ height: '1em',
75
+ borderRadius: '0.2em'
76
+ }
77
+ })));
78
+
79
+ const EditView = /*#__PURE__*/_react.default.createElement(_Box.default, {
80
+ display: "flex",
81
+ flexGrow: 1,
82
+ alignItems: "center",
83
+ height: "40px",
84
+ onKeyDown: handleEnterKeyDown
85
+ }, /*#__PURE__*/_react.default.createElement(_Box.default, {
86
+ display: "flex",
87
+ alignItems: "center",
88
+ onClick: () => setOpen(true)
89
+ }, t('config.customColor'), /*#__PURE__*/_react.default.createElement("div", {
90
+ ref: colorElm,
91
+ style: {
92
+ flexShrink: 0,
93
+ marginLeft: '8px',
94
+ backgroundColor: value,
95
+ width: '32px',
96
+ height: '32px',
97
+ boxSizing: 'border-box',
98
+ borderRadius: '8px',
99
+ border: '1px solid #eee',
100
+ cursor: value === 'auto' ? 'default' : 'pointer'
101
+ }
102
+ })), /*#__PURE__*/_react.default.createElement(_Popover.default, {
103
+ open: open,
104
+ anchorEl: colorElm.current,
105
+ onClose: () => setOpen(false),
106
+ anchorOrigin: {
107
+ vertical: 'bottom',
108
+ horizontal: 'center'
109
+ },
110
+ transformOrigin: {
111
+ vertical: 'top',
112
+ horizontal: 'center'
113
+ }
114
+ }, /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
115
+ color: value,
116
+ onChange: c => onColorChange(c.hex)
117
+ })));
118
+
119
+ return editing ? EditView : ReadView;
120
+ }
121
+
122
+ ColorInput.propTypes = _commonPropTypes.default;
package/lib/schema-form/common-prop-types.js ADDED
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+
12
+ var _default = {
13
+ description: _propTypes.default.string,
14
+ editing: _propTypes.default.bool,
15
+ onChange: _propTypes.default.func,
16
+ required: _propTypes.default.bool,
17
+ // eslint-disable-next-line react/no-unused-prop-types
18
+ value: _propTypes.default.any,
19
+ // eslint-disable-next-line react/no-unused-prop-types
20
+ componentProps: _propTypes.default.object,
21
+ render: _propTypes.default.func,
22
+ renderFormItem: _propTypes.default.func
23
+ };
24
+ exports.default = _default;
package/lib/schema-form/index.js ADDED
@@ -0,0 +1,233 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = SchemaForm;
7
+
8
+ var _react = _interopRequireWildcard(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _styled = _interopRequireDefault(require("@emotion/styled"));
13
+
14
+ var _Box = _interopRequireDefault(require("@mui/material/Box"));
15
+
16
+ var _EditIcon = _interopRequireDefault(require("@arcblock/icons/lib/EditIcon"));
17
+
18
+ var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
19
+
20
+ var _Done = _interopRequireDefault(require("@mui/icons-material/Done"));
21
+
22
+ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
23
+
24
+ var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
25
+
26
+ var _colorInput = _interopRequireDefault(require("./color-input"));
27
+
28
+ var _textInput = _interopRequireDefault(require("./text-input"));
29
+
30
+ var _passportInput = _interopRequireDefault(require("./passport-input"));
31
+
32
+ var _required = _interopRequireDefault(require("./required"));
33
+
34
+ var _templateObject;
35
+
36
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
37
+
38
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
39
+
40
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
41
+
42
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
43
+
44
+ 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; }
45
+
46
+ 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; }
47
+
48
+ 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; }
49
+
50
+ function getComponent(item, _ref) {
51
+ let {
52
+ editing = false
53
+ } = _ref;
54
+ const {
55
+ componentType = 'input',
56
+ render,
57
+ renderFormItem
58
+ } = item; // if provided renderItem and editing is true, use it
59
+
60
+ if (editing && renderFormItem) {
61
+ return renderFormItem;
62
+ } // if provided render and editing is false, use it
63
+
64
+
65
+ if (!editing && render) {
66
+ return render;
67
+ }
68
+
69
+ const componentMap = {
70
+ input: _textInput.default,
71
+ color: _colorInput.default,
72
+ passport: _passportInput.default
73
+ };
74
+ return componentMap[componentType === null || componentType === void 0 ? void 0 : componentType.toLowerCase()];
75
+ }
76
+
77
+ function SchemaForm(_ref2) {
78
+ let {
79
+ schema,
80
+ loading,
81
+ value,
82
+ defaultValue,
83
+ onChange,
84
+ style
85
+ } = _ref2;
86
+ const isControlled = Object.prototype.toString.call(value) === '[object Object]';
87
+ const [editingItem, setEditingItem] = (0, _react.useState)(null);
88
+ const [formValues, setFormValues] = (0, _react.useState)(isControlled ? value : defaultValue);
89
+ const editingItemInitialValue = (0, _react.useRef)();
90
+
91
+ function onFormItemChange(item, changeValue, action) {
92
+ const {
93
+ key
94
+ } = item;
95
+ const oldValue = formValues[key];
96
+ const isChanged = oldValue !== changeValue;
97
+
98
+ const newValues = _objectSpread(_objectSpread({}, formValues), {}, {
99
+ [key]: changeValue
100
+ });
101
+
102
+ if (isChanged) {
103
+ setFormValues(newValues);
104
+ }
105
+
106
+ onChange({
107
+ [key]: changeValue
108
+ }, {
109
+ allValues: newValues,
110
+ action,
111
+ currentItem: item
112
+ });
113
+ }
114
+
115
+ function onItemEditingStatusChange(item) {
116
+ if (item) {
117
+ editingItemInitialValue.current = formValues[item.key];
118
+ setEditingItem(item);
119
+ return;
120
+ }
121
+
122
+ editingItemInitialValue.current = null;
123
+ setEditingItem(null);
124
+ }
125
+
126
+ function getValue(item, _ref3) {
127
+ let {
128
+ editing = false
129
+ } = _ref3;
130
+ const {
131
+ key
132
+ } = item;
133
+ const currentValue = isControlled ? value[key] : formValues[key];
134
+
135
+ if (currentValue === '__encrypted__') {
136
+ if (!editing) {
137
+ return '******';
138
+ }
139
+
140
+ return '';
141
+ }
142
+
143
+ return currentValue;
144
+ }
145
+
146
+ return /*#__PURE__*/_react.default.createElement(FormWrapper, {
147
+ className: "form",
148
+ style: style
149
+ }, schema === null || schema === void 0 ? void 0 : schema.map(x => {
150
+ const {
151
+ key,
152
+ description,
153
+ required,
154
+ componentProps = {}
155
+ } = x;
156
+ const editing = !!(editingItem && key === editingItem.key);
157
+ const currentValue = getValue(x, {
158
+ editing
159
+ }); // get component by componentType
160
+
161
+ const CurrentComponent = getComponent(x, {
162
+ editing
163
+ });
164
+ const renderComponentProps = {
165
+ inputProps: {
166
+ 'data-cy': 'schema-form-item-component'
167
+ },
168
+ key,
169
+ description,
170
+ editing,
171
+ value: currentValue,
172
+ onChange: changeValue => onFormItemChange(x, changeValue, 'change'),
173
+ componentProps
174
+ };
175
+ return /*#__PURE__*/_react.default.createElement(_Box.default, {
176
+ className: "form-item",
177
+ key: key
178
+ }, /*#__PURE__*/_react.default.createElement(_Box.default, {
179
+ className: "form-item-label",
180
+ style: {
181
+ color: required && !currentValue ? '#ff0000' : '#333'
182
+ }
183
+ }, description, required && /*#__PURE__*/_react.default.createElement(_required.default, null)), /*#__PURE__*/_react.default.createElement(_Box.default, {
184
+ className: "form-item-body"
185
+ }, /*#__PURE__*/_react.default.createElement(_Box.default, {
186
+ className: "form-item-input"
187
+ }, /*#__PURE__*/_react.default.createElement(CurrentComponent, renderComponentProps)), /*#__PURE__*/_react.default.createElement(_Box.default, {
188
+ className: "form-item-action"
189
+ }, editing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
190
+ "data-cy": "schema-form-item-confirm",
191
+ onClick: () => {
192
+ onFormItemChange(x, currentValue, 'confirm');
193
+ onItemEditingStatusChange(null);
194
+ },
195
+ disabled: loading,
196
+ size: "large"
197
+ }, loading ? /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
198
+ size: 24
199
+ }) : /*#__PURE__*/_react.default.createElement(_Done.default, null)), /*#__PURE__*/_react.default.createElement(_IconButton.default, {
200
+ "data-cy": "schema-form-item-cancel",
201
+ onClick: () => {
202
+ onFormItemChange(x, editingItemInitialValue.current, 'cancel');
203
+ onItemEditingStatusChange(null);
204
+ },
205
+ disabled: loading,
206
+ size: "large"
207
+ }, /*#__PURE__*/_react.default.createElement(_Close.default, null))) : /*#__PURE__*/_react.default.createElement(_IconButton.default, {
208
+ "data-cy": "schema-form-item-edit",
209
+ onClick: () => {
210
+ onFormItemChange(x, formValues[key], 'edit');
211
+ onItemEditingStatusChange(x);
212
+ },
213
+ disabled: editingItem,
214
+ size: "large"
215
+ }, /*#__PURE__*/_react.default.createElement(_EditIcon.default, null)))));
216
+ }));
217
+ }
218
+
219
+ SchemaForm.propTypes = {
220
+ schema: _propTypes.default.array.isRequired,
221
+ loading: _propTypes.default.bool,
222
+ onChange: _propTypes.default.func.isRequired,
223
+ value: _propTypes.default.object,
224
+ defaultValue: _propTypes.default.object,
225
+ style: _propTypes.default.object
226
+ };
227
+ SchemaForm.defaultProps = {
228
+ loading: false,
229
+ value: undefined,
230
+ defaultValue: {},
231
+ style: {}
232
+ };
233
+ const FormWrapper = (0, _styled.default)(_Box.default)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 80%;\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\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'));
package/lib/schema-form/passport-input.js ADDED
@@ -0,0 +1,81 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = PassportInput;
7
+
8
+ var _react = _interopRequireDefault(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _Box = _interopRequireDefault(require("@mui/material/Box"));
13
+
14
+ var _createPassportSvg = _interopRequireDefault(require("@abtnode/auth/lib/util/create-passport-svg"));
15
+
16
+ var _passportColor = require("@abtnode/auth/lib/util/passport-color");
17
+
18
+ var _util = require("@blocklet/meta/lib/util");
19
+
20
+ var _colorInput = _interopRequireDefault(require("./color-input"));
21
+
22
+ var _commonPropTypes = _interopRequireDefault(require("./common-prop-types"));
23
+
24
+ const _excluded = ["editing", "value", "onChange", "componentProps"];
25
+
26
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
+
28
+ 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; }
29
+
30
+ 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; }
31
+
32
+ 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; }
33
+
34
+ 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; }
35
+
36
+ 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; }
37
+
38
+ function PassportInput(_ref) {
39
+ let {
40
+ editing,
41
+ value,
42
+ onChange,
43
+ componentProps
44
+ } = _ref,
45
+ rest = _objectWithoutProperties(_ref, _excluded);
46
+
47
+ const {
48
+ blocklet
49
+ } = componentProps;
50
+ const color = value === 'auto' ? (0, _passportColor.getPassportColorFromDid)(blocklet.appDid) : value;
51
+ return /*#__PURE__*/_react.default.createElement(_Box.default, {
52
+ display: "flex",
53
+ alignItems: "center"
54
+ }, /*#__PURE__*/_react.default.createElement("img", {
55
+ style: {
56
+ width: 96,
57
+ marginRight: 12
58
+ },
59
+ alt: "",
60
+ src: (0, _createPassportSvg.default)({
61
+ title: 'Owner',
62
+ issuer: (0, _util.getDisplayName)(blocklet),
63
+ issuerDid: blocklet.appDid,
64
+ ownerName: 'Your Name',
65
+ isDataUrl: true,
66
+ preferredColor: value || 'auto'
67
+ })
68
+ }), /*#__PURE__*/_react.default.createElement(_colorInput.default, Object.assign({}, rest, {
69
+ editing: editing,
70
+ value: editing ? color : value,
71
+ onChange: onChange,
72
+ componentProps: componentProps
73
+ })));
74
+ }
75
+
76
+ PassportInput.propTypes = _objectSpread(_objectSpread({}, _commonPropTypes.default), {}, {
77
+ componentProps: _propTypes.default.shape({
78
+ blocklet: _propTypes.default.object.isRequired
79
+ }).isRequired
80
+ });
81
+ PassportInput.defaultProps = {};
package/lib/schema-form/required.js ADDED
@@ -0,0 +1,19 @@
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 _templateObject;
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
15
+
16
+ const Required = _styled.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n &::before {\n content: '*';\n }\n"])), props => props.theme.palette.error.main);
17
+
18
+ var _default = Required;
19
+ exports.default = _default;
package/lib/schema-form/text-input.js ADDED
@@ -0,0 +1,82 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = TextInput;
7
+
8
+ var _react = _interopRequireWildcard(require("react"));
9
+
10
+ var _Box = _interopRequireDefault(require("@mui/material/Box"));
11
+
12
+ var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
13
+
14
+ var _commonPropTypes = _interopRequireDefault(require("./common-prop-types"));
15
+
16
+ const _excluded = ["editing", "description", "value", "onChange", "componentProps"];
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
+
22
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
+
24
+ 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; }
25
+
26
+ 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; }
27
+
28
+ function TextInput(_ref) {
29
+ let {
30
+ editing,
31
+ description,
32
+ value,
33
+ onChange,
34
+ componentProps
35
+ } = _ref,
36
+ rest = _objectWithoutProperties(_ref, _excluded);
37
+
38
+ const {
39
+ placeholder
40
+ } = componentProps;
41
+ const inputValue = (0, _react.useRef)(value); // enter keydown
42
+
43
+ const handleKeydown = e => {
44
+ if (e.key === 'Enter') {
45
+ onChange(inputValue.current);
46
+ }
47
+ };
48
+
49
+ const onInputChange = changeValue => {
50
+ inputValue.current = changeValue;
51
+ onChange(changeValue);
52
+ };
53
+
54
+ if (editing) {
55
+ return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({
56
+ style: {
57
+ flex: 1
58
+ },
59
+ fullWidth: true,
60
+ value: value,
61
+ onChange: e => {
62
+ e.persist();
63
+ onInputChange(e.target.value);
64
+ },
65
+ autoFocus: true,
66
+ size: "small",
67
+ variant: "outlined",
68
+ placeholder: description || placeholder,
69
+ onKeyDown: handleKeydown
70
+ }, rest));
71
+ }
72
+
73
+ return /*#__PURE__*/_react.default.createElement(_Box.default, {
74
+ px: 1,
75
+ className: "form-item-input slot"
76
+ }, value);
77
+ }
78
+
79
+ TextInput.propTypes = _commonPropTypes.default;
80
+ TextInput.defaultProps = {
81
+ componentProps: {}
82
+ };
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "access": "public"
5
5
  },
6
- "version": "1.7.25",
6
+ "version": "1.8.0",
7
7
  "description": "UX components shared across abtnode packages",
8
8
  "main": "lib/index.js",
9
9
  "files": [
@@ -21,11 +21,12 @@
21
21
  "author": "linchen <linchen1987@foxmail.com> (http://github.com/linchen1987)",
22
22
  "license": "MIT",
23
23
  "dependencies": {
24
- "@abtnode/auth": "1.7.25",
25
- "@abtnode/constant": "1.7.25",
26
- "@arcblock/did-connect": "^2.1.22",
27
- "@arcblock/ux": "^2.1.22",
28
- "@blocklet/meta": "1.7.25",
24
+ "@abtnode/auth": "1.8.0",
25
+ "@abtnode/constant": "1.8.0",
26
+ "@arcblock/did-connect": "^2.1.41",
27
+ "@arcblock/icons": "^2.1.41",
28
+ "@arcblock/ux": "^2.1.41",
29
+ "@blocklet/meta": "1.8.0",
29
30
  "@emotion/react": "^11.9.0",
30
31
  "@emotion/styled": "^11.8.1",
31
32
  "@mui/icons-material": "^5.6.2",
@@ -36,6 +37,7 @@
36
37
  "notistack": "2.0.5",
37
38
  "prop-types": "^15.7.2",
38
39
  "react": "^18.1.0",
40
+ "react-color": "^2.19.3",
39
41
  "react-router-dom": "^5.1.2",
40
42
  "react-use": "^17.3.2",
41
43
  "styled-components": "^5.0.1"
@@ -49,5 +51,5 @@
49
51
  "babel-plugin-inline-react-svg": "^1.1.1",
50
52
  "babel-plugin-styled-components": "^1.10.7"
51
53
  },
52
- "gitHead": "a500728739278c8a9464cf631a811ddfc4838fad"
54
+ "gitHead": "6446a85fb33721abc24bb1045d59158e6b96c241"
53
55
  }