@sheinoutmobile/shineoutmobile 1.8.2

package/src/component/list-view/list-view.jsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getProps } from '../../tools/proptypes';
+import { prohibited, restore } from '../../tools/limit-document-scroll';
+import mergeClassName from '../../tools/merge-class-name';
+import styles from './style.less';
+
+import Empty from './jsx/empty';
+
+const maxTranslateY = 80;
+
+class ListView extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      translateY: 0, // 下拉时，滚动容器偏移距离(竖直方向)。只在滚动到顶部(或者说是没滚动过)的时候，才会触发事件动态改变便宜距离
+    };
+
+    this.startY = 0; // 手机触碰事件中手指在滚动容器的初始位置(竖直方向)
+    this.scrollTop = 0; // 滚动时距离顶部的距离
+    this.scrolling = false; // 判断容器是否处于滚动，用于给「下拉刷新」增加判断条件
+    this.timeout = null;
+
+    this.onScroll = this.onScroll.bind(this);
+    this.onTouchStart = this.onTouchStart.bind(this);
+    this.onTouchMove = this.onTouchMove.bind(this);
+    this.onTouchEnd = this.onTouchEnd.bind(this);
+
+    this.container = React.createRef();
+  }
+
+  componentDidMount() {
+    this.container.current.addEventListener(
+      'touchmove',
+      e => (
+        !this.scrollTop
+        && e.touches[0].pageY > this.startY
+        && e.cancelable
+        && e.preventDefault()),
+      { passive: false },
+    );
+  }
+
+  // 监听滚动事件，为了判断何时「触底」
+  onScroll(e) {
+    // 设定滚动延迟是因为Android手机touchmove事件会影响touchend的触发，但是设定e.preventDefault会在滚动时
+    this.scrolling = true;
+    if (this.timeout) clearTimeout(this.timeout);
+    this.timeout = setTimeout(() => {
+      this.scrolling = false;
+    }, 100);
+
+    const { onTouchBottom } = this.props;
+    const { scrollHeight, clientHeight, scrollTop } = e.target;
+    if (scrollHeight - clientHeight - scrollTop === 0 && typeof onTouchBottom === 'function') onTouchBottom();
+    this.scrollTop = scrollTop;
+  }
+
+  onTouchStart(e) {
+    this.startY = !this.scrollTop ? e.touches[0].pageY : 0;
+    prohibited();
+  }
+
+  // 监听触碰滑动事件，目的是在触顶的时候，进行滚动容器的偏移
+  onTouchMove(e) {
+    const { loading } = this.props;
+    if (this.scrolling || loading) return; // 在滚动和loading状态下，不允许下拉刷新
+
+    const touche = e.touches[0];
+
+    // 滚到顶部时，记录手指相对于滚动容器的初始位置，为后续的事件判断提供先决条件
+    if (!this.scrollTop && !this.startY) this.startY = touche.pageY;
+
+    if (touche.pageY > this.startY && !this.scrollTop) {
+      const translateY = touche.pageY - this.startY > maxTranslateY
+        ? maxTranslateY
+        : touche.pageY - this.startY;
+      this.setState({ translateY });
+    }
+  }
+
+  // 监听触碰结束事件，目的是判断是否需要触发「下拉刷新」事件
+  onTouchEnd() {
+    const { onRefresh } = this.props;
+    const { translateY } = this.state;
+    if (typeof onRefresh === 'function' && translateY > 30) onRefresh();
+    this.setState({ translateY: 0 });
+    this.startY = 0;
+    restore();
+  }
+
+  scrollToTop = () => {
+    if (this.container) {
+      this.container.current.scrollTop = 0;
+    }
+  }
+
+  render() {
+    const {
+      loading, loadingContent,
+      children, empty, emptyText, emptySize, refreshContent,
+      className, ...other
+    } = this.props;
+    const { translateY } = this.state;
+    return (
+      <div className={styles.body}>
+        <div
+          onScroll={this.onScroll}
+          onTouchStart={this.onTouchStart}
+          onTouchMove={this.onTouchMove}
+          onTouchEnd={this.onTouchEnd}
+          className={mergeClassName([styles.container, loading && styles.noScroll, className])}
+          {...other}
+          style={{ transform: `translateY(${translateY}px)` }}
+          ref={this.container}
+        >
+          {
+            React.Children.count(children) === 0 && !loading
+              ? empty || <Empty text={emptyText} size={emptySize} />
+              : children
+          }
+          {
+            loading && (
+              <div
+                style={{ top: this.scrollTop }}
+                className={styles.loading}
+              >
+                {loadingContent}
+              </div>
+            )
+          }
+        </div>
+        {
+          translateY > 0
+            && (
+              <div style={{ height: translateY }} className={styles.refreshContainer}>
+                {refreshContent}
+              </div>
+            )
+        }
+      </div>
+    );
+  }
+}
+
+ListView.propTypes = {
+  ...getProps(PropTypes, 'className', 'children'),
+  empty: PropTypes.node,
+  emptyText: PropTypes.node,
+  emptySize: PropTypes.oneOf(['small', 'default', 'large']),
+  loading: PropTypes.bool,
+  loadingContent: PropTypes.node,
+  refreshContent: PropTypes.node,
+  onTouchBottom: PropTypes.func, // 触底事件
+  onRefresh: PropTypes.func, // 下拉刷新事件
+};
+
+ListView.defaultProps = {
+  emptyText: '暂无数据',
+  emptySize: 'default',
+  loadingContent: '加载中...',
+  refreshContent: '松手刷新',
+};
+
+export default ListView;

package/src/component/list-view/style.less

@@ -0,0 +1,79 @@
+@import "../../styles/color";
+
+.container{
+  height: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+
+  position: relative;
+
+  //background: @white;
+
+  .loading{
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    position: absolute;
+    top: 0;
+
+    color: @white;
+    background: rgba(0, 0, 0, 0.1);
+  }
+}
+
+.noScroll{
+  overflow: hidden;
+}
+
+.body{
+  height: 100%;
+  position: relative;
+
+  //background: @background-color;
+
+  .refreshContainer{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    position: absolute;
+    top: 0;
+
+    color: @gray-darker;
+  }
+
+  .empty{
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+
+    &-icon{
+      margin-bottom: 10px;
+      color: @blue-gray;
+    }
+
+    &-size-small{
+      font-size: 86px;
+    }
+
+    &-size-default{
+      font-size: 106px;
+    }
+
+    &-size-large{
+      font-size: 126px;
+    }
+
+    text{
+      color: @gray-darker;
+    }
+  }
+}

package/src/component/loading/index.js

@@ -0,0 +1,3 @@
+import Loading from './loading'
+
+export default Loading

package/src/component/loading/loading.jsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import styles from './styles.less'
+import mergeClassName from '../../tools/merge-class-name';
+
+class Loading extends React.PureComponent {
+  renderIcon() {
+    const { type } = this.props;
+    if (type === 'spinner') {
+      const Spin = [];
+      for (let i = 0; i < 12; i++) {
+        Spin.push(<i key={i} />);
+      }
+      return Spin;
+    }
+
+    return (
+      <svg className={styles['loading__circular']} viewBox="25 25 50 50">
+        <circle cx="50" cy="50" r="20" fill="none" />
+      </svg>
+    );
+  }
+  renderText() {
+    const { textSize, children } = this.props;
+    if (children) {
+      const style = textSize !== undefined ? {
+        fontSize: parseInt(textSize, 10)
+      } : {};
+
+      return (
+        <span className={styles['loading__text']} style={style}>
+          {children}
+        </span>
+      )
+    }
+    return null;
+  }
+  render() {
+    const { color, size, type, vertical, className } = this.props;
+
+    const style = { color };
+    if (size) {
+      const iconSize = parseInt(size, 10);
+      style.width = iconSize;
+      style.height = iconSize;
+    }
+    const icon = this.renderIcon();
+    const text = this.renderText();
+
+    return (
+      <div
+        style={this.props.style}
+        className={
+          mergeClassName([
+            // van-loading van-loading--circular
+            // van-loading van-loading--spinner van-loading--vertical
+            styles['loading'],
+            styles[`loading__${type}`],
+            (vertical ? styles[`loading--vertical`] : ''),
+            className
+          ])
+        }
+      >
+      <span
+        className={
+          // van-loading__spinner van-loading__spinner--circular
+          // van-loading__spinner van-loading__spinner--spinner
+          mergeClassName([
+            styles[`loading__spinner`],
+            styles[`loading__spinner--${type}`],
+          ])
+        }
+        style={style}
+      >
+        {icon}
+      </span>
+        {text}
+      </div>
+    );
+  }
+}
+
+Loading.propTypes = {
+  style: PropTypes.object,
+  className: PropTypes.string,
+  color: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  vertical: PropTypes.bool,
+  textSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  type: PropTypes.oneOf(['circular', 'spinner']),
+};
+
+Loading.defaultProps = {
+  type: 'circular'
+};
+
+export default Loading;

package/src/component/loading/styles.less

@@ -0,0 +1,128 @@
+@gray-5: #c8c9cc;
+@gray-6: #969799;
+@font-size-md: 14px;
+
+@padding-base: 4px;
+@padding-xs: @padding-base * 2;
+@padding-sm: @padding-base * 3;
+@padding-md: @padding-base * 4;
+@padding-lg: @padding-base * 6;
+@padding-xl: @padding-base * 8;
+
+@loading-text-color: @gray-6;
+@loading-text-font-size: @font-size-md;
+@loading-spinner-color: @gray-5;
+@loading-spinner-size: 30px;
+@loading-spinner-animation-duration: 1s;
+
+@keyframes van-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.loading {
+  position: relative;
+  color: @loading-spinner-color;
+  font-size: 0;
+  vertical-align: middle;
+
+  &__spinner {
+    position: relative;
+    display: inline-block;
+    width: @loading-spinner-size;
+    // compatible for 1.x, users may set width or height in root element
+    max-width: 100%;
+    height: @loading-spinner-size;
+    max-height: 100%;
+    vertical-align: middle;
+    animation: van-rotate @loading-spinner-animation-duration linear infinite;
+
+    &--spinner {
+      animation-timing-function: steps(12);
+
+      i {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        &::before {
+          display: block;
+          width: 2px;
+          height: 25%;
+          margin: 0 auto;
+          background-color: currentColor;
+          border-radius: 40%;
+          content: ' ';
+        }
+      }
+    }
+
+    &--circular {
+      animation-duration: 2s;
+    }
+  }
+
+  &__circular {
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    circle {
+      animation: van-circular 1.5s ease-in-out infinite;
+      stroke: currentColor;
+      stroke-width: 3;
+      stroke-linecap: round;
+    }
+  }
+
+  &__text {
+    display: inline-block;
+    margin-left: @padding-xs;
+    color: @loading-text-color;
+    font-size: @loading-text-font-size;
+    vertical-align: middle;
+  }
+
+  &--vertical {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .loading__text {
+      margin: @padding-xs 0 0;
+    }
+  }
+}
+
+@keyframes van-circular {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40;
+  }
+
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120;
+  }
+}
+
+.generate-spinner(@n, @i: 1) when (@i =< @n) {
+  .loading__spinner--spinner i:nth-of-type(@{i}) {
+    transform: rotate(@i * 30deg);
+    opacity: 1 - (0.75 / 12) * (@i - 1);
+  }
+  .generate-spinner(@n, (@i + 1));
+}
+.generate-spinner(12);

package/src/component/multiple-selector/index.jsx

@@ -0,0 +1,3 @@
+import MultipleSelector from './multiple-selector';
+
+export default MultipleSelector;

package/src/component/multiple-selector/item.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+
+const Item = (props) => {
+  const { click, label, value } = props;
+  return (
+    <li
+      onClick={() => click(value)}
+      className={styles.item}
+    >
+      {label}
+    </li>
+  );
+};
+
+Item.propTypes = {
+  click: PropTypes.func,
+  label: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+};
+
+export default Item;

package/src/component/multiple-selector/multiple-selector.jsx

@@ -0,0 +1,116 @@
+import React, { PureComponent, isValidElement, createRef } from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+import Drawer from '../drawer';
+import Selector from './selector';
+import Item from './item';
+
+class MultipleSelector extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentName: undefined,
+      currentValue: {},
+    };
+    this.click = this.click.bind(this);
+    this.clickItem = this.clickItem.bind(this);
+    this.container = createRef();
+  }
+
+  createTitle() {
+    const { title } = this.props;
+    if (isValidElement(title)) return title;
+    return <div className={styles['normal-title']}>{title}</div>;
+  }
+
+  createContainerStyle() {
+    const { currentName } = this.state;
+    const style = {};
+    if (currentName) {
+      const width = this.container.current.clientWidth;
+      Object.assign(style, { transform: `translateX(-${width}px)` });
+    }
+    return style;
+  }
+
+  click(name) {
+    this.setState({ currentName: name });
+  }
+
+  clickItem(val) {
+    const { currentName, currentValue } = this.state;
+    const { onChange, value = currentValue } = this.props;
+    const newValue = Object.assign({}, value, { [currentName]: val });
+    this.setState({
+      currentName: null,
+      currentValue: newValue,
+    });
+    onChange(newValue);
+  }
+
+  render() {
+    const { currentName, currentValue } = this.state;
+    const {
+      visible,
+      option, value = currentValue,
+      onClose,
+      extraComponent,
+    } = this.props;
+
+    const titleEl = this.createTitle();
+
+    const containerStyle = this.createContainerStyle();
+
+    const currentOption = option.find(op => op.name === currentName) || { data: [] };
+
+    return (
+      <Drawer
+        visible={visible}
+        onClose={onClose}
+        position="bottom"
+        drawerClass={styles.drawer}
+      >
+        {titleEl}
+        <div className={styles.container} style={containerStyle}>
+          <ul ref={this.container} className={styles['container-content']}>
+            {
+              option.map(op => (
+                <Selector
+                  {...op}
+                  click={this.click}
+                  selected={op.data.find(d => value[op.name] === d.value)}
+                />
+              ))
+            }
+          </ul>
+          <ul className={styles['container-content']}>
+            {
+              currentOption.data.map(da => <Item {...da} click={this.clickItem} />)
+            }
+          </ul>
+        </div>
+        {
+          !currentName
+            ? extraComponent
+            : null
+        }
+      </Drawer>
+    );
+  }
+}
+
+MultipleSelector.propTypes = {
+  visible: PropTypes.bool,
+  option: PropTypes.arrayOf(PropTypes.object),
+  value: PropTypes.objectOf(PropTypes.any),
+  onClose: PropTypes.func,
+  onChange: PropTypes.func,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.symbol]),
+  extraComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.symbol]),
+};
+
+MultipleSelector.defaultProps = {
+  option: [],
+};
+
+export default MultipleSelector;

package/src/component/multiple-selector/selector.jsx

@@ -0,0 +1,41 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+
+import Icon from '../icons';
+
+class Selector extends PureComponent {
+  render() {
+    const { name, label, data, selected, click } = this.props;
+    const next = data && data.length > 0;
+    return (
+      <li
+        className={styles.selector}
+        onClick={() => next && click(name)}
+      >
+        <span>{label}</span>
+        <span>
+          <span className={styles['selector-result-text']}>{selected.label}</span>
+          {
+            next
+              ? <Icon className={styles['selector-right-icon']} name="Forward" />
+              : null
+          }
+        </span>
+      </li>
+    );
+  }
+}
+
+Selector.propTypes = {
+  click: PropTypes.func,
+  label: PropTypes.string,
+  name: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+  selected: PropTypes.objectOf(PropTypes.any),
+  data: PropTypes.arrayOf(PropTypes.object),
+};
+Selector.defaultProps = {
+  selected: {},
+};
+
+export default Selector;