@sheinoutmobile/shineoutmobile 1.8.2

package/src/component/dialog/dialog.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import Container from '../../tools/create-body-container';
+import { prohibited, restore } from '../../tools/limit-document-scroll';
+
+import Alert from './kind/dialog-alert';
+import Confirm from './kind/dialog-confirm';
+
+
+const container = new Container('dialog', { background: true });
+
+const unMount = () => {
+  unmountComponentAtNode(container.getEl());
+  container.hidden();
+  restore();
+};
+
+const Dialog = {
+  alert(content) {
+    return new Promise((resolve) => {
+      render(
+        <Alert
+          {...content}
+          onOk={() => {
+            unMount();
+            resolve();
+          }}
+        />,
+        container.getEl(),
+      );
+      container.visible();
+      prohibited();
+    });
+  },
+
+  confirm(content) {
+    return new Promise((resolve, reject) => {
+      render(
+        <Confirm
+          {...content}
+          onOk={() => {
+            unMount();
+            resolve();
+          }}
+          onCancel={() => {
+            unMount();
+            reject();
+          }}
+        />,
+        container.getEl(),
+      );
+      container.visible();
+      prohibited();
+    });
+  },
+};
+
+export default Dialog;

package/src/component/dialog/index.js

@@ -0,0 +1,3 @@
+import Dialog from './dialog';
+
+export default Dialog;

package/src/component/dialog/kind/dialog-alert.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from '../style.less';
+
+const DialogAlert = ({ title, message, onOk, onCancel }) => (
+  <div className={styles.cover} onClick={onCancel || onOk}>
+    <div className={styles.dialog} onClick={e => e.stopPropagation()}>
+      <header>{title}</header>
+      <article>{message}</article>
+      <footer className={styles['dialog-alert-footer']} onClick={onOk}>确认</footer>
+    </div>
+  </div>
+);
+
+DialogAlert.propTypes = {
+  title: PropTypes.node,
+  message: PropTypes.node,
+  onOk: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+export default DialogAlert;

package/src/component/dialog/kind/dialog-confirm.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import mergeClassName from '../../../tools/merge-class-name';
+import styles from '../style.less';
+
+const name = 'dialog-confirm';
+
+const DialogConfirm = ({ title, message, onOk, onCancel, confirmButtonText, cancelButtonText }) => (
+  <div className={styles.cover} onClick={onCancel || onOk}>
+    <div className={styles.dialog} onClick={e => e.stopPropagation()}>
+      <header
+        style={!message ? {
+          flex: 1,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        } : {}}
+      >
+        {title}
+      </header>
+      {message && <article>{message}</article>}
+      <footer className={styles[`${name}-footer`]}>
+        <span
+          className={mergeClassName([styles[`${name}-footer-button`], styles[`${name}-footer-cancel-button`]])}
+          onClick={onCancel}
+        >
+          {cancelButtonText}
+        </span>
+        <span
+          className={mergeClassName([styles[`${name}-footer-button`], styles[`${name}-footer-success-button`]])}
+          onClick={onOk}
+        >
+          {confirmButtonText}
+        </span>
+      </footer>
+    </div>
+  </div>
+);
+
+DialogConfirm.propTypes = {
+  title: PropTypes.node,
+  message: PropTypes.node,
+  onOk: PropTypes.func,
+  onCancel: PropTypes.func,
+  confirmButtonText: PropTypes.node,
+  cancelButtonText: PropTypes.node,
+};
+
+DialogConfirm.defaultProps = {
+  confirmButtonText: '确认',
+  cancelButtonText: '取消',
+};
+
+export default DialogConfirm;

package/src/component/dialog/style.less

@@ -0,0 +1,80 @@
+@import "../../styles/color";
+@import "../../styles/font";
+
+.cover{
+  width: 100%;
+  height: 100%;
+}
+
+.dialog{
+  width: 280px;
+  max-width: 90%;
+  min-height: 160px;
+  max-height: 40%;
+
+  display: flex;
+  flex-direction: column;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+
+  border-radius: 8px;
+  background: @white;
+
+  header{
+    padding: 23px 0;
+    text-align: center;
+
+    font-family: @medium;
+    font-size: @size-max;
+    font-weight: @weight-bold;
+  }
+
+  article{
+    flex: 1;
+    padding: 0 10px 25px;
+
+    color: @gray-darker;
+    text-align: center;
+  }
+
+  &-alert-footer{
+    height: 50px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-top: 1px solid @border-color;
+
+    color: @blue;
+  }
+
+  &-confirm-footer{
+    height: 50px;
+
+    display: flex;
+    justify-content: space-between;
+
+    border-top: 1px solid @border-color;
+
+    &-cancel-button{
+      border-right: 1px solid @border-color;
+      color: @text-color;
+    }
+
+    &-success-button{
+      color: @blue;
+    }
+
+    &-button{
+      display: flex;
+      width: 50%;
+
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

package/src/component/drawer/drawer.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import ReactDom from 'react-dom';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+
+import Container from '../../tools/create-body-container';
+import mergeClassName from '../../tools/merge-class-name';
+import { getWidthHeight } from './js/tools';
+import { prohibited, restore } from '../../tools/limit-document-scroll';
+
+let i = 0;
+
+class Drawer extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.container = new Container(`drawer${i++}`);
+    this.containerEl = this.container.getEl();
+
+    this.drawer = React.createRef();
+    this.startY = 0;
+
+    this.onTouchStart = this.onTouchStart.bind(this);
+    this.onTouchEnd = this.onTouchEnd.bind(this);
+  }
+
+  // 双重保障1，这里监听touchmove事件，目的是触底or触顶时，阻止滚动穿透
+  // componentDidMount() {
+  //   this.drawer.current.addEventListener(
+  //     'touchmove',
+  //     (e) => {
+  //       const { current } = this.drawer;
+  //       if (
+  //         (current.scrollTop <= 0 && e.touches[0].pageY > this.startY)
+  //         || (current.clientHeight + current.scrollTop >= current.scrollHeight
+  //           && e.touches[0].pageY < this.startY)
+  //       ) {
+  //         return e.cancelable && e.preventDefault();
+  //       }
+  //       return true;
+  //     },
+  //     { passive: false },
+  //   );
+  // }
+
+  // componentWillReceiveProps(nextProps) {
+  //   const { zIndex } = this.containerEl.style;
+  //   console.log(this.containerEl.style.zIndex)
+  //   if (zIndex !== nextProps.zIndex) {
+  //     this.containerEl.style.zIndex = nextProps.zIndex;
+  //   }
+  // }
+
+  componentWillUnmount() {
+    if (this.container) {
+      this.container.destroy();
+    }
+  }
+
+  // 双重保障2，onTouchStart时，立即禁止页面body的滚动
+  onTouchStart(e) {
+    this.startY = e.touches[0].pageY;
+    prohibited();
+  }
+
+  onTouchEnd() {
+    this.startY = 0;
+    restore();
+  }
+
+  setContainerVisible() {
+    const { visible } = this.props;
+    // 使用visibility的原因是display:none会影响过渡效果
+    if (visible) {
+      this.container.visible();
+    } else {
+      this.container.hidden();
+    }
+  }
+
+  getEl() {
+    const {
+      visible, position,
+      onClose, children,
+      drawerClass,
+      width,
+      height,
+      zIndex,
+    } = this.props;
+
+    this.setContainerVisible();
+
+    const style = { zIndex };
+    if (['left', 'right'].indexOf(position) >= 0) {
+      const realWidth = getWidthHeight(width);
+      style.width = realWidth;
+      style[position] = visible ? 0 : `calc(-${realWidth} - 5px)`; // 多移动5px是为了把boxshadow也藏起来
+    }
+    if (['top', 'bottom'].indexOf(position) >= 0) {
+      style.width = '100%';
+      const realHeight = getWidthHeight(height);
+      style.height = realHeight;
+      style[position] = visible ? 0 : `calc(-${realHeight} - 5px)`; // 多移动5px是为了把boxshadow也藏起来
+    }
+
+    return (
+      <div
+        className={styles.cover}
+        style={{ zIndex }}
+        onClick={onClose}
+        onTouchStart={this.onTouchStart}
+        onTouchEnd={this.onTouchEnd}
+      >
+        <div
+          ref={this.drawer}
+          style={style}
+          className={mergeClassName([styles.drawer, drawerClass])}
+          onClick={e => e.stopPropagation()}
+        >
+          {children}
+        </div>
+      </div>
+    );
+  }
+
+  render() {
+    const { zIndex } = this.props;
+    if (zIndex) this.containerEl.style.zIndex = zIndex;
+
+    return ReactDom.createPortal(this.getEl(), this.containerEl);
+  }
+}
+
+Drawer.propTypes = {
+  visible: PropTypes.bool,
+  position: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+  onClose: PropTypes.func,
+  children: PropTypes.node,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  drawerClass: PropTypes.string,
+  zIndex: PropTypes.number,
+};
+
+Drawer.defaultProps = {
+  position: 'bottom',
+  width: 300,
+  height: 300,
+  zIndex: '',
+};
+
+export default Drawer;

package/src/component/drawer/index.jsx

@@ -0,0 +1,3 @@
+import Drawer from './drawer';
+
+export default Drawer;

package/src/component/drawer/js/tools.js

@@ -0,0 +1 @@
+export const getWidthHeight = wh => ((typeof wh === 'number') ? `${wh}px` : wh);

package/src/component/drawer/style.less

@@ -0,0 +1,17 @@
+@import "../../styles/color";
+
+.cover{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.drawer{
+  height: 100%;
+  background: @white;
+  position: absolute;
+  transition: all 0.25s;
+  box-shadow: 0 0 8px @text-color;
+  opacity: 2.5;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}

package/src/component/field/field.jsx

@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Cell from "../cell";
+import Input from "../input";
+import { pick } from 'lodash-es';
+
+class Field extends Component {
+  render() {
+    const cellProps = pick(this.props, Object.keys(Cell.propTypes).concat(['value']));
+    const inputProps = pick(this.props, Object.keys(Input.propTypes));
+    return (
+      <Cell
+        {...cellProps}
+        value={<Input {...inputProps} style={{ flex: 1 }}/>}
+      />
+    )
+  }
+}
+
+Field.propTypes = {
+  ...Cell.propTypes,
+  style: PropTypes.object,
+  className: PropTypes.string,
+  type: PropTypes.oneOf(['text', 'number', 'password', 'textarea', 'tel']),
+  defaultValue: PropTypes.string,
+  value: PropTypes.string,
+  align: PropTypes.oneOf(['left', 'center', 'right']),
+  readonly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  border: PropTypes.bool,
+  placeholder: PropTypes.string,
+  clearable: PropTypes.bool,
+  maxLength: PropTypes.number,
+  autoSize: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.shape({ width: PropTypes.number, height: PropTypes.number })
+  ]),
+  showWordLimit: PropTypes.bool,
+  digits: PropTypes.number,
+  rows: PropTypes.number,
+  onChange: PropTypes.func,
+};
+
+Field.defaultProps = {
+  ...Cell.defaultProps,
+  ...Input.defaultProps,
+};
+
+export default Field;

package/src/component/field/index.js

@@ -0,0 +1,3 @@
+import Field from './field';
+
+export default Field;

package/src/component/icon/icon.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import mergeClassName from '../../tools/merge-class-name';
+import { getProps, defaultProps } from '../../tools/proptypes';
+import iconClass from './style.less';
+
+function Icon(props) {
+  const {
+    children,
+    className,
+    prefix,
+    style,
+    name,
+    fontFamily,
+    fontSize,
+    ...otherProps
+  } = props;
+
+  const classNames = mergeClassName([iconClass['sm-icon'], className, `${prefix}-${name}`]);
+
+  const styles = Object.assign({}, {
+    fontFamily,
+    fontSize,
+  }, style);
+
+  return (
+    <i {...otherProps} className={classNames} style={styles}>
+      {children}
+    </i>
+  );
+}
+
+Icon.propTypes = {
+  ...getProps(PropTypes, 'children', 'className', 'size'),
+  type: PropTypes.string,
+  prefix: PropTypes.string,
+  name: PropTypes.string,
+  fontFamily: PropTypes.string,
+  fontSize: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+};
+
+Icon.defaultProps = {
+  ...defaultProps,
+  prefix: 'icon',
+  fontFamily: 'iconfont',
+  name: '',
+  type: 'default',
+};
+
+Icon.displayName = 'ShineoutMobileIcon';
+
+export default Icon;

package/src/component/icon/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Icon from './icon';
+
+const links = {};
+
+export default function (url, fontFamily = 'iconfont', prefix = 'icon') {
+  if (url && !links[url]) {
+    links[url] = true;
+    const link = document.createElement('link');
+    link.setAttribute('rel', 'stylesheet');
+    link.setAttribute('type', 'text/css');
+    link.setAttribute('href', url);
+    document.head.appendChild(link);
+  }
+
+  const wrapperIcon = props => <Icon fontFamily={fontFamily} prefix={prefix} {...props} />;
+  wrapperIcon.isShineoutIcon = true;
+  return wrapperIcon;
+}

package/src/component/icon/style.less

@@ -0,0 +1,9 @@
+.sm-icon{
+  display: inline-block;
+  font-size: inherit;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+  text-rendering: auto;
+}

package/src/component/icons/index.js

@@ -0,0 +1,3 @@
+import Icon from '../icon';
+
+export default Icon('//at.alicdn.com/t/font_1568382_dz2h1c3t5os.css', 'ShineoutMobile', 'sm');

package/src/component/icons/mrp.js

@@ -0,0 +1,3 @@
+import Icon from '../icon';
+
+export default Icon('//at.alicdn.com/t/font_1528172_51y8lmvw8vx.css', 'mrpicon', 'icon');

package/src/component/image-previewer/image-previewer.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { PhotoSlider } from 'react-photo-view';
+import 'react-photo-view/dist/index.css';
+import PropTypes from 'prop-types';
+
+class ImagePreviewer extends React.PureComponent {
+  state = {
+    visible: false,
+    index: 0,
+  }
+
+  render() {
+    const { src, images, children, renderThumb } = this.props;
+    const { visible, index } = this.state;
+    return (
+      <React.Fragment>
+        {children ? React.cloneElement(children, {
+          onClick: () => {
+            this.setState({ visible: true });
+            // eslint-disable-next-line react/prop-types
+            if (children && children.props.onClick) {
+              // eslint-disable-next-line react/prop-types
+              children.props.onClick();
+            }
+          },
+        }) : renderThumb()}
+        <PhotoSlider
+          images={(images || [src]).map(item => ({ src: item }))}
+          visible={visible}
+          onClose={() => this.setState({
+            visible: false,
+          })}
+          index={index}
+          onIndexChange={idx => this.setState({
+            index: idx,
+          })}
+        />
+      </React.Fragment>
+    );
+  }
+}
+
+ImagePreviewer.propTypes = {
+  src: PropTypes.string,
+  images: PropTypes.arrayOf(PropTypes.string),
+  renderThumb: PropTypes.func,
+  children: PropTypes.node,
+};
+
+ImagePreviewer.defaultProps = {
+
+};
+
+export default ImagePreviewer;

package/src/component/image-previewer/index.js

@@ -0,0 +1,3 @@
+import ImagePreviewer from './image-previewer';
+
+export default ImagePreviewer;

package/src/component/index-sort-list/group.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+import { getProps } from '../../tools/proptypes';
+import mergeClassName from '../../tools/merge-class-name';
+
+const name = 'sm-index-list-group';
+
+class Group extends React.PureComponent {
+  render() {
+    const { index, title, data, render, click, forwardRef } = this.props;
+    const fixTopFlag = (title === index);
+    return (
+      <div ref={forwardRef} className={styles[name]}>
+        <p
+          className={mergeClassName([styles[`${name}-title`], fixTopFlag ? styles[`${name}-fix`] : null])}
+        >
+          {title}
+        </p>
+        <ul className={styles[`${name}-content`]} style={fixTopFlag ? { paddingTop: 32 } : {}}>
+          {
+            data.map(d => (
+              <li
+                className={styles[`${name}-content-cell`]}
+                onClick={() => click(d.value, d.label)}
+              >
+                {
+                  typeof render === 'function'
+                    ? (<span className={styles[`${name}-content-cell-render`]}>{render(d)}</span>)
+                    : (<text className={styles[`${name}-content-cell-text`]}>{d.label}</text>)
+                }
+              </li>
+            ))
+          }
+        </ul>
+      </div>
+    );
+  }
+}
+
+Group.propTypes = {
+  ...getProps(PropTypes, 'click', 'className'),
+  title: PropTypes.string,
+  data: PropTypes.arrayOf(PropTypes.object),
+  render: PropTypes.func,
+  forwardRef: PropTypes.func,
+};
+
+export default React.forwardRef((props, ref) => <Group {...props} forwardRef={ref} />);

package/src/component/index-sort-list/index-bar.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getProps } from '../../tools/proptypes';
+import styles from './style.less';
+
+const name = 'sm-index-list-bar';
+
+class IndexBar extends React.PureComponent {
+  render() {
+    const { index, indexList, click } = this.props;
+    return (
+      <ul className={styles[name]}>
+        {
+          indexList.map(i => (
+            <li
+              onClick={() => click(i)}
+              className={index === i && styles[`${name}-active`]}
+            >
+              {i[0]}
+            </li>
+          ))
+        }
+      </ul>
+    );
+  }
+}
+
+IndexBar.propTypes = {
+  ...getProps(PropTypes, 'click'),
+  index: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  indexList: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default IndexBar;