@zat-design/sisyphus-react 3.0.13

package/es/ProDrawerForm/components/ProDrawer/index.js

@@ -0,0 +1,204 @@
+import "antd/es/drawer/style";
+import _Drawer from "antd/es/drawer";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "antd/es/modal/style";
+import _Modal from "antd/es/modal";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { CloseOutlined } from '@ant-design/icons';
+import React, { useCallback, useState, useRef } from 'react';
+import { useScroll } from 'ahooks';
+import { isArray } from 'lodash';
+/**
+ * 抽屉组件
+ */
+var ProDrawer = function ProDrawer(_ref) {
+  var form = _ref.form,
+    title = _ref.title,
+    width = _ref.width,
+    footer = _ref.footer,
+    visible = _ref.visible,
+    disabled = _ref.disabled,
+    maskClosable = _ref.maskClosable,
+    isConfirmClose = _ref.isConfirmClose,
+    isConfirmCloseModalProps = _ref.isConfirmCloseModalProps,
+    okText = _ref.okText,
+    cancelText = _ref.cancelText,
+    okLoading = _ref.okLoading,
+    okDisabled = _ref.okDisabled,
+    onOk = _ref.onOk,
+    onCancel = _ref.onCancel,
+    children = _ref.children,
+    className = _ref.className,
+    drawerProps = _ref.drawerProps;
+  var ref = useRef(null);
+  var modalRef = useRef(null);
+  var _ref2 = useScroll(ref) || {},
+    top = _ref2.top;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    toggleLoading = _useState2[1];
+  var noRenderFooter = disabled || footer === false || footer === null;
+  var onConfirm = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (disabled || !isConfirmClose) {
+            onCancel && onCancel();
+          } else if (!modalRef.current) {
+            modalRef.current = _Modal.confirm(_objectSpread({
+              className: 'width430',
+              title: '确认关闭当前页面',
+              okText: '确定',
+              cancelText: '取消',
+              content: '关闭当前页面内容不会被保存，需要点击“保存”按钮进行保存',
+              onOk: function onOk() {
+                onCancel && onCancel();
+              },
+              onCancel: function onCancel() {
+                modalRef.current = null;
+              }
+            }, isConfirmCloseModalProps));
+          }
+        case 1:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [onCancel, modalRef.current]);
+  var handleFinish = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var values, _error$errorFields, _error$errorFields$;
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.prev = 0;
+          if (!visible) {
+            _context2.next = 24;
+            break;
+          }
+          _context2.next = 4;
+          return form.validateFields();
+        case 4:
+          values = _context2.sent;
+          if (!(okLoading !== undefined)) {
+            _context2.next = 15;
+            break;
+          }
+          _context2.t0 = onOk;
+          if (!_context2.t0) {
+            _context2.next = 12;
+            break;
+          }
+          _context2.next = 10;
+          return onOk(values, form);
+        case 10:
+          _context2.t1 = _context2.sent;
+          _context2.t0 = _context2.t1 === true;
+        case 12:
+          if (!_context2.t0) {
+            _context2.next = 14;
+            break;
+          }
+          onCancel && onCancel();
+        case 14:
+          return _context2.abrupt("return", true);
+        case 15:
+          toggleLoading(true);
+          _context2.t2 = onOk;
+          if (!_context2.t2) {
+            _context2.next = 22;
+            break;
+          }
+          _context2.next = 20;
+          return onOk(values, form);
+        case 20:
+          _context2.t3 = _context2.sent;
+          _context2.t2 = _context2.t3 === true;
+        case 22:
+          if (!_context2.t2) {
+            _context2.next = 24;
+            break;
+          }
+          onCancel && onCancel();
+        case 24:
+          _context2.next = 29;
+          break;
+        case 26:
+          _context2.prev = 26;
+          _context2.t4 = _context2["catch"](0);
+          form.scrollToField(_context2.t4 === null || _context2.t4 === void 0 ? void 0 : (_error$errorFields = _context2.t4.errorFields) === null || _error$errorFields === void 0 ? void 0 : (_error$errorFields$ = _error$errorFields[0]) === null || _error$errorFields$ === void 0 ? void 0 : _error$errorFields$.name);
+        case 29:
+          _context2.prev = 29;
+          toggleLoading(false);
+          return _context2.finish(29);
+        case 32:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[0, 26, 29, 32]]);
+  })), [onOk, onCancel, form]);
+  /**
+   * 描述：默认底部操作按钮
+   *
+   */
+  var defaultFooter = /*#__PURE__*/React.createElement("div", {
+    className: "pro-drawer-footer"
+  }, /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    onClick: handleFinish,
+    loading: okLoading !== null && okLoading !== void 0 ? okLoading : loading,
+    disabled: okDisabled !== null && okDisabled !== void 0 ? okDisabled : loading
+  }, okText), /*#__PURE__*/React.createElement(_Button, {
+    onClick: onCancel
+  }, cancelText));
+  var renderFooter = function renderFooter() {
+    if (noRenderFooter) {
+      return null;
+    }
+    if ( /*#__PURE__*/React.isValidElement(footer)) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "pro-drawer-footer"
+      }, footer);
+    }
+    if (isArray(footer) && (footer === null || footer === void 0 ? void 0 : footer.length)) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "pro-drawer-footer"
+      }, footer.map(function (item) {
+        if ( /*#__PURE__*/React.isValidElement(item)) {
+          return item;
+        }
+        return false;
+      }));
+    }
+    return defaultFooter;
+  };
+  return /*#__PURE__*/React.createElement(_Drawer, _objectSpread({
+    width: width,
+    open: visible,
+    maskClosable: maskClosable,
+    placement: "right",
+    className: "pro-drawer ".concat(className !== null && className !== void 0 ? className : ''),
+    closable: false,
+    onClose: onCancel
+  }, drawerProps), /*#__PURE__*/React.createElement("div", {
+    className: "pro-drawer-close",
+    onClick: onConfirm
+  }, /*#__PURE__*/React.createElement(CloseOutlined, {
+    className: "close-icon"
+  })), title ? /*#__PURE__*/React.createElement("div", {
+    className: "pro-drawer-title ".concat(top > 0 ? 'pro-drawer-scrolling' : '')
+  }, title) : null, /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "pro-drawer-content",
+    style: {
+      marginTop: title ? 64 : 0,
+      paddingBottom: noRenderFooter ? 0 : 64,
+      height: "calc(100% - ".concat(title ? 64 : 0, "px)")
+    }
+  }, children), renderFooter());
+};
+export default ProDrawer;

package/es/ProDrawerForm/components/ProModal/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { ProDrawerFormPropsType } from '../../propsType';
+/**
+ * 弹窗组件
+ */
+declare const ProModal: FC<ProDrawerFormPropsType>;
+export default ProModal;

package/es/ProDrawerForm/components/ProModal/index.js

@@ -0,0 +1,161 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "antd/es/modal/style";
+import _Modal from "antd/es/modal";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useState, useRef } from 'react';
+import { useScroll } from 'ahooks';
+import { isArray } from 'lodash';
+/**
+ * 弹窗组件
+ */
+var ProModal = function ProModal(_ref) {
+  var _ref$current;
+  var form = _ref.form,
+    title = _ref.title,
+    width = _ref.width,
+    visible = _ref.visible,
+    footer = _ref.footer,
+    disabled = _ref.disabled,
+    maskClosable = _ref.maskClosable,
+    okText = _ref.okText,
+    cancelText = _ref.cancelText,
+    okLoading = _ref.okLoading,
+    okDisabled = _ref.okDisabled,
+    onOk = _ref.onOk,
+    onCancel = _ref.onCancel,
+    children = _ref.children,
+    className = _ref.className,
+    modalProps = _ref.modalProps;
+  var ref = useRef(null);
+  var _ref2 = useScroll((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentNode) || {},
+    top = _ref2.top;
+  var noRenderFooter = disabled || footer === false || footer === null;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    toggleLoading = _useState2[1];
+  var handleFinish = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var values, _error$errorFields, _error$errorFields$;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          if (!visible) {
+            _context.next = 24;
+            break;
+          }
+          _context.next = 4;
+          return form.validateFields();
+        case 4:
+          values = _context.sent;
+          if (!(okLoading !== undefined)) {
+            _context.next = 15;
+            break;
+          }
+          _context.t0 = onOk;
+          if (!_context.t0) {
+            _context.next = 12;
+            break;
+          }
+          _context.next = 10;
+          return onOk(values, form);
+        case 10:
+          _context.t1 = _context.sent;
+          _context.t0 = _context.t1 === true;
+        case 12:
+          if (!_context.t0) {
+            _context.next = 14;
+            break;
+          }
+          onCancel && onCancel();
+        case 14:
+          return _context.abrupt("return", true);
+        case 15:
+          toggleLoading(true);
+          _context.t2 = onOk;
+          if (!_context.t2) {
+            _context.next = 22;
+            break;
+          }
+          _context.next = 20;
+          return onOk(values, form);
+        case 20:
+          _context.t3 = _context.sent;
+          _context.t2 = _context.t3 === true;
+        case 22:
+          if (!_context.t2) {
+            _context.next = 24;
+            break;
+          }
+          onCancel && onCancel();
+        case 24:
+          _context.next = 29;
+          break;
+        case 26:
+          _context.prev = 26;
+          _context.t4 = _context["catch"](0);
+          form.scrollToField(_context.t4 === null || _context.t4 === void 0 ? void 0 : (_error$errorFields = _context.t4.errorFields) === null || _error$errorFields === void 0 ? void 0 : (_error$errorFields$ = _error$errorFields[0]) === null || _error$errorFields$ === void 0 ? void 0 : _error$errorFields$.name);
+        case 29:
+          _context.prev = 29;
+          toggleLoading(false);
+          return _context.finish(29);
+        case 32:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 26, 29, 32]]);
+  })), [onOk, onCancel, form]);
+  /**
+   * 描述：默认底部操作按钮
+   *
+   */
+  var defaultFooter = /*#__PURE__*/React.createElement("div", {
+    className: "pro-modal-footer"
+  }, /*#__PURE__*/React.createElement(_Button, {
+    onClick: onCancel
+  }, cancelText), /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    onClick: handleFinish,
+    loading: okLoading !== null && okLoading !== void 0 ? okLoading : loading,
+    disabled: okDisabled !== null && okDisabled !== void 0 ? okDisabled : loading
+  }, okText));
+  var renderFooter = function renderFooter() {
+    if (noRenderFooter) {
+      return null;
+    }
+    if ( /*#__PURE__*/React.isValidElement(footer)) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "pro-drawer-footer"
+      }, footer);
+    }
+    if (isArray(footer) && (footer === null || footer === void 0 ? void 0 : footer.length)) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "pro-drawer-footer"
+      }, footer.map(function (item) {
+        if ( /*#__PURE__*/React.isValidElement(item)) {
+          return item;
+        }
+        return false;
+      }));
+    }
+    return defaultFooter;
+  };
+  return /*#__PURE__*/React.createElement(_Modal, _objectSpread({
+    className: "pro-modal ".concat(top > 0 ? 'pro-modal-scrolling' : '', " ").concat(className !== null && className !== void 0 ? className : ''),
+    title: title,
+    width: width,
+    open: visible,
+    maskClosable: maskClosable,
+    onCancel: onCancel,
+    footer: renderFooter(),
+    okText: okText,
+    cancelText: cancelText
+  }, modalProps), /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, children));
+};
+export default ProModal;

package/es/ProDrawerForm/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ProDrawer } from './ProDrawer';
+export { default as ProModal } from './ProModal';

package/es/ProDrawerForm/components/index.js

@@ -0,0 +1,2 @@
+export { default as ProDrawer } from './ProDrawer';
+export { default as ProModal } from './ProModal';

package/es/ProDrawerForm/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { FormInstance } from 'antd/es/form/Form';
+import { ProDrawerFormPropsType } from './propsType';
+declare const ProDrawerForm: React.ForwardRefExoticComponent<ProDrawerFormPropsType & React.RefAttributes<FormInstance<any>>>;
+export default ProDrawerForm;

package/es/ProDrawerForm/index.js

@@ -0,0 +1,65 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
+import { ProDrawer, ProModal } from './components';
+import ProForm from '../ProForm';
+import { transformBySize } from './utils';
+var ProDrawerForm = /*#__PURE__*/forwardRef(function (props, ref) {
+  var visible = props.visible;
+  var open = props.open,
+    showType = props.showType,
+    size = props.size,
+    disabled = props.disabled,
+    originalForm = props.form,
+    proFormProps = props.proFormProps,
+    onCancel = props.onCancel,
+    children = props.children;
+  visible = open !== null && open !== void 0 ? open : visible;
+  var width = props.width;
+  if (!width && size) {
+    width = transformBySize(size);
+  }
+  // 强转string 类型
+  if (!Number.isNaN(+width)) {
+    width = "".concat(width, "px");
+  }
+  var _Form$useForm = _Form.useForm(originalForm),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var handleCancel = function handleCancel() {
+    form.resetFields();
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  };
+  // 暴露form实例给用户
+  useImperativeHandle(ref, function () {
+    return form;
+  });
+  var Com = useMemo(function () {
+    return {
+      Drawer: ProDrawer,
+      Modal: ProModal
+    }[showType];
+  }, [showType]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, visible ? /*#__PURE__*/React.createElement(Com, _objectSpread(_objectSpread({}, props), {}, {
+    visible: visible,
+    form: form,
+    width: width,
+    onCancel: handleCancel
+  }), children || /*#__PURE__*/React.createElement(ProForm, _objectSpread({
+    form: form,
+    disabled: disabled,
+    footer: false
+  }, proFormProps))) : null);
+});
+ProDrawerForm.defaultProps = {
+  showType: 'Drawer',
+  size: 'middle',
+  isConfirmClose: true,
+  maskClosable: false,
+  okText: '确认',
+  cancelText: '取消',
+  proFormProps: {}
+};
+export default ProDrawerForm;

package/es/ProDrawerForm/propsType.d.ts

@@ -0,0 +1,88 @@
+import React, { ReactNode } from 'react';
+import type { ModalProps, DrawerProps, FormInstance } from 'antd';
+import { ProFormProps } from '../ProForm/propsType';
+export type DrawerSizePropsType = 'small' | 'middle' | 'large';
+export type ShowTypePropsType = 'Modal' | 'Drawer';
+export interface ProDrawerFormRef {
+    form: FormInstance<any>;
+}
+export interface ProDrawerFormPropsType {
+    /** @name 内部form */
+    form?: FormInstance<any>;
+    /** @name 自定义className */
+    className?: string;
+    /** @name 控制显示隐藏 */
+    visible?: ModalProps['open'] | DrawerProps['open'];
+    /** @name 控制显示隐藏 */
+    open: ModalProps['open'] | DrawerProps['open'];
+    /** @name 标题 */
+    title?: ModalProps['title'] | DrawerProps['title'];
+    /** @name 点击蒙层是否允许关闭 */
+    maskClosable?: ModalProps['maskClosable'] | DrawerProps['maskClosable'];
+    /** @name 禁止选项 */
+    disabled?: boolean | undefined;
+    /** @name 宽度 */
+    width?: ModalProps['width'] | DrawerProps['width'];
+    /**
+     * @name 取消按钮文字
+     */
+    cancelText?: ModalProps['cancelText'];
+    /**
+     * @name 确认按钮文字
+     */
+    okText?: ModalProps['okText'];
+    /**
+     * @name 确认按钮loading
+     */
+    okLoading?: boolean;
+    /**
+     * @name 确认按钮disabled
+     */
+    okDisabled?: boolean;
+    /** @name 显示方式 */
+    showType?: ShowTypePropsType;
+    /** @name 尺寸 */
+    size?: DrawerSizePropsType;
+    /**
+     * @name自动选中第一项
+     * @description 只对有input的类型有效
+     */
+    autoFocusFirstInput?: boolean;
+    /**
+     * @name 关闭时是否开启二次确认弹框
+     * @description 只对Drawer的类型有效
+     */
+    isConfirmClose?: boolean;
+    /**
+     * @name 关闭时二次确认弹框的属性
+     * @description 只对Drawer的类型有效
+     */
+    isConfirmCloseModalProps?: ModalProps;
+    /**
+     * @name 底部默认取消按钮事件
+     */
+    onCancel?: () => Promise<boolean | void> | boolean | void;
+    /**
+     * @name 底部默认确定按钮事件
+     */
+    onOk?: (values?: any, form?: FormInstance) => Promise<boolean | void> | boolean | void;
+    /**
+     * @name 底部自定义按钮配置
+     */
+    footer?: ReactNode | ReactNode[];
+    /**
+     * @name proForm的属性 配置后children不展示
+     */
+    proFormProps?: Omit<ProFormProps, 'form'>;
+    /**
+     * 不支持 'visible'，请使用全局的 visible
+     * @name 弹框的属性
+     */
+    modalProps?: Omit<ModalProps, 'visible'>;
+    /**
+     * 不支持 'visible'，请使用全局的 visible
+     * @name 抽屉的属性
+     */
+    drawerProps?: Omit<DrawerProps, 'visible'>;
+    children?: React.ReactNode;
+}

package/es/ProDrawerForm/propsType.js

@@ -0,0 +1 @@
+export {};

package/es/ProDrawerForm/style/index.less

@@ -0,0 +1,125 @@
+.pro-drawer {
+  .pro-drawer-close {
+    position: absolute;
+    top: 6px;
+    left: -37px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 38px;
+    color: #fff;
+    cursor: pointer;
+    .close-icon {
+      position: relative;
+      left: 4px;
+      z-index: 1;
+      color: #343434;
+      font-size: 16px;
+      transform: translateZ(100px);
+      &:hover {
+        color: var(--zaui-brand);
+      }
+    }
+  }
+
+  .pro-drawer-close::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    border-radius: 4px 0px 0px 4px;
+    transform: perspective(0.15em) rotateY(-2deg);
+    content: '';
+  }
+
+  .pro-drawer-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 64px;
+    padding: var(--zaui-space-size-md) var(--zaui-space-size-lg);
+    color: var(--zaui-text);
+    font-weight: 600;
+    font-size: var(--zaui-font-size-xxl);
+    background-color: var(--zaui-base-bg);
+  }
+
+  .pro-drawer-scrolling {
+    z-index: 1;
+    box-shadow: -12px 15px 15px -18px #d8d8d8;
+  }
+
+  .pro-drawer-content {
+    flex: 1;
+    width: 100%;
+    padding: var(--zaui-space-size-md) var(--zaui-space-size-lg);
+    padding-top: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .pro-drawer-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    width: 100%;
+    padding: var(--zaui-space-size-md) var(--zaui-space-size-lg);
+    background-color: var(--zaui-base-bg);
+    box-shadow: 8px 2px 8px 0 rgba(216, 216, 216, 1);
+
+    button {
+      margin-right: var(--zaui-space-size-sm);
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .ant-drawer-body {
+    height: 100vh;
+    padding: 0;
+    overflow-y: hidden;
+  }
+
+  .ant-drawer-content {
+    position: static;
+  }
+
+  .ant-drawer-close {
+    display: none;
+  }
+}
+
+.pro-modal {
+  .ant-modal-header {
+    padding: var(--zaui-space-size-md, 16px);
+    border-bottom: none;
+  }
+
+  .ant-modal-footer {
+    padding: var(--zaui-space-size-md, 16px);
+    border-top: none;
+  }
+
+  .ant-modal-body {
+    max-height: 450px;
+    padding: 0 var(--zaui-space-size-md, 16px);
+    padding-top: 0;
+    overflow: auto;
+  }
+
+}
+
+.pro-modal-scrolling {
+  z-index: 1;
+
+  .ant-modal-header {
+    box-shadow: -12px 15px 15px -18px #d8d8d8;
+  }
+}

package/es/ProDrawerForm/utils/index.d.ts

@@ -0,0 +1,6 @@
+import { DrawerSizePropsType } from '../propsType';
+/**
+ * 将枚举值转成数值px，暴露枚举，隐藏真实数值，暂时不让用户自定义
+ * @param size 设计规范的三个尺寸  460 960 1200 对应 'small' | 'middle' | 'large'
+ */
+export declare const transformBySize: (size: DrawerSizePropsType) => number;

package/es/ProDrawerForm/utils/index.js

@@ -0,0 +1,16 @@
+/**
+ * 将枚举值转成数值px，暴露枚举，隐藏真实数值，暂时不让用户自定义
+ * @param size 设计规范的三个尺寸  460 960 1200 对应 'small' | 'middle' | 'large'
+ */
+export var transformBySize = function transformBySize(size) {
+  switch (size) {
+    case 'small':
+      return 460;
+    case 'middle':
+      return 960;
+    case 'large':
+      return 1200;
+    default:
+      return 960;
+  }
+};