@sheinoutmobile/shineoutmobile 1.8.2

package/src/component/picker/picker.jsx

@@ -0,0 +1,380 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+
+import styles from './style.less';
+import PickerItem from './pickerItem';
+
+
+const PassiveSupported = () => {
+  let passiveSupported = false;
+
+  try {
+    const options = Object.defineProperty({}, 'passive', {
+      get: () => {
+        passiveSupported = true;
+        return passiveSupported;
+      },
+    });
+    window.addEventListener('test', null, options);
+  } catch (err) { console.warn(err); }
+  return passiveSupported;
+};
+
+
+class Picker extends Component {
+  static selectByIndex(selectedIndex, itemHeight, scrollTo) {
+    const targetY = selectedIndex * itemHeight;
+    scrollTo(targetY);
+  }
+
+  static computeChildIndex(top, itemHeight, childrenLength) {
+    const index = Math.round(top / itemHeight);
+    return Math.min(index, childrenLength - 1);
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.contentRef = React.createRef();
+    this.indicatorRef = React.createRef();
+    this.maskRef = React.createRef();
+    this.pickerBodyRef = React.createRef();
+    this.itemHeight = 0;
+    this.scrollValue = null;
+
+    this.fireValueChange = this.fireValueChange.bind(this);
+    this.scrollTo = this.scrollTo.bind(this);
+    this.scrollToWithoutAnimation = this.scrollToWithoutAnimation.bind(this);
+
+    this.scrollHanders = (() => {
+      let scrollY = -1;
+      let lastY = 0;
+      let startY = 0;
+      let scrollDisabled = false;
+      let isMoving = false;
+
+      const setTransform = (nodeStyle, value) => {
+        Object.assign(nodeStyle, {
+          transform: value,
+          webkitTransform: value,
+        });
+      };
+
+      const setTransition = (nodeStyle, value) => {
+        Object.assign(nodeStyle, {
+          transition: value,
+          webkitTransition: value,
+        });
+      };
+
+      const scrollTo = (_x, y, time = 0.3) => {
+        if (scrollY !== y) {
+          scrollY = y;
+          const { noAnimate } = this.props;
+          if (time && !noAnimate) {
+            setTransition(this.contentRef.current.style, `cubic-bezier(0,0,0.2,1.15) ${time}s`);
+          }
+          setTransform(this.contentRef.current.style, `translate3d(0,${-y}px,0)`);
+          setTimeout(() => {
+            this.scrollingComplete();
+            if (this.contentRef.current) {
+              setTransition(this.contentRef.current.style, '');
+            }
+          }, +time * 1000);
+        }
+      };
+
+      const Velocity = ((minInterval = 30, maxInterval = 100) => {
+        let time = 0;
+        let currentY = 0;
+        let velocity = 0;
+        const recorder = {
+          record: (y) => {
+            const now = +new Date();
+            velocity = (y - currentY) / (now - time);
+            if (now - time >= minInterval) {
+              velocity = now - time <= maxInterval ? velocity : 0;
+              currentY = y;
+              time = now;
+            }
+          },
+          getVelocity: (y) => {
+            if (y !== currentY) {
+              recorder.record(y);
+            }
+            return velocity;
+          },
+        };
+        return recorder;
+      })();
+
+      const onFinish = () => {
+        isMoving = false;
+        let targetY = scrollY;
+        const { children } = this.props;
+        const height = (children.length - 1) * this.itemHeight;
+
+        let time = 0.3;
+
+        const velocity = Velocity.getVelocity(targetY) * 4;
+        if (velocity) {
+          targetY = velocity * 40 + targetY;
+          time = Math.abs(velocity) * 0.1;
+        }
+
+        if (targetY % this.itemHeight !== 0) {
+          targetY = Math.round(targetY / this.itemHeight) * this.itemHeight;
+        }
+
+        if (targetY < 0) {
+          targetY = 0;
+        } else if (targetY > height) {
+          targetY = height;
+        }
+
+        scrollTo(0, targetY, time < 0.3 ? 0.3 : time);
+        this.onScrollChange();
+      };
+
+      const onStart = (y) => {
+        if (scrollDisabled) {
+          return;
+        }
+
+        isMoving = true;
+        startY = y;
+        lastY = scrollY;
+      };
+
+      const onMove = (y) => {
+        if (scrollDisabled || !isMoving) {
+          return;
+        }
+
+        scrollY = lastY - y + startY;
+        Velocity.record(scrollY);
+
+        this.onScrollChange();
+        setTransform(this.contentRef.current.style, `translate3d(0,${-scrollY}px,0)`);
+      };
+
+      return {
+        touchstart: evt => onStart(evt.touches[0].pageY),
+        mousedown: evt => onStart(evt.pageY),
+        touchmove: (evt) => {
+          evt.preventDefault();
+          onMove(evt.touches[0].pageY);
+        },
+        mousemove: (evt) => {
+          evt.preventDefault();
+          onMove(evt.pageY);
+        },
+        touchend: () => onFinish(),
+        touchcancel: () => onFinish(),
+        mouseup: () => onFinish(),
+        getValue: () => scrollY,
+        scrollTo,
+        setDisabled: (disabled = false) => {
+          scrollDisabled = disabled;
+        },
+      };
+    }
+    )();
+  }
+
+  componentDidMount() {
+    const { contentRef, pickerBodyRef, maskRef, indicatorRef } = this;
+
+    // 计算选项个数
+    const bodyHeight = pickerBodyRef.current.getBoundingClientRect().height;
+    const itemHeight = indicatorRef.current.getBoundingClientRect().height;
+    this.itemHeight = itemHeight;
+    let num = Math.floor(bodyHeight / itemHeight);
+    if (num % 2 === 0) {
+      num--;
+    }
+    num--;
+    num /= 2;
+
+    // 设置指示器位置
+    contentRef.current.style.padding = `${itemHeight * num}px 0`;
+    indicatorRef.current.style.top = `${itemHeight * num}px`;
+    maskRef.current.style.backgroundSize = `100% ${itemHeight * num}px`;
+    const { disabled } = this.props;
+    this.scrollHanders.setDisabled(disabled);
+
+    const passiveSupported = PassiveSupported();
+    const willPreventDefault = passiveSupported ? { passive: false } : false;
+    const willNotPreventDefault = passiveSupported ? { passive: true } : false;
+    Object.keys(this.scrollHanders).forEach((key) => {
+      if (key.indexOf('touch') === 0 || key.indexOf('mouse') === 0) {
+        const pd = key.indexOf('move') >= 0 ? willPreventDefault : willNotPreventDefault;
+        pickerBodyRef.current.addEventListener(key, this.scrollHanders[key], pd);
+      }
+    });
+    const { value } = this.props;
+    this.select(value, this.scrollToWithoutAnimation);
+  }
+
+  componentDidUpdate() {
+    const { value, noAnimate } = this.props;
+    this.select(value, noAnimate ? this.scrollToWithoutAnimation : this.scrollTo);
+  }
+
+
+  componentWillUnmount() {
+    Object.keys(this.scrollHanders).forEach((key) => {
+      if (key.indexOf('touch') === 0 || key.indexOf('mouse') === 0) {
+        this.pickerBodyRef.current.removeEventListener(key, this.scrollHanders[key]);
+      }
+    });
+  }
+
+  onScrollChange() {
+    const top = this.scrollHanders.getValue();
+    if (top >= 0) {
+      const { children: propsChildren } = this.props;
+      const children = React.Children.toArray(propsChildren);
+      const index = Picker.computeChildIndex(top, this.itemHeight, children.length);
+      if (this.scrollValue !== index) {
+        this.scrollValue = index;
+        const child = children[index];
+        const { onScrollChange } = this.props;
+        if (child && onScrollChange && onScrollChange instanceof Function) {
+          onScrollChange(child.props.value);
+        }
+      }
+    }
+  }
+
+
+  scrollTo(top) {
+    this.scrollHanders.scrollTo(0, top);
+  }
+
+  scrollToWithoutAnimation(top) {
+    this.scrollHanders.scrollTo(0, top, 0);
+  }
+
+  doScrollingComplete(top, itemHeight, fireValueChange) {
+    const { children: propsChildren } = this.props;
+    const children = React.Children.toArray(propsChildren);
+    const index = Picker.computeChildIndex(top, itemHeight, children.length);
+    const child = children[index];
+    if (child) {
+      fireValueChange(child.props.value);
+    } else if (console.warn) {
+      console.warn('child not find', children, index);
+    }
+  }
+
+  fireValueChange(value) {
+    if (value !== this.scrollValue) {
+      this.scrollValue = value;
+      // 变更选中值
+      const { onValueChange } = this.props;
+      if (onValueChange && onValueChange instanceof Function) {
+        onValueChange(value);
+      }
+    }
+  }
+
+  scrollingComplete() {
+    const top = this.scrollHanders.getValue();
+    if (top >= 0) {
+      this.doScrollingComplete(top, this.itemHeight, this.fireValueChange);
+    }
+  }
+
+  select(value, scrollTo) {
+    let selectedIndex;
+    const { children: propsChildren } = this.props;
+    const children = React.Children.toArray(propsChildren);
+    if (value === undefined || value === null || value === '') {
+      selectedIndex = 0;
+    } else {
+      selectedIndex = children.findIndex(item => item === value || item.props.value === value);
+      if (selectedIndex === -1) {
+        selectedIndex = 0;
+      }
+    }
+    Picker.selectByIndex(selectedIndex, this.itemHeight, scrollTo);
+  }
+
+  render() {
+    const {
+      className,
+      children,
+      itemStyle,
+      itemClassName,
+    } = this.props;
+
+
+    // 生成选项
+    const map = (item) => {
+      const { className: itemClass = '', style, value: itemValue = '' } = item.props;
+      return (
+        <div
+          style={{ ...itemStyle, style }}
+          className={classNames(styles['sm-picker-item'], itemClass, itemClassName)}
+          key={itemValue}
+        >
+          {item.children || item.props.children || item.props.value}
+        </div>
+      );
+    };
+
+    const options = React.Children
+      ? React.Children.map(children, map) : [].concat(children).map(map);
+
+    return (
+      <div
+        className={classNames(styles['sm-picker-content-body'], className)}
+        ref={this.pickerBodyRef}
+      >
+        <div
+          className={styles['sm-picker-content-mask']}
+          ref={this.maskRef}
+        />
+        <div
+          className={styles['sm-picker-indicator']}
+          ref={this.indicatorRef}
+        />
+        <div
+          className={styles['sm-picker-list']}
+          ref={this.contentRef}
+        >
+          {options}
+        </div>
+      </div>
+    );
+  }
+}
+
+
+Picker.propTypes = {
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  onValueChange: PropTypes.func,
+  onScrollChange: PropTypes.func,
+  disabled: PropTypes.bool, // 是否禁用
+  noAnimate: PropTypes.bool, // 是否有动画
+  children: PropTypes.element,
+  className: PropTypes.string,
+  itemClassName: PropTypes.string,
+  itemStyle: PropTypes.objectOf(PropTypes.any),
+};
+
+Picker.defaultProps = {
+  disabled: false,
+  noAnimate: false,
+};
+
+Picker.PickerItem = PickerItem;
+
+
+export default Picker;

package/src/component/picker/pickerItem.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getProps } from '../../tools/proptypes';
+
+const PickerItem = (props) => {
+  const {
+    value,
+    children,
+    ...others
+  } = props;
+
+  return (
+    <div
+      {...others}
+      key={value}
+    >
+      {children}
+    </div>
+  );
+};
+
+
+PickerItem.propTypes = {
+  ...getProps(PropTypes, 'children'),
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+};
+
+export default PickerItem;

package/src/component/picker/style.less

@@ -0,0 +1,80 @@
+.draw-picker{
+  width: 100%;
+  overflow: hidden;
+  display: block;
+
+  .sm-picker-header{
+    background-color: #fff;
+    height: 6vh;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .header-left{
+      font-size: 18px;
+      color: #0ae;
+      margin-left: 2vw;
+    }
+    .header-center{
+      font-size: 18px;
+      color: #0ae;
+    }
+    .header-right{
+      font-size: 18px;
+      color: #0ae;
+      margin-right: 2vw;
+    }
+  }
+
+  .sm-picker{
+    width: 100%;
+    text-align: center;
+  }
+}
+
+.sm-picker-content-body {
+  background-color: #fff;
+  height: calc(100% - 6vh);
+  position: relative;
+  overflow: hidden;
+
+  .sm-picker-content-mask {
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
+    background-repeat: no-repeat;
+    background-position: top, bottom;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 3;
+  }
+
+  .sm-picker-indicator {
+    width: 100%;
+    height: 34px;
+    position: absolute;
+    top: 43%;
+    left: 0;
+    box-sizing: border-box;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+    z-index: 3;
+  }
+
+  .sm-picker-list {
+    //height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.sm-picker-item {
+  color: #9b9b9b;
+  line-height: 34px;
+  font-size: 16px;
+  padding: 0 10px;
+
+}

package/src/component/pull-refresh/index.js

@@ -0,0 +1,3 @@
+import PullRefresh from './pull-refresh';
+
+export default PullRefresh;

package/src/component/pull-refresh/pull-refresh.jsx

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+// import styles from './style.less';
+
+class Refresh extends Component {
+  constructor(props) {
+    super(props);
+    this.test = React.createRef();
+  }
+
+  // onTouchStart(e) {
+  //   console.log('start', e);
+  // }
+  // onTouchMove(e) {
+  //   console.log('move', e);
+  // }
+  onTouchEnd() {
+    const { refresh } = this.props;
+    refresh();
+    // console.log('end', e);
+  }
+
+  render() {
+    const { children } = this.props;
+    return (
+      <div
+        ref={this.test}
+        // className={styles['sm-refresh']}
+        // onTouchStart={this.onTouchStart}
+        // onTouchMove={this.onTouchMove}
+        // onTouchEnd={this.onTouchEnd}
+        onTouchCancel={this.onTouchEnd}
+      >
+        <div>顶部文字</div>
+        {children}
+      </div>
+    );
+  }
+}
+
+Refresh.propTypes = {
+  children: PropTypes.node,
+  refresh: PropTypes.func,
+};
+
+export default Refresh;

package/src/component/search-bar/index.jsx

@@ -0,0 +1,3 @@
+import SearchBar from './search-bar';
+
+export default SearchBar;

package/src/component/search-bar/search-bar.jsx

@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Icon from '../icons/mrp';
+import styles from './style.less';
+
+class SearchBar extends Component {
+  constructor(props) {
+    super(props);
+  }
+  bindRef = (el) => {
+    this.ref = el
+  }
+  render() {
+    const {
+      style,
+      className,
+      showIcon,
+      clearable,
+      placeholder,
+      value,
+      onChange,
+      onPressEnter,
+      leftItem,
+      rightItem,
+    } = this.props;
+    const hasInput = value ? String(value).length : 0;
+
+    return (
+      <div
+        style={style}
+        className={[styles.searchContainer, className].join(' ')}
+      >
+        {
+          leftItem ? <div className={styles.renderLeft}>{leftItem}</div> : ''
+        }
+        <div className={styles.inputContainers}>
+          {
+            showIcon && <Icon name="search" className={styles.searchIcon} />
+          }
+          <input
+            ref={this.bindRef}
+            className={styles.input}
+            type="search"
+            value={value}
+            placeholder={placeholder}
+            onChange={e => onChange && onChange(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.keyCode === 13) {
+                this.ref.blur();
+                onPressEnter(e.target.value);
+              }
+            }}
+          />
+          {
+            hasInput && clearable
+              ? (
+                <Icon
+                  name="delete"
+                  className={styles.clearIcon}
+                  onClick={() => {
+                    onChange('');
+                  }}
+                />
+              ) : ''
+          }
+        </div>
+        {
+          rightItem ? <div className={styles.renderRight}>{rightItem}</div> : ''
+        }
+      </div>
+    );
+  }
+}
+
+
+SearchBar.propTypes = {
+  style: PropTypes.object,
+  className: PropTypes.string,
+  shape: PropTypes.oneOf(['round', 'square']), // 未实现
+  background: PropTypes.string, // 未实现
+  showIcon: PropTypes.bool,
+  value: PropTypes.any,
+  clearable: PropTypes.bool,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func,
+  leftItem: PropTypes.element,
+  rightItem: PropTypes.element,
+  onSearch: PropTypes.func,
+  onCancel: PropTypes.func,
+};
+
+SearchBar.defaultProps = {
+  shape: 'square',
+  background: '#FFFFFF',
+};
+
+export default SearchBar;

package/src/component/search-bar/style.less

@@ -0,0 +1,52 @@
+@import "../../styles/var";
+
+.searchContainer{
+  display: flex;
+  align-items: center;
+  //background: @background-color;
+  .inputContainers{
+    position: relative;
+    display: flex;
+    flex: 1;
+    .searchIcon{
+      position: absolute;
+      left: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 24px;
+      color: @text-color-light;
+    }
+    .clearIcon{
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 20px;
+      color: lightgray;
+    }
+    .input{
+      height: 32px;
+      background: #F7F9FC;
+      border-radius: 16px;
+      outline: none;
+      box-shadow: none;
+      border: none;
+      flex: 1;
+      padding-left: 36px;
+      padding-right: 30px;
+      color: @text-color;
+      &::-webkit-search-cancel-button {
+        display: none;
+        visibility: hidden;
+      }
+    }
+  }
+  .renderLeft {
+    flex-shrink: 0;
+    margin-right: 10px;
+  }
+  .renderRight{
+    flex-shrink: 0;
+    margin-left: 10px;
+  }
+}

package/src/component/sign/index.jsx

@@ -0,0 +1,3 @@
+import Sign from './sign';
+
+export default Sign;