Skip to content

Commit 6eff28d

Browse files
CarstenWicknerCarstenWickner
authored
Merge pull request #86 from CarstenWickner/ie-compatibility
Internet Explorer 11 Compatibility
2 parents e7fa19e + c1cc7e4 commit 6eff28d

9 files changed

+144
-89
lines changed

‎CHANGELOG.MD

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
55
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
66

77
## [Unreleased]
8+
### Changed
9+
- Compatibility: replace `<button>` tags for items in columns with focusable `<div>` tags
10+
- Compatibility: replace css `clip-path` usage for nested-item indicator with css shape from borders
11+
- Compatibility: replace css `clip-path` usage for leading breadcrumbs icon with css shape from borders
12+
- Compatibility: replace css `clip-path` usage for breadcrumbs items with css shape from borders
813

914
## [4.3.0] - 2019-12-12
1015
### Added

‎package.json

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-jsonschema-inspector",
3-
"version": "4.3.1-SNAPSHOT",
3+
"version": "4.4.0-SNAPSHOT",
44
"description": "View component for traversing/searching in a JSON Schema",
55
"homepage": "https://CarstenWickner.github.io/react-jsonschema-inspector/?path=/docs/inspector--show-case",
66
"author": "Carsten Wickner",
@@ -32,27 +32,27 @@
3232
"defaults"
3333
],
3434
"devDependencies": {
35-
"@mdx-js/loader": "~1.5.1",
36-
"@storybook/addon-actions": "~5.2.3",
37-
"@storybook/addon-docs": "~5.2.3",
38-
"@storybook/addon-options": "~5.2.3",
39-
"@storybook/react": "~5.2.3",
35+
"@mdx-js/loader": "~1.5.2",
36+
"@storybook/addon-actions": "~5.2.8",
37+
"@storybook/addon-docs": "~5.2.8",
38+
"@storybook/addon-options": "~5.2.8",
39+
"@storybook/react": "~5.2.8",
4040
"@types/classnames": "^2.2.9",
41-
"@types/enzyme": "~3.10.3",
42-
"@types/enzyme-adapter-react-16": "~1.0.5",
41+
"@types/enzyme": "^3.10.4",
42+
"@types/enzyme-adapter-react-16": "^1.0.5",
4343
"@types/jest": "24.0.23",
4444
"@types/json-schema": "^7.0.3",
4545
"@types/lodash.debounce": "^4.0.6",
4646
"@types/lodash.escaperegexp": "^4.1.6",
4747
"@types/lodash.isequal": "^4.5.5",
4848
"@types/memoize-one": "^4.1.1",
4949
"@types/prop-types": "^15.7.2",
50-
"@types/react": "^16.9.5",
51-
"@types/react-dom": "^16.9.2",
52-
"@typescript-eslint/eslint-plugin": "^2.11.0",
53-
"@typescript-eslint/parser": "^2.9.0",
54-
"@typescript-eslint/typescript-estree": "^2.9.0",
55-
"@wessberg/rollup-plugin-ts": "~1.1.73",
50+
"@types/react": "^16.9.16",
51+
"@types/react-dom": "^16.9.4",
52+
"@typescript-eslint/eslint-plugin": "^2.12.0",
53+
"@typescript-eslint/parser": "^2.12.0",
54+
"@typescript-eslint/typescript-estree": "^2.12.0",
55+
"@wessberg/rollup-plugin-ts": "^1.1.83",
5656
"awesome-typescript-loader": "~5.2.1",
5757
"babel-loader": "~8.0.6",
5858
"coveralls": "~3.0.6",
@@ -62,22 +62,22 @@
6262
"enzyme-to-json": "~3.4.2",
6363
"eslint": "^6.7.0",
6464
"eslint-config-prettier": "^6.7.0",
65-
"eslint-plugin-import": "^2.18.2",
65+
"eslint-plugin-import": "^2.19.1",
6666
"eslint-plugin-jsdoc": "^18.4.0",
6767
"eslint-plugin-jsx-a11y": "^6.2.3",
68-
"eslint-plugin-prettier": "^3.1.1",
68+
"eslint-plugin-prettier": "^3.1.2",
6969
"eslint-plugin-react": "^7.17.0",
7070
"gh-pages": "~2.1.1",
7171
"identity-obj-proxy": "~3.0.0",
7272
"jest": "24.0.0",
7373
"node-sass": "~4.13.0",
7474
"prettier": "~1.19.1",
7575
"react-docgen-typescript-loader": "~3.6.0",
76-
"rollup": "~1.27.0",
76+
"rollup": "^1.27.13",
7777
"rollup-plugin-postcss": "~2.0.3",
7878
"rollup-plugin-terser": "~5.1.3",
7979
"sass-loader": "~8.0.0",
80-
"style-loader": "~1.0.0",
80+
"style-loader": "~1.0.1",
8181
"stylelint": "^12.0.0",
8282
"stylelint-config-recommended-scss": "^4.1.0",
8383
"stylelint-scss": "~3.13.0",

‎src/component/Inspector.scss

Lines changed: 59 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,6 @@
4141
}
4242
&-item {
4343
flex-shrink: 0;
44-
text-align: start;
45-
border: none;
46-
background: inherit;
47-
color: inherit;
48-
font: inherit;
49-
padding: 0;
50-
margin: 0;
51-
width: 100%;
5244

5345
&.selected {
5446
background-color: $selectionColor;
@@ -62,6 +54,7 @@
6254
&-content {
6355
display: flex;
6456
flex-direction: row;
57+
align-items: flex-end;
6558
}
6659
&-name {
6760
display: block;
@@ -72,22 +65,24 @@
7265
&-icon {
7366
display: block;
7467
flex-grow: 0;
75-
width: 1em;
76-
min-width: 1em;
77-
height: 1.69em;
78-
margin-top: auto;
68+
height: 0;
69+
width: 0.25em;
70+
min-width: 0.25em;
71+
margin: 0.4em 0 0.4em 0.25em;
72+
border-top: 0.45em solid transparent;
73+
border-left: 0.5em solid transparent;
74+
border-bottom: 0.45em solid transparent;
7975
}
8076
&.has-nested-items > &-content > &-icon {
81-
background-color: #7f7f7f;
82-
-webkit-clip-path: polygon(25% 25%, 75% 50%, 25% 75%);
83-
clip-path: polygon(25% 25%, 75% 50%, 25% 75%);
77+
border-left-color: #7f7f7f;
8478
}
8579
}
8680
&-column {
8781
&,
8882
&-placeholder {
8983
display: flex;
9084
flex-direction: column;
85+
align-items: stretch;
9186
width: $columnWidth;
9287
min-width: $columnWidth;
9388
border-right: $innerBorder;
@@ -112,7 +107,7 @@
112107
color: $trailingSelectionFontColor;
113108
}
114109
&-column.trailing-selection &-item.selected.has-nested-items &-item-icon {
115-
background-color: $trailingSelectionFontColor;
110+
border-left-color: $trailingSelectionFontColor;
116111
}
117112
&-details {
118113
width: $detailsWidth;
@@ -186,35 +181,62 @@
186181
padding: $spacingInside 0.75em $spacingInside (5 * $spacingInside);
187182
font-family: 'Courier New', Courier, monospace;
188183

189-
&-icon,
190-
&-item {
191-
display: block;
192-
border-radius: $borderRadius;
193-
}
194184
&-icon {
195-
background-color: $trailingSelectionColor;
196-
height: 1.5em;
197-
width: 0.8em;
185+
display: block;
186+
height: 0;
187+
width: 0;
198188
margin: 0.25em 0 0.25em (-4 * $spacingInside);
199-
-webkit-clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
200-
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
189+
border-top: 0.75em solid transparent;
190+
border-left: 0.8em solid $trailingSelectionColor;
191+
border-bottom: 0.75em solid transparent;
201192
}
202193
&-item {
203-
background-color: $selectionColor;
204-
margin-right: -0.75em;
205-
padding: 0 0.25em 0 1.25em;
206-
line-height: 2em;
207-
height: 2em;
208-
text-overflow: ellipsis;
194+
display: block; text-overflow: ellipsis;
195+
196+
position: relative;
197+
198+
& > span {
199+
display: block;
200+
text-overflow: ellipsis;
201+
line-height: 2em;
202+
padding: 0 0.25em;
203+
margin: 0 -0.25em 0 1em;
204+
background-color: $selectionColor;
205+
}
206+
&:before {
207+
content: "";
208+
position: absolute;
209+
bottom: 0;
210+
width: 0;
211+
height: 0;
212+
left: 0;
213+
border-top: 1em solid $selectionColor;
214+
border-left: 1em solid transparent;
215+
border-bottom: 1em solid $selectionColor;
216+
}
209217

210218
&.has-nested-items {
211-
padding-right: 1em;
212-
-webkit-clip-path: polygon(0% 5%, calc(100% - 1em) 5%, 100% 50%, calc(100% - 1em) 95%, 0% 95%, 1em 50%);
213-
clip-path: polygon(0% 5%, calc(100% - 1em) 5%, 100% 50%, calc(100% - 1em) 95%, 0% 95%, 1em 50%);
219+
padding-right: 0.25em;
220+
margin-right: 0.25em;
221+
222+
&:after {
223+
right: -1em;
224+
content: "";
225+
position: absolute;
226+
bottom: 0;
227+
width: 0;
228+
height: 0;
229+
border-top: 1em solid transparent;
230+
border-left: 1em solid $selectionColor;
231+
border-bottom: 1em solid transparent;
232+
}
214233
}
215234
&:not(.has-nested-items) {
216-
-webkit-clip-path: polygon(0% 5%, 100% 5%, 100% 95%, 0% 95%, 1em 50%);
217-
clip-path: polygon(0% 5%, 100% 5%, 100% 95%, 0% 95%, 1em 50%);
235+
margin-right: -0.75em;
236+
237+
& > span {
238+
padding-right: 0.5em;
239+
}
218240
}
219241
}
220242
}

‎src/component/InspectorBreadcrumbs.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const InspectorBreadcrumbs: React.FunctionComponent<{
4242
})}
4343
onDoubleClick={preventNavigation ? undefined : (event): void => onSelect(event, selectedItem)}
4444
>
45-
{breadcrumbText}
45+
<span>{breadcrumbText}</span>
4646
</span>
4747
);
4848
})}

‎src/component/InspectorItem.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ export const InspectorItem: React.FunctionComponent<{
1717
}> = ({ name, schemaGroup, optionIndexes, selected, matchesFilter, onSelect, renderContent }): React.ReactElement => {
1818
const hasNestedItems = hasSchemaGroupNestedItems(schemaGroup, optionIndexes);
1919
return (
20-
<button
21-
type="button"
20+
<div
2221
className={classNames({
2322
"jsonschema-inspector-item": true,
2423
"has-nested-items": hasNestedItems,
@@ -28,6 +27,7 @@ export const InspectorItem: React.FunctionComponent<{
2827
})}
2928
onClick={onSelect}
3029
onFocus={onSelect}
30+
tabIndex={0}
3131
>
3232
{renderContent &&
3333
renderContent({
@@ -43,6 +43,6 @@ export const InspectorItem: React.FunctionComponent<{
4343
<span className="jsonschema-inspector-item-icon" />
4444
</div>
4545
)}
46-
</button>
46+
</div>
4747
);
4848
};

‎stories/Inspector.Breadcrumbs.stories.mdx

Lines changed: 48 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ This can be disabled via `preventNavigation`, i.e. so a double-click does nothin
168168
"Meta Links JSON Schema": { $ref: "http://json-schema.org/draft-07/links#" }
169169
}}
170170
referenceSchemas={[metaSchema, hyperMetaSchema, linksMetaSchema]}
171-
defaultSelectedItems={["Meta Hyper JSON Schema", "contains"]}
171+
defaultSelectedItems={["Meta Hyper JSON Schema", "contains", "default"]}
172172
breadcrumbs={{
173173
// if this is NOT set to true, double-clicking on an item in the breadcrumbs changes the current selection
174174
preventNavigation: true
@@ -179,42 +179,27 @@ This can be disabled via `preventNavigation`, i.e. so a double-click does nothin
179179

180180
----
181181

182-
### with custom items and extra content
183-
If all the above options are not customised enough, you can also provide your component for each breadcrumb item through `renderItem`.
184-
Additionally, `renderTrailingContent` allows you to add extra content behind the breadcrumb items, e.g. a "Copy to Clipboard" button.
182+
### with extra trailing content
183+
`renderTrailingContent` allows you to add extra content behind the breadcrumb items, e.g. a "Copy to Clipboard" button.
185184

186185
<Preview>
187-
<Story name="with custom items and extra content">
186+
<Story name="with extra trailing content">
188187
<Inspector
189188
schemas={{
190189
"Meta Core JSON Schema": { $ref: "http://json-schema.org/draft-07/schema#" },
191190
"Meta Hyper JSON Schema": { $ref: "http://json-schema.org/draft-07/hyper-schema#" },
192191
"Meta Links JSON Schema": { $ref: "http://json-schema.org/draft-07/links#" }
193192
}}
194193
referenceSchemas={[metaSchema, hyperMetaSchema, linksMetaSchema]}
195-
defaultSelectedItems={["Meta Hyper JSON Schema", "contains"]}
194+
defaultSelectedItems={["Meta Hyper JSON Schema", "contains", "default"]}
196195
breadcrumbs={{
197-
// custom rendering for individual breadcrumb items
198-
renderItem: (renderProps) => (
199-
<span
200-
key={renderProps.index}
201-
className={classNames({
202-
"jsonschema-inspector-breadcrumbs-item": true,
203-
"has-nested-items": renderProps.hasNestedItems
204-
})}
205-
style={{ backgroundColor: renderProps.hasNestedItems ? "#a5d6a7" : "#e8f5e9" }}
206-
>
207-
{renderProps.breadcrumbText}
208-
</span>
209-
),
210196
// custom rendering of an additional "Copy" button to the right of the breadcrumbs
211197
renderTrailingContent: (renderProps) => (
212198
<div style={{ flexGrow: 1 }}>
213199
<button
214200
type="button"
215201
style={{
216-
backgroundColor: "#276bd2",
217-
color: "#fff",
202+
backgroundColor: "#a5d6a7",
218203
float: "right",
219204
margin: ".5em",
220205
height: "2.5em"
@@ -234,6 +219,47 @@ Additionally, `renderTrailingContent` allows you to add extra content behind the
234219

235220
----
236221

222+
### with custom items
223+
If all the above options are not customised enough, you can also provide your component for each breadcrumb item through `renderItem`.
224+
225+
<Preview>
226+
<Story name="with custom items">
227+
<Inspector
228+
schemas={{
229+
"Meta Core JSON Schema": { $ref: "http://json-schema.org/draft-07/schema#" },
230+
"Meta Hyper JSON Schema": { $ref: "http://json-schema.org/draft-07/hyper-schema#" },
231+
"Meta Links JSON Schema": { $ref: "http://json-schema.org/draft-07/links#" }
232+
}}
233+
referenceSchemas={[metaSchema, hyperMetaSchema, linksMetaSchema]}
234+
defaultSelectedItems={["Meta Hyper JSON Schema", "contains", "default"]}
235+
breadcrumbs={{
236+
// custom rendering for individual breadcrumb items
237+
renderItem: (renderProps) => (
238+
<span
239+
key={renderProps.index}
240+
className={classNames({
241+
"jsonschema-inspector-breadcrumbs-item": true,
242+
"has-nested-items": renderProps.hasNestedItems
243+
})}
244+
>
245+
<span
246+
style={{
247+
backgroundColor: renderProps.hasNestedItems ? "transparent" : undefined,
248+
border: ".25em solid #a5d6a7",
249+
lineHeight: "1.5em"
250+
}}
251+
>
252+
{renderProps.breadcrumbText}
253+
</span>
254+
</span>
255+
)
256+
}}
257+
/>
258+
</Story>
259+
</Preview>
260+
261+
----
262+
237263
### disabled
238264
You can also turn-off the breadcrumbs feature completely by providing `null` instead of an object to the whole `breadcrumbs` prop.
239265

@@ -246,7 +272,7 @@ You can also turn-off the breadcrumbs feature completely by providing `null` ins
246272
"Meta Links JSON Schema": { $ref: "http://json-schema.org/draft-07/links#" }
247273
}}
248274
referenceSchemas={[metaSchema, hyperMetaSchema, linksMetaSchema]}
249-
defaultSelectedItems={["Meta Hyper JSON Schema", "contains"]}
275+
defaultSelectedItems={["Meta Hyper JSON Schema", "contains", "default"]}
250276
// set to null to disable breadcrumbs completely
251277
breadcrumbs={null}
252278
/>

0 commit comments

Comments
 (0)