oadp-material
Version:
oadp-material
164 lines (158 loc) • 6.57 kB
JavaScript
import _Box from "@alifd/next/es/box";
import _Button from "@alifd/next/es/button";
import _Input from "@alifd/next/es/input";
import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["children", "entity", "value", "defaultValue", "label", "style", "type", "size", "onClick", "queryAttributeList", "disabled", "__designMode"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useEffect, useState, useCallback, useMemo } from 'react';
import "./index.scss";
import { entityMetadataUtil } from 'oadp-common';
import OadpAttributeSettingTransfer from "../common/oadp-attribute-setting-transfer";
// oadp-filter 组件定义
// oadp-filter 组件实例
var OadpEntityButtonReadFast = function OadpEntityButtonReadFast(_ref) {
var children = _ref.children,
entity = _ref.entity,
value = _ref.value,
defaultValue = _ref.defaultValue,
label = _ref.label,
style = _ref.style,
type = _ref.type,
size = _ref.size,
onClick = _ref.onClick,
queryAttributeList = _ref.queryAttributeList,
disabled = _ref.disabled,
__designMode = _ref.__designMode,
otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
// 使用 useState 管理 Input 的值
var _useState = useState(defaultValue || ''),
inputValue = _useState[0],
setInputValue = _useState[1];
var _useState2 = useState([]),
attributeShowDataSource = _useState2[0],
setAttributeShowDataSource = _useState2[1];
var _useState3 = useState([]),
attributeDataSource = _useState3[0],
setAttributeDataSource = _useState3[1];
// 初始化逻辑（类似类组件的 componentDidMount）
useEffect(function () {
var fetchAttributeData = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var attributeData, textAttributeDataSource;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.prev = 0;
console.log('OadpEntityButtonReadFast componentDidMount props', {
entity: entity
});
if (entity) {
_context.next = 5;
break;
}
console.log('OadpEntityButtonReadFast componentDidMount entity is undefined');
return _context.abrupt("return");
case 5:
_context.next = 7;
return entityMetadataUtil.asyncSelectAttributeListWithReferByEntityId(entity);
case 7:
attributeData = _context.sent;
console.log('OadpEntityButtonReadFast componentDidMount attributeData', attributeData);
textAttributeDataSource = [];
attributeData.list.forEach(function (item) {
var _item$attributeType, _item$attributeType2;
if (((_item$attributeType = item.attributeType) === null || _item$attributeType === void 0 ? void 0 : _item$attributeType.code) === 'TEXT' || ((_item$attributeType2 = item.attributeType) === null || _item$attributeType2 === void 0 ? void 0 : _item$attributeType2.code) === 'MULTI_TEXT') {
textAttributeDataSource.push(_extends({}, item, {
label: item.name,
value: item.id
}));
}
});
setAttributeDataSource(textAttributeDataSource);
_context.next = 17;
break;
case 14:
_context.prev = 14;
_context.t0 = _context["catch"](0);
console.error('OadpEntityButtonReadFast componentDidMount Failed to fetch field options:', _context.t0);
case 17:
case "end":
return _context.stop();
}
}, _callee, null, [[0, 14]]);
}));
return function fetchAttributeData() {
return _ref2.apply(this, arguments);
};
}();
fetchAttributeData();
setAttributeShowDataSource(queryAttributeList);
}, [entity, queryAttributeList]);
// 派生placeholder
var placeholder = useMemo(function () {
try {
var validData = attributeShowDataSource || [];
var names = validData.map(function (id) {
var _attributeDataSource$;
return (_attributeDataSource$ = attributeDataSource.find(function (a) {
return a.id === id;
})) === null || _attributeDataSource$ === void 0 ? void 0 : _attributeDataSource$.name;
}).filter(Boolean);
return names.length ? "\u8BF7\u8F93\u5165" + names.join('/') : '请输入';
} catch (e) {
console.error('Placeholder generation error:', e);
return '请输入';
}
}, [attributeShowDataSource, attributeDataSource]);
// 处理 Input 的 onChange 事件
var handleInputChange = function handleInputChange(value, event, reason) {
setInputValue(value.toString());
};
// 处理 Button 的 onClick 事件
var handleButtonClick = function handleButtonClick() {
if (__designMode === 'design') {
console.log('OadpEntityButtonReadFast handleButtonClick __designMode === design');
return;
}
if (onClick) {
console.log('OadpEntityButtonReadFast click inputValue', inputValue);
onClick(inputValue);
}
};
var handleDialogOk = useCallback(function (localValues) {
setAttributeShowDataSource([].concat(localValues));
}, []);
return /*#__PURE__*/React.createElement(_Box, {
direction: "row",
justify: "center",
align: "center"
}, /*#__PURE__*/React.createElement(_Input, _extends({
value: inputValue,
type: "text",
placeholder: placeholder,
defaultValue: defaultValue,
onChange: handleInputChange,
disabled: disabled,
size: size,
hasClear: true,
hoverShowClear: true,
style: {
width: 400
}
}, otherProps)), /*#__PURE__*/React.createElement(_Button, {
type: type,
size: size
// style={ style || { width: '60%' }}
,
disabled: disabled,
onClick: handleButtonClick
}, label), /*#__PURE__*/React.createElement(OadpAttributeSettingTransfer, {
attributeDataSource: attributeDataSource,
attributeShowDataSource: attributeShowDataSource,
onConfirm: handleDialogOk,
__designMode: __designMode
}));
};
export default OadpEntityButtonReadFast;