@aloudata/aloudata-design 2.7.1 → 2.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,6 +8,7 @@
8
8
  &-dangerous,
9
9
  &-secondary,
10
10
  &-text,
11
+ &-inverse,
11
12
  &-link {
12
13
  display: inline-flex;
13
14
  align-items: center;
@@ -18,6 +18,7 @@ export interface ModalProps extends Omit<AntdModalProps, 'okButtonProps' | 'canc
18
18
  cancelButtonProps?: IButtonProps;
19
19
  okButtonProps?: IButtonProps;
20
20
  okType?: ButtonType;
21
+ responsiveBounds?: boolean;
21
22
  }
22
23
  export interface ModalFuncProps extends Omit<AntdModalFuncProps, 'okButtonProps' | 'cancelButtonProps' | 'okType' | 'icon'> {
23
24
  cancelButtonProps?: IButtonProps;
@@ -1,6 +1,6 @@
1
1
  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); }
2
2
  var _excluded = ["className", "type", "loading", "size", "disabled", "shape"],
3
- _excluded2 = ["className", "children", "okType", "width", "closeIcon", "subTitle", "okButtonProps", "cancelButtonProps", "okText", "cancelText", "icon", "title", "paddingLess", "hideHeaderBottomBorder", "virtualScrollBar"],
3
+ _excluded2 = ["className", "children", "okType", "width", "closeIcon", "subTitle", "okButtonProps", "cancelButtonProps", "okText", "cancelText", "icon", "title", "paddingLess", "responsiveBounds", "hideHeaderBottomBorder", "virtualScrollBar", "style"],
4
4
  _excluded3 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
5
5
  _excluded4 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
6
6
  _excluded5 = ["okButtonProps", "cancelButtonProps", "okType", "width", "title", "subTitle", "okText", "cancelText", "className"],
@@ -18,7 +18,7 @@ import { Modal as AntdModal } from 'antd';
18
18
  import { modalGlobalConfig } from 'antd/lib/modal/confirm';
19
19
  import useModal from 'antd/lib/modal/useModal/index';
20
20
  import classNames from 'classnames';
21
- import React from 'react';
21
+ import React, { useMemo } from 'react';
22
22
  import { btnPrefix, getButtonSizeClass, getButtonType, getDangerStatus, getShape } from "../Button";
23
23
  import { AttentionTriangleLightLine, CheckCircleLightLine, CloseLLine, InformationCircleLightLine } from "../Icon";
24
24
  import IconButton from "../IconButton";
@@ -106,10 +106,36 @@ var OriginModal = function OriginModal(props) {
106
106
  icon = props.icon,
107
107
  title = props.title,
108
108
  paddingLess = props.paddingLess,
109
+ responsiveBounds = props.responsiveBounds,
109
110
  hideHeaderBottomBorder = props.hideHeaderBottomBorder,
110
111
  virtualScrollBar = props.virtualScrollBar,
112
+ style = props.style,
111
113
  restProps = _objectWithoutProperties(props, _excluded2);
114
+ var responsiveBoundsStyle = useMemo(function () {
115
+ if (!responsiveBounds) {
116
+ return {};
117
+ }
118
+ var defaultBounds = {
119
+ minWidth: 1280,
120
+ maxWidth: 1680,
121
+ marginX: 80,
122
+ marginY: 24,
123
+ minHeight: 640,
124
+ maxHeight: 900
125
+ };
126
+ return {
127
+ width: "calc(100% - ".concat(defaultBounds.marginX * 2, "px)"),
128
+ maxWidth: "".concat(defaultBounds.maxWidth, "px"),
129
+ minWidth: "".concat(defaultBounds.minWidth, "px"),
130
+ height: "calc(100% - ".concat(defaultBounds.marginY * 2, "px)"),
131
+ maxHeight: "".concat(defaultBounds.maxHeight, "px"),
132
+ minHeight: "".concat(defaultBounds.minHeight, "px"),
133
+ padding: 0
134
+ };
135
+ }, [responsiveBounds]);
112
136
  return /*#__PURE__*/React.createElement(AntdModal, _extends({}, restProps, {
137
+ style: _objectSpread(_objectSpread({}, style), responsiveBoundsStyle),
138
+ width: responsiveBounds ? responsiveBoundsStyle.width : width || DEFAULT_WIDTH,
113
139
  title: ModalTitle({
114
140
  icon: icon,
115
141
  title: title,
@@ -118,13 +144,16 @@ var OriginModal = function OriginModal(props) {
118
144
  className: classNames('ald-modal', className, {
119
145
  'ald-modal-padding-less': paddingLess,
120
146
  'ald-modal-virtual-scroll-bar': virtualScrollBar,
121
- 'ald-modal-show-header-bottom-border': hideHeaderBottomBorder
147
+ 'ald-modal-show-header-bottom-border': hideHeaderBottomBorder,
148
+ 'ald-modal-responsive-bounds': responsiveBounds
122
149
  }),
123
150
  okButtonProps: getButtonProps(okButtonProps, 'primary', okType),
151
+ wrapClassName: classNames(props.wrapClassName, {
152
+ 'ald-modal-responsive-bounds-wrap': responsiveBounds
153
+ }),
124
154
  cancelButtonProps: getButtonProps(cancelButtonProps, 'secondary'),
125
155
  okText: okText,
126
156
  cancelText: cancelText,
127
- width: width || DEFAULT_WIDTH,
128
157
  closeIcon: closeIcon || /*#__PURE__*/React.createElement(IconButton, {
129
158
  icon: /*#__PURE__*/React.createElement(CloseLLine, {
130
159
  size: 20
@@ -134,3 +134,28 @@
134
134
  }
135
135
  }
136
136
  }
137
+
138
+ .ald-modal-responsive-bounds-wrap {
139
+ display: flex;
140
+ align-items: center;
141
+ @media screen and (max-height: 640px) {
142
+ align-items: flex-start;
143
+ }
144
+
145
+ .ald-modal-responsive-bounds {
146
+ top: unset;
147
+
148
+ .ant-modal-content {
149
+ display: flex;
150
+ flex-direction: column;
151
+ justify-content: space-between;
152
+ height: 100%;
153
+
154
+ .ant-modal-body {
155
+ flex-grow: 1;
156
+ min-height: none;
157
+ max-height: none;
158
+ }
159
+ }
160
+ }
161
+ }
@@ -5,30 +5,32 @@
5
5
  overflow: visible;
6
6
  }
7
7
 
8
- .ant-popover[class] .ant-popover-arrow::before {
9
- content: '';
10
- width: 10px;
11
- display: inline-block;
12
- bottom: -6px;
13
- position: absolute;
14
- left: 4px;
15
- height: 10px;
16
- border: 1px solid #d1d5db;
17
- transform: rotate(45deg);
18
- clip-path: none;
19
- }
8
+ .ald-pop-confirm {
9
+ &.ant-popover[class] .ant-popover-arrow::before {
10
+ content: '';
11
+ width: 10px;
12
+ display: inline-block;
13
+ bottom: -6px;
14
+ position: absolute;
15
+ left: 4px;
16
+ height: 10px;
17
+ border: 1px solid #d1d5db;
18
+ transform: rotate(45deg);
19
+ clip-path: none;
20
+ }
20
21
 
21
- .ant-popover[class] .ant-popover-arrow::after {
22
- content: '';
23
- width: 15px;
24
- background-color: #fff;
25
- display: inline-block;
26
- bottom: -11px;
27
- position: absolute;
28
- left: 1px;
29
- height: 10px;
30
- transform: none;
31
- box-shadow: none !important;
22
+ &.ant-popover[class] .ant-popover-arrow::after {
23
+ content: '';
24
+ width: 15px;
25
+ background-color: #fff;
26
+ display: inline-block;
27
+ bottom: -11px;
28
+ position: absolute;
29
+ left: 1px;
30
+ height: 10px;
31
+ transform: none;
32
+ box-shadow: none !important;
33
+ }
32
34
  }
33
35
 
34
36
  .ald-pop-confirm.ant-popover.ant-popover .ant-popover-inner {
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
1
  import { PopoverProps } from 'antd';
2
+ import React from 'react';
3
3
  export type { PopoverProps };
4
4
  declare function Popover(props: PopoverProps): React.JSX.Element;
5
5
  export default Popover;
@@ -1,16 +1,19 @@
1
- var _excluded = ["overlayClassName", "children"];
1
+ var _excluded = ["overlayClassName", "children", "arrow"];
2
2
  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); }
3
3
  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; }
4
4
  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; }
5
- import React from 'react';
6
5
  import { Popover as AntdPopover } from 'antd';
7
6
  import classnames from 'classnames';
7
+ import React from 'react';
8
8
  function Popover(props) {
9
9
  var overlayClassName = props.overlayClassName,
10
10
  children = props.children,
11
+ _props$arrow = props.arrow,
12
+ arrow = _props$arrow === void 0 ? false : _props$arrow,
11
13
  restProps = _objectWithoutProperties(props, _excluded);
12
14
  return /*#__PURE__*/React.createElement(AntdPopover, _extends({
13
- overlayClassName: classnames('ald-popover', overlayClassName)
15
+ overlayClassName: classnames('ald-popover', overlayClassName),
16
+ arrow: arrow
14
17
  }, restProps), children);
15
18
  }
16
19
  export default Popover;
@@ -1,5 +1,45 @@
1
1
  @import '../../style/index.less';
2
2
 
3
+ .ald-popover {
4
+ border-radius: var(--alias-radius-75, 6px) !important;
5
+ border: 1px solid var(--alias-colors-border-strong, #d1d5db) !important;
6
+ background: var(--alias-colors-bg-skeleton-subtler, #fff) !important;
7
+
8
+ /* shadow/shadow-sm */
9
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
10
+
11
+ .ant-popover-inner {
12
+ border-radius: var(--alias-radius-75, 6px) !important;
13
+ }
14
+
15
+ &.ant-popover[class] .ant-popover-arrow::before {
16
+ content: '';
17
+ width: 10px;
18
+ display: inline-block;
19
+ bottom: -5px;
20
+ position: absolute;
21
+ left: 4px;
22
+ height: 10px;
23
+ border: 1px solid var(--alias-colors-border-strong, #d1d5db);
24
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
25
+ transform: rotate(45deg);
26
+ clip-path: none;
27
+ }
28
+
29
+ &.ant-popover[class] .ant-popover-arrow::after {
30
+ content: '';
31
+ width: 15px;
32
+ background-color: #fff;
33
+ display: inline-block;
34
+ bottom: -10px;
35
+ position: absolute;
36
+ left: 1px;
37
+ height: 10px;
38
+ transform: none;
39
+ box-shadow: none !important;
40
+ }
41
+ }
42
+
3
43
  // .ald-popover.ald-popover {
4
44
  // .ant-popover-title {
5
45
  // min-width: 312px;
@@ -230,7 +230,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
230
230
  return listHeight;
231
231
  }
232
232
  }
233
- return 0;
233
+ return 256;
234
234
  };
235
235
  var multipleRender = function multipleRender() {
236
236
  return /*#__PURE__*/React.createElement("div", {
@@ -15,8 +15,10 @@ function User(_ref) {
15
15
  size = _ref$size === void 0 ? 'middle' : _ref$size,
16
16
  nicknameClassName = _ref.nicknameClassName;
17
17
  return /*#__PURE__*/React.createElement("div", {
18
- className: classNames('ald-user', "ald-user-".concat(size))
18
+ className: classNames('ald-user', "ald-user-".concat(size)),
19
+ title: nickname
19
20
  }, /*#__PURE__*/React.createElement(Avatar, {
21
+ className: 'ald-user-avatar',
20
22
  src: src,
21
23
  size: getAvatarSize(size || 'middle')
22
24
  }), /*#__PURE__*/React.createElement("div", {
@@ -34,4 +34,15 @@
34
34
  line-height: 20px; /* 142.857% */
35
35
  }
36
36
  }
37
+
38
+ .ald-user-text {
39
+ white-space: nowrap;
40
+ min-width: 0;
41
+ text-overflow: ellipsis;
42
+ overflow: hidden;
43
+ }
44
+
45
+ .ald-user-avatar {
46
+ flex-shrink: 0;
47
+ }
37
48
  }