Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c9bcc2d

Browse files
fix(#151): Update react-base16-styling to latest (#156)
* update react-base16-styling to main project repo * shamelessly borrow from react-json-tree for proper use of new invertTheme API, also took cues from extracted helper functions to keep files a little more consitent * added getDerivedStateFromProps to replace unsafe component will receive props, added prettier and eslint rcs
1 parent 4f14171 commit c9bcc2d

File tree

5 files changed

+825
-100
lines changed

5 files changed

+825
-100
lines changed

‎.eslintrc.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
extends: 'react-native',
3+
// ESLint doesn't find React Native components
4+
// Remove this setting when this issue is fixed.
5+
// https://github.com/facebook/react-native/issues/28549
6+
'import/ignore': ['react-native'],
7+
};

‎.prettierrc.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
arrowParens: 'avoid',
3+
semi: true,
4+
singleQuote: true,
5+
trailingComma: 'es5',
6+
};

‎package.json‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,22 @@
77
"andytompkins",
88
"jsdario",
99
"patw0929",
10-
"Swaagie"
10+
"Swaagie",
11+
"tannermares"
1112
],
1213
"dependencies": {
1314
"prop-types": "^15.7.2",
14-
"react-base16-styling": "github:dean177/react-base16-styling#fbc6593"
15+
"react-base16-styling": "^0.8.0"
1516
},
1617
"description": "React Native JSON viewing component, based on react-json-tree",
1718
"devDependencies": {
1819
"babel-preset-react-native": "4.0.1",
1920
"enzyme": "^3.11.0",
21+
"eslint-config-react-native": "^4.1.0",
2022
"immutable": "3.8.1",
2123
"jest": "26.6.3",
2224
"madge": "4.0.2",
23-
"prettier": "2.2.1",
25+
"prettier": "^2.2.1",
2426
"react": "17.0.2",
2527
"react-native": "0.64.0"
2628
},
@@ -47,7 +49,8 @@
4749
"lint": "eslint --max-warnings=0 src test Example",
4850
"test": "NODE_ENV=test jest",
4951
"start": "cd Examples && npm start",
50-
"circular-dependency-check": "madge ./src/index.js --circular"
52+
"circular-dependency-check": "madge ./src/index.js --circular",
53+
"prettier-sync": "yarn && ./node_modules/prettier/bin-prettier.js --write \"src/**/*.js\" && ./node_modules/prettier/bin-prettier.js --write \"test/**/*.js\""
5154
},
5255
"version": "1.2.1"
5356
}

‎src/index.js‎

Lines changed: 58 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,17 @@ import PropTypes from 'prop-types';
33
import { Text, View } from 'react-native';
44
import { JSONNode } from './Nodes';
55
import createStylingFromTheme from './createStylingFromTheme';
6+
import { invertTheme } from 'react-base16-styling';
67

78
const identity = value => value;
9+
const expandRootNode = (_keyName, _data, level) => level === 0;
10+
const defaultItemString = (_type, _data, itemType, itemString) => (
11+
<Text>
12+
{itemType} {itemString}
13+
</Text>
14+
);
15+
const defaultLabelRenderer = ([label]) => <Text>{label}:</Text>;
16+
const noCustomNode = () => false;
817

918
/* eslint-disable no-param-reassign */
1019
function checkLegacyTheming(theme, props) {
@@ -16,9 +25,9 @@ function checkLegacyTheming(theme, props) {
1625
getValueStyle: 'valueText',
1726
};
1827

19-
const deprecatedStylingMethods = Object
20-
.keys(deprecatedStylingMethodsMap)
21-
.filter(name => props[name]);
28+
const deprecatedStylingMethods = Object.keys(
29+
deprecatedStylingMethodsMap
30+
).filter(name => props[name]);
2231

2332
if (deprecatedStylingMethods.length > 0) {
2433
if (typeof theme === 'string') {
@@ -27,9 +36,11 @@ function checkLegacyTheming(theme, props) {
2736
theme = { ...theme };
2837
}
2938

30-
deprecatedStylingMethods.forEach((name) => {
39+
deprecatedStylingMethods.forEach(name => {
3140
// eslint-disable-next-line no-console
32-
console.error(`Styling method "${name}" is deprecated, use the "theme" property instead`);
41+
console.error(
42+
`Styling method "${name}" is deprecated, use the "theme" property instead`
43+
);
3344

3445
theme[deprecatedStylingMethodsMap[name]] = ({ style }, ...args) => ({
3546
style: {
@@ -43,6 +54,17 @@ function checkLegacyTheming(theme, props) {
4354
return theme;
4455
}
4556

57+
function getStateFromProps(props) {
58+
let theme = checkLegacyTheming(props.theme, props);
59+
if (props.invertTheme) {
60+
theme = invertTheme(theme);
61+
}
62+
63+
return {
64+
styling: createStylingFromTheme(theme),
65+
};
66+
}
67+
4668
/* eslint-enable no-param-reassign */
4769

4870
class JSONTree extends React.Component {
@@ -56,48 +78,67 @@ class JSONTree extends React.Component {
5678
]).isRequired,
5779
hideRoot: PropTypes.bool,
5880
invertTheme: PropTypes.bool,
59-
keyPath: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
81+
keyPath: PropTypes.arrayOf(
82+
PropTypes.oneOfType([PropTypes.string, PropTypes.number])
83+
),
6084
postprocessValue: PropTypes.func,
6185
sortObjectKeys: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
6286
theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
6387
};
6488

6589
static defaultProps = {
66-
shouldExpandNode: (keyName,data,level)=>level===0,// expands root by default,
90+
shouldExpandNode: expandRootNode,
6791
hideRoot: false,
6892
keyPath: ['root'],
69-
getItemString: (type,data,itemType,itemString)=><Text>{itemType}{itemString}</Text>,
70-
labelRenderer: ([label])=><Text>{label}:</Text>,
93+
getItemString: defaultItemString,
94+
labelRenderer: defaultLabelRenderer,
7195
valueRenderer: identity,
7296
postprocessValue: identity,
73-
isCustomNode: ()=>false,
97+
isCustomNode: noCustomNode,
7498
collectionLimit: 50,
7599
invertTheme: true,
76100
sortObjectKeys: true,
77101
};
78102

103+
constructor(props) {
104+
super(props);
105+
this.state = getStateFromProps(props);
106+
}
107+
108+
static getDerivedStateFromProps(props, state) {
109+
if (['theme', 'invertTheme'].find(k => props[k] !== state[k])) {
110+
return getStateFromProps(props);
111+
}
112+
return null;
113+
}
114+
115+
shouldComponentUpdate(nextProps) {
116+
return !!Object.keys(nextProps).find(k =>
117+
k === 'keyPath'
118+
? nextProps[k].join('/') !== this.props[k].join('/')
119+
: nextProps[k] !== this.props[k]
120+
);
121+
}
122+
79123
render() {
80124
const {
81125
data: value,
82126
keyPath,
83127
postprocessValue,
84128
hideRoot,
85-
theme,
86-
invertTheme,
129+
theme,// eslint-disable-line no-unused-vars
130+
invertTheme: _,// eslint-disable-line no-unused-vars
87131
...rest
88132
} = this.props;
89133

90-
const styling =createStylingFromTheme(checkLegacyTheming(theme,rest),invertTheme);
134+
const {styling }=this.state;
91135

92136
return (
93137
<View {...styling('tree')}>
94138
<JSONNode
95-
hideRoot={hideRoot}
139+
{...{ postprocessValue,hideRoot, styling, ...rest}}
96140
keyPath={hideRoot ? [] : keyPath}
97-
postprocessValue={postprocessValue}
98-
styling={styling}
99141
value={postprocessValue(value)}
100-
{...rest}
101142
/>
102143
</View>
103144
);

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /