gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: upgrade to Emotion 10 (#2166)

Browse Source
This commit is contained in:
Shawn Erquhart
2019-03-15 10:19:57 -04:00
committed by GitHub
parent 7d6992e464
commit ccef446d72
109 changed files with 4672 additions and 3875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/netlify-cms-widget-list/package.json
View File

@ -26,17 +26,17 @@
},
"devDependencies": {
"cross-env": "^5.2.0",
"webpack": "^4.16.1",
"webpack-cli": "^3.1.0"
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
},
"peerDependencies": {
"emotion": "^9.2.6",
"@emotion/core": "^10.0.9",
"@emotion/styled": "^10.0.9",
"immutable": "^3.7.6",
"lodash": "^4.17.10",
"netlify-cms-ui-default": "^2.0.0",
"prop-types": "^15.5.10",
"react": "^16.4.1",
"react-emotion": "^9.2.6",
"react-immutable-proptypes": "^2.1.0"
},
"localExternals": [

115
packages/netlify-cms-widget-list/src/ListControl.js
View File

@ -1,7 +1,9 @@
/** @jsx jsx */
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import styled, { cx, css } from 'react-emotion';
import styled from '@emotion/styled';
import { jsx, css, ClassNames } from '@emotion/core';
import { List, Map } from 'immutable';
import { partial } from 'lodash';
import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
@ -12,13 +14,7 @@ import {
resolveFieldKeyType,
getErrorMessageForTypedFieldAndValue,
} from './typedListHelpers';
import {
ListItemTopBar,
ObjectWidgetTopBar,
colors,
lengths,
components,
} from 'netlify-cms-ui-default';
import { ListItemTopBar, ObjectWidgetTopBar, colors, lengths } from 'netlify-cms-ui-default';
function valueToString(value) {
return value ? value.join(',').replace(/,([^\s]|$)/g, ', $1') : '';
@ -41,10 +37,16 @@ const NestedObjectLabel = styled.div`
border-radius: 0 0 ${lengths.borderRadius} ${lengths.borderRadius};
`;
const styles = {
collapsedObjectControl: css`
const styleStrings = {
collapsedObjectControl: `
display: none;
`,
objectWidgetTopBarContainer: `
padding: ${lengths.objectWidgetTopBarContainerPadding};
`,
};
const styles = {
listControlItem: css`
margin-top: 18px;
@ -275,6 +277,7 @@ export default class ListControl extends React.Component {
this.setState({ itemsCollapsed: updatedItemsCollapsed });
};
// eslint-disable-next-line react/display-name
renderItem = (item, index) => {
const {
classNameWrapper,
@ -300,7 +303,7 @@ export default class ListControl extends React.Component {
return (
<SortableListItem
className={cx(styles.listControlItem, { [styles.listControlItemCollapsed]: collapsed })}
css={[styles.listControlItem, collapsed && styles.listControlItemCollapsed]}
index={index}
key={`item-${index}`}
>
@ -311,21 +314,29 @@ export default class ListControl extends React.Component {
dragHandleHOC={SortableHandle}
/>
<NestedObjectLabel collapsed={collapsed}>{this.objectLabel(item)}</NestedObjectLabel>
<ObjectControl
classNameWrapper={cx(classNameWrapper, { [styles.collapsedObjectControl]: collapsed })}
value={item}
field={field}
onChangeObject={this.handleChangeFor(index)}
editorControl={editorControl}
resolveWidget={resolveWidget}
metadata={metadata}
forList
onValidateObject={onValidateObject}
clearFieldErrors={clearFieldErrors}
fieldsErrors={fieldsErrors}
ref={this.processControlRef}
controlRef={controlRef}
/>
<ClassNames>
{({ css, cx }) => (
<ObjectControl
classNameWrapper={cx(classNameWrapper, {
[css`
${styleStrings.collapsedObjectControl};
`]: collapsed,
})}
value={item}
field={field}
onChangeObject={this.handleChangeFor(index)}
editorControl={editorControl}
resolveWidget={resolveWidget}
metadata={metadata}
forList
onValidateObject={onValidateObject}
clearFieldErrors={clearFieldErrors}
fieldsErrors={fieldsErrors}
ref={this.processControlRef}
controlRef={controlRef}
/>
)}
</ClassNames>
</SortableListItem>
);
};
@ -335,7 +346,7 @@ export default class ListControl extends React.Component {
const errorMessage = getErrorMessageForTypedFieldAndValue(field, item);
return (
<SortableListItem
className={cx(styles.listControlItem, styles.listControlItemCollapsed)}
css={[styles.listControlItem, styles.listControlItemCollapsed]}
index={index}
key={`item-${index}`}
>
@ -360,25 +371,37 @@ export default class ListControl extends React.Component {
const listLabel = items.size === 1 ? labelSingular.toLowerCase() : label.toLowerCase();
return (
<div id={forID} className={cx(classNameWrapper, components.objectWidgetTopBarContainer)}>
<ObjectWidgetTopBar
allowAdd={field.get('allow_add', true)}
onAdd={this.handleAdd}
types={field.get(TYPES_KEY, null)}
onAddType={type => this.handleAddType(type, resolveFieldKeyType(field))}
heading={`${items.size} ${listLabel}`}
label={labelSingular.toLowerCase()}
onCollapseToggle={this.handleCollapseAllToggle}
collapsed={itemsCollapsed.every(val => val === true)}
/>
<SortableList
items={items}
renderItem={this.renderItem}
onSortEnd={this.onSortEnd}
useDragHandle
lockAxis="y"
/>
</div>
<ClassNames>
{({ cx, css }) => (
<div
id={forID}
className={cx(
classNameWrapper,
css`
${styleStrings.objectWidgetTopBarContainer}
`,
)}
>
<ObjectWidgetTopBar
allowAdd={field.get('allow_add', true)}
onAdd={this.handleAdd}
types={field.get(TYPES_KEY, null)}
onAddType={type => this.handleAddType(type, resolveFieldKeyType(field))}
heading={`${items.size} ${listLabel}`}
label={labelSingular.toLowerCase()}
onCollapseToggle={this.handleCollapseAllToggle}
collapsed={itemsCollapsed.every(val => val === true)}
/>
<SortableList
items={items}
renderItem={this.renderItem}
onSortEnd={this.onSortEnd}
useDragHandle
lockAxis="y"
/>
</div>
)}
</ClassNames>
);
}