@ant-design/icons#AppstoreAddOutlined JavaScript Examples

The following examples show how to use @ant-design/icons#AppstoreAddOutlined. 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: Sidebar.jsx    From notence with MIT License 5 votes vote down vote up 
export function Sidebar({
  databases,
  currentDatabaseId,
  onChange,
  onDatabaseCreate,
  onDatabaseDelete,
}) {
  const isActive = (databaseId) => currentDatabaseId === databaseId;

  const handleDeleteBtnClick = (event, databaseId) => {
    event.stopPropagation();

    if (isActive(databaseId)) {
      onChange(null);
    }
    setTimeout(() => {
      onDatabaseDelete(databaseId);
    });
  };

  const [collapsed, setCollapsed] = useState(false);

  const collapseSider = () => {
    const isLg = window.matchMedia(devices.lg).matches;
    if (isLg) {
      return;
    }

    setCollapsed(true);
  };

  return (
    <Sider breakpoint="lg" collapsedWidth="0" collapsed={collapsed} onCollapse={setCollapsed}>
      <SideBarWrapper>
        <h2 className="title">
          Databases
          <AppstoreAddOutlined
            data-testid="add-btn"
            className="add-btn"
            onClick={() => onDatabaseCreate("Untitled")}
          />
        </h2>

        <DatabaseList>
          {Object.keys(databases).map((databaseId) => {
            const handleItemSelect = () => {
              onChange(databaseId);
              collapseSider();
            };

            return (
              <div
                data-testid={`${databaseId}-database-item`}
                role="button"
                onClick={handleItemSelect}
                onKeyPress={handleItemSelect}
                tabIndex={0}
                key={databaseId}
                className={`item ${isActive(databaseId) ? "active" : ""}`}
              >
                {databases[databaseId].name}
                <DeleteOutlined
                  data-testid={`${databaseId}-delete-btn`}
                  onClick={(event) => handleDeleteBtnClick(event, databaseId)}
                  className="delete-btn"
                />
              </div>
            );
          })}
        </DatabaseList>
      </SideBarWrapper>
    </Sider>
  );
}
Example #2
Source File: index.js    From Codelabz with Apache License 2.0 4 votes vote down vote up 
NewTutorial = ({ viewModal, onSidebarClick, viewCallback, active }) => {
  const firebase = useFirebase();
  const firestore = useFirestore();
  const dispatch = useDispatch();
  const history = useHistory();
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  const [formValue, setformValue] = useState({
    title: "",
    summary: "",
    owner: "",
  });

  const loadingProp = useSelector(
    ({
      tutorials: {
        create: { loading },
      },
    }) => loading
  );
  const errorProp = useSelector(
    ({
      tutorials: {
        create: { error },
      },
    }) => error
  );

  useEffect(() => {
    setLoading(loadingProp);
  }, [loadingProp]);

  useEffect(() => {
    setError(errorProp);
  }, [errorProp]);

  const organizations = useSelector(
    ({
      profile: {
        data: { organizations },
      },
    }) => organizations
  );

  const userHandle = useSelector(
    ({
      firebase: {
        profile: { handle },
      },
    }) => handle
  );

  const displayName = useSelector(
    ({
      firebase: {
        profile: { displayName },
      },
    }) => displayName
  );

  const allowOrgs = organizations && organizations.length > 0;

  const orgList =
    allowOrgs > 0
      ? organizations
          .map((org, i) => {
            if (org.permissions.includes(3) || org.permissions.includes(2)) {
              return org;
            } else {
              return null;
            }
          })
          .filter(Boolean)
      : null;

  useEffect(() => {
    setVisible(viewModal);
  }, [viewModal]);

  const onSubmit = (formData) => {
    formData.preventDefault();
    const tutorialData = {
      ...formValue,
      created_by: userHandle,
      is_org: userHandle !== formValue.owner,
    };
    console.log(tutorialData);
    createTutorial(tutorialData)(firebase, firestore, dispatch, history);
  };

  const onOwnerChange = (e) => {
    console.log(e.target.value);
    setformValue((prev) => ({
      ...prev,
      owner: e.target.value,
    }));
  };

  const handleChange = (e) => {
    const { name, value } = e.target;

    setformValue((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  return (
    <Modal
      open={visible}
      onClose={onSidebarClick}
      aria-labelledby="simple-modal-title"
      aria-describedby="simple-modal-description"
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <div
        data-testId="tutorialNewModal"
        style={{
          height: "auto",
          width: "auto",
          background: "white",
          padding: "2rem",
          maxWidth: "80%",
        }}
      >
        {error && (
          <Alert message={""} type="error" closable="true" className="mb-24">
            description={"Tutorial Creation Failed"}/
          </Alert>
        )}
        <form id="tutorialNewForm">
          <TextField
            prefix={
              <AppstoreAddOutlined style={{ color: "rgba(0,0,0,.25)" }} />
            }
            placeholder="Title of the Tutorial"
            autoComplete="title"
            name="title"
            variant="outlined"
            fullWidth
            id="newTutorialTitle"
            style={{ marginBottom: "2rem" }}
            onChange={(e) => handleChange(e)}
          />

          <TextField
            prefix={
              <AppstoreAddOutlined style={{ color: "rgba(0,0,0,.25)" }} />
            }
            fullWidth
            variant="outlined"
            name="summary"
            placeholder="Summary of the Tutorial"
            autoComplete="summary"
            id="newTutorialSummary"
            onChange={(e) => handleChange(e)}
            style={{ marginBottom: "2rem" }}
          />
          <Select
            onChange={onOwnerChange}
            fullWidth
            style={{ marginBottom: "2rem" }}
            value={formValue.owner}
            id="newTutorialSelect"
          >
            <MenuItem value={userHandle}>{displayName}</MenuItem>
            {orgList?.map((item) => {
              return (
                <MenuItem value={item.org_handle}>{item.org_name}</MenuItem>
              );
            })}
          </Select>

          <div className="mb-0">
            <div style={{ float: "right", marginTop: "-1rem" }}>
              <Button
                key="back"
                onClick={onSidebarClick}
                id="cancelAddTutorial"
              >
                Cancel
              </Button>
              <Button
                key="submit"
                type="primary"
                variant="contained"
                color="primary"
                htmlType="submit"
                loading={loading}
                onClick={(e) => onSubmit(e)}
                style={{ backgroundColor: "royalblue" }}
              >
                {loading ? "Creating..." : "Create"}
              </Button>
            </div>
          </div>
        </form>
      </div>
    </Modal>
  );
}
Example #3
Source File: AddNewStep.js    From Codelabz with Apache License 2.0 4 votes vote down vote up 
AddNewStepModal = ({
  viewModal,
  viewCallback,
  tutorial_id,
  steps_length,
  owner,
}) => {
  const firebase = useFirebase();
  const firestore = useFirestore();
  const dispatch = useDispatch();
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  const [title, setTitle] = useState("");
  const [time, setTime] = useState(0);

  useEffect(() => {
    clearCreateTutorials()(dispatch);
    return () => {
      clearCreateTutorials()(dispatch);
    };
  }, [dispatch]);

  const loadingProp = useSelector(
    ({
      tutorials: {
        create: { loading },
      },
    }) => loading
  );
  const errorProp = useSelector(
    ({
      tutorials: {
        create: { error },
      },
    }) => error
  );

  useEffect(() => {
    setLoading(loadingProp);
  }, [loadingProp]);

  useEffect(() => {
    setError(errorProp);
  }, [errorProp]);

  useEffect(() => {
    setVisible(viewModal);
  }, [viewModal]);

  useEffect(() => {
    if (loading === false && error === false) {
      setVisible(false);
      clearCreateTutorials()(dispatch);
    }
  }, [loading, error, dispatch]);

  const onSubmit = (e) => {
    e.preventDefault();

    const formData = {
      title,
      time,
    };
    const set_data = {
      ...formData,
      id: `${tutorial_id}_${new Date().getTime()}`,
      tutorial_id,
      owner,
    };
    addNewTutorialStep(set_data)(firebase, firestore, dispatch);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  return (
    <Modal
      title={`Add New Step`}
      open={visible}
      onClose={() => viewCallback()}
      onOk={() => viewCallback()}
      footer={false}
      destroyOnClose={true}
      maskClosable={false}
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Grid style={{ background: "white", padding: "2rem" }}>
        {error && (
          <Alert
            message={""}
            description={"Tutorial Creation Failed"}
            type="error"
            closable
            className="mb-24"
          />
        )}
        <form onSubmit={onSubmit}>
          <Input
            prefix={
              <AppstoreAddOutlined style={{ color: "rgba(0,0,0,.25)" }} />
            }
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Title of the Step"
            autoComplete="title"
            style={{ marginBottom: "2rem" }}
          />
          <TextField
            type="number"
            onChange={(e) => setTime(e.target.value)}
            placeholder="Time (minutes)"
            style={{ width: "100%" }}
          />
          <Button
            style={{ marginTop: "2rem" }}
            variant="contained"
            color="secondary"
            key="back"
            onClick={handleCancel}
          >
            Cancel
          </Button>
          <Button
            style={{ marginTop: "2rem" }}
            key="submit"
            type="primary"
            htmlType="submit"
            variant="contained"
            color="primary"
            loading={loading}
          >
            {loading ? "Creating..." : "Create"}
          </Button>
        </form>
      </Grid>
    </Modal>
  );
}