@mirai/ui 1.0.46 → 1.0.47

package/build/components/Button/Button.js

@@ -15,7 +15,7 @@ var _primitives = require("../../primitives");
 
 var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
 
-var _excluded = ["children", "disabled", "large", "outlined", "rounded", "small", "squared", "tag"];
+var _excluded = ["busy", "children", "disabled", "large", "outlined", "rounded", "small", "squared", "tag", "onPress"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -30,7 +30,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var Button = function Button(_ref) {
-  var children = _ref.children,
+  var busy = _ref.busy,
+      children = _ref.children,
       disabled = _ref.disabled,
       large = _ref.large,
       outlined = _ref.outlined,
@@ -40,18 +41,23 @@ var Button = function Button(_ref) {
       squared = _ref$squared === void 0 ? false : _ref$squared,
       _ref$tag = _ref.tag,
       tag = _ref$tag === void 0 ? 'button' : _ref$tag,
+      onPress = _ref.onPress,
       others = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _objectSpread(_objectSpread({}, others), {}, {
-    disabled: disabled,
+    disabled: disabled || busy,
     tag: tag,
-    className: (0, _helpers.styles)(_ButtonModule.default.button, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, outlined && !disabled && _ButtonModule.default.outlined, others.className)
-  }), children);
+    className: (0, _helpers.styles)(_ButtonModule.default.button, busy && _ButtonModule.default.busy, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, outlined && _ButtonModule.default.outlined, outlined && (disabled || busy) && _ButtonModule.default.disabled, others.className),
+    onPress: !disabled && !busy ? onPress : undefined
+  }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, busy !== undefined && /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    className: (0, _helpers.styles)(_ButtonModule.default.busyProgress, busy && _ButtonModule.default.active)
+  }), children));
 };
 
 exports.Button = Button;
 Button.displayName = 'Component:Button';
 Button.propTypes = {
+  busy: _propTypes.default.bool,
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   disabled: _propTypes.default.bool,
   large: _propTypes.default.bool,

package/build/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["Button","children","disabled","large","outlined","rounded","small","squared","tag","others","React","createElement","Pressable","className","style","button","displayName","propTypes","PropTypes","oneOfType","string","node","bool","onEnter","func","onLeave","onPress"],"sources":["../../../src/components/Button/Button.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({ children, disabled, large, outlined, rounded, small, squared = false, tag = 'button', ...others }) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled,\n      tag,\n      className: styles(\n        style.button,\n        large && style.large,\n        small && style.small,\n        rounded && style.rounded,\n        squared && style.squared,\n        outlined && !disabled && style.outlined,\n        others.className,\n      ),\n    },\n    children,\n  );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  outlined: PropTypes.bool,\n  rounded: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,IAAaC,QAAb,QAAaA,QAAb;EAAA,IAAuBC,KAAvB,QAAuBA,KAAvB;EAAA,IAA8BC,QAA9B,QAA8BA,QAA9B;EAAA,IAAwCC,OAAxC,QAAwCA,OAAxC;EAAA,IAAiDC,KAAjD,QAAiDA,KAAjD;EAAA,wBAAwDC,OAAxD;EAAA,IAAwDA,OAAxD,6BAAkE,KAAlE;EAAA,oBAAyEC,GAAzE;EAAA,IAAyEA,GAAzE,yBAA+E,QAA/E;EAAA,IAA4FC,MAA5F;;EAAA,oBACbC,eAAMC,aAAN,CACEC,qBADF,kCAGOH,MAHP;IAIIP,QAAQ,EAARA,QAJJ;IAKIM,GAAG,EAAHA,GALJ;IAMIK,SAAS,EAAE,qBACTC,sBAAMC,MADG,EAETZ,KAAK,IAAIW,sBAAMX,KAFN,EAGTG,KAAK,IAAIQ,sBAAMR,KAHN,EAITD,OAAO,IAAIS,sBAAMT,OAJR,EAKTE,OAAO,IAAIO,sBAAMP,OALR,EAMTH,QAAQ,IAAI,CAACF,QAAb,IAAyBY,sBAAMV,QANtB,EAOTK,MAAM,CAACI,SAPE;EANf,IAgBEZ,QAhBF,CADa;AAAA,CAAf;;;AAoBAD,MAAM,CAACgB,WAAP,GAAqB,kBAArB;AAEAhB,MAAM,CAACiB,SAAP,GAAmB;EACjBhB,QAAQ,EAAEiB,mBAAUC,SAAV,CAAoB,CAACD,mBAAUE,MAAX,EAAmBF,mBAAUG,IAA7B,CAApB,CADO;EAEjBnB,QAAQ,EAAEgB,mBAAUI,IAFH;EAGjBnB,KAAK,EAAEe,mBAAUI,IAHA;EAIjBlB,QAAQ,EAAEc,mBAAUI,IAJH;EAKjBjB,OAAO,EAAEa,mBAAUI,IALF;EAMjBhB,KAAK,EAAEY,mBAAUI,IANA;EAOjBf,OAAO,EAAEW,mBAAUI,IAPF;EAQjBd,GAAG,EAAEU,mBAAUE,MARE;EASjBG,OAAO,EAAEL,mBAAUM,IATF;EAUjBC,OAAO,EAAEP,mBAAUM,IAVF;EAWjBE,OAAO,EAAER,mBAAUM;AAXF,CAAnB"}
+{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","outlined","rounded","small","squared","tag","onPress","others","React","createElement","Pressable","className","style","button","undefined","busyProgress","active","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Button/Button.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable, View } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({\n  busy,\n  children,\n  disabled,\n  large,\n  outlined,\n  rounded,\n  small,\n  squared = false,\n  tag = 'button',\n  onPress,\n  ...others\n}) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled: disabled || busy,\n      tag,\n      className: styles(\n        style.button,\n        busy && style.busy,\n        large && style.large,\n        small && style.small,\n        rounded && style.rounded,\n        squared && style.squared,\n        outlined && style.outlined,\n        outlined && (disabled || busy) && style.disabled,\n        others.className,\n      ),\n      onPress: !disabled && !busy ? onPress : undefined,\n    },\n    <>\n      {busy !== undefined && <View className={styles(style.busyProgress, busy && style.active)} />}\n      {children}\n    </>,\n  );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n  busy: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  outlined: PropTypes.bool,\n  rounded: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,IACbC,IADa,QACbA,IADa;EAAA,IAEbC,QAFa,QAEbA,QAFa;EAAA,IAGbC,QAHa,QAGbA,QAHa;EAAA,IAIbC,KAJa,QAIbA,KAJa;EAAA,IAKbC,QALa,QAKbA,QALa;EAAA,IAMbC,OANa,QAMbA,OANa;EAAA,IAObC,KAPa,QAObA,KAPa;EAAA,wBAQbC,OARa;EAAA,IAQbA,OARa,6BAQH,KARG;EAAA,oBASbC,GATa;EAAA,IASbA,GATa,yBASP,QATO;EAAA,IAUbC,OAVa,QAUbA,OAVa;EAAA,IAWVC,MAXU;;EAAA,oBAabC,eAAMC,aAAN,CACEC,qBADF,kCAGOH,MAHP;IAIIR,QAAQ,EAAEA,QAAQ,IAAIF,IAJ1B;IAKIQ,GAAG,EAAHA,GALJ;IAMIM,SAAS,EAAE,qBACTC,sBAAMC,MADG,EAEThB,IAAI,IAAIe,sBAAMf,IAFL,EAGTG,KAAK,IAAIY,sBAAMZ,KAHN,EAITG,KAAK,IAAIS,sBAAMT,KAJN,EAKTD,OAAO,IAAIU,sBAAMV,OALR,EAMTE,OAAO,IAAIQ,sBAAMR,OANR,EAOTH,QAAQ,IAAIW,sBAAMX,QAPT,EAQTA,QAAQ,KAAKF,QAAQ,IAAIF,IAAjB,CAAR,IAAkCe,sBAAMb,QAR/B,EASTQ,MAAM,CAACI,SATE,CANf;IAiBIL,OAAO,EAAE,CAACP,QAAD,IAAa,CAACF,IAAd,GAAqBS,OAArB,GAA+BQ;EAjB5C,iBAmBE,4DACGjB,IAAI,KAAKiB,SAAT,iBAAsB,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOF,sBAAMG,YAAb,EAA2BlB,IAAI,IAAIe,sBAAMI,MAAzC;EAAjB,EADzB,EAEGlB,QAFH,CAnBF,CAba;AAAA,CAAf;;;AAsCAF,MAAM,CAACqB,WAAP,GAAqB,kBAArB;AAEArB,MAAM,CAACsB,SAAP,GAAmB;EACjBrB,IAAI,EAAEsB,mBAAUC,IADC;EAEjBtB,QAAQ,EAAEqB,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,IAA7B,CAApB,CAFO;EAGjBxB,QAAQ,EAAEoB,mBAAUC,IAHH;EAIjBpB,KAAK,EAAEmB,mBAAUC,IAJA;EAKjBnB,QAAQ,EAAEkB,mBAAUC,IALH;EAMjBlB,OAAO,EAAEiB,mBAAUC,IANF;EAOjBjB,KAAK,EAAEgB,mBAAUC,IAPA;EAQjBhB,OAAO,EAAEe,mBAAUC,IARF;EASjBf,GAAG,EAAEc,mBAAUG,MATE;EAUjBE,OAAO,EAAEL,mBAAUM,IAVF;EAWjBC,OAAO,EAAEP,mBAAUM,IAXF;EAYjBnB,OAAO,EAAEa,mBAAUM;AAZF,CAAnB"}

package/build/components/Button/Button.module.css

@@ -1,5 +1,7 @@
 :root {
   --mirai-ui-button-background: var(--mirai-ui-accent);
+  --mirai-ui-button-busy-width: 0%;
+  --mirai-ui-button-busy-motion: calc(var(--mirai-ui-motion-expand) * 10);
   --mirai-ui-button-color: var(--mirai-ui-base);
   --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
   --mirai-ui-button-color-focus: var(--mirai-ui-content);
@@ -25,21 +27,45 @@
   font-weight: var(--mirai-ui-button-font-weight);
   justify-content: center;
   padding: var(--mirai-ui-button-padding-y) var(--mirai-ui-button-padding-x);
+  position: relative;
   transition: background-color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
     box-shadow var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
     color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
   width: fit-content;
 }
 
-.button:disabled {
+.button:disabled:not(.busy) {
   background-color: var(--mirai-ui-button-disabled-background);
   color: var(--mirai-ui-button-disabled-color);
 }
 
-.outlined {
-  background-color: var(--mirai-ui-button-outlined-background);
-  border: solid 1px var(--mirai-ui-button-background);
-  color: var(--mirai-ui-button-background);
+@keyframes mirai-button-busy {
+  from {
+    width: var(--mirai-ui-button-busy-width);
+  }
+  to {
+    width: 100%;
+  }
+}
+
+.outlined .busyProgress {
+  background-color: var(--mirai-ui-button-background);
+}
+
+.busyProgress {
+  background-color: var(--mirai-ui-button-color);
+  opacity: 0.2;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  width: 0%;
+}
+
+.busyProgress.active {
+  animation-duration: var(--mirai-ui-button-busy-motion);
+  animation-iteration-count: infinite;
+  animation-name: mirai-button-busy;
+  animation-timing-function: var(--mirai-ui-motion-easing);
 }
 
 .button:not(:disabled):active {
@@ -52,15 +78,25 @@
     calc(var(--mirai-ui-button-padding-x) + calc(var(--mirai-ui-button-padding-y) / 2));
 }
 
-.small:not(.squared) {
-  font-size: var(--mirai-ui-font-size-small);
-  padding: var(--mirai-ui-button-padding-y) calc(var(--mirai-ui-button-padding-x) / 2);
+.outlined {
+  background-color: var(--mirai-ui-button-outlined-background);
+  border: solid 1px var(--mirai-ui-button-background);
+  color: var(--mirai-ui-button-background);
+}
+
+.outlined.disabled:not(.busy) {
+  border-color: var(--mirai-ui-button-disabled-background);
 }
 
 .rounded {
   border-radius: 50%;
 }
 
+.small:not(.squared) {
+  font-size: var(--mirai-ui-font-size-small);
+  padding: var(--mirai-ui-button-padding-y) calc(var(--mirai-ui-button-padding-x) / 2);
+}
+
 .squared {
   height: var(--mirai-ui-button-squared);
   padding: 0;

package/build/components/Button/__tests__/__snapshots__/Button.test.js.snap

@@ -10,6 +10,20 @@ exports[`component:<Button> inherit:className 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Button> prop:busy 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable button busy"
+    disabled=""
+  >
+    <div
+      class="view busyProgress active"
+    />
+    children
+  </button>
+</DocumentFragment>
+`;
+
 exports[`component:<Button> prop:disabled 1`] = `
 <DocumentFragment>
   <button
@@ -31,6 +45,20 @@ exports[`component:<Button> prop:large 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Button> prop:outlined && prop:busy 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable button busy outlined disabled"
+    disabled=""
+  >
+    <div
+      class="view busyProgress active"
+    />
+    children
+  </button>
+</DocumentFragment>
+`;
+
 exports[`component:<Button> prop:outlined 1`] = `
 <DocumentFragment>
   <button

package/build/components/InputNumber/__tests__/__snapshots__/InputNumber.test.js.snap

@@ -9,7 +9,7 @@ exports[`component:<InputNumber> inherit:className 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared"
+      class="pressable button rounded squared outlined disabled"
       disabled=""
     >
       <span
@@ -85,7 +85,7 @@ exports[`component:<InputNumber> prop:disabled 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared"
+      class="pressable button rounded squared outlined disabled"
       disabled=""
     >
       <span
@@ -117,7 +117,7 @@ exports[`component:<InputNumber> prop:disabled 1`] = `
       0
     </span>
     <button
-      class="pressable button rounded squared"
+      class="pressable button rounded squared outlined disabled"
       disabled=""
     >
       <span
@@ -168,7 +168,7 @@ exports[`component:<InputNumber> prop:hint 1`] = `
       </span>
     </div>
     <button
-      class="pressable button rounded squared"
+      class="pressable button rounded squared outlined disabled"
       disabled=""
     >
       <span
@@ -250,7 +250,7 @@ exports[`component:<InputNumber> prop:label 1`] = `
       </span>
     </div>
     <button
-      class="pressable button rounded squared"
+      class="pressable button rounded squared outlined disabled"
       disabled=""
     >
       <span
@@ -357,7 +357,7 @@ exports[`component:<InputNumber> prop:max 1`] = `
       10
     </span>
     <button
-      class="pressable button rounded squared"
+      class="pressable button rounded squared outlined disabled"
       disabled=""
     >
       <span
@@ -402,7 +402,7 @@ exports[`component:<InputNumber> prop:min 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared"
+      class="pressable button rounded squared outlined disabled"
       disabled=""
     >
       <span
@@ -628,7 +628,7 @@ exports[`component:<InputNumber> renders 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared"
+      class="pressable button rounded squared outlined disabled"
       disabled=""
     >
       <span
@@ -705,7 +705,7 @@ exports[`component:<InputNumber> testID 1`] = `
       class="view texts"
     />
     <button
-      class="pressable button rounded squared"
+      class="pressable button rounded squared outlined disabled"
       disabled=""
     >
       <span

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.46",
+  "version": "1.0.47",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",