@ant-design/icons#SmileTwoTone JavaScript Examples

SideNav = () => {
  const handleClick = (e) => {};

  const { Sider } = Layout;

  return (
    <div className="sideNav">
      <Layout>
        <Sider
          breakpoint="lg"
          collapsedWidth="0"
          theme="light"
          onBreakpoint={(broken) => {
            console.log(broken);
          }}
          onCollapse={(collapsed, type) => {
            console.log(collapsed, type);
          }}
        >
          <Menu
            onClick={handleClick}
            style={{ height: "90vh" }}
            className="Admin-Side-Nav"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            mode="inline"
          >
            <Menu.Item key="sub1" icon={<HomeTwoTone />}>
              <Link to="/admin/dashboard">Dashboard</Link>
            </Menu.Item>
            <Menu.Item key="sub2" icon={<AppstoreOutlined />} disabled={true}>
              <Link to="/admin/analytics">Analytics</Link>
            </Menu.Item>
            <SubMenu key="sub4" title="Newsletter" icon={<FileTextTwoTone />}>
              <Menu.Item key="15">
                <CreateNewsletter />
              </Menu.Item>
              <Menu.Item key="16">
                <Link to="/admin/newsletters">All Newsletters</Link>
              </Menu.Item>
            </SubMenu>
            <SubMenu key="sub3" title="Clients" icon={<SmileTwoTone />}>
              <Menu.Item key="12">
                <CreateClient />
              </Menu.Item>
              <Menu.Item key="13">
                <Link to="/admin/clientView">Client List</Link>
              </Menu.Item>
            </SubMenu>
            <SubMenu key="sub5" icon={<IdcardTwoTone />} title="Authentication">
              <Menu.Item key="9">
                <CreateUser />
              </Menu.Item>
              <Menu.Item key="10">
                <Link to="/admin/viewUsers">View Users</Link>
              </Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
      </Layout>
    </div>
  );
}

storiesOf('antd/Icon', module).add('two-tone', () => 
  <div className="icons-list">
    <SmileTwoTone />
    <HeartTwoTone twoToneColor="#eb2f96" />
    <CheckCircleTwoTone twoToneColor="#52c41a" />
  </div>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>You can set <code>twoToneColor</code> prop to specific primary color for two-tone icons.</p></>) } });

export default function QuadraticDiplomacyVote({
  voteCredits,
  contributorEntries,
  tx,
  writeContracts,
  isVoter,
  mainnetProvider,
}) {
  const [selectedContributors, setSelectedContributors] = useState({});
  const [currentStep, setCurrentStep] = useState(1);
  const [spentVoteTokens, setSpentVoteTokens] = useState(0);
  const [isSendingTx, setIsSendingTx] = useState(false);

  const availableVoteTokens = voteCredits?.toNumber() ?? 0;
  const remainingVoteTokens = availableVoteTokens - spentVoteTokens;

  const contributors = useMemo(
    () =>
      contributorEntries.reduce((entries, current) => {
        entries[current.wallet] = 0;
        return entries;
      }, {}),
    [contributorEntries],
  );
  const allContributorsSelected = Object.keys(contributors).length === Object.keys(selectedContributors).length;

  if (!isVoter) {
    return (
      <div style={{ border: "1px solid", padding: "40px", width: 800, margin: "auto", marginTop: 64, textAlign: "left" }}>
        <Title level={4} style={{ fontFamily: "Space Mono" }}>Access denied</Title>
        <p>You are not part of the members of this election.</p>
      </div>
    );
  }

  const handleSelectAllContributors = () =>
    allContributorsSelected ? setSelectedContributors({}) : setSelectedContributors(contributors);

  const handleContributorSelection = (e, contributorAddress) => {
    setSelectedContributors(prevSelectedContributors => {
      if (prevSelectedContributors[contributorAddress] !== undefined) {
        const state = { ...prevSelectedContributors };
        delete state[contributorAddress];
        return state;
      } else {
        return {
          ...prevSelectedContributors,
          [contributorAddress]: contributors[contributorAddress],
        };
      }
    });
  };

  const handleContributorVote = (e, op, clickedContributorAddress) => {
    // adjust available vote tokens
    setSpentVoteTokens(prevSpentVoteTokens => (op === "add" ? prevSpentVoteTokens + 1 : prevSpentVoteTokens - 1));

    // update contributor vote tokens
    setSelectedContributors(prevSelectedContributors => ({
      ...prevSelectedContributors,
      [clickedContributorAddress]:
        op === "add"
          ? Math.min(prevSelectedContributors[clickedContributorAddress] + 1, availableVoteTokens)
          : Math.max(prevSelectedContributors[clickedContributorAddress] - 1, 0),
    }));
  };

  const handleSubmitVotes = async () => {
    const wallets = [];
    const amounts = [];

    Object.entries(selectedContributors).forEach(([contributorAddress, voteTokens]) => {
      wallets.push(contributorAddress);
      amounts.push(voteTokens);
    });

    setIsSendingTx(true);
    await tx(writeContracts.QuadraticDiplomacyContract.voteMultiple(wallets, amounts), update => {
      if (update && (update.status === "confirmed" || update.status === 1)) {
        setIsSendingTx(false);
        setSpentVoteTokens(0);
        setCurrentStep(3);
      } else if (update.error) {
        setIsSendingTx(false);
      }
    });
  };

  return (
    <div style={{ border: "1px solid", padding: "40px", width: 800, margin: "auto", marginTop: 64, textAlign: "left" }}>
      <Steps initial={1} current={currentStep} labelPlacement="vertical">
        <Steps.Step
          title="Select Contributors"
          subTitle={`${contributorEntries.length} contributors`}
          icon={<SmileTwoTone />}
        />
        <Steps.Step
          title="Allocate Votes"
          subTitle={`${remainingVoteTokens} votes left`}
          icon={<LikeTwoTone twoToneColor="#eb2f96" />}
        />
        <Steps.Step title="Done" subTitle="Thank you!" icon={<CheckCircleTwoTone twoToneColor="#52c41a" />} />
      </Steps>
      <Divider />
      {currentStep === 1 ? (
        <List
          size="large"
          itemLayout="horizontal"
          header={<Title level={4} style={{ fontFamily: "Space Mono" }}>1. Who've you been working with?</Title>}
          style={{ width: "600px", margin: "0 auto" }}
          footer={
            <Row justify="end">
                <Button
                  type="primary"
                  onClick={() => setCurrentStep(2)}
                  disabled={!Object.keys(selectedContributors).length}
                >
                  Next
                </Button>
            </Row>
          }
          dataSource={Object.entries(contributors)}
          renderItem={([contributorAddress, votes], index) => (
            <>
              {index === 0 && (
                <List.Item>
                  <Checkbox
                    indeterminate={!allContributorsSelected && Object.keys(selectedContributors).length}
                    checked={allContributorsSelected}
                    onChange={handleSelectAllContributors}
                  >
                    Select All
                  </Checkbox>
                </List.Item>
              )}
              <List.Item key={contributorAddress}>
                <Checkbox
                  size="large"
                  onClick={e => handleContributorSelection(e, contributorAddress)}
                  checked={selectedContributors[contributorAddress] !== undefined}
                >
                  <Address address={contributorAddress} ensProvider={mainnetProvider} fontSize={16} size="short" />
                </Checkbox>
              </List.Item>
            </>
          )}
        />
      ) : currentStep === 2 ? (
        <List
          size="large"
          itemLayout="horizontal"
          style={{ width: "600px", margin: "0 auto" }}
          header={
            <Space direction="vertical">
              <Title level={4} style={{ fontFamily: "Space Mono" }}>2. Allocate votes</Title>
              <Title level={5}>
                Remaining vote tokens:&nbsp;&nbsp;
                <Badge
                  showZero
                  overflowCount={1000}
                  count={remainingVoteTokens}
                  style={{ backgroundColor: "#52c41a" }}
                />
              </Title>
            </Space>
          }
          footer={
            <Row justify="end">
              {!isSendingTx ? (
                <>
                  <Button onClick={() => setCurrentStep(1)} style={{ marginRight: "8px" }} type="secondary">Go back</Button>
                  <Button type="primary" onClick={handleSubmitVotes}>
                    Commit votes
                  </Button>
                </>
              ) : (
                <Spin size="small" />
              )}
            </Row>
          }
          dataSource={Object.entries(selectedContributors)}
          renderItem={([contributorAddress, contributor]) => (
            <>
              <Badge.Ribbon
                showZero
                overflowCount={1000}
                text={<Title level={5}>{contributor} </Title>}
                style={{
                  backgroundColor: contributor ? "#eb2f96" : "grey",
                  height: 24,
                  width: 30,
                  marginRight: -5,
                }}
              />
              <List.Item
                key={contributorAddress}
                extra={
                  <Button.Group>
                    <Button
                      danger
                      ghost
                      onClick={e => handleContributorVote(e, "remove", contributorAddress)}
                      disabled={!contributor}
                    >
                      <MinusOutlined />
                    </Button>
                    <Button
                      type="primary"
                      ghost
                      onClick={e => handleContributorVote(e, "add", contributorAddress)}
                      disabled={!remainingVoteTokens}
                    >
                      <PlusOutlined />
                    </Button>
                  </Button.Group>
                }
              >
                <List.Item.Meta
                  avatar={
                    <Address address={contributorAddress} fontSize={16} size="short" ensProvider={mainnetProvider} />
                  }
                />
              </List.Item>
            </>
          )}
        />
      ) : (
        currentStep === 3 && (
          <>
            <Title level={3} style={{ fontFamily: "Space Mono" }}>Thank you for voting.</Title>
            <p>The allocation to this workstream will be informed by your votes. See you next month!</p>
            <Title level={5} style={{ marginTop: "24px" }}>Your votes:</Title>
            {Object.entries(selectedContributors).map(([contributorAddress, voteTokens]) => (
              <p key={contributorAddress}>
                <Address address={contributorAddress} fontSize={16} size="short" ensProvider={mainnetProvider} /> (
                <Text>{voteTokens}</Text>)
              </p>
            ))}
          </>
        )
      )}
    </div>
  );
}

IndexView = props => {
  const { dispatch } = props;

  const [comListHidden, setComListHidden] = useState(false);

  /**
   * @description 左边切换的事件，是否显示componentList
   */
  const toggleComponentList = () => {
    setComListHidden(!comListHidden);
  };

  const cls = classNames(styles.ComponentList, {
    [styles.hidden]: comListHidden === true,
  });


  useEffect(() => {
    // 首次执行
    // 发送setcurrentview
    dispatch({
      type: 'drag/getPageCode',
    });
    // 获取当前组织
    dispatch({
      type: 'orginzation/getOrgArr',
    });
    dispatch({
      type: 'drag/getOwnTemplate',
    });
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles.LeftContainer}>
        <div className={styles.header}>
          <div className={styles.btnList}>
            <div className={styles.logo}>React-Drag</div>
            <div className={styles.operation}>
              <ActionMenu active="/drag" excludes={[]}/>
            </div>
            <div className={styles.userCenter}>
              <div className={styles.btn}>
                <UserMenu />
              </div>
            </div>
          </div>
        </div>
        <div className={styles.content}>
          <div className={styles.settings}>
            <span onClick={toggleComponentList}>
              <SmileTwoTone style={{ fontSize: '24px' }} />
            </span>
          </div>
          <div className={styles.editRegion}>
            <div className={cls}>
              <Tabs>
                <TabPane tab="公共组件" key="1">
                  <div style={{ height: '80vh', overflowY: 'scroll' }}>
                    <ComponentList />
                  </div>
                </TabPane>
                <TabPane tab="组件模版" key="2">
                  <div style={{ height: '80vh', overflowY: 'scroll' }}>
                    <TemplateList />
                  </div>
                </TabPane>
              </Tabs>
            </div>
            <div className={styles.dragRegion}>
              <DragCanvas isPage={true} />
            </div>
          </div>
          <div className={styles.RightContainer}>
            <div className={styles.title}>属性编辑区</div>
            <ComponentConfig isPage={true} />
          </div>
        </div>
        <div className={styles.footer}>
          MIT Licensed | Copyright © 2019.12.31-present Daisy
        </div>
      </div>
    </div>
  );
}

IndexView = props => {
  const { dispatch, componentView, form, match } = props;
  const { params } = match;
  const { getFieldDecorator } = form;

  const [comListHidden, setComListHidden] = useState(false);

  /**
   * @description 左边切换的事件，是否显示componentList
   */
  const toggleComponentList = () => {
    setComListHidden(!comListHidden);
  };

  const cls = classNames(styles.ComponentList, {
    [styles.hidden]: comListHidden === true,
  });

  /**
   * @description 生成预览代码
   */
  const CodePreview = () => {
    console.log('com', componentView);
    dispatch(routerRedux.push('/codePreview'));
  };

  useEffect(() => {
    // 首次执行
    console.log('mount----');
    // 发送setcurrentview
    dispatch({
      type: 'drag/getComponentCode',
      payload: {
        id: params.id,
      },
    });
  }, []);

  /**
   * @description 发送到服务器
   */
  const postToServer = () => {
    if (componentValidator(componentView)) {
      dispatch({
        type: 'drag/putComponentCode',
        payload: {
          id: params.id,
          code: componentView,
        },
      });
    }
  };

  const basicObj = {
    type: 'div',
    nested: true,
    props: {
      style: {
        height: '',
        width: '',
        marginTop: '',
      },
    },
    needDiv: false,
    children: [],
  };
  // 组件不能为空
  const componentValidator = componentView => {
    if (componentView.length === 0) {
      // 提示不能为空
      message.error('组件不能为空');
      return false;
    } else if (componentView.length === 1) {
      return true;
    } else {
      confirm({
        title: '组件必须在被包裹在一个根组件下,是否自动生成外层根组件包裹?',
        content: '当你点击ok，自动生成包裹根组件',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          return new Promise((resolve, reject) => {
            // dispatch
            const basic = basicObj;
            basic.children = componentView;
            dispatch({
              type: 'drag/setCurrentView',
              payload: [basic],
              isPage: false,
            });
            setTimeout(resolve, 1000);
          }).catch(() => console.log('Oops errors!'));
        },
        onCancel() {},
      });
      return false;
    }
  };

  /**
   * @description 跳转代码广场
   */
  const comSquare = () => {
    dispatch(routerRedux.push('/comsquare'));
  };

  return (
    <div className={styles.container}>
      <div className={styles.LeftContainer}>
        <div className={styles.header}>
          <div className={styles.btnList}>
            <div className={styles.logo}>React-Drag</div>
            <div className={styles.operation}>
              <div className={styles.btn} style={{ color: '#1890FF' }}>
                <HighlightOutlined style={{ fontSize: '22px' }} />
                组件编辑
              </div>
              <div className={styles.btn} onClick={comSquare}>
                <AppstoreOutlined style={{ fontSize: '22px' }} />
                组件广场
              </div>
              <div className={styles.btn} onClick={postToServer}>
                <CheckCircleOutlined style={{ fontSize: '22px' }} />
                保存到服务器
              </div>
            </div>
            <div className={styles.userCenter}>
              <div className={styles.btn} onClick={CodePreview}>
                <UserOutlined style={{ fontSize: '22px' }} />
                用户中心
              </div>
            </div>
          </div>
        </div>
        <div className={styles.content}>
          <div className={styles.settings}>
            <span onClick={toggleComponentList}>
              <SmileTwoTone style={{ fontSize: '24px' }} />
            </span>
          </div>
          <div className={styles.editRegion}>
            <div className={cls}>
              <Tabs>
                <TabPane tab="公共组件" key="1">
                  <ComponentList />
                </TabPane>
              </Tabs>
            </div>
            <div className={styles.dragRegion}>
              <DragCanvas isPage={false} />
            </div>
          </div>
          <div className={styles.RightContainer}>
            <div className={styles.title}>属性编辑区</div>
            <ComponentConfig isPage={false} />
          </div>
        </div>
        <div className={styles.footer}>
          {' '}
          MIT Licensed | Copyright © 2019.12.31-present Daisy
        </div>
      </div>
    </div>
  );
}