@sheinoutmobile/shineoutmobile 1.8.2

package/src/component/index-sort-list/index.js

@@ -0,0 +1,3 @@
+import IndexSortList from './list';
+
+export default IndexSortList;

package/src/component/index-sort-list/js/rules.js

@@ -0,0 +1,14 @@
+import pinyin from '../../../tools/pinyin';
+
+const getFirstString = str => (str ? str[0] : '#');
+
+// 默认按传入汉字首字的首字母
+const pinyinRule = item => (
+  pinyin(getFirstString(item.label), { style: pinyin.STYLE_FIRST_LETTER })[0][0].toLocaleUpperCase()
+);
+
+const pinyinSort = (a, b) => (a.title > b.title ? 0 : -1);
+
+export {
+  pinyinRule, pinyinSort,
+};

package/src/component/index-sort-list/js/sort-rule.js

@@ -0,0 +1,41 @@
+import { pinyinRule, pinyinSort } from './rules';
+
+const ruleConfig = {
+  pinyin: pinyinRule,
+};
+
+const sortConfig = {
+  pinyin: pinyinSort,
+};
+
+// 根据规则处理data
+export default (data = [], rule, sort) => {
+  const resultData = [];
+  let ruleFunc = null;
+  let sortFunc = sort;
+
+  if (typeof rule === 'function') {
+    ruleFunc = rule;
+  } else if (typeof rule === 'string') {
+    ruleFunc = ruleConfig[rule];
+    sortFunc = sortConfig[rule];
+  }
+
+  if (!ruleFunc) {
+    console.error(`错误的sortRule传参，请确保传入规则无误！${rule}`);
+    return [];
+  }
+
+  data.forEach((d) => {
+    const index = ruleFunc(d);
+    if (resultData.find(r => r.title === index)) {
+      resultData.find(r => r.title === index).data.push(d);
+    } else {
+      resultData.push({ title: index, data: [d] });
+    }
+  });
+
+  if (typeof sortFunc === 'function') resultData.sort(sortFunc);
+
+  return resultData;
+};

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

@@ -0,0 +1,110 @@
+import React, { Component, createRef } from 'react';
+import PropTypes from 'prop-types';
+import styles from './style.less';
+import { getProps } from '../../tools/proptypes';
+import mergeClassName from '../../tools/merge-class-name';
+import sortByRules from './js/sort-rule';
+
+import Group from './group';
+import IndexBar from './index-bar';
+
+const name = 'sm-index-list';
+
+// 通过目标节点距离容器的高度(offsetTop)、目标节点自身高度(offsetHeight)、容齐的滚动距离(scrollTop)
+// 来判断该节点是否处于「头部超出容器可视范围」而「尾部还未超出容器可视范围」
+const findIndex = (current, scrollTop) => (
+  current
+  && scrollTop - current.offsetTop > 0
+  && scrollTop - current.offsetTop < current.offsetHeight
+);
+
+class List extends Component {
+  constructor(props) {
+    super(props);
+    this.window = createRef();
+    this.state = {
+      scrollTop: 0,
+      index: null,
+    };
+    this.windowScroll = this.windowScroll.bind(this);
+    this.indexClick = this.indexClick.bind(this);
+    this.groupRefs = {}; // 存储所有Group组件内部最外延的节点的ref
+  }
+
+  // componentDidMount() {
+  // }
+
+  sort() {
+    const { data, rule } = this.props;
+    let resultData = data;
+    const resultIndexList = [];
+
+    if (rule) resultData = sortByRules(data, rule);
+
+    resultData.forEach(d => resultIndexList.push(d.title));
+    return { data: resultData, indexList: resultIndexList };
+  }
+
+  // 滚动的时候，会判断到底滚到来哪个Group的范围，并把index设置该Group的的title
+  windowScroll(e) {
+    const { scrollTop } = e.target;
+    Object.keys(this.groupRefs).forEach((title) => {
+      if (findIndex(this.groupRefs[title], scrollTop)) this.setState({ index: title });
+    });
+  }
+
+  indexClick(index) {
+    const { current } = this.window;
+    if (this.groupRefs[index].offsetTop < current.height) { // 如果点击的索引(index)在底部且小于容器的高度，那设定滚动到最底即可
+      current.scrollTop = current.scrollHeight - current.clientHeight;
+    } else {
+      current.scrollTop = this.groupRefs[index].offsetTop;
+      this.setState({ index });
+    }
+  }
+
+  render() {
+    const { select, empty, render } = this.props;
+    const { scrollTop, index } = this.state;
+    const { data, indexList } = this.sort();
+    return (
+      <div className={mergeClassName([styles[name]])}>
+        <div
+          ref={this.window}
+          className={styles[`${name}-window`]}
+          onScroll={this.windowScroll}
+        >
+          {
+            data.map(d => (
+              <Group
+                {...d}
+                render={render}
+                scrollTop={scrollTop}
+                click={select}
+                index={index}
+                ref={(el) => {
+                  this.groupRefs[d.title] = el;
+                }}
+              />
+            ))
+          }
+          {
+            (!data || data.length === 0)
+              && (typeof empty === 'string' ? <div className={styles[`${name}-window-empty`]}>{empty}</div> : empty)
+          }
+        </div>
+        <IndexBar index={index} indexList={indexList} click={this.indexClick} />
+      </div>
+    );
+  }
+}
+
+List.propTypes = {
+  ...getProps(PropTypes, 'className', 'select', 'empty'),
+  data: PropTypes.arrayOf(PropTypes.object),
+  rule: PropTypes.oneOf(['pinyin', PropTypes.func]), // 分类规则
+  sort: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // 排序规则
+  render: PropTypes.func, // item自定义渲染
+};
+
+export default List;

package/src/component/index-sort-list/style.less

@@ -0,0 +1,109 @@
+@import "../../styles/color";
+@import "../../styles/format-theme";
+
+.sm-index-list{
+  height: 100%;
+  position: relative;
+
+  &-window{
+    height: 100%;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+
+    &-empty{
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      color: @gray-darker;
+    }
+  }
+
+  &-group{
+    &-fix{
+      width: 100%;
+      position: absolute;
+      top: 0;
+
+      color: @green;
+    }
+
+    &-title{
+      line-height: @index-list-title-line-height;
+      padding: 0 @index-list-title-padding;
+      margin: 0;
+
+      background: @background-color;
+    }
+
+    &-content{
+      padding: 0;
+      margin: 0;
+
+      li:active{
+        background-color: @active-color;
+      }
+
+      &-cell{
+        padding: 0 @index-list-title-padding;
+
+        list-style: none;
+
+        &-text{
+          display: inline-block;
+          width: 100%;
+          line-height: 16px;
+          padding: 12px 0;
+
+          border-bottom: 1px solid #ebedf0;
+        }
+
+        &-render{
+          display: inline-block;
+          width: 100%;
+
+          border-bottom: 1px solid #ebedf0;
+        }
+      }
+
+      li:last-child{
+        text{
+          border-bottom: none;
+        }
+        > span{
+          border-bottom: none;
+        }
+      }
+    }
+  }
+
+  &-bar{
+    min-height: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+
+    padding: 0;
+    margin: 0;
+
+    li{
+      line-height: 14px;
+
+      list-style: none;
+      padding: 0 4px 0 16px;
+
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    &-active{
+      color: @green;
+    }
+  }
+}

package/src/component/input/index.js

@@ -0,0 +1,3 @@
+import Input from "./input";
+
+export default Input;

package/src/component/input/input.jsx

@@ -0,0 +1,285 @@
+import React, {Component} from 'react';
+import styles from './style.less';
+import PropTypes from "prop-types";
+import mergeClassName from '../../tools/merge-class-name';
+
+class Input extends Component {
+  constructor(props) {
+    super(props);
+    const value = typeof props.value === 'undefined' ? props.defaultValue : props.value;
+    this.state = {
+      iValue: value,
+      focused: false,
+    }
+  }
+
+  componentDidMount() {
+    this.weChatInputBug();
+  }
+
+  componentWillReceiveProps(nextProps){
+    if(this.props.value !== nextProps.value) {
+      this.adjustSize();
+    }
+  }
+
+  isWeiXinAndIos() {
+    const ua = `${window.navigator.userAgent.toLowerCase()}`;
+    const isWeixin = /MicroMessenger/i.test(ua);
+    const isIos = /\(i[^;]+;( U;)? CPU.+Mac OS X/i.test(ua);
+    return isWeixin && isIos;
+  }
+
+  weChatInputBug() { // 解决微信键盘收起页面不回弹的问题
+    let myFunction;
+    const isWXAndIos = this.isWeiXinAndIos();
+    if (isWXAndIos) {
+      document.body.addEventListener('focusin', () => {
+        clearTimeout(myFunction);
+      });
+      document.body.addEventListener('focusout', () => {
+        clearTimeout(myFunction);
+        myFunction = setTimeout(() => {
+          window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+        }, 200);
+      });
+    }
+  }
+
+  bindRef = (el) => {
+    this.ref = el
+  }
+
+  invalidNumber = (value) => {
+    const { digits, type, positive } = this.props;
+    if (type !== 'number') return false;
+
+    let reg = positive ? '^\\d*' : '^-?\\d*';
+    if (digits === undefined) {
+      reg += '\\.?\\d*'
+    } else if (digits > 0) {
+      reg += `\\.?\\d{0,${digits}}`
+    }
+    reg += '$';
+    return !new RegExp(reg).test(value);
+  }
+  invalidEmoji = (value) => {
+    const reg = /(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]/g
+    return reg.test(value);
+  }
+
+  adjustSize = () => {
+    const input = this.ref;
+    const { type, autoSize } = this.props;
+    if (!(type === 'textarea' && autoSize) || !input) {
+      return;
+    }
+    console.log('input', input)
+    input.style.height = 'auto';
+
+    let height = input.scrollHeight;
+    if (typeof autoSize === 'object') {
+      const { maxHeight, minHeight } = autoSize;
+      if (maxHeight) {
+        height = Math.min(height, maxHeight);
+      }
+      if (minHeight) {
+        height = Math.max(height, minHeight);
+      }
+    }
+
+    if (height) {
+      input.style.height = height + 'px';
+    }
+  }
+
+  getValue() {
+    const { iValue } = this.state;
+    const { value } = this.props;
+    return typeof value === 'undefined' ? iValue : value;
+  }
+
+  handleClear = (e) => {
+    e.preventDefault(); // not blur
+    e.target.value = '';
+    this.handleChange(e, true);
+  }
+
+  handleFocus = (e) => {
+    const { onFocus } = this.props;
+    this.setState({
+      focused: true
+    });
+    if (onFocus instanceof Function) {
+      onFocus(e);
+    }
+  }
+
+  handleBlur = (e) => {
+    const { onBlur } = this.props;
+
+    this.setState({
+      focused: false
+    });
+
+    if (onBlur instanceof Function) {
+      onBlur(e);
+    }
+  }
+
+  handleChange = (e, clearClick) => {
+    if (clearClick) {
+      this.ref.focus()
+    }
+    const { value, onChange } = this.props;
+    if (e.target && this.invalidNumber(e.target.value)) return;
+    if (e.target && this.invalidEmoji(e.target.value)) return;
+    if (typeof value === 'undefined') {
+      this.setState({
+        iValue: e.target.value
+      }, this.adjustSize);
+    }
+    if (onChange instanceof Function) {
+      onChange(e);
+    }
+  }
+
+  renderWordLimit() {
+    const { showWordLimit, maxLength, type } = this.props;
+    if (showWordLimit && maxLength && type === 'textarea') {
+      return (
+        <div class={styles['word-limit']}>
+          {this.getValue().length}/{maxLength}
+        </div>
+      );
+    }
+  }
+  render() {
+    const {
+      focused,
+    } = this.state;
+
+    const {
+      style,
+      className,
+      type,
+      value,
+      defaultValue,
+      align,
+      readonly,
+      disabled,
+      border,
+      clearable,
+      placeholder,
+      maxLength,
+      showWordLimit,
+      onChange,
+      autoSize,
+      positive,
+      emoji,
+      placeholderStyle,
+      ...otherProps
+    } = this.props;
+
+    const isArea = type === 'textarea';
+    const val = this.getValue();
+
+    const inputProps = {
+      ref: this.bindRef,
+      type: type === 'password' ? type : 'text',
+      className: mergeClassName([
+        styles.input,
+        styles['input-not-border'],
+        styles[`input-placeholder-${placeholderStyle}`],
+      ]),
+      style: {
+        textAlign: align,
+      },
+      readOnly: readonly,
+      disabled: disabled,
+      placeholder: placeholder,
+      maxLength: maxLength,
+      ...otherProps,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onChange: this.handleChange,
+      value: val,
+    };
+
+    const component = isArea
+      ? <textarea {...inputProps} />
+      : <input  {...inputProps} />;
+
+    return (
+      <div
+        style={style}
+        className={
+          mergeClassName([
+            styles['input-wrap'],
+            !border && styles['input-not-border'],
+            isArea ? styles['input-wrap-column'] : styles['input-wrap-row'],
+            isArea && styles['input-textarea'],
+            className,
+          ])
+        }
+      >
+        {component}
+        {
+          clearable && !isArea && (
+            <div
+              style={{
+                visibility: focused && val ? 'visible' : 'hidden'
+              }}
+              className={styles['clearable']}
+              onMouseDown={this.handleClear}
+            />
+          )
+        }
+        {this.renderWordLimit()}
+      </div>
+    );
+  }
+}
+
+Input.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,
+  placeholderStyle: PropTypes.oneOfType(['light', 'default']),
+  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,
+  positive: PropTypes.bool,
+  rows: PropTypes.number,
+  onChange: PropTypes.func,
+  emoji: PropTypes.bool,
+};
+
+Input.defaultProps = {
+  type: 'text',
+  defaultValue: '',
+  align: 'left',
+  readonly: false,
+  disabled: false,
+  border: false,
+  rows: 1,
+  showWordLimit: false,
+  autoSize: true,
+  positive: false,
+  emoji: false,
+  placeholderStyle: 'default',
+};
+
+export default Input;

package/src/component/input/style.less

@@ -0,0 +1,77 @@
+@import "../../styles/var";
+
+.input-wrap {
+  display: flex;
+  //flex: 1;
+  //width: 100%;
+  flex-direction: row;
+  border: 1px solid @border-color;
+  border-radius: 2%;
+  padding: 2px 4px;
+
+  &-row {
+    flex-direction: row;
+  }
+
+  &-column {
+    flex-direction: column;
+  }
+  > input {
+    flex: 1;
+  }
+}
+
+.input {
+  display: block;
+  box-sizing: border-box;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  color: @text-color;
+  text-align: left;
+  background-color: transparent;
+  resize: none;
+  font-size: @size-normal;
+
+  &-placeholder{
+    &-default::placeholder{
+      color: @text-color-min;
+    }
+    &-light::placeholder{
+      line-height: 14px;
+      font-size: 12px;
+      color: @text-color-light;
+    }
+  }
+}
+
+.input + .clearable {
+  width: 16px;
+  height: 16px;
+  background-color: #ccc;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg fill='%23fff' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+  background-size: 16px auto;
+  background-position: 1.5px 1.5px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-left: 4px;
+}
+
+.input-not-border {
+  border: 0;
+  outline: none;
+}
+
+.word-limit {
+  margin-top: 4px;
+  color: #7d7e80;
+  font-size: 12px;
+  line-height: 16px;
+  text-align: right;
+}
+
+.input-textarea{
+  padding: 10px;
+  border-radius: @radius;
+}

package/src/component/list-view/index.js

@@ -0,0 +1,3 @@
+import ListView from './list-view';
+
+export default ListView;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from '../style.less';
+import mergeClassName from '../../../tools/merge-class-name';
+import Icons from '../../icons';
+
+const Empty = ({ text, size }) => (
+  <div className={styles.empty}>
+    <Icons name="nodata" className={mergeClassName([styles['empty-icon'], styles[`empty-size-${size}`]])} />
+    <text>{text}</text>
+  </div>
+);
+// size
+Empty.propTypes = {
+  text: PropTypes.node,
+  size: PropTypes.oneOf(['small', 'default', 'large']),
+};
+
+Empty.defaultProps = {
+  text: '暂无数据',
+};
+
+export default Empty;