Rift.IO OSM R1 Initial Submission

[osm/UI.git] / skyquake / framework / widgets / button / sq-button.jsx

diff --git a/skyquake/framework/widgets/button/sq-button.jsx b/skyquake/framework/widgets/button/sq-button.jsx
new file mode 100644 (file)
index 0000000..ae93128
--- /dev/null
+++ b/skyquake/framework/widgets/button/sq-button.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import 'style/base.scss';
+import './button.scss';
+
+const icons = {
+    check: require("style/icons/svg-sprite-navigation-symbol.svg")  + "#ic_check_24px"
+}
+
+export default class SqButton extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        let {icon, primary, size, disabled, label, ...props} = this.props;
+        let svgHTML = null;
+        let Class = "SqButton";
+        if(icon) {
+            svgHTML = <svg className="svg-24px SqButton-icon">
+            <use xlinkHref={icons[icon]}></use></svg>;
+        }
+        if(primary) {
+            Class += " SqButton--primary";
+        } else {
+            Class += " SqButton--normal";
+        }
+        if(size && (
+                size == 'small'
+                || size == 'medium'
+                || size == 'large'
+                )
+            ) {
+            Class += " SqButton--" + size;
+        }
+        if(disabled) {
+            Class += " is-disabled";
+        }
+        return (
+                <div style={{display: 'flex'}}>
+            <div className={Class} tabIndex="0">
+            {svgHTML}
+              <div className="SqButton-content">{label}</div>
+            </div>
+            </div>
+        )
+    }
+}
+
+SqButton.defaultProps = {
+    icon: false,
+    primary: false,
+    disabled: false,
+    size: false, // 'small', 'medium', 'large'
+    label: 'Submit'
+}