✨ feat: 初步完成 hsl、hsv 支持

Author: arvinxx

packages/color-picker/package.json

@@ -27,10 +27,12 @@
     "classnames": "^2.3.1",
     "lodash": "^4.17.21",
     "reactcss": "^1.2.3",
+    "rxjs": "^7.5.5",
     "tinycolor2": "^1.4.2",
     "zustand": "^3.7.1"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.181"
+    "@types/lodash": "^4.14.181",
+    "@types/reactcss": "^1.2.6"
   }
 }

packages/color-picker/src/ColorPicker.md

@@ -4,7 +4,7 @@ order: 2
 group:
   path: /
 nav:
-  path: /components
+  path: /biz-components
 ---
 
 # ColorPicker 取色器

packages/color-picker/src/components/DraggableLabel/index.less

@@ -0,0 +1,12 @@
+.avx-color-fields-label {
+  width: 31px;
+
+  line-height: 1;
+  text-align: center;
+  text-transform: capitalize;
+  cursor: ew-resize;
+  user-select: none;
+  &:active {
+    color: hsla(0, 0%, 0%, 0.65);
+  }
+}

packages/color-picker/src/components/DraggableLabel/index.tsx

@@ -0,0 +1,61 @@
+import type { CSSProperties, FC } from 'react';
+import React, { memo, useEffect, useMemo } from 'react';
+import { fromEvent, Subject, BehaviorSubject } from 'rxjs';
+import { distinctUntilChanged, withLatestFrom, concatMap, takeUntil, map } from 'rxjs/operators';
+import cls from 'classnames';
+
+import './index.less';
+
+interface DraggableLabelProps {
+  text: string;
+  value?: number;
+  onChange?: (value: number) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const DraggableLabel: FC<DraggableLabelProps> = memo(
+  ({ text, onChange, value, className, style }) => {
+    const currentValue$ = useMemo(() => new BehaviorSubject(value), []);
+    const mouseDown$ = useMemo(() => new Subject(), []);
+
+    useEffect(() => {
+      currentValue$.next(value);
+    }, [value]);
+
+    useEffect(() => {
+      mouseDown$
+        .pipe(
+          concatMap(() =>
+            fromEvent<MouseEvent>(window, 'mousemove').pipe(
+              takeUntil(fromEvent(window, 'mouseup')),
+            ),
+          ),
+          map((e) => e.movementX),
+          withLatestFrom(currentValue$, (movementX, value) => Math.round(value + movementX)),
+          distinctUntilChanged(),
+        )
+        .subscribe((value) => {
+          onChange?.(value);
+        });
+
+      return () => {
+        mouseDown$.unsubscribe();
+      };
+    }, []);
+
+    return (
+      <div
+        className={cls(`avx-color-fields-label`, className)}
+        onMouseDown={(e) => {
+          mouseDown$.next(e);
+        }}
+        style={style}
+      >
+        {text}
+      </div>
+    );
+  },
+);
+
+export default DraggableLabel;

packages/color-picker/src/components/EditableInput/index.less

@@ -0,0 +1,8 @@
+.avx-color-fields-input {
+  width: 100%;
+  padding: 2px 3px;
+  font-size: 12px;
+  border: none;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px #ccc;
+}

packages/color-picker/src/components/EditableInput/index.tsx

@@ -0,0 +1,30 @@
+import type { CSSProperties, FC } from 'react';
+import React from 'react';
+import cls from 'classnames';
+
+import './index.less';
+
+export interface EditableInputProps {
+  value: number | string;
+
+  onChange: (value) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const EditableInput: FC<EditableInputProps> = ({ value, style, className, onChange }) => {
+  return (
+    <input
+      className={cls('avx-color-fields-input', className)}
+      value={value}
+      // onKeyDown={this.handleKeyDown}
+      // onChange={this.handleChange}
+      onChange={onChange}
+      // onBlur={this.handleBlur}
+      spellCheck="false"
+      style={style}
+    />
+  );
+};
+
+export default EditableInput;

packages/color-picker/src/components/SketchFields.tsx

@@ -0,0 +1,73 @@
+.avx-color-fields {
+  &-hex {
+    flex: 2;
+    width: 56px;
+  }
+
+  &-input {
+    width: 31px;
+  }
+
+  &-switcher {
+    position: relative;
+    padding: 2px 0;
+    border-radius: 4px;
+
+    &:hover {
+      background: hsla(0, 0, 0, 0.04);
+    }
+  }
+
+  &-switcher:hover &-select {
+    opacity: 1;
+  }
+
+  &-select {
+    position: absolute;
+    top: 0;
+    left: 0px;
+
+    display: flex;
+    align-items: center;
+
+    width: 16px;
+    height: 100%;
+    padding: 0 2px;
+
+    //
+    background: none;
+
+    border: none;
+    border-radius: 4px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+
+    cursor: pointer;
+    opacity: 0;
+
+    &:hover {
+      background: hsla(0, 0, 0, 0.02);
+    }
+
+    &:focus-visible {
+      outline-width: 0;
+    }
+  }
+
+  &-label-ctn {
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 12px;
+  }
+
+  &-label {
+    &-hex {
+      width: 48px;
+      padding-left: 8px;
+    }
+
+    &-alpha,
+    &-hex {
+      padding: 2px 0;
+    }
+  }
+}