@hw-component/form 1.9.70 → 1.9.72

package/src/components/Form/config.ts

@@ -22,6 +22,8 @@ import TrimInput from "../Input/TrimInput";
 import TrimTextArea from "../TextArea/TrimTextArea";
 import HInputNumberGroup from "../Input/InputNumberGroup";
 import HText from "../Text";
+import HRichEditor from "../RichEditor";
+
 export const placeholderConfig = {
   inputType: [
     "input",
@@ -32,6 +34,7 @@ export const placeholderConfig = {
     "trimInput",
     "urlUpload",
     "textArea",
+    "richEditor",
   ],
   selectType: [
     "select",
@@ -66,6 +69,7 @@ const componentConfig = {
   inputNumberGroup: HInputNumberGroup,
   treeSelect: HTreeSelect,
   text: HText,
+  richEditor: HRichEditor,
 };
 
 export default componentConfig;

package/src/components/Form/hooks/index.ts

@@ -128,3 +128,7 @@ export const useValuesChange = ({
     onValuesChange?.(changedValues, values);
   };
 };
+
+export const useAddFormat=()=>{
+
+}

package/src/components/Form/hooks/useAddFormat.tsx

@@ -0,0 +1,44 @@
+import {addFormatItemModal, HFormItemProps} from "../modal";
+import {useFormContext} from "@/components/Form/Context";
+import {useEffect} from "react";
+
+interface ResultModal {
+    inputValue?: (value: Record<string, any>) => Record<string, any>;
+    outputValue?: (value: Record<string, any>) => Record<string, any>;
+}
+
+export const formatMaker = (
+    itemProps: HFormItemProps,
+    formats?: addFormatItemModal
+) => {
+    const { inputValue, outputValue } = formats || {};
+    const { initValueProvider = inputValue, subProvider = outputValue } =
+        itemProps;
+    const resultObj: ResultModal = {};
+    if (initValueProvider) {
+        resultObj.inputValue = (value) => {
+            return initValueProvider(itemProps, value);
+        };
+    }
+    if (subProvider) {
+        resultObj.outputValue = (value) => {
+            return subProvider(itemProps, value);
+        };
+    }
+    const keysLen = Object.keys(resultObj).length;
+    return keysLen === 0 ? undefined : resultObj;
+};
+
+
+
+export default (props:HFormItemProps)=>{
+    const {name,itemProps}=props;
+    const { form, valueType = "float" } = useFormContext();
+    const relName = Array.isArray(name) ? name.join(".") : name;
+    useEffect(() => {
+        if (!relName||!itemProps) {
+            return;
+        }
+        form?.addFormat(relName, formatMaker((itemProps as HFormItemProps)));
+    }, [valueType, props]);
+}

package/src/components/Form/index.less

@@ -96,8 +96,9 @@
     overflow: visible;
   }
 }
-.@{ant-prefix}-hw-form-item-row{
-  .@{ant-prefix}-form-item-control-input-content>.@{ant-prefix}-space-vertical{
-      display: flex;
+.@{ant-prefix}-hw-form-item-row {
+  .@{ant-prefix}-form-item-control-input-content
+    > .@{ant-prefix}-space-vertical {
+    display: flex;
   }
 }

package/src/components/Form/modal.ts

@@ -93,7 +93,7 @@ export interface HItemProps
   labelWidth?: number;
   hide?: boolean | HideModal;
   placeholder?: string | string[];
-  name?: string | any [];
+  name?: string | any[];
   dispatch?: DispatchModal;
   itemSpan?: ColProps;
   hideLabel?: boolean;
@@ -102,7 +102,7 @@ export interface HItemProps
   hidden?: boolean | HideModal;
   rowWrapper?: boolean;
   nameKey?: string;
-  flexBox?:boolean;
+  flexBox?: boolean;
 }
 interface InfoRequestOp extends BaseOptions<any, any> {
   request: PromiseFnResult;
@@ -126,7 +126,7 @@ export interface HFormProps<T = any, R = any>
   itemProps?: ItemPropsType;
   dismissOnPressEnter?: boolean;
   rowWrapper?: boolean;
-  flexBox?:boolean;
+  flexBox?: boolean;
 }
 export interface HFormItemProps extends HItemProps {
   required?: boolean;
@@ -157,6 +157,11 @@ interface ConfigUploadProps {
   maxSize?: number;
   request?: PromiseFnResult;
 }
+
+interface ConfigRichEditorProps {
+  fileRequest?: PromiseFnResult;
+  valueType?: "html" | "state";
+}
 export type ComponentModal =
   | React.FunctionComponent<any>
   | React.ComponentClass<any>
@@ -179,6 +184,7 @@ export interface IFormConfigContextProps {
   defaultComponent?: DefaultComponentModal;
   formItemStyle?: React.CSSProperties;
   itemProps?: ItemPropsType;
+  richEditorProps?: ConfigRichEditorProps;
 }
 interface ActionModal {
   key: string;

package/src/components/InputGroup/index.tsx

@@ -6,7 +6,7 @@ interface HInputGroupProps<T = any> {
   value?: T;
   onChange?: (value: T) => void;
   addonBefore?: React.ReactNode;
-  className?:string;
+  className?: string;
 }
 const Addon: React.FC<HInputGroupProps> = ({ children, value, onChange }) => {
   const addonClassname = useClassName(["hw-addon"]);
@@ -28,7 +28,7 @@ const Index: React.FC<HInputGroupProps> = ({
   addonBefore,
   children,
   value,
-                                             className="",
+  className = "",
   onChange,
   ...props
 }) => {

package/src/components/RichEditor/hooks.ts

@@ -0,0 +1,83 @@
+import { useFormConfigContext } from "../Form/Context/FormConfigProvider";
+import { baseConfig } from "../config";
+import { IHRichEditorProps } from "src/components/RichEditor/modal";
+import { useClassName } from "../hooks";
+import { useEffect, useMemo, useRef, useState } from "react";
+import BraftEditor, {EditorState} from "braft-editor";
+
+export const useProps = ({ fileRequest, valueType }: IHRichEditorProps) => {
+  const {
+    fileRequest: contextFileRequest = fileRequest,
+    valueType: contextValueType = valueType,
+  } = useFormConfigContext("richEditorProps");
+  const cuRequest =
+    fileRequest === null
+      ? baseConfig.richEditorProps?.fileRequest
+      : contextFileRequest;
+  return {
+    fileRequest: cuRequest,
+    valueType: contextValueType,
+  };
+};
+
+export const useFocusClassname = ({
+  bordered,
+  onFocus: focusProps,
+  onBlur: blurProps,
+}: IHRichEditorProps) => {
+  const styleFocusClassName = useClassName("hw-rich-editor-focus");
+  const [focusClassname, setFocusClassname] = useState("");
+  const onFocus = (editState) => {
+    focusProps?.(editState);
+    if (!bordered) {
+      setFocusClassname("");
+      return;
+    }
+    setFocusClassname(styleFocusClassName);
+  };
+  const onBlur = (editState) => {
+    setFocusClassname("");
+    blurProps?.(editState);
+  };
+  return {
+    focusClassname,
+    onFocus,
+    onBlur,
+  };
+};
+
+export const useVC=({value,onChange,valueType}:IHRichEditorProps)=>{
+    const richValue: EditorState | undefined = valueType === "html" ? BraftEditor.createEditorState(value) : (value as EditorState);
+    const change = (editorState) => {
+        const changeVal = valueType === "html" ? editorState.toHTML() : editorState;
+        const isEmpty = !!richValue ? richValue.isEmpty() : true;
+        if (isEmpty && editorState.isEmpty()) {
+            return;
+        }
+        onChange?.(changeVal);
+    };
+    return {
+        richValue,
+        change
+    }
+}
+
+
+export const useUploadFn=({fileRequest}:IHRichEditorProps)=>{
+    return async (params)=>{
+        const { file, id } = params;
+        const { url } = await fileRequest?.(file, params);
+        params.success({
+            url,
+            meta: {
+                id,
+                title: file.name,
+                alt: "媒体资源",
+                loop: false,
+                autoPlay: false,
+                controls: true,
+                poster: url,
+            },
+        });
+    }
+}

package/src/components/RichEditor/index.less

@@ -0,0 +1,26 @@
+@import "../styles/local.less";
+.@{ant-prefix}-hw-rich-editor {
+  box-sizing: border-box;
+  width: 100%;
+  .bf-container .public-DraftEditorPlaceholder-root {
+    color: #bfbfbf;
+    font-size: 14px;
+  }
+}
+.@{ant-prefix}-hw-rich-editor-border {
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  &:hover {
+    border-color: #40a9ff;
+  }
+}
+.@{ant-prefix}-hw-rich-editor-focus {
+  border-color: #40a9ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+
+.@{ant-prefix}-form-item-has-error {
+  .@{ant-prefix}-hw-rich-editor-border {
+    border-color: #ff4d4f !important;
+  }
+}

package/src/components/RichEditor/index.tsx

@@ -0,0 +1,84 @@
+import BraftEditor, { EditorState } from "braft-editor";
+import "braft-editor/dist/index.css";
+import { IHRichEditorProps } from "./modal";
+import {useFocusClassname, useProps, useUploadFn, useVC} from "./hooks";
+import { useClassName } from "../hooks";
+import React from "react";
+import HFormConnect from "../Form/HFormConnect";
+
+const defaultContentStyle = {
+  height: 400,
+};
+
+const Index: React.ForwardRefRenderFunction<any, IHRichEditorProps> = (
+  {
+    value,
+    onChange,
+    valueType,
+    fileRequest,
+    media,
+    contentStyle = defaultContentStyle,
+    bordered = true,
+      onBlur,
+      onFocus,
+    addFormat,
+    ...props
+  },
+  ref
+) => {
+  const { fileRequest: fileReq, valueType: vType } = useProps({
+    fileRequest,
+    valueType,
+  });
+  const { focusClassname, onFocus:selfFocus, onBlur:selfBlur } = useFocusClassname({
+    bordered,
+    onBlur,
+    onFocus
+  });
+  const {richValue,change}=useVC({value,onChange,valueType:vType});
+  const uploadFn = useUploadFn({fileRequest:fileReq});
+  const bodyClassName = useClassName("hw-rich-editor");
+  const borderClassName = useClassName("hw-rich-editor-border");
+  addFormat?.({
+    float:{
+      inputValue:(item, initValue)=>{
+        const { name = "" } = item;
+        const keyName=(name as string);
+        const itemVal=initValue[keyName];
+        const initVal=typeof itemVal==="string"?BraftEditor.createEditorState(itemVal):itemVal;
+        return {
+            [keyName]:initVal
+        };
+      },
+      outputValue:(item, outputValue)=>{
+        const { name = "" } = item;
+          const keyName=(name as string);
+        const itemVal=outputValue[keyName];
+        const outputVal=typeof itemVal==="string"?itemVal:itemVal?.toHTML();
+        return {
+            [keyName]:outputVal
+        }
+      }
+    }
+  })
+  return (
+    <div
+      className={`${bodyClassName} ${
+        bordered ? borderClassName : ""
+      } ${focusClassname}`}
+    >
+      <BraftEditor
+        contentStyle={contentStyle}
+        value={richValue as EditorState}
+        onChange={change}
+        onFocus={selfFocus}
+        ref={ref}
+        onBlur={selfBlur}
+        media={{ uploadFn, ...media }}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default HFormConnect((React.forwardRef(Index) as any));

package/src/components/RichEditor/modal.ts

@@ -0,0 +1,13 @@
+import { BraftEditorProps, EditorState } from "braft-editor";
+import { PromiseFnResult } from "../modal";
+import { addFormatItemModal } from "../Form/modal";
+
+export interface IHRichEditorProps extends Omit<BraftEditorProps, "value"|"onChange"> {
+  value?: string | EditorState;
+  onChange?: (value: string | EditorState) => void;
+  fileRequest?: PromiseFnResult;
+  valueType?: "html" | "state";
+  bordered?: boolean;
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
+}
+

package/src/components/Upload/hooks/change.ts

@@ -52,14 +52,13 @@ export const useChange = ({
   thumbUrl,
 }: IUpLoadProps) => {
   const customRequest = useCustomRequest({ request, onChange, value });
-  const checkGo=(errList:Error[])=>{
-    const len=errList.length;
+  const checkGo = (errList: Error[]) => {
+    const len = errList.length;
     if (len) {
       message.error(errList[0].message);
     }
-    return !(maxCount === 1 && len > 0);//为1时存在错误不调用onChange
-
-  }
+    return !(maxCount === 1 && len > 0); //为1时存在错误不调用onChange
+  };
   const { run } = useRequest(
     async ({ fileList }: UploadChangeParam<UploadFile>) => {
       if (fileList.length > maxCount) {

package/src/components/config.ts

@@ -49,6 +49,14 @@ export const baseConfig: IFormConfigContextProps = {
   defaultComponent: {},
   formItemStyle: {},
   itemProps: {},
+  richEditorProps: {
+    fileRequest: async (file: any) => {
+      const url = await fileToBase64(file);
+      return {
+        url,
+      };
+    },
+  },
 };
 
 export default {

package/src/components/index.tsx

@@ -13,6 +13,8 @@ import ModalForm from "./DialogForm/ModalForm";
 import DrawerForm from "./DialogForm/DrawerForm";
 export const HSelect = FormConfig.select;
 export const HInput = FormConfig.input;
+export const HRichEditor = FormConfig.richEditor;
+
 export const HSelectInput = FormConfig.selectInput;
 export const HUpload = FormConfig.upload;
 export const HUrlUpload = FormConfig.urlUpload.Component;

package/src/components/styles/index.less

@@ -4,3 +4,4 @@
 @import "../Switch/index.less";
 @import "../TextArea/index.less";
 @import "../InputGroup/index.less";
+@import "../RichEditor/index.less";

package/src/pages/Form/index.tsx

@@ -75,11 +75,24 @@ export default () => {
         <div style={{ width: 1000 }}>
           <HForm
             configData={[
+              {
+                label: "富文本",
+                type: "richEditor",
+                name: "richEditor",
+                rules: [
+                  {
+                    validator: (rule, value, callback) => {
+                      console.log(value);
+                      return Promise.resolve();
+                    },
+                  },
+                ],
+              },
               {
                 label: "运营商账号",
                 name: "mobile",
                 type: "buttonInput",
-                  flexBox:true,
+                flexBox: true,
                 itemProps: {
                   children: "修改手机号",
                   disabled: true,
@@ -143,17 +156,20 @@ export default () => {
                 name: "yyy",
                 type: "inputNumberGroup",
                 rules: [{ required: true }],
-                itemProps:{
-                    inputNumberProps:{
-                        precision:2
-                    }
-                }
+                itemProps: {
+                  inputNumberProps: {
+                    precision: 2,
+                  },
+                },
               },
               {
                 label: "文字",
                 type: "text",
                 name: "text",
-                itemProps: {
+                  render:()=>{
+                      return <div>fff</div>
+                  },
+                  itemProps: {
                   type: "danger",
                   addonBefore: (
                     <div style={{ height: 100, backgroundColor: "red" }}>
@@ -165,6 +181,12 @@ export default () => {
                       wohao
                     </div>
                   ),
+                    initValueProvider:(...data)=>{
+                        console.log("initValueProvider")
+                       return {
+                           text:"你好"
+                       }
+                    },
                 },
               },
             ]}
@@ -174,18 +196,8 @@ export default () => {
             }}
             labelWidth={88}
             form={form}
-            infoRequest={{
-              request: async () => {
-                if (id === 1) {
-                  return {
-                    name: "你好",
-                    select: 1,
-                    text: "hdj",
-                  };
-                }
-                return {};
-              },
-              refreshDeps: [id],
+            initialValues={{
+                richEditor:"1312312"
             }}
             labelAlign={"left"}
             onFinish={(value) => {

package/src/pages/Input/index.tsx

@@ -32,7 +32,7 @@ export default () => {
       />
       <HInputNumberGroup
         inputNumberProps={{
-            precision:2
+          precision: 2,
         }}
       />
       <HTextArea />

package/src/pages/ModalForm/index.tsx

@@ -212,6 +212,7 @@ export default () => {
           }}
           labelAlign={"left"}
           request={(values, params) => {
+              console.log(values,params)
             return Promise.resolve();
           }}
           dialogForm={modalForm}

package/src/pages/Select/index.tsx

@@ -1,6 +1,6 @@
 import { HSelect } from "../../components";
-import {Form, Space} from "antd";
-import {useEffect, useState} from "react";
+import { Form, Space } from "antd";
+import { useEffect, useState } from "react";
 export default () => {
   const [selectVal, setSelectVal] = useState([{ name: "11", id: -100 }]);
   const [op, setOp] = useState([{ label: "1", value: 1 }]);