From f04ddaaa769d25a274a921d5d2ff5133a00687b1 Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Mon, 9 Dec 2024 17:51:05 +0800 Subject: [PATCH] Remove output component --- .../slider-change-committed-lag.tsx | 2 +- packages/react/src/slider/index.parts.ts | 1 - .../src/slider/output/SliderOutput.test.tsx | 99 ------------------- .../react/src/slider/output/SliderOutput.tsx | 73 -------------- .../src/slider/output/useSliderOutput.ts | 83 ---------------- 5 files changed, 1 insertion(+), 257 deletions(-) delete mode 100644 packages/react/src/slider/output/SliderOutput.test.tsx delete mode 100644 packages/react/src/slider/output/SliderOutput.tsx delete mode 100644 packages/react/src/slider/output/useSliderOutput.ts diff --git a/docs/src/app/experiments/slider-change-committed-lag.tsx b/docs/src/app/experiments/slider-change-committed-lag.tsx index 5ccb72aeb6..b8562483a8 100644 --- a/docs/src/app/experiments/slider-change-committed-lag.tsx +++ b/docs/src/app/experiments/slider-change-committed-lag.tsx @@ -22,7 +22,7 @@ export default function App() { onValueChange={(newValue) => setVal1(newValue as number)} onValueCommitted={(newValue) => setVal2(newValue as number)} > - + diff --git a/packages/react/src/slider/index.parts.ts b/packages/react/src/slider/index.parts.ts index 9a470c1da5..16ad6a900b 100644 --- a/packages/react/src/slider/index.parts.ts +++ b/packages/react/src/slider/index.parts.ts @@ -1,6 +1,5 @@ export { SliderRoot as Root } from './root/SliderRoot'; export { SliderValue as Value } from './value/SliderValue'; -export { SliderOutput as Output } from './output/SliderOutput'; export { SliderControl as Control } from './control/SliderControl'; export { SliderTrack as Track } from './track/SliderTrack'; export { SliderThumb as Thumb } from './thumb/SliderThumb'; diff --git a/packages/react/src/slider/output/SliderOutput.test.tsx b/packages/react/src/slider/output/SliderOutput.test.tsx deleted file mode 100644 index 80966c31de..0000000000 --- a/packages/react/src/slider/output/SliderOutput.test.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import * as React from 'react'; -import { expect } from 'chai'; -import { Slider } from '@base-ui-components/react/slider'; -import { createRenderer, describeConformance } from '#test-utils'; -import { SliderRootContext } from '../root/SliderRootContext'; -import { NOOP } from '../../utils/noop'; - -const testRootContext: SliderRootContext = { - active: -1, - areValuesEqual: () => true, - axis: 'horizontal', - changeValue: NOOP, - direction: 'ltr', - dragging: false, - disabled: false, - getFingerNewValue: () => ({ - newValue: 0, - activeIndex: 0, - newPercentageValue: 0, - }), - handleValueChange: NOOP, - largeStep: 10, - inputIdMap: new Map(), - max: 100, - min: 0, - minStepsBetweenValues: 0, - orientation: 'horizontal', - state: { - activeThumbIndex: -1, - disabled: false, - dragging: false, - max: 100, - min: 0, - minStepsBetweenValues: 0, - orientation: 'horizontal', - step: 1, - values: [0], - valid: null, - dirty: false, - touched: false, - }, - percentageValues: [0], - registerInputId: () => ({ - deregister: NOOP, - }), - registerSliderControl: NOOP, - setActive: NOOP, - setDragging: NOOP, - setValueState: NOOP, - step: 1, - thumbRefs: { current: [] }, - values: [0], -}; - -describe('', () => { - const { render } = createRenderer(); - - describeConformance(, () => ({ - render: (node) => { - return render( - {node}, - ); - }, - refInstanceof: window.HTMLOutputElement, - })); - - it('renders a single value', async () => { - const { getByTestId } = await render( - - - , - ); - const sliderOutput = getByTestId('output'); - - expect(sliderOutput).to.have.text('40'); - }); - - it('renders a range', async () => { - const { getByTestId } = await render( - - - , - ); - const sliderOutput = getByTestId('output'); - - expect(sliderOutput).to.have.text('40 – 65'); - }); - - it('renders all thumb values', async () => { - const { getByTestId } = await render( - - - , - ); - const sliderOutput = getByTestId('output'); - - expect(sliderOutput).to.have.text('40 – 60 – 80 – 95'); - }); -}); diff --git a/packages/react/src/slider/output/SliderOutput.tsx b/packages/react/src/slider/output/SliderOutput.tsx deleted file mode 100644 index 208a189053..0000000000 --- a/packages/react/src/slider/output/SliderOutput.tsx +++ /dev/null @@ -1,73 +0,0 @@ -'use client'; -import * as React from 'react'; -import PropTypes from 'prop-types'; -import type { BaseUIComponentProps } from '../../utils/types'; -import { useComponentRenderer } from '../../utils/useComponentRenderer'; -import { useSliderRootContext } from '../root/SliderRootContext'; -import { sliderStyleHookMapping } from '../root/styleHooks'; -import type { SliderRoot } from '../root/SliderRoot'; -import { useSliderOutput } from './useSliderOutput'; -/** - * - * Demos: - * - * - [Slider](https://base-ui.com/components/react-slider/) - * - * API: - * - * - [SliderOutput API](https://base-ui.com/components/react-slider/#api-reference-SliderOutput) - */ -const SliderOutput = React.forwardRef(function SliderOutput( - props: SliderOutput.Props, - forwardedRef: React.ForwardedRef, -) { - const { render, className, ...otherProps } = props; - - const { inputIdMap, state, values, format } = useSliderRootContext(); - - const { getRootProps, formattedValues } = useSliderOutput({ - format, - inputIdMap, - values, - }); - - const { renderElement } = useComponentRenderer({ - propGetter: getRootProps, - render: render ?? 'output', - state, - className, - ref: forwardedRef, - extraProps: { - children: formattedValues, - ...otherProps, - }, - customStyleHookMapping: sliderStyleHookMapping, - }); - - return renderElement(); -}); - -export namespace SliderOutput { - export interface Props extends BaseUIComponentProps<'output', SliderRoot.State> {} -} - -export { SliderOutput }; - -SliderOutput.propTypes /* remove-proptypes */ = { - // ┌────────────────────────────── Warning ──────────────────────────────┐ - // │ These PropTypes are generated from the TypeScript type definitions. │ - // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │ - // └─────────────────────────────────────────────────────────────────────┘ - /** - * @ignore - */ - children: PropTypes.node, - /** - * Class names applied to the element or a function that returns them based on the component's state. - */ - className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - /** - * A function to customize rendering of the component. - */ - render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), -} as any; diff --git a/packages/react/src/slider/output/useSliderOutput.ts b/packages/react/src/slider/output/useSliderOutput.ts deleted file mode 100644 index e6b342f453..0000000000 --- a/packages/react/src/slider/output/useSliderOutput.ts +++ /dev/null @@ -1,83 +0,0 @@ -'use client'; -import * as React from 'react'; -import { formatNumber } from '../../utils/formatNumber'; -import { mergeReactProps } from '../../utils/mergeReactProps'; -import type { useSliderRoot } from '../root/useSliderRoot'; - -export function useSliderOutput( - parameters: useSliderOutput.Parameters, -): useSliderOutput.ReturnValue { - const { 'aria-live': ariaLive = 'off', format: formatParam, inputIdMap, values } = parameters; - - const outputFor = React.useMemo(() => { - const size = inputIdMap.size; - let htmlFor = ''; - for (let i = 0; i < size; i += 1) { - const inputId = inputIdMap.get(i); - if (!inputId) { - break; - } - htmlFor += `${inputId} `; - } - return htmlFor.trim() === '' ? undefined : htmlFor.trim(); - }, [inputIdMap]); - - let formattedValues; - - if (values.length > 1) { - formattedValues = []; - for (let i = 0; i < values.length; i += 1) { - formattedValues.push( - formatNumber(values[i], [], Array.isArray(formatParam) ? formatParam[i] : formatParam), - ); - } - } else { - formattedValues = formatNumber( - values[0], - [], - Array.isArray(formatParam) ? formatParam[0] : formatParam, - ); - } - - const getRootProps = React.useCallback( - (externalProps = {}) => { - return mergeReactProps(externalProps, { - // off by default because it will keep announcing when the slider is being dragged - // and also when the value is changing (but not yet committed) - 'aria-live': ariaLive, - htmlFor: outputFor, - }); - }, - [ariaLive, outputFor], - ); - - return React.useMemo( - () => ({ - getRootProps, - formattedValues: Array.isArray(formattedValues) - ? formattedValues.join(' – ') - : formattedValues, - }), - [getRootProps, formattedValues], - ); -} - -export namespace useSliderOutput { - export interface Parameters extends Pick { - 'aria-live'?: React.AriaAttributes['aria-live']; - /** - * Options to format the input value. - */ - format?: Intl.NumberFormatOptions | Intl.NumberFormatOptions[]; - } - - export interface ReturnValue { - getRootProps: ( - externalProps?: React.ComponentPropsWithRef<'output'>, - ) => React.ComponentPropsWithRef<'output'>; - /** - * A formatted string value for display. - */ - formattedValues: string; - } -}