Tidy of components

- Moved all components into a single directory like nextjs - Made component names consistent with each other - Made component names consistent with their export class names - Added storybook for a few components with the aim to extend this further.
2026-01-06 13:30:03 +00:00 · 2020-06-01 16:09:32 +01:00
parent d07b40ccef
commit 624ccb5b00
88 changed files with 5167 additions and 513 deletions
--- a/src/components/LayerListItem.jsx
+++ b/src/components/LayerListItem.jsx
@@ -0,0 +1,138 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
+
+import IconLayer from './IconLayer'
+import {SortableElement, SortableHandle} from 'react-sortable-hoc'
+
+
+const DraggableLabel = SortableHandle((props) => {
+  return <div className="maputnik-layer-list-item-handle">
+    <IconLayer
+      className="layer-handle__icon"
+      type={props.layerType}
+    />
+    <button className="maputnik-layer-list-item-id">
+      {props.layerId}
+    </button>
+  </div>
+});
+
+class IconAction extends React.Component {
+  static propTypes = {
+    action: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    wdKey: PropTypes.string,
+    classBlockName: PropTypes.string,
+    classBlockModifier: PropTypes.string,
+  }
+
+  renderIcon() {
+    switch(this.props.action) {
+      case 'duplicate': return <MdContentCopy />
+      case 'show': return <MdVisibility />
+      case 'hide': return <MdVisibilityOff />
+      case 'delete': return <MdDelete />
+    }
+  }
+
+  render() {
+    const {classBlockName, classBlockModifier} = this.props;
+
+    let classAdditions = '';
+    if (classBlockName) {
+      classAdditions = `maputnik-layer-list-icon-action__${classBlockName}`;
+
+      if (classBlockModifier) {
+        classAdditions += ` maputnik-layer-list-icon-action__${classBlockName}--${classBlockModifier}`;
+      }
+    }
+
+    return <button
+      tabIndex="-1"
+      title={this.props.action}
+      className={`maputnik-layer-list-icon-action ${classAdditions}`}
+      data-wd-key={this.props.wdKey}
+      onClick={this.props.onClick}
+      aria-hidden="true"
+    >
+      {this.renderIcon()}
+    </button>
+  }
+}
+
+class LayerListItem extends React.Component {
+  static propTypes = {
+    layerIndex: PropTypes.number.isRequired,
+    layerId: PropTypes.string.isRequired,
+    layerType: PropTypes.string.isRequired,
+    isSelected: PropTypes.bool,
+    visibility: PropTypes.string,
+    className: PropTypes.string,
+
+    onLayerSelect: PropTypes.func.isRequired,
+    onLayerCopy: PropTypes.func,
+    onLayerDestroy: PropTypes.func,
+    onLayerVisibilityToggle: PropTypes.func,
+  }
+
+  static defaultProps = {
+    isSelected: false,
+    visibility: 'visible',
+    onLayerCopy: () => {},
+    onLayerDestroy: () => {},
+    onLayerVisibilityToggle: () => {},
+  }
+
+  static childContextTypes = {
+    reactIconBase: PropTypes.object
+  }
+
+  getChildContext() {
+    return {
+      reactIconBase: { size: 14 }
+    }
+  }
+
+  render() {
+    const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
+
+    return <li
+      key={this.props.layerId}
+      onClick={e => this.props.onLayerSelect(this.props.layerIndex)}
+      data-wd-key={"layer-list-item:"+this.props.layerId}
+      className={classnames({
+        "maputnik-layer-list-item": true,
+        "maputnik-layer-list-item-selected": this.props.isSelected,
+        [this.props.className]: true,
+      })}>
+        <DraggableLabel {...this.props} />
+        <span style={{flexGrow: 1}} />
+        <IconAction
+          wdKey={"layer-list-item:"+this.props.layerId+":delete"}
+          action={'delete'}
+          classBlockName="delete"
+          onClick={e => this.props.onLayerDestroy(this.props.layerIndex)}
+        />
+        <IconAction
+          wdKey={"layer-list-item:"+this.props.layerId+":copy"}
+          action={'duplicate'}
+          classBlockName="duplicate"
+          onClick={e => this.props.onLayerCopy(this.props.layerIndex)}
+        />
+        <IconAction
+          wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
+          action={visibilityAction}
+          classBlockName="visibility"
+          classBlockModifier={visibilityAction}
+          onClick={e => this.props.onLayerVisibilityToggle(this.props.layerIndex)}
+        />
+    </li>
+  }
+}
+
+const LayerListItemSortable = SortableElement((props) => <LayerListItem {...props} />);
+
+export default LayerListItemSortable;