@ant-design/icons#NotificationOutlined JavaScript Examples

NewCompent = memo(function NewCompent(props) {

  return (
    <div style={{fontSize:'16px',fontWeight:'bold'}}>
      <NotificationOutlined />
      <span style={{padding:"0 10px"}}>ant-simple-pro上线了！</span>
    </div>
  )
})

storiesOf('antd/badge', module).add('dot', () => 
  <div>
    <Badge dot>
      <NotificationOutlined />
    </Badge>
    <Badge count={0} dot>
      <NotificationOutlined />
    </Badge>
    <Badge dot>
      <a href="#">Link something</a>
    </Badge>
  </div>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.</p></>) } });

AppLayout = props => {
  let history = useHistory();

  // 结构赋值
  const { isCollapsed, username, toggle, signOut } = props;

  return (
    <Layout className={styles.wrapper}>
      <Sider trigger={null} collapsible collapsed={isCollapsed}>
        {props.sidebar}
      </Sider>
      <Layout>
        <Header className={styles.header}>
          <LegacyIcon
            className={styles["trigger"]}
            type={isCollapsed ? "menu-unfold" : "menu-fold"}
            onClick={() => toggle(isCollapsed)}
          />
          <span className={styles.home}>首页</span>
          <div className={styles["icon-group"]}>
            <Avatar
              style={{
                color: "#f56a00",
                backgroundColor: "#fde3cf",
                marginRight: "10px"
              }}
            >
              {username ? username[0] : ""}
            </Avatar>
            <span>
              <NotificationOutlined />
            </span>
            <span className={styles["icon-box"]}>
              <Dropdown
                overlay={() => menu(signOut, history)}
                placement="bottomCenter"
              >
                <MoreOutlined className={styles.icon} />
              </Dropdown>
            </span>
          </div>
        </Header>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            background: "#fff",
            minHeight: 280,
            overflowY: "scroll"
          }}
        >
          {props.content}
        </Content>
      </Layout>
      {/* <div
        style={{
          position: "absolute",
          bottom: "0px",
          width: "100%",
          textAlign: "center",
          backgroundColor: "#2d3a4b",
          color: "#eee",
          padding: "5px 0",
          fontSize: "12px"
        }}
      >
        鄂ICP备19026512号-3
      </div> */}
    </Layout>
  );
}

EventItem = ({
  city = 'Em todo o estado',
  status = 'F',
  title,
  description,
  event,
  hideAuthor = false
}) => {
  const { author } = event;
  const statusMessages = messages(status);

  return (
    <Timeline.Item
      className={status}
      dot={statusMessages.icon}
      color={statusMessages.color}
    >
      <div className='city'>
        {city}
        {event?.region?.initial && ` - ${event?.region?.initial}`}
        {author && !hideAuthor && author?.name && (
          <Popover
            content={
              <div style={{ textAlign: 'center' }}>
                Evento criado por {author?.name}. <br />
                <a>Clique aqui</a> para fazer parte de nossa equipe de
                colaboradores.
              </div>
            }
          >
            <span className='info'>
              <NotificationOutlined />
              <span>{author.name}</span>
            </span>
          </Popover>
        )}
      </div>
      <div className='meta'>
        <Popover content={<span style={{ textAlign: 'center' }}>{title}</span>}>
          <span className='label'>{title} - </span>
        </Popover>
        <span className='status'>{statusMessages.message} - </span>
        {(event.from_date !== null || event.to_date !== null) && (
          <Popover
            content={<span>Período de vigência do evento em questão.</span>}
          >
            <span className='info'>
              <ClockCircleOutlined />
              <span>
                {event.undefined_ends_date && 'A partir de '}
                {event.from_date && formatDate(event.from_date)}
                {event.to_date && ` - ${formatDate(event.to_date)}`}
              </span>
            </span>
          </Popover>
        )}

        {event?.source?.source && (
          <span className='info'>
            <LinkOutlined />
            <span>Fonte: {event.source.source}</span>
          </span>
        )}
      </div>
      <Text>{description}</Text>
      {event.source?.link && (
        <a href={event.source.link} target='__blank' alt={event.source.source}>
          Ver mais
        </a>
      )}
    </Timeline.Item>
  );
}

storiesOf('antd/layout', module).add('top-side-2', () => 
  <Layout>
    <Header className="header">
      <div className="logo" />
      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
        <Menu.Item key="1">nav 1</Menu.Item>
        <Menu.Item key="2">nav 2</Menu.Item>
        <Menu.Item key="3">nav 3</Menu.Item>
      </Menu>
    </Header>
    <Layout>
      <Sider width={200} className="site-layout-background">
        <Menu
          mode="inline"
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          style={{ height: '100%', borderRight: 0 }}
        >
          <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
            <Menu.Item key="1">option1</Menu.Item>
            <Menu.Item key="2">option2</Menu.Item>
            <Menu.Item key="3">option3</Menu.Item>
            <Menu.Item key="4">option4</Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
            <Menu.Item key="5">option5</Menu.Item>
            <Menu.Item key="6">option6</Menu.Item>
            <Menu.Item key="7">option7</Menu.Item>
            <Menu.Item key="8">option8</Menu.Item>
          </SubMenu>
          <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
            <Menu.Item key="9">option9</Menu.Item>
            <Menu.Item key="10">option10</Menu.Item>
            <Menu.Item key="11">option11</Menu.Item>
            <Menu.Item key="12">option12</Menu.Item>
          </SubMenu>
        </Menu>
      </Sider>
      <Layout style={{ padding: '0 24px 24px' }}>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
          }}
        >
          Content
        </Content>
      </Layout>
    </Layout>
  </Layout>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Both the top navigation and the sidebar, commonly used in application site.</p></>) } });

storiesOf('antd/layout', module).add('top-side', () => 
  <Layout>
    <Header className="header">
      <div className="logo" />
      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
        <Menu.Item key="1">nav 1</Menu.Item>
        <Menu.Item key="2">nav 2</Menu.Item>
        <Menu.Item key="3">nav 3</Menu.Item>
      </Menu>
    </Header>
    <Content style={{ padding: '0 50px' }}>
      <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>List</Breadcrumb.Item>
        <Breadcrumb.Item>App</Breadcrumb.Item>
      </Breadcrumb>
      <Layout className="site-layout-background" style={{ padding: '24px 0' }}>
        <Sider className="site-layout-background" width={200}>
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%' }}
          >
            <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
              <Menu.Item key="1">option1</Menu.Item>
              <Menu.Item key="2">option2</Menu.Item>
              <Menu.Item key="3">option3</Menu.Item>
              <Menu.Item key="4">option4</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
              <Menu.Item key="5">option5</Menu.Item>
              <Menu.Item key="6">option6</Menu.Item>
              <Menu.Item key="7">option7</Menu.Item>
              <Menu.Item key="8">option8</Menu.Item>
            </SubMenu>
            <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
              <Menu.Item key="9">option9</Menu.Item>
              <Menu.Item key="10">option10</Menu.Item>
              <Menu.Item key="11">option11</Menu.Item>
              <Menu.Item key="12">option12</Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Content style={{ padding: '0 24px', minHeight: 280 }}>Content</Content>
      </Layout>
    </Content>
    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  </Layout>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Both the top navigation and the sidebar, commonly used in documentation site.</p></>) } });

render() {
    return (

      <Layout className="layout-style">
        <Tabs activeKey={this.state.key} onTabClick={async (key) => {
          await this.props.history.push("/Admin/" + key)
          if (this.props.location.pathname === "/Admin/" + key) this.setState({ key: key })

        }} style={{ overflowY: "auto", overflowX: "auto" }}>
          <TabPane
            tab={<span> Home </span>}
            key=""
          >
            <h1>Welcome to Sieberrsec CTF Platform's admin panel.</h1>
            <h1>Click on any of the tabs above to manage different parts of the portal.</h1>

            <div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
              <Card className="settings-card">
                <Button type='primary' onClick={this.downloadBackup} loading={this.state.backupLoading}><DownloadOutlined /> Download Backup</Button>
                <p>Download all the data stored in the platform's database. Data can be uploaded onto a different platform/a later date to restore all the data</p>
              </Card>

              <Divider type="vertical" style={{ height: "inherit" }} />

              <Card className="settings-card">
                <div style={{width: "50%"}}>
                  <Dragger
                    fileList={this.state.fileList}
                    disabled={this.state.loadingUpload}
                    accept=".json"
                    maxCount={1}
                    onChange={(file) => {
                      if (file.fileList.length > 0) this.setState({ noFile: false })
                      else this.setState({ noFile: true })
                      this.setState({ fileList: file.fileList })
                    }}
                    beforeUpload={(file) => {
                      return false
                    }}>
                    <h4>Drag and drop backup .json file to upload.</h4><br/>
                    <p>Then, click the Upload button</p>
                  </Dragger>
                  <Button type="primary" icon={<UploadOutlined />} style={{ marginTop: "3ch" }} disabled={this.state.noFile} loading={this.state.loadingUpload} onClick={() => {
                    confirm({
                      confirmLoading: this.state.loadingUpload,
                      title: 'Are you sure you want to restore all platform data to this JSON file? This action is irreversible.',
                      icon: <ExclamationCircleOutlined />,
                      onOk: (close) => { this.uploadBackup(close) },
                      onCancel: () => { },
                  });
                    this.uploadBackup
                    }}>Upload Backup</Button>
                </div>
                <p>Restore and upload data stored in a backup json file. <span style={{ color: "#d32029" }}><b>Warning: This <u>WILL OVERRIDE ALL EXISTING DATA</u> stored in this platform</b> (including the current account used to upload the backup). Please re-login after restoration is completed.</span></p>
              </Card>
            </div>
          </TabPane>
          <TabPane
            tab={<span><NotificationOutlined />Announcements</span>}
            key="Announcements"
          >
            <AdminManageAnnouncements />
          </TabPane>
          <TabPane
            tab={<span><UserOutlined />Users</span>}
            key="Users"
          >
            <AdminUsers></AdminUsers>
          </TabPane>
          <TabPane
            tab={<span><AppstoreOutlined />Challenges</span>}
            key="Challenges"
          >
            <AdminChallenges history={this.props.history} location={this.props.location}></AdminChallenges>
          </TabPane>
          <TabPane
            tab={<span><BarsOutlined />Transactions</span>}
            key="Submissions"
          >
            <AdminSubmissions></AdminSubmissions>
          </TabPane>
          <TabPane
            tab={<span><MailOutlined />Email Settings</span>}
            key="Emails"
          >
            <AdminEmails></AdminEmails>
          </TabPane>
        </Tabs>



      </Layout>
    );
  }

render() {
        return (

            <Layout style={{ height: "100%", width: "100%", backgroundColor: "rgba(0, 0, 0, 0)" }}>

                <Modal
                    title="Create New Announcement"
                    visible={this.state.createAnnouncementsModal}
                    footer={null}
                    onCancel={() => { this.setState({ createAnnouncementsModal: false }) }}
                >

                    <CreateAnnouncementsForm createAnnouncement={this.createAnnouncement.bind(this)} setState={this.setState.bind(this)} state={this.state} />
                </Modal>

                <Modal
                    title="Edit Announcement"
                    visible={this.state.editAnnouncementsModal}
                    footer={null}
                    onCancel={() => { this.setState({ editAnnouncementsModal: false }) }}
                    destroyOnClose
                >

                    <EditAnnouncementsForm editAnnouncement={this.editAnnouncement.bind(this)} setState={this.setState.bind(this)} state={this.state} initialData={this.state.initialData} />
                </Modal>


                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div style={{ display: "flex", alignItems: "center", height: "2ch" }}>
                        <Button type="primary" style={{ marginBottom: "2vh", marginRight: "1ch" }} icon={<NotificationOutlined />} onClick={() => { this.setState({ createAnnouncementsModal: true }) }}>Create New Announcement</Button>
                        {this.state.loading && (
                            <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
                                <Ellipsis color="#177ddc" size={60} />
                                <h1>Loading Announcements</h1>
                            </div>
                        )}
                    </div>
                    <Button loading={this.state.loading} type="primary" shape="circle" size="large" style={{ marginBottom: "2vh" }} icon={<RedoOutlined />} onClick={async () => { await this.fillTableData(); message.success("Announcements list refreshed.") }} />
                </div>
                <div style={{ display: "flex", alignItems: "center" }}>
                    <Button disabled={this.state.disableEditButtons} style={{ marginBottom: "2vh", marginRight: "1ch", backgroundColor: "#a61d24" }} icon={<DeleteOutlined />} onClick={() => {
                        confirm({
                            confirmLoading: this.state.disableEditButtons,
                            title: 'Are you sure you want to delete the announcement(s) [' + this.state.selectedTableKeys.join(", ") + ']? This action is irreversible.',
                            icon: <ExclamationCircleOutlined />,
                            onOk: (close) => { this.deleteAnnouncement(close.bind(this), this.state.selectedTableKeys) },
                            onCancel: () => { },
                        });
                    }}>Delete Announcements</Button>
                </div>
                <Table rowSelection={{ selectedRowKeys: this.state.selectedTableKeys, onChange: this.handleTableSelect.bind(this) }} style={{ overflow: "auto" }} dataSource={this.state.dataSource} locale={{
                    emptyText: (
                        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", marginTop: "10vh" }}>
                            <FileUnknownTwoTone style={{ color: "#177ddc", fontSize: "400%", zIndex: 1 }} />
                            <h1 style={{ fontSize: "200%" }}>No announcements have been created.</h1>
                        </div>
                    )
                }}>
                    <Column title="Announcement ID" dataIndex="_id" key="_id" />
                    <Column title="Title" dataIndex="title" key="title"
                        filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                            <div style={{ padding: 8 }}>
                                <Input
                                    placeholder="Search Title"
                                    value={selectedKeys[0]}
                                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                                    onPressEnter={() => confirm()}
                                    style={{ marginBottom: 8, display: 'block' }}
                                />
                                <Space>
                                    <Button
                                        type="primary"
                                        onClick={() => { confirm() }}
                                        icon={<SearchOutlined />}
                                    >
                                        Search
                                    </Button>
                                    <Button onClick={() => clearFilters()}>
                                        Reset
                                    </Button>
                                </Space>
                            </div>
                        )}
                        onFilter={(value, record) => record.title.includes(value.toLowerCase())}
                        filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />} />
                    <Column title="Content" dataIndex="content" key="content"
                        render={(text, row, index) => {
                            if (text.length > 25) return text.slice(0, 25) + "..."
                            else return text
                        }}
                        filterDropdown={({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                            <div style={{ padding: 8 }}>
                                <Input
                                    placeholder="Search Content"
                                    value={selectedKeys[0]}
                                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                                    onPressEnter={() => confirm()}
                                    style={{ marginBottom: 8, display: 'block' }}
                                />
                                <Space>
                                    <Button
                                        type="primary"
                                        onClick={() => { confirm() }}
                                        icon={<SearchOutlined />}
                                    >
                                        Search
                                    </Button>
                                    <Button onClick={() => clearFilters()}>
                                        Reset
                                    </Button>
                                </Space>
                            </div>
                        )}
                        onFilter={(value, record) => record.content.includes(value.toLowerCase())}
                        filterIcon={filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />}

                    />
                    <Column title="Time" dataIndex="timestamp" key="timestamp"
                        render={(text, row, index) => {
                            return new Date(text).toLocaleString("en-US", { timeZone: "Asia/Singapore" });
                        }} />
                    <Column
                        title=""
                        key="action"
                        render={(text, record) => (
                            <Dropdown trigger={['click']} overlay={
                                <Menu>
                                    <Menu.Item onClick={() => {
                                        this.editAnnouncementOpen(record._id)
                                    }}>
                                        <span>
                                            Edit Announcement <ClusterOutlined />
                                        </span>
                                    </Menu.Item>
                                </Menu>
                            } placement="bottomCenter">
                                <Button>Actions</Button>
                            </Dropdown>
                        )}
                    />
                </Table>

            </Layout>
        );
    }

SettingDrawer = function SettingDrawer(props) {
  var _props$settings = props.settings,
      propsSettings = _props$settings === void 0 ? undefined : _props$settings,
      _props$hideLoading = props.hideLoading,
      hideLoading = _props$hideLoading === void 0 ? false : _props$hideLoading,
      hideColors = props.hideColors,
      hideHintAlert = props.hideHintAlert,
      hideCopyButton = props.hideCopyButton,
      getContainer = props.getContainer,
      onSettingChange = props.onSettingChange,
      _props$prefixCls = props.prefixCls,
      prefixCls = _props$prefixCls === void 0 ? 'ant-pro' : _props$prefixCls;
  var firstRender = useRef(true);

  var _useMergeValue = useMergeValue(false, {
    value: props.collapse,
    onChange: props.onCollapseChange
  }),
      _useMergeValue2 = _slicedToArray(_useMergeValue, 2),
      show = _useMergeValue2[0],
      setShow = _useMergeValue2[1];

  var _useState = useState(getLanguage()),
      _useState2 = _slicedToArray(_useState, 2),
      language = _useState2[0],
      setLanguage = _useState2[1];

  var _useMergeValue3 = useMergeValue(function () {
    return getParamsFromUrl(propsSettings);
  }, {
    value: propsSettings,
    onChange: onSettingChange
  }),
      _useMergeValue4 = _slicedToArray(_useMergeValue3, 2),
      settingState = _useMergeValue4[0],
      setSettingState = _useMergeValue4[1];

  var preStateRef = useRef(settingState);

  var _ref3 = settingState || {},
      _ref3$navTheme = _ref3.navTheme,
      navTheme = _ref3$navTheme === void 0 ? 'dark' : _ref3$navTheme,
      _ref3$primaryColor = _ref3.primaryColor,
      primaryColor = _ref3$primaryColor === void 0 ? 'daybreak' : _ref3$primaryColor,
      _ref3$layout = _ref3.layout,
      layout = _ref3$layout === void 0 ? 'sidemenu' : _ref3$layout,
      colorWeak = _ref3.colorWeak;

  useEffect(function () {
    // 语言修改，这个是和 locale 是配置起来的
    var onLanguageChange = function onLanguageChange() {
      if (language !== getLanguage()) {
        setLanguage(getLanguage());
      }
    }; // 记住默认的选择，方便做 diff，然后保存到 url 参数中


    oldSetting = Object.assign(Object.assign({}, defaultSettings), propsSettings);
    /**
     * 如果不是浏览器 都没有必要做了
     */

    if (!isBrowser()) {
      return function () {
        return null;
      };
    }

    initState(settingState, setSettingState, props.publicPath);
    window.addEventListener('languagechange', onLanguageChange, {
      passive: true
    });
    return function () {
      return window.removeEventListener('languagechange', onLanguageChange);
    };
  }, []);
  /**
   * 修改设置
   * @param key
   * @param value
   * @param hideMessageLoading
   */

  var changeSetting = function changeSetting(key, value, hideMessageLoading) {
    var nextState = Object.assign({}, preStateRef.current);
    nextState[key] = value;

    if (key === 'navTheme') {
      updateTheme(value === 'realDark', undefined, hideMessageLoading, props.publicPath);
      nextState.primaryColor = 'daybreak';
    }

    if (key === 'primaryColor') {
      updateTheme(nextState.navTheme === 'realDark', value === 'daybreak' ? '' : value, hideMessageLoading, props.publicPath);
    }

    if (key === 'layout') {
      nextState.contentWidth = value === 'top' ? 'Fixed' : 'Fluid';
    }

    if (key === 'layout' && value !== 'mix') {
      nextState.splitMenus = false;
    }

    if (key === 'layout' && value === 'mix') {
      nextState.navTheme = 'light';
    }

    if (key === 'colorWeak' && value === true) {
      var dom = document.querySelector('body div');

      if (!dom) {
        return;
      }

      dom.dataset.prosettingdrawer = dom.style.filter;
      dom.style.filter = 'invert(80%)';
    }

    if (key === 'colorWeak' && value === false) {
      var _dom = document.querySelector('body div');

      if (!_dom) {
        return;
      }

      _dom.style.filter = _dom.dataset.prosettingdrawer || 'none';
      delete _dom.dataset.prosettingdrawer;
    }

    preStateRef.current = nextState;
    setSettingState(nextState);
  };

  var formatMessage = getFormatMessage();
  var themeList = getThemeList(settingState);
  useEffect(function () {
    /**
     * 如果不是浏览器 都没有必要做了
     */
    if (!isBrowser()) {
      return;
    }

    if (firstRender.current) {
      firstRender.current = false;
      return;
    }

    var browserHistory = createBrowserHistory();
    var params = {};

    if (window.location.search) {
      params = parse(window.location.search.replace('?', ''));
    }

    var diffParams = getDifferentSetting(Object.assign(Object.assign({}, params), settingState));

    if (Object.keys(settingState).length < 1) {
      return;
    }

    browserHistory.replace({
      search: stringify(diffParams)
    });
  }, [JSON.stringify(settingState)]);
  var baseClassName = "".concat(prefixCls, "-setting");
  return React.createElement(_Drawer, {
    visible: show,
    width: 300,
    onClose: function onClose() {
      return setShow(false);
    },
    placement: "right",
    getContainer: getContainer,
    handler: React.createElement("div", {
      className: "".concat(baseClassName, "-drawer-handle"),
      onClick: function onClick() {
        return setShow(!show);
      }
    }, show ? React.createElement(CloseOutlined, {
      style: {
        color: '#fff',
        fontSize: 20
      }
    }) : React.createElement(SettingOutlined, {
      style: {
        color: '#fff',
        fontSize: 20
      }
    })),
    style: {
      zIndex: 999
    }
  }, React.createElement("div", {
    className: "".concat(baseClassName, "-drawer-content")
  }, React.createElement(Body, {
    title: formatMessage({
      id: 'app.setting.pagestyle',
      defaultMessage: 'Page style setting'
    }),
    prefixCls: baseClassName
  }, React.createElement(BlockCheckbox, {
    prefixCls: baseClassName,
    list: themeList.themeList,
    value: navTheme,
    key: "navTheme",
    onChange: function onChange(value) {
      return changeSetting('navTheme', value, hideLoading);
    }
  })), React.createElement(Body, {
    title: formatMessage({
      id: 'app.setting.themecolor',
      defaultMessage: 'Theme color'
    }),
    prefixCls: baseClassName
  }, React.createElement(ThemeColor, {
    value: primaryColor,
    colors: hideColors ? [] : themeList.colorList[navTheme === 'realDark' ? 'dark' : 'light'],
    formatMessage: formatMessage,
    onChange: function onChange(color) {
      return changeSetting('primaryColor', color, hideLoading);
    }
  })), React.createElement(_Divider, null), React.createElement(Body, {
    prefixCls: baseClassName,
    title: formatMessage({
      id: 'app.setting.navigationmode'
    })
  }, React.createElement(BlockCheckbox, {
    prefixCls: baseClassName,
    value: layout,
    key: "layout",
    list: [{
      key: 'side',
      url: 'https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg',
      title: formatMessage({
        id: 'app.setting.sidemenu'
      })
    }, {
      key: 'top',
      url: 'https://gw.alipayobjects.com/zos/antfincdn/URETY8%24STp/KDNDBbriJhLwuqMoxcAr.svg',
      title: formatMessage({
        id: 'app.setting.topmenu'
      })
    }, {
      key: 'mix',
      url: 'https://gw.alipayobjects.com/zos/antfincdn/x8Ob%26B8cy8/LCkqqYNmvBEbokSDscrm.svg',
      title: formatMessage({
        id: 'app.setting.mixmenu'
      })
    }],
    onChange: function onChange(value) {
      return changeSetting('layout', value, hideLoading);
    }
  })), React.createElement(LayoutSetting, {
    settings: settingState,
    changeSetting: changeSetting
  }), React.createElement(_Divider, null), React.createElement(Body, {
    prefixCls: baseClassName,
    title: formatMessage({
      id: 'app.setting.regionalsettings'
    })
  }, React.createElement(RegionalSetting, {
    settings: settingState,
    changeSetting: changeSetting
  })), React.createElement(_Divider, null), React.createElement(Body, {
    prefixCls: baseClassName,
    title: formatMessage({
      id: 'app.setting.othersettings'
    })
  }, React.createElement(_List, {
    split: false,
    renderItem: renderLayoutSettingItem,
    dataSource: [{
      title: formatMessage({
        id: 'app.setting.weakmode'
      }),
      action: React.createElement(_Switch, {
        size: "small",
        checked: !!colorWeak,
        onChange: function onChange(checked) {
          return changeSetting('colorWeak', checked);
        }
      })
    }]
  })), hideHintAlert && hideCopyButton ? null : React.createElement(_Divider, null), hideHintAlert ? null : React.createElement(_Alert, {
    type: "warning",
    message: formatMessage({
      id: 'app.setting.production.hint'
    }),
    icon: React.createElement(NotificationOutlined, null),
    showIcon: true,
    style: {
      marginBottom: 16
    }
  }), hideCopyButton ? null : React.createElement(CopyToClipboard, {
    text: genCopySettingJson(settingState),
    onCopy: function onCopy() {
      return _message.success(formatMessage({
        id: 'app.setting.copyinfo'
      }));
    }
  }, React.createElement(_Button, {
    block: true
  }, React.createElement(CopyOutlined, null), " ", formatMessage({
    id: 'app.setting.copy'
  })))));
}