react-copy-to-clipboard#CopyToClipboard JavaScript Examples

RoomLinkButton = ({ link }) => {
  const { t } = useTranslation();
  const [copiedLinkToClipboard, setCopiedLinkToClipboard] = useState(false);

  return (
    <CopyToClipboard
      text={link}
      onCopy={() => {
        setCopiedLinkToClipboard(true);
      }}
    >
      <Button
        onBlur={() => setCopiedLinkToClipboard(false)}
        color={copiedLinkToClipboard ? "gray" : "yellow"}
      >
        {copiedLinkToClipboard ? t("playerId:copied") : t("playerId:copy-link")}
      </Button>
    </CopyToClipboard>
  );
}

function ComponentCode({ className, code }) {
  const theme = useTheme();

  return (
    <div
      className={className}
      css={{
        padding: `${theme.space[3]} ${theme.space[5]}`,
        "textarea:focus": {
          outline: "none",
        },
      }}
    >
      <LiveEditor />
      <CopyToClipboard text={code}>
        <button>Copy Code</button>
      </CopyToClipboard>
    </div>
  );
}

CopyButton = ({ link }) => {
  const dispatch = useDispatch();
  const handleShareButtonClick = () => {
    dispatch(setInfoPopupMessage('Copied queue link to clipboard'));
  };

  return (
    <CopyToClipboard text={link}>
      <StandardButton onClick={handleShareButtonClick} icon={<FileCopyIcon />}>
        Copy Queue Link
      </StandardButton>
    </CopyToClipboard>
  );
}

Heading = (props) => {
  const [copied, setCopied] = useState(false)
  const [location, setlocation] = useState(false)
  const Tag = 'h' + props.level

  useEffect(() => {
    setlocation(`${window.location.href}#${props.id}`)
  }, [props.id])

  return (
    <div className={`font-semibold my-5 text-${props.size}`}>
      <Tag id={props.id} className='inline-block'>
        {props.children}
      </Tag>
      <CopyToClipboard
        aria-hidden='true'
        text={location}
        onCopy={() => setCopied(true)}
      >
        <span
          className={
            copied
              ? 'hidden md:inline-block m-1 text-sm 2xl:text-base cursor-pointer'
              : 'hidden md:inline-block m-1 text-sm 2xl:text-base cursor-pointer text-transparent hover:text-gray-400'
          }
          title={_('Copy link')}
        >
          ¶
        </span>
      </CopyToClipboard>
    </div>
  )
}

AvatarWrapper = ({ name, playgroundColors, size, square, variant }) => {
  const [avatarName, setAvatarName] = useState(name);
  const handleFocus = (event) => event.target.select();
  const ref = useRef();
  const [copyValue, setCopyValue] = useState(name);

  useEffect(() => {
    if (ref.current) {
      const svgNode = ref.current.innerHTML;
      const svgStart = svgNode.indexOf('<svg');
      const svgEnd = svgNode.indexOf('</svg>') + 6;
      const svgResult = svgNode.substring(svgStart, svgEnd).toString();

      setCopyValue(svgResult);
    }
  }, [copyValue, variant, playgroundColors]);

  return (
    <AvatarContainer>
      <AvatarSection className="Avatar" ref={ref}>
        <Avatar
          name={avatarName}
          colors={playgroundColors}
          size={size}
          variant={variants[variant]}
          square={square}
        />
      </AvatarSection>
      <Input
        value={avatarName}
        onChange={(e) => setAvatarName(e.target.value)}
        onFocus={(e) => handleFocus(e)}
      />
      <CopyToClipboard text={copyValue}>
        <Button>Copy</Button>
      </CopyToClipboard>
    </AvatarContainer>
  );
}

WorkerStarter = props => {
  const { title, description, repo } = props
  const repoLink = `https://github.com/${repo}`
  const command = `wrangler generate my-app ${repoLink}`

  return (
    <div className="WorkerStarter">
      <div className="WorkerStarter--title">
        <AnchorLink className="Link" href={repoLink}>{title}</AnchorLink>
      </div>
      <div className="WorkerStarter--description">{description}</div>
      <div className="WorkerStarter--command">
        <div className="WorkerStarter--command-copy-button-wrapper">
          <CopyToClipboard text={command}>
            <button className="Button">Copy</button>
          </CopyToClipboard>
        </div>
        <div className="WorkerStarter--command-codeblock-wrapper">
          <CodeBlock lang="txt">{command}</CodeBlock>
        </div>
      </div>
    </div>
  )
}

DevButtonOverlay = ({ template }) => {
    const basePatternId = template?.fields?.basePattern?.length
        ? template?.fields?.basePattern[0]
        : ''
    const [idText, setIdText] = useState(basePatternId)

    useEffect(() => {
        if (!basePatternId?.length || idText === basePatternId) return
        setTimeout(() => setIdText(basePatternId), 1000)
    }, [idText, basePatternId])

    if (!basePatternId) return null

    return (
        <div className="absolute bottom-0 left-0 z-50 mb-4 ml-4 flex items-center space-x-2 opacity-0 transition duration-100 group-hover:opacity-100 space-x-0.5">
            <CopyToClipboard
                text={template?.fields?.basePattern}
                onCopy={() => setIdText(__('Copied!', 'extendify'))}>
                <button className="text-sm rounded-md border border-black bg-white py-1 px-2.5 font-medium text-black no-underline m-0 cursor-pointer">
                    {sprintf(__('Base: %s', 'extendify'), idText)}
                </button>
            </CopyToClipboard>
            <a
                target="_blank"
                className="text-sm rounded-md border border-black bg-white py-1 px-2.5 font-medium text-black no-underline m-0"
                href={template?.fields?.editURL}
                rel="noreferrer">
                {__('Edit', 'extendify')}
            </a>
        </div>
    )
}

function genAccordionButtons(props) {
  const { showDialog, send, sendable, buttons } = props;
  return buttons.map(button => {
    let onClick = button.dialog
      ? () => showDialog({ open: true, param: { ...button, send } })
      : () => send(button.text);
    return (
      <CopyToClipboard key={button.title} text={button.text}>
        <Button disabled={!sendable} variant="outlined" {...{ onClick }}>
          {button.title}
        </Button>
      </CopyToClipboard>
    );
  });
}

render() {
    const { text, onCopy } = this.props;
    return (
      <CopyToClipboard
        text={text}
        onCopy={() => {
          onCopy(text);
        }}
      >
        <Button className="copy" basic icon="copy" />
      </CopyToClipboard>
    );
  }

CreatedSuccesfully = ({ match }) => {
	const [Copy, setCopy] = useState('copy')
	return (
		<div id='created-quiz'>
			<div id='created-quiz-div'>
				<div id='message'>
					<h2 className='b'>Quiz Created Successfully!</h2>
					<p>Share the follwong code with your students</p>
				</div>
				<input
					type='text'
					// className='input-text'
					id={Copy}
					value={match.params.quizCode}
					disabled={true}
					// onChange={(e) => {}}
				/>
				<CopyToClipboard
					text={match.params.quizCode}
					onCopy={() => {
						setCopy('copied')
					}}
				>
					<button className='button wd-200'>
						{Copy === 'copy' ? 'Copy Code' : 'Code Copied!'}
					</button>
				</CopyToClipboard>
				<Link to={'/dashboard'}>
					<button className='button wd-200'>Dashboard</button>
				</Link>
			</div>
		</div>
	)
}

Index = memo(function Index(props) {

  const { TextArea } = Input;

  const [text,setText] = useState('Ant Simple Pro，简洁，美观，快速上手，组件丰富新的ui，简洁大方，支持vue3.0,ts+vue3.0,angular,react,react+ts,三大框架，5分钟快速搭建一个项目，简单上手快');

  const change = useCallback((val)=>{
    setText(val.target.value)
  })

  return (
    <PageLayout>
      <TextArea autoSize={{ minRows: 2 }}  defaultValue={text} onChange={change}  style={{
       marginBottom:'10px'
      }}/>
      <CopyToClipboard text={text}
          onCopy={() => message.success('复制成功,ctrl+v进行粘贴')}>
          <Button type='primary'>复制</Button>
        </CopyToClipboard>
    </PageLayout>
  )
})

BytesBadge = ({ bytes }) => {
  const shortened =
    typeof bytes === 'string'
      ? `${bytes.substring(0, 6)}…${bytes.substring(60)}`
      : ''

  const [copied, setCopied] = useState(false)
  const handleCopy = useCallback(() => setCopied(true), [])

  useEffect(() => {
    let interval
    if (copied) {
      interval = setInterval(() => {
        setCopied(false)
      }, 3000)
    }

    return () => clearInterval(interval)
  }, [copied])

  return (
    <CopyToClipboard text={bytes} onCopy={handleCopy}>
      <BadgeBase
        label={
          <>
            {copied && <IconCheck size="small" />}
            <BadgeText>{shortened}</BadgeText>
          </>
        }
      />
    </CopyToClipboard>
  )
}

function Copy ({ value, light }) {
  const [ open, setOpen ] = useState(false);

  return (
    <div className={styles.Copy}>
      <CopyToClipboard
        text={value}
        onCopy={() => setOpen(true)}
      >
        <div
          className={[
            styles.icon,
            light ? styles.light : ''
          ].join(' ')}>
          <FileCopyOutlined />
        </div>
      </CopyToClipboard>
      <Alert open={open} onClose={() => setOpen(false)}>
        Copied to clipboard!
      </Alert>
    </div>
  );
}

render() {
  const {address} = this.props;
  let addressDisplay = address.substr(0, 5) + "...." + address.substr(address.length - 6, address.length - 1);
    return (
      <div className="address-display-container">
        {addressDisplay} 
        <span className="copy-clipboard-icon">
          <CopyToClipboard text={address} onCopy={() => this.setState({copied: true})}>
            <FontAwesomeIcon icon={faClipboard}/>
          </CopyToClipboard>
        </span>
      </div>
      )
  }

CodeBlock = (props) => {
  return (
    <div style={{ position: "relative" }}>
      <CopyToClipboard text={props.content}>
        <IconButton
          style={{ position: "absolute", right: 0, top: 0 }}
          aria-label="copy"
          component="span"
        >
          <FileCopyOutlinedIcon />
        </IconButton>
      </CopyToClipboard>
      <div
        style={{
          minHeight: 50,
          backgroundColor: "black",
          paddingLeft: 15,
          paddingRight: 50,
          paddingBottom: 15,
          paddingTop: 15,
        }}
      >
        <SyntaxHighlighter language="javascript" style={tomorrowNightBright}>
          {props.content}
        </SyntaxHighlighter>
      </div>
    </div>
  );
}

export default function HTTPHeader({ type, path }) {
  const [copied, setCopy] = React.useState(false);
  React.useEffect(() => {
    if (copied) {
      setTimeout(() => setCopy(false), 3000);
    }
  }, [copied]);
  const BASE_URL = "https://top.gg/api/";
  const fullUrl = new URL(path, BASE_URL).href;
  const url = path;
  return (
    <HeaderWrapper method={type}>
      <Header>
        <MethodName method={type}>{type}</MethodName>
        <EndpointUrl
          dangerouslySetInnerHTML={{
            __html: url.replace(/:[a-z_]+/g, "<b>$&</b>"),
          }}
        />
      </Header>
      <CopyToClipboard text={fullUrl} onCopy={() => setCopy(true)}>
        <CopyButton method={type}>{copied ? "Copied!" : "Copy URL"}</CopyButton>
      </CopyToClipboard>
    </HeaderWrapper>
  );
}

ParticipantCard = (props) => {
  const classes = cardStyles();
  const location = useLocation();
  const url = `https://ourneighborhoodchef.com${location.pathname}`;
  const [copied, setCopied] = useState(false);

  return (
    <>
      <Card className={`${classes.root} ${classes.share}`}>
        <Typography variant="h6" align="left">
          Share
        </Typography>
        <CardContent
          style={{
            display: "flex",
            flexDirection: "column",
            padding: "5px",
          }}
        >
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              marginBottom: "10px",
            }}
          >
            {shareButtons.map((b) => {
              const TagName = Components[b.name];
              return (
                <span
                  key={b.name}
                  title={b.name}
                  className={cardStyles({ name: b.name }).shareButtons}
                >
                  <TagName url={url} hashtag="#neighborhoodchef" key={b.name}>
                    <b.icon fontSize="large" />
                  </TagName>
                </span>
              );
            })}
          </div>

          <div style={{ display: "flex" }}>
            <Typography
              variant="caption"
              style={{
                display: "flex",
                alignItems: "center",
              }}
            >
              Copy Link:
              <CopyToClipboard text={url} onCopy={() => setCopied(true)}>
                {copied ? (
                  <Typography
                    color="textSecondary"
                    style={{ marginLeft: "10px" }}
                  >
                    Copied!
                  </Typography>
                ) : (
                  <IconButton style={{ marginLeft: "10px" }}>
                    <LinkIcon fontSize="large" />
                  </IconButton>
                )}
              </CopyToClipboard>
            </Typography>
          </div>
        </CardContent>
      </Card>
    </>
  );
}

Dashboard = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(creators.getCurrentUser());
  }, [dispatch]);
  const user = useSelector((state) => state.user.user);
  const url = `${window.location.origin.toString()}/store/${
    user && user.storeName && user.storeName.toLowerCase().split(' ').join('-')
  }-${user && user._id}`;
  const storeLogo = user.imageUrl ? user.imageUrl : NoLogo;
  const copied = () => {
    message.success('url copied successfully');
  };
  return (
    <div className='mainDiv' data-testid='dashboardMainDiv'>
      <div className='dashboardHeader'>
        <div className='welcomeHeader'>
          Welcome, <br />
          <span className='name'>
            {user.ownerName ? user.ownerName : 'Seller'}!
          </span>
        </div>
        <div className='dashboardLogo'>
          <img src={storeLogo} alt='Store Logo' />
        </div>
      </div>
      <div className='storeUrl'>
        <p id='storeUrl' style={{ marginBottom: '1.3rem' }}>
          {user && url}
        </p>
        <CopyToClipboard text={url}>
          <span>
            <Button ghost onClick={copied}>
              Copy URL
            </Button>
          </span>
        </CopyToClipboard>
        <div className='share'>
          <FacebookShareButton url={user && url}>
            <FacebookIcon size={32} round />
          </FacebookShareButton>
          <TwitterShareButton url={user && url}>
            <TwitterIcon size={32} round />
          </TwitterShareButton>
          <LinkedinShareButton url={user && url}>
            <LinkedinIcon size={32} round />
          </LinkedinShareButton>
          <WhatsappShareButton url={user && url}>
            <WhatsappIcon size={32} round />
          </WhatsappShareButton>
          <EmailShareButton url={user && url}>
            <EmailIcon size={32} round />
          </EmailShareButton>
        </div>
      </div>
      <div className='dashDiv'>
        <Content storeId={user._id} currency={user.currency} />
      </div>
    </div>
  );
}

MsgDetailAddressBox = ({ addr, lat, lng }) => {
  return (
    <MsgDetailAdrsWrapper>
      <MsgDetailAdrsOuterWrapper>
        <MsgDetailAdrsInnerWrapper>
          <MsgDetailAdrsTitle>찾아가는 방법</MsgDetailAdrsTitle>
          <MsgDetailAdrsAddrestWrapper>
            <MsgDetailAdrsAddressTitle>주소</MsgDetailAdrsAddressTitle>
            <MsgDetailAdrsAddress>{addr}</MsgDetailAdrsAddress>
          </MsgDetailAdrsAddrestWrapper>
        </MsgDetailAdrsInnerWrapper>
        <CopyToClipboard text={addr}>
          <StButton>
            <MsgDetailAdrsButtonWrapper>
              <MsgDetailAdrsButtonInnerWrapper>
                <IoIosCopy />
                <MsgDetailAdrsButtonText>주소 복사하기</MsgDetailAdrsButtonText>
              </MsgDetailAdrsButtonInnerWrapper>
              <MdKeyboardArrowRight />
            </MsgDetailAdrsButtonWrapper>
          </StButton>
        </CopyToClipboard>
        <a
          href={`https://www.google.com/maps/place/${addr}/@${lat}/@${lng}`}
          target="_blank"
          rel="noopener noreferrer"
        >
          <StButton>
            <MsgDetailAdrsButtonWrapper>
              <MsgDetailAdrsButtonInnerWrapper>
                <MdLocationOn />
                <MsgDetailAdrsButtonText>
                  찾아가는 방법 보기
                </MsgDetailAdrsButtonText>
              </MsgDetailAdrsButtonInnerWrapper>
              <MdKeyboardArrowRight />
            </MsgDetailAdrsButtonWrapper>
          </StButton>
        </a>
      </MsgDetailAdrsOuterWrapper>
    </MsgDetailAdrsWrapper>
  );
}

function ReceiveModal(props) {
  const [state] = useContext(UserContext);
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    if (copied)
      setTimeout(() => {
        setCopied(false);
      }, 1500);
  }, [copied]);

  return (
    <div>
      <Modal
        size="lg"
        dialogClassName="modal-90w"
        centered
        className="modal_wrapper"
        show
        {...props}
      >
        <Modal.Header closeButton>
          <Header>
            <HeaderTitle>Receive on Polygon Nightfall</HeaderTitle>
          </Header>
        </Modal.Header>
        <Modal.Body style={{ padding: '0px' }}>
          <MyBody>
            <div>
              <QRCode value={state.compressedPkd} />
            </div>
            <p>Wallet Address</p>
            <span>{state.compressedPkd}</span>
            {copied ? (
              <MyFooter>
                <Lottie
                  style={{ height: '32px', width: '32px', margin: '20px' }}
                  animationData={checkMarkYes}
                  loop
                />
              </MyFooter>
            ) : (
              <CopyToClipboard text={state.compressedPkd} onCopy={() => setCopied(true)}>
                <MyFooter>
                  <QrCodeButton>Copy Address</QrCodeButton>
                </MyFooter>
              </CopyToClipboard>
            )}
          </MyBody>
        </Modal.Body>
      </Modal>
    </div>
  );
}

AddressAvatarButton = ({ fullAddress, address }) => {
  const theme = useContext(ThemeContext);
  return (
    <Tooltip
      title={
        <CopyToClipboard text={fullAddress}>
          <div
            style={{
              cursor: 'pointer',
              textAlign: 'center',
            }}
          >
            <div
              style={{
                fontSize: '0.9rem',
                fontWeight: '600',
                width: '152px',
              }}
            >
              {fullAddress}
            </div>
            <div style={{ paddingTop: '8px', fontSize: '0.8rem' }}>
              <I s="Click to copy" />
            </div>
          </div>
        </CopyToClipboard>
      }
      mouseEnterDelay={1}
    >
      <CopyToClipboard text={fullAddress}>
        <div
          style={{
            display: 'flex',
            cursor: 'pointer',
            alignItems: 'center',
            justifyContent: 'center',
            height: AppLayout.topNavBarHeight,
          }}
        >
          <MyBlockies seed={fullAddress} />

          <span
            style={{
              marginLeft: '12px',
              userSelect: 'none',
              color: theme.textWhite,
              fontSize: '0.9rem',
              fontWeight: '600',
            }}
          >
            {address}
          </span>
        </div>
      </CopyToClipboard>
    </Tooltip>
  );
}

render(){
        const { href } = this.state;

        return(
            <Wrapper>
                {/* TODO ADD URL */}
                <Row>
                    <FacebookShareButton url={href}>
                        <Icon src={'../../static/img/shareIcon/facebook.svg'} />
                    </FacebookShareButton>
                </Row>

                <Row>
                    <TwitterShareButton url={href}>
                        <Icon src={'../../static/img/shareIcon/twitter.svg'} />
                    </TwitterShareButton>
                </Row>

                <CopyToClipboard text={href}>
                    <Row onClick={this.handleClickOpen}>
                        <Icon src={'../../static/img/shareIcon/copy.svg'} />
                    </Row>
                </CopyToClipboard>

                <Dialog
                    open={this.state.clicked}
                    onClose={this.handleClose}
                    aria-labelledby='alert-dialog-title'
                    aria-describedby='alert-dialog-description'>
                    <DialogTitle id='alert-dialog-title'>
                        {'URL copied to clipboard'}
                    </DialogTitle>

                    <DialogContent>
                        <DialogContentText
                            id='alert-dialog-description'
                            style={{overflow: "hidden", textOverflow: "ellipsis"}}>
                            {href}
                        </DialogContentText>
                    </DialogContent>

                    <DialogActions>
                        <Button onClick={this.handleClose} variant='contained' color='primary'>
                            {'Ok'}
                        </Button>
                    </DialogActions>
                </Dialog>
            </Wrapper>
        )
    }

export default function Modal({ id, open, children, onClose }) {
  if (!open) return null;
  console.log(id);
  var url = getUrl(id);
  const notify = () => toast("Link Copied?");
  return (
    <>
      <ToastContainer
      toastStyle={{
        color: 'black',
        paddingLeft:'6rem'
      }}
        position="bottom-center"
        autoClose={1000}
        hideProgressBar={true}
        newestOnTop={true}
        closeOnClick
        pauseOnFocusLoss
        draggable
        pauseOnHover
      />
      <div style={OVERLAY_STYLES} />
      <div style={MODAL_STYLES}>
        <div className="modalTitle">
          <h1 className="h1">Share it on Social Media?</h1>
        </div>
        <div className="textarea_exp">
          <p className="link">{url}</p>
        </div>

        <div className="modalbutton">
          <Button 
            name="Close"
            onClick={onClose}
            color="red"
            />

          <CopyToClipboard text={url}>
            <Button
              name="Copy"
              onClick={notify}
              />
          </CopyToClipboard>

          {/* <button onClick={()=>{
                  window.open("https://www.facebook.com/sharer/sharer.php?u=","facebook-share-dialog","width=800,height=600")

              }} 
              className="end-buttons share-btn">
                  Share
              </button>

              <button onClick={()=>{
                  window.open( "https://twitter.com/intent/tweet?text=Check%20this%20out%20" ,
              "Twitter",
              "width=800,height=600")

              }} 
              className="end-buttons tweet-btn">
                  Tweet
              </button> */}
        </div>
      </div>
    </>
  );
  // document.getElementById('portal')
}

export default function Sidebar({ setTheme, theme }) {
  const [colors] = useQueryParam(URL_COLORS, StringParam);
  const [opacity] = useQueryParam(URL_OPACITY, StringParam);
  const [text, setText] = useState('');
  const [colorFormat, setColorFormat] = useState('rgba');

  useEffect(() => {
    const colorArray = getColorsArray(colors);
    setText(
      JSON.stringify(copyColor(colorArray, opacity, colorFormat), undefined, 4)
    );
  }, [colors, opacity, colorFormat]);

  const handleColorFormatChange = event => {
    setColorFormat(event.target.value);
  };

  return (
    <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
      <GlobalStyles />
      <div className="sidebar">
        <div className="sidebar-wrapper">
          <h1 className="logo">
            Raster<span>Playground</span>
          </h1>
          <div className="theme-switch-wrapper theme-toggle">
            <label
              className="switch"
              htmlFor="checkbox"
              title="Change color scheme"
            >
              <input
                type="checkbox"
                id="checkbox"
                onChange={() =>
                  themeToggler(theme === 'light' ? 'dark' : 'light', setTheme)
                }
                checked={theme === 'light' ? '' : 'checked'}
              />
              <div className="slider round"></div>
              <div className="toggle-sun">☀️</div>
              <div className="toggle-moon">?</div>
            </label>
          </div>
          <hr />
          <ShapeInput />
          <br />
          <br />
          <TilesInput />
          <br />
          <br />
          <ColorsInput />
          <br />
          <AlphaInput />
          <br />
          <br />
          <select
            id="color-format"
            defaultValue="rgba"
            onChange={event => handleColorFormatChange(event)}
          >
            <option value="hex">HEX</option>
            <option value="rgba">RGBA</option>
            <option value="hsla">HSLA</option>
          </select>
          <CopyToClipboard text={text}>
            <button className="copy-btn">Copy</button>
          </CopyToClipboard>
          <br />
          <JSONPretty
            id="json-pretty"
            data={text}
            theme={JSONPrettyMon}
          ></JSONPretty>
        </div>
      </div>
    </ThemeProvider>
  );
}

InputDialog = props => {
  const [param, dispatcher] = useReducer(paramReducer, {
    week: { data: "", error: false },
    boss: { data: "", error: false },
  });
  const { open, handleClose, sendable, disabled = [], required = [], title, text, send } = props;
  const [sendState, setSendState] = useState({ text: "", pass: true });

  useEffect(() => {
    dispatcher({ type: "INIT" });
  }, [text]);

  useEffect(() => {
    let message = text;
    let pass = true;
    Object.keys(param)
      .filter(key => disabled.indexOf(key) === -1)
      .forEach(key => {
        let isEmpty = param[key].data === "";
        let isError = param[key].error;
        let isRequired = required.indexOf(key) !== -1;

        if (!isEmpty && isError) pass = false;
        else if (isEmpty && isRequired) pass = false;
        else if (!isEmpty) message += ` ${param[key].data}`;
      });
    setSendState({ text: message, pass });
  }, [param, disabled, required]);

  return (
    <Dialog open={open} onClose={handleClose}>
      <DialogTitle>{title}</DialogTitle>
      <DialogContent>
        <DialogContentText>{sendState.text}</DialogContentText>
        <TextField
          fullWidth
          value={param.week.data}
          error={required.indexOf("week") !== -1 && param.week.error}
          label={"周次"}
          type="tel"
          disabled={disabled.indexOf("week") !== -1}
          onChange={e => dispatcher({ type: "WEEK", week: e.target.value })}
        />
        <TextField
          fullWidth
          value={param.boss.data}
          error={required.indexOf("boss") !== -1 && param.boss.error}
          label={"王"}
          type="tel"
          disabled={disabled.indexOf("boss") !== -1}
          onChange={e => dispatcher({ type: "BOSS", boss: e.target.value })}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose} color="primary">
          取消
        </Button>
        <CopyToClipboard text={sendState.text}>
          <Button
            onClick={() => send(sendState.text)}
            color="primary"
            autoFocus
            disabled={!sendState.pass || !sendable}
          >
            發送
          </Button>
        </CopyToClipboard>
      </DialogActions>
    </Dialog>
  );
}

export default function File({
  loading,
  list,
  handleRemove,
}) {
  const { isAdmin, user } = useContext(Context);
  const columns = useMemo(() => [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Date',
      dataIndex: 'createdAt',
      key: 'createdAt',
      render: createdAt => new Date(createdAt).toLocaleString(),
    },
    {
      title: '',
      key: 'op',
      width: 220,
      fixed: 'right',
      render: (text, record) => (
        <div>
          <Popover
            content={(
              <img
                alt="loading"
                style={{ width: 150, height: 150 }}
                src={cdnQrcode(record.key, 'file', isAdmin)}
              />
            )}>
            <Button style={{ marginLeft: 10 }}>
              <QrcodeOutlined />
            </Button>
          </Popover>
          {user && (
            <Popconfirm
              title="Are you sure to delete this ?"
              onConfirm={() => handleRemove(record.objectId)}
            >
              <Button style={{ marginLeft: 10 }} type="danger">
                <DeleteOutlined />
              </Button>
            </Popconfirm>
          )}
          <CopyToClipboard text={cdnUrl(record.key, 'file', isAdmin)}
            onCopy={() => message.success('Copied successfully')}>
            <Button style={{ marginLeft: 10 }} type="primary">Copy</Button>
          </CopyToClipboard>
        </div>
      ),
    },
  ], [handleRemove]);

  return (
    <Table
      loading={loading}
      dataSource={list}
      columns={columns}
      pagination={false}
    />
  );
}

Index = memo(function Index(props) {

  const MENU_ID = 'antSimplePro';

  const [ editData,setEditData ] = useSetState({visible:false,content:{
    title:'ant-simple-pro',
    describe:'简洁，美观，快速上手，支持3大框架；Concise, beautiful, quick to get started, support 3 big frameworks'
  }});

  const { show } = useContextMenu({
    id: MENU_ID,
  });

  const handleContextMenu=(event)=>{
      event.preventDefault();
      show(event, {
        props: {
            key: 'value'
        }
      })
  };

  const handleItemClick = ({ event, props },status) => {
    if( status === 1 ){
      setEditData({visible:true});
    }
  };

  return (
    <PageLayout>
      <div className='border svg-fontSize padding-10px' style={{textAlign:'center'}} onContextMenu={handleContextMenu}>
        <img src={Logo} alt="logo"/>
        <h2 className='padding-10px' style={{fontWeight:'bold',fontSize:'20px'}}>{editData.content.title}</h2>
        <section>{editData.content.describe}</section>
      </div>
      <Edit {...editData} callBack={setEditData}/>
    <Menu id={MENU_ID}>
      <Item onClick={(event)=>handleItemClick(event,1)}>编辑</Item>
      <Item>
        <CopyToClipboard text={editData.content.title}
          onCopy={() => message.success('复制成功,ctrl+v进行粘贴')}>
            <span>复制标题</span>
        </CopyToClipboard>
      </Item>
    </Menu>
    </PageLayout>
  )
})

render() {
    const {
      name,
      background,
      moreUrl,
      showingFullPalette,
      classes,
    } = this.props;
    const { copied } = this.state;
    return (
      <CopyToClipboard text={background} onCopy={this.changeCopyState}>
        <div style={{ background }} className={classes.ColorBox}>
          <div
            style={{ background }}
            className={classNames(classes.copyOverlay, {
              [classes.showOverlay]: copied,
            })}
          />
          <div
            className={classNames(classes.copyMessage, {
              [classes.showMessage]: copied,
            })}
          >
            <h1>copied!</h1>
            <p className={classes.copyText}>{background}</p>
          </div>
          <div>
            <div className={classes.boxContent}>
              <span className={classes.colorName}>{name}</span>
            </div>
            <button className={classes.copyButton}>Copy</button>
          </div>
          {showingFullPalette && (
            <Link to={moreUrl} onClick={(e) => e.stopPropagation()}>
              <span className={classes.seeMore}>MORE</span>
            </Link>
          )}
        </div>
      </CopyToClipboard>
    );
  }

AddressAvatarButton = ({ fullAddress, address }) => {
  const theme = useContext(ThemeContext);
  return (
    <Tooltip
      title={
        <CopyToClipboard text={fullAddress}>
          <div
            style={{
              cursor: "pointer",
              textAlign: "center",
            }}
          >
            <div
              style={{
                fontSize: "0.9rem",
                fontWeight: "600",
                width: "152px",
              }}
            >
              {fullAddress}
            </div>
            <div style={{ paddingTop: "8px", fontSize: "0.8rem" }}>
              <I s="Click to copy" />
            </div>
          </div>
        </CopyToClipboard>
      }
      mouseEnterDelay={1}
    >
      <CopyToClipboard text={fullAddress}>
        <div
          style={{
            display: "flex",
            cursor: "pointer",
            alignItems: "center",
            justifyContent: "center",
            height: AppLayout.topNavBarHeight,
          }}
        >
          <MyBlockies seed={fullAddress} />

          <span
            style={{
              marginLeft: "12px",
              userSelect: "none",
              color: theme.textWhite,
              fontSize: "0.9rem",
              fontWeight: "600",
            }}
          >
            {address}
          </span>
        </div>
      </CopyToClipboard>
    </Tooltip>
  );
}