X-Git-Url: https://osm.etsi.org/gitweb/?p=osm%2FUI.git;a=blobdiff_plain;f=skyquake%2Fframework%2Fwidgets%2Fbutton%2Fsq-button.jsx;fp=skyquake%2Fframework%2Fwidgets%2Fbutton%2Fsq-button.jsx;h=ae9312845fb7bcbc3e55c82e8a2fb10be6ec09e7;hp=0000000000000000000000000000000000000000;hb=e29efc315df33d546237e270470916e26df391d6;hpb=9c5e457509ba5a1822c316635c6308874e61b4b9

diff --git a/skyquake/framework/widgets/button/sq-button.jsx b/skyquake/framework/widgets/button/sq-button.jsx
new file mode 100644
index 000000000..ae9312845
--- /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'
+}