mirror of
https://github.com/strapi/strapi.git
synced 2025-12-01 09:35:26 +00:00
Improve button library and fix db connector
This commit is contained in:
cyril lopez
parent
5abb9c5fac
commit
3754d324fa
@ -6,32 +6,79 @@
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { isEmpty } from 'lodash';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import cn from 'classnames';
|
||||
|
||||
import styles from './styles.scss';
|
||||
|
||||
class Button extends React.Component {
|
||||
// eslint-disable-line react/prefer-stateless-function
|
||||
render() {
|
||||
const label = this.props.handlei18n ? <FormattedMessage id={this.props.label} values={this.props.labelValues} /> : this.props.label;
|
||||
const addShape = this.props.addShape ? <i className="fa fa-plus" /> : '';
|
||||
function Button(props) {
|
||||
const buttonProps = Object.assign({}, props);
|
||||
const propsToDelete = ['loader', 'primary', 'primaryAddShape', 'secondary', 'secondaryHotline', 'secondaryHotlineAdd', 'kind', 'labelValues'];
|
||||
|
||||
propsToDelete.map((value) => delete buttonProps[value]);
|
||||
|
||||
if (props.loader) {
|
||||
return (
|
||||
<button
|
||||
className={`${styles[this.props.buttonSize]} ${styles[this.props.buttonBackground]} ${styles.button}`}
|
||||
onClick={this.props.onClick}
|
||||
>
|
||||
{addShape}{label}
|
||||
type="button"
|
||||
className={cn(
|
||||
styles.loader,
|
||||
props.primary && styles.primary,
|
||||
props.secondary && styles.secondary,
|
||||
props.secondaryHotline && styles.secondaryHotline,
|
||||
props.primaryAddShape && styles.primaryAddShape,
|
||||
props.kind && styles[props.kind],
|
||||
props.className,
|
||||
|
||||
)}
|
||||
disabled
|
||||
{...buttonProps}
|
||||
>
|
||||
<div className={styles.saving}>
|
||||
<span>.</span><span>.</span><span>.</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const label = !isEmpty(props.label) && !props.children ? <FormattedMessage id={props.label} values={props.labelValues} /> : props.children;
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
styles.button,
|
||||
props.primary && styles.primary,
|
||||
props.secondary && styles.secondary,
|
||||
props.secondaryHotline && styles.secondaryHotline,
|
||||
props.secondaryHotlineAdd && styles.secondaryHotlineAdd,
|
||||
props.primaryAddShape && styles.primaryAddShape,
|
||||
props.kind && styles[props.kind],
|
||||
props.className,
|
||||
)}
|
||||
type={props.type || 'button'}
|
||||
{...buttonProps}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
Button.propTypes = {
|
||||
addShape: PropTypes.bool,
|
||||
buttonBackground: PropTypes.string,
|
||||
buttonSize: PropTypes.string,
|
||||
handlei18n: PropTypes.bool,
|
||||
label: PropTypes.string.isRequired,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.any,
|
||||
kind: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.bool,
|
||||
]),
|
||||
label: PropTypes.string,
|
||||
labelValues: PropTypes.object,
|
||||
loader: PropTypes.bool,
|
||||
primary: PropTypes.bool,
|
||||
primaryAddShape: PropTypes.bool,
|
||||
secondary: PropTypes.bool,
|
||||
secondaryHotline: PropTypes.bool,
|
||||
secondaryHotlineAdd: PropTypes.bool,
|
||||
type: PropTypes.string,
|
||||
};
|
||||
|
||||
export default Button;
|
||||
|
||||
@ -1,76 +1,4 @@
|
||||
.button {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
height: 3rem;
|
||||
position: relative;
|
||||
border-radius: 0.3rem;
|
||||
margin-right: 1.8rem;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
font-family: Lato;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
> i {
|
||||
margin-right: 1.3rem;
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 0.3rem;
|
||||
content: '';
|
||||
opacity: 0.1;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttonLg {
|
||||
min-width: 15rem;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.buttonMd {
|
||||
min-width: 10rem;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.primary {
|
||||
font-weight: 500;
|
||||
background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
|
||||
color: white;
|
||||
&:active {
|
||||
box-shadow: inset 1px 1px 3px rgba(0,0,0,.15);
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
// height: 32px !important;
|
||||
color: #F64D0A;
|
||||
border: 0.1rem solid #F64D0A;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
&:active {
|
||||
border: 0.15rem solid #F64D0A;
|
||||
}
|
||||
}
|
||||
|
||||
.secondaryAddType {
|
||||
height: 2.6rem;
|
||||
color: #1C5DE7;
|
||||
line-height: 1.6rem;
|
||||
border: 0.1rem solid #1C5DE7;
|
||||
font-weight: 500;
|
||||
font-size: 1.3rem;
|
||||
padding-left: 1.6rem;
|
||||
padding-right: 1.6rem;
|
||||
}
|
||||
|
||||
.back {
|
||||
.back {
|
||||
background: #F3F3F3;
|
||||
color: #323740;
|
||||
font-weight: 500;
|
||||
@ -93,3 +21,158 @@
|
||||
box-shadow: inset 1px 1px 5px rgba(0,0,0,.1);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 3rem;
|
||||
position: relative;
|
||||
border-radius: 0.3rem;
|
||||
text-transform: capitalize;
|
||||
margin-right: 1.8rem;
|
||||
cursor: pointer;
|
||||
font-family: Lato;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
> i {
|
||||
margin-right: 1.3rem;
|
||||
font-weight: 600;
|
||||
padding-top: 1px;
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 0.3rem;
|
||||
content: '';
|
||||
opacity: 0.1;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.primary {
|
||||
font-weight: 500;
|
||||
min-width: 15rem;
|
||||
background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: white;
|
||||
&:active {
|
||||
box-shadow: inset 1px 1px 3px rgba(0,0,0,.15);
|
||||
}
|
||||
}
|
||||
|
||||
.primaryAddShape {
|
||||
font-weight: 500;
|
||||
min-width: 15rem;
|
||||
background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: white;
|
||||
&:active {
|
||||
box-shadow: inset 1px 1px 3px rgba(0,0,0,.15);
|
||||
}
|
||||
padding-top: 4px;
|
||||
padding-left: 1.6rem;
|
||||
padding-right: 1.6rem;
|
||||
&:before {
|
||||
content: '\F067';
|
||||
font-family: 'FontAwesome';
|
||||
font-weight: 600;
|
||||
font-size: 1.3rem;
|
||||
margin-right: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.secondary {
|
||||
// height: 32px !important;
|
||||
min-width: 10rem;
|
||||
color: #F64D0A;
|
||||
border: 0.1rem solid #F64D0A;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
&:active {
|
||||
border: 0.15rem solid #F64D0A;
|
||||
}
|
||||
}
|
||||
|
||||
.secondaryHotline {
|
||||
height: 2.6rem;
|
||||
min-width: 15rem;
|
||||
color: #1C5DE7;
|
||||
line-height: 1.6rem;
|
||||
border: 0.1rem solid #1C5DE7;
|
||||
font-weight: 500;
|
||||
font-size: 1.3rem;
|
||||
padding-left: 1.6rem;
|
||||
padding-right: 1.6rem;
|
||||
}
|
||||
|
||||
.secondaryHotlineAdd {
|
||||
height: 2.6rem;
|
||||
min-width: auto;
|
||||
padding: 0 15px 0px;
|
||||
color: #1C5DE7;
|
||||
line-height: 1.6rem;
|
||||
border: 0.1rem solid #1C5DE7;
|
||||
font-weight: 500;
|
||||
font-size: 1.3rem;
|
||||
&:before {
|
||||
content: '\F067';
|
||||
font-family: 'FontAwesome';
|
||||
font-weight: 600;
|
||||
font-size: 1.3rem;
|
||||
margin-right: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: .2;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: .2;
|
||||
}
|
||||
}
|
||||
|
||||
.saving {
|
||||
margin-top: -2.35rem;
|
||||
padding-left: 4px;
|
||||
line-height: 3.8rem;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.loader {
|
||||
height: 3rem;
|
||||
padding: 0;
|
||||
border-radius: 0.3rem;
|
||||
letter-spacing: .5rem;
|
||||
font-family: Lato;
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.saving span {
|
||||
animation-name: blink;
|
||||
animation-duration: 1.4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-fill-mode: both;
|
||||
// font-size: 5rem;
|
||||
}
|
||||
|
||||
.saving span:nth-child(2) {
|
||||
animation-delay: .2s;
|
||||
}
|
||||
|
||||
.saving span:nth-child(3) {
|
||||
animation-delay: .4s;
|
||||
}
|
||||
|
||||
@ -17,9 +17,7 @@ class PluginHeaderActions extends React.Component { // eslint-disable-line react
|
||||
<Button
|
||||
{...action}
|
||||
key={action.label}
|
||||
>
|
||||
<FormattedMessage id={action.label} defaultMessage={action.label} />
|
||||
</Button>
|
||||
/>
|
||||
));
|
||||
|
||||
return (
|
||||
|
||||
@ -79,16 +79,12 @@ export class Edit extends React.Component {
|
||||
this.pluginHeaderActions = [
|
||||
{
|
||||
label: 'content-manager.containers.Edit.cancel',
|
||||
handlei18n: true,
|
||||
buttonBackground: 'secondary',
|
||||
buttonSize: 'buttonMd',
|
||||
kind: 'secondary',
|
||||
onClick: this.props.cancelChanges,
|
||||
type: 'button',
|
||||
},
|
||||
{
|
||||
handlei18n: true,
|
||||
buttonBackground: 'primary',
|
||||
buttonSize: 'buttonLg',
|
||||
kind: 'primary',
|
||||
label: this.props.editing ? 'content-manager.containers.Edit.editing' : 'content-manager.containers.Edit.submit',
|
||||
onClick: this.handleSubmit,
|
||||
disabled: this.props.editing,
|
||||
@ -99,8 +95,7 @@ export class Edit extends React.Component {
|
||||
this.pluginHeaderSubActions = [
|
||||
{
|
||||
label: 'content-manager.containers.Edit.returnList',
|
||||
handlei18n: true,
|
||||
buttonBackground: 'back',
|
||||
kind: 'back',
|
||||
onClick: () => router.goBack(),
|
||||
type: 'button',
|
||||
},
|
||||
|
||||
@ -212,10 +212,7 @@ export class List extends React.Component {
|
||||
labelValues: {
|
||||
entity: pluginHeaderTitle,
|
||||
},
|
||||
handlei18n: true,
|
||||
addShape: true,
|
||||
buttonBackground: 'primary',
|
||||
buttonSize: 'buttonLg',
|
||||
kind: 'primaryAddShape',
|
||||
onClick: () => this.context.router.history.push(this.addRoute),
|
||||
},
|
||||
];
|
||||
|
||||
@ -286,15 +286,26 @@ const enableHookNestedDependencies = function (name, flattenHooksConfig) {
|
||||
|
||||
// Couldn't find configurations for this hook.
|
||||
if (isEmpty(get(flattenHooksConfig, name, true))) {
|
||||
|
||||
// Check if database connector is used
|
||||
const modelUsed = Object.keys(this.api || {})
|
||||
const modelsUsed = Object.keys(this.api || {})
|
||||
.filter(x => isObject(this.api[x].models)) // Filter API with models
|
||||
.map(x => this.api[x].models) // Keep models
|
||||
.filter(model => get(this.connection, model.connection, {}).connector === name) || 0; // Filter model with the right connector
|
||||
.filter(models => {
|
||||
const apiModelsUsed = Object.keys(models).filter(model => {
|
||||
const connector = get(this.config.connections, models[model].connection, {}).connector;
|
||||
|
||||
if (connector) {
|
||||
return connector.replace('strapi-', '') === name;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
return apiModelsUsed.length !== 0
|
||||
}) || 0; // Filter model with the right connector
|
||||
|
||||
flattenHooksConfig[name] = {
|
||||
enabled: modelUsed.length > 0 // Will return false if there is no model, else true.
|
||||
enabled: modelsUsed.length > 0 // Will return false if there is no model, else true.
|
||||
};
|
||||
|
||||
// Enabled dependencies.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user