react-icons/fi#FiX JavaScript Examples

The following examples show how to use react-icons/fi#FiX. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Alert.js    From winstall with GNU General Public License v3.0 6 votes vote down vote up 
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>
    )
}
Example #2
Source File: FeaturePromoter.js    From winstall with GNU General Public License v3.0 6 votes vote down vote up 
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>
    )
}
Example #3
Source File: drawer.js    From idena-web with MIT License 6 votes vote down vote up 
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
}
Example #4
Source File: modalError.js    From dashboard-reactjs with MIT License 6 votes vote down vote up 
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>
    );

}
Example #5
Source File: my-orders.js    From plataforma-sabia with MIT License 5 votes vote down vote up 
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,
			},
		],
	};
}
Example #6
Source File: my-orders.js    From plataforma-sabia with MIT License 5 votes vote down vote up 
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,
			},
		],
	};
}
Example #7
Source File: orders.js    From plataforma-sabia with MIT License 5 votes vote down vote up 
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,
			},
		],
	};
}
Example #8
Source File: orders.js    From plataforma-sabia with MIT License 5 votes vote down vote up 
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,
			},
		],
	};
}
Example #9
Source File: Nav.js    From codeursenseine.com with MIT License 4 votes vote down vote up 
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>
  );
}
Example #10
Source File: Nav.js    From winstall with GNU General Public License v3.0 4 votes vote down vote up 
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>
  );
}
Example #11
Source File: index.js    From dashboard-reactjs with MIT License 4 votes vote down vote up 
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>
        </>
    );
}
Example #12
Source File: modalForm.js    From dashboard-reactjs with MIT License 4 votes vote down vote up 
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>
    );

}
Example #13
Source File: bookmarks.js    From plataforma-sabia with MIT License 4 votes vote down vote up 
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>
	);
}