diff --git a/src/ui/hooks/useMarkdown.tsx b/src/ui/hooks/useMarkdown.tsx new file mode 100644 index 0000000000..8378617d87 --- /dev/null +++ b/src/ui/hooks/useMarkdown.tsx @@ -0,0 +1,44 @@ +import React from 'react'; + +import {DL} from 'ui'; + +import {YfmWrapper} from '../components/YfmWrapper/YfmWrapper'; +import {getSdk} from '../libs/schematic-sdk'; + +type Props = { + value: string; +}; + +const MarkdownCollection = new Map(); +async function renderMarkdown(value: string) { + if (!MarkdownCollection.has(value)) { + try { + const response = await getSdk().mix.renderMarkdown({text: value, lang: DL.USER_LANG}); + const yfmString = response.result; + MarkdownCollection.set(value, yfmString); + } catch (e) { + console.error('useMarkdown failed ', e); + } + } + + return MarkdownCollection.get(value); +} + +export const useMarkdown = (props: Props) => { + const {value} = props; + const [markdown, setMarkdown] = React.useState(''); + const [isLoading, setIsLoading] = React.useState(true); + + React.useEffect(() => { + if (!value) { + return; + } + + renderMarkdown(value).then((val) => { + setMarkdown(); + setIsLoading(false); + }); + }, [value]); + + return {markdown, isLoading}; +}; diff --git a/src/ui/libs/DatalensChartkit/ChartKit/components/Widget/components/Table/utils/render.tsx b/src/ui/libs/DatalensChartkit/ChartKit/components/Widget/components/Table/utils/render.tsx index 7d7f5e94d5..47163e0f41 100644 --- a/src/ui/libs/DatalensChartkit/ChartKit/components/Widget/components/Table/utils/render.tsx +++ b/src/ui/libs/DatalensChartkit/ChartKit/components/Widget/components/Table/utils/render.tsx @@ -25,6 +25,7 @@ import { TableRow, isMarkupItem, } from 'shared'; +import {useMarkdown} from 'ui/hooks/useMarkdown'; import {Markup} from '../../../../../../../../components/Markup'; import {markupToRawString} from '../../../../../../modules/table'; @@ -84,6 +85,13 @@ const SortIcon = ({direction}: SortIconProps) => { ); }; +const Markdown = (props: {value: string}) => { + const {value} = props; + const {markdown} = useMarkdown({value}); + + return {markdown}; +}; + const diffFormatter = ( value: number, {precision, diff_formatter: formatter}: Omit, @@ -435,7 +443,7 @@ export const getColumnsAndNames = ({ } /> )} diff --git a/src/ui/libs/DatalensChartkit/components/Control/Items/withWrapForControls.js b/src/ui/libs/DatalensChartkit/components/Control/Items/withWrapForControls.js index 64cc6de804..fac22dce0d 100644 --- a/src/ui/libs/DatalensChartkit/components/Control/Items/withWrapForControls.js +++ b/src/ui/libs/DatalensChartkit/components/Control/Items/withWrapForControls.js @@ -4,29 +4,17 @@ import {HelpPopover} from '@gravity-ui/components'; import block from 'bem-cn-lite'; import PropTypes from 'prop-types'; import {ControlQA} from 'shared'; -import {YfmWrapper} from 'ui/components/YfmWrapper/YfmWrapper'; import {DL} from 'ui/constants'; -import {getSdk} from 'ui/libs/schematic-sdk'; +import {useMarkdown} from 'ui/hooks/useMarkdown'; import {isMobileView} from 'ui/utils/mobile'; import {CONTROL_TYPE} from '../../../modules/constants/constants'; const b = block('chartkit-control-item'); -const TooltipWithMarkdown = (props) => { - const {markdown} = props; - const [tooltipText, setTooltipText] = React.useState(); - React.useEffect(() => { - getSdk() - .mix.renderMarkdown({text: markdown, lang: DL.USER_LANG}) - .then((response) => { - const yfmString = response.result; - setTooltipText(); - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - return {tooltipText}; +const Markdown = (props) => { + const {markdown} = useMarkdown({value: props.value}); + return {markdown}; }; function withWrapForControls(WrappedComponent) { @@ -74,7 +62,7 @@ function withWrapForControls(WrappedComponent) { {label} {hint && ( } + content={} className={b('hint')} /> )} diff --git a/src/ui/units/dash/containers/Dialogs/Control2/Sections/AppearanceSection/AppearanceSection.scss b/src/ui/units/dash/containers/Dialogs/Control2/Sections/AppearanceSection/AppearanceSection.scss index 50afdd7d86..e86f6450f5 100644 --- a/src/ui/units/dash/containers/Dialogs/Control2/Sections/AppearanceSection/AppearanceSection.scss +++ b/src/ui/units/dash/containers/Dialogs/Control2/Sections/AppearanceSection/AppearanceSection.scss @@ -6,5 +6,10 @@ &__operation-checkbox { margin-right: 8px; + + &_top { + align-self: flex-start; + margin-top: 4px; + } } } diff --git a/src/ui/units/dash/containers/Dialogs/Control2/Sections/AppearanceSection/Rows/HintRow/HintRow.tsx b/src/ui/units/dash/containers/Dialogs/Control2/Sections/AppearanceSection/Rows/HintRow/HintRow.tsx index e3675bd319..8fd169e33d 100644 --- a/src/ui/units/dash/containers/Dialogs/Control2/Sections/AppearanceSection/Rows/HintRow/HintRow.tsx +++ b/src/ui/units/dash/containers/Dialogs/Control2/Sections/AppearanceSection/Rows/HintRow/HintRow.tsx @@ -5,7 +5,6 @@ import {Checkbox} from '@gravity-ui/uikit'; import block from 'bem-cn-lite'; import {I18n} from 'i18n'; import {useDispatch, useSelector} from 'react-redux'; -import {FieldWrapper} from 'ui/components/FieldWrapper/FieldWrapper'; import {registry} from 'ui/registry'; import {setSelectorDialogItem} from 'units/dash/store/actions/dashTyped'; import { @@ -20,7 +19,7 @@ const i18n = I18n.keyset('dash.control-dialog.edit'); export const HintRow = () => { const dispatch = useDispatch(); - const {showHint, hint, validation} = useSelector(selectSelectorDialog); + const {showHint, hint} = useSelector(selectSelectorDialog); const isFieldDisabled = useSelector(selectIsControlConfigurationDisabled); const datasetField = useSelector(getDatasetField); @@ -39,21 +38,18 @@ export const HintRow = () => { return (
- -
- - -
-
+ +
); diff --git a/src/ui/units/wizard/components/Dialogs/DialogField/DialogField.tsx b/src/ui/units/wizard/components/Dialogs/DialogField/DialogField.tsx index 1d9c9b8fc1..982f8c8b66 100644 --- a/src/ui/units/wizard/components/Dialogs/DialogField/DialogField.tsx +++ b/src/ui/units/wizard/components/Dialogs/DialogField/DialogField.tsx @@ -419,18 +419,20 @@ class DialogField extends React.PureComponent } /> - - this.setState({hintSettings: {enabled, text: value}}) - } - disabled={!enabled} - /> - } - /> + {enabled && ( + + this.setState({hintSettings: {enabled, text: value}}) + } + disabled={!enabled} + /> + } + /> + )} ); }