ui: fix messagepad render, fix #1074

Author: undefined-moe

packages/ui-default/build/config/webpack.ts

@@ -286,7 +286,6 @@ export default async function (env: { watch?: boolean, production?: boolean, mea
       }),
       new ExtractCssPlugin({
         filename: `[name]-${version}.css?[fullhash:6]`,
-        chunkFilename: '[name]-[chunkhash:6].chunk.css',
       }),
       new WebpackManifestPlugin({}),
       new webpack.IgnorePlugin({ resourceRegExp: /(^\.\/locale$)/ }),

packages/ui-default/components/messagepad/MessagePadDialogueContentContainer.jsx

@@ -18,12 +18,9 @@ const mapStateToProps = (state) => ({
 
 // eslint-disable-next-line react-refresh/only-export-components
 export default connect(mapStateToProps)(class MessagePadDialogueContentContainer extends React.PureComponent {
-  componentDidMount() {
-    $(this.refs.list).scrollLock({ strict: true });
-  }
-
   componentDidUpdate(prevProps) {
-    const node = this.refs.list;
+    const node = this.state.ref;
+
     if (this.props.activeId !== prevProps.activeId) {
       this.scrollToBottom = true;
       this.scrollWithAnimation = false;
@@ -32,6 +29,8 @@ export default connect(mapStateToProps)(class MessagePadDialogueContentContainer
       this.scrollWithAnimation = true;
     } else this.scrollToBottom = false;
 
+    if (!node) return;
+    $(this.state.ref).scrollLock({ strict: true });
     if (this.scrollToBottom) {
       const targetScrollTop = node.scrollHeight - node.offsetHeight;
       if (this.scrollWithAnimation) {
@@ -93,14 +92,13 @@ export default connect(mapStateToProps)(class MessagePadDialogueContentContainer
     return (
       <>
         <div className="messagepad__header">
-          { this.props.item
-            && (
-              <a className="messagepad__content__header__title" href={`/user/${this.props.item.udoc._id}`}>
-                {`${this.props.item.udoc.uname}(UID: ${this.props.item.udoc._id})`}
-              </a>
-            )}
+          {this.props.item && (
+            <a className="messagepad__content__header__title" href={`/user/${this.props.item.udoc._id}`}>
+              {`${this.props.item.udoc.uname}(UID: ${this.props.item.udoc._id})`}
+            </a>
+          )}
         </div>
-        <ol className="messagepad__content" ref="list">
+        <ol className="messagepad__content" ref={(ref) => { this.setState({ ...this.state, ref }); }}>
           {this.renderInner()}
         </ol>
       </>

packages/ui-default/components/messagepad/MessagePadDialogueListContainer.jsx

@@ -23,10 +23,6 @@ const mapDispatchToProps = (dispatch) => ({
 
 // eslint-disable-next-line react-refresh/only-export-components
 export default connect(mapStateToProps, mapDispatchToProps)(class MessagePadDialogueListContainer extends React.PureComponent {
-  componentDidMount() {
-    $(this.refs.list).scrollLock({ strict: true });
-  }
-
   render() {
     const orderedDialogues = _.orderBy(
       _.values(this.props.dialogues),
@@ -36,7 +32,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MessagePadDial
       'desc',
     );
     return (
-      <ol className="messagepad__list" ref="list">
+      <ol className="messagepad__list" ref={(ref) => $(ref).scrollLock({ strict: true })}>
         {_.map(orderedDialogues, (dialogue) => (
           <ListItem
             key={dialogue._id}

packages/ui-default/components/messagepad/MessagePadInputContainer.jsx

@@ -55,7 +55,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MessagePadInpu
     );
     if (this.focusInput) {
       const { scrollX, scrollY } = window;
-      this.refs.input.focus();
+      this.state.ref?.focus();
       window.scrollTo(scrollX, scrollY);
     }
   }
@@ -81,7 +81,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MessagePadInpu
       <div className={cn}>
         <div className="messagepad__textarea-container">
           <textarea
-            ref="input"
+            ref={(ref) => this.setState({ ...this.state, ref })}
             data-markdown
             disabled={this.props.isPosting}
             value={this.props.inputValue}