@alifd/chat 0.1.1 → 0.1.3

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.
Files changed (13) hide show
  1. package/es/float-button/hooks/useTriggerType.js +1 -1
  2. package/es/float-button/main.scss +17 -6
  3. package/es/float-button/types.d.ts +1 -14
  4. package/es/float-button/view/float-button.js +2 -27
  5. package/es/float-button/view/inner-drawer.js +7 -5
  6. package/es/index.js +1 -1
  7. package/lib/float-button/hooks/useTriggerType.js +1 -1
  8. package/lib/float-button/main.scss +17 -6
  9. package/lib/float-button/types.d.ts +1 -14
  10. package/lib/float-button/view/float-button.js +2 -27
  11. package/lib/float-button/view/inner-drawer.js +7 -5
  12. package/lib/index.js +1 -1
  13. package/package.json +25 -1
package/es/float-button/hooks/useTriggerType.js CHANGED
@@ -16,7 +16,7 @@ export function useTriggerType({ triggerType, visible, onVisibleChange, }) {
16
16
  }, 150);
17
17
  if (allowClick) {
18
18
  triggerHandlerProps.onClick = () => {
19
- onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(!visible, 'fromeTrigger');
19
+ onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(!visible, 'fromTrigger');
20
20
  };
21
21
  }
22
22
  if (allowHover) {
package/es/float-button/main.scss CHANGED
@@ -41,19 +41,30 @@
41
41
  flex: 1;
42
42
  display: flex;
43
43
  flex-direction: column;
44
+
45
+ &--has-title {
46
+ .#{$prefix}float-button-inner-drawer {
47
+ &-header {
48
+ padding: $size-base * 2 $size-base * 3;
49
+ }
50
+ &-body {
51
+ padding-top: 0;
52
+ }
53
+ }
54
+ }
44
55
  }
45
56
  &-header {
46
57
  flex: none;
47
- display: flex;
48
- justify-content: end;
49
- padding: $size-base * 2 $size-base * 3;
58
+ position: relative;
50
59
  &-title {
51
- flex: 1;
52
60
  font-size: $font-size-subhead;
53
61
  line-height: 1.5;
62
+ padding-right: $size-base * 2;
54
63
  }
55
64
  &-close {
56
- flex: none;
65
+ position: absolute;
66
+ right: $size-base * 2;
67
+ top: $size-base * 2;
57
68
  color: $color-text1-2;
58
69
  cursor: pointer;
59
70
  transition: color 0.15s;
@@ -70,7 +81,7 @@
70
81
  }
71
82
  &-body {
72
83
  flex: 1;
73
- padding: 0 $size-base * 3 $size-base * 2;
84
+ padding: $size-base * 2 $size-base * 3;
74
85
  }
75
86
  &-footer {
76
87
  flex: none;
package/es/float-button/types.d.ts CHANGED
@@ -109,20 +109,6 @@ export type RequiredParts<O, K extends keyof O> = Omit<O, K> & Required<Pick<O,
109
109
  export interface FloatButtonProps extends CommonProps {
110
110
  className?: string;
111
111
  style?: React.CSSProperties;
112
- /**
113
- * 面板展示类型
114
- * @defaultValue 'balloon'
115
- * @example
116
- * - `balloon`: 悬浮面板
117
- * - `drawer`: 悬浮侧边抽屉
118
- * - `inner-drawer`: 文档内部抽屉
119
- */
120
- type?: 'balloon' | 'drawer' | 'inner-drawer';
121
- drawerProps?: {
122
- title?: ReactNode;
123
- width?: number | string;
124
- target: string | (() => HTMLElement);
125
- };
126
112
  /**
127
113
  * 弹层位置，适用 `type`: 'balloon'
128
114
  */
@@ -238,4 +224,5 @@ export interface FloatButtonInnerDrawerProps extends FloatButtonProps {
238
224
  width?: string | number;
239
225
  target: string | (() => HTMLElement);
240
226
  title?: ReactNode;
227
+ drawerClassName?: string;
241
228
  }
package/es/float-button/view/float-button.js CHANGED
@@ -7,7 +7,6 @@ import { useAutoHide } from '../hooks/useAutoHide';
7
7
  import { useAutoAlign } from '../hooks/useAutoAlign';
8
8
  import { useNestleEdge } from '../hooks/useNestleEdge';
9
9
  import { useDragable } from '../hooks/useDragable';
10
- // import { InnerDrawer } from './inner-drawer';
11
10
  /**
12
11
  * @component 悬浮球
13
12
  * @en FloatButton
@@ -28,7 +27,7 @@ import { useDragable } from '../hooks/useDragable';
28
27
  * | SPACE | Trigger the onClick event |
29
28
  */
30
29
  const FloatButton = forwardRef((props, ref) => {
31
- const { className, style, type = 'balloon', addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = true, align, balloonProps, drawerProps, children, _renderView } = props, others = __rest(props, ["className", "style", "type", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "drawerProps", "children", "_renderView"]);
30
+ const { className, style, addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = false, align, balloonProps, children, _renderView } = props, others = __rest(props, ["className", "style", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children", "_renderView"]);
32
31
  const elRef = useRef(null);
33
32
  const triggerRef = useRef(null);
34
33
  const [el, setEl] = useState(null);
@@ -44,7 +43,7 @@ const FloatButton = forwardRef((props, ref) => {
44
43
  setTriggerEl(triggerRef.current);
45
44
  }, []);
46
45
  const { align: currentAlign, update: _updateAlign } = useAutoAlign(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
47
- enable: type === 'balloon' && autoAlign,
46
+ enable: autoAlign,
48
47
  defaultAlign: align,
49
48
  });
50
49
  const updateAlign = () => {
@@ -121,30 +120,6 @@ const FloatButton = forwardRef((props, ref) => {
121
120
  },
122
121
  }, popupClassName: `${cls}-popup`, trigger: trigger, popupContainer: () => el, triggerType: triggerType, align: currentAlign, v2: true, closable: showClose, autoAdjust: false }, balloonProps), children));
123
122
  };
124
- // const renderDrawer = () => {
125
- // return <div></div>;
126
- // };
127
- // const renderInnerDrawer = () => {
128
- // return (
129
- // <InnerDrawer
130
- // {...drawerProps}
131
- // prefix={`${cls}-`}
132
- // target=".card-legal-affairs"
133
- // trigger={trigger}
134
- // triggerType={triggerType}
135
- // visible={visible}
136
- // closable={showClose}
137
- // onVisibleChange={(...args) => {
138
- // if (draggedRef.current) {
139
- // return;
140
- // }
141
- // onVisibleChange?.(...args);
142
- // }}
143
- // >
144
- // {children}
145
- // </InnerDrawer>
146
- // );
147
- // };
148
123
  const renderView = () => {
149
124
  if (typeof _renderView === 'function') {
150
125
  return _renderView(`${cls}-`, Object.assign(Object.assign({}, props), { visible, onVisibleChange: handleVisibleChange }));
package/es/float-button/view/inner-drawer.js CHANGED
@@ -97,17 +97,19 @@ export function InnerDrawer({ className, prefix, target, children, trigger, trig
97
97
  React.createElement("div", Object.assign({}, handlers, { ref: triggerRef }), trigger),
98
98
  !!mountTarget &&
99
99
  ReactDOM.createPortal(React.createElement("div", { className: cs(cls, { [`${cls}--visible`]: visible }), ref: domRef, style: { width } },
100
- React.createElement("div", { className: `${cls}-inner` },
101
- React.createElement("div", { className: `${cls}-header` },
100
+ React.createElement("div", { className: cs(`${cls}-inner`, {
101
+ [`${cls}-inner--has-title`]: !!title,
102
+ }) },
103
+ React.createElement("div", { className: cs(`${cls}-header`) },
102
104
  !!title && React.createElement("div", { className: `${cls}-header-title` }, title),
103
- !!closable && (React.createElement("button", { className: `${cls}-header-close`, onClick: () => handleVisibleChange(false, 'close') },
105
+ !!closable && (React.createElement("button", { className: `${cls}-header-close`, onClick: () => handleVisibleChange(false, 'closeClick') },
104
106
  React.createElement(Icon, { className: `${cls}-header-close-icon`, type: "close", size: 12 })))),
105
107
  React.createElement("div", { className: `${cls}-body` }, children))), mountTarget)));
106
108
  }
107
109
  function FloatButtonByInnerDrawer(props) {
108
- const { width, title, target } = props, rests = __rest(props, ["width", "title", "target"]);
110
+ const { width, title, target, drawerClassName } = props, rests = __rest(props, ["width", "title", "target", "drawerClassName"]);
109
111
  return (React.createElement(FloatButton, Object.assign({}, rests, { _renderView: (prefix, { trigger, triggerType, visible, onVisibleChange, showClose, children }) => {
110
- return (React.createElement(InnerDrawer, { prefix: prefix, target: target, width: width, title: title, trigger: trigger, triggerType: triggerType, visible: visible, closable: showClose, onVisibleChange: (...args) => {
112
+ return (React.createElement(InnerDrawer, { className: drawerClassName, prefix: prefix, target: target, width: width, title: title, trigger: trigger, triggerType: triggerType, visible: visible, closable: showClose, onVisibleChange: (...args) => {
111
113
  onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(...args);
112
114
  } }, children));
113
115
  } })));
package/es/index.js CHANGED
@@ -5,4 +5,4 @@ export { default as FloatButton } from './float-button';
5
5
  export { default as Text } from './text';
6
6
  export { default as Tag } from './tag';
7
7
  export { default as Tab } from './tab';
8
- export const version = '0.1.1';
8
+ export const version = '0.1.3';
package/lib/float-button/hooks/useTriggerType.js CHANGED
@@ -19,7 +19,7 @@ function useTriggerType({ triggerType, visible, onVisibleChange, }) {
19
19
  }, 150);
20
20
  if (allowClick) {
21
21
  triggerHandlerProps.onClick = () => {
22
- onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(!visible, 'fromeTrigger');
22
+ onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(!visible, 'fromTrigger');
23
23
  };
24
24
  }
25
25
  if (allowHover) {
package/lib/float-button/main.scss CHANGED
@@ -41,19 +41,30 @@
41
41
  flex: 1;
42
42
  display: flex;
43
43
  flex-direction: column;
44
+
45
+ &--has-title {
46
+ .#{$prefix}float-button-inner-drawer {
47
+ &-header {
48
+ padding: $size-base * 2 $size-base * 3;
49
+ }
50
+ &-body {
51
+ padding-top: 0;
52
+ }
53
+ }
54
+ }
44
55
  }
45
56
  &-header {
46
57
  flex: none;
47
- display: flex;
48
- justify-content: end;
49
- padding: $size-base * 2 $size-base * 3;
58
+ position: relative;
50
59
  &-title {
51
- flex: 1;
52
60
  font-size: $font-size-subhead;
53
61
  line-height: 1.5;
62
+ padding-right: $size-base * 2;
54
63
  }
55
64
  &-close {
56
- flex: none;
65
+ position: absolute;
66
+ right: $size-base * 2;
67
+ top: $size-base * 2;
57
68
  color: $color-text1-2;
58
69
  cursor: pointer;
59
70
  transition: color 0.15s;
@@ -70,7 +81,7 @@
70
81
  }
71
82
  &-body {
72
83
  flex: 1;
73
- padding: 0 $size-base * 3 $size-base * 2;
84
+ padding: $size-base * 2 $size-base * 3;
74
85
  }
75
86
  &-footer {
76
87
  flex: none;
package/lib/float-button/types.d.ts CHANGED
@@ -109,20 +109,6 @@ export type RequiredParts<O, K extends keyof O> = Omit<O, K> & Required<Pick<O,
109
109
  export interface FloatButtonProps extends CommonProps {
110
110
  className?: string;
111
111
  style?: React.CSSProperties;
112
- /**
113
- * 面板展示类型
114
- * @defaultValue 'balloon'
115
- * @example
116
- * - `balloon`: 悬浮面板
117
- * - `drawer`: 悬浮侧边抽屉
118
- * - `inner-drawer`: 文档内部抽屉
119
- */
120
- type?: 'balloon' | 'drawer' | 'inner-drawer';
121
- drawerProps?: {
122
- title?: ReactNode;
123
- width?: number | string;
124
- target: string | (() => HTMLElement);
125
- };
126
112
  /**
127
113
  * 弹层位置，适用 `type`: 'balloon'
128
114
  */
@@ -238,4 +224,5 @@ export interface FloatButtonInnerDrawerProps extends FloatButtonProps {
238
224
  width?: string | number;
239
225
  target: string | (() => HTMLElement);
240
226
  title?: ReactNode;
227
+ drawerClassName?: string;
241
228
  }
package/lib/float-button/view/float-button.js CHANGED
@@ -9,7 +9,6 @@ const useAutoHide_1 = require("../hooks/useAutoHide");
9
9
  const useAutoAlign_1 = require("../hooks/useAutoAlign");
10
10
  const useNestleEdge_1 = require("../hooks/useNestleEdge");
11
11
  const useDragable_1 = require("../hooks/useDragable");
12
- // import { InnerDrawer } from './inner-drawer';
13
12
  /**
14
13
  * @component 悬浮球
15
14
  * @en FloatButton
@@ -30,7 +29,7 @@ const useDragable_1 = require("../hooks/useDragable");
30
29
  * | SPACE | Trigger the onClick event |
31
30
  */
32
31
  const FloatButton = (0, react_1.forwardRef)((props, ref) => {
33
- const { className, style, type = 'balloon', addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = true, align, balloonProps, drawerProps, children, _renderView } = props, others = tslib_1.__rest(props, ["className", "style", "type", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "drawerProps", "children", "_renderView"]);
32
+ const { className, style, addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = false, align, balloonProps, children, _renderView } = props, others = tslib_1.__rest(props, ["className", "style", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children", "_renderView"]);
34
33
  const elRef = (0, react_1.useRef)(null);
35
34
  const triggerRef = (0, react_1.useRef)(null);
36
35
  const [el, setEl] = (0, react_1.useState)(null);
@@ -46,7 +45,7 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
46
45
  setTriggerEl(triggerRef.current);
47
46
  }, []);
48
47
  const { align: currentAlign, update: _updateAlign } = (0, useAutoAlign_1.useAutoAlign)(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
49
- enable: type === 'balloon' && autoAlign,
48
+ enable: autoAlign,
50
49
  defaultAlign: align,
51
50
  });
52
51
  const updateAlign = () => {
@@ -123,30 +122,6 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
123
122
  },
124
123
  }, popupClassName: `${cls}-popup`, trigger: trigger, popupContainer: () => el, triggerType: triggerType, align: currentAlign, v2: true, closable: showClose, autoAdjust: false }, balloonProps), children));
125
124
  };
126
- // const renderDrawer = () => {
127
- // return <div></div>;
128
- // };
129
- // const renderInnerDrawer = () => {
130
- // return (
131
- // <InnerDrawer
132
- // {...drawerProps}
133
- // prefix={`${cls}-`}
134
- // target=".card-legal-affairs"
135
- // trigger={trigger}
136
- // triggerType={triggerType}
137
- // visible={visible}
138
- // closable={showClose}
139
- // onVisibleChange={(...args) => {
140
- // if (draggedRef.current) {
141
- // return;
142
- // }
143
- // onVisibleChange?.(...args);
144
- // }}
145
- // >
146
- // {children}
147
- // </InnerDrawer>
148
- // );
149
- // };
150
125
  const renderView = () => {
151
126
  if (typeof _renderView === 'function') {
152
127
  return _renderView(`${cls}-`, Object.assign(Object.assign({}, props), { visible, onVisibleChange: handleVisibleChange }));
package/lib/float-button/view/inner-drawer.js CHANGED
@@ -100,18 +100,20 @@ function InnerDrawer({ className, prefix, target, children, trigger, triggerType
100
100
  react_1.default.createElement("div", Object.assign({}, handlers, { ref: triggerRef }), trigger),
101
101
  !!mountTarget &&
102
102
  react_dom_1.default.createPortal(react_1.default.createElement("div", { className: (0, classnames_1.default)(cls, { [`${cls}--visible`]: visible }), ref: domRef, style: { width } },
103
- react_1.default.createElement("div", { className: `${cls}-inner` },
104
- react_1.default.createElement("div", { className: `${cls}-header` },
103
+ react_1.default.createElement("div", { className: (0, classnames_1.default)(`${cls}-inner`, {
104
+ [`${cls}-inner--has-title`]: !!title,
105
+ }) },
106
+ react_1.default.createElement("div", { className: (0, classnames_1.default)(`${cls}-header`) },
105
107
  !!title && react_1.default.createElement("div", { className: `${cls}-header-title` }, title),
106
- !!closable && (react_1.default.createElement("button", { className: `${cls}-header-close`, onClick: () => handleVisibleChange(false, 'close') },
108
+ !!closable && (react_1.default.createElement("button", { className: `${cls}-header-close`, onClick: () => handleVisibleChange(false, 'closeClick') },
107
109
  react_1.default.createElement(next_1.Icon, { className: `${cls}-header-close-icon`, type: "close", size: 12 })))),
108
110
  react_1.default.createElement("div", { className: `${cls}-body` }, children))), mountTarget)));
109
111
  }
110
112
  exports.InnerDrawer = InnerDrawer;
111
113
  function FloatButtonByInnerDrawer(props) {
112
- const { width, title, target } = props, rests = tslib_1.__rest(props, ["width", "title", "target"]);
114
+ const { width, title, target, drawerClassName } = props, rests = tslib_1.__rest(props, ["width", "title", "target", "drawerClassName"]);
113
115
  return (react_1.default.createElement(float_button_1.default, Object.assign({}, rests, { _renderView: (prefix, { trigger, triggerType, visible, onVisibleChange, showClose, children }) => {
114
- return (react_1.default.createElement(InnerDrawer, { prefix: prefix, target: target, width: width, title: title, trigger: trigger, triggerType: triggerType, visible: visible, closable: showClose, onVisibleChange: (...args) => {
116
+ return (react_1.default.createElement(InnerDrawer, { className: drawerClassName, prefix: prefix, target: target, width: width, title: title, trigger: trigger, triggerType: triggerType, visible: visible, closable: showClose, onVisibleChange: (...args) => {
115
117
  onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(...args);
116
118
  } }, children));
117
119
  } })));
package/lib/index.js CHANGED
@@ -18,4 +18,4 @@ var tag_1 = require("./tag");
18
18
  Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return __importDefault(tag_1).default; } });
19
19
  var tab_1 = require("./tab");
20
20
  Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return __importDefault(tab_1).default; } });
21
- exports.version = '0.1.1';
21
+ exports.version = '0.1.3';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alifd/chat",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "A configurable component library for chat built on React.",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -10,6 +10,30 @@
10
10
  "require": "./lib/index.js"
11
11
  },
12
12
  "./package.json": "./package.json",
13
+ "./es/*": {
14
+ "import": "./es/*.js",
15
+ "require": "./lib/*.js"
16
+ },
17
+ "./es/*.js": {
18
+ "import": "./es/*.js",
19
+ "require": "./lib/*.js"
20
+ },
21
+ "./es/*.scss": {
22
+ "import": "./es/*.scss",
23
+ "require": "./lib/*.scss"
24
+ },
25
+ "./lib/*": {
26
+ "import": "./es/*.js",
27
+ "require": "./lib/*.js"
28
+ },
29
+ "./lib/*.js": {
30
+ "import": "./es/*.js",
31
+ "require": "./lib/*.js"
32
+ },
33
+ "./lib/*.scss": {
34
+ "import": "./es/*.scss",
35
+ "require": "./lib/*.scss"
36
+ },
13
37
  "./button": {
14
38
  "import": "./es/button/index.js",
15
39
  "require": "./lib/button/index.js"