Tag Archives: reaction

Anti card limited Drag Based on react draggable drag

Recently, a project requirement is to click the question mark to display the prompt window. The window is fixed, does not scroll with the scroll bar, and can be dragged within the scope. It does not affect the lower form input.

I think of using anti card combined with react draggable. Record the implementation code here:

import React from 'react';
import { Modal, Button, Card, Icon } from 'antd';
import Draggable from 'react-draggable';

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            cardShow: false,
            disabled: true,
            bounds: { left: 0, top: 0, bottom: 0, right: 0 }, // Initialize drag boundary
        };
        this.draggleRef = React.createRef();
    }

    onStart = (event, uiData) => {
        const { clientWidth, clientHeight } = window.document.documentElement;
        const targetRect = this.draggleRef.current.getBoundingClientRect();
        this.setState({
            // Set the drag boundary to limit the dragging distance from the top, bottom, left and right of the initial position, the following setting is draggable in the browser window
            // If the page has a fixed display header, it must be draggable below the header, you can set top: -targetRect.top + uiData.y + height of the header.
            bounds: {
                left: -targetRect.left + uiData.x,
                right: clientWidth - 300,
                top: -targetRect.top + uiData.y,
                bottom: clientHeight - (targetRect.bottom - uiData.y),
            },
        });
    };

    onClickShow = () => {
        this.setState({
            cardShow: true,
        })
    }

    onClickClose = () => {
        this.setState({
            cardShow: false,
            bounds: { left: 0, top: 0, bottom: 0, right: 0 },
        })
    }

    render() {
        const {disabled, bounds, cardShow} = this.state;
        return (
            <div style={{width: '100%'}}>
                <Draggable
                    disabled={disabled}
                    bounds={bounds}
                    onStart={(event, uiData) => this.onStart(event, uiData)}
                >
                    <div ref={this.draggleRef}>
                        {cardShow &&
                        <Card
                            title={
                                <div
                                    style={{
                                        width: '100%',
                                        cursor: 'move',
                                    }}
                                    onMouseOver={() => {
                                        this.setState({
                                            disabled: false,
                                        });
                                    }}
                                    onMouseOut={() => {
                                        this.setState({
                                            disabled: true,
                                        });
                                    }}
                                    onFocus={() => {}}
                                    onBlur={() => {}}
                                >
                                    {'Title'}
                                </div>
                            }
                            extra={
                                <span onClick={() => this.onClickClose()}>
                                    <Icon type={'close'} style={{fontSize:'16px'}}/>
                                </span>
                            }
                            style={{ width: 300, position: 'fixed', zIndex: 999 }}>
                            <p>Conetent</p>
                        </Card>}
                    </div>
                </Draggable>
                <span >{'Help'}</span><Icon onClick={() => this.onClickShow()} type="question-circle" />
            </div>
        );
    }

}

How to React page to achieve entry and exit animation

React animated router dependency

file: https://www.npmjs.com/package/react-animated-router
Replace the direct routing component switch with the animated router

The red mark is wrong

In the process of development (TS), we always report an error after replacement, saying that there is no necessary attribute. After looking at the source code and adding the following attributes, we report no error (enter, exit, appearance)
< AnimatedRouter enter exit appear> ... </ AnimatedRouter>

Simply record how to improve the appearance animation style

Introduce a style (‘react-animated-router/animal. CSS’) which is copied from the installation package. If you want to modify it, it is left and right animation by default

// ------Page in/out animation start-------
.animated-router-container {
  height: 100%;
}
.animated-router-in-transition {
  /* page animation in progress */
  position: relative;
  width: 100%;
  overflow: hidden;
}
.animated-router-forward-enter {
  transform: translate(-20px);
  opacity: 0;
}
.animated-router-forward-enter-active {
  transform: translate(0);
  opacity: 1;
}
.animated-router-forward-exit {
  transform: translate(0);
  opacity: 1;
}
.animated-router-forward-exit-active {
  transform: translate(100%);
  opacity: 0;
}
.animated-router-backward-enter {
  transform: translate(-20px);
  opacity: 0;
}
.animated-router-backward-enter-active {
  transform: translate(0);
  opacity: 1;
}
.animated-router-backward-exit {
  transform: translate(0);
  opacity: 1;
}
.animated-router-backward-exit-active {
  transform: translate(100%);
  opacity: 0;
}
.animated-router-forward-enter-active,
.animated-router-forward-exit-active,
.animated-router-backward-enter-active,
.animated-router-backward-exit-active {
  /* Transition time and jogging effect required for different transition phases */
  transition: all 0.4s ease-in;
}
.animated-router-forward-exit,
.animated-router-backward-exit {
  position: absolute !important;
  width: 100%;
  top: 0;
  left: 0;
}
// ------Page in/out animation end-------

When a warning appears, try to install the following two plug-ins

npm install [email protected] --save
npm install –save-dev prop-types

Another component library comes out of animation – ant motion

Vue introduction path is correct, but it always reports an error: already included file name‘ ××ב differs from file name ‘ ××ב only in casing.

Vue import path ××× from ‘ ×××’ Error
the file name and address introduced are correct, but the error is still reported
already included file name‘ ×××’ differs from file name ‘ ×××’ only in casing.

At this time, we just need to remove the suffix Vue of the file name
solution

Solution 1: remove the suffix Vue of the file name

Solution 2: change the point in front of the path to@

Path

function

./

current file sibling directory

./

current file superior directory

@

when importing a module, you can use @ instead of/SRC directory to refer to the relative path

React native android: How to Upload Formdata

  let resizedImage = file // file
  let formData = new FormData();
  let name = `xxxx.jpeg`;
  let file = { uri: "file:///" + resizedImage.path.split("file:/").join(""), type: 'image/png', name: escape(resizedImage.name), fileType: 'image/\*' };   //The key here (uri and type and name) cannot be changed,
  formData.append("file", file); //the files here are the key needed by the backend
  formData.append("token", token); //the files here are the key needed by the backend
  formData.append("key", Math.random()+'__'+name); //the files here are the keys needed by the backend
                       

Gyp err! Build error stack error

Error content:

gyp ERR! build error
gyp ERR! stack Error: `C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\BuildTools\\MSBuild\\15.0\\Bin\\MSBuild.exe` failed with exit code: 1

Repeat several times and still report an error.
Check the problem. The yarn version is normal, and the image is also a Taobao image.

solve:

1. Execute NPMI – G node gyp command
2. Delete directory/node_ All files under modules
3. Re install.

In addition, it can be seen on the Internet that it may be due to the node version. The node version needs to be lowered. I didn’t try this method. I don’t know if it’s feasible.