@twreporter/react-components 8.18.0-rc.1 → 8.18.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.18.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.18.0-rc.1...@twreporter/react-components@8.18.0-rc.2) (2023-05-29)
+
+
+### Bug Fixes
+
+* set img height and width ([b3fe328](https://github.com/twreporter/twreporter-npm-packages/commit/b3fe328ff8e751cc670194e321b007c7b07a6efb))
+* use flex for auto fill ([117e492](https://github.com/twreporter/twreporter-npm-packages/commit/117e4920a3cd8e522c4d75366f9333f561ab2e71))
+
+
+
+
+
 # [8.18.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.18.0-rc.0...@twreporter/react-components@8.18.0-rc.1) (2023-05-23)
 
 

package/lib/mobile-member-role-card/index.js

@@ -1,13 +1,11 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -21,30 +19,24 @@ var _memberRole = require("@twreporter/core/lib/constants/member-role");
 
 var _paragraph = require("../text/paragraph");
 
-var _CardBgColor, _CardTextColor;
+var _CardBgColor, _CardTextColor, _CardMarkStyle;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var CardBgColor = (_CardBgColor = {}, _defineProperty(_CardBgColor, _memberRole.MEMBER_ROLE.explorer, _color.colorGrayscale.white), _defineProperty(_CardBgColor, _memberRole.MEMBER_ROLE.action_taker, _color.colorGrayscale.gray200), _defineProperty(_CardBgColor, _memberRole.MEMBER_ROLE.trailblazer, _color.colorGrayscale.gray900), _CardBgColor);
 var CardTextColor = (_CardTextColor = {}, _defineProperty(_CardTextColor, _memberRole.MEMBER_ROLE.explorer, _color.colorGrayscale.gray800), _defineProperty(_CardTextColor, _memberRole.MEMBER_ROLE.action_taker, _color.colorGrayscale.gray800), _defineProperty(_CardTextColor, _memberRole.MEMBER_ROLE.trailblazer, _color.colorGrayscale.white), _CardTextColor);
+var CardMarkStyle = (_CardMarkStyle = {}, _defineProperty(_CardMarkStyle, _memberRole.MEMBER_ROLE.explorer, {
+  width: '193px',
+  height: '120px'
+}), _defineProperty(_CardMarkStyle, _memberRole.MEMBER_ROLE.action_taker, {
+  width: '193px',
+  height: '157px'
+}), _defineProperty(_CardMarkStyle, _memberRole.MEMBER_ROLE.trailblazer, {
+  width: '166px',
+  height: '196px'
+}), _CardMarkStyle);
 
 var CardContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-member-role-card__CardContainer",
@@ -53,63 +45,58 @@ var CardContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   return props.bgColor;
 });
 
-var RelaticeDiv = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  displayName: "mobile-member-role-card__RelaticeDiv",
+var RelativeDiv = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-member-role-card__RelativeDiv",
   componentId: "sc-1n1fg2v-1"
 })(["position:relative;width:100%;height:100%;"]);
 
-var LogoImg = /*#__PURE__*/_styledComponents["default"].img.withConfig({
-  displayName: "mobile-member-role-card__LogoImg",
+var FlexContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-member-role-card__FlexContainer",
   componentId: "sc-1n1fg2v-2"
-})(["position:absolute;top:0;left:0;"]);
+})(["display:flex;flex-direction:column;height:100%;"]);
 
-var TitleImg = /*#__PURE__*/_styledComponents["default"].img.withConfig({
-  displayName: "mobile-member-role-card__TitleImg",
+var LogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-member-role-card__LogoContainer",
   componentId: "sc-1n1fg2v-3"
-})(["position:absolute;top:0;right:0;height:100%;"]);
+})([""]);
 
-var MarkImg = /*#__PURE__*/_styledComponents["default"].img.withConfig({
-  displayName: "mobile-member-role-card__MarkImg",
+var LogoImg = /*#__PURE__*/_styledComponents["default"].img.withConfig({
+  displayName: "mobile-member-role-card__LogoImg",
   componentId: "sc-1n1fg2v-4"
-})(["position:absolute;left:0;top:", "px;transform:translateY(", ");"], function (props) {
-  return props.top;
+})(["width:16px;height:17px;"]);
+
+var MarkContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "mobile-member-role-card__MarkContainer",
+  componentId: "sc-1n1fg2v-5"
+})(["flex:1;display:flex;justify-content:start;align-items:center;"]);
+
+var MarkImgs = /*#__PURE__*/_styledComponents["default"].img.withConfig({
+  displayName: "mobile-member-role-card__MarkImgs",
+  componentId: "sc-1n1fg2v-6"
+})(["width:", ";height:", ";"], function (props) {
+  return CardMarkStyle[props.role].width;
 }, function (props) {
-  return props.translateY;
+  return CardMarkStyle[props.role].height;
 });
 
 var DataContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-member-role-card__DataContainer",
-  componentId: "sc-1n1fg2v-5"
-})(["position:absolute;left:0;bottom:0;"]);
+  componentId: "sc-1n1fg2v-7"
+})([""]);
 
 var TextContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-member-role-card__TextContainer",
-  componentId: "sc-1n1fg2v-6"
+  componentId: "sc-1n1fg2v-8"
 })(["color:", ";padding-bottom:", "px;"], function (props) {
   return props.color;
 }, function (props) {
   return props.paddingBottom || 0;
 });
 
-function useWindowSize() {
-  var _useState = (0, _react.useState)([0, 0]),
-      _useState2 = _slicedToArray(_useState, 2),
-      size = _useState2[0],
-      setSize = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    function updateSize() {
-      setSize([window.innerWidth, window.innerHeight]);
-    }
-
-    window.addEventListener('resize', updateSize);
-    updateSize();
-    return function () {
-      return window.removeEventListener('resize', updateSize);
-    };
-  }, []);
-  return size;
-}
+var TitleImg = /*#__PURE__*/_styledComponents["default"].img.withConfig({
+  displayName: "mobile-member-role-card__TitleImg",
+  componentId: "sc-1n1fg2v-9"
+})(["position:absolute;top:0;right:0;height:100%;"]);
 
 var MobileMemberRoleCard = function MobileMemberRoleCard(_ref) {
   var _ref$role = _ref.role,
@@ -122,63 +109,17 @@ var MobileMemberRoleCard = function MobileMemberRoleCard(_ref) {
       joinDate = _ref$joinDate === void 0 ? '' : _ref$joinDate,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? '' : _ref$name;
-
-  var _useWindowSize = useWindowSize(),
-      _useWindowSize2 = _slicedToArray(_useWindowSize, 1),
-      width = _useWindowSize2[0];
-
-  var _useState3 = (0, _react.useState)(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      logoHeight = _useState4[0],
-      setLogoHeight = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(0),
-      _useState6 = _slicedToArray(_useState5, 2),
-      dataContainerDistanceToTop = _useState6[0],
-      setDataContainerDistanceToTop = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(0),
-      _useState8 = _slicedToArray(_useState7, 2),
-      markContainerTop = _useState8[0],
-      setMarkContainerTop = _useState8[1];
-
-  var _useState9 = (0, _react.useState)(''),
-      _useState10 = _slicedToArray(_useState9, 2),
-      markContainerTranslateY = _useState10[0],
-      setMarkContainerTranslateY = _useState10[1];
-
-  var logoContainerRef = (0, _react.useRef)();
-  var dataContainerRef = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    if (dataContainerRef.current) {
-      setDataContainerDistanceToTop(dataContainerRef.current.offsetTop);
-    }
-
-    if (logoContainerRef.current) {
-      setLogoHeight(logoContainerRef.current.offsetHeight);
-    }
-  }, [width, role]);
-  (0, _react.useEffect)(function () {
-    setMarkContainerTop(Math.round((dataContainerDistanceToTop - logoHeight) / 2));
-    setMarkContainerTranslateY("calc((-50% + ".concat(logoHeight, "px))"));
-  }, [logoHeight, dataContainerDistanceToTop]);
   var logoUrl = "https://www.twreporter.org/assets/user-role-card/".concat(releaseBranch, "/").concat(role, "_logo.png");
   var titleUrl = "https://www.twreporter.org/assets/user-role-card/".concat(releaseBranch, "/").concat(role, "_title.png");
   var markUrl = "https://www.twreporter.org/assets/user-role-card/".concat(releaseBranch, "/").concat(role, "_mark.png");
   return /*#__PURE__*/_react["default"].createElement(CardContainer, {
     bgColor: CardBgColor[role]
-  }, /*#__PURE__*/_react["default"].createElement(RelaticeDiv, null, /*#__PURE__*/_react["default"].createElement(LogoImg, {
-    ref: logoContainerRef,
+  }, /*#__PURE__*/_react["default"].createElement(RelativeDiv, null, /*#__PURE__*/_react["default"].createElement(FlexContainer, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(LogoImg, {
     src: logoUrl
-  }), /*#__PURE__*/_react["default"].createElement(TitleImg, {
-    src: titleUrl
-  }), /*#__PURE__*/_react["default"].createElement(MarkImg, {
-    top: markContainerTop,
-    src: markUrl,
-    translateY: markContainerTranslateY
-  }), /*#__PURE__*/_react["default"].createElement(DataContainer, {
-    ref: dataContainerRef
-  }, role !== _memberRole.MEMBER_ROLE.explorer && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(TextContainer, {
+  })), /*#__PURE__*/_react["default"].createElement(MarkContainer, null, /*#__PURE__*/_react["default"].createElement(MarkImgs, {
+    role: role,
+    src: markUrl
+  })), /*#__PURE__*/_react["default"].createElement(DataContainer, null, role !== _memberRole.MEMBER_ROLE.explorer && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(TextContainer, {
     color: _color.colorGrayscale.gray500
   }, /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
     text: '姓名'
@@ -204,7 +145,9 @@ var MobileMemberRoleCard = function MobileMemberRoleCard(_ref) {
     color: CardTextColor[role]
   }, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
     text: joinDate
-  })))));
+  })))), /*#__PURE__*/_react["default"].createElement(TitleImg, {
+    src: titleUrl
+  })));
 };
 
 MobileMemberRoleCard.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.18.0-rc.1",
+  "version": "8.18.0-rc.2",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -44,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "93c8c1b4793c80d524e62feecc0abcb0148cdbf6"
+  "gitHead": "4aee97e500d4cd1fa149bb0b151be5d114b491a8"
 }