react-feather#XCircle JavaScript Examples

icons = {
  default: Info,
  info: Info,
  warning: AlertTriangle,
  success: CheckCircle,
  danger: XCircle,
}

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>
  );
}

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>
  )
}

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>
  )
}

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>
  )
}