@fjyueke/arco-mcp 1.0.0

package/metaData/components/ellipsis/example/js-ellipsis.tsx

@@ -0,0 +1,229 @@
+import React, { Ref, useEffect, useRef, forwardRef, useImperativeHandle, useCallback } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+
+import { JsEllipsisProps, JsEllipsisRef } from '../type';
+import { getLineHeight, wrapTextChildNodesWithSpan } from '../utils/dom';
+import { useLatestRef } from '../../_helpers';
+
+const JsEllipsis = forwardRef((props: JsEllipsisProps, ref: Ref<JsEllipsisRef>) => {
+    const {
+        prefixCls,
+        text,
+        ellipsis,
+        dangerouslyUseInnerHTML,
+        maxLine = 1,
+        maxHeight,
+        ellipsisNode,
+        collapseNode,
+        endExcludes,
+        reflowOnResize,
+        onReflow,
+        onEllipsisNodeClick,
+        onCollapseNodeClick,
+    } = props;
+    const truncating = useRef(false);
+    const domRef = useRef<HTMLDivElement>(null);
+    const textRef = useRef<HTMLSpanElement>(null);
+    const ellipsisRef = useRef<HTMLSpanElement>(null);
+    const ellipsisValueRef = useLatestRef(ellipsis);
+
+    const lineHeightRef = useRef(0);
+    const setCurLineHeight = useCallback(() => {
+        if (domRef.current) {
+            lineHeightRef.current = Math.round(getLineHeight(domRef.current));
+        }
+    }, []);
+    useEffect(() => {
+        setCurLineHeight();
+    }, []);
+
+    function handleOnReflow(isEllipsis: boolean, result: string) {
+        if (onReflow && typeof onReflow === 'function') {
+            onReflow(isEllipsis, result);
+        }
+    }
+    function getActualHeight(container: HTMLElement) {
+        const { height } = container.getBoundingClientRect();
+        return Math.round(height);
+    }
+    function truncateText(container: HTMLElement, textContainer: HTMLElement, max: number) {
+        const content = textContainer.textContent || '';
+        let currentText = '';
+        let l = 0;
+        let r = content.length - 1;
+        // Binary truncate text until get the max limit fragment of text.
+        while (l < r) {
+            const m = Math.floor((l + r) / 2);
+            if (l === m) {
+                break;
+            }
+            const temp = content.slice(l, m);
+            textContainer.innerText = currentText + temp;
+            const actualHeight = getActualHeight(container);
+            if (actualHeight > max) {
+                r = m;
+            } else {
+                currentText += temp;
+                l = m;
+            }
+        }
+        // Remove the last character if it is orphaned high-surrogate characters (indicative of incomplete emoji).
+        currentText = currentText.replace(/[\uD800-\uDBFF]+$/, '');
+        // Remove the exclude char at the end of the content.
+        while (endExcludes && endExcludes.includes(currentText[currentText.length - 1])) {
+            currentText = currentText.slice(0, -1);
+        }
+        // Callback after reflow.
+        handleOnReflow(true, currentText);
+        textContainer.innerText = currentText;
+    }
+    function truncateHTML(container: HTMLElement, textContainer: HTMLElement, max: number) {
+        // only enter this function when container overflow.
+        const children = textContainer.childNodes;
+        if (children.length === 1) {
+            const node = children[0] as HTMLElement;
+            if (node.nodeType === Node.TEXT_NODE) {
+                truncateText(container, textContainer, max);
+            } else {
+                const html = node.innerHTML;
+                // clear content to determine whether the empty node can be placed.
+                node.innerHTML = '';
+                const actualHeight = getActualHeight(container);
+                if (actualHeight > max) {
+                    // return after remove the node, if overflow with empty node.
+                    textContainer.removeChild(node);
+                    handleOnReflow(true, textContainer.innerHTML);
+                    return;
+                }
+                node.innerHTML = html;
+                // recursive truncate node
+                truncateHTML(container, node, max);
+            }
+        } else {
+            const nodes = [].slice.call(children);
+            textContainer.innerHTML = '';
+            let i = 0;
+            // find the critical node
+            while (i < nodes.length) {
+                textContainer.appendChild(nodes[i]);
+                const actualHeight = getActualHeight(container);
+                if (actualHeight > max) {
+                    if (nodes[i].childNodes && nodes[i].childNodes.length) {
+                        break;
+                    } else {
+                        textContainer.removeChild(nodes[i]);
+                        handleOnReflow(true, textContainer.innerHTML);
+                        return;
+                    }
+                }
+                i++;
+            }
+            if (textContainer.childNodes[i]) {
+                // truncate the critical node
+                truncateHTML(container, textContainer.childNodes[i] as HTMLElement, max);
+            }
+        }
+    }
+    // reflow when the main props change.
+    const reflow = useCallback(() => {
+        if (!domRef.current || !textRef.current || !ellipsisRef.current || truncating.current) {
+            return;
+        }
+        ellipsisRef.current.style.display = 'none';
+        if (dangerouslyUseInnerHTML) {
+            textRef.current.innerHTML = text;
+            textRef.current.classList.add(`${prefixCls}-js-content-text-pre`);
+        } else {
+            textRef.current.innerText = text;
+        }
+        if (!ellipsisValueRef.current) {
+            return;
+        }
+        textRef.current.classList.remove(`${prefixCls}-js-content-text-pre`);
+        const actualHeight = getActualHeight(domRef.current);
+        const max = isNaN(Number(maxHeight)) ? lineHeightRef.current * maxLine : Number(maxHeight);
+        if (actualHeight <= max) {
+            handleOnReflow(false, text);
+            return;
+        }
+        truncating.current = true;
+        ellipsisRef.current.style.display = 'inline';
+        if (dangerouslyUseInnerHTML) {
+            // wrap the text children node with span element.
+            wrapTextChildNodesWithSpan(textRef.current, `${prefixCls}-js-content-text`);
+            truncateHTML(domRef.current, textRef.current, max);
+        } else {
+            truncateText(domRef.current, textRef.current, max);
+        }
+        truncating.current = false;
+    }, [text, ellipsis, dangerouslyUseInnerHTML, maxLine, maxHeight, ellipsisNode, endExcludes]);
+
+    useEffect(() => {
+        reflow();
+    }, [reflow]);
+
+    const observerRef = useRef<ResizeObserver | null>(null);
+    // Observe resize event of container if reflowOnResize is true.
+    useEffect(() => {
+        if (domRef.current && reflowOnResize) {
+            if (!observerRef.current && ellipsis) {
+                observerRef.current = new ResizeObserver(reflow);
+                observerRef.current.observe(domRef.current);
+            }
+        }
+        return () => {
+            // Remove observer when component unmounted.
+            if (observerRef.current && domRef.current) {
+                observerRef.current.unobserve(domRef.current);
+                observerRef.current = null;
+            }
+        };
+    }, [ellipsis]);
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            dom: domRef.current,
+            reflow,
+        }),
+        [reflow],
+    );
+
+    return (
+        <div ref={domRef} className={`${prefixCls}-js`}>
+            <span ref={textRef} className={`${prefixCls}-js-content`}>
+                {dangerouslyUseInnerHTML ? (
+                    <span
+                        className={`${prefixCls}-js-content-initial`}
+                        style={{
+                            WebkitLineClamp: maxLine,
+                        }}
+                        dangerouslySetInnerHTML={{ __html: text }}
+                    />
+                ) : (
+                    <span
+                        className={`${prefixCls}-js-content-initial`}
+                        style={{
+                            WebkitLineClamp: maxLine,
+                        }}
+                    >
+                        {text}
+                    </span>
+                )}
+            </span>
+            <span
+                ref={ellipsisRef}
+                className={`${prefixCls}-js-content-ellipsis`}
+                onClick={onEllipsisNodeClick}
+            >
+                {ellipsisNode}
+            </span>
+            {!ellipsis && collapseNode && (
+                <span className={`${prefixCls}-js-content-collapse`} onClick={onCollapseNodeClick}>
+                    {collapseNode}
+                </span>
+            )}
+        </div>
+    );
+});
+export default React.memo(JsEllipsis);

package/metaData/components/ellipsis/example/native-ellipsis.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { cls } from '@arco-design/mobile-utils';
+
+import { NativeEllipsisProps } from '../type';
+
+function NativeEllipsis({
+    prefixCls,
+    ellipsis,
+    dangerouslyUseInnerHTML,
+    text,
+    maxLine,
+    ellipsisNode,
+    collapseNode = '',
+    onEllipsisNodeClick,
+    onCollapseNodeClick,
+}: NativeEllipsisProps) {
+    return (
+        <div
+            className={cls(`${prefixCls}-native`, {
+                ellipsis,
+            })}
+            style={{
+                WebkitLineClamp: maxLine,
+            }}
+        >
+            {dangerouslyUseInnerHTML ? (
+                // eslint-disable-next-line react/no-danger,@typescript-eslint/naming-convention
+                <span dangerouslySetInnerHTML={{ __html: text }} />
+            ) : (
+                <span>{text}</span>
+            )}
+            {!ellipsis && collapseNode && (
+                <span onClick={onCollapseNodeClick} className={cls(`${prefixCls}-native-collapse`)}>
+                    {collapseNode}
+                </span>
+            )}
+            {ellipsis && (ellipsisNode !== '...' || onEllipsisNodeClick) ? (
+                <span
+                    onClick={onEllipsisNodeClick}
+                    className={cls(`${prefixCls}-native-ellipsis-node`)}
+                >
+                    {ellipsisNode}
+                </span>
+            ) : null}
+        </div>
+    );
+}
+export default NativeEllipsis;

package/metaData/components/form/doc.md

@@ -0,0 +1,90 @@
+### 数据录入
+
+# 表单 Form
+
+表单组件用于集合数据录入
+
+======
+
+> 属性/Props
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|className|自定义类名|string|-|
+|style|自定义样式|CSSProperties|-|
+|layout|表单项布局|"horizontal" \| "vertical" \| "inline"|"horizontal"|
+|form|表单实例|IFormInstance|-|
+|initialValues|表单初始数据|Record\<string, any\>|-|
+|onValuesChange|表单项数据变化时的回调|(changedValues: any, values: any) =\> void|-|
+|onChange|表单项数据变化时的回调（仅用户操作表单时触发）|(changedValues: any, values: any) =\> void|-|
+|onSubmit|表单项数据变化时的回调|(values: any, otherInfo?: IFieldError\[\]) =\> void|-|
+|onSubmitFailed|表单项数据变化时的回调|(values: any, errorInfo: IFieldError\[\] \| Error) =\> void|-|
+|disabled|表单禁止输入|boolean|-|
+
+> 引用/Refs
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLFormElement|
+|form|Form对象实例|IFormInstance|
+
+> Form.Item
+
+|参数|描述|类型|默认值|
+|----------|-------------|------|------|
+|label|表单项名|ReactNode|必填|
+|style|表单项Stylesheet|CSSProperties|-|
+|className|表单项样式|string|-|
+|field|表单项字段|string|必填|
+|required|表单项是否必填|boolean|-|
+|disabled|表单项是否禁用|boolean|-|
+|layout|表单项布局|"horizontal" \| "vertical" \| "inline"|"horizontal"|
+|children|表单项子节点|ReactElement\<any, string \| ((props: any) =\> ReactElement\<any, any\>) \| (new (props: any) =\> Component\<any, any, any\>)\>|必填|
+|shouldUpdate|表单项是否刷新|IShouldUpdateFunc|-|
+|rules|表单项规则|IRules\[\]|-|
+|extra|表单项下方节点|ReactElement\<any, string \| ((props: any) =\> ReactElement\<any, any\>) \| (new (props: any) =\> Component\<any, any, any\>)\>|-|
+|trigger|触发事件更新事件名称|string|"onChange"|
+|requiredIcon|自定义必填标识|ReactNode|-|
+|initialValue|表单项初始数据|any|-|
+|displayType|手动指定为内置组件的类型|"Input" \| "Textarea" \| "Checkbox" \| "CheckboxGroup" \| "DatePicker" \| "Picker" \| "Radio" \| "RadioGroup" \| "Slider" \| "Switch" \| "ImagePicker" \| "Rate" \| "Stepper"|-|
+
+> IFormInstance
+
+|参数|描述|类型|
+|----------|-------------|------|
+|getFieldValue|获取单个表单项值|(name: string) =\> any|
+|getFieldsValue|获取多个表单项值|(name?: string\[\]) =\> Record\<string, any\>|
+|getFieldError|获取单个表单项的错误|(name: string) =\> ReactNode\[\]|
+|resetFields|重置表单项|() =\> void|
+|setFieldValue|设置单个表单项值|(name: string, value: any) =\> boolean|
+|setFieldsValue|设置多个表单项值|(value: Record\<string, any\>) =\> void|
+|validateFields|校验所有表单项|() =\> Promise\<IFieldError\[\]\>|
+|submit|提交表单|() =\> void|
+
+> IFieldError
+
+|参数|描述|类型|
+|----------|-------------|------|
+|value|-|any|
+|errors|-|ReactNode\[\]|
+|warnings|-|ReactNode\[\]|
+|field|-|string|
+|dom|-|HTMLDivElement|
+
+> IRules
+
+```
+ITypeRules<ValidatorType.Number> | ITypeRules<ValidatorType.String> | ITypeRules<ValidatorType.Array> | ITypeRules<ValidatorType.Boolean> | ITypeRules<ValidatorType.Object> | ITypeRules<ValidatorType.Custom>
+```
+
+> FormInternalComponentType
+
+```
+"Input" | "Textarea" | "Checkbox" | "CheckboxGroup" | "DatePicker" | "Picker" | "Radio" | "RadioGroup" | "Slider" | "Switch" | "ImagePicker" | "Rate" | "Stepper"
+```
+
+> FormItemRef
+
+|参数|描述|类型|
+|----------|-------------|------|
+|dom|最外层元素 DOM|HTMLDivElement|

package/metaData/components/form/example/form-item-context.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { IFormItemContext } from './type';
+import { defaultFormDataMethods } from './useForm';
+
+export const FormItemContext = React.createContext<IFormItemContext>({
+    form: defaultFormDataMethods,
+    layout: 'horizontal',
+});