formula-treemap/dist/FormulaViewer/Details.js

한약재를 구성하는 재료(성분)들을 보기 좋게 시각화 한 리액트 컴포넌트 패키지입니다.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _templateObject;

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var Details = function Details(_ref) {
  var info = _ref.info,
      open = _ref.open,
      onClick = _ref.onClick;

  var _ref2 = info.groups[0] || {
    label: ''
  },
      label = _ref2.label;

  return /*#__PURE__*/_react.default.createElement(DetailsBlock, {
    "data-open": open
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "herb-name"
  }, label), /*#__PURE__*/_react.default.createElement("div", {
    className: "details"
  }, /*#__PURE__*/_react.default.createElement("p", null, "\uD574\uB2F9 \uC7AC\uB8CC\uC5D0 \uAD00\uD55C \uAC04\uB7B5 \uB610\uB294 \uC0C1\uC138 \uC124\uBA85 \uC601\uC5ED"), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "\uC124\uBA85 1"), /*#__PURE__*/_react.default.createElement("li", null, "\uC124\uBA85 1"), /*#__PURE__*/_react.default.createElement("li", null, "\uC124\uBA85 1"), /*#__PURE__*/_react.default.createElement("li", null, "\uC124\uBA85 1"), /*#__PURE__*/_react.default.createElement("li", null, "\uC124\uBA85 1"), /*#__PURE__*/_react.default.createElement("li", null, "\uC124\uBA85 1"), /*#__PURE__*/_react.default.createElement("li", null, "\uC124\uBA85 1"))), /*#__PURE__*/_react.default.createElement("div", {
    className: "close",
    onClick: onClick
  }, "\uB2EB\uAE30"));
};

var DetailsBlock = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: 400px;\n    bottom: 0;\n    padding: 32px;\n    display: flex;\n    flex-direction: column;\n    background: rgba(255,255,255, 0.9);\n    opacity: 0;\n    transition: all 0.3s ease;\n    &[data-open=\"true\"] {\n        left: 0;\n        opacity: 1;\n    }\n    \n    .herb-name {\n        font-size: 24px;\n        font-weight: 500;\n        margin: 32px 0;\n    }\n    .details {\n\n    }\n    .close {\n        cursor: pointer;\n        position: absolute;\n        top: 20px;\n        right: 20px;\n    }\n\n"])));

var _default = Details;
exports.default = _default;