Upgrade buffet.js. Add icon to inputs label

Signed-off-by: soupette <cyril.lpz@gmail.com>
This commit is contained in:
soupette 2021-03-04 11:59:26 +01:00
parent 242749f08a
commit cf2bd304cf
17 changed files with 163 additions and 87 deletions

View File

@ -19,8 +19,8 @@
"type": "string"
},
"categories": {
"via": "addresses",
"collection": "category",
"via": "addresses",
"dominant": true
},
"cover": {
@ -51,6 +51,12 @@
"likes": {
"collection": "like",
"via": "address"
},
"json": {
"type": "json"
},
"slug": {
"type": "uid"
}
}
}

View File

@ -16,8 +16,8 @@
"type": "string"
},
"addresses": {
"collection": "address",
"via": "categories"
"via": "categories",
"collection": "address"
}
}
}

View File

@ -24,12 +24,12 @@
"@babel/preset-env": "^7.9.5",
"@babel/preset-react": "^7.9.4",
"@babel/runtime": "^7.12.13",
"@buffetjs/core": "3.3.4",
"@buffetjs/custom": "3.3.4",
"@buffetjs/hooks": "3.3.4",
"@buffetjs/icons": "3.3.4",
"@buffetjs/styles": "3.3.4",
"@buffetjs/utils": "3.3.4",
"@buffetjs/core": "3.3.5-next.1",
"@buffetjs/custom": "3.3.5-next.1",
"@buffetjs/hooks": "3.3.5-next.1",
"@buffetjs/icons": "3.3.5-next.1",
"@buffetjs/styles": "3.3.5-next.1",
"@buffetjs/utils": "3.3.5-next.1",
"@casl/ability": "^4.1.5",
"@fortawesome/fontawesome-free": "^5.11.2",
"@fortawesome/fontawesome-svg-core": "^1.2.32",

View File

@ -0,0 +1,8 @@
import styled from 'styled-components';
const LabelIconWrapper = styled.span`
margin-left: 5px;
cursor: pointer;
`;
export default LabelIconWrapper;

View File

@ -53,6 +53,7 @@ export { default as InputToggle } from './components/InputToggle';
export { default as InputToggleWithErrors } from './components/InputToggleWithErrors';
export { default as Label } from './components/Label';
export { default as LabelIconWrapper } from './components/LabelIconWrapper';
export { default as LeftMenu } from './components/LeftMenu';
export { default as LeftMenuList } from './components/LeftMenuList';
export { default as LiLink } from './components/LiLink';

View File

@ -50,12 +50,12 @@
"rollup-plugin-terser": "^4.0.4"
},
"dependencies": {
"@buffetjs/core": "3.3.4",
"@buffetjs/custom": "3.3.4",
"@buffetjs/hooks": "3.3.4",
"@buffetjs/icons": "3.3.4",
"@buffetjs/styles": "3.3.4",
"@buffetjs/utils": "3.3.4",
"@buffetjs/core": "3.3.5-next.1",
"@buffetjs/custom": "3.3.5-next.1",
"@buffetjs/hooks": "3.3.5-next.1",
"@buffetjs/icons": "3.3.5-next.1",
"@buffetjs/styles": "3.3.5-next.1",
"@buffetjs/utils": "3.3.5-next.1",
"bootstrap": "^4.5.3",
"classnames": "^2.2.5",
"immutable": "^3.8.2",

View File

@ -8,7 +8,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { isEmpty, isFunction } from 'lodash';
import cn from 'classnames';
import { LabelIconWrapper } from 'strapi-helper-plugin';
import { Description, ErrorMessage, Label } from '@buffetjs/styles';
import { Error } from '@buffetjs/core';
@ -31,6 +31,7 @@ class InputJSONWithErrors extends React.Component {
inputDescription,
inputStyle,
label,
labelIcon,
name,
onBlur,
placeholder,
@ -52,7 +53,12 @@ class InputJSONWithErrors extends React.Component {
<Wrapper
className={`${cn(!isEmpty(className) && className)} ${hasError ? 'bordered' : ''}`}
>
<Label htmlFor={name}>{label}</Label>
<Label htmlFor={name}>
<span>{label}</span>
{labelIcon && (
<LabelIconWrapper title={labelIcon.title}>{labelIcon.icon}</LabelIconWrapper>
)}
</Label>
<InputJSON
{...rest}
autoFocus={autoFocus}
@ -102,6 +108,7 @@ InputJSONWithErrors.defaultProps = {
inputStyle: {},
label: '',
labelClassName: '',
labelIcon: null,
labelStyle: {},
onBlur: false,
placeholder: '',
@ -137,6 +144,10 @@ InputJSONWithErrors.propTypes = {
}),
]),
labelClassName: PropTypes.string,
labelIcon: PropTypes.shape({
icon: PropTypes.any,
title: PropTypes.string,
}),
labelStyle: PropTypes.object,
name: PropTypes.string.isRequired,
onBlur: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),

View File

@ -5,10 +5,14 @@ import { ErrorMessage, Description } from '@buffetjs/styles';
import { Label, Error } from '@buffetjs/core';
import { useDebounce, useClickAwayListener } from '@buffetjs/hooks';
import styled from 'styled-components';
import { request, LoadingIndicator, useGlobalContext } from 'strapi-helper-plugin';
import {
request,
LabelIconWrapper,
LoadingIndicator,
useGlobalContext,
} from 'strapi-helper-plugin';
import { FormattedMessage } from 'react-intl';
import { get } from 'lodash';
import getTrad from '../../utils/getTrad';
import pluginId from '../../pluginId';
import getRequestUrl from '../../utils/getRequestUrl';
@ -43,6 +47,7 @@ const InputUID = ({
description,
error: inputError,
label: inputLabel,
labelIcon,
name,
onChange,
validations,
@ -218,7 +223,12 @@ const InputUID = ({
return (
<Wrapper ref={wrapperRef}>
<Name htmlFor={name}>{inputLabel}</Name>
<Name htmlFor={name}>
<span>{inputLabel}</span>
{labelIcon && (
<LabelIconWrapper title={labelIcon.title}>{labelIcon.icon}</LabelIconWrapper>
)}
</Name>
<InputContainer>
<Input
{...inputProps}
@ -293,6 +303,10 @@ InputUID.propTypes = {
editable: PropTypes.bool,
error: PropTypes.string,
label: PropTypes.string.isRequired,
labelIcon: PropTypes.shape({
icon: PropTypes.any,
title: PropTypes.string,
}),
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
validations: PropTypes.object,
@ -303,6 +317,7 @@ InputUID.defaultProps = {
description: '',
editable: false,
error: null,
labelIcon: null,
validations: {},
value: '',
};

View File

@ -4,6 +4,7 @@ import { get, omit, take } from 'lodash';
import isEqual from 'react-fast-compare';
import { useIntl } from 'react-intl';
import { Inputs as InputsIndex } from '@buffetjs/custom';
import { Globe } from '@buffetjs/icons';
import { NotAllowedInput, useStrapi } from 'strapi-helper-plugin';
import { useContentTypeLayout } from '../../hooks';
import { getFieldName } from '../../utils';
@ -206,6 +207,7 @@ function Inputs({
disabled={shouldDisableField}
error={errorMessage}
inputDescription={description}
labelIcon={{ title: 'Localized', icon: <Globe title="toto" /> }}
description={description}
contentTypeUID={currentContentTypeLayout.uid}
customInputs={{

View File

@ -8,10 +8,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import { isEmpty, isFunction } from 'lodash';
import cn from 'classnames';
import { Description, ErrorMessage, Label } from '@buffetjs/styles';
import { Error } from '@buffetjs/core';
import { LabelIconWrapper } from 'strapi-helper-plugin';
import Wysiwyg from '../Wysiwyg';
import Wrapper from './Wrapper';
@ -28,6 +27,7 @@ class WysiwygWithErrors extends React.Component {
inputDescription,
inputStyle,
label,
labelIcon,
name,
onBlur: handleBlur,
onChange,
@ -50,7 +50,12 @@ class WysiwygWithErrors extends React.Component {
className={`${cn(!isEmpty(className) && className)} ${hasError ? 'bordered' : ''}`}
style={style}
>
<Label htmlFor={name}>{label}</Label>
<Label htmlFor={name}>
<span>{label}</span>
{labelIcon && (
<LabelIconWrapper title={labelIcon.title}>{labelIcon.icon}</LabelIconWrapper>
)}
</Label>
<Wysiwyg
{...rest}
autoFocus={autoFocus}
@ -100,6 +105,7 @@ WysiwygWithErrors.defaultProps = {
inputDescription: '',
inputStyle: {},
label: '',
labelIcon: null,
onBlur: false,
placeholder: '',
resetProps: false,
@ -134,6 +140,10 @@ WysiwygWithErrors.propTypes = {
params: PropTypes.object,
}),
]),
labelIcon: PropTypes.shape({
icon: PropTypes.any,
title: PropTypes.string,
}),
name: PropTypes.string.isRequired,
onBlur: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
onChange: PropTypes.func.isRequired,

View File

@ -9,12 +9,12 @@
"required": true
},
"dependencies": {
"@buffetjs/core": "3.3.4",
"@buffetjs/custom": "3.3.4",
"@buffetjs/hooks": "3.3.4",
"@buffetjs/icons": "3.3.4",
"@buffetjs/styles": "3.3.4",
"@buffetjs/utils": "3.3.4",
"@buffetjs/core": "3.3.5-next.1",
"@buffetjs/custom": "3.3.5-next.1",
"@buffetjs/hooks": "3.3.5-next.1",
"@buffetjs/icons": "3.3.5-next.1",
"@buffetjs/styles": "3.3.5-next.1",
"@buffetjs/utils": "3.3.5-next.1",
"@sindresorhus/slugify": "1.1.0",
"classnames": "^2.2.6",
"codemirror": "^5.59.0",

View File

@ -8,12 +8,12 @@
"description": "content-type-builder.plugin.description"
},
"dependencies": {
"@buffetjs/core": "3.3.4",
"@buffetjs/custom": "3.3.4",
"@buffetjs/hooks": "3.3.4",
"@buffetjs/icons": "3.3.4",
"@buffetjs/styles": "3.3.4",
"@buffetjs/utils": "3.3.4",
"@buffetjs/core": "3.3.5-next.1",
"@buffetjs/custom": "3.3.5-next.1",
"@buffetjs/hooks": "3.3.5-next.1",
"@buffetjs/icons": "3.3.5-next.1",
"@buffetjs/styles": "3.3.5-next.1",
"@buffetjs/utils": "3.3.5-next.1",
"@sindresorhus/slugify": "1.1.0",
"fs-extra": "^9.0.1",
"immutable": "^3.8.2",

View File

@ -11,12 +11,12 @@
"test": "echo \"no tests yet\""
},
"dependencies": {
"@buffetjs/core": "3.3.4",
"@buffetjs/custom": "3.3.4",
"@buffetjs/hooks": "3.3.4",
"@buffetjs/icons": "3.3.4",
"@buffetjs/styles": "3.3.4",
"@buffetjs/utils": "3.3.4",
"@buffetjs/core": "3.3.5-next.1",
"@buffetjs/custom": "3.3.5-next.1",
"@buffetjs/hooks": "3.3.5-next.1",
"@buffetjs/icons": "3.3.5-next.1",
"@buffetjs/styles": "3.3.5-next.1",
"@buffetjs/utils": "3.3.5-next.1",
"cheerio": "^1.0.0-rc.5",
"fs-extra": "^9.0.1",
"immutable": "^3.8.2",

View File

@ -2,7 +2,11 @@ import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { get, isEmpty } from 'lodash';
import { CheckPermissions, prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin';
import {
CheckPermissions,
LabelIconWrapper,
prefixFileUrlWithBackendUrl,
} from 'strapi-helper-plugin';
import pluginPermissions from '../../permissions';
import { getTrad, formatFileForEditing } from '../../utils';
import CardControl from '../CardControl';
@ -17,7 +21,18 @@ import Wrapper from './Wrapper';
import Input from '../Input';
import ErrorMessage from './ErrorMessage';
const InputMedia = ({ disabled, label, onChange, name, attribute, value, type, id, error }) => {
const InputMedia = ({
disabled,
label,
onChange,
name,
attribute,
value,
type,
id,
error,
labelIcon,
}) => {
const [modal, setModal] = useState({
isOpen: false,
step: 'list',
@ -117,7 +132,10 @@ const InputMedia = ({ disabled, label, onChange, name, attribute, value, type, i
return (
<Wrapper hasError={!isEmpty(error)}>
<Name htmlFor={name}>{`${label}${displaySlidePagination}`}</Name>
<Name htmlFor={name}>
<span>{`${label}${displaySlidePagination}`}</span>
{labelIcon && <LabelIconWrapper title={labelIcon.title}>{labelIcon.icon}</LabelIconWrapper>}
</Name>
<CardPreviewWrapper onDragOver={handleAllowDrop} onDrop={handleDrop}>
<CardControlWrapper>
@ -199,6 +217,10 @@ InputMedia.propTypes = {
error: PropTypes.string,
id: PropTypes.string,
label: PropTypes.string,
labelIcon: PropTypes.shape({
icon: PropTypes.any,
title: PropTypes.string,
}),
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
type: PropTypes.string.isRequired,
@ -209,6 +231,7 @@ InputMedia.defaultProps = {
id: null,
error: null,
label: '',
labelIcon: null,
value: null,
};

View File

@ -12,12 +12,12 @@
"test": "echo \"no tests yet\""
},
"dependencies": {
"@buffetjs/core": "3.3.4",
"@buffetjs/custom": "3.3.4",
"@buffetjs/hooks": "3.3.4",
"@buffetjs/icons": "3.3.4",
"@buffetjs/styles": "3.3.4",
"@buffetjs/utils": "3.3.4",
"@buffetjs/core": "3.3.5-next.1",
"@buffetjs/custom": "3.3.5-next.1",
"@buffetjs/hooks": "3.3.5-next.1",
"@buffetjs/icons": "3.3.5-next.1",
"@buffetjs/styles": "3.3.5-next.1",
"@buffetjs/utils": "3.3.5-next.1",
"byte-size": "^7.0.0",
"cropperjs": "^1.5.6",
"immer": "^8.0.1",

View File

@ -12,12 +12,12 @@
"test": "echo \"no tests yet\""
},
"dependencies": {
"@buffetjs/core": "3.3.4",
"@buffetjs/custom": "3.3.4",
"@buffetjs/hooks": "3.3.4",
"@buffetjs/icons": "3.3.4",
"@buffetjs/styles": "3.3.4",
"@buffetjs/utils": "3.3.4",
"@buffetjs/core": "3.3.5-next.1",
"@buffetjs/custom": "3.3.5-next.1",
"@buffetjs/hooks": "3.3.5-next.1",
"@buffetjs/icons": "3.3.5-next.1",
"@buffetjs/styles": "3.3.5-next.1",
"@buffetjs/utils": "3.3.5-next.1",
"@purest/providers": "^1.0.2",
"bcryptjs": "^2.4.3",
"grant-koa": "5.4.8",

View File

@ -1053,15 +1053,15 @@
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
"@buffetjs/core@3.3.4":
version "3.3.4"
resolved "https://registry.yarnpkg.com/@buffetjs/core/-/core-3.3.4.tgz#eb7583ab953738027e21da40e0d35c81d6f624dd"
integrity sha512-KxxmkXjgRvkqVwW959Ie2BWRYAPtQQbPXYLMZ7tr0KmNs3Eug6ifahiVSw5izcjGSTWnnuA45MOVxWq7EP9D3w==
"@buffetjs/core@3.3.5-next.1":
version "3.3.5-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/core/-/core-3.3.5-next.1.tgz#ec34c66f19ac064b2174c7c82a0f7042bb1f7c7e"
integrity sha512-04RSVtAQVRunvYRXoAEIIR1PIopCB7UP7l+zAVGraQmsebAWRoFeMGRQtwAyfoOIYV1of5tGwXJGPtY6KSV7bw==
dependencies:
"@buffetjs/hooks" "3.3.4"
"@buffetjs/icons" "3.3.4"
"@buffetjs/styles" "3.3.4"
"@buffetjs/utils" "3.3.4"
"@buffetjs/hooks" "3.3.5-next.1"
"@buffetjs/icons" "3.3.5-next.1"
"@buffetjs/styles" "3.3.5-next.1"
"@buffetjs/utils" "3.3.5-next.1"
"@fortawesome/fontawesome-svg-core" "^1.2.25"
"@fortawesome/free-regular-svg-icons" "^5.11.2"
"@fortawesome/free-solid-svg-icons" "^5.11.2"
@ -1077,35 +1077,35 @@
react-with-direction "^1.3.1"
reactstrap "^8.5.1"
"@buffetjs/custom@3.3.4":
version "3.3.4"
resolved "https://registry.yarnpkg.com/@buffetjs/custom/-/custom-3.3.4.tgz#d26b3abd885e3a9f53c33b9a508e44e1652649ca"
integrity sha512-So/VOcDRWzHJ0VVIlnRPuUvOLdzjPARClvtSVwwxPPXG510J0AawNdfvj54gokwYAZbblBp9V74s1b2w1fWTZw==
"@buffetjs/custom@3.3.5-next.1":
version "3.3.5-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/custom/-/custom-3.3.5-next.1.tgz#c0b0be1f5a712e9646765c7d840e7f1a08d4955a"
integrity sha512-RoaXMVjjeAvYfy9Jd8GtXDwD2CxDuIWyO3dJRTfxaOl5uTHTXqJ0jG1N8RKeVbceTk/4nIAKB32O8mmdLgcydg==
dependencies:
"@buffetjs/core" "3.3.4"
"@buffetjs/styles" "3.3.4"
"@buffetjs/utils" "3.3.4"
"@buffetjs/core" "3.3.5-next.1"
"@buffetjs/styles" "3.3.5-next.1"
"@buffetjs/utils" "3.3.5-next.1"
lodash "4.17.20"
moment "^2.24.0"
prop-types "^15.5.10"
react-moment-proptypes "^1.7.0"
"@buffetjs/hooks@3.3.4":
version "3.3.4"
resolved "https://registry.yarnpkg.com/@buffetjs/hooks/-/hooks-3.3.4.tgz#2fd7622673a0a28177e910ad85ba9f1386e9c47f"
integrity sha512-HUdnzBFovEXWnIVgzts6DtPSEJEn55Ivbu6Xd8AXyZoz5xYTwhD5iCtif0CS5uEtqsXGOoc320kcbPrRn6wEgw==
"@buffetjs/hooks@3.3.5-next.1":
version "3.3.5-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/hooks/-/hooks-3.3.5-next.1.tgz#7b49def2bb282b1bc3b485bd5460b1fff6008ec1"
integrity sha512-uAE0yarlZBsrMwaILu0eLbdn7pHbfXBHt9G4kKVtCzYjd2hUxN08rF95MHMqZj9qSx0Z7vmsuW7CE0ehyIj0Mg==
"@buffetjs/icons@3.3.4":
version "3.3.4"
resolved "https://registry.yarnpkg.com/@buffetjs/icons/-/icons-3.3.4.tgz#21b46eea90db7a88b2b929bfed63099275ef068a"
integrity sha512-uIjpnydas3TkT+5MyH7y/zP5ny813OFE4Q3Gl0do1nITUdwrkZXqV9VvfYeDDoYoOURaLI5N6yfR/kW6qgV3Kw==
"@buffetjs/icons@3.3.5-next.1":
version "3.3.5-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/icons/-/icons-3.3.5-next.1.tgz#cfd18f00a997e8e0672908392e7b4fe39e05eea1"
integrity sha512-9Qy4XTriN8pse4VYiKi1+hZDE5Xt7tNJuQgsHglM0k+kuSJddLXX2bxcUR8y+CUOoX1PNh0vDvyNxwX5r7ZFHQ==
dependencies:
prop-types "^15.5.10"
"@buffetjs/styles@3.3.4":
version "3.3.4"
resolved "https://registry.yarnpkg.com/@buffetjs/styles/-/styles-3.3.4.tgz#41a024e6dab5ccb19d3b16e02491177c6dba7edf"
integrity sha512-nAGYnR17D0DhdKxMyWcmKD5UZN29xG99yGraBR/vJ50S5YqEgL0N248oxVghw3YMVF4sLxrKvFIFkTGPSiDfiw==
"@buffetjs/styles@3.3.5-next.1":
version "3.3.5-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/styles/-/styles-3.3.5-next.1.tgz#e37e9da1ee0168d0517476e208e8d904c5f391e0"
integrity sha512-1iNxv38WaUTyQ7eee7WgyPW9/B3df+8ezwrBanzFJ3y3LR6DKCU53wNE/p/CT9g8VQBQ89loWtkahLQpPL/WkA==
dependencies:
"@fortawesome/fontawesome-free" "^5.12.0"
"@fortawesome/fontawesome-svg-core" "^1.2.22"
@ -1116,10 +1116,10 @@
react-dates "^21.1.0"
react-tooltip "^4.2.11"
"@buffetjs/utils@3.3.4":
version "3.3.4"
resolved "https://registry.yarnpkg.com/@buffetjs/utils/-/utils-3.3.4.tgz#6f000d58349d82f8e672aa4053d8f361a1a8a829"
integrity sha512-65Z4wFrcjTsSHkVNCxhq0vHOAugct42hgkwcqGcDN42McX45cac0ul8lA6xzJmE5yaA1dzkflgYeFTERHZzjmw==
"@buffetjs/utils@3.3.5-next.1":
version "3.3.5-next.1"
resolved "https://registry.yarnpkg.com/@buffetjs/utils/-/utils-3.3.5-next.1.tgz#0038d4ce6e54cfddf16067190301046a93e5fb13"
integrity sha512-lXCA+QGC+b38lYf0t0yWmWQmfggJA0QSOyW3ZBBnWf4dJFGbqlOU4j2cZsCLw5Us4on3PwmTkCpcC+YehsxcUw==
dependencies:
lodash "4.17.20"
yup "^0.27.0"