@gizwits/vantui/lib/direction-button/index.js

机智云组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _components = require("@tarojs/components");
var _icon = _interopRequireDefault(require("../icon"));
require("./index.css");
var _jsxRuntime = require("react/jsx-runtime");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var disc = 'https://goms-1251025085.cos.ap-guangzhou.myqcloud.com/template_editor/direction-button/disc-min.png';
var saucer = 'https://goms-1251025085.cos.ap-guangzhou.myqcloud.com/template_editor/direction-button/saucer-min.png';
var styles = {
  roundView: {
    width: '200px',
    height: '200px',
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  },
  discIcon: {
    width: '100%',
    height: '100%'
  },
  saucerIcon: {
    width: '40%',
    height: '40%',
    position: 'absolute'
  },
  middleView: {
    position: 'absolute',
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'column'
  },
  middleIcon: {
    width: '40px',
    height: '40px'
  }
};
var RenderItem = function RenderItem(_ref) {
  var icon = _ref.icon,
    onClick = _ref.onClick,
    type = _ref.type,
    color = _ref.color,
    size = _ref.size;
  if (!icon || !onClick) return null;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
    className: "direction-button-item",
    style: (0, _defineProperty2.default)({
      position: 'absolute'
    }, type, '15%'),
    onClick: onClick,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
      size: size,
      color: color,
      name: icon
    })
  });
};
var Round = function Round(_ref3) {
  var _ref3$leftIcon = _ref3.leftIcon,
    leftIcon = _ref3$leftIcon === void 0 ? 'arrow-left' : _ref3$leftIcon,
    _ref3$leftClick = _ref3.leftClick,
    leftClick = _ref3$leftClick === void 0 ? function () {} : _ref3$leftClick,
    _ref3$topClick = _ref3.topClick,
    topClick = _ref3$topClick === void 0 ? function () {} : _ref3$topClick,
    _ref3$topIcon = _ref3.topIcon,
    topIcon = _ref3$topIcon === void 0 ? 'arrow-up' : _ref3$topIcon,
    _ref3$rightClick = _ref3.rightClick,
    rightClick = _ref3$rightClick === void 0 ? function () {} : _ref3$rightClick,
    _ref3$rightIcon = _ref3.rightIcon,
    rightIcon = _ref3$rightIcon === void 0 ? 'arrow' : _ref3$rightIcon,
    _ref3$bottomClick = _ref3.bottomClick,
    bottomClick = _ref3$bottomClick === void 0 ? function () {} : _ref3$bottomClick,
    _ref3$bottomIcon = _ref3.bottomIcon,
    bottomIcon = _ref3$bottomIcon === void 0 ? 'arrow-down' : _ref3$bottomIcon,
    _ref3$iconSize = _ref3.iconSize,
    iconSize = _ref3$iconSize === void 0 ? 30 : _ref3$iconSize,
    _ref3$size = _ref3.size,
    size = _ref3$size === void 0 ? '100%' : _ref3$size,
    _ref3$iconColor = _ref3.iconColor,
    iconColor = _ref3$iconColor === void 0 ? '#656565' : _ref3$iconColor;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
    style: _objectSpread(_objectSpread({}, styles.roundView), {
      width: size,
      height: size
    }),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Image, {
      src: disc,
      style: styles.discIcon
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Image, {
      src: saucer,
      style: styles.saucerIcon
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderItem, {
      color: iconColor,
      size: iconSize,
      icon: leftIcon,
      onClick: leftClick,
      type: "left"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderItem, {
      color: iconColor,
      size: iconSize,
      icon: rightIcon,
      onClick: rightClick,
      type: "right"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderItem, {
      color: iconColor,
      size: iconSize,
      icon: bottomIcon,
      onClick: bottomClick,
      type: "bottom"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderItem, {
      color: iconColor,
      size: iconSize,
      icon: topIcon,
      onClick: topClick,
      type: "top"
    })]
  });
};
var _default = Round;
exports.default = _default;