@arco-design/mobile-react 2.31.6 → 2.33.0

package/esnext/tag/list.js

@@ -0,0 +1,47 @@
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { cls } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { Tag } from './tag';
+import IconAdd from '../icon/IconAdd';
+export function componentGenerator(Comp) {
+    return forwardRef((props, ref) => {
+        const { className, style, list, type, showAddButton = true, addArea, horizontalPadding, verticalPadding, onAdd, onClose, } = props;
+        const domRef = useRef(null);
+        useImperativeHandle(ref, () => ({
+            dom: domRef.current,
+        }));
+        function getTagStyle(tag, index) {
+            const baseStyle = tag.style || {};
+            const paddingStyle = index === list.length - 1 && !showAddButton
+                ? {}
+                : { marginRight: horizontalPadding };
+            return {
+                ...baseStyle,
+                ...paddingStyle,
+                marginBottom: verticalPadding,
+            };
+        }
+        function getListStyle() {
+            let marginStyle = {};
+            if (verticalPadding && typeof verticalPadding === 'string') {
+                marginStyle = { marginBottom: `-${verticalPadding}` };
+            }
+            else if (verticalPadding && typeof verticalPadding === 'number') {
+                marginStyle = { marginBottom: -1 * verticalPadding };
+            }
+            return {
+                ...(style || {}),
+                ...marginStyle,
+            };
+        }
+        return (React.createElement(ContextLayout, null, ({ prefixCls, locale }) => {
+            const prefix = `${prefixCls}-tag-list`;
+            return (React.createElement("div", { className: cls(prefix, className), style: getListStyle(), ref: domRef },
+                list.map((tag, index) => (React.createElement(Comp, Object.assign({ key: index }, tag, { style: getTagStyle(tag, index), type: type, onClose: e => {
+                        tag.onClose && tag.onClose(e);
+                        onClose && onClose(index, e);
+                    } })))),
+                showAddButton ? (React.createElement("div", { className: "tag-list-add-wrap", onClick: onAdd }, addArea !== void 0 ? (addArea) : (React.createElement(Tag, { type: type, className: "tag-list-add", borderStyle: "dashed", icon: React.createElement(IconAdd, null), style: { marginBottom: verticalPadding } }, locale?.Tag.addTag)))) : null));
+        }));
+    });
+}