@ant-design/pro-flow/es/EditableText/index.js

A React based Flow components

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { EditOutlined } from '@ant-design/icons';
import { ActionIcon } from '@ant-design/pro-editor';
import { memo, useState } from 'react';
import { Flexbox } from 'react-layout-kit';
import { ControlInput } from "../ControlInput";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var EditableText = /*#__PURE__*/memo(function (_ref) {
  var value = _ref.value,
    onChange = _ref.onChange;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    edited = _useState2[0],
    setEdited = _useState2[1];
  return edited ? /*#__PURE__*/_jsx(ControlInput, {
    onChange: onChange,
    onChangeEnd: function onChangeEnd() {
      setEdited(false);
    },
    value: value
  }) : /*#__PURE__*/_jsxs(Flexbox, {
    gap: 8,
    align: "center",
    horizontal: true,
    children: [/*#__PURE__*/_jsx("span", {
      style: {
        lineHeight: 1
      },
      children: value
    }), /*#__PURE__*/_jsx(ActionIcon, {
      icon: /*#__PURE__*/_jsx(EditOutlined, {}),
      onClick: function onClick() {
        setEdited(!edited);
      },
      placement: "right",
      title: 'Edit'
    })]
  });
});
export default EditableText;