antd#Collapse JavaScript Examples

PromptCard = (props) => {
	const prompt = props.data;

	return (
		<Collapse className="prompt-item" bordered={false}
			defaultActiveKey={[props.index === 0 ? prompt.id : null]}
		>
			<Panel header={prompt.question} key={prompt.id} style={{ textAlign: "left" }} extra={humanDate(prompt.created_at)}>
				<div className="prompt-desc">{prompt.description}</div>
				<TeamVideoList promptId={prompt.id} videos={prompt.videos} />
			</Panel>
		</Collapse >
	);
}

render() {
    const cardContent = `此页面是用来展示通过项目内埋点收集到的异常信息。你可以点击不同种类的异常按钮，来观察捕获到的异常信息。`;
    const { bugList } = this.props
    return (
      <div className="app-container">
        <TypingCard title="Bug收集" source={cardContent} />
        <br />
        <Collapse defaultActiveKey={["1"]}> 
          <Panel header="报错" key="1">
            <Button type="primary" onClick={this.jsError}>jsError</Button>
            <Button type="primary" onClick={this.loadResourceError} style={{marginLeft:"20px"}}>资源加载异常</Button>
          </Panel>
        </Collapse>
        <br />
        <Table
          bordered
          rowKey={(record) => record.timestamp}
          dataSource={bugList}
          pagination={false}
        >
          <Column title="序号" dataIndex="id" key="id" width={60} render={(text,record,index) => index+1}/>
          <Column title="监控指标" dataIndex="kind" key="kind" width={80} />
          <Column title="异常类型" dataIndex="errorType" key="errorType" width={160} />
          <Column title="url" dataIndex="url" key="url" width={150} />
          <Column title="异常信息" dataIndex="desc" key="desc" width={300} ellipsis={true}/>  
          <Column title="异常堆栈" dataIndex="stack" key="stack" width={300} ellipsis={true}/>  
          <Column title="操作元素" dataIndex="selector" key="selector" width={195} ellipsis={true}/>
          <Column title="userAgent" dataIndex="userAgent" key="userAgent" width={100} />
          <Column title="时间" dataIndex="timestamp" key="timestamp" width={100} render={(value) => timestampToTime(value)}/>
        </Table>
      </div>
    );
  }

render() {
    return (
      <div>
        <div className="mb-5">
          <h5 className="mb-3">
            <strong>Basic</strong>
          </h5>
          <Collapse defaultActiveKey={['1']} onChange={callback}>
            <Panel header="This is panel header 1" key="1">
              <p>{text}</p>
            </Panel>
            <Panel header="This is panel header 2" key="2">
              <p>{text}</p>
            </Panel>
            <Panel header="This is panel header 3" key="3" disabled>
              <p>{text}</p>
            </Panel>
          </Collapse>
        </div>
        <div className="mb-5">
          <h5 className="mb-3">
            <strong>Borderless</strong>
          </h5>
          <Collapse defaultActiveKey={['1']} onChange={callback} bordered={false}>
            <Panel header="This is panel header 1" key="1">
              <p>{text}</p>
            </Panel>
            <Panel header="This is panel header 2" key="2">
              <p>{text}</p>
            </Panel>
            <Panel header="This is panel header 3" key="3" disabled>
              <p>{text}</p>
            </Panel>
          </Collapse>
        </div>
      </div>
    )
  }

HtxCollapse = observer(({ item }) => {
  return (
    <Collapse bordered={item.bordered} accordion={item.accordion}>
      {Tree.filterChildrenOfType(item, "PanelModel").map(i => (
        <Panel key={i._value} header={i._value}>{Tree.renderChildren(i)}</Panel>
      ))}
    </Collapse>
  );
})

SingleComponentMultipleDataContainer = (props) => {
  const {
    defaultActiveKey, inputsList, baseComponentRenderer,
  } = props;

  return (
    <Collapse defaultActiveKey={defaultActiveKey}>
      {
        inputsList.map(({ key, headerName, params }) => (
          <Panel header={headerName} key={key}>
            {baseComponentRenderer(params)}
          </Panel>
        ))
      }
    </Collapse>
  );
}

storiesOf('antd/collapse', module).add('accordion', () => 
  <Collapse accordion>
    <Panel header="This is panel header 1" key="1">
      <p>{text}</p>
    </Panel>
    <Panel header="This is panel header 2" key="2">
      <p>{text}</p>
    </Panel>
    <Panel header="This is panel header 3" key="3">
      <p>{text}</p>
    </Panel>
  </Collapse>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>In accordion mode, only one panel can be expanded at a time.</p></>) } });

{ Panel } = Collapse

{ Panel } = Collapse

{ Panel } = Collapse

{ Panel } = Collapse

{ Panel } = Collapse

function AppFaq() {
    return (
        <div id="faq" className="block faqBlock">
            <div className="container-fluid">
                <div className="titleHolder">
                    <h2>Frequently Asked Questions</h2>
                    <p>This are some of the frequently asked question</p>
                </div>
                <Collapse defaultActiveKey={["1"]}>
                    <Panel
                        header="How can I access my Portfolyo after completion?"
                        key="1"
                    >
                        <p>
                            We'll provide you the link where your portfolyo is
                            hosted once you are finished building! (Watch the
                            walk-though for aditional information).
                        </p>
                    </Panel>
                    <Panel header="How to customize components?" key="2">
                        <p>
                            We have an edit option for you to edit at each and
                            every component.
                        </p>
                    </Panel>
                    <Panel
                        header="Can we use Mobile or small screen devices to make my portfolio?"
                        key="3"
                    >
                        <p>
                            We highly recommend you to use any larger screen
                            devices such as laptop (or) tablets, because some of
                            the editing features might break in small screen
                            devices!
                        </p>
                    </Panel>
                    <Panel
                        header="How much is the cost to build and deploy my personnel portfolio?"
                        key="4"
                    >
                        <p>
                            You can build and deploy you portfolio's for
                            absolutely free of cost on our website!
                        </p>
                    </Panel>
                    <Panel header="Can I make more than one Portfolio?" key="5">
                        <p>
                            Yes you can make more than one portfolio!
                        </p>
                    </Panel>
                </Collapse>
                <div className="quickSupport">
                    <h3>Want quick support?</h3>
                    <p>
                        Please send an message to our Email provided below ⬇️
                    </p>
                    <Button type="primary" size="large">
                        <i className="fas fa-envelope"></i> Email your question
                    </Button>
                </div>
            </div>
        </div>
    );
}

{ Panel } = Collapse

{ Panel } = Collapse

{ Panel } = Collapse

{ Panel } = Collapse

Panel = Collapse.Panel

render() {
    return (
      <Collapse
        style={{
          margin: 0,
          marginBottom: '16px'
        }}
        onChange={this.callback}
        // activeKey={this.state.activeKey}
        activeKey={this.props.collapseKey}
      >
        <Panel
          header={
            <span>
              {' '}
              选择测试用例环境
              <Tooltip title="默认使用测试用例选择的环境">
                {' '}
                <Icon type="question-circle-o" />{' '}
              </Tooltip>
            </span>
          }
          key="1"
        >
          <div className="case-env">
            {this.props.envList.length > 0 && (
              <div>
                {this.props.envList.map(item => {
                  return (
                    <Row
                      key={item._id}
                      type="flex"
                      justify="space-around"
                      align="middle"
                      className="env-item"
                    >
                      <Col span={6} className="label">
                        <Tooltip title={item.name}>
                          <span className="label-name">{item.name}</span>
                        </Tooltip>
                      </Col>
                      <Col span={18}>
                        <Select
                          style={{
                            width: '100%'
                          }}
                          value={this.props.envValue[item._id] || ''}
                          defaultValue=""
                          onChange={val => this.props.currProjectEnvChange(val, item._id)}
                        >
                          <Option key="default" value="">
                            默认环境
                          </Option>

                          {item.env.map(key => {
                            return (
                              <Option value={key.name} key={key._id}>
                                {key.name + ': ' + key.domain}
                              </Option>
                            );
                          })}
                        </Select>
                      </Col>
                    </Row>
                  );
                })}
              </div>
            )}
          </div>
        </Panel>
      </Collapse>
    );
  }

{ Panel } = Collapse

render(){
    const cardContent = ` <ul class="card-ul">
            <li>对复杂区域进行分组和隐藏，保持页面的整洁</li>
            <li>手风琴 是一种特殊的折叠面板，只允许单个内容区域展开</li>
          </ul>`
    return (
      <div>
        <CustomBreadcrumb arr={['显示','折叠面板']}/>
        <TypingCard source={cardContent} height={178}/>
        <Row gutter={16}>
          <Col span={12}>
            <Card bordered={false} className='card-item' title='基本用法'>
              <Collapse defaultActiveKey={['1']}>
                <Panel header="This is panel header 1" key="1"><p>{text}</p></Panel>
                <Panel header="This is panel header 2" key="2"><p>{text}</p></Panel>
                <Panel header="This is panel header 3" key="3"><p>{text}</p></Panel>
              </Collapse>
            </Card>
            <Card bordered={false} className='card-item' title='简洁风格-无边框'>
              <Collapse defaultActiveKey={['1']} bordered={false}>
                <Panel header="This is panel header 1" key="1">{text2}</Panel>
                <Panel header="This is panel header 2" key="2">{text2}</Panel>
                <Panel header="This is panel header 3" key="3">{text2}</Panel>
              </Collapse>
            </Card>
          </Col>
          <Col span={12}>
            <Card bordered={false} className='card-item' title='手风琴-每次只打开一个tab'>
              <Collapse defaultActiveKey={['2']} accordion>
                <Panel header="This is panel header 1" key="1"><p>{text}</p></Panel>
                <Panel header="This is panel header 2" key="2"><p>{text}</p></Panel>
                <Panel header="This is panel header 3" key="3"><p>{text}</p></Panel>
              </Collapse>
            </Card>
            <Card bordered={false} className='card-item' title='自定义面板'>
              <Collapse defaultActiveKey={['1']} bordered={false}>
                <Panel header="This is panel header 1" key="1" style={styles.customPanelStyle}><p>{text}</p></Panel>
                <Panel header="This is panel header 2" key="2" style={styles.customPanelStyle}><p>{text}</p></Panel>
                <Panel header="This is panel header 3" key="3" style={styles.customPanelStyle}><p>{text}</p></Panel>
              </Collapse>
            </Card>
          </Col>
        </Row>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }

{ Panel } = Collapse

{ Panel } = Collapse

{ Panel } = Collapse

{ Panel } = Collapse

{ Panel } = Collapse

{ Panel } = Collapse

{ Panel } = Collapse

{ Panel } = Collapse

FollowTelegram = ({
    setSelectedForm
  }) => {
  const rewardsArr = ['+5', '+10', '+15']
  const [showInput, setShowInput] = React.useState(false)
  const [allowNext, setAllowNext] = useState(true)
  const [clicked, setClicked] = useState({
    1 : true,
    2 : true,
    3 : true,
    4 : true,
    5 : true,
    6 : true
  })
  const [followed, setFollowed] = useState({
    1 : false,
    2 : false,
    3 : false,
    4 : false,
    5 : false,
  })
  const [open, setOpen] = useState([]);
  const [count, setCount] = useState(0);

  const onClick = () => setShowInput(true)

  const handlePanelClose = () => {
    setOpen([]);
  };

  const onLinkClick = (n) => {
    const val = !clicked[n]
    setClicked(prev => ({...prev, [n] : val}))
  }

  const handleFollow = (idx) => {
    const val = !followed[idx]
    setFollowed(prev => ({...prev, [idx] : val}))
    setCount(prev => prev + 1)
  }

  useEffect(() => {
    if(count >= 2) setAllowNext(false)
  }, [count]);
  
  const links = [
    "https://t.me/acyfinance", 
    "https://t.me/ACYFinanceChannel"
  ]

  const buttonStyle1 = {
    backgroundColor: "#c6224e", 
    width: 'auto', 
    color: 'white', 
    height: "2em", 
    fontSize:'15px', 
    display:'flex', 
    justifyContent:'center', 
    alignItems:'center',
  }

  const buttonStyle2 = {
    backgroundColor: "#c6224e", 
    width: 'auto', 
    color: 'white', 
    height: "2em", 
    fontSize:'15px', 
    display:'flex', 
    justifyContent:'center', 
    alignItems:'center',
    margin:'10px 0'
  }

  const StyledInput = styled.input`
  font-size: 15px;
  background-color: inherit;
  color: lighten(#000000, 100%);
  width: 95%;
  border-width: 1px;
  align-self: center;
  line-height: 30px;
  border-right: 0px solid transparent;
  border-top: 0px solid transparent;
  border-left: 0px solid transparent;
  margin-bottom: 10px;
  &:focus {
    outline-width: 0;
    filter: brightness(75%);
  }
`;

  const errorText = {
    color:'#e53e3e',
    fontFamily:'Inter, sans-serif'
  }

  const { Panel } = Collapse;

  // api
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [hasError, setHasError] = useState(false);
  const [errorMsg, setErrorMsg] = useState("An error occured");
  const [success, setSuccess] = useState(false);

  let subscribe = useCallback(() => {
    setHasError(false);
    console.log("Subscribe!");
    if (!name.length || !email.length) {
      setHasError(true);
      setErrorMsg("Fields cannot be empty");
      return;
    }
    // eslint-disable-next-line no-undef
    axios
      .post("/api/subscribe/add", {
        name,
        email,
      })
      .then((res) => {
        setHasError(false);
        setSuccess(true);
      })
      .catch((e) => {
        setHasError(true);
        setErrorMsg(e.response.data || "Error");
      });
  }, [name, email]);
  
  return (
    <div className={styles.telegramBox}>
      <div className={styles.telegramContainer}>
        <div className={styles.telegramLinks}>
          <Collapse 
            className={styles.myCollapse} 
            ghost 
            activeKey={open}
            accordion
            onChange={(panelKey) => setOpen(prev => [panelKey])}
            expandIcon={
              ({ isActive, isFollowed, panelKey }) => !isFollowed ? 
                    ( 
                      isActive ? 
                      <Icon type="down" /> 
                      :
                      <div className={styles.themeBox}>
                        <span style={{color:'#29292c', fontWeight: '500'}}>{panelKey === "1" ? rewardsArr[0] : (panelKey === "6" ? rewardsArr[2] : rewardsArr[1])}</span>
                      </div>
                    )
                  :
                  <Icon type="check" />
            }
            expandIconPosition='right'
          >
            <Panel 
              header={
                <div style={{width:'85%', display:'inline-flex', alignItems:'left'}}>
                  <img src={userIcon} alt="" style={{height:'1.5em', width:'auto', objectFit:'contain', margin: '0 7px 0 0', float:'left'}} />
                  <span>Enter your Username and Email</span>
                </div>
              }
              key="1"
              disabled={followed[1]}
            >
              <div className={styles.emailContainer}>
                <div>
                  <InputEmail />
                </div>
              </div>
            </Panel>
            <Panel 
              header={
                <div style={{width:'85%', display:'inline-flex', alignItems:'left'}}>
                  <img src={telegramIcon} alt="" style={{height:'1.5em', width:'auto', objectFit:'contain', margin: '0 7px 0 0', float:'left'}} />
                  <span>Join ACY Telegram Group</span>
                </div>
              } 
              key="2"
              isFollowed={followed[2]}
              disabled={followed[2]}
            >
              <Row type='flex' align='middle' justify='space-around'>
                <Button className={styles.taskBtn} href={links[0]} target="_blank" style={buttonStyle1} onClick={() => {onLinkClick(1); onClick();}}>
                  <Icon type="link" style={{ color: '#fff' }} theme="outlined" />
                  Join
                </Button>
                <Tooltip title="Visit the link to continue">
                  <Button className={styles.taskBtn} onClick={() => {handleFollow(2); handlePanelClose();}} style={buttonStyle1} disabled={clicked[1]}>Continue</Button> 
                </Tooltip>
              </Row>
            </Panel>
            <Panel 
              header={
                <div style={{width:'85%', display:'inline-flex', alignItems:'left'}}>
                  <img src={telegramIcon} alt="" style={{height:'1.5em', width:'auto', objectFit:'contain', margin: '0 7px 0 0', float:'left'}} />
                  <span>Join ACY Telegram Channel</span>
                </div>
              }
              key="3"
              isFollowed={followed[3]}
              disabled={followed[3]}
            >
              <Row type='flex' align='middle' justify='space-around'>
                <Button className={styles.taskBtn} href={links[1]} target="_blank" style={buttonStyle1} onClick={() => {onLinkClick(2); onClick();}}>
                  <Icon type="link" style={{ color: '#fff' }} theme="outlined" />
                  Subscribe
                </Button>
                <Tooltip title="Visit the link to continue">
                  <Button className={styles.taskBtn} onClick={() => {handleFollow(3); handlePanelClose();}} style={buttonStyle1} disabled={clicked[2]}>Continue</Button> 
                </Tooltip>
              </Row>
            </Panel>
            <Panel 
              header={
                <div style={{width:'55%', display:'inline-flex', alignItems:'left'}}>
                  <img src={twitterBIcon} alt="" style={{height:'1.5em', width:'auto', objectFit:'contain', margin: '0 7px 0 0', float:'left'}} />
                  <span>Follow ACY Twitter</span>
                </div>
              } 
              key="4"
              isFollowed={followed[4]}
              disabled={followed[4]}
            >
              <Row type='flex' align='middle' justify='space-around'>
                <a 
                  href="https://twitter.com/intent/follow?https://twitter.com/CycanNetwork&screen_name=CycanNetwork" 
                  target="_blank"
                  rel="noreferrer"
                  className={styles.twitterbtn}
                  onClick={() => {onLinkClick(3); onClick();}}
                  data-size="large" 
                  data-lang="en" 
                  data-show-count="false"
                >
                  <img src={twitterWIcon} alt="" style={{height:'1.5em', width:'auto', objectFit:'contain', margin: '0 7px 0 0', float:'left'}} />
                  <span style={{marginRight:'5px'}}>Follow @ACYFinance</span>
                </a>
                <script async src="https://platform.twitter.com/widgets.js" charset="utf-8" /> 
                <Tooltip title="Visit the link above to continue">
                  <Button className={styles.taskBtn} onClick={() => {handleFollow(4); handlePanelClose();}} style={buttonStyle1} disabled={clicked[3]}>Continue</Button> 
                </Tooltip>
              </Row>
            </Panel>
            <Panel 
              header={
                <div style={{width:'60%', display:'inline-flex', alignItems:'left'}}>
                  <img src={twitterBIcon} alt="" style={{height:'1.5em', width:'auto', objectFit:'contain', margin: '0 7px 0 0', float:'left'}} />
                  <span>Retweet ACY Twitter</span>
                </div>
              } 
              key="5"
              isFollowed={followed[5]}
              disabled={followed[5]}
            >
              <Row type='flex' align='middle' justify='space-around'>
                {/* <a 
                  className={styles.twitterbtn}
                  href="https://twitter.com/intent/retweet?tweet_id=1458721380027928582"
                  target="_blank"
                  rel="noreferrer"
                  onClick={() => {onLinkClick(4); onClick();}}
                  data-size="large"
                >
                  <img src={twitterRetweetIcon} alt="" style={{height:'1.5em', width:'auto', objectFit:'contain', margin: '0 7px 0 0', float:'left'}} />
                  <span style={{marginRight:'5px'}}>Retweet</span>
                </a> */}
                <TwitterComponent />
                <Tooltip title="Visit the link above to continue">
                  <Button className={styles.taskBtn} onClick={() => {handleFollow(5); handlePanelClose();}} style={buttonStyle1} disabled={clicked[4]}>Continue</Button> 
                </Tooltip>
              </Row>
            </Panel>
            <Panel 
              header={
                <div style={{width:'75%', display:'inline-flex', alignItems:'left'}}>
                  <img src={invFriendsIcon} alt="" style={{height:'1.5em', width:'auto', objectFit:'contain', margin: '0 7px 0 0', float:'left'}} />
                  <span>Invite Friends to Join ACY IDO</span>
                </div>
              } 
              key="6"
              disabled={followed[6]}
            >
              <Row type='flex' align='middle' justify='space-around'>
                <Button className={styles.taskBtn} type="primary" href={links[0]} target="_blank" style={buttonStyle1} icon="link">Share Your Link To Your Friends</Button>
              </Row>
            </Panel>
          </Collapse>
          <Row type='flex' align='middle' justify='space-around'>
            <Button style={buttonStyle2} disabled={allowNext} onClick={() => {setSelectedForm(2)}}>Enter the Whitelist</Button>
          </Row>
        </div>
      </div>
    </div>
  );
}