@ant-design/icons#FrownOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#FrownOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: icon-slider.jsx From virtuoso-design-system with MIT License | 6 votes |
|
render() {
const { max, min } = this.props;
const { value } = this.state;
const mid = ((max - min) / 2).toFixed(5);
const preColorCls = value >= mid ? '' : 'icon-wrapper-active';
const nextColorCls = value >= mid ? 'icon-wrapper-active' : '';
return (
<div className="icon-wrapper">
<FrownOutlined className={preColorCls} />
<Slider {...this.props} onChange={this.handleChange} value={value} />
<SmileOutlined className={nextColorCls} />
</div>
);
}
Example #2
| Source File: customized-icon.jsx From virtuoso-design-system with MIT License | 6 votes |
|
treeData = [
{
title: 'parent 1',
key: '0-0',
icon: <SmileOutlined />,
children: [
{
title: 'leaf',
key: '0-0-0',
icon: <MehOutlined />,
},
{
title: 'leaf',
key: '0-0-1',
icon: ({ selected }) => (selected ? <FrownFilled /> : <FrownOutlined />),
},
],
},
]
Example #3
| Source File: character-function.jsx From virtuoso-design-system with MIT License | 5 votes |
|
customIcons = {
1: <FrownOutlined />,
2: <FrownOutlined />,
3: <MehOutlined />,
4: <SmileOutlined />,
5: <SmileOutlined />,
}
Example #4
| Source File: index.js From pretty-derby with GNU General Public License v3.0 | 5 votes |
|
SeedCard = (props) => {
const { t } = useTranslation();
const db = useDB();
if (!db) return null;
const data = props.data;
const player = db.get("players").find({ id: data.playerId0 }).value();
const support = db.get("supports").find({ id: data.supportId }).value();
const like = async (seed) => {
if (!userId) {
message.info(t("刷新后重试"));
return;
}
let id = seed.id;
const res = await axios.post("https://urarawin.com/api/sqlite/like", { id, userId });
if (res.data) {
message.info(t("成功"));
seed.likes += 1;
}
};
const dislike = async (seed) => {
if (!userId) {
message.info(t("刷新后重试"));
return;
} else if (seed.dislikes && seed.dislikes.indexOf(userId) !== -1) {
return;
}
let id = seed.id;
const res = await axios.post("https://urarawin.com/api/sqlite/dislike", { id, userId });
if (res.data) {
message.info(t("成功"));
seed.dislikes += 1;
}
};
return (
<div className="w-1/2 p-1">
<div className="border-green-300 border border-solid flex flex-col">
<CopyToClipboard text={data.gameId} onCopy={() => message.info("成功")}>
<div className="w-full flex text-lg">
{data.gameId}
<CopyOutlined />
</div>
</CopyToClipboard>
<div className="w-full flex items-center justify-around">
{player && (
<img alt={player.name} src={CDN_SERVER + player.imgUrl} className="w-10 h-10" />
)}
{support && <img alt={support.name} src={CDN_SERVER + support.imgUrl} className="w-10" />}
<div className="text-lg flex" onClick={() => like(data)}>
<SmileOutlined />
<div>{data.likes}</div>
</div>
<div className="text-lg flex" onClick={() => dislike(data)}>
<FrownOutlined />
<div>{data.dislikes}</div>
</div>
</div>
<div>{`${t(SEED_BLUE_LABELS[data["blue0"]])}: ${data["blueLevel0"]}`}</div>
<div>{`${t(SEED_RED_LABELS[data["red0"]])}: ${data["redLevel0"]}`}</div>
{Object.keys(SEED_BLUE_LABELS).map((key) =>
data[key] ? (
<div key={key}>{`${t("总计")} ${t(SEED_BLUE_LABELS[key])}: ${data[key]}`}</div>
) : null
)}
{Object.keys(SEED_RED_LABELS).map((key) =>
data[key] ? (
<div key={key}>{`${t("总计")} ${t(SEED_RED_LABELS[key])}: ${data[key]}`}</div>
) : null
)}
<div>{`${t("突破等级")}: ${data["supportLevel"] || 0}`}</div>
</div>
</div>
);
}
Example #5
| Source File: profile.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout-style">
{this.state.loading && (
<div style={{ position: "absolute", left: "55%", transform: "translate(-55%, 0%)", zIndex: 10 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>
)}
{
!this.state.targetUser && !this.state.loading && (
<div style={{ height: "100%", width: "100%" }}>
<br /><br /><br />
<Empty
image={<FrownOutlined />}
imageStyle={{ fontSize: "500%", color: "#177ddc" }}
description={<h1>We were unable to find the user "{this.props.match.params.user}"</h1>}
/>
</div>
)
}
{
this.state.targetUser && !this.state.loading && (
<Layout style={{ height: "100%", width: "100%", padding: "3%", backgroundColor: "rgba(0, 0, 0, 0)" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ display: "flex" }}>
<div style={{ display: "flex", marginRight: "5ch", alignItems: "center", justifyItems: "center" }}>
<Avatar style={{ backgroundColor: "transparent", marginRight: "3ch", width: "10ch", height: "10ch" }} size='large' src={"/static/profile/" + this.state.targetUser + ".webp"} />
<h1 style={{ fontSize: "5ch" }}>{this.state.targetUser}</h1>
</div>
<div>
<h1 style={{ fontSize: "5ch", color: "#faad14" }}><span style={{ color: "#d48806", fontSize: "1.5ch" }}><u>Score:</u> </span>{this.state.userScore}</h1>
</div>
</div>
</div>
<Divider />
<h1 style={{ fontSize: "3ch" }}>Score History</h1>
<div style={{ height: 375, width: "100%", backgroundColor: "rgba(0, 0, 0, 0.3)", border: "5px solid transparent", borderRadius: "20px", padding: "10px", margin: "10px" }}>
<ResponsiveContainer width="90%" height={350}>
<AreaChart height={350} data={this.state.graphData}
margin={{ top: 10, right: 15, left: 15, bottom: 15 }}>
<defs>
<linearGradient id="color1" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#791a1f" stopOpacity={0.3} />
<stop offset="95%" stopColor="#f89f9a" stopOpacity={0.1} />
</linearGradient>
</defs>
<XAxis dataKey="Time">
<Label offset={-5} position="insideBottom" style={{ fill: 'rgba(207, 207, 207, 1)' }}>
Time
</Label>
</XAxis>
<YAxis >
<Label offset={-10} position='insideLeft' style={{ fill: 'rgba(207, 207, 207, 1)' }}>
Score
</Label>
</YAxis>
<CartesianGrid strokeDasharray="3 3" />
<Tooltip labelStyle={{ backgroundColor: "#1c2b3e" }} contentStyle={{ backgroundColor: "#1c2b3e" }} wrapperStyle={{ backgroundColor: "#1c2b3e" }} />
<Area isAnimationActive={false} type="monotone" dataKey="Score" stroke="#d32029" fillOpacity={1} fill="url(#color1)" />
</AreaChart>
</ResponsiveContainer>
</div>
<Table style={{ marginTop: "2vh" }} dataSource={this.state.scores} pagination={{ pageSize: 10 }} 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%" }}>{this.state.targetUser} has not completed any challenges/bought any hints</h1>
</div>
)
}}>
<Column width={1} title="Challenge/Hint" dataIndex="challenge" key="challenge"
render={(text, row, index) => {
if (row.challengeID !== "") return <Link to={"/Challenges/" + row.challengeID}><a style={{ fontWeight: 700 }}>{text}</a></Link>;
else return (<span>{text}</span>);
}} />
<Column width={30} title="Score Change" dataIndex="score" key="score" />
<Column width={30} title="Solved Timestamp" dataIndex="time" key="time" />
</Table>
</Layout>
)
}
</Layout>
)
}
Example #6
| Source File: User.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const columns = [{
title: '序号',
dataIndex: 'id',
key: 'id',
render: (id, record, index) => {
return index + 1;
}
}, {
title: '登录账号',
dataIndex: 'username',
key: 'username',
sorter: true,
render: (username, record) => {
return (
<Button type="link" size='small'
onClick={async () => {
let result = await request.get(`/users/${record['id']}`);
if (result['code'] !== 1) {
message.error(result['message']);
return;
}
this.showModal('更新用户', result['data']);
}}>{username}</Button>
);
}
}, {
title: '用户昵称',
dataIndex: 'nickname',
key: 'nickname',
sorter: true,
}, {
title: '用户类型',
dataIndex: 'type',
key: 'type',
render: (text) => {
if (text === 'user') {
return (
<Tag>普通用户</Tag>
);
} else if (text === 'admin') {
return (
<Tag color="blue">管理用户</Tag>
);
} else {
return text;
}
}
}, {
title: '邮箱',
dataIndex: 'mail',
key: 'mail',
}, {
title: '状态',
dataIndex: 'status',
key: 'status',
render: (status, record, index) => {
return <Switch checkedChildren="启用" unCheckedChildren="停用"
disabled={getCurrentUser()['id'] === record['id']}
loading={record['statusLoading']}
checked={status !== 'disabled'}
onChange={checked => {
this.changeUserStatus(record['id'], checked, index);
}}/>
}
}, {
title: '双因素认证',
dataIndex: 'totpSecret',
key: 'totpSecret',
render: (text) => {
if (text === '1') {
return <Tag icon={<InsuranceOutlined/>} color="success">已开启</Tag>;
} else {
return <Tag icon={<FrownOutlined />} color="warning">未开启</Tag>;
}
}
}, {
title: '在线状态',
dataIndex: 'online',
key: 'online',
render: text => {
if (text) {
return (<Badge status="success" text="在线"/>);
} else {
return (<Badge status="default" text="离线"/>);
}
}
}, {
title: '授权资产',
dataIndex: 'sharerAssetCount',
key: 'sharerAssetCount',
render: (text, record) => {
return <Button type='link' onClick={async () => {
this.setState({
assetVisible: true,
sharer: record['id']
})
}}>{text}</Button>
}
}, {
title: '创建日期',
dataIndex: 'created',
key: 'created',
render: (text) => {
return (
<Tooltip title={text}>
{dayjs(text).fromNow()}
</Tooltip>
)
},
sorter: true,
}, {
title: '来源',
dataIndex: 'source',
key: 'source',
render: (text) => {
if (text === 'ldap') {
return (
<Tag color="gold">域同步</Tag>
);
}
}
},
{
title: '操作',
key: 'action',
render: (text, record, index) => {
const menu = (
<Menu>
<Menu.Item key="1">
<Button type="text" size='small'
disabled={record['source'] === 'ldap'}
onClick={() => {
this.setState({
changePasswordVisible: true,
selectedRow: record
})
}}>修改密码</Button>
</Menu.Item>
<Menu.Item key="2">
<Button type="text" size='small'
loading={record['resetTOTPLoading']}
onClick={() => {
confirm({
title: '您确定要重置此用户的双因素认证吗?',
content: record['name'],
okText: '确定',
cancelText: '取消',
onOk: async () => {
this.resetTOTP(record['id'], index);
}
});
}}>重置双因素认证</Button>
</Menu.Item>
<Menu.Item key="3">
<Button type="text" size='small'
onClick={() => {
this.setState({
assetVisible: true,
sharer: record['id']
})
}}>资产授权</Button>
</Menu.Item>
<Menu.Divider/>
<Menu.Item key="5">
<Button type="text" size='small' danger
disabled={getCurrentUser()['id'] === record['id']}
loading={record['delLoading']}
onClick={() => this.showDeleteConfirm(record.id, record.name, index)}>删除</Button>
</Menu.Item>
</Menu>
);
return (
<div>
<Button type="link" size='small'
disabled={getCurrentUser()['id'] === record['id']}
onClick={async () => {
let result = await request.get(`/users/${record['id']}`);
if (result['code'] !== 1) {
message.error(result['message']);
return;
}
this.showModal('更新用户', result['data']);
}}>编辑</Button>
<Dropdown overlay={menu}>
<Button type="link" size='small'>
更多 <DownOutlined/>
</Button>
</Dropdown>
</div>
)
},
}
];
const selectedRowKeys = this.state.selectedRowKeys;
const rowSelection = {
selectedRowKeys: this.state.selectedRowKeys,
onChange: (selectedRowKeys) => {
this.setState({selectedRowKeys});
},
};
const hasSelected = selectedRowKeys.length > 0;
return (
<>
<Content className="site-layout-background page-content">
<div style={{marginBottom: 20}}>
<Row justify="space-around" align="middle" gutter={24}>
<Col span={8} key={1}>
<Title level={3}>用户列表</Title>
</Col>
<Col span={16} key={2} style={{textAlign: 'right'}}>
<Space>
<Search
ref={this.inputRefOfNickname}
placeholder="用户昵称"
allowClear
onSearch={this.handleSearchByNickname}
/>
<Search
ref={this.inputRefOfUsername}
placeholder="登录账号"
allowClear
onSearch={this.handleSearchByUsername}
/>
<Search
ref={this.inputRefOfMail}
placeholder="邮箱"
allowClear
onSearch={this.handleSearchByMail}
/>
<Tooltip title='重置查询'>
<Button icon={<UndoOutlined/>} onClick={() => {
this.inputRefOfUsername.current.setValue('');
this.inputRefOfNickname.current.setValue('');
this.inputRefOfMail.current.setValue('');
this.loadTableData({pageIndex: 1, pageSize: 10})
}}>
</Button>
</Tooltip>
<Divider type="vertical"/>
<Tooltip title="新增">
<Button type="dashed" icon={<PlusOutlined/>}
onClick={() => this.showModal('新增用户', {})}>
</Button>
</Tooltip>
<Tooltip title="刷新列表">
<Button icon={<SyncOutlined/>} onClick={() => {
this.loadTableData(this.state.queryParams)
}}>
</Button>
</Tooltip>
<Tooltip title="批量删除">
<Button type="primary" danger disabled={!hasSelected} icon={<DeleteOutlined/>}
loading={this.state.delBtnLoading}
onClick={() => {
const content = <div>
您确定要删除选中的<Text style={{color: '#1890FF'}}
strong>{this.state.selectedRowKeys.length}</Text>条记录吗？
</div>;
confirm({
icon: <ExclamationCircleOutlined/>,
content: content,
onOk: () => {
this.batchDelete()
},
onCancel() {
},
});
}}>
</Button>
</Tooltip>
</Space>
</Col>
</Row>
</div>
<Table rowSelection={rowSelection}
rowKey='id'
dataSource={this.state.items}
columns={columns}
position={'both'}
pagination={{
showSizeChanger: true,
current: this.state.queryParams.pageIndex,
pageSize: this.state.queryParams.pageSize,
onChange: this.handleChangPage,
onShowSizeChange: this.handleChangPage,
total: this.state.total,
showTotal: total => `总计 ${total} 条`
}}
loading={this.state.loading}
onChange={this.handleTableChange}
/>
{/* 为了屏蔽ant modal 关闭后数据仍然遗留的问题*/}
{
this.state.modalVisible ?
<UserModal
visible={this.state.modalVisible}
title={this.state.modalTitle}
handleOk={this.handleOk}
handleCancel={this.handleCancelModal}
confirmLoading={this.state.modalConfirmLoading}
model={this.state.model}
>
</UserModal> : undefined
}
<Drawer
title="资产授权"
placement="right"
closable={true}
destroyOnClose={true}
onClose={() => {
this.loadTableData(this.state.queryParams);
this.setState({
assetVisible: false
})
}}
visible={this.state.assetVisible}
width={window.innerWidth * 0.8}
>
<UserShareSelectedAsset
sharer={this.state.sharer}
userGroupId={undefined}
>
</UserShareSelectedAsset>
</Drawer>
{
this.state.changePasswordVisible ?
<Modal title="修改密码" visible={this.state.changePasswordVisible}
confirmLoading={this.state.changePasswordConfirmLoading}
maskClosable={false}
onOk={() => {
this.changePasswordFormRef.current
.validateFields()
.then(values => {
this.changePasswordFormRef.current.resetFields();
this.handleChangePassword(values);
});
}}
onCancel={() => {
this.setState({
changePasswordVisible: false
})
}}>
<Form ref={this.changePasswordFormRef}>
<Form.Item name='password' rules={[{required: true, message: '请输入新密码'}]}>
<Input prefix={<LockOutlined/>} placeholder="请输入新密码"/>
</Form.Item>
</Form>
</Modal> : undefined
}
</Content>
</>
);
}
Example #7
| Source File: index.js From pretty-derby with GNU General Public License v3.0 | 4 votes |
|
Seed = () => {
document.title = TITLE;
useDidRecover(() => {
document.title = TITLE;
});
const [isSeedInputVisible, setIsSeedInputVisible] = useState(false);
const [seedList, setSeedList] = useState([]);
const [total, setTotal] = useState(0);
// const [current, setCurrent] = useState(0)
const [value, setValue] = useState();
const columns = [
{
title: "玩家id",
dataIndex: "gameId",
key: "gameId",
render: (text, seed) => (
<>
<Row>
<p>{text}</p>
<CopyToClipboard text={text} onCopy={() => message.info("成功")}>
<CopyOutlined />
</CopyToClipboard>
</Row>
<Row align="middle">
<SmileOutlined onClick={() => like(seed)} />
<p>{seed.likes}</p>
</Row>
<Row align="middle">
<FrownOutlined onClick={() => dislike(seed)} />
<p>{seed.dislikes}</p>
</Row>
{seed.userId === userId && (
<Row align="middle">
<DeleteOutlined onClick={() => deleteSeed(seed)} />
</Row>
)}
</>
),
},
{
title: "主要",
dataIndex: "playerId0",
key: "playerId0",
render: (text) => <PlayerImage id={text} />,
},
{
title: "蓝色因子",
dataIndex: "blue0",
key: "blue0",
render: (text, record) => (
<span className="rate-label">{`${SEED_BLUE_LABELS[text]}\xa0\xa0${record["blueLevel0"]}`}</span>
),
},
{
title: "红色因子",
dataIndex: "red0",
key: "red0",
render: (text, record) => (
<span className="rate-label">{`${SEED_RED_LABELS[text]}\xa0\xa0${record["redLevel0"]}`}</span>
),
},
{
title: "绿色因子",
dataIndex: "greenLevel0",
key: "greenLevel0",
render: (text, record) => (
<span className="rate-label">{`固有\xa0\xa0${record["greenLevel0"]}`}</span>
),
},
{
title: "URA",
dataIndex: "uraLevel0",
key: "uraLevel0",
render: (text, record) => (
<span className="rate-label">
{`${record["uraLevel0"] ? `URA ${record["uraLevel0"]}` : ""}`}
</span>
),
},
{
title: "父辈1",
dataIndex: "playerId1",
key: "playerId1",
render: (text) => <PlayerImage id={text} />,
},
{
title: "父辈2",
dataIndex: "playerId2",
key: "playerId2",
render: (text) => <PlayerImage id={text} />,
},
{
title: "总计蓝色",
key: "allBlue",
render: (text, record) =>
Object.keys(SEED_BLUE_LABELS).map((key) => {
if (record[key]) {
return (
<span
key={key}
className="rate-label"
>{`${SEED_BLUE_LABELS[key]}\xa0\xa0${record[key]}`}</span>
);
} else {
return null;
}
}),
},
{
title: "总计红色",
key: "allRed",
render: (text, record) =>
Object.keys(SEED_RED_LABELS).map((key) => {
if (record[key]) {
return (
<span
key={key}
className="rate-label"
>{`${SEED_RED_LABELS[key]}\xa0\xa0${record[key]}`}</span>
);
} else {
return null;
}
}),
},
{ title: "总计URA", dataIndex: "uraLevel", key: "uraLevel", render: (text) => text },
{ title: "总计白色", dataIndex: "white", key: "white", render: (text) => text },
{
title: "支援卡",
dataIndex: "supportId",
key: "supportId",
render: (text) => <SupportImage id={text} />,
},
{
title: "突破等级",
dataIndex: "supportLevel",
key: "supportLevel",
render: (text, record) => (
<Row>
<Rate count={4} value={record["supportLevel"]} disabled />
</Row>
),
},
];
const showSeedInput = (index) => {
setIsSeedInputVisible(true);
};
const closeSeedInput = () => {
setIsSeedInputVisible(false);
};
const showMySeed = () => {
search({ attrs: ["userId"], levels: [userId] });
};
const deleteSeed = async (value) => {
const res = await axios.post("https://urarawin.com/api/sqlite/delete", value);
if (res.data) {
message.info("成功删除");
} else {
message.info("出错了");
}
};
const search = async (value) => {
setValue(value);
const res = await axios.post("https://urarawin.com/api/sqlite/search", value);
// setCurrent(0)
if (res.data) {
if (res.data.count) {
setSeedList([...res.data.list]);
setTotal(res.data.count);
} else {
setSeedList([]);
setTotal(0);
message.info("暂无数据");
}
} else {
message.info("出错了");
}
};
const like = async (seed) => {
if (!userId) {
message.info("刷新后重试");
return;
}
let id = seed.id;
const res = await axios.post("https://urarawin.com/api/sqlite/like", { id, userId });
if (res.data) {
message.info("成功");
seed.likes += 1;
}
setSeedList([...seedList]);
};
const dislike = async (seed) => {
if (!userId) {
message.info("刷新后重试");
return;
}
let id = seed.id;
const res = await axios.post("https://urarawin.com/api/sqlite/dislike", { id, userId });
if (res.data) {
message.info("成功");
seed.dislikes += 1;
}
setSeedList([...seedList]);
};
const onChange = (e) => {
search({
...value,
count: e.total,
offset: e.current * 10 - 10,
});
};
return (
<>
<div className="seed-container">
<Card className="card" title="过滤条件">
<SearchForm search={search} />
<Button onClick={() => showSeedInput()}>配置我的种子</Button>
<Button onClick={() => showMySeed()}>查看我的种子</Button>
</Card>
<Card className="card" title="结果">
<Table
columns={columns}
dataSource={seedList}
onChange={onChange}
pagination={{
pageSize: 10,
total: total,
simple: true,
showQuickJumper: false,
position: ["topRight", "bottomRight"],
}}
rowKey={"id"}
/>
</Card>
</div>
<Modal
visible={isSeedInputVisible}
onOk={closeSeedInput}
onCancel={closeSeedInput}
footer={null}
width={"80%"}
>
<SeedInput onFinish={closeSeedInput} />
</Modal>
</>
);
}
