utils#copyToClipboard TypeScript Examples

The following examples show how to use utils#copyToClipboard. 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.tsx    From exevo-pan with The Unlicense 6 votes vote down vote up 
CopyButton = ({ className, copyString, ...props }: CopyButtonProps) => {
  const {
    translations: { common },
  } = useTranslations()

  const [clicked, setClicked] = useState(false)

  const handleClick = useCallback(
    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
      const { onClick } = props
      copyToClipboard(copyString)
      onClick?.(event)
      setClicked(true)
    },
    [copyString],
  )

  return (
    <button
      type="button"
      aria-label={
        clicked ? common.CopyButton.copiedLabel : common.CopyButton.toCopyLabel
      }
      className={clsx(
        'clickable bg-surface grid place-items-center overflow-hidden rounded',
        className,
      )}
      {...props}
      onClick={handleClick}
    >
      {clicked ? (
        <ValidIcon className="fill-green animate-rollIn h-6 w-6 p-[3px]" />
      ) : (
        <CopyIcon className="fill-onSurface h-6 w-6 p-[3px]" />
      )}
    </button>
  )
}
Example #2
Source File: utils.ts    From exevo-pan with The Unlicense 6 votes vote down vote up 
CopyToClipboard = (id: string): void =>
  copyToClipboard(
    `https://${window.location.hostname}${window.location.pathname}#${id}`,
  )
Example #3
Source File: index.tsx    From exevo-pan with The Unlicense 5 votes vote down vote up 
mockedCopyToClipboard = copyToClipboard as jest.MockedFunction<
  typeof copyToClipboard
>
Example #4
Source File: index.tsx    From exevo-pan with The Unlicense 5 votes vote down vote up 
jest.mock('utils', () => ({
  copyToClipboard: jest.fn(),
}))
Example #5
Source File: InviteMembers.tsx    From convoychat with GNU General Public License v3.0 4 votes vote down vote up 
InviteMembers: React.FC<IInviteMembers> = ({ roomId }) => {
  const [selectedMembers, setSelectedMembers] = useState<any>({});
  const { state, dispatch } = useModalContext();

  const { register, handleSubmit, errors: formErrors } = useForm<Inputs>();
  const onSubmit = async (data: Inputs) => {};

  const { data: allUsers } = useListUsersQuery();
  const [
    createInvitationLink,
    { data: invitationLink },
  ] = useCreateInvitationLinkMutation({});

  const [inviteMembers, { loading: isLoading }] = useInviteMembersMutation();

  const toggleMemberSelection = (member: IMember) => {
    if (selectedMembers[member.id]) {
      let copy = { ...selectedMembers };
      delete copy[member.id];
      setSelectedMembers({ ...copy });
    } else {
      setSelectedMembers({ ...selectedMembers, [member.id]: member });
    }
  };

  const closeModal = () => {
    dispatch({ type: "CLOSE", modal: "InviteMembers" });
  };

  useEffect(() => {
    if (state.isInviteMembersModalOpen) {
      createInvitationLink({ variables: { roomId } });
    }
  }, [state.isInviteMembersModalOpen, roomId]);

  const selectedMembersIds = Object.keys(selectedMembers);

  return (
    <Modal
      closeTimeoutMS={300}
      isOpen={state.isInviteMembersModalOpen}
      onRequestClose={closeModal}
      contentLabel="Create New Room"
      className="ModalContent"
      overlayClassName="ModalOverlay"
    >
      <h2>Invite Members</h2>
      <small className="textcolor--gray">yeah... yeah spam them</small>

      <Spacer gap="huge" />

      <Input
        type="text"
        icon={FaLink}
        postfixIcon={FaCopy}
        placeholder="invitation link"
        defaultValue={invitationLink?.invitation?.link}
        onPostfixIconClick={e => copyToClipboard(e.value)}
        label={
          <span>
            Copy Invitation Link{" "}
            <span className="textcolor--gray">(expires after 24hours)</span>
          </span>
        }
      />

      <Spacer gap="large" />

      <div>
        <Input
          type="text"
          name="username"
          label="Find Users"
          placeholder="bear grylls"
          icon={FaSearch}
          errors={formErrors}
          inputRef={register({ required: "Username is required" })}
        />

        {allUsers && (
          <MemberSelector
            members={allUsers?.users}
            selectedMembers={selectedMembers}
            onMemberClick={toggleMemberSelection}
          />
        )}

        <Spacer gap="xlarge" />

        <ButtonGroup gap="medium" float="right">
          <Button onClick={closeModal} variant="danger" icon={FaTimes}>
            Cancel
          </Button>
          <Button
            icon={FaPaperPlane}
            isLoading={isLoading}
            disabled={selectedMembersIds.length < 1}
            onClick={() => {
              inviteMembers({
                variables: { roomId, members: selectedMembersIds },
              });
            }}
          >
            Invite members ({selectedMembersIds.length})
          </Button>
        </ButtonGroup>
      </div>
    </Modal>
  );
}