4b6c4ed546
fix AF-1454
1. move inline tags editor to components
2. add progress component
3. adjust doc properties styles for desktop
4. subscribe bs database links and display in doc info
5. move update/create dates to doc info
6. a trivial e2e test
<div class='graphite__hidden'>
<div>🎥 Video uploaded on Graphite:</div>
<a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/eed266c1-fdac-4f0e-baa9-4aa00d14a2e8.mp4">
<img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/eed266c1-fdac-4f0e-baa9-4aa00d14a2e8.mp4">
</a>
</div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/eed266c1-fdac-4f0e-baa9-4aa00d14a2e8.mp4">10月23日.mp4</video>
52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import * as RadixProgress from '@radix-ui/react-progress';
|
|
import * as RadixSlider from '@radix-ui/react-slider';
|
|
import clsx from 'clsx';
|
|
|
|
import * as styles from './progress.css';
|
|
|
|
export interface ProgressProps {
|
|
/**
|
|
* The value of the progress bar.
|
|
* A value between 0 and 100.
|
|
*/
|
|
value: number;
|
|
onChange?: (value: number) => void;
|
|
onBlur?: () => void;
|
|
readonly?: boolean;
|
|
className?: string;
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
export const Progress = ({
|
|
value,
|
|
onChange,
|
|
onBlur,
|
|
readonly,
|
|
className,
|
|
style,
|
|
}: ProgressProps) => {
|
|
return (
|
|
<div className={clsx(styles.root, className)} style={style}>
|
|
<RadixProgress.Root className={styles.progress} value={value}>
|
|
<RadixProgress.Indicator
|
|
className={styles.indicator}
|
|
style={{ width: `${value}%` }}
|
|
/>
|
|
{!readonly ? (
|
|
<RadixSlider.Root
|
|
className={styles.sliderRoot}
|
|
min={0}
|
|
max={100}
|
|
value={[value]}
|
|
onValueChange={values => onChange?.(values[0])}
|
|
onBlur={onBlur}
|
|
>
|
|
<RadixSlider.Thumb className={styles.thumb} />
|
|
</RadixSlider.Root>
|
|
) : null}
|
|
</RadixProgress.Root>
|
|
<div className={styles.label}>{value}%</div>
|
|
</div>
|
|
);
|
|
};
|