react-spatial 1.3.0-beta.1 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -154,7 +154,7 @@ class LayerTree extends Component {
|
|
|
154
154
|
}
|
|
155
155
|
return expLayers;
|
|
156
156
|
}
|
|
157
|
-
renderInput(layer) {
|
|
157
|
+
renderInput(layer, inputProps) {
|
|
158
158
|
const { titles, isItemHidden } = this.props;
|
|
159
159
|
let tabIndex = 0;
|
|
160
160
|
if (!(layer.children || []).filter((c) => {
|
|
@@ -180,7 +180,8 @@ class LayerTree extends Component {
|
|
|
180
180
|
readOnly: true,
|
|
181
181
|
onClick: () => {
|
|
182
182
|
return this.onInputClick(layer);
|
|
183
|
-
}
|
|
183
|
+
},
|
|
184
|
+
...inputProps
|
|
184
185
|
}), /* @__PURE__ */ React.createElement("span", null));
|
|
185
186
|
}
|
|
186
187
|
renderArrow(layer) {
|
|
@@ -195,7 +196,7 @@ class LayerTree extends Component {
|
|
|
195
196
|
className: `rs-layer-tree-arrow rs-layer-tree-arrow-${!expandedLayers.includes(layer) ? "collapsed" : "expanded"}`
|
|
196
197
|
});
|
|
197
198
|
}
|
|
198
|
-
renderToggleButton(layer) {
|
|
199
|
+
renderToggleButton(layer, toggleProps) {
|
|
199
200
|
const { t, titles, isItemHidden, renderLabel } = this.props;
|
|
200
201
|
const { expandedLayers } = this.state;
|
|
201
202
|
const onInputClick = () => {
|
|
@@ -215,11 +216,12 @@ class LayerTree extends Component {
|
|
|
215
216
|
"aria-expanded": expandedLayers.includes(layer),
|
|
216
217
|
"aria-label": title,
|
|
217
218
|
onClick: onInputClick,
|
|
218
|
-
onKeyPress: onInputClick
|
|
219
|
+
onKeyPress: onInputClick,
|
|
220
|
+
...toggleProps
|
|
219
221
|
}, /* @__PURE__ */ React.createElement("div", null, renderLabel(layer, this)), this.renderArrow(layer));
|
|
220
222
|
}
|
|
221
|
-
renderItemContent(layer) {
|
|
222
|
-
return /* @__PURE__ */ React.createElement(React.Fragment, null, this.renderInput(layer), this.renderToggleButton(layer));
|
|
223
|
+
renderItemContent(layer, inputProps = {}, toggleProps = {}) {
|
|
224
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, this.renderInput(layer, inputProps), this.renderToggleButton(layer, toggleProps));
|
|
223
225
|
}
|
|
224
226
|
renderItem(layer, level) {
|
|
225
227
|
const { isItemHidden } = this.props;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/LayerTree/LayerTree.js"],
|
|
4
|
-
"sourcesContent": ["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, getLayersAsFlatArray } from 'mobility-toolbox-js/ol';\nimport { unByKey } from 'ol/Observable';\n\nconst propTypes = {\n /**\n * Layers provider.\n */\n layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),\n\n /**\n * CSS class to apply on the container.\n */\n className: PropTypes.string,\n\n /**\n * Padding left to apply on each level.\n */\n padding: PropTypes.number,\n\n /**\n * Determine if the item is hidden in the tree or not.\n *\n * @param {object} item The item to hide or not.\n *\n * @return {bool} true if the item is not displayed in the tree\n */\n isItemHidden: PropTypes.func,\n\n /**\n * Determine the className used by the div containing the parent and its children.\n */\n getParentClassName: PropTypes.func,\n\n /**\n * Custom function to render an item in the tree.\n *\n * @param {object} item The item to render.\n *\n * @return {node} A jsx node.\n */\n renderItem: PropTypes.func,\n\n /**\n * Custom function to render only the content of an item in the tree.\n *\n * @param {object} item The item to render.\n *\n * @return {node} A jsx node.\n */\n renderItemContent: PropTypes.func,\n\n /**\n * Custom function to render custom content before the list of children of an item.\n *\n * @param {object} item The item to render.\n *\n * @return {node} A jsx node.\n */\n renderBeforeItem: PropTypes.func,\n\n /**\n * Custom function to render custom content after the list of children of an item.\n *\n * @param {object} item The item to render.\n *\n * @return {node} A jsx node.\n */\n renderAfterItem: PropTypes.func,\n\n /**\n * Custom function to render the label.\n *\n * @param {string} item The label to render.\n * @param {LayerTree} comp The LayerTree component.\n *\n * @return {node} A jsx node.\n */\n renderLabel: PropTypes.func,\n\n /**\n * Object holding title for the layer tree's buttons.\n */\n titles: PropTypes.shape({\n /**\n * aria-label on checkbox to show layer.\n */\n layerShow: PropTypes.string,\n /**\n * aria-label on checkbox to hide layer.\n */\n layerHide: PropTypes.string,\n /**\n * title on button to show sublayers.\n */\n subLayerShow: PropTypes.string,\n /**\n * title on button to show sublayers.\n */\n subLayerHide: PropTypes.string,\n }),\n\n /**\n * Boolean determining whether children collapse/expand when their parent is toggled\n * @param {...(boolean|function)} expandChildren Boolean or function returning a boolean.\n * @return {boolean} True or false\n */\n expandChildren: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),\n\n /**\n * Translation function.\n * @param {function} Translation function returning the translated string.\n */\n t: PropTypes.func,\n};\n\nconst defaultProps = {\n layers: [],\n className: 'rs-layer-tree',\n padding: 30,\n isItemHidden: () => {\n return false;\n },\n getParentClassName: () => {\n return undefined;\n },\n renderItem: null,\n renderItemContent: null,\n renderBeforeItem: null,\n renderAfterItem: null,\n renderLabel: (layer, layerComp) => {\n const { t } = layerComp.props;\n return t(layer.name);\n },\n titles: {\n layerShow: 'Show layer',\n layerHide: 'Hide layer',\n subLayerShow: 'Show sublayer',\n subLayerHide: 'Hide sublayer',\n },\n t: (s) => {\n return s;\n },\n expandChildren: false,\n};\n\n/**\n * The LayerTree component renders an interface for toggling\n * [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)\n * and their corresponding child layers.\n */\n\nclass LayerTree extends Component {\n constructor(props) {\n super(props);\n\n const { layers, isItemHidden } = this.props;\n const initialExpandedLayers = layers\n ? this.getExpandedLayers(\n layers.filter((l) => {\n return (\n !isItemHidden(l) &&\n (l.children || [])\n .filter((child) => {\n return child.visible;\n })\n .filter((c) => {\n return !isItemHidden(c);\n }).length\n );\n }),\n )\n : [];\n\n this.state = {\n rootLayer: new Layer(),\n expandedLayers: initialExpandedLayers,\n revision: 0,\n };\n // this.updateLayers = this.updateLayers.bind(this);\n this.olKeys = [];\n }\n\n componentDidMount() {\n this.updateLayers();\n }\n\n componentDidUpdate(prevProps) {\n const { layers } = this.props;\n\n if (layers !== prevProps.layers) {\n this.updateLayers();\n }\n }\n\n componentWillUnmount() {\n unByKey(this.olKeys);\n this.olKeys = [];\n }\n\n onInputClick(layer, toggle = false) {\n if (toggle) {\n this.onToggle(layer);\n } else if (layer.setVisible) {\n layer.setVisible(!layer.visible);\n } else {\n // eslint-disable-next-line no-param-reassign\n layer.visible = !layer.visible;\n }\n }\n\n onToggle(layer) {\n const { expandedLayers } = this.state;\n const pos = expandedLayers.indexOf(layer);\n if (pos > -1) {\n expandedLayers.splice(pos, 1);\n } else {\n expandedLayers.push(...this.getExpandedLayers([layer]));\n }\n this.setState({ expandedLayers });\n }\n\n /**\n * Get the always expanded ancestors (isAlwaysExpanded=true) of the given layers\n * together with the (given) initially expanded layers\n *\n * @param {Layer} layers Initially expanded layers\n * @return {Array.<Layer>} Initially expanded layers and all its always expanded ancestors\n */\n getExpandedLayers(layers) {\n const { isItemHidden } = this.props;\n const children = layers.flatMap((l) => {\n return l.children.filter((c) => {\n return !isItemHidden(c) && c.get('isAlwaysExpanded');\n });\n });\n\n if (!children.length) {\n return layers;\n }\n return [...layers, this.getExpandedLayers(children)].flat();\n }\n\n updateLayers() {\n const { layers, expandChildren } = this.props;\n\n // Update the root layer\n let rootLayer = new Layer();\n if (Array.isArray(layers)) {\n if (layers.length === 1) {\n [rootLayer] = layers;\n }\n rootLayer = new Layer({ children: layers });\n } else {\n rootLayer = layers;\n }\n\n getLayersAsFlatArray(rootLayer).forEach((layer) => {\n this.olKeys.push(\n layer.on('propertychange', () => {\n const { revision } = this.state;\n this.setState({ revision: revision + 1 });\n }),\n );\n });\n\n const state = { rootLayer };\n if (\n typeof expandChildren === 'function'\n ? expandChildren(layers)\n : expandChildren\n ) {\n state.expandedLayers = rootLayer.children.flatMap((l) => {\n return this.expandLayer(l);\n });\n }\n\n this.setState(state);\n }\n\n expandLayer(layer, expLayers = []) {\n const { isItemHidden } = this.props;\n if (layer.visible && !isItemHidden(layer)) {\n const children = layer.children\n .filter((c) => {\n return !isItemHidden(c) && !c.get('isAlwaysExpanded');\n })\n .flatMap((c) => {\n return this.expandLayer(c, expLayers);\n });\n return [...expLayers, ...children, layer];\n }\n return expLayers;\n }\n\n renderInput(layer) {\n const { titles, isItemHidden } = this.props;\n let tabIndex = 0;\n\n if (\n !(layer.children || []).filter((c) => {\n return !isItemHidden(c);\n }).length\n ) {\n // We forbid focus on keypress event for first level layers and layers without children.\n tabIndex = -1;\n }\n\n const inputType = layer.get('group') ? 'radio' : 'checkbox';\n return (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/no-noninteractive-element-interactions\n <label\n className={`rs-layer-tree-input rs-layer-tree-input-${inputType} rs-${inputType}`}\n tabIndex={tabIndex}\n title={layer.visible ? titles.layerHide : titles.layerShow}\n aria-label={layer.visible ? titles.layerHide : titles.layerShow}\n onKeyPress={(e) => {\n if (e.which === 13) {\n this.onInputClick(layer);\n }\n }}\n >\n <input\n type={inputType}\n tabIndex={-1}\n checked={layer.visible}\n readOnly\n onClick={() => {\n return this.onInputClick(layer);\n }}\n />\n <span />\n </label>\n );\n }\n\n renderArrow(layer) {\n const { isItemHidden } = this.props;\n const { expandedLayers } = this.state;\n\n if (\n !(layer.children || []).filter((c) => {\n return !isItemHidden(c);\n }).length ||\n layer.get('isAlwaysExpanded')\n ) {\n return null;\n }\n\n return (\n <div\n className={`rs-layer-tree-arrow rs-layer-tree-arrow-${\n !expandedLayers.includes(layer) ? 'collapsed' : 'expanded'\n }`}\n />\n );\n }\n\n // Render a button which expands/collapse the layer if there is children\n // or simulate a click on the input otherwise.\n renderToggleButton(layer) {\n const { t, titles, isItemHidden, renderLabel } = this.props;\n const { expandedLayers } = this.state;\n\n const onInputClick = () => {\n this.onInputClick(\n layer,\n (layer.children || []).filter((c) => {\n return !isItemHidden(c);\n }).length && !layer.get('isAlwaysExpanded'),\n );\n };\n const title = `${t(layer.name)} ${\n expandedLayers.includes(layer) ? titles.subLayerHide : titles.subLayerShow\n }`;\n\n return (\n <div\n role=\"button\"\n tabIndex={0}\n className=\"rs-layer-tree-toggle\"\n title={title}\n aria-expanded={expandedLayers.includes(layer)}\n aria-label={title}\n onClick={onInputClick}\n onKeyPress={onInputClick}\n >\n <div>{renderLabel(layer, this)}</div>\n {this.renderArrow(layer)}\n </div>\n );\n }\n\n renderItemContent(layer) {\n return (\n <>\n {this.renderInput(layer)}\n {this.renderToggleButton(layer)}\n </>\n );\n }\n\n renderItem(layer, level) {\n const { isItemHidden } = this.props;\n const { expandedLayers } = this.state;\n const {\n renderItem,\n renderItemContent,\n renderBeforeItem,\n renderAfterItem,\n padding,\n getParentClassName,\n } = this.props;\n\n const children = expandedLayers.includes(layer)\n ? [\n ...(layer.children || []).filter((c) => {\n return !isItemHidden(c);\n }),\n ]\n : [];\n\n if (renderItem) {\n return renderItem(layer, this.onInputClick, this.onToggle);\n }\n\n return (\n <div className={getParentClassName()} key={layer.key}>\n <div\n className={`rs-layer-tree-item ${layer.visible ? 'rs-visible' : ''}`}\n style={{\n paddingLeft: `${padding * level}px`,\n }}\n >\n {renderItemContent\n ? renderItemContent(layer, this)\n : this.renderItemContent(layer)}\n </div>\n {renderBeforeItem && renderBeforeItem(layer, level, this)}\n {[...children].reverse().map((child) => {\n return this.renderItem(child, level + 1);\n })}\n {renderAfterItem && renderAfterItem(layer, level, this)}\n </div>\n );\n }\n\n renderTree() {\n const { isItemHidden } = this.props;\n const { rootLayer } = this.state;\n\n if (!rootLayer?.children?.length) {\n return null;\n }\n\n return (\n <>\n {rootLayer.children\n .filter((l) => {\n return !isItemHidden(l);\n })\n .reverse()\n .map((l) => {\n return this.renderItem(l, 0);\n })}\n </>\n );\n }\n\n render() {\n const { className } = this.props;\n return <div className={className}>{this.renderTree()}</div>;\n }\n}\n\nLayerTree.propTypes = propTypes;\nLayerTree.defaultProps = defaultProps;\n\nexport default LayerTree;\n"],
|
|
5
|
-
"mappings": "AAAA,OAAO,SAAS,iBAAiB;AACjC,OAAO,eAAe;AACtB,SAAS,OAAO,4BAA4B;AAC5C,SAAS,eAAe;AAExB,MAAM,YAAY;AAAA,EAIhB,QAAQ,UAAU,QAAQ,UAAU,WAAW,KAAK,CAAC;AAAA,EAKrD,WAAW,UAAU;AAAA,EAKrB,SAAS,UAAU;AAAA,EASnB,cAAc,UAAU;AAAA,EAKxB,oBAAoB,UAAU;AAAA,EAS9B,YAAY,UAAU;AAAA,
|
|
4
|
+
"sourcesContent": ["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, getLayersAsFlatArray } from 'mobility-toolbox-js/ol';\nimport { unByKey } from 'ol/Observable';\n\nconst propTypes = {\n /**\n * Layers provider.\n */\n layers: PropTypes.arrayOf(PropTypes.instanceOf(Layer)),\n\n /**\n * CSS class to apply on the container.\n */\n className: PropTypes.string,\n\n /**\n * Padding left to apply on each level.\n */\n padding: PropTypes.number,\n\n /**\n * Determine if the item is hidden in the tree or not.\n *\n * @param {object} item The item to hide or not.\n *\n * @return {bool} true if the item is not displayed in the tree\n */\n isItemHidden: PropTypes.func,\n\n /**\n * Determine the className used by the div containing the parent and its children.\n */\n getParentClassName: PropTypes.func,\n\n /**\n * Custom function to render an item in the tree.\n *\n * @param {object} item The item to render.\n *\n * @return {node} A jsx node.\n */\n renderItem: PropTypes.func,\n\n /**\n * Custom function to render only the content of an item in the tree.\n * inputProps und toggleProps can be used when calling the default renderItemContent function\n * (comp.renderItemContent(layer, inputProps, toggleProps)) to overwrite the default input and label props\n *\n * @param {Layer} layer The layer the item content is created for\n * @param {LayerTree} comp The LayerTree component.\n *\n * @return {node} A jsx node.\n */\n renderItemContent: PropTypes.func,\n\n /**\n * Custom function to render custom content before the list of children of an item.\n *\n * @param {object} item The item to render.\n *\n * @return {node} A jsx node.\n */\n renderBeforeItem: PropTypes.func,\n\n /**\n * Custom function to render custom content after the list of children of an item.\n *\n * @param {object} item The item to render.\n *\n * @return {node} A jsx node.\n */\n renderAfterItem: PropTypes.func,\n\n /**\n * Custom function to render the label.\n *\n * @param {string} item The label to render.\n * @param {LayerTree} comp The LayerTree component.\n *\n * @return {node} A jsx node.\n */\n renderLabel: PropTypes.func,\n\n /**\n * Object holding title for the layer tree's buttons.\n */\n titles: PropTypes.shape({\n /**\n * aria-label on checkbox to show layer.\n */\n layerShow: PropTypes.string,\n /**\n * aria-label on checkbox to hide layer.\n */\n layerHide: PropTypes.string,\n /**\n * title on button to show sublayers.\n */\n subLayerShow: PropTypes.string,\n /**\n * title on button to show sublayers.\n */\n subLayerHide: PropTypes.string,\n }),\n\n /**\n * Boolean determining whether children collapse/expand when their parent is toggled\n * @param {...(boolean|function)} expandChildren Boolean or function returning a boolean.\n * @return {boolean} True or false\n */\n expandChildren: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),\n\n /**\n * Translation function.\n * @param {function} Translation function returning the translated string.\n */\n t: PropTypes.func,\n};\n\nconst defaultProps = {\n layers: [],\n className: 'rs-layer-tree',\n padding: 30,\n isItemHidden: () => {\n return false;\n },\n getParentClassName: () => {\n return undefined;\n },\n renderItem: null,\n renderItemContent: null,\n renderBeforeItem: null,\n renderAfterItem: null,\n renderLabel: (layer, layerComp) => {\n const { t } = layerComp.props;\n return t(layer.name);\n },\n titles: {\n layerShow: 'Show layer',\n layerHide: 'Hide layer',\n subLayerShow: 'Show sublayer',\n subLayerHide: 'Hide sublayer',\n },\n t: (s) => {\n return s;\n },\n expandChildren: false,\n};\n\n/**\n * The LayerTree component renders an interface for toggling\n * [mobility-toolbox-js layers](https://mobility-toolbox-js.geops.io/api/identifiers%20html#ol-layers)\n * and their corresponding child layers.\n */\n\nclass LayerTree extends Component {\n constructor(props) {\n super(props);\n\n const { layers, isItemHidden } = this.props;\n const initialExpandedLayers = layers\n ? this.getExpandedLayers(\n layers.filter((l) => {\n return (\n !isItemHidden(l) &&\n (l.children || [])\n .filter((child) => {\n return child.visible;\n })\n .filter((c) => {\n return !isItemHidden(c);\n }).length\n );\n }),\n )\n : [];\n\n this.state = {\n rootLayer: new Layer(),\n expandedLayers: initialExpandedLayers,\n revision: 0,\n };\n // this.updateLayers = this.updateLayers.bind(this);\n this.olKeys = [];\n }\n\n componentDidMount() {\n this.updateLayers();\n }\n\n componentDidUpdate(prevProps) {\n const { layers } = this.props;\n\n if (layers !== prevProps.layers) {\n this.updateLayers();\n }\n }\n\n componentWillUnmount() {\n unByKey(this.olKeys);\n this.olKeys = [];\n }\n\n onInputClick(layer, toggle = false) {\n if (toggle) {\n this.onToggle(layer);\n } else if (layer.setVisible) {\n layer.setVisible(!layer.visible);\n } else {\n // eslint-disable-next-line no-param-reassign\n layer.visible = !layer.visible;\n }\n }\n\n onToggle(layer) {\n const { expandedLayers } = this.state;\n const pos = expandedLayers.indexOf(layer);\n if (pos > -1) {\n expandedLayers.splice(pos, 1);\n } else {\n expandedLayers.push(...this.getExpandedLayers([layer]));\n }\n this.setState({ expandedLayers });\n }\n\n /**\n * Get the always expanded ancestors (isAlwaysExpanded=true) of the given layers\n * together with the (given) initially expanded layers\n *\n * @param {Layer} layers Initially expanded layers\n * @return {Array.<Layer>} Initially expanded layers and all its always expanded ancestors\n */\n getExpandedLayers(layers) {\n const { isItemHidden } = this.props;\n const children = layers.flatMap((l) => {\n return l.children.filter((c) => {\n return !isItemHidden(c) && c.get('isAlwaysExpanded');\n });\n });\n\n if (!children.length) {\n return layers;\n }\n return [...layers, this.getExpandedLayers(children)].flat();\n }\n\n updateLayers() {\n const { layers, expandChildren } = this.props;\n\n // Update the root layer\n let rootLayer = new Layer();\n if (Array.isArray(layers)) {\n if (layers.length === 1) {\n [rootLayer] = layers;\n }\n rootLayer = new Layer({ children: layers });\n } else {\n rootLayer = layers;\n }\n\n getLayersAsFlatArray(rootLayer).forEach((layer) => {\n this.olKeys.push(\n layer.on('propertychange', () => {\n const { revision } = this.state;\n this.setState({ revision: revision + 1 });\n }),\n );\n });\n\n const state = { rootLayer };\n if (\n typeof expandChildren === 'function'\n ? expandChildren(layers)\n : expandChildren\n ) {\n state.expandedLayers = rootLayer.children.flatMap((l) => {\n return this.expandLayer(l);\n });\n }\n\n this.setState(state);\n }\n\n expandLayer(layer, expLayers = []) {\n const { isItemHidden } = this.props;\n if (layer.visible && !isItemHidden(layer)) {\n const children = layer.children\n .filter((c) => {\n return !isItemHidden(c) && !c.get('isAlwaysExpanded');\n })\n .flatMap((c) => {\n return this.expandLayer(c, expLayers);\n });\n return [...expLayers, ...children, layer];\n }\n return expLayers;\n }\n\n renderInput(layer, inputProps) {\n const { titles, isItemHidden } = this.props;\n let tabIndex = 0;\n\n if (\n !(layer.children || []).filter((c) => {\n return !isItemHidden(c);\n }).length\n ) {\n // We forbid focus on keypress event for first level layers and layers without children.\n tabIndex = -1;\n }\n\n const inputType = layer.get('group') ? 'radio' : 'checkbox';\n return (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/no-noninteractive-element-interactions\n <label\n className={`rs-layer-tree-input rs-layer-tree-input-${inputType} rs-${inputType}`}\n tabIndex={tabIndex}\n title={layer.visible ? titles.layerHide : titles.layerShow}\n aria-label={layer.visible ? titles.layerHide : titles.layerShow}\n onKeyPress={(e) => {\n if (e.which === 13) {\n this.onInputClick(layer);\n }\n }}\n >\n <input\n type={inputType}\n tabIndex={-1}\n checked={layer.visible}\n readOnly\n onClick={() => {\n return this.onInputClick(layer);\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...inputProps}\n />\n <span />\n </label>\n );\n }\n\n renderArrow(layer) {\n const { isItemHidden } = this.props;\n const { expandedLayers } = this.state;\n\n if (\n !(layer.children || []).filter((c) => {\n return !isItemHidden(c);\n }).length ||\n layer.get('isAlwaysExpanded')\n ) {\n return null;\n }\n\n return (\n <div\n className={`rs-layer-tree-arrow rs-layer-tree-arrow-${\n !expandedLayers.includes(layer) ? 'collapsed' : 'expanded'\n }`}\n />\n );\n }\n\n // Render a button which expands/collapse the layer if there is children\n // or simulate a click on the input otherwise.\n renderToggleButton(layer, toggleProps) {\n const { t, titles, isItemHidden, renderLabel } = this.props;\n const { expandedLayers } = this.state;\n\n const onInputClick = () => {\n this.onInputClick(\n layer,\n (layer.children || []).filter((c) => {\n return !isItemHidden(c);\n }).length && !layer.get('isAlwaysExpanded'),\n );\n };\n const title = `${t(layer.name)} ${\n expandedLayers.includes(layer) ? titles.subLayerHide : titles.subLayerShow\n }`;\n\n return (\n <div\n role=\"button\"\n tabIndex={0}\n className=\"rs-layer-tree-toggle\"\n title={title}\n aria-expanded={expandedLayers.includes(layer)}\n aria-label={title}\n onClick={onInputClick}\n onKeyPress={onInputClick}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...toggleProps}\n >\n <div>{renderLabel(layer, this)}</div>\n {this.renderArrow(layer)}\n </div>\n );\n }\n\n renderItemContent(layer, inputProps = {}, toggleProps = {}) {\n return (\n <>\n {this.renderInput(layer, inputProps)}\n {this.renderToggleButton(layer, toggleProps)}\n </>\n );\n }\n\n renderItem(layer, level) {\n const { isItemHidden } = this.props;\n const { expandedLayers } = this.state;\n const {\n renderItem,\n renderItemContent,\n renderBeforeItem,\n renderAfterItem,\n padding,\n getParentClassName,\n } = this.props;\n\n const children = expandedLayers.includes(layer)\n ? [\n ...(layer.children || []).filter((c) => {\n return !isItemHidden(c);\n }),\n ]\n : [];\n\n if (renderItem) {\n return renderItem(layer, this.onInputClick, this.onToggle);\n }\n\n return (\n <div className={getParentClassName()} key={layer.key}>\n <div\n className={`rs-layer-tree-item ${layer.visible ? 'rs-visible' : ''}`}\n style={{\n paddingLeft: `${padding * level}px`,\n }}\n >\n {renderItemContent\n ? renderItemContent(layer, this)\n : this.renderItemContent(layer)}\n </div>\n {renderBeforeItem && renderBeforeItem(layer, level, this)}\n {[...children].reverse().map((child) => {\n return this.renderItem(child, level + 1);\n })}\n {renderAfterItem && renderAfterItem(layer, level, this)}\n </div>\n );\n }\n\n renderTree() {\n const { isItemHidden } = this.props;\n const { rootLayer } = this.state;\n\n if (!rootLayer?.children?.length) {\n return null;\n }\n\n return (\n <>\n {rootLayer.children\n .filter((l) => {\n return !isItemHidden(l);\n })\n .reverse()\n .map((l) => {\n return this.renderItem(l, 0);\n })}\n </>\n );\n }\n\n render() {\n const { className } = this.props;\n return <div className={className}>{this.renderTree()}</div>;\n }\n}\n\nLayerTree.propTypes = propTypes;\nLayerTree.defaultProps = defaultProps;\n\nexport default LayerTree;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-spatial",
|
|
3
3
|
"description": "Components to build React map apps.",
|
|
4
|
-
"version": "1.3.0
|
|
4
|
+
"version": "1.3.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"dependencies": {
|
|
7
7
|
"@geops/geops-ui": "0.1.13",
|
|
@@ -96,12 +96,12 @@
|
|
|
96
96
|
"xml-beautifier": "0.5.0"
|
|
97
97
|
},
|
|
98
98
|
"scripts": {
|
|
99
|
-
"esbuild": "esbuild src/*.js src/**/*.js src/**/**/*.js --target=chrome100 --outdir=build/ --loader:.js=jsx --sourcemap=external",
|
|
100
99
|
"buble": "buble --no modules,asyncAwait -i src -o build --objectAssign Object.assign --sourcemap",
|
|
101
100
|
"build": "yarn esbuild && find build -type f -name '*.test.*' -delete && rm -rf build/styleguidist && cp package.json README.md LICENSE build && cp -rf src/images build && cp -rf src/themes build",
|
|
102
101
|
"coverage": "yarn test --coverage --coverageDirectory=coverage",
|
|
103
102
|
"cp": "generact --root src/components",
|
|
104
103
|
"doc": "styleguidist build",
|
|
104
|
+
"esbuild": "esbuild src/*.js src/**/*.js src/**/**/*.js --target=chrome100 --outdir=build/ --loader:.js=jsx --sourcemap=external",
|
|
105
105
|
"format": "prettier --write 'src/**/*.js' && eslint 'src/**/*.js' --fix && stylelint 'src/**/*.css' 'src/**/*.scss' --fix",
|
|
106
106
|
"link2": "cmdToAdd=$(node ./scripts/read-pkg-json.js add) && $cmdToAdd && yarn build && cmdToRemove=$(node ./scripts/read-pkg-json.js remove) && $cmdToRemove && cd build && yarn link",
|
|
107
107
|
"lint": "eslint 'src/**/*.js' && stylelint 'src/**/*.css' 'src/**/*.scss'",
|