@alifd/chat 0.1.8 → 0.1.9

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 (7) hide show
  1. package/es/float-button/view/inner-drawer.js +17 -15
  2. package/es/index.js +1 -1
  3. package/es/utils/hooks/useControlable.js +2 -2
  4. package/lib/float-button/view/inner-drawer.js +17 -15
  5. package/lib/index.js +1 -1
  6. package/lib/utils/hooks/useControlable.js +2 -2
  7. package/package.json +1 -1
package/es/float-button/view/inner-drawer.js CHANGED
@@ -101,6 +101,21 @@ export function InnerDrawer({ className, prefix, target, children, trigger, trig
101
101
  const handlers = useTriggerType({ visible, onVisibleChange: handleVisibleChange, triggerType });
102
102
  const domRef = useRef(null);
103
103
  const triggerRef = useRef(null);
104
+ useEffect(() => {
105
+ if (!mountTarget) {
106
+ return;
107
+ }
108
+ const onEnd = (e) => {
109
+ if (e.target === mountTarget && e.propertyName === 'width') {
110
+ const { visible, afterClose, afterOpen } = propsRef.current;
111
+ visible ? afterOpen === null || afterOpen === void 0 ? void 0 : afterOpen() : afterClose === null || afterClose === void 0 ? void 0 : afterClose();
112
+ }
113
+ };
114
+ mountTarget.addEventListener('transitionend', onEnd);
115
+ return () => {
116
+ mountTarget.removeEventListener('transitionend', onEnd);
117
+ };
118
+ }, [mountTarget]);
104
119
  useEffect(() => {
105
120
  if (!mountTarget) {
106
121
  return;
@@ -108,6 +123,7 @@ export function InnerDrawer({ className, prefix, target, children, trigger, trig
108
123
  if (visible) {
109
124
  beforeOpen === null || beforeOpen === void 0 ? void 0 : beforeOpen();
110
125
  const id = requestAnimationFrame(() => {
126
+ mountTarget.style.transition = 'width 0.3s,opacity 0.3s';
111
127
  mountTarget.style.width = `${typeof width === 'number' ? `${width}px` : width}`;
112
128
  mountTarget.style.opacity = '1';
113
129
  });
@@ -117,25 +133,11 @@ export function InnerDrawer({ className, prefix, target, children, trigger, trig
117
133
  }
118
134
  else {
119
135
  beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose();
136
+ mountTarget.style.transition = 'width 0.3s,opacity 0.3s';
120
137
  mountTarget.style.width = `0px`;
121
138
  mountTarget.style.opacity = '0';
122
139
  }
123
140
  }, [visible, mountTarget]);
124
- useEffect(() => {
125
- if (!mountTarget) {
126
- return;
127
- }
128
- const onEnd = (e) => {
129
- if (e.target === mountTarget && e.propertyName === 'width') {
130
- const { visible, afterClose, afterOpen } = propsRef.current;
131
- visible ? afterOpen === null || afterOpen === void 0 ? void 0 : afterOpen() : afterClose === null || afterClose === void 0 ? void 0 : afterClose();
132
- }
133
- };
134
- mountTarget.addEventListener('transitionend', onEnd);
135
- return () => {
136
- mountTarget.removeEventListener('transitionend', onEnd);
137
- };
138
- }, [mountTarget]);
139
141
  useEffect(() => {
140
142
  if (!mountTarget || !className) {
141
143
  return;
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.8';
8
+ export const version = '0.1.9';
package/es/utils/hooks/useControlable.js CHANGED
@@ -20,9 +20,9 @@ export function useControlable(props, { valueName = 'value', defaultValueName =
20
20
  }
21
21
  };
22
22
  useEffect(() => {
23
- if (value !== propValue) {
23
+ if (isControl && value !== propValue) {
24
24
  setValue(() => propValue);
25
25
  }
26
- }, [propValue]);
26
+ }, [propValue, isControl]);
27
27
  return [value, handleChange];
28
28
  }
package/lib/float-button/view/inner-drawer.js CHANGED
@@ -104,6 +104,21 @@ function InnerDrawer({ className, prefix, target, children, trigger, triggerType
104
104
  const handlers = (0, useTriggerType_1.useTriggerType)({ visible, onVisibleChange: handleVisibleChange, triggerType });
105
105
  const domRef = (0, react_1.useRef)(null);
106
106
  const triggerRef = (0, react_1.useRef)(null);
107
+ (0, react_1.useEffect)(() => {
108
+ if (!mountTarget) {
109
+ return;
110
+ }
111
+ const onEnd = (e) => {
112
+ if (e.target === mountTarget && e.propertyName === 'width') {
113
+ const { visible, afterClose, afterOpen } = propsRef.current;
114
+ visible ? afterOpen === null || afterOpen === void 0 ? void 0 : afterOpen() : afterClose === null || afterClose === void 0 ? void 0 : afterClose();
115
+ }
116
+ };
117
+ mountTarget.addEventListener('transitionend', onEnd);
118
+ return () => {
119
+ mountTarget.removeEventListener('transitionend', onEnd);
120
+ };
121
+ }, [mountTarget]);
107
122
  (0, react_1.useEffect)(() => {
108
123
  if (!mountTarget) {
109
124
  return;
@@ -111,6 +126,7 @@ function InnerDrawer({ className, prefix, target, children, trigger, triggerType
111
126
  if (visible) {
112
127
  beforeOpen === null || beforeOpen === void 0 ? void 0 : beforeOpen();
113
128
  const id = requestAnimationFrame(() => {
129
+ mountTarget.style.transition = 'width 0.3s,opacity 0.3s';
114
130
  mountTarget.style.width = `${typeof width === 'number' ? `${width}px` : width}`;
115
131
  mountTarget.style.opacity = '1';
116
132
  });
@@ -120,25 +136,11 @@ function InnerDrawer({ className, prefix, target, children, trigger, triggerType
120
136
  }
121
137
  else {
122
138
  beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose();
139
+ mountTarget.style.transition = 'width 0.3s,opacity 0.3s';
123
140
  mountTarget.style.width = `0px`;
124
141
  mountTarget.style.opacity = '0';
125
142
  }
126
143
  }, [visible, mountTarget]);
127
- (0, react_1.useEffect)(() => {
128
- if (!mountTarget) {
129
- return;
130
- }
131
- const onEnd = (e) => {
132
- if (e.target === mountTarget && e.propertyName === 'width') {
133
- const { visible, afterClose, afterOpen } = propsRef.current;
134
- visible ? afterOpen === null || afterOpen === void 0 ? void 0 : afterOpen() : afterClose === null || afterClose === void 0 ? void 0 : afterClose();
135
- }
136
- };
137
- mountTarget.addEventListener('transitionend', onEnd);
138
- return () => {
139
- mountTarget.removeEventListener('transitionend', onEnd);
140
- };
141
- }, [mountTarget]);
142
144
  (0, react_1.useEffect)(() => {
143
145
  if (!mountTarget || !className) {
144
146
  return;
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.8';
21
+ exports.version = '0.1.9';
package/lib/utils/hooks/useControlable.js CHANGED
@@ -23,10 +23,10 @@ function useControlable(props, { valueName = 'value', defaultValueName = getDefa
23
23
  }
24
24
  };
25
25
  (0, react_1.useEffect)(() => {
26
- if (value !== propValue) {
26
+ if (isControl && value !== propValue) {
27
27
  setValue(() => propValue);
28
28
  }
29
- }, [propValue]);
29
+ }, [propValue, isControl]);
30
30
  return [value, handleChange];
31
31
  }
32
32
  exports.useControlable = useControlable;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alifd/chat",
3
- "version": "0.1.8",
3
+ "version": "0.1.9",
4
4
  "description": "A configurable component library for chat built on React.",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",