init: the first public commit for AFFiNE

2026-07-18 10:36:22 +08:00 · 2022-07-22 15:49:21 +08:00
commit e3e3741393
1451 changed files with 108124 additions and 0 deletions
@@ -0,0 +1,115 @@
+import type { FC } from 'react';
+import { SliderUnstyled, sliderUnstyledClasses } from '@mui/base';
+import type { SliderUnstyledProps } from '@mui/base';
+import { alpha } from '@mui/system';
+import { styled } from '../styled';
+
+interface SliderProps {
+    defaultValue?: SliderUnstyledProps['defaultValue'];
+    step?: number;
+    min?: number;
+    max?: number;
+    marks?: SliderUnstyledProps['marks'];
+    value?: SliderUnstyledProps['value'];
+    onChange?: SliderUnstyledProps['onChange'];
+}
+
+export const Slider: FC<SliderProps> = props => {
+    return <StyledSlider {...props} />;
+};
+
+const StyledSlider = styled(SliderUnstyled)(
+    ({ theme }) => `
+    color: ${theme.affine.palette.primaryText};
+    height: 2px;
+    width: 100%;
+    padding: 13px 0;
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+    opacity: 0.75;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &.${sliderUnstyledClasses.disabled} {
+      pointer-events: none;
+      cursor: default;
+      color: #bdbdbd;
+    }
+
+    & .${sliderUnstyledClasses.rail} {
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 1px;
+      border-radius: 2px;
+      background-color: ${theme.affine.palette.tagHover};
+      opacity: 0.38;
+    }
+
+    & .${sliderUnstyledClasses.track} {
+      display: block;
+      position: absolute;
+      height: 1px;
+      border-radius: 2px;
+      background-color: currentColor;
+    }
+
+    & .${sliderUnstyledClasses.thumb} {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      margin-left: -6px;
+      margin-top: -5px;
+      box-sizing: border-box;
+      border-radius: 50%;
+      outline: 0;
+      background-color: currentColor;
+      top: 50%;
+      transform: translateY(10%);
+
+      :hover,
+      &.${sliderUnstyledClasses.focusVisible} {
+        box-shadow: 0 0 0 0.25rem ${alpha(
+            theme.palette.mode === 'light' ? '#1976d2' : '#90caf9',
+            0.15
+        )};
+      }
+
+      &.${sliderUnstyledClasses.active} {
+        box-shadow: 0 0 0 0.25rem ${alpha(
+            theme.palette.mode === 'light' ? '#1976d2' : '#90caf9',
+            0.3
+        )};
+      }
+    }
+
+    & .${sliderUnstyledClasses.mark} {
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background-color: ${theme.affine.palette.tagHover};
+      top: 50%;
+      transform: translate(-50%, -40%);
+    }
+
+    & .${sliderUnstyledClasses.markActive} {
+      background-color: ${theme.affine.palette.primaryText};
+    }
+
+    & .${sliderUnstyledClasses.valueLabel} {
+      font-family: IBM Plex Sans;
+      font-size: 14px;
+      display: block;
+      position: relative;
+      top: -1.6em;
+      text-align: center;
+      transform: translateX(-50%);
+    }
+    `
+);
@@ -0,0 +1 @@
+export { Slider } from './Slider';