@ant-design/icons#HighlightOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#HighlightOutlined.
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: borderColor.tsx From imove with MIT License | 6 votes |
|
options = {
tooltip: '边框颜色',
getCurBorderColor(flowChart: Graph) {
let borderColor = '#DDD';
const nodes = getSelectedNodes(flowChart);
if (!options.disabled(flowChart) && nodes.length > 0) {
borderColor = safeGet(nodes, '0.attrs.body.stroke', '#333');
}
return borderColor;
},
getIcon(flowChart: Graph) {
const borderColor = options.getCurBorderColor(flowChart);
return (
<div className={styles.borderColorContainer}>
<HighlightOutlined className={styles.borderColorIcon} />
<div
className={styles.colorPreview}
style={{ backgroundColor: borderColor }}
/>
</div>
);
},
getOverlay(flowChart: Graph, onChange: (data: any) => void) {
const borderColor = options.getCurBorderColor(flowChart);
const onChangeComplete = (color: string) => onChange(color);
return (
<ColorPicker color={borderColor} onChangeComplete={onChangeComplete} />
);
},
handler: (flowChart: Graph, value: any) => {
getSelectedNodes(flowChart).forEach((node) =>
node.setAttrs({ body: { stroke: value } }),
);
},
disabled(flowChart: Graph) {
return !hasNodeSelected(flowChart);
},
}
Example #2
| Source File: AppsPage.tsx From disco-cube-admin with MIT License | 5 votes |
|
apps: Record<
AppNames,
{
path: string;
render: () => React.ReactNode;
label: string;
icon: React.ForwardRefExoticComponent<AntdIconProps & React.RefAttributes<HTMLSpanElement>>;
}
> = {
rpiDemos: {
path: `/rpi-demos`,
label: "RPI Demos",
icon: BuildOutlined,
render: () => <ConnectedRpiDemos />,
},
video: {
path: `/video`,
label: "Video",
icon: VideoCameraOutlined,
render: () => <ConnectedVideoApp />,
},
cubemap: {
path: `/cubemap`,
label: "Cubemap",
icon: PictureOutlined,
render: () => <ConnectedCubemapApp />,
},
paint: {
path: `/paint`,
label: "Paint",
icon: HighlightOutlined,
render: () => <ConnectedPaintApp />,
},
debug: {
path: `/debug`,
label: "Debug",
icon: BugOutlined,
render: () => <ConnectedCommonApp appName={`debug`} />,
},
sparkle: {
path: `/sparkle`,
label: "Sparkle",
icon: StarOutlined,
render: () => <ConnectedCommonApp appName={`sparkle`} />,
},
sprinkles: {
path: `/sprinkles`,
label: "Sprinkles",
icon: SmallDashOutlined,
render: () => <ConnectedCommonApp appName={`sprinkles`} />,
},
particles: {
path: `/particles`,
label: "Particles",
icon: MoreOutlined,
render: () => <ConnectedCommonApp appName={`particles`} />,
},
particleFlow: {
path: `/particleFlow`,
label: "Particle Flow",
icon: DeploymentUnitOutlined,
render: () => <ConnectedCommonApp appName={`particleFlow`} />,
},
tilt: {
path: `/tilt`,
label: "Tilt",
icon: RotateRightOutlined,
render: () => <ConnectedCommonApp appName={`tilt`} />,
},
maze: {
path: `/maze`,
label: "Maze",
icon: TableOutlined,
render: () => <ConnectedCommonApp appName={`maze`} />,
},
}
Example #3
| Source File: MainMenu.tsx From mayoor with MIT License | 5 votes |
|
MainMenu: React.FC = () => {
const { t } = useTranslation();
const { currentUser } = useAppState();
return (
<StyledMenu>
<li>
<CategoryName>{t('Orders')}</CategoryName>
<LinkItem icon={<PlusCircleOutlined />} name={t('Add order')} to={'/orders/new'} />
<LinkItem
icon={<FileSearchOutlined />}
name={t('List orders')}
to={'/orders/list'}
/>
<LinkItem
icon={<BgColorsOutlined />}
name={t('To be printed')}
to={'/orders/print'}
/>
<LinkItem
icon={<HighlightOutlined />}
name={t('Waiting for production')}
to={'/orders/production'}
/>
</li>
<li>
<CategoryName>{t('Customers')}</CategoryName>
<LinkItem
icon={<UserAddOutlined />}
name={t('Add customer')}
to={'/customers/new'}
/>
<LinkItem icon={<TeamOutlined />} name={t('Customers')} to={'/customers/list'} />
</li>
{currentUser?.role === UserRole.EXECUTIVE && (
<li>
<CategoryName>{t('Administration')}</CategoryName>
<LinkItem icon={<FileTextOutlined />} name={t('Material')} to={'/materials'} />
<LinkItem icon={<TeamOutlined />} name={t('Users')} to={'/users'} />
</li>
)}
</StyledMenu>
);
}
Example #4
| Source File: index.tsx From memex with MIT License | 5 votes |
|
renderUserBehaviour(behaviour, highlights) {
const scrollLength =
behaviour.page && behaviour.page.scrollLength
? behaviour.page.scrollLength
: 0;
const timeOnPage =
behaviour.page && behaviour.page.timeOnPage
? behaviour.page.timeOnPage / 60
: 0;
let totalClicks = 0;
let totalHover = 0;
if (behaviour.elements && Object.keys(behaviour.elements).length > 0) {
for (const element in behaviour.elements) {
const el = behaviour.elements[element];
if (el.stats && el.stats.click) {
totalClicks += el.stats.click;
}
if (el.stats && el.stats.mouseover) {
totalHover += el.stats.mouseover;
}
}
}
return (
<>
<span>
<HighlightOutlined />:{highlights.length}
</span>
<span className="stat-separator" />
<span>
<FieldTimeOutlined />:{timeOnPage.toFixed(1)}m
</span>
<span className="stat-separator" />
<span>
Scroll:
{scrollLength}
px
</span>
<span className="stat-separator" />
<span>
Clicks:
{totalClicks}{' '}
</span>
<span className="stat-separator" />
<span>
Hover:
{totalHover}{' '}
</span>
</>
);
}
Example #5
| Source File: index.tsx From memex with MIT License | 5 votes |
|
renderUserBehaviour(behaviour, highlights) {
const scrollLength =
behaviour.page && behaviour.page.scrollLength
? behaviour.page.scrollLength
: 0;
const timeOnPage =
behaviour.page && behaviour.page.timeOnPage
? behaviour.page.timeOnPage / 60
: 0;
let totalClicks = 0;
let totalHover = 0;
if (behaviour.elements && Object.keys(behaviour.elements).length > 0) {
for (const element in behaviour.elements) {
const el = behaviour.elements[element];
if (el.stats && el.stats.click) {
totalClicks += el.stats.click;
}
if (el.stats && el.stats.mouseover) {
totalHover += el.stats.mouseover;
}
}
}
return (
<>
<span>
<HighlightOutlined />:{highlights.length}
</span>
<span className="stat-separator" />
<span>
<FieldTimeOutlined />:{timeOnPage.toFixed(1)}m
</span>
<span className="stat-separator" />
<span>
Scroll:
{scrollLength}
px
</span>
<span className="stat-separator" />
<span>
Clicks:
{totalClicks}{' '}
</span>
<span className="stat-separator" />
<span>
Hover:
{totalHover}{' '}
</span>
</>
);
}
Example #6
| Source File: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
Example #7
| Source File: index.tsx From ant-simple-draw with MIT License | 4 votes |
|
ImageGallery: FC<ImageGalleryType> = memo(function ImageGallery({
visible,
onCancel,
callBack,
}) {
const handCancel = () => {
onCancel();
};
const selectImage = (url: string) => {
callBack && callBack(url);
handCancel();
};
return (
<>
<Modal
forceRender
width={'65%'}
visible={visible}
title={null}
maskClosable={false}
onCancel={handCancel}
bodyStyle={{ paddingLeft: '10px' }}
footer={null}
>
<Tabs defaultActiveKey="1" tabPosition="left">
<TabPane
tab={
<TabTitle
title={'个人库'}
icon={<HighlightOutlined style={{ margin: 0 }} />}
position="left"
/>
}
>
<ul>
<li
onClick={() =>
selectImage(
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
)
}
>
<img
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
alt="tu"
width={100}
/>
</li>
<li
onClick={() => selectImage('https://i.ibb.co/377K3nW/20200108-213753-A9-TH8.jpg')}
>
<img
src="https://i.ibb.co/377K3nW/20200108-213753-A9-TH8.jpg"
alt="tu"
width={100}
/>
</li>
</ul>
</TabPane>
<TabPane
key="2"
tab={
<TabTitle
title={'照片库'}
icon={<HighlightOutlined style={{ margin: 0 }} />}
position="left"
/>
}
>
Content of Tab Pane 2
</TabPane>
<TabPane
key="3"
tab={
<TabTitle
title={'背景库'}
icon={<HighlightOutlined style={{ margin: 0 }} />}
position="left"
/>
}
>
Content of Tab Pane 3
</TabPane>
</Tabs>
</Modal>
</>
);
})
Example #8
| Source File: SliderComponent.tsx From ant-simple-draw with MIT License | 4 votes |
|
Slider = memo(function Slider() {
const dispatch = useDispatch();
const [tabKey, setTabKey] = useState<string>('1');
const [zenMode] = useSelector(
createSelector([(state: storeType) => state.config], ({ zenMode }) => [zenMode] as const),
);
const { getAllBaseModuleConfigList, textConfigList, pictureGather, graphicsData } =
useGetCompentConfigList();
const [isShowLeftComponents, setIsShowLeftComponents] = useState<boolean>(true);
const toggleShowLeftComponents = () => {
setIsShowLeftComponents((pre) => !pre);
};
useEffect(() => {
if (zenMode) {
setIsShowLeftComponents(false);
} else {
setIsShowLeftComponents(true);
}
}, [zenMode]);
const tabBarExtraContent = useMemo(() => {
return (
<div onClick={toggleShowLeftComponents} className={styles.tabBarExtraContent}>
{isShowLeftComponents ? <DoubleLeftOutlined /> : <DoubleRightOutlined />}
</div>
);
}, [isShowLeftComponents]);
const Render = useMemo(() => {
const mergeList = [
{
category: 'text',
title: '文本',
componentList: textConfigList,
},
{
category: 'picture',
title: '图片',
componentList: pictureGather,
},
{
category: 'graphics',
title: '图形',
componentList: graphicsData,
},
{
category: 'base',
title: '基础',
componentList: getAllBaseModuleConfigList,
},
];
return mergeList.map((item, index) => (
<React.Fragment key={index}>
<TabPane
key={index + 1}
tab={<TabTitle title={item.title} icon={<HighlightOutlined style={{ margin: 0 }} />} />}
>
<div
className={styles.leftMoveAnimate}
style={{
width: isShowLeftComponents ? '300px' : '0px',
opacity: isShowLeftComponents ? '1' : '0',
}}
>
<div className={styles.leftContainer}>
<div className={styles.search}>
<Input placeholder="请选择" prefix={<SearchOutlined />} allowClear />
</div>
{['picture', 'base', 'graphics'].includes(item.category) ? (
<>
<SecondaryList
data={item.componentList as getAllConfigListType[]}
fatherData={item as getAllConfigListType}
/>
</>
) : null}
{item.category === 'text' ? (
<div
className={styles.contentContainer}
style={{
visibility: isShowLeftComponents ? 'visible' : 'hidden',
}}
>
<Drag list={item.componentList as templateDataType[]} category={item.category} />
</div>
) : null}
</div>
</div>
</TabPane>
</React.Fragment>
));
}, [
getAllBaseModuleConfigList,
textConfigList,
pictureGather,
graphicsData,
isShowLeftComponents,
]);
return (
<>
<Tabs
tabPosition="left"
tabBarExtraContent={tabBarExtraContent}
onChange={(val) => setTabKey(val)}
>
{Render}
</Tabs>
</>
);
})
Example #9
| Source File: DetailOrder.tsx From mayoor with MIT License | 4 votes |
|
DetailOrder: React.FC = () => {
const routeParams = useParams<{ id: string }>();
const { t } = useTranslation();
const history = useHistory();
const { data } = useQuery<GetOrder, GetOrderVariables>(GET_ORDER, {
variables: { number: Number(routeParams.id) },
});
const orderTitle = t('Order #{{number}} {{customerName}}', {
number: data?.getOrderByNumber?.number,
customerName: data?.getOrderByNumber?.customer?.name,
});
useEffect(() => {
document.title = `${orderTitle} | mayoor`;
}, [data?.getOrderByNumber?.number]);
const initialValues = mapToOrderFormValues(data);
const [updateOrder, { loading }] = useMutation<UpdateOrder, UpdateOrderVariables>(UPDATE_ORDER);
const [deleteOrder, { loading: deleteLoading }] = useMutation<
DeleteOrder,
DeleteOrderVariables
>(DELETE_ORDER);
const submitHandler = async (orderValues: OrderFormValues) => {
const { urgency, status, customerId, totalPrice, totalTax, note } = orderValues;
const id = data?.getOrderByNumber?.id;
if (!id) {
return;
}
try {
await updateOrder({
variables: {
id,
input: {
urgency,
status,
customerId,
totalPrice: totalPrice || 0,
totalTax: totalTax || 0,
note,
items: orderValues.items.map((item) => ({
...item,
totalTax: item.totalTax || 0,
totalPrice: item.totalPrice || 0,
})),
},
},
});
message.success(t('order_updated'));
} catch (err) {
console.error(err);
message.error(t('order_update_fail'));
}
};
const handleOrderDelete = async () => {
const id = data?.getOrderByNumber?.id;
if (!id) {
return;
}
try {
await deleteOrder({ variables: { id } });
message.info(t('order_deleted'));
history.push(`/orders/list`);
} catch (err) {
console.error(err);
message.error(t('order_delete_fail'));
}
};
if (!data || !data.getOrderByNumber) {
return (
<PageTitle>
<Skeleton active />
</PageTitle>
);
}
return (
<>
<Row>
<Col sm={12}>
<PageTitle>{orderTitle}</PageTitle>
</Col>
<Col sm={12}>
<Row justify="end">
<OrderActionsWrapper>
<ButtonGroup>
<Link to={`/orders/${data.getOrderByNumber.number}/print`}>
<Button icon={<BgColorsOutlined />}>{t('Print view')}</Button>
</Link>
<Link to={`/orders/${data.getOrderByNumber.number}/production`}>
<Button icon={<HighlightOutlined />}>
{t('Production view')}
</Button>
</Link>
<Popconfirm
title={t('Are you sure want to remove this order?')}
onConfirm={handleOrderDelete}
placement="topRight"
okText={t('Delete')}
okType="danger"
>
<Button
icon={<DeleteOutlined />}
loading={deleteLoading}
data-test-id="order-delete-button"
>
{t('Delete')}
</Button>
</Popconfirm>
</ButtonGroup>
</OrderActionsWrapper>
</Row>
</Col>
</Row>
<DetailDescription
createdAt={data?.getOrderByNumber?.createdAt}
createdByName={data?.getOrderByNumber?.createdBy.name}
updatedAt={data?.getOrderByNumber?.updatedAt}
></DetailDescription>
{initialValues ? (
<OrderForm
initialValues={initialValues}
onSubmit={submitHandler}
extraCustomer={data?.getOrderByNumber?.customer ?? null}
isNumberEditable={false}
submitButton={
<Button
type="primary"
htmlType="submit"
style={{ marginTop: 10 }}
loading={loading}
data-test-id="save-order-submit-button"
>
{t('Save order')}
</Button>
}
/>
) : (
<CenteredSpinner />
)}
</>
);
}
