From c5cae30ffbd03d35363ea8ded038d70b9dcdc29d Mon Sep 17 00:00:00 2001 From: ns065186 Date: Tue, 24 Oct 2023 00:07:46 -0500 Subject: [PATCH] Add translations logic, update to functional component --- packages/terra-slider/src/Slider.jsx | 131 ++++++++---------- .../terra-slider/tests/jest/Slider.test.jsx | 21 +-- .../jest/__snapshots__/Slider.test.jsx.snap | 6 +- packages/terra-slider/translations/en-US.json | 3 +- packages/terra-slider/translations/en.json | 3 +- 5 files changed, 79 insertions(+), 85 deletions(-) diff --git a/packages/terra-slider/src/Slider.jsx b/packages/terra-slider/src/Slider.jsx index 0fc3a0be822..a2fc3c96e3b 100644 --- a/packages/terra-slider/src/Slider.jsx +++ b/packages/terra-slider/src/Slider.jsx @@ -1,8 +1,11 @@ -import React from 'react'; +import React, { + useContext, useState, useRef, +} from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames/bind'; import ThemeContext from 'terra-theme-context'; import VisuallyHiddenText from 'terra-visually-hidden-text'; +import { injectIntl } from 'react-intl'; import { v4 as uuidv4 } from 'uuid'; import styles from './Slider.module.scss'; @@ -48,6 +51,12 @@ const propTypes = { * Function to trigger when user changes the input value. Sends parameter {Event} event. */ onChange: PropTypes.func, + + /** + * @private + * The intl object containing translations. This is retrieved from the context automatically by injectIntl. + */ + intl: PropTypes.shape({ formatMessage: PropTypes.func, locale: PropTypes.string }), }; const defaultProps = { @@ -55,77 +64,59 @@ const defaultProps = { onChange: undefined, }; -class Slider extends React.Component { - constructor(props) { - super(props); - this.state = { - value: this.props.value, - }; - this.handleOnChange = this.handleOnChange.bind(this); - this.sliderRef = React.createRef(); - } - - componentDidUpdate(prevProps) { - if (this.props.value === prevProps.value) { - return; +const Slider = props => { + const { + isDisabled, + intl, + minimumValue, + maximumValue, + label, + minimumLabel, + maximumLabel, + } = props; + + const theme = useContext(ThemeContext); + const sliderClassNames = cx([ + 'slider', + theme.className, + ]); + const sliderRef = useRef(); + const minLabel = minimumLabel || minimumValue; + const maxLabel = maximumLabel || maximumValue; + const visuallyHiddenTextValue = (minimumLabel && maximumLabel) + ? intl.formatMessage({ id: 'Terra.slider.ariaDescribedByTextWithLabels' }, { + minimumLabel, maximumLabel, minimumValue, maximumValue, + }) + : intl.formatMessage({ id: 'Terra.slider.ariaDescribedByTextWithoutLabels' }, { minimumValue, maximumValue }); + const descriptionId = uuidv4(); + const [value, setValue] = useState(props.value); + + const handleOnChange = (event) => { + setValue(event.currentTarget.value); + if (props.onChange) { + props.onChange(event); } - // eslint-disable-next-line react/no-did-update-set-state - this.setState({ - value: this.props.value, - }); - } - - handleOnChange(event) { - this.setState({ value: event.currentTarget.value }); - if (this.props.onChange) { - this.props.onChange(event); - } - } - - render() { - const { - isDisabled, - minimumValue, - maximumValue, - label, - minimumLabel, - maximumLabel, - } = this.props; - - const theme = this.context; - const sliderClassNames = cx([ - 'slider', - theme.className, - ]); - - const minLabel = minimumLabel || minimumValue; - const maxLabel = maximumLabel || maximumValue; - const visuallyHiddenTextValue = (minimumLabel || maximumLabel) - ? `Adjust slider to select a value between ${minimumLabel} (${minimumValue}) and ${maximumLabel} (${maximumValue})` - : `Adjust slider to select a value between ${minimumValue} and ${maximumValue}`; - const descriptionId = uuidv4(); - - return ( - /* eslint-disable-next-line react/forbid-dom-props */ -
- - - - - -
- ); - } -} + }; + + return ( + /* eslint-disable-next-line react/forbid-dom-props */ +
+ + + + + +
+ ); +}; Slider.propTypes = propTypes; Slider.defaultProps = defaultProps; -Slider.contextType = ThemeContext; -export default Slider; +export default injectIntl(Slider); diff --git a/packages/terra-slider/tests/jest/Slider.test.jsx b/packages/terra-slider/tests/jest/Slider.test.jsx index b9d4a176924..842ec87326d 100644 --- a/packages/terra-slider/tests/jest/Slider.test.jsx +++ b/packages/terra-slider/tests/jest/Slider.test.jsx @@ -1,5 +1,7 @@ import React from 'react'; import { v4 as uuidv4 } from 'uuid'; +/* eslint-disable-next-line import/no-extraneous-dependencies */ +import { shallowWithIntl } from 'terra-enzyme-intl'; import Slider from '../../src/Slider'; let mockSpyUuid; @@ -13,9 +15,9 @@ afterAll(() => { describe('Slider', () => { it('should render a default slider with proper required props', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , - ); + ).dive(); expect(wrapper).toMatchSnapshot(); expect(wrapper.find('.label').text()).toEqual('testLabel'); expect(wrapper.find('input').prop('min')).toEqual(0); @@ -24,29 +26,28 @@ describe('Slider', () => { }); it('should render a disabled slider', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , - ); + ).dive(); expect(wrapper.find('input').prop('disabled')).toEqual(true); expect(wrapper).toMatchSnapshot(); }); it('should render a slider with custom min and max labels', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , - ); + ).dive(); expect(wrapper.find('.slider-label').at(0).text()).toEqual('testMinimumLabel'); expect(wrapper.find('.slider-max-label').text()).toEqual('testMaximumLabel'); expect(wrapper).toMatchSnapshot(); }); it('should update slider value correctly ', () => { - const wrapper = shallow( + const wrapper = shallowWithIntl( , ); - expect(wrapper.find('input').prop('value')).toEqual(50); + expect(wrapper.dive().find('input').prop('value')).toEqual(50); wrapper.setProps({ value: 30 }); - wrapper.update(); - expect(wrapper.find('input').prop('value')).toEqual(30); + expect(wrapper.dive().find('input').prop('value')).toEqual(30); }); }); diff --git a/packages/terra-slider/tests/jest/__snapshots__/Slider.test.jsx.snap b/packages/terra-slider/tests/jest/__snapshots__/Slider.test.jsx.snap index 35e460c8677..ba4989ac0cf 100644 --- a/packages/terra-slider/tests/jest/__snapshots__/Slider.test.jsx.snap +++ b/packages/terra-slider/tests/jest/__snapshots__/Slider.test.jsx.snap @@ -40,7 +40,7 @@ exports[`Slider should render a default slider with proper required props 1`] = `; @@ -85,7 +85,7 @@ exports[`Slider should render a disabled slider 1`] = ` `; @@ -130,7 +130,7 @@ exports[`Slider should render a slider with custom min and max labels 1`] = ` `; diff --git a/packages/terra-slider/translations/en-US.json b/packages/terra-slider/translations/en-US.json index 7c0b2f8b608..255e9799599 100644 --- a/packages/terra-slider/translations/en-US.json +++ b/packages/terra-slider/translations/en-US.json @@ -1,3 +1,4 @@ { - "Terra.slider.Slider": "Slider" + "Terra.slider.ariaDescribedByTextWithLabels": "Adjust slider to select a value between {minimumLabel} ({minimumValue}) and {maximumLabel} ({maximumValue})", + "Terra.slider.ariaDescribedByTextWithoutLabels": "Adjust slider to select a value between {minimumValue} and {maximumValue}" } diff --git a/packages/terra-slider/translations/en.json b/packages/terra-slider/translations/en.json index 7c0b2f8b608..255e9799599 100644 --- a/packages/terra-slider/translations/en.json +++ b/packages/terra-slider/translations/en.json @@ -1,3 +1,4 @@ { - "Terra.slider.Slider": "Slider" + "Terra.slider.ariaDescribedByTextWithLabels": "Adjust slider to select a value between {minimumLabel} ({minimumValue}) and {maximumLabel} ({maximumValue})", + "Terra.slider.ariaDescribedByTextWithoutLabels": "Adjust slider to select a value between {minimumValue} and {maximumValue}" }