From 8b4231e3109d4b29e4d90f4553f718a1d7867bc5 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Mon, 14 Jan 2019 22:26:06 +0100 Subject: Add buttons --- packages/forms/package-lock.json | 309 +++++++--------------- packages/forms/package.json | 8 +- packages/forms/src/button/index.tsx | 172 ++++++++++++ packages/forms/src/error/styles.ts | 1 + packages/forms/src/index.ts | 1 + packages/forms/src/input/index.tsx | 34 +-- packages/forms/src/input/styles.ts | 6 +- packages/forms/src/label/styles.ts | 1 + packages/forms/src/toggle/index.tsx | 8 +- packages/forms/src/typings/generic.ts | 2 + packages/forms/src/wrapper/index.tsx | 2 +- packages/forms/typings/react-html-attributes.d.ts | 1 - packages/forms/webpack.config.js | 9 + 13 files changed, 308 insertions(+), 246 deletions(-) create mode 100644 packages/forms/src/button/index.tsx delete mode 100644 packages/forms/typings/react-html-attributes.d.ts (limited to 'packages') diff --git a/packages/forms/package-lock.json b/packages/forms/package-lock.json index a3e000944..cdfab23b5 100644 --- a/packages/forms/package-lock.json +++ b/packages/forms/package-lock.json @@ -1,6 +1,6 @@ { "name": "@meetfranz/forms", - "version": "1.0.0", + "version": "1.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -60,30 +60,46 @@ } } }, - "brcast": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.1.tgz", - "integrity": "sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg==" + "asap": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", + "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" }, - "classnames": { - "version": "2.2.6", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", - "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + "core-js": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", + "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" }, - "css-vendor": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz", - "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=", + "create-react-class": { + "version": "15.6.3", + "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz", + "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==", "requires": { - "is-in-browser": "^1.0.2" + "fbjs": "^0.8.9", + "loose-envify": "^1.3.1", + "object-assign": "^4.1.1" + } + }, + "encoding": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", + "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", + "requires": { + "iconv-lite": "~0.4.13" } }, - "hoist-non-react-statics": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz", - "integrity": "sha512-TFsu3TV3YLY+zFTZDrN8L2DTFanObwmBLpWvJs1qfUuEQ5bTAdFcwfx2T/bsCXfM9QHSLvjfP+nihEl0yvozxw==", + "fbjs": { + "version": "0.8.17", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", + "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", "requires": { - "react-is": "^16.3.2" + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" } }, "html-element-attributes": { @@ -91,139 +107,33 @@ "resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-1.3.1.tgz", "integrity": "sha512-UrRKgp5sQmRnDy4TEwAUsu14XBUlzKB8U3hjIYDjcZ3Hbp86Jtftzxfgrv6E/ii/h78tsaZwAnAE8HwnHr0dPA==" }, - "hyphenate-style-name": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz", - "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es=" - }, - "is-function": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz", - "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=" + "iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "requires": { + "safer-buffer": ">= 2.1.2 < 3" + } }, - "is-in-browser": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", - "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" + "is-stream": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", + "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" }, - "is-plain-object": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", - "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", + "isomorphic-fetch": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", + "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", "requires": { - "isobject": "^3.0.1" + "node-fetch": "^1.0.1", + "whatwg-fetch": ">=0.10.0" } }, - "isobject": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", - "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" - }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, - "jss": { - "version": "9.8.7", - "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz", - "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==", - "requires": { - "is-in-browser": "^1.1.3", - "symbol-observable": "^1.1.0", - "warning": "^3.0.0" - } - }, - "jss-camel-case": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.1.0.tgz", - "integrity": "sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==", - "requires": { - "hyphenate-style-name": "^1.0.2" - } - }, - "jss-compose": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-5.0.0.tgz", - "integrity": "sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==", - "requires": { - "warning": "^3.0.0" - } - }, - "jss-default-unit": { - "version": "8.0.2", - "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz", - "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg==" - }, - "jss-expand": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-5.3.0.tgz", - "integrity": "sha512-NiM4TbDVE0ykXSAw6dfFmB1LIqXP/jdd0ZMnlvlGgEMkMt+weJIl8Ynq1DsuBY9WwkNyzWktdqcEW2VN0RAtQg==" - }, - "jss-extend": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-6.2.0.tgz", - "integrity": "sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA==", - "requires": { - "warning": "^3.0.0" - } - }, - "jss-global": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz", - "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q==" - }, - "jss-nested": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz", - "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==", - "requires": { - "warning": "^3.0.0" - } - }, - "jss-preset-default": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.5.0.tgz", - "integrity": "sha512-qZbpRVtHT7hBPpZEBPFfafZKWmq3tA/An5RNqywDsZQGrlinIF/mGD9lmj6jGqu8GrED2SMHZ3pPKLmjCZoiaQ==", - "requires": { - "jss-camel-case": "^6.1.0", - "jss-compose": "^5.0.0", - "jss-default-unit": "^8.0.2", - "jss-expand": "^5.3.0", - "jss-extend": "^6.2.0", - "jss-global": "^3.0.0", - "jss-nested": "^6.0.1", - "jss-props-sort": "^6.0.0", - "jss-template": "^1.0.1", - "jss-vendor-prefixer": "^7.0.0" - } - }, - "jss-props-sort": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz", - "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g==" - }, - "jss-template": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.1.tgz", - "integrity": "sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg==", - "requires": { - "warning": "^3.0.0" - } - }, - "jss-vendor-prefixer": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz", - "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==", - "requires": { - "css-vendor": "^0.3.8" - } - }, - "lodash": { - "version": "4.17.11", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" - }, "loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -232,18 +142,13 @@ "js-tokens": "^3.0.0 || ^4.0.0" } }, - "mobx": { - "version": "5.8.0", - "resolved": "https://registry.npmjs.org/mobx/-/mobx-5.8.0.tgz", - "integrity": "sha512-NsZB+9bF5j+nv9Qwk6bNeE3np26a4TbTGkMpOLf6o1zXoM9BtHPQn/00px4uZ2AXJXtQML5P4MEWdMm6icMIfQ==" - }, - "mobx-react": { - "version": "5.4.3", - "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-5.4.3.tgz", - "integrity": "sha512-WC8yFlwvJ91hy8j6CrydAuFteUafcuvdITFQeHl3LRIf5ayfT/4W3M/byhEYD2BcJWejeXr8y4Rh2H26RunCRQ==", + "node-fetch": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", + "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", "requires": { - "hoist-non-react-statics": "^3.0.0", - "react-lifecycles-compat": "^3.0.2" + "encoding": "^0.1.11", + "is-stream": "^1.0.1" } }, "object-assign": { @@ -251,6 +156,14 @@ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + }, "prop-types": { "version": "15.6.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", @@ -260,17 +173,6 @@ "object-assign": "^4.1.1" } }, - "react": { - "version": "16.7.0", - "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz", - "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "prop-types": "^15.6.2", - "scheduler": "^0.12.0" - } - }, "react-html-attributes": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.3.tgz", @@ -279,67 +181,40 @@ "html-element-attributes": "^1.0.0" } }, - "react-is": { - "version": "16.7.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz", - "integrity": "sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g==" - }, - "react-jss": { - "version": "8.6.1", - "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz", - "integrity": "sha512-SH6XrJDJkAphp602J14JTy3puB2Zxz1FkM3bKVE8wON+va99jnUTKWnzGECb3NfIn9JPR5vHykge7K3/A747xQ==", + "react-loader": { + "version": "2.4.5", + "resolved": "https://registry.npmjs.org/react-loader/-/react-loader-2.4.5.tgz", + "integrity": "sha1-zT5VHGzQc4wcDxPwc2VPk4KL5ak=", "requires": { - "hoist-non-react-statics": "^2.5.0", - "jss": "^9.7.0", - "jss-preset-default": "^4.3.0", - "prop-types": "^15.6.0", - "theming": "^1.3.0" - }, - "dependencies": { - "hoist-non-react-statics": { - "version": "2.5.5", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", - "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" - } + "create-react-class": "^15.5.2", + "prop-types": "^15.5.8", + "spin.js": "2.x" } }, - "react-lifecycles-compat": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + "safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, - "scheduler": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz", - "integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==", - "requires": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } + "setimmediate": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", + "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" }, - "symbol-observable": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", - "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" + "spin.js": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/spin.js/-/spin.js-2.3.2.tgz", + "integrity": "sha1-bKpW1SBnNFD9XPvGlx5tB3LDeho=" }, - "theming": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/theming/-/theming-1.3.0.tgz", - "integrity": "sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw==", - "requires": { - "brcast": "^3.0.1", - "is-function": "^1.0.1", - "is-plain-object": "^2.0.1", - "prop-types": "^15.5.8" - } + "ua-parser-js": { + "version": "0.7.19", + "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz", + "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ==" }, - "warning": { + "whatwg-fetch": { "version": "3.0.0", - "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", - "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", - "requires": { - "loose-envify": "^1.0.0" - } + "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz", + "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==" } } } diff --git a/packages/forms/package.json b/packages/forms/package.json index 68584e626..68bd4d50e 100644 --- a/packages/forms/package.json +++ b/packages/forms/package.json @@ -26,12 +26,16 @@ "@mdi/js": "^3.3.92", "@mdi/react": "^1.1.0", "@meetfranz/theme": "file:../theme", + "react-html-attributes": "^1.4.3", + "react-loader": "^2.4.5" + }, + "peerDependencies": { "classnames": "^2.2.6", "lodash": "^4.17.11", + "react": "^16.7.0", "mobx": "^5.8.0", "mobx-react": "^5.4.3", - "react": "^16.7.0", - "react-html-attributes": "^1.4.3", + "react-dom": "16.7.0", "react-jss": "^8.6.1" }, "gitHead": "e9a48f96f8659dcd6ac07a8445f60f27d6ae698a" diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx new file mode 100644 index 000000000..c4a138b16 --- /dev/null +++ b/packages/forms/src/button/index.tsx @@ -0,0 +1,172 @@ +import { Theme } from '@meetfranz/theme'; +import classnames from 'classnames'; +import CSS from 'csstype'; +import { observer } from 'mobx-react'; +import React, { Component } from 'react'; +import injectStyle from 'react-jss'; +import Loader from 'react-loader'; + +import { IFormField, IWithStyle } from '../typings/generic'; + +type ButtonType = 'primary' | 'secondary' | 'danger' | 'warning' | 'inverted'; + +interface IProps extends React.InputHTMLAttributes, IFormField, IWithStyle { + buttonType?: ButtonType; + stretch?: boolean; + loaded?: boolean; + busy?: boolean; +} + +interface IState { + busy: boolean; +} + +const styles = (theme: Theme) => ({ + button: { + borderRadius: theme.borderRadiusSmall, + border: 'none', + display: 'flex', + position: 'relative' as CSS.PositionProperty, + transition: 'background .5s', + textAlign: 'center' as CSS.TextAlignProperty, + outline: 'none', + alignItems: 'center', + padding: 0, + width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty, + fontSize: theme.uiFontSize, + }, + label: { + margin: '10px 20px', + width: '100%', + }, + primary: { + background: theme.buttonPrimaryBackground, + color: theme.buttonPrimaryTextColor, + }, + secondary: { + background: theme.buttonSecondaryBackground, + color: theme.buttonSecondaryTextColor, + }, + danger: { + background: theme.buttonDangerBackground, + color: theme.buttonDangerTextColor, + }, + warning: { + background: theme.buttonWarningBackground, + color: theme.buttonWarningTextColor, + }, + inverted: { + background: theme.buttonInvertedBackground, + color: theme.buttonInvertedTextColor, + border: theme.buttonInvertedBorder, + }, + disabled: { + opacity: theme.inputDisabledOpacity, + }, + loader: { + position: 'relative' as CSS.PositionProperty, + width: 20, + height: 18, + zIndex: 9999, + }, + loaderContainer: { + width: (props: IProps): string => (!props.busy ? '0' : '40px'), + height: 20, + overflow: 'hidden', + transition: 'all 0.3s', + marginLeft: (props: IProps): number => !props.busy ? 10 : 20, + marginRight: (props: IProps): number => !props.busy ? -10 : -20, + position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit', + }, +}); + +@observer +class ButtonComponent extends Component { + public static defaultProps = { + type: 'button', + disabled: false, + onClick: () => null, + buttonType: 'primary' as ButtonType, + stretch: false, + busy: false, + }; + + state = { + busy: false, + }; + + componentWillMount() { + this.setState({ busy: this.props.busy }); + } + + componentWillReceiveProps(nextProps: IProps) { + if (nextProps.busy !== this.props.busy) { + if (this.props.busy) { + setTimeout(() => { + this.setState({ busy: nextProps.busy }); + }, 300); + } else { + this.setState({ busy: nextProps.busy }); + } + } + } + + render() { + const { + classes, + theme, + disabled, + id, + label, + type, + onClick, + buttonType, + loaded, + busy: busyProp, + } = this.props; + + const { + busy, + } = this.state; + + let showLoader = false; + if (loaded) { + showLoader = !loaded; + console.warn('Franz Button prop `loaded` will be deprecated in the future. Please use `busy` instead'); + } + if (busy) { + showLoader = busy; + } + + return ( + + ); + } +} + +export const Button = injectStyle(styles)(ButtonComponent); diff --git a/packages/forms/src/error/styles.ts b/packages/forms/src/error/styles.ts index 36a2b24e7..5104838a5 100644 --- a/packages/forms/src/error/styles.ts +++ b/packages/forms/src/error/styles.ts @@ -4,5 +4,6 @@ export default (theme: Theme) => ({ message: { color: theme.brandDanger, margin: '5px 0 0', + fontSize: theme.uiFontSize, }, }); diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts index a506de111..fbeb7e3d3 100644 --- a/packages/forms/src/index.ts +++ b/packages/forms/src/index.ts @@ -1,2 +1,3 @@ export { Input } from './input'; export { Toggle } from './toggle'; +export { Button } from './button'; diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx index d82ee5fe3..8f17ba2f9 100644 --- a/packages/forms/src/input/index.tsx +++ b/packages/forms/src/input/index.tsx @@ -34,6 +34,7 @@ class InputComponent extends Component { public static defaultProps = { focus: false, onChange: () => {}, + onBlur: () => {}, scorePassword: false, showLabel: true, showPasswordToggle: false, @@ -74,6 +75,7 @@ class InputComponent extends Component { render() { const { classes, + className, disabled, error, id, @@ -84,6 +86,11 @@ class InputComponent extends Component { showLabel, showPasswordToggle, type, + value, + name, + placeholder, + spellCheck, + onBlur, } = this.props; const { @@ -91,18 +98,7 @@ class InputComponent extends Component { passwordScore, } = this.state; - const inputProps = pick(this.props, htmlElementAttributes['input']); - - if (type === 'password' && showPassword) { - inputProps.type = 'text'; - } - - inputProps.onChange = this.onChange.bind(this); - - const cssClasses = classnames({ - [`${inputProps.className}`]: inputProps.className, - [`${classes.input}`]: true, - }); + const inputType = type === 'password' && showPassword ? 'text' : type; return ( @@ -110,10 +106,11 @@ class InputComponent extends Component { title={label} showLabel={showLabel} htmlFor={id} + className={className} >
{ )} {suffix && ( diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts index 2b34e92c3..a64d2c340 100644 --- a/packages/forms/src/input/styles.ts +++ b/packages/forms/src/input/styles.ts @@ -6,12 +6,10 @@ const prefixStyles = (theme: Theme) => ({ color: theme.inputPrefixColor, lineHeight: theme.inputHeight, padding: '0 10px', + fontSize: theme.uiFontSize, }); export default (theme: Theme) => ({ - container: { - // display: 'flex', - }, disabled: { opacity: theme.inputDisabledOpacity, }, @@ -33,7 +31,7 @@ export default (theme: Theme) => ({ input: { background: 'none', border: 0, - fontSize: theme.inputFontSize, + fontSize: theme.uiFontSize, outline: 'none', padding: 8, width: '100%', diff --git a/packages/forms/src/label/styles.ts b/packages/forms/src/label/styles.ts index 64011a93d..f3998de04 100644 --- a/packages/forms/src/label/styles.ts +++ b/packages/forms/src/label/styles.ts @@ -6,6 +6,7 @@ export default (theme: Theme) => ({ }, label: { color: theme.labelColor, + fontSize: theme.uiFontSize, }, hasError: { color: theme.brandDanger, diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx index 759694dc8..a1cd7f1a4 100644 --- a/packages/forms/src/toggle/index.tsx +++ b/packages/forms/src/toggle/index.tsx @@ -11,9 +11,7 @@ import Error from '../error'; import Label from '../label'; import Wrapper from '../wrapper'; -interface IProps extends React.InputHTMLAttributes, IFormField, IWithStyle { - // field: any; -} +interface IProps extends React.InputHTMLAttributes, IFormField, IWithStyle {} const styles = (theme: Theme) => ({ toggle: { @@ -42,7 +40,7 @@ const styles = (theme: Theme) => ({ visibility: 'hidden' as any, }, disabled: { - opacity: 0.5, + opacity: theme.inputDisabledOpacity, }, toggleLabel: { display: 'flex', @@ -77,8 +75,6 @@ class ToggleComponent extends Component { onChange, } = this.props; - console.log('props', this.props); - return (