@flatbiz/antd
Version:
202 lines (198 loc) • 7.39 kB
JavaScript
/*! @flatjs/forge MIT @flatbiz/antd */
import { classNames } from '@dimjs/utils/class-names/class-names';
import { a as _slicedToArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-BspM60Sw.js';
import _CloseOutlined from '@ant-design/icons/es/icons/CloseOutlined.js';
import _CheckOutlined from '@ant-design/icons/es/icons/CheckOutlined.js';
import { isNumber } from '@dimjs/lang/is-number';
import { isString } from '@dimjs/lang/is-string';
import { isArray } from '@dimjs/lang/is-array';
import _EditOutlined from '@ant-design/icons/es/icons/EditOutlined.js';
import { useState, useContext, useRef, useMemo, useEffect, Fragment } from 'react';
import { Space } from 'antd';
import { isUndefinedOrNull } from '@flatbiz/utils';
import { E as EditableFieldContext } from './context-HuMVSP3b.js';
import { fbaHooks } from './fba-hooks/index.js';
import { I as IconWrapper } from './icon-wrapper-DE97bI14.js';
import { jsx, jsxs } from 'react/jsx-runtime';
/**
* 可编辑字段组件
* @param props
* @returns
* ```
* 字段渲染有两种状态
* 1. 只读：如果value类型为复杂格式，必须要通过【viewRender】来进行处理操作，转成简单数据类型
* 2. 编辑：参数value的格式要求必须满足编辑组件入参value要求
* 3. 可自定义编辑Icon、确定Icon、取消Icon
* 4. 可拦截编辑操作、确定操作
* ```
*/
var EditableField = function EditableField(props) {
var value = props.value,
onChange = props.onChange,
viewRender = props.viewRender,
_props$placeholderVal = props.placeholderValue,
placeholderValue = _props$placeholderVal === void 0 ? '-' : _props$placeholderVal,
editRender = props.editRender,
isEditFull = props.isEditFull,
onClickEditIconPre = props.onClickEditIconPre,
onClickConfirmIconPre = props.onClickConfirmIconPre,
iconConfig = props.iconConfig,
onEditCallback = props.onEditCallback,
onConfirmCallback = props.onConfirmCallback,
showEditable = props.showEditable;
var _useState = useState(showEditable),
_useState2 = _slicedToArray(_useState, 2),
isEdit = _useState2[0],
setIsEdit = _useState2[1];
var ctx = useContext(EditableFieldContext);
var originalValue = useRef(value);
var showEditableIcon = props.showEditableIcon === undefined ? true : props.showEditableIcon;
var showEditableIconNew = function () {
if (ctx.isCtx) {
return props.showEditableIcon === undefined ? ctx.showEditableIcon : showEditableIcon;
}
return showEditableIcon;
}();
var readonly = useMemo(function () {
if (ctx.isCtx) {
return props.readonly === undefined ? ctx.readonly : props.readonly;
}
return props.readonly;
}, [ctx.isCtx, ctx.readonly, props.readonly]);
useEffect(function () {
if (ctx.isCtx) {
setIsEdit(props.showEditable === undefined ? ctx.showEditable : props.showEditable);
} else {
setIsEdit(props.showEditable);
}
}, [ctx.showEditable, ctx.isCtx, props.showEditable]);
var theme = fbaHooks.useThemeToken();
var onClickEditIcon = function onClickEditIcon() {
return new Promise(function ($return, $error) {
if (onClickEditIconPre) {
return Promise.resolve(onClickEditIconPre(value)).then(function ($await_3) {
try {
return $If_1.call(this);
} catch ($boundEx) {
return $error($boundEx);
}
}.bind(this), $error);
}
function $If_1() {
originalValue.current = value;
setIsEdit(true);
onEditCallback === null || onEditCallback === void 0 || onEditCallback(value);
return $return();
}
return $If_1.call(this);
});
};
var editIcon = iconConfig !== null && iconConfig !== void 0 && iconConfig.editIcon ? iconConfig.editIcon({
onClick: onClickEditIcon
}) : /*#__PURE__*/jsx(IconWrapper, {
size: "small",
icon: /*#__PURE__*/jsx(_EditOutlined, {}),
onClick: onClickEditIcon
});
var onCancel = function onCancel() {
if (value !== originalValue.current) {
onChange === null || onChange === void 0 || onChange(originalValue.current);
}
setIsEdit(false);
};
var onEditChange = function onEditChange(value) {
var target = value;
/** 为了处理 Input、TextArea等onChange取值 */
if (typeof value === 'object' && value !== null && !isArray(value) && value.target) {
var _value$target;
var _value = (_value$target = value.target) === null || _value$target === void 0 ? void 0 : _value$target.value;
if (isString(_value) || isNumber(_value) || isUndefinedOrNull(_value)) {
var _value$target2;
target = (_value$target2 = value.target) === null || _value$target2 === void 0 ? void 0 : _value$target2.value;
}
}
onChange === null || onChange === void 0 || onChange(target);
};
var onOk = function onOk() {
return new Promise(function ($return, $error) {
if (onClickConfirmIconPre) {
return Promise.resolve(onClickConfirmIconPre(value, originalValue.current)).then(function ($await_4) {
try {
return $If_2.call(this);
} catch ($boundEx) {
return $error($boundEx);
}
}.bind(this), $error);
}
function $If_2() {
setIsEdit(false);
onConfirmCallback === null || onConfirmCallback === void 0 || onConfirmCallback(value, originalValue.current);
return $return();
}
return $If_2.call(this);
});
};
var confirmIcon = iconConfig !== null && iconConfig !== void 0 && iconConfig.confirmIcon ? iconConfig.confirmIcon({
onClick: onOk
}) : /*#__PURE__*/jsx(IconWrapper, {
size: "small",
icon: /*#__PURE__*/jsx(_CheckOutlined, {
style: {
color: theme.colorPrimary
}
}),
onClick: onOk
});
var cancelIcon = iconConfig !== null && iconConfig !== void 0 && iconConfig.cancelIcon ? iconConfig.cancelIcon({
onClick: onCancel
}) : /*#__PURE__*/jsx(IconWrapper, {
size: "small",
icon: /*#__PURE__*/jsx(_CloseOutlined, {
style: {
color: theme.colorPrimary
}
}),
onClick: onCancel
});
var editRenderElement = typeof editRender === 'function' ? editRender({
value: value,
onChange: onEditChange
}) : editRender;
var viewValue = (viewRender ? viewRender(props.value) : props.value) || placeholderValue;
if (readonly) {
return /*#__PURE__*/jsx(Fragment, {
children: viewValue
});
}
if (!isEdit) {
if (!showEditableIconNew) {
return viewValue;
}
return /*#__PURE__*/jsxs(Space, {
size: 8,
children: [/*#__PURE__*/jsx("span", {
children: viewValue
}), editIcon]
});
}
if (!showEditableIconNew) {
return /*#__PURE__*/jsx(editRenderElement.type, _objectSpread2({
value: value,
onChange: onEditChange
}, editRenderElement.props));
}
return /*#__PURE__*/jsxs(Space, {
direction: "horizontal",
size: 12,
style: props.style,
className: classNames('editable-field', {
'editable-field-full': isEditFull
}, props.className),
children: [/*#__PURE__*/jsx(editRenderElement.type, _objectSpread2({
value: value,
onChange: onEditChange
}, editRenderElement.props)), confirmIcon, cancelIcon]
});
};
export { EditableField as E };
//# sourceMappingURL=editable-field-DBiVpCRE.js.map