@ant-design/icons#CaretRightFilled TypeScript Examples
The following examples show how to use
@ant-design/icons#CaretRightFilled.
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: FlexCollapse.tsx From datart with Apache License 2.0 | 6 votes |
|
Panel = memo(
({
id,
title,
defaultActiveKeys,
activeKeys,
children,
onChange,
}: PanelProps) => {
const [active, setActive] = useState<boolean>(
defaultActiveKeys ? defaultActiveKeys.includes(id) : false,
);
useEffect(() => {
if (activeKeys) {
setActive(activeKeys.includes(id));
}
}, [id, activeKeys]);
const toggleActive = useCallback(() => {
setActive(!active);
onChange && onChange(!active, id);
}, [active, id, onChange]);
return (
<Block className={classnames({ active })}>
<div className="title" onClick={toggleActive}>
<CaretRightFilled className="prefix" rotate={active ? 90 : 0} />
<h4>{title}</h4>
</div>
<div className="content">{children}</div>
</Block>
);
},
)
Example #2
| Source File: index.tsx From sidebar with Apache License 2.0 | 4 votes |
|
ScriptLibraryList: React.FC = () => {
const [loading, setLoading] = useState(false);
const [createModalVisible, setCreateModalVisible] = useState(false);
const [groups, setGroups] = useState<ScriptLibraryGroupItem[]>([]);
const [keyword, setKeyword] = useState<string>("");
useEffect(() => {
setLoading(true);
SearchScriptLibraryGroup({
page_size: 5000,
keyword
}).then((res: CommonItemsResp<ScriptLibraryGroupItem>) => {
setLoading(false);
if (res.code !== 0) {
message.error("获取话术库分组失败");
return
}
setGroups(res.data.items)
})
}, [keyword])
return (
<div className={styles.scriptLibraryContainer}>
<ProCard
tabs={{
type: 'line',
}}
>
<ProCard.TabPane key="corp" tab="企业话术">
<div>
<Input.Search placeholder="输入关键词" loading={loading} allowClear onSearch={(value) => {
setKeyword(value);
}}/>
</div>
<div hidden={true}>
<Button
type={'link'}
style={{padding: 0, marginTop: 12}}
icon={<PlusCircleFilled style={{color: '#1966ff'}}/>}
onClick={() => setCreateModalVisible(true)}
>新建分组</Button>
</div>
<div>
{groups.length === 0 && (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
)}
{groups.length > 0 && (
<Collapse expandIcon={(panelProps) => {
const rotate = panelProps.isActive ? 90 : 0;
return <CaretRightFilled rotate={rotate} style={{fontSize: 10, color: 'rgba(66,66,66,0.65)'}}/>
}} ghost>
{groups.map((group) => (
<Collapse.Panel header={<>{group.name}({group?.quick_replies?.length})</>} key={group.id}>
{group?.quick_replies && group?.quick_replies?.length > 0 && (
<div className={styles.scriptList}>
{group.quick_replies.map((quick_reply) => (
<Space direction={'vertical'} className={styles.scriptItem} key={quick_reply.id}>
<Space direction={'horizontal'} className={styles.scriptTitleBar}>
<span style={{width: 200}} className={styles.sendButtonWrap}>
<Button
// 发送一组话术
onClick={async () => {
await BatchSendQuickReply(quick_reply.reply_details)
}}
type={'link'}
className={styles.sendButton}
icon={getIcon('icon-fasong')}
/>
</span>
<span className={styles.title}>
{quick_reply.name}
</span>
</Space>
<Space direction={'vertical'} className={styles.replyDetailList}>
{quick_reply?.reply_details && quick_reply?.reply_details?.length > 0 && quick_reply.reply_details.map((reply_detail) => (
<Space direction={'horizontal'} className={styles.replyDetailItem}
key={reply_detail.id}>
<div className={styles.sendButtonWrap}>
<Button
// 发送单一话术
type={'link'}
onClick={async () => {
await SendQuickReply(reply_detail)
}}
className={styles.sendButton}
icon={getIcon('icon-fasong')}/>
</div>
<div>
{
reply_detail.content_type === 2 && (
<ExpandableParagraph
rows={3}
content={reply_detail.quick_reply_content.text.content}
/>
)
}
{
reply_detail.content_type === 3 &&
<div key={reply_detail.id} className={styles.replyPreviewItem}>
<div className={styles.leftPart}>
<Image src={reply_detail.quick_reply_content?.image?.picurl} fallback={fileIconImage}
/>
</div>
<div className={styles.rightPart}>
<p>{reply_detail.quick_reply_content?.image?.title}</p>
<p>{humanFileSize(reply_detail?.quick_reply_content?.image?.size)}</p>
</div>
</div>
}
{
reply_detail.content_type === 4 && <div className={styles.replyPreviewItem}>
<div className={styles.leftPart}>
<Image src={reply_detail.quick_reply_content?.link?.picurl} preview={false} fallback={fileIconImage}
/>
</div>
<div className={styles.rightPart}>
<p>{reply_detail.quick_reply_content?.link?.title}</p>
<p>{reply_detail.quick_reply_content?.link?.desc}</p>
</div>
</div>
}
{
reply_detail.content_type === 5 && <div className={styles.replyPreviewItem}>
<div className={styles.leftPart}>
<Image src={pdfImage} preview={false}/>
</div>
<div className={styles.rightPart}>
<p>{reply_detail.quick_reply_content?.pdf?.title}</p>
<p>{humanFileSize(reply_detail.quick_reply_content?.pdf?.size)}</p>
</div>
</div>
}
{
reply_detail.content_type === 6 && <div className={styles.replyPreviewItem}>
<div className={styles.leftPart}>
<video src={reply_detail.quick_reply_content?.video?.picurl}/>
</div>
<div className={styles.rightPart}>
<p>{reply_detail.quick_reply_content?.video?.title}</p>
<p>{humanFileSize(reply_detail.quick_reply_content?.video?.size)}</p>
</div>
</div>
}
</div>
</Space>
))}
</Space>
</Space>
))}
</div>
)}
</Collapse.Panel>
))}
</Collapse>
)}
</div>
</ProCard.TabPane>
<ProCard.TabPane key="staff" tab="个人话术" disabled={true}>
</ProCard.TabPane>
</ProCard>
<BottomNavBar links={[
{
title: '话术',
url: '/staff-frontend/script-library',
icon: 'icon-message-success',
},
{
title: '素材',
url: '/staff-frontend/material-library',
icon: 'icon-sucai-outline',
},
{
title: '雷达',
url: '/staff-frontend/radar',
icon: 'icon-leida',
disabled: true,
},
]}/>
<ModalForm
width={400}
className={'dialog'}
layout={'horizontal'}
visible={createModalVisible}
onVisibleChange={setCreateModalVisible}
// onFinish={async (params) =>
// HandleRequest({...currentGroup, ...params}, CreateGroup, () => {
// setGroupItemsTimestamp(Date.now);
// })
// }
>
<h2 className='dialog-title'> 新建分组 </h2>
<ProFormText
name='name'
label='分组名称'
tooltip='最长为 24 个汉字'
placeholder='请输入分组名称'
rules={[
{
required: true,
message: '请填写分组名称',
},
]}
/>
</ModalForm>
</div>
);
}
Example #3
| Source File: VizHeader.tsx From datart with Apache License 2.0 | 4 votes |
|
VizHeader: FC<{
chartName?: string;
status?: number;
publishLoading?: boolean;
chartDescription?: string;
backendChartId?: string;
onRun?;
onGotoEdit?;
onPublish?: () => void;
onGenerateShareLink?: ({
expiryDate,
authenticationMode,
roles,
users,
rowPermissionBy,
}: {
expiryDate: string;
authenticationMode: string;
roles: string[];
users: string[];
rowPermissionBy: string;
}) => any;
onDownloadData?;
onSaveAsVizs?;
onReloadData?;
onAddToDashBoard?;
onRecycleViz?;
allowDownload?: boolean;
allowShare?: boolean;
allowManage?: boolean;
orgId?: string;
}> = memo(
({
chartName,
status,
publishLoading,
chartDescription,
onRun,
onPublish,
onGotoEdit,
onGenerateShareLink,
onDownloadData,
onSaveAsVizs,
onReloadData,
onAddToDashBoard,
onRecycleViz,
allowDownload,
allowShare,
allowManage,
orgId,
backendChartId,
}) => {
const t = useI18NPrefix(`viz.action`);
const [showShareLinkModal, setShowShareLinkModal] = useState(false);
const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
const isArchived = Number(status) === 0;
const handleCloseShareLinkModal = useCallback(() => {
setShowShareLinkModal(false);
}, []);
const handleOpenShareLinkModal = useCallback(() => {
setShowShareLinkModal(true);
}, []);
const handleModalOk = useCallback(
(dashboardId: string, dashboardType: string) => {
setIsModalVisible(false);
onAddToDashBoard?.(dashboardId, dashboardType);
},
[onAddToDashBoard],
);
const handleModalCancel = useCallback(() => {
setIsModalVisible(false);
}, []);
const getOverlays = () => {
return (
<VizOperationMenu
onShareLinkClick={onGenerateShareLink && handleOpenShareLinkModal}
onDownloadDataLinkClick={onDownloadData}
onSaveAsVizs={onSaveAsVizs}
onReloadData={onReloadData}
onAddToDashBoard={onAddToDashBoard && setIsModalVisible}
allowDownload={allowDownload}
allowShare={allowShare}
allowManage={allowManage}
isArchived={isArchived}
onPublish={Number(status) === 2 ? onPublish : ''}
onRecycleViz={onRecycleViz}
/>
);
};
const title = useMemo(() => {
const base = chartName || '';
const suffix = TITLE_SUFFIX[Number(status)]
? `[${t(TITLE_SUFFIX[Number(status)])}]`
: '';
return base + suffix;
}, [chartName, status, t]);
return (
<Wrapper>
<DetailPageHeader
title={title}
description={chartDescription}
disabled={Number(status) < 2}
actions={
<>
{onRun && (
<Button key="run" icon={<CaretRightFilled />} onClick={onRun}>
{t('run')}
</Button>
)}
{allowManage && !isArchived && onPublish && Number(status) === 1 && (
<Button
key="publish"
icon={<SendOutlined />}
loading={publishLoading}
onClick={onPublish}
>
{t('publish')}
</Button>
)}
{allowManage && !isArchived && onGotoEdit && (
<Button key="edit" icon={<EditOutlined />} onClick={onGotoEdit}>
{t('edit')}
</Button>
)}
<Dropdown key="more" arrow overlay={getOverlays()}>
<Button icon={<MoreOutlined />} />
</Dropdown>
</>
}
/>
{allowShare && (
<ShareManageModal
vizId={backendChartId as string}
orgId={orgId as string}
vizType="DATACHART"
visibility={showShareLinkModal}
onOk={handleCloseShareLinkModal}
onCancel={handleCloseShareLinkModal}
onGenerateShareLink={onGenerateShareLink}
/>
)}
{onSaveAsVizs && (
<SaveToDashboard
backendChartId={backendChartId}
title={t('addToDash')}
orgId={orgId as string}
isModalVisible={isModalVisible}
handleOk={handleModalOk}
handleCancel={handleModalCancel}
></SaveToDashboard>
)}
</Wrapper>
);
},
)
Example #4
| Source File: PreviewHeader.tsx From datart with Apache License 2.0 | 4 votes |
|
PreviewHeader: FC<{
shareLink?: { password: string; token: string; usePassword: boolean };
chartName?: string;
chartDescription?: string;
onRun?;
onGotoEdit?;
onGenerateShareLink?;
}> = memo(
({
shareLink,
chartName,
chartDescription,
onRun,
onGotoEdit,
onGenerateShareLink,
}) => {
const t = useI18NPrefix(`viz.action`);
const [expireDate, setExpireDate] = useState<string>();
const [enablePassword, setEnablePassword] = useState(false);
const [showShareLinkModal, setShowShareLinkModal] = useState(false);
const moreActionMenu = () => {
const menus: any = [];
if (onGenerateShareLink) {
menus.push(
<Menu.Item
key="1"
icon={<UserOutlined />}
onClick={() => setShowShareLinkModal(true)}
>
{t('share.shareLink')}
</Menu.Item>,
);
}
return <Menu>{menus}</Menu>;
};
const handleCopyToClipboard = value => {
const ta = document.createElement('textarea');
ta.innerText = value;
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
ta.remove();
};
const getFullShareLinkPath = shareLink => {
const encodeToken = encodeURIComponent(shareLink?.token);
return `http://172.16.1.150:8080/share?token=${encodeToken}${
shareLink?.usePassword ? '&usePassword=1' : ''
}`;
};
return (
<>
<StyledPreviewHeader>
<h1>{chartName}</h1>
<Space>
<Button key="run" icon={<CaretRightFilled />} onClick={onRun}>
{t('run')}
</Button>
<Dropdown.Button
key="edit"
onClick={onGotoEdit}
overlay={moreActionMenu()}
>
{t('edit')}
</Dropdown.Button>
</Space>
<StyledShareLinkModal
title={t('share.shareLink')}
visible={showShareLinkModal}
onOk={() => {
setShowShareLinkModal(false);
}}
onCancel={() => setShowShareLinkModal(false)}
destroyOnClose
>
<Form
preserve={false}
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
autoComplete="off"
>
<FormItemEx label={t('share.expireDate')}>
<DatePicker
showTime
onChange={(date, dateString) => {
setExpireDate(dateString);
}}
/>
</FormItemEx>
<FormItemEx label={t('share.enablePassword')}>
<Checkbox
checked={enablePassword}
onChange={e => {
setEnablePassword(e.target.checked);
}}
/>
</FormItemEx>
<FormItemEx label={t('share.generateLink')}>
<Button
htmlType="button"
onClick={() =>
onGenerateShareLink(expireDate, enablePassword)
}
>
{t('share.generateLink')}
</Button>
</FormItemEx>
<FormItemEx label={t('share.link')} rules={[{ required: true }]}>
<Input
value={getFullShareLinkPath(shareLink)}
addonAfter={
<CopyOutlined
onClick={() =>
handleCopyToClipboard(getFullShareLinkPath(shareLink))
}
/>
}
/>
</FormItemEx>
{shareLink?.usePassword && (
<FormItemEx label={t('share.password')}>
<Input
value={shareLink?.password}
addonAfter={
<CopyOutlined
onClick={() =>
handleCopyToClipboard(shareLink?.password)
}
/>
}
/>
</FormItemEx>
)}
</Form>
</StyledShareLinkModal>
</StyledPreviewHeader>
{chartDescription && <Description>{chartDescription}</Description>}
</>
);
},
)
