@tarojs/components-react 4.0.8-beta.1 → 4.0.8-beta.3

package/dist/original/components/button/style/index.scss

@@ -0,0 +1,354 @@
+/* Imported from variable */
+// @use "sass:math";
+
+// body,
+// .wx-root,
+// page {
+//   --weui-BTN-HEIGHT: 48;
+//   --weui-BTN-HEIGHT-MEDIUM: 40;
+//   --weui-BTN-HEIGHT-SMALL: 32;
+// }
+// @include setColor(--weui-BTN-ACTIVE-MASK, rgba(0,0,0,0.1), rgba(255,255,255,0.1));
+
+// @include setColor(--weui-BTN-DEFAULT-ACTIVE-BG, overlay(rgba(0, 0, 0, 0.05), #f2f2f2), overlay(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.08)));
+
+// $weuiBtnWidth: 184px;
+$weuiBtnHeight: 46px; // 48px;
+$weuiBtnFontSize: 18px; // 17px;
+$weuiBtnBorderRadius: 5px; // 8px;
+$weuiBtnDefaultGap: 15px; // 16px;
+
+$weuiBtnMiniFontSize: 13px; // 14px;
+$weuiBtnMiniHeight: 2.3; // 32px;
+
+// $weuiBtnCellHeight: 56px;
+// $weuiBtnCellGap: 16px;
+// $weuiBtnCellLineHeight: em(math.div($weuiBtnCellHeight - 2 * $weuiBtnCellGap, $weuiBtnFontSize));
+
+$weuiBtnFontColor: #fff;
+$weuiBtnDisabledFontColor: rgba(255, 255, 255, 0.6); // var(--weui-FG-4);
+// $weuiBtnDisabledBg: var(--weui-FG-5);
+$weuiBtnActiveFontColor: rgba(255, 255, 255, 0.6);
+
+// default
+$weuiBtnDefaultFontColor: #000000; // var(--weui-FG-0);
+$weuiBtnDefaultDisabledFontColor: rgba(0, 0, 0, 0.3); // $weuiBtnDisabledFontColor;
+$weuiBtnDefaultActiveFontColor: rgba(0, 0, 0, 0.6);
+$weuiBtnDefaultActiveBg: #DEDEDE; // var(--weui-BTN-DEFAULT-ACTIVE-BG);
+$weuiBtnDefaultDisabledBg: #F7F7F7; // $weuiBtnDisabledBg;
+$weuiBtnDefaultBg: #F8F8F8;
+
+// primary
+// $weuiBtnPrimaryFontColor: $weuiBtnFontColor;
+// $weuiBtnPrimaryDisabledFontColor: $weuiBtnDisabledFontColor;
+$weuiBtnPrimaryBg: #1AAD19; // var(--weui-BRAND);
+$weuiBtnPrimaryActiveBg: #179B16; // var(--weui-TAG-TEXT-GREEN);
+$weuiBtnPrimaryDisabledBg: #9ED99D; // $weuiBtnDisabledBg;
+
+// warn
+// $weuiBtnWarnFontColor: $weuiColorWarn;
+// $weuiBtnWarnDisabledFontColor: $weuiBtnDisabledFontColor;
+$weuiBtnWarnBg: #E64340; // $weuiBtnDefaultBg;
+$weuiBtnWarnActiveBg: #CE3C39;
+$weuiBtnwarnDisabledBg: #EC8B89; // $weuiBtnDefaultDisabledBg;
+
+$weuiBtnPlainPrimaryColor: rgba(26, 173, 25, 1);
+$weuiBtnPlainPrimaryBorderColor: rgba(26, 173, 25, 1);
+$weuiBtnPlainPrimaryActiveColor: rgba(26, 173, 25, .6);
+$weuiBtnPlainPrimaryActiveBorderColor: rgba(26, 173, 25, .6);
+
+$weuiBtnPlainDefaultColor: rgba(53, 53, 53, 1);
+$weuiBtnPlainDefaultBorderColor: rgba(53, 53, 53, 1);
+$weuiBtnPlainDefaultActiveColor: rgba(53, 53, 53, .6);
+$weuiBtnPlainDefaultActiveBorderColor: rgba(53, 53, 53, .6);
+
+/* Imported from weui-btn_loading.scss */
+@-webkit-keyframes weuiLoading {
+  0% {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+@keyframes weuiLoading {
+  0% {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+
+  100% {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+
+.taro-button-core.taro-btn-loading {
+  .weui-loading {
+    display: inline-block;
+    width: 22px;
+    height: 22px;
+    animation: weuiLoading 1s steps(12, end) infinite;
+    background: transparent url("https://img13.360buyimg.com/imagetools/jfs/t1/353674/27/5761/14397/690ac1cfFf6bf0e2c/77727d0791bacf8e.png") no-repeat;
+    background-size: cover;
+
+    &.weui-btn_primary,
+    &.weui-btn_warn {
+      color: $weuiBtnActiveFontColor;
+    }
+    &.weui-btn_primary {
+      // color: var(--weui-WHITE);
+      background-color: $weuiBtnPrimaryActiveBg;
+    }
+
+    &.weui-btn_warn {
+      background-color: $weuiBtnWarnActiveBg;
+    }
+  }
+
+}
+
+.taro-button-core.taro-btn-loading.taro-btn-mini {
+  .weui-loading {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+  }
+}
+
+$weuiBtnHeight: 46px;
+$weuiBtnFontSize: 18px;
+$weuiBtnFontColor: #fff;
+$weuiBtnActiveFontColor: rgb(255 255 255 / 60%);
+$weuiBtnDisabledFontColor: rgb(255 255 255 / 60%);
+$weuiBtnBorderRadius: 5px;
+$weuiBtnDefaultGap: 15px;
+
+// Button Mini
+$weuiBtnMiniFontSize: 13px;
+$weuiBtnMiniHeight: 2;
+
+// Button Default
+$weuiBtnDefaultFontColor: #000;
+$weuiBtnDefaultActiveFontColor: rgb(0 0 0 / 60%);
+$weuiBtnDefaultDisabledFontColor: rgb(0 0 0 / 30%);
+$weuiBtnDefaultBg: #f8f8f8;
+$weuiBtnDefaultActiveBg: #dedede;
+$weuiBtnDefaultDisabledBg: #f7f7f7;
+
+// Button Primary
+$weuiBtnPrimaryBg: #1aad19;
+$weuiBtnPrimaryActiveBg: #179b16;
+$weuiBtnPrimaryDisabledBg: #9ed99d;
+
+// Button Warn
+$weuiBtnWarnBg: #e64340;
+$weuiBtnWarnActiveBg: #ce3c39;
+$weuiBtnWarnDisabledBg: #ec8b89;
+
+// Button Plain Primary
+$weuiBtnPlainPrimaryColor: rgb(26 173 25 / 100%);
+$weuiBtnPlainPrimaryBorderColor: rgb(26 173 25 / 100%);
+$weuiBtnPlainPrimaryActiveColor: rgb(26 173 25 / 60%);
+$weuiBtnPlainPrimaryActiveBorderColor: rgb(26 173 25 / 60%);
+
+// Button Plain Default
+$weuiBtnPlainDefaultColor: rgb(53 53 53 / 100%);
+$weuiBtnPlainDefaultBorderColor: rgb(53 53 53 / 100%);
+$weuiBtnPlainDefaultActiveColor: rgb(53 53 53 / 60%);
+$weuiBtnPlainDefaultActiveBorderColor: rgb(53 53 53 / 60%);
+
+// Button Plain Warn
+$weuiBtnPlainWarnColor: #e64340;
+$weuiBtnPlainWarnBorderColor: #e64340;
+$weuiBtnPlainWarnActiveColor: rgba(230 67 64 / 60%);
+$weuiBtnPlainWarnActiveBorderColor: rgba(230 67 64 / 60%);
+
+.taro-button-core {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0 14px;
+  border: 1px solid rgb(0 0 0 / 20%);
+  border-radius: $weuiBtnBorderRadius * 2;
+  width: 100%;
+  appearance: none;
+  outline: 0;
+  background-color: $weuiBtnDefaultBg;
+  text-decoration: none;
+  font-size: $weuiBtnFontSize;
+  color: $weuiBtnDefaultFontColor;
+  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+
+  &:focus {
+    outline: 0;
+  }
+
+  &:not(.taro-btn-disabled):active {
+    background-color: $weuiBtnDefaultActiveBg;
+    color: $weuiBtnDefaultActiveFontColor;
+  }
+
+  &+& {
+    margin-top: $weuiBtnDefaultGap;
+  }
+
+  &.taro-btn-default {
+    background-color: $weuiBtnDefaultBg;
+    color: $weuiBtnDefaultFontColor;
+
+    &:not(.taro-btn-disabled):visited {
+      color: $weuiBtnDefaultFontColor;
+    }
+
+    &:not(.taro-btn-disabled):active {
+      background-color: $weuiBtnDefaultActiveBg;
+      color: $weuiBtnDefaultActiveFontColor;
+    }
+  }
+
+  &.taro-btn-mini {
+    display: inline-block;
+    padding: 0 26px;
+    width: auto;
+    vertical-align: middle;
+    font-size: $weuiBtnMiniFontSize;
+  }
+
+  &.taro-btn-plain,
+  &.taro-btn-plain.taro-btn-default,
+  &.taro-btn-plain.taro-btn-primary,
+  &.taro-btn-plain.taro-btn-warn {
+    border-width: 1px;
+    background-color: transparent;
+  }
+
+  &.taro-btn-disabled {
+    color: $weuiBtnDisabledFontColor;
+
+    &.taro-btn-default {
+      background-color: $weuiBtnDefaultDisabledBg;
+      color: $weuiBtnDefaultDisabledFontColor;
+    }
+
+    &.taro-btn-primary {
+      background-color: $weuiBtnPrimaryDisabledBg;
+    }
+
+    &.taro-btn-warn {
+      background-color: $weuiBtnWarnDisabledBg;
+    }
+  }
+
+  &.taro-btn-loading {
+
+    &.taro-btn-primary,
+    &.taro-btn-warn {
+      color: $weuiBtnActiveFontColor;
+    }
+
+    &.taro-btn-primary {
+      background-color: $weuiBtnPrimaryActiveBg;
+    }
+
+    &.taro-btn-warn {
+      background-color: $weuiBtnWarnActiveBg;
+    }
+  }
+
+  &.taro-btn-plain.taro-btn-primary {
+    border: 1px solid $weuiBtnPlainPrimaryBorderColor;
+    color: $weuiBtnPlainPrimaryColor;
+
+    &:not(.taro-btn-disabled):active {
+      border-color: $weuiBtnPlainPrimaryActiveBorderColor;
+      background-color: transparent;
+      color: $weuiBtnPlainPrimaryActiveColor;
+    }
+
+    &::after {
+      border-width: 0;
+    }
+  }
+
+  &.taro-btn-plain.taro-btn-warn {
+    border: 1px solid $weuiBtnPlainWarnBorderColor;
+    color: $weuiBtnPlainWarnColor;
+
+    &:not(.taro-btn-disabled):active {
+      border-color: $weuiBtnPlainWarnActiveBorderColor;
+      background-color: transparent;
+      color: $weuiBtnPlainWarnActiveColor;
+    }
+
+    &::after {
+      border-width: 0;
+    }
+  }
+
+  &.taro-btn-plain,
+  &.taro-btn-plain.taro-btn-default {
+    border: 1px solid $weuiBtnPlainDefaultBorderColor;
+    color: $weuiBtnPlainDefaultColor;
+
+    &:not(.taro-btn-disabled):active {
+      border-color: $weuiBtnPlainDefaultActiveBorderColor;
+      background-color: transparent;
+      color: $weuiBtnPlainDefaultActiveColor;
+    }
+
+    &::after {
+      border-width: 0;
+    }
+  }
+
+  &.taro-btn-primary {
+    background-color: $weuiBtnPrimaryBg;
+    color: #fff;
+
+    &:not(.taro-btn-disabled):visited {
+      color: $weuiBtnFontColor;
+    }
+
+    &:not(.taro-btn-disabled):active {
+      background-color: $weuiBtnPrimaryActiveBg;
+      color: $weuiBtnActiveFontColor;
+    }
+  }
+
+  &.taro-btn-warn {
+    background-color: $weuiBtnWarnBg;
+    color: #fff;
+
+    &:not(.taro-btn-disabled):visited {
+      color: $weuiBtnFontColor;
+    }
+
+    &:not(.taro-btn-disabled):active {
+      background-color: $weuiBtnWarnActiveBg;
+      color: $weuiBtnActiveFontColor;
+    }
+  }
+
+  &.taro-btn-plain.taro-btn-disabled.taro-btn-default {
+    border: 1px solid rgb(0 0 0 / 20%);
+    background-color: #f7f7f7;
+    color: rgb(0 0 0 / 30%);
+  }
+
+  &.taro-btn-plain.taro-btn-disabled.taro-btn-primary {
+    border: 1px solid rgb(0 0 0 / 20%);
+    background-color: #f7f7f7;
+    color: rgb(0 0 0 / 30%);
+  }
+
+  &.taro-btn-plain.taro-btn-disabled.taro-btn-warn {
+    border: 1px solid rgb(0 0 0 / 20%);
+    background-color: #f7f7f7;
+    color: rgb(0 0 0 / 30%);
+  }
+}

package/dist/original/components/icon/index.js

@@ -0,0 +1,36 @@
+import './style/index.scss';
+import classNames from 'classnames';
+import { omit, createForwardRefComponent } from '../../utils/index.js';
+import { jsx } from 'react/jsx-runtime';
+
+const Icon = props => {
+  let {
+    type,
+    className = '',
+    size = '23',
+    color,
+    forwardedRef
+  } = props;
+  if (type) type = type.replace(/_/g, '-');
+  const cls = classNames({
+    [`weui-icon-${type}`]: true
+  }, className);
+  const style = {
+    'font-size': size + 'px',
+    color: color
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/react-in-jsx-scope
+    jsx("i", {
+      ref: forwardedRef,
+      ...omit(props, ['type', 'className', 'forwardedRef']),
+      className: cls,
+      style: style
+    })
+  );
+};
+var index = createForwardRefComponent(Icon);
+
+export { index as default };
+//# sourceMappingURL=index.js.map

package/dist/original/components/icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/icon/index.tsx"],"sourcesContent":["import './style/index.scss'\n\nimport classNames from 'classnames'\n\nimport { createForwardRefComponent, omit } from '../../utils'\n\ninterface IProps {\n  type: string\n  color: string\n  size?: number | string\n  className?: string\n  forwardedRef?: React.MutableRefObject<HTMLLIElement>\n}\n\nconst Icon = (props: IProps) => {\n  let { type, className = '', size = '23', color, forwardedRef } = props\n  if (type) type = type.replace(/_/g, '-')\n  const cls = classNames(\n    {\n      [`weui-icon-${type}`]: true\n    },\n    className\n  )\n  const style = { 'font-size': size + 'px', color: color }\n\n  return (\n    // eslint-disable-next-line react/react-in-jsx-scope\n    <i ref={forwardedRef} {...omit(props, ['type', 'className', 'forwardedRef'])} className={cls} style={style} />\n  )\n}\nexport default createForwardRefComponent(Icon)\n"],"names":["Icon","props","type","className","size","color","forwardedRef","replace","cls","classNames","style","_jsx","ref","omit","createForwardRefComponent"],"mappings":";;;;;AAcA,MAAMA,IAAI,GAAIC,KAAa,IAAI;EAC7B,IAAI;IAAEC,IAAI;AAAEC,IAAAA,SAAS,GAAG,EAAE;AAAEC,IAAAA,IAAI,GAAG,IAAI;IAAEC,KAAK;AAAEC,IAAAA;AAAc,GAAA,GAAGL,KAAK;EACtE,IAAIC,IAAI,EAAEA,IAAI,GAAGA,IAAI,CAACK,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC;EACxC,MAAMC,GAAG,GAAGC,UAAU,CACpB;IACE,CAAC,CAAA,UAAA,EAAaP,IAAI,CAAA,CAAE,GAAG;GACxB,EACDC,SAAS,CACV;AACD,EAAA,MAAMO,KAAK,GAAG;IAAE,WAAW,EAAEN,IAAI,GAAG,IAAI;AAAEC,IAAAA,KAAK,EAAEA;GAAO;AAExD,EAAA;AAAA;AACE;IACAM,GAAA,CAAA,GAAA,EAAA;AAAGC,MAAAA,GAAG,EAAEN,YAAa;MAAA,GAAKO,IAAI,CAACZ,KAAK,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC;AAAEE,MAAAA,SAAS,EAAEK,GAAI;AAACE,MAAAA,KAAK,EAAEA;KAAM;AAAG;AAElH,CAAC;AACD,YAAeI,yBAAyB,CAACd,IAAI,CAAC;;;;"}