Initial commit

client/src/lib/custom-ui/components/DragScroller/DragScroller.jsx

@@ -0,0 +1,62 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+const DragScroller = React.memo(({ children, ...props }) => {
+  const wrapper = useRef(null);
+  const prevPosition = useRef(null);
+
+  const handleMouseDown = useCallback(
+    (event) => {
+      if (event.target !== wrapper.current && !event.target.dataset.dragScroller) {
+        return;
+      }
+
+      prevPosition.current = event.clientX;
+    },
+    [wrapper],
+  );
+
+  const handleWindowMouseMove = useCallback(
+    (event) => {
+      if (!prevPosition.current) {
+        return;
+      }
+
+      event.preventDefault();
+
+      const position = event.clientX;
+
+      wrapper.current.scrollLeft -= -prevPosition.current + position;
+      prevPosition.current = position;
+    },
+    [wrapper, prevPosition],
+  );
+
+  const handleWindowMouseUp = useCallback(() => {
+    prevPosition.current = null;
+  }, [prevPosition]);
+
+  useEffect(() => {
+    window.addEventListener('mouseup', handleWindowMouseUp);
+    window.addEventListener('mousemove', handleWindowMouseMove);
+
+    return () => {
+      window.removeEventListener('mouseup', handleWindowMouseUp);
+      window.removeEventListener('mousemove', handleWindowMouseMove);
+    };
+  }, [handleWindowMouseUp, handleWindowMouseMove]);
+
+  return (
+    /* eslint-disable jsx-a11y/no-static-element-interactions, react/jsx-props-no-spreading */
+    <div {...props} ref={wrapper} onMouseDown={handleMouseDown}>
+      {/* eslint-enable jsx-a11y/no-static-element-interactions, react/jsx-props-no-spreading */}
+      {children}
+    </div>
+  );
+});
+
+DragScroller.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default DragScroller;

client/src/lib/custom-ui/components/DragScroller/index.js

@@ -0,0 +1,3 @@
+import DragScroller from './DragScroller';
+
+export default DragScroller;

client/src/lib/custom-ui/components/Input/Input.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Input as SemanticUIInput } from 'semantic-ui-react';
+
+import MaskedInput from './MaskedInput';
+
+const Input = React.forwardRef(({ mask, maskChar, ...props }, ref) => {
+  const nextProps = props;
+
+  if (mask) {
+    nextProps.input = <MaskedInput mask={mask} maskChar={maskChar} />;
+  }
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <SemanticUIInput {...nextProps} ref={ref} />;
+});
+
+Input.propTypes = {
+  mask: PropTypes.string,
+  maskChar: PropTypes.string,
+};
+
+Input.defaultProps = {
+  mask: undefined,
+  maskChar: undefined,
+};
+
+export default React.memo(Input);

client/src/lib/custom-ui/components/Input/MaskedInput.jsx

@@ -0,0 +1,11 @@
+import InputMask from 'react-input-mask';
+
+export default class MaskedInput extends InputMask {
+  focus() {
+    this.getInputDOMNode().focus();
+  }
+
+  select() {
+    this.getInputDOMNode().select();
+  }
+}

client/src/lib/custom-ui/components/Input/index.js

@@ -0,0 +1,3 @@
+import Input from './Input';
+
+export default Input;

client/src/lib/custom-ui/components/Popup/Popup.jsx

@@ -0,0 +1,7 @@
+import { Popup as SemanticUIPopup } from 'semantic-ui-react';
+
+import PopupHeader from './PopupHeader';
+
+export default class Popup extends SemanticUIPopup {
+  static Header = PopupHeader;
+}

client/src/lib/custom-ui/components/Popup/PopupHeader.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Popup as SemanticUIPopup } from 'semantic-ui-react';
+
+import styles from './PopupHeader.module.css';
+
+const PopupHeader = React.memo(({ children, onBack }) => (
+  <SemanticUIPopup.Header className={styles.wrapper}>
+    {onBack && <Button icon="angle left" onClick={onBack} className={styles.backButton} />}
+    <div className={styles.content}>{children}</div>
+  </SemanticUIPopup.Header>
+));
+
+PopupHeader.propTypes = {
+  children: PropTypes.node.isRequired,
+  onBack: PropTypes.func,
+};
+
+PopupHeader.defaultProps = {
+  onBack: undefined,
+};
+
+export default PopupHeader;

client/src/lib/custom-ui/components/Popup/PopupHeader.module.css

@@ -0,0 +1,31 @@
+.backButton {
+  background: transparent !important;
+  box-shadow: none !important;
+  left: 0;
+  margin: 0 !important;
+  padding: 10px 8px 10px 12px !important;
+  position: absolute;
+  top: 0;
+  width: 40px;
+  z-index: 2000;
+}
+
+.content {
+  border-bottom: 1px solid #eee;
+  font-size: 14px;
+  font-weight: normal;
+  left: 0;
+  line-height: 20px;
+  margin: 0 12px;
+  padding: 12px 28px 8px;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.wrapper {
+  height: 40px;
+  margin: 0 -12px 8px !important;
+  position: relative;
+  text-align: center;
+}

client/src/lib/custom-ui/components/Popup/index.js

@@ -0,0 +1,3 @@
+import Popup from './Popup';
+
+export default Popup;