react-feather#Trash JavaScript Examples

The following examples show how to use react-feather#Trash. 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: ContextMenuOptions.js    From spotify-react with MIT License 6 votes vote down vote up 
export default function ContextMenuOptions(props) {
  const {navigateToPage, removeTrack} = props;
  const navigateToNextPage = () => navigateToPage(2);
  return (
    <ul className="track__menu-items" >
      <li className="track__menu-item" onClick={navigateToNextPage}>
        <Plus className="track__menu-icon"/> Add Track To Playlist
      </li>
      <li className="track__menu-item" onClick={removeTrack}>
        <Trash className="track__menu-icon"/> Remove From This Playlist
      </li>
    </ul>
  );
}
Example #2
Source File: index.js    From multistream with MIT License 6 votes vote down vote up 
function StreamMockup({ 
  keyid: id, 
  streamName, 
  type,
  endpoint, 
  streamKey, 
  handleRemove,
  handleEdit,}) {
  return (
  <Container>
    <Head>
      <h3>{streamName}</h3>
      <span>•</span>
      <Button type="button" onClick={() => {
        handleEdit({ id, name: streamName, endpoint, key: streamKey, type})
      }}>
        <Edit size={18} color="currentColor"/>
      </Button>
      <Button type="button" onClick={() => {
        handleRemove(id)
      }}>
        <Trash size={18} color="currentColor"/>
      </Button>
    </Head>
      <Input  disabled readOnly 
        value={`${endpoint}`}/>
      <Input disabled readOnly type="password" value={streamKey}/>
  </Container>);
}
Example #3
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>
  );
}