@nyris/nyris-webapp 0.3.3 → 0.3.6

package/src/components/input/inputSearch.tsx

@@ -1,77 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Button, Box } from "@material-ui/core";
-import ClearOutlinedIcon from "@material-ui/icons/ClearOutlined";
-import { connectSearchBox } from "react-instantsearch-dom";
-import { useHistory } from "react-router-dom";
-import { useAppDispatch } from "Store/Store";
-import { reset } from "Store/Search";
-import { debounce } from "lodash";
-import { useCallback } from "react";
-
-const SearchBox = ({ currentRefinement, isSearchStalled, refine }: any) => {
-  const focusInp: any = useRef();
-  const history = useHistory();
-  const [, setShowBtnClear] = useState<boolean>(true);
-  const [valueInput, setValueInput] = useState<string>("");
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    if (focusInp?.current) {
-      focusInp?.current.focus();
-    }
-  }, [focusInp]);
-
-  useEffect(() => {
-    // if (currentRefinement) {
-    setValueInput(currentRefinement);
-    // }
-  }, [currentRefinement]);
-
-  useEffect(() => {
-    if (valueInput.length > 0) {
-      setShowBtnClear(true);
-    }
-    setShowBtnClear(false);
-  }, [valueInput]);
-
-  const debounceSearch = useCallback(
-    debounce((nextValue: any) => refine(nextValue), 0),
-    []
-  );
-
-  return (
-    <Box className="wrap-input-search">
-      <Box p={2} display={"flex"} className="box-input-search">
-        <form noValidate action="" role="search">
-          <input
-            style={{ border: "0px", width: "100%" }}
-            className="input-search"
-            value={valueInput}
-            onChange={(event) => {
-              setValueInput(event.currentTarget.value);
-              debounceSearch(event.currentTarget.value);
-            }}
-            ref={focusInp}
-          />
-          {history.location.pathname === "/result" && (
-            <Button
-              className="btn-clear-text"
-              onClick={() => {
-                setValueInput("");
-                refine("");
-                dispatch(reset(""));
-                history.push("/");
-                return;
-              }}
-            >
-              <ClearOutlinedIcon style={{ fontSize: 12, color: "#2B2C46" }} />
-            </Button>
-          )}
-        </form>
-      </Box>
-    </Box>
-  );
-};
-
-const CustomSearchBox = connectSearchBox(SearchBox);
-export default CustomSearchBox;

package/src/components/modal/DefaultModal.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import Modal from "@material-ui/core/Modal";
-
-interface Props {
-  children: JSX.Element;
-  openModal: boolean;
-  handleClose: (e: any) => void;
-}
-
-function DefaultModal(props: Props) {
-  const { children, openModal = false, handleClose } = props;
-
-  return (
-    <Modal
-      open={openModal}
-      onClose={handleClose}
-      style={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      {children}
-    </Modal>
-  );
-}
-
-export default DefaultModal;

package/src/components/preview/preview.tsx

@@ -1,433 +0,0 @@
-import React from "react";
-import { Layer, Stage, Image, Circle, Rect } from "react-konva";
-import Konva from "konva";
-import { NodeGroup } from "react-move";
-
-type PreviewElem = "tl" | "tr" | "bl" | "br" | "rect";
-
-interface RectCoords {
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-}
-
-interface PreviewProps {
-  image: HTMLCanvasElement;
-  initialRegion: any;
-  regions: any[];
-  onSelectionChange?: (r: any) => void;
-  maxWidth: number;
-  maxHeight: number;
-  dotColor: string;
-}
-
-interface PreviewState extends RectCoords {
-  tlHover: boolean;
-  trHover: boolean;
-  blHover: boolean;
-  brHover: boolean;
-  dotHover: boolean;
-  rectHover: boolean;
-}
-interface WH {
-  w: number;
-  h: number;
-}
-
-function getThumbSizeLongestEdge(
-  maxW: number,
-  maxH: number,
-  iW: number,
-  iH: number
-): WH {
-  let iR = iW / iH;
-  let dR = maxW / maxH;
-  if (dR > iR) {
-    return {
-      w: (iW * maxH) / iH,
-      h: maxH,
-    };
-  }
-  return {
-    w: maxW,
-    h: (iH * maxW) / iW,
-  };
-}
-
-class Preview extends React.Component<PreviewProps, PreviewState> {
-  private readonly selectionRef: React.RefObject<any>;
-  private animation?: Konva.Animation;
-
-  private handleDragMoveRect = this.handleDragMove.bind(this, "rect");
-  private handleDragMoveTl = this.handleDragMove.bind(this, "tl");
-  private handleDragMoveTr = this.handleDragMove.bind(this, "tr");
-  private handleDragMoveBl = this.handleDragMove.bind(this, "bl");
-  private handleDragMoveBr = this.handleDragMove.bind(this, "br");
-
-  private handleDragBoundTl = ({ x, y }: { x: number; y: number }) => {
-    let [minX, minY] = [100, 100];
-    let { x2, y2 } = this.scaleToPreviewPixels(this.state);
-    return {
-      x: Math.max(Math.min(x, x2 - minX), 0),
-      y: Math.max(Math.min(y, y2 - minY), 0),
-    };
-  };
-
-  private handleDragBoundTr = ({ x, y }: { x: number; y: number }) => {
-    let [minX, minY] = [100, 100];
-    let { x1, y2, width } = this.scaleToPreviewPixels(this.state);
-    return {
-      x: Math.min(Math.max(x, x1 + minX), width),
-      y: Math.max(Math.min(y, y2 - minY), 0),
-    };
-  };
-  private handleDragBoundBl = ({ x, y }: { x: number; y: number }) => {
-    let [minX, minY] = [100, 100];
-    let { x2, y1, height } = this.scaleToPreviewPixels(this.state);
-    return {
-      x: Math.max(Math.min(x, x2 - minX), 0),
-      y: Math.min(Math.max(y, y1 + minY), height),
-    };
-  };
-
-  private handleDragBoundBr = ({ x, y }: { x: number; y: number }) => {
-    let [minX, minY] = [100, 100];
-    let { x1, y1, width, height } = this.scaleToPreviewPixels(this.state);
-    return {
-      x: Math.min(Math.max(x, x1 + minX), width),
-      y: Math.min(Math.max(y, y1 + minY), height),
-    };
-  };
-
-  private handleDragBoundRect = ({ x, y }: { x: number; y: number }) => {
-    let { x1, x2, y1, y2, width, height } = this.scaleToPreviewPixels(
-      this.state
-    );
-    let elemWidth = x2 - x1;
-    let elemHeight = y2 - y1;
-    return {
-      x: Math.max(Math.min(x, width - elemWidth), 0),
-      y: Math.max(Math.min(y, height - elemHeight), 0),
-    };
-  };
-
-  constructor(props: PreviewProps) {
-    super(props);
-    this.selectionRef = React.createRef<Konva.Shape>();
-    this.state = {
-      tlHover: false,
-      trHover: false,
-      blHover: false,
-      brHover: false,
-      dotHover: false,
-      rectHover: false,
-      ...props.initialRegion,
-    };
-  }
-
-  private handleDragMove(
-    elem: PreviewElem,
-    evt: Konva.KonvaEventObject<DragEvent>
-  ) {
-    let { x1, x2, y1, y2, width, height } = this.scaleToPreviewPixels(
-      this.state
-    );
-    if (evt.target instanceof Konva.Stage) {
-      return;
-    }
-
-    let { x: newX, y: newY } = evt.target.getAbsolutePosition();
-    let { width: elemWidth, height: elemHeight } = evt.target.getSize();
-    switch (elem) {
-      case "rect":
-        x1 = newX;
-        y1 = newY;
-        x2 = newX + elemWidth;
-        y2 = newY + elemHeight;
-        break;
-      case "tl":
-        x1 = newX;
-        y1 = newY;
-        break;
-      case "tr":
-        x2 = newX;
-        y1 = newY;
-        break;
-      case "bl":
-        x1 = newX;
-        y2 = newY;
-        break;
-      case "br":
-        x2 = newX;
-        y2 = newY;
-        break;
-    }
-    let newState = {
-      x1: x1 / width,
-      x2: x2 / width,
-      y1: y1 / height,
-      y2: y2 / height,
-    };
-    this.setSelection(newState);
-  }
-
-  private scaleToPreviewPixels({ x1, x2, y1, y2 }: any) {
-    let { w: width, h: height } = getThumbSizeLongestEdge(
-      this.props.maxWidth,
-      this.props.maxHeight,
-      this.props.image.width,
-      this.props.image.height
-    );
-    return {
-      x1: x1 * width,
-      x2: x2 * width,
-      y1: y1 * height,
-      y2: y2 * height,
-      width,
-      height,
-    };
-  }
-
-  componentDidMount(): void {
-    let speed = 40;
-    this.animation = new Konva.Animation(
-      (frame?: { timeDiff: number; time: number }) => {
-        if (!frame) {
-          return;
-        }
-        let angleDiff = (frame.time * speed) / 1000;
-        this.selectionRef.current.dashOffset(-angleDiff);
-      },
-      this.selectionRef.current.getLayer()
-    );
-    this.animation.start();
-  }
-
-  componentWillUnmount(): void {
-    this.animation && this.animation.stop();
-  }
-
-  setSelection(r: RectCoords) {
-    this.setState(r);
-    if (this.props.onSelectionChange) {
-      this.props.onSelectionChange(r);
-    }
-  }
-
-  getCursor() {
-    if (this.state.dotHover) {
-      return "pointer";
-    }
-    if (this.state.tlHover) {
-      return "nw-resize";
-    }
-    if (this.state.trHover) {
-      return "ne-resize";
-    }
-    if (this.state.blHover) {
-      return "sw-resize";
-    }
-    if (this.state.brHover) {
-      return "se-resize";
-    }
-    if (this.state.rectHover) {
-      return "move";
-    }
-    return "default";
-  }
-
-  render() {
-    const { image, regions } = this.props;
-    if (!image) {
-      return null;
-    }
-
-    const { x1, x2, y1, y2, width, height }: any = this.scaleToPreviewPixels(
-      this.state
-    );
-
-    const dots = regions.map((region: any, i: any) => {
-      let { x1, x2, y1, y2 } = region;
-      return {
-        // get middle of box and map to pixels
-        region,
-        x: width * ((x2 - x1) / 2 + x1),
-        y: height * ((y2 - y1) / 2 + y1),
-        key: i,
-      };
-    });
-
-    let gripSize = 40;
-    let gripOpacity = 0.3;
-    let gripOpacityOver = 0.6;
-    let darkOpacity = 0.3;
-
-    return (
-      <Stage
-        width={width}
-        height={height}
-        style={{
-          cursor: this.getCursor(),
-          width: width,
-          height: height,
-          margin: "auto",
-          marginBottom: "5%",
-        }}
-      >
-        <Layer key="img">
-          <Image image={image} width={width} height={height} />
-        </Layer>
-        <Layer key="selection">
-          {/* Selection box */}
-          <Rect
-            stroke="white"
-            strokeWidth={2}
-            x={x1}
-            y={y1}
-            width={x2 - x1}
-            height={y2 - y1}
-          />
-          <Rect
-            stroke="black"
-            draggable={true}
-            onDragMove={this.handleDragMoveRect}
-            dragBoundFunc={this.handleDragBoundRect}
-            onMouseOver={() => this.setState({ rectHover: true })}
-            onMouseOut={() => this.setState({ rectHover: false })}
-            opacity={0.8}
-            strokeWidth={2}
-            x={x1}
-            y={y1}
-            width={x2 - x1}
-            height={y2 - y1}
-            dash={[15, 15]}
-            ref={this.selectionRef}
-          />
-          {/* grips */}
-          <Rect
-            fill="black"
-            draggable={true}
-            onDragMove={this.handleDragMoveTl}
-            dragBoundFunc={this.handleDragBoundTl}
-            onMouseOver={() => this.setState({ tlHover: true })}
-            onMouseOut={() => this.setState({ tlHover: false })}
-            opacity={this.state.tlHover ? gripOpacityOver : gripOpacity}
-            width={gripSize}
-            height={gripSize}
-            x={x1}
-            y={y1}
-          />
-          <Rect
-            fill="black"
-            draggable={true}
-            onDragMove={this.handleDragMoveTr}
-            dragBoundFunc={this.handleDragBoundTr}
-            onMouseOver={() => this.setState({ trHover: true })}
-            onMouseOut={() => this.setState({ trHover: false })}
-            opacity={this.state.trHover ? gripOpacityOver : gripOpacity}
-            width={gripSize}
-            height={gripSize}
-            x={x2}
-            y={y1}
-            offsetX={gripSize}
-          />
-          <Rect
-            fill="black"
-            draggable={true}
-            onDragMove={this.handleDragMoveBl}
-            dragBoundFunc={this.handleDragBoundBl}
-            onMouseOver={() => this.setState({ blHover: true })}
-            onMouseOut={() => this.setState({ blHover: false })}
-            opacity={this.state.blHover ? gripOpacityOver : gripOpacity}
-            width={gripSize}
-            height={gripSize}
-            x={x1}
-            y={y2}
-            offsetY={gripSize}
-          />
-          <Rect
-            fill="black"
-            draggable={true}
-            onDragMove={this.handleDragMoveBr}
-            dragBoundFunc={this.handleDragBoundBr}
-            onMouseOver={() => this.setState({ brHover: true })}
-            onMouseOut={() => this.setState({ brHover: false })}
-            opacity={this.state.brHover ? gripOpacityOver : gripOpacity}
-            width={gripSize}
-            height={gripSize}
-            x={x2}
-            y={y2}
-            offsetY={gripSize}
-            offsetX={gripSize}
-          />
-          {/* Dark areas */}
-          <Rect
-            fill="black"
-            opacity={darkOpacity}
-            x={0}
-            y={0}
-            width={width}
-            height={y1}
-          />
-          <Rect
-            fill="black"
-            opacity={darkOpacity}
-            x={0}
-            y={y2}
-            width={width}
-            height={height - y2}
-          />
-          <Rect
-            fill="black"
-            opacity={darkOpacity}
-            x={0}
-            y={y1}
-            width={x1}
-            height={y2 - y1}
-          />
-          <Rect
-            fill="black"
-            opacity={darkOpacity}
-            x={x2}
-            y={y1}
-            width={width - x2}
-            height={y2 - y1}
-          />
-        </Layer>
-        <NodeGroup
-          data={dots}
-          keyAccessor={(r) => r.key}
-          start={(d, i) => ({ opacity: 0, x: -100, y: d.y })}
-          enter={(d, i) => ({
-            opacity: [1],
-            x: [d.x],
-            y: d.y,
-            timing: { delay: i * 100, duration: 300 },
-          })}
-        >
-          {(ds) => (
-            <Layer key="dots">
-              {ds.map(({ key, data, state: position }) => (
-                <Circle
-                  onClick={() => this.setSelection(data.region)}
-                  onTap={() => this.setSelection(data.region)}
-                  onMouseOver={() => this.setState({ dotHover: true })}
-                  onMouseOut={() => this.setState({ dotHover: false })}
-                  key={key}
-                  radius={7}
-                  {...position}
-                  stroke={this.props.dotColor}
-                  fill="white"
-                  strokeWidth={4}
-                />
-              ))}
-            </Layer>
-          )}
-        </NodeGroup>
-      </Stage>
-    );
-  }
-}
-
-export default Preview;

package/src/components/results/ItemResult.tsx

@@ -1,155 +0,0 @@
-import { Box, Button, Grid, Typography } from "@material-ui/core";
-import React from "react";
-import IconSupport from "common/assets/icons/support.svg";
-import IconLike from "common/assets/icons/icon_like.svg";
-import IconDisLike from "common/assets/icons/icon_dislike.svg";
-import IconShare from "common/assets/icons/Fill.svg";
-import IconBookmark from "common/assets/icons/book_mark.svg";
-import IconModalImage from "common/assets/icons/icon_modal_image.svg";
-
-interface Props {
-  dataItem: any;
-  handlerToggleModal?: any;
-  handleClose?: () => void;
-  handlerToggleModalShare?: () => void;
-  isHover?: boolean;
-  indexItem?: number;
-  onSearchImage?: any;
-  handlerFeedback?: any;
-}
-
-function ItemResult(props: Props) {
-  const {
-    dataItem,
-    handlerToggleModal,
-    handlerToggleModalShare,
-    isHover = false,
-    onSearchImage,
-    handlerFeedback,
-  } = props;
-  const { img, sku, title, main_image_link } = dataItem;
-
-  return (
-    <Box className="wrap-main-item-result">
-      <Box className="box-top">
-        {!isHover && (
-          <Box className="box-icon-modal">
-            <Button
-              onClick={(e: any) => {
-                e.preventDefault();
-                onSearchImage(main_image_link);
-                // handlerToggleModal();
-              }}
-            >
-              <img
-                src={IconModalImage}
-                alt="icon_modal"
-                width={21}
-                height={21}
-              />
-            </Button>
-          </Box>
-        )}
-
-        <Box className="box-image">
-          <Button
-            style={{ width: "100%", height: "100%", padding: 0, zIndex: 9 }}
-            onClick={handlerToggleModal}
-          >
-            <img
-              src={img?.url ? img?.url : main_image_link}
-              alt="image_item"
-              className="img-style"
-            />
-          </Button>
-          {isHover && (
-            <Box className="box-hover">
-              <Button>View item</Button>
-            </Box>
-          )}
-        </Box>
-      </Box>
-      <Box
-        className="box-content"
-        display={"flex"}
-        style={{ flexDirection: "column" }}
-      >
-        <Box className="box-top">
-          <Grid container justifyContent="space-between">
-            <Grid item xs={10}>
-              <Typography className="text-f8 max-line-1">SKU: {sku}</Typography>
-              <Typography className="text-f9 text-bold max-line-3">
-                {title}
-              </Typography>
-            </Grid>
-            <Grid item>
-              <Button className="btn-item">
-                <img
-                  src={IconBookmark}
-                  alt="image_item"
-                  className="icon_action"
-                />
-              </Button>
-            </Grid>
-          </Grid>
-        </Box>
-
-        <Box className="box-bottom">
-          <Grid container justifyContent="space-between" alignItems="center">
-            <Grid item>
-              <Box display={"flex"} alignItems={"center"}>
-                <Button
-                  className="btn-item"
-                  onClick={() => handlerFeedback("like")}
-                >
-                  <img
-                    src={IconLike}
-                    alt="image_item"
-                    className="icon_action"
-                  />
-                </Button>
-                <Button
-                  className="btn-item"
-                  onClick={() => handlerFeedback("dislike")}
-                >
-                  <img
-                    src={IconDisLike}
-                    alt="image_item"
-                    className="icon_action"
-                  />
-                </Button>
-              </Box>
-            </Grid>
-            <Grid item>
-              <Box display={"flex"} alignItems={"center"}>
-                <Button className="btn-item" onClick={handlerToggleModalShare}>
-                  <img
-                    src={IconShare}
-                    alt="image_item"
-                    className="icon_action"
-                  />
-                </Button>
-                <Button className="btn-item">
-                  <Box
-                    className="box-gray text-center box-support"
-                    display={"flex"}
-                    justifyContent={"center"}
-                    alignItems={"center"}
-                  >
-                    <img
-                      src={IconSupport}
-                      alt="image_item"
-                      className="icon_support"
-                    />
-                  </Box>
-                </Button>
-              </Box>
-            </Grid>
-          </Grid>
-        </Box>
-      </Box>
-    </Box>
-  );
-}
-
-export default ItemResult;