-
Notifications
You must be signed in to change notification settings - Fork 179
/
index.js
121 lines (110 loc) · 3.4 KB
/
index.js
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
/*
* Copyright 2020 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* External dependencies
*/
import styled from 'styled-components';
/**
* WordPress dependencies
*/
import { useCallback, useState } from 'react';
import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { Row } from '../../form';
import { isValidUrl, withProtocol } from '../../../utils/url';
import { SimplePanel } from '../panel';
import { Note, ExpandedTextInput } from '../shared';
import { useStory } from '../../../app/story';
const Error = styled.span`
font-size: 12px;
line-height: 16px;
color: ${({ theme }) => theme.colors.warning};
`;
function PageAttachmentPanel() {
const {
state: { currentPage },
actions: { updateCurrentPageProperties },
} = useStory();
const { pageAttachment = {} } = currentPage;
const defaultCTA = __('Learn more', 'web-stories');
const { url, ctaText = defaultCTA } = pageAttachment;
const [_ctaText, _setCtaText] = useState(ctaText);
const updatePageAttachment = useCallback(
(value) => {
if (value.url) {
const urlWithProtocol = withProtocol(value.url);
const valid = isValidUrl(urlWithProtocol);
setIsInvalidUrl(!valid);
}
const _pageAttachment = {
...pageAttachment,
...value,
};
updateCurrentPageProperties({
properties: { pageAttachment: _pageAttachment },
});
},
[updateCurrentPageProperties, pageAttachment]
);
const [isInvalidUrl, setIsInvalidUrl] = useState(
!isValidUrl(withProtocol(url || ''))
);
const isDefault = _ctaText === defaultCTA;
return (
<SimplePanel
name="pageAttachment"
title={__('Page Attachment', 'web-stories')}
>
<Row>
<Note>
{__('Type an address to add a page attachment', 'web-stories')}
</Note>
</Row>
<Row>
<ExpandedTextInput
placeholder={__('Web address', 'web-stories')}
onChange={(value) => updatePageAttachment({ url: value })}
value={url || ''}
clear
aria-label={__('Edit: Page Attachment link', 'web-stories')}
/>
</Row>
{Boolean(url) && isInvalidUrl && (
<Row>
<Error>{__('Invalid web address.', 'web-stories')}</Error>
</Row>
)}
{Boolean(url) && !isInvalidUrl && (
<Row>
<ExpandedTextInput
onChange={(value) => _setCtaText(value)}
onBlur={(value) =>
updatePageAttachment({ ctaText: value ? value : defaultCTA })
}
value={_ctaText}
aria-label={__('Edit: Page Attachment CTA text', 'web-stories')}
clear={Boolean(_ctaText) && !isDefault}
suffix={isDefault ? __('default', 'web-stories') : null}
width={isDefault ? 85 : null}
/>
</Row>
)}
</SimplePanel>
);
}
export default PageAttachmentPanel;