react-feather#XCircle JavaScript Examples

The following examples show how to use react-feather#XCircle. 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: index.js    From docz-theme-extended with MIT License 5 votes vote down vote up 
icons = {
  default: Info,
  info: Info,
  warning: AlertTriangle,
  success: CheckCircle,
  danger: XCircle,
}
Example #2
Source File: CustomTable.jsx    From CRM with Apache License 2.0 5 votes vote down vote up 
CustomTable = ({ columns, data, title }) => {
  const tableIcons = {
    Add: forwardRef((props, ref) => <Plus {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <X {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <Trash {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => (
      <ChevronRight {...props} ref={ref} />
    )),
    Edit: forwardRef((props, ref) => <Edit2 {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <Save {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => (
      <Filter {...props} ref={ref} strokeWidth={1.5} width={15} />
    )),
    FirstPage: forwardRef((props, ref) => (
      <ChevronsLeft {...props} ref={ref} />
    )),
    LastPage: forwardRef((props, ref) => (
      <ChevronsRight {...props} ref={ref} />
    )),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => (
      <ChevronLeft {...props} ref={ref} />
    )),
    ResetSearch: forwardRef((props, ref) => <X {...props} ref={ref} />),
    Search: forwardRef((props, ref) => (
      <Search {...props} ref={ref} strokeWidth={1.5} width={18} />
    )),
    SortArrow: forwardRef((props, ref) => (
      <ChevronsDown {...props} ref={ref} />
    )),
    ThirdStateCheck: forwardRef((props, ref) => (
      <XCircle {...props} ref={ref} />
    )),
    ViewColumn: forwardRef((props, ref) => <Eye {...props} ref={ref} />),
  };

  return (
    <React.Fragment>
      <MaterialTable
        icons={tableIcons}
        columns={columns}
        data={data}
        title={title}
        options={{
          filtering: true,
          sorting: true,
          grouping: true,
          exportButton: true,
          headerStyle: {
            backgroundColor: "#3358f4",
            background: "linear-gradient(90deg, #3358f4, #1d8cf8)",
            color: "#FFF",
            backgroundRepeat: "no-repeat",
            textTransform: "uppercase",
          },
          rowStyle: (rowData) => ({
            backgroundColor: "rgb(0,0,0,0)",
          }),
        }}
      />
    </React.Fragment>
  );
}
Example #3
Source File: SearchBox.jsx    From vertx-web-site.github.io with Apache License 2.0 5 votes vote down vote up 
SearchBox = ({ onChange, onSubmit, onNext, onPrev, autoSuggest }) => {
  const [content, setContent] = useState("")
  const debounceOnChange = useRef(onChange ? debounce(onChange, 10) : undefined)
  const inputRef = useRef()
  const [focus, setFocus] = useState()

  const doSetContent = (value) => {
    setContent(value)
    if (!value) {
      if (onChange) {
        onChange(value)
        debounceOnChange.current(value)
      }
    } else {
      if (debounceOnChange.current) {
        debounceOnChange.current(value)
      }
    }
  }

  const internalOnChange = (e) => {
    doSetContent(e.currentTarget.value)
  }

  const onKeyDown = (e) => {
    if (e.key === "Enter" && onSubmit) {
      onSubmit()
      e.preventDefault()
    } else if (e.key === "Escape") {
      onDelete()
      e.preventDefault()
    } else if (e.key === "ArrowDown" && onNext) {
      onNext()
      e.preventDefault()
    } else if (e.key === "ArrowUp" && onPrev) {
      onPrev()
      e.preventDefault()
    }
  }

  const onDelete = () => {
    doSetContent("")
    inputRef.current.focus()
  }

  return (
    <div className={classNames("search", { "has-content": content !== "" })}>
      <input type="text" placeholder={(focus && autoSuggest) || ""} className="autosuggest" disabled />
      <input type="text" placeholder="Search..." value={content}
          onChange={internalOnChange} onKeyDown={onKeyDown} onFocus={() => setFocus(true)}
          onBlur={() => setFocus(false)} ref={inputRef} />
      <Search className="search-icon" />
      <XCircle className="search-icon-delete" onClick={() => onDelete()} />
      <style jsx>{styles}</style>
    </div>
  )
}
Example #4
Source File: SearchInput.js    From webDevsCom with MIT License 4 votes vote down vote up 
SearchInput = () => {
  const ResourceContext = useContext(resourceContext);
  const { setSearchText, searchText } = ResourceContext;
  const [placeholder, setPlaceholder] = useState('');

  const suggestions = [
    'brad traversy',
    'css',
    'react',
    'angular',
    'bradtraversy',
    'course',
    'university',
    'curated'
  ];

  // search placeholder text
  useEffect(() => {
    let timeout;
    const fillPlaceholder = (index, cursorPosition, callback) => {
      const text = suggestions[index];
      setPlaceholder(text.slice(0, cursorPosition));

      if (cursorPosition < text.length) {
        timeout = setTimeout(function () {
          fillPlaceholder(index, cursorPosition + 1, callback);
        }, 200);
        return true;
      }
      callback();
    };

    const clearPlaceholder = (callback) => {
      if (placeholder.length > 0) {
        timeout = setTimeout(function () {
          setPlaceholder('');
          clearPlaceholder(callback);
        }, 1000);
        return true;
      }
      callback();
    };

    const loopThroughSuggestions = (index) => {
      fillPlaceholder(index, 0, () => {
        timeout = setTimeout(function () {
          clearPlaceholder(function () {
            loopThroughSuggestions((index + 1) % suggestions.length);
          });
        }, 2000);
      });
    };

    loopThroughSuggestions(0);
    return () => clearTimeout(timeout);
    // eslint-disable-next-line
  }, []);

  return (
    <div
      className='field has-addons has-addons-centered fadeInUp'
      style={{ animationDelay: '.25s' }}
    >
      <p className='control has-icons-left box-shadow-lift'>
        <input
          className='input'
          type='text'
          onChange={(e) => setSearchText(e.target.value)}
          placeholder={'Search for ' + placeholder}
          value={searchText}
        />
        <span className='icon is-small is-left'>
          <Search color='#00d1b2' />
        </span>
      </p>
      <div className='control' id='clear'>
        <div
          className='button is-primary'
          disabled={searchText.trim() === '' ? true : false}
          onClick={e => setSearchText("")}
          style={{ backgroundColor: '#00d1b2' }}
        >
          <span className='icon is-small'>
            <XCircle />
          </span>
        </div>
      </div>
    </div>
  )
}
Example #5
Source File: del.js    From hivemind with Apache License 2.0 4 votes vote down vote up 
PopperCard = ({ el, poppers }) => {
  const data = el.data()
  const { user } = useUser()
  const [spinnerDisplay, setSpinnerDisplay] = useState('d-none')

  const handleSubmit = async (event) => {
    event.preventDefault()
    setSpinnerDisplay('d-block')

    const rootId = el.cy().nodes().id()
    const key = rootId.split('/')[1]
    const data = cy2rg([pick(el.data(), 'id', '_rev', '_key')]).nodes[0]
    const { ok, data: result, status } = await fetcher(
      '/api/nodes',
      user.token,
      'DELETE',
      JSON.stringify(data)
    )
    const options = {
      place: 'tr',
      autoDismiss: 7,
    }

    if (ok) {
      mutate([`/api/timeline/events?key=${key}`, user.token], null, true)
      mutate([`/api/mindmaps/${key}?timestamp=`, user.token], null, true)

      options.message = 'Deleted node(s)!'
      options.type = 'success'
    } else {
      options.message = `Failed to delete node(s)! - ${JSON.stringify(
        result || status
      )}`
      options.type = 'danger'
    }

    if (window.notify) {
      window.notify(options)
    }

    setSpinnerDisplay('d-none')

    removePopper(el.id(), `popper-${el.id()}`, poppers)
  }

  return (
    <Card className="border-dark">
      <CardBody>
        <CardTitle
          tag="h5"
          className="mw-100 mb-4"
          style={{ minWidth: '50vw' }}
        >
          Delete {data.title}
          <CloseButton
            divKey={`popper-${el.id()}`}
            popperKey={el.id()}
            poppers={poppers}
          />
        </CardTitle>
        <CardText tag="div" className="mw-100">
          <p>
            Are you sure? This will remove the selected node and ALL its
            descendants!
          </p>
          <Form onSubmit={handleSubmit} inline>
            <Row form>
              <Col xs={'auto'}>
                <FormGroup>
                  <Button color="danger" onClick={handleSubmit}>
                    <Trash2 /> Delete
                  </Button>
                </FormGroup>
              </Col>
              <Col xs={'auto'}>
                <FormGroup>
                  <Button
                    color="secondary"
                    onClick={() =>
                      removePopper(el.id(), `popper-${el.id()}`, poppers)
                    }
                  >
                    <XCircle /> Cancel
                  </Button>
                </FormGroup>
              </Col>
              <Col xs={'auto'}>
                <FormGroup>
                  <Spinner className={spinnerDisplay} />
                </FormGroup>
              </Col>
            </Row>
          </Form>
        </CardText>
      </CardBody>
    </Card>
  )
}