@flatbiz/antd/dist/editable-field-DtbgD32w.js

/*! @flatjs/forge MIT @flatbiz/antd */

import { classNames } from '@dimjs/utils/class-names/class-names';
import { a as _slicedToArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-BYm17lo8.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-HJ2r5GeZ.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-DtbgD32w.js.map