diff --git a/config/exceptions.yaml b/config/exceptions.yaml index 65f7cdf28ff..6c4fbca9bf1 100644 --- a/config/exceptions.yaml +++ b/config/exceptions.yaml @@ -83,6 +83,7 @@ packageJson: "./components/Echart": "./components/Echart/index.mjs" "./components/Editor": "./components/Editor/index.mjs" "./components/Heading": "./components/Heading/index.mjs" + "./components/Help": "./components/Help/index.mjs" "./components/Highlight": "./components/Highlight/index.mjs" "./components/Icon": "./components/Icon/index.mjs" "./components/Input": "./components/Input/index.mjs" @@ -124,6 +125,7 @@ packageJson: "./hooks/useControl": "./hooks/useControl/index.mjs" "./hooks/useDesign": "./hooks/useDesign/index.mjs" "./hooks/useDesignTranslation": "./hooks/useDesignTranslation/index.mjs" + "./hooks/useFilter": "./hooks/useFilter/index.mjs" "./hooks/useSelection": "./hooks/useSelection/index.mjs" "./hooks/useStateObject": "./hooks/useStateObject/index.mjs" # Lib diff --git a/packages/react/components/Account/Set.mjs b/packages/react/components/Account/Set.mjs index e822940cf86..a1f43d1c5f1 100644 --- a/packages/react/components/Account/Set.mjs +++ b/packages/react/components/Account/Set.mjs @@ -57,6 +57,7 @@ import { Popout } from '@freesewing/react/components/Popout' import { bundlePatternTranslations, draft, flattenFlags } from '../Editor/lib/index.mjs' import { Bonny } from '@freesewing/bonny' import { MiniNote, MiniTip } from '../Mini/index.mjs' +import { modalMeasurementHelp } from '@freesewing/react/components/Help' /** * Component to show an individual measurements set @@ -66,9 +67,8 @@ import { MiniNote, MiniTip } from '../Mini/index.mjs' * @param {number} props.id - The ID of the measurements set to load * @param {bool} [props.publicOnly = false] - If the set should be used with the backend.getPublicSet method * @param {function} [props.Link = false] - An optional framework-specific Link component to use for client-side routing - * @param {function} [measurementHelpProvider = false] - A function that returns a url or action to show help for a specific measurement */ -export const Set = ({ id, publicOnly = false, Link = false, measurementHelpProvider = false }) => { +export const Set = ({ id, publicOnly = false, Link = false }) => { if (!Link) Link = WebLink // Hooks @@ -486,7 +486,7 @@ export const Set = ({ id, publicOnly = false, Link = false, measurementHelpProvi current={mset.measies[m]} original={mset.measies[m]} update={updateMeasies} - helpProvider={measurementHelpProvider} + help={() => modalMeasurementHelp(m, setModal)} /> ))} diff --git a/packages/react/components/Editor/components/MeasurementsEditor.mjs b/packages/react/components/Editor/components/MeasurementsEditor.mjs index c9c987771b8..c951deba4e8 100644 --- a/packages/react/components/Editor/components/MeasurementsEditor.mjs +++ b/packages/react/components/Editor/components/MeasurementsEditor.mjs @@ -1,5 +1,10 @@ -import React from 'react' +import React, { useContext } from 'react' +import { measurements as measurementTranslations } from '@freesewing/i18n' +// Context +import { ModalContext } from '@freesewing/react/context/Modal' +// Components import { MeasurementInput } from '@freesewing/react/components/Input' +import { modalMeasurementHelp } from '@freesewing/react/components/Help' /** * This MeasurementsEditor component allows inline-editing of the measurements @@ -9,10 +14,13 @@ import { MeasurementInput } from '@freesewing/react/components/Input' * @param {object} props.state - The ViewWrapper state object * @param {object} props.state.settings - The current settings * @param {object} props.update - Helper object for updating the ViewWrapper state - * @param {object} props.helpProvider - A function that takes a measurement and returns a url or action to show help for that measurement * @return {function} MeasurementsEditor - React component */ -export const MeasurementsEditor = ({ Design, update, state, helpProvider = false }) => { +export const MeasurementsEditor = ({ Design, update, state }) => { + // Context + const { setModal, modalContent } = useContext(ModalContext) + console.log({ modalContent }) + /* * Helper method to handle state updates for measurements */ @@ -26,7 +34,7 @@ export const MeasurementsEditor = ({ Design, update, state, helpProvider = false const { settings = {} } = state return ( -
+

Required Measurements

{Object.keys(Design.patternConfig.measurements).length === 0 ? (

This design does not require any measurements.

@@ -40,7 +48,8 @@ export const MeasurementsEditor = ({ Design, update, state, helpProvider = false original={settings.measurements?.[m]} update={(m, newVal) => onUpdate(m, newVal)} id={`edit-${m}`} - helpProvider={helpProvider} + label={measurementTranslations[m]} + help={() => modalMeasurementHelp(m, setModal)} /> ))}
@@ -58,6 +67,7 @@ export const MeasurementsEditor = ({ Design, update, state, helpProvider = false original={settings.measurements?.[m]} update={(m, newVal) => onUpdate(m, newVal)} id={`edit-${m}`} + help={() => modalMeasurementHelp(m, setModal)} /> )) )} diff --git a/packages/react/components/Editor/components/views/MeasurementsView.mjs b/packages/react/components/Editor/components/views/MeasurementsView.mjs index 1f736a1137d..70e9d6df696 100644 --- a/packages/react/components/Editor/components/views/MeasurementsView.mjs +++ b/packages/react/components/Editor/components/views/MeasurementsView.mjs @@ -2,8 +2,10 @@ import { designMeasurements } from '../../lib/index.mjs' import { capitalize, horFlexClasses as horFlexClasses } from '@freesewing/utils' import { measurements as measurementsTranslations } from '@freesewing/i18n' +// Context +import { ModalContext } from '@freesewing/react/context/Modal' // Hooks -import React, { Fragment, useState, useEffect } from 'react' +import React, { Fragment, useState, useEffect, useContext } from 'react' import { useBackend } from '@freesewing/react/hooks/useBackend' // Components import { Popout } from '@freesewing/react/components/Popout' @@ -37,7 +39,6 @@ const iconClasses = { * @param {Array} props.missingMeasurements - List of missing measurements for the current design * @param {Object} props.state - The editor state object * @param {Object} props.update - Helper object for updating the editor state - * @param {object} props.helpProvider - A function that takes a measurement and returns a url or action to show help for that measurement * @return {Function} MeasurementsView - React component */ export const MeasurementsView = ({ @@ -47,8 +48,8 @@ export const MeasurementsView = ({ state, update, design, - measurementHelpProvider = false, }) => { + const { modalContent } = useContext(ModalContext) /* * If there is no view set, completing measurements will switch to the view picker * Which is a bit confusing. So in this case, set the view to measurements. @@ -170,10 +171,7 @@ export const MeasurementsView = ({

You can manually set or override measurements below.

, - , + , 'edit', ]) @@ -218,6 +216,7 @@ export const MeasurementsView = ({ )} {items.length > 1 ? : items}
+ {modalContent} ) } diff --git a/packages/react/components/Help/index.mjs b/packages/react/components/Help/index.mjs new file mode 100644 index 00000000000..45990296de1 --- /dev/null +++ b/packages/react/components/Help/index.mjs @@ -0,0 +1,62 @@ +import React from 'react' +// Components +import { ModalWrapper } from '@freesewing/react/components/Modal' + +/** + * A component to display inline help for a measurement. + * + * This is typically loaded as modal content as it returns an ifram + * + * @component + * @param {object} props - All component props + * @param {string} [props.m = undefined] - The measurment name (id) + * @returns {JSX.Element} + */ +export const DesignOptionHelp = ({ design, o }) => + design && o ? ( +