web-sdk-im/dist/components/ChatSettings.js

React js components

"use strict";

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

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

var _clsx = _interopRequireDefault(require("clsx"));

var _styles = require("@material-ui/core/styles");

var _Box = _interopRequireDefault(require("@material-ui/core/Box"));

var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));

var _KeyboardArrowDown = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDown"));

var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));

var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));

var _Edit = _interopRequireDefault(require("@material-ui/icons/Edit"));

var _ThumbUp = _interopRequireDefault(require("@material-ui/icons/ThumbUp"));

var _FormatPaint = _interopRequireDefault(require("@material-ui/icons/FormatPaint"));

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

var useStyles = (0, _styles.makeStyles)(function () {
  return {
    avatar: {
      width: 100,
      height: 100,
      margin: 'auto'
    },
    name: {
      marginTop: 14,
      fontSize: 22,
      fontWeight: 'bold'
    },
    settingHeader: {
      '&:hover': {
        backgroundColor: 'rgba(0,0,0,0.08)'
      }
    },
    settingHead: {
      textTransform: 'uppercase',
      color: 'rgba(0,0,0,0.34)',
      fontWeight: 'bold',
      fontSize: 13,
      '& + *': {
        color: 'rgba(0,0,0,0.34)',
        fontSize: 28
      }
    },
    settingLabel: {
      fontSize: 13
    },
    settingIcon: {
      padding: 6,
      borderRadius: '50%',
      backgroundColor: 'rgba(0,0,0,0.04)',
      width: 32,
      height: 32
    },
    blue: {
      color: 'rgb(0, 153, 255)',
      background: 'none'
    }
  };
});

var SettingHeader = function SettingHeader(_ref) {
  var children = _ref.children,
      opened = _ref.opened;
  var styles = useStyles();
  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    p: '14px',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    className: styles.settingHeader
  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    className: styles.settingHead
  }, children), opened ? /*#__PURE__*/_react["default"].createElement(_KeyboardArrowDown["default"], null) : /*#__PURE__*/_react["default"].createElement(_KeyboardArrowLeft["default"], null));
};

var Setting = function Setting(_ref2) {
  var label = _ref2.label,
      icon = _ref2.icon,
      blue = _ref2.blue;
  var styles = useStyles();
  return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    height: '44px',
    pl: '14px',
    pr: '12px',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center'
  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    variant: 'body2'
  }, label), /*#__PURE__*/_react["default"].cloneElement(icon, {
    className: (0, _clsx["default"])(styles.settingIcon, blue && styles.blue)
  }));
};

var ChatSettings = function ChatSettings() {
  var styles = useStyles();
  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    p: '14px 14px 16px 14px',
    textAlign: 'center'
  }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
    className: styles.avatar,
    src: 'https://i.pravatar.cc/300?img=13'
  }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
    className: styles.name,
    variant: 'h1',
    align: 'center'
  }, "Imaad Casey")), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), /*#__PURE__*/_react["default"].createElement(SettingHeader, {
    opened: true
  }, "Options"), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    pb: 2
  }, /*#__PURE__*/_react["default"].createElement(Setting, {
    label: 'Search in Conversation',
    icon: /*#__PURE__*/_react["default"].createElement(_Search["default"], null)
  }), /*#__PURE__*/_react["default"].createElement(Setting, {
    label: 'Edit Nicknames',
    icon: /*#__PURE__*/_react["default"].createElement(_Edit["default"], null)
  }), /*#__PURE__*/_react["default"].createElement(Setting, {
    label: 'Change Theme',
    icon: /*#__PURE__*/_react["default"].createElement(_FormatPaint["default"], null),
    blue: true
  }), /*#__PURE__*/_react["default"].createElement(Setting, {
    label: 'Change Emoji',
    icon: /*#__PURE__*/_react["default"].createElement(_ThumbUp["default"], null),
    blue: true
  })), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), /*#__PURE__*/_react["default"].createElement(SettingHeader, null, "Privacy & Support"), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), /*#__PURE__*/_react["default"].createElement(SettingHeader, null, "Shared files"), /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), /*#__PURE__*/_react["default"].createElement(SettingHeader, null, "Shared Photos"));
};

var _default = ChatSettings;
/*
import React from 'react';
import cx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import Search from '@material-ui/icons/Search';
import Edit from '@material-ui/icons/Edit';
import ThumbUp from '@material-ui/icons/ThumbUp';
import FormatPaint from '@material-ui/icons/FormatPaint';

const useStyles = makeStyles(() => ({
  avatar: {
    width: 100,
    height: 100,
    margin: 'auto',
  },
  name: {
    marginTop: 14,
    fontSize: 22,
    fontWeight: 'bold',
  },
  settingHeader: {
    '&:hover': {
      backgroundColor: 'rgba(0,0,0,0.08)',
    },
  },
  settingHead: {
    textTransform: 'uppercase',
    color: 'rgba(0,0,0,0.34)',
    fontWeight: 'bold',
    fontSize: 13,
    '& + *': {
      color: 'rgba(0,0,0,0.34)',
      fontSize: 28,
    },
  },
  settingLabel: {
    fontSize: 13,
  },
  settingIcon: {
    padding: 6,
    borderRadius: '50%',
    backgroundColor: 'rgba(0,0,0,0.04)',
    width: 32,
    height: 32,
  },
  blue: {
    color: 'rgb(0, 153, 255)',
    background: 'none',
  },
}));

const SettingHeader = ({ children, opened }) => {
  const styles = useStyles();
  return (
    <Box
      p={'14px'}
      display={'flex'}
      justifyContent={'space-between'}
      alignItems={'center'}
      className={styles.settingHeader}
    >
      <Typography className={styles.settingHead}>{children}</Typography>
      {opened ? <KeyboardArrowDown /> : <KeyboardArrowLeft />}
    </Box>
  );
};

const Setting = ({ label, icon, blue }) => {
  const styles = useStyles();
  return (
    <Box
      height={'44px'}
      pl={'14px'}
      pr={'12px'}
      display={'flex'}
      justifyContent={'space-between'}
      alignItems={'center'}
    >
      <Typography variant={'body2'}>{label}</Typography>
      {React.cloneElement(icon, {
        className: cx(styles.settingIcon, blue && styles.blue),
      })}
    </Box>
  );
};

const ChatSettings = () => {
  const styles = useStyles();
  return (
    <div>
      <Box p={'14px 14px 16px 14px'} textAlign={'center'}>
        <Avatar
          className={styles.avatar}
          src={'https://i.pravatar.cc/300?img=13'}
        />
        <Typography className={styles.name} variant={'h1'} align={'center'}>
          Imaad Casey
        </Typography>
      </Box>
      <Divider />
      <SettingHeader opened>Options</SettingHeader>
      <Box pb={2}>
        <Setting label={'Search in Conversation'} icon={<Search />} />
        <Setting label={'Edit Nicknames'} icon={<Edit />} />
        <Setting label={'Change Theme'} icon={<FormatPaint />} blue />
        <Setting label={'Change Emoji'} icon={<ThumbUp />} blue />
      </Box>
      <Divider />
      <SettingHeader>Privacy & Support</SettingHeader>
      <Divider />
      <SettingHeader>Shared files</SettingHeader>
      <Divider />
      <SettingHeader>Shared Photos</SettingHeader>
    </div>
  );
};

export default ChatSettings;
*/

exports["default"] = _default;