@pisell/materials 6.9.4 → 6.11.1

package/lib/components/pisellSingleSelect/PisellSingleSelect.stories.js

@@ -0,0 +1,444 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellSingleSelect/PisellSingleSelect.stories.tsx
+var PisellSingleSelect_stories_exports = {};
+__export(PisellSingleSelect_stories_exports, {
+  AllStates: () => AllStates,
+  Basic: () => Basic,
+  CustomFilter: () => CustomFilter,
+  Disabled: () => Disabled,
+  InForm: () => InForm,
+  ReadOnly: () => ReadOnly,
+  ReadOnlyEmpty: () => ReadOnlyEmpty,
+  Sizes: () => Sizes,
+  WithCallbacks: () => WithCallbacks,
+  WithClear: () => WithClear,
+  WithError: () => WithError,
+  WithHelperText: () => WithHelperText,
+  WithLabel: () => WithLabel,
+  WithSearch: () => WithSearch,
+  default: () => PisellSingleSelect_stories_default
+});
+module.exports = __toCommonJS(PisellSingleSelect_stories_exports);
+var import_PisellSingleSelect = __toESM(require("./PisellSingleSelect"));
+var import_react = require("react");
+var import_antd = require("antd");
+var import_react2 = __toESM(require("react"));
+var meta = {
+  title: "Components/PisellSingleSelect",
+  component: import_PisellSingleSelect.default,
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: "text",
+      description: "当前选中值"
+    },
+    placeholder: {
+      control: "text",
+      description: "占位符文本"
+    },
+    disabled: {
+      control: "boolean",
+      description: "是否禁用"
+    },
+    readOnly: {
+      control: "boolean",
+      description: "是否只读"
+    },
+    showSearch: {
+      control: "boolean",
+      description: "是否显示搜索框"
+    },
+    allowClear: {
+      control: "boolean",
+      description: "是否显示清空按钮"
+    },
+    size: {
+      control: "radio",
+      options: ["small", "medium", "large"],
+      description: "尺寸"
+    },
+    error: {
+      control: "boolean",
+      description: "是否显示错误状态"
+    },
+    required: {
+      control: "boolean",
+      description: "是否必填"
+    }
+  }
+};
+var PisellSingleSelect_stories_default = meta;
+var fruitOptions = [
+  { value: "apple", label: "苹果" },
+  { value: "banana", label: "香蕉" },
+  { value: "orange", label: "橙子" },
+  { value: "grape", label: "葡萄" },
+  { value: "watermelon", label: "西瓜" }
+];
+var cityOptions = [
+  { value: "beijing", label: "北京" },
+  { value: "shanghai", label: "上海" },
+  { value: "guangzhou", label: "广州" },
+  { value: "shenzhen", label: "深圳" },
+  { value: "chengdu", label: "成都" },
+  { value: "hangzhou", label: "杭州" },
+  { value: "wuhan", label: "武汉" },
+  { value: "xian", label: "西安" }
+];
+var Basic = {
+  args: {
+    options: fruitOptions,
+    placeholder: "请选择一种水果"
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)(args.value);
+    return /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        ...args,
+        value,
+        onChange: (val) => setValue(val)
+      }
+    );
+  }
+};
+var WithLabel = {
+  args: {
+    options: fruitOptions,
+    label: "最爱水果",
+    placeholder: "请选择",
+    required: true
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)(null);
+    return /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        ...args,
+        value,
+        onChange: (val) => setValue(val)
+      }
+    );
+  }
+};
+var WithHelperText = {
+  args: {
+    options: fruitOptions,
+    label: "选择水果",
+    helperText: "请选择你最喜欢的水果",
+    placeholder: "请选择"
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)(null);
+    return /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        ...args,
+        value,
+        onChange: (val) => setValue(val)
+      }
+    );
+  }
+};
+var WithSearch = {
+  args: {
+    options: cityOptions,
+    label: "选择城市",
+    placeholder: "搜索城市...",
+    showSearch: true
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)(null);
+    return /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        ...args,
+        value,
+        onChange: (val) => setValue(val),
+        onSearch: (keyword) => console.log("搜索关键词:", keyword)
+      }
+    );
+  }
+};
+var WithClear = {
+  args: {
+    options: fruitOptions,
+    label: "选择水果",
+    placeholder: "请选择",
+    allowClear: true
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)("apple");
+    return /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        ...args,
+        value,
+        onChange: (val) => setValue(val)
+      }
+    );
+  }
+};
+var Disabled = {
+  args: {
+    options: fruitOptions,
+    label: "选择水果",
+    value: "apple",
+    disabled: true
+  }
+};
+var ReadOnly = {
+  args: {
+    options: fruitOptions,
+    label: "选择水果",
+    value: "apple",
+    readOnly: true
+  }
+};
+var ReadOnlyEmpty = {
+  args: {
+    options: fruitOptions,
+    label: "选择水果",
+    value: null,
+    readOnly: true
+  }
+};
+var WithError = {
+  args: {
+    options: fruitOptions,
+    label: "选择水果",
+    placeholder: "请选择",
+    required: true,
+    error: true,
+    errorText: "此项为必填项，请选择"
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)(null);
+    return /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        ...args,
+        value,
+        onChange: (val) => setValue(val)
+      }
+    );
+  }
+};
+var Sizes = {
+  render: () => {
+    const [small, setSmall] = (0, import_react.useState)("apple");
+    const [medium, setMedium] = (0, import_react.useState)("banana");
+    const [large, setLarge] = (0, import_react.useState)("orange");
+    return /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 24 } }, /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        options: fruitOptions,
+        label: "Small 尺寸",
+        size: "small",
+        value: small,
+        onChange: setSmall
+      }
+    ), /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        options: fruitOptions,
+        label: "Medium 尺寸（默认）",
+        size: "medium",
+        value: medium,
+        onChange: setMedium
+      }
+    ), /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        options: fruitOptions,
+        label: "Large 尺寸",
+        size: "large",
+        value: large,
+        onChange: setLarge
+      }
+    ));
+  }
+};
+var InForm = {
+  render: () => {
+    const [fruit, setFruit] = (0, import_react.useState)(null);
+    const [city, setCity] = (0, import_react.useState)(null);
+    return /* @__PURE__ */ import_react2.default.createElement(import_antd.Form, { layout: "vertical", style: { maxWidth: 400 } }, /* @__PURE__ */ import_react2.default.createElement(import_antd.Form.Item, { label: "最爱水果（必填）" }, /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        options: fruitOptions,
+        value: fruit,
+        onChange: setFruit,
+        placeholder: "请选择水果",
+        required: true
+      }
+    )), /* @__PURE__ */ import_react2.default.createElement(import_antd.Form.Item, { label: "所在城市" }, /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        options: cityOptions,
+        value: city,
+        onChange: setCity,
+        placeholder: "请选择城市",
+        showSearch: true,
+        allowClear: true
+      }
+    )));
+  }
+};
+var CustomFilter = {
+  render: () => {
+    const [value, setValue] = (0, import_react.useState)(null);
+    return /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        options: cityOptions,
+        label: "选择城市（支持拼音搜索）",
+        placeholder: "输入城市名或拼音...",
+        showSearch: true,
+        value,
+        onChange: setValue,
+        filterOption: (input, option) => {
+          const searchText = input.toLowerCase();
+          return option.label.toLowerCase().includes(searchText);
+        }
+      }
+    );
+  }
+};
+var WithCallbacks = {
+  render: () => {
+    const [value, setValue] = (0, import_react.useState)(null);
+    const [logs, setLogs] = (0, import_react.useState)([]);
+    const addLog = (message) => {
+      setLogs((prev) => [
+        ...prev,
+        `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${message}`
+      ]);
+    };
+    return /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        options: fruitOptions,
+        label: "选择水果",
+        value,
+        onChange: (val, option) => {
+          setValue(val);
+          addLog(`onChange: ${val} - ${option == null ? void 0 : option.label}`);
+        },
+        onFocus: () => addLog("onFocus 触发"),
+        onBlur: () => addLog("onBlur 触发"),
+        onSearch: (keyword) => addLog(`onSearch: ${keyword}`),
+        onDropdownVisibleChange: (visible) => addLog(`下拉框${visible ? "打开" : "关闭"}`),
+        showSearch: true,
+        allowClear: true
+      }
+    ), /* @__PURE__ */ import_react2.default.createElement(
+      "div",
+      {
+        style: {
+          marginTop: 16,
+          padding: 12,
+          background: "#f5f5f5",
+          borderRadius: 4
+        }
+      },
+      /* @__PURE__ */ import_react2.default.createElement("strong", null, "事件日志："),
+      /* @__PURE__ */ import_react2.default.createElement("div", { style: { maxHeight: 200, overflow: "auto", marginTop: 8 } }, logs.map((log, index) => /* @__PURE__ */ import_react2.default.createElement("div", { key: index, style: { fontSize: 12, padding: "4px 0" } }, log)))
+    ));
+  }
+};
+var AllStates = {
+  render: () => {
+    const [value1, setValue1] = (0, import_react.useState)("apple");
+    const [value2, setValue2] = (0, import_react.useState)(null);
+    return /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 24 } }, /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        options: fruitOptions,
+        label: "正常状态",
+        value: value1,
+        onChange: setValue1
+      }
+    ), /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        options: fruitOptions,
+        label: "禁用态",
+        value: "apple",
+        disabled: true
+      }
+    ), /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        options: fruitOptions,
+        label: "只读态",
+        value: "banana",
+        readOnly: true
+      }
+    ), /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        options: fruitOptions,
+        label: "错误状态（必填）",
+        value: value2,
+        onChange: setValue2,
+        required: true,
+        error: true,
+        errorText: "此项为必填项，请选择"
+      }
+    ), /* @__PURE__ */ import_react2.default.createElement(
+      import_PisellSingleSelect.default,
+      {
+        options: fruitOptions,
+        label: "带辅助文本",
+        helperText: "请选择你最喜欢的水果",
+        value: value1,
+        onChange: setValue1
+      }
+    ));
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AllStates,
+  Basic,
+  CustomFilter,
+  Disabled,
+  InForm,
+  ReadOnly,
+  ReadOnlyEmpty,
+  Sizes,
+  WithCallbacks,
+  WithClear,
+  WithError,
+  WithHelperText,
+  WithLabel,
+  WithSearch
+});

package/lib/components/pisellSingleSelect/components/DisabledView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * PisellSingleSelect - DisabledView (禁用态视图)
+ * 禁用状态下的渲染
+ */
+import React from 'react';
+import type { DisabledViewProps } from '../types';
+declare const DisabledView: React.ForwardRefExoticComponent<DisabledViewProps<string | number> & React.RefAttributes<any>>;
+export default DisabledView;

package/lib/components/pisellSingleSelect/components/DisabledView.js

@@ -0,0 +1,81 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellSingleSelect/components/DisabledView.tsx
+var DisabledView_exports = {};
+__export(DisabledView_exports, {
+  default: () => DisabledView_default
+});
+module.exports = __toCommonJS(DisabledView_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var DisabledView = (0, import_react.forwardRef)((props, ref) => {
+  const {
+    value,
+    options,
+    label,
+    required,
+    placeholder = "请选择",
+    size = "middle",
+    className,
+    style,
+    ...restProps
+  } = props;
+  const antdOptions = (0, import_react.useMemo)(
+    () => options.map((opt) => ({
+      label: opt.label,
+      value: opt.value,
+      disabled: opt.disabled
+    })),
+    [options]
+  );
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-single-select-wrapper", className), style }, label && /* @__PURE__ */ import_react.default.createElement(
+    "label",
+    {
+      className: (0, import_classnames.default)("pisell-single-select-label", {
+        "pisell-single-select-label-required": required
+      })
+    },
+    label
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Select,
+    {
+      ...restProps,
+      ref,
+      value: value ?? void 0,
+      options: antdOptions,
+      placeholder,
+      disabled: true,
+      size,
+      className: "pisell-single-select"
+    }
+  ));
+});
+DisabledView.displayName = "PisellSingleSelectDisabledView";
+var DisabledView_default = DisabledView;

package/lib/components/pisellSingleSelect/components/EditView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * PisellSingleSelect - EditView (编辑态视图)
+ * 正常可编辑状态下的渲染
+ */
+import React from 'react';
+import type { EditViewProps } from '../types';
+declare const EditView: React.ForwardRefExoticComponent<EditViewProps<string | number> & React.RefAttributes<any>>;
+export default EditView;

package/lib/components/pisellSingleSelect/components/EditView.js

@@ -0,0 +1,141 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellSingleSelect/components/EditView.tsx
+var EditView_exports = {};
+__export(EditView_exports, {
+  default: () => EditView_default
+});
+module.exports = __toCommonJS(EditView_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_classnames = __toESM(require("classnames"));
+var import_utils = require("@pisell/utils");
+var EditView = (0, import_react.forwardRef)((props, ref) => {
+  const {
+    value,
+    options,
+    label,
+    helperText,
+    error,
+    errorText,
+    required,
+    placeholder = "请选择",
+    showSearch = false,
+    allowClear = false,
+    size = "middle",
+    className,
+    style,
+    onSearch,
+    filterOption,
+    onChange,
+    ...restProps
+  } = props;
+  const antdOptions = (0, import_react.useMemo)(
+    () => options.map((opt) => ({
+      label: opt.label,
+      value: opt.value,
+      disabled: opt.disabled
+    })),
+    [options]
+  );
+  const handleChange = (newValue) => {
+    const selectedOption = options.find((opt) => opt.value === newValue);
+    onChange == null ? void 0 : onChange(newValue ?? null, selectedOption ?? null);
+  };
+  const [searchKeyword, setSearchKeyword] = (0, import_react.useState)("");
+  const [, setSearchInput] = (0, import_utils.useDebouncedSearch)("", 300, (text) => {
+    onSearch == null ? void 0 : onSearch(text);
+  });
+  const handleSearchInput = (e) => {
+    const text = e.target.value;
+    setSearchKeyword(text);
+    setSearchInput(text);
+  };
+  const filteredAntdOptions = (0, import_react.useMemo)(() => {
+    if (!showSearch || !searchKeyword) return antdOptions;
+    if (filterOption) {
+      return antdOptions.filter((opt) => {
+        const selectOption = options.find((o) => o.value === opt.value);
+        return selectOption ? filterOption(searchKeyword, selectOption) : false;
+      });
+    }
+    return antdOptions.filter(
+      (opt) => opt.label.toLowerCase().includes(searchKeyword.toLowerCase())
+    );
+  }, [antdOptions, searchKeyword, showSearch, filterOption, options]);
+  const menuItemSelectedIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, { style: { color: "#7F56D9", fontSize: 16 } });
+  const dropdownRender = (0, import_react.useCallback)(
+    (menu) => {
+      if (!showSearch) return menu;
+      return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-select-search-wrapper" }, /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Input,
+        {
+          placeholder: "Search",
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, { style: { color: "#98A2B3", fontSize: 16 } }),
+          value: searchKeyword,
+          onChange: handleSearchInput,
+          className: "pisell-select-search-input",
+          bordered: false,
+          autoFocus: true
+        }
+      )), menu);
+    },
+    [showSearch, searchKeyword, handleSearchInput]
+  );
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-single-select-wrapper", className), style }, label && /* @__PURE__ */ import_react.default.createElement(
+    "label",
+    {
+      className: (0, import_classnames.default)("pisell-single-select-label", {
+        "pisell-single-select-label-required": required
+      })
+    },
+    label
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Select,
+    {
+      ...restProps,
+      ref,
+      value: value ?? void 0,
+      options: filteredAntdOptions,
+      placeholder,
+      showSearch: false,
+      allowClear,
+      menuItemSelectedIcon,
+      dropdownRender,
+      onChange: handleChange,
+      size,
+      className: (0, import_classnames.default)("pisell-single-select", {
+        "pisell-single-select-error": error
+      })
+    }
+  ), helperText && !error && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-single-select-helper-text" }, helperText), error && errorText && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-single-select-error-text" }, errorText));
+});
+EditView.displayName = "PisellSingleSelectEditView";
+var EditView_default = EditView;

package/lib/components/pisellSingleSelect/components/ReadOnlyView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * PisellSingleSelect - ReadOnlyView (只读态视图)
+ * 只读状态下的渲染
+ */
+import React from 'react';
+import type { ReadOnlyViewProps } from '../types';
+declare const ReadOnlyView: React.FC<ReadOnlyViewProps>;
+export default ReadOnlyView;