amis-ui 3.1.1 → 3.3.0

package/esm/components/icons.js

@@ -1,10 +1,10 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
-import { __rest, __read, __assign } from 'tslib';
-import React__default, { useState } from 'react';
+import { __assign } from 'tslib';
+import React__default from 'react';
 import cx from 'classnames';
 import SvgClose from '../icons/close.svg.js';
 export { default as CloseIcon } from '../icons/close.svg.js';
@@ -124,6 +124,7 @@ import SvgNewEdit from '../icons/new-edit.svg.js';
 import SvgRotateLeft from '../icons/rotate-left.svg.js';
 import SvgRotateRight from '../icons/rotate-right.svg.js';
 import SvgScaleOrigin from '../icons/scale-origin.svg.js';
+import isObject from 'lodash/isObject';
 
 // 兼容原来的用法，后续不直接试用。
 var closeIcon = React__default.createElement(SvgClose, null);
@@ -250,16 +251,23 @@ registerIcon('rotate-left', SvgRotateLeft);
 registerIcon('rotate-right', SvgRotateRight);
 registerIcon('scale-origin', SvgScaleOrigin);
 function Icon(_a) {
-    var icon = _a.icon, className = _a.className, wrapClassName = _a.wrapClassName, _b = _a.classPrefix, classPrefix = _b === void 0 ? '' : _b, iconContent = _a.iconContent, rest = __rest(_a, ["icon", "className", "wrapClassName", "classPrefix", "iconContent"]);
-    // jest 运行环境下，把指定的 icon 也输出到 snapshot 中。
-    if (typeof jest !== 'undefined') {
-        rest.icon = icon;
+    var icon = _a.icon, className = _a.className, _b = _a.classPrefix, classPrefix = _b === void 0 ? '' : _b, classNameProp = _a.classNameProp, iconContent = _a.iconContent, vendor = _a.vendor, iconCx = _a.cx, _c = _a.onClick, onClick = _c === void 0 ? function () { } : _c, style = _a.style;
+    var cx$1 = iconCx || cx;
+    if (typeof jest !== 'undefined' && icon) {
+        iconContent = '';
     }
-    var _c = __read(useState(false), 2), showCssIcon = _c[0], setShowCssIcon = _c[1];
+    if (!icon) {
+        return null;
+    }
+    // 直接的icon dom
+    if (React__default.isValidElement(icon)) {
+        return React__default.cloneElement(icon, __assign(__assign({}, (icon.props || {})), { className: cx(cx$1(className, classNameProp), icon.props.className), style: style, onClick: onClick }));
+    }
+    // 从css变量中获取icon
     function refFn(dom) {
         if (dom) {
-            var style = getComputedStyle(dom);
-            var svgStr = style.getPropertyValue('content');
+            var style_1 = getComputedStyle(dom);
+            var svgStr = style_1.getPropertyValue('content');
             var svg = /(<svg.*<\/svg>)/.exec(svgStr);
             if (svg) {
                 var svgHTML = svg[0].replace(/\\"/g, '"');
@@ -268,25 +276,59 @@ function Icon(_a) {
                     // 存储svg，不直接用innerHTML是防止<circle />渲染后变成<circle></circle>的情况
                     dom.svgHTMLClone = svgHTML;
                     dom.style.display = '';
-                    setShowCssIcon(true);
                 }
             }
-            else {
-                // 当传入svg为空时，隐藏div，展示原icon
-                dom.style.display = 'none';
-                setShowCssIcon(false);
-            }
         }
     }
+    if (iconContent) {
+        return (React__default.createElement("div", { onClick: onClick, className: cx$1(iconContent, className, classNameProp), ref: refFn, style: style }));
+    }
+    // 获取注册的icon
     var Component = getIcon(icon);
+    if (Component) {
+        return (React__default.createElement(Component, { onClick: onClick, className: cx$1(className, "icon-".concat(icon), classNameProp), 
+            // @ts-ignore
+            icon: icon, style: style }));
+    }
+    // 符合schema的icon
+    if (isObject(icon) &&
+        icon.type === 'icon' &&
+        icon.icon) {
+        icon = icon.icon;
+    }
+    // icon是引用svg的情况
+    if (isObject(icon) &&
+        typeof icon.id === 'string' &&
+        icon.id.startsWith('svg-')) {
+        return (React__default.createElement("svg", { onClick: onClick, className: cx$1('icon', 'icon-object', className, classNameProp), style: style },
+            React__default.createElement("use", { xlinkHref: "#".concat(icon.id.replace(/^svg-/, '')) })));
+    }
+    // icon是链接
     var isURLIcon = typeof icon === 'string' && (icon === null || icon === void 0 ? void 0 : icon.indexOf('.')) !== -1;
-    var isIconfont = typeof icon === 'string' &&
-        (~(icon === null || icon === void 0 ? void 0 : icon.indexOf('iconfont')) || ~(icon === null || icon === void 0 ? void 0 : icon.indexOf('fa')));
-    return Component ? (React__default.createElement(React__default.Fragment, null,
-        iconContent ? (React__default.createElement("div", { className: "".concat(wrapClassName || '') + ' ' + iconContent, ref: refFn })) : null,
-        !showCssIcon ? (React__default.createElement(Component, __assign({}, rest, { className: "".concat(className || '', " icon-").concat(icon) }))) : null)) : isURLIcon ? (React__default.createElement("img", { className: cx("".concat(classPrefix, "Icon"), className), src: icon })) : isIconfont ? (React__default.createElement("i", { className: cx(icon, className) })) : (React__default.createElement("span", { className: "text-danger" },
+    if (isURLIcon) {
+        return (React__default.createElement("img", { onClick: onClick, className: cx$1("".concat(classPrefix, "Icon"), className, classNameProp), src: icon, style: style }));
+    }
+    // icon是普通字符串
+    var isIconfont = typeof icon === 'string';
+    var iconPrefix = '';
+    if (vendor === 'iconfont') {
+        iconPrefix = "iconfont icon-".concat(icon);
+    }
+    else if (vendor === 'fa') {
+        //默认是fontawesome v4，兼容之前配置
+        iconPrefix = "".concat(vendor, " ").concat(vendor, "-").concat(icon);
+    }
+    else {
+        // 如果vendor为空，则不设置前缀,这样可以支持fontawesome v5、fontawesome v6或者其他框架
+        iconPrefix = icon;
+    }
+    if (isIconfont) {
+        return (React__default.createElement("i", { onClick: onClick, className: cx$1(icon, className, classNameProp, iconPrefix), style: style }));
+    }
+    // 没有合适的图标
+    return React__default.createElement("span", { className: "text-danger" },
         "\u6CA1\u6709 icon ",
-        icon));
+        icon);
 }
 
 export { Icon, closeIcon, enterIcon, getIcon, getIconNames, hasIcon, leftArrowIcon, muteIcon, pauseIcon, playIcon, reDoIcon, registerIcon, rightArrowIcon, unDoIcon, volumeIcon };

package/esm/components/json-schema/Array.js

@@ -1,18 +1,18 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
 import { __read, __assign } from 'tslib';
 import React__default from 'react';
-import { guid } from 'amis-core';
+import { guid, isMobile } from 'amis-core';
 import Button from '../Button.js';
 import { Icon } from '../icons.js';
 import { InputJSONSchemaItem } from './Item.js';
 
 function InputJSONSchemaArray(props) {
     var _a, _b, _c;
-    var cx = props.classnames, value = props.value, onChange = props.onChange, disabled = props.disabled, __ = props.translate, collapsable = props.collapsable, renderValue = props.renderValue;
+    var cx = props.classnames, value = props.value, onChange = props.onChange, disabled = props.disabled, __ = props.translate, collapsable = props.collapsable, renderValue = props.renderValue, useMobileUI = props.useMobileUI;
     var buildMembers = React__default.useCallback(function (schema, value) {
         var members = [];
         var len = Array.isArray(value) ? value.length : 1;
@@ -103,12 +103,14 @@ function InputJSONSchemaArray(props) {
     // todo additionalProperties 还有其他格式
     var allowAdd = !maxContains || maxContains > members.length;
     var allowDelete = !minContains || minContains < members.length;
+    var mobileUI = useMobileUI && isMobile();
     return (React__default.createElement(React__default.Fragment, null,
         collapsable ? (React__default.createElement("a", { className: cx('JSONSchemaObject-caret', {
                 'is-collapsed': collapsed
             }), onClick: toggleCollapsed },
-            React__default.createElement(Icon, { icon: "caret", className: "icon" }))) : null,
+            React__default.createElement(Icon, { icon: "right-arrow-bold", className: "icon" }))) : null,
         React__default.createElement("div", { className: cx('JSONSchemaObject', {
+                'is-mobile': mobileUI,
                 'is-expanded': collapsable && !collapsed
             }) },
             collapsed ? (renderValue ? (React__default.createElement(InputJSONSchemaItem, __assign({}, props, { value: value, onChange: onChange, schema: {

package/esm/components/json-schema/Item.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -23,15 +23,15 @@ function InputJSONSchemaItem(props) {
         return props.renderValue(props.value, props.onChange, schema, props);
     }
     else if (schema.type == 'number') {
-        return (React__default.createElement(NumberInput, { value: props.value, onChange: props.onChange, placeholder: props.placeholder }));
+        return (React__default.createElement(NumberInput, { value: props.value, onChange: props.onChange, placeholder: props.placeholder, useMobileUI: props.useMobileUI }));
     }
     else if (schema.type == 'integer') {
-        return (React__default.createElement(NumberInput, { value: props.value, onChange: props.onChange, precision: 0, placeholder: props.placeholder }));
+        return (React__default.createElement(NumberInput, { value: props.value, onChange: props.onChange, precision: 0, placeholder: props.placeholder, useMobileUI: props.useMobileUI }));
     }
     else if (schema.type == 'boolean') {
         return (React__default.createElement(Switch, { value: props.value, onChange: props.onChange, className: "mt-2" }));
     }
-    return (React__default.createElement(InputBox, { value: props.value, onChange: props.onChange, placeholder: props.placeholder }));
+    return (React__default.createElement(InputBox, { value: props.value, onChange: props.onChange, placeholder: props.placeholder, useMobileUI: props.useMobileUI }));
 }
 
 export { InputJSONSchemaItem };

package/esm/components/json-schema/Object.js

@@ -1,11 +1,11 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
 import { __values, __read, __assign } from 'tslib';
 import React__default from 'react';
-import { guid } from 'amis-core';
+import { guid, isMobile } from 'amis-core';
 import Button from '../Button.js';
 import { Icon } from '../icons.js';
 import InputBox from '../InputBox.js';
@@ -15,7 +15,7 @@ import { InputJSONSchemaItem } from './Item.js';
 
 function InputJSONSchemaObject(props) {
     var _a, _b;
-    var cx = props.classnames, value = props.value, onChange = props.onChange, disabled = props.disabled, __ = props.translate, renderKey = props.renderKey, collapsable = props.collapsable, renderValue = props.renderValue;
+    var cx = props.classnames, value = props.value, onChange = props.onChange, disabled = props.disabled, __ = props.translate, renderKey = props.renderKey, collapsable = props.collapsable, renderValue = props.renderValue, useMobileUI = props.useMobileUI;
     var buildMembers = React__default.useCallback(function (schema, value) {
         var e_1, _a;
         var members = [];
@@ -171,12 +171,14 @@ function InputJSONSchemaObject(props) {
     var allowAdd = !(props.schema.additionalProperties === false &&
         options.every(function (o) { return members.find(function (m) { return m.name === o.value; }); }));
     var allowInput = props.schema.additionalProperties !== false;
+    var mobileUI = useMobileUI && isMobile();
     return (React__default.createElement(React__default.Fragment, null,
         collapsable ? (React__default.createElement("a", { className: cx('JSONSchemaObject-caret', {
                 'is-collapsed': collapsed
             }), onClick: toggleCollapsed },
-            React__default.createElement(Icon, { icon: "caret", className: "icon" }))) : null,
+            React__default.createElement(Icon, { icon: "right-arrow-bold", className: "icon" }))) : null,
         React__default.createElement("div", { className: cx('JSONSchemaObject', {
+                'is-mobile': mobileUI,
                 'is-expanded': collapsable && !collapsed
             }) },
             collapsed ? (renderValue ? (React__default.createElement(InputJSONSchemaItem, __assign({}, props, { value: value, onChange: onChange, schema: {
@@ -185,7 +187,9 @@ function InputJSONSchemaObject(props) {
                 var _a, _b;
                 var filtedOptions = options.filter(function (o) { return !members.find(function (m) { return m !== member && m.name === o.value; }); });
                 return (React__default.createElement("div", { key: member.key, className: cx('JSONSchemaMember') },
-                    React__default.createElement("div", { className: cx('JSONSchemaMember-key') }, member.nameMutable ? (React__default.createElement(React__default.Fragment, null, renderKey ? (renderKey(member.name, onMemberKeyChange.bind(null, member), member.schema, props)) : filtedOptions.length ? (allowInput ? (React__default.createElement(InputBoxWithSuggestion, { value: member.name, hasError: member.invalid, onChange: onMemberKeyChange.bind(null, member), clearable: false, placeholder: __('JSONSchema.key'), options: filtedOptions })) : (React__default.createElement(EnhancedSelect, { simpleValue: true, block: true, value: member.name, hasError: member.invalid, onChange: onMemberKeyChange.bind(null, member), clearable: false, placeholder: __('JSONSchema.key'), options: filtedOptions }))) : (React__default.createElement(InputBox, { value: member.name, hasError: member.invalid, onChange: onMemberKeyChange.bind(null, member), clearable: false, placeholder: __('JSONSchema.key') })))) : (React__default.createElement("span", null,
+                    React__default.createElement("div", { className: cx('JSONSchemaMember-key', {
+                            'is-mobile': mobileUI
+                        }) }, member.nameMutable ? (React__default.createElement(React__default.Fragment, null, renderKey ? (renderKey(member.name, onMemberKeyChange.bind(null, member), member.schema, props)) : filtedOptions.length ? (allowInput ? (React__default.createElement(InputBoxWithSuggestion, { value: member.name, hasError: member.invalid, onChange: onMemberKeyChange.bind(null, member), clearable: false, placeholder: __('JSONSchema.key'), options: filtedOptions, useMobileUI: useMobileUI })) : (React__default.createElement(EnhancedSelect, { simpleValue: true, block: true, value: member.name, hasError: member.invalid, onChange: onMemberKeyChange.bind(null, member), clearable: false, placeholder: __('JSONSchema.key'), options: filtedOptions, useMobileUI: useMobileUI }))) : (React__default.createElement(InputBox, { value: member.name, hasError: member.invalid, onChange: onMemberKeyChange.bind(null, member), clearable: false, placeholder: __('JSONSchema.key'), useMobileUI: useMobileUI })))) : (React__default.createElement("span", null,
                         member.required ? (React__default.createElement("span", { className: cx("Form-star") }, "*")) : null,
                         ((_a = member.schema) === null || _a === void 0 ? void 0 : _a.title) || member.name))),
                     React__default.createElement("div", { className: cx('JSONSchemaMember-value') },

package/esm/components/json-schema/index.d.ts

@@ -12,6 +12,7 @@ export interface InputJSONSchemaItemProps extends ThemeProps, LocaleProps {
     renderKey?: (value: any, onChange: (value: any) => void, schema: any, props: any) => JSX.Element;
     collapsable?: boolean;
     placeholder?: string;
+    useMobileUI?: boolean;
 }
 export interface InputJSONSchemaProps extends Omit<InputJSONSchemaItemProps, 'schema'> {
     schema?: any;

package/esm/components/json-schema/index.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/menu/MenuContext.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 

package/esm/components/menu/MenuItem.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -37,7 +37,8 @@ var MenuItem = /** @class */ (function (_super) {
             'attribute',
             'onMouseEnter',
             'onMouseLeave',
-            'onClick'
+            'onClick',
+            'className'
         ];
         return _this;
     }

package/esm/components/menu/SubMenu.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -104,11 +104,11 @@ var SubMenu = /** @class */ (function (_super) {
     };
     SubMenu.prototype.render = function () {
         var _a, _b;
-        var _c = this.props, popupClassName = _c.popupClassName, cx = _c.classnames, hidden = _c.hidden;
+        var _c = this.props, popupClassName = _c.popupClassName, cx = _c.classnames, hidden = _c.hidden, className = _c.className;
         var isDarkTheme = this.context.themeColor === 'dark';
         return hidden ? null : (React__default.createElement(SubMenu$2, __assign({}, pick(this.props, this.internalProps), { className: cx('Nav-Menu-submenu', (_a = {},
                 _a['Nav-Menu-submenu-dark'] = isDarkTheme,
-                _a)), popupClassName: cx('Nav-Menu-submenu-popup', (_b = {},
+                _a), className), popupClassName: cx((_b = {},
                 _b['Nav-Menu-submenu-popup-dark'] = isDarkTheme,
                 _b), popupClassName), title: this.renderSubMenuTitle(), onTitleClick: this.handleSubmenuTitleActived })));
     };