components#Share TypeScript Examples

The following examples show how to use components#Share. 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: FAB.tsx    From nuzlocke with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
function FAB(): JSX.Element {
  const { t } = useTranslation('tracker');
  const [open, setOpen] = useState(false);
  const handleClick = () => {
    setOpen((prevState) => !prevState);
  };
  const selectedGame = useStore(useCallback((state) => state.selectedGame, []));
  const games = useStore(useCallback((state) => state.games, []));
  return (
    <div className={styles.fab} data-testid="fab-tracker">
      {open && (
        <div className={styles.list}>
          <div className={styles.listItem}>
            <span className={styles.label}>{t('share')}</span>
            <Share
              disabled={!selectedGame}
              icon
              text={games[selectedGame?.value]?.encounters?.reduce(
                (str, enc, i) => {
                  const foundPokemon = POKEMAP.get(enc.pokemon);
                  return `${str}
      ${Number(i) + 1}. ${enc.location} - ${foundPokemon?.text || 'N/A'} - ${
                    enc.status?.text || 'N/A'
                  }`;
                },
                `Nuzlocke Encounter List
        `
              )}
            />
          </div>
          {selectedGame?.value && Number(selectedGame.value) <= MAX_GAME && (
            <div className={styles.listItem} data-testid="fab-add-edit-badges">
              <span className={styles.label}>{t('edit_badges')}</span>
              <BadgeEditor icon />
            </div>
          )}
          {selectedGame?.value && Number(selectedGame.value) > MAX_GAME && (
            <div className={styles.listItem} data-testid="fab-add-edit-badges">
              <span className={styles.label}>{t('edit_badges')}</span>
              <CustomBadgeEditor icon />
            </div>
          )}
          <div className={styles.listItem} data-testid="fab-add-encounter">
            <span className={styles.label}>{t('add_encounter')}</span>
            <AddEncounter icon />
          </div>
          <div className={styles.listItem} data-testid="fab-reset-encounters">
            <span className={styles.label}>{t('reset_encounters', { count: 2 })}</span>
            <ResetEncounters icon />
          </div>
        </div>
      )}
      <Button
        active={open}
        aria-label="tracker-options"
        className={styles.button}
        circular
        icon="cog"
        onClick={handleClick}
        toggle
        type="button"
      />
    </div>
  );
}
Example #2
Source File: Options.tsx    From nuzlocke with BSD 3-Clause "New" or "Revised" License 5 votes vote down vote up 
Options = React.memo(function Options() {
  const navigate = useNavigate();
  const text = useStore(useCallback((state) => state.text, []));
  const search = useStore(useCallback((state) => state.search, []));
  const selectedGame = useStore(useCallback((state) => state.selectedGame, []));
  const darkMode = useStore(useCallback((state) => state.darkMode, []));
  const games = useStore(useCallback((state) => state.games, []));
  const gens = useStore(useCallback((state) => state.gens, []));
  const setGens = useStore(useCallback((state) => state.setGens, []));
  const types = useStore(useCallback((state) => state.types, []));
  const setTypes = useStore(useCallback((state) => state.setTypes, []));

  const onSearchOptions = () => {
    navigate('/settings');
  };

  return (
    <div className={styles.options}>
      <div className={styles.searchBar}>
        <Button
          aria-label="search-options"
          className={styles.searchBarButton}
          data-testid="search-options"
          icon="wrench"
          inverted={darkMode}
          onClick={onSearchOptions}
          type="button"
        />
        <Filter
          darkMode={darkMode}
          values={{
            gens,
            search: text,
            setGens,
            setSearch: search,
            setTypes,
            types,
          }}
        />
      </div>
      <div className={styles.buttons}>
        <Share
          disabled={!selectedGame}
          text={games[selectedGame?.value]?.encounters?.reduce(
            (str, enc, i) => {
              const foundPokemon = POKEMAP.get(enc.pokemon);
              return `${str}
      ${Number(i) + 1}. ${enc.location} - ${foundPokemon?.text || 'N/A'} - ${
                enc.status?.text || 'N/A'
              }`;
            },
            `Nuzlocke Encounter List
        `
          )}
        />
        <AddEncounter />
        <ResetEncounters />
      </div>
    </div>
  );
})
Example #3
Source File: Rules.tsx    From nuzlocke with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up 
function Rules(): JSX.Element {
  const { t } = useTranslation('rules');
  const rules = useStore(useCallback((state) => state.rules, []));
  const reorderRule = useStore(useCallback((state) => state.reorderRule, []));
  const darkMode = useStore(useCallback((state) => state.darkMode, []));
  const selectedRuleset = useStore(useCallback((state) => state.selectedRuleset, []));
  const changeRuleset = useStore(useCallback((state) => state.changeRuleset, []));
  const addRuleset = useStore(useCallback((state) => state.addRuleset, []));
  const deleteRuleset = useStore(useCallback((state) => state.deleteRuleset, []));
  const deleteRule = useStore(useCallback((state) => state.deleteRule, []));
  const [rulesetName, setRulesetName] = useState('');
  const [addModal, setAddModal] = useState(false);
  const [confirm, setConfirm] = useState(false);

  const handleReorder = (rule: TRuleEntry, i: number, up: boolean) => {
    if (up) {
      reorderRule(i - 1, rule, i);
    } else {
      reorderRule(i + 1, rule, i);
    }
  };

  const handleRuleset = (e: React.SyntheticEvent<HTMLElement, Event>, data: DropdownProps) => {
    changeRuleset(data.value as string);
  };

  const handleAddRuleset = () => {
    addRuleset(rulesetName);
    setAddModal(false);
    setRulesetName('');
  };

  const handleCloseRulesetModal = () => {
    setAddModal(false);
    setRulesetName('');
  };

  const handleDeleteRuleset = () => {
    deleteRuleset();
    setConfirm(false);
    toast.success(t('delete_ruleset_success'));
  };

  return (
    <div className={styles.container}>
      <div className={styles.options}>
        {!!selectedRuleset && (
          <Share
            disabled={!selectedRuleset}
            text={rules[selectedRuleset]?.reduce(
              (str, rule, i) => {
                return `${str}
      ${Number(i) + 1}. ${getRuleContent(rule.content, rule.type) || 'N/A'}`;
              },
              `Ruleset
        `
            )}
          />
        )}
        <AddRule />
        <Dropdown
          aria-label="rules"
          className={styles.ruleSelect}
          data-testid="rule-select"
          inline
          lazyLoad
          onChange={handleRuleset}
          options={Object.keys(rules).map((key) => {
            return { key, text: key, value: key };
          })}
          placeholder={t('choose_ruleset')}
          selection
          value={selectedRuleset}
        />
        <Modal
          closeOnDimmerClick
          onClose={handleCloseRulesetModal}
          open={addModal}
          trigger={
            <Button
              aria-label="addruleset"
              className={styles.button}
              data-testid="add-ruleset"
              icon
              inverted={darkMode}
              onClick={() => setAddModal(true)}
              style={{ boxShadow: 'none' }}
              type="button"
            >
              <Icon name="plus" />
            </Button>
          }
        >
          <Modal.Content className={modalStyles.modal}>
            {t('please_ruleset')}
            <Input
              data-testid="add-ruleset-input"
              maxLength={50}
              onChange={(e, data) => setRulesetName(data.value)}
              value={rulesetName}
            />
            {!!rules[rulesetName] && <span style={{ color: 'red' }}>{t('ruleset_already')}</span>}
          </Modal.Content>
          <Modal.Actions>
            <Button onClick={handleCloseRulesetModal}>{t('cancel', { ns: 'common' })}</Button>
            <Button
              disabled={rulesetName?.length === 0 || !!rules[rulesetName]}
              onClick={handleAddRuleset}
              primary
            >
              {t('save', { ns: 'common' })}
            </Button>
          </Modal.Actions>
        </Modal>
        {!!selectedRuleset && !DEFAULT_RULESET_NAMES.includes(selectedRuleset) && (
          <Button
            aria-label="deleteruleset"
            className={styles.button}
            color="red"
            data-testid="delete-ruleset"
            icon
            inverted={darkMode}
            onClick={() => setConfirm(true)}
            style={{ boxShadow: 'none' }}
            type="button"
          >
            <Icon name="trash" />
          </Button>
        )}
        <Confirm
          cancelButton={t('cancel', { ns: 'common' })}
          closeOnDimmerClick
          content={t('confirm_deletion')}
          onCancel={() => setConfirm(false)}
          onConfirm={handleDeleteRuleset}
          open={confirm}
        />
      </div>
      <div className={styles.rules} data-testid="ruleslist">
        {rules[selectedRuleset]?.map((rule, i) => {
          return (
            <div className={styles.rule} key={`rule-${Number(i) + 1}`}>
              <div className={styles.reorder}>
                {i !== 0 && (
                  <Button
                    data-testid={`arrow-up-${i}`}
                    icon
                    inverted={darkMode}
                    onClick={() => handleReorder(rule, i, true)}
                    type="button"
                  >
                    <Icon name="arrow up" />
                  </Button>
                )}
                {i < (rules[selectedRuleset]?.length ?? 0) - 1 && (
                  <Button
                    data-testid={`arrow-down-${i}`}
                    icon
                    inverted={darkMode}
                    onClick={() => handleReorder(rule, i, false)}
                    type="button"
                  >
                    <Icon name="arrow down" />
                  </Button>
                )}
              </div>
              <RuleContent i={i} rule={rule} />
              <div className={styles.buttons}>
                {!rule.default && (
                  <>
                    <Button
                      aria-label="delete rule"
                      basic
                      compact
                      data-testid={`delete-rule-${i}`}
                      icon
                      inverted={darkMode}
                      onClick={() => deleteRule(i)}
                      type="button"
                    >
                      <Icon name="trash" />
                    </Button>
                    <RuleEditor content={rule.content} index={i} type={rule.type} />
                  </>
                )}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}