Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[EuiSuperDatePicker] i18n all remaining static copy + convert prettyDuration to hook/component #5743

Merged
merged 31 commits into from
Mar 28, 2022
Merged

[EuiSuperDatePicker] i18n all remaining static copy + convert prettyDuration to hook/component #5743

Show file tree
Hide file tree
Changes from 29 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
2987165
i18n Absolute/Relative/Now tab labels
cee-chen Mar 22, 2022
242391a
i18n + DRY start/end date input prepend labels
cee-chen Mar 22, 2022
53e4e62
i18n Absolute date format error
cee-chen Mar 22, 2022
861b5c5
i18n Now tab copy
cee-chen Mar 22, 2022
30614d5
Convert non-i18n'd time constants to hook with i18n
cee-chen Mar 23, 2022
5def024
Add render function that passes i18n strings/constants to EuiSuperDat…
cee-chen Mar 23, 2022
94984f6
Waterfall time options constants as props to child components that ne…
cee-chen Mar 23, 2022
d876e4d
i18n relative tab dropdown options
cee-chen Mar 23, 2022
fd4050c
DRY out `relativeUnitsFromLargestToSmallest`
cee-chen Mar 23, 2022
c18988b
i18n refresh dropdown options
cee-chen Mar 23, 2022
2709cc0
i18n refresh shorthand units / convert prettyInterval to hook
cee-chen Mar 23, 2022
c08fc93
i18n `Commonly used` ranges in quick select
cee-chen Mar 23, 2022
3d9e9e7
Convert `prettyDuration` to hook/component
cee-chen Mar 23, 2022
94ebca3
Add time_options unit tests
cee-chen Mar 23, 2022
02198dd
Update various snapshot/unit tests with timeOptions waterfalling
cee-chen Mar 23, 2022
f28d902
[REVERT] Test moment locale
cee-chen Mar 23, 2022
d4fb250
Add changelog entry
cee-chen Mar 23, 2022
2bfd682
derpin
constancecchen Mar 23, 2022
b837a56
Update Pretty duration docs
cee-chen Mar 23, 2022
2bda1db
Merge branch 'i18n-super-date-picker' of github.com:constancecchen/eu…
cee-chen Mar 23, 2022
83bc9a3
[PR feedback] FC typing
cee-chen Mar 23, 2022
59aa38c
[i18n feedback] Remove `timeUnits` and `timeUnitsPlural`
cee-chen Mar 24, 2022
e933241
[i18n feedback] Remove concatenated unit string in relative tab
cee-chen Mar 24, 2022
28c937f
[i18n feedback] Remove concatenated unit strings in pretty_interval
cee-chen Mar 24, 2022
a277a66
[i18n feedback] Remove concatenated strings in pretty_duration
cee-chen Mar 24, 2022
10792e7
Update snapshots
cee-chen Mar 24, 2022
d53c0a2
Fix broken i18n behavior
cee-chen Mar 24, 2022
acf40f4
Merge branch 'main' into i18n-super-date-picker
cee-chen Mar 24, 2022
238686c
Fix testCustomHook move
cee-chen Mar 24, 2022
1dc826d
Revert "Fix broken i18n behavior"
cee-chen Mar 28, 2022
6bc7035
Revert "[REVERT] Test moment locale"
cee-chen Mar 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion src-docs/src/views/i18n/i18n_interpolation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
} from '../../../../src/components';

export default () => {
const [count, setCount] = useState(1);
const [count, setCount] = useState(0);

return (
<>
Expand Down Expand Up @@ -44,6 +44,35 @@ export default () => {

<EuiSpacer size="l" />

<EuiTitle size="xs">
<h3>useEuiI18n with function interpolation</h3>
</EuiTitle>
<p>
{useEuiI18n(
'euiI18nInterpolation.clickedCount',
({ count }) =>
`Clicked on button ${count} time${count === 1 ? '' : 's'}.`,
{ count }
)}
</p>

<EuiSpacer size="l" />

<EuiTitle size="xs">
<h3>EuiI18n with function interpolation</h3>
</EuiTitle>
<p>
<EuiI18n
token="euiI18nInterpolation.clickedCount"
default={({ count }) =>
`Clicked on button ${count} time${count === 1 ? '' : 's'}.`
}
values={{ count }}
/>
</p>

<EuiSpacer size="l" />

<EuiTitle size="xs">
<h3>useEuiI18n with component interpolation</h3>
</EuiTitle>
Expand Down
39 changes: 32 additions & 7 deletions src-docs/src/views/pretty_duration/pretty_duration.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
EuiSpacer,
EuiCodeBlock,
EuiText,
prettyDuration,
usePrettyDuration,
} from '../../../../src/components';

const examples = [
Expand Down Expand Up @@ -50,23 +50,48 @@ const examples = [
],
dateFormat: 'MMMM Do YYYY, HH:mm:ss.SSS',
},
{
// Example that will use a default common quick range label
start: 'now/w',
end: 'now',
dateFormat: 'MMMM Do YYYY, HH:mm:ss.SSS',
},
];

export default function prettyDurationExample() {
return (
<Fragment>
{examples.map(({ start, end, quickRanges, dateFormat }, idx) => (
<div key={idx}>
<EuiCodeBlock paddingSize="s" isCopyable language="js">
prettyDuration(&apos;{start}&apos;, &apos;{end}&apos;,{' '}
{JSON.stringify(quickRanges)}, &apos;
{dateFormat}&apos;)
</EuiCodeBlock>
<EuiCodeBlock
paddingSize="s"
isCopyable
language="js"
>{`<PrettyDuration
timeFrom="${start}"
timeTo="${end}"
dateFormat="${dateFormat}"
quickRanges={${JSON.stringify(quickRanges)}}
/>

usePrettyDuration({
timeFrom: '${start}',
timeTo: '${end}',
dateFormat: '${dateFormat}',
quickRanges: ${JSON.stringify(quickRanges)},
})`}</EuiCodeBlock>

<EuiSpacer size="s" />

<EuiText>
<p>{prettyDuration(start, end, quickRanges, dateFormat)}</p>
<p>
{usePrettyDuration({
timeFrom: start,
timeTo: end,
quickRanges,
dateFormat,
})}
</p>
</EuiText>

<EuiSpacer size="xl" />
Expand Down
71 changes: 42 additions & 29 deletions src-docs/src/views/pretty_duration/pretty_duration_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import {
EuiAccordion,
EuiCode,
EuiCodeBlock,
EuiSpacer,
commonDurationRanges,
} from '../../../../src/components';

import { RenderI18nTimeOptions } from '../../../../src/components/date_picker/super_date_picker/time_options';

import PrettyDuration from './pretty_duration';
const prettyDurationSource = require('!!raw-loader!./pretty_duration');

Expand All @@ -26,37 +26,50 @@ export const PrettyDurationExample = {
text: (
<Fragment>
<p>
Use <EuiCode>prettyDuration</EuiCode> to convert a start and end
date string to a human-friendly format.
Use the <EuiCode>{'<PrettyDuration />'}</EuiCode> component (for JSX
display) or <EuiCode>usePrettyDuration()</EuiCode> hook (for
attribute strings) to convert a start and end date string to a
human-friendly format. Both utilities take the following props:
</p>

<p>
Start and end values for the duration are passed as the first and
second arguments, respectively. These can be timestamps (
<EuiCode>2018-01-17T18:57:57.149Z</EuiCode>) or relative times (
<EuiCode>now-15m</EuiCode>).
</p>
<ul>
<li>
<p>
<EuiCode>timeFrom</EuiCode> and <EuiCode>timeTo</EuiCode> accept
start and end date values for the duration. These can be
timestamps (<EuiCode>2018-01-17T18:57:57.149Z</EuiCode>) or
relative times (<EuiCode>now-15m</EuiCode>).
</p>
</li>

<p>
An array of quick range values is passed as the third argument.
These are used to pretty format custom ranges. EUI exports
<EuiCode>commonDurationRanges</EuiCode> which can be passed here.
</p>
<li>
<p>
<EuiCode>dateFormat</EuiCode> specifies the output date/time
format.
</p>
</li>

<EuiAccordion
id="commonDurationRanges"
buttonContent="Show commonDurationRanges definition"
>
<EuiCodeBlock>
{JSON.stringify(commonDurationRanges, null, 2)}
</EuiCodeBlock>
</EuiAccordion>

<EuiSpacer />

<p>
The output date/time format is specified by the fourth argument.
</p>
<li>
<p>
<EuiCode>quickRanges</EuiCode> optionally accepts an array of
quick range values that are used to pretty format custom ranges.
If no custom quick ranges are passed, EUI will default to a set
of common duration ranges defined below.
</p>
<EuiAccordion
id="commonDurationRanges"
buttonContent="Show default common duration ranges"
>
<EuiCodeBlock>
<RenderI18nTimeOptions>
{({ commonDurationRanges }) =>
JSON.stringify(commonDurationRanges, null, 2)
}
</RenderI18nTimeOptions>
</EuiCodeBlock>
</EuiAccordion>
</li>
</ul>
</Fragment>
),
demo: <PrettyDuration />,
Expand Down
1 change: 1 addition & 0 deletions src-docs/src/views/super_date_picker/super_date_picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ export default () => {
end={end}
onTimeChange={onTimeChange}
onRefresh={onRefresh}
locale="ja"
cee-chen marked this conversation as resolved.
Show resolved Hide resolved
/>
</>
);
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default () => {
};

const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<
EuiSuperDatePickerProps['recentlyUsedRanges']
NonNullable<EuiSuperDatePickerProps['recentlyUsedRanges']>
>([]);
const [isLoading, setIsLoading] = useState(false);
const [start, setStart] = useState('now-30m');
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/super_date_picker/super_date_picker_pattern.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const sampleItems = [

export default () => {
const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<
EuiSuperDatePickerProps['recentlyUsedRanges']
NonNullable<EuiSuperDatePickerProps['recentlyUsedRanges']>
>([]);
const [isLoading, setIsLoading] = useState(false);
const [refreshInterval, setRefreshInterval] = useState(1000);
Expand Down
8 changes: 4 additions & 4 deletions src/components/date_picker/auto_refresh/auto_refresh.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
import { EuiInputPopover, EuiPopover } from '../../popover';
import { useEuiI18n } from '../../i18n';

import { prettyInterval } from '../super_date_picker/pretty_interval';
import { usePrettyInterval } from '../super_date_picker/pretty_interval';
import {
EuiRefreshInterval,
EuiRefreshIntervalProps,
Expand Down Expand Up @@ -75,7 +75,7 @@ export const EuiAutoRefresh: FunctionComponent<EuiAutoRefreshProps> = ({
}
readOnly={readOnly}
disabled={isDisabled}
value={prettyInterval(Boolean(isPaused), refreshInterval)}
value={usePrettyInterval(Boolean(isPaused), refreshInterval)}
{...rest}
/>
}
Expand Down Expand Up @@ -124,7 +124,7 @@ export const EuiAutoRefreshButton: FunctionComponent<EuiAutoRefreshButtonProps>
const autoRefeshLabelOn = useEuiI18n(
'euiAutoRefresh.buttonLabelOn',
'Auto refresh is on and set to {prettyInterval}',
{ prettyInterval: prettyInterval(Boolean(isPaused), refreshInterval) }
{ prettyInterval: usePrettyInterval(Boolean(isPaused), refreshInterval) }
);

return (
Expand All @@ -140,7 +140,7 @@ export const EuiAutoRefreshButton: FunctionComponent<EuiAutoRefreshButtonProps>
isDisabled={isDisabled}
{...rest}
>
{prettyInterval(Boolean(isPaused), refreshInterval, shortHand)}
{usePrettyInterval(Boolean(isPaused), refreshInterval, shortHand)}
</EuiButtonEmpty>
}
isOpen={isPopoverOpen}
Expand Down
Loading