ls-pro-common 1.0.78 → 1.0.80

package/es/components/DescritionCard.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ProCardProps } from 'ls-pro-card';
+import type { ProDescriptionsProps } from 'ls-pro-descriptions';
+import './common.less';
+export declare type DescritionCardProps = ProCardProps & {
+    hasBackground?: boolean;
+    desc?: ProDescriptionsProps;
+};
+declare function DescritionCard(props: DescritionCardProps): JSX.Element;
+export default DescritionCard;

package/es/components/DescritionCard.js

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["title", "extra", "className", "collapsible", "defaultCollapsed", "desc", "hasBackground"];
+import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { DownOutlined } from '@ant-design/icons';
+import ProCard from 'ls-pro-card';
+import ProDescriptions from 'ls-pro-descriptions';
+import './common.less';
+
+function DescritionCard(props) {
+  var title = props.title,
+      extra = props.extra,
+      className = props.className,
+      _props$collapsible = props.collapsible,
+      collapsible = _props$collapsible === void 0 ? true : _props$collapsible,
+      _props$defaultCollaps = props.defaultCollapsed,
+      defaultCollapsed = _props$defaultCollaps === void 0 ? false : _props$defaultCollaps,
+      desc = props.desc,
+      hasBackground = props.hasBackground,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var _useState = useState(defaultCollapsed),
+      _useState2 = _slicedToArray(_useState, 2),
+      collapsed = _useState2[0],
+      setCollapsed = _useState2[1];
+
+  var titleLayout = useMemo(function () {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/React.createElement("div", {
+        className: 'ls-word-title-component'
+      }, /*#__PURE__*/React.createElement("span", null, title));
+    } else {
+      return title;
+    }
+  }, [title]);
+  var collapsedDom = useMemo(function () {
+    if (!collapsible) return null;
+    return /*#__PURE__*/React.createElement(DownOutlined, {
+      rotate: !!collapsed ? 180 : undefined,
+      style: {
+        margin: 'auto',
+        fontSize: '16px',
+        color: 'var(--ant-primary-color, #4997e6)'
+      },
+      onClick: function onClick() {
+        setCollapsed(!collapsed);
+      }
+    });
+  }, [collapsed, collapsible]);
+  var extraDom = useMemo(function () {
+    if (extra && collapsedDom) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, extra, collapsedDom);
+    } else if (extra) {
+      return extra;
+    } else if (collapsedDom) {
+      return collapsedDom;
+    }
+
+    return null;
+  }, [extra, collapsedDom]);
+  return desc ? /*#__PURE__*/React.createElement(ProCard, _extends({
+    className: classNames('description-card', {
+      'has-background': hasBackground
+    }, className),
+    title: titleLayout,
+    extra: extraDom,
+    collapsed: collapsed
+  }, rest), /*#__PURE__*/React.createElement(ProDescriptions, desc)) : /*#__PURE__*/React.createElement(ProCard, _extends({
+    className: classNames('description-card', {
+      'has-background': hasBackground
+    }, className),
+    title: titleLayout,
+    extra: extraDom,
+    collapsed: collapsed
+  }, rest));
+}
+
+export default DescritionCard;

package/es/components/Loading.d.ts

@@ -1,3 +1,7 @@
+/// <reference types="react" />
 import './common.less';
-declare const _default: () => JSX.Element;
+declare type LoadingType = {
+    Text?: string | JSX.Element;
+};
+declare const _default: (props: LoadingType) => JSX.Element;
 export default _default;

package/es/components/Loading.js

@@ -2,8 +2,9 @@ import "antd/es/spin/style";
 import _Spin from "antd/es/spin";
 import React from 'react';
 import './common.less';
-export default (function () {
+export default (function (props) {
+  var text = props.Text || '加载中...';
   return /*#__PURE__*/React.createElement("div", {
     className: "loading"
-  }, /*#__PURE__*/React.createElement(_Spin, null), "\u52A0\u8F7D\u4E2D... ");
+  }, /*#__PURE__*/React.createElement(_Spin, null), text);
 });

package/es/components/common.less

@@ -101,7 +101,7 @@ body {
   .dtl-header {
     display      : flex;
     justify-items: center;
-    padding      : 5px 14px;
+    padding      : 8px 14px;
     border-bottom: 1px solid #f0f0f0;
 
     .dtl-back {
@@ -288,8 +288,8 @@ a:hover {
         max-height: 150px;
       }
     }
-  }
-
+  }  
+  
 
 
   .img-choose {
@@ -307,8 +307,25 @@ a:hover {
   }
 }
 
-.ant-input-has-value:hover{
-   .ant-input-clear-icon{
+
+.description-card{
+  .ant-pro-card-body{
+    padding:20px 24px;
+  }
+}
+
+.has-background {
+  background: #f5fafe;
+
+  .ant-descriptions-row>td,
+  .ant-descriptions-row>th {
+    padding-bottom: 10px
+  }
+}
+
+
+.ant-input-has-value:hover {
+  .ant-input-clear-icon {
     visibility: visible;
-   }
+  }
 }

package/es/index.d.ts

@@ -6,6 +6,7 @@ import IconSelector from './components/IconSelector';
 import ImageSelector from './components/ImageSelector';
 import InputMultiLine from './components/InputMultiLine';
 import AreaCascader from './components/AreaCascader';
+import DescritionCard from './components/DescritionCard';
 import BaseService from './service/BaseService';
 import request, { httpGet, httpPut, httpPost, httpDelete, getDict, fetchOptions } from './http';
 import * as utils from './utils';
@@ -16,5 +17,6 @@ import usePermission from './hooks/usePermission';
 /** Type */
 import type { ApiResponse, TableToolbar, BaseApiType, MethodType } from './typing';
 import type { DtlLyaoutProps } from './components/DtlLayout';
-export type { ApiResponse, TableToolbar, BaseApiType, MethodType, DtlLyaoutProps };
-export { DtlLayout, InputTable, Page404, Loading, IconSelector, ImageSelector, InputMultiLine, AreaCascader, BaseService, request, httpDelete, httpGet, httpPost, httpPut, getDict, fetchOptions, utils, useSingle, useDtl, usePermission };
+import type { DescritionCardProps } from './components/DescritionCard';
+export type { ApiResponse, TableToolbar, BaseApiType, MethodType, DtlLyaoutProps, DescritionCardProps };
+export { DtlLayout, InputTable, Page404, Loading, IconSelector, ImageSelector, InputMultiLine, AreaCascader, DescritionCard, BaseService, request, httpDelete, httpGet, httpPost, httpPut, getDict, fetchOptions, utils, useSingle, useDtl, usePermission };

package/es/index.js

@@ -6,6 +6,7 @@ import IconSelector from './components/IconSelector';
 import ImageSelector from './components/ImageSelector';
 import InputMultiLine from './components/InputMultiLine';
 import AreaCascader from './components/AreaCascader';
+import DescritionCard from './components/DescritionCard';
 import BaseService from './service/BaseService';
 import request, { httpGet, httpPut, httpPost, httpDelete, getDict, fetchOptions } from './http';
 import * as utils from './utils';
@@ -14,4 +15,4 @@ import * as utils from './utils';
 import useSingle from './hooks/useSingle';
 import useDtl from './hooks/useDtl';
 import usePermission from './hooks/usePermission';
-export { DtlLayout, InputTable, Page404, Loading, IconSelector, ImageSelector, InputMultiLine, AreaCascader, BaseService, request, httpDelete, httpGet, httpPost, httpPut, getDict, fetchOptions, utils, useSingle, useDtl, usePermission };
+export { DtlLayout, InputTable, Page404, Loading, IconSelector, ImageSelector, InputMultiLine, AreaCascader, DescritionCard, BaseService, request, httpDelete, httpGet, httpPost, httpPut, getDict, fetchOptions, utils, useSingle, useDtl, usePermission };

package/lib/components/DescritionCard.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { ProCardProps } from 'ls-pro-card';
+import type { ProDescriptionsProps } from 'ls-pro-descriptions';
+import './common.less';
+export declare type DescritionCardProps = ProCardProps & {
+    hasBackground?: boolean;
+    desc?: ProDescriptionsProps;
+};
+declare function DescritionCard(props: DescritionCardProps): JSX.Element;
+export default DescritionCard;

package/lib/components/DescritionCard.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _icons = require("@ant-design/icons");
+
+var _lsProCard = _interopRequireDefault(require("ls-pro-card"));
+
+var _lsProDescriptions = _interopRequireDefault(require("ls-pro-descriptions"));
+
+require("./common.less");
+
+var _excluded = ["title", "extra", "className", "collapsible", "defaultCollapsed", "desc", "hasBackground"];
+
+function DescritionCard(props) {
+  var title = props.title,
+      extra = props.extra,
+      className = props.className,
+      _props$collapsible = props.collapsible,
+      collapsible = _props$collapsible === void 0 ? true : _props$collapsible,
+      _props$defaultCollaps = props.defaultCollapsed,
+      defaultCollapsed = _props$defaultCollaps === void 0 ? false : _props$defaultCollaps,
+      desc = props.desc,
+      hasBackground = props.hasBackground,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  var _useState = (0, _react.useState)(defaultCollapsed),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      collapsed = _useState2[0],
+      setCollapsed = _useState2[1];
+
+  var titleLayout = (0, _react.useMemo)(function () {
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: 'ls-word-title-component'
+      }, /*#__PURE__*/_react.default.createElement("span", null, title));
+    } else {
+      return title;
+    }
+  }, [title]);
+  var collapsedDom = (0, _react.useMemo)(function () {
+    if (!collapsible) return null;
+    return /*#__PURE__*/_react.default.createElement(_icons.DownOutlined, {
+      rotate: !!collapsed ? 180 : undefined,
+      style: {
+        margin: 'auto',
+        fontSize: '16px',
+        color: 'var(--ant-primary-color, #4997e6)'
+      },
+      onClick: function onClick() {
+        setCollapsed(!collapsed);
+      }
+    });
+  }, [collapsed, collapsible]);
+  var extraDom = (0, _react.useMemo)(function () {
+    if (extra && collapsedDom) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, extra, collapsedDom);
+    } else if (extra) {
+      return extra;
+    } else if (collapsedDom) {
+      return collapsedDom;
+    }
+
+    return null;
+  }, [extra, collapsedDom]);
+  return desc ? /*#__PURE__*/_react.default.createElement(_lsProCard.default, (0, _extends2.default)({
+    className: (0, _classnames.default)('description-card', {
+      'has-background': hasBackground
+    }, className),
+    title: titleLayout,
+    extra: extraDom,
+    collapsed: collapsed
+  }, rest), /*#__PURE__*/_react.default.createElement(_lsProDescriptions.default, desc)) : /*#__PURE__*/_react.default.createElement(_lsProCard.default, (0, _extends2.default)({
+    className: (0, _classnames.default)('description-card', {
+      'has-background': hasBackground
+    }, className),
+    title: titleLayout,
+    extra: extraDom,
+    collapsed: collapsed
+  }, rest));
+}
+
+var _default = DescritionCard;
+exports.default = _default;

package/lib/components/Loading.d.ts

@@ -1,3 +1,7 @@
+/// <reference types="react" />
 import './common.less';
-declare const _default: () => JSX.Element;
+declare type LoadingType = {
+    Text?: string | JSX.Element;
+};
+declare const _default: (props: LoadingType) => JSX.Element;
 export default _default;

package/lib/components/Loading.js

@@ -15,10 +15,11 @@ var _react = _interopRequireDefault(require("react"));
 
 require("./common.less");
 
-var _default = function _default() {
+var _default = function _default(props) {
+  var text = props.Text || '加载中...';
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "loading"
-  }, /*#__PURE__*/_react.default.createElement(_spin.default, null), "\u52A0\u8F7D\u4E2D... ");
+  }, /*#__PURE__*/_react.default.createElement(_spin.default, null), text);
 };
 
 exports.default = _default;

package/lib/components/common.less

@@ -101,7 +101,7 @@ body {
   .dtl-header {
     display      : flex;
     justify-items: center;
-    padding      : 5px 14px;
+    padding      : 8px 14px;
     border-bottom: 1px solid #f0f0f0;
 
     .dtl-back {
@@ -288,8 +288,8 @@ a:hover {
         max-height: 150px;
       }
     }
-  }
-
+  }  
+  
 
 
   .img-choose {
@@ -307,8 +307,25 @@ a:hover {
   }
 }
 
-.ant-input-has-value:hover{
-   .ant-input-clear-icon{
+
+.description-card{
+  .ant-pro-card-body{
+    padding:20px 24px;
+  }
+}
+
+.has-background {
+  background: #f5fafe;
+
+  .ant-descriptions-row>td,
+  .ant-descriptions-row>th {
+    padding-bottom: 10px
+  }
+}
+
+
+.ant-input-has-value:hover {
+  .ant-input-clear-icon {
     visibility: visible;
-   }
+  }
 }

package/lib/index.d.ts

@@ -6,6 +6,7 @@ import IconSelector from './components/IconSelector';
 import ImageSelector from './components/ImageSelector';
 import InputMultiLine from './components/InputMultiLine';
 import AreaCascader from './components/AreaCascader';
+import DescritionCard from './components/DescritionCard';
 import BaseService from './service/BaseService';
 import request, { httpGet, httpPut, httpPost, httpDelete, getDict, fetchOptions } from './http';
 import * as utils from './utils';
@@ -16,5 +17,6 @@ import usePermission from './hooks/usePermission';
 /** Type */
 import type { ApiResponse, TableToolbar, BaseApiType, MethodType } from './typing';
 import type { DtlLyaoutProps } from './components/DtlLayout';
-export type { ApiResponse, TableToolbar, BaseApiType, MethodType, DtlLyaoutProps };
-export { DtlLayout, InputTable, Page404, Loading, IconSelector, ImageSelector, InputMultiLine, AreaCascader, BaseService, request, httpDelete, httpGet, httpPost, httpPut, getDict, fetchOptions, utils, useSingle, useDtl, usePermission };
+import type { DescritionCardProps } from './components/DescritionCard';
+export type { ApiResponse, TableToolbar, BaseApiType, MethodType, DtlLyaoutProps, DescritionCardProps };
+export { DtlLayout, InputTable, Page404, Loading, IconSelector, ImageSelector, InputMultiLine, AreaCascader, DescritionCard, BaseService, request, httpDelete, httpGet, httpPost, httpPut, getDict, fetchOptions, utils, useSingle, useDtl, usePermission };

package/lib/index.js

@@ -19,6 +19,12 @@ Object.defineProperty(exports, "BaseService", {
     return _BaseService.default;
   }
 });
+Object.defineProperty(exports, "DescritionCard", {
+  enumerable: true,
+  get: function get() {
+    return _DescritionCard.default;
+  }
+});
 Object.defineProperty(exports, "DtlLayout", {
   enumerable: true,
   get: function get() {
@@ -139,6 +145,8 @@ var _InputMultiLine = _interopRequireDefault(require("./components/InputMultiLin
 
 var _AreaCascader = _interopRequireDefault(require("./components/AreaCascader"));
 
+var _DescritionCard = _interopRequireDefault(require("./components/DescritionCard"));
+
 var _BaseService = _interopRequireDefault(require("./service/BaseService"));
 
 var _http = _interopRequireWildcard(require("./http"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ls-pro-common",
-  "version": "1.0.78",
+  "version": "1.0.80",
   "description": "ls-pro-common",
   "keywords": [
     "antd",  
@@ -27,7 +27,7 @@
   ],
   "dependencies": {
     "@ant-design/icons": "^4.3.0",
-    "ls-pro-table": "2.62.58",
+    "ls-pro-table": "2.62.60",
     "ls-pro-form": "1.52.34",
     "@babel/runtime": "^7.16.3",
     "classnames": "^2.2.6",