react-icons/fi#FiX JavaScript Examples

Alert = ({ text, id, children, accent=false }) => {
    const [hidden, setHidden] = useState(true);
    
    useEffect(() => {
        const isHidden = localStorage.getItem(`alert-${id}`);

        if(!isHidden) setHidden(false);
    })

    const handleHide = () => {
        localStorage.setItem(`alert-${id}`, true);
        setHidden(true);
    }

    if (hidden) return null;

    return (
        <div className={`${styles.alert} ${accent ? styles.themed : ""}`}>
            {children}
            <p>{text}</p>
            <FiX onClick={handleHide} className={styles.close} title="Hide"/>
        </div>
    )
}

FeaturePromoter = ({children, art, promoId, disableHide=false}) => {
    const [hidden, setHidden] = useState(true);

    useEffect(() => {
        if(disableHide) {
            setHidden(false);
            return;
        }
        
        if(!promoId) return;

        const isHidden = localStorage.getItem(`featurePromo-${promoId}`);

        if(isHidden === null) setHidden(false);
    }, []);

    const handleHide = () => {
        setHidden(true);

        if(!promoId) return;

        localStorage.setItem(`featurePromo-${promoId}`, true);
    }

    if(hidden) return null;

    return (
        <div className={styles.container} id="deepBlue">
            {!disableHide && <button className={styles.hide} onClick={handleHide}><FiX/></button>}
            {art && <img src={art} draggable={false}/>}
            <div className={styles.slogan}>
               {children}
            </div>
        </div>
    )
}

function Drawer({show, onHide, ...props}) {
  const ref = useRef()

  useClickOutside(ref, () => {
    onHide()
  })

  return show ? (
    <Box
      style={{
        ...backgrounds(transparentize(0.2, theme.colors.black)),
        ...cover(),
        position: 'fixed',
        zIndex: 1300,
      }}
    >
      <Absolute
        bg={theme.colors.white}
        zIndex={1301}
        top={0}
        bottom={0}
        right={0}
        width={rem(360)}
        ref={ref}
        {...props}
      />
      <Absolute top="1em" right="1em" zIndex={1301}>
        <FiX
          color={theme.colors.muted}
          fontSize={theme.fontSizes.large}
          onClick={onHide}
          cursor="pointer"
        />
      </Absolute>
    </Box>
  ) : null
}

function ModalSuccess({ isOpen, toggleModal }) {


    return (

        <StyledModal
            isOpen={isOpen}
            onBackgroundClick={toggleModal}
            onEscapeKeydown={toggleModal}
        >
            <div className="modal-header">
                <h5 className="modal-title" id="exampleModalLabel">Success</h5>
                <button type="button" className="close" onClick={toggleModal}>
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div className="modal-body">
                <div className="icon">
                    <FiX size="5em"/>
                </div>
                <h1>Error !</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi eligendi numquam eveniet quidem nobis at quisquam blanditiis cum nihil nemo, alias assumenda soluta hic. Id mollitia error rem fugit dolor?</p>
            </div>
        </StyledModal>
    );

}

getTechnologyDataGrid = (order, openModal, setCurrentOrder) => {
	const {
		id,
		status,
		created_at,
		technology: { title, users },
	} = order;

	const owner = users?.find((user) => user?.pivot?.role === 'OWNER');
	const orderType = 'technology';

	return {
		id,
		title,
		institution: owner.institution.initials,
		responsible: owner?.full_name,
		status: {
			status,
			content: getDealStatusText(status),
		},
		orderDate: dateToString(created_at),
		type: 'T',
		actions: [
			{
				variant: 'gray',
				ariaLabel: 'Order details',
				icon: FiEye,
				onClick: () => openModal('technologyOrderDetails', { id }),
			},
			{
				variant: 'info',
				ariaLabel: 'Send message to technology owner',
				icon: FiMessageSquare,
				onClick: () => setCurrentOrder({ ...order, owner }),
			},
			{
				variant: 'remove',
				ariaLabel: 'Cancel order',
				icon: FiX,
				onClick: () => openModal('cancelOrder', { id, orderType }),
				disabled:
					status === dealStatusEnum.DEAL_CANCELLED ||
					status === dealStatusEnum.DEAL_STRUCK,
			},
		],
	};
}

getServiceDataGrid = (order, openModal, setCurrentOrder) => {
	const {
		id,
		status,
		created_at,
		service: { name, user },
	} = order;

	const orderType = 'service';

	return {
		id,
		title: name,
		institution: user.institution.initials,
		responsible: user.full_name,
		status: { status, content: getDealStatusText(status) },
		orderDate: dateToString(created_at),
		type: 'S',
		actions: [
			{
				variant: 'gray',
				ariaLabel: 'Order details',
				icon: FiEye,
				onClick: () => openModal('serviceOrderDetails', { id }),
			},
			{
				variant: 'info',
				ariaLabel: 'Send message to service owner',
				icon: FiMessageSquare,
				onClick: () => setCurrentOrder({ ...order, owner: user }),
			},
			{
				variant: 'remove',
				ariaLabel: 'Cancel order',
				icon: FiX,
				onClick: () => openModal('cancelOrder', { id, orderType }),
				disabled:
					status === dealStatusEnum.DEAL_CANCELLED ||
					status === dealStatusEnum.DEAL_STRUCK,
			},
		],
	};
}

getTechnologyDataGrid = (order, openModal, setCurrentOrder) => {
	const {
		id,
		status,
		created_at,
		user,
		technology: { title },
	} = order;

	const orderType = 'technology';

	return {
		id,
		title,
		buyer: user.full_name,
		status: {
			status,
			content: getDealStatusText(status),
		},
		orderDate: dateToString(created_at),
		type: 'T',
		actions: [
			{
				variant: 'gray',
				ariaLabel: 'Order details',
				icon: FiEye,
				onClick: () => openModal('technologyOrderDetails', { id }),
			},
			{
				variant: 'success',
				ariaLabel: 'Settle the deal',
				icon: FiCheck,
				onClick: () => openModal('settleDeal', { id, orderType }),
				disabled:
					status === dealStatusEnum.DEAL_STRUCK ||
					status === dealStatusEnum.DEAL_CANCELLED,
			},
			{
				variant: 'info',
				ariaLabel: 'Send message to the buyer',
				icon: FiMessageSquare,
				onClick: () => setCurrentOrder(order),
			},
			{
				variant: 'remove',
				ariaLabel: 'Cancel order',
				icon: FiX,
				onClick: () => openModal('cancelOrder', { id, orderType }),
				disabled:
					status === dealStatusEnum.DEAL_CANCELLED ||
					status === dealStatusEnum.DEAL_STRUCK,
			},
		],
	};
}

getServiceDataGrid = (order, openModal, setCurrentOrder) => {
	const {
		id,
		status,
		created_at,
		user,
		service: { name },
	} = order;

	const orderType = 'service';

	return {
		id,
		title: name,
		buyer: user.full_name,
		status: { status, content: getDealStatusText(status) },
		orderDate: dateToString(created_at),
		type: 'S',
		actions: [
			{
				variant: 'gray',
				ariaLabel: 'Order details',
				icon: FiEye,
				onClick: () => openModal('serviceOrderDetails', { id }),
			},
			{
				variant: 'success',
				ariaLabel: 'Settle the deal',
				icon: FiCheck,
				onClick: () => openModal('settleDeal', { id, orderType }),
				disabled:
					status === dealStatusEnum.DEAL_STRUCK ||
					status === dealStatusEnum.DEAL_CANCELLED,
			},
			{
				variant: 'info',
				ariaLabel: 'Send message to the buyer',
				icon: FiMessageSquare,
				onClick: () => setCurrentOrder(order),
			},
			{
				variant: 'remove',
				ariaLabel: 'Cancel order',
				icon: FiX,
				onClick: () => openModal('cancelOrder', { id, orderType }),
				disabled:
					status === dealStatusEnum.DEAL_CANCELLED ||
					status === dealStatusEnum.DEAL_STRUCK,
			},
		],
	};
}

Nav = ({
  breakpoint,
  isOpen,
  onNavClose = () => {},
  ...props
}) => {
  const theme = useTheme();
  const { pathname } = useLocation();

  const data = useStaticQuery(graphql`
    query NavPagesQuery {
      site {
        siteMetadata {
          currentYear
        }
      }
    }
  `);

  const currentYear = data.site.siteMetadata.currentYear;

  return (
    <Flex
      direction="column"
      alignItems={{ [breakpoint]: "flex-end" }}
      background={theme.gradients.brand}
      color="white"
      position="fixed"
      top="0"
      left="0"
      bottom="0"
      transform={{
        base: `translate(${isOpen ? 0 : "100%"})`,
        [breakpoint]: "none",
      }}
      transition={{ base: "transform 0.4s", [breakpoint]: "none" }}
      overflowY="auto"
      overflowX="none"
      zIndex="3"
      as="nav"
      {...props}
    >
      <Flex direction="column" flexGrow={1}>
        <IconButton
          variant="unstyled"
          aria-label="Menu"
          d={{ base: "inline-flex", [breakpoint]: "none" }}
          icon={<FiX />}
          size="lg"
          position="absolute"
          top="0"
          right="0"
          onClick={() => onNavClose()}
        />
        <Stack px="2">
          <Flex
            px="2"
            pt="4vh"
            pb="2vh"
            align="center"
            justify={{ base: "center", [breakpoint]: "flex-end" }}
          >
            <Link to={`/${currentYear}`}>
              <Logo w={{ base: "8rem", [breakpoint]: "12rem" }} />
            </Link>
          </Flex>
          <Stack>
            <NavLink isMain as={Link} to={`/${currentYear}`}>
              Édition {currentYear}
            </NavLink>
            {pathname.startsWith(withPrefix(`/${currentYear}`)) && (
              <>
                {/* <NavLink as={Link} to={`/${currentYear}/programme`}>
                  Programme
                </NavLink>
                <NavLink as={Link} to={`/${currentYear}/speakers`}>
                  Intervenants
                </NavLink> */}
                <NavLink as={Link} to={`/${currentYear}/sponsors`}>
                  Sponsors
                </NavLink>
                <NavLink as={Link} to={`/${currentYear}/organisateurs`}>
                  Organisateurs
                </NavLink>
                {/* <NavLink as={Link} to={`/${currentYear}/kit-de-presse`}>
                  Kit de presse
                </NavLink> */}
                <NavLink as={Link} to={`/${currentYear}/code-of-conduct`}>
                  Code de conduite
                </NavLink>
                <NavLink as={Link} to={`/${currentYear}/review-2020-2021`}>
                  Review 2020-2021
                </NavLink>
              </>
            )}
          </Stack>
          <Stack spacing="0">
            <NavLink isMain as={Link} to="/meetups">
              Meetups
            </NavLink>
            {pathname.startsWith(withPrefix("/meetups")) && (
              <>
                <NavLink as={Link} to="/meetups/sponsors">
                  Sponsors
                </NavLink>
              </>
            )}
          </Stack>
          <Stack>
            <NavLink isMain as={Link} to="/live" title="Live Twitch">
              <span role="img" aria-label="Red circle">
                ?
              </span>{" "}
              Live Stream
            </NavLink>
          </Stack>
          <Stack>
            <NavLink isMain as={Link} to="/devoxx4kids" title="Devoxx4Kids">
              Devoxx4Kids
            </NavLink>
          </Stack>
        </Stack>
        <Stack mt="auto" p="4" mb="2">
          <NavSocial />
          <NavPreviousYears />
        </Stack>
      </Flex>
    </Flex>
  );
}

function Nav() {
  const router = useRouter();
  const [ddShown, setDDShown] = useState(false);
  const navRef = useRef(null);

  let handleClickOut = (e) => {
    if (navRef.current && !navRef.current.contains(e.target)) {
      setDDShown(false);
      navRef.current.classList.remove("shown");
    }

    if (navRef.current && navRef.current.contains(e.target)) {
      setDDShown(false);
      setTimeout(() => {
        navRef.current.classList.remove("shown");
      }, 200);
    }
  };

  useEffect(() => {
    window.addEventListener("mousedown", handleClickOut);

    // cleanup this component
    return () => {
      window.removeEventListener("mousedown", handleClickOut);
    };
  }, []);

  let switchTheme = () => {
    let body = document.querySelector("body");

    if (body.classList.contains("light")) {
      localStorage.setItem("wiTheme", "dark");
      body.classList.replace("light", "dark");
    } else {
      localStorage.setItem("wiTheme", "light");
      body.classList.replace("dark", "light");
    }
  };

  const toggleDD = () => {
    if (ddShown) {
      navRef.current.classList.remove("shown");
    } else {
      navRef.current.classList.add("shown");
    }

    setDDShown(!ddShown);
  };

  return (
    <header>
      <div className={styles.brand}>
        <Link href="/">
          <a>winstall</a>
        </Link>
        {/* <span className="preview">&nbsp;(preview)</span> */}
      </div>

      <div className={styles.nav} ref={navRef}>
        <Link href="/apps">
          <a>
            <FiPackage />
            <p>Apps</p>
          </a>
        </Link>
        <Link href="/packs">
          <a>
            <FiGrid />
            <p>Packs</p>
          </a>
        </Link>
        <a
          href="https://ko-fi.com/mehedi"
          target="_blank"
          rel="noopener noreferrer"
          className={styles.justIcon}
        >
          <FiHeart />
          <p className={styles.ddOnly}>Support winstall</p>
        </a>
        <span onClick={switchTheme} className={styles.justIcon}>
          <FiMoon className="moon" />
          <FiSun className="sun" />
          <p className={styles.ddOnly}>Switch theme</p>
        </span>
        <User />
      </div>

      <span className={`mobileDD ${styles.dropdown}`} onClick={toggleDD}>
        {ddShown ? <FiX /> : <FiChevronDown />}
      </span>
    </header>
  );
}

export default function ButtonsPage() {
    useEffect(() => {
        document.title = 'Buttons'
    }, []);

    return (
        <>
            <div className="col-12 title">
                <h1>Tables</h1>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>State Buttons</h3>
                    </div>
                    <div className="card-body">
                        <Buttons className="wrap">
                            <Button className="danger">Danger</Button>
                            <Button className="warning">Warning</Button>
                            <Button className="info">Info</Button>
                            <Button className="success">Success</Button>
                            <Button className="primary">Primary</Button>
                            <Button className="light">Light</Button>
                            <Button className="dark">Dark</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>Circle Buttons</h3>
                    </div>
                    <div className="card-body">
                        <Buttons className="wrap">
                            <Button className="danger btn-circle">Danger</Button>
                            <Button className="warning btn-circle">Warning</Button>
                            <Button className="info btn-circle">Info</Button>
                            <Button className="success btn-circle">Success</Button>
                            <Button className="primary btn-circle">Primary</Button>
                            <Button className="light btn-circle">Light</Button>
                            <Button className="dark btn-circle">Dark</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>Shadow Buttons</h3>
                    </div>
                    <div className="card-body">
                        <Buttons className="wrap">
                            <Button className="danger btn-shadow">Danger</Button>
                            <Button className="warning btn-shadow">Warning</Button>
                            <Button className="info btn-shadow">Info</Button>
                            <Button className="success btn-shadow">Success</Button>
                            <Button className="primary btn-shadow">Primary</Button>
                            <Button className="light btn-shadow">Light</Button>
                            <Button className="dark btn-shadow">Dark</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>Button with Icon</h3>
                    </div>
                    <div className="card-body">
                        <Buttons className="wrap">
                            <Button className="danger btn-shadow"><FiX /> Danger</Button>
                            <Button className="warning btn-shadow"><FiAlertTriangle /> Warning</Button>
                            <Button className="info btn-shadow"><FiInfo />Info</Button>
                            <Button className="success btn-shadow"><FiCheckCircle /> Success</Button>
                            <Button className="primary btn-shadow"><FiCoffee /> Primary</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
            <div className="col-6 px-0">
                <Card className="red">
                    <div className="card-title">
                        <h3>Size Buttons</h3>
                    </div>
                    <div className="card-body">
                        <Buttons>
                            <Button className="danger btn-sm">Danger SM</Button>
                            <Button className="warning btn-sm">Warning SM</Button>
                            <Button className="success btn-sm">Success SM</Button>
                        </Buttons>
                        <Buttons>
                            <Button className="danger">Danger</Button>
                            <Button className="warning">Warning</Button>
                            <Button className="success">Success</Button>
                        </Buttons>
                        <Buttons>
                            <Button className="danger btn-lg">Danger LG</Button>
                            <Button className="warning btn-lg">Warning LG</Button>
                            <Button className="success btn-lg">Success LG</Button>
                        </Buttons>
                    </div>
                </Card>
            </div>
        </>
    );
}

function ModalExperience({ isOpen, toggleModal, submit }) {
    const [ error, setError ] = useState(false);
    const reference = useRef(null);

    const [ data, setData ] = useState({
        office: '',
        org: '',
        location: '',
        description: '',
    });

    function handleInputChange(e) {
        const { value, name } = e.target;

        setData({
            ...data,
            [name]: value
        });
    }

    function handleSubmit(e) {
        e.preventDefault();
        // alert(JSON.stringify(data))

        submit()
    }

    return (

        <StyledModal
            isOpen={isOpen}
            onBackgroundClick={toggleModal}
            onEscapeKeydown={toggleModal}
        >
            <div className="modal-header">
                <h5 className="modal-title" id="exampleModalLabel">Modal Form</h5>
                <button type="button" className="close" onClick={toggleModal}>
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <Form onSubmit={handleSubmit}>
                <div className="modal-body" ref={reference}>
                    {error === 1 && <Alert className="danger" text="Por favor, preencha todos os campos obrigatórios" />}
                    {error === 2 && <Alert className="danger" text="Por favor, preencha todos os campos obrigatórios" />}
                    {error === 3 && <Alert className="danger" text="Por favor, selecione uma data válida" />}
                    <div className="input-block">
                        <label className="required">Office <sup>*</sup></label>
                        <input
                            name="office"
                            type="text"
                            placeholder="Ex: Gerente de vendas..."
                            // value={}
                            onChange={handleInputChange}
                        />
                    </div>
                    <div className="input-block">
                        <label className="required">Business <sup>*</sup></label>
                        <input
                            name="org"
                            type="text"
                            placeholder="Ex: Microsoft..."
                            onChange={handleInputChange}
                        />
                    </div>

                    <div className="input-block">
                        <label>Location</label>
                        <input
                            name="location"
                            type="text"
                            placeholder="Ex: Rio de Janeiro..."
                            onChange={handleInputChange}
                        />
                    </div>
                    <div className="input-block">
                        <label>Description</label>
                        <textarea
                            name="description"
                            rows="5"
                            onChange={handleInputChange}
                        ></textarea>
                    </div>


                </div>
                <div className="modal-footer">
                    <button type="button" className="close" onClick={toggleModal}>
                        <FiX /> Close
                    </button>
                    <button type="submit" className="submit">
                        <FiCheckCircle /> Submit
                    </button>
                </div>
            </Form>
        </StyledModal>
    );

}

MyBookmarks = ({
	bookmarks,
	currentPage,
	totalPages,
	totalItems,
	itemsPerPage,
	currentSort,
	sortOptions,
}) => {
	const { t } = useTranslation(['helper', 'account']);
	const router = useRouter();

	/**
	 * Pushes new page number to next/router
	 *
	 * @param {string} page Page number.
	 */
	const handlePagination = (page) => {
		const { pathname, query } = router;
		query.page = page;

		router.push({
			pathname,
			query,
		});
	};

	/**
	 * Pushes new sort options to next/router
	 *
	 * @param {string} sortBy Grid column to sort items.
	 * @param {('ASC'|'DESC')} order Sort order.
	 * @returns {Promise<boolean>} Next router push
	 */
	const handleSortBy = (sortBy, order = currentSort.order || orderEnum.ASC) => {
		const { pathname, query } = router;

		delete query.page;

		const shouldOrderAsc = order === orderEnum.DESC && currentSort.by !== sortBy;
		query.order = shouldOrderAsc ? orderEnum.ASC : order;
		query.sortBy = sortBy;

		return router.push({
			pathname,
			query,
		});
	};

	return (
		<Container>
			<Protected>
				<UserProfile />
				<MainContentContainer>
					<Title align="left" noPadding noMargin>
						{t('account:titles.myBookmarks')}
					</Title>
					<MainContent>
						{bookmarks.length ? (
							<DataGrid
								data={bookmarks.map(({ id, title, status, slug }) => ({
									id,
									Título: title,
									Status: (
										<TechnologyStatus status={status}>
											{getTechnologyStatus(status)}
										</TechnologyStatus>
									),
									slug,
									Ações: (
										<TechnologyActions>
											<IconButton
												variant="gray"
												aria-label="Technology Details"
												// onClick={() => openModal()}
											>
												<FiEye />
											</IconButton>
											<IconButton
												variant="remove"
												aria-label="Unlike technology"
												disabled={status === technologyStatusEnum.REJECTED}
												// onClick={() => openModal()}
											>
												<FiX />
											</IconButton>
										</TechnologyActions>
									),
								}))}
								hideItemsByKey={['slug']}
								currentPage={currentPage}
								totalPages={totalPages}
								totalItems={totalItems}
								itemsPerPage={itemsPerPage}
								currentOrder={currentSort.order}
								sortOptions={sortOptions}
								handlePagination={handlePagination}
								handleSortBy={handleSortBy}
								rowLink="/t/:slug"
								enablePagination
							/>
						) : (
							<EmptyScreen message={t('account:messages.noBookmarksToShow')} />
						)}
					</MainContent>
				</MainContentContainer>
			</Protected>
		</Container>
	);
}