xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SegmentedControl组件更名为HSegmentedControl。

Browse Source
This commit is contained in:
徐涛 2024-12-30 16:47:30 +08:00
parent 6bf52c603a
commit 49ebeb28d6
3 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ColorStand.tsx
View File

@ -5,8 +5,8 @@ import { useCopyToClipboard } from 'react-use';
import NoColor from '../assets/NoColor.svg'; import NoColor from '../assets/NoColor.svg';
import { useColorFunction } from '../ColorFunctionContext'; import { useColorFunction } from '../ColorFunctionContext';
import styles from './ColorStand.module.css'; import styles from './ColorStand.module.css';
import { HSegmentedControl } from './HSegmentedControl';
import { NotificationType, useNotification } from './Notifications'; import { NotificationType, useNotification } from './Notifications';
import { SegmentedControl } from './SegmentedControl';
type ColorValueProps = { type ColorValueProps = {
value: string | null; value: string | null;
@ -102,7 +102,7 @@ export function ColorStand({ title, color }: ColorStandProps) {
</div> </div>
</div> </div>
<div className={styles.color_describe}> <div className={styles.color_describe}>
<SegmentedControl <HSegmentedControl
options={[ options={[
{ label: 'HEX', value: 'hex' }, { label: 'HEX', value: 'hex' },
{ label: 'RGB', value: 'rgb' }, { label: 'RGB', value: 'rgb' },

0
src/components/SegmentedControl.module.css → src/components/HSegmentedControl.module.css
View File

4
src/components/SegmentedControl.tsx → src/components/HSegmentedControl.tsx
View File

@ -1,7 +1,7 @@
import cx from 'clsx'; import cx from 'clsx';
import { isEqual, isNil } from 'lodash-es'; import { isEqual, isNil } from 'lodash-es';
import { useCallback, useRef, useState } from 'react'; import { useCallback, useRef, useState } from 'react';
import styles from './SegmentedControl.module.css'; import styles from './HSegmentedControl.module.css';
type Option = { type Option = {
label: string; label: string;
@ -14,7 +14,7 @@ type SegmentedConttrolProps = {
onChange?: (value: Option['value']) => void; onChange?: (value: Option['value']) => void;
}; };
export function SegmentedControl({ options = [], value, onChange }: SegmentedConttrolProps) { export function HSegmentedControl({ options = [], value, onChange }: SegmentedConttrolProps) {
const [selected, setSelected] = useState(value ?? options[0].value ?? null); const [selected, setSelected] = useState(value ?? options[0].value ?? null);
const [sliderPosition, setSliderPosition] = useState(0); const [sliderPosition, setSliderPosition] = useState(0);
const [sliderWidth, setSliderWidth] = useState(0); const [sliderWidth, setSliderWidth] = useState(0);