diff --git a/apps/condo/domains/common/components/StatusSelect.tsx b/apps/condo/domains/common/components/StatusSelect.tsx new file mode 100644 index 00000000000..160a93e2ca1 --- /dev/null +++ b/apps/condo/domains/common/components/StatusSelect.tsx @@ -0,0 +1,40 @@ +import styled from '@emotion/styled' + +import { colors } from '@open-condo/ui/dist/colors' + +import Select from '@condo/domains/common/components/antd/Select' +import { transitions } from '@condo/domains/common/constants/style' + +interface IStatusSelect { + color: string + backgroundColor: string + minWidth?: number +} + +export const StatusSelect = styled(Select)` + min-width: ${({ minWidth }) => minWidth ? `${minWidth}px` : '175px'}; + font-weight: 700; + border-radius: 8px; + color: ${({ color }) => color}; + background-color: ${({ backgroundColor }) => backgroundColor}; + transition: ${transitions.easeInOut}; + + &.ant-select-disabled .ant-select-selector .ant-select-selection-item { + color: ${({ color }) => color}; + } + + &.ant-select-open .ant-select-selector .ant-select-selection-item { + color: ${({ color }) => color}; + } + + .ant-select-selector .ant-select-selection-item { + font-weight: 600; + color: ${colors.white}; + transition: ${transitions.easeInOut}; + } + + .ant-select-arrow svg { + fill: ${({ color }) => color}; + transition: ${transitions.easeInOut}; + } +` \ No newline at end of file diff --git a/apps/condo/domains/marketplace/components/Invoice/InvoiceStatusSelect.tsx b/apps/condo/domains/marketplace/components/Invoice/InvoiceStatusSelect.tsx index 154e1c7a984..60f0f79c38d 100644 --- a/apps/condo/domains/marketplace/components/Invoice/InvoiceStatusSelect.tsx +++ b/apps/condo/domains/marketplace/components/Invoice/InvoiceStatusSelect.tsx @@ -5,10 +5,10 @@ import React, { useCallback, useMemo, useState } from 'react' import { useIntl } from '@open-condo/next/intl' +import { StatusSelect } from '@condo/domains/common/components/StatusSelect' import { INVOICE_STATUS_CANCELED, INVOICE_STATUS_COLORS, INVOICE_STATUS_TRANSITIONS, INVOICE_PAYMENT_TYPE_ONLINE, INVOICE_STATUS_PAID } from '@condo/domains/marketplace/constants' import { useCancelStatusModal } from '@condo/domains/marketplace/hooks/useCancelStatusModal' import { Invoice } from '@condo/domains/marketplace/utils/clientSchema' -import { StatusSelect } from '@condo/domains/ticket/components/TicketStatusSelect' type InvoiceStatusOptionType = { diff --git a/apps/condo/domains/meter/components/Meters/MeterPageContent.tsx b/apps/condo/domains/meter/components/Meters/MeterPageContent.tsx index 4337bf1fc57..55626acd377 100644 --- a/apps/condo/domains/meter/components/Meters/MeterPageContent.tsx +++ b/apps/condo/domains/meter/components/Meters/MeterPageContent.tsx @@ -7,10 +7,13 @@ import React, { useCallback, useMemo, useState } from 'react' import { useIntl } from '@open-condo/next/intl' import { useOrganization } from '@open-condo/next/organization' -import { Typography, Alert, Select } from '@open-condo/ui' +import { Typography, Alert } from '@open-condo/ui' +import { colors } from '@open-condo/ui/dist/colors' +import Select from '@condo/domains/common/components/antd/Select' import { PageHeader } from '@condo/domains/common/components/containers/BaseLayout' import { ShowMoreFieldsButton } from '@condo/domains/common/components/ShowMoreFieldsButton' +import { StatusSelect } from '@condo/domains/common/components/StatusSelect' import B2bAppLogo from '@condo/domains/meter/components/Meters/B2bAppLogo' import ChangeMeterStatusModal from '@condo/domains/meter/components/Meters/ChangeMeterStatusModal' import { MeterAccountField, MeterCommonDateField, MeterNumberField, MeterPlaceField, MeterResourceField } from '@condo/domains/meter/components/Meters/MeterInfoFields' @@ -43,7 +46,7 @@ const MeterHeader = ({ meter, meterReportingPeriod, refetchMeter, meterType }) = const isAutomatic = get(meter, 'isAutomatic') const b2bAppId = get(meter, 'b2bApp.id') - const [meterStatus, setMeterStatus] = useState(archiveDate ? METER_STATUSES.archived : METER_STATUSES.active) + const meterStatus = useMemo(() => archiveDate ? METER_STATUSES.archived : METER_STATUSES.active, [archiveDate]) const [selectedArchiveDate, setSelectedArchiveDate] = useState(archiveDate || null) const [isShowStatusChangeModal, setIsShowStatusChangeModal] = useState(false) @@ -82,29 +85,42 @@ const MeterHeader = ({ meter, meterReportingPeriod, refetchMeter, meterType }) = const handleCloseStatusChangeModal = useCallback(() => { setIsShowStatusChangeModal(false) }, []) + + const options = useMemo(() => ([ + + {MeterIsActiveMessage} + , + + {MeterIsOutOfOrderMessage} + , + ]), [MeterIsActiveMessage, MeterIsOutOfOrderMessage]) const meterStatusTag = useMemo(() => ( -