mirror of
https://github.com/strapi/strapi.git
synced 2025-09-22 23:09:47 +00:00
refactor DateTimePicker in the helper-plugin to use the new one in the DS repo
This commit is contained in:
Simone Taeggi
parent
79452154ec
commit
07566f9727
@ -207,6 +207,11 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
|
||||
fill: #8e8ea9;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
border-radius: 4px;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -227,11 +232,6 @@ exports[`DynamicTabe / Cellcontent / RelationMultiple renders and matches the sn
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
border-radius: 4px;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
<div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
|
||||
@ -273,22 +273,6 @@ describe('ADMIN | PAGES | AUTH | Oops', () => {
|
||||
fill: #8e8ea9;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c8 svg {
|
||||
height: 4px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.c21 {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
@ -346,6 +330,22 @@ describe('ADMIN | PAGES | AUTH | Oops', () => {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c8 svg {
|
||||
height: 4px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
margin: 0 auto;
|
||||
width: 552px;
|
||||
|
||||
@ -621,22 +621,6 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c8 svg {
|
||||
height: 4px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.c12:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
@ -667,6 +651,22 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c8 svg {
|
||||
height: 4px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
margin: 0 auto;
|
||||
width: 552px;
|
||||
|
||||
@ -495,22 +495,6 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c8 svg {
|
||||
height: 4px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.c35 {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
@ -568,6 +552,22 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c8 svg {
|
||||
height: 4px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
margin: 0 auto;
|
||||
width: 552px;
|
||||
|
||||
@ -545,22 +545,6 @@ describe('Admin | UseCasePage', () => {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c8 svg {
|
||||
height: 4px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.c10:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
@ -626,6 +610,22 @@ describe('Admin | UseCasePage', () => {
|
||||
height: 4.5rem;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c8 svg {
|
||||
height: 4px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
margin: 0 auto;
|
||||
width: 552px;
|
||||
|
||||
@ -1,221 +1,17 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import { Stack } from '@strapi/design-system/Stack';
|
||||
import { DatePicker } from '@strapi/design-system/DatePicker';
|
||||
import { TimePicker } from '@strapi/design-system/TimePicker';
|
||||
import { Field, FieldHint, FieldLabel, FieldError } from '@strapi/design-system/Field';
|
||||
import { Flex } from '@strapi/design-system/Flex';
|
||||
import { Box } from '@strapi/design-system/Box';
|
||||
import { parseDate } from './parseDate';
|
||||
|
||||
const CustomField = styled(Field)`
|
||||
> div {
|
||||
> div {
|
||||
p[data-strapi-field-error='true'] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const LabelAction = styled(Box)`
|
||||
svg path {
|
||||
fill: ${({ theme }) => theme.colors.neutral500};
|
||||
}
|
||||
`;
|
||||
|
||||
const DateTimePicker = ({
|
||||
ariaLabel,
|
||||
clearLabel,
|
||||
disabled,
|
||||
error,
|
||||
hint,
|
||||
label,
|
||||
labelAction,
|
||||
onChange,
|
||||
onClear,
|
||||
name,
|
||||
required,
|
||||
size,
|
||||
step,
|
||||
value,
|
||||
...props
|
||||
}) => {
|
||||
const initialDate = parseDate(value);
|
||||
const [dateValue, setDateValue] = useState(initialDate);
|
||||
const [timeValue, setTimeValue] = useState(
|
||||
initialDate
|
||||
? `${initialDate.getHours()}:${initialDate.getMinutes()}:${initialDate.getSeconds()}`
|
||||
: null
|
||||
);
|
||||
|
||||
const handleDateChange = (e) => {
|
||||
setDateValue(e);
|
||||
|
||||
if (timeValue) {
|
||||
const dateToSet = new Date(e);
|
||||
dateToSet.setHours(timeValue.split(':')[0]);
|
||||
dateToSet.setMinutes(timeValue.split(':')[1]);
|
||||
|
||||
if (onChange) {
|
||||
onChange(dateToSet);
|
||||
}
|
||||
} else {
|
||||
const dateToSet = new Date(e);
|
||||
setTimeValue(`${dateToSet.getHours()}:${dateToSet.getMinutes()}:${dateToSet.getSeconds()}`);
|
||||
|
||||
if (onChange) {
|
||||
onChange(dateToSet);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleTimeChange = (e) => {
|
||||
setTimeValue(e);
|
||||
|
||||
const dateToSet = new Date(dateValue);
|
||||
dateToSet.setHours(e.split(':')[0]);
|
||||
dateToSet.setMinutes(e.split(':')[1]);
|
||||
|
||||
if (!dateValue) {
|
||||
setDateValue(new Date());
|
||||
}
|
||||
|
||||
if (onChange) {
|
||||
onChange(dateToSet);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDateClear = () => {
|
||||
setDateValue(undefined);
|
||||
setTimeValue(undefined);
|
||||
onClear();
|
||||
};
|
||||
|
||||
const handleTimeClear = () => {
|
||||
setTimeValue(undefined);
|
||||
|
||||
let dateToSet;
|
||||
|
||||
if (dateValue) {
|
||||
dateToSet = new Date(dateValue);
|
||||
dateToSet.setHours('00');
|
||||
dateToSet.setMinutes('00');
|
||||
}
|
||||
|
||||
if (onChange) {
|
||||
onChange(dateToSet);
|
||||
}
|
||||
};
|
||||
import React, { useEffect } from 'react';
|
||||
import { DateTimePicker as MyDateTimePicker } from '@strapi/design-system';
|
||||
|
||||
export default function DateTimePicker(props) {
|
||||
useEffect(() => {
|
||||
if (value) {
|
||||
const parsedData = parseDate(value);
|
||||
setDateValue(parsedData);
|
||||
setTimeValue(
|
||||
parsedData
|
||||
? `${parsedData.getHours()}:${parsedData.getMinutes()}:${parsedData.getSeconds()}`
|
||||
: null
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log(
|
||||
`
|
||||
TODO V5: remove DateTimePicker component from the helper-plugin
|
||||
Deprecation warning: Usage of "DateTimePicker" component from the helper-plugin is deprecated and will be removed in the next major release. Instead, use the DateTimePicker from the Design System: import { DateTimePicker } from '@strapi/design-system';"
|
||||
`
|
||||
);
|
||||
} else {
|
||||
setDateValue(undefined);
|
||||
setTimeValue(undefined);
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
useEffect(() => {
|
||||
console.warn(
|
||||
`
|
||||
Deprecation warning: Usage of "DateTimePicker" component from the helper-plugin is deprecated and will be removed in the next major release. Instead, use the DateTimePicker from the Design System: import { DateTimePicker } from '@strapi/design-system/DateTimePicker';"
|
||||
`
|
||||
);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<CustomField
|
||||
name={name}
|
||||
role="group"
|
||||
aria-labelledby="datetime-label"
|
||||
hint={hint}
|
||||
error={error}
|
||||
>
|
||||
<Stack spacing={1}>
|
||||
{label && (
|
||||
<Flex>
|
||||
<FieldLabel required={required} id="datetime-label">
|
||||
{label}
|
||||
</FieldLabel>
|
||||
{labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
|
||||
</Flex>
|
||||
)}
|
||||
<Stack horizontal spacing={2}>
|
||||
<DatePicker
|
||||
data-testid="datetimepicker-date"
|
||||
name={name}
|
||||
ariaLabel={label || ariaLabel}
|
||||
error={error}
|
||||
selectedDate={dateValue}
|
||||
selectedDateLabel={(formattedDate) => `Date picker, current is ${formattedDate}`}
|
||||
onChange={handleDateChange}
|
||||
size={size}
|
||||
onClear={onClear && handleDateClear}
|
||||
clearLabel={clearLabel}
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
/>
|
||||
<TimePicker
|
||||
data-testid="datetimepicker-time"
|
||||
size={size}
|
||||
aria-label={label || ariaLabel}
|
||||
error={error}
|
||||
value={timeValue}
|
||||
onChange={handleTimeChange}
|
||||
onClear={onClear && handleTimeClear}
|
||||
clearLabel={clearLabel}
|
||||
disabled={disabled}
|
||||
step={step}
|
||||
/>
|
||||
</Stack>
|
||||
<FieldHint />
|
||||
<FieldError id="datetimepicker" />
|
||||
</Stack>
|
||||
</CustomField>
|
||||
);
|
||||
};
|
||||
|
||||
DateTimePicker.displayName = 'DateTimePicker';
|
||||
|
||||
DateTimePicker.defaultProps = {
|
||||
ariaLabel: undefined,
|
||||
clearLabel: 'clear',
|
||||
disabled: false,
|
||||
error: undefined,
|
||||
hint: undefined,
|
||||
label: undefined,
|
||||
labelAction: undefined,
|
||||
onClear: undefined,
|
||||
required: false,
|
||||
size: 'M',
|
||||
step: 1,
|
||||
value: undefined,
|
||||
};
|
||||
|
||||
DateTimePicker.propTypes = {
|
||||
ariaLabel: PropTypes.string,
|
||||
clearLabel: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
error: PropTypes.string,
|
||||
hint: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
labelAction: PropTypes.element,
|
||||
name: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func.isRequired,
|
||||
onClear: PropTypes.func,
|
||||
required: PropTypes.bool,
|
||||
size: PropTypes.oneOf(['S', 'M']),
|
||||
step: PropTypes.number,
|
||||
value: PropTypes.instanceOf(Date),
|
||||
};
|
||||
|
||||
export default DateTimePicker;
|
||||
return <MyDateTimePicker {...props} />;
|
||||
}
|
||||
|
||||
@ -1,21 +1,44 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`DateTimePicker snapshots the component 1`] = `
|
||||
.c8 {
|
||||
.c2 {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
font-weight: 600;
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c17 {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.43;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c20 {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
padding-right: 8px;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.c15 {
|
||||
.c14 {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.c17 {
|
||||
.c16 {
|
||||
padding-right: 16px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
.c0 {
|
||||
-webkit-align-items: stretch;
|
||||
-webkit-box-align: stretch;
|
||||
-ms-flex-align: stretch;
|
||||
@ -43,7 +66,7 @@ exports[`DateTimePicker snapshots the component 1`] = `
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
.c5 {
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
@ -61,53 +84,30 @@ exports[`DateTimePicker snapshots the component 1`] = `
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.c2 > * {
|
||||
.c1 > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.c2 > * + * {
|
||||
.c1 > * + * {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.c11 > * {
|
||||
.c10 > * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.c5 > * {
|
||||
.c4 > * {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.c5 > * + * {
|
||||
.c4 > * + * {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
font-weight: 600;
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c18 {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.43;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #32324d;
|
||||
}
|
||||
|
||||
.c21 {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.33;
|
||||
color: #666687;
|
||||
}
|
||||
|
||||
.c10 {
|
||||
.c9 {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding-bottom: 0.65625rem;
|
||||
@ -122,36 +122,36 @@ exports[`DateTimePicker snapshots the component 1`] = `
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.c10::-webkit-input-placeholder {
|
||||
.c9::-webkit-input-placeholder {
|
||||
color: #8e8ea9;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c10::-moz-placeholder {
|
||||
.c9::-moz-placeholder {
|
||||
color: #8e8ea9;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c10:-ms-input-placeholder {
|
||||
.c9:-ms-input-placeholder {
|
||||
color: #8e8ea9;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c10::placeholder {
|
||||
.c9::placeholder {
|
||||
color: #8e8ea9;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.c10[aria-disabled='true'] {
|
||||
.c9[aria-disabled='true'] {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.c10:focus {
|
||||
.c9:focus {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
.c6 {
|
||||
border: 1px solid #dcdce4;
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
@ -163,41 +163,12 @@ exports[`DateTimePicker snapshots the component 1`] = `
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.c7:focus-within {
|
||||
.c6:focus-within {
|
||||
border: 1px solid #4945ff;
|
||||
box-shadow: #4945ff 0px 0px 0px 2px;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.c9 svg path {
|
||||
fill: #8e8ea9;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c13:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.c13[aria-disabled='true'] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
.c11 {
|
||||
position: relative;
|
||||
border: 1px solid #dcdce4;
|
||||
padding-right: 12px;
|
||||
@ -213,28 +184,28 @@ exports[`DateTimePicker snapshots the component 1`] = `
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
|
||||
.c12:focus-within {
|
||||
.c11:focus-within {
|
||||
border: 1px solid #4945ff;
|
||||
box-shadow: #4945ff 0px 0px 0px 2px;
|
||||
}
|
||||
|
||||
.c19 {
|
||||
.c18 {
|
||||
background: transparent;
|
||||
border: none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.c19 svg {
|
||||
.c18 svg {
|
||||
height: 0.6875rem;
|
||||
width: 0.6875rem;
|
||||
}
|
||||
|
||||
.c19 svg path {
|
||||
.c18 svg path {
|
||||
fill: #666687;
|
||||
}
|
||||
|
||||
.c20 {
|
||||
.c19 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -243,15 +214,44 @@ exports[`DateTimePicker snapshots the component 1`] = `
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c20 svg {
|
||||
.c19 svg {
|
||||
width: 0.375rem;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
.c8 {
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.c8 svg path {
|
||||
fill: #8e8ea9;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.c12:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.c12[aria-disabled='true'] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c16 {
|
||||
.c15 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
@ -262,45 +262,36 @@ exports[`DateTimePicker snapshots the component 1`] = `
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c16 svg {
|
||||
.c15 svg {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
.c16 svg path {
|
||||
.c15 svg path {
|
||||
fill: #8e8ea9;
|
||||
}
|
||||
|
||||
.c0 > div > div p[data-strapi-field-error='true'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
<div
|
||||
aria-labelledby="datetime-label"
|
||||
class="c0"
|
||||
aria-labelledby="datetime-label-1"
|
||||
role="group"
|
||||
>
|
||||
<div
|
||||
class="c1 c2"
|
||||
class="c0 c1"
|
||||
spacing="1"
|
||||
>
|
||||
<div
|
||||
class="c3"
|
||||
<label
|
||||
class="c2"
|
||||
for="field-3"
|
||||
id="datetime-label-1"
|
||||
>
|
||||
<label
|
||||
class="c4"
|
||||
for="field-1"
|
||||
id="datetime-label"
|
||||
<div
|
||||
class="c3"
|
||||
>
|
||||
<div
|
||||
class="c3"
|
||||
>
|
||||
Date time picker
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
Date time picker
|
||||
</div>
|
||||
</label>
|
||||
<div
|
||||
class="c3 c5"
|
||||
class="c3 c4"
|
||||
spacing="2"
|
||||
>
|
||||
<div
|
||||
@ -309,19 +300,19 @@ exports[`DateTimePicker snapshots the component 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
class="c1 c2"
|
||||
class="c0 c1"
|
||||
spacing="1"
|
||||
>
|
||||
<div
|
||||
class="c6 c7"
|
||||
class="c5 c6"
|
||||
>
|
||||
<div
|
||||
class="c8"
|
||||
class="c7"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-label="Date picker, current is 10/13/2021"
|
||||
class="c9"
|
||||
class="c8"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
@ -346,9 +337,9 @@ exports[`DateTimePicker snapshots the component 1`] = `
|
||||
aria-disabled="false"
|
||||
aria-invalid="false"
|
||||
aria-label="Date time picker"
|
||||
class="c10"
|
||||
class="c9"
|
||||
data-testid="datetimepicker-date"
|
||||
id="datepicker-2"
|
||||
id="datepicker-4"
|
||||
name="datetimepicker"
|
||||
value="10/13/2021"
|
||||
/>
|
||||
@ -359,34 +350,34 @@ exports[`DateTimePicker snapshots the component 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="c1 c11"
|
||||
class="c0 c10"
|
||||
>
|
||||
<div
|
||||
class="c3 c12"
|
||||
class="c3 c11"
|
||||
>
|
||||
<button
|
||||
aria-disabled="false"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-label="Date time picker"
|
||||
aria-labelledby="timepicker-3-label timepicker-3-content"
|
||||
class="c13"
|
||||
aria-labelledby="timepicker-5-label timepicker-5-content"
|
||||
class="c12"
|
||||
data-testid="datetimepicker-time"
|
||||
id="timepicker-3"
|
||||
id="timepicker-5"
|
||||
type="button"
|
||||
/>
|
||||
<div
|
||||
class="c6 c14"
|
||||
class="c5 c13"
|
||||
>
|
||||
<div
|
||||
class="c3"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="c15"
|
||||
class="c14"
|
||||
>
|
||||
<div
|
||||
class="c16"
|
||||
class="c15"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
@ -405,11 +396,11 @@ exports[`DateTimePicker snapshots the component 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c17"
|
||||
class="c16"
|
||||
>
|
||||
<span
|
||||
class="c18"
|
||||
id="timepicker-3-content"
|
||||
class="c17"
|
||||
id="timepicker-5-content"
|
||||
>
|
||||
10:00
|
||||
</span>
|
||||
@ -420,9 +411,9 @@ exports[`DateTimePicker snapshots the component 1`] = `
|
||||
>
|
||||
<button
|
||||
aria-hidden="true"
|
||||
class="c15 c19 c20"
|
||||
class="c14 c18 c19"
|
||||
tabindex="-1"
|
||||
title="Carret Down Button"
|
||||
title="select"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
@ -447,8 +438,8 @@ exports[`DateTimePicker snapshots the component 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
class="c21"
|
||||
id="field-1-hint"
|
||||
class="c20"
|
||||
id="field-3-hint"
|
||||
>
|
||||
This is a super description
|
||||
</p>
|
||||
|
||||
@ -568,22 +568,6 @@ exports[`BrowseStep renders and match snapshot 1`] = `
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c9 svg {
|
||||
height: 4px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.c27 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12,1fr);
|
||||
@ -620,6 +604,22 @@ exports[`BrowseStep renders and match snapshot 1`] = `
|
||||
color: #4a4a6a;
|
||||
}
|
||||
|
||||
.c9 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c9 svg {
|
||||
height: 4px;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.c30 {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { DateTimePicker } from '@strapi/design-system/DateTimePicker';
|
||||
import { Select, Option } from '@strapi/design-system/Select';
|
||||
import { DateTimePicker, Select } from '@strapi/design-system';
|
||||
import { Option } from '@strapi/design-system/Select';
|
||||
import { useIntl } from 'react-intl';
|
||||
|
||||
const FilterValueInput = ({ label, onChange, options, type, value }) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user