amis-ui 3.6.2 → 6.0.0

package/lib/components/NumberInput.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.6.2
+ * amis-ui v6.0.0
  * Copyright 2018-2023 fex
  */
 
@@ -62,7 +62,11 @@ var NumberInput = /** @class */ (function (_super) {
         this.setState({ focused: false });
         onBlur && onBlur(e);
     };
-    NumberInput.prototype.handleEnhanceModeChange = function (action) {
+    NumberInput.prototype.handleClick = function (e) {
+        e.stopPropagation();
+    };
+    NumberInput.prototype.handleEnhanceModeChange = function (action, e) {
+        e.stopPropagation();
         var _a = this.props, value = _a.value, _b = _a.step, step = _b === void 0 ? 1 : _b, disabled = _a.disabled, readOnly = _a.readOnly, precision = _a.precision;
         // value为undefined会导致溢出错误
         var val = value || 0;
@@ -113,7 +117,7 @@ var NumberInput = /** @class */ (function (_super) {
                 _a["Number--border".concat(amisCore.ucFirst(borderMode))] = borderMode,
                 _a), {
                 'is-mobile': mobileUI
-            }), ref: inputRef, readOnly: readOnly, prefixCls: "".concat(ns, "Number"), value: value, step: step, max: max, min: min, formatter: formatter, parser: parser, onChange: this.handleChange, disabled: disabled, placeholder: placeholder, onFocus: this.handleFocus, onBlur: this.handleBlur, stringMode: this.isBig ? true : false, keyboard: keyboard }, precisionProps)));
+            }), ref: inputRef, readOnly: readOnly, prefixCls: "".concat(ns, "Number"), value: value, step: step, max: max, min: min, formatter: formatter, parser: parser, onChange: this.handleChange, disabled: disabled, placeholder: placeholder, onFocus: this.handleFocus, onClick: this.handleClick, onBlur: this.handleBlur, stringMode: this.isBig ? true : false, keyboard: keyboard }, precisionProps)));
     };
     NumberInput.prototype.render = function () {
         var _a;
@@ -123,10 +127,10 @@ var NumberInput = /** @class */ (function (_super) {
         return (_J$X_(React__default["default"].Fragment, null, displayMode === 'enhance' ? (_J$X_("div", { className: cx('Number--enhance', disabled ? 'Number--enhance-disabled' : '', showSteps === false ? 'Number--enhance-no-steps' : '', (_a = {},
                 _a["Number--enhance-border".concat(amisCore.ucFirst(borderMode))] = borderMode,
                 _a), inputControlClassName, ((_b = this.state) === null || _b === void 0 ? void 0 : _b.focused) && 'focused') },
-            _J$X_("div", { className: cx('Number--enhance-left-icon', value && value === min ? 'Number--enhance-border-min' : '', disabled ? 'Number--enhance-border-disabled' : '', readOnly ? 'Number--enhance-border-readOnly' : ''), onClick: function () { return _this.handleEnhanceModeChange('subtract'); } },
+            _J$X_("div", { className: cx('Number--enhance-left-icon', value && value === min ? 'Number--enhance-border-min' : '', disabled ? 'Number--enhance-border-disabled' : '', readOnly ? 'Number--enhance-border-readOnly' : ''), onClick: function (e) { return _this.handleEnhanceModeChange('subtract', e); } },
                 _J$X_(icons.Icon, { icon: "minus", className: "icon", classNameProp: cx('InputNumber-enhance-minus icon'), iconContent: "InputNumber-enhance-minus" })),
             this.renderBase(),
-            _J$X_("div", { className: cx('Number--enhance-right-icon', value && value === max ? 'Number--enhance-border-max' : '', disabled ? 'Number--enhance-border-disabled' : '', readOnly ? 'Number--enhance-border-readOnly' : ''), onClick: function () { return _this.handleEnhanceModeChange('add'); } },
+            _J$X_("div", { className: cx('Number--enhance-right-icon', value && value === max ? 'Number--enhance-border-max' : '', disabled ? 'Number--enhance-border-disabled' : '', readOnly ? 'Number--enhance-border-readOnly' : ''), onClick: function (e) { return _this.handleEnhanceModeChange('add', e); } },
                 _J$X_(icons.Icon, { icon: "plus", className: "icon", classNameProp: cx('InputNumber-enhance-plus icon'), iconContent: "InputNumber-enhance-plus" })))) : (this.renderBase())));
     };
     NumberInput.defaultProps = {
@@ -230,7 +234,13 @@ var NumberInput = /** @class */ (function (_super) {
     tslib.__decorate([
         amisCore.autobind,
         tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [String]),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], NumberInput.prototype, "handleClick", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [String, Object]),
         tslib.__metadata("design:returntype", void 0)
     ], NumberInput.prototype, "handleEnhanceModeChange", null);
     tslib.__decorate([

package/lib/components/OverflowTpl.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @file OverflowTpl
+ * @desc 文字提示组件，会基于内部文字是否触发ellipsis，动态展示tooltip提示, 默认使用子节点文本作为tooltip内容
+ */
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import type { ThemeProps } from 'amis-core';
+import type { TooltipWrapperProps } from './TooltipWrapper';
+export interface OverflowTplProps extends ThemeProps {
+    className?: string;
+    /**
+     * tooltip相关配置
+     */
+    tooltip?: TooltipWrapperProps['tooltip'];
+    /**
+     * 是否使用行内标签，默认为 true，使用 span 标签，否则使用 div 标签
+     */
+    inline?: boolean;
+    /**
+     * 目标元素的selector，通常不需要指定
+     */
+    targetSelector?: string;
+    /**
+     * 内部节点
+     */
+    children?: React.ReactNode | React.ReactNode[];
+}
+declare const _default: {
+    new (props: Omit<OverflowTplProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<OverflowTplProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Omit<OverflowTplProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<OverflowTplProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        /** 监听目标元素的DOM变化 */
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<OverflowTplProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<OverflowTplProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<OverflowTplProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<OverflowTplProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<OverflowTplProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<OverflowTplProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<React.FC<OverflowTplProps>>;
+} & import("hoist-non-react-statics").NonReactStatics<React.FC<OverflowTplProps>, {}> & {
+    ComposedComponent: React.FC<OverflowTplProps>;
+};
+export default _default;

package/lib/components/OverflowTpl.js

@@ -0,0 +1,109 @@
+/**
+ * amis-ui v6.0.0
+ * Copyright 2018-2023 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var ReactDOM = require('react-dom');
+var omit = require('lodash/omit');
+var amisCore = require('amis-core');
+var TooltipWrapper = require('./TooltipWrapper.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
+
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
+var OverflowTpl = function (props) {
+    var cx = props.classnames, children = props.children, className = props.className, targetSelector = props.targetSelector, tooltip = props.tooltip, _a = props.inline, inline = _a === void 0 ? true : _a;
+    var _b = tslib.__read(React.useState(false), 2), ellipsisAvtived = _b[0], setEllipsisAvtived = _b[1];
+    var _c = tslib.__read(React.useState(''), 2), innerText = _c[0], setInnerText = _c[1];
+    var innerRef = React.useRef(null);
+    var defaultTooltip = tooltip
+        ? typeof tooltip === 'string'
+            ? { content: tooltip }
+            : amisCore.isObject(tooltip)
+                ? tooltip
+                : undefined
+        : typeof children === 'string'
+            ? { content: children }
+            : undefined; /** 默认使用子节点文本 */
+    var normalizedTooltip = innerText && (!defaultTooltip || (defaultTooltip === null || defaultTooltip === void 0 ? void 0 : defaultTooltip.content) == null)
+        ? tslib.__assign(tslib.__assign({}, defaultTooltip), { content: innerText }) : defaultTooltip;
+    var updateEllipsisActivation = React.useCallback(function (el) {
+        setEllipsisAvtived(el
+            ? el.scrollWidth > el.clientWidth || el.scrollHeight > el.scrollHeight
+            : false);
+    }, [innerRef.current]);
+    var onMutation = React.useCallback(function (mutations) {
+        var dom = (targetSelector
+            ? document.querySelector(targetSelector)
+            : mutations === null || mutations === void 0 ? void 0 : mutations[0].target);
+        updateEllipsisActivation(dom);
+        if ((dom === null || dom === void 0 ? void 0 : dom.textContent) &&
+            typeof dom.textContent === 'string' &&
+            (!defaultTooltip || (defaultTooltip === null || defaultTooltip === void 0 ? void 0 : defaultTooltip.content) == null)) {
+            setInnerText(dom.textContent);
+        }
+    }, [targetSelector]);
+    var onResize = React.useCallback(function (entries) {
+        var dom = (targetSelector
+            ? document.querySelector(targetSelector)
+            : entries === null || entries === void 0 ? void 0 : entries[0].target);
+        updateEllipsisActivation(dom);
+        if ((dom === null || dom === void 0 ? void 0 : dom.textContent) &&
+            typeof dom.textContent === 'string' &&
+            (!defaultTooltip || !(defaultTooltip === null || defaultTooltip === void 0 ? void 0 : defaultTooltip.content) == null)) {
+            setInnerText(dom.textContent);
+        }
+    }, [targetSelector]);
+    /** 监听目标元素的DOM变化 */
+    React.useEffect(function () {
+        var element = innerRef.current instanceof React__default["default"].Component
+            ? ReactDOM.findDOMNode(innerRef.current)
+            : innerRef.current;
+        if (element) {
+            var observer_1 = new MutationObserver(onMutation);
+            observer_1.observe(element, {
+                childList: true,
+                subtree: true,
+                characterDataOldValue: true,
+                characterData: true
+            });
+            return function () { return observer_1.disconnect(); };
+        }
+        return;
+    }, [innerRef.current]);
+    /** 监听目标元素的尺寸变化 */
+    React.useEffect(function () {
+        var element = innerRef.current instanceof React__default["default"].Component
+            ? ReactDOM.findDOMNode(innerRef.current)
+            : innerRef.current;
+        if (element) {
+            var observer_2 = new ResizeObserver(onResize);
+            observer_2.observe(element);
+            return function () { return observer_2.disconnect(); };
+        }
+        return;
+    }, [innerRef.current]);
+    var WrapComponent = inline !== false ? 'span' : 'div';
+    var showTooltip = ellipsisAvtived && normalizedTooltip;
+    var Body = React__default["default"].isValidElement(children) ? (React__default["default"].cloneElement(children, { ref: innerRef })) : (_J$X_(WrapComponent, { ref: innerRef, className: cx('OverflowTpl', className, {
+            'OverflowTpl--with-tooltip': showTooltip
+        }) }, children));
+    return showTooltip ? (_J$X_(TooltipWrapper["default"], tslib.__assign({}, omit__default["default"](props, ['className', 'inline', 'targetSelector', 'children']), { tooltip: normalizedTooltip }), Body)) : (Body);
+};
+OverflowTpl.defaultProps = {
+    inline: true
+};
+var OverflowTpl$1 = amisCore.themeable(OverflowTpl);
+
+exports["default"] = OverflowTpl$1;