-
Notifications
You must be signed in to change notification settings - Fork 2k
/
site-title.tsx
142 lines (130 loc) · 5.18 KB
/
site-title.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
/**
* External dependencies
*/
import * as React from 'react';
import { useDispatch, useSelect } from '@wordpress/data';
import { TextControl } from '@wordpress/components';
import { useI18n } from '@automattic/react-i18n';
import { Icon } from '@wordpress/icons';
import classnames from 'classnames';
import { _x } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { STORE_KEY } from '../../stores/onboard';
import { recordSiteTitleSelection } from '../../lib/analytics';
import tip from './tip';
import useTyper from '../../hooks/use-typer';
interface Props {
onSubmit: () => void;
}
/**
* Shuffles an array in place
*
* @param arr the array to shuffle
*/
function shuffle( arr: string[] ) {
return arr.sort( () => ( Math.random() > 0.5 ? -1 : 1 ) );
}
/* we have them outside ot the component to avoid re-shuffling on every render */
const siteTitleExamples = shuffle( [
/* translators: This is an example of a site name,
feel free to create your own but please keep it under 22 characters */
_x( 'The Local Latest', 'sample site title' ),
/* translators: This is an example of a site name,
feel free to create your own but please keep it under 22 characters */
_x( 'North Peak Cycling', 'sample site title' ),
/* translators: This is an example of a site name,
feel free to create your own but please keep it under 22 characters */
_x( 'Sunshine Daycare', 'sample site title' ),
/* translators: This is an example of a site name,
feel free to create your own but please keep it under 22 characters */
_x( 'Quick Wins Consulting', 'sample site title' ),
/* translators: This is an example of a site name,
feel free to create your own but please keep it under 22 characters */
_x( 'Puns and Pedantry', 'sample site title' ),
/* translators: This is an example of a site name,
feel free to create your own but please keep it under 22 characters */
_x( 'Yoga For Everyone', 'sample site title' ),
/* translators: This is an example of a site name,
feel free to create your own but please keep it under 22 characters */
_x( 'Pugs Wearing Bowties', 'sample site title' ),
/* translators: This is an example of a site name,
feel free to create your own but please keep it under 22 characters */
_x( 'Behind the Lens', 'sample site title' ),
/* translators: This is an example of a site name,
feel free to create your own but please keep it under 22 characters */
_x( 'Marketing Magic', 'sample site title' ),
/* translators: This is an example of a site name,
feel free to create your own but please keep it under 22 characters */
_x( 'Cortado Coffee', 'sample site title' ),
/* translators: This is an example of a site name,
feel free to create your own but please keep it under 22 characters */
_x( 'Mumbai Bites', 'sample site title' ),
/* translators: This is an example of a site name,
feel free to create your own but please keep it under 22 characters */
_x( 'RPM Motors', 'sample site title' ),
/* translators: This is an example of a site name,
feel free to create your own but please keep it under 22 characters */
_x( 'Max’s Burger Bar', 'sample site title' ),
] );
const SiteTitle: React.FunctionComponent< Props > = ( { onSubmit } ) => {
const { __ } = useI18n();
const { siteTitle } = useSelect( ( select ) => select( STORE_KEY ).getState() );
const { setSiteTitle } = useDispatch( STORE_KEY );
const [ isTouched, setIsTouched ] = React.useState( false );
const handleFormSubmit = ( e: React.FormEvent< HTMLFormElement > ) => {
// hitting 'Enter' when focused on the input field should direct to next step.
e.preventDefault();
onSubmit();
};
const handleBlur = () => {
recordSiteTitleSelection( !! siteTitle );
};
const handleFocus = () => {
setIsTouched( true );
};
// translators: label for site title input in Gutenboarding
const inputLabel = __( 'My site is called' );
const placeHolder = useTyper( siteTitleExamples, ! siteTitle, {
delayBetweenCharacters: 70,
} );
return (
<form
className={ classnames( 'site-title', { 'is-touched': isTouched } ) }
onSubmit={ handleFormSubmit }
>
<label htmlFor="site-title__input" className="site-title__input-label">
{ inputLabel }
</label>
<div className="site-title__input-wrapper">
{ /* Adding key makes it more performant
because without it the element is recreated
for every letter in the typing animation
*/ }
<TextControl
key="site-title__input"
id="site-title__input"
className="site-title__input"
onChange={ setSiteTitle }
onFocus={ handleFocus }
onBlur={ handleBlur }
value={ siteTitle }
autoFocus // eslint-disable-line jsx-a11y/no-autofocus
spellCheck={ false }
autoComplete="off"
placeholder={ placeHolder }
autoCorrect="off"
// Unable to remove this instance due to it being a HotJar term: https://github.com/Automattic/wp-calypso/pull/43348#discussion_r442015229
data-hj-whitelist
></TextControl>
<p className="site-title__input-hint">
<Icon icon={ tip } size={ 18 } />
{ /* translators: The "it" here refers to the site title. */ }
<span>{ __( "Don't worry, you can change it later." ) }</span>
</p>
</div>
</form>
);
};
export default SiteTitle;