M-Labs
/
web2019
5
0
Fork 2
Code Issues 16 Pull Requests Releases Wiki Activity

Hide popups on clicking outside of them 

Signed-off-by: Egor Savkin <es@m-labs.hk>
Egor Savkin 2023-08-23 12:58:13 +08:00
parent a6a6d758e9
commit 22372116ad
4 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@ -12,6 +12,7 @@
"@babel/core": "^7.22.8",
"@babel/preset-env": "^7.22.7",
"@babel/preset-react": "^7.22.5",
"@uidotdev/usehooks": "^2.1.1",
"axios": "^1.4.0",
"babel-loader": "^9.1.3",
"babel-preset-minify": "^0.5.2",
@ -2012,6 +2013,19 @@
"integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
"dev": true
},
"node_modules/@uidotdev/usehooks": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@uidotdev/usehooks/-/usehooks-2.1.1.tgz",
"integrity": "sha512-sVJ1jXU62Edh22dREEa3mHcHnH2MUgokuzLw9guNS30ADCkdhYASNZxg2V8iB83iwY5H+jSeSxjqGaFvsRrNBQ==",
"dev": true,
"engines": {
"node": ">=16"
},
"peerDependencies": {
"react": ">=18.0.0",
"react-dom": ">=18.0.0"
}
},
"node_modules/@webassemblyjs/ast": {
"version": "1.11.6",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",

3
package.json
View File

@ -28,7 +28,8 @@
"uuid": "^9.0.0",
"webpack": "^5.88.1",
"webpack-cli": "^5.1.4",
"json-logic-js": "^2.0.2"
"json-logic-js": "^2.0.2",
"@uidotdev/usehooks": "^2.1.1"
},
"babel": {
"presets": [

3
static/js/shop.jsx
View File

@ -1303,7 +1303,8 @@ class OrderForm extends React.PureComponent {
className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
style={{'cursor': 'pointer', 'fontWeight': '700'}}
value="Show JSON"
onClick={onClickShow} />
onClick={onClickShow}
readOnly={true} />
<input className="btn btn-primary w-100 m-0 ms-sm-2" type="submit" value={`${isProcessing ? 'Processing ...' : 'Request quote'}`} />
</div>

9
static/js/shop_components.jsx
View File

@ -3,6 +3,7 @@
import React, {Component} from "react";
import jsonLogic from 'json-logic-js';
import {useState} from 'react';
import {useClickAway} from "@uidotdev/usehooks";
// https://stackoverflow.com/a/70511311
const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
@ -239,7 +240,7 @@ const componentsList = {
};
export default function ProcessOptions({options, data, target, id}) {
export function ProcessOptions({options, data, target, id}) {
let options_t = trueTypeOf(options);
if (options_t === "array") {
@ -269,6 +270,7 @@ export default function ProcessOptions({options, data, target, id}) {
export function CustomizeButton({options, data, target, id, big}) {
const [show, setShow] = useState(false);
const ref = useClickAway(() => setShow(false));
let div_classes = "overlayVariant border rounded " + (big ? "overlay-bigcard" : "overlay-smallcard")
const handleClick = (event) => {
@ -276,7 +278,7 @@ export function CustomizeButton({options, data, target, id, big}) {
};
return (
<div>
<div ref={ref}>
<img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
onClick={handleClick}/>
<div style={{'display': show ? 'flex' : 'none'}} className={div_classes}>
@ -295,6 +297,7 @@ export function CustomizeButton({options, data, target, id, big}) {
export function CustomizeData({id, data}) {
const [show, setShow] = useState(false);
const [position, setPosition] = useState({x: 0, y: 0});
const ref = useClickAway(() => setShow(false));
const handleClick = (event) => {
setPosition({x: event.clientX, y: event.clientY});
@ -316,7 +319,7 @@ export function CustomizeData({id, data}) {
}
return (
<div>
<div ref={ref}>
<img className="alert-info" src={show ? "/images/shop/icon-close.svg" : "/images/shop/icon-customize.svg"}
style={{'marginLeft': '10px'}}
onClick={handleClick}/>