kitchen-simulator 5.0.0-test.18 → 5.0.0-test.19

package/src/components/sidebar/panel.jsx

@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as SharedStyle from '../../shared-style';
+import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
+
+const STYLE = {
+  // borderTop: '1px solid #222',
+  // borderBottom: '1px solid #48494E',
+  paddingBottom: '1px',
+  margin: '2px',
+  userSelect: 'none'
+};
+const STYLE_TITLE = {
+  fontSize: '14px',
+  color: 'rgba(222, 222, 222, 1)',
+  padding: '5px 15px 8px 15px',
+  backgroundColor: '#3e3e3f',
+  textShadow: '-1px -1px 2px rgba(0, 0, 0, 1)',
+  // boxShadow: 'inset 0px -3px 19px 0px rgba(0,0,0,0.5)',
+  margin: '0px',
+  cursor: 'pointer',
+  display: 'flex',
+  justifyContent: 'start',
+  alignItems: 'center'
+};
+const STYLE_CONTENT = {
+  fontSize: '13px',
+  color: '#000',
+  padding: '0px'
+};
+const STYLE_ARROW = {
+  float: 'right'
+};
+
+export default class Panel extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      opened: props.hasOwnProperty('opened') ? props.opened : false,
+      hover: false
+    };
+  }
+
+  toggleOpen() {
+    this.setState({ opened: !this.state.opened });
+  }
+
+  toggleHover() {
+    this.setState({ hover: !this.state.hover });
+  }
+
+  render() {
+    let { name, isUrl, url, headComponents, children } = this.props;
+    let { opened, hover } = this.state;
+
+    return (
+      <div style={STYLE}>
+        <div style={{ ...STYLE_CONTENT, display: opened ? 'block' : 'none' }}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+}
+
+Panel.propTypes = {
+  name: PropTypes.string.isRequired,
+  headComponents: PropTypes.array,
+  opened: PropTypes.bool
+};

package/src/components/sidebar/sidebar.jsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import PanelElementEditor from './panel-element-editor/panel-element-editor';
+import PanelGroupEditor from './panel-group-editor';
+import PanelMultiElementsEditor from './panel-element-editor/panel-multi-elements-editor';
+import PanelLayers from './panel-layers';
+import PanelGuides from './panel-guides';
+import PanelGroups from './panel-groups';
+import PanelLayerElements from './panel-layer-elements';
+import * as SharedStyle from '../../shared-style';
+import If from '../../utils/react-if';
+
+const STYLE = {
+  backgroundColor: SharedStyle.PRIMARY_COLOR.main,
+  display: 'block',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  paddingBottom: '20px'
+};
+
+const sortButtonsCb = (a, b) => {
+  if (a.index === undefined || a.index === null) {
+    a.index = Number.MAX_SAFE_INTEGER;
+  }
+
+  if (b.index === undefined || b.index === null) {
+    b.index = Number.MAX_SAFE_INTEGER;
+  }
+
+  return a.index - b.index;
+};
+
+const mapButtonsCb = (el, ind) => (
+  <If key={ind} condition={el.condition} style={{ position: 'relative' }}>
+    {el.dom}
+  </If>
+);
+
+export default function Sidebar({ state, width, height, sidebarComponents }) {
+  let selectedLayer = state.getIn(['scene', 'selectedLayer']);
+
+  //TODO change in multi-layer check
+  let selected = state.getIn(['scene', 'layers', selectedLayer, 'selected']);
+
+  let multiselected =
+    selected.lines.size > 1 ||
+    selected.items.size > 1 ||
+    selected.holes.size > 1 ||
+    selected.areas.size > 1 ||
+    selected.lines.size +
+      selected.items.size +
+      selected.holes.size +
+      selected.areas.size >
+      1;
+
+  let selectedGroup = state
+    .getIn(['scene', 'groups'])
+    .findEntry(g => g.get('selected'));
+
+  let sorter = [
+    // { index: 0, condition: true, dom: <PanelGuides state={state}/> },
+    // { index: 1, condition: true, dom: <PanelLayers state={state} /> },
+    // { index: 2, condition: true, dom: <PanelLayerElements mode={state.mode} layers={state.scene.layers} selectedLayer={state.scene.selectedLayer} /> },
+    // { index: 3, condition: true, dom: <PanelGroups mode={state.mode} groups={state.scene.groups} layers={state.scene.layers} /> },
+    {
+      index: 4,
+      condition: !multiselected,
+      dom: <PanelElementEditor state={state} planData={{}} />
+    }
+    //{ index: 5, condition: multiselected, dom: <PanelMultiElementsEditor state={state} /> },
+    // { index: 6, condition: !!selectedGroup, dom: <PanelGroupEditor state={state} groupID={selectedGroup ? selectedGroup[0] : null} /> }
+  ];
+
+  sorter = sorter.concat(
+    sidebarComponents.map((Component, key) => {
+      return Component.prototype //if is a react component
+        ? {
+            condition: true,
+            dom: React.createElement(Component, { state, key })
+          }
+        : {
+            //else is a sortable toolbar button
+            index: Component.index,
+            condition: Component.condition,
+            dom: React.createElement(Component.dom, { state, key })
+          };
+    })
+  );
+
+  return (
+    <aside
+      style={{ width, height, ...STYLE }}
+      onKeyDown={event => event.stopPropagation()}
+      onKeyUp={event => event.stopPropagation()}
+      className="sidebar"
+    >
+      {sorter.sort(sortButtonsCb).map(mapButtonsCb)}
+    </aside>
+  );
+}
+
+Sidebar.propTypes = {
+  state: PropTypes.object.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired
+};

package/src/components/sidebar/toolbar-panel.jsx

@@ -0,0 +1,139 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as SharedStyle from '../../shared-style';
+import { FaAngleDown, FaAngleUp } from 'react-icons/fa';
+
+const STYLE = {
+  // borderTop: '1px solid #222',
+  // borderBottom: '2px solid #2f2f2f',
+  // paddingBottom: '5px',
+  // marginTop: '5px',
+  userSelect: 'none',
+  width: '100%'
+};
+const STYLE_TITLE1 = {
+  fontSize: '12px',
+  padding: '8px 15px',
+  backgroundColor: '#3e3e3f',
+  margin: '0px',
+  cursor: 'pointer',
+  display: 'flex',
+  height: '90px',
+  justifyContent: 'start',
+  alignItems: 'center'
+};
+const STYLE_TITLE2 = {
+  fontSize: '12px',
+  padding: '8px 15px',
+  backgroundColor: '#2f2f2f',
+  margin: '0px',
+  cursor: 'pointer',
+  display: 'flex',
+  height: '30px',
+  justifyContent: 'start'
+  // alignItems: 'center'
+};
+
+const STYLE_CONTENT1 = {
+  fontSize: '11px',
+  color: 'rgba(222, 222, 222, 1)',
+  padding: '0px',
+  backgroundColor: '#28292d'
+};
+
+const STYLE_CONTENT2 = {
+  fontSize: '11px',
+  color: 'rgba(222, 222, 222, 1)',
+  padding: '0px'
+  // backgroundColor: '#28292d',
+};
+const STYLE_ARROW = {
+  float: 'right'
+};
+
+export default class ToolbarPanel extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      lastActiveName:
+        props.lastActiveName === undefined ? props.lastActiveName : '',
+      opened: props.hasOwnProperty('opened') ? props.opened : false,
+      hover: false
+    };
+  }
+
+  componentWillUpdate(nextProps, nextState) {
+    if (
+      nextProps.lastActiveName !== undefined &&
+      nextProps.name !== undefined
+    ) {
+      if (
+        nextProps.lastActiveName !== '' &&
+        nextProps.name !== nextProps.lastActiveName
+      ) {
+        nextState.opened = false;
+      }
+    }
+  }
+
+  toggleOpen() {
+    if (this.state.opened === false) {
+      this.props.onOpen();
+    } else {
+      this.props.onClose();
+    }
+    if (this.props.setLastActiveName !== undefined) {
+      this.props.setLastActiveName(this.props.name);
+    }
+    this.setState({ opened: !this.state.opened });
+  }
+  toggleHover() {
+    this.setState({ hover: !this.state.hover });
+  }
+  render() {
+    let { name, isUrl, url, headComponents, children } = this.props;
+    let { opened, hover } = this.state;
+
+    const STYLE_TITLE = isUrl ? STYLE_TITLE1 : STYLE_TITLE2;
+    const STYLE_CONTENT = isUrl ? STYLE_CONTENT1 : STYLE_CONTENT2;
+
+    name = name.charAt(0).toUpperCase() + name.substr(1);
+
+    return (
+      <div style={STYLE}>
+        <h3
+          style={{
+            ...STYLE_TITLE,
+            color:
+              hover ||
+              (this.props.idx != undefined &&
+                this.props.idx === this.props.selSubOption)
+                ? SharedStyle.SECONDARY_COLOR.main
+                : '#fff'
+          }}
+          onMouseEnter={() => this.toggleHover()}
+          onMouseLeave={() => this.toggleHover()}
+          onClick={() => this.toggleOpen()}
+        >
+          {isUrl === true ? (
+            <img name={name} src={url} width={50} height={50} />
+          ) : (
+            ''
+          )}
+          <span style={{ marginLeft: isUrl ? 23 : 0 }}> {name} </span>
+          {headComponents}
+        </h3>
+        <div style={{ ...STYLE_CONTENT, display: opened ? 'block' : 'none' }}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+}
+
+ToolbarPanel.propTypes = {
+  name: PropTypes.string.isRequired,
+  headComponents: PropTypes.array,
+  opened: PropTypes.bool
+};

package/src/components/sign/export.js

@@ -0,0 +1,7 @@
+import Sign from './main';
+
+export { Sign };
+
+export default {
+  Sign
+};