|
| 1 | +import { trans } from "i18n"; |
| 2 | +import { |
| 3 | + CommonNameConfig, |
| 4 | + MultiBaseComp, |
| 5 | + NameConfig, |
| 6 | + stringExposingStateControl, |
| 7 | + UICompBuilder, |
| 8 | + withExposingConfigs, |
| 9 | + withMethodExposing |
| 10 | +} from "lowcoder-sdk"; |
| 11 | +import { TourChildrenMap, TourPropertyView } from "./tourPropertyView"; |
| 12 | +import { Tour, TourProps } from "antd"; |
| 13 | +import React, { useContext } from "react"; |
| 14 | +import { EditorContext } from "@lowcoder-ee/comps/editorState"; |
| 15 | +import { GridItemComp } from "@lowcoder-ee/comps/comps/gridItemComp"; |
| 16 | +import { HookComp } from "@lowcoder-ee/comps/hooks/hookComp"; |
| 17 | +import { TemporaryStateItemComp } from "@lowcoder-ee/comps/comps/temporaryStateComp"; |
| 18 | + |
| 19 | +/** |
| 20 | + * This component builds the Property Panel and the fake 'UI' for the Tour component |
| 21 | + */ |
| 22 | +let TourBasicComp = (function() { |
| 23 | + const childrenMap = { |
| 24 | + ...TourChildrenMap, |
| 25 | + defaultValue: stringExposingStateControl("defaultValue"), |
| 26 | + value: stringExposingStateControl("value") |
| 27 | + // style: styleControl(SelectStyle), |
| 28 | + }; |
| 29 | + return new UICompBuilder(childrenMap, (props, dispatch) => { |
| 30 | + const editorState = useContext(EditorContext); |
| 31 | + const compMap: (GridItemComp | HookComp | InstanceType<typeof TemporaryStateItemComp>)[] = Object.values(editorState.getAllUICompMap()); |
| 32 | + |
| 33 | + const steps: TourProps["steps"] = props.options.map((step) => { |
| 34 | + const targetName = step.target; |
| 35 | + let target = undefined; |
| 36 | + const compListItem = compMap.find((compItem) => compItem.children.name.getView() === targetName); |
| 37 | + if (compListItem) { |
| 38 | + console.log(`setting selected comp to ${compListItem}`); |
| 39 | + try { |
| 40 | + target = ((compListItem as MultiBaseComp).children.comp as GridItemComp).getRef?.(); |
| 41 | + } catch (e) { |
| 42 | + target = ((compListItem as MultiBaseComp).children.comp as HookComp).getRef?.(); |
| 43 | + } |
| 44 | + } |
| 45 | + |
| 46 | + return { |
| 47 | + /** |
| 48 | + * I'm pretty sure it's safe to use dangerouslySetInnerHTML here as any creator of an app |
| 49 | + * will have unrestricted access to the data of any user anyway. E.g. have a button that |
| 50 | + * just sends the current cookies wherever, thus the developer of the app must be trusted |
| 51 | + * in all cases |
| 52 | + * This even applies to things like <b onmouseover="alert('mouseover');">, because the |
| 53 | + * app creator might desire functionality like this. |
| 54 | + */ |
| 55 | + title: (<div dangerouslySetInnerHTML={{ __html: step.title }} />), |
| 56 | + description: (<div dangerouslySetInnerHTML={{ __html: step.description }} />), |
| 57 | + target: target?.current, |
| 58 | + arrow: step.arrow, |
| 59 | + placement: step.placement === "" ? undefined : step.placement, |
| 60 | + mask: step.mask, |
| 61 | + cover: step.cover ? (<img src={step.cover} />) : undefined, |
| 62 | + type: step.type === "" ? undefined : step.type, |
| 63 | + }; |
| 64 | + }); |
| 65 | + |
| 66 | + return ( |
| 67 | + <Tour |
| 68 | + steps={steps} |
| 69 | + open={props.open.value} |
| 70 | + onClose={() => props.open.onChange(false)} |
| 71 | + // indicatorsRender={(current, total) => props.indicatorsRender(current, total)} // todo enable later |
| 72 | + disabledInteraction={props.disabledInteraction} |
| 73 | + arrow={props.arrow} |
| 74 | + placement={props.placement === "" ? undefined : props.placement} |
| 75 | + type={props.type === "" ? undefined : props.type} |
| 76 | + mask={props.mask} |
| 77 | + /> |
| 78 | + ); |
| 79 | + }) |
| 80 | + .setPropertyViewFn((children) => <TourPropertyView {...children} />) |
| 81 | + .build(); |
| 82 | +})(); |
| 83 | + |
| 84 | +export const TourComp = withMethodExposing(TourBasicComp, [ |
| 85 | + { |
| 86 | + method: { |
| 87 | + name: "startTour", |
| 88 | + description: "Triggers the tour to start", |
| 89 | + params: [] |
| 90 | + }, |
| 91 | + execute: (comp, values) => { |
| 92 | + comp.children.open.getView().onChange(true); |
| 93 | + } |
| 94 | + } |
| 95 | +]); |
0 commit comments