Remove react-datetime dep and Date compo in helper plugin

Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2020-04-22 11:14:09 +02:00
parent dc0da4a125
commit a34c0ca7d9
13 changed files with 3 additions and 449 deletions

View File

@ -18,7 +18,6 @@ import '@babel/polyfill';
import 'sanitize.css/sanitize.css';
// Third party css library needed
import 'react-datetime/css/react-datetime.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.min.css';
import '@fortawesome/fontawesome-free/css/all.css';

View File

@ -63,7 +63,6 @@
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-copy-to-clipboard": "^5.0.1",
"react-datetime": "^2.16.3",
"react-dnd": "^10.0.2",
"react-dnd-html5-backend": "^10.0.2",
"react-dom": "^16.9.0",
@ -82,7 +81,7 @@
"redux-immutable": "^4.0.0",
"redux-saga": "^0.16.0",
"remove-markdown": "^0.2.2",
"reselect": "^3.0.1",
"reselect": "^4.0.0",
"sanitize.css": "^4.1.0",
"shelljs": "^0.7.8",
"strapi-helper-plugin": "3.0.0-beta.20",

View File

@ -2,7 +2,6 @@ const alias = [
'object-assign',
'whatwg-fetch',
'@babel/polyfill',
'@buffetjs/core',
'@buffetjs/custom',
'@buffetjs/icons',

View File

@ -1,19 +0,0 @@
import DateTime from 'react-datetime';
import styled from 'styled-components';
const StyledDateTime = styled(DateTime)`
.input {
height: 3.4rem;
margin-top: 0.9rem;
padding-left: 1rem;
background-size: 0 !important;
border: 1px solid #e3e9f3;
border-radius: 0.25rem;
line-height: 3.4rem;
font-size: 1.3rem;
font-family: 'Lato' !important;
box-shadow: 0px 1px 1px rgba(104, 118, 142, 0.05);
}
`;
export default StyledDateTime;

View File

@ -1,109 +0,0 @@
/**
*
* InputDate
*
*/
import React from 'react';
import moment from 'moment';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { isEmpty, isObject } from 'lodash';
import cn from 'classnames';
import StyledDateTime from './StyledDateTime';
/* eslint-disable react/jsx-boolean-value */
function InputDate(props) {
const value =
isObject(props.value) && props.value._isAMomentObject === true
? props.value
: moment(props.value);
const formattedPlaceholder =
props.placeholder === ''
? 'app.utils.placeholder.defaultMessage'
: props.placeholder;
return (
<FormattedMessage
id={formattedPlaceholder}
defaultMessage={formattedPlaceholder}
>
{placeholder => (
<StyledDateTime
dateFormat="YYYY-MM-DD"
inputProps={{
autoFocus: props.autoFocus,
className: cn(
'form-control',
'input',
!props.deactivateErrorHighlight && props.error && 'is-invalid',
!isEmpty(props.className) && props.className
),
disabled: props.disabled,
id: props.name,
name: props.name,
placeholder,
style: props.style,
}}
onBlur={moment =>
props.onBlur({
target: {
name: props.name,
value: moment,
},
})
}
onChange={moment =>
props.onChange({
target: {
name: props.name,
value: moment,
type: 'date',
},
})
}
onFocus={props.onFocus}
ref={props.inputRef}
tabIndex={props.tabIndex}
timeFormat="HH:mm:ss"
utc={true}
value={value}
style={props.style}
/>
)}
</FormattedMessage>
);
}
InputDate.defaultProps = {
autoFocus: false,
className: '',
deactivateErrorHighlight: false,
disabled: false,
error: false,
inputRef: () => {},
onBlur: () => {},
onFocus: () => {},
placeholder: 'app.utils.placeholder.defaultMessage',
style: {},
tabIndex: '0',
};
InputDate.propTypes = {
autoFocus: PropTypes.bool,
className: PropTypes.string,
deactivateErrorHighlight: PropTypes.bool,
disabled: PropTypes.bool,
error: PropTypes.bool,
inputRef: PropTypes.func,
name: PropTypes.string.isRequired,
onBlur: PropTypes.func,
onChange: PropTypes.func.isRequired,
onFocus: PropTypes.func,
placeholder: PropTypes.string,
style: PropTypes.object,
tabIndex: PropTypes.string,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
};
export default InputDate;

View File

@ -1,37 +0,0 @@
import styled from 'styled-components';
const Container = styled.div`
min-width: 200px;
margin-bottom: 1.5rem;
font-size: 1.3rem;
> div:first-of-type {
&:before {
content: '\f073';
position: absolute;
left: 1px;
top: 1px;
width: 32px;
height: 32px;
border-radius: 3px 0px 0px 3px;
background: #fafafb;
color: #b3b5b9;
text-align: center;
font-family: 'FontAwesome';
font-size: 1.4rem;
line-height: 32px;
-webkit-font-smoothing: none;
}
input {
width: 100%;
padding-left: 42px;
box-shadow: 0px 1px 1px rgba(104, 118, 142, 0.05);
&:focus {
outline: none;
}
}
}
`;
export default Container;

View File

@ -1,221 +0,0 @@
/**
*
* InputDateWithErrors
*
*/
import React from 'react';
import PropTypes from 'prop-types';
import { get, isEmpty, isFunction } from 'lodash';
import cn from 'classnames';
// Utils
import validateInput from '../../utils/inputsValidations';
// Design
import Label from '../Label';
import InputDescription from '../InputDescription';
import InputErrors from '../InputErrors';
import InputDate from '../InputDate';
import InputSpacer from '../InputSpacer';
import Container from './Container';
class InputDateWithErrors extends React.Component {
// eslint-disable-line react/prefer-stateless-function
state = { errors: [], hasInitialValue: false };
componentDidMount() {
const { value, errors } = this.props;
// Prevent the input from displaying an error when the user enters and leaves without filling it
if (!isEmpty(value)) {
this.setState({ hasInitialValue: true });
}
// Display input error if it already has some
if (!isEmpty(errors)) {
this.setState({ errors });
}
}
UNSAFE_componentWillReceiveProps(nextProps) {
// Show required error if the input's value is received after the compo is mounted
if (!isEmpty(nextProps.value) && !this.state.hasInitialValue) {
this.setState({ hasInitialValue: true });
}
// Check if errors have been updated during validations
if (nextProps.didCheckErrors !== this.props.didCheckErrors) {
// Remove from the state the errors that have already been set
const errors = isEmpty(nextProps.errors) ? [] : nextProps.errors;
this.setState({ errors });
}
}
/**
* Set the errors depending on the validations given to the input
* @param {Object} target
*/
handleBlur = ({ target }) => {
// Prevent from displaying error if the input is initially isEmpty
if (!isEmpty(get(target, 'value')) || this.state.hasInitialValue) {
const errors = validateInput(target.value, this.props.validations);
this.setState({ errors, hasInitialValue: true });
}
};
render() {
const {
autoFocus,
className,
customBootstrapClass,
deactivateErrorHighlight,
disabled,
errorsClassName,
errorsStyle,
inputClassName,
inputDescription,
inputDescriptionClassName,
inputDescriptionStyle,
inputStyle,
label,
labelClassName,
labelStyle,
name,
noErrorsDescription,
onBlur,
onChange,
onFocus,
placeholder,
style,
tabIndex,
value,
} = this.props;
const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
if (!noErrorsDescription && !isEmpty(this.state.errors)) {
spacer = <div />;
}
return (
<Container
className={cn(
(!isEmpty(customBootstrapClass) && customBootstrapClass) ||
'col-md-4',
!isEmpty(className) && className
)}
style={style}
>
<Label
className={labelClassName}
htmlFor={name}
message={label}
style={labelStyle}
/>
<InputDate
autoFocus={autoFocus}
className={inputClassName}
disabled={disabled}
deactivateErrorHighlight={deactivateErrorHighlight}
error={!isEmpty(this.state.errors)}
name={name}
onBlur={handleBlur}
onChange={onChange}
onFocus={onFocus}
placeholder={placeholder}
style={inputStyle}
tabIndex={tabIndex}
value={value}
/>
<InputDescription
className={inputDescriptionClassName}
message={inputDescription}
style={inputDescriptionStyle}
/>
<InputErrors
className={errorsClassName}
errors={(!noErrorsDescription && this.state.errors) || []}
name={name}
style={errorsStyle}
/>
{spacer}
</Container>
);
}
}
InputDateWithErrors.defaultProps = {
autoFocus: false,
className: '',
customBootstrapClass: 'col-md-4',
deactivateErrorHighlight: false,
didCheckErrors: false,
disabled: false,
onBlur: false,
onFocus: () => {},
errors: [],
errorsClassName: '',
errorsStyle: {},
inputClassName: '',
inputDescription: '',
inputDescriptionClassName: '',
inputDescriptionStyle: {},
inputStyle: {},
label: '',
labelClassName: '',
labelStyle: {},
noErrorsDescription: false,
placeholder: 'app.utils.placeholder.defaultMessage',
style: {},
tabIndex: '0',
validations: {},
value: null,
};
InputDateWithErrors.propTypes = {
autoFocus: PropTypes.bool,
className: PropTypes.string,
customBootstrapClass: PropTypes.string,
deactivateErrorHighlight: PropTypes.bool,
didCheckErrors: PropTypes.bool,
disabled: PropTypes.bool,
errors: PropTypes.array,
errorsClassName: PropTypes.string,
errorsStyle: PropTypes.object,
inputClassName: PropTypes.string,
inputDescription: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
PropTypes.shape({
id: PropTypes.string,
params: PropTypes.object,
}),
]),
inputDescriptionClassName: PropTypes.string,
inputDescriptionStyle: PropTypes.object,
inputStyle: PropTypes.object,
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
PropTypes.shape({
id: PropTypes.string,
params: PropTypes.object,
}),
]),
labelClassName: PropTypes.string,
labelStyle: PropTypes.object,
name: PropTypes.string.isRequired,
noErrorsDescription: PropTypes.bool,
onBlur: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
onChange: PropTypes.func.isRequired,
onFocus: PropTypes.func,
placeholder: PropTypes.string,
style: PropTypes.object,
tabIndex: PropTypes.string,
validations: PropTypes.object,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
};
export default InputDateWithErrors;

View File

@ -11,7 +11,6 @@ import { isEmpty, merge } from 'lodash';
// Design
import InputAddonWithErrors from '../InputAddonWithErrors';
import InputCheckboxWithErrors from '../InputCheckboxWithErrors';
import InputDateWithErrors from '../InputDateWithErrors';
import InputEmailWithErrors from '../InputEmailWithErrors';
import InputNumberWithErrors from '../InputNumberWithErrors';
import InputSearchWithErrors from '../InputSearchWithErrors';
@ -30,7 +29,6 @@ const DefaultInputError = ({ type }) => (
const inputs = {
addon: InputAddonWithErrors,
checkbox: InputCheckboxWithErrors,
date: InputDateWithErrors,
email: InputEmailWithErrors,
number: InputNumberWithErrors,
password: InputPasswordWithErrors,

View File

@ -27,8 +27,6 @@ export { default as InputAddon } from './components/InputAddon';
export { default as InputAddonWithErrors } from './components/InputAddonWithErrors';
export { default as InputCheckbox } from './components/InputCheckbox';
export { default as InputCheckboxWithErrors } from './components/InputCheckboxWithErrors';
export { default as InputDate } from './components/InputDate';
export { default as InputDateWithErrors } from './components/InputDateWithErrors';
export { default as InputDescription } from './components/InputDescription';
export { default as InputEmail } from './components/InputEmail';
export { default as InputEmailWithErrors } from './components/InputEmailWithErrors';

View File

@ -57,7 +57,6 @@
"lodash": "^4.17.5",
"moment": "^2.16.0",
"react": "^16.9.0",
"react-datetime": "^2.16.3",
"react-dom": "^16.9.0",
"react-intl": "^4.5.0",
"react-router": "^5.0.0",

View File

@ -25,7 +25,7 @@
"reactstrap": "8.4.1",
"redux": "^4.0.1",
"redux-immutable": "^4.0.0",
"reselect": "^3.0.1",
"reselect": "^4.0.0",
"showdown": "^1.9.0",
"strapi-helper-plugin": "3.0.0-beta.20",
"strapi-utils": "3.0.0-beta.20",

View File

@ -22,7 +22,7 @@
"reactstrap": "8.4.1",
"redux": "^4.0.1",
"redux-immutable": "^4.0.0",
"reselect": "^3.0.1",
"reselect": "^4.0.0",
"strapi-generate": "3.0.0-beta.20",
"strapi-generate-api": "3.0.0-beta.20",
"strapi-helper-plugin": "3.0.0-beta.20",

View File

@ -5777,11 +5777,6 @@ core-js-compat@^3.6.2:
browserslist "^4.8.5"
semver "7.0.0"
core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
core-js@^2.4.0, core-js@^2.4.1, core-js@^2.6.5:
version "2.6.11"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
@ -5868,15 +5863,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
create-react-class@^15.5.2:
version "15.6.3"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
dependencies:
fbjs "^0.8.9"
loose-envify "^1.3.1"
object-assign "^4.1.1"
create-react-context@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
@ -7855,19 +7841,6 @@ fbjs-css-vars@^1.0.0:
resolved "https://registry.yarnpkg.com/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz#216551136ae02fe255932c3ec8775f18e2c078b8"
integrity sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==
fbjs@^0.8.9:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
dependencies:
core-js "^1.0.0"
isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.18"
fbjs@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-1.0.0.tgz#52c215e0883a3c86af2a7a776ed51525ae8e0a5a"
@ -12925,11 +12898,6 @@ object-assign@4.x, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
object-assign@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
integrity sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=
object-copy@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
@ -14734,16 +14702,6 @@ react-dates@^21.1.0, react-dates@^21.5.1:
react-with-styles "^4.1.0"
react-with-styles-interface-css "^6.0.0"
react-datetime@^2.16.3:
version "2.16.3"
resolved "https://registry.yarnpkg.com/react-datetime/-/react-datetime-2.16.3.tgz#7f9ac7d4014a939c11c761d0c22d1fb506cb505e"
integrity sha512-amWfb5iGEiyqjLmqCLlPpu2oN415jK8wX1qoTq7qn6EYiU7qQgbNHglww014PT4O/3G5eo/3kbJu/M/IxxTyGw==
dependencies:
create-react-class "^15.5.2"
object-assign "^3.0.0"
prop-types "^15.5.7"
react-onclickoutside "^6.5.0"
react-dnd-html5-backend@^10.0.2:
version "10.0.2"
resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-10.0.2.tgz#15cb9d2b923f43576a136df854e288cb5969784c"
@ -14840,11 +14798,6 @@ react-moment-proptypes@^1.6.0, react-moment-proptypes@^1.7.0:
dependencies:
moment ">=1.6.0"
react-onclickoutside@^6.5.0:
version "6.9.0"
resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz#a54bc317ae8cf6131a5d78acea55a11067f37a1f"
integrity sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A==
react-outside-click-handler@^1.2.4:
version "1.3.0"
resolved "https://registry.yarnpkg.com/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz#3831d541ac059deecd38ec5423f81e80ad60e115"
@ -15585,11 +15538,6 @@ requires-port@^1.0.0:
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
reselect@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
integrity sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=
reselect@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"