tachybase_todo/packages/plugins/@tachybase/plugin-api-keys/src/client/Configuration/ExpiresSelect.tsx
sealday ede7ead8b1 chore(version): release v0.21.34 (#1045)
Co-authored-by: sealday <sealday@gmail.com>
Reviewed-on: daoyoucloud/tachybase#1045
2024-05-24 01:06:06 +08:00

82 lines
2.0 KiB
TypeScript

import React, { useMemo } from 'react';
import { css, useRecord } from '@tachybase/client';
import { connect, mapProps, mapReadPretty } from '@tachybase/schema';
import { useBoolean } from 'ahooks';
import { DatePicker, Select, Space, Typography } from 'antd';
import dayjs from 'dayjs';
import { useTranslation } from '../locale';
const TOMORROW = dayjs().add(1, 'days');
const spaceCSS = css`
width: 100%;
& > .ant-space-item {
flex: 1;
}
`;
const InternalExpiresSelect = (props) => {
const { onChange } = props;
const [isCustom, { toggle: toggleShowDatePicker, setFalse }] = useBoolean();
const onSelectChange = (v) => {
if (v === 'custom') {
onChange('1d');
return toggleShowDatePicker();
} else {
setFalse();
onChange(v);
}
};
const onDatePickerChange = (v: dayjs.Dayjs) => {
v = v.millisecond(0).second(0);
const NOW = dayjs().millisecond(0).second(0);
const value = `${v.diff(NOW, 'd')}d`;
onChange(value);
};
return (
<Space className={spaceCSS}>
<Select {...props} value={isCustom ? 'custom' : props.value} onChange={onSelectChange}></Select>
{isCustom ? (
<DatePicker
disabledDate={(date) => {
return date.isSameOrBefore();
}}
defaultValue={TOMORROW}
onChange={onDatePickerChange}
showToday={false}
allowClear={false}
/>
) : null}
</Space>
);
};
const ReadPretty = () => {
const { expiresIn, createdAt } = useRecord();
const { t } = useTranslation();
const expiresDate = useMemo(() => {
if (expiresIn === 'never') return t('Never expires');
return dayjs(createdAt)
.add(expiresIn?.replace('d', '') || 0, 'days')
.format('YYYY-MM-DD HH:mm:ss');
}, [createdAt, expiresIn]);
return <Typography.Text>{expiresDate}</Typography.Text>;
};
const ExpiresSelect = connect(
InternalExpiresSelect,
mapProps({
dataSource: 'options',
}),
mapReadPretty(ReadPretty),
);
export { ExpiresSelect };