@nokecy/qc-ui 0.0.1

package/README.md

@@ -0,0 +1,23 @@
+# @qiuchuang/qc-ui
+
+[![NPM version](https://img.shields.io/npm/v/@qiuchuang/qc-ui.svg?style=flat)](https://npmjs.org/package/@qiuchuang/qc-ui)
+[![NPM downloads](http://img.shields.io/npm/dm/@qiuchuang/qc-ui.svg?style=flat)](https://npmjs.org/package/@qiuchuang/qc-ui)
+
+## Install
+
+```bash
+$ yarn install
+```
+
+```bash
+$ npm run dev
+$ npm run build
+```
+
+## Options
+
+TODO
+
+## LICENSE
+
+MIT

package/dist/cjs/ag-grid-plus/ag-gridPlus.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import './global.scss';
+import { GridProps } from './interface';
+declare function AgGridPlus(props: GridProps): JSX.Element;
+export default AgGridPlus;

package/dist/cjs/ag-grid-plus/ag-gridPlus.js

@@ -0,0 +1,191 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _agGridReact = require("ag-grid-react");
+
+var _antd = require("antd");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _gridManager = _interopRequireDefault(require("./gridManager"));
+
+require("./global.scss");
+
+var _ahooks = require("ahooks");
+
+var _queryForm = _interopRequireDefault(require("./queryForm"));
+
+var _excluded = ["style", "params", "request", "dataSource", "headerTitle", "toolBarRender", "search", "onGridReady"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function AgGridPlus(props) {
+  var style = props.style,
+      gridParams = props.params,
+      request = props.request,
+      dataSource = props.dataSource,
+      headerTitle = props.headerTitle,
+      toolBarRender = props.toolBarRender,
+      search = props.search,
+      onReady = props.onGridReady,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var apiRef = (0, _react.useRef)();
+  var columnsRef = (0, _react.useRef)();
+  var gridManager = new _gridManager.default();
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      ready = _useState2[0],
+      setReady = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = _slicedToArray(_useState3, 2),
+      columnDefs = _useState4[0],
+      setColumnDefs = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      rowData = _useState6[0],
+      setRowData = _useState6[1];
+
+  var _useState7 = (0, _react.useState)([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      queryFilter = _useState8[0],
+      setQueryFilter = _useState8[1];
+
+  var _useState9 = (0, _react.useState)({
+    pageSize: 200,
+    current: 1,
+    total: dataSource ? dataSource.length : 0
+  }),
+      _useState10 = _slicedToArray(_useState9, 2),
+      pagination = _useState10[0],
+      setPagination = _useState10[1];
+
+  (0, _ahooks.useUpdateLayoutEffect)(function () {
+    if (gridParams && request) {
+      onRequest();
+    }
+  }, [JSON.stringify(gridParams), queryFilter, pagination.pageSize, pagination.current]);
+  var onGridReady = (0, _react.useCallback)(function (params) {
+    apiRef.current = params.api;
+    columnsRef.current = params.columnApi;
+    gridManager.agGridApi = params.api;
+    gridManager.agGridColumnApi = params.columnApi; // gridManager.rowkey = rowkey;
+
+    onReady && onReady(params); ///@ts-ignore
+
+    dataSource && setRowData(dataSource);
+    setColumnDefs(columnsRef.current.getColumns());
+    setReady(true);
+  }, [dataSource]);
+  var onRequest = (0, _react.useCallback)(function () {
+    var filterModel = queryFilter; // apiRef.current.sort
+
+    var params = _objectSpread(_objectSpread({
+      filter: filterModel
+    }, gridParams), {}, {
+      skipCount: pagination.current == 1 ? 0 : pagination.current * pagination.pageSize,
+      maxResultCount: pagination.pageSize,
+      sorter: "sorter"
+    });
+
+    request && request(params, undefined, filterModel).then(function (response) {
+      var rowData = response.data;
+      var rowCount = response.total;
+      setRowData(rowData);
+      setPagination(_objectSpread(_objectSpread({}, pagination), {}, {
+        total: rowCount
+      }));
+    });
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_antd.Spin, {
+    spinning: !ready
+  }, search == false ? null : /*#__PURE__*/_react.default.createElement(_queryForm.default, {
+    columns: columnDefs,
+    gridApi: apiRef.current,
+    onQuery: function onQuery(formValues) {
+      setQueryFilter(formValues);
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: _objectSpread({
+      display: "flex",
+      flexDirection: "column",
+      height: "100%"
+    }, style)
+  }, /*#__PURE__*/_react.default.createElement(_agGridReact.AgGridReact, _extends({
+    className: "ag-theme-alpine"
+  }, rest, {
+    //指定客户端模式
+    rowModelType: "clientSide",
+    rowData: rowData,
+    onGridReady: onGridReady //停用默认分页组件
+    ,
+    suppressPaginationPanel: true
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Pagination, {
+    pageSize: pagination.pageSize,
+    current: pagination.current,
+    total: pagination.total,
+    onChange: function onChange(page, pageSize) {
+      setPagination(_objectSpread(_objectSpread({}, pagination), {}, {
+        pageSize: pageSize,
+        current: page
+      }));
+    },
+    onShowSizeChange: function onShowSizeChange(current, size) {
+      setPagination(_objectSpread(_objectSpread({}, pagination), {}, {
+        pageSize: size,
+        current: current
+      }));
+    },
+    size: "small",
+    showTotal: function showTotal(total, range) {
+      return "".concat(range[0], "-").concat(range[1], " of ").concat(total, " items");
+    },
+    pageSizeOptions: [10, 100, 200, 500, 1000],
+    hideOnSinglePage: true,
+    showQuickJumper: true
+  })));
+}
+
+var _default = AgGridPlus;
+exports.default = _default;

package/dist/cjs/ag-grid-plus/global.scss

@@ -0,0 +1,65 @@
+/* Add application styles & imports to this file! */
+
+@import "~ag-grid-community/src/styles/ag-grid.scss";
+@import "~ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";
+
+
+.ag-theme-alpine {
+    @include ag-theme-alpine(( // use theme parameters where possible
+            // Default border for cells. This can be used to specify the border-style and border-color properties e.g. `dashed red` but the border-width is fixed at 1px.
+            grid-size: 4px,
+            odd-row-background-color:#fff,
+            secondary-border-color:#f0f0f0,
+            cell-horizontal-padding: ag-derived(grid-size, $times: 2),
+            border-color:#f0f0f5,
+            cell-horizontal-border: 1px solid ag-derived(secondary-border-color),
+            font-size: 12px,
+            font-family: ('microsoft yahei', 'Helvetica', 'Arial'),
+        ));
+
+    .ag-header-cell {
+        // or write CSS selectors to make customisations beyond what the parameters support
+        border-right: 1px solid ag-param(secondary-border-color);
+    }
+
+    .ag-header-group-cell-with-group {
+        // or write CSS selectors to make customisations beyond what the parameters support
+        border-right: 1px solid ag-param(secondary-border-color);
+    }
+
+    .ag-header-center .ag-header-group-cell-label,
+    .ag-header-center .ag-header-cell-label {
+        text-align: center;
+        display: grid;
+    }
+}
+
+.ag-drak-theme-alpine {
+    @include ag-theme-alpine(( // use theme parameters where possible
+            // Default border for cells. This can be used to specify the border-style and border-color properties e.g. `dashed red` but the border-width is fixed at 1px.
+            grid-size: 4px,
+            odd-row-background-color:#fff,
+            secondary-border-color:#000,
+            cell-horizontal-padding: ag-derived(grid-size, $times: 2),
+            border-color:#000,
+            cell-horizontal-border: 1px solid ag-derived(secondary-border-color),
+            font-size: 11px,
+            font-family: ('microsoft yahei', 'Helvetica', 'Arial'),
+        ));
+
+    .ag-header-cell {
+        // or write CSS selectors to make customisations beyond what the parameters support
+        border-right: 1px solid ag-param(secondary-border-color);
+    }
+
+    .ag-header-group-cell-with-group {
+        // or write CSS selectors to make customisations beyond what the parameters support
+        border-right: 1px solid ag-param(secondary-border-color);
+    }
+
+    .ag-header-center .ag-header-group-cell-label,
+    .ag-header-center .ag-header-cell-label {
+        text-align: center;
+        display: grid;
+    }
+}

package/dist/cjs/ag-grid-plus/gridManager/index.d.ts

@@ -0,0 +1,8 @@
+import { ColumnApi, GridApi } from "ag-grid-community";
+export default class GridManage {
+    agGridApi: GridApi | undefined;
+    agGridColumnApi: ColumnApi | undefined;
+    rowkey: string | undefined;
+    columnsDefs: any[] | undefined;
+    dataSourceChanged(dataSource?: any[]): void;
+}

package/dist/cjs/ag-grid-plus/gridManager/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var GridManage = /*#__PURE__*/function () {
+  function GridManage() {
+    _classCallCheck(this, GridManage);
+
+    _defineProperty(this, "agGridApi", void 0);
+
+    _defineProperty(this, "agGridColumnApi", void 0);
+
+    _defineProperty(this, "rowkey", void 0);
+
+    _defineProperty(this, "columnsDefs", void 0);
+  }
+
+  _createClass(GridManage, [{
+    key: "dataSourceChanged",
+    value: function dataSourceChanged() {// if (!Array.isArray(dataSource) || !this.agGridApi) return;
+      // const gridDataSource: any[] = [];
+      // this.agGridApi.forEachNode(node => {
+      //     if (node.data) gridDataSource.push(node.data);
+      // });
+      // if (isEqual(dataSource, gridDataSource) || isEqual(dataSource, this.agGridConfig.dataSource))
+      //     return this.agGridApi.setRowData(dataSource);
+      // this.reset({
+      //     dataSource: dataSource,
+      // });
+      // this.agGridApi.setRowData([]);
+      // this.agGridApi.setRowData(dataSource);
+
+      var dataSource = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    }
+  }]);
+
+  return GridManage;
+}();
+
+exports.default = GridManage;

package/dist/cjs/ag-grid-plus/index.d.ts

@@ -0,0 +1,3 @@
+import AgGridPlus from "./ag-gridPlus";
+import { AgGridColumn } from "./interface";
+export { AgGridPlus, AgGridColumn };

package/dist/cjs/ag-grid-plus/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AgGridColumn", {
+  enumerable: true,
+  get: function get() {
+    return _interface.AgGridColumn;
+  }
+});
+Object.defineProperty(exports, "AgGridPlus", {
+  enumerable: true,
+  get: function get() {
+    return _agGridPlus.default;
+  }
+});
+
+var _agGridPlus = _interopRequireDefault(require("./ag-gridPlus"));
+
+var _interface = require("./interface");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/ag-grid-plus/interface.d.ts

@@ -0,0 +1,25 @@
+import { GridApi } from 'ag-grid-community';
+import { AgGridReactProps, AgGridColumnProps, AgGridColumnGroupProps } from 'ag-grid-react';
+import React, { CSSProperties, ReactNode } from 'react';
+interface GridProps extends AgGridReactProps {
+    hideRedo?: boolean;
+    style?: CSSProperties;
+    params?: any;
+    initParams?: any;
+    request?: (params: any, sort: any, filter: any) => Promise<any>;
+    dataSource?: any[];
+    search?: boolean;
+    headerTitle?: React.ReactNode;
+    toolBarRender?: (gridApi?: GridApi) => React.ReactNode[];
+    columnDefs?: any;
+}
+interface AgGridColumnPropsClone extends AgGridColumnProps {
+    hideInTable?: boolean;
+    hideInSearch?: boolean;
+    queryField?: string;
+    searchComponent?: ReactNode;
+    searchComponentProps?: any;
+    searchSort?: number;
+}
+declare function AgGridColumn(props: AgGridColumnPropsClone | AgGridColumnGroupProps): JSX.Element;
+export { GridProps, AgGridColumn };

package/dist/cjs/ag-grid-plus/interface.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AgGridColumn = AgGridColumn;
+
+var _agGridReact = require("ag-grid-react");
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function AgGridColumn(props) {
+  ///@ts-ignore
+  return /*#__PURE__*/_react.default.createElement(_agGridReact.AgGridColumn, props);
+}

package/dist/cjs/ag-grid-plus/queryForm/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { GridApi } from 'ag-grid-community';
+import './index.less';
+declare const FormRender: (props: {
+    className?: any;
+    gridApi?: GridApi<any> | undefined;
+    columns: any[];
+    onQuery: (formValue: any) => void;
+}) => JSX.Element;
+export default FormRender;