From 896969c7de84dd1e2e0a20d702a48f8314540c54 Mon Sep 17 00:00:00 2001 From: Jesper Hodge <19345795+jesperhodge@users.noreply.github.com> Date: Thu, 7 Mar 2024 15:55:30 -0500 Subject: [PATCH] Fix radio context provider missing (#874) This is a temporary fix for a bug that stems from a paragon component, SelectableBox. So we're using our own copy from fronten-lib-content-components. --- package-lock.json | 14 ++- package.json | 2 +- .../SortAndFilterModal.jsx | 2 +- .../SelectableBox/SelectableBoxSet.jsx | 112 ------------------ src/generic/SelectableBox/getInputType.jsx | 26 ---- src/generic/SelectableBox/index.jsx | 7 -- 6 files changed, 12 insertions(+), 151 deletions(-) delete mode 100644 src/generic/SelectableBox/SelectableBoxSet.jsx delete mode 100644 src/generic/SelectableBox/getInputType.jsx delete mode 100644 src/generic/SelectableBox/index.jsx diff --git a/package-lock.json b/package-lock.json index 1e63f2c77..6c6ebe913 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "@edx/frontend-component-footer": "^13.0.2", "@edx/frontend-component-header": "^5.0.2", "@edx/frontend-enterprise-hotjar": "^2.0.0", - "@edx/frontend-lib-content-components": "^2.1.0", + "@edx/frontend-lib-content-components": "^2.1.1", "@edx/frontend-platform": "7.0.1", "@edx/openedx-atlas": "^0.6.0", "@fortawesome/fontawesome-svg-core": "1.2.36", @@ -2632,9 +2632,9 @@ } }, "node_modules/@edx/frontend-lib-content-components": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@edx/frontend-lib-content-components/-/frontend-lib-content-components-2.1.0.tgz", - "integrity": "sha512-KokFOM3qynOXZWPMU6IFxRyMK0AZAtSplvKOYm/azn8kESTGFGufkYHve3gRWWQfg5LYXef8++e3H0A6/y7yjw==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@edx/frontend-lib-content-components/-/frontend-lib-content-components-2.1.1.tgz", + "integrity": "sha512-VCEhFfLkK+o08g7Ts9YgYNb8GHd6d9Mw8lTT1L2OIMsDC2ncFHBUGOfzmoRt+M3cJMb2nAL7Yh4wvNxhgRhhuA==", "dependencies": { "@codemirror/lang-html": "^6.0.0", "@codemirror/lang-xml": "^6.0.0", @@ -2648,6 +2648,7 @@ "@reduxjs/toolkit": "^1.8.1", "@tinymce/tinymce-react": "^3.14.0", "babel-polyfill": "6.26.0", + "classnames": "^2.5.1", "codemirror": "^6.0.0", "fast-xml-parser": "^4.0.10", "frontend-components-tinymce-advanced-plugins": "^1.0.3", @@ -2692,6 +2693,11 @@ "react": ">=16.8.0" } }, + "node_modules/@edx/frontend-lib-content-components/node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/@edx/frontend-lib-content-components/node_modules/react-responsive": { "version": "8.2.0", "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz", diff --git a/package.json b/package.json index 72b0de796..aa1dfc997 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,7 @@ "@edx/frontend-component-footer": "^13.0.2", "@edx/frontend-component-header": "^5.0.2", "@edx/frontend-enterprise-hotjar": "^2.0.0", - "@edx/frontend-lib-content-components": "^2.1.0", + "@edx/frontend-lib-content-components": "^2.1.1", "@edx/frontend-platform": "7.0.1", "@edx/openedx-atlas": "^0.6.0", "@fortawesome/fontawesome-svg-core": "1.2.36", diff --git a/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx b/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx index bc55a7c67..6e4518b25 100644 --- a/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx +++ b/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx @@ -9,7 +9,7 @@ import { ModalDialog, useCheckboxSetValues, } from '@openedx/paragon'; -import SelectableBox from '../../../../generic/SelectableBox'; +import { SelectableBox } from '@edx/frontend-lib-content-components'; import messages from './messages'; import { getCheckedFilters, getFilterOptions, processFilters } from './utils'; diff --git a/src/generic/SelectableBox/SelectableBoxSet.jsx b/src/generic/SelectableBox/SelectableBoxSet.jsx deleted file mode 100644 index c45a64ddd..000000000 --- a/src/generic/SelectableBox/SelectableBoxSet.jsx +++ /dev/null @@ -1,112 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; -import { getInputType } from './getInputType'; - -const INPUT_TYPES = [ - 'radio', - 'checkbox', -]; - -const DEFAULT_COLUMNS_NUMBER = 2; - -const SelectableBoxSet = React.forwardRef(({ - children, - name, - value, - defaultValue, - onChange, - type, - columns, - className, - ariaLabel, - ariaLabelledby, - ...props -}, ref) => { - const inputType = getInputType('SelectableBoxSet', type); - - // eslint-disable-next-line no-console - console.debug('SelectableBoxSet Props: ', { - children, - name, - value, - defaultValue, - onChange, - type, - columns, - className, - ariaLabel, - ariaLabelledby, - ...props, - }); - - return React.createElement( - inputType, - { - name, - value, - defaultValue, - onChange, - ref, - className: classNames( - 'pgn__selectable_box-set', - `pgn__selectable_box-set--${columns || DEFAULT_COLUMNS_NUMBER}`, - className, - ), - 'aria-label': ariaLabel, - 'aria-labelledby': ariaLabelledby, - ...props, - }, - children, - ); -}); - -SelectableBoxSet.propTypes = { - /** Specifies a name for the group of `SelectableBox`'es. */ - name: PropTypes.string.isRequired, - /** Content of the `SelectableBoxSet`. */ - children: PropTypes.node, - /** A function that receives event of the clicked `SelectableBox` and can be used to handle the value change. */ - onChange: PropTypes.func, - /** Indicates selected `SelectableBox`'es. */ - value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]), - /** Specifies default values for the `SelectableBox`'es. */ - defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - /** Indicates the input type: checkbox or radio. */ - type: PropTypes.oneOf(INPUT_TYPES), - /** - * Specifies number of `SelectableBox`'es in a row. - * - * Class that is responsible for the columns number: `pgn__selectable_box-set--{columns}`. - * Max number of columns: `12`. - */ - columns: PropTypes.number, - /** A class that is be appended to the base element. */ - className: PropTypes.string, - /** - * The ID of the label for the `SelectableBoxSet`. - * - * An accessible label must be provided to the `SelectableBoxSet`. - */ - ariaLabelledby: PropTypes.string, - /** - * A label for the `SelectableBoxSet`. - * - * If not using `ariaLabelledby`, then `ariaLabel` must be provided */ - // eslint-disable-next-line react/forbid-prop-types - ariaLabel: PropTypes.any, // requiredWhenNot(PropTypes.string, 'ariaLabelledby'), -}; - -SelectableBoxSet.defaultProps = { - children: undefined, - onChange: () => {}, - value: undefined, - defaultValue: undefined, - type: 'radio', - columns: DEFAULT_COLUMNS_NUMBER, - className: undefined, - ariaLabelledby: undefined, - ariaLabel: undefined, -}; - -export default SelectableBoxSet; diff --git a/src/generic/SelectableBox/getInputType.jsx b/src/generic/SelectableBox/getInputType.jsx deleted file mode 100644 index 58e8e33db..000000000 --- a/src/generic/SelectableBox/getInputType.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import { - Form, CheckboxControl, RadioControl, -} from '@openedx/paragon'; - -// eslint-disable-next-line import/prefer-default-export,consistent-return -export const getInputType = (component, type) => { - if (component === 'SelectableBox') { - switch (type) { - case 'radio': - return RadioControl; - case 'checkbox': - return CheckboxControl; - default: - return RadioControl; - } - } else if (component === 'SelectableBoxSet') { - switch (type) { - case 'radio': - return Form.RadioSet; - case 'checkbox': - return Form.CheckboxSet; - default: - return Form.RadioSet; - } - } -}; diff --git a/src/generic/SelectableBox/index.jsx b/src/generic/SelectableBox/index.jsx deleted file mode 100644 index 75c0a7c2a..000000000 --- a/src/generic/SelectableBox/index.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import { SelectableBox as ParagonSelectableBox } from '@openedx/paragon'; -import SelectableBoxSet from './SelectableBoxSet'; - -const SelectableBox = ParagonSelectableBox; - -SelectableBox.Set = SelectableBoxSet; -export default SelectableBox;