amis 1.4.0 → 1.4.2-beta.12

package/lib/renderers/SearchBox.js

@@ -8,9 +8,16 @@ var SearchBox_1 = (0, tslib_1.__importDefault)(require("../components/SearchBox"
 var helper_1 = require("../utils/helper");
 var SearchBoxRenderer = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(SearchBoxRenderer, _super);
-    function SearchBoxRenderer() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function SearchBoxRenderer(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            value: (0, helper_1.getPropValue)(props) || ''
+        };
+        return _this;
     }
+    SearchBoxRenderer.prototype.handleChange = function (value) {
+        this.setState({ value: value });
+    };
     SearchBoxRenderer.prototype.handleCancel = function () {
         var name = this.props.name;
         var onQuery = this.props.onQuery;
@@ -29,8 +36,8 @@ var SearchBoxRenderer = /** @class */ (function (_super) {
     };
     SearchBoxRenderer.prototype.render = function () {
         var _a = this.props, data = _a.data, name = _a.name, onQuery = _a.onQuery, mini = _a.mini, searchImediately = _a.searchImediately, placeholder = _a.placeholder, onChange = _a.onChange, className = _a.className;
-        var value = (0, helper_1.getPropValue)(this.props);
-        return (react_1.default.createElement(SearchBox_1.default, { className: className, name: name, disabled: !onQuery, defaultActive: !!value, defaultValue: onChange ? undefined : value, value: onChange ? value : undefined, mini: mini, searchImediately: searchImediately, onSearch: this.handleSearch, onCancel: this.handleCancel, placeholder: placeholder, onChange: onChange }));
+        var value = this.state.value;
+        return (react_1.default.createElement(SearchBox_1.default, { className: className, name: name, disabled: !onQuery, defaultActive: !!value, defaultValue: onChange ? undefined : value, value: value, mini: mini, searchImediately: searchImediately, onSearch: this.handleSearch, onCancel: this.handleCancel, placeholder: placeholder, onChange: this.handleChange }));
     };
     SearchBoxRenderer.defaultProps = {
         name: 'keywords',
@@ -38,6 +45,12 @@ var SearchBoxRenderer = /** @class */ (function (_super) {
         searchImediately: false
     };
     SearchBoxRenderer.propsList = ['mini', 'searchImediately'];
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [String]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], SearchBoxRenderer.prototype, "handleChange", null);
     (0, tslib_1.__decorate)([
         helper_1.autobind,
         (0, tslib_1.__metadata)("design:type", Function),
@@ -53,7 +66,8 @@ var SearchBoxRenderer = /** @class */ (function (_super) {
     SearchBoxRenderer = (0, tslib_1.__decorate)([
         (0, factory_1.Renderer)({
             type: 'search-box'
-        })
+        }),
+        (0, tslib_1.__metadata)("design:paramtypes", [Object])
     ], SearchBoxRenderer);
     return SearchBoxRenderer;
 }(react_1.default.Component));

package/lib/renderers/SearchBox.js.map

@@ -6,8 +6,8 @@
         "/src/renderers/SearchBox.tsx"
     ],
     "names": [],
-    "mappings": ";;;;AACA,sCAAmD;AACnD,6DAA0B;AAE1B,mFAAgD;AAChD,0CAKyB;AAmDzB;IAAuC,kDAA+B;IAAtE;;IA4DA,CAAC;IAlDC,wCAAY,GAAZ;QACE,IAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QAC7B,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;QACnC,IAAM,KAAK,GAAG,IAAA,qBAAY,EAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,KAAK,KAAK,EAAE,EAAE;YAChB,IAAM,IAAI,GAAQ,EAAE,CAAC;YACrB,IAAA,oBAAW,EAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;YAC5B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,CAAC;SACjB;IACH,CAAC;IAGD,wCAAY,GAAZ,UAAa,IAAY;QACjB,IAAA,KAA2B,IAAI,CAAC,KAAK,EAApC,IAAI,UAAA,EAAW,OAAO,aAAc,CAAC;QAC5C,IAAM,IAAI,GAAQ,EAAE,CAAC;QACrB,IAAA,oBAAW,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC9B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,CAAC;IAClB,CAAC;IAED,kCAAM,GAAN;QACQ,IAAA,KASF,IAAI,CAAC,KAAK,EARZ,IAAI,UAAA,EACJ,IAAI,UAAA,EACK,OAAO,aAAA,EAChB,IAAI,UAAA,EACJ,gBAAgB,sBAAA,EAChB,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,SAAS,eACG,CAAC;QAEf,IAAM,KAAK,GAAG,IAAA,qBAAY,EAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEvC,OAAO,CACL,8BAAC,mBAAS,IACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAClB,aAAa,EAAE,CAAC,CAAC,KAAK,EACtB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAC1C,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACnC,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;IACJ,CAAC;IA1DM,8BAAY,GAAG;QACpB,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,KAAK;QACX,gBAAgB,EAAE,KAAK;KACxB,CAAC;IAEK,2BAAS,GAAkB,CAAC,MAAM,EAAE,kBAAkB,CAAE,CAAA;IAG/D;QADC,iBAAQ;;;;yDAUR;IAGD;QADC,iBAAQ;;;;yDAMR;IA3BU,iBAAiB;QAH7B,IAAA,kBAAQ,EAAC;YACR,IAAI,EAAE,YAAY;SACnB,CAAC;OACW,iBAAiB,CA4D7B;IAAD,wBAAC;CAAA,AA5DD,CAAuC,eAAK,CAAC,SAAS,GA4DrD;AA5DY,8CAAiB",
+    "mappings": ";;;;AACA,sCAAmD;AACnD,6DAA0B;AAE1B,mFAAgD;AAChD,0CAKyB;AAuDzB;IAAuC,kDAGtC;IASC,2BAAY,KAAqB;QAAjC,YACE,kBAAM,KAAK,CAAC,SAIb;QAHC,KAAI,CAAC,KAAK,GAAG;YACX,KAAK,EAAE,IAAA,qBAAY,EAAC,KAAK,CAAC,IAAI,EAAE;SACjC,CAAC;;IACJ,CAAC;IAGD,wCAAY,GAAZ,UAAa,KAAa;QACxB,IAAI,CAAC,QAAQ,CAAC,EAAC,KAAK,OAAA,EAAC,CAAC,CAAC;IACzB,CAAC;IAGD,wCAAY,GAAZ;QACE,IAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;QAC7B,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;QACnC,IAAM,KAAK,GAAG,IAAA,qBAAY,EAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvC,IAAI,KAAK,KAAK,EAAE,EAAE;YAChB,IAAM,IAAI,GAAQ,EAAE,CAAC;YACrB,IAAA,oBAAW,EAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC;YAC5B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,CAAC;SACjB;IACH,CAAC;IAGD,wCAAY,GAAZ,UAAa,IAAY;QACjB,IAAA,KAA2B,IAAI,CAAC,KAAK,EAApC,IAAI,UAAA,EAAW,OAAO,aAAc,CAAC;QAC5C,IAAM,IAAI,GAAQ,EAAE,CAAC;QACrB,IAAA,oBAAW,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC9B,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,IAAI,CAAC,CAAC;IAClB,CAAC;IAED,kCAAM,GAAN;QACQ,IAAA,KASF,IAAI,CAAC,KAAK,EARZ,IAAI,UAAA,EACJ,IAAI,UAAA,EACK,OAAO,aAAA,EAChB,IAAI,UAAA,EACJ,gBAAgB,sBAAA,EAChB,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,SAAS,eACG,CAAC;QAEf,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAE/B,OAAO,CACL,8BAAC,mBAAS,IACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAClB,aAAa,EAAE,CAAC,CAAC,KAAK,EACtB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAC1C,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC3B,CACH,CAAC;IACJ,CAAC;IAtEM,8BAAY,GAAG;QACpB,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,KAAK;QACX,gBAAgB,EAAE,KAAK;KACxB,CAAC;IAEK,2BAAS,GAAkB,CAAC,MAAM,EAAE,kBAAkB,CAAE,CAAA;IAU/D;QADC,iBAAQ;;;;yDAGR;IAGD;QADC,iBAAQ;;;;yDAUR;IAGD;QADC,iBAAQ;;;;yDAMR;IA1CU,iBAAiB;QAH7B,IAAA,kBAAQ,EAAC;YACR,IAAI,EAAE,YAAY;SACnB,CAAC;;OACW,iBAAiB,CA2E7B;IAAD,wBAAC;CAAA,AA3ED,CAAuC,eAAK,CAAC,SAAS,GA2ErD;AA3EY,8CAAiB",
     "sourcesContent": [
-        "import Spinner from '../components/Spinner';\nimport {Renderer, RendererProps} from '../factory';\nimport React from 'react';\nimport {BaseSchema, SchemaClassName} from '../Schema';\nimport SearchBox from '../components/SearchBox';\nimport {\n  autobind,\n  getPropValue,\n  getVariable,\n  setVariable\n} from '../utils/helper';\n\n/**\n * 搜索框渲染器\n */\nexport interface SearchBoxSchema extends BaseSchema {\n  /**\n   * 指定为搜索框。\n   *\n   * 文档：https://baidu.gitee.io/amis/docs/components/search-box\n   */\n  type: 'search-box';\n\n  /**\n   * 外层 css 类名\n   */\n  className?: SchemaClassName;\n\n  /**\n   * 关键字名字。\n   *\n   * @default keywords\n   */\n  name?: string;\n\n  /**\n   * 占位符\n   */\n  placeholder?: string;\n\n  /**\n   * 是否为 Mini 样式。\n   */\n  mini?: boolean;\n\n  /**\n   * 是否立马搜索。\n   */\n  searchImediately?: boolean;\n}\n\ninterface SearchBoxProps\n  extends RendererProps,\n    Omit<SearchBoxSchema, 'type' | 'className'> {\n  name: string;\n  onQuery?: (query: {[propName: string]: string}) => void;\n}\n\n@Renderer({\n  type: 'search-box'\n})\nexport class SearchBoxRenderer extends React.Component<SearchBoxProps> {\n  static defaultProps = {\n    name: 'keywords',\n    mini: false,\n    searchImediately: false\n  };\n\n  static propsList: Array<string> = ['mini', 'searchImediately'];\n\n  @autobind\n  handleCancel() {\n    const name = this.props.name;\n    const onQuery = this.props.onQuery;\n    const value = getPropValue(this.props);\n    if (value !== '') {\n      const data: any = {};\n      setVariable(data, name, '');\n      onQuery?.(data);\n    }\n  }\n\n  @autobind\n  handleSearch(text: string) {\n    const {name, onQuery: onQuery} = this.props;\n    const data: any = {};\n    setVariable(data, name, text);\n    onQuery?.(data);\n  }\n\n  render() {\n    const {\n      data,\n      name,\n      onQuery: onQuery,\n      mini,\n      searchImediately,\n      placeholder,\n      onChange,\n      className\n    } = this.props;\n\n    const value = getPropValue(this.props);\n\n    return (\n      <SearchBox\n        className={className}\n        name={name}\n        disabled={!onQuery}\n        defaultActive={!!value}\n        defaultValue={onChange ? undefined : value}\n        value={onChange ? value : undefined}\n        mini={mini}\n        searchImediately={searchImediately}\n        onSearch={this.handleSearch}\n        onCancel={this.handleCancel}\n        placeholder={placeholder}\n        onChange={onChange}\n      />\n    );\n  }\n}\n"
+        "import Spinner from '../components/Spinner';\nimport {Renderer, RendererProps} from '../factory';\nimport React from 'react';\nimport {BaseSchema, SchemaClassName} from '../Schema';\nimport SearchBox from '../components/SearchBox';\nimport {\n  autobind,\n  getPropValue,\n  getVariable,\n  setVariable\n} from '../utils/helper';\n\n/**\n * 搜索框渲染器\n */\nexport interface SearchBoxSchema extends BaseSchema {\n  /**\n   * 指定为搜索框。\n   *\n   * 文档：https://baidu.gitee.io/amis/docs/components/search-box\n   */\n  type: 'search-box';\n\n  /**\n   * 外层 css 类名\n   */\n  className?: SchemaClassName;\n\n  /**\n   * 关键字名字。\n   *\n   * @default keywords\n   */\n  name?: string;\n\n  /**\n   * 占位符\n   */\n  placeholder?: string;\n\n  /**\n   * 是否为 Mini 样式。\n   */\n  mini?: boolean;\n\n  /**\n   * 是否立马搜索。\n   */\n  searchImediately?: boolean;\n}\n\ninterface SearchBoxProps\n  extends RendererProps,\n    Omit<SearchBoxSchema, 'type' | 'className'> {\n  name: string;\n  onQuery?: (query: {[propName: string]: string}) => void;\n}\n\nexport interface SearchBoxState {\n  value: string;\n}\n\n@Renderer({\n  type: 'search-box'\n})\nexport class SearchBoxRenderer extends React.Component<\n  SearchBoxProps,\n  SearchBoxState\n> {\n  static defaultProps = {\n    name: 'keywords',\n    mini: false,\n    searchImediately: false\n  };\n\n  static propsList: Array<string> = ['mini', 'searchImediately'];\n\n  constructor(props: SearchBoxProps) {\n    super(props);\n    this.state = {\n      value: getPropValue(props) || ''\n    };\n  }\n\n  @autobind\n  handleChange(value: string) {\n    this.setState({value});\n  }\n\n  @autobind\n  handleCancel() {\n    const name = this.props.name;\n    const onQuery = this.props.onQuery;\n    const value = getPropValue(this.props);\n    if (value !== '') {\n      const data: any = {};\n      setVariable(data, name, '');\n      onQuery?.(data);\n    }\n  }\n\n  @autobind\n  handleSearch(text: string) {\n    const {name, onQuery: onQuery} = this.props;\n    const data: any = {};\n    setVariable(data, name, text);\n    onQuery?.(data);\n  }\n\n  render() {\n    const {\n      data,\n      name,\n      onQuery: onQuery,\n      mini,\n      searchImediately,\n      placeholder,\n      onChange,\n      className\n    } = this.props;\n\n    const value = this.state.value;\n\n    return (\n      <SearchBox\n        className={className}\n        name={name}\n        disabled={!onQuery}\n        defaultActive={!!value}\n        defaultValue={onChange ? undefined : value}\n        value={value}\n        mini={mini}\n        searchImediately={searchImediately}\n        onSearch={this.handleSearch}\n        onCancel={this.handleCancel}\n        placeholder={placeholder}\n        onChange={this.handleChange}\n      />\n    );\n  }\n}\n"
     ]
 }

package/lib/renderers/SparkLine.d.ts

@@ -26,6 +26,10 @@ export interface SparkLineSchema extends BaseSchema {
      * 点击行为
      */
     clickAction?: ActionSchema;
+    /**
+     * 空数据时显示的内容
+     */
+    placeholder?: string;
     value?: Array<number | {
         value: number;
         label?: string;

package/lib/renderers/SparkLine.js.map

@@ -6,8 +6,8 @@
         "/src/renderers/SparkLine.tsx"
     ],
     "names": [],
-    "mappings": ";;;;AAAA,mFAAkE;AAClE,sCAAmD;AACnD,6DAA0B;AAI1B,0CAAqE;AA0ErE;IAAuC,kDAAmC;IAA1E;;IAuBA,CAAC;IArBC,uCAAW,GAAX,UAAY,CAAmB,EAAE,GAAQ;QACjC,IAAA,KAA0C,IAAI,CAAC,KAAK,EAAnD,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA,EAAE,IAAI,UAAc,CAAC;QAC3D,IAAI,CAAC,CAAC,gBAAgB,IAAI,CAAC,WAAW,IAAI,QAAQ,EAAE;YAClD,OAAO;SACR;QAED,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,IAAI,EAAE,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,IAAA,qBAAY,EAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACtE,CAAC;IAED,kCAAM,GAAN;QACQ,IAAA,KAAmC,IAAI,CAAC,KAAK,EAA5C,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,IAAI,UAAA,EAAE,WAAW,iBAAc,CAAC;QACpD,IAAM,UAAU,GAAG,IAAA,qBAAY,EAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAEtD,OAAO,CACL,8BAAC,mBAAS,0BACR,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,IAC/C,IAAI,CAAC,KAAK,IACd,KAAK,EAAE,UAAU,IACjB,CACH,CAAC;IACJ,CAAC;;IApBD;QADC,iBAAQ;;0EACM,eAAK,oBAAL,eAAK,CAAC,UAAU;;wDAO9B;IATU,iBAAiB;QAH7B,IAAA,kBAAQ,EAAC;YACR,IAAI,EAAE,WAAW;SAClB,CAAC;OACW,iBAAiB,CAuB7B;IAAD,wBAAC;CAAA,AAvBD,CAAuC,eAAK,CAAC,SAAS,GAuBrD;AAvBY,8CAAiB",
+    "mappings": ";;;;AAAA,mFAAkE;AAClE,sCAAmD;AACnD,6DAA0B;AAI1B,0CAAqE;AA+ErE;IAAuC,kDAAmC;IAA1E;;IAuBA,CAAC;IArBC,uCAAW,GAAX,UAAY,CAAmB,EAAE,GAAQ;QACjC,IAAA,KAA0C,IAAI,CAAC,KAAK,EAAnD,QAAQ,cAAA,EAAE,QAAQ,cAAA,EAAE,WAAW,iBAAA,EAAE,IAAI,UAAc,CAAC;QAC3D,IAAI,CAAC,CAAC,gBAAgB,IAAI,CAAC,WAAW,IAAI,QAAQ,EAAE;YAClD,OAAO;SACR;QAED,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,IAAI,EAAE,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,IAAA,qBAAY,EAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACtE,CAAC;IAED,kCAAM,GAAN;QACQ,IAAA,KAAmC,IAAI,CAAC,KAAK,EAA5C,KAAK,WAAA,EAAE,IAAI,UAAA,EAAE,IAAI,UAAA,EAAE,WAAW,iBAAc,CAAC;QACpD,IAAM,UAAU,GAAG,IAAA,qBAAY,EAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAEtD,OAAO,CACL,8BAAC,mBAAS,0BACR,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,IAC/C,IAAI,CAAC,KAAK,IACd,KAAK,EAAE,UAAU,IACjB,CACH,CAAC;IACJ,CAAC;;IApBD;QADC,iBAAQ;;0EACM,eAAK,oBAAL,eAAK,CAAC,UAAU;;wDAO9B;IATU,iBAAiB;QAH7B,IAAA,kBAAQ,EAAC;YACR,IAAI,EAAE,WAAW;SAClB,CAAC;OACW,iBAAiB,CAuB7B;IAAD,wBAAC;CAAA,AAvBD,CAAuC,eAAK,CAAC,SAAS,GAuBrD;AAvBY,8CAAiB",
     "sourcesContent": [
-        "import SparkLine, {SparkLineProps} from '../components/SparkLine';\nimport {Renderer, RendererProps} from '../factory';\nimport React from 'react';\nimport {resolveVariableAndFilter} from '../utils/tpl-builtin';\nimport {BaseSchema, SchemaClassName} from '../Schema';\nimport {ActionSchema} from './Action';\nimport {autobind, createObject, getPropValue} from '../utils/helper';\n\nexport interface SparkLineSchema extends BaseSchema {\n  type: 'sparkline';\n\n  /**\n   * css 类名\n   */\n  className?: SchemaClassName;\n\n  /**\n   * 关联数据变量。\n   */\n  name?: string;\n\n  /**\n   * 宽度\n   * @default 100\n   */\n  width?: number;\n\n  /**\n   * 高度\n   * @default 50\n   */\n  height?: number;\n\n  /**\n   * 点击行为\n   */\n  clickAction?: ActionSchema;\n\n  // /**\n  //  * 线的转折是否要有圆角。默认为 2\n  //  */\n  // lineRadius?: number;\n\n  // /**\n  //  * 默认为2，线的宽度。\n  //  */\n  // lineWidth?: number;\n\n  // /**\n  //  * 线的颜色，默认为 primaryColor\n  //  */\n  // lineColor?: string;\n\n  // /**\n  //  * 下面堆积区域的颜色。\n  //  */\n  // areaColor?: string;\n\n  // /**\n  //  * 光标移动上来的点的颜色值\n  //  */\n  // cursorColor?: number;\n\n  // 如果有 label 就有 hover 效果，如果没有没有鼠标hover 交互。\n  value?: Array<\n    | number\n    | {\n        value: number;\n        label?: string;\n      }\n  >;\n}\n\ninterface SparkLineRendProps\n  extends RendererProps,\n    Omit<SparkLineSchema, 'type' | 'className'> {}\n\n@Renderer({\n  type: 'sparkline'\n})\nexport class SparkLineRenderer extends React.Component<SparkLineRendProps> {\n  @autobind\n  handleClick(e: React.MouseEvent, ctx: any) {\n    const {disabled, onAction, clickAction, data} = this.props;\n    if (e.defaultPrevented || !clickAction || disabled) {\n      return;\n    }\n\n    onAction?.(null, clickAction, ctx ? createObject(data, ctx) : data);\n  }\n\n  render() {\n    const {value, name, data, clickAction} = this.props;\n    const finalValue = getPropValue(this.props) || [1, 1];\n\n    return (\n      <SparkLine\n        onClick={clickAction ? this.handleClick : undefined}\n        {...this.props}\n        value={finalValue}\n      />\n    );\n  }\n}\n"
+        "import SparkLine, {SparkLineProps} from '../components/SparkLine';\nimport {Renderer, RendererProps} from '../factory';\nimport React from 'react';\nimport {resolveVariableAndFilter} from '../utils/tpl-builtin';\nimport {BaseSchema, SchemaClassName} from '../Schema';\nimport {ActionSchema} from './Action';\nimport {autobind, createObject, getPropValue} from '../utils/helper';\n\nexport interface SparkLineSchema extends BaseSchema {\n  type: 'sparkline';\n\n  /**\n   * css 类名\n   */\n  className?: SchemaClassName;\n\n  /**\n   * 关联数据变量。\n   */\n  name?: string;\n\n  /**\n   * 宽度\n   * @default 100\n   */\n  width?: number;\n\n  /**\n   * 高度\n   * @default 50\n   */\n  height?: number;\n\n  /**\n   * 点击行为\n   */\n  clickAction?: ActionSchema;\n\n  /**\n   * 空数据时显示的内容\n   */\n  placeholder?: string;\n\n  // /**\n  //  * 线的转折是否要有圆角。默认为 2\n  //  */\n  // lineRadius?: number;\n\n  // /**\n  //  * 默认为2，线的宽度。\n  //  */\n  // lineWidth?: number;\n\n  // /**\n  //  * 线的颜色，默认为 primaryColor\n  //  */\n  // lineColor?: string;\n\n  // /**\n  //  * 下面堆积区域的颜色。\n  //  */\n  // areaColor?: string;\n\n  // /**\n  //  * 光标移动上来的点的颜色值\n  //  */\n  // cursorColor?: number;\n\n  // 如果有 label 就有 hover 效果，如果没有没有鼠标hover 交互。\n  value?: Array<\n    | number\n    | {\n        value: number;\n        label?: string;\n      }\n  >;\n}\n\ninterface SparkLineRendProps\n  extends RendererProps,\n    Omit<SparkLineSchema, 'type' | 'className'> {}\n\n@Renderer({\n  type: 'sparkline'\n})\nexport class SparkLineRenderer extends React.Component<SparkLineRendProps> {\n  @autobind\n  handleClick(e: React.MouseEvent, ctx: any) {\n    const {disabled, onAction, clickAction, data} = this.props;\n    if (e.defaultPrevented || !clickAction || disabled) {\n      return;\n    }\n\n    onAction?.(null, clickAction, ctx ? createObject(data, ctx) : data);\n  }\n\n  render() {\n    const {value, name, data, clickAction} = this.props;\n    const finalValue = getPropValue(this.props) || [1, 1];\n\n    return (\n      <SparkLine\n        onClick={clickAction ? this.handleClick : undefined}\n        {...this.props}\n        value={finalValue}\n      />\n    );\n  }\n}\n"
     ]
 }

package/lib/renderers/Table/ColumnToggler.d.ts

@@ -0,0 +1,113 @@
+import React from 'react';
+import Sortable from 'sortablejs';
+import { RendererProps } from '../../factory';
+import type { TooltipObject } from '../../components/TooltipWrapper';
+import { IColumn } from '../../store/table';
+export interface ColumnTogglerProps extends RendererProps {
+    /**
+     * 按钮文字
+     */
+    label?: string | React.ReactNode;
+    /**
+     * 按钮提示文字，hover focus 时显示
+     */
+    tooltip?: string | TooltipObject;
+    /**
+     * 禁用状态下的提示
+     */
+    disabledTip?: string | TooltipObject;
+    /**
+     * 点击外部是否关闭
+     */
+    closeOnOutside?: boolean;
+    /**
+     * 点击内容是否关闭
+     */
+    closeOnClick?: boolean;
+    /**
+     * 下拉菜单对齐方式
+     */
+    align?: 'left' | 'right';
+    /**
+     *  ColumnToggler的CSS类名
+     */
+    className?: string;
+    /**
+     * 按钮的CSS类名
+     */
+    btnClassName?: string;
+    /**
+     * 按钮大小
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * 按钮级别，样式
+     */
+    level?: 'info' | 'success' | 'danger' | 'warning' | 'primary' | 'link';
+    /**
+     * 是否独占一行 `display: block`
+     */
+    block?: boolean;
+    /**
+     * 是否可通过拖拽排序
+     */
+    draggable?: boolean;
+    /**
+     * 默认是否展开
+     */
+    defaultIsOpened?: boolean;
+    /**
+     * 激活状态
+     */
+    isActived?: boolean;
+    /**
+     * ICON名称
+     */
+    icon?: string | React.ReactNode;
+    /**
+     * 是否只显示图标。
+     */
+    iconOnly?: boolean;
+    /**
+     * 是否隐藏展开的Icon
+     */
+    hideExpandIcon?: boolean;
+    /**
+     * 是否显示遮罩层
+     */
+    overlay?: boolean;
+    /**
+     * 列数据
+     */
+    columns: Array<IColumn>;
+    onColumnToggle: (columns: Array<IColumn>) => void;
+    modalContainer?: () => HTMLElement;
+}
+export interface ColumnTogglerState {
+    isOpened: boolean;
+    enableSorting: boolean;
+    tempColumns: any[];
+}
+export default class ColumnToggler extends React.Component<ColumnTogglerProps, ColumnTogglerState> {
+    state: ColumnTogglerState;
+    static defaultProps: Pick<ColumnTogglerProps, 'placement' | 'tooltipTrigger' | 'tooltipRootClose' | 'draggable'>;
+    target: any;
+    sortable?: Sortable;
+    dragRefDOM: HTMLElement;
+    constructor(props: ColumnTogglerProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    domRef(ref: any): void;
+    toggle(e: React.MouseEvent<any>): void;
+    open(): void;
+    close(): void;
+    swapColumnPosition(oldIndex: number, newIndex: number): void;
+    updateToggledColumn(column: IColumn, index: number, value: any, shift?: boolean): void;
+    dragRef(ref: any): void;
+    initDragging(): void;
+    destroyDragging(): void;
+    onConfirm(): void;
+    renderOuter(): JSX.Element;
+    renderModal(): JSX.Element;
+    render(): JSX.Element;
+}

package/lib/renderers/Table/ColumnToggler.js

@@ -0,0 +1,216 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = (0, tslib_1.__importDefault)(require("react"));
+var react_dom_1 = require("react-dom");
+var sortablejs_1 = (0, tslib_1.__importDefault)(require("sortablejs"));
+var cloneDeep_1 = (0, tslib_1.__importDefault)(require("lodash/cloneDeep"));
+var Overlay_1 = (0, tslib_1.__importDefault)(require("../../components/Overlay"));
+var PopOver_1 = (0, tslib_1.__importDefault)(require("../../components/PopOver"));
+var Modal_1 = (0, tslib_1.__importDefault)(require("../../components/Modal"));
+var Button_1 = (0, tslib_1.__importDefault)(require("../../components/Button"));
+var Checkbox_1 = (0, tslib_1.__importDefault)(require("../../components/Checkbox"));
+var TooltipWrapper_1 = (0, tslib_1.__importDefault)(require("../../components/TooltipWrapper"));
+var helper_1 = require("../../utils/helper");
+var tpl_1 = require("../../utils/tpl");
+var icons_1 = require("../../components/icons");
+var RootClose_1 = require("../../utils/RootClose");
+var ColumnToggler = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ColumnToggler, _super);
+    function ColumnToggler(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isOpened: false,
+            enableSorting: false,
+            tempColumns: (0, cloneDeep_1.default)(_this.props.columns)
+        };
+        _this.open = _this.open.bind(_this);
+        _this.close = _this.close.bind(_this);
+        _this.toggle = _this.toggle.bind(_this);
+        _this.domRef = _this.domRef.bind(_this);
+        _this.dragRef = _this.dragRef.bind(_this);
+        return _this;
+    }
+    ColumnToggler.prototype.componentDidMount = function () {
+        if (this.props.defaultIsOpened) {
+            this.setState({
+                isOpened: true
+            });
+        }
+    };
+    ColumnToggler.prototype.componentWillUnmount = function () {
+        this.destroyDragging();
+    };
+    ColumnToggler.prototype.domRef = function (ref) {
+        this.target = ref;
+    };
+    ColumnToggler.prototype.toggle = function (e) {
+        e.preventDefault();
+        this.setState({
+            isOpened: !this.state.isOpened
+        });
+    };
+    ColumnToggler.prototype.open = function () {
+        this.setState({
+            isOpened: true
+        });
+    };
+    ColumnToggler.prototype.close = function () {
+        this.setState({
+            isOpened: false,
+            enableSorting: false,
+            tempColumns: (0, cloneDeep_1.default)(this.props.columns)
+        });
+    };
+    ColumnToggler.prototype.swapColumnPosition = function (oldIndex, newIndex) {
+        var columns = this.state.tempColumns;
+        columns[oldIndex] = columns.splice(newIndex, 1, columns[oldIndex])[0];
+        this.setState({ tempColumns: columns });
+    };
+    ColumnToggler.prototype.updateToggledColumn = function (column, index, value, shift) {
+        var tempColumns = this.state.tempColumns.concat();
+        tempColumns.splice(index, 1, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column), { toggled: value }));
+        this.setState({ tempColumns: tempColumns });
+    };
+    ColumnToggler.prototype.dragRef = function (ref) {
+        var enableSorting = this.state.enableSorting;
+        var draggable = this.props.draggable;
+        if (enableSorting && draggable && ref) {
+            this.initDragging();
+        }
+    };
+    ColumnToggler.prototype.initDragging = function () {
+        var _this = this;
+        var dom = (0, react_dom_1.findDOMNode)(this);
+        var ns = this.props.classPrefix;
+        this.sortable = new sortablejs_1.default(dom.querySelector("." + ns + "ColumnToggler-modal-content"), {
+            group: "ColumnToggler-modal-content",
+            animation: 150,
+            handle: "." + ns + "ColumnToggler-menuItem-dragBar",
+            ghostClass: ns + "ColumnToggler-menuItem--dragging",
+            onEnd: function (e) {
+                if (e.newIndex === e.oldIndex) {
+                    return;
+                }
+                var parent = e.to;
+                if (e.oldIndex < parent.childNodes.length - 1) {
+                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+                }
+                else {
+                    parent.appendChild(e.item);
+                }
+                _this.swapColumnPosition(e.oldIndex, e.newIndex);
+            }
+        });
+    };
+    ColumnToggler.prototype.destroyDragging = function () {
+        this.sortable && this.sortable.destroy();
+    };
+    ColumnToggler.prototype.onConfirm = function () {
+        var tempColumns = this.state.tempColumns;
+        var onColumnToggle = this.props.onColumnToggle;
+        onColumnToggle && onColumnToggle((0, tslib_1.__spreadArray)([], tempColumns, true));
+        this.setState({
+            isOpened: false,
+            enableSorting: false
+        });
+    };
+    ColumnToggler.prototype.renderOuter = function () {
+        var _this = this;
+        var _a;
+        var _b = this.props, popOverContainer = _b.popOverContainer, cx = _b.classnames, ns = _b.classPrefix, children = _b.children, closeOnClick = _b.closeOnClick, closeOnOutside = _b.closeOnOutside;
+        var body = (react_1.default.createElement(RootClose_1.RootClose, { disabled: !this.state.isOpened, onRootClose: closeOnOutside !== false ? this.close : helper_1.noop }, function (ref) {
+            return (react_1.default.createElement("ul", { className: cx('ColumnToggler-menu'), onClick: closeOnClick ? _this.close : helper_1.noop, ref: ref }, children));
+        }));
+        if (popOverContainer) {
+            return (react_1.default.createElement(Overlay_1.default, { container: popOverContainer, target: function () { return _this.target; }, show: true },
+                react_1.default.createElement(PopOver_1.default, { overlay: true, onHide: this.close, classPrefix: ns, className: cx('ColumnToggler-popover'), style: { minWidth: (_a = this.target) === null || _a === void 0 ? void 0 : _a.offsetWidth } }, body)));
+        }
+        return body;
+    };
+    ColumnToggler.prototype.renderModal = function () {
+        var _this = this;
+        var _a = this.props, render = _a.render, cx = _a.classnames, ns = _a.classPrefix, modalContainer = _a.modalContainer, draggable = _a.draggable, overlay = _a.overlay, __ = _a.translate;
+        var _b = this.state, enableSorting = _b.enableSorting, tempColumns = _b.tempColumns;
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Modal_1.default, { closeOnEsc: true, onHide: this.close, show: this.state.isOpened, contentClassName: cx('ColumnToggler-modal'), container: modalContainer || this.target, overlay: typeof overlay === 'boolean' ? overlay : false },
+                react_1.default.createElement("header", { className: cx('ColumnToggler-modal-header') },
+                    react_1.default.createElement("span", { className: cx('ColumnToggler-modal-title') }, "\u5217\u8BBE\u7F6E"),
+                    react_1.default.createElement("a", { "data-tooltip": __('Dialog.close'), "data-position": "left", className: cx('Modal-close'), onClick: this.close },
+                        react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon" }))),
+                react_1.default.createElement("ul", { className: cx('ColumnToggler-modal-content'), ref: this.dragRef }, Array.isArray(tempColumns)
+                    ? tempColumns.map(function (column, index) { return (react_1.default.createElement(TooltipWrapper_1.default, { tooltipClassName: cx('ColumnToggler-tooltip'), placement: "top", tooltip: column.label || '', trigger: enableSorting ? 'click' : 'hover', key: column.index },
+                        react_1.default.createElement("li", { className: cx('ColumnToggler-menuItem'), key: column.index }, enableSorting && draggable && tempColumns.length > 1 ? (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement("a", { className: cx('ColumnToggler-menuItem-dragBar') },
+                                react_1.default.createElement(icons_1.Icon, { icon: "drag-bar", className: cx('icon') })),
+                            react_1.default.createElement("span", null, column.label ? render('tpl', column.label) : null))) : (react_1.default.createElement(Checkbox_1.default, { size: "sm", classPrefix: ns, checked: column.toggled, disabled: !column.toggable || enableSorting, onChange: _this.updateToggledColumn.bind(_this, column, index) },
+                            react_1.default.createElement("span", null, column.label ? render('tpl', column.label) : null)))))); })
+                    : null),
+                react_1.default.createElement("footer", { className: cx('ColumnToggler-modal-footer') },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(Button_1.default, { className: cx("ColumnToggler-modeSelect", {
+                                'is-actived': !enableSorting
+                            }), onClick: function () { return _this.setState({ enableSorting: false }); }, level: "link" }, __('Table.toggleColumn')),
+                        react_1.default.createElement(Button_1.default, { className: cx("ColumnToggler-modeSelect", {
+                                'is-actived': enableSorting
+                            }), onClick: function () {
+                                return _this.setState({ enableSorting: true }, function () {
+                                    return _this.state.enableSorting &&
+                                        _this.props.draggable &&
+                                        _this.initDragging();
+                                });
+                            }, level: "link", disabled: tempColumns.length < 2 }, __('sort'))),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(Button_1.default, { className: "mr-4", onClick: this.close }, __('cancel')),
+                        react_1.default.createElement(Button_1.default, { level: "primary", onClick: this.onConfirm }, __('confirm')))))));
+    };
+    ColumnToggler.prototype.render = function () {
+        var _a = this.props, tooltip = _a.tooltip, placement = _a.placement, tooltipContainer = _a.tooltipContainer, tooltipTrigger = _a.tooltipTrigger, tooltipRootClose = _a.tooltipRootClose, disabledTip = _a.disabledTip, block = _a.block, disabled = _a.disabled, btnDisabled = _a.btnDisabled, btnClassName = _a.btnClassName, size = _a.size, label = _a.label, level = _a.level, primary = _a.primary, className = _a.className, cx = _a.classnames, align = _a.align, iconOnly = _a.iconOnly, icon = _a.icon, isActived = _a.isActived, data = _a.data, draggable = _a.draggable, hideExpandIcon = _a.hideExpandIcon;
+        var button = (react_1.default.createElement("button", { onClick: this.toggle, disabled: disabled || btnDisabled, className: cx('Button', btnClassName, typeof level === 'undefined'
+                ? 'Button--default'
+                : level
+                    ? "Button--" + level
+                    : '', {
+                'Button--block': block,
+                'Button--primary': primary,
+                'Button--iconOnly': iconOnly
+            }, size ? "Button--" + size : '') },
+            icon ? (typeof icon === 'string' ? (react_1.default.createElement("i", { className: cx(icon, 'm-r-xs') })) : (icon)) : null,
+            typeof label === 'string' ? (0, tpl_1.filter)(label, data) : label,
+            hideExpandIcon || draggable ? null : (react_1.default.createElement("span", { className: cx('ColumnToggler-caret') },
+                react_1.default.createElement(icons_1.Icon, { icon: "caret", className: "icon" })))));
+        return (react_1.default.createElement("div", { className: cx('ColumnToggler', {
+                'ColumnToggler-block': block,
+                'ColumnToggler--alignRight': align === 'right',
+                'is-opened': this.state.isOpened,
+                'is-actived': isActived
+            }, className), ref: this.domRef },
+            draggable ? (button) : (react_1.default.createElement(TooltipWrapper_1.default, { placement: placement, tooltip: disabled ? disabledTip : tooltip, container: tooltipContainer, trigger: tooltipTrigger, rootClose: tooltipRootClose }, button)),
+            this.state.isOpened
+                ? draggable
+                    ? this.renderModal()
+                    : this.renderOuter()
+                : null));
+    };
+    ColumnToggler.defaultProps = {
+        placement: 'top',
+        tooltipTrigger: ['hover', 'focus'],
+        tooltipRootClose: false,
+        draggable: false
+    };
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], ColumnToggler.prototype, "dragRef", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", []),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], ColumnToggler.prototype, "onConfirm", null);
+    return ColumnToggler;
+}(react_1.default.Component));
+exports.default = ColumnToggler;
+//# sourceMappingURL=./renderers/Table/ColumnToggler.js.map

package/lib/renderers/Table/ColumnToggler.js.map

@@ -0,0 +1,13 @@
+{
+    "version": 3,
+    "file": "ColumnToggler.js",
+    "sourceRoot": "",
+    "sources": [
+        "/src/renderers/Table/ColumnToggler.tsx"
+    ],
+    "names": [],
+    "mappings": "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",
+    "sourcesContent": [
+        "import React from 'react';\nimport {findDOMNode} from 'react-dom';\nimport Sortable from 'sortablejs';\nimport cloneDeep from 'lodash/cloneDeep';\nimport {RendererProps} from '../../factory';\nimport Overlay from '../../components/Overlay';\nimport PopOver from '../../components/PopOver';\nimport Modal from '../../components/Modal';\nimport Button from '../../components/Button';\nimport Checkbox from '../../components/Checkbox';\nimport TooltipWrapper from '../../components/TooltipWrapper';\nimport type {TooltipObject} from '../../components/TooltipWrapper';\nimport {noop, autobind} from '../../utils/helper';\nimport {filter} from '../../utils/tpl';\nimport {Icon} from '../../components/icons';\nimport {RootClose} from '../../utils/RootClose';\nimport {IColumn} from '../../store/table';\n\nexport interface ColumnTogglerProps extends RendererProps {\n  /**\n   * 按钮文字\n   */\n  label?: string | React.ReactNode;\n\n  /**\n   * 按钮提示文字，hover focus 时显示\n   */\n  tooltip?: string | TooltipObject;\n\n  /**\n   * 禁用状态下的提示\n   */\n  disabledTip?: string | TooltipObject;\n\n  /**\n   * 点击外部是否关闭\n   */\n  closeOnOutside?: boolean;\n\n  /**\n   * 点击内容是否关闭\n   */\n  closeOnClick?: boolean;\n\n  /**\n   * 下拉菜单对齐方式\n   */\n  align?: 'left' | 'right';\n\n  /**\n   *  ColumnToggler的CSS类名\n   */\n  className?: string;\n\n  /**\n   * 按钮的CSS类名\n   */\n  btnClassName?: string;\n\n  /**\n   * 按钮大小\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n\n  /**\n   * 按钮级别，样式\n   */\n  level?: 'info' | 'success' | 'danger' | 'warning' | 'primary' | 'link';\n\n  /**\n   * 是否独占一行 `display: block`\n   */\n  block?: boolean;\n\n  /**\n   * 是否可通过拖拽排序\n   */\n  draggable?: boolean;\n\n  /**\n   * 默认是否展开\n   */\n  defaultIsOpened?: boolean;\n\n  /**\n   * 激活状态\n   */\n  isActived?: boolean;\n\n  /**\n   * ICON名称\n   */\n  icon?: string | React.ReactNode;\n\n  /**\n   * 是否只显示图标。\n   */\n  iconOnly?: boolean;\n\n  /**\n   * 是否隐藏展开的Icon\n   */\n  hideExpandIcon?: boolean;\n\n  /**\n   * 是否显示遮罩层\n   */\n  overlay?: boolean;\n\n  /**\n   * 列数据\n   */\n  columns: Array<IColumn>;\n\n  onColumnToggle: (columns: Array<IColumn>) => void;\n  modalContainer?: () => HTMLElement;\n}\n\nexport interface ColumnTogglerState {\n  isOpened: boolean;\n  enableSorting: boolean;\n  tempColumns: any[];\n}\n\nexport default class ColumnToggler extends React.Component<\n  ColumnTogglerProps,\n  ColumnTogglerState\n> {\n  state: ColumnTogglerState = {\n    isOpened: false,\n    enableSorting: false,\n    tempColumns: cloneDeep(this.props.columns)\n  };\n\n  static defaultProps: Pick<\n    ColumnTogglerProps,\n    'placement' | 'tooltipTrigger' | 'tooltipRootClose' | 'draggable'\n  > = {\n    placement: 'top',\n    tooltipTrigger: ['hover', 'focus'],\n    tooltipRootClose: false,\n    draggable: false\n  };\n\n  target: any;\n  sortable?: Sortable;\n  dragRefDOM: HTMLElement;\n\n  constructor(props: ColumnTogglerProps) {\n    super(props);\n\n    this.open = this.open.bind(this);\n    this.close = this.close.bind(this);\n    this.toggle = this.toggle.bind(this);\n    this.domRef = this.domRef.bind(this);\n    this.dragRef = this.dragRef.bind(this);\n  }\n\n  componentDidMount() {\n    if (this.props.defaultIsOpened) {\n      this.setState({\n        isOpened: true\n      });\n    }\n  }\n\n  componentWillUnmount() {\n    this.destroyDragging();\n  }\n\n  domRef(ref: any) {\n    this.target = ref;\n  }\n\n  toggle(e: React.MouseEvent<any>) {\n    e.preventDefault();\n\n    this.setState({\n      isOpened: !this.state.isOpened\n    });\n  }\n\n  open() {\n    this.setState({\n      isOpened: true\n    });\n  }\n\n  close() {\n    this.setState({\n      isOpened: false,\n      enableSorting: false,\n      tempColumns: cloneDeep(this.props.columns)\n    });\n  }\n\n  swapColumnPosition(oldIndex: number, newIndex: number) {\n    const columns = this.state.tempColumns;\n\n    columns[oldIndex] = columns.splice(newIndex, 1, columns[oldIndex])[0];\n    this.setState({tempColumns: columns});\n  }\n\n  updateToggledColumn(\n    column: IColumn,\n    index: number,\n    value: any,\n    shift?: boolean\n  ) {\n    const tempColumns = this.state.tempColumns.concat();\n\n    tempColumns.splice(index, 1, {\n      ...column,\n      toggled: value\n    });\n    this.setState({tempColumns});\n  }\n\n  @autobind\n  dragRef(ref: any) {\n    const {enableSorting} = this.state;\n    const {draggable} = this.props;\n\n    if (enableSorting && draggable && ref) {\n      this.initDragging();\n    }\n  }\n\n  initDragging() {\n    const dom = findDOMNode(this) as HTMLElement;\n    const ns = this.props.classPrefix;\n\n    this.sortable = new Sortable(\n      dom.querySelector(`.${ns}ColumnToggler-modal-content`) as HTMLElement,\n      {\n        group: `ColumnToggler-modal-content`,\n        animation: 150,\n        handle: `.${ns}ColumnToggler-menuItem-dragBar`,\n        ghostClass: `${ns}ColumnToggler-menuItem--dragging`,\n        onEnd: (e: any) => {\n          if (e.newIndex === e.oldIndex) {\n            return;\n          }\n\n          const parent = e.to as HTMLElement;\n          if (e.oldIndex < parent.childNodes.length - 1) {\n            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);\n          } else {\n            parent.appendChild(e.item);\n          }\n\n          this.swapColumnPosition(e.oldIndex, e.newIndex);\n        }\n      }\n    );\n  }\n\n  destroyDragging() {\n    this.sortable && this.sortable.destroy();\n  }\n\n  @autobind\n  onConfirm() {\n    const {tempColumns} = this.state;\n    const {onColumnToggle} = this.props;\n\n    onColumnToggle && onColumnToggle([...tempColumns]);\n    this.setState({\n      isOpened: false,\n      enableSorting: false\n    });\n  }\n\n  renderOuter() {\n    const {\n      popOverContainer,\n      classnames: cx,\n      classPrefix: ns,\n      children,\n      closeOnClick,\n      closeOnOutside\n    } = this.props;\n    const body = (\n      <RootClose\n        disabled={!this.state.isOpened}\n        onRootClose={closeOnOutside !== false ? this.close : noop}\n      >\n        {(ref: any) => {\n          return (\n            <ul\n              className={cx('ColumnToggler-menu')}\n              onClick={closeOnClick ? this.close : noop}\n              ref={ref}\n            >\n              {children}\n            </ul>\n          );\n        }}\n      </RootClose>\n    );\n\n    if (popOverContainer) {\n      return (\n        <Overlay container={popOverContainer} target={() => this.target} show>\n          <PopOver\n            overlay\n            onHide={this.close}\n            classPrefix={ns}\n            className={cx('ColumnToggler-popover')}\n            style={{minWidth: this.target?.offsetWidth}}\n          >\n            {body}\n          </PopOver>\n        </Overlay>\n      );\n    }\n\n    return body;\n  }\n\n  renderModal() {\n    const {\n      render,\n      classnames: cx,\n      classPrefix: ns,\n      modalContainer,\n      draggable,\n      overlay,\n      translate: __\n    } = this.props;\n\n    const {enableSorting, tempColumns} = this.state;\n\n    return (\n      <>\n        <Modal\n          closeOnEsc\n          onHide={this.close}\n          show={this.state.isOpened}\n          contentClassName={cx('ColumnToggler-modal')}\n          container={modalContainer || this.target}\n          overlay={typeof overlay === 'boolean' ? overlay : false}\n        >\n          <header className={cx('ColumnToggler-modal-header')}>\n            <span className={cx('ColumnToggler-modal-title')}>列设置</span>\n            <a\n              data-tooltip={__('Dialog.close')}\n              data-position=\"left\"\n              className={cx('Modal-close')}\n              onClick={this.close}\n            >\n              <Icon icon=\"close\" className=\"icon\" />\n            </a>\n          </header>\n\n          <ul className={cx('ColumnToggler-modal-content')} ref={this.dragRef}>\n            {Array.isArray(tempColumns)\n              ? tempColumns.map((column, index) => (\n                  <TooltipWrapper\n                    tooltipClassName={cx('ColumnToggler-tooltip')}\n                    placement=\"top\"\n                    tooltip={column.label || ''}\n                    trigger={enableSorting ? 'click' : 'hover'}\n                    key={column.index}\n                  >\n                    <li\n                      className={cx('ColumnToggler-menuItem')}\n                      key={column.index}\n                    >\n                      {enableSorting && draggable && tempColumns.length > 1 ? (\n                        <>\n                          <a className={cx('ColumnToggler-menuItem-dragBar')}>\n                            <Icon icon=\"drag-bar\" className={cx('icon')} />\n                          </a>\n                          <span>\n                            {column.label ? render('tpl', column.label) : null}\n                          </span>\n                        </>\n                      ) : (\n                        <Checkbox\n                          size=\"sm\"\n                          classPrefix={ns}\n                          checked={column.toggled}\n                          disabled={!column.toggable || enableSorting}\n                          onChange={this.updateToggledColumn.bind(\n                            this,\n                            column,\n                            index\n                          )}\n                        >\n                          <span>\n                            {column.label ? render('tpl', column.label) : null}\n                          </span>\n                        </Checkbox>\n                      )}\n                    </li>\n                  </TooltipWrapper>\n                ))\n              : null}\n          </ul>\n\n          <footer className={cx('ColumnToggler-modal-footer')}>\n            <div>\n              <Button\n                className={cx(`ColumnToggler-modeSelect`, {\n                  'is-actived': !enableSorting\n                })}\n                onClick={() => this.setState({enableSorting: false})}\n                level=\"link\"\n              >\n                {__('Table.toggleColumn')}\n              </Button>\n              <Button\n                className={cx(`ColumnToggler-modeSelect`, {\n                  'is-actived': enableSorting\n                })}\n                onClick={() =>\n                  this.setState(\n                    {enableSorting: true},\n                    () =>\n                      this.state.enableSorting &&\n                      this.props.draggable &&\n                      this.initDragging()\n                  )\n                }\n                level=\"link\"\n                disabled={tempColumns.length < 2}\n              >\n                {__('sort')}\n              </Button>\n            </div>\n            <div>\n              <Button className=\"mr-4\" onClick={this.close}>\n                {__('cancel')}\n              </Button>\n              <Button level=\"primary\" onClick={this.onConfirm}>\n                {__('confirm')}\n              </Button>\n            </div>\n          </footer>\n        </Modal>\n      </>\n    );\n  }\n\n  render() {\n    const {\n      tooltip,\n      placement,\n      tooltipContainer,\n      tooltipTrigger,\n      tooltipRootClose,\n      disabledTip,\n      block,\n      disabled,\n      btnDisabled,\n      btnClassName,\n      size,\n      label,\n      level,\n      primary,\n      className,\n      classnames: cx,\n      align,\n      iconOnly,\n      icon,\n      isActived,\n      data,\n      draggable,\n      hideExpandIcon\n    } = this.props;\n\n    const button = (\n      <button\n        onClick={this.toggle}\n        disabled={disabled || btnDisabled}\n        className={cx(\n          'Button',\n          btnClassName,\n          typeof level === 'undefined'\n            ? 'Button--default'\n            : level\n            ? `Button--${level}`\n            : '',\n          {\n            'Button--block': block,\n            'Button--primary': primary,\n            'Button--iconOnly': iconOnly\n          },\n          size ? `Button--${size}` : ''\n        )}\n      >\n        {icon ? (\n          typeof icon === 'string' ? (\n            <i className={cx(icon, 'm-r-xs')} />\n          ) : (\n            icon\n          )\n        ) : null}\n        {typeof label === 'string' ? filter(label, data) : label}\n        {hideExpandIcon || draggable ? null : (\n          <span className={cx('ColumnToggler-caret')}>\n            <Icon icon=\"caret\" className=\"icon\" />\n          </span>\n        )}\n      </button>\n    );\n\n    return (\n      <div\n        className={cx(\n          'ColumnToggler',\n          {\n            'ColumnToggler-block': block,\n            'ColumnToggler--alignRight': align === 'right',\n            'is-opened': this.state.isOpened,\n            'is-actived': isActived\n          },\n          className\n        )}\n        ref={this.domRef}\n      >\n        {draggable ? (\n          button\n        ) : (\n          <TooltipWrapper\n            placement={placement}\n            tooltip={disabled ? disabledTip : tooltip}\n            container={tooltipContainer}\n            trigger={tooltipTrigger}\n            rootClose={tooltipRootClose}\n          >\n            {button}\n          </TooltipWrapper>\n        )}\n        {this.state.isOpened\n          ? draggable\n            ? this.renderModal()\n            : this.renderOuter()\n          : null}\n      </div>\n    );\n  }\n}\n"
+    ]
+}

package/lib/renderers/Table/ItemActionsWrapper.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ITableStore } from '../../store/table';
+import { ClassNamesFn } from '../../theme';
+export interface ItemActionsProps {
+    classnames: ClassNamesFn;
+    children: JSX.Element;
+    store: ITableStore;
+}
+declare function ItemActionsWrapper(props: ItemActionsProps): JSX.Element;
+declare const _default: typeof ItemActionsWrapper;
+export default _default;

package/lib/renderers/Table/ItemActionsWrapper.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var mobx_react_1 = require("mobx-react");
+var react_1 = tslib_1.__importStar(require("react"));
+function ItemActionsWrapper(props) {
+    var _a;
+    var cx = props.classnames;
+    var children = props.children;
+    var store = props.store;
+    var divRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        var row = store.hoverRow;
+        if (!row) {
+            return;
+        }
+        var frame = (_a = divRef.current.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('table');
+        var dom = frame === null || frame === void 0 ? void 0 : frame.querySelector("tr[data-id=\"" + row.id + "\"]");
+        if (!dom) {
+            return;
+        }
+        var rect = dom.getBoundingClientRect();
+        var height = rect.height;
+        var top = rect.top - frame.getBoundingClientRect().top;
+        divRef.current.style.cssText += "top: " + top + "px;height: " + height + "px;";
+    }, [(_a = store.hoverRow) === null || _a === void 0 ? void 0 : _a.id]);
+    return (react_1.default.createElement("div", { className: cx('Table-itemActions-wrap'), ref: divRef }, children));
+}
+exports.default = (0, mobx_react_1.observer)(ItemActionsWrapper);
+//# sourceMappingURL=./renderers/Table/ItemActionsWrapper.js.map

package/lib/renderers/Table/ItemActionsWrapper.js.map

@@ -0,0 +1,13 @@
+{
+    "version": 3,
+    "file": "ItemActionsWrapper.js",
+    "sourceRoot": "",
+    "sources": [
+        "/src/renderers/Table/ItemActionsWrapper.tsx"
+    ],
+    "names": [],
+    "mappings": ";;;AAAA,yCAAoC;AACpC,0DAA+C;AAU/C,SAAS,kBAAkB,CAAC,KAAuB;;IACjD,IAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC;IAC5B,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;IAChC,IAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;IAC1B,IAAM,MAAM,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAE5C,IAAA,iBAAS,EAAC;;QACR,IAAM,GAAG,GAAG,KAAK,CAAC,QAAS,CAAC;QAC5B,IAAI,CAAC,GAAG,EAAE;YACR,OAAO;SACR;QAED,IAAM,KAAK,GAAG,MAAA,MAAM,CAAC,OAAQ,CAAC,aAAa,0CAAE,aAAa,CACxD,OAAO,CACO,CAAC;QACjB,IAAM,GAAG,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,CAAC,kBAAe,GAAG,CAAC,EAAE,QAAI,CAAgB,CAAC;QAC3E,IAAI,CAAC,GAAG,EAAE;YACR,OAAO;SACR;QACD,IAAM,IAAI,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;QACzC,IAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAM,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;QACzD,MAAM,CAAC,OAAQ,CAAC,KAAK,CAAC,OAAO,IAAI,UAAQ,GAAG,mBAAc,MAAM,QAAK,CAAC;IACxE,CAAC,EAAE,CAAC,MAAA,KAAK,CAAC,QAAQ,0CAAE,EAAE,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,uCAAK,SAAS,EAAE,EAAE,CAAC,wBAAwB,CAAC,EAAE,GAAG,EAAE,MAAM,IACtD,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,IAAA,qBAAQ,EAAC,kBAAkB,CAAC,CAAC",
+    "sourcesContent": [
+        "import {observer} from 'mobx-react';\nimport React, {useEffect, useRef} from 'react';\nimport {ITableStore} from '../../store/table';\nimport {ClassNamesFn} from '../../theme';\n\nexport interface ItemActionsProps {\n  classnames: ClassNamesFn;\n  children: JSX.Element;\n  store: ITableStore;\n}\n\nfunction ItemActionsWrapper(props: ItemActionsProps) {\n  const cx = props.classnames;\n  const children = props.children;\n  const store = props.store;\n  const divRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const row = store.hoverRow!;\n    if (!row) {\n      return;\n    }\n\n    const frame = divRef.current!.parentElement?.querySelector(\n      'table'\n    ) as HTMLElement;\n    const dom = frame?.querySelector(`tr[data-id=\"${row.id}\"]`) as HTMLElement;\n    if (!dom) {\n      return;\n    }\n    const rect = dom.getBoundingClientRect();\n    const height = rect.height;\n    const top = rect.top - frame.getBoundingClientRect().top;\n    divRef.current!.style.cssText += `top: ${top}px;height: ${height}px;`;\n  }, [store.hoverRow?.id]);\n\n  return (\n    <div className={cx('Table-itemActions-wrap')} ref={divRef}>\n      {children}\n    </div>\n  );\n}\n\nexport default observer(ItemActionsWrapper);\n"
+    ]
+}

package/lib/renderers/Table/TableBody.d.ts

@@ -41,6 +41,7 @@ export declare class TableBody extends React.Component<TableBodyProps> {
         checkdisable: boolean;
         isPrimary: boolean;
         searchable: any;
+        enableSearch: boolean;
         sortable: boolean;
         filterable: any;
         fixed: string;
@@ -53,6 +54,7 @@ export declare class TableBody extends React.Component<TableBodyProps> {
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
         toggleToggle(): void;
         setToggled(value: boolean): void;
+        setEnableSearch(value: boolean): void;
     } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
         label: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<any, any, any>, [undefined]>;
         type: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -65,6 +67,7 @@ export declare class TableBody extends React.Component<TableBodyProps> {
         checkdisable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         isPrimary: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         searchable: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IType<any, any, any>>;
+        enableSearch: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         sortable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         filterable: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<any, any, any>, [undefined]>;
         fixed: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -77,6 +80,7 @@ export declare class TableBody extends React.Component<TableBodyProps> {
     }, {
         toggleToggle(): void;
         setToggled(value: boolean): void;
+        setEnableSearch(value: boolean): void;
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>)[], rowProps?: any): any;
     renderSummaryRow(position: 'prefix' | 'affix', items?: Array<any>, rowIndex?: number): JSX.Element | null;
     renderSummary(position: 'prefix' | 'affix', items?: Array<any>): JSX.Element | (JSX.Element | null)[] | null;