@ant-design/icons#DiffOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#DiffOutlined.
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: AddressTable.tsx From wildduck-ui with MIT License | 5 votes |
|
AddressTable: React.FC = () => {
const { setAddressInformationToggle, setCreatNewAddressToggle, setAddressId } = useActions(addressLogic);
const { id }: any = useParams();
const { data, isLoading } = useAddress(id);
const { mutate } = useDeleteAddress();
const columns = React.useMemo(
() =>
getAddressColumns({
dataSource: data,
edit: (addressId: string) => {
setAddressId(addressId);
setAddressInformationToggle(true);
},
deleteAddress: (addressId: string) => mutate({ userId: id, addressId: addressId }),
}),
[data],
);
return (
<>
<Table
loading={isLoading}
size='small'
columns={columns}
dataSource={data}
pagination={_.size(data) > 10 ? null : false}
/>
<FloatingButton>
<Tooltip title='Create New Address'>
<DiffOutlined
onClick={() => {
setCreatNewAddressToggle(true);
}}
/>
</Tooltip>
</FloatingButton>
</>
);
}
Example #2
| Source File: FiltersTable.tsx From wildduck-ui with MIT License | 5 votes |
|
FiltersTable: React.FC = () => {
const { setShowAddFilterForm, setFilterId } = useActions(filtersLogic);
const { filtersList } = useValues(filtersLogic);
const params: { id: string } = useParams();
const { data, isLoading } = useFilters(params.id);
const { mutate: deleteFilter } = useDeleteFilter();
const columns = [
{
title: 'Name',
dataIndex: 'name',
filter: true,
render: (name: string, record: GetFiltersResult) => {
return {
props: {
style: { background: record.disabled ? '#ffcccb' : null },
},
children: <div>{name}</div>,
};
},
},
{
title: 'Actions',
dataIndex: 'action',
align: 'center' as const,
render: (text: string, record: GetFiltersResult) => {
return {
props: {
style: { background: record.disabled ? '#ffcccb' : null },
},
children: (
<Space>
<Tooltip title={'Edit'}>
<Button className='ant-btn-icon' shape='circle' onClick={() => setFilterId(record.id)}>
<EditFilled className={'green-color'} />
</Button>
</Tooltip>
<Tooltip title={'Delete'}>
<Button
onClick={() =>
showConfirm(() => deleteFilter({ userId: params.id, filterId: record.id }))
}
className='ant-btn-icon'
shape='circle'
>
<DeleteFilled className='red-color' />
</Button>
</Tooltip>
</Space>
),
};
},
},
];
return (
<>
<Table
size='small'
columns={getColumnsWithFilterAndSort(columns, filtersList)}
dataSource={data}
pagination={_.size(filtersList) > 10 ? null : false}
scroll={{ y: 550 }}
loading={isLoading}
></Table>
<FloatingButton>
<Tooltip title='Add New Filter'>
<DiffOutlined
onClick={() => {
setShowAddFilterForm(true);
}}
/>
</Tooltip>
</FloatingButton>
</>
);
}
Example #3
| 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 #4
| Source File: BuildingsTable.tsx From condo with MIT License | 4 votes |
|
export default function BuildingsTable (props: BuildingTableProps) {
const intl = useIntl()
const ExportAsExcel = intl.formatMessage({ id: 'ExportAsExcel' })
const CreateLabel = intl.formatMessage({ id: 'pages.condo.property.index.CreatePropertyButtonLabel' })
const SearchPlaceholder = intl.formatMessage({ id: 'filters.FullSearch' })
const PageTitleMsg = intl.formatMessage({ id: 'pages.condo.property.id.PageTitle' })
const ServerErrorMsg = intl.formatMessage({ id: 'ServerError' })
const PropertiesMessage = intl.formatMessage({ id: 'menu.Property' })
const DownloadExcelLabel = intl.formatMessage({ id: 'pages.condo.property.id.DownloadExcelLabel' })
const PropertyTitle = intl.formatMessage({ id: 'pages.condo.property.ImportTitle' })
const EmptyListLabel = intl.formatMessage({ id: 'pages.condo.property.index.EmptyList.header' })
const EmptyListMessage = intl.formatMessage({ id: 'pages.condo.property.index.EmptyList.text' })
const CreateProperty = intl.formatMessage({ id: 'pages.condo.property.index.CreatePropertyButtonLabel' })
const { role, searchPropertiesQuery, tableColumns, sortBy } = props
const { isSmall } = useLayoutContext()
const router = useRouter()
const { filters, offset } = parseQuery(router.query)
const currentPageIndex = getPageIndexFromOffset(offset, PROPERTY_PAGE_SIZE)
const { loading, error, refetch, objs: properties, count: total } = Property.useObjects({
sortBy,
where: { ...searchPropertiesQuery },
skip: (currentPageIndex - 1) * PROPERTY_PAGE_SIZE,
first: PROPERTY_PAGE_SIZE,
}, {
fetchPolicy: 'network-only',
onCompleted: () => {
props.onSearch && props.onSearch(properties)
},
})
const handleRowAction = (record) => {
return {
onClick: () => {
router.push(`/property/${record.id}/`)
},
}
}
const [downloadLink, setDownloadLink] = useState(null)
const [exportToExcel, { loading: isXlsLoading }] = useLazyQuery(
EXPORT_PROPERTIES_TO_EXCEL,
{
onError: error => {
const message = get(error, ['graphQLErrors', 0, 'extensions', 'messageForUser']) || error.message
notification.error({ message })
},
onCompleted: data => {
setDownloadLink(data.result.linkToFile)
},
},
)
const [columns, propertyNormalizer, propertyValidator, propertyCreator] = useImporterFunctions()
const [search, handleSearchChange] = useSearch<IFilters>(loading)
const isNoBuildingsData = isEmpty(properties) && isEmpty(filters) && !loading
const canManageProperties = get(role, 'canManageProperties', false)
function onExportToExcelButtonClicked () {
exportToExcel({
variables: {
data: {
where: { ...searchPropertiesQuery },
sortBy,
},
},
})
}
if (error) {
return <LoadingOrErrorPage title={PageTitleMsg} loading={loading} error={error ? ServerErrorMsg : null}/>
}
return (
<>
<EmptyListView
label={EmptyListLabel}
message={EmptyListMessage}
button={(
<ImportWrapper
objectsName={PropertiesMessage}
accessCheck={canManageProperties}
onFinish={refetch}
columns={columns}
rowNormalizer={propertyNormalizer}
rowValidator={propertyValidator}
domainTranslate={PropertyTitle}
objectCreator={propertyCreator}
>
<Button
type={'sberPrimary'}
icon={<DiffOutlined/>}
secondary
/>
</ImportWrapper>
)}
createRoute="/property/create"
createLabel={CreateProperty}
containerStyle={{ display: isNoBuildingsData ? 'flex' : 'none' }}
/>
<Row justify={'space-between'} gutter={ROW_VERTICAL_GUTTERS} hidden={isNoBuildingsData}>
<Col span={24}>
<TableFiltersContainer>
<Row justify="space-between" gutter={ROW_VERTICAL_GUTTERS}>
<Col xs={24} lg={12}>
<Row align={'middle'} gutter={ROW_BIG_HORIZONTAL_GUTTERS}>
<Col xs={24} lg={13}>
<Input
placeholder={SearchPlaceholder}
onChange={(e) => {
handleSearchChange(e.target.value)
}}
value={search}
allowClear={true}
/>
</Col>
<Col hidden={isSmall}>
{
downloadLink
? (
<Button
type={'inlineLink'}
icon={<DatabaseFilled/>}
loading={isXlsLoading}
target="_blank"
href={downloadLink}
rel="noreferrer">
{DownloadExcelLabel}
</Button>
)
: (
<Button
type={'inlineLink'}
icon={<DatabaseFilled/>}
loading={isXlsLoading}
onClick={onExportToExcelButtonClicked}>
{ExportAsExcel}
</Button>
)
}
</Col>
</Row>
</Col>
<Col xs={24} lg={6}>
<Row justify={'end'} gutter={ROW_SMALL_HORIZONTAL_GUTTERS}>
<Col hidden={isSmall}>
{
canManageProperties && (
<ImportWrapper
objectsName={PropertiesMessage}
accessCheck={canManageProperties}
onFinish={refetch}
columns={columns}
rowNormalizer={propertyNormalizer}
rowValidator={propertyValidator}
domainTranslate={PropertyTitle}
objectCreator={propertyCreator}
>
<Button
type={'sberPrimary'}
icon={<DiffOutlined/>}
secondary
/>
</ImportWrapper>
)
}
</Col>
<Col>
{
canManageProperties
? (
<Button type="sberPrimary" onClick={() => router.push('/property/create')}>
{CreateLabel}
</Button>
)
: null
}
</Col>
</Row>
</Col>
</Row>
</TableFiltersContainer>
</Col>
<Col span={24}>
<Table
scroll={getTableScrollConfig(isSmall)}
totalRows={total}
loading={loading}
dataSource={properties}
onRow={handleRowAction}
columns={tableColumns}
pageSize={PROPERTY_PAGE_SIZE}
/>
</Col>
</Row>
</>
)
}
Example #5
| Source File: index.tsx From condo with MIT License | 4 votes |
|
ContactsPageContent = ({
tableColumns,
searchContactsQuery,
role,
sortBy,
}) => {
const intl = useIntl()
const PageTitleMessage = intl.formatMessage({ id: 'pages.condo.contact.PageTitle' })
const SearchPlaceholder = intl.formatMessage({ id: 'filters.FullSearch' })
const EmptyListLabel = intl.formatMessage({ id: 'contact.EmptyList.header' })
const EmptyListMessage = intl.formatMessage({ id: 'contact.EmptyList.title' })
const CreateContact = intl.formatMessage({ id: 'AddContact' })
const ContactsMessage = intl.formatMessage({ id: 'menu.Contacts' })
const ContactTitle = intl.formatMessage({ id: 'pages.condo.contact.ImportTitle' })
const router = useRouter()
const offsetFromQuery = getPageIndexFromQuery(router.query)
const filtersFromQuery = getFiltersFromQuery<IFilters>(router.query)
const { isSmall } = useLayoutContext()
const canManageContacts = get(role, 'canManageContacts', false)
const {
refetch,
loading,
count: total,
objs: contacts,
} = Contact.useObjects({
sortBy,
where: searchContactsQuery,
skip: (offsetFromQuery * CONTACT_PAGE_SIZE) - CONTACT_PAGE_SIZE,
first: CONTACT_PAGE_SIZE,
}, {
fetchPolicy: 'network-only',
})
const handleRowAction = useCallback((record) => {
return {
onClick: () => {
router.push(`/contact/${record.id}/`)
},
}
}, [])
const [search, handleSearchChange] = useSearch<IFilters>(loading)
const [columns, contactNormalizer, contactValidator, contactCreator] = useImporterFunctions()
const isNoContactsData = isEmpty(contacts) && isEmpty(filtersFromQuery) && !loading
return (
<>
<Head>
<title>{PageTitleMessage}</title>
</Head>
<PageWrapper>
<PageHeader title={<Typography.Title style={{ margin: 0 }}>{PageTitleMessage}</Typography.Title>}/>
<TablePageContent>
<EmptyListView
label={EmptyListLabel}
message={EmptyListMessage}
button={(
<ImportWrapper
objectsName={ContactsMessage}
accessCheck={canManageContacts}
onFinish={refetch}
columns={columns}
maxTableLength={hasFeature('bigger_limit_for_import') ?
EXTENDED_RECORDS_LIMIT_FOR_IMPORT :
DEFAULT_RECORDS_LIMIT_FOR_IMPORT
}
rowNormalizer={contactNormalizer}
rowValidator={contactValidator}
objectCreator={contactCreator}
domainTranslate={ContactTitle}
exampleTemplateLink={'/contact-import-example.xlsx'}
>
<Button
type={'sberPrimary'}
icon={<DiffOutlined/>}
block
secondary
/>
</ImportWrapper>
)}
createRoute={ADD_CONTACT_ROUTE}
createLabel={CreateContact}
containerStyle={{ display: isNoContactsData ? 'flex' : 'none' }}
/>
<Row gutter={ROW_VERTICAL_GUTTERS} align={'middle'} justify={'start'} hidden={isNoContactsData}>
<Col span={24}>
<TableFiltersContainer>
<Row justify={'space-between'} gutter={ROW_VERTICAL_GUTTERS}>
<Col xs={24} lg={6}>
<Input
placeholder={SearchPlaceholder}
onChange={(e) => {
handleSearchChange(e.target.value)
}}
value={search}
allowClear
/>
</Col>
<Col>
<Row
gutter={ROW_HORIZONTAL_GUTTERS}
align={'middle'}
justify={'center'}
>
<Col hidden={isSmall}>
{
canManageContacts && (
<ImportWrapper
objectsName={ContactsMessage}
accessCheck={canManageContacts}
onFinish={refetch}
columns={columns}
maxTableLength={hasFeature('bigger_limit_for_import') ?
EXTENDED_RECORDS_LIMIT_FOR_IMPORT :
DEFAULT_RECORDS_LIMIT_FOR_IMPORT
}
rowNormalizer={contactNormalizer}
rowValidator={contactValidator}
objectCreator={contactCreator}
domainTranslate={ContactTitle}
exampleTemplateLink={'/contact-import-example.xlsx'}
>
<Button
type={'sberPrimary'}
icon={<DiffOutlined/>}
block
secondary
/>
</ImportWrapper>
)
}
</Col>
<Col>
{
canManageContacts && (
<Button
block={!isSmall}
key="left"
type={'sberPrimary'}
onClick={() => router.push(ADD_CONTACT_ROUTE)}
>
{CreateContact}
</Button>
)
}
</Col>
</Row>
</Col>
</Row>
</TableFiltersContainer>
</Col>
<Col span={24}>
<Table
scroll={getTableScrollConfig(isSmall)}
totalRows={total}
loading={loading}
dataSource={contacts}
columns={tableColumns}
onRow={handleRowAction}
pageSize={CONTACT_PAGE_SIZE}
/>
</Col>
<ExportToExcelActionBar
hidden={isSmall}
searchObjectsQuery={searchContactsQuery}
sortBy={sortBy}
exportToExcelQuery={EXPORT_CONTACTS_TO_EXCEL}
useTimeZone={false}
/>
</Row>
</TablePageContent>
</PageWrapper>
</>
)
}
Example #6
| Source File: index.tsx From condo with MIT License | 4 votes |
|
MetersPageContent = ({
searchMeterReadingsQuery,
tableColumns,
sortBy,
filterMetas,
role,
}) => {
const intl = useIntl()
const PageTitleMessage = intl.formatMessage({ id: 'pages.condo.meter.index.PageTitle' })
const EmptyListLabel = intl.formatMessage({ id: 'pages.condo.meter.index.EmptyList.header' })
const CreateMeter = intl.formatMessage({ id: 'pages.condo.meter.index.CreateMeterButtonLabel' })
const SearchPlaceholder = intl.formatMessage({ id: 'filters.FullSearch' })
const FiltersButtonLabel = intl.formatMessage({ id: 'FiltersLabel' })
const MeterReadingImportObjectsName = intl.formatMessage({ id: 'meter.import.MeterReading.objectsName.many' })
const MeterReadingImportObjectsNameManyGenitive = intl.formatMessage({ id: 'meter.import.MeterReading.objectsName.many.genitive' })
const MeterAccountNumberExistInOtherUnitMessage = intl.formatMessage({ id: 'meter.import.error.MeterAccountNumberExistInOtherUnit' })
const MeterNumberExistInOrganizationMessage = intl.formatMessage({ id: 'meter.import.error.MeterNumberExistInOrganization' })
const router = useRouter()
const { filters, offset } = parseQuery(router.query)
const currentPageIndex = getPageIndexFromOffset(offset, DEFAULT_PAGE_SIZE)
const canManageMeterReadings = get(role, 'canManageMeterReadings', false)
const {
loading,
count: total,
objs: meterReadings,
refetch,
} = MeterReading.useObjects({
sortBy,
where: searchMeterReadingsQuery,
first: DEFAULT_PAGE_SIZE,
skip: (currentPageIndex - 1) * DEFAULT_PAGE_SIZE,
}, {
fetchPolicy: 'network-only',
})
const { shouldTableScroll, isSmall } = useLayoutContext()
const [ search, handleSearchChange ] = useSearch(loading)
const { UpdateMeterModal, setSelectedMeter } = useUpdateMeterModal(refetch)
const { MultipleFiltersModal, setIsMultipleFiltersModalVisible } = useMultipleFiltersModal(filterMetas, MeterReadingFilterTemplate)
const [columns, meterReadingNormalizer, meterReadingValidator, meterReadingCreator] = useImporterFunctions()
const isNoMeterData = isEmpty(meterReadings) && isEmpty(filters) && !loading
const handleRowAction = useCallback((record) => {
return {
onClick: () => {
const meter = get(record, 'meter')
setSelectedMeter(meter)
},
}
}, [setSelectedMeter])
const handleSearch = useCallback((e) => {handleSearchChange(e.target.value)}, [handleSearchChange])
const handleMultipleFiltersButtonClick = useCallback(() => setIsMultipleFiltersModalVisible(true),
[setIsMultipleFiltersModalVisible])
const mutationErrorsToMessages = useMemo(() => ({
[EXISTING_METER_ACCOUNT_NUMBER_IN_OTHER_UNIT]: MeterAccountNumberExistInOtherUnitMessage,
[EXISTING_METER_NUMBER_IN_SAME_ORGANIZATION]: MeterNumberExistInOrganizationMessage,
}), [MeterAccountNumberExistInOtherUnitMessage, MeterNumberExistInOrganizationMessage])
return (
<>
<Head>
<title>{PageTitleMessage}</title>
</Head>
<PageWrapper>
<PageHeader title={<Typography.Title>{PageTitleMessage}</Typography.Title>}/>
<TablePageContent>
<EmptyListView
label={EmptyListLabel}
message={''}
button={(
<ImportWrapper
objectsName={MeterReadingImportObjectsName}
accessCheck={canManageMeterReadings}
onFinish={refetch}
columns={columns}
maxTableLength={
hasFeature('bigger_limit_for_import') ?
EXTENDED_RECORDS_LIMIT_FOR_IMPORT :
DEFAULT_RECORDS_LIMIT_FOR_IMPORT
}
rowNormalizer={meterReadingNormalizer}
rowValidator={meterReadingValidator}
objectCreator={meterReadingCreator}
domainTranslate={MeterReadingImportObjectsNameManyGenitive}
exampleTemplateLink={'/meter-import-example.xlsx'}
mutationErrorsToMessages={mutationErrorsToMessages}
>
<Button
type={'sberPrimary'}
icon={<DiffOutlined />}
block
secondary
/>
</ImportWrapper>
)}
createRoute='/meter/create'
createLabel={CreateMeter}
containerStyle={{ display: isNoMeterData ? 'flex' : 'none' }}
/>
<Row
gutter={METERS_PAGE_CONTENT_ROW_GUTTERS}
align={'middle'}
justify={'center'}
hidden={isNoMeterData}
>
<Col span={24}>
<TableFiltersContainer>
<Row justify={'space-between'} gutter={METERS_PAGE_CONTENT_ROW_GUTTERS}>
<Col xs={24} lg={7}>
<Input
placeholder={SearchPlaceholder}
onChange={handleSearch}
value={search}
allowClear
/>
</Col>
<Col>
<Row gutter={[10, 0]} align={'middle'} justify={'center'}>
{
canManageMeterReadings && (
<Col>
<ImportWrapper
objectsName={MeterReadingImportObjectsName}
accessCheck={canManageMeterReadings}
onFinish={refetch}
columns={columns}
maxTableLength={hasFeature('bigger_limit_for_import') ?
EXTENDED_RECORDS_LIMIT_FOR_IMPORT :
DEFAULT_RECORDS_LIMIT_FOR_IMPORT
}
rowNormalizer={meterReadingNormalizer}
rowValidator={meterReadingValidator}
objectCreator={meterReadingCreator}
domainTranslate={MeterReadingImportObjectsNameManyGenitive}
exampleTemplateLink={'/meter-import-example.xlsx'}
mutationErrorsToMessages={mutationErrorsToMessages}
>
<Button
type={'sberPrimary'}
icon={<DiffOutlined />}
block
secondary
/>
</ImportWrapper>
</Col>
)
}
<Col>
<Button
secondary
type={'sberPrimary'}
onClick={handleMultipleFiltersButtonClick}
>
<FilterFilled/>
{FiltersButtonLabel}
</Button>
</Col>
</Row>
</Col>
</Row>
</TableFiltersContainer>
</Col>
<Col span={24}>
<Table
scroll={getTableScrollConfig(shouldTableScroll)}
totalRows={total}
loading={loading}
dataSource={meterReadings}
columns={tableColumns}
onRow={handleRowAction}
/>
</Col>
<ExportToExcelActionBar
hidden={isSmall}
searchObjectsQuery={searchMeterReadingsQuery}
exportToExcelQuery={EXPORT_METER_READINGS_QUERY}
sortBy={sortBy}
/>
</Row>
<UpdateMeterModal />
<MultipleFiltersModal />
</TablePageContent>
</PageWrapper>
</>
)
}
Example #7
| Source File: ChartDraggableElementField.tsx From datart with Apache License 2.0 | 4 votes |
|
ChartDraggableElementField: FC<{
modalSize;
config;
columnConfig;
ancestors;
aggregation;
availableSourceFunctions;
onConfigChanged;
handleOpenActionModal;
}> = memo(
({
modalSize,
config,
columnConfig,
ancestors,
aggregation,
availableSourceFunctions,
onConfigChanged,
handleOpenActionModal,
}) => {
const renderActionExtensionMenu = (uid: string, type: string, category) => {
return (
<ChartDataConfigSectionActionMenu
uid={uid}
type={type}
category={category}
ancestors={ancestors}
config={config}
modalSize={modalSize}
availableSourceFunctions={availableSourceFunctions}
onConfigChanged={onConfigChanged}
onOpenModal={handleOpenActionModal}
/>
);
};
const enableActionsIcons = col => {
const icons = [] as any;
if (col.alias) {
icons.push(<DiffOutlined key="alias" />);
}
if (col.sort) {
if (col.sort.type === SortActionType.ASC) {
icons.push(<SortAscendingOutlined key="sort" />);
}
if (col.sort.type === SortActionType.DESC) {
icons.push(<SortDescendingOutlined key="sort" />);
}
}
if (col.format) {
icons.push(<FormatPainterOutlined key="format" />);
}
if (col.aggregate) {
icons.push(<GroupOutlined key="aggregate" />);
}
if (col.filter) {
icons.push(<FilterOutlined key="filter" />);
}
if (col.color) {
icons.push(<BgColorsOutlined key="color" />);
}
if (col.size) {
icons.push(<FontSizeOutlined key="size" />);
}
return icons;
};
return (
<Dropdown
key={columnConfig.uid}
disabled={!config?.actions}
destroyPopupOnHide={true}
overlay={renderActionExtensionMenu(
columnConfig.uid!,
columnConfig.type,
columnConfig.category,
)}
overlayClassName="datart-data-section-dropdown"
trigger={['click']}
>
<div>
{config?.actions && <DownOutlined style={{ marginRight: '10px' }} />}
<span>
{aggregation === false
? columnConfig.colName
: getColumnRenderName(columnConfig)}
</span>
<div style={{ display: 'inline-block', marginLeft: '5px' }}>
{enableActionsIcons(columnConfig)}
</div>
</div>
</Dropdown>
);
},
)
