diff --git a/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.jsx b/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.jsx index bf52733d..d91e1568 100644 --- a/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.jsx +++ b/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.jsx @@ -5,15 +5,18 @@ import styles from './prompt-input.module.scss'; const cx = classNames.bind(styles); -const PromptInput = ({ value, message, className }) => ( +const PromptInput = ({ value, message, className, defaultValue }) => (
- { - typewriter.pauseFor(500).typeString(value).start(); - }} - /> + {defaultValue} + {value && ( + { + typewriter.deleteAll().pauseFor(500).typeString(value).start(); + }} + /> + )}
diff --git a/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.module.scss b/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.module.scss index 9a3ee456..b3e745c9 100644 --- a/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.module.scss +++ b/templates/frontend/src/components/pages/preview-template/vscode-animation/prompt-input/prompt-input.module.scss @@ -42,6 +42,10 @@ color: #ccc; } +.select-default-text { + background-color: #5a8ab4; +} + .select-options { display: flex; flex-direction: column; diff --git a/templates/frontend/src/components/pages/preview-template/vscode-animation/vscode-animation.jsx b/templates/frontend/src/components/pages/preview-template/vscode-animation/vscode-animation.jsx index 18ebc7a7..285c349c 100644 --- a/templates/frontend/src/components/pages/preview-template/vscode-animation/vscode-animation.jsx +++ b/templates/frontend/src/components/pages/preview-template/vscode-animation/vscode-animation.jsx @@ -45,6 +45,7 @@ const BEFORE_ANIMATION_START_MS = 700 * DEV_SPEED_COEFFICIENT; const RESET_TIME_MS = 100; const STEP_TIME_MS = 1600 * DEV_SPEED_COEFFICIENT; const PROMP_TIME_MS = 2800 * DEV_SPEED_COEFFICIENT; +const DEFAULT_VALUE_TIME_MS = 1500 * DEV_SPEED_COEFFICIENT; const VscodeAnimation = ({ template }) => { const [animationStep, setAnimationStep] = useState('initial'); @@ -68,6 +69,10 @@ const VscodeAnimation = ({ template }) => { if (prompts.length > 0) { for (let i = 0; i < prompts.length; i++) { + if (prompts[i].defaultValue) { + await setAnimationStep(`default-${i}`); + await sleepMs(DEFAULT_VALUE_TIME_MS); + } await setAnimationStep(`prompt-${i}`); await sleepMs(PROMP_TIME_MS); @@ -118,6 +123,18 @@ const VscodeAnimation = ({ template }) => { {animationStep === 'templates' && ( )} + {animationStep.startsWith('default') && ( + + )} {animationStep.startsWith('prompt') && ( ( defaultValue={item.variableName} readOnly /> + ); const Prompts = ({ prompts }) => ( -
-
-

Prompts

- - -

- Prompts represent list of questions that will be asked during template execution from - users as a popup. -

-

- Answers you can use as variables inside templates or filenames by using % myVariable % -

-
-
-
-
    - {prompts.map((item, index) => ( - - ))} -
-
+
+
+

Prompts

+ + +

+ Prompts represent list of questions that will be asked during template execution from + users as a popup. +

+

+ Answers you can use as variables inside templates or filenames by using % myVariable % +

+
+
+
+
    + {prompts.map((item, index) => ( + + ))} +
- ); +
+); export default Prompts; diff --git a/templates/frontend/src/components/shared/template-form/prompts/prompts.jsx b/templates/frontend/src/components/shared/template-form/prompts/prompts.jsx index 9fcb9bc6..7e015e0d 100644 --- a/templates/frontend/src/components/shared/template-form/prompts/prompts.jsx +++ b/templates/frontend/src/components/shared/template-form/prompts/prompts.jsx @@ -39,6 +39,15 @@ const Prompt = React.forwardRef(({ item, trigger, index, errors, remove, readOny error={errors?.prompts?.[index]?.variableName?.message} onBlur={() => trigger('prompts')} /> + trigger('prompts')} + /> {!readOny && (